@instockng/storefront-ui 1.0.107 → 1.0.109

package/dist/index12.mjs

@@ -1,134 +1,199 @@
 'use client';
-import { jsx as i, jsxs as s, Fragment as f } from "react/jsx-runtime";
+import { jsxs as a, jsx as t, Fragment as C } from "react/jsx-runtime";
+import { useState as f, useRef as V } from "react";
+import { ChevronLeft as U, ChevronRight as z } from "lucide-react";
+import { Switch as G } from "./index51.mjs";
+import { Badge as T } from "./index26.mjs";
+import { cn as P, formatCurrency as k } from "./index30.mjs";
+import { VariantPickerModal as _ } from "./index14.mjs";
 import "./index31.mjs";
-import { useGetCartRecommendations as U } from "./index43.mjs";
 import "@tanstack/react-query";
+import { useGetProductAddOns as $ } from "./index45.mjs";
 import { useCart as q } from "./index3.mjs";
-import { cn as p, formatCurrency as z } from "./index30.mjs";
-import { Button as B } from "./index24.mjs";
-import { Loader2 as b, Package as D, ShoppingCart as E } from "lucide-react";
-import { useState as r, useEffect as G } from "react";
-import { VariantPickerModal as H } from "./index13.mjs";
-function _({
-  limit: P,
-  className: C
+function le({
+  slug: g,
+  products: x,
+  onToggle: u,
+  selectedProductIds: A,
+  onProductClick: H,
+  className: p,
+  title: j = "Popular add-ons",
+  limit: D = 6
 }) {
-  const { cart: o, addItem: k } = q(), { data: c, isLoading: I, error: A } = U(o == null ? void 0 : o.id, P), [j, h] = r([]), [F, u] = r([]), [V, g] = r([]), [L, x] = r([]), [v, m] = r(null), [M, w] = r(!1);
-  if (G(() => {
-    x([]), u([]), g([]);
-  }, [c]), !o)
-    return null;
-  if (I)
-    return /* @__PURE__ */ i("div", { className: "py-6", children: /* @__PURE__ */ i("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ i(b, { className: "h-6 w-6 animate-spin text-accent-500" }) }) });
-  const a = c == null ? void 0 : c.filter(
-    (e) => !L.includes(e.id)
-  );
-  if (A || !a || a.length === 0)
-    return null;
-  const N = async (e, t) => {
-    h((n) => [...n, e.id]);
-    try {
-      await k(e.slug, e.name, t.price, t.sku, 1), u((n) => [...n, e.id]), setTimeout(() => {
-        g((n) => [...n, e.id]);
-      }, 500), setTimeout(() => {
-        x((n) => [...n, e.id]);
-      }, 1e3);
-    } finally {
-      h((n) => n.filter((l) => l !== e.id));
+  const { cart: s, addItem: v, removeItem: I } = q(), { data: M, isLoading: N } = $(g || "", D, {
+    enabled: !!g && !x
+  }), c = x || M || [], W = A || c.filter((e) => s == null ? void 0 : s.items.some(
+    (n) => e.variants.some((r) => r.id === n.variant.id)
+  )).map((e) => e.id), [y, m] = f(null), [B, b] = f(!1), F = async (e, n) => {
+    if (u) {
+      u(e, n);
+      return;
     }
-  }, T = (e) => {
-    if (e.variants.length > 1) {
+    if (n && e.variants.length > 1) {
       m(e);
       return;
     }
-    const t = e.variants[0];
-    t && N(e, t);
-  }, S = async (e, t) => {
-    w(!0);
+    const r = e.variants[0];
+    if (r)
+      if (n)
+        await v(
+          e.slug,
+          e.name,
+          r.price,
+          r.sku,
+          1
+        );
+      else {
+        const l = s == null ? void 0 : s.items.find(
+          (i) => e.variants.some((d) => d.id === i.variant.id)
+        );
+        l && await I(l.id);
+      }
+  }, S = async (e, n) => {
+    b(!0);
     try {
-      const n = a.find((d) => d.id === e.id), l = n == null ? void 0 : n.variants.find((d) => d.id === t.id);
-      n && l && await N(n, l), m(null);
+      await v(
+        e.slug,
+        e.name,
+        n.price,
+        n.sku,
+        1
+      ), m(null);
     } finally {
-      w(!1);
+      b(!1);
+    }
+  }, o = V(null), [L, O] = f(0), E = () => {
+    if (o.current) {
+      const { scrollLeft: e, scrollWidth: n, clientWidth: r } = o.current, l = e / (n - r);
+      O(l || 0);
+    }
+  }, w = (e) => {
+    if (o.current) {
+      const { clientWidth: n } = o.current, r = n * 0.9;
+      o.current.scrollBy({
+        left: e === "left" ? -r : r,
+        behavior: "smooth"
+      });
     }
   };
-  return /* @__PURE__ */ s(f, { children: [
-    /* @__PURE__ */ s("div", { className: p("pt-2", C), children: [
-      /* @__PURE__ */ i("div", { className: "mb-2 px-4", children: /* @__PURE__ */ i("h3", { className: "text-lg font-semibold text-gray-900", children: "Frequently bought together" }) }),
-      /* @__PURE__ */ i("div", { className: "overflow-x-auto", children: /* @__PURE__ */ s("div", { className: "flex gap-4 pb-2 transition-all duration-500", children: [
-        /* @__PURE__ */ i("div", { className: "flex-shrink-0 w-1" }),
-        a == null ? void 0 : a.map((e) => {
-          const t = e.variants[0];
-          if (!t) return null;
-          const n = j.includes(e.id), l = F.includes(e.id), d = V.includes(e.id);
-          return /* @__PURE__ */ i(
+  return (!c || c.length === 0) && !N ? null : N ? /* @__PURE__ */ a("div", { className: P("w-full py-8 space-y-4 animate-pulse", p), style: { maxWidth: "calc(100vw - calc(var(--spacing) * 7))" }, children: [
+    /* @__PURE__ */ t("div", { className: "h-4 w-32 bg-gray-200 rounded px-1 mb-6" }),
+    /* @__PURE__ */ a("div", { className: "flex gap-4 overflow-x-hidden", children: [
+      /* @__PURE__ */ t("div", { className: "min-w-[90%] h-[90px] bg-gray-100 rounded-[2rem]" }),
+      /* @__PURE__ */ t("div", { className: "min-w-[90%] h-[90px] bg-gray-100 rounded-[2rem]" })
+    ] })
+  ] }) : /* @__PURE__ */ a(C, { children: [
+    /* @__PURE__ */ a("div", { className: p, children: [
+      /* @__PURE__ */ t("div", { className: "px-1 mb-3", children: /* @__PURE__ */ t("h3", { className: "text-lg font-bold tracking-tight text-gray-900", children: j }) }),
+      /* @__PURE__ */ t("div", { className: "relative", children: /* @__PURE__ */ t(
+        "div",
+        {
+          ref: o,
+          onScroll: E,
+          className: "flex gap-4 overflow-x-auto scrollbar-hide snap-x snap-mandatory px-1",
+          style: { scrollbarWidth: "none", msOverflowStyle: "none", maxWidth: "calc(100vw - calc(var(--spacing) * 7))" },
+          children: c.map((e) => {
+            const n = W.includes(e.id), r = e.variants[0], l = (r == null ? void 0 : r.price) || 0, i = e.compareAtPrice || r.compareAtPrice, d = i && i > l, R = d ? Math.round((i - l) / i * 100) : 0;
+            return /* @__PURE__ */ a(
+              "div",
+              {
+                className: "relative flex min-w-[90%] md:min-w-[420px] snap-start items-center gap-4 rounded-xl bg-[#EBEBEB] p-3 transition-all",
+                children: [
+                  /* @__PURE__ */ a(
+                    "a",
+                    {
+                      href: `/product/${e.slug}`,
+                      className: "flex flex-1 items-center gap-4 min-w-0",
+                      children: [
+                        /* @__PURE__ */ t("div", { className: "h-16 w-16 flex-shrink-0 overflow-hidden rounded-xl bg-white/40 flex items-center justify-center", children: e.thumbnailUrl ? /* @__PURE__ */ t(
+                          "img",
+                          {
+                            src: e.thumbnailUrl,
+                            alt: e.name,
+                            className: "h-full w-full object-cover",
+                            loading: "lazy"
+                          }
+                        ) : /* @__PURE__ */ t("div", { className: "flex h-full w-full items-center justify-center text-[10px] text-gray-400", children: "No Img" }) }),
+                        /* @__PURE__ */ a("div", { className: "flex flex-1 flex-col justify-center min-w-0", children: [
+                          /* @__PURE__ */ t("h4", { className: "text-md font-bold text-[#333] truncate pr-2", title: e.name, children: e.name }),
+                          e.addonDescription && /* @__PURE__ */ t("p", { className: "text-[11px] text-gray-500 line-clamp-3 italic mb-1", children: e.addonDescription }),
+                          /* @__PURE__ */ a("div", { className: "flex items-center gap-2 mt-1", children: [
+                            /* @__PURE__ */ t("span", { className: "text-md font-bold text-[#333]", children: k(l) }),
+                            d && /* @__PURE__ */ a(C, { children: [
+                              /* @__PURE__ */ t("span", { className: "text-sm text-[#DC143C] line-through", children: k(i) }),
+                              /* @__PURE__ */ a(T, { className: "bg-[#DC143C]/10 hover:bg-[#DC143C]/20 text-[#DC143C] border-none text-[10px] font-bold px-2 py-0.5 rounded-lg uppercase tracking-tight", children: [
+                                R,
+                                "% OFF"
+                              ] })
+                            ] })
+                          ] })
+                        ] })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ t("div", { className: "pl-2", onClick: (h) => h.stopPropagation(), children: /* @__PURE__ */ t(
+                    G,
+                    {
+                      checked: n,
+                      onCheckedChange: (h) => F(e, h),
+                      className: "scale-125"
+                    }
+                  ) })
+                ]
+              },
+              e.id
+            );
+          })
+        }
+      ) }),
+      /* @__PURE__ */ a("div", { className: "flex items-center justify-between px-2 mt-2", children: [
+        /* @__PURE__ */ t("div", { className: "flex gap-1.5 focus:outline-none", children: Array.from({ length: Math.min(c.length, 6) }).map((e, n) => {
+          const r = Math.round(L * (Math.min(c.length, 6) - 1)) === n;
+          return /* @__PURE__ */ t(
             "div",
             {
-              className: p(
-                "flex flex-row flex-shrink-0 w-64 h-24 bg-white border border-gray-300 rounded-lg overflow-hidden transition-all duration-500",
-                l && "opacity-0 blur-sm scale-95 pointer-events-none",
-                d && "w-0 h-0 mr-[-1rem] overflow-hidden"
-              ),
-              children: /* @__PURE__ */ s(
-                "a",
-                {
-                  href: `/product/${e.slug}`,
-                  className: "flex flex-row flex-1 hover:bg-gray-50 transition-colors",
-                  children: [
-                    /* @__PURE__ */ i("div", { className: "relative w-20 h-full flex-shrink-0 bg-gray-100", children: e.thumbnailUrl ? /* @__PURE__ */ i(
-                      "img",
-                      {
-                        src: e.thumbnailUrl,
-                        alt: e.name,
-                        className: "w-full h-full object-cover"
-                      }
-                    ) : /* @__PURE__ */ i("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ i(D, { className: "h-8 w-8 text-gray-300" }) }) }),
-                    /* @__PURE__ */ s("div", { className: "p-2 flex flex-col flex-1 justify-between", children: [
-                      /* @__PURE__ */ s("div", { children: [
-                        /* @__PURE__ */ i("h4", { className: "text-xs font-medium text-gray-900 line-clamp-2 leading-tight", children: e.name }),
-                        /* @__PURE__ */ i("p", { className: "text-xs font-semibold text-accent-600 mt-0.5", children: z(t.price) })
-                      ] }),
-                      /* @__PURE__ */ i(
-                        B,
-                        {
-                          size: "sm",
-                          onClick: (y) => {
-                            y.preventDefault(), y.stopPropagation(), T(e);
-                          },
-                          disabled: n,
-                          className: "w-full bg-accent-500 hover:bg-accent-600 text-white text-xs h-6 mt-1",
-                          children: n ? /* @__PURE__ */ s(f, { children: [
-                            /* @__PURE__ */ i(b, { className: "h-3 w-3 animate-spin" }),
-                            "Adding..."
-                          ] }) : /* @__PURE__ */ s(f, { children: [
-                            /* @__PURE__ */ i(E, { className: "h-3 w-3" }),
-                            "Add"
-                          ] })
-                        }
-                      )
-                    ] })
-                  ]
-                }
+              className: P(
+                "h-2 w-2 rounded-full transition-all duration-300",
+                r ? "bg-gray-600 scale-110" : "bg-gray-300"
               )
             },
-            e.id
+            n
           );
-        }),
-        /* @__PURE__ */ i("div", { className: "flex-shrink-0 w-1" })
-      ] }) })
+        }) }),
+        /* @__PURE__ */ a("div", { className: "flex gap-4", children: [
+          /* @__PURE__ */ t(
+            "button",
+            {
+              onClick: () => w("left"),
+              className: "text-gray-400 hover:text-gray-900 transition-colors",
+              "aria-label": "Previous",
+              children: /* @__PURE__ */ t(U, { className: "h-6 w-6 stroke-[2.5px]" })
+            }
+          ),
+          /* @__PURE__ */ t(
+            "button",
+            {
+              onClick: () => w("right"),
+              className: "text-gray-400 hover:text-gray-900 transition-colors",
+              "aria-label": "Next",
+              children: /* @__PURE__ */ t(z, { className: "h-6 w-6 stroke-[2.5px]" })
+            }
+          )
+        ] })
+      ] })
     ] }),
-    /* @__PURE__ */ i(
-      H,
+    /* @__PURE__ */ t(
+      _,
       {
-        isOpen: !!v,
+        isOpen: !!y,
         onClose: () => m(null),
-        product: v,
+        product: y,
         onConfirm: S,
-        isLoading: M
+        isLoading: B
       }
     )
   ] });
 }
 export {
-  _ as RecommendedProducts
+  le as ProductAddOns
 };

package/dist/index120.mjs

@@ -1,26 +1,159 @@
 'use client';
-import { __exports as t } from "./index179.mjs";
-var i;
-function s() {
-  return i ? t : (i = 1, function(o) {
-    Object.defineProperty(o, "__esModule", {
+import { __exports as a } from "./index182.mjs";
+var g;
+function j() {
+  return g ? a : (g = 1, function(u) {
+    Object.defineProperty(u, "__esModule", {
       value: !0
-    }), Object.defineProperty(o, "normalizeLocalePath", {
-      enumerable: !0,
-      get: function() {
-        return u;
+    });
+    function m(e, r) {
+      for (var t in r) Object.defineProperty(e, t, {
+        enumerable: !0,
+        get: r[t]
+      });
+    }
+    m(u, {
+      DecodeError: function() {
+        return S;
+      },
+      MiddlewareNotFoundError: function() {
+        return b;
+      },
+      MissingStaticPage: function() {
+        return v;
+      },
+      NormalizeError: function() {
+        return I;
+      },
+      PageNotFoundError: function() {
+        return O;
+      },
+      SP: function() {
+        return d;
+      },
+      ST: function() {
+        return w;
+      },
+      WEB_VITALS: function() {
+        return p;
+      },
+      execOnce: function() {
+        return E;
+      },
+      getDisplayName: function() {
+        return s;
+      },
+      getLocationOrigin: function() {
+        return c;
+      },
+      getURL: function() {
+        return P;
+      },
+      isAbsoluteUrl: function() {
+        return N;
+      },
+      isResSent: function() {
+        return f;
+      },
+      loadGetInitialProps: function() {
+        return l;
+      },
+      normalizeRepeatedSlashes: function() {
+        return y;
+      },
+      stringifyError: function() {
+        return L;
       }
     });
-    function u(r, l) {
-      let a;
-      const e = r.split("/");
-      return (l || []).some((n) => e[1] && e[1].toLowerCase() === n.toLowerCase() ? (a = n, e.splice(1, 1), r = e.join("/") || "/", !0) : !1), {
-        pathname: r,
-        detectedLocale: a
+    const p = [
+      "CLS",
+      "FCP",
+      "FID",
+      "INP",
+      "LCP",
+      "TTFB"
+    ];
+    function E(e) {
+      let r = !1, t;
+      return function() {
+        for (var i = arguments.length, n = new Array(i), o = 0; o < i; o++)
+          n[o] = arguments[o];
+        return r || (r = !0, t = e(...n)), t;
       };
     }
-  }(t), t);
+    const h = /^[a-zA-Z][a-zA-Z\d+\-.]*?:/, N = (e) => h.test(e);
+    function c() {
+      const { protocol: e, hostname: r, port: t } = window.location;
+      return e + "//" + r + (t ? ":" + t : "");
+    }
+    function P() {
+      const { href: e } = window.location, r = c();
+      return e.substring(r.length);
+    }
+    function s(e) {
+      return typeof e == "string" ? e : e.displayName || e.name || "Unknown";
+    }
+    function f(e) {
+      return e.finished || e.headersSent;
+    }
+    function y(e) {
+      const r = e.split("?");
+      return r[0].replace(/\\/g, "/").replace(/\/\/+/g, "/") + (r[1] ? "?" + r.slice(1).join("?") : "");
+    }
+    async function l(e, r) {
+      if (process.env.NODE_ENV !== "production") {
+        var t;
+        if ((t = e.prototype) != null && t.getInitialProps) {
+          const o = '"' + s(e) + '.getInitialProps()" is defined as an instance method - visit https://nextjs.org/docs/messages/get-initial-props-as-an-instance-method for more information.';
+          throw new Error(o);
+        }
+      }
+      const i = r.res || r.ctx && r.ctx.res;
+      if (!e.getInitialProps)
+        return r.ctx && r.Component ? {
+          pageProps: await l(r.Component, r.ctx)
+        } : {};
+      const n = await e.getInitialProps(r);
+      if (i && f(i))
+        return n;
+      if (!n) {
+        const o = '"' + s(e) + '.getInitialProps()" should resolve to an object. But found "' + n + '" instead.';
+        throw new Error(o);
+      }
+      return process.env.NODE_ENV !== "production" && Object.keys(n).length === 0 && !r.ctx && console.warn("" + s(e) + " returned an empty object from `getInitialProps`. This de-optimizes and prevents automatic static optimization. https://nextjs.org/docs/messages/empty-object-getInitialProps"), n;
+    }
+    const d = typeof performance < "u", w = d && [
+      "mark",
+      "measure",
+      "getEntriesByName"
+    ].every((e) => typeof performance[e] == "function");
+    class S extends Error {
+    }
+    class I extends Error {
+    }
+    class O extends Error {
+      constructor(r) {
+        super(), this.code = "ENOENT", this.name = "PageNotFoundError", this.message = "Cannot find module for page: " + r;
+      }
+    }
+    class v extends Error {
+      constructor(r, t) {
+        super(), this.message = "Failed to load static file for page: " + r + " " + t;
+      }
+    }
+    class b extends Error {
+      constructor() {
+        super(), this.code = "ENOENT", this.message = "Cannot find the middleware module";
+      }
+    }
+    function L(e) {
+      return JSON.stringify({
+        message: e.message,
+        stack: e.stack
+      });
+    }
+  }(a), a);
 }
 export {
-  s as __require
+  j as __require
 };

package/dist/index121.mjs

@@ -1,36 +1,23 @@
 'use client';
-import { __exports as u } from "./index180.mjs";
-var f;
-function m() {
-  return f ? u : (f = 1, function(i) {
-    Object.defineProperty(i, "__esModule", {
+import { __exports as t } from "./index183.mjs";
+import { __require as c } from "./index184.mjs";
+var i;
+function p() {
+  return i ? t : (i = 1, function(r) {
+    Object.defineProperty(r, "__esModule", {
       value: !0
-    }), Object.defineProperty(i, "default", {
+    }), Object.defineProperty(r, "isDynamicRoute", {
       enumerable: !0,
       get: function() {
-        return o;
+        return u;
       }
     });
-    function o() {
-      const t = /* @__PURE__ */ Object.create(null);
-      return {
-        on(e, r) {
-          (t[e] || (t[e] = [])).push(r);
-        },
-        off(e, r) {
-          t[e] && t[e].splice(t[e].indexOf(r) >>> 0, 1);
-        },
-        emit(e) {
-          for (var r = arguments.length, a = new Array(r > 1 ? r - 1 : 0), n = 1; n < r; n++)
-            a[n - 1] = arguments[n];
-          (t[e] || []).slice().map((c) => {
-            c(...a);
-          });
-        }
-      };
+    const n = c(), o = /\/\[[^/]+?\](?=\/|$)/;
+    function u(e) {
+      return (0, n.isInterceptionRouteAppPath)(e) && (e = (0, n.extractInterceptionRouteInformation)(e).interceptedRoute), o.test(e);
     }
-  }(u), u);
+  }(t), t);
 }
 export {
-  m as __require
+  p as __require
 };