@instockng/storefront-ui 1.0.107 → 1.0.108

package/dist/index16.mjs

@@ -1,212 +1,166 @@
 'use client';
-import { jsxs as s, Fragment as E, jsx as e } from "react/jsx-runtime";
-import { useState as b, useEffect as F } from "react";
-import "./index31.mjs";
-import { useGetCartRecommendations as V, useGetCartUpsellAddons as W } from "./index43.mjs";
-import "@tanstack/react-query";
-import { useCart as _ } from "./index3.mjs";
-import { CartItem as $ } from "./index14.mjs";
-import { DiscountCodeInput as O } from "./index19.mjs";
-import { Checkout as ee } from "./index20.mjs";
-import { RecommendedProducts as te } from "./index12.mjs";
-import { CartUpsellScreen as se } from "./index17.mjs";
-import { AddOnsDiscountScreen as ae } from "./index18.mjs";
-import { FreeShippingProgress as ie } from "./index52.mjs";
-import { Button as L } from "./index24.mjs";
-import { ArrowLeft as le, X as re, Loader2 as ne, Package as v } from "lucide-react";
-import { cn as p, formatCurrency as u } from "./index30.mjs";
-import { useHideBodyOverflow as de } from "./index53.mjs";
-function Se({
-  isOpen: i,
-  onClose: n,
-  onCheckout: g,
-  onContinueShopping: x,
-  onPurchaseSuccess: y,
-  className: U,
-  showDiscountCode: I = !0,
-  showContinueShopping: z = !0,
-  checkoutButtonText: B = "Complete Purchase",
-  continueShoppingText: R = "Continue Shopping",
-  checkoutButtonClassName: N,
-  continueShoppingButtonClassName: Y,
-  disableCheckout: G = !1,
-  emptyMessage: P = "Your cart is empty"
-}) {
-  var k, C, j, A, S;
-  const { cart: t, isLoading: d, error: o, trackCheckoutInitiated: q } = _(), { data: m } = V(t == null ? void 0 : t.id, 100), { data: ce } = W(t == null ? void 0 : t.id), [H, f] = b(!1), [l, c] = b(!1), [a, h] = b(!1);
-  de(i), F(() => {
-    i || (c(!1), h(!1));
-  }, [i]), F(() => {
-    const r = (D) => {
-      D.key === "Escape" && i && n();
-    };
-    return window.addEventListener("keydown", r), () => window.removeEventListener("keydown", r);
-  }, [i, n]);
-  const T = ((k = t == null ? void 0 : t.pricing) == null ? void 0 : k.subtotal) || 0, w = ((C = t == null ? void 0 : t.pricing.discount) == null ? void 0 : C.amount) || 0, X = () => {
-    q(), m && m.length > 0 ? c(!0) : f(!0), g == null || g();
-  }, Z = () => {
-    c(!1), f(!0);
-  }, J = () => {
-    h(!1), f(!0);
-  }, K = () => {
-    c(!1);
-  }, M = () => {
-    m && m.length > 0 ? (h(!1), c(!0)) : h(!1);
-  }, Q = () => {
-    x == null || x(), n();
-  };
-  return /* @__PURE__ */ s(E, { children: [
-    /* @__PURE__ */ e(
-      "div",
-      {
-        className: p(
-          "fixed inset-0 z-40 bg-black/50 transition-opacity duration-300",
-          i ? "opacity-100" : "pointer-events-none opacity-0"
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { useState as w } from "react";
+import { BadgeCheck as C } from "lucide-react";
+import { cn as o, formatCurrency as g, calculateDiscountedPrice as u, getDiscountPercent as f } from "./index30.mjs";
+const S = ({
+  qty: l,
+  selectedVariant: i,
+  quantity: s,
+  onQuantityChange: c,
+  effectivePrice: n,
+  quantityDiscounts: r,
+  showBestValue: d = !1
+}) => {
+  const e = !!i;
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      onClick: () => e && c(l),
+      className: o(
+        "border-2 rounded-xl transition-all flex items-center justify-center p-3",
+        e ? s === l ? "border-green-500 bg-green-50 shadow-md cursor-pointer hover:scale-105" : "border-gray-200 bg-white hover:border-gray-300 cursor-pointer hover:scale-105" : "border-gray-300 bg-gray-100 cursor-not-allowed opacity-50",
+        d && e && "relative"
+      ),
+      children: [
+        d && e && /* @__PURE__ */ t("div", { className: "absolute -top-3 left-1/2 transform -translate-x-1/2", children: /* @__PURE__ */ t("div", { className: "bg-orange-500 text-white text-xs px-3 py-1 rounded-full font-semibold whitespace-nowrap", children: "Best Value" }) }),
+        /* @__PURE__ */ a("div", { className: "text-center", children: [
+          /* @__PURE__ */ a("div", { className: o("text-lg font-bold", e ? "text-gray-900" : "text-gray-500"), children: [
+            "BUY ",
+            l
+          ] }),
+          l > 1 && /* @__PURE__ */ t("div", { className: o(
+            "text-sm font-bold inline-block bg-[#F54927] text-white px-1 rounded-full line-through mb-1",
+            e ? "text-gray-500" : "text-gray-400"
+          ), children: g(n * l) }),
+          /* @__PURE__ */ t("div", { className: o("text-lg md:text-2xl font-bold", e ? "text-green-600" : "text-gray-400"), children: g(u(n, l, r)) }),
+          l > 1 && e ? /* @__PURE__ */ a("div", { className: "bg-orange-500 text-white text-sm px-2 py-1 rounded-md font-semibold mb-2", children: [
+            "Save ",
+            f(l, r),
+            "%"
+          ] }) : e ? null : /* @__PURE__ */ t("div", { className: "text-xs text-red-500 mt-1", children: "Out of Stock" })
+        ] })
+      ]
+    }
+  );
+}, j = ({
+  selectedVariant: l,
+  quantity: i,
+  onQuantityChange: s,
+  effectivePrice: c,
+  quantityDiscounts: n
+}) => {
+  const [r, d] = w(2), e = !!l, b = i === r, p = (h) => {
+    h.stopPropagation();
+    const x = r + 1;
+    d(x), e && s(x);
+  }, y = (h) => {
+    if (h.stopPropagation(), r > 2) {
+      const x = r - 1;
+      d(x), e && s(x);
+    }
+  }, v = () => {
+    e && s(r);
+  }, m = f(r, n), N = u(c, r, n);
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      onClick: v,
+      className: o(
+        "border-2 rounded-xl transition-all flex flex-col items-center justify-center p-3 relative",
+        e ? b ? "border-green-500 bg-green-50 shadow-md cursor-pointer hover:scale-105" : "border-gray-200 bg-white hover:border-gray-300 cursor-pointer hover:scale-105" : "border-gray-300 bg-gray-100 cursor-not-allowed opacity-50"
+      ),
+      children: [
+        /* @__PURE__ */ t(
+          "button",
+          {
+            onClick: y,
+            disabled: !e || r <= 2,
+            className: o(
+              "absolute left-2 top-1/2 -translate-y-1/2 w-8 h-8 rounded-full flex items-center justify-center text-lg font-bold transition-colors",
+              !e || r <= 2 ? "bg-gray-200 text-gray-400 cursor-not-allowed" : "bg-gray-300 text-gray-700 hover:bg-gray-400"
+            ),
+            children: "-"
+          }
         ),
-        onClick: n,
-        "aria-hidden": "true"
-      }
-    ),
-    /* @__PURE__ */ e(
-      "div",
-      {
-        className: p(
-          "fixed right-0 top-0 z-50 h-full w-full bg-white shadow-2xl transition-transform duration-300 ease-in-out sm:w-[480px]",
-          i ? "translate-x-0" : "translate-x-full",
-          U
+        /* @__PURE__ */ t(
+          "button",
+          {
+            onClick: p,
+            disabled: !e,
+            className: o(
+              "absolute right-2 top-1/2 -translate-y-1/2 w-8 h-8 rounded-full flex items-center justify-center text-lg font-bold transition-colors",
+              e ? "bg-gray-300 text-gray-700 hover:bg-gray-400" : "bg-gray-200 text-gray-400 cursor-not-allowed"
+            ),
+            children: "+"
+          }
         ),
-        children: /* @__PURE__ */ s("div", { className: "flex h-full flex-col", children: [
-          /* @__PURE__ */ e("div", { className: "border-b border-gray-300 px-4 py-2", children: /* @__PURE__ */ s("div", { className: "flex items-center justify-between", children: [
-            l || a ? /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ e(
-                "button",
-                {
-                  onClick: a ? M : K,
-                  className: "rounded-full p-2 transition-colors hover:bg-gray-100",
-                  "aria-label": "Back",
-                  children: /* @__PURE__ */ e(le, { className: "h-5 w-5" })
-                }
-              ),
-              /* @__PURE__ */ e("h2", { className: "text-lg font-medium", children: a ? "Exclusive deals for you" : "Before you go..." })
-            ] }) : /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ e("div", { className: "bg-accent-500 text-white px-2 py-1 rounded-full text-sm aspect-square flex items-center justify-center w-8 h-8", children: (j = t == null ? void 0 : t.items) == null ? void 0 : j.length }),
-              /* @__PURE__ */ e("h2", { className: "text-lg font-medium", children: "Your Cart" })
-            ] }),
-            /* @__PURE__ */ e(
-              "button",
-              {
-                onClick: n,
-                className: "rounded-full p-2 transition-colors hover:bg-gray-100",
-                "aria-label": "Close cart",
-                children: /* @__PURE__ */ e(re, { className: "h-6 w-6" })
-              }
-            )
-          ] }) }),
-          l && /* @__PURE__ */ e(se, { onSkip: Z, limit: 100, checkoutButtonClassName: N }),
-          a && /* @__PURE__ */ e(ae, { onSkip: J, checkoutButtonClassName: N }),
-          !l && !a && !d && !o && t && t.items && t.items.length > 0 && /* @__PURE__ */ e(ie, {}),
-          !l && !a && d && /* @__PURE__ */ e("div", { className: "flex flex-1 items-center justify-center", children: /* @__PURE__ */ s("div", { className: "text-center", children: [
-            /* @__PURE__ */ e(ne, { className: "mx-auto mb-4 h-12 w-12 animate-spin text-accent-500" }),
-            /* @__PURE__ */ e("p", { className: "text-gray-600", children: "Loading cart..." })
-          ] }) }),
-          !l && !a && o && !d && /* @__PURE__ */ e("div", { className: "flex flex-1 items-center justify-center", children: /* @__PURE__ */ s("div", { className: "text-center", children: [
-            /* @__PURE__ */ e(v, { className: "mx-auto mb-4 h-12 w-12 text-red-600" }),
-            /* @__PURE__ */ e("p", { className: "text-red-600", children: "Failed to load cart. Please try again." })
-          ] }) }),
-          !l && !a && !d && !o && (!t || !t.items || t.items.length === 0) && /* @__PURE__ */ e("div", { className: "flex flex-1 items-center justify-center", children: /* @__PURE__ */ s("div", { className: "text-center", children: [
-            /* @__PURE__ */ e(v, { className: "mx-auto mb-4 h-12 w-12 text-gray-400" }),
-            /* @__PURE__ */ e("p", { className: "text-gray-600", children: P })
-          ] }) }),
-          !l && !a && !d && !o && t && t.items && t.items.length > 0 && /* @__PURE__ */ s(E, { children: [
-            /* @__PURE__ */ s("div", { className: "flex-1 overflow-y-auto", children: [
-              /* @__PURE__ */ e("div", { className: "space-y-4 p-4", children: t.items.map((r, D) => /* @__PURE__ */ s("div", { children: [
-                /* @__PURE__ */ e(
-                  $,
-                  {
-                    item: r
-                  }
-                ),
-                /* @__PURE__ */ e("hr", { className: "border-gray-200 mt-2" })
-              ] }, r.id)) }),
-              I && /* @__PURE__ */ e("div", { className: "px-4 pb-4", children: /* @__PURE__ */ e(O, {}) })
+        /* @__PURE__ */ a("div", { className: "text-center w-full", children: [
+          /* @__PURE__ */ a("div", { className: o("text-lg font-bold", e ? "text-gray-900" : "text-gray-500"), children: [
+            "BUY ",
+            r
+          ] }),
+          /* @__PURE__ */ a("div", { className: "flex items-center justify-center gap-2", children: [
+            r > 1 && !!m && /* @__PURE__ */ t("div", { className: o(
+              "text-base md:text-lg font-bold line-through",
+              e ? "text-[#DC143C]" : "text-gray-400"
+            ), children: g(c * r) }),
+            /* @__PURE__ */ t("div", { className: o("text-lg md:text-2xl font-bold", e ? "text-green-600" : "text-gray-400"), children: g(N) })
+          ] }),
+          r > 1 && e ? !!m && /* @__PURE__ */ a("div", { className: "absolute top-[-30px] right-0 2xl:right-[-30px] h-[60px] w-[60px] flex items-center justify-center", children: [
+            /* @__PURE__ */ a("span", { className: "text-white font-bold z-[5] relative leading-4", children: [
+              m,
+              "%",
+              /* @__PURE__ */ t("br", {}),
+              "off"
             ] }),
-            /* @__PURE__ */ e(te, { limit: 6, className: "border-t border-gray-200" }),
-            /* @__PURE__ */ s("div", { className: "border-t border-gray-300 bg-white", children: [
-              /* @__PURE__ */ s("div", { className: " text-base", children: [
-                /* @__PURE__ */ s("div", { className: "px-4 py-2 space-y-2", children: [
-                  /* @__PURE__ */ s("div", { className: "flex justify-between", children: [
-                    /* @__PURE__ */ e("span", { className: "text-gray-600", children: "Subtotal" }),
-                    /* @__PURE__ */ e("span", { className: "font-semibold", children: u(T) })
-                  ] }),
-                  w > 0 && /* @__PURE__ */ s("div", { className: "flex justify-between text-green-600", children: [
-                    /* @__PURE__ */ e("span", { children: "Discount" }),
-                    /* @__PURE__ */ s("span", { className: "font-semibold", children: [
-                      "-",
-                      u(w)
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ s("div", { className: "flex justify-between", children: [
-                    /* @__PURE__ */ e("span", { className: "text-gray-600", children: "Shipping" }),
-                    /* @__PURE__ */ e("span", { className: "font-semibold", children: t.deliveryZone ? ((A = t.pricing) == null ? void 0 : A.deliveryCharge) === 0 ? /* @__PURE__ */ e("span", { className: "text-green-600", children: "Free" }) : u(((S = t.pricing) == null ? void 0 : S.deliveryCharge) ?? 0) : /* @__PURE__ */ e("span", { className: "text-gray-400 text-xs font-normal", children: "Calculated at checkout" }) })
-                  ] })
-                ] }),
-                /* @__PURE__ */ s("div", { className: "flex justify-between p-4 border-t border-gray-300 text-lg", children: [
-                  /* @__PURE__ */ e("span", { className: "font-bold", children: "Total" }),
-                  /* @__PURE__ */ e("span", { className: "font-bold", children: u(t.pricing.total) })
-                ] })
-              ] }),
-              /* @__PURE__ */ s("div", { className: "px-4 py-2 space-y-2 pt-0", children: [
-                /* @__PURE__ */ s(
-                  L,
-                  {
-                    onClick: X,
-                    disabled: G || t.items.length === 0,
-                    className: p("w-full bg-accent-500 text-white hover:bg-accent-600", N),
-                    size: "lg",
-                    children: [
-                      /* @__PURE__ */ e(v, { className: "h-5 w-5" }),
-                      B
-                    ]
-                  }
-                ),
-                z && /* @__PURE__ */ e(
-                  L,
-                  {
-                    onClick: Q,
-                    variant: "outline",
-                    className: p("w-full border-gray-300 text-gray-600 hover:bg-gray-100", Y),
-                    size: "lg",
-                    children: R
-                  }
-                )
-              ] })
-            ] })
-          ] })
+            /* @__PURE__ */ t(C, { className: "animate-spin-slow w-full h-full z-[2] inset-0 absolute fill-accent-500 text-accent-500" })
+          ] }) : e ? null : /* @__PURE__ */ t("div", { className: "text-xs text-red-500 mt-1", children: "Out of Stock" })
         ] })
-      }
-    ),
-    /* @__PURE__ */ e(
-      ee,
-      {
-        isOpen: H,
-        onSuccess: (r) => {
-          y == null || y(r), n();
-        },
-        onClose: () => f(!1),
-        refundPolicy: {
-          title: "Yes we offer refunds!",
-          policies: [
-            "2 day return window from delivery date",
-            "Items must be unused and in original packaging",
-            "Refunds processed as soon as item is received",
-            "Refunds issued to original payment method",
-            "Contact hello@instock.ng to initiate a refund"
-          ]
-        }
-      }
-    )
+      ]
+    }
+  );
+};
+function P({
+  selectedVariant: l,
+  quantity: i,
+  onQuantityChange: s,
+  effectivePrice: c,
+  quantityDiscounts: n
+}) {
+  return /* @__PURE__ */ a("div", { className: "flex flex-col space-y-2", children: [
+    /* @__PURE__ */ t("span", { className: "text-sm font-medium", children: "Choose Quantity:" }),
+    /* @__PURE__ */ a("div", { className: "relative", children: [
+      !l && /* @__PURE__ */ t("div", { className: "absolute inset-0 bg-white/80 z-10 rounded-xl flex items-center justify-center", children: /* @__PURE__ */ a("div", { className: "text-center p-4", children: [
+        /* @__PURE__ */ t("div", { className: "text-lg font-semibold text-gray-700 mb-2", children: "Select a variant first" }),
+        /* @__PURE__ */ t("div", { className: "text-sm text-gray-500", children: "Choose a product variant above to see quantity options" })
+      ] }) }),
+      /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [
+        /* @__PURE__ */ t(
+          S,
+          {
+            qty: 1,
+            selectedVariant: l,
+            quantity: i,
+            onQuantityChange: s,
+            effectivePrice: c,
+            quantityDiscounts: n
+          }
+        ),
+        /* @__PURE__ */ t(
+          j,
+          {
+            selectedVariant: l,
+            quantity: i,
+            onQuantityChange: s,
+            effectivePrice: c,
+            quantityDiscounts: n
+          }
+        )
+      ] })
+    ] })
   ] });
 }
 export {
-  Se as ShoppingCart
+  P as QuantitySelector
 };

package/dist/index160.mjs

@@ -1,6 +1,6 @@
 'use client';
-import o from "./index224.mjs";
-import * as t from "./index225.mjs";
+import o from "./index228.mjs";
+import * as t from "./index229.mjs";
 const m = {
   ...t,
   ...o

package/dist/index161.mjs

@@ -1,5 +1,5 @@
 'use client';
-import n from "./index94.mjs";
+import n from "./index89.mjs";
 const a = n.toObjectSet([
   "age",
   "authorization",

package/dist/index163.mjs

@@ -1,14 +1,14 @@
 'use client';
-import H from "./index94.mjs";
-import D from "./index226.mjs";
+import H from "./index89.mjs";
+import D from "./index230.mjs";
 import L from "./index158.mjs";
-import n from "./index105.mjs";
-import y from "./index100.mjs";
-import O from "./index227.mjs";
+import n from "./index100.mjs";
+import y from "./index95.mjs";
+import O from "./index231.mjs";
 import U from "./index160.mjs";
-import q from "./index108.mjs";
-import { progressEventReducer as A } from "./index228.mjs";
-import v from "./index229.mjs";
+import q from "./index103.mjs";
+import { progressEventReducer as A } from "./index232.mjs";
+import v from "./index233.mjs";
 const N = typeof XMLHttpRequest < "u", Q = N && function(s) {
   return new Promise(function(C, i) {
     const t = v(s);

package/dist/index164.mjs

@@ -1,13 +1,13 @@
 'use client';
 import K from "./index160.mjs";
-import t from "./index94.mjs";
-import b from "./index105.mjs";
-import ee from "./index230.mjs";
-import { trackStream as z } from "./index231.mjs";
-import te from "./index108.mjs";
-import { progressEventDecorator as I, progressEventReducer as M, asyncDecorator as j } from "./index228.mjs";
-import se from "./index229.mjs";
-import re from "./index226.mjs";
+import t from "./index89.mjs";
+import b from "./index100.mjs";
+import ee from "./index234.mjs";
+import { trackStream as z } from "./index235.mjs";
+import te from "./index103.mjs";
+import { progressEventDecorator as I, progressEventReducer as M, asyncDecorator as j } from "./index232.mjs";
+import se from "./index233.mjs";
+import re from "./index230.mjs";
 const J = 64 * 1024, { isFunction: P } = t, ne = (({ Request: r, Response: n }) => ({
   Request: r,
   Response: n

package/dist/index165.mjs

@@ -1,5 +1,5 @@
 'use client';
-var r = {};
+var a = {};
 export {
-  r as __exports
+  a as __exports
 };

package/dist/index167.mjs

@@ -1,5 +1,5 @@
 'use client';
-var e = { exports: {} };
+var r = {};
 export {
-  e as __module
+  r as __exports
 };

package/dist/index168.mjs

@@ -1,21 +1,5 @@
 'use client';
-import { __exports as r } from "./index236.mjs";
-var u;
-function a() {
-  return u ? r : (u = 1, function(n) {
-    Object.defineProperty(n, "__esModule", {
-      value: !0
-    }), Object.defineProperty(n, "default", {
-      enumerable: !0,
-      get: function() {
-        return o;
-      }
-    });
-    function o(e, t) {
-      return t === void 0 && (t = ""), (e === "/" ? "/index" : /^\/index(\/|$)/.test(e) ? "/index" + e : e) + t;
-    }
-  }(r), r);
-}
+var e = { exports: {} };
 export {
-  a as __require
+  e as __module
 };

package/dist/index169.mjs

@@ -1,35 +1,21 @@
 'use client';
-import { __module as r } from "./index237.mjs";
-var i;
-function c() {
-  return i ? r.exports : (i = 1, function(f, e) {
-    Object.defineProperty(e, "__esModule", {
+import { __exports as r } from "./index239.mjs";
+var u;
+function a() {
+  return u ? r : (u = 1, function(n) {
+    Object.defineProperty(n, "__esModule", {
       value: !0
-    }), Object.defineProperty(e, "__unsafeCreateTrustedScriptURL", {
+    }), Object.defineProperty(n, "default", {
       enumerable: !0,
       get: function() {
-        return a;
+        return o;
       }
     });
-    let n;
-    function d() {
-      if (typeof n > "u" && typeof window < "u") {
-        var u;
-        n = ((u = window.trustedTypes) == null ? void 0 : u.createPolicy("nextjs", {
-          createHTML: (t) => t,
-          createScript: (t) => t,
-          createScriptURL: (t) => t
-        })) || null;
-      }
-      return n;
-    }
-    function a(u) {
-      var t;
-      return ((t = d()) == null ? void 0 : t.createScriptURL(u)) || u;
+    function o(e, t) {
+      return t === void 0 && (t = ""), (e === "/" ? "/index" : /^\/index(\/|$)/.test(e) ? "/index" + e : e) + t;
     }
-    (typeof e.default == "function" || typeof e.default == "object" && e.default !== null) && typeof e.default.__esModule > "u" && (Object.defineProperty(e.default, "__esModule", { value: !0 }), Object.assign(e.default, e), f.exports = e.default);
-  }(r, r.exports), r.exports);
+  }(r), r);
 }
 export {
-  c as __require
+  a as __require
 };