@airxpay/sdk-ui 1.0.0

package/dist/components/steps/BankDetails.js

@@ -0,0 +1,562 @@
+"use strict";
+// components/steps/BankDetails.tsx
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_paper_1 = require("react-native-paper");
+const expo_linear_gradient_1 = require("expo-linear-gradient");
+const FileUploader_1 = __importDefault(require("../common/FileUploader"));
+const BankDetails = ({ initialData, mode, onNext, onBack, }) => {
+    const [formData, setFormData] = (0, react_1.useState)(initialData.bankDetails || {});
+    const [cancelledCheque, setCancelledCheque] = (0, react_1.useState)(initialData.bankDetails?.cancelledChequeUrl);
+    const [uploading, setUploading] = (0, react_1.useState)(false);
+    const [touched, setTouched] = (0, react_1.useState)({});
+    const [errors, setErrors] = (0, react_1.useState)({});
+    const [showAccountNumber, setShowAccountNumber] = (0, react_1.useState)(false);
+    const [formValid, setFormValid] = (0, react_1.useState)(false);
+    const validateIFSC = (ifsc) => {
+        const ifscRegex = /^[A-Z]{4}0[A-Z0-9]{6}$/;
+        return ifscRegex.test(ifsc);
+    };
+    const validateField = (field, value) => {
+        switch (field) {
+            case 'accountHolderName':
+                if (!value?.trim())
+                    return 'Account holder name is required';
+                if (value.length < 3)
+                    return 'Name must be at least 3 characters';
+                return undefined;
+            case 'bankName':
+                if (!value?.trim())
+                    return 'Bank name is required';
+                return undefined;
+            case 'accountNumber':
+                if (!value?.trim())
+                    return 'Account number is required';
+                if (!/^\d{9,18}$/.test(value.replace(/\s/g, ''))) {
+                    return 'Invalid account number';
+                }
+                return undefined;
+            case 'ifscCode':
+                if (!value?.trim())
+                    return 'IFSC code is required';
+                if (!validateIFSC(value.toUpperCase())) {
+                    return 'Invalid IFSC code';
+                }
+                return undefined;
+            case 'upiId':
+                if (value && !/^[\w.-]+@[\w.-]+$/.test(value)) {
+                    return 'Invalid UPI ID format';
+                }
+                return undefined;
+            default:
+                return undefined;
+        }
+    };
+    // Check form validity whenever formData, errors, or cancelledCheque changes
+    (0, react_1.useEffect)(() => {
+        const requiredFields = [
+            'accountHolderName',
+            'bankName',
+            'accountNumber',
+            'ifscCode',
+        ];
+        // Check if all required fields have values
+        const allRequiredFilled = requiredFields.every(field => {
+            const value = formData[field];
+            return value && value.trim().length > 0;
+        });
+        // Check if there are any errors
+        const hasNoErrors = Object.keys(errors).length === 0;
+        // Check if cheque is uploaded
+        const hasCheque = cancelledCheque !== undefined && cancelledCheque !== '';
+        // Validate each field individually for debugging
+        const fieldValues = {
+            accountHolderName: formData.accountHolderName || 'empty',
+            bankName: formData.bankName || 'empty',
+            accountNumber: formData.accountNumber || 'empty',
+            ifscCode: formData.ifscCode || 'empty',
+            cheque: cancelledCheque || 'empty'
+        };
+        const fieldErrors = { ...errors };
+        const isValid = allRequiredFilled && hasNoErrors && hasCheque;
+        setFormValid(isValid);
+        // Debug log
+        console.log('=== Form Validation Debug ===');
+        console.log('Field Values:', fieldValues);
+        console.log('Field Errors:', fieldErrors);
+        console.log('allRequiredFilled:', allRequiredFilled);
+        console.log('hasNoErrors:', hasNoErrors);
+        console.log('hasCheque:', hasCheque);
+        console.log('Form Valid:', isValid);
+        console.log('============================');
+    }, [formData, errors, cancelledCheque]);
+    const handleChange = (field, value) => {
+        if (field === 'ifscCode') {
+            value = value.toUpperCase();
+        }
+        setFormData(prev => ({ ...prev, [field]: value }));
+        // Validate on change
+        const error = validateField(field, value);
+        setErrors(prev => {
+            const newErrors = { ...prev };
+            if (error) {
+                newErrors[field] = error;
+            }
+            else {
+                delete newErrors[field];
+            }
+            return newErrors;
+        });
+    };
+    const handleBlur = (field) => {
+        setTouched(prev => ({ ...prev, [field]: true }));
+        const value = formData[field];
+        const error = validateField(field, value);
+        setErrors(prev => {
+            const newErrors = { ...prev };
+            if (error) {
+                newErrors[field] = error;
+            }
+            else {
+                delete newErrors[field];
+            }
+            return newErrors;
+        });
+    };
+    const handleChequeUpload = async (file) => {
+        setUploading(true);
+        setTimeout(() => {
+            setCancelledCheque(file.uri || 'uploaded_cheque.jpg');
+            setUploading(false);
+        }, 1000);
+    };
+    const handleChequeRemove = () => {
+        react_native_1.Alert.alert('Remove Document', 'Are you sure you want to remove the cancelled cheque?', [
+            { text: 'Cancel', style: 'cancel' },
+            {
+                text: 'Remove',
+                style: 'destructive',
+                onPress: () => setCancelledCheque(undefined),
+            },
+        ]);
+    };
+    const handleSubmit = () => {
+        // Final validation before submit
+        const requiredFields = [
+            'accountHolderName',
+            'bankName',
+            'accountNumber',
+            'ifscCode',
+        ];
+        const newErrors = {};
+        requiredFields.forEach(field => {
+            const error = validateField(field, formData[field]);
+            if (error)
+                newErrors[field] = error;
+        });
+        if (Object.keys(newErrors).length > 0) {
+            setErrors(newErrors);
+            return;
+        }
+        if (!cancelledCheque) {
+            react_native_1.Alert.alert('Error', 'Please upload cancelled cheque');
+            return;
+        }
+        onNext({
+            bankDetails: {
+                ...formData,
+                cancelledChequeUrl: cancelledCheque,
+            },
+            isBankDetailsCompleted: true,
+        });
+    };
+    const maskAccountNumber = (value) => {
+        const cleaned = value.replace(/\s/g, '');
+        if (cleaned.length <= 4)
+            return cleaned;
+        const last4 = cleaned.slice(-4);
+        const masked = '•'.repeat(Math.min(cleaned.length - 4, 8));
+        return masked + last4;
+    };
+    return (<react_native_1.View style={styles.container}>
+      <expo_linear_gradient_1.LinearGradient colors={['#FFFFFF', '#F8F9FA']} style={styles.gradient}>
+        <react_native_1.ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.scrollContent}>
+          {/* Header Card */}
+          <react_native_paper_1.Surface style={styles.headerCard}>
+            <react_native_1.View style={styles.headerIcon}>
+              <react_native_paper_1.IconButton icon="bank" size={24} iconColor="#0066CC"/>
+            </react_native_1.View>
+            <react_native_1.View style={styles.headerText}>
+              <react_native_1.Text style={styles.title}>Bank Details</react_native_1.Text>
+              <react_native_1.Text style={styles.subtitle}>
+                Add your bank account for settlements
+              </react_native_1.Text>
+            </react_native_1.View>
+          </react_native_paper_1.Surface>
+
+          {/* Form Card */}
+          <react_native_paper_1.Surface style={styles.formCard}>
+            {/* Progress Steps */}
+            <react_native_1.View style={styles.progressContainer}>
+              <react_native_1.View style={styles.progressStep}>
+                <react_native_1.View style={[styles.progressDot, styles.progressDotCompleted]}>
+                  <react_native_paper_1.IconButton icon="check" size={12} iconColor="#FFFFFF"/>
+                </react_native_1.View>
+                <react_native_1.Text style={styles.progressTextCompleted}>Basic</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles.progressLine}/>
+              <react_native_1.View style={styles.progressStep}>
+                <react_native_1.View style={[styles.progressDot, styles.progressDotCompleted]}>
+                  <react_native_paper_1.IconButton icon="check" size={12} iconColor="#FFFFFF"/>
+                </react_native_1.View>
+                <react_native_1.Text style={styles.progressTextCompleted}>KYC</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles.progressLine}/>
+              <react_native_1.View style={styles.progressStep}>
+                <expo_linear_gradient_1.LinearGradient colors={['#0066CC', '#0099FF']} style={styles.progressDotActive}/>
+                <react_native_1.Text style={styles.progressTextActive}>Bank</react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            {/* Account Holder Name */}
+            <react_native_1.View style={styles.fieldContainer}>
+              <react_native_1.Text style={styles.label}>
+                Account Holder Name <react_native_1.Text style={styles.requiredStar}>*</react_native_1.Text>
+              </react_native_1.Text>
+              <react_native_paper_1.TextInput mode="outlined" value={formData.accountHolderName} onChangeText={(text) => handleChange('accountHolderName', text)} onBlur={() => handleBlur('accountHolderName')} error={!!errors.accountHolderName} style={styles.input} outlineColor="#E5E7EB" activeOutlineColor="#0066CC" left={<react_native_paper_1.TextInput.Icon icon="account" color="#6B7280" size={20}/>} placeholder="John Doe" placeholderTextColor="#9CA3AF"/>
+              {errors.accountHolderName && (<react_native_paper_1.HelperText type="error" style={styles.errorText}>
+                  {errors.accountHolderName}
+                </react_native_paper_1.HelperText>)}
+            </react_native_1.View>
+
+            {/* Bank Name */}
+            <react_native_1.View style={styles.fieldContainer}>
+              <react_native_1.Text style={styles.label}>
+                Bank Name <react_native_1.Text style={styles.requiredStar}>*</react_native_1.Text>
+              </react_native_1.Text>
+              <react_native_paper_1.TextInput mode="outlined" value={formData.bankName} onChangeText={(text) => handleChange('bankName', text)} onBlur={() => handleBlur('bankName')} error={!!errors.bankName} style={styles.input} outlineColor="#E5E7EB" activeOutlineColor="#0066CC" left={<react_native_paper_1.TextInput.Icon icon="bank" color="#6B7280" size={20}/>} placeholder="State Bank of India" placeholderTextColor="#9CA3AF"/>
+              {errors.bankName && (<react_native_paper_1.HelperText type="error" style={styles.errorText}>
+                  {errors.bankName}
+                </react_native_paper_1.HelperText>)}
+            </react_native_1.View>
+
+            {/* Account Number */}
+            <react_native_1.View style={styles.fieldContainer}>
+              <react_native_1.Text style={styles.label}>
+                Account Number <react_native_1.Text style={styles.requiredStar}>*</react_native_1.Text>
+              </react_native_1.Text>
+              <react_native_1.View>
+                <react_native_paper_1.TextInput mode="outlined" value={formData.accountNumber} onChangeText={(text) => handleChange('accountNumber', text.replace(/\D/g, ''))} onBlur={() => handleBlur('accountNumber')} keyboardType="numeric" error={!!errors.accountNumber} style={[styles.input, styles.inputWithRightIcon]} outlineColor="#E5E7EB" activeOutlineColor="#0066CC" left={<react_native_paper_1.TextInput.Icon icon="credit-card" color="#6B7280" size={20}/>} right={<react_native_paper_1.TextInput.Icon icon={showAccountNumber ? "eye-off" : "eye"} onPress={() => setShowAccountNumber(!showAccountNumber)} color="#6B7280" size={20}/>} placeholder="1234567890" placeholderTextColor="#9CA3AF" secureTextEntry={!showAccountNumber}/>
+              </react_native_1.View>
+              {errors.accountNumber && (<react_native_paper_1.HelperText type="error" style={styles.errorText}>
+                  {errors.accountNumber}
+                </react_native_paper_1.HelperText>)}
+              {formData.accountNumber && !errors.accountNumber && (<react_native_1.View style={styles.previewContainer}>
+                  <react_native_paper_1.IconButton icon="eye" size={14} iconColor="#6B7280"/>
+                  <react_native_1.Text style={styles.previewText}>
+                    {maskAccountNumber(formData.accountNumber)}
+                  </react_native_1.Text>
+                </react_native_1.View>)}
+            </react_native_1.View>
+
+            {/* IFSC Code */}
+            <react_native_1.View style={styles.fieldContainer}>
+              <react_native_1.Text style={styles.label}>
+                IFSC Code <react_native_1.Text style={styles.requiredStar}>*</react_native_1.Text>
+              </react_native_1.Text>
+              <react_native_paper_1.TextInput mode="outlined" value={formData.ifscCode} onChangeText={(text) => handleChange('ifscCode', text)} onBlur={() => handleBlur('ifscCode')} autoCapitalize="characters" error={!!errors.ifscCode} style={styles.input} outlineColor="#E5E7EB" activeOutlineColor="#0066CC" left={<react_native_paper_1.TextInput.Icon icon="qrcode" color="#6B7280" size={20}/>} placeholder="SBIN0123456" placeholderTextColor="#9CA3AF" maxLength={11}/>
+              {errors.ifscCode && (<react_native_paper_1.HelperText type="error" style={styles.errorText}>
+                  {errors.ifscCode}
+                </react_native_paper_1.HelperText>)}
+            </react_native_1.View>
+
+            {/* UPI ID */}
+            <react_native_1.View style={styles.fieldContainer}>
+              <react_native_1.Text style={styles.label}>UPI ID (Optional)</react_native_1.Text>
+              <react_native_paper_1.TextInput mode="outlined" value={formData.upiId} onChangeText={(text) => handleChange('upiId', text)} onBlur={() => handleBlur('upiId')} error={!!errors.upiId} style={styles.input} outlineColor="#E5E7EB" activeOutlineColor="#0066CC" left={<react_native_paper_1.TextInput.Icon icon="cellphone" color="#6B7280" size={20}/>} placeholder="name@bank" placeholderTextColor="#9CA3AF"/>
+              {errors.upiId && (<react_native_paper_1.HelperText type="error" style={styles.errorText}>
+                  {errors.upiId}
+                </react_native_paper_1.HelperText>)}
+            </react_native_1.View>
+
+            {/* Cancelled Cheque Upload */}
+            <react_native_1.View style={styles.fieldContainer}>
+              <react_native_1.Text style={styles.label}>
+                Cancelled Cheque <react_native_1.Text style={styles.requiredStar}>*</react_native_1.Text>
+              </react_native_1.Text>
+              <FileUploader_1.default label="" required description="Upload a cancelled cheque for verification" icon="file-document" value={cancelledCheque} onUpload={handleChequeUpload} onRemove={handleChequeRemove} uploading={uploading} mode={mode} accept="image/*"/>
+            </react_native_1.View>
+
+            {/* Test Mode Notice */}
+            {mode === 'test' && (<react_native_paper_1.Surface style={styles.testModeCard}>
+                <react_native_1.View style={styles.testModeContent}>
+                  <react_native_paper_1.IconButton icon="flask" size={16} iconColor="#92400E"/>
+                  <react_native_1.View style={styles.testModeText}>
+                    <react_native_1.Text style={styles.testModeTitle}>Test Mode Active</react_native_1.Text>
+                    <react_native_1.Text style={styles.testModeDescription}>
+                      Bank details are for testing only
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>
+              </react_native_paper_1.Surface>)}
+
+            {/* Action Buttons */}
+            <react_native_1.View style={styles.buttonContainer}>
+              <react_native_1.TouchableOpacity style={styles.backButton} onPress={onBack}>
+                <react_native_1.Text style={styles.backButtonText}>Back</react_native_1.Text>
+              </react_native_1.TouchableOpacity>
+              
+              <react_native_1.TouchableOpacity style={[
+            styles.submitButton,
+            !formValid && styles.submitButtonDisabled
+        ]} onPress={handleSubmit} disabled={!formValid}>
+                <expo_linear_gradient_1.LinearGradient colors={formValid ? ['#0066CC', '#0099FF'] : ['#9CA3AF', '#9CA3AF']} style={styles.submitGradient} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}>
+                  <react_native_1.Text style={styles.submitButtonText}>
+                    {mode === 'test' ? 'Complete Test' : 'Save & Continue'}
+                  </react_native_1.Text>
+                </expo_linear_gradient_1.LinearGradient>
+              </react_native_1.TouchableOpacity>
+            </react_native_1.View>
+          </react_native_paper_1.Surface>
+        </react_native_1.ScrollView>
+      </expo_linear_gradient_1.LinearGradient>
+    </react_native_1.View>);
+};
+// Add debug styles
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#FFFFFF',
+    },
+    gradient: {
+        flex: 1,
+    },
+    scrollContent: {
+        padding: 12,
+    },
+    headerCard: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 12,
+        backgroundColor: '#FFFFFF',
+        borderRadius: 16,
+        marginBottom: 12,
+        elevation: 2,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+    },
+    headerIcon: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        backgroundColor: '#F0F7FF',
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginRight: 12,
+    },
+    headerText: {
+        flex: 1,
+    },
+    title: {
+        fontSize: 18,
+        fontWeight: '700',
+        color: '#111827',
+    },
+    subtitle: {
+        fontSize: 12,
+        color: '#6B7280',
+        marginTop: 2,
+    },
+    formCard: {
+        backgroundColor: '#FFFFFF',
+        borderRadius: 20,
+        padding: 16,
+        elevation: 2,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+    },
+    progressContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: 20,
+        paddingHorizontal: 8,
+    },
+    progressStep: {
+        alignItems: 'center',
+    },
+    progressDot: {
+        width: 24,
+        height: 24,
+        borderRadius: 12,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    progressDotCompleted: {
+        backgroundColor: '#10B981',
+    },
+    progressDotActive: {
+        width: 24,
+        height: 24,
+        borderRadius: 12,
+    },
+    progressLine: {
+        width: 30,
+        height: 2,
+        backgroundColor: '#E5E7EB',
+        marginHorizontal: 4,
+    },
+    progressTextCompleted: {
+        fontSize: 9,
+        color: '#10B981',
+        marginTop: 4,
+        fontWeight: '500',
+    },
+    progressTextActive: {
+        fontSize: 9,
+        color: '#0066CC',
+        marginTop: 4,
+        fontWeight: '600',
+    },
+    fieldContainer: {
+        marginBottom: 14,
+    },
+    label: {
+        fontSize: 12,
+        fontWeight: '500',
+        color: '#374151',
+        marginBottom: 4,
+    },
+    requiredStar: {
+        color: '#EF4444',
+    },
+    input: {
+        backgroundColor: '#FFFFFF',
+        fontSize: 13,
+        height: 44,
+    },
+    inputWithRightIcon: {
+        paddingRight: 40,
+    },
+    errorText: {
+        fontSize: 10,
+        color: '#EF4444',
+        marginTop: 2,
+    },
+    previewContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginTop: 4,
+        backgroundColor: '#F3F4F6',
+        borderRadius: 6,
+        paddingHorizontal: 4,
+        alignSelf: 'flex-start',
+    },
+    previewText: {
+        fontSize: 11,
+        color: '#4B5563',
+        marginRight: 8,
+    },
+    testModeCard: {
+        backgroundColor: '#FEF3C7',
+        borderRadius: 10,
+        marginVertical: 8,
+        overflow: 'hidden',
+    },
+    testModeContent: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 8,
+    },
+    testModeText: {
+        flex: 1,
+    },
+    testModeTitle: {
+        fontSize: 12,
+        fontWeight: '600',
+        color: '#92400E',
+    },
+    testModeDescription: {
+        fontSize: 11,
+        color: '#92400E',
+        marginTop: 1,
+    },
+    buttonContainer: {
+        flexDirection: 'row',
+        gap: 8,
+        marginTop: 16,
+    },
+    backButton: {
+        flex: 1,
+        paddingVertical: 8,
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: '#E5E7EB',
+        alignItems: 'center',
+        backgroundColor: '#FFFFFF',
+    },
+    backButtonText: {
+        fontSize: 12,
+        fontWeight: '500',
+        color: '#6B7280',
+    },
+    submitButton: {
+        flex: 2,
+        borderRadius: 10,
+        overflow: 'hidden',
+    },
+    submitButtonDisabled: {
+        opacity: 0.5,
+    },
+    submitGradient: {
+        paddingVertical: 8,
+        alignItems: 'center',
+    },
+    submitButtonText: {
+        fontSize: 12,
+        fontWeight: '600',
+        color: '#FFFFFF',
+    },
+});
+exports.default = BankDetails;