@mercurjs/vendor 2.2.0-canary.2 → 2.2.0-canary.21

package/dist/{product-types-UUHBV4IZ.js → product-types-XXU7X42K.js}

@@ -1,27 +1,27 @@
 import {
   ProductTypeListPage
-} from "./chunk-DVEKYLPV.js";
+} from "./chunk-6QS6IZC6.js";
 import "./chunk-MWQQVKRU.js";
 import "./chunk-EBZ5VZEO.js";
 import "./chunk-VOHEQ7B5.js";
 import "./chunk-JHIMVLB2.js";
 import "./chunk-2ZFELO2L.js";
-import "./chunk-26OOAKQ6.js";
 import "./chunk-SYNUA6LQ.js";
 import "./chunk-FQERBIVS.js";
 import "./chunk-PHOCVOZ5.js";
-import "./chunk-AIF2KTEE.js";
+import "./chunk-26OOAKQ6.js";
+import "./chunk-WKRW5OPL.js";
 import "./chunk-YN3FGNJM.js";
-import "./chunk-KAZ5BYTQ.js";
+import "./chunk-KCHYLLVG.js";
 import "./chunk-3EF54XFY.js";
 import "./chunk-YV6MK4PZ.js";
-import "./chunk-LRD242C7.js";
-import "./chunk-QHQWEERJ.js";
 import "./chunk-THHRRYRS.js";
+import "./chunk-LRD242C7.js";
 import "./chunk-INNFZYX2.js";
 import "./chunk-VV6IKGCN.js";
 import "./chunk-BDGZ4EQO.js";
 import "./chunk-LAVHRER2.js";
+import "./chunk-QHQWEERJ.js";
 import "./chunk-Y7QKP6QU.js";
 import "./chunk-A5DJIOHN.js";
 import "./chunk-RHKRREUU.js";

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

@@ -0,0 +1,369 @@
+import {
+  VARIANT_DETAIL_FIELDS,
+  variantLoader
+} from "./chunk-3EDZQSKG.js";
+import {
+  SectionRow
+} from "./chunk-4TLP3TAA.js";
+import {
+  SingleColumnPage
+} from "./chunk-YV6MK4PZ.js";
+import {
+  TwoColumnPageSkeleton
+} from "./chunk-INNFZYX2.js";
+import "./chunk-KZYRC3WR.js";
+import "./chunk-F4OJN2F2.js";
+import "./chunk-LRARA622.js";
+import "./chunk-M6N4ISXL.js";
+import "./chunk-S7EKBD2C.js";
+import "./chunk-VV6IKGCN.js";
+import "./chunk-M3YUT5AY.js";
+import "./chunk-BOZJOOGW.js";
+import "./chunk-IQWK723D.js";
+import "./chunk-4S6XGIC6.js";
+import "./chunk-S23FD6FA.js";
+import "./chunk-7FIPNQM2.js";
+import "./chunk-LTQQRVZG.js";
+import "./chunk-VXWN37PT.js";
+import "./chunk-247L47JD.js";
+import "./chunk-POOTMH3K.js";
+import "./chunk-VXMOPVRH.js";
+import "./chunk-NBPMNUKZ.js";
+import "./chunk-4R5GESED.js";
+import "./chunk-7RGUD6PI.js";
+import "./chunk-3B34B2M2.js";
+import {
+  ActionMenu
+} from "./chunk-BDGZ4EQO.js";
+import "./chunk-LAVHRER2.js";
+import "./chunk-Y7QKP6QU.js";
+import {
+  useDeleteVariant,
+  useProductVariant,
+  useUpdateProductVariant
+} from "./chunk-TSTUAL6N.js";
+import "./chunk-A5DJIOHN.js";
+import "./chunk-RHKRREUU.js";
+import "./chunk-ZA2KFUFR.js";
+import "./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/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.options ?? []).map((opt) => {
+      const title = opt.option?.title;
+      if (!title || !opt.value) return null;
+      return /* @__PURE__ */ jsx2(
+        SectionRow,
+        {
+          title,
+          value: /* @__PURE__ */ jsx2("div", { className: "flex flex-wrap items-center gap-1", children: /* @__PURE__ */ jsx2(Badge, { size: "2xsmall", children: opt.value }) })
+        },
+        opt.id
+      );
+    })
+  ] });
+}
+
+// src/pages/product-variants/product-variant-detail/components/variant-media-section/variant-media-section.tsx
+import { useState } from "react";
+import { PencilSquare as PencilSquare2, ThumbnailBadge } from "@medusajs/icons";
+import {
+  Button,
+  Checkbox,
+  clx,
+  CommandBar,
+  Container as Container2,
+  Heading as Heading2,
+  Text,
+  toast,
+  Tooltip,
+  usePrompt as usePrompt2
+} from "@medusajs/ui";
+import { useTranslation as useTranslation2 } from "react-i18next";
+import { Link } from "react-router-dom";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var getVariantImages = (variant) => (variant.images ?? []).filter(
+  (image) => (image.variants ?? []).some((v) => v.id === variant.id)
+);
+var VariantMediaSection = ({
+  variant
+}) => {
+  const { t } = useTranslation2();
+  const prompt = usePrompt2();
+  const [selection, setSelection] = useState({});
+  const media = getMedia(variant);
+  const { mutateAsync } = useUpdateProductVariant(
+    variant.product_id,
+    variant.id
+  );
+  const handleCheckedChange = (id) => {
+    setSelection((prev) => {
+      if (prev[id]) {
+        const { [id]: _, ...rest } = prev;
+        return rest;
+      }
+      return { ...prev, [id]: true };
+    });
+  };
+  const handleDelete = async () => {
+    const ids = Object.keys(selection);
+    const includingThumbnail = ids.some(
+      (id) => media.find((m) => m.id === id)?.isThumbnail
+    );
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: includingThumbnail ? t("products.media.deleteWarningWithThumbnail", { count: ids.length }) : t("products.media.deleteWarning", { count: ids.length }),
+      confirmText: t("actions.delete"),
+      cancelText: t("actions.cancel")
+    });
+    if (!res) {
+      return;
+    }
+    const linkedIds = new Set(getVariantImages(variant).map((i) => i.id));
+    const remove = ids.filter((id) => linkedIds.has(id));
+    await mutateAsync(
+      {
+        images: { remove },
+        thumbnail: includingThumbnail ? "" : void 0
+      },
+      {
+        onSuccess: () => {
+          toast.success(t("products.media.successToast"));
+          setSelection({});
+        },
+        onError: (error) => {
+          toast.error(error.message);
+        }
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs2(Container2, { className: "divide-y p-0", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between px-6 py-4", children: [
+      /* @__PURE__ */ jsx3(Heading2, { level: "h2", children: t("products.media.label") }),
+      /* @__PURE__ */ jsx3(
+        ActionMenu,
+        {
+          groups: [
+            {
+              actions: [
+                {
+                  label: t("actions.edit"),
+                  to: "media",
+                  icon: /* @__PURE__ */ jsx3(PencilSquare2, {})
+                }
+              ]
+            }
+          ]
+        }
+      )
+    ] }),
+    media.length > 0 ? /* @__PURE__ */ jsx3("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(96px,1fr))] gap-4 px-6 py-4", children: media.map((image) => {
+      const isSelected = selection[image.id];
+      return /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          className: "group shadow-elevation-card-rest hover:shadow-elevation-card-hover transition-fg relative aspect-square size-full cursor-pointer overflow-hidden rounded-[8px]",
+          children: [
+            /* @__PURE__ */ jsx3(
+              "div",
+              {
+                className: clx(
+                  "transition-fg invisible absolute right-2 top-2 opacity-0 group-hover:visible group-hover:opacity-100",
+                  {
+                    "visible opacity-100": isSelected
+                  }
+                ),
+                children: /* @__PURE__ */ jsx3(
+                  Checkbox,
+                  {
+                    checked: selection[image.id] || false,
+                    onCheckedChange: () => handleCheckedChange(image.id)
+                  }
+                )
+              }
+            ),
+            image.isThumbnail && /* @__PURE__ */ jsx3("div", { className: "absolute left-2 top-2", children: /* @__PURE__ */ jsx3(Tooltip, { content: t("fields.thumbnail"), children: /* @__PURE__ */ jsx3(ThumbnailBadge, {}) }) }),
+            /* @__PURE__ */ jsx3(Link, { to: "media", children: /* @__PURE__ */ jsx3(
+              "img",
+              {
+                src: image.url,
+                alt: variant.title ?? "",
+                className: "size-full object-cover"
+              }
+            ) })
+          ]
+        },
+        image.id
+      );
+    }) }) : /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center gap-y-4 pb-8 pt-6", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center", children: [
+        /* @__PURE__ */ jsx3(
+          Text,
+          {
+            size: "small",
+            leading: "compact",
+            weight: "plus",
+            className: "text-ui-fg-subtle",
+            children: t("products.media.emptyState.header")
+          }
+        ),
+        /* @__PURE__ */ jsx3(Text, { size: "small", className: "text-ui-fg-muted", children: t("products.media.emptyState.description") })
+      ] }),
+      /* @__PURE__ */ jsx3(Button, { size: "small", variant: "secondary", asChild: true, children: /* @__PURE__ */ jsx3(Link, { to: "media", children: t("products.media.emptyState.action") }) })
+    ] }),
+    /* @__PURE__ */ jsx3(CommandBar, { open: !!Object.keys(selection).length, children: /* @__PURE__ */ jsxs2(CommandBar.Bar, { children: [
+      /* @__PURE__ */ jsx3(CommandBar.Value, { children: t("general.countSelected", {
+        count: Object.keys(selection).length
+      }) }),
+      /* @__PURE__ */ jsx3(CommandBar.Seperator, {}),
+      /* @__PURE__ */ jsx3(
+        CommandBar.Command,
+        {
+          action: handleDelete,
+          label: t("actions.delete"),
+          shortcut: "d"
+        }
+      )
+    ] }) })
+  ] });
+};
+var getMedia = (variant) => {
+  const { thumbnail } = variant;
+  const media = getVariantImages(variant).map((image) => ({
+    id: image.id,
+    url: image.url,
+    isThumbnail: image.url === thumbnail
+  }));
+  if (thumbnail && !media.some((m) => m.url === thumbnail)) {
+    media.unshift({
+      id: "img_thumbnail",
+      url: thumbnail,
+      isThumbnail: true
+    });
+  }
+  return media;
+};
+
+// src/pages/product-variants/product-variant-detail/product-variant-detail.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs3 } 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,
+    { fields: VARIANT_DETAIL_FIELDS },
+    {
+      initialData
+    }
+  );
+  if (isLoading || !variant) {
+    return /* @__PURE__ */ jsx4(TwoColumnPageSkeleton, { mainSections: 2, sidebarSections: 0 });
+  }
+  if (isError) {
+    throw error;
+  }
+  return /* @__PURE__ */ jsx4(SingleColumnPage, { data: variant, hasOutlet: true, children: Children.count(children) > 0 ? children : /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx4(VariantGeneralSection, { variant }),
+    /* @__PURE__ */ jsx4(VariantMediaSection, { variant })
+  ] }) });
+};
+var ProductVariantDetail = Object.assign(Root, {
+  GeneralSection: VariantGeneralSection,
+  MediaSection: VariantMediaSection
+});
+export {
+  ProductVariantDetailBreadcrumb as Breadcrumb,
+  ProductVariantDetail as Component,
+  variantLoader as loader
+};

package/dist/{product-variant-edit-YYNPHE4L.js → product-variant-edit-A2KO3E7B.js}

@@ -8,7 +8,7 @@ import {
 } from "./chunk-7CAFYKKA.js";
 import {
   AttributeValueInput
-} from "./chunk-35G3SZRN.js";
+} from "./chunk-P3SOE76R.js";
 import "./chunk-JRTZWK77.js";
 import {
   optionalInt
@@ -18,7 +18,7 @@ import "./chunk-VBRTC2VU.js";
 import "./chunk-TKGWSUEI.js";
 import {
   KeyboundForm
-} from "./chunk-U2ZFCAPX.js";
+} from "./chunk-SITRHMZZ.js";
 import {
   RouteDrawer,
   useRouteModal
@@ -28,13 +28,13 @@ import {
 } from "./chunk-3QSRE5LS.js";
 import {
   require_dist
-} from "./chunk-DZIXC7OE.js";
+} from "./chunk-6FLSBL4Q.js";
 import {
   useProduct,
   useProductVariant,
   useUpdateProductVariant,
   variantsQueryKeys
-} from "./chunk-QNNJN4H6.js";
+} from "./chunk-TSTUAL6N.js";
 import "./chunk-A5DJIOHN.js";
 import {
   queryClient
@@ -55,14 +55,15 @@ 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 { InformationCircleSolid } from "@medusajs/icons";
+import { Button, Divider, Heading, Input, Tooltip, toast } from "@medusajs/ui";
+import i18next from "i18next";
 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(),
+  title: z.string().min(1, i18next.t("products.variant.validation.titleRequired")),
   sku: z.string().optional(),
   ean: z.string().optional(),
   upc: z.string().optional(),
@@ -74,7 +75,7 @@ var ProductEditVariantSchema = z.object({
   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()
+  options: z.record(z.string().min(1, i18next.t("products.variant.validation.optionRequired"))).optional()
 });
 var ProductEditVariantForm = ({
   variant,
@@ -83,19 +84,20 @@ var ProductEditVariantForm = ({
   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 defaultOptions = variantAttributes.reduce(
+    (acc, attribute) => {
+      const key = attribute.handle ?? attribute.id;
+      const matched = variant.options?.find(
+        (o) => o.option?.title === attribute.name
+      );
+      acc[key] = matched?.value ?? "";
+      return acc;
+    },
+    {}
+  );
   const form = useForm({
     defaultValues: {
       title: variant.title || "",
-      material: variant.material || "",
       sku: variant.sku || "",
       ean: variant.ean || "",
       upc: variant.upc || "",
@@ -107,7 +109,7 @@ var ProductEditVariantForm = ({
       mid_code: variant.mid_code || "",
       hs_code: variant.hs_code || "",
       origin_country: variant.origin_country || "",
-      attribute_values: defaultAttributeValues
+      options: defaultOptions
     },
     resolver: zodResolver(ProductEditVariantSchema)
   });
@@ -122,14 +124,18 @@ var ProductEditVariantForm = ({
       height,
       width,
       length,
-      attribute_values,
+      options,
       ...optional
     } = data;
     const nullableData = transformNullableFormData(optional);
-    const cleanedAttributeValues = Object.fromEntries(
-      Object.entries(attribute_values ?? {}).filter(
-        ([, v]) => Array.isArray(v) ? v.length > 0 : !!v
-      )
+    const cleanedOptions = variantAttributes.reduce(
+      (acc, attr) => {
+        const fieldKey = attr.handle ?? attr.id;
+        const v = options?.[fieldKey];
+        if (v && attr.name) acc[attr.name] = v;
+        return acc;
+      },
+      {}
     );
     await mutateAsync(
       {
@@ -138,7 +144,7 @@ var ProductEditVariantForm = ({
         width: transformNullableFormNumber(width),
         length: transformNullableFormNumber(length),
         title,
-        attribute_values: Object.keys(cleanedAttributeValues).length ? cleanedAttributeValues : void 0,
+        options: Object.keys(cleanedOptions).length ? cleanedOptions : void 0,
         ...nullableData
       },
       {
@@ -174,27 +180,13 @@ var ProductEditVariantForm = ({
                 }
               }
             ),
-            /* @__PURE__ */ jsx(
-              Form.Field,
-              {
-                control: form.control,
-                name: "material",
-                render: ({ field }) => {
-                  return /* @__PURE__ */ jsxs(Form.Item, { children: [
-                    /* @__PURE__ */ jsx(Form.Label, { optional: true, children: t("fields.material") }),
-                    /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
-                    /* @__PURE__ */ jsx(Form.ErrorMessage, {})
-                  ] });
-                }
-              }
-            ),
             variantAttributes.map((attribute) => {
               const fieldKey = attribute.handle ?? attribute.id;
               return /* @__PURE__ */ jsx(
                 Form.Field,
                 {
                   control: form.control,
-                  name: `attribute_values.${fieldKey}`,
+                  name: `options.${fieldKey}`,
                   render: ({ field: { value, onChange } }) => {
                     return /* @__PURE__ */ jsxs(Form.Item, { children: [
                       /* @__PURE__ */ jsx(Form.Label, { children: attribute.name }),
@@ -281,7 +273,10 @@ var ProductEditVariantForm = ({
           ] }) }),
           /* @__PURE__ */ jsx(Divider, {}),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-4", children: [
-            /* @__PURE__ */ jsx(Heading, { level: "h2", children: t("products.attributes") }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1", children: [
+              /* @__PURE__ */ jsx(Heading, { level: "h2", children: t("products.attributes") }),
+              /* @__PURE__ */ jsx(Tooltip, { content: t("products.variant.edit.attributesTooltip"), children: /* @__PURE__ */ jsx(InformationCircleSolid, { className: "text-ui-fg-muted" }) })
+            ] }),
             /* @__PURE__ */ jsx(
               Form.Field,
               {
@@ -403,7 +398,7 @@ var ProductVariantEdit = () => {
   const { variant, isPending, isError, error } = useProductVariant(
     productId,
     variant_id || searchVariantId,
-    void 0,
+    { fields: "*options,*options.option" },
     {
       initialData
     }
@@ -436,14 +431,16 @@ var ProductVariantEdit = () => {
 };
 
 // src/pages/product-variants/product-variant-edit/loader.ts
+var VARIANT_EDIT_FIELDS = "*options,*options.option";
 var queryFn = async (id, variantId) => {
   return await sdk.vendor.products.$id.variants.$variantId.query({
     $id: id,
-    $variantId: variantId
+    $variantId: variantId,
+    fields: VARIANT_EDIT_FIELDS
   });
 };
 var editProductVariantQuery = (id, variantId) => ({
-  queryKey: variantsQueryKeys.detail(variantId),
+  queryKey: variantsQueryKeys.detail(variantId, { fields: VARIANT_EDIT_FIELDS }),
   queryFn: async () => queryFn(id, variantId)
 });
 var editProductVariantLoader = async ({