@airxpay/sdk-ui 1.0.0

package/dist/components/common/FileUploader.js

@@ -0,0 +1,210 @@
+"use strict";
+// components/common/FileUploader.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 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const react_native_paper_1 = require("react-native-paper");
+const ImagePicker = __importStar(require("expo-image-picker"));
+const FileUploader = ({ label, required = false, description, value, onUpload, onRemove, uploading = false, mode = 'test', accept = 'image/*', }) => {
+    const pickImage = async () => {
+        try {
+            const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
+            if (status !== 'granted') {
+                react_native_1.Alert.alert('Permission needed', 'Please grant camera roll permissions');
+                return;
+            }
+            const result = await ImagePicker.launchImageLibraryAsync({
+                mediaTypes: ImagePicker.MediaTypeOptions.Images,
+                allowsEditing: true,
+                aspect: [4, 3],
+                quality: 0.8,
+            });
+            if (!result.canceled && result.assets && result.assets[0]) {
+                onUpload(result.assets[0]);
+            }
+        }
+        catch (error) {
+            react_native_1.Alert.alert('Error', 'Failed to pick image');
+        }
+    };
+    const takePhoto = async () => {
+        try {
+            const { status } = await ImagePicker.requestCameraPermissionsAsync();
+            if (status !== 'granted') {
+                react_native_1.Alert.alert('Permission needed', 'Please grant camera permissions');
+                return;
+            }
+            const result = await ImagePicker.launchCameraAsync({
+                allowsEditing: true,
+                aspect: [4, 3],
+                quality: 0.8,
+            });
+            if (!result.canceled && result.assets && result.assets[0]) {
+                onUpload(result.assets[0]);
+            }
+        }
+        catch (error) {
+            react_native_1.Alert.alert('Error', 'Failed to take photo');
+        }
+    };
+    const showOptions = () => {
+        react_native_1.Alert.alert(`Upload ${label}`, 'Choose an option', [
+            { text: 'Take Photo', onPress: takePhoto },
+            { text: 'Choose from Gallery', onPress: pickImage },
+            { text: 'Cancel', style: 'cancel' }
+        ]);
+    };
+    const handleRemove = () => {
+        react_native_1.Alert.alert('Remove Document', `Are you sure you want to remove ${label}?`, [
+            { text: 'Cancel', style: 'cancel' },
+            { text: 'Remove', style: 'destructive', onPress: onRemove }
+        ]);
+    };
+    return (<react_native_1.View style={styles.container}>
+      <react_native_1.View style={styles.labelContainer}>
+        <react_native_1.Text style={styles.label}>
+          {label} {required && <react_native_1.Text style={styles.required}>*</react_native_1.Text>}
+        </react_native_1.Text>
+        {description && <react_native_1.Text style={styles.description}>{description}</react_native_1.Text>}
+      </react_native_1.View>
+
+      {value ? (<react_native_1.View style={styles.previewContainer}>
+          <react_native_1.Image source={{ uri: value }} style={styles.preview}/>
+          <react_native_1.View style={styles.previewActions}>
+            <react_native_1.TouchableOpacity onPress={showOptions} style={styles.changeButton}>
+              <react_native_1.Text style={styles.changeButtonText}>Change</react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+            <react_native_1.TouchableOpacity onPress={handleRemove} style={styles.removeButton}>
+              <react_native_1.Text style={styles.removeButtonText}>Remove</react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+          </react_native_1.View>
+        </react_native_1.View>) : (<react_native_1.TouchableOpacity style={styles.uploadArea} onPress={showOptions} disabled={uploading}>
+          {uploading ? (<react_native_paper_1.ActivityIndicator size="small" color="#0066CC"/>) : (<>
+              <react_native_1.Text style={styles.uploadIcon}>📎</react_native_1.Text>
+              <react_native_1.Text style={styles.uploadText}>Tap to upload</react_native_1.Text>
+              {mode === 'test' && (<react_native_1.Text style={styles.testModeHint}>(Test mode - simulated)</react_native_1.Text>)}
+            </>)}
+        </react_native_1.TouchableOpacity>)}
+    </react_native_1.View>);
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        marginBottom: 16,
+    },
+    labelContainer: {
+        marginBottom: 8,
+    },
+    label: {
+        fontSize: 14,
+        fontWeight: '500',
+        color: '#374151',
+    },
+    required: {
+        color: '#EF4444',
+    },
+    description: {
+        fontSize: 12,
+        color: '#6B7280',
+        marginTop: 2,
+    },
+    uploadArea: {
+        borderWidth: 2,
+        borderColor: '#E5E7EB',
+        borderStyle: 'dashed',
+        borderRadius: 8,
+        padding: 20,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#F9FAFB',
+    },
+    uploadIcon: {
+        fontSize: 24,
+        marginBottom: 8,
+    },
+    uploadText: {
+        fontSize: 14,
+        color: '#6B7280',
+    },
+    testModeHint: {
+        fontSize: 10,
+        color: '#9CA3AF',
+        marginTop: 4,
+    },
+    previewContainer: {
+        borderWidth: 1,
+        borderColor: '#E5E7EB',
+        borderRadius: 8,
+        overflow: 'hidden',
+    },
+    preview: {
+        width: '100%',
+        height: 120,
+        resizeMode: 'cover',
+    },
+    previewActions: {
+        flexDirection: 'row',
+        borderTopWidth: 1,
+        borderTopColor: '#E5E7EB',
+    },
+    changeButton: {
+        flex: 1,
+        padding: 12,
+        alignItems: 'center',
+        backgroundColor: '#F9FAFB',
+    },
+    changeButtonText: {
+        color: '#0066CC',
+        fontSize: 14,
+        fontWeight: '500',
+    },
+    removeButton: {
+        flex: 1,
+        padding: 12,
+        alignItems: 'center',
+        backgroundColor: '#FEF2F2',
+        borderLeftWidth: 1,
+        borderLeftColor: '#E5E7EB',
+    },
+    removeButtonText: {
+        color: '#EF4444',
+        fontSize: 14,
+        fontWeight: '500',
+    },
+});
+exports.default = FileUploader;

package/dist/components/common/StepIndicator.js

@@ -0,0 +1,269 @@
+"use strict";
+// components/common/StepIndicator.tsx
+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 react_native_paper_1 = require("react-native-paper");
+const expo_linear_gradient_1 = require("expo-linear-gradient");
+const StepIndicator = ({ currentStep, steps, mode, isKycCompleted, isBankDetailsCompleted, }) => {
+    const getStepStatus = (stepId) => {
+        if (stepId < currentStep)
+            return 'completed';
+        if (stepId === currentStep)
+            return 'current';
+        return 'upcoming';
+    };
+    const getStepIcon = (stepId, status) => {
+        if (status === 'completed')
+            return 'check';
+        switch (stepId) {
+            case 1: return 'account';
+            case 2: return 'shield-account';
+            case 3: return 'bank';
+            case 4: return 'check-circle';
+            default: return 'circle';
+        }
+    };
+    const getStepColor = (status) => {
+        switch (status) {
+            case 'completed':
+                return '#10B981';
+            case 'current':
+                return '#0066CC';
+            default:
+                return '#9CA3AF';
+        }
+    };
+    const getStepLabel = (step) => {
+        if (mode === 'test' && step.id === 4)
+            return null;
+        return step.name;
+    };
+    return (<react_native_1.View style={styles.container}>
+      {/* Main Steps Row - Compact */}
+      <react_native_1.View style={styles.stepsRow}>
+        {steps.map((step, index) => {
+            const status = getStepStatus(step.id);
+            const color = getStepColor(status);
+            const icon = getStepIcon(step.id, status);
+            const label = getStepLabel(step);
+            // Don't show step 4 in test mode
+            if (mode === 'test' && step.id === 4)
+                return null;
+            // Don't show connector after last visible step
+            const isLastVisible = mode === 'test'
+                ? step.id === 3
+                : index === steps.length - 1;
+            return (<react_1.default.Fragment key={step.id}>
+              <react_native_1.View style={styles.stepItem}>
+                {/* Step Circle with Gradient or Color */}
+                {status === 'current' ? (<expo_linear_gradient_1.LinearGradient colors={['#0066CC', '#0099FF']} style={[styles.stepCircle, { shadowColor: color }]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }}>
+                    <react_native_paper_1.IconButton icon={icon} size={14} iconColor="#FFFFFF"/>
+                  </expo_linear_gradient_1.LinearGradient>) : (<react_native_1.View style={[
+                        styles.stepCircle,
+                        { backgroundColor: color },
+                        status === 'completed' && styles.stepCircleCompleted
+                    ]}>
+                    <react_native_paper_1.IconButton icon={icon} size={14} iconColor="#FFFFFF"/>
+                  </react_native_1.View>)}
+                
+                {/* Step Label - Compact */}
+                {label && (<react_native_1.Text style={[
+                        styles.stepLabel,
+                        { color: status === 'upcoming' ? '#9CA3AF' : color }
+                    ]}>
+                    {label}
+                  </react_native_1.Text>)}
+              </react_native_1.View>
+              
+              {/* Connector - Only between visible steps */}
+              {!isLastVisible && (<react_native_1.View style={[
+                        styles.stepConnector,
+                        { backgroundColor: status === 'completed' ? '#10B981' : '#E5E7EB' }
+                    ]}/>)}
+            </react_1.default.Fragment>);
+        })}
+      </react_native_1.View>
+
+      {/* Status Row - Compact Badges */}
+      <react_native_1.View style={styles.statusRow}>
+        {/* Mode Badge */}
+        <react_native_1.View style={[
+            styles.modeBadge,
+            mode === 'live' ? styles.liveBadge : styles.testBadge
+        ]}>
+          <react_native_paper_1.IconButton icon={mode === 'live' ? 'cloud' : 'flask'} size={12} iconColor={mode === 'live' ? '#DC2626' : '#92400E'}/>
+          <react_native_1.Text style={[
+            styles.modeText,
+            mode === 'live' ? styles.liveText : styles.testText
+        ]}>
+            {mode === 'live' ? 'LIVE' : 'TEST'}
+          </react_native_1.Text>
+        </react_native_1.View>
+
+        {/* KYC Status Badge */}
+        {isKycCompleted ? (<react_native_1.View style={[styles.statusBadge, styles.kycCompleted]}>
+            <react_native_paper_1.IconButton icon="check-circle" size={12} iconColor="#10B981"/>
+            <react_native_1.Text style={styles.kycText}>KYC Verified</react_native_1.Text>
+          </react_native_1.View>) : (<react_native_1.View style={[styles.statusBadge, styles.kycPending]}>
+            <react_native_paper_1.IconButton icon="clock-outline" size={12} iconColor="#D97706"/>
+            <react_native_1.Text style={styles.kycPendingText}>KYC Pending</react_native_1.Text>
+          </react_native_1.View>)}
+
+        {/* Bank Status Badge */}
+        {isBankDetailsCompleted ? (<react_native_1.View style={[styles.statusBadge, styles.bankCompleted]}>
+            <react_native_paper_1.IconButton icon="check-circle" size={12} iconColor="#10B981"/>
+            <react_native_1.Text style={styles.bankText}>Bank Added</react_native_1.Text>
+          </react_native_1.View>) : (<react_native_1.View style={[styles.statusBadge, styles.bankPending]}>
+            <react_native_paper_1.IconButton icon="clock-outline" size={12} iconColor="#D97706"/>
+            <react_native_1.Text style={styles.bankPendingText}>Bank Pending</react_native_1.Text>
+          </react_native_1.View>)}
+      </react_native_1.View>
+
+      {/* Test Mode Hint - Compact */}
+      {mode === 'test' && (<react_native_1.View style={styles.testHint}>
+          <react_native_paper_1.IconButton icon="information" size={12} iconColor="#92400E"/>
+          <react_native_1.Text style={styles.testHintText}>
+            KYC auto-approved in test mode
+          </react_native_1.Text>
+        </react_native_1.View>)}
+    </react_native_1.View>);
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        backgroundColor: '#FFFFFF',
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+        borderBottomWidth: 1,
+        borderBottomColor: '#F3F4F6',
+    },
+    stepsRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: 8,
+    },
+    stepItem: {
+        alignItems: 'center',
+        flex: 1,
+    },
+    stepCircle: {
+        width: 28,
+        height: 28,
+        borderRadius: 14,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginBottom: 2,
+        elevation: 2,
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.1,
+        shadowRadius: 2,
+    },
+    stepCircleCompleted: {
+        backgroundColor: '#10B981',
+    },
+    stepLabel: {
+        fontSize: 9,
+        fontWeight: '500',
+        textAlign: 'center',
+    },
+    stepConnector: {
+        height: 2,
+        flex: 1,
+        marginHorizontal: 2,
+        marginBottom: 16,
+    },
+    statusRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        flexWrap: 'wrap',
+    },
+    modeBadge: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+        borderRadius: 12,
+        marginRight: 4,
+    },
+    liveBadge: {
+        backgroundColor: '#FEE2E2',
+    },
+    testBadge: {
+        backgroundColor: '#FEF3C7',
+    },
+    modeText: {
+        fontSize: 9,
+        fontWeight: '600',
+        marginLeft: -2,
+    },
+    liveText: {
+        color: '#DC2626',
+    },
+    testText: {
+        color: '#92400E',
+    },
+    statusBadge: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+        borderRadius: 12,
+    },
+    kycCompleted: {
+        backgroundColor: '#D1FAE5',
+    },
+    kycPending: {
+        backgroundColor: '#FEF3C7',
+    },
+    bankCompleted: {
+        backgroundColor: '#D1FAE5',
+    },
+    bankPending: {
+        backgroundColor: '#FEF3C7',
+    },
+    kycText: {
+        fontSize: 9,
+        color: '#10B981',
+        fontWeight: '500',
+        marginLeft: -2,
+    },
+    kycPendingText: {
+        fontSize: 9,
+        color: '#D97706',
+        fontWeight: '500',
+        marginLeft: -2,
+    },
+    bankText: {
+        fontSize: 9,
+        color: '#10B981',
+        fontWeight: '500',
+        marginLeft: -2,
+    },
+    bankPendingText: {
+        fontSize: 9,
+        color: '#D97706',
+        fontWeight: '500',
+        marginLeft: -2,
+    },
+    testHint: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginTop: 4,
+        backgroundColor: '#FEF3C7',
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+        borderRadius: 12,
+        alignSelf: 'flex-start',
+    },
+    testHintText: {
+        fontSize: 8,
+        color: '#92400E',
+        marginLeft: -4,
+    },
+});
+exports.default = StepIndicator;