From 83ca3aa0e075d0d41bf38fa1c4b10cefddb1b467 Mon Sep 17 00:00:00 2001 From: Estefania Ocampo Date: Fri, 5 Jan 2024 11:51:03 -0700 Subject: [PATCH] fix: avoiding references to rest api cart functions (#909) * fix: avoiding references to rest api cart functions * fix: adapt code to graphql response * fix: update line items to be similar to graphql structure (#915) --------- Co-authored-by: Marco Loyo Co-authored-by: bc-marco <109162781+bc-marco@users.noreply.github.com> --- .../src/components/HeadlessController.tsx | 21 ++++++---- .../src/hooks/dom/useCartToQuote.ts | 7 +++- apps/storefront/src/hooks/dom/utils.ts | 26 +++++++++---- .../storefront/src/pages/quote/QuoteDraft.tsx | 6 ++- .../src/shared/service/bc/graphql/cart.ts | 3 +- .../src/utils/b3Product/b3Product.ts | 38 ++++++++++--------- 6 files changed, 64 insertions(+), 37 deletions(-) diff --git a/apps/storefront/src/components/HeadlessController.tsx b/apps/storefront/src/components/HeadlessController.tsx index bc364221..b171753f 100644 --- a/apps/storefront/src/components/HeadlessController.tsx +++ b/apps/storefront/src/components/HeadlessController.tsx @@ -1,5 +1,5 @@ import { Dispatch, SetStateAction, useContext, useEffect, useRef } from 'react' -import { useDispatch } from 'react-redux' +import { useDispatch, useSelector } from 'react-redux' import type { OpenPageState } from '@b3/hooks' import { useB3Lang } from '@b3/lang' @@ -65,13 +65,16 @@ interface HeadlessControllerProps { const transformOptionSelectionsToAttributes = (items: LineItems[]) => items.map((product) => { - const { optionSelections } = product + const { selectedOptions } = product return { ...product, - optionSelections: optionSelections?.reduce( - (accumulator: Record, { optionId, optionValue }) => { - accumulator[`attribute[${optionId}]`] = optionValue + selectedOptions: selectedOptions?.reduce( + ( + accumulator: Record, + { optionEntityId, optionValueEntityId } + ) => { + accumulator[`attribute[${optionEntityId}]`] = optionValueEntityId return accumulator }, @@ -136,11 +139,14 @@ export default function HeadlessController({ registerEnabled, }, } = useContext(GlobaledContext) + const platform = useSelector(({ global }) => global.storeInfo.platform) const { state: { addQuoteBtn, shoppingListBtn }, } = useContext(CustomStyleContext) - const { addToQuote: addProductsFromCart } = - addProductsFromCartToQuote(setOpenPage) + const { addToQuote: addProductsFromCart } = addProductsFromCartToQuote( + setOpenPage, + platform + ) const saveFn = () => { setOpenPage({ @@ -203,6 +209,7 @@ export default function HeadlessController({ } = await superAdminCompanies(B3UserIdRef.current, { first: 50, offset: 0, + orderBy: 'companyId', }) return { diff --git a/apps/storefront/src/hooks/dom/useCartToQuote.ts b/apps/storefront/src/hooks/dom/useCartToQuote.ts index edb777ca..dd0d0e56 100644 --- a/apps/storefront/src/hooks/dom/useCartToQuote.ts +++ b/apps/storefront/src/hooks/dom/useCartToQuote.ts @@ -5,6 +5,7 @@ import { useContext, useEffect, } from 'react' +import { useSelector } from 'react-redux' import globalB3 from '@b3/global-b3' import type { OpenPageState } from '@b3/hooks' @@ -35,7 +36,11 @@ const useCartToQuote = ({ setOpenPage, cartQuoteEnabled, }: MutationObserverProps) => { - const { addToQuote, addLoadding } = addProductsFromCartToQuote(setOpenPage) + const platform = useSelector(({ global }) => global.storeInfo.platform) + const { addToQuote, addLoadding } = addProductsFromCartToQuote( + setOpenPage, + platform + ) const { state: { addToAllQuoteBtn }, diff --git a/apps/storefront/src/hooks/dom/utils.ts b/apps/storefront/src/hooks/dom/utils.ts index cd7ab25d..4b465421 100644 --- a/apps/storefront/src/hooks/dom/utils.ts +++ b/apps/storefront/src/hooks/dom/utils.ts @@ -4,7 +4,7 @@ import type { OpenPageState } from '@b3/hooks' import B3AddToQuoteTip from '@/components/B3AddToQuoteTip' import { searchB2BProducts, searchBcProducts } from '@/shared/service/b2b' -import { getCartInfoWithOptions } from '@/shared/service/bc' +import { getCart } from '@/shared/service/bc/graphql/cart' import { addQuoteDraftProduce, addQuoteDraftProducts, @@ -12,6 +12,7 @@ import { B3SStorage, calculateProductsPrice, getCalculatedProductPrice, + getCookie, globalSnackbar, isAllRequiredOptionFilled, LineItems, @@ -175,7 +176,7 @@ const addProductsToDraftQuote = async ( ) => { // filter products with SKU const productsWithSKUOrVariantId = products.filter( - ({ sku, variantId }) => sku || variantId + ({ sku, variantEntityId }) => sku || variantEntityId ) const companyId = @@ -185,7 +186,11 @@ const addProductsToDraftQuote = async ( // fetch data with products IDs const { productsSearch } = await searchB2BProducts({ productIds: Array.from( - new Set(productsWithSKUOrVariantId.map(({ productId }) => +productId)) + new Set( + productsWithSKUOrVariantId.map( + ({ productEntityId }) => +productEntityId + ) + ) ), companyId, customerGroupId, @@ -228,20 +233,25 @@ const addProductsToDraftQuote = async ( }) } -const addProductsFromCartToQuote = (setOpenPage: DispatchProps) => { +const addProductsFromCartToQuote = ( + setOpenPage: DispatchProps, + platform?: string +) => { const addToQuote = async () => { + const entityCartId = platform === 'bigcommerce' ? null : getCookie('cartId') try { const cartInfoWithOptions: CartInfoProps | any = - await getCartInfoWithOptions() + // we should get the platform parameter from wherever this function is used + await getCart(entityCartId, platform ?? '') - if (!cartInfoWithOptions[0]) { + if (!cartInfoWithOptions.data.site.cart) { globalSnackbar.error('No products in Cart.', { isClose: true, }) return } - const { lineItems, id: cartId } = cartInfoWithOptions[0] + const { lineItems, entityId } = cartInfoWithOptions.data.site.cart const { cartProductsList, noSkuProducts } = getCartProducts(lineItems) @@ -258,7 +268,7 @@ const addProductsFromCartToQuote = (setOpenPage: DispatchProps) => { } if (noSkuProducts.length === cartProductsList.length) return - await addProductsToDraftQuote(cartProductsList, setOpenPage, cartId) + await addProductsToDraftQuote(cartProductsList, setOpenPage, entityId) } catch (e) { console.log(e) } finally { diff --git a/apps/storefront/src/pages/quote/QuoteDraft.tsx b/apps/storefront/src/pages/quote/QuoteDraft.tsx index 899c006c..10d2ab57 100644 --- a/apps/storefront/src/pages/quote/QuoteDraft.tsx +++ b/apps/storefront/src/pages/quote/QuoteDraft.tsx @@ -29,7 +29,7 @@ import { getB2BCustomerAddresses, getBCCustomerAddresses, } from '@/shared/service/b2b' -import { deleteCart } from '@/shared/service/bc' +import { deleteCart } from '@/shared/service/bc/graphql/cart' import { store } from '@/store' import { AddressItemType, BCAddressItemType } from '@/types/address' import { @@ -42,6 +42,7 @@ import { storeHash, } from '@/utils' import { CallbackKey } from '@/utils/b3Callbacks' +import { deleteCartData } from '@/utils/cartUtils' import { getProductOptionsFields } from '../../utils/b3Product/shared/config' import { convertBCToB2BAddress } from '../address/shared/config' @@ -576,8 +577,9 @@ function QuoteDraft({ setOpenPage }: QuoteDraftProps) { if (id) { const cartId = B3LStorage.get('cartToQuoteId') + const deleteCartObject = deleteCartData(cartId) - await deleteCart(cartId) + await deleteCart(deleteCartObject) } navigate(`/quoteDetail/${id}?date=${createdAt}`, { diff --git a/apps/storefront/src/shared/service/bc/graphql/cart.ts b/apps/storefront/src/shared/service/bc/graphql/cart.ts index 83d781e2..c4bb552d 100644 --- a/apps/storefront/src/shared/service/bc/graphql/cart.ts +++ b/apps/storefront/src/shared/service/bc/graphql/cart.ts @@ -199,7 +199,6 @@ const lineItemsFragment = `lineItems { value } } - totalQuantity }` const getCartInfoForHeadless = `query getCart($entityId: String!) { @@ -320,7 +319,7 @@ const deleteCartQuery = `mutation deleteCart($deleteCartInput: DeleteCartInput!) } }` -export const getCart = (entityId: string, platform: string): any => +export const getCart = (entityId: string | null, platform: string): any => platform === 'bigcommerce' ? B3Request.graphqlBC({ // for stencil not using proxy diff --git a/apps/storefront/src/utils/b3Product/b3Product.ts b/apps/storefront/src/utils/b3Product/b3Product.ts index bde94238..d431a1f1 100644 --- a/apps/storefront/src/utils/b3Product/b3Product.ts +++ b/apps/storefront/src/utils/b3Product/b3Product.ts @@ -61,8 +61,8 @@ interface NewOptionProps { } interface ProductOption { - optionId: number - optionValue: number + optionEntityId: number + optionValueEntityId: number } interface ProductOptionString { @@ -83,10 +83,10 @@ interface OptionsProps { export interface LineItems { quantity: number - productId: number - optionSelections?: ProductOption[] + productEntityId: number + selectedOptions?: ProductOption[] sku?: string - variantId?: number + variantEntityId?: number } const getModifiersPrice = ( @@ -745,10 +745,10 @@ const formatOptionsSelections = ( ) => options.reduce((accumulator: CalculatedOptions[], option) => { const matchedOption = allOptions.find(({ id, type, option_values }) => { - if (option.optionId === id) { + if (option.optionEntityId === id) { if ( (type !== 'text' && option_values?.length) || - (type === 'date' && option.optionValue) + (type === 'date' && option.optionValueEntityId) ) { return true } @@ -759,11 +759,11 @@ const formatOptionsSelections = ( if (matchedOption) { if (matchedOption.type === 'date') { const id = matchedOption.id ? +matchedOption.id : 0 - accumulator.push(...getDateValuesArray(id, option.optionValue)) + accumulator.push(...getDateValuesArray(id, option.optionValueEntityId)) } else { accumulator.push({ option_id: matchedOption.id ? +matchedOption.id : 0, - value_id: +option.optionValue, + value_id: +option.optionValueEntityId, }) } } @@ -780,12 +780,14 @@ const formatLineItemsToGetPrices = ( items: Calculateditems[] variants: ProductInfo[] }, - { optionSelections = [], productId, sku, variantId, quantity } + { selectedOptions = [], productEntityId, sku, variantEntityId, quantity } ) => { - const selectedProduct = productsSearch.find(({ id }) => id === productId) + const selectedProduct = productsSearch.find( + ({ id }) => id === productEntityId + ) const variantItem = selectedProduct?.variants?.find( ({ sku: skuResult, variant_id: variantIdResult }) => - sku === skuResult || variantIdResult === variantId + sku === skuResult || variantIdResult === variantEntityId ) if (!variantItem || !selectedProduct) { @@ -793,7 +795,7 @@ const formatLineItemsToGetPrices = ( } const { allOptions = [] } = selectedProduct - const options = formatOptionsSelections(optionSelections, allOptions) + const options = formatOptionsSelections(selectedOptions, allOptions) formatedLineItems.items.push({ product_id: variantItem.product_id, @@ -804,10 +806,12 @@ const formatLineItemsToGetPrices = ( ...variantItem, quantity, productsSearch: selectedProduct, - optionSelections: optionSelections.map(({ optionId, optionValue }) => ({ - optionId: `attribute[${optionId}]`, - optionValue: `${optionValue}`, - })), + optionSelections: selectedOptions.map( + ({ optionEntityId, optionValueEntityId }) => ({ + optionId: `attribute[${optionEntityId}]`, + optionValue: `${optionValueEntityId}`, + }) + ), }) return formatedLineItems },