fix: purchased product layout and Component modification

bigcommerce · Feb 22, 2023 · c670325 · c670325
1 parent 8f68e20
commit c670325
Show file tree

Hide file tree

Showing 14 changed files with 285 additions and 289 deletions.
diff --git a/apps/storefront/src/components/B3Dialog.tsx b/apps/storefront/src/components/B3Dialog.tsx
@@ -11,22 +11,17 @@ import {
   useRef,
   ReactElement,
   ReactNode,
-  useContext,
-  useEffect,
 } from 'react'
 
 import {
   useMobile,
+  useScrollBar,
 } from '@/hooks'
 
 import {
   B3Sping,
 } from './spin/B3Sping'
 
-import {
-  ThemeFrameContext,
-} from './ThemeFrame'
-
 interface B3DialogProps<T> {
   customActions?: () => ReactElement
   isOpen: boolean,
@@ -44,6 +39,7 @@ interface B3DialogProps<T> {
   showRightBtn?: boolean
   maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false
   fullWidth?: boolean
+  disabledSaveBtn?: boolean,
 }
 
 export const B3Dialog:<T> ({
@@ -61,6 +57,7 @@ export const B3Dialog:<T> ({
   showRightBtn,
   maxWidth,
   fullWidth,
+  disabledSaveBtn,
 }: B3DialogProps<T>) => ReactElement = ({
   customActions,
   isOpen,
@@ -78,11 +75,10 @@ export const B3Dialog:<T> ({
   showRightBtn = true,
   maxWidth = 'sm',
   fullWidth = false,
+  disabledSaveBtn = false,
 }) => {
   const container = useRef<HTMLInputElement | null>(null)
 
-  const IframeDocument = useContext(ThemeFrameContext)
-
   const [isMobile] = useMobile()
 
   const handleSaveClick = () => {
@@ -96,12 +92,7 @@ export const B3Dialog:<T> ({
     if (handleLeftClick) handleLeftClick()
   }
 
-  useEffect(() => {
-    if (IframeDocument) {
-      IframeDocument.body.style.overflow = isOpen ? 'hidden' : 'initial'
-      IframeDocument.body.style.paddingRight = isOpen ? '16px' : '0'
-    }
-  }, [isOpen, IframeDocument])
+  useScrollBar(isOpen)
 
   return (
     <Box>
@@ -165,7 +156,7 @@ export const B3Dialog:<T> ({
                       }}
                       onClick={handleSaveClick}
                       autoFocus
-                      disabled={loading}
+                      disabled={disabledSaveBtn || loading}
                     >
                       <B3Sping
                         isSpinning={loading}

diff --git a/apps/storefront/src/components/filter/B3FilterMore.tsx b/apps/storefront/src/components/filter/B3FilterMore.tsx
@@ -4,11 +4,6 @@ import {
 } from '@mui/material'
 
 import Button from '@mui/material/Button'
-import Dialog from '@mui/material/Dialog'
-import DialogActions from '@mui/material/DialogActions'
-import DialogContent from '@mui/material/DialogContent'
-import DialogTitle from '@mui/material/DialogTitle'
-import Divider from '@mui/material/Divider'
 
 import {
   // DeepPartial,
@@ -20,19 +15,15 @@ import {
   useRef,
   BaseSyntheticEvent,
   ReactElement,
-  useContext,
-  useEffect,
 } from 'react'
-import {
-  ThemeFrameContext,
-} from '../ThemeFrame'
 
 import {
   useMobile,
 } from '@/hooks'
 
 import {
   B3CustomForm,
+  B3Dialog,
 } from '@/components'
 
 import B3FilterPicker from './B3FilterPicker'
@@ -78,7 +69,6 @@ const B3FilterMore:<T, Y> ({
   onChange,
   isShowMore = false,
 }) => {
-  const container = useRef<HTMLInputElement | null>(null)
   const [open, setOpen] = useState<boolean>(false)
 
   const pickerRef = useRef<PickerRefProps | null>(null)
@@ -125,24 +115,13 @@ const B3FilterMore:<T, Y> ({
     pickerRef.current?.setClearPickerValue()
   }
 
-  const IframeDocument = useContext(ThemeFrameContext)
-  useEffect(() => {
-    if (IframeDocument) {
-      IframeDocument.body.style.overflow = open ? 'hidden' : 'initial'
-      IframeDocument.body.style.paddingRight = open ? '16px' : '0'
-    }
-  }, [open, IframeDocument])
-
   return (
     <Box
       sx={{
         ml: 3,
         cursor: 'pointer',
       }}
     >
-      <Box
-        ref={container}
-      />
 
       {
         ((fiterMoreInfo && fiterMoreInfo.length) || isShowMore) && (
@@ -152,59 +131,43 @@ const B3FilterMore:<T, Y> ({
         )
       }
 
-      <Dialog
-        open={open}
-        container={container.current}
-        onClose={handleClose}
-        fullScreen={isMobile}
-        aria-labelledby="alert-dialog-title"
-        aria-describedby="alert-dialog-description"
+      <B3Dialog
+        isOpen={open}
+        leftSizeBtn="Cancel"
+        rightSizeBtn="Apply"
+        title="Filters"
+        handleLeftClick={handleClose}
+        handRightClick={handleSaveFilters}
       >
-        <DialogTitle id="alert-dialog-title">
-          Filters
-        </DialogTitle>
-        <Divider />
-        <DialogContent>
-          <Box
-            sx={{
-              width: `${isMobile ? '100%' : '450px'}`,
-            }}
-          >
-            <B3CustomForm
-              formFields={fiterMoreInfo}
-              errors={errors}
-              control={control}
-              getValues={getValues}
-              setValue={setValue}
-            />
-            <B3FilterPicker
-              ref={pickerRef}
-              startPicker={startPicker}
-              endPicker={endPicker}
-            />
-          </Box>
-          <Button
-            sx={{
-              mt: 1,
-            }}
-            onClick={handleClearFilters}
-            size="small"
-          >
-            clear filters
-
-          </Button>
-        </DialogContent>
-        <Divider />
-        <DialogActions>
-          <Button onClick={handleClose}>Cancel</Button>
-          <Button
-            onClick={handleSaveFilters}
-            autoFocus
-          >
-            Apply
-          </Button>
-        </DialogActions>
-      </Dialog>
+        <Box
+          sx={{
+            width: `${isMobile ? '100%' : '450px'}`,
+          }}
+        >
+          <B3CustomForm
+            formFields={fiterMoreInfo}
+            errors={errors}
+            control={control}
+            getValues={getValues}
+            setValue={setValue}
+          />
+          <B3FilterPicker
+            ref={pickerRef}
+            startPicker={startPicker}
+            endPicker={endPicker}
+          />
+        </Box>
+        <Button
+          sx={{
+            mt: 1,
+          }}
+          onClick={handleClearFilters}
+          size="small"
+        >
+          clear filters
+
+        </Button>
+      </B3Dialog>
     </Box>
 
   )

diff --git a/apps/storefront/src/components/layout/B3Layout.tsx b/apps/storefront/src/components/layout/B3Layout.tsx
@@ -128,6 +128,7 @@ export function B3Layout({
         //   }}
         // >
             <Box
+              id="app-mainPage-layout"
               sx={{
                 display: 'flex',
                 minHeight: '100vh',

diff --git a/apps/storefront/src/hooks/index.ts b/apps/storefront/src/hooks/index.ts
@@ -38,6 +38,10 @@ export {
   useDebounce,
 } from './useDebounce'
 
+export {
+  useScrollBar,
+} from './useScrollBar'
+
 export {
   useSetOpen,
   useOpenPDP,

diff --git a/apps/storefront/src/hooks/useScrollBar.ts b/apps/storefront/src/hooks/useScrollBar.ts
@@ -0,0 +1,24 @@
+import {
+  useEffect,
+  useContext,
+} from 'react'
+
+import {
+  ThemeFrameContext,
+} from '@/components/ThemeFrame'
+
+const useScrollBar = (open: boolean) => {
+  const IframeDocument = useContext(ThemeFrameContext)
+
+  useEffect(() => {
+    if (IframeDocument) {
+      const mainPage = IframeDocument.querySelector('#app-mainPage-layout') as HTMLElement
+      mainPage.style.paddingRight = open ? '57px' : '40px'
+      IframeDocument.body.style.overflow = open ? 'hidden' : 'initial'
+    }
+  }, [open])
+}
+
+export {
+  useScrollBar,
+}
diff --git a/apps/storefront/src/main.tsx b/apps/storefront/src/main.tsx
@@ -8,6 +8,9 @@ import {
 import {
   GlobalProvider,
 } from '@/shared/global'
+import {
+  DynamicallyVariableProvider,
+} from '@/shared/dynamicallyVariable'
 
 import App from './App'
 import {
@@ -40,14 +43,16 @@ container.className = 'bundle-namespace'
 ReactDOM.createRoot(container).render(
   <GlobalProvider>
     <B3StoreContainer>
-      <LangProvider
-        locales={locales}
-        supportLang={SUPPORT_LANGUAGE}
-      >
-        <B3ThemeProvider>
-          <App />
-        </B3ThemeProvider>
-      </LangProvider>
+      <DynamicallyVariableProvider>
+        <LangProvider
+          locales={locales}
+          supportLang={SUPPORT_LANGUAGE}
+        >
+          <B3ThemeProvider>
+            <App />
+          </B3ThemeProvider>
+        </LangProvider>
+      </DynamicallyVariableProvider>
     </B3StoreContainer>
   </GlobalProvider>
   ,