refactor time slots

2025-09-26 17:20:50 +03:00
parent c99beea46a
commit b674640bd8
5 changed files with 173 additions and 119 deletions
--- a/app/home/(user)/_components/booking/booking-container.tsx
+++ b/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>
--- a/app/home/(user)/_components/booking/booking-pagination.tsx
+++ b/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;
--- a/app/home/(user)/_components/booking/time-slots.tsx
+++ b/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) {
-        onComplete();
-      }
-      router.push(pathsConfig.app.cart);
-    });
+    )
+      .then(() => {
+        if (onComplete) {
+          onComplete();
+        }
+        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 && (
-        <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={() => 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>
+      <BookingPagination
+        totalPages={Math.ceil(filteredBookings.length / PAGE_SIZE)}
+        setCurrentPage={setCurrentPage}
+        currentPage={currentPage}
+      />
+    </Skeleton>
  );
 };

--- a/lib/services/medusaCart.service.ts
+++ b/lib/services/medusaCart.service.ts
@@ -31,8 +31,11 @@ const env = () =>
        .min(1),
    })
    .parse({
-      medusaBackendPublicUrl: process.env.MEDUSA_BACKEND_PUBLIC_URL!,
-      siteUrl: process.env.NEXT_PUBLIC_SITE_URL!,
+      // Use for local testing
+      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');
--- a/packages/ui/src/shadcn/skeleton.tsx
+++ b/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>
-
-      <div
-        aria-hidden
-        className="bg-primary/10 absolute inset-0 animate-pulse rounded-md"
-      />
+      {isLoading && (
+        <div
+          aria-hidden
+          className="bg-primary/10 absolute inset-0 animate-pulse rounded-md"
+        />
+      )}
    </div>
  );
 }