import { BackButton, Text, Textarea } from '@/components'; import AddressCard from '@/components/Cards/AddressCard'; import CustomModal from '@/components/CustomModal'; import UploadImager from '@/components/UploadImager'; import Button from '@/components/ui/Button'; import Head from 'next/head'; import Link from 'next/link'; import { useRouter } from 'next/router'; import React, { useEffect, useState } from 'react'; import { Col, Row } from 'react-bootstrap'; import { useMediaQuery } from 'react-responsive'; import { useDispatch, useSelector } from 'react-redux'; import { setBookingDescription } from '@/lib/redux/slices/booking.slice'; import { RootState } from '@/lib/redux/store'; import { useCreateBookingMutation } from '@/lib/redux/services/user/booking.api'; import toast from 'react-hot-toast'; import { useSession } from 'next-auth/react'; import { start } from 'repl'; interface Contact { name: string; phone: string; } const WhatAreYouMoving: React.FC = () => { const dispatch = useDispatch(); const router = useRouter(); const isTablet = useMediaQuery({ query: '(max-width: 992px)' }); const { data: session } = useSession(); const bookingData = useSelector((state: RootState) => state.bookingJourney); const [description, setDescription] = useState(bookingData?.description || ''); const [contacts, setContacts] = useState( bookingData?.additional_contacts?.length > 0 ? bookingData.additional_contacts : [{ name: '', phone: '' }] ); const [getEstimate, setGetEstimate] = useState(false); const [createBooking, { isLoading }] = useCreateBookingMutation(); // 👈 RTK mutation hook useEffect(() => { const simpleLayout = document.getElementById('simple-layout'); if (simpleLayout) { simpleLayout.classList.add('what-are-you-moving'); } }, []); const handleGetEstimate = () => { dispatch( setBookingDescription({ pickupLocation: bookingData.pick_up, destinationLocation: bookingData.drop_off, deliveryDate: bookingData.date, description: bookingData.description, additional_contacts: contacts, }) ); setGetEstimate(true); }; const handleBookNow = async () => { const payload = { pick_up: { ...bookingData.pick_up, lat: String(bookingData.pick_up.lat), // Ensure lat is a string long: String(bookingData.pick_up.long), // Ensure long is a string }, drop_off: { ...bookingData.drop_off, lat: String(bookingData.drop_off.lat), // Ensure lat is a string long: String(bookingData.drop_off.long), // Ensure long is a string }, category: bookingData.category, vehicle_category: bookingData.vehicle_category, date: bookingData.date, time_slot: { start: bookingData.time_slot?.start || "", end: bookingData.time_slot?.end || "", }, description: description, est_fare: bookingData.est_fare || '100', additional_contacts: contacts.length > 0 ? { name: contacts[0].name, phone_number: contacts[0].phone, } : { name: '', phone_number: '' }, }; try { const token = session?.user?.token console.log(token, "token"); if (!token) { toast.error('Token not found. Please try again.'); return; } const res = await createBooking({ body: payload, token, }).unwrap(); router.push('/user'); } catch (error) { console.error('Booking failed:', error.message); toast(error.data.message); } }; const addContact = () => setContacts([...contacts, { name: '', phone: '' }]); const handleRemoveContact = (index: number) => setContacts(contacts.filter((_, i) => i !== index)); return ( <> What Are you Moving | Deliver X

{isTablet && } What are you moving?

Description