From 07e42b9a0943d434b004615c2b58393a56bf451a Mon Sep 17 00:00:00 2001 From: Lee Dunkley <56807262+leeBigCommerce@users.noreply.github.com> Date: Tue, 4 Feb 2025 09:05:31 +1100 Subject: [PATCH] B2B-2165 refactor to simpler interfaces within PDP (#236) --- .../src/components/HeadlessController.tsx | 19 +--- apps/storefront/src/pages/PDP/index.tsx | 102 +++++------------- .../pages/PDP/useAddedToShoppingListAlert.tsx | 51 +++++++++ 3 files changed, 83 insertions(+), 89 deletions(-) create mode 100644 apps/storefront/src/pages/PDP/useAddedToShoppingListAlert.tsx diff --git a/apps/storefront/src/components/HeadlessController.tsx b/apps/storefront/src/components/HeadlessController.tsx index 24e1cf7d..d65b5eb6 100644 --- a/apps/storefront/src/components/HeadlessController.tsx +++ b/apps/storefront/src/components/HeadlessController.tsx @@ -1,12 +1,11 @@ import { useContext, useEffect, useRef } from 'react'; import { B2BEvent } from '@b3/hooks'; -import { useB3Lang } from '@b3/lang'; import Cookies from 'js-cookie'; import { HeadlessRoutes } from '@/constants'; import { addProductFromPage as addProductFromPageToShoppingList } from '@/hooks/dom/useOpenPDP'; import { addProductsFromCartToQuote, addProductsToDraftQuote } from '@/hooks/dom/utils'; -import { addProductsToShoppingList } from '@/pages/PDP'; +import { addProductsToShoppingList, useAddedToShoppingListAlert } from '@/pages/PDP'; import { type SetOpenPage } from '@/pages/SetOpenPage'; import { CustomStyleContext } from '@/shared/customStyleButton'; import { GlobalContext } from '@/shared/global'; @@ -64,7 +63,6 @@ const Manager = new CallbackManager(); export default function HeadlessController({ setOpenPage }: HeadlessControllerProps) { const storeDispatch = useAppDispatch(); - const b3Lang = useB3Lang(); const { state: globalState } = useContext(GlobalContext); const isB2BUser = useAppSelector(isB2BUserSelector); @@ -75,6 +73,8 @@ export default function HeadlessController({ setOpenPage }: HeadlessControllerPr const isAgenting = useAppSelector(({ b2bFeatures }) => b2bFeatures.masqueradeCompany.isAgenting); const B2BToken = useAppSelector(({ company }) => company.tokens.B2BToken); + const displayAddedToShoppingListAlert = useAddedToShoppingListAlert(); + const { state: { addQuoteBtn, shoppingListBtn, addToAllQuoteBtn }, } = useContext(CustomStyleContext); @@ -89,15 +89,6 @@ export default function HeadlessController({ setOpenPage }: HeadlessControllerPr openUrl: '/register', }); }; - const gotoShoppingDetail = (id: number | string) => { - setOpenPage({ - isOpen: true, - openUrl: `/shoppingList/${id}`, - params: { - shoppingListBtn: 'add', - }, - }); - }; const customerId = customer.id; // Keep updated values @@ -228,9 +219,7 @@ export default function HeadlessController({ setOpenPage }: HeadlessControllerPr items: transformOptionSelectionsToAttributes(items), isB2BUser: isB2BUserRef.current, customerGroupId: customerRef.current.customerGroupId, - gotoShoppingDetail, - b3Lang, - }), + }).then(() => displayAddedToShoppingListAlert(shoppingListId.toString())), createNewShoppingList: async (name, description) => { const { shoppingListsCreate } = await createShoppingList({ data: { name, description }, diff --git a/apps/storefront/src/pages/PDP/index.tsx b/apps/storefront/src/pages/PDP/index.tsx index b98d134e..ddf42d5d 100644 --- a/apps/storefront/src/pages/PDP/index.tsx +++ b/apps/storefront/src/pages/PDP/index.tsx @@ -1,8 +1,7 @@ -import { lazy, useContext, useEffect, useState } from 'react'; +import { lazy, useContext, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import config from '@b3/global-b3'; -import { LangFormatFunction, useB3Lang } from '@b3/lang'; -import { Box, Button } from '@mui/material'; +import { useB3Lang } from '@b3/lang'; import { GlobalContext } from '@/shared/global'; import { @@ -17,7 +16,10 @@ import { getProductOptionList, isAllRequiredOptionFilled } from '@/utils/b3AddTo import { getValidOptionsList } from '@/utils/b3Product/b3Product'; import { conversionProductsList } from '../../utils/b3Product/shared/config'; -import { type PageProps } from '../PageProps'; + +import { useAddedToShoppingListAlert } from './useAddedToShoppingListAlert'; + +export { useAddedToShoppingListAlert } from './useAddedToShoppingListAlert'; const CreateShoppingList = lazy(() => import('../OrderDetail/components/CreateShoppingList')); const OrderShoppingList = lazy(() => import('../OrderDetail/components/OrderShoppingList')); @@ -26,49 +28,14 @@ interface AddProductsToShoppingListParams { isB2BUser: boolean; items: CustomFieldItems[]; shoppingListId: number | string; - gotoShoppingDetail: (id: number | string) => void; customerGroupId?: number; - b3Lang: LangFormatFunction; } -const tip = ( - id: number | string, - gotoShoppingDetail: (id: number | string) => void, - b3Lang: LangFormatFunction, -) => ( - - - {b3Lang('pdp.notification.productsAdded')} - - - -); - export const addProductsToShoppingList = async ({ isB2BUser, customerGroupId, items, shoppingListId, - gotoShoppingDetail, - b3Lang, }: AddProductsToShoppingListParams) => { const { currency_code: currencyCode } = getActiveCurrencyInfo(); const { id: companyId } = store.getState().company.companyInfo; @@ -123,10 +90,6 @@ export const addProductsToShoppingList = async ({ shoppingListId, items: products, }); - globalSnackbar.success('Products were added to your shopping list', { - jsx: () => tip(shoppingListId, gotoShoppingDetail, b3Lang), - isClose: true, - }); }; function useData() { @@ -165,29 +128,35 @@ function useData() { }; }; - return { - customerGroupId, - setOpenPageFn, - isB2BUser, - getShoppingListItem, - }; + const addToShoppingList = ({ + shoppingListId, + product, + }: { + shoppingListId: string | number; + product: CustomFieldItems; + }) => + addProductsToShoppingList({ + isB2BUser, + customerGroupId, + shoppingListId, + items: [product], + }); + + return { setOpenPageFn, getShoppingListItem, addToShoppingList }; } -function PDP({ setOpenPage }: PageProps) { - const { customerGroupId, setOpenPageFn, isB2BUser, getShoppingListItem } = useData(); +function PDP() { + const { setOpenPageFn, getShoppingListItem, addToShoppingList } = useData(); const b3Lang = useB3Lang(); - const [openShoppingList, setOpenShoppingList] = useState(false); + const [openShoppingList, setOpenShoppingList] = useState(true); const [isOpenCreateShopping, setIsOpenCreateShopping] = useState(false); const [isRequestLoading, setIsRequestLoading] = useState(false); + const displayAddedToShoppingListAlert = useAddedToShoppingListAlert(); const navigate = useNavigate(); - useEffect(() => { - setOpenShoppingList(true); - }, []); - const handleShoppingClose = () => { setOpenShoppingList(false); setIsOpenCreateShopping(false); @@ -198,30 +167,15 @@ function PDP({ setOpenPage }: PageProps) { }); }; - const gotoShoppingDetail = (id: string | number) => { - setOpenPage({ - isOpen: true, - openUrl: `/shoppingList/${id}`, - params: { - shoppingListBtn: 'add', - }, - }); - }; - const handleShoppingConfirm = async (shoppingListId: string) => { const product = getShoppingListItem(); if (!product) return; try { setIsRequestLoading(true); - await addProductsToShoppingList({ - isB2BUser, - customerGroupId, - shoppingListId, - items: [product], - gotoShoppingDetail, - b3Lang, - }); + await addToShoppingList({ shoppingListId, product }).then(() => + displayAddedToShoppingListAlert(shoppingListId), + ); handleShoppingClose(); } finally { diff --git a/apps/storefront/src/pages/PDP/useAddedToShoppingListAlert.tsx b/apps/storefront/src/pages/PDP/useAddedToShoppingListAlert.tsx new file mode 100644 index 00000000..c18b28a2 --- /dev/null +++ b/apps/storefront/src/pages/PDP/useAddedToShoppingListAlert.tsx @@ -0,0 +1,51 @@ +import { useB3Lang } from '@b3/lang'; +import { Box, Button } from '@mui/material'; + +import { useAppSelector } from '@/store'; +import { globalSnackbar } from '@/utils'; + +export function useAddedToShoppingListAlert() { + const b3Lang = useB3Lang(); + const setOpenPage = useAppSelector(({ global }) => global.setOpenPageFn); + + const gotoShoppingDetail = (id: string) => + setOpenPage?.({ + isOpen: true, + openUrl: `/shoppingList/${id}`, + params: { + shoppingListBtn: 'add', + }, + }); + + return (id: string) => { + globalSnackbar.success('Products were added to your shopping list', { + jsx: () => ( + + + {b3Lang('pdp.notification.productsAdded')} + + + + ), + isClose: true, + }); + }; +}