@mercurjs/admin 2.0.0-canary.100

package/dist/product-detail-F67SLUIA.js

@@ -0,0 +1,103 @@
+import {
+  ProductDetailPage
+} from "./chunk-JAJMMPOF.js";
+import "./chunk-4GPAS5GW.js";
+import "./chunk-U2EI2ZLM.js";
+import "./chunk-W6Y3PPU5.js";
+import "./chunk-33XUAKRP.js";
+import "./chunk-VZEMURY7.js";
+import "./chunk-FI474ADU.js";
+import "./chunk-3XPXUIK3.js";
+import "./chunk-JRTZWK77.js";
+import {
+  PRODUCT_DETAIL_QUERY
+} from "./chunk-35NDMIYZ.js";
+import "./chunk-V5J73NPW.js";
+import "./chunk-XIZLPYEE.js";
+import "./chunk-54RTJBYO.js";
+import "./chunk-UQITHKTH.js";
+import "./chunk-INNFZYX2.js";
+import "./chunk-BDGZ4EQO.js";
+import "./chunk-LAVHRER2.js";
+import "./chunk-Y7QKP6QU.js";
+import "./chunk-THHRRYRS.js";
+import "./chunk-UZWFZMOX.js";
+import "./chunk-XQNVC4Q7.js";
+import "./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 {
+  productsQueryKeys,
+  useProduct
+} 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/products/product-detail/breadcrumb.tsx
+import { jsx } from "react/jsx-runtime";
+var ProductDetailBreadcrumb = (props) => {
+  const { id } = props.params || {};
+  const { product } = useProduct(
+    id,
+    PRODUCT_DETAIL_QUERY,
+    {
+      initialData: props.data,
+      enabled: Boolean(id)
+    }
+  );
+  if (!product) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("span", { children: product.title });
+};
+
+// src/pages/products/product-detail/loader.ts
+var productDetailQuery = (id) => ({
+  queryKey: productsQueryKeys.detail(id, PRODUCT_DETAIL_QUERY),
+  queryFn: async () => sdk.admin.products.$id.query({ $id: id, ...PRODUCT_DETAIL_QUERY })
+});
+var productLoader = async ({ params }) => {
+  const id = params.id;
+  const query = productDetailQuery(id);
+  const response = await queryClient.ensureQueryData({
+    ...query,
+    staleTime: 9e4
+  });
+  return response;
+};
+export {
+  ProductDetailBreadcrumb as Breadcrumb,
+  ProductDetailPage as Component,
+  productLoader as loader
+};

package/dist/product-edit-HFWSBQQI.js

@@ -0,0 +1,401 @@
+import {
+  transformNullableFormData
+} from "./chunk-7RPRNVBS.js";
+import {
+  PRODUCT_DETAIL_QUERY
+} from "./chunk-35NDMIYZ.js";
+import "./chunk-SMQT3ZNO.js";
+import {
+  SwitchBox
+} from "./chunk-YVCBMOJG.js";
+import "./chunk-TKGWSUEI.js";
+import {
+  KeyboundForm
+} from "./chunk-U2ZFCAPX.js";
+import {
+  useDocumentDirection
+} from "./chunk-Y7QKP6QU.js";
+import {
+  RouteDrawer,
+  useRouteModal
+} from "./chunk-V6LO4BXB.js";
+import {
+  Form
+} from "./chunk-3QSRE5LS.js";
+import {
+  useProduct,
+  useUpdateProduct
+} from "./chunk-WBNGBRBK.js";
+import "./chunk-RHKRREUU.js";
+import "./chunk-ZA2KFUFR.js";
+import "./chunk-LXZXXOJ3.js";
+import "./chunk-NBMM2TZK.js";
+
+// src/pages/products/product-edit/product-edit.tsx
+import { Heading } from "@medusajs/ui";
+import { useTranslation as useTranslation2 } from "react-i18next";
+import { useParams } from "react-router-dom";
+
+// src/pages/products/product-edit/components/edit-product-form/edit-product-form.tsx
+import { Button, Input, Select, Text, Textarea, toast } from "@medusajs/ui";
+import { useTranslation } from "react-i18next";
+import * as zod from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { jsx, jsxs } from "react/jsx-runtime";
+var EditProductSchema = zod.object({
+  status: zod.enum(["draft", "published", "proposed", "rejected"]),
+  title: zod.string().min(1),
+  subtitle: zod.string().optional(),
+  handle: zod.string().min(1),
+  material: zod.string().optional(),
+  description: zod.string().optional(),
+  discountable: zod.boolean()
+});
+var EditProductForm = ({ product }) => {
+  const { t } = useTranslation();
+  const { handleSuccess } = useRouteModal();
+  const direction = useDocumentDirection();
+  const form = useForm({
+    defaultValues: {
+      status: product.status,
+      title: product.title,
+      material: product.material || "",
+      subtitle: product.subtitle || "",
+      handle: product.handle || "",
+      description: product.description || "",
+      discountable: product.discountable
+    },
+    resolver: zodResolver(EditProductSchema)
+  });
+  const { mutateAsync, isPending } = useUpdateProduct(product.id);
+  const handleSubmit = form.handleSubmit(async (data) => {
+    const { title, discountable, handle, status, ...optional } = data;
+    const nullableData = transformNullableFormData(optional);
+    await mutateAsync(
+      {
+        title,
+        discountable,
+        handle,
+        status,
+        ...nullableData
+      },
+      {
+        onSuccess: ({ product: product2 }) => {
+          toast.success(
+            t("products.edit.successToast", { title: product2.title })
+          );
+          handleSuccess();
+        },
+        onError: (e) => {
+          toast.error(e.message);
+        }
+      }
+    );
+  });
+  return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, "data-testid": "product-edit-form", children: /* @__PURE__ */ jsxs(
+    KeyboundForm,
+    {
+      onSubmit: handleSubmit,
+      className: "flex flex-1 flex-col overflow-hidden",
+      "data-testid": "product-edit-keybound-form",
+      children: [
+        /* @__PURE__ */ jsx(
+          RouteDrawer.Body,
+          {
+            className: "flex flex-1 flex-col gap-y-8 overflow-y-auto",
+            "data-testid": "product-edit-form-body",
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "flex flex-col gap-y-8",
+                "data-testid": "product-edit-form-fields",
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: "flex flex-col gap-y-4",
+                      "data-testid": "product-edit-form-main-fields",
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          Form.Field,
+                          {
+                            control: form.control,
+                            name: "status",
+                            render: ({ field: { onChange, ref, ...field } }) => {
+                              return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "product-edit-form-status-item", children: [
+                                /* @__PURE__ */ jsx(Form.Label, { "data-testid": "product-edit-form-status-label", children: t("fields.status") }),
+                                /* @__PURE__ */ jsx(Form.Control, { "data-testid": "product-edit-form-status-control", children: /* @__PURE__ */ jsx("div", { "data-testid": "product-edit-form-status-select-wrapper", children: /* @__PURE__ */ jsxs(
+                                  Select,
+                                  {
+                                    dir: direction,
+                                    ...field,
+                                    onValueChange: onChange,
+                                    "data-testid": "product-edit-form-status-select",
+                                    children: [
+                                      /* @__PURE__ */ jsx(
+                                        Select.Trigger,
+                                        {
+                                          ref,
+                                          "data-testid": "product-edit-form-status-trigger",
+                                          children: /* @__PURE__ */ jsx(Select.Value, { "data-testid": "product-edit-form-status-value" })
+                                        }
+                                      ),
+                                      /* @__PURE__ */ jsx(Select.Content, { "data-testid": "product-edit-form-status-content", children: [
+                                        "draft",
+                                        "published",
+                                        "proposed",
+                                        "rejected"
+                                      ].map((status) => {
+                                        return /* @__PURE__ */ jsx(
+                                          Select.Item,
+                                          {
+                                            value: status,
+                                            "data-testid": `product-edit-form-status-option-${status}`,
+                                            children: t(`products.productStatus.${status}`)
+                                          },
+                                          status
+                                        );
+                                      }) })
+                                    ]
+                                  }
+                                ) }) }),
+                                /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "product-edit-form-status-error" })
+                              ] });
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Form.Field,
+                          {
+                            control: form.control,
+                            name: "title",
+                            render: ({ field }) => {
+                              return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "product-edit-form-title-item", children: [
+                                /* @__PURE__ */ jsx(Form.Label, { "data-testid": "product-edit-form-title-label", children: t("fields.title") }),
+                                /* @__PURE__ */ jsx(Form.Control, { "data-testid": "product-edit-form-title-control", children: /* @__PURE__ */ jsx("div", { "data-testid": "product-edit-form-title-input-wrapper", children: /* @__PURE__ */ jsx(
+                                  Input,
+                                  {
+                                    ...field,
+                                    "data-testid": "product-edit-form-title-input"
+                                  }
+                                ) }) }),
+                                /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "product-edit-form-title-error" })
+                              ] });
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Form.Field,
+                          {
+                            control: form.control,
+                            name: "subtitle",
+                            render: ({ field }) => {
+                              return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "product-edit-form-subtitle-item", children: [
+                                /* @__PURE__ */ jsx(
+                                  Form.Label,
+                                  {
+                                    optional: true,
+                                    "data-testid": "product-edit-form-subtitle-label",
+                                    children: t("fields.subtitle")
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx(Form.Control, { "data-testid": "product-edit-form-subtitle-control", children: /* @__PURE__ */ jsx("div", { "data-testid": "product-edit-form-subtitle-input-wrapper", children: /* @__PURE__ */ jsx(
+                                  Input,
+                                  {
+                                    ...field,
+                                    "data-testid": "product-edit-form-subtitle-input"
+                                  }
+                                ) }) }),
+                                /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "product-edit-form-subtitle-error" })
+                              ] });
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Form.Field,
+                          {
+                            control: form.control,
+                            name: "handle",
+                            render: ({ field }) => {
+                              return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "product-edit-form-handle-item", children: [
+                                /* @__PURE__ */ jsx(Form.Label, { "data-testid": "product-edit-form-handle-label", children: t("fields.handle") }),
+                                /* @__PURE__ */ jsx(Form.Control, { "data-testid": "product-edit-form-handle-control", children: /* @__PURE__ */ jsxs(
+                                  "div",
+                                  {
+                                    className: "relative",
+                                    "data-testid": "product-edit-form-handle-wrapper",
+                                    children: [
+                                      /* @__PURE__ */ jsx(
+                                        "div",
+                                        {
+                                          className: "absolute inset-y-0 left-0 z-10 flex w-8 items-center justify-center border-r",
+                                          "data-testid": "product-edit-form-handle-prefix",
+                                          children: /* @__PURE__ */ jsx(
+                                            Text,
+                                            {
+                                              className: "text-ui-fg-muted",
+                                              size: "small",
+                                              leading: "compact",
+                                              weight: "plus",
+                                              "data-testid": "product-edit-form-handle-prefix-text",
+                                              children: "/"
+                                            }
+                                          )
+                                        }
+                                      ),
+                                      /* @__PURE__ */ jsx("div", { "data-testid": "product-edit-form-handle-input-wrapper", children: /* @__PURE__ */ jsx(
+                                        Input,
+                                        {
+                                          ...field,
+                                          className: "pl-10",
+                                          "data-testid": "product-edit-form-handle-input"
+                                        }
+                                      ) })
+                                    ]
+                                  }
+                                ) }),
+                                /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "product-edit-form-handle-error" })
+                              ] });
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Form.Field,
+                          {
+                            control: form.control,
+                            name: "material",
+                            render: ({ field }) => {
+                              return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "product-edit-form-material-item", children: [
+                                /* @__PURE__ */ jsx(
+                                  Form.Label,
+                                  {
+                                    optional: true,
+                                    "data-testid": "product-edit-form-material-label",
+                                    children: t("fields.material")
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx(Form.Control, { "data-testid": "product-edit-form-material-control", children: /* @__PURE__ */ jsx("div", { "data-testid": "product-edit-form-material-input-wrapper", children: /* @__PURE__ */ jsx(
+                                  Input,
+                                  {
+                                    ...field,
+                                    "data-testid": "product-edit-form-material-input"
+                                  }
+                                ) }) }),
+                                /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "product-edit-form-material-error" })
+                              ] });
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Form.Field,
+                          {
+                            control: form.control,
+                            name: "description",
+                            render: ({ field }) => {
+                              return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "product-edit-form-description-item", children: [
+                                /* @__PURE__ */ jsx(
+                                  Form.Label,
+                                  {
+                                    optional: true,
+                                    "data-testid": "product-edit-form-description-label",
+                                    children: t("fields.description")
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx(Form.Control, { "data-testid": "product-edit-form-description-control", children: /* @__PURE__ */ jsx("div", { "data-testid": "product-edit-form-description-textarea-wrapper", children: /* @__PURE__ */ jsx(
+                                  Textarea,
+                                  {
+                                    ...field,
+                                    "data-testid": "product-edit-form-description-textarea"
+                                  }
+                                ) }) }),
+                                /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "product-edit-form-description-error" })
+                              ] });
+                            }
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    SwitchBox,
+                    {
+                      control: form.control,
+                      name: "discountable",
+                      label: t("fields.discountable"),
+                      description: t("products.discountableHint"),
+                      "data-testid": "product-edit-form-discountable-switch"
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(RouteDrawer.Footer, { "data-testid": "product-edit-form-footer", children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex items-center justify-end gap-x-2",
+            "data-testid": "product-edit-form-footer-actions",
+            children: [
+              /* @__PURE__ */ jsx(
+                RouteDrawer.Close,
+                {
+                  asChild: true,
+                  "data-testid": "product-edit-form-cancel-button-wrapper",
+                  children: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      size: "small",
+                      variant: "secondary",
+                      "data-testid": "product-edit-form-cancel-button",
+                      children: t("actions.cancel")
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "small",
+                  type: "submit",
+                  isLoading: isPending,
+                  "data-testid": "product-edit-form-save-button",
+                  children: t("actions.save")
+                }
+              )
+            ]
+          }
+        ) })
+      ]
+    }
+  ) });
+};
+
+// src/pages/products/product-edit/product-edit.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ProductEdit = () => {
+  const { id } = useParams();
+  const { t } = useTranslation2();
+  const { product, isLoading, isError, error } = useProduct(id, PRODUCT_DETAIL_QUERY);
+  if (isError) {
+    throw error;
+  }
+  return /* @__PURE__ */ jsxs2(RouteDrawer, { "data-testid": "product-edit-drawer", children: [
+    /* @__PURE__ */ jsxs2(RouteDrawer.Header, { "data-testid": "product-edit-drawer-header", children: [
+      /* @__PURE__ */ jsx2(RouteDrawer.Title, { asChild: true, "data-testid": "product-edit-drawer-title", children: /* @__PURE__ */ jsx2(Heading, { "data-testid": "product-edit-drawer-title-text", children: t("products.edit.header") }) }),
+      /* @__PURE__ */ jsx2(
+        RouteDrawer.Description,
+        {
+          className: "sr-only",
+          "data-testid": "product-edit-drawer-description",
+          children: t("products.edit.description")
+        }
+      )
+    ] }),
+    !isLoading && product && /* @__PURE__ */ jsx2(EditProductForm, { product })
+  ] });
+};
+export {
+  ProductEdit as Component
+};

package/dist/product-edit-option-Y46SNVHN.js

@@ -0,0 +1,156 @@
+import {
+  PRODUCT_DETAIL_QUERY
+} from "./chunk-35NDMIYZ.js";
+import {
+  ChipInput
+} from "./chunk-NCYTM57J.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 {
+  useProduct,
+  useUpdateProductOption
+} from "./chunk-WBNGBRBK.js";
+import "./chunk-RHKRREUU.js";
+import "./chunk-ZA2KFUFR.js";
+import "./chunk-LXZXXOJ3.js";
+import "./chunk-NBMM2TZK.js";
+
+// src/pages/products/product-edit-option/product-edit-option.tsx
+import { Heading } from "@medusajs/ui";
+import { useTranslation as useTranslation2 } from "react-i18next";
+import { useParams } from "react-router-dom";
+
+// src/pages/products/product-edit-option/components/edit-product-option-form/edit-product-option-form.tsx
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button, Input } 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 CreateProductOptionSchema = z.object({
+  title: z.string().min(1),
+  values: z.array(z.string()).optional()
+});
+var CreateProductOptionForm = ({
+  option
+}) => {
+  const { t } = useTranslation();
+  const { handleSuccess } = useRouteModal();
+  const form = useForm({
+    defaultValues: {
+      title: option.title,
+      values: option.values.map((v) => v.value)
+    },
+    resolver: zodResolver(CreateProductOptionSchema)
+  });
+  const { mutateAsync, isPending } = useUpdateProductOption(
+    option.product_id,
+    option.id
+  );
+  const handleSubmit = form.handleSubmit(async (values) => {
+    mutateAsync(
+      {
+        id: option.id,
+        ...values
+      },
+      {
+        onSuccess: () => {
+          handleSuccess();
+        }
+      }
+    );
+  });
+  return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, "data-testid": "product-edit-option-form", children: /* @__PURE__ */ jsxs(
+    KeyboundForm,
+    {
+      onSubmit: handleSubmit,
+      className: "flex flex-1 flex-col overflow-hidden",
+      "data-testid": "product-edit-option-keybound-form",
+      children: [
+        /* @__PURE__ */ jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-4 overflow-auto", "data-testid": "product-edit-option-form-body", children: [
+          /* @__PURE__ */ jsx(
+            Form.Field,
+            {
+              control: form.control,
+              name: "title",
+              render: ({ field }) => {
+                return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "product-edit-option-form-title-item", children: [
+                  /* @__PURE__ */ jsx(Form.Label, { "data-testid": "product-edit-option-form-title-label", children: t("products.fields.options.optionTitle") }),
+                  /* @__PURE__ */ jsx(Form.Control, { "data-testid": "product-edit-option-form-title-control", children: /* @__PURE__ */ jsx("div", { "data-testid": "product-edit-option-form-title-input-wrapper", children: /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      ...field,
+                      placeholder: t(
+                        "products.fields.options.optionTitlePlaceholder"
+                      ),
+                      "data-testid": "product-edit-option-form-title-input"
+                    }
+                  ) }) }),
+                  /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "product-edit-option-form-title-error" })
+                ] });
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Form.Field,
+            {
+              control: form.control,
+              name: "values",
+              render: ({ field: { ...field } }) => {
+                return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "product-edit-option-form-values-item", children: [
+                  /* @__PURE__ */ jsx(Form.Label, { "data-testid": "product-edit-option-form-values-label", children: t("products.fields.options.variations") }),
+                  /* @__PURE__ */ jsx(Form.Control, { "data-testid": "product-edit-option-form-values-control", children: /* @__PURE__ */ jsx("div", { "data-testid": "product-edit-option-form-values-chip-input-wrapper", children: /* @__PURE__ */ jsx(
+                    ChipInput,
+                    {
+                      ...field,
+                      placeholder: t(
+                        "products.fields.options.variantionsPlaceholder"
+                      ),
+                      "data-testid": "product-edit-option-form-values-chip-input"
+                    }
+                  ) }) }),
+                  /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "product-edit-option-form-values-error" })
+                ] });
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(RouteDrawer.Footer, { "data-testid": "product-edit-option-form-footer", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", "data-testid": "product-edit-option-form-footer-actions", children: [
+          /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, "data-testid": "product-edit-option-form-cancel-button-wrapper", children: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "small", "data-testid": "product-edit-option-form-cancel-button", children: t("actions.cancel") }) }),
+          /* @__PURE__ */ jsx(Button, { type: "submit", size: "small", isLoading: isPending, "data-testid": "product-edit-option-form-save-button", children: t("actions.save") })
+        ] }) })
+      ]
+    }
+  ) });
+};
+
+// src/pages/products/product-edit-option/product-edit-option.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ProductEditOption = () => {
+  const { id, option_id } = useParams();
+  const { t } = useTranslation2();
+  const { product, isPending, isFetching, isError, error } = useProduct(id, PRODUCT_DETAIL_QUERY);
+  const option = product?.options?.find((o) => o.id === option_id);
+  if (!isPending && !isFetching && !option) {
+    throw new Response(JSON.stringify({ message: `An option with ID ${option_id} was not found` }), { status: 404, headers: { "Content-Type": "application/json" } });
+  }
+  if (isError) {
+    throw error;
+  }
+  return /* @__PURE__ */ jsxs2(RouteDrawer, { prev: "../../..", "data-testid": "product-edit-option-drawer", children: [
+    /* @__PURE__ */ jsx2(RouteDrawer.Header, { "data-testid": "product-edit-option-drawer-header", children: /* @__PURE__ */ jsx2(RouteDrawer.Title, { asChild: true, "data-testid": "product-edit-option-drawer-title", children: /* @__PURE__ */ jsx2(Heading, { "data-testid": "product-edit-option-drawer-title-text", children: t("products.options.edit.header") }) }) }),
+    option && /* @__PURE__ */ jsx2(CreateProductOptionForm, { option })
+  ] });
+};
+export {
+  ProductEditOption as Component
+};