feat: add Set Metadata dropdown item in detail toolbar

commercelayer · Jun 27, 2024 · 82d5521 · 82d5521
1 parent 170ccc3
commit 82d5521
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 2 deletions.
diff --git a/packages/app/src/hooks/useOrderToolbar.tsx b/packages/app/src/hooks/useOrderToolbar.tsx
@@ -80,7 +80,8 @@ export function useOrderToolbar({
         ? [
             {
               label: dropdownItemsGroup[0].label,
-              onClick: dropdownItemsGroup[0].onClick
+              onClick: dropdownItemsGroup[0].onClick,
+              size: 'small'
             }
           ]
         : undefined,

diff --git a/packages/app/src/pages/OrderDetails.tsx b/packages/app/src/pages/OrderDetails.tsx
@@ -22,7 +22,9 @@ import {
   Spacer,
   formatDateWithPredicate,
   goBack,
-  useTokenProvider
+  useEditMetadataOverlay,
+  useTokenProvider,
+  type DropdownItemProps
 } from '@commercelayer/app-elements'
 import { useLocation, useRoute } from 'wouter'
 
@@ -40,6 +42,23 @@ function OrderDetails(): JSX.Element {
   const { order, isLoading, error } = useOrderDetails(orderId)
   const { returns, isLoadingReturns } = useOrderReturns(orderId)
   const toolbar = useOrderToolbar({ order })
+  const { Overlay: EditMetadataOverlay, show: showEditMetadataOverlay } =
+    useEditMetadataOverlay()
+  if (canUser('update', 'orders')) {
+    const setMetadataDropDownItem: DropdownItemProps = {
+      label: 'Set metadata',
+      onClick: () => {
+        showEditMetadataOverlay()
+      }
+    }
+    if (toolbar.dropdownItems != null) {
+      toolbar.dropdownItems[toolbar.dropdownItems.length - 1]?.push(
+        setMetadataDropDownItem
+      )
+    } else {
+      toolbar.dropdownItems = [[setMetadataDropDownItem]]
+    }
+  }
 
   if (orderId === undefined || !canUser('read', 'orders') || error != null) {
     return (
@@ -178,6 +197,13 @@ function OrderDetails(): JSX.Element {
               <Timeline order={order} />
             </Spacer>
           )}
+          {!isMockedId(order.id) && (
+            <EditMetadataOverlay
+              resourceType={order.type}
+              resourceId={order.id}
+              title={pageTitle}
+            />
+          )}
         </Spacer>
       </SkeletonTemplate>
     </PageLayout>