@oxyhq/services 5.17.18 → 5.18.0

package/src/ui/components/payment/constants.ts

@@ -0,0 +1,39 @@
+import type { PaymentMethod } from './types';
+
+export const PAYMENT_METHODS: PaymentMethod[] = [
+    { key: 'card', label: 'Credit/Debit Card', icon: 'card-outline', description: 'Pay securely with your credit or debit card.' },
+    { key: 'oxy', label: 'Oxy Pay', icon: 'wallet-outline', description: 'Use your Oxy Pay in-app balance.' },
+    { key: 'faircoin', label: 'FAIRWallet', icon: 'qr-code-outline', description: 'Pay with FairCoin by scanning a QR code.' },
+];
+
+export const CURRENCY_SYMBOLS: Record<string, string> = {
+    FAIR: '⊜',
+    INR: '₹',
+    USD: '$',
+    EUR: '€',
+    GBP: '£',
+    JPY: '¥',
+    CNY: '¥',
+    AUD: 'A$',
+    CAD: 'C$',
+};
+
+export const CURRENCY_NAMES: Record<string, string> = {
+    FAIR: 'FairCoin',
+    INR: 'Indian Rupee',
+    USD: 'US Dollar',
+    EUR: 'Euro',
+    GBP: 'British Pound',
+    JPY: 'Japanese Yen',
+    CNY: 'Chinese Yuan',
+    AUD: 'Australian Dollar',
+    CAD: 'Canadian Dollar',
+};
+
+export const getCurrencySymbol = (currency: string): string => {
+    return CURRENCY_SYMBOLS[currency.toUpperCase()] || currency;
+};
+
+export const getCurrencyName = (currency: string): string => {
+    return CURRENCY_NAMES[currency.toUpperCase()] || currency;
+};

package/src/ui/components/payment/index.ts

@@ -0,0 +1,9 @@
+export { default as PaymentSummaryStep } from './PaymentSummaryStep';
+export { default as PaymentMethodStep } from './PaymentMethodStep';
+export { default as PaymentDetailsStep } from './PaymentDetailsStep';
+export { default as PaymentReviewStep } from './PaymentReviewStep';
+export { default as PaymentSuccessStep } from './PaymentSuccessStep';
+
+export { createPaymentStyles } from './paymentStyles';
+export { PAYMENT_METHODS, CURRENCY_SYMBOLS, CURRENCY_NAMES, getCurrencySymbol, getCurrencyName } from './constants';
+export type { PaymentItem, PaymentGatewayResult, CardDetails, PaymentMethod, PaymentStepAnimations, PaymentColors } from './types';

package/src/ui/components/payment/paymentStyles.ts

@@ -0,0 +1,397 @@
+import { StyleSheet, Platform } from 'react-native';
+import { fontFamilies } from '../../styles';
+import type { PaymentColors } from './types';
+
+export const createPaymentStyles = (colors: PaymentColors) => StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    content: {
+        flex: 1,
+        padding: 16,
+    },
+    stepContainer: {
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
+        width: '100%',
+    },
+    section: {
+        marginBottom: 24,
+        width: '100%',
+    },
+    sectionTitle: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: colors.text,
+        marginBottom: 12,
+        fontFamily: fontFamilies.phuduSemiBold,
+    },
+    errorContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 32,
+    },
+    errorText: {
+        fontSize: 18,
+        color: 'red',
+        marginBottom: 24,
+    },
+    // Summary card styles
+    summaryCard: {
+        backgroundColor: '#fff',
+        borderRadius: 16,
+        padding: 24,
+        marginBottom: 24,
+        alignItems: 'center',
+        width: '100%',
+    },
+    summaryCardContent: {
+        alignItems: 'center',
+        width: '100%',
+    },
+    summaryCardIcon: {
+        marginBottom: 8,
+    },
+    summaryCardMainTitle: {
+        fontFamily: fontFamilies.phuduBold,
+        fontWeight: 'bold',
+        fontSize: 28,
+        color: colors.text,
+        marginBottom: 2,
+        textAlign: 'center',
+        letterSpacing: 0.5,
+    },
+    summaryCardSubtitle: {
+        fontSize: 16,
+        color: colors.secondaryText,
+        textAlign: 'center',
+        marginBottom: 24,
+        width: '100%',
+    },
+    summaryCardItems: {
+        width: '100%',
+        marginBottom: 16,
+    },
+    summaryItemPrice: {
+        color: colors.text,
+        fontWeight: '600',
+        fontSize: 16,
+    },
+    summaryCardAmount: {
+        alignItems: 'center',
+        width: '100%',
+        marginBottom: 16,
+    },
+    summaryCardAmountLabel: {
+        fontSize: 16,
+        color: colors.secondaryText,
+        textAlign: 'center',
+        marginBottom: 8,
+    },
+    summaryCardAmountValue: {
+        fontSize: 32,
+        fontWeight: 'bold',
+        color: colors.text,
+        textAlign: 'center',
+        marginBottom: 8,
+        fontFamily: fontFamilies.phuduBold,
+    },
+    summaryCardAmountDescription: {
+        fontSize: 14,
+        color: colors.secondaryText,
+        textAlign: 'center',
+        lineHeight: 20,
+    },
+    summaryCardDivider: {
+        height: 1,
+        backgroundColor: colors.border,
+        marginVertical: 16,
+        width: '100%',
+    },
+    summaryCardTotalSection: {
+        width: '100%',
+        marginBottom: 8,
+    },
+    summaryCardTotalRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingVertical: 4,
+    },
+    summaryCardTotalLabel: {
+        fontSize: 16,
+        color: colors.secondaryText,
+        fontWeight: '500',
+    },
+    summaryCardTotalValue: {
+        fontSize: 16,
+        color: colors.text,
+        fontWeight: '600',
+    },
+    // Card payment styles
+    cardPaymentCard: {
+        backgroundColor: '#fff',
+        borderRadius: 16,
+        padding: 24,
+        marginBottom: 24,
+        alignItems: 'center',
+        width: '100%',
+    },
+    cardPaymentContent: {
+        alignItems: 'center',
+        width: '100%',
+    },
+    cardPaymentIcon: {
+        marginBottom: 8,
+    },
+    cardPaymentMainTitle: {
+        fontFamily: fontFamilies.phuduBold,
+        fontWeight: 'bold',
+        fontSize: 28,
+        color: colors.text,
+        marginBottom: 2,
+        textAlign: 'center',
+        letterSpacing: 0.5,
+    },
+    cardPaymentSubtitle: {
+        fontSize: 16,
+        color: colors.secondaryText,
+        textAlign: 'center',
+        marginBottom: 24,
+        width: '100%',
+    },
+    cardPaymentFields: {
+        width: '100%',
+        marginBottom: 16,
+    },
+    cardPaymentWaiting: {
+        fontSize: 14,
+        color: colors.secondaryText,
+        textAlign: 'center',
+        marginBottom: 8,
+    },
+    cardRowInfo: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 16,
+    },
+    cardRowIcon: {
+        marginRight: 8,
+    },
+    cardRowText: {
+        fontSize: 15,
+        color: colors.secondaryText,
+    },
+    cardFieldContainer: {
+        marginBottom: 16,
+    },
+    cardFieldRow: {
+        flexDirection: 'row',
+        gap: 12,
+    },
+    cardFieldHalfLeft: {
+        flex: 1,
+        marginRight: 6,
+    },
+    cardFieldHalfRight: {
+        flex: 1,
+        marginLeft: 6,
+    },
+    // Oxy Pay styles
+    oxyPayCard: {
+        backgroundColor: '#fff',
+        borderRadius: 16,
+        padding: 24,
+        marginBottom: 24,
+        alignItems: 'center',
+        width: '100%',
+    },
+    oxyPayContent: {
+        alignItems: 'center',
+        width: '100%',
+    },
+    oxyPayIcon: {
+        marginBottom: 8,
+    },
+    oxyPayMainTitle: {
+        fontFamily: fontFamilies.phuduBold,
+        fontWeight: 'bold',
+        fontSize: 28,
+        color: colors.text,
+        marginBottom: 2,
+        textAlign: 'center',
+        letterSpacing: 0.5,
+    },
+    oxyPaySubtitle: {
+        fontSize: 16,
+        color: colors.secondaryText,
+        textAlign: 'center',
+        marginBottom: 8,
+    },
+    oxyPayBalanceBox: {
+        backgroundColor: colors.primary + '22',
+        borderRadius: 12,
+        padding: 8,
+        marginTop: 8,
+    },
+    oxyPayBalanceText: {
+        color: colors.primary,
+        fontWeight: '600',
+    },
+    oxyPayWaiting: {
+        fontSize: 14,
+        color: colors.secondaryText,
+        textAlign: 'center',
+        marginBottom: 8,
+    },
+    // FairCoin styles
+    faircoinCard: {
+        backgroundColor: '#fff',
+        borderRadius: 16,
+        padding: 24,
+        marginBottom: 24,
+        alignItems: 'center',
+        width: '100%',
+    },
+    faircoinContent: {
+        alignItems: 'center',
+        width: '100%',
+    },
+    faircoinIcon: {
+        marginBottom: 8,
+    },
+    faircoinMainTitle: {
+        fontFamily: fontFamilies.phuduBold,
+        fontWeight: 'bold',
+        fontSize: 28,
+        color: '#1b1f0a',
+        marginBottom: 2,
+        textAlign: 'center',
+        letterSpacing: 0.5,
+    },
+    faircoinSubtitle: {
+        color: '#1b1f0a',
+        fontWeight: '700',
+        fontSize: 17,
+        marginBottom: 18,
+        textAlign: 'center',
+        letterSpacing: 0.2,
+    },
+    faircoinScanText: {
+        color: '#1b1f0a',
+        fontWeight: '600',
+        fontSize: 15,
+        marginBottom: 8,
+    },
+    faircoinQRCard: {
+        width: 200,
+        height: 200,
+        backgroundColor: '#fff',
+        borderRadius: 32,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginBottom: 16,
+        padding: 16,
+        borderWidth: 3,
+        borderColor: '#9ffb50',
+        shadowColor: '#9ffb50',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.25,
+        shadowRadius: 12,
+        elevation: 8,
+        position: 'relative',
+    },
+    faircoinQRBadge: {
+        position: 'absolute',
+        bottom: 12,
+        right: 12,
+        backgroundColor: '#fff',
+        borderRadius: 16,
+        padding: 4,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+        elevation: 2,
+    },
+    faircoinTitle: {
+        fontSize: 16,
+        marginBottom: 8,
+        color: colors.text,
+        fontWeight: '600',
+        textAlign: 'center',
+    },
+    faircoinAddress: {
+        color: colors.secondaryText,
+        fontSize: 13,
+        textAlign: 'center',
+        marginTop: 6,
+        marginBottom: 2,
+    },
+    faircoinButton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        alignSelf: 'center',
+        backgroundColor: colors.primary + '11',
+        borderRadius: 16,
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+        marginTop: 6,
+        marginBottom: 2,
+    },
+    faircoinButtonText: {
+        color: colors.primary,
+        fontWeight: '600',
+        fontSize: 15,
+    },
+    faircoinWaiting: {
+        fontSize: 14,
+        color: colors.secondaryText,
+        textAlign: 'center',
+        marginBottom: 8,
+    },
+    faircoinPlaceholder: {
+        fontSize: 13,
+        color: colors.secondaryText,
+        textAlign: 'center',
+    },
+    // Success styles
+    successCard: {
+        backgroundColor: '#fff',
+        borderRadius: 16,
+        padding: 24,
+        marginBottom: 24,
+        alignItems: 'center',
+        width: '100%',
+    },
+    successContent: {
+        alignItems: 'center',
+        width: '100%',
+    },
+    successIcon: {
+        marginBottom: 8,
+    },
+    successMainTitle: {
+        fontFamily: fontFamilies.phuduBold,
+        fontWeight: 'bold',
+        fontSize: 28,
+        color: colors.success || '#4BB543',
+        marginBottom: 2,
+        textAlign: 'center',
+        letterSpacing: 0.5,
+    },
+    successSubtitle: {
+        fontSize: 16,
+        color: colors.text,
+        textAlign: 'center',
+        marginBottom: 8,
+        width: '100%',
+    },
+    successMessage: {
+        fontSize: 14,
+        color: colors.secondaryText,
+        textAlign: 'center',
+        marginBottom: 8,
+    },
+});

package/src/ui/components/payment/types.ts

@@ -0,0 +1,45 @@
+import type { Animated } from 'react-native';
+
+export type PaymentItem = {
+    type: 'product' | 'subscription' | 'service' | 'fee' | string;
+    name: string;
+    description?: string;
+    quantity?: number;
+    period?: string;
+    price: number;
+    currency?: string;
+};
+
+export interface PaymentGatewayResult {
+    success: boolean;
+    details?: Record<string, string | number | boolean | null>;
+    error?: string;
+}
+
+export interface CardDetails {
+    number: string;
+    expiry: string;
+    cvv: string;
+}
+
+export interface PaymentMethod {
+    key: string;
+    label: string;
+    icon: string;
+    description: string;
+}
+
+export interface PaymentStepAnimations {
+    fadeAnim: Animated.Value;
+    slideAnim: Animated.Value;
+    scaleAnim: Animated.Value;
+}
+
+export interface PaymentColors {
+    primary: string;
+    text: string;
+    secondaryText: string;
+    border: string;
+    success?: string;
+    background?: string;
+}

package/src/ui/hooks/index.ts

@@ -1,4 +1,6 @@
 export { useFollow, useFollowerCounts } from './useFollow';
 export { useFileDownloadUrl, setOxyFileUrlInstance } from './useFileDownloadUrl';
 export { useThemeStyles } from './useThemeStyles';
-export { useThemeColors } from './useThemeColors';
+export { useThemeColors } from './useThemeColors';
+export { useAsyncAction, executeWithToast } from './useAsyncAction';
+export { useSettingToggle, useSettingToggles } from './useSettingToggle';

package/src/ui/hooks/useAsyncAction.ts

@@ -0,0 +1,129 @@
+import { useState, useCallback } from 'react';
+import { toast } from '../../lib/sonner';
+
+interface UseAsyncActionOptions<T> {
+    /** Function to execute */
+    action: () => Promise<T>;
+    /** Success message to display */
+    successMessage?: string;
+    /** Error message to display (or function to get message from error) */
+    errorMessage?: string | ((error: any) => string);
+    /** Callback on success */
+    onSuccess?: (result: T) => void;
+    /** Callback on error */
+    onError?: (error: any) => void;
+    /** Show loading toast */
+    showLoadingToast?: boolean;
+    /** Loading message */
+    loadingMessage?: string;
+}
+
+interface UseAsyncActionReturn<T> {
+    /** Execute the action */
+    execute: () => Promise<T | undefined>;
+    /** Whether the action is currently executing */
+    isLoading: boolean;
+    /** The last error that occurred */
+    error: Error | null;
+    /** Reset the error state */
+    resetError: () => void;
+}
+
+/**
+ * Hook for handling async actions with loading state, error handling, and toast notifications.
+ * Reduces boilerplate for common patterns like try-catch with toast feedback.
+ *
+ * @example
+ * const { execute, isLoading } = useAsyncAction({
+ *   action: () => api.saveSettings(settings),
+ *   successMessage: 'Settings saved!',
+ *   errorMessage: 'Failed to save settings',
+ * });
+ *
+ * <Button onPress={execute} disabled={isLoading}>Save</Button>
+ */
+export function useAsyncAction<T = void>(
+    options: UseAsyncActionOptions<T>
+): UseAsyncActionReturn<T> {
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<Error | null>(null);
+
+    const execute = useCallback(async (): Promise<T | undefined> => {
+        const {
+            action,
+            successMessage,
+            errorMessage,
+            onSuccess,
+            onError,
+            showLoadingToast,
+            loadingMessage,
+        } = options;
+
+        setIsLoading(true);
+        setError(null);
+
+        if (showLoadingToast && loadingMessage) {
+            toast.loading(loadingMessage);
+        }
+
+        try {
+            const result = await action();
+
+            if (successMessage) {
+                toast.success(successMessage);
+            }
+
+            onSuccess?.(result);
+            return result;
+        } catch (err: any) {
+            const message = typeof errorMessage === 'function'
+                ? errorMessage(err)
+                : errorMessage || err?.message || 'An error occurred';
+
+            toast.error(message);
+            setError(err instanceof Error ? err : new Error(message));
+            onError?.(err);
+            return undefined;
+        } finally {
+            setIsLoading(false);
+        }
+    }, [options]);
+
+    const resetError = useCallback(() => {
+        setError(null);
+    }, []);
+
+    return { execute, isLoading, error, resetError };
+}
+
+/**
+ * Simplified version that just executes an async action with toast feedback.
+ * Useful for one-off actions.
+ */
+export async function executeWithToast<T>(
+    action: () => Promise<T>,
+    options?: {
+        successMessage?: string;
+        errorMessage?: string;
+        loadingMessage?: string;
+    }
+): Promise<T | undefined> {
+    const { successMessage, errorMessage, loadingMessage } = options || {};
+
+    if (loadingMessage) {
+        toast.loading(loadingMessage);
+    }
+
+    try {
+        const result = await action();
+        if (successMessage) {
+            toast.success(successMessage);
+        }
+        return result;
+    } catch (err: any) {
+        toast.error(errorMessage || err?.message || 'An error occurred');
+        return undefined;
+    }
+}
+
+export default useAsyncAction;