From 53a4f10d3ca2935eec9be7105be516ef3d16baea Mon Sep 17 00:00:00 2001 From: Pier Francesco Ferrari Date: Mon, 27 Nov 2023 17:19:30 +0100 Subject: [PATCH] feat: add ResourceLineItem of type shipments --- .../src/dictionaries/shipments.ts | 111 ++++++++++++++++++ packages/app-elements/src/main.ts | 4 + .../ResourceListItem.mocks.ts | 78 +++++++++++- .../ResourceListItem/ResourceListItem.tsx | 3 + .../ResourceListItem/transformers/index.tsx | 1 + .../transformers/shipments.tsx | 42 +++++++ .../ui/resources/ResourceListItem/types.ts | 15 ++- .../resources/ResourceListItem.stories.tsx | 5 + 8 files changed, 256 insertions(+), 3 deletions(-) create mode 100644 packages/app-elements/src/dictionaries/shipments.ts create mode 100644 packages/app-elements/src/ui/resources/ResourceListItem/transformers/shipments.tsx diff --git a/packages/app-elements/src/dictionaries/shipments.ts b/packages/app-elements/src/dictionaries/shipments.ts new file mode 100644 index 000000000..a040647e0 --- /dev/null +++ b/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 = { + 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] +} diff --git a/packages/app-elements/src/main.ts b/packages/app-elements/src/main.ts index 1c0a0bf97..34a3977cd 100644 --- a/packages/app-elements/src/main.ts +++ b/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 diff --git a/packages/app-elements/src/ui/resources/ResourceListItem/ResourceListItem.mocks.ts b/packages/app-elements/src/ui/resources/ResourceListItem/ResourceListItem.mocks.ts index 2f49b80a1..e5b62d88c 100644 --- a/packages/app-elements/src/ui/resources/ResourceListItem/ResourceListItem.mocks.ts +++ b/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 +} satisfies Record diff --git a/packages/app-elements/src/ui/resources/ResourceListItem/ResourceListItem.tsx b/packages/app-elements/src/ui/resources/ResourceListItem/ResourceListItem.tsx index b5f4b8301..f330dfe2c 100644 --- a/packages/app-elements/src/ui/resources/ResourceListItem/ResourceListItem.tsx +++ b/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( return returnToProps({ resource, user }) case 'stock_transfers': return stockTransferToProps({ resource, user }) + case 'shipments': + return shipmentToProps({ resource, user }) } }, [resource]) return ( diff --git a/packages/app-elements/src/ui/resources/ResourceListItem/transformers/index.tsx b/packages/app-elements/src/ui/resources/ResourceListItem/transformers/index.tsx index b9b5d2030..9440e1ff4 100644 --- a/packages/app-elements/src/ui/resources/ResourceListItem/transformers/index.tsx +++ b/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' diff --git a/packages/app-elements/src/ui/resources/ResourceListItem/transformers/shipments.tsx b/packages/app-elements/src/ui/resources/ResourceListItem/transformers/shipments.tsx new file mode 100644 index 000000000..861bf9177 --- /dev/null +++ b/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 = ({ + 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: ( + + ), + icon: + !awaitingStockTransfer && resource.status === 'upcoming' ? ( + + ) : ( + + ) + } +} diff --git a/packages/app-elements/src/ui/resources/ResourceListItem/types.ts b/packages/app-elements/src/ui/resources/ResourceListItem/types.ts index 01f6a3f3f..0a5908df3 100644 --- a/packages/app-elements/src/ui/resources/ResourceListItem/types.ts +++ b/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 diff --git a/packages/docs/src/stories/resources/ResourceListItem.stories.tsx b/packages/docs/src/stories/resources/ResourceListItem.stories.tsx index b5521a9b9..915b2e1ff 100644 --- a/packages/docs/src/stories/resources/ResourceListItem.stories.tsx +++ b/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' +}