@mercurjs/admin 2.0.0-canary.100

package/dist/product-variant-edit-5L2GWAHB.js

@@ -0,0 +1,545 @@
+import {
+  transformNullableFormData,
+  transformNullableFormNumber
+} from "./chunk-7RPRNVBS.js";
+import "./chunk-NXDFDEKP.js";
+import {
+  CountrySelect
+} from "./chunk-V74Y5NIV.js";
+import "./chunk-JRTZWK77.js";
+import {
+  Combobox
+} from "./chunk-AW77UWCZ.js";
+import {
+  optionalInt
+} from "./chunk-UXD3VNBO.js";
+import "./chunk-SMQT3ZNO.js";
+import "./chunk-TKGWSUEI.js";
+import {
+  KeyboundForm
+} from "./chunk-U2ZFCAPX.js";
+import {
+  RouteDrawer,
+  useRouteModal
+} from "./chunk-V6LO4BXB.js";
+import {
+  Form
+} from "./chunk-3QSRE5LS.js";
+import {
+  productVariantQueryKeys
+} from "./chunk-YAMNPEPW.js";
+import "./chunk-R325CPYC.js";
+import "./chunk-J54BZXZX.js";
+import "./chunk-JI7HMGMO.js";
+import "./chunk-EWFOFSF7.js";
+import "./chunk-YQYGAFCS.js";
+import "./chunk-HLL6GLZO.js";
+import "./chunk-CARSKIPW.js";
+import "./chunk-25DQRKFS.js";
+import "./chunk-R4O667NT.js";
+import "./chunk-MO7TNIVQ.js";
+import "./chunk-A2F5MDPU.js";
+import "./chunk-L7DIEO5B.js";
+import "./chunk-EEOEIXDA.js";
+import "./chunk-OEDISQ2O.js";
+import "./chunk-GCEOEV6P.js";
+import "./chunk-PYF5EER5.js";
+import "./chunk-HPQG3PEA.js";
+import "./chunk-FIVW6L2I.js";
+import "./chunk-Q6GUA5VE.js";
+import "./chunk-QVLL4MKH.js";
+import "./chunk-I5LLMPI2.js";
+import "./chunk-VXW3BCN2.js";
+import "./chunk-VHCDSNXF.js";
+import "./chunk-EJY35WBK.js";
+import "./chunk-GYRTURN7.js";
+import "./chunk-QUTZUW55.js";
+import "./chunk-XFKRBJLK.js";
+import {
+  useProduct,
+  useProductVariant,
+  useUpdateProductVariant
+} from "./chunk-WBNGBRBK.js";
+import {
+  queryClient
+} from "./chunk-RHKRREUU.js";
+import "./chunk-ZA2KFUFR.js";
+import {
+  sdk
+} from "./chunk-LXZXXOJ3.js";
+import "./chunk-NBMM2TZK.js";
+
+// src/pages/product-variants/product-variant-edit/product-variant-edit.tsx
+import { Heading as Heading2 } from "@medusajs/ui";
+import { useTranslation as useTranslation2 } from "react-i18next";
+import { useLoaderData, useParams, useSearchParams } from "react-router-dom";
+
+// src/pages/product-variants/product-variant-edit/components/product-edit-variant-form/product-edit-variant-form.tsx
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button, Divider, Heading, Input, Switch, toast } from "@medusajs/ui";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { z } from "zod";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ProductEditVariantSchema = z.object({
+  title: z.string().min(1),
+  material: z.string().optional(),
+  sku: z.string().optional(),
+  ean: z.string().optional(),
+  upc: z.string().optional(),
+  barcode: z.string().optional(),
+  manage_inventory: z.boolean(),
+  allow_backorder: z.boolean(),
+  weight: optionalInt,
+  height: optionalInt,
+  width: optionalInt,
+  length: optionalInt,
+  mid_code: z.string().optional(),
+  hs_code: z.string().optional(),
+  origin_country: z.string().optional(),
+  options: z.record(z.string())
+});
+var ProductEditVariantForm = ({
+  variant,
+  product
+}) => {
+  const { t } = useTranslation();
+  const { handleSuccess } = useRouteModal();
+  const defaultOptions = product.options?.reduce((acc, option) => {
+    const varOpt = variant.options?.find((o) => o.option_id === option.id);
+    acc[option.title] = varOpt?.value;
+    return acc;
+  }, {});
+  const form = useForm({
+    defaultValues: {
+      title: variant.title || "",
+      material: variant.material || "",
+      sku: variant.sku || "",
+      ean: variant.ean || "",
+      upc: variant.upc || "",
+      barcode: variant.barcode || "",
+      manage_inventory: variant.manage_inventory || false,
+      allow_backorder: variant.allow_backorder || false,
+      weight: variant.weight || "",
+      height: variant.height || "",
+      width: variant.width || "",
+      length: variant.length || "",
+      mid_code: variant.mid_code || "",
+      hs_code: variant.hs_code || "",
+      origin_country: variant.origin_country || "",
+      options: defaultOptions
+    },
+    resolver: zodResolver(ProductEditVariantSchema)
+  });
+  const { mutateAsync, isPending } = useUpdateProductVariant(
+    variant.product_id,
+    variant.id
+  );
+  const handleSubmit = form.handleSubmit(async (data) => {
+    const {
+      title,
+      weight,
+      height,
+      width,
+      length,
+      allow_backorder,
+      manage_inventory,
+      options,
+      ...optional
+    } = data;
+    const nullableData = transformNullableFormData(optional);
+    await mutateAsync(
+      {
+        id: variant.id,
+        weight: transformNullableFormNumber(weight),
+        height: transformNullableFormNumber(height),
+        width: transformNullableFormNumber(width),
+        length: transformNullableFormNumber(length),
+        title,
+        allow_backorder,
+        manage_inventory,
+        options,
+        ...nullableData
+      },
+      {
+        onSuccess: () => {
+          handleSuccess("../");
+          toast.success(t("products.variant.edit.success"));
+        },
+        onError: (error) => {
+          toast.error(error.message);
+        }
+      }
+    );
+  });
+  return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, "data-testid": "product-variant-edit-form", children: /* @__PURE__ */ jsxs(
+    KeyboundForm,
+    {
+      onSubmit: handleSubmit,
+      className: "flex size-full flex-col overflow-hidden",
+      "data-testid": "product-variant-edit-keybound-form",
+      children: [
+        /* @__PURE__ */ jsxs(RouteDrawer.Body, { className: "flex size-full flex-col gap-y-8 overflow-auto", "data-testid": "product-variant-edit-form-body", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-4", "data-testid": "product-variant-edit-form-main-fields", children: [
+            /* @__PURE__ */ jsx(
+              Form.Field,
+              {
+                control: form.control,
+                name: "title",
+                render: ({ field }) => {
+                  return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "product-variant-edit-form-title-item", children: [
+                    /* @__PURE__ */ jsx(Form.Label, { "data-testid": "product-variant-edit-form-title-label", children: t("fields.title") }),
+                    /* @__PURE__ */ jsx(Form.Control, { "data-testid": "product-variant-edit-form-title-control", children: /* @__PURE__ */ jsx("div", { "data-testid": "product-variant-edit-form-title-input-wrapper", children: /* @__PURE__ */ jsx(Input, { ...field, "data-testid": "product-variant-edit-form-title-input" }) }) }),
+                    /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "product-variant-edit-form-title-error" })
+                  ] });
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Form.Field,
+              {
+                control: form.control,
+                name: "material",
+                render: ({ field }) => {
+                  return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "product-variant-edit-form-material-item", children: [
+                    /* @__PURE__ */ jsx(Form.Label, { optional: true, "data-testid": "product-variant-edit-form-material-label", children: t("fields.material") }),
+                    /* @__PURE__ */ jsx(Form.Control, { "data-testid": "product-variant-edit-form-material-control", children: /* @__PURE__ */ jsx("div", { "data-testid": "product-variant-edit-form-material-input-wrapper", children: /* @__PURE__ */ jsx(Input, { ...field, "data-testid": "product-variant-edit-form-material-input" }) }) }),
+                    /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "product-variant-edit-form-material-error" })
+                  ] });
+                }
+              }
+            ),
+            product.options?.map((option) => {
+              const optionKey = option.title.toLowerCase().replace(/\s+/g, "-");
+              return /* @__PURE__ */ jsx(
+                Form.Field,
+                {
+                  control: form.control,
+                  name: `options.${option.title}`,
+                  render: ({ field: { value, onChange, ...field } }) => {
+                    return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": `product-variant-edit-form-option-${optionKey}-item`, children: [
+                      /* @__PURE__ */ jsx(Form.Label, { "data-testid": `product-variant-edit-form-option-${optionKey}-label`, children: option.title }),
+                      /* @__PURE__ */ jsx(Form.Control, { "data-testid": `product-variant-edit-form-option-${optionKey}-control`, children: /* @__PURE__ */ jsx("div", { "data-testid": `product-variant-edit-form-option-${optionKey}-combobox-wrapper`, children: /* @__PURE__ */ jsx(
+                        Combobox,
+                        {
+                          value,
+                          onChange: (v) => {
+                            onChange(v);
+                          },
+                          ...field,
+                          options: option.values.map((v) => ({
+                            label: v.value,
+                            value: v.value
+                          })),
+                          "data-testid": `product-variant-edit-form-option-${optionKey}-combobox`
+                        }
+                      ) }) }),
+                      /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": `product-variant-edit-form-option-${optionKey}-error` })
+                    ] });
+                  }
+                },
+                option.id
+              );
+            })
+          ] }),
+          /* @__PURE__ */ jsx(Divider, { "data-testid": "product-variant-edit-form-divider-1" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-8", "data-testid": "product-variant-edit-form-inventory-section", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-4", "data-testid": "product-variant-edit-form-inventory-fields", children: [
+              /* @__PURE__ */ jsx(Heading, { level: "h2", "data-testid": "product-variant-edit-form-inventory-header", children: t("products.variant.inventory.header") }),
+              /* @__PURE__ */ jsx(
+                Form.Field,
+                {
+                  control: form.control,
+                  name: "sku",
+                  render: ({ field }) => {
+                    return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "product-variant-edit-form-sku-item", children: [
+                      /* @__PURE__ */ jsx(Form.Label, { optional: true, "data-testid": "product-variant-edit-form-sku-label", children: t("fields.sku") }),
+                      /* @__PURE__ */ jsx(Form.Control, { "data-testid": "product-variant-edit-form-sku-control", children: /* @__PURE__ */ jsx("div", { "data-testid": "product-variant-edit-form-sku-input-wrapper", children: /* @__PURE__ */ jsx(Input, { ...field, "data-testid": "product-variant-edit-form-sku-input" }) }) }),
+                      /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "product-variant-edit-form-sku-error" })
+                    ] });
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Form.Field,
+                {
+                  control: form.control,
+                  name: "ean",
+                  render: ({ field }) => {
+                    return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "product-variant-edit-form-ean-item", children: [
+                      /* @__PURE__ */ jsx(Form.Label, { optional: true, "data-testid": "product-variant-edit-form-ean-label", children: t("fields.ean") }),
+                      /* @__PURE__ */ jsx(Form.Control, { "data-testid": "product-variant-edit-form-ean-control", children: /* @__PURE__ */ jsx("div", { "data-testid": "product-variant-edit-form-ean-input-wrapper", children: /* @__PURE__ */ jsx(Input, { ...field, "data-testid": "product-variant-edit-form-ean-input" }) }) }),
+                      /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "product-variant-edit-form-ean-error" })
+                    ] });
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Form.Field,
+                {
+                  control: form.control,
+                  name: "upc",
+                  render: ({ field }) => {
+                    return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "product-variant-edit-form-upc-item", children: [
+                      /* @__PURE__ */ jsx(Form.Label, { optional: true, "data-testid": "product-variant-edit-form-upc-label", children: t("fields.upc") }),
+                      /* @__PURE__ */ jsx(Form.Control, { "data-testid": "product-variant-edit-form-upc-control", children: /* @__PURE__ */ jsx("div", { "data-testid": "product-variant-edit-form-upc-input-wrapper", children: /* @__PURE__ */ jsx(Input, { ...field, "data-testid": "product-variant-edit-form-upc-input" }) }) }),
+                      /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "product-variant-edit-form-upc-error" })
+                    ] });
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Form.Field,
+                {
+                  control: form.control,
+                  name: "barcode",
+                  render: ({ field }) => {
+                    return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "product-variant-edit-form-barcode-item", children: [
+                      /* @__PURE__ */ jsx(Form.Label, { optional: true, "data-testid": "product-variant-edit-form-barcode-label", children: t("fields.barcode") }),
+                      /* @__PURE__ */ jsx(Form.Control, { "data-testid": "product-variant-edit-form-barcode-control", children: /* @__PURE__ */ jsx("div", { "data-testid": "product-variant-edit-form-barcode-input-wrapper", children: /* @__PURE__ */ jsx(Input, { ...field, "data-testid": "product-variant-edit-form-barcode-input" }) }) }),
+                      /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "product-variant-edit-form-barcode-error" })
+                    ] });
+                  }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              Form.Field,
+              {
+                control: form.control,
+                name: "manage_inventory",
+                render: ({ field: { value, onChange, ...field } }) => {
+                  return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "product-variant-edit-form-manage-inventory-item", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-1", "data-testid": "product-variant-edit-form-manage-inventory-container", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", "data-testid": "product-variant-edit-form-manage-inventory-control-row", children: [
+                        /* @__PURE__ */ jsx(Form.Label, { "data-testid": "product-variant-edit-form-manage-inventory-label", children: t("products.variant.inventory.manageInventoryLabel") }),
+                        /* @__PURE__ */ jsx(Form.Control, { "data-testid": "product-variant-edit-form-manage-inventory-control", children: /* @__PURE__ */ jsx("div", { "data-testid": "product-variant-edit-form-manage-inventory-switch-wrapper", children: /* @__PURE__ */ jsx(
+                          Switch,
+                          {
+                            dir: "ltr",
+                            checked: value,
+                            className: "rtl:rotate-180",
+                            onCheckedChange: (checked) => onChange(!!checked),
+                            ...field,
+                            "data-testid": "product-variant-edit-form-manage-inventory-switch"
+                          }
+                        ) }) })
+                      ] }),
+                      /* @__PURE__ */ jsx(Form.Hint, { "data-testid": "product-variant-edit-form-manage-inventory-hint", children: t("products.variant.inventory.manageInventoryHint") })
+                    ] }),
+                    /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "product-variant-edit-form-manage-inventory-error" })
+                  ] });
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Form.Field,
+              {
+                control: form.control,
+                name: "allow_backorder",
+                render: ({ field: { value, onChange, ...field } }) => {
+                  return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "product-variant-edit-form-allow-backorder-item", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-1", "data-testid": "product-variant-edit-form-allow-backorder-container", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", "data-testid": "product-variant-edit-form-allow-backorder-control-row", children: [
+                        /* @__PURE__ */ jsx(Form.Label, { "data-testid": "product-variant-edit-form-allow-backorder-label", children: t("products.variant.inventory.allowBackordersLabel") }),
+                        /* @__PURE__ */ jsx(Form.Control, { "data-testid": "product-variant-edit-form-allow-backorder-control", children: /* @__PURE__ */ jsx("div", { "data-testid": "product-variant-edit-form-allow-backorder-switch-wrapper", children: /* @__PURE__ */ jsx(
+                          Switch,
+                          {
+                            dir: "ltr",
+                            className: "rtl:rotate-180",
+                            checked: value,
+                            onCheckedChange: (checked) => onChange(!!checked),
+                            ...field,
+                            "data-testid": "product-variant-edit-form-allow-backorder-switch"
+                          }
+                        ) }) })
+                      ] }),
+                      /* @__PURE__ */ jsx(Form.Hint, { "data-testid": "product-variant-edit-form-allow-backorder-hint", children: t("products.variant.inventory.allowBackordersHint") })
+                    ] }),
+                    /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "product-variant-edit-form-allow-backorder-error" })
+                  ] });
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(Divider, { "data-testid": "product-variant-edit-form-divider-2" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-4", "data-testid": "product-variant-edit-form-attributes-section", children: [
+            /* @__PURE__ */ jsx(Heading, { level: "h2", "data-testid": "product-variant-edit-form-attributes-header", children: t("products.attributes") }),
+            /* @__PURE__ */ jsx(
+              Form.Field,
+              {
+                control: form.control,
+                name: "weight",
+                render: ({ field }) => {
+                  return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "product-variant-edit-form-weight-item", children: [
+                    /* @__PURE__ */ jsx(Form.Label, { optional: true, "data-testid": "product-variant-edit-form-weight-label", children: t("fields.weight") }),
+                    /* @__PURE__ */ jsx(Form.Control, { "data-testid": "product-variant-edit-form-weight-control", children: /* @__PURE__ */ jsx("div", { "data-testid": "product-variant-edit-form-weight-input-wrapper", children: /* @__PURE__ */ jsx(Input, { type: "number", ...field, "data-testid": "product-variant-edit-form-weight-input" }) }) }),
+                    /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "product-variant-edit-form-weight-error" })
+                  ] });
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Form.Field,
+              {
+                control: form.control,
+                name: "width",
+                render: ({ field }) => {
+                  return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "product-variant-edit-form-width-item", children: [
+                    /* @__PURE__ */ jsx(Form.Label, { optional: true, "data-testid": "product-variant-edit-form-width-label", children: t("fields.width") }),
+                    /* @__PURE__ */ jsx(Form.Control, { "data-testid": "product-variant-edit-form-width-control", children: /* @__PURE__ */ jsx("div", { "data-testid": "product-variant-edit-form-width-input-wrapper", children: /* @__PURE__ */ jsx(Input, { type: "number", ...field, "data-testid": "product-variant-edit-form-width-input" }) }) }),
+                    /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "product-variant-edit-form-width-error" })
+                  ] });
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Form.Field,
+              {
+                control: form.control,
+                name: "length",
+                render: ({ field }) => {
+                  return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "product-variant-edit-form-length-item", children: [
+                    /* @__PURE__ */ jsx(Form.Label, { optional: true, "data-testid": "product-variant-edit-form-length-label", children: t("fields.length") }),
+                    /* @__PURE__ */ jsx(Form.Control, { "data-testid": "product-variant-edit-form-length-control", children: /* @__PURE__ */ jsx("div", { "data-testid": "product-variant-edit-form-length-input-wrapper", children: /* @__PURE__ */ jsx(Input, { type: "number", ...field, "data-testid": "product-variant-edit-form-length-input" }) }) }),
+                    /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "product-variant-edit-form-length-error" })
+                  ] });
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Form.Field,
+              {
+                control: form.control,
+                name: "height",
+                render: ({ field }) => {
+                  return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "product-variant-edit-form-height-item", children: [
+                    /* @__PURE__ */ jsx(Form.Label, { optional: true, "data-testid": "product-variant-edit-form-height-label", children: t("fields.height") }),
+                    /* @__PURE__ */ jsx(Form.Control, { "data-testid": "product-variant-edit-form-height-control", children: /* @__PURE__ */ jsx("div", { "data-testid": "product-variant-edit-form-height-input-wrapper", children: /* @__PURE__ */ jsx(Input, { type: "number", ...field, "data-testid": "product-variant-edit-form-height-input" }) }) }),
+                    /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "product-variant-edit-form-height-error" })
+                  ] });
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Form.Field,
+              {
+                control: form.control,
+                name: "mid_code",
+                render: ({ field }) => {
+                  return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "product-variant-edit-form-mid-code-item", children: [
+                    /* @__PURE__ */ jsx(Form.Label, { optional: true, "data-testid": "product-variant-edit-form-mid-code-label", children: t("fields.midCode") }),
+                    /* @__PURE__ */ jsx(Form.Control, { "data-testid": "product-variant-edit-form-mid-code-control", children: /* @__PURE__ */ jsx("div", { "data-testid": "product-variant-edit-form-mid-code-input-wrapper", children: /* @__PURE__ */ jsx(Input, { ...field, "data-testid": "product-variant-edit-form-mid-code-input" }) }) }),
+                    /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "product-variant-edit-form-mid-code-error" })
+                  ] });
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Form.Field,
+              {
+                control: form.control,
+                name: "hs_code",
+                render: ({ field }) => {
+                  return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "product-variant-edit-form-hs-code-item", children: [
+                    /* @__PURE__ */ jsx(Form.Label, { optional: true, "data-testid": "product-variant-edit-form-hs-code-label", children: t("fields.hsCode") }),
+                    /* @__PURE__ */ jsx(Form.Control, { "data-testid": "product-variant-edit-form-hs-code-control", children: /* @__PURE__ */ jsx("div", { "data-testid": "product-variant-edit-form-hs-code-input-wrapper", children: /* @__PURE__ */ jsx(Input, { ...field, "data-testid": "product-variant-edit-form-hs-code-input" }) }) }),
+                    /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "product-variant-edit-form-hs-code-error" })
+                  ] });
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Form.Field,
+              {
+                control: form.control,
+                name: "origin_country",
+                render: ({ field }) => {
+                  return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "product-variant-edit-form-origin-country-item", children: [
+                    /* @__PURE__ */ jsx(Form.Label, { optional: true, "data-testid": "product-variant-edit-form-origin-country-label", children: t("fields.countryOfOrigin") }),
+                    /* @__PURE__ */ jsx(Form.Control, { "data-testid": "product-variant-edit-form-origin-country-control", children: /* @__PURE__ */ jsx(CountrySelect, { ...field, "data-testid": "product-variant-edit-form-origin-country-select" }) }),
+                    /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "product-variant-edit-form-origin-country-error" })
+                  ] });
+                }
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(RouteDrawer.Footer, { "data-testid": "product-variant-edit-form-footer", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", "data-testid": "product-variant-edit-form-footer-actions", children: [
+          /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, "data-testid": "product-variant-edit-form-cancel-button-wrapper", children: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "small", "data-testid": "product-variant-edit-form-cancel-button", children: t("actions.cancel") }) }),
+          /* @__PURE__ */ jsx(Button, { type: "submit", size: "small", isLoading: isPending, "data-testid": "product-variant-edit-form-save-button", children: t("actions.save") })
+        ] }) })
+      ]
+    }
+  ) });
+};
+
+// src/pages/product-variants/product-variant-edit/product-variant-edit.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ProductVariantEdit = () => {
+  const initialData = useLoaderData();
+  const { t } = useTranslation2();
+  const { id, variant_id } = useParams();
+  const [URLSearchParms] = useSearchParams();
+  const searchVariantId = URLSearchParms.get("variant_id");
+  const { variant, isPending, isError, error } = useProductVariant(
+    id,
+    variant_id || searchVariantId,
+    void 0,
+    {
+      initialData
+    }
+  );
+  const {
+    product,
+    isPending: isProductPending,
+    isError: isProductError,
+    error: productError
+  } = useProduct(
+    variant?.product_id,
+    {
+      fields: "-variants"
+    },
+    {
+      enabled: !!variant?.product_id
+    }
+  );
+  const ready = !isPending && !!variant && !isProductPending && !!product;
+  if (isError) {
+    throw error;
+  }
+  if (isProductError) {
+    throw productError;
+  }
+  return /* @__PURE__ */ jsxs2(RouteDrawer, { "data-testid": "product-variant-edit-drawer", children: [
+    /* @__PURE__ */ jsx2(RouteDrawer.Header, { "data-testid": "product-variant-edit-drawer-header", children: /* @__PURE__ */ jsx2(RouteDrawer.Title, { asChild: true, "data-testid": "product-variant-edit-drawer-title", children: /* @__PURE__ */ jsx2(Heading2, { "data-testid": "product-variant-edit-drawer-title-text", children: t("products.variant.edit.header") }) }) }),
+    ready && /* @__PURE__ */ jsx2(ProductEditVariantForm, { variant, product })
+  ] });
+};
+
+// src/pages/product-variants/product-variant-edit/loader.ts
+var queryFn = async (id, variantId) => {
+  return await sdk.admin.products.$id.variants.$variantId.query({
+    $id: id,
+    $variantId: variantId
+  });
+};
+var editProductVariantQuery = (id, variantId) => ({
+  queryKey: productVariantQueryKeys.detail(variantId),
+  queryFn: async () => queryFn(id, variantId)
+});
+var editProductVariantLoader = async ({
+  params,
+  request
+}) => {
+  const id = params.id;
+  const searchParams = new URL(request.url).searchParams;
+  const searchVariantId = searchParams.get("variant_id");
+  const variantId = params.variant_id || searchVariantId;
+  const query = editProductVariantQuery(id, variantId || searchVariantId);
+  return queryClient.getQueryData(query.queryKey) ?? await queryClient.fetchQuery(query);
+};
+export {
+  ProductVariantEdit as Component,
+  editProductVariantLoader as loader
+};