@oxyhq/services 5.4.3 → 5.4.4

package/src/ui/components/OxyProvider.tsx

@@ -4,6 +4,8 @@ import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-cont
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { OxyProviderProps } from '../navigation/types';
 import { OxyContextProvider, useOxy } from '../context/OxyContext';
+import { Provider } from 'react-redux';
+import { store } from '../store';
 import OxyRouter from '../navigation/OxyRouter';
 import { FontLoader, setupFonts } from './FontLoader';
 import { Toaster } from '../../lib/sonner';
@@ -39,42 +41,46 @@ const OxyProvider: React.FC<OxyProviderProps> = (props) => {
     // If contextOnly is true, we just provide the context without the bottom sheet UI
     if (contextOnly) {
         return (
+            <Provider store={store}>
+                <OxyContextProvider
+                    oxyServices={oxyServices}
+                    storageKeyPrefix={storageKeyPrefix}
+                    onAuthStateChange={onAuthStateChange}
+                >
+                    {children}
+                </OxyContextProvider>
+            </Provider>
+        );
+    }
+
+    // Otherwise, provide both the context and the bottom sheet UI
+    return (
+        <Provider store={store}>
             <OxyContextProvider
                 oxyServices={oxyServices}
                 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}
-            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>
+        </Provider>
     );
 };
 
@@ -97,7 +103,7 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
 }) => {
     // Use the internal ref (which is passed as a prop from OxyProvider)
     const modalRef = useRef<BottomSheetModalRef>(null);
-    
+
     // Create a ref to store the navigation function from OxyRouter
     const navigationRef = useRef<((screen: string, props?: Record<string, any>) => void) | null>(null);
 
@@ -129,14 +135,14 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
             // @ts-ignore - Adding custom method
             bottomSheetRef.current._navigateToScreen = (screenName: string, props?: Record<string, any>) => {
                 console.log(`Navigation requested: ${screenName}`, props);
-                
+
                 // Try direct navigation function first (most reliable)
                 if (navigationRef.current) {
                     console.log('Using direct navigation function');
                     navigationRef.current(screenName, props);
                     return;
                 }
-                
+
                 // Fallback to event-based navigation
                 if (typeof document !== 'undefined') {
                     // For web - use a custom event
@@ -159,36 +165,24 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
     // Start with opacity 1 on Android to avoid visibility issues
     const fadeAnim = useRef(new Animated.Value(Platform.OS === 'android' ? 1 : 0)).current;
     const slideAnim = useRef(new Animated.Value(Platform.OS === 'android' ? 0 : 50)).current;
-    const handleScaleAnim = useRef(new Animated.Value(1)).current;
 
     // Track keyboard status
     const [keyboardVisible, setKeyboardVisible] = useState(false);
-    const [keyboardHeight, setKeyboardHeight] = useState(0);
     const insets = useSafeAreaInsets();
 
-    // Get the authentication context
-    const oxyContext = useOxy();
-
-    // Handle keyboard events
+    // Handle keyboard events - memoized to prevent re-registration
     useEffect(() => {
         const keyboardWillShowListener = Keyboard.addListener(
             Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow',
             (event: KeyboardEvent) => {
-                // Debounce rapid keyboard events
-                if (!keyboardVisible) {
-                    setKeyboardVisible(true);
-                    // Get keyboard height from event
-                    const keyboardHeightValue = event.endCoordinates.height;
-                    setKeyboardHeight(keyboardHeightValue);
-
-                    // Ensure the bottom sheet remains visible when keyboard opens
-                    // by adjusting to the highest snap point
-                    if (modalRef.current) {
-                        // Use requestAnimationFrame to avoid conflicts
-                        requestAnimationFrame(() => {
-                            modalRef.current?.snapToIndex(1);
-                        });
-                    }
+                setKeyboardVisible(true);
+                // Ensure the bottom sheet remains visible when keyboard opens
+                // by adjusting to the highest snap point
+                if (modalRef.current) {
+                    // Use requestAnimationFrame to avoid conflicts
+                    requestAnimationFrame(() => {
+                        modalRef.current?.snapToIndex(1);
+                    });
                 }
             }
         );
@@ -196,10 +190,7 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
         const keyboardWillHideListener = Keyboard.addListener(
             Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide',
             () => {
-                if (keyboardVisible) {
-                    setKeyboardVisible(false);
-                    setKeyboardHeight(0);
-                }
+                setKeyboardVisible(false);
             }
         );
 
@@ -208,7 +199,7 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
             keyboardWillShowListener.remove();
             keyboardWillHideListener.remove();
         };
-    }, [keyboardVisible]);
+    }, []); // Remove keyboardVisible dependency to prevent re-registration
 
     // Present the modal when component mounts, but only if autoPresent is true
     useEffect(() => {
@@ -263,32 +254,48 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
         }
     }, [bottomSheetRef, modalRef, fadeAnim, slideAnim, autoPresent]);
 
+    // Close the bottom sheet with animation
+    const handleClose = useCallback(() => {
+        // Animate content out
+        Animated.timing(fadeAnim, {
+            toValue: 0,
+            duration: Platform.OS === 'android' ? 100 : 200, // Faster on Android
+            useNativeDriver: Platform.OS === 'ios', // Only use native driver on iOS
+        }).start(() => {
+            // Dismiss the sheet
+            modalRef.current?.dismiss();
+            if (onClose) {
+                setTimeout(() => {
+                    onClose();
+                }, Platform.OS === 'android' ? 150 : 100);
+            }
+        });
+    }, [onClose, fadeAnim]);
+
     // Handle authentication success from the bottom sheet screens
     const handleAuthenticated = useCallback((user: any) => {
+        // Stop any ongoing animations that might interfere with dismissal
+        fadeAnim.stopAnimation();
+        slideAnim.stopAnimation();
+
         // Call the prop callback if provided
         if (onAuthenticated) {
             onAuthenticated(user);
         }
-    }, [onAuthenticated]);
 
-    // Handle indicator animation - subtle pulse effect
-    useEffect(() => {
-        const pulseAnimation = Animated.sequence([
-            Animated.timing(handleScaleAnim, {
-                toValue: 1.1,
-                duration: 300,
-                useNativeDriver: Platform.OS === 'ios', // Only use native driver on iOS
-            }),
-            Animated.timing(handleScaleAnim, {
-                toValue: 1,
-                duration: 300,
-                useNativeDriver: Platform.OS === 'ios', // Only use native driver on iOS
-            }),
-        ]);
-
-        // Run the animation once when component mounts
-        pulseAnimation.start();
-    }, []);
+        // Automatically dismiss the bottom sheet after successful authentication
+        // Use direct dismissal for immediate closure
+        modalRef.current?.dismiss();
+
+        // Call onClose callback if provided
+        if (onClose) {
+            setTimeout(() => {
+                onClose();
+            }, 100);
+        }
+    }, [onAuthenticated, onClose, fadeAnim, slideAnim]);
+
+    // Remove handle animation to prevent conflicts with bottom sheet animations
 
     // Handle backdrop rendering
     const renderBackdrop = useCallback(
@@ -319,76 +326,70 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
         };
     }, [customStyles.backgroundColor, theme]);
 
-    // Method to adjust snap points from Router
+    // Method to adjust snap points from Router - memoized with stable dependencies
     const adjustSnapPoints = useCallback((points: string[]) => {
-        // Ensure snap points are high enough when keyboard is visible
-        if (keyboardVisible) {
-            // If keyboard is visible, make sure we use higher snap points
-            // to ensure the sheet content remains visible
-            const highestPoint = points[points.length - 1];
-            setSnapPoints([highestPoint, highestPoint]);
-        } else {
-            // If we have content height, use it as a constraint
-            if (contentHeight > 0) {
-                // Calculate content height as percentage of screen (plus some padding)
-                // Clamp to ensure we don't exceed 90% to leave space for UI elements
-                const contentHeightPercent = Math.min(Math.ceil((contentHeight) / screenHeight * 100), 90);
-                const contentHeightPercentStr = `${contentHeightPercent}%`;
-                // Use content height for first snap point if it's taller than the default
-                const firstPoint = contentHeight / screenHeight > 0.6 ? contentHeightPercentStr : points[0];
-                setSnapPoints([firstPoint, points[1] || '90%']);
+        setSnapPoints(prevSnapPoints => {
+            // Ensure snap points are high enough when keyboard is visible
+            if (keyboardVisible) {
+                // If keyboard is visible, make sure we use higher snap points
+                // to ensure the sheet content remains visible
+                const highestPoint = points[points.length - 1];
+                const newSnapPoints = [highestPoint, highestPoint];
+                // Only update if actually different
+                if (JSON.stringify(prevSnapPoints) !== JSON.stringify(newSnapPoints)) {
+                    return newSnapPoints;
+                }
+                return prevSnapPoints;
             } else {
-                setSnapPoints(points);
+                // If we have content height, use it as a constraint
+                if (contentHeight > 0) {
+                    // Calculate content height as percentage of screen (plus some padding)
+                    // Clamp to ensure we don't exceed 90% to leave space for UI elements
+                    const contentHeightPercent = Math.min(Math.ceil((contentHeight) / screenHeight * 100), 90);
+                    const contentHeightPercentStr = `${contentHeightPercent}%`;
+                    // Use content height for first snap point if it's taller than the default
+                    const firstPoint = contentHeight / screenHeight > 0.6 ? contentHeightPercentStr : points[0];
+                    const newSnapPoints = [firstPoint, points[1] || '90%'];
+                    // Only update if actually different
+                    if (JSON.stringify(prevSnapPoints) !== JSON.stringify(newSnapPoints)) {
+                        return newSnapPoints;
+                    }
+                    return prevSnapPoints;
+                } else {
+                    // Only update if actually different
+                    if (JSON.stringify(prevSnapPoints) !== JSON.stringify(points)) {
+                        return points;
+                    }
+                    return prevSnapPoints;
+                }
             }
-        }
+        });
     }, [keyboardVisible, contentHeight, screenHeight]);
 
-    // Handle content layout changes to measure height and width
+    // Handle content layout changes to measure height and width - prevent rerender loops
     const handleContentLayout = useCallback((event: any) => {
         const { height: layoutHeight, width: layoutWidth } = event.nativeEvent.layout;
-        setContentHeight(layoutHeight);
-        setContainerWidth(layoutWidth);
-        
-        // Debug: log container dimensions
-        console.log('[OxyProvider] Container dimensions (full):', { width: layoutWidth, height: layoutHeight });
-
-        // Update snap points based on new content height
-        if (keyboardVisible) {
-            // If keyboard is visible, use the highest snap point
-            const highestPoint = snapPoints[snapPoints.length - 1];
-            setSnapPoints([highestPoint, highestPoint]);
-        } else {
-            if (layoutHeight > 0) {
-                // Add padding and clamp to reasonable limits
-                const contentHeightPercent = Math.min(Math.ceil((layoutHeight + 40) / screenHeight * 100), 90);
-                const contentHeightPercentStr = `${contentHeightPercent}%`;
-                const firstPoint = layoutHeight / screenHeight > 0.6 ? contentHeightPercentStr : snapPoints[0];
-                setSnapPoints([firstPoint, snapPoints[1]]);
+
+        // Only update if values actually changed to prevent unnecessary rerenders
+        setContentHeight(prevHeight => {
+            if (Math.abs(prevHeight - layoutHeight) > 5) { // 5px threshold to prevent minor fluctuations
+                return layoutHeight;
             }
-        }
-    }, [keyboardVisible, screenHeight, snapPoints]);
+            return prevHeight;
+        });
 
-    // Close the bottom sheet with animation
-    const handleClose = useCallback(() => {
-        // Animate content out
-        Animated.timing(fadeAnim, {
-            toValue: 0,
-            duration: Platform.OS === 'android' ? 100 : 200, // Faster on Android
-            useNativeDriver: Platform.OS === 'ios', // Only use native driver on iOS
-        }).start(() => {
-            // Dismiss the sheet
-            modalRef.current?.dismiss();
-            if (onClose) {
-                setTimeout(() => {
-                    onClose();
-                }, Platform.OS === 'android' ? 150 : 100);
+        setContainerWidth(prevWidth => {
+            if (Math.abs(prevWidth - layoutWidth) > 5) { // 5px threshold to prevent minor fluctuations
+                return layoutWidth;
             }
+            return prevWidth;
         });
-    }, [onClose, fadeAnim]);
+    }, []); // Remove dependencies that cause rerender loops
 
-    // Handle sheet index changes
+    // Handle sheet index changes - simplified to prevent unnecessary rerenders
     const handleSheetChanges = useCallback((index: number) => {
-    }, [onClose, handleScaleAnim, keyboardVisible]);
+        // Sheet change handling can be added here if needed
+    }, []);
 
     return (
         <BottomSheetModal

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

@@ -0,0 +1,253 @@
+import React from 'react';
+import { View, TouchableOpacity, Text, ActivityIndicator, StyleSheet } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+
+interface ButtonConfig {
+    text: string;
+    onPress: () => void;
+    icon?: string;
+    variant?: 'primary' | 'secondary' | 'transparent';
+    disabled?: boolean;
+    loading?: boolean;
+    testID?: string;
+}
+
+interface GroupedPillButtonsProps {
+    buttons: ButtonConfig[];
+    colors: any;
+    gap?: number;
+}
+
+const GroupedPillButtons: React.FC<GroupedPillButtonsProps> = ({
+    buttons,
+    colors,
+    gap = 8,
+}) => {
+    const getButtonStyle = (button: ButtonConfig, index: number, totalButtons: number) => {
+        const baseStyle = {
+            flexDirection: 'row' as const,
+            alignItems: 'center' as const,
+            paddingVertical: 6,
+            paddingHorizontal: 12,
+            gap: 6,
+            minWidth: 70,
+            borderWidth: 1,
+            shadowOffset: {
+                width: 0,
+                height: 2,
+            },
+            shadowOpacity: 0.1,
+            shadowRadius: 4,
+            elevation: 2,
+        };
+
+        // Determine border radius based on position
+        let borderRadius = {
+            borderTopLeftRadius: 35,
+            borderBottomLeftRadius: 35,
+            borderTopRightRadius: 35,
+            borderBottomRightRadius: 35,
+        };
+
+        if (totalButtons > 1) {
+            if (index === 0) {
+                // First button
+                borderRadius = {
+                    borderTopLeftRadius: 35,
+                    borderBottomLeftRadius: 35,
+                    borderTopRightRadius: 12,
+                    borderBottomRightRadius: 12,
+                };
+            } else if (index === totalButtons - 1) {
+                // Last button
+                borderRadius = {
+                    borderTopLeftRadius: 12,
+                    borderBottomLeftRadius: 12,
+                    borderTopRightRadius: 35,
+                    borderBottomRightRadius: 35,
+                };
+            } else {
+                // Middle button (if 3 buttons)
+                borderRadius = {
+                    borderTopLeftRadius: 12,
+                    borderBottomLeftRadius: 12,
+                    borderTopRightRadius: 12,
+                    borderBottomRightRadius: 12,
+                };
+            }
+        }
+
+        // Determine colors based on variant
+        let backgroundColor = 'transparent';
+        let borderColor = colors.border;
+        let shadowColor = colors.border;
+        let textColor = colors.text;
+
+        switch (button.variant) {
+            case 'primary':
+                backgroundColor = colors.primary;
+                borderColor = colors.primary;
+                shadowColor = colors.primary;
+                textColor = '#FFFFFF';
+                break;
+            case 'secondary':
+                backgroundColor = colors.secondary || colors.primary;
+                borderColor = colors.secondary || colors.primary;
+                shadowColor = colors.secondary || colors.primary;
+                textColor = '#FFFFFF';
+                break;
+            case 'transparent':
+            default:
+                backgroundColor = 'transparent';
+                borderColor = colors.border;
+                shadowColor = colors.border;
+                textColor = colors.text;
+                break;
+        }
+
+        return {
+            ...baseStyle,
+            ...borderRadius,
+            backgroundColor,
+            borderColor,
+            shadowColor,
+        };
+    };
+
+    const getTextStyle = (button: ButtonConfig, colors: any) => {
+        const baseTextStyle = {
+            fontSize: 15,
+            fontWeight: '600' as const,
+            flex: 1,
+        };
+
+        let textColor = colors.text;
+        switch (button.variant) {
+            case 'primary':
+            case 'secondary':
+                textColor = '#FFFFFF';
+                break;
+            case 'transparent':
+            default:
+                textColor = colors.text;
+                break;
+        }
+
+        return {
+            ...baseTextStyle,
+            color: textColor,
+        };
+    };
+
+    const getIconColor = (button: ButtonConfig, colors: any) => {
+        switch (button.variant) {
+            case 'primary':
+            case 'secondary':
+                return '#FFFFFF';
+            case 'transparent':
+            default:
+                return colors.text;
+        }
+    };
+
+    const isBackButton = (button: ButtonConfig) => {
+        return button.text.toLowerCase().includes('back') ||
+            button.icon === 'arrow-back' ||
+            button.icon === 'chevron-back';
+    };
+
+    const renderButtonContent = (button: ButtonConfig, colors: any, index: number) => {
+        const iconColor = getIconColor(button, colors);
+        const isBack = isBackButton(button);
+        const isFirstButton = index === 0;
+        const isSingleButton = buttons.length === 1;
+
+        if (button.loading) {
+            return (
+                <ActivityIndicator
+                    color={iconColor}
+                    size="small"
+                />
+            );
+        }
+
+        // Auto-detect icon placement based on button order and type
+        if (isSingleButton) {
+            // Single button: icon on right
+            return (
+                <>
+                    <Text style={getTextStyle(button, colors)}>
+                        {button.text}
+                    </Text>
+                    {button.icon && (
+                        <Ionicons
+                            name={button.icon as any}
+                            size={16}
+                            color={iconColor}
+                        />
+                    )}
+                </>
+            );
+        } else if (isFirstButton || isBack) {
+            // First button or back button: icon on left, text on right
+            return (
+                <>
+                    {button.icon && (
+                        <Ionicons
+                            name={button.icon as any}
+                            size={16}
+                            color={iconColor}
+                        />
+                    )}
+                    <Text style={getTextStyle(button, colors)}>
+                        {button.text}
+                    </Text>
+                </>
+            );
+        } else {
+            // Second button or forward/action button: text on left, icon on right
+            return (
+                <>
+                    <Text style={getTextStyle(button, colors)}>
+                        {button.text}
+                    </Text>
+                    {button.icon && (
+                        <Ionicons
+                            name={button.icon as any}
+                            size={16}
+                            color={iconColor}
+                        />
+                    )}
+                </>
+            );
+        }
+    };
+
+    return (
+        <View style={[styles.container, { gap }]}>
+            {buttons.map((button, index) => (
+                <TouchableOpacity
+                    key={index}
+                    style={getButtonStyle(button, index, buttons.length)}
+                    onPress={button.onPress}
+                    disabled={button.disabled || button.loading}
+                    testID={button.testID}
+                >
+                    {renderButtonContent(button, colors, index)}
+                </TouchableOpacity>
+            ))}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        marginTop: 16,
+        marginBottom: 8,
+        width: '100%',
+    },
+});
+
+export default GroupedPillButtons;