@instockng/storefront-ui 1.0.32 → 1.0.34

package/dist/index7.mjs

@@ -1,113 +1,200 @@
 'use client';
-import { jsxs as s, jsx as t, Fragment as u } from "react/jsx-runtime";
-import { useState as f } from "react";
-import { Card as P, CardContent as S, CardFooter as j } from "./index14.mjs";
-import { Button as I } from "./index13.mjs";
-import { Badge as p } from "./index15.mjs";
-import { Package as O, ShoppingCart as q } from "lucide-react";
-import { cn as g, formatCurrency as h } from "./index19.mjs";
-function D({
-  product: r,
-  onAddToCart: o,
-  showStock: b = !0,
-  className: x,
-  imageClassName: N,
-  disableAddToCart: v = !1,
-  isAddingToCart: n = !1,
-  onClick: i
+import { jsx as e, jsxs as r, Fragment as T } from "react/jsx-runtime";
+import { useState as E } from "react";
+import "./index21.mjs";
+import "@tanstack/react-query";
+import { useGetOrder as U, useConfirmOrder as M } from "./index34.mjs";
+import { Card as s, CardHeader as m, CardTitle as o, CardContent as i } from "./index15.mjs";
+import { Button as S } from "./index14.mjs";
+import { Badge as y } from "./index16.mjs";
+import { Loader2 as v, XCircle as _, Package as H, CheckCircle as L } from "lucide-react";
+import { cn as l, formatDateTime as k, formatCurrency as c } from "./index20.mjs";
+const b = "2348125648668", x = "0" + b.slice(3), W = `${x.slice(0, 4)} ${x.slice(4, 7)} ${x.slice(7)}`, $ = `https://wa.me/${b}`;
+function X({
+  orderId: N,
+  token: f,
+  className: h,
+  headerClassName: w,
+  buttonClassName: P,
+  cardClassName: n,
+  whatsappHelpLink: A = $,
+  whatsappHelpNumber: C = W
 }) {
-  var d;
-  const [c, y] = f(
-    ((d = r.variants[0]) == null ? void 0 : d.id) || ""
-  ), [m, k] = f(1), a = r.variants.find((e) => e.id === c), C = r.variants.length > 1, l = a ? a.stock === void 0 || a.stock > 0 : !1, w = (e) => {
-    e.stopPropagation(), a && o && o(a.id, m);
-  };
-  return /* @__PURE__ */ s(
-    P,
-    {
-      className: g(
-        "group overflow-hidden transition-all hover:shadow-lg",
-        i && "cursor-pointer",
-        x
+  var g;
+  const [p, j] = E(!1), { data: u, isLoading: D, error: O } = U(N, f, {
+    retry: !1
+  }), d = M({
+    onSuccess: (t) => {
+      j(!0);
+    },
+    onError: (t) => {
+    }
+  });
+  if (D)
+    return /* @__PURE__ */ e("div", { className: l("min-h-screen bg-gray-50 flex items-center justify-center", h), children: /* @__PURE__ */ r("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(v, { className: "h-12 w-12 animate-spin text-blue-500 mx-auto mb-4" }),
+      /* @__PURE__ */ e("p", { className: "text-gray-600", children: "Loading order details..." })
+    ] }) });
+  if (O || !u || "error" in u)
+    return /* @__PURE__ */ e("div", { className: l("min-h-screen bg-gray-50 flex items-center justify-center p-4", h), children: /* @__PURE__ */ r(s, { className: l("max-w-md w-full", n), children: [
+      /* @__PURE__ */ e(m, { children: /* @__PURE__ */ r("div", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ e(_, { className: "h-6 w-6 text-red-500" }),
+        /* @__PURE__ */ e(o, { children: "Order Not Found" })
+      ] }) }),
+      /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e("p", { className: "text-gray-600", children: "We couldn't find this order. The link may be invalid or expired. Please contact support if you need assistance." }) })
+    ] }) });
+  const a = u;
+  return /* @__PURE__ */ e("div", { className: l("min-h-screen bg-gray-50 py-8 px-4", h), children: /* @__PURE__ */ r("div", { className: "max-w-3xl mx-auto space-y-6", children: [
+    /* @__PURE__ */ r("div", { className: l("text-center", w), children: [
+      a.brand.logoUrl ? /* @__PURE__ */ e("div", { className: "inline-flex items-center justify-center w-24 h-16 mb-4", children: /* @__PURE__ */ e(
+        "img",
+        {
+          src: a.brand.logoUrl,
+          alt: `${a.brand.name} logo`,
+          className: "max-w-full max-h-full object-contain"
+        }
+      ) }) : /* @__PURE__ */ e("div", { className: "inline-flex items-center justify-center w-16 h-16 bg-blue-100 rounded-full mb-4", children: /* @__PURE__ */ e(H, { className: "h-8 w-8 text-blue-600" }) }),
+      /* @__PURE__ */ r("h1", { className: "text-3xl font-bold text-gray-900", children: [
+        "Order #",
+        a.orderNumber
+      ] }),
+      /* @__PURE__ */ e("p", { className: "text-gray-600 mt-2", children: a.brand.name })
+    ] }),
+    p && /* @__PURE__ */ e(s, { className: l("border-green-200 bg-green-50", n), children: /* @__PURE__ */ e(i, { className: "pt-6", children: /* @__PURE__ */ r("div", { className: "flex items-start space-x-3", children: [
+      /* @__PURE__ */ e(L, { className: "h-6 w-6 text-green-600 mt-0.5" }),
+      /* @__PURE__ */ r("div", { children: [
+        /* @__PURE__ */ e("h3", { className: "font-semibold text-green-900", children: "Order Confirmed!" }),
+        /* @__PURE__ */ e("p", { className: "text-green-700 mt-1", children: "Thank you for confirming your order. We will contact you soon to arrange delivery." })
+      ] })
+    ] }) }) }),
+    !p && a.confirmationMessage && /* @__PURE__ */ e(s, { className: l(a.canConfirm ? "border-orange-200 bg-orange-50" : "", n), children: /* @__PURE__ */ e(i, { className: "pt-6", children: /* @__PURE__ */ e("p", { className: a.canConfirm ? "text-orange-900" : "text-gray-700", children: a.confirmationMessage }) }) }),
+    a.canConfirm && !p && /* @__PURE__ */ e(s, { className: n, children: /* @__PURE__ */ r(i, { className: "pt-6", children: [
+      /* @__PURE__ */ e(
+        S,
+        {
+          onClick: () => d.mutate({ orderId: N, token: f }),
+          disabled: d.isPending,
+          className: l("w-full", P),
+          size: "lg",
+          children: d.isPending ? /* @__PURE__ */ r(T, { children: [
+            /* @__PURE__ */ e(v, { className: "mr-2 h-5 w-5 animate-spin" }),
+            "Confirming..."
+          ] }) : "Confirm Order"
+        }
       ),
-      onClick: i,
-      children: [
-        /* @__PURE__ */ s("div", { className: "relative aspect-square overflow-hidden bg-gray-100", children: [
-          r.imageUrl ? /* @__PURE__ */ t(
-            "img",
-            {
-              src: r.imageUrl,
-              alt: r.name,
-              className: g(
-                "h-full w-full object-cover transition-transform group-hover:scale-105",
-                N
-              )
-            }
-          ) : /* @__PURE__ */ t("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ t(O, { className: "h-16 w-16 text-gray-400" }) }),
-          !l && /* @__PURE__ */ t(p, { className: "absolute right-2 top-2 bg-red-600", children: "Out of Stock" }),
-          b && l && (a == null ? void 0 : a.stock) !== void 0 && a.stock < 10 && /* @__PURE__ */ s(p, { className: "absolute right-2 top-2 bg-orange-600", children: [
-            "Only ",
-            a.stock,
-            " left"
-          ] })
+      d.isError && /* @__PURE__ */ e("p", { className: "text-red-600 text-sm mt-2 text-center", children: "Failed to confirm order. Please try again or contact support." })
+    ] }) }),
+    /* @__PURE__ */ r(s, { className: n, children: [
+      /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(o, { children: "Order Details" }) }),
+      /* @__PURE__ */ e(i, { className: "space-y-4", children: /* @__PURE__ */ r("div", { className: "grid grid-cols-2 gap-4", children: [
+        /* @__PURE__ */ r("div", { children: [
+          /* @__PURE__ */ e("p", { className: "text-sm text-gray-600", children: "Status" }),
+          /* @__PURE__ */ e(y, { className: "mt-1", children: a.status })
         ] }),
-        /* @__PURE__ */ s(S, { className: "p-4", children: [
-          /* @__PURE__ */ t("h3", { className: "mb-1 font-semibold line-clamp-2", children: r.name }),
-          r.description && /* @__PURE__ */ t("p", { className: "mb-2 text-sm text-gray-600 line-clamp-2", children: r.description }),
-          C && /* @__PURE__ */ s("div", { className: "mb-3", children: [
-            /* @__PURE__ */ t("label", { className: "mb-1 block text-xs font-medium text-gray-700", children: "Select Option" }),
-            /* @__PURE__ */ t(
-              "select",
-              {
-                value: c,
-                onChange: (e) => {
-                  e.stopPropagation(), y(e.target.value);
-                },
-                className: "w-full rounded-md border border-gray-300 px-2 py-1 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500",
-                onClick: (e) => e.stopPropagation(),
-                children: r.variants.map((e) => /* @__PURE__ */ s("option", { value: e.id, children: [
-                  e.name,
-                  " - ",
-                  h(e.price)
-                ] }, e.id))
-              }
-            )
+        /* @__PURE__ */ r("div", { children: [
+          /* @__PURE__ */ e("p", { className: "text-sm text-gray-600", children: "Order Date" }),
+          /* @__PURE__ */ e("p", { className: "font-medium", children: a.createdAt ? k(a.createdAt) : "N/A" })
+        ] }),
+        /* @__PURE__ */ r("div", { children: [
+          /* @__PURE__ */ e("p", { className: "text-sm text-gray-600", children: "Payment Method" }),
+          /* @__PURE__ */ e("p", { className: "font-medium", children: a.paymentMethod === "cod" ? "Cash on Delivery" : "Online Payment" })
+        ] }),
+        /* @__PURE__ */ r("div", { children: [
+          /* @__PURE__ */ e("p", { className: "text-sm text-gray-600", children: "Estimated Delivery" }),
+          /* @__PURE__ */ e("p", { className: "font-medium", children: a.estimatedDays ? `${a.estimatedDays} days` : "TBD" })
+        ] })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ r(s, { className: n, children: [
+      /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(o, { children: "Delivery Information" }) }),
+      /* @__PURE__ */ r(i, { className: "space-y-3", children: [
+        /* @__PURE__ */ r("div", { children: [
+          /* @__PURE__ */ e("p", { className: "text-sm text-gray-600", children: "Customer" }),
+          /* @__PURE__ */ r("p", { className: "font-medium", children: [
+            a.firstName,
+            " ",
+            a.lastName
+          ] }),
+          /* @__PURE__ */ e("p", { className: "text-sm text-gray-600", children: a.phone })
+        ] }),
+        /* @__PURE__ */ r("div", { children: [
+          /* @__PURE__ */ e("p", { className: "text-sm text-gray-600", children: "Address" }),
+          /* @__PURE__ */ e("p", { className: "font-medium", children: a.address }),
+          /* @__PURE__ */ r("p", { className: "text-sm text-gray-600", children: [
+            a.city,
+            ", ",
+            a.deliveryZone.state.name
           ] }),
-          /* @__PURE__ */ t("div", { className: "mb-3 text-2xl font-bold text-blue-600", children: a && h(a.price) }),
-          /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ t("label", { className: "text-xs font-medium text-gray-700", children: "Qty:" }),
-            /* @__PURE__ */ t(
-              "input",
+          /* @__PURE__ */ e("p", { className: "text-sm text-gray-600", children: a.deliveryZone.name })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ r(s, { className: n, children: [
+      /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(o, { children: "Items" }) }),
+      /* @__PURE__ */ r(i, { children: [
+        /* @__PURE__ */ e("div", { className: "space-y-4", children: (g = a.items) == null ? void 0 : g.map((t) => /* @__PURE__ */ r("div", { className: "flex items-start justify-between border-b pb-4 last:border-0", children: [
+          /* @__PURE__ */ r("div", { className: "flex items-start space-x-4 flex-1", children: [
+            (t.variant.thumbnailUrl || t.variant.product.thumbnailUrl) && /* @__PURE__ */ e(
+              "img",
               {
-                type: "number",
-                min: "1",
-                max: (a == null ? void 0 : a.stock) || 999,
-                value: m,
-                onChange: (e) => {
-                  e.stopPropagation(), k(Math.max(1, parseInt(e.target.value) || 1));
-                },
-                onClick: (e) => e.stopPropagation(),
-                className: "w-20 rounded-md border border-gray-300 px-2 py-1 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                src: t.variant.thumbnailUrl || t.variant.product.thumbnailUrl || void 0,
+                alt: t.variant.product.name,
+                className: "w-16 h-16 object-cover rounded"
               }
-            )
+            ),
+            /* @__PURE__ */ r("div", { className: "flex-1", children: [
+              /* @__PURE__ */ e("p", { className: "font-medium", children: t.variant.product.name }),
+              t.variant.name && /* @__PURE__ */ e(y, { variant: "outline", className: "mt-1", children: t.variant.name }),
+              /* @__PURE__ */ r("p", { className: "text-sm text-gray-600 mt-1", children: [
+                "Quantity: ",
+                t.quantity
+              ] }),
+              /* @__PURE__ */ r("p", { className: "text-sm text-gray-600", children: [
+                "SKU: ",
+                t.variant.sku
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ r("div", { className: "text-right", children: [
+            /* @__PURE__ */ e("p", { className: "font-medium", children: c(t.priceAtPurchase * t.quantity) }),
+            /* @__PURE__ */ r("p", { className: "text-sm text-gray-600", children: [
+              c(t.priceAtPurchase),
+              " each"
+            ] })
           ] })
-        ] }),
-        /* @__PURE__ */ t(j, { className: "p-4 pt-0", children: /* @__PURE__ */ t(
-          I,
-          {
-            onClick: w,
-            disabled: v || !l || n,
-            className: "w-full",
-            children: n ? /* @__PURE__ */ t(u, { children: "Adding..." }) : /* @__PURE__ */ s(u, { children: [
-              /* @__PURE__ */ t(q, { className: "mr-2 h-4 w-4" }),
-              "Add to Cart"
+        ] }, t.id)) }),
+        /* @__PURE__ */ r("div", { className: "mt-6 border-t pt-4 space-y-2", children: [
+          /* @__PURE__ */ r("div", { className: "flex justify-between text-sm", children: [
+            /* @__PURE__ */ e("span", { className: "text-gray-600", children: "Subtotal" }),
+            /* @__PURE__ */ e("span", { className: "font-medium", children: c(a.subtotal) })
+          ] }),
+          a.discountAmount && a.discountAmount > 0 && /* @__PURE__ */ r("div", { className: "flex justify-between text-sm text-green-600", children: [
+            /* @__PURE__ */ e("span", { children: "Discount" }),
+            /* @__PURE__ */ r("span", { children: [
+              "-",
+              c(a.discountAmount)
             ] })
-          }
-        ) })
-      ]
-    }
-  );
+          ] }),
+          /* @__PURE__ */ r("div", { className: "flex justify-between text-sm", children: [
+            /* @__PURE__ */ e("span", { className: "text-gray-600", children: "Delivery Charge" }),
+            /* @__PURE__ */ e("span", { className: "font-medium", children: c(a.deliveryCharge) })
+          ] }),
+          /* @__PURE__ */ r("div", { className: "flex justify-between text-lg font-bold border-t pt-2", children: [
+            /* @__PURE__ */ e("span", { children: "Total" }),
+            /* @__PURE__ */ e("span", { children: c(a.totalPrice) })
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ e(s, { className: n, children: /* @__PURE__ */ e(i, { className: "pt-6", children: /* @__PURE__ */ r("p", { className: "text-sm text-gray-600 text-center", children: [
+      "Need help with your order? Call us on ",
+      C,
+      " or contact us on",
+      " ",
+      /* @__PURE__ */ e("a", { href: A, target: "_blank", rel: "noopener noreferrer", className: "text-blue-600 hover:underline", children: "WhatsApp" })
+    ] }) }) })
+  ] }) });
 }
 export {
-  D as ProductCard
+  X as OrderConfirmation
 };