saleor: initial cart integration

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

@@ -9,7 +9,7 @@ import {
   checkoutToCart,
 } from '../utils'
 import { Cart, CartItemBody } from '../types'
-import { Mutation, MutationCheckoutLineItemsAddArgs } from '../schema'
+import { Mutation, MutationCheckoutLinesAddArgs } from '../schema'
 
 export default useAddItem as UseAddItem<typeof handler>
 
@@ -27,13 +27,13 @@ export const handler: MutationHook<Cart, {}, CartItemBody> = {
       })
     }
 
-    const { checkoutLineItemsAdd } = await fetch<
+    const { checkoutLinesAdd } = await fetch<
       Mutation,
-      MutationCheckoutLineItemsAddArgs
+      MutationCheckoutLinesAddArgs
     >({
       ...options,
       variables: {
-        checkoutId: getCheckoutId(),
+        checkoutId: getCheckoutId().checkoutId,
         lineItems: [
           {
             variantId: item.variantId,
@@ -43,7 +43,7 @@ export const handler: MutationHook<Cart, {}, CartItemBody> = {
       },
     })
 
-    return checkoutToCart(checkoutLineItemsAdd)
+    return checkoutToCart(checkoutLinesAdd)
   },
   useHook: ({ fetch }) => () => {
     const { mutate } = useCart()

framework/saleor/cart/use-cart.tsx

@@ -6,7 +6,7 @@ import useCommerceCart, {
 
 import { Cart } from '../types'
 import { SWRHook } from '@commerce/utils/types'
-import { checkoutCreate, checkoutToCart } from '../utils'
+import { checkoutCreate, checkoutToCart, getCheckoutId } from '../utils'
 import getCheckoutQuery from '../utils/queries/get-checkout-query'
 
 export default useCommerceCart as UseCart<typeof handler>
@@ -27,7 +27,7 @@ export const handler: SWRHook<
       const data = await fetch({
         ...options,
         variables: {
-          checkoutId: checkoutId,
+          checkoutId: getCheckoutId().checkoutToken,
         },
       })
       checkout = data.node

framework/saleor/const.ts

@@ -1,2 +1,5 @@
 export const API_URL = process.env.NEXT_PUBLIC_SALEOR_API_URL
 export const API_CHANNEL = process.env.NEXT_PUBLIC_SALEOR_CHANNEL
+export const CHECKOUT_ID_COOKIE = 'saleorCheckoutID'
+
+

framework/saleor/provider.ts

@@ -15,6 +15,7 @@ import fetcher from './fetcher'
 export const saleorProvider = {
   locale: 'en-us',
   cartCookie: "",
+  cartCookieToken: "",
   fetcher,
   cart: { useCart, useAddItem, useUpdateItem, useRemoveItem },
   customer: { useCustomer },

framework/saleor/utils/checkout-create.ts

@@ -1,23 +1,27 @@
 import Cookies from 'js-cookie'
 
 import checkoutCreateMutation from './mutations/checkout-create'
-import { CheckoutCreatePayload } from '../schema'
+import { CheckoutCreate } from '../schema'
+import { CHECKOUT_ID_COOKIE } from '@framework/const'
 
 export const checkoutCreate = async (
   fetch: any
-): Promise<CheckoutCreatePayload> => {
+): Promise<CheckoutCreate> => {
   const data = await fetch({
     query: checkoutCreateMutation,
   })
 
   const checkout = data.checkoutCreate?.checkout
   const checkoutId = checkout?.id
+  const checkoutToken = checkout?.token 
+
+  const value = `${checkoutId}:${checkoutToken}`;
 
   if (checkoutId) {
     const options = {
       expires: 60 * 60 * 24 * 30,
     }
-    Cookies.set('saleorCheckoutID', checkoutId, options)
+    Cookies.set(CHECKOUT_ID_COOKIE, value, options)
   }
 
   return checkout

framework/saleor/utils/get-checkout-id.ts

@@ -1,5 +1,9 @@
+import Cookies from 'js-cookie'
+import { CHECKOUT_ID_COOKIE } from '../const'
+
 const getCheckoutId = (id?: string) => {
-  return id
+  const r = Cookies.get(CHECKOUT_ID_COOKIE)?.split(":") || [];
+  return { checkoutId: r[0], checkoutToken: r[1] }
 }
 
 export default getCheckoutId

framework/saleor/utils/mutations/checkout-create.ts

@@ -2,16 +2,19 @@ import { checkoutDetailsFragment } from '../queries/get-checkout-query'
 
 const checkoutCreateMutation = /* GraphQL */ `
   mutation createCheckout {
-    checkoutCreate(input: {}) {
-      checkoutUserErrors {
+    checkoutCreate(input: {
+      email: "customer@example.com", 
+      lines: [{quantity: 1, variantId: "UHJvZHVjdFZhcmlhbnQ6Mjk3"}], 
+      channel: "default-channel"
+    }) {
+      errors {
         code
         field
         message
       }
-      # Breaks GraphQL Codegen
-      # checkout { 
-      #    ${checkoutDetailsFragment}
-      # }
+      checkout { 
+        ${checkoutDetailsFragment}
+      }
     }
   }
 `

framework/saleor/utils/mutations/checkout-line-item-add.ts

@@ -1,16 +1,16 @@
 import { checkoutDetailsFragment } from '../queries/get-checkout-query'
 
 const checkoutLineItemAddMutation = /* GraphQL */ `
-  mutation checkoutLineItemAdd($checkoutId: ID!, $lineItems: [CheckoutLineItemInput!]!) {
-    checkoutLineItemsAdd(checkoutId: $checkoutId, lineItems: $lineItems) {
-      checkoutUserErrors {
+  mutation checkoutLineItemAdd($checkoutId: ID!, $lineItems: [CheckoutLineInput!]!) {
+    checkoutLinesAdd(checkoutId: $checkoutId, lines: $lineItems) {
+      errors {
         code
         field
         message
       }
-      # checkout {
-      #   ${checkoutDetailsFragment}
-      # }
+      checkout {
+        ${checkoutDetailsFragment}
+      }
     }
   }
 `

framework/saleor/utils/queries/get-checkout-query.ts

@@ -1,61 +1,11 @@
 export const checkoutDetailsFragment = `
   id
-  webUrl
-  subtotalPriceV2{
-    amount
-    currencyCode
-  }
-  totalTaxV2 {
-    amount
-    currencyCode
-  }
-  totalPriceV2 {
-    amount
-    currencyCode
-  }
-  completedAt
-  createdAt
-  taxesIncluded
-  lineItems(first: 250) {
-    pageInfo {
-      hasNextPage
-      hasPreviousPage
-    }
-    edges {
-      node {
-        id
-        title
-        variant {
-          id
-          sku
-          title
-          image {
-            originalSrc
-            altText
-            width
-            height
-          }
-          priceV2{
-            amount
-            currencyCode
-          }
-          compareAtPriceV2{
-            amount
-            currencyCode
-          }
-          product {
-            handle
-          }
-        }
-        quantity
-      }
-    }
-  }
+  token
 `
 
 const getCheckoutQuery = /* GraphQL */ `
-  query($checkoutId: ID!) {
-    node(id: $checkoutId) {
+  query($checkoutId: UUID!) {
+    checkout(token: $checkoutId) {
       ... on Checkout {
         ${checkoutDetailsFragment}
       }