feat: upload component

apps/storefront/src/App.tsx

@@ -200,7 +200,6 @@ export default function App() {
         }
       }
       // background login enter judgment and refresh
-      console.log(!(customerId && !window.location.hash))
       if (!href.includes('checkout') && !(customerId && !window.location.hash)) {
         gotoAllowedAppPage(+userInfo.role, userInfo.isAgenting, gotoPage)
       }

apps/storefront/src/components/B3HoverButton.tsx

@@ -79,7 +79,7 @@ export const B3HoverButton = (props: B3HoverButtonProps) => {
               height: '42px',
             }}
             onClick={() => {
-              B3SStorage.set('nextPath', '/')
+              // B3SStorage.set('nextPath', '/')
               setOpenPage({
                 isOpen: true,
                 openUrl: '/quoteDraft',

apps/storefront/src/components/B3MasquradeGobalTip.tsx

@@ -123,6 +123,7 @@ export const B3MasquradeGobalTip = (props: B3MasquradeGobalTipProps) => {
         backgroundColor: '#ED6C02',
         borderRadius: '4px',
         height: '52px',
+        color: '#FFFFFF',
         ...sx,
       }}
       anchorOrigin={{

apps/storefront/src/components/index.ts

@@ -72,3 +72,7 @@ export {
 export {
   CheckoutTip,
 } from './extraTip/CheckoutTip'
+
+export {
+  B3Upload,
+} from './upload/B3Upload'

apps/storefront/src/components/upload/B3Upload.tsx

@@ -0,0 +1,209 @@
+import {
+  Box,
+  Button,
+} from '@mui/material'
+
+import Grid from '@mui/material/Unstable_Grid2'
+
+import {
+  useRef,
+  useState,
+} from 'react'
+
+import {
+  DropzoneArea,
+} from 'react-mui-dropzone'
+
+import styled from '@emotion/styled'
+
+import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile'
+import {
+  B3Dialog,
+} from '../B3Dialog'
+
+import {
+  B3UploadLoadding,
+} from './B3UploadLoadding'
+
+import {
+  removeEmptyRow,
+  parseEmptyData,
+} from './utils'
+
+const FileUploadContainer = styled(Box)(() => ({
+  width: '100%',
+  border: '1px dashed #1976D2',
+  borderRadius: '5px',
+  position: 'relative',
+  '& .file-upload-area': {
+    height: '200px',
+    '& .MuiSvgIcon-root': {
+      display: 'none',
+    },
+  },
+}))
+
+export const B3Upload = () => {
+  const uploadRef = useRef<HTMLInputElement>(null)
+  const [step, setStep] = useState<string>('init')
+
+  const handleChange = async (files: File[]) => {
+    // init loadding end
+    const file = files.length > 0 ? files[0] : null
+
+    if (file) {
+      const reader = new FileReader()
+
+      reader.addEventListener('load', async (b: any) => {
+        const csvdata = b.target.result
+
+        if (csvdata) {
+          setStep('loadding')
+          const content = csvdata.split('\n')
+          const EmptyData = removeEmptyRow(content)
+          const parseData = parseEmptyData(EmptyData)
+          console.log(EmptyData, parseData)
+
+          // DOTO:
+          await new Promise((r) => {
+            setTimeout(() => {
+              r('1')
+            }, 5000)
+          })
+          setStep('end')
+        }
+      })
+
+      reader.readAsBinaryString(file)
+    }
+  }
+
+  const openFile = () => {
+    if (uploadRef.current) uploadRef.current.children[1].click()
+  }
+
+  const content = (
+    <Box sx={{
+      width: 'auto',
+      position: 'absolute',
+      transform: 'translate(-50%, -50%)',
+      top: '50%',
+      left: '50%',
+    }}
+    >
+      <Grid
+        container
+        rowSpacing={1.5}
+        display="flex"
+        direction="column"
+        justifyContent="center"
+      >
+        <Grid
+          display="flex"
+          justifyContent="center"
+          xs={12}
+        >
+          <InsertDriveFileIcon />
+        </Grid>
+
+        <Grid
+          display="flex"
+          justifyContent="center"
+          xs={12}
+        >
+          <Box sx={{
+            fontSize: '16px',
+            fontWeight: '400',
+            color: '#5E637A',
+          }}
+          >
+            Drag & drop file here
+          </Box>
+        </Grid>
+
+        <Grid
+          display="flex"
+          xs={12}
+          sx={{
+            fontWeight: 400,
+            fontSize: '14px',
+          }}
+        >
+          <Box
+            sx={{
+              color: '#8C93AD',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            File types: CSV, maximum size: 50MB.
+          </Box>
+          <Box
+            sx={{
+              color: '#1976D2',
+              cursor: 'pointer',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            Download sample
+          </Box>
+        </Grid>
+
+        <Grid
+          display="flex"
+          justifyContent="center"
+          xs={12}
+        >
+          <Button
+            onClick={openFile}
+            variant="outlined"
+          >
+            Upload file
+          </Button>
+        </Grid>
+
+      </Grid>
+    </Box>
+  )
+
+  return (
+
+    <B3Dialog
+      isOpen
+      title="test"
+      maxWidth="lg"
+    >
+      <Box
+        sx={{
+          height: '200px',
+          minWidth: '600px',
+        }}
+      >
+
+        {
+          step === 'init' && (
+          <FileUploadContainer ref={uploadRef}>
+            {content}
+            <DropzoneArea
+              dropzoneClass="file-upload-area"
+              filesLimit={1}
+              onChange={handleChange}
+              showPreviews={false}
+              showPreviewsInDropzone={false}
+              showAlerts={false}
+              dropzoneText=""
+            />
+          </FileUploadContainer>
+          )
+        }
+
+        {
+          step === 'loadding' && <B3UploadLoadding step={step} />
+        }
+
+        {
+          step === 'end' && <Box>123123</Box>
+        }
+      </Box>
+    </B3Dialog>
+  )
+}

apps/storefront/src/components/upload/B3UploadLoadding.tsx

@@ -0,0 +1,102 @@
+import {
+  useState,
+  useEffect,
+} from 'react'
+
+import CircularProgress, {
+  CircularProgressProps,
+} from '@mui/material/CircularProgress'
+import Typography from '@mui/material/Typography'
+import {
+  Box,
+} from '@mui/material'
+
+function CircularProgressWithLabel(
+  props: CircularProgressProps & { value: number },
+) {
+  return (
+    <Box sx={{
+      position: 'relative', display: 'inline-flex',
+    }}
+    >
+      <CircularProgress
+        variant="determinate"
+        {...props}
+      />
+      <Box
+        sx={{
+          top: 0,
+          left: 0,
+          bottom: 0,
+          right: 0,
+          position: 'absolute',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <Typography
+          variant="caption"
+          component="div"
+          color="text.secondary"
+        >
+          {`${Math.round(props.value)}%`}
+
+        </Typography>
+      </Box>
+    </Box>
+  )
+}
+
+interface B3UploadLoaddingProps {
+  step: string,
+}
+
+const B3UploadLoadding = (props: B3UploadLoaddingProps) => {
+  const {
+    step,
+  } = props
+  const [progress, setProgress] = useState<number>(0)
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setProgress((prevProgress) => (prevProgress === 95 ? 95 : prevProgress + 1))
+      if (step === 'end') {
+        setProgress(100)
+        clearInterval(timer)
+      }
+    }, 100)
+    return () => {
+      if (timer) clearInterval(timer)
+    }
+  }, [])
+  return (
+    <Box
+      sx={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexDirection: 'column',
+      }}
+    >
+      <CircularProgressWithLabel value={progress} />
+      <Box
+        sx={{
+          fontWeight: 400,
+          fontSize: '14px',
+          color: '#8C93AD',
+          mt: '10px',
+        }}
+      >
+        Uploading file...
+
+      </Box>
+    </Box>
+  )
+}
+
+export {
+  B3UploadLoadding,
+}

apps/storefront/src/components/upload/utils.ts

@@ -0,0 +1,23 @@
+export const removeEmptyRow = (arr: string[]) => {
+  const tmpArr = arr
+  if (tmpArr[tmpArr.length - 1] === '') {
+    tmpArr.pop()
+  }
+  tmpArr.shift()
+
+  return tmpArr
+}
+
+export const parseEmptyData = (arr: string[]) => {
+  if (arr.length) {
+    const tmpArr = arr.map((item: string) => {
+      const products = item.split(',')
+      return {
+        sku: products[0],
+        qty: products[1].replace(/[\r\n]/g, ''),
+      }
+    })
+    return tmpArr
+  }
+  return []
+}

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

@@ -222,6 +222,7 @@ const QuoteDraft = ({
           }
         } else {
           B3LStorage.set('MyQuoteInfo', {})
+          B3LStorage.set('b2bQuoteDraftList', [])
         }
 
         if (isB2BUser) {
@@ -336,7 +337,8 @@ const QuoteDraft = ({
   } = getDefaultCurrencyInfo()
 
   const getQuoteTableDetails = async (params: CustomFieldItems) => {
-    const quoteDraftAllList = B3LStorage.get('b2bQuoteDraftList') || []
+    const quoteDraftUserId = B3LStorage.get('quoteDraftUserId')
+    const quoteDraftAllList = +B3UserId === +quoteDraftUserId ? B3LStorage.get('b2bQuoteDraftList') : []
 
     const startIndex = +params.offset
     const endIndex = +params.first + startIndex

apps/storefront/src/pages/quote/components/QuoteItemCard.tsx

@@ -88,9 +88,7 @@ export const QuoteItemCard = (props: QuoteItemCardProps) => {
   ]
 
   return (
-    <Card
-      key={item.orderId}
-    >
+    <Card>
       <CardContent
         sx={{
           color: 'rgba(0, 0, 0, 0.6)',