fix: order detail issues

apps/storefront/src/pages/orderDetail/components/OrderAction.tsx

@@ -1,43 +1,24 @@
 import {
   useState,
-  useEffect,
-  useContext,
-  JSXElementConstructor,
-  ReactElement,
-  ReactFragment,
-  ReactPortal,
-  MouseEvent,
 } from 'react'
 
 import {
   Card,
   CardContent,
   Typography,
-  CardActions,
   Button,
-  Input,
 } from '@mui/material'
 import styled from '@emotion/styled'
 
 import {
   format,
 } from 'date-fns'
 
-import {
-  TableColumnItem,
-} from '@/components/B3Table'
-
 import {
   OrderDialog,
 } from './OrderDialog'
 
-const OrderActionContainer = styled('div')(() => ({
-
-}))
-const Test = styled('div')(() => ({
-  minWidth: '100%',
-  minHeight: '300px',
-}))
+const OrderActionContainer = styled('div')(() => ({}))
 
 /// orderCard
 const InformationContainer = styled('div')(() => ({
@@ -66,29 +47,27 @@ const StyledCardActions = styled('div')(() => ({
 const ItemContainer = styled('div')((props: any) => ({
   display: 'flex',
   justifyContent: 'space-between',
-  fontWeight: props.nameKey === 'Grand Total' ? 700 : 400,
-  marginBottom: props.infoKey === 'paymentMethod' ? '8px' : 0,
-  marginTop: props.infoKey === 'address' ? '8px' : 0,
+  fontWeight: props.nameKey === 'Grand total' ? 700 : 400,
+
   '& p': {
     marginTop: 0,
   },
 }))
 
+const PaymentItemContainer = styled('div')((props: any) => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  fontWeight: 400,
+  marginBottom: props.isAddMarginButton && '0.8rem',
+}))
+
 const StyledCurrency = styled('div')(() => ({
   display: 'flex',
   alignItems: 'center',
   width: '40%',
   justifyContent: 'space-between',
-
-  // '& p': {
-  //   marginLeft: '1rem',
-  // },
 }))
 
-// const Subtitle = styled('p')(() => ({
-
-// }))
-
 const OrderCard = (props: any) => {
   const {
     header,
@@ -122,13 +101,10 @@ const OrderCard = (props: any) => {
 
   const infoType = typeof infos
   const [open, setOpen] = useState<boolean>(false)
-  const [title, setTitle] = useState<string>('')
   const [type, setType] = useState<string>('')
   const [currentDialogData, setCurrentDialogData] = useState<any>({})
 
-  // const [infoKey, setInfoKey] = useState<string[]>([])
-  // const [infoValue, setInfoValue] = useState<string[]>([])
-  let infoKey
+  let infoKey: any
   let infoValue: any
   if (infoType !== 'string') {
     const {
@@ -142,7 +118,6 @@ const OrderCard = (props: any) => {
   const handleOpenDialog = (e: any) => {
     const {
       name,
-      value,
     } = e.target
 
     if (name === 'viewInvoice') {
@@ -151,7 +126,6 @@ const OrderCard = (props: any) => {
       // TODO
     } else {
       setOpen(true)
-      setTitle(value)
       setType(name)
 
       const newDialogData = dialogData.find((data: any) => data.type === name)
@@ -162,7 +136,6 @@ const OrderCard = (props: any) => {
   return (
     <Card
       sx={{
-        // minHeight: '300px',
         marginBottom: '1rem',
       }}
     >
@@ -181,7 +154,7 @@ const OrderCard = (props: any) => {
               <>
                 {
                   infos.money ? (
-                    infoKey && infoKey.map((key, index) => (
+                    infoKey && infoKey.map((key: string, index: number) => (
                       <ItemContainer
                         key={key}
                         nameKey={key}
@@ -194,13 +167,13 @@ const OrderCard = (props: any) => {
                       </ItemContainer>
                     ))
                   ) : (
-                    infoKey && infoKey.map((key: any) => (
-                      <ItemContainer
-                        key={infos.info[key]}
-                        infoKey={key}
+                    infoValue && infoValue.map((value: any, index: number) => (
+                      <PaymentItemContainer
+                        key={value}
+                        isAddMarginButton={(infoKey[index] === 'paymentMethod' || infoKey[index] === 'company')}
                       >
-                        {infos.info[key]}
-                      </ItemContainer>
+                        {value}
+                      </PaymentItemContainer>
                     ))
                   )
                 }
@@ -264,29 +237,31 @@ export const OrderAction = (props: any) => {
       state,
       zip,
       country,
+      city,
     } = billingAddress
     const paymentAddress = {
       paymentMethod: `Payment by ${paymentMethod}`,
       name: `${firstName} ${lastName}`,
       company,
-      address: `${street1}, `,
-      address1: `${state} ${zip}, ${country}`,
+      street: street1,
+      address: `${city}, ${state} ${zip}, ${country}`,
     }
 
     return paymentAddress
   }
 
   const handleOrderComments = (value: string) => {
-    // const comments = value.replace(/\n/g, '<br/>')
     const commentsArr = value.split(/\n/g)
 
-    const comments: any = commentsArr.filter((item) => !!item.trim()).length > 0 ? {
-      mes0: 'Comments:',
-    } : {}
+    const comments: any = {}
 
     commentsArr.forEach((item, index) => {
       if (item.trim().length > 0) {
-        comments[`mes${index + 1}`] = item
+        const isHaveTitle = item.trim().includes(':')
+
+        const message = isHaveTitle ? item : `Comments: ${item}`
+
+        comments[`mes${index}`] = message
       }
     })
 
@@ -299,7 +274,6 @@ export const OrderAction = (props: any) => {
       key: 'Re-Order',
       name: 'reOrder',
       variant: 'outlined',
-      // onClick: () => handleTest(),
     },
     {
       value: 'Return',
@@ -319,7 +293,6 @@ export const OrderAction = (props: any) => {
     {
       header: 'Order summary',
       key: 'order-summary',
-      // subtitle: 'Purchased by John Miles on 13 Oct 22.',
       subtitle: `Purchased by ${name} on ${format(+updatedAt * 1000, 'dd MMM yy')}.`,
       buttons,
       infos: {

apps/storefront/src/pages/orderDetail/components/OrderCheckboxProduct.tsx

@@ -3,6 +3,7 @@ import {
   Typography,
   Checkbox,
   TextField,
+  FormControlLabel,
 } from '@mui/material'
 
 import {
@@ -57,6 +58,12 @@ const Flex = styled('div')(({
     },
   } : {}
 
+  // const mobileItemCheckboxStyle = isMobile ? {
+  //   '& #product-item-checkbox': {
+  //     paddingLeft: 0,
+  //   },
+  // } : {}
+
   const flexWrap = isMobile ? 'wrap' : 'initial'
 
   return {
@@ -122,6 +129,18 @@ const mobileItemStyle = {
   },
 }
 
+const StyledProductItemCheckbox = styled(Checkbox)(({
+  isMobile,
+}: any) => {
+  const mobileItemStyle = isMobile ? {
+    paddingLeft: 0,
+  } : {}
+
+  return {
+    ...mobileItemStyle,
+  }
+})
+
 export const OrderCheckboxProduct = (props: OrderCheckboxProductProps) => {
   const {
     products,
@@ -197,12 +216,23 @@ export const OrderCheckboxProduct = (props: OrderCheckboxProductProps) => {
         </Flex>
         )
       }
-      {/*
+
       {
         isMobile && (
-
+          <FormControlLabel
+            label="Select all products"
+            control={(
+              <Checkbox
+                checked={list.length === products.length}
+                onChange={handleSelectAllChange}
+              />
+            )}
+            sx={{
+              paddingLeft: '0.6rem',
+            }}
+          />
         )
-      } */}
+      }
 
       {
         products.map((product: OrderProductItem) => (
@@ -236,7 +266,7 @@ export const OrderCheckboxProduct = (props: OrderCheckboxProductProps) => {
               </Box>
             </FlexItem>
             <FlexItem {...itemStyle.default}>
-              {isMobile && <span>Price:</span>}
+              {isMobile && <span>Price: </span>}
               {`${currency} ${getProductPrice(product.base_price)}`}
             </FlexItem>
             <FlexItem {...itemStyle.qty}>
@@ -252,7 +282,7 @@ export const OrderCheckboxProduct = (props: OrderCheckboxProductProps) => {
               />
             </FlexItem>
             <FlexItem {...itemStyle.default}>
-              {isMobile && <span>Cost:</span>}
+              {isMobile && <span>Cost: </span>}
               {`${currency} ${getProductTotals(getProductQuantity(product), product.base_price)}`}
             </FlexItem>
           </Flex>

apps/storefront/src/pages/orderDetail/components/OrderDialog.tsx

@@ -28,17 +28,16 @@ import {
 } from './OrderShoppingList'
 import CreateShoppingList from './CreateShoppingList'
 
-interface OrderDialogProps {
+interface OrderDialogProps<T> {
   open: boolean,
-  confirmText?: string,
   setOpen: (open: boolean) => void,
   products?: any,
   type?: string,
   currentDialogData: any,
   itemKey: string,
 }
 
-export const OrderDialog: (props: OrderDialogProps) => ReactElement = ({
+export const OrderDialog: <T>(props: OrderDialogProps<T>) => ReactElement = ({
   open,
   products,
   type,

apps/storefront/src/pages/orderDetail/components/OrderShoppingList.tsx

@@ -137,7 +137,7 @@ export const OrderShoppingList = (props: orderShoppingListProps) => {
               textTransform: 'none',
             }}
           >
-            + Create new
+            + Create New
           </Button>
         </DialogContent>
 

apps/storefront/src/pages/orderDetail/shared/B2BOrderData.ts

@@ -30,10 +30,6 @@ export interface B2BOrderData {
   [k: string]: any
 }
 
-// export interface OrderActionProps {
-//   [k: string]: any
-// }
-
 const getOrderShipping = (data: B2BOrderData) => {
   const {
     shipments,
@@ -111,11 +107,11 @@ const getOrderSummary = (data: B2BOrderData) => {
     createAt: dateCreated,
     name: `${firstName} ${lastName}`,
     priceData: {
-      SubTotal: formatPrice(subtotalExTax || subtotalIncTax || ''),
-      Shipping: formatPrice(shippingCostExTax || shippingCostIncTax || ''),
-      HandingFee: formatPrice(handlingCostExTax || handlingCostIncTax || ''),
-      Tax: formatPrice(totalTax || ''),
-      'Grand Total': formatPrice(totalExTax || totalIncTax || ''),
+      'Sub total': subtotalExTax || subtotalIncTax,
+      Shipping: shippingCostExTax || shippingCostIncTax,
+      'Handing fee': handlingCostExTax || handlingCostIncTax,
+      Tax: totalTax,
+      'Grand total': totalExTax || totalIncTax,
     },
   }