chore(promotion): toast error messages on promotion errors (#7897)

packages/admin-next/dashboard/src/i18n/translations/en.json

@@ -1137,7 +1137,11 @@
       "campaignType": "Select the currency code in the promotion tab to enable it."
     },
     "errors": {
-      "requiredField": "Required field"
+      "requiredField": "Required field",
+      "promotionTabError": "Fix errors in Promotion Tab before proceeding"
+    },
+    "toasts": {
+      "promotionCreateSuccess": "Promotion ({{code}}) was successfully created."
     },
     "create": {},
     "edit": {

packages/admin-next/dashboard/src/routes/promotions/promotion-create/components/create-promotion-form/create-promotion-form.tsx

@@ -10,6 +10,7 @@ import {
   ProgressTabs,
   RadioGroup,
   Text,
+  toast,
 } from "@medusajs/ui"
 import { useEffect, useMemo, useState } from "react"
 import { useForm, useWatch } from "react-hook-form"
@@ -121,21 +122,48 @@ export const CreatePromotionForm = () => {
           }))
       }
 
-      createPromotion({
+      createPromotion(
-        ...promotionData,
+        {
-        rules: buildRulesData(rules),
+          ...promotionData,
-        application_method: {
+          rules: buildRulesData(rules),
-          ...applicationMethodData,
+          application_method: {
-          ...applicationMethodRuleData,
+            ...applicationMethodData,
-          target_rules: buildRulesData(targetRulesData),
+            ...applicationMethodRuleData,
-          buy_rules: buildRulesData(buyRulesData),
+            target_rules: buildRulesData(targetRulesData),
+            buy_rules: buildRulesData(buyRulesData),
+          },
+          is_automatic: is_automatic === "true",
         },
-        is_automatic: is_automatic === "true",
+        {
-      }).then(() => handleSuccess())
+          onSuccess: ({ promotion }) => {
+            toast.success(t("general.success"), {
+              description: t("promotions.toasts.promotionCreateSuccess", {
+                code: promotion.code,
+              }),
+              dismissLabel: t("actions.close"),
+            })
+
+            handleSuccess()
+          },
+          onError: (e) => {
+            toast.error(t("general.error"), {
+              description: e.message,
+              dismissLabel: t("actions.close"),
+            })
+          },
+        }
+      )
     },
     async (error) => {
-      // TODO: showcase error when something goes wrong
+      const { campaign, ...rest } = error || {}
-      // Wait for alert component and use it here
+      const errorInPromotionTab = !!Object.keys(rest || {}).length
+
+      if (errorInPromotionTab) {
+        toast.error(t("general.error"), {
+          description: t("promotions.errors.promotionTabError"),
+          dismissLabel: t("general.close"),
+        })
+      }
     }
   )