79 lines
3.0 KiB
TypeScript
79 lines
3.0 KiB
TypeScript
import React from 'react';
|
|
import { View, Text } from 'react-native';
|
|
import { useNavigation, useRoute, RouteProp } from '@react-navigation/native';
|
|
import { StackNavigationProp } from '@react-navigation/stack';
|
|
import { getStyles } from './orderTrackingScreen.styles';
|
|
import { Header, PrimaryButton } from '@components';
|
|
import { useAppTheme } from '@theme';
|
|
import { AppStackParamList } from '../../../navigation/appStack';
|
|
|
|
type OrderTrackingNavProp = StackNavigationProp<AppStackParamList, 'OrderTrackingScreen'>;
|
|
type OrderTrackingRouteProp = RouteProp<AppStackParamList, 'OrderTrackingScreen'>;
|
|
|
|
const MILESTONES = [
|
|
{ key: 'placed', label: 'Order Placed', time: '12:30 PM' },
|
|
{ key: 'confirmed', label: 'Confirmed', time: '12:32 PM' },
|
|
{ key: 'dispatched', label: 'Dispatched', time: '12:40 PM' },
|
|
{ key: 'delivered', label: 'Delivered', time: 'Pending' },
|
|
];
|
|
|
|
export const OrderTrackingScreen: React.FC = () => {
|
|
const { colors } = useAppTheme();
|
|
const styles = getStyles(colors);
|
|
const navigation = useNavigation<OrderTrackingNavProp>();
|
|
const route = useRoute<OrderTrackingRouteProp>();
|
|
const orderId = route.params?.orderId || 'ORD-123456';
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<Header title={`Track Order (${orderId})`} onBack={() => navigation.goBack()} />
|
|
<View style={styles.content}>
|
|
<View style={styles.timeline}>
|
|
{MILESTONES.map((milestone, index) => (
|
|
<View key={milestone.key} style={styles.milestoneRow}>
|
|
<View style={styles.milestoneIndicator}>
|
|
<View
|
|
style={[
|
|
styles.dot,
|
|
index <= 2 && styles.dotActive,
|
|
index === 2 && styles.dotCurrent,
|
|
]}
|
|
/>
|
|
{index < MILESTONES.length - 1 && (
|
|
<View
|
|
style={[
|
|
styles.line,
|
|
index < 2 && styles.lineActive,
|
|
]}
|
|
/>
|
|
)}
|
|
</View>
|
|
<View style={styles.milestoneInfo}>
|
|
<Text
|
|
style={[
|
|
styles.milestoneLabel,
|
|
index <= 2 && styles.milestoneLabelActive,
|
|
]}
|
|
>
|
|
{milestone.label}
|
|
</Text>
|
|
<Text style={styles.milestoneTime}>{milestone.time}</Text>
|
|
</View>
|
|
</View>
|
|
))}
|
|
</View>
|
|
<View style={styles.supportCard}>
|
|
<PrimaryButton
|
|
title="View Live Map"
|
|
onPress={() => navigation.navigate('LiveTrackingScreen', { orderId })}
|
|
style={{ marginBottom: 16 }}
|
|
/>
|
|
<Text style={styles.supportTitle}>Need help?</Text>
|
|
<Text style={styles.supportSubtext}>Contact support for assistance</Text>
|
|
<PrimaryButton title="Contact Support" onPress={() => navigation.navigate('HelpSupportScreen')} />
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|