feat: add click on cart button custom event (#928)

* feat: add click on cart button  custom event

* fix: add way to recognize custom events on cart links

apps/storefront/src/components/B3LinkTipContent.tsx

@@ -1,28 +1,40 @@
 import { useNavigate } from 'react-router-dom'
+import { CallbackKey, useCallbacks } from '@b3/hooks'
 import { Box } from '@mui/material'
 
 export interface B3SuccessTipContentProps {
   message: string
   link?: string
   linkText?: string
   isOutLink?: boolean
+  isCustomEvent?: boolean
 }
 
 export function B3LinkTipContent({
   message,
   link = '',
   linkText = 'View',
   isOutLink = false,
+  isCustomEvent = false,
 }: B3SuccessTipContentProps) {
   const navigate = useNavigate()
 
-  const handleLink = () => {
-    if (isOutLink) {
-      window.location.href = link
-    } else {
-      navigate(link)
+  const handleLink = useCallbacks(
+    CallbackKey.onClickCartButton,
+    (_, handleEvent) => {
+      if (isCustomEvent) {
+        const isNotPreventDefaultExecuted = handleEvent()
+        if (!isNotPreventDefaultExecuted) {
+          return
+        }
+      }
+      if (isOutLink) {
+        window.location.href = link
+      } else {
+        navigate(link)
+      }
     }
-  }
+  )
 
   return (
     <Box>
@@ -56,6 +68,7 @@ export const successTip = ({
   link = '',
   linkText = 'View',
   isOutLink = false,
+  isCustomEvent = false,
 }: B3SuccessTipContentProps) =>
   function componentTip() {
     return (
@@ -64,6 +77,7 @@ export const successTip = ({
         link={link}
         linkText={linkText}
         isOutLink={isOutLink}
+        isCustomEvent={isCustomEvent}
       />
     )
   }

apps/storefront/src/components/HeadlessController.tsx

@@ -201,13 +201,14 @@ export default function HeadlessController({
       ...window.b2b,
       callbacks: new CallbackManager(),
       utils: {
-        openPage: (page) => {
-          setOpenPage({ isOpen: false })
-          setTimeout(
-            () => setOpenPage({ isOpen: true, openUrl: HeadlessRoutes[page] }),
-            0
-          )
-        },
+        openPage: (page) =>
+          setTimeout(() => {
+            if (page === 'CLOSE') {
+              setOpenPage({ isOpen: false })
+              return
+            }
+            setOpenPage({ isOpen: true, openUrl: HeadlessRoutes[page] })
+          }, 0),
         quote: {
           addProductFromPage: (item) =>
             addProductsToDraftQuote([item], setOpenPage),

apps/storefront/src/components/layout/B3Mainheader.tsx

@@ -1,5 +1,6 @@
 import { useContext, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
+import { CallbackKey, useCallbacks } from '@b3/hooks'
 import { useB3Lang } from '@b3/lang'
 import { Box, Button, Typography } from '@mui/material'
 
@@ -29,6 +30,18 @@ export default function B3Mainheader({ title }: { title: string }) {
 
   const customColor = getContrastColor(backgroundColor)
 
+  const onCartClick = useCallbacks(
+    CallbackKey.onClickCartButton,
+    (_, handleEvent) => {
+      const isNotPreventDefaultExecuted = handleEvent()
+      if (!isNotPreventDefaultExecuted) {
+        return
+      }
+
+      window.location.href = '/cart.php'
+    }
+  )
+
   useEffect(() => {
     b3TriggerCartNumber()
   }, [])
@@ -98,9 +111,7 @@ export default function B3Mainheader({ title }: { title: string }) {
                   fontWeight: 700,
                   fontSize: '16px',
                 }}
-                onClick={() => {
-                  window.location.href = '/cart.php'
-                }}
+                onClick={onCartClick}
               >
                 {b3Lang('global.B3MainHeader.cart')}
                 {global?.cartNumber && global?.cartNumber > 0 ? (

apps/storefront/src/constants/index.ts

@@ -41,6 +41,7 @@ export enum HeadlessRoutes {
   USER_MANAGEMENT = '/user-management',
   ACCOUNT_SETTINGS = '/accountSettings',
   INVOICE = '/invoice',
+  CLOSE = 'close',
 }
 
 export type HeadlessRoute = keyof typeof HeadlessRoutes

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

@@ -280,6 +280,7 @@ export default function OrderDialog({
             link: '/cart.php',
             linkText: b3Lang('orderDetail.viewCart'),
             isOutLink: true,
+            isCustomEvent: true,
           }),
           isClose: true,
         })

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

@@ -256,6 +256,7 @@ function QuickOrderFooter(props: QuickOrderFooterProps) {
             link: '/cart.php',
             linkText: b3Lang('purchasedProducts.footer.viewCart'),
             isOutLink: true,
+            isCustomEvent: true,
           }),
           isClose: true,
         })

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

@@ -48,6 +48,7 @@ export default function QuickOrderPad(props: QuickOrderPadProps) {
           link: '/cart.php',
           linkText: b3Lang('purchasedProducts.quickOrderPad.viewCart'),
           isOutLink: true,
+          isCustomEvent: true,
         }),
         isClose: true,
       })
@@ -72,6 +73,7 @@ export default function QuickOrderPad(props: QuickOrderPadProps) {
           link: '/cart.php',
           linkText: b3Lang('purchasedProducts.quickOrderPad.viewCart'),
           isOutLink: true,
+          isCustomEvent: true,
         }),
         isClose: true,
       })

apps/storefront/src/pages/quote/QuoteDraft.tsx

@@ -7,7 +7,7 @@ import {
   useState,
 } from 'react'
 import { useNavigate } from 'react-router-dom'
-import useCallbacks from '@b3/hooks/useCustomCallbacks'
+import { CallbackKey,useCallbacks } from '@b3/hooks'
 import { useB3Lang } from '@b3/lang'
 import { ArrowBackIosNew } from '@mui/icons-material'
 import {
@@ -41,7 +41,6 @@ import {
   snackbar,
   storeHash,
 } from '@/utils'
-import { CallbackKey } from '@/utils/b3Callbacks'
 import { deleteCartData } from '@/utils/cartUtils'
 
 import { getProductOptionsFields } from '../../utils/b3Product/shared/config'

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

@@ -1,5 +1,5 @@
 import { useContext, useState } from 'react'
-import useCallbacks from '@b3/hooks/useCustomCallbacks'
+import { CallbackKey,useCallbacks } from '@b3/hooks'
 import { useB3Lang } from '@b3/lang'
 import UploadFileIcon from '@mui/icons-material/UploadFile'
 import { Box, Card, CardContent, Divider, Typography } from '@mui/material'
@@ -11,7 +11,6 @@ import {
   addProductToShoppingList,
 } from '@/shared/service/b2b'
 import { B3SStorage, getValidOptionsList, snackbar } from '@/utils'
-import { CallbackKey } from '@/utils/b3Callbacks'
 
 import { getAllModifierDefaultValue } from '../../../utils/b3Product/shared/config'
 import { ShoppingListDetailsContext } from '../context/ShoppingListDetailsContext'

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

@@ -255,6 +255,7 @@ export default function ReAddToCart(props: ShoppingProductsProps) {
               link: '/cart.php',
               linkText: b3Lang('shoppingList.reAddToCart.viewCart'),
               isOutLink: true,
+              isCustomEvent: true,
             }),
             isClose: true,
           })

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

@@ -276,6 +276,7 @@ function ShoppingDetailFooter(props: ShoppingDetailFooterProps) {
                 link: '/cart.php',
                 linkText: b3Lang('shoppingList.footer.viewCart'),
                 isOutLink: true,
+                isCustomEvent: true,
               }),
               isClose: true,
             })

apps/storefront/src/utils/b3Callbacks.ts

@@ -1,11 +1,10 @@
+import { CallbackKey } from '@b3/hooks'
+
 type CallbackEvent = {
   data: CustomFieldItems
   preventDefault: () => void
 }
-export enum CallbackKey {
-  onQuoteCreate = 'on-quote-create',
-  onAddToShoppingList = 'on-add-to-shopping-list',
-}
+
 type Callback = (event: CallbackEvent) => any
 
 export default class CallbackManager {

packages/hooks/index.d.ts

@@ -1,12 +1,10 @@
-declare enum CallbackKey {
-  onQuoteCreate = 'on-quote-create',
-  onAddToShoppingList = 'on-add-to-shopping-list',
-}
-
 declare interface Window {
   b2b: {
     callbacks: {
-      dispatchEvent: (callbackKey: CallbackKey, data: any) => boolean
+      dispatchEvent: (
+        callbackKey: import('./useCustomCallbacks').CallbackKey,
+        data: any
+      ) => boolean
     }
   }
   b2b: {

packages/hooks/index.ts

@@ -1,4 +1,4 @@
 export * from './useB3AppOpen'
-export { default as useCustomCallbacks } from './useCustomCallbacks'
+export * from './useCustomCallbacks'
 export { default as useMutationObservable } from './useMutationObservable'
 export { default as useWindowSize } from './useWindowSize'

packages/hooks/useCustomCallbacks.ts

@@ -1,9 +1,10 @@
-enum CallbackKey {
+export enum CallbackKey {
   onQuoteCreate = 'on-quote-create',
   onAddToShoppingList = 'on-add-to-shopping-list',
+  onClickCartButton = 'on-click-cart-button',
 }
 
-const useCallbacks = (
+export const useCallbacks = (
   callbacks: CallbackKey[] | CallbackKey,
   fn: (...args: any[]) => Promise<any> | any
 ) => {
@@ -20,5 +21,3 @@ const useCallbacks = (
 
   return (...args: any[]) => fn(...args, handleEvent)
 }
-
-export default useCallbacks