fix: using graphql api to use cart (#853)

* fix: using graphql api to use cart

* fix: delete console log

* fix(BUN-1681): type nits

* fix: sending correctly text value in payload

* fix: adding slice for getting store info

* fix: using platform from store

* fix: improving storo info save data

---------

Co-authored-by: Victor Campos <victor.campos@bigcommerce.com>

apps/storefront/package.json

@@ -35,6 +35,7 @@
     "crypto-js": "4.1.1",
     "date-fns": "^2.28.0",
     "dayjs": "^1.11.10",
+    "js-cookie": "^3.0.5",
     "lodash-es": "^4.17.21",
     "pdfobject": "^2.2.12",
     "react": "^18.0.0",
@@ -53,6 +54,7 @@
     "@b3/tsconfig": "*",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^14.2.5",
+    "@types/js-cookie": "^3.0.6",
     "@types/crypto-js": "^4.2.1",
     "@types/lodash": "^4.14.190",
     "@types/react": "^18.0.0",

apps/storefront/src/App.tsx

@@ -277,7 +277,7 @@ export default function App() {
 
         setOpenPage({
           isOpen: true,
-          openUrl: isGotoLogin ? '/login' : gotoUrl
+          openUrl: isGotoLogin ? '/login' : gotoUrl,
         })
 
         showPageMask(dispatch, false)

apps/storefront/src/components/B3StoreContainer.tsx

@@ -2,7 +2,7 @@ import { ReactNode, useContext, useLayoutEffect } from 'react'
 
 import { GlobaledContext } from '@/shared/global'
 import { getBCStoreChannelId } from '@/shared/service/b2b'
-import { setHeadLessBcUrl, store } from '@/store'
+import { setHeadLessBcUrl, setStoreInfo, store } from '@/store'
 import { B3SStorage, setGlobalTranslation, storeHash } from '@/utils'
 
 import B3PageMask from './loadding/B3PageMask'
@@ -12,7 +12,7 @@ interface B3StoreContainerProps {
   children: ReactNode
 }
 
-interface StoreItem {
+export interface StoreItem {
   channelId: number
   urls: Array<string>
   b2bEnabled: boolean
@@ -50,6 +50,8 @@ export default function B3StoreContainer(props: B3StoreContainerProps) {
 
         if (!storeInfo) return
 
+        store.dispatch(setStoreInfo(storeInfo))
+
         const {
           channelId,
           b3ChannelId: b2bChannelId,

apps/storefront/src/pages/orderDetail/components/OrderDialog.tsx

@@ -1,5 +1,6 @@
 import { useContext, useEffect, useState } from 'react'
 import { FieldValues, useForm } from 'react-hook-form'
+import { useSelector } from 'react-redux'
 import { Box, Typography } from '@mui/material'
 
 import { B3CustomForm, B3Dialog, successTip } from '@/components'
@@ -11,9 +12,10 @@ import {
   getB2BVariantInfoBySkus,
   getBcVariantInfoBySkus,
 } from '@/shared/service/b2b'
-import { addProductToCart, createCart, getCartInfo } from '@/shared/service/bc'
+import { globalStateSelector } from '@/store'
 import { b3TriggerCartNumber, snackbar } from '@/utils'
 import { bcBaseUrl } from '@/utils/basicConfig'
+import { callCart } from '@/utils/cartUtils'
 
 import { EditableProductItem, OrderProductItem } from '../../../types'
 import getReturnFormFields from '../shared/config'
@@ -87,6 +89,8 @@ export default function OrderDialog({
     mode: 'all',
   })
 
+  const { storeInfo } = useSelector(globalStateSelector)
+
   const handleClose = () => {
     setOpen(false)
   }
@@ -255,32 +259,30 @@ export default function OrderDialog({
         return
       }
 
-      const cartInfo = await getCartInfo()
+      const storePlatform = storeInfo?.platform
 
-      if (cartInfo.length > 0) {
-        await addProductToCart(
-          {
-            lineItems: items,
-          },
-          cartInfo[0].id
-        )
-      } else {
-        await createCart({
-          lineItems: items,
+      const res = await callCart(items, storePlatform)
+
+      const status =
+        res && (res.data.cart.createCart || res.data.cart.addCartLineItems)
+
+      if (status) {
+        setOpen(false)
+        snackbar.success('', {
+          jsx: successTip({
+            message: 'Products are added to cart',
+            link: '/cart.php',
+            linkText: 'VIEW CART',
+            isOutLink: true,
+          }),
+          isClose: true,
+        })
+        b3TriggerCartNumber()
+      } else if (res.errors) {
+        snackbar.error(res.errors[0].message, {
+          isClose: true,
         })
       }
-
-      setOpen(false)
-      snackbar.success('', {
-        jsx: successTip({
-          message: 'Products are added to cart',
-          link: '/cart.php',
-          linkText: 'VIEW CART',
-          isOutLink: true,
-        }),
-        isClose: true,
-      })
-      b3TriggerCartNumber()
     } catch (err: any) {
       snackbar.error(err?.detail, {
         isClose: true,

apps/storefront/src/pages/quickorder/components/QuickOrderFooter.tsx

@@ -6,6 +6,7 @@ import {
   useEffect,
   useState,
 } from 'react'
+import { useSelector } from 'react-redux'
 import { useNavigate } from 'react-router-dom'
 import { useB3Lang } from '@b3/lang'
 import { ArrowDropDown } from '@mui/icons-material'
@@ -31,7 +32,7 @@ import {
   searchB2BProducts,
   searchBcProducts,
 } from '@/shared/service/b2b'
-import { addProductToCart, createCart, getCartInfo } from '@/shared/service/bc'
+import { globalStateSelector } from '@/store'
 import {
   addQuoteDraftProducts,
   B3SStorage,
@@ -43,6 +44,7 @@ import {
   validProductQty,
 } from '@/utils'
 import { conversionProductsList } from '@/utils/b3Product/shared/config'
+import { callCart } from '@/utils/cartUtils'
 
 import CreateShoppingList from '../../orderDetail/components/CreateShoppingList'
 import OrderShoppingList from '../../orderDetail/components/OrderShoppingList'
@@ -135,6 +137,8 @@ function QuickOrderFooter(props: QuickOrderFooterProps) {
   const [isShoppingListLoading, setIisShoppingListLoading] =
     useState<boolean>(false)
 
+  const { storeInfo } = useSelector(globalStateSelector)
+
   const navigate = useNavigate()
 
   const containerStyle = isMobile
@@ -162,7 +166,7 @@ function QuickOrderFooter(props: QuickOrderFooterProps) {
 
   // Add selected to cart
   const handleSetCartLineItems = (inventoryInfos: ProductsProps[]) => {
-    const lineItems: CustomFieldItems = []
+    const lineItems: CustomFieldItems[] = []
 
     checkedArr.forEach((item: ProductsProps) => {
       const { node } = item
@@ -240,23 +244,11 @@ function QuickOrderFooter(props: QuickOrderFooterProps) {
 
       const lineItems = handleSetCartLineItems(getInventoryInfos || [])
 
-      const cartInfo = await getCartInfo()
-      const res = cartInfo.length
-        ? await addProductToCart(
-            {
-              lineItems,
-            },
-            cartInfo[0].id
-          )
-        : await createCart({
-            lineItems,
-          })
+      const storePlatform = storeInfo?.platform
 
-      if (res.status) {
-        snackbar.error(res.detail, {
-          isClose: true,
-        })
-      } else if (!res.status) {
+      const res = await callCart(lineItems, storePlatform)
+
+      if (res && !res.errors) {
         snackbar.success('', {
           jsx: successTip({
             message: b3Lang('purchasedProducts.footer.productsAdded'),
@@ -266,9 +258,13 @@ function QuickOrderFooter(props: QuickOrderFooterProps) {
           }),
           isClose: true,
         })
-        b3TriggerCartNumber()
+      } else {
+        snackbar.error('Error has occurred', {
+          isClose: true,
+        })
       }
     } finally {
+      b3TriggerCartNumber()
       setIsRequestLoading(false)
     }
   }

apps/storefront/src/pages/quickorder/components/QuickOrderPad.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react'
+import { useSelector } from 'react-redux'
 import { useB3Lang } from '@b3/lang'
 import UploadFileIcon from '@mui/icons-material/UploadFile'
 import {
@@ -12,8 +13,9 @@ import {
 
 import { B3Upload, CustomButton, successTip } from '@/components'
 import { useBlockPendingAccountViewPrice, useMobile } from '@/hooks'
-import { addProductToCart, createCart, getCartInfo } from '@/shared/service/bc'
+import { globalStateSelector } from '@/store'
 import { B3SStorage, b3TriggerCartNumber, snackbar } from '@/utils'
+import { callCart } from '@/utils/cartUtils'
 
 import SearchProduct from '../../shoppingListDetails/components/SearchProduct'
 
@@ -35,60 +37,35 @@ export default function QuickOrderPad(props: QuickOrderPadProps) {
 
   const [blockPendingAccountViewPrice] = useBlockPendingAccountViewPrice()
 
-  const handleSplitOptionId = (id: string | number) => {
-    if (typeof id === 'string' && id.includes('attribute')) {
-      const idRight = id.split('[')[1]
+  const { storeInfo } = useSelector(globalStateSelector)
+  const storePlatform = storeInfo?.platform
 
-      const optionId = idRight.split(']')[0]
-      return +optionId
-    }
-
-    if (typeof id === 'number') {
-      return id
+  const getSnackbarMessage = (res: any) => {
+    if (res && !res.errors) {
+      snackbar.success('', {
+        jsx: successTip({
+          message: b3Lang('purchasedProducts.quickOrderPad.productsAdded'),
+          link: '/cart.php',
+          linkText: b3Lang('purchasedProducts.quickOrderPad.viewCart'),
+          isOutLink: true,
+        }),
+        isClose: true,
+      })
+    } else {
+      snackbar.error('Error has occurred', {
+        isClose: true,
+      })
     }
-
-    return undefined
   }
 
   const quickAddToList = async (products: CustomFieldItems[]) => {
-    const lineItems = products.map((product) => {
-      const { newSelectOptionList, quantity } = product
-      const optionSelections = newSelectOptionList.map(
-        (option: CustomFieldItems) => {
-          const splitOptionId = handleSplitOptionId(option.optionId)
-
-          return {
-            optionId: splitOptionId,
-            optionValue: option.optionValue,
-          }
-        }
-      )
+    const res = await callCart(products, storePlatform)
 
-      return {
-        optionSelections,
-        productId: parseInt(product.productId || product.id, 10) || 0,
-        quantity,
-        variantId: parseInt(product.variantId, 10) || 0,
-      }
-    })
-
-    const cartInfo = await getCartInfo()
-    const res = cartInfo.length
-      ? await addProductToCart(
-          {
-            lineItems,
-          },
-          cartInfo[0].id
-        )
-      : await createCart({
-          lineItems,
-        })
-
-    if (res.status) {
-      snackbar.error(res.detail, {
+    if (res && res.errors) {
+      snackbar.error(res.errors[0].message, {
         isClose: true,
       })
-    } else if (!res.status) {
+    } else {
       snackbar.success('', {
         jsx: successTip({
           message: b3Lang('purchasedProducts.quickOrderPad.productsAdded'),
@@ -98,9 +75,10 @@ export default function QuickOrderPad(props: QuickOrderPadProps) {
         }),
         isClose: true,
       })
-      b3TriggerCartNumber()
     }
 
+    b3TriggerCartNumber()
+
     return res
   }
 
@@ -248,33 +226,10 @@ export default function QuickOrderPad(props: QuickOrderPadProps) {
       } = getValidProducts(validProduct)
 
       if (productItems.length > 0) {
-        const cartInfo = await getCartInfo()
-        const res = cartInfo.length
-          ? await addProductToCart(
-              {
-                lineItems: productItems,
-              },
-              cartInfo[0].id
-            )
-          : await createCart({
-              lineItems: productItems,
-            })
-        if (res.status) {
-          snackbar.error(res.detail, {
-            isClose: true,
-          })
-        } else if (!res.status) {
-          snackbar.success('', {
-            jsx: successTip({
-              message: b3Lang('purchasedProducts.quickOrderPad.productsAdded'),
-              link: '/cart.php',
-              linkText: b3Lang('purchasedProducts.quickOrderPad.viewCart'),
-              isOutLink: true,
-            }),
-            isClose: true,
-          })
-          b3TriggerCartNumber()
-        }
+        const res = await callCart(productItems, storePlatform)
+
+        getSnackbarMessage(res)
+        b3TriggerCartNumber()
       }
 
       if (limitProduct.length > 0) {