add cart functionality for tto services

2025-09-19 16:23:19 +03:00
parent 3c272505d6
commit b59148630a
26 changed files with 921 additions and 221 deletions
--- a/app/home/(user)/_components/booking/booking-container.tsx
+++ b/app/home/(user)/_components/booking/booking-container.tsx
@@ -1,22 +1,46 @@
 'use client';

-import { ServiceCategory } from '../service-categories';
+import { StoreProduct } from '@medusajs/types';
+
+import { Trans } from '@kit/ui/trans';
+
+import { EnrichedCartItem } from '../cart/types';
 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 BookingContainer = ({ category }: { category: ServiceCategory }) => {
+const BookingContainer = ({
+  category,
+  cartItem,
+  onComplete,
+}: {
+  category: { products: StoreProduct[]; countryCode: string };
+  cartItem?: EnrichedCartItem;
+  onComplete?: () => void;
+}) => {
+  const products = cartItem?.product ? [cartItem.product] : category.products;
+
+  if (!cartItem || !products?.length) {
+    <p>
+      <Trans i18nKey="booking:noProducts" />
+    </p>;
+  }
+
  return (
-    <BookingProvider category={category}>
+    <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={category.products} />
+          <ServiceSelector products={products} />
          <BookingCalendar />
          <LocationSelector />
        </div>
-        <TimeSlots countryCode={category.countryCode} />
+        <TimeSlots
+          countryCode={category.countryCode}
+          cartItem={cartItem}
+          onComplete={onComplete}
+        />
      </div>
    </BookingProvider>
  );
--- a/app/home/(user)/_components/booking/booking.provider.tsx
+++ b/app/home/(user)/_components/booking/booking.provider.tsx
@@ -4,7 +4,6 @@ import { StoreProduct } from '@medusajs/types';

 import { getAvailableTimeSlotsForDisplay } from '~/lib/services/connected-online.service';

-import { ServiceCategory } from '../service-categories';
 import { BookingContext, Location, TimeSlot } from './booking.context';

 export function useBooking() {
@@ -19,10 +18,11 @@ export function useBooking() {

 export const BookingProvider: React.FC<{
  children: React.ReactElement;
-  category: ServiceCategory;
-}> = ({ children, category }) => {
+  category: { products: StoreProduct[] };
+  service?: StoreProduct;
+}> = ({ children, category, service }) => {
  const [selectedService, setSelectedService] = useState<StoreProduct | null>(
-    category.products[0] || null,
+    (service ?? category?.products?.[0]) || null,
  );
  const [selectedLocationId, setSelectedLocationId] = useState<number | null>(
    null,
@@ -32,6 +32,7 @@ export const BookingProvider: React.FC<{
  const [locations, setLocations] = useState<Location[] | null>(null);
  const [isLoadingTimeSlots, setIsLoadingTimeSlots] = useState(false);

+
  useEffect(() => {
    let metadataServiceIds = [];
    try {
--- a/app/home/(user)/_components/booking/service-selector.tsx
+++ b/app/home/(user)/_components/booking/service-selector.tsx
@@ -18,7 +18,7 @@ import { useBooking } from './booking.provider';
 const ServiceSelector = ({ products }: { products: StoreProduct[] }) => {
  const { selectedService, setSelectedService } = useBooking();
  const [collapsed, setCollapsed] = useState(false);
-  const [firstFourProducts] = useState<StoreProduct[]>(products.slice(0, 4));
+  const [firstFourProducts] = useState<StoreProduct[]>(products?.slice(0, 4));

  const onServiceSelect = async (productId: StoreProduct['id']) => {
    const product = products.find((p) => p.id === productId);
@@ -38,7 +38,7 @@ const ServiceSelector = ({ products }: { products: StoreProduct[] }) => {
            className="mb-2 flex flex-col"
            onValueChange={onServiceSelect}
          >
-            {firstFourProducts.map((product) => (
+            {firstFourProducts?.map((product) => (
              <div key={product.id} className="flex items-center gap-2">
                <RadioGroupItem
                  value={product.id}
@@ -49,21 +49,23 @@ const ServiceSelector = ({ products }: { products: StoreProduct[] }) => {
              </div>
            ))}
          </RadioGroup>
-          <PopoverTrigger asChild>
-            <div
-              onClick={() => setCollapsed((_) => !_)}
-              className="flex cursor-pointer items-center justify-between border-t py-1"
-            >
-              <span>
-                <Trans i18nKey="booking:showAll" />
-              </span>
-              <ChevronDown />
-            </div>
-          </PopoverTrigger>
+          {products.length > 4 && (
+            <PopoverTrigger asChild>
+              <div
+                onClick={() => setCollapsed((_) => !_)}
+                className="flex cursor-pointer items-center justify-between border-t py-1"
+              >
+                <span>
+                  <Trans i18nKey="booking:showAll" />
+                </span>
+                <ChevronDown />
+              </div>
+            </PopoverTrigger>
+          )}
        </div>
        <PopoverContent sideOffset={10}>
          <RadioGroup onValueChange={onServiceSelect}>
-            {products.map((product) => (
+            {products?.map((product) => (
              <div key={product.id + '-2'} className="flex items-center gap-2">
                <RadioGroupItem
                  value={product.id}
--- a/app/home/(user)/_components/booking/time-slots.tsx
+++ b/app/home/(user)/_components/booking/time-slots.tsx
@@ -15,7 +15,10 @@ import { toast } from '@kit/ui/sonner';
 import { Trans } from '@kit/ui/trans';
 import { cn } from '@kit/ui/utils';

+import { updateReservationTime } from '~/lib/services/reservation.service';
+
 import { createInitialReservationAction } from '../../_lib/server/actions';
+import { EnrichedCartItem } from '../cart/types';
 import { ServiceProvider, TimeSlot } from './booking.context';
 import { useBooking } from './booking.provider';

@@ -32,7 +35,15 @@ const getServiceProviderTitle = (

 const PAGE_SIZE = 7;

-const TimeSlots = ({ countryCode }: { countryCode: string }) => {
+const TimeSlots = ({
+  countryCode,
+  cartItem,
+  onComplete,
+}: {
+  countryCode: string;
+  cartItem?: EnrichedCartItem;
+  onComplete?: () => void;
+}) => {
  const [currentPage, setCurrentPage] = useState(1);

  const {
@@ -133,6 +144,9 @@ const TimeSlots = ({ countryCode }: { countryCode: string }) => {
      booking.selectedLocationId ? booking.selectedLocationId : null,
      comments,
    ).then(() => {
+      if (onComplete) {
+        onComplete();
+      }
      router.push(pathsConfig.app.cart);
    });

@@ -143,6 +157,49 @@ const TimeSlots = ({ countryCode }: { countryCode: string }) => {
    });
  };

+  const handleChangeTime = async (
+    timeSlot: TimeSlot,
+    reservationId: number,
+    cartId: string,
+  ) => {
+    const syncedService = timeSlot.syncedService;
+    if (!syncedService) {
+      return toast.error(t('booking:serviceNotFound'));
+    }
+
+    const bookTimePromise = updateReservationTime(
+      reservationId,
+      timeSlot.StartTime,
+      Number(syncedService.id),
+      timeSlot.UserID,
+      timeSlot.SyncUserID,
+      booking.selectedLocationId ? booking.selectedLocationId : null,
+      cartId,
+    );
+
+    toast.promise(() => bookTimePromise, {
+      success: <Trans i18nKey={'booking:bookTimeSuccess'} />,
+      error: <Trans i18nKey={'booking:bookTimeError'} />,
+      loading: <Trans i18nKey={'booking:bookTimeLoading'} />,
+    });
+
+    if (onComplete) {
+      onComplete();
+    }
+  };
+
+  const handleTimeSelect = async (timeSlot: TimeSlot) => {
+    if (cartItem?.reservation.id) {
+      return handleChangeTime(
+        timeSlot,
+        cartItem.reservation.id,
+        cartItem.cart_id,
+      );
+    }
+
+    return handleBookTime(timeSlot);
+  };
+
  return (
    <div className="flex w-full flex-col gap-4">
      <div className="flex h-full w-full flex-col gap-2 overflow-auto">
@@ -154,9 +211,12 @@ const TimeSlots = ({ countryCode }: { countryCode: string }) => {
          );
          const price =
            booking.selectedService?.variants?.[0]?.calculated_price
-              ?.calculated_amount;
+              ?.calculated_amount ?? cartItem?.unit_price;
          return (
-            <Card className="grid w-full xs:flex justify-center-safe gap-3 xs:justify-between p-4" key={index}>
+            <Card
+              className="xs:flex xs:justify-between grid w-full justify-center-safe gap-3 p-4"
+              key={index}
+            >
              <div>
                <span>{formatDateAndTime(timeSlot.StartTime.toString())}</span>
                <div className="flex">
@@ -177,11 +237,9 @@ const TimeSlots = ({ countryCode }: { countryCode: string }) => {
                  )}
                  {isEHIF && <span>{t('booking:ehifBooking')}</span>}
                </div>
-                <div className="flex text-xs">
-                  {timeSlot.location?.address}
-                </div>
+                <div className="flex text-xs">{timeSlot.location?.address}</div>
              </div>
-              <div className="flex-end flex items-center justify-between not-last:xs:justify-center gap-2">
+              <div className="flex-end not-last:xs:justify-center flex items-center justify-between gap-2">
                <span className="text-sm font-semibold">
                  {formatCurrency({
                    currencyCode: 'EUR',
@@ -189,7 +247,7 @@ const TimeSlots = ({ countryCode }: { countryCode: string }) => {
                    value: price ?? '',
                  })}
                </span>
-                <Button onClick={() => handleBookTime(timeSlot)} size="sm">
+                <Button onClick={() => handleTimeSelect(timeSlot)} size="sm">
                  <Trans i18nKey="common:book" />
                </Button>
              </div>