@oxyhq/services 5.5.8 → 5.6.0

package/src/ui/components/FollowButton.tsx

@@ -17,116 +17,23 @@ import Animated, {
   Easing,
   withTiming
 } from 'react-native-reanimated';
-import { useDispatch, useSelector } from 'react-redux';
 import { useOxy } from '../context/OxyContext';
 import { fontFamilies } from '../styles/fonts';
 import { toast } from '../../lib/sonner';
-import {
-  toggleFollowUser,
-  setFollowingStatus,
-  clearFollowError,
-  fetchFollowStatus
-} from '../store';
-import type { RootState, AppDispatch } from '../store';
+import { useFollow } from '../hooks/useFollow';
 
 export interface FollowButtonProps {
-  /**
-   * The user ID to follow/unfollow
-   */
   userId: string;
-
-  /**
-   * Initial follow state, if known
-   * @default false 
-   */
   initiallyFollowing?: boolean;
-
-  /**
-   * Button size
-   * @default 'medium'
-   */
   size?: 'small' | 'medium' | 'large';
-
-  /**
-   * Custom callback when follow/unfollow action happens
-   */
   onFollowChange?: (isFollowing: boolean) => void;
-
-  /**
-   * Additional styles for the button container
-   */
   style?: StyleProp<ViewStyle>;
-
-  /**
-   * Additional styles for the button text
-   */
   textStyle?: StyleProp<TextStyle>;
-
-  /**
-   * Whether to disable the button
-   * @default false
-   */
   disabled?: boolean;
-
-  /**
-   * Whether to show loading indicator during API calls
-   * @default true
-   */
   showLoadingState?: boolean;
-
-  /**
-   * Whether to prevent default action and stop event propagation
-   * Useful when the button is inside links or other pressable containers
-   * @default true
-   */
   preventParentActions?: boolean;
-
-  /**
-   * Custom onPress handler - if provided, will override default follow/unfollow behavior
-   * Event object is passed to allow for preventDefault/stopPropagation
-   */
-  onPress?: (event: any) => void;
 }
 
-/**
- * An animated follow button with interactive state changes and preventDefault support
- * Uses Redux for state management to ensure all buttons with the same user ID stay synchronized
- * 
- * @example
- * ```tsx
- * // Basic usage
- * <FollowButton userId="123" />
- * 
- * // With custom styling
- * <FollowButton 
- *   userId="123" 
- *   initiallyFollowing={true}
- *   size="large"
- *   style={{ borderRadius: 12 }}
- *   onFollowChange={(isFollowing) => console.log(`User is now ${isFollowing ? 'followed' : 'unfollowed'}`)}
- * />
- * 
- * // Inside a pressable container (prevents parent actions)
- * <TouchableOpacity onPress={() => navigateToProfile()}>
- *   <View>
- *     <Text>User Profile</Text>
- *     <FollowButton 
- *       userId="123" 
- *       preventParentActions={true} // Default: true
- *     />
- *   </View>
- * </TouchableOpacity>
- * 
- * // Custom onPress handler
- * <FollowButton 
- *   userId="123" 
- *   onPress={(event) => {
- *     event.preventDefault(); // Custom preventDefault
- *     // Custom logic here
- *   }}
- * />
- * ```
- */
 const FollowButton: React.FC<FollowButtonProps> = ({
   userId,
   initiallyFollowing = false,
@@ -137,270 +44,141 @@ const FollowButton: React.FC<FollowButtonProps> = ({
   disabled = false,
   showLoadingState = true,
   preventParentActions = true,
-  onPress,
 }) => {
-  const dispatch = useDispatch();
   const { oxyServices, isAuthenticated } = useOxy();
-
-  // Optimized single selector to prevent multiple re-renders
-  const followState = useSelector((state: RootState) => ({
-    isFollowing: state.follow.followingUsers[userId] ?? initiallyFollowing ?? false,
-    isLoading: state.follow.loadingUsers[userId] ?? false,
-    error: state.follow.errors[userId]
-  }));
-
-  // Whether the follow status has been loaded from the store
-  const isStatusKnown = useSelector((state: RootState) =>
-    Object.prototype.hasOwnProperty.call(state.follow.followingUsers, userId)
-  );
-
-  const { isFollowing, isLoading, error } = followState;
+  const {
+    isFollowing,
+    isLoading,
+    error,
+    toggleFollow,
+    setFollowStatus,
+    fetchStatus,
+    clearError,
+  } = useFollow(userId);
 
   // Animation values
   const animationProgress = useSharedValue(isFollowing ? 1 : 0);
   const scale = useSharedValue(1);
 
-  // Initialize Redux state with initial value if not already set
+  // Initialize Zustand state with initial value if not already set
   useEffect(() => {
-    if (userId && !isStatusKnown) {
-      // Set the initial state regardless of whether initiallyFollowing is defined
-      const initialState = initiallyFollowing ?? false;
-      dispatch(setFollowingStatus({ userId, isFollowing: initialState }));
+    if (userId && !isFollowing && initiallyFollowing) {
+      setFollowStatus?.(initiallyFollowing);
     }
-  }, [userId, initiallyFollowing, isStatusKnown, dispatch]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [userId, initiallyFollowing]);
 
   // Fetch latest follow status from backend on mount if authenticated
-  // This runs separately and will overwrite the initial state with actual data
   useEffect(() => {
     if (userId && isAuthenticated) {
-      dispatch(fetchFollowStatus({ userId, oxyServices }));
+      fetchStatus?.();
     }
-  }, [userId, oxyServices, isAuthenticated, dispatch]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [userId, oxyServices, isAuthenticated]);
 
-  // Update the animation value when isFollowing changes
+  // Animate button on follow/unfollow
   useEffect(() => {
-    animationProgress.value = withTiming(isFollowing ? 1 : 0, {
-      duration: 300,
-      easing: Easing.bezier(0.25, 0.1, 0.25, 1),
-    });
-  }, [isFollowing]); // Removed animationProgress from dependencies as it's stable
-
-  // Show error toast when error occurs
-  useEffect(() => {
-    if (error) {
-      toast.error(error);
-      dispatch(clearFollowError(userId));
+    animationProgress.value = withTiming(isFollowing ? 1 : 0, { duration: 300, easing: Easing.inOut(Easing.ease) });
+  }, [isFollowing, animationProgress]);
+
+  // Button press handler
+  const handlePress = useCallback(async (event: any) => {
+    if (preventParentActions && event && event.preventDefault) {
+      event.preventDefault();
+      event.stopPropagation();
     }
-  }, [error]); // Removed userId and dispatch to prevent unnecessary runs
-
-  // The button press handler with preventDefault support - memoized to prevent recreation
-  const handlePress = useCallback(async (event?: any) => {
-    // Prevent parent actions if enabled (e.g., if inside a link or pressable container)
-    if (preventParentActions && event) {
-      // For React Native Web compatibility
-      if (Platform.OS === 'web' && event.preventDefault) {
-        event.preventDefault();
-      }
-
-      // Stop event propagation to prevent parent TouchableOpacity/Pressable actions
-      if (event.stopPropagation) {
-        event.stopPropagation();
-      }
-
-      // For React Native, prevent gesture bubbling
-      if (event.nativeEvent && event.nativeEvent.stopPropagation) {
-        event.nativeEvent.stopPropagation();
-      }
-    }
-
-    // If custom onPress is provided, use it instead of default behavior
-    if (onPress) {
-      onPress(event);
-      return;
-    }
-
-    if (disabled || followState.isLoading) return;
-
-    // Check if user is authenticated - show toast instead of disabling
-    if (!isAuthenticated) {
-      toast.error('Please sign in to follow users');
-      return;
-    }
-
-    // Touch feedback animation
-    scale.value = withSpring(0.95, { damping: 10 }, () => {
-      scale.value = withSpring(1);
-    });
-
+    if (disabled || isLoading) return;
     try {
-      // Dispatch the async action to follow/unfollow
-      const result = await dispatch(toggleFollowUser({
-        userId,
-        oxyServices,
-        isCurrentlyFollowing: followState.isFollowing
-      })).unwrap();
-
-      // Call the callback if provided
-      if (onFollowChange) {
-        onFollowChange(result.isFollowing);
-      }
-
-      // Show success toast
-      toast.success(result.isFollowing ? 'Following user!' : 'Unfollowed user');
-    } catch (error: any) {
-      console.error('Follow action failed:', error);
-
-      // Show user-friendly error messages for state mismatches
-      const errorMessage = error?.toString() || 'Unknown error';
-      if (errorMessage.includes('State synced with backend')) {
-        toast.info('Status updated. Please try again.');
-      } else {
-        toast.error(`Failed to ${followState.isFollowing ? 'unfollow' : 'follow'} user. Please try again.`);
-      }
-    }
-  }, [
-    preventParentActions,
-    onPress,
-    disabled,
-    followState.isLoading,
-    followState.isFollowing,
-    isAuthenticated,
-    scale,
-    dispatch,
-    userId,
-    oxyServices,
-    onFollowChange
-  ]);
-
-  // Animated styles for the button
-  const animatedButtonStyle = useAnimatedStyle(() => {
-    const backgroundColor = interpolateColor(
-      animationProgress.value,
-      [0, 1],
-      ['#d169e5', '#FFFFFF']
-    );
-
-    const borderColor = interpolateColor(
-      animationProgress.value,
-      [0, 1],
-      ['#d169e5', '#d169e5']
-    );
-
-    // Add a slight scaling effect during the transition
-    const transitionScale = 1 + 0.05 * Math.sin(animationProgress.value * Math.PI);
-
-    return {
-      backgroundColor,
-      borderColor,
-      borderWidth: 1,
-      transform: [
-        { scale: scale.value * transitionScale },
-      ],
-    };
-  });
-
-  // Animated styles for the text
-  const animatedTextStyle = useAnimatedStyle(() => {
-    const color = interpolateColor(
-      animationProgress.value,
-      [0, 1],
-      ['#FFFFFF', '#d169e5']
-    );
-
-    return {
-      color,
-    };
-  });
-
-  // Get size-specific styles
-  const getSizeStyles = () => {
-    switch (size) {
-      case 'small':
-        return {
-          button: {
-            paddingVertical: 6,
-            paddingHorizontal: 12,
-          } as ViewStyle,
-          text: {
-            fontSize: 12,
-          } as TextStyle,
-        };
-      case 'large':
-        return {
-          button: {
-            paddingVertical: 12,
-            paddingHorizontal: 24,
-          } as ViewStyle,
-          text: {
-            fontSize: 18,
-          } as TextStyle,
-        };
-      default: // medium
-        return {
-          button: {
-            paddingVertical: 8,
-            paddingHorizontal: 16,
-          } as ViewStyle,
-          text: {
-            fontSize: 14,
-          } as TextStyle,
-        };
+      await toggleFollow?.();
+      if (onFollowChange) onFollowChange(!isFollowing);
+    } catch (err: any) {
+      toast.error(err?.message || 'Failed to update follow status');
     }
+  }, [disabled, isLoading, toggleFollow, onFollowChange, isFollowing, preventParentActions]);
+
+  // Button styles
+  const getButtonStyle = (): StyleProp<ViewStyle> => {
+    let baseStyle = styles.buttonMedium;
+    if (size === 'small') baseStyle = styles.buttonSmall;
+    if (size === 'large') baseStyle = styles.buttonLarge;
+    return [baseStyle, isFollowing ? styles.following : styles.notFollowing, style];
   };
 
-  const sizeStyles = getSizeStyles();
+  const getTextStyle = (): StyleProp<TextStyle> => {
+    let baseStyle = styles.textMedium;
+    if (size === 'small') baseStyle = styles.textSmall;
+    if (size === 'large') baseStyle = styles.textLarge;
+    return [baseStyle, isFollowing ? styles.textFollowing : styles.textNotFollowing, textStyle];
+  };
 
   return (
     <TouchableOpacity
-      activeOpacity={0.8}
+      style={getButtonStyle()}
       onPress={handlePress}
       disabled={disabled || isLoading}
+      activeOpacity={0.8}
     >
-      <Animated.View
-        style={[
-          styles.button,
-          sizeStyles.button,
-          animatedButtonStyle,
-          style,
-        ]}
-      >
-        {isLoading && showLoadingState ? (
-          <ActivityIndicator
-            size="small"
-            color={isFollowing ? '#d169e5' : '#FFFFFF'}
-          />
-        ) : (
-          <Animated.Text
-            style={[
-              styles.text,
-              sizeStyles.text,
-              animatedTextStyle,
-              textStyle,
-            ]}
-          >
-            {isFollowing ? 'Following' : 'Follow'}
-          </Animated.Text>
-        )}
-      </Animated.View>
+      {showLoadingState && isLoading ? (
+        <ActivityIndicator size={size === 'small' ? 'small' : 'large'} color={isFollowing ? '#fff' : '#007AFF'} />
+      ) : (
+        <Text style={getTextStyle()}>{isFollowing ? 'Following' : 'Follow'}</Text>
+      )}
     </TouchableOpacity>
   );
 };
 
 const styles = StyleSheet.create({
-  button: {
+  buttonSmall: {
+    paddingVertical: 4,
+    paddingHorizontal: 12,
+    borderRadius: 16,
+    minWidth: 60,
+    alignItems: 'center',
     justifyContent: 'center',
+  },
+  buttonMedium: {
+    paddingVertical: 8,
+    paddingHorizontal: 20,
+    borderRadius: 20,
+    minWidth: 90,
     alignItems: 'center',
-    flexDirection: 'row',
-    borderRadius: 100,
+    justifyContent: 'center',
+  },
+  buttonLarge: {
+    paddingVertical: 12,
+    paddingHorizontal: 32,
+    borderRadius: 24,
+    minWidth: 120,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  following: {
+    backgroundColor: '#007AFF',
+  },
+  notFollowing: {
+    backgroundColor: '#fff',
+    borderWidth: 1,
+    borderColor: '#007AFF',
+  },
+  textSmall: {
+    fontSize: 13,
+    fontFamily: fontFamilies.phuduMedium,
+  },
+  textMedium: {
+    fontSize: 15,
+    fontFamily: fontFamilies.phuduMedium,
+  },
+  textLarge: {
+    fontSize: 18,
+    fontFamily: fontFamilies.phuduMedium,
+  },
+  textFollowing: {
+    color: '#fff',
   },
-  text: {
-    fontFamily: Platform.select({
-      web: 'Phudu',
-      default: fontFamilies.phuduSemiBold,
-    }),
-    fontWeight: Platform.OS === 'web' ? '600' : undefined,
-    textAlign: 'center',
+  textNotFollowing: {
+    color: '#007AFF',
   },
 });
 
+export { FollowButton };
 export default FollowButton;

package/src/ui/components/OxyPayButton.tsx

@@ -0,0 +1,133 @@
+import React, { useState } from 'react';
+import { TouchableOpacity, Text, View, StyleSheet, ViewStyle, TextStyle, StyleProp, LayoutChangeEvent } from 'react-native';
+import { fontFamilies } from '../styles/fonts';
+import { useOxy } from '../context/OxyContext';
+import type { PaymentItem } from '../screens/PaymentGatewayScreen';
+import OxyLogo from './OxyLogo';
+
+export interface OxyPayButtonProps {
+    style?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+    text?: string;
+    disabled?: boolean;
+    amount: number | string;
+    currency?: string;
+    paymentItems?: PaymentItem[];
+    description?: string;
+    onPaymentResult?: (result: any) => void;
+    /**
+     * Button background color. If not provided, uses variant ('white' or 'black').
+     */
+    color?: string;
+    /**
+     * Button color variant: 'white' (default) or 'black'. Ignored if color is set.
+     */
+    variant?: 'white' | 'black';
+}
+
+/**
+ * A pre-styled button for OxyPay payments that opens the Payment Gateway
+ * - Only black or white by default, but can be customized with the color prop.
+ */
+const OxyPayButton: React.FC<OxyPayButtonProps> = ({
+    style,
+    textStyle,
+    text = 'Pay',
+    disabled = false,
+    amount,
+    currency = 'FAIR',
+    paymentItems,
+    description,
+    onPaymentResult,
+    color,
+    variant = 'white',
+}) => {
+    const { showBottomSheet } = useOxy();
+    const [buttonHeight, setButtonHeight] = useState<number>(52);
+    const handlePress = () => {
+        showBottomSheet?.({
+            screen: 'PaymentGateway',
+            props: {
+                amount,
+                currency,
+                paymentItems,
+                description,
+                onPaymentResult,
+            },
+        });
+    };
+    // Determine background and text color
+    const backgroundColor = color || (variant === 'black' ? '#111' : '#fff');
+    const textColor = variant === 'black' || (color && isColorDark(color)) ? '#fff' : '#1b1f0a';
+    // Responsive sizing
+    const logoWidth = Math.round(buttonHeight * 0.5); // 50% of button height
+    const logoHeight = Math.round(buttonHeight * 0.25); // 25% of button height
+    const fontSize = Math.round(buttonHeight * 0.35); // 35% of button height
+    const handleLayout = (e: LayoutChangeEvent) => {
+        const h = e.nativeEvent.layout.height;
+        if (h && Math.abs(h - buttonHeight) > 1) setButtonHeight(h);
+    };
+    return (
+        <TouchableOpacity
+            style={[styles.button, { backgroundColor, borderColor: textColor, borderWidth: 1 }, disabled && styles.buttonDisabled, style]}
+            onPress={handlePress}
+            disabled={disabled}
+            activeOpacity={0.85}
+            onLayout={handleLayout}
+        >
+            <View style={styles.buttonContent}>
+                <OxyLogo
+                    width={logoWidth}
+                    height={logoHeight}
+                    style={{ marginRight: logoWidth * 0.12, marginTop: (fontSize - logoHeight) / 2 }}
+                    fillColor={textColor}
+                />
+                <Text style={[styles.text, { color: textColor, fontSize }, textStyle]}>{text}</Text>
+            </View>
+        </TouchableOpacity>
+    );
+};
+
+// Helper to determine if a color is dark (simple luminance check)
+function isColorDark(hex: string) {
+    let c = hex.replace('#', '');
+    if (c.length === 3) c = c.split('').map(x => x + x).join('');
+    if (c.length !== 6) return false;
+    const r = parseInt(c.substr(0, 2), 16);
+    const g = parseInt(c.substr(2, 2), 16);
+    const b = parseInt(c.substr(4, 2), 16);
+    // Perceived luminance
+    return (0.299 * r + 0.587 * g + 0.114 * b) < 150;
+}
+
+const styles = StyleSheet.create({
+    button: {
+        padding: 14,
+        borderRadius: 35,
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexDirection: 'row',
+        minHeight: 52,
+    },
+    buttonDisabled: {
+        opacity: 0.6,
+    },
+    buttonContent: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    oxyLogo: {
+        // marginRight is set dynamically
+    },
+    centeredItem: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    text: {
+        fontFamily: fontFamilies.phudu,
+        fontWeight: '700',
+    },
+});
+
+export default OxyPayButton;