@qite/tide-booking-component 1.0.42 → 1.0.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.0.42",
+  "version": "1.0.44",
   "description": "React Booking wizard & Booking product component for Tide",
   "main": "build/build-cjs/index.js",
   "module": "build/build-esm/index.js",

package/src/booking-product/components/date-range-picker/calendar.tsx

@@ -14,7 +14,7 @@ import {
 } from "date-fns";
 import { chunk, isFunction, range } from "lodash";
 import React, { useContext } from "react";
-import Icon from "../../../shared/components/icon";
+import Icon from "../../../booking-wizard/components/icon";
 import { buildClassName } from "../../../shared/utils/class-util";
 import { getLocale } from "../../../shared/utils/localization-util";
 import SettingsContext from "../../settings-context";

package/src/booking-product/components/dates.tsx

@@ -1,11 +1,12 @@
 import { format, isBefore, startOfDay } from "date-fns";
-import React, { useContext, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
+import { usePopper } from "react-popper";
 import { buildClassName } from "../../shared/utils/class-util";
 import { getTranslations } from "../../shared/utils/localization-util";
 import SettingsContext from "../settings-context";
-import DateRangePicker from "./date-range-picker";
-import { usePopper } from "react-popper";
 import { DateRange } from "../types";
+import DateRangePicker from "./date-range-picker";
+import Icon from "./icon";
 
 interface DatesProps {
   value?: DateRange;
@@ -56,37 +57,55 @@ const Dates: React.FC<DatesProps> = ({
       setPanelActive(false);
     }
   };
+  
+  useEffect(() => {
+    document.addEventListener("mousedown", handleDocumentClick);
+    return () => {
+      document.removeEventListener("mousedown", handleDocumentClick);
+    };
+  });
+
+  const handleDocumentClick: EventListener = (event) => {
+    if (referenceElement && !referenceElement.contains(event.target as Node)) {
+      if (panelActive) setPanelActive(false);
+    }
+  };
 
   return (
     <div className="booking-product__dates" ref={setReferenceElement}>
-      <div className="booking-product__dates-input">
-        <label className="booking-product__dates-input-label">{translations.PRODUCT.DEPARTURE}</label>
-        <input
-          type="text"
-          readOnly
-          value={value?.fromDate ? format(value.fromDate, "dd/MM/yyyy") : ""}
-          className="booking-product__dates_input-field"
-          placeholder={translations.PRODUCT.DEPARTURE_DATE}
-          onClick={handleInputFocus}
-        />
+      <div className="booking-product__dates-title">        
+        <Icon name="ui-calendar" />
+        {translations.PRODUCT.TRAVEL_PERIOD}
       </div>
+      <div className="form__group form__group--datepicker form__group--icon">
+        <div className="form__group-input">
+          <label className="form__label">{translations.PRODUCT.DEPARTURE}</label>
+          <input
+            type="text"
+            readOnly
+            value={value?.fromDate ? format(value.fromDate, "dd/MM/yyyy") : ""}
+            className="form__input"
+            placeholder={translations.PRODUCT.DEPARTURE_DATE}
+            onClick={handleInputFocus}
+          />
+        </div>
 
-      <div className="booking-product__dates-input">
-        <label className="booking-product__dates-input-label">{translations.PRODUCT.RETURN}</label>
-        <input
-          type="text"
-          readOnly
-          value={value?.toDate ? format(value.toDate, "dd/MM/yyyy") : ""}
-          className="booking-product__dates_input-field"
-          placeholder={translations.PRODUCT.RETURN_DATE}
-          onClick={handleInputFocus}
-        />
-      </div>
-      <div
+        <div className="form__group-input">
+          <label className="form__label">{translations.PRODUCT.RETURN}</label>
+          <input
+            type="text"
+            readOnly
+            value={value?.toDate ? format(value.toDate, "dd/MM/yyyy") : ""}
+            className="form__input"
+            placeholder={translations.PRODUCT.RETURN_DATE}
+            onClick={handleInputFocus}
+          />
+        </div>
+        <div
         ref={setPopperElement}
         className={buildClassName([
-          "booking-product__dates-panel",
-          panelActive && "booking-product__dates-panel--active",
+          "qsm__panel qsm__panel--bordered qsm__panel--dates-pricing",
+          panelActive && "qsm__panel--active",
         ])}
         style={mql?.matches ? styles.popper : undefined}
         {...attributes.popper}
@@ -99,6 +118,7 @@ const Dates: React.FC<DatesProps> = ({
           onSelectionChange={handleSelectionChange}
         />
       </div>
+      </div>
     </div>
   );
 }

package/src/booking-product/components/header.tsx

@@ -1,9 +1,9 @@
 import React, { useContext } from "react";
-import Icon from "../../shared/components/icon";
 import Loader from "../../shared/components/loader";
 import Rating from "../../shared/components/rating";
 import { getTranslations } from "../../shared/utils/localization-util";
 import SettingsContext from "../settings-context";
+import Icon from "./icon";
 
 interface HeaderProps {
   name: string;
@@ -29,16 +29,16 @@ const Header: React.FC<HeaderProps> = ({
 
   return (
     <div className="booking-product__header">
-      <div className="booking-product__name">
+      <div className="booking-product__hotel">
         {rating && <Rating rating={rating} />}
-        <div className="booking-summary__title">{name}</div>
+        <div className="booking-product__title">{name}</div>
       </div>
       <div className="booking-product__price">
         {isLoading
           ? (<Loader loaderText={translations.PRODUCT.LOADING_PRICE} />)
           : (
             <>
-              <div className="price">
+              <div className="pricing__header pricing__price">
                 {priceText}
               </div>
               <div className="package-icons">

package/src/booking-product/components/icon.tsx

@@ -0,0 +1,32 @@
+import { isEmpty } from "lodash";
+import React, { useContext } from "react";
+import SettingsContext from "../settings-context";
+
+interface IconProps {
+  name: string;
+  className?: string;
+  title?: string;
+}
+
+const Icon: React.FC<IconProps> = ({
+  name, className, title
+}) => {
+  const { icons } = useContext(SettingsContext);
+
+  if (!icons) {
+    return null;
+  }
+
+  return (
+    <svg
+      className={["icon", `icon--${name}`, className]
+        .filter((className) => !isEmpty(className))
+        .join(" ")}
+    >
+      {title && <title>{title}</title>}
+      <use href={`${icons}#${name}`}></use>
+    </svg>
+  );
+};
+
+export default Icon;

package/src/booking-product/components/product.tsx

@@ -242,13 +242,15 @@ const Product: React.FC<ProductProps> = ({
         isLoading={isLoading}
         hasFlight={hasFlight}
         hasTransfer={hasTransfer} />
-      <Rooms
-        rooms={rooms}
-        onChange={handleRoomChange} />
-      <Dates
-        value={dateRange}
-        duration={duration}
-        onChange={handleDateChange} />
+       <div className="booking-product__body">
+          <Rooms
+            rooms={rooms}
+            onChange={handleRoomChange} />
+          <Dates
+            value={dateRange}
+            duration={duration}
+            onChange={handleDateChange} />
+        </div>
       <Footer
         priceText={priceText}
         handleBookClick={handleBookClick}

package/src/booking-product/components/rooms.tsx

@@ -1,12 +1,12 @@
 import { range } from "lodash";
 import React, { useContext, useState } from "react";
+import { buildClassName } from "../../shared/utils/class-util";
 import { getTranslations } from "../../shared/utils/localization-util";
 import SettingsContext from "../settings-context";
 import { ProductRoom } from "../types";
 import AgeSelect from "./age-select";
 import AmountInput from "./amount-input";
-import { buildClassName } from "../../shared/utils/class-util";
-import Icon from "../../shared/components/icon";
+import Icon from "./icon";
 
 interface RoomsProps {
   rooms: ProductRoom[];
@@ -34,9 +34,12 @@ const Rooms: React.FC<RoomsProps> = ({
 
   return (
     <div className="booking-product__rooms">
-      <div className="booking-product__rooms-header">
-        <div className="booking-product__rooms_heading">{translations.SHARED.ROOMS}</div>
-        <div className="booking-product__rooms_actions">
+      <div className="booking-product__rooms-title">        
+        <Icon name="ui-user" />{translations.PRODUCT.WHO_YOU_TRAVELING_WITH}
+      </div>
+      <div className="booking-product__rooms__header">
+        <div className="booking-product__rooms__heading">{translations.SHARED.ROOMS}</div>
+        <div className="booking-product__rooms__actions">
           <AmountInput
             label={translations.PRODUCT.NUMBER_OF_ROOMS}
             value={currentRooms.length}
@@ -55,11 +58,11 @@ const Rooms: React.FC<RoomsProps> = ({
       <div className="booking-product__rooms-body">
         {currentRooms.map((room, roomIndex) => (
           <div className="booking-product__room" key={roomIndex}>
-            <div className="booking-product__room-header">
-              <h3 className="booking-product__room-heading">
+            <div className="booking-product__room__header">
+              <h3 className="booking-product__room__heading">
                 {translations.SHARED.ROOM + " " + (roomIndex + 1)}
               </h3>
-              <div className="booking-product__room-actions">
+              <div className="booking-product__room__actions">
                 <AmountInput
                   label={translations.SHARED.ADULTS}
                   value={room.adults}

package/src/{shared → booking-wizard}/components/icon.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { isEmpty } from "lodash";
 import { useContext } from "react";
-import SettingsContext from "../../booking-wizard/settings-context";
+import SettingsContext from "../settings-context";
 
 interface IconProps {
   name: string;
@@ -9,7 +9,9 @@ interface IconProps {
   title?: string;
 }
 
-const Icon: React.FC<IconProps> = ({ name, className, title }) => {
+const Icon: React.FC<IconProps> = ({
+  name, className, title
+}) => {
   const { icons } = useContext(SettingsContext);
 
   if (!icons) {

package/src/booking-wizard/components/message.tsx

@@ -1,4 +1,4 @@
-import Icon from "../../shared/components/icon";
+import Icon from "./icon";
 import React from "react";
 import { buildClassName } from "../../shared/utils/class-util";
 

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

@@ -8,7 +8,7 @@ import Message from "../../components/message";
 import SettingsContext from "../../settings-context";
 import { navigate } from "@reach/router";
 import { useSelector } from "react-redux";
-import Icon from "../../../shared/components/icon";
+import Icon from "../../components/icon";
 import { getTranslations } from "../../../shared/utils/localization-util";
 import { useAppDispatch } from "../../store";
 import { setCurrentStep } from "../booking/booking-slice";

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

@@ -6,7 +6,7 @@ import React, { useContext } from "react";
 import { buildClassName } from "../../../shared/utils/class-util";
 import { getPriceDifferenceText, getTranslations } from "../../../shared/utils/localization-util";
 import SettingsContext from "../../settings-context";
-import Icon from "../../../shared/components/icon";
+import Icon from "../../components/icon";
 
 interface FlightOptionProps {
   item: BookingPackageFlight;

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

@@ -13,7 +13,7 @@ import {
   setPackage,
   setReturnFlight
 } from "../booking/booking-slice";
-import { FLIGHT_OPTIONS_FORM_STEP, OPTIONS_FORM_STEP } from "../booking/constants";
+import { FLIGHT_OPTIONS_FORM_STEP, OPTIONS_FORM_STEP, ROOM_OPTIONS_FORM_STEP } from "../booking/constants";
 import {
   selectBookingQueryString,
   selectIsFetchingProductOptions,
@@ -46,7 +46,7 @@ const FlightOptionsForm: React.FC<FlightOptionsFormProps> = () => {
   };
 
   const goPrevious = () => {
-    dispatch(setCurrentStep(FLIGHT_OPTIONS_FORM_STEP));
+    dispatch(setCurrentStep(ROOM_OPTIONS_FORM_STEP));
   };
 
   const selectedOptionGuid =  packageDetails?.options.find(x => x.isSelected)?.id!;
@@ -187,7 +187,7 @@ const FlightOptionsForm: React.FC<FlightOptionsFormProps> = () => {
                 </button>
               ) : (
                 <Link
-                  to={`${settings.basePath}${settings.flightOptions.pathSuffix}?${bookingQueryString}`}
+                  to={`${settings.basePath}${settings.roomOptions.pathSuffix}?${bookingQueryString}`}
                   title={translations.STEPS.PREVIOUS}
                   className="cta cta--secondary"
                 >

package/src/booking-wizard/features/product-options/options-form.tsx

@@ -25,10 +25,13 @@ import {
   setPackageAirportGroups,
   setPackageGroups,
   setPackageOptionPax,
-  setPackageOptionUnits
+  setPackageOptionUnits,
+  setPackageRooms,
+  setTagIds
 } from "../booking/booking-slice";
 import { FLIGHT_OPTIONS_FORM_STEP, ROOM_OPTIONS_FORM_STEP, TRAVELERS_FORM_STEP } from "../booking/constants";
 import {
+  selectBookingPackagePax,
   selectBookingQueryString,
   selectIsFetchingProductOptions,
   selectPackageAirlineGroups,
@@ -37,7 +40,10 @@ import {
   selectPackageGroups,
   selectPackageOptionPax,
   selectPackageOptionUnits,
-  selectRequestRooms
+  selectPackageRooms,
+  selectPackageTags,
+  selectRequestRooms,
+  selectTagIds
 } from "../booking/selectors";
 import { fetchPriceDetails } from "../price-details/price-details-slice";
 import NoOptions from "./no-options";
@@ -45,12 +51,14 @@ import OptionBookingAirlineGroup from "./option-booking-airline-group";
 import OptionBookingGroup from "./option-booking-group";
 import OptionPaxCard from "./option-pax-card";
 import OptionUnitsCard from "./option-units-card";
+import OptionRoom from "./option-room";
 
 interface OptionsFormProps { }
 
 const OptionsForm: React.FC<OptionsFormProps> = () => {
   const settings = useContext(SettingsContext);
 
+
   const translations = getTranslations(settings.language);
   const dispatch = useAppDispatch();
   const packageDetails = useSelector(selectPackageDetails);
@@ -64,6 +72,50 @@ const OptionsForm: React.FC<OptionsFormProps> = () => {
   const airportGroups = useSelector(selectPackageAirportGroups);
   const optionUnits = useSelector(selectPackageOptionUnits);
   const optionPax = useSelector(selectPackageOptionPax);
+  
+  // ROOMS
+  const showRoomOptions = settings.roomOptions.isHidden;
+  const packageRooms = useSelector(selectPackageRooms);
+  const pax = useSelector(selectBookingPackagePax);
+  
+  const getRoomPax = (index: number) => {
+    var room = requestRooms?.find((x) => x.index == index);
+    var bookingPackagePax = pax.filter((x) =>
+      room?.pax.some((y) => y.id == x.id)
+    );
+    return bookingPackagePax.length > 0 ? bookingPackagePax : room?.pax ?? [];
+  };
+  
+  const handleOnRoomChange = (
+    index: number,
+    accommodationCode: string,
+    regimeCode: string | null
+  ) => {
+    if (!packageRooms) return;
+
+    const updatedPackageRooms = packageRooms.map((room) => {
+      if (room.index !== index) return room;
+
+      return {
+        ...room,
+        options: room.options.map((option) => {
+          return {
+            ...option,
+            isSelected:
+              option.accommodationCode === accommodationCode &&
+              option.regimeCode === regimeCode,
+          };
+        }),
+      };
+    });
+
+    dispatch(setPackageRooms(updatedPackageRooms));
+    dispatch(fetchPriceDetails());
+  };
+
+  // TAGS
+  const packageTags = settings.hideTags ? [] : useSelector(selectPackageTags);
+  let tagIds = useSelector(selectTagIds) ?? [];
 
   const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
     if (settings.skipRouter) {
@@ -125,6 +177,20 @@ const OptionsForm: React.FC<OptionsFormProps> = () => {
     }
   };
 
+  const handleOnTagChange = (id: number, checked: boolean) => {
+    let updatedTags = [...tagIds];
+    if (checked) {
+      if (!updatedTags?.includes(id)) {
+        updatedTags?.push(id);
+      }
+    } else {
+      updatedTags = updatedTags?.filter((x) => x != id);
+    }
+
+    dispatch(setTagIds(updatedTags));
+    dispatch(fetchPriceDetails());
+  };
+
   useEffect(() => {
     if (packageDetails && settings.roomOptions.isHidden && settings.flightOptions.isHidden) {
       const params = new URLSearchParams(location.search);
@@ -171,12 +237,12 @@ const OptionsForm: React.FC<OptionsFormProps> = () => {
   const goPrevious = () => {
     if (settings.flightOptions.isHidden) {
       dispatch(setCurrentStep(ROOM_OPTIONS_FORM_STEP));
-    } else {      
+    } else {
       dispatch(setCurrentStep(FLIGHT_OPTIONS_FORM_STEP));
     }
   };
 
-  const previousUrl = settings.flightOptions.isHidden 
+  const previousUrl = settings.flightOptions.isHidden
     ? `${settings.basePath}${settings.roomOptions.pathSuffix}?${bookingQueryString}`
     : `${settings.basePath}${settings.flightOptions.pathSuffix}?${bookingQueryString}`;
   const hasPrevious = !settings.roomOptions.isHidden || !settings.flightOptions.isHidden;
@@ -193,7 +259,73 @@ const OptionsForm: React.FC<OptionsFormProps> = () => {
         {isLoading && settings.loaderComponent}
         {!isLoading && (
           <div className="form__region">
-
+            {packageTags && (
+              <div className="form__group">
+                <div className="booking-card">
+                  <div className="booking-card__body">
+                    <div
+                      className={buildClassName([
+                        "booking-card__group",
+                        "booking-card__group--package",
+                      ])}
+                    >
+                      {showRoomOptions && (
+                        <span className="booking-card__tag">
+                          {translations.OPTIONS_FORM.PACKAGE}
+                        </span>
+                      )}
+                      <div className="booking-card__group-body">
+                        {showRoomOptions && (
+                          <table className="table table--striped">
+                            <tbody>
+                              {packageRooms &&
+                                packageRooms.map((room) => (
+                                  <OptionRoom
+                                    key={room.index}
+                                    packageRoom={room}
+                                    pax={getRoomPax(room.index)}
+                                    optionPax={optionPax}
+                                    onRoomChange={handleOnRoomChange}
+                                  />
+                                ))}
+                            </tbody>
+                          </table>
+                        )}
+                        <div className="booking-card__tag-translations">
+                          {packageTags.map((tag, index) => (
+                            <label
+                              key={index}
+                              htmlFor={`tag-translation-${index}-${tag.title}`}
+                              className="checkbox__label tag-translation"
+                            >
+                              <div className="tag-translation-input__container">
+                                <input
+                                  type="checkbox"
+                                  id={`tag-translation-${index}-${tag.title}`}
+                                  name={`tag-translation-${index}-${tag.title}`}
+                                  className="checkbox__input"
+                                  checked={tagIds?.includes(tag.id)}
+                                  onChange={(e) =>
+                                    handleOnTagChange(tag.id, e.target.checked)
+                                  }
+                                />
+                              </div>
+                              <span className="tag-translation__title">
+                                {tag.title}
+                              </span>
+                              &nbsp;
+                              <span className="tag-translation__description">
+                                {tag.description}
+                              </span>
+                            </label>
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
             {optionUnits && !isEmpty(optionUnits) && (
               <div className="form__group">
                 <div className="booking-card">

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

@@ -12,8 +12,7 @@ import { useAppDispatch } from "../../store";
 import {
   setCurrentStep,
   setPackage,
-  setPackageRooms,
-  setTagIds
+  setPackageRooms
 } from "../booking/booking-slice";
 import { FLIGHT_OPTIONS_FORM_STEP, OPTIONS_FORM_STEP } from "../booking/constants";
 import {
@@ -23,9 +22,7 @@ import {
   selectPackageDetails,
   selectPackageOptionPax,
   selectPackageRooms,
-  selectPackageTags,
-  selectRequestRooms,
-  selectTagIds
+  selectRequestRooms
 } from "../booking/selectors";
 import { fetchPriceDetails } from "../price-details/price-details-slice";
 import OptionRoom from "../product-options/option-room";
@@ -39,8 +36,7 @@ const RoomOptionsForm: React.FC<RoomOptionsFormProps> = () => {
     options,
     loaderComponent,
     language,
-    skipRouter,
-    hideTags,
+    skipRouter
   } = useContext(SettingsContext);
 
   const translations = getTranslations(language);
@@ -53,9 +49,6 @@ const RoomOptionsForm: React.FC<RoomOptionsFormProps> = () => {
   const isLoading = useSelector(selectIsFetchingProductOptions);
   const optionPax = useSelector(selectPackageOptionPax);
 
-  const packageTags = hideTags ? [] : useSelector(selectPackageTags);
-  let tagIds = useSelector(selectTagIds) ?? [];
-
   const getRoomPax = (index: number) => {
     var room = requestRooms?.find((x) => x.index == index);
     var bookingPackagePax = pax.filter((x) =>
@@ -109,20 +102,6 @@ const RoomOptionsForm: React.FC<RoomOptionsFormProps> = () => {
     dispatch(fetchPriceDetails());
   };
 
-  const handleOnTagChange = (id: number, checked: boolean) => {
-    let updatedTags = [...tagIds];
-    if (checked) {
-      if (!updatedTags?.includes(id)) {
-        updatedTags?.push(id);
-      }
-    } else {
-      updatedTags = updatedTags?.filter((x) => x != id);
-    }
-
-    dispatch(setTagIds(updatedTags));
-    dispatch(fetchPriceDetails());
-  };
-
   useEffect(() => {
     if (packageDetails) {
       const params = new URLSearchParams(location.search);
@@ -175,73 +154,55 @@ const RoomOptionsForm: React.FC<RoomOptionsFormProps> = () => {
         noValidate
         onSubmit={handleSubmit}
       >
-        {isLoading && loaderComponent}
-        {!isLoading && (
-          <div className="form__region">
-            <div className="form__group">
-              <div className="booking-card">
-                <div className="booking-card__body">
-                  <div
-                    className={buildClassName([
-                      "booking-card__group",
-                      "booking-card__group--package",
-                    ])}
-                  >
-                    <span className="booking-card__tag">
-                      {translations.OPTIONS_FORM.PACKAGE}
-                    </span>
-                    <div className="booking-card__group-body">
-                      <table className="table table--striped">
-                        <tbody>
-                          {packageRooms &&
-                            packageRooms.map((room) => (
-                              <OptionRoom
-                                key={room.index}
-                                packageRoom={room}
-                                pax={getRoomPax(room.index)}
-                                optionPax={optionPax}
-                                onRoomChange={handleOnRoomChange}
-                              />
-                            ))}
-                        </tbody>
-                      </table>
-                      <div className="booking-card__tag-translations">
-                        {packageTags &&
-                          packageTags.map((tag, index) => (
-                            <label
-                              key={index}
-                              htmlFor={`tag-translation-${index}-${tag.title}`}
-                              className="checkbox__label tag-translation"
-                            >
-                              <div className="tag-translation-input__container">
-                                <input
-                                  type="checkbox"
-                                  id={`tag-translation-${index}-${tag.title}`}
-                                  name={`tag-translation-${index}-${tag.title}`}
-                                  className="checkbox__input"
-                                  checked={tagIds?.includes(tag.id)}
-                                  onChange={(e) =>
-                                    handleOnTagChange(tag.id, e.target.checked)
-                                  }
+        <div className="form__wrapper">
+          {isLoading && loaderComponent}
+          {!isLoading && (
+            <div className="form__region">
+              <div className="form__group">
+                <div className="booking-card">
+                  <div className="booking-card__body">
+                    <div
+                      className={buildClassName([
+                        "booking-card__group",
+                        "booking-card__group--package",
+                      ])}
+                    >
+                      <span className="booking-card__tag">
+                        {translations.OPTIONS_FORM.PACKAGE}
+                      </span>
+                      <div className="booking-card__group-body">
+                        <table className="table table--striped">
+                          <tbody>
+                            {packageRooms &&
+                              packageRooms.map((room) => (
+                                <OptionRoom
+                                  key={room.index}
+                                  packageRoom={room}
+                                  pax={getRoomPax(room.index)}
+                                  optionPax={optionPax}
+                                  onRoomChange={handleOnRoomChange}
                                 />
-                              </div>
-                              <span className="tag-translation__title">
-                                {tag.title}
-                              </span>
-                              &nbsp;
-                              <span className="tag-translation__description">
-                                {tag.description}
-                              </span>
-                            </label>
-                          ))}
+                              ))}
+                          </tbody>
+                        </table>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
+            
+          )}
+
+          <div className="form__room">
+            <div className="form__room__image">
+              <img src="https://picsum.photos/1920/1080" alt="" className="form__room__img"/>
+              <div className="form__room__favorite">
+              <i className="fa fa-heart"></i>
+            </div>
+            </div>
           </div>
-        )}
+        </div>
         <div className="booking__navigator">
           <button
             type="submit"

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

@@ -7,7 +7,7 @@ import { Link, navigate, useLocation } from "@reach/router";
 import { compact, findIndex, isEmpty, isNil, uniqBy } from "lodash";
 import React, { useContext, useEffect, useState } from "react";
 import { useSelector } from "react-redux";
-import Icon from "../../../shared/components/icon";
+import Icon from "../../components/icon";
 import SettingsContext from "../../settings-context";
 import { useAppDispatch } from "../../store";
 import { SummaryCheckbox } from "../../types";

package/src/booking-wizard/features/travelers-form/type-ahead-input.tsx

@@ -1,4 +1,4 @@
-import Icon from "../../../shared/components/icon";
+import Icon from "../../components/icon";
 import React, { useState } from "react";
 
 interface TypeAheadInputProps {

package/src/shared/components/rating.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { clamp, range } from "lodash";
-import Icon from "./icon";
+import Icon from "../../booking-wizard/components/icon";
 
 interface RatingProps {
   rating: number;

package/src/shared/translations/fr-BE.json

@@ -41,7 +41,9 @@
     "DEPARTURE": "",
     "DEPARTURE_DATE": "",
     "RETURN": "",
-    "RETURN_DATE": ""
+    "RETURN_DATE": "",
+    "WHO_YOU_TRAVELING_WITH": "",
+    "TRAVEL_PERIOD": ""
   },
   "MAIN": {
     "PREPARING_BOOKING": "Veuillez patienter, nous préparons votre réservation",

package/src/shared/translations/nl-BE.json

@@ -41,7 +41,9 @@
     "DEPARTURE": "Vertrek",
     "DEPARTURE_DATE": "Vertrekdatum",
     "RETURN": "Terugkeer",
-    "RETURN_DATE": "Terugkeerdatum"
+    "RETURN_DATE": "Terugkeerdatum",
+    "WHO_YOU_TRAVELING_WITH": "Met wie ga je?",
+    "TRAVEL_PERIOD": "Reisperiode"
   },
   "MAIN": {
     "PREPARING_BOOKING": "Even geduld, we bereiden uw boeking voor",