@qite/tide-booking-component 1.4.95 → 1.4.96

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

@@ -1,90 +1,90 @@
-import React, { useContext, useEffect } from 'react';
-import { selectBookingNumber, selectBookingQueryString, selectIsOption, selectTranslations } from '../booking/selectors';
-
-import Message from '../../components/message';
-import SettingsContext from '../../settings-context';
-import { useSelector } from 'react-redux';
-import Icon from '../../components/icon';
-import { useAppDispatch } from '../../store';
-import { setCurrentStep } from '../booking/booking-slice';
-import { OPTIONS_FORM_STEP } from '../booking/constants';
-import { format } from '../../../shared/utils/localization-util';
-import { useNavigate } from 'react-router';
-import { book } from '@qite/tide-client';
-
-interface ConfirmationProps {}
-
-const Confirmation: React.FC<ConfirmationProps> = () => {
-  const dispatch = useAppDispatch();
-  const settings = useContext(SettingsContext);
-  const navigate = settings.skipRouter ? () => {} : useNavigate();
-
-  const bookingNumber = useSelector(selectBookingNumber);
-  const bookingQueryString = useSelector(selectBookingQueryString);
-  const isOption = useSelector(selectIsOption);
-
-  useEffect(() => {
-    if (!bookingNumber) {
-      if (settings.skipRouter) {
-        dispatch(setCurrentStep(OPTIONS_FORM_STEP));
-      } else {
-        navigate(`${!settings.skipBasePathInRouting ? settings.basePath : ''}${settings.error.pathSuffix}?${bookingQueryString}`);
-      }
-    }
-  }, [bookingNumber]);
-
-  const translations = useSelector(selectTranslations);
-  const encodedMailSubject = encodeURI(translations.CONFIRMATION.MAIL_SUBJECT);
-
-  const titleText = isOption
-    ? format(translations.CONFIRMATION.TITLE_TEXT_OPTION, [bookingNumber])
-    : settings.isOffer
-    ? format(translations.CONFIRMATION.TITLE_TEXT_OFFER, [bookingNumber])
-    : format(translations.CONFIRMATION.TITLE_TEXT_BOOKING, [bookingNumber]);
-
-  return (
-    <div className="form form__booking--message" id="booking--confirmation">
-      <div className="form__region">
-        <div className="form__row">
-          <div className="form__group">
-            <Message
-              type="success"
-              title={titleText}
-              actionComponent={
-                <div className="sm">
-                  <a href={`tel://${settings.companyContactPhone}`} className="sm__icon">
-                    <Icon name="tel" />
-                  </a>
-                  <a href={`mailto://${settings.companyContactEmail}`} className="sm__icon">
-                    <Icon name="mail" />
-                  </a>
-                  <a href="/" className="sm__icon">
-                    <Icon name="home" />
-                  </a>
-                </div>
-              }>
-              {!isOption ? (
-                <>
-                  <p>
-                    {translations.CONFIRMATION.MESSAGE_TEXT1}
-                    <br />
-                    {settings.isOffer ? translations.CONFIRMATION.MESSAGE_TEXT2_OFFER : translations.CONFIRMATION.MESSAGE_TEXT2_BOOKING}
-                  </p>
-                  <p>
-                    {translations.CONFIRMATION.QUESTIONS_TEXT1}{' '}
-                    <a href={`mailto:${settings.companyContactEmail}?subject=${encodedMailSubject}`} title={translations.CONFIRMATION.QUESTIONS_ALT}>
-                      {translations.CONFIRMATION.QUESTIONS_TEXT2}
-                    </a>
-                    {translations.CONFIRMATION.QUESTIONS_TEXT3}
-                  </p>
-                </>
-              ) : undefined}
-            </Message>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Confirmation;
+import React, { useContext, useEffect } from 'react';
+import { selectBookingNumber, selectBookingQueryString, selectIsOption, selectTranslations } from '../booking/selectors';
+
+import Message from '../../components/message';
+import SettingsContext from '../../settings-context';
+import { useSelector } from 'react-redux';
+import Icon from '../../components/icon';
+import { useAppDispatch } from '../../store';
+import { setCurrentStep } from '../booking/booking-slice';
+import { OPTIONS_FORM_STEP } from '../booking/constants';
+import { format } from '../../../shared/utils/localization-util';
+import { useNavigate } from 'react-router';
+import { book } from '@qite/tide-client';
+
+interface ConfirmationProps {}
+
+const Confirmation: React.FC<ConfirmationProps> = () => {
+  const dispatch = useAppDispatch();
+  const settings = useContext(SettingsContext);
+  const navigate = settings.skipRouter ? () => {} : useNavigate();
+
+  const bookingNumber = useSelector(selectBookingNumber);
+  const bookingQueryString = useSelector(selectBookingQueryString);
+  const isOption = useSelector(selectIsOption);
+
+  useEffect(() => {
+    if (!bookingNumber) {
+      if (settings.skipRouter) {
+        dispatch(setCurrentStep(OPTIONS_FORM_STEP));
+      } else {
+        navigate(`${!settings.skipBasePathInRouting ? settings.basePath : ''}${settings.error.pathSuffix}?${bookingQueryString}`);
+      }
+    }
+  }, [bookingNumber]);
+
+  const translations = useSelector(selectTranslations);
+  const encodedMailSubject = encodeURI(translations.CONFIRMATION.MAIL_SUBJECT);
+
+  const titleText = isOption
+    ? format(translations.CONFIRMATION.TITLE_TEXT_OPTION, [bookingNumber])
+    : settings.isOffer
+    ? format(translations.CONFIRMATION.TITLE_TEXT_OFFER, [bookingNumber])
+    : format(translations.CONFIRMATION.TITLE_TEXT_BOOKING, [bookingNumber]);
+
+  return (
+    <div className="form form__booking--message" id="booking--confirmation">
+      <div className="form__region">
+        <div className="form__row">
+          <div className="form__group">
+            <Message
+              type="success"
+              title={titleText}
+              actionComponent={
+                <div className="sm">
+                  <a href={`tel://${settings.companyContactPhone}`} className="sm__icon">
+                    <Icon name="tel" />
+                  </a>
+                  <a href={`mailto://${settings.companyContactEmail}`} className="sm__icon">
+                    <Icon name="mail" />
+                  </a>
+                  <a href="/" className="sm__icon">
+                    <Icon name="home" />
+                  </a>
+                </div>
+              }>
+              {!isOption ? (
+                <>
+                  <p>
+                    {translations.CONFIRMATION.MESSAGE_TEXT1}
+                    <br />
+                    {settings.isOffer ? translations.CONFIRMATION.MESSAGE_TEXT2_OFFER : translations.CONFIRMATION.MESSAGE_TEXT2_BOOKING}
+                  </p>
+                  <p>
+                    {translations.CONFIRMATION.QUESTIONS_TEXT1}{' '}
+                    <a href={`mailto:${settings.companyContactEmail}?subject=${encodedMailSubject}`} title={translations.CONFIRMATION.QUESTIONS_ALT}>
+                      {translations.CONFIRMATION.QUESTIONS_TEXT2}
+                    </a>
+                    {translations.CONFIRMATION.QUESTIONS_TEXT3}
+                  </p>
+                </>
+              ) : undefined}
+            </Message>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Confirmation;

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

@@ -1,71 +1,71 @@
-import Message from '../../components/message';
-import React from 'react';
-import SettingsContext from '../../settings-context';
-import { setIsRetry } from '../booking/booking-slice';
-import { useContext } from 'react';
-import { useSelector } from 'react-redux';
-import { useAppDispatch } from '../../store';
-import { selectBookingQueryString, selectTranslations } from '../booking/selectors';
-import { useNavigate } from 'react-router-dom';
-
-interface ErrorProps {}
-
-const Error: React.FC<ErrorProps> = () => {
-  const dispatch = useAppDispatch();
-
-  const settings = useContext(SettingsContext);
-  const navigate = settings.skipRouter ? () => {} : useNavigate();
-
-  const bookingQueryString = useSelector(selectBookingQueryString);
-
-  const tryAgainUrl = `${!settings.skipBasePathInRouting ? settings.basePath : ''}?${bookingQueryString}`;
-
-  const handleClick: React.MouseEventHandler<HTMLAnchorElement> = (e) => {
-    e.preventDefault();
-
-    if (settings.skipRouter) {
-      if (window !== undefined) {
-        window.location.reload();
-      }
-    } else {
-      dispatch(setIsRetry(true));
-      navigate(tryAgainUrl);
-    }
-  };
-
-  const translations = useSelector(selectTranslations);
-
-  return (
-    <div className="form form__booking--message">
-      <div className="form__region">
-        <div className="form__row">
-          <div className="form__group">
-            <Message
-              type="error"
-              title="Er liep iets mis..."
-              actionComponent={
-                <a onClick={handleClick} title={translations.ERROR.TRY_AGAIN} className="cta">
-                  {translations.ERROR.TRY_AGAIN}
-                </a>
-              }>
-              <p>
-                {translations.ERROR.MESSAGE_TEXT1}
-                <br />
-                {translations.ERROR.MESSAGE_TEXT2}
-              </p>
-              <p>
-                {translations.ERROR.ERROR_TEXT1}
-                <a href={`mailto:${settings.companyContactEmail}?subject=Boeking%20mislukt`} title={translations.ERROR.ERROR_ALT}>
-                  {translations.ERROR.ERROR_TEXT2}
-                </a>
-                {translations.ERROR.ERROR_TEXT3}
-              </p>
-            </Message>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Error;
+import Message from '../../components/message';
+import React from 'react';
+import SettingsContext from '../../settings-context';
+import { setIsRetry } from '../booking/booking-slice';
+import { useContext } from 'react';
+import { useSelector } from 'react-redux';
+import { useAppDispatch } from '../../store';
+import { selectBookingQueryString, selectTranslations } from '../booking/selectors';
+import { useNavigate } from 'react-router-dom';
+
+interface ErrorProps {}
+
+const Error: React.FC<ErrorProps> = () => {
+  const dispatch = useAppDispatch();
+
+  const settings = useContext(SettingsContext);
+  const navigate = settings.skipRouter ? () => {} : useNavigate();
+
+  const bookingQueryString = useSelector(selectBookingQueryString);
+
+  const tryAgainUrl = `${!settings.skipBasePathInRouting ? settings.basePath : ''}?${bookingQueryString}`;
+
+  const handleClick: React.MouseEventHandler<HTMLAnchorElement> = (e) => {
+    e.preventDefault();
+
+    if (settings.skipRouter) {
+      if (window !== undefined) {
+        window.location.reload();
+      }
+    } else {
+      dispatch(setIsRetry(true));
+      navigate(tryAgainUrl);
+    }
+  };
+
+  const translations = useSelector(selectTranslations);
+
+  return (
+    <div className="form form__booking--message">
+      <div className="form__region">
+        <div className="form__row">
+          <div className="form__group">
+            <Message
+              type="error"
+              title="Er liep iets mis..."
+              actionComponent={
+                <a onClick={handleClick} title={translations.ERROR.TRY_AGAIN} className="cta">
+                  {translations.ERROR.TRY_AGAIN}
+                </a>
+              }>
+              <p>
+                {translations.ERROR.MESSAGE_TEXT1}
+                <br />
+                {translations.ERROR.MESSAGE_TEXT2}
+              </p>
+              <p>
+                {translations.ERROR.ERROR_TEXT1}
+                <a href={`mailto:${settings.companyContactEmail}?subject=Boeking%20mislukt`} title={translations.ERROR.ERROR_ALT}>
+                  {translations.ERROR.ERROR_TEXT2}
+                </a>
+                {translations.ERROR.ERROR_TEXT3}
+              </p>
+            </Message>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Error;

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

@@ -1,166 +1,166 @@
-import React, { useContext, useEffect, useState } from 'react';
-
-import { BookingPackageFlight } from '@qite/tide-client/build/types';
-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, setFlights, setPackage } from '../booking/booking-slice';
-import { ROOM_OPTIONS_FORM_STEP, TRAVELERS_FORM_STEP } from '../booking/constants';
-import {
-  selectBookingQueryString,
-  selectIsFetchingProductOptions,
-  selectPackageDetails,
-  selectPackageFlights,
-  selectTranslations,
-  selectTravelersFirstStep
-} 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';
-import { Link, useNavigate } from 'react-router-dom';
-
-interface FlightOptionsFormProps {}
-
-const FlightOptionsForm: React.FC<FlightOptionsFormProps> = () => {
-  const settings = useContext(SettingsContext);
-  const navigate = settings.skipRouter ? () => {} : useNavigate();
-
-  const translations = useSelector(selectTranslations);
-  const dispatch = useAppDispatch();
-  const packageDetails = useSelector(selectPackageDetails);
-  const bookingQueryString = useSelector(selectBookingQueryString);
-  const isLoading = useSelector(selectIsFetchingProductOptions);
-  const flights = useSelector(selectPackageFlights);
-  const travelersFirstStep = useSelector(selectTravelersFirstStep);
-
-  const [filterOptions, setFilterOptions] = useState<FlightFilterOptions | undefined>();
-  const [flightGroups, setFlightGroups] = useState<GroupedFlights[]>([]);
-
-  const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
-    if (settings.skipRouter) {
-      dispatch(setCurrentStep(ROOM_OPTIONS_FORM_STEP));
-    } else {
-      if (settings.roomOptions.isHidden) {
-        navigate(`${!settings.skipBasePathInRouting ? settings.basePath : ''}${settings.options.pathSuffix}?${bookingQueryString}`);
-      } else {
-        navigate(`${!settings.skipBasePathInRouting ? settings.basePath : ''}${settings.roomOptions.pathSuffix}?${bookingQueryString}`);
-      }
-    }
-
-    e.preventDefault();
-  };
-
-  const currentFlightPrice = (flights.outward?.find((x) => x.isSelected)?.price || 0) + (flights.return?.find((x) => x.isSelected)?.price || 0);
-
-  useEffect(() => {
-    if (packageDetails && settings.roomOptions.isHidden) {
-      const params = new URLSearchParams(location.search);
-
-      const outwardFlight = params.get('outwardflight') ?? undefined;
-      const returnFlight = params.get('returnflight') ?? undefined;
-      if (outwardFlight && returnFlight) {
-        const desiredOutwardFlight = packageDetails.outwardFlights.find((x) => x.entryLineGuid == outwardFlight);
-        const desiredReturnFlight = packageDetails.returnFlights.find((x) => x.entryLineGuid == returnFlight);
-        if (desiredOutwardFlight && desiredReturnFlight) {
-          dispatch(
-            setPackage({
-              ...packageDetails,
-              outwardFlights: packageDetails.outwardFlights.map((flight) => {
-                return {
-                  ...flight,
-                  isSelected: flight.entryLineGuid == desiredOutwardFlight.entryLineGuid ? true : false
-                } as BookingPackageFlight;
-              }),
-              returnFlights: packageDetails.returnFlights.map((flight) => {
-                return {
-                  ...flight,
-                  isSelected: flight.entryLineGuid == desiredReturnFlight.entryLineGuid ? true : false
-                } as BookingPackageFlight;
-              })
-            })
-          );
-        }
-      }
-    }
-    dispatch(fetchPriceDetails());
-
-    const filters = buildFilterOptions(flights.outward, flights.return, translations);
-    setFilterOptions(filters);
-  }, []);
-
-  useEffect(() => {
-    const groups = buildGroupedFlights(flights.outward, flights.return);
-    setFlightGroups(groups);
-  }, [flights]);
-
-  const filteredGroups = filterGroupedFlights(flightGroups, filterOptions);
-  const resultCount = filteredGroups.length;
-
-  const goPrevious = () => {
-    dispatch(setCurrentStep(TRAVELERS_FORM_STEP));
-  };
-
-  return (
-    <>
-      <FlightOptionModal />
-      <form className="form" name="booking--flights" id="booking--flights" noValidate onSubmit={handleSubmit}>
-        <div className="form__booking--flight">
-          {isLoading && settings.loaderComponent}
-          {!isLoading && (
-            <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>
-        <div className="booking__navigator">
-          {travelersFirstStep && settings.skipRouter ? (
-            <button type="button" title={translations.STEPS.PREVIOUS} onClick={() => goPrevious()} className="cta cta--secondary">
-              {translations.STEPS.PREVIOUS}
-            </button>
-          ) : travelersFirstStep ? (
-            <Link
-              to={`${!settings.skipBasePathInRouting ? settings.basePath : ''}${settings.travellers.pathSuffix}?${bookingQueryString}`}
-              title={translations.STEPS.PREVIOUS}
-              className="cta cta--secondary">
-              {translations.STEPS.PREVIOUS}
-            </Link>
-          ) : null}
-          <button type="submit" title={translations.STEPS.NEXT} disabled={isLoading} className={buildClassName(['cta', isLoading && 'cta--disabled'])}>
-            {translations.STEPS.NEXT}
-          </button>
-        </div>
-      </form>
-    </>
-  );
-};
-
-export default FlightOptionsForm;
+import React, { useContext, useEffect, useState } from 'react';
+
+import { BookingPackageFlight } from '@qite/tide-client/build/types';
+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, setFlights, setPackage } from '../booking/booking-slice';
+import { ROOM_OPTIONS_FORM_STEP, TRAVELERS_FORM_STEP } from '../booking/constants';
+import {
+  selectBookingQueryString,
+  selectIsFetchingProductOptions,
+  selectPackageDetails,
+  selectPackageFlights,
+  selectTranslations,
+  selectTravelersFirstStep
+} 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';
+import { Link, useNavigate } from 'react-router-dom';
+
+interface FlightOptionsFormProps {}
+
+const FlightOptionsForm: React.FC<FlightOptionsFormProps> = () => {
+  const settings = useContext(SettingsContext);
+  const navigate = settings.skipRouter ? () => {} : useNavigate();
+
+  const translations = useSelector(selectTranslations);
+  const dispatch = useAppDispatch();
+  const packageDetails = useSelector(selectPackageDetails);
+  const bookingQueryString = useSelector(selectBookingQueryString);
+  const isLoading = useSelector(selectIsFetchingProductOptions);
+  const flights = useSelector(selectPackageFlights);
+  const travelersFirstStep = useSelector(selectTravelersFirstStep);
+
+  const [filterOptions, setFilterOptions] = useState<FlightFilterOptions | undefined>();
+  const [flightGroups, setFlightGroups] = useState<GroupedFlights[]>([]);
+
+  const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
+    if (settings.skipRouter) {
+      dispatch(setCurrentStep(ROOM_OPTIONS_FORM_STEP));
+    } else {
+      if (settings.roomOptions.isHidden) {
+        navigate(`${!settings.skipBasePathInRouting ? settings.basePath : ''}${settings.options.pathSuffix}?${bookingQueryString}`);
+      } else {
+        navigate(`${!settings.skipBasePathInRouting ? settings.basePath : ''}${settings.roomOptions.pathSuffix}?${bookingQueryString}`);
+      }
+    }
+
+    e.preventDefault();
+  };
+
+  const currentFlightPrice = (flights.outward?.find((x) => x.isSelected)?.price || 0) + (flights.return?.find((x) => x.isSelected)?.price || 0);
+
+  useEffect(() => {
+    if (packageDetails && settings.roomOptions.isHidden) {
+      const params = new URLSearchParams(location.search);
+
+      const outwardFlight = params.get('outwardflight') ?? undefined;
+      const returnFlight = params.get('returnflight') ?? undefined;
+      if (outwardFlight && returnFlight) {
+        const desiredOutwardFlight = packageDetails.outwardFlights.find((x) => x.entryLineGuid == outwardFlight);
+        const desiredReturnFlight = packageDetails.returnFlights.find((x) => x.entryLineGuid == returnFlight);
+        if (desiredOutwardFlight && desiredReturnFlight) {
+          dispatch(
+            setPackage({
+              ...packageDetails,
+              outwardFlights: packageDetails.outwardFlights.map((flight) => {
+                return {
+                  ...flight,
+                  isSelected: flight.entryLineGuid == desiredOutwardFlight.entryLineGuid ? true : false
+                } as BookingPackageFlight;
+              }),
+              returnFlights: packageDetails.returnFlights.map((flight) => {
+                return {
+                  ...flight,
+                  isSelected: flight.entryLineGuid == desiredReturnFlight.entryLineGuid ? true : false
+                } as BookingPackageFlight;
+              })
+            })
+          );
+        }
+      }
+    }
+    dispatch(fetchPriceDetails());
+
+    const filters = buildFilterOptions(flights.outward, flights.return, translations);
+    setFilterOptions(filters);
+  }, []);
+
+  useEffect(() => {
+    const groups = buildGroupedFlights(flights.outward, flights.return);
+    setFlightGroups(groups);
+  }, [flights]);
+
+  const filteredGroups = filterGroupedFlights(flightGroups, filterOptions);
+  const resultCount = filteredGroups.length;
+
+  const goPrevious = () => {
+    dispatch(setCurrentStep(TRAVELERS_FORM_STEP));
+  };
+
+  return (
+    <>
+      <FlightOptionModal />
+      <form className="form" name="booking--flights" id="booking--flights" noValidate onSubmit={handleSubmit}>
+        <div className="form__booking--flight">
+          {isLoading && settings.loaderComponent}
+          {!isLoading && (
+            <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>
+        <div className="booking__navigator">
+          {travelersFirstStep && settings.skipRouter ? (
+            <button type="button" title={translations.STEPS.PREVIOUS} onClick={() => goPrevious()} className="cta cta--secondary">
+              {translations.STEPS.PREVIOUS}
+            </button>
+          ) : travelersFirstStep ? (
+            <Link
+              to={`${!settings.skipBasePathInRouting ? settings.basePath : ''}${settings.travellers.pathSuffix}?${bookingQueryString}`}
+              title={translations.STEPS.PREVIOUS}
+              className="cta cta--secondary">
+              {translations.STEPS.PREVIOUS}
+            </Link>
+          ) : null}
+          <button type="submit" title={translations.STEPS.NEXT} disabled={isLoading} className={buildClassName(['cta', isLoading && 'cta--disabled'])}>
+            {translations.STEPS.NEXT}
+          </button>
+        </div>
+      </form>
+    </>
+  );
+};
+
+export default FlightOptionsForm;