feat: update order shipping issues

bigcommerce · Nov 22, 2022 · 4bf6407 · 4bf6407
1 parent 849e54b
commit 4bf6407
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 79 deletions.
diff --git a/apps/storefront/src/pages/order/Order.tsx b/apps/storefront/src/pages/order/Order.tsx
@@ -220,6 +220,7 @@ const Order = ({
       title: 'Order',
       render: (item: ListItem, index: number) => (
         <Box
+          component="span"
           sx={{
             cursor: 'pointer',
             '&:hover': {

diff --git a/apps/storefront/src/pages/orderDetail/OrderDetail.tsx b/apps/storefront/src/pages/orderDetail/OrderDetail.tsx
@@ -85,6 +85,7 @@ const OrderDetail = () => {
     status: '',
     statusCode: '',
     currencyCode: '',
+    currency: '',
     orderSummary: {},
   })
 
@@ -131,6 +132,7 @@ const OrderDetail = () => {
     poNumber,
     status,
     orderSummary,
+    currency,
   } = detailsData
 
   return (
@@ -213,7 +215,10 @@ const OrderDetail = () => {
             }}
           >
             <Stack spacing={3}>
-              <OrderShipping shippings={shippings} />
+              <OrderShipping
+                shippings={shippings}
+                currency={currency}
+              />
 
               <OrderHistory history={history} />
             </Stack>

diff --git a/apps/storefront/src/pages/orderDetail/components/OrderCheckboxProduct.tsx b/apps/storefront/src/pages/orderDetail/components/OrderCheckboxProduct.tsx
@@ -8,6 +8,8 @@ import {
 
 import {
   useState,
+  ChangeEvent,
+  KeyboardEvent,
 } from 'react'
 
 import styled from '@emotion/styled'
@@ -25,6 +27,7 @@ interface OrderCheckboxProductProps {
   products: any[],
   currency?: string,
   getProductQuantity?: (item: OrderProductItem) => number
+  onProductChange?: (products: OrderProductItem[]) => void
 }
 
 interface FlexProps {
@@ -58,12 +61,6 @@ const Flex = styled('div')(({
     },
   } : {}
 
-  // const mobileItemCheckboxStyle = isMobile ? {
-  //   '& #product-item-checkbox': {
-  //     paddingLeft: 0,
-  //   },
-  // } : {}
-
   const flexWrap = isMobile ? 'wrap' : 'initial'
 
   return {
@@ -129,23 +126,12 @@ const mobileItemStyle = {
   },
 }
 
-const StyledProductItemCheckbox = styled(Checkbox)(({
-  isMobile,
-}: any) => {
-  const mobileItemStyle = isMobile ? {
-    paddingLeft: 0,
-  } : {}
-
-  return {
-    ...mobileItemStyle,
-  }
-})
-
 export const OrderCheckboxProduct = (props: OrderCheckboxProductProps) => {
   const {
     products,
     currency = '$',
     getProductQuantity = (item) => item.quantity,
+    onProductChange = () => {},
   } = props
 
   const [isMobile] = useMobile()
@@ -189,6 +175,19 @@ export const OrderCheckboxProduct = (props: OrderCheckboxProductProps) => {
 
   const isChecked = (variantId: any) => list.includes(variantId)
 
+  const handleProductQuantityChange = (product: OrderProductItem) => (e: ChangeEvent<HTMLInputElement>) => {
+    if (parseInt(e.target.value, 10) > 0) {
+      product.quantity = e.target.value
+      onProductChange([...products])
+    }
+  }
+
+  const handleNumberInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (['KeyE', 'Equal'].indexOf(event.code) > -1) {
+      event.preventDefault()
+    }
+  }
+
   return products.length > 0 ? (
     <Box>
       {
@@ -235,7 +234,7 @@ export const OrderCheckboxProduct = (props: OrderCheckboxProductProps) => {
       }
 
       {
-        products.map((product: OrderProductItem) => (
+        products.map((product: OrderProductItem, index: number) => (
           <Flex isMobile={isMobile}>
             <Checkbox
               checked={isChecked(product.variant_id)}
@@ -275,6 +274,8 @@ export const OrderCheckboxProduct = (props: OrderCheckboxProductProps) => {
                 variant={isMobile ? 'filled' : 'outlined'}
                 label={isMobile ? 'Qty' : ''}
                 value={getProductQuantity(product)}
+                onChange={handleProductQuantityChange(product)}
+                onKeyDown={handleNumberInputKeyDown}
                 size="small"
                 sx={{
                   width: isMobile ? '60%' : '100%',

diff --git a/apps/storefront/src/pages/orderDetail/components/OrderDialog.tsx b/apps/storefront/src/pages/orderDetail/components/OrderDialog.tsx
@@ -2,6 +2,7 @@ import {
   useRef,
   useState,
   ReactElement,
+  useEffect,
 } from 'react'
 
 import {
@@ -28,6 +29,10 @@ import {
 } from './OrderShoppingList'
 import CreateShoppingList from './CreateShoppingList'
 
+import {
+  OrderProductItem,
+} from '../shared/B2BOrderData'
+
 interface OrderDialogProps<T> {
   open: boolean,
   setOpen: (open: boolean) => void,
@@ -49,6 +54,7 @@ export const OrderDialog: <T>(props: OrderDialogProps<T>) => ReactElement = ({
   const [isOpenCreateShopping, setOpenCreateShopping] = useState(false)
 
   const [openShoppingList, setOpenShoppingList] = useState(false)
+  const [editableProducts, setEditableProducts] = useState<OrderProductItem[]>([])
 
   const [isMobile] = useMobile()
 
@@ -86,6 +92,18 @@ export const OrderDialog: <T>(props: OrderDialogProps<T>) => ReactElement = ({
     setOpenShoppingList(true)
   }
 
+  useEffect(() => {
+    if (open) {
+      setEditableProducts(products.map((item: OrderProductItem) => ({
+        ...item,
+      })))
+    }
+  }, [open])
+
+  const handleProductChange = (products: OrderProductItem[]) => {
+    setEditableProducts(products)
+  }
+
   return (
     <>
       <Box
@@ -125,7 +143,8 @@ export const OrderDialog: <T>(props: OrderDialogProps<T>) => ReactElement = ({
               {currentDialogData.description}
             </Typography>
             <OrderCheckboxProduct
-              products={products}
+              products={editableProducts}
+              onProductChange={handleProductChange}
             />
           </DialogContent>
 

diff --git a/apps/storefront/src/pages/orderDetail/components/OrderShipping.tsx b/apps/storefront/src/pages/orderDetail/components/OrderShipping.tsx
@@ -28,6 +28,7 @@ interface Shipping extends OrderShippingAddressItem{
 }
 interface OrderShippingProps {
   shippings: Shipping[]
+  currency: string,
 }
 
 const ShipmentTitle = styled('span')(() => ({
@@ -37,6 +38,7 @@ const ShipmentTitle = styled('span')(() => ({
 export const OrderShipping = (props: OrderShippingProps) => {
   const {
     shippings,
+    currency,
   } = props
 
   const getFullName = (shipping: Shipping) => {
@@ -69,13 +71,12 @@ export const OrderShipping = (props: OrderShippingProps) => {
   const getShipmentText = (shipment: OrderShippedItem) => {
     const {
       date_created: createdDate,
-      shipping_provider: shippingProvider,
       shipping_method: shippingMethod,
     } = shipment
 
     const time = format(new Date(createdDate), 'LLLL, d')
 
-    return `shipped on ${time}, by ${shippingProvider}, ${shippingMethod}`
+    return `shipped on ${time}, by ${shippingMethod}`
   }
 
   const getShippingProductQuantity = (item: OrderProductItem) => item.current_quantity_shipped
@@ -103,6 +104,8 @@ export const OrderShipping = (props: OrderShippingProps) => {
                   }}
                 >
                   {getFullName(shipping)}
+                  {' - '}
+                  {shipping.company}
                 </Typography>
                 <Typography
                   variant="h6"
@@ -116,55 +119,58 @@ export const OrderShipping = (props: OrderShippingProps) => {
 
               {
                 (shipping.shipmentItems || []).map((shipment: OrderShippedItem) => (
-                  <>
-                    {
-                      shipment.isNotShip && (
-                        <Box sx={{
-                          margin: '20px 0 2px',
-                        }}
-                        >
-                          <Typography variant="body1">
-                            <ShipmentTitle>Not Shipped yet</ShipmentTitle>
-                          </Typography>
-                        </Box>
-                      )
-                    }
-                    {
-                      !shipment.isNotShip && (
-                        <Box sx={{
-                          margin: '20px 0 2px',
-                        }}
-                        >
-                          <Typography variant="body1">
-                            <>
-                              <ShipmentTitle>{`Shipment ${getShipmentIndex()} - `}</ShipmentTitle>
-                              {getShipmentText(shipment)}
-                            </>
-                          </Typography>
-                          {
-                            shipment.tracking_link
-                              ? (
-                                <Link
-                                  href={shipment.tracking_link}
-                                  target="_blank"
-                                >
-                                  {shipment.tracking_number}
-                                </Link>
-                              )
-                              : (
-                                <Typography variant="body1">
-                                  {shipment.tracking_number}
-                                </Typography>
-                              )
-                          }
-                        </Box>
-                      )
-                    }
-                    <OrderProduct
-                      getProductQuantity={shipment.isNotShip ? getNotShippingProductQuantity : getShippingProductQuantity}
-                      products={shipment.itemsInfo}
-                    />
-                  </>
+                  shipment.itemsInfo.length > 0 ? (
+                    <>
+                      {
+                        shipment.isNotShip && (
+                          <Box sx={{
+                            margin: '20px 0 2px',
+                          }}
+                          >
+                            <Typography variant="body1">
+                              <ShipmentTitle>Not Shipped yet</ShipmentTitle>
+                            </Typography>
+                          </Box>
+                        )
+                      }
+                      {
+                        !shipment.isNotShip && (
+                          <Box sx={{
+                            margin: '20px 0 2px',
+                          }}
+                          >
+                            <Typography variant="body1">
+                              <>
+                                <ShipmentTitle>{`Shipment ${getShipmentIndex()} - `}</ShipmentTitle>
+                                {getShipmentText(shipment)}
+                              </>
+                            </Typography>
+                            {
+                              shipment.tracking_link
+                                ? (
+                                  <Link
+                                    href={shipment.tracking_link}
+                                    target="_blank"
+                                  >
+                                    {shipment.tracking_number}
+                                  </Link>
+                                )
+                                : (
+                                  <Typography variant="body1">
+                                    {shipment.tracking_number}
+                                  </Typography>
+                                )
+                            }
+                          </Box>
+                        )
+                      }
+                      <OrderProduct
+                        getProductQuantity={shipment.isNotShip ? getNotShippingProductQuantity : getShippingProductQuantity}
+                        products={shipment.itemsInfo}
+                        currency={currency}
+                      />
+                    </>
+                  ) : <></>
                 ))
               }
 

diff --git a/apps/storefront/src/pages/orderDetail/shared/B2BOrderData.ts b/apps/storefront/src/pages/orderDetail/shared/B2BOrderData.ts
@@ -45,7 +45,7 @@ const getOrderShipping = (data: B2BOrderData) => {
 
     const itemsInfo: OrderProductItem[] = []
     items.forEach((item: OrderShipmentProductItem) => {
-      const product = products.find((product: OrderProductItem) => product.product_id === item.product_id)
+      const product = products.find((product: OrderProductItem) => product.id === item.order_product_id)
       if (product) {
         itemsInfo.push({
           ...product,
@@ -63,7 +63,7 @@ const getOrderShipping = (data: B2BOrderData) => {
   const shippings = shippingAddress.map((address: OrderShippingAddressItem) => {
     const notShipItem: OrderShippedItem = {
       isNotShip: true,
-      itemsInfo: products.filter((product: OrderProductItem) => product.quantity > product.quantity_shipped),
+      itemsInfo: products.filter((product: OrderProductItem) => product.quantity > product.quantity_shipped && address.id === product.order_address_id),
     }
 
     return {
@@ -107,11 +107,11 @@ const getOrderSummary = (data: B2BOrderData) => {
     createAt: dateCreated,
     name: `${firstName} ${lastName}`,
     priceData: {
-      'Sub total': subtotalExTax || subtotalIncTax,
-      Shipping: shippingCostExTax || shippingCostIncTax,
-      'Handing fee': handlingCostExTax || handlingCostIncTax,
-      Tax: totalTax,
-      'Grand total': totalExTax || totalIncTax,
+      'Sub total': formatPrice(subtotalExTax || subtotalIncTax || ''),
+      Shipping: formatPrice(shippingCostExTax || shippingCostIncTax || ''),
+      'Handing fee': formatPrice(handlingCostExTax || handlingCostIncTax || ''),
+      Tax: formatPrice(totalTax || ''),
+      'Grand total': formatPrice(totalExTax || totalIncTax || ''),
     },
   }
 
@@ -139,6 +139,7 @@ export const convertB2BOrderDetails = (data: B2BOrderData) => ({
   status: data.status,
   statusCode: data.statusId,
   currencyCode: data.currencyCode,
+  currency: data.money?.currency_token || '$',
   money: data.money,
   orderSummary: getOrderSummary(data),
   payment: getPaymentData(data),