@qite/tide-booking-component 0.0.2-preview.65 → 0.0.2-preview.66

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 (22) hide show
  1. package/build/build-cjs/booking-wizard/features/summary/summary-booking-option-pax.d.ts +7 -0
  2. package/build/build-cjs/booking-wizard/features/summary/summary-booking-option-unit.d.ts +7 -0
  3. package/build/build-cjs/booking-wizard/features/summary/summary-per-booking-option-group.d.ts +7 -0
  4. package/build/build-cjs/booking-wizard/features/summary/summary-per-pax-option-group.d.ts +7 -0
  5. package/build/build-cjs/booking-wizard/features/summary/summary-per-unit-option-group.d.ts +7 -0
  6. package/build/build-cjs/index.js +133 -10
  7. package/build/build-esm/booking-wizard/features/summary/summary-booking-option-pax.d.ts +7 -0
  8. package/build/build-esm/booking-wizard/features/summary/summary-booking-option-unit.d.ts +7 -0
  9. package/build/build-esm/booking-wizard/features/summary/summary-per-booking-option-group.d.ts +7 -0
  10. package/build/build-esm/booking-wizard/features/summary/summary-per-pax-option-group.d.ts +7 -0
  11. package/build/build-esm/booking-wizard/features/summary/summary-per-unit-option-group.d.ts +7 -0
  12. package/build/build-esm/index.js +133 -10
  13. package/package.json +1 -1
  14. package/src/booking-wizard/features/product-options/options-form.tsx +2 -1
  15. package/src/booking-wizard/features/sidebar/sidebar-util.ts +13 -3
  16. package/src/booking-wizard/features/summary/summary-booking-option-pax.tsx +25 -0
  17. package/src/booking-wizard/features/summary/summary-booking-option-unit.tsx +25 -0
  18. package/src/booking-wizard/features/summary/summary-per-booking-option-group.tsx +55 -0
  19. package/src/booking-wizard/features/summary/summary-per-pax-option-group.tsx +49 -0
  20. package/src/booking-wizard/features/summary/summary-per-unit-option-group.tsx +52 -0
  21. package/src/booking-wizard/features/summary/summary.tsx +21 -4
  22. package/src/booking-wizard/translations/translations.json +2 -0
package/build/build-cjs/booking-wizard/features/summary/summary-booking-option-pax.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { BookingOptionPax } from "@qite/tide-client/build/types";
2
+ import React from "react";
3
+ interface SummaryBookingOptionPaxProps {
4
+ pax: BookingOptionPax;
5
+ }
6
+ declare const SummaryBookingOptionPax: React.FC<SummaryBookingOptionPaxProps>;
7
+ export default SummaryBookingOptionPax;
package/build/build-cjs/booking-wizard/features/summary/summary-booking-option-unit.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { BookingOptionUnit } from "@qite/tide-client/build/types";
2
+ import React from "react";
3
+ interface SummaryBookingOptionUnitProps {
4
+ unit: BookingOptionUnit;
5
+ }
6
+ declare const SummaryBookingOptionUnit: React.FC<SummaryBookingOptionUnitProps>;
7
+ export default SummaryBookingOptionUnit;
package/build/build-cjs/booking-wizard/features/summary/summary-per-booking-option-group.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { BookingOptionGroup, PerBookingPackageOption } from "@qite/tide-client/build/types";
2
+ import React from "react";
3
+ interface SummaryPerBookingOptionGroupProps {
4
+ group: BookingOptionGroup<PerBookingPackageOption>;
5
+ }
6
+ declare const SummaryPerBookingOptionGroup: React.FC<SummaryPerBookingOptionGroupProps>;
7
+ export default SummaryPerBookingOptionGroup;
package/build/build-cjs/booking-wizard/features/summary/summary-per-pax-option-group.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { BookingOptionGroup, PerPaxPackageOption } from "@qite/tide-client/build/types";
2
+ import React from "react";
3
+ interface SummaryPerPaxOptionGroupProps {
4
+ group: BookingOptionGroup<PerPaxPackageOption>;
5
+ }
6
+ declare const SummaryPerPaxOptionGroup: React.FC<SummaryPerPaxOptionGroupProps>;
7
+ export default SummaryPerPaxOptionGroup;
package/build/build-cjs/booking-wizard/features/summary/summary-per-unit-option-group.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { BookingOptionGroup, PerUnitPackageOption } from "@qite/tide-client/build/types";
2
+ import React from "react";
3
+ interface SummaryPerUnitOptionGroupProps {
4
+ group: BookingOptionGroup<PerUnitPackageOption>;
5
+ }
6
+ declare const SummaryPerUnitOptionGroup: React.FC<SummaryPerUnitOptionGroupProps>;
7
+ export default SummaryPerUnitOptionGroup;
package/build/build-cjs/index.js CHANGED
@@ -7420,7 +7420,9 @@ var OPTIONS_FORM = {
7420
7420
  NO_OPTIONS_MESSAGE: "Deze reis heeft geen bijkomende opties.",
7421
7421
  UNIT_TITLE: "Gezelschap",
7422
7422
  PACKAGE: "Pakket",
7423
+ DAY: "dag",
7423
7424
  DAYS: "dagen",
7425
+ NIGHT: "nacht",
7424
7426
  NIGHTS: "nachten",
7425
7427
  PER_PAX_TITLE: "Per reiziger samenstellen",
7426
7428
  PER_BOOKING_TITLE: "Per dossier samenstellen",
@@ -7567,7 +7569,15 @@ var getDatePeriodText = function (from, to) {
7567
7569
  var fromDate = dateFns.parseISO(from);
7568
7570
  var toDate = dateFns.parseISO(to);
7569
7571
  var dayDifference = dateFns.differenceInDays(toDate, fromDate);
7570
- return "".concat(dayDifference + 1, " ").concat(translations.OPTIONS_FORM.DAYS, ", ").concat(dayDifference, " ").concat(translations.OPTIONS_FORM.NIGHTS);
7572
+ var daysLabel = dayDifference == 0
7573
+ ? "1 ".concat(translations.OPTIONS_FORM.DAY)
7574
+ : "".concat(dayDifference + 1, " ").concat(translations.OPTIONS_FORM.DAYS);
7575
+ if (!dayDifference)
7576
+ return daysLabel;
7577
+ var nightsLabel = dayDifference == 1
7578
+ ? "1 ".concat(translations.OPTIONS_FORM.NIGHT)
7579
+ : "".concat(dayDifference, " ").concat(translations.OPTIONS_FORM.NIGHTS);
7580
+ return "".concat(daysLabel, ", ").concat(nightsLabel);
7571
7581
  }
7572
7582
  catch (_a) {
7573
7583
  return undefined;
@@ -8356,7 +8366,7 @@ var OptionsForm = function () {
8356
8366
  React__default["default"].createElement("div", { className: "booking-card__header" },
8357
8367
  React__default["default"].createElement("h2", { className: "booking-card__header-heading" }, translations.OPTIONS_FORM.PER_BOOKING_TITLE)),
8358
8368
  React__default["default"].createElement("div", { className: "booking-card__body" },
8359
- React__default["default"].createElement("div", { className: "tree__body" }, groups.map(function (group) { return (React__default["default"].createElement(OptionBookingGroup, { group: group, firstClassName: "tree__level", secondClassName: "tree__level-heading", parentId: "booking_".concat(group.name), onGroupChange: handleOnGroupChange })); })))))),
8369
+ React__default["default"].createElement("div", { className: "tree__body" }, groups.map(function (group, i) { return (React__default["default"].createElement(OptionBookingGroup, { key: "".concat(group.name, "_").concat(i), group: group, firstClassName: "tree__level", secondClassName: "tree__level-heading", parentId: "booking_".concat(group.name), onGroupChange: handleOnGroupChange })); })))))),
8360
8370
  lodash.isEmpty(groups) && lodash.isEmpty(optionUnits) && lodash.isEmpty(optionPax) && (React__default["default"].createElement(NoOptions, null)))),
8361
8371
  React__default["default"].createElement("div", { className: "booking__navigator" },
8362
8372
  React__default["default"].createElement(router.Link, { to: "".concat(basePath, "?").concat(bookingQueryString), title: translations.STEPS.PREVIOUS, className: "cta cta--secondary" }, translations.STEPS.PREVIOUS),
@@ -8593,6 +8603,109 @@ var SummaryFlight = function (_a) {
8593
8603
  flight.flightMetaData.luggageIncluded && (React__default["default"].createElement("p", null, translations.SIDEBAR.LUGGAGE_INCLUDED))));
8594
8604
  };
8595
8605
 
8606
+ var SummaryPerPaxOptionGroup = function (_a) {
8607
+ var group = _a.group;
8608
+ var groupOptions = group.options.filter(function (x) { return x.isSelected; });
8609
+ return (React__default["default"].createElement("li", { className: "list__item" },
8610
+ React__default["default"].createElement("h6", null, group.title),
8611
+ React__default["default"].createElement("ul", { className: "list" }, groupOptions.map(function (opt) {
8612
+ var _a;
8613
+ return (React__default["default"].createElement("li", { key: opt.line.entryLineGuid, className: "list__item" },
8614
+ opt.line.productName,
8615
+ ": ",
8616
+ opt.line.accommodationName,
8617
+ !lodash.isNil((_a = opt.line) === null || _a === void 0 ? void 0 : _a.regimeName) && ", ",
8618
+ opt.line.regimeName,
8619
+ React__default["default"].createElement("br", null),
8620
+ getDateText(opt.line.startDate),
8621
+ opt.line.startDate != opt.line.endDate ? " > ".concat(getDateText(opt.line.endDate)) : "",
8622
+ React__default["default"].createElement("ul", { className: "list" }, !lodash.isEmpty(opt === null || opt === void 0 ? void 0 : opt.groups) &&
8623
+ (opt === null || opt === void 0 ? void 0 : opt.groups.map(function (x) {
8624
+ if (!x.options.some(function (y) { return y.isSelected; }))
8625
+ return;
8626
+ return React__default["default"].createElement(SummaryPerPaxOptionGroup, { group: x });
8627
+ })))));
8628
+ }))));
8629
+ };
8630
+
8631
+ var SummaryBookingOptionPax = function (_a) {
8632
+ var pax = _a.pax;
8633
+ return (React__default["default"].createElement(React__default["default"].Fragment, null, pax.groups.map(function (y) {
8634
+ var paxOptions = y.options.filter(function (y) { return y.isSelected; });
8635
+ if (lodash.isEmpty(paxOptions))
8636
+ return;
8637
+ return React__default["default"].createElement(SummaryPerPaxOptionGroup, { group: y });
8638
+ })));
8639
+ };
8640
+
8641
+ var SummaryPerUnitOptionGroup = function (_a) {
8642
+ var group = _a.group;
8643
+ var groupOptions = group.options.filter(function (x) { return x.isSelected; });
8644
+ return (React__default["default"].createElement("li", { className: "list__item" },
8645
+ React__default["default"].createElement("h6", null, group.title),
8646
+ React__default["default"].createElement("ul", { className: "list" }, groupOptions.map(function (opt) {
8647
+ var _a;
8648
+ return (React__default["default"].createElement("li", { key: opt.line.entryLineGuid, className: "list__item" },
8649
+ opt.line.productName,
8650
+ ": ",
8651
+ opt.line.accommodationName,
8652
+ !lodash.isNil((_a = opt.line) === null || _a === void 0 ? void 0 : _a.regimeName) && ", ",
8653
+ opt.line.regimeName,
8654
+ React__default["default"].createElement("br", null),
8655
+ getDateText(opt.line.startDate),
8656
+ opt.line.startDate != opt.line.endDate ? " > ".concat(getDateText(opt.line.endDate)) : "",
8657
+ React__default["default"].createElement("ul", null,
8658
+ !lodash.isEmpty(opt === null || opt === void 0 ? void 0 : opt.groups) &&
8659
+ (opt === null || opt === void 0 ? void 0 : opt.groups.map(function (x) {
8660
+ if (!x.options.some(function (y) { return y.isSelected; }))
8661
+ return;
8662
+ return React__default["default"].createElement(SummaryPerUnitOptionGroup, { group: x });
8663
+ })),
8664
+ !lodash.isEmpty(opt === null || opt === void 0 ? void 0 : opt.pax) &&
8665
+ (opt === null || opt === void 0 ? void 0 : opt.pax.map(function (x) { return React__default["default"].createElement(SummaryBookingOptionPax, { pax: x }); })))));
8666
+ }))));
8667
+ };
8668
+
8669
+ var SummaryBookingOptionUnit = function (_a) {
8670
+ var unit = _a.unit;
8671
+ return (React__default["default"].createElement(React__default["default"].Fragment, null, unit.groups.map(function (y) {
8672
+ var unitOptions = y.options.filter(function (y) { return y.isSelected; });
8673
+ if (lodash.isEmpty(unitOptions))
8674
+ return;
8675
+ return React__default["default"].createElement(SummaryPerUnitOptionGroup, { group: y });
8676
+ })));
8677
+ };
8678
+
8679
+ var SummaryPerBookingOptionGroup = function (_a) {
8680
+ var group = _a.group;
8681
+ var groupOptions = group.options.filter(function (x) { return x.isSelected; });
8682
+ return (React__default["default"].createElement("li", { className: "list__item" },
8683
+ React__default["default"].createElement("h6", null, group.title),
8684
+ React__default["default"].createElement("ul", { className: "list" }, groupOptions.map(function (opt) {
8685
+ var _a;
8686
+ return (React__default["default"].createElement("li", { key: opt.line.entryLineGuid, className: "list__item" },
8687
+ opt.line.productName,
8688
+ ": ",
8689
+ opt.line.accommodationName,
8690
+ !lodash.isNil((_a = opt.line) === null || _a === void 0 ? void 0 : _a.regimeName) && ", ",
8691
+ opt.line.regimeName,
8692
+ React__default["default"].createElement("br", null),
8693
+ getDateText(opt.line.startDate),
8694
+ opt.line.startDate != opt.line.endDate ? " > ".concat(getDateText(opt.line.endDate)) : "",
8695
+ React__default["default"].createElement("ul", null,
8696
+ !lodash.isEmpty(opt === null || opt === void 0 ? void 0 : opt.groups) &&
8697
+ (opt === null || opt === void 0 ? void 0 : opt.groups.map(function (x) {
8698
+ if (!x.options.some(function (y) { return y.isSelected; }))
8699
+ return;
8700
+ return React__default["default"].createElement(SummaryPerBookingOptionGroup, { group: x });
8701
+ })),
8702
+ !lodash.isEmpty(opt === null || opt === void 0 ? void 0 : opt.units) &&
8703
+ (opt === null || opt === void 0 ? void 0 : opt.units.map(function (x) { return React__default["default"].createElement(SummaryBookingOptionUnit, { unit: x }); })),
8704
+ !lodash.isEmpty(opt === null || opt === void 0 ? void 0 : opt.pax) &&
8705
+ (opt === null || opt === void 0 ? void 0 : opt.pax.map(function (x) { return React__default["default"].createElement(SummaryBookingOptionPax, { pax: x }); })))));
8706
+ }))));
8707
+ };
8708
+
8596
8709
  var Summary = function () {
8597
8710
  var dispatch = useAppDispatch();
8598
8711
  var settings = React.useContext(SettingsContext);
@@ -8736,20 +8849,30 @@ var Summary = function () {
8736
8849
  React__default["default"].createElement("ul", { className: "list list--booking-summary" },
8737
8850
  React__default["default"].createElement("li", null,
8738
8851
  React__default["default"].createElement("h6", null, activeOption === null || activeOption === void 0 ? void 0 : activeOption.name),
8739
- React__default["default"].createElement("p", null,
8740
- "(",
8741
- getDateText(activeOption === null || activeOption === void 0 ? void 0 : activeOption.fromDate),
8742
- " >",
8743
- " ",
8744
- getDateText(activeOption === null || activeOption === void 0 ? void 0 : activeOption.toDate),
8745
- ")"),
8746
8852
  React__default["default"].createElement("ul", null, activeOption === null || activeOption === void 0 ? void 0 : activeOption.rooms.map(function (r, ri) {
8747
8853
  var roomOption = r.options.find(function (x) { return x.isSelected; });
8748
8854
  return (React__default["default"].createElement("li", { key: ri, className: "list__item" }, roomOption === null || roomOption === void 0 ? void 0 :
8749
8855
  roomOption.accommodationName,
8750
8856
  !lodash.isNil(roomOption === null || roomOption === void 0 ? void 0 : roomOption.regimeName) && ", ", roomOption === null || roomOption === void 0 ? void 0 :
8751
8857
  roomOption.regimeName));
8752
- }))),
8858
+ })),
8859
+ React__default["default"].createElement("p", null,
8860
+ "(",
8861
+ getDateText(activeOption === null || activeOption === void 0 ? void 0 : activeOption.fromDate),
8862
+ " >",
8863
+ " ",
8864
+ getDateText(activeOption === null || activeOption === void 0 ? void 0 : activeOption.toDate),
8865
+ ")")),
8866
+ !lodash.isEmpty(activeOption === null || activeOption === void 0 ? void 0 : activeOption.groups) &&
8867
+ (activeOption === null || activeOption === void 0 ? void 0 : activeOption.groups.map(function (x) {
8868
+ if (!x.options.some(function (y) { return y.isSelected; }))
8869
+ return;
8870
+ return React__default["default"].createElement(SummaryPerBookingOptionGroup, { group: x });
8871
+ })),
8872
+ !lodash.isEmpty(activeOption === null || activeOption === void 0 ? void 0 : activeOption.optionUnits) &&
8873
+ (activeOption === null || activeOption === void 0 ? void 0 : activeOption.optionUnits.map(function (x) { return (React__default["default"].createElement(SummaryBookingOptionUnit, { unit: x })); })),
8874
+ !lodash.isEmpty(activeOption === null || activeOption === void 0 ? void 0 : activeOption.optionPax) &&
8875
+ (activeOption === null || activeOption === void 0 ? void 0 : activeOption.optionPax.map(function (x) { return (React__default["default"].createElement(SummaryBookingOptionPax, { pax: x })); })),
8753
8876
  (packageDetails === null || packageDetails === void 0 ? void 0 : packageDetails.outwardFlights) &&
8754
8877
  packageDetails.outwardFlights
8755
8878
  .filter(function (x) { return x.isSelected; })
package/build/build-esm/booking-wizard/features/summary/summary-booking-option-pax.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { BookingOptionPax } from "@qite/tide-client/build/types";
2
+ import React from "react";
3
+ interface SummaryBookingOptionPaxProps {
4
+ pax: BookingOptionPax;
5
+ }
6
+ declare const SummaryBookingOptionPax: React.FC<SummaryBookingOptionPaxProps>;
7
+ export default SummaryBookingOptionPax;
package/build/build-esm/booking-wizard/features/summary/summary-booking-option-unit.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { BookingOptionUnit } from "@qite/tide-client/build/types";
2
+ import React from "react";
3
+ interface SummaryBookingOptionUnitProps {
4
+ unit: BookingOptionUnit;
5
+ }
6
+ declare const SummaryBookingOptionUnit: React.FC<SummaryBookingOptionUnitProps>;
7
+ export default SummaryBookingOptionUnit;
package/build/build-esm/booking-wizard/features/summary/summary-per-booking-option-group.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { BookingOptionGroup, PerBookingPackageOption } from "@qite/tide-client/build/types";
2
+ import React from "react";
3
+ interface SummaryPerBookingOptionGroupProps {
4
+ group: BookingOptionGroup<PerBookingPackageOption>;
5
+ }
6
+ declare const SummaryPerBookingOptionGroup: React.FC<SummaryPerBookingOptionGroupProps>;
7
+ export default SummaryPerBookingOptionGroup;
package/build/build-esm/booking-wizard/features/summary/summary-per-pax-option-group.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { BookingOptionGroup, PerPaxPackageOption } from "@qite/tide-client/build/types";
2
+ import React from "react";
3
+ interface SummaryPerPaxOptionGroupProps {
4
+ group: BookingOptionGroup<PerPaxPackageOption>;
5
+ }
6
+ declare const SummaryPerPaxOptionGroup: React.FC<SummaryPerPaxOptionGroupProps>;
7
+ export default SummaryPerPaxOptionGroup;
package/build/build-esm/booking-wizard/features/summary/summary-per-unit-option-group.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { BookingOptionGroup, PerUnitPackageOption } from "@qite/tide-client/build/types";
2
+ import React from "react";
3
+ interface SummaryPerUnitOptionGroupProps {
4
+ group: BookingOptionGroup<PerUnitPackageOption>;
5
+ }
6
+ declare const SummaryPerUnitOptionGroup: React.FC<SummaryPerUnitOptionGroupProps>;
7
+ export default SummaryPerUnitOptionGroup;
package/build/build-esm/index.js CHANGED
@@ -7409,7 +7409,9 @@ var OPTIONS_FORM = {
7409
7409
  NO_OPTIONS_MESSAGE: "Deze reis heeft geen bijkomende opties.",
7410
7410
  UNIT_TITLE: "Gezelschap",
7411
7411
  PACKAGE: "Pakket",
7412
+ DAY: "dag",
7412
7413
  DAYS: "dagen",
7414
+ NIGHT: "nacht",
7413
7415
  NIGHTS: "nachten",
7414
7416
  PER_PAX_TITLE: "Per reiziger samenstellen",
7415
7417
  PER_BOOKING_TITLE: "Per dossier samenstellen",
@@ -7556,7 +7558,15 @@ var getDatePeriodText = function (from, to) {
7556
7558
  var fromDate = parseISO(from);
7557
7559
  var toDate = parseISO(to);
7558
7560
  var dayDifference = differenceInDays(toDate, fromDate);
7559
- return "".concat(dayDifference + 1, " ").concat(translations.OPTIONS_FORM.DAYS, ", ").concat(dayDifference, " ").concat(translations.OPTIONS_FORM.NIGHTS);
7561
+ var daysLabel = dayDifference == 0
7562
+ ? "1 ".concat(translations.OPTIONS_FORM.DAY)
7563
+ : "".concat(dayDifference + 1, " ").concat(translations.OPTIONS_FORM.DAYS);
7564
+ if (!dayDifference)
7565
+ return daysLabel;
7566
+ var nightsLabel = dayDifference == 1
7567
+ ? "1 ".concat(translations.OPTIONS_FORM.NIGHT)
7568
+ : "".concat(dayDifference, " ").concat(translations.OPTIONS_FORM.NIGHTS);
7569
+ return "".concat(daysLabel, ", ").concat(nightsLabel);
7560
7570
  }
7561
7571
  catch (_a) {
7562
7572
  return undefined;
@@ -8345,7 +8355,7 @@ var OptionsForm = function () {
8345
8355
  React.createElement("div", { className: "booking-card__header" },
8346
8356
  React.createElement("h2", { className: "booking-card__header-heading" }, translations.OPTIONS_FORM.PER_BOOKING_TITLE)),
8347
8357
  React.createElement("div", { className: "booking-card__body" },
8348
- React.createElement("div", { className: "tree__body" }, groups.map(function (group) { return (React.createElement(OptionBookingGroup, { group: group, firstClassName: "tree__level", secondClassName: "tree__level-heading", parentId: "booking_".concat(group.name), onGroupChange: handleOnGroupChange })); })))))),
8358
+ React.createElement("div", { className: "tree__body" }, groups.map(function (group, i) { return (React.createElement(OptionBookingGroup, { key: "".concat(group.name, "_").concat(i), group: group, firstClassName: "tree__level", secondClassName: "tree__level-heading", parentId: "booking_".concat(group.name), onGroupChange: handleOnGroupChange })); })))))),
8349
8359
  isEmpty(groups) && isEmpty(optionUnits) && isEmpty(optionPax) && (React.createElement(NoOptions, null)))),
8350
8360
  React.createElement("div", { className: "booking__navigator" },
8351
8361
  React.createElement(Link, { to: "".concat(basePath, "?").concat(bookingQueryString), title: translations.STEPS.PREVIOUS, className: "cta cta--secondary" }, translations.STEPS.PREVIOUS),
@@ -8582,6 +8592,109 @@ var SummaryFlight = function (_a) {
8582
8592
  flight.flightMetaData.luggageIncluded && (React.createElement("p", null, translations.SIDEBAR.LUGGAGE_INCLUDED))));
8583
8593
  };
8584
8594
 
8595
+ var SummaryPerPaxOptionGroup = function (_a) {
8596
+ var group = _a.group;
8597
+ var groupOptions = group.options.filter(function (x) { return x.isSelected; });
8598
+ return (React.createElement("li", { className: "list__item" },
8599
+ React.createElement("h6", null, group.title),
8600
+ React.createElement("ul", { className: "list" }, groupOptions.map(function (opt) {
8601
+ var _a;
8602
+ return (React.createElement("li", { key: opt.line.entryLineGuid, className: "list__item" },
8603
+ opt.line.productName,
8604
+ ": ",
8605
+ opt.line.accommodationName,
8606
+ !isNil((_a = opt.line) === null || _a === void 0 ? void 0 : _a.regimeName) && ", ",
8607
+ opt.line.regimeName,
8608
+ React.createElement("br", null),
8609
+ getDateText(opt.line.startDate),
8610
+ opt.line.startDate != opt.line.endDate ? " > ".concat(getDateText(opt.line.endDate)) : "",
8611
+ React.createElement("ul", { className: "list" }, !isEmpty(opt === null || opt === void 0 ? void 0 : opt.groups) &&
8612
+ (opt === null || opt === void 0 ? void 0 : opt.groups.map(function (x) {
8613
+ if (!x.options.some(function (y) { return y.isSelected; }))
8614
+ return;
8615
+ return React.createElement(SummaryPerPaxOptionGroup, { group: x });
8616
+ })))));
8617
+ }))));
8618
+ };
8619
+
8620
+ var SummaryBookingOptionPax = function (_a) {
8621
+ var pax = _a.pax;
8622
+ return (React.createElement(React.Fragment, null, pax.groups.map(function (y) {
8623
+ var paxOptions = y.options.filter(function (y) { return y.isSelected; });
8624
+ if (isEmpty(paxOptions))
8625
+ return;
8626
+ return React.createElement(SummaryPerPaxOptionGroup, { group: y });
8627
+ })));
8628
+ };
8629
+
8630
+ var SummaryPerUnitOptionGroup = function (_a) {
8631
+ var group = _a.group;
8632
+ var groupOptions = group.options.filter(function (x) { return x.isSelected; });
8633
+ return (React.createElement("li", { className: "list__item" },
8634
+ React.createElement("h6", null, group.title),
8635
+ React.createElement("ul", { className: "list" }, groupOptions.map(function (opt) {
8636
+ var _a;
8637
+ return (React.createElement("li", { key: opt.line.entryLineGuid, className: "list__item" },
8638
+ opt.line.productName,
8639
+ ": ",
8640
+ opt.line.accommodationName,
8641
+ !isNil((_a = opt.line) === null || _a === void 0 ? void 0 : _a.regimeName) && ", ",
8642
+ opt.line.regimeName,
8643
+ React.createElement("br", null),
8644
+ getDateText(opt.line.startDate),
8645
+ opt.line.startDate != opt.line.endDate ? " > ".concat(getDateText(opt.line.endDate)) : "",
8646
+ React.createElement("ul", null,
8647
+ !isEmpty(opt === null || opt === void 0 ? void 0 : opt.groups) &&
8648
+ (opt === null || opt === void 0 ? void 0 : opt.groups.map(function (x) {
8649
+ if (!x.options.some(function (y) { return y.isSelected; }))
8650
+ return;
8651
+ return React.createElement(SummaryPerUnitOptionGroup, { group: x });
8652
+ })),
8653
+ !isEmpty(opt === null || opt === void 0 ? void 0 : opt.pax) &&
8654
+ (opt === null || opt === void 0 ? void 0 : opt.pax.map(function (x) { return React.createElement(SummaryBookingOptionPax, { pax: x }); })))));
8655
+ }))));
8656
+ };
8657
+
8658
+ var SummaryBookingOptionUnit = function (_a) {
8659
+ var unit = _a.unit;
8660
+ return (React.createElement(React.Fragment, null, unit.groups.map(function (y) {
8661
+ var unitOptions = y.options.filter(function (y) { return y.isSelected; });
8662
+ if (isEmpty(unitOptions))
8663
+ return;
8664
+ return React.createElement(SummaryPerUnitOptionGroup, { group: y });
8665
+ })));
8666
+ };
8667
+
8668
+ var SummaryPerBookingOptionGroup = function (_a) {
8669
+ var group = _a.group;
8670
+ var groupOptions = group.options.filter(function (x) { return x.isSelected; });
8671
+ return (React.createElement("li", { className: "list__item" },
8672
+ React.createElement("h6", null, group.title),
8673
+ React.createElement("ul", { className: "list" }, groupOptions.map(function (opt) {
8674
+ var _a;
8675
+ return (React.createElement("li", { key: opt.line.entryLineGuid, className: "list__item" },
8676
+ opt.line.productName,
8677
+ ": ",
8678
+ opt.line.accommodationName,
8679
+ !isNil((_a = opt.line) === null || _a === void 0 ? void 0 : _a.regimeName) && ", ",
8680
+ opt.line.regimeName,
8681
+ React.createElement("br", null),
8682
+ getDateText(opt.line.startDate),
8683
+ opt.line.startDate != opt.line.endDate ? " > ".concat(getDateText(opt.line.endDate)) : "",
8684
+ React.createElement("ul", null,
8685
+ !isEmpty(opt === null || opt === void 0 ? void 0 : opt.groups) &&
8686
+ (opt === null || opt === void 0 ? void 0 : opt.groups.map(function (x) {
8687
+ if (!x.options.some(function (y) { return y.isSelected; }))
8688
+ return;
8689
+ return React.createElement(SummaryPerBookingOptionGroup, { group: x });
8690
+ })),
8691
+ !isEmpty(opt === null || opt === void 0 ? void 0 : opt.units) &&
8692
+ (opt === null || opt === void 0 ? void 0 : opt.units.map(function (x) { return React.createElement(SummaryBookingOptionUnit, { unit: x }); })),
8693
+ !isEmpty(opt === null || opt === void 0 ? void 0 : opt.pax) &&
8694
+ (opt === null || opt === void 0 ? void 0 : opt.pax.map(function (x) { return React.createElement(SummaryBookingOptionPax, { pax: x }); })))));
8695
+ }))));
8696
+ };
8697
+
8585
8698
  var Summary = function () {
8586
8699
  var dispatch = useAppDispatch();
8587
8700
  var settings = useContext(SettingsContext);
@@ -8725,20 +8838,30 @@ var Summary = function () {
8725
8838
  React.createElement("ul", { className: "list list--booking-summary" },
8726
8839
  React.createElement("li", null,
8727
8840
  React.createElement("h6", null, activeOption === null || activeOption === void 0 ? void 0 : activeOption.name),
8728
- React.createElement("p", null,
8729
- "(",
8730
- getDateText(activeOption === null || activeOption === void 0 ? void 0 : activeOption.fromDate),
8731
- " >",
8732
- " ",
8733
- getDateText(activeOption === null || activeOption === void 0 ? void 0 : activeOption.toDate),
8734
- ")"),
8735
8841
  React.createElement("ul", null, activeOption === null || activeOption === void 0 ? void 0 : activeOption.rooms.map(function (r, ri) {
8736
8842
  var roomOption = r.options.find(function (x) { return x.isSelected; });
8737
8843
  return (React.createElement("li", { key: ri, className: "list__item" }, roomOption === null || roomOption === void 0 ? void 0 :
8738
8844
  roomOption.accommodationName,
8739
8845
  !isNil(roomOption === null || roomOption === void 0 ? void 0 : roomOption.regimeName) && ", ", roomOption === null || roomOption === void 0 ? void 0 :
8740
8846
  roomOption.regimeName));
8741
- }))),
8847
+ })),
8848
+ React.createElement("p", null,
8849
+ "(",
8850
+ getDateText(activeOption === null || activeOption === void 0 ? void 0 : activeOption.fromDate),
8851
+ " >",
8852
+ " ",
8853
+ getDateText(activeOption === null || activeOption === void 0 ? void 0 : activeOption.toDate),
8854
+ ")")),
8855
+ !isEmpty(activeOption === null || activeOption === void 0 ? void 0 : activeOption.groups) &&
8856
+ (activeOption === null || activeOption === void 0 ? void 0 : activeOption.groups.map(function (x) {
8857
+ if (!x.options.some(function (y) { return y.isSelected; }))
8858
+ return;
8859
+ return React.createElement(SummaryPerBookingOptionGroup, { group: x });
8860
+ })),
8861
+ !isEmpty(activeOption === null || activeOption === void 0 ? void 0 : activeOption.optionUnits) &&
8862
+ (activeOption === null || activeOption === void 0 ? void 0 : activeOption.optionUnits.map(function (x) { return (React.createElement(SummaryBookingOptionUnit, { unit: x })); })),
8863
+ !isEmpty(activeOption === null || activeOption === void 0 ? void 0 : activeOption.optionPax) &&
8864
+ (activeOption === null || activeOption === void 0 ? void 0 : activeOption.optionPax.map(function (x) { return (React.createElement(SummaryBookingOptionPax, { pax: x })); })),
8742
8865
  (packageDetails === null || packageDetails === void 0 ? void 0 : packageDetails.outwardFlights) &&
8743
8866
  packageDetails.outwardFlights
8744
8867
  .filter(function (x) { return x.isSelected; })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@qite/tide-booking-component",
3
- "version": "0.0.2-preview.65",
3
+ "version": "0.0.2-preview.66",
4
4
  "description": "React BookingWizard component for Tide",
5
5
  "main": "build/build-cjs/index.js",
6
6
  "module": "build/build-esm/index.js",
package/src/booking-wizard/features/product-options/options-form.tsx CHANGED
@@ -208,8 +208,9 @@ const OptionsForm: React.FC<OptionsFormProps> = () => {
208
208
  </div>
209
209
  <div className="booking-card__body">
210
210
  <div className="tree__body">
211
- {groups.map((group) => (
211
+ {groups.map((group, i) => (
212
212
  <OptionBookingGroup
213
+ key={`${group.name}_${i}`}
213
214
  group={group}
214
215
  firstClassName={"tree__level"}
215
216
  secondClassName={"tree__level-heading"}
package/src/booking-wizard/features/sidebar/sidebar-util.ts CHANGED
@@ -45,9 +45,19 @@ export const getDatePeriodText = (from?: string, to?: string) => {
45
45
  const toDate = parseISO(to);
46
46
 
47
47
  const dayDifference = differenceInDays(toDate, fromDate);
48
- return `${dayDifference + 1} ${
49
- translations.OPTIONS_FORM.DAYS
50
- }, ${dayDifference} ${translations.OPTIONS_FORM.NIGHTS}`;
48
+ const daysLabel =
49
+ dayDifference == 0
50
+ ? `1 ${translations.OPTIONS_FORM.DAY}`
51
+ : `${dayDifference + 1} ${translations.OPTIONS_FORM.DAYS}`;
52
+
53
+ if (!dayDifference) return daysLabel;
54
+
55
+ const nightsLabel =
56
+ dayDifference == 1
57
+ ? `1 ${translations.OPTIONS_FORM.NIGHT}`
58
+ : `${dayDifference} ${translations.OPTIONS_FORM.NIGHTS}`;
59
+
60
+ return `${daysLabel}, ${nightsLabel}`;
51
61
  } catch {
52
62
  return undefined;
53
63
  }
package/src/booking-wizard/features/summary/summary-booking-option-pax.tsx ADDED
@@ -0,0 +1,25 @@
1
+ import { BookingOptionPax } from "@qite/tide-client/build/types";
2
+ import { isEmpty } from "lodash";
3
+ import React from "react";
4
+ import SummaryPerPaxOptionGroup from "./summary-per-pax-option-group";
5
+
6
+ interface SummaryBookingOptionPaxProps {
7
+ pax: BookingOptionPax;
8
+ }
9
+
10
+ const SummaryBookingOptionPax: React.FC<SummaryBookingOptionPaxProps> = ({
11
+ pax,
12
+ }) => {
13
+ return (
14
+ <>
15
+ {pax.groups.map((y) => {
16
+ const paxOptions = y.options.filter((y) => y.isSelected);
17
+ if (isEmpty(paxOptions)) return;
18
+
19
+ return <SummaryPerPaxOptionGroup group={y} />;
20
+ })}
21
+ </>
22
+ );
23
+ };
24
+
25
+ export default SummaryBookingOptionPax;
package/src/booking-wizard/features/summary/summary-booking-option-unit.tsx ADDED
@@ -0,0 +1,25 @@
1
+ import { BookingOptionUnit } from "@qite/tide-client/build/types";
2
+ import { isEmpty } from "lodash";
3
+ import React from "react";
4
+ import SummaryPerUnitOptionGroup from "./summary-per-unit-option-group";
5
+
6
+ interface SummaryBookingOptionUnitProps {
7
+ unit: BookingOptionUnit;
8
+ }
9
+
10
+ const SummaryBookingOptionUnit: React.FC<SummaryBookingOptionUnitProps> = ({
11
+ unit,
12
+ }) => {
13
+ return (
14
+ <>
15
+ {unit.groups.map((y) => {
16
+ const unitOptions = y.options.filter((y) => y.isSelected);
17
+ if (isEmpty(unitOptions)) return;
18
+
19
+ return <SummaryPerUnitOptionGroup group={y} />;
20
+ })}
21
+ </>
22
+ );
23
+ };
24
+
25
+ export default SummaryBookingOptionUnit;
package/src/booking-wizard/features/summary/summary-per-booking-option-group.tsx ADDED
@@ -0,0 +1,55 @@
1
+ import {
2
+ BookingOptionGroup,
3
+ PerBookingPackageOption,
4
+ } from "@qite/tide-client/build/types";
5
+ import { isEmpty, isNil } from "lodash";
6
+ import React from "react";
7
+ import { getDateText } from "../sidebar/sidebar-util";
8
+ import SummaryBookingOptionPax from "./summary-booking-option-pax";
9
+ import SummaryBookingOptionUnit from "./summary-booking-option-unit";
10
+
11
+ interface SummaryPerBookingOptionGroupProps {
12
+ group: BookingOptionGroup<PerBookingPackageOption>;
13
+ }
14
+
15
+ const SummaryPerBookingOptionGroup: React.FC<
16
+ SummaryPerBookingOptionGroupProps
17
+ > = ({ group }) => {
18
+ const groupOptions = group.options.filter((x) => x.isSelected);
19
+
20
+ return (
21
+ <li className="list__item">
22
+ <h6>{group.title}</h6>
23
+
24
+ <ul className="list">
25
+ {groupOptions.map((opt) => (
26
+ <li key={opt.line.entryLineGuid} className="list__item">
27
+ {opt.line.productName}
28
+ {": "}
29
+ {opt.line.accommodationName}
30
+ {!isNil(opt.line?.regimeName) && ", "}
31
+ {opt.line.regimeName}
32
+ <br />
33
+ {getDateText(opt.line.startDate)}
34
+ {opt.line.startDate != opt.line.endDate ? ` > ${getDateText(opt.line.endDate)}` : ""}
35
+
36
+ <ul>
37
+ {!isEmpty(opt?.groups) &&
38
+ opt?.groups.map((x) => {
39
+ if (!x.options.some((y) => y.isSelected)) return;
40
+
41
+ return <SummaryPerBookingOptionGroup group={x} />;
42
+ })}
43
+ {!isEmpty(opt?.units) &&
44
+ opt?.units.map((x) => <SummaryBookingOptionUnit unit={x} />)}
45
+ {!isEmpty(opt?.pax) &&
46
+ opt?.pax.map((x) => <SummaryBookingOptionPax pax={x} />)}
47
+ </ul>
48
+ </li>
49
+ ))}
50
+ </ul>
51
+ </li>
52
+ );
53
+ };
54
+
55
+ export default SummaryPerBookingOptionGroup;
package/src/booking-wizard/features/summary/summary-per-pax-option-group.tsx ADDED
@@ -0,0 +1,49 @@
1
+ import {
2
+ BookingOptionGroup,
3
+ PerPaxPackageOption,
4
+ } from "@qite/tide-client/build/types";
5
+ import { isEmpty, isNil } from "lodash";
6
+ import React from "react";
7
+ import { getDateText } from "../sidebar/sidebar-util";
8
+
9
+ interface SummaryPerPaxOptionGroupProps {
10
+ group: BookingOptionGroup<PerPaxPackageOption>;
11
+ }
12
+
13
+ const SummaryPerPaxOptionGroup: React.FC<SummaryPerPaxOptionGroupProps> = ({
14
+ group,
15
+ }) => {
16
+ const groupOptions = group.options.filter((x) => x.isSelected);
17
+
18
+ return (
19
+ <li className="list__item">
20
+ <h6>{group.title}</h6>
21
+
22
+ <ul className="list">
23
+ {groupOptions.map((opt) => (
24
+ <li key={opt.line.entryLineGuid} className="list__item">
25
+ {opt.line.productName}
26
+ {": "}
27
+ {opt.line.accommodationName}
28
+ {!isNil(opt.line?.regimeName) && ", "}
29
+ {opt.line.regimeName}
30
+ <br />
31
+ {getDateText(opt.line.startDate)}
32
+ {opt.line.startDate != opt.line.endDate ? ` > ${getDateText(opt.line.endDate)}` : ""}
33
+
34
+ <ul className="list">
35
+ {!isEmpty(opt?.groups) &&
36
+ opt?.groups.map((x) => {
37
+ if (!x.options.some((y) => y.isSelected)) return;
38
+
39
+ return <SummaryPerPaxOptionGroup group={x} />;
40
+ })}
41
+ </ul>
42
+ </li>
43
+ ))}
44
+ </ul>
45
+ </li>
46
+ );
47
+ };
48
+
49
+ export default SummaryPerPaxOptionGroup;
package/src/booking-wizard/features/summary/summary-per-unit-option-group.tsx ADDED
@@ -0,0 +1,52 @@
1
+ import {
2
+ BookingOptionGroup,
3
+ PerUnitPackageOption,
4
+ } from "@qite/tide-client/build/types";
5
+ import { isEmpty, isNil } from "lodash";
6
+ import React from "react";
7
+ import { getDateText } from "../sidebar/sidebar-util";
8
+ import SummaryBookingOptionPax from "./summary-booking-option-pax";
9
+
10
+ interface SummaryPerUnitOptionGroupProps {
11
+ group: BookingOptionGroup<PerUnitPackageOption>;
12
+ }
13
+
14
+ const SummaryPerUnitOptionGroup: React.FC<SummaryPerUnitOptionGroupProps> = ({
15
+ group,
16
+ }) => {
17
+ const groupOptions = group.options.filter((x) => x.isSelected);
18
+
19
+ return (
20
+ <li className="list__item">
21
+ <h6>{group.title}</h6>
22
+
23
+ <ul className="list">
24
+ {groupOptions.map((opt) => (
25
+ <li key={opt.line.entryLineGuid} className="list__item">
26
+ {opt.line.productName}
27
+ {": "}
28
+ {opt.line.accommodationName}
29
+ {!isNil(opt.line?.regimeName) && ", "}
30
+ {opt.line.regimeName}
31
+ <br />
32
+ {getDateText(opt.line.startDate)}
33
+ {opt.line.startDate != opt.line.endDate ? ` > ${getDateText(opt.line.endDate)}` : ""}
34
+
35
+ <ul>
36
+ {!isEmpty(opt?.groups) &&
37
+ opt?.groups.map((x) => {
38
+ if (!x.options.some((y) => y.isSelected)) return;
39
+
40
+ return <SummaryPerUnitOptionGroup group={x} />;
41
+ })}
42
+ {!isEmpty(opt?.pax) &&
43
+ opt?.pax.map((x) => <SummaryBookingOptionPax pax={x} />)}
44
+ </ul>
45
+ </li>
46
+ ))}
47
+ </ul>
48
+ </li>
49
+ );
50
+ };
51
+
52
+ export default SummaryPerUnitOptionGroup;
package/src/booking-wizard/features/summary/summary.tsx CHANGED
@@ -32,6 +32,9 @@ import {
32
32
  selectNotifications,
33
33
  setNotifications,
34
34
  } from "../price-details/price-details-slice";
35
+ import SummaryBookingOptionUnit from "./summary-booking-option-unit";
36
+ import SummaryBookingOptionPax from "./summary-booking-option-pax";
37
+ import SummaryBookingOption from "./summary-per-booking-option-group";
35
38
 
36
39
  interface SummaryProps {}
37
40
 
@@ -238,10 +241,6 @@ const Summary: React.FC<SummaryProps> = () => {
238
241
  <ul className="list list--booking-summary">
239
242
  <li>
240
243
  <h6>{activeOption?.name}</h6>
241
- <p>
242
- ({getDateText(activeOption?.fromDate)} &gt;{" "}
243
- {getDateText(activeOption?.toDate)})
244
- </p>
245
244
  <ul>
246
245
  {activeOption?.rooms.map((r, ri) => {
247
246
  const roomOption = r.options.find((x) => x.isSelected);
@@ -254,7 +253,25 @@ const Summary: React.FC<SummaryProps> = () => {
254
253
  );
255
254
  })}
256
255
  </ul>
256
+ <p>
257
+ ({getDateText(activeOption?.fromDate)} &gt;{" "}
258
+ {getDateText(activeOption?.toDate)})
259
+ </p>
257
260
  </li>
261
+ {!isEmpty(activeOption?.groups) &&
262
+ activeOption?.groups.map((x) => {
263
+ if (!x.options.some((y) => y.isSelected)) return;
264
+
265
+ return <SummaryBookingOption group={x} />;
266
+ })}
267
+ {!isEmpty(activeOption?.optionUnits) &&
268
+ activeOption?.optionUnits.map((x) => (
269
+ <SummaryBookingOptionUnit unit={x} />
270
+ ))}
271
+ {!isEmpty(activeOption?.optionPax) &&
272
+ activeOption?.optionPax.map((x) => (
273
+ <SummaryBookingOptionPax pax={x} />
274
+ ))}
258
275
  {packageDetails?.outwardFlights &&
259
276
  packageDetails.outwardFlights
260
277
  .filter((x) => x.isSelected)
package/src/booking-wizard/translations/translations.json CHANGED
@@ -80,7 +80,9 @@
80
80
  "NO_OPTIONS_MESSAGE": "Deze reis heeft geen bijkomende opties.",
81
81
  "UNIT_TITLE": "Gezelschap",
82
82
  "PACKAGE": "Pakket",
83
+ "DAY": "dag",
83
84
  "DAYS": "dagen",
85
+ "NIGHT": "nacht",
84
86
  "NIGHTS": "nachten",
85
87
  "PER_PAX_TITLE": "Per reiziger samenstellen",
86
88
  "PER_BOOKING_TITLE": "Per dossier samenstellen",