@airxpay/sdk-ui 1.0.3 → 1.0.6

package/dist/components/steps/OnboardingComplete.js

@@ -38,15 +38,21 @@ 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 { width } = react_native_1.Dimensions.get('window');
+const OnboardingComplete = ({ merchantData, 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;
+    const [retryCount, setRetryCount] = (0, react_1.useState)(0);
+    // Animation values
+    const fadeAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const scaleAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0.9)).current;
+    const slideAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(30)).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
+        if (isWaitingForBackend && !backendConfirmed) {
+            // In a real app, you would listen for a backend event or poll an API
+            // This is where you'd set up your real backend confirmation listener
+            console.log('Waiting for backend confirmation...');
+            // For demo purposes, simulate backend confirmation
             const timer = setTimeout(() => {
                 setBackendConfirmed(true);
                 onBackendConfirmed();
@@ -63,11 +69,37 @@ const OnboardingComplete = ({ sellerData, mode, status, kycStatus, isBankDetails
                         tension: 40,
                         useNativeDriver: true,
                     }),
+                    react_native_1.Animated.timing(slideAnim, {
+                        toValue: 0,
+                        duration: 500,
+                        useNativeDriver: true,
+                    }),
                 ]).start();
-            }, 3000); // Simulate 3 second backend processing
+            }, 3000);
             return () => clearTimeout(timer);
         }
-    }, [isWaitingForBackend]);
+        else if (!isWaitingForBackend && !backendConfirmed) {
+            // If not waiting for backend, animate immediately
+            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,
+                }),
+                react_native_1.Animated.timing(slideAnim, {
+                    toValue: 0,
+                    duration: 500,
+                    useNativeDriver: true,
+                }),
+            ]).start();
+        }
+    }, [isWaitingForBackend, backendConfirmed, onBackendConfirmed]);
     const getStatusColor = (status) => {
         switch (status) {
             case 'active':
@@ -105,6 +137,20 @@ const OnboardingComplete = ({ sellerData, mode, status, kycStatus, isBankDetails
         }
     };
     const isFullyActive = status === 'active' && kycStatus === 'verified' && isBankDetailsCompleted;
+    // Validate all required data before completing
+    (0, react_1.useEffect)(() => {
+        if (isBasicCompleted && isKycCompleted && isBankDetailsCompleted && !isWaitingForBackend && !backendConfirmed) {
+            // All steps completed, trigger onComplete
+            onComplete();
+        }
+    }, [isBasicCompleted, isKycCompleted, isBankDetailsCompleted, isWaitingForBackend, backendConfirmed, onComplete]);
+    // Retry function for failed backend confirmation
+    const handleRetry = () => {
+        setRetryCount(prev => prev + 1);
+        setBackendConfirmed(false);
+        // Trigger backend confirmation again
+        onBackendConfirmed();
+    };
     // Loading State
     if (isWaitingForBackend && !backendConfirmed) {
         return (<react_native_1.View style={styles.container}>
@@ -118,7 +164,7 @@ const OnboardingComplete = ({ sellerData, mode, status, kycStatus, isBankDetails
             
             <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...
+              Please wait while we set up your merchant account...
             </react_native_1.Text>
 
             {/* Step Status Indicators */}
@@ -165,6 +211,10 @@ const OnboardingComplete = ({ sellerData, mode, status, kycStatus, isBankDetails
                 <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>
+
+              {retryCount > 0 && (<react_native_1.TouchableOpacity onPress={handleRetry} style={styles.retryButton}>
+                  <react_native_1.Text style={styles.retryText}>Retry</react_native_1.Text>
+                </react_native_1.TouchableOpacity>)}
             </react_native_paper_1.Surface>
           </react_native_1.View>
         </expo_linear_gradient_1.LinearGradient>
@@ -179,7 +229,10 @@ const OnboardingComplete = ({ sellerData, mode, status, kycStatus, isBankDetails
             styles.headerCard,
             {
                 opacity: fadeAnim,
-                transform: [{ scale: scaleAnim }]
+                transform: [
+                    { scale: scaleAnim },
+                    { translateY: slideAnim }
+                ]
             }
         ]}>
             <react_native_paper_1.Surface style={styles.headerCardSurface}>
@@ -192,14 +245,14 @@ const OnboardingComplete = ({ sellerData, mode, status, kycStatus, isBankDetails
                 <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'}
+            ? 'Your merchant account is fully active'
+            : 'Your merchant 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 */}
+          {/* Progress Steps */}
           <react_native_paper_1.Surface style={styles.progressCard}>
             <react_native_1.View style={styles.progressContainer}>
               <react_native_1.View style={styles.progressStep}>
@@ -236,53 +289,41 @@ const OnboardingComplete = ({ sellerData, mode, status, kycStatus, isBankDetails
               <react_native_1.Text style={styles.summaryTitle}>Account Summary</react_native_1.Text>
             </react_native_1.View>
 
-            {/* Seller Info in Grid */}
+            {/* Merchant 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}
+                  {merchantData.merchantName}
                 </react_native_1.Text>
               </react_native_1.View>
 
-              {sellerData.businessName && (<react_native_1.View style={styles.infoItem}>
+              {merchantData.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}
+                    {merchantData.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}
+                  {merchantData.merchantEmail}
                 </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>
+              {merchantData.merchantDID && (<react_native_1.View style={styles.infoItem}>
+                  <react_native_1.Text style={styles.infoLabel}>Merchant ID</react_native_1.Text>
                   <react_native_1.Text style={styles.infoValue} numberOfLines={1}>
-                    {sellerData.sellerDID.slice(0, 8)}...
+                    {merchantData.merchantDID.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 */}
+            {/* Status Badges */}
             <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' }]}>
@@ -312,7 +353,7 @@ const OnboardingComplete = ({ sellerData, mode, status, kycStatus, isBankDetails
               </react_native_1.View>
             </react_native_1.View>
 
-            {/* Status Messages - Compact */}
+            {/* Status Messages */}
             {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>)}
@@ -326,7 +367,7 @@ const OnboardingComplete = ({ sellerData, mode, status, kycStatus, isBankDetails
               </react_native_1.View>)}
           </react_native_paper_1.Surface>
 
-          {/* Next Steps - Compact */}
+          {/* Next Steps */}
           <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"/>
@@ -357,6 +398,13 @@ const OnboardingComplete = ({ sellerData, mode, status, kycStatus, isBankDetails
             </react_native_1.View>
           </react_native_paper_1.Surface>
 
+          {/* Complete Button */}
+          {!isFullyActive && (<react_native_1.TouchableOpacity style={styles.completeButton} onPress={onComplete}>
+              <expo_linear_gradient_1.LinearGradient colors={['#0066CC', '#0099FF']} style={styles.completeButtonGradient}>
+                <react_native_1.Text style={styles.completeButtonText}>Go to Dashboard</react_native_1.Text>
+              </expo_linear_gradient_1.LinearGradient>
+            </react_native_1.TouchableOpacity>)}
+
           <react_native_1.Text style={styles.footerText}>
             Update info anytime from dashboard
           </react_native_1.Text>
@@ -374,6 +422,7 @@ const styles = react_native_1.StyleSheet.create({
     },
     scrollContent: {
         padding: 12,
+        paddingBottom: 24,
     },
     loadingContainer: {
         flex: 1,
@@ -475,6 +524,19 @@ const styles = react_native_1.StyleSheet.create({
         fontSize: 14,
         color: '#6B7280',
     },
+    retryButton: {
+        marginTop: 16,
+        paddingVertical: 8,
+        paddingHorizontal: 16,
+        backgroundColor: '#F3F4F6',
+        borderRadius: 8,
+        alignSelf: 'center',
+    },
+    retryText: {
+        fontSize: 14,
+        color: '#0066CC',
+        fontWeight: '500',
+    },
     headerCard: {
         marginBottom: 8,
     },
@@ -742,6 +804,20 @@ const styles = react_native_1.StyleSheet.create({
         color: '#374151',
         textAlign: 'center',
     },
+    completeButton: {
+        marginBottom: 12,
+        borderRadius: 12,
+        overflow: 'hidden',
+    },
+    completeButtonGradient: {
+        paddingVertical: 14,
+        alignItems: 'center',
+    },
+    completeButtonText: {
+        fontSize: 15,
+        fontWeight: '600',
+        color: '#FFFFFF',
+    },
     footerText: {
         fontSize: 9,
         color: '#9CA3AF',

package/dist/components/ui/MerchantOnboard/MerchantOnboarding.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { MerchantOnboardingProps } from '../../../types/merchantTypes';
+declare const MerchantOnboardingSheet: React.FC<MerchantOnboardingProps>;
+export default MerchantOnboardingSheet;