@airxpay/sdk-ui 1.0.5 → 1.0.6

package/dist/components/steps/BasicDetailsForm.js

@@ -48,7 +48,7 @@ const BasicDetailsForm = ({ initialData, onNext, errors, setErrors, }) => {
     const fadeAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
     const slideAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(50)).current;
     const scaleAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0.95)).current;
-    const [formData, setFormData] = (0, react_1.useState)(Object.assign({ sellerName: '', sellerEmail: '', sellerPhone: '', businessName: '', businessType: 'individual', businessCategory: '', country: 'India', nationality: 'Indian', dob: '' }, initialData));
+    const [formData, setFormData] = (0, react_1.useState)(Object.assign({ merchantName: '', merchantEmail: '', merchantPhone: '', businessName: '', businessType: 'individual', businessCategory: '', country: 'India', nationality: 'Indian', dob: '' }, initialData));
     const [showDatePicker, setShowDatePicker] = (0, react_1.useState)(false);
     const [touched, setTouched] = (0, react_1.useState)({});
     const [focusedField, setFocusedField] = (0, react_1.useState)(null);
@@ -76,22 +76,25 @@ const BasicDetailsForm = ({ initialData, onNext, errors, setErrors, }) => {
     }, []);
     const validateField = (field, value) => {
         switch (field) {
-            case 'sellerName':
+            case 'merchantName':
                 if (!(value === null || value === void 0 ? void 0 : value.trim()))
-                    return 'Seller name is required';
+                    return 'Merchant name is required';
                 if (value.length < 2)
                     return 'Name must be at least 2 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 'sellerEmail':
+            case 'merchantEmail':
                 if (!(value === null || value === void 0 ? void 0 : value.trim()))
                     return 'Email is required';
-                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+                // More comprehensive email regex
+                const emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
                 if (!emailRegex.test(value))
                     return 'Invalid email format';
                 return undefined;
-            case 'sellerPhone':
+            case 'merchantPhone':
                 if (value && !/^\d{10}$/.test(value.replace(/\D/g, ''))) {
                     return 'Phone must be 10 digits';
                 }
@@ -106,6 +109,10 @@ const BasicDetailsForm = ({ initialData, onNext, errors, setErrors, }) => {
         }
     };
     const handleChange = (field, value) => {
+        // Format phone number
+        if (field === 'merchantPhone') {
+            value = value.replace(/\D/g, '');
+        }
         setFormData(prev => (Object.assign(Object.assign({}, prev), { [field]: value })));
         // Validate on change
         const error = validateField(field, value);
@@ -145,7 +152,7 @@ const BasicDetailsForm = ({ initialData, onNext, errors, setErrors, }) => {
     };
     const validateForm = () => {
         const newErrors = {};
-        const requiredFields = ['sellerName', 'sellerEmail'];
+        const requiredFields = ['merchantName', 'merchantEmail'];
         if (formData.businessType === 'company') {
             requiredFields.push('businessName');
         }
@@ -179,7 +186,7 @@ const BasicDetailsForm = ({ initialData, onNext, errors, setErrors, }) => {
         }
     };
     const isFormValid = () => {
-        const requiredFields = ['sellerName', 'sellerEmail'];
+        const requiredFields = ['merchantName', 'merchantEmail'];
         if (formData.businessType === 'company') {
             requiredFields.push('businessName');
         }
@@ -190,17 +197,6 @@ const BasicDetailsForm = ({ initialData, onNext, errors, setErrors, }) => {
         });
         // Check if there are any errors
         const hasNoErrors = Object.keys(localErrors).length === 0;
-        console.log('Form Valid Check:', {
-            allRequiredFilled,
-            hasNoErrors,
-            localErrors,
-            formData: {
-                sellerName: formData.sellerName,
-                sellerEmail: formData.sellerEmail,
-                businessName: formData.businessName,
-                businessType: formData.businessType
-            }
-        });
         return allRequiredFilled && hasNoErrors;
     };
     const businessCategories = [
@@ -215,7 +211,8 @@ const BasicDetailsForm = ({ initialData, onNext, errors, setErrors, }) => {
         'Food',
         'Other',
     ];
-    return (<react_native_1.Animated.View style={[
+    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.Animated.View style={[
             styles.container,
             {
                 opacity: fadeAnim,
@@ -225,166 +222,167 @@ const BasicDetailsForm = ({ initialData, onNext, errors, setErrors, }) => {
                 ]
             }
         ]}>
-      <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="account-details" size={28} iconColor="#0066CC"/>
-            </react_native_1.View>
-            <react_native_1.View style={styles.headerText}>
-              <react_native_paper_1.Title style={styles.title}>Basic Information</react_native_paper_1.Title>
-              <react_native_1.Text style={styles.subtitle}>
-                Tell us about yourself
-              </react_native_1.Text>
-            </react_native_1.View>
-          </react_native_paper_1.Surface>
-
-          {/* Form Card */}
-          <react_native_paper_1.Surface style={styles.formCard}>
-            {/* Compact Progress Steps */}
-            <react_native_1.View style={styles.progressContainer}>
-              <react_native_1.View style={styles.progressStep}>
-                <expo_linear_gradient_1.LinearGradient colors={['#0066CC', '#0099FF']} style={styles.progressDot}/>
-                <react_native_1.Text style={styles.progressTextActive}>Basic</react_native_1.Text>
+        <expo_linear_gradient_1.LinearGradient colors={['#FFFFFF', '#F8F9FA']} style={styles.gradient}>
+          <react_native_1.ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.scrollContent} keyboardShouldPersistTaps="handled" keyboardDismissMode="on-drag">
+            {/* Header Card */}
+            <react_native_paper_1.Surface style={styles.headerCard}>
+              <react_native_1.View style={styles.headerIcon}>
+                <react_native_paper_1.IconButton icon="account-details" size={28} iconColor="#0066CC"/>
               </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.progressDotInactive]}/>
-                <react_native_1.Text style={styles.progressText}>KYC</react_native_1.Text>
+              <react_native_1.View style={styles.headerText}>
+                <react_native_paper_1.Title style={styles.title}>Basic Information</react_native_paper_1.Title>
+                <react_native_1.Text style={styles.subtitle}>
+                  Tell us about yourself
+                </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.progressDotInactive]}/>
-                <react_native_1.Text style={styles.progressText}>Bank</react_native_1.Text>
+            </react_native_paper_1.Surface>
+
+            {/* Form Card */}
+            <react_native_paper_1.Surface style={styles.formCard}>
+              {/* Compact Progress Steps */}
+              <react_native_1.View style={styles.progressContainer}>
+                <react_native_1.View style={styles.progressStep}>
+                  <expo_linear_gradient_1.LinearGradient colors={['#0066CC', '#0099FF']} style={styles.progressDot}/>
+                  <react_native_1.Text style={styles.progressTextActive}>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.progressDotInactive]}/>
+                  <react_native_1.Text style={styles.progressText}>KYC</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.progressDotInactive]}/>
+                  <react_native_1.Text style={styles.progressText}>Bank</react_native_1.Text>
+                </react_native_1.View>
               </react_native_1.View>
-            </react_native_1.View>
 
-            {/* Seller Name */}
-            <react_native_1.View style={styles.fieldContainer}>
-              <react_native_1.Text style={styles.label}>
-                Full 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.sellerName} onChangeText={(text) => handleChange('sellerName', text)} onBlur={() => handleBlur('sellerName')} onFocus={() => handleFocus('sellerName')} error={!!localErrors.sellerName} style={styles.input} outlineColor="#E5E7EB" activeOutlineColor="#0066CC" left={<react_native_paper_1.TextInput.Icon icon="account" color="#6B7280"/>} placeholder="John Doe" placeholderTextColor="#9CA3AF"/>
-              {localErrors.sellerName && (<react_native_paper_1.HelperText type="error" style={styles.errorText}>
-                  {localErrors.sellerName}
-                </react_native_paper_1.HelperText>)}
-            </react_native_1.View>
+              {/* Merchant Name */}
+              <react_native_1.View style={styles.fieldContainer}>
+                <react_native_1.Text style={styles.label}>
+                  Full 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.merchantName} onChangeText={(text) => handleChange('merchantName', text)} onBlur={() => handleBlur('merchantName')} onFocus={() => handleFocus('merchantName')} error={!!localErrors.merchantName || !!errors.merchantName} style={styles.input} outlineColor="#E5E7EB" activeOutlineColor="#0066CC" left={<react_native_paper_1.TextInput.Icon icon="account" color="#6B7280"/>} placeholder="John Doe" placeholderTextColor="#9CA3AF"/>
+                {(localErrors.merchantName || errors.merchantName) && (<react_native_paper_1.HelperText type="error" style={styles.errorText}>
+                    {localErrors.merchantName || errors.merchantName}
+                  </react_native_paper_1.HelperText>)}
+              </react_native_1.View>
 
-            {/* Email */}
-            <react_native_1.View style={styles.fieldContainer}>
-              <react_native_1.Text style={styles.label}>
-                Email <react_native_1.Text style={styles.requiredStar}>*</react_native_1.Text>
-              </react_native_1.Text>
-              <react_native_paper_1.TextInput mode="outlined" value={formData.sellerEmail} onChangeText={(text) => handleChange('sellerEmail', text)} onBlur={() => handleBlur('sellerEmail')} onFocus={() => handleFocus('sellerEmail')} keyboardType="email-address" autoCapitalize="none" error={!!localErrors.sellerEmail} style={styles.input} outlineColor="#E5E7EB" activeOutlineColor="#0066CC" left={<react_native_paper_1.TextInput.Icon icon="email" color="#6B7280"/>} placeholder="john@example.com" placeholderTextColor="#9CA3AF"/>
-              {localErrors.sellerEmail && (<react_native_paper_1.HelperText type="error" style={styles.errorText}>
-                  {localErrors.sellerEmail}
-                </react_native_paper_1.HelperText>)}
-            </react_native_1.View>
+              {/* Email */}
+              <react_native_1.View style={styles.fieldContainer}>
+                <react_native_1.Text style={styles.label}>
+                  Email <react_native_1.Text style={styles.requiredStar}>*</react_native_1.Text>
+                </react_native_1.Text>
+                <react_native_paper_1.TextInput mode="outlined" value={formData.merchantEmail} onChangeText={(text) => handleChange('merchantEmail', text)} onBlur={() => handleBlur('merchantEmail')} onFocus={() => handleFocus('merchantEmail')} keyboardType="email-address" autoCapitalize="none" error={!!localErrors.merchantEmail || !!errors.merchantEmail} style={styles.input} outlineColor="#E5E7EB" activeOutlineColor="#0066CC" left={<react_native_paper_1.TextInput.Icon icon="email" color="#6B7280"/>} placeholder="john@example.com" placeholderTextColor="#9CA3AF"/>
+                {(localErrors.merchantEmail || errors.merchantEmail) && (<react_native_paper_1.HelperText type="error" style={styles.errorText}>
+                    {localErrors.merchantEmail || errors.merchantEmail}
+                  </react_native_paper_1.HelperText>)}
+              </react_native_1.View>
 
-            {/* Phone */}
-            <react_native_1.View style={styles.fieldContainer}>
-              <react_native_1.Text style={styles.label}>Phone Number</react_native_1.Text>
-              <react_native_paper_1.TextInput mode="outlined" value={formData.sellerPhone} onChangeText={(text) => handleChange('sellerPhone', text)} onBlur={() => handleBlur('sellerPhone')} onFocus={() => handleFocus('sellerPhone')} keyboardType="phone-pad" error={!!localErrors.sellerPhone} style={styles.input} outlineColor="#E5E7EB" activeOutlineColor="#0066CC" left={<react_native_paper_1.TextInput.Icon icon="phone" color="#6B7280"/>} placeholder="9876543210" placeholderTextColor="#9CA3AF"/>
-              {localErrors.sellerPhone && (<react_native_paper_1.HelperText type="error" style={styles.errorText}>
-                  {localErrors.sellerPhone}
-                </react_native_paper_1.HelperText>)}
-            </react_native_1.View>
+              {/* Phone */}
+              <react_native_1.View style={styles.fieldContainer}>
+                <react_native_1.Text style={styles.label}>Phone Number</react_native_1.Text>
+                <react_native_paper_1.TextInput mode="outlined" value={formData.merchantPhone} onChangeText={(text) => handleChange('merchantPhone', text)} onBlur={() => handleBlur('merchantPhone')} onFocus={() => handleFocus('merchantPhone')} keyboardType="phone-pad" error={!!localErrors.merchantPhone} style={styles.input} outlineColor="#E5E7EB" activeOutlineColor="#0066CC" left={<react_native_paper_1.TextInput.Icon icon="phone" color="#6B7280"/>} placeholder="9876543210" placeholderTextColor="#9CA3AF" maxLength={10}/>
+                {localErrors.merchantPhone && (<react_native_paper_1.HelperText type="error" style={styles.errorText}>
+                    {localErrors.merchantPhone}
+                  </react_native_paper_1.HelperText>)}
+              </react_native_1.View>
 
-            {/* Business Type - Compact Design */}
-            <react_native_1.View style={styles.fieldContainer}>
-              <react_native_1.Text style={styles.label}>
-                Business Type <react_native_1.Text style={styles.requiredStar}>*</react_native_1.Text>
-              </react_native_1.Text>
-              <react_native_1.View style={styles.businessTypeContainer}>
-                <react_native_1.TouchableOpacity style={[
+              {/* Business Type */}
+              <react_native_1.View style={styles.fieldContainer}>
+                <react_native_1.Text style={styles.label}>
+                  Business Type <react_native_1.Text style={styles.requiredStar}>*</react_native_1.Text>
+                </react_native_1.Text>
+                <react_native_1.View style={styles.businessTypeContainer}>
+                  <react_native_1.TouchableOpacity style={[
             styles.businessTypeButton,
             formData.businessType === 'individual' && styles.businessTypeButtonActive
         ]} onPress={() => handleChange('businessType', 'individual')}>
-                  <react_native_paper_1.IconButton icon="account" size={20} iconColor={formData.businessType === 'individual' ? '#0066CC' : '#6B7280'}/>
-                  <react_native_1.Text style={[
+                    <react_native_paper_1.IconButton icon="account" size={20} iconColor={formData.businessType === 'individual' ? '#0066CC' : '#6B7280'}/>
+                    <react_native_1.Text style={[
             styles.businessTypeText,
             formData.businessType === 'individual' && styles.businessTypeTextActive
         ]}>
-                    Individual
-                  </react_native_1.Text>
-                </react_native_1.TouchableOpacity>
+                      Individual
+                    </react_native_1.Text>
+                  </react_native_1.TouchableOpacity>
 
-                <react_native_1.TouchableOpacity style={[
+                  <react_native_1.TouchableOpacity style={[
             styles.businessTypeButton,
             formData.businessType === 'company' && styles.businessTypeButtonActive
         ]} onPress={() => handleChange('businessType', 'company')}>
-                  <react_native_paper_1.IconButton icon="office-building" size={20} iconColor={formData.businessType === 'company' ? '#0066CC' : '#6B7280'}/>
-                  <react_native_1.Text style={[
+                    <react_native_paper_1.IconButton icon="office-building" size={20} iconColor={formData.businessType === 'company' ? '#0066CC' : '#6B7280'}/>
+                    <react_native_1.Text style={[
             styles.businessTypeText,
             formData.businessType === 'company' && styles.businessTypeTextActive
         ]}>
-                    Company
-                  </react_native_1.Text>
-                </react_native_1.TouchableOpacity>
+                      Company
+                    </react_native_1.Text>
+                  </react_native_1.TouchableOpacity>
+                </react_native_1.View>
               </react_native_1.View>
-            </react_native_1.View>
 
-            {/* Business Name - Show only for company */}
-            {formData.businessType === 'company' && (<react_native_1.View style={styles.fieldContainer}>
-                <react_native_1.Text style={styles.label}>
-                  Business 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.businessName} onChangeText={(text) => handleChange('businessName', text)} onBlur={() => handleBlur('businessName')} onFocus={() => handleFocus('businessName')} error={!!localErrors.businessName} style={styles.input} outlineColor="#E5E7EB" activeOutlineColor="#0066CC" left={<react_native_paper_1.TextInput.Icon icon="store" color="#6B7280"/>} placeholder="Your Company Name" placeholderTextColor="#9CA3AF"/>
-                {localErrors.businessName && (<react_native_paper_1.HelperText type="error" style={styles.errorText}>
-                    {localErrors.businessName}
-                  </react_native_paper_1.HelperText>)}
-              </react_native_1.View>)}
+              {/* Business Name - Show only for company */}
+              {formData.businessType === 'company' && (<react_native_1.View style={styles.fieldContainer}>
+                  <react_native_1.Text style={styles.label}>
+                    Business 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.businessName} onChangeText={(text) => handleChange('businessName', text)} onBlur={() => handleBlur('businessName')} onFocus={() => handleFocus('businessName')} error={!!localErrors.businessName} style={styles.input} outlineColor="#E5E7EB" activeOutlineColor="#0066CC" left={<react_native_paper_1.TextInput.Icon icon="store" color="#6B7280"/>} placeholder="Your Company Name" placeholderTextColor="#9CA3AF"/>
+                  {localErrors.businessName && (<react_native_paper_1.HelperText type="error" style={styles.errorText}>
+                      {localErrors.businessName}
+                    </react_native_paper_1.HelperText>)}
+                </react_native_1.View>)}
 
-            {/* Business Category - Simplified */}
-            <react_native_1.View style={styles.fieldContainer}>
-              <react_native_1.Text style={styles.label}>Category</react_native_1.Text>
-              <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.categoryScroll}>
-                <react_native_1.View style={styles.categoryContainer}>
-                  {businessCategories.map((category) => (<react_native_paper_1.Chip key={category} selected={formData.businessCategory === category} onPress={() => handleChange('businessCategory', category)} style={[
+              {/* Business Category */}
+              <react_native_1.View style={styles.fieldContainer}>
+                <react_native_1.Text style={styles.label}>Category</react_native_1.Text>
+                <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.categoryScroll}>
+                  <react_native_1.View style={styles.categoryContainer}>
+                    {businessCategories.map((category) => (<react_native_paper_1.Chip key={category} selected={formData.businessCategory === category} onPress={() => handleChange('businessCategory', category)} style={[
                 styles.categoryChip,
                 formData.businessCategory === category && styles.categoryChipSelected
             ]} textStyle={formData.businessCategory === category && styles.categoryChipTextSelected} mode="outlined" compact>
-                      {category}
-                    </react_native_paper_1.Chip>))}
-                </react_native_1.View>
-              </react_native_1.ScrollView>
-            </react_native_1.View>
+                        {category}
+                      </react_native_paper_1.Chip>))}
+                  </react_native_1.View>
+                </react_native_1.ScrollView>
+              </react_native_1.View>
 
-            {/* Country */}
-            <react_native_1.View style={styles.fieldContainer}>
-              <react_native_1.Text style={styles.label}>Country</react_native_1.Text>
-              <CountryDropdown_1.default value={formData.country || 'India'} onChange={(country) => {
+              {/* Country */}
+              <react_native_1.View style={styles.fieldContainer}>
+                <react_native_1.Text style={styles.label}>Country</react_native_1.Text>
+                <CountryDropdown_1.default value={formData.country || 'India'} onChange={(country) => {
             handleChange('country', country);
             handleChange('nationality', country);
         }} label=""/>
-            </react_native_1.View>
+              </react_native_1.View>
 
-            {/* Date of Birth */}
-            <react_native_1.View style={styles.fieldContainer}>
-              <react_native_1.Text style={styles.label}>Date of Birth</react_native_1.Text>
-              <react_native_1.TouchableOpacity onPress={() => setShowDatePicker(true)} activeOpacity={0.7}>
-                <react_native_1.View pointerEvents="none">
-                  <react_native_paper_1.TextInput mode="outlined" value={formData.dob} style={styles.input} outlineColor="#E5E7EB" activeOutlineColor="#0066CC" left={<react_native_paper_1.TextInput.Icon icon="cake" color="#6B7280"/>} right={<react_native_paper_1.TextInput.Icon icon="calendar" color="#6B7280"/>} placeholder="DD/MM/YYYY" placeholderTextColor="#9CA3AF"/>
-                </react_native_1.View>
-              </react_native_1.TouchableOpacity>
-            </react_native_1.View>
+              {/* Date of Birth */}
+              <react_native_1.View style={styles.fieldContainer}>
+                <react_native_1.Text style={styles.label}>Date of Birth</react_native_1.Text>
+                <react_native_1.TouchableOpacity onPress={() => setShowDatePicker(true)} activeOpacity={0.7}>
+                  <react_native_1.View pointerEvents="none">
+                    <react_native_paper_1.TextInput mode="outlined" value={formData.dob} style={styles.input} outlineColor="#E5E7EB" activeOutlineColor="#0066CC" left={<react_native_paper_1.TextInput.Icon icon="cake" color="#6B7280"/>} right={<react_native_paper_1.TextInput.Icon icon="calendar" color="#6B7280"/>} placeholder="DD/MM/YYYY" placeholderTextColor="#9CA3AF"/>
+                  </react_native_1.View>
+                </react_native_1.TouchableOpacity>
+              </react_native_1.View>
 
-            {/* Submit Button */}
-            <react_native_1.Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
-              <react_native_paper_1.Button mode="contained" onPress={handleSubmit} disabled={!isFormValid()} style={[
+              {/* Submit Button */}
+              <react_native_1.Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
+                <react_native_paper_1.Button mode="contained" onPress={handleSubmit} disabled={!isFormValid()} style={[
             styles.button,
             !isFormValid() && styles.buttonDisabled
         ]} labelStyle={styles.buttonLabel} contentStyle={styles.buttonContent}>
-                Continue
-              </react_native_paper_1.Button>
-            </react_native_1.Animated.View>
+                  Continue
+                </react_native_paper_1.Button>
+              </react_native_1.Animated.View>
 
-            {showDatePicker && (<datetimepicker_1.default value={formData.dob ? new Date(formData.dob) : new Date()} mode="date" display={react_native_1.Platform.OS === 'ios' ? 'spinner' : 'default'} onChange={handleDateChange} maximumDate={new Date()}/>)}
-          </react_native_paper_1.Surface>
-        </react_native_1.ScrollView>
-      </expo_linear_gradient_1.LinearGradient>
-    </react_native_1.Animated.View>);
+              {showDatePicker && (<datetimepicker_1.default value={formData.dob ? new Date(formData.dob) : new Date()} mode="date" display={react_native_1.Platform.OS === 'ios' ? 'spinner' : 'default'} onChange={handleDateChange} maximumDate={new Date()}/>)}
+            </react_native_paper_1.Surface>
+          </react_native_1.ScrollView>
+        </expo_linear_gradient_1.LinearGradient>
+      </react_native_1.Animated.View>
+    </react_native_1.KeyboardAvoidingView>);
 };
 const styles = react_native_1.StyleSheet.create({
     container: {
@@ -396,6 +394,7 @@ const styles = react_native_1.StyleSheet.create({
     },
     scrollContent: {
         padding: 12,
+        paddingBottom: 24,
     },
     headerCard: {
         flexDirection: 'row',

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

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