@qite/tide-booking-component 1.1.3 → 1.2.0

package/src/booking-wizard/features/flight-options/index.tsx

@@ -1,18 +1,19 @@
 import React, { useContext, useEffect, useState } from "react";
 
 import { BookingPackageFlight } from "@qite/tide-client/build/types";
-import { Link, navigate } from "@reach/router";
+import { navigate } from "@reach/router";
+import { isEmpty } from "lodash";
 import { useSelector } from "react-redux";
 import { buildClassName } from "../../../shared/utils/class-util";
 import SettingsContext from "../../settings-context";
 import { useAppDispatch } from "../../store";
+import { FlightFilterOptions, GroupedFlights } from "../../types";
 import {
   setCurrentStep,
-  setOutwardFlight,
-  setPackage,
-  setReturnFlight
+  setFlights,
+  setPackage
 } from "../booking/booking-slice";
-import { OPTIONS_FORM_STEP, ROOM_OPTIONS_FORM_STEP } from "../booking/constants";
+import { ROOM_OPTIONS_FORM_STEP } from "../booking/constants";
 import {
   selectBookingQueryString,
   selectIsFetchingProductOptions,
@@ -21,38 +22,40 @@ import {
   selectTranslations
 } from "../booking/selectors";
 import { fetchPriceDetails } from "../price-details/price-details-slice";
+import FlightFilter from "./flight-filter";
 import FlightOption from "./flight-option";
 import FlightOptionModal from "./flight-option-modal";
+import { buildFilterOptions, buildGroupedFlights, filterGroupedFlights } from "./flight-utils";
 
 interface FlightOptionsFormProps { }
 
 const FlightOptionsForm: React.FC<FlightOptionsFormProps> = () => {
   const settings = useContext(SettingsContext);
 
-  const translations = useSelector(selectTranslations);  
+  const translations = useSelector(selectTranslations);
   const dispatch = useAppDispatch();
   const packageDetails = useSelector(selectPackageDetails);
   const bookingQueryString = useSelector(selectBookingQueryString);
   const isLoading = useSelector(selectIsFetchingProductOptions);
   const flights = useSelector(selectPackageFlights);
 
+  const [filterOptions, setFilterOptions] = useState<FlightFilterOptions | undefined>();
+  const [flightGroups, setFlightGroups] = useState<GroupedFlights[]>([]);
+
   const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
     if (settings.skipRouter) {
-      dispatch(setCurrentStep(OPTIONS_FORM_STEP));
+      dispatch(setCurrentStep(ROOM_OPTIONS_FORM_STEP));
     } else {
-      navigate(`${settings.basePath}${settings.options.pathSuffix}?${bookingQueryString}`);
+      if (settings.roomOptions.isHidden) {
+        navigate(`${settings.basePath}${settings.options.pathSuffix}?${bookingQueryString}`);
+      } else {
+        navigate(`${settings.basePath}${settings.roomOptions.pathSuffix}?${bookingQueryString}`);
+      }
     }
 
     e.preventDefault();
   };
 
-  const goPrevious = () => {
-    dispatch(setCurrentStep(ROOM_OPTIONS_FORM_STEP));
-  };
-
-  const selectedOptionGuid =  packageDetails?.options.find(x => x.isSelected)?.id!;
-  const selectedOutwardFlight = flights.outward?.find(x => x.isSelected);
-  const selectedReturnFlight = flights.return?.find(x => x.isSelected);
   const currentFlightPrice = (flights.outward?.find(x => x.isSelected)?.price || 0)
     + (flights.return?.find(x => x.isSelected)?.price || 0);
 
@@ -97,20 +100,23 @@ const FlightOptionsForm: React.FC<FlightOptionsFormProps> = () => {
       }
     }
     dispatch(fetchPriceDetails());
-  }, []);
 
-  const [value, setValue] = useState("2");
+    const filters = buildFilterOptions(flights.outward, flights.return, translations);
+    setFilterOptions(filters);
+  }, []);
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = event.target.value;
-    setValue(newValue);
-    event.target.style.setProperty('--value', newValue);
-  };
+  
+  useEffect(() => {
+    const groups = buildGroupedFlights(flights.outward, flights.return);
+    setFlightGroups(groups);
+  }, [flights]);
 
+  const filteredGroups = filterGroupedFlights(flightGroups, filterOptions);
+  const resultCount = filteredGroups.length;
 
   return (
     <>
-      <FlightOptionModal /> 
+      <FlightOptionModal />
       <form
         className="form"
         name="booking--flights"
@@ -120,96 +126,39 @@ const FlightOptionsForm: React.FC<FlightOptionsFormProps> = () => {
       >
         {isLoading && settings.loaderComponent}
         {!isLoading && (
-            <div className="form__group">
-              <div className="booking-card">
-                {/* <div className="booking-card__header">
-                  <h2 className="booking-card__header-heading">
-                    {translations.FLIGHTS_FORM.OUTWARD_FLIGHTS}
-                  </h2>
-                </div> */}
-                <div className="booking-card__body">
-                <button className="cta cta--filter">
-                <svg width={11} height={10}><use href="/icons/svg-sprite.svg#filter"></use></svg>
-                  <span>Filter opties</span>
-                  </button>
-                  <div className="booking-card__group">
-                    <div className="flight outward__flights">
-                      {flights.outward?.map((flight, index) => (
-                        <FlightOption
-                          key={index}
-                          item={flight}
-                          isSelected={flight.isSelected}
-                          group="outward"
-                          selectedReturn={selectedReturnFlight}
-                          currentPrice={currentFlightPrice}
-                          isSameOption={flight.validOptions.some(y => y === selectedOptionGuid)}
-                          relatedFlight={flight.externalGuid ? flights.return?.find(x => x.externalGuid === flight.externalGuid) : null}
-                          onChange={item => {
-                            dispatch(setOutwardFlight(item));
-                            dispatch(fetchPriceDetails());
-                          }}
-                        />
-                      ))}
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div className="booking-card">
-                {/* <div className="booking-card__header">
-                  <h2 className="booking-card__header-heading">
-                  {translations.FLIGHTS_FORM.RETURN_FLIGHTS}
-                  </h2>
-                </div> */}
-                <div className="booking-card__body">
-                  <div className="booking-card__group">
-                    <div className="flight return__flights">
-                      {flights.return?.map((flight, index) => (
-                        <FlightOption
-                          key={index}
-                          item={flight}
-                          isSelected={flight.isSelected}
-                          group="return"
-                          selectedOutward={selectedOutwardFlight}
-                          currentPrice={currentFlightPrice}
-                          isSameOption={flight.validOptions.some(y => y === selectedOptionGuid)}
-                          relatedFlight={flight.externalGuid ? flights.outward?.find(x => x.externalGuid === flight.externalGuid) : null}
-                          onChange={item => {
-                            dispatch(setReturnFlight(item));
-                            dispatch(fetchPriceDetails());
-                          }}
-                        />
-                      ))}
-                    </div>
+          <div className="form__group">
+            <div className="booking-card">
+              <div className="booking-card__body">
+                {filterOptions && (
+                  <FlightFilter filterOptions={filterOptions} resultCount={resultCount} applyFilter={setFilterOptions} />
+                )}
+
+                <div className="booking-card__group">
+                  <div className="flight outward__flights">
+                    {isEmpty(filteredGroups) && (
+                      <p>{translations.FLIGHTS_FORM.NO_FLIGHTS_FOUND}</p>
+                    )}
+
+                    {!isEmpty(filteredGroups) && filteredGroups.map((flight, index) => (
+                      <FlightOption
+                        key={index}
+                        item={flight}
+                        isSelected={flight.isSelected}
+                        currentPrice={currentFlightPrice}
+                        onChange={item => {
+                          dispatch(setFlights(item));
+                          dispatch(fetchPriceDetails());
+                        }}
+                      />
+                    ))}
                   </div>
                 </div>
               </div>
             </div>
+          </div>
         )}
 
         <div className="booking__navigator">
-          {!settings.roomOptions.isHidden && (
-            <>
-              {settings.skipRouter ? (
-                <button
-                  type="button"
-                  title={translations.STEPS.PREVIOUS}
-                  onClick={() => goPrevious()}
-                  className="cta cta--secondary"
-                >
-                  {translations.STEPS.PREVIOUS}
-                </button>
-              ) : (
-                <Link
-                  to={`${settings.basePath}${settings.roomOptions.pathSuffix}?${bookingQueryString}`}
-                  title={translations.STEPS.PREVIOUS}
-                  className="cta cta--secondary"
-                >
-                  {translations.STEPS.PREVIOUS}
-                </Link>
-              )}
-            </>
-          )}
           <button
             type="submit"
             title={translations.STEPS.NEXT}
@@ -220,268 +169,6 @@ const FlightOptionsForm: React.FC<FlightOptionsFormProps> = () => {
           </button>
         </div>
 
-        <div className="flight__filter flight__filter--active">
-          <div className="flight__filter__header">
-            <div className="flight__filter__header__title">
-              <h3>Filter opties</h3>
-              <p>er zijn <strong>4 vluchten</strong> gevonden</p>
-            </div>
-          </div>
-          <div className="flight__filter__body">
-            <div className="flight__filter__group">
-              <div className="flight__filter__group__title">
-                Airlines
-                <svg width={16} height={16} className="flight__detail__btn__arrow"><use href="/icons/svg-sprite.svg#chevron"></use></svg>
-              </div>
-              {/* <div className="flight__filter__checkbox">
-                <input type="checkbox" id="klm" name="klm" value="klm" />
-                <label htmlFor="klm">KLM</label>
-              </div> */}
-              <div className="flight__filter__group__wrapper">
-                <div className="tree">
-                  <div className="checkbox flight__filter__checkbox">
-                    <label htmlFor="all" className="checkbox__label">
-                      <input type="checkbox" id="all" className="checkbox__input checkbox__input--parent" />
-                      <span className="radiobutton__label-text">
-                        Alle airlines <span className="amount">(5)</span>
-                      </span>
-                    </label>
-                  </div>
-                </div>
-                <div className="tree">
-                  <div className="checkbox flight__filter__checkbox">
-                    <label htmlFor="BRIT" className="checkbox__label">
-                      <input type="checkbox" id="BRIT" className="checkbox__input checkbox__input--parent" />
-                      <span className="radiobutton__label-text">
-                        British airways <span className="amount">(2)</span>
-                      </span>
-                    </label>
-                  </div>
-                </div>
-                <div className="tree">
-                  <div className="checkbox flight__filter__checkbox">
-                    <label htmlFor="BRU" className="checkbox__label">
-                      <input type="checkbox" id="BRU" className="checkbox__input checkbox__input--parent" />
-                      <span className="radiobutton__label-text">
-                        Brussels airlines <span className="amount">(1)</span>
-                      </span>
-                    </label>
-                  </div>
-                </div>
-                <div className="tree">
-                  <div className="checkbox flight__filter__checkbox">
-                    <label htmlFor="TUI" className="checkbox__label">
-                      <input type="checkbox" id="TUI" className="checkbox__input checkbox__input--parent" />
-                      <span className="radiobutton__label-text">
-                        TUI <span className="amount">(5)</span>
-                      </span>
-                    </label>
-                  </div>
-                </div>
-                <div className="tree">
-                  <div className="checkbox flight__filter__checkbox">
-                    <label htmlFor="luft" className="checkbox__label">
-                      <input type="checkbox" id="luft" className="checkbox__input checkbox__input--parent" />
-                      <span className="radiobutton__label-text">
-                        Lufthansa <span className="amount">(3)</span>
-                      </span>
-                    </label>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="flight__filter__group">
-              <div className="flight__filter__group__title">
-                Aantal stops
-                <svg width={16} height={16} className="flight__detail__btn__arrow"><use href="/icons/svg-sprite.svg#chevron"></use></svg>
-              </div>
-              <div className="flight__filter__group__wrapper">
-                <div className="tree">
-                    <div className="radiobutton flight__filter__checkbox">
-                      <label htmlFor="stops" className="radiobutton__label">
-                        <input type="checkbox" id="stops" className="radiobutton__input radiobutton__input--parent" />
-                        <span className="radiobutton__label-text">
-                          Alle stops <span className="amount">(5)</span>
-                        </span>
-                      </label>
-                    </div>
-                </div>
-                <div className="tree">
-                    <div className="radiobutton flight__filter__checkbox">
-                      <label htmlFor="stops" className="radiobutton__label">
-                        <input type="checkbox" id="stops" className="radiobutton__input radiobutton__input--parent" />
-                        <span className="radiobutton__label-text">
-                          Directe vlucht <span className="amount">(5)</span>
-                        </span>
-                      </label>
-                    </div>
-                </div>
-                <div className="tree">
-                    <div className="radiobutton flight__filter__checkbox">
-                      <label htmlFor="stops" className="radiobutton__label">
-                        <input type="checkbox" id="stops" className="radiobutton__input radiobutton__input--parent" />
-                        <span className="radiobutton__label-text">
-                          1 Stop <span className="amount">(1)</span>
-                        </span>
-                      </label>
-                    </div>
-                </div>
-                <div className="tree">
-                    <div className="radiobutton flight__filter__checkbox">
-                      <label htmlFor="stops" className="radiobutton__label">
-                        <input type="checkbox" id="stops" className="radiobutton__input radiobutton__input--parent" />
-                        <span className="radiobutton__label-text">
-                          2 Stops <span className="amount">(2)</span>
-                        </span>
-                      </label>
-                    </div>
-                </div>
-              </div>
-            </div>
-            <div className="flight__filter__group">
-              <div className="flight__filter__group__title">
-               Vlucht heenreis
-                <svg width={16} height={16} className="flight__detail__btn__arrow"><use href="/icons/svg-sprite.svg#chevron"></use></svg>
-              </div>
-              <div className="flight__filter__group__wrapper">
-                <p>Vertrektijd</p>
-                <div className="tree">
-                  <div className="checkbox flight__filter__checkbox">
-                    <label htmlFor="ochtend" className="checkbox__label">
-                      <input type="checkbox" id="ochtend" className="checkbox__input checkbox__input--parent" />
-                      <span className="radiobutton__label-text">
-                        Ochtend <span className="amount">(05:00 - 12:00)</span>
-                      </span>
-                    </label>
-                  </div>
-                </div>
-                <div className="tree">
-                  <div className="checkbox flight__filter__checkbox">
-                    <label htmlFor="mid" className="checkbox__label">
-                      <input type="checkbox" id="mid" className="checkbox__input checkbox__input--parent" />
-                      <span className="radiobutton__label-text">
-                        Namiddag <span className="amount">(12:00 - 18:00)</span>
-                      </span>
-                    </label>
-                  </div>
-                </div>
-                <div className="tree">
-                  <div className="checkbox flight__filter__checkbox">
-                    <label htmlFor="avond" className="checkbox__label">
-                      <input type="checkbox" id="avond" className="checkbox__input checkbox__input--parent" />
-                      <span className="radiobutton__label-text">
-                        Avond <span className="amount">(18:00 - 00:00)</span>
-                      </span>
-                    </label>
-                  </div>
-                </div>
-              </div>
-              <div className="flight__filter__group__wrapper">
-                <p>Reisduur</p>
-                <div className="flight__filter__slider">
-                <input
-                    type="range"
-                    min="2"
-                    max="7"
-                    value={value}
-                    onChange={handleChange}
-                    className="slider slider--progress"
-                  />
-                    <div className="flight__filter__slider__value">
-                      <span>2h 42m</span><span>6h 35m</span>
-                    </div>
-                </div>
-              </div>
-              <div className="flight__filter__group__wrapper">
-                <p>Overstaptijd</p>
-                <div className="flight__filter__slider">
-                <input
-                    type="range"
-                    min="2"
-                    max="7"
-                    value={value}
-                    onChange={handleChange}
-                    className="slider slider--progress"
-                  />
-                    <div className="flight__filter__slider__value">
-                      <span>2h 42m</span><span>6h 35m</span>
-                    </div>
-                </div>
-              </div>
-            </div>
-            <div className="flight__filter__group">
-              <div className="flight__filter__group__title">
-               Vlucht terugreis
-                <svg width={16} height={16} className="flight__detail__btn__arrow"><use href="/icons/svg-sprite.svg#chevron"></use></svg>
-              </div>
-              <div className="flight__filter__group__wrapper">
-                <p>Vertrektijd</p>
-                <div className="tree">
-                  <div className="checkbox flight__filter__checkbox">
-                    <label htmlFor="ochtend" className="checkbox__label">
-                      <input type="checkbox" id="ochtend" className="checkbox__input checkbox__input--parent" />
-                      <span className="radiobutton__label-text">
-                        Ochtend <span className="amount">(05:00 - 12:00)</span>
-                      </span>
-                    </label>
-                  </div>
-                </div>
-                <div className="tree">
-                  <div className="checkbox flight__filter__checkbox">
-                    <label htmlFor="mid" className="checkbox__label">
-                      <input type="checkbox" id="mid" className="checkbox__input checkbox__input--parent" />
-                      <span className="radiobutton__label-text">
-                        Namiddag <span className="amount">(12:00 - 18:00)</span>
-                      </span>
-                    </label>
-                  </div>
-                </div>
-                <div className="tree">
-                  <div className="checkbox flight__filter__checkbox">
-                    <label htmlFor="avond" className="checkbox__label">
-                      <input type="checkbox" id="avond" className="checkbox__input checkbox__input--parent" />
-                      <span className="radiobutton__label-text">
-                        Avond <span className="amount">(18:00 - 00:00)</span>
-                      </span>
-                    </label>
-                  </div>
-                </div>
-              </div>
-              <div className="flight__filter__group__wrapper">
-                <p>Reisduur</p>
-                <div className="flight__filter__slider">
-                <input
-                    type="range"
-                    min="2"
-                    max="7"
-                    value={value}
-                    onChange={handleChange}
-                    className="slider slider--progress"
-                  />
-                    <div className="flight__filter__slider__value">
-                      <span>2h 42m</span><span>6h 35m</span>
-                    </div>
-                </div>
-              </div>
-              <div className="flight__filter__group__wrapper">
-                <p>Overstaptijd</p>
-                <div className="flight__filter__slider">
-                <input
-                    type="range"
-                    min="2"
-                    max="7"
-                    value={value}
-                    onChange={handleChange}
-                    className="slider slider--progress"
-                  />
-                    <div className="flight__filter__slider__value">
-                      <span>2h 42m</span><span>6h 35m</span>
-                    </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
       </form >
     </>
   );

package/src/booking-wizard/features/price-details/util.ts

@@ -1,15 +1,15 @@
 import {
+  BookingOptionGroup,
+  BookingOptionPax,
+  BookingOptionUnit,
   BookingPackage,
+  BookingPackageOption,
+  BookingPackageRoom,
   ChangedLine,
-  BookingOptionPax,
-  BookingOptionGroup,
+  PerBookingPackageOption,
   PerPaxPackageOption,
-  BookingOptionUnit,
   PerUnitPackageOption,
-  PerBookingPackageOption,
-  BookingPackageRoom,
 } from "@qite/tide-client/build/types";
-import { BookingPackageOption } from "@qite/tide-client/build/types/offer/booking-v2/shared/booking-package-option";
 
 export const updatePackageDetails = (
   packageDetails: BookingPackage,

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

@@ -53,11 +53,9 @@ const OptionRoom: React.FC<OptionRoomProps> = ({
   const accommodations = uniqBy(
     compact(
       packageRoom &&
-        packageRoom.options.map((option) => {
-          if (!option.accommodationCode) {
-            return undefined;
-          }
-
+        packageRoom.options
+        .filter(x => x.accommodationCode && !x.isLocked)
+        .map((option) => {
           return {
             accommodationCode: option.accommodationCode,
             accommodationName: option.accommodationName,