112 lines
3.5 KiB
TypeScript
112 lines
3.5 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { View, Text, Alert } from 'react-native';
|
|
import { useAppTheme } from '@theme';
|
|
import { PrimaryButton, LocationRow } from '@components';
|
|
import { useAppDispatch, useAppSelector } from '@store';
|
|
import { acceptJob, rejectJob } from '@store/slices/jobSlice';
|
|
import { useNavigation } from '@react-navigation/native';
|
|
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
|
|
import { AppStackParamList } from '@navigation/navigationTypes';
|
|
import { RouteNames } from '@utils/constants';
|
|
import { formatCurrency } from '@utils/formatters';
|
|
import { getStyles } from './newJobRequestScreen.styles';
|
|
|
|
export const NewJobRequestScreen: React.FC = () => {
|
|
const { colors } = useAppTheme();
|
|
const styles = getStyles(colors);
|
|
const dispatch = useAppDispatch();
|
|
const navigation = useNavigation<NativeStackNavigationProp<AppStackParamList>>();
|
|
|
|
const newJobOffer = useAppSelector((state) => state.job.newJobOffer);
|
|
const [secondsLeft, setSecondsLeft] = useState(15);
|
|
|
|
useEffect(() => {
|
|
if (secondsLeft <= 0) {
|
|
handleReject();
|
|
return;
|
|
}
|
|
const timer = setInterval(() => {
|
|
setSecondsLeft((prev) => prev - 1);
|
|
}, 1000);
|
|
return () => clearInterval(timer);
|
|
}, [secondsLeft]);
|
|
|
|
const handleAccept = () => {
|
|
dispatch(acceptJob());
|
|
Alert.alert('Job Accepted', 'Heading to Cafe Coffee Day pickup location.', [
|
|
{
|
|
text: 'OK',
|
|
onPress: () => navigation.navigate(RouteNames.OrderAccepted),
|
|
},
|
|
]);
|
|
};
|
|
|
|
const handleReject = () => {
|
|
dispatch(rejectJob());
|
|
navigation.navigate(RouteNames.BottomTabs, { screen: RouteNames.Dashboard });
|
|
};
|
|
|
|
if (!newJobOffer) return null;
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.modalContent}>
|
|
{/* Header Row with Title and Countdown */}
|
|
<View style={styles.headerRow}>
|
|
<Text style={styles.modalTitle}>New Delivery Request</Text>
|
|
<View style={styles.timerContainer}>
|
|
<Text style={styles.timerText}>{secondsLeft}s</Text>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Route Details Card */}
|
|
<View style={styles.routeContainer}>
|
|
<LocationRow
|
|
type="pickup"
|
|
name="Cafe Coffee Day"
|
|
address={newJobOffer.pickupAddress}
|
|
/>
|
|
<View style={styles.spacer} />
|
|
<LocationRow
|
|
type="drop"
|
|
name="Rohit Sharma"
|
|
address={newJobOffer.dropAddress}
|
|
/>
|
|
</View>
|
|
|
|
{/* Earnings & Distance Details */}
|
|
<View style={styles.detailsRow}>
|
|
<View style={styles.detailBox}>
|
|
<Text style={styles.detailLabel}>Estimated Earnings</Text>
|
|
<Text style={styles.detailValue}>{formatCurrency(newJobOffer.amount)}</Text>
|
|
</View>
|
|
|
|
<View style={styles.divider} />
|
|
|
|
<View style={styles.detailBox}>
|
|
<Text style={styles.detailLabel}>Distance</Text>
|
|
<Text style={styles.detailValue}>{newJobOffer.distance} km</Text>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Button Actions */}
|
|
<View style={styles.btnRow}>
|
|
<PrimaryButton
|
|
title="Reject"
|
|
onPress={handleReject}
|
|
style={styles.rejectBtn}
|
|
textStyle={{ color: colors.text }}
|
|
/>
|
|
<PrimaryButton
|
|
title="Accept"
|
|
onPress={handleAccept}
|
|
style={styles.acceptBtn}
|
|
/>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default NewJobRequestScreen;
|