@airxpay/sdk-ui 1.0.3 → 1.0.6

package/dist/components/steps/KYCVerification.js

@@ -52,18 +52,84 @@ 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' },
+    {
+        key: 'panCardUrl',
+        label: 'PAN Card',
+        required: true,
+        icon: 'card-account-details',
+        description: 'Clear image of PAN card',
+        acceptedTypes: ['image/jpeg', 'image/jpg', 'image/png']
+    },
+    {
+        key: 'aadhaarUrl',
+        label: 'Aadhaar Card',
+        required: true,
+        icon: 'card-bulleted',
+        description: 'Both sides of Aadhaar',
+        acceptedTypes: ['image/jpeg', 'image/jpg', 'image/png']
+    },
+    {
+        key: 'selfieUrl',
+        label: 'Selfie',
+        required: true,
+        icon: 'face',
+        description: 'Clear front-facing photo',
+        acceptedTypes: ['image/jpeg', 'image/jpg', 'image/png']
+    },
+    {
+        key: 'addressProofUrl',
+        label: 'Address Proof',
+        required: false,
+        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']
+    },
 ];
 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 [isVerifying, setIsVerifying] = (0, react_1.useState)(false);
+    const [verificationComplete, setVerificationComplete] = (0, react_1.useState)(false);
+    // Check if KYC is already verified
+    (0, react_1.useEffect)(() => {
+        if (kycStatus === 'verified') {
+            setVerificationComplete(true);
+        }
+    }, [kycStatus]);
+    const validateDocumentType = (file, documentKey) => {
+        const document = REQUIRED_DOCUMENTS.find(doc => doc.key === documentKey);
+        if (!document || !document.acceptedTypes)
+            return true;
+        const mimeType = file.mimeType || '';
+        if (!document.acceptedTypes.includes(mimeType)) {
+            react_native_1.Alert.alert('Invalid File Type', `Please upload a valid file type: ${document.acceptedTypes.map(t => t.split('/')[1]).join(', ')}`);
+            return false;
+        }
+        return true;
+    };
     const handleDocumentUpload = (documentKey, file) => __awaiter(void 0, void 0, void 0, function* () {
+        // Validate file type
+        if (!validateDocumentType(file, documentKey)) {
+            return;
+        }
         setUploadingFor(documentKey);
+        // Simulate upload delay
         setTimeout(() => {
             setDocuments(prev => (Object.assign(Object.assign({}, prev), { [documentKey]: file.uri || 'uploaded_file.jpg' })));
             setUploadingFor(null);
@@ -90,22 +156,22 @@ const KYCVerification = ({ initialData, mode, kycStatus, onNext, onBack, }) => {
         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_paper_1.IconButton icon="check-circle" size={16} 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_paper_1.IconButton icon="clock-outline" size={16} 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_paper_1.IconButton icon="alert-circle" size={16} 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_paper_1.IconButton icon="clock-outline" size={16} iconColor="#6B7280"/>
             <react_native_1.Text style={styles.statusTextNotSubmitted}>Not Submitted</react_native_1.Text>
           </react_native_1.View>);
         }
@@ -116,133 +182,181 @@ const KYCVerification = ({ initialData, mode, kycStatus, onNext, onBack, }) => {
             .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',
-            });
+        // Validate required documents
+        if (!isRequiredDocumentsUploaded()) {
+            react_native_1.Alert.alert('Error', 'Please upload all required documents');
+            return;
         }
+        // Show verifying state
+        setIsVerifying(true);
+        // Simulate verification process
+        setTimeout(() => {
+            setIsVerifying(false);
+            if (mode === 'test') {
+                onNext({
+                    kycDocuments: documents,
+                    isKycCompleted: true,
+                    kycStatus: 'verified',
+                });
+            }
+            else {
+                onNext({
+                    kycDocuments: documents,
+                    isKycCompleted: false,
+                    kycStatus: 'pending',
+                });
+            }
+        }, 1500);
+    };
+    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;
-    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>
+    // If already verified, show success state
+    if (verificationComplete) {
+        return (<react_native_1.View style={styles.container}>
+        <expo_linear_gradient_1.LinearGradient colors={['#FFFFFF', '#F8F9FA']} style={styles.gradient}>
+          <react_native_1.View style={styles.verifiedContainer}>
+            <react_native_1.View style={styles.verifiedIcon}>
+              <expo_linear_gradient_1.LinearGradient colors={['#10B981', '#059669']} style={styles.verifiedCircle}>
+                <react_native_paper_1.IconButton icon="check" size={40} iconColor="#FFFFFF"/>
+              </expo_linear_gradient_1.LinearGradient>
             </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.Text style={styles.verifiedTitle}>KYC Already Verified</react_native_1.Text>
+            <react_native_1.Text style={styles.verifiedSubtitle}>
+              Your identity has been verified successfully
+            </react_native_1.Text>
+            
+            <react_native_1.TouchableOpacity style={styles.verifiedButton} onPress={() => onNext({ kycStatus: 'verified', isKycCompleted: true })}>
+              <expo_linear_gradient_1.LinearGradient colors={['#0066CC', '#0099FF']} style={styles.verifiedButtonGradient}>
+                <react_native_1.Text style={styles.verifiedButtonText}>Continue to Bank Details</react_native_1.Text>
+              </expo_linear_gradient_1.LinearGradient>
+            </react_native_1.TouchableOpacity>
+          </react_native_1.View>
+        </expo_linear_gradient_1.LinearGradient>
+      </react_native_1.View>);
+    }
+    return (<react_native_1.KeyboardAvoidingView style={{ flex: 1 }} behavior={react_native_1.Platform.OS === 'ios' ? 'padding' : undefined} keyboardVerticalOffset={react_native_1.Platform.OS === 'ios' ? 64 : 0}>
+      <react_native_1.View style={styles.container}>
+        <expo_linear_gradient_1.LinearGradient colors={['#FFFFFF', '#F8F9FA']} style={styles.gradient}>
+          <react_native_1.ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.scrollContent} keyboardShouldPersistTaps="handled">
+            {/* Header Card */}
+            <react_native_paper_1.Surface style={styles.headerCard}>
+              <react_native_1.View style={styles.headerIcon}>
+                <react_native_paper_1.IconButton icon="shield-account" size={24} iconColor="#0066CC"/>
               </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 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_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}>
+              {/* 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>
-            </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>
+              {/* 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 }}/>
+              {/* 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>
-              <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>
+              {/* 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_1.View>
-              </react_native_paper_1.Surface>)}
+                </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>
+              {/* Document Upload Sections */}
+              <react_native_1.View style={styles.documentsContainer}>
+                {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(',')) || '*'}/>
+                  </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>
+              {/* 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_1.View>
-              </react_native_paper_1.Surface>)}
+                </react_native_paper_1.Surface>)}
 
-            {/* Action Buttons */}
-            <react_native_1.View style={styles.buttonContainer}>
-              <react_native_1.TouchableOpacity style={styles.backButton} onPress={onBack}>
-                <react_native_1.Text style={styles.backButtonText}>Back</react_native_1.Text>
-              </react_native_1.TouchableOpacity>
-              
-              <react_native_1.TouchableOpacity style={[
+              {/* Action Buttons */}
+              <react_native_1.View style={styles.buttonContainer}>
+                <react_native_1.TouchableOpacity style={styles.backButton} onPress={handleBack} disabled={isVerifying}>
+                  <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>);
+            (!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 }}>
+                    {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]}>
+                          Verifying...
+                        </react_native_1.Text>
+                      </react_native_1.View>) : (<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>
+    </react_native_1.KeyboardAvoidingView>);
 };
 const styles = react_native_1.StyleSheet.create({
     container: {
@@ -254,6 +368,7 @@ const styles = react_native_1.StyleSheet.create({
     },
     scrollContent: {
         padding: 12,
+        paddingBottom: 24,
     },
     headerCard: {
         flexDirection: 'row',
@@ -368,7 +483,7 @@ const styles = react_native_1.StyleSheet.create({
         paddingHorizontal: 8,
         paddingVertical: 2,
         borderRadius: 12,
-        height: 24,
+        height: 28,
     },
     verified: {
         backgroundColor: '#D1FAE5',
@@ -486,7 +601,7 @@ const styles = react_native_1.StyleSheet.create({
     },
     backButton: {
         flex: 1,
-        paddingVertical: 8,
+        paddingVertical: 10,
         borderRadius: 10,
         borderWidth: 1,
         borderColor: '#E5E7EB',
@@ -494,7 +609,7 @@ const styles = react_native_1.StyleSheet.create({
         backgroundColor: '#FFFFFF',
     },
     backButtonText: {
-        fontSize: 12,
+        fontSize: 13,
         fontWeight: '500',
         color: '#6B7280',
     },
@@ -507,11 +622,63 @@ const styles = react_native_1.StyleSheet.create({
         opacity: 0.7,
     },
     submitGradient: {
-        paddingVertical: 8,
+        paddingVertical: 10,
         alignItems: 'center',
     },
     submitButtonText: {
-        fontSize: 12,
+        fontSize: 13,
+        fontWeight: '600',
+        color: '#FFFFFF',
+    },
+    verifyingContent: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    verifyingText: {
+        marginLeft: 8,
+    },
+    verifiedContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 24,
+        minHeight: 400,
+    },
+    verifiedIcon: {
+        marginBottom: 24,
+    },
+    verifiedCircle: {
+        width: 80,
+        height: 80,
+        borderRadius: 40,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    verifiedTitle: {
+        fontSize: 22,
+        fontWeight: '700',
+        color: '#111827',
+        marginBottom: 8,
+        textAlign: 'center',
+    },
+    verifiedSubtitle: {
+        fontSize: 14,
+        color: '#6B7280',
+        textAlign: 'center',
+        marginBottom: 32,
+    },
+    verifiedButton: {
+        width: '100%',
+        borderRadius: 12,
+        overflow: 'hidden',
+    },
+    verifiedButtonGradient: {
+        paddingVertical: 14,
+        alignItems: 'center',
+    },
+    verifiedButtonText: {
+        fontSize: 15,
         fontWeight: '600',
         color: '#FFFFFF',
     },

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Seller, Mode, KYCStatus, SellerStatus } from '../../types/sellertypes';
+import { Merchant, Mode, KYCStatus, MerchantStatus } from '../../types/merchantTypes';
 interface OnboardingCompleteProps {
-    sellerData: Seller;
+    merchantData: Merchant;
     mode: Mode;
-    status: SellerStatus;
+    status: MerchantStatus;
     kycStatus: KYCStatus;
     isBankDetailsCompleted: boolean;
     isKycCompleted: boolean;