bookito-widget 0.42.16-beta.2 → 0.42.16-beta.21

package/src/BookitoForm/BookingForm.tsx

@@ -1,470 +0,0 @@
-import { formatPrice, useApp } from '@carlito/api';
-import {
-  ListBookingsResponse,
-  LocalizedEventData,
-  findOccurrenceForDate,
-  useCreateBooking,
-  usePmsEventBooking,
-} from '@carlito/bookito-client';
-import { MultiLangTextarea, SlideAnimation } from '@carlito/dashboard-ui';
-import { applyTimeOfDate } from '@carlito/date-utils';
-import { useGetHotelConfiguration, useLoginGuest } from '@carlito/hub-react';
-import { SUPPORTED_LANGUAGE_CODES, SupportedLanguages } from '@carlito/intl';
-import {
-  BookingParams,
-  BookitoGuestChip,
-  BookitoGuestForm,
-  BookitoParticipantsPicker,
-  BookitoStepperBookingRequestForm,
-  FormAlert,
-  QuantityPicker,
-} from '@carlito/shared-ui';
-import { Formik, useFormikContext } from 'formik';
-import { FormikHelpers } from 'formik/dist/types';
-import humanizeDuration from 'humanize-duration';
-import { Fragment, useCallback, useState } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
-import { IoArrowBack } from 'react-icons/io5';
-import FormSubmitButton from './FormSubmitButton';
-import { isEventAllDay } from './helper';
-type InitialBookingData = ListBookingsResponse['bookings'][0];
-type FormValues = Partial<InitialBookingData> & {
-  selectedTimeSlot?: {
-    startDateTime: string;
-    numOfConfirmedParticipants?: number;
-  };
-  bookingRef?: string;
-  birthDate?: string;
-};
-type EventInfoProps = {
-  price?: number | null;
-  overallDuration?: number | null;
-  stringifiedDuration: string;
-  activeLanguage: SupportedLanguages;
-  isAllDay?: boolean;
-};
-
-export type BookingFormProps = {
-  event: LocalizedEventData;
-  date: Date;
-  authId: string;
-  availableOnDates: string[];
-  shouldPreselectDateInCalendar?: boolean;
-};
-
-const supportedLanguages: Record<SupportedLanguages, string> = {
-  en: 'English',
-  de: 'Deutsch',
-  it: 'Italiano',
-  fr: 'Français',
-  pl: 'Polski',
-};
-
-function getUserLanguage() {
-  const browserLanguages = [...navigator.languages];
-  const selectedLanugage = SUPPORTED_LANGUAGE_CODES.find((availableLanguage) =>
-    browserLanguages.find((browserLanguage) => browserLanguage.includes(availableLanguage))
-  );
-
-  if (!selectedLanugage) {
-    return 'en';
-  }
-
-  return selectedLanugage;
-}
-
-export const ChooseLanguage = () => {
-  const { getFieldProps } = useFormikContext();
-
-  const fieldName = `bookedBy.communicationLanguage`;
-
-  const { value: language, onBlur, onChange } = getFieldProps<SupportedLanguages>(fieldName);
-
-  return (
-    <select
-      className="text-sm mt-4 mb-6 rounded-lg outline-none border bg-light-default border-gray-300 focus:border-primary-default focus:ring-2 focus:ring-primary-default focus:ring-offset-1"
-      value={language}
-      onChange={onChange}
-      onBlur={onBlur}
-      name={fieldName}
-    >
-      {Object.entries(supportedLanguages).map(([key, value]) => (
-        <option key={key} value={key}>
-          {value}
-        </option>
-      ))}
-    </select>
-  );
-};
-
-const EventInfo = ({
-  price,
-  overallDuration,
-  stringifiedDuration,
-  activeLanguage,
-  isAllDay,
-}: EventInfoProps) => {
-  const { hotelCurrency } = useApp();
-  return (
-    <div className="flex justify-between items-start gap-2">
-      {price && price !== null ? (
-        <div>
-          <p className="font-bold text-base">
-            <Trans i18nKey="price" />
-          </p>
-          <p className="text-4xl font-bold">{formatPrice(price, activeLanguage, hotelCurrency)}</p>
-        </div>
-      ) : (
-        <div />
-      )}
-      {overallDuration && (
-        <div className="text-right bookito-form__duration">
-          <p className="font-bold text-base">
-            <Trans i18nKey="duration" />
-          </p>
-          {isAllDay ? (
-            <p className="text-4xl font-normal">
-              <Trans i18nKey="all-day" />
-            </p>
-          ) : (
-            <p className="text-4xl font-normal">{stringifiedDuration}</p>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export const BookingForm = ({
-  event: eventParams,
-  date: onDate,
-  authId,
-  availableOnDates,
-  shouldPreselectDateInCalendar = true,
-}: BookingFormProps) => {
-  const { mutate: createBooking, isLoading, isSuccess, reset: resetMutation } = useCreateBooking();
-  const userLangauge = getUserLanguage();
-  const { t } = useTranslation();
-
-  const hotelConfig = useGetHotelConfiguration({
-    hotelId: authId,
-  });
-
-  const guestLoginMutation = useLoginGuest();
-
-  // TODO: Display loading state
-  const settingsLoading = hotelConfig.isLoading;
-  const hasPms = hotelConfig.hasPms;
-
-  const initialValues: FormValues = {
-    participants: [
-      {
-        name: '',
-        email: '',
-        roomNr: '',
-        phoneNr: '',
-        communicationLanguage: userLangauge,
-        isMainBooker: true,
-        isExternal: true,
-      },
-    ],
-    comment: '',
-    selectedTimeSlot: {
-      startDateTime: '',
-      numOfConfirmedParticipants: 0,
-    },
-    bookingRef: '',
-  };
-
-  const occurrence = findOccurrenceForDate(onDate, eventParams) ?? eventParams?.occurrences[0];
-
-  const overallDuration =
-    (eventParams?.timeBookability === 'custom'
-      ? eventParams?.timeBookabilitySettings?.timeBlockDurationMs
-      : occurrence?.durationMs) ?? occurrence.durationMs;
-
-  const stringifiedDuration = humanizeDuration(overallDuration ?? 0, {
-    language: 'shortDe',
-    // fallbacks: ['en'],
-    languages: {
-      shortDe: {
-        y: () => 'y',
-        mo: () => 'mo',
-        w: () => 'w',
-        d: () => 'd',
-        h: () => 'h',
-        m: () => 'm',
-        s: () => 's',
-        ms: () => 'ms',
-      },
-    },
-    units: ['h', 'm'],
-    maxDecimalPoints: 0,
-    delimiter: ' ',
-  } as any);
-
-  const startDateTime = applyTimeOfDate(onDate, new Date(occurrence.startDateTime));
-  const isAllDay = eventParams ? isEventAllDay(startDateTime, eventParams) : undefined;
-
-  const {
-    loadGuestError,
-    setSelectedParticipants,
-    allParticipants,
-    selectedParticipants,
-    isLoadingGuest,
-    loginGuest,
-    resetValues,
-  } = usePmsEventBooking({ initialBookingData: initialValues });
-  const [isSelectingParticipant, setIsSelectingParticipant] = useState(false);
-
-  async function onSubmit(
-    values: FormValues,
-    { resetForm }: Pick<FormikHelpers<FormValues>, 'resetForm'>
-  ) {
-    const guest = values.participants?.[0];
-
-    let carlitoHubUserId: string | undefined = undefined;
-
-    if (hasPms && !isSelectingParticipant) {
-      if (guest && (guest.roomNr || values.bookingRef)) {
-        const { isLoggedIn, loggedInUserId, hasMultipleParticipants } = await loginGuest({
-          hotelId: authId,
-          birthDate: values.birthDate,
-          bookingReference: values.bookingRef,
-          roomNumber: guest.roomNr,
-        });
-        if (!isLoggedIn) {
-          return;
-        } else if (hasMultipleParticipants) {
-          return setIsSelectingParticipant(true);
-        } else {
-          carlitoHubUserId = loggedInUserId;
-        }
-      }
-    }
-
-    const participants =
-      selectedParticipants.length > 0 && hasPms
-        ? allParticipants
-            .filter((el) => selectedParticipants.includes(el.id))
-            .map((participant) => ({
-              carlitoHubUserId: participant.id,
-              isMainBooker: participant.isMainBooker,
-            }))
-        : [
-            {
-              ...guest,
-              carlitoHubUserId,
-            },
-          ];
-
-    createBooking(
-      {
-        bookedForDate: values.bookedForDate ? values.bookedForDate : startDateTime.toISOString(),
-        eventId: eventParams.id,
-        comment: values?.comment,
-        priceVariants: values.priceVariants,
-        numOfAdditionalParticipants: values.numOfAdditionalParticipants,
-        participants,
-        bookingSource: 'web_widget',
-      },
-      {
-        onSuccess: () => {
-          resetForm();
-        },
-      }
-    );
-  }
-
-  const onSuccessAnimationEnd = useCallback(() => {
-    resetMutation();
-    setIsSelectingParticipant(false);
-    resetValues();
-  }, [resetMutation]);
-
-  const priceVariants = eventParams.priceVariants?.map((priceVariant) => {
-    return {
-      id: priceVariant.id,
-      displayName: priceVariant.description ?? '',
-      price: priceVariant.priceVariation.amount,
-    };
-  });
-  const [isTimeSelected, setTimeSelectedValue] = useState<boolean>(false);
-  const [showGuestForm, updateGuestFormDisplayState] = useState<boolean>(false);
-
-  const isTimeSlotEnabled =
-    eventParams.timeBookability === 'custom' &&
-    !!eventParams.timeBookabilitySettings?.timeBlockDurationMs;
-
-  return (
-    <Formik initialValues={initialValues} onSubmit={onSubmit}>
-      {(props) => {
-        const {
-          values,
-          resetForm,
-          isSubmitting,
-          dirty,
-          handleChange,
-          handleBlur,
-          handleSubmit,
-          setValues,
-        } = props;
-
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        const onBookingParamsChange = useCallback(
-          (requestParams: BookingParams) => {
-            setValues({
-              ...values,
-              numOfAdditionalParticipants:
-                (requestParams.numParticipants ?? 0) > 1
-                  ? (requestParams.numParticipants ?? 0) - 1
-                  : undefined,
-              priceVariants: requestParams.priceVariants,
-              bookedForDate: requestParams.selectedTimeSlot?.startDateTime
-                ? requestParams.selectedTimeSlot.startDateTime
-                : requestParams.selectedDateTime?.toISOString(),
-              comment: requestParams.comment,
-              selectedTimeSlot: requestParams.selectedTimeSlot,
-              participants: [],
-            });
-            if (requestParams.selectedTimeSlot?.startDateTime) {
-              setTimeSelectedValue(true);
-            }
-          },
-          [setValues, values]
-        );
-
-        const roomNr = values.participants?.[0]?.roomNr; // bookedBy?.roomNr
-        const bookingRef = values.bookingRef;
-        const shouldHideExtendedForm = hasPms && (roomNr || bookingRef);
-
-        const shouldShowBirthdateInput = shouldHideExtendedForm;
-
-        const bookedBy = values.participants?.[0];
-
-        console.log(values);
-
-        return (
-          <form className="bookito-form flex mt-10 flex-col min-h-[65vh]" onSubmit={handleSubmit}>
-            <EventInfo
-              price={eventParams.basePrice?.amount || 0}
-              activeLanguage={bookedBy?.communicationLanguage ?? 'en'}
-              isAllDay={isAllDay}
-              stringifiedDuration={stringifiedDuration}
-              overallDuration={overallDuration}
-            />
-
-            <div className="mt-12 flex flex-col">
-              <BookitoStepperBookingRequestForm
-                showExtraFields={false}
-                eventPriceVariants={priceVariants}
-                isTimeSlotEnabledEvent={isTimeSlotEnabled}
-                bookingParams={{
-                  selectedDateTime: values.bookedForDate
-                    ? new Date(values.bookedForDate)
-                    : shouldPreselectDateInCalendar
-                    ? startDateTime
-                    : undefined,
-                  numParticipants: (values.numOfAdditionalParticipants ?? 0) + 1,
-                  priceVariants: values.priceVariants,
-                  selectedTimeSlot: values.selectedTimeSlot,
-                }}
-                updateBookingParams={onBookingParamsChange}
-                maxParticipants={eventParams.maxParticipants}
-                availableOnDates={availableOnDates}
-                onSubmitBooking={() => {
-                  onSubmit(values, { resetForm });
-                }}
-                eventInfo={{
-                  id: eventParams.id,
-                  occurrences: eventParams.occurrences,
-                  bookability: eventParams.bookability,
-                  timeslotDuration: eventParams.timeBookabilitySettings?.timeBlockDurationMs ?? 0,
-                }}
-                updateSuccessMsg={() => {
-                  // no-op
-                }}
-                ownerAuthId={authId}
-                userLanguage={userLangauge}
-                updateGuestFormDisplayState={updateGuestFormDisplayState}
-              />
-
-              {showGuestForm && (
-                <div className="mt-2 flex flex-col">
-                  <h4 className=" font-bold text-xl mb-2 ">
-                    <Trans i18nKey="booking-details" />
-                  </h4>
-                  {loadGuestError && (
-                    <FormAlert title={t('error-while-booking')} errors={[loadGuestError]} />
-                  )}
-                  <div className={'relative w-full'}>
-                    <SlideAnimation
-                      view={isSelectingParticipant ? 1 : 0}
-                      direction={isSelectingParticipant ? 'Right' : 'Left'}
-                    >
-                      <div className={'pb-5'}>
-                        {isSelectingParticipant ? (
-                          <Fragment>
-                            <div
-                              onClick={() => {
-                                setIsSelectingParticipant(false);
-                              }}
-                              role={'button'}
-                              className={
-                                'bg-secondary-default text-secondary-contrast h-8 w-8 flex justify-center items-center rounded-full'
-                              }
-                            >
-                              <IoArrowBack />
-                            </div>
-                            <BookitoParticipantsPicker
-                              renderGuestChip={(props) => <BookitoGuestChip {...props} />}
-                              participants={allParticipants}
-                              selectedParticipants={selectedParticipants}
-                              onParticipantsChange={setSelectedParticipants}
-                            />
-                            <QuantityPicker
-                              count={values.numOfAdditionalParticipants ?? 0}
-                              onCountChange={() => {
-                                setValues({
-                                  ...values,
-                                  numOfAdditionalParticipants:
-                                    (values.numOfAdditionalParticipants ?? 0) + 1,
-                                });
-                              }}
-                            />
-                          </Fragment>
-                        ) : (
-                          <div>
-                            <BookitoGuestForm hasPms={hasPms} />
-                            <div className="space-y-4">
-                              <MultiLangTextarea name="comment" label={t('comment')} />
-                              <ChooseLanguage />
-                            </div>
-                          </div>
-                        )}
-                        <div className="flex-1 my-4">
-                          <FormSubmitButton
-                            onSuccessAnimationEnd={onSuccessAnimationEnd}
-                            success={isSuccess}
-                            loading={isLoading}
-                            disabled={!dirty || isSubmitting || !isTimeSelected}
-                          >
-                            {hasPms && !isSelectingParticipant ? (
-                              <Trans i18nKey="next" />
-                            ) : (
-                              <Trans i18nKey="submit" />
-                            )}
-                          </FormSubmitButton>
-                        </div>
-                      </div>
-                    </SlideAnimation>
-                  </div>
-                </div>
-              )}
-            </div>
-          </form>
-        );
-      }}
-    </Formik>
-  );
-};