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

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

@@ -3,6 +3,7 @@ import { AdminPromotion } from "@medusajs/types"
 import { Button, CurrencyInput, Input, RadioGroup, Text } from "@medusajs/ui"
 import { useForm, useWatch } from "react-hook-form"
 import { Trans, useTranslation } from "react-i18next"
+import { useEffect } from "react"
 import * as zod from "zod"
 
 import { Form } from "../../../../../components/common/form"
@@ -10,7 +11,12 @@ import { DeprecatedPercentageInput } from "../../../../../components/inputs/perc
 import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
 import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
 import { useUpdatePromotion } from "../../../../../hooks/api/promotions"
-import { getCurrencySymbol } from "../../../../../lib/data/currencies"
+import {
+  currencies,
+  getCurrencySymbol,
+} from "../../../../../lib/data/currencies"
+import { SwitchBox } from "../../../../../components/common/switch-box"
+import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 type EditPromotionFormProps = {
   promotion: AdminPromotion
@@ -19,10 +25,13 @@ type EditPromotionFormProps = {
 const EditPromotionSchema = zod.object({
   is_automatic: zod.string().toLowerCase(),
   code: zod.string().min(1),
+  is_tax_inclusive: zod.boolean().optional(),
   status: zod.enum(["active", "inactive", "draft"]),
   value_type: zod.enum(["fixed", "percentage"]),
-  value: zod.number(),
-  allocation: zod.enum(["each", "across"]),
+  value: zod.number().min(0).or(zod.string().min(1)),
+  allocation: zod.enum(["each", "across", "once"]),
+  target_type: zod.enum(["order", "shipping_methods", "items"]),
+  max_quantity: zod.number().min(1).optional().nullable(),
 })
 
 export const EditPromotionDetailsForm = ({
@@ -34,11 +43,14 @@ export const EditPromotionDetailsForm = ({
   const form = useForm<zod.infer<typeof EditPromotionSchema>>({
     defaultValues: {
       is_automatic: promotion.is_automatic!.toString(),
+      is_tax_inclusive: promotion.is_tax_inclusive,
       code: promotion.code,
       status: promotion.status,
       value: promotion.application_method!.value,
       allocation: promotion.application_method!.allocation,
       value_type: promotion.application_method!.type,
+      target_type: promotion.application_method!.target_type,
+      max_quantity: promotion.application_method!.max_quantity,
     },
     resolver: zodResolver(EditPromotionSchema),
   })
@@ -48,20 +60,35 @@ export const EditPromotionDetailsForm = ({
     name: "value_type",
   })
 
+  const watchAllocation = useWatch({
+    control: form.control,
+    name: "allocation",
+  })
+
   const isFixedValueType = watchValueType === "fixed"
+  const originalAllocation = promotion.application_method!.allocation
 
   const { mutateAsync, isPending } = useUpdatePromotion(promotion.id)
 
   const handleSubmit = form.handleSubmit(async (data) => {
+    const value = parseFloat(data.value)
+
+    if (isNaN(value) || value < 0) {
+      form.setError("value", { message: t("promotions.form.value.invalid") })
+      return
+    }
+
     await mutateAsync(
       {
         is_automatic: data.is_automatic === "true",
         code: data.code,
         status: data.status,
+        is_tax_inclusive: data.is_tax_inclusive,
         application_method: {
-          value: data.value,
+          value: parseFloat(data.value),
           type: data.value_type as any,
           allocation: data.allocation as any,
+          max_quantity: data.max_quantity,
         },
       },
       {
@@ -72,6 +99,17 @@ export const EditPromotionDetailsForm = ({
     )
   })
 
+  const allocationWatchValue = useWatch({
+    control: form.control,
+    name: "value_type",
+  })
+
+  useEffect(() => {
+    if (!(allocationWatchValue === "fixed" && promotion.type === "standard")) {
+      form.setValue("is_tax_inclusive", false)
+    }
+  }, [allocationWatchValue, form, promotion])
+  const direction = useDocumentDirection()
   return (
     <RouteDrawer.Form form={form}>
       <KeyboundForm
@@ -89,6 +127,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}
@@ -134,6 +173,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}
@@ -161,6 +201,16 @@ export const EditPromotionDetailsForm = ({
               }}
             />
 
+            {allocationWatchValue === "fixed" &&
+              promotion.type === "standard" && (
+                <SwitchBox
+                  control={form.control}
+                  name="is_tax_inclusive"
+                  label={t("promotions.form.taxInclusive.title")}
+                  description={t("promotions.form.taxInclusive.description")}
+                />
+              )}
+
             <div className="flex flex-col gap-y-4">
               <Form.Field
                 control={form.control}
@@ -169,7 +219,6 @@ export const EditPromotionDetailsForm = ({
                   return (
                     <Form.Item>
                       <Form.Label>{t("promotions.form.code.title")}</Form.Label>
-
                       <Form.Control>
                         <Input {...field} />
                       </Form.Control>
@@ -191,128 +240,199 @@ export const EditPromotionDetailsForm = ({
               </Text>
             </div>
 
-            <Form.Field
-              control={form.control}
-              name="value_type"
-              render={({ field }) => {
-                return (
-                  <Form.Item>
-                    <Form.Label>{t("promotions.fields.value_type")}</Form.Label>
-                    <Form.Control>
-                      <RadioGroup
-                        className="flex-col gap-y-3"
-                        {...field}
-                        onValueChange={field.onChange}
-                      >
-                        <RadioGroup.ChoiceBox
-                          value={"fixed"}
-                          label={t("promotions.form.value_type.fixed.title")}
-                          description={t(
-                            "promotions.form.value_type.fixed.description"
-                          )}
-                        />
-
-                        <RadioGroup.ChoiceBox
-                          value={"percentage"}
-                          label={t(
-                            "promotions.form.value_type.percentage.title"
-                          )}
-                          description={t(
-                            "promotions.form.value_type.percentage.description"
-                          )}
-                        />
-                      </RadioGroup>
-                    </Form.Control>
-                    <Form.ErrorMessage />
-                  </Form.Item>
-                )
-              }}
-            />
+            {promotion.application_method?.target_type !==
+              "shipping_methods" && (
+              <>
+                <Form.Field
+                  control={form.control}
+                  name="value_type"
+                  render={({ field }) => {
+                    return (
+                      <Form.Item>
+                        <Form.Label>
+                          {t("promotions.fields.value_type")}
+                        </Form.Label>
+                        <Form.Control>
+                          <RadioGroup
+                            dir={direction}
+                            className="flex-col gap-y-3"
+                            {...field}
+                            onValueChange={field.onChange}
+                          >
+                            <RadioGroup.ChoiceBox
+                              value={"fixed"}
+                              label={t(
+                                "promotions.form.value_type.fixed.title"
+                              )}
+                              description={t(
+                                "promotions.form.value_type.fixed.description"
+                              )}
+                            />
 
-            <Form.Field
-              control={form.control}
-              name="value"
-              render={({ field: { onChange, ...field } }) => {
-                const currencyCode =
-                  promotion.application_method?.currency_code ?? "USD"
+                            <RadioGroup.ChoiceBox
+                              value={"percentage"}
+                              label={t(
+                                "promotions.form.value_type.percentage.title"
+                              )}
+                              description={t(
+                                "promotions.form.value_type.percentage.description"
+                              )}
+                            />
+                          </RadioGroup>
+                        </Form.Control>
+                        <Form.ErrorMessage />
+                      </Form.Item>
+                    )
+                  }}
+                />
+                <Form.Field
+                  control={form.control}
+                  name="value"
+                  render={({ field: { onChange, ...field } }) => {
+                    const currencyCode =
+                      promotion.application_method?.currency_code ?? "USD"
 
-                return (
-                  <Form.Item>
-                    <Form.Label>
-                      {isFixedValueType
-                        ? t("fields.amount")
-                        : t("fields.percentage")}
-                    </Form.Label>
-                    <Form.Control>
-                      {isFixedValueType ? (
-                        <CurrencyInput
-                          min={0}
-                          onValueChange={(val) =>
-                            onChange(val ? parseInt(val) : null)
-                          }
-                          code={currencyCode}
-                          symbol={getCurrencySymbol(currencyCode)}
-                          {...field}
-                          value={field.value}
-                        />
-                      ) : (
-                        <DeprecatedPercentageInput
-                          key="amount"
-                          min={0}
-                          max={100}
-                          {...field}
-                          value={field.value || ""}
-                          onChange={(e) => {
-                            onChange(
-                              e.target.value === ""
-                                ? null
-                                : parseInt(e.target.value)
-                            )
-                          }}
-                        />
-                      )}
-                    </Form.Control>
-                    <Form.ErrorMessage />
-                  </Form.Item>
-                )
-              }}
-            />
+                    const currencyInfo =
+                      currencies[currencyCode?.toUpperCase() || "USD"]
 
-            <Form.Field
-              control={form.control}
-              name="allocation"
-              render={({ field }) => {
-                return (
-                  <Form.Item>
-                    <Form.Label>{t("promotions.fields.allocation")}</Form.Label>
-                    <Form.Control>
-                      <RadioGroup
-                        className="flex-col gap-y-3"
-                        {...field}
-                        onValueChange={field.onChange}
-                      >
-                        <RadioGroup.ChoiceBox
-                          value={"each"}
-                          label={t("promotions.form.allocation.each.title")}
-                          description={t(
-                            "promotions.form.allocation.each.description"
+                    return (
+                      <Form.Item>
+                        <Form.Label>
+                          {isFixedValueType
+                            ? t("fields.amount")
+                            : t("fields.percentage")}
+                        </Form.Label>
+                        <Form.Control>
+                          {isFixedValueType ? (
+                            <CurrencyInput
+                              min={0}
+                              onValueChange={(val) => onChange(val)}
+                              decimalSeparator="."
+                              groupSeparator=","
+                              decimalScale={currencyInfo.decimal_digits}
+                              decimalsLimit={currencyInfo.decimal_digits}
+                              code={currencyCode}
+                              symbol={getCurrencySymbol(currencyCode)}
+                              {...field}
+                              value={field.value}
+                            />
+                          ) : (
+                            <DeprecatedPercentageInput
+                              key="amount"
+                              min={0}
+                              max={100}
+                              {...field}
+                              value={field.value || ""}
+                              onChange={(e) => {
+                                onChange(
+                                  e.target.value === ""
+                                    ? null
+                                    : parseFloat(e.target.value)
+                                )
+                              }}
+                            />
                           )}
-                        />
+                        </Form.Control>
+                        <Form.ErrorMessage />
+                      </Form.Item>
+                    )
+                  }}
+                />
+                <Form.Field
+                  control={form.control}
+                  name="allocation"
+                  render={({ field }) => {
+                    return (
+                      <Form.Item>
+                        <Form.Label
+                          tooltip={t("promotions.fields.allocationTooltip")}
+                        >
+                          {t("promotions.fields.allocation")}
+                        </Form.Label>
+                        <Form.Control>
+                          <RadioGroup
+                            dir={direction}
+                            className="flex-col gap-y-3"
+                            {...field}
+                            onValueChange={field.onChange}
+                          >
+                            <RadioGroup.ChoiceBox
+                              value={"each"}
+                              label={t("promotions.form.allocation.each.title")}
+                              description={t(
+                                "promotions.form.allocation.each.description"
+                              )}
+                              disabled={originalAllocation === "across"}
+                            />
 
-                        <RadioGroup.ChoiceBox
-                          value={"across"}
-                          label={t("promotions.form.allocation.across.title")}
-                          description={t(
-                            "promotions.form.allocation.across.description"
-                          )}
-                        />
-                      </RadioGroup>
-                    </Form.Control>
-                    <Form.ErrorMessage />
-                  </Form.Item>
-                )
-              }}
-            />
+                            <RadioGroup.ChoiceBox
+                              value={"across"}
+                              label={t(
+                                "promotions.form.allocation.across.title"
+                              )}
+                              description={t(
+                                "promotions.form.allocation.across.description"
+                              )}
+                              disabled={
+                                originalAllocation === "each" ||
+                                originalAllocation === "once"
+                              }
+                            />
+
+                            <RadioGroup.ChoiceBox
+                              value={"once"}
+                              label={t("promotions.form.allocation.once.title")}
+                              description={t(
+                                "promotions.form.allocation.once.description"
+                              )}
+                              disabled={originalAllocation === "across"}
+                            />
+                          </RadioGroup>
+                        </Form.Control>
+                        <Form.ErrorMessage />
+                      </Form.Item>
+                    )
+                  }}
+                />
+                {(watchAllocation === "each" || watchAllocation === "once") && (
+                  <Form.Field
+                    control={form.control}
+                    name="max_quantity"
+                    render={({ field }) => {
+                      return (
+                        <Form.Item>
+                          <Form.Label>
+                            {t("promotions.form.max_quantity.title")}
+                          </Form.Label>
+                          <Form.Control>
+                            <Input
+                              {...form.register("max_quantity", {
+                                valueAsNumber: true,
+                              })}
+                              type="number"
+                              min={1}
+                              placeholder="3"
+                            />
+                          </Form.Control>
+                          <Text
+                            size="small"
+                            leading="compact"
+                            className="text-ui-fg-subtle"
+                          >
+                            <Trans
+                              t={t}
+                              i18nKey="promotions.form.max_quantity.description"
+                              components={[<br key="break" />]}
+                            />
+                          </Text>
+                          <Form.ErrorMessage />
+                        </Form.Item>
+                      )
+                    }}
+                  />
+                )}
+              </>
+            )}
           </div>
         </RouteDrawer.Body>
 

package/src/routes/promotions/promotion-list/components/promotion-list-table/promotion-list-table.tsx

@@ -55,7 +55,7 @@ export const PromotionListTable = () => {
   return (
     <Container className="divide-y p-0">
       <div className="flex items-center justify-between px-6 py-4">
-        <Heading level="h2">{t("promotions.domain")}</Heading>
+        <Heading level="h1">{t("promotions.domain")}</Heading>
 
         <Button size="small" variant="secondary" asChild>
           <Link to="create">{t("actions.create")}</Link>

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,177 @@
+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),
+  code: 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: "",
+      code: "",
+      description: "",
+    },
+    resolver: zodResolver(RefundReasonCreateSchema),
+  })
+
+  const generateCodeFromLabel = (label: string) => {
+    return label
+      .toLowerCase()
+      .replace(/[^a-z0-9]/g, "_")
+      .replace(/_+/g, "_")
+      .replace(/^_|_$/g, "")
+  }
+
+  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"
+                          )}
+                          onChange={(e) => {
+                            if (
+                              !form.getFieldState("code").isTouched ||
+                              !form.getValues("code")
+                            ) {
+                              form.setValue(
+                                "code",
+                                generateCodeFromLabel(e.target.value)
+                              )
+                            }
+                            field.onChange(e)
+                          }}
+                        />
+                      </Form.Control>
+                      <Form.ErrorMessage />
+                    </Form.Item>
+                  )
+                }}
+              />
+            </div>
+            <div className="grid gap-4 md:grid-cols-2">
+              <Form.Field
+                control={form.control}
+                name="code"
+                render={({ field }) => {
+                  return (
+                    <Form.Item>
+                      <Form.Label>
+                        {t("refundReasons.fields.code.label")}
+                      </Form.Label>
+                      <Form.Control>
+                        <Input
+                          {...field}
+                          placeholder={t(
+                            "refundReasons.fields.code.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"