fix cart update and add API calls to work for logged-in users

Signed-off-by: Loan Laux <loan@outgrow.io>

framework/reactioncommerce/api/cart/handlers/add-item.ts

@@ -6,14 +6,16 @@ import {
 import getCartCookie from '@framework/api/utils/get-cart-cookie'
 import {
   REACTION_ANONYMOUS_CART_TOKEN_COOKIE,
-  REACTION_ANONYMOUS_CART_ID_COOKIE,
+  REACTION_CART_ID_COOKIE,
+  REACTION_CUSTOMER_TOKEN_COOKIE,
 } from '@framework/const'
 
 const addItem: CartHandlers['addItem'] = async ({
   req: {
     cookies: {
       [REACTION_ANONYMOUS_CART_TOKEN_COOKIE]: anonymousCartToken,
-      [REACTION_ANONYMOUS_CART_ID_COOKIE]: cartId,
+      [REACTION_CART_ID_COOKIE]: cartId,
+      [REACTION_CUSTOMER_TOKEN_COOKIE]: reactionCustomerToken,
     },
   },
   res,
@@ -23,6 +25,13 @@ const addItem: CartHandlers['addItem'] = async ({
   console.log('add-item API', item.productId)
   console.log('variantId', item.variantId)
 
+  if (!cartId) {
+    return res.status(400).json({
+      data: null,
+      errors: [{ message: 'Missing cartId cookie' }],
+    })
+  }
+
   if (!item) {
     return res.status(400).json({
       data: null,
@@ -60,18 +69,34 @@ const addItem: CartHandlers['addItem'] = async ({
         999
       ),
       getCartCookie(
-        config.anonymousCartIdCookie,
+        config.cartIdCookie,
         createdCart.data.createCart.cart._id,
         999
       ),
     ])
     return res.status(200).json(createdCart.data)
-  } else if (cartId && anonymousCartToken) {
+  }
-    const updatedCart = await config.fetch(addCartItemsMutation, {
+
+  const anonymousTokenParam = <any>{}
+  const authorizationHeaderParam = <any>{}
+
+  if (anonymousCartToken) {
+    anonymousTokenParam.cartToken = anonymousCartToken
+  }
+
+  if (reactionCustomerToken) {
+    authorizationHeaderParam[
+      'Authorization'
+    ] = `Bearer ${reactionCustomerToken}`
+  }
+
+  const updatedCart = await config.fetch(
+    addCartItemsMutation,
+    {
       variables: {
         input: {
           cartId,
-          cartToken: anonymousCartToken,
+          ...anonymousTokenParam,
           items: [
             {
               productConfiguration: {
@@ -84,14 +109,17 @@ const addItem: CartHandlers['addItem'] = async ({
           ],
         },
       },
-    })
+    },
+    {
+      headers: {
+        ...authorizationHeaderParam,
+      },
+    }
+  )
 
-    console.log('updatedCart', updatedCart)
+  console.log('updatedCart', updatedCart)
 
-    return res.status(200).json(updatedCart.data)
+  return res.status(200).json(updatedCart.data)
-  }
-
-  res.status(200)
 }
 
 export default addItem

framework/reactioncommerce/api/cart/handlers/get-cart.ts

@@ -7,7 +7,7 @@ import getCartCookie from '@framework/api/utils/get-cart-cookie'
 import getViewerId from '@framework/customer/get-viewer-id'
 import {
   REACTION_ANONYMOUS_CART_TOKEN_COOKIE,
-  REACTION_ANONYMOUS_CART_ID_COOKIE,
+  REACTION_CART_ID_COOKIE,
   REACTION_CUSTOMER_TOKEN_COOKIE,
 } from '@framework/const.ts'
 import { normalizeCart } from '@framework/utils'
@@ -17,14 +17,14 @@ const getCart: CartHandlers['getCart'] = async ({ req, res, config }) => {
   const {
     cookies: {
       [REACTION_ANONYMOUS_CART_TOKEN_COOKIE]: anonymousCartToken,
-      [REACTION_ANONYMOUS_CART_ID_COOKIE]: anonymousCartId,
+      [REACTION_CART_ID_COOKIE]: cartId,
       [REACTION_CUSTOMER_TOKEN_COOKIE]: reactionCustomerToken,
     },
   } = req
 
   let normalizedCart
 
-  if (anonymousCartId && anonymousCartToken && reactionCustomerToken) {
+  if (cartId && anonymousCartToken && reactionCustomerToken) {
     const {
       data: {
         reconcileCarts: { cart: rawReconciledCart },
@@ -34,7 +34,7 @@ const getCart: CartHandlers['getCart'] = async ({ req, res, config }) => {
       {
         variables: {
           input: {
-            anonymousCartId,
+            anonymousCartId: cartId,
             cartToken: anonymousCartToken,
             shopId: config.shopId,
           },
@@ -49,23 +49,23 @@ const getCart: CartHandlers['getCart'] = async ({ req, res, config }) => {
 
     normalizedCart = normalizeCart(rawReconciledCart)
 
-    // Clear the anonymous cart cookies, as we're now using an account-tied cart
+    // Clear the anonymous cart token cookie and update cart ID cookie
     res.setHeader('Set-Cookie', [
       getCartCookie(config.anonymousCartTokenCookie),
-      getCartCookie(config.anonymousCartIdCookie),
+      getCartCookie(config.cartIdCookie, normalizedCart.id, 999),
     ])
-  } else if (anonymousCartId && anonymousCartToken) {
+  } else if (cartId && anonymousCartToken) {
     const {
       data: { cart: rawAnonymousCart },
     } = await config.fetch(getAnomymousCartQuery, {
       variables: {
-        cartId: anonymousCartId,
+        cartId,
         cartToken: anonymousCartToken,
       },
     })
 
     normalizedCart = normalizeCart(rawAnonymousCart)
-  } else if (reactionCustomerToken && !anonymousCartToken && !anonymousCartId) {
+  } else if (reactionCustomerToken && !anonymousCartToken) {
     const accountId = await getViewerId({
       customerToken: reactionCustomerToken,
       config,
@@ -89,11 +89,18 @@ const getCart: CartHandlers['getCart'] = async ({ req, res, config }) => {
     )
 
     normalizedCart = normalizeCart(rawAccountCart)
+
+    if (cartId !== normalizedCart.id) {
+      res.setHeader(
+        'Set-Cookie',
+        getCartCookie(config.cartIdCookie, rawAccountCart._id, 999)
+      )
+    }
   } else {
-    // If there's no cart for now, return a dummy cart ID to keep Next Commerce happy
+    // If there's no cart for now, store a dummy cart ID to keep Next Commerce happy
     res.setHeader(
       'Set-Cookie',
-      getCartCookie(config.anonymousCartIdCookie, config.dummyEmptyCartId, 999)
+      getCartCookie(config.cartIdCookie, config.dummyEmptyCartId, 999)
     )
   }
 

framework/reactioncommerce/api/index.ts

@@ -3,7 +3,7 @@ import type { CommerceAPIConfig } from '@commerce/api'
 import {
   API_URL,
   REACTION_ANONYMOUS_CART_TOKEN_COOKIE,
-  REACTION_ANONYMOUS_CART_ID_COOKIE,
+  REACTION_CART_ID_COOKIE,
   REACTION_EMPTY_DUMMY_CART_ID,
   REACTION_CUSTOMER_TOKEN_COOKIE,
   REACTION_COOKIE_EXPIRE,
@@ -43,7 +43,7 @@ const config = new Config({
   locale: 'en-US',
   commerceUrl: API_URL,
   anonymousCartTokenCookie: REACTION_ANONYMOUS_CART_TOKEN_COOKIE,
-  anonymousCartIdCookie: REACTION_ANONYMOUS_CART_ID_COOKIE,
+  cartIdCookie: REACTION_CART_ID_COOKIE,
   dummyEmptyCartId: REACTION_EMPTY_DUMMY_CART_ID,
   anonymousCartTokenCookieMaxAge: REACTION_COOKIE_EXPIRE,
   fetch: fetchGraphqlApi,

framework/reactioncommerce/cart/use-remove-item.tsx

@@ -16,7 +16,7 @@ import useCart from './use-cart'
 import {
   removeCartItemsMutation,
   getAnonymousCartToken,
-  getCartId,
+  getAnonymousCartId,
   normalizeCart,
 } from '../utils'
 import { Cart, LineItem } from '../types'
@@ -49,7 +49,7 @@ export const handler = {
       ...options,
       variables: {
         input: {
-          cartId: getCartId(),
+          cartId: getAnonymousCartId(),
           cartToken: getAnonymousCartToken(),
           cartItemIds: [itemId],
         },

framework/reactioncommerce/cart/use-update-item.tsx

@@ -15,7 +15,7 @@ import { handler as removeItemHandler } from './use-remove-item'
 import type { Cart, LineItem, UpdateCartItemBody } from '../types'
 import {
   getAnonymousCartToken,
-  getCartId,
+  getAnonymousCartId,
   updateCartItemsQuantityMutation,
   normalizeCart,
 } from '../utils'
@@ -59,7 +59,7 @@ export const handler = {
       ...options,
       variables: {
         updateCartItemsQuantityInput: {
-          cartId: getCartId(),
+          cartId: getAnonymousCartId(),
           cartToken: getAnonymousCartToken(),
           items: [
             {

framework/reactioncommerce/const.ts

@@ -1,7 +1,7 @@
 export const REACTION_ANONYMOUS_CART_TOKEN_COOKIE =
   'reaction_anonymousCartToken'
 
-export const REACTION_ANONYMOUS_CART_ID_COOKIE = 'reaction_cartId'
+export const REACTION_CART_ID_COOKIE = 'reaction_cartId'
 
 export const REACTION_EMPTY_DUMMY_CART_ID = 'DUMMY_EMPTY_CART_ID'
 

framework/reactioncommerce/provider.ts

@@ -1,6 +1,6 @@
 import {
   REACTION_ANONYMOUS_CART_TOKEN_COOKIE,
-  REACTION_ANONYMOUS_CART_ID_COOKIE,
+  REACTION_CART_ID_COOKIE,
   STORE_DOMAIN,
 } from './const'
 
@@ -21,7 +21,7 @@ import fetcher from './fetcher'
 export const reactionCommerceProvider = {
   locale: 'en-us',
   anonymousCartTokenCookie: REACTION_ANONYMOUS_CART_TOKEN_COOKIE,
-  anonymousCartIdCookie: REACTION_ANONYMOUS_CART_ID_COOKIE,
+  cartIdCookie: REACTION_CART_ID_COOKIE,
   storeDomain: STORE_DOMAIN,
   fetcher,
   cart: { useCart, useAddItem, useUpdateItem, useRemoveItem },

framework/reactioncommerce/utils/get-cart-id.ts

@@ -1,8 +1,8 @@
 import Cookies from 'js-cookie'
-import { REACTION_ANONYMOUS_CART_ID_COOKIE } from '../const'
+import { REACTION_CART_ID_COOKIE } from '../const'
 
 const getCartId = (id?: string) => {
-  return id ?? Cookies.get(REACTION_ANONYMOUS_CART_ID_COOKIE)
+  return id ?? Cookies.get(REACTION_CART_ID_COOKIE)
 }
 
 export default getCartId

framework/reactioncommerce/utils/index.ts

@@ -4,7 +4,7 @@ export { default as getSortVariables } from './get-sort-variables'
 export { default as getVendors } from './get-vendors'
 export { default as getCategories } from './get-categories'
 export { default as getAnonymousCartToken } from './get-anonymous-cart-token'
-export { default as getCartId } from './get-cart-id'
+export { default as getAnonymousCartId } from './get-cart-id'
 export * from './queries'
 export * from './mutations'
 export * from './normalize'