89 lines
2.8 KiB
TypeScript

import React from 'react';
import { View, Text } from 'react-native';
import Svg, { Circle, Path } from 'react-native-svg';
import { useAppTheme } from '@theme';
import { PrimaryButton } from '@components';
import { useNavigation, CommonActions } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { AppStackParamList } from '@navigation/navigationTypes';
import { RouteNames } from '@utils/constants';
import { getStyles } from './deliveryCompletedScreen.styles';
export const DeliveryCompletedScreen: React.FC = () => {
const { colors } = useAppTheme();
const styles = getStyles(colors);
const navigation = useNavigation<NativeStackNavigationProp<AppStackParamList>>();
const handleGoToDashboard = () => {
// Reset route stack and go back to Dashboard
navigation.dispatch(
CommonActions.reset({
index: 0,
routes: [
{
name: 'BottomTabs',
state: {
routes: [{ name: RouteNames.Dashboard }],
},
},
],
})
);
};
return (
<View style={styles.container}>
{/* Checkmark Vector */}
<View style={styles.illustrationContainer}>
<Svg width="120" height="120" viewBox="0 0 120 120" fill="none">
<Circle cx="60" cy="60" r="50" fill={colors.primaryLight} />
<Circle cx="60" cy="60" r="40" fill={colors.primary} />
<Path
d="M 44 62 L 54 72 L 76 46"
stroke="#FFFFFF"
strokeWidth="6"
strokeLinecap="round"
strokeLinejoin="round"
/>
</Svg>
</View>
<Text style={styles.title}>Delivery Completed!</Text>
<Text style={styles.earnedText}>
You earned <Text style={styles.amount}>78.00</Text> on this delivery
</Text>
{/* Summary Card */}
<View style={styles.summaryCard}>
<View style={styles.summaryRow}>
<Text style={styles.summaryLabel}>Order ID</Text>
<Text style={styles.summaryVal}>#ORD125487</Text>
</View>
<View style={styles.summaryRow}>
<Text style={styles.summaryLabel}>Delivery Distance</Text>
<Text style={styles.summaryVal}>1.2 km</Text>
</View>
<View style={styles.summaryRow}>
<Text style={styles.summaryLabel}>Time Taken</Text>
<Text style={styles.summaryVal}>15 mins</Text>
</View>
<View style={styles.summaryRow}>
<Text style={styles.summaryLabel}>Payment Mode</Text>
<Text style={styles.summaryVal}>Online Paid</Text>
</View>
</View>
<PrimaryButton
title="Go to Dashboard"
onPress={handleGoToDashboard}
style={styles.button}
/>
</View>
);
};
export default DeliveryCompletedScreen;