@oxyhq/services 5.11.9 → 5.11.11

package/src/ui/components/OxyPayButton.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { TouchableOpacity, Text, View, StyleSheet, type ViewStyle, type TextStyle, type StyleProp, type LayoutChangeEvent } from 'react-native';
 import { fontFamilies } from '../styles/fonts';
 import { useOxy } from '../context/OxyContext';
-import type { PaymentItem } from '../screens/PaymentGatewayScreen';
+import type { PaymentItem, PaymentGatewayResult } from '../screens/PaymentGatewayScreen';
 import OxyLogo from './OxyLogo';
 
 export interface OxyPayButtonProps {
@@ -15,7 +15,7 @@ export interface OxyPayButtonProps {
     currency?: string;
     paymentItems?: PaymentItem[];
     description?: string;
-    onPaymentResult?: (result: any) => void;
+    onPaymentResult?: (result: PaymentGatewayResult) => void;
     /**
      * Button background color. If not provided, uses variant ('white' or 'black').
      */

package/src/ui/components/OxyProvider.tsx

@@ -1,6 +1,6 @@
 import type React from 'react';
 import { useCallback, useRef, useState, useEffect, useMemo } from 'react';
-import { View, Text, StyleSheet, Dimensions, Platform, Animated, StatusBar, Keyboard, KeyboardEvent } from 'react-native';
+import { View, Text, StyleSheet, Dimensions, Platform, Animated, StatusBar, Keyboard, KeyboardEvent, AppState } from 'react-native';
 import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import type { OxyProviderProps } from '../navigation/types';
@@ -8,6 +8,7 @@ import { OxyContextProvider, useOxy } from '../context/OxyContext';
 import OxyRouter from '../navigation/OxyRouter';
 import { FontLoader, setupFonts } from './FontLoader';
 import { Toaster } from '../../lib/sonner';
+import { QueryClient, QueryClientProvider, focusManager } from '@tanstack/react-query';
 
 // Import bottom sheet components directly - no longer a peer dependency
 import { BottomSheetModal, BottomSheetBackdrop, type BottomSheetBackdropProps, BottomSheetModalProvider, BottomSheetView, BottomSheetScrollView } from '@gorhom/bottom-sheet';
@@ -38,47 +39,80 @@ const OxyProvider: React.FC<OxyProviderProps> = (props) => {
     // Create internal bottom sheet ref
     const internalBottomSheetRef = useRef<BottomSheetModalRef>(null);
 
+    // Initialize React Query Client (use provided client or create a default one once)
+    const queryClientRef = useRef<QueryClient | null>(null);
+    if (!queryClientRef.current) {
+        queryClientRef.current = props.queryClient ?? new QueryClient({
+            defaultOptions: {
+                queries: {
+                    staleTime: 30_000,
+                    gcTime: 5 * 60_000,
+                    retry: 2,
+                    refetchOnReconnect: true,
+                    refetchOnWindowFocus: false,
+                },
+                mutations: {
+                    retry: 1,
+                },
+            },
+        });
+    }
+
+    // Hook React Query focus manager into React Native AppState
+    useEffect(() => {
+        const subscription = AppState.addEventListener('change', (state) => {
+            focusManager.setFocused(state === 'active');
+        });
+        return () => {
+            subscription.remove();
+        };
+    }, []);
+
     // If contextOnly is true, we just provide the context without the bottom sheet UI
     if (contextOnly) {
         return (
+            <QueryClientProvider client={queryClientRef.current}>
+                <OxyContextProvider
+                    oxyServices={oxyServices}
+                    baseURL={baseURL}
+                    storageKeyPrefix={storageKeyPrefix}
+                    onAuthStateChange={onAuthStateChange}
+                >
+                    {children}
+                </OxyContextProvider>
+            </QueryClientProvider>
+        );
+    }
+
+    // Otherwise, provide both the context and the bottom sheet UI
+    return (
+        <QueryClientProvider client={queryClientRef.current}>
             <OxyContextProvider
                 oxyServices={oxyServices}
                 baseURL={baseURL}
                 storageKeyPrefix={storageKeyPrefix}
                 onAuthStateChange={onAuthStateChange}
+                bottomSheetRef={internalBottomSheetRef}
             >
-                {children}
+                <FontLoader>
+                    <GestureHandlerRootView style={styles.gestureHandlerRoot}>
+                        <BottomSheetModalProvider>
+                            <StatusBar translucent backgroundColor="transparent" />
+                            <SafeAreaProvider>
+                                <OxyBottomSheet {...bottomSheetProps} bottomSheetRef={internalBottomSheetRef} oxyServices={oxyServices} />
+                                {children}
+                            </SafeAreaProvider>
+                        </BottomSheetModalProvider>
+                        {/* Global Toaster for app-wide notifications outside of Modal contexts - only show if internal toaster is disabled */}
+                        {!showInternalToaster && (
+                            <View style={styles.toasterContainer}>
+                                <Toaster position="top-center" swipeToDismissDirection="left" offset={15} />
+                            </View>
+                        )}
+                    </GestureHandlerRootView>
+                </FontLoader>
             </OxyContextProvider>
-        );
-    }
-
-    // Otherwise, provide both the context and the bottom sheet UI
-    return (
-        <OxyContextProvider
-            oxyServices={oxyServices}
-            baseURL={baseURL}
-            storageKeyPrefix={storageKeyPrefix}
-            onAuthStateChange={onAuthStateChange}
-            bottomSheetRef={internalBottomSheetRef}
-        >
-            <FontLoader>
-                <GestureHandlerRootView style={styles.gestureHandlerRoot}>
-                    <BottomSheetModalProvider>
-                        <StatusBar translucent backgroundColor="transparent" />
-                        <SafeAreaProvider>
-                            <OxyBottomSheet {...bottomSheetProps} bottomSheetRef={internalBottomSheetRef} oxyServices={oxyServices} />
-                            {children}
-                        </SafeAreaProvider>
-                    </BottomSheetModalProvider>
-                    {/* Global Toaster for app-wide notifications outside of Modal contexts - only show if internal toaster is disabled */}
-                    {!showInternalToaster && (
-                        <View style={styles.toasterContainer}>
-                            <Toaster position="top-center" swipeToDismissDirection="left" offset={15} />
-                        </View>
-                    )}
-                </GestureHandlerRootView>
-            </FontLoader>
-        </OxyContextProvider>
+        </QueryClientProvider>
     );
 };
 
@@ -108,7 +142,7 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
     const oxyServices = providedOxyServices || contextOxy?.oxyServices;
     // Use the internal ref (which is passed as a prop from OxyProvider)
     const modalRef = useRef<BottomSheetModalRef>(null);
-    const navigationRef = useRef<((screen: string, props?: Record<string, any>) => void) | null>(null);
+    const navigationRef = useRef<((screen: string, props?: Record<string, unknown>) => void) | null>(null);
     // Remove contentHeight, containerWidth, and snap point state/logic
     // Animation values - keep for content fade/slide
     const fadeAnim = useRef(new Animated.Value(Platform.OS === 'android' ? 1 : 0)).current;

package/src/ui/components/ProfileCard.tsx

@@ -2,18 +2,15 @@ import type React from 'react';
 import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import Avatar from './Avatar';
+import { useOxy } from '../context/OxyContext';
 import { fontFamilies } from '../styles/fonts';
 
 interface ProfileCardProps {
     user: {
         username: string;
         email?: string;
-        name?: {
-            full?: string;
-        };
-        avatar?: {
-            url?: string;
-        };
+        name?: { full?: string };
+        avatar?: string; // file id
     };
     theme: 'light' | 'dark';
     onEditPress?: () => void;
@@ -29,6 +26,7 @@ const ProfileCard: React.FC<ProfileCardProps> = ({
     showCloseButton = false,
 }) => {
     const isDarkTheme = theme === 'dark';
+    const { oxyServices } = useOxy();
     const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
     const secondaryBackgroundColor = isDarkTheme ? '#222222' : '#FFFFFF';
     const primaryColor = '#0066CC';
@@ -43,7 +41,7 @@ const ProfileCard: React.FC<ProfileCardProps> = ({
             ]}>
                 <View style={styles.userProfile}>
                     <Avatar
-                        uri={user?.avatar?.url}
+                        uri={user?.avatar ? oxyServices.getFileDownloadUrl(user.avatar as string, 'thumb') : undefined}
                         name={user?.name?.full || user?.username}
                         size={60}
                         theme={theme}
@@ -56,7 +54,7 @@ const ProfileCard: React.FC<ProfileCardProps> = ({
                             </Text>
                         )}
                         {onEditPress && (
-                            <TouchableOpacity 
+                            <TouchableOpacity
                                 style={styles.editProfileButton}
                                 onPress={onEditPress}
                             >

package/src/ui/components/Section.tsx

@@ -1,5 +1,5 @@
 import type React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 import SectionTitle from './SectionTitle';
 
 interface SectionProps {
@@ -7,15 +7,15 @@ interface SectionProps {
     theme: 'light' | 'dark';
     children: React.ReactNode;
     isFirst?: boolean;
-    style?: any;
+    style?: StyleProp<ViewStyle>;
 }
 
-const Section: React.FC<SectionProps> = ({ 
-    title, 
-    theme, 
-    children, 
+const Section: React.FC<SectionProps> = ({
+    title,
+    theme,
+    children,
     isFirst = false,
-    style 
+    style
 }) => {
     return (
         <View style={[styles.section, isFirst && styles.firstSection, style]}>

package/src/ui/components/SectionTitle.tsx

@@ -1,11 +1,11 @@
 import type React from 'react';
-import { Text, StyleSheet } from 'react-native';
+import { Text, StyleSheet, type StyleProp, type TextStyle } from 'react-native';
 import { fontFamilies } from '../styles/fonts';
 
 interface SectionTitleProps {
     title: string;
     theme: 'light' | 'dark';
-    style?: any;
+    style?: StyleProp<TextStyle>;
 }
 
 const SectionTitle: React.FC<SectionTitleProps> = ({ title, theme, style }) => {

package/src/ui/components/StepBasedScreen.README.md

@@ -0,0 +1,337 @@
+# StepBasedScreen Component
+
+A reusable, production-ready React Native component for building multi-step flows with smooth animations and consistent UX patterns.
+
+## 🚀 Features
+
+- **Smooth Animations**: Built-in fade/slide animations using React Native Reanimated
+- **Progress Indicators**: Automatic progress bars and step indicators
+- **Type Safety**: Full TypeScript support with comprehensive interfaces
+- **Flexible Configuration**: Highly customizable step definitions
+- **Performance Optimized**: Efficient re-rendering and memory management
+- **Accessibility**: Proper focus management and screen reader support
+
+## 📦 Installation
+
+The component is already integrated into your project structure. Simply import it:
+
+```typescript
+import StepBasedScreen, { type StepConfig } from '../components/StepBasedScreen';
+```
+
+## 🔧 Basic Usage
+
+```typescript
+import React, { useState, useCallback } from 'react';
+import StepBasedScreen, { type StepConfig } from './StepBasedScreen';
+
+const MyMultiStepScreen: React.FC = () => {
+    const [formData, setFormData] = useState({ name: '', email: '' });
+
+    // Define your step components
+    const Step1: React.FC<any> = ({ nextStep }) => (
+        <View>
+            <Text>Enter your name</Text>
+            <TextInput
+                value={formData.name}
+                onChangeText={(text) => setFormData(prev => ({ ...prev, name: text }))}
+            />
+            <Button title="Next" onPress={nextStep} />
+        </View>
+    );
+
+    const Step2: React.FC<any> = ({ prevStep, onComplete }) => (
+        <View>
+            <Text>Enter your email</Text>
+            <TextInput
+                value={formData.email}
+                onChangeText={(text) => setFormData(prev => ({ ...prev, email: text }))}
+            />
+            <Button title="Back" onPress={prevStep} />
+            <Button title="Complete" onPress={onComplete} />
+        </View>
+    );
+
+    // Configure your steps
+    const steps: StepConfig[] = [
+        {
+            id: 'name',
+            component: Step1,
+            canProceed: () => formData.name.trim().length > 0,
+        },
+        {
+            id: 'email',
+            component: Step2,
+            canProceed: () => formData.email.trim().length > 0,
+        },
+    ];
+
+    const handleComplete = useCallback((stepData: any[]) => {
+        console.log('Form completed with data:', stepData);
+        // Handle completion logic here
+    }, []);
+
+    return (
+        <StepBasedScreen
+            steps={steps}
+            stepData={[formData]}
+            onComplete={handleComplete}
+            showProgressIndicator={true}
+            enableAnimations={true}
+        />
+    );
+};
+```
+
+## 🎛️ API Reference
+
+### StepBasedScreen Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `steps` | `StepConfig[]` | **Required** | Array of step configurations |
+| `stepData` | `any[]` | `[]` | Data to pass to each step |
+| `initialStep` | `number` | `0` | Initial step index |
+| `onComplete` | `(stepData: any[]) => void` | - | Called when all steps are completed |
+| `onStepChange` | `(currentStep: number, totalSteps: number) => void` | - | Called when step changes |
+| `showProgressIndicator` | `boolean` | `true` | Show progress bar/indicator |
+| `enableAnimations` | `boolean` | `true` | Enable step transition animations |
+| `navigate` | `(screen: string, props?: any) => void` | **Required** | Navigation function |
+| `goBack` | `() => void` | - | Go back function |
+| `onAuthenticated` | `(user: any) => void` | - | Authentication callback |
+| `theme` | `string` | **Required** | Theme ('light' or 'dark') |
+
+### StepConfig Interface
+
+```typescript
+interface StepConfig {
+    id: string;                                    // Unique identifier for the step
+    component: React.ComponentType<any>;           // React component to render
+    props?: Record<string, any>;                  // Additional props for the component
+    canProceed?: (stepData?: any) => boolean;     // Validation function
+    onEnter?: () => void;                         // Called when entering this step
+    onExit?: () => void;                          // Called when exiting this step
+}
+```
+
+### Step Component Props
+
+Each step component receives these props automatically:
+
+```typescript
+interface StepComponentProps {
+    // Navigation
+    nextStep: () => void;
+    prevStep: () => void;
+    goToStep: (stepIndex: number) => void;
+    currentStep: number;
+    totalSteps: number;
+
+    // Data management
+    stepData?: any;
+    updateStepData: (data: any) => void;
+    allStepData: any[];
+
+    // State
+    isTransitioning: boolean;
+
+    // Common props
+    colors: any;
+    styles: any;
+    theme: string;
+    navigate: (screen: string, props?: any) => void;
+    goBack: () => void;
+    onAuthenticated: (user: any) => void;
+
+    // Animation refs (advanced usage)
+    fadeAnim: Animated.SharedValue<number>;
+    slideAnim: Animated.SharedValue<number>;
+    scaleAnim: Animated.SharedValue<number>;
+}
+```
+
+## 📱 Advanced Usage Examples
+
+### Conditional Steps
+
+```typescript
+const steps: StepConfig[] = [
+    {
+        id: 'basic-info',
+        component: BasicInfoStep,
+        canProceed: (data) => data?.name && data?.email,
+    },
+    {
+        id: 'verification',
+        component: VerificationStep,
+        canProceed: (data) => data?.verified,
+        onEnter: () => {
+            // Send verification code
+            sendVerificationCode();
+        },
+    },
+    // Only show if user selected premium
+    ...(userType === 'premium' ? [{
+        id: 'premium-setup',
+        component: PremiumSetupStep,
+        canProceed: () => true,
+    }] : []),
+];
+```
+
+### Async Validation
+
+```typescript
+const steps: StepConfig[] = [
+    {
+        id: 'username',
+        component: UsernameStep,
+        canProceed: async (data) => {
+            if (!data?.username) return false;
+            const isAvailable = await checkUsernameAvailability(data.username);
+            return isAvailable;
+        },
+        onEnter: () => {
+            // Pre-validate if username exists
+            if (existingUsername) {
+                validateUsername(existingUsername);
+            }
+        },
+    },
+];
+```
+
+### Dynamic Step Data
+
+```typescript
+const [stepData, setStepData] = useState([
+    { name: '', email: '' },           // Step 1 data
+    { preferences: {} },               // Step 2 data
+    { confirmation: false },           // Step 3 data
+]);
+
+// Update specific step data
+const updateStepData = (stepIndex: number, data: any) => {
+    setStepData(prev => prev.map((item, index) =>
+        index === stepIndex ? { ...item, ...data } : item
+    ));
+};
+```
+
+### Custom Progress Indicator
+
+```typescript
+const CustomProgressIndicator: React.FC<{
+    currentStep: number;
+    totalSteps: number;
+    colors: any;
+}> = ({ currentStep, totalSteps, colors }) => (
+    <View style={styles.customProgress}>
+        {Array.from({ length: totalSteps }, (_, index) => (
+            <View
+                key={index}
+                style={[
+                    styles.progressDot,
+                    {
+                        backgroundColor: index <= currentStep ? colors.primary : colors.border,
+                        transform: [{ scale: index === currentStep ? 1.2 : 1 }],
+                    }
+                ]}
+            />
+        ))}
+    </View>
+);
+
+// Use in your screen component
+<StepBasedScreen
+    steps={steps}
+    showProgressIndicator={false} // Disable default indicator
+    // Add your custom indicator as a step component
+/>
+```
+
+## 🎨 Styling
+
+The component uses your existing theme system and `createAuthStyles`. All styling is consistent with your app's design system.
+
+### Customizing Animations
+
+```typescript
+// The component includes optimized animations by default
+// For custom animations, access the animation refs in your step components:
+
+const MyStepComponent: React.FC<any> = ({
+    fadeAnim,
+    slideAnim,
+    scaleAnim,
+    isTransitioning
+}) => {
+    const customAnimatedStyle = useAnimatedStyle(() => ({
+        opacity: fadeAnim.value,
+        transform: [
+            { translateX: slideAnim.value },
+            { scale: scaleAnim.value },
+            // Add your custom transforms here
+        ],
+    }));
+
+    return (
+        <Animated.View style={customAnimatedStyle}>
+            {/* Your step content */}
+        </Animated.View>
+    );
+};
+```
+
+## 🐛 Troubleshooting
+
+### Common Issues
+
+1. **Steps not advancing**: Check your `canProceed` functions return `true`
+2. **Animations not working**: Ensure `enableAnimations` is `true` and Reanimated is properly set up
+3. **TypeScript errors**: Make sure your step components accept the `StepComponentProps` interface
+4. **Re-rendering issues**: Use `useCallback` for functions passed to step components
+
+### Performance Tips
+
+1. **Memoize step components**: Use `React.memo` for step components
+2. **Optimize re-renders**: Only include necessary dependencies in `useMemo` and `useCallback`
+3. **Limit step data**: Keep `stepData` as small as possible
+4. **Use proper keys**: Ensure step components have unique keys for proper reconciliation
+
+## 🔄 Migration from Existing Screens
+
+### Converting SignInScreen
+
+1. Extract step components into separate files
+2. Define step configurations with validation logic
+3. Replace the existing component with `StepBasedScreen`
+4. Pass form state through `stepData`
+
+### Converting SignUpScreen
+
+1. Break down the 4-step flow into separate components
+2. Implement validation logic in `canProceed` functions
+3. Handle form state management in the parent component
+4. Use `onEnter` and `onExit` for step-specific logic
+
+## 📚 Related Components
+
+- `TextField` - Input component used in steps
+- `GroupedPillButtons` - Navigation buttons
+- `ProgressIndicator` - Built-in progress component
+- `AnimatedStepContainer` - Animation wrapper
+
+## 🤝 Contributing
+
+When adding new features to the StepBasedScreen:
+
+1. Maintain backward compatibility
+2. Add comprehensive TypeScript types
+3. Include examples in the examples file
+4. Update this documentation
+5. Test with different step configurations
+
+---
+
+**Note**: This component is designed to be highly reusable across different multi-step flows in your application. It handles the common patterns of navigation, animation, and state management, allowing you to focus on the specific logic for each step.