@airxpay/sdk-ui 1.0.6 → 1.0.8

package/dist/api/client.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Frontend SDK - API Client
+ * Axios instance with interceptors for token management and refresh
+ */
+import { AxiosInstance } from 'axios';
+export declare const createApiClient: (publicKey: string) => AxiosInstance;

package/dist/api/client.js

@@ -0,0 +1,104 @@
+"use strict";
+/**
+ * Frontend SDK - API Client
+ * Axios instance with interceptors for token management and refresh
+ */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createApiClient = void 0;
+const axios_1 = __importDefault(require("axios"));
+const tokenStorage_1 = require("../utils/tokenStorage");
+const BASE_URL = 'https://api.airxpay.com/api/merchant';
+let isRefreshing = false;
+let failedQueue = [];
+const processQueue = (error, token = null) => {
+    failedQueue.forEach(prom => {
+        if (error) {
+            prom.reject(error);
+        }
+        else {
+            prom.resolve(token);
+        }
+    });
+    failedQueue = [];
+};
+const createApiClient = (publicKey) => {
+    const client = axios_1.default.create({
+        baseURL: BASE_URL,
+        timeout: 30000,
+        headers: {
+            'Content-Type': 'application/json',
+            'X-Public-Key': publicKey,
+        },
+    });
+    // Request interceptor - automatically attach token
+    client.interceptors.request.use((config) => __awaiter(void 0, void 0, void 0, function* () {
+        const token = yield (0, tokenStorage_1.getStoredToken)();
+        if (token) {
+            config.headers.Authorization = `Bearer ${token}`;
+        }
+        return config;
+    }), (error) => Promise.reject(error));
+    // Response interceptor - handle 401 and token refresh
+    client.interceptors.response.use((response) => response, (error) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        const originalRequest = error.config;
+        if (((_a = error.response) === null || _a === void 0 ? void 0 : _a.status) !== 401 || originalRequest._retry) {
+            return Promise.reject(error);
+        }
+        if (isRefreshing) {
+            // Queue failed requests while refreshing
+            return new Promise((resolve, reject) => {
+                failedQueue.push({ resolve, reject });
+            })
+                .then(token => {
+                originalRequest.headers.Authorization = `Bearer ${token}`;
+                return client(originalRequest);
+            })
+                .catch(err => Promise.reject(err));
+        }
+        originalRequest._retry = true;
+        isRefreshing = true;
+        try {
+            const currentToken = yield (0, tokenStorage_1.getStoredToken)();
+            if (!currentToken) {
+                throw new Error('No token to refresh');
+            }
+            // Call refresh token endpoint
+            const response = yield axios_1.default.post(`${BASE_URL}/merchant/refresh-token`, null, {
+                headers: { Authorization: `Bearer ${currentToken}` },
+            });
+            const { token: newToken } = response.data;
+            if (!newToken) {
+                throw new Error('No token in refresh response');
+            }
+            yield (0, tokenStorage_1.setStoredToken)(newToken);
+            // Update auth header
+            originalRequest.headers.Authorization = `Bearer ${newToken}`;
+            processQueue(null, newToken);
+            return client(originalRequest);
+        }
+        catch (refreshError) {
+            processQueue(refreshError, null);
+            // Clear invalid token
+            yield (0, tokenStorage_1.clearStoredToken)();
+            return Promise.reject(refreshError);
+        }
+        finally {
+            isRefreshing = false;
+        }
+    }));
+    return client;
+};
+exports.createApiClient = createApiClient;

package/dist/api/merchant.d.ts

@@ -1,11 +1,32 @@
-export interface MerchantInitResponse {
-    merchantId: string;
-    airxpayMerchantId: string;
-    walletId: string;
-    mode: "live" | "test";
+/**
+ * Frontend SDK - Merchant API
+ * All merchant-related API calls
+ */
+import { AxiosInstance } from 'axios';
+import { CreateMerchantPayload, MerchantCreateResponse, MerchantStatus, KycStatus } from '../types/merchantTypes';
+export declare const initializeApi: (publicKey: string) => void;
+export declare const getApiClient: () => AxiosInstance;
+/**
+ * Verify public key during initialization
+ */
+export declare const verifyPublicKey: (publicKey: string) => Promise<{
+    valid: boolean;
+    merchantData?: any;
+}>;
+/**
+ * Create new merchant
+ * Automatically stores returned token
+ */
+export declare const createMerchant: (payload: CreateMerchantPayload) => Promise<MerchantCreateResponse>;
+/**
+ * Get merchant status
+ */
+export declare const getMerchantStatus: () => Promise<{
+    success: boolean;
+    status: MerchantStatus;
+    mode: "test" | "live";
     isKycCompleted: boolean;
     isBankDetailsCompleted: boolean;
-    kycStatus: "not_submitted" | "pending" | "verified" | "rejected";
-    status: "active" | "suspended" | "blocked";
-}
-export declare const verifyPublicKey: (publicKey: string) => Promise<MerchantInitResponse>;
+    kycStatus: KycStatus;
+    bankDetails?: any;
+}>;

package/dist/api/merchant.js

@@ -1,5 +1,8 @@
 "use strict";
-// api/merchant.ts
+/**
+ * Frontend SDK - Merchant API
+ * All merchant-related API calls
+ */
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -10,26 +13,57 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.verifyPublicKey = void 0;
+exports.getMerchantStatus = exports.createMerchant = exports.verifyPublicKey = exports.getApiClient = exports.initializeApi = void 0;
+const client_1 = require("./client");
+const tokenStorage_1 = require("../utils/tokenStorage");
+let apiClient = null;
+const initializeApi = (publicKey) => {
+    if (!(publicKey === null || publicKey === void 0 ? void 0 : publicKey.trim())) {
+        throw new Error('Public key is required');
+    }
+    apiClient = (0, client_1.createApiClient)(publicKey);
+};
+exports.initializeApi = initializeApi;
+const getApiClient = () => {
+    if (!apiClient) {
+        throw new Error('API not initialized. Call initializeApi() first.');
+    }
+    return apiClient;
+};
+exports.getApiClient = getApiClient;
 /**
- * 🔐 Production AirXPay API Base URL
- * Developer ko baseUrl pass karne ki zarurat nahi
+ * Verify public key during initialization
  */
-const AIRXPAY_BASE_URL = "http://172.20.10.12:7000";
 const verifyPublicKey = (publicKey) => __awaiter(void 0, void 0, void 0, function* () {
-    if (!publicKey) {
-        throw new Error("Public key is required");
+    try {
+        const client = (0, exports.getApiClient)();
+        const response = yield client.post('/verify', { publicKey });
+        return response.data;
     }
-    const response = yield fetch(`${AIRXPAY_BASE_URL}/api/verify-public-key`, {
-        method: "POST",
-        headers: {
-            "Content-Type": "application/json",
-        },
-        body: JSON.stringify({ publicKey }),
-    });
-    if (!response.ok) {
-        throw new Error("Invalid public key or server error");
+    catch (error) {
+        throw new Error('Invalid public key');
     }
-    return response.json();
 });
 exports.verifyPublicKey = verifyPublicKey;
+/**
+ * Create new merchant
+ * Automatically stores returned token
+ */
+const createMerchant = (payload) => __awaiter(void 0, void 0, void 0, function* () {
+    const client = (0, exports.getApiClient)();
+    const response = yield client.post('/create', payload);
+    if (response.data.token) {
+        yield (0, tokenStorage_1.setStoredToken)(response.data.token);
+    }
+    return response.data;
+});
+exports.createMerchant = createMerchant;
+/**
+ * Get merchant status
+ */
+const getMerchantStatus = () => __awaiter(void 0, void 0, void 0, function* () {
+    const client = (0, exports.getApiClient)();
+    const response = yield client.get('/status');
+    return response.data;
+});
+exports.getMerchantStatus = getMerchantStatus;

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

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

package/dist/components/steps/KYCVerification.js

@@ -51,6 +51,73 @@ 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"));
+// Text fields configuration
+const TEXT_FIELDS = [
+    {
+        key: 'panNumber',
+        label: 'PAN Number',
+        required: true,
+        icon: 'card-account-details',
+        placeholder: 'ABCDE1234F',
+        validation: (value) => {
+            if (!(value === null || value === void 0 ? void 0 : value.trim()))
+                return 'PAN number is required';
+            const panRegex = /^[A-Z]{5}[0-9]{4}[A-Z]{1}$/;
+            if (!panRegex.test(value.toUpperCase())) {
+                return 'Invalid PAN format (e.g., ABCDE1234F)';
+            }
+            return undefined;
+        },
+    },
+    {
+        key: 'aadhaarNumber',
+        label: 'Aadhaar Number',
+        required: true,
+        icon: 'card-bulleted',
+        placeholder: '1234 5678 9012',
+        keyboardType: 'numeric',
+        maxLength: 14,
+        validation: (value) => {
+            if (!(value === null || value === void 0 ? void 0 : value.trim()))
+                return 'Aadhaar number is required';
+            const cleaned = value.replace(/\s/g, '');
+            if (!/^\d{12}$/.test(cleaned)) {
+                return 'Aadhaar must be 12 digits';
+            }
+            return undefined;
+        },
+    },
+    {
+        key: 'gstNumber',
+        label: 'GST Number',
+        required: false,
+        icon: 'file-certificate',
+        placeholder: '22AAAAA0000A1Z5',
+        validation: (value) => {
+            if (!(value === null || value === void 0 ? void 0 : value.trim()))
+                return undefined;
+            const gstRegex = /^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[1-9A-Z]{1}[Z]{1}[0-9A-Z]{1}$/;
+            if (!gstRegex.test(value.toUpperCase())) {
+                return 'Invalid GST format';
+            }
+            return undefined;
+        },
+    },
+    {
+        key: 'registeredBusinessName',
+        label: 'Registered Business Name',
+        required: false,
+        icon: 'store',
+        placeholder: 'Your registered business name',
+        validation: (value) => {
+            if (value && value.length < 3) {
+                return 'Business name must be at least 3 characters';
+            }
+            return undefined;
+        },
+    },
+];
+// Document uploads configuration
 const REQUIRED_DOCUMENTS = [
     {
         key: 'panCardUrl',
@@ -58,7 +125,7 @@ const REQUIRED_DOCUMENTS = [
         required: true,
         icon: 'card-account-details',
         description: 'Clear image of PAN card',
-        acceptedTypes: ['image/jpeg', 'image/jpg', 'image/png']
+        acceptedTypes: ['image/jpeg', 'image/jpg', 'image/png', 'application/pdf'],
     },
     {
         key: 'aadhaarUrl',
@@ -66,7 +133,7 @@ const REQUIRED_DOCUMENTS = [
         required: true,
         icon: 'card-bulleted',
         description: 'Both sides of Aadhaar',
-        acceptedTypes: ['image/jpeg', 'image/jpg', 'image/png']
+        acceptedTypes: ['image/jpeg', 'image/jpg', 'image/png', 'application/pdf'],
     },
     {
         key: 'selfieUrl',
@@ -74,44 +141,83 @@ const REQUIRED_DOCUMENTS = [
         required: true,
         icon: 'face',
         description: 'Clear front-facing photo',
-        acceptedTypes: ['image/jpeg', 'image/jpg', 'image/png']
+        acceptedTypes: ['image/jpeg', 'image/jpg', 'image/png'],
     },
     {
         key: 'addressProofUrl',
         label: 'Address Proof',
-        required: false,
+        required: true,
         icon: 'home',
         description: 'Utility bill or rent agreement',
-        acceptedTypes: ['image/jpeg', 'image/jpg', 'image/png', 'application/pdf']
-    },
-    {
-        key: 'businessRegistrationUrl',
-        label: 'Business Registration',
-        required: false,
-        icon: 'file-document',
-        description: 'GST, MSME, or company registration',
-        acceptedTypes: ['image/jpeg', 'image/jpg', 'image/png', 'application/pdf']
-    },
-    {
-        key: 'gstCertificateUrl',
-        label: 'GST Certificate',
-        required: false,
-        icon: 'file-certificate',
-        description: 'If applicable',
-        acceptedTypes: ['image/jpeg', 'image/jpg', 'image/png', 'application/pdf']
+        acceptedTypes: ['image/jpeg', 'image/jpg', 'image/png', 'application/pdf'],
     },
 ];
 const KYCVerification = ({ initialData, mode, kycStatus, onNext, onBack, }) => {
-    const [documents, setDocuments] = (0, react_1.useState)(initialData.kycDocuments || {});
+    // Initialize with new KYCDetails structure
+    const [kycDetails, setKycDetails] = (0, react_1.useState)(initialData.kycDetails || {});
     const [uploadingFor, setUploadingFor] = (0, react_1.useState)(null);
     const [isVerifying, setIsVerifying] = (0, react_1.useState)(false);
     const [verificationComplete, setVerificationComplete] = (0, react_1.useState)(false);
+    const [touched, setTouched] = (0, react_1.useState)({});
+    const [fieldErrors, setFieldErrors] = (0, react_1.useState)({});
     // Check if KYC is already verified
     (0, react_1.useEffect)(() => {
         if (kycStatus === 'verified') {
             setVerificationComplete(true);
         }
     }, [kycStatus]);
+    // Validate a specific field
+    const validateField = (key, value) => {
+        const textField = TEXT_FIELDS.find(f => f.key === key);
+        if ((textField === null || textField === void 0 ? void 0 : textField.validation) && value !== undefined) {
+            return textField.validation(value);
+        }
+        return undefined;
+    };
+    // Handle text input change
+    const handleTextChange = (key, value) => {
+        // Format Aadhaar number with spaces
+        if (key === 'aadhaarNumber') {
+            value = value.replace(/\D/g, '');
+            if (value.length > 12)
+                value = value.slice(0, 12);
+            // Add space after every 4 digits
+            const parts = value.match(/.{1,4}/g);
+            value = parts ? parts.join(' ') : value;
+        }
+        // Format PAN to uppercase
+        if (key === 'panNumber' || key === 'gstNumber') {
+            value = value.toUpperCase();
+        }
+        setKycDetails(prev => (Object.assign(Object.assign({}, prev), { [key]: value })));
+        // Validate on change
+        const error = validateField(key, value);
+        setFieldErrors(prev => {
+            const newErrors = Object.assign({}, prev);
+            if (error) {
+                newErrors[key] = error;
+            }
+            else {
+                delete newErrors[key];
+            }
+            return newErrors;
+        });
+    };
+    const handleBlur = (key) => {
+        setTouched(prev => (Object.assign(Object.assign({}, prev), { [key]: true })));
+        const value = kycDetails[key];
+        const error = validateField(key, value);
+        setFieldErrors(prev => {
+            const newErrors = Object.assign({}, prev);
+            if (error) {
+                newErrors[key] = error;
+            }
+            else {
+                delete newErrors[key];
+            }
+            return newErrors;
+        });
+    };
     const validateDocumentType = (file, documentKey) => {
         const document = REQUIRED_DOCUMENTS.find(doc => doc.key === documentKey);
         if (!document || !document.acceptedTypes)
@@ -131,7 +237,7 @@ const KYCVerification = ({ initialData, mode, kycStatus, onNext, onBack, }) => {
         setUploadingFor(documentKey);
         // Simulate upload delay
         setTimeout(() => {
-            setDocuments(prev => (Object.assign(Object.assign({}, prev), { [documentKey]: file.uri || 'uploaded_file.jpg' })));
+            setKycDetails(prev => (Object.assign(Object.assign({}, prev), { [documentKey]: file.uri || 'uploaded_file.jpg' })));
             setUploadingFor(null);
             if (mode === 'test') {
                 react_native_1.Alert.alert('Test Mode', 'Document would be auto-approved in test mode');
@@ -145,9 +251,9 @@ const KYCVerification = ({ initialData, mode, kycStatus, onNext, onBack, }) => {
                 text: 'Remove',
                 style: 'destructive',
                 onPress: () => {
-                    const updated = Object.assign({}, documents);
+                    const updated = Object.assign({}, kycDetails);
                     delete updated[documentKey];
-                    setDocuments(updated);
+                    setKycDetails(updated);
                 },
             },
         ]);
@@ -176,15 +282,24 @@ const KYCVerification = ({ initialData, mode, kycStatus, onNext, onBack, }) => {
           </react_native_1.View>);
         }
     };
-    const isRequiredDocumentsUploaded = () => {
-        return REQUIRED_DOCUMENTS
+    const isRequiredFieldsFilled = () => {
+        // Check required text fields
+        const textFieldsValid = TEXT_FIELDS
+            .filter(field => field.required)
+            .every(field => {
+            const value = kycDetails[field.key];
+            return value && value.trim().length > 0;
+        });
+        // Check required documents
+        const documentsValid = REQUIRED_DOCUMENTS
             .filter(doc => doc.required)
-            .every(doc => documents[doc.key]);
+            .every(doc => kycDetails[doc.key]);
+        return textFieldsValid && documentsValid && Object.keys(fieldErrors).length === 0;
     };
     const handleSubmit = () => {
-        // Validate required documents
-        if (!isRequiredDocumentsUploaded()) {
-            react_native_1.Alert.alert('Error', 'Please upload all required documents');
+        // Validate all required fields
+        if (!isRequiredFieldsFilled()) {
+            react_native_1.Alert.alert('Error', 'Please fill all required fields and upload required documents');
             return;
         }
         // Show verifying state
@@ -194,14 +309,14 @@ const KYCVerification = ({ initialData, mode, kycStatus, onNext, onBack, }) => {
             setIsVerifying(false);
             if (mode === 'test') {
                 onNext({
-                    kycDocuments: documents,
+                    kycDetails: kycDetails,
                     isKycCompleted: true,
                     kycStatus: 'verified',
                 });
             }
             else {
                 onNext({
-                    kycDocuments: documents,
+                    kycDetails: kycDetails,
                     isKycCompleted: false,
                     kycStatus: 'pending',
                 });
@@ -211,9 +326,17 @@ const KYCVerification = ({ initialData, mode, kycStatus, onNext, onBack, }) => {
     const handleBack = () => {
         onBack();
     };
-    const requiredDocsCount = REQUIRED_DOCUMENTS.filter(doc => doc.required).length;
-    const uploadedRequiredCount = REQUIRED_DOCUMENTS.filter(doc => doc.required && documents[doc.key]).length;
-    const progress = (uploadedRequiredCount / requiredDocsCount) * 100;
+    const requiredTextCount = TEXT_FIELDS.filter(f => f.required).length;
+    const requiredDocCount = REQUIRED_DOCUMENTS.filter(d => d.required).length;
+    const totalRequired = requiredTextCount + requiredDocCount;
+    const filledTextCount = TEXT_FIELDS
+        .filter(f => f.required && kycDetails[f.key])
+        .length;
+    const filledDocCount = REQUIRED_DOCUMENTS
+        .filter(d => d.required && kycDetails[d.key])
+        .length;
+    const filledTotal = filledTextCount + filledDocCount;
+    const progress = (filledTotal / totalRequired) * 100;
     // If already verified, show success state
     if (verificationComplete) {
         return (<react_native_1.View style={styles.container}>
@@ -250,7 +373,7 @@ const KYCVerification = ({ initialData, mode, kycStatus, onNext, onBack, }) => {
               <react_native_1.View style={styles.headerText}>
                 <react_native_1.Text style={styles.title}>KYC Verification</react_native_1.Text>
                 <react_native_1.Text style={styles.subtitle}>
-                  Upload your documents for verification
+                  Enter your details and upload documents
                 </react_native_1.Text>
               </react_native_1.View>
             </react_native_paper_1.Surface>
@@ -289,7 +412,7 @@ const KYCVerification = ({ initialData, mode, kycStatus, onNext, onBack, }) => {
                   <expo_linear_gradient_1.LinearGradient colors={['#0066CC', '#0099FF']} style={[styles.progressFill, { width: `${progress}%` }]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}/>
                 </react_native_1.View>
                 <react_native_1.Text style={styles.progressText}>
-                  {uploadedRequiredCount}/{requiredDocsCount} Required
+                  {filledTotal}/{totalRequired} Completed
                 </react_native_1.Text>
               </react_native_1.View>
 
@@ -300,19 +423,38 @@ const KYCVerification = ({ initialData, mode, kycStatus, onNext, onBack, }) => {
                     <react_native_1.View style={styles.rejectionText}>
                       <react_native_1.Text style={styles.rejectionTitle}>KYC Rejected</react_native_1.Text>
                       <react_native_1.Text style={styles.rejectionMessage}>
-                        Please upload clear, valid documents
+                        Please check and resubmit your details
                       </react_native_1.Text>
                     </react_native_1.View>
                   </react_native_1.View>
                 </react_native_paper_1.Surface>)}
 
-              {/* Document Upload Sections */}
-              <react_native_1.View style={styles.documentsContainer}>
+              {/* Text Fields Section */}
+              <react_native_1.View style={styles.sectionContainer}>
+                <react_native_1.Text style={styles.sectionTitle}>Personal Details</react_native_1.Text>
+                <react_native_1.Text style={styles.sectionSubtitle}>Enter your identification numbers</react_native_1.Text>
+                
+                {TEXT_FIELDS.map((field, index) => (<react_native_1.View key={field.key} style={styles.fieldContainer}>
+                    <react_native_1.Text style={styles.label}>
+                      {field.label} {field.required && <react_native_1.Text style={styles.requiredStar}>*</react_native_1.Text>}
+                    </react_native_1.Text>
+                    <react_native_paper_1.TextInput mode="outlined" value={kycDetails[field.key] || ''} onChangeText={(text) => handleTextChange(field.key, text)} onBlur={() => handleBlur(field.key)} keyboardType={field.keyboardType || 'default'} error={!!fieldErrors[field.key]} style={styles.input} outlineColor="#E5E7EB" activeOutlineColor="#0066CC" left={<react_native_paper_1.TextInput.Icon icon={field.icon} color="#6B7280"/>} placeholder={field.placeholder} placeholderTextColor="#9CA3AF" maxLength={field.maxLength}/>
+                    {fieldErrors[field.key] && (<react_native_paper_1.HelperText type="error" style={styles.errorText}>
+                        {fieldErrors[field.key]}
+                      </react_native_paper_1.HelperText>)}
+                  </react_native_1.View>))}
+              </react_native_1.View>
+
+              {/* Document Upload Section */}
+              <react_native_1.View style={[styles.sectionContainer, styles.documentSection]}>
+                <react_native_1.Text style={styles.sectionTitle}>Document Uploads</react_native_1.Text>
+                <react_native_1.Text style={styles.sectionSubtitle}>Upload clear images of your documents</react_native_1.Text>
+                
                 {REQUIRED_DOCUMENTS.map((doc, index) => {
             var _a;
             return (<react_native_1.View key={doc.key} style={styles.documentItem}>
                     {index > 0 && <react_native_1.View style={styles.documentDivider}/>}
-                    <FileUploader_1.default label={doc.label} required={doc.required} description={doc.description} icon={doc.icon} value={documents[doc.key]} onUpload={(file) => handleDocumentUpload(doc.key, file)} onRemove={() => handleDocumentRemove(doc.key)} uploading={uploadingFor === doc.key} mode={mode} accept={((_a = doc.acceptedTypes) === null || _a === void 0 ? void 0 : _a.join(',')) || '*'}/>
+                    <FileUploader_1.default label={doc.label} required={doc.required} description={doc.description} icon={doc.icon} value={kycDetails[doc.key]} onUpload={(file) => handleDocumentUpload(doc.key, file)} onRemove={() => handleDocumentRemove(doc.key)} uploading={uploadingFor === doc.key} mode={mode} accept={((_a = doc.acceptedTypes) === null || _a === void 0 ? void 0 : _a.join(',')) || '*'}/>
                   </react_native_1.View>);
         })}
               </react_native_1.View>
@@ -338,9 +480,9 @@ const KYCVerification = ({ initialData, mode, kycStatus, onNext, onBack, }) => {
                 
                 <react_native_1.TouchableOpacity style={[
             styles.submitButton,
-            (!isRequiredDocumentsUploaded() || isVerifying) && styles.submitButtonDisabled
-        ]} onPress={handleSubmit} disabled={!isRequiredDocumentsUploaded() || isVerifying}>
-                  <expo_linear_gradient_1.LinearGradient colors={isRequiredDocumentsUploaded() && !isVerifying ? ['#0066CC', '#0099FF'] : ['#9CA3AF', '#9CA3AF']} style={styles.submitGradient} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}>
+            (!isRequiredFieldsFilled() || isVerifying) && styles.submitButtonDisabled
+        ]} onPress={handleSubmit} disabled={!isRequiredFieldsFilled() || isVerifying}>
+                  <expo_linear_gradient_1.LinearGradient colors={isRequiredFieldsFilled() && !isVerifying ? ['#0066CC', '#0099FF'] : ['#9CA3AF', '#9CA3AF']} style={styles.submitGradient} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}>
                     {isVerifying ? (<react_native_1.View style={styles.verifyingContent}>
                         <react_native_paper_1.ActivityIndicator size="small" color="#FFFFFF"/>
                         <react_native_1.Text style={[styles.submitButtonText, styles.verifyingText]}>
@@ -559,6 +701,45 @@ const styles = react_native_1.StyleSheet.create({
         color: '#7F1D1D',
         marginTop: 1,
     },
+    sectionContainer: {
+        marginBottom: 20,
+    },
+    documentSection: {
+        marginTop: 8,
+    },
+    sectionTitle: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#111827',
+        marginBottom: 4,
+    },
+    sectionSubtitle: {
+        fontSize: 12,
+        color: '#6B7280',
+        marginBottom: 12,
+    },
+    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,
+    },
     documentsContainer: {
         marginBottom: 8,
     },