65 lines
2.2 KiB
TypeScript
65 lines
2.2 KiB
TypeScript
import React from 'react';
|
|
import { View, Text } from 'react-native';
|
|
import { getStyles } from './orderTrackingScreen.styles';
|
|
import { Header, PrimaryButton } from '@components';
|
|
import { useAppTheme } from '@theme';
|
|
|
|
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);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<Header title="Track Order" onBack={() => {}} />
|
|
<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}>
|
|
<Text style={styles.supportTitle}>Need help?</Text>
|
|
<Text style={styles.supportSubtext}>Contact support for assistance</Text>
|
|
<PrimaryButton title="Contact Support" onPress={() => {}} />
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|