@mercurjs/vendor 2.2.0-canary.9 → 2.2.0-rc.1

package/dist/chunk-5SRG2247.js

@@ -0,0 +1,353 @@
+import {
+  SectionRow
+} from "./chunk-4TLP3TAA.js";
+import {
+  ActionMenu
+} from "./chunk-BDGZ4EQO.js";
+import {
+  useDeleteProduct,
+  useUpdateProduct
+} from "./chunk-744GLNZW.js";
+
+// src/pages/products/[id]/_components/product-media-section/product-media-section.tsx
+import { useState } from "react";
+import { PencilSquare, ThumbnailBadge } from "@medusajs/icons";
+import {
+  Button,
+  Checkbox,
+  clx,
+  CommandBar,
+  Container,
+  Heading,
+  Text,
+  Tooltip,
+  usePrompt
+} from "@medusajs/ui";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import { DisplayExtensionZone } from "@mercurjs/dashboard-shared";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ProductMediaSection = ({
+  product,
+  readOnly = false
+}) => {
+  const { t } = useTranslation();
+  const prompt = usePrompt();
+  const [selection, setSelection] = useState({});
+  const media = getMedia(product);
+  const handleCheckedChange = (id) => {
+    setSelection((prev) => {
+      if (prev[id]) {
+        const { [id]: _, ...rest } = prev;
+        return rest;
+      } else {
+        return { ...prev, [id]: true };
+      }
+    });
+  };
+  const { mutateAsync } = useUpdateProduct(product.id);
+  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 mediaToKeep = product.images?.filter((i) => !ids.includes(i.id)).map((i) => ({ url: i.url }));
+    await mutateAsync(
+      {
+        images: mediaToKeep,
+        thumbnail: includingThumbnail ? "" : void 0
+      },
+      {
+        onSuccess: () => {
+          setSelection({});
+        }
+      }
+    );
+  };
+  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__ */ jsx(Heading, { level: "h2", children: t("products.media.label") }),
+      !readOnly && /* @__PURE__ */ jsx(
+        ActionMenu,
+        {
+          groups: [
+            {
+              actions: [
+                {
+                  label: t("actions.edit"),
+                  to: "media?view=edit",
+                  icon: /* @__PURE__ */ jsx(PencilSquare, {})
+                }
+              ]
+            }
+          ]
+        }
+      )
+    ] }),
+    media.length > 0 ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(96px,1fr))] gap-4 px-6 py-4", children: media.map((i, index) => {
+      const isSelected = selection[i.id];
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: clx(
+            "group relative aspect-square size-full overflow-hidden rounded-[8px] shadow-elevation-card-rest transition-fg",
+            { "cursor-pointer hover:shadow-elevation-card-hover": !readOnly }
+          ),
+          children: [
+            !readOnly && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: clx(
+                  "invisible absolute right-2 top-2 opacity-0 transition-fg group-hover:visible group-hover:opacity-100",
+                  {
+                    "visible opacity-100": isSelected
+                  }
+                ),
+                children: /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    checked: selection[i.id] || false,
+                    onCheckedChange: () => handleCheckedChange(i.id)
+                  }
+                )
+              }
+            ),
+            i.isThumbnail && /* @__PURE__ */ jsx("div", { className: "absolute left-2 top-2", children: /* @__PURE__ */ jsx(Tooltip, { content: t("fields.thumbnail"), children: /* @__PURE__ */ jsx(ThumbnailBadge, {}) }) }),
+            readOnly ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: i.url,
+                alt: product.title,
+                className: "size-full object-cover"
+              }
+            ) : /* @__PURE__ */ jsx(Link, { to: `media`, state: { curr: index }, children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: i.url,
+                alt: product.title,
+                className: "size-full object-cover"
+              }
+            ) })
+          ]
+        },
+        i.id
+      );
+    }) }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-y-4 pb-8 pt-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            size: "small",
+            leading: "compact",
+            weight: "plus",
+            className: "text-ui-fg-subtle",
+            children: t("products.media.emptyState.header")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            size: "small",
+            className: "text-ui-fg-muted",
+            children: t("products.media.emptyState.description")
+          }
+        )
+      ] }),
+      !readOnly && /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "small",
+          variant: "secondary",
+          asChild: true,
+          children: /* @__PURE__ */ jsx(Link, { to: "media?view=edit", children: t("products.media.emptyState.action") })
+        }
+      )
+    ] }),
+    !readOnly && /* @__PURE__ */ jsx(CommandBar, { open: !!Object.keys(selection).length, children: /* @__PURE__ */ jsxs(CommandBar.Bar, { children: [
+      /* @__PURE__ */ jsx(CommandBar.Value, { children: t("general.countSelected", {
+        count: Object.keys(selection).length
+      }) }),
+      /* @__PURE__ */ jsx(CommandBar.Seperator, {}),
+      /* @__PURE__ */ jsx(
+        CommandBar.Command,
+        {
+          action: handleDelete,
+          label: t("actions.delete"),
+          shortcut: "d"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx(DisplayExtensionZone, { model: "product", zone: "media", data: product })
+  ] });
+};
+var getMedia = (product) => {
+  const { images = [], thumbnail } = product;
+  const media = (images || []).map((image) => ({
+    id: image.id,
+    url: image.url,
+    isThumbnail: image.url === thumbnail
+  }));
+  if (thumbnail && !media.some((mediaItem) => mediaItem.url === thumbnail)) {
+    media.unshift({
+      id: "img_thumbnail",
+      url: thumbnail,
+      isThumbnail: true
+    });
+  }
+  return media;
+};
+
+// src/pages/products/[id]/_components/product-general-section/product-general-section.tsx
+import { PencilSquare as PencilSquare2, Trash } from "@medusajs/icons";
+import { Container as Container2, Heading as Heading2, StatusBadge, usePrompt as usePrompt2 } from "@medusajs/ui";
+import { useTranslation as useTranslation2 } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { DisplayExtensionZone as DisplayExtensionZone2, DisplayField } from "@mercurjs/dashboard-shared";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var GENERAL_FIELD_IDS = [
+  "title",
+  "status",
+  "description",
+  "subtitle",
+  "handle",
+  "discountable"
+];
+var productStatusColor = (status) => {
+  switch (status) {
+    case "draft":
+      return "grey";
+    case "proposed":
+      return "orange";
+    case "published":
+      return "green";
+    case "rejected":
+      return "red";
+    default:
+      return "grey";
+  }
+};
+var ProductGeneralSection = ({
+  product
+}) => {
+  const { t } = useTranslation2();
+  const prompt = usePrompt2();
+  const navigate = useNavigate();
+  const { mutateAsync } = useDeleteProduct(product.id);
+  const handleDelete = async () => {
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("products.deleteWarning", {
+        title: product.title
+      }),
+      confirmText: t("actions.delete"),
+      cancelText: t("actions.cancel")
+    });
+    if (!res) {
+      return;
+    }
+    await mutateAsync(void 0, {
+      onSuccess: () => {
+        navigate("..");
+      }
+    });
+  };
+  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__ */ jsx2(DisplayField, { model: "product", zone: "general", id: "title", data: product, children: /* @__PURE__ */ jsx2(Heading2, { children: product.title }) }),
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-x-4", children: [
+        /* @__PURE__ */ jsx2(
+          DisplayField,
+          {
+            model: "product",
+            zone: "general",
+            id: "status",
+            data: product,
+            children: /* @__PURE__ */ jsx2(StatusBadge, { color: productStatusColor(product.status), children: t(`products.productStatus.${product.status}`) })
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          ActionMenu,
+          {
+            groups: [
+              {
+                actions: [
+                  {
+                    label: t("actions.edit"),
+                    to: "edit",
+                    icon: /* @__PURE__ */ jsx2(PencilSquare2, {})
+                  }
+                ]
+              },
+              {
+                actions: [
+                  {
+                    label: t("actions.delete"),
+                    onClick: handleDelete,
+                    icon: /* @__PURE__ */ jsx2(Trash, {})
+                  }
+                ]
+              }
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx2(DisplayField, { model: "product", zone: "general", id: "description", data: product, children: /* @__PURE__ */ jsx2(
+      SectionRow,
+      {
+        title: t("fields.description"),
+        value: product.description || "-"
+      }
+    ) }),
+    /* @__PURE__ */ jsx2(DisplayField, { model: "product", zone: "general", id: "subtitle", data: product, children: /* @__PURE__ */ jsx2(
+      SectionRow,
+      {
+        title: t("fields.subtitle"),
+        value: product.subtitle || "-"
+      }
+    ) }),
+    /* @__PURE__ */ jsx2(DisplayField, { model: "product", zone: "general", id: "handle", data: product, children: /* @__PURE__ */ jsx2(SectionRow, { title: t("fields.handle"), value: `/${product.handle}` }) }),
+    /* @__PURE__ */ jsx2(
+      DisplayField,
+      {
+        model: "product",
+        zone: "general",
+        id: "discountable",
+        data: product,
+        children: /* @__PURE__ */ jsx2(
+          SectionRow,
+          {
+            title: t("fields.discountable"),
+            value: product.discountable ? t("general.true") : t("general.false")
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      DisplayExtensionZone2,
+      {
+        model: "product",
+        zone: "general",
+        data: product,
+        builtInFieldIds: GENERAL_FIELD_IDS
+      }
+    )
+  ] });
+};
+
+export {
+  productStatusColor,
+  ProductGeneralSection,
+  ProductMediaSection
+};

package/dist/{chunk-L57USMYC.js → chunk-5YZ3G5EZ.js}

@@ -1,6 +1,6 @@
 import {
   getStylizedAmount
-} from "./chunk-3BXCPHN6.js";
+} from "./chunk-XCHKUSUU.js";
 import {
   PlaceholderCell
 } from "./chunk-PHOCVOZ5.js";

package/dist/{chunk-JAUZ73XE.js → chunk-744GLNZW.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-ZA2KFUFR.js";
 import {
   sdk
-} from "./chunk-RIN4CBRB.js";
+} from "./chunk-LXZXXOJ3.js";
 
 // src/hooks/api/inventory.tsx
 import {
@@ -27,18 +27,21 @@ var PRODUCT_ATTRIBUTES_QUERY_KEY = "product_attributes";
 var productAttributesQueryKeys = queryKeysFactory(
   PRODUCT_ATTRIBUTES_QUERY_KEY
 );
-var useProductAttribute = (id, query, options) => {
-  const { data, ...rest } = useQuery({
-    queryKey: productAttributesQueryKeys.detail(id, query),
-    queryFn: async () => sdk.vendor.productAttributes.$id.query({ $id: id, ...query }),
-    ...options
+var sortAttributeValuesByRank = (attributes) => {
+  attributes?.forEach((attribute) => {
+    if (Array.isArray(attribute.values)) {
+      attribute.values.sort((a, b) => (a.rank ?? 0) - (b.rank ?? 0));
+    }
   });
-  return { ...data, ...rest };
 };
 var useProductAttributes = (query, options) => {
   const { data, ...rest } = useQuery({
     queryKey: productAttributesQueryKeys.list(query),
-    queryFn: async () => sdk.vendor.productAttributes.query({ ...query }),
+    queryFn: async () => {
+      const res = await sdk.vendor.productAttributes.query({ ...query });
+      sortAttributeValuesByRank(res?.product_attributes);
+      return res;
+    },
     ...options
   });
   return { ...data, ...rest };
@@ -116,6 +119,7 @@ var useDeleteProduct = (id, options) => {
         queryKey: productChangeQueryKeys.detail(id)
       });
       queryClient.invalidateQueries({ queryKey: productsQueryKeys.detail(id) });
+      queryClient.invalidateQueries({ queryKey: productsQueryKeys.lists() });
       options?.onSuccess?.(data, variables, context);
     },
     ...options
@@ -192,6 +196,9 @@ var useUpdateProductVariant = (productId, variantId, options) => {
       queryClient.invalidateQueries({
         queryKey: productsQueryKeys.detail(productId)
       });
+      queryClient.invalidateQueries({
+        queryKey: variantsQueryKeys.detail(variantId)
+      });
       options?.onSuccess?.(data, variables, context);
     },
     ...options
@@ -236,86 +243,43 @@ var useDeleteVariantLazy = (productId, options) => {
     ...options
   });
 };
-var useAddProductAttribute = (productId, options) => {
+var useBatchProductAttributes = (productId, options) => {
   return useMutation({
-    mutationFn: (payload) => sdk.vendor.products.$id.attributes.mutate({
+    mutationFn: (payload) => sdk.vendor.products.$id.attributes.batch.mutate({
       $id: productId,
       ...payload
     }),
     onSuccess: (data, variables, context) => {
-      queryClient.invalidateQueries({
-        queryKey: productChangeQueryKeys.detail(productId)
-      });
       queryClient.invalidateQueries({
         queryKey: productAttributesQueryKeys.lists()
       });
       queryClient.invalidateQueries({
         queryKey: productsQueryKeys.detail(productId)
       });
-      options?.onSuccess?.(data, variables, context);
-    },
-    ...options
-  });
-};
-var useUpdateProductAttribute = (productId, attributeId, options) => {
-  return useMutation({
-    mutationFn: (payload) => sdk.vendor.products.$id.attributes.$attributeId.mutate({
-      $id: productId,
-      $attributeId: attributeId,
-      ...payload
-    }),
-    onSuccess: (data, variables, context) => {
       queryClient.invalidateQueries({
         queryKey: productChangeQueryKeys.detail(productId)
       });
-      queryClient.invalidateQueries({
-        queryKey: productAttributesQueryKeys.lists()
-      });
-      queryClient.invalidateQueries({
-        queryKey: productsQueryKeys.detail(productId)
-      });
       options?.onSuccess?.(data, variables, context);
     },
     ...options
   });
 };
-var useBatchProductAttributes = (productId, options) => {
+var useRemoveAttributeFromProduct = (productId, attributeId, options) => {
   return useMutation({
-    mutationFn: (payload) => sdk.vendor.products.$id.attributes.batch.mutate({
+    mutationFn: () => sdk.vendor.products.$id.attributes.batch.mutate({
       $id: productId,
-      ...payload
+      remove: [attributeId]
     }),
     onSuccess: (data, variables, context) => {
-      queryClient.invalidateQueries({
-        queryKey: productChangeQueryKeys.detail(productId)
-      });
       queryClient.invalidateQueries({
         queryKey: productAttributesQueryKeys.lists()
       });
       queryClient.invalidateQueries({
         queryKey: productsQueryKeys.detail(productId)
       });
-      options?.onSuccess?.(data, variables, context);
-    },
-    ...options
-  });
-};
-var useRemoveProductAttribute = (productId, attributeId, options) => {
-  return useMutation({
-    mutationFn: () => sdk.vendor.products.$id.attributes.$attributeId.delete({
-      $id: productId,
-      $attributeId: attributeId
-    }),
-    onSuccess: (data, variables, context) => {
       queryClient.invalidateQueries({
         queryKey: productChangeQueryKeys.detail(productId)
       });
-      queryClient.invalidateQueries({
-        queryKey: productAttributesQueryKeys.lists()
-      });
-      queryClient.invalidateQueries({
-        queryKey: productsQueryKeys.detail(productId)
-      });
       options?.onSuccess?.(data, variables, context);
     },
     ...options
@@ -342,7 +306,7 @@ var useInventoryItems = (query, options) => {
 var useInventoryItem = (id, query, options) => {
   const { data, ...rest } = useQuery3({
     queryFn: () => sdk.vendor.inventoryItems.$id.query({ $id: id, ...query }),
-    queryKey: inventoryItemsQueryKeys.detail(id),
+    queryKey: inventoryItemsQueryKeys.detail(id, query),
     ...options
   });
   return { ...data, ...rest };
@@ -511,8 +475,6 @@ export {
   useUpdateInventoryLevel,
   useBatchInventoryItemLocationLevels,
   useBatchInventoryItemsLocationLevels,
-  productAttributesQueryKeys,
-  useProductAttribute,
   useProductAttributes,
   productsQueryKeys,
   variantsQueryKeys,
@@ -529,8 +491,6 @@ export {
   useUpdateProductVariant,
   useDeleteVariant,
   useDeleteVariantLazy,
-  useAddProductAttribute,
-  useUpdateProductAttribute,
   useBatchProductAttributes,
-  useRemoveProductAttribute
+  useRemoveAttributeFromProduct
 };