@qite/tide-booking-component 1.4.91 → 1.4.93

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

@@ -1,123 +1,123 @@
-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;
+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 +1,64 @@
-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;
+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,81 +1,81 @@
-import {
-  selectDepartureFlight,
-  selectIncludedServiceTypes,
-  selectIsFetchingProductOptions,
-  selectIsOnRequest,
-  selectIsUnavailable,
-  selectPackageRooms,
-  selectReturnFlight,
-  selectRoomOptionDepartureFlightsMetaData,
-  selectRoomOptionReturnFlightsMetaData
-} from '../booking/selectors';
-import { getDateText, getTravelersText } from './sidebar-util';
-import { selectFormRooms } from '../travelers-form/travelers-form-slice';
-import {
-  selectBasePrice,
-  selectBasePricePerPaxType,
-  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 Sidebar from './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 travelerRooms = getTravelersText(rooms);
-  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;
-
-  return (
-    <Sidebar
-      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)}
-      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}
-    />
-  );
-};
-
-export default SidebarContainer;
+import {
+  selectDepartureFlight,
+  selectIncludedServiceTypes,
+  selectIsFetchingProductOptions,
+  selectIsOnRequest,
+  selectIsUnavailable,
+  selectPackageRooms,
+  selectReturnFlight,
+  selectRoomOptionDepartureFlightsMetaData,
+  selectRoomOptionReturnFlightsMetaData
+} from '../booking/selectors';
+import { getDateText, getTravelersText } from './sidebar-util';
+import { selectFormRooms } from '../travelers-form/travelers-form-slice';
+import {
+  selectBasePrice,
+  selectBasePricePerPaxType,
+  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 Sidebar from './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 travelerRooms = getTravelersText(rooms);
+  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;
+
+  return (
+    <Sidebar
+      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)}
+      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}
+    />
+  );
+};
+
+export default SidebarContainer;