@mercurjs/admin 2.0.0-canary.27 → 2.0.0-canary.30

package/dist/commission-rate-create-MSQJGMDS.js

@@ -0,0 +1,777 @@
+import {
+  TargetForm,
+  TargetItem,
+  TaxRateRuleReferenceSchema
+} from "./chunk-5X5373EQ.js";
+import "./chunk-LTBX54CI.js";
+import {
+  PercentageInput
+} from "./chunk-MAEP2UCK.js";
+import "./chunk-HC25LNX7.js";
+import "./chunk-5A4JNOK3.js";
+import "./chunk-O5VKW5FL.js";
+import "./chunk-2PZGY332.js";
+import "./chunk-AFQS6E4N.js";
+import "./chunk-QG6PLWNH.js";
+import "./chunk-BRUOBAPY.js";
+import "./chunk-4F5GP7J7.js";
+import "./chunk-54EPH67T.js";
+import "./chunk-JQV7CXEC.js";
+import "./chunk-HINXQTCW.js";
+import "./chunk-25LYVP3C.js";
+import "./chunk-LQSLDDPT.js";
+import "./chunk-VW56KWO2.js";
+import "./chunk-2Y3WMGN6.js";
+import "./chunk-JHIMVLB2.js";
+import "./chunk-PXYDR7WQ.js";
+import "./chunk-3CKTAFTR.js";
+import "./chunk-G5OVX555.js";
+import "./chunk-FWPGOIFA.js";
+import "./chunk-DB6ANJBO.js";
+import "./chunk-FQERBIVS.js";
+import "./chunk-PHOCVOZ5.js";
+import "./chunk-FLCYR7E5.js";
+import "./chunk-YBZWO4ZV.js";
+import "./chunk-KAZ5BYTQ.js";
+import "./chunk-3EF54XFY.js";
+import "./chunk-WIYFXWRI.js";
+import {
+  currencies,
+  getCurrencySymbol
+} from "./chunk-IQPN4PZJ.js";
+import "./chunk-TKGWSUEI.js";
+import {
+  KeyboundForm
+} from "./chunk-U2ZFCAPX.js";
+import "./chunk-SXC5ZMLI.js";
+import "./chunk-MG4GKUJW.js";
+import "./chunk-AYVH6Q5O.js";
+import "./chunk-VOHEQ7B5.js";
+import "./chunk-FMOQNZFZ.js";
+import "./chunk-2ZFELO2L.js";
+import "./chunk-26OOAKQ6.js";
+import "./chunk-N5IUYCUZ.js";
+import "./chunk-7SVLKK6Q.js";
+import "./chunk-ZQZHFMD7.js";
+import "./chunk-GR6JUIRU.js";
+import "./chunk-PVZBDWLK.js";
+import "./chunk-K3GJ266Z.js";
+import "./chunk-O5HZRJPB.js";
+import "./chunk-GEVYE225.js";
+import "./chunk-VKOE5J66.js";
+import "./chunk-CMHI2RPL.js";
+import "./chunk-DY3XQPHC.js";
+import "./chunk-S2WEYEQR.js";
+import "./chunk-VVWB3GIK.js";
+import "./chunk-7J3HKFZC.js";
+import "./chunk-KBYZLKI4.js";
+import "./chunk-YWWUOGJA.js";
+import {
+  RouteFocusModal,
+  StackedFocusModal,
+  useRouteModal,
+  useStackedModal
+} from "./chunk-MWOKFNRO.js";
+import {
+  Form
+} from "./chunk-3QSRE5LS.js";
+import "./chunk-JRTZWK77.js";
+import "./chunk-INNFZYX2.js";
+import "./chunk-LAVHRER2.js";
+import {
+  useDocumentDirection
+} from "./chunk-Y7QKP6QU.js";
+import "./chunk-THHRRYRS.js";
+import "./chunk-UZWFZMOX.js";
+import "./chunk-XQNVC4Q7.js";
+import "./chunk-KCCJYRBN.js";
+import "./chunk-ODBDAABQ.js";
+import "./chunk-CDQJKJMX.js";
+import "./chunk-JLATVDLM.js";
+import "./chunk-GPRBBA7S.js";
+import "./chunk-E7ZBQO6E.js";
+import "./chunk-XGHM75N2.js";
+import "./chunk-U2GCSKW3.js";
+import "./chunk-RTAIDSDS.js";
+import "./chunk-LW3UWYZU.js";
+import {
+  useCreateCommissionRate
+} from "./chunk-A4X5VP3G.js";
+import "./chunk-NNZP4PYP.js";
+import "./chunk-GF4QHVX3.js";
+import "./chunk-JOQ3RTF5.js";
+import "./chunk-V534K7G4.js";
+import "./chunk-A5XOYSDC.js";
+import "./chunk-TQI3DOQ5.js";
+import "./chunk-5PB7KCTF.js";
+import "./chunk-YOIARITB.js";
+import "./chunk-W7G64ULL.js";
+import "./chunk-6C7TCU42.js";
+import "./chunk-4YF3GAKE.js";
+import "./chunk-LORVU5II.js";
+import "./chunk-36ORDF7W.js";
+import "./chunk-QSM56ZOP.js";
+import {
+  useStore
+} from "./chunk-MIHEJ6Y6.js";
+import "./chunk-3VZV6SJQ.js";
+import "./chunk-K357FGGP.js";
+import "./chunk-RHKRREUU.js";
+import "./chunk-ZA2KFUFR.js";
+import "./chunk-ZYNBKBY3.js";
+import "./chunk-NBMM2TZK.js";
+
+// src/pages/commission-rates/commission-rate-create/components/create-commission-rate-form/create-commission-rate-form.tsx
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  Button,
+  CurrencyInput,
+  Divider,
+  Heading,
+  Hint,
+  Input,
+  Label,
+  Select,
+  Text,
+  clx,
+  toast,
+  Switch
+} from "@medusajs/ui";
+import { MagnifyingGlass } from "@medusajs/icons";
+import { useEffect } from "react";
+import { useFieldArray, useForm, useWatch } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import * as zod from "zod";
+import { jsx, jsxs } from "react/jsx-runtime";
+var STACKED_MODAL_ID = "cr";
+var getStackedModalId = (type) => `${STACKED_MODAL_ID}-${type}`;
+var CreateCommissionRateSchema = zod.object({
+  name: zod.string().min(1),
+  code: zod.string().min(1),
+  type: zod.enum(["fixed", "percentage"]),
+  target: zod.enum(["item", "shipping"]),
+  value: zod.coerce.number().min(0),
+  currency_code: zod.string().optional(),
+  min_amount: zod.coerce.number().optional(),
+  include_tax: zod.boolean(),
+  is_enabled: zod.boolean(),
+  priority: zod.coerce.number().int().min(0),
+  enabled_rules: zod.object({
+    product: zod.boolean(),
+    product_type: zod.boolean(),
+    shipping_option: zod.boolean()
+  }),
+  product: zod.array(TaxRateRuleReferenceSchema).optional(),
+  product_type: zod.array(TaxRateRuleReferenceSchema).optional(),
+  shipping_option: zod.array(TaxRateRuleReferenceSchema).optional()
+});
+var CreateCommissionRateForm = ({
+  store
+}) => {
+  const { t } = useTranslation();
+  const { handleSuccess } = useRouteModal();
+  const { setIsOpen } = useStackedModal();
+  const direction = useDocumentDirection();
+  const form = useForm({
+    defaultValues: {
+      name: "",
+      code: "",
+      type: "percentage",
+      target: "item",
+      value: 0,
+      currency_code: "",
+      min_amount: void 0,
+      include_tax: false,
+      is_enabled: true,
+      priority: 0,
+      enabled_rules: {
+        product: false,
+        product_type: false,
+        shipping_option: false
+      },
+      product: [],
+      product_type: [],
+      shipping_option: []
+    },
+    resolver: zodResolver(CreateCommissionRateSchema)
+  });
+  const storeCurrencies = (store?.supported_currencies ?? []).map(
+    (c) => currencies[c.currency_code.toUpperCase()]
+  );
+  const defaultCurrencyCode = store?.supported_currencies?.[0]?.currency_code ?? "";
+  useEffect(() => {
+    if (defaultCurrencyCode && !form.getValues("currency_code")) {
+      form.setValue("currency_code", defaultCurrencyCode);
+    }
+  }, [defaultCurrencyCode, form]);
+  const { mutateAsync: createCommissionRate, isPending } = useCreateCommissionRate();
+  const handleSubmit = form.handleSubmit(async (values) => {
+    const rules = [
+      ...(values.product || []).map((ref) => ({
+        reference: "product" /* PRODUCT */,
+        reference_id: ref.value
+      })),
+      ...(values.product_type || []).map((ref) => ({
+        reference: "product_type" /* PRODUCT_TYPE */,
+        reference_id: ref.value
+      })),
+      ...(values.shipping_option || []).map((ref) => ({
+        reference: "shipping_option" /* SHIPPING_OPTION */,
+        reference_id: ref.value
+      }))
+    ];
+    await createCommissionRate(
+      {
+        name: values.name,
+        code: values.code,
+        type: values.type,
+        target: values.target,
+        value: values.value,
+        currency_code: values.currency_code || null,
+        min_amount: values.min_amount ?? null,
+        include_tax: values.include_tax,
+        is_enabled: values.is_enabled,
+        priority: values.priority,
+        ...rules.length > 0 ? { rules } : {}
+      },
+      {
+        onSuccess: ({ commission_rate }) => {
+          toast.success("Commission rate created successfully");
+          handleSuccess(`../${commission_rate.id}`);
+        },
+        onError: (e) => {
+          toast.error(e.message);
+        }
+      }
+    );
+  });
+  const watchType = form.watch("type");
+  const watchCurrency = form.watch("currency_code");
+  const products = useFieldArray({
+    control: form.control,
+    name: "product" /* PRODUCT */
+  });
+  const productTypes = useFieldArray({
+    control: form.control,
+    name: "product_type" /* PRODUCT_TYPE */
+  });
+  const shippingOptions = useFieldArray({
+    control: form.control,
+    name: "shipping_option" /* SHIPPING_OPTION */
+  });
+  const getControls = (type) => {
+    switch (type) {
+      case "product" /* PRODUCT */:
+        return products;
+      case "product_type" /* PRODUCT_TYPE */:
+        return productTypes;
+      case "shipping_option" /* SHIPPING_OPTION */:
+        return shippingOptions;
+    }
+  };
+  const referenceTypeOptions = [
+    {
+      value: "product" /* PRODUCT */,
+      label: t("taxRegions.fields.targets.options.product")
+    },
+    {
+      value: "product_type" /* PRODUCT_TYPE */,
+      label: t("taxRegions.fields.targets.options.productType")
+    },
+    {
+      value: "shipping_option" /* SHIPPING_OPTION */,
+      label: t("taxRegions.fields.targets.options.shippingOption")
+    }
+  ];
+  const searchPlaceholders = {
+    ["product" /* PRODUCT */]: t(
+      "taxRegions.fields.targets.placeholders.product"
+    ),
+    ["product_type" /* PRODUCT_TYPE */]: t(
+      "taxRegions.fields.targets.placeholders.productType"
+    ),
+    ["shipping_option" /* SHIPPING_OPTION */]: t(
+      "taxRegions.fields.targets.placeholders.shippingOption"
+    )
+  };
+  const getFieldHandler = (type) => {
+    const { fields, remove, append } = getControls(type);
+    const modalId = getStackedModalId(type);
+    return (references) => {
+      if (!references.length) {
+        form.setValue(type, [], { shouldDirty: true });
+        setIsOpen(modalId, false);
+        return;
+      }
+      const newIds = references.map((reference) => reference.value);
+      const fieldsToAdd = references.filter(
+        (reference) => !fields.some((field) => field.value === reference.value)
+      );
+      for (const field of fields) {
+        if (!newIds.includes(field.value)) {
+          remove(fields.indexOf(field));
+        }
+      }
+      append(fieldsToAdd);
+      setIsOpen(modalId, false);
+    };
+  };
+  const displayOrder = /* @__PURE__ */ new Set();
+  const disableRule = (type) => {
+    form.setValue(type, [], { shouldDirty: true });
+    form.setValue(`enabled_rules.${type}`, false, { shouldDirty: true });
+    displayOrder.delete(type);
+  };
+  const enableRule = (type) => {
+    form.setValue(`enabled_rules.${type}`, true, { shouldDirty: true });
+    form.setValue(type, [], { shouldDirty: true });
+    displayOrder.add(type);
+  };
+  const watchedEnabledRules = useWatch({
+    control: form.control,
+    name: "enabled_rules"
+  });
+  const addRule = () => {
+    const firstDisabledRule = Object.keys(watchedEnabledRules).find(
+      (key) => !watchedEnabledRules[key]
+    );
+    if (firstDisabledRule) {
+      enableRule(firstDisabledRule);
+    }
+  };
+  const visibleRuleTypes = referenceTypeOptions.filter((option) => watchedEnabledRules[option.value]).sort((a, b) => {
+    const orderArray = Array.from(displayOrder);
+    return orderArray.indexOf(b.value) - orderArray.indexOf(a.value);
+  });
+  const getAvailableRuleTypes = (type) => {
+    return referenceTypeOptions.filter((option) => {
+      return !visibleRuleTypes.some(
+        (visibleOption) => visibleOption.value === option.value
+      ) || option.value === type;
+    });
+  };
+  const showAddButton = Object.values(watchedEnabledRules).some(
+    (value) => !value
+  );
+  return /* @__PURE__ */ jsx(RouteFocusModal.Form, { form, children: /* @__PURE__ */ jsxs(
+    KeyboundForm,
+    {
+      className: "flex h-full flex-col overflow-hidden",
+      onSubmit: handleSubmit,
+      children: [
+        /* @__PURE__ */ jsx(RouteFocusModal.Header, {}),
+        /* @__PURE__ */ jsx(RouteFocusModal.Body, { className: "flex overflow-hidden", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: clx(
+              "flex h-full w-full flex-col items-center overflow-y-auto p-16"
+            ),
+            children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-8", children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(Heading, { children: "Create Commission Rate" }),
+                /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Configure a new commission rate for your marketplace." })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-4", children: [
+                /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [
+                  /* @__PURE__ */ jsx(
+                    Form.Field,
+                    {
+                      control: form.control,
+                      name: "name",
+                      render: ({ field }) => /* @__PURE__ */ jsxs(Form.Item, { children: [
+                        /* @__PURE__ */ jsx(Form.Label, { children: "Name" }),
+                        /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
+                        /* @__PURE__ */ jsx(Form.ErrorMessage, {})
+                      ] })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Form.Field,
+                    {
+                      control: form.control,
+                      name: "code",
+                      render: ({ field }) => /* @__PURE__ */ jsxs(Form.Item, { children: [
+                        /* @__PURE__ */ jsx(Form.Label, { children: "Code" }),
+                        /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
+                        /* @__PURE__ */ jsx(Form.ErrorMessage, {})
+                      ] })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [
+                  /* @__PURE__ */ jsx(
+                    Form.Field,
+                    {
+                      control: form.control,
+                      name: "type",
+                      render: ({ field: { onChange, ref, ...field } }) => /* @__PURE__ */ jsxs(Form.Item, { children: [
+                        /* @__PURE__ */ jsx(Form.Label, { children: "Type" }),
+                        /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsxs(Select, { ...field, onValueChange: onChange, children: [
+                          /* @__PURE__ */ jsx(Select.Trigger, { ref, children: /* @__PURE__ */ jsx(Select.Value, {}) }),
+                          /* @__PURE__ */ jsxs(Select.Content, { children: [
+                            /* @__PURE__ */ jsx(Select.Item, { value: "percentage", children: "Percentage" }),
+                            /* @__PURE__ */ jsx(Select.Item, { value: "fixed", children: "Fixed" })
+                          ] })
+                        ] }) }),
+                        /* @__PURE__ */ jsx(Form.ErrorMessage, {})
+                      ] })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Form.Field,
+                    {
+                      control: form.control,
+                      name: "target",
+                      render: ({ field: { onChange, ref, ...field } }) => /* @__PURE__ */ jsxs(Form.Item, { children: [
+                        /* @__PURE__ */ jsx(Form.Label, { children: "Target" }),
+                        /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsxs(Select, { ...field, onValueChange: onChange, children: [
+                          /* @__PURE__ */ jsx(Select.Trigger, { ref, children: /* @__PURE__ */ jsx(Select.Value, {}) }),
+                          /* @__PURE__ */ jsxs(Select.Content, { children: [
+                            /* @__PURE__ */ jsx(Select.Item, { value: "item", children: "Item" }),
+                            /* @__PURE__ */ jsx(Select.Item, { value: "shipping", children: "Shipping" })
+                          ] })
+                        ] }) }),
+                        /* @__PURE__ */ jsx(Form.ErrorMessage, {})
+                      ] })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [
+                  /* @__PURE__ */ jsx(
+                    Form.Field,
+                    {
+                      control: form.control,
+                      name: "currency_code",
+                      render: ({ field: { onChange, ref, ...field } }) => /* @__PURE__ */ jsxs(Form.Item, { children: [
+                        /* @__PURE__ */ jsx(Form.Label, { children: "Currency Code" }),
+                        /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsxs(Select, { ...field, onValueChange: onChange, children: [
+                          /* @__PURE__ */ jsx(Select.Trigger, { ref, children: /* @__PURE__ */ jsx(Select.Value, { placeholder: "Select currency" }) }),
+                          /* @__PURE__ */ jsx(Select.Content, { children: storeCurrencies.map((currency) => /* @__PURE__ */ jsx(
+                            Select.Item,
+                            {
+                              value: currency.code.toLowerCase(),
+                              children: currency.name
+                            },
+                            currency.code
+                          )) })
+                        ] }) }),
+                        /* @__PURE__ */ jsx(Form.ErrorMessage, {})
+                      ] })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Form.Field,
+                    {
+                      control: form.control,
+                      name: "value",
+                      render: ({ field: { value, onChange, ...field } }) => /* @__PURE__ */ jsxs(Form.Item, { children: [
+                        /* @__PURE__ */ jsx(Form.Label, { children: "Rate" }),
+                        /* @__PURE__ */ jsx(Form.Control, { children: watchType === "percentage" ? /* @__PURE__ */ jsx(
+                          PercentageInput,
+                          {
+                            ...field,
+                            value,
+                            decimalsLimit: 4,
+                            onValueChange: (_value, _name, values) => onChange(values?.float ?? 0)
+                          }
+                        ) : /* @__PURE__ */ jsx(
+                          CurrencyInput,
+                          {
+                            min: 0,
+                            onValueChange: (value2) => onChange(value2 ? parseInt(value2) : ""),
+                            code: watchCurrency,
+                            symbol: watchCurrency ? getCurrencySymbol(watchCurrency) : "",
+                            ...field,
+                            value
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsx(Form.ErrorMessage, {})
+                      ] })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [
+                  /* @__PURE__ */ jsx(
+                    Form.Field,
+                    {
+                      control: form.control,
+                      name: "min_amount",
+                      render: ({ field: { value, onChange, ...field } }) => /* @__PURE__ */ jsxs(Form.Item, { children: [
+                        /* @__PURE__ */ jsx(Form.Label, { children: "Minimum Amount" }),
+                        /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(
+                          CurrencyInput,
+                          {
+                            min: 0,
+                            onValueChange: (value2) => onChange(value2 ? parseInt(value2) : ""),
+                            code: watchCurrency,
+                            symbol: watchCurrency ? getCurrencySymbol(watchCurrency) : "",
+                            ...field,
+                            value
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsx(Form.ErrorMessage, {})
+                      ] })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Form.Field,
+                    {
+                      control: form.control,
+                      name: "priority",
+                      render: ({ field }) => /* @__PURE__ */ jsxs(Form.Item, { children: [
+                        /* @__PURE__ */ jsx(Form.Label, { children: "Priority" }),
+                        /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(Input, { type: "number", ...field }) }),
+                        /* @__PURE__ */ jsx(Form.ErrorMessage, {})
+                      ] })
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(
+                Form.Field,
+                {
+                  control: form.control,
+                  name: "is_enabled",
+                  render: ({ field: { value, onChange, ...field } }) => /* @__PURE__ */ jsxs(Form.Item, { children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
+                      /* @__PURE__ */ jsx(Form.Label, { children: "Enabled" }),
+                      /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(
+                        Switch,
+                        {
+                          ...field,
+                          checked: value,
+                          onCheckedChange: onChange
+                        }
+                      ) })
+                    ] }),
+                    /* @__PURE__ */ jsx(Form.Hint, { children: "Enable or disable this commission rate." }),
+                    /* @__PURE__ */ jsx(Form.ErrorMessage, {})
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Form.Field,
+                {
+                  control: form.control,
+                  name: "include_tax",
+                  render: ({ field: { value, onChange, ...field } }) => /* @__PURE__ */ jsxs(Form.Item, { children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
+                      /* @__PURE__ */ jsx(Form.Label, { children: "Include Tax" }),
+                      /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(
+                        Switch,
+                        {
+                          ...field,
+                          checked: value,
+                          onCheckedChange: onChange
+                        }
+                      ) })
+                    ] }),
+                    /* @__PURE__ */ jsx(Form.Hint, { children: "Include tax in the commission calculation." }),
+                    /* @__PURE__ */ jsx(Form.ErrorMessage, {})
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-3", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-x-4", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1", children: [
+                      /* @__PURE__ */ jsx(
+                        Label,
+                        {
+                          id: "commission_rules_label",
+                          htmlFor: "commission_rules",
+                          children: t("taxRegions.fields.targets.label")
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs(
+                        Text,
+                        {
+                          size: "small",
+                          leading: "compact",
+                          className: "text-ui-fg-muted",
+                          children: [
+                            "(",
+                            t("fields.optional"),
+                            ")"
+                          ]
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      Hint,
+                      {
+                        id: "commission_rules_description",
+                        className: "text-pretty",
+                        children: t("taxRegions.fields.targets.hint")
+                      }
+                    )
+                  ] }),
+                  showAddButton && /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      onClick: addRule,
+                      type: "button",
+                      size: "small",
+                      variant: "transparent",
+                      className: "text-ui-fg-interactive hover:text-ui-fg-interactive-hover flex-shrink-0",
+                      children: t("taxRegions.fields.targets.action")
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    id: "commission_rules",
+                    "aria-labelledby": "commission_rules_label",
+                    "aria-describedby": "commission_rules_description",
+                    role: "application",
+                    className: "flex flex-col gap-y-3",
+                    children: visibleRuleTypes.map((ruleType, index) => {
+                      const type = ruleType.value;
+                      const label = ruleType.label;
+                      const isLast = index === visibleRuleTypes.length - 1;
+                      const searchPlaceholder = searchPlaceholders[type];
+                      const options = getAvailableRuleTypes(type);
+                      const { fields, remove } = getControls(type);
+                      const handler = getFieldHandler(type);
+                      const modalId = getStackedModalId(type);
+                      const handleChangeType = (value) => {
+                        disableRule(type);
+                        enableRule(value);
+                      };
+                      return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                        Form.Field,
+                        {
+                          control: form.control,
+                          name: ruleType.value,
+                          render: ({ field }) => {
+                            return /* @__PURE__ */ jsxs(Form.Item, { className: "space-y-0", children: [
+                              /* @__PURE__ */ jsx(Form.Label, { className: "sr-only", children: label }),
+                              /* @__PURE__ */ jsxs(
+                                "div",
+                                {
+                                  className: clx(
+                                    "bg-ui-bg-component shadow-elevation-card-rest transition-fg grid gap-1.5 rounded-xl py-1.5",
+                                    "aria-[invalid='true']:shadow-borders-error"
+                                  ),
+                                  role: "application",
+                                  ...field,
+                                  children: [
+                                    /* @__PURE__ */ jsxs("div", { className: "text-ui-fg-subtle grid gap-1.5 px-1.5 md:grid-cols-2", children: [
+                                      isLast ? /* @__PURE__ */ jsxs(
+                                        Select,
+                                        {
+                                          dir: direction,
+                                          value: type,
+                                          onValueChange: handleChangeType,
+                                          children: [
+                                            /* @__PURE__ */ jsx(Select.Trigger, { className: "bg-ui-bg-field-component hover:bg-ui-bg-field-component-hover", children: /* @__PURE__ */ jsx(Select.Value, {}) }),
+                                            /* @__PURE__ */ jsx(Select.Content, { children: options.map((option) => {
+                                              return /* @__PURE__ */ jsx(
+                                                Select.Item,
+                                                {
+                                                  value: option.value,
+                                                  children: option.label
+                                                },
+                                                option.value
+                                              );
+                                            }) })
+                                          ]
+                                        }
+                                      ) : /* @__PURE__ */ jsx("div", { className: "bg-ui-bg-field shadow-borders-base txt-compact-small rounded-md px-2 py-1.5", children: label }),
+                                      /* @__PURE__ */ jsx("div", { className: "bg-ui-bg-field shadow-borders-base txt-compact-small rounded-md px-2 py-1.5", children: t(
+                                        "taxRegions.fields.targets.operators.in"
+                                      ) })
+                                    ] }),
+                                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 px-1.5", children: [
+                                      /* @__PURE__ */ jsxs(StackedFocusModal, { id: modalId, children: [
+                                        /* @__PURE__ */ jsx(StackedFocusModal.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+                                          "button",
+                                          {
+                                            type: "button",
+                                            className: "bg-ui-bg-field-component hover:bg-ui-bg-field-component-hover shadow-borders-base txt-compact-small text-ui-fg-muted transition-fg focus-visible:shadow-borders-interactive-with-active flex flex-1 items-center gap-x-2 rounded-md px-2 py-1.5 outline-none",
+                                            children: [
+                                              /* @__PURE__ */ jsx(MagnifyingGlass, {}),
+                                              searchPlaceholder
+                                            ]
+                                          }
+                                        ) }),
+                                        /* @__PURE__ */ jsx(StackedFocusModal.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: t("actions.browse") }) }),
+                                        /* @__PURE__ */ jsxs(StackedFocusModal.Content, { children: [
+                                          /* @__PURE__ */ jsxs(StackedFocusModal.Header, { children: [
+                                            /* @__PURE__ */ jsx(StackedFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { className: "sr-only", children: t(
+                                              "taxRegions.fields.targets.modal.header"
+                                            ) }) }),
+                                            /* @__PURE__ */ jsx(StackedFocusModal.Description, { className: "sr-only", children: t(
+                                              "taxRegions.fields.targets.hint"
+                                            ) })
+                                          ] }),
+                                          /* @__PURE__ */ jsx(
+                                            TargetForm,
+                                            {
+                                              type: "focus",
+                                              referenceType: type,
+                                              state: fields,
+                                              setState: handler
+                                            }
+                                          )
+                                        ] })
+                                      ] }),
+                                      /* @__PURE__ */ jsx(
+                                        Button,
+                                        {
+                                          variant: "secondary",
+                                          onClick: () => disableRule(type),
+                                          type: "button",
+                                          children: t("actions.delete")
+                                        }
+                                      )
+                                    ] }),
+                                    fields.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-1.5", children: [
+                                      /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
+                                      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1.5 px-1.5", children: fields.map((field2, index2) => {
+                                        return /* @__PURE__ */ jsx(
+                                          TargetItem,
+                                          {
+                                            index: index2,
+                                            label: field2.label,
+                                            onRemove: remove,
+                                            value: field2.value
+                                          },
+                                          field2.id
+                                        );
+                                      }) })
+                                    ] }) : null
+                                  ]
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(Form.ErrorMessage, { className: "mt-2" })
+                            ] });
+                          }
+                        }
+                      ) }, type);
+                    })
+                  }
+                )
+              ] })
+            ] })
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(RouteFocusModal.Footer, { children: [
+          /* @__PURE__ */ jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: t("actions.cancel") }) }),
+          /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: t("actions.save") })
+        ] })
+      ]
+    }
+  ) });
+};
+
+// src/pages/commission-rates/commission-rate-create/commission-rate-create.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var CommissionRateCreate = () => {
+  const { isLoading, store } = useStore();
+  return /* @__PURE__ */ jsx2(RouteFocusModal, { children: !isLoading && store && /* @__PURE__ */ jsx2(CreateCommissionRateForm, { store }) });
+};
+export {
+  CommissionRateCreate as Component
+};