@mercurjs/vendor 2.1.2 → 2.2.0-canary.1

package/dist/product-variant-detail-RVWEYVPC.js

@@ -0,0 +1,220 @@
+import {
+  SectionRow
+} from "./chunk-4TLP3TAA.js";
+import {
+  TwoColumnPage
+} from "./chunk-YV6MK4PZ.js";
+import {
+  TwoColumnPageSkeleton
+} from "./chunk-INNFZYX2.js";
+import "./chunk-GXIAIITP.js";
+import "./chunk-F4OJN2F2.js";
+import "./chunk-LRARA622.js";
+import "./chunk-M6N4ISXL.js";
+import "./chunk-S7EKBD2C.js";
+import "./chunk-VXMOPVRH.js";
+import "./chunk-VV6IKGCN.js";
+import "./chunk-NHFEY3EI.js";
+import "./chunk-BOZJOOGW.js";
+import "./chunk-LWJF63JW.js";
+import "./chunk-T6LHVNWO.js";
+import "./chunk-4S6XGIC6.js";
+import "./chunk-QT7YFHCA.js";
+import "./chunk-IQWK723D.js";
+import "./chunk-UORPTGV2.js";
+import "./chunk-NXNJQZCP.js";
+import "./chunk-VXWN37PT.js";
+import "./chunk-RZLN2Q6G.js";
+import "./chunk-NBPMNUKZ.js";
+import "./chunk-QS6RWIBL.js";
+import "./chunk-3B34B2M2.js";
+import {
+  ActionMenu
+} from "./chunk-BDGZ4EQO.js";
+import "./chunk-LAVHRER2.js";
+import "./chunk-Y7QKP6QU.js";
+import {
+  useDeleteVariant,
+  useProductVariant,
+  variantsQueryKeys
+} from "./chunk-QNNJN4H6.js";
+import "./chunk-A5DJIOHN.js";
+import {
+  queryClient
+} from "./chunk-RHKRREUU.js";
+import "./chunk-ZA2KFUFR.js";
+import {
+  sdk
+} from "./chunk-RIN4CBRB.js";
+import "./chunk-NBMM2TZK.js";
+
+// src/pages/product-variants/product-variant-detail/breadcrumb.tsx
+import { jsx } from "react/jsx-runtime";
+var ProductVariantDetailBreadcrumb = (props) => {
+  const { product_id, variant_id } = props.params || {};
+  const { variant } = useProductVariant(
+    product_id,
+    variant_id,
+    {},
+    {
+      initialData: props.data,
+      enabled: Boolean(product_id) && Boolean(variant_id)
+    }
+  );
+  if (!variant) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("span", { children: variant.title });
+};
+
+// src/pages/product-variants/product-variant-detail/loader.ts
+var variantDetailQuery = (productId, variantId) => ({
+  queryKey: variantsQueryKeys.detail(variantId),
+  queryFn: async () => sdk.vendor.products.$id.variants.$variantId.query({
+    $id: productId,
+    $variantId: variantId
+  })
+});
+var variantLoader = async ({
+  params
+}) => {
+  const productId = params.product_id;
+  const variantId = params.variant_id;
+  const query = variantDetailQuery(productId, variantId);
+  return queryClient.ensureQueryData(query);
+};
+
+// src/pages/product-variants/product-variant-detail/product-variant-detail.tsx
+import { Children } from "react";
+import { useLoaderData, useParams } from "react-router-dom";
+
+// src/pages/product-variants/product-variant-detail/components/variant-general-section/variant-general-section.tsx
+import { Component, PencilSquare, Trash } from "@medusajs/icons";
+import { Badge, Container, Heading, usePrompt } from "@medusajs/ui";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function VariantGeneralSection({
+  variant
+}) {
+  const { t } = useTranslation();
+  const prompt = usePrompt();
+  const navigate = useNavigate();
+  const hasInventoryKit = (variant.inventory_items?.length ?? 0) > 1;
+  const { mutateAsync } = useDeleteVariant(variant.product_id, variant.id);
+  const handleDelete = async () => {
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("products.variant.deleteWarning", {
+        title: variant.title
+      }),
+      confirmText: t("actions.delete"),
+      cancelText: t("actions.cancel")
+    });
+    if (!res) {
+      return;
+    }
+    await mutateAsync(void 0, {
+      onSuccess: () => {
+        navigate("..", { replace: true });
+      }
+    });
+  };
+  return /* @__PURE__ */ jsxs(Container, { className: "divide-y p-0", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx2(Heading, { children: variant.title }),
+          hasInventoryKit && /* @__PURE__ */ jsx2("span", { className: "text-ui-fg-muted font-normal", children: /* @__PURE__ */ jsx2(Component, {}) })
+        ] }),
+        /* @__PURE__ */ jsx2("span", { className: "text-ui-fg-subtle txt-small mt-2", children: t("labels.productVariant") })
+      ] }),
+      /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-x-4", children: /* @__PURE__ */ jsx2(
+        ActionMenu,
+        {
+          groups: [
+            {
+              actions: [
+                {
+                  label: t("actions.edit"),
+                  to: "edit",
+                  icon: /* @__PURE__ */ jsx2(PencilSquare, {})
+                }
+              ]
+            },
+            {
+              actions: [
+                {
+                  label: t("actions.delete"),
+                  onClick: handleDelete,
+                  icon: /* @__PURE__ */ jsx2(Trash, {})
+                }
+              ]
+            }
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx2(SectionRow, { title: t("fields.sku"), value: variant.sku }),
+    (variant.attribute_values ?? []).reduce(
+      (acc, value) => {
+        const attribute = value.attribute;
+        if (!attribute) return acc;
+        const existing = acc.find((g) => g.id === attribute.id);
+        if (existing) {
+          existing.values.push(value.name);
+        } else {
+          acc.push({
+            id: attribute.id,
+            title: attribute.name,
+            values: [value.name]
+          });
+        }
+        return acc;
+      },
+      []
+    ).map((group) => /* @__PURE__ */ jsx2(
+      SectionRow,
+      {
+        title: group.title,
+        value: /* @__PURE__ */ jsx2("div", { className: "flex flex-wrap items-center gap-1", children: group.values.map((v) => /* @__PURE__ */ jsx2(Badge, { size: "2xsmall", children: v }, v)) })
+      },
+      group.id
+    ))
+  ] });
+}
+
+// src/pages/product-variants/product-variant-detail/product-variant-detail.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var Root = ({ children }) => {
+  const initialData = useLoaderData();
+  const { product_id, variant_id } = useParams();
+  const { variant, isLoading, isError, error } = useProductVariant(
+    product_id,
+    variant_id,
+    {},
+    {
+      initialData
+    }
+  );
+  if (isLoading || !variant) {
+    return /* @__PURE__ */ jsx3(TwoColumnPageSkeleton, { mainSections: 1, sidebarSections: 0 });
+  }
+  if (isError) {
+    throw error;
+  }
+  return Children.count(children) > 0 ? /* @__PURE__ */ jsx3(TwoColumnPage, { data: variant, hasOutlet: true, children }) : /* @__PURE__ */ jsxs2(TwoColumnPage, { data: variant, hasOutlet: true, children: [
+    /* @__PURE__ */ jsx3(TwoColumnPage.Main, { children: /* @__PURE__ */ jsx3(VariantGeneralSection, { variant }) }),
+    /* @__PURE__ */ jsx3(TwoColumnPage.Sidebar, {})
+  ] });
+};
+var ProductVariantDetail = Object.assign(Root, {
+  Main: TwoColumnPage.Main,
+  Sidebar: TwoColumnPage.Sidebar,
+  MainGeneralSection: VariantGeneralSection
+});
+export {
+  ProductVariantDetailBreadcrumb as Breadcrumb,
+  ProductVariantDetail as Component,
+  variantLoader as loader
+};

package/dist/{product-variant-edit-P3DSIFE3.js → product-variant-edit-MNCS7ZYW.js}

@@ -6,13 +6,15 @@ import "./chunk-NXDFDEKP.js";
 import {
   CountrySelect
 } from "./chunk-7CAFYKKA.js";
+import {
+  AttributeValueInput
+} from "./chunk-37G4Y5I7.js";
+import "./chunk-JRTZWK77.js";
 import {
   optionalInt
-} from "./chunk-IZ5RG5XI.js";
+} from "./chunk-AJLGY3LQ.js";
 import "./chunk-SMQT3ZNO.js";
-import {
-  Combobox
-} from "./chunk-VBRTC2VU.js";
+import "./chunk-VBRTC2VU.js";
 import "./chunk-TKGWSUEI.js";
 import {
   KeyboundForm
@@ -20,27 +22,38 @@ import {
 import {
   RouteDrawer,
   useRouteModal
-} from "./chunk-3CK6OINO.js";
+} from "./chunk-GDWBOQI5.js";
 import {
   Form
 } from "./chunk-3QSRE5LS.js";
-import "./chunk-JRTZWK77.js";
+import {
+  require_dist
+} from "./chunk-2MDGYHWN.js";
 import {
   useProduct,
-  useUpdateProductVariant
-} from "./chunk-ZEVYT6IX.js";
+  useProductVariant,
+  useUpdateProductVariant,
+  variantsQueryKeys
+} from "./chunk-QNNJN4H6.js";
 import "./chunk-A5DJIOHN.js";
-import "./chunk-RHKRREUU.js";
+import {
+  queryClient
+} from "./chunk-RHKRREUU.js";
 import "./chunk-ZA2KFUFR.js";
-import "./chunk-RIN4CBRB.js";
-import "./chunk-NBMM2TZK.js";
+import {
+  sdk
+} from "./chunk-RIN4CBRB.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 { useParams } from "react-router-dom";
+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, toast } from "@medusajs/ui";
 import { useForm } from "react-hook-form";
@@ -54,8 +67,6 @@ var ProductEditVariantSchema = z.object({
   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,
@@ -63,7 +74,7 @@ var ProductEditVariantSchema = z.object({
   mid_code: z.string().optional(),
   hs_code: z.string().optional(),
   origin_country: z.string().optional(),
-  options: z.record(z.string())
+  attribute_values: z.record(z.union([z.string(), z.array(z.string())])).optional()
 });
 var ProductEditVariantForm = ({
   variant,
@@ -71,35 +82,38 @@ var ProductEditVariantForm = ({
 }) => {
   const { t } = useTranslation();
   const { handleSuccess } = useRouteModal();
-  const defaultOptions = product.options?.reduce((acc, option) => {
-    const varOpt = variant?.options?.find((o) => o.option_id === option.id);
-    acc[option.title] = varOpt?.value;
+  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 || void 0,
-      ean: variant?.ean || "",
-      upc: variant?.upc || "",
-      barcode: variant?.barcode || "",
-      manage_inventory: true,
-      allow_backorder: true,
-      weight: variant?.weight || "",
-      height: variant?.height || "",
-      width: variant?.width || "",
-      length: variant?.length || "",
-      mid_code: variant?.mid_code || "",
-      hs_code: variant?.hs_code || "",
-      origin_country: variant?.origin_country || "",
-      options: defaultOptions
+      title: variant.title || "",
+      material: variant.material || "",
+      sku: variant.sku || "",
+      ean: variant.ean || "",
+      upc: variant.upc || "",
+      barcode: variant.barcode || "",
+      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
+    variant.product_id,
+    variant.id
   );
   const handleSubmit = form.handleSubmit(async (data) => {
     const {
@@ -108,12 +122,15 @@ var ProductEditVariantForm = ({
       height,
       width,
       length,
-      allow_backorder,
-      manage_inventory,
-      options,
+      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(
       {
         weight: transformNullableFormNumber(weight),
@@ -121,9 +138,7 @@ var ProductEditVariantForm = ({
         width: transformNullableFormNumber(width),
         length: transformNullableFormNumber(length),
         title,
-        allow_backorder,
-        manage_inventory,
-        options,
+        attribute_values: Object.keys(cleanedAttributeValues).length ? cleanedAttributeValues : void 0,
         ...nullableData
       },
       {
@@ -173,39 +188,40 @@ var ProductEditVariantForm = ({
                 }
               }
             ),
-            product.options?.map((option) => {
+            variantAttributes.map((attribute) => {
+              const fieldKey = attribute.handle ?? attribute.id;
               return /* @__PURE__ */ jsx(
                 Form.Field,
                 {
                   control: form.control,
-                  name: `options.${option.title}`,
-                  render: ({ field: { value, onChange, ...field } }) => {
+                  name: `attribute_values.${fieldKey}`,
+                  render: ({ field: { value, onChange } }) => {
                     return /* @__PURE__ */ jsxs(Form.Item, { children: [
-                      /* @__PURE__ */ jsx(Form.Label, { children: option.title }),
+                      /* @__PURE__ */ jsx(Form.Label, { children: attribute.name }),
                       /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(
-                        Combobox,
+                        AttributeValueInput,
                         {
-                          value,
-                          onChange: (v) => {
-                            onChange(v);
-                          },
-                          ...field,
-                          options: option.values.map((v) => ({
-                            label: v.value,
-                            value: v.value
-                          }))
+                          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, {})
                     ] });
                   }
                 },
-                option.id
+                attribute.id
               );
             })
           ] }),
           /* @__PURE__ */ jsx(Divider, {}),
           /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-8", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-4", children: [
-            /* @__PURE__ */ jsx(Heading, { level: "h2", children: t("products.variant.inventory.header") }),
             /* @__PURE__ */ jsx(
               Form.Field,
               {
@@ -378,26 +394,70 @@ var ProductEditVariantForm = ({
 // 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 { product_id, variant_id } = useParams();
+  const { id, product_id, variant_id } = useParams();
+  const productId = product_id || id;
+  const [URLSearchParms] = useSearchParams();
+  const searchVariantId = URLSearchParms.get("variant_id");
+  const { variant, isPending, isError, error } = useProductVariant(
+    productId,
+    variant_id || searchVariantId,
+    void 0,
+    {
+      initialData
+    }
+  );
   const {
     product,
     isPending: isProductPending,
     isError: isProductError,
     error: productError
-  } = useProduct(product_id);
-  const variant = product?.variants?.find(
-    (variant2) => variant2.id === variant_id
+  } = useProduct(
+    variant?.product_id,
+    {
+      fields: "-variants"
+    },
+    {
+      enabled: !!variant?.product_id
+    }
   );
-  const ready = !isProductPending && !!product;
+  const ready = !isPending && !!variant && !isProductPending && !!product;
+  if (isError) {
+    throw error;
+  }
   if (isProductError) {
     throw productError;
   }
   return /* @__PURE__ */ jsxs2(RouteDrawer, { children: [
-    /* @__PURE__ */ jsx2(RouteDrawer.Header, { children: /* @__PURE__ */ jsx2(Heading2, { children: t("products.variant.edit.header") }) }),
+    /* @__PURE__ */ jsx2(RouteDrawer.Header, { children: /* @__PURE__ */ jsx2(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx2(Heading2, { 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.vendor.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.product_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
+  ProductVariantEdit as Component,
+  editProductVariantLoader as loader
 };

package/dist/{products-H5EMRJYS.js → products-4KV5Y2JY.js}

@@ -1,13 +1,14 @@
 import {
   useProductTableColumns
-} from "./chunk-GC33DBKG.js";
+} from "./chunk-IWLDKGYQ.js";
+import "./chunk-C2FG3SX2.js";
 import {
   useProductTableQuery
-} from "./chunk-4MFMCZEJ.js";
+} from "./chunk-H6LZ77GX.js";
 import "./chunk-FQERBIVS.js";
 import {
   useProductTableFilters
-} from "./chunk-CNLP35S7.js";
+} from "./chunk-OD3U3TX4.js";
 import "./chunk-DB6ANJBO.js";
 import "./chunk-PHOCVOZ5.js";
 import {
@@ -24,39 +25,42 @@ import {
 import {
   RouteFocusModal,
   useRouteModal
-} from "./chunk-3CK6OINO.js";
+} from "./chunk-GDWBOQI5.js";
 import "./chunk-3QSRE5LS.js";
-import "./chunk-THHRRYRS.js";
 import "./chunk-LRD242C7.js";
-import "./chunk-47SXTGLN.js";
+import "./chunk-QHQWEERJ.js";
+import "./chunk-THHRRYRS.js";
+import "./chunk-2MDGYHWN.js";
+import "./chunk-WIYFXWRI.js";
+import "./chunk-INNFZYX2.js";
+import "./chunk-GXIAIITP.js";
 import "./chunk-F4OJN2F2.js";
 import "./chunk-LRARA622.js";
 import "./chunk-M6N4ISXL.js";
 import "./chunk-S7EKBD2C.js";
 import "./chunk-VXMOPVRH.js";
-import "./chunk-IQWK723D.js";
 import "./chunk-VV6IKGCN.js";
-import "./chunk-PCMNEUMV.js";
+import "./chunk-NHFEY3EI.js";
 import "./chunk-BOZJOOGW.js";
-import "./chunk-RL7SFZOF.js";
 import "./chunk-LWJF63JW.js";
-import "./chunk-NBPMNUKZ.js";
-import "./chunk-WBI7FEGI.js";
+import "./chunk-T6LHVNWO.js";
+import "./chunk-4S6XGIC6.js";
+import "./chunk-QT7YFHCA.js";
+import "./chunk-IQWK723D.js";
+import "./chunk-UORPTGV2.js";
+import "./chunk-NXNJQZCP.js";
 import "./chunk-VXWN37PT.js";
-import "./chunk-UL4O5M4S.js";
-import "./chunk-FX4V5JCF.js";
-import "./chunk-QHQWEERJ.js";
-import "./chunk-3B34B2M2.js";
 import {
   useProductCategory,
   useUpdateProductCategoryProducts
-} from "./chunk-RUE5BPC2.js";
-import "./chunk-WIYFXWRI.js";
+} from "./chunk-RZLN2Q6G.js";
+import "./chunk-NBPMNUKZ.js";
+import "./chunk-QS6RWIBL.js";
+import "./chunk-3B34B2M2.js";
 import "./chunk-Y7QKP6QU.js";
-import "./chunk-INNFZYX2.js";
 import {
   useProducts
-} from "./chunk-ZEVYT6IX.js";
+} from "./chunk-QNNJN4H6.js";
 import "./chunk-A5DJIOHN.js";
 import "./chunk-RHKRREUU.js";
 import "./chunk-ZA2KFUFR.js";