@mercurjs/admin 2.0.0-canary.24

package/dist/price-list-prices-edit-TMVJ7S7J.js

@@ -0,0 +1,326 @@
+import {
+  PriceListUpdateProductsSchema,
+  usePriceListCurrencyData,
+  usePriceListGridColumns
+} from "./chunk-WWANSDFM.js";
+import {
+  isProductRow
+} from "./chunk-U5MJIHLY.js";
+import "./chunk-6IJMSVC6.js";
+import "./chunk-WIYFXWRI.js";
+import {
+  DataGrid
+} from "./chunk-KUWNYCGL.js";
+import "./chunk-IQPN4PZJ.js";
+import {
+  castNumber
+} from "./chunk-SMQT3ZNO.js";
+import "./chunk-TKGWSUEI.js";
+import {
+  KeyboundForm
+} from "./chunk-U2ZFCAPX.js";
+import {
+  RouteFocusModal,
+  useRouteModal
+} from "./chunk-MWOKFNRO.js";
+import "./chunk-3QSRE5LS.js";
+import "./chunk-INNFZYX2.js";
+import "./chunk-LAVHRER2.js";
+import "./chunk-Y7QKP6QU.js";
+import "./chunk-ORW4HNX5.js";
+import "./chunk-ODBDAABQ.js";
+import "./chunk-YGQUBTKR.js";
+import "./chunk-362QMJZM.js";
+import "./chunk-FODCCP6C.js";
+import "./chunk-AWZFIP25.js";
+import "./chunk-2QKPRGNK.js";
+import "./chunk-XBMLI2YI.js";
+import "./chunk-XL52SYWY.js";
+import "./chunk-NS5CHWOH.js";
+import "./chunk-WDZFLCSQ.js";
+import "./chunk-VVTSF42Z.js";
+import {
+  useBatchPriceListPrices,
+  usePriceList
+} from "./chunk-D3KDXELJ.js";
+import "./chunk-2MKZ4HD4.js";
+import "./chunk-OGYWOPHZ.js";
+import "./chunk-U62GYN4A.js";
+import "./chunk-KTKL7M34.js";
+import "./chunk-JJVGCTKT.js";
+import "./chunk-I43SCBL3.js";
+import "./chunk-LLWK3OR6.js";
+import "./chunk-HYUGYB23.js";
+import "./chunk-XCMR2HTV.js";
+import "./chunk-CI5Z6FGV.js";
+import "./chunk-LCZXAT4Q.js";
+import "./chunk-S6LPCNXQ.js";
+import {
+  useProducts
+} from "./chunk-T435NFHC.js";
+import "./chunk-2KCF3ZIB.js";
+import "./chunk-ZYNBKBY3.js";
+import "./chunk-NBMM2TZK.js";
+
+// src/pages/price-lists/price-list-prices-edit/price-list-prices-edit.tsx
+import { useParams, useSearchParams } from "react-router-dom";
+
+// src/pages/price-lists/price-list-prices-edit/components/price-list-prices-edit-form/price-list-prices-edit-form.tsx
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button, toast } from "@medusajs/ui";
+import { useRef } from "react";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { z } from "zod";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PricingProductPricesSchema = z.object({
+  products: PriceListUpdateProductsSchema
+});
+var PriceListPricesEditForm = ({
+  priceList,
+  products,
+  regions,
+  currencies,
+  pricePreferences
+}) => {
+  const { t } = useTranslation();
+  const { handleSuccess, setCloseOnEscape } = useRouteModal();
+  const initialValue = useRef(initRecord(priceList, products));
+  const form = useForm({
+    defaultValues: {
+      products: initialValue.current
+    },
+    resolver: zodResolver(PricingProductPricesSchema)
+  });
+  const { mutateAsync, isPending } = useBatchPriceListPrices(priceList.id);
+  const handleSubmit = form.handleSubmit(async (values) => {
+    const { products: products2 } = values;
+    const { pricesToDelete, pricesToCreate, pricesToUpdate } = sortPrices(
+      products2,
+      initialValue.current,
+      regions
+    );
+    mutateAsync(
+      {
+        delete: pricesToDelete,
+        update: pricesToUpdate,
+        create: pricesToCreate
+      },
+      {
+        onSuccess: () => {
+          toast.success(t("priceLists.products.edit.successToast"));
+          handleSuccess();
+        },
+        onError: (error) => {
+          toast.error(error.message);
+        }
+      }
+    );
+  });
+  const columns = usePriceListGridColumns({
+    currencies,
+    regions,
+    pricePreferences
+  });
+  return /* @__PURE__ */ jsx(RouteFocusModal.Form, { form, "data-testid": "price-list-prices-edit-form", children: /* @__PURE__ */ jsxs(KeyboundForm, { onSubmit: handleSubmit, className: "flex size-full flex-col", children: [
+    /* @__PURE__ */ jsx(RouteFocusModal.Header, { "data-testid": "price-list-prices-edit-form-header" }),
+    /* @__PURE__ */ jsx(RouteFocusModal.Body, { className: "flex flex-col overflow-hidden", "data-testid": "price-list-prices-edit-form-body", children: /* @__PURE__ */ jsx(
+      DataGrid,
+      {
+        columns,
+        data: products,
+        getSubRows: (row) => {
+          if (isProductRow(row) && row.variants) {
+            return row.variants;
+          }
+        },
+        state: form,
+        onEditingChange: (editing) => setCloseOnEscape(!editing),
+        "data-testid": "price-list-prices-edit-form-data-grid"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(RouteFocusModal.Footer, { "data-testid": "price-list-prices-edit-form-footer", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
+      /* @__PURE__ */ jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", "data-testid": "price-list-prices-edit-form-cancel-button", children: t("actions.cancel") }) }),
+      /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, "data-testid": "price-list-prices-edit-form-save-button", children: t("actions.save") })
+    ] }) })
+  ] }) });
+};
+function initRecord(priceList, products) {
+  const record = {};
+  const variantPrices = priceList.prices?.reduce((variants, price) => {
+    const variantObject = variants[price.variant_id] || {};
+    const isRegionPrice = !!price.rules?.region_id;
+    if (isRegionPrice) {
+      const regionId = price.rules.region_id;
+      variantObject.region_prices = {
+        ...variantObject.region_prices,
+        [regionId]: {
+          amount: price.amount.toString(),
+          id: price.id
+        }
+      };
+    } else {
+      variantObject.currency_prices = {
+        ...variantObject.currency_prices,
+        [price.currency_code]: {
+          amount: price.amount.toString(),
+          id: price.id
+        }
+      };
+    }
+    variants[price.variant_id] = variantObject;
+    return variants;
+  }, {});
+  for (const product of products) {
+    record[product.id] = {
+      variants: product.variants?.reduce((variants, variant) => {
+        const prices = variantPrices[variant.id] || {};
+        variants[variant.id] = prices;
+        return variants;
+      }, {}) || {}
+    };
+  }
+  return record;
+}
+function convertToPriceArray(data, regions) {
+  const prices = [];
+  const regionCurrencyMap = regions.reduce((map, region) => {
+    map[region.id] = region.currency_code;
+    return map;
+  }, {});
+  for (const [_productId, product] of Object.entries(data || {})) {
+    const { variants } = product || {};
+    for (const [variantId, variant] of Object.entries(variants || {})) {
+      const { currency_prices: currencyPrices, region_prices: regionPrices } = variant || {};
+      for (const [currencyCode, currencyPrice] of Object.entries(
+        currencyPrices || {}
+      )) {
+        if (currencyPrice?.amount !== "" && typeof currencyPrice?.amount !== "undefined") {
+          prices.push({
+            variantId,
+            currencyCode,
+            amount: castNumber(currencyPrice.amount),
+            id: currencyPrice.id
+          });
+        }
+      }
+      for (const [regionId, regionPrice] of Object.entries(
+        regionPrices || {}
+      )) {
+        if (regionPrice?.amount !== "" && typeof regionPrice?.amount !== "undefined") {
+          prices.push({
+            variantId,
+            regionId,
+            currencyCode: regionCurrencyMap[regionId],
+            amount: castNumber(regionPrice.amount),
+            id: regionPrice.id
+          });
+        }
+      }
+    }
+  }
+  return prices;
+}
+function createMapKey(obj) {
+  return `${obj.variantId}-${obj.currencyCode}-${obj.regionId || "none"}-${obj.id || "none"}`;
+}
+function comparePrices(initialPrices, newPrices) {
+  const pricesToUpdate = [];
+  const pricesToCreate = [];
+  const pricesToDelete = [];
+  const initialPriceMap = initialPrices.reduce((map, price) => {
+    map[createMapKey(price)] = price;
+    return map;
+  }, {});
+  const newPriceMap = newPrices.reduce((map, price) => {
+    map[createMapKey(price)] = price;
+    return map;
+  }, {});
+  const keys = /* @__PURE__ */ new Set([
+    ...Object.keys(initialPriceMap),
+    ...Object.keys(newPriceMap)
+  ]);
+  for (const key of keys) {
+    const initialPrice = initialPriceMap[key];
+    const newPrice = newPriceMap[key];
+    if (initialPrice && newPrice) {
+      if (isNaN(newPrice.amount) && newPrice.id) {
+        pricesToDelete.push(newPrice.id);
+      }
+      if (initialPrice.amount !== newPrice.amount && newPrice.id) {
+        pricesToUpdate.push({
+          id: newPrice.id,
+          variant_id: newPrice.variantId,
+          currency_code: newPrice.currencyCode,
+          rules: newPrice.regionId ? { region_id: newPrice.regionId } : void 0,
+          amount: newPrice.amount
+        });
+      }
+    }
+    if (!initialPrice && newPrice) {
+      pricesToCreate.push({
+        variant_id: newPrice.variantId,
+        currency_code: newPrice.currencyCode,
+        rules: newPrice.regionId ? { region_id: newPrice.regionId } : void 0,
+        amount: newPrice.amount
+      });
+    }
+    if (initialPrice && !newPrice && initialPrice.id) {
+      pricesToDelete.push(initialPrice.id);
+    }
+  }
+  return { pricesToDelete, pricesToCreate, pricesToUpdate };
+}
+function sortPrices(data, initialValue, regions) {
+  const initialPrices = convertToPriceArray(initialValue, regions);
+  const newPrices = convertToPriceArray(data, regions);
+  return comparePrices(initialPrices, newPrices);
+}
+
+// src/pages/price-lists/price-list-prices-edit/price-list-prices-edit.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var PriceListPricesEdit = () => {
+  const { id } = useParams();
+  const [searchParams] = useSearchParams();
+  const ids = searchParams.get("ids[]");
+  const { price_list, isLoading, isError, error } = usePriceList(id);
+  const productIds = ids?.split(",");
+  const {
+    products,
+    isLoading: isProductsLoading,
+    isError: isProductsError,
+    error: productError
+  } = useProducts({
+    id: productIds,
+    limit: productIds?.length || 9999,
+    // Temporary until we support lazy loading in the DataGrid
+    price_list_id: [id],
+    fields: "title,thumbnail,*variants"
+  });
+  const currencyData = usePriceListCurrencyData();
+  const ready = currencyData.isReady && !isLoading && !!price_list && !isProductsLoading && !!products;
+  if (isError) {
+    throw error;
+  }
+  if (isProductsError) {
+    throw productError;
+  }
+  return /* @__PURE__ */ jsxs2(RouteFocusModal, { children: [
+    /* @__PURE__ */ jsx2(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxs2("span", { className: "sr-only", children: [
+      "Edit Prices for ",
+      price_list?.title
+    ] }) }),
+    /* @__PURE__ */ jsx2(RouteFocusModal.Description, { className: "sr-only", children: "Update prices for products in the price list" }),
+    ready && /* @__PURE__ */ jsx2(
+      PriceListPricesEditForm,
+      {
+        priceList: price_list,
+        products,
+        ...currencyData
+      }
+    )
+  ] });
+};
+export {
+  PriceListPricesEdit as Component
+};

package/dist/product-attributes-P7WFH4I2.js

@@ -0,0 +1,358 @@
+import "./chunk-NXDFDEKP.js";
+import {
+  CountrySelect
+} from "./chunk-V74Y5NIV.js";
+import "./chunk-TKGWSUEI.js";
+import {
+  KeyboundForm
+} from "./chunk-U2ZFCAPX.js";
+import {
+  RouteDrawer,
+  useRouteModal
+} from "./chunk-MWOKFNRO.js";
+import {
+  Form
+} from "./chunk-3QSRE5LS.js";
+import "./chunk-JRTZWK77.js";
+import {
+  useProduct,
+  useUpdateProduct
+} from "./chunk-T435NFHC.js";
+import "./chunk-2KCF3ZIB.js";
+import "./chunk-ZYNBKBY3.js";
+import "./chunk-NBMM2TZK.js";
+
+// src/pages/products/product-attributes/product-attributes.tsx
+import { Heading } from "@medusajs/ui";
+import { useTranslation as useTranslation2 } from "react-i18next";
+import { useParams } from "react-router-dom";
+
+// src/pages/products/product-attributes/components/product-attributes-form/product-attributes-form.tsx
+import { Button, Input } from "@medusajs/ui";
+import { useTranslation } from "react-i18next";
+import * as zod from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { jsx, jsxs } from "react/jsx-runtime";
+var dimension = zod.union([zod.string(), zod.number()]).transform((value) => {
+  if (value === "") {
+    return null;
+  }
+  return Number(value);
+}).optional().nullable();
+var ProductAttributesSchema = zod.object({
+  weight: dimension,
+  length: dimension,
+  width: dimension,
+  height: dimension,
+  mid_code: zod.string().optional(),
+  hs_code: zod.string().optional(),
+  origin_country: zod.string().optional()
+});
+var ProductAttributesForm = ({
+  product
+}) => {
+  const { t } = useTranslation();
+  const { handleSuccess } = useRouteModal();
+  const form = useForm({
+    defaultValues: {
+      height: product.height ? product.height : null,
+      width: product.width ? product.width : null,
+      length: product.length ? product.length : null,
+      weight: product.weight ? product.weight : null,
+      mid_code: product.mid_code || "",
+      hs_code: product.hs_code || "",
+      origin_country: product.origin_country || ""
+    },
+    resolver: zodResolver(ProductAttributesSchema)
+  });
+  const { mutateAsync, isPending } = useUpdateProduct(product.id);
+  const handleSubmit = form.handleSubmit(async (data) => {
+    await mutateAsync(
+      {
+        weight: data.weight ? data.weight : null,
+        length: data.length ? data.length : null,
+        width: data.width ? data.width : null,
+        height: data.height ? data.height : null,
+        mid_code: data.mid_code,
+        hs_code: data.hs_code,
+        origin_country: data.origin_country
+      },
+      {
+        onSuccess: () => {
+          handleSuccess();
+        }
+      }
+    );
+  });
+  return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, "data-testid": "product-attributes-form", children: /* @__PURE__ */ jsxs(
+    KeyboundForm,
+    {
+      onSubmit: handleSubmit,
+      className: "flex h-full flex-col",
+      "data-testid": "product-attributes-keybound-form",
+      children: [
+        /* @__PURE__ */ jsx(RouteDrawer.Body, { "data-testid": "product-attributes-form-body", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex h-full flex-col gap-y-8",
+            "data-testid": "product-attributes-form-fields",
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "flex flex-col gap-y-4",
+                "data-testid": "product-attributes-form-main-fields",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Form.Field,
+                    {
+                      control: form.control,
+                      name: "width",
+                      render: ({ field: { onChange, value, ...field } }) => {
+                        return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "product-attributes-form-width-item", children: [
+                          /* @__PURE__ */ jsx(Form.Label, { "data-testid": "product-attributes-form-width-label", children: t("fields.width") }),
+                          /* @__PURE__ */ jsx(Form.Control, { "data-testid": "product-attributes-form-width-control", children: /* @__PURE__ */ jsx(
+                            Input,
+                            {
+                              type: "number",
+                              min: 0,
+                              value: value || "",
+                              onChange: (e) => {
+                                const value2 = e.target.value;
+                                if (value2 === "") {
+                                  onChange(null);
+                                } else {
+                                  onChange(parseFloat(value2));
+                                }
+                              },
+                              ...field,
+                              "data-testid": "product-attributes-form-width-input"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "product-attributes-form-width-error" })
+                        ] });
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Form.Field,
+                    {
+                      control: form.control,
+                      name: "height",
+                      render: ({ field: { onChange, value, ...field } }) => {
+                        return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "product-attributes-form-height-item", children: [
+                          /* @__PURE__ */ jsx(Form.Label, { "data-testid": "product-attributes-form-height-label", children: t("fields.height") }),
+                          /* @__PURE__ */ jsx(Form.Control, { "data-testid": "product-attributes-form-height-control", children: /* @__PURE__ */ jsx(
+                            Input,
+                            {
+                              type: "number",
+                              min: 0,
+                              value: value || "",
+                              onChange: (e) => {
+                                const value2 = e.target.value;
+                                if (value2 === "") {
+                                  onChange(null);
+                                } else {
+                                  onChange(Number(value2));
+                                }
+                              },
+                              ...field,
+                              "data-testid": "product-attributes-form-height-input"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "product-attributes-form-height-error" })
+                        ] });
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Form.Field,
+                    {
+                      control: form.control,
+                      name: "length",
+                      render: ({ field: { onChange, value, ...field } }) => {
+                        return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "product-attributes-form-length-item", children: [
+                          /* @__PURE__ */ jsx(Form.Label, { "data-testid": "product-attributes-form-length-label", children: t("fields.length") }),
+                          /* @__PURE__ */ jsx(Form.Control, { "data-testid": "product-attributes-form-length-control", children: /* @__PURE__ */ jsx(
+                            Input,
+                            {
+                              type: "number",
+                              min: 0,
+                              value: value || "",
+                              onChange: (e) => {
+                                const value2 = e.target.value;
+                                if (value2 === "") {
+                                  onChange(null);
+                                } else {
+                                  onChange(Number(value2));
+                                }
+                              },
+                              ...field,
+                              "data-testid": "product-attributes-form-length-input"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "product-attributes-form-length-error" })
+                        ] });
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Form.Field,
+                    {
+                      control: form.control,
+                      name: "weight",
+                      render: ({ field: { onChange, value, ...field } }) => {
+                        return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "product-attributes-form-weight-item", children: [
+                          /* @__PURE__ */ jsx(Form.Label, { "data-testid": "product-attributes-form-weight-label", children: t("fields.weight") }),
+                          /* @__PURE__ */ jsx(Form.Control, { "data-testid": "product-attributes-form-weight-control", children: /* @__PURE__ */ jsx(
+                            Input,
+                            {
+                              type: "number",
+                              min: 0,
+                              value: value || "",
+                              onChange: (e) => {
+                                const value2 = e.target.value;
+                                if (value2 === "") {
+                                  onChange(null);
+                                } else {
+                                  onChange(Number(value2));
+                                }
+                              },
+                              ...field,
+                              "data-testid": "product-attributes-form-weight-input"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "product-attributes-form-weight-error" })
+                        ] });
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Form.Field,
+                    {
+                      control: form.control,
+                      name: "mid_code",
+                      render: ({ field }) => {
+                        return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "product-attributes-form-mid-code-item", children: [
+                          /* @__PURE__ */ jsx(Form.Label, { "data-testid": "product-attributes-form-mid-code-label", children: t("fields.midCode") }),
+                          /* @__PURE__ */ jsx(Form.Control, { "data-testid": "product-attributes-form-mid-code-control", children: /* @__PURE__ */ jsx(
+                            Input,
+                            {
+                              ...field,
+                              "data-testid": "product-attributes-form-mid-code-input"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "product-attributes-form-mid-code-error" })
+                        ] });
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Form.Field,
+                    {
+                      control: form.control,
+                      name: "hs_code",
+                      render: ({ field }) => {
+                        return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "product-attributes-form-hs-code-item", children: [
+                          /* @__PURE__ */ jsx(Form.Label, { "data-testid": "product-attributes-form-hs-code-label", children: t("fields.hsCode") }),
+                          /* @__PURE__ */ jsx(Form.Control, { "data-testid": "product-attributes-form-hs-code-control", children: /* @__PURE__ */ jsx(
+                            Input,
+                            {
+                              ...field,
+                              "data-testid": "product-attributes-form-hs-code-input"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "product-attributes-form-hs-code-error" })
+                        ] });
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Form.Field,
+                    {
+                      control: form.control,
+                      name: "origin_country",
+                      render: ({ field }) => {
+                        return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "product-attributes-form-origin-country-item", children: [
+                          /* @__PURE__ */ jsx(Form.Label, { "data-testid": "product-attributes-form-origin-country-label", children: t("fields.countryOfOrigin") }),
+                          /* @__PURE__ */ jsx(Form.Control, { "data-testid": "product-attributes-form-origin-country-control", children: /* @__PURE__ */ jsx(
+                            CountrySelect,
+                            {
+                              ...field,
+                              "data-testid": "product-attributes-form-origin-country-select"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "product-attributes-form-origin-country-error" })
+                        ] });
+                      }
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsx(RouteDrawer.Footer, { "data-testid": "product-attributes-form-footer", children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex items-center justify-end gap-x-2",
+            "data-testid": "product-attributes-form-footer-actions",
+            children: [
+              /* @__PURE__ */ jsx(
+                RouteDrawer.Close,
+                {
+                  asChild: true,
+                  "data-testid": "product-attributes-form-cancel-button-wrapper",
+                  children: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      size: "small",
+                      variant: "secondary",
+                      "data-testid": "product-attributes-form-cancel-button",
+                      children: t("actions.cancel")
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "small",
+                  type: "submit",
+                  isLoading: isPending,
+                  "data-testid": "product-attributes-form-save-button",
+                  children: t("actions.save")
+                }
+              )
+            ]
+          }
+        ) })
+      ]
+    }
+  ) });
+};
+
+// src/pages/products/product-attributes/product-attributes.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ProductAttributes = () => {
+  const { id } = useParams();
+  const { t } = useTranslation2();
+  const { product, isLoading, isError, error } = useProduct(id);
+  if (isError) {
+    throw error;
+  }
+  return /* @__PURE__ */ jsxs2(RouteDrawer, { "data-testid": "product-attributes-drawer", children: [
+    /* @__PURE__ */ jsx2(RouteDrawer.Header, { "data-testid": "product-attributes-drawer-header", children: /* @__PURE__ */ jsx2(
+      RouteDrawer.Title,
+      {
+        asChild: true,
+        "data-testid": "product-attributes-drawer-title",
+        children: /* @__PURE__ */ jsx2(Heading, { "data-testid": "product-attributes-drawer-title-text", children: t("products.editAttributes") })
+      }
+    ) }),
+    !isLoading && product && /* @__PURE__ */ jsx2(ProductAttributesForm, { product })
+  ] });
+};
+export {
+  ProductAttributes as Component
+};