fix: repair style issues

apps/storefront/src/components/B3Tag.tsx

@@ -19,5 +19,6 @@ export const B3Tag = styled('span')(({
   backgroundColor: color,
   color: textColor,
   fontSize,
-  whiteSpace: 'nowrap',
+  // whiteSpace: 'nowrap',
+  display: 'inline-block',
 }))

apps/storefront/src/pages/order/components/OrderStatus.tsx

@@ -10,11 +10,13 @@ import getOrderStatus from '../shared/getOrderStatus'
 
 interface OrderStatusProps {
   code: string,
+  text?: string,
 }
 
 export const OrderStatus = (props: OrderStatusProps) => {
   const {
     code,
+    text,
   } = props
 
   const status = getOrderStatus(code)
@@ -25,7 +27,7 @@ export const OrderStatus = (props: OrderStatusProps) => {
         color={status.color}
         textColor={status.textColor}
       >
-        {status.name}
+        {text || status.name}
       </B3Tag>
     ) : <></>
   )

apps/storefront/src/pages/orderDetail/OrderDetail.tsx

@@ -53,6 +53,11 @@ import {
   B3Sping,
 } from '@/components/spin/B3Sping'
 
+import {
+  OrderDetailsContext,
+  OrderDetailsProvider,
+} from './context/OrderDetailsContext'
+
 interface LocationState {
   isCompanyOrder: boolean,
 }
@@ -68,6 +73,20 @@ const OrderDetail = () => {
     },
   } = useContext(GlobaledContext)
 
+  const {
+    state: {
+      shippings,
+      history,
+      poNumber,
+      status = '',
+      customStatus,
+      orderSummary,
+      currency = '$',
+    },
+    state: detailsData,
+    dispatch,
+  } = useContext(OrderDetailsContext)
+
   const localtion = useLocation()
 
   const [isMobile] = useMobile()
@@ -78,17 +97,6 @@ const OrderDetail = () => {
     setOrderId(params.id || '')
   }, [params])
 
-  const [detailsData, setDetailsData] = useState({
-    shippings: [],
-    history: [],
-    poNumber: '',
-    status: '',
-    statusCode: '',
-    currencyCode: '',
-    currency: '',
-    orderSummary: {},
-  })
-
   const getOrderDetails = async () => {
     const id = parseInt(orderId, 10)
     if (!id) {
@@ -98,17 +106,23 @@ const OrderDetail = () => {
     setIsRequestLoading(true)
 
     try {
+      let data = null
       if (isB2BUser) {
         const {
           order,
         }: any = await getB2BOrderDetails(id)
-        setDetailsData(convertB2BOrderDetails(order))
+        data = convertB2BOrderDetails(order)
       } else {
         const {
           customerOrder,
         }: any = await getBCOrderDetails(id)
-        setDetailsData(convertBCOrderDetails(customerOrder))
+        data = convertBCOrderDetails(customerOrder)
       }
+
+      dispatch({
+        type: 'all',
+        payload: data,
+      })
     } finally {
       setIsRequestLoading(false)
     }
@@ -126,15 +140,6 @@ const OrderDetail = () => {
     setOrderId(orderId.toString())
   }
 
-  const {
-    shippings,
-    history,
-    poNumber,
-    status,
-    orderSummary,
-    currency,
-  } = detailsData
-
   return (
     <B3Sping
       isSpinning={isRequestLoading}
@@ -180,7 +185,10 @@ const OrderDetail = () => {
           >
             <Typography variant="h4">{`#${orderId}`}</Typography>
             {poNumber && <Typography variant="body2">{poNumber}</Typography>}
-            <OrderStatus code={status} />
+            <OrderStatus
+              code={status}
+              text={customStatus}
+            />
           </Grid>
           <Grid
             container
@@ -247,4 +255,10 @@ const OrderDetail = () => {
   )
 }
 
-export default OrderDetail
+const OrderDetailsContent = () => (
+  <OrderDetailsProvider>
+    <OrderDetail />
+  </OrderDetailsProvider>
+)
+
+export default OrderDetailsContent

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

@@ -72,11 +72,12 @@ export const OrderShipping = (props: OrderShippingProps) => {
     const {
       date_created: createdDate,
       shipping_method: shippingMethod,
+      shipping_provider: shippingProvider,
     } = shipment
 
     const time = format(new Date(createdDate), 'LLLL, d')
 
-    return `shipped on ${time}, by ${shippingMethod}`
+    return `shipped on ${time}, by ${shippingProvider}, ${shippingMethod}`
   }
 
   const getShippingProductQuantity = (item: OrderProductItem) => item.current_quantity_shipped

apps/storefront/src/pages/orderDetail/context/OrderDetailsContext.tsx

@@ -0,0 +1,79 @@
+import {
+  useReducer,
+  createContext,
+  Dispatch,
+  ReactNode,
+  useMemo,
+} from 'react'
+
+interface OrderDetailsState {
+  shippings: any,
+  history: any,
+  poNumber?: string,
+  status?: string,
+  statusCode?: string,
+  currencyCode?: string,
+  currency?: string,
+  orderSummary: any,
+  customStatus?: string,
+}
+interface OrderDetailsAction {
+  type: string,
+  payload: OrderDetailsState
+}
+export interface OrderDetailsContextType {
+  state: OrderDetailsState,
+  dispatch: Dispatch<OrderDetailsAction>,
+}
+
+interface OrderDetailsProviderProps {
+  children: ReactNode
+}
+
+const initState = {
+  shippings: [],
+  history: [],
+  poNumber: '',
+  status: '',
+  statusCode: '',
+  currencyCode: '',
+  currency: '',
+  orderSummary: {},
+  customStatus: '',
+}
+
+export const OrderDetailsContext = createContext<OrderDetailsContextType>({
+  state: initState,
+  dispatch: () => {},
+})
+
+const reducer = (state: OrderDetailsState, action: OrderDetailsAction) => {
+  switch (action.type) {
+    case 'all':
+      return {
+        ...state,
+        ...action.payload,
+      }
+    default:
+      return state
+  }
+}
+
+export function OrderDetailsProvider(props: OrderDetailsProviderProps) {
+  const [state, dispatch] = useReducer(reducer, initState)
+
+  const {
+    children,
+  } = props
+
+  const OrderDetailsValue = useMemo(() => ({
+    state,
+    dispatch,
+  }), [state])
+
+  return (
+    <OrderDetailsContext.Provider value={OrderDetailsValue}>
+      {children}
+    </OrderDetailsContext.Provider>
+  )
+}

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

@@ -171,4 +171,5 @@ export const convertB2BOrderDetails = (data: B2BOrderData) => ({
   orderComments: data.customerMessage,
   products: handleProductQuantity(data),
   orderId: +data.id,
+  customStatus: data.customStatus,
 })