@airxpay/sdk-ui 1.0.2 → 1.0.5

package/README.md

@@ -28,7 +28,7 @@
 ---
 
 <div align="center">
-  <img src="./assets/images/airxpay.png" alt="AirXPay Flixora SDK" width="120"/>
+  <img src="./src/assets/images/airxpay.png" alt="AirXPay Flixora SDK" width="120"/>
 </div>
 
 ---

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

@@ -33,6 +33,15 @@ var __importStar = (this && this.__importStar) || (function () {
         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 };
 };
@@ -47,6 +56,7 @@ 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 seller_1 = require("../../../api/seller");
 const { width } = react_native_1.Dimensions.get('window');
 const STEPS = [
     { id: 1, name: 'Basic Details', key: 'basic', isRequired: true, icon: 'account' },
@@ -55,34 +65,14 @@ const STEPS = [
     { 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 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)
+    // Get configuration from provider
     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 === null || airXPay === void 0 ? void 0 : airXPay.baseUrl;
-    const publicKey = airXPay === null || airXPay === void 0 ? void 0 : 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]);
+    // 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;
@@ -106,6 +96,56 @@ const SellerOnboardingSheet = ({ sellerId, mode, isKycCompleted, isBankDetailsCo
         kyc: isKycCompleted || false,
         bank: isBankDetailsCompleted || false,
     });
+    // 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 { baseUrl, publicKey } = airXPay;
+            if (!baseUrl || !publicKey) {
+                console.error('❌ AirXPay config missing:', { baseUrl: !!baseUrl, publicKey: !!publicKey });
+                setVerificationError('AirXPay configuration incomplete. Both baseUrl and publicKey are required.');
+                setIsValidProvider(false);
+                setIsVerifying(false);
+                return;
+            }
+            console.log('✅ AirXPay config found:', { baseUrl, publicKey: publicKey.substring(0, 8) + '...' });
+            try {
+                setIsVerifying(true);
+                console.log('🔑 Verifying public key with baseUrl:', baseUrl);
+                yield (0, seller_1.verifyPublicKey)(baseUrl, 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, {
@@ -212,10 +252,6 @@ const SellerOnboardingSheet = ({ sellerId, mode, isKycCompleted, isBankDetailsCo
         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
@@ -234,19 +270,45 @@ const SellerOnboardingSheet = ({ sellerId, mode, isKycCompleted, isBankDetailsCo
         // Prepare complete seller data
         const completeSellerData = Object.assign(Object.assign({}, 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 === 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 = () => {
         const isLoading = externalLoading || isSubmitting;
         if (isLoading) {
@@ -290,6 +352,16 @@ const SellerOnboardingSheet = ({ sellerId, mode, isKycCompleted, isBankDetailsCo
         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"/>
       
@@ -311,7 +383,7 @@ const SellerOnboardingSheet = ({ sellerId, mode, isKycCompleted, isBankDetailsCo
                 </react_native_1.View>
               </react_native_1.View>
               
-              {/* Logo Section - Now configurable */}
+              {/* Logo Section */}
               <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>
@@ -473,5 +545,39 @@ const styles = react_native_1.StyleSheet.create({
         marginBottom: 16,
         borderRadius: 8,
     },
+    // New styles for provider verification
+    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 = SellerOnboardingSheet;

package/dist/contexts/AirXPayProvider.d.ts

@@ -1,14 +1,21 @@
 import React from "react";
 import { AirXPayConfig } from "../types/type";
+import { SellerInitResponse } from "../api/seller";
+interface AirXPayContextExtended extends AirXPayConfig {
+    isValid: boolean;
+    loading: boolean;
+    sellerData?: SellerInitResponse;
+    error?: string;
+}
 interface AirXPayProviderProps {
     config: AirXPayConfig;
     children: React.ReactNode;
     enableLogging?: boolean;
 }
 export declare const AirXPayProvider: React.FC<AirXPayProviderProps>;
-export declare const useAirXPay: () => AirXPayConfig;
-export declare const useAirXPaySafe: () => AirXPayConfig | null;
+export declare const useAirXPay: () => AirXPayContextExtended;
+export declare const useAirXPaySafe: () => AirXPayContextExtended | null;
 export declare const useAirXPayConfig: <K extends keyof AirXPayConfig>(key: K) => AirXPayConfig[K] | undefined;
 export declare const useProviderReady: () => boolean;
-export declare const AirXPayConsumer: React.Consumer<AirXPayConfig | null>;
+export declare const AirXPayConsumer: React.Consumer<AirXPayContextExtended | null>;
 export default AirXPayProvider;

package/dist/contexts/AirXPayProvider.js

@@ -32,14 +32,24 @@ var __importStar = (this && this.__importStar) || (function () {
         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());
+    });
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AirXPayConsumer = exports.useProviderReady = exports.useAirXPayConfig = exports.useAirXPaySafe = exports.useAirXPay = exports.AirXPayProvider = void 0;
+// AirXPayProvider.tsx
 const react_1 = __importStar(require("react"));
-// Context with professional error handling
+const seller_1 = require("../api/seller");
 const AirXPayContext = (0, react_1.createContext)(null);
 AirXPayContext.displayName = "AirXPayContext";
 const AirXPayProvider = ({ config, children, enableLogging = __DEV__, }) => {
-    // Validate configuration on mount
+    const [state, setState] = (0, react_1.useState)(Object.assign(Object.assign({}, config), { isValid: false, loading: true }));
     (0, react_1.useEffect)(() => {
         const validationErrors = [];
         // Validate baseUrl
@@ -64,7 +74,6 @@ const AirXPayProvider = ({ config, children, enableLogging = __DEV__, }) => {
         else if (config.publicKey.length < 20) {
             validationErrors.push("publicKey appears to be invalid. Please check your API key.");
         }
-        // Throw error if validation fails
         if (validationErrors.length > 0) {
             const errorMessage = [
                 "AirXPayProvider Configuration Error:",
@@ -72,26 +81,37 @@ const AirXPayProvider = ({ config, children, enableLogging = __DEV__, }) => {
                 "",
                 "Received config:",
                 `  • baseUrl: ${config.baseUrl || "missing"}`,
-                `  • publicKey: ${config.publicKey ? `${config.publicKey.substring(0, 8)}...` : "missing"}`,
+                `  • publicKey: ${config.publicKey ? `${config.publicKey.substring(0, 8)}...` : "missing"}`
             ].join("\n");
-            if (enableLogging) {
+            if (enableLogging)
                 console.error("❌ AirXPay:", errorMessage);
-            }
             throw new Error(errorMessage);
         }
-        // Log success in development
         if (enableLogging) {
             console.log("%c✅ AirXPay Provider Initialized", "color: #10b981; font-weight: bold;", {
                 baseUrl: config.baseUrl,
                 publicKey: `${config.publicKey.substring(0, 8)}...`,
             });
         }
+        // Now call the public key verification API
+        const verifyKey = () => __awaiter(void 0, void 0, void 0, function* () {
+            try {
+                const sellerData = yield (0, seller_1.verifyPublicKey)(config.baseUrl, config.publicKey);
+                setState(Object.assign(Object.assign({}, config), { isValid: true, loading: false, sellerData }));
+                if (enableLogging)
+                    console.log("✅ Public key verified", sellerData);
+            }
+            catch (err) {
+                console.error("❌ Public key verification failed", err);
+                setState(Object.assign(Object.assign({}, config), { isValid: false, loading: false, error: err.message }));
+            }
+        });
+        verifyKey();
     }, [config, enableLogging]);
-    return (<AirXPayContext.Provider value={config}>{children}</AirXPayContext.Provider>);
+    return <AirXPayContext.Provider value={state}>{children}</AirXPayContext.Provider>;
 };
 exports.AirXPayProvider = AirXPayProvider;
-exports.AirXPayProvider.displayName = "AirXPayProvider";
-// Professional hook with clear error messages
+// Hook: strict (throws if provider not found)
 const useAirXPay = () => {
     var _a, _b;
     const context = (0, react_1.useContext)(AirXPayContext);
@@ -117,9 +137,8 @@ const useAirXPay = () => {
             "    </AirXPayProvider>",
             "",
             "  • Verify the provider is not inside a conditional or loop",
-            `  • Component location: ${((_b = (_a = new Error().stack) === null || _a === void 0 ? void 0 : _a.split("\n")[2]) === null || _b === void 0 ? void 0 : _b.trim()) || "unknown"}`,
+            `  • Component location: ${((_b = (_a = new Error().stack) === null || _a === void 0 ? void 0 : _a.split("\n")[2]) === null || _b === void 0 ? void 0 : _b.trim()) || "unknown"}`
         ].join("\n");
-        // Log with styling in development
         if (__DEV__) {
             console.error("%c❌ AirXPay Context Error", "color: #ef4444; font-size: 14px; font-weight: bold;", "\n" + errorMessage);
         }
@@ -128,7 +147,7 @@ const useAirXPay = () => {
     return context;
 };
 exports.useAirXPay = useAirXPay;
-// Helper: Check if config exists without throwing
+// Hook: safe (returns null if missing)
 const useAirXPaySafe = () => {
     try {
         return (0, exports.useAirXPay)();
@@ -138,18 +157,18 @@ const useAirXPaySafe = () => {
     }
 };
 exports.useAirXPaySafe = useAirXPaySafe;
-// Helper: Access specific config value
+// Hook: access specific key
 const useAirXPayConfig = (key) => {
-    const config = (0, exports.useAirXPaySafe)();
-    return config === null || config === void 0 ? void 0 : config[key];
+    const context = (0, exports.useAirXPaySafe)();
+    return context === null || context === void 0 ? void 0 : context[key];
 };
 exports.useAirXPayConfig = useAirXPayConfig;
-// Helper: Check if provider is properly configured
+// Hook: check if provider ready
 const useProviderReady = () => {
-    const config = (0, exports.useAirXPaySafe)();
-    return !!((config === null || config === void 0 ? void 0 : config.baseUrl) && (config === null || config === void 0 ? void 0 : config.publicKey));
+    const context = (0, exports.useAirXPaySafe)();
+    return !!((context === null || context === void 0 ? void 0 : context.baseUrl) && (context === null || context === void 0 ? void 0 : context.publicKey) && context.isValid);
 };
 exports.useProviderReady = useProviderReady;
-// Export context consumer for advanced use cases
+// Consumer for advanced usage
 exports.AirXPayConsumer = AirXPayContext.Consumer;
 exports.default = exports.AirXPayProvider;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@airxpay/sdk-ui",
-  "version": "1.0.2",
+  "version": "1.0.5",
   "description": "AirXPay Initialization UI Components for React & React Native",
   "author": "Tafseel Khan",
   "license": "MIT",
@@ -10,7 +10,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsc --project tsconfig.json --outDir dist && cpx \"src/types/**/*\" dist/types",
+    "build": "tsc --project tsconfig.json --outDir dist && cpx \"src/types/**/*\" dist/types && copyfiles -u 1 src/assets/**/* dist",
     "prepare": "npm run build"
   },
   "peerDependencies": {
@@ -23,6 +23,7 @@
   "devDependencies": {
     "@react-native-community/datetimepicker": "^8.6.0",
     "@types/react": "^19.2.14",
+    "copyfiles": "^2.4.1",
     "cpx": "^1.5.0",
     "expo-image-picker": "^17.0.10",
     "expo-linear-gradient": "^15.0.8",