@oxyhq/services 5.17.18 → 5.18.1

package/lib/module/ui/screens/PaymentGatewayScreen.js

@@ -1,119 +1,14 @@
 "use strict";
 
-import { useState, useRef, useMemo, useCallback } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, Platform, ScrollView, Animated, Linking, Clipboard, useWindowDimensions } from 'react-native';
-import { fontFamilies, useThemeColors, createCommonStyles } from '../styles';
-import { normalizeTheme } from '../utils/themeUtils';
-import GroupedPillButtons from '../components/internal/GroupedPillButtons';
-import TextField from '../components/TextField';
-import { Ionicons } from '@expo/vector-icons';
-import { FAIRWalletIcon } from '../components/icon';
-import { toast } from 'sonner';
+import React, { useState, useRef, useMemo, useCallback } from 'react';
+import { View, Text, ScrollView, Animated, Platform, useWindowDimensions } from 'react-native';
+import { useThemeColors } from "../styles/index.js";
+import { normalizeTheme } from "../utils/themeUtils.js";
+import GroupedPillButtons from "../components/internal/GroupedPillButtons.js";
+import { useThemeStyles } from "../hooks/useThemeStyles.js";
 import QRCode from 'react-native-qrcode-svg';
-import { GroupedSection } from '../components';
-import { useThemeStyles } from '../hooks/useThemeStyles';
-
-// Restrict payment methods to Card, Oxy Pay, and FairCoin (QR)
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const PAYMENT_METHODS = [{
-  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.'
-}];
-
-// Add PaymentItem type
-
-// Extend props to accept onPaymentResult, amount, and currency
-
-// Currency symbol map
-const CURRENCY_SYMBOLS = {
-  FAIR: '⊜',
-  INR: '₹',
-  USD: '$',
-  EUR: '€',
-  GBP: '£',
-  JPY: '¥',
-  CNY: '¥',
-  AUD: 'A$',
-  CAD: 'C$'
-  // Add more as needed
-};
-const CURRENCY_NAMES = {
-  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'
-  // Add more as needed
-};
-
-// Helper: icon for item type (Ionicons only)
-const getItemTypeIcon = (type, color) => {
-  switch (type) {
-    case 'product':
-      return /*#__PURE__*/_jsx(Ionicons, {
-        name: "cart-outline",
-        size: 22,
-        color: color,
-        style: {
-          marginRight: 8
-        }
-      });
-    case 'subscription':
-      return /*#__PURE__*/_jsx(Ionicons, {
-        name: "repeat-outline",
-        size: 22,
-        color: color,
-        style: {
-          marginRight: 8
-        }
-      });
-    case 'service':
-      return /*#__PURE__*/_jsx(Ionicons, {
-        name: "construct-outline",
-        size: 22,
-        color: color,
-        style: {
-          marginRight: 8
-        }
-      });
-    case 'fee':
-      return /*#__PURE__*/_jsx(Ionicons, {
-        name: "cash-outline",
-        size: 22,
-        color: color,
-        style: {
-          marginRight: 8
-        }
-      });
-    default:
-      return /*#__PURE__*/_jsx(Ionicons, {
-        name: "pricetag-outline",
-        size: 22,
-        color: color,
-        style: {
-          marginRight: 8
-        }
-      });
-  }
-};
-
-// Helper to get unique item types (move to top-level, before component)
+import { PaymentSummaryStep, PaymentMethodStep, PaymentDetailsStep, PaymentReviewStep, PaymentSuccessStep, PAYMENT_METHODS, createPaymentStyles } from "../components/payment/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getUniqueItemTypes = items => {
   const types = items.map(item => item.type);
   return Array.from(new Set(types));
@@ -128,8 +23,7 @@ const PaymentGatewayScreen = props => {
     currency = 'FAIR',
     onClose,
     paymentItems = [],
-    // NEW
-    description = '' // NEW
+    description = ''
   } = props;
 
   // DEV ENFORCEMENT: Only allow one type of payment item
@@ -148,9 +42,7 @@ const PaymentGatewayScreen = props => {
     expiry: '',
     cvv: ''
   });
-  const [upiId, setUpiId] = useState('');
   const [isPaying, setIsPaying] = useState(false);
-  const [success, setSuccess] = useState(false);
 
   // Animations
   const fadeAnim = useRef(new Animated.Value(1)).current;
@@ -159,23 +51,8 @@ const PaymentGatewayScreen = props => {
   const progressAnim = useRef(new Animated.Value(0.2)).current;
   const normalizedTheme = normalizeTheme(theme);
   const colors = useThemeColors(normalizedTheme);
-  const commonStyles = createCommonStyles(normalizedTheme);
-  const styles = useMemo(() => createStyles(colors, normalizedTheme), [colors, normalizedTheme]);
-
-  // Get symbol and name for currency
-  const currencySymbol = CURRENCY_SYMBOLS[currency.toUpperCase()] || currency;
-  const currencyName = CURRENCY_NAMES[currency.toUpperCase()] || currency;
-
-  // Calculate total from items if provided, else use amount
-  const computedTotal = useMemo(() => {
-    if (paymentItems && paymentItems.length > 0) {
-      return paymentItems.reduce((sum, item) => {
-        const qty = item.quantity ?? 1;
-        return sum + item.price * qty;
-      }, 0);
-    }
-    return Number(amount) || 0;
-  }, [paymentItems, amount]);
+  const themeStyles = useThemeStyles(normalizedTheme);
+  const styles = useMemo(() => createPaymentStyles(colors), [colors]);
 
   // Determine if the payment is for a recurring item (subscription)
   const isRecurring = paymentItems.length > 0 && paymentItems[0].type === 'subscription';
@@ -188,15 +65,6 @@ const PaymentGatewayScreen = props => {
     return PAYMENT_METHODS;
   }, [isRecurring]);
 
-  // Add after useState declarations
-  // Remove itemTypeError state, useEffect, and user-facing error in renderSummaryStep
-
-  // Helper to get unique item types
-  // Remove itemTypeError state, useEffect, and user-facing error in renderSummaryStep
-
-  // Validate item types on paymentItems change
-  // Remove itemTypeError state, useEffect, and user-facing error in renderSummaryStep
-
   // Animation transitions
   const animateTransition = useCallback(nextStep => {
     Animated.timing(scaleAnim, {
@@ -228,7 +96,7 @@ const PaymentGatewayScreen = props => {
         useNativeDriver: Platform.OS !== 'web'
       })]).start();
     });
-  }, []);
+  }, [fadeAnim, slideAnim, scaleAnim]);
   const nextStep = useCallback(() => {
     if (currentStep < 4) {
       Animated.timing(progressAnim, {
@@ -250,17 +118,14 @@ const PaymentGatewayScreen = props => {
     }
   }, [currentStep, progressAnim, animateTransition]);
 
-  // Dummy pay handler
+  // Pay handler - TODO: Replace with actual payment API
   const handlePay = useCallback(() => {
     setIsPaying(true);
     setTimeout(() => {
       setIsPaying(false);
-      setSuccess(true);
       nextStep();
     }, 1500);
   }, [nextStep]);
-
-  // Success handler for Done button
   const handleDone = useCallback(() => {
     if (onPaymentResult) {
       onPaymentResult({
@@ -269,8 +134,6 @@ const PaymentGatewayScreen = props => {
     }
     navigate?.('AccountOverview');
   }, [onPaymentResult, navigate]);
-
-  // Handle close/cancel: return failure result if payment is not completed
   const handleClose = useCallback(() => {
     if (onPaymentResult) {
       onPaymentResult({
@@ -285,10 +148,7 @@ const PaymentGatewayScreen = props => {
     }
   }, [onPaymentResult, onClose, goBack]);
 
-  // Optionally, intercept goBack/onClose if user tries to close the screen
-  // (You may want to use useEffect to listen for unmount or navigation away)
-
-  // If amount is missing or invalid, show error
+  // Validate amount
   if (!amount || isNaN(Number(amount)) || Number(amount) <= 0) {
     return /*#__PURE__*/_jsxs(View, {
       style: styles.errorContainer,
@@ -302,619 +162,82 @@ const PaymentGatewayScreen = props => {
           icon: 'close',
           variant: 'primary'
         }],
-        colors: useThemeColors(normalizedTheme)
+        colors: colors
       })]
     });
   }
 
-  // Example FairCoin address (replace with real one)
+  // FairCoin address - TODO: Replace with dynamic address from backend
   const faircoinAddress = 'f1abc1234FAIRCOINADDRESS';
   const {
     width: windowWidth
   } = useWindowDimensions();
   const isMobile = windowWidth < 600;
   const qrSize = !isMobile ? Math.min(windowWidth * 0.3, 220) : Math.min(windowWidth * 0.8, 300);
-  const handleCopyAddress = () => {
-    Clipboard.setString(faircoinAddress);
-    toast('Address copied to clipboard!');
-  };
-  const handleOpenFairWallet = () => {
-    const url = `fairwallet://pay?address=${faircoinAddress}`;
-    Linking.openURL(url);
-  };
-
-  // Helper for dynamic styles
-  const getStepIndicatorStyle = active => [styles.stepIndicator, active ? styles.stepIndicatorActive : styles.stepIndicatorInactive];
-  const getPaymentMethodButtonStyle = active => [styles.paymentMethodButton, active ? styles.paymentMethodButtonActive : styles.paymentMethodButtonInactive];
-  const getPaymentMethodIconColor = active => active ? colors.primary : colors.text;
-
-  // Step indicator
-  const renderStepIndicator = () => {
-    const totalSteps = 5;
-    const activeStep = currentStep + 1;
-    return /*#__PURE__*/_jsx(View, {
-      style: styles.stepIndicatorContainer,
-      children: Array.from({
-        length: totalSteps
-      }).map((_, idx) => /*#__PURE__*/_jsx(View, {
-        style: getStepIndicatorStyle(activeStep === idx + 1)
-      }, idx))
-    });
+  const animations = {
+    fadeAnim,
+    slideAnim,
+    scaleAnim
   };
-
-  // PaymentGatewayHeader component
-  const stepTitles = ['Complete Your Payment', 'Select Payment Method', 'Enter Payment Details', 'Review & Pay', 'Success'];
-
-  // Step 1: Summary step (new first step, no header/dots here)
-  const renderSummaryStep = () => /*#__PURE__*/_jsxs(Animated.View, {
-    style: [styles.stepContainer, {
-      opacity: fadeAnim,
-      transform: [{
-        translateY: slideAnim
-      }, {
-        scale: scaleAnim
-      }]
-    }],
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.section,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.sectionTitle,
-        children: "Payment Summary"
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.summaryCard,
-        children: /*#__PURE__*/_jsxs(View, {
-          style: styles.summaryCardContent,
-          children: [/*#__PURE__*/_jsx(Ionicons, {
-            name: "receipt-outline",
-            size: 64,
-            color: colors.primary,
-            style: styles.summaryCardIcon
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.summaryCardMainTitle,
-            children: paymentItems && paymentItems.length > 0 ? 'Order Summary' : 'Payment'
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.summaryCardSubtitle,
-            children: paymentItems && paymentItems.length > 0 ? 'Review your payment details' : 'Complete your payment'
-          }), paymentItems && paymentItems.length > 0 ? /*#__PURE__*/_jsxs(_Fragment, {
-            children: [/*#__PURE__*/_jsx(View, {
-              style: styles.summaryCardItems,
-              children: /*#__PURE__*/_jsx(GroupedSection, {
-                items: paymentItems.map((item, idx) => ({
-                  id: `item-${idx}`,
-                  icon: getItemTypeIcon(item.type, colors.primary).props.name,
-                  iconColor: colors.primary,
-                  title: `${item.type === 'product' && item.quantity ? `${item.quantity} × ` : ''}${item.name}${item.type === 'subscription' && item.period ? ` (${item.period})` : ''}`,
-                  subtitle: item.description || `${item.currency ? CURRENCY_SYMBOLS[item.currency.toUpperCase()] || item.currency : currencySymbol} ${item.price * (item.quantity ?? 1)}`,
-                  customContent: /*#__PURE__*/_jsxs(Text, {
-                    style: styles.summaryItemPrice,
-                    children: [item.currency ? CURRENCY_SYMBOLS[item.currency.toUpperCase()] || item.currency : currencySymbol, " ", item.price * (item.quantity ?? 1)]
-                  })
-                }))
-              })
-            }), /*#__PURE__*/_jsx(View, {
-              style: styles.summaryCardDivider
-            }), /*#__PURE__*/_jsxs(View, {
-              style: styles.summaryCardTotalSection,
-              children: [/*#__PURE__*/_jsxs(View, {
-                style: styles.summaryCardTotalRow,
-                children: [/*#__PURE__*/_jsx(Text, {
-                  style: styles.summaryCardTotalLabel,
-                  children: "Subtotal"
-                }), /*#__PURE__*/_jsxs(Text, {
-                  style: styles.summaryCardTotalValue,
-                  children: [currencySymbol, " ", amount]
-                })]
-              }), /*#__PURE__*/_jsxs(View, {
-                style: styles.summaryCardTotalRow,
-                children: [/*#__PURE__*/_jsx(Text, {
-                  style: styles.summaryCardTotalLabel,
-                  children: "Tax"
-                }), /*#__PURE__*/_jsxs(Text, {
-                  style: styles.summaryCardTotalValue,
-                  children: [currencySymbol, " 0.00"]
-                })]
-              }), /*#__PURE__*/_jsxs(View, {
-                style: styles.summaryCardTotalRow,
-                children: [/*#__PURE__*/_jsx(Text, {
-                  style: styles.summaryCardTotalLabel,
-                  children: "Total"
-                }), /*#__PURE__*/_jsxs(Text, {
-                  style: styles.summaryCardTotalValue,
-                  children: [currencySymbol, " ", amount]
-                })]
-              })]
-            })]
-          }) : /*#__PURE__*/_jsxs(_Fragment, {
-            children: [/*#__PURE__*/_jsxs(View, {
-              style: styles.summaryCardAmount,
-              children: [/*#__PURE__*/_jsx(Text, {
-                style: styles.summaryCardAmountLabel,
-                children: "Amount to Pay"
-              }), /*#__PURE__*/_jsxs(Text, {
-                style: styles.summaryCardAmountValue,
-                children: [currencySymbol, " ", amount]
-              }), description && /*#__PURE__*/_jsx(Text, {
-                style: styles.summaryCardAmountDescription,
-                children: description
-              })]
-            }), /*#__PURE__*/_jsx(View, {
-              style: styles.summaryCardDivider
-            }), /*#__PURE__*/_jsx(View, {
-              style: styles.summaryCardTotalSection,
-              children: /*#__PURE__*/_jsxs(View, {
-                style: styles.summaryCardTotalRow,
-                children: [/*#__PURE__*/_jsx(Text, {
-                  style: styles.summaryCardTotalLabel,
-                  children: "Total"
-                }), /*#__PURE__*/_jsxs(Text, {
-                  style: styles.summaryCardTotalValue,
-                  children: [currencySymbol, " ", amount]
-                })]
-              })
-            })]
-          })]
-        })
-      })]
-    }), /*#__PURE__*/_jsx(GroupedPillButtons, {
-      buttons: [{
-        text: 'Close',
-        onPress: handleClose,
-        icon: 'close',
-        variant: 'transparent'
-      }, {
-        text: 'Continue',
-        onPress: nextStep,
-        icon: 'arrow-forward',
-        variant: 'primary'
-      }],
-      colors: colors
-    })]
-  });
-
-  // Step 2: Choose Payment Method (now the second step, no header/dots here)
-  const renderMethodStep = () => /*#__PURE__*/_jsxs(Animated.View, {
-    style: [styles.stepContainer, {
-      opacity: fadeAnim,
-      transform: [{
-        translateY: slideAnim
-      }, {
-        scale: scaleAnim
-      }]
-    }],
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.section,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.sectionTitle,
-        children: "Choose Payment Method"
-      }), /*#__PURE__*/_jsx(GroupedSection, {
-        items: availablePaymentMethods.map(method => ({
-          id: method.key,
-          icon: method.key === 'faircoin' ? undefined : method.icon,
-          iconColor: method.key === 'card' ? '#007AFF' : method.key === 'oxy' ? '#32D74B' : method.key === 'faircoin' ? '#9ffb50' : colors.primary,
-          title: method.label,
-          subtitle: method.description,
-          onPress: () => setPaymentMethod(method.key),
-          selected: paymentMethod === method.key,
-          showChevron: false,
-          customIcon: method.key === 'faircoin' ? /*#__PURE__*/_jsx(FAIRWalletIcon, {
-            size: 20
-          }) : undefined
-        }))
-      })]
-    }), /*#__PURE__*/_jsx(GroupedPillButtons, {
-      buttons: [{
-        text: 'Back',
-        onPress: prevStep,
-        icon: 'arrow-back',
-        variant: 'transparent'
-      }, {
-        text: 'Continue',
-        onPress: nextStep,
-        icon: 'arrow-forward',
-        variant: 'primary'
-      }],
-      colors: colors
-    })]
-  });
-
-  // Step 2: Enter Payment Details
-  const renderDetailsStep = () => /*#__PURE__*/_jsxs(Animated.View, {
-    style: [styles.stepContainer, {
-      opacity: fadeAnim,
-      transform: [{
-        translateY: slideAnim
-      }, {
-        scale: scaleAnim
-      }]
-    }],
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.section,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.sectionTitle,
-        children: paymentMethod === 'card' ? 'Card Details' : paymentMethod === 'oxy' ? 'Oxy Pay' : paymentMethod === 'faircoin' ? 'FairCoin Payment' : 'Payment Details'
-      }), paymentMethod === 'card' && /*#__PURE__*/_jsx(View, {
-        style: styles.cardPaymentCard,
-        children: /*#__PURE__*/_jsxs(View, {
-          style: styles.cardPaymentContent,
-          children: [/*#__PURE__*/_jsx(Ionicons, {
-            name: "card-outline",
-            size: 64,
-            color: colors.primary,
-            style: styles.cardPaymentIcon
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.cardPaymentMainTitle,
-            children: "Credit Card"
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.cardPaymentSubtitle,
-            children: "Enter your card details securely"
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.cardPaymentFields,
-            children: [/*#__PURE__*/_jsxs(View, {
-              style: styles.cardRowInfo,
-              children: [/*#__PURE__*/_jsx(Ionicons, {
-                name: "card-outline",
-                size: 24,
-                color: colors.primary,
-                style: styles.cardRowIcon
-              }), /*#__PURE__*/_jsx(Text, {
-                style: styles.cardRowText,
-                children: "We accept Visa, Mastercard, and more"
-              })]
-            }), /*#__PURE__*/_jsx(TextField, {
-              value: cardDetails.number,
-              onChangeText: text => {
-                // Format card number with spaces
-                const formatted = text.replace(/\s/g, '').replace(/(\d{4})/g, '$1 ').trim();
-                setCardDetails({
-                  ...cardDetails,
-                  number: formatted
-                });
-              },
-              placeholder: "1234 5678 9012 3456",
-              keyboardType: "numeric",
-              maxLength: 19,
-              style: styles.cardFieldContainer,
-              left: /*#__PURE__*/_jsx(Ionicons, {
-                name: "card-outline",
-                size: 18,
-                color: colors.primary
-              })
-            }), /*#__PURE__*/_jsxs(View, {
-              style: styles.cardFieldRow,
-              children: [/*#__PURE__*/_jsx(TextField, {
-                value: cardDetails.expiry,
-                onChangeText: text => {
-                  // Format expiry date
-                  const formatted = text.replace(/\D/g, '').replace(/(\d{2})(\d)/, '$1/$2');
-                  setCardDetails({
-                    ...cardDetails,
-                    expiry: formatted
-                  });
-                },
-                placeholder: "MM/YY",
-                maxLength: 5,
-                style: styles.cardFieldHalfLeft,
-                left: /*#__PURE__*/_jsx(Ionicons, {
-                  name: "calendar-outline",
-                  size: 16,
-                  color: colors.primary
-                })
-              }), /*#__PURE__*/_jsx(TextField, {
-                value: cardDetails.cvv,
-                onChangeText: text => {
-                  // Only allow numbers
-                  const formatted = text.replace(/\D/g, '');
-                  setCardDetails({
-                    ...cardDetails,
-                    cvv: formatted
-                  });
-                },
-                placeholder: "123",
-                keyboardType: "numeric",
-                maxLength: 4,
-                style: styles.cardFieldHalfRight,
-                left: /*#__PURE__*/_jsx(Ionicons, {
-                  name: "lock-closed-outline",
-                  size: 16,
-                  color: colors.primary
-                })
-              })]
-            })]
-          }), /*#__PURE__*/_jsx(View, {
-            style: {
-              height: 18
-            }
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.cardPaymentWaiting,
-            children: "Ready to process payment..."
-          })]
-        })
-      }), paymentMethod === 'oxy' && /*#__PURE__*/_jsx(View, {
-        style: styles.oxyPayCard,
-        children: /*#__PURE__*/_jsxs(View, {
-          style: styles.oxyPayContent,
-          children: [/*#__PURE__*/_jsx(Ionicons, {
-            name: "wallet-outline",
-            size: 64,
-            color: colors.primary,
-            style: styles.oxyPayIcon
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.oxyPayMainTitle,
-            children: "Oxy Pay"
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.oxyPaySubtitle,
-            children: "Pay with your in-app wallet"
-          }), /*#__PURE__*/_jsx(View, {
-            style: styles.oxyPayBalanceBox,
-            children: /*#__PURE__*/_jsx(Text, {
-              style: styles.oxyPayBalanceText,
-              children: "Balance: \u229C 123.45"
-            })
-          }), /*#__PURE__*/_jsx(View, {
-            style: {
-              height: 18
-            }
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.oxyPayWaiting,
-            children: "Ready to process payment..."
-          })]
-        })
-      }), paymentMethod === 'faircoin' && /*#__PURE__*/_jsx(View, {
-        style: styles.faircoinCard,
-        children: /*#__PURE__*/_jsxs(View, {
-          style: styles.faircoinContent,
-          children: [/*#__PURE__*/_jsx(FAIRWalletIcon, {
-            size: 64,
-            style: styles.faircoinIcon
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.faircoinMainTitle,
-            children: "FAIRWallet"
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.faircoinSubtitle,
-            children: "Pay with FairCoin"
-          }), !isMobile ? /*#__PURE__*/_jsxs(_Fragment, {
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: styles.faircoinScanText,
-              children: "Scan to Pay"
-            }), /*#__PURE__*/_jsxs(View, {
-              style: styles.faircoinQRCard,
-              children: [/*#__PURE__*/_jsx(QRCode, {
-                value: faircoinAddress,
-                size: qrSize - 32
-              }), /*#__PURE__*/_jsx(View, {
-                style: styles.faircoinQRBadge,
-                children: /*#__PURE__*/_jsx(FAIRWalletIcon, {
-                  size: 28
-                })
-              })]
-            })]
-          }) : /*#__PURE__*/_jsxs(_Fragment, {
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: styles.faircoinTitle,
-              children: "Use the options below to pay with FAIRWallet"
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.faircoinAddress,
-              children: faircoinAddress
-            }), /*#__PURE__*/_jsxs(TouchableOpacity, {
-              style: [styles.faircoinButton, {
-                backgroundColor: '#9ffb50',
-                borderRadius: 18,
-                marginTop: 12,
-                width: '90%',
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'center'
-              }],
-              onPress: handleOpenFairWallet,
-              children: [/*#__PURE__*/_jsx(FAIRWalletIcon, {
-                size: 20,
-                style: {
-                  marginRight: 8
-                }
-              }), /*#__PURE__*/_jsx(Text, {
-                style: [styles.faircoinButtonText, {
-                  color: '#1b1f0a',
-                  fontWeight: 'bold',
-                  fontSize: 16
-                }],
-                children: "Open in FAIRWallet"
-              })]
-            }), /*#__PURE__*/_jsxs(TouchableOpacity, {
-              style: [styles.faircoinButton, {
-                backgroundColor: '#9ffb50',
-                borderRadius: 18,
-                marginTop: 10,
-                width: '90%',
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'center'
-              }],
-              onPress: handleCopyAddress,
-              children: [/*#__PURE__*/_jsx(FAIRWalletIcon, {
-                size: 20,
-                style: {
-                  marginRight: 8
-                }
-              }), /*#__PURE__*/_jsx(Text, {
-                style: [styles.faircoinButtonText, {
-                  color: '#1b1f0a',
-                  fontWeight: 'bold',
-                  fontSize: 16
-                }],
-                children: "Copy Address"
-              })]
-            })]
-          }), /*#__PURE__*/_jsx(View, {
-            style: {
-              height: 18
-            }
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.faircoinWaiting,
-            children: "Waiting for payment..."
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.faircoinPlaceholder,
-            children: "(This is a placeholder. Integrate with a QR code generator for production.)"
-          })]
-        })
-      })]
-    }), /*#__PURE__*/_jsx(GroupedPillButtons, {
-      buttons: [{
-        text: 'Back',
-        onPress: prevStep,
-        icon: 'arrow-back',
-        variant: 'transparent'
-      }, {
-        text: 'Continue',
-        onPress: nextStep,
-        icon: 'arrow-forward',
-        variant: 'primary',
-        disabled: paymentMethod === 'card' && (!cardDetails.number || !cardDetails.expiry || !cardDetails.cvv)
-      }],
-      colors: colors
-    })]
-  });
-
-  // Step 4: Review & Pay
-  const renderReviewStep = () => /*#__PURE__*/_jsxs(Animated.View, {
-    style: [styles.stepContainer, {
-      opacity: fadeAnim,
-      transform: [{
-        translateY: slideAnim
-      }, {
-        scale: scaleAnim
-      }]
-    }],
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.section,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.sectionTitle,
-        children: "Review Payment"
-      }), /*#__PURE__*/_jsx(GroupedSection, {
-        items: [{
-          id: 'secure-payment',
-          icon: 'shield-check',
-          iconColor: colors.success || '#4BB543',
-          title: 'Secure payment',
-          subtitle: 'Your payment is protected by industry-standard encryption'
-        }, {
-          id: 'amount',
-          icon: 'cash',
-          iconColor: colors.primary,
-          title: 'Amount',
-          subtitle: `${currencySymbol} ${amount}`
-        }, {
-          id: 'payment-method',
-          icon: PAYMENT_METHODS.find(m => m.key === paymentMethod)?.icon,
-          iconColor: colors.primary,
-          title: 'Payment Method',
-          subtitle: PAYMENT_METHODS.find(m => m.key === paymentMethod)?.label
-        }, ...(paymentMethod === 'card' ? [{
-          id: 'card-details',
-          icon: 'card',
-          iconColor: colors.primary,
-          title: 'Card',
-          subtitle: cardDetails.number.replace(/.(?=.{4})/g, '*')
-        }] : []), ...(paymentMethod === 'oxy' ? [{
-          id: 'oxy-balance',
-          icon: 'wallet',
-          iconColor: colors.primary,
-          title: 'Oxy Pay Account',
-          subtitle: 'Balance: ⊜ 123.45'
-        }] : []), ...(paymentMethod === 'faircoin' ? [{
-          id: 'faircoin-wallet',
-          icon: 'qr-code',
-          iconColor: colors.primary,
-          title: 'FairCoin Wallet',
-          subtitle: 'Paid via QR'
-        }] : [])]
-      })]
-    }), /*#__PURE__*/_jsx(GroupedPillButtons, {
-      buttons: [{
-        text: 'Back',
-        onPress: prevStep,
-        icon: 'arrow-back',
-        variant: 'transparent'
-      }, {
-        text: isPaying ? 'Processing...' : 'Pay Now',
-        onPress: handlePay,
-        icon: 'checkmark',
-        variant: 'primary',
-        loading: isPaying
-      }],
-      colors: colors
-    })]
-  });
-
-  // Step 5: Success
-  const renderSuccessStep = () => /*#__PURE__*/_jsxs(Animated.View, {
-    style: [styles.stepContainer, {
-      opacity: fadeAnim,
-      transform: [{
-        translateY: slideAnim
-      }, {
-        scale: scaleAnim
-      }]
-    }],
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.section,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.sectionTitle,
-        children: "Payment Complete"
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.successCard,
-        children: /*#__PURE__*/_jsxs(View, {
-          style: styles.successContent,
-          children: [/*#__PURE__*/_jsx(Ionicons, {
-            name: "checkmark-circle",
-            size: 64,
-            color: colors.success || '#4BB543',
-            style: styles.successIcon
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.successMainTitle,
-            children: "Payment Successful!"
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.successSubtitle,
-            children: "Thank you for your payment."
-          }), /*#__PURE__*/_jsx(View, {
-            style: {
-              height: 18
-            }
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.successMessage,
-            children: "Your transaction has been processed successfully."
-          })]
-        })
-      })]
-    }), /*#__PURE__*/_jsx(GroupedPillButtons, {
-      buttons: [{
-        text: 'Done',
-        onPress: handleDone,
-        icon: 'checkmark',
-        variant: 'primary'
-      }],
-      colors: colors
-    })]
-  });
   const renderCurrentStep = () => {
     switch (currentStep) {
       case 0:
-        return renderSummaryStep();
+        return /*#__PURE__*/_jsx(PaymentSummaryStep, {
+          paymentItems: paymentItems,
+          amount: amount,
+          currency: currency,
+          description: description,
+          colors: colors,
+          animations: animations,
+          onClose: handleClose,
+          onNext: nextStep
+        });
       case 1:
-        return renderMethodStep();
+        return /*#__PURE__*/_jsx(PaymentMethodStep, {
+          availablePaymentMethods: availablePaymentMethods,
+          selectedMethod: paymentMethod,
+          onSelectMethod: setPaymentMethod,
+          colors: colors,
+          animations: animations,
+          onBack: prevStep,
+          onNext: nextStep
+        });
       case 2:
-        return renderDetailsStep();
+        return /*#__PURE__*/_jsx(PaymentDetailsStep, {
+          paymentMethod: paymentMethod,
+          cardDetails: cardDetails,
+          onCardDetailsChange: setCardDetails,
+          colors: colors,
+          animations: animations,
+          faircoinAddress: faircoinAddress,
+          isMobile: isMobile,
+          qrSize: qrSize,
+          onBack: prevStep,
+          onNext: nextStep,
+          QRCodeComponent: QRCode
+        });
       case 3:
-        return renderReviewStep();
+        return /*#__PURE__*/_jsx(PaymentReviewStep, {
+          amount: amount,
+          currency: currency,
+          paymentMethod: paymentMethod,
+          cardDetails: cardDetails,
+          colors: colors,
+          animations: animations,
+          isPaying: isPaying,
+          onBack: prevStep,
+          onPay: handlePay
+        });
       case 4:
-        return renderSuccessStep();
+        return /*#__PURE__*/_jsx(PaymentSuccessStep, {
+          colors: colors,
+          animations: animations,
+          onDone: handleDone
+        });
       default:
-        return renderSummaryStep();
+        return null;
     }
   };
-
-  // Use centralized theme styles hook for consistency
-  // primaryColor from hook (#007AFF) is already correct for this screen
-  const themeStyles = useThemeStyles(normalizedTheme);
   return /*#__PURE__*/_jsx(View, {
     style: [styles.container, {
       backgroundColor: themeStyles.backgroundColor
@@ -926,658 +249,5 @@ const PaymentGatewayScreen = props => {
     })
   });
 };
-const createStyles = (colors, theme) => 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
-  },
-  stepIndicatorContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginVertical: 16
-  },
-  stepIndicator: {
-    height: 10,
-    borderRadius: 5,
-    marginHorizontal: 4
-  },
-  stepIndicatorActive: {
-    width: 28,
-    backgroundColor: colors.primary
-  },
-  stepIndicatorInactive: {
-    width: 10,
-    backgroundColor: colors.border
-  },
-  logo: {
-    width: 40,
-    height: 20,
-    alignSelf: 'center',
-    resizeMode: 'contain'
-  },
-  headerTitle: {
-    fontFamily: fontFamilies.phuduBold,
-    fontSize: 22,
-    fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
-    color: colors.text,
-    letterSpacing: -0.5
-  },
-  paymentMethodButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    borderRadius: 16,
-    padding: 14,
-    marginBottom: 10,
-    width: '90%',
-    alignSelf: 'center',
-    borderWidth: 1
-  },
-  paymentMethodButtonActive: {
-    backgroundColor: colors.primary + '22',
-    borderColor: colors.primary,
-    borderWidth: 2
-  },
-  paymentMethodButtonInactive: {
-    backgroundColor: 'transparent',
-    borderColor: colors.border,
-    borderWidth: 1
-  },
-  paymentMethodLabel: {
-    fontFamily: fontFamilies.phudu,
-    fontSize: 18,
-    color: colors.text,
-    fontWeight: '600'
-  },
-  paymentMethodDescription: {
-    fontFamily: fontFamilies.phudu,
-    fontSize: 15,
-    color: colors.secondaryText,
-    marginTop: 8,
-    minHeight: 36,
-    textAlign: 'center'
-  },
-  errorContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 32
-  },
-  errorText: {
-    fontSize: 18,
-    color: 'red',
-    marginBottom: 24
-  },
-  methodListContainer: {
-    width: '100%',
-    alignItems: 'center'
-  },
-  methodIcon: {
-    marginRight: 12
-  },
-  methodCheckIcon: {
-    marginLeft: 'auto'
-  },
-  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
-  },
-  oxyPayContainer: {
-    alignItems: 'center'
-  },
-  oxyPayIcon: {
-    marginBottom: 8
-  },
-  oxyPayTitle: {
-    fontSize: 16,
-    marginBottom: 8,
-    color: colors.text,
-    fontWeight: '600',
-    textAlign: 'center'
-  },
-  oxyPaySubtitle: {
-    fontSize: 14,
-    color: colors.secondaryText,
-    marginBottom: 8,
-    textAlign: 'center'
-  },
-  oxyPayBalanceBox: {
-    backgroundColor: colors.primary + '22',
-    borderRadius: 12,
-    padding: 8,
-    marginTop: 8
-  },
-  oxyPayBalanceText: {
-    color: colors.primary,
-    fontWeight: '600'
-  },
-  oxyPayCard: {
-    backgroundColor: '#fff',
-    borderRadius: 16,
-    padding: 24,
-    marginBottom: 24,
-    alignItems: 'center',
-    width: '100%'
-  },
-  oxyPayContent: {
-    alignItems: 'center',
-    width: '100%'
-  },
-  oxyPayMainTitle: {
-    fontFamily: fontFamilies.phuduBold,
-    fontWeight: 'bold',
-    fontSize: 28,
-    color: colors.text,
-    marginBottom: 2,
-    textAlign: 'center',
-    letterSpacing: 0.5
-  },
-  oxyPayWaiting: {
-    fontSize: 14,
-    color: colors.secondaryText,
-    textAlign: 'center',
-    marginBottom: 8
-  },
-  faircoinContainer: {
-    alignItems: 'center',
-    marginBottom: 24,
-    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'
-  },
-  faircoinQRBox: {
-    width: 160,
-    height: 160,
-    backgroundColor: '#eee',
-    borderRadius: 16,
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginBottom: 12,
-    borderWidth: 2,
-    borderColor: colors.primary
-  },
-  faircoinQRText: {
-    color: '#aaa'
-  },
-  faircoinWaiting: {
-    fontSize: 14,
-    color: colors.secondaryText,
-    textAlign: 'center',
-    marginBottom: 8
-  },
-  faircoinPlaceholder: {
-    fontSize: 13,
-    color: colors.secondaryText,
-    textAlign: 'center'
-  },
-  faircoinCard: {
-    backgroundColor: '#fff',
-    borderRadius: 16,
-    padding: 24,
-    marginBottom: 24,
-    alignItems: 'center',
-    width: '100%'
-  },
-  faircoinContent: {
-    alignItems: 'center',
-    width: '100%'
-  },
-  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
-  },
-  methodCard: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: '#fff',
-    borderRadius: 18,
-    paddingVertical: 18,
-    paddingHorizontal: 18,
-    marginBottom: 14,
-    borderWidth: 1.5,
-    borderColor: colors.border,
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowOpacity: 0.06,
-    shadowRadius: 6,
-    elevation: 2,
-    minHeight: 72
-  },
-  methodCardSelected: {
-    backgroundColor: colors.primary + '11',
-    borderColor: colors.primary,
-    shadowOpacity: 0.13,
-    shadowRadius: 10,
-    elevation: 4
-  },
-  methodCardContent: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flex: 1
-  },
-  methodCardIcon: {
-    marginRight: 18,
-    marginLeft: 2
-  },
-  methodCardTextContainer: {
-    flex: 1,
-    flexDirection: 'column',
-    justifyContent: 'center'
-  },
-  methodCardDescription: {
-    fontSize: 14,
-    color: colors.secondaryText,
-    marginTop: 2,
-    opacity: 0.85
-  },
-  methodCardCheckIcon: {
-    marginLeft: 12
-  },
-  paymentMethodLabelSelected: {
-    color: colors.primary
-  },
-  circleListContainer: {
-    flexDirection: 'row',
-    flexWrap: 'nowrap',
-    justifyContent: 'center',
-    alignItems: 'flex-start',
-    paddingHorizontal: 4,
-    width: '100%',
-    marginBottom: 0
-  },
-  circleMethod: {
-    alignItems: 'center',
-    marginHorizontal: 0,
-    flex: 1,
-    minWidth: 62,
-    paddingVertical: 2,
-    paddingHorizontal: 2
-  },
-  circleMethodSelected: {
-    // No extra margin, but highlight below
-  },
-  circleIconWrapper: {
-    width: 48,
-    // restored padding
-    height: 48,
-    // restored padding
-    borderRadius: 24,
-    // half of width/height
-    backgroundColor: '#fff',
-    borderWidth: 2,
-    borderColor: colors.border,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginBottom: 8,
-    // spacing below icon
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowOpacity: 0.07,
-    shadowRadius: 6,
-    elevation: 2
-  },
-  circleLabel: {
-    fontFamily: fontFamilies.phudu,
-    fontSize: 16,
-    color: colors.text,
-    fontWeight: '600',
-    textAlign: 'center',
-    marginBottom: 4,
-    marginTop: 2
-  },
-  circleLabelSelected: {
-    color: colors.primary
-  },
-  circleDescription: {
-    fontSize: 13,
-    color: colors.secondaryText,
-    textAlign: 'center',
-    opacity: 0.85,
-    minHeight: 36,
-    marginBottom: 2
-  },
-  headerStepIndicatorContainer: {
-    marginVertical: 2,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  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
-  },
-  faircoinAddress: {
-    color: colors.secondaryText,
-    fontSize: 13,
-    textAlign: 'center',
-    marginTop: 6,
-    marginBottom: 2
-  },
-  // Summary step styles
-  summaryDescriptionContainer: {
-    marginBottom: 16
-  },
-  summaryDescriptionText: {
-    color: colors.secondaryText,
-    fontSize: 15,
-    lineHeight: 20
-  },
-  summaryItemPrice: {
-    color: colors.text,
-    fontWeight: '600',
-    fontSize: 16
-  },
-  summaryFallbackContainer: {
-    padding: 16,
-    backgroundColor: '#fff',
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: colors.border
-  },
-  summaryFallbackText: {
-    color: colors.text,
-    fontSize: 16,
-    textAlign: 'center'
-  },
-  // 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
-  },
-  // 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
-  },
-  summaryCardTotal: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    color: colors.text,
-    textAlign: 'center',
-    marginBottom: 8
-  },
-  // Simple amount styles
-  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
-  },
-  // Enhanced summary styles
-  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'
-  }
-});
 export default PaymentGatewayScreen;
 //# sourceMappingURL=PaymentGatewayScreen.js.map