83 lines
3.1 KiB
TypeScript
83 lines
3.1 KiB
TypeScript
import React, { useState } from 'react';
|
|
import {
|
|
View,
|
|
Text,
|
|
TouchableOpacity,
|
|
ScrollView,
|
|
} from 'react-native';
|
|
import { useNavigation } from '@react-navigation/native';
|
|
import { StackNavigationProp } from '@react-navigation/stack';
|
|
import { getStyles } from './checkoutAddressScreen.styles';
|
|
import { Header, StepProgress, PrimaryButton } from '@components';
|
|
import { useAppTheme } from '@theme';
|
|
import { AppStackParamList } from '../../../navigation/appStack';
|
|
|
|
type CheckoutAddressNavProp = StackNavigationProp<AppStackParamList, 'CheckoutAddressScreen'>;
|
|
|
|
const CHECKOUT_STEPS = [
|
|
{ key: 'address', label: 'Address' },
|
|
{ key: 'payment', label: 'Payment' },
|
|
{ key: 'confirm', label: 'Confirm' },
|
|
];
|
|
|
|
export const CheckoutAddressScreen: React.FC = () => {
|
|
const { colors } = useAppTheme();
|
|
const styles = getStyles(colors);
|
|
const navigation = useNavigation<CheckoutAddressNavProp>();
|
|
const [deliveryOption, setDeliveryOption] = useState<'standard' | 'express'>('standard');
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<Header title="Checkout" onBack={() => navigation.goBack()} />
|
|
<StepProgress steps={CHECKOUT_STEPS} activeStep={0} />
|
|
<ScrollView contentContainerStyle={styles.content}>
|
|
<View style={styles.addressCard}>
|
|
<Text style={styles.addressLabel}>Deliver to</Text>
|
|
<Text style={styles.addressText}>
|
|
Koramangala 4th Block, Bengaluru, 560034
|
|
</Text>
|
|
<Text style={styles.addressSubtext}>Home</Text>
|
|
</View>
|
|
|
|
<Text style={styles.sectionTitle}>Delivery Option</Text>
|
|
<TouchableOpacity
|
|
style={[
|
|
styles.optionCard,
|
|
deliveryOption === 'standard' && styles.optionCardSelected,
|
|
]}
|
|
onPress={() => setDeliveryOption('standard')}
|
|
activeOpacity={0.7}
|
|
>
|
|
<View style={styles.optionInfo}>
|
|
<Text style={styles.optionTitle}>Standard Delivery</Text>
|
|
<Text style={styles.optionSubtext}>Free • 25-30 min</Text>
|
|
</View>
|
|
<View style={[styles.radio, deliveryOption === 'standard' && styles.radioSelected]}>
|
|
{deliveryOption === 'standard' && <View style={styles.radioInner} />}
|
|
</View>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={[
|
|
styles.optionCard,
|
|
deliveryOption === 'express' && styles.optionCardSelected,
|
|
]}
|
|
onPress={() => setDeliveryOption('express')}
|
|
activeOpacity={0.7}
|
|
>
|
|
<View style={styles.optionInfo}>
|
|
<Text style={styles.optionTitle}>Express Delivery</Text>
|
|
<Text style={styles.optionSubtext}>₹40 • 10-15 min</Text>
|
|
</View>
|
|
<View style={[styles.radio, deliveryOption === 'express' && styles.radioSelected]}>
|
|
{deliveryOption === 'express' && <View style={styles.radioInner} />}
|
|
</View>
|
|
</TouchableOpacity>
|
|
</ScrollView>
|
|
<View style={styles.footer}>
|
|
<PrimaryButton title="Continue to Payment" onPress={() => navigation.navigate('CheckoutPaymentScreen')} />
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|