Create checkout on add to cart

framework/bigcommerce/cart/use-add-item.tsx

@@ -29,7 +29,9 @@ export const handler: MutationHook<AddItemHook> = {
 
     return data
   },
-  useHook: ({ fetch }) => () => {
+  useHook:
+    ({ fetch }) =>
+    () => {
       const { mutate } = useCart()
 
       return useCallback(

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

@@ -9,6 +9,7 @@ import {
   checkoutLineItemAddMutation,
   getCheckoutId,
   checkoutToCart,
+  checkoutCreate,
 } from '../utils'
 import { Mutation, MutationCheckoutLineItemsAddArgs } from '../schema'
 
@@ -28,13 +29,20 @@ export const handler: MutationHook<AddItemHook> = {
       })
     }
 
+    let checkoutId = getCheckoutId()
+
+    if (!checkoutId) {
+      const checkout = await checkoutCreate(fetch)
+      checkoutId = checkout.id
+    }
+
     const { checkoutLineItemsAdd } = await fetch<
       Mutation,
       MutationCheckoutLineItemsAddArgs
     >({
       ...options,
       variables: {
-        checkoutId: getCheckoutId(),
+        checkoutId,
         lineItems: [
           {
             variantId: item.variantId,
@@ -46,7 +54,9 @@ export const handler: MutationHook<AddItemHook> = {
 
     return checkoutToCart(checkoutLineItemsAdd)
   },
-  useHook: ({ fetch }) => () => {
+  useHook:
+    ({ fetch }) =>
+    () => {
       const { mutate } = useCart()
 
       return useCallback(

framework/shopify/cart/use-cart.tsx

@@ -6,38 +6,29 @@ import { checkoutCreate, checkoutToCart } from '../utils'
 import getCheckoutQuery from '../utils/queries/get-checkout-query'
 import { GetCartHook } from '../types/cart'
 
-import {
-  GetCheckoutQuery,
-  GetCheckoutQueryVariables,
-  CheckoutDetailsFragment,
-} from '../schema'
-
 export default useCommerceCart as UseCart<typeof handler>
 
 export const handler: SWRHook<GetCartHook> = {
   fetchOptions: {
     query: getCheckoutQuery,
   },
-  async fetcher({ input: { cartId: checkoutId }, options, fetch }) {
+  async fetcher({ input: { cartId }, options, fetch }) {
-    let checkout
+    if (cartId) {
-
+      const { node } = await fetch({
-    if (checkoutId) {
-      const data = await fetch({
         ...options,
         variables: {
-          checkoutId: checkoutId,
+          checkoutId: cartId,
         },
       })
-      checkout = data.node
+      return checkoutToCart({
+        checkout: node?.completedAt ? await checkoutCreate(fetch) : node,
+      })
     }
-
+    return null
-    if (checkout?.completedAt || !checkoutId) {
-      checkout = await checkoutCreate(fetch)
-    }
-
-    return checkoutToCart({ checkout })
   },
-  useHook: ({ useData }) => (input) => {
+  useHook:
+    ({ useData }) =>
+    (input) => {
       const response = useData({
         swrOptions: { revalidateOnFocus: false, ...input?.swrOptions },
       })

framework/shopify/utils/checkout-create.ts

@@ -7,11 +7,9 @@ import {
 } from '../const'
 
 import checkoutCreateMutation from './mutations/checkout-create'
-import { CheckoutCreatePayload } from '../schema'
+import { Checkout } from '../schema'
 
-export const checkoutCreate = async (
+export const checkoutCreate = async (fetch: any): Promise<Checkout> => {
-  fetch: any
-): Promise<CheckoutCreatePayload> => {
   const data = await fetch({
     query: checkoutCreateMutation,
   })

tsconfig.json

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