@qite/tide-booking-component 1.4.89 → 1.4.90

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 (4) hide show
  1. package/build/build-cjs/index.js +84 -70
  2. package/build/build-esm/index.js +84 -70
  3. package/package.json +1 -1
  4. package/src/shared/components/flyin/group-tour-flyin.tsx +69 -35
package/build/build-cjs/index.js CHANGED
@@ -38545,6 +38545,27 @@ var GroupTourFlyIn = function (_a) {
38545
38545
  },
38546
38546
  [bookingPackageDetails]
38547
38547
  );
38548
+ var packageKey = ''
38549
+ .concat(bookingPackageDetails === null || bookingPackageDetails === void 0 ? void 0 : bookingPackageDetails.transactionId, '-')
38550
+ .concat(selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0 ? void 0 : selectedBookingPackageDetails.id);
38551
+ var initialSelectedOptionsRef = React.useRef({});
38552
+ React.useEffect(
38553
+ function () {
38554
+ if (!packageKey || !(selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0 ? void 0 : selectedBookingPackageDetails.rooms))
38555
+ return;
38556
+ if (!initialSelectedOptionsRef.current[packageKey]) {
38557
+ initialSelectedOptionsRef.current[packageKey] = {};
38558
+ }
38559
+ selectedBookingPackageDetails.rooms.forEach(function (room, roomIndex) {
38560
+ if (!initialSelectedOptionsRef.current[packageKey][roomIndex]) {
38561
+ initialSelectedOptionsRef.current[packageKey][roomIndex] = room.options.find(function (option) {
38562
+ return option.isSelected;
38563
+ });
38564
+ }
38565
+ });
38566
+ },
38567
+ [packageKey, selectedBookingPackageDetails]
38568
+ );
38548
38569
  var groupedRooms = React.useMemo(
38549
38570
  function () {
38550
38571
  if (!(selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0 ? void 0 : selectedBookingPackageDetails.rooms)) return [];
@@ -38572,19 +38593,14 @@ var GroupTourFlyIn = function (_a) {
38572
38593
  },
38573
38594
  [selectedBookingPackageDetails]
38574
38595
  );
38575
- if (!bookingPackageDetails) {
38596
+ if (!bookingPackageDetails || !selectedBookingPackageDetails) {
38576
38597
  return null;
38577
38598
  }
38578
38599
  var getSelectedOptionForRoom = function (roomIndex) {
38579
38600
  var _a, _b, _c;
38580
38601
  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
38602
+ (_b = (_a = selectedBookingPackageDetails.rooms) === null || _a === void 0 ? void 0 : _a[roomIndex]) === null || _b === void 0 ? void 0 : _b.options) ===
38603
+ null || _c === void 0
38588
38604
  ? void 0
38589
38605
  : _c.find(function (option) {
38590
38606
  return option.isSelected;
@@ -38593,18 +38609,18 @@ var GroupTourFlyIn = function (_a) {
38593
38609
  var getSelectedOptionForAccommodation = function (roomIndex, accommodationCode) {
38594
38610
  var _a, _b, _c;
38595
38611
  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
38612
+ (_b = (_a = selectedBookingPackageDetails.rooms) === null || _a === void 0 ? void 0 : _a[roomIndex]) === null || _b === void 0 ? void 0 : _b.options) ===
38613
+ null || _c === void 0
38603
38614
  ? void 0
38604
38615
  : _c.find(function (option) {
38605
38616
  return option.accommodationCode === accommodationCode && option.isSelected;
38606
38617
  });
38607
38618
  };
38619
+ var getInitialSelectedOptionForRoom = function (roomIndex) {
38620
+ var _a;
38621
+ if (!packageKey) return undefined;
38622
+ return (_a = initialSelectedOptionsRef.current[packageKey]) === null || _a === void 0 ? void 0 : _a[roomIndex];
38623
+ };
38608
38624
  var handlePick = function (roomIndex, selectedGuid) {
38609
38625
  if (!bookingPackageDetails || !selectedBookingPackageDetails) return;
38610
38626
  var updatedBookingPackageDetails = __assign(__assign({}, bookingPackageDetails), {
@@ -38632,52 +38648,39 @@ var GroupTourFlyIn = function (_a) {
38632
38648
  if (isOpen) {
38633
38649
  setIsOpen(false);
38634
38650
  }
38635
- console.log('Booking package details sent to onBook callback:', bookingPackageDetails);
38636
38651
  if (context === null || context === void 0 ? void 0 : context.onBook) {
38637
38652
  context.onBook(bookingPackageDetails);
38638
38653
  }
38639
38654
  };
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;
38655
+ var getPriceDifference = function (roomIndex, accommodationCode, regimeId) {
38656
+ var _a, _b, _c, _d, _e, _f, _g;
38657
+ var currentSelectedOption = getSelectedOptionForRoom(roomIndex);
38658
+ var currentSelectedPrice = (currentSelectedOption === null || currentSelectedOption === void 0 ? void 0 : currentSelectedOption.price) || 0;
38659
+ var targetOption;
38660
+ if (regimeId) {
38661
+ targetOption =
38662
+ (_c =
38663
+ (_b = (_a = selectedBookingPackageDetails.rooms) === null || _a === void 0 ? void 0 : _a[roomIndex]) === null || _b === void 0
38664
+ ? void 0
38665
+ : _b.options) === null || _c === void 0
38666
+ ? void 0
38667
+ : _c.find(function (option) {
38668
+ return option.entryLineGuid === regimeId;
38647
38669
  });
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
38670
  } else {
38663
- var firstOption =
38664
- selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0
38671
+ targetOption =
38672
+ (_d = getSelectedOptionForAccommodation(roomIndex, accommodationCode)) !== null && _d !== void 0
38673
+ ? _d
38674
+ : (_g =
38675
+ (_f = (_e = selectedBookingPackageDetails.rooms) === null || _e === void 0 ? void 0 : _e[roomIndex]) === null || _f === void 0
38676
+ ? void 0
38677
+ : _f.options) === null || _g === void 0
38665
38678
  ? void 0
38666
- : selectedBookingPackageDetails.rooms[roomIndex].options.find(function (option) {
38679
+ : _g.find(function (option) {
38667
38680
  return option.accommodationCode === accommodationCode;
38668
38681
  });
38669
- targetPrice = (firstOption === null || firstOption === void 0 ? void 0 : firstOption.price) || 0;
38670
38682
  }
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
- }
38680
- return targetPrice - (currentSelectedPrice || 0);
38683
+ return ((targetOption === null || targetOption === void 0 ? void 0 : targetOption.price) || 0) - currentSelectedPrice;
38681
38684
  };
38682
38685
  var formatPriceDifference = function (difference, currencyCode) {
38683
38686
  if (difference === 0) {
@@ -38696,15 +38699,28 @@ var GroupTourFlyIn = function (_a) {
38696
38699
  return 'flyin__acco__price';
38697
38700
  };
38698
38701
  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
- );
38702
+ var difference = getPriceDifference(roomIndex, accommodation.accommodationCode, regimeId);
38706
38703
  return ''.concat(label, ' ').concat(difference !== 0 ? '('.concat(formatPriceDifference(difference, bookingPackageDetails.currencyCode), ')') : '');
38707
38704
  };
38705
+ var adjustedTotalPrice = React.useMemo(
38706
+ function () {
38707
+ if (!selectedBookingPackageDetails.rooms || typeof selectedBookingPackageDetails.price !== 'number') {
38708
+ return 0;
38709
+ }
38710
+ var basePrice = selectedBookingPackageDetails.price;
38711
+ var totalDelta = selectedBookingPackageDetails.rooms.reduce(function (sum, room, roomIndex) {
38712
+ var initialOption = getInitialSelectedOptionForRoom(roomIndex);
38713
+ var currentOption = room.options.find(function (option) {
38714
+ return option.isSelected;
38715
+ });
38716
+ var initialPrice = (initialOption === null || initialOption === void 0 ? void 0 : initialOption.price) || 0;
38717
+ var currentPrice = (currentOption === null || currentOption === void 0 ? void 0 : currentOption.price) || 0;
38718
+ return sum + (currentPrice - initialPrice);
38719
+ }, 0);
38720
+ return basePrice + totalDelta;
38721
+ },
38722
+ [selectedBookingPackageDetails, packageKey]
38723
+ );
38708
38724
  return React__default['default'].createElement(
38709
38725
  React__default['default'].Fragment,
38710
38726
  null,
@@ -38723,11 +38739,7 @@ var GroupTourFlyIn = function (_a) {
38723
38739
  roomAccommodations.map(function (accommodation) {
38724
38740
  var _a;
38725
38741
  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
- );
38742
+ var priceDifference = getPriceDifference(roomIndex, accommodation.accommodationCode);
38731
38743
  return React__default['default'].createElement(
38732
38744
  'div',
38733
38745
  { className: 'flyin__acco__card', key: ''.concat(roomIndex, '-').concat(accommodation.accommodationCode) },
@@ -38759,7 +38771,7 @@ var GroupTourFlyIn = function (_a) {
38759
38771
  'button',
38760
38772
  {
38761
38773
  className:
38762
- (selectedRoomOption === null || selectedRoomOption === void 0 ? void 0 : selectedRoomOption.accommodationCode) ==
38774
+ (selectedRoomOption === null || selectedRoomOption === void 0 ? void 0 : selectedRoomOption.accommodationCode) ===
38763
38775
  accommodation.accommodationCode
38764
38776
  ? 'cta cta--select cta--selected'
38765
38777
  : 'cta cta--select',
@@ -38775,7 +38787,7 @@ var GroupTourFlyIn = function (_a) {
38775
38787
  );
38776
38788
  }
38777
38789
  },
38778
- (selectedRoomOption === null || selectedRoomOption === void 0 ? void 0 : selectedRoomOption.accommodationCode) ==
38790
+ (selectedRoomOption === null || selectedRoomOption === void 0 ? void 0 : selectedRoomOption.accommodationCode) ===
38779
38791
  accommodation.accommodationCode
38780
38792
  ? translations === null || translations === void 0
38781
38793
  ? void 0
@@ -38790,10 +38802,7 @@ var GroupTourFlyIn = function (_a) {
38790
38802
  React__default['default'].createElement(
38791
38803
  'span',
38792
38804
  { className: getPriceDifferenceClassName(priceDifference) },
38793
- formatPriceDifference(
38794
- priceDifference,
38795
- bookingPackageDetails === null || bookingPackageDetails === void 0 ? void 0 : bookingPackageDetails.currencyCode
38796
- )
38805
+ formatPriceDifference(priceDifference, bookingPackageDetails.currencyCode)
38797
38806
  )
38798
38807
  )
38799
38808
  )
@@ -38807,7 +38816,12 @@ var GroupTourFlyIn = function (_a) {
38807
38816
  React__default['default'].createElement(
38808
38817
  'div',
38809
38818
  { className: 'flyin__footer' },
38810
- React__default['default'].createElement('div', { className: 'flyin__footer__price' }, 'Total price: ', calculateTotalPrice()),
38819
+ React__default['default'].createElement(
38820
+ 'div',
38821
+ { className: 'flyin__footer__price' },
38822
+ 'Total price: ',
38823
+ formatPrice(adjustedTotalPrice, bookingPackageDetails.currencyCode)
38824
+ ),
38811
38825
  React__default['default'].createElement(
38812
38826
  'div',
38813
38827
  { className: 'flyin__button-wrapper' },
package/build/build-esm/index.js CHANGED
@@ -38368,6 +38368,27 @@ var GroupTourFlyIn = function (_a) {
38368
38368
  },
38369
38369
  [bookingPackageDetails]
38370
38370
  );
38371
+ var packageKey = ''
38372
+ .concat(bookingPackageDetails === null || bookingPackageDetails === void 0 ? void 0 : bookingPackageDetails.transactionId, '-')
38373
+ .concat(selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0 ? void 0 : selectedBookingPackageDetails.id);
38374
+ var initialSelectedOptionsRef = useRef({});
38375
+ useEffect(
38376
+ function () {
38377
+ if (!packageKey || !(selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0 ? void 0 : selectedBookingPackageDetails.rooms))
38378
+ return;
38379
+ if (!initialSelectedOptionsRef.current[packageKey]) {
38380
+ initialSelectedOptionsRef.current[packageKey] = {};
38381
+ }
38382
+ selectedBookingPackageDetails.rooms.forEach(function (room, roomIndex) {
38383
+ if (!initialSelectedOptionsRef.current[packageKey][roomIndex]) {
38384
+ initialSelectedOptionsRef.current[packageKey][roomIndex] = room.options.find(function (option) {
38385
+ return option.isSelected;
38386
+ });
38387
+ }
38388
+ });
38389
+ },
38390
+ [packageKey, selectedBookingPackageDetails]
38391
+ );
38371
38392
  var groupedRooms = useMemo(
38372
38393
  function () {
38373
38394
  if (!(selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0 ? void 0 : selectedBookingPackageDetails.rooms)) return [];
@@ -38395,19 +38416,14 @@ var GroupTourFlyIn = function (_a) {
38395
38416
  },
38396
38417
  [selectedBookingPackageDetails]
38397
38418
  );
38398
- if (!bookingPackageDetails) {
38419
+ if (!bookingPackageDetails || !selectedBookingPackageDetails) {
38399
38420
  return null;
38400
38421
  }
38401
38422
  var getSelectedOptionForRoom = function (roomIndex) {
38402
38423
  var _a, _b, _c;
38403
38424
  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
38425
+ (_b = (_a = selectedBookingPackageDetails.rooms) === null || _a === void 0 ? void 0 : _a[roomIndex]) === null || _b === void 0 ? void 0 : _b.options) ===
38426
+ null || _c === void 0
38411
38427
  ? void 0
38412
38428
  : _c.find(function (option) {
38413
38429
  return option.isSelected;
@@ -38416,18 +38432,18 @@ var GroupTourFlyIn = function (_a) {
38416
38432
  var getSelectedOptionForAccommodation = function (roomIndex, accommodationCode) {
38417
38433
  var _a, _b, _c;
38418
38434
  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
38435
+ (_b = (_a = selectedBookingPackageDetails.rooms) === null || _a === void 0 ? void 0 : _a[roomIndex]) === null || _b === void 0 ? void 0 : _b.options) ===
38436
+ null || _c === void 0
38426
38437
  ? void 0
38427
38438
  : _c.find(function (option) {
38428
38439
  return option.accommodationCode === accommodationCode && option.isSelected;
38429
38440
  });
38430
38441
  };
38442
+ var getInitialSelectedOptionForRoom = function (roomIndex) {
38443
+ var _a;
38444
+ if (!packageKey) return undefined;
38445
+ return (_a = initialSelectedOptionsRef.current[packageKey]) === null || _a === void 0 ? void 0 : _a[roomIndex];
38446
+ };
38431
38447
  var handlePick = function (roomIndex, selectedGuid) {
38432
38448
  if (!bookingPackageDetails || !selectedBookingPackageDetails) return;
38433
38449
  var updatedBookingPackageDetails = __assign(__assign({}, bookingPackageDetails), {
@@ -38455,52 +38471,39 @@ var GroupTourFlyIn = function (_a) {
38455
38471
  if (isOpen) {
38456
38472
  setIsOpen(false);
38457
38473
  }
38458
- console.log('Booking package details sent to onBook callback:', bookingPackageDetails);
38459
38474
  if (context === null || context === void 0 ? void 0 : context.onBook) {
38460
38475
  context.onBook(bookingPackageDetails);
38461
38476
  }
38462
38477
  };
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;
38478
+ var getPriceDifference = function (roomIndex, accommodationCode, regimeId) {
38479
+ var _a, _b, _c, _d, _e, _f, _g;
38480
+ var currentSelectedOption = getSelectedOptionForRoom(roomIndex);
38481
+ var currentSelectedPrice = (currentSelectedOption === null || currentSelectedOption === void 0 ? void 0 : currentSelectedOption.price) || 0;
38482
+ var targetOption;
38483
+ if (regimeId) {
38484
+ targetOption =
38485
+ (_c =
38486
+ (_b = (_a = selectedBookingPackageDetails.rooms) === null || _a === void 0 ? void 0 : _a[roomIndex]) === null || _b === void 0
38487
+ ? void 0
38488
+ : _b.options) === null || _c === void 0
38489
+ ? void 0
38490
+ : _c.find(function (option) {
38491
+ return option.entryLineGuid === regimeId;
38470
38492
  });
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
38493
  } else {
38486
- var firstOption =
38487
- selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0
38494
+ targetOption =
38495
+ (_d = getSelectedOptionForAccommodation(roomIndex, accommodationCode)) !== null && _d !== void 0
38496
+ ? _d
38497
+ : (_g =
38498
+ (_f = (_e = selectedBookingPackageDetails.rooms) === null || _e === void 0 ? void 0 : _e[roomIndex]) === null || _f === void 0
38499
+ ? void 0
38500
+ : _f.options) === null || _g === void 0
38488
38501
  ? void 0
38489
- : selectedBookingPackageDetails.rooms[roomIndex].options.find(function (option) {
38502
+ : _g.find(function (option) {
38490
38503
  return option.accommodationCode === accommodationCode;
38491
38504
  });
38492
- targetPrice = (firstOption === null || firstOption === void 0 ? void 0 : firstOption.price) || 0;
38493
38505
  }
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
- }
38503
- return targetPrice - (currentSelectedPrice || 0);
38506
+ return ((targetOption === null || targetOption === void 0 ? void 0 : targetOption.price) || 0) - currentSelectedPrice;
38504
38507
  };
38505
38508
  var formatPriceDifference = function (difference, currencyCode) {
38506
38509
  if (difference === 0) {
@@ -38519,15 +38522,28 @@ var GroupTourFlyIn = function (_a) {
38519
38522
  return 'flyin__acco__price';
38520
38523
  };
38521
38524
  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
- );
38525
+ var difference = getPriceDifference(roomIndex, accommodation.accommodationCode, regimeId);
38529
38526
  return ''.concat(label, ' ').concat(difference !== 0 ? '('.concat(formatPriceDifference(difference, bookingPackageDetails.currencyCode), ')') : '');
38530
38527
  };
38528
+ var adjustedTotalPrice = useMemo(
38529
+ function () {
38530
+ if (!selectedBookingPackageDetails.rooms || typeof selectedBookingPackageDetails.price !== 'number') {
38531
+ return 0;
38532
+ }
38533
+ var basePrice = selectedBookingPackageDetails.price;
38534
+ var totalDelta = selectedBookingPackageDetails.rooms.reduce(function (sum, room, roomIndex) {
38535
+ var initialOption = getInitialSelectedOptionForRoom(roomIndex);
38536
+ var currentOption = room.options.find(function (option) {
38537
+ return option.isSelected;
38538
+ });
38539
+ var initialPrice = (initialOption === null || initialOption === void 0 ? void 0 : initialOption.price) || 0;
38540
+ var currentPrice = (currentOption === null || currentOption === void 0 ? void 0 : currentOption.price) || 0;
38541
+ return sum + (currentPrice - initialPrice);
38542
+ }, 0);
38543
+ return basePrice + totalDelta;
38544
+ },
38545
+ [selectedBookingPackageDetails, packageKey]
38546
+ );
38531
38547
  return React__default.createElement(
38532
38548
  React__default.Fragment,
38533
38549
  null,
@@ -38546,11 +38562,7 @@ var GroupTourFlyIn = function (_a) {
38546
38562
  roomAccommodations.map(function (accommodation) {
38547
38563
  var _a;
38548
38564
  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
- );
38565
+ var priceDifference = getPriceDifference(roomIndex, accommodation.accommodationCode);
38554
38566
  return React__default.createElement(
38555
38567
  'div',
38556
38568
  { className: 'flyin__acco__card', key: ''.concat(roomIndex, '-').concat(accommodation.accommodationCode) },
@@ -38582,7 +38594,7 @@ var GroupTourFlyIn = function (_a) {
38582
38594
  'button',
38583
38595
  {
38584
38596
  className:
38585
- (selectedRoomOption === null || selectedRoomOption === void 0 ? void 0 : selectedRoomOption.accommodationCode) ==
38597
+ (selectedRoomOption === null || selectedRoomOption === void 0 ? void 0 : selectedRoomOption.accommodationCode) ===
38586
38598
  accommodation.accommodationCode
38587
38599
  ? 'cta cta--select cta--selected'
38588
38600
  : 'cta cta--select',
@@ -38594,7 +38606,7 @@ var GroupTourFlyIn = function (_a) {
38594
38606
  );
38595
38607
  }
38596
38608
  },
38597
- (selectedRoomOption === null || selectedRoomOption === void 0 ? void 0 : selectedRoomOption.accommodationCode) ==
38609
+ (selectedRoomOption === null || selectedRoomOption === void 0 ? void 0 : selectedRoomOption.accommodationCode) ===
38598
38610
  accommodation.accommodationCode
38599
38611
  ? translations === null || translations === void 0
38600
38612
  ? void 0
@@ -38609,10 +38621,7 @@ var GroupTourFlyIn = function (_a) {
38609
38621
  React__default.createElement(
38610
38622
  'span',
38611
38623
  { className: getPriceDifferenceClassName(priceDifference) },
38612
- formatPriceDifference(
38613
- priceDifference,
38614
- bookingPackageDetails === null || bookingPackageDetails === void 0 ? void 0 : bookingPackageDetails.currencyCode
38615
- )
38624
+ formatPriceDifference(priceDifference, bookingPackageDetails.currencyCode)
38616
38625
  )
38617
38626
  )
38618
38627
  )
@@ -38626,7 +38635,12 @@ var GroupTourFlyIn = function (_a) {
38626
38635
  React__default.createElement(
38627
38636
  'div',
38628
38637
  { className: 'flyin__footer' },
38629
- React__default.createElement('div', { className: 'flyin__footer__price' }, 'Total price: ', calculateTotalPrice()),
38638
+ React__default.createElement(
38639
+ 'div',
38640
+ { className: 'flyin__footer__price' },
38641
+ 'Total price: ',
38642
+ formatPrice(adjustedTotalPrice, bookingPackageDetails.currencyCode)
38643
+ ),
38630
38644
  React__default.createElement(
38631
38645
  'div',
38632
38646
  { 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.90",
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",
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}>