@instockng/storefront-ui 1.0.37 → 1.0.39

package/dist/index41.mjs

@@ -1,10 +1,100 @@
 'use client';
-import { useEffect as o } from "react";
-function f(e) {
-  o(() => (e ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
-    document.body.style.overflow = "";
-  }), [e]);
+import { jsx as t, jsxs as n, Fragment as g } from "react/jsx-runtime";
+import "./index21.mjs";
+import { useGetCartRecommendations as j } from "./index33.mjs";
+import "@tanstack/react-query";
+import { useCart as A } from "./index3.mjs";
+import { cn as w, formatCurrency as F } from "./index20.mjs";
+import { Button as H } from "./index14.mjs";
+import { Loader2 as x, Package as R, ShoppingCart as T } from "lucide-react";
+import { useState as r, useEffect as L } from "react";
+function M({
+  limit: v,
+  className: N
+}) {
+  const { cart: l, addItem: b } = A(), { data: i, isLoading: p, error: y } = j(l == null ? void 0 : l.id, v), [S, c] = r(/* @__PURE__ */ new Set()), [P, m] = r(/* @__PURE__ */ new Set()), [C, o] = r(/* @__PURE__ */ new Set()), [h, f] = r(/* @__PURE__ */ new Set());
+  if (L(() => {
+    f(/* @__PURE__ */ new Set()), m(/* @__PURE__ */ new Set()), o(/* @__PURE__ */ new Set());
+  }, [i]), !l)
+    return null;
+  if (p)
+    return /* @__PURE__ */ t("div", { className: "py-6", children: /* @__PURE__ */ t("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ t(x, { className: "h-6 w-6 animate-spin text-accent-500" }) }) });
+  const u = i == null ? void 0 : i.filter(
+    (e) => !h.has(e.id)
+  );
+  if (y || !u || u.length === 0)
+    return null;
+  const I = async (e, a) => {
+    c((s) => new Set(s).add(e.id));
+    try {
+      await b(e.slug, e.name, a.price, a.sku, 1), m((s) => new Set(s).add(e.id)), setTimeout(() => {
+        o((s) => new Set(s).add(e.id));
+      }, 500), setTimeout(() => {
+        f((s) => new Set(s).add(e.id));
+      }, 1e3);
+    } finally {
+      c((s) => {
+        const d = new Set(s);
+        return d.delete(e.id), d;
+      });
+    }
+  };
+  return /* @__PURE__ */ n("div", { className: w("pt-2", N), children: [
+    /* @__PURE__ */ t("div", { className: "mb-2 px-4", children: /* @__PURE__ */ t("h3", { className: "text-lg font-semibold text-gray-900", children: "Customers also bought" }) }),
+    /* @__PURE__ */ t("div", { className: "overflow-x-auto", children: /* @__PURE__ */ n("div", { className: "flex gap-4 pb-2 transition-all duration-500", children: [
+      /* @__PURE__ */ t("div", { className: "flex-shrink-0 w-1" }),
+      i == null ? void 0 : i.map((e) => {
+        const a = e.variants[0];
+        if (!a) return null;
+        const s = S.has(e.id), d = P.has(e.id), k = C.has(e.id);
+        return h.has(e.id) ? null : /* @__PURE__ */ n(
+          "div",
+          {
+            className: w(
+              "flex flex-col flex-shrink-0 w-40 bg-white border border-gray-300 rounded-lg overflow-hidden hover:border-gray-400 transition-all duration-500",
+              d && "opacity-0 blur-sm scale-95 pointer-events-none",
+              k && "w-0 mr-[-1rem] overflow-hidden"
+            ),
+            children: [
+              /* @__PURE__ */ t("div", { className: "relative aspect-square bg-gray-100", children: e.thumbnailUrl ? /* @__PURE__ */ t(
+                "img",
+                {
+                  src: e.thumbnailUrl,
+                  alt: e.name,
+                  className: "w-full h-full object-cover"
+                }
+              ) : /* @__PURE__ */ t("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ t(R, { className: "h-12 w-12 text-gray-300" }) }) }),
+              /* @__PURE__ */ n("div", { className: "p-3 flex flex-col flex-1", children: [
+                /* @__PURE__ */ n("div", { className: "flex-1", children: [
+                  /* @__PURE__ */ t("h4", { className: "text-sm font-medium text-gray-900 line-clamp-2 leading-tight", children: e.name }),
+                  /* @__PURE__ */ t("p", { className: "text-sm font-semibold text-accent-600 mt-1", children: F(a.price) })
+                ] }),
+                /* @__PURE__ */ t(
+                  H,
+                  {
+                    size: "sm",
+                    onClick: () => I(e, a),
+                    disabled: s,
+                    className: "w-full bg-accent-500 hover:bg-accent-600 text-white text-xs h-8 mt-2",
+                    children: s ? /* @__PURE__ */ n(g, { children: [
+                      /* @__PURE__ */ t(x, { className: "h-3 w-3 animate-spin" }),
+                      "Adding..."
+                    ] }) : /* @__PURE__ */ n(g, { children: [
+                      /* @__PURE__ */ t(T, { className: "h-3 w-3" }),
+                      "Add"
+                    ] })
+                  }
+                )
+              ] })
+            ]
+          },
+          e.id
+        );
+      }),
+      /* @__PURE__ */ t("div", { className: "flex-shrink-0 w-1" })
+    ] }) })
+  ] });
 }
 export {
-  f as useHideBodyOverflow
+  M as RecommendedProducts
 };