@qite/tide-booking-component 1.4.126 → 1.4.128

package/build/build-esm/index.js

@@ -17759,6 +17759,7 @@ const selectCalculateDeposit = (state) => state.booking.calculateDeposit;
 const selectShowCommission = (state) => state.booking.showCommission;
 const selectIsRetry = (state) => state.booking.isRetry;
 const selectStartDate = (state) => state.booking.package?.options.find((x) => x.isSelected)?.fromDate;
+const selectEndDate = (state) => state.booking.package?.options.find((x) => x.isSelected)?.toDate;
 const selectAgents = (state) => state.booking.agents;
 const selectCountries = (state) => state.booking.countries;
 const selectProductCode = (state) => state.booking.productAttributes?.productCode;
@@ -21324,7 +21325,7 @@ const SidebarFlight = ({ title, flightMetaData, translations }) => {
             React__default.createElement("div", { className: "pricing-summary__value" }, translations.SIDEBAR.LUGGAGE_INCLUDED)))));
 };
 
-const SharedSidebar = ({ productName, thumbnailUrl, isLoading, translations, headerComponent, travelerRooms, startDateText, endDateText, loaderComponent, departureFlightMetaData, returnFlightMetaData, accommodations, packagingAccommodations, isOnRequest, includedServiceTypes, basePrice, commission, totalPrice, includedCosts, extraCosts, deposit, basePricePerPaxType, seperateExtraPricePerPaxType, isUnavailable, agent, footerComponent }) => {
+const SharedSidebar = ({ productName, thumbnailUrl, isLoading, translations, headerComponent, travelerRooms, startDateText, endDateText, loaderComponent, departureFlightMetaData, returnFlightMetaData, accommodations, packagingAccommodations, isOnRequest, includedServiceTypes, basePrice, commission, showCommission, totalPrice, includedCosts, extraCosts, deposit, basePricePerPaxType, seperateExtraPricePerPaxType, isUnavailable, agent, footerComponent, currencyCode = 'EUR' }) => {
     if (!translations)
         return null;
     const [active, setActive] = useState(false);
@@ -21335,8 +21336,6 @@ const SharedSidebar = ({ productName, thumbnailUrl, isLoading, translations, hea
     const canShowPriceBreakdownSection = Boolean(basePrice && basePrice > 0) || !isEmpty$1(includedCosts) || !isEmpty$1(extraCosts);
     const canShowTotalPriceSection = Boolean(totalPrice && totalPrice > 0);
     const remainingAmount = Number(((totalPrice ?? 0) - (deposit ?? 0)).toFixed(2));
-    // TODO: Determine currency code based on the data, for now default to EUR
-    let currencyCode = 'EUR';
     return (React__default.createElement("div", { className: buildClassName(['booking__sidebar', active && 'booking__sidebar--active']) },
         headerComponent,
         React__default.createElement("div", { className: "booking__sidebar-frame" },
@@ -21466,7 +21465,7 @@ const SharedSidebar = ({ productName, thumbnailUrl, isLoading, translations, hea
                                     translations.SIDEBAR.DEPOSIT_TEXT4,
                                     React__default.createElement("strong", null, translations.SIDEBAR.DEPOSIT_TEXT5),
                                     translations.SIDEBAR.DEPOSIT_TEXT6))))) : (React__default.createElement("div", { className: "pricing-summary__group" },
-                        agent && (React__default.createElement("div", { className: "pricing-summary__row pricing-summary__row--total-price" },
+                        (agent && showCommission) && (React__default.createElement("div", { className: "pricing-summary__row pricing-summary__row--total-price" },
                             React__default.createElement("div", { className: "pricing-summary__property" },
                                 React__default.createElement("h6", { className: "pricing-summary__title" }, translations.SIDEBAR.COMMISSION)),
                             React__default.createElement("div", { className: "pricing-summary__value" },
@@ -21482,7 +21481,7 @@ const SharedSidebar = ({ productName, thumbnailUrl, isLoading, translations, hea
 };
 
 const SidebarContainer = ({ productName, thumbnailUrl }) => {
-    const { sidebarHeaderComponent, sidebarFooterComponent, loaderComponent, showPricesPerPaxType, maxChildAge } = useContext(SettingsContext);
+    const { sidebarHeaderComponent, sidebarFooterComponent, loaderComponent, showPricesPerPaxType, maxChildAge, showCommission } = useContext(SettingsContext);
     const bookingAttributes = useSelector(selectBookingAttributes);
     const selectFormRooms = useMemo(() => makeSelectFormRooms(maxChildAge), [maxChildAge]);
     const rooms = useSelector(selectFormRooms);
@@ -21499,7 +21498,7 @@ const SidebarContainer = ({ productName, thumbnailUrl }) => {
     const isUnavailable = useSelector(selectIsUnavailable) || false;
     const isLoading = isFetchingProductOptions || isFetchingPriceDetails;
     const agent = useSelector(selectAgentAdressId);
-    return (React__default.createElement(SharedSidebar, { productName: productName, thumbnailUrl: thumbnailUrl, isLoading: isLoading, startDateText: getDateText(bookingAttributes?.startDate), endDateText: bookingAttributes?.startDate !== bookingAttributes?.endDate ? getDateText(bookingAttributes?.endDate) : undefined, travelerRooms: travelerRooms, departureFlightMetaData: departureFlightMetaData, returnFlightMetaData: returnFlightMetaData, basePrice: useSelector(selectBasePrice), commission: useSelector(selectCommission), totalPrice: useSelector(selectTotalPrice), includedCosts: useSelector(selectSeparatePackagePriceDetails$1), extraCosts: useSelector(selectSeparateExtraPriceDetails), accommodations: accommodations, includedServiceTypes: includedServiceTypes, deposit: useSelector(selectDeposit), isOnRequest: useSelector(selectIsOnRequest), headerComponent: sidebarHeaderComponent ?? undefined, footerComponent: sidebarFooterComponent ?? undefined, loaderComponent: loaderComponent ?? undefined, isUnavailable: isUnavailable, basePricePerPaxType: showPricesPerPaxType ? useSelector(selectBasePricePerPaxType) : undefined, seperateExtraPricePerPaxType: showPricesPerPaxType ? useSelector(selectSeparateExtraPriceDetailsPerPaxType) : undefined, translations: translations, agent: agent }));
+    return (React__default.createElement(SharedSidebar, { productName: productName, thumbnailUrl: thumbnailUrl, isLoading: isLoading, startDateText: getDateText(bookingAttributes?.startDate), endDateText: bookingAttributes?.startDate !== bookingAttributes?.endDate ? getDateText(bookingAttributes?.endDate) : undefined, travelerRooms: travelerRooms, departureFlightMetaData: departureFlightMetaData, returnFlightMetaData: returnFlightMetaData, basePrice: useSelector(selectBasePrice), commission: useSelector(selectCommission), showCommission: showCommission, totalPrice: useSelector(selectTotalPrice), includedCosts: useSelector(selectSeparatePackagePriceDetails$1), extraCosts: useSelector(selectSeparateExtraPriceDetails), accommodations: accommodations, includedServiceTypes: includedServiceTypes, deposit: useSelector(selectDeposit), isOnRequest: useSelector(selectIsOnRequest), headerComponent: sidebarHeaderComponent ?? undefined, footerComponent: sidebarFooterComponent ?? undefined, loaderComponent: loaderComponent ?? undefined, isUnavailable: isUnavailable, basePricePerPaxType: showPricesPerPaxType ? useSelector(selectBasePricePerPaxType) : undefined, seperateExtraPricePerPaxType: showPricesPerPaxType ? useSelector(selectSeparateExtraPriceDetailsPerPaxType) : undefined, translations: translations, agent: agent, currencyCode: useSelector(selectCurrencyCode) }));
 };
 
 const SummaryPerPaxOptionGroup = ({ group }) => {
@@ -21681,7 +21680,7 @@ const Summary = () => {
                 }
                 else {
                     const location = window.location;
-                    bookRequest.payload.redirectUrl = `${location.protocol}//${location.host}${settings.basePath}?${bookingQueryString}`;
+                    bookRequest.payload.redirectUrl = `${location.protocol}//${location.host}${settings.basePath ?? location.pathname}?${bookingQueryString}`;
                 }
             }
         }
@@ -21997,8 +21996,9 @@ const validateForm$1 = (values, agentRequired, bookingType, translations, formFi
             if (isEmpty$1(adult.birthDate)) {
                 set(errors, `rooms[${rIndex}].adults[${index}].birthDate`, formatTravelerField(rIndex + 1, index + 1, translations.TRAVELERS_FORM.BIRTHDATE));
             }
-            else if (values.startDate) {
-                const age = getAge(adult.birthDate, values.startDate);
+            else if (values.endDate) {
+                // If you are younger than the maxChildAge at the end of the trip, you are considered a child, so we check the endDate here instead of the startDate
+                const age = getAge(adult.birthDate, values.endDate);
                 if (age <= maxChildAge) {
                     set(errors, `rooms[${rIndex}].adults[${index}].birthDate`, formatTravelerIsNoAdult(rIndex + 1, index + 1));
                 }
@@ -22019,8 +22019,9 @@ const validateForm$1 = (values, agentRequired, bookingType, translations, formFi
             if (isEmpty$1(child.birthDate)) {
                 set(errors, `rooms[${rIndex}].children[${index}].birthDate`, formatTravelerField(rIndex + 1, r.adults.length + index + 1, translations.TRAVELERS_FORM.BIRTHDATE));
             }
-            else if (values.startDate) {
-                const age = getAge(child.birthDate, values.startDate);
+            else if (values.endDate) {
+                // You need to be under the maxChildAge until the end of the trip, so we check the endDate here instead of the startDate
+                const age = getAge(child.birthDate, values.endDate);
                 if (age > maxChildAge) {
                     set(errors, `rooms[${rIndex}].children[${index}].birthDate`, formatTravelerIsNoChild(rIndex + 1, r.adults.length + index + 1));
                 }
@@ -22244,10 +22245,11 @@ function createTraveler(traveler, followNumber, personTranslation, isCompact) {
         gender: ''
     };
 }
-function createInitialValuesFromRooms(formRooms, startDate, agentAdressId, personTranslation, isCompact) {
+function createInitialValuesFromRooms(formRooms, startDate, endDate, agentAdressId, personTranslation, isCompact) {
     const followNumber = { number: 1 };
     const initialValues = {
         startDate,
+        endDate,
         rooms: formRooms.map((room) => ({
             adults: room.adults.map((traveler) => createTraveler(traveler, followNumber, personTranslation, isCompact)),
             children: room.children.map((traveler) => createTraveler(traveler, followNumber, personTranslation, isCompact))
@@ -22297,7 +22299,7 @@ function createInitialValuesFromEditablePackagingEntry(editablePackagingEntry, a
             })
         };
     });
-    const values = createInitialValuesFromRooms(rooms.map((room) => ({ adults: room.adults, children: room.children })), editablePackagingEntry?.lines?.[0]?.from, agentAdressId);
+    const values = createInitialValuesFromRooms(rooms.map((room) => ({ adults: room.adults, children: room.children })), first(editablePackagingEntry?.lines)?.from, last(editablePackagingEntry?.lines)?.to, agentAdressId);
     values.rooms = rooms;
     values.mainBookerId = pax.find((x) => x.isMainBooker)?.id ?? rooms[0]?.adults?.[0]?.id ?? -1;
     const address = editablePackagingEntry?.address;
@@ -22575,6 +22577,7 @@ const TravelersForm = () => {
     const navigate = settings.skipRouter ? () => { } : useNavigate();
     const bookingQueryString = useSelector(selectBookingQueryString);
     const startDate = useSelector(selectStartDate);
+    const endDate = useSelector(selectEndDate);
     const selectFormRooms = useMemo(() => makeSelectFormRooms(settings.maxChildAge), [settings.maxChildAge]);
     const formRooms = useSelector(selectFormRooms);
     const bookingType = useSelector(selectBookingType);
@@ -22591,7 +22594,7 @@ const TravelersForm = () => {
     const useCompactForm = !!settings.travellers.compactForm && !!settings.agentAdressId;
     const showAllCountries = !!settings.travellers.showAllCountries;
     const initialValues = useSelector(selectTravelersFormValues) ??
-        createInitialValuesFromRooms(formRooms, startDate, agentAdressId, translations.TRAVELERS_FORM.PERSON, useCompactForm);
+        createInitialValuesFromRooms(formRooms, startDate, endDate, agentAdressId, translations.TRAVELERS_FORM.PERSON, useCompactForm);
     const [showAgentSelection, setShowAgentSelection] = useState(!settings.agentAdressId && !settings.hideAgentSelection);
     const formik = useFormik({
         initialValues,
@@ -22608,7 +22611,12 @@ const TravelersForm = () => {
                     navigate(`${!settings.skipBasePathInRouting ? settings.basePath : ''}${settings.summary.pathSuffix}?${bookingQueryString}`);
                 return;
             }
-            dispatch(fetchPackage());
+            if (travelersFirstStep) {
+                dispatch(fetchPackage());
+            }
+            else {
+                dispatch(fetchPriceDetails());
+            }
             if (settings.skipRouter)
                 dispatch(setCurrentStep$1(travelersFirstStep ? FLIGHT_OPTIONS_FORM_STEP : SUMMARY_STEP));
             else
@@ -22619,6 +22627,8 @@ const TravelersForm = () => {
         dispatch(fetchPriceDetails());
     }, [dispatch]);
     useEffect(() => {
+        if (!travelersFirstStep)
+            return;
         if (!bookingAttributes?.rooms?.length)
             return;
         if (!hasMounted) {
@@ -22643,7 +22653,7 @@ const TravelersForm = () => {
             }
         };
         fetchAll();
-    }, [bookingAttributes?.rooms, dispatch, hasMounted]);
+    }, [bookingAttributes?.rooms, dispatch, hasMounted, travelersFirstStep]);
     const roomsQuery = useMemo(() => formik.values.rooms
         .map((room) => {
         const adults = room.adults ? room.adults.length : 0;
@@ -31009,10 +31019,10 @@ const findAccommodationForDay = (nodes, currentDay) => {
 };
 const buildItineraryHtml = (itinerary, translations) => {
     if (!itinerary) {
-        return `
-      <div class="itinerary-shell">
-        <div class="itinerary-empty">Geen reisroute beschikbaar.</div>
-      </div>
+        return `
+      <div class="itinerary-shell">
+        <div class="itinerary-empty">Geen reisroute beschikbaar.</div>
+      </div>
     `;
     }
     const allNodes = itinerary.nodes ?? [];
@@ -31026,66 +31036,66 @@ const buildItineraryHtml = (itinerary, translations) => {
         const hasAccommodationInCurrentNode = uniqueItems.some(isAccommodationItem);
         const activeAccommodation = findAccommodationForDay(allNodes, startDay);
         const accommodationBanner = !hasAccommodationInCurrentNode && activeAccommodation
-            ? `
-            <div class="itinerary-node__accommodation-banner">
-              Accommodatie voor deze dag: <strong>${escapeHtml(getAccommodationName(activeAccommodation))}</strong>
-            </div>
+            ? `
+            <div class="itinerary-node__accommodation-banner">
+              Accommodatie voor deze dag: <strong>${escapeHtml(getAccommodationName(activeAccommodation))}</strong>
+            </div>
           `
             : '';
         const itemsHtml = hasItems
             ? uniqueItems
-                .map((item) => `
-                <article class="itinerary-item" data-template="${escapeHtml(item.templateName)}">
-                  ${item.contents ?? ''}
-                </article>
+                .map((item) => `
+                <article class="itinerary-item" data-template="${escapeHtml(item.templateName)}">
+                  ${item.contents ?? ''}
+                </article>
               `)
                 .join('')
             : `<div class="itinerary-node__empty">${translations.ITINERARY.NO_ITEMS}</div>`;
-        return `
-        <section class="itinerary-node">
-          <header class="itinerary-node__header">
-            
-          <div class="itinerary-node__day">
-            <p class="itinerary-node__day-day">${day}</p>
-            <p class="itinerary-node__day-month">${month}</p>
-          </div>
-
-            <div>
-              <h2 class="itinerary-node__title">${escapeHtml(node.title)}</h2>
-            </div>
-          </header>
-
-          <div class="itinerary-node__content">
-            ${accommodationBanner}
-            ${itemsHtml}
-          </div>
-        </section>
+        return `
+        <section class="itinerary-node">
+          <header class="itinerary-node__header">
+            
+          <div class="itinerary-node__day">
+            <p class="itinerary-node__day-day">${day}</p>
+            <p class="itinerary-node__day-month">${month}</p>
+          </div>
+
+            <div>
+              <h2 class="itinerary-node__title">${escapeHtml(node.title)}</h2>
+            </div>
+          </header>
+
+          <div class="itinerary-node__content">
+            ${accommodationBanner}
+            ${itemsHtml}
+          </div>
+        </section>
       `;
     })
         .join('');
     const defaultItemsHtml = itinerary.defaultItems && itinerary.defaultItems.length > 0
-        ? `
-        <section class="itinerary-default-items">
-          <h2 class="itinerary-default-items__title">Algemene info</h2>
+        ? `
+        <section class="itinerary-default-items">
+          <h2 class="itinerary-default-items__title">Algemene info</h2>
           ${getUniqueItems(itinerary.defaultItems)
-            .map((item) => `
-                <article class="itinerary-item" data-template="${escapeHtml(item.templateName)}">
-                  ${item.contents ?? ''}
-                </article>
+            .map((item) => `
+                <article class="itinerary-item" data-template="${escapeHtml(item.templateName)}">
+                  ${item.contents ?? ''}
+                </article>
               `)
-            .join('')}
-        </section>
+            .join('')}
+        </section>
       `
         : '';
-    return `
-    <div class="itinerary-shell">
-      ${itinerary.title ? `<header class="itinerary-shell__header"><h1 class="itinerary-shell__title">${escapeHtml(itinerary.title)}</h1></header>` : ''}
-
-      <div class="itinerary-shell__content">
-        ${nodesHtml}
-        ${defaultItemsHtml}
-      </div>
-    </div>
+    return `
+    <div class="itinerary-shell">
+      ${itinerary.title ? `<header class="itinerary-shell__header"><h1 class="itinerary-shell__title">${escapeHtml(itinerary.title)}</h1></header>` : ''}
+
+      <div class="itinerary-shell__content">
+        ${nodesHtml}
+        ${defaultItemsHtml}
+      </div>
+    </div>
   `;
 };
 const FullItinerary = ({ isLoading }) => {
@@ -31105,141 +31115,141 @@ const FullItinerary = ({ isLoading }) => {
         }
         const shadowRoot = host.shadowRoot ?? host.attachShadow({ mode: 'open' });
         shadowRootRef.current = shadowRoot;
-        shadowRoot.innerHTML = `
-      <style>
-        :host {
-          all: initial;
-          display: block;
-          width: 100%;
-        }
-
-        *,
-        *::before,
-        *::after {
-          box-sizing: border-box;
-        }
-
-        .itinerary-shell {
-          width: 100%;
-          margin: 0 auto;
-          font-family: 'Outfit', sans-serif;
-          color: #222;
-        }
-
-        .itinerary-shell__header {
-          margin-bottom: 24px;
-        }
-
-        .itinerary-shell__title {
-          margin: 0;
-          font-size: 32px;
-          line-height: 1.2;
-        }
-
-        .itinerary-shell__content {
-          display: grid;
-          gap: 24px;
-        }
-
-        .itinerary-node {
-          border: 1px solid #e5e7eb;
-          border-radius: 16px;
-          overflow: hidden;
-          background: #fff;
-          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
-        }
-
-        .itinerary-node__header {
-          display: flex;
-          gap: 16px;
-          align-items: center;
-          border-bottom: 1px solid #eef0f2;
-          background: #fafafa;
-        }
-
-        .itinerary-node__day {
-          flex: 50px 0 0;
-          display: flex;
-          flex-flow: column;
-          align-items: center;
-          justify-content: center;
-          background: #1f9470;
-          color: white;
-          border: 1.5px solid var(--tide-booking-color-secondary);
-        }
-
-        .itinerary-node__day-month {
-          margin: 0px;
-        }
-
-        .itinerary-node__day-day {
-          margin: 0px;
-          font-weight: var(--tide-booking-search-results-label-date-month-font-weight);
-          color: var(--tide-booking-search-results-label-date-month-color);
-          font-size: 24px;
-        }
-
-        .itinerary-node__title {
-          margin: 0;
-          font-size: 22px;
-          line-height: 1.25;
-        }
-
-        .itinerary-node__content {
-          display: grid;
-          gap: 20px;
-          padding: 20px;
-        }
-
-        .itinerary-node__accommodation-banner {
-          padding: 12px 16px;
-          border: 1px solid #dbeafe;
-          border-radius: 12px;
-          background: #eff6ff;
-          color: #1e3a8a;
-          font-size: 14px;
-          line-height: 1.4;
-        }
-
-        .itinerary-item {
-          display: block;
-          border-radius: 12px;
-          overflow: hidden;
-          background: #fff;
-        }
-
-        .itinerary-node__empty,
-        .itinerary-empty {
-          padding: 20px;
-          border: 1px dashed #d1d5db;
-          border-radius: 12px;
-          color: #6b7280;
-          background: #fafafa;
-        }
-
-        .itinerary-default-items {
-          border: 1px solid #e5e7eb;
-          border-radius: 16px;
-          padding: 20px;
-          background: #fff;
-          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
-        }
-
-        .itinerary-default-items__title {
-          margin: 0 0 16px;
-          font-size: 22px;
-        }
-
-        @media (max-width: 768px) {
-          .itinerary-shell {
-            padding: 16px;
-          }
-        }
-
-        ${itinerary?.styleSheetBody ?? ''}
-      </style>
-
-      ${html}
+        shadowRoot.innerHTML = `
+      <style>
+        :host {
+          all: initial;
+          display: block;
+          width: 100%;
+        }
+
+        *,
+        *::before,
+        *::after {
+          box-sizing: border-box;
+        }
+
+        .itinerary-shell {
+          width: 100%;
+          margin: 0 auto;
+          font-family: 'Outfit', sans-serif;
+          color: #222;
+        }
+
+        .itinerary-shell__header {
+          margin-bottom: 24px;
+        }
+
+        .itinerary-shell__title {
+          margin: 0;
+          font-size: 32px;
+          line-height: 1.2;
+        }
+
+        .itinerary-shell__content {
+          display: grid;
+          gap: 24px;
+        }
+
+        .itinerary-node {
+          border: 1px solid #e5e7eb;
+          border-radius: 16px;
+          overflow: hidden;
+          background: #fff;
+          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
+        }
+
+        .itinerary-node__header {
+          display: flex;
+          gap: 16px;
+          align-items: center;
+          border-bottom: 1px solid #eef0f2;
+          background: #fafafa;
+        }
+
+        .itinerary-node__day {
+          flex: 50px 0 0;
+          display: flex;
+          flex-flow: column;
+          align-items: center;
+          justify-content: center;
+          background: #1f9470;
+          color: white;
+          border: 1.5px solid var(--tide-booking-color-secondary);
+        }
+
+        .itinerary-node__day-month {
+          margin: 0px;
+        }
+
+        .itinerary-node__day-day {
+          margin: 0px;
+          font-weight: var(--tide-booking-search-results-label-date-month-font-weight);
+          color: var(--tide-booking-search-results-label-date-month-color);
+          font-size: 24px;
+        }
+
+        .itinerary-node__title {
+          margin: 0;
+          font-size: 22px;
+          line-height: 1.25;
+        }
+
+        .itinerary-node__content {
+          display: grid;
+          gap: 20px;
+          padding: 20px;
+        }
+
+        .itinerary-node__accommodation-banner {
+          padding: 12px 16px;
+          border: 1px solid #dbeafe;
+          border-radius: 12px;
+          background: #eff6ff;
+          color: #1e3a8a;
+          font-size: 14px;
+          line-height: 1.4;
+        }
+
+        .itinerary-item {
+          display: block;
+          border-radius: 12px;
+          overflow: hidden;
+          background: #fff;
+        }
+
+        .itinerary-node__empty,
+        .itinerary-empty {
+          padding: 20px;
+          border: 1px dashed #d1d5db;
+          border-radius: 12px;
+          color: #6b7280;
+          background: #fafafa;
+        }
+
+        .itinerary-default-items {
+          border: 1px solid #e5e7eb;
+          border-radius: 16px;
+          padding: 20px;
+          background: #fff;
+          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
+        }
+
+        .itinerary-default-items__title {
+          margin: 0 0 16px;
+          font-size: 22px;
+        }
+
+        @media (max-width: 768px) {
+          .itinerary-shell {
+            padding: 16px;
+          }
+        }
+
+        ${itinerary?.styleSheetBody ?? ''}
+      </style>
+
+      ${html}
     `;
     }, [html, itinerary?.styleSheetBody, isLoading]);
     return (React__default.createElement(React__default.Fragment, null,
@@ -31343,7 +31353,7 @@ const DayByDayExcursions = () => {
     })));
 };
 
-const renderEditablePackagingEntrySummaryOptions = (editablePackagingEntry, priceDetails, translations) => {
+const renderEditablePackagingEntrySummaryOptions = (editablePackagingEntry, priceDetails, translations, currencyCode) => {
     const priceDetailsByProduct = groupBy(priceDetails?.details ?? [], (detail) => `${detail.productCode}|${detail.accommodationCode}`);
     return (editablePackagingEntry?.lines ?? []).map((line) => {
         const groupedPriceDetails = priceDetailsByProduct[`${line.productCode}|${line.accommodationCode}`] ?? [];
@@ -31367,7 +31377,7 @@ const renderEditablePackagingEntrySummaryOptions = (editablePackagingEntry, pric
                     visiblePriceDetails.map((detail, index) => (React__default.createElement("li", { className: "list__item", key: `${line.guid}-price-${index}` },
                         detail.priceDescription,
                         ": ",
-                        detail.total?.toLocaleString(undefined, { style: 'currency', currency: 'EUR' }))))),
+                        detail.total !== undefined && detail.total !== null ? formatPrice$3(detail.total, currencyCode ?? 'EUR') : '')))),
             React__default.createElement("p", null,
                 "(",
                 line.from === line.to ? (getDateText(line.from)) : (React__default.createElement(React__default.Fragment, null,
@@ -31487,7 +31497,7 @@ const WLSidebar = ({ activeSearchSeed, packagingAccoResult }) => {
     const separateExtraPriceDetails = priceDetails?.details.filter((pd) => !pd.isInPackage && pd.isSeparate) ?? [];
     const totalPrice = sum([basePrice, ...separateExtraPriceDetails.map((priceDetail) => priceDetail.price * priceDetail.amount)]);
     const includedCosts = selectSeparatePackagePriceDetails(priceDetails?.details.filter((pd) => pd.isInPackage) ?? []);
-    return (React__default.createElement(SharedSidebar, { productName: location ?? '', thumbnailUrl: accoImage ?? context.destinationImage?.url, translations: translations, travelerRooms: travelerRooms, startDateText: first(sortedLines)?.from && formatDate(new Date(first(sortedLines).from)), endDateText: last(sortedLines)?.to && formatDate(new Date(last(sortedLines).to)), isLoading: !editablePackagingEntry || !priceDetails, loaderComponent: React__default.createElement(Spinner, null), departureFlightMetaData: outboundFlightMetaData, returnFlightMetaData: returnFlightMetaData, includedServiceTypes: editablePackagingEntry.lines.map((line) => line.serviceType), packagingAccommodations: accommodationLines, basePrice: basePrice, commission: priceDetails?.commission, totalPrice: totalPrice, includedCosts: includedCosts, extraCosts: separateExtraPriceDetails, deposit: priceDetails?.deposit, isUnavailable: false, agent: context.agentId }));
+    return (React__default.createElement(SharedSidebar, { productName: location ?? '', thumbnailUrl: accoImage ?? context.destinationImage?.url, translations: translations, travelerRooms: travelerRooms, startDateText: first(sortedLines)?.from && formatDate(new Date(first(sortedLines).from)), endDateText: last(sortedLines)?.to && formatDate(new Date(last(sortedLines).to)), isLoading: !editablePackagingEntry || !priceDetails, loaderComponent: React__default.createElement(Spinner, null), departureFlightMetaData: outboundFlightMetaData, returnFlightMetaData: returnFlightMetaData, includedServiceTypes: editablePackagingEntry.lines.map((line) => line.serviceType), packagingAccommodations: accommodationLines, basePrice: basePrice, commission: priceDetails?.commission, totalPrice: totalPrice, includedCosts: includedCosts, extraCosts: separateExtraPriceDetails, deposit: priceDetails?.deposit, isUnavailable: false, agent: context.agentId, currencyCode: packagingAccoResult?.currencyCode }));
 };
 
 const formatBirthDate = (birthDate) => {
@@ -31781,7 +31791,7 @@ const BookPackagingEntry = ({ activeSearchSeed, isLoading, isConfirmationPage })
                         stepLabels[step])) },
                     isConfirmationPage && isLoading && React__default.createElement(Spinner, { label: translations.SUMMARY.PROCESS_BOOKING }),
                     currentStep === 0 && (React__default.createElement(SharedTravelersForm, { formik: formik, translations: translations, travellersSettings: travellersSettings, countries: countries, travelersFirstStep: false, isUnavailable: false, useCompactForm: false, showAgentSelection: false })),
-                    currentStep === 1 && (React__default.createElement(SharedSummary, { translations: translations, travelerFormValues: formik.values, isSubmitting: isSubmitting, skipPayment: !context.generatePaymentUrl, userValidated: userValidated, remarks: remarks, enableVoucher: false, allowOption: false, isOffer: false, onUserValidatedChange: setUserValidated, onRemarksChange: setRemarks, onSubmit: handleSummarySubmit, renderOptions: () => renderEditablePackagingEntrySummaryOptions(editablePackagingEntry, priceDetails), renderPreviousButton: () => (React__default.createElement("button", { type: "button", title: translations.STEPS.PREVIOUS, onClick: () => dispatch(setCurrentStep(0)), className: "cta cta--secondary" }, translations.STEPS.PREVIOUS)) })),
+                    currentStep === 1 && (React__default.createElement(SharedSummary, { translations: translations, travelerFormValues: formik.values, isSubmitting: isSubmitting, skipPayment: !context.generatePaymentUrl, userValidated: userValidated, remarks: remarks, enableVoucher: false, allowOption: false, isOffer: false, onUserValidatedChange: setUserValidated, onRemarksChange: setRemarks, onSubmit: handleSummarySubmit, renderOptions: () => renderEditablePackagingEntrySummaryOptions(editablePackagingEntry, priceDetails, translations, selectedPackagingAccoResult?.currencyCode), renderPreviousButton: () => (React__default.createElement("button", { type: "button", title: translations.STEPS.PREVIOUS, onClick: () => dispatch(setCurrentStep(0)), className: "cta cta--secondary" }, translations.STEPS.PREVIOUS)) })),
                     currentStep === 2 && (React__default.createElement(SharedConfirmation, { bookingNumber: bookingNumber ?? editablePackagingEntry?.dossierNumber ?? '', isOption: false, isOffer: false, translations: translations.CONFIRMATION })),
                     currentStep === 3 && React__default.createElement("div", null))),
             React__default.createElement("div", { className: "backdrop", id: "backdrop" }),
@@ -35934,20 +35944,20 @@ function ItineraryMapView({ destinations: propDestinations, adults = 2, dateFrom
             const isStartEnd = dest.isStart || dest.isEnd;
             let iconHtml;
             if (isStartEnd) {
-                iconHtml = `
-          <div class="map-view__marker map-view__marker--plane">
-            <svg viewBox="0 0 576 512" fill="currentColor" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
-              <path d="M482.3 192c34.2 0 93.7 29 93.7 64c0 36-59.5 64-93.7 64l-116.6 0L265.2 495.9c-5.7 10.1-16.3 16.1-27.8 16.1l-56.2 0c-10.6 0-18.3-10.3-15.8-20.6l49-196.3L112 288 68.8 377.6c-3 6.1-9.2 10.4-16 10.4l-2.8 0c-9.2 0-16-8.8-13.3-17.6L80 256L36.7 141.6C34 132.8 40.8 124 50 124l2.8 0c6.8 0 13 4.3 16 10.4L112 224l102.9 0-49-196.3C163.5 17.3 171.2 7 181.8 7l56.2 0c11.5 0 22.1 6 27.8 16.1L365.7 192l116.6 0z"/>
-            </svg>
+                iconHtml = `
+          <div class="map-view__marker map-view__marker--plane">
+            <svg viewBox="0 0 576 512" fill="currentColor" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+              <path d="M482.3 192c34.2 0 93.7 29 93.7 64c0 36-59.5 64-93.7 64l-116.6 0L265.2 495.9c-5.7 10.1-16.3 16.1-27.8 16.1l-56.2 0c-10.6 0-18.3-10.3-15.8-20.6l49-196.3L112 288 68.8 377.6c-3 6.1-9.2 10.4-16 10.4l-2.8 0c-9.2 0-16-8.8-13.3-17.6L80 256L36.7 141.6C34 132.8 40.8 124 50 124l2.8 0c6.8 0 13 4.3 16 10.4L112 224l102.9 0-49-196.3C163.5 17.3 171.2 7 181.8 7l56.2 0c11.5 0 22.1 6 27.8 16.1L365.7 192l116.6 0z"/>
+            </svg>
           </div>`;
             }
             else {
                 stopIndex++;
                 const imgStyle = dest.imageUrl ? `style="background-image:url('${dest.imageUrl}')"` : '';
-                iconHtml = `
-          <div class="map-view__marker map-view__marker--stop" ${imgStyle}>
-            ${!dest.imageUrl ? `<span class="map-view__marker-number">${stopIndex}</span>` : ''}
-            <span class="map-view__marker-badge">${stopIndex}</span>
+                iconHtml = `
+          <div class="map-view__marker map-view__marker--stop" ${imgStyle}>
+            ${!dest.imageUrl ? `<span class="map-view__marker-number">${stopIndex}</span>` : ''}
+            <span class="map-view__marker-badge">${stopIndex}</span>
           </div>`;
             }
             const icon = L.divIcon({

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

@@ -256,6 +256,7 @@ export declare const selectCalculateDeposit: (state: RootState) => boolean;
 export declare const selectShowCommission: (state: RootState) => boolean | undefined;
 export declare const selectIsRetry: (state: RootState) => boolean;
 export declare const selectStartDate: (state: RootState) => string | undefined;
+export declare const selectEndDate: (state: RootState) => string | undefined;
 export declare const selectAgents: (state: RootState) => import("@qite/tide-client").BookingTravelAgent[] | undefined;
 export declare const selectCountries: (state: RootState) => import("@qite/tide-client").CountryItem[] | undefined;
 export declare const selectProductCode: (state: RootState) => string | undefined;

package/build/build-esm/src/booking-wizard/types.d.ts

@@ -163,6 +163,7 @@ export interface FlightInfo {
 export interface TravelersFormValues {
     rooms: TravelersFormRoomValues[];
     startDate?: string;
+    endDate?: string;
     mainBookerId: number;
     street: string;
     houseNumber: string;