@medusajs/dashboard 2.10.4-snapshot-20250923121159 → 2.10.4-snapshot-20250925172615

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/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>
   )

package/src/routes/promotions/promotion-create/components/create-promotion-form/create-promotion-form.tsx

@@ -46,6 +46,7 @@ import { AddCampaignPromotionFields } from "../../../promotion-add-campaign/comp
 import { Tab } from "./constants"
 import { CreatePromotionSchema } from "./form-schema"
 import { templates } from "./templates"
+import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 const defaultValues = {
   campaign_id: undefined,
@@ -80,7 +81,7 @@ export const CreatePromotionForm = () => {
 
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
-
+  const direction = useDocumentDirection()
   const form = useForm<z.infer<typeof CreatePromotionSchema>>({
     defaultValues,
     resolver: zodResolver(CreatePromotionSchema),
@@ -364,6 +365,7 @@ export const CreatePromotionForm = () => {
     <RouteFocusModal.Form form={form}>
       <KeyboundForm className="flex h-full flex-col" onSubmit={handleSubmit}>
         <ProgressTabs
+          dir={direction}
           value={tab}
           onValueChange={(tab) => handleTabChange(tab as Tab)}
           className="flex h-full flex-col overflow-hidden"
@@ -417,6 +419,7 @@ export const CreatePromotionForm = () => {
 
                           <Form.Control>
                             <RadioGroup
+                              dir={direction}
                               key={"template_id"}
                               className="flex-col gap-y-3"
                               {...field}
@@ -486,6 +489,7 @@ export const CreatePromotionForm = () => {
 
                           <Form.Control>
                             <RadioGroup
+                              dir={direction}
                               className="flex gap-y-3"
                               {...field}
                               value={field.value}
@@ -530,6 +534,7 @@ export const CreatePromotionForm = () => {
 
                           <Form.Control>
                             <RadioGroup
+                              dir={direction}
                               className="flex gap-y-3"
                               {...field}
                               value={field.value}
@@ -619,7 +624,8 @@ export const CreatePromotionForm = () => {
                                   </div>
                                   <Form.Control className="mr-2 self-center">
                                     <Switch
-                                      className="mt-[2px]"
+                                      dir="ltr"
+                                      className="mt-[2px] rtl:rotate-180"
                                       checked={!!value}
                                       onCheckedChange={onChange}
                                       {...field}
@@ -647,6 +653,7 @@ export const CreatePromotionForm = () => {
                             </Form.Label>
                             <Form.Control>
                               <RadioGroup
+                                dir={direction}
                                 className="flex gap-y-3"
                                 {...field}
                                 onValueChange={field.onChange}
@@ -699,7 +706,8 @@ export const CreatePromotionForm = () => {
                               </Form.Label>
                               <Form.Control>
                                 <RadioGroup
-                                  className="flex gap-y-3"
+                                  dir={direction}
+                                className="flex gap-y-3"
                                   {...field}
                                   onValueChange={field.onChange}
                                 >
@@ -889,6 +897,7 @@ export const CreatePromotionForm = () => {
 
                               <Form.Control>
                                 <RadioGroup
+                                  dir={direction}
                                   className="flex gap-y-3"
                                   {...field}
                                   onValueChange={field.onChange}

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

@@ -16,6 +16,7 @@ import {
   getCurrencySymbol,
 } from "../../../../../lib/data/currencies"
 import { SwitchBox } from "../../../../../components/common/switch-box"
+import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 type EditPromotionFormProps = {
   promotion: AdminPromotion
@@ -99,7 +100,7 @@ export const EditPromotionDetailsForm = ({
       form.setValue("is_tax_inclusive", false)
     }
   }, [allocationWatchValue, form, promotion])
-
+  const direction = useDocumentDirection()
   return (
     <RouteDrawer.Form form={form}>
       <KeyboundForm
@@ -117,6 +118,7 @@ export const EditPromotionDetailsForm = ({
                     <Form.Label>{t("promotions.form.status.label")}</Form.Label>
                     <Form.Control>
                       <RadioGroup
+                        dir={direction}
                         className="flex-col gap-y-3"
                         {...field}
                         value={field.value}
@@ -162,6 +164,7 @@ export const EditPromotionDetailsForm = ({
                     <Form.Label>{t("promotions.form.method.label")}</Form.Label>
                     <Form.Control>
                       <RadioGroup
+                        dir={direction}
                         className="flex-col gap-y-3"
                         {...field}
                         value={field.value}
@@ -242,6 +245,7 @@ export const EditPromotionDetailsForm = ({
                         </Form.Label>
                         <Form.Control>
                           <RadioGroup
+                            dir={direction}
                             className="flex-col gap-y-3"
                             {...field}
                             onValueChange={field.onChange}
@@ -336,6 +340,7 @@ export const EditPromotionDetailsForm = ({
                         </Form.Label>
                         <Form.Control>
                           <RadioGroup
+                            dir={direction}
                             className="flex-col gap-y-3"
                             {...field}
                             onValueChange={field.onChange}

package/src/routes/refund-reasons/refund-reason-create/components/refund-reason-create-form/index.ts

@@ -0,0 +1 @@
+export { RefundReasonCreateForm } from "./refund-reason-create-form"

package/src/routes/refund-reasons/refund-reason-create/components/refund-reason-create-form/refund-reason-create-form.tsx

@@ -0,0 +1,131 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Button, Heading, Input, Text, Textarea, toast } from "@medusajs/ui"
+import { useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+import { z } from "zod"
+import { Form } from "../../../../../components/common/form"
+import {
+  RouteFocusModal,
+  useRouteModal,
+} from "../../../../../components/modals"
+import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
+import { useCreateRefundReason } from "../../../../../hooks/api"
+
+const RefundReasonCreateSchema = z.object({
+  label: z.string().min(1),
+  description: z.string().optional(),
+})
+
+export const RefundReasonCreateForm = () => {
+  const { t } = useTranslation()
+  const { handleSuccess } = useRouteModal()
+
+  const form = useForm<z.infer<typeof RefundReasonCreateSchema>>({
+    defaultValues: {
+      label: "",
+      description: "",
+    },
+    resolver: zodResolver(RefundReasonCreateSchema),
+  })
+
+  const { mutateAsync, isPending } = useCreateRefundReason()
+
+  const handleSubmit = form.handleSubmit(async (data) => {
+    await mutateAsync(data, {
+      onSuccess: ({ refund_reason }) => {
+        toast.success(
+          t("refundReasons.create.successToast", {
+            label: refund_reason.label,
+          })
+        )
+        handleSuccess(`../`)
+      },
+      onError: (error) => {
+        toast.error(error.message)
+      },
+    })
+  })
+
+  return (
+    <RouteFocusModal.Form form={form}>
+      <KeyboundForm
+        className="flex size-full flex-col overflow-hidden"
+        onSubmit={handleSubmit}
+      >
+        <RouteFocusModal.Header />
+        <RouteFocusModal.Body className="flex flex-1 justify-center overflow-auto px-6 py-16">
+          <div className="flex w-full max-w-[720px] flex-col gap-y-8">
+            <div className="flex flex-col gap-y-1">
+              <RouteFocusModal.Title asChild>
+                <Heading>{t("refundReasons.create.header")}</Heading>
+              </RouteFocusModal.Title>
+              <RouteFocusModal.Description asChild>
+                <Text size="small" className="text-ui-fg-subtle">
+                  {t("refundReasons.create.subtitle")}
+                </Text>
+              </RouteFocusModal.Description>
+            </div>
+            <div className="grid gap-4 md:grid-cols-2">
+              <Form.Field
+                control={form.control}
+                name="label"
+                render={({ field }) => {
+                  return (
+                    <Form.Item>
+                      <Form.Label>
+                        {t("refundReasons.fields.label.label")}
+                      </Form.Label>
+                      <Form.Control>
+                        <Input
+                          {...field}
+                          placeholder={t(
+                            "refundReasons.fields.label.placeholder"
+                          )}
+                        />
+                      </Form.Control>
+                      <Form.ErrorMessage />
+                    </Form.Item>
+                  )
+                }}
+              />
+            </div>
+            <Form.Field
+              control={form.control}
+              name="description"
+              render={({ field }) => {
+                return (
+                  <Form.Item>
+                    <Form.Label optional>
+                      {t("refundReasons.fields.description.label")}
+                    </Form.Label>
+                    <Form.Control>
+                      <Textarea
+                        {...field}
+                        placeholder={t(
+                          "refundReasons.fields.description.placeholder"
+                        )}
+                      />
+                    </Form.Control>
+                    <Form.ErrorMessage />
+                  </Form.Item>
+                )
+              }}
+            />
+          </div>
+        </RouteFocusModal.Body>
+        <RouteFocusModal.Footer>
+          <div className="flex items-center justify-end gap-2">
+            <RouteFocusModal.Close asChild>
+              <Button size="small" variant="secondary" type="button">
+                {t("actions.cancel")}
+              </Button>
+            </RouteFocusModal.Close>
+            <Button size="small" type="submit" isLoading={isPending}>
+              {t("actions.save")}
+            </Button>
+          </div>
+        </RouteFocusModal.Footer>
+      </KeyboundForm>
+    </RouteFocusModal.Form>
+  )
+}

package/src/routes/refund-reasons/refund-reason-create/index.ts

@@ -0,0 +1 @@
+export { RefundReasonCreate as Component } from "./refund-reason-create"

package/src/routes/refund-reasons/refund-reason-create/refund-reason-create.tsx

@@ -0,0 +1,10 @@
+import { RouteFocusModal } from "../../../components/modals"
+import { RefundReasonCreateForm } from "./components/refund-reason-create-form"
+
+export const RefundReasonCreate = () => {
+  return (
+    <RouteFocusModal>
+      <RefundReasonCreateForm />
+    </RouteFocusModal>
+  )
+}

package/src/routes/refund-reasons/refund-reason-edit/components/refund-reason-edit-form/index.ts

@@ -0,0 +1 @@
+export { RefundReasonEditForm } from "./refund-reason-edit-form"

package/src/routes/refund-reasons/refund-reason-edit/components/refund-reason-edit-form/refund-reason-edit-form.tsx

@@ -0,0 +1,119 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { HttpTypes } from "@medusajs/types"
+import { Button, Input, Textarea, toast } from "@medusajs/ui"
+import { useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+import { z } from "zod"
+
+import { Form } from "../../../../../components/common/form"
+import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
+import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
+import { useUpdateRefundReason } from "../../../../../hooks/api/refund-reasons"
+
+type RefundReasonEditFormProps = {
+  refundReason: HttpTypes.AdminRefundReason
+}
+
+const RefundReasonEditSchema = z.object({
+  label: z.string().min(1),
+  description: z.string().optional(),
+})
+
+export const RefundReasonEditForm = ({
+  refundReason,
+}: RefundReasonEditFormProps) => {
+  const { t } = useTranslation()
+  const { handleSuccess } = useRouteModal()
+
+  const form = useForm<z.infer<typeof RefundReasonEditSchema>>({
+    defaultValues: {
+      label: refundReason.label,
+      description: refundReason.description ?? undefined,
+    },
+    resolver: zodResolver(RefundReasonEditSchema),
+  })
+
+  const { mutateAsync, isPending } = useUpdateRefundReason(refundReason.id)
+
+  const handleSubmit = form.handleSubmit(async (data) => {
+    await mutateAsync(data, {
+      onSuccess: ({ refund_reason }) => {
+        toast.success(
+          t("refundReasons.edit.successToast", {
+            label: refund_reason.label,
+          })
+        )
+        handleSuccess()
+      },
+      onError: (error) => {
+        toast.error(error.message)
+      },
+    })
+  })
+
+  return (
+    <RouteDrawer.Form form={form}>
+      <KeyboundForm
+        className="flex size-full flex-col overflow-hidden"
+        onSubmit={handleSubmit}
+      >
+        <RouteDrawer.Body className="flex flex-1 flex-col gap-y-4 overflow-auto">
+          <Form.Field
+            control={form.control}
+            name="label"
+            render={({ field }) => {
+              return (
+                <Form.Item>
+                  <Form.Label>
+                    {t("refundReasons.fields.label.label")}
+                  </Form.Label>
+                  <Form.Control>
+                    <Input
+                      {...field}
+                      placeholder={t("refundReasons.fields.label.placeholder")}
+                    />
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )
+            }}
+          />
+          <Form.Field
+            control={form.control}
+            name="description"
+            render={({ field }) => {
+              return (
+                <Form.Item>
+                  <Form.Label optional>
+                    {t("refundReasons.fields.description.label")}
+                  </Form.Label>
+                  <Form.Control>
+                    <Textarea
+                      {...field}
+                      placeholder={t(
+                        "refundReasons.fields.description.placeholder"
+                      )}
+                    />
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )
+            }}
+          />
+        </RouteDrawer.Body>
+        <RouteDrawer.Footer>
+          <div className="flex items-center justify-end gap-x-2">
+            <RouteDrawer.Close asChild>
+              <Button variant="secondary" size="small" type="button">
+                {t("actions.cancel")}
+              </Button>
+            </RouteDrawer.Close>
+            <Button size="small" type="submit" isLoading={isPending}>
+              {t("actions.save")}
+            </Button>
+          </div>
+        </RouteDrawer.Footer>
+      </KeyboundForm>
+    </RouteDrawer.Form>
+  )
+}

package/src/routes/refund-reasons/refund-reason-edit/index.ts

@@ -0,0 +1 @@
+export { RefundReasonEdit as Component } from "./refund-reason-edit"

package/src/routes/refund-reasons/refund-reason-edit/refund-reason-edit.tsx

@@ -0,0 +1,33 @@
+import { Heading } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { useParams } from "react-router-dom"
+import { RouteDrawer } from "../../../components/modals"
+import { useRefundReason } from "../../../hooks/api/refund-reasons"
+import { RefundReasonEditForm } from "./components/refund-reason-edit-form"
+
+export const RefundReasonEdit = () => {
+  const { id } = useParams()
+  const { t } = useTranslation()
+
+  const { refund_reason, isPending, isError, error } = useRefundReason(id!)
+
+  const ready = !isPending && !!refund_reason
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <RouteDrawer>
+      <RouteDrawer.Header>
+        <RouteDrawer.Title asChild>
+          <Heading>{t("refundReasons.edit.header")}</Heading>
+        </RouteDrawer.Title>
+        <RouteDrawer.Description className="sr-only">
+          {t("refundReasons.edit.subtitle")}
+        </RouteDrawer.Description>
+      </RouteDrawer.Header>
+      {ready && <RefundReasonEditForm refundReason={refund_reason} />}
+    </RouteDrawer>
+  )
+}

package/src/routes/refund-reasons/refund-reason-list/components/refund-reason-list-table/index.ts

@@ -0,0 +1 @@
+export { RefundReasonListTable } from "./refund-reason-list-table"