fix: invoice page mobile

https://bigc-b2b.atlassian.net/browse/BUN-1247
bigcommerce · Jul 28, 2023 · b1a2866 · b1a2866
1 parent 48d0708
commit b1a2866
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 32 deletions.
diff --git a/apps/storefront/src/pages/invoice/Invoice.tsx b/apps/storefront/src/pages/invoice/Invoice.tsx
@@ -386,6 +386,28 @@ function Invoice() {
     })
   }
 
+  const handleSetSelectedInvoiceAccountNumber = (val: string, id: string) => {
+    let result = val
+    if (val.includes('.')) {
+      const wholeDecimalNumber = val.split('.')
+      const movePoint = wholeDecimalNumber[1].length - +decimalPlaces
+      if (wholeDecimalNumber[1] && movePoint > 0) {
+        const newVal = wholeDecimalNumber[0] + wholeDecimalNumber[1]
+        result = `${newVal.slice(0, -decimalPlaces)}.${newVal.slice(
+          -decimalPlaces
+        )}`
+      }
+    } else {
+      const movePoint = result.length - +decimalPlaces
+      if (movePoint > 0) {
+        result = `${val.slice(0, -decimalPlaces)}.${val.slice(-decimalPlaces)}`
+      } else {
+        result = `.${val}`
+      }
+    }
+    handleSetSelectedInvoiceAccount(result, id)
+  }
+
   const columnAllItems: TableColumnItem<InvoiceList>[] = [
     {
       key: 'id',
@@ -549,27 +571,7 @@ function Invoice() {
             }}
             onChange={(e: CustomFieldItems) => {
               const val = e.target?.value
-              let result = val
-              if (val.includes('.')) {
-                const wholeDecimalNumber = val.split('.')
-                const movePoint = wholeDecimalNumber[1].length - +decimalPlaces
-                if (wholeDecimalNumber[1] && movePoint > 0) {
-                  const newVal = wholeDecimalNumber[0] + wholeDecimalNumber[1]
-                  result = `${newVal.slice(0, -decimalPlaces)}.${newVal.slice(
-                    -decimalPlaces
-                  )}`
-                }
-              } else {
-                const movePoint = result.length - +decimalPlaces
-                if (movePoint > 0) {
-                  result = `${val.slice(0, -decimalPlaces)}.${val.slice(
-                    -decimalPlaces
-                  )}`
-                } else {
-                  result = `.${val}`
-                }
-              }
-              handleSetSelectedInvoiceAccount(result, id)
+              handleSetSelectedInvoiceAccountNumber(val, id)
             }}
             type="number"
           />
@@ -731,13 +733,16 @@ function Invoice() {
             <InvoiceItemCard
               item={row}
               checkBox={checkBox}
-              handleSetSelectedInvoiceAccount={handleSetSelectedInvoiceAccount}
+              handleSetSelectedInvoiceAccount={
+                handleSetSelectedInvoiceAccountNumber
+              }
               handleViewInvoice={handleViewInvoice}
               setIsRequestLoading={setIsRequestLoading}
               setInvoiceId={setCurrentInvoiceId}
               handleOpenHistoryModal={setIsOpenHistorys}
               selectedPay={selectedPay}
               handleGetCorrespondingCurrency={handleGetCorrespondingCurrency}
+              addBottom={list.length - 1 === index}
             />
           )}
         />

diff --git a/apps/storefront/src/pages/invoice/InvoiceItemCard.tsx b/apps/storefront/src/pages/invoice/InvoiceItemCard.tsx
@@ -20,16 +20,14 @@ import InvoiceStatus from './components/InvoiceStatus'
 export interface InvoiceItemCardProps {
   item: any
   checkBox?: () => ReactElement
-  handleSetSelectedInvoiceAccount: (
-    newPrice: number | string,
-    invoiceId: string
-  ) => void
+  handleSetSelectedInvoiceAccount: (value: string, 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[]
   handleGetCorrespondingCurrency: (code: string) => string
+  addBottom: boolean
 }
 
 const StyleCheckoutContainer = styled(Box)(() => ({
@@ -50,6 +48,7 @@ export function InvoiceItemCard(props: InvoiceItemCardProps) {
     handleOpenHistoryModal,
     selectedPay = [],
     handleGetCorrespondingCurrency,
+    addBottom,
   } = props
   const navigate = useNavigate()
 
@@ -131,7 +130,7 @@ export function InvoiceItemCard(props: InvoiceItemCardProps) {
       title: 'Amount to pay',
       render: () => {
         const { openBalance, id } = item
-        let valuePrice = +openBalance.value
+        let valuePrice = openBalance.value
         let disabled = true
 
         if (selectedPay.length > 0) {
@@ -149,7 +148,7 @@ export function InvoiceItemCard(props: InvoiceItemCardProps) {
             } = currentSelected
 
             disabled = false
-            valuePrice = +selectedOpenBalance.value
+            valuePrice = selectedOpenBalance.value
 
             if (+openBalance.value === 0) {
               disabled = true
@@ -177,9 +176,10 @@ export function InvoiceItemCard(props: InvoiceItemCardProps) {
                 paddingTop: '8px',
               },
             }}
-            onChange={(e: CustomFieldItems) =>
-              handleSetSelectedInvoiceAccount(e.target?.value, id)
-            }
+            onChange={(e: CustomFieldItems) => {
+              const val = e.target?.value
+              handleSetSelectedInvoiceAccount(val, id)
+            }}
             type="number"
           />
         )
@@ -190,7 +190,7 @@ export function InvoiceItemCard(props: InvoiceItemCardProps) {
   return (
     <Card
       sx={{
-        marginBottom: selectedPay.length > 0 ? '5rem' : 0,
+        marginBottom: selectedPay.length > 0 && addBottom ? '5rem' : 0,
       }}
     >
       <CardContent