fix: modify order detail type settings

bigcommerce · Nov 22, 2022 · b5a6313 · b5a6313
1 parent be823dc
commit b5a6313
Show file tree

Hide file tree

Showing 13 changed files with 427 additions and 176 deletions.
diff --git a/apps/storefront/src/pages/orderDetail/OrderDetail.tsx b/apps/storefront/src/pages/orderDetail/OrderDetail.tsx
@@ -60,6 +60,11 @@ import {
   OrderDetailsProvider,
 } from './context/OrderDetailsContext'
 
+import {
+  OrderStatusResponse,
+  OrderDetailsResponse,
+} from '../../types'
+
 interface LocationState {
   isCompanyOrder: boolean,
 }
@@ -77,7 +82,6 @@ const OrderDetail = () => {
 
   const {
     state: {
-      history,
       poNumber,
       status = '',
       customStatus,
@@ -106,23 +110,18 @@ const OrderDetail = () => {
     setIsRequestLoading(true)
 
     try {
-      let data = null
-      if (isB2BUser) {
-        const {
-          order,
-        }: any = await getB2BOrderDetails(id)
-        data = convertB2BOrderDetails(order)
-      } else {
-        const {
-          customerOrder,
-        }: any = await getBCOrderDetails(id)
-        data = convertBCOrderDetails(customerOrder)
-      }
+      const req = isB2BUser ? getB2BOrderDetails : getBCOrderDetails
+      const res: OrderDetailsResponse = await req(id)
 
-      dispatch({
-        type: 'all',
-        payload: data,
-      })
+      const order = res[isB2BUser ? 'order' : 'customerOrder']
+
+      if (order) {
+        const data = isB2BUser ? convertB2BOrderDetails(order) : convertBCOrderDetails(order)
+        dispatch({
+          type: 'all',
+          payload: data,
+        })
+      }
     } finally {
       setIsRequestLoading(false)
     }
@@ -135,7 +134,7 @@ const OrderDetail = () => {
   const getOrderStatus = async () => {
     const fn = isB2BUser ? getOrderStatusType : getBcOrderStatusType
     const orderStatusesName = isB2BUser ? 'orderStatuses' : 'bcOrderStatuses'
-    const orderStatuses: any = await fn()
+    const orderStatuses: OrderStatusResponse = await fn()
     dispatch({
       type: 'statusType',
       payload: {

diff --git a/apps/storefront/src/pages/orderDetail/components/OrderCheckboxProduct.tsx b/apps/storefront/src/pages/orderDetail/components/OrderCheckboxProduct.tsx
@@ -19,15 +19,16 @@ import {
 } from '@/hooks'
 
 import {
-  OrderProductItem,
   OrderProductOption,
-} from '../shared/B2BOrderData'
+  EditableProductItem,
+  OrderCurrency,
+} from '../../../types'
 
 interface OrderCheckboxProductProps {
-  products: any[],
-  currencyInfo: any,
-  getProductQuantity?: (item: OrderProductItem) => number
-  onProductChange?: (products: OrderProductItem[]) => void
+  products: EditableProductItem[],
+  currencyInfo: OrderCurrency,
+  getProductQuantity?: (item: EditableProductItem) => number
+  onProductChange?: (products: EditableProductItem[]) => void
 }
 
 interface FlexProps {
@@ -136,18 +137,19 @@ export const OrderCheckboxProduct = (props: OrderCheckboxProductProps) => {
 
   const [isMobile] = useMobile()
 
-  const [list, setList] = useState<any>([])
+  const [list, setList] = useState<number[]>([])
 
   const getProductPrice = (price: string | number) => {
     const priceNumber = parseFloat(price.toString()) || 0
 
     return priceNumber.toFixed(2)
   }
 
-  const getProductTotals = (quantity: number, price: string | number) => {
+  const getProductTotals = (quantity: string | number, price: string | number) => {
     const priceNumber = parseFloat(price.toString()) || 0
+    const quantityNumber = parseInt(quantity.toString(), 10) || 0
 
-    return (quantity * priceNumber).toFixed(2)
+    return (quantityNumber * priceNumber).toFixed(2)
   }
 
   const itemStyle = isMobile ? mobileItemStyle : defaultItemStyle
@@ -162,7 +164,7 @@ export const OrderCheckboxProduct = (props: OrderCheckboxProductProps) => {
     }
   }
 
-  const handleSelectChange = (variantId: any) => {
+  const handleSelectChange = (variantId: number) => {
     const newlist = [...list]
     const index = newlist.findIndex((item) => item === variantId)
     if (index !== -1) {
@@ -173,11 +175,11 @@ export const OrderCheckboxProduct = (props: OrderCheckboxProductProps) => {
     setList(newlist)
   }
 
-  const isChecked = (variantId: any) => list.includes(variantId)
+  const isChecked = (variantId: number) => list.includes(variantId)
 
-  const handleProductQuantityChange = (product: OrderProductItem) => (e: ChangeEvent<HTMLInputElement>) => {
+  const handleProductQuantityChange = (product: EditableProductItem) => (e: ChangeEvent<HTMLInputElement>) => {
     if (!e.target.value || parseInt(e.target.value, 10) > 0) {
-      product.quantity = e.target.value
+      product.editQuantity = e.target.value
       onProductChange([...products])
     }
   }
@@ -188,9 +190,9 @@ export const OrderCheckboxProduct = (props: OrderCheckboxProductProps) => {
     }
   }
 
-  const handleNumberInputBlur = (product: OrderProductItem) => () => {
-    if (!product.quantity) {
-      product.quantity = '1'
+  const handleNumberInputBlur = (product: EditableProductItem) => () => {
+    if (!product.editQuantity) {
+      product.editQuantity = '1'
       onProductChange([...products])
     }
   }
@@ -241,7 +243,7 @@ export const OrderCheckboxProduct = (props: OrderCheckboxProductProps) => {
       }
 
       {
-        products.map((product: OrderProductItem) => (
+        products.map((product: EditableProductItem) => (
           <Flex
             isMobile={isMobile}
             key={product.sku}

diff --git a/apps/storefront/src/pages/orderDetail/components/OrderDialog.tsx b/apps/storefront/src/pages/orderDetail/components/OrderDialog.tsx
@@ -30,22 +30,24 @@ import {
 import CreateShoppingList from './CreateShoppingList'
 
 import {
+  EditableProductItem,
   OrderProductItem,
-} from '../shared/B2BOrderData'
+  OrderCurrency,
+} from '../../../types'
 
 interface OrderDialogProps<T> {
   open: boolean,
   setOpen: (open: boolean) => void,
-  products?: any,
+  products?: OrderProductItem[],
   type?: string,
   currentDialogData: any,
   itemKey: string,
-  currencyInfo: any,
+  currencyInfo: OrderCurrency,
 }
 
 export const OrderDialog: <T>(props: OrderDialogProps<T>) => ReactElement = ({
   open,
-  products,
+  products = [],
   type,
   currentDialogData,
   setOpen,
@@ -56,7 +58,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 [editableProducts, setEditableProducts] = useState<EditableProductItem[]>([])
 
   const [isMobile] = useMobile()
 
@@ -98,11 +100,12 @@ export const OrderDialog: <T>(props: OrderDialogProps<T>) => ReactElement = ({
     if (open) {
       setEditableProducts(products.map((item: OrderProductItem) => ({
         ...item,
+        editQuantity: item.quantity,
       })))
     }
   }, [open])
 
-  const handleProductChange = (products: OrderProductItem[]) => {
+  const handleProductChange = (products: EditableProductItem[]) => {
     setEditableProducts(products)
   }
 

diff --git a/apps/storefront/src/pages/orderDetail/components/OrderHistory.tsx b/apps/storefront/src/pages/orderDetail/components/OrderHistory.tsx
@@ -33,7 +33,8 @@ import {
 
 import {
   OrderHistoryItem,
-} from '../shared/B2BOrderData'
+  OrderStatusItem,
+} from '../../../types'
 
 import {
   OrderDetailsContext,
@@ -48,8 +49,8 @@ const HistoryListContainer = styled('div')(() => ({
 export const OrderHistory = () => {
   const {
     state: {
-      history,
-      orderStatus: orderStatusLabel,
+      history = [],
+      orderStatus: orderStatusLabel = [],
     },
   } = useContext(OrderDetailsContext)
 
@@ -60,7 +61,7 @@ export const OrderHistory = () => {
     locale: lang,
   })
 
-  const getOrderStatusLabel = (status: string) => orderStatusLabel.find((item: any) => item.systemLabel === status)?.customLabel || status
+  const getOrderStatusLabel = (status: string) => orderStatusLabel.find((item: OrderStatusItem) => item.systemLabel === status)?.customLabel || status
 
   const columnItems: TableColumnItem<OrderHistoryItem>[] = [{
     key: 'time',

diff --git a/apps/storefront/src/pages/orderDetail/components/OrderProduct.tsx b/apps/storefront/src/pages/orderDetail/components/OrderProduct.tsx
@@ -10,9 +10,9 @@ import {
 } from '@/hooks'
 
 import {
-  OrderProductItem,
   OrderProductOption,
-} from '../shared/B2BOrderData'
+  OrderProductItem,
+} from '../../../types'
 
 interface OrderProductProps {
   products: OrderProductItem[],