fix: render quote and shoppingList btn

apps/storefront/index.html

@@ -94,7 +94,7 @@ <h1>Ugly Cornerstone Store Theme with Weird CSS</h1>
         Commented out below are products without options.
       -->
 
-      <div>
+      <div class="productView">
         <div class="productView-info-value" data-product-sku="">
           TP-001-RE-SM-SE
         </div>

apps/storefront/src/App.tsx

@@ -252,6 +252,17 @@ export default function App() {
     }
   }, [])
 
+  useEffect(() => {
+    const { hash } = window.location
+
+    if (isOpen && hash === '#/') {
+      setOpenPage({
+        isOpen: false,
+        openUrl: '',
+      })
+    }
+  }, [isOpen])
+
   return (
     <>
       <HashRouter>

apps/storefront/src/hooks/dom/useMyQuote.ts

@@ -58,12 +58,12 @@ const useMyQuote = ({
   const { addToQuote, addLoadding } =
     addProductFromProductPageToQuote(setOpenPage)
 
-  const quoteCallBbck = useCallback(() => {
-    const b3MyQuote = document.querySelector('.b2b-add-to-quote')
+  const quoteCallBack = useCallback((e: React.MouseEvent) => {
+    const b3MyQuote = e.target as HTMLElement
     const b2bLoading = document.querySelector('#b2b-div-loading')
     if (b3MyQuote && !b2bLoading) {
       addLoadding(b3MyQuote)
-      addToQuote(role)
+      addToQuote(role, b3MyQuote)
     }
   }, [])
 
@@ -100,7 +100,6 @@ const useMyQuote = ({
       ? document.querySelectorAll(locationSelector)
       : []
 
-    let myQuote: CustomFieldItems | null = null
     if (!addToQuoteAll.length && !CustomAddToQuoteAll.length) return
 
     if (!productQuoteEnabled) {
@@ -128,30 +127,33 @@ const useMyQuote = ({
         })
         cache.current = cloneDeep(addQuoteBtn)
       }
-      return
     }
 
     if (enabled) {
       ;(CustomAddToQuoteAll.length
         ? CustomAddToQuoteAll
         : addToQuoteAll
       ).forEach((node: CustomFieldItems) => {
-        myQuote = document.createElement('div')
-        myQuote.innerHTML = text || 'Add to Quote'
-        myQuote.setAttribute('style', customCss)
-        myQuote.style.backgroundColor = color
-        myQuote.style.color = customTextColor
-        myQuote.setAttribute('class', `b2b-add-to-quote ${classSelector}`)
-
-        setMediaStyle(mediaBlocks, `b2b-add-to-quote ${classSelector}`)
-        if (CustomAddToQuoteAll.length) {
-          node.appendChild(myQuote)
-        } else {
-          node.parentNode.appendChild(myQuote)
+        const children = node.parentNode.querySelectorAll('.b2b-add-to-quote')
+        if (!children.length) {
+          let myQuote: CustomFieldItems | null = null
+          myQuote = document.createElement('div')
+          myQuote.innerHTML = text || 'Add to Quote'
+          myQuote.setAttribute('style', customCss)
+          myQuote.style.backgroundColor = color
+          myQuote.style.color = customTextColor
+          myQuote.setAttribute('class', `b2b-add-to-quote ${classSelector}`)
+
+          setMediaStyle(mediaBlocks, `b2b-add-to-quote ${classSelector}`)
+          if (CustomAddToQuoteAll.length) {
+            node.appendChild(myQuote)
+          } else {
+            node.parentNode.appendChild(myQuote)
+          }
+          myQuote.addEventListener('click', quoteCallBack, {
+            capture: true,
+          })
         }
-        myQuote.addEventListener('click', quoteCallBbck, {
-          capture: true,
-        })
       })
       cache.current = cloneDeep(addQuoteBtn)
     } else {
@@ -163,9 +165,10 @@ const useMyQuote = ({
 
     // eslint-disable-next-line
     return () => {
-      if (myQuote) {
-        myQuote.removeEventListener('click', quoteCallBbck)
-      }
+      const myQuoteBtn = document.querySelectorAll('.b2b-add-to-quote')
+      myQuoteBtn.forEach((item: CustomFieldItems) => {
+        item.removeEventListener('click', quoteCallBack)
+      })
     }
   }, [openQuickView, productQuoteEnabled, addQuoteBtn])
 }

apps/storefront/src/hooks/dom/useOpenPDP.ts

@@ -40,6 +40,7 @@ const useOpenPDP = ({ setOpenPage, role }: MutationObserverProps) => {
 
   const storeDispatch = useDispatch()
   const {
+    dispatch,
     state: { isB2BUser, shoppingListEnabled },
   } = useContext(GlobaledContext)
 
@@ -52,28 +53,40 @@ const useOpenPDP = ({ setOpenPage, role }: MutationObserverProps) => {
     })
   }, [])
 
-  const pdpCallBbck = useCallback(() => {
-    if (role === 100) {
-      storeDispatch(
-        setGlabolCommonState({
-          globalMessage: {
-            open: true,
-            title: 'Registration',
-            message:
-              'Please create an account, or login to create a shopping list.',
-            cancelText: 'Cancel',
-            saveText: 'Register',
-            saveFn: jumpRegister,
+  const pdpCallBack = useCallback(
+    (e: React.MouseEvent) => {
+      const b3ShoppingList = e.target as HTMLElement
+
+      if (role === 100) {
+        storeDispatch(
+          setGlabolCommonState({
+            globalMessage: {
+              open: true,
+              title: 'Registration',
+              message:
+                'Please create an account, or login to create a shopping list.',
+              cancelText: 'Cancel',
+              saveText: 'Register',
+              saveFn: jumpRegister,
+            },
+          })
+        )
+      } else {
+        setOpenPage({
+          isOpen: true,
+          openUrl: '/pdp',
+        })
+
+        dispatch({
+          type: 'common',
+          payload: {
+            shoppingListClickNode: b3ShoppingList,
           },
         })
-      )
-    } else {
-      setOpenPage({
-        isOpen: true,
-        openUrl: '/pdp',
-      })
-    }
-  }, [role])
+      }
+    },
+    [role]
+  )
 
   const [openQuickView] = useDomVariation(
     globalB3['dom.setToShoppingListParentEl']
@@ -108,7 +121,6 @@ const useOpenPDP = ({ setOpenPage, role }: MutationObserverProps) => {
       : []
 
     const wishlistSdd = document.querySelector('form[data-wishlist-add]')
-    let shoppingBtnDom: CustomFieldItems | null = null
     if (!addToShoppingListAll.length && !CustomAddToShoppingListAll.length)
       return
     if (document.querySelectorAll('.b2b-add-to-list').length) {
@@ -133,7 +145,6 @@ const useOpenPDP = ({ setOpenPage, role }: MutationObserverProps) => {
         })
         cache.current = cloneDeep(shoppingListBtn)
       }
-      return
     }
 
     const isCurrentUserEnabled = roleText
@@ -145,38 +156,47 @@ const useOpenPDP = ({ setOpenPage, role }: MutationObserverProps) => {
         ? CustomAddToShoppingListAll
         : addToShoppingListAll
       ).forEach((node: CustomFieldItems) => {
-        shoppingBtnDom = document.createElement('div')
-        shoppingBtnDom.innerHTML = text || 'Add to Shopping List'
-        shoppingBtnDom.setAttribute('style', customCss)
-        shoppingBtnDom.style.backgroundColor = color
-        shoppingBtnDom.style.color = customTextColor
-        shoppingBtnDom.setAttribute('class', `b2b-add-to-list ${classSelector}`)
-
-        setMediaStyle(mediaBlocks, `b2b-add-to-list ${classSelector}`)
-        if (CustomAddToShoppingListAll.length) {
-          node.appendChild(shoppingBtnDom)
-        } else {
-          node.parentNode.appendChild(shoppingBtnDom)
+        const children = node.parentNode.querySelectorAll('.b2b-add-to-list')
+
+        if (!children.length) {
+          let shoppingBtnDom: CustomFieldItems | null = null
+          shoppingBtnDom = document.createElement('div')
+          shoppingBtnDom.innerHTML = text || 'Add to Shopping List'
+          shoppingBtnDom.setAttribute('style', customCss)
+          shoppingBtnDom.style.backgroundColor = color
+          shoppingBtnDom.style.color = customTextColor
+          shoppingBtnDom.setAttribute(
+            'class',
+            `b2b-add-to-list ${classSelector}`
+          )
+
+          setMediaStyle(mediaBlocks, `b2b-add-to-list ${classSelector}`)
+          if (CustomAddToShoppingListAll.length) {
+            node.appendChild(shoppingBtnDom)
+          } else {
+            node.parentNode.appendChild(shoppingBtnDom)
+          }
+          shoppingBtnDom.addEventListener('click', pdpCallBack, {
+            capture: true,
+          })
         }
-        shoppingBtnDom.addEventListener('click', pdpCallBbck, {
-          capture: true,
-        })
       })
       cache.current = cloneDeep(shoppingListBtn)
       if (wishlistSdd) (wishlistSdd as CustomFieldItems).style.display = 'none'
     } else {
       const shoppingListBtn = document.querySelectorAll('.b2b-add-to-list')
-      shoppingListBtn.forEach((item: any) => {
+      shoppingListBtn.forEach((item: CustomFieldItems) => {
         removeElement(item)
       })
       if (wishlistSdd) (wishlistSdd as CustomFieldItems).style.display = 'block'
     }
 
     // eslint-disable-next-line
     return () => {
-      if (shoppingBtnDom) {
-        shoppingBtnDom.removeEventListener('click', pdpCallBbck)
-      }
+      const shoppingListBtn = document.querySelectorAll('.b2b-add-to-list')
+      shoppingListBtn.forEach((item: CustomFieldItems) => {
+        item.removeEventListener('click', pdpCallBack)
+      })
     }
   }, [isB2BUser, shoppingListEnabled, openQuickView, shoppingListBtn, roleText])
 }

apps/storefront/src/hooks/dom/utils.ts

@@ -1,4 +1,5 @@
 import { Dispatch, SetStateAction } from 'react'
+import globalB3 from '@b3/global-b3'
 import type { OpenPageState } from '@b3/hooks'
 import { v1 as uuid } from 'uuid'
 
@@ -307,18 +308,22 @@ const addProductsFromCartToQuote = (setOpenPage: DispatchProps) => {
 }
 
 const addProductFromProductPageToQuote = (setOpenPage: DispatchProps) => {
-  const addToQuote = async (role: string | number) => {
+  const addToQuote = async (role: string | number, node?: HTMLElement) => {
     try {
+      const productView: HTMLElement | null = node
+        ? node.closest(globalB3['dom.productView'])
+        : document
+      if (!productView) return
       const productId = (
-        document.querySelector('input[name=product_id]') as CustomFieldItems
+        productView.querySelector('input[name=product_id]') as CustomFieldItems
       )?.value
       const qty =
-        (document.querySelector('[name="qty[]"]') as CustomFieldItems)?.value ??
-        1
+        (productView.querySelector('[name="qty[]"]') as CustomFieldItems)
+          ?.value ?? 1
       const sku = (
-        document.querySelector('[data-product-sku]')?.innerHTML ?? ''
+        productView.querySelector('[data-product-sku]')?.innerHTML ?? ''
       ).trim()
-      const form = document.querySelector('form[data-cart-item-add]')
+      const form = productView.querySelector('form[data-cart-item-add]')
 
       const fn =
         +role === 99 || +role === 100 ? searchBcProducts : searchB2BProducts

apps/storefront/src/pages/pdp/PDP.tsx

@@ -7,6 +7,7 @@ import {
 } from 'react'
 import { useSelector } from 'react-redux'
 import { useNavigate } from 'react-router-dom'
+import globalB3 from '@b3/global-b3'
 import type { OpenPageState } from '@b3/hooks'
 import { Box, Button } from '@mui/material'
 
@@ -89,7 +90,7 @@ export const getProductOptionList = (optionMap: CustomFieldItems) => {
 function PDP({ setOpenPage }: PDPProps) {
   const isPromission = true
   const {
-    state: { isB2BUser },
+    state: { isB2BUser, shoppingListClickNode },
   } = useContext(GlobaledContext)
 
   const [openShoppingList, setOpenShoppingList] = useState<boolean>(false)
@@ -152,16 +153,23 @@ function PDP({ setOpenPage }: PDPProps) {
   )
 
   const handleShoppingConfirm = async (id: string | number) => {
+    if (!shoppingListClickNode) return
+    const productView: HTMLElement | null = shoppingListClickNode.closest(
+      globalB3['dom.productView']
+    )
+    if (!productView) return
+
     try {
       setIsRequestLoading(true)
       const productId = (
-        document.querySelector('input[name=product_id]') as any
+        productView.querySelector('input[name=product_id]') as any
       )?.value
-      const qty = (document.querySelector('[name="qty[]"]') as any)?.value ?? 1
+      const qty =
+        (productView.querySelector('[name="qty[]"]') as any)?.value ?? 1
       const sku = (
-        document.querySelector('[data-product-sku]')?.innerHTML ?? ''
+        productView.querySelector('[data-product-sku]')?.innerHTML ?? ''
       ).trim()
-      const form = document.querySelector('form[data-cart-item-add]')
+      const form = productView.querySelector('form[data-cart-item-add]')
 
       const { currency_code: currencyCode } = getDefaultCurrencyInfo()
 

apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailHeader.tsx

@@ -1,4 +1,5 @@
 import { Dispatch, SetStateAction, useContext } from 'react'
+import { useNavigate } from 'react-router-dom'
 import { ArrowBackIosNew } from '@mui/icons-material'
 import { Box, Grid, styled, Typography } from '@mui/material'
 
@@ -55,6 +56,7 @@ function ShoppingDetailHeader(props: ShoppingDetailHeaderProps) {
       portalStyle: { backgroundColor = '#FEF9F5' },
     },
   } = useContext(CustomStyleContext)
+  const navigate = useNavigate()
 
   const isDisabledBtn = shoppingListInfo?.products?.edges.length === 0
 
@@ -85,8 +87,10 @@ function ShoppingDetailHeader(props: ShoppingDetailHeaderProps) {
             if (openAPPParams.shoppingListBtn !== 'add') {
               goToShoppingLists()
             } else {
+              navigate('/')
               setOpenPage({
                 isOpen: false,
+                openUrl: '',
               })
             }
           }}

apps/storefront/src/shared/global/context/config.ts

@@ -114,6 +114,7 @@ export interface GlobalState {
   enteredInclusiveTax: boolean
   blockPendingAccountOrderCreation: boolean
   quoteDetailHasNewMessages: boolean
+  shoppingListClickNode: HTMLElement | null
 }
 
 export const initState = {
@@ -168,6 +169,7 @@ export const initState = {
   blockPendingAccountOrderCreation:
     B3SStorage.get('blockPendingAccountOrderCreation') || true,
   quoteDetailHasNewMessages: false,
+  shoppingListClickNode: null,
 }
 
 export interface GlobalAction {

packages/global-b3/index.ts

@@ -26,6 +26,7 @@ const globalB3 = {
   'dom.openB3Checkout': 'checkout-customer-continue',
   'dom.cartElement':
     '[href="/cart.php"], #form-action-addToCart, [data-button-type="add-cart"]',
+  'dom.productView': '.productView',
   before_login_goto_page: '/account.php?action=order_status',
   checkout_super_clear_session: 'true',
   setting: {