feat: add invoice mobile page

https://bigc-b2b.atlassian.net/browse/BUN-1247
bigcommerce · Jul 28, 2023 · 54525ba · 54525ba
1 parent 368ef0a
commit 54525ba
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 27 deletions.
diff --git a/apps/storefront/src/pages/invoice/Invoice.tsx b/apps/storefront/src/pages/invoice/Invoice.tsx
@@ -1,4 +1,4 @@
-import { useContext, useEffect, useRef, useState } from 'react'
+import { ReactElement, useContext, useEffect, useRef, useState } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 import {
   Box,
@@ -39,7 +39,7 @@ import PaymentSuccess from './components/PaymentSuccess'
 import PrintTempalte from './components/PrintTempalte'
 import InvoiceListType, { filterFormConfig, sortIdArr } from './utils/config'
 import { handlePrintPDF } from './utils/pdf'
-// import { InvoiceItemCard } from './InvoiceItemCard'
+import { InvoiceItemCard } from './InvoiceItemCard'
 
 export interface FilterSearchProps {
   [key: string]: string | number | null
@@ -495,7 +495,7 @@ function Invoice() {
       title: 'Amount to pay',
       render: (item: InvoiceList) => {
         const { openBalance, id } = item
-        const currentCode = openBalance.code || '$'
+        const currentCode = openBalance.code || 'USD'
         let valuePrice = openBalance.value
         let disabled = true
 
@@ -723,23 +723,23 @@ function Invoice() {
           sortByFn={handleSetOrderBy}
           isSelectOtherPageCheckbox
           hover
-          // renderItem={(
-          //   row: InvoiceList,
-          //   index?: number,
-          //   checkBox?: () => ReactElement
-          // ) => (
-          //   <InvoiceItemCard
-          //     item={row}
-          //     checkBox={checkBox}
-          //     handleSetSelectedInvoiceAccount={handleSetSelectedInvoiceAccount}
-          //     handleViewInvoice={handleViewInvoice}
-          //     setIsRequestLoading={setIsRequestLoading}
-          //     setInvoiceId={setCurrentInvoiceId}
-          //     handleOpenHistoryModal={setIsOpenHistorys}
-          //     currentCurrencyToken={currentCurrency.token}
-          //     selectedPay={selectedPay}
-          //   />
-          // )}
+          renderItem={(
+            row: InvoiceList,
+            index?: number,
+            checkBox?: () => ReactElement
+          ) => (
+            <InvoiceItemCard
+              item={row}
+              checkBox={checkBox}
+              handleSetSelectedInvoiceAccount={handleSetSelectedInvoiceAccount}
+              handleViewInvoice={handleViewInvoice}
+              setIsRequestLoading={setIsRequestLoading}
+              setInvoiceId={setCurrentInvoiceId}
+              handleOpenHistoryModal={setIsOpenHistorys}
+              selectedPay={selectedPay}
+              handleGetCorrespondingCurrency={handleGetCorrespondingCurrency}
+            />
+          )}
         />
         {list.length > 0 && !isMobile && (
           <Box

diff --git a/apps/storefront/src/pages/invoice/InvoiceItemCard.tsx b/apps/storefront/src/pages/invoice/InvoiceItemCard.tsx
@@ -24,12 +24,12 @@ export interface InvoiceItemCardProps {
     newPrice: number | string,
     invoiceId: string
   ) => void
-  handleViewInvoice: (id: string) => void
+  handleViewInvoice: (id: string, status: string | number) => void
   setIsRequestLoading: (bool: boolean) => void
   setInvoiceId: (id: string) => void
   handleOpenHistoryModal: (bool: boolean) => void
   selectedPay: CustomFieldItems | InvoiceListNode[]
-  currentCurrencyToken: string
+  handleGetCorrespondingCurrency: (code: string) => string
 }
 
 const StyleCheckoutContainer = styled(Box)(() => ({
@@ -49,11 +49,14 @@ export function InvoiceItemCard(props: InvoiceItemCardProps) {
     setInvoiceId,
     handleOpenHistoryModal,
     selectedPay = [],
-    currentCurrencyToken = '$',
+    handleGetCorrespondingCurrency,
   } = props
   const navigate = useNavigate()
 
-  const { id, status, dueDate } = item
+  const { id, status, dueDate, openBalance } = item
+  const currentCode = openBalance.code || 'USD'
+  const currentCurrencyToken = handleGetCorrespondingCurrency(currentCode)
+
   let statusCode = item.status
   if (status !== 2 && currentDate > dueDate * 1000) {
     statusCode = 3
@@ -165,7 +168,7 @@ export function InvoiceItemCard(props: InvoiceItemCardProps) {
                   position="start"
                   sx={{ padding: '8px 0', marginTop: '0 !important' }}
                 >
-                  {currentCurrencyToken}
+                  {currentCurrencyToken || '$'}
                 </InputAdornment>
               ),
             }}
@@ -185,7 +188,11 @@ export function InvoiceItemCard(props: InvoiceItemCardProps) {
   ]
 
   return (
-    <Card>
+    <Card
+      sx={{
+        marginBottom: selectedPay.length > 0 ? '5rem' : 0,
+      }}
+    >
       <CardContent
         sx={{
           color: 'rgba(0, 0, 0, 0.6)',
@@ -221,7 +228,7 @@ export function InvoiceItemCard(props: InvoiceItemCardProps) {
                   textDecoration: 'underline',
                 }}
                 onClick={() => {
-                  handleViewInvoice(id)
+                  handleViewInvoice(id, status)
                 }}
               >
                 {id || '-'}