@oxyhq/services 5.7.5 → 5.8.2

package/src/ui/screens/PaymentGatewayScreen.tsx

@@ -25,6 +25,7 @@ import { FAIRWalletIcon } from '../components/icon';
 import { toast } from 'sonner';
 import QRCode from 'react-native-qrcode-svg';
 import * as RNIap from 'react-native-iap';
+import { GroupedSection } from '../components';
 
 // Restrict payment methods to Card, Oxy Pay, and FairCoin (QR)
 const PAYMENT_METHODS = [
@@ -209,12 +210,12 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
         Animated.timing(scaleAnim, {
             toValue: 0.95,
             duration: 150,
-            useNativeDriver: true,
+            useNativeDriver: Platform.OS !== 'web',
         }).start();
         Animated.timing(fadeAnim, {
             toValue: 0,
             duration: 200,
-            useNativeDriver: true,
+            useNativeDriver: Platform.OS !== 'web',
         }).start(() => {
             setCurrentStep(nextStep);
             slideAnim.setValue(-50);
@@ -223,19 +224,19 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
                 Animated.timing(fadeAnim, {
                     toValue: 1,
                     duration: 300,
-                    useNativeDriver: true,
+                    useNativeDriver: Platform.OS !== 'web',
                 }),
                 Animated.spring(slideAnim, {
                     toValue: 0,
                     tension: 80,
                     friction: 8,
-                    useNativeDriver: true,
+                    useNativeDriver: Platform.OS !== 'web',
                 }),
                 Animated.spring(scaleAnim, {
                     toValue: 1,
                     tension: 80,
                     friction: 8,
-                    useNativeDriver: true,
+                    useNativeDriver: Platform.OS !== 'web',
                 })
             ]).start();
         });
@@ -409,69 +410,11 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
         'Review & Pay',
         'Success',
     ];
-    const PaymentGatewayHeader: React.FC<{ currentStep: number; totalSteps: number; title: string; }> = ({ currentStep, totalSteps, title }) => (
-        <View style={styles.headerWrapper}>
-            <OxyLogo style={styles.logo} />
-            <Text style={styles.headerTitle}>{title}</Text>
-            <View style={styles.headerStepIndicatorContainer}>
-                {Array.from({ length: totalSteps }).map((_, idx) => (
-                    <View
-                        key={idx}
-                        style={getStepIndicatorStyle(currentStep + 1 === idx + 1)}
-                    />
-                ))}
-            </View>
-        </View>
-    );
 
-    // Card container for main content
-    const Card: React.FC<{ children: React.ReactNode; style?: any }> = ({ children, style }) => (
-        <View style={[styles.card, style]}>
-            {children}
-        </View>
-    );
 
-    // Product/Item summary card for step 1
-    const renderItemSummary = () => {
-        if (paymentItems && paymentItems.length > 0) {
-            return (
-                <Card style={{ marginBottom: 10 }}>
-                    {paymentItems.map((item, idx) => (
-                        <View key={idx} style={{ marginBottom: 8 }}>
-                            <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-                                <Text style={{ fontWeight: '600', color: colors.text }}>
-                                    {item.type === 'product' && item.quantity ? `${item.quantity} × ` : ''}
-                                    {item.name}
-                                    {item.type === 'subscription' && item.period ? ` (${item.period})` : ''}
-                                </Text>
-                                <Text style={{ color: colors.text }}>
-                                    {(item.currency ? (CURRENCY_SYMBOLS[item.currency.toUpperCase()] || item.currency) : currencySymbol)} {item.price * (item.quantity ?? 1)}
-                                </Text>
-                            </View>
-                            {item.description ? (
-                                <Text style={{ color: colors.secondaryText, fontSize: 13 }}>{item.description}</Text>
-                            ) : null}
-                        </View>
-                    ))}
-                    <View style={{ borderTopWidth: 1, borderColor: colors.border, marginTop: 8, paddingTop: 8, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-                        <Text style={{ fontWeight: '700', color: colors.text }}>Total</Text>
-                        <Text style={{ fontWeight: '700', color: colors.primary, fontSize: 18 }}>{currencySymbol} {computedTotal}</Text>
-                    </View>
-                </Card>
-            );
-        } else if (description) {
-            return (
-                <Card style={{ marginBottom: 10 }}>
-                    <Text style={{ color: colors.text }}>{description}</Text>
-                    <View style={{ borderTopWidth: 1, borderColor: colors.border, marginTop: 8, paddingTop: 8, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-                        <Text style={{ fontWeight: '700', color: colors.text }}>Total</Text>
-                        <Text style={{ fontWeight: '700', color: colors.primary, fontSize: 18 }}>{currencySymbol} {computedTotal}</Text>
-                    </View>
-                </Card>
-            );
-        }
-        return null;
-    };
+
+
+
 
     // Step 1: Summary step (new first step, no header/dots here)
     const renderSummaryStep = () => (
@@ -483,46 +426,97 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
             ]
         }]}
         >
-            <Card>
-                <Text style={{ color: colors.secondaryText, fontSize: 15, marginBottom: 16 }}>You're about to pay for the following:</Text>
-                {paymentItems && paymentItems.length > 0 ? paymentItems.map((item, idx) => (
-                    <View key={idx} style={{ marginBottom: 12, flexDirection: 'row', alignItems: 'flex-start' }}>
-                        {getItemTypeIcon(item.type, colors.primary)}
-                        <View style={{ flex: 1 }}>
-                            <Text style={{ fontWeight: '600', color: colors.text, fontSize: 16 }}>
-                                {item.type === 'product' && item.quantity ? `${item.quantity} × ` : ''}
-                                {item.name}
-                                {item.type === 'subscription' && item.period ? ` (${item.period})` : ''}
-                            </Text>
-                            {item.description ? (
-                                <Text style={{ color: colors.secondaryText, fontSize: 13, marginTop: 2 }}>{item.description}</Text>
-                            ) : null}
-                        </View>
-                        <Text style={{ color: colors.text, fontWeight: '600', fontSize: 16, marginLeft: 8 }}>
-                            {(item.currency ? (CURRENCY_SYMBOLS[item.currency.toUpperCase()] || item.currency) : currencySymbol)} {item.price * (item.quantity ?? 1)}
+            <View style={styles.section}>
+                <Text style={styles.sectionTitle}>Payment Summary</Text>
+
+                <View style={styles.summaryCard}>
+                    <View style={styles.summaryCardContent}>
+                        <Ionicons name="receipt-outline" size={64} color={colors.primary} style={styles.summaryCardIcon} />
+                        <Text style={styles.summaryCardMainTitle}>
+                            {paymentItems && paymentItems.length > 0 ? 'Order Summary' : 'Payment'}
+                        </Text>
+                        <Text style={styles.summaryCardSubtitle}>
+                            {paymentItems && paymentItems.length > 0 ? 'Review your payment details' : 'Complete your payment'}
                         </Text>
+
+                        {paymentItems && paymentItems.length > 0 ? (
+                            <>
+                                <View style={styles.summaryCardItems}>
+                                    <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: (
+                                                <Text style={styles.summaryItemPrice}>
+                                                    {(item.currency ? (CURRENCY_SYMBOLS[item.currency.toUpperCase()] || item.currency) : currencySymbol)} {item.price * (item.quantity ?? 1)}
+                                                </Text>
+                                            ),
+                                        }))}
+                                        theme={theme}
+                                    />
+                                </View>
+
+                                <View style={styles.summaryCardDivider} />
+
+                                <View style={styles.summaryCardTotalSection}>
+                                    <View style={styles.summaryCardTotalRow}>
+                                        <Text style={styles.summaryCardTotalLabel}>Subtotal</Text>
+                                        <Text style={styles.summaryCardTotalValue}>{(currencySymbol)} {amount}</Text>
+                                    </View>
+                                    <View style={styles.summaryCardTotalRow}>
+                                        <Text style={styles.summaryCardTotalLabel}>Tax</Text>
+                                        <Text style={styles.summaryCardTotalValue}>{(currencySymbol)} 0.00</Text>
+                                    </View>
+                                    <View style={styles.summaryCardTotalRow}>
+                                        <Text style={styles.summaryCardTotalLabel}>Total</Text>
+                                        <Text style={styles.summaryCardTotalValue}>{(currencySymbol)} {amount}</Text>
+                                    </View>
+                                </View>
+                            </>
+                        ) : (
+                            <>
+                                <View style={styles.summaryCardAmount}>
+                                    <Text style={styles.summaryCardAmountLabel}>Amount to Pay</Text>
+                                    <Text style={styles.summaryCardAmountValue}>{(currencySymbol)} {amount}</Text>
+                                    {description && (
+                                        <Text style={styles.summaryCardAmountDescription}>{description}</Text>
+                                    )}
+                                </View>
+
+                                <View style={styles.summaryCardDivider} />
+
+                                <View style={styles.summaryCardTotalSection}>
+                                    <View style={styles.summaryCardTotalRow}>
+                                        <Text style={styles.summaryCardTotalLabel}>Total</Text>
+                                        <Text style={styles.summaryCardTotalValue}>{(currencySymbol)} {amount}</Text>
+                                    </View>
+                                </View>
+                            </>
+                        )}
                     </View>
-                )) : (
-                    <Text style={{ color: colors.text }}>{description}</Text>
-                )}
-                <GroupedPillButtons
-                    buttons={[
-                        {
-                            text: 'Close',
-                            onPress: handleClose,
-                            icon: 'close',
-                            variant: 'transparent',
-                        },
-                        {
-                            text: 'Continue',
-                            onPress: nextStep,
-                            icon: 'arrow-forward',
-                            variant: 'primary',
-                        },
-                    ]}
-                    colors={colors}
-                />
-            </Card>
+                </View>
+            </View>
+
+            <GroupedPillButtons
+                buttons={[
+                    {
+                        text: 'Close',
+                        onPress: handleClose,
+                        icon: 'close',
+                        variant: 'transparent',
+                    },
+                    {
+                        text: 'Continue',
+                        onPress: nextStep,
+                        icon: 'arrow-forward',
+                        variant: 'primary',
+                    },
+                ]}
+                colors={colors}
+            />
         </Animated.View>
     );
 
@@ -536,39 +530,29 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
             ]
         }]}
         >
-            <Card>
-                <View style={styles.circleListContainer}>
-                    {availablePaymentMethods.map(method => {
-                        const isSelected = paymentMethod === method.key;
-                        return (
-                            <TouchableOpacity
-                                key={method.key}
-                                onPress={() => setPaymentMethod(method.key)}
-                                activeOpacity={0.85}
-                                style={[styles.circleMethod, isSelected && styles.circleMethodSelected]}
-                            >
-                                <View style={styles.circleIconWrapper}>
-                                    {method.key === 'faircoin' ? (
-                                        <FAIRWalletIcon size={28} />
-                                    ) : (
-                                        <Ionicons
-                                            name={method.icon as any}
-                                            size={28}
-                                            color={isSelected ? colors.primary : colors.text}
-                                        />
-                                    )}
-                                    {isSelected && (
-                                        <View style={styles.circleCheckOverlay}>
-                                            <Ionicons name="checkmark-circle" size={28} color={colors.primary} />
-                                        </View>
-                                    )}
-                                </View>
-                                <Text style={[styles.circleLabel, isSelected && styles.circleLabelSelected]}>{method.label}</Text>
-                            </TouchableOpacity>
-                        );
-                    })}
-                </View>
-            </Card>
+            <View style={styles.section}>
+                <Text style={styles.sectionTitle}>Choose Payment Method</Text>
+
+                <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' ? (
+                            <FAIRWalletIcon size={20} />
+                        ) : undefined,
+                    }))}
+                    theme={theme}
+                />
+            </View>
+
             <GroupedPillButtons
                 buttons={[
                     {
@@ -599,87 +583,123 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
             ]
         }]}
         >
-            <Card
-                style={paymentMethod === 'faircoin' ? { backgroundColor: '#f6fff0', paddingVertical: 24, paddingHorizontal: 0 } : undefined}
-            >
+            <View style={styles.section}>
+                <Text style={styles.sectionTitle}>
+                    {paymentMethod === 'card' ? 'Card Details' :
+                        paymentMethod === 'oxy' ? 'Oxy Pay' :
+                            paymentMethod === 'faircoin' ? 'FairCoin Payment' : 'Payment Details'}
+                </Text>
+
                 {paymentMethod === 'card' && (
-                    <>
-                        <View style={styles.cardRowInfo}>
-                            <Ionicons name="card-outline" size={24} color={colors.primary} style={styles.cardRowIcon} />
-                            <Text style={styles.cardRowText}>We accept Visa, Mastercard, and more</Text>
-                        </View>
-                        <TextField
-                            value={cardDetails.number}
-                            onChangeText={text => setCardDetails({ ...cardDetails, number: text })}
-                            placeholder="Card Number"
-                            keyboardType="numeric"
-                            containerStyle={styles.cardFieldContainer}
-                            leftComponent={<Ionicons name="card-outline" size={18} color={colors.primary} />}
-                        />
-                        <View style={styles.cardFieldRow}>
-                            <TextField
-                                value={cardDetails.expiry}
-                                onChangeText={text => setCardDetails({ ...cardDetails, expiry: text })}
-                                placeholder="MM/YY"
-                                containerStyle={styles.cardFieldHalfLeft}
-                                leftComponent={<Ionicons name="calendar-outline" size={16} color={colors.primary} />}
-                            />
-                            <TextField
-                                value={cardDetails.cvv}
-                                onChangeText={text => setCardDetails({ ...cardDetails, cvv: text })}
-                                placeholder="CVV"
-                                keyboardType="numeric"
-                                containerStyle={styles.cardFieldHalfRight}
-                                leftComponent={<Ionicons name="lock-closed-outline" size={16} color={colors.primary} />}
-                            />
+                    <View style={styles.cardPaymentCard}>
+                        <View style={styles.cardPaymentContent}>
+                            <Ionicons name="card-outline" size={64} color={colors.primary} style={styles.cardPaymentIcon} />
+                            <Text style={styles.cardPaymentMainTitle}>Credit Card</Text>
+                            <Text style={styles.cardPaymentSubtitle}>Enter your card details securely</Text>
+
+                            <View style={styles.cardPaymentFields}>
+                                <View style={styles.cardRowInfo}>
+                                    <Ionicons name="card-outline" size={24} color={colors.primary} style={styles.cardRowIcon} />
+                                    <Text style={styles.cardRowText}>We accept Visa, Mastercard, and more</Text>
+                                </View>
+                                <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}
+                                    leading={<Ionicons name="card-outline" size={18} color={colors.primary} />}
+                                />
+                                <View style={styles.cardFieldRow}>
+                                    <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}
+                                        leading={<Ionicons name="calendar-outline" size={16} color={colors.primary} />}
+                                    />
+                                    <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}
+                                        leading={<Ionicons name="lock-closed-outline" size={16} color={colors.primary} />}
+                                    />
+                                </View>
+                            </View>
+
+                            <View style={{ height: 18 }} />
+                            <Text style={styles.cardPaymentWaiting}>Ready to process payment...</Text>
                         </View>
-                    </>
+                    </View>
                 )}
                 {paymentMethod === 'oxy' && (
-                    <View style={styles.oxyPayContainer}>
-                        <Ionicons name="wallet-outline" size={48} color={colors.primary} style={styles.oxyPayIcon} />
-                        <Text style={styles.oxyPayTitle}>Pay with Oxy Pay</Text>
-                        <Text style={styles.oxyPaySubtitle}>(Oxy Pay is your in-app wallet. Make sure you have enough balance.)</Text>
-                        <View style={styles.oxyPayBalanceBox}>
-                            <Text style={styles.oxyPayBalanceText}>Balance: ⊜ 123.45</Text>
+                    <View style={styles.oxyPayCard}>
+                        <View style={styles.oxyPayContent}>
+                            <Ionicons name="wallet-outline" size={64} color={colors.primary} style={styles.oxyPayIcon} />
+                            <Text style={styles.oxyPayMainTitle}>Oxy Pay</Text>
+                            <Text style={styles.oxyPaySubtitle}>Pay with your in-app wallet</Text>
+                            <View style={styles.oxyPayBalanceBox}>
+                                <Text style={styles.oxyPayBalanceText}>Balance: ⊜ 123.45</Text>
+                            </View>
+                            <View style={{ height: 18 }} />
+                            <Text style={styles.oxyPayWaiting}>Ready to process payment...</Text>
                         </View>
                     </View>
                 )}
                 {paymentMethod === 'faircoin' && (
-                    <View style={{ alignItems: 'center', width: '100%' }}>
-                        <FAIRWalletIcon size={64} style={[styles.faircoinIcon, { shadowColor: '#1b1f0a', shadowOpacity: 0.18, shadowRadius: 12, elevation: 6, marginBottom: 12 }]} />
-                        <Text style={{ fontFamily: fontFamilies.phuduBold, fontWeight: 'bold', fontSize: 28, color: '#1b1f0a', marginBottom: 2, textAlign: 'center', letterSpacing: 0.5 }}>FAIRWallet</Text>
-                        <Text style={{ color: '#1b1f0a', fontWeight: '700', fontSize: 17, marginBottom: 18, textAlign: 'center', letterSpacing: 0.2 }}>Pay with FairCoin</Text>
-                        {!isMobile ? (
-                            <>
-                                <Text style={{ color: '#1b1f0a', fontWeight: '600', fontSize: 15, marginBottom: 8 }}>Scan to Pay</Text>
-                                <View style={[styles.faircoinQRBox, { width: qrSize, height: qrSize, borderColor: '#9ffb50', borderWidth: 3, position: 'relative', backgroundColor: '#fff', boxShadow: '0 2px 12px #9ffb5040', justifyContent: 'center', alignItems: 'center' }]}>
-                                    <QRCode value={faircoinAddress} size={qrSize - 32} />
-                                    <View style={{ position: 'absolute', bottom: 8, right: 8 }}>
-                                        <FAIRWalletIcon size={28} />
+                    <View style={styles.faircoinCard}>
+                        <View style={styles.faircoinContent}>
+                            <FAIRWalletIcon size={64} style={styles.faircoinIcon} />
+                            <Text style={styles.faircoinMainTitle}>FAIRWallet</Text>
+                            <Text style={styles.faircoinSubtitle}>Pay with FairCoin</Text>
+                            {!isMobile ? (
+                                <>
+                                    <Text style={styles.faircoinScanText}>Scan to Pay</Text>
+                                    <View style={styles.faircoinQRCard}>
+                                        <QRCode value={faircoinAddress} size={qrSize - 32} />
+                                        <View style={styles.faircoinQRBadge}>
+                                            <FAIRWalletIcon size={28} />
+                                        </View>
                                     </View>
-                                </View>
-                            </>
-                        ) : (
-                            <>
-                                <Text style={styles.faircoinTitle}>Use the options below to pay with FAIRWallet</Text>
-                                <Text style={styles.faircoinAddress}>{faircoinAddress}</Text>
-                                <TouchableOpacity style={[styles.faircoinButton, { backgroundColor: '#9ffb50', borderRadius: 18, marginTop: 12, width: '90%', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }]} onPress={handleOpenFairWallet}>
-                                    <FAIRWalletIcon size={20} style={{ marginRight: 8 }} />
-                                    <Text style={[styles.faircoinButtonText, { color: '#1b1f0a', fontWeight: 'bold', fontSize: 16 }]}>Open in FAIRWallet</Text>
-                                </TouchableOpacity>
-                                <TouchableOpacity style={[styles.faircoinButton, { backgroundColor: '#9ffb50', borderRadius: 18, marginTop: 10, width: '90%', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }]} onPress={handleCopyAddress}>
-                                    <FAIRWalletIcon size={20} style={{ marginRight: 8 }} />
-                                    <Text style={[styles.faircoinButtonText, { color: '#1b1f0a', fontWeight: 'bold', fontSize: 16 }]}>Copy Address</Text>
-                                </TouchableOpacity>
-                            </>
-                        )}
-                        <View style={{ height: 18 }} />
-                        <Text style={styles.faircoinWaiting}>Waiting for payment...</Text>
-                        <Text style={styles.faircoinPlaceholder}>(This is a placeholder. Integrate with a QR code generator for production.)</Text>
+                                </>
+                            ) : (
+                                <>
+                                    <Text style={styles.faircoinTitle}>Use the options below to pay with FAIRWallet</Text>
+                                    <Text style={styles.faircoinAddress}>{faircoinAddress}</Text>
+                                    <TouchableOpacity style={[styles.faircoinButton, { backgroundColor: '#9ffb50', borderRadius: 18, marginTop: 12, width: '90%', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }]} onPress={handleOpenFairWallet}>
+                                        <FAIRWalletIcon size={20} style={{ marginRight: 8 }} />
+                                        <Text style={[styles.faircoinButtonText, { color: '#1b1f0a', fontWeight: 'bold', fontSize: 16 }]}>Open in FAIRWallet</Text>
+                                    </TouchableOpacity>
+                                    <TouchableOpacity style={[styles.faircoinButton, { backgroundColor: '#9ffb50', borderRadius: 18, marginTop: 10, width: '90%', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }]} onPress={handleCopyAddress}>
+                                        <FAIRWalletIcon size={20} style={{ marginRight: 8 }} />
+                                        <Text style={[styles.faircoinButtonText, { color: '#1b1f0a', fontWeight: 'bold', fontSize: 16 }]}>Copy Address</Text>
+                                    </TouchableOpacity>
+                                </>
+                            )}
+                            <View style={{ height: 18 }} />
+                            <Text style={styles.faircoinWaiting}>Waiting for payment...</Text>
+                            <Text style={styles.faircoinPlaceholder}>(This is a placeholder. Integrate with a QR code generator for production.)</Text>
+                        </View>
                     </View>
                 )}
-            </Card>
+            </View>
             <GroupedPillButtons
                 buttons={[
                     {
@@ -712,41 +732,57 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
             ]
         }]}
         >
-            <Card>
-                <View style={styles.reviewSecureRow}>
-                    <Ionicons name="shield-checkmark" size={20} color={colors.success || '#4BB543'} style={styles.reviewSecureIcon} />
-                    <Text style={styles.reviewSecureText}>Secure payment</Text>
-                </View>
-                <View style={styles.reviewRow}>
-                    <Text style={styles.reviewLabel}>Amount</Text>
-                    <Text style={styles.reviewValue}>{currencySymbol} {amount}</Text>
-                </View>
-                <View style={styles.reviewRow}>
-                    <Text style={styles.reviewLabel}>Method</Text>
-                    <View style={styles.reviewMethodRow}>
-                        <Ionicons name={PAYMENT_METHODS.find(m => m.key === paymentMethod)?.icon as any} size={18} color={colors.primary} style={styles.reviewMethodIcon} />
-                        <Text style={styles.reviewMethodText}>{PAYMENT_METHODS.find(m => m.key === paymentMethod)?.label}</Text>
-                    </View>
-                </View>
-                {paymentMethod === 'card' && (
-                    <View style={styles.reviewRow}>
-                        <Text style={styles.reviewLabel}>Card</Text>
-                        <Text style={styles.reviewValue}>{cardDetails.number.replace(/.(?=.{4})/g, '*')}</Text>
-                    </View>
-                )}
-                {paymentMethod === 'oxy' && (
-                    <View style={styles.reviewRow}>
-                        <Text style={styles.reviewLabel}>Oxy Pay Account</Text>
-                        <Text style={styles.reviewValue}>Balance: ⊜ 123.45</Text>
-                    </View>
-                )}
-                {paymentMethod === 'faircoin' && (
-                    <View style={styles.reviewRow}>
-                        <Text style={styles.reviewLabel}>FairCoin Wallet</Text>
-                        <Text style={styles.reviewValue}>Paid via QR</Text>
-                    </View>
-                )}
-            </Card>
+            <View style={styles.section}>
+                <Text style={styles.sectionTitle}>Review Payment</Text>
+
+                <GroupedSection
+                    items={[
+                        {
+                            id: 'secure-payment',
+                            icon: 'shield-checkmark',
+                            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 as any,
+                            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',
+                        }] : []),
+                    ]}
+                    theme={theme}
+                />
+            </View>
             <GroupedPillButtons
                 buttons={[
                     {
@@ -778,12 +814,18 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
             ]
         }]}
         >
-            <View style={styles.successContainer}>
-                <View style={styles.successIconBox}>
-                    <Ionicons name="checkmark-circle" size={64} color={colors.success || '#4BB543'} />
+            <View style={styles.section}>
+                <Text style={styles.sectionTitle}>Payment Complete</Text>
+
+                <View style={styles.successCard}>
+                    <View style={styles.successContent}>
+                        <Ionicons name="checkmark-circle" size={64} color={colors.success || '#4BB543'} style={styles.successIcon} />
+                        <Text style={styles.successMainTitle}>Payment Successful!</Text>
+                        <Text style={styles.successSubtitle}>Thank you for your payment.</Text>
+                        <View style={{ height: 18 }} />
+                        <Text style={styles.successMessage}>Your transaction has been processed successfully.</Text>
+                    </View>
                 </View>
-                <Text style={styles.successTitle}>Payment Successful!</Text>
-                <Text style={styles.successSubtitle}>Thank you for your payment.</Text>
             </View>
             <GroupedPillButtons
                 buttons={[
@@ -809,24 +851,42 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
             ]
         }]}
         >
-            <Card>
-                <Text style={{ color: colors.text, fontWeight: '600', fontSize: 16, marginBottom: 12 }}>Select a product to purchase:</Text>
-                {iapLoading && <Text style={{ color: colors.secondaryText }}>Loading products...</Text>}
-                {iapError && <Text style={{ color: 'red' }}>{iapError}</Text>}
-                {iapProducts.map(product => (
-                    <TouchableOpacity
-                        key={product.productId}
-                        style={[styles.paymentMethodButton, { marginBottom: 8 }]}
-                        onPress={() => handleIapBuy(product.productId)}
-                        disabled={iapLoading}
-                    >
-                        <Text style={{ color: colors.text, fontSize: 16 }}>{product.title} - {product.localizedPrice}</Text>
-                    </TouchableOpacity>
-                ))}
+            <View style={styles.section}>
+                <Text style={styles.sectionTitle}>Google Play Products</Text>
+
+                {iapLoading && (
+                    <View style={styles.loadingContainer}>
+                        <Text style={styles.loadingText}>Loading products...</Text>
+                    </View>
+                )}
+
+                {iapError && (
+                    <View style={styles.paymentErrorContainer}>
+                        <Text style={styles.paymentErrorText}>{iapError}</Text>
+                    </View>
+                )}
+
+                {!iapLoading && !iapError && (
+                    <GroupedSection
+                        items={iapProducts.map(product => ({
+                            id: product.productId,
+                            icon: 'pricetag',
+                            iconColor: colors.primary,
+                            title: product.title,
+                            subtitle: product.localizedPrice,
+                            onPress: () => handleIapBuy(product.productId),
+                            disabled: iapLoading,
+                        }))}
+                        theme={theme}
+                    />
+                )}
+
                 {iapPurchase && (
-                    <Text style={{ color: colors.success, marginTop: 10 }}>Purchase successful!</Text>
+                    <View style={styles.iapSuccessContainer}>
+                        <Text style={styles.iapSuccessText}>Purchase successful!</Text>
+                    </View>
                 )}
-            </Card>
+            </View>
             <GroupedPillButtons
                 buttons={[
                     {
@@ -854,28 +914,23 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
         }
     };
 
+    // Memoize theme-related calculations to prevent unnecessary recalculations
+    const themeStyles = useMemo(() => {
+        const isDarkTheme = theme === 'dark';
+        return {
+            isDarkTheme,
+            backgroundColor: isDarkTheme ? '#121212' : '#f2f2f2',
+            primaryColor: '#007AFF',
+        };
+    }, [theme]);
+
     return (
-        <KeyboardAvoidingView
-            style={[styles.container, { backgroundColor: colors.background }]}
-            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-        >
-            <StatusBar
-                barStyle={theme === 'dark' ? 'light-content' : 'dark-content'}
-                backgroundColor={colors.background}
-            />
-            <PaymentGatewayHeader
-                currentStep={currentStep}
-                totalSteps={5}
-                title={stepTitles[currentStep]}
-            />
-            <ScrollView
-                contentContainerStyle={styles.scrollContent}
-                showsVerticalScrollIndicator={false}
-                keyboardShouldPersistTaps="handled"
-            >
+        <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
+            {/* Content */}
+            <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
                 {renderCurrentStep()}
             </ScrollView>
-        </KeyboardAvoidingView>
+        </View>
     );
 };
 
@@ -883,17 +938,26 @@ const createStyles = (colors: any, theme: string) => StyleSheet.create({
     container: {
         flex: 1,
     },
-    scrollContent: {
-        flexGrow: 1,
-        paddingHorizontal: 24,
-        paddingBottom: 20,
+    content: {
+        flex: 1,
+        padding: 16,
     },
     stepContainer: {
-        flex: 1,
         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',
@@ -926,27 +990,7 @@ const createStyles = (colors: any, theme: string) => StyleSheet.create({
         color: colors.text,
         letterSpacing: -0.5,
     },
-    headerWrapper: {
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: '100%',
-        gap: 8,
-        paddingVertical: 8,
-    },
-    card: {
-        backgroundColor: '#fff',
-        borderRadius: 20,
-        padding: 28,
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.08,
-        shadowRadius: 8,
-        elevation: 3,
-        marginVertical: 8,
-        width: '100%',
-        alignSelf: 'center',
-    },
+
     paymentMethodButton: {
         flexDirection: 'row',
         alignItems: 'center',
@@ -1058,6 +1102,33 @@ const createStyles = (colors: any, theme: string) => StyleSheet.create({
         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,
@@ -1066,6 +1137,60 @@ const createStyles = (colors: any, theme: string) => StyleSheet.create({
     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,
@@ -1098,66 +1223,42 @@ const createStyles = (colors: any, theme: string) => StyleSheet.create({
         color: colors.secondaryText,
         textAlign: 'center',
     },
-    reviewSecureRow: {
-        flexDirection: 'row',
+    faircoinCard: {
+        backgroundColor: '#fff',
+        borderRadius: 16,
+        padding: 24,
+        marginBottom: 24,
         alignItems: 'center',
-        marginBottom: 12,
-    },
-    reviewSecureIcon: {
-        marginRight: 8,
-    },
-    reviewSecureText: {
-        color: colors.success || '#4BB543',
-        fontWeight: '600',
-        fontSize: 15,
+        width: '100%',
     },
-    reviewRow: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
+    faircoinContent: {
         alignItems: 'center',
-        marginBottom: 8,
-    },
-    reviewLabel: {
-        fontSize: 15,
-        color: colors.secondaryText,
-    },
-    reviewValue: {
-        fontSize: 18,
-        fontWeight: '700',
-        color: colors.text,
+        width: '100%',
     },
-    reviewMethodRow: {
-        flexDirection: 'row',
+
+    successCard: {
+        backgroundColor: '#fff',
+        borderRadius: 16,
+        padding: 24,
+        marginBottom: 24,
         alignItems: 'center',
+        width: '100%',
     },
-    reviewMethodIcon: {
-        marginRight: 6,
-    },
-    reviewMethodText: {
-        fontSize: 16,
-        color: colors.text,
-    },
-    successContainer: {
+    successContent: {
         alignItems: 'center',
-        justifyContent: 'center',
-        marginBottom: 24,
         width: '100%',
     },
-    successIconBox: {
-        backgroundColor: colors.success + '22',
-        borderRadius: 48,
-        padding: 18,
-        marginBottom: 12,
-        alignItems: 'center',
-        justifyContent: 'center',
+    successIcon: {
+        marginBottom: 8,
     },
-    successTitle: {
-        fontSize: 26,
-        fontWeight: '700',
+    successMainTitle: {
+        fontFamily: fontFamilies.phuduBold,
+        fontWeight: 'bold',
+        fontSize: 28,
         color: colors.success || '#4BB543',
-        marginBottom: 8,
+        marginBottom: 2,
         textAlign: 'center',
-        width: '100%',
+        letterSpacing: 0.5,
     },
     successSubtitle: {
         fontSize: 16,
@@ -1166,6 +1267,12 @@ const createStyles = (colors: any, theme: string) => StyleSheet.create({
         marginBottom: 8,
         width: '100%',
     },
+    successMessage: {
+        fontSize: 14,
+        color: colors.secondaryText,
+        textAlign: 'center',
+        marginBottom: 8,
+    },
     methodCard: {
         flexDirection: 'row',
         alignItems: 'center',
@@ -1272,15 +1379,7 @@ const createStyles = (colors: any, theme: string) => StyleSheet.create({
         minHeight: 36,
         marginBottom: 2,
     },
-    circleCheckOverlay: {
-        position: 'absolute',
-        bottom: -8,
-        right: -8,
-        backgroundColor: '#fff',
-        borderRadius: 16,
-        padding: 0,
-        zIndex: 2,
-    },
+
     headerStepIndicatorContainer: {
         marginVertical: 2,
         flexDirection: 'row',
@@ -1310,6 +1409,210 @@ const createStyles = (colors: any, theme: string) => StyleSheet.create({
         marginTop: 6,
         marginBottom: 2,
     },
+    // Google Play step styles
+    loadingContainer: {
+        padding: 16,
+        alignItems: 'center',
+        backgroundColor: '#fff',
+        borderRadius: 12,
+        marginBottom: 16,
+    },
+    loadingText: {
+        color: colors.secondaryText,
+        fontSize: 16,
+        fontStyle: 'italic',
+    },
+    paymentErrorContainer: {
+        padding: 16,
+        backgroundColor: '#ffebee',
+        borderRadius: 12,
+        marginBottom: 16,
+        borderWidth: 1,
+        borderColor: '#ffcdd2',
+    },
+    paymentErrorText: {
+        color: '#d32f2f',
+        fontSize: 14,
+        textAlign: 'center',
+    },
+    iapSuccessContainer: {
+        padding: 16,
+        backgroundColor: '#e8f5e8',
+        borderRadius: 12,
+        marginTop: 16,
+        borderWidth: 1,
+        borderColor: '#c8e6c9',
+    },
+    iapSuccessText: {
+        color: colors.success || '#4BB543',
+        fontSize: 16,
+        textAlign: 'center',
+        fontWeight: '600',
+    },
+    // 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;