@airxpay/sdk-ui 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Tafseel Khan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,400 @@
+# 📘 AirXPay Initialization UI Components
+
+<div align="center">
+  <img src="./assets/images/flixora.png" alt="AirXPay Flixora SDK" width="100"/>
+</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.
+
+> **Part of the Flixora Ecosystem** — Integrated with AirXPay for payments, TizzyGo for logistics, TizzyOS for operations, and soon TizzyChat for real-time notifications.
+
+---
+
+## ✨ Key Features
+
+| Feature | Description |
+|---------|-------------|
+| ✅ **Multi-step Flow** | Basic Details → KYC → Bank Details → Completion |
+| 🎨 **Animated Transitions** | Smooth step transitions with progress tracking |
+| 🔒 **Built-in Validation** | Form validation for each step |
+| 📸 **Document Upload** | Integrated with Expo ImagePicker for KYC documents |
+| 🏦 **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 |
+| 📱 **Cross-platform** | Works with React Native, Expo, and Web |
+
+---
+
+## 📦 Installation
+
+### Prerequisites
+
+Ensure you're in your React Native/Expo project:
+
+```bash
+# Required peer dependencies
+npm install react-native-paper react-native-country-picker-modal @react-native-community/datetimepicker expo-image-picker expo-linear-gradient
+
+# 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
+# For local development
+npm install --save path/to/airxpay-initialization-ui
+
+# Or from npm (when published)
+npm install airxpay-initialization-ui
+```
+
+### Requirements
+
+- React 18+
+- React Native >= 0.72
+- Expo SDK (optional, for LinearGradient & ImagePicker)
+
+---
+
+## 🏗️ Architecture
+
+```
+airxpay-initialization-ui/
+├── components/
+│   ├── steps/
+│   │   ├── BasicDetailsForm.tsx
+│   │   ├── KYCVerification.tsx
+│   │   ├── BankDetails.tsx
+│   │   └── OnboardingComplete.tsx
+│   └── SellerOnboardingSheet.tsx
+├── contexts/
+│   └── AirXPayProvider.tsx
+├── api/
+│   └── seller.ts
+├── hooks/
+│   ├── useAirXPay.ts
+│   ├── useAirXPaySafe.ts
+│   └── useIsAirXPayReady.ts
+└── index.ts
+```
+
+---
+
+<div align="center">
+  <img src="./assets/images/airxpay.png" alt="AirXPay Flixora SDK" width="100"/>
+</div>
+
+## 🚀 Quick Start
+
+### 1️⃣ Wrap with Provider
+
+```tsx
+// Root.tsx
+import React from 'react';
+import { AirXPayProvider } from 'airxpay-initialization-ui';
+import App from './App';
+
+export default function Root() {
+  return (
+    <AirXPayProvider
+      config={{
+        baseUrl: 'https://api.airxpay.com',
+        publicKey: 'YOUR_PUBLIC_KEY_HERE',
+      }}
+    >
+      <App />
+    </AirXPayProvider>
+  );
+}
+```
+
+### 2️⃣ Implement Onboarding
+
+```tsx
+// SellerOnboardingScreen.tsx
+import React from 'react';
+import { SellerOnboardingSheet } from 'airxpay-initialization-ui';
+
+const MySellerOnboarding = () => {
+  return (
+    <SellerOnboardingSheet
+      sellerId="seller_12345"
+      mode="live"
+      isKycCompleted={false}
+      isBankDetailsCompleted={false}
+      kycStatus="pending"
+      status="pending"
+      onNext={(stepData, currentStep) => {
+        console.log(`Step ${currentStep} completed:`, stepData);
+      }}
+      onBack={(currentStep) => {
+        console.log(`Navigated back from step ${currentStep}`);
+      }}
+      onComplete={(sellerData) => {
+        console.log('🎉 Onboarding complete!', sellerData);
+      }}
+    />
+  );
+};
+
+export default MySellerOnboarding;
+```
+
+---
+
+## 📋 Component API
+
+### SellerOnboardingSheet 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 | Description |
+|------|------|----------|-------------|
+| config.baseUrl | string | ✅ | API base URL |
+| config.publicKey | string | ✅ | API public key |
+| children | ReactNode | ✅ | Child components |
+
+---
+
+## 🎣 Hooks
+
+```tsx
+import { 
+  useAirXPay, 
+  useAirXPaySafe, 
+  useIsAirXPayReady,
+  useAirXPayConfig 
+} from 'airxpay-initialization-ui';
+
+// Access config (throws if no provider)
+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');
+```
+
+---
+
+## 🎨 Customization
+
+### Styling
+
+```tsx
+// Override default styles
+<SellerOnboardingSheet
+  // ... props
+  styles={{
+    container: { backgroundColor: '#f5f5f5' },
+    stepIndicator: { backgroundColor: '#6200ee' }
+  }}
+/>
+```
+
+### 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} />
+  </AirXPayProvider>
+</PaperProvider>
+```
+
+---
+
+## 🔄 Step Flow
+
+```
+Step 1: Basic Details
+├── Seller Name
+├── Email Address
+├── Phone Number
+└── Business Type
+
+Step 2: KYC Verification
+├── Document Upload (PAN/Aadhar)
+├── Selfie Verification
+└── Address Proof
+
+Step 3: Bank Details
+├── Account Number
+├── IFSC Code
+├── Account Holder Name
+└── Bank Branch
+
+Step 4: Completion
+├── Success Animation
+├── Summary View
+└── Next Steps
+```
+
+---
+
+## ⚡ Advanced Usage
+
+### Custom Step Implementation
+
+```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;
+    }
+  }}
+/>
+```
+
+---
+
+## 🧪 Testing
+
+```bash
+# Run tests
+npm test
+
+# Run with coverage
+npm test -- --coverage
+
+# Lint code
+npm run lint
+
+# Type check
+npm run type-check
+```
+
+---
+
+## 📈 Performance
+
+- **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
+
+---
+
+## 🔒 Security
+
+- 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
+
+---
+
+## 🐛 Troubleshooting
+
+| Issue | Solution |
+|-------|----------|
+| Provider not found | Wrap components in `<AirXPayProvider>` |
+| 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
+- Improved TypeScript types
+- Added Expo SDK 50+ compatibility
+- Enhanced error handling
+
+### v1.0.3
+- Initial release
+- Basic step flow
+- KYC document upload
+- Bank details validation
+
+---
+
+## 🤝 Contributing
+
+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
+
+---
+
+## 📄 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/seller.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.verifyPublicKey = void 0;
+const verifyPublicKey = async (baseUrl, publicKey) => {
+    const response = await fetch(`${baseUrl}/api/verify-public-key`, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ publicKey }),
+    });
+    if (!response.ok) {
+        throw new Error("Invalid public key or server error");
+    }
+    return await response.json();
+};
+exports.verifyPublicKey = verifyPublicKey;

package/dist/components/common/CountryDropdown.js

@@ -0,0 +1,138 @@
+"use strict";
+// components/common/CountryDropdown.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 react_native_country_picker_modal_1 = __importDefault(require("react-native-country-picker-modal"));
+const CountryDropdown = ({ value, onChange, withFlag = true, withCallingCode = false, withCountryNameButton = true, withAlphaFilter = true, withFilter = true, placeholder = 'Select country', label = 'Country', error, disabled = false, }) => {
+    const [modalVisible, setModalVisible] = (0, react_1.useState)(false);
+    const [selectedCountry, setSelectedCountry] = (0, react_1.useState)();
+    const onSelect = (country) => {
+        setSelectedCountry(country);
+        onChange(country.name, country.cca2);
+        setModalVisible(false);
+    };
+    const getDisplayValue = () => {
+        if (!value) {
+            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}/>)}
+        <react_native_1.Text style={styles.selectedCountryName} numberOfLines={1}>
+          {value}
+        </react_native_1.Text>
+      </react_native_1.View>);
+    };
+    return (<react_native_1.View style={styles.container}>
+      {label ? <react_native_1.Text style={styles.label}>{label}</react_native_1.Text> : null}
+      
+      <react_native_1.TouchableOpacity style={[
+            styles.dropdown,
+            error && styles.dropdownError,
+            disabled && styles.dropdownDisabled,
+        ]} onPress={() => !disabled && setModalVisible(true)} activeOpacity={disabled ? 1 : 0.7} disabled={disabled}>
+        {getDisplayValue()}
+        
+        <react_native_paper_1.IconButton icon="chevron-down" size={20} iconColor={disabled ? "#9CA3AF" : "#6B7280"}/>
+      </react_native_1.TouchableOpacity>
+
+      {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={{
+            animationType: 'slide',
+            presentationStyle: react_native_1.Platform.OS === 'ios' ? 'pageSheet' : 'overFullScreen',
+        }}/>
+    </react_native_1.View>);
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        width: '100%',
+    },
+    label: {
+        fontSize: 13,
+        fontWeight: '500',
+        color: '#374151',
+        marginBottom: 6,
+    },
+    dropdown: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        borderWidth: 1,
+        borderColor: '#E5E7EB',
+        borderRadius: 8,
+        paddingHorizontal: 12,
+        backgroundColor: '#FFFFFF',
+        minHeight: 48,
+    },
+    dropdownError: {
+        borderColor: '#EF4444',
+        borderWidth: 1.5,
+    },
+    dropdownDisabled: {
+        backgroundColor: '#F3F4F6',
+        borderColor: '#E5E7EB',
+    },
+    selectedCountry: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    selectedCountryName: {
+        fontSize: 14,
+        color: '#111827',
+        marginLeft: 8,
+        flex: 1,
+    },
+    placeholder: {
+        fontSize: 14,
+        color: '#9CA3AF',
+        flex: 1,
+    },
+    hiddenPicker: {
+        display: 'none',
+    },
+    errorText: {
+        fontSize: 11,
+        color: '#EF4444',
+        marginTop: 4,
+    },
+});
+exports.default = CountryDropdown;