refactor time slots

app/home/(user)/_components/booking/booking-container.tsx

@@ -32,7 +32,16 @@ const BookingContainer = ({
     <BookingProvider category={{ products }} service={cartItem?.product}>
       <div className="xs:flex-row flex max-h-full flex-col gap-6">
         <div className="flex flex-col">
-          <ServiceSelector products={products} />
+          <ServiceSelector
+            products={products.filter((product) => {
+              if (product.metadata?.serviceIds) {
+                return Array.isArray(
+                  JSON.parse(product.metadata.serviceIds as string),
+                );
+              }
+              return false;
+            })}
+          />
           <BookingCalendar />
           <LocationSelector />
         </div>

app/home/(user)/_components/booking/booking-pagination.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+
+import { useTranslation } from 'react-i18next';
+
+import { Trans } from '@kit/ui/makerkit/trans';
+import { cn } from '@kit/ui/shadcn';
+import { Button } from '@kit/ui/shadcn/button';
+
+const BookingPagination = ({
+  totalPages,
+  setCurrentPage,
+  currentPage,
+}: {
+  totalPages: number;
+  setCurrentPage: (page: number) => void;
+  currentPage: number;
+}) => {
+  const { t } = useTranslation();
+
+  const generatePageNumbers = () => {
+    const pages = [];
+    const maxVisiblePages = 5;
+
+    if (totalPages <= maxVisiblePages) {
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      if (currentPage <= 3) {
+        for (let i = 1; i <= 4; i++) {
+          pages.push(i);
+        }
+        pages.push('...');
+        pages.push(totalPages);
+      } else if (currentPage >= totalPages - 2) {
+        pages.push(1);
+        pages.push('...');
+        for (let i = totalPages - 3; i <= totalPages; i++) {
+          pages.push(i);
+        }
+      } else {
+        pages.push(1);
+        pages.push('...');
+        for (let i = currentPage - 1; i <= currentPage + 1; i++) {
+          pages.push(i);
+        }
+        pages.push('...');
+        pages.push(totalPages);
+      }
+    }
+
+    return pages;
+  };
+
+  if (totalPages === 0) {
+    return (
+      <div className="wrap text-muted-foreground flex size-full content-center-safe justify-center-safe">
+        <p>{t('booking:noResults')}</p>
+      </div>
+    );
+  }
+
+  return (
+    totalPages > 1 && (
+      <div className="flex items-center justify-between">
+        <div className="text-muted-foreground text-sm">
+          {t('common:pageOfPages', {
+            page: currentPage,
+            total: totalPages,
+          })}
+        </div>
+
+        <div className="flex items-center gap-1">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setCurrentPage(currentPage - 1)}
+            disabled={currentPage === 1}
+          >
+            <Trans i18nKey="common:previous" defaultValue="Previous" />
+          </Button>
+
+          {generatePageNumbers().map((page, index) => (
+            <Button
+              key={index}
+              variant={page === currentPage ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => typeof page === 'number' && setCurrentPage(page)}
+              disabled={page === '...'}
+              className={cn(
+                'min-w-[2rem]',
+                page === '...' && 'cursor-default hover:bg-transparent',
+              )}
+            >
+              {page}
+            </Button>
+          ))}
+
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setCurrentPage(currentPage + 1)}
+            disabled={currentPage === totalPages}
+          >
+            <Trans i18nKey="common:next" defaultValue="Next" />
+          </Button>
+        </div>
+      </div>
+    )
+  );
+};
+
+export default BookingPagination;

app/home/(user)/_components/booking/time-slots.tsx

@@ -11,6 +11,7 @@ import { pathsConfig } from '@kit/shared/config';
 import { formatDateAndTime } from '@kit/shared/utils';
 import { Button } from '@kit/ui/shadcn/button';
 import { Card } from '@kit/ui/shadcn/card';
+import { Skeleton } from '@kit/ui/shadcn/skeleton';
 import { toast } from '@kit/ui/sonner';
 import { Trans } from '@kit/ui/trans';
 import { cn } from '@kit/ui/utils';
@@ -19,6 +20,7 @@ import { updateReservationTime } from '~/lib/services/reservation.service';
 
 import { createInitialReservationAction } from '../../_lib/server/actions';
 import { EnrichedCartItem } from '../cart/types';
+import BookingPagination from './booking-pagination';
 import { ServiceProvider, TimeSlot } from './booking.context';
 import { useBooking } from './booking.provider';
 
@@ -68,57 +70,16 @@ const TimeSlots = ({
         }) ?? [],
         'StartTime',
         'asc',
-      ),
+      ).filter(({ StartTime }) => isSameDay(StartTime, selectedDate)),
     [booking.timeSlots, selectedDate],
   );
 
-  const totalPages = Math.ceil(filteredBookings.length / PAGE_SIZE);
-
   const paginatedBookings = useMemo(() => {
     const startIndex = (currentPage - 1) * PAGE_SIZE;
     const endIndex = startIndex + PAGE_SIZE;
     return filteredBookings.slice(startIndex, endIndex);
   }, [filteredBookings, currentPage, PAGE_SIZE]);
 
-  const handlePageChange = (page: number) => {
-    setCurrentPage(page);
-  };
-
-  const generatePageNumbers = () => {
-    const pages = [];
-    const maxVisiblePages = 5;
-
-    if (totalPages <= maxVisiblePages) {
-      for (let i = 1; i <= totalPages; i++) {
-        pages.push(i);
-      }
-    } else {
-      if (currentPage <= 3) {
-        for (let i = 1; i <= 4; i++) {
-          pages.push(i);
-        }
-        pages.push('...');
-        pages.push(totalPages);
-      } else if (currentPage >= totalPages - 2) {
-        pages.push(1);
-        pages.push('...');
-        for (let i = totalPages - 3; i <= totalPages; i++) {
-          pages.push(i);
-        }
-      } else {
-        pages.push(1);
-        pages.push('...');
-        for (let i = currentPage - 1; i <= currentPage + 1; i++) {
-          pages.push(i);
-        }
-        pages.push('...');
-        pages.push(totalPages);
-      }
-    }
-
-    return pages;
-  };
-
   if (!booking?.timeSlots?.length) {
     return null;
   }
@@ -143,12 +104,17 @@ const TimeSlots = ({
       timeSlot.StartTime,
       booking.selectedLocationId ? booking.selectedLocationId : null,
       comments,
-    ).then(() => {
+    )
-      if (onComplete) {
+      .then(() => {
-        onComplete();
+        if (onComplete) {
-      }
+          onComplete();
-      router.push(pathsConfig.app.cart);
+        }
-    });
+        router.push(pathsConfig.app.cart);
+      })
+      .catch((error) => {
+        console.error('Booking error: ', error);
+        throw error;
+      });
 
     toast.promise(() => bookTimePromise, {
       success: <Trans i18nKey={'booking:bookTimeSuccess'} />,
@@ -199,12 +165,15 @@ const TimeSlots = ({
 
     return handleBookTime(timeSlot);
   };
-
+  console.log('paginatedBookings', booking.isLoadingTimeSlots);
   return (
-    <div className="flex w-full flex-col gap-4">
+    <Skeleton
+      isLoading={booking.isLoadingTimeSlots}
+      className="flex w-full flex-col gap-4"
+    >
       <div className="flex h-full w-full flex-col gap-2 overflow-auto">
         {paginatedBookings.map((timeSlot, index) => {
-          const isEHIF = timeSlot.HKServiceID > 0;
+          const isHaigeKassa = timeSlot.HKServiceID > 0;
           const serviceProviderTitle = getServiceProviderTitle(
             currentLocale,
             timeSlot.serviceProvider,
@@ -212,6 +181,7 @@ const TimeSlots = ({
           const price =
             booking.selectedService?.variants?.[0]?.calculated_price
               ?.calculated_amount ?? cartItem?.unit_price;
+
           return (
             <Card
               className="xs:flex xs:justify-between grid w-full justify-center-safe gap-3 p-4"
@@ -222,7 +192,7 @@ const TimeSlots = ({
                 <div className="flex">
                   <h5
                     className={cn(
-                      (serviceProviderTitle || isEHIF) &&
+                      (serviceProviderTitle || isHaigeKassa) &&
                         "after:mx-2 after:content-['·']",
                     )}
                   >
@@ -230,12 +200,14 @@ const TimeSlots = ({
                   </h5>
                   {serviceProviderTitle && (
                     <span
-                      className={cn(isEHIF && "after:mx-2 after:content-['·']")}
+                      className={cn(
+                        isHaigeKassa && "after:mx-2 after:content-['·']",
+                      )}
                     >
                       {serviceProviderTitle}
                     </span>
                   )}
-                  {isEHIF && <span>{t('booking:ehifBooking')}</span>}
+                  {isHaigeKassa && <span>{t('booking:ehifBooking')}</span>}
                 </div>
                 <div className="flex text-xs">{timeSlot.location?.address}</div>
               </div>
@@ -254,63 +226,14 @@ const TimeSlots = ({
             </Card>
           );
         })}
-
-        {!paginatedBookings.length && (
-          <div className="wrap text-muted-foreground flex size-full content-center-safe justify-center-safe">
-            <p>{t('booking:noResults')}</p>
-          </div>
-        )}
       </div>
 
-      {totalPages > 1 && (
+      <BookingPagination
-        <div className="flex items-center justify-between">
+        totalPages={Math.ceil(filteredBookings.length / PAGE_SIZE)}
-          <div className="text-muted-foreground text-sm">
+        setCurrentPage={setCurrentPage}
-            {t('common:pageOfPages', {
+        currentPage={currentPage}
-              page: currentPage,
+      />
-              total: totalPages,
+    </Skeleton>
-            })}
-          </div>
-
-          <div className="flex items-center gap-1">
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => handlePageChange(currentPage - 1)}
-              disabled={currentPage === 1}
-            >
-              <Trans i18nKey="common:previous" defaultValue="Previous" />
-            </Button>
-
-            {generatePageNumbers().map((page, index) => (
-              <Button
-                key={index}
-                variant={page === currentPage ? 'default' : 'outline'}
-                size="sm"
-                onClick={() =>
-                  typeof page === 'number' && handlePageChange(page)
-                }
-                disabled={page === '...'}
-                className={cn(
-                  'min-w-[2rem]',
-                  page === '...' && 'cursor-default hover:bg-transparent',
-                )}
-              >
-                {page}
-              </Button>
-            ))}
-
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => handlePageChange(currentPage + 1)}
-              disabled={currentPage === totalPages}
-            >
-              <Trans i18nKey="common:next" defaultValue="Next" />
-            </Button>
-          </div>
-        </div>
-      )}
-    </div>
   );
 };
 

lib/services/medusaCart.service.ts

@@ -31,8 +31,11 @@ const env = () =>
         .min(1),
     })
     .parse({
-      medusaBackendPublicUrl: process.env.MEDUSA_BACKEND_PUBLIC_URL!,
+      // Use for local testing
-      siteUrl: process.env.NEXT_PUBLIC_SITE_URL!,
+      medusaBackendPublicUrl: 'http://webhook.site:3000',
+      siteUrl: 'http://webhook.site:3000',
+      // medusaBackendPublicUrl: process.env.MEDUSA_BACKEND_PUBLIC_URL!,
+      // siteUrl: process.env.NEXT_PUBLIC_SITE_URL!,
     });
 
 export async function handleAddToCart({
@@ -42,6 +45,10 @@ export async function handleAddToCart({
   selectedVariant: Pick<StoreProductVariant, 'id'>;
   countryCode: string;
 }) {
+  try {
+  } catch (e) {
+    console.error('medusa card error: ', e);
+  }
   const { account } = await loadCurrentUserAccount();
   if (!account) {
     throw new Error('Account not found');

packages/ui/src/shadcn/skeleton.tsx

@@ -3,21 +3,23 @@ import { cn } from '../lib/utils';
 function Skeleton({
   className,
   children,
+  isLoading = true,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
+}: React.HTMLAttributes<HTMLDivElement> & { isLoading?: boolean }) {
   return (
     <div
       className={cn('relative inline-block align-top', className)}
       {...props}
     >
-      <div className="invisible">
+      <div className={cn({ invisible: isLoading })}>
         {children ?? <span className="block h-4 w-24" />}
       </div>
-
+      {isLoading && (
-      <div
+        <div
-        aria-hidden
+          aria-hidden
-        className="bg-primary/10 absolute inset-0 animate-pulse rounded-md"
+          className="bg-primary/10 absolute inset-0 animate-pulse rounded-md"
-      />
+        />
+      )}
     </div>
   );
 }