Add shipments type to ResourceLineItem component

packages/app-elements/src/dictionaries/shipments.ts

@@ -0,0 +1,111 @@
+import { type IconProps } from '#ui/atoms/Icon'
+import type { Shipment } from '@commercelayer/sdk'
+import type { DisplayStatus } from './types'
+
+export interface ShipmentDisplayStatus extends DisplayStatus {
+  label: string
+  icon: IconProps['name']
+  color: IconProps['background']
+  task?: string
+}
+
+export function getShipmentDisplayStatus(
+  shipment: Shipment,
+  awaitingStockTransfer: boolean = false
+): ShipmentDisplayStatus {
+  const shipmentStatus = awaitingStockTransfer
+    ? 'awaiting_stock_transfer'
+    : shipment.status
+
+  switch (shipmentStatus) {
+    case 'upcoming':
+      return {
+        label: 'Upcoming',
+        icon: 'truck',
+        color: 'gray'
+      }
+
+    case 'cancelled':
+      return {
+        label: 'Cancelled',
+        icon: 'x',
+        color: 'gray'
+      }
+
+    case 'draft':
+      return {
+        label: 'Draft',
+        icon: 'minus',
+        color: 'gray'
+      }
+
+    case 'on_hold':
+      return {
+        label: 'On hold',
+        icon: 'hourglass',
+        color: 'orange',
+        task: 'On hold'
+      }
+
+    case 'packing':
+      return {
+        label: 'Packing',
+        icon: 'package',
+        color: 'orange',
+        task: 'Packing'
+      }
+
+    case 'picking':
+      return {
+        label: 'Picking',
+        icon: 'arrowDown',
+        color: 'orange',
+        task: 'Picking'
+      }
+
+    case 'ready_to_ship':
+      return {
+        label: 'Ready to ship',
+        icon: 'arrowUpRight',
+        color: 'orange',
+        task: 'Ready to ship'
+      }
+
+    case 'shipped':
+      return {
+        label: 'Shipped',
+        icon: 'check',
+        color: 'green'
+      }
+
+    case 'awaiting_stock_transfer':
+      return {
+        label: 'Awaiting stock transfers',
+        icon: 'hourglass',
+        color: 'orange',
+        task: 'Awaiting stock transfers'
+      }
+
+    default:
+      return {
+        label: `Not handled: (${shipment.status})`,
+        icon: 'warning',
+        color: 'white'
+      }
+  }
+}
+
+export function getShipmentStatusName(status: Shipment['status']): string {
+  const dictionary: Record<typeof status, string> = {
+    draft: 'Draft',
+    on_hold: 'On hold',
+    upcoming: 'Upcoming',
+    packing: 'Packing',
+    picking: 'Picking',
+    ready_to_ship: 'Ready to ship',
+    shipped: 'Shipped',
+    cancelled: 'Cancelled'
+  }
+
+  return dictionary[status]
+}

packages/app-elements/src/main.ts

@@ -308,6 +308,10 @@ export {
   getReturnDisplayStatus,
   getReturnStatusName
 } from '#dictionaries/returns'
+export {
+  getShipmentDisplayStatus,
+  getShipmentStatusName
+} from '#dictionaries/shipments'
 export {
   getStockTransferDisplayStatus,
   getStockTransferStatusName

packages/app-elements/src/ui/resources/ResourceListItem/ResourceListItem.mocks.ts

@@ -3,6 +3,7 @@ import type {
   Market,
   Order,
   Return,
+  Shipment,
   StockLocation,
   StockTransfer
 } from '@commercelayer/sdk'
@@ -32,6 +33,17 @@ const destinationStockLocation = {
   updated_at: ''
 } as const satisfies StockLocation
 
+const stockTransfer = {
+  type: 'stock_transfers',
+  id: '',
+  number: 30817130,
+  sku_code: 'BABYBIBXA19D9D000000XXXX',
+  quantity: 1,
+  status: 'upcoming',
+  created_at: '',
+  updated_at: ''
+} as const satisfies StockTransfer
+
 const order = {
   type: 'orders',
   id: '',
@@ -245,5 +257,69 @@ export const presetResourceListItem = {
     status: 'completed',
     origin_stock_location: originStockLocation,
     destination_stock_location: destinationStockLocation
+  },
+  shipmentUpcoming: {
+    type: 'shipments',
+    id: '',
+    created_at: '',
+    updated_at: '2023-06-10T06:38:44.964Z',
+    number: '30817130/S/0001',
+    status: 'upcoming',
+    stock_location: originStockLocation
+  },
+  shipmentPicking: {
+    type: 'shipments',
+    id: '',
+    created_at: '',
+    updated_at: '2023-06-10T06:38:44.964Z',
+    number: '30817130/S/0001',
+    status: 'picking',
+    stock_location: originStockLocation
+  },
+  shipmentPacking: {
+    type: 'shipments',
+    id: '',
+    created_at: '',
+    updated_at: '2023-06-10T06:38:44.964Z',
+    number: '30817130/S/0001',
+    status: 'packing',
+    stock_location: originStockLocation
+  },
+  shipmentReadyToShip: {
+    type: 'shipments',
+    id: '',
+    created_at: '',
+    updated_at: '2023-06-10T06:38:44.964Z',
+    number: '30817130/S/0001',
+    status: 'ready_to_ship',
+    stock_location: originStockLocation
+  },
+  shipmentOnHold: {
+    type: 'shipments',
+    id: '',
+    created_at: '',
+    updated_at: '2023-06-10T06:38:44.964Z',
+    number: '30817130/S/0001',
+    status: 'on_hold',
+    stock_location: originStockLocation
+  },
+  shipmentShipped: {
+    type: 'shipments',
+    id: '',
+    created_at: '',
+    updated_at: '2023-06-10T06:38:44.964Z',
+    number: '30817130/S/0001',
+    status: 'shipped',
+    stock_location: originStockLocation
+  },
+  shipmentWithStockTransfer: {
+    type: 'shipments',
+    id: '',
+    created_at: '',
+    updated_at: '2023-06-10T06:38:44.964Z',
+    number: '30817130/S/0001',
+    status: 'upcoming',
+    stock_location: originStockLocation,
+    stock_transfers: [stockTransfer]
   }
-} satisfies Record<string, Order | Return | Customer | StockTransfer>
+} satisfies Record<string, Order | Return | Customer | StockTransfer | Shipment>

packages/app-elements/src/ui/resources/ResourceListItem/ResourceListItem.tsx

@@ -10,6 +10,7 @@ import {
   customerToProps,
   orderToProps,
   returnToProps,
+  shipmentToProps,
   stockTransferToProps
 } from '#ui/resources/ResourceListItem/transformers'
 
@@ -106,6 +107,8 @@ export const ResourceListItem = withSkeletonTemplate<ResourceListItemProps>(
           return returnToProps({ resource, user })
         case 'stock_transfers':
           return stockTransferToProps({ resource, user })
+        case 'shipments':
+          return shipmentToProps({ resource, user })
       }
     }, [resource])
     return (

packages/app-elements/src/ui/resources/ResourceListItem/transformers/index.tsx

@@ -1,4 +1,5 @@
 export { customerToProps } from './customers'
 export { orderToProps } from './orders'
 export { returnToProps } from './returns'
+export { shipmentToProps } from './shipments'
 export { stockTransferToProps } from './stockTransfers'

packages/app-elements/src/ui/resources/ResourceListItem/transformers/shipments.tsx

@@ -0,0 +1,42 @@
+import { getShipmentDisplayStatus } from '#dictionaries/shipments'
+import { RadialProgress } from '#ui/atoms/RadialProgress'
+import {
+  ListItemDescription,
+  ListItemIcon
+} from '#ui/resources/ResourceListItem/common'
+import type { Shipment } from '@commercelayer/sdk'
+import { type ResourceToProps } from '../types'
+
+export const shipmentToProps: ResourceToProps<Shipment> = ({
+  resource,
+  user
+}) => {
+  const awaitingStockTransfer =
+    resource.stock_transfers != null && resource.stock_transfers.length > 0
+  const displayStatus = getShipmentDisplayStatus(
+    resource,
+    awaitingStockTransfer
+  )
+  const returnStockLocationName =
+    resource.stock_location?.name != null
+      ? `From ${resource.stock_location.name} `
+      : ''
+  const number = resource.number != null ? `#${resource.number}` : ''
+
+  return {
+    name: `Shipment ${number}`,
+    description: (
+      <ListItemDescription
+        displayStatus={displayStatus}
+        date={resource.updated_at}
+        additionalInfos={returnStockLocationName}
+      />
+    ),
+    icon:
+      !awaitingStockTransfer && resource.status === 'upcoming' ? (
+        <RadialProgress icon='truck' />
+      ) : (
+        <ListItemIcon icon={displayStatus.icon} color={displayStatus.color} />
+      )
+  }
+}

packages/app-elements/src/ui/resources/ResourceListItem/types.ts

@@ -1,7 +1,18 @@
 import type { TokenProviderAuthUser } from '#providers/TokenProvider/types'
-import type { Customer, Order, Return, StockTransfer } from '@commercelayer/sdk'
+import type {
+  Customer,
+  Order,
+  Return,
+  Shipment,
+  StockTransfer
+} from '@commercelayer/sdk'
 
-export type ResourceListItemType = Order | Return | Customer | StockTransfer
+export type ResourceListItemType =
+  | Order
+  | Return
+  | Customer
+  | StockTransfer
+  | Shipment
 
 export interface ResourceListItemComponentProps {
   name: string

packages/docs/src/stories/resources/ResourceListItem.stories.tsx

@@ -95,3 +95,8 @@ export const Customers = ItemsByTypeTemplate.bind({})
 Customers.args = {
   type: 'customers'
 }
+
+export const Shipments = ItemsByTypeTemplate.bind({})
+Shipments.args = {
+  type: 'shipments'
+}