@airxpay/sdk-ui 1.0.0 → 1.0.1

package/README.md

@@ -1,9 +1,38 @@
 # 📘 AirXPay Initialization UI Components
 
+<a href="#-typescript">
+  <img src="https://img.shields.io/badge/TypeScript-5.0+-blue?style=for-the-badge&logo=typescript" alt="TypeScript" />
+</a>
+<a href="#-react">
+  <img src="https://img.shields.io/badge/React-18.0+-61DAFB?style=for-the-badge&logo=react" alt="React" />
+</a>
+<a href="#-react-native">
+  <img src="https://img.shields.io/badge/React_Native-0.72+-61DAFB?style=for-the-badge&logo=react" alt="React Native" />
+</a>
+<a href="#-expo">
+  <img src="https://img.shields.io/badge/Expo-50+-000020?style=for-the-badge&logo=expo" alt="Expo" />
+</a>
+<a href="#-nextjs">
+  <img src="https://img.shields.io/badge/Next.js-14.0+-000000?style=for-the-badge&logo=next.js" alt="Next.js" />
+</a>
+<a href="#-javascript">
+  <img src="https://img.shields.io/badge/JavaScript-ES6+-F7DF1E?style=for-the-badge&logo=javascript" alt="JavaScript" />
+</a>
+<a href="#-typescript">
+  <img src="https://img.shields.io/badge/TypeScript-5.0+-3178C6?style=for-the-badge&logo=typescript" alt="TypeScript" />
+</a>
+<a href="#-mit-license">
+  <img src="https://img.shields.io/badge/License-MIT-yellow?style=for-the-badge&logo=open-source-initiative" alt="MIT License" />
+</a>
+
+---
+
 <div align="center">
-  <img src="./assets/images/flixora.png" alt="AirXPay Flixora SDK" width="100"/>
+  <img src="./assets/images/airxpay.png" alt="AirXPay Flixora SDK" width="120"/>
 </div>
 
+---
+
 ## 🚀 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.
@@ -23,7 +52,7 @@ AirXPay Initialization UI is a production-ready React & React Native component l
 | 🏦 **Bank Verification** | Country-specific bank details collection |
 | 📊 **Progress Tracking** | Visual progress indicator with step status |
 | 🔧 **Configurable** | Customizable via AirXPayProvider |
-| 📘 **TypeScript** | Fully typed components and hooks |
+| 📘 **TypeScript** | Fully typed components, hooks, and classes |
 | 📱 **Cross-platform** | Works with React Native, Expo, and Web |
 
 ---
@@ -45,11 +74,11 @@ yarn add react-native-paper react-native-country-picker-modal @react-native-comm
 ### Install the Package
 
 ```bash
-# For local development
-npm install --save path/to/airxpay-initialization-ui
+# Install the package from npm
+npm install @airxpay/sdk-ui
 
-# Or from npm (when published)
-npm install airxpay-initialization-ui
+# Install package from yarn
+yarn add @airxpay/sdk-ui
 ```
 
 ### Requirements
@@ -63,31 +92,30 @@ npm install airxpay-initialization-ui
 ## 🏗️ Architecture
 
 ```
-airxpay-initialization-ui/
+@airxpay/sdk-ui/
 ├── components/
 │   ├── steps/
 │   │   ├── BasicDetailsForm.tsx
 │   │   ├── KYCVerification.tsx
 │   │   ├── BankDetails.tsx
 │   │   └── OnboardingComplete.tsx
-│   └── SellerOnboardingSheet.tsx
+│   └── ui/
+│       └── SellerOnboard/
+│           └── SellerOnboarding.tsx
 ├── contexts/
 │   └── AirXPayProvider.tsx
-├── api/
-│   └── seller.ts
 ├── hooks/
-│   ├── useAirXPay.ts
-│   ├── useAirXPaySafe.ts
-│   └── useIsAirXPayReady.ts
-└── index.ts
+│   └── SellerOnboarding.tsx      # useAirXPaySheet
+├── api/
+│   └── seller.ts                  # verifyPublicKey
+├── types/
+│   ├── dev.ts                     # __DEV__
+│   └── type.ts                     # AirXPayConfig
+└── index.ts                        # Main exports
 ```
 
 ---
 
-<div align="center">
-  <img src="./assets/images/airxpay.png" alt="AirXPay Flixora SDK" width="100"/>
-</div>
-
 ## 🚀 Quick Start
 
 ### 1️⃣ Wrap with Provider
@@ -95,7 +123,7 @@ airxpay-initialization-ui/
 ```tsx
 // Root.tsx
 import React from 'react';
-import { AirXPayProvider } from 'airxpay-initialization-ui';
+import { AirXPayProvider } from '@airxpay/sdk-ui';
 import App from './App';
 
 export default function Root() {
@@ -105,6 +133,7 @@ export default function Root() {
         baseUrl: 'https://api.airxpay.com',
         publicKey: 'YOUR_PUBLIC_KEY_HERE',
       }}
+      enableLogging={__DEV__} // Optional: enables detailed logs in development
     >
       <App />
     </AirXPayProvider>
@@ -117,11 +146,11 @@ export default function Root() {
 ```tsx
 // SellerOnboardingScreen.tsx
 import React from 'react';
-import { SellerOnboardingSheet } from 'airxpay-initialization-ui';
+import { useAirXPaySheet } from '@airxpay/sdk-ui';
 
 const MySellerOnboarding = () => {
   return (
-    <SellerOnboardingSheet
+    <useAirXPaySheet
       sellerId="seller_12345"
       mode="live"
       isKycCompleted={false}
@@ -148,7 +177,7 @@ export default MySellerOnboarding;
 
 ## 📋 Component API
 
-### SellerOnboardingSheet Props
+### useAirXPaySheet Props
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
@@ -167,37 +196,80 @@ export default MySellerOnboarding;
 
 ### AirXPayProvider Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| config.baseUrl | string | ✅ | API base URL |
-| config.publicKey | string | ✅ | API public key |
-| children | ReactNode | ✅ | Child components |
+| 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
+## 🎣 Hooks & Utilities
 
 ```tsx
 import { 
-  useAirXPay, 
-  useAirXPaySafe, 
-  useIsAirXPayReady,
-  useAirXPayConfig 
-} from 'airxpay-initialization-ui';
-
-// Access config (throws if no provider)
+  useAirXPay,           // Access config (throws if no provider)
+  useAirXPaySafe,       // Safe access (returns null if no provider)
+  useIsAirXPayReady,    // Hook: checks if provider is ready
+  useAirXPayConfig,     // Access specific config value
+  AirXPayConsumer       // Context consumer for advanced use
+} from '@airxpay/sdk-ui';
+
+// Example usage
 const { baseUrl, publicKey } = useAirXPay();
-
-// Safe access (returns null if no provider)
 const config = useAirXPaySafe();
-
-// Check if provider is ready
 const isReady = useIsAirXPayReady();
-
-// Access specific config value
 const baseUrl = useAirXPayConfig('baseUrl');
 ```
 
+### ⚡ Class-based Initialization
+
+The package also provides a class-based approach for scenarios where you need to initialize the SDK asynchronously:
+
+```tsx
+import { useIsAirXPayReady } from '@airxpay/sdk-ui';
+
+// Initialize with config
+const airxpay = new useIsAirXPayReady({
+  baseUrl: 'https://api.airxpay.com',
+  publicKey: 'your_public_key_here'
+});
+
+// Verify credentials asynchronously
+async function initializeSDK() {
+  try {
+    const result = await airxpay.initialize();
+    console.log('SDK initialized successfully:', result);
+  } catch (error) {
+    console.error('Initialization failed:', error);
+  }
+}
+```
+
+---
+
+## 🔧 Configuration Validation
+
+The `AirXPayProvider` includes built-in validation that throws clear, actionable errors:
+
+```tsx
+// ❌ This will throw a detailed error
+<AirXPayProvider
+  config={{
+    baseUrl: 'not-a-url',
+    publicKey: 'short'
+  }}
+>
+  <App />
+</AirXPayProvider>
+
+// Error message:
+// AirXPayProvider Configuration Error:
+//   • baseUrl must be a valid URL
+//   • publicKey appears to be invalid
+```
+
 ---
 
 ## 🎨 Customization
@@ -205,8 +277,7 @@ const baseUrl = useAirXPayConfig('baseUrl');
 ### Styling
 
 ```tsx
-// Override default styles
-<SellerOnboardingSheet
+<useAirXPaySheet
   // ... props
   styles={{
     container: { backgroundColor: '#f5f5f5' },
@@ -215,27 +286,14 @@ const baseUrl = useAirXPayConfig('baseUrl');
 />
 ```
 
-### Icons & Branding
-
-```tsx
-// Custom logo
-<SellerOnboardingSheet
-  // ... props
-  logo={require('./assets/custom-logo.png')}
-/>
-
-// Custom step icons via STEPS array modification
-```
-
 ### Theme Support
 
 ```tsx
-// Using with React Native Paper
 import { Provider as PaperProvider } from 'react-native-paper';
 
 <PaperProvider theme={yourTheme}>
   <AirXPayProvider config={config}>
-    <SellerOnboardingSheet {...props} />
+    <useAirXPaySheet {...props} />
   </AirXPayProvider>
 </PaperProvider>
 ```
@@ -270,62 +328,38 @@ Step 4: Completion
 
 ---
 
-## ⚡ Advanced Usage
-
-### Custom Step Implementation
+## 📝 Exports Reference
 
 ```tsx
-import { useStepContext } from 'airxpay-initialization-ui';
-
-const CustomStep = () => {
-  const { stepData, updateStepData, goToNextStep } = useStepContext();
-  
-  const handleSubmit = () => {
-    updateStepData({ customField: 'value' });
-    goToNextStep();
-  };
-  
-  return (
-    // Your custom UI
-  );
-};
-```
-
-### Error Handling
-
-```tsx
-<SellerOnboardingSheet
-  onError={(error, step) => {
-    switch(error.code) {
-      case 'KYC_FAILED':
-        showNotification('KYC verification failed');
-        break;
-      case 'BANK_INVALID':
-        showNotification('Invalid bank details');
-        break;
-    }
-  }}
-/>
+// Main exports from index.ts
+export { useIsAirXPayReady } from "./sdk/airxpay";           // Class for async init
+export { AirXPayProvider } from "./contexts/AirXPayProvider";
+export { default as useAirXPaySheet } from "./hooks/SellerOnboarding";
+export { __DEV__ } from './types/dev';
+
+// Also available via context
+export { 
+  useAirXPay,
+  useAirXPaySafe,
+  useAirXPayConfig,
+  AirXPayConsumer 
+} from './contexts/AirXPayProvider';
 ```
 
 ---
 
-## 🧪 Testing
+## 🧪 Development Utilities
 
-```bash
-# Run tests
-npm test
-
-# Run with coverage
-npm test -- --coverage
-
-# Lint code
-npm run lint
+```tsx
+import { __DEV__ } from '@airxpay/sdk-ui';
 
-# Type check
-npm run type-check
+if (__DEV__) {
+  console.log('Running in development mode');
+}
 ```
 
+The `__DEV__` flag helps you conditionally run code only in development environments.
+
 ---
 
 ## 📈 Performance
@@ -333,7 +367,7 @@ npm run type-check
 - **Memoized Components:** All step components are memoized
 - **Optimized Re-renders:** Context splitting prevents unnecessary renders
 - **Lazy Loading:** Steps load on-demand
-- **Animation Optimizations:** Native driver for smooth 60fps transitions
+- **Development Logging:** Auto-disabled in production via `__DEV__`
 
 ---
 
@@ -351,22 +385,22 @@ npm run type-check
 
 | Issue | Solution |
 |-------|----------|
-| Provider not found | Wrap components in `<AirXPayProvider>` |
+| "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 |
-| Animation lag | Enable useNativeDriver in config |
 | TypeScript errors | Update to latest version |
-| Bank validation fails | Check country code format |
 
 ---
 
 ## 📝 Changelog
 
 ### v1.0.5 (Latest)
-- Added React 18 support
-- Fixed animation performance issues
+- Added class-based `useIsAirXPayReady` for async initialization
+- Enhanced error messages with stack traces
+- Added `__DEV__` flag for environment detection
 - Improved TypeScript types
-- Added Expo SDK 50+ compatibility
-- Enhanced error handling
+- Added `enableLogging` prop to provider
 
 ### v1.0.3
 - Initial release
@@ -397,4 +431,4 @@ MIT License © 2026 Flixora Technologies
   <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>
+</div>

package/dist/api/seller.d.ts

@@ -0,0 +1,9 @@
+export interface SellerInitResponse {
+    mode: "live" | "test";
+    userId: string;
+    isKycCompleted: boolean;
+    isBankDetailsCompleted: boolean;
+    kycStatus: string;
+    status: string;
+}
+export declare const verifyPublicKey: (baseUrl: string, publicKey: string) => Promise<SellerInitResponse>;

package/dist/api/seller.js

@@ -1,8 +1,17 @@
 "use strict";
+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.verifyPublicKey = void 0;
-const verifyPublicKey = async (baseUrl, publicKey) => {
-    const response = await fetch(`${baseUrl}/api/verify-public-key`, {
+const verifyPublicKey = (baseUrl, publicKey) => __awaiter(void 0, void 0, void 0, function* () {
+    const response = yield fetch(`${baseUrl}/api/verify-public-key`, {
         method: "POST",
         headers: {
             "Content-Type": "application/json",
@@ -12,6 +21,6 @@ const verifyPublicKey = async (baseUrl, publicKey) => {
     if (!response.ok) {
         throw new Error("Invalid public key or server error");
     }
-    return await response.json();
-};
+    return yield response.json();
+});
 exports.verifyPublicKey = verifyPublicKey;

package/dist/components/common/CountryDropdown.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { CountryCode } from 'react-native-country-picker-modal';
+interface CountryDropdownProps {
+    value: string;
+    onChange: (country: string, countryCode?: CountryCode) => void;
+    withFlag?: boolean;
+    withCallingCode?: boolean;
+    withCountryNameButton?: boolean;
+    withAlphaFilter?: boolean;
+    withFilter?: boolean;
+    placeholder?: string;
+    label?: string;
+    error?: string;
+    disabled?: boolean;
+}
+declare const CountryDropdown: React.FC<CountryDropdownProps>;
+export default CountryDropdown;

package/dist/components/common/CountryDropdown.js

@@ -54,7 +54,7 @@ const CountryDropdown = ({ value, onChange, withFlag = true, withCallingCode = f
             return <react_native_1.Text style={styles.placeholder}>{placeholder}</react_native_1.Text>;
         }
         return (<react_native_1.View style={styles.selectedCountry}>
-        {selectedCountry?.cca2 && withFlag && (<react_native_country_picker_modal_1.default countryCode={selectedCountry.cca2} withFlag={true} withCountryNameButton={false} withCallingCode={false} withFilter={false} withAlphaFilter={false} visible={false}/>)}
+        {(selectedCountry === null || selectedCountry === void 0 ? void 0 : selectedCountry.cca2) && withFlag && (<react_native_country_picker_modal_1.default countryCode={selectedCountry.cca2} withFlag={true} withCountryNameButton={false} withCallingCode={false} withFilter={false} withAlphaFilter={false} visible={false}/>)}
         <react_native_1.Text style={styles.selectedCountryName} numberOfLines={1}>
           {value}
         </react_native_1.Text>
@@ -75,7 +75,7 @@ const CountryDropdown = ({ value, onChange, withFlag = true, withCallingCode = f
 
       {error ? <react_native_1.Text style={styles.errorText}>{error}</react_native_1.Text> : null}
 
-      <react_native_country_picker_modal_1.default countryCode={(selectedCountry?.cca2 || 'US')} withFlag={withFlag} withCallingCode={withCallingCode} withCountryNameButton={withCountryNameButton} withAlphaFilter={withAlphaFilter} withFilter={withFilter} withEmoji={true} withModal={true} visible={modalVisible} onSelect={onSelect} onClose={() => setModalVisible(false)} containerButtonStyle={styles.hiddenPicker} preferredCountries={['IN', 'US', 'GB', 'CA', 'AU', 'SG', 'AE']} modalProps={{
+      <react_native_country_picker_modal_1.default countryCode={((selectedCountry === null || selectedCountry === void 0 ? void 0 : selectedCountry.cca2) || 'US')} withFlag={withFlag} withCallingCode={withCallingCode} withCountryNameButton={withCountryNameButton} withAlphaFilter={withAlphaFilter} withFilter={withFilter} withEmoji={true} withModal={true} visible={modalVisible} onSelect={onSelect} onClose={() => setModalVisible(false)} containerButtonStyle={styles.hiddenPicker} preferredCountries={['IN', 'US', 'GB', 'CA', 'AU', 'SG', 'AE']} modalProps={{
             animationType: 'slide',
             presentationStyle: react_native_1.Platform.OS === 'ios' ? 'pageSheet' : 'overFullScreen',
         }}/>

package/dist/components/common/FileUploader.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Mode } from '../../types/sellertypes';
+interface FileUploaderProps {
+    label: string;
+    required?: boolean;
+    description?: string;
+    icon?: string;
+    value?: string;
+    onUpload: (file: any) => void;
+    onRemove: () => void;
+    uploading?: boolean;
+    mode?: Mode;
+    accept?: string;
+}
+declare const FileUploader: React.FC<FileUploaderProps>;
+export default FileUploader;

package/dist/components/common/FileUploader.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 };
 };
@@ -42,14 +51,14 @@ 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 () => {
+    const pickImage = () => __awaiter(void 0, void 0, void 0, function* () {
         try {
-            const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
+            const { status } = yield ImagePicker.requestMediaLibraryPermissionsAsync();
             if (status !== 'granted') {
                 react_native_1.Alert.alert('Permission needed', 'Please grant camera roll permissions');
                 return;
             }
-            const result = await ImagePicker.launchImageLibraryAsync({
+            const result = yield ImagePicker.launchImageLibraryAsync({
                 mediaTypes: ImagePicker.MediaTypeOptions.Images,
                 allowsEditing: true,
                 aspect: [4, 3],
@@ -62,15 +71,15 @@ const FileUploader = ({ label, required = false, description, value, onUpload, o
         catch (error) {
             react_native_1.Alert.alert('Error', 'Failed to pick image');
         }
-    };
-    const takePhoto = async () => {
+    });
+    const takePhoto = () => __awaiter(void 0, void 0, void 0, function* () {
         try {
-            const { status } = await ImagePicker.requestCameraPermissionsAsync();
+            const { status } = yield ImagePicker.requestCameraPermissionsAsync();
             if (status !== 'granted') {
                 react_native_1.Alert.alert('Permission needed', 'Please grant camera permissions');
                 return;
             }
-            const result = await ImagePicker.launchCameraAsync({
+            const result = yield ImagePicker.launchCameraAsync({
                 allowsEditing: true,
                 aspect: [4, 3],
                 quality: 0.8,
@@ -82,7 +91,7 @@ const FileUploader = ({ label, required = false, description, value, onUpload, o
         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 },

package/dist/components/common/StepIndicator.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { StepConfig, Mode } from '../../types/sellertypes';
+interface StepIndicatorProps {
+    currentStep: number;
+    steps: StepConfig[];
+    mode: Mode;
+    isKycCompleted: boolean;
+    isBankDetailsCompleted: boolean;
+}
+declare const StepIndicator: React.FC<StepIndicatorProps>;
+export default StepIndicator;

package/dist/components/steps/BankDetails.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Seller, Mode } from '../../types/sellertypes';
+interface BankDetailsProps {
+    initialData: Partial<Seller>;
+    mode: Mode;
+    onNext: (data: Partial<Seller>) => void;
+    onBack: () => void;
+}
+declare const BankDetails: React.FC<BankDetailsProps>;
+export default BankDetails;