@oxyhq/services 5.13.40 → 5.15.0

package/src/ui/components/IconButton/IconButton.tsx

@@ -0,0 +1,235 @@
+import * as React from 'react';
+import {
+  GestureResponderEvent,
+  StyleProp,
+  StyleSheet,
+  ViewStyle,
+  View,
+  Animated,
+  ColorValue,
+} from 'react-native';
+
+import { getIconButtonColor } from './utils';
+import { useInternalTheme } from '../theming';
+import type { $RemoveChildren, ThemeProp } from "../types";
+import { forwardRef } from '../utils/forwardRef';
+import ActivityIndicator from '../ActivityIndicator';
+import CrossFadeIcon from '../CrossFadeIcon';
+import Icon, { IconSource } from '../Icon';
+import Surface from '../Surface';
+import TouchableRipple from '../TouchableRipple/TouchableRipple';
+
+const PADDING = 8;
+
+type IconButtonMode = 'outlined' | 'contained' | 'contained-tonal';
+
+export type Props = Omit<$RemoveChildren<typeof TouchableRipple>, 'style'> & {
+  /**
+   * Icon to display.
+   */
+  icon: IconSource;
+  /**
+   * @supported Available in v5.x with theme version 3
+   * Mode of the icon button. By default there is no specified mode - only pressable icon will be rendered.
+   */
+  mode?: IconButtonMode;
+  /**
+   * @renamed Renamed from 'color' to 'iconColor' in v5.x
+   * Color of the icon.
+   */
+  iconColor?: string;
+  /**
+   * Background color of the icon container.
+   */
+  containerColor?: string;
+  /**
+   * Color of the ripple effect.
+   */
+  rippleColor?: ColorValue;
+  /**
+   * @supported Available in v5.x with theme version 3
+   * Whether icon button is selected. A selected button receives alternative combination of icon and container colors.
+   */
+  selected?: boolean;
+  /**
+   * Size of the icon.
+   */
+  size?: number;
+  /**
+   * Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch.
+   */
+  disabled?: boolean;
+  /**
+   * Whether an icon change is animated.
+   */
+  animated?: boolean;
+  /**
+   * Accessibility label for the button. This is read by the screen reader when the user taps the button.
+   */
+  accessibilityLabel?: string;
+  /**
+   * Style of button's inner content.
+   * Use this prop to apply custom height and width or to set a custom padding`.
+   */
+  contentStyle?: StyleProp<ViewStyle>;
+  /**
+   * Function to execute on press.
+   */
+  onPress?: (e: GestureResponderEvent) => void;
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  ref?: React.RefObject<View>;
+  /**
+   * TestID used for testing purposes
+   */
+  testID?: string;
+  /**
+   * @optional
+   */
+  theme?: ThemeProp;
+  /**
+   * Whether to show a loading indicator.
+   */
+  loading?: boolean;
+};
+
+/**
+ * An icon button is a button which displays only an icon without a label.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { IconButton, MD3Colors } from 'react-native-paper';
+ *
+ * const MyComponent = () => (
+ *   <IconButton
+ *     icon="camera"
+ *     iconColor={MD3Colors.error50}
+ *     size={20}
+ *     onPress={() => console.log('Pressed')}
+ *   />
+ * );
+ *
+ * export default MyComponent;
+ * ```
+ *
+ * @extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple
+ */
+const IconButton = forwardRef<View, Props>(
+  (
+    {
+      icon,
+      iconColor: customIconColor,
+      containerColor: customContainerColor,
+      rippleColor: customRippleColor,
+      size = 24,
+      accessibilityLabel,
+      disabled,
+      onPress,
+      selected = false,
+      animated = false,
+      mode,
+      style,
+      theme: themeOverrides,
+      testID = 'icon-button',
+      loading = false,
+      contentStyle,
+      ...rest
+    }: Props,
+    ref
+  ) => {
+    const theme = useInternalTheme(themeOverrides);
+    const { isV3 } = theme;
+
+    const IconComponent = animated ? CrossFadeIcon : Icon;
+
+    const { iconColor, rippleColor, backgroundColor, borderColor } =
+      getIconButtonColor({
+        theme,
+        disabled,
+        selected,
+        mode,
+        customIconColor,
+        customContainerColor,
+        customRippleColor,
+      });
+
+    const buttonSize = isV3 ? size + 2 * PADDING : size * 1.5;
+
+    const {
+      borderWidth = isV3 && mode === 'outlined' && !selected ? 1 : 0,
+      borderRadius = buttonSize / 2,
+    } = (StyleSheet.flatten(style) || {}) as ViewStyle;
+
+    const borderStyles = {
+      borderWidth,
+      borderRadius,
+      borderColor,
+    };
+
+    return (
+      <Surface
+        ref={ref}
+        testID={`${testID}-container`}
+        style={[
+          {
+            backgroundColor,
+            width: buttonSize,
+            height: buttonSize,
+          },
+          styles.container,
+          borderStyles,
+          !isV3 && disabled && styles.disabled,
+          style,
+        ]}
+        container
+        {...(isV3 && { elevation: 0 })}
+      >
+        <TouchableRipple
+          borderless
+          centered
+          onPress={onPress}
+          rippleColor={rippleColor}
+          accessibilityLabel={accessibilityLabel}
+          style={[styles.touchable, contentStyle]}
+          // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
+          accessibilityTraits={disabled ? ['button', 'disabled'] : 'button'}
+          accessibilityComponentType="button"
+          accessibilityRole="button"
+          accessibilityState={{ disabled }}
+          disabled={disabled}
+          hitSlop={
+            TouchableRipple.supported
+              ? { top: 10, left: 10, bottom: 10, right: 10 }
+              : { top: 6, left: 6, bottom: 6, right: 6 }
+          }
+          testID={testID}
+          {...rest}
+        >
+          {loading ? (
+            <ActivityIndicator size={size} color={iconColor} />
+          ) : (
+            <IconComponent color={iconColor} source={icon} size={size} />
+          )}
+        </TouchableRipple>
+      </Surface>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+    margin: 6,
+    elevation: 0,
+  },
+  touchable: {
+    flexGrow: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  disabled: {
+    opacity: 0.32,
+  },
+});
+
+export default IconButton;

package/src/ui/components/IconButton/utils.ts

@@ -0,0 +1,190 @@
+import type { ColorValue } from 'react-native';
+
+import color from 'color';
+
+import type { InternalTheme } from "../types";
+
+type IconButtonMode = 'outlined' | 'contained' | 'contained-tonal';
+
+type BaseProps = {
+  theme: InternalTheme;
+  isMode: (mode: IconButtonMode) => boolean;
+  disabled?: boolean;
+  selected?: boolean;
+};
+
+const getBorderColor = ({
+  theme,
+  disabled,
+}: {
+  theme: InternalTheme;
+  disabled?: boolean;
+}) => {
+  if (theme.isV3) {
+    if (disabled) {
+      return theme.colors.surfaceDisabled;
+    }
+
+    return theme.colors.outline;
+  }
+
+  return undefined;
+};
+
+const getBackgroundColor = ({
+  theme,
+  isMode,
+  disabled,
+  selected,
+  customContainerColor,
+}: BaseProps & { customContainerColor?: string }) => {
+  if (theme.isV3) {
+    if (disabled) {
+      if (isMode('contained') || isMode('contained-tonal')) {
+        return theme.colors.surfaceDisabled;
+      }
+    }
+
+    if (typeof customContainerColor !== 'undefined') {
+      return customContainerColor;
+    }
+
+    if (isMode('contained')) {
+      if (selected) {
+        return theme.colors.primary;
+      }
+      return theme.colors.surfaceVariant;
+    }
+
+    if (isMode('contained-tonal')) {
+      if (selected) {
+        return theme.colors.secondaryContainer;
+      }
+      return theme.colors.surfaceVariant;
+    }
+
+    if (isMode('outlined')) {
+      if (selected) {
+        return theme.colors.inverseSurface;
+      }
+    }
+  }
+
+  if (typeof customContainerColor !== 'undefined') {
+    return customContainerColor;
+  }
+
+  return undefined;
+};
+
+const getIconColor = ({
+  theme,
+  isMode,
+  disabled,
+  selected,
+  customIconColor,
+}: BaseProps & { customIconColor?: string }) => {
+  if (theme.isV3) {
+    if (disabled) {
+      return theme.colors.onSurfaceDisabled;
+    }
+
+    if (typeof customIconColor !== 'undefined') {
+      return customIconColor;
+    }
+
+    if (isMode('contained')) {
+      if (selected) {
+        return theme.colors.onPrimary;
+      }
+      return theme.colors.primary;
+    }
+
+    if (isMode('contained-tonal')) {
+      if (selected) {
+        return theme.colors.onSecondaryContainer;
+      }
+      return theme.colors.onSurfaceVariant;
+    }
+
+    if (isMode('outlined')) {
+      if (selected) {
+        return theme.colors.inverseOnSurface;
+      }
+      return theme.colors.onSurfaceVariant;
+    }
+
+    if (selected) {
+      return theme.colors.primary;
+    }
+    return theme.colors.onSurfaceVariant;
+  }
+
+  if (typeof customIconColor !== 'undefined') {
+    return customIconColor;
+  }
+
+  return theme.colors.text || theme.colors.onSurface;
+};
+
+const getRippleColor = ({
+  theme,
+  iconColor,
+  customRippleColor,
+}: {
+  theme: InternalTheme;
+  iconColor: string;
+  customRippleColor?: ColorValue;
+}) => {
+  if (customRippleColor) {
+    return customRippleColor;
+  }
+  if (theme.isV3) {
+    return color(iconColor).alpha(0.12).rgb().string();
+  }
+  return color(iconColor).alpha(0.32).rgb().string();
+};
+
+export const getIconButtonColor = ({
+  theme,
+  disabled,
+  mode,
+  selected,
+  customIconColor,
+  customContainerColor,
+  customRippleColor,
+}: {
+  theme: InternalTheme;
+  disabled?: boolean;
+  selected?: boolean;
+  mode?: IconButtonMode;
+  customIconColor?: string;
+  customContainerColor?: string;
+  customRippleColor?: ColorValue;
+}) => {
+  const isMode = (modeToCompare: IconButtonMode) => {
+    return mode === modeToCompare;
+  };
+
+  const baseIconColorProps = {
+    theme,
+    isMode,
+    disabled,
+    selected,
+  };
+
+  const iconColor = getIconColor({
+    ...baseIconColorProps,
+    customIconColor,
+  });
+
+  return {
+    iconColor,
+    backgroundColor: getBackgroundColor({
+      ...baseIconColorProps,
+      customContainerColor,
+    }),
+    rippleColor: getRippleColor({ theme, iconColor, customRippleColor }),
+    borderColor: getBorderColor({ theme, disabled }),
+  };
+};

package/src/ui/components/LoadingState.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { View, ActivityIndicator, Text, StyleSheet } from 'react-native';
+
+export interface LoadingStateProps {
+    message?: string;
+    color?: string;
+    size?: 'small' | 'large';
+}
+
+/**
+ * Reusable loading state component
+ * Provides consistent loading indicators across screens
+ */
+const LoadingState: React.FC<LoadingStateProps> = ({
+    message,
+    color,
+    size = 'large',
+}) => {
+    return (
+        <View style={styles.container}>
+            <ActivityIndicator size={size} color={color} />
+            {message && (
+                <Text style={[styles.message, color ? { color } : undefined]}>
+                    {message}
+                </Text>
+            )}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 40,
+        gap: 12,
+    },
+    message: {
+        marginTop: 12,
+        fontSize: 16,
+        textAlign: 'center',
+    },
+});
+
+export default React.memo(LoadingState);
+

package/src/ui/components/OxyPayButton.tsx

@@ -2,7 +2,6 @@ import type React from 'react';
 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, PaymentGatewayResult } from '../screens/PaymentGatewayScreen';
 import OxyLogo from './OxyLogo';
 
@@ -43,19 +42,9 @@ const OxyPayButton: React.FC<OxyPayButtonProps> = ({
     color,
     variant = 'white',
 }) => {
-    const { showBottomSheet } = useOxy();
     const [buttonHeight, setButtonHeight] = useState<number>(52);
     const handlePress = () => {
-        showBottomSheet?.({
-            screen: 'PaymentGateway',
-            props: {
-                amount,
-                currency,
-                paymentItems,
-                description,
-                onPaymentResult,
-            },
-        });
+        console.warn('OxyPayButton: The bottom sheet payment flow has been removed. Provide a custom onPress handler.');
     };
     // Determine background and text color
     const backgroundColor = color || (variant === 'black' ? '#111' : '#fff');