@oxyhq/services 5.17.17 → 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/components/types.tsx

@@ -55,6 +55,10 @@ export type InternalTheme = {
       level4: string;
       level5: string;
     };
+    // Legacy properties for backward compatibility
+    text?: string;
+    disabled?: string;
+    placeholder?: string;
   };
   fonts: {
     displayLarge: any;
@@ -73,6 +77,8 @@ export type InternalTheme = {
     bodyMedium: any;
     bodySmall: any;
     default: any;
+    // Legacy property for backward compatibility
+    regular?: any;
   };
 };