feat: support refresh and Order List Mobile UI Issues

bigcommerce · Nov 22, 2022 · f9b2ef8 · f9b2ef8
1 parent 6874578
commit f9b2ef8
Show file tree

Hide file tree

Showing 13 changed files with 135 additions and 67 deletions.
diff --git a/apps/storefront/src/App.tsx b/apps/storefront/src/App.tsx
@@ -5,6 +5,7 @@ import {
 
 import {
   HashRouter,
+  useLocation,
   // useNavigate,
 } from 'react-router-dom'
 import {
@@ -94,6 +95,7 @@ export default function App() {
       pathname,
       href,
       search,
+      hash,
     } = window.location
 
     dispatch({
@@ -133,6 +135,12 @@ export default function App() {
       }
       if (!customerId) {
         await getCurrentCustomerInfo(dispatch)
+      } else if (hash) {
+        const url = hash.split('#')[1]
+        setOpenPage({
+          isOpen: true,
+          openUrl: url,
+        })
       }
     }
 

diff --git a/apps/storefront/src/components/layout/B3Layout.tsx b/apps/storefront/src/components/layout/B3Layout.tsx
@@ -2,6 +2,7 @@ import {
   useContext,
   useEffect,
   ReactNode,
+  useState,
 } from 'react'
 
 import {
@@ -10,7 +11,9 @@ import {
 
 import {
   useNavigate,
+  useLocation,
 } from 'react-router-dom'
+
 import {
   useMobile,
 } from '@/hooks'
@@ -34,13 +37,25 @@ import {
   B3Mainheader,
 } from './B3Mainheader'
 
+import {
+  routes,
+} from '@/shared/routes'
+
+import {
+  RouteItem,
+} from '@/shared/routes/routes'
+
 export function B3Layout({
   children,
 }: {
   children: ReactNode;
 }) {
   const [isMobile] = useMobile()
 
+  const location = useLocation()
+
+  const [title, setTitle] = useState<string>('')
+
   const {
     state: {
       emailAddress,
@@ -56,12 +71,21 @@ export function B3Layout({
     }
   }, [emailAddress, customerId])
 
+  useEffect(() => {
+    const itemsRoutes = routes.filter((item: RouteItem) => item.path === location.pathname)
+    if (itemsRoutes.length) {
+      setTitle(itemsRoutes[0].name)
+    } else {
+      setTitle('')
+    }
+  }, [location])
+
   return (
     <Box>
 
       {
         isMobile ? (
-          <B3MobileLayout>
+          <B3MobileLayout title={title}>
             {children}
           </B3MobileLayout>
         )
@@ -88,7 +112,7 @@ export function B3Layout({
                 sx={{
                   display: 'flex',
                   flexDirection: 'column',
-                  minWidth: '250px',
+                  width: '250px',
                   pl: '20px',
                   backgroundColor: '#fef9f5',
                 }}
@@ -111,7 +135,7 @@ export function B3Layout({
                   p: '0 24px 50px 50px',
                 }}
               >
-                <B3Mainheader />
+                <B3Mainheader title={title} />
                 <Box
                   component="main"
                   sx={{

diff --git a/apps/storefront/src/components/layout/B3Logo.tsx b/apps/storefront/src/components/layout/B3Logo.tsx
@@ -17,19 +17,19 @@ import {
   GlobaledContext,
 } from '@/shared/global'
 
-interface LogoProps {
-  logoUrl: string,
-  isMobile: boolean,
-}
-
-const Logo = styled('div')((props: LogoProps) => ({
-  width: '100%',
-  height: '100%',
-  backgroundImage: `url(${props?.logoUrl || ''})`,
-  backgroundSize: '100% 100%',
-  backgroundRepeat: 'no-repeat',
-  backgroundPosition: 'center',
-}))
+// interface LogoProps {
+//   logoUrl: string,
+//   isMobile: boolean,
+// }
+
+// const Logo = styled('div')((props: LogoProps) => ({
+//   width: '100%',
+//   height: '100%',
+//   backgroundImage: `url(${props?.logoUrl || ''})`,
+//   backgroundSize: '100% 100%',
+//   backgroundRepeat: 'no-repeat',
+//   backgroundPosition: 'center',
+// }))
 
 export const B3Logo = () => {
   const {
@@ -46,11 +46,16 @@ export const B3Logo = () => {
         flexShrink: '0',
         height: `${isMobile ? '15vw' : '70px'}`,
         width: `${isMobile ? '45%' : '100%'}`,
+        '& img': {
+          width: '100%',
+          height: '100%',
+          objectFit: 'contain',
+        },
       }}
     >
-      <Logo
-        logoUrl={logo}
-        isMobile={isMobile}
+      <img
+        src={logo}
+        alt="logo"
       />
     </Box>
 

diff --git a/apps/storefront/src/components/layout/B3Mainheader.tsx b/apps/storefront/src/components/layout/B3Mainheader.tsx
@@ -8,22 +8,10 @@ import {
   Box,
 } from '@mui/material'
 
-import {
-  useLocation,
-} from 'react-router-dom'
-
 import {
   GlobaledContext,
 } from '@/shared/global'
 
-import {
-  routes,
-} from '@/shared/routes'
-
-import {
-  RouteItem,
-} from '@/shared/routes/routes'
-
 import {
   B3AccountInfo,
 } from './B3AccountInfo'
@@ -48,28 +36,18 @@ import {
 //   },
 // ]
 
-export const B3Mainheader = () => {
-  const location = useLocation()
-
-  const [title, setTitle] = useState<string>('')
-
+export const B3Mainheader = ({
+  title,
+}: {
+  title: string
+}) => {
   const {
     state: {
-      isCompanyAccount,
       companyInfo,
       salesRepCompanyName,
     },
   } = useContext(GlobaledContext)
 
-  useEffect(() => {
-    const itemsRoutes = routes.filter((item: RouteItem) => item.path === location.pathname)
-    if (itemsRoutes.length) {
-      setTitle(itemsRoutes[0].name)
-    } else {
-      setTitle('')
-    }
-  }, [location])
-
   // const handleItemClick = (item: AcountListProps) => {
   //   dispatch({
   //     type: 'common',

diff --git a/apps/storefront/src/components/layout/B3MobileLayout.tsx b/apps/storefront/src/components/layout/B3MobileLayout.tsx
@@ -31,8 +31,10 @@ import {
 
 export const B3MobileLayout = ({
   children,
+  title,
 }: {
   children: ReactNode;
+  title: string,
 }) => {
   const [isOpenMobileSidebar, setOpenMobileSidebar] = useState<boolean>(false)
   const openRouteList = () => {
@@ -41,7 +43,6 @@ export const B3MobileLayout = ({
 
   const {
     state: {
-      isCompanyAccount,
       companyInfo,
       salesRepCompanyName,
     },
@@ -67,13 +68,27 @@ export const B3MobileLayout = ({
         }}
       >
         <B3Logo />
+
         <Badge
-          badgeContent={4}
+          badgeContent={0}
           color="secondary"
         >
           <DensityMedium onClick={openRouteList} />
         </Badge>
       </Box>
+
+      <Box
+        component="h1"
+        sx={{
+          p: 0,
+          m: 0,
+          mb: '2vw',
+        }}
+      >
+        {
+            title
+          }
+      </Box>
       <Box
         sx={{
           flex: 1,

diff --git a/apps/storefront/src/pages/login/Login.tsx b/apps/storefront/src/pages/login/Login.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import {
   useEffect,
   useState,

diff --git a/apps/storefront/src/pages/order/Order.tsx b/apps/storefront/src/pages/order/Order.tsx
@@ -32,6 +32,7 @@ import {
 import {
   getB2BAllOrders,
   getBCAllOrders,
+  getOrderStatusType,
 } from '@/shared/service/b2b'
 
 import {
@@ -162,9 +163,21 @@ const Order = ({
 
   const [filterData, setFilterData] = useState<Partial<FilterSearchProps> | null>(null)
 
+  const [filterInfo, setFilterInfo] = useState<Array<any>>([])
+
   useEffect(() => {
     const search = getInitFilter(isCompanyOrder, isB2BUser)
     setFilterData(search)
+    const initFilter = async () => {
+      const {
+        orderStatuses,
+      }: any = await getOrderStatusType()
+      const filterInfo = getFilterMoreData(isB2BUser, isCompanyOrder, orderStatuses)
+
+      setFilterInfo(filterInfo)
+    }
+
+    initFilter()
   }, [])
 
   const fetchList = async () => {
@@ -246,7 +259,12 @@ const Order = ({
     {
       key: 'status',
       title: 'Order status',
-      render: (item: ListItem) => <OrderStatus code={item.status} />,
+      render: (item: ListItem) => (
+        <OrderStatus
+          text={item.customStatus}
+          code={item.status}
+        />
+      ),
       width: '200px',
     },
     {
@@ -325,8 +343,6 @@ const Order = ({
 
   const columnItems = getColumnItems()
 
-  const filterInfo = getFilterMoreData(isB2BUser, isCompanyOrder)
-
   return (
     (
       <B3Sping

diff --git a/apps/storefront/src/pages/order/config.ts b/apps/storefront/src/pages/order/config.ts
@@ -53,7 +53,7 @@ const bcFilterSearch = {
   q: '',
 }
 
-export const getFilterMoreData = (isB2BUser:boolean, isCompanyOrder: boolean) => {
+export const getFilterMoreData = (isB2BUser:boolean, isCompanyOrder: boolean, orderStatuses: {[key: string]: string}) => {
   const orderStatusOptions = Object.keys(orderStatusCode).map((item) => ({
     label: orderStatusCode[item],
     value: orderStatusCode[item],
@@ -76,7 +76,11 @@ export const getFilterMoreData = (isB2BUser:boolean, isCompanyOrder: boolean) =>
       required: false,
       default: '',
       fieldType: 'dropdown',
-      options: orderStatusOptions,
+      options: orderStatuses,
+      replaceOptions: {
+        label: 'customLabel',
+        value: 'customLabel',
+      },
       xs: 12,
       variant: 'filled',
       size: 'small',

diff --git a/apps/storefront/src/pages/orderDetail/OrderDetail.tsx b/apps/storefront/src/pages/orderDetail/OrderDetail.tsx
@@ -158,7 +158,9 @@ const OrderDetail = () => {
             }}
             onClick={goToOrders}
           >
-            Back to orders
+            {
+              localtion.state !== null ? 'Back to orders' : ''
+            }
           </Box>
         </Box>
-Original file line number
+Diff line change
@@ Expand Up / @@ -158,7 +158,9 @@ const OrderDetail = () => { @@
                 }}
                 onClick={goToOrders}
               >
-                Back to orders
+                {
+                  localtion.state !== null ? 'Back to orders' : ''
+                }
               </Box>
             </Box>
@@ Expand Down @@