@airxpay/sdk-ui 1.0.0

package/dist/components/ui/SellerOnboard/CustomSegmentedButtons.js

@@ -0,0 +1,64 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const styles = react_native_1.StyleSheet.create({
+    segmentedContainer: {
+        flexDirection: 'row',
+        backgroundColor: '#f0f0f0',
+        borderRadius: 8,
+        padding: 4,
+    },
+    segmentedButton: {
+        flex: 1,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingVertical: 8,
+        paddingHorizontal: 12,
+        borderRadius: 6,
+        backgroundColor: 'transparent',
+    },
+    segmentedButtonActive: {
+        backgroundColor: '#6200ee',
+        elevation: 2,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.2,
+        shadowRadius: 1,
+    },
+    segmentedButtonText: {
+        fontSize: 14,
+        fontWeight: '500',
+        color: '#666',
+    },
+    segmentedButtonTextActive: {
+        color: 'white',
+    },
+    segmentedButtonCheck: {
+        color: 'white',
+        marginLeft: 4,
+        fontSize: 14,
+        fontWeight: 'bold',
+    },
+});
+const CustomSegmentedButtons = ({ value, onValueChange, buttons, style, }) => {
+    return (<react_native_1.View style={[styles.segmentedContainer, style]}>
+      {buttons.map((button) => (<react_native_1.TouchableOpacity key={button.value} style={[
+                styles.segmentedButton,
+                value === button.value && styles.segmentedButtonActive
+            ]} onPress={() => onValueChange(button.value)}>
+          <react_native_1.Text style={[
+                styles.segmentedButtonText,
+                value === button.value && styles.segmentedButtonTextActive
+            ]}>
+            {button.label}
+          </react_native_1.Text>
+          {button.showSelectedCheck && value === button.value && (<react_native_1.Text style={styles.segmentedButtonCheck}>✓</react_native_1.Text>)}
+        </react_native_1.TouchableOpacity>))}
+    </react_native_1.View>);
+};
+exports.default = CustomSegmentedButtons;

package/dist/components/ui/SellerOnboard/SellerOnboarding.js

@@ -0,0 +1,490 @@
+"use strict";
+// components/SellerOnboardingSheet.tsx
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_paper_1 = require("react-native-paper");
+const expo_linear_gradient_1 = require("expo-linear-gradient");
+const 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 OnboardingComplete_1 = __importDefault(require("../../steps/OnboardingComplete"));
+const AirXPayProvider_1 = require("../../../contexts/AirXPayProvider");
+const { width } = react_native_1.Dimensions.get('window');
+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: 'Complete', key: 'complete', isRequired: false, icon: 'check-circle' },
+];
+// Default logo - can be overridden via props
+const DEFAULT_LOGO = require('../../../../../../assets/images/airxpay.png');
+const SellerOnboardingSheet = ({ sellerId, mode, isKycCompleted, isBankDetailsCompleted, kycStatus, status, initialStep = 1, initialData = {}, onNext, onBack, onComplete, loading: externalLoading = false, }) => {
+    // Get configuration from provider (keep intact as required)
+    const airXPay = (0, AirXPayProvider_1.useAirXPaySafe)();
+    if (!airXPay) {
+        console.warn('AirXPayProvider is undefined. ' +
+            'Provider not found in component tree. ' +
+            'Value is undefined where provider should be. ' +
+            'This undefined provider will cause issues. ' +
+            'Undefined context from missing provider. ' +
+            'Wrap your app with <AirXPayProvider>. ' +
+            'AirXPayProvider cannot be undefined. ' +
+            'Undefined provider at root level missing. ' +
+            'Add <AirXPayProvider> around your app. ' +
+            'Fix this undefined provider immediately.');
+    }
+    // Access config safely
+    const baseUrl = airXPay?.baseUrl;
+    const publicKey = airXPay?.publicKey;
+    // Properly use variables so TS doesn't complain
+    (0, react_1.useEffect)(() => {
+        if (!baseUrl || !publicKey) {
+            console.warn('AirXPay config is missing baseUrl or publicKey');
+        }
+        else {
+            console.log('✅ AirXPay ready with baseUrl and publicKey');
+        }
+    }, [baseUrl, publicKey]);
+    // 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 [sellerData, setSellerData] = (0, react_1.useState)({
+        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);
+    // Track completion status of each step
+    const [stepCompletion, setStepCompletion] = (0, react_1.useState)({
+        basic: !!initialData.sellerName && !!initialData.sellerEmail,
+        kyc: isKycCompleted || false,
+        bank: isBankDetailsCompleted || false,
+    });
+    // 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 = { ...sellerData, ...stepData };
+        setSellerData(updatedData);
+        // Update step completion status
+        if (currentStep === 1) {
+            setStepCompletion(prev => ({
+                ...prev,
+                basic: !!(updatedData.sellerName && updatedData.sellerEmail)
+            }));
+        }
+        else if (currentStep === 2) {
+            setStepCompletion(prev => ({ ...prev, kyc: true }));
+        }
+        else if (currentStep === 3) {
+            setStepCompletion(prev => ({ ...prev, bank: 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 => prev + 1);
+            }, 150);
+        }
+    };
+    const handleBack = () => {
+        if (currentStep > 1) {
+            animateStepTransition('back');
+            setTimeout(() => {
+                setCurrentStep(prev => prev - 1);
+                onBack(currentStep);
+            }, 150);
+        }
+    };
+    const validateStepData = (0, react_1.useCallback)(() => {
+        // Validate required fields
+        if (!sellerData.sellerName || !sellerData.sellerEmail) {
+            setErrors({ sellerName: 'Seller name and email are required' });
+            setShowError(true);
+            return false;
+        }
+        if (mode === 'live') {
+            if (!stepCompletion.kyc) {
+                react_native_1.Alert.alert('KYC Pending', 'Please complete KYC verification first', [
+                    { text: 'Cancel', style: 'cancel' },
+                    { text: 'Go to KYC', onPress: () => setCurrentStep(2) }
+                ]);
+                return false;
+            }
+            if (!stepCompletion.bank) {
+                react_native_1.Alert.alert('Bank Details Pending', 'Please add bank details first', [
+                    { text: 'Cancel', style: 'cancel' },
+                    { text: 'Go to Bank Details', onPress: () => setCurrentStep(3) }
+                ]);
+                return false;
+            }
+        }
+        return true;
+    }, [sellerData, mode, stepCompletion]);
+    const handleComplete = (0, react_1.useCallback)(() => {
+        // Validate all required data before completing
+        if (!validateStepData()) {
+            return;
+        }
+        if (!baseUrl || !publicKey) {
+            react_native_1.Alert.alert('Configuration Error', 'AirXPay baseUrl or publicKey is missing. Please check provider setup.');
+            return;
+        }
+        // Show loading state while waiting for backend confirmation
+        setIsWaitingForBackend(true);
+        // Success animation
+        react_native_1.Animated.sequence([
+            react_native_1.Animated.timing(scaleAnim, {
+                toValue: 1.1,
+                duration: 200,
+                useNativeDriver: true,
+            }),
+            react_native_1.Animated.timing(scaleAnim, {
+                toValue: 1,
+                duration: 200,
+                useNativeDriver: true,
+            }),
+        ]).start();
+        // Prepare complete seller data
+        const completeSellerData = {
+            ...sellerData,
+            mode,
+            kycStatus: stepCompletion.kyc ? 'verified' : kycStatus,
+            isKycCompleted: stepCompletion.kyc,
+            isBankDetailsCompleted: stepCompletion.bank,
+            status: status || (mode === 'live' && stepCompletion.kyc && stepCompletion.bank ? 'active' : 'pending'),
+        };
+        // Call onComplete with seller data
+        // The developer's backend will handle actual seller creation
+        // and should call a callback or update state when complete
+        onComplete(completeSellerData);
+    }, [sellerData, mode, status, kycStatus, stepCompletion, onComplete, validateStepData]);
+    // This function would be called by the parent when backend confirms creation
+    const handleBackendConfirmation = (0, react_1.useCallback)(() => {
+        setIsWaitingForBackend(false);
+        // The OnboardingComplete component will now show success state
+    }, []);
+    const getStepTitle = () => {
+        const step = STEPS.find(s => s.id === currentStep);
+        return step?.name || '';
+    };
+    const renderStep = () => {
+        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={sellerData} onNext={(data) => handleNext(data)} errors={errors} setErrors={setErrors}/>);
+                case 2:
+                    return (<KYCVerification_1.default initialData={sellerData} mode={mode} kycStatus={kycStatus} onNext={(data) => handleNext(data)} onBack={handleBack}/>);
+                case 3:
+                    return (<BankDetails_1.default initialData={sellerData} mode={mode} onNext={(data) => handleNext(data)} onBack={handleBack}/>);
+                case 4:
+                    return (<OnboardingComplete_1.default sellerData={sellerData} mode={mode} status={status} kycStatus={kycStatus} isBankDetailsCompleted={stepCompletion.bank} isKycCompleted={stepCompletion.kyc} isBasicCompleted={stepCompletion.basic} onComplete={handleComplete} isWaitingForBackend={isWaitingForBackend} onBackendConfirmed={handleBackendConfirmation}/>);
+                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%'],
+    });
+    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 < 4 && (<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 - Now configurable */}
+              <react_native_1.View style={styles.logoContainer}>
+                <react_native_paper_1.Avatar.Image size={40} source={DEFAULT_LOGO} style={styles.avatar}/>
+              </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',
+    },
+    avatar: {
+        backgroundColor: '#ffffff',
+    },
+    logoContainer: {
+        width: 16,
+        height: 16,
+        left: -24,
+    },
+    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,
+    },
+});
+exports.default = SellerOnboardingSheet;