@mercurjs/admin 2.0.0-canary.24

package/dist/product-import-Y54VG4AC.js

@@ -0,0 +1,261 @@
+import {
+  FilePreview
+} from "./chunk-RSBZREKG.js";
+import {
+  FileUpload
+} from "./chunk-TN4TIT7O.js";
+import {
+  RouteDrawer,
+  useRouteModal
+} from "./chunk-MWOKFNRO.js";
+import "./chunk-3QSRE5LS.js";
+import "./chunk-BDGZ4EQO.js";
+import "./chunk-LAVHRER2.js";
+import "./chunk-Y7QKP6QU.js";
+import "./chunk-ORW4HNX5.js";
+import "./chunk-ODBDAABQ.js";
+import "./chunk-YGQUBTKR.js";
+import "./chunk-362QMJZM.js";
+import "./chunk-FODCCP6C.js";
+import "./chunk-AWZFIP25.js";
+import "./chunk-2QKPRGNK.js";
+import "./chunk-XBMLI2YI.js";
+import "./chunk-XL52SYWY.js";
+import "./chunk-NS5CHWOH.js";
+import "./chunk-WDZFLCSQ.js";
+import "./chunk-VVTSF42Z.js";
+import "./chunk-D3KDXELJ.js";
+import "./chunk-2MKZ4HD4.js";
+import "./chunk-OGYWOPHZ.js";
+import "./chunk-U62GYN4A.js";
+import "./chunk-KTKL7M34.js";
+import "./chunk-JJVGCTKT.js";
+import "./chunk-I43SCBL3.js";
+import "./chunk-LLWK3OR6.js";
+import "./chunk-HYUGYB23.js";
+import "./chunk-XCMR2HTV.js";
+import "./chunk-CI5Z6FGV.js";
+import "./chunk-LCZXAT4Q.js";
+import "./chunk-S6LPCNXQ.js";
+import {
+  useConfirmImportProducts,
+  useImportProducts
+} from "./chunk-T435NFHC.js";
+import "./chunk-2KCF3ZIB.js";
+import "./chunk-ZYNBKBY3.js";
+import "./chunk-NBMM2TZK.js";
+
+// src/pages/products/product-import/product-import.tsx
+import { Button, Heading, Text as Text2, toast } from "@medusajs/ui";
+import { useTranslation as useTranslation3 } from "react-i18next";
+import { useMemo, useState as useState2 } from "react";
+
+// src/pages/products/product-import/components/upload-import.tsx
+import { useState } from "react";
+import { Hint } from "@medusajs/ui";
+import { useTranslation } from "react-i18next";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SUPPORTED_FORMATS = ["text/csv"];
+var SUPPORTED_FORMATS_FILE_EXTENSIONS = [".csv"];
+var UploadImport = ({
+  onUploaded
+}) => {
+  const { t } = useTranslation();
+  const [error, setError] = useState();
+  const hasInvalidFiles = (fileList) => {
+    const invalidFile = fileList.find(
+      (f) => !SUPPORTED_FORMATS.includes(f.file.type)
+    );
+    if (invalidFile) {
+      setError(
+        t("products.media.invalidFileType", {
+          name: invalidFile.file.name,
+          types: SUPPORTED_FORMATS_FILE_EXTENSIONS.join(", ")
+        })
+      );
+      return true;
+    }
+    return false;
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-4", children: [
+    /* @__PURE__ */ jsx(
+      FileUpload,
+      {
+        label: t("products.import.uploadLabel"),
+        hint: t("products.import.uploadHint"),
+        multiple: false,
+        hasError: !!error,
+        formats: SUPPORTED_FORMATS,
+        onUploaded: (files) => {
+          setError(void 0);
+          if (hasInvalidFiles(files)) {
+            return;
+          }
+          onUploaded(files[0].file);
+        }
+      }
+    ),
+    error && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Hint, { variant: "error", children: error }) })
+  ] });
+};
+
+// src/pages/products/product-import/components/import-summary.tsx
+import { Divider, Text } from "@medusajs/ui";
+import { useTranslation as useTranslation2 } from "react-i18next";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ImportSummary = ({
+  summary
+}) => {
+  const { t } = useTranslation2();
+  return /* @__PURE__ */ jsxs2("div", { className: "shadow-elevation-card-rest bg-ui-bg-component transition-fg flex flex-row rounded-md px-3 py-2", children: [
+    /* @__PURE__ */ jsx2(
+      Stat,
+      {
+        title: summary.toCreate.toLocaleString(),
+        description: t("products.import.upload.productsToCreate")
+      }
+    ),
+    /* @__PURE__ */ jsx2(Divider, { orientation: "vertical", className: "h-10 px-3" }),
+    /* @__PURE__ */ jsx2(
+      Stat,
+      {
+        title: summary.toUpdate.toLocaleString(),
+        description: t("products.import.upload.productsToUpdate")
+      }
+    )
+  ] });
+};
+var Stat = ({
+  title,
+  description
+}) => {
+  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-1 flex-col justify-center", children: [
+    /* @__PURE__ */ jsx2(Text, { size: "xlarge", className: "font-sans font-medium", children: title }),
+    /* @__PURE__ */ jsx2(
+      Text,
+      {
+        leading: "compact",
+        size: "xsmall",
+        weight: "plus",
+        className: "text-ui-fg-subtle",
+        children: description
+      }
+    )
+  ] });
+};
+
+// src/pages/products/product-import/product-import.tsx
+import { Trash } from "@medusajs/icons";
+
+// src/pages/products/product-import/helpers/import-template.ts
+var ProductImportCSV = `data:text/csv;charset=utf-8,Product Id,Product Handle,Product Title,Product Subtitle,Product Description,Product Status,Product Thumbnail,Product Weight,Product Length,Product Width,Product Height,Product HS Code,Product Origin Country,Product MID Code,Product Material,Product Collection Id,Product Type Id,Product Tag 1,Product Discountable,Product External Id,Variant Id,Variant Title,Variant SKU,Variant Barcode,Variant Allow Backorder,Variant Manage Inventory,Variant Weight,Variant Length,Variant Width,Variant Height,Variant HS Code,Variant Origin Country,Variant MID Code,Variant Material,Variant Price EUR,Variant Price USD,Variant Option 1 Name,Variant Option 1 Value,Product Image 1 Url,Product Image 2 Url
+,coffee-mug-v3,Medusa Coffee Mug,,Every programmer's best friend.,published,https://medusa-public-images.s3.eu-west-1.amazonaws.com/coffee-mug.png,400,,,,,,,,,,,TRUE,,,One Size,,,FALSE,TRUE,,,,,,,,,10,12,Size,One Size,https://medusa-public-images.s3.eu-west-1.amazonaws.com/coffee-mug.png,
+,sweatpants-v2,Medusa Sweatpants,,"Reimagine the feeling of classic sweatpants. With our cotton sweatpants, everyday essentials no longer have to be ordinary.",published,https://medusa-public-images.s3.eu-west-1.amazonaws.com/sweatpants-gray-front.png,400,,,,,,,,,,,TRUE,,,S,,,FALSE,TRUE,,,,,,,,,29.5,33.5,Size,S,https://medusa-public-images.s3.eu-west-1.amazonaws.com/sweatpants-gray-front.png,https://medusa-public-images.s3.eu-west-1.amazonaws.com/sweatpants-gray-back.png
+,sweatpants-v2,Medusa Sweatpants,,"Reimagine the feeling of classic sweatpants. With our cotton sweatpants, everyday essentials no longer have to be ordinary.",published,https://medusa-public-images.s3.eu-west-1.amazonaws.com/sweatpants-gray-front.png,400,,,,,,,,,,,TRUE,,,M,,,FALSE,TRUE,,,,,,,,,29.5,33.5,Size,M,https://medusa-public-images.s3.eu-west-1.amazonaws.com/sweatpants-gray-front.png,https://medusa-public-images.s3.eu-west-1.amazonaws.com/sweatpants-gray-back.png
+,sweatpants-v2,Medusa Sweatpants,,"Reimagine the feeling of classic sweatpants. With our cotton sweatpants, everyday essentials no longer have to be ordinary.",published,https://medusa-public-images.s3.eu-west-1.amazonaws.com/sweatpants-gray-front.png,400,,,,,,,,,,,TRUE,,,L,,,FALSE,TRUE,,,,,,,,,29.5,33.5,Size,L,https://medusa-public-images.s3.eu-west-1.amazonaws.com/sweatpants-gray-front.png,https://medusa-public-images.s3.eu-west-1.amazonaws.com/sweatpants-gray-back.png
+,sweatpants-v2,Medusa Sweatpants,,"Reimagine the feeling of classic sweatpants. With our cotton sweatpants, everyday essentials no longer have to be ordinary.",published,https://medusa-public-images.s3.eu-west-1.amazonaws.com/sweatpants-gray-front.png,400,,,,,,,,,,,TRUE,,,XL,,,FALSE,TRUE,,,,,,,,,29.5,33.5,Size,XL,https://medusa-public-images.s3.eu-west-1.amazonaws.com/sweatpants-gray-front.png,https://medusa-public-images.s3.eu-west-1.amazonaws.com/sweatpants-gray-back.png`;
+var getProductImportCsvTemplate = () => {
+  return encodeURI(ProductImportCSV);
+};
+
+// src/pages/products/product-import/product-import.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var ProductImport = () => {
+  const { t } = useTranslation3();
+  return /* @__PURE__ */ jsxs3(RouteDrawer, { children: [
+    /* @__PURE__ */ jsxs3(RouteDrawer.Header, { children: [
+      /* @__PURE__ */ jsx3(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx3(Heading, { children: t("products.import.header") }) }),
+      /* @__PURE__ */ jsx3(RouteDrawer.Description, { className: "sr-only", children: t("products.import.description") })
+    ] }),
+    /* @__PURE__ */ jsx3(ProductImportContent, {})
+  ] });
+};
+var ProductImportContent = () => {
+  const { t } = useTranslation3();
+  const [filename, setFilename] = useState2();
+  const { mutateAsync: importProducts, isPending, data } = useImportProducts();
+  const { mutateAsync: confirm } = useConfirmImportProducts();
+  const { handleSuccess } = useRouteModal();
+  const productImportTemplateContent = useMemo(() => {
+    return getProductImportCsvTemplate();
+  }, []);
+  const handleUploaded = async (file) => {
+    setFilename(file.name);
+    await importProducts(
+      { file },
+      {
+        onError: (err) => {
+          toast.error(err.message);
+          setFilename(void 0);
+        }
+      }
+    );
+  };
+  const handleConfirm = async () => {
+    if (!data?.transaction_id) {
+      return;
+    }
+    await confirm(data.transaction_id, {
+      onSuccess: () => {
+        toast.info(t("products.import.success.title"), {
+          description: t("products.import.success.description")
+        });
+        handleSuccess();
+      },
+      onError: (err) => {
+        toast.error(err.message);
+      }
+    });
+  };
+  const uploadedFileActions = [
+    {
+      actions: [
+        {
+          label: t("actions.delete"),
+          icon: /* @__PURE__ */ jsx3(Trash, {}),
+          onClick: () => setFilename(void 0)
+        }
+      ]
+    }
+  ];
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsxs3(RouteDrawer.Body, { children: [
+      /* @__PURE__ */ jsx3(Heading, { level: "h2", children: t("products.import.upload.title") }),
+      /* @__PURE__ */ jsx3(Text2, { size: "small", className: "text-ui-fg-subtle", children: t("products.import.upload.description") }),
+      /* @__PURE__ */ jsx3("div", { className: "mt-4", children: filename ? /* @__PURE__ */ jsx3(
+        FilePreview,
+        {
+          filename,
+          loading: isPending,
+          activity: t("products.import.upload.preprocessing"),
+          actions: uploadedFileActions
+        }
+      ) : /* @__PURE__ */ jsx3(UploadImport, { onUploaded: handleUploaded }) }),
+      data?.summary && !!filename && /* @__PURE__ */ jsx3("div", { className: "mt-4", children: /* @__PURE__ */ jsx3(ImportSummary, { summary: data?.summary }) }),
+      /* @__PURE__ */ jsx3(Heading, { className: "mt-6", level: "h2", children: t("products.import.template.title") }),
+      /* @__PURE__ */ jsx3(Text2, { size: "small", className: "text-ui-fg-subtle", children: t("products.import.template.description") }),
+      /* @__PURE__ */ jsx3("div", { className: "mt-4", children: /* @__PURE__ */ jsx3(
+        FilePreview,
+        {
+          filename: "product-import-template.csv",
+          url: productImportTemplateContent
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx3(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-x-2", children: [
+      /* @__PURE__ */ jsx3(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx3(Button, { size: "small", variant: "secondary", children: t("actions.cancel") }) }),
+      /* @__PURE__ */ jsx3(
+        Button,
+        {
+          onClick: handleConfirm,
+          size: "small",
+          disabled: !data?.transaction_id || !filename,
+          children: t("actions.import")
+        }
+      )
+    ] }) })
+  ] });
+};
+export {
+  ProductImport as Component
+};

package/dist/product-list-EV2TS3Y4.js

@@ -0,0 +1,313 @@
+import {
+  useProductTableColumns
+} from "./chunk-3CKTAFTR.js";
+import "./chunk-G5OVX555.js";
+import "./chunk-FWPGOIFA.js";
+import "./chunk-DB6ANJBO.js";
+import "./chunk-FQERBIVS.js";
+import "./chunk-PHOCVOZ5.js";
+import {
+  _DataTable,
+  useDataTable
+} from "./chunk-FLCYR7E5.js";
+import "./chunk-YBZWO4ZV.js";
+import "./chunk-KAZ5BYTQ.js";
+import "./chunk-3EF54XFY.js";
+import "./chunk-WIYFXWRI.js";
+import {
+  useProductTableFilters
+} from "./chunk-ERTSYQAI.js";
+import {
+  useProductTableQuery
+} from "./chunk-KW56S7WF.js";
+import "./chunk-KBYZLKI4.js";
+import "./chunk-YWWUOGJA.js";
+import {
+  SingleColumnPage
+} from "./chunk-U2UCL2VG.js";
+import "./chunk-INNFZYX2.js";
+import {
+  ActionMenu
+} from "./chunk-BDGZ4EQO.js";
+import "./chunk-LAVHRER2.js";
+import "./chunk-Y7QKP6QU.js";
+import "./chunk-THHRRYRS.js";
+import "./chunk-UZWFZMOX.js";
+import "./chunk-XQNVC4Q7.js";
+import "./chunk-ORW4HNX5.js";
+import "./chunk-ODBDAABQ.js";
+import "./chunk-YGQUBTKR.js";
+import "./chunk-362QMJZM.js";
+import "./chunk-FODCCP6C.js";
+import "./chunk-AWZFIP25.js";
+import "./chunk-2QKPRGNK.js";
+import "./chunk-XBMLI2YI.js";
+import "./chunk-XL52SYWY.js";
+import "./chunk-NS5CHWOH.js";
+import "./chunk-WDZFLCSQ.js";
+import "./chunk-VVTSF42Z.js";
+import "./chunk-D3KDXELJ.js";
+import "./chunk-2MKZ4HD4.js";
+import "./chunk-OGYWOPHZ.js";
+import "./chunk-U62GYN4A.js";
+import "./chunk-KTKL7M34.js";
+import "./chunk-JJVGCTKT.js";
+import "./chunk-I43SCBL3.js";
+import "./chunk-LLWK3OR6.js";
+import "./chunk-HYUGYB23.js";
+import "./chunk-XCMR2HTV.js";
+import "./chunk-CI5Z6FGV.js";
+import "./chunk-LCZXAT4Q.js";
+import "./chunk-S6LPCNXQ.js";
+import {
+  productsQueryKeys,
+  useDeleteProduct,
+  useProducts
+} from "./chunk-T435NFHC.js";
+import {
+  queryClient
+} from "./chunk-2KCF3ZIB.js";
+import {
+  sdk
+} from "./chunk-ZYNBKBY3.js";
+import "./chunk-NBMM2TZK.js";
+
+// src/pages/products/product-list/loader.ts
+var productsListQuery = () => ({
+  queryKey: productsQueryKeys.list({
+    limit: 20,
+    offset: 0,
+    is_giftcard: false
+  }),
+  queryFn: async () => sdk.admin.product.list({ limit: 20, offset: 0, is_giftcard: false })
+});
+var productsLoader = (client) => {
+  return async () => {
+    const query = productsListQuery();
+    return queryClient.getQueryData(
+      query.queryKey
+    ) ?? await client.fetchQuery(query);
+  };
+};
+
+// src/pages/products/product-list/components/product-list-table/product-list-table.tsx
+import { PencilSquare, Trash } from "@medusajs/icons";
+import { Button, Container, Heading, toast, usePrompt } from "@medusajs/ui";
+import { keepPreviousData } from "@tanstack/react-query";
+import { createColumnHelper } from "@tanstack/react-table";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { Link, Outlet, useLoaderData, useLocation } from "react-router-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PAGE_SIZE = 20;
+var ProductListTable = () => {
+  const { t } = useTranslation();
+  const location = useLocation();
+  const initialData = useLoaderData();
+  const { searchParams, raw } = useProductTableQuery({ pageSize: PAGE_SIZE });
+  const { products, count, isLoading, isError, error } = useProducts(
+    {
+      ...searchParams,
+      is_giftcard: false
+    },
+    {
+      initialData,
+      placeholderData: keepPreviousData
+    }
+  );
+  const filters = useProductTableFilters();
+  const columns = useColumns();
+  const { table } = useDataTable({
+    data: products ?? [],
+    columns,
+    count,
+    enablePagination: true,
+    pageSize: PAGE_SIZE,
+    getRowId: (row) => row.id
+  });
+  if (isError) {
+    throw error;
+  }
+  return /* @__PURE__ */ jsxs(Container, { className: "divide-y p-0", "data-testid": "products-list-table", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex items-center justify-between px-6 py-4",
+        "data-testid": "products-list-header",
+        children: [
+          /* @__PURE__ */ jsx(Heading, { level: "h2", "data-testid": "products-list-title", children: t("products.domain") }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex items-center justify-center gap-x-2",
+              "data-testid": "products-list-actions",
+              children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    size: "small",
+                    variant: "secondary",
+                    asChild: true,
+                    "data-testid": "products-export-button",
+                    children: /* @__PURE__ */ jsx(
+                      Link,
+                      {
+                        to: `export${location.search}`,
+                        "data-testid": "products-export-link",
+                        children: t("actions.export")
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    size: "small",
+                    variant: "secondary",
+                    asChild: true,
+                    "data-testid": "products-import-button",
+                    children: /* @__PURE__ */ jsx(
+                      Link,
+                      {
+                        to: `import${location.search}`,
+                        "data-testid": "products-import-link",
+                        children: t("actions.import")
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    size: "small",
+                    variant: "secondary",
+                    asChild: true,
+                    "data-testid": "products-create-button",
+                    children: /* @__PURE__ */ jsx(Link, { to: "create", "data-testid": "products-create-link", children: t("actions.create") })
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { "data-testid": "products-data-table", children: /* @__PURE__ */ jsx(
+      _DataTable,
+      {
+        table,
+        columns,
+        count,
+        pageSize: PAGE_SIZE,
+        filters,
+        search: true,
+        pagination: true,
+        isLoading,
+        queryObject: raw,
+        navigateTo: (row) => `${row.original.id}`,
+        orderBy: [
+          { key: "title", label: t("fields.title") },
+          { key: "created_at", label: t("fields.createdAt") },
+          { key: "updated_at", label: t("fields.updatedAt") }
+        ],
+        noRecords: {
+          message: t("products.list.noRecordsMessage")
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Outlet, {})
+  ] });
+};
+var ProductActions = ({ product }) => {
+  const { t } = useTranslation();
+  const prompt = usePrompt();
+  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: () => {
+        toast.success(t("products.toasts.delete.success.header"), {
+          description: t("products.toasts.delete.success.description", {
+            title: product.title
+          })
+        });
+      },
+      onError: (e) => {
+        toast.error(t("products.toasts.delete.error.header"), {
+          description: e.message
+        });
+      }
+    });
+  };
+  return /* @__PURE__ */ jsx(
+    ActionMenu,
+    {
+      groups: [
+        {
+          actions: [
+            {
+              icon: /* @__PURE__ */ jsx(PencilSquare, {}),
+              label: t("actions.edit"),
+              to: `/products/${product.id}/edit`
+            }
+          ]
+        },
+        {
+          actions: [
+            {
+              icon: /* @__PURE__ */ jsx(Trash, {}),
+              label: t("actions.delete"),
+              onClick: handleDelete
+            }
+          ]
+        }
+      ],
+      "data-testid": `product-actions-${product.id}`
+    }
+  );
+};
+var columnHelper = createColumnHelper();
+var useColumns = () => {
+  const base = useProductTableColumns();
+  const columns = useMemo(
+    () => [
+      ...base,
+      columnHelper.display({
+        id: "actions",
+        header: () => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex h-full w-full items-center",
+            "data-testid": "products-table-header-actions",
+            children: /* @__PURE__ */ jsx("span", { "data-testid": "products-table-header-actions-text" })
+          }
+        ),
+        cell: ({ row }) => {
+          return /* @__PURE__ */ jsx(ProductActions, { product: row.original });
+        }
+      })
+    ],
+    [base]
+  );
+  return columns;
+};
+
+// src/pages/products/product-list/product-list.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ProductList = () => {
+  return /* @__PURE__ */ jsx2("div", { "data-testid": "products-page", children: /* @__PURE__ */ jsx2(SingleColumnPage, { children: /* @__PURE__ */ jsx2(ProductListTable, {}) }) });
+};
+export {
+  ProductList as Component,
+  productsLoader as productLoader
+};