feat: add orders and orderDetail

1.https://bigc-b2b.atlassian.net/browse/BUN-273
https://bigc-b2b.atlassian.net/browse/BUN-355

apps/storefront/index.html

@@ -51,6 +51,11 @@ <h1>Ugly Cornerstone Store Theme with Weird CSS</h1>
         Register
       </a>
     </div>
+    <div>
+      <a class="navUser-action" href="/account.php" aria-label="account">
+        dashboard
+      </a>
+    </div>
     <div id="b2bParent">
       <a class="navUser-action" href="/login.php?action=logout" aria-label="Register" onclick="inlineEvent()">
         Loyout

apps/storefront/package.json

@@ -28,6 +28,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-hook-form": "^7.33.1",
+    "react-infinite-scroller": "^1.2.6",
     "react-mui-dropzone": "^4.0.6",
     "react-router-dom": "6"
   },
@@ -37,6 +38,7 @@
     "@testing-library/user-event": "^14.2.5",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
+    "@types/react-infinite-scroller": "^1.2.3",
     "@vitejs/plugin-legacy": "^2.0.0",
     "@vitejs/plugin-react": "^2.0.0",
     "c8": "^7.11.3",

apps/storefront/src/App.tsx

@@ -1,19 +1,11 @@
 import {
   useEffect,
-  lazy,
-  Suspense,
   useContext,
 } from 'react'
 
-import {
-  Box,
-} from '@mui/material'
-
 import {
   HashRouter,
-  Route,
-  Routes,
-  Outlet,
+  // useNavigate,
 } from 'react-router-dom'
 import {
   useB3AppOpen,
@@ -26,7 +18,6 @@ import {
 import globalB3 from '@b3/global-b3'
 
 import {
-  // B3SStorage,
   getChannelId,
   loginInfo,
   getCurrentCustomerInfo,
@@ -45,9 +36,6 @@ import {
   ThemeFrame,
   B3RenderRouter,
 } from '@/components'
-// import {
-//   RegisteredProvider,
-// } from '@/pages/registered/context/RegisteredContext'
 
 const FONT_URL = 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap'
 const CUSTOM_STYLES = `
@@ -81,6 +69,8 @@ export default function App() {
     dispatch,
   } = useContext(GlobaledContext)
 
+  // const navigate = useNavigate()
+
   useEffect(() => {
     if (isOpen) {
       document.body.style.height = '100%'
@@ -142,7 +132,7 @@ export default function App() {
         await loginInfo()
       }
       if (!customerId) {
-        getCurrentCustomerInfo(dispatch)
+        await getCurrentCustomerInfo(dispatch)
       }
     }
 

apps/storefront/src/components/B3CustomForm.tsx

@@ -75,6 +75,7 @@ export function B3CustomForm(props: B3UI.B3CustomFormProps) {
                 errors={errors}
                 control={control}
                 setValue={setValue}
+                getValues={getValues}
               />
             )
           }

apps/storefront/src/components/B3DropDown.tsx

@@ -26,13 +26,15 @@ interface B3DropDownProps<T> {
   config?: configProps,
   title: string,
   handleItemClick: (arg0: T) => void,
+  value?: string,
 }
 
 export const B3DropDown: <T>(props: B3DropDownProps<T>) => ReactElement = ({
   width,
   list,
   config,
   title,
+  value,
   handleItemClick,
 }) => {
   const [open, setOpen] = useState<null | HTMLElement>(null)
@@ -76,20 +78,22 @@ export const B3DropDown: <T>(props: B3DropDownProps<T>) => ReactElement = ({
       >
 
         {
-          list.length && list.map((item) => {
-            const name = (item as any)[keyName]
+          list.length && list.map((item: any) => {
+            const name = item[keyName]
+            const color = value === item.key ? '#3385d6' : 'black'
             return (
               <MenuItem
                 sx={{
                   width: width || '200px',
+                  color,
                 }}
                 key={name}
                 onClick={() => {
                   handleCloseMenuClick()
                   handleItemClick(item)
                 }}
               >
-                <ListItemText primary={name} />
+                {name}
               </MenuItem>
             )
           })

apps/storefront/src/components/B3InfiniteScroll.tsx

@@ -0,0 +1,77 @@
+import {
+  ReactElement,
+  ReactNode,
+} from 'react'
+
+import InfiniteScroll from 'react-infinite-scroller'
+
+interface Pagination {
+  offset: number,
+  first: number,
+  count: number,
+}
+
+interface InfiniteScrollProps {
+  onPaginationChange?: (pagination: Pagination)=>void,
+  pagination?: Pagination,
+  children: ReactNode,
+  threshold?: number,
+  scrollNode?: HTMLElement,
+  loader?: ReactElement,
+  isLoading: boolean,
+  allCount: number,
+}
+
+export const B3InfiniteScroll = (props: InfiniteScrollProps) => {
+  const {
+    pagination: {
+      offset = 0,
+      first = 10,
+      count = 20,
+    } = {},
+    onPaginationChange = () => {},
+    children,
+    threshold = 250,
+    scrollNode,
+    loader,
+    isLoading,
+    allCount = 0,
+  } = props
+
+  const handleLoadMore = () => {
+    if (!isLoading) {
+      onPaginationChange({
+        offset: offset + first,
+        first,
+        count,
+      })
+    }
+  }
+  const page = Math.floor((offset / first) + 1)
+  const getScrollParent = scrollNode ? () => scrollNode : undefined
+
+  return (
+    <div
+      style={scrollNode ? {} : {
+        overflow: 'auto',
+      }}
+    >
+      <InfiniteScroll
+        pageStart={page}
+        loadMore={handleLoadMore}
+        hasMore={offset + first < count}
+        loader={isLoading ? (loader || (
+          <div>
+            Loading ...
+          </div>
+        )) : <></>}
+        getScrollParent={getScrollParent}
+        threshold={threshold}
+        initialLoad={false}
+        useWindow={false}
+      >
+        { children }
+      </InfiniteScroll>
+    </div>
+  )
+}

apps/storefront/src/components/B3NoData.tsx

@@ -0,0 +1,36 @@
+import {
+  DataUsageRounded,
+} from '@mui/icons-material'
+
+import styled from '@emotion/styled'
+
+interface B3NoDataProps {
+  text?: string
+  backgroundColor?: string
+}
+
+const NoDataContainer = styled('div')(({
+  backgroundColor = '#fff',
+}: B3NoDataProps) => ({
+  height: '100%',
+  backgroundColor,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  color: '#aaa',
+  fontSize: '18px',
+}))
+
+const NoDataText = styled('span')(() => ({
+  marginLeft: '10px',
+}))
+
+export const B3NoData = ({
+  text,
+  backgroundColor,
+}: B3NoDataProps) => (
+  <NoDataContainer backgroundColor={backgroundColor}>
+    <DataUsageRounded fontSize="large" />
+    <NoDataText>{text || 'No Data'}</NoDataText>
+  </NoDataContainer>
+)