@paymanai/payman-ask-sdk 2.0.0 → 2.0.1

package/dist/index.mjs

@@ -6,7 +6,7 @@ import { twMerge } from 'tailwind-merge';
 import * as Sentry from '@sentry/react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { ArrowDown, Pencil, X, RotateCcw, Plus, ImagePlus, Paperclip, Mic, ArrowUp, Check, AlertCircle, Copy, WifiOff, SearchCode, ShieldCheck, Loader2, PanelBottomOpen, Download, ChevronRight, PanelLeftClose, PanelLeftOpen, ImageOff, Eye, MessageSquare, Menu, MessageCircle, ChevronDown } from 'lucide-react';
+import { ArrowDown, Pencil, X, RotateCcw, Plus, ImagePlus, Paperclip, Mic, ArrowUp, Check, AlertCircle, Copy, WifiOff, SearchCode, ShieldCheck, PanelBottomOpen, Download, Loader2, ChevronRight, PanelLeftClose, PanelLeftOpen, ImageOff, Eye, MessageSquare, Menu, MessageCircle, ChevronDown } from 'lucide-react';
 import { createPortal } from 'react-dom';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
@@ -1538,6 +1538,7 @@ function VerificationCardV2({
   messageId,
   action,
   status,
+  clearOtpTrigger = 0,
   onApprove,
   onReject,
   onResend
@@ -1545,33 +1546,41 @@ function VerificationCardV2({
   const [otp, setOtp] = useState("");
   const [otpErrored, setOtpErrored] = useState(false);
   const [resendSec, setResendSec] = useState(0);
+  const [localPending, setLocalPending] = useState(false);
   const lastSubmittedRef = useRef(null);
   const resendTimerRef = useRef(void 0);
   useEffect(() => {
-    if (status !== "error") {
-      setOtpErrored(false);
-      return;
-    }
+    if (clearOtpTrigger <= 0) return;
     setOtpErrored(true);
     const t = window.setTimeout(() => {
       setOtp("");
       setOtpErrored(false);
+      setLocalPending(false);
       lastSubmittedRef.current = null;
     }, 600);
     return () => window.clearTimeout(t);
-  }, [status]);
+  }, [clearOtpTrigger]);
   useEffect(() => {
     if (otp.length < OTP_LEN) {
       lastSubmittedRef.current = null;
     }
   }, [otp]);
+  useEffect(() => {
+    if (status !== "pending") {
+      setLocalPending(false);
+    }
+  }, [status]);
   useEffect(() => {
     if (otp.length !== OTP_LEN || !/^\d+$/.test(otp) || status !== "pending") {
       return;
     }
     if (lastSubmittedRef.current === otp) return;
     lastSubmittedRef.current = otp;
-    void onApprove(messageId, otp);
+    setLocalPending(true);
+    void onApprove(messageId, otp).catch(() => {
+      lastSubmittedRef.current = null;
+      setLocalPending(false);
+    });
   }, [messageId, onApprove, otp, status]);
   useEffect(() => {
     return () => {
@@ -1599,23 +1608,25 @@ function VerificationCardV2({
     }, 1e3);
   }, []);
   const handleResend = useCallback(async () => {
-    if (resendSec > 0 || status === "verifying") return;
-    await onResend(messageId);
-    startResendCooldown();
-  }, [messageId, onResend, resendSec, startResendCooldown, status]);
+    if (resendSec > 0 || status === "verifying" || localPending) return;
+    setLocalPending(true);
+    try {
+      await onResend(messageId);
+      startResendCooldown();
+    } finally {
+      setLocalPending(false);
+    }
+  }, [localPending, messageId, onResend, resendSec, startResendCooldown, status]);
   const handleCancel = useCallback(async () => {
-    await onReject(messageId);
-  }, [messageId, onReject]);
-  useCallback(async () => {
-    if (otp.length !== OTP_LEN || !/^\d+$/.test(otp) || status !== "pending") {
-      return;
+    if (status === "verifying" || localPending) return;
+    setLocalPending(true);
+    try {
+      await onReject(messageId);
+    } finally {
+      setLocalPending(false);
     }
-    if (lastSubmittedRef.current === otp) return;
-    lastSubmittedRef.current = otp;
-    await onApprove(messageId, otp);
-  }, [messageId, onApprove, otp, status]);
-  const busy = status === "verifying";
-  status === "pending" && otp.length === OTP_LEN && /^\d+$/.test(otp);
+  }, [localPending, messageId, onReject, status]);
+  const busy = status === "verifying" || localPending;
   if (status === "approved" || status === "rejected") {
     return null;
   }
@@ -1627,61 +1638,53 @@ function VerificationCardV2({
       animate: { opacity: 1, y: 0 },
       transition: { type: "spring", stiffness: 320, damping: 28 },
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "payman-v2-verification-card", children: [
-          /* @__PURE__ */ jsxs("div", { className: "payman-v2-verification-header", children: [
-            /* @__PURE__ */ jsxs("div", { className: "payman-v2-verification-header-row", children: [
-              /* @__PURE__ */ jsx(
-                ShieldCheck,
-                {
-                  className: "payman-v2-verification-icon",
-                  size: 18,
-                  strokeWidth: 1.75,
-                  "aria-hidden": true
-                }
-              ),
-              /* @__PURE__ */ jsx("p", { className: "payman-v2-verification-title", children: "Verify" }),
-              action.amount != null ? /* @__PURE__ */ jsx("span", { className: "payman-v2-verification-amount", children: action.amount }) : action.payeeName ? /* @__PURE__ */ jsx("span", { className: "payman-v2-verification-payee", children: action.payeeName }) : null
-            ] }),
-            /* @__PURE__ */ jsx("p", { className: "payman-v2-verification-description", children: "Enter the 6-digit code sent to your phone" }),
-            /* @__PURE__ */ jsx(
-              OtpInputV2,
-              {
-                value: otp,
-                onChange: setOtp,
-                maxLength: OTP_LEN,
-                disabled: busy,
-                error: otpErrored
-              }
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "payman-v2-verification-card",
+              busy && "payman-v2-verification-card-busy"
             ),
-            busy ? /* @__PURE__ */ jsxs("div", { className: "payman-v2-verification-submitting", children: [
-              /* @__PURE__ */ jsx(
-                motion.span,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "payman-v2-verification-header", children: [
+                /* @__PURE__ */ jsxs("div", { className: "payman-v2-verification-header-row", children: [
+                  /* @__PURE__ */ jsx(
+                    ShieldCheck,
+                    {
+                      className: "payman-v2-verification-icon",
+                      size: 18,
+                      strokeWidth: 1.75,
+                      "aria-hidden": true
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("p", { className: "payman-v2-verification-title", children: "Verify" }),
+                  action.amount != null ? /* @__PURE__ */ jsx("span", { className: "payman-v2-verification-amount", children: action.amount }) : action.payeeName ? /* @__PURE__ */ jsx("span", { className: "payman-v2-verification-payee", children: action.payeeName }) : null
+                ] }),
+                /* @__PURE__ */ jsx("p", { className: "payman-v2-verification-description", children: "Enter the 6-digit code sent to your phone" }),
+                /* @__PURE__ */ jsx(
+                  OtpInputV2,
+                  {
+                    value: otp,
+                    onChange: setOtp,
+                    maxLength: OTP_LEN,
+                    disabled: busy,
+                    error: otpErrored
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "payman-v2-verification-actions", children: /* @__PURE__ */ jsx(
+                "button",
                 {
-                  "aria-hidden": true,
-                  style: { display: "inline-flex" },
-                  animate: { rotate: 360 },
-                  transition: {
-                    repeat: Infinity,
-                    duration: 0.7,
-                    ease: "linear"
-                  },
-                  children: /* @__PURE__ */ jsx(Loader2, { size: 14, strokeWidth: 2 })
+                  type: "button",
+                  className: "payman-v2-verification-cancel-btn",
+                  disabled: busy,
+                  onClick: () => void handleCancel(),
+                  children: "Cancel"
                 }
-              ),
-              /* @__PURE__ */ jsx("span", { className: "payman-v2-verification-submitting-text", children: "Verifying..." })
-            ] }) : null
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "payman-v2-verification-actions", children: /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: "payman-v2-verification-cancel-btn",
-              disabled: busy,
-              onClick: () => void handleCancel(),
-              children: "Cancel"
-            }
-          ) })
-        ] }),
+              ) })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx(
           "button",
           {
@@ -1874,6 +1877,7 @@ var MessageListV2 = forwardRef(
                     messageId: userAction.messageId,
                     action: userAction.action,
                     status: userAction.status,
+                    clearOtpTrigger: userAction.clearOtpTrigger,
                     onApprove: onApproveAction ?? (async () => {
                     }),
                     onReject: onRejectAction ?? (async () => {
@@ -3682,6 +3686,14 @@ var PaymanChat = forwardRef(function PaymanChat2({
     }),
     [performResetSession, clearMessages, cancelStream, getSessionId, getMessages, loadSession]
   );
+  const [v2VerificationPending, setV2VerificationPending] = useState(false);
+  useEffect(() => {
+    setV2VerificationPending(false);
+  }, [
+    userActionState.request?.userActionId,
+    userActionState.clearOtpTrigger,
+    userActionState.result
+  ]);
   if (availability.state === "disabled") {
     return /* @__PURE__ */ jsx(PaymanChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
       "div",
@@ -3704,7 +3716,8 @@ var PaymanChat = forwardRef(function PaymanChat2({
     if (!userActionState.request) return null;
     const req = userActionState.request;
     let status = "pending";
-    if (userActionState.result === "approved") status = "approved";
+    if (v2VerificationPending) status = "verifying";
+    else if (userActionState.result === "approved") status = "approved";
     else if (userActionState.result === "rejected") status = "rejected";
     return {
       messageId: `ua-${req.userActionId || Date.now()}`,
@@ -3714,9 +3727,15 @@ var PaymanChat = forwardRef(function PaymanChat2({
         amount: req.metadata?.amount,
         payeeName: req.metadata?.payeeName
       },
-      status
+      status,
+      clearOtpTrigger: userActionState.clearOtpTrigger
     };
-  }, [userActionState.request, userActionState.result]);
+  }, [
+    userActionState.request,
+    userActionState.result,
+    userActionState.clearOtpTrigger,
+    v2VerificationPending
+  ]);
   const hideV2SendDuringVerification = v2UserAction != null && v2UserAction.status !== "approved" && v2UserAction.status !== "rejected";
   const handleV2Send = (text) => {
     if (isRecording) stopRecording();
@@ -3878,10 +3897,22 @@ var PaymanChat = forwardRef(function PaymanChat2({
                   retryDisabled: isWaitingForResponse,
                   userAction: v2UserAction,
                   onApproveAction: async (_id, otp) => {
-                    await approveUserAction(otp);
+                    setV2VerificationPending(true);
+                    try {
+                      await approveUserAction(otp);
+                    } catch (error) {
+                      setV2VerificationPending(false);
+                      throw error;
+                    }
                   },
                   onRejectAction: async () => {
-                    await rejectUserAction();
+                    setV2VerificationPending(true);
+                    try {
+                      await rejectUserAction();
+                    } catch (error) {
+                      setV2VerificationPending(false);
+                      throw error;
+                    }
                   },
                   onResendAction: async () => {
                     await resendOtp();