fix: change reminder display time

https://bigc-b2b.atlassian.net/browse/BUN-1201
bigcommerce · Jul 11, 2023 · 8d7e267 · 8d7e267
1 parent d7a2920
commit 8d7e267
Show file tree

Hide file tree

Showing 9 changed files with 73 additions and 65 deletions.
diff --git a/apps/storefront/src/components/B3AddToQuoteTip.tsx b/apps/storefront/src/components/B3AddToQuoteTip.tsx
@@ -27,6 +27,7 @@ export default function B3AddToQuoteTip(props: B3AddToQuoteTipProps) {
         variant="text"
         sx={{
           color: '#ffffff',
+          padding: 0,
         }}
       >
         OPEN QUOTE

diff --git a/apps/storefront/src/components/B3GlobalTip.tsx b/apps/storefront/src/components/B3GlobalTip.tsx
@@ -1,4 +1,5 @@
-import { useContext, useEffect, useRef } from 'react'
+import { useContext, useEffect } from 'react'
+import { flushSync } from 'react-dom'
 
 import { DynamicallyVariableedContext } from '@/shared/dynamicallyVariable'
 import { MsgsProps } from '@/shared/dynamicallyVariable/context/config'
@@ -15,8 +16,6 @@ export default function B3GlobalTip() {
     window.globalTipDispatch = dispatch
   }, [])
 
-  const timer = useRef<ReturnType<typeof setTimeout> | null>(null)
-
   const setMsgs = (msgs: [] | Array<MsgsProps> = []) => {
     dispatch({
       type: 'common',
@@ -35,16 +34,14 @@ export default function B3GlobalTip() {
     setMsgs(newMsgs)
   }
 
-  const closeMsgs = () => {
+  const closeMsgs = (id: number | string, reason: string) => {
     const { msgs = [] } = globalTipMessage
 
-    if (timer.current) {
-      clearTimeout(timer.current)
-    }
+    if (reason === 'clickaway') return
 
-    if (msgs.length) {
-      timer.current = setTimeout(() => {
-        const newMsgs = msgs.filter((item: MsgsProps) => item.isClose)
+    flushSync(() => {
+      if (msgs.length) {
+        const newMsgs = msgs.filter((item: MsgsProps) => item.id !== id)
         dispatch({
           type: 'common',
           payload: {
@@ -54,15 +51,15 @@ export default function B3GlobalTip() {
             },
           },
         })
-      }, globalTipMessage?.autoHideDuration)
-    }
+      }
+    })
   }
 
   return (
     <B3Tip
       autoHideDuration={globalTipMessage?.autoHideDuration}
       msgs={globalTipMessage?.msgs}
-      handleAllClose={() => closeMsgs()}
+      handleAllClose={closeMsgs}
       handleItemClose={handleClose}
       vertical="top"
       horizontal="right"

diff --git a/apps/storefront/src/components/B3Tip.tsx b/apps/storefront/src/components/B3Tip.tsx
@@ -1,56 +1,70 @@
 import { Alert, AlertTitle, Box, Snackbar } from '@mui/material'
 
+import { useMobile } from '@/hooks'
 import {
   MsgsProps,
   TipMessagesProps,
 } from '@/shared/dynamicallyVariable/context/config'
 
 interface B3TipProps extends TipMessagesProps {
   handleItemClose: (id: number | string) => void
-  handleAllClose: () => void
+  handleAllClose: (id: string | number, reason: string) => void
 }
 
 export default function B3Tip({
-  autoHideDuration = 5000,
   handleItemClose,
   vertical = 'bottom',
   horizontal = 'right',
   msgs = [],
   handleAllClose,
 }: B3TipProps) {
+  const [isMobile] = useMobile()
   if (!msgs || !msgs.length) return null
   return (
-    <Snackbar
-      open={!!msgs.length}
-      autoHideDuration={autoHideDuration}
-      onClose={handleAllClose}
-      anchorOrigin={{
-        vertical,
-        horizontal,
-      }}
-    >
-      <Box>
-        {msgs.length &&
-          msgs.map((msg: MsgsProps) => (
-            <Alert
+    <Box>
+      {msgs.length > 0
+        ? msgs.map((msg: MsgsProps, index: number) => (
+            <Snackbar
+              key={msg.id}
+              open={!!msg?.msg?.length}
+              autoHideDuration={msg?.time || 5000}
+              onClose={(e, reason: string) => handleAllClose(msg.id, reason)}
+              anchorOrigin={{
+                vertical,
+                horizontal,
+              }}
               sx={{
-                width: '100%',
-                alignItems: 'center',
-                '& button[title="Close"]': {
-                  display: `${msg.isClose ? 'block' : 'none'}`,
-                },
-                mb: '5px',
+                top: `${
+                  24 + index * 8 + index * (isMobile ? 70 : 60)
+                }px !important`,
               }}
-              variant="filled"
-              key={msg.id}
-              severity={msg.type}
-              onClose={() => msg.isClose && handleItemClose(msg.id)}
             >
-              {msg?.title && <AlertTitle>{msg.title}</AlertTitle>}
-              {msg.jsx ? msg.jsx() : msg.msg}
-            </Alert>
-          ))}
-      </Box>
-    </Snackbar>
+              <Box
+                sx={{
+                  display: 'flex',
+                }}
+              >
+                <Alert
+                  sx={{
+                    width: '100%',
+                    alignItems: 'center',
+                    '& button[title="Close"]': {
+                      display: `${msg.isClose ? 'block' : 'none'}`,
+                    },
+                    mb: '5px',
+                  }}
+                  variant="filled"
+                  key={msg.id}
+                  severity={msg.type}
+                  onClose={() => msg.isClose && handleItemClose(msg.id)}
+                >
+                  {msg?.title && <AlertTitle>{msg.title}</AlertTitle>}
+                  {msg.jsx ? msg.jsx() : msg.msg}
+                </Alert>
+              </Box>
+            </Snackbar>
+          ))
+        : null}
+    </Box>
   )
 }
diff --git a/apps/storefront/src/components/layout/B3LayoutTip.tsx b/apps/storefront/src/components/layout/B3LayoutTip.tsx
@@ -1,4 +1,5 @@
-import { useContext, useEffect, useRef } from 'react'
+import { useContext, useEffect } from 'react'
+import { flushSync } from 'react-dom'
 
 import { B3Tip } from '@/components'
 import { useMobile } from '@/hooks'
@@ -13,18 +14,10 @@ function B3LayoutTip() {
 
   const [isMobile] = useMobile()
 
-  const timer = useRef<ReturnType<typeof setTimeout> | null>(null)
-
   useEffect(() => {
     window.tipDispatch = dispatch
   }, [])
 
-  useEffect(() => {
-    if (timer.current) {
-      clearTimeout(timer.current)
-    }
-  }, [tipMessage?.msgs])
-
   // useEffect(() => {
   //   window.b3Tipmessage = tipMessage?.msgs || []
   // }, [tipMessage])
@@ -50,20 +43,17 @@ function B3LayoutTip() {
 
   const handleClose = (id: number | string) => {
     const newMsgs = msgs.filter((msg) => msg.id !== id)
-    if (!!newMsgs.length && timer.current) {
-      clearTimeout(timer.current)
-    }
+
     setMsgs(newMsgs)
   }
 
-  const closeMsgs = () => {
-    if (timer.current) {
-      clearTimeout(timer.current)
-    }
+  const closeMsgs = (id: number | string, reason: string) => {
+    if (reason === 'clickaway') return
+
+    flushSync(() => {
+      if (msgs.length) {
+        const newMsgs = msgs.filter((item: MsgsProps) => item.id !== id)
 
-    if (msgs.length) {
-      timer.current = setTimeout(() => {
-        const newMsgs = msgs.filter((item: MsgsProps) => item.isClose)
         dispatch({
           type: 'common',
           payload: {
@@ -73,8 +63,8 @@ function B3LayoutTip() {
             },
           },
         })
-      }, autoHideDuration)
-    }
+      }
+    })
   }
 
   return (

diff --git a/apps/storefront/src/pages/pdp/PDP.tsx b/apps/storefront/src/pages/pdp/PDP.tsx
@@ -112,6 +112,7 @@ const tip = (
       variant="text"
       sx={{
         color: '#ffffff',
+        padding: 0,
       }}
     >
       view shopping list

diff --git a/apps/storefront/src/pages/quickorder/components/QuickOrderFooter.tsx b/apps/storefront/src/pages/quickorder/components/QuickOrderFooter.tsx
@@ -451,6 +451,7 @@ function QuickOrderFooter(props: QuickOrderFooterProps) {
         variant="text"
         sx={{
           color: '#ffffff',
+          padding: 0,
         }}
       >
         view shopping list

diff --git a/apps/storefront/src/pages/quote/QuoteDetail.tsx b/apps/storefront/src/pages/quote/QuoteDetail.tsx
@@ -352,6 +352,7 @@ function QuoteDetail() {
         sx={{
           color: '#ffffff',
           textAlign: 'left',
+          padding: 0,
         }}
       >
         {+role === 100 ? 'Copy quote link' : 'Review all quotes'}

diff --git a/apps/storefront/src/shared/dynamicallyVariable/context/config.ts b/apps/storefront/src/shared/dynamicallyVariable/context/config.ts
@@ -10,6 +10,7 @@ export interface MsgsProps {
   isClose?: boolean
   vertical?: 'top' | 'bottom'
   horizontal?: 'left' | 'right' | 'center'
+  time: number
 }
 export interface TipMessagesProps {
   msgs?: Array<MsgsProps> | []

diff --git a/apps/storefront/src/utils/b3Tip.ts b/apps/storefront/src/utils/b3Tip.ts
@@ -34,6 +34,7 @@ variants.forEach((variant) => {
         type: variant,
         msg: message || `${variant} without any info.`,
         jsx: options?.jsx,
+        time: 5000,
       },
     ]
 
@@ -56,6 +57,7 @@ variants.forEach((variant) => {
         type: variant,
         msg: message || `${variant} without any info.`,
         jsx: options?.jsx,
+        time: 5000,
       },
     ]