@qite/tide-booking-component 1.3.2 → 1.3.3

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

@@ -1,160 +1,160 @@
-import React, { useEffect, useState } from "react";
-import { useSelector } from "react-redux";
-import { getPriceDifferenceText } from "../../../shared/utils/localization-util";
-import { SelectableRoomAccommodation } from "../../types";
-import { 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 [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)})`;
-    } 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(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 { 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 [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)})`;
+    } 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(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,75 +1,75 @@
-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,76 +1,76 @@
-import {
-  selectDepartureFlight,
-  selectIsFetchingProductOptions,
-  selectIsOnRequest,
-  selectPackageRooms,
-  selectReturnFlight,
-} from "../booking/selectors";
-import { getDateText, getTravelersText } from "./sidebar-util";
-import { selectFormRooms } from "../travelers-form/travelers-form-slice";
-import {
-  selectBasePrice,
-  selectDeposit,
-  selectIsFetchingPriceDetails,
-  selectSeparateExtraPriceDetails,
-  selectSeparatePackagePriceDetails,
-  selectTotalPrice,
-} from "../price-details/price-details-slice";
-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 } =
-    useContext(SettingsContext);
-  const bookingAttributes = useSelector(selectBookingAttributes);
-  const rooms = useSelector(selectFormRooms);
-  const travelerRooms = getTravelersText(rooms);
-  const departureFlight = useSelector(selectDepartureFlight);
-  const returnFlight = useSelector(selectReturnFlight);
-  const isFetchingProductOptions = useSelector(selectIsFetchingProductOptions);
-  const isFetchingPriceDetails = useSelector(selectIsFetchingPriceDetails);
-  const accommodations = useSelector(selectPackageRooms);
-
-  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}
-      departureFlight={departureFlight}
-      returnFlight={returnFlight}
-      basePrice={useSelector(selectBasePrice)}
-      totalPrice={useSelector(selectTotalPrice)}
-      includedCosts={useSelector(selectSeparatePackagePriceDetails)}
-      extraCosts={useSelector(selectSeparateExtraPriceDetails)}
-      accommodations={accommodations}
-      deposit={useSelector(selectDeposit)}
-      isOnRequest={useSelector(selectIsOnRequest)}
-      headerComponent={sidebarHeaderComponent ?? undefined}
-      footerComponent={sidebarFooterComponent ?? undefined}
-      loaderComponent={loaderComponent ?? undefined}
-    />
-  );
-};
-
-export default SidebarContainer;
+import {
+  selectDepartureFlight,
+  selectIsFetchingProductOptions,
+  selectIsOnRequest,
+  selectPackageRooms,
+  selectReturnFlight,
+} from "../booking/selectors";
+import { getDateText, getTravelersText } from "./sidebar-util";
+import { selectFormRooms } from "../travelers-form/travelers-form-slice";
+import {
+  selectBasePrice,
+  selectDeposit,
+  selectIsFetchingPriceDetails,
+  selectSeparateExtraPriceDetails,
+  selectSeparatePackagePriceDetails,
+  selectTotalPrice,
+} from "../price-details/price-details-slice";
+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 } =
+    useContext(SettingsContext);
+  const bookingAttributes = useSelector(selectBookingAttributes);
+  const rooms = useSelector(selectFormRooms);
+  const travelerRooms = getTravelersText(rooms);
+  const departureFlight = useSelector(selectDepartureFlight);
+  const returnFlight = useSelector(selectReturnFlight);
+  const isFetchingProductOptions = useSelector(selectIsFetchingProductOptions);
+  const isFetchingPriceDetails = useSelector(selectIsFetchingPriceDetails);
+  const accommodations = useSelector(selectPackageRooms);
+
+  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}
+      departureFlight={departureFlight}
+      returnFlight={returnFlight}
+      basePrice={useSelector(selectBasePrice)}
+      totalPrice={useSelector(selectTotalPrice)}
+      includedCosts={useSelector(selectSeparatePackagePriceDetails)}
+      extraCosts={useSelector(selectSeparateExtraPriceDetails)}
+      accommodations={accommodations}
+      deposit={useSelector(selectDeposit)}
+      isOnRequest={useSelector(selectIsOnRequest)}
+      headerComponent={sidebarHeaderComponent ?? undefined}
+      footerComponent={sidebarFooterComponent ?? undefined}
+      loaderComponent={loaderComponent ?? undefined}
+    />
+  );
+};
+
+export default SidebarContainer;