hunk.code_window:   const startOfDayUTC = dayjs.utc().set("hour", 0).set("minute", 0).set("second", 0);
     const startOfInviteeDay = inviteeDate.startOf("day");
     // checks if the start date is in the past
     /**
      *  TODO: change "day" for "hour" to stop displaying 1 day before today
      * This is displaying a day as available as sometimes difference between two dates is < 24 hrs.
      * But when doing timezones an available day for an owner can be 2 days available in other users tz.
      *
  
hunk.labels: keep keep keep keep keep replace keep keep keep
hunk.after_edit:    * TODO: change "day" for "hour" to stop displaying 1 day before today
  
hunk.file_path: packages/lib/slots.ts
hunk.type: replace
file: import { zodResolver } from "@hookform/resolvers/zod";
  import { useMutation } from "@tanstack/react-query";
  import { useSession } from "next-auth/react";
  import dynamic from "next/dynamic";
  import Head from "next/head";
  import { useRouter } from "next/router";
  import { useCallback, useEffect, useMemo, useReducer, useState } from "react";
  import { useForm, useFormContext } from "react-hook-form";
  import { v4 as uuidv4 } from "uuid";
  import { z } from "zod";
  
  import BookingPageTagManager from "@calcom/app-store/BookingPageTagManager";
  import type { EventLocationType } from "@calcom/app-store/locations";
  import { getEventLocationType, locationKeyToString } from "@calcom/app-store/locations";
  import { createPaymentLink } from "@calcom/app-store/stripepayment/lib/client";
  import { getEventTypeAppData } from "@calcom/app-store/utils";
  import type { LocationObject } from "@calcom/core/location";
  import type { Dayjs } from "@calcom/dayjs";
  import dayjs from "@calcom/dayjs";
  import {
    useEmbedNonStylesConfig,
    useEmbedUiConfig,
    useIsBackgroundTransparent,
    useIsEmbed,
  } from "@calcom/embed-core/embed-iframe";
  import {
    getBookingFieldsWithSystemFields,
    SystemField,
  } from "@calcom/features/bookings/lib/getBookingFields";
  import getBookingResponsesSchema, {
    getBookingResponsesPartialSchema,
  } from "@calcom/features/bookings/lib/getBookingResponsesSchema";
  import { FormBuilderField } from "@calcom/features/form-builder/FormBuilder";
  import CustomBranding from "@calcom/lib/CustomBranding";
  import classNames from "@calcom/lib/classNames";
  import { APP_NAME } from "@calcom/lib/constants";
  import { useLocale } from "@calcom/lib/hooks/useLocale";
  import useTheme from "@calcom/lib/hooks/useTheme";
  import { HttpError } from "@calcom/lib/http-error";
  import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
  import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
  import type { RecurringEvent } from "@calcom/types/Calendar";
  import { Button, Form, Tooltip } from "@calcom/ui";
  import { FiAlertTriangle, FiCalendar, FiRefreshCw, FiUser } from "@calcom/ui/components/icon";
  
  import { asStringOrNull } from "@lib/asStringOrNull";
  import { timeZone } from "@lib/clock";
  import useRouterQuery from "@lib/hooks/useRouterQuery";
  import createBooking from "@lib/mutations/bookings/create-booking";
  import createRecurringBooking from "@lib/mutations/bookings/create-recurring-booking";
  import { parseDate, parseRecurringDates } from "@lib/parseDate";
  
  import type { Gate, GateState } from "@components/Gates";
  import Gates from "@components/Gates";
  import BookingDescription from "@components/booking/BookingDescription";
  
  import type { BookPageProps } from "../../../pages/[user]/book";
  import type { HashLinkPageProps } from "../../../pages/d/[link]/book";
  import type { TeamBookingPageProps } from "../../../pages/team/[slug]/book";
  
  const Toaster = dynamic(() => import("react-hot-toast").then((mod) => mod.Toaster), { ssr: false });
  
  /** These are like 40kb that not every user needs */
  const BookingDescriptionPayment = dynamic(
    () => import("@components/booking/BookingDescriptionPayment")
  ) as unknown as typeof import("@components/booking/BookingDescriptionPayment").default;
  
  type BookingPageProps = BookPageProps | TeamBookingPageProps | HashLinkPageProps;
  const BookingFields = ({
    fields,
    locations,
    rescheduleUid,
    isDynamicGroupBooking,
  }: {
    fields: BookingPageProps["eventType"]["bookingFields"];
    locations: LocationObject[];
    rescheduleUid?: string;
    isDynamicGroupBooking: boolean;
  }) => {
    const { t } = useLocale();
    const { watch, setValue } = useFormContext();
    const locationResponse = watch("responses.location");
    const currentView = rescheduleUid ? "reschedule" : "";
  
    return (
      // TODO: It might make sense to extract this logic into BookingFields config, that would allow to quickly configure system fields and their editability in fresh booking and reschedule booking view
      <div>
        {fields.map((field, index) => {
          // During reschedule by default all system fields are readOnly. Make them editable on case by case basis.
          // Allowing a system field to be edited might require sending emails to attendees, so we need to be careful
          let readOnly =
            (field.editable === "system" || field.editable === "system-but-optional") && !!rescheduleUid;
  
          let noLabel = false;
          let hidden = !!field.hidden;
          const fieldViews = field.views;
  
          if (fieldViews && !fieldViews.find((view) => view.id === currentView)) {
            return null;
          }
  
          if (field.name === SystemField.Enum.rescheduleReason) {
            // rescheduleReason is a reschedule specific field and thus should be editable during reschedule
            readOnly = false;
          }
  
          if (field.name === SystemField.Enum.smsReminderNumber) {
            // `smsReminderNumber` and location.optionValue when location.value===phone are the same data point. We should solve it in a better way in the Form Builder itself.
            // I think we should have a way to connect 2 fields together and have them share the same value in Form Builder
            if (locationResponse?.value === "phone") {
              setValue(`responses.${SystemField.Enum.smsReminderNumber}`, locationResponse?.optionValue);
              // Just don't render the field now, as the value is already connected to attendee phone location
              return null;
            }
            // `smsReminderNumber` can be edited during reschedule even though it's a system field
            readOnly = false;
          }
  
          if (field.name === SystemField.Enum.guests) {
            // No matter what user configured for Guests field, we don't show it for dynamic group booking as that doesn't support guests
            hidden = isDynamicGroupBooking ? true : !!field.hidden;
          }
  
          // We don't show `notes` field during reschedule
          if (
            (field.name === SystemField.Enum.notes || field.name === SystemField.Enum.guests) &&
            !!rescheduleUid
          ) {
            return null;
          }
  
          // Dynamically populate location field options
          if (field.name === SystemField.Enum.location && field.type === "radioInput") {
            if (!field.optionsInputs) {
              throw new Error("radioInput must have optionsInputs");
            }
            const optionsInputs = field.optionsInputs;
  
            const options = locations.map((location) => {
              const eventLocation = getEventLocationType(location.type);
              const locationString = locationKeyToString(location);
  
              if (typeof locationString !== "string" || !eventLocation) {
                // It's possible that location app got uninstalled
                return null;
              }
              const type = eventLocation.type;
              const optionInput = optionsInputs[type as keyof typeof optionsInputs];
              if (optionInput) {
                optionInput.placeholder = t(eventLocation?.attendeeInputPlaceholder || "");
              }
  
              return {
                label: t(locationString),
                value: type,
              };
            });
  
            field.options = options.filter(
              (location): location is NonNullable<(typeof options)[number]> => !!location
            );
            // If we have only one option and it has an input, we don't show the field label because Option name acts as label.
            // e.g. If it's just Attendee Phone Number option then we don't show `Location` label
            if (field.options.length === 1) {
              if (field.optionsInputs[field.options[0].value]) {
                noLabel = true;
              } else {
                // If there's only one option and it doesn't have an input, we don't show the field at all because it's visible in the left side bar
                hidden = true;
              }
            }
          }
  
          const label = noLabel ? "" : field.label || t(field.defaultLabel || "");
          const placeholder = field.placeholder || t(field.defaultPlaceholder || "");
  
          return (
            <FormBuilderField
              className="mb-4"
              field={{ ...field, label, placeholder, hidden }}
              readOnly={readOnly}
              key={index}
            />
          );
        })}
      </div>
    );
  };
  
  const BookingPage = ({
    eventType,
    booking,
    profile,
    isDynamicGroupBooking,
    recurringEventCount,
    hasHashedBookingLink,
    hashedLink,
    ...restProps
  }: BookingPageProps) => {
    const { t, i18n } = useLocale();
    const { duration: queryDuration } = useRouterQuery("duration");
    const isEmbed = useIsEmbed(restProps.isEmbed);
    const embedUiConfig = useEmbedUiConfig();
    const shouldAlignCentrallyInEmbed = useEmbedNonStylesConfig("align") !== "left";
    const shouldAlignCentrally = !isEmbed || shouldAlignCentrallyInEmbed;
    const router = useRouter();
    const { data: session } = useSession();
    const isBackgroundTransparent = useIsBackgroundTransparent();
    const telemetry = useTelemetry();
    const [gateState, gateDispatcher] = useReducer(
      (state: GateState, newState: Partial<GateState>) => ({
        ...state,
        ...newState,
      }),
      {}
    );
    // Define duration now that we support multiple duration eventTypes
    let duration = eventType.length;
    if (
      queryDuration &&
      !isNaN(Number(queryDuration)) &&
      eventType.metadata?.multipleDuration &&
      eventType.metadata?.multipleDuration.includes(Number(queryDuration))
    ) {
      duration = Number(queryDuration);
    }
  
    // This is a workaround for forcing the same time format for both server side rendering and client side rendering
    // At initial render, we use the default time format which is 12H
    const [withDefaultTimeFormat, setWithDefaultTimeFormat] = useState(true);
    const parseDateFunc = useCallback(
      (date: string | null | Dayjs) => {
        return parseDate(date, i18n, withDefaultTimeFormat);
      },
      [withDefaultTimeFormat]
    );
    // After intial render on client side, we let parseDateFunc to use the time format from the localStorage
    useEffect(() => {
      setWithDefaultTimeFormat(false);
    }, []);
  
    useEffect(() => {
      if (top !== window) {
        //page_view will be collected automatically by _middleware.ts
        telemetry.event(
          telemetryEventTypes.embedView,
          collectPageParameters("/book", { isTeamBooking: document.URL.includes("team/") })
        );
      }
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
  
    const mutation = useMutation(createBooking, {
      onSuccess: async (responseData) => {
        const { uid } = responseData;
  
        if ("paymentUid" in responseData && !!responseData.paymentUid) {
          return await router.push(
            createPaymentLink({
              paymentUid: responseData.paymentUid,
              date,
              name: bookingForm.getValues("responses.name"),
              email: bookingForm.getValues("responses.email"),
              absolute: false,
            })
          );
        }
  
        return router.push({
          pathname: `/booking/${uid}`,
          query: {
            isSuccessBookingPage: true,
            email: bookingForm.getValues("responses.email"),
            eventTypeSlug: eventType.slug,
            seatReferenceUid: "seatReferenceUid" in responseData ? responseData.seatReferenceUid : null,
            ...(rescheduleUid && booking?.startTime && { formerTime: booking.startTime.toString() }),
          },
        });
      },
    });
  
    const recurringMutation = useMutation(createRecurringBooking, {
      onSuccess: async (responseData = []) => {
        const { uid } = responseData[0] || {};
  
        return router.push({
          pathname: `/booking/${uid}`,
          query: {
            allRemainingBookings: true,
            email: bookingForm.getValues("responses.email"),
            eventTypeSlug: eventType.slug,
            formerTime: booking?.startTime.toString(),
          },
        });
      },
    });
  
    const rescheduleUid = router.query.rescheduleUid as string;
    useTheme(profile.theme);
    const date = asStringOrNull(router.query.date);
    const querySchema = getBookingResponsesPartialSchema({
      eventType: {
        bookingFields: getBookingFieldsWithSystemFields(eventType),
      },
      view: rescheduleUid ? "reschedule" : "booking",
    });
  
    const parsedQuery = querySchema.parse({
      ...router.query,
      // `guest` because we need to support legacy URL with `guest` query param support
      // `guests` because the `name` of the corresponding bookingField is `guests`
      guests: router.query.guests || router.query.guest,
    });
  
    // it would be nice if Prisma at some point in the future allowed for Json<Location>; as of now this is not the case.
    const locations: LocationObject[] = useMemo(
      () => (eventType.locations as LocationObject[]) || [],
      [eventType.locations]
    );
  
    const [isClientTimezoneAvailable, setIsClientTimezoneAvailable] = useState(false);
    useEffect(() => {
      // THis is to fix hydration error that comes because of different timezone on server and client
      setIsClientTimezoneAvailable(true);
    }, []);
  
    const loggedInIsOwner = eventType?.users[0]?.id === session?.user?.id;
  
    // There should only exists one default userData variable for primaryAttendee.
    const defaultUserValues = {
      email: rescheduleUid ? booking?.attendees[0].email : parsedQuery["email"],
      name: rescheduleUid ? booking?.attendees[0].name : parsedQuery["name"],
    };
  
    const defaultValues = () => {
      if (!rescheduleUid) {
        const defaults = {
          responses: {} as Partial<z.infer<typeof bookingFormSchema>["responses"]>,
        };
  
        const responses = eventType.bookingFields.reduce((responses, field) => {
          return {
            ...responses,
            [field.name]: parsedQuery[field.name],
          };
        }, {});
        defaults.responses = {
          ...responses,
          name: defaultUserValues.name || (!loggedInIsOwner && session?.user?.name) || "",
          email: defaultUserValues.email || (!loggedInIsOwner && session?.user?.email) || "",
        };
  
        return defaults;
      }
  
      if (!booking || !booking.attendees.length) {
        return {};
      }
      const primaryAttendee = booking.attendees[0];
      if (!primaryAttendee) {
        return {};
      }
  
      const defaults = {
        responses: {} as Partial<z.infer<typeof bookingFormSchema>["responses"]>,
      };
  
      const responses = eventType.bookingFields.reduce((responses, field) => {
        return {
          ...responses,
          [field.name]: booking.responses[field.name],
        };
      }, {});
      defaults.responses = {
        ...responses,
        name: defaultUserValues.name || (!loggedInIsOwner && session?.user?.name) || "",
        email: defaultUserValues.email || (!loggedInIsOwner && session?.user?.email) || "",
      };
      return defaults;
    };
  
    const bookingFormSchema = z
      .object({
        responses: getBookingResponsesSchema({
          eventType: { bookingFields: getBookingFieldsWithSystemFields(eventType) },
          view: rescheduleUid ? "reschedule" : "booking",
        }),
      })
      .passthrough();
  
    type BookingFormValues = {
      locationType?: EventLocationType["type"];
      responses: z.infer<typeof bookingFormSchema>["responses"];
    };
  
    const bookingForm = useForm<BookingFormValues>({
      defaultValues: defaultValues(),
      resolver: zodResolver(bookingFormSchema), // Since this isn't set to strict we only validate the fields in the schema
    });
  
    // Calculate the booking date(s)
    let recurringStrings: string[] = [],
      recurringDates: Date[] = [];
    const parseRecurringDatesFunc = useCallback(
      (date: string | null | Dayjs, recurringEvent: RecurringEvent, recurringCount: number) => {
        return parseRecurringDates(
          {
            startDate: date,
            timeZone: timeZone(),
            recurringEvent: recurringEvent,
            recurringCount: recurringCount,
            withDefaultTimeFormat: withDefaultTimeFormat,
          },
          i18n
        );
      },
      [withDefaultTimeFormat, date, eventType.recurringEvent, recurringEventCount]
    );
    if (eventType.recurringEvent?.freq && recurringEventCount !== null) {
      [recurringStrings, recurringDates] = parseRecurringDatesFunc(
        date,
        eventType.recurringEvent,
        parseInt(recurringEventCount.toString())
      );
    }
  
    const bookEvent = (bookingValues: BookingFormValues) => {
      telemetry.event(
        top !== window ? telemetryEventTypes.embedBookingConfirmed : telemetryEventTypes.bookingConfirmed,
        { isTeamBooking: document.URL.includes("team/") }
      );
      // "metadata" is a reserved key to allow for connecting external users without relying on the email address.
      // <...url>&metadata[user_id]=123 will be send as a custom input field as the hidden type.
  
      // @TODO: move to metadata
      const metadata = Object.keys(router.query)
        .filter((key) => key.startsWith("metadata"))
        .reduce(
          (metadata, key) => ({
            ...metadata,
            [key.substring("metadata[".length, key.length - 1)]: router.query[key],
          }),
          {}
        );
  
      if (recurringDates.length) {
        // Identify set of bookings to one intance of recurring event to support batch changes
        const recurringEventId = uuidv4();
        const recurringBookings = recurringDates.map((recurringDate) => ({
          ...bookingValues,
          start: dayjs(recurringDate).format(),
          end: dayjs(recurringDate).add(duration, "minute").format(),
          eventTypeId: eventType.id,
          eventTypeSlug: eventType.slug,
          recurringEventId,
          // Added to track down the number of actual occurrences selected by the user
          recurringCount: recurringDates.length,
          timeZone: timeZone(),
          language: i18n.language,
          rescheduleUid,
          user: router.query.user,
          metadata,
          hasHashedBookingLink,
          hashedLink,
          ethSignature: gateState.rainbowToken,
        }));
        recurringMutation.mutate(recurringBookings);
      } else {
        mutation.mutate({
          ...bookingValues,
          start: dayjs(date).tz(timeZone()).format(),
          end: dayjs(date).tz(timeZone()).add(duration, "minute").format(),
          eventTypeId: eventType.id,
          eventTypeSlug: eventType.slug,
          timeZone: timeZone(),
          language: i18n.language,
          rescheduleUid,
          bookingUid: (router.query.bookingUid as string) || booking?.uid,
          user: router.query.user,
          metadata,
          hasHashedBookingLink,
          hashedLink,
          ethSignature: gateState.rainbowToken,
          seatReferenceUid: router.query.seatReferenceUid as string,
        });
      }
    };
  
    const showEventTypeDetails = (isEmbed && !embedUiConfig.hideEventTypeDetails) || !isEmbed;
    const rainbowAppData = getEventTypeAppData(eventType, "rainbow") || {};
  
    // Define conditional gates here
    const gates = [
      // Rainbow gate is only added if the event has both a `blockchainId` and a `smartContractAddress`
      rainbowAppData && rainbowAppData.blockchainId && rainbowAppData.smartContractAddress
        ? ("rainbow" as Gate)
        : undefined,
    ];
  
    return (
      <Gates gates={gates} appData={rainbowAppData} dispatch={gateDispatcher}>
        <Head>
          <title>
            {rescheduleUid
              ? t("booking_reschedule_confirmation", {
                  eventTypeTitle: eventType.title,
                  profileName: profile.name,
                })
              : t("booking_confirmation", {
                  eventTypeTitle: eventType.title,
                  profileName: profile.name,
                })}{" "}
            | {APP_NAME}
          </title>
          <link rel="icon" href="/favico.ico" />
        </Head>
        <BookingPageTagManager eventType={eventType} />
        <CustomBranding lightVal={profile.brandColor} darkVal={profile.darkBrandColor} />
        <main
          className={classNames(
            shouldAlignCentrally ? "mx-auto" : "",
            isEmbed ? "" : "sm:my-24",
            "my-0 max-w-3xl"
          )}>
          <div
            className={classNames(
              "main",
              isBackgroundTransparent ? "" : "dark:bg-darkgray-100 bg-white dark:border",
              "dark:border-darkgray-300 rounded-md sm:border"
            )}>
            <div className="sm:flex">
              {showEventTypeDetails && (
                <div className="sm:dark:border-darkgray-300 dark:text-darkgray-600 flex flex-col px-6 pt-6 pb-0 text-gray-600 sm:w-1/2 sm:border-r sm:pb-6">
                  <BookingDescription isBookingPage profile={profile} eventType={eventType}>
                    <BookingDescriptionPayment eventType={eventType} />
                    {!rescheduleUid && eventType.recurringEvent?.freq && recurringEventCount && (
                      <div className="items-start text-sm font-medium text-gray-600 dark:text-white">
                        <FiRefreshCw className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
                        <p className="-ml-2 inline-block items-center px-2">
                          {getEveryFreqFor({
                            t,
                            recurringEvent: eventType.recurringEvent,
                            recurringCount: recurringEventCount,
                          })}
                        </p>
                      </div>
                    )}
                    <div className="text-bookinghighlight flex items-start text-sm">
                      <FiCalendar className="ml-[2px] mt-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
                      <div className="text-sm font-medium">
                        {isClientTimezoneAvailable &&
                          (rescheduleUid || !eventType.recurringEvent?.freq) &&
                          `${parseDateFunc(date)}`}
                        {isClientTimezoneAvailable &&
                          !rescheduleUid &&
                          eventType.recurringEvent?.freq &&
                          recurringStrings.slice(0, 5).map((timeFormatted, key) => {
                            return <p key={key}>{timeFormatted}</p>;
                          })}
                        {!rescheduleUid && eventType.recurringEvent?.freq && recurringStrings.length > 5 && (
                          <div className="flex">
                            <Tooltip
                              content={recurringStrings.slice(5).map((timeFormatted, key) => (
                                <p key={key}>{timeFormatted}</p>
                              ))}>
                              <p className="dark:text-darkgray-600 text-sm">
                                + {t("plus_more", { count: recurringStrings.length - 5 })}
                              </p>
                            </Tooltip>
                          </div>
                        )}
                      </div>
                    </div>
                    {booking?.startTime && rescheduleUid && (
                      <div>
                        <p className="mt-8 mb-2 text-sm " data-testid="former_time_p">
                          {t("former_time")}
                        </p>
                        <p className="line-through ">
                          <FiCalendar className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
                          {isClientTimezoneAvailable &&
                            typeof booking.startTime === "string" &&
                            parseDateFunc(dayjs(booking.startTime))}
                        </p>
                      </div>
                    )}
                    {!!eventType.seatsPerTimeSlot && (
                      <div className="text-bookinghighlight flex items-start text-sm">
                        <FiUser
                          className={`ml-[2px] mt-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] ${
                            booking && booking.attendees.length / eventType.seatsPerTimeSlot >= 0.5
                              ? "text-rose-600"
                              : booking && booking.attendees.length / eventType.seatsPerTimeSlot >= 0.33
                              ? "text-yellow-500"
                              : "text-bookinghighlight"
                          }`}
                        />
                        <p
                          className={`${
                            booking && booking.attendees.length / eventType.seatsPerTimeSlot >= 0.5
                              ? "text-rose-600"
                              : booking && booking.attendees.length / eventType.seatsPerTimeSlot >= 0.33
                              ? "text-yellow-500"
                              : "text-bookinghighlight"
                          } mb-2 font-medium`}>
                          {booking
                            ? eventType.seatsPerTimeSlot - booking.attendees.length
                            : eventType.seatsPerTimeSlot}{" "}
                          / {eventType.seatsPerTimeSlot} {t("seats_available")}
                        </p>
                      </div>
                    )}
                  </BookingDescription>
                </div>
              )}
              <div className={classNames("p-6", showEventTypeDetails ? "sm:w-1/2" : "w-full")}>
                <Form form={bookingForm} noValidate handleSubmit={bookEvent}>
                  <BookingFields
                    isDynamicGroupBooking={isDynamicGroupBooking}
                    fields={eventType.bookingFields}
                    locations={locations}
                    rescheduleUid={rescheduleUid}
                  />
  
                  <div
                    className={classNames(
                      "flex justify-end space-x-2 rtl:space-x-reverse",
                      // HACK: If the last field is guests, we need to move Cancel, Submit buttons up because "Add Guests" being present on the left and the buttons on the right, spacing is not required
                      eventType.bookingFields[eventType.bookingFields.length - 1].name ===
                        SystemField.Enum.guests
                        ? "-mt-4"
                        : ""
                    )}>
                    <Button color="minimal" type="button" onClick={() => router.back()}>
                      {t("cancel")}
                    </Button>
                    <Button
                      type="submit"
                      data-testid={rescheduleUid ? "confirm-reschedule-button" : "confirm-book-button"}
                      loading={mutation.isLoading || recurringMutation.isLoading}>
                      {rescheduleUid ? t("reschedule") : t("confirm")}
                    </Button>
                  </div>
                </Form>
                {(mutation.isError || recurringMutation.isError) && (
                  <ErrorMessage error={mutation.error || recurringMutation.error} />
                )}
              </div>
            </div>
          </div>
        </main>
        <Toaster position="bottom-right" />
      </Gates>
    );
  };
  
  export default BookingPage;
  
  function ErrorMessage({ error }: { error: unknown }) {
    const { t } = useLocale();
    const { query: { rescheduleUid } = {} } = useRouter();
    const router = useRouter();
  
    return (
      <div data-testid="booking-fail" className="mt-2 border-l-4 border-blue-400 bg-blue-50 p-4">
        <div className="flex">
          <div className="flex-shrink-0">
            <FiAlertTriangle className="h-5 w-5 text-blue-400" aria-hidden="true" />
          </div>
          <div className="ltr:ml-3 rtl:mr-3">
            <p className="text-sm text-blue-700">
              {rescheduleUid ? t("reschedule_fail") : t("booking_fail")}{" "}
              {error instanceof HttpError || error instanceof Error ? (
                <>
                  {t("can_you_try_again")}{" "}
                  <span className="cursor-pointer underline" onClick={() => router.back()}>
                    {t("go_back")}
                  </span>
                  .
                </> /* t(error.message) */
              ) : (
                "Unknown error"
              )}
            </p>
          </div>
        </div>
      </div>
    );
  }
  