Shopify: create checkout on add to cart (#432)

* Create checkout on add to cart

* Checkout changes

* Revert files

* Fix checkout

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

@@ -9,6 +9,7 @@ import {
   checkoutLineItemAddMutation,
   getCheckoutId,
   checkoutToCart,
+  checkoutCreate,
 } from '../utils'
 import { Mutation, MutationCheckoutLineItemsAddArgs } from '../schema'
 
@@ -28,34 +29,42 @@ export const handler: MutationHook<AddItemHook> = {
       })
     }
 
-    const { checkoutLineItemsAdd } = await fetch<
-      Mutation,
-      MutationCheckoutLineItemsAddArgs
-    >({
-      ...options,
-      variables: {
-        checkoutId: getCheckoutId(),
-        lineItems: [
-          {
-            variantId: item.variantId,
-            quantity: item.quantity ?? 1,
-          },
-        ],
+    const lineItems = [
+      {
+        variantId: item.variantId,
+        quantity: item.quantity ?? 1,
       },
-    })
+    ]
 
-    return checkoutToCart(checkoutLineItemsAdd)
-  },
-  useHook: ({ fetch }) => () => {
-    const { mutate } = useCart()
+    let checkoutId = getCheckoutId()
 
-    return useCallback(
-      async function addItem(input) {
-        const data = await fetch({ input })
-        await mutate(data, false)
-        return data
-      },
-      [fetch, mutate]
-    )
+    if (!checkoutId) {
+      return checkoutToCart(await checkoutCreate(fetch, lineItems))
+    } else {
+      const { checkoutLineItemsAdd } = await fetch<
+        Mutation,
+        MutationCheckoutLineItemsAddArgs
+      >({
+        ...options,
+        variables: {
+          checkoutId,
+          lineItems,
+        },
+      })
+      return checkoutToCart(checkoutLineItemsAdd)
+    }
   },
+  useHook:
+    ({ fetch }) =>
+    () => {
+      const { mutate } = useCart()
+      return useCallback(
+        async function addItem(input) {
+          const data = await fetch({ input })
+          await mutate(data, false)
+          return data
+        },
+        [fetch, mutate]
+      )
+    },
 }

framework/shopify/cart/use-cart.tsx

@@ -2,15 +2,15 @@ import { useMemo } from 'react'
 import useCommerceCart, { UseCart } from '@commerce/cart/use-cart'
 
 import { SWRHook } from '@commerce/utils/types'
-import { checkoutCreate, checkoutToCart } from '../utils'
+import { checkoutToCart } from '../utils'
 import getCheckoutQuery from '../utils/queries/get-checkout-query'
 import { GetCartHook } from '../types/cart'
+import Cookies from 'js-cookie'
 
 import {
-  GetCheckoutQuery,
-  GetCheckoutQueryVariables,
-  CheckoutDetailsFragment,
-} from '../schema'
+  SHOPIFY_CHECKOUT_ID_COOKIE,
+  SHOPIFY_CHECKOUT_URL_COOKIE,
+} from '../const'
 
 export default useCommerceCart as UseCart<typeof handler>
 
@@ -18,40 +18,43 @@ export const handler: SWRHook<GetCartHook> = {
   fetchOptions: {
     query: getCheckoutQuery,
   },
-  async fetcher({ input: { cartId: checkoutId }, options, fetch }) {
-    let checkout
-
-    if (checkoutId) {
-      const data = await fetch({
+  async fetcher({ input: { cartId }, options, fetch }) {
+    if (cartId) {
+      const { node: checkout } = await fetch({
         ...options,
         variables: {
-          checkoutId: checkoutId,
+          checkoutId: cartId,
         },
       })
-      checkout = data.node
+      if (checkout?.completedAt) {
+        Cookies.remove(SHOPIFY_CHECKOUT_ID_COOKIE)
+        Cookies.remove(SHOPIFY_CHECKOUT_URL_COOKIE)
+        return null
+      } else {
+        return checkoutToCart({
+          checkout,
+        })
+      }
     }
-
-    if (checkout?.completedAt || !checkoutId) {
-      checkout = await checkoutCreate(fetch)
-    }
-
-    return checkoutToCart({ checkout })
+    return null
   },
-  useHook: ({ useData }) => (input) => {
-    const response = useData({
-      swrOptions: { revalidateOnFocus: false, ...input?.swrOptions },
-    })
-    return useMemo(
-      () =>
-        Object.create(response, {
-          isEmpty: {
-            get() {
-              return (response.data?.lineItems.length ?? 0) <= 0
+  useHook:
+    ({ useData }) =>
+    (input) => {
+      const response = useData({
+        swrOptions: { revalidateOnFocus: false, ...input?.swrOptions },
+      })
+      return useMemo(
+        () =>
+          Object.create(response, {
+            isEmpty: {
+              get() {
+                return (response.data?.lineItems.length ?? 0) <= 0
+              },
+              enumerable: true,
             },
-            enumerable: true,
-          },
-        }),
-      [response]
-    )
-  },
+          }),
+        [response]
+      )
+    },
 }