@mercurjs/admin 2.2.0-canary.14 → 2.2.0-canary.16

package/dist/{chunk-HDOWEXDH.js → chunk-A2GVK4VZ.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-OMBP3YSV.js";
 import {
   useProductTableFilters
-} from "./chunk-JSH7JEKY.js";
+} from "./chunk-RZ5SFALB.js";
 import {
   useProductTableQuery
 } from "./chunk-LYZDVZWA.js";
@@ -28,7 +28,7 @@ import {
 } from "./chunk-INNFZYX2.js";
 import {
   useProducts
-} from "./chunk-H3MAUKL7.js";
+} from "./chunk-M2E3PKA4.js";
 
 // src/pages/product-types/product-type-detail/product-type-detail.tsx
 import { Children } from "react";

package/dist/{chunk-ZO7A6VYP.js → chunk-AIG4MQL4.js}

@@ -16,7 +16,7 @@ import {
 } from "./chunk-OMBP3YSV.js";
 import {
   useProductTableFilters
-} from "./chunk-JSH7JEKY.js";
+} from "./chunk-RZ5SFALB.js";
 import {
   useProductTableQuery
 } from "./chunk-LYZDVZWA.js";
@@ -43,13 +43,13 @@ import {
 } from "./chunk-3QSRE5LS.js";
 import {
   useCreatePriceList
-} from "./chunk-453BC56K.js";
+} from "./chunk-Z2UBJXTU.js";
 import {
   useDocumentDirection
 } from "./chunk-Y7QKP6QU.js";
 import {
   useProducts
-} from "./chunk-H3MAUKL7.js";
+} from "./chunk-M2E3PKA4.js";
 
 // src/pages/price-lists/price-list-create/components/price-list-create-form/schema.ts
 import { z } from "zod";

package/dist/chunk-AWLDIHXR.js

@@ -0,0 +1,204 @@
+import {
+  ActionMenu
+} from "./chunk-BDGZ4EQO.js";
+import {
+  useUpdateProduct
+} from "./chunk-M2E3PKA4.js";
+
+// src/pages/products/product-detail/components/product-media-section/product-media-section.tsx
+import { PencilSquare, ThumbnailBadge } from "@medusajs/icons";
+import {
+  Button,
+  Checkbox,
+  CommandBar,
+  Container,
+  Heading,
+  Text,
+  Tooltip,
+  clx,
+  usePrompt
+} from "@medusajs/ui";
+import { useState } from "react";
+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", "data-testid": "product-media-section", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4", "data-testid": "product-media-header", children: [
+      /* @__PURE__ */ jsx(Heading, { level: "h2", "data-testid": "product-media-title", children: t("products.media.label") }),
+      !readOnly && /* @__PURE__ */ jsx(
+        ActionMenu,
+        {
+          groups: [
+            {
+              actions: [
+                {
+                  label: t("actions.edit"),
+                  to: "media?view=edit",
+                  icon: /* @__PURE__ */ jsx(PencilSquare, {})
+                }
+              ]
+            }
+          ],
+          "data-testid": "product-media-action-menu"
+        }
+      )
+    ] }),
+    media.length > 0 ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(96px,1fr))] gap-4 px-6 py-4", "data-testid": "product-media-grid", children: media.map((i, index) => {
+      const isSelected = selection[i.id];
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: clx(
+            "shadow-elevation-card-rest transition-fg group relative aspect-square size-full overflow-hidden rounded-[8px]",
+            {
+              "hover:shadow-elevation-card-hover cursor-pointer": !readOnly
+            }
+          ),
+          "data-testid": `product-media-item-${i.id}`,
+          children: [
+            !readOnly && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: clx(
+                  "transition-fg invisible absolute right-2 top-2 opacity-0 group-hover:visible group-hover:opacity-100",
+                  {
+                    "visible opacity-100": isSelected
+                  }
+                ),
+                "data-testid": `product-media-checkbox-container-${i.id}`,
+                children: /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    checked: selection[i.id] || false,
+                    onCheckedChange: () => handleCheckedChange(i.id),
+                    "data-testid": `product-media-checkbox-${i.id}`
+                  }
+                )
+              }
+            ),
+            i.isThumbnail && /* @__PURE__ */ jsx("div", { className: "absolute left-2 top-2", "data-testid": `product-media-thumbnail-badge-${i.id}`, 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",
+                "data-testid": `product-media-image-${i.id}`
+              }
+            ) : /* @__PURE__ */ jsx(Link, { to: `media`, state: { curr: index }, "data-testid": `product-media-link-${i.id}`, children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: i.url,
+                alt: product.title,
+                className: "size-full object-cover",
+                "data-testid": `product-media-image-${i.id}`
+              }
+            ) })
+          ]
+        },
+        i.id
+      );
+    }) }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-y-4 pb-8 pt-6", "data-testid": "product-media-empty-state", 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",
+            "data-testid": "product-media-empty-state-header",
+            children: t("products.media.emptyState.header")
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-muted", "data-testid": "product-media-empty-state-description", children: t("products.media.emptyState.description") })
+      ] }),
+      !readOnly && /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", asChild: true, "data-testid": "product-media-empty-state-button", children: /* @__PURE__ */ jsx(Link, { to: "media?view=edit", "data-testid": "product-media-empty-state-link", children: t("products.media.emptyState.action") }) })
+    ] }),
+    !readOnly && /* @__PURE__ */ jsx(CommandBar, { open: !!Object.keys(selection).length, "data-testid": "product-media-command-bar", children: /* @__PURE__ */ jsxs(CommandBar.Bar, { "data-testid": "product-media-command-bar-bar", children: [
+      /* @__PURE__ */ jsx(CommandBar.Value, { "data-testid": "product-media-command-bar-value", children: t("general.countSelected", {
+        count: Object.keys(selection).length
+      }) }),
+      /* @__PURE__ */ jsx(CommandBar.Seperator, { "data-testid": "product-media-command-bar-separator" }),
+      /* @__PURE__ */ jsx(
+        CommandBar.Command,
+        {
+          action: handleDelete,
+          label: t("actions.delete"),
+          shortcut: "d",
+          "data-testid": "product-media-command-bar-delete"
+        }
+      )
+    ] }) })
+  ] });
+};
+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;
+};
+
+export {
+  ProductMediaSection
+};

package/dist/{chunk-D2VXOF46.js → chunk-B4K7H6DH.js}

@@ -1,12 +1,12 @@
 import {
   reservationItemsQueryKeys
-} from "./chunk-P5XVG4PY.js";
+} from "./chunk-XGUUM3S6.js";
 import {
   ordersQueryKeys
 } from "./chunk-VT6QIVZW.js";
 import {
   inventoryItemsQueryKeys
-} from "./chunk-H3MAUKL7.js";
+} from "./chunk-M2E3PKA4.js";
 import {
   queryClient
 } from "./chunk-RHKRREUU.js";

package/dist/{chunk-EMQP2CNF.js → chunk-D77BYNTQ.js}

@@ -17,7 +17,7 @@ import {
 import {
   useDeleteReservationItem,
   useReservationItems
-} from "./chunk-P5XVG4PY.js";
+} from "./chunk-XGUUM3S6.js";
 import {
   useStockLocations
 } from "./chunk-EPHVGD5Z.js";

package/dist/{chunk-54RTJBYO.js → chunk-DGCPYCHU.js}

@@ -2,74 +2,20 @@ import {
   useDate
 } from "./chunk-UZWFZMOX.js";
 
-// src/components/data-table/helpers/general/use-data-table-date-columns.tsx
-import {
-  createDataTableColumnHelper,
-  Tooltip
-} from "@medusajs/ui";
-import { useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import { jsx } from "react/jsx-runtime";
-var columnHelper = createDataTableColumnHelper();
-var useDataTableDateColumns = () => {
-  const { t } = useTranslation();
-  const { getFullDate } = useDate();
-  return useMemo(() => {
-    return [
-      columnHelper.accessor("created_at", {
-        header: t("fields.createdAt"),
-        cell: ({ row }) => {
-          return /* @__PURE__ */ jsx(
-            Tooltip,
-            {
-              content: getFullDate({
-                date: row.original.created_at,
-                includeTime: true
-              }),
-              children: /* @__PURE__ */ jsx("span", { children: getFullDate({ date: row.original.created_at }) })
-            }
-          );
-        },
-        enableSorting: true,
-        sortAscLabel: t("filters.sorting.dateAsc"),
-        sortDescLabel: t("filters.sorting.dateDesc")
-      }),
-      columnHelper.accessor("updated_at", {
-        header: t("fields.updatedAt"),
-        cell: ({ row }) => {
-          return /* @__PURE__ */ jsx(
-            Tooltip,
-            {
-              content: getFullDate({
-                date: row.original.updated_at,
-                includeTime: true
-              }),
-              children: /* @__PURE__ */ jsx("span", { children: getFullDate({ date: row.original.updated_at }) })
-            }
-          );
-        },
-        enableSorting: true,
-        sortAscLabel: t("filters.sorting.dateAsc"),
-        sortDescLabel: t("filters.sorting.dateDesc")
-      })
-    ];
-  }, [t, getFullDate]);
-};
-
 // src/components/data-table/helpers/general/use-data-table-date-filters.tsx
 import { createDataTableFilterHelper } from "@medusajs/ui";
 import { subDays, subMonths } from "date-fns";
-import { useMemo as useMemo2 } from "react";
-import { useTranslation as useTranslation2 } from "react-i18next";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
 var filterHelper = createDataTableFilterHelper();
 var useDateFilterOptions = () => {
-  const { t } = useTranslation2();
-  const today = useMemo2(() => {
+  const { t } = useTranslation();
+  const today = useMemo(() => {
     const date = /* @__PURE__ */ new Date();
     date.setHours(0, 0, 0, 0);
     return date;
   }, []);
-  return useMemo2(() => {
+  return useMemo(() => {
     return [
       {
         label: t("filters.date.today"),
@@ -109,10 +55,10 @@ var useDateFilterOptions = () => {
   }, [today, t]);
 };
 var useDataTableDateFilters = (disableRangeOption) => {
-  const { t } = useTranslation2();
+  const { t } = useTranslation();
   const { getFullDate } = useDate();
   const dateFilterOptions = useDateFilterOptions();
-  const rangeOptions = useMemo2(() => {
+  const rangeOptions = useMemo(() => {
     if (disableRangeOption) {
       return {
         disableRangeOption: true
@@ -125,7 +71,7 @@ var useDataTableDateFilters = (disableRangeOption) => {
       options: dateFilterOptions
     };
   }, [disableRangeOption, t, dateFilterOptions]);
-  return useMemo2(() => {
+  return useMemo(() => {
     return [
       filterHelper.accessor("created_at", {
         type: "date",
@@ -148,6 +94,5 @@ var useDataTableDateFilters = (disableRangeOption) => {
 };
 
 export {
-  useDataTableDateColumns,
   useDataTableDateFilters
 };

package/dist/{chunk-QLEGHL2Q.js → chunk-EB6ZFOTO.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-OMBP3YSV.js";
 import {
   useProductTableFilters
-} from "./chunk-JSH7JEKY.js";
+} from "./chunk-RZ5SFALB.js";
 import {
   useProductTableQuery
 } from "./chunk-LYZDVZWA.js";
@@ -24,7 +24,7 @@ import {
   useBatchProducts,
   useDeleteProduct,
   useProducts
-} from "./chunk-H3MAUKL7.js";
+} from "./chunk-M2E3PKA4.js";
 
 // src/pages/products/product-list/product-list.tsx
 import { Children as Children2 } from "react";

package/dist/{chunk-W3FDZPPF.js → chunk-EOLSQKPV.js}

@@ -27,7 +27,7 @@ import {
 import {
   useCancelOrderEdit,
   useConfirmOrderEdit
-} from "./chunk-D2VXOF46.js";
+} from "./chunk-B4K7H6DH.js";
 import {
   getPaymentsFromOrder,
   getReservationsLimitCount
@@ -88,7 +88,7 @@ import {
 } from "./chunk-LJDGVBOQ.js";
 import {
   useReservationItems
-} from "./chunk-P5XVG4PY.js";
+} from "./chunk-XGUUM3S6.js";
 import {
   useOrderGroupByOrderId
 } from "./chunk-VYMODH6P.js";

package/dist/{chunk-BPCU5QJE.js → chunk-FBD7WJPO.js}

@@ -27,7 +27,7 @@ import {
   useApiKeys,
   useDeleteApiKey,
   useRevokeApiKey
-} from "./chunk-NJP3DEE5.js";
+} from "./chunk-FJHAAROU.js";
 import {
   ActionMenu
 } from "./chunk-BDGZ4EQO.js";

package/dist/{chunk-NJP3DEE5.js → chunk-FJHAAROU.js}

@@ -1,6 +1,6 @@
 import {
   salesChannelsQueryKeys
-} from "./chunk-6FHQCLHQ.js";
+} from "./chunk-OKWGPKVK.js";
 import {
   queryClient
 } from "./chunk-RHKRREUU.js";

package/dist/{chunk-N4GJRJF5.js → chunk-FJRNNDZS.js}

@@ -1,6 +1,6 @@
 import {
   getPromotionStatus
-} from "./chunk-DJWOIRLV.js";
+} from "./chunk-RUSMGNQ6.js";
 import {
   TextCell,
   TextHeader

package/dist/{chunk-PASEZJC7.js → chunk-FYCIGKVG.js}

@@ -32,7 +32,7 @@ import {
 } from "./chunk-INNFZYX2.js";
 import {
   useProducts
-} from "./chunk-H3MAUKL7.js";
+} from "./chunk-M2E3PKA4.js";
 
 // src/pages/tax-regions/common/components/tax-rate-line/tax-rate-line.tsx
 import { PencilSquare, Trash } from "@medusajs/icons";

package/dist/{chunk-LGL4QSGB.js → chunk-GC5VN6RD.js}

@@ -34,7 +34,7 @@ import {
 import {
   inventoryItemsQueryKeys,
   useCreateInventoryItem
-} from "./chunk-H3MAUKL7.js";
+} from "./chunk-M2E3PKA4.js";
 import {
   queryClient
 } from "./chunk-RHKRREUU.js";

package/dist/{chunk-4GFS57XI.js → chunk-HLJ24XVH.js}

@@ -23,7 +23,7 @@ import {
 } from "./chunk-INNFZYX2.js";
 import {
   useProducts
-} from "./chunk-H3MAUKL7.js";
+} from "./chunk-M2E3PKA4.js";
 
 // src/pages/commission-rates/commission-rate-detail/commission-rate-detail.tsx
 import { Children } from "react";

package/dist/{chunk-72PLRAWM.js → chunk-IBX52HBP.js}

@@ -1,7 +1,7 @@
 import {
   usePromotionTableColumns,
   usePromotionTableQuery
-} from "./chunk-N4GJRJF5.js";
+} from "./chunk-FJRNNDZS.js";
 import {
   usePromotionTableFilters
 } from "./chunk-S2WEYEQR.js";

package/dist/{chunk-2OF7GB7J.js → chunk-IC3ZLUKY.js}

@@ -25,7 +25,7 @@ import {
 import {
   useCreateProductCategory,
   useProductCategories
-} from "./chunk-DN2K5EAH.js";
+} from "./chunk-KYFWVLWO.js";
 import {
   useDocumentDirection
 } from "./chunk-Y7QKP6QU.js";