feat: add invoice

https://bigc-b2b.atlassian.net/browse/BUN-486
bigcommerce · Jul 11, 2023 · 9a9b707 · 9a9b707
1 parent 509bc93
commit 9a9b707
Show file tree

Hide file tree

Showing 22 changed files with 1,884 additions and 82 deletions.
diff --git a/apps/storefront/package.json b/apps/storefront/package.json
@@ -28,15 +28,18 @@
     "@reduxjs/toolkit": "^1.9.3",
     "@rollup/plugin-graphql": "^1.1.0",
     "@types/babel__core": "^7.1.19",
+    "@types/pdfobject": "^2.2.3",
     "copy-to-clipboard": "^3.3.3",
     "date-fns": "^2.28.0",
     "http-server": "^14.1.1",
     "lodash": "^4.17.21",
+    "pdfobject": "^2.2.12",
     "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-pdf": "^7.1.2",
     "react-redux": "^8.0.5",
     "react-router-dom": "6",
     "ts-tracking-number": "^1.0.16",

diff --git a/apps/storefront/src/components/B3Dialog.tsx b/apps/storefront/src/components/B3Dialog.tsx
@@ -28,6 +28,7 @@ interface B3DialogProps<T> {
   row?: T
   isShowBordered?: boolean
   showRightBtn?: boolean
+  showLeftBtn?: boolean
   maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false
   fullWidth?: boolean
   disabledSaveBtn?: boolean
@@ -49,6 +50,7 @@ export default function B3Dialog<T>({
   row,
   isShowBordered = true,
   showRightBtn = true,
+  showLeftBtn = true,
   maxWidth = 'sm',
   dialogContentSx = {},
   fullWidth = false,
@@ -128,14 +130,16 @@ export default function B3Dialog<T>({
             customActions()
           ) : (
             <>
-              <CustomButton
-                sx={{
-                  ...leftStyleBtn,
-                }}
-                onClick={() => handleCloseClick('')}
-              >
-                {leftSizeBtn || 'cancel'}
-              </CustomButton>
+              {showLeftBtn && (
+                <CustomButton
+                  sx={{
+                    ...leftStyleBtn,
+                  }}
+                  onClick={() => handleCloseClick('')}
+                >
+                  {leftSizeBtn || 'cancel'}
+                </CustomButton>
+              )}
 
               {showRightBtn && (
                 <CustomButton

diff --git a/apps/storefront/src/components/layout/B3RenderRouter.tsx b/apps/storefront/src/components/layout/B3RenderRouter.tsx
@@ -95,7 +95,7 @@ export default function B3RenderRouter(props: B3RenderRouterProps) {
           return (
             <Route
               key={path}
-              path={route.name}
+              path={path}
               element={<Component setOpenPage={setOpenPage} />}
             />
           )

diff --git a/apps/storefront/src/components/loadding/Loading.tsx b/apps/storefront/src/components/loadding/Loading.tsx
@@ -1,6 +1,10 @@
 import { Box, Typography } from '@mui/material'
 
-function Loading() {
+interface LoadingProps {
+  backColor?: string
+}
+
+function Loading({ backColor }: LoadingProps) {
   return (
     <Box
       sx={{
@@ -9,7 +13,7 @@ function Loading() {
         position: 'fixed',
         top: 0,
         left: 0,
-        backgroundColor: 'background.default',
+        backgroundColor: backColor || 'background.default',
         zIndex: 120000,
         display: 'flex',
         justifyContent: 'center',

diff --git a/apps/storefront/src/components/table/B3PaginationTable.tsx b/apps/storefront/src/components/table/B3PaginationTable.tsx
@@ -39,6 +39,7 @@ interface B3PaginationTableProps {
     index?: number,
     checkBox?: () => ReactElement
   ) => ReactElement
+  CollapseComponent?: (row: any) => ReactElement
   isCustomRender?: boolean
   noDataText?: string
   tableKey?: string
@@ -85,6 +86,7 @@ function PaginationTable(
     onClickRow,
     showPagination = true,
     showRowsPerPageOptions = true,
+    CollapseComponent,
   }: B3PaginationTableProps,
   ref?: Ref<unknown>
 ) {
@@ -341,6 +343,7 @@ function PaginationTable(
       onClickRow={onClickRow}
       showPagination={showPagination}
       showRowsPerPageOptions={showRowsPerPageOptions}
+      CollapseComponent={CollapseComponent}
     />
   )
 }

diff --git a/apps/storefront/src/components/table/B3Table.tsx b/apps/storefront/src/components/table/B3Table.tsx
@@ -4,11 +4,15 @@ import {
   ReactElement,
   ReactNode,
   useContext,
+  useState,
 } from 'react'
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'
 import {
   Box,
   Card,
   Checkbox,
+  Collapse,
   Grid,
   Table,
   TableBody,
@@ -18,6 +22,7 @@ import {
   TablePagination,
   TableRow,
 } from '@mui/material'
+import IconButton from '@mui/material/IconButton'
 
 import { useMobile } from '@/hooks'
 import { CustomStyleContext } from '@/shared/customStyleButtton'
@@ -60,6 +65,7 @@ interface TableProps<T> {
     index?: number,
     checkBox?: () => ReactElement
   ) => ReactElement
+  CollapseComponent?: (row: T) => ReactElement
   isCustomRender?: boolean
   isInfiniteScroll?: boolean
   isLoading?: boolean
@@ -81,10 +87,116 @@ interface TableProps<T> {
   isAllSelect?: boolean
 }
 
+interface RowProps<T> {
+  CollapseComponent?: (row: T) => ReactElement
+  columnItems: TableColumnItem<T>[]
+  node: T
+  index: number
+  showBorder?: boolean
+  showCheckbox?: boolean
+  selectedSymbol?: string
+  selectCheckbox?: Array<number | string>
+  disableCheckbox?: boolean
+  handleSelectOneItem?: (id: number | string) => void
+  tableKey?: string
+  onClickRow?: (item: any, index?: number) => void
+  hover?: boolean
+  clickableRowStyles?: { [key: string]: string }
+  lastItemBorderBottom: string
+}
+
 const MOUSE_POINTER_STYLE = {
   cursor: 'pointer',
 }
 
+function Row({
+  columnItems,
+  node,
+  index,
+  showCheckbox,
+  selectCheckbox = [],
+  selectedSymbol,
+  disableCheckbox,
+  showBorder,
+  handleSelectOneItem,
+  clickableRowStyles,
+  lastItemBorderBottom,
+  tableKey,
+  onClickRow,
+  hover,
+  CollapseComponent,
+}: RowProps<any>) {
+  const { isCollapse = false } = node
+
+  const [open, setOpen] = useState<boolean>(isCollapse || false)
+
+  return (
+    <>
+      <TableRow
+        key={`${node[tableKey || 'id'] + index}`}
+        hover={hover}
+        onClick={() => onClickRow?.(node, index)}
+        sx={clickableRowStyles}
+      >
+        {showCheckbox && selectedSymbol && (
+          <TableCell
+            key={`showItemCheckbox-${node.id}`}
+            sx={{
+              borderBottom: showBorder
+                ? '1px solid rgba(224, 224, 224, 1)'
+                : lastItemBorderBottom,
+            }}
+          >
+            <Checkbox
+              checked={selectCheckbox.includes(node[selectedSymbol])}
+              onChange={() => {
+                if (handleSelectOneItem)
+                  handleSelectOneItem(node[selectedSymbol])
+              }}
+              disabled={disableCheckbox}
+            />
+          </TableCell>
+        )}
+
+        {CollapseComponent && (
+          <TableCell>
+            <IconButton
+              aria-label="expand row"
+              size="small"
+              onClick={() => setOpen(!open)}
+            >
+              {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
+            </IconButton>
+          </TableCell>
+        )}
+
+        {columnItems.map((column) => (
+          <TableCell
+            key={column.title}
+            sx={{
+              ...column?.style,
+              borderBottom: showBorder
+                ? '1px solid rgba(224, 224, 224, 1)'
+                : lastItemBorderBottom,
+            }}
+          >
+            {column.render ? column.render(node, index) : node[column.key]}
+          </TableCell>
+        ))}
+      </TableRow>
+      {CollapseComponent && (
+        <TableRow>
+          <TableCell style={{ padding: 0 }} colSpan={6}>
+            <Collapse in={open} timeout="auto" unmountOnExit>
+              <CollapseComponent row={node} />
+            </Collapse>
+          </TableCell>
+        </TableRow>
+      )}
+    </>
+  )
+}
+
 export function B3Table<T>({
   tableFixed = true,
   columnItems,
@@ -121,6 +233,7 @@ export function B3Table<T>({
   disableCheckbox = false,
   onClickRow,
   showRowsPerPageOptions = true,
+  CollapseComponent,
 }: TableProps<T>) {
   const {
     state: {
@@ -311,6 +424,8 @@ export function B3Table<T>({
                         />
                       </TableCell>
                     )}
+                    {CollapseComponent && <TableCell width="2%" />}
+
                     {columnItems.map((column) => (
                       <TableCell
                         key={column.title}
@@ -339,49 +454,23 @@ export function B3Table<T>({
                       ? '1px solid rgba(224, 224, 224, 1)'
                       : 'none'
                   return (
-                    <TableRow
-                      key={`${node[tableKey || 'id'] + index}`}
+                    <Row
+                      columnItems={columnItems}
+                      node={node}
+                      index={index}
+                      showCheckbox={showCheckbox}
+                      selectCheckbox={selectCheckbox}
+                      selectedSymbol={selectedSymbol}
+                      disableCheckbox={disableCheckbox}
+                      showBorder={showBorder}
+                      handleSelectOneItem={handleSelectOneItem}
+                      clickableRowStyles={clickableRowStyles}
+                      lastItemBorderBottom={lastItemBorderBottom}
                       hover={hover}
-                      onClick={() => onClickRow?.(node, index)}
-                      sx={clickableRowStyles}
-                    >
-                      {showCheckbox && (
-                        <TableCell
-                          key={`showItemCheckbox-${node.id}`}
-                          sx={{
-                            borderBottom: showBorder
-                              ? '1px solid rgba(224, 224, 224, 1)'
-                              : lastItemBorderBottom,
-                          }}
-                        >
-                          <Checkbox
-                            checked={selectCheckbox.includes(
-                              node[selectedSymbol]
-                            )}
-                            onChange={() => {
-                              if (handleSelectOneItem)
-                                handleSelectOneItem(node[selectedSymbol])
-                            }}
-                            disabled={disableCheckbox}
-                          />
-                        </TableCell>
-                      )}
-                      {columnItems.map((column) => (
-                        <TableCell
-                          key={column.title}
-                          sx={{
-                            ...column?.style,
-                            borderBottom: showBorder
-                              ? '1px solid rgba(224, 224, 224, 1)'
-                              : lastItemBorderBottom,
-                          }}
-                        >
-                          {column.render
-                            ? column.render(node, index)
-                            : node[column.key]}
-                        </TableCell>
-                      ))}
-                    </TableRow>
+                      tableKey={tableKey}
+                      onClickRow={onClickRow}
+                      CollapseComponent={CollapseComponent}
+                    />
                   )
                 })}
               </TableBody>