@qite/tide-booking-component 1.4.109 → 1.4.111

package/build/build-esm/src/booking-wizard/components/step-route.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-interface StepRoute {
+interface StepRouteProps {
   number: number;
   title: string;
   component: JSX.Element;
 }
-declare const StepRoute: React.FC<StepRoute>;
+declare const StepRoute: React.FC<StepRouteProps>;
 export default StepRoute;

package/build/build-esm/src/booking-wizard/features/sidebar/sidebar-flight.d.ts

@@ -3,6 +3,7 @@ import React from 'react';
 interface SidebarFlightProps {
   title: string;
   flightMetaData: BookingPackageFlightMetaData;
+  translations?: any;
 }
 declare const SidebarFlight: React.FC<SidebarFlightProps>;
 export default SidebarFlight;

package/build/build-esm/src/booking-wizard/features/sidebar/sidebar-util.d.ts

@@ -4,7 +4,8 @@ export declare const getTravelersText: (
   rooms: {
     adults: RoomTraveler[];
     children: RoomTraveler[];
-  }[]
+  }[],
+  translations: any
 ) => string[];
 export declare const getDateText: (date: string | undefined, hideYear?: boolean) => string | undefined;
 export declare const getDatePeriodText: (translations: Record<string, any>, from?: string, to?: string, nightsOnly?: boolean) => string | undefined;

package/build/build-esm/src/booking-wizard/features/sidebar/sidebar.d.ts

@@ -1,31 +0,0 @@
-import { BookingPackageFlightMetaData, BookingPackageRoom, BookingPriceDetail } from '@qite/tide-client/build/types';
-import React from 'react';
-import { PricePerPaxType } from '../../types';
-interface SidebarProps {
-  productName: string;
-  thumbnailUrl?: string;
-  isLoading: boolean;
-  travelerRooms?: string[];
-  startDateText?: string;
-  endDateText?: string;
-  departureFlightMetaData?: BookingPackageFlightMetaData;
-  returnFlightMetaData?: BookingPackageFlightMetaData;
-  basePrice?: number;
-  commission?: number;
-  totalPrice?: number;
-  remainingAmountText?: string;
-  includedCosts?: BookingPriceDetail[];
-  extraCosts?: BookingPriceDetail[];
-  deposit?: number;
-  accommodations?: BookingPackageRoom[];
-  includedServiceTypes?: number[];
-  isOnRequest?: boolean;
-  headerComponent?: JSX.Element;
-  footerComponent?: JSX.Element;
-  loaderComponent?: JSX.Element;
-  isUnavailable?: boolean;
-  basePricePerPaxType?: PricePerPaxType[];
-  seperateExtraPricePerPaxType?: PricePerPaxType[];
-}
-declare const Sidebar: React.FC<SidebarProps>;
-export default Sidebar;

package/build/build-esm/src/booking-wizard/features/travelers-form/travelers-form.d.ts

@@ -1,4 +1,3 @@
 import React from 'react';
-interface TravelersFormProps {}
-declare const TravelersForm: React.FC<TravelersFormProps>;
+declare const TravelersForm: React.FC;
 export default TravelersForm;

package/build/build-esm/src/search-results/components/book-packaging-entry/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { SearchSeed } from '../../types';
+interface BookPackagingEntryProps {
+  activeSearchSeed: SearchSeed | null;
+  isConfirmationPage?: boolean;
+}
+declare const BookPackagingEntry: React.FC<BookPackagingEntryProps>;
+export default BookPackagingEntry;

package/build/build-esm/src/search-results/components/book-packaging-entry/wl-sidebar.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { SearchSeed } from '../../types';
+interface WLSidebarProps {
+  activeSearchSeed: SearchSeed | null;
+}
+declare const WLSidebar: React.FC<WLSidebarProps>;
+export default WLSidebar;

package/build/build-esm/src/search-results/components/spinner/spinner.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
-declare const Spinner: React.FC;
+type SpinnerProps = {
+  label?: string;
+};
+declare const Spinner: React.FC<SpinnerProps>;
 export default Spinner;

package/build/build-esm/src/search-results/store/search-results-slice.d.ts

@@ -43,6 +43,9 @@ export interface SearchResultsState {
   excursionSearchParams: ExcursionSearchParams | null;
   selectedExcursionSearchResult: PackagingAccommodationResponse | null;
   confirmedExcursionsByDay: Record<string, PackagingAccommodationResponse[]>;
+  bookPackagingEntry: boolean;
+  currentStep: number;
+  bookingNumber?: string;
 }
 export declare const setResults: import('@reduxjs/toolkit').ActionCreatorWithPayload<BookingPackageItem[], 'searchResults/setResults'>,
   setFilteredResults: import('@reduxjs/toolkit').ActionCreatorWithPayload<BookingPackageItem[], 'searchResults/setFilteredResults'>,
@@ -127,6 +130,9 @@ export declare const setResults: import('@reduxjs/toolkit').ActionCreatorWithPay
       dayKey: string;
     },
     'searchResults/clearConfirmedExcursionsForDay'
-  >;
+  >,
+  setBookPackagingEntry: import('@reduxjs/toolkit').ActionCreatorWithPayload<boolean, 'searchResults/setBookPackagingEntry'>,
+  setCurrentStep: import('@reduxjs/toolkit').ActionCreatorWithPayload<number, 'searchResults/setCurrentStep'>,
+  setBookingNumber: import('@reduxjs/toolkit').ActionCreatorWithPayload<string, 'searchResults/setBookingNumber'>;
 declare const _default: import('@reduxjs/toolkit').Reducer<SearchResultsState>;
 export default _default;

package/build/build-esm/src/search-results/types.d.ts

@@ -44,6 +44,9 @@ export interface SearchResultsConfiguration {
   };
   onBook?: (result: BookingPackage) => void;
   packagingEntry?: PackagingEntry | null;
+  generatePaymentUrl?: boolean;
+  entryStatus?: number;
+  customEntryStatusId?: number;
 }
 export type FilterType = 'checkbox' | 'toggle' | 'slider' | 'star-rating';
 export type FilterProperty =

package/build/build-esm/src/shared/booking/booking-panel.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface BookingPanelProps {
+  currentStep: number;
+  stepLabels: string[];
+  renderTitle: (step: number) => React.ReactNode;
+  children: React.ReactNode;
+  StepIndicatorsComponent: React.ComponentType<{
+    currentStep: number;
+    stepLabels: string[];
+  }>;
+}
+declare const BookingPanel: React.FC<BookingPanelProps>;
+export default BookingPanel;

package/build/build-esm/src/shared/booking/shared-confirmation.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+export interface SharedConfirmationTranslations {
+  MAIL_SUBJECT: string;
+  TITLE_TEXT_OPTION: string;
+  TITLE_TEXT_OFFER: string;
+  TITLE_TEXT_BOOKING: string;
+  MESSAGE_TEXT1: string;
+  MESSAGE_TEXT2_OFFER: string;
+  MESSAGE_TEXT2_BOOKING: string;
+  QUESTIONS_TEXT1: string;
+  QUESTIONS_TEXT2: string;
+  QUESTIONS_TEXT3: string;
+  QUESTIONS_ALT: string;
+}
+export interface SharedConfirmationProps {
+  bookingNumber?: string;
+  isOption?: boolean;
+  isOffer?: boolean;
+  translations: SharedConfirmationTranslations;
+  companyContactPhone?: string;
+  companyContactEmail?: string;
+  homeUrl?: string;
+}
+declare const SharedConfirmation: React.FC<SharedConfirmationProps>;
+export default SharedConfirmation;

package/build/build-esm/src/shared/booking/shared-sidebar.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { BookingPackageRoom, PackagingEntryLine } from '@qite/tide-client';
+import { PricePerPaxType } from '../../booking-wizard/types';
+interface SharedSidebarProps {
+  productName: string;
+  thumbnailUrl?: string;
+  isLoading?: boolean;
+  travelerRooms?: string[];
+  startDateText?: string;
+  endDateText?: string;
+  departureFlightMetaData?: any;
+  returnFlightMetaData?: any;
+  basePrice?: number;
+  commission?: number;
+  totalPrice?: number;
+  remainingAmountText?: string;
+  includedCosts?: any[];
+  extraCosts?: any[];
+  deposit?: number;
+  accommodations?: BookingPackageRoom[];
+  packagingAccommodations?: PackagingEntryLine[];
+  includedServiceTypes?: number[];
+  isOnRequest?: boolean;
+  headerComponent?: React.ReactNode;
+  footerComponent?: React.ReactNode;
+  loaderComponent?: React.ReactNode;
+  isUnavailable?: boolean;
+  basePricePerPaxType?: PricePerPaxType[];
+  seperateExtraPricePerPaxType?: PricePerPaxType[];
+  translations: any;
+  agent?: number;
+}
+declare const SharedSidebar: React.FC<SharedSidebarProps>;
+export default SharedSidebar;

package/build/build-esm/src/shared/booking/step-indicators.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface StepIndicatorsProps {
+  currentStep: number;
+  stepLabels: string[];
+}
+declare const StepIndicators: React.FC<StepIndicatorsProps>;
+export default StepIndicators;

package/build/build-esm/src/shared/booking/summary.d.ts

@@ -0,0 +1,43 @@
+import React, { ReactNode } from 'react';
+import { SummaryCheckbox, TravelersFormValues } from '../../booking-wizard/types';
+export interface SummaryNotification {
+  id: number;
+  title?: string | null;
+  description?: string | null;
+  hasToBeConfirmed?: boolean;
+  isConfirmed?: boolean;
+}
+export interface SummaryVoucherState {
+  code?: string;
+  isValidated?: boolean;
+  isValid?: boolean;
+}
+export interface SharedSummaryProps {
+  translations: any;
+  travelerFormValues: TravelersFormValues;
+  checkboxes?: SummaryCheckbox[] | null;
+  notifications?: SummaryNotification[] | null;
+  remarks?: string;
+  voucher?: SummaryVoucherState;
+  voucherCodes?: string[];
+  enableVoucher?: boolean;
+  allowOption?: boolean;
+  isOffer?: boolean;
+  customValidateText?: string;
+  isSubmitting?: boolean;
+  userValidated?: boolean;
+  renderOptions: () => ReactNode;
+  renderPreviousButton: () => ReactNode;
+  renderLoader?: () => ReactNode;
+  onSubmit: React.FormEventHandler<HTMLFormElement>;
+  onRemarksChange?: (text: string) => void;
+  onCheckboxesChange?: (checkboxes: SummaryCheckbox[]) => void;
+  onNotificationsChange?: (notifications: SummaryNotification[]) => void;
+  onVoucherChange?: (voucher: SummaryVoucherState) => void;
+  onValidateVoucher?: () => void;
+  onAddVoucher?: React.MouseEventHandler<HTMLButtonElement>;
+  onRemoveVoucher?: (code: string) => void;
+  onUserValidatedChange?: (isValid: boolean) => void;
+}
+declare const SharedSummary: React.FC<SharedSummaryProps>;
+export default SharedSummary;

package/build/build-esm/src/shared/booking/travelers-form.d.ts

@@ -0,0 +1,93 @@
+import React, { ReactNode } from 'react';
+import { FormikProps } from 'formik';
+import { Country, RoomTraveler, Traveler, TravelersFormValues } from '../../booking-wizard/types';
+import { CountryItem, PackagingEntry } from '@qite/tide-client';
+export type TravelersFormField = {
+  type: string;
+};
+export type AgentOption = {
+  id: number | string;
+  name: string;
+  postalCode?: string;
+  location?: string;
+};
+export type TypeAheadOption = {
+  key: string;
+  value: string;
+  text: string;
+};
+export interface SharedTravelersSettings {
+  countries?: Country[];
+  formFields?: TravelersFormField[];
+  mainBookerFormFields?: TravelersFormField[];
+}
+export interface SharedTravelersFormProps {
+  formik: FormikProps<TravelersFormValues>;
+  translations: any;
+  travellersSettings?: SharedTravelersSettings;
+  countries?: CountryItem[];
+  agents?: AgentOption[];
+  bookingType?: string;
+  agentAdressId?: number;
+  travelersFirstStep?: boolean;
+  isUnavailable?: boolean;
+  useCompactForm?: boolean;
+  showAllCountries?: boolean;
+  showAgentSelection?: boolean;
+  initialShowAgents?: boolean;
+  renderPreviousButton?: () => ReactNode;
+  onBookingTypeChange?: (bookingType: string) => void;
+}
+export declare function createTraveler(
+  traveler: RoomTraveler,
+  followNumber: {
+    number: number;
+  },
+  personTranslation?: string,
+  isCompact?: boolean
+): Traveler;
+export declare function createInitialValuesFromRooms(
+  formRooms: {
+    adults: RoomTraveler[];
+    children: RoomTraveler[];
+  }[],
+  startDate?: string,
+  agentAdressId?: number,
+  personTranslation?: string,
+  isCompact?: boolean
+): TravelersFormValues;
+export declare function createInitialValuesFromEditablePackagingEntry(editablePackagingEntry: any, agentAdressId?: number): TravelersFormValues;
+export declare function applyTravelersFormValuesToEditablePackagingEntry(
+  editablePackagingEntry: PackagingEntry,
+  values: TravelersFormValues
+): {
+  pax: import('@qite/tide-client').PackagingEntryPax[];
+  address: {
+    street: string;
+    houseNumber: string;
+    box: string;
+    zipCode: string;
+    place: string;
+    country: string;
+    travelAgentId: number;
+    phone: string;
+    email: string;
+    remarks?: string;
+  };
+  language?: string;
+  transactionId: string;
+  magicLink?: string;
+  dossierNumber: string;
+  bookingDate?: string | null;
+  price: number;
+  depositAmount: number;
+  rooms: import('@qite/tide-client').PackagingEntryRoom[];
+  lines: import('@qite/tide-client').PackagingEntryLine[];
+  status: import('@qite/tide-client').EntryStatus;
+  customStatusId?: number;
+  redirectUrl?: string;
+  returnPaymentUrl?: boolean;
+  remarks?: string;
+};
+declare const SharedTravelersForm: React.FC<SharedTravelersFormProps>;
+export default SharedTravelersForm;

package/build/build-esm/src/shared/components/flyin/flyin.d.ts

@@ -13,6 +13,8 @@ type FlyInProps = {
   isPackageEditFlow?: boolean;
   sortByTypes?: SortByType[];
   activeSearchSeed?: SearchSeed | null;
+  toggleFilters?: () => void;
+  filtersOpen: boolean;
 };
 declare const FlyIn: React.FC<FlyInProps>;
 export default FlyIn;

package/build/build-esm/src/shared/components/flyin/packaging-flights-flyin.d.ts

@@ -2,6 +2,8 @@ import React from 'react';
 type FlightsFlyInProps = {
   isOpen: boolean;
   setIsOpen: (open: boolean) => void;
+  toggleFilters?: () => void;
+  filtersOpen: boolean;
 };
 declare const PackageingFlightsFlyIn: React.FC<FlightsFlyInProps>;
 export default PackageingFlightsFlyIn;

package/build/build-esm/src/shared/utils/booking-summary.d.ts

@@ -0,0 +1 @@
+export declare const renderEditablePackagingEntrySummaryOptions: (editablePackagingEntry: any, priceDetails: any, translations: any) => any;

package/build/build-esm/src/shared/utils/localization-util.d.ts

@@ -354,6 +354,7 @@ export declare const getTranslations: (language: string) => {
     DEPARTURE_ASC: string;
     FILTERS: string;
     SHOW_ITINERARY: string;
+    VIEW_BOOKING: string;
     ITINERARY_TITLE: string;
     DOSSIER_NUMBER: string;
     PACKAGE_PRICE_PER_PERSON: string;
@@ -388,6 +389,11 @@ export declare const getTranslations: (language: string) => {
     DURATION_DESC: string;
     TRAVEL_GROUP: string;
     EXCURSION: string;
+    LOADING_EXCURSIONS: string;
+    LOADING_FLIGHTS: string;
+    LOADING_ACCOMMODATIONS: string;
+    LOADING_ITINERARY: string;
+    LOADING_OPTIONS: string;
   };
   ITINERARY: {
     DAY: string;
@@ -429,3 +435,4 @@ export declare const calculateDays: (fromDate: Date, toDate: Date) => number;
 export declare const getSortingName: (translations: any, sortByType: SortByType) => string;
 export declare const findSortByType: (sortByTypes: SortByType[], sortKey: string, direction: string) => SortByType;
 export declare const getDatesBetween: (fromDate: string, toDate: string) => Date[];
+export declare const getDateOnlyTime: (date?: string | Date | null) => number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.4.109",
+  "version": "1.4.111",
   "description": "React Booking wizard & Booking product component for Tide",
   "main": "build/build-cjs/index.js",
   "types": "build/build-cjs/src/index.d.ts",
@@ -29,7 +29,7 @@
   "devDependencies": {
     "@jsonurl/jsonurl": "^1.1.4",
     "@popperjs/core": "^2.10.2",
-    "@qite/tide-client": "^1.1.167",
+    "@qite/tide-client": "^1.1.172",
     "@reduxjs/toolkit": "^2.8.2",
     "@rollup/plugin-commonjs": "^19.0.1",
     "@rollup/plugin-json": "^4.1.0",

package/src/booking-wizard/components/step-indicator.tsx

@@ -1,8 +1,8 @@
 import React, { useContext } from 'react';
 import { useSelector } from 'react-redux';
-import { buildClassName } from '../../shared/utils/class-util';
 import { selectTranslations, selectTravelersFirstStep } from '../features/booking/selectors';
 import SettingsContext from '../settings-context';
+import SharedStepIndicators from '../../shared/booking/step-indicators';
 
 interface StepIndicatorsProps {
   currentStep: number;
@@ -10,48 +10,27 @@ interface StepIndicatorsProps {
 
 const StepIndicators: React.FC<StepIndicatorsProps> = ({ currentStep }) => {
   const { flightOptions, roomOptions } = useContext(SettingsContext);
-
   const translations = useSelector(selectTranslations);
   const travelersFirstStep = useSelector(selectTravelersFirstStep);
 
-  const allSteps = [];
-
+  const stepLabels: string[] = [];
   if (travelersFirstStep) {
-    allSteps.push(translations.STEPS.PERSONAL_DETAILS);
+    stepLabels.push(translations.STEPS.PERSONAL_DETAILS);
   }
   if (!flightOptions.isHidden) {
-    allSteps.push(translations.STEPS.FLIGHT_OPTIONS);
+    stepLabels.push(translations.STEPS.FLIGHT_OPTIONS);
   }
   if (!roomOptions.isHidden) {
-    allSteps.push(translations.STEPS.ROOM_OPTIONS);
+    stepLabels.push(translations.STEPS.ROOM_OPTIONS);
   }
-
-  allSteps.push(translations.STEPS.EXTRA_OPTIONS);
-
+  stepLabels.push(translations.STEPS.EXTRA_OPTIONS);
   if (!travelersFirstStep) {
-    allSteps.push(translations.STEPS.PERSONAL_DETAILS);
+    stepLabels.push(translations.STEPS.PERSONAL_DETAILS);
   }
-  allSteps.push(translations.STEPS.SUMMARY);
-  allSteps.push(translations.STEPS.CONFIRMATION);
+  stepLabels.push(translations.STEPS.SUMMARY);
+  stepLabels.push(translations.STEPS.CONFIRMATION);
 
-  return (
-    <div className="step-indicators">
-      <div className="step-indicators__items">
-        {allSteps.map((stepName, index) => (
-          <div
-            key={`${index + 1}-${stepName}`}
-            className={buildClassName([
-              'step-indicators__item',
-              currentStep === index + 1 && 'step-indicators__item--active',
-              currentStep > index + 1 && 'step-indicators__item--completed'
-            ])}>
-            <div className="step-indicators__icon step-indicators__icon">{index + 1}</div>
-            <div className="step-indicators__text">{stepName}</div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
+  return <SharedStepIndicators currentStep={currentStep} stepLabels={stepLabels} />;
 };
 
 export default StepIndicators;

package/src/booking-wizard/components/step-route.tsx

@@ -1,25 +1,50 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import StepIndicators from './step-indicator';
+import BookingPanel from '../../shared/booking/booking-panel';
+import SettingsContext from '../settings-context';
+import { useSelector } from 'react-redux';
+import { selectTranslations, selectTravelersFirstStep } from '../features/booking/selectors';
 
-interface StepRoute {
+interface StepRouteProps {
   number: number;
   title: string;
   component: JSX.Element;
 }
 
-const StepRoute: React.FC<StepRoute> = ({ number, title, component }) => {
+const StepRoute: React.FC<StepRouteProps> = ({ number, title, component }) => {
+  const { flightOptions, roomOptions } = useContext(SettingsContext);
+  const translations = useSelector(selectTranslations);
+  const travelersFirstStep = useSelector(selectTravelersFirstStep);
+
+  const stepLabels: string[] = [];
+  if (travelersFirstStep) {
+    stepLabels.push(translations.STEPS.PERSONAL_DETAILS);
+  }
+  if (!flightOptions.isHidden) {
+    stepLabels.push(translations.STEPS.FLIGHT_OPTIONS);
+  }
+  if (!roomOptions.isHidden) {
+    stepLabels.push(translations.STEPS.ROOM_OPTIONS);
+  }
+  stepLabels.push(translations.STEPS.EXTRA_OPTIONS);
+  if (!travelersFirstStep) {
+    stepLabels.push(translations.STEPS.PERSONAL_DETAILS);
+  }
+  stepLabels.push(translations.STEPS.SUMMARY);
+  stepLabels.push(translations.STEPS.CONFIRMATION);
+
   return (
-    <>
-      <StepIndicators currentStep={number} />
-      <div className="booking__panel-frame booking__panel-frame--transparent">
-        <div className="booking__panel-heading">
-          <h4 className="booking__panel-title">
-            {number}. {title}
-          </h4>
-        </div>
-        <div className="booking__panel-body">{component}</div>
-      </div>
-    </>
+    <BookingPanel
+      currentStep={number}
+      stepLabels={stepLabels}
+      StepIndicatorsComponent={StepIndicators}
+      renderTitle={(step) => (
+        <>
+          {step + 1}. {stepLabels[step]}
+        </>
+      )}>
+      {component}
+    </BookingPanel>
   );
 };
 

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

@@ -1,16 +1,12 @@
 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 '../../../shared/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';
+import SharedConfirmation from '../../../shared/booking/shared-confirmation';
 
 interface ConfirmationProps {}
 
@@ -22,6 +18,7 @@ const Confirmation: React.FC<ConfirmationProps> = () => {
   const bookingNumber = useSelector(selectBookingNumber);
   const bookingQueryString = useSelector(selectBookingQueryString);
   const isOption = useSelector(selectIsOption);
+  const translations = useSelector(selectTranslations);
 
   useEffect(() => {
     if (!bookingNumber) {
@@ -33,57 +30,16 @@ const Confirmation: React.FC<ConfirmationProps> = () => {
     }
   }, [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>
+    <SharedConfirmation
+      bookingNumber={bookingNumber}
+      isOption={isOption}
+      isOffer={settings.isOffer}
+      translations={translations.CONFIRMATION}
+      companyContactPhone={settings.companyContactPhone}
+      companyContactEmail={settings.companyContactEmail}
+      homeUrl={settings.basePath || '/'}
+    />
   );
 };