@mercurjs/vendor 2.2.0-canary.12 → 2.2.0-canary.13

package/dist/chunk-4WCPN4OA.js

@@ -0,0 +1,315 @@
+import {
+  SectionRow
+} from "./chunk-4TLP3TAA.js";
+import {
+  ActionMenu
+} from "./chunk-BDGZ4EQO.js";
+import {
+  useDeleteProduct,
+  useUpdateProduct
+} from "./chunk-JAUZ73XE.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 { 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"
+        }
+      )
+    ] }) })
+  ] });
+};
+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 { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+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(Heading2, { children: product.title }),
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-x-4", 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(
+      SectionRow,
+      {
+        title: t("fields.description"),
+        value: product.description || "-"
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      SectionRow,
+      {
+        title: t("fields.subtitle"),
+        value: product.subtitle || "-"
+      }
+    ),
+    /* @__PURE__ */ jsx2(SectionRow, { title: t("fields.handle"), value: `/${product.handle}` }),
+    /* @__PURE__ */ jsx2(
+      SectionRow,
+      {
+        title: t("fields.discountable"),
+        value: product.discountable ? t("general.true") : t("general.false")
+      }
+    )
+  ] });
+};
+
+export {
+  productStatusColor,
+  ProductGeneralSection,
+  ProductMediaSection
+};

package/dist/{chunk-23LX6FBE.js → chunk-5YCDZ4AU.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-AJLGY3LQ.js";
 import {
   i18n
-} from "./chunk-N77NE6O7.js";
+} from "./chunk-A6QH53CS.js";
 
 // src/pages/products/create/constants.ts
 import { z } from "zod";

package/dist/{chunk-N77NE6O7.js → chunk-A6QH53CS.js}

@@ -9873,18 +9873,22 @@ var en_default = {
       header: "Create offer",
       successToast: "Offer was successfully published. Only offers with stock levels and prices set will be visible on the storefront.",
       publish: "Publish",
+      tipLabel: "Tip:",
       tip: "Select all relevant products that match your inventory, then easily create offers for them by simply adding your stock levels and prices.",
       addPrice: "Add price",
       addInventoryItem: "Add inventory item",
       stockLevelsWarning: "Offers created, but some stock levels could not be saved: {{message}}",
       tabs: {
-        catalogue: "Catalogue",
+        catalogue: "Products",
         stockLevelsAndPrices: "Stock Levels & Prices"
       }
     },
     detail: {
       offerLabel: "Offer",
       productVariant: "Product Variant",
+      offerVariant: "Offer Variant",
+      associatedProduct: "Associated product",
+      shippingConfiguration: "Shipping Configuration",
       inventoryItems: "Inventory items",
       manageKit: "Manage inventory kit",
       noInventoryItems: "No inventory items attached. Open the inventory drawer to attach one.",
@@ -9922,12 +9926,14 @@ var en_default = {
       create: "Create",
       manage_prices: "Manage prices",
       manage_inventory: "Manage inventory",
+      edit_prices: "Edit prices",
+      edit_stock_levels: "Edit stock levels",
       bulkDelete: "Delete selected"
     },
     fields: {
       sku: "SKU",
       variant: "Master variant",
-      shippingProfile: "Shipping profile",
+      shippingProfile: "Shipping Profile",
       ean: "EAN",
       upc: "UPC",
       requiredQuantity: "Required quantity",

package/dist/{chunk-TM76WRG2.js → chunk-AQTEEQWX.js}

@@ -1,7 +1,7 @@
 import {
   FileUpload,
   formatFileSize
-} from "./chunk-23LX6FBE.js";
+} from "./chunk-5YCDZ4AU.js";
 import {
   Form
 } from "./chunk-3QSRE5LS.js";

package/dist/{chunk-K6LOZ4S3.js → chunk-DEJIBIQZ.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-UCYSCKZV.js";
 import {
   useProductTags
-} from "./chunk-TBYCZRZ7.js";
+} from "./chunk-R5QZO3QY.js";
 import {
   useProductTypes
 } from "./chunk-VV6IKGCN.js";