101 lines
3.4 KiB
TypeScript
101 lines
3.4 KiB
TypeScript
import React, { useState } from 'react';
|
|
import {
|
|
View,
|
|
Text,
|
|
FlatList,
|
|
TouchableOpacity,
|
|
} from 'react-native';
|
|
import { useNavigation, CompositeNavigationProp } from '@react-navigation/native';
|
|
import { BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
|
|
import { StackNavigationProp } from '@react-navigation/stack';
|
|
import { getStyles } from './myOrdersScreen.styles';
|
|
import { Header, OrderHistoryCard } from '@components';
|
|
import { useAppTheme } from '@theme';
|
|
import { AppStackParamList } from '../../../navigation/appStack';
|
|
import { MainTabParamList } from '../../../navigation/mainTabNavigator';
|
|
|
|
type MyOrdersNavProp = CompositeNavigationProp<
|
|
BottomTabNavigationProp<MainTabParamList, 'MyOrdersScreen'>,
|
|
StackNavigationProp<AppStackParamList>
|
|
>;
|
|
|
|
const TABS = ['All', 'Ongoing', 'Completed'];
|
|
const mockOrders = [
|
|
{ id: 'ORD-591283', providerName: 'Pizza Planet', providerImage: '', orderDate: '29 Jun 2026', status: 'Delivered', total: 599 },
|
|
{ id: 'ORD-771239', providerName: 'Fresh Mart', providerImage: '', orderDate: '28 Jun 2026', status: 'Ongoing', total: 349 },
|
|
{ id: 'ORD-108239', providerName: 'Burger Barn', providerImage: '', orderDate: '27 Jun 2026', status: 'Delivered', total: 449 },
|
|
];
|
|
|
|
export const MyOrdersScreen: React.FC = () => {
|
|
const { colors } = useAppTheme();
|
|
const styles = getStyles(colors);
|
|
const navigation = useNavigation<MyOrdersNavProp>();
|
|
const [activeTab, setActiveTab] = useState('All');
|
|
|
|
const filteredOrders = activeTab === 'All'
|
|
? mockOrders
|
|
: activeTab === 'Ongoing'
|
|
? mockOrders.filter((o) => o.status === 'Ongoing')
|
|
: mockOrders.filter((o) => o.status === 'Delivered');
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<Header title="My Orders" />
|
|
<View style={styles.tabRow}>
|
|
{TABS.map((tab) => (
|
|
<TouchableOpacity
|
|
key={tab}
|
|
style={[
|
|
styles.tab,
|
|
activeTab === tab && styles.tabActive,
|
|
]}
|
|
onPress={() => setActiveTab(tab)}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Text
|
|
style={[
|
|
styles.tabText,
|
|
activeTab === tab && styles.tabTextActive,
|
|
]}
|
|
>
|
|
{tab}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
<FlatList
|
|
data={filteredOrders}
|
|
keyExtractor={(item) => item.id}
|
|
renderItem={({ item }) => (
|
|
<OrderHistoryCard
|
|
providerName={item.providerName}
|
|
providerImage={item.providerImage}
|
|
orderDate={item.orderDate}
|
|
status={item.status}
|
|
total={item.total}
|
|
onReorder={() => {
|
|
navigation.navigate('ProviderDetailsScreen', {
|
|
providerId: 'p1',
|
|
providerName: item.providerName,
|
|
});
|
|
}}
|
|
onDetails={() => {
|
|
if (item.status === 'Ongoing') {
|
|
navigation.navigate('OrderTrackingScreen', { orderId: item.id });
|
|
} else {
|
|
navigation.navigate('OrderDeliveredScreen', { orderId: item.id });
|
|
}
|
|
}}
|
|
/>
|
|
)}
|
|
contentContainerStyle={styles.list}
|
|
ListEmptyComponent={
|
|
<View style={styles.empty}>
|
|
<Text style={styles.emptyText}>No orders found</Text>
|
|
</View>
|
|
}
|
|
/>
|
|
</View>
|
|
);
|
|
};
|