feat: buy Again / Quick Order

https://bigc-b2b.atlassian.net/browse/BUN-483
bigcommerce · Feb 13, 2023 · a8167a0 · a8167a0
1 parent 1952ca7
commit a8167a0
Show file tree

Hide file tree

Showing 12 changed files with 571 additions and 183 deletions.
diff --git a/apps/storefront/src/components/filter/B3FilterMore.tsx b/apps/storefront/src/components/filter/B3FilterMore.tsx
@@ -57,6 +57,7 @@ interface B3FilterMoreProps<T, Y> {
   endPicker?: PickerProps
   fiterMoreInfo: Array<DeepPartial<T>>
   onChange?: (val: Y) => void
+  isShowMore?: boolean
 }
 
 interface PickerRefProps extends HTMLInputElement {
@@ -69,11 +70,13 @@ const B3FilterMore:<T, Y> ({
   endPicker,
   fiterMoreInfo,
   onChange,
+  isShowMore,
 }: B3FilterMoreProps<T, Y>) => ReactElement = ({
   startPicker,
   endPicker,
   fiterMoreInfo,
   onChange,
+  isShowMore = false,
 }) => {
   const container = useRef<HTMLInputElement | null>(null)
   const [open, setOpen] = useState<boolean>(false)
@@ -142,7 +145,7 @@ const B3FilterMore:<T, Y> ({
       />
 
       {
-        fiterMoreInfo && fiterMoreInfo.length && (
+        ((fiterMoreInfo && fiterMoreInfo.length) || isShowMore) && (
         <Box onClick={handleDialogClick}>
           <FilterListIcon />
         </Box>

diff --git a/apps/storefront/src/pages/quickorder/Quickorder.tsx b/apps/storefront/src/pages/quickorder/Quickorder.tsx
@@ -1,34 +1,85 @@
 import {
-  useContext,
   useState,
   useRef,
   useEffect,
 } from 'react'
 
 import {
   Box,
+  Grid,
 } from '@mui/material'
 
+import {
+  useMobile,
+} from '@/hooks'
+
+import {
+  B3Sping,
+} from '@/components/spin/B3Sping'
+
 import QuickorderTable from './components/QuickorderTable'
 
+interface TableRefProps extends HTMLInputElement {
+  getCheckedList: () => CustomFieldItems,
+}
+
 const Quickorder = () => {
   useEffect(() => {
   }, [])
 
-  const tableRef = useRef<any>(null)
+  const [isMobile] = useMobile()
+
+  const [isRequestLoading, setIsRequestLoading] = useState<boolean>(false)
+
+  const tableRef = useRef<TableRefProps>(null)
+
+  const getCheckedList = () => {
+    const checkedValue = tableRef.current?.getCheckedList()
+
+    console.log(checkedValue)
+  }
 
   return (
-    <Box>
-      <Box sx={{
-        width: '65%',
-      }}
-      >
-        <QuickorderTable
-          isEdit
-          ref={tableRef}
-        />
+    <B3Sping
+      isSpinning={isRequestLoading}
+    >
+      <Box>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'center',
+          }}
+        >
+          <Grid
+            container
+            spacing={2}
+          >
+
+            <Grid xs={isMobile ? 12 : 8}>
+              <QuickorderTable
+                setIsRequestLoading={setIsRequestLoading}
+                ref={tableRef}
+              />
+            </Grid>
+
+            <Grid xs={isMobile ? 12 : 4}>
+              sidebar
+            </Grid>
+          </Grid>
+        </Box>
+        <Box
+          sx={{
+            position: 'fixed',
+            bottom: 0,
+            left: 0,
+            width: '100%',
+          }}
+          onClick={getCheckedList}
+        >
+          button
+        </Box>
       </Box>
-    </Box>
+    </B3Sping>
   )
 }
 

diff --git a/apps/storefront/src/pages/quickorder/components/QuickOrderCard.tsx b/apps/storefront/src/pages/quickorder/components/QuickOrderCard.tsx
@@ -0,0 +1,140 @@
+import {
+  ReactElement,
+} from 'react'
+
+import {
+  Box,
+  CardContent,
+  Typography,
+  styled,
+} from '@mui/material'
+
+import {
+  getProductOptionsFields,
+} from '../../shoppingListDetails/shared/config'
+
+interface QuickOrderCardProps {
+  item: any,
+  currencyToken: string,
+  checkBox?: () => ReactElement,
+}
+
+const StyledImage = styled('img')(() => ({
+  maxWidth: '60px',
+  height: 'auto',
+  marginRight: '0.5rem',
+}))
+
+const defaultProductImage = 'https://cdn11.bigcommerce.com/s-1i6zpxpe3g/stencil/cd9e3830-4c73-0139-8a51-0242ac11000a/e/4fe76590-73f1-0139-3767-32e4ea84ca1d/img/ProductDefault.gif'
+
+const QuickOrderCard = (props: QuickOrderCardProps) => {
+  const {
+    item: shoppingDetail,
+    checkBox,
+    currencyToken = '$',
+  } = props
+
+  const {
+    basePrice,
+    quantity,
+    primaryImage,
+    productName,
+    variantSku,
+  } = shoppingDetail
+
+  const total = +basePrice * +quantity
+  const price = +basePrice
+
+  const product: any = {
+    ...shoppingDetail.productsSearch,
+    selectOptions: shoppingDetail.optionList,
+  }
+
+  const productFields = (getProductOptionsFields(product, {}))
+
+  const optionList = JSON.parse(shoppingDetail.optionList)
+  const optionsValue: CustomFieldItems[] = productFields.filter((item) => item.valueText)
+
+  return (
+    <Box
+      key={shoppingDetail.id}
+      sx={{
+        borderTop: '1px solid #D9DCE9',
+      }}
+    >
+      <CardContent
+        sx={{
+          color: '#313440',
+          display: 'flex',
+          pl: 0,
+        }}
+      >
+        <Box>
+          {
+            checkBox && checkBox()
+          }
+        </Box>
+        <Box>
+          <StyledImage
+            src={primaryImage || defaultProductImage}
+            alt="Product-img"
+            loading="lazy"
+          />
+        </Box>
+        <Box
+          sx={{
+            flex: 1,
+          }}
+        >
+          <Typography
+            variant="body1"
+            color="#212121"
+          >
+            {productName}
+          </Typography>
+          <Typography
+            variant="body1"
+            color="#616161"
+          >
+            {variantSku}
+          </Typography>
+          <Box
+            sx={{
+              margin: '1rem 0',
+            }}
+          >
+            {
+              (optionList.length > 0 && optionsValue.length > 0) && (
+                <Box>
+                  {
+                    optionsValue.map((option: any) => (
+                      <Typography
+                        sx={{
+                          fontSize: '0.75rem',
+                          lineHeight: '1.5',
+                          color: '#455A64',
+                        }}
+                        key={option.valueLabel}
+                      >
+                        {`${option.valueLabel
+                        }: ${option.valueText}`}
+                      </Typography>
+                    ))
+                  }
+                </Box>
+              )
+            }
+          </Box>
+
+          <Typography>{`Price: ${currencyToken}${price.toFixed(2)}`}</Typography>
+
+          <Typography>{`qty: ${quantity}`}</Typography>
+
+          <Typography>{`Total: ${currencyToken}${total.toFixed(2)}`}</Typography>
+        </Box>
+      </CardContent>
+    </Box>
+  )
+}
+
+export default QuickOrderCard