@airxpay/sdk-ui 1.0.0

package/dist/components/steps/OnboardingComplete.js

@@ -0,0 +1,752 @@
+"use strict";
+// components/steps/OnboardingComplete.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;
+    };
+})();
+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 OnboardingComplete = ({ sellerData, mode, status, kycStatus, isBankDetailsCompleted, isKycCompleted, isBasicCompleted, onComplete, isWaitingForBackend, onBackendConfirmed, }) => {
+    const [backendConfirmed, setBackendConfirmed] = (0, react_1.useState)(false);
+    const fadeAnim = react_1.default.useRef(new react_native_1.Animated.Value(0)).current;
+    const scaleAnim = react_1.default.useRef(new react_native_1.Animated.Value(0.9)).current;
+    // Simulate backend confirmation (in real app, this would come from props/context)
+    (0, react_1.useEffect)(() => {
+        if (isWaitingForBackend) {
+            // This is where you'd listen for backend confirmation
+            // For now, we'll simulate it with a timeout
+            const timer = setTimeout(() => {
+                setBackendConfirmed(true);
+                onBackendConfirmed();
+                // Animate success state
+                react_native_1.Animated.parallel([
+                    react_native_1.Animated.timing(fadeAnim, {
+                        toValue: 1,
+                        duration: 500,
+                        useNativeDriver: true,
+                    }),
+                    react_native_1.Animated.spring(scaleAnim, {
+                        toValue: 1,
+                        friction: 8,
+                        tension: 40,
+                        useNativeDriver: true,
+                    }),
+                ]).start();
+            }, 3000); // Simulate 3 second backend processing
+            return () => clearTimeout(timer);
+        }
+    }, [isWaitingForBackend]);
+    const getStatusColor = (status) => {
+        switch (status) {
+            case 'active':
+                return '#10B981';
+            case 'suspended':
+                return '#F59E0B';
+            case 'blocked':
+                return '#EF4444';
+            default:
+                return '#6B7280';
+        }
+    };
+    const getKYCStatusColor = (status) => {
+        switch (status) {
+            case 'verified':
+                return '#10B981';
+            case 'pending':
+                return '#F59E0B';
+            case 'rejected':
+                return '#EF4444';
+            default:
+                return '#6B7280';
+        }
+    };
+    const getStatusIcon = (status) => {
+        switch (status) {
+            case 'active':
+                return '✓';
+            case 'suspended':
+                return '⚠';
+            case 'blocked':
+                return '✗';
+            default:
+                return '•';
+        }
+    };
+    const isFullyActive = status === 'active' && kycStatus === 'verified' && isBankDetailsCompleted;
+    // Loading State
+    if (isWaitingForBackend && !backendConfirmed) {
+        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.loadingContainer}>
+            <react_native_1.Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
+              <expo_linear_gradient_1.LinearGradient colors={['#0066CC', '#0099FF']} style={styles.loadingCircle} start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }}>
+                <react_native_paper_1.ActivityIndicator size="large" color="#FFFFFF"/>
+              </expo_linear_gradient_1.LinearGradient>
+            </react_native_1.Animated.View>
+            
+            <react_native_1.Text style={styles.loadingTitle}>Creating Your Account</react_native_1.Text>
+            <react_native_1.Text style={styles.loadingSubtitle}>
+              Please wait while we set up your seller account...
+            </react_native_1.Text>
+
+            {/* Step Status Indicators */}
+            <react_native_paper_1.Surface style={styles.statusCard}>
+              <react_native_1.Text style={styles.statusTitle}>Progress Status</react_native_1.Text>
+              
+              <react_native_1.View style={styles.statusItem}>
+                <react_native_1.View style={styles.statusLeft}>
+                  <react_native_1.View style={[styles.statusDot, isBasicCompleted && styles.statusDotCompleted]}>
+                    {isBasicCompleted && <react_native_1.Text style={styles.statusDotText}>✓</react_native_1.Text>}
+                  </react_native_1.View>
+                  <react_native_1.Text style={styles.statusText}>Basic Details</react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.Text style={[styles.statusValue, isBasicCompleted && styles.statusValueCompleted]}>
+                  {isBasicCompleted ? 'Completed' : 'Pending'}
+                </react_native_1.Text>
+              </react_native_1.View>
+
+              <react_native_1.View style={styles.statusItem}>
+                <react_native_1.View style={styles.statusLeft}>
+                  <react_native_1.View style={[styles.statusDot, isKycCompleted && styles.statusDotCompleted]}>
+                    {isKycCompleted && <react_native_1.Text style={styles.statusDotText}>✓</react_native_1.Text>}
+                  </react_native_1.View>
+                  <react_native_1.Text style={styles.statusText}>KYC Verification</react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.Text style={[styles.statusValue, isKycCompleted && styles.statusValueCompleted]}>
+                  {isKycCompleted ? 'Completed' : 'Pending'}
+                </react_native_1.Text>
+              </react_native_1.View>
+
+              <react_native_1.View style={styles.statusItem}>
+                <react_native_1.View style={styles.statusLeft}>
+                  <react_native_1.View style={[styles.statusDot, isBankDetailsCompleted && styles.statusDotCompleted]}>
+                    {isBankDetailsCompleted && <react_native_1.Text style={styles.statusDotText}>✓</react_native_1.Text>}
+                  </react_native_1.View>
+                  <react_native_1.Text style={styles.statusText}>Bank Details</react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.Text style={[styles.statusValue, isBankDetailsCompleted && styles.statusValueCompleted]}>
+                  {isBankDetailsCompleted ? 'Completed' : 'Pending'}
+                </react_native_1.Text>
+              </react_native_1.View>
+
+              <react_native_1.View style={styles.processingIndicator}>
+                <react_native_paper_1.ActivityIndicator size="small" color="#0066CC"/>
+                <react_native_1.Text style={styles.processingText}>Processing...</react_native_1.Text>
+              </react_native_1.View>
+            </react_native_paper_1.Surface>
+          </react_native_1.View>
+        </expo_linear_gradient_1.LinearGradient>
+      </react_native_1.View>);
+    }
+    // Success State
+    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_1.Animated.View style={[
+            styles.headerCard,
+            {
+                opacity: fadeAnim,
+                transform: [{ scale: scaleAnim }]
+            }
+        ]}>
+            <react_native_paper_1.Surface style={styles.headerCardSurface}>
+              <react_native_1.View style={styles.headerIcon}>
+                <expo_linear_gradient_1.LinearGradient colors={isFullyActive ? ['#10B981', '#059669'] : ['#9CA3AF', '#6B7280']} style={styles.successIcon} start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }}>
+                  <react_native_1.Text style={styles.successIconText}>✓</react_native_1.Text>
+                </expo_linear_gradient_1.LinearGradient>
+              </react_native_1.View>
+              <react_native_1.View style={styles.headerText}>
+                <react_native_1.Text style={styles.title}>Onboarding Complete!</react_native_1.Text>
+                <react_native_1.Text style={styles.subtitle}>
+                  {isFullyActive
+            ? 'Your seller account is fully active'
+            : 'Your seller account has been created'}
+                </react_native_1.Text>
+              </react_native_1.View>
+            </react_native_paper_1.Surface>
+          </react_native_1.Animated.View>
+
+          {/* Progress Steps - All Completed */}
+          <react_native_paper_1.Surface style={styles.progressCard}>
+            <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={10} 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}>
+                <react_native_1.View style={[styles.progressDot, isKycCompleted ? styles.progressDotCompleted : styles.progressDotPending]}>
+                  {isKycCompleted ? (<react_native_paper_1.IconButton icon="check" size={10} iconColor="#FFFFFF"/>) : (<react_native_1.Text style={styles.progressDotText}>2</react_native_1.Text>)}
+                </react_native_1.View>
+                <react_native_1.Text style={isKycCompleted ? styles.progressTextCompleted : styles.progressTextPending}>
+                  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, isBankDetailsCompleted ? styles.progressDotCompleted : styles.progressDotPending]}>
+                  {isBankDetailsCompleted ? (<react_native_paper_1.IconButton icon="check" size={10} iconColor="#FFFFFF"/>) : (<react_native_1.Text style={styles.progressDotText}>3</react_native_1.Text>)}
+                </react_native_1.View>
+                <react_native_1.Text style={isBankDetailsCompleted ? styles.progressTextCompleted : styles.progressTextPending}>
+                  Bank
+                </react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.View>
+          </react_native_paper_1.Surface>
+
+          {/* Account Summary Card */}
+          <react_native_paper_1.Surface style={styles.summaryCard}>
+            <react_native_1.View style={styles.summaryHeader}>
+              <react_native_paper_1.IconButton icon="account-details" size={16} iconColor="#0066CC"/>
+              <react_native_1.Text style={styles.summaryTitle}>Account Summary</react_native_1.Text>
+            </react_native_1.View>
+
+            {/* Seller Info in Grid */}
+            <react_native_1.View style={styles.infoGrid}>
+              <react_native_1.View style={styles.infoItem}>
+                <react_native_1.Text style={styles.infoLabel}>Name</react_native_1.Text>
+                <react_native_1.Text style={styles.infoValue} numberOfLines={1}>
+                  {sellerData.sellerName}
+                </react_native_1.Text>
+              </react_native_1.View>
+
+              {sellerData.businessName && (<react_native_1.View style={styles.infoItem}>
+                  <react_native_1.Text style={styles.infoLabel}>Business</react_native_1.Text>
+                  <react_native_1.Text style={styles.infoValue} numberOfLines={1}>
+                    {sellerData.businessName}
+                  </react_native_1.Text>
+                </react_native_1.View>)}
+
+              <react_native_1.View style={styles.infoItem}>
+                <react_native_1.Text style={styles.infoLabel}>Email</react_native_1.Text>
+                <react_native_1.Text style={styles.infoValue} numberOfLines={1}>
+                  {sellerData.sellerEmail}
+                </react_native_1.Text>
+              </react_native_1.View>
+
+              {sellerData.sellerDID && (<react_native_1.View style={styles.infoItem}>
+                  <react_native_1.Text style={styles.infoLabel}>Seller ID</react_native_1.Text>
+                  <react_native_1.Text style={styles.infoValue} numberOfLines={1}>
+                    {sellerData.sellerDID.slice(0, 8)}...
+                  </react_native_1.Text>
+                </react_native_1.View>)}
+            </react_native_1.View>
+
+            <react_native_1.View style={styles.divider}/>
+
+            {/* Status Badges - Compact Grid */}
+            <react_native_1.View style={styles.badgesGrid}>
+              {/* Mode Badge */}
+              <react_native_1.View style={[
+            styles.badge,
+            mode === 'live' ? styles.liveBadge : styles.testBadge
+        ]}>
+                <react_native_1.Text style={[
+            styles.badgeText,
+            mode === 'live' ? styles.liveBadgeText : styles.testBadgeText
+        ]}>
+                  {mode === 'live' ? '🔴 LIVE' : '🧪 TEST'}
+                </react_native_1.Text>
+              </react_native_1.View>
+
+              {/* KYC Status Badge */}
+              <react_native_1.View style={[styles.badge, { backgroundColor: getKYCStatusColor(kycStatus) + '20' }]}>
+                <react_native_1.Text style={[styles.badgeText, { color: getKYCStatusColor(kycStatus) }]}>
+                  KYC: {kycStatus === 'verified' ? '✅' : kycStatus === 'pending' ? '⏳' : '❌'} {kycStatus}
+                </react_native_1.Text>
+              </react_native_1.View>
+
+              {/* Bank Status Badge */}
+              <react_native_1.View style={[
+            styles.badge,
+            isBankDetailsCompleted ? styles.bankCompletedBadge : styles.bankPendingBadge
+        ]}>
+                <react_native_1.Text style={[
+            styles.badgeText,
+            isBankDetailsCompleted ? styles.bankCompletedText : styles.bankPendingText
+        ]}>
+                  {isBankDetailsCompleted ? '🏦 Added' : '⏳ Pending'}
+                </react_native_1.Text>
+              </react_native_1.View>
+
+              {/* Account Status Badge */}
+              <react_native_1.View style={[styles.badge, { backgroundColor: getStatusColor(status) + '20' }]}>
+                <react_native_1.Text style={[styles.badgeText, { color: getStatusColor(status) }]}>
+                  {getStatusIcon(status)} {status}
+                </react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            {/* Status Messages - Compact */}
+            {mode === 'test' && (<react_native_1.View style={styles.testModeMessage}>
+                <react_native_1.Text style={styles.testModeMessageText}>🧪 Test mode - No real transactions</react_native_1.Text>
+              </react_native_1.View>)}
+
+            {kycStatus === 'pending' && (<react_native_1.View style={styles.warningMessage}>
+                <react_native_1.Text style={styles.warningMessageText}>⏳ KYC verification in progress</react_native_1.Text>
+              </react_native_1.View>)}
+
+            {isFullyActive && (<react_native_1.View style={styles.successMessage}>
+                <react_native_1.Text style={styles.successMessageText}>✓ Fully active - Ready to accept payments</react_native_1.Text>
+              </react_native_1.View>)}
+          </react_native_paper_1.Surface>
+
+          {/* Next Steps - Compact */}
+          <react_native_paper_1.Surface style={styles.nextStepsCard}>
+            <react_native_1.View style={styles.nextStepsHeader}>
+              <react_native_paper_1.IconButton icon="format-list-checks" size={16} iconColor="#0066CC"/>
+              <react_native_1.Text style={styles.nextStepsTitle}>Next Steps</react_native_1.Text>
+            </react_native_1.View>
+            
+            <react_native_1.View style={styles.stepsList}>
+              <react_native_1.View style={styles.stepItem}>
+                <react_native_1.View style={styles.stepNumber}>
+                  <react_native_1.Text style={styles.stepNumberText}>1</react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.Text style={styles.stepText}>Add products</react_native_1.Text>
+              </react_native_1.View>
+              
+              <react_native_1.View style={styles.stepItem}>
+                <react_native_1.View style={styles.stepNumber}>
+                  <react_native_1.Text style={styles.stepNumberText}>2</react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.Text style={styles.stepText}>Payment settings</react_native_1.Text>
+              </react_native_1.View>
+              
+              <react_native_1.View style={styles.stepItem}>
+                <react_native_1.View style={styles.stepNumber}>
+                  <react_native_1.Text style={styles.stepNumberText}>3</react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.Text style={styles.stepText}>Start selling</react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.View>
+          </react_native_paper_1.Surface>
+
+          <react_native_1.Text style={styles.footerText}>
+            Update info anytime from dashboard
+          </react_native_1.Text>
+        </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,
+    },
+    loadingContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 24,
+        minHeight: 400,
+    },
+    loadingCircle: {
+        width: 80,
+        height: 80,
+        borderRadius: 40,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginBottom: 24,
+    },
+    loadingTitle: {
+        fontSize: 20,
+        fontWeight: '700',
+        color: '#111827',
+        marginBottom: 8,
+        textAlign: 'center',
+    },
+    loadingSubtitle: {
+        fontSize: 14,
+        color: '#6B7280',
+        textAlign: 'center',
+        marginBottom: 32,
+    },
+    statusCard: {
+        backgroundColor: '#FFFFFF',
+        borderRadius: 16,
+        padding: 20,
+        width: '100%',
+        elevation: 2,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+    },
+    statusTitle: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#111827',
+        marginBottom: 16,
+    },
+    statusItem: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: 12,
+    },
+    statusLeft: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    statusDot: {
+        width: 20,
+        height: 20,
+        borderRadius: 10,
+        borderWidth: 2,
+        borderColor: '#D1D5DB',
+        marginRight: 12,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    statusDotCompleted: {
+        backgroundColor: '#10B981',
+        borderColor: '#10B981',
+    },
+    statusDotText: {
+        color: '#FFFFFF',
+        fontSize: 12,
+        fontWeight: 'bold',
+    },
+    statusText: {
+        fontSize: 14,
+        color: '#374151',
+    },
+    statusValue: {
+        fontSize: 12,
+        color: '#6B7280',
+        fontWeight: '500',
+    },
+    statusValueCompleted: {
+        color: '#10B981',
+    },
+    processingIndicator: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginTop: 20,
+        paddingTop: 16,
+        borderTopWidth: 1,
+        borderTopColor: '#E5E7EB',
+    },
+    processingText: {
+        marginLeft: 8,
+        fontSize: 14,
+        color: '#6B7280',
+    },
+    headerCard: {
+        marginBottom: 8,
+    },
+    headerCardSurface: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 12,
+        backgroundColor: '#FFFFFF',
+        borderRadius: 16,
+        elevation: 2,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+    },
+    headerIcon: {
+        marginRight: 12,
+    },
+    successIcon: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    successIconText: {
+        color: '#FFFFFF',
+        fontSize: 20,
+        fontWeight: 'bold',
+    },
+    headerText: {
+        flex: 1,
+    },
+    title: {
+        fontSize: 18,
+        fontWeight: '700',
+        color: '#111827',
+    },
+    subtitle: {
+        fontSize: 12,
+        color: '#6B7280',
+        marginTop: 2,
+    },
+    progressCard: {
+        backgroundColor: '#FFFFFF',
+        borderRadius: 16,
+        padding: 12,
+        marginBottom: 8,
+        elevation: 2,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+    },
+    progressContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    progressStep: {
+        alignItems: 'center',
+    },
+    progressDot: {
+        width: 24,
+        height: 24,
+        borderRadius: 12,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    progressDotCompleted: {
+        backgroundColor: '#10B981',
+    },
+    progressDotPending: {
+        backgroundColor: '#E5E7EB',
+    },
+    progressDotText: {
+        fontSize: 12,
+        fontWeight: '600',
+        color: '#6B7280',
+    },
+    progressLine: {
+        width: 24,
+        height: 2,
+        backgroundColor: '#E5E7EB',
+        marginHorizontal: 4,
+    },
+    progressTextCompleted: {
+        fontSize: 10,
+        color: '#10B981',
+        marginTop: 4,
+        fontWeight: '500',
+    },
+    progressTextPending: {
+        fontSize: 10,
+        color: '#9CA3AF',
+        marginTop: 4,
+        fontWeight: '500',
+    },
+    summaryCard: {
+        backgroundColor: '#FFFFFF',
+        borderRadius: 16,
+        padding: 12,
+        marginBottom: 8,
+        elevation: 2,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+    },
+    summaryHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 8,
+    },
+    summaryTitle: {
+        fontSize: 13,
+        fontWeight: '600',
+        color: '#111827',
+    },
+    infoGrid: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        marginBottom: 8,
+    },
+    infoItem: {
+        width: '50%',
+        marginBottom: 6,
+        paddingRight: 8,
+    },
+    infoLabel: {
+        fontSize: 10,
+        color: '#6B7280',
+        marginBottom: 2,
+    },
+    infoValue: {
+        fontSize: 11,
+        fontWeight: '500',
+        color: '#111827',
+    },
+    divider: {
+        height: 1,
+        backgroundColor: '#E5E7EB',
+        marginVertical: 8,
+    },
+    badgesGrid: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 4,
+        marginBottom: 8,
+    },
+    badge: {
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        borderRadius: 12,
+        marginRight: 4,
+        marginBottom: 4,
+    },
+    badgeText: {
+        fontSize: 9,
+        fontWeight: '500',
+    },
+    liveBadge: {
+        backgroundColor: '#FEE2E2',
+    },
+    liveBadgeText: {
+        color: '#DC2626',
+    },
+    testBadge: {
+        backgroundColor: '#FEF3C7',
+    },
+    testBadgeText: {
+        color: '#D97706',
+    },
+    bankCompletedBadge: {
+        backgroundColor: '#D1FAE5',
+    },
+    bankCompletedText: {
+        color: '#059669',
+    },
+    bankPendingBadge: {
+        backgroundColor: '#FEF3C7',
+    },
+    bankPendingText: {
+        color: '#D97706',
+    },
+    testModeMessage: {
+        padding: 6,
+        backgroundColor: '#FEF3C7',
+        borderRadius: 8,
+        marginTop: 4,
+    },
+    testModeMessageText: {
+        color: '#92400E',
+        fontSize: 10,
+        textAlign: 'center',
+    },
+    warningMessage: {
+        padding: 6,
+        backgroundColor: '#FEF3C7',
+        borderRadius: 8,
+        marginTop: 4,
+    },
+    warningMessageText: {
+        color: '#92400E',
+        fontSize: 10,
+        textAlign: 'center',
+    },
+    successMessage: {
+        padding: 6,
+        backgroundColor: '#D1FAE5',
+        borderRadius: 8,
+        marginTop: 4,
+    },
+    successMessageText: {
+        color: '#065F46',
+        fontSize: 10,
+        textAlign: 'center',
+    },
+    nextStepsCard: {
+        backgroundColor: '#FFFFFF',
+        borderRadius: 16,
+        padding: 12,
+        marginBottom: 12,
+        elevation: 2,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+    },
+    nextStepsHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 8,
+    },
+    nextStepsTitle: {
+        fontSize: 13,
+        fontWeight: '600',
+        color: '#111827',
+    },
+    stepsList: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+    },
+    stepItem: {
+        flex: 1,
+        alignItems: 'center',
+        paddingHorizontal: 2,
+    },
+    stepNumber: {
+        width: 20,
+        height: 20,
+        borderRadius: 10,
+        backgroundColor: '#0066CC',
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginBottom: 4,
+    },
+    stepNumberText: {
+        color: '#FFFFFF',
+        fontSize: 10,
+        fontWeight: '600',
+    },
+    stepText: {
+        fontSize: 9,
+        color: '#374151',
+        textAlign: 'center',
+    },
+    footerText: {
+        fontSize: 9,
+        color: '#9CA3AF',
+        textAlign: 'center',
+        marginBottom: 16,
+    },
+});
+exports.default = OnboardingComplete;