@huskel/sdk 0.4.7 → 0.4.9

package/dist/index.js

@@ -97,6 +97,12 @@ var HuskelAPI = class {
       if (sessionId) {
         headers["X-Huskel-Session-Id"] = sessionId;
       }
+      if (typeof window !== "undefined") {
+        const phone = localStorage.getItem("huskel_user_phone");
+        if (phone) {
+          headers["X-Huskel-Shopper-Phone"] = phone;
+        }
+      }
       const res = await fetch(url, {
         method: "POST",
         headers,
@@ -175,6 +181,12 @@ var HuskelAPI = class {
     if (shopperId) headers["X-Huskel-Shopper-Id"] = shopperId;
     const sessionId = (_b = this.getSessionId) == null ? void 0 : _b.call(this);
     if (sessionId) headers["X-Huskel-Session-Id"] = sessionId;
+    if (typeof window !== "undefined") {
+      const phone = localStorage.getItem("huskel_user_phone");
+      if (phone) {
+        headers["X-Huskel-Shopper-Phone"] = phone;
+      }
+    }
     return headers;
   }
   async getCart() {
@@ -1660,7 +1672,12 @@ function ChatModal({
   const [selectedProduct, setSelectedProduct] = (0, import_react12.useState)(null);
   const bottomRef = (0, import_react12.useRef)(null);
   const textareaRef = (0, import_react12.useRef)(null);
-  const [phoneInput, setPhoneInput] = (0, import_react12.useState)("");
+  const [phoneInput, setPhoneInput] = (0, import_react12.useState)(() => {
+    if (typeof window !== "undefined") {
+      return localStorage.getItem("huskel_user_phone") || "";
+    }
+    return "";
+  });
   const [merchantRef, setMerchantRef] = (0, import_react12.useState)(null);
   const [paymentPhase, setPaymentPhase] = (0, import_react12.useState)("idle");
   const { status: pollStatus } = usePaymentPolling({
@@ -1688,7 +1705,10 @@ function ChatModal({
   const handlePhoneSubmit = async () => {
     if (!phoneInput.trim()) return;
     try {
-      const res = await client.api.initiatePayment(phoneInput);
+      if (typeof window !== "undefined") {
+        localStorage.setItem("huskel_user_phone", phoneInput.trim());
+      }
+      const res = await client.api.initiatePayment(phoneInput.trim());
       setMerchantRef(res.merchantReference);
       setPaymentPhase("awaiting");
     } catch (e) {
@@ -1778,7 +1798,7 @@ function ChatModal({
               /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SparkleIcon3, {}) }),
               /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-cb-ai-body", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-cb-ai-text", children: renderMarkdown(msg.content) }),
-                isLast && sources.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                isLast && sources.length > 0 && (lastAction == null ? void 0 : lastAction.type) !== "request_phone" && (lastAction == null ? void 0 : lastAction.type) !== "awaiting_payment" && (lastAction == null ? void 0 : lastAction.type) !== "checkout" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                   SourcesCarousel,
                   {
                     sources,
@@ -1960,98 +1980,246 @@ function CheckoutModal({
   customStyles,
   hskThemeAttr
 }) {
-  var _a, _b, _c, _d;
   const { cart, loading: cartLoading } = useCart();
   const client = useHuskelContext();
   const [config, setConfig] = (0, import_react13.useState)(null);
-  const [loading, setLoading] = (0, import_react13.useState)(true);
-  const [checkingOut, setCheckingOut] = (0, import_react13.useState)(false);
-  const [paymentSuccess, setPaymentSuccess] = (0, import_react13.useState)(false);
+  const [loadingConfig, setLoadingConfig] = (0, import_react13.useState)(true);
+  const [phone, setPhone] = (0, import_react13.useState)(() => {
+    if (typeof window !== "undefined") {
+      return localStorage.getItem("huskel_user_phone") || "";
+    }
+    return "";
+  });
+  const [email, setEmail] = (0, import_react13.useState)(() => {
+    if (typeof window !== "undefined") {
+      return localStorage.getItem("huskel_user_email") || "";
+    }
+    return "";
+  });
+  const [firstName, setFirstName] = (0, import_react13.useState)(() => {
+    if (typeof window !== "undefined") {
+      return localStorage.getItem("huskel_user_firstname") || "";
+    }
+    return "";
+  });
+  const [lastName, setLastName] = (0, import_react13.useState)(() => {
+    if (typeof window !== "undefined") {
+      return localStorage.getItem("huskel_user_lastname") || "";
+    }
+    return "";
+  });
+  const [phase, setPhase] = (0, import_react13.useState)("idle");
+  const [merchantRef, setMerchantRef] = (0, import_react13.useState)(null);
+  const [payError, setPayError] = (0, import_react13.useState)(null);
+  const {} = usePaymentPolling({
+    client: client.api,
+    merchantReference: merchantRef,
+    onSuccess: () => {
+      setPhase("done");
+      setMerchantRef(null);
+    },
+    onFailure: () => {
+      setPhase("failed");
+      setPayError("Payment failed or timed out. Please try again.");
+      setMerchantRef(null);
+    }
+  });
   (0, import_react13.useEffect)(() => {
-    client.api.getCheckoutConfig().then((res) => setConfig(res.payment_methods)).catch((e) => console.error("[Huskel] Failed to fetch checkout config", e)).finally(() => setLoading(false));
+    client.api.getCheckoutConfig().then((res) => setConfig(res.payment_methods)).catch(() => {
+    }).finally(() => setLoadingConfig(false));
   }, [client]);
-  const handlePay = async (method) => {
-    setCheckingOut(true);
-    setTimeout(async () => {
-      try {
-        const payload = await client.api.checkoutCart();
-        if (client.onCheckout) {
-          client.onCheckout(payload);
-        }
-        setPaymentSuccess(true);
-        setTimeout(() => {
-          onClose();
-        }, 3e3);
-      } catch (e) {
-        console.error("[Huskel] Checkout failed", e);
-        setCheckingOut(false);
+  const hasPaymentMethods = config && Object.values(config).some((m) => m.enabled);
+  const handlePay = async (e) => {
+    e.preventDefault();
+    if (!phone.trim()) {
+      setPayError("Phone number is required.");
+      return;
+    }
+    setPayError(null);
+    setPhase("awaiting");
+    try {
+      if (typeof window !== "undefined") {
+        localStorage.setItem("huskel_user_phone", phone.trim());
+        localStorage.setItem("huskel_user_email", email.trim());
+        localStorage.setItem("huskel_user_firstname", firstName.trim());
+        localStorage.setItem("huskel_user_lastname", lastName.trim());
+      }
+      const res = await client.api.initiatePayment(phone.trim(), email, firstName, lastName);
+      if (res == null ? void 0 : res.merchantReference) {
+        setMerchantRef(res.merchantReference);
+      } else {
+        throw new Error("No merchant reference returned.");
       }
-    }, 1500);
+    } catch (err) {
+      setPhase("failed");
+      setPayError(err.message || "Could not connect to payment processor.");
+    }
   };
-  const hasPaymentMethods = config && Object.values(config).some((m) => m.enabled);
+  const currency = (cart == null ? void 0 : cart.currency) || "KES";
+  const total = (cart == null ? void 0 : cart.total) || 0;
+  const backdropStyle = __spreadProps(__spreadValues({}, customStyles), { fontSize: "15px", fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif', zIndex: 999999 });
   return (0, import_react_dom3.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "div",
       {
-        className: "hsk-cart-backdrop",
-        style: __spreadProps(__spreadValues({}, customStyles), { zIndex: 999999 }),
+        className: "hsk-checkout-backdrop-full",
+        style: backdropStyle,
         "data-hsk-theme": hskThemeAttr,
-        onClick: onClose,
         children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           "div",
           {
-            className: "hsk-checkout-modal",
+            className: "hsk-checkout-modal-full",
             style: customStyles,
             "data-hsk-theme": hskThemeAttr,
-            onClick: (e) => e.stopPropagation(),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-checkout-header", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h2", { children: "Secure Checkout" }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { onClick: onClose, className: "hsk-close-btn", children: "\xD7" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-checkout-content", children: paymentSuccess ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-checkout-success", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "hsk-success-icon", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("polyline", { points: "22 4 12 14.01 9 11.01" })
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-checkout-panel-left", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-checkout-left-content", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("button", { onClick: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  onClose();
+                }, className: "hsk-checkout-back-btn", disabled: phase !== "idle", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "19", y1: "12", x2: "5", y2: "12" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("polyline", { points: "12 19 5 12 12 5" })
+                  ] }),
+                  "Back to store"
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { children: "Payment Successful!" }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: "Thank you for your order." })
-              ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-checkout-split", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-checkout-summary", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { children: "Order Summary" }),
-                  cartLoading || !cart ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "hsk-cart-loading", children: "Loading order..." }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ul", { className: "hsk-checkout-items", children: cart.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("li", { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
-                        item.quantity,
-                        "x ",
-                        item.name
-                      ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
-                        item.currency,
-                        " ",
-                        (item.price_numeric * item.quantity).toLocaleString(void 0, { minimumFractionDigits: 2 })
-                      ] })
-                    ] }, item.id)) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-checkout-total", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Total" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
-                        cart.currency,
-                        " ",
-                        cart.total.toLocaleString(void 0, { minimumFractionDigits: 2 })
-                      ] })
-                    ] })
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-checkout-store-info", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h2", { children: "Secure Checkout" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-checkout-amount-due", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "hsk-checkout-label-muted", children: "Pay total" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-checkout-grand-total", children: [
+                    currency,
+                    " ",
+                    total.toLocaleString(void 0, { minimumFractionDigits: 2 })
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-checkout-payment", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { children: "Payment Method" }),
-                  loading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "hsk-cart-loading", children: "Loading secure payment methods..." }) : !hasPaymentMethods ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "hsk-checkout-error", children: "No payment methods are currently available for this store." }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-payment-options", children: [
-                    ((_a = config == null ? void 0 : config.mpesa) == null ? void 0 : _a.enabled) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { onClick: () => handlePay("mpesa"), disabled: checkingOut, className: "hsk-pay-btn hsk-pay-mpesa", children: checkingOut ? "Processing..." : "Pay with M-Pesa" }),
-                    ((_b = config == null ? void 0 : config.equity) == null ? void 0 : _b.enabled) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { onClick: () => handlePay("equity"), disabled: checkingOut, className: "hsk-pay-btn hsk-pay-equity", children: checkingOut ? "Processing..." : "Pay with Equity Bank" }),
-                    ((_c = config == null ? void 0 : config.stripe) == null ? void 0 : _c.enabled) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { onClick: () => handlePay("stripe"), disabled: checkingOut, className: "hsk-pay-btn hsk-pay-stripe", children: checkingOut ? "Processing..." : "Pay with Card (Stripe)" }),
-                    ((_d = config == null ? void 0 : config.paypal) == null ? void 0 : _d.enabled) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { onClick: () => handlePay("paypal"), disabled: checkingOut, className: "hsk-pay-btn hsk-pay-paypal", children: checkingOut ? "Processing..." : "Pay with PayPal" })
+                cartLoading || !cart ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "hsk-cart-loading", children: "Loading order..." }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-checkout-items-list-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ul", { className: "hsk-checkout-items-list", children: cart.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("li", { className: "hsk-checkout-item-row", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-checkout-item-img-container", children: [
+                    item.image ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("img", { src: item.image, alt: item.name, className: "hsk-checkout-item-img" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-checkout-item-img-placeholder", children: "\u{1F6D2}" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "hsk-checkout-item-qty-badge", children: item.quantity })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-checkout-item-details", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "hsk-checkout-item-name", children: item.name }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "hsk-checkout-item-price", children: [
+                    item.currency,
+                    " ",
+                    (item.price_numeric * item.quantity).toLocaleString(void 0, { minimumFractionDigits: 2 })
                   ] })
+                ] }, item.id)) }) })
+              ] }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-checkout-panel-right", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-checkout-right-content", children: phase === "done" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-checkout-status-card success", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-status-icon-wrap success", children: "\u2705" }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { children: "Payment Successful!" }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: "Your transaction has been confirmed successfully. Thank you for your order!" }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { onClick: onClose, className: "hsk-pay-btn hsk-btn-primary", style: { marginTop: "1.5rem" }, children: "Continue Shopping" })
+              ] }) : phase === "awaiting" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-checkout-status-card awaiting", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-status-spinner-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-status-spinner" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { children: "Confirm payment on your phone" }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("p", { children: [
+                  "We've sent an M-Pesa STK push prompt to ",
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("strong", { children: [
+                    "254",
+                    phone
+                  ] }),
+                  "."
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-checkout-stk-instructions", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: "1. Check your phone lockscreen for the M-Pesa prompt." }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: "2. Enter your M-Pesa PIN and press OK." }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: "3. Wait here; this page will automatically redirect once confirmed." })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  "button",
+                  {
+                    onClick: () => {
+                      setPhase("idle");
+                      setMerchantRef(null);
+                    },
+                    className: "hsk-checkout-cancel-btn",
+                    children: "Cancel and change phone number"
+                  }
+                )
+              ] }) : phase === "failed" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-checkout-status-card failed", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-status-icon-wrap failed", children: "\u274C" }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { children: "Payment failed or timed out" }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "hsk-checkout-error-text", children: payError || "Could not verify M-Pesa transaction." }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { onClick: () => {
+                  setPhase("idle");
+                  setPayError(null);
+                }, className: "hsk-pay-btn hsk-btn-primary", style: { marginTop: "1.5rem" }, children: "Try Again" })
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-checkout-payment-form-wrap", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { className: "hsk-checkout-section-title", children: "Payment details" }),
+                loadingConfig ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "hsk-cart-loading", children: "Loading payment configuration..." }) : !hasPaymentMethods ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "hsk-checkout-error", children: "No payment methods configured for this store." }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("form", { onSubmit: handlePay, className: "hsk-stripe-checkout-form", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-form-group", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { className: "hsk-form-label", children: "M-Pesa Mobile Number" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-phone-input-container", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "hsk-phone-prefix", children: "254" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                        "input",
+                        {
+                          type: "tel",
+                          required: true,
+                          placeholder: "712345678",
+                          pattern: "[0-9]{9}",
+                          maxLength: 9,
+                          value: phone,
+                          onChange: (e) => setPhone(e.target.value.replace(/\D/g, "")),
+                          className: "hsk-phone-input-field"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "hsk-form-hint", children: "Enter your 9-digit number (e.g. 712345678)" })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-form-group", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { className: "hsk-form-label", children: "Email address" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      "input",
+                      {
+                        type: "email",
+                        placeholder: "john.doe@example.com",
+                        value: email,
+                        onChange: (e) => setEmail(e.target.value),
+                        className: "hsk-form-input"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-form-row", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-form-group", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { className: "hsk-form-label", children: "First Name" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                        "input",
+                        {
+                          type: "text",
+                          placeholder: "John",
+                          value: firstName,
+                          onChange: (e) => setFirstName(e.target.value),
+                          className: "hsk-form-input"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-form-group", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { className: "hsk-form-label", children: "Last Name" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                        "input",
+                        {
+                          type: "text",
+                          placeholder: "Doe",
+                          value: lastName,
+                          onChange: (e) => setLastName(e.target.value),
+                          className: "hsk-form-input"
+                        }
+                      )
+                    ] })
+                  ] }),
+                  payError && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-form-error-banner", children: payError }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("button", { type: "submit", className: "hsk-checkout-submit-btn", children: [
+                    "Pay ",
+                    currency,
+                    " ",
+                    total.toLocaleString()
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-checkout-footer-brand", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Powered by Huskel AI" }) })
                 ] })
-              ] }) })
+              ] }) }) })
             ]
           }
         )
@@ -2096,6 +2264,12 @@ function CartDrawer({
   }, [open]);
   const handleCheckout = async () => {
     if (!cart || cart.items.length === 0) return;
+    const event = new CustomEvent("huskel:trigger_checkout", { cancelable: true });
+    window.dispatchEvent(event);
+    if (event.defaultPrevented) {
+      setOpen(false);
+      return;
+    }
     setShowCheckout(true);
   };
   const isStringTheme = typeof theme === "string";