fix: guest shopping list

apps/storefront/src/App.tsx

@@ -8,6 +8,7 @@ import {
   B3HoverButton,
   B3MasquradeGobalTip,
   B3RenderRouter,
+  GlobalDialog,
   showPageMask,
   ThemeFrame,
 } from '@/components'
@@ -257,6 +258,7 @@ export default function App() {
         setOpenPage={setOpenPage}
       />
       <B3GlobalTip />
+      <GlobalDialog />
     </>
   )
 }

apps/storefront/src/components/extraTip/GlobalDialog.tsx

@@ -0,0 +1,66 @@
+import { useDispatch, useSelector } from 'react-redux'
+import { Box } from '@mui/material'
+
+import { B3Dialog } from '@/components'
+import { useMobile } from '@/hooks'
+
+import { globalStateSelector, setGlabolCommonState } from '../../store'
+
+function GlobalDialog() {
+  const { globalMessage } = useSelector(globalStateSelector)
+
+  const [isMobile] = useMobile()
+
+  const storeDispatch = useDispatch()
+
+  const messageDialogClose = () => {
+    storeDispatch(
+      setGlabolCommonState({
+        globalMessage: {
+          open: false,
+          title: '',
+          message: '',
+          cancelText: 'Cancel',
+        },
+      })
+    )
+  }
+
+  const handleSaveMessage = () => {
+    if (globalMessage?.saveFn) globalMessage.saveFn()
+    messageDialogClose()
+  }
+
+  return (
+    <Box
+      sx={{
+        fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
+        fontWeight: '400',
+        fontSize: '1rem',
+      }}
+    >
+      <B3Dialog
+        isOpen={globalMessage?.open || false}
+        title={globalMessage?.title || ''}
+        leftSizeBtn={globalMessage?.cancelText || 'cancel'}
+        rightSizeBtn={globalMessage?.saveText || 'save'}
+        handleLeftClick={globalMessage?.cancelFn || messageDialogClose}
+        handRightClick={handleSaveMessage}
+        showRightBtn={!!globalMessage?.saveText}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: `${isMobile ? 'center' : 'start'}`,
+            width: `${isMobile ? '100%' : '450px'}`,
+            height: '100%',
+          }}
+        >
+          {globalMessage?.message || ''}
+        </Box>
+      </B3Dialog>
+    </Box>
+  )
+}
+
+export default GlobalDialog

apps/storefront/src/components/index.ts

@@ -11,6 +11,7 @@ export { default as B3Tag } from './B3Tag'
 export { default as B3Tip } from './B3Tip'
 export { default as CustomButton } from './button/CustomButton'
 export { default as CheckoutTip } from './extraTip/CheckoutTip'
+export { default as GlobalDialog } from './extraTip/GlobalDialog'
 export * from './layout'
 export { B3PageMask, Loading, showPageMask } from './loadding'
 export { default as HomePageLoadding } from './loadding/B3HomePageLoadding'

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

@@ -6,13 +6,15 @@ import {
   useEffect,
   useRef,
 } from 'react'
+import { useDispatch } from 'react-redux'
 import globalB3 from '@b3/global-b3'
 import type { OpenPageState } from '@b3/hooks'
 import { cloneDeep } from 'lodash'
 
 import { getContrastColor } from '@/components/outSideComponents/utils/b3CustomStyles'
 import { CustomStyleContext } from '@/shared/customStyleButtton'
 import { GlobaledContext } from '@/shared/global'
+import { setGlabolCommonState } from '@/store'
 
 import useRole from '../useRole'
 
@@ -30,19 +32,44 @@ const useOpenPDP = ({ setOpenPage, role }: MutationObserverProps) => {
   } = useContext(CustomStyleContext)
 
   const cache = useRef({})
+
+  const storeDispatch = useDispatch()
   const {
     state: { isB2BUser, shoppingListEnabled },
   } = useContext(GlobaledContext)
 
   const [roleText] = useRole()
 
-  const pdpCallBbck = useCallback(() => {
+  const jumpRegister = useCallback(() => {
     setOpenPage({
       isOpen: true,
-      openUrl: '/pdp',
+      openUrl: '/registered',
     })
   }, [])
 
+  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,
+          },
+        })
+      )
+    } else {
+      setOpenPage({
+        isOpen: true,
+        openUrl: '/pdp',
+      })
+    }
+  }, [role])
+
   const [openQuickView] = useDomVariation(
     globalB3['dom.setToShoppingListParentEl']
   )
@@ -57,7 +84,7 @@ const useOpenPDP = ({ setOpenPage, role }: MutationObserverProps) => {
   } = shoppingListBtn
 
   useEffect(() => {
-    if (role === 100) return
+    // if (role === 100) return
     const addToShoppingListAll = document.querySelectorAll(
       globalB3['dom.setToShoppingListParentEl']
     )

apps/storefront/src/store/reducer.ts

@@ -5,8 +5,8 @@ import theme from './slices/theme'
 
 export const middlewareOptions = {
   serializableCheck: {
-    ignoredActions: ['theme/setThemeFrame'],
-    ignoredPaths: ['theme.themeFrame'],
+    ignoredActions: ['theme/setThemeFrame', 'global/setGlabolCommonState'],
+    ignoredPaths: ['theme.themeFrame', 'global.globalMessage'],
   },
 }
 

apps/storefront/src/store/slices/global.ts

@@ -21,16 +21,33 @@ export interface TaxZoneRatesProps {
   rates: Rates[]
 }
 
+interface GlobalMessageDialog {
+  open: boolean
+  title: string
+  message: string
+  cancelText?: string
+  cancelFn?: () => void
+  saveText?: string
+  saveFn?: () => void
+}
+
 export interface GlabolState {
   taxZoneRates?: TaxZoneRatesProps[]
   isClickEnterBtn?: boolean
   isPageComplete?: boolean
+  globalMessage?: GlobalMessageDialog
 }
 
 const initialState: GlabolState = {
   taxZoneRates: [],
   isClickEnterBtn: false,
   isPageComplete: false,
+  globalMessage: {
+    open: false,
+    title: '',
+    message: '',
+    cancelText: 'Cancel',
+  },
 }
 
 export const glabolSlice = createSlice({