import Button from '@/components/ui/Button'; import Head from 'next/head'; import Image from 'next/image'; import { useRouter } from 'next/router'; import { Col, Row, Spinner } from 'react-bootstrap'; import style from './index.module.scss'; import { useGetCategoryListQuery } from '@/lib/redux/services/general/category.api'; import { setBookingCategory } from '@/lib/redux/slices/booking.slice'; import { useDispatch, useSelector } from 'react-redux'; import { useEffect, useState } from 'react'; import { RootState } from '@reduxjs/toolkit/query'; const CreateNewBooking = () => { const router = useRouter(); const dispatch = useDispatch(); // Get category list const { data, error, isLoading } = useGetCategoryListQuery(); // Get selected category from Redux const selectedCategoryIdFromStore = useSelector((state: RootState) => state.bookingJourney?.category); // Local state for UI highlight const [selectedCategoryId, setSelectedCategoryId] = useState(null); useEffect(() => { if (selectedCategoryIdFromStore) { setSelectedCategoryId(selectedCategoryIdFromStore); } }, [selectedCategoryIdFromStore]); const handleCategorySelect = (categoryId) => { dispatch(setBookingCategory(categoryId)); router.push('/auth/storage-unit'); }; return ( <> Select Category | Deliver X

Select Category

{isLoading ? (
) : error ? (

Error fetching categories!

) : ( {data?.data?.map((category) => (
handleCategorySelect(category._id)} className={` ${style.createNewBooking} ${selectedCategoryId === category._id ? style.active : ''} gap-3 cursor-pointer d-flex align-items-center px-xxl-4 px-md-3 px-sm-2 `} > {category.image?.file ? ( {category.name} ) : ( Icon )}
{category.name}
))} )}
); }; export default CreateNewBooking;