@mercurjs/vendor 2.0.0-canary.0

package/dist/stock-ENMBCZRY.js

@@ -0,0 +1,502 @@
+import {
+  DataGridTogglableNumberCell
+} from "./chunk-RNC4NFVK.js";
+import {
+  ProgressBar
+} from "./chunk-QSGR43JM.js";
+import {
+  DataGrid,
+  DataGridReadonlyCell,
+  DataGridSkeleton,
+  createDataGridHelper,
+  useDataGridDuplicateCell
+} from "./chunk-ZZ7VKT2S.js";
+import "./chunk-IQPN4PZJ.js";
+import {
+  castNumber
+} from "./chunk-SMQT3ZNO.js";
+import "./chunk-TKGWSUEI.js";
+import {
+  KeyboundForm
+} from "./chunk-U2ZFCAPX.js";
+import {
+  RouteFocusModal,
+  useRouteModal
+} from "./chunk-3CK6OINO.js";
+import "./chunk-3QSRE5LS.js";
+import {
+  Thumbnail
+} from "./chunk-WIYFXWRI.js";
+import "./chunk-LAVHRER2.js";
+import "./chunk-Y7QKP6QU.js";
+import {
+  Skeleton
+} from "./chunk-INNFZYX2.js";
+import "./chunk-OSFOX7MG.js";
+import "./chunk-W4KHJ4D6.js";
+import "./chunk-VGJTARSA.js";
+import "./chunk-DYUTYBAQ.js";
+import "./chunk-Y4VBOHAP.js";
+import "./chunk-JKXAL7WR.js";
+import "./chunk-DC2K6CFQ.js";
+import "./chunk-VDWGP2U6.js";
+import "./chunk-RE7YXVFG.js";
+import "./chunk-HUNGNEPY.js";
+import "./chunk-PADOWAXM.js";
+import "./chunk-LWVBKUUL.js";
+import "./chunk-RIILGKYR.js";
+import "./chunk-6EYGH3TB.js";
+import "./chunk-GTUR4HSV.js";
+import {
+  useStockLocations
+} from "./chunk-SI4ALL7W.js";
+import "./chunk-ZFFA36DB.js";
+import "./chunk-VHMGJUYN.js";
+import "./chunk-ASVMGV2B.js";
+import {
+  useBatchInventoryItemsLocationLevels,
+  useProduct
+} from "./chunk-WPFTRRWV.js";
+import "./chunk-A5DJIOHN.js";
+import "./chunk-RHKRREUU.js";
+import "./chunk-ZA2KFUFR.js";
+import "./chunk-Y224F4UU.js";
+import "./chunk-PKBMQBKP.js";
+
+// src/pages/products/[id]/stock/index.tsx
+import { AnimatePresence } from "motion/react";
+import { Suspense, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { useTranslation as useTranslation3 } from "react-i18next";
+import { Await, useParams } from "react-router-dom";
+
+// src/pages/products/[id]/stock/product-stock-form/product-stock-form.tsx
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button, toast, usePrompt } from "@medusajs/ui";
+import { useEffect, useMemo as useMemo2, useRef, useState } from "react";
+import { useForm } from "react-hook-form";
+import { useTranslation as useTranslation2 } from "react-i18next";
+
+// src/pages/products/[id]/stock/use-product-stock-columns.tsx
+import { InformationCircle } from "@medusajs/icons";
+import { Switch, Tooltip } from "@medusajs/ui";
+import { useCallback, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+
+// src/components/data-grid/components/data-grid-duplicate-cell.tsx
+import { jsx } from "react/jsx-runtime";
+var DataGridDuplicateCell = ({
+  duplicateOf,
+  children
+}) => {
+  const { watchedValue } = useDataGridDuplicateCell({ duplicateOf });
+  return /* @__PURE__ */ jsx("div", { className: "bg-ui-bg-base txt-compact-small text-ui-fg-subtle flex size-full cursor-not-allowed items-center justify-between overflow-hidden px-4 py-2.5 outline-none", children: typeof children === "function" ? children({ value: watchedValue }) : children });
+};
+
+// src/pages/products/[id]/stock/utils.ts
+function isProductVariant(item) {
+  return "product" in item || "product_id" in item;
+}
+function isProductVariantWithInventoryPivot(row) {
+  return isProductVariant(row) && Array.isArray(row.inventory_items);
+}
+function getDisabledInventoryRows(variants) {
+  const disabled = {};
+  const inventoryItemToVariant = {};
+  for (const variant of variants) {
+    if (!variant.inventory_items) continue;
+    for (const item of variant.inventory_items) {
+      const existingMapping = inventoryItemToVariant[item.inventory_item_id];
+      if (existingMapping && existingMapping.variantId !== variant.id) {
+        disabled[item.inventory_item_id] = {
+          id: existingMapping.variantId,
+          title: existingMapping.title,
+          sku: existingMapping.sku
+        };
+      } else if (!existingMapping) {
+        inventoryItemToVariant[item.inventory_item_id] = {
+          variantId: variant.id,
+          title: variant.title || "",
+          sku: variant.sku || ""
+        };
+      }
+    }
+  }
+  return disabled;
+}
+
+// src/pages/products/[id]/stock/use-product-stock-columns.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var helper = createDataGridHelper();
+var useProductStockColumns = (locations = [], disabled = {}) => {
+  const { t } = useTranslation();
+  const getIsDisabled = useCallback(
+    (item) => {
+      const disabledItem = disabled[item.inventory_item_id];
+      const isDisabled = !!disabledItem && disabledItem.id !== item.variant_id;
+      if (!isDisabled) {
+        return {
+          isDisabled: false,
+          item: void 0
+        };
+      }
+      return {
+        isDisabled,
+        item: disabledItem
+      };
+    },
+    [disabled]
+  );
+  return useMemo(
+    () => [
+      helper.column({
+        id: "title",
+        name: "Title",
+        header: "Title",
+        cell: (context) => {
+          const item = context.row.original;
+          if (isProductVariant(item)) {
+            return /* @__PURE__ */ jsx2(DataGridReadonlyCell, { context, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+              /* @__PURE__ */ jsx2(Thumbnail, { size: "small", src: item.product?.thumbnail }),
+              /* @__PURE__ */ jsx2("span", { children: item.title || "-" })
+            ] }) });
+          }
+          const { isDisabled, item: disabledItem } = getIsDisabled(item);
+          if (isDisabled) {
+            return /* @__PURE__ */ jsx2(DataGridReadonlyCell, { context, color: "normal", children: /* @__PURE__ */ jsxs("div", { className: "flex size-full items-center justify-between gap-x-2", children: [
+              /* @__PURE__ */ jsx2(
+                "span",
+                {
+                  title: item.inventory?.title || void 0,
+                  className: "text-ui-fg-disabled",
+                  children: item.inventory?.title || "-"
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                Tooltip,
+                {
+                  content: disabledItem.sku ? t("products.stock.tooltips.alreadyManagedWithSku", {
+                    title: disabledItem.title,
+                    sku: disabledItem.sku
+                  }) : t("products.stock.tooltips.alreadyManaged", {
+                    title: disabledItem.title
+                  }),
+                  children: /* @__PURE__ */ jsx2(InformationCircle, {})
+                }
+              )
+            ] }) });
+          }
+          return /* @__PURE__ */ jsx2(DataGridReadonlyCell, { context, color: "normal", children: item.inventory?.title || "-" });
+        },
+        disableHiding: true
+      }),
+      helper.column({
+        id: "sku",
+        name: "SKU",
+        header: "SKU",
+        cell: (context) => {
+          const item = context.row.original;
+          if (isProductVariant(item)) {
+            return /* @__PURE__ */ jsx2(DataGridReadonlyCell, { context, children: item.sku || "-" });
+          }
+          const { isDisabled } = getIsDisabled(item);
+          if (isDisabled) {
+            return /* @__PURE__ */ jsx2(DataGridReadonlyCell, { context, color: "normal", children: /* @__PURE__ */ jsx2("span", { className: "text-ui-fg-disabled", children: item.inventory?.sku || "-" }) });
+          }
+          return /* @__PURE__ */ jsx2(DataGridReadonlyCell, { context, color: "normal", children: item.inventory?.sku || "-" });
+        },
+        disableHiding: true
+      }),
+      ...locations.map(
+        (location) => helper.column({
+          id: `location_${location.id}`,
+          name: location.name,
+          header: location.name,
+          field: (context) => {
+            const item = context.row.original;
+            if (isProductVariant(item)) {
+              return null;
+            }
+            const { isDisabled } = getIsDisabled(item);
+            if (isDisabled) {
+              return null;
+            }
+            return `variants.${item.variant_id}.inventory_items.${item.inventory_item_id}.locations.${location.id}`;
+          },
+          type: "togglable-number",
+          cell: (context) => {
+            const item = context.row.original;
+            if (isProductVariant(item)) {
+              return /* @__PURE__ */ jsx2(DataGridReadonlyCell, { context });
+            }
+            const { isDisabled, item: disabledItem } = getIsDisabled(item);
+            if (isDisabled) {
+              return /* @__PURE__ */ jsx2(
+                DataGridDuplicateCell,
+                {
+                  duplicateOf: `variants.${disabledItem.id}.inventory_items.${item.inventory_item_id}.locations.${location.id}`,
+                  children: ({ value }) => {
+                    const { checked, quantity } = value;
+                    return /* @__PURE__ */ jsxs("div", { className: "flex size-full items-center gap-x-2", children: [
+                      /* @__PURE__ */ jsx2(
+                        Switch,
+                        {
+                          dir: "ltr",
+                          className: "shrink-0 cursor-not-allowed rtl:rotate-180",
+                          tabIndex: -1,
+                          size: "small",
+                          checked,
+                          disabled: true
+                        }
+                      ),
+                      /* @__PURE__ */ jsx2("span", { className: "text-ui-fg-disabled flex size-full items-center justify-end", children: quantity })
+                    ] });
+                  }
+                }
+              );
+            }
+            return /* @__PURE__ */ jsx2(
+              DataGridTogglableNumberCell,
+              {
+                context,
+                disabledToggleTooltip: t(
+                  "inventory.stock.disabledToggleTooltip"
+                ),
+                placeholder: t("inventory.stock.placeholder")
+              }
+            );
+          }
+        })
+      )
+    ],
+    [locations, getIsDisabled, t]
+  );
+};
+
+// src/pages/products/[id]/stock/schema.ts
+import { z } from "zod";
+var ProductStockLocationSchema = z.object({
+  id: z.string().optional(),
+  quantity: z.union([z.number(), z.string()]),
+  checked: z.boolean(),
+  disabledToggle: z.boolean().optional()
+});
+var ProductStockInventoryItemSchema = z.object({
+  locations: z.record(ProductStockLocationSchema)
+});
+var ProductStockVariantSchema = z.object({
+  inventory_items: z.record(ProductStockInventoryItemSchema)
+});
+var ProductStockSchema = z.object({
+  variants: z.record(ProductStockVariantSchema)
+});
+
+// src/pages/products/[id]/stock/product-stock-form/product-stock-form.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var ProductStockForm = ({
+  variants,
+  locations,
+  onLoaded
+}) => {
+  const { t } = useTranslation2();
+  const { handleSuccess, setCloseOnEscape } = useRouteModal();
+  const prompt = usePrompt();
+  useEffect(() => {
+    onLoaded();
+  }, [onLoaded]);
+  const [isPromptOpen, setIsPromptOpen] = useState(false);
+  const form = useForm({
+    defaultValues: getDefaultValue(variants, locations),
+    resolver: zodResolver(ProductStockSchema)
+  });
+  const initialValues = useRef(getDefaultValue(variants, locations));
+  const disabled = useMemo2(() => getDisabledInventoryRows(variants), [variants]);
+  const columns = useProductStockColumns(locations, disabled);
+  const { mutateAsync, isPending } = useBatchInventoryItemsLocationLevels();
+  const onSubmit = form.handleSubmit(async (data) => {
+    const payload = {
+      create: [],
+      update: [],
+      delete: [],
+      force: true
+    };
+    for (const [variantId, variant] of Object.entries(data.variants)) {
+      for (const [inventory_item_id, item] of Object.entries(
+        variant.inventory_items
+      )) {
+        for (const [location_id, level] of Object.entries(item.locations)) {
+          if (level.id) {
+            const wasChecked = initialValues.current?.variants?.[variantId]?.inventory_items?.[inventory_item_id]?.locations?.[location_id]?.checked;
+            if (wasChecked && !level.checked) {
+              payload.delete.push(level.id);
+            } else {
+              const newQuantity = level.quantity !== "" ? castNumber(level.quantity) : 0;
+              const originalQuantity = initialValues.current?.variants?.[variantId]?.inventory_items?.[inventory_item_id]?.locations?.[location_id]?.quantity;
+              if (newQuantity !== originalQuantity) {
+                payload.update.push({
+                  inventory_item_id,
+                  location_id,
+                  stocked_quantity: newQuantity
+                });
+              }
+            }
+          }
+          if (!level.id && level.quantity !== "") {
+            payload.create.push({
+              inventory_item_id,
+              location_id,
+              stocked_quantity: castNumber(level.quantity)
+            });
+          }
+        }
+      }
+    }
+    if (payload.delete.length > 0) {
+      setIsPromptOpen(true);
+      const confirm = await prompt({
+        title: t("general.areYouSure"),
+        description: t("inventory.stock.disablePrompt", {
+          count: payload.delete.length
+        }),
+        confirmText: t("actions.continue"),
+        cancelText: t("actions.cancel"),
+        variant: "confirmation"
+      });
+      setIsPromptOpen(false);
+      if (!confirm) {
+        return;
+      }
+    }
+    await mutateAsync(payload, {
+      onSuccess: () => {
+        toast.success(t("inventory.stock.successToast"));
+        handleSuccess();
+      },
+      onError: (error) => {
+        toast.error(error.message);
+      }
+    });
+  });
+  return /* @__PURE__ */ jsx3(RouteFocusModal.Form, { form, children: /* @__PURE__ */ jsxs2(KeyboundForm, { onSubmit, className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsx3(RouteFocusModal.Header, {}),
+    /* @__PURE__ */ jsx3(RouteFocusModal.Body, { className: "flex-1", children: /* @__PURE__ */ jsx3(
+      DataGrid,
+      {
+        state: form,
+        columns,
+        data: variants,
+        getSubRows,
+        onEditingChange: (editing) => setCloseOnEscape(!editing),
+        disableInteractions: isPending || isPromptOpen,
+        multiColumnSelection: true
+      }
+    ) }),
+    /* @__PURE__ */ jsx3(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-end gap-2", children: [
+      /* @__PURE__ */ jsx3(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx3(Button, { variant: "secondary", size: "small", type: "button", children: t("actions.cancel") }) }),
+      /* @__PURE__ */ jsx3(Button, { type: "submit", size: "small", isLoading: isPending, children: t("actions.save") })
+    ] }) })
+  ] }) });
+};
+function getSubRows(row) {
+  if (isProductVariantWithInventoryPivot(row)) {
+    return row.inventory_items;
+  }
+}
+function getDefaultValue(variants, locations) {
+  return {
+    variants: variants?.reduce(
+      (variantAcc, variant) => {
+        const inventoryItems = variant.inventory_items?.reduce(
+          (itemAcc, item) => {
+            const locationsMap = locations.reduce((locationAcc, location) => {
+              const level = item.inventory?.location_levels?.find(
+                (level2) => level2.location_id === location.id
+              );
+              locationAcc[location.id] = {
+                id: level?.id,
+                quantity: level?.stocked_quantity !== void 0 ? level?.stocked_quantity : "",
+                checked: !!level,
+                disabledToggle: (level?.incoming_quantity || 0) > 0 || (level?.reserved_quantity || 0) > 0
+              };
+              return locationAcc;
+            }, {});
+            itemAcc[item.inventory_item_id] = { locations: locationsMap };
+            return itemAcc;
+          },
+          {}
+        );
+        variantAcc[variant.id] = { inventory_items: inventoryItems || {} };
+        return variantAcc;
+      },
+      {}
+    )
+  };
+}
+
+// src/pages/products/[id]/stock/index.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var Component = () => {
+  const { t } = useTranslation3();
+  const { id } = useParams();
+  const { product, isLoading: isProductLoading } = useProduct(id);
+  const { stock_locations, isLoading: isStockLoading } = useStockLocations();
+  const allVariants = product?.variants?.map((variant) => ({
+    ...variant,
+    inventory_items: variant.inventory_items?.map((item) => ({
+      ...item,
+      inventory: item.inventory
+    }))
+  }));
+  const [isLoading, setIsLoading] = useState2(false);
+  const timeoutRef = useRef2();
+  useEffect2(() => {
+    timeoutRef.current = setTimeout(() => {
+      setIsLoading(true);
+    }, 200);
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  const onLoaded = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    setIsLoading(false);
+  };
+  return /* @__PURE__ */ jsxs3("div", { children: [
+    /* @__PURE__ */ jsx4("div", { className: "fixed inset-x-0 top-0 z-50 h-1", children: /* @__PURE__ */ jsx4(AnimatePresence, { children: isLoading || isProductLoading || isStockLoading ? /* @__PURE__ */ jsx4(ProgressBar, { duration: 5 }) : null }) }),
+    /* @__PURE__ */ jsxs3(RouteFocusModal, { children: [
+      /* @__PURE__ */ jsx4(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx4("span", { className: "sr-only", children: t("products.stock.heading") }) }),
+      /* @__PURE__ */ jsx4(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx4("span", { className: "sr-only", children: t("products.stock.description") }) }),
+      /* @__PURE__ */ jsx4(Suspense, { fallback: /* @__PURE__ */ jsx4(ProductStockFallback, {}), children: /* @__PURE__ */ jsx4(Await, { resolve: { allVariants, locations: stock_locations }, children: () => {
+        return /* @__PURE__ */ jsx4(
+          ProductStockForm,
+          {
+            variants: allVariants || [],
+            locations: stock_locations || [],
+            onLoaded
+          }
+        );
+      } }) })
+    ] })
+  ] });
+};
+var ProductStockFallback = () => {
+  return /* @__PURE__ */ jsx4("div", { className: "relative flex size-full flex-col items-center justify-center divide-y", children: /* @__PURE__ */ jsxs3("div", { className: "flex size-full flex-col divide-y", children: [
+    /* @__PURE__ */ jsx4("div", { className: "px-4 py-2", children: /* @__PURE__ */ jsx4(Skeleton, { className: "h-7 w-7" }) }),
+    /* @__PURE__ */ jsx4("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsx4(
+      DataGridSkeleton,
+      {
+        columns: Array.from({ length: 10 })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs3("div", { className: "bg-ui-bg-base flex items-center justify-end gap-x-2 p-4", children: [
+      /* @__PURE__ */ jsx4(Skeleton, { className: "h-7 w-[59px]" }),
+      /* @__PURE__ */ jsx4(Skeleton, { className: "h-7 w-[46px]" })
+    ] })
+  ] }) });
+};
+export {
+  Component
+};