@qite/tide-booking-component 1.4.113 → 1.4.114

package/build/build-esm/index.js

@@ -41445,11 +41445,20 @@ var HotelAccommodationResults = function (_a) {
     function () {
       var shouldShowAll =
         (context === null || context === void 0 ? void 0 : context.searchConfiguration.qsmType) !== build.PortalQsmType.AccommodationAndFlight || isFlyIn;
+      var filteredMapperResults = mappedResults;
+      if (selectedPackagingAccoResult) {
+        filteredMapperResults = mappedResults.filter(function (result) {
+          return result.code !== selectedPackagingAccoResult.code;
+        });
+      }
       if (shouldShowAll) {
-        return mappedResults;
+        if (isFlyIn) {
+          return mappedResults;
+        }
+        return filteredMapperResults;
       }
       if (selectedPackagingAccoResult) {
-        return mappedResults
+        return filteredMapperResults
           .filter(function (result) {
             return result.code !== selectedPackagingAccoResult.code;
           })
@@ -43029,6 +43038,13 @@ var FlyIn = function (_a) {
       dispatch(setSortType(newSortByType));
     }
   };
+  var onHandleConfirm = function () {
+    if (context === null || context === void 0 ? void 0 : context.packagingEntry) {
+      handleConfirm === null || handleConfirm === void 0 ? void 0 : handleConfirm();
+    } else {
+      dispatch(setBookPackagingEntry(true));
+    }
+  };
   return React__default.createElement(
     'div',
     {
@@ -43166,7 +43182,7 @@ var FlyIn = function (_a) {
         ),
       (srpType === build.PortalQsmType.Accommodation || srpType === build.PortalQsmType.AccommodationAndFlight) &&
         flyInType === 'acco-details' &&
-        React__default.createElement(AccommodationFlyIn, { isLoading: detailsLoading, handleConfirm: handleConfirm }),
+        React__default.createElement(AccommodationFlyIn, { isLoading: detailsLoading, handleConfirm: onHandleConfirm }),
       srpType === build.PortalQsmType.AccommodationAndFlight &&
         (flyInType === 'flight-outward-results' || flyInType === 'flight-return-results') &&
         React__default.createElement(PackageingFlightsFlyIn, { isOpen: isOpen, setIsOpen: setIsOpen, toggleFilters: toggleFilters, filtersOpen: filtersOpen }),
@@ -44004,8 +44020,11 @@ var IndependentFlightSelection = function (_a) {
     [searchResults, selectedReturnKey]
   );
   var firstResultDate = uniqueOutwardFlights.length > 0 ? uniqueOutwardFlights[0].outward.segments[0].departureDateTime : null;
+  var firstResultReturnDate = uniqueReturnFlights.length > 0 ? uniqueReturnFlights[0].return.segments[0].departureDateTime : null;
   var firstResultDay = firstResultDate ? format$2(firstResultDate, 'd') : null;
   var firstResultMonth = firstResultDate ? format$2(firstResultDate, 'MMM') : null;
+  var firstResultReturnDay = firstResultReturnDate ? format$2(firstResultReturnDate, 'd') : null;
+  var firstResultReturnMonth = firstResultReturnDate ? format$2(firstResultReturnDate, 'MMM') : null;
   return React__default.createElement(
     React__default.Fragment,
     null,
@@ -44054,7 +44073,12 @@ var IndependentFlightSelection = function (_a) {
     React__default.createElement(
       'div',
       { className: 'search__results__label search__results__label--secondary' },
-      React__default.createElement('div', { className: 'search__results__label__date' }),
+      React__default.createElement(
+        'div',
+        { className: 'search__results__label__date' },
+        React__default.createElement('p', { className: 'search__results__label__date-date' }, firstResultReturnDay),
+        React__default.createElement('p', null, firstResultReturnMonth)
+      ),
       React__default.createElement(
         'div',
         { className: 'search__results__label__text' },
@@ -46510,6 +46534,83 @@ var DayByDayExcursions = function () {
   );
 };
 
+var renderEditablePackagingEntrySummaryOptions = function (editablePackagingEntry, priceDetails, translations) {
+  var _a, _b;
+  var priceDetailsByProduct = groupBy(
+    (_a = priceDetails === null || priceDetails === void 0 ? void 0 : priceDetails.details) !== null && _a !== void 0 ? _a : [],
+    function (detail) {
+      return ''.concat(detail.productCode, '|').concat(detail.accommodationCode);
+    }
+  );
+  return (
+    (_b = editablePackagingEntry === null || editablePackagingEntry === void 0 ? void 0 : editablePackagingEntry.lines) !== null && _b !== void 0 ? _b : []
+  ).map(function (line) {
+    var _a, _b, _c;
+    var groupedPriceDetails = (_a = priceDetailsByProduct[''.concat(line.productCode, '|').concat(line.accommodationCode)]) !== null && _a !== void 0 ? _a : [];
+    var visiblePriceDetails = groupedPriceDetails.filter(function (detail) {
+      return detail.showPrice || detail.isSeparate;
+    });
+    return React__default.createElement(
+      'li',
+      { key: line.guid },
+      React__default.createElement('h6', null, line.productName),
+      React__default.createElement(
+        'ul',
+        null,
+        React__default.createElement('li', { className: 'list__item' }, compact([line.accommodationName, line.regimeName]).join(', ')),
+        (_c = (_b = line.flightInformation) === null || _b === void 0 ? void 0 : _b.flightLines) === null || _c === void 0
+          ? void 0
+          : _c.map(function (flightLine, index) {
+              var _a, _b;
+              return React__default.createElement(
+                'li',
+                { className: 'list__item', key: ''.concat(line.guid, '-').concat(index) },
+                flightLine.departureAirportCode,
+                ' ',
+                (_a = flightLine.departureTime) === null || _a === void 0 ? void 0 : _a.slice(0, 5),
+                ' > ',
+                flightLine.arrivalAirportCode,
+                ' ',
+                (_b = flightLine.arrivalTime) === null || _b === void 0 ? void 0 : _b.slice(0, 5),
+                ' (',
+                flightLine.operatingFlightNumber || ''.concat(flightLine.airlineCode).concat(flightLine.flightNumber),
+                ')'
+              );
+            }),
+        !isEmpty(visiblePriceDetails) &&
+          visiblePriceDetails.map(function (detail, index) {
+            var _a;
+            return React__default.createElement(
+              'li',
+              { className: 'list__item', key: ''.concat(line.guid, '-price-').concat(index) },
+              detail.priceDescription,
+              ': ',
+              (_a = detail.total) === null || _a === void 0 ? void 0 : _a.toLocaleString(undefined, { style: 'currency', currency: 'EUR' })
+            );
+          })
+      ),
+      React__default.createElement(
+        'p',
+        null,
+        '(',
+        line.from === line.to
+          ? getDateText(line.from)
+          : React__default.createElement(React__default.Fragment, null, getDateText(line.from), ' > ', getDateText(line.to)),
+        ')'
+      )
+    );
+  });
+};
+var getImageSrcFromHtml = function (html) {
+  var _a;
+  if (!html || typeof window === 'undefined') {
+    return undefined;
+  }
+  var doc = new DOMParser().parseFromString(html, 'text/html');
+  var img = doc.querySelector('img');
+  return (_a = img === null || img === void 0 ? void 0 : img.getAttribute('src')) !== null && _a !== void 0 ? _a : undefined;
+};
+
 var mapToSidebarFlightMetaData = function (entryLine) {
   var _a, _b;
   return {
@@ -46569,22 +46670,16 @@ var selectSeparatePackagePriceDetails = function (priceDetails) {
   return result;
 };
 var WLSidebar = function (_a) {
-  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
-  var activeSearchSeed = _a.activeSearchSeed;
+  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
+  var activeSearchSeed = _a.activeSearchSeed,
+    packagingAccoResult = _a.packagingAccoResult;
   var context = useContext(SearchResultsConfigurationContext);
-  if (!context) {
-    return null;
-  }
-  var translations = getTranslations((_b = context.languageCode) !== null && _b !== void 0 ? _b : 'en-GB');
-  var _u = useSelector(function (state) {
+  var _4 = useSelector(function (state) {
       return state.searchResults;
     }),
-    editablePackagingEntry = _u.editablePackagingEntry,
-    priceDetails = _u.priceDetails;
-  // Map editablePackagingEntry to sidebar props (example, adjust as needed)
-  if (!editablePackagingEntry) {
-    return null;
-  }
+    editablePackagingEntry = _4.editablePackagingEntry,
+    priceDetails = _4.priceDetails;
+  var translations = getTranslations((_b = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _b !== void 0 ? _b : 'en-GB');
   var sortedLines = useMemo(
     function () {
       var _a;
@@ -46604,35 +46699,70 @@ var WLSidebar = function (_a) {
     },
     [editablePackagingEntry]
   );
+  var accoImage = useMemo(
+    function () {
+      return getImageSrcFromHtml(packagingAccoResult === null || packagingAccoResult === void 0 ? void 0 : packagingAccoResult.contents);
+    },
+    [packagingAccoResult === null || packagingAccoResult === void 0 ? void 0 : packagingAccoResult.contents]
+  );
+  if (!context || !editablePackagingEntry) {
+    return null;
+  }
   var firstEntryLine = first(sortedLines);
   var accommodationLines = editablePackagingEntry.lines.filter(function (line) {
     return line.serviceType === ACCOMMODATION_SERVICE_TYPE;
   });
   var accommodationLine = (_c = first(accommodationLines)) !== null && _c !== void 0 ? _c : firstEntryLine;
   var location =
-    (_l =
-      (_j =
-        (_g =
-          (_e =
-            (_d = accommodationLine === null || accommodationLine === void 0 ? void 0 : accommodationLine.location) === null || _d === void 0
+    context.searchConfiguration.qsmType === build.PortalQsmType.Accommodation
+      ? (_m =
+          (_k =
+            (_h =
+              (_f =
+                (_d = packagingAccoResult === null || packagingAccoResult === void 0 ? void 0 : packagingAccoResult.name) !== null && _d !== void 0
+                  ? _d
+                  : (_e = accommodationLine === null || accommodationLine === void 0 ? void 0 : accommodationLine.location) === null || _e === void 0
+                  ? void 0
+                  : _e.name) !== null && _f !== void 0
+                ? _f
+                : (_g = accommodationLine === null || accommodationLine === void 0 ? void 0 : accommodationLine.oord) === null || _g === void 0
+                ? void 0
+                : _g.name) !== null && _h !== void 0
+              ? _h
+              : (_j = accommodationLine === null || accommodationLine === void 0 ? void 0 : accommodationLine.region) === null || _j === void 0
               ? void 0
-              : _d.name) !== null && _e !== void 0
-            ? _e
-            : (_f = accommodationLine === null || accommodationLine === void 0 ? void 0 : accommodationLine.oord) === null || _f === void 0
+              : _j.name) !== null && _k !== void 0
+            ? _k
+            : (_l = accommodationLine === null || accommodationLine === void 0 ? void 0 : accommodationLine.country) === null || _l === void 0
             ? void 0
-            : _f.name) !== null && _g !== void 0
-          ? _g
-          : (_h = accommodationLine === null || accommodationLine === void 0 ? void 0 : accommodationLine.region) === null || _h === void 0
-          ? void 0
-          : _h.name) !== null && _j !== void 0
-        ? _j
-        : (_k = accommodationLine === null || accommodationLine === void 0 ? void 0 : accommodationLine.country) === null || _k === void 0
+            : _l.name) !== null && _m !== void 0
+        ? _m
+        : (_o = firstEntryLine === null || firstEntryLine === void 0 ? void 0 : firstEntryLine.location) === null || _o === void 0
         ? void 0
-        : _k.name) !== null && _l !== void 0
-      ? _l
-      : (_m = firstEntryLine === null || firstEntryLine === void 0 ? void 0 : firstEntryLine.location) === null || _m === void 0
+        : _o.name
+      : (_w =
+          (_u =
+            (_s =
+              (_q =
+                (_p = accommodationLine === null || accommodationLine === void 0 ? void 0 : accommodationLine.location) === null || _p === void 0
+                  ? void 0
+                  : _p.name) !== null && _q !== void 0
+                ? _q
+                : (_r = accommodationLine === null || accommodationLine === void 0 ? void 0 : accommodationLine.oord) === null || _r === void 0
+                ? void 0
+                : _r.name) !== null && _s !== void 0
+              ? _s
+              : (_t = accommodationLine === null || accommodationLine === void 0 ? void 0 : accommodationLine.region) === null || _t === void 0
+              ? void 0
+              : _t.name) !== null && _u !== void 0
+            ? _u
+            : (_v = accommodationLine === null || accommodationLine === void 0 ? void 0 : accommodationLine.country) === null || _v === void 0
+            ? void 0
+            : _v.name) !== null && _w !== void 0
+      ? _w
+      : (_x = firstEntryLine === null || firstEntryLine === void 0 ? void 0 : firstEntryLine.location) === null || _x === void 0
       ? void 0
-      : _m.name;
+      : _x.name;
   var rooms =
     (activeSearchSeed === null || activeSearchSeed === void 0
       ? void 0
@@ -46662,7 +46792,7 @@ var WLSidebar = function (_a) {
   var outboundFlightMetaData = outboundFlight ? mapToSidebarFlightMetaData(outboundFlight) : undefined;
   var returnFlightMetaData = returnFlight ? mapToSidebarFlightMetaData(returnFlight) : undefined;
   var basePrice = sum(
-    (_o =
+    (_y =
       priceDetails === null || priceDetails === void 0
         ? void 0
         : priceDetails.details
@@ -46671,18 +46801,18 @@ var WLSidebar = function (_a) {
             })
             .map(function (pd) {
               return pd.price * pd.amount;
-            })) !== null && _o !== void 0
-      ? _o
+            })) !== null && _y !== void 0
+      ? _y
       : []
   );
   var separateExtraPriceDetails =
-    (_p =
+    (_z =
       priceDetails === null || priceDetails === void 0
         ? void 0
         : priceDetails.details.filter(function (pd) {
             return !pd.isInPackage && pd.isSeparate;
-          })) !== null && _p !== void 0
-      ? _p
+          })) !== null && _z !== void 0
+      ? _z
       : [];
   var totalPrice = sum(
     __spreadArray(
@@ -46694,22 +46824,22 @@ var WLSidebar = function (_a) {
     )
   );
   var includedCosts = selectSeparatePackagePriceDetails(
-    (_q =
+    (_0 =
       priceDetails === null || priceDetails === void 0
         ? void 0
         : priceDetails.details.filter(function (pd) {
             return pd.isInPackage;
-          })) !== null && _q !== void 0
-      ? _q
+          })) !== null && _0 !== void 0
+      ? _0
       : []
   );
   return React__default.createElement(SharedSidebar, {
     productName: location !== null && location !== void 0 ? location : '',
-    thumbnailUrl: (_r = context.destinationImage) === null || _r === void 0 ? void 0 : _r.url,
+    thumbnailUrl: accoImage !== null && accoImage !== void 0 ? accoImage : (_1 = context.destinationImage) === null || _1 === void 0 ? void 0 : _1.url,
     translations: translations,
     travelerRooms: travelerRooms,
-    startDateText: ((_s = first(sortedLines)) === null || _s === void 0 ? void 0 : _s.from) && formatDate(new Date(first(sortedLines).from)),
-    endDateText: ((_t = last(sortedLines)) === null || _t === void 0 ? void 0 : _t.to) && formatDate(new Date(last(sortedLines).to)),
+    startDateText: ((_2 = first(sortedLines)) === null || _2 === void 0 ? void 0 : _2.from) && formatDate(new Date(first(sortedLines).from)),
+    endDateText: ((_3 = last(sortedLines)) === null || _3 === void 0 ? void 0 : _3.to) && formatDate(new Date(last(sortedLines).to)),
     isLoading: !editablePackagingEntry || !priceDetails,
     loaderComponent: React__default.createElement(Spinner, null),
     departureFlightMetaData: outboundFlightMetaData,
@@ -47225,74 +47355,6 @@ var SharedSummary = function (_a) {
   );
 };
 
-var renderEditablePackagingEntrySummaryOptions = function (editablePackagingEntry, priceDetails, translations) {
-  var _a, _b;
-  var priceDetailsByProduct = groupBy(
-    (_a = priceDetails === null || priceDetails === void 0 ? void 0 : priceDetails.details) !== null && _a !== void 0 ? _a : [],
-    function (detail) {
-      return ''.concat(detail.productCode, '|').concat(detail.accommodationCode);
-    }
-  );
-  return (
-    (_b = editablePackagingEntry === null || editablePackagingEntry === void 0 ? void 0 : editablePackagingEntry.lines) !== null && _b !== void 0 ? _b : []
-  ).map(function (line) {
-    var _a, _b, _c;
-    var groupedPriceDetails = (_a = priceDetailsByProduct[''.concat(line.productCode, '|').concat(line.accommodationCode)]) !== null && _a !== void 0 ? _a : [];
-    var visiblePriceDetails = groupedPriceDetails.filter(function (detail) {
-      return detail.showPrice || detail.isSeparate;
-    });
-    return React__default.createElement(
-      'li',
-      { key: line.guid },
-      React__default.createElement('h6', null, line.productName),
-      React__default.createElement(
-        'ul',
-        null,
-        React__default.createElement('li', { className: 'list__item' }, compact([line.accommodationName, line.regimeName]).join(', ')),
-        (_c = (_b = line.flightInformation) === null || _b === void 0 ? void 0 : _b.flightLines) === null || _c === void 0
-          ? void 0
-          : _c.map(function (flightLine, index) {
-              var _a, _b;
-              return React__default.createElement(
-                'li',
-                { className: 'list__item', key: ''.concat(line.guid, '-').concat(index) },
-                flightLine.departureAirportCode,
-                ' ',
-                (_a = flightLine.departureTime) === null || _a === void 0 ? void 0 : _a.slice(0, 5),
-                ' > ',
-                flightLine.arrivalAirportCode,
-                ' ',
-                (_b = flightLine.arrivalTime) === null || _b === void 0 ? void 0 : _b.slice(0, 5),
-                ' (',
-                flightLine.operatingFlightNumber || ''.concat(flightLine.airlineCode).concat(flightLine.flightNumber),
-                ')'
-              );
-            }),
-        !isEmpty(visiblePriceDetails) &&
-          visiblePriceDetails.map(function (detail, index) {
-            var _a;
-            return React__default.createElement(
-              'li',
-              { className: 'list__item', key: ''.concat(line.guid, '-price-').concat(index) },
-              detail.priceDescription,
-              ': ',
-              (_a = detail.total) === null || _a === void 0 ? void 0 : _a.toLocaleString(undefined, { style: 'currency', currency: 'EUR' })
-            );
-          })
-      ),
-      React__default.createElement(
-        'p',
-        null,
-        '(',
-        line.from === line.to
-          ? getDateText(line.from)
-          : React__default.createElement(React__default.Fragment, null, getDateText(line.from), ' > ', getDateText(line.to)),
-        ')'
-      )
-    );
-  });
-};
-
 var travelerFormFields = [{ type: 'gender' }, { type: 'firstName' }, { type: 'lastName' }, { type: 'birthDate' }];
 var mainBookerFormFields = [
   { type: 'street' },
@@ -47316,6 +47378,7 @@ var travellersSettings = {
 var BookPackagingEntry = function (_a) {
   var _b;
   var activeSearchSeed = _a.activeSearchSeed,
+    isLoading = _a.isLoading,
     isConfirmationPage = _a.isConfirmationPage;
   var context = useContext(SearchResultsConfigurationContext);
   var dispatch = useDispatch();
@@ -47325,7 +47388,9 @@ var BookPackagingEntry = function (_a) {
     editablePackagingEntry = _c.editablePackagingEntry,
     priceDetails = _c.priceDetails,
     currentStep = _c.currentStep,
-    bookingNumber = _c.bookingNumber;
+    bookingNumber = _c.bookingNumber,
+    selectedPackagingAccoResultCode = _c.selectedPackagingAccoResultCode,
+    packagingAccoResults = _c.packagingAccoResults;
   var _d = useState([]),
     countries = _d[0],
     setCountries = _d[1];
@@ -47338,6 +47403,9 @@ var BookPackagingEntry = function (_a) {
   var _g = useState(false),
     isSubmitting = _g[0],
     setIsSubmitting = _g[1];
+  var _h = useState(null),
+    selectedPackagingAccoResult = _h[0],
+    setSelectedPackagingAccoResult = _h[1];
   var translations = useMemo(
     function () {
       var _a;
@@ -47416,7 +47484,22 @@ var BookPackagingEntry = function (_a) {
     },
     [isConfirmationPage, dispatch]
   );
-  if (!context || !editablePackagingEntry || !priceDetails || !config) return null;
+  useEffect(
+    function () {
+      var selectedPackagingAccoResult =
+        packagingAccoResults === null || packagingAccoResults === void 0
+          ? void 0
+          : packagingAccoResults.find(function (result) {
+              return result.code === selectedPackagingAccoResultCode;
+            });
+      if (selectedPackagingAccoResult) {
+        setSelectedPackagingAccoResult(selectedPackagingAccoResult);
+      }
+    },
+    [selectedPackagingAccoResultCode, packagingAccoResults]
+  );
+  if (!context || !editablePackagingEntry || !priceDetails || !config)
+    return React__default.createElement(Spinner, { label: translations.SUMMARY.PROCESS_BOOKING });
   var handleSummarySubmit = function (e) {
     return __awaiter(void 0, void 0, void 0, function () {
       var updatedEditablePackagingEntry, redirectUrl, request, bookingResponse;
@@ -47442,7 +47525,7 @@ var BookPackagingEntry = function (_a) {
             dispatch(setEditablePackagingEntry(updatedEditablePackagingEntry));
             _c.label = 1;
           case 1:
-            _c.trys.push([1, 3, 4, 5]);
+            _c.trys.push([1, 3, , 4]);
             request = {
               language: (_a = context.languageCode) !== null && _a !== void 0 ? _a : 'en-GB',
               officeId: context.tideConnection.officeId,
@@ -47458,16 +47541,14 @@ var BookPackagingEntry = function (_a) {
               window.location.href = bookingResponse.paymentUrl;
             } else {
               dispatch(setCurrentStep(2));
+              setIsSubmitting(false);
             }
-            return [3 /*break*/, 5];
+            return [3 /*break*/, 4];
           case 3:
             _c.sent();
             dispatch(setCurrentStep(3));
-            return [3 /*break*/, 5];
+            return [3 /*break*/, 4];
           case 4:
-            setIsSubmitting(false);
-            return [7 /*endfinally*/];
-          case 5:
             return [2 /*return*/];
         }
       });
@@ -47492,6 +47573,7 @@ var BookPackagingEntry = function (_a) {
               return React__default.createElement(React__default.Fragment, null, step + 1, '.\u00A0', stepLabels[step]);
             }
           },
+          isConfirmationPage && isLoading && React__default.createElement(Spinner, { label: translations.SUMMARY.PROCESS_BOOKING }),
           currentStep === 0 &&
             React__default.createElement(SharedTravelersForm, {
               formik: formik,
@@ -47554,7 +47636,7 @@ var BookPackagingEntry = function (_a) {
         )
       ),
       React__default.createElement('div', { className: 'backdrop', id: 'backdrop' }),
-      React__default.createElement(WLSidebar, { activeSearchSeed: activeSearchSeed })
+      React__default.createElement(WLSidebar, { activeSearchSeed: activeSearchSeed, packagingAccoResult: selectedPackagingAccoResult })
     )
   );
 };
@@ -49134,7 +49216,11 @@ var SearchResultsContainer = function (_a) {
         'div',
         { className: 'search' },
         bookPackagingEntry
-          ? React__default.createElement(BookPackagingEntry, { activeSearchSeed: activeSearchSeed, isConfirmationPage: isBookingConfirmation })
+          ? React__default.createElement(BookPackagingEntry, {
+              activeSearchSeed: activeSearchSeed,
+              isLoading: itineraryIsLoading || pricesAreLoading,
+              isConfirmationPage: isBookingConfirmation
+            })
           : React__default.createElement(
               'div',
               { className: 'search__container' },

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { SearchSeed } from '../../types';
 interface BookPackagingEntryProps {
   activeSearchSeed: SearchSeed | null;
+  isLoading: boolean;
   isConfirmationPage?: boolean;
 }
 declare const BookPackagingEntry: React.FC<BookPackagingEntryProps>;

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

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

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

@@ -1 +1,2 @@
 export declare const renderEditablePackagingEntrySummaryOptions: (editablePackagingEntry: any, priceDetails: any, translations: any) => 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.113",
+  "version": "1.4.114",
   "description": "React Booking wizard & Booking product component for Tide",
   "main": "build/build-cjs/index.js",
   "types": "build/build-cjs/src/index.d.ts",

package/src/search-results/components/book-packaging-entry/index.tsx

@@ -16,13 +16,23 @@ import { useFormik } from 'formik';
 import { TravelersFormValues } from '../../../booking-wizard/types';
 import { setBookingNumber, setCurrentStep, setEditablePackagingEntry } from '../../store/search-results-slice';
 import validateForm from '../../../booking-wizard/features/travelers-form/validate-form';
-import { bookPackagingEntry, CountryItem, getCountries, PackagingEntry, PackagingRequestBase, TideClientConfig } from '@qite/tide-client';
+import {
+  bookPackagingEntry,
+  CountryItem,
+  getCountries,
+  PackagingAccommodationResponse,
+  PackagingEntry,
+  PackagingRequestBase,
+  TideClientConfig
+} from '@qite/tide-client';
 import SharedSummary from '../../../shared/booking/summary';
 import { renderEditablePackagingEntrySummaryOptions } from '../../../shared/utils/booking-summary';
 import SharedConfirmation from '../../../shared/booking/shared-confirmation';
+import Spinner from '../spinner/spinner';
 
 interface BookPackagingEntryProps {
   activeSearchSeed: SearchSeed | null;
+  isLoading: boolean;
   isConfirmationPage?: boolean;
 }
 
@@ -49,16 +59,19 @@ const travellersSettings: SharedTravelersSettings = {
   mainBookerFormFields
 };
 
-const BookPackagingEntry: React.FC<BookPackagingEntryProps> = ({ activeSearchSeed, isConfirmationPage }) => {
+const BookPackagingEntry: React.FC<BookPackagingEntryProps> = ({ activeSearchSeed, isLoading, isConfirmationPage }) => {
   const context = useContext(SearchResultsConfigurationContext);
   const dispatch = useDispatch();
 
-  const { editablePackagingEntry, priceDetails, currentStep, bookingNumber } = useSelector((state: SearchResultsRootState) => state.searchResults);
+  const { editablePackagingEntry, priceDetails, currentStep, bookingNumber, selectedPackagingAccoResultCode, packagingAccoResults } = useSelector(
+    (state: SearchResultsRootState) => state.searchResults
+  );
 
   const [countries, setCountries] = useState<CountryItem[]>([]);
   const [userValidated, setUserValidated] = useState(true);
   const [remarks, setRemarks] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [selectedPackagingAccoResult, setSelectedPackagingAccoResult] = useState<PackagingAccommodationResponse | null>(null);
 
   const translations = useMemo(() => getTranslations(context?.languageCode ?? 'en-GB'), [context?.languageCode]);
 
@@ -117,7 +130,14 @@ const BookPackagingEntry: React.FC<BookPackagingEntryProps> = ({ activeSearchSee
     }
   }, [isConfirmationPage, dispatch]);
 
-  if (!context || !editablePackagingEntry || !priceDetails || !config) return null;
+  useEffect(() => {
+    const selectedPackagingAccoResult = packagingAccoResults?.find((result) => result.code === selectedPackagingAccoResultCode);
+    if (selectedPackagingAccoResult) {
+      setSelectedPackagingAccoResult(selectedPackagingAccoResult);
+    }
+  }, [selectedPackagingAccoResultCode, packagingAccoResults]);
+
+  if (!context || !editablePackagingEntry || !priceDetails || !config) return <Spinner label={translations.SUMMARY.PROCESS_BOOKING} />;
 
   const handleSummarySubmit: React.FormEventHandler<HTMLFormElement> = async (e) => {
     e.preventDefault();
@@ -165,11 +185,10 @@ const BookPackagingEntry: React.FC<BookPackagingEntryProps> = ({ activeSearchSee
         window.location.href = bookingResponse.paymentUrl;
       } else {
         dispatch(setCurrentStep(2));
+        setIsSubmitting(false);
       }
     } catch (error) {
       dispatch(setCurrentStep(3));
-    } finally {
-      setIsSubmitting(false);
     }
   };
 
@@ -186,6 +205,7 @@ const BookPackagingEntry: React.FC<BookPackagingEntryProps> = ({ activeSearchSee
                 {step + 1}.&nbsp;{stepLabels[step]}
               </>
             )}>
+            {isConfirmationPage && isLoading && <Spinner label={translations.SUMMARY.PROCESS_BOOKING} />}
             {currentStep === 0 && (
               <SharedTravelersForm
                 formik={formik}
@@ -237,7 +257,7 @@ const BookPackagingEntry: React.FC<BookPackagingEntryProps> = ({ activeSearchSee
 
         <div className="backdrop" id="backdrop"></div>
 
-        <WLSidebar activeSearchSeed={activeSearchSeed} />
+        <WLSidebar activeSearchSeed={activeSearchSeed} packagingAccoResult={selectedPackagingAccoResult} />
       </div>
     </div>
   );