@flixora/airxpay-sdk-init-ui 1.0.0

package/dist/components/steps/onboarding/MerchantOnboarding.js

@@ -0,0 +1,678 @@
+"use strict";
+// components/MerchantOnboardingSheet.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 __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 });
+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 StepIndicator_1 = __importDefault(require("../../common/StepIndicator"));
+const BasicDetailsForm_1 = __importDefault(require("../../steps/BasicDetailsForm"));
+const KYCVerification_1 = __importDefault(require("../../steps/KYCVerification"));
+const BankDetails_1 = __importDefault(require("../../steps/BankDetails"));
+const FinalStepScreen_1 = require("./FinalStepScreen");
+const OnboardingComplete_1 = require("../OnboardingComplete");
+const AirXPayProvider_1 = require("../../../contexts/AirXPayProvider");
+const merchantProxy_1 = require("../../../api/merchantProxy");
+const { width } = react_native_1.Dimensions.get('window');
+// ✅ 5 STEPS - Added Final Step
+const STEPS = [
+    { id: 1, name: 'Basic Details', key: 'basic', isRequired: true, icon: 'account' },
+    { id: 2, name: 'KYC Verification', key: 'kyc', isRequired: true, icon: 'shield-account' },
+    { id: 3, name: 'Bank Details', key: 'bank', isRequired: true, icon: 'bank' },
+    { id: 4, name: 'Final Review', key: 'final', isRequired: true, icon: 'file-document' },
+    { id: 5, name: 'Complete', key: 'complete', isRequired: false, icon: 'check-circle' },
+];
+// Default logo - can be overridden via props
+const DEFAULT_LOGO = require('../../../assets/images/airxpay.png');
+const MerchantOnboardingSheet = ({ merchantId, mode, isKycCompleted, isBankDetailsCompleted, kycStatus, status, initialStep = 1, initialData = {}, onNext, onBack, onComplete, loading: externalLoading = false, }) => {
+    // Get configuration from provider
+    const airXPay = (0, AirXPayProvider_1.useAirXPaySafe)();
+    // Local state for provider verification
+    const [isVerifying, setIsVerifying] = (0, react_1.useState)(true);
+    const [isValidProvider, setIsValidProvider] = (0, react_1.useState)(false);
+    const [verificationError, setVerificationError] = (0, react_1.useState)(null);
+    // Animation values
+    const fadeAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
+    const slideAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const progressAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(initialStep / STEPS.length)).current;
+    const scaleAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
+    // State management
+    const [currentStep, setCurrentStep] = (0, react_1.useState)(initialStep);
+    const [merchantData, setMerchantData] = (0, react_1.useState)(Object.assign({ mode,
+        kycStatus,
+        isKycCompleted,
+        isBankDetailsCompleted,
+        status }, initialData));
+    const [errors, setErrors] = (0, react_1.useState)({});
+    const [showError, setShowError] = (0, react_1.useState)(false);
+    const [isAnimating, setIsAnimating] = (0, react_1.useState)(false);
+    const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
+    const [isWaitingForBackend, setIsWaitingForBackend] = (0, react_1.useState)(false);
+    // ✅ New state for merchant creation response
+    const [merchantResponse, setMerchantResponse] = (0, react_1.useState)(null);
+    // Track completion status of each step dynamically
+    const [stepCompletion, setStepCompletion] = (0, react_1.useState)(() => {
+        const basicCompleted = !!(initialData.merchantName &&
+            initialData.merchantName.trim() !== '' &&
+            initialData.merchantEmail &&
+            initialData.merchantEmail.trim() !== '');
+        return {
+            basic: basicCompleted,
+            kyc: isKycCompleted || false,
+            bank: isBankDetailsCompleted || false,
+            final: false, // ✅ Final step initially incomplete
+        };
+    });
+    // Verify public key on mount
+    (0, react_1.useEffect)(() => {
+        const verifyProviderConfig = () => __awaiter(void 0, void 0, void 0, function* () {
+            console.log('🔍 Starting AirXPay provider verification...');
+            if (!airXPay) {
+                console.error('❌ AirXPayProvider is undefined - context not found');
+                setVerificationError('AirXPay provider not found in component tree. Please wrap your app with <AirXPayProvider>.');
+                setIsValidProvider(false);
+                setIsVerifying(false);
+                return;
+            }
+            const { publicKey } = airXPay;
+            if (!publicKey) {
+                console.error('❌ AirXPay config missing:', { publicKey: !!publicKey });
+                setVerificationError('AirXPay configuration incomplete. publicKey is required.');
+                setIsValidProvider(false);
+                setIsVerifying(false);
+                return;
+            }
+            console.log('✅ AirXPay config found:', { publicKey: publicKey.substring(0, 8) + '...' });
+            try {
+                setIsVerifying(true);
+                console.log('🔑 Verifying public key:', publicKey.substring(0, 8) + '...');
+                yield (0, merchantProxy_1.verifyPublicKey)(publicKey);
+                console.log('✅ Public key verified successfully');
+                setIsValidProvider(true);
+                setVerificationError(null);
+            }
+            catch (err) {
+                console.error('❌ Public key verification failed:', err.message);
+                setVerificationError(err.message || 'Invalid AirXPay public key. Please check your configuration.');
+                setIsValidProvider(false);
+            }
+            finally {
+                setIsVerifying(false);
+            }
+        });
+        verifyProviderConfig();
+    }, [airXPay]);
+    // Log config status after verification
+    (0, react_1.useEffect)(() => {
+        if (!isVerifying) {
+            if (isValidProvider) {
+                console.log('🚀 AirXPay provider ready - rendering onboarding');
+            }
+            else {
+                console.warn('⚠️ AirXPay provider invalid - showing error state');
+            }
+        }
+    }, [isVerifying, isValidProvider]);
+    // Update progress bar animation when step changes
+    (0, react_1.useEffect)(() => {
+        react_native_1.Animated.timing(progressAnim, {
+            toValue: currentStep / STEPS.length,
+            duration: 300,
+            useNativeDriver: false,
+        }).start();
+    }, [currentStep]);
+    const animateStepTransition = (direction) => {
+        if (isAnimating)
+            return;
+        setIsAnimating(true);
+        // Fade out and slide
+        react_native_1.Animated.parallel([
+            react_native_1.Animated.timing(fadeAnim, {
+                toValue: 0,
+                duration: 150,
+                useNativeDriver: true,
+            }),
+            react_native_1.Animated.timing(slideAnim, {
+                toValue: direction === 'next' ? -50 : 50,
+                duration: 150,
+                useNativeDriver: true,
+            }),
+        ]).start(() => {
+            // Reset slide position
+            slideAnim.setValue(direction === 'next' ? 50 : -50);
+            // Fade in and slide to center
+            react_native_1.Animated.parallel([
+                react_native_1.Animated.timing(fadeAnim, {
+                    toValue: 1,
+                    duration: 150,
+                    useNativeDriver: true,
+                }),
+                react_native_1.Animated.timing(slideAnim, {
+                    toValue: 0,
+                    duration: 150,
+                    useNativeDriver: true,
+                }),
+            ]).start(() => {
+                setIsAnimating(false);
+            });
+        });
+    };
+    const handleNext = (stepData) => {
+        const updatedData = Object.assign(Object.assign({}, merchantData), stepData);
+        setMerchantData(updatedData);
+        // Update step completion status dynamically
+        if (currentStep === 1) {
+            const basicCompleted = !!(updatedData.merchantName &&
+                updatedData.merchantName.trim() !== '' &&
+                updatedData.merchantEmail &&
+                updatedData.merchantEmail.trim() !== '');
+            setStepCompletion(prev => (Object.assign(Object.assign({}, prev), { basic: basicCompleted })));
+        }
+        else if (currentStep === 2) {
+            const kycCompleted = stepData.isKycCompleted === true || stepData.kycStatus === 'verified';
+            setStepCompletion(prev => (Object.assign(Object.assign({}, prev), { kyc: kycCompleted })));
+        }
+        else if (currentStep === 3) {
+            const bankCompleted = stepData.isBankDetailsCompleted === true;
+            setStepCompletion(prev => (Object.assign(Object.assign({}, prev), { bank: bankCompleted })));
+        }
+        else if (currentStep === 4) {
+            // Final step - just mark as completed
+            setStepCompletion(prev => (Object.assign(Object.assign({}, prev), { final: true })));
+        }
+        // Call onNext callback with step data and current step
+        onNext(stepData, currentStep);
+        // Move to next step if not last step
+        if (currentStep < STEPS.length) {
+            animateStepTransition('next');
+            setTimeout(() => {
+                setCurrentStep(prev => {
+                    const newStep = prev + 1;
+                    return newStep;
+                });
+            }, 150);
+        }
+    };
+    const handleBack = () => {
+        if (currentStep > 1) {
+            animateStepTransition('back');
+            setTimeout(() => {
+                setCurrentStep(prev => {
+                    const newStep = prev - 1;
+                    // Pass the new step to parent
+                    onBack(newStep);
+                    return newStep;
+                });
+            }, 150);
+        }
+    };
+    const validateStepData = (0, react_1.useCallback)(() => {
+        // Validate required fields dynamically based on STEPS config
+        const requiredSteps = STEPS.filter(step => step.isRequired && step.id < 5); // Exclude complete step
+        const missingSteps = requiredSteps.filter(step => !stepCompletion[step.key]);
+        if (missingSteps.length > 0) {
+            const missingStepNames = missingSteps.map(s => s.name).join(', ');
+            // If missing basic details, show inline error
+            if (missingSteps.some(s => s.key === 'basic')) {
+                setErrors({ merchantName: 'Please complete all required fields' });
+                setShowError(true);
+                return false;
+            }
+            // For KYC or Bank, show alert with navigation
+            if (missingSteps.some(s => s.key === 'kyc')) {
+                react_native_1.Alert.alert('KYC Pending', 'Please complete KYC verification first', [
+                    { text: 'Cancel', style: 'cancel' },
+                    {
+                        text: 'Go to KYC',
+                        onPress: () => {
+                            animateStepTransition('next');
+                            setCurrentStep(2);
+                        }
+                    }
+                ]);
+                return false;
+            }
+            if (missingSteps.some(s => s.key === 'bank')) {
+                react_native_1.Alert.alert('Bank Details Pending', 'Please add bank details first', [
+                    { text: 'Cancel', style: 'cancel' },
+                    {
+                        text: 'Go to Bank Details',
+                        onPress: () => {
+                            animateStepTransition('next');
+                            setCurrentStep(3);
+                        }
+                    }
+                ]);
+                return false;
+            }
+            if (missingSteps.some(s => s.key === 'final')) {
+                react_native_1.Alert.alert('Review Pending', 'Please review your information on the final step', [
+                    { text: 'Cancel', style: 'cancel' },
+                    {
+                        text: 'Go to Final Step',
+                        onPress: () => {
+                            animateStepTransition('next');
+                            setCurrentStep(4);
+                        }
+                    }
+                ]);
+                return false;
+            }
+            setErrors({ general: `Please complete: ${missingStepNames}` });
+            setShowError(true);
+            return false;
+        }
+        return true;
+    }, [stepCompletion]);
+    // ✅ Handle final step success - merchant created
+    const handleFinalStepSuccess = (response) => {
+        setMerchantResponse(response);
+        setStepCompletion(prev => (Object.assign(Object.assign({}, prev), { final: true })));
+        // Move to complete screen after short delay
+        setTimeout(() => {
+            setCurrentStep(5); // Move to complete screen
+        }, 500);
+    };
+    // ✅ Handle final step error
+    const handleFinalStepError = (error) => {
+        react_native_1.Alert.alert('Error', error.userMessage || 'Failed to create merchant');
+    };
+    const handleComplete = (0, react_1.useCallback)(() => {
+        var _a, _b;
+        // Validate all required data before completing
+        if (!validateStepData()) {
+            return;
+        }
+        // Prepare complete merchant data
+        const completeMerchantData = {
+            merchantId: merchantData.merchantId || merchantData._id || ((_a = merchantResponse === null || merchantResponse === void 0 ? void 0 : merchantResponse.merchant) === null || _a === void 0 ? void 0 : _a.merchantId) || '',
+            merchantName: merchantData.merchantName || '',
+            merchantEmail: merchantData.merchantEmail || '',
+            merchantPhone: merchantData.merchantPhone || '',
+            merchantDID: merchantData.merchantDID || '',
+            businessName: merchantData.businessName,
+            businessType: merchantData.businessType || 'individual',
+            businessCategory: merchantData.businessCategory,
+            country: merchantData.country || 'India',
+            nationality: merchantData.nationality || 'Indian',
+            dob: merchantData.dob,
+            bankDetails: merchantData.bankDetails,
+            kycDetails: merchantData.kycDetails,
+            mode: mode || 'test',
+            kycStatus: stepCompletion.kyc ? 'verified' : (kycStatus || 'pending'),
+            isKycCompleted: stepCompletion.kyc,
+            isBankDetailsCompleted: stepCompletion.bank,
+            status: status || (mode === 'live' && stepCompletion.kyc && stepCompletion.bank ? 'active' : 'pending'),
+            createdAt: merchantData.createdAt || ((_b = merchantResponse === null || merchantResponse === void 0 ? void 0 : merchantResponse.merchant) === null || _b === void 0 ? void 0 : _b.createdAt) || new Date().toISOString(),
+            updatedAt: new Date().toISOString(),
+        };
+        // Call onComplete with merchant data
+        onComplete(completeMerchantData);
+    }, [merchantData, mode, status, kycStatus, stepCompletion, merchantResponse, onComplete, validateStepData]);
+    const getStepTitle = () => {
+        const step = STEPS.find(s => s.id === currentStep);
+        return (step === null || step === void 0 ? void 0 : step.name) || '';
+    };
+    const renderProviderVerification = () => {
+        if (isVerifying) {
+            return (<react_native_1.View style={styles.verificationContainer}>
+          <expo_linear_gradient_1.LinearGradient colors={['#0066CC', '#0099FF']} style={styles.verificationCircle} 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_paper_1.Text style={styles.verificationText}>
+            Verifying AirXPay configuration...
+          </react_native_paper_1.Text>
+          <react_native_paper_1.Text style={styles.verificationSubtext}>
+            Please wait while we validate your public key
+          </react_native_paper_1.Text>
+        </react_native_1.View>);
+        }
+        if (!isValidProvider) {
+            return (<react_native_1.View style={styles.verificationContainer}>
+          <react_native_1.View style={[styles.verificationCircle, { backgroundColor: '#FF4444' }]}>
+            <react_native_paper_1.IconButton icon="alert" size={40} iconColor="#FFFFFF" style={{ margin: 0 }}/>
+          </react_native_1.View>
+          <react_native_paper_1.Text style={[styles.verificationText, { color: '#FF4444' }]}>
+            Invalid AirXPay Configuration
+          </react_native_paper_1.Text>
+          <react_native_paper_1.Text style={styles.errorMessage}>
+            {verificationError || 'Invalid AirXPay public key. Please check your configuration.'}
+          </react_native_paper_1.Text>
+        </react_native_1.View>);
+        }
+        return null;
+    };
+    const renderStep = () => {
+        // Combine external loading and submitting states to prevent double loader
+        const isLoading = externalLoading || isSubmitting;
+        if (isLoading) {
+            return (<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_paper_1.Text style={styles.loadingText}>
+            {isSubmitting ? 'Processing...' : 'Loading your information...'}
+          </react_native_paper_1.Text>
+        </react_native_1.View>);
+        }
+        const stepContent = (() => {
+            switch (currentStep) {
+                case 1:
+                    return (<BasicDetailsForm_1.default initialData={merchantData} onNext={(data) => handleNext(data)} errors={errors} setErrors={setErrors}/>);
+                case 2:
+                    return (<KYCVerification_1.default initialData={merchantData} mode={mode} kycStatus={kycStatus} onNext={(data) => handleNext(data)} onBack={handleBack}/>);
+                case 3:
+                    return (<BankDetails_1.default initialData={merchantData} mode={mode} onNext={(data) => handleNext(data)} onBack={handleBack}/>);
+                case 4:
+                    return (<FinalStepScreen_1.FinalStepScreen publicKey={(airXPay === null || airXPay === void 0 ? void 0 : airXPay.publicKey) || ''} onSuccess={handleFinalStepSuccess} onError={handleFinalStepError} initialData={{
+                            merchantName: merchantData.merchantName,
+                            merchantEmail: merchantData.merchantEmail,
+                            merchantPhone: merchantData.merchantPhone,
+                            businessName: merchantData.businessName,
+                            businessType: merchantData.businessType,
+                            businessCategory: merchantData.businessCategory,
+                            country: merchantData.country,
+                            nationality: merchantData.nationality,
+                            mode: mode,
+                        }}/>);
+                case 5:
+                    return (<OnboardingComplete_1.OnboardingCompleteScreen onContinue={handleComplete} onLogout={() => console.log('Logout')} autoFetch={true}/>);
+                default:
+                    return null;
+            }
+        })();
+        return (<react_native_1.Animated.View style={[
+                styles.stepContentWrapper,
+                {
+                    opacity: fadeAnim,
+                    transform: [{ translateX: slideAnim }],
+                },
+            ]}>
+        {stepContent}
+      </react_native_1.Animated.View>);
+    };
+    // Progress bar width interpolation
+    const progressWidth = progressAnim.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['0%', '100%'],
+    });
+    // Check if we should show verification UI
+    if (isVerifying || !isValidProvider) {
+        return (<react_native_1.SafeAreaView style={styles.container}>
+        <react_native_1.StatusBar barStyle="dark-content" backgroundColor="#F8F9FA"/>
+        <expo_linear_gradient_1.LinearGradient colors={['#F8F9FA', '#FFFFFF']} style={styles.gradient} start={{ x: 0, y: 0 }} end={{ x: 0, y: 1 }}>
+          {renderProviderVerification()}
+        </expo_linear_gradient_1.LinearGradient>
+      </react_native_1.SafeAreaView>);
+    }
+    // Normal onboarding UI when provider is valid
+    return (<react_native_1.SafeAreaView style={styles.container}>
+      <react_native_1.StatusBar barStyle="dark-content" backgroundColor="#F8F9FA"/>
+      
+      <expo_linear_gradient_1.LinearGradient colors={['#F8F9FA', '#FFFFFF']} style={styles.gradient} start={{ x: 0, y: 0 }} end={{ x: 0, y: 1 }}>
+        <react_native_1.KeyboardAvoidingView behavior={react_native_1.Platform.OS === 'ios' ? 'padding' : 'height'} style={styles.keyboardView}>
+          <react_native_paper_1.Surface style={styles.headerSurface}>
+            <react_native_1.View style={styles.header}>
+              <react_native_1.View style={styles.headerLeft}>
+                {currentStep > 1 && currentStep < 5 && (<react_native_1.TouchableOpacity onPress={handleBack} style={styles.backButton} disabled={isAnimating}>
+                    <react_native_paper_1.IconButton icon="arrow-left" size={24} iconColor="#0066CC"/>
+                  </react_native_1.TouchableOpacity>)}
+                <react_native_1.View>
+                  <react_native_paper_1.Text style={styles.headerTitle}>
+                    {getStepTitle()}
+                  </react_native_paper_1.Text>
+                  <react_native_paper_1.Text style={styles.headerSubtitle}>
+                    Step {currentStep} of {STEPS.length}
+                  </react_native_paper_1.Text>
+                </react_native_1.View>
+              </react_native_1.View>
+              
+              {/* Logo Section - Fixed alignment */}
+              <react_native_1.View style={styles.logoContainer}>
+                <react_native_paper_1.Avatar.Image size={32} source={DEFAULT_LOGO}/>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            {/* Progress Bar */}
+            <react_native_1.View style={styles.progressContainer}>
+              <react_native_1.View style={styles.progressBar}>
+                <react_native_1.Animated.View style={[
+            styles.progressFill,
+            { width: progressWidth }
+        ]}/>
+              </react_native_1.View>
+            </react_native_1.View>
+          </react_native_paper_1.Surface>
+
+          {/* Step Indicator */}
+          <react_native_1.View style={styles.stepIndicatorContainer}>
+            <StepIndicator_1.default currentStep={currentStep} steps={STEPS} mode={mode} isKycCompleted={stepCompletion.kyc} isBankDetailsCompleted={stepCompletion.bank}/>
+          </react_native_1.View>
+
+          {/* Current Step Content */}
+          <react_native_paper_1.Surface style={styles.contentSurface}>
+            <react_native_1.View style={styles.content}>
+              {renderStep()}
+            </react_native_1.View>
+          </react_native_paper_1.Surface>
+
+          {/* Error Snackbar */}
+          <react_native_paper_1.Snackbar visible={showError} onDismiss={() => setShowError(false)} duration={5000} action={{
+            label: 'DISMISS',
+            onPress: () => setShowError(false),
+            textColor: '#FFFFFF',
+        }} style={styles.snackbar} theme={{ colors: { accent: '#FFFFFF' } }}>
+            {Object.values(errors)[0] || 'An error occurred'}
+          </react_native_paper_1.Snackbar>
+        </react_native_1.KeyboardAvoidingView>
+      </expo_linear_gradient_1.LinearGradient>
+    </react_native_1.SafeAreaView>);
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#F8F9FA',
+    },
+    gradient: {
+        flex: 1,
+    },
+    keyboardView: {
+        flex: 1,
+    },
+    headerSurface: {
+        backgroundColor: '#FFFFFF',
+        borderBottomLeftRadius: 24,
+        borderBottomRightRadius: 24,
+        elevation: 4,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 8,
+    },
+    header: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingHorizontal: 20,
+        paddingTop: 16,
+        paddingBottom: 12,
+    },
+    headerLeft: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    backButton: {
+        marginRight: 8,
+        backgroundColor: '#F0F7FF',
+        borderRadius: 20,
+    },
+    headerTitle: {
+        fontSize: 20,
+        fontWeight: '700',
+        color: '#1A1A1A',
+        letterSpacing: 0.5,
+    },
+    headerSubtitle: {
+        fontSize: 13,
+        color: '#666666',
+        marginTop: 2,
+        fontWeight: '400',
+    },
+    logoContainer: {
+        width: 40,
+        height: 40,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#FFFFFF',
+        borderRadius: 20,
+        elevation: 2,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+    },
+    progressContainer: {
+        paddingHorizontal: 20,
+        paddingBottom: 20,
+    },
+    progressBar: {
+        height: 4,
+        backgroundColor: '#E5E5E5',
+        borderRadius: 2,
+        overflow: 'hidden',
+    },
+    progressFill: {
+        height: '100%',
+        backgroundColor: '#0066CC',
+        borderRadius: 2,
+    },
+    stepIndicatorContainer: {
+        paddingVertical: 16,
+        paddingHorizontal: 20,
+    },
+    contentSurface: {
+        flex: 1,
+        marginHorizontal: 16,
+        marginBottom: 16,
+        backgroundColor: '#FFFFFF',
+        borderRadius: 24,
+        elevation: 2,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.05,
+        shadowRadius: 8,
+        overflow: 'hidden',
+    },
+    content: {
+        flex: 1,
+        backgroundColor: 'transparent',
+    },
+    stepContentWrapper: {
+        flex: 1,
+    },
+    loadingContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 20,
+    },
+    loadingCircle: {
+        width: 80,
+        height: 80,
+        borderRadius: 40,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    loadingText: {
+        marginTop: 16,
+        fontSize: 16,
+        color: '#666666',
+        fontWeight: '500',
+    },
+    snackbar: {
+        backgroundColor: '#FF4444',
+        marginBottom: 16,
+        borderRadius: 8,
+    },
+    verificationContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 20,
+    },
+    verificationCircle: {
+        width: 100,
+        height: 100,
+        borderRadius: 50,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginBottom: 24,
+    },
+    verificationText: {
+        fontSize: 20,
+        fontWeight: '700',
+        color: '#1A1A1A',
+        marginBottom: 8,
+        textAlign: 'center',
+    },
+    verificationSubtext: {
+        fontSize: 14,
+        color: '#666666',
+        textAlign: 'center',
+    },
+    errorMessage: {
+        fontSize: 16,
+        color: '#666666',
+        textAlign: 'center',
+        marginTop: 8,
+        paddingHorizontal: 20,
+    },
+});
+exports.default = MerchantOnboardingSheet;