@oxyhq/services 5.11.10 → 5.11.11

package/src/ui/components/StepBasedScreen.tsx

@@ -0,0 +1,417 @@
+import type React from 'react';
+import { useState, useRef, useCallback, useMemo, useEffect } from 'react';
+import {
+    View,
+    Text,
+    KeyboardAvoidingView,
+    ScrollView,
+    StatusBar,
+    Platform,
+    StyleSheet,
+} from 'react-native';
+import Animated, {
+    useSharedValue,
+    useAnimatedStyle,
+    withTiming,
+    withSequence,
+    withDelay,
+    withSpring,
+    runOnJS,
+    interpolate,
+} from 'react-native-reanimated';
+import { useThemeColors, createAuthStyles } from '../styles';
+import type { BaseScreenProps } from '../navigation/types';
+
+export interface StepConfig {
+    id: string;
+    component: React.ComponentType<any>;
+    props?: Record<string, any>;
+    canProceed?: (stepData?: any) => boolean;
+    onEnter?: () => void;
+    onExit?: () => void;
+}
+
+export interface StepBasedScreenProps extends Omit<BaseScreenProps, 'navigate'> {
+    steps: StepConfig[];
+    initialStep?: number;
+    showProgressIndicator?: boolean;
+    enableAnimations?: boolean;
+    onStepChange?: (currentStep: number, totalSteps: number) => void;
+    onComplete?: (stepData: any[]) => void;
+    stepData?: any[];
+    navigate: (screen: string, props?: Record<string, any>) => void;
+    oxyServices: any; // Required services for step components
+}
+
+interface StepBasedScreenState {
+    currentStep: number;
+    stepData: any[];
+    isTransitioning: boolean;
+}
+
+// Progress indicator component
+const ProgressIndicator: React.FC<{
+    currentStep: number;
+    totalSteps: number;
+    colors: any;
+    styles: any;
+}> = ({ currentStep, totalSteps, colors, styles }) => (
+    <View style={styles.progressContainer}>
+        {Array.from({ length: totalSteps }, (_, index) => (
+            <View
+                key={index}
+                style={[
+                    styles.progressDot,
+                    currentStep === index
+                        ? { backgroundColor: colors.primary, width: 24 }
+                        : { backgroundColor: colors.border }
+                ]}
+            />
+        ))}
+    </View>
+);
+
+// Step container with animations
+const AnimatedStepContainer: React.FC<{
+    children: React.ReactNode;
+    fadeAnim: Animated.SharedValue<number>;
+    slideAnim: Animated.SharedValue<number>;
+    scaleAnim: Animated.SharedValue<number>;
+    styles: any;
+    stepKey: string;
+}> = ({ children, fadeAnim, slideAnim, scaleAnim, styles, stepKey }) => {
+    const animatedStyle = useAnimatedStyle(() => ({
+        opacity: fadeAnim.value,
+        transform: [
+            { translateX: slideAnim.value },
+            { scale: scaleAnim.value }
+        ]
+    }));
+
+    return (
+        <Animated.View
+            key={stepKey}
+            style={[styles.stepContainer, animatedStyle]}
+        >
+            {children}
+        </Animated.View>
+    );
+};
+
+const StepBasedScreen: React.FC<StepBasedScreenProps> = ({
+    steps,
+    initialStep = 0,
+    showProgressIndicator = true,
+    enableAnimations = true,
+    onStepChange,
+    onComplete,
+    stepData = [],
+    navigate,
+    goBack,
+    onAuthenticated,
+    theme,
+    oxyServices,
+}) => {
+    const colors = useThemeColors(theme);
+    const styles = useMemo(() => ({
+        ...createAuthStyles(colors, theme),
+        // Additional styles for step components
+        modernHeader: {
+            alignItems: 'flex-start' as const,
+            width: '100%',
+            marginBottom: 24,
+        },
+        modernTitle: {
+            fontFamily: Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
+            fontWeight: Platform.OS === 'web' ? 'bold' as const : undefined,
+            fontSize: 42,
+            lineHeight: 50.4, // 42 * 1.2
+            marginBottom: 12,
+            textAlign: 'left' as const,
+            letterSpacing: -0.5,
+        },
+        modernSubtitle: {
+            fontSize: 18,
+            lineHeight: 24,
+            textAlign: 'left' as const,
+            opacity: 0.8,
+        },
+        modernInputContainer: {
+            width: '100%',
+            marginBottom: 24,
+        },
+        button: {
+            flexDirection: 'row' as const,
+            alignItems: 'center',
+            justifyContent: 'center',
+            paddingVertical: 18,
+            paddingHorizontal: 32,
+            borderRadius: 16,
+            marginVertical: 8,
+            gap: 8,
+            width: '100%',
+            ...Platform.select({
+                web: {
+                    boxShadow: '0 4px 8px rgba(0,0,0,0.3)',
+                },
+                default: {
+                    shadowOffset: { width: 0, height: 4 },
+                    shadowOpacity: 0.3,
+                    shadowRadius: 8,
+                    elevation: 6,
+                }
+            }),
+        },
+        buttonText: {
+            color: '#FFFFFF',
+            fontSize: 16,
+            fontWeight: '600' as const,
+            letterSpacing: 0.5,
+        },
+        footerText: {
+            fontSize: 14,
+            lineHeight: 20,
+        },
+        footerTextContainer: {
+            flexDirection: 'row' as const,
+            justifyContent: 'center' as const,
+            marginTop: 16,
+        },
+        linkText: {
+            fontSize: 14,
+            lineHeight: 20,
+            fontWeight: '600' as const,
+            textDecorationLine: 'underline' as const,
+        },
+    }), [colors, theme]);
+
+    // State management
+    const [state, setState] = useState<StepBasedScreenState>({
+        currentStep: initialStep,
+        stepData: stepData,
+        isTransitioning: false,
+    });
+
+    // Update state when stepData prop changes
+    useEffect(() => {
+        setState(prevState => ({
+            ...prevState,
+            stepData: stepData,
+        }));
+    }, [stepData]);
+
+    // Animation values
+    const fadeAnim = useSharedValue(1);
+    const slideAnim = useSharedValue(0);
+    const scaleAnim = useSharedValue(1);
+
+    // Refs for animation callbacks
+    const onStepChangeRef = useRef(onStepChange);
+    const onCompleteRef = useRef(onComplete);
+    onStepChangeRef.current = onStepChange;
+    onCompleteRef.current = onComplete;
+
+    // Update step data
+    const updateStepData = useCallback((stepIndex: number, data: any) => {
+        setState(prev => ({
+            ...prev,
+            stepData: prev.stepData.map((item, index) =>
+                index === stepIndex ? data : item
+            ),
+        }));
+    }, [setState]);
+
+    // Animation transition function
+    const animateTransition = useCallback((nextStep: number) => {
+        if (!enableAnimations) {
+            setState(prev => ({ ...prev, currentStep: nextStep }));
+            onStepChangeRef.current?.(nextStep, steps.length);
+            return;
+        }
+
+        setState(prev => ({ ...prev, isTransitioning: true }));
+
+        // Scale down current content
+        scaleAnim.value = withSequence(
+            withTiming(0.95, { duration: 150 }),
+            withTiming(0.95, { duration: 50 })
+        );
+
+        fadeAnim.value = withSequence(
+            withTiming(0, { duration: 200 }),
+            withTiming(0, { duration: 50 }, (finished) => {
+                if (finished) {
+                    runOnJS(() => {
+                        setState(prev => ({
+                            ...prev,
+                            currentStep: nextStep,
+                            isTransitioning: false
+                        }));
+                        onStepChangeRef.current?.(nextStep, steps.length);
+                    })();
+
+                    // Reset animations with proper timing
+                    slideAnim.value = withDelay(16, withTiming(-50, { duration: 0 }));
+                    scaleAnim.value = withDelay(16, withTiming(0.95, { duration: 0 }));
+
+                    // Animate in new content
+                    fadeAnim.value = withDelay(16, withTiming(1, { duration: 300 }));
+                    slideAnim.value = withDelay(16, withSpring(0, {
+                        damping: 15,
+                        stiffness: 200,
+                    }));
+                    scaleAnim.value = withDelay(16, withSpring(1, {
+                        damping: 15,
+                        stiffness: 200,
+                    }));
+                }
+            })
+        );
+    }, [fadeAnim, slideAnim, scaleAnim, enableAnimations, steps.length]);
+
+    // Navigation functions
+    const nextStep = useCallback(() => {
+        if (state.isTransitioning) return;
+
+        const currentStepConfig = steps[state.currentStep];
+        if (currentStepConfig?.canProceed) {
+            const stepData = state.stepData[state.currentStep];
+            if (!currentStepConfig.canProceed(stepData)) {
+                return; // Step validation failed
+            }
+        }
+
+        if (state.currentStep < steps.length - 1) {
+            // Call onExit for current step
+            currentStepConfig?.onExit?.();
+
+            animateTransition(state.currentStep + 1);
+
+            // Call onEnter for next step
+            const nextStepConfig = steps[state.currentStep + 1];
+            nextStepConfig?.onEnter?.();
+        } else {
+            // Final step - call onComplete
+            onCompleteRef.current?.(state.stepData);
+        }
+    }, [state.currentStep, state.stepData, state.isTransitioning, steps, animateTransition]);
+
+    const prevStep = useCallback(() => {
+        if (state.isTransitioning) return;
+
+        if (state.currentStep > 0) {
+            // Call onExit for current step
+            const currentStepConfig = steps[state.currentStep];
+            currentStepConfig?.onExit?.();
+
+            animateTransition(state.currentStep - 1);
+
+            // Call onEnter for previous step
+            const prevStepConfig = steps[state.currentStep - 1];
+            prevStepConfig?.onEnter?.();
+        } else {
+            // First step - go back
+            goBack?.();
+        }
+    }, [state.currentStep, state.isTransitioning, steps, animateTransition, goBack]);
+
+    const goToStep = useCallback((stepIndex: number) => {
+        if (state.isTransitioning || stepIndex < 0 || stepIndex >= steps.length) return;
+
+        if (stepIndex !== state.currentStep) {
+            // Call onExit for current step
+            const currentStepConfig = steps[state.currentStep];
+            currentStepConfig?.onExit?.();
+
+            animateTransition(stepIndex);
+
+            // Call onEnter for target step
+            const targetStepConfig = steps[stepIndex];
+            targetStepConfig?.onEnter?.();
+        }
+    }, [state.currentStep, state.isTransitioning, steps, animateTransition]);
+
+    // Get current step component
+    const currentStepConfig = steps[state.currentStep];
+    const CurrentStepComponent = currentStepConfig?.component;
+
+    // Enhanced props for the step component
+    const stepProps = {
+        ...currentStepConfig?.props,
+        // Common props
+        colors,
+        styles,
+        theme,
+        navigate,
+        goBack,
+        onAuthenticated,
+        oxyServices,
+
+        // Step navigation
+        nextStep,
+        prevStep,
+        goToStep,
+        currentStep: state.currentStep,
+        totalSteps: steps.length,
+
+        // Step data - spread the step data properties directly as props
+        ...state.stepData[state.currentStep],
+
+        // Step data management
+        updateStepData: (data: any) => updateStepData(state.currentStep, data),
+        allStepData: state.stepData,
+
+        // State
+        isTransitioning: state.isTransitioning,
+
+        // Animation refs (for components that need direct access)
+        fadeAnim,
+        slideAnim,
+        scaleAnim,
+    };
+
+    return (
+        <KeyboardAvoidingView
+            style={[styles.container, { backgroundColor: colors.background }]}
+            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        >
+            <StatusBar
+                barStyle={theme === 'dark' ? 'light-content' : 'dark-content'}
+                backgroundColor={colors.background}
+            />
+
+            <ScrollView
+                contentContainerStyle={styles.scrollContent}
+                showsVerticalScrollIndicator={false}
+                keyboardShouldPersistTaps="handled"
+                bounces={false}
+                alwaysBounceVertical={false}
+                overScrollMode="never"
+                removeClippedSubviews={true}
+            >
+                {showProgressIndicator && steps.length > 1 && (
+                    <ProgressIndicator
+                        currentStep={state.currentStep}
+                        totalSteps={steps.length}
+                        colors={colors}
+                        styles={styles}
+                    />
+                )}
+
+                <AnimatedStepContainer
+                    fadeAnim={fadeAnim}
+                    slideAnim={slideAnim}
+                    scaleAnim={scaleAnim}
+                    styles={styles}
+                    stepKey={`step-${state.currentStep}`}
+                >
+                    {CurrentStepComponent && (
+                        <CurrentStepComponent {...stepProps} />
+                    )}
+                </AnimatedStepContainer>
+            </ScrollView>
+        </KeyboardAvoidingView>
+    );
+};
+
+export default StepBasedScreen;

package/src/ui/components/icon/FAIRWalletIcon.tsx

@@ -1,10 +1,10 @@
 import type React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 import Svg, { G, Path } from 'react-native-svg';
 
 interface FAIRWalletIconProps {
     size?: number;
-    style?: any;
+    style?: StyleProp<ViewStyle>;
 }
 
 const FAIRWalletIcon: React.FC<FAIRWalletIconProps> = ({ size = 28, style }) => {

package/src/ui/components/icon/OxyIcon.tsx

@@ -1,26 +1,25 @@
 import type React from 'react';
-import { Platform } from 'react-native';
+import { Platform, type StyleProp, type TextStyle } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 
 export interface IconProps {
   name: string;
   size?: number;
   color?: string;
-  style?: any;
+  style?: Record<string, unknown>;
 }
 
-const OxyIcon: React.FC<IconProps> = ({ 
-  name, 
-  size = 24, 
-  color = '#000', 
-  style 
+const OxyIcon: React.FC<IconProps> = ({
+  name,
+  size = 24,
+  color = '#000',
+  style
 }) => {
-  // Handle both string and Ionicons name types
-  const iconName = name as any;
-  
+  // Icon name is already properly typed as IoniconsGlyphs
+
   return (
     <Ionicons
-      name={iconName}
+      name={name as any}
       size={size}
       color={color}
       style={style}

package/src/ui/components/internal/PinInput.tsx

@@ -1,6 +1,15 @@
 import type React from 'react';
 import { useRef } from 'react';
-import { View, TextInput, StyleSheet, Platform } from 'react-native';
+import { View, TextInput, StyleSheet, Platform, type NativeSyntheticEvent, type TextInputKeyPressEventData } from 'react-native';
+
+interface PinInputColors {
+    primary: string;
+    secondary?: string;
+    background: string;
+    inputBackground: string;
+    text: string;
+    border: string;
+}
 
 interface PinInputProps {
     value: string;
@@ -8,7 +17,7 @@ interface PinInputProps {
     length?: number;
     disabled?: boolean;
     autoFocus?: boolean;
-    colors: any;
+    colors: PinInputColors;
 }
 
 const PinInput: React.FC<PinInputProps> = ({ value, onChange, length = 6, disabled, autoFocus, colors }) => {
@@ -34,7 +43,7 @@ const PinInput: React.FC<PinInputProps> = ({ value, onChange, length = 6, disabl
         }
     };
 
-    const handleKeyPress = (e: any, idx: number) => {
+    const handleKeyPress = (e: NativeSyntheticEvent<TextInputKeyPressEventData>, idx: number) => {
         if (e.nativeEvent.key === 'Backspace' && !value[idx] && idx > 0) {
             inputs.current[idx - 1]?.focus();
         }
@@ -44,7 +53,7 @@ const PinInput: React.FC<PinInputProps> = ({ value, onChange, length = 6, disabl
         <View style={styles.pinContainer}>
             {Array.from({ length }).map((_, idx) => (
                 <TextInput
-                    key={idx}
+                    key={`pin-input-${idx}`}
                     ref={(ref) => { inputs.current[idx] = ref; }}
                     style={[
                         styles.pinInput,

package/src/ui/components/photogrid/JustifiedPhotoGrid.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState, useCallback } from 'react';
-import { View, Text, LayoutChangeEvent } from 'react-native';
+import { View, Text, type LayoutChangeEvent } from 'react-native';
 import type { FileMetadata } from '../../../models/interfaces';
 // Using plain React Native styles (nativewind not installed in this repo)
 

package/src/ui/context/OxyContext.tsx

@@ -1,4 +1,5 @@
-import React, { createContext, useContext, useEffect, useCallback, type ReactNode, useMemo, useRef, useState } from 'react';
+import type React from 'react';
+import { createContext, useContext, useEffect, useCallback, useMemo, useRef, useState, type ReactNode } from 'react';
 import type { UseFollowHook } from '../hooks/useFollow.types';
 import { View, Text } from 'react-native';
 import { OxyServices } from '../../core';
@@ -167,13 +168,13 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
   const logoutStore = useAuthStore((state) => state.logout);
 
   // Local state for non-auth fields
-  const [minimalUser, setMinimalUser] = React.useState<MinimalUserData | null>(null);
-  const [sessions, setSessions] = React.useState<ClientSession[]>([]);
-  const [activeSessionId, setActiveSessionId] = React.useState<string | null>(null);
-  const [storage, setStorage] = React.useState<StorageInterface | null>(null);
-  const [currentLanguage, setCurrentLanguage] = React.useState<string>('en');
+  const [minimalUser, setMinimalUser] = useState<MinimalUserData | null>(null);
+  const [sessions, setSessions] = useState<ClientSession[]>([]);
+  const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
+  const [storage, setStorage] = useState<StorageInterface | null>(null);
+  const [currentLanguage, setCurrentLanguage] = useState<string>('en');
   // Add a new state to track token restoration
-  const [tokenReady, setTokenReady] = React.useState(false);
+  const [tokenReady, setTokenReady] = useState(false);
 
   // Storage keys (memoized to prevent infinite loops)
   const keys = useMemo(() => getStorageKeys(storageKeyPrefix), [storageKeyPrefix]);
@@ -209,7 +210,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
       useAuthStore.setState({ isLoading: true });
       try {
         setTokenReady(false);
-        
+
         // Load saved language preference
         const savedLanguage = await storage.getItem(keys.language);
         if (savedLanguage) {
@@ -626,12 +627,12 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
       // Save language preference
       await storage.setItem(keys.language, languageId);
       setCurrentLanguage(languageId);
-      
+
       console.log(`Language changed to ${languageId}`);
-      
+
       // TODO: Here you can add any additional logic needed for app-wide language updates
       // such as updating i18n configuration, refreshing translations, etc.
-      
+
     } catch (error) {
       console.error('Error saving language preference:', error);
       throw error;

package/src/ui/screens/PaymentGatewayScreen.tsx

@@ -58,9 +58,9 @@ export type PaymentItem = {
 };
 
 // Extend props to accept onPaymentResult, amount, and currency
-interface PaymentGatewayResult {
+export interface PaymentGatewayResult {
     success: boolean;
-    details?: any;
+    details?: Record<string, string | number | boolean | null>;
     error?: string;
 }