Merge pull request #169 from commercelayer/update-elements

Update app-elements to 2.x

packages/app/package.json

@@ -15,8 +15,8 @@
     "prepare": "touch ./public/config.local.js"
   },
   "dependencies": {
-    "@commercelayer/app-elements": "^1.24.3",
-    "@commercelayer/sdk": "5.38.0",
+    "@commercelayer/app-elements": "^2.0.1",
+    "@commercelayer/sdk": "^6.3.0",
     "@hookform/resolvers": "^3.3.4",
     "lodash": "^4.17.21",
     "react": "^18.2.0",

packages/app/src/components/OrderDetailsContextMenu.tsx → packages/app/src/hooks/useOrderToolbar.tsx

@@ -1,23 +1,25 @@
+import {
+  getTriggerAttributeName,
+  getTriggerAttributes
+} from '#components/OrderSummary/orderDictionary'
 import { appRoutes } from '#data/routes'
 import { useMarketInventoryModel } from '#hooks/useMarketInventoryModel'
 import { useReturnableList } from '#hooks/useReturnableList'
 import { useTriggerAttribute } from '#hooks/useTriggerAttribute'
 import {
-  Button,
-  Dropdown,
-  DropdownItem,
-  Icon,
-  useTokenProvider
+  useTokenProvider,
+  type DropdownItemProps
 } from '@commercelayer/app-elements'
+import type { PageHeadingToolbarProps } from '@commercelayer/app-elements/dist/ui/atoms/PageHeading/PageHeadingToolbar'
 import { type Order } from '@commercelayer/sdk'
-import { useMemo, type FC } from 'react'
+import { useMemo } from 'react'
 import { useLocation } from 'wouter'
-import {
-  getTriggerAttributeName,
-  getTriggerAttributes
-} from './OrderSummary/orderDictionary'
 
-export const OrderDetailsContextMenu: FC<{ order: Order }> = ({ order }) => {
+export function useOrderToolbar({
+  order
+}: {
+  order: Order
+}): PageHeadingToolbarProps {
   const { canUser } = useTokenProvider()
   const [, setLocation] = useLocation()
   const { inventoryModel } = useMarketInventoryModel(order.market?.id)
@@ -30,16 +32,17 @@ export const OrderDetailsContextMenu: FC<{ order: Order }> = ({ order }) => {
     orderReturnStockLocation.length > 0 &&
     returnableLineItems.length > 0
 
-  const createReturnDropDownItem = useMemo(() => {
-    return showReturnDropDownItem ? (
-      <DropdownItem
-        key='request-return'
-        label='Request return'
-        onClick={() => {
-          setLocation(appRoutes.return.makePath({ orderId: order.id }))
-        }}
-      />
-    ) : undefined
+  const createReturnDropDownItem = useMemo<
+    DropdownItemProps | undefined
+  >(() => {
+    return showReturnDropDownItem
+      ? {
+          label: 'Request return',
+          onClick: () => {
+            setLocation(appRoutes.return.makePath({ orderId: order.id }))
+          }
+        }
+      : undefined
   }, [order, returnableLineItems, showReturnDropDownItem])
 
   const { dispatch } = useTriggerAttribute(order.id)
@@ -51,38 +54,39 @@ export const OrderDetailsContextMenu: FC<{ order: Order }> = ({ order }) => {
     )
   }, [order])
 
-  const triggerDropDownItems = triggerMenuActions.map((triggerAttribute) => (
-    <DropdownItem
-      key={triggerAttribute}
-      label={getTriggerAttributeName(triggerAttribute)}
-      onClick={() => {
+  const triggerDropDownItems: DropdownItemProps[] = triggerMenuActions.map(
+    (triggerAttribute) => ({
+      label: getTriggerAttributeName(triggerAttribute),
+      onClick: () => {
         // refund action has its own form page
         if (triggerAttribute === '_refund') {
           setLocation(appRoutes.refund.makePath({ orderId: order.id }))
           return
         }
 
         void dispatch(triggerAttribute)
-      }}
-    />
-  ))
+      }
+    })
+  )
 
-  if (!showReturnDropDownItem && triggerMenuActions.length === 0) {
-    return null
-  }
+  const dropdownItemsGroup: DropdownItemProps[] =
+    createReturnDropDownItem != null
+      ? [createReturnDropDownItem, ...triggerDropDownItems]
+      : [...triggerDropDownItems]
 
-  return (
-    <>
-      <Dropdown
-        dropdownLabel={
-          <Button variant='secondary' size='small'>
-            <Icon name='dotsThree' size={16} weight='bold' />
-          </Button>
-        }
-        dropdownItems={[createReturnDropDownItem, ...triggerDropDownItems]}
-      />
-    </>
-  )
+  return {
+    buttons:
+      dropdownItemsGroup.length === 1 && dropdownItemsGroup[0] != null
+        ? [
+            {
+              label: dropdownItemsGroup[0].label,
+              onClick: dropdownItemsGroup[0].onClick
+            }
+          ]
+        : undefined,
+    dropdownItems:
+      dropdownItemsGroup.length === 1 ? undefined : [dropdownItemsGroup]
+  }
 }
 
 type UITriggerAttributes = Parameters<typeof getTriggerAttributeName>[0]

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/OrderDetails.tsx

@@ -1,6 +1,5 @@
 import { OrderAddresses } from '#components/OrderAddresses'
 import { OrderCustomer } from '#components/OrderCustomer'
-import { OrderDetailsContextMenu } from '#components/OrderDetailsContextMenu'
 import { OrderPayment } from '#components/OrderPayment'
 import { OrderReturns } from '#components/OrderReturns'
 import { OrderShipments } from '#components/OrderShipments'
@@ -10,6 +9,7 @@ import { Timeline } from '#components/Timeline'
 import { appRoutes } from '#data/routes'
 import { useOrderDetails } from '#hooks/useOrderDetails'
 import { useOrderReturns } from '#hooks/useOrderReturns'
+import { useOrderToolbar } from '#hooks/useOrderToolbar'
 import { isMockedId } from '#mocks'
 import { getOrderTitle } from '#utils/getOrderTitle'
 import {
@@ -39,6 +39,7 @@ function OrderDetails(): JSX.Element {
 
   const { order, isLoading, error } = useOrderDetails(orderId)
   const { returns, isLoadingReturns } = useOrderReturns(orderId)
+  const toolbar = useOrderToolbar({ order })
 
   if (orderId === undefined || !canUser('read', 'orders') || error != null) {
     return (
@@ -82,7 +83,7 @@ function OrderDetails(): JSX.Element {
   return (
     <PageLayout
       mode={mode}
-      actionButton={<OrderDetailsContextMenu order={order} />}
+      toolbar={toolbar}
       title={
         <SkeletonTemplate isLoading={isLoading}>{pageTitle}</SkeletonTemplate>
       }

packages/app/src/pages/OrderList.tsx

@@ -74,6 +74,7 @@ function OrderList(): JSX.Element {
               fields: ['order.*', 'billing_address.*', 'market.*']
             }
           }}
+          hideTitle={viewTitle === presets.pending.viewTitle}
           emptyState={
             <ListEmptyState
               scope={