@instockng/storefront-ui 1.0.37 → 1.0.38

package/dist/index33.mjs

@@ -1,99 +1,108 @@
 'use client';
-import { useQueryClient as s, useMutation as i } from "@tanstack/react-query";
-import { useQueryUnwrapped as c } from "./index70.mjs";
-import { queryKeys as r } from "./index30.mjs";
-import { updateCart as a, createCart as l, applyDiscount as y, removeDiscount as m, addCartItem as p, updateCartItem as C, removeCartItem as q, checkoutCart as f, fetchCart as d } from "./index26.mjs";
-function Q(e, t) {
+import { useQueryClient as s, useMutation as r } from "@tanstack/react-query";
+import { useQueryUnwrapped as c } from "./index64.mjs";
+import { queryKeys as i } from "./index30.mjs";
+import { updateCart as a, createCart as l, applyDiscount as m, removeDiscount as y, addCartItem as p, updateCartItem as C, removeCartItem as q, checkoutCart as f, fetchCart as d, fetchCartRecommendations as b } from "./index26.mjs";
+function S(e, t) {
   return c({
-    queryKey: r.public.carts.detail(e),
+    queryKey: i.public.carts.detail(e),
     queryFn: () => d(e),
     ...t
   });
 }
-function S(e, t) {
-  const n = s();
-  return i({
-    mutationFn: (u) => a(e, u),
+function h(e, t) {
+  const u = s();
+  return r({
+    mutationFn: (n) => a(e, n),
     onSuccess: () => {
-      n.invalidateQueries({ queryKey: r.public.carts.detail(e) });
+      u.invalidateQueries({ queryKey: i.public.carts.detail(e) });
     },
     ...t
   });
 }
-function D(e) {
-  return i({
+function R(e) {
+  return r({
     mutationFn: (t) => l(t),
     ...e
   });
 }
-function h(e, t) {
-  const n = s();
-  return i({
-    mutationFn: (u) => y(e, u.code),
+function D(e, t) {
+  const u = s();
+  return r({
+    mutationFn: (n) => m(e, n.code),
     onSuccess: () => {
-      n.invalidateQueries({ queryKey: r.public.carts.detail(e) });
+      u.invalidateQueries({ queryKey: i.public.carts.detail(e) });
     },
     ...t
   });
 }
 function k(e, t) {
-  const n = s();
-  return i({
-    mutationFn: () => m(e),
+  const u = s();
+  return r({
+    mutationFn: () => y(e),
     onSuccess: () => {
-      n.invalidateQueries({ queryKey: r.public.carts.detail(e) });
+      u.invalidateQueries({ queryKey: i.public.carts.detail(e) });
     },
     ...t
   });
 }
 function U(e, t) {
-  const n = s();
-  return i({
-    mutationFn: (u) => p(e, u.sku, u.quantity, u.fbc, u.fbp, u.ttp, u.ttclid),
-    onSuccess: () => {
-      n.invalidateQueries({ queryKey: r.public.carts.detail(e) });
+  const u = s();
+  return r({
+    mutationFn: (n) => p(e, n.sku, n.quantity, n.fbc, n.fbp, n.ttp, n.ttclid),
+    onSuccess: (n, o) => {
+      u.invalidateQueries({ queryKey: i.public.carts.detail(e) }), o.refreshRecommendations && u.invalidateQueries({ queryKey: i.public.carts.recommendations(e) });
     },
     ...t
   });
 }
 function A(e, t) {
-  const n = s();
-  return i({
-    mutationFn: ({ itemId: u, quantity: o }) => C(e, u, o),
+  const u = s();
+  return r({
+    mutationFn: ({ itemId: n, quantity: o }) => C(e, n, o),
     onSuccess: () => {
-      n.invalidateQueries({ queryKey: r.public.carts.detail(e) });
+      u.invalidateQueries({ queryKey: i.public.carts.detail(e) });
     },
     ...t
   });
 }
-function R(e, t) {
-  const n = s();
-  return i({
-    mutationFn: (u) => q(e, u),
+function G(e, t) {
+  const u = s();
+  return r({
+    mutationFn: (n) => q(e, n),
     onSuccess: () => {
-      n.invalidateQueries({ queryKey: r.public.carts.detail(e) });
+      u.invalidateQueries({ queryKey: i.public.carts.detail(e) }), u.invalidateQueries({ queryKey: i.public.carts.recommendations(e) });
     },
     ...t
   });
 }
 function w(e, t) {
-  const n = s();
-  return i({
-    mutationFn: (u) => f(e, u),
+  const u = s();
+  return r({
+    mutationFn: (n) => f(e, n),
     onSuccess: () => {
-      n.invalidateQueries({ queryKey: r.public.carts.detail(e) });
+      u.invalidateQueries({ queryKey: i.public.carts.detail(e) });
     },
     ...t
   });
 }
+function x(e, t, u) {
+  return c({
+    queryKey: e ? i.public.carts.recommendations(e, t) : ["public", "carts", "recommendations"],
+    queryFn: () => b(e, t),
+    enabled: !!e,
+    ...u
+  });
+}
 export {
   U as useAddCartItem,
-  h as useApplyDiscount,
+  D as useApplyDiscount,
   w as useCheckoutCart,
-  D as useCreateCart,
-  Q as useGetCart,
-  R as useRemoveCartItem,
+  R as useCreateCart,
+  S as useGetCart,
+  x as useGetCartRecommendations,
+  G as useRemoveCartItem,
   k as useRemoveDiscount,
-  S as useUpdateCart,
+  h as useUpdateCart,
   A as useUpdateCartItem
 };

package/dist/index34.mjs

@@ -1,6 +1,6 @@
 'use client';
 import { useMutation as t } from "@tanstack/react-query";
-import { useQueryUnwrapped as u } from "./index70.mjs";
+import { useQueryUnwrapped as u } from "./index64.mjs";
 import { queryKeys as n } from "./index30.mjs";
 import { confirmOrder as i, fetchOrder as m } from "./index27.mjs";
 function y(e, r, o) {

package/dist/index35.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { useQueryUnwrapped as u } from "./index70.mjs";
+import { useQueryUnwrapped as u } from "./index64.mjs";
 import { queryKeys as t } from "./index30.mjs";
 import { fetchProductsByBrand as o, fetchProductBySlug as c } from "./index25.mjs";
 function n(r, e) {

package/dist/index36.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { useQueryUnwrapped as o } from "./index70.mjs";
+import { useQueryUnwrapped as o } from "./index64.mjs";
 import { queryKeys as i } from "./index30.mjs";
 import { fetchDeliveryZones as t } from "./index28.mjs";
 function p(e, r) {

package/dist/index37.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { useQueryUnwrapped as t } from "./index70.mjs";
+import { useQueryUnwrapped as t } from "./index64.mjs";
 import { queryKeys as u } from "./index30.mjs";
 import { fetchBrandBySlug as n } from "./index29.mjs";
 function i(r, e) {

package/dist/index38.mjs

@@ -1,6 +1,6 @@
 'use client';
-import { getDefaultExportFromCjs as x } from "./index63.mjs";
-import { __module as q } from "./index64.mjs";
+import { getDefaultExportFromCjs as x } from "./index65.mjs";
+import { __module as q } from "./index66.mjs";
 function S(b, p) {
   for (var s = 0; s < p.length; s++) {
     const c = p[s];

package/dist/index40.mjs

@@ -1,6 +1,6 @@
 'use client';
-import { getDefaultExportFromCjs as n } from "./index63.mjs";
-import { __require as i } from "./index65.mjs";
+import { getDefaultExportFromCjs as n } from "./index65.mjs";
+import { __require as i } from "./index67.mjs";
 function s(t, a) {
   for (var o = 0; o < a.length; o++) {
     const e = a[o];

package/dist/index41.mjs

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