@qite/tide-booking-component 1.1.3 → 1.2.0

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

@@ -0,0 +1,124 @@
+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--secondary' : '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

@@ -0,0 +1,63 @@
+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}>
+      <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 && (
+            <>
+              {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>
+  )
+}
+
+export default TravelerRooms;

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

@@ -154,12 +154,12 @@ export const parseFlightLines = (
 };
 
 const parseFlightLineDateTime = (
-  date: Date,
+  date: string,
   time: string
 ): string | undefined => {
   try {
     // Parse date
-    const parsedDate = new Date(date);
+    const parsedDate = parseISO(date);
 
     // Parse time
     const parsedTimeHours = parseInt(time.substring(0, 2));

package/src/booking-wizard/features/summary/summary.tsx

@@ -202,11 +202,11 @@ const Summary: React.FC<SummaryProps> = () => {
 
     const result = await validateVoucher(tideClientConfig, request);
 
-    if (result?.payload) {
+    if (result) {
       setVoucher({
         ...voucher,
         isValidated: true,
-        isValid: result.payload.isValid,
+        isValid: result.isValid,
       });
     }
   };

package/src/booking-wizard/features/travelers-form/travelers-form.tsx

@@ -224,7 +224,7 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
 
   return (
     <form
-      className="form"
+      className="form form__travelers"
       name="booking--travellers"
       id="booking--travellers"
       noValidate

package/src/booking-wizard/types.ts

@@ -1,3 +1,5 @@
+import { BookingPackageFlight } from "@qite/tide-client/build/types";
+
 export interface Settings {
   officeId: number;
   bookingOptions: BookingOptions;
@@ -54,6 +56,9 @@ export interface Settings {
     language: string,
     path: string;
   }[];
+  accommodations?: AccommodationContent[];
+  regimes?: RegimeContent[];
+  accommodationViewId?: number;
 }
 
 export interface BookingOptions {
@@ -152,3 +157,114 @@ export interface FlightLine {
   airlineNumber?: string;
   travelClass?: string;
 }
+
+export interface AccommodationContent {
+  code: string;
+  title: string;
+  imageUrl: string;
+  usps: string[];
+  description: string | undefined;
+}
+
+export interface RegimeContent {
+  code: string;
+  title: string;
+}
+
+export interface SelectableRoom {
+  index: number;
+  selected: SelectableRoomAccommodation,
+  alternatives: SelectableRoomAccommodation[];
+}
+
+export interface SelectableRoomAccommodation {
+  code: string;
+  regimeCode: string;
+  from: string;
+  to: string;
+  price: number;
+  regimes: SelectableRoomRegime[];
+  title: string;
+  image: string | undefined;
+  usps: string[];
+  description: string | undefined;
+  viewHtml: string | undefined
+}
+
+export interface SelectableRoomRegime {
+  code: string;
+  title: string;
+  price: number;
+}
+
+export interface GroupedFlights {
+  isSelected: boolean;
+  price: number;
+
+  outward: GroupedFlightDetails;
+  return: GroupedFlightDetails;
+
+  selectedOutward: BookingPackageFlight;
+  selectedReturn: BookingPackageFlight;
+}
+
+export interface GroupedFlightDetails {
+  airlineCode: string;
+  airline: string;
+  departureDate: string;
+  departureTime: string;
+  departureAirportCode: string;
+  departureAirport: string;
+  arrivalDate: string;
+  arrivalTime: string;
+  arrivalAirport: string;
+  changeDurationMinutes: number;
+  travelDurationMinutes: number;
+  travelDuration: string;
+  numberOfStops: number;
+  isNextDay: boolean;
+  travelClass: string;
+  flightLines: GroupedFlightLine[];
+}
+
+export interface GroupedFlightLine {
+  airline: string;
+  number: string;
+  departureDate: string;
+  departureTime: string;
+  departureAirport: string;
+  arrivalDate: string;
+  arrivalTime: string;
+  arrivalAirport: string;
+  travelDuration: string;
+  waitDuration: string | undefined;
+}
+
+export interface FlightFilterOptions {
+  airports: FlightFilterOption[];
+  airlines: FlightFilterOption[];
+  numberOfStops: FlightFilterOption[];
+  outward: FlightDirectionFilter;
+  return: FlightDirectionFilter;
+}
+
+export interface FlightFilterOption {
+  value: string;
+  label: string;
+  count: number;
+  isSelected: boolean;
+}
+
+export interface FlightDirectionFilter {
+  departurePeriod: FlightFilterOption[];
+  travelDuration: TimeRangeFilter;
+  changeDuration: TimeRangeFilter;
+}
+
+export interface TimeRangeFilter {
+  min: number;
+  max: number;
+  
+  selectedMin: number;
+  selectedMax: number;
+}

package/src/shared/components/rating.tsx

@@ -1,21 +1,21 @@
-import React from "react";
-import { clamp, range } from "lodash";
-import Icon from "../../booking-wizard/components/icon";
-
-interface RatingProps {
-  rating: number;
-}
-
-const Rating: React.FC<RatingProps> = ({ rating }) => {
-  const clampedRating = clamp(rating, 0, 5);
-  return (
-    <div className="rating">
-      {range(0, Math.floor(clampedRating)).map((i) => (
-        <Icon name="product-star" key={`rating-star-${i}`} />
-      ))}
-      {clampedRating % 1 > 0 && <Icon name="product-halfstar" />}
-    </div>
-  );
-};
-
-export default Rating;
+import React from "react";
+import { clamp, range } from "lodash";
+import Icon from "../../booking-wizard/components/icon";
+
+interface RatingProps {
+  rating: number;
+}
+
+const Rating: React.FC<RatingProps> = ({ rating }) => {
+  const clampedRating = clamp(rating, 0, 5);
+  return (
+    <div className="rating">
+      {range(0, Math.floor(clampedRating)).map((i) => (
+        <Icon name="product-star" key={`rating-star-${i}`} />
+      ))}
+      {clampedRating % 1 > 0 && <Icon name="product-halfstar" />}
+    </div>
+  );
+};
+
+export default Rating;