fix(dashboard): campaign UI improvements (#13723)

* fix(dashboard): campaign UI improvements

* fix: camel case translation key

packages/admin/dashboard/src/routes/campaigns/campaign-create/components/create-campaign-form/create-campaign-form.tsx

@@ -40,6 +40,7 @@ export const CreateCampaignForm = () => {
 
   const handleSubmit = form.handleSubmit(async (data) => {
     const attribute = data.budget.attribute || null
+
     const type = attribute ? "use_by_attribute" : data.budget.type
 
     await mutateAsync(

packages/admin/dashboard/src/routes/campaigns/campaign-detail/components/campaign-budget/campaign-budget.tsx

@@ -26,9 +26,9 @@ export const CampaignBudget = ({ campaign }: CampaignBudgetProps) => {
             level="h3"
           >
             {campaign.budget?.type === "use_by_attribute"
-              ? campaign.budget?.attribute === "customer_id"
-                ? t("campaigns.budget.fields.limitBudgetAttributeCustomer")
-                : t("campaigns.budget.fields.limitBudgetAttributeEmail")
+              ? t("campaigns.budget.fields.totalUsedByAttribute", {
+                  attribute: campaign.budget?.attribute,
+                })
               : t("campaigns.fields.budget_limit")}
           </Heading>
         </div>

packages/admin/dashboard/src/routes/campaigns/campaign-detail/components/campaign-spend/campaign-spend.tsx

@@ -20,9 +20,11 @@ export const CampaignSpend = ({ campaign }: CampaignSpendProps) => {
         </div>
 
         <Heading level="h3" className="text-ui-fg-subtle font-normal">
-          {campaign.budget?.type === "spend"
-            ? t("campaigns.fields.total_spend")
-            : t("campaigns.fields.total_used")}
+          {campaign.budget?.type === "use_by_attribute"
+            ? t("campaigns.fields.totalUsedByAttribute")
+            : campaign.budget?.type === "spend"
+              ? t("campaigns.fields.total_spend")
+              : t("campaigns.fields.total_used")}
         </Heading>
       </div>
 

packages/admin/dashboard/src/routes/campaigns/common/components/create-campaign-form-fields/create-campaign-form-fields.tsx

@@ -382,6 +382,10 @@ export const CreateCampaignFormFields = ({ form, fieldScope = "" }) => {
                           label: t("fields.email"),
                           value: "customer_email",
                         },
+                        {
+                          label: t("fields.promotionCode"),
+                          value: "promotion_code",
+                        },
                       ]}
                     ></Combobox>
                   </Form.Control>

packages/admin/dashboard/src/routes/promotions/promotion-add-campaign/components/add-campaign-promotion-form/campaign-details.tsx

@@ -3,6 +3,12 @@ import { Heading, Text } from "@medusajs/ui"
 import { Fragment } from "react"
 import { useTranslation } from "react-i18next"
 
+const translationKeyMap = {
+  spend: "spend",
+  usage: "usage",
+  use_by_attribute: "useByAttribute",
+}
+
 type CampaignDetailsProps = {
   campaign?: AdminCampaign
 }
@@ -77,7 +83,14 @@ export const CampaignDetails = ({ campaign }: CampaignDetailsProps) => {
           </Text>
 
           <div className="flex items-center gap-1">
-            <Text className="txt-small">{campaign.budget?.type || "-"}</Text>
+            <Text className="txt-small truncate">
+              {t(
+                `campaigns.budget.type.${translationKeyMap[campaign.budget?.type]}.title`,
+                {
+                  defaultValue: "-",
+                }
+              )}
+            </Text>
           </div>
         </div>
 
@@ -105,7 +118,9 @@ export const CampaignDetails = ({ campaign }: CampaignDetailsProps) => {
 
         <div className="text-ui-fg-subtle grid grid-cols-2 items-center py-1">
           <Text className="txt-small-plus">
-            {t("campaigns.budget.fields.used")}
+            {campaign.budget?.type === "use_by_attribute"
+              ? t("campaigns.fields.totalUsedByAttribute")
+              : t("campaigns.budget.fields.used")}
           </Text>
 
           <div className="flex items-center gap-1">