59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, TouchableOpacity } from 'react-native';
|
|
import { OrderHistoryCardProps } from './orderHistoryCard.props';
|
|
import { getStyles } from './orderHistoryCard.styles';
|
|
import { useAppTheme } from '@theme';
|
|
|
|
export const OrderHistoryCard: React.FC<OrderHistoryCardProps> = ({
|
|
providerName,
|
|
providerImage,
|
|
orderDate,
|
|
status,
|
|
total,
|
|
onReorder,
|
|
onDetails,
|
|
}) => {
|
|
const { colors } = useAppTheme();
|
|
const styles = getStyles(colors);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.header}>
|
|
<View style={styles.image}>
|
|
<Text style={styles.imagePlaceholder}>{providerImage || '🏪'}</Text>
|
|
</View>
|
|
<View style={styles.headerInfo}>
|
|
<Text style={styles.providerName}>{providerName}</Text>
|
|
<Text style={styles.orderDate}>{orderDate}</Text>
|
|
</View>
|
|
<View style={styles.statusBadge}>
|
|
<Text style={styles.statusText}>{status}</Text>
|
|
</View>
|
|
</View>
|
|
<View style={styles.footer}>
|
|
<Text style={styles.total}>₹{total}</Text>
|
|
<View style={styles.actions}>
|
|
{onReorder && (
|
|
<TouchableOpacity
|
|
style={styles.actionButton}
|
|
onPress={onReorder}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Text style={styles.actionButtonText}>Reorder</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
{onDetails && (
|
|
<TouchableOpacity
|
|
style={styles.actionButton}
|
|
onPress={onDetails}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Text style={styles.actionButtonText}>Details</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|