Update app-elements to latest v2

packages/app/package.json

@@ -15,8 +15,8 @@
     "prepare": "touch ./public/config.local.js"
   },
   "dependencies": {
-    "@commercelayer/app-elements": "^1.24.3",
-    "@commercelayer/sdk": "5.37.0",
+    "@commercelayer/app-elements": "^2.0.2",
+    "@commercelayer/sdk": "6.3.0",
     "@hookform/resolvers": "^3.3.4",
     "lodash": "^4.17.21",
     "query-string": "^9.0.0",

packages/app/src/components/FormPackingFieldPackages.tsx

@@ -9,9 +9,7 @@ import {
   useCoreSdkProvider,
   type InputSelectValue
 } from '@commercelayer/app-elements'
-import type { Package } from '@commercelayer/sdk'
-import type { QueryParamsList } from '@commercelayer/sdk/lib/cjs/query'
-import type { ListResponse } from '@commercelayer/sdk/lib/cjs/resource'
+import type { ListResponse, Package, QueryParamsList } from '@commercelayer/sdk'
 import isEmpty from 'lodash/isEmpty'
 import { useCallback } from 'react'
 import { makePackage } from 'src/mocks/resources/packages'
@@ -116,7 +114,7 @@ function InputSelectPackages({
 function makePackageQuery(
   stockLocationId: string,
   hint?: string
-): QueryParamsList {
+): QueryParamsList<Package> {
   return {
     fields: ['id', 'name', 'width', 'length', 'height', 'unit_of_length'],
     filters: {

packages/app/src/components/ShipmentSteps.tsx

@@ -1,11 +1,12 @@
-import { getDisplayStatus } from '#data/status'
 import { useActiveStockTransfers } from '#hooks/useActiveStockTransfers'
 import {
   Badge,
+  getShipmentDisplayStatus,
   Spacer,
   Stack,
   Text,
-  withSkeletonTemplate
+  withSkeletonTemplate,
+  type BadgeProps
 } from '@commercelayer/app-elements'
 import type { Shipment } from '@commercelayer/sdk'
 
@@ -15,7 +16,7 @@ interface Props {
 
 export const ShipmentSteps = withSkeletonTemplate<Props>(
   ({ shipment }): JSX.Element => {
-    const displayStatus = getDisplayStatus(shipment)
+    const displayStatus = getShipmentDisplayStatus(shipment)
     const activeStockTransfers = useActiveStockTransfers(shipment)
 
     return (
@@ -28,7 +29,7 @@ export const ShipmentSteps = withSkeletonTemplate<Props>(
           </Spacer>
           {shipment.status !== undefined && (
             <>
-              <Badge variant={displayStatus.badgeVariant}>
+              <Badge variant={getBadgeVariant(shipment)}>
                 {displayStatus.label.toUpperCase()}
               </Badge>
               {shipment.status === 'on_hold' &&
@@ -56,3 +57,20 @@ export const ShipmentSteps = withSkeletonTemplate<Props>(
     )
   }
 )
+
+function getBadgeVariant(shipment: Shipment): BadgeProps['variant'] {
+  switch (shipment.status) {
+    case 'picking':
+    case 'ready_to_ship':
+    case 'on_hold':
+      return 'warning-solid'
+
+    // @ts-expect-error waiting for new types from SDK
+    case 'delivered':
+    case 'shipped':
+      return 'success-solid'
+
+    default:
+      return 'secondary-solid'
+  }
+}

packages/app/src/data/dictionaries.ts

@@ -9,7 +9,9 @@ export function getShipmentStatusName(status: Shipment['status']): string {
     packing: 'Packing',
     ready_to_ship: 'Ready to ship',
     shipped: 'Shipped',
-    on_hold: 'On hold'
+    on_hold: 'On hold',
+    // @ts-expect-error waiting for new types from SDK
+    delivered: 'Delivered'
   }
 
   return dictionary[status]

packages/app/src/hooks/useShipmentToolbar.tsx

@@ -0,0 +1,56 @@
+import { useTriggerAttribute } from '#hooks/useTriggerAttribute'
+import { useViewStatus } from '#hooks/useViewStatus'
+import { isMockedId } from '#mocks'
+import { useEditMetadataOverlay } from '@commercelayer/app-elements'
+import type { PageHeadingToolbarProps } from '@commercelayer/app-elements/dist/ui/atoms/PageHeading/PageHeadingToolbar'
+import type { Shipment } from '@commercelayer/sdk'
+import type { FC } from 'react'
+
+export function useShipmentToolbar({ shipment }: { shipment: Shipment }): {
+  props: PageHeadingToolbarProps
+  /** Components to be mounted in page to supports actions in toolbar props (eg: overlays) */
+  Components: FC
+} {
+  const { trigger } = useTriggerAttribute(shipment.id)
+  const viewStatus = useViewStatus(shipment)
+
+  const { Overlay: EditMetadataOverlay, show: showEditMetadataOverlay } =
+    useEditMetadataOverlay()
+
+  const dropdownItems =
+    viewStatus.contextActions?.map((action) => ({
+      label: action.label,
+      onClick: () => {
+        if (action.triggerAttribute === '_create_parcel') {
+          return
+        }
+
+        void trigger(action.triggerAttribute)
+      }
+    })) ?? []
+
+  dropdownItems.push({
+    label: 'Set metadata',
+    onClick: () => {
+      showEditMetadataOverlay()
+    }
+  })
+
+  return {
+    Components: () => (
+      <>
+        {!isMockedId(shipment.id) && (
+          <EditMetadataOverlay
+            resourceType={shipment.type}
+            resourceId={shipment.id}
+            title='Edit metadata'
+            description={`Shipment #${shipment.number}`}
+          />
+        )}
+      </>
+    ),
+    props: {
+      dropdownItems: [dropdownItems]
+    }
+  }
+}

packages/app/src/mocks/index.ts

@@ -1,4 +1,4 @@
-import type { Resource } from '@commercelayer/sdk/lib/cjs/resource'
+import type { Resource } from '@commercelayer/sdk'
 
 export * from './resources/customers'
 export * from './resources/line_items'

packages/app/src/mocks/resource.ts

@@ -1,4 +1,4 @@
-import type { ResourceTypeLock } from '@commercelayer/sdk/lib/cjs/api'
+import type { ResourceTypeLock } from '@commercelayer/sdk'
 
 interface GenericResource<T> {
   readonly type: T

packages/app/src/pages/ShipmentDetails.tsx

@@ -1,11 +1,11 @@
 import { ShipmentAddresses } from '#components/ShipmentAddresses'
-import { ShipmentDetailsContextMenu } from '#components/ShipmentDetailsContextMenu'
 import { ShipmentInfo } from '#components/ShipmentInfo'
 import { ShipmentPackingList } from '#components/ShipmentPackingList'
 import { ShipmentSteps } from '#components/ShipmentSteps'
 import { ShipmentTimeline } from '#components/ShipmentTimeline'
 import { appRoutes } from '#data/routes'
 import { useShipmentDetails } from '#hooks/useShipmentDetails'
+import { useShipmentToolbar } from '#hooks/useShipmentToolbar'
 import { isMockedId } from '#mocks'
 import {
   Button,
@@ -35,6 +35,7 @@ export function ShipmentDetails(): JSX.Element {
   const shipmentId = params?.shipmentId ?? ''
 
   const { shipment, isLoading } = useShipmentDetails(shipmentId)
+  const pageToolbar = useShipmentToolbar({ shipment })
 
   if (shipmentId === undefined || !canUser('read', 'orders')) {
     return (
@@ -78,7 +79,7 @@ export function ShipmentDetails(): JSX.Element {
   return (
     <PageLayout
       mode={mode}
-      actionButton={<ShipmentDetailsContextMenu shipment={shipment} />}
+      toolbar={pageToolbar.props}
       title={
         <SkeletonTemplate isLoading={isLoading}>{pageTitle}</SkeletonTemplate>
       }
@@ -109,6 +110,7 @@ export function ShipmentDetails(): JSX.Element {
       gap='only-top'
     >
       <SkeletonTemplate isLoading={isLoading}>
+        <pageToolbar.Components />
         <Spacer bottom='4'>
           {!isMockedId(shipment.id) && (
             <Spacer top='6'>

packages/app/tsconfig.node.json

@@ -6,6 +6,6 @@
     "allowSyntheticDefaultImports": true
   },
   "include": [
-    "vite.config.ts"
+    "vite.config.mts"
   ]
 }