47 lines
1.6 KiB
TypeScript
47 lines
1.6 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { View, Text, ScrollView } from 'react-native';
|
|
import { getStyles } from './checkoutPaymentScreen.styles';
|
|
import { Header, StepProgress, PaymentOption, PrimaryButton } from '@components';
|
|
import { useAppTheme } from '@theme';
|
|
|
|
const CHECKOUT_STEPS = [
|
|
{ key: 'address', label: 'Address' },
|
|
{ key: 'payment', label: 'Payment' },
|
|
{ key: 'confirm', label: 'Confirm' },
|
|
];
|
|
|
|
const PAYMENT_METHODS = [
|
|
{ id: 'upi', type: 'UPI' as const, label: 'UPI (Google Pay, PhonePe)' },
|
|
{ id: 'card', type: 'Card' as const, label: 'Credit / Debit Card' },
|
|
{ id: 'wallet', type: 'Wallet' as const, label: 'Wallet' },
|
|
{ id: 'cod', type: 'COD' as const, label: 'Cash on Delivery' },
|
|
];
|
|
|
|
export const CheckoutPaymentScreen: React.FC = () => {
|
|
const { colors } = useAppTheme();
|
|
const styles = getStyles(colors);
|
|
const [selectedMethod, setSelectedMethod] = useState('upi');
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<Header title="Checkout" onBack={() => {}} />
|
|
<StepProgress steps={CHECKOUT_STEPS} activeStep={1} />
|
|
<ScrollView contentContainerStyle={styles.content}>
|
|
<Text style={styles.sectionTitle}>Select Payment Method</Text>
|
|
{PAYMENT_METHODS.map((method) => (
|
|
<PaymentOption
|
|
key={method.id}
|
|
type={method.type}
|
|
label={method.label}
|
|
isSelected={selectedMethod === method.id}
|
|
onSelect={() => setSelectedMethod(method.id)}
|
|
/>
|
|
))}
|
|
</ScrollView>
|
|
<View style={styles.footer}>
|
|
<PrimaryButton title="Place Order" onPress={() => {}} />
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|