From 687457815c1acf045fdb2a820b7d5b169151e64d Mon Sep 17 00:00:00 2001
From: "Brian.Jiang2021" <brian.jiang@bundleb2b.net>
Date: Wed, 9 Nov 2022 19:21:00 +0800
Subject: [PATCH] fix: order detail invoice and other issues

---
 .../orderDetail/components/OrderAction.tsx    | 58 +++++++++++++++----
 .../components/OrderCheckboxProduct.tsx       |  8 +--
 .../orderDetail/components/OrderDialog.tsx    |  2 +
 .../pages/orderDetail/shared/B2BOrderData.ts  |  1 +
 4 files changed, 55 insertions(+), 14 deletions(-)

diff --git a/apps/storefront/src/pages/orderDetail/components/OrderAction.tsx b/apps/storefront/src/pages/orderDetail/components/OrderAction.tsx
index d80cc3f7d..f93260690 100644
--- a/apps/storefront/src/pages/orderDetail/components/OrderAction.tsx
+++ b/apps/storefront/src/pages/orderDetail/components/OrderAction.tsx
@@ -1,6 +1,10 @@
 import {
   useState,
+  useContext,
 } from 'react'
+import {
+  useNavigate,
+} from 'react-router-dom'
 
 import {
   Card,
@@ -14,6 +18,10 @@ import {
   format,
 } from 'date-fns'
 
+import {
+  GlobaledContext,
+} from '@/shared/global'
+
 import {
   OrderDialog,
 } from './OrderDialog'
@@ -76,8 +84,12 @@ const OrderCard = (props: any) => {
     infos,
     products,
     itemKey,
+    orderId,
+    currencyInfo,
   } = props
 
+  const navigate = useNavigate()
+
   const dialogData = [
     {
       dialogTitle: 'Re-order',
@@ -121,7 +133,11 @@ const OrderCard = (props: any) => {
     } = e.target
 
     if (name === 'viewInvoice') {
-      // TODO
+      // TODO:
+      navigate('/invoiceDetail/1')
+    } else if (name === 'printInvoice') {
+      // TODO:
+      window.open(`/account.php?action=print_invoice&order_id=${orderId}`)
     } else if (name === 'return') {
       // TODO
     } else {
@@ -185,12 +201,21 @@ const OrderCard = (props: any) => {
       <StyledCardActions>
         {
           buttons && buttons.map((button: any) => (
-            <Button
-              {...button}
-              onClick={(e) => { handleOpenDialog(e) }}
-            >
-              {button.value}
-            </Button>
+            <>
+              {
+                button.isCanShow && (
+                  <Button
+                    value={button.value}
+                    key={button.key}
+                    name={button.name}
+                    variant={button.variant}
+                    onClick={(e) => { handleOpenDialog(e) }}
+                  >
+                    {button.value}
+                  </Button>
+                )
+              }
+            </>
           ))
         }
       </StyledCardActions>
@@ -202,6 +227,7 @@ const OrderCard = (props: any) => {
         type={type}
         setOpen={setOpen}
         itemKey={itemKey}
+        currencyInfo={currencyInfo}
       />
     </Card>
   )
@@ -211,6 +237,11 @@ export const OrderAction = (props: any) => {
   const {
     detailsData,
   } = props
+  const {
+    state: {
+      isB2BUser,
+    },
+  } = useContext(GlobaledContext)
 
   const {
     money,
@@ -226,6 +257,7 @@ export const OrderAction = (props: any) => {
     },
     orderComments,
     products,
+    orderId,
   } = detailsData
 
   const getFullPaymentAddress = (billingAddress: any) => {
@@ -274,18 +306,21 @@ export const OrderAction = (props: any) => {
       key: 'Re-Order',
       name: 'reOrder',
       variant: 'outlined',
+      isCanShow: true,
     },
     {
       value: 'Return',
       key: 'Return',
       name: 'return',
       variant: 'outlined',
+      isCanShow: true,
     },
     {
       value: 'ADD TO SHOPPING LIST',
       key: 'add-to-shipping-list',
       name: 'shippingList',
       variant: 'outlined',
+      isCanShow: isB2BUser,
     },
   ]
 
@@ -306,10 +341,11 @@ export const OrderAction = (props: any) => {
       subtitle: `Paid in full on ${format(Date.parse(createAt), 'dd MMM yy')}.`,
       buttons: [
         {
-          value: 'view invoice',
-          key: 'viewInvoice',
-          name: 'viewInvoice',
+          value: isB2BUser ? 'view invoice' : 'print invoice',
+          key: 'aboutInvoice',
+          name: isB2BUser ? 'viewInvoice' : 'printInvoice',
           variant: 'outlined',
+          isCanShow: true,
         },
       ],
       infos: {
@@ -334,6 +370,8 @@ export const OrderAction = (props: any) => {
           <OrderCard
             key={item.key}
             products={products}
+            orderId={orderId}
+            currencyInfo={money}
             {...item}
             itemKey={item.key}
           />
diff --git a/apps/storefront/src/pages/orderDetail/components/OrderCheckboxProduct.tsx b/apps/storefront/src/pages/orderDetail/components/OrderCheckboxProduct.tsx
index 4236a86fc..49fb5f3eb 100644
--- a/apps/storefront/src/pages/orderDetail/components/OrderCheckboxProduct.tsx
+++ b/apps/storefront/src/pages/orderDetail/components/OrderCheckboxProduct.tsx
@@ -25,7 +25,7 @@ import {
 
 interface OrderCheckboxProductProps {
   products: any[],
-  currency?: string,
+  currencyInfo: any,
   getProductQuantity?: (item: OrderProductItem) => number
   onProductChange?: (products: OrderProductItem[]) => void
 }
@@ -129,7 +129,7 @@ const mobileItemStyle = {
 export const OrderCheckboxProduct = (props: OrderCheckboxProductProps) => {
   const {
     products,
-    currency = '$',
+    currencyInfo,
     getProductQuantity = (item) => item.quantity,
     onProductChange = () => {},
   } = props
@@ -266,7 +266,7 @@ export const OrderCheckboxProduct = (props: OrderCheckboxProductProps) => {
             </FlexItem>
             <FlexItem {...itemStyle.default}>
               {isMobile && <span>Price: </span>}
-              {`${currency} ${getProductPrice(product.base_price)}`}
+              {`${currencyInfo.currency_token} ${getProductPrice(product.base_price)}`}
             </FlexItem>
             <FlexItem {...itemStyle.qty}>
               <TextField
@@ -284,7 +284,7 @@ export const OrderCheckboxProduct = (props: OrderCheckboxProductProps) => {
             </FlexItem>
             <FlexItem {...itemStyle.default}>
               {isMobile && <span>Cost: </span>}
-              {`${currency} ${getProductTotals(getProductQuantity(product), product.base_price)}`}
+              {`${currencyInfo.currency_token} ${getProductTotals(getProductQuantity(product), product.base_price)}`}
             </FlexItem>
           </Flex>
         ))
diff --git a/apps/storefront/src/pages/orderDetail/components/OrderDialog.tsx b/apps/storefront/src/pages/orderDetail/components/OrderDialog.tsx
index 5edd74a31..af63e0eb2 100644
--- a/apps/storefront/src/pages/orderDetail/components/OrderDialog.tsx
+++ b/apps/storefront/src/pages/orderDetail/components/OrderDialog.tsx
@@ -40,6 +40,7 @@ interface OrderDialogProps<T> {
   type?: string,
   currentDialogData: any,
   itemKey: string,
+  currencyInfo: any,
 }
 
 export const OrderDialog: <T>(props: OrderDialogProps<T>) => ReactElement = ({
@@ -49,6 +50,7 @@ export const OrderDialog: <T>(props: OrderDialogProps<T>) => ReactElement = ({
   currentDialogData,
   setOpen,
   itemKey,
+  currencyInfo,
 }) => {
   const container = useRef<HTMLInputElement | null>(null)
   const [isOpenCreateShopping, setOpenCreateShopping] = useState(false)
diff --git a/apps/storefront/src/pages/orderDetail/shared/B2BOrderData.ts b/apps/storefront/src/pages/orderDetail/shared/B2BOrderData.ts
index 078077f74..ecc02d3f9 100644
--- a/apps/storefront/src/pages/orderDetail/shared/B2BOrderData.ts
+++ b/apps/storefront/src/pages/orderDetail/shared/B2BOrderData.ts
@@ -145,4 +145,5 @@ export const convertB2BOrderDetails = (data: B2BOrderData) => ({
   payment: getPaymentData(data),
   orderComments: data.customerMessage,
   products: data.products,
+  orderId: +data.id,
 })