Fixed types

commerce.config.json

@@ -1,7 +1,7 @@
 {
-  "provider": "bigcommerce",
+  "provider": "shopify",
   "features": {
-    "wishlist": true,
+    "wishlist": false,
     "customCheckout": false
   }
 }

components/product/helpers.ts

@@ -4,8 +4,7 @@ export type SelectedOptions = Record<string, string | null>
 export function getVariant(product: Product, opts: SelectedOptions) {
   const variant = product.variants.find((variant) => {
     return Object.entries(opts).every(([key, value]) =>
-      value
-        ? variant.options.find((option) => {
+      variant.options.find((option) => {
         if (
           option.__typename === 'MultipleChoiceOption' &&
           option.displayName.toLowerCase() === key.toLowerCase()
@@ -13,9 +12,6 @@ export function getVariant(product: Product, opts: SelectedOptions) {
           return option.values.find((v) => v.label.toLowerCase() === value)
         }
       })
-        : !variant.options.find(
-            (v) => v.displayName.toLowerCase() === key.toLowerCase()
-          )
     )
   })
   return variant

framework/shopify/cart/use-cart.tsx

@@ -27,7 +27,7 @@ export const handler: SWRHook<
       const data = await fetch({
         ...options,
         variables: {
-          checkoutId,
+          checkoutId: checkoutId,
         },
       })
       checkout = data.node

framework/shopify/fetcher.ts

@@ -2,9 +2,14 @@ import { Fetcher } from '@commerce/utils/types'
 import { API_TOKEN, API_URL } from './const'
 import { handleFetchResponse } from './utils'
 
-const fetcher: Fetcher = async ({ method = 'POST', variables, query }) => {
+const fetcher: Fetcher = async ({
+  url = API_URL,
+  method = 'POST',
+  variables,
+  query,
+}) => {
   return handleFetchResponse(
-    await fetch(API_URL, {
+    await fetch(url, {
       method,
       body: JSON.stringify({ query, variables }),
       headers: {

framework/shopify/index.tsx

@@ -28,8 +28,7 @@ export type ShopifyProps = {
 export function CommerceProvider({ children, ...config }: ShopifyProps) {
   return (
     <CoreCommerceProvider
-      // TODO: Fix this type
-      provider={shopifyProvider as any}
+      provider={shopifyProvider}
       config={{ ...shopifyConfig, ...config }}
     >
       {children}

framework/shopify/provider.ts

@@ -1,4 +1,4 @@
-import { SHOPIFY_CHECKOUT_ID_COOKIE, STORE_DOMAIN } from './const'
+import { SHOPIFY_CHECKOUT_ID_COOKIE } from './const'
 
 import { handler as useCart } from './cart/use-cart'
 import { handler as useAddItem } from './cart/use-add-item'
@@ -17,7 +17,6 @@ import fetcher from './fetcher'
 export const shopifyProvider = {
   locale: 'en-us',
   cartCookie: SHOPIFY_CHECKOUT_ID_COOKIE,
-  storeDomain: STORE_DOMAIN,
   fetcher,
   cart: { useCart, useAddItem, useUpdateItem, useRemoveItem },
   customer: { useCustomer },

framework/shopify/types.ts

@@ -7,13 +7,11 @@ export type ShopifyCheckout = {
   lineItems: CheckoutLineItem[]
 }
 
-export interface Cart extends Core.Cart {
-  id: string
+export type Cart = Core.Cart & {
   lineItems: LineItem[]
 }
-
 export interface LineItem extends Core.LineItem {
-  options: any[]
+  options?: any[]
 }
 
 /**

framework/shopify/utils/storage.ts

@@ -1,13 +0,0 @@
-export const getCheckoutIdFromStorage = (token: string) => {
-  if (window && window.sessionStorage) {
-    return window.sessionStorage.getItem(token)
-  }
-
-  return null
-}
-
-export const setCheckoutIdInStorage = (token: string, id: string | number) => {
-  if (window && window.sessionStorage) {
-    return window.sessionStorage.setItem(token, id + '')
-  }
-}

framework/shopify/wishlist/use-add-item.tsx

@@ -1,34 +1,13 @@
 import { useCallback } from 'react'
-import type { MutationHook } from '@commerce/utils/types'
-import { CommerceError } from '@commerce/utils/errors'
-import useAddItem, { UseAddItem } from '@commerce/wishlist/use-add-item'
 
-import useCustomer from '../customer/use-customer'
-import useWishlist from './use-wishlist'
-
-export default useAddItem as UseAddItem<typeof handler>
-
-export const handler: MutationHook<any, {}, any, any> = {
-  fetchOptions: {
-    query: '',
-  },
-  useHook: ({ fetch }) => () => {
-    const { data: customer } = useCustomer()
-    const { revalidate } = useWishlist()
-
-    return useCallback(
-      async function addItem(item) {
-        if (!customer) {
-          // A signed customer is required in order to have a wishlist
-          throw new CommerceError({
-            message: 'Signed customer not found',
-          })
+export function emptyHook() {
+  const useEmptyHook = async (options = {}) => {
+    return useCallback(async function () {
+      return Promise.resolve()
+    }, [])
   }
 
-        await revalidate()
-        return null
-      },
-      [fetch, revalidate, customer]
-    )
-  },
+  return useEmptyHook
 }
+
+export default emptyHook

framework/shopify/wishlist/use-remove-item.tsx

@@ -1,36 +1,17 @@
 import { useCallback } from 'react'
-import type { MutationHook } from '@commerce/utils/types'
-import { CommerceError } from '@commerce/utils/errors'
-import useRemoveItem, {
-  UseRemoveItem,
-} from '@commerce/wishlist/use-remove-item'
 
-import useCustomer from '../customer/use-customer'
-import useWishlist from './use-wishlist'
+type Options = {
+  includeProducts?: boolean
+}
 
-export default useRemoveItem as UseRemoveItem<typeof handler>
-
-export const handler: MutationHook<any, {}, any, any> = {
-  fetchOptions: {
-    query: '',
-  },
-  useHook: ({ fetch }) => () => {
-    const { data: customer } = useCustomer()
-    const { revalidate } = useWishlist()
-
-    return useCallback(
-      async function addItem(item) {
-        if (!customer) {
-          // A signed customer is required in order to have a wishlist
-          throw new CommerceError({
-            message: 'Signed customer not found',
-          })
+export function emptyHook(options?: Options) {
+  const useEmptyHook = async ({ id }: { id: string | number }) => {
+    return useCallback(async function () {
+      return Promise.resolve()
+    }, [])
   }
 
-        await revalidate()
-        return null
-      },
-      [fetch, revalidate, customer]
-    )
-  },
+  return useEmptyHook
 }
+
+export default emptyHook

framework/shopify/wishlist/use-wishlist.tsx

@@ -1,49 +1,46 @@
-import { useMemo } from 'react'
-import { SWRHook } from '@commerce/utils/types'
-import useWishlist, { UseWishlist } from '@commerce/wishlist/use-wishlist'
-import useCustomer from '../customer/use-customer'
+// TODO: replace this hook and other wishlist hooks with a handler, or remove them if
+// Shopify doesn't have a wishlist
 
-export type UseWishlistInput = { includeProducts?: boolean }
+import { HookFetcher } from '@commerce/utils/types'
+import { Product } from '../schema'
 
-export default useWishlist as UseWishlist<typeof handler>
+const defaultOpts = {}
 
-export const handler: SWRHook<
-  any | null,
-  UseWishlistInput,
-  { customerId?: number } & UseWishlistInput,
-  { isEmpty?: boolean }
-> = {
-  fetchOptions: {
-    url: '/api/bigcommerce/wishlist',
-    method: 'GET',
-  },
-  fetcher() {
-    return { items: [] }
-  },
-  useHook: ({ useData }) => (input) => {
-    const { data: customer } = useCustomer()
-    const response = useData({
-      input: [
-        ['customerId', customer?.entityId],
-        ['includeProducts', input?.includeProducts],
-      ],
-      swrOptions: {
-        revalidateOnFocus: false,
-        ...input?.swrOptions,
-      },
-    })
-
-    return useMemo(
-      () =>
-        Object.create(response, {
-          isEmpty: {
-            get() {
-              return (response.data?.items?.length || 0) <= 0
-            },
-            enumerable: true,
-          },
-        }),
-      [response]
-    )
-  },
+export type Wishlist = {
+  items: [
+    {
+      product_id: number
+      variant_id: number
+      id: number
+      product: Product
+    }
+  ]
 }
+
+export interface UseWishlistOptions {
+  includeProducts?: boolean
+}
+
+export interface UseWishlistInput extends UseWishlistOptions {
+  customerId?: number
+}
+
+export const fetcher: HookFetcher<Wishlist | null, UseWishlistInput> = () => {
+  return null
+}
+
+export function extendHook(
+  customFetcher: typeof fetcher,
+  // swrOptions?: SwrOptions<Wishlist | null, UseWishlistInput>
+  swrOptions?: any
+) {
+  const useWishlist = ({ includeProducts }: UseWishlistOptions = {}) => {
+    return { data: null }
+  }
+
+  useWishlist.extend = extendHook
+
+  return useWishlist
+}
+
+export default extendHook(fetcher)

pages/[...pages].tsx

@@ -25,8 +25,7 @@ export async function getStaticProps({
   const pageItem = pages.find((p) => (p.url ? getSlug(p.url) === slug : false))
   const data =
     pageItem &&
-    // TODO: Shopify - Fix this type
-    (await getPage({ variables: { id: pageItem.id! } as any, config, preview }))
+    (await getPage({ variables: { id: pageItem.id! }, config, preview }))
   const page = data?.page
 
   if (!page) {

pages/customer/activate.tsx

@@ -1,26 +0,0 @@
-import type { GetStaticPropsContext } from 'next'
-import { getConfig } from '@framework/api'
-import getAllPages from '@framework/common/get-all-pages'
-import { Layout } from '@components/common'
-import { Container, Text } from '@components/ui'
-
-export async function getStaticProps({
-  preview,
-  locale,
-}: GetStaticPropsContext) {
-  const config = getConfig({ locale })
-  const { pages } = await getAllPages({ config, preview })
-  return {
-    props: { pages },
-  }
-}
-
-export default function ActivateAccount() {
-  return (
-    <Container>
-      <Text variant="pageHeading">Activate Your Account</Text>
-    </Container>
-  )
-}
-
-ActivateAccount.Layout = Layout

tsconfig.json

@@ -22,8 +22,8 @@
       "@components/*": ["components/*"],
       "@commerce": ["framework/commerce"],
       "@commerce/*": ["framework/commerce/*"],
-      "@framework": ["framework/bigcommerce"],
-      "@framework/*": ["framework/bigcommerce/*"]
+      "@framework": ["framework/shopify"],
+      "@framework/*": ["framework/shopify/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],