From affa120dd7bea5bc010e207025fc058a4dc84804 Mon Sep 17 00:00:00 2001 From: rizo8107 Date: Thu, 30 Oct 2025 15:50:05 +0530 Subject: [PATCH 1/3] feat: add OTP resend and WhatsApp support features - Added resend OTP functionality with reCAPTCHA validation to handle failed OTP deliveries - Implemented WhatsApp support button that opens chat with pre-filled message for OTP issues - Added new translations for resend OTP and support features in English and Tamil - Added support WhatsApp number constant for centralized management - Enhanced UI with resend and support options displayed below verification button --- src/components/OTPVerification.tsx | 70 ++++++++++++++++++++++++++++++ src/utils/translations.ts | 6 +++ 2 files changed, 76 insertions(+) diff --git a/src/components/OTPVerification.tsx b/src/components/OTPVerification.tsx index c337418..d8b0408 100644 --- a/src/components/OTPVerification.tsx +++ b/src/components/OTPVerification.tsx @@ -33,6 +33,8 @@ export default function OTPVerification({ onVerificationSuccess }: OTPVerificati const [recaptchaReady, setRecaptchaReady] = useState(false); const RECAPTCHA_SITE_KEY = '6LdT9uQrAAAAAPOHRKp9XUdI82kBXGgFIodvbDIz'; + const SUPPORT_WHATSAPP = '917200624477'; + const t = translations[language]; // Persist language selection @@ -116,6 +118,52 @@ export default function OTPVerification({ onVerificationSuccess }: OTPVerificati } }; + // Resend OTP handler + const handleResendOTP = async () => { + if (!phoneNumber || phoneNumber.replace(/\D/g, '').length !== 10) { + setError(language === 'en' ? 'Please enter a valid 10-digit phone number' : 'தயவுசெய்து சரியான 10 இலக்க தொலைபேசி எண்ணை உள்ளிடுக'); + return; + } + setError(''); + setIsSendingOTP(true); + try { + let token = ''; + // @ts-expect-error grecaptcha is injected by the script + if (recaptchaReady && window.grecaptcha) { + token = await new Promise((resolve) => { + // @ts-expect-error grecaptcha global + window.grecaptcha.ready(() => { + // @ts-expect-error grecaptcha global + window.grecaptcha + .execute(RECAPTCHA_SITE_KEY, { action: 'resend_otp' }) + .then((t: string) => resolve(t)) + .catch((err: unknown) => { + console.error('reCAPTCHA execute failed:', err); + resolve(''); + }); + }); + }); + } + if (!token) { + setError('reCAPTCHA validation failed. Please try again.'); + setIsSendingOTP(false); + return; + } + const result = await whatsappService.sendOTP(phoneNumber); + if (result.success) { + setShowOTPInput(true); + if (result.otp) console.log('Demo OTP for testing (resend):', result.otp); + } else { + setError(result.error || 'Failed to send OTP'); + } + } catch (err) { + console.error('Error in handleResendOTP:', err); + setError('Network error. Please try again.'); + } finally { + setIsSendingOTP(false); + } + }; + const handleVerifyOTP = async (e: React.FormEvent) => { e.preventDefault(); setError(''); @@ -271,6 +319,28 @@ export default function OTPVerification({ onVerificationSuccess }: OTPVerificati > {isVerifying ? 'Verifying...' : 'Verify WhatsApp OTP'} + {/* Resend and Support */} +
+
{t.didntReceiveOTP}
+
+ + + {t.messageUsOnWhatsApp} + +
+
{/* Resend and Support */} -
-
{t.didntReceiveOTP}
+
+
{t.didntReceiveOTP}
{t.messageUsOnWhatsApp} diff --git a/src/utils/translations.ts b/src/utils/translations.ts index 9906ec4..761e356 100644 --- a/src/utils/translations.ts +++ b/src/utils/translations.ts @@ -14,7 +14,7 @@ export const translations = { verifyOTP: 'Verify OTP', verifying: 'Verifying...', changePhoneNumber: 'Change Phone Number', - didntReceiveOTP: "Didn't receive OTP?", + didntReceiveOTP: "Didn't get OTP?", resendOTP: 'Resend OTP', messageUsOnWhatsApp: 'Message us on WhatsApp', From acc223a10b0dd9644b31f7f5da95bb8f6b64e88b Mon Sep 17 00:00:00 2001 From: rizo8107 Date: Thu, 30 Oct 2025 16:04:26 +0530 Subject: [PATCH 3/3] feat: simplify OTP support flow and UI - Removed complex resend OTP functionality and associated code to streamline user experience - Redesigned OTP help section to use a single direct WhatsApp support link instead of multiple options - Updated help text to be more action-oriented and clearer for users - Added ExternalLink icon to visually indicate external WhatsApp link - Changed help link styling to use red accent color and hover underline for better visibility --- src/components/OTPVerification.tsx | 80 +++++------------------------- src/utils/translations.ts | 2 +- 2 files changed, 13 insertions(+), 69 deletions(-) diff --git a/src/components/OTPVerification.tsx b/src/components/OTPVerification.tsx index 0a9ccdf..8107526 100644 --- a/src/components/OTPVerification.tsx +++ b/src/components/OTPVerification.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import { Phone, ArrowRight, MessageCircle } from 'lucide-react'; +import { Phone, ArrowRight, MessageCircle, ExternalLink } from 'lucide-react'; import LanguageToggle from './LanguageToggle'; import TwoLeavesLogo from './TwoLeavesLogo'; import { translations, Language } from '../utils/translations'; @@ -118,51 +118,6 @@ export default function OTPVerification({ onVerificationSuccess }: OTPVerificati } }; - // Resend OTP handler - const handleResendOTP = async () => { - if (!phoneNumber || phoneNumber.replace(/\D/g, '').length !== 10) { - setError(language === 'en' ? 'Please enter a valid 10-digit phone number' : 'தயவுசெய்து சரியான 10 இலக்க தொலைபேசி எண்ணை உள்ளிடுக'); - return; - } - setError(''); - setIsSendingOTP(true); - try { - let token = ''; - // @ts-expect-error grecaptcha is injected by the script - if (recaptchaReady && window.grecaptcha) { - token = await new Promise((resolve) => { - // @ts-expect-error grecaptcha global - window.grecaptcha.ready(() => { - // @ts-expect-error grecaptcha global - window.grecaptcha - .execute(RECAPTCHA_SITE_KEY, { action: 'resend_otp' }) - .then((t: string) => resolve(t)) - .catch((err: unknown) => { - console.error('reCAPTCHA execute failed:', err); - resolve(''); - }); - }); - }); - } - if (!token) { - setError('reCAPTCHA validation failed. Please try again.'); - setIsSendingOTP(false); - return; - } - const result = await whatsappService.sendOTP(phoneNumber); - if (result.success) { - setShowOTPInput(true); - if (result.otp) console.log('Demo OTP for testing (resend):', result.otp); - } else { - setError(result.error || 'Failed to send OTP'); - } - } catch (err) { - console.error('Error in handleResendOTP:', err); - setError('Network error. Please try again.'); - } finally { - setIsSendingOTP(false); - } - }; const handleVerifyOTP = async (e: React.FormEvent) => { e.preventDefault(); @@ -319,28 +274,17 @@ export default function OTPVerification({ onVerificationSuccess }: OTPVerificati > {isVerifying ? 'Verifying...' : 'Verify WhatsApp OTP'} - {/* Resend and Support */} -
-
{t.didntReceiveOTP}
-
- - - {t.messageUsOnWhatsApp} - -
+ {/* OTP help link */} +