@airxpay/sdk-ui 1.0.0

package/dist/components/steps/BasicDetailsForm.js

@@ -0,0 +1,581 @@
+"use strict";
+// components/steps/BasicDetailsForm.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 datetimepicker_1 = __importDefault(require("@react-native-community/datetimepicker"));
+const CountryDropdown_1 = __importDefault(require("../common/CountryDropdown"));
+const expo_linear_gradient_1 = require("expo-linear-gradient");
+const BasicDetailsForm = ({ initialData, onNext, errors, setErrors, }) => {
+    // Animation values
+    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)({
+        sellerName: '',
+        sellerEmail: '',
+        sellerPhone: '',
+        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);
+    const [localErrors, setLocalErrors] = (0, react_1.useState)({});
+    // Animation on mount
+    (0, react_1.useEffect)(() => {
+        react_native_1.Animated.parallel([
+            react_native_1.Animated.timing(fadeAnim, {
+                toValue: 1,
+                duration: 500,
+                useNativeDriver: true,
+            }),
+            react_native_1.Animated.timing(slideAnim, {
+                toValue: 0,
+                duration: 500,
+                useNativeDriver: true,
+            }),
+            react_native_1.Animated.spring(scaleAnim, {
+                toValue: 1,
+                friction: 8,
+                tension: 40,
+                useNativeDriver: true,
+            }),
+        ]).start();
+    }, []);
+    const validateField = (field, value) => {
+        switch (field) {
+            case 'sellerName':
+                if (!value?.trim())
+                    return 'Seller 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';
+                return undefined;
+            case 'sellerEmail':
+                if (!value?.trim())
+                    return 'Email is required';
+                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+                if (!emailRegex.test(value))
+                    return 'Invalid email format';
+                return undefined;
+            case 'sellerPhone':
+                if (value && !/^\d{10}$/.test(value.replace(/\D/g, ''))) {
+                    return 'Phone must be 10 digits';
+                }
+                return undefined;
+            case 'businessName':
+                if (formData.businessType === 'company' && !value?.trim()) {
+                    return 'Business name is required for companies';
+                }
+                return undefined;
+            default:
+                return undefined;
+        }
+    };
+    const handleChange = (field, value) => {
+        setFormData(prev => ({ ...prev, [field]: value }));
+        // Validate on change
+        const error = validateField(field, value);
+        const newErrors = { ...localErrors };
+        if (error) {
+            newErrors[field] = error;
+        }
+        else {
+            delete newErrors[field];
+        }
+        setLocalErrors(newErrors);
+        setErrors(newErrors);
+    };
+    const handleBlur = (field) => {
+        setFocusedField(null);
+        setTouched(prev => ({ ...prev, [field]: true }));
+        const error = validateField(field, formData[field]);
+        const newErrors = { ...localErrors };
+        if (error) {
+            newErrors[field] = error;
+        }
+        else {
+            delete newErrors[field];
+        }
+        setLocalErrors(newErrors);
+        setErrors(newErrors);
+    };
+    const handleFocus = (field) => {
+        setFocusedField(field);
+    };
+    const handleDateChange = (event, selectedDate) => {
+        setShowDatePicker(react_native_1.Platform.OS === 'ios');
+        if (selectedDate) {
+            const formattedDate = selectedDate.toISOString().split('T')[0];
+            handleChange('dob', formattedDate);
+        }
+    };
+    const validateForm = () => {
+        const newErrors = {};
+        const requiredFields = ['sellerName', 'sellerEmail'];
+        if (formData.businessType === 'company') {
+            requiredFields.push('businessName');
+        }
+        requiredFields.forEach(field => {
+            const error = validateField(field, formData[field]);
+            if (error)
+                newErrors[field] = error;
+        });
+        setLocalErrors(newErrors);
+        setErrors(newErrors);
+        return Object.keys(newErrors).length === 0;
+    };
+    const handleSubmit = () => {
+        react_native_1.Keyboard.dismiss();
+        if (validateForm()) {
+            // Animate button press
+            react_native_1.Animated.sequence([
+                react_native_1.Animated.timing(scaleAnim, {
+                    toValue: 0.95,
+                    duration: 100,
+                    useNativeDriver: true,
+                }),
+                react_native_1.Animated.timing(scaleAnim, {
+                    toValue: 1,
+                    duration: 100,
+                    useNativeDriver: true,
+                }),
+            ]).start(() => {
+                onNext(formData);
+            });
+        }
+    };
+    const isFormValid = () => {
+        const requiredFields = ['sellerName', 'sellerEmail'];
+        if (formData.businessType === 'company') {
+            requiredFields.push('businessName');
+        }
+        // Check if all required fields have values
+        const allRequiredFilled = requiredFields.every(field => {
+            const value = formData[field];
+            return typeof value === 'string' && value.trim().length > 0;
+        });
+        // 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 = [
+        'Electronics',
+        'Fashion',
+        'Home & Living',
+        'Books',
+        'Sports',
+        'Toys',
+        'Automotive',
+        'Health',
+        'Food',
+        'Other',
+    ];
+    return (<react_native_1.Animated.View style={[
+            styles.container,
+            {
+                opacity: fadeAnim,
+                transform: [
+                    { translateY: slideAnim },
+                    { scale: scaleAnim }
+                ]
+            }
+        ]}>
+      <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>
+              </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>
+
+            {/* 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>
+
+            {/* 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>
+
+            {/* 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>
+
+            {/* 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={[
+            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={[
+            styles.businessTypeText,
+            formData.businessType === 'individual' && styles.businessTypeTextActive
+        ]}>
+                    Individual
+                  </react_native_1.Text>
+                </react_native_1.TouchableOpacity>
+
+                <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={[
+            styles.businessTypeText,
+            formData.businessType === 'company' && styles.businessTypeTextActive
+        ]}>
+                    Company
+                  </react_native_1.Text>
+                </react_native_1.TouchableOpacity>
+              </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 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={[
+                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>
+
+            {/* 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>
+
+            {/* 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={[
+            styles.button,
+            !isFormValid() && styles.buttonDisabled
+        ]} labelStyle={styles.buttonLabel} contentStyle={styles.buttonContent}>
+                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>);
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#FFFFFF',
+    },
+    gradient: {
+        flex: 1,
+    },
+    scrollContent: {
+        padding: 12,
+    },
+    headerCard: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 16,
+        backgroundColor: '#FFFFFF',
+        borderRadius: 16,
+        marginBottom: 12,
+        elevation: 2,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+    },
+    headerIcon: {
+        width: 48,
+        height: 48,
+        borderRadius: 24,
+        backgroundColor: '#F0F7FF',
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginRight: 12,
+    },
+    headerText: {
+        flex: 1,
+    },
+    title: {
+        fontSize: 20,
+        fontWeight: '700',
+        color: '#111827',
+    },
+    subtitle: {
+        fontSize: 13,
+        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,
+        backgroundColor: '#0066CC',
+    },
+    progressDotInactive: {
+        backgroundColor: '#E5E7EB',
+    },
+    progressLine: {
+        width: 30,
+        height: 2,
+        backgroundColor: '#E5E7EB',
+        marginHorizontal: 4,
+    },
+    progressText: {
+        fontSize: 10,
+        color: '#9CA3AF',
+        marginTop: 4,
+    },
+    progressTextActive: {
+        fontSize: 10,
+        color: '#0066CC',
+        marginTop: 4,
+        fontWeight: '600',
+    },
+    fieldContainer: {
+        marginBottom: 16,
+    },
+    label: {
+        fontSize: 13,
+        fontWeight: '500',
+        color: '#374151',
+        marginBottom: 6,
+    },
+    requiredStar: {
+        color: '#EF4444',
+    },
+    input: {
+        backgroundColor: '#FFFFFF',
+        fontSize: 14,
+        height: 48,
+    },
+    errorText: {
+        fontSize: 11,
+        color: '#EF4444',
+        marginTop: 2,
+    },
+    businessTypeContainer: {
+        flexDirection: 'row',
+        gap: 8,
+    },
+    businessTypeButton: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 6,
+        paddingHorizontal: 8,
+        backgroundColor: '#F9FAFB',
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: '#E5E7EB',
+    },
+    businessTypeButtonActive: {
+        borderColor: '#0066CC',
+        backgroundColor: '#F0F7FF',
+    },
+    businessTypeText: {
+        fontSize: 13,
+        color: '#6B7280',
+        marginLeft: -4,
+    },
+    businessTypeTextActive: {
+        color: '#0066CC',
+        fontWeight: '500',
+    },
+    categoryScroll: {
+        marginTop: 4,
+    },
+    categoryContainer: {
+        flexDirection: 'row',
+        paddingVertical: 2,
+    },
+    categoryChip: {
+        marginRight: 6,
+        backgroundColor: '#FFFFFF',
+        borderColor: '#E5E7EB',
+        height: 32,
+    },
+    categoryChipSelected: {
+        backgroundColor: '#0066CC',
+        borderColor: '#0066CC',
+    },
+    categoryChipTextSelected: {
+        color: '#FFFFFF',
+    },
+    button: {
+        marginTop: 20,
+        borderRadius: 12,
+        backgroundColor: '#0066CC',
+    },
+    buttonDisabled: {
+        backgroundColor: '#9CA3AF',
+        opacity: 0.7,
+    },
+    buttonLabel: {
+        fontSize: 15,
+        fontWeight: '600',
+        color: '#FFFFFF',
+    },
+    buttonContent: {
+        paddingVertical: 6,
+    },
+});
+exports.default = BasicDetailsForm;