@qite/tide-booking-component 1.4.127 → 1.4.128

package/build/build-cjs/index.js

@@ -21354,7 +21354,7 @@ const SidebarFlight = ({ title, flightMetaData, translations }) => {
             React__default["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] = React.useState(false);
@@ -21365,8 +21365,6 @@ const SharedSidebar = ({ productName, thumbnailUrl, isLoading, translations, hea
     const canShowPriceBreakdownSection = Boolean(basePrice && basePrice > 0) || !lodash.isEmpty(includedCosts) || !lodash.isEmpty(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["default"].createElement("div", { className: buildClassName(['booking__sidebar', active && 'booking__sidebar--active']) },
         headerComponent,
         React__default["default"].createElement("div", { className: "booking__sidebar-frame" },
@@ -21496,7 +21494,7 @@ const SharedSidebar = ({ productName, thumbnailUrl, isLoading, translations, hea
                                     translations.SIDEBAR.DEPOSIT_TEXT4,
                                     React__default["default"].createElement("strong", null, translations.SIDEBAR.DEPOSIT_TEXT5),
                                     translations.SIDEBAR.DEPOSIT_TEXT6))))) : (React__default["default"].createElement("div", { className: "pricing-summary__group" },
-                        agent && (React__default["default"].createElement("div", { className: "pricing-summary__row pricing-summary__row--total-price" },
+                        (agent && showCommission) && (React__default["default"].createElement("div", { className: "pricing-summary__row pricing-summary__row--total-price" },
                             React__default["default"].createElement("div", { className: "pricing-summary__property" },
                                 React__default["default"].createElement("h6", { className: "pricing-summary__title" }, translations.SIDEBAR.COMMISSION)),
                             React__default["default"].createElement("div", { className: "pricing-summary__value" },
@@ -21512,7 +21510,7 @@ const SharedSidebar = ({ productName, thumbnailUrl, isLoading, translations, hea
 };
 
 const SidebarContainer = ({ productName, thumbnailUrl }) => {
-    const { sidebarHeaderComponent, sidebarFooterComponent, loaderComponent, showPricesPerPaxType, maxChildAge } = React.useContext(SettingsContext);
+    const { sidebarHeaderComponent, sidebarFooterComponent, loaderComponent, showPricesPerPaxType, maxChildAge, showCommission } = React.useContext(SettingsContext);
     const bookingAttributes = reactRedux.useSelector(selectBookingAttributes);
     const selectFormRooms = React.useMemo(() => makeSelectFormRooms(maxChildAge), [maxChildAge]);
     const rooms = reactRedux.useSelector(selectFormRooms);
@@ -21529,7 +21527,7 @@ const SidebarContainer = ({ productName, thumbnailUrl }) => {
     const isUnavailable = reactRedux.useSelector(selectIsUnavailable) || false;
     const isLoading = isFetchingProductOptions || isFetchingPriceDetails;
     const agent = reactRedux.useSelector(selectAgentAdressId);
-    return (React__default["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: reactRedux.useSelector(selectBasePrice), commission: reactRedux.useSelector(selectCommission), totalPrice: reactRedux.useSelector(selectTotalPrice), includedCosts: reactRedux.useSelector(selectSeparatePackagePriceDetails$1), extraCosts: reactRedux.useSelector(selectSeparateExtraPriceDetails), accommodations: accommodations, includedServiceTypes: includedServiceTypes, deposit: reactRedux.useSelector(selectDeposit), isOnRequest: reactRedux.useSelector(selectIsOnRequest), headerComponent: sidebarHeaderComponent ?? undefined, footerComponent: sidebarFooterComponent ?? undefined, loaderComponent: loaderComponent ?? undefined, isUnavailable: isUnavailable, basePricePerPaxType: showPricesPerPaxType ? reactRedux.useSelector(selectBasePricePerPaxType) : undefined, seperateExtraPricePerPaxType: showPricesPerPaxType ? reactRedux.useSelector(selectSeparateExtraPriceDetailsPerPaxType) : undefined, translations: translations, agent: agent }));
+    return (React__default["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: reactRedux.useSelector(selectBasePrice), commission: reactRedux.useSelector(selectCommission), showCommission: showCommission, totalPrice: reactRedux.useSelector(selectTotalPrice), includedCosts: reactRedux.useSelector(selectSeparatePackagePriceDetails$1), extraCosts: reactRedux.useSelector(selectSeparateExtraPriceDetails), accommodations: accommodations, includedServiceTypes: includedServiceTypes, deposit: reactRedux.useSelector(selectDeposit), isOnRequest: reactRedux.useSelector(selectIsOnRequest), headerComponent: sidebarHeaderComponent ?? undefined, footerComponent: sidebarFooterComponent ?? undefined, loaderComponent: loaderComponent ?? undefined, isUnavailable: isUnavailable, basePricePerPaxType: showPricesPerPaxType ? reactRedux.useSelector(selectBasePricePerPaxType) : undefined, seperateExtraPricePerPaxType: showPricesPerPaxType ? reactRedux.useSelector(selectSeparateExtraPriceDetailsPerPaxType) : undefined, translations: translations, agent: agent, currencyCode: reactRedux.useSelector(selectCurrencyCode) }));
 };
 
 const SummaryPerPaxOptionGroup = ({ group }) => {
@@ -21711,7 +21709,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}`;
                 }
             }
         }
@@ -22642,7 +22640,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
@@ -22653,6 +22656,8 @@ const TravelersForm = () => {
         dispatch(fetchPriceDetails());
     }, [dispatch]);
     React.useEffect(() => {
+        if (!travelersFirstStep)
+            return;
         if (!bookingAttributes?.rooms?.length)
             return;
         if (!hasMounted) {
@@ -22677,7 +22682,7 @@ const TravelersForm = () => {
             }
         };
         fetchAll();
-    }, [bookingAttributes?.rooms, dispatch, hasMounted]);
+    }, [bookingAttributes?.rooms, dispatch, hasMounted, travelersFirstStep]);
     const roomsQuery = React.useMemo(() => formik$1.values.rooms
         .map((room) => {
         const adults = room.adults ? room.adults.length : 0;
@@ -31043,10 +31048,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 ?? [];
@@ -31060,66 +31065,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 }) => {
@@ -31139,141 +31144,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["default"].createElement(React__default["default"].Fragment, null,
@@ -31377,7 +31382,7 @@ const DayByDayExcursions = () => {
     })));
 };
 
-const renderEditablePackagingEntrySummaryOptions = (editablePackagingEntry, priceDetails, translations) => {
+const renderEditablePackagingEntrySummaryOptions = (editablePackagingEntry, priceDetails, translations, currencyCode) => {
     const priceDetailsByProduct = lodash.groupBy(priceDetails?.details ?? [], (detail) => `${detail.productCode}|${detail.accommodationCode}`);
     return (editablePackagingEntry?.lines ?? []).map((line) => {
         const groupedPriceDetails = priceDetailsByProduct[`${line.productCode}|${line.accommodationCode}`] ?? [];
@@ -31401,7 +31406,7 @@ const renderEditablePackagingEntrySummaryOptions = (editablePackagingEntry, pric
                     visiblePriceDetails.map((detail, index) => (React__default["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["default"].createElement("p", null,
                 "(",
                 line.from === line.to ? (getDateText(line.from)) : (React__default["default"].createElement(React__default["default"].Fragment, null,
@@ -31521,7 +31526,7 @@ const WLSidebar = ({ activeSearchSeed, packagingAccoResult }) => {
     const separateExtraPriceDetails = priceDetails?.details.filter((pd) => !pd.isInPackage && pd.isSeparate) ?? [];
     const totalPrice = lodash.sum([basePrice, ...separateExtraPriceDetails.map((priceDetail) => priceDetail.price * priceDetail.amount)]);
     const includedCosts = selectSeparatePackagePriceDetails(priceDetails?.details.filter((pd) => pd.isInPackage) ?? []);
-    return (React__default["default"].createElement(SharedSidebar, { productName: location ?? '', thumbnailUrl: accoImage ?? context.destinationImage?.url, translations: translations, travelerRooms: travelerRooms, startDateText: lodash.first(sortedLines)?.from && formatDate(new Date(lodash.first(sortedLines).from)), endDateText: lodash.last(sortedLines)?.to && formatDate(new Date(lodash.last(sortedLines).to)), isLoading: !editablePackagingEntry || !priceDetails, loaderComponent: React__default["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["default"].createElement(SharedSidebar, { productName: location ?? '', thumbnailUrl: accoImage ?? context.destinationImage?.url, translations: translations, travelerRooms: travelerRooms, startDateText: lodash.first(sortedLines)?.from && formatDate(new Date(lodash.first(sortedLines).from)), endDateText: lodash.last(sortedLines)?.to && formatDate(new Date(lodash.last(sortedLines).to)), isLoading: !editablePackagingEntry || !priceDetails, loaderComponent: React__default["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) => {
@@ -31815,7 +31820,7 @@ const BookPackagingEntry = ({ activeSearchSeed, isLoading, isConfirmationPage })
                         stepLabels[step])) },
                     isConfirmationPage && isLoading && React__default["default"].createElement(Spinner, { label: translations.SUMMARY.PROCESS_BOOKING }),
                     currentStep === 0 && (React__default["default"].createElement(SharedTravelersForm, { formik: formik$1, translations: translations, travellersSettings: travellersSettings, countries: countries, travelersFirstStep: false, isUnavailable: false, useCompactForm: false, showAgentSelection: false })),
-                    currentStep === 1 && (React__default["default"].createElement(SharedSummary, { translations: translations, travelerFormValues: formik$1.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["default"].createElement("button", { type: "button", title: translations.STEPS.PREVIOUS, onClick: () => dispatch(setCurrentStep(0)), className: "cta cta--secondary" }, translations.STEPS.PREVIOUS)) })),
+                    currentStep === 1 && (React__default["default"].createElement(SharedSummary, { translations: translations, travelerFormValues: formik$1.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["default"].createElement("button", { type: "button", title: translations.STEPS.PREVIOUS, onClick: () => dispatch(setCurrentStep(0)), className: "cta cta--secondary" }, translations.STEPS.PREVIOUS)) })),
                     currentStep === 2 && (React__default["default"].createElement(SharedConfirmation, { bookingNumber: bookingNumber ?? editablePackagingEntry?.dossierNumber ?? '', isOption: false, isOffer: false, translations: translations.CONFIRMATION })),
                     currentStep === 3 && React__default["default"].createElement("div", null))),
             React__default["default"].createElement("div", { className: "backdrop", id: "backdrop" }),
@@ -35968,20 +35973,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-cjs/src/shared/booking/shared-sidebar.d.ts

@@ -12,6 +12,7 @@ interface SharedSidebarProps {
     returnFlightMetaData?: any;
     basePrice?: number;
     commission?: number;
+    showCommission?: boolean;
     totalPrice?: number;
     remainingAmountText?: string;
     includedCosts?: any[];
@@ -29,6 +30,7 @@ interface SharedSidebarProps {
     seperateExtraPricePerPaxType?: PricePerPaxType[];
     translations: any;
     agent?: number;
+    currencyCode?: string;
 }
 declare const SharedSidebar: React.FC<SharedSidebarProps>;
 export default SharedSidebar;

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

@@ -1,2 +1,2 @@
-export declare const renderEditablePackagingEntrySummaryOptions: (editablePackagingEntry: any, priceDetails: any, translations: any) => any;
+export declare const renderEditablePackagingEntrySummaryOptions: (editablePackagingEntry: any, priceDetails: any, translations: any, currencyCode?: string) => any;
 export declare const getImageSrcFromHtml: (html?: string | null) => string | undefined;

package/build/build-esm/index.js

@@ -21325,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);
@@ -21336,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" },
@@ -21467,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" },
@@ -21483,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);
@@ -21500,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 }) => {
@@ -21682,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}`;
                 }
             }
         }
@@ -22613,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
@@ -22624,6 +22627,8 @@ const TravelersForm = () => {
         dispatch(fetchPriceDetails());
     }, [dispatch]);
     useEffect(() => {
+        if (!travelersFirstStep)
+            return;
         if (!bookingAttributes?.rooms?.length)
             return;
         if (!hasMounted) {
@@ -22648,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;
@@ -31014,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 ?? [];
@@ -31031,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 }) => {
@@ -31110,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,
@@ -31348,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}`] ?? [];
@@ -31372,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,
@@ -31492,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) => {
@@ -31786,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" }),
@@ -35939,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/shared/booking/shared-sidebar.d.ts

@@ -12,6 +12,7 @@ interface SharedSidebarProps {
     returnFlightMetaData?: any;
     basePrice?: number;
     commission?: number;
+    showCommission?: boolean;
     totalPrice?: number;
     remainingAmountText?: string;
     includedCosts?: any[];
@@ -29,6 +30,7 @@ interface SharedSidebarProps {
     seperateExtraPricePerPaxType?: PricePerPaxType[];
     translations: any;
     agent?: number;
+    currencyCode?: string;
 }
 declare const SharedSidebar: React.FC<SharedSidebarProps>;
 export default SharedSidebar;

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

@@ -1,2 +1,2 @@
-export declare const renderEditablePackagingEntrySummaryOptions: (editablePackagingEntry: any, priceDetails: any, translations: any) => any;
+export declare const renderEditablePackagingEntrySummaryOptions: (editablePackagingEntry: any, priceDetails: any, translations: any, currencyCode?: string) => any;
 export declare const getImageSrcFromHtml: (html?: string | null) => string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.4.127",
+  "version": "1.4.128",
   "description": "React Booking wizard & Booking product component for Tide",
   "main": "build/build-cjs/index.js",
   "types": "build/build-cjs/src/index.d.ts",