@airxpay/sdk-ui 1.0.3 → 1.0.6

package/dist/components/steps/BankDetails.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Seller, Mode } from '../../types/sellertypes';
+import { Merchant, Mode } from '../../types/merchantTypes';
 interface BankDetailsProps {
-    initialData: Partial<Seller>;
+    initialData: Partial<Merchant>;
     mode: Mode;
-    onNext: (data: Partial<Seller>) => void;
+    onNext: (data: Partial<Merchant>) => void;
     onBack: () => void;
 }
 declare const BankDetails: React.FC<BankDetailsProps>;

package/dist/components/steps/BankDetails.js

@@ -60,10 +60,28 @@ const BankDetails = ({ initialData, mode, onNext, onBack, }) => {
     const [errors, setErrors] = (0, react_1.useState)({});
     const [showAccountNumber, setShowAccountNumber] = (0, react_1.useState)(false);
     const [formValid, setFormValid] = (0, react_1.useState)(false);
+    const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
+    // Check if bank details already exist
+    (0, react_1.useEffect)(() => {
+        if (initialData.bankDetails) {
+            const { accountHolderName, bankName, accountNumber, ifscCode } = initialData.bankDetails;
+            if (accountHolderName && bankName && accountNumber && ifscCode) {
+                // Form is pre-filled with existing data
+                setFormValid(true);
+            }
+        }
+    }, [initialData]);
     const validateIFSC = (ifsc) => {
         const ifscRegex = /^[A-Z]{4}0[A-Z0-9]{6}$/;
         return ifscRegex.test(ifsc);
     };
+    const validateBankAccount = (accountNumber, ifscCode) => {
+        // Basic validation - bank code from IFSC should match account number pattern
+        // This is a simplified check - in production, you might want to use a bank validation API
+        const bankCode = ifscCode.substring(0, 4);
+        // Add bank-specific validation if needed
+        return true;
+    };
     const validateField = (field, value) => {
         switch (field) {
             case 'accountHolderName':
@@ -71,28 +89,38 @@ const BankDetails = ({ initialData, mode, onNext, onBack, }) => {
                     return 'Account holder name is required';
                 if (value.length < 3)
                     return 'Name must be at least 3 characters';
+                if (value.length > 50)
+                    return 'Name must be less than 50 characters';
+                if (!/^[a-zA-Z\s.]+$/.test(value))
+                    return 'Name contains invalid characters';
                 return undefined;
             case 'bankName':
                 if (!(value === null || value === void 0 ? void 0 : value.trim()))
                     return 'Bank name is required';
+                if (value.length < 3)
+                    return 'Bank name must be at least 3 characters';
+                if (value.length > 50)
+                    return 'Bank name must be less than 50 characters';
                 return undefined;
             case 'accountNumber':
                 if (!(value === null || value === void 0 ? void 0 : value.trim()))
                     return 'Account number is required';
-                if (!/^\d{9,18}$/.test(value.replace(/\s/g, ''))) {
-                    return 'Invalid account number';
+                const cleaned = value.replace(/\s/g, '');
+                if (!/^\d{9,18}$/.test(cleaned)) {
+                    return 'Account number must be 9-18 digits';
                 }
                 return undefined;
             case 'ifscCode':
                 if (!(value === null || value === void 0 ? void 0 : value.trim()))
                     return 'IFSC code is required';
-                if (!validateIFSC(value.toUpperCase())) {
-                    return 'Invalid IFSC code';
+                const ifsc = value.toUpperCase().replace(/\s/g, '');
+                if (!validateIFSC(ifsc)) {
+                    return 'Invalid IFSC code (e.g., SBIN0123456)';
                 }
                 return undefined;
             case 'upiId':
                 if (value && !/^[\w.-]+@[\w.-]+$/.test(value)) {
-                    return 'Invalid UPI ID format';
+                    return 'Invalid UPI ID format (e.g., name@bank)';
                 }
                 return undefined;
             default:
@@ -110,36 +138,21 @@ const BankDetails = ({ initialData, mode, onNext, onBack, }) => {
         // Check if all required fields have values
         const allRequiredFilled = requiredFields.every(field => {
             const value = formData[field];
-            return value && value.trim().length > 0;
+            return value && value.toString().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 = Object.assign({}, 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();
+            value = value.toUpperCase().replace(/\s/g, '');
+        }
+        if (field === 'accountNumber') {
+            value = value.replace(/\D/g, '');
         }
         setFormData(prev => (Object.assign(Object.assign({}, prev), { [field]: value })));
         // Validate on change
@@ -172,6 +185,7 @@ const BankDetails = ({ initialData, mode, onNext, onBack, }) => {
     };
     const handleChequeUpload = (file) => __awaiter(void 0, void 0, void 0, function* () {
         setUploading(true);
+        // Simulate upload
         setTimeout(() => {
             setCancelledCheque(file.uri || 'uploaded_cheque.jpg');
             setUploading(false);
@@ -209,10 +223,26 @@ const BankDetails = ({ initialData, mode, onNext, onBack, }) => {
             react_native_1.Alert.alert('Error', 'Please upload cancelled cheque');
             return;
         }
-        onNext({
-            bankDetails: Object.assign(Object.assign({}, formData), { cancelledChequeUrl: cancelledCheque }),
-            isBankDetailsCompleted: true,
-        });
+        // Validate bank account combination
+        if (formData.accountNumber && formData.ifscCode) {
+            if (!validateBankAccount(formData.accountNumber, formData.ifscCode)) {
+                react_native_1.Alert.alert('Error', 'Account number and IFSC code do not match');
+                return;
+            }
+        }
+        // Show submitting state
+        setIsSubmitting(true);
+        // Simulate submission
+        setTimeout(() => {
+            setIsSubmitting(false);
+            onNext({
+                bankDetails: Object.assign(Object.assign({}, formData), { cancelledChequeUrl: cancelledCheque }),
+                isBankDetailsCompleted: true,
+            });
+        }, 1000);
+    };
+    const handleBack = () => {
+        onBack();
     };
     const maskAccountNumber = (value) => {
         const cleaned = value.replace(/\s/g, '');
@@ -222,151 +252,163 @@ const BankDetails = ({ initialData, mode, onNext, onBack, }) => {
         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>
+    return (<react_native_1.KeyboardAvoidingView style={{ flex: 1 }} behavior={react_native_1.Platform.OS === 'ios' ? 'padding' : undefined} keyboardVerticalOffset={react_native_1.Platform.OS === 'ios' ? 64 : 0}>
+      <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} keyboardShouldPersistTaps="handled">
+            {/* 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"/>
+            {/* 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.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 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.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>
+              {/* 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>
+              {/* 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}/>
+              {/* 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)} 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} maxLength={18}/>
+                </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>
-              {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>
+              {/* 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>)}
+                {formData.ifscCode && !errors.ifscCode && (<react_native_1.View style={styles.hintContainer}>
+                    <react_native_paper_1.IconButton icon="information" size={14} iconColor="#6B7280"/>
+                    <react_native_1.Text style={styles.hintText}>
+                      First 4 letters, then 0, then 6 alphanumeric
+                    </react_native_1.Text>
+                  </react_native_1.View>)}
+              </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>
+              {/* 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>
+              {/* 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>
+              {/* 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_1.View>
-              </react_native_paper_1.Surface>)}
+                </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={[
+              {/* Action Buttons */}
+              <react_native_1.View style={styles.buttonContainer}>
+                <react_native_1.TouchableOpacity style={styles.backButton} onPress={handleBack} disabled={isSubmitting}>
+                  <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>);
+            (!formValid || isSubmitting) && styles.submitButtonDisabled
+        ]} onPress={handleSubmit} disabled={!formValid || isSubmitting}>
+                  <expo_linear_gradient_1.LinearGradient colors={formValid && !isSubmitting ? ['#0066CC', '#0099FF'] : ['#9CA3AF', '#9CA3AF']} style={styles.submitGradient} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}>
+                    {isSubmitting ? (<react_native_1.View style={styles.submittingContent}>
+                        <react_native_paper_1.ActivityIndicator size="small" color="#FFFFFF"/>
+                        <react_native_1.Text style={[styles.submitButtonText, styles.submittingText]}>
+                          Saving...
+                        </react_native_1.Text>
+                      </react_native_1.View>) : (<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>
+    </react_native_1.KeyboardAvoidingView>);
 };
-// Add debug styles
 const styles = react_native_1.StyleSheet.create({
     container: {
         flex: 1,
@@ -377,6 +419,7 @@ const styles = react_native_1.StyleSheet.create({
     },
     scrollContent: {
         padding: 12,
+        paddingBottom: 24,
     },
     headerCard: {
         flexDirection: 'row',
@@ -505,6 +548,16 @@ const styles = react_native_1.StyleSheet.create({
         color: '#4B5563',
         marginRight: 8,
     },
+    hintContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginTop: 4,
+    },
+    hintText: {
+        fontSize: 10,
+        color: '#6B7280',
+        marginLeft: 2,
+    },
     testModeCard: {
         backgroundColor: '#FEF3C7',
         borderRadius: 10,
@@ -536,7 +589,7 @@ const styles = react_native_1.StyleSheet.create({
     },
     backButton: {
         flex: 1,
-        paddingVertical: 8,
+        paddingVertical: 10,
         borderRadius: 10,
         borderWidth: 1,
         borderColor: '#E5E7EB',
@@ -544,7 +597,7 @@ const styles = react_native_1.StyleSheet.create({
         backgroundColor: '#FFFFFF',
     },
     backButtonText: {
-        fontSize: 12,
+        fontSize: 13,
         fontWeight: '500',
         color: '#6B7280',
     },
@@ -557,13 +610,21 @@ const styles = react_native_1.StyleSheet.create({
         opacity: 0.5,
     },
     submitGradient: {
-        paddingVertical: 8,
+        paddingVertical: 10,
         alignItems: 'center',
     },
     submitButtonText: {
-        fontSize: 12,
+        fontSize: 13,
         fontWeight: '600',
         color: '#FFFFFF',
     },
+    submittingContent: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    submittingText: {
+        marginLeft: 8,
+    },
 });
 exports.default = BankDetails;

package/dist/components/steps/BasicDetailsForm.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Seller, FormErrors } from '../../types/sellertypes';
+import { Merchant, FormErrors } from '../../types/merchantTypes';
 interface BasicDetailsFormProps {
-    initialData: Partial<Seller>;
-    onNext: (data: Partial<Seller>) => void;
+    initialData: Partial<Merchant>;
+    onNext: (data: Partial<Merchant>) => void;
     errors: FormErrors;
     setErrors: (errors: FormErrors) => void;
 }