@mercurjs/admin 2.1.2 → 2.2.0-canary.1

package/dist/product-variant-edit-6W7LKCEE.js

@@ -0,0 +1,867 @@
+import {
+  transformNullableFormData,
+  transformNullableFormNumber
+} from "./chunk-7RPRNVBS.js";
+import "./chunk-NXDFDEKP.js";
+import {
+  CountrySelect
+} from "./chunk-V74Y5NIV.js";
+import {
+  AttributeValueInput
+} from "./chunk-57BHSFNA.js";
+import "./chunk-JRTZWK77.js";
+import {
+  optionalInt
+} from "./chunk-UXD3VNBO.js";
+import "./chunk-SMQT3ZNO.js";
+import "./chunk-AW77UWCZ.js";
+import "./chunk-TKGWSUEI.js";
+import {
+  KeyboundForm
+} from "./chunk-U2ZFCAPX.js";
+import {
+  RouteDrawer,
+  useRouteModal
+} from "./chunk-FWJLS7XD.js";
+import {
+  Form
+} from "./chunk-3QSRE5LS.js";
+import {
+  require_dist
+} from "./chunk-2MDGYHWN.js";
+import "./chunk-AXTQMIIK.js";
+import "./chunk-OH4AABUT.js";
+import "./chunk-AEMDNTW5.js";
+import "./chunk-LYD3C73Z.js";
+import "./chunk-FTAR3BDS.js";
+import "./chunk-46M463BR.js";
+import "./chunk-ZZ3XFIEM.js";
+import "./chunk-533GMKEG.js";
+import "./chunk-YFRC6GEN.js";
+import "./chunk-DAXXLQKB.js";
+import "./chunk-OHOWEMHO.js";
+import "./chunk-JPNPTILP.js";
+import "./chunk-GKGLVDDV.js";
+import "./chunk-N6SI4IIT.js";
+import "./chunk-WJJXUXSO.js";
+import "./chunk-LAPEZATU.js";
+import "./chunk-OSEIN4Y2.js";
+import "./chunk-XZZTC7E5.js";
+import "./chunk-ZN7LWXVC.js";
+import "./chunk-VYMODH6P.js";
+import "./chunk-LEG67A2R.js";
+import "./chunk-PRBE5CM3.js";
+import "./chunk-5TRY5IMZ.js";
+import "./chunk-EPHVGD5Z.js";
+import "./chunk-B3EEDC47.js";
+import "./chunk-A772RAKB.js";
+import "./chunk-ESPLVOFC.js";
+import "./chunk-FXWKGNRV.js";
+import "./chunk-VDKOJ5WD.js";
+import "./chunk-S5BJ5CMF.js";
+import "./chunk-H5PYBIOZ.js";
+import {
+  useProduct,
+  useProductVariant,
+  useUpdateProductVariant,
+  variantsQueryKeys
+} from "./chunk-2YYXP6XI.js";
+import {
+  queryClient
+} from "./chunk-RHKRREUU.js";
+import "./chunk-ZA2KFUFR.js";
+import {
+  sdk
+} from "./chunk-ZBWL72TB.js";
+import {
+  __toESM
+} from "./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
+var import_types = __toESM(require_dist(), 1);
+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(),
+  attribute_values: z.record(z.union([z.string(), z.array(z.string())])).optional()
+});
+var ProductEditVariantForm = ({
+  variant,
+  product
+}) => {
+  const { t } = useTranslation();
+  const { handleSuccess } = useRouteModal();
+  const variantAttributes = product.attributes?.filter((a) => a.is_variant_axis) ?? [];
+  const variantAttrValues = variant.attribute_values ?? [];
+  const defaultAttributeValues = variantAttributes.reduce((acc, attribute) => {
+    const key = attribute.handle ?? attribute.id;
+    const matched = variantAttrValues.find(
+      (v) => v.attribute?.id === attribute.id
+    );
+    acc[key] = matched?.name ?? "";
+    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 || "",
+      attribute_values: defaultAttributeValues
+    },
+    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,
+      attribute_values,
+      ...optional
+    } = data;
+    const nullableData = transformNullableFormData(optional);
+    const cleanedAttributeValues = Object.fromEntries(
+      Object.entries(attribute_values ?? {}).filter(
+        ([, v]) => Array.isArray(v) ? v.length > 0 : !!v
+      )
+    );
+    await mutateAsync(
+      {
+        id: variant.id,
+        weight: transformNullableFormNumber(weight),
+        height: transformNullableFormNumber(height),
+        width: transformNullableFormNumber(width),
+        length: transformNullableFormNumber(length),
+        title,
+        // allow_backorder,
+        // manage_inventory,
+        attribute_values: Object.keys(cleanedAttributeValues).length ? cleanedAttributeValues : void 0,
+        ...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" })
+                          ] });
+                        }
+                      }
+                    ),
+                    variantAttributes.map((attribute) => {
+                      const fieldKey = attribute.handle ?? attribute.id;
+                      return /* @__PURE__ */ jsx(
+                        Form.Field,
+                        {
+                          control: form.control,
+                          name: `attribute_values.${fieldKey}`,
+                          render: ({ field: { value, onChange } }) => {
+                            return /* @__PURE__ */ jsxs(
+                              Form.Item,
+                              {
+                                "data-testid": `product-variant-edit-form-attribute-${attribute.id}-item`,
+                                children: [
+                                  /* @__PURE__ */ jsx(
+                                    Form.Label,
+                                    {
+                                      "data-testid": `product-variant-edit-form-attribute-${attribute.id}-label`,
+                                      children: attribute.name
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsx(
+                                    Form.Control,
+                                    {
+                                      "data-testid": `product-variant-edit-form-attribute-${attribute.id}-control`,
+                                      children: /* @__PURE__ */ jsx(
+                                        AttributeValueInput,
+                                        {
+                                          type: import_types.AttributeType.SINGLE_SELECT,
+                                          value: typeof value === "string" ? value : "",
+                                          onChange,
+                                          availableValues: (attribute.values ?? []).map(
+                                            (v) => ({
+                                              id: v.id,
+                                              name: v.name
+                                            })
+                                          )
+                                        }
+                                      )
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsx(
+                                    Form.ErrorMessage,
+                                    {
+                                      "data-testid": `product-variant-edit-form-attribute-${attribute.id}-error`
+                                    }
+                                  )
+                                ]
+                              }
+                            );
+                          }
+                        },
+                        attribute.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: variantsQueryKeys.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
+};