@qite/tide-booking-component 1.0.22 → 1.0.24

package/README.md

@@ -1,8 +1,8 @@
-# README
-
-This is the unified Tide Booking Component.
-
-## Remarks
-
-Do not forget to sync React versions when you're doing local changes and when you try to test them in a local React project (check https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react).
-If using the playground, after installing it's node modules execute the following command in the root folder `npm link ./playground/node_modules/react`
+# README
+
+This is the unified Tide Booking Component.
+
+## Remarks
+
+Do not forget to sync React versions when you're doing local changes and when you try to test them in a local React project (check https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react).
+If using the playground, after installing it's node modules execute the following command in the root folder `npm link ./playground/node_modules/react`

package/build/build-cjs/booking-wizard/utils/localization-util.d.ts

@@ -1 +1,137 @@
 export declare const formatPrice: (price: number) => string;
+export declare const getTranslations: (language: string) => {
+    STEPS: {
+        PERSONAL_DETAILS: string;
+        TRAVEL_OPTIONS: string;
+        SUMMARY: string;
+        CONFIRMATION: string;
+        ERROR: string;
+        PREVIOUS: string;
+        NEXT: string;
+        SUBMIT: string;
+        COMPOSE: string;
+    };
+    MAIN: {
+        PREPARING_BOOKING: string;
+        PRODUCT_UNAVAILABLE: string;
+    };
+    SIDEBAR: {
+        OVERVIEW: string;
+        SLIDE_TOTAL_PRICE: string;
+        SLIDE_DEPOSIT: string;
+        TRAVEL_INFO: string;
+        TRAVELERS: string;
+        TRAVELERS_ADULTS: string;
+        TRAVELERS_ADULT: string;
+        TRAVELERS_CHILDREN: string;
+        TRAVELERS_CHILD: string;
+        DEPARTURE: string;
+        DEPARTURE_SINGLE: string;
+        ARRIVAL: string;
+        FLIGHT: string;
+        ACCOMMODATION: string;
+        BASE_PRICE: string;
+        OPTIONS: string;
+        INCLUDED_COSTS: string;
+        EXTRA_COSTS: string;
+        TOTAL_PRICE: string;
+        DEPOSIT: string;
+        DEPOSIT_TEXT1: string;
+        DEPOSIT_TEXT2: string;
+        DEPOSIT_TEXT3: string;
+        DEPOSIT_TEXT4: string;
+        DEPOSIT_TEXT5: string;
+        DEPOSIT_TEXT6: string;
+        LUGGAGE_INCLUDED: string;
+        DEPARTURE_FLIGHT: string;
+        ARRIVAL_FLIGHT: string;
+        FLIGHT_DEPARTURE: string;
+        FLIGHT_ARRIVAL: string;
+        ON_REQUEST: string;
+        CHANGES: string;
+    };
+    TRAVELERS_FORM: {
+        PERSONS: string;
+        TRAVELER: string;
+        ADULT: string;
+        ADULTS: string;
+        CHILD: string;
+        CHILDREN: string;
+        GENDER: string;
+        MALE: string;
+        FEMALE: string;
+        OTHER: string;
+        MAIN_BOOKER: string;
+        FIRST_NAME: string;
+        LAST_NAME: string;
+        BIRTHDATE: string;
+        STREET: string;
+        STREET_PLACEHOLDER: string;
+        HOUSE_NUMBER: string;
+        POST_BOX: string;
+        ZIPCODE: string;
+        CITY: string;
+        CITY_PLACEHOLDER: string;
+        COUNTRY: string;
+        SELECT_COUNTRY: string;
+        PHONE: string;
+        EMAIL: string;
+        REPEAT_EMAIL: string;
+        VALIDATION_MESSAGE: string;
+    };
+    OPTIONS_FORM: {
+        NO_OPTIONS_TITLE: string;
+        NO_OPTIONS_MESSAGE: string;
+        UNIT_TITLE: string;
+        PACKAGE: string;
+        DAY: string;
+        DAYS: string;
+        NIGHT: string;
+        NIGHTS: string;
+        PER_PAX_TITLE: string;
+        PER_BOOKING_TITLE: string;
+        PER_UNIT_TITLE: string;
+        NONE: string;
+    };
+    SUMMARY: {
+        PERSONAL_DETAILS: string;
+        TRAVELERS: string;
+        TRAVELER: string;
+        ADULTS: string;
+        ADULT: string;
+        CHILDREN: string;
+        CHILD: string;
+        MAIN_BOOKER: string;
+        NOTIFICATIONS_TITLE: string;
+        VALIDATE_TITLE: string;
+        VALIDATE_TEXT: string;
+        OPTIONS: string;
+        REMARKS: string;
+        VOUCHERS: string;
+        VOUCHER_VALIDATE: string;
+        ADD_VOUCHER: string;
+        VOUCHER_VALID: string;
+        VOUCHER_INVALID: string;
+    };
+    CONFIRMATION: {
+        TITLE_TEXT1: string;
+        TITLE_TEXT2: string;
+        MESSAGE_TEXT1: string;
+        MESSAGE_TEXT2: string;
+        MESSAGE_TEXT3: string;
+        MESSAGE_TEXT4: string;
+        QUESTIONS_TEXT1: string;
+        QUESTIONS_TEXT2: string;
+        QUESTIONS_TEXT3: string;
+        QUESTIONS_ALT: string;
+    };
+    ERROR: {
+        TRY_AGAIN: string;
+        MESSAGE_TEXT1: string;
+        MESSAGE_TEXT2: string;
+        ERROR_TEXT1: string;
+        ERROR_TEXT2: string;
+        ERROR_TEXT3: string;
+        ERROR_ALT: string;
+    };
+};

package/build/build-cjs/index.js

@@ -7608,7 +7608,7 @@ var Message = function (_a) {
         actionComponent && (React__default["default"].createElement("div", { className: "booking-message__actions" }, actionComponent))));
 };
 
-var STEPS = {
+var STEPS$1 = {
 	PERSONAL_DETAILS: "Persoonlijke gegevens",
 	TRAVEL_OPTIONS: "Opties",
 	SUMMARY: "Overzicht",
@@ -7616,13 +7616,14 @@ var STEPS = {
 	ERROR: "Boeken mislukt",
 	PREVIOUS: "Vorige stap",
 	NEXT: "Volgende stap",
-	SUBMIT: "Bevestig boeking"
+	SUBMIT: "Bevestig boeking",
+	COMPOSE: "Samenstellen"
 };
-var MAIN = {
+var MAIN$1 = {
 	PREPARING_BOOKING: "Even geduld, we bereiden uw boeking voor",
 	PRODUCT_UNAVAILABLE: "Product niet beschikbaar"
 };
-var SIDEBAR = {
+var SIDEBAR$1 = {
 	OVERVIEW: "Overzicht",
 	SLIDE_TOTAL_PRICE: "Totaalbedrag: ",
 	SLIDE_DEPOSIT: "Te betalen voorschot: ",
@@ -7657,7 +7658,7 @@ var SIDEBAR = {
 	ON_REQUEST: "Op aanvraag",
 	CHANGES: "overstappen"
 };
-var TRAVELERS_FORM = {
+var TRAVELERS_FORM$1 = {
 	PERSONS: "Personen",
 	TRAVELER: "Reiziger",
 	ADULT: "volwassene",
@@ -7686,7 +7687,7 @@ var TRAVELERS_FORM = {
 	REPEAT_EMAIL: "Herhaal e-mail",
 	VALIDATION_MESSAGE: "Controleer onderstaande velden in het formulier en vul deze correct in."
 };
-var OPTIONS_FORM = {
+var OPTIONS_FORM$1 = {
 	NO_OPTIONS_TITLE: "Geen opties",
 	NO_OPTIONS_MESSAGE: "Deze reis heeft geen bijkomende opties.",
 	UNIT_TITLE: "Gezelschap",
@@ -7700,7 +7701,7 @@ var OPTIONS_FORM = {
 	PER_UNIT_TITLE: "Per gezelschap samenstellen",
 	NONE: "Geen"
 };
-var SUMMARY = {
+var SUMMARY$1 = {
 	PERSONAL_DETAILS: "Persoonlijke gegevens",
 	TRAVELERS: "reizigers",
 	TRAVELER: "reiziger",
@@ -7720,7 +7721,7 @@ var SUMMARY = {
 	VOUCHER_VALID: "Voucher is geldig",
 	VOUCHER_INVALID: "Voucher is niet geldig"
 };
-var CONFIRMATION = {
+var CONFIRMATION$1 = {
 	TITLE_TEXT1: "Je boeking met nummer ",
 	TITLE_TEXT2: " is bevestigd",
 	MESSAGE_TEXT1: "Jouw droomreis komt nu heel dichtbij.",
@@ -7732,7 +7733,7 @@ var CONFIRMATION = {
 	QUESTIONS_TEXT3: ".",
 	QUESTIONS_ALT: "Contacteer ons"
 };
-var ERROR = {
+var ERROR$1 = {
 	TRY_AGAIN: "Probeer opnieuw te boeken",
 	MESSAGE_TEXT1: "Tijdens het bevestigen van uw reis is er iets misgelopen.",
 	MESSAGE_TEXT2: "Klik hieronder om nog eens te proberen.",
@@ -7741,7 +7742,152 @@ var ERROR = {
 	ERROR_TEXT3: ".",
 	ERROR_ALT: "Contacteer ons"
 };
-var translations = {
+var nl = {
+	STEPS: STEPS$1,
+	MAIN: MAIN$1,
+	SIDEBAR: SIDEBAR$1,
+	TRAVELERS_FORM: TRAVELERS_FORM$1,
+	OPTIONS_FORM: OPTIONS_FORM$1,
+	SUMMARY: SUMMARY$1,
+	CONFIRMATION: CONFIRMATION$1,
+	ERROR: ERROR$1
+};
+
+var STEPS = {
+	PERSONAL_DETAILS: "Détails personnels",
+	TRAVEL_OPTIONS: "Options de voyage",
+	SUMMARY: "Résumé",
+	CONFIRMATION: "Confirmation",
+	ERROR: "Erreur de réservation",
+	PREVIOUS: "Étape précédente",
+	NEXT: "Étape suivante",
+	SUBMIT: "Confirmer la réservation",
+	COMPOSE: "Voyageurs"
+};
+var MAIN = {
+	PREPARING_BOOKING: "Veuillez patienter, nous préparons votre réservation",
+	PRODUCT_UNAVAILABLE: "Produit non disponible"
+};
+var SIDEBAR = {
+	OVERVIEW: "Aperçu",
+	SLIDE_TOTAL_PRICE: "Montant total : ",
+	SLIDE_DEPOSIT: "Dépôt à payer : ",
+	TRAVEL_INFO: "Informations de voyage",
+	TRAVELERS: "Voyageurs",
+	TRAVELERS_ADULTS: "adultes",
+	TRAVELERS_ADULT: "adulte",
+	TRAVELERS_CHILDREN: "enfants",
+	TRAVELERS_CHILD: "enfant",
+	DEPARTURE: "Aller",
+	DEPARTURE_SINGLE: "Date",
+	ARRIVAL: "Retour",
+	FLIGHT: "Vol",
+	ACCOMMODATION: "Hébergement réservé",
+	BASE_PRICE: "Prix de base",
+	OPTIONS: "Options",
+	INCLUDED_COSTS: "Coûts inclus",
+	EXTRA_COSTS: "Frais supplémentaires",
+	TOTAL_PRICE: "Prix total",
+	DEPOSIT: "Dépôt à payer",
+	DEPOSIT_TEXT1: "Les étapes à suivre pour le paiement du ",
+	DEPOSIT_TEXT2: "solde restant",
+	DEPOSIT_TEXT3: " de ",
+	DEPOSIT_TEXT4: "seront décrites à l'étape 3 (\"Résumé\")",
+	DEPOSIT_TEXT5: " du processus de réservation.",
+	DEPOSIT_TEXT6: "Luggage Included: Inclus bagage",
+	LUGGAGE_INCLUDED: "Bagages inclus",
+	DEPARTURE_FLIGHT: "Vol aller",
+	ARRIVAL_FLIGHT: "Vol retour",
+	FLIGHT_DEPARTURE: "Départ",
+	FLIGHT_ARRIVAL: "Arrivée",
+	ON_REQUEST: "Sur demande",
+	CHANGES: "changements"
+};
+var TRAVELERS_FORM = {
+	PERSONS: "Personnes",
+	TRAVELER: "Voyageur",
+	ADULT: "adulte",
+	ADULTS: "adultes",
+	CHILD: "enfant",
+	CHILDREN: "enfants",
+	GENDER: "Civilité",
+	MALE: "Monsieur",
+	FEMALE: "Madame",
+	OTHER: "Autre",
+	MAIN_BOOKER: "Titulaire principal",
+	FIRST_NAME: "Prénom",
+	LAST_NAME: "Nom",
+	BIRTHDATE: "Date de naissance",
+	STREET: "Rue",
+	STREET_PLACEHOLDER: "Votre rue",
+	HOUSE_NUMBER: "Numéro de maison",
+	POST_BOX: "Boîte postale",
+	ZIPCODE: "Code postal",
+	CITY: "Ville",
+	CITY_PLACEHOLDER: "Ville",
+	COUNTRY: "Pays",
+	SELECT_COUNTRY: "Sélectionner le pays",
+	PHONE: "Numéro de téléphone",
+	EMAIL: "E-mail",
+	REPEAT_EMAIL: "Répéter l'e-mail",
+	VALIDATION_MESSAGE: "Veuillez vérifier les champs ci-dessous dans le formulaire et les remplir correctement."
+};
+var OPTIONS_FORM = {
+	NO_OPTIONS_TITLE: "Aucune option",
+	NO_OPTIONS_MESSAGE: "Ce voyage n'a pas d'options supplémentaires.",
+	UNIT_TITLE: "Groupe",
+	PACKAGE: "Forfait",
+	DAY: "jour",
+	DAYS: "jours",
+	NIGHT: "nuit",
+	NIGHTS: "nuits",
+	PER_PAX_TITLE: "À composer par voyageur",
+	PER_BOOKING_TITLE: "À composer par dossier",
+	PER_UNIT_TITLE: "À composer par groupe",
+	NONE: "Aucun"
+};
+var SUMMARY = {
+	PERSONAL_DETAILS: "Détails personnels",
+	TRAVELERS: "voyageurs",
+	TRAVELER: "voyageur",
+	ADULTS: "adultes",
+	ADULT: "adulte",
+	CHILDREN: "enfants",
+	CHILD: "enfant",
+	MAIN_BOOKER: "Titulaire principal",
+	NOTIFICATIONS_TITLE: "Notifications",
+	VALIDATE_TITLE: "Vérifiez vos informations",
+	VALIDATE_TEXT: "Vous êtes sur le point de confirmer votre réservation. Veuillez vérifier que toutes les informations sont correctes. Elles sont définitives et ne peuvent plus être modifiées.",
+	OPTIONS: "Options",
+	REMARKS: "Remarques",
+	VOUCHERS: "Bons",
+	VOUCHER_VALIDATE: "Valider le bon",
+	ADD_VOUCHER: "Ajouter un bon",
+	VOUCHER_VALID: "Le bon est valide",
+	VOUCHER_INVALID: "Le bon n'est pas valide"
+};
+var CONFIRMATION = {
+	TITLE_TEXT1: "Votre réservation avec le numéro ",
+	TITLE_TEXT2: " est confirmée",
+	MESSAGE_TEXT1: "Votre voyage de rêve est maintenant à portée de main.",
+	MESSAGE_TEXT2: "Nos spécialistes en voyages traiteront votre réservation et vous contacteront dans les ",
+	MESSAGE_TEXT3: " 48 heures",
+	MESSAGE_TEXT4: ".",
+	QUESTIONS_TEXT1: "Vous avez des questions ? ",
+	QUESTIONS_TEXT2: "Faites-le nous savoir",
+	QUESTIONS_TEXT3: ".",
+	QUESTIONS_ALT: "Contactez-nous"
+};
+var ERROR = {
+	TRY_AGAIN: "Essayer de réserver à nouveau",
+	MESSAGE_TEXT1: "Une erreur s'est produite lors de la confirmation de votre voyage.",
+	MESSAGE_TEXT2: "Cliquez ci-dessous pour réessayer.",
+	ERROR_TEXT1: "Problèmes persistants ? ",
+	ERROR_TEXT2: "Faites-le nous savoir",
+	ERROR_TEXT3: ".",
+	ERROR_ALT: "Contactez-nous"
+};
+var fr = {
 	STEPS: STEPS,
 	MAIN: MAIN,
 	SIDEBAR: SIDEBAR,
@@ -7752,6 +7898,24 @@ var translations = {
 	ERROR: ERROR
 };
 
+var formatPrice = function (price) {
+    var priceFormat = Intl.NumberFormat("nl-BE", {
+        style: "currency",
+        currency: "EUR",
+    });
+    return priceFormat.format(price);
+};
+var getTranslations = function (language) {
+    switch (language) {
+        case "nl-BE":
+            return nl;
+        case "fr-BE":
+            return fr;
+        default:
+            throw new Error("The language '".concat(language, "' is not yet supported."));
+    }
+};
+
 var Confirmation = function () {
     var settings = React.useContext(SettingsContext);
     var bookingNumber = reactRedux.useSelector(selectBookingNumber);
@@ -7759,6 +7923,7 @@ var Confirmation = function () {
     if (!bookingNumber) {
         router.navigate("".concat(settings.basePath).concat(settings.error.pathSuffix, "?").concat(bookingQueryString));
     }
+    var translations = getTranslations(settings.language);
     return (React__default["default"].createElement("div", { className: "form", id: "booking--step4" },
         React__default["default"].createElement("div", { className: "form__region" },
             React__default["default"].createElement("div", { className: "form__row" },
@@ -7792,6 +7957,7 @@ var Error$1 = function () {
         dispatch(setIsRetry(true));
         router.navigate(tryAgainUrl);
     };
+    var translations = getTranslations(settings.language);
     return (React__default["default"].createElement("div", { className: "form" },
         React__default["default"].createElement("div", { className: "form__region" },
             React__default["default"].createElement("div", { className: "form__row" },
@@ -7808,12 +7974,16 @@ var Error$1 = function () {
 };
 
 var NoOptions = function () {
+    var language = React.useContext(SettingsContext).language;
+    var translations = getTranslations(language);
     return (React__default["default"].createElement("div", { className: "form__group" },
         React__default["default"].createElement(Message, { type: "success", title: translations.OPTIONS_FORM.NO_OPTIONS_TITLE },
             React__default["default"].createElement("p", null, translations.OPTIONS_FORM.NO_OPTIONS_MESSAGE))));
 };
 
 var getTravelersText = function (adultIds, childIds) {
+    var language = React.useContext(SettingsContext).language;
+    var translations = getTranslations(language);
     var travelersText = lodash.compact([
         adultIds.length,
         adultIds.length === 1 && " ".concat(translations.SIDEBAR.TRAVELERS_ADULT),
@@ -7842,6 +8012,8 @@ var getDatePeriodText = function (from, to, nightsOnly) {
     if (!from || !to) {
         return undefined;
     }
+    var language = React.useContext(SettingsContext).language;
+    var translations = getTranslations(language);
     try {
         var fromDate = dateFns.parseISO(from);
         var toDate = dateFns.parseISO(to);
@@ -7906,18 +8078,12 @@ var parseFlightLineDateTime = function (date, time) {
     }
 };
 
-var formatPrice = function (price) {
-    var priceFormat = Intl.NumberFormat("nl-BE", {
-        style: "currency",
-        currency: "EUR",
-    });
-    return priceFormat.format(price);
-};
-
 var OptionRoom = function (_a) {
     var _b, _c, _d, _e, _f;
     var packageRoom = _a.packageRoom, pax = _a.pax, optionPax = _a.optionPax, onRoomChange = _a.onRoomChange;
     var selectedOption = packageRoom === null || packageRoom === void 0 ? void 0 : packageRoom.options.find(function (x) { return x.isSelected; });
+    var language = React.useContext(SettingsContext).language;
+    var translations = getTranslations(language);
     var daysAndNightsText = "";
     var startDate = "";
     var endDate = "";
@@ -8078,6 +8244,8 @@ var OptionRoom = function (_a) {
 
 var NoneOption = function (_a) {
     var group = _a.group, parentId = _a.parentId, handleNoneSelectionChanged = _a.handleNoneSelectionChanged;
+    var language = React.useContext(SettingsContext).language;
+    var translations = getTranslations(language);
     var selectedOption = group.options.find(function (x) { return x.isSelected; });
     var showNoneOption = group.options.some(function (x) { return x.requirementType === 2; });
     var noneSelected = !selectedOption;
@@ -8334,6 +8502,8 @@ var OptionPaxGroup = function (_a) {
 var OptionPaxCard = function (_a) {
     var pax = _a.pax, requestRoomsPax = _a.requestRoomsPax, parentIndex = _a.parentIndex, onPaxChange = _a.onPaxChange;
     var _b = React.useState(), toggleStates = _b[0], setToggleStates = _b[1];
+    var language = React.useContext(SettingsContext).language;
+    var translations = getTranslations(language);
     React.useEffect(function () {
         if (!toggleStates || toggleStates.length !== pax.length) {
             setToggleStates(pax.map(function () { return true; }));
@@ -8455,6 +8625,8 @@ var OptionUnitGroup = function (_a) {
 var OptionUnitsCard = function (_a) {
     var units = _a.units, parentIndex = _a.parentIndex, onUnitsChange = _a.onUnitsChange;
     var _b = React.useState(), toggleStates = _b[0], setToggleStates = _b[1];
+    var language = React.useContext(SettingsContext).language;
+    var translations = getTranslations(language);
     React.useEffect(function () {
         if (!toggleStates || toggleStates.length !== units.length) {
             setToggleStates(units.map(function () { return true; }));
@@ -8576,7 +8748,8 @@ var OptionBookingGroup = function (_a) {
 
 var OptionsForm = function () {
     var _a;
-    var _b = React.useContext(SettingsContext), basePath = _b.basePath, travellers = _b.travellers, loaderComponent = _b.loaderComponent;
+    var _b = React.useContext(SettingsContext), basePath = _b.basePath, travellers = _b.travellers, loaderComponent = _b.loaderComponent, language = _b.language;
+    var translations = getTranslations(language);
     var dispatch = useAppDispatch();
     var packageDetails = reactRedux.useSelector(selectPackageDetails);
     var requestRooms = reactRedux.useSelector(selectRequestRooms);
@@ -8715,7 +8888,7 @@ var OptionsForm = function () {
                         React__default["default"].createElement("div", { className: "booking-card__header" },
                             React__default["default"].createElement("h2", { className: "booking-card__header-heading" }, translations.OPTIONS_FORM.PER_BOOKING_TITLE)),
                         React__default["default"].createElement("div", { className: "booking-card__body" },
-                            React__default["default"].createElement("div", { className: "tree__body" }, groups.map(function (group, i) { return (React__default["default"].createElement(OptionBookingGroup, { key: "".concat(group.name, "_").concat(i), group: group, firstClassName: "tree__level", secondClassName: "tree__level-heading", parentId: "booking_".concat(group.name), onGroupChange: handleOnGroupChange })); })))))),
+                            React__default["default"].createElement("div", { className: "booking-card__group booking-card__group--active" }, groups.map(function (group, i) { return (React__default["default"].createElement(OptionBookingGroup, { key: "".concat(group.name, "_").concat(i), group: group, firstClassName: "booking-card__group-body", secondClassName: "booking-card__group-heading", parentId: "booking_".concat(group.name), onGroupChange: handleOnGroupChange })); })))))),
                 lodash.isEmpty(groups) && lodash.isEmpty(optionUnits) && lodash.isEmpty(optionPax) && (React__default["default"].createElement(NoOptions, null)))),
             React__default["default"].createElement("div", { className: "booking__navigator" },
                 React__default["default"].createElement("button", { type: "submit", title: translations.STEPS.NEXT, disabled: isLoading, className: buildClassName(["cta", isLoading && "cta--disabled"]) }, translations.STEPS.NEXT)))));
@@ -8732,9 +8905,11 @@ var ProductCard = function (_a) {
 
 var SidebarFlight = function (_a) {
     var title = _a.title, flight = _a.flight;
+    var language = React.useContext(SettingsContext).language;
     var flightLines = parseFlightLines(flight.flightMetaData);
     var firstFlight = lodash.first(flightLines);
     var lastFlight = lodash.last(flightLines);
+    var translations = getTranslations(language);
     return (React__default["default"].createElement("div", { className: "pricing-summary__group" },
         React__default["default"].createElement("h6", { className: "pricing-summary__title" }, title),
         React__default["default"].createElement("div", { className: "pricing-summary__row" },
@@ -8772,7 +8947,9 @@ var SidebarFlight = function (_a) {
 
 var Sidebar = function (_a) {
     var productName = _a.productName, thumbnailUrl = _a.thumbnailUrl, isLoading = _a.isLoading, travelersText = _a.travelersText, startDateText = _a.startDateText, endDateText = _a.endDateText, departureFlight = _a.departureFlight, returnFlight = _a.returnFlight, basePrice = _a.basePrice, totalPrice = _a.totalPrice, includedCosts = _a.includedCosts, extraCosts = _a.extraCosts, deposit = _a.deposit, accommodations = _a.accommodations, isOnRequest = _a.isOnRequest, headerComponent = _a.headerComponent, footerComponent = _a.footerComponent, loaderComponent = _a.loaderComponent;
+    var language = React.useContext(SettingsContext).language;
     var _b = React.useState(false), active = _b[0], setActive = _b[1];
+    var translations = getTranslations(language);
     var canShowPriceBreakdownSection = Boolean(basePrice && basePrice > 0) ||
         !lodash.isEmpty(includedCosts) ||
         !lodash.isEmpty(extraCosts);
@@ -8913,12 +9090,14 @@ var SidebarContainer = function (_a) {
 
 var StepIndicators = function (_a) {
     var currentStep = _a.currentStep;
+    var language = React.useContext(SettingsContext).language;
+    var translations = getTranslations(language);
     return (React__default["default"].createElement("div", { className: "step-indicators" },
         React__default["default"].createElement("div", { className: "step-indicators__items" }, [
-            "Samenstellen",
-            "Persoonlijke gegevens",
-            "Overzicht",
-            "Bevestiging",
+            translations.STEPS.COMPOSE,
+            translations.STEPS.PERSONAL_DETAILS,
+            translations.STEPS.SUMMARY,
+            translations.STEPS.CONFIRMATION,
         ].map(function (stepName, index) { return (React__default["default"].createElement("div", { key: "".concat(index + 1, "-").concat(stepName), className: buildClassName([
                 "step-indicators__item",
                 currentStep === index + 1 && "step-indicators__item--active",
@@ -8944,6 +9123,8 @@ var StepRoute = function (_a) {
 var SummaryFlight = function (_a) {
     var _b;
     var flight = _a.flight, header = _a.header;
+    var language = React.useContext(SettingsContext).language;
+    var translations = getTranslations(language);
     return (React__default["default"].createElement("li", null,
         React__default["default"].createElement("h6", null, header), (_b = parseFlightLines(flight.flightMetaData)) === null || _b === void 0 ? void 0 :
         _b.map(function (flightLine) { return (React__default["default"].createElement("p", { key: flightLine.departureAirportIata },
@@ -9218,6 +9399,7 @@ var Summary = function () {
         dispatch(setVoucherCodes((_b = (_a = bookRequest === null || bookRequest === void 0 ? void 0 : bookRequest.payload.voucherCodes) === null || _a === void 0 ? void 0 : _a.filter(function (x) { return x !== code; })) !== null && _b !== void 0 ? _b : []));
         dispatch(fetchPriceDetails$1());
     };
+    var translations = getTranslations(settings.language);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         isSubmitting && settings.loaderComponent,
         !isSubmitting && (React__default["default"].createElement("form", { className: "form", name: "booking--step3", id: "booking--step3", onSubmit: handleSubmit },
@@ -9677,6 +9859,7 @@ var TravelersForm = function () {
     var hasVisibleError = function (key) {
         return lodash.get(formik$1.errors, key) && lodash.get(formik$1.touched, key);
     };
+    var translations = getTranslations(settings.language);
     return (React__default["default"].createElement("form", { className: "form", name: "booking--step1", id: "booking--step1", noValidate: true, onSubmit: formik$1.handleSubmit, onReset: formik$1.handleReset },
         React__default["default"].createElement("div", { className: "form__region" },
             React__default["default"].createElement("div", { className: "form__region-header" },
@@ -9839,7 +10022,7 @@ var TravelersForm = function () {
 
 var Booking = function (_a) {
     var productCode = _a.productCode, productName = _a.productName, thumbnailUrl = _a.thumbnailUrl;
-    var _b = React.useContext(SettingsContext), officeId = _b.officeId, bookingOptions = _b.bookingOptions, basePath = _b.basePath, options = _b.options, travellers = _b.travellers, summary = _b.summary, confirmation = _b.confirmation, error = _b.error, showSidebarDeposit = _b.showSidebarDeposit, includeFlights = _b.includeFlights, loaderComponent = _b.loaderComponent, skipPaymentWithAgent = _b.skipPaymentWithAgent, generatePaymentUrl = _b.generatePaymentUrl, tagIds = _b.tagIds, agentAdressId = _b.agentAdressId;
+    var _b = React.useContext(SettingsContext), officeId = _b.officeId, bookingOptions = _b.bookingOptions, basePath = _b.basePath, options = _b.options, travellers = _b.travellers, summary = _b.summary, confirmation = _b.confirmation, error = _b.error, showSidebarDeposit = _b.showSidebarDeposit, includeFlights = _b.includeFlights, loaderComponent = _b.loaderComponent, skipPaymentWithAgent = _b.skipPaymentWithAgent, generatePaymentUrl = _b.generatePaymentUrl, tagIds = _b.tagIds, agentAdressId = _b.agentAdressId, language = _b.language;
     var dispatch = useAppDispatch();
     var location = router.useLocation();
     var productAttributes = reactRedux.useSelector(selectProductAttributes);
@@ -9958,6 +10141,7 @@ var Booking = function (_a) {
         bookingNumber,
         packageDetails,
     ]);
+    var translations = getTranslations(language);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         ((productAttributes && bookingAttributes && packageDetails) ||
             bookingNumber) && (React__default["default"].createElement("div", { className: "booking" },