mobile improvements

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 (
-    <Card className="mb-4">
-      <Calendar
-        mode="single"
-        selected={selectedDate}
-        onSelect={setSelectedDate}
-        disabled={(date) => {
-          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',
-        })}
-      />
-    </Card>
-  );
-};
-
 const BookingContainer = ({ category }: { category: ServiceCategory }) => {
   return (
     <BookingProvider category={category}>
-      <div className="flex max-h-full flex-row gap-6">
+      <div className="xs:flex-row flex max-h-full flex-col gap-6">
         <div className="flex flex-col">
           <ServiceSelector products={category.products} />
           <BookingCalendar />

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<void>;
-  setSelectedDate: (selectedDate: Date | null) => void;
+  setSelectedDate: (selectedDate?: Date) => void;
 }>({
   timeSlots: null,
   selectedService: null,

app/home/(user)/_components/booking/booking.provider.tsx

@@ -27,7 +27,7 @@ export const BookingProvider: React.FC<{
   const [selectedLocationId, setSelectedLocationId] = useState<number | null>(
     null,
   );
-  const [selectedDate, setSelectedDate] = useState<Date | null>();
+  const [selectedDate, setSelectedDate] = useState<Date | undefined>();
   const [timeSlots, setTimeSlots] = useState<TimeSlot[] | null>(null);
   const [locations, setLocations] = useState<Location[] | null>(null);
   const [isLoadingTimeSlots, setIsLoadingTimeSlots] = useState<boolean>(false);

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);

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);
   };
 

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 (
-            <Card className="flex justify-between p-4" key={index}>
+            <Card className="grid w-full xs:flex justify-center-safe gap-3 xs:justify-between p-4" key={index}>
               <div>
                 <span>{formatDateAndTime(timeSlot.StartTime.toString())}</span>
                 <div className="flex">
@@ -181,7 +181,7 @@ const TimeSlots = ({ countryCode }: { countryCode: string }) => {
                   {timeSlot.location?.address}
                 </div>
               </div>
-              <div className="flex-end flex items-center justify-center gap-2">
+              <div className="flex-end flex items-center justify-between not-last:xs:justify-center gap-2">
                 <span className="text-sm font-semibold">
                   {formatCurrency({
                     currencyCode: 'EUR',

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' }),