@qite/tide-booking-component 1.4.89 → 1.4.91

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/build/build-cjs/index.js +100 -72
  2. package/build/build-esm/index.js +100 -72
  3. package/package.json +2 -2
  4. package/src/search-results/components/flight/flight-search-context/index.tsx +1 -0
  5. package/src/shared/components/flyin/flights-flyin.tsx +6 -2
  6. package/src/shared/components/flyin/group-tour-flyin.tsx +69 -35
  7. package/styles/components/_flyin.scss +154 -154
  8. package/styles/components/_tree.scss +1 -5
package/build/build-cjs/index.js CHANGED
@@ -13400,6 +13400,9 @@ PERFORMANCE OF THIS SOFTWARE.
13400
13400
 
13401
13401
  var ENDPOINT = '/api/web/packaging';
13402
13402
  var ENDPOINT_ACCOMMODATIONS = ENDPOINT + '/accommodations';
13403
+ var ENDPOINT_ENTRY = function (magicLinkCode) {
13404
+ return ENDPOINT + '/entry/' + magicLinkCode;
13405
+ };
13403
13406
  // MANUAL PACKAGING SEARCH
13404
13407
  var searchPackagingAccommodations = function (config, request, signal) {
13405
13408
  var url = '' + config.host + ENDPOINT_ACCOMMODATIONS;
@@ -13407,6 +13410,11 @@ PERFORMANCE OF THIS SOFTWARE.
13407
13410
  var body = JSON.stringify(request);
13408
13411
  return post(url, apiKey, body, config.token, signal, true);
13409
13412
  };
13413
+ var getEntry = function (config, magicLinkCode, signal) {
13414
+ var apiKey = config.apiKey;
13415
+ var url = '' + config.host + ENDPOINT_ENTRY(magicLinkCode);
13416
+ return get(url, apiKey, config.token, signal, true);
13417
+ };
13410
13418
 
13411
13419
  exports.AllotmentType = AllotmentType;
13412
13420
  exports.ContactForm = ContactForm;
@@ -13451,6 +13459,7 @@ PERFORMANCE OF THIS SOFTWARE.
13451
13459
  exports.getAllotmentList = getAllotmentList;
13452
13460
  exports.getCountries = getCountries;
13453
13461
  exports.getCustomEntryStatus = getCustomEntryStatus;
13462
+ exports.getEntry = getEntry;
13454
13463
  exports.getEntryDetailv2 = getEntryDetailv2;
13455
13464
  exports.getEntryLight = getEntryLight;
13456
13465
  exports.getEntryList = getEntryList;
@@ -36628,6 +36637,7 @@ var mapItems = function (response) {
36628
36637
  });
36629
36638
  };
36630
36639
  var checkIfFinished = function (state) {
36640
+ console.log('Checking if finished with state:', state);
36631
36641
  if (state.lastSequenceId === null) return false;
36632
36642
  for (var i = 0; i <= state.lastSequenceId; i++) {
36633
36643
  if (!state.sequenceIds.includes(i)) return false;
@@ -37566,7 +37576,9 @@ var FlightsFlyIn = function (_a) {
37566
37576
  'div',
37567
37577
  {
37568
37578
  key: 'outward-flight-option-'.concat(index),
37569
- className: 'flyin__content-card '.concat(selectedOutwardFareCode === firstSegment.metaData.fareCode ? 'flyin__content-card--selected' : '')
37579
+ className: 'flyin__content-card flyin__content-card--flight '.concat(
37580
+ selectedOutwardFareCode === firstSegment.metaData.fareCode ? 'flyin__content-card--selected' : ''
37581
+ )
37570
37582
  },
37571
37583
  React__default['default'].createElement(
37572
37584
  'div',
@@ -37857,7 +37869,9 @@ var FlightsFlyIn = function (_a) {
37857
37869
  'div',
37858
37870
  {
37859
37871
  key: 'return-flight-option-'.concat(index),
37860
- className: 'flyin__content-card '.concat(selectedReturnFareCode === firstSegment.metaData.fareCode ? 'flyin__content-card--selected' : '')
37872
+ className: 'flyin__content-card flyin__content-card--flight '.concat(
37873
+ selectedReturnFareCode === firstSegment.metaData.fareCode ? 'flyin__content-card--selected' : ''
37874
+ )
37861
37875
  },
37862
37876
  React__default['default'].createElement(
37863
37877
  'div',
@@ -38545,6 +38559,27 @@ var GroupTourFlyIn = function (_a) {
38545
38559
  },
38546
38560
  [bookingPackageDetails]
38547
38561
  );
38562
+ var packageKey = ''
38563
+ .concat(bookingPackageDetails === null || bookingPackageDetails === void 0 ? void 0 : bookingPackageDetails.transactionId, '-')
38564
+ .concat(selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0 ? void 0 : selectedBookingPackageDetails.id);
38565
+ var initialSelectedOptionsRef = React.useRef({});
38566
+ React.useEffect(
38567
+ function () {
38568
+ if (!packageKey || !(selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0 ? void 0 : selectedBookingPackageDetails.rooms))
38569
+ return;
38570
+ if (!initialSelectedOptionsRef.current[packageKey]) {
38571
+ initialSelectedOptionsRef.current[packageKey] = {};
38572
+ }
38573
+ selectedBookingPackageDetails.rooms.forEach(function (room, roomIndex) {
38574
+ if (!initialSelectedOptionsRef.current[packageKey][roomIndex]) {
38575
+ initialSelectedOptionsRef.current[packageKey][roomIndex] = room.options.find(function (option) {
38576
+ return option.isSelected;
38577
+ });
38578
+ }
38579
+ });
38580
+ },
38581
+ [packageKey, selectedBookingPackageDetails]
38582
+ );
38548
38583
  var groupedRooms = React.useMemo(
38549
38584
  function () {
38550
38585
  if (!(selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0 ? void 0 : selectedBookingPackageDetails.rooms)) return [];
@@ -38572,19 +38607,14 @@ var GroupTourFlyIn = function (_a) {
38572
38607
  },
38573
38608
  [selectedBookingPackageDetails]
38574
38609
  );
38575
- if (!bookingPackageDetails) {
38610
+ if (!bookingPackageDetails || !selectedBookingPackageDetails) {
38576
38611
  return null;
38577
38612
  }
38578
38613
  var getSelectedOptionForRoom = function (roomIndex) {
38579
38614
  var _a, _b, _c;
38580
38615
  return (_c =
38581
- (_b =
38582
- (_a = selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0 ? void 0 : selectedBookingPackageDetails.rooms) === null ||
38583
- _a === void 0
38584
- ? void 0
38585
- : _a[roomIndex]) === null || _b === void 0
38586
- ? void 0
38587
- : _b.options) === null || _c === void 0
38616
+ (_b = (_a = selectedBookingPackageDetails.rooms) === null || _a === void 0 ? void 0 : _a[roomIndex]) === null || _b === void 0 ? void 0 : _b.options) ===
38617
+ null || _c === void 0
38588
38618
  ? void 0
38589
38619
  : _c.find(function (option) {
38590
38620
  return option.isSelected;
@@ -38593,18 +38623,18 @@ var GroupTourFlyIn = function (_a) {
38593
38623
  var getSelectedOptionForAccommodation = function (roomIndex, accommodationCode) {
38594
38624
  var _a, _b, _c;
38595
38625
  return (_c =
38596
- (_b =
38597
- (_a = selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0 ? void 0 : selectedBookingPackageDetails.rooms) === null ||
38598
- _a === void 0
38599
- ? void 0
38600
- : _a[roomIndex]) === null || _b === void 0
38601
- ? void 0
38602
- : _b.options) === null || _c === void 0
38626
+ (_b = (_a = selectedBookingPackageDetails.rooms) === null || _a === void 0 ? void 0 : _a[roomIndex]) === null || _b === void 0 ? void 0 : _b.options) ===
38627
+ null || _c === void 0
38603
38628
  ? void 0
38604
38629
  : _c.find(function (option) {
38605
38630
  return option.accommodationCode === accommodationCode && option.isSelected;
38606
38631
  });
38607
38632
  };
38633
+ var getInitialSelectedOptionForRoom = function (roomIndex) {
38634
+ var _a;
38635
+ if (!packageKey) return undefined;
38636
+ return (_a = initialSelectedOptionsRef.current[packageKey]) === null || _a === void 0 ? void 0 : _a[roomIndex];
38637
+ };
38608
38638
  var handlePick = function (roomIndex, selectedGuid) {
38609
38639
  if (!bookingPackageDetails || !selectedBookingPackageDetails) return;
38610
38640
  var updatedBookingPackageDetails = __assign(__assign({}, bookingPackageDetails), {
@@ -38632,52 +38662,39 @@ var GroupTourFlyIn = function (_a) {
38632
38662
  if (isOpen) {
38633
38663
  setIsOpen(false);
38634
38664
  }
38635
- console.log('Booking package details sent to onBook callback:', bookingPackageDetails);
38636
38665
  if (context === null || context === void 0 ? void 0 : context.onBook) {
38637
38666
  context.onBook(bookingPackageDetails);
38638
38667
  }
38639
38668
  };
38640
- var calculateTotalPrice = function () {
38641
- var selectedOptions =
38642
- selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0
38643
- ? void 0
38644
- : selectedBookingPackageDetails.rooms.flatMap(function (room) {
38645
- return room.options.filter(function (option) {
38646
- return option.isSelected;
38669
+ var getPriceDifference = function (roomIndex, accommodationCode, regimeId) {
38670
+ var _a, _b, _c, _d, _e, _f, _g;
38671
+ var currentSelectedOption = getSelectedOptionForRoom(roomIndex);
38672
+ var currentSelectedPrice = (currentSelectedOption === null || currentSelectedOption === void 0 ? void 0 : currentSelectedOption.price) || 0;
38673
+ var targetOption;
38674
+ if (regimeId) {
38675
+ targetOption =
38676
+ (_c =
38677
+ (_b = (_a = selectedBookingPackageDetails.rooms) === null || _a === void 0 ? void 0 : _a[roomIndex]) === null || _b === void 0
38678
+ ? void 0
38679
+ : _b.options) === null || _c === void 0
38680
+ ? void 0
38681
+ : _c.find(function (option) {
38682
+ return option.entryLineGuid === regimeId;
38647
38683
  });
38648
- });
38649
- var totalPrice =
38650
- selectedOptions === null || selectedOptions === void 0
38651
- ? void 0
38652
- : selectedOptions.reduce(function (total, option) {
38653
- return total + (option.price || 0);
38654
- }, 0);
38655
- return formatPrice(totalPrice, bookingPackageDetails === null || bookingPackageDetails === void 0 ? void 0 : bookingPackageDetails.currencyCode);
38656
- };
38657
- var getPriceDifference = function (currentSelectedPrice, roomIndex, accommodationCode, regimeId) {
38658
- var targetPrice = 0;
38659
- var selectedOption = getSelectedOptionForAccommodation(roomIndex, accommodationCode);
38660
- if (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.price) {
38661
- targetPrice = selectedOption.price;
38662
38684
  } else {
38663
- var firstOption =
38664
- selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0
38685
+ targetOption =
38686
+ (_d = getSelectedOptionForAccommodation(roomIndex, accommodationCode)) !== null && _d !== void 0
38687
+ ? _d
38688
+ : (_g =
38689
+ (_f = (_e = selectedBookingPackageDetails.rooms) === null || _e === void 0 ? void 0 : _e[roomIndex]) === null || _f === void 0
38690
+ ? void 0
38691
+ : _f.options) === null || _g === void 0
38665
38692
  ? void 0
38666
- : selectedBookingPackageDetails.rooms[roomIndex].options.find(function (option) {
38693
+ : _g.find(function (option) {
38667
38694
  return option.accommodationCode === accommodationCode;
38668
38695
  });
38669
- targetPrice = (firstOption === null || firstOption === void 0 ? void 0 : firstOption.price) || 0;
38670
- }
38671
- if (regimeId) {
38672
- var regimeOption =
38673
- selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0
38674
- ? void 0
38675
- : selectedBookingPackageDetails.rooms[roomIndex].options.find(function (option) {
38676
- return option.entryLineGuid === regimeId;
38677
- });
38678
- targetPrice = (regimeOption === null || regimeOption === void 0 ? void 0 : regimeOption.price) || 0;
38679
38696
  }
38680
- return targetPrice - (currentSelectedPrice || 0);
38697
+ return ((targetOption === null || targetOption === void 0 ? void 0 : targetOption.price) || 0) - currentSelectedPrice;
38681
38698
  };
38682
38699
  var formatPriceDifference = function (difference, currencyCode) {
38683
38700
  if (difference === 0) {
@@ -38696,15 +38713,28 @@ var GroupTourFlyIn = function (_a) {
38696
38713
  return 'flyin__acco__price';
38697
38714
  };
38698
38715
  var regimeFormatter = function (roomIndex, accommodation, regimeId, label) {
38699
- var roomOption = getSelectedOptionForRoom(roomIndex);
38700
- var difference = getPriceDifference(
38701
- roomOption === null || roomOption === void 0 ? void 0 : roomOption.price,
38702
- roomIndex,
38703
- accommodation.accommodationCode,
38704
- regimeId
38705
- );
38716
+ var difference = getPriceDifference(roomIndex, accommodation.accommodationCode, regimeId);
38706
38717
  return ''.concat(label, ' ').concat(difference !== 0 ? '('.concat(formatPriceDifference(difference, bookingPackageDetails.currencyCode), ')') : '');
38707
38718
  };
38719
+ var adjustedTotalPrice = React.useMemo(
38720
+ function () {
38721
+ if (!selectedBookingPackageDetails.rooms || typeof selectedBookingPackageDetails.price !== 'number') {
38722
+ return 0;
38723
+ }
38724
+ var basePrice = selectedBookingPackageDetails.price;
38725
+ var totalDelta = selectedBookingPackageDetails.rooms.reduce(function (sum, room, roomIndex) {
38726
+ var initialOption = getInitialSelectedOptionForRoom(roomIndex);
38727
+ var currentOption = room.options.find(function (option) {
38728
+ return option.isSelected;
38729
+ });
38730
+ var initialPrice = (initialOption === null || initialOption === void 0 ? void 0 : initialOption.price) || 0;
38731
+ var currentPrice = (currentOption === null || currentOption === void 0 ? void 0 : currentOption.price) || 0;
38732
+ return sum + (currentPrice - initialPrice);
38733
+ }, 0);
38734
+ return basePrice + totalDelta;
38735
+ },
38736
+ [selectedBookingPackageDetails, packageKey]
38737
+ );
38708
38738
  return React__default['default'].createElement(
38709
38739
  React__default['default'].Fragment,
38710
38740
  null,
@@ -38723,11 +38753,7 @@ var GroupTourFlyIn = function (_a) {
38723
38753
  roomAccommodations.map(function (accommodation) {
38724
38754
  var _a;
38725
38755
  var selectedOption = getSelectedOptionForAccommodation(roomIndex, accommodation.accommodationCode);
38726
- var priceDifference = getPriceDifference(
38727
- selectedRoomOption === null || selectedRoomOption === void 0 ? void 0 : selectedRoomOption.price,
38728
- roomIndex,
38729
- accommodation.accommodationCode
38730
- );
38756
+ var priceDifference = getPriceDifference(roomIndex, accommodation.accommodationCode);
38731
38757
  return React__default['default'].createElement(
38732
38758
  'div',
38733
38759
  { className: 'flyin__acco__card', key: ''.concat(roomIndex, '-').concat(accommodation.accommodationCode) },
@@ -38759,7 +38785,7 @@ var GroupTourFlyIn = function (_a) {
38759
38785
  'button',
38760
38786
  {
38761
38787
  className:
38762
- (selectedRoomOption === null || selectedRoomOption === void 0 ? void 0 : selectedRoomOption.accommodationCode) ==
38788
+ (selectedRoomOption === null || selectedRoomOption === void 0 ? void 0 : selectedRoomOption.accommodationCode) ===
38763
38789
  accommodation.accommodationCode
38764
38790
  ? 'cta cta--select cta--selected'
38765
38791
  : 'cta cta--select',
@@ -38775,7 +38801,7 @@ var GroupTourFlyIn = function (_a) {
38775
38801
  );
38776
38802
  }
38777
38803
  },
38778
- (selectedRoomOption === null || selectedRoomOption === void 0 ? void 0 : selectedRoomOption.accommodationCode) ==
38804
+ (selectedRoomOption === null || selectedRoomOption === void 0 ? void 0 : selectedRoomOption.accommodationCode) ===
38779
38805
  accommodation.accommodationCode
38780
38806
  ? translations === null || translations === void 0
38781
38807
  ? void 0
@@ -38790,10 +38816,7 @@ var GroupTourFlyIn = function (_a) {
38790
38816
  React__default['default'].createElement(
38791
38817
  'span',
38792
38818
  { className: getPriceDifferenceClassName(priceDifference) },
38793
- formatPriceDifference(
38794
- priceDifference,
38795
- bookingPackageDetails === null || bookingPackageDetails === void 0 ? void 0 : bookingPackageDetails.currencyCode
38796
- )
38819
+ formatPriceDifference(priceDifference, bookingPackageDetails.currencyCode)
38797
38820
  )
38798
38821
  )
38799
38822
  )
@@ -38807,7 +38830,12 @@ var GroupTourFlyIn = function (_a) {
38807
38830
  React__default['default'].createElement(
38808
38831
  'div',
38809
38832
  { className: 'flyin__footer' },
38810
- React__default['default'].createElement('div', { className: 'flyin__footer__price' }, 'Total price: ', calculateTotalPrice()),
38833
+ React__default['default'].createElement(
38834
+ 'div',
38835
+ { className: 'flyin__footer__price' },
38836
+ 'Total price: ',
38837
+ formatPrice(adjustedTotalPrice, bookingPackageDetails.currencyCode)
38838
+ ),
38811
38839
  React__default['default'].createElement(
38812
38840
  'div',
38813
38841
  { className: 'flyin__button-wrapper' },
package/build/build-esm/index.js CHANGED
@@ -13432,6 +13432,9 @@ PERFORMANCE OF THIS SOFTWARE.
13432
13432
 
13433
13433
  var ENDPOINT = '/api/web/packaging';
13434
13434
  var ENDPOINT_ACCOMMODATIONS = ENDPOINT + '/accommodations';
13435
+ var ENDPOINT_ENTRY = function (magicLinkCode) {
13436
+ return ENDPOINT + '/entry/' + magicLinkCode;
13437
+ };
13435
13438
  // MANUAL PACKAGING SEARCH
13436
13439
  var searchPackagingAccommodations = function (config, request, signal) {
13437
13440
  var url = '' + config.host + ENDPOINT_ACCOMMODATIONS;
@@ -13439,6 +13442,11 @@ PERFORMANCE OF THIS SOFTWARE.
13439
13442
  var body = JSON.stringify(request);
13440
13443
  return post(url, apiKey, body, config.token, signal, true);
13441
13444
  };
13445
+ var getEntry = function (config, magicLinkCode, signal) {
13446
+ var apiKey = config.apiKey;
13447
+ var url = '' + config.host + ENDPOINT_ENTRY(magicLinkCode);
13448
+ return get(url, apiKey, config.token, signal, true);
13449
+ };
13442
13450
 
13443
13451
  exports.AllotmentType = AllotmentType;
13444
13452
  exports.ContactForm = ContactForm;
@@ -13483,6 +13491,7 @@ PERFORMANCE OF THIS SOFTWARE.
13483
13491
  exports.getAllotmentList = getAllotmentList;
13484
13492
  exports.getCountries = getCountries;
13485
13493
  exports.getCustomEntryStatus = getCustomEntryStatus;
13494
+ exports.getEntry = getEntry;
13486
13495
  exports.getEntryDetailv2 = getEntryDetailv2;
13487
13496
  exports.getEntryLight = getEntryLight;
13488
13497
  exports.getEntryList = getEntryList;
@@ -36473,6 +36482,7 @@ var mapItems = function (response) {
36473
36482
  });
36474
36483
  };
36475
36484
  var checkIfFinished = function (state) {
36485
+ console.log('Checking if finished with state:', state);
36476
36486
  if (state.lastSequenceId === null) return false;
36477
36487
  for (var i = 0; i <= state.lastSequenceId; i++) {
36478
36488
  if (!state.sequenceIds.includes(i)) return false;
@@ -37403,7 +37413,9 @@ var FlightsFlyIn = function (_a) {
37403
37413
  'div',
37404
37414
  {
37405
37415
  key: 'outward-flight-option-'.concat(index),
37406
- className: 'flyin__content-card '.concat(selectedOutwardFareCode === firstSegment.metaData.fareCode ? 'flyin__content-card--selected' : '')
37416
+ className: 'flyin__content-card flyin__content-card--flight '.concat(
37417
+ selectedOutwardFareCode === firstSegment.metaData.fareCode ? 'flyin__content-card--selected' : ''
37418
+ )
37407
37419
  },
37408
37420
  React__default.createElement(
37409
37421
  'div',
@@ -37684,7 +37696,9 @@ var FlightsFlyIn = function (_a) {
37684
37696
  'div',
37685
37697
  {
37686
37698
  key: 'return-flight-option-'.concat(index),
37687
- className: 'flyin__content-card '.concat(selectedReturnFareCode === firstSegment.metaData.fareCode ? 'flyin__content-card--selected' : '')
37699
+ className: 'flyin__content-card flyin__content-card--flight '.concat(
37700
+ selectedReturnFareCode === firstSegment.metaData.fareCode ? 'flyin__content-card--selected' : ''
37701
+ )
37688
37702
  },
37689
37703
  React__default.createElement(
37690
37704
  'div',
@@ -38368,6 +38382,27 @@ var GroupTourFlyIn = function (_a) {
38368
38382
  },
38369
38383
  [bookingPackageDetails]
38370
38384
  );
38385
+ var packageKey = ''
38386
+ .concat(bookingPackageDetails === null || bookingPackageDetails === void 0 ? void 0 : bookingPackageDetails.transactionId, '-')
38387
+ .concat(selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0 ? void 0 : selectedBookingPackageDetails.id);
38388
+ var initialSelectedOptionsRef = useRef({});
38389
+ useEffect(
38390
+ function () {
38391
+ if (!packageKey || !(selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0 ? void 0 : selectedBookingPackageDetails.rooms))
38392
+ return;
38393
+ if (!initialSelectedOptionsRef.current[packageKey]) {
38394
+ initialSelectedOptionsRef.current[packageKey] = {};
38395
+ }
38396
+ selectedBookingPackageDetails.rooms.forEach(function (room, roomIndex) {
38397
+ if (!initialSelectedOptionsRef.current[packageKey][roomIndex]) {
38398
+ initialSelectedOptionsRef.current[packageKey][roomIndex] = room.options.find(function (option) {
38399
+ return option.isSelected;
38400
+ });
38401
+ }
38402
+ });
38403
+ },
38404
+ [packageKey, selectedBookingPackageDetails]
38405
+ );
38371
38406
  var groupedRooms = useMemo(
38372
38407
  function () {
38373
38408
  if (!(selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0 ? void 0 : selectedBookingPackageDetails.rooms)) return [];
@@ -38395,19 +38430,14 @@ var GroupTourFlyIn = function (_a) {
38395
38430
  },
38396
38431
  [selectedBookingPackageDetails]
38397
38432
  );
38398
- if (!bookingPackageDetails) {
38433
+ if (!bookingPackageDetails || !selectedBookingPackageDetails) {
38399
38434
  return null;
38400
38435
  }
38401
38436
  var getSelectedOptionForRoom = function (roomIndex) {
38402
38437
  var _a, _b, _c;
38403
38438
  return (_c =
38404
- (_b =
38405
- (_a = selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0 ? void 0 : selectedBookingPackageDetails.rooms) === null ||
38406
- _a === void 0
38407
- ? void 0
38408
- : _a[roomIndex]) === null || _b === void 0
38409
- ? void 0
38410
- : _b.options) === null || _c === void 0
38439
+ (_b = (_a = selectedBookingPackageDetails.rooms) === null || _a === void 0 ? void 0 : _a[roomIndex]) === null || _b === void 0 ? void 0 : _b.options) ===
38440
+ null || _c === void 0
38411
38441
  ? void 0
38412
38442
  : _c.find(function (option) {
38413
38443
  return option.isSelected;
@@ -38416,18 +38446,18 @@ var GroupTourFlyIn = function (_a) {
38416
38446
  var getSelectedOptionForAccommodation = function (roomIndex, accommodationCode) {
38417
38447
  var _a, _b, _c;
38418
38448
  return (_c =
38419
- (_b =
38420
- (_a = selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0 ? void 0 : selectedBookingPackageDetails.rooms) === null ||
38421
- _a === void 0
38422
- ? void 0
38423
- : _a[roomIndex]) === null || _b === void 0
38424
- ? void 0
38425
- : _b.options) === null || _c === void 0
38449
+ (_b = (_a = selectedBookingPackageDetails.rooms) === null || _a === void 0 ? void 0 : _a[roomIndex]) === null || _b === void 0 ? void 0 : _b.options) ===
38450
+ null || _c === void 0
38426
38451
  ? void 0
38427
38452
  : _c.find(function (option) {
38428
38453
  return option.accommodationCode === accommodationCode && option.isSelected;
38429
38454
  });
38430
38455
  };
38456
+ var getInitialSelectedOptionForRoom = function (roomIndex) {
38457
+ var _a;
38458
+ if (!packageKey) return undefined;
38459
+ return (_a = initialSelectedOptionsRef.current[packageKey]) === null || _a === void 0 ? void 0 : _a[roomIndex];
38460
+ };
38431
38461
  var handlePick = function (roomIndex, selectedGuid) {
38432
38462
  if (!bookingPackageDetails || !selectedBookingPackageDetails) return;
38433
38463
  var updatedBookingPackageDetails = __assign(__assign({}, bookingPackageDetails), {
@@ -38455,52 +38485,39 @@ var GroupTourFlyIn = function (_a) {
38455
38485
  if (isOpen) {
38456
38486
  setIsOpen(false);
38457
38487
  }
38458
- console.log('Booking package details sent to onBook callback:', bookingPackageDetails);
38459
38488
  if (context === null || context === void 0 ? void 0 : context.onBook) {
38460
38489
  context.onBook(bookingPackageDetails);
38461
38490
  }
38462
38491
  };
38463
- var calculateTotalPrice = function () {
38464
- var selectedOptions =
38465
- selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0
38466
- ? void 0
38467
- : selectedBookingPackageDetails.rooms.flatMap(function (room) {
38468
- return room.options.filter(function (option) {
38469
- return option.isSelected;
38492
+ var getPriceDifference = function (roomIndex, accommodationCode, regimeId) {
38493
+ var _a, _b, _c, _d, _e, _f, _g;
38494
+ var currentSelectedOption = getSelectedOptionForRoom(roomIndex);
38495
+ var currentSelectedPrice = (currentSelectedOption === null || currentSelectedOption === void 0 ? void 0 : currentSelectedOption.price) || 0;
38496
+ var targetOption;
38497
+ if (regimeId) {
38498
+ targetOption =
38499
+ (_c =
38500
+ (_b = (_a = selectedBookingPackageDetails.rooms) === null || _a === void 0 ? void 0 : _a[roomIndex]) === null || _b === void 0
38501
+ ? void 0
38502
+ : _b.options) === null || _c === void 0
38503
+ ? void 0
38504
+ : _c.find(function (option) {
38505
+ return option.entryLineGuid === regimeId;
38470
38506
  });
38471
- });
38472
- var totalPrice =
38473
- selectedOptions === null || selectedOptions === void 0
38474
- ? void 0
38475
- : selectedOptions.reduce(function (total, option) {
38476
- return total + (option.price || 0);
38477
- }, 0);
38478
- return formatPrice(totalPrice, bookingPackageDetails === null || bookingPackageDetails === void 0 ? void 0 : bookingPackageDetails.currencyCode);
38479
- };
38480
- var getPriceDifference = function (currentSelectedPrice, roomIndex, accommodationCode, regimeId) {
38481
- var targetPrice = 0;
38482
- var selectedOption = getSelectedOptionForAccommodation(roomIndex, accommodationCode);
38483
- if (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.price) {
38484
- targetPrice = selectedOption.price;
38485
38507
  } else {
38486
- var firstOption =
38487
- selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0
38508
+ targetOption =
38509
+ (_d = getSelectedOptionForAccommodation(roomIndex, accommodationCode)) !== null && _d !== void 0
38510
+ ? _d
38511
+ : (_g =
38512
+ (_f = (_e = selectedBookingPackageDetails.rooms) === null || _e === void 0 ? void 0 : _e[roomIndex]) === null || _f === void 0
38513
+ ? void 0
38514
+ : _f.options) === null || _g === void 0
38488
38515
  ? void 0
38489
- : selectedBookingPackageDetails.rooms[roomIndex].options.find(function (option) {
38516
+ : _g.find(function (option) {
38490
38517
  return option.accommodationCode === accommodationCode;
38491
38518
  });
38492
- targetPrice = (firstOption === null || firstOption === void 0 ? void 0 : firstOption.price) || 0;
38493
- }
38494
- if (regimeId) {
38495
- var regimeOption =
38496
- selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0
38497
- ? void 0
38498
- : selectedBookingPackageDetails.rooms[roomIndex].options.find(function (option) {
38499
- return option.entryLineGuid === regimeId;
38500
- });
38501
- targetPrice = (regimeOption === null || regimeOption === void 0 ? void 0 : regimeOption.price) || 0;
38502
38519
  }
38503
- return targetPrice - (currentSelectedPrice || 0);
38520
+ return ((targetOption === null || targetOption === void 0 ? void 0 : targetOption.price) || 0) - currentSelectedPrice;
38504
38521
  };
38505
38522
  var formatPriceDifference = function (difference, currencyCode) {
38506
38523
  if (difference === 0) {
@@ -38519,15 +38536,28 @@ var GroupTourFlyIn = function (_a) {
38519
38536
  return 'flyin__acco__price';
38520
38537
  };
38521
38538
  var regimeFormatter = function (roomIndex, accommodation, regimeId, label) {
38522
- var roomOption = getSelectedOptionForRoom(roomIndex);
38523
- var difference = getPriceDifference(
38524
- roomOption === null || roomOption === void 0 ? void 0 : roomOption.price,
38525
- roomIndex,
38526
- accommodation.accommodationCode,
38527
- regimeId
38528
- );
38539
+ var difference = getPriceDifference(roomIndex, accommodation.accommodationCode, regimeId);
38529
38540
  return ''.concat(label, ' ').concat(difference !== 0 ? '('.concat(formatPriceDifference(difference, bookingPackageDetails.currencyCode), ')') : '');
38530
38541
  };
38542
+ var adjustedTotalPrice = useMemo(
38543
+ function () {
38544
+ if (!selectedBookingPackageDetails.rooms || typeof selectedBookingPackageDetails.price !== 'number') {
38545
+ return 0;
38546
+ }
38547
+ var basePrice = selectedBookingPackageDetails.price;
38548
+ var totalDelta = selectedBookingPackageDetails.rooms.reduce(function (sum, room, roomIndex) {
38549
+ var initialOption = getInitialSelectedOptionForRoom(roomIndex);
38550
+ var currentOption = room.options.find(function (option) {
38551
+ return option.isSelected;
38552
+ });
38553
+ var initialPrice = (initialOption === null || initialOption === void 0 ? void 0 : initialOption.price) || 0;
38554
+ var currentPrice = (currentOption === null || currentOption === void 0 ? void 0 : currentOption.price) || 0;
38555
+ return sum + (currentPrice - initialPrice);
38556
+ }, 0);
38557
+ return basePrice + totalDelta;
38558
+ },
38559
+ [selectedBookingPackageDetails, packageKey]
38560
+ );
38531
38561
  return React__default.createElement(
38532
38562
  React__default.Fragment,
38533
38563
  null,
@@ -38546,11 +38576,7 @@ var GroupTourFlyIn = function (_a) {
38546
38576
  roomAccommodations.map(function (accommodation) {
38547
38577
  var _a;
38548
38578
  var selectedOption = getSelectedOptionForAccommodation(roomIndex, accommodation.accommodationCode);
38549
- var priceDifference = getPriceDifference(
38550
- selectedRoomOption === null || selectedRoomOption === void 0 ? void 0 : selectedRoomOption.price,
38551
- roomIndex,
38552
- accommodation.accommodationCode
38553
- );
38579
+ var priceDifference = getPriceDifference(roomIndex, accommodation.accommodationCode);
38554
38580
  return React__default.createElement(
38555
38581
  'div',
38556
38582
  { className: 'flyin__acco__card', key: ''.concat(roomIndex, '-').concat(accommodation.accommodationCode) },
@@ -38582,7 +38608,7 @@ var GroupTourFlyIn = function (_a) {
38582
38608
  'button',
38583
38609
  {
38584
38610
  className:
38585
- (selectedRoomOption === null || selectedRoomOption === void 0 ? void 0 : selectedRoomOption.accommodationCode) ==
38611
+ (selectedRoomOption === null || selectedRoomOption === void 0 ? void 0 : selectedRoomOption.accommodationCode) ===
38586
38612
  accommodation.accommodationCode
38587
38613
  ? 'cta cta--select cta--selected'
38588
38614
  : 'cta cta--select',
@@ -38594,7 +38620,7 @@ var GroupTourFlyIn = function (_a) {
38594
38620
  );
38595
38621
  }
38596
38622
  },
38597
- (selectedRoomOption === null || selectedRoomOption === void 0 ? void 0 : selectedRoomOption.accommodationCode) ==
38623
+ (selectedRoomOption === null || selectedRoomOption === void 0 ? void 0 : selectedRoomOption.accommodationCode) ===
38598
38624
  accommodation.accommodationCode
38599
38625
  ? translations === null || translations === void 0
38600
38626
  ? void 0
@@ -38609,10 +38635,7 @@ var GroupTourFlyIn = function (_a) {
38609
38635
  React__default.createElement(
38610
38636
  'span',
38611
38637
  { className: getPriceDifferenceClassName(priceDifference) },
38612
- formatPriceDifference(
38613
- priceDifference,
38614
- bookingPackageDetails === null || bookingPackageDetails === void 0 ? void 0 : bookingPackageDetails.currencyCode
38615
- )
38638
+ formatPriceDifference(priceDifference, bookingPackageDetails.currencyCode)
38616
38639
  )
38617
38640
  )
38618
38641
  )
@@ -38626,7 +38649,12 @@ var GroupTourFlyIn = function (_a) {
38626
38649
  React__default.createElement(
38627
38650
  'div',
38628
38651
  { className: 'flyin__footer' },
38629
- React__default.createElement('div', { className: 'flyin__footer__price' }, 'Total price: ', calculateTotalPrice()),
38652
+ React__default.createElement(
38653
+ 'div',
38654
+ { className: 'flyin__footer__price' },
38655
+ 'Total price: ',
38656
+ formatPrice(adjustedTotalPrice, bookingPackageDetails.currencyCode)
38657
+ ),
38630
38658
  React__default.createElement(
38631
38659
  'div',
38632
38660
  { className: 'flyin__button-wrapper' },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@qite/tide-booking-component",
3
- "version": "1.4.89",
3
+ "version": "1.4.91",
4
4
  "description": "React Booking wizard & Booking product component for Tide",
5
5
  "main": "build/build-cjs/index.js",
6
6
  "types": "build/build-cjs/src/index.d.ts",
@@ -29,7 +29,7 @@
29
29
  "devDependencies": {
30
30
  "@jsonurl/jsonurl": "^1.1.4",
31
31
  "@popperjs/core": "^2.10.2",
32
- "@qite/tide-client": "^1.1.151",
32
+ "@qite/tide-client": "^1.1.152",
33
33
  "@reduxjs/toolkit": "^2.8.2",
34
34
  "@rollup/plugin-commonjs": "^19.0.1",
35
35
  "@rollup/plugin-json": "^4.1.0",
package/src/search-results/components/flight/flight-search-context/index.tsx CHANGED
@@ -111,6 +111,7 @@ const mapItems = (response: FlightSearchResponse) =>
111
111
  );
112
112
 
113
113
  const checkIfFinished = (state: SearchState) => {
114
+ console.log('Checking if finished with state:', state);
114
115
  if (state.lastSequenceId === null) return false;
115
116
 
116
117
  for (let i = 0; i <= state.lastSequenceId; i++) {
package/src/shared/components/flyin/flights-flyin.tsx CHANGED
@@ -200,7 +200,9 @@ const FlightsFlyIn: React.FC<FlightsFlyInProps> = ({ isOpen, setIsOpen }) => {
200
200
  return (
201
201
  <div
202
202
  key={`outward-flight-option-${index}`}
203
- className={`flyin__content-card ${selectedOutwardFareCode === firstSegment.metaData.fareCode ? 'flyin__content-card--selected' : ''}`}>
203
+ className={`flyin__content-card flyin__content-card--flight ${
204
+ selectedOutwardFareCode === firstSegment.metaData.fareCode ? 'flyin__content-card--selected' : ''
205
+ }`}>
204
206
  <div className="flyin__content-card-top">
205
207
  <span className="flyin__content-card-top-tag">{firstSegment.metaData.fareMarketingName}</span>
206
208
  {diff !== null && diff != 0 && (
@@ -362,7 +364,9 @@ const FlightsFlyIn: React.FC<FlightsFlyInProps> = ({ isOpen, setIsOpen }) => {
362
364
  return (
363
365
  <div
364
366
  key={`return-flight-option-${index}`}
365
- className={`flyin__content-card ${selectedReturnFareCode === firstSegment.metaData.fareCode ? 'flyin__content-card--selected' : ''}`}>
367
+ className={`flyin__content-card flyin__content-card--flight ${
368
+ selectedReturnFareCode === firstSegment.metaData.fareCode ? 'flyin__content-card--selected' : ''
369
+ }`}>
366
370
  <div className="flyin__content-card-top">
367
371
  <span className="flyin__content-card-top-tag">{firstSegment.metaData.fareMarketingName}</span>
368
372
  {diff !== null && diff != 0 && (
package/src/shared/components/flyin/group-tour-flyin.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useContext, useMemo } from 'react';
1
+ import React, { useContext, useMemo, useRef, useEffect } from 'react';
2
2
  import { useDispatch, useSelector } from 'react-redux';
3
3
  import ItemPicker from '../../../qsm/components/item-picker';
4
4
  import { SearchResultsRootState } from '../../../search-results/store/search-results-store';
@@ -22,6 +22,8 @@ type GroupedAccommodation = {
22
22
  regimes: PickerItem[];
23
23
  };
24
24
 
25
+ type RoomOption = BookingPackageOption['rooms'][number]['options'][number];
26
+
25
27
  const formatPrice = (price?: number, currencyCode = 'EUR') => {
26
28
  if (typeof price !== 'number') return '';
27
29
 
@@ -48,6 +50,24 @@ const GroupTourFlyIn: React.FC<GroupTourFlyInProps> = ({ isLoading, isOpen, setI
48
50
  return bookingPackageDetails?.options?.find((x) => x.isSelected);
49
51
  }, [bookingPackageDetails]);
50
52
 
53
+ const packageKey = `${bookingPackageDetails?.transactionId}-${selectedBookingPackageDetails?.id}`;
54
+
55
+ const initialSelectedOptionsRef = useRef<Record<string, Record<number, RoomOption | undefined>>>({});
56
+
57
+ useEffect(() => {
58
+ if (!packageKey || !selectedBookingPackageDetails?.rooms) return;
59
+
60
+ if (!initialSelectedOptionsRef.current[packageKey]) {
61
+ initialSelectedOptionsRef.current[packageKey] = {};
62
+ }
63
+
64
+ selectedBookingPackageDetails.rooms.forEach((room, roomIndex) => {
65
+ if (!initialSelectedOptionsRef.current[packageKey][roomIndex]) {
66
+ initialSelectedOptionsRef.current[packageKey][roomIndex] = room.options.find((option) => option.isSelected);
67
+ }
68
+ });
69
+ }, [packageKey, selectedBookingPackageDetails]);
70
+
51
71
  const groupedRooms = useMemo(() => {
52
72
  if (!selectedBookingPackageDetails?.rooms) return [];
53
73
 
@@ -75,16 +95,21 @@ const GroupTourFlyIn: React.FC<GroupTourFlyInProps> = ({ isLoading, isOpen, setI
75
95
  });
76
96
  }, [selectedBookingPackageDetails]);
77
97
 
78
- if (!bookingPackageDetails) {
98
+ if (!bookingPackageDetails || !selectedBookingPackageDetails) {
79
99
  return null;
80
100
  }
81
101
 
82
102
  const getSelectedOptionForRoom = (roomIndex: number) => {
83
- return selectedBookingPackageDetails?.rooms?.[roomIndex]?.options?.find((option) => option.isSelected);
103
+ return selectedBookingPackageDetails.rooms?.[roomIndex]?.options?.find((option) => option.isSelected);
84
104
  };
85
105
 
86
106
  const getSelectedOptionForAccommodation = (roomIndex: number, accommodationCode: string) => {
87
- return selectedBookingPackageDetails?.rooms?.[roomIndex]?.options?.find((option) => option.accommodationCode === accommodationCode && option.isSelected);
107
+ return selectedBookingPackageDetails.rooms?.[roomIndex]?.options?.find((option) => option.accommodationCode === accommodationCode && option.isSelected);
108
+ };
109
+
110
+ const getInitialSelectedOptionForRoom = (roomIndex: number) => {
111
+ if (!packageKey) return undefined;
112
+ return initialSelectedOptionsRef.current[packageKey]?.[roomIndex];
88
113
  };
89
114
 
90
115
  const handlePick = (roomIndex: number, selectedGuid?: string) => {
@@ -123,36 +148,27 @@ const GroupTourFlyIn: React.FC<GroupTourFlyInProps> = ({ isLoading, isOpen, setI
123
148
  if (isOpen) {
124
149
  setIsOpen(false);
125
150
  }
126
- console.log('Booking package details sent to onBook callback:', bookingPackageDetails);
151
+
127
152
  if (context?.onBook) {
128
153
  context.onBook(bookingPackageDetails);
129
154
  }
130
155
  };
131
156
 
132
- const calculateTotalPrice = () => {
133
- const selectedOptions = selectedBookingPackageDetails?.rooms.flatMap((room) => room.options.filter((option) => option.isSelected));
134
- const totalPrice = selectedOptions?.reduce((total, option) => total + (option.price || 0), 0);
135
- return formatPrice(totalPrice, bookingPackageDetails?.currencyCode);
136
- };
137
-
138
- const getPriceDifference = (currentSelectedPrice: number | undefined, roomIndex: number, accommodationCode: string, regimeId?: string) => {
139
- let targetPrice = 0;
157
+ const getPriceDifference = (roomIndex: number, accommodationCode: string, regimeId?: string) => {
158
+ const currentSelectedOption = getSelectedOptionForRoom(roomIndex);
159
+ const currentSelectedPrice = currentSelectedOption?.price || 0;
140
160
 
141
- const selectedOption = getSelectedOptionForAccommodation(roomIndex, accommodationCode);
142
-
143
- if (selectedOption?.price) {
144
- targetPrice = selectedOption.price;
145
- } else {
146
- const firstOption = selectedBookingPackageDetails?.rooms[roomIndex].options.find((option) => option.accommodationCode === accommodationCode);
147
- targetPrice = firstOption?.price || 0;
148
- }
161
+ let targetOption;
149
162
 
150
163
  if (regimeId) {
151
- const regimeOption = selectedBookingPackageDetails?.rooms[roomIndex].options.find((option) => option.entryLineGuid === regimeId);
152
- targetPrice = regimeOption?.price || 0;
164
+ targetOption = selectedBookingPackageDetails.rooms?.[roomIndex]?.options?.find((option) => option.entryLineGuid === regimeId);
165
+ } else {
166
+ targetOption =
167
+ getSelectedOptionForAccommodation(roomIndex, accommodationCode) ??
168
+ selectedBookingPackageDetails.rooms?.[roomIndex]?.options?.find((option) => option.accommodationCode === accommodationCode);
153
169
  }
154
170
 
155
- return targetPrice - (currentSelectedPrice || 0);
171
+ return (targetOption?.price || 0) - currentSelectedPrice;
156
172
  };
157
173
 
158
174
  const formatPriceDifference = (difference: number, currencyCode: string) => {
@@ -177,13 +193,30 @@ const GroupTourFlyIn: React.FC<GroupTourFlyInProps> = ({ isLoading, isOpen, setI
177
193
  };
178
194
 
179
195
  const regimeFormatter = (roomIndex: number, accommodation: GroupedAccommodation, regimeId: string, label: string) => {
180
- const roomOption = getSelectedOptionForRoom(roomIndex);
181
-
182
- const difference = getPriceDifference(roomOption?.price, roomIndex, accommodation.accommodationCode, regimeId);
183
-
196
+ const difference = getPriceDifference(roomIndex, accommodation.accommodationCode, regimeId);
184
197
  return `${label} ${difference !== 0 ? `(${formatPriceDifference(difference, bookingPackageDetails.currencyCode)})` : ''}`;
185
198
  };
186
199
 
200
+ const adjustedTotalPrice = useMemo(() => {
201
+ if (!selectedBookingPackageDetails.rooms || typeof selectedBookingPackageDetails.price !== 'number') {
202
+ return 0;
203
+ }
204
+
205
+ const basePrice = selectedBookingPackageDetails.price;
206
+
207
+ const totalDelta = selectedBookingPackageDetails.rooms.reduce((sum, room, roomIndex) => {
208
+ const initialOption = getInitialSelectedOptionForRoom(roomIndex);
209
+ const currentOption = room.options.find((option) => option.isSelected);
210
+
211
+ const initialPrice = initialOption?.price || 0;
212
+ const currentPrice = currentOption?.price || 0;
213
+
214
+ return sum + (currentPrice - initialPrice);
215
+ }, 0);
216
+
217
+ return basePrice + totalDelta;
218
+ }, [selectedBookingPackageDetails, packageKey]);
219
+
187
220
  return (
188
221
  <>
189
222
  <div className="flyin__content">
@@ -196,7 +229,8 @@ const GroupTourFlyIn: React.FC<GroupTourFlyInProps> = ({ isLoading, isOpen, setI
196
229
  <div className="flyin__acco__cards">
197
230
  {roomAccommodations.map((accommodation) => {
198
231
  const selectedOption = getSelectedOptionForAccommodation(roomIndex, accommodation.accommodationCode);
199
- const priceDifference = getPriceDifference(selectedRoomOption?.price, roomIndex, accommodation.accommodationCode);
232
+ const priceDifference = getPriceDifference(roomIndex, accommodation.accommodationCode);
233
+
200
234
  return (
201
235
  <div className="flyin__acco__card" key={`${roomIndex}-${accommodation.accommodationCode}`}>
202
236
  <div className="flyin__acco__content">
@@ -207,8 +241,8 @@ const GroupTourFlyIn: React.FC<GroupTourFlyInProps> = ({ isLoading, isOpen, setI
207
241
  <ItemPicker
208
242
  items={accommodation.regimes}
209
243
  selection={selectedOption != null ? selectedOption.regimeName ?? 'No regime' : undefined}
210
- label={''}
211
- placeholder={'Select regime'}
244
+ label=""
245
+ placeholder="Select regime"
212
246
  classModifier=""
213
247
  onPick={(selected, selectedGuid) => handlePick(roomIndex, selectedGuid)}
214
248
  valueFormatter={(id, label) => regimeFormatter(roomIndex, accommodation, id, label)}
@@ -217,19 +251,19 @@ const GroupTourFlyIn: React.FC<GroupTourFlyInProps> = ({ isLoading, isOpen, setI
217
251
  <div className="flyin__acco__footer__actions">
218
252
  <button
219
253
  className={
220
- selectedRoomOption?.accommodationCode == accommodation.accommodationCode ? 'cta cta--select cta--selected' : 'cta cta--select'
254
+ selectedRoomOption?.accommodationCode === accommodation.accommodationCode ? 'cta cta--select cta--selected' : 'cta cta--select'
221
255
  }
222
256
  onClick={() => {
223
257
  handlePick(roomIndex, selectedOption ? selectedOption.entryLineGuid : first(accommodation.regimes)?.id);
224
258
  }}>
225
- {selectedRoomOption?.accommodationCode == accommodation.accommodationCode
259
+ {selectedRoomOption?.accommodationCode === accommodation.accommodationCode
226
260
  ? translations?.SHARED.SELECTED
227
261
  : translations?.SHARED.SELECT}
228
262
  </button>
229
263
 
230
264
  <div className="flyin__acco__price__wrapper">
231
265
  <span className={getPriceDifferenceClassName(priceDifference)}>
232
- {formatPriceDifference(priceDifference, bookingPackageDetails?.currencyCode)}
266
+ {formatPriceDifference(priceDifference, bookingPackageDetails.currencyCode)}
233
267
  </span>
234
268
  </div>
235
269
  </div>
@@ -244,7 +278,7 @@ const GroupTourFlyIn: React.FC<GroupTourFlyInProps> = ({ isLoading, isOpen, setI
244
278
  </div>
245
279
 
246
280
  <div className="flyin__footer">
247
- <div className="flyin__footer__price">Total price: {calculateTotalPrice()}</div>
281
+ <div className="flyin__footer__price">Total price: {formatPrice(adjustedTotalPrice, bookingPackageDetails.currencyCode)}</div>
248
282
 
249
283
  <div className="flyin__button-wrapper">
250
284
  <button className="cta cta--select" onClick={handleConfirm}>
package/styles/components/_flyin.scss CHANGED
@@ -281,160 +281,160 @@
281
281
 
282
282
  // Slicing with image and usps,
283
283
  // not available in the current API response.
284
- // &-card {
285
- // // height: 522px;
286
- // width: 100%;
287
- // max-width: 315px;
288
- // min-width: 315px;
289
-
290
- // border-radius: 16px;
291
- // box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
292
- // display: flex;
293
- // flex-direction: column;
294
- // justify-content: space-between;
295
- // overflow: hidden;
296
- // background: var(--tide-booking-white);
297
- // transition: all 0.4s ease;
298
- // cursor: pointer;
299
-
300
- // @include mixins.media-sm {
301
- // max-width: 345px;
302
- // min-width: 345px;
303
- // }
304
-
305
- // &:hover {
306
- // .flyin__content-card-top {
307
- // background: var(--tide-booking-color-primary-fade);
308
- // }
309
-
310
- // .flyin__content-card-button {
311
- // // background: var(--tide-booking-color-primary);
312
- // color: var(--tide-booking-white);
313
-
314
- // .cta--select {
315
- // background: var(--tide-booking-cta-background-select-hover);
316
- // }
317
- // }
318
- // }
319
-
320
- // &--selected {
321
- // .flyin__content-card-top {
322
- // background: var(--tide-booking-color-primary-gradient);
323
- // border-bottom: none;
324
- // }
325
-
326
- // .flyin__content-card-top-price {
327
- // color: var(--tide-booking-white);
328
- // }
329
-
330
- // .flyin__content-card-top-tag {
331
- // color: var(--tide-booking-white);
332
- // }
333
-
334
- // .flyin__content-card-middle {
335
- // // border-left: 4px solid var(--tide-booking-color-primary);
336
- // // border-right: 4px solid var(--tide-booking-color-primary);
337
- // }
338
-
339
- // &:hover {
340
- // .flyin__content {
341
- // cursor: default;
342
- // }
343
-
344
- // .flyin__content-card-top {
345
- // background: var(--tide-booking-color-primary-gradient);
346
- // }
347
- // }
348
- // }
349
-
350
- // &-top {
351
- // min-height: 60px;
352
- // width: 100%;
353
- // background: var(--tide-booking-color-primary);
354
- // display: flex;
355
- // justify-content: space-between;
356
- // align-items: end;
357
- // padding: 0 15px 12px 15px;
358
- // background: var(--tide-booking-white);
359
- // transition: all 0.4s ease;
360
-
361
- // &-price {
362
- // font-size: 18px;
363
- // font-weight: 700;
364
- // color: var(--tide-booking-black);
365
-
366
- // &--decrease {
367
- // color: green;
368
- // }
369
-
370
- // &--increase {
371
- // color: red;
372
- // }
373
- // }
374
-
375
- // &-tag {
376
- // font-size: 24px;
377
- // color: var(--tide-booking-black);
378
- // /* color: variables.$white; */
379
- // font-weight: 700;
380
- // }
381
- // }
382
-
383
- // &-middle {
384
- // height: 430px;
385
- // background: var(--tide-booking-white);
386
- // transition: all 0.4s ease;
387
-
388
- // &-rows {
389
- // display: flex;
390
- // flex-direction: column;
391
- // gap: 10px;
392
- // padding: 15px 15px 0 15px;
393
- // max-height: 430px;
394
- // }
395
-
396
- // &-row {
397
- // display: flex;
398
- // justify-content: space-between;
399
- // align-items: center;
400
- // padding-bottom: 5px;
401
- // border-bottom: 1px dashed var(--tide-booking-color-primary-light);
402
-
403
- // &-left {
404
- // font-weight: 500;
405
- // color: var(--tide-booking-black);
406
- // }
407
-
408
- // &-right {
409
- // font-weight: 300;
410
- // }
411
- // }
412
- // }
413
-
414
- // &-bottom {
415
- // height: 30px;
416
- // background: var(--tide-booking-color-primary);
417
- // display: flex;
418
- // justify-content: center;
419
- // align-items: center;
420
- // color: var(--tide-booking-white);
421
- // font-size: 14px;
422
- // transition: all 0.4s ease;
423
- // }
424
-
425
- // &-button {
426
- // // border: 1.25px solid var(--tide-booking-color-primary);
427
- // border-radius: 3px;
428
- // display: flex;
429
- // justify-content: center;
430
- // align-items: center;
431
- // color: var(--tide-booking-color-primary);
432
- // padding: 15px;
433
- // cursor: pointer;
434
- // font-size: 14px;
435
- // transition: all 0.2s ease;
436
- // }
437
- // }
284
+ &-card--flight {
285
+ // height: 522px;
286
+ width: 100%;
287
+ max-width: 315px;
288
+ min-width: 315px;
289
+
290
+ border-radius: 16px;
291
+ box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
292
+ display: flex;
293
+ flex-direction: column;
294
+ justify-content: space-between;
295
+ overflow: hidden;
296
+ background: var(--tide-booking-white);
297
+ transition: all 0.4s ease;
298
+ cursor: pointer;
299
+
300
+ @include mixins.media-sm {
301
+ max-width: 345px;
302
+ min-width: 345px;
303
+ }
304
+
305
+ &:hover {
306
+ .flyin__content-card-top {
307
+ background: var(--tide-booking-color-primary-fade);
308
+ }
309
+
310
+ .flyin__content-card-button {
311
+ // background: var(--tide-booking-color-primary);
312
+ color: var(--tide-booking-white);
313
+
314
+ .cta--select {
315
+ background: var(--tide-booking-cta-background-select-hover);
316
+ }
317
+ }
318
+ }
319
+
320
+ &.flyin__content-card--selected {
321
+ .flyin__content-card-top {
322
+ background: var(--tide-booking-color-primary-gradient);
323
+ border-bottom: none;
324
+ }
325
+
326
+ .flyin__content-card-top-price {
327
+ color: var(--tide-booking-white);
328
+ }
329
+
330
+ .flyin__content-card-top-tag {
331
+ color: var(--tide-booking-white);
332
+ }
333
+
334
+ .flyin__content-card-middle {
335
+ // border-left: 4px solid var(--tide-booking-color-primary);
336
+ // border-right: 4px solid var(--tide-booking-color-primary);
337
+ }
338
+
339
+ &:hover {
340
+ .flyin__content {
341
+ cursor: default;
342
+ }
343
+
344
+ .flyin__content-card-top {
345
+ background: var(--tide-booking-color-primary-gradient);
346
+ }
347
+ }
348
+ }
349
+
350
+ .flyin__content-card-top {
351
+ min-height: 60px;
352
+ width: 100%;
353
+ background: var(--tide-booking-color-primary);
354
+ display: flex;
355
+ justify-content: space-between;
356
+ align-items: end;
357
+ padding: 0 15px 12px 15px;
358
+ background: var(--tide-booking-white);
359
+ transition: all 0.4s ease;
360
+
361
+ &-price {
362
+ font-size: 18px;
363
+ font-weight: 700;
364
+ color: var(--tide-booking-black);
365
+
366
+ &--decrease {
367
+ color: green;
368
+ }
369
+
370
+ &--increase {
371
+ color: red;
372
+ }
373
+ }
374
+
375
+ &-tag {
376
+ font-size: 24px;
377
+ color: var(--tide-booking-black);
378
+ /* color: variables.$white; */
379
+ font-weight: 700;
380
+ }
381
+ }
382
+
383
+ .flyin__content-card-middle {
384
+ height: 430px;
385
+ background: var(--tide-booking-white);
386
+ transition: all 0.4s ease;
387
+
388
+ &-rows {
389
+ display: flex;
390
+ flex-direction: column;
391
+ gap: 10px;
392
+ padding: 15px 15px 0 15px;
393
+ max-height: 430px;
394
+ }
395
+
396
+ &-row {
397
+ display: flex;
398
+ justify-content: space-between;
399
+ align-items: center;
400
+ padding-bottom: 5px;
401
+ border-bottom: 1px dashed var(--tide-booking-color-primary-light);
402
+
403
+ &-left {
404
+ font-weight: 500;
405
+ color: var(--tide-booking-black);
406
+ }
407
+
408
+ &-right {
409
+ font-weight: 300;
410
+ }
411
+ }
412
+ }
413
+
414
+ .flyin__content-card-bottom {
415
+ height: 30px;
416
+ background: var(--tide-booking-color-primary);
417
+ display: flex;
418
+ justify-content: center;
419
+ align-items: center;
420
+ color: var(--tide-booking-white);
421
+ font-size: 14px;
422
+ transition: all 0.4s ease;
423
+ }
424
+
425
+ .flyin__content-card-button {
426
+ // border: 1.25px solid var(--tide-booking-color-primary);
427
+ border-radius: 3px;
428
+ display: flex;
429
+ justify-content: center;
430
+ align-items: center;
431
+ color: var(--tide-booking-color-primary);
432
+ padding: 15px;
433
+ cursor: pointer;
434
+ font-size: 14px;
435
+ transition: all 0.2s ease;
436
+ }
437
+ }
438
438
 
439
439
  &-data {
440
440
  display: flex;
package/styles/components/_tree.scss CHANGED
@@ -384,11 +384,7 @@
384
384
  }
385
385
 
386
386
  &--parent {
387
- top: 7.5px;
388
-
389
- @include media-lg {
390
- top: 14px;
391
- }
387
+ top: 0;
392
388
 
393
389
  & + span {
394
390
  margin-top: 0px;