feat: add delete promotion button

packages/app/src/data/ruleBuilder/config.tsx

@@ -18,35 +18,45 @@ export function usePromotionRules(promotion: Promotion) {
     data: ReturnType<typeof toFormLabels>
   }>({ isLoading: true, data: null })
   useEffect(() => {
-    promotion.promotion_rules?.forEach((promotionRule) => {
-      const formLabels = toFormLabels(promotionRule)
+    if (
+      promotion.promotion_rules == null ||
+      promotion.promotion_rules.length === 0
+    ) {
+      setOutput({
+        isLoading: false,
+        data: null
+      })
+    } else {
+      promotion.promotion_rules.forEach((promotionRule) => {
+        const formLabels = toFormLabels(promotionRule)
 
-      const data =
-        formLabels?.flatMap(async (formLabel) => {
-          if (formLabel.rel == null) {
-            return formLabel
-          }
+        const data =
+          formLabels?.flatMap(async (formLabel) => {
+            if (formLabel.rel == null) {
+              return formLabel
+            }
 
-          const promise = sdkClient[formLabel.rel]
-            .list({
-              filters: { id_in: formLabel.value.split(',').join(',') }
-            })
-            .then((data) => data.map((d) => d.name))
-            .then((values) => ({
-              ...formLabel,
-              value: values.join(',')
-            }))
+            const promise = sdkClient[formLabel.rel]
+              .list({
+                filters: { id_in: formLabel.value.split(',').join(',') }
+              })
+              .then((data) => data.map((d) => d.name))
+              .then((values) => ({
+                ...formLabel,
+                value: values.join(',')
+              }))
 
-          return await promise
-        }) ?? []
+            return await promise
+          }) ?? []
 
-      void Promise.all(data).then((data) => {
-        setOutput({
-          isLoading: false,
-          data
+        void Promise.all(data).then((data) => {
+          setOutput({
+            isLoading: false,
+            data
+          })
         })
       })
-    })
+    }
   }, [promotion])
 
   return output

packages/app/src/hooks/useDeleteOverlay.tsx

@@ -0,0 +1,53 @@
+import type { Promotion } from '#data/dictionaries/promotion'
+import { appRoutes } from '#data/routes'
+import {
+  Button,
+  PageHeading,
+  useCoreSdkProvider,
+  useOverlay
+} from '@commercelayer/app-elements'
+import { useLocation } from 'wouter'
+
+interface OverlayHook {
+  show: () => void
+  Overlay: React.FC<{ promotion: Promotion }>
+}
+
+export function useDeleteOverlay(): OverlayHook {
+  const { Overlay: OverlayElement, open, close } = useOverlay()
+  const { sdkClient } = useCoreSdkProvider()
+  const [, setLocation] = useLocation()
+
+  return {
+    show: open,
+    Overlay: ({ promotion }) => {
+      return (
+        <OverlayElement>
+          <PageHeading
+            title={`Confirm that you want to cancel the promotion ${promotion.name}`}
+            navigationButton={{
+              onClick: () => {
+                close()
+              },
+              label: 'Cancel',
+              icon: 'x'
+            }}
+            description='This action cannot be undone, proceed with caution.'
+          />
+
+          <Button
+            variant='danger'
+            fullWidth
+            onClick={() => {
+              void sdkClient[promotion.type].delete(promotion.id).then(() => {
+                setLocation(appRoutes.home.makePath({}))
+              })
+            }}
+          >
+            Delete
+          </Button>
+        </OverlayElement>
+      )
+    }
+  }
+}

packages/app/src/pages/PromotionDetailsPage.tsx

@@ -1,6 +1,7 @@
 import type { Promotion } from '#data/dictionaries/promotion'
 import { appRoutes } from '#data/routes'
-import { getCurrencyCodes, usePromotionRules } from '#data/ruleBuilder/config'
+import { usePromotionRules } from '#data/ruleBuilder/config'
+import { useDeleteOverlay } from '#hooks/useDeleteOverlay'
 import { usePromotion } from '#hooks/usePromotion'
 import {
   Badge,
@@ -20,6 +21,7 @@ import {
   formatDateRange,
   formatDateWithPredicate,
   getPromotionDisplayStatus,
+  goBack,
   useCoreSdkProvider,
   useTokenProvider
 } from '@commercelayer/app-elements'
@@ -38,7 +40,9 @@ function Page(
   const { promotion, isLoading } = usePromotion(props.params.promotionId)
   const { data: rules } = usePromotionRules(promotion)
 
-  console.log('available currency codes', getCurrencyCodes(promotion))
+  const { show: showDeleteOverlay, Overlay: DeleteOverlay } = useDeleteOverlay()
+
+  // console.log('available currency codes', getCurrencyCodes(promotion))
 
   return (
     <PageLayout
@@ -60,20 +64,31 @@ function Page(
                   })
                 )
               }}
+            />,
+            <DropdownItem
+              key='delete'
+              label='Delete'
+              onClick={() => {
+                showDeleteOverlay()
+              }}
             />
           ]}
         />
       }
       mode={mode}
       gap='only-top'
       navigationButton={{
-        label: 'All promotions',
+        label: 'Back',
         onClick() {
-          setLocation(appRoutes.list.makePath({}))
+          goBack({
+            setLocation,
+            defaultRelativePath: appRoutes.home.makePath({})
+          })
         }
       }}
     >
       <SkeletonTemplate isLoading={isLoading}>
+        <DeleteOverlay promotion={promotion} />
         <Spacer top='14'>
           <CardStatus promotionId={props.params.promotionId} />
         </Spacer>