@airxpay/sdk-ui 1.0.5 → 1.0.7

package/README.md

@@ -35,7 +35,7 @@
 
 ## 🚀 Overview
 
-AirXPay Initialization UI is a production-ready React & React Native component library designed to streamline seller onboarding in multi-tenant SaaS applications. Built with TypeScript and enterprise-grade architecture, it provides a seamless, animated, and validated multi-step flow for collecting seller information.
+AirXPay Initialization UI is a production-ready React & React Native component library designed to streamline merchant onboarding in multi-tenant SaaS applications. Built with TypeScript and enterprise-grade architecture, it provides a seamless, animated, and validated multi-step flow for collecting merchant information.
 
 > **Part of the Flixora Ecosystem** — Integrated with AirXPay for payments, TizzyGo for logistics, TizzyOS for operations, and soon TizzyChat for real-time notifications.
 
@@ -69,29 +69,22 @@ npm install react-native-paper react-native-country-picker-modal @react-native-c
 
 # Or with Yarn
 yarn add react-native-paper react-native-country-picker-modal @react-native-community/datetimepicker expo-image-picker expo-linear-gradient
-```
-
-### Install the Package
-
-```bash
+Install the Package
+bash
 # Install the package from npm
 npm install @airxpay/sdk-ui
 
 # Install package from yarn
 yarn add @airxpay/sdk-ui
-```
-
-### Requirements
-
-- React 18+
-- React Native >= 0.72
-- Expo SDK (optional, for LinearGradient & ImagePicker)
+Requirements
+React 18+
 
----
+React Native >= 0.72
 
-## 🏗️ Architecture
+Expo SDK (optional, for LinearGradient & ImagePicker)
 
-```
+🏗️ Architecture
+text
 @airxpay/sdk-ui/
 ├── components/
 │   ├── steps/
@@ -100,27 +93,21 @@ yarn add @airxpay/sdk-ui
 │   │   ├── BankDetails.tsx
 │   │   └── OnboardingComplete.tsx
 │   └── ui/
-│       └── SellerOnboard/
-│           └── SellerOnboarding.tsx
+│       └── MerchantOnboard/
+│           └── MerchantOnboarding.tsx
 ├── contexts/
 │   └── AirXPayProvider.tsx
 ├── hooks/
-│   └── SellerOnboarding.tsx      # useAirXPaySheet
+│   └── MerchantOnboarding.tsx      # useAirXPaySheet
 ├── api/
-│   └── seller.ts                  # verifyPublicKey
+│   └── merchant.ts                  # verifyPublicKey
 ├── types/
 │   ├── dev.ts                     # __DEV__
 │   └── type.ts                     # AirXPayConfig
 └── index.ts                        # Main exports
-```
-
----
-
-## 🚀 Quick Start
-
-### 1️⃣ Wrap with Provider
-
-```tsx
+🚀 Quick Start
+1️⃣ Wrap with Provider
+tsx
 // Root.tsx
 import React from 'react';
 import { AirXPayProvider } from '@airxpay/sdk-ui';
@@ -130,7 +117,6 @@ export default function Root() {
   return (
     <AirXPayProvider
       config={{
-        baseUrl: 'https://api.airxpay.com',
         publicKey: 'YOUR_PUBLIC_KEY_HERE',
       }}
       enableLogging={__DEV__} // Optional: enables detailed logs in development
@@ -139,19 +125,16 @@ export default function Root() {
     </AirXPayProvider>
   );
 }
-```
-
-### 2️⃣ Implement Onboarding
-
-```tsx
-// SellerOnboardingScreen.tsx
+2️⃣ Implement Onboarding
+tsx
+// MerchantOnboardingScreen.tsx
 import React from 'react';
 import { useAirXPaySheet } from '@airxpay/sdk-ui';
 
-const MySellerOnboarding = () => {
+const MyMerchantOnboarding = () => {
   return (
     <useAirXPaySheet
-      sellerId="seller_12345"
+      merchantId="merchant_12345"
       mode="live"
       isKycCompleted={false}
       isBankDetailsCompleted={false}
@@ -163,51 +146,36 @@ const MySellerOnboarding = () => {
       onBack={(currentStep) => {
         console.log(`Navigated back from step ${currentStep}`);
       }}
-      onComplete={(sellerData) => {
-        console.log('🎉 Onboarding complete!', sellerData);
+      onComplete={(merchantData) => {
+        console.log('🎉 Onboarding complete!', merchantData);
       }}
     />
   );
 };
 
-export default MySellerOnboarding;
-```
-
----
-
-## 📋 Component API
-
-### useAirXPaySheet Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| sellerId | string | ✅ | - | Unique seller identifier |
-| mode | 'live' \| 'test' | ✅ | - | Environment mode |
-| isKycCompleted | boolean | ✅ | - | KYC completion status |
-| isBankDetailsCompleted | boolean | ✅ | - | Bank details status |
-| kycStatus | string | ✅ | - | 'pending' \| 'verified' \| 'rejected' |
-| status | string | ✅ | - | 'pending' \| 'active' \| 'suspended' |
-| initialStep | number | ❌ | 1 | Starting step (1-4) |
-| initialData | Partial\<Seller\> | ❌ | {} | Pre-filled seller data |
-| loading | boolean | ❌ | false | External loading state |
-| onNext | (data: Partial\<Seller\>, step: number) => void | ✅ | - | Step completion callback |
-| onBack | (step: number) => void | ✅ | - | Back navigation callback |
-| onComplete | (data: Seller) => void | ✅ | - | Final completion callback |
-
-### AirXPayProvider Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| config.baseUrl | string | ✅ | - | API base URL (must be valid URL) |
-| config.publicKey | string | ✅ | - | API public key (min 20 chars) |
-| children | ReactNode | ✅ | - | Child components |
-| enableLogging | boolean | ❌ | \_\_DEV\_\_ | Enable/disable console logs |
-
----
-
-## 🎣 Hooks & Utilities
-
-```tsx
+export default MyMerchantOnboarding;
+📋 Component API
+useAirXPaySheet Props
+Prop	Type	Required	Default	Description
+merchantId	string	✅	-	Unique merchant identifier
+mode	'live' | 'test'	✅	-	Environment mode
+isKycCompleted	boolean	✅	-	KYC completion status
+isBankDetailsCompleted	boolean	✅	-	Bank details status
+kycStatus	string	✅	-	'pending' | 'verified' | 'rejected'
+status	string	✅	-	'pending' | 'active' | 'suspended'
+initialStep	number	❌	1	Starting step (1-4)
+initialData	Partial<Merchant>	❌	{}	Pre-filled merchant data
+loading	boolean	❌	false	External loading state
+onNext	(data: Partial<Merchant>, step: number) => void	✅	-	Step completion callback
+onBack	(step: number) => void	✅	-	Back navigation callback
+onComplete	(data: Merchant) => void	✅	-	Final completion callback
+AirXPayProvider Props
+Prop	Type	Required	Default	Description
+config.publicKey	string	✅	-	API public key (min 20 chars)
+children	ReactNode	✅	-	Child components
+enableLogging	boolean	❌	__DEV__	Enable/disable console logs
+🎣 Hooks & Utilities
+tsx
 import { 
   useAirXPay,           // Access config (throws if no provider)
   useAirXPaySafe,       // Safe access (returns null if no provider)
@@ -217,22 +185,17 @@ import {
 } from '@airxpay/sdk-ui';
 
 // Example usage
-const { baseUrl, publicKey } = useAirXPay();
+const { publicKey } = useAirXPay();
 const config = useAirXPaySafe();
 const isReady = useProviderReady();
-const baseUrl = useAirXPayConfig('baseUrl');
-```
-
-### ⚡ Class-based Initialization
-
+⚡ Class-based Initialization
 The package also provides a class-based approach for scenarios where you need to initialize the SDK asynchronously:
 
-```tsx
+tsx
 import { useIsAirXPayReady } from '@airxpay/sdk-ui';
 
 // Initialize with config
 const airxpay = new useIsAirXPayReady({
-  baseUrl: 'https://api.airxpay.com',
   publicKey: 'your_public_key_here'
 });
 
@@ -245,19 +208,13 @@ async function initializeSDK() {
     console.error('Initialization failed:', error);
   }
 }
-```
-
----
+🔧 Configuration Validation
+The AirXPayProvider includes built-in validation that throws clear, actionable errors:
 
-## 🔧 Configuration Validation
-
-The `AirXPayProvider` includes built-in validation that throws clear, actionable errors:
-
-```tsx
+tsx
 // ❌ This will throw a detailed error
 <AirXPayProvider
   config={{
-    baseUrl: 'not-a-url',
     publicKey: 'short'
   }}
 >
@@ -266,17 +223,10 @@ The `AirXPayProvider` includes built-in validation that throws clear, actionable
 
 // Error message:
 // AirXPayProvider Configuration Error:
-//   • baseUrl must be a valid URL
 //   • publicKey appears to be invalid
-```
-
----
-
-## 🎨 Customization
-
-### Styling
-
-```tsx
+🎨 Customization
+Styling
+tsx
 <useAirXPaySheet
   // ... props
   styles={{
@@ -284,11 +234,8 @@ The `AirXPayProvider` includes built-in validation that throws clear, actionable
     stepIndicator: { backgroundColor: '#6200ee' }
   }}
 />
-```
-
-### Theme Support
-
-```tsx
+Theme Support
+tsx
 import { Provider as PaperProvider } from 'react-native-paper';
 
 <PaperProvider theme={yourTheme}>
@@ -296,15 +243,75 @@ import { Provider as PaperProvider } from 'react-native-paper';
     <useAirXPaySheet {...props} />
   </AirXPayProvider>
 </PaperProvider>
-```
+Future Customization Options Hooks and Initialization Like This Structure Will Be Added In Future Updates To Allow More Flexibility And Control Over The Onboarding Flow And SDK Initialization Process. Stay Tuned For More Enhancements!
+text
+import React from "react";
+import {
+  useAirXPaySheet,
+  useAirXPay,
+  useAirXPaySafe,
+  useProviderReady,
+  useAirXPayConfig,
+} from "@airxpay/sdk-ui";
+import { ActivityIndicator, View, Text } from "react-native";
+
+const MerchantOnboardingScreen = () => {
+  const { publicKey } = useAirXPay(); // Throws if provider missing
+  const safeConfig = useAirXPaySafe(); // Returns null if provider missing
+  const isReady = useProviderReady(); // SDK ready check
+  const apiUrl = useAirXPayConfig("publicKey"); // Specific config
+
+  if (!isReady) {
+    return (
+      <View>
+        <ActivityIndicator />
+        <Text>Initializing AirXPay🔗...</Text>
+      </View>
+    );
+  }
 
----
+  if (!publicKey) {
+    return (
+      <View>
+        <Text style={{ color: "red" }}>⚠️ AirXPay configuration missing!</Text>
+      </View>
+    );
+  }
 
-## 🔄 Step Flow
+  if (!safeConfig) {
+    return (
+      <View>
+        <Text style={{ color: "red" }}>⚠️ AirXPay safe config missing!</Text>
+      </View>
+    );
+  }
+
+  const merchantSheet = useAirXPaySheet({
+    merchantId: "merchant_12345",
+    mode: "live",
+    isKycCompleted: false,
+    isBankDetailsCompleted: false,
+    kycStatus: "pending",
+    status: "pending",
+    onNext: (data: any, step: number) => {
+      console.log(`Step ${step} completed`, data);
+    },
+    onBack: (step: number) => {
+      console.log(`Went back from step ${step}`);
+    },
+    onComplete: (finalData: any) => {
+      console.log("🎉 Onboarding Complete:", finalData);
+    },
+  });
+
+  return merchantSheet; // ✅ just return it directly
+};
 
-```
+export default MerchantOnboardingScreen;
+🔄 Step Flow
+text
 Step 1: Basic Details
-├── Seller Name
+├── Merchant Name
 ├── Email Address
 ├── Phone Number
 └── Business Type
@@ -324,17 +331,12 @@ Step 4: Completion
 ├── Success Animation
 ├── Summary View
 └── Next Steps
-```
-
----
-
-## 📝 Exports Reference
-
-```tsx
+📝 Exports Reference
+tsx
 // Main exports from index.ts
 export { useIsAirXPayReady } from "./sdk/airxpay";           // Class for async init
 export { AirXPayProvider, useProviderReady, useAirXPayConfig, useAirXPaySafe, useAirXPay } from "./contexts/AirXPayProvider";
-export { default as useAirXPaySheet } from "./hooks/SellerOnboarding";
+export { default as useAirXPaySheet } from "./hooks/MerchantOnboarding";
 export { __DEV__ } from './types/dev';
 
 // Also available via context
@@ -344,60 +346,45 @@ export {
   useAirXPayConfig,
   AirXPayConsumer 
 } from './contexts/AirXPayProvider';
-```
-
----
-
-## 🧪 Development Utilities
-
-```tsx
+🧪 Development Utilities
+tsx
 import { __DEV__ } from '@airxpay/sdk-ui';
 
 if (__DEV__) {
   console.log('Running in development mode');
 }
-```
+The __DEV__ flag helps you conditionally run code only in development environments.
 
-The `__DEV__` flag helps you conditionally run code only in development environments.
+📈 Performance
+Memoized Components: All step components are memoized
 
----
-
-## 📈 Performance
-
-- **Memoized Components:** All step components are memoized
-- **Optimized Re-renders:** Context splitting prevents unnecessary renders
-- **Lazy Loading:** Steps load on-demand
-- **Development Logging:** Auto-disabled in production via `__DEV__`
-
----
+Optimized Re-renders: Context splitting prevents unnecessary renders
 
-## 🔒 Security
+Lazy Loading: Steps load on-demand
 
-- All API calls require valid publicKey
-- File uploads are validated client-side
-- Sensitive data never stored in logs
-- HTTPS enforced for all requests
-- XSS protection via input sanitization
+Development Logging: Auto-disabled in production via __DEV__
 
----
+🔒 Security
+All API calls require valid publicKey
 
-## 🐛 Troubleshooting
+File uploads are validated client-side
 
-| Issue | Solution |
-|-------|----------|
-| "useAirXPay must be used within AirXPayProvider" | Wrap your component tree with provider |
-| "Public key appears to be invalid" | Check if publicKey is at least 20 chars |
-| "baseUrl must be a valid URL" | Include protocol (https://) in baseUrl |
-| Images not uploading | Check Expo ImagePicker permissions |
-| TypeScript errors | Update to latest version |
+Sensitive data never stored in logs
 
----
+HTTPS enforced for all requests
 
-# 🎣 Available Hooks
+XSS protection via input sanitization
 
-The **@airxpay/sdk-ui** package provides several utility hooks for accessing configuration, managing initialization state, **and safely interacting with the AirXPayProvider.**
+🐛 Troubleshooting
+Issue	Solution
+"useAirXPay must be used within AirXPayProvider"	Wrap your component tree with provider
+"Public key appears to be invalid"	Check if publicKey is at least 20 chars
+Images not uploading	Check Expo ImagePicker permissions
+TypeScript errors	Update to latest version
+🎣 Available Hooks
+The @airxpay/sdk-ui package provides several utility hooks for accessing configuration, managing initialization state, and safely interacting with the AirXPayProvider.
 
-```
+text
 import { 
   useAirXPay, 
   useAirXPaySafe, 
@@ -406,12 +393,10 @@ import {
 } from '@airxpay/sdk-ui';
 
 1️⃣ useAirXPay()
-const { baseUrl, publicKey } = useAirXPay();
-```
-
-**Provides direct access to the full AirXPay configuration.**
+const { publicKey } = useAirXPay();
+Provides direct access to the full AirXPay configuration.
 
-**Behavior**
+Behavior
 
 Must be used inside AirXPayProvider.
 
@@ -421,22 +406,19 @@ Ensures strict enforcement of provider usage.
 
 When to Use
 
-Use this hook when you require guaranteed access to configuration values such as baseUrl or publicKey for:
+Use this hook when you require guaranteed access to configuration values such as publicKey for:
 
 API requests
 
 Dynamic endpoint handling
 
-**Advanced integrations**
-
-# Recommended for: Production components where the provider is always present.
+Advanced integrations
 
-```
+Recommended for: Production components where the provider is always present.
+text
 2️⃣ useAirXPaySafe()
 const safeConfig = useAirXPaySafe();
-```
-
-A safe alternative to ```useAirXPay().```
+A safe alternative to useAirXPay().
 
 Behavior
 
@@ -454,11 +436,9 @@ Shared UI components that may or may not be wrapped in the provider
 
 Recommended for: Flexible usage scenarios where provider presence is not guaranteed.
 
-```
+text
 3️⃣ useProviderReady()
 const isReady = useProviderReady();
-```
-
 Checks whether the SDK has been fully initialized.
 
 Behavior
@@ -477,16 +457,14 @@ Delaying onboarding UI until SDK is ready
 
 Recommended for: Applications using async initialization or class-based setup.
 
-```
+text
 4️⃣ useAirXPayConfig(key)
-const apiUrl = useAirXPayConfig('baseUrl');
-```
-
+const publicKey = useAirXPayConfig('publicKey');
 Retrieves a specific configuration value from the provider.
 
 Behavior
 
-Accepts a configuration key ```(e.g., 'baseUrl', 'publicKey').```
+Accepts a configuration key (e.g.,'publicKey').
 
 Returns only the requested value.
 
@@ -500,55 +478,47 @@ Cleaner and more focused component logic
 
 Recommended for: Minimal, targeted configuration access.
 
-```📌 Hook Comparison```
-**Hook	Throws Error	Safe Fallback	Primary Purpose**
+📌 Hook Comparison
+Hook Throws Error Safe Fallback Primary Purpose
 
-```
+text
 useAirXPay	✅ Yes	❌ No	Direct access to full configuration
 useAirXPaySafe	❌ No	✅ Yes	Optional/safe configuration access
 useProviderReady	❌ No	✅ Yes	Initialization state check
 useAirXPayConfig	❌ No	✅ Yes	Access a single configuration value
-```
+📝 Changelog
+v1.0.5 (Latest)
+Added class-based useIsAirXPayReady for async initialization
 
+Enhanced error messages with stack traces
 
----
+Added __DEV__ flag for environment detection
 
-## 📝 Changelog
+Improved TypeScript types
 
-### v1.0.5 (Latest)
-- Added class-based `useIsAirXPayReady` for async initialization
-- Enhanced error messages with stack traces
-- Added `__DEV__` flag for environment detection
-- Improved TypeScript types
-- Added `enableLogging` prop to provider
+Added enableLogging prop to provider
 
-### v1.0.3
-- Initial release
-- Basic step flow
-- KYC document upload
-- Bank details validation
+v1.0.3
+Initial release
 
----
+Basic step flow
 
-## 🤝 Contributing
+KYC document upload
 
-1. Fork the repository
-2. Create feature branch (`git checkout -b feature/amazing`)
-3. Commit changes (`git commit -m 'Add amazing feature'`)
-4. Push to branch (`git push origin feature/amazing`)
-5. Open a Pull Request
+Bank details validation
 
----
+🤝 Contributing
+Fork the repository
 
-## 📄 License
+Create feature branch (git checkout -b feature/amazing)
 
-MIT License © 2026 Flixora Technologies
+Commit changes (git commit -m 'Add amazing feature')
 
----
+Push to branch (git push origin feature/amazing)
 
-<div align="center">
-  <h3>Built with ❤️ by the Flixora Ecosystem</h3>
-  <p><strong>Your Smile, Our Simplicity 😊</strong></p>
-  <p><sub>Version 1.0.5 | Part of AirXPay, TizzyGo, TizzyOS, and TizzyChat</sub></p>
-  <p><i>We upgraded from v1.0.3 to v1.0.5 to maintain version consistency across our ecosystem. Thanks for your understanding!</i></p>
-</div>
+Open a Pull Request
+
+📄 License
+MIT License © 2026 Flixora Technologies
+
+<div align="center"> <h3>Built with ❤️ by the Flixora Ecosystem</h3> <p><strong>Your Smile, Our Simplicity 😊</strong></p> <p><sub>Version 1.0.5 | Part of AirXPay, TizzyGo, TizzyOS, and TizzyChat</sub></p> <p><i>We upgraded from v1.0.3 to v1.0.5 to maintain version consistency across our ecosystem. Thanks for your understanding!</i></p> </div> ```

package/dist/api/client.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Frontend SDK - API Client
+ * Axios instance with interceptors for token management and refresh
+ */
+import { AxiosInstance } from 'axios';
+export declare const createApiClient: (publicKey: string) => AxiosInstance;