@huskel/sdk 0.4.3 → 0.4.7

package/dist/index.js

@@ -52,8 +52,10 @@ __export(index_exports, {
   useCart: () => useCart,
   useChat: () => useChat,
   useHuskel: () => useHuskel,
+  useHuskelContext: () => useHuskelContext,
   useIngest: () => useIngest,
   usePageIngest: () => usePageIngest,
+  usePaymentPolling: () => usePaymentPolling,
   useSearch: () => useSearch
 });
 module.exports = __toCommonJS(index_exports);
@@ -207,6 +209,32 @@ var HuskelAPI = class {
     if (!res.ok) throw new Error("Failed to fetch checkout config");
     return res.json();
   }
+  async initiatePayment(phoneNumber, email, firstName, lastName) {
+    const res = await fetch(`${this.apiUrl}/payment/initiate`, {
+      method: "POST",
+      headers: this.buildHeaders(),
+      body: JSON.stringify({
+        siteId: this.siteId,
+        phoneNumber,
+        email,
+        firstName,
+        lastName
+      })
+    });
+    if (!res.ok) {
+      const errText = await res.text();
+      throw new Error("Failed to initiate payment: " + errText);
+    }
+    return res.json();
+  }
+  async getPaymentStatus(ref) {
+    const res = await fetch(`${this.apiUrl}/payment/status?ref=${ref}`, {
+      method: "GET",
+      headers: this.buildHeaders()
+    });
+    if (!res.ok) throw new Error("Failed to get payment status");
+    return res.json();
+  }
 };
 
 // src/client.ts
@@ -358,6 +386,9 @@ var _HuskelClient = class _HuskelClient {
     } catch (e) {
     }
   }
+  reRegister() {
+    instance = this;
+  }
   setShopperId(id) {
     this.shopperId = id;
   }
@@ -491,11 +522,17 @@ function HuskelProvider({ siteId, apiUrl, apiToken, shopperId, children }) {
   const clientRef = (0, import_react2.useRef)(null);
   if (!clientRef.current) {
     clientRef.current = new HuskelClient({ siteId, apiUrl, apiToken, shopperId });
+  } else {
+    clientRef.current.reRegister();
   }
   (0, import_react2.useEffect)(() => {
     var _a;
     (_a = clientRef.current) == null ? void 0 : _a.setShopperId(shopperId);
   }, [shopperId]);
+  (0, import_react2.useEffect)(() => {
+    var _a;
+    (_a = clientRef.current) == null ? void 0 : _a.reRegister();
+  }, []);
   (0, import_react2.useEffect)(() => {
     return () => {
       var _a;
@@ -527,6 +564,7 @@ function useSearch() {
       return;
     }
     const gen = ++genRef.current;
+    setLoading(true);
     setError(null);
     try {
       const res = await client.api.searchAutocomplete(query, limit);
@@ -617,9 +655,10 @@ function useChat() {
   const [sources, setSources] = (0, import_react6.useState)([]);
   const [loading, setLoading] = (0, import_react6.useState)(false);
   const [error, setError] = (0, import_react6.useState)(null);
+  const [lastAction, setLastAction] = (0, import_react6.useState)(null);
   const abortRef = (0, import_react6.useRef)(null);
   const send = (0, import_react6.useCallback)(async (query, displayQuery) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     if (!query.trim() || loading) return;
     (_a = abortRef.current) == null ? void 0 : _a.abort();
     abortRef.current = new AbortController();
@@ -650,6 +689,7 @@ function useChat() {
       }
       if (signal.aborted) return;
       setSources((_b = res.sources) != null ? _b : []);
+      if (res.action) setLastAction(res.action);
       if (((_c = res.action) == null ? void 0 : _c.type) === "add_to_cart" || res.checkout) {
         if (typeof window !== "undefined") {
           window.dispatchEvent(new CustomEvent("huskel:cart_updated", { detail: res.checkout }));
@@ -660,12 +700,17 @@ function useChat() {
           window.dispatchEvent(new CustomEvent("huskel:trigger_checkout", { detail: res.checkout }));
         }
       }
+      if (((_e = res.action) == null ? void 0 : _e.type) === "awaiting_payment") {
+        if (typeof window !== "undefined") {
+          window.dispatchEvent(new CustomEvent("huskel:awaiting_payment", { detail: res.action }));
+        }
+      }
       if (res.checkout && client.onCheckout) {
         client.onCheckout(res.checkout);
       }
     } catch (e) {
       if (signal.aborted) return;
-      let msg = (_e = e == null ? void 0 : e.message) != null ? _e : "Chat request failed";
+      let msg = (_f = e == null ? void 0 : e.message) != null ? _f : "Chat request failed";
       try {
         const parsed = JSON.parse(msg);
         if (parsed && parsed.error) {
@@ -688,8 +733,9 @@ function useChat() {
     setSources([]);
     setError(null);
     setLoading(false);
+    setLastAction(null);
   }, []);
-  return { messages, sources, loading, error, send, reset };
+  return { messages, sources, loading, error, lastAction, send, reset };
 }
 
 // src/hooks/useCart.ts
@@ -728,8 +774,71 @@ function useCart() {
   return { cart, loading, fetchCart };
 }
 
-// src/components/SearchBar.tsx
+// src/hooks/usePaymentPolling.ts
 var import_react8 = require("react");
+function usePaymentPolling({
+  client,
+  merchantReference,
+  onSuccess,
+  onFailure,
+  intervalMs = 3e3,
+  timeoutMs = 3e5
+  // 5 minutes default
+}) {
+  const [status, setStatus] = (0, import_react8.useState)("IDLE");
+  const [error, setError] = (0, import_react8.useState)(null);
+  const onSuccessRef = (0, import_react8.useRef)(onSuccess);
+  const onFailureRef = (0, import_react8.useRef)(onFailure);
+  (0, import_react8.useEffect)(() => {
+    onSuccessRef.current = onSuccess;
+    onFailureRef.current = onFailure;
+  }, [onSuccess, onFailure]);
+  (0, import_react8.useEffect)(() => {
+    if (!merchantReference) {
+      setStatus("IDLE");
+      setError(null);
+      return;
+    }
+    setStatus("PENDING");
+    setError(null);
+    const startTime = Date.now();
+    let timerId = null;
+    async function checkStatus() {
+      try {
+        if (Date.now() - startTime >= timeoutMs) {
+          setStatus("FAILED");
+          setError("Payment session timed out");
+          if (onFailureRef.current) onFailureRef.current("Payment session timed out");
+          return;
+        }
+        const res = await client.getPaymentStatus(merchantReference);
+        if (res.status === "COMPLETED") {
+          setStatus("COMPLETED");
+          if (onSuccessRef.current) onSuccessRef.current();
+        } else if (res.status === "FAILED") {
+          setStatus("FAILED");
+          setError("Payment failed");
+          if (onFailureRef.current) onFailureRef.current("Payment failed");
+        } else {
+          timerId = setTimeout(checkStatus, intervalMs);
+        }
+      } catch (err) {
+        console.error("[Huskel Polling Error]", err);
+        timerId = setTimeout(checkStatus, intervalMs);
+      }
+    }
+    timerId = setTimeout(checkStatus, intervalMs);
+    return () => {
+      if (timerId) {
+        clearTimeout(timerId);
+      }
+    };
+  }, [client, merchantReference, intervalMs, timeoutMs]);
+  return { status, error };
+}
+
+// src/components/SearchBar.tsx
+var import_react9 = require("react");
 
 // src/utils/cn.ts
 var import_clsx = require("clsx");
@@ -747,7 +856,7 @@ var SearchIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { wi
 function SearchBar({
   placeholder = "Search products\u2026",
   limit = 10,
-  debounceMs = 80,
+  debounceMs = 300,
   onSelect,
   className,
   inputClassName,
@@ -756,25 +865,35 @@ function SearchBar({
   theme,
   classNames = {}
 }) {
-  const [query, setQuery] = (0, import_react8.useState)("");
-  const [open, setOpen] = (0, import_react8.useState)(false);
+  const [query, setQuery] = (0, import_react9.useState)("");
+  const [open, setOpen] = (0, import_react9.useState)(false);
+  const [isDebouncing, setIsDebouncing] = (0, import_react9.useState)(false);
   const { results, loading, search, clear } = useSearch();
-  const timer = (0, import_react8.useRef)();
-  const wrap = (0, import_react8.useRef)(null);
-  (0, import_react8.useEffect)(() => {
+  const client = useHuskelContext();
+  const timer = (0, import_react9.useRef)();
+  const wrap = (0, import_react9.useRef)(null);
+  const ignoreNextQueryChange = (0, import_react9.useRef)(false);
+  (0, import_react9.useEffect)(() => {
+    if (ignoreNextQueryChange.current) {
+      ignoreNextQueryChange.current = false;
+      return;
+    }
     clearTimeout(timer.current);
     if (!query.trim()) {
       clear();
       setOpen(false);
+      setIsDebouncing(false);
       return;
     }
     setOpen(true);
+    setIsDebouncing(true);
     timer.current = setTimeout(() => {
+      setIsDebouncing(false);
       search(query, limit);
     }, debounceMs);
     return () => clearTimeout(timer.current);
   }, [query]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const h = (e) => {
       if (wrap.current && !wrap.current.contains(e.target)) setOpen(false);
     };
@@ -782,10 +901,23 @@ function SearchBar({
     return () => document.removeEventListener("mousedown", h);
   }, []);
   const handleSelect = (r) => {
+    if (query.trim()) {
+      client.api.searchVector(query, 1).catch(() => {
+      });
+    }
+    ignoreNextQueryChange.current = true;
     setOpen(false);
     setQuery(r.product.name);
     onSelect == null ? void 0 : onSelect(r);
   };
+  const handleCommitSearch = () => {
+    if (!query.trim()) return;
+    client.api.searchVector(query, 1).catch(() => {
+    });
+    if (results.length > 0) {
+      handleSelect(results[0]);
+    }
+  };
   const showDrop = open && query.trim().length > 0;
   const customStyles = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, (theme == null ? void 0 : theme.primaryColor) && { "--hsk-primary": theme.primaryColor }), (theme == null ? void 0 : theme.backgroundColor) && { "--hsk-bg": theme.backgroundColor }), (theme == null ? void 0 : theme.textColor) && { "--hsk-text": theme.textColor }), (theme == null ? void 0 : theme.fontFamily) && { "--hsk-font": theme.fontFamily }), (theme == null ? void 0 : theme.borderRadius) && { "--hsk-border-radius": theme.borderRadius });
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: cn("hsk-sb-wrap", classNames.root, className), ref: wrap, style: customStyles, children: [
@@ -799,51 +931,73 @@ function SearchBar({
         placeholder,
         onChange: (e) => setQuery(e.target.value),
         onFocus: () => results.length > 0 && query.trim() && setOpen(true),
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            handleCommitSearch();
+          }
+        },
         autoComplete: "off",
         spellCheck: false
       }
     ),
     showDrop && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: cn("hsk-sb-drop", classNames.dropdown, dropdownClassName), style: { position: "absolute" }, children: [
-      loading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hsk-sb-loading-bar" }),
-      results.length === 0 && !loading && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hsk-sb-empty", children: [
-        "No results for \u201C",
-        query,
-        "\u201D"
-      ] }),
-      results.map((r, i) => {
-        var _a;
-        return renderResult ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          "div",
-          {
-            onClick: () => handleSelect(r),
-            className: "hsk-sb-fade",
-            style: { animationDelay: `${i * 18}ms` },
-            children: renderResult(r)
-          },
-          r.id
-        ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-          "div",
-          {
-            className: cn("hsk-sb-row hsk-sb-fade", classNames.row),
-            style: { animationDelay: `${i * 18}ms` },
-            onClick: () => handleSelect(r),
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hsk-sb-row-icon", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SearchIcon, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hsk-sb-row-body", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hsk-sb-row-title", children: r.product.name }),
-                (r.product.category || r.product.brand) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hsk-sb-row-sub", children: (_a = r.product.category) != null ? _a : r.product.brand })
-              ] })
-            ]
-          },
-          r.id
-        );
-      })
+      (loading || isDebouncing) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hsk-sb-loading-bar" }),
+      (loading || isDebouncing) && results.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hsk-sb-skeleton-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hsk-sb-skeleton-icon" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hsk-sb-row-body", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hsk-sb-skeleton-text1" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hsk-sb-skeleton-text2" })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hsk-sb-skeleton-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hsk-sb-skeleton-icon" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hsk-sb-row-body", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hsk-sb-skeleton-text1", style: { width: "45%" } }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hsk-sb-skeleton-text2", style: { width: "25%" } })
+          ] })
+        ] })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        results.length === 0 && !loading && !isDebouncing && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hsk-sb-empty", children: [
+          "No results for \u201C",
+          query,
+          "\u201D"
+        ] }),
+        results.map((r, i) => {
+          var _a;
+          return renderResult ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "div",
+            {
+              onClick: () => handleSelect(r),
+              className: "hsk-sb-fade",
+              style: { animationDelay: `${i * 18}ms` },
+              children: renderResult(r)
+            },
+            r.id
+          ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            "div",
+            {
+              className: cn("hsk-sb-row hsk-sb-fade", classNames.row),
+              style: { animationDelay: `${i * 18}ms` },
+              onClick: () => handleSelect(r),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hsk-sb-row-icon", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SearchIcon, {}) }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hsk-sb-row-body", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hsk-sb-row-title", children: r.product.name }),
+                  (r.product.category || r.product.brand) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hsk-sb-row-sub", children: (_a = r.product.category) != null ? _a : r.product.brand })
+                ] })
+              ]
+            },
+            r.id
+          );
+        })
+      ] })
     ] })
   ] });
 }
 
 // src/components/Sparkle.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/utils/markdown.tsx
@@ -975,14 +1129,14 @@ function SparkleModal({
 }) {
   var _a, _b, _c;
   const client = useHuskelContext();
-  const [fetchedProduct, setFetchedProduct] = (0, import_react9.useState)(null);
+  const [fetchedProduct, setFetchedProduct] = (0, import_react10.useState)(null);
   const displayProduct = initialProduct || fetchedProduct;
   const { results, loading: searchLoading, search } = useSearch();
   const { messages, sources, loading: chatLoading, error: chatError, send } = useChat();
-  const [chatInput, setChatInput] = (0, import_react9.useState)("");
-  const chatBottomRef = (0, import_react9.useRef)(null);
-  const chatTextareaRef = (0, import_react9.useRef)(null);
-  (0, import_react9.useEffect)(() => {
+  const [chatInput, setChatInput] = (0, import_react10.useState)("");
+  const chatBottomRef = (0, import_react10.useRef)(null);
+  const chatTextareaRef = (0, import_react10.useRef)(null);
+  (0, import_react10.useEffect)(() => {
     if (!initialProduct && !fetchedProduct) {
       client.api.searchVector(productName, 1).then((res) => {
         if (res.results && res.results.length > 0) {
@@ -992,17 +1146,17 @@ function SparkleModal({
     }
     search(productName, limit);
   }, [productName, initialProduct, fetchedProduct, client, limit, search]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (results.length > 0) onResult == null ? void 0 : onResult(results);
   }, [results, onResult]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const h = (e) => {
       if (e.key === "Escape") onClose();
     };
     document.addEventListener("keydown", h);
     return () => document.removeEventListener("keydown", h);
   }, [onClose]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     var _a2;
     (_a2 = chatBottomRef.current) == null ? void 0 : _a2.scrollIntoView({ behavior: "smooth" });
   }, [messages, chatLoading]);
@@ -1234,9 +1388,9 @@ function Sparkle({
   classNames = {},
   product
 }) {
-  const [open, setOpen] = (0, import_react9.useState)(false);
-  const [mounted, setMounted] = (0, import_react9.useState)(false);
-  (0, import_react9.useEffect)(() => {
+  const [open, setOpen] = (0, import_react10.useState)(false);
+  const [mounted, setMounted] = (0, import_react10.useState)(false);
+  (0, import_react10.useEffect)(() => {
     setMounted(true);
   }, []);
   const customStyles = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, (theme == null ? void 0 : theme.primaryColor) && { "--hsk-primary": theme.primaryColor }), (theme == null ? void 0 : theme.backgroundColor) && { "--hsk-bg": theme.backgroundColor }), (theme == null ? void 0 : theme.textColor) && { "--hsk-text": theme.textColor }), (theme == null ? void 0 : theme.fontFamily) && { "--hsk-font": theme.fontFamily }), (theme == null ? void 0 : theme.borderRadius) && { "--hsk-border-radius": theme.borderRadius });
@@ -1274,7 +1428,7 @@ function Sparkle({
 }
 
 // src/components/ChatWidget.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var SparkleIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" }) });
 var ArrowUpIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
@@ -1307,10 +1461,10 @@ function ChatWidget({
   onSelectSource
 }) {
   const { messages, sources, loading, error, send, reset } = useChat();
-  const [input, setInput] = (0, import_react10.useState)("");
-  const bottomRef = (0, import_react10.useRef)(null);
-  const textareaRef = (0, import_react10.useRef)(null);
-  (0, import_react10.useEffect)(() => {
+  const [input, setInput] = (0, import_react11.useState)("");
+  const bottomRef = (0, import_react11.useRef)(null);
+  const textareaRef = (0, import_react11.useRef)(null);
+  (0, import_react11.useEffect)(() => {
     var _a;
     (_a = bottomRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
   }, [messages, loading]);
@@ -1407,7 +1561,7 @@ function ChatWidget({
 }
 
 // src/components/AIChatButton.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_react_dom2 = require("react-dom");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var SparkleIcon3 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" }) });
@@ -1427,15 +1581,15 @@ var DEFAULT_CHIPS = [
   "Best laptop for students"
 ];
 function SourcesCarousel({ sources, defaultCurrency, onSelectSource }) {
-  const railRef = (0, import_react11.useRef)(null);
-  const [showNext, setShowNext] = (0, import_react11.useState)(false);
-  const measure = (0, import_react11.useCallback)(() => {
+  const railRef = (0, import_react12.useRef)(null);
+  const [showNext, setShowNext] = (0, import_react12.useState)(false);
+  const measure = (0, import_react12.useCallback)(() => {
     const el = railRef.current;
     if (!el) return;
     const atEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - 8;
     setShowNext(el.scrollWidth > el.clientWidth + 4 && !atEnd);
   }, []);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     measure();
     const el = railRef.current;
     if (!el) return;
@@ -1500,16 +1654,53 @@ function ChatModal({
   classNames = {}
 }) {
   var _a, _b;
-  const { messages, sources, loading, error, send, reset } = useChat();
-  const [input, setInput] = (0, import_react11.useState)("");
-  const [selectedProduct, setSelectedProduct] = (0, import_react11.useState)(null);
-  const bottomRef = (0, import_react11.useRef)(null);
-  const textareaRef = (0, import_react11.useRef)(null);
-  (0, import_react11.useEffect)(() => {
+  const client = useHuskelContext();
+  const { messages, sources, loading, error, lastAction, send, reset } = useChat();
+  const [input, setInput] = (0, import_react12.useState)("");
+  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 [merchantRef, setMerchantRef] = (0, import_react12.useState)(null);
+  const [paymentPhase, setPaymentPhase] = (0, import_react12.useState)("idle");
+  const { status: pollStatus } = usePaymentPolling({
+    client: client.api,
+    merchantReference: merchantRef,
+    onSuccess: () => {
+      setPaymentPhase("done");
+      setMerchantRef(null);
+    },
+    onFailure: () => {
+      setPaymentPhase("failed");
+      setMerchantRef(null);
+    }
+  });
+  (0, import_react12.useEffect)(() => {
+    var _a2;
+    if (!lastAction) return;
+    if (lastAction.type === "request_phone") {
+      setPaymentPhase("prompt_phone");
+    } else if (lastAction.type === "awaiting_payment") {
+      setMerchantRef((_a2 = lastAction.merchantReference) != null ? _a2 : null);
+      setPaymentPhase("awaiting");
+    }
+  }, [lastAction]);
+  const handlePhoneSubmit = async () => {
+    if (!phoneInput.trim()) return;
+    try {
+      const res = await client.api.initiatePayment(phoneInput);
+      setMerchantRef(res.merchantReference);
+      setPaymentPhase("awaiting");
+    } catch (e) {
+      console.error("[Huskel] initiatePayment error", e);
+      setPaymentPhase("failed");
+    }
+  };
+  (0, import_react12.useEffect)(() => {
     var _a2;
     (_a2 = bottomRef.current) == null ? void 0 : _a2.scrollIntoView({ behavior: "smooth" });
   }, [messages, loading, selectedProduct]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const h = (e) => {
       if (e.key === "Escape") onClose();
     };
@@ -1625,6 +1816,39 @@ function ChatModal({
             ] })
           ] }),
           error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-cb-error", children: error }),
+          paymentPhase === "prompt_phone" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-cb-payment-prompt", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-cb-payment-icon", children: "\u{1F4F1}" }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "hsk-cb-payment-label", children: "Enter your M-Pesa number to pay" }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "input",
+              {
+                type: "tel",
+                className: "hsk-cb-phone-input",
+                placeholder: "e.g. 0712 345 678",
+                value: phoneInput,
+                onChange: (e) => setPhoneInput(e.target.value),
+                onKeyDown: (e) => e.key === "Enter" && handlePhoneSubmit()
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { className: "hsk-cb-pay-submit", onClick: handlePhoneSubmit, children: "Send STK Push \u2192" })
+          ] }),
+          paymentPhase === "awaiting" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-cb-payment-prompt", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-cb-payment-icon", style: { fontSize: "2rem" }, children: "\u23F3" }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "hsk-cb-payment-label", style: { fontWeight: 600 }, children: "Check your phone" }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { style: { fontSize: "0.8rem", opacity: 0.6 }, children: "An M-Pesa STK push has been sent. Enter your PIN to complete payment." })
+          ] }),
+          paymentPhase === "done" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-cb-payment-prompt", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-cb-payment-icon", style: { color: "#22c55e", fontSize: "2rem" }, children: "\u2705" }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "hsk-cb-payment-label", children: "Payment complete! Thank you." })
+          ] }),
+          paymentPhase === "failed" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-cb-payment-prompt", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-cb-payment-icon", style: { color: "#ef4444", fontSize: "2rem" }, children: "\u274C" }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "hsk-cb-payment-label", children: "Payment failed or timed out." }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { className: "hsk-cb-pay-submit", onClick: () => {
+              setPaymentPhase("idle");
+              setMerchantRef(null);
+            }, children: "Try again" })
+          ] }),
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref: bottomRef, style: { height: 1 } })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-cb-input-wrap", children: [
@@ -1673,9 +1897,9 @@ function AIChatButton({
   theme,
   classNames = {}
 }) {
-  const [open, setOpen] = (0, import_react11.useState)(false);
-  const [mounted, setMounted] = (0, import_react11.useState)(false);
-  (0, import_react11.useEffect)(() => {
+  const [open, setOpen] = (0, import_react12.useState)(false);
+  const [mounted, setMounted] = (0, import_react12.useState)(false);
+  (0, import_react12.useEffect)(() => {
     setMounted(true);
   }, []);
   const customStyles = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, (theme == null ? void 0 : theme.primaryColor) && { "--hsk-primary": theme.primaryColor }), (theme == null ? void 0 : theme.backgroundColor) && { "--hsk-bg": theme.backgroundColor }), (theme == null ? void 0 : theme.textColor) && { "--hsk-text": theme.textColor }), (theme == null ? void 0 : theme.fontFamily) && { "--hsk-font": theme.fontFamily }), (theme == null ? void 0 : theme.borderRadius) && { "--hsk-border-radius": theme.borderRadius });
@@ -1723,11 +1947,11 @@ function CartBadge({ className }) {
 }
 
 // src/components/CartDrawer.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_react_dom4 = require("react-dom");
 
 // src/components/CheckoutModal.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_react_dom3 = require("react-dom");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function CheckoutModal({
@@ -1739,11 +1963,11 @@ function CheckoutModal({
   var _a, _b, _c, _d;
   const { cart, loading: cartLoading } = useCart();
   const client = useHuskelContext();
-  const [config, setConfig] = (0, import_react12.useState)(null);
-  const [loading, setLoading] = (0, import_react12.useState)(true);
-  const [checkingOut, setCheckingOut] = (0, import_react12.useState)(false);
-  const [paymentSuccess, setPaymentSuccess] = (0, import_react12.useState)(false);
-  (0, import_react12.useEffect)(() => {
+  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);
+  (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]);
   const handlePay = async (method) => {
@@ -1845,11 +2069,11 @@ function CartDrawer({
   theme
 }) {
   const { cart, loading } = useCart();
-  const [open, setOpen] = (0, import_react13.useState)(false);
-  const [showCheckout, setShowCheckout] = (0, import_react13.useState)(false);
-  const [mounted, setMounted] = (0, import_react13.useState)(false);
+  const [open, setOpen] = (0, import_react14.useState)(false);
+  const [showCheckout, setShowCheckout] = (0, import_react14.useState)(false);
+  const [mounted, setMounted] = (0, import_react14.useState)(false);
   const client = useHuskelContext();
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     setMounted(true);
     const handleTriggerCheckout = () => {
       setShowCheckout(true);
@@ -1860,7 +2084,7 @@ function CartDrawer({
       window.removeEventListener("huskel:trigger_checkout", handleTriggerCheckout);
     };
   }, []);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (open) {
       document.body.style.overflow = "hidden";
     } else {
@@ -1979,8 +2203,10 @@ function CartDrawer({
   useCart,
   useChat,
   useHuskel,
+  useHuskelContext,
   useIngest,
   usePageIngest,
+  usePaymentPolling,
   useSearch
 });
 //# sourceMappingURL=index.js.map