From 3f3fbad5561b35af110b4225b941154dac19c36f Mon Sep 17 00:00:00 2001 From: Helena Date: Thu, 18 Sep 2025 10:17:07 +0300 Subject: [PATCH] mobile improvements --- .../_components/booking/booking-container.tsx | 41 ++----------------- .../_components/booking/booking.context.ts | 4 +- .../_components/booking/booking.provider.tsx | 2 +- .../_components/booking/location-selector.tsx | 7 +--- .../_components/booking/service-selector.tsx | 2 +- .../(user)/_components/booking/time-slots.tsx | 4 +- packages/ui/src/shadcn/calendar.tsx | 4 +- 7 files changed, 12 insertions(+), 52 deletions(-) diff --git a/app/home/(user)/_components/booking/booking-container.tsx b/app/home/(user)/_components/booking/booking-container.tsx index d7ca8cc..77caa97 100644 --- a/app/home/(user)/_components/booking/booking-container.tsx +++ b/app/home/(user)/_components/booking/booking-container.tsx @@ -1,51 +1,16 @@ 'use client'; -import { isBefore, isSameDay } from 'date-fns'; -import { uniq } from 'lodash'; - -import { Calendar } from '@kit/ui/shadcn/calendar'; -import { Card } from '@kit/ui/shadcn/card'; - import { ServiceCategory } from '../service-categories'; -import { BookingProvider, useBooking } from './booking.provider'; +import BookingCalendar from './booking-calendar'; +import { BookingProvider } from './booking.provider'; import LocationSelector from './location-selector'; import ServiceSelector from './service-selector'; import TimeSlots from './time-slots'; -const BookingCalendar = () => { - const { selectedDate, setSelectedDate, isLoadingTimeSlots, timeSlots } = - useBooking(); - const availableDates = uniq(timeSlots?.map((timeSlot) => timeSlot.StartTime)); - - return ( - - { - const today = new Date(); - today.setHours(0, 0, 0, 0); - return ( - isBefore(date, today) || - !availableDates.some((dateWithBooking) => - isSameDay(date, dateWithBooking), - ) - ); - }} - className="rounded-md border" - {...(isLoadingTimeSlots && { - className: 'rounded-md border opacity-50 pointer-events-none', - })} - /> - - ); -}; - const BookingContainer = ({ category }: { category: ServiceCategory }) => { return ( -
+
diff --git a/app/home/(user)/_components/booking/booking.context.ts b/app/home/(user)/_components/booking/booking.context.ts index ebff73d..ce59dba 100644 --- a/app/home/(user)/_components/booking/booking.context.ts +++ b/app/home/(user)/_components/booking/booking.context.ts @@ -55,12 +55,12 @@ const BookingContext = createContext<{ selectedService: StoreProduct | null; locations: Location[] | null; selectedLocationId: number | null; - selectedDate?: Date | null; + selectedDate?: Date; isLoadingTimeSlots?: boolean; setSelectedService: (selectedService: StoreProduct | null) => void; setSelectedLocationId: (selectedLocationId: number | null) => void; updateTimeSlots: (serviceIds: number[]) => Promise; - setSelectedDate: (selectedDate: Date | null) => void; + setSelectedDate: (selectedDate?: Date) => void; }>({ timeSlots: null, selectedService: null, diff --git a/app/home/(user)/_components/booking/booking.provider.tsx b/app/home/(user)/_components/booking/booking.provider.tsx index 0bf823b..fcde360 100644 --- a/app/home/(user)/_components/booking/booking.provider.tsx +++ b/app/home/(user)/_components/booking/booking.provider.tsx @@ -27,7 +27,7 @@ export const BookingProvider: React.FC<{ const [selectedLocationId, setSelectedLocationId] = useState( null, ); - const [selectedDate, setSelectedDate] = useState(); + const [selectedDate, setSelectedDate] = useState(); const [timeSlots, setTimeSlots] = useState(null); const [locations, setLocations] = useState(null); const [isLoadingTimeSlots, setIsLoadingTimeSlots] = useState(false); diff --git a/app/home/(user)/_components/booking/location-selector.tsx b/app/home/(user)/_components/booking/location-selector.tsx index f792fa5..4cb02aa 100644 --- a/app/home/(user)/_components/booking/location-selector.tsx +++ b/app/home/(user)/_components/booking/location-selector.tsx @@ -9,12 +9,7 @@ import { useBooking } from './booking.provider'; const LocationSelector = () => { const { t } = useTranslation(); - const { - selectedService, - selectedLocationId, - setSelectedLocationId, - locations, - } = useBooking(); + const { selectedLocationId, setSelectedLocationId, locations } = useBooking(); const onLocationSelect = (locationId: number | string | null) => { if (locationId === 'all') return setSelectedLocationId(null); diff --git a/app/home/(user)/_components/booking/service-selector.tsx b/app/home/(user)/_components/booking/service-selector.tsx index 0c60a3e..42540d1 100644 --- a/app/home/(user)/_components/booking/service-selector.tsx +++ b/app/home/(user)/_components/booking/service-selector.tsx @@ -22,7 +22,7 @@ const ServiceSelector = ({ products }: { products: StoreProduct[] }) => { const onServiceSelect = async (productId: StoreProduct['id']) => { const product = products.find((p) => p.id === productId); - setSelectedService(product); + setSelectedService(product ?? null); setCollapsed(false); }; diff --git a/app/home/(user)/_components/booking/time-slots.tsx b/app/home/(user)/_components/booking/time-slots.tsx index d74befc..587ee95 100644 --- a/app/home/(user)/_components/booking/time-slots.tsx +++ b/app/home/(user)/_components/booking/time-slots.tsx @@ -156,7 +156,7 @@ const TimeSlots = ({ countryCode }: { countryCode: string }) => { booking.selectedService?.variants?.[0]?.calculated_price ?.calculated_amount; return ( - +
{formatDateAndTime(timeSlot.StartTime.toString())}
@@ -181,7 +181,7 @@ const TimeSlots = ({ countryCode }: { countryCode: string }) => { {timeSlot.location?.address}
-
+
{formatCurrency({ currencyCode: 'EUR', diff --git a/packages/ui/src/shadcn/calendar.tsx b/packages/ui/src/shadcn/calendar.tsx index 138278d..967afa2 100644 --- a/packages/ui/src/shadcn/calendar.tsx +++ b/packages/ui/src/shadcn/calendar.tsx @@ -34,10 +34,10 @@ function Calendar({ nav_button_previous: 'absolute left-1', nav_button_next: 'absolute right-1', table: 'w-full border-collapse space-y-1', - head_row: 'flex', + head_row: 'flex justify-evenly', head_cell: 'text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]', - row: 'flex w-full mt-2', + row: 'flex w-full mt-2 justify-evenly', cell: 'text-center text-sm p-0 relative [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-md focus-within:relative focus-within:z-20', day: cn( buttonVariants({ variant: 'ghost' }),