304 lines
13 KiB
TypeScript
304 lines
13 KiB
TypeScript
import React, { Component, useState, useEffect } from 'react';
|
|
import { View, Text, TextInput, TouchableOpacity, StyleSheet, ActivityIndicator } from 'react-native';
|
|
import { WalletType, FreechargePersonalBindResult, MobikwikPersonalBindResult, PaytmPersonalBindResult, PhonePePersonalBindResult, PhonePeBusinessBindResult, BharatPeBusinessBindResult, PaytmBusinessBindResult } from 'rnwalletman';
|
|
import { OTPBindUI } from './OTPBindUI';
|
|
|
|
export class FreeChargeBind extends Component<{
|
|
onRequestOTP: (walletType: WalletType, params: any) => Promise<any>;
|
|
onVerifyOTP: (walletType: WalletType, params: any) => Promise<any>;
|
|
onSuccess: (result: FreechargePersonalBindResult) => void;
|
|
onError: (error: string) => void;
|
|
isDebug: boolean;
|
|
initialMobile?: string;
|
|
}> {
|
|
render() {
|
|
return (
|
|
<OTPBindUI
|
|
walletType={WalletType.FREECHARGE_PERSONAL}
|
|
title="Bind Freecharge"
|
|
otpLength={4}
|
|
onRequestOTP={this.props.onRequestOTP}
|
|
onVerifyOTP={this.props.onVerifyOTP}
|
|
onSuccess={this.props.onSuccess}
|
|
onError={this.props.onError}
|
|
isDebug={this.props.isDebug}
|
|
initialMobile={this.props.initialMobile}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
export class MobikwikOTPBind extends Component<{
|
|
onRequestOTP: (walletType: WalletType, params: any) => Promise<any>;
|
|
onVerifyOTP: (walletType: WalletType, params: any) => Promise<any>;
|
|
onSuccess: (result: MobikwikPersonalBindResult) => void;
|
|
onError: (error: string) => void;
|
|
isDebug: boolean;
|
|
initialMobile?: string;
|
|
}> {
|
|
render() {
|
|
return (
|
|
<OTPBindUI
|
|
walletType={WalletType.MOBIKWIK_PERSONAL}
|
|
title="Bind Mobikwik"
|
|
otpLength={6}
|
|
onRequestOTP={this.props.onRequestOTP}
|
|
onVerifyOTP={this.props.onVerifyOTP}
|
|
onSuccess={this.props.onSuccess}
|
|
onError={this.props.onError}
|
|
isDebug={this.props.isDebug}
|
|
initialMobile={this.props.initialMobile}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
export class PayTmPersonalOTPBind extends Component<{
|
|
onRequestOTP: (walletType: WalletType, params: any) => Promise<any>;
|
|
onVerifyOTP: (walletType: WalletType, params: any) => Promise<any>;
|
|
onSuccess: (result: PaytmPersonalBindResult) => void;
|
|
onError: (error: string) => void;
|
|
isDebug: boolean;
|
|
initialMobile?: string;
|
|
}> {
|
|
render() {
|
|
return (
|
|
<OTPBindUI
|
|
walletType={WalletType.PAYTM_PERSONAL}
|
|
title="Bind Paytm"
|
|
otpLength={6}
|
|
onRequestOTP={this.props.onRequestOTP}
|
|
onVerifyOTP={this.props.onVerifyOTP}
|
|
onSuccess={this.props.onSuccess}
|
|
onError={this.props.onError}
|
|
isDebug={this.props.isDebug}
|
|
initialMobile={this.props.initialMobile}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
export class BharatPeBusinessOTPBind extends Component<{
|
|
onRequestOTP: (walletType: WalletType, params: any) => Promise<any>;
|
|
onVerifyOTP: (walletType: WalletType, params: any) => Promise<any>;
|
|
onSuccess: (result: BharatPeBusinessBindResult) => void;
|
|
onError: (error: string) => void;
|
|
isDebug: boolean;
|
|
initialMobile?: string;
|
|
}> {
|
|
render() {
|
|
return (
|
|
<OTPBindUI
|
|
walletType={WalletType.BHARATPE_BUSINESS}
|
|
title="Bind BharatPe"
|
|
otpLength={4}
|
|
onRequestOTP={this.props.onRequestOTP}
|
|
onVerifyOTP={this.props.onVerifyOTP}
|
|
onSuccess={this.props.onSuccess}
|
|
onError={this.props.onError}
|
|
isDebug={this.props.isDebug}
|
|
initialMobile={this.props.initialMobile}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
export class PaytmBusinessOTPBind extends Component<{
|
|
onRequestOTP: (walletType: WalletType, params: any) => Promise<any>;
|
|
onVerifyOTP: (walletType: WalletType, params: any) => Promise<any>;
|
|
onSuccess: (result: PaytmBusinessBindResult) => void;
|
|
onError: (error: string) => void;
|
|
isDebug: boolean;
|
|
initialMobile?: string;
|
|
}> {
|
|
render() {
|
|
return (
|
|
<PaytmBusinessForm
|
|
onRequestOTP={this.props.onRequestOTP}
|
|
onVerifyOTP={this.props.onVerifyOTP}
|
|
onSuccess={this.props.onSuccess}
|
|
onError={this.props.onError}
|
|
isDebug={this.props.isDebug}
|
|
initialMobile={this.props.initialMobile}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
function PaytmBusinessForm({ onRequestOTP, onVerifyOTP, onSuccess, onError, isDebug, initialMobile = '' }: {
|
|
onRequestOTP: (walletType: WalletType, params: any) => Promise<any>;
|
|
onVerifyOTP: (walletType: WalletType, params: any) => Promise<any>;
|
|
onSuccess: (result: PaytmBusinessBindResult) => void;
|
|
onError: (error: string) => void;
|
|
isDebug: boolean;
|
|
initialMobile?: string;
|
|
}) {
|
|
const [step, setStep] = useState<'credentials' | 'otp'>('credentials');
|
|
const [mobile, setMobile] = useState(initialMobile);
|
|
const [otp, setOtp] = useState('');
|
|
const [sessionToken, setSessionToken] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
const [errorMsg, setErrorMsg] = useState('');
|
|
|
|
useEffect(() => {
|
|
if (initialMobile) setMobile(initialMobile);
|
|
}, [initialMobile]);
|
|
|
|
const log = (...args: any[]) => { if (isDebug) console.log('[PaytmBusiness]', ...args); };
|
|
|
|
const handleRequestOTP = async () => {
|
|
if (!mobile || mobile.length !== 10) { setErrorMsg('Please enter a 10-digit mobile number'); return; }
|
|
setLoading(true); setErrorMsg('');
|
|
try {
|
|
const res = await onRequestOTP(WalletType.PAYTM_BUSINESS, { mobile });
|
|
log('RequestOTP:', res);
|
|
if (res.success) { setSessionToken(res.data?.sessionToken || ''); setStep('otp'); }
|
|
else { const msg = res.message || 'Failed to send OTP'; setErrorMsg(msg); onError(msg); }
|
|
} catch (e) {
|
|
const msg = e instanceof Error ? e.message : 'Failed to send OTP';
|
|
setErrorMsg(msg); onError(msg);
|
|
} finally { setLoading(false); }
|
|
};
|
|
|
|
const handleVerifyOTP = async () => {
|
|
if (!otp || otp.length !== 6) { setErrorMsg('Please enter the 6-digit verification code'); return; }
|
|
setLoading(true); setErrorMsg('');
|
|
try {
|
|
const res = await onVerifyOTP(WalletType.PAYTM_BUSINESS, { mobile, otp, sessionToken });
|
|
log('VerifyOTP:', res);
|
|
if (res.success) {
|
|
onSuccess({ type: WalletType.PAYTM_BUSINESS, success: true, cookie: res.data?.cookie || '', xCsrfToken: res.data?.xCsrfToken || '', qrData: res.data?.qrData || [] });
|
|
} else {
|
|
setErrorMsg(res.message || 'Failed to verify OTP');
|
|
setStep('otp');
|
|
}
|
|
} catch (e) {
|
|
setErrorMsg(e instanceof Error ? e.message : 'Failed to verify OTP');
|
|
setStep('otp');
|
|
} finally { setLoading(false); }
|
|
};
|
|
|
|
|
|
return (
|
|
<View style={ptStyles.container}>
|
|
<View style={ptStyles.form}>
|
|
<Text style={ptStyles.title}>Bind Paytm Business</Text>
|
|
{errorMsg ? <Text style={ptStyles.errorText}>{errorMsg}</Text> : null}
|
|
{step === 'credentials' && (
|
|
<>
|
|
<TextInput style={ptStyles.input} placeholder="Mobile number" placeholderTextColor="#999" keyboardType="phone-pad" maxLength={10} value={mobile} onChangeText={t => { setMobile(t); setErrorMsg(''); }} editable={!loading} />
|
|
<TouchableOpacity style={[ptStyles.button, loading && ptStyles.buttonDisabled]} onPress={handleRequestOTP} disabled={loading}>
|
|
{loading ? <ActivityIndicator color="#fff" /> : <Text style={ptStyles.buttonText}>Send OTP</Text>}
|
|
</TouchableOpacity>
|
|
</>
|
|
)}
|
|
{step === 'otp' && (
|
|
<>
|
|
<Text style={ptStyles.hint}>OTP sent to {mobile}</Text>
|
|
<TextInput style={ptStyles.input} placeholder="6-digit code" placeholderTextColor="#999" keyboardType="number-pad" maxLength={6} value={otp} onChangeText={t => { setOtp(t); setErrorMsg(''); }} editable={!loading} />
|
|
<TouchableOpacity style={[ptStyles.button, loading && ptStyles.buttonDisabled]} onPress={handleVerifyOTP} disabled={loading}>
|
|
{loading ? <ActivityIndicator color="#fff" /> : <Text style={ptStyles.buttonText}>Verify & Bind</Text>}
|
|
</TouchableOpacity>
|
|
<TouchableOpacity style={ptStyles.linkButton} onPress={() => setStep('credentials')} disabled={loading}>
|
|
<Text style={ptStyles.linkText}>Change mobile number</Text>
|
|
</TouchableOpacity>
|
|
</>
|
|
)}
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const ptStyles = StyleSheet.create({
|
|
container: { flex: 1, backgroundColor: 'rgba(0,0,0,0.8)', justifyContent: 'center', alignItems: 'center' },
|
|
form: { width: '92%', backgroundColor: '#fff', borderRadius: 20, padding: 28 },
|
|
title: { fontSize: 22, fontWeight: '700', textAlign: 'center', color: '#111', marginBottom: 24 },
|
|
input: { borderWidth: 1.5, borderColor: '#e0e0e0', borderRadius: 10, paddingHorizontal: 14, paddingVertical: 14, fontSize: 17, color: '#111', marginBottom: 18, backgroundColor: '#fafafa' },
|
|
errorText: { color: '#ff3b30', fontSize: 13, marginBottom: 12, textAlign: 'center' },
|
|
button: { backgroundColor: '#007AFF', borderRadius: 12, paddingVertical: 16, alignItems: 'center', marginTop: 4 },
|
|
buttonDisabled: { backgroundColor: '#a0c4ff' },
|
|
buttonText: { color: '#fff', fontSize: 17, fontWeight: '600' },
|
|
linkButton: { marginTop: 16, alignItems: 'center' },
|
|
linkText: { color: '#007AFF', fontSize: 14 },
|
|
hint: { fontSize: 14, color: '#555', marginBottom: 18, textAlign: 'center' },
|
|
});
|
|
|
|
export class PhonePeBusinessOTPBind extends Component<{
|
|
onRequestOTP: (walletType: WalletType, params: any) => Promise<any>;
|
|
onVerifyOTP: (walletType: WalletType, params: any) => Promise<any>;
|
|
onSuccess: (result: PhonePeBusinessBindResult) => void;
|
|
onError: (error: string) => void;
|
|
isDebug: boolean;
|
|
initialMobile?: string;
|
|
}> {
|
|
render() {
|
|
return (
|
|
<OTPBindUI
|
|
walletType={WalletType.PHONEPE_BUSINESS}
|
|
title="Bind PhonePe Business"
|
|
otpLength={5}
|
|
onRequestOTP={this.props.onRequestOTP}
|
|
onVerifyOTP={this.props.onVerifyOTP}
|
|
onSuccess={this.props.onSuccess}
|
|
onError={this.props.onError}
|
|
isDebug={this.props.isDebug}
|
|
initialMobile={this.props.initialMobile}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
export class PhonePePersonalOTPBind extends Component<{
|
|
onRequestOTP: (walletType: WalletType, params: any) => Promise<any>;
|
|
onVerifyOTP: (walletType: WalletType, params: any) => Promise<any>;
|
|
onSuccess: (result: PhonePePersonalBindResult) => void;
|
|
onError: (error: string) => void;
|
|
isDebug: boolean;
|
|
initialMobile?: string;
|
|
}> {
|
|
render() {
|
|
return (
|
|
<OTPBindUI
|
|
walletType={WalletType.PHONEPE_PERSONAL}
|
|
title="Bind PhonePe"
|
|
otpLength={5}
|
|
onRequestOTP={this.props.onRequestOTP}
|
|
onVerifyOTP={this.props.onVerifyOTP}
|
|
onSuccess={this.props.onSuccess}
|
|
onError={this.props.onError}
|
|
isDebug={this.props.isDebug}
|
|
initialMobile={this.props.initialMobile}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
export class AmazonPayOTPBind extends Component<{
|
|
onRequestOTP: (walletType: WalletType, params: any) => Promise<any>;
|
|
onVerifyOTP: (walletType: WalletType, params: any) => Promise<any>;
|
|
onSuccess: (result: any) => void;
|
|
onError: (error: string) => void;
|
|
isDebug: boolean;
|
|
initialMobile?: string;
|
|
}> {
|
|
render() {
|
|
return (
|
|
<OTPBindUI
|
|
walletType={WalletType.AMAZONPAY_PERSONAL}
|
|
title="Bind Amazon Pay"
|
|
otpLength={6}
|
|
passwordBeforeOtp
|
|
passwordLabel="Amazon password"
|
|
passwordPlaceholder="Enter Amazon account password"
|
|
passwordRequiredMsg="Please enter your Amazon account password"
|
|
onRequestOTP={this.props.onRequestOTP}
|
|
onVerifyOTP={this.props.onVerifyOTP}
|
|
onSuccess={this.props.onSuccess}
|
|
onError={this.props.onError}
|
|
isDebug={this.props.isDebug}
|
|
initialMobile={this.props.initialMobile}
|
|
/>
|
|
);
|
|
}
|
|
}
|