@qite/tide-booking-component 0.0.2-preview.73 → 0.0.2-preview.74

package/build/build-cjs/booking-wizard/features/booking/booking-slice.d.ts

@@ -27,6 +27,7 @@ export interface BookingState {
   isUnavailable?: boolean;
   tagIds?: number[];
   agentAdressId?: number;
+  remarks?: string;
 }
 export declare const fetchPackage: import("@reduxjs/toolkit").AsyncThunk<
   void,
@@ -112,6 +113,10 @@ export declare const setOfficeId: import("@reduxjs/toolkit").ActionCreatorWithPa
   setAgentAdressId: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<
     number | undefined,
     string
+  >,
+  setBookingRemarks: import("@reduxjs/toolkit").ActionCreatorWithPayload<
+    string,
+    string
   >;
 declare const _default: import("redux").Reducer<
   BookingState,

package/build/build-cjs/booking-wizard/features/booking/selectors.d.ts

@@ -87,6 +87,9 @@ export declare const selectBookingNumber: (
 export declare const selectBookingRooms: (
   state: RootState
 ) => Room[] | undefined;
+export declare const selectBookingRemarks: (
+  state: RootState
+) => string | undefined;
 export declare const selectCalculateDeposit: (state: RootState) => boolean;
 export declare const selectIsRetry: (state: RootState) => boolean;
 export declare const selectStartDate: (state: RootState) => string | undefined;

package/build/build-cjs/index.js

@@ -7247,6 +7247,9 @@ var selectBookingRooms = function (state) {
     ? void 0
     : _a.rooms;
 };
+var selectBookingRemarks = function (state) {
+  return state.booking.remarks;
+};
 var selectCalculateDeposit = function (state) {
   return state.booking.calculateDeposit;
 };
@@ -7607,6 +7610,7 @@ var fetchPackageDetails = toolkit.createAsyncThunk(
         bookingAttributes,
         agentId,
         rooms,
+        remarks,
         requestRooms,
         isAllotment,
         request;
@@ -7620,6 +7624,7 @@ var fetchPackageDetails = toolkit.createAsyncThunk(
             bookingAttributes = selectBookingAttributes(state);
             agentId = selectAgentId(state);
             rooms = selectBookingRooms(state);
+            remarks = selectBookingRemarks(state);
             if (lodash.isNil(productAttributes)) {
               throw Error("productAttributes could not be found");
             }
@@ -7669,6 +7674,7 @@ var fetchPackageDetails = toolkit.createAsyncThunk(
                     : [],
                 tourCode: bookingAttributes.tourCode,
                 rooms: requestRooms,
+                remarks: remarks,
               },
             };
             return [4 /*yield*/, packageApi.fetchDetails(request, signal)];
@@ -7754,6 +7760,9 @@ var bookingSlice = toolkit.createSlice({
     setAgentAdressId: function (state, action) {
       state.agentAdressId = action.payload;
     },
+    setBookingRemarks: function (state, action) {
+      state.remarks = action.payload;
+    },
   },
   extraReducers: function (builder) {
     builder.addCase(fetchPackageDetails.fulfilled, function (state, action) {
@@ -7831,7 +7840,8 @@ var setOfficeId = ((_a = bookingSlice.actions), _a.setOfficeId),
   setSkipPayment = _a.setSkipPayment,
   setGeneratePaymentUrl = _a.setGeneratePaymentUrl,
   setTagIds = _a.setTagIds,
-  setAgentAdressId = _a.setAgentAdressId;
+  setAgentAdressId = _a.setAgentAdressId,
+  setBookingRemarks = _a.setBookingRemarks;
 var bookingReducer = bookingSlice.reducer;
 
 var initialState = {
@@ -8061,6 +8071,7 @@ var SIDEBAR = {
   FLIGHT_DEPARTURE: "Vertrek",
   FLIGHT_ARRIVAL: "Aankomst",
   ON_REQUEST: "Op aanvraag",
+  CHANGES: "overstappen",
 };
 var TRAVELERS_FORM = {
   PERSONS: "Personen",
@@ -8120,6 +8131,7 @@ var SUMMARY = {
   VALIDATE_TEXT:
     "Je staat op het punt je boeking te bevestigen. Contoleer of alle gegevens correct zijn. Deze zijn definitief en niet meer aanpasbaar.",
   OPTIONS: "Opties",
+  REMARKS: "Opmerkingen",
 };
 var CONFIRMATION = {
   TITLE_TEXT1: "Je boeking met nummer ",
@@ -10487,9 +10499,18 @@ var SidebarFlight = function (_a) {
     React__default["default"].createElement(
       "div",
       { className: "pricing-summary__row" },
-      React__default["default"].createElement("div", {
-        className: "pricing-summary__property",
-      }),
+      React__default["default"].createElement(
+        "div",
+        { className: "pricing-summary__property" },
+        flight.flightMetaData.flightLines.length > 1 &&
+          React__default["default"].createElement(
+            "i",
+            null,
+            flight.flightMetaData.flightLines.length - 1,
+            "x ",
+            translations.SIDEBAR.CHANGES
+          )
+      ),
       React__default["default"].createElement(
         "div",
         { className: "pricing-summary__value" },
@@ -11423,6 +11444,9 @@ var Summary = function () {
   var _b = React.useState(settings.summary.checkboxes),
     checkboxes = _b[0],
     setCheckboxes = _b[1];
+  var _c = React.useState(""),
+    remarks = _c[0],
+    setRemarks = _c[1];
   var bookingQueryString = reactRedux.useSelector(selectBookingQueryString);
   var travelerFormValues = reactRedux.useSelector(selectTravelersFormValues);
   var packageDetails = reactRedux.useSelector(selectPackageDetails);
@@ -11533,6 +11557,10 @@ var Summary = function () {
     newCheckboxes[index].isSelected = !newCheckboxes[index].isSelected;
     setCheckboxes(newCheckboxes);
   };
+  var handleRemarksChange = function (text) {
+    dispatch(setBookingRemarks(text));
+    setRemarks(text);
+  };
   return React__default["default"].createElement(
     React__default["default"].Fragment,
     null,
@@ -11801,7 +11829,7 @@ var Summary = function () {
                 ) &&
                   (activeOption === null || activeOption === void 0
                     ? void 0
-                    : activeOption.groups.map(function (x) {
+                    : activeOption.groups.map(function (x, i) {
                         if (
                           !x.options.some(function (y) {
                             return y.isSelected;
@@ -11810,7 +11838,7 @@ var Summary = function () {
                           return;
                         return React__default["default"].createElement(
                           SummaryPerBookingOptionGroup,
-                          { group: x }
+                          { key: i, group: x }
                         );
                       })),
                 !lodash.isEmpty(
@@ -11846,10 +11874,11 @@ var Summary = function () {
                     .filter(function (x) {
                       return x.isSelected;
                     })
-                    .map(function (flight) {
+                    .map(function (flight, i) {
                       return React__default["default"].createElement(
                         SummaryFlight,
                         {
+                          key: i,
                           flight: flight,
                           header: translations.SIDEBAR.DEPARTURE_FLIGHT,
                         }
@@ -11862,10 +11891,11 @@ var Summary = function () {
                     .filter(function (x) {
                       return x.isSelected;
                     })
-                    .map(function (flight) {
+                    .map(function (flight, i) {
                       return React__default["default"].createElement(
                         SummaryFlight,
                         {
+                          key: i,
                           flight: flight,
                           header: translations.SIDEBAR.ARRIVAL_FLIGHT,
                         }
@@ -11976,6 +12006,42 @@ var Summary = function () {
               )
             )
           ),
+        React__default["default"].createElement(
+          "div",
+          { className: "form__region" },
+          React__default["default"].createElement(
+            "div",
+            { className: "form__row" },
+            React__default["default"].createElement(
+              "div",
+              { className: "form__group" },
+              React__default["default"].createElement(
+                "div",
+                { className: "form__region-header" },
+                React__default["default"].createElement(
+                  "h5",
+                  { className: "form__region-heading" },
+                  translations.SUMMARY.REMARKS
+                )
+              )
+            )
+          ),
+          React__default["default"].createElement(
+            "div",
+            { className: "form__row" },
+            React__default["default"].createElement(
+              "div",
+              { className: "form__group" },
+              React__default["default"].createElement("textarea", {
+                className: "form__input",
+                defaultValue: remarks,
+                onChange: function (e) {
+                  return handleRemarksChange(e.target.value);
+                },
+              })
+            )
+          )
+        ),
         React__default["default"].createElement(
           "div",
           { className: "form__region" },

package/build/build-esm/booking-wizard/features/booking/booking-slice.d.ts

@@ -27,6 +27,7 @@ export interface BookingState {
   isUnavailable?: boolean;
   tagIds?: number[];
   agentAdressId?: number;
+  remarks?: string;
 }
 export declare const fetchPackage: import("@reduxjs/toolkit").AsyncThunk<
   void,
@@ -112,6 +113,10 @@ export declare const setOfficeId: import("@reduxjs/toolkit").ActionCreatorWithPa
   setAgentAdressId: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<
     number | undefined,
     string
+  >,
+  setBookingRemarks: import("@reduxjs/toolkit").ActionCreatorWithPayload<
+    string,
+    string
   >;
 declare const _default: import("redux").Reducer<
   BookingState,

package/build/build-esm/booking-wizard/features/booking/selectors.d.ts

@@ -87,6 +87,9 @@ export declare const selectBookingNumber: (
 export declare const selectBookingRooms: (
   state: RootState
 ) => Room[] | undefined;
+export declare const selectBookingRemarks: (
+  state: RootState
+) => string | undefined;
 export declare const selectCalculateDeposit: (state: RootState) => boolean;
 export declare const selectIsRetry: (state: RootState) => boolean;
 export declare const selectStartDate: (state: RootState) => string | undefined;

package/build/build-esm/index.js

@@ -7250,6 +7250,9 @@ var selectBookingRooms = function (state) {
     ? void 0
     : _a.rooms;
 };
+var selectBookingRemarks = function (state) {
+  return state.booking.remarks;
+};
 var selectCalculateDeposit = function (state) {
   return state.booking.calculateDeposit;
 };
@@ -7605,6 +7608,7 @@ var fetchPackageDetails = createAsyncThunk("booking/details", function (_, _a) {
       bookingAttributes,
       agentId,
       rooms,
+      remarks,
       requestRooms,
       isAllotment,
       request;
@@ -7618,6 +7622,7 @@ var fetchPackageDetails = createAsyncThunk("booking/details", function (_, _a) {
           bookingAttributes = selectBookingAttributes(state);
           agentId = selectAgentId(state);
           rooms = selectBookingRooms(state);
+          remarks = selectBookingRemarks(state);
           if (isNil(productAttributes)) {
             throw Error("productAttributes could not be found");
           }
@@ -7666,6 +7671,7 @@ var fetchPackageDetails = createAsyncThunk("booking/details", function (_, _a) {
                   : [],
               tourCode: bookingAttributes.tourCode,
               rooms: requestRooms,
+              remarks: remarks,
             },
           };
           return [4 /*yield*/, packageApi.fetchDetails(request, signal)];
@@ -7750,6 +7756,9 @@ var bookingSlice = createSlice({
     setAgentAdressId: function (state, action) {
       state.agentAdressId = action.payload;
     },
+    setBookingRemarks: function (state, action) {
+      state.remarks = action.payload;
+    },
   },
   extraReducers: function (builder) {
     builder.addCase(fetchPackageDetails.fulfilled, function (state, action) {
@@ -7827,7 +7836,8 @@ var setOfficeId = ((_a = bookingSlice.actions), _a.setOfficeId),
   setSkipPayment = _a.setSkipPayment,
   setGeneratePaymentUrl = _a.setGeneratePaymentUrl,
   setTagIds = _a.setTagIds,
-  setAgentAdressId = _a.setAgentAdressId;
+  setAgentAdressId = _a.setAgentAdressId,
+  setBookingRemarks = _a.setBookingRemarks;
 var bookingReducer = bookingSlice.reducer;
 
 var initialState = {
@@ -8050,6 +8060,7 @@ var SIDEBAR = {
   FLIGHT_DEPARTURE: "Vertrek",
   FLIGHT_ARRIVAL: "Aankomst",
   ON_REQUEST: "Op aanvraag",
+  CHANGES: "overstappen",
 };
 var TRAVELERS_FORM = {
   PERSONS: "Personen",
@@ -8109,6 +8120,7 @@ var SUMMARY = {
   VALIDATE_TEXT:
     "Je staat op het punt je boeking te bevestigen. Contoleer of alle gegevens correct zijn. Deze zijn definitief en niet meer aanpasbaar.",
   OPTIONS: "Opties",
+  REMARKS: "Opmerkingen",
 };
 var CONFIRMATION = {
   TITLE_TEXT1: "Je boeking met nummer ",
@@ -10417,7 +10429,18 @@ var SidebarFlight = function (_a) {
     React.createElement(
       "div",
       { className: "pricing-summary__row" },
-      React.createElement("div", { className: "pricing-summary__property" }),
+      React.createElement(
+        "div",
+        { className: "pricing-summary__property" },
+        flight.flightMetaData.flightLines.length > 1 &&
+          React.createElement(
+            "i",
+            null,
+            flight.flightMetaData.flightLines.length - 1,
+            "x ",
+            translations.SIDEBAR.CHANGES
+          )
+      ),
       React.createElement(
         "div",
         { className: "pricing-summary__value" },
@@ -11312,6 +11335,9 @@ var Summary = function () {
   var _b = useState(settings.summary.checkboxes),
     checkboxes = _b[0],
     setCheckboxes = _b[1];
+  var _c = useState(""),
+    remarks = _c[0],
+    setRemarks = _c[1];
   var bookingQueryString = useSelector(selectBookingQueryString);
   var travelerFormValues = useSelector(selectTravelersFormValues);
   var packageDetails = useSelector(selectPackageDetails);
@@ -11420,6 +11446,10 @@ var Summary = function () {
     newCheckboxes[index].isSelected = !newCheckboxes[index].isSelected;
     setCheckboxes(newCheckboxes);
   };
+  var handleRemarksChange = function (text) {
+    dispatch(setBookingRemarks(text));
+    setRemarks(text);
+  };
   return React.createElement(
     React.Fragment,
     null,
@@ -11684,7 +11714,7 @@ var Summary = function () {
                 ) &&
                   (activeOption === null || activeOption === void 0
                     ? void 0
-                    : activeOption.groups.map(function (x) {
+                    : activeOption.groups.map(function (x, i) {
                         if (
                           !x.options.some(function (y) {
                             return y.isSelected;
@@ -11693,7 +11723,7 @@ var Summary = function () {
                           return;
                         return React.createElement(
                           SummaryPerBookingOptionGroup,
-                          { group: x }
+                          { key: i, group: x }
                         );
                       })),
                 !isEmpty(
@@ -11727,8 +11757,9 @@ var Summary = function () {
                     .filter(function (x) {
                       return x.isSelected;
                     })
-                    .map(function (flight) {
+                    .map(function (flight, i) {
                       return React.createElement(SummaryFlight, {
+                        key: i,
                         flight: flight,
                         header: translations.SIDEBAR.DEPARTURE_FLIGHT,
                       });
@@ -11740,8 +11771,9 @@ var Summary = function () {
                     .filter(function (x) {
                       return x.isSelected;
                     })
-                    .map(function (flight) {
+                    .map(function (flight, i) {
                       return React.createElement(SummaryFlight, {
+                        key: i,
                         flight: flight,
                         header: translations.SIDEBAR.ARRIVAL_FLIGHT,
                       });
@@ -11851,6 +11883,42 @@ var Summary = function () {
               )
             )
           ),
+        React.createElement(
+          "div",
+          { className: "form__region" },
+          React.createElement(
+            "div",
+            { className: "form__row" },
+            React.createElement(
+              "div",
+              { className: "form__group" },
+              React.createElement(
+                "div",
+                { className: "form__region-header" },
+                React.createElement(
+                  "h5",
+                  { className: "form__region-heading" },
+                  translations.SUMMARY.REMARKS
+                )
+              )
+            )
+          ),
+          React.createElement(
+            "div",
+            { className: "form__row" },
+            React.createElement(
+              "div",
+              { className: "form__group" },
+              React.createElement("textarea", {
+                className: "form__input",
+                defaultValue: remarks,
+                onChange: function (e) {
+                  return handleRemarksChange(e.target.value);
+                },
+              })
+            )
+          )
+        ),
         React.createElement(
           "div",
           { className: "form__region" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "0.0.2-preview.73",
+  "version": "0.0.2-preview.74",
   "description": "React BookingWizard component for Tide",
   "main": "build/build-cjs/index.js",
   "module": "build/build-esm/index.js",
@@ -66,6 +66,6 @@
     "uuid": "^8.3.2"
   },
   "dependencies": {
-    "@qite/tide-client": "1.0.95"
+    "@qite/tide-client": "1.0.96"
   }
 }

package/src/booking-wizard/features/booking/booking-slice.ts

@@ -5,6 +5,7 @@ import { RootState } from "../../store";
 import { isNil, range } from "lodash";
 import {
   selectBookingAttributes,
+  selectBookingRemarks,
   selectBookingRooms,
   selectOfficeId,
   selectProductAttributes,
@@ -44,6 +45,7 @@ export interface BookingState {
   isUnavailable?: boolean;
   tagIds?: number[];
   agentAdressId?: number;
+  remarks?: string;
 }
 
 const initialState: BookingState = {
@@ -92,6 +94,7 @@ const fetchPackageDetails = createAsyncThunk(
     const bookingAttributes = selectBookingAttributes(state);
     const agentId = selectAgentId(state);
     const rooms = selectBookingRooms(state);
+    const remarks = selectBookingRemarks(state);
 
     if (isNil(productAttributes)) {
       throw Error("productAttributes could not be found");
@@ -139,6 +142,7 @@ const fetchPackageDetails = createAsyncThunk(
         allotmentIds: bookingAttributes.allotmentIds ?? [],
         tourCode: bookingAttributes.tourCode,
         rooms: requestRooms,
+        remarks: remarks,
       } as BookingPackageDetailsRequest,
     } as BookingPackageRequest<BookingPackageDetailsRequest>;
 
@@ -225,6 +229,9 @@ const bookingSlice = createSlice({
     setAgentAdressId(state, action: PayloadAction<number | undefined>) {
       state.agentAdressId = action.payload;
     },
+    setBookingRemarks(state, action: PayloadAction<string>) {
+      state.remarks = action.payload;
+    },
   },
   extraReducers: (builder) => {
     builder.addCase(fetchPackageDetails.fulfilled, (state, action) => {
@@ -299,6 +306,7 @@ export const {
   setGeneratePaymentUrl,
   setTagIds,
   setAgentAdressId,
+  setBookingRemarks,
 } = bookingSlice.actions;
 
 export default bookingSlice.reducer;

package/src/booking-wizard/features/booking/selectors.ts

@@ -88,6 +88,8 @@ export const selectBookingNumber = (state: RootState) =>
 export const selectBookingRooms = (state: RootState) =>
   state.booking.bookingAttributes?.rooms;
 
+export const selectBookingRemarks = (state: RootState) => state.booking.remarks;
+
 export const selectCalculateDeposit = (state: RootState) =>
   state.booking.calculateDeposit;
 

package/src/booking-wizard/features/sidebar/sidebar-flight.tsx

@@ -1,58 +1,65 @@
-import { BookingPackageFlight } from "@qite/tide-client/build/types";
-import { first, last } from "lodash";
-import React from "react";
-import { getAirlines, getDateText, parseFlightLines } from "./sidebar-util";
-import translations from "../../translations/translations.json";
-
-interface SidebarFlightProps {
-  title: string;
-  flight: BookingPackageFlight;
-}
-
-const SidebarFlight: React.FC<SidebarFlightProps> = ({ title, flight }) => {
-  const flightLines = parseFlightLines(flight.flightMetaData);
-  const firstFlight = first(flightLines);
-  const lastFlight = last(flightLines);
-
-  return (
-    <div className="pricing-summary__group">
-      <h6 className="pricing-summary__title">{title}</h6>
-      <div className="pricing-summary__row">
-        <div className="pricing-summary__property">
-          {translations.SIDEBAR.FLIGHT_DEPARTURE}
-        </div>
-        <div className="pricing-summary__value">
-          {firstFlight?.departureAirportDescription} (
-          {firstFlight?.departureAirportIata})<br />
-          {getDateText(firstFlight?.departureDate)} {firstFlight?.departureTime}
-        </div>
-      </div>
-
-      <div className="pricing-summary__row">
-        <div className="pricing-summary__property">
-          {translations.SIDEBAR.FLIGHT_ARRIVAL}
-        </div>
-        <div className="pricing-summary__value">
-          {lastFlight?.arrivalAirportDescription} (
-          {lastFlight?.arrivalAirportIata})<br />
-          {getDateText(lastFlight?.arrivalDate)} {lastFlight?.arrivalTime}
-        </div>
-      </div>
-
-      <div className="pricing-summary__row">
-        <div className="pricing-summary__property"></div>
-        <div className="pricing-summary__value">{getAirlines(flightLines)}</div>
-      </div>
-      {flight.flightMetaData.luggageIncluded && (
-        <div className="pricing-summary__row">
-          <div className="pricing-summary__property"></div>
-          <div className="pricing-summary__value">
-            {translations.SIDEBAR.LUGGAGE_INCLUDED}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default SidebarFlight;
+import { BookingPackageFlight } from "@qite/tide-client/build/types";
+import { first, last } from "lodash";
+import React from "react";
+import { getAirlines, getDateText, parseFlightLines } from "./sidebar-util";
+import translations from "../../translations/translations.json";
+
+interface SidebarFlightProps {
+  title: string;
+  flight: BookingPackageFlight;
+}
+
+const SidebarFlight: React.FC<SidebarFlightProps> = ({ title, flight }) => {
+  const flightLines = parseFlightLines(flight.flightMetaData);
+  const firstFlight = first(flightLines);
+  const lastFlight = last(flightLines);
+
+  return (
+    <div className="pricing-summary__group">
+      <h6 className="pricing-summary__title">{title}</h6>
+      <div className="pricing-summary__row">
+        <div className="pricing-summary__property">
+          {translations.SIDEBAR.FLIGHT_DEPARTURE}
+        </div>
+        <div className="pricing-summary__value">
+          {firstFlight?.departureAirportDescription} (
+          {firstFlight?.departureAirportIata})<br />
+          {getDateText(firstFlight?.departureDate)} {firstFlight?.departureTime}
+        </div>
+      </div>
+
+      <div className="pricing-summary__row">
+        <div className="pricing-summary__property">
+          {translations.SIDEBAR.FLIGHT_ARRIVAL}
+        </div>
+        <div className="pricing-summary__value">
+          {lastFlight?.arrivalAirportDescription} (
+          {lastFlight?.arrivalAirportIata})<br />
+          {getDateText(lastFlight?.arrivalDate)} {lastFlight?.arrivalTime}
+        </div>
+      </div>
+
+      <div className="pricing-summary__row">
+        <div className="pricing-summary__property">
+          {flight.flightMetaData.flightLines.length > 1 && (
+            <i>
+              {flight.flightMetaData.flightLines.length - 1}{"x "}
+              {translations.SIDEBAR.CHANGES}
+            </i>
+          )}
+        </div>
+        <div className="pricing-summary__value">{getAirlines(flightLines)}</div>
+      </div>
+      {flight.flightMetaData.luggageIncluded && (
+        <div className="pricing-summary__row">
+          <div className="pricing-summary__property"></div>
+          <div className="pricing-summary__value">
+            {translations.SIDEBAR.LUGGAGE_INCLUDED}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SidebarFlight;

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

@@ -5,7 +5,7 @@ import {
   selectTravelersFormValues,
 } from "../travelers-form/travelers-form-slice";
 import { selectUserValidated, setUserValidated } from "./summary-slice";
-import { setBookingNumber } from "../booking/booking-slice";
+import { setBookingNumber, setBookingRemarks } from "../booking/booking-slice";
 import { useSelector } from "react-redux";
 import { useLocation } from "@reach/router";
 import Icon from "../../components/icon";
@@ -47,6 +47,7 @@ const Summary: React.FC<SummaryProps> = () => {
   const [checkboxes, setCheckboxes] = useState<
     SummaryCheckbox[] | undefined | null
   >(settings.summary.checkboxes);
+  const [remarks, setRemarks] = useState<string>("");
 
   const bookingQueryString = useSelector(selectBookingQueryString);
   const travelerFormValues = useSelector(selectTravelersFormValues);
@@ -140,6 +141,12 @@ const Summary: React.FC<SummaryProps> = () => {
     setCheckboxes(newCheckboxes);
   };
 
+  const handleRemarksChange = (text: string) => {
+    dispatch(setBookingRemarks(text));
+
+    setRemarks(text);
+  };
+
   return (
     <>
       {isSubmitting && settings.loaderComponent}
@@ -259,10 +266,10 @@ const Summary: React.FC<SummaryProps> = () => {
                     </p>
                   </li>
                   {!isEmpty(activeOption?.groups) &&
-                    activeOption?.groups.map((x) => {
+                    activeOption?.groups.map((x, i) => {
                       if (!x.options.some((y) => y.isSelected)) return;
 
-                      return <SummaryBookingOption group={x} />;
+                      return <SummaryBookingOption key={i} group={x} />;
                     })}
                   {!isEmpty(activeOption?.optionUnits) &&
                     activeOption?.optionUnits.map((x) => (
@@ -275,8 +282,9 @@ const Summary: React.FC<SummaryProps> = () => {
                   {packageDetails?.outwardFlights &&
                     packageDetails.outwardFlights
                       .filter((x) => x.isSelected)
-                      .map((flight) => (
+                      .map((flight, i) => (
                         <SummaryFlight
+                          key={i}
                           flight={flight}
                           header={translations.SIDEBAR.DEPARTURE_FLIGHT}
                         />
@@ -284,8 +292,9 @@ const Summary: React.FC<SummaryProps> = () => {
                   {packageDetails?.returnFlights &&
                     packageDetails.returnFlights
                       .filter((x) => x.isSelected)
-                      .map((flight) => (
+                      .map((flight, i) => (
                         <SummaryFlight
+                          key={i}
                           flight={flight}
                           header={translations.SIDEBAR.ARRIVAL_FLIGHT}
                         />
@@ -354,6 +363,27 @@ const Summary: React.FC<SummaryProps> = () => {
             </div>
           )}
 
+          <div className="form__region">
+            <div className="form__row">
+              <div className="form__group">
+                <div className="form__region-header">
+                  <h5 className="form__region-heading">
+                    {translations.SUMMARY.REMARKS}
+                  </h5>
+                </div>
+              </div>
+            </div>
+            <div className="form__row">
+              <div className="form__group">
+                <textarea
+                  className="form__input"
+                  defaultValue={remarks}
+                  onChange={(e) => handleRemarksChange(e.target.value)}
+                ></textarea>
+              </div>
+            </div>
+          </div>
+
           <div className="form__region">
             <div className="form__row">
               <div className="form__group">

package/src/booking-wizard/translations/translations.json

@@ -45,7 +45,8 @@
     "ARRIVAL_FLIGHT": "Vlucht terugreis",
     "FLIGHT_DEPARTURE": "Vertrek",
     "FLIGHT_ARRIVAL": "Aankomst",
-    "ON_REQUEST": "Op aanvraag"
+    "ON_REQUEST": "Op aanvraag",
+    "CHANGES": "overstappen"
   },
   "TRAVELERS_FORM": {
     "PERSONS": "Personen",
@@ -102,7 +103,8 @@
     "NOTIFICATIONS_TITLE": "Aandacht",
     "VALIDATE_TITLE": "Controleer je gegevens",
     "VALIDATE_TEXT": "Je staat op het punt je boeking te bevestigen. Contoleer of alle gegevens correct zijn. Deze zijn definitief en niet meer aanpasbaar.",
-    "OPTIONS": "Opties"
+    "OPTIONS": "Opties",
+    "REMARKS": "Opmerkingen"
   },
   "CONFIRMATION": {
     "TITLE_TEXT1": "Je boeking met nummer ",