saleor: fix the checkout flow

framework/saleor/api/index.ts

@@ -1,20 +1,13 @@
 import type { CommerceAPIConfig } from '@commerce/api'
 
-import {
-  API_URL,
-  API_CHANNEL,
-} from '../const'
+import * as Const from '../const'
 
-if (!API_URL) {
-  throw new Error(
-    `The environment variable NEXT_SALEOR_API_URL is missing and it's required to access your store`
-  )
+if (!Const.API_URL) {
+  throw new Error(`The environment variable NEXT_SALEOR_API_URL is missing and it's required to access your store`)
 }
 
-if (!API_CHANNEL) {
-  throw new Error(
-    `The environment variable NEXT_SALEOR_CHANNEL is missing and it's required to access your store`
-  )
+if (!Const.API_CHANNEL) {
+  throw new Error(`The environment variable NEXT_SALEOR_CHANNEL is missing and it's required to access your store`)
 }
 
 import fetchGraphqlApi from './utils/fetch-graphql-api'
@@ -44,13 +37,13 @@ export class Config {
 
 const config = new Config({
   locale: 'en-US',
-  commerceUrl: API_URL,
-  apiToken: "saleor.Token",
-  cartCookie: "saleor.CheckoutID",
+  commerceUrl: Const.API_URL,
+  apiToken: Const.SALEOR_TOKEN,
+  cartCookie: Const.CHECKOUT_ID_COOKIE, 
   cartCookieMaxAge: 60 * 60 * 24 * 30,
   fetch: fetchGraphqlApi,
   customerCookie: "",
-  storeChannel: API_CHANNEL,
+  storeChannel: Const.API_CHANNEL,
 })
 
 export function getConfig(userConfig?: Partial<SaleorConfig>) {

framework/saleor/auth/use-logout.tsx

@@ -3,7 +3,7 @@ import type { MutationHook } from '@commerce/utils/types'
 import useLogout, { UseLogout } from '@commerce/auth/use-logout'
 import useCustomer from '../customer/use-customer'
 import * as mutation from '../utils/mutations'
-import { setToken } from '../utils/customer-token'
+import { setCSRFToken, setToken, setCheckoutToken } from '../utils/customer-token'
 
 export default useLogout as UseLogout<typeof handler>
 
@@ -16,7 +16,11 @@ export const handler: MutationHook<null> = {
       ...options,
       variables: {},
     })
+
     setToken()
+    setCSRFToken()
+    setCheckoutToken()
+
     return null
   },
   useHook: ({ fetch }) => () => {

framework/saleor/cart/use-cart.tsx

@@ -24,11 +24,10 @@ export const handler: SWRHook<
     let checkout
 
     if (checkoutId) {
+      const checkoutId = getCheckoutId().checkoutToken;
       const data = await fetch({
         ...options,
-        variables: {
-          checkoutId: getCheckoutId().checkoutToken,
-        },
+        variables: { checkoutId },
       })
 
       checkout = data;

framework/saleor/const.ts

@@ -1,5 +1,7 @@
 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 = 'saleor.CheckoutID'
+export const SALEOR_TOKEN = 'saleor.Token'
+export const SALEOR_CRSF_TOKEN = 'saleor.CSRFToken'
 
 

framework/saleor/fetcher.ts

@@ -9,7 +9,7 @@ const fetcher: Fetcher = async ({
   query,
 }) => {
   const token = getToken();
-  
+
   return handleFetchResponse(
     await fetch(url!, {
       method,

framework/saleor/index.tsx

@@ -8,13 +8,14 @@ import {
 } from '@commerce'
 
 import { saleorProvider, SaleorProvider } from './provider'
+import * as Const from './const'; 
 
 export { saleorProvider }
 export type { SaleorProvider }
 
 export const saleorConfig: CommerceConfig = {
   locale: 'en-us',
-  cartCookie: "saleorCheckoutID",
+  cartCookie: Const.CHECKOUT_ID_COOKIE 
 }
 
 export type SaleorConfig = Partial<CommerceConfig>

framework/saleor/utils/customer-token.ts

@@ -1,13 +1,19 @@
 import Cookies, { CookieAttributes } from 'js-cookie'
+import * as Const from '../const';
 
-export const getToken = () => Cookies.get('saleor.Token')
+export const getToken = () => Cookies.get(Const.SALEOR_TOKEN)
 export const setToken = (token?: string, options?: CookieAttributes) => {
-  setCookie('saleor.Token', token, options)
+  setCookie(Const.SALEOR_TOKEN, token, options)
 }
 
-export const getCSRFToken = () => Cookies.get('saleor.CSRFToken')
+export const getCSRFToken = () => Cookies.get(Const.SALEOR_CRSF_TOKEN)
 export const setCSRFToken = (token?: string, options?: CookieAttributes) => {
-  setCookie('saleor.CSRFToken', token, options)
+  setCookie(Const.SALEOR_CRSF_TOKEN, token, options)
+}
+
+export const getCheckoutToken = () => Cookies.get(Const.CHECKOUT_ID_COOKIE)
+export const setCheckoutToken = (token?: string, options?: CookieAttributes) => {
+  setCookie(Const.CHECKOUT_ID_COOKIE, token, options)
 }
 
 const setCookie = (name: string, token?: string, options?: CookieAttributes) => {