@instockng/storefront-ui 1.0.106 → 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 "./index28.mjs";
-import { useGetCartRecommendations as V, useGetCartUpsellAddons as W } from "./index40.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 "./index49.mjs";
-import { Button as L } from "./index21.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 "./index27.mjs";
-import { useHideBodyOverflow as de } from "./index50.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,73 +1,10 @@
 'use client';
-import H from "./index84.mjs";
-import D from "./index227.mjs";
-import L from "./index155.mjs";
-import n from "./index95.mjs";
-import y from "./index90.mjs";
-import O from "./index228.mjs";
-import U from "./index157.mjs";
-import q from "./index98.mjs";
-import { progressEventReducer as A } from "./index229.mjs";
-import v from "./index230.mjs";
-const N = typeof XMLHttpRequest < "u", Q = N && function(s) {
-  return new Promise(function(C, i) {
-    const t = v(s);
-    let E = t.data;
-    const T = q.from(t.headers).normalize();
-    let { responseType: d, onUploadProgress: R, onDownloadProgress: h } = t, l, g, w, u, f;
-    function x() {
-      u && u(), f && f(), t.cancelToken && t.cancelToken.unsubscribe(l), t.signal && t.signal.removeEventListener("abort", l);
-    }
-    let e = new XMLHttpRequest();
-    e.open(t.method.toUpperCase(), t.url, !0), e.timeout = t.timeout;
-    function b() {
-      if (!e)
-        return;
-      const o = q.from(
-        "getAllResponseHeaders" in e && e.getAllResponseHeaders()
-      ), a = {
-        data: !d || d === "text" || d === "json" ? e.responseText : e.response,
-        status: e.status,
-        statusText: e.statusText,
-        headers: o,
-        config: s,
-        request: e
-      };
-      D(function(c) {
-        C(c), x();
-      }, function(c) {
-        i(c), x();
-      }, a), e = null;
-    }
-    "onloadend" in e ? e.onloadend = b : e.onreadystatechange = function() {
-      !e || e.readyState !== 4 || e.status === 0 && !(e.responseURL && e.responseURL.indexOf("file:") === 0) || setTimeout(b);
-    }, e.onabort = function() {
-      e && (i(new n("Request aborted", n.ECONNABORTED, s, e)), e = null);
-    }, e.onerror = function(r) {
-      const a = r && r.message ? r.message : "Network Error", p = new n(a, n.ERR_NETWORK, s, e);
-      p.event = r || null, i(p), e = null;
-    }, e.ontimeout = function() {
-      let r = t.timeout ? "timeout of " + t.timeout + "ms exceeded" : "timeout exceeded";
-      const a = t.transitional || L;
-      t.timeoutErrorMessage && (r = t.timeoutErrorMessage), i(new n(
-        r,
-        a.clarifyTimeoutError ? n.ETIMEDOUT : n.ECONNABORTED,
-        s,
-        e
-      )), e = null;
-    }, E === void 0 && T.setContentType(null), "setRequestHeader" in e && H.forEach(T.toJSON(), function(r, a) {
-      e.setRequestHeader(a, r);
-    }), H.isUndefined(t.withCredentials) || (e.withCredentials = !!t.withCredentials), d && d !== "json" && (e.responseType = t.responseType), h && ([w, f] = A(h, !0), e.addEventListener("progress", w)), R && e.upload && ([g, u] = A(R), e.upload.addEventListener("progress", g), e.upload.addEventListener("loadend", u)), (t.cancelToken || t.signal) && (l = (o) => {
-      e && (i(!o || o.type ? new y(null, s, e) : o), e.abort(), e = null);
-    }, t.cancelToken && t.cancelToken.subscribe(l), t.signal && (t.signal.aborted ? l() : t.signal.addEventListener("abort", l)));
-    const m = O(t.url);
-    if (m && U.protocols.indexOf(m) === -1) {
-      i(new n("Unsupported protocol " + m + ":", n.ERR_BAD_REQUEST, s));
-      return;
-    }
-    e.send(E || null);
-  });
+import o from "./index228.mjs";
+import * as t from "./index229.mjs";
+const m = {
+  ...t,
+  ...o
 };
 export {
-  Q as default
+  m as default
 };