@mercurjs/vendor 2.1.2 → 2.2.0-canary.1

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

@@ -1,590 +0,0 @@
-import {
-  LinkButton
-} from "./chunk-7AV5EJJ5.js";
-import {
-  getLocaleAmount
-} from "./chunk-PXYDR7WQ.js";
-import "./chunk-FQERBIVS.js";
-import {
-  PlaceholderCell
-} from "./chunk-PHOCVOZ5.js";
-import {
-  _DataTable,
-  useDataTable
-} from "./chunk-AIF2KTEE.js";
-import "./chunk-YN3FGNJM.js";
-import "./chunk-KAZ5BYTQ.js";
-import {
-  NoRecords
-} from "./chunk-3EF54XFY.js";
-import "./chunk-IQPN4PZJ.js";
-import {
-  SectionRow
-} from "./chunk-4TLP3TAA.js";
-import {
-  TwoColumnPage
-} from "./chunk-CAS74NLJ.js";
-import "./chunk-LRD242C7.js";
-import "./chunk-47SXTGLN.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-BOZJOOGW.js";
-import "./chunk-RL7SFZOF.js";
-import "./chunk-LWJF63JW.js";
-import "./chunk-NBPMNUKZ.js";
-import "./chunk-WBI7FEGI.js";
-import "./chunk-VXWN37PT.js";
-import "./chunk-UL4O5M4S.js";
-import "./chunk-FX4V5JCF.js";
-import {
-  ActionMenu
-} from "./chunk-BDGZ4EQO.js";
-import "./chunk-QHQWEERJ.js";
-import "./chunk-3B34B2M2.js";
-import "./chunk-RUE5BPC2.js";
-import "./chunk-LAVHRER2.js";
-import "./chunk-Y7QKP6QU.js";
-import {
-  TwoColumnPageSkeleton
-} from "./chunk-INNFZYX2.js";
-import {
-  useDeleteVariant,
-  useProduct,
-  useProductVariant,
-  useProductVariants,
-  useUpdateProductVariant,
-  useUpdateVariantMedia,
-  variantsQueryKeys
-} from "./chunk-ZEVYT6IX.js";
-import "./chunk-A5DJIOHN.js";
-import {
-  queryClient
-} from "./chunk-RHKRREUU.js";
-import "./chunk-ZA2KFUFR.js";
-import {
-  fetchQuery
-} from "./chunk-RIN4CBRB.js";
-import "./chunk-NBMM2TZK.js";
-
-// src/pages/product-variants/product-variant-detail/constants.ts
-var VARIANT_DETAIL_FIELDS = "*inventory_items,*inventory_items.inventory,*inventory_items.inventory.location_levels,*options,*options.option,*prices,*prices.price_rules";
-
-// 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,
-    {
-      fields: VARIANT_DETAIL_FIELDS
-    },
-    {
-      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, {
-    fields: VARIANT_DETAIL_FIELDS
-  }),
-  queryFn: async () => await fetchQuery(`/vendor/products/${productId}`, {
-    method: "GET"
-    // query: { fields: VARIANT_DETAIL_FIELDS },
-  })
-});
-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 { useMemo as useMemo2 } from "react";
-import { useParams } from "react-router-dom";
-
-// src/utils/get-explicit-variant-images.ts
-var getExplicitVariantImages = (images, variantId) => {
-  return images.filter((img) => {
-    if (!img.variants || img.variants.length === 0) {
-      return false;
-    }
-    return img.variants.some(
-      (v) => typeof v === "string" ? v === variantId : v.id === variantId
-    );
-  });
-};
-
-// 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 && variant.inventory.length > 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((o) => /* @__PURE__ */ jsx2(
-      SectionRow,
-      {
-        title: o.option?.title,
-        value: /* @__PURE__ */ jsx2(Badge, { size: "2xsmall", children: o.value })
-      },
-      o.id
-    ))
-  ] });
-}
-
-// src/pages/product-variants/product-variant-detail/components/variant-inventory-section/variant-inventory-section.tsx
-import { useTranslation as useTranslation3 } from "react-i18next";
-import { Container as Container2, Heading as Heading2 } from "@medusajs/ui";
-
-// src/pages/product-variants/product-variant-detail/components/variant-inventory-section/use-inventory-table-columns.tsx
-import { createColumnHelper } from "@tanstack/react-table";
-import { useMemo } from "react";
-import { useTranslation as useTranslation2 } from "react-i18next";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var columnHelper = createColumnHelper();
-var useInventoryTableColumns = () => {
-  const { t } = useTranslation2();
-  return useMemo(
-    () => [
-      columnHelper.accessor("variant.title", {
-        header: t("fields.title"),
-        cell: ({ getValue }) => {
-          const title = getValue();
-          if (!title) {
-            return /* @__PURE__ */ jsx3(PlaceholderCell, {});
-          }
-          return /* @__PURE__ */ jsx3("div", { className: "flex size-full items-center overflow-hidden", children: /* @__PURE__ */ jsx3("span", { className: "truncate", children: title }) });
-        }
-      }),
-      columnHelper.accessor("variant.sku", {
-        header: t("fields.sku"),
-        cell: ({ getValue }) => {
-          const sku = getValue();
-          if (!sku) {
-            return /* @__PURE__ */ jsx3(PlaceholderCell, {});
-          }
-          return /* @__PURE__ */ jsx3("div", { className: "flex size-full items-center overflow-hidden", children: /* @__PURE__ */ jsx3("span", { className: "truncate", children: sku }) });
-        }
-      })
-    ],
-    [t]
-  );
-};
-
-// src/pages/product-variants/product-variant-detail/components/variant-inventory-section/variant-inventory-section.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-var PAGE_SIZE = 20;
-function VariantInventorySection({
-  inventoryItems
-}) {
-  const { t } = useTranslation3();
-  const columns = useInventoryTableColumns();
-  const { table } = useDataTable({
-    data: inventoryItems ?? [],
-    columns,
-    count: inventoryItems.length,
-    enablePagination: true,
-    getRowId: (row) => row?.variant?.id,
-    pageSize: PAGE_SIZE
-  });
-  return /* @__PURE__ */ jsxs2(Container2, { className: "divide-y p-0", children: [
-    /* @__PURE__ */ jsx4("div", { className: "flex items-center justify-between px-6 py-4", children: /* @__PURE__ */ jsx4("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx4(Heading2, { level: "h2", children: t("fields.inventoryItems") }) }) }),
-    /* @__PURE__ */ jsx4(
-      _DataTable,
-      {
-        table,
-        columns,
-        pageSize: PAGE_SIZE,
-        count: inventoryItems.length,
-        navigateTo: (row) => `/inventory/${row.original.id}`
-      }
-    )
-  ] });
-}
-function InventorySectionPlaceholder() {
-  const { t } = useTranslation3();
-  return /* @__PURE__ */ jsx4(Container2, { className: "divide-y p-0", children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between px-6 py-4", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsx4(Heading2, { level: "h2", children: t("fields.inventoryItems") }),
-      /* @__PURE__ */ jsx4("span", { className: "txt-small text-ui-fg-subtle", children: t("products.variant.inventory.notManagedDesc") })
-    ] }),
-    /* @__PURE__ */ jsx4("div", { className: "flex items-center gap-x-4", children: /* @__PURE__ */ jsx4(LinkButton, { to: "edit", children: t("products.variant.edit.header") }) })
-  ] }) });
-}
-
-// 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 Container3,
-  Heading as Heading3,
-  Text,
-  Tooltip
-} from "@medusajs/ui";
-import { useTranslation as useTranslation4 } from "react-i18next";
-import { Link } from "react-router-dom";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-var getMedia = (images, thumbnail) => {
-  const media = (images ?? []).map((image) => ({
-    id: image.id,
-    url: image.url,
-    isThumbnail: image.url === thumbnail
-  }));
-  if (thumbnail && !media.some((m) => m.isThumbnail)) {
-    media.unshift({
-      id: "variant_thumbnail",
-      url: thumbnail,
-      isThumbnail: true
-    });
-  }
-  return media;
-};
-var VariantMediaSection = ({
-  variant,
-  variantImages,
-  productId
-}) => {
-  const { t } = useTranslation4();
-  const [selection, setSelection] = useState({});
-  const media = getMedia(variantImages, variant.thumbnail);
-  const handleCheckedChange = (id) => {
-    setSelection((prev) => {
-      if (prev[id]) {
-        const { [id]: _, ...rest } = prev;
-        return rest;
-      }
-      return { ...prev, [id]: true };
-    });
-  };
-  const { mutateAsync: updateVariantMedia } = useUpdateVariantMedia(
-    productId,
-    variant.id
-  );
-  const { mutateAsync: updateVariant } = useUpdateProductVariant(
-    productId,
-    variant.id
-  );
-  const handleRemove = async () => {
-    const ids = Object.keys(selection);
-    const includingThumbnail = ids.some(
-      (id) => media.find((m) => m.id === id)?.isThumbnail
-    );
-    const imageIdsToRemove = ids.filter((id) => id !== "variant_thumbnail");
-    const ops = [];
-    if (imageIdsToRemove.length) {
-      ops.push(updateVariantMedia({ remove: imageIdsToRemove }));
-    }
-    if (includingThumbnail) {
-      ops.push(updateVariant({ thumbnail: null }));
-    }
-    if (!ops.length) {
-      setSelection({});
-      return;
-    }
-    await Promise.all(ops);
-    setSelection({});
-  };
-  return /* @__PURE__ */ jsxs3(Container3, { className: "divide-y p-0", children: [
-    /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between px-6 py-4", children: [
-      /* @__PURE__ */ jsx5(Heading3, { level: "h2", children: t("products.media.label") }),
-      /* @__PURE__ */ jsx5(
-        ActionMenu,
-        {
-          groups: [
-            {
-              actions: [
-                {
-                  label: t("actions.edit"),
-                  to: "media?view=edit",
-                  icon: /* @__PURE__ */ jsx5(PencilSquare2, {})
-                }
-              ]
-            }
-          ]
-        }
-      )
-    ] }),
-    media.length > 0 ? /* @__PURE__ */ jsx5("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(96px,1fr))] gap-4 px-6 py-4", children: media.map((item, index) => {
-      const isSelected = selection[item.id];
-      return /* @__PURE__ */ jsxs3(
-        "div",
-        {
-          className: "group relative aspect-square size-full cursor-pointer overflow-hidden rounded-[8px] shadow-elevation-card-rest transition-fg hover:shadow-elevation-card-hover",
-          children: [
-            /* @__PURE__ */ jsx5(
-              "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__ */ jsx5(
-                  Checkbox,
-                  {
-                    checked: selection[item.id] || false,
-                    onCheckedChange: () => handleCheckedChange(item.id),
-                    "aria-label": t("actions.select")
-                  }
-                )
-              }
-            ),
-            item.isThumbnail && /* @__PURE__ */ jsx5("div", { className: "absolute left-2 top-2", children: /* @__PURE__ */ jsx5(Tooltip, { content: t("fields.thumbnail"), children: /* @__PURE__ */ jsx5(ThumbnailBadge, {}) }) }),
-            /* @__PURE__ */ jsx5(Link, { to: "media", state: { curr: index }, children: /* @__PURE__ */ jsx5(
-              "img",
-              {
-                src: item.url,
-                alt: `${variant.title ?? ""} ${index + 1}`,
-                className: "size-full object-cover"
-              }
-            ) })
-          ]
-        },
-        item.id
-      );
-    }) }) : /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-center gap-y-4 pb-8 pt-6", children: [
-      /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-center", children: [
-        /* @__PURE__ */ jsx5(
-          Text,
-          {
-            size: "small",
-            leading: "compact",
-            weight: "plus",
-            className: "text-ui-fg-subtle",
-            children: t("products.media.emptyState.header")
-          }
-        ),
-        /* @__PURE__ */ jsx5(Text, { size: "small", className: "text-ui-fg-muted", children: t("products.media.emptyState.variantDescription") })
-      ] }),
-      /* @__PURE__ */ jsx5(Button, { size: "small", variant: "secondary", asChild: true, children: /* @__PURE__ */ jsx5(Link, { to: "media?view=edit", children: t("products.media.emptyState.action") }) })
-    ] }),
-    /* @__PURE__ */ jsx5(CommandBar, { open: !!Object.keys(selection).length, children: /* @__PURE__ */ jsxs3(CommandBar.Bar, { children: [
-      /* @__PURE__ */ jsx5(CommandBar.Value, { children: t("general.countSelected", {
-        count: Object.keys(selection).length
-      }) }),
-      /* @__PURE__ */ jsx5(CommandBar.Seperator, {}),
-      /* @__PURE__ */ jsx5(
-        CommandBar.Command,
-        {
-          action: handleRemove,
-          label: t("actions.remove"),
-          shortcut: "r"
-        }
-      )
-    ] }) })
-  ] });
-};
-
-// src/pages/product-variants/product-variant-detail/components/variant-prices-section/variant-prices-section.tsx
-import { useState as useState2 } from "react";
-import { useTranslation as useTranslation5 } from "react-i18next";
-import { CurrencyDollar } from "@medusajs/icons";
-import { Button as Button2, Container as Container4, Heading as Heading4 } from "@medusajs/ui";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-function VariantPricesSection({ variant }) {
-  const { t } = useTranslation5();
-  const prices = variant.prices?.filter((p) => p.currency_code && p.currency_code.length <= 3 && !Object.keys(p.rules || {}).length).sort((p1, p2) => (p1.currency_code ?? "").localeCompare(p2.currency_code ?? ""));
-  const hasPrices = !!prices?.length;
-  const [pageSize, setPageSize] = useState2(3);
-  const displayPrices = prices?.slice(0, pageSize);
-  const onShowMore = () => {
-    setPageSize(pageSize + 3);
-  };
-  return /* @__PURE__ */ jsxs4(Container4, { className: "flex flex-col divide-y p-0", children: [
-    /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between px-6 py-4", children: [
-      /* @__PURE__ */ jsx6(Heading4, { level: "h2", children: t("labels.prices") }),
-      /* @__PURE__ */ jsx6(
-        ActionMenu,
-        {
-          groups: [
-            {
-              actions: [
-                {
-                  label: t("actions.edit"),
-                  to: `/products/${variant.product_id}/variants/${variant.id}/prices`,
-                  icon: /* @__PURE__ */ jsx6(CurrencyDollar, {})
-                }
-              ]
-            }
-          ]
-        }
-      )
-    ] }),
-    !hasPrices && /* @__PURE__ */ jsx6(NoRecords, { className: "h-60" }),
-    displayPrices?.map((price) => {
-      return /* @__PURE__ */ jsxs4(
-        "div",
-        {
-          className: "txt-small text-ui-fg-subtle flex justify-between px-6 py-4",
-          children: [
-            /* @__PURE__ */ jsx6("span", { className: "font-medium", children: price.currency_code.toUpperCase() }),
-            /* @__PURE__ */ jsx6("span", { children: getLocaleAmount(price.amount, price.currency_code) })
-          ]
-        },
-        price.id
-      );
-    }),
-    hasPrices && /* @__PURE__ */ jsxs4("div", { className: "txt-small text-ui-fg-subtle flex items-center justify-between px-6 py-4", children: [
-      /* @__PURE__ */ jsx6("span", { className: "font-medium", children: t("products.variant.pricesPagination", {
-        total: prices.length,
-        current: Math.min(pageSize, prices.length)
-      }) }),
-      /* @__PURE__ */ jsx6(
-        Button2,
-        {
-          onClick: onShowMore,
-          disabled: pageSize >= prices.length,
-          className: "-mr-3 text-blue-500",
-          variant: "transparent",
-          children: t("actions.showMore")
-        }
-      )
-    ] })
-  ] });
-}
-
-// src/pages/product-variants/product-variant-detail/product-variant-detail.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-var ProductVariantDetail = () => {
-  const { product_id, variant_id } = useParams();
-  const {
-    product,
-    isLoading: isProductLoading,
-    isError,
-    error
-  } = useProduct(product_id, {
-    fields: "*variants.inventory_items,*images"
-  });
-  const { variants, isLoading: isVariantsLoading } = useProductVariants(
-    product_id,
-    { fields: "*images" }
-  );
-  const productVariant = product?.variants?.find(
-    (item) => item.id === variant_id
-  );
-  const variantsDataVariant = variants?.find((v) => v.id === variant_id);
-  const variantImages = useMemo2(() => {
-    if (!variantsDataVariant?.images) {
-      return [];
-    }
-    return getExplicitVariantImages(
-      variantsDataVariant.images,
-      variant_id
-    );
-  }, [variantsDataVariant?.images, variant_id]);
-  const isLoading = isProductLoading || isVariantsLoading;
-  if (isLoading || !productVariant) {
-    return /* @__PURE__ */ jsx7(TwoColumnPageSkeleton, { mainSections: 3, sidebarSections: 1 });
-  }
-  if (isError) {
-    throw error;
-  }
-  return /* @__PURE__ */ jsxs5(TwoColumnPage, { data: productVariant, hasOutlet: true, children: [
-    /* @__PURE__ */ jsxs5(TwoColumnPage.Main, { children: [
-      /* @__PURE__ */ jsx7(VariantGeneralSection, { variant: productVariant }),
-      /* @__PURE__ */ jsx7(
-        VariantMediaSection,
-        {
-          variant: productVariant,
-          variantImages,
-          productId: product_id
-        }
-      ),
-      !productVariant.manage_inventory ? /* @__PURE__ */ jsx7(InventorySectionPlaceholder, {}) : productVariant.inventory_items && /* @__PURE__ */ jsx7(
-        VariantInventorySection,
-        {
-          inventoryItems: productVariant.inventory_items.map((i) => {
-            return {
-              id: i.inventory_item_id,
-              required_quantity: i.required_quantity,
-              variant: productVariant
-            };
-          })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx7(TwoColumnPage.Sidebar, { children: /* @__PURE__ */ jsx7(VariantPricesSection, { variant: productVariant }) })
-  ] });
-};
-export {
-  ProductVariantDetailBreadcrumb as Breadcrumb,
-  ProductVariantDetail as Component,
-  variantLoader as loader
-};