64 lines
1.8 KiB
TypeScript
64 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { View, Text } from 'react-native';
|
|
import { useAppTheme } from '@theme';
|
|
import { Card } from '../card/card';
|
|
import { LocationRow } from '../locationRow/locationRow';
|
|
import { formatCurrency, formatDistance } from '@utils/formatters';
|
|
import { getStyles } from './orderCard.styles';
|
|
|
|
interface OrderCardProps {
|
|
pickupName: string;
|
|
pickupAddress: string;
|
|
dropName: string;
|
|
dropAddress: string;
|
|
amount: string;
|
|
distance: string;
|
|
itemCount?: number;
|
|
paymentType?: string;
|
|
onPress?: () => void;
|
|
}
|
|
|
|
export const OrderCard: React.FC<OrderCardProps> = ({
|
|
pickupName,
|
|
pickupAddress,
|
|
dropName,
|
|
dropAddress,
|
|
amount,
|
|
distance,
|
|
itemCount,
|
|
paymentType,
|
|
onPress,
|
|
}) => {
|
|
const { colors } = useAppTheme();
|
|
const styles = getStyles(colors);
|
|
|
|
return (
|
|
<Card onPress={onPress}>
|
|
<LocationRow type="pickup" name={pickupName} address={pickupAddress} />
|
|
<View style={styles.spacer} />
|
|
<LocationRow type="drop" name={dropName} address={dropAddress} />
|
|
|
|
<View style={styles.detailsRow}>
|
|
<View>
|
|
<Text style={styles.label}>ESTIMATED EARNINGS</Text>
|
|
<Text style={styles.amount}>{formatCurrency(amount)}</Text>
|
|
</View>
|
|
<View style={styles.centerCol}>
|
|
<Text style={styles.label}>DISTANCE</Text>
|
|
<Text style={styles.distance}>{formatDistance(distance)}</Text>
|
|
</View>
|
|
{(itemCount !== undefined || paymentType !== undefined) && (
|
|
<View style={styles.endCol}>
|
|
<Text style={styles.label}>DETAILS</Text>
|
|
<Text style={styles.value}>
|
|
{itemCount ? `${itemCount} items` : ''}
|
|
{paymentType ? ` • ${paymentType.toUpperCase()}` : ''}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
</Card>
|
|
);
|
|
};
|
|
export default OrderCard;
|