@medusajs/dashboard 3.0.0-snapshot-20250410112222 → 3.0.0-snapshot-20251104011621

package/src/routes/products/product-media/components/product-media-gallery/product-media-gallery.tsx

@@ -90,7 +90,7 @@ export const ProductMediaGallery = ({ product }: ProductMediaGalleryProps) => {
     const mediaToKeep =
       product.images
         ?.filter((i) => i.id !== current.id)
-        .map((i) => ({ url: i.url })) || []
+        .map((i) => ({ id: i.id, url: i.url })) || []
 
     if (curr === media.length - 1) {
       setCurr((prev) => prev - 1)
@@ -261,7 +261,7 @@ const Preview = ({
         type="button"
         onClick={prev}
       >
-        <TriangleLeftMini />
+        <TriangleLeftMini className="rtl:rotate-180" />
       </IconButton>
       <div className="flex items-center gap-x-2">
         {visibleItems.map((item) => {
@@ -292,7 +292,7 @@ const Preview = ({
         type="button"
         onClick={next}
       >
-        <TriangleRightMini />
+        <TriangleRightMini className="rtl:rotate-180" />
       </IconButton>
     </div>
   )

package/src/routes/products/product-stock/hooks/use-product-stock-columns.tsx

@@ -192,7 +192,8 @@ export const useProductStockColumns = (
                     return (
                       <div className="flex size-full items-center gap-x-2">
                         <Switch
-                          className="shrink-0 cursor-not-allowed"
+                          dir="ltr"
+                          className="shrink-0 cursor-not-allowed rtl:rotate-180"
                           tabIndex={-1}
                           size="small"
                           checked={checked}

package/src/routes/profile/profile-edit/components/edit-profile-form/edit-profile-form.tsx

@@ -10,6 +10,7 @@ import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
 import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
 import { useUpdateUser } from "../../../../../hooks/api/users"
 import { languages } from "../../../../../i18n/languages"
+import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 type EditProfileProps = {
   user: HttpTypes.AdminUser
@@ -26,7 +27,7 @@ const EditProfileSchema = zod.object({
 export const EditProfileForm = ({ user }: EditProfileProps) => {
   const { t, i18n } = useTranslation()
   const { handleSuccess } = useRouteModal()
-
+  const direction = useDocumentDirection()
   const form = useForm<zod.infer<typeof EditProfileSchema>>({
     defaultValues: {
       first_name: user.first_name ?? "",
@@ -111,7 +112,11 @@ export const EditProfileForm = ({ user }: EditProfileProps) => {
                   </div>
                   <div>
                     <Form.Control>
-                      <Select {...field} onValueChange={field.onChange}>
+                      <Select
+                        dir={direction}
+                        {...field}
+                        onValueChange={field.onChange}
+                      >
                         <Select.Trigger ref={ref} className="py-1 text-[13px]">
                           <Select.Value
                             placeholder={t("profile.edit.languagePlaceholder")}
@@ -151,7 +156,8 @@ export const EditProfileForm = ({ user }: EditProfileProps) => {
                       {t("profile.fields.usageInsightsLabel")}
                     </Form.Label>
                     <Form.Control>
-                      <Switch
+                      <Switch dir="ltr"
+                        className="rtl:rotate-180"
                         {...rest}
                         checked={value}
                         onCheckedChange={onChange}

package/src/routes/promotions/common/edit-rules/components/edit-rules-form/edit-rules-form.tsx

@@ -28,7 +28,13 @@ export const EditRulesForm = ({
   const [rulesToRemove, setRulesToRemove] = useState([])
 
   const form = useForm<EditRulesType>({
-    defaultValues: { rules: [], type: promotion.type },
+    defaultValues: {
+      rules: [],
+      type: promotion.type,
+      application_method: {
+        target_type: promotion.application_method?.target_type,
+      },
+    },
     resolver: zodResolver(EditRules),
   })
 
@@ -47,6 +53,7 @@ export const EditRulesForm = ({
             setRulesToRemove={setRulesToRemove}
             rulesToRemove={rulesToRemove}
             promotion={promotion}
+            formType="edit"
           />
         </RouteDrawer.Body>
 

package/src/routes/promotions/common/edit-rules/components/edit-rules-form/form-schema.ts

@@ -24,6 +24,9 @@ export const EditRules = z.object({
       field_type: z.string().optional(),
     })
   ),
+  application_method: z.object({
+    target_type: z.enum(["order", "shipping_methods", "items"]),
+  }),
 })
 
 export type EditRulesType = z.infer<typeof EditRules>

package/src/routes/promotions/common/edit-rules/components/rule-value-form-field/rule-value-form-field.tsx

@@ -1,9 +1,16 @@
-import { HttpTypes } from "@medusajs/types"
+import {
+  ApplicationMethodTargetTypeValues,
+  HttpTypes,
+  RuleTypeValues,
+} from "@medusajs/types"
 import { Input } from "@medusajs/ui"
 import { useWatch } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+import { useEffect } from "react"
+
 import { Form } from "../../../../../../components/common/form"
 import { Combobox } from "../../../../../../components/inputs/combobox"
-import { useStore } from "../../../../../../hooks/api/store"
+import { useStore } from "../../../../../../hooks/api"
 import { useComboboxData } from "../../../../../../hooks/use-combobox-data"
 import { sdk } from "../../../../../../lib/client"
 
@@ -18,7 +25,8 @@ type RuleValueFormFieldType = {
   operator: string
   fieldRule: any
   attributes: HttpTypes.AdminRuleAttributeOption[]
-  ruleType: "rules" | "target-rules" | "buy-rules"
+  ruleType: RuleTypeValues
+  applicationMethodTargetType: ApplicationMethodTargetTypeValues | undefined
 }
 
 const buildFilters = (attribute?: string, store?: HttpTypes.AdminStore) => {
@@ -44,7 +52,10 @@ export const RuleValueFormField = ({
   fieldRule,
   attributes,
   ruleType,
+  applicationMethodTargetType,
 }: RuleValueFormFieldType) => {
+  const { t } = useTranslation()
+
   const attribute = attributes?.find(
     (attr) => attr.value === fieldRule.attribute
   )
@@ -59,6 +70,7 @@ export const RuleValueFormField = ({
         {
           ...params,
           ...buildFilters(attribute?.id, store!),
+          application_method_target_type: applicationMethodTargetType,
         }
       )
     },
@@ -75,6 +87,23 @@ export const RuleValueFormField = ({
     name: operator,
   })
 
+  useEffect(() => {
+    const hasDirtyRules = Object.keys(form.formState.dirtyFields).length > 0
+
+    /**
+     * Don't reset values if fileds didn't change - this is to prevent reset of form on initial render when editing an existing rule
+     */
+    if (!hasDirtyRules) {
+      return
+    }
+
+    if (watchOperator === "eq") {
+      form.setValue(name, "")
+    } else {
+      form.setValue(name, [])
+    }
+  }, [watchOperator])
+
   return (
     <Form.Field
       key={`${identifier}.${scope}.${name}-${fieldRule.attribute}`}
@@ -119,11 +148,13 @@ export const RuleValueFormField = ({
                 <Combobox
                   {...field}
                   {...comboboxData}
-                  multiple={watchOperator !== "eq"}
                   ref={ref}
                   placeholder={
-                    watchOperator === "eq" ? "Select Value" : "Select Values"
+                    watchOperator === "eq"
+                      ? t("labels.selectValue")
+                      : t("labels.selectValues")
                   }
+                  disabled={!watchOperator}
                   onChange={onChange}
                 />
               </Form.Control>

package/src/routes/promotions/common/edit-rules/components/rules-form-field/rules-form-field.tsx

@@ -1,7 +1,7 @@
 import { XMarkMini } from "@medusajs/icons"
 import { PromotionDTO } from "@medusajs/types"
 import { Badge, Button, Heading, IconButton, Select, Text } from "@medusajs/ui"
-import { forwardRef, Fragment, useEffect } from "react"
+import { forwardRef, Fragment, useEffect, useRef } from "react"
 import {
   ControllerRenderProps,
   useFieldArray,
@@ -14,6 +14,7 @@ import {
   usePromotionRuleAttributes,
   usePromotionRules,
 } from "../../../../../../hooks/api/promotions"
+import { useDocumentDirection } from "../../../../../../hooks/use-document-direction"
 import { CreatePromotionSchemaType } from "../../../../promotion-create/components/create-promotion-form/form-schema"
 import { generateRuleAttributes } from "../edit-rules-form/utils"
 import { RuleValueFormField } from "../rule-value-form-field"
@@ -29,6 +30,7 @@ type RulesFormFieldType = {
     | "application_method.buy_rules"
     | "rules"
     | "application_method.target_rules"
+  formType?: "create" | "edit"
 }
 
 export const RulesFormField = ({
@@ -38,10 +40,18 @@ export const RulesFormField = ({
   rulesToRemove,
   scope = "rules",
   promotion,
+  formType = "create",
 }: RulesFormFieldType) => {
+  const initialRulesSet = useRef(false)
+
   const { t } = useTranslation()
+  const direction = useDocumentDirection()
   const formData = form.getValues()
-  const { attributes } = usePromotionRuleAttributes(ruleType, formData.type)
+  const { attributes } = usePromotionRuleAttributes(
+    ruleType,
+    formData.type,
+    formData.application_method?.target_type
+  )
 
   const { fields, append, remove, update, replace } = useFieldArray({
     control: form.control,
@@ -61,10 +71,17 @@ export const RulesFormField = ({
     defaultValue: promotion?.application_method?.type,
   })
 
+  const applicationMethodTargetType = useWatch({
+    control: form.control,
+    name: "application_method.target_type",
+    defaultValue: promotion?.application_method?.target_type,
+  })
+
   const query: Record<string, string> = promotionType
     ? {
         promotion_type: promotionType,
         application_method_type: applicationMethodType,
+        application_method_target_type: applicationMethodTargetType,
       }
     : {}
 
@@ -82,6 +99,14 @@ export const RulesFormField = ({
       return
     }
 
+    /**
+     * This effect sets rules after mount but since it is reused in create and edit flows, prevent this hook from recreating rules
+     * when fields are intentionally set to empty (e.g. "Clear all" is pressed).
+     */
+    if (!fields.length && formType === "edit" && initialRulesSet.current) {
+      return
+    }
+
     if (ruleType === "rules" && !fields.length) {
       form.resetField("rules")
 
@@ -107,11 +132,14 @@ export const RulesFormField = ({
 
       replace(generateRuleAttributes(rulesToAppend) as any)
     }
+
+    initialRulesSet.current = true
   }, [
     promotionType,
     isLoading,
     ruleType,
     fields.length,
+    formType,
     form,
     replace,
     rules,
@@ -121,14 +149,22 @@ export const RulesFormField = ({
   return (
     <div className="flex flex-col">
       <Heading level="h2" className="mb-2">
-        {t(`promotions.fields.conditions.${ruleType}.title`)}
+        {t(
+          ruleType === "target-rules"
+            ? `promotions.fields.conditions.${ruleType}.${applicationMethodTargetType}.title`
+            : `promotions.fields.conditions.${ruleType}.title`
+        )}
       </Heading>
 
       <Text className="text-ui-fg-subtle txt-small mb-6">
-        {t(`promotions.fields.conditions.${ruleType}.description`)}
+        {t(
+          ruleType === "target-rules"
+            ? `promotions.fields.conditions.${ruleType}.${applicationMethodTargetType}.description`
+            : `promotions.fields.conditions.${ruleType}.description`
+        )}
       </Text>
 
-      {fields.map((fieldRule: any, index) => {
+      {fields.map((fieldRule, index) => {
         const identifier = fieldRule.id
 
         return (
@@ -157,11 +193,23 @@ export const RulesFormField = ({
                         (ao) => ao.id === e
                       )
 
-                      update(index, {
+                      const fieldRuleOverrides: typeof fieldRule = {
                         ...fieldRule,
-                        values: [],
                         disguised: currentAttributeOption?.disguised || false,
-                      })
+                      }
+
+                      if (currentAttributeOption?.operators?.length === 1) {
+                        fieldRuleOverrides.operator =
+                          currentAttributeOption.operators[0].value
+                      }
+
+                      if (fieldRuleOverrides.operator === "eq") {
+                        fieldRuleOverrides.values = ""
+                      } else {
+                        fieldRuleOverrides.values = []
+                      }
+
+                      update(index, fieldRuleOverrides)
                       onChange(e)
                     }
 
@@ -178,6 +226,7 @@ export const RulesFormField = ({
                         <Form.Control>
                           {!disabled ? (
                             <Select
+                              dir={direction}
                               {...fieldProps}
                               onValueChange={onValueChange}
                               disabled={fieldRule.required}
@@ -248,6 +297,7 @@ export const RulesFormField = ({
                           <Form.Control>
                             {!disabled ? (
                               <Select
+                                dir= {direction}
                                 {...fieldProps}
                                 disabled={!fieldRule.attribute}
                                 onValueChange={onChange}
@@ -295,6 +345,7 @@ export const RulesFormField = ({
                     fieldRule={fieldRule}
                     attributes={attributes}
                     ruleType={ruleType}
+                    applicationMethodTargetType={applicationMethodTargetType}
                   />
                 </div>
               </div>

package/src/routes/promotions/promotion-add-campaign/components/add-campaign-promotion-form/add-campaign-promotion-form.tsx

@@ -1,9 +1,9 @@
 import { zodResolver } from "@hookform/resolvers/zod"
 import { AdminCampaign, AdminPromotion } from "@medusajs/types"
-import { Button, RadioGroup, Select, Text, toast } from "@medusajs/ui"
+import { Button, RadioGroup, toast } from "@medusajs/ui"
 import { useEffect } from "react"
 import { useForm, useWatch } from "react-hook-form"
-import { Trans, useTranslation } from "react-i18next"
+import { useTranslation } from "react-i18next"
 import * as zod from "zod"
 import { Form } from "../../../../../components/common/form"
 import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
@@ -11,10 +11,14 @@ import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
 import { useUpdatePromotion } from "../../../../../hooks/api/promotions"
 import { CreateCampaignFormFields } from "../../../../campaigns/common/components/create-campaign-form-fields"
 import { CampaignDetails } from "./campaign-details"
+import { sdk } from "../../../../../lib/client"
+import { useComboboxData } from "../../../../../hooks/use-combobox-data"
+import { Combobox } from "../../../../../components/inputs/combobox"
+import { useCampaign } from "../../../../../hooks/api/campaigns"
+import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 type EditPromotionFormProps = {
   promotion: AdminPromotion
-  campaigns: AdminCampaign[]
 }
 
 const EditPromotionSchema = zod.object({
@@ -24,14 +28,16 @@ const EditPromotionSchema = zod.object({
 
 export const AddCampaignPromotionFields = ({
   form,
-  campaigns,
   withNewCampaign = true,
+  promotionCurrencyCode,
 }: {
   form: any
-  campaigns: AdminCampaign[]
   withNewCampaign?: boolean
+  promotionCurrencyCode?: string
 }) => {
   const { t } = useTranslation()
+  const direction = useDocumentDirection()
+
   const watchCampaignId = useWatch({
     control: form.control,
     name: "campaign_id",
@@ -42,7 +48,30 @@ export const AddCampaignPromotionFields = ({
     name: "campaign_choice",
   })
 
-  const selectedCampaign = campaigns.find((c) => c.id === watchCampaignId)
+  const campaignsCombobox = useComboboxData({
+    queryFn: (params) =>
+      sdk.admin.campaign.list({
+        ...params,
+      }),
+    queryKey: ["campaigns"],
+    getOptions: (data) =>
+      data.campaigns.map((campaign) => ({
+        label: campaign.name.toUpperCase(),
+        value: campaign.id,
+        disabled:
+          campaign.budget?.currency_code &&
+          campaign.budget?.currency_code?.toLowerCase() !==
+            promotionCurrencyCode?.toLowerCase(), // also cannot add promotion which doesn't have currency defined to a campaign with a currency amount budget
+      })),
+  })
+
+  const { campaign: selectedCampaign } = useCampaign(
+    watchCampaignId as string,
+    undefined,
+    {
+      enabled: !!watchCampaignId,
+    }
+  )
 
   return (
     <div className="flex flex-col gap-y-8">
@@ -56,6 +85,7 @@ export const AddCampaignPromotionFields = ({
 
               <Form.Control>
                 <RadioGroup
+                  dir={direction}
                   className="grid grid-cols-1 gap-3"
                   {...field}
                   value={field.value}
@@ -97,54 +127,24 @@ export const AddCampaignPromotionFields = ({
         <Form.Field
           control={form.control}
           name="campaign_id"
-          render={({ field: { onChange, ref, ...field } }) => {
+          render={({ field: { onChange, ...field } }) => {
             return (
               <Form.Item>
-                <Form.Label>
+                <Form.Label tooltip={t("campaigns.fields.campaign_id.hint")}>
                   {t("promotions.form.campaign.existing.title")}
                 </Form.Label>
 
                 <Form.Control>
-                  <Select onValueChange={onChange} {...field}>
-                    <Select.Trigger ref={ref}>
-                      <Select.Value />
-                    </Select.Trigger>
-
-                    <Select.Content>
-                      {!campaigns.length && (
-                        <div className="flex h-[120px] flex-col items-center justify-center gap-2 p-2">
-                          <span className="txt-small text-ui-fg-subtle font-medium">
-                            {t(
-                              "promotions.form.campaign.existing.placeholder.title"
-                            )}
-                          </span>
-                          <span className="txt-small text-ui-fg-muted">
-                            {t(
-                              "promotions.form.campaign.existing.placeholder.desc"
-                            )}
-                          </span>
-                        </div>
-                      )}
-                      {campaigns.map((c) => (
-                        <Select.Item key={c.id} value={c.id}>
-                          {c.name?.toUpperCase()}
-                        </Select.Item>
-                      ))}
-                    </Select.Content>
-                  </Select>
+                  <Combobox
+                    dir={direction}
+                    options={campaignsCombobox.options}
+                    searchValue={campaignsCombobox.searchValue}
+                    onSearchValueChange={campaignsCombobox.onSearchValueChange}
+                    onChange={onChange}
+                    {...field}
+                  ></Combobox>
                 </Form.Control>
 
-                <Text
-                  size="small"
-                  leading="compact"
-                  className="text-ui-fg-subtle"
-                >
-                  <Trans
-                    t={t}
-                    i18nKey="campaigns.fields.campaign_id.hint"
-                    components={[<br key="break" />]}
-                  />
-                </Text>
                 <Form.ErrorMessage />
               </Form.Item>
             )
@@ -156,14 +156,13 @@ export const AddCampaignPromotionFields = ({
         <CreateCampaignFormFields form={form} fieldScope="campaign." />
       )}
 
-      <CampaignDetails campaign={selectedCampaign} />
+      <CampaignDetails campaign={selectedCampaign as AdminCampaign} />
     </div>
   )
 }
 
 export const AddCampaignPromotionForm = ({
   promotion,
-  campaigns,
 }: EditPromotionFormProps) => {
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
@@ -221,8 +220,8 @@ export const AddCampaignPromotionForm = ({
         <RouteDrawer.Body className="size-full overflow-auto">
           <AddCampaignPromotionFields
             form={form}
-            campaigns={campaigns}
             withNewCampaign={false}
+            promotionCurrencyCode={promotion.application_method?.currency_code}
           />
         </RouteDrawer.Body>
 

package/src/routes/promotions/promotion-add-campaign/components/add-campaign-promotion-form/campaign-details.tsx

@@ -3,6 +3,27 @@ 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",
+}
+
+const getTranslationKey = (budget: AdminCampaign["budget"]) => {
+  const translationKey = translationKeyMap[budget?.type] || "-"
+
+  if (budget?.type === "use_by_attribute") {
+    if (budget?.attribute === "customer_id") {
+      return `campaigns.budget.type.useByAttribute.titleCustomerId`
+    } else if (budget?.attribute === "customer_email") {
+      return `campaigns.budget.type.useByAttribute.titleEmail`
+    }
+    return `campaigns.budget.type.useByAttribute.title`
+  }
+
+  return `campaigns.budget.type.${translationKey}.title`
+}
+
 type CampaignDetailsProps = {
   campaign?: AdminCampaign
 }
@@ -77,7 +98,11 @@ 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(getTranslationKey(campaign.budget), {
+                defaultValue: "-",
+              })}
+            </Text>
           </div>
         </div>
 
@@ -105,7 +130,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">

package/src/routes/promotions/promotion-add-campaign/promotion-add-campaign.tsx

@@ -3,7 +3,6 @@ import { useTranslation } from "react-i18next"
 import { useParams } from "react-router-dom"
 
 import { RouteDrawer } from "../../../components/modals"
-import { useCampaigns } from "../../../hooks/api/campaigns"
 import { usePromotion } from "../../../hooks/api/promotions"
 import { AddCampaignPromotionForm } from "./components/add-campaign-promotion-form"
 
@@ -12,24 +11,8 @@ export const PromotionAddCampaign = () => {
   const { t } = useTranslation()
   const { promotion, isPending, isError, error } = usePromotion(id!)
 
-  let campaignQuery = {}
-
-  if (promotion?.application_method?.currency_code) {
-    campaignQuery = {
-      budget: {
-        currency_code: promotion?.application_method?.currency_code,
-      },
-    }
-  }
-
-  const {
-    campaigns,
-    isPending: areCampaignsLoading,
-    isError: isCampaignError,
-    error: campaignError,
-  } = useCampaigns(campaignQuery)
-  if (isError || isCampaignError) {
-    throw error || campaignError
+  if (isError) {
+    throw error
   }
 
   return (
@@ -38,8 +21,8 @@ export const PromotionAddCampaign = () => {
         <Heading>{t("promotions.campaign.edit.header")}</Heading>
       </RouteDrawer.Header>
 
-      {!isPending && !areCampaignsLoading && promotion && campaigns && (
-        <AddCampaignPromotionForm promotion={promotion} campaigns={campaigns} />
+      {!isPending && promotion && (
+        <AddCampaignPromotionForm promotion={promotion} />
       )}
     </RouteDrawer>
   )