@airxpay/sdk-ui 1.0.0

package/dist/components/steps/KYCVerification.js

@@ -0,0 +1,510 @@
+"use strict";
+// components/steps/KYCVerification.tsx
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_paper_1 = require("react-native-paper");
+const expo_linear_gradient_1 = require("expo-linear-gradient");
+const FileUploader_1 = __importDefault(require("../common/FileUploader"));
+const REQUIRED_DOCUMENTS = [
+    { key: 'panCardUrl', label: 'PAN Card', required: true, icon: 'card-account-details', description: 'Clear image of PAN card' },
+    { key: 'aadhaarUrl', label: 'Aadhaar Card', required: true, icon: 'card-bulleted', description: 'Both sides of Aadhaar' },
+    { key: 'selfieUrl', label: 'Selfie', required: true, icon: 'face', description: 'Clear front-facing photo' },
+    { key: 'addressProofUrl', label: 'Address Proof', required: false, icon: 'home', description: 'Utility bill or rent agreement' },
+    { key: 'businessRegistrationUrl', label: 'Business Registration', required: false, icon: 'file-document', description: 'GST, MSME, or company registration' },
+    { key: 'gstCertificateUrl', label: 'GST Certificate', required: false, icon: 'file-certificate', description: 'If applicable' },
+];
+const KYCVerification = ({ initialData, mode, kycStatus, onNext, onBack, }) => {
+    const [documents, setDocuments] = (0, react_1.useState)(initialData.kycDocuments || {});
+    const [uploadingFor, setUploadingFor] = (0, react_1.useState)(null);
+    const handleDocumentUpload = async (documentKey, file) => {
+        setUploadingFor(documentKey);
+        setTimeout(() => {
+            setDocuments(prev => ({ ...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');
+            }
+        }, 1000);
+    };
+    const handleDocumentRemove = (documentKey) => {
+        react_native_1.Alert.alert('Remove Document', 'Are you sure you want to remove this document?', [
+            { text: 'Cancel', style: 'cancel' },
+            {
+                text: 'Remove',
+                style: 'destructive',
+                onPress: () => {
+                    const updated = { ...documents };
+                    delete updated[documentKey];
+                    setDocuments(updated);
+                },
+            },
+        ]);
+    };
+    const getKYCStatusBadge = () => {
+        switch (kycStatus) {
+            case 'verified':
+                return (<react_native_1.View style={[styles.statusBadge, styles.verified]}>
+            <react_native_paper_1.IconButton icon="check-circle" size={14} iconColor="#10B981"/>
+            <react_native_1.Text style={styles.statusTextVerified}>Verified</react_native_1.Text>
+          </react_native_1.View>);
+            case 'pending':
+                return (<react_native_1.View style={[styles.statusBadge, styles.pending]}>
+            <react_native_paper_1.IconButton icon="clock-outline" size={14} iconColor="#D97706"/>
+            <react_native_1.Text style={styles.statusTextPending}>Pending</react_native_1.Text>
+          </react_native_1.View>);
+            case 'rejected':
+                return (<react_native_1.View style={[styles.statusBadge, styles.rejected]}>
+            <react_native_paper_1.IconButton icon="alert-circle" size={14} iconColor="#DC2626"/>
+            <react_native_1.Text style={styles.statusTextRejected}>Rejected</react_native_1.Text>
+          </react_native_1.View>);
+            default:
+                return (<react_native_1.View style={[styles.statusBadge, styles.notSubmitted]}>
+            <react_native_paper_1.IconButton icon="clock-outline" size={14} iconColor="#6B7280"/>
+            <react_native_1.Text style={styles.statusTextNotSubmitted}>Not Submitted</react_native_1.Text>
+          </react_native_1.View>);
+        }
+    };
+    const isRequiredDocumentsUploaded = () => {
+        return REQUIRED_DOCUMENTS
+            .filter(doc => doc.required)
+            .every(doc => documents[doc.key]);
+    };
+    const handleSubmit = () => {
+        if (mode === 'test') {
+            onNext({
+                kycDocuments: documents,
+                isKycCompleted: true,
+                kycStatus: 'verified',
+            });
+        }
+        else {
+            onNext({
+                kycDocuments: documents,
+                isKycCompleted: false,
+                kycStatus: 'pending',
+            });
+        }
+    };
+    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;
+    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="shield-account" size={24} iconColor="#0066CC"/>
+            </react_native_1.View>
+            <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
+              </react_native_1.Text>
+            </react_native_1.View>
+          </react_native_paper_1.Surface>
+
+          {/* Form Card */}
+          <react_native_paper_1.Surface style={styles.formCard}>
+            {/* Progress Steps */}
+            <react_native_1.View style={styles.progressContainer}>
+              <react_native_1.View style={styles.progressStep}>
+                <react_native_1.View style={[styles.progressDot, styles.progressDotCompleted]}>
+                  <react_native_paper_1.IconButton icon="check" size={12} iconColor="#FFFFFF"/>
+                </react_native_1.View>
+                <react_native_1.Text style={styles.progressTextCompleted}>Basic</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles.progressLine}/>
+              <react_native_1.View style={styles.progressStep}>
+                <expo_linear_gradient_1.LinearGradient colors={['#0066CC', '#0099FF']} style={styles.progressDotActive}/>
+                <react_native_1.Text style={styles.progressTextActive}>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>
+
+            {/* KYC Status */}
+            <react_native_1.View style={styles.statusContainer}>
+              <react_native_1.Text style={styles.statusLabel}>Status:</react_native_1.Text>
+              {getKYCStatusBadge()}
+            </react_native_1.View>
+
+            {/* Upload Progress */}
+            <react_native_1.View style={styles.progressBarContainer}>
+              <react_native_1.View style={styles.progressBar}>
+                <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
+              </react_native_1.Text>
+            </react_native_1.View>
+
+            {/* Rejection Message */}
+            {kycStatus === 'rejected' && (<react_native_paper_1.Surface style={styles.rejectionCard}>
+                <react_native_1.View style={styles.rejectionContent}>
+                  <react_native_paper_1.IconButton icon="alert-circle" size={16} iconColor="#DC2626"/>
+                  <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
+                    </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}>
+              {REQUIRED_DOCUMENTS.map((doc, index) => (<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}/>
+                </react_native_1.View>))}
+            </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}>
+                      Auto-approved in test mode
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>
+              </react_native_paper_1.Surface>)}
+
+            {/* Action Buttons */}
+            <react_native_1.View style={styles.buttonContainer}>
+              <react_native_1.TouchableOpacity style={styles.backButton} onPress={onBack}>
+                <react_native_1.Text style={styles.backButtonText}>Back</react_native_1.Text>
+              </react_native_1.TouchableOpacity>
+              
+              <react_native_1.TouchableOpacity style={[
+            styles.submitButton,
+            !isRequiredDocumentsUploaded() && styles.submitButtonDisabled
+        ]} onPress={handleSubmit} disabled={!isRequiredDocumentsUploaded()}>
+                <expo_linear_gradient_1.LinearGradient colors={isRequiredDocumentsUploaded() ? ['#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' ? 'Continue' : 'Submit KYC'}
+                  </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>);
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#FFFFFF',
+    },
+    gradient: {
+        flex: 1,
+    },
+    scrollContent: {
+        padding: 12,
+    },
+    headerCard: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 12,
+        backgroundColor: '#FFFFFF',
+        borderRadius: 16,
+        marginBottom: 12,
+        elevation: 2,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+    },
+    headerIcon: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        backgroundColor: '#F0F7FF',
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginRight: 12,
+    },
+    headerText: {
+        flex: 1,
+    },
+    title: {
+        fontSize: 18,
+        fontWeight: '700',
+        color: '#111827',
+    },
+    subtitle: {
+        fontSize: 12,
+        color: '#6B7280',
+        marginTop: 2,
+    },
+    formCard: {
+        backgroundColor: '#FFFFFF',
+        borderRadius: 20,
+        padding: 16,
+        elevation: 2,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+    },
+    progressContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: 16,
+        paddingHorizontal: 8,
+    },
+    progressStep: {
+        alignItems: 'center',
+    },
+    progressDot: {
+        width: 24,
+        height: 24,
+        borderRadius: 12,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    progressDotCompleted: {
+        backgroundColor: '#10B981',
+    },
+    progressDotActive: {
+        width: 24,
+        height: 24,
+        borderRadius: 12,
+    },
+    progressDotInactive: {
+        backgroundColor: '#E5E7EB',
+    },
+    progressLine: {
+        width: 30,
+        height: 2,
+        backgroundColor: '#E5E7EB',
+        marginHorizontal: 4,
+    },
+    progressTextCompleted: {
+        fontSize: 9,
+        color: '#10B981',
+        marginTop: 4,
+        fontWeight: '500',
+    },
+    progressTextActive: {
+        fontSize: 9,
+        color: '#0066CC',
+        marginTop: 4,
+        fontWeight: '600',
+    },
+    progressText: {
+        fontSize: 9,
+        color: '#9CA3AF',
+        marginTop: 4,
+    },
+    statusContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 12,
+        gap: 8,
+    },
+    statusLabel: {
+        fontSize: 12,
+        fontWeight: '500',
+        color: '#374151',
+    },
+    statusBadge: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 8,
+        paddingVertical: 2,
+        borderRadius: 12,
+        height: 24,
+    },
+    verified: {
+        backgroundColor: '#D1FAE5',
+    },
+    pending: {
+        backgroundColor: '#FEF3C7',
+    },
+    rejected: {
+        backgroundColor: '#FEE2E2',
+    },
+    notSubmitted: {
+        backgroundColor: '#F3F4F6',
+    },
+    statusTextVerified: {
+        fontSize: 11,
+        color: '#10B981',
+        fontWeight: '500',
+        marginRight: 4,
+    },
+    statusTextPending: {
+        fontSize: 11,
+        color: '#D97706',
+        fontWeight: '500',
+        marginRight: 4,
+    },
+    statusTextRejected: {
+        fontSize: 11,
+        color: '#DC2626',
+        fontWeight: '500',
+        marginRight: 4,
+    },
+    statusTextNotSubmitted: {
+        fontSize: 11,
+        color: '#6B7280',
+        fontWeight: '500',
+        marginRight: 4,
+    },
+    progressBarContainer: {
+        marginBottom: 16,
+    },
+    progressBar: {
+        height: 4,
+        backgroundColor: '#E5E7EB',
+        borderRadius: 2,
+        overflow: 'hidden',
+        marginBottom: 4,
+    },
+    progressFill: {
+        height: '100%',
+        borderRadius: 2,
+    },
+    rejectionCard: {
+        backgroundColor: '#FEE2E2',
+        borderRadius: 10,
+        marginBottom: 12,
+        overflow: 'hidden',
+    },
+    rejectionContent: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 8,
+    },
+    rejectionText: {
+        flex: 1,
+    },
+    rejectionTitle: {
+        fontSize: 12,
+        fontWeight: '600',
+        color: '#991B1B',
+    },
+    rejectionMessage: {
+        fontSize: 11,
+        color: '#7F1D1D',
+        marginTop: 1,
+    },
+    documentsContainer: {
+        marginBottom: 8,
+    },
+    documentItem: {
+        marginBottom: 8,
+    },
+    documentDivider: {
+        height: 1,
+        backgroundColor: '#F3F4F6',
+        marginBottom: 8,
+    },
+    testModeCard: {
+        backgroundColor: '#FEF3C7',
+        borderRadius: 10,
+        marginVertical: 8,
+        overflow: 'hidden',
+    },
+    testModeContent: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 8,
+    },
+    testModeText: {
+        flex: 1,
+    },
+    testModeTitle: {
+        fontSize: 12,
+        fontWeight: '600',
+        color: '#92400E',
+    },
+    testModeDescription: {
+        fontSize: 11,
+        color: '#92400E',
+        marginTop: 1,
+    },
+    buttonContainer: {
+        flexDirection: 'row',
+        gap: 8,
+        marginTop: 12,
+    },
+    backButton: {
+        flex: 1,
+        paddingVertical: 8,
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: '#E5E7EB',
+        alignItems: 'center',
+        backgroundColor: '#FFFFFF',
+    },
+    backButtonText: {
+        fontSize: 12,
+        fontWeight: '500',
+        color: '#6B7280',
+    },
+    submitButton: {
+        flex: 2,
+        borderRadius: 10,
+        overflow: 'hidden',
+    },
+    submitButtonDisabled: {
+        opacity: 0.7,
+    },
+    submitGradient: {
+        paddingVertical: 8,
+        alignItems: 'center',
+    },
+    submitButtonText: {
+        fontSize: 12,
+        fontWeight: '600',
+        color: '#FFFFFF',
+    },
+});
+exports.default = KYCVerification;