@qite/tide-booking-component 1.4.123 → 1.4.125

package/src/booking-wizard/features/room-options/room.tsx

@@ -1,123 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
-import { getPriceDifferenceText } from '../../../shared/utils/localization-util';
-import { SelectableRoomAccommodation } from '../../types';
-import { selectCurrencyCode, selectTranslations } from '../booking/selectors';
-import { getDatePeriodText, getDateText } from '../sidebar/sidebar-util';
-import { buildClassName } from '../../../shared/utils/class-util';
-
-interface RoomOptionProps {
-  room: SelectableRoomAccommodation;
-  hasAlternatives?: boolean;
-  selectedRoomPrice?: number;
-  onAcommodationChange?: (accommodationCode: string, regimeCode: string) => void;
-  onRegimeChange?: (code: string) => void;
-  onToggleAlternatives?: () => void;
-}
-
-const RoomOption: React.FC<RoomOptionProps> = ({ room, hasAlternatives, selectedRoomPrice, onAcommodationChange, onRegimeChange, onToggleAlternatives }) => {
-  const translations = useSelector(selectTranslations);
-  const currencyCode = useSelector(selectCurrencyCode);
-
-  const [roomPrice, setRoomPrice] = useState<number>(0);
-  const [roomRegimeCode, setRoomRegimeCode] = useState<string>(room.regimeCode);
-
-  useEffect(() => {
-    setRoomPrice(room.price);
-  }, [room.code, room.regimeCode]);
-
-  const getPriceDifference = (selectedPrice: number, currentPrice: number) => {
-    const priceDifference = (selectedPrice ?? 0) - currentPrice;
-    if (priceDifference !== 0) {
-      return `(${getPriceDifferenceText(priceDifference, currencyCode)})`;
-    } else {
-      return '';
-    }
-  };
-
-  const selectAccommodation = () => {
-    if (onAcommodationChange) {
-      onAcommodationChange(room.code, roomRegimeCode);
-    }
-  };
-
-  const handleRegimeChange: React.FormEventHandler<HTMLSelectElement> = (e) => {
-    let regimeCode = e.currentTarget.value;
-
-    const option = room.regimes.find((x) => x.code === regimeCode || (x.code === null && regimeCode === ''))!;
-    setRoomRegimeCode(option.code);
-    setRoomPrice(option.price);
-
-    if (onRegimeChange) {
-      onRegimeChange(regimeCode);
-    }
-
-    e.preventDefault();
-  };
-
-  return (
-    <>
-      <div className="form__room">
-        {room.viewHtml && <div className="form__room__wrapper" dangerouslySetInnerHTML={{ __html: room.viewHtml }} />}
-        {!room.viewHtml && (
-          <div className="form__room__wrapper">
-            {room.image && (
-              <div className="form__room__image">
-                <img src={room.image} alt="" className="form__room__img" />
-              </div>
-            )}
-            <div className="form__room__body">
-              <div className="">
-                <h3 className="form__room__title">{room.title}</h3>
-                {room.description && <p className="form__room__text">{room.description}</p>}
-                <ul className="list--usps form__room__usps">
-                  {room.usps.map((usp, uspIndex) => (
-                    <li key={uspIndex} className="list__item">
-                      {usp}
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            </div>
-          </div>
-        )}
-        <div className="form__room__footer">
-          <div className="form__room__footer__top">
-            <p className="form__room__dates">
-              {getDateText(room.from)} - {getDateText(room.to)}
-            </p>
-            <span className="form__room__days">{getDatePeriodText(translations, room.from, room.to)}</span>
-          </div>
-          <div className="form__room__footer__bottom">
-            {selectedRoomPrice != undefined && (
-              <p className="form__room__price form__room__price--increase">
-                <span>{getPriceDifference(roomPrice, selectedRoomPrice)}</span>
-              </p>
-            )}
-            {hasAlternatives && onToggleAlternatives && (
-              <button type="button" onClick={onToggleAlternatives} className="form__room__alternatives__btn">
-                {translations.ROOM_OPTIONS_FORM.SHOW_ALTERNATIVES}
-              </button>
-            )}
-            <div className="select-wrapper">
-              <div className="select-wrapper__select">
-                <select defaultValue={roomRegimeCode} onChange={handleRegimeChange}>
-                  {room.regimes.map((regime) => (
-                    <option key={regime.code} value={regime.code ?? ''}>
-                      {regime.title} {getPriceDifference(regime.price, roomPrice)}
-                    </option>
-                  ))}
-                </select>
-              </div>
-            </div>
-            <button type="button" onClick={selectAccommodation} className={buildClassName(['cta', selectedRoomPrice ? 'cta--select' : 'cta--selected'])}>
-              {selectedRoomPrice ? translations.SHARED.SELECT : translations.SHARED.SELECTED}
-            </button>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default RoomOption;

package/src/booking-wizard/features/room-options/traveler-rooms.tsx

@@ -1,64 +0,0 @@
-import React, { useState } from 'react';
-import { SelectableRoom } from '../../types';
-import { useSelector } from 'react-redux';
-import { selectTranslations } from '../booking/selectors';
-import RoomOption from './room';
-import { isEmpty } from 'lodash';
-
-interface TravelerRoomsProps {
-  index: number;
-  room: SelectableRoom;
-  onRoomChange: (index: number, accommodationCode: string, regimeCode: string | null) => void;
-}
-
-const TravelerRooms: React.FC<TravelerRoomsProps> = ({ index, room, onRoomChange }) => {
-  const translations = useSelector(selectTranslations);
-  const [showAlternatives, setShowAlternatives] = useState<boolean>(false);
-
-  const selectedAccommodationCode = room.selected.code;
-
-  return (
-    <div key={room.index} className="form__room__container">
-      <div className="form__room__header">
-        <h5>
-          {translations.ROOM_OPTIONS_FORM.TRAVELER_GROUP} {room.index + 1}
-        </h5>
-      </div>
-
-      <RoomOption
-        room={room.selected}
-        hasAlternatives={!isEmpty(room.alternatives)}
-        onRegimeChange={(regimeCode) => onRoomChange(index, selectedAccommodationCode, regimeCode)}
-        onToggleAlternatives={() => setShowAlternatives(!showAlternatives)}
-      />
-
-      {!isEmpty(room.alternatives) && showAlternatives && (
-        <div className="form__room__alternatives">
-          <div className="form__room__alternatives__header">
-            {translations.ROOM_OPTIONS_FORM.ALTERNATIVES_TRAVELER_GROUP} {room.index + 1}
-          </div>
-
-          {showAlternatives && (
-            <>
-              <div className="form__room__alternatives__content">
-                {room.alternatives.map((alternative, alternativeIndex) => (
-                  <RoomOption
-                    key={alternativeIndex}
-                    room={alternative}
-                    selectedRoomPrice={room.selected.price}
-                    onAcommodationChange={(accommodationCode, regimeCode) => {
-                      setShowAlternatives(false);
-                      onRoomChange(index, accommodationCode, regimeCode);
-                    }}
-                  />
-                ))}
-              </div>
-            </>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default TravelerRooms;

package/src/booking-wizard/features/sidebar/index.tsx

@@ -1,89 +0,0 @@
-import {
-  selectAgentAdressId,
-  selectDepartureFlight,
-  selectIncludedServiceTypes,
-  selectIsFetchingProductOptions,
-  selectIsOnRequest,
-  selectIsUnavailable,
-  selectPackageRooms,
-  selectReturnFlight,
-  selectRoomOptionDepartureFlightsMetaData,
-  selectRoomOptionReturnFlightsMetaData,
-  selectTranslations
-} from '../booking/selectors';
-import { getDateText, getTravelersText } from './sidebar-util';
-import { selectFormRooms } from '../travelers-form/travelers-form-slice';
-import {
-  selectBasePrice,
-  selectBasePricePerPaxType,
-  selectCommission,
-  selectDeposit,
-  selectIsFetchingPriceDetails,
-  selectSeparateExtraPriceDetails,
-  selectSeparateExtraPriceDetailsPerPaxType,
-  selectSeparatePackagePriceDetails,
-  selectTotalPrice
-} from '../price-details/selectors';
-import { useSelector } from 'react-redux';
-
-import React from 'react';
-import SettingsContext from '../../settings-context';
-import SharedSidebar from '../../../shared/booking/shared-sidebar';
-import { selectBookingAttributes } from '../booking/selectors';
-import { useContext } from 'react';
-
-interface SidebarProps {
-  productName: string;
-  thumbnailUrl?: string;
-}
-
-const SidebarContainer: React.FC<SidebarProps> = ({ productName, thumbnailUrl }) => {
-  const { sidebarHeaderComponent, sidebarFooterComponent, loaderComponent, showPricesPerPaxType } = useContext(SettingsContext);
-  const bookingAttributes = useSelector(selectBookingAttributes);
-  const rooms = useSelector(selectFormRooms);
-  const translations = useSelector(selectTranslations);
-  const travelerRooms = getTravelersText(rooms, translations);
-  const departureFlight = useSelector(selectDepartureFlight);
-  const departureFlightMetaData = departureFlight?.flightMetaData ?? useSelector(selectRoomOptionDepartureFlightsMetaData)?.[0];
-  const returnFlight = useSelector(selectReturnFlight);
-  const returnFlightMetaData = returnFlight?.flightMetaData ?? useSelector(selectRoomOptionReturnFlightsMetaData)?.[0];
-  const isFetchingProductOptions = useSelector(selectIsFetchingProductOptions);
-  const isFetchingPriceDetails = useSelector(selectIsFetchingPriceDetails);
-  const accommodations = useSelector(selectPackageRooms);
-  const includedServiceTypes = useSelector(selectIncludedServiceTypes);
-  const isUnavailable = useSelector(selectIsUnavailable) || false;
-  const isLoading = isFetchingProductOptions || isFetchingPriceDetails;
-  const agent = useSelector(selectAgentAdressId);
-
-  return (
-    <SharedSidebar
-      productName={productName}
-      thumbnailUrl={thumbnailUrl}
-      isLoading={isLoading}
-      startDateText={getDateText(bookingAttributes?.startDate)}
-      endDateText={bookingAttributes?.startDate !== bookingAttributes?.endDate ? getDateText(bookingAttributes?.endDate) : undefined}
-      travelerRooms={travelerRooms}
-      departureFlightMetaData={departureFlightMetaData}
-      returnFlightMetaData={returnFlightMetaData}
-      basePrice={useSelector(selectBasePrice)}
-      commission={useSelector(selectCommission)}
-      totalPrice={useSelector(selectTotalPrice)}
-      includedCosts={useSelector(selectSeparatePackagePriceDetails)}
-      extraCosts={useSelector(selectSeparateExtraPriceDetails)}
-      accommodations={accommodations}
-      includedServiceTypes={includedServiceTypes}
-      deposit={useSelector(selectDeposit)}
-      isOnRequest={useSelector(selectIsOnRequest)}
-      headerComponent={sidebarHeaderComponent ?? undefined}
-      footerComponent={sidebarFooterComponent ?? undefined}
-      loaderComponent={loaderComponent ?? undefined}
-      isUnavailable={isUnavailable}
-      basePricePerPaxType={showPricesPerPaxType ? useSelector(selectBasePricePerPaxType) : undefined}
-      seperateExtraPricePerPaxType={showPricesPerPaxType ? useSelector(selectSeparateExtraPriceDetailsPerPaxType) : undefined}
-      translations={translations}
-      agent={agent}
-    />
-  );
-};
-
-export default SidebarContainer;

package/src/booking-wizard/features/sidebar/sidebar-flight.tsx

@@ -1,66 +0,0 @@
-import { BookingPackageFlightMetaData } from '@qite/tide-client/build/types';
-import { first, last } from 'lodash';
-import React from 'react';
-import { useSelector } from 'react-redux';
-import { selectTranslations } from '../booking/selectors';
-import { getAirlines, getDateText, parseFlightLines } from './sidebar-util';
-
-interface SidebarFlightProps {
-  title: string;
-  flightMetaData: BookingPackageFlightMetaData;
-  translations?: any;
-}
-
-const SidebarFlight: React.FC<SidebarFlightProps> = ({ title, flightMetaData, translations }) => {
-  const flightLines = parseFlightLines(flightMetaData);
-  const firstFlight = first(flightLines);
-  const lastFlight = last(flightLines);
-
-  return (
-    <div className="pricing-summary__group">
-      <h6 className="pricing-summary__title">{title}</h6>
-      <div className="pricing-summary__row">
-        <div className="pricing-summary__property">{translations.SIDEBAR.FLIGHT_DEPARTURE}</div>
-        <div className="pricing-summary__value pricing-summary__value--flight">
-          {firstFlight?.departureAirportDescription} ({firstFlight?.departureAirportIata})<br />
-          {getDateText(firstFlight?.departureDate)} {firstFlight?.departureTime}
-          <br />
-          {firstFlight?.airlineCode}
-          {firstFlight?.number}
-        </div>
-      </div>
-
-      <div className="pricing-summary__row">
-        <div className="pricing-summary__property">{translations.SIDEBAR.FLIGHT_ARRIVAL}</div>
-        <div className="pricing-summary__value pricing-summary__value--flight">
-          {lastFlight?.arrivalAirportDescription} ({lastFlight?.arrivalAirportIata})<br />
-          {getDateText(lastFlight?.arrivalDate)} {lastFlight?.arrivalTime}
-          <br />
-          {lastFlight?.airlineCode}
-          {lastFlight?.number}
-        </div>
-      </div>
-
-      <div className="pricing-summary__row">
-        <div className="pricing-summary__property">
-          {flightMetaData.flightLines.length > 1 && (
-            <i>
-              {flightMetaData.flightLines.length - 1}
-              {'x '}
-              {translations.SIDEBAR.CHANGES}
-            </i>
-          )}
-        </div>
-        <div className="pricing-summary__value">{getAirlines(flightLines)}</div>
-      </div>
-      {flightMetaData.luggageIncluded && (
-        <div className="pricing-summary__row">
-          <div className="pricing-summary__property"></div>
-          <div className="pricing-summary__value">{translations.SIDEBAR.LUGGAGE_INCLUDED}</div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default SidebarFlight;

package/src/booking-wizard/features/sidebar/sidebar-util.ts

@@ -1,143 +0,0 @@
-import { BookingPackageFlightMetaData } from '@qite/tide-client/build/types';
-import { differenceInCalendarDays, format, parseISO } from 'date-fns';
-import { compact, orderBy, uniq } from 'lodash';
-import { FlightLine, RoomTraveler } from '../../types';
-
-export const getTravelersText = (rooms: { adults: RoomTraveler[]; children: RoomTraveler[] }[], translations: any): string[] => {
-  return rooms.map((r) =>
-    compact([
-      r.adults.length,
-      r.adults.length === 1 && ` ${translations.SIDEBAR.TRAVELERS_ADULT}`,
-      r.adults.length > 1 && ` ${translations.SIDEBAR.TRAVELERS_ADULTS}`,
-      r.adults && r.adults.length && r.children && r.children.length && ', ',
-      r.children.length,
-      r.children.length === 1 && ` ${translations.SIDEBAR.TRAVELERS_CHILD}`,
-      r.children.length > 1 && ` ${translations.SIDEBAR.TRAVELERS_CHILDREN}`
-    ]).join('')
-  );
-};
-
-export const getDateText = (date: string | undefined, hideYear?: boolean): string | undefined => {
-  if (!date) {
-    // No date set
-    return undefined;
-  }
-
-  try {
-    return hideYear ? format(parseISO(date), 'dd/MM') : format(parseISO(date), 'dd/MM/yyyy');
-  } catch {
-    // Error while parsing date
-    return undefined;
-  }
-};
-
-export const getDatePeriodText = (translations: Record<string, any>, from?: string, to?: string, nightsOnly?: boolean) => {
-  if (!from || !to) {
-    return undefined;
-  }
-
-  try {
-    const fromDate = parseISO(from);
-    const toDate = parseISO(to);
-
-    const dayDifference = differenceInCalendarDays(toDate, fromDate);
-    const daysLabel = dayDifference == 0 ? `1 ${translations.OPTIONS_FORM.DAY}` : `${dayDifference + 1} ${translations.OPTIONS_FORM.DAYS}`;
-
-    if (!dayDifference) return daysLabel;
-
-    const nightsLabel = dayDifference == 1 ? `1 ${translations.OPTIONS_FORM.NIGHT}` : `${dayDifference} ${translations.OPTIONS_FORM.NIGHTS}`;
-
-    return nightsOnly ? nightsLabel : `${daysLabel}, ${nightsLabel}`;
-  } catch {
-    return undefined;
-  }
-};
-
-export const getFlightText = (firstFlight: FlightLine | undefined, lastFlight: FlightLine | undefined): string => {
-  return compact([
-    firstFlight?.departureAirportDescription,
-    ` (${firstFlight?.departureAirportIata})`,
-    firstFlight?.departureAirportDescription && lastFlight?.arrivalAirportDescription && ' > ',
-    lastFlight?.arrivalAirportDescription,
-    ` (${lastFlight?.arrivalAirportIata})`
-  ]).join('');
-};
-
-export const getAirlines = (flightLines: FlightLine[] | undefined) => {
-  return uniq(flightLines?.filter((x) => x.airlineDescription)?.map((flightLine) => flightLine.airlineDescription)).join(', ');
-};
-
-export const getFlightHours = (firstFlight: FlightLine | undefined, lastFlight: FlightLine | undefined): string => {
-  return compact([
-    getDateText(firstFlight?.departureDate),
-    ' ',
-    firstFlight?.departureTime,
-    ' > ',
-    getDateText(lastFlight?.arrivalDate),
-    ' ',
-    lastFlight?.arrivalTime
-  ]).join('');
-};
-
-export const parseFlightLines = (metaDatas: BookingPackageFlightMetaData): FlightLine[] | undefined => {
-  if (!metaDatas.flightLines) {
-    return undefined;
-  }
-
-  const parsedFlightLines: FlightLine[] = metaDatas.flightLines.map((parsedFlightLine) => {
-    const departureDate = parseFlightLineDateTime(parsedFlightLine.departureDate, parsedFlightLine.departureTime);
-    const arrivalDate = parseFlightLineDateTime(parsedFlightLine.arrivalDate, parsedFlightLine.arrivalTime);
-
-    return <FlightLine>{
-      departureAirportIata: parsedFlightLine.departureAirport,
-      departureAirportDescription: parsedFlightLine.departureAirportDescription,
-      departureDate: departureDate,
-      departureTime: parsedFlightLine.departureTime,
-      arrivalAirportIata: parsedFlightLine.arrivalAirport,
-      arrivalAirportDescription: parsedFlightLine.arrivalAirportDescription,
-      arrivalDate: arrivalDate,
-      arrivalTime: parsedFlightLine.arrivalTime,
-      airlineIata: parsedFlightLine.airline,
-      airlineDescription: parsedFlightLine.operatingAirlineDescription,
-      airlineNumber: parsedFlightLine.number,
-      travelClass: parsedFlightLine.travelClass,
-      number: parsedFlightLine.number,
-      airlineCode: parsedFlightLine.airlineCode
-    };
-  });
-
-  return orderBy(parsedFlightLines, 'departureDate', 'asc');
-};
-
-const parseFlightLineDateTime = (date: string, time: string): string | undefined => {
-  try {
-    // Parse date
-    const parsedDate = parseISO(date);
-
-    // Parse time
-    const parsedTimeHours = parseInt(time.substring(0, 2));
-    const parsedTimeMinutes = parseInt(time.substring(3, 5));
-
-    if (!Number.isNaN(parsedTimeHours) && !Number.isNaN(parsedTimeMinutes)) {
-      parsedDate.setUTCHours(parsedTimeHours, parsedTimeMinutes);
-    }
-
-    return parsedDate.toISOString().slice(0, -1);
-  } catch {
-    // Parsing failed
-    return undefined;
-  }
-};
-
-export const getPaxTypeTranslation = (translations: Record<string, any>, paxType: string, numberOfPax: number): string => {
-  switch (paxType) {
-    case 'ADULT':
-      return numberOfPax === 1 ? translations.SIDEBAR.TRAVELERS_ADULT : translations.SIDEBAR.TRAVELERS_ADULTS;
-    case 'CHILD':
-      return numberOfPax === 1 ? translations.SIDEBAR.TRAVELERS_CHILD : translations.SIDEBAR.TRAVELERS_CHILDREN;
-    case 'INFANT':
-      return numberOfPax === 1 ? translations.SIDEBAR.TRAVELERS_INFANT : translations.SIDEBAR.TRAVELERS_INFANTS;
-    default:
-      return '';
-  }
-};