@qite/tide-booking-component 0.0.2-preview.38 → 0.0.2-preview.41
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.
- package/build/build-cjs/booking-wizard/components/product-card.d.ts +1 -0
- package/build/build-cjs/booking-wizard/features/booking/selectors.d.ts +1 -0
- package/build/build-cjs/booking-wizard/features/product-options/none-option.d.ts +9 -0
- package/build/build-cjs/booking-wizard/types.d.ts +1 -0
- package/build/build-cjs/index.js +161 -67
- package/build/build-esm/booking-wizard/components/product-card.d.ts +1 -0
- package/build/build-esm/booking-wizard/features/booking/selectors.d.ts +1 -0
- package/build/build-esm/booking-wizard/features/product-options/none-option.d.ts +9 -0
- package/build/build-esm/booking-wizard/types.d.ts +1 -0
- package/build/build-esm/index.js +161 -67
- package/package.json +2 -2
- package/src/booking-wizard/components/product-card.tsx +7 -0
- package/src/booking-wizard/features/booking/booking.tsx +7 -5
- package/src/booking-wizard/features/booking/selectors.ts +3 -0
- package/src/booking-wizard/features/product-options/none-option.tsx +106 -0
- package/src/booking-wizard/features/product-options/option-booking-group.tsx +18 -0
- package/src/booking-wizard/features/product-options/option-pax-group.tsx +18 -0
- package/src/booking-wizard/features/product-options/option-unit-group.tsx +18 -0
- package/src/booking-wizard/features/sidebar/sidebar.tsx +13 -3
- package/src/booking-wizard/features/travelers-form/travelers-form.tsx +12 -3
- package/src/booking-wizard/features/travelers-form/validate-form.ts +32 -0
- package/src/booking-wizard/translations/translations.json +2 -1
- package/src/booking-wizard/types.ts +1 -0
|
@@ -19,6 +19,7 @@ export declare const selectBookingNumber: (state: RootState) => string | undefin
|
|
|
19
19
|
export declare const selectBookingRooms: (state: RootState) => Room[] | undefined;
|
|
20
20
|
export declare const selectCalculateDeposit: (state: RootState) => boolean;
|
|
21
21
|
export declare const selectIsRetry: (state: RootState) => boolean;
|
|
22
|
+
export declare const selectStartDate: (state: RootState) => string | undefined;
|
|
22
23
|
export declare const selectBookingQuery: (state: RootState) => Record<string, string> | undefined;
|
|
23
24
|
export declare const selectBookingQueryString: import("reselect").OutputSelector<{
|
|
24
25
|
booking: import("./booking-slice").BookingState;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { BookingOptionGroup, PerBookingPackageOption, PerPaxPackageOption, PerUnitPackageOption } from "@qite/tide-client/build/types";
|
|
2
|
+
import React from "react";
|
|
3
|
+
interface NoneOptionProps {
|
|
4
|
+
group: BookingOptionGroup<PerBookingPackageOption> | BookingOptionGroup<PerUnitPackageOption> | BookingOptionGroup<PerPaxPackageOption>;
|
|
5
|
+
parentId: string;
|
|
6
|
+
handleNoneSelectionChanged: () => void;
|
|
7
|
+
}
|
|
8
|
+
declare const NoneOption: React.FC<NoneOptionProps>;
|
|
9
|
+
export default NoneOption;
|
package/build/build-cjs/index.js
CHANGED
|
@@ -6467,6 +6467,7 @@ var selectCalculateDeposit = function (state) {
|
|
|
6467
6467
|
return state.booking.calculateDeposit;
|
|
6468
6468
|
};
|
|
6469
6469
|
var selectIsRetry = function (state) { return state.booking.isRetry; };
|
|
6470
|
+
var selectStartDate = function (state) { var _a; return (_a = state.booking.package) === null || _a === void 0 ? void 0 : _a.fromDate; };
|
|
6470
6471
|
var selectBookingQuery = function (state) {
|
|
6471
6472
|
var bookingAttributes = state.booking.bookingAttributes;
|
|
6472
6473
|
if (!bookingAttributes) {
|
|
@@ -7116,7 +7117,8 @@ var OPTIONS_FORM = {
|
|
|
7116
7117
|
NIGHTS: "nachten",
|
|
7117
7118
|
PER_PAX_TITLE: "Per reiziger samenstellen",
|
|
7118
7119
|
PER_BOOKING_TITLE: "Per dossier samenstellen",
|
|
7119
|
-
PER_UNIT_TITLE: "Per gezelschap samenstellen"
|
|
7120
|
+
PER_UNIT_TITLE: "Per gezelschap samenstellen",
|
|
7121
|
+
NONE: "Geen"
|
|
7120
7122
|
};
|
|
7121
7123
|
var SUMMARY = {
|
|
7122
7124
|
PERSONAL_DETAILS: "Persoonlijke en reisgegevens",
|
|
@@ -7425,6 +7427,47 @@ var formatPrice = function (price) {
|
|
|
7425
7427
|
return priceFormat.format(price);
|
|
7426
7428
|
};
|
|
7427
7429
|
|
|
7430
|
+
var NoneOption = function (_a) {
|
|
7431
|
+
var group = _a.group, parentId = _a.parentId, handleNoneSelectionChanged = _a.handleNoneSelectionChanged;
|
|
7432
|
+
var selectedOption = group.options.find(function (x) { return x.isSelected; });
|
|
7433
|
+
var showNoneOption = group.options.some(function (x) { return x.requirementType === 2; });
|
|
7434
|
+
var noneSelected = !selectedOption;
|
|
7435
|
+
var priceDifferencetext = selectedOption
|
|
7436
|
+
? "- " + formatPrice(Math.abs(selectedOption.line.price))
|
|
7437
|
+
: "";
|
|
7438
|
+
return (React__default["default"].createElement(React__default["default"].Fragment, null, showNoneOption && (React__default["default"].createElement("tr", null,
|
|
7439
|
+
React__default["default"].createElement("td", null,
|
|
7440
|
+
React__default["default"].createElement("div", { className: buildClassName([
|
|
7441
|
+
"tree",
|
|
7442
|
+
noneSelected && "tree--selected",
|
|
7443
|
+
]) },
|
|
7444
|
+
React__default["default"].createElement("div", { className: "tree__level" },
|
|
7445
|
+
React__default["default"].createElement("div", { className: "tree__header" },
|
|
7446
|
+
React__default["default"].createElement("div", { className: "tree__description-collapse" },
|
|
7447
|
+
React__default["default"].createElement("div", { className: "radiobutton" },
|
|
7448
|
+
React__default["default"].createElement("div", { className: "radiobutton__label" },
|
|
7449
|
+
React__default["default"].createElement("input", { type: "radio", value: undefined, name: parentId, className: buildClassName([
|
|
7450
|
+
"radiobutton__input",
|
|
7451
|
+
"radiobutton__input--parent",
|
|
7452
|
+
]), defaultChecked: noneSelected, onChange: handleNoneSelectionChanged }),
|
|
7453
|
+
React__default["default"].createElement("span", { className: "radiobutton__label-text" },
|
|
7454
|
+
React__default["default"].createElement("div", { className: "date-list" },
|
|
7455
|
+
React__default["default"].createElement("span", { className: "date-list__item" }))),
|
|
7456
|
+
React__default["default"].createElement("div", { className: "tree__columns-actions" },
|
|
7457
|
+
React__default["default"].createElement("div", { className: "tree__columns" },
|
|
7458
|
+
React__default["default"].createElement("div", { className: "tree__column" },
|
|
7459
|
+
React__default["default"].createElement("div", { className: "tree__product-name" }, translations.OPTIONS_FORM.NONE)),
|
|
7460
|
+
React__default["default"].createElement("div", { className: "tree__column" }),
|
|
7461
|
+
React__default["default"].createElement("div", { className: "tree__column" }),
|
|
7462
|
+
React__default["default"].createElement("div", { className: buildClassName([
|
|
7463
|
+
"tree__column",
|
|
7464
|
+
"tree__column--price",
|
|
7465
|
+
]) }, !noneSelected && (React__default["default"].createElement("span", { className: buildClassName([
|
|
7466
|
+
"price",
|
|
7467
|
+
"price--decrease",
|
|
7468
|
+
]) }, priceDifferencetext))))))))))))))));
|
|
7469
|
+
};
|
|
7470
|
+
|
|
7428
7471
|
var OptionItem = function (_a) {
|
|
7429
7472
|
var option = _a.option, parentId = _a.parentId, index = _a.index, selectedPrice = _a.selectedPrice, onOptionChange = _a.onOptionChange;
|
|
7430
7473
|
var priceDifference = option.requirementType === 1
|
|
@@ -7551,32 +7594,39 @@ var OptionPaxGroup = function (_a) {
|
|
|
7551
7594
|
if (onGroupChange)
|
|
7552
7595
|
onGroupChange(updatedGroup, paxId, optionId);
|
|
7553
7596
|
};
|
|
7597
|
+
var handleNoneSelectionChanged = function () {
|
|
7598
|
+
var updatedGroup = __assign(__assign({}, group), { options: group.options.map(function (groupOption) { return (__assign(__assign({}, groupOption), { isSelected: false })); }) });
|
|
7599
|
+
if (onGroupChange)
|
|
7600
|
+
onGroupChange(updatedGroup, paxId, optionId);
|
|
7601
|
+
};
|
|
7554
7602
|
var selectedPrice = group.name === ""
|
|
7555
7603
|
? 0
|
|
7556
7604
|
: (_c = (_b = group.options.find(function (x) { return x.isSelected; })) === null || _b === void 0 ? void 0 : _b.line.price) !== null && _c !== void 0 ? _c : 0;
|
|
7557
7605
|
return (React__default["default"].createElement("div", { className: firstClassName },
|
|
7558
7606
|
group.title && React__default["default"].createElement("h4", { className: secondClassName }, group.title),
|
|
7559
7607
|
React__default["default"].createElement("table", { className: buildClassName(["table", "table--striped"]) },
|
|
7560
|
-
React__default["default"].createElement("tbody", null,
|
|
7561
|
-
React__default["default"].createElement("
|
|
7562
|
-
React__default["default"].createElement("
|
|
7563
|
-
|
|
7564
|
-
|
|
7565
|
-
|
|
7566
|
-
|
|
7567
|
-
React__default["default"].createElement("div", { className: "
|
|
7568
|
-
React__default["default"].createElement("div", { className: "
|
|
7569
|
-
React__default["default"].createElement("div", { className:
|
|
7570
|
-
option.requirementType === 1 && "checkbox",
|
|
7571
|
-
option.requirementType === 2 && "radiobutton",
|
|
7572
|
-
]) },
|
|
7608
|
+
React__default["default"].createElement("tbody", null,
|
|
7609
|
+
group.options.map(function (option, index) { return (React__default["default"].createElement("tr", { key: option.line.entryLineGuid },
|
|
7610
|
+
React__default["default"].createElement("td", null,
|
|
7611
|
+
React__default["default"].createElement("div", { className: buildClassName([
|
|
7612
|
+
"tree",
|
|
7613
|
+
option.isSelected && "tree--selected",
|
|
7614
|
+
]) },
|
|
7615
|
+
React__default["default"].createElement("div", { className: "tree__level" },
|
|
7616
|
+
React__default["default"].createElement("div", { className: "tree__header" },
|
|
7617
|
+
React__default["default"].createElement("div", { className: "tree__description-collapse" },
|
|
7573
7618
|
React__default["default"].createElement("div", { className: buildClassName([
|
|
7574
|
-
option.requirementType === 1 && "
|
|
7575
|
-
option.requirementType === 2 &&
|
|
7576
|
-
"radiobutton__label",
|
|
7619
|
+
option.requirementType === 1 && "checkbox",
|
|
7620
|
+
option.requirementType === 2 && "radiobutton",
|
|
7577
7621
|
]) },
|
|
7578
|
-
React__default["default"].createElement(
|
|
7579
|
-
|
|
7622
|
+
React__default["default"].createElement("div", { className: buildClassName([
|
|
7623
|
+
option.requirementType === 1 && "checkbox__label",
|
|
7624
|
+
option.requirementType === 2 &&
|
|
7625
|
+
"radiobutton__label",
|
|
7626
|
+
]) },
|
|
7627
|
+
React__default["default"].createElement(OptionItem, { option: option, parentId: parentId, index: index, selectedPrice: selectedPrice, onOptionChange: handleOptionChange }),
|
|
7628
|
+
!lodash.isEmpty(option.groups) && (React__default["default"].createElement("div", { className: "tree__body" }, option.groups.map(function (optionGroup) { return (React__default["default"].createElement(OptionPaxGroup, { paxId: paxId, optionId: option.line.entryLineGuid, group: optionGroup, firstClassName: "tree__level", secondClassName: "tree__level-heading", parentId: parentId + "_" + optionGroup.name, onGroupChange: handleChildGroupChange })); })))))))))))); }),
|
|
7629
|
+
React__default["default"].createElement(NoneOption, { group: group, parentId: parentId, handleNoneSelectionChanged: handleNoneSelectionChanged })))));
|
|
7580
7630
|
};
|
|
7581
7631
|
|
|
7582
7632
|
var OptionPaxCard = function (_a) {
|
|
@@ -7651,33 +7701,40 @@ var OptionUnitGroup = function (_a) {
|
|
|
7651
7701
|
if (onGroupChange)
|
|
7652
7702
|
onGroupChange(updatedGroup, unitIndex, optionId);
|
|
7653
7703
|
};
|
|
7704
|
+
var handleNoneSelectionChanged = function () {
|
|
7705
|
+
var updatedGroup = __assign(__assign({}, group), { options: group.options.map(function (groupOption) { return (__assign(__assign({}, groupOption), { isSelected: false })); }) });
|
|
7706
|
+
if (onGroupChange)
|
|
7707
|
+
onGroupChange(updatedGroup, unitIndex, optionId);
|
|
7708
|
+
};
|
|
7654
7709
|
var selectedPrice = group.name === ""
|
|
7655
7710
|
? 0
|
|
7656
7711
|
: (_c = (_b = group.options.find(function (x) { return x.isSelected; })) === null || _b === void 0 ? void 0 : _b.line.price) !== null && _c !== void 0 ? _c : 0;
|
|
7657
7712
|
return (React__default["default"].createElement("div", { className: firstClassName },
|
|
7658
7713
|
group.title && React__default["default"].createElement("h4", { className: secondClassName }, group.title),
|
|
7659
7714
|
React__default["default"].createElement("table", { className: buildClassName(["table", "table--striped"]) },
|
|
7660
|
-
React__default["default"].createElement("tbody", null,
|
|
7661
|
-
React__default["default"].createElement("
|
|
7662
|
-
React__default["default"].createElement("
|
|
7663
|
-
|
|
7664
|
-
|
|
7665
|
-
|
|
7666
|
-
|
|
7667
|
-
React__default["default"].createElement("div", { className: "
|
|
7668
|
-
React__default["default"].createElement("div", { className: "
|
|
7669
|
-
React__default["default"].createElement("div", { className:
|
|
7670
|
-
option.requirementType === 1 && "checkbox",
|
|
7671
|
-
option.requirementType === 2 && "radiobutton",
|
|
7672
|
-
]) },
|
|
7715
|
+
React__default["default"].createElement("tbody", null,
|
|
7716
|
+
group.options.map(function (option, index) { return (React__default["default"].createElement("tr", { key: option.line.entryLineGuid },
|
|
7717
|
+
React__default["default"].createElement("td", null,
|
|
7718
|
+
React__default["default"].createElement("div", { className: buildClassName([
|
|
7719
|
+
"tree",
|
|
7720
|
+
option.isSelected && "tree--selected",
|
|
7721
|
+
]) },
|
|
7722
|
+
React__default["default"].createElement("div", { className: "tree__level" },
|
|
7723
|
+
React__default["default"].createElement("div", { className: "tree__header" },
|
|
7724
|
+
React__default["default"].createElement("div", { className: "tree__description-collapse" },
|
|
7673
7725
|
React__default["default"].createElement("div", { className: buildClassName([
|
|
7674
|
-
option.requirementType === 1 && "
|
|
7675
|
-
option.requirementType === 2 &&
|
|
7676
|
-
"radiobutton__label",
|
|
7726
|
+
option.requirementType === 1 && "checkbox",
|
|
7727
|
+
option.requirementType === 2 && "radiobutton",
|
|
7677
7728
|
]) },
|
|
7678
|
-
React__default["default"].createElement(
|
|
7679
|
-
|
|
7680
|
-
|
|
7729
|
+
React__default["default"].createElement("div", { className: buildClassName([
|
|
7730
|
+
option.requirementType === 1 && "checkbox__label",
|
|
7731
|
+
option.requirementType === 2 &&
|
|
7732
|
+
"radiobutton__label",
|
|
7733
|
+
]) },
|
|
7734
|
+
React__default["default"].createElement(OptionItem, { option: option, parentId: parentId, index: index, selectedPrice: selectedPrice, onOptionChange: handleOptionChange }),
|
|
7735
|
+
!lodash.isEmpty(option.groups) && (React__default["default"].createElement("div", { className: "tree__body" }, option.groups.map(function (optionGroup) { return (React__default["default"].createElement(OptionUnitGroup, { unitIndex: unitIndex, optionId: option.line.entryLineGuid, group: optionGroup, firstClassName: "tree__level", secondClassName: "tree__level-heading", parentId: parentId + "_" + optionGroup.name, onGroupChange: handleChildGroupChange })); }))),
|
|
7736
|
+
!lodash.isEmpty(option.pax) && (React__default["default"].createElement(OptionPaxCard, { pax: option.pax, parentIndex: index, onPaxChange: handleOnPaxChange }))))))))))); }),
|
|
7737
|
+
React__default["default"].createElement(NoneOption, { group: group, parentId: parentId, handleNoneSelectionChanged: handleNoneSelectionChanged })))));
|
|
7681
7738
|
};
|
|
7682
7739
|
|
|
7683
7740
|
var OptionUnitsCard = function (_a) {
|
|
@@ -7761,34 +7818,41 @@ var OptionBookingGroup = function (_a) {
|
|
|
7761
7818
|
if (onGroupChange)
|
|
7762
7819
|
onGroupChange(updatedGroup, optionId);
|
|
7763
7820
|
};
|
|
7821
|
+
var handleNoneSelectionChanged = function () {
|
|
7822
|
+
var updatedGroup = __assign(__assign({}, group), { options: group.options.map(function (groupOption) { return (__assign(__assign({}, groupOption), { isSelected: false })); }) });
|
|
7823
|
+
if (onGroupChange)
|
|
7824
|
+
onGroupChange(updatedGroup, optionId);
|
|
7825
|
+
};
|
|
7764
7826
|
var selectedPrice = group.name === ""
|
|
7765
7827
|
? 0
|
|
7766
7828
|
: (_c = (_b = group.options.find(function (x) { return x.isSelected; })) === null || _b === void 0 ? void 0 : _b.line.price) !== null && _c !== void 0 ? _c : 0;
|
|
7767
7829
|
return (React__default["default"].createElement("div", { className: firstClassName },
|
|
7768
7830
|
group.title && React__default["default"].createElement("h4", { className: secondClassName }, group.title),
|
|
7769
7831
|
React__default["default"].createElement("table", { className: buildClassName(["table", "table--striped"]) },
|
|
7770
|
-
React__default["default"].createElement("tbody", null,
|
|
7771
|
-
React__default["default"].createElement("
|
|
7772
|
-
React__default["default"].createElement("
|
|
7773
|
-
|
|
7774
|
-
|
|
7775
|
-
|
|
7776
|
-
|
|
7777
|
-
React__default["default"].createElement("div", { className: "
|
|
7778
|
-
React__default["default"].createElement("div", { className: "
|
|
7779
|
-
React__default["default"].createElement("div", { className:
|
|
7780
|
-
option.requirementType === 1 && "checkbox",
|
|
7781
|
-
option.requirementType === 2 && "radiobutton",
|
|
7782
|
-
]) },
|
|
7832
|
+
React__default["default"].createElement("tbody", null,
|
|
7833
|
+
group.options.map(function (option, index) { return (React__default["default"].createElement("tr", { key: option.line.entryLineGuid },
|
|
7834
|
+
React__default["default"].createElement("td", null,
|
|
7835
|
+
React__default["default"].createElement("div", { className: buildClassName([
|
|
7836
|
+
"tree",
|
|
7837
|
+
option.isSelected && "tree--selected",
|
|
7838
|
+
]) },
|
|
7839
|
+
React__default["default"].createElement("div", { className: "tree__level" },
|
|
7840
|
+
React__default["default"].createElement("div", { className: "tree__header" },
|
|
7841
|
+
React__default["default"].createElement("div", { className: "tree__description-collapse" },
|
|
7783
7842
|
React__default["default"].createElement("div", { className: buildClassName([
|
|
7784
|
-
option.requirementType === 1 && "
|
|
7785
|
-
option.requirementType === 2 &&
|
|
7786
|
-
"radiobutton__label",
|
|
7843
|
+
option.requirementType === 1 && "checkbox",
|
|
7844
|
+
option.requirementType === 2 && "radiobutton",
|
|
7787
7845
|
]) },
|
|
7788
|
-
React__default["default"].createElement(
|
|
7789
|
-
|
|
7790
|
-
|
|
7791
|
-
|
|
7846
|
+
React__default["default"].createElement("div", { className: buildClassName([
|
|
7847
|
+
option.requirementType === 1 && "checkbox__label",
|
|
7848
|
+
option.requirementType === 2 &&
|
|
7849
|
+
"radiobutton__label",
|
|
7850
|
+
]) },
|
|
7851
|
+
React__default["default"].createElement(OptionItem, { option: option, parentId: parentId, index: index, selectedPrice: selectedPrice, onOptionChange: handleOptionChange }),
|
|
7852
|
+
!lodash.isEmpty(option.groups) && (React__default["default"].createElement("div", { className: "tree__body" }, option.groups.map(function (optionGroup) { return (React__default["default"].createElement(OptionBookingGroup, { optionId: option.line.entryLineGuid, group: optionGroup, firstClassName: "tree__level", secondClassName: "tree__level-heading", parentId: parentId + "_" + optionGroup.name, onGroupChange: handleChildGroupChange })); }))),
|
|
7853
|
+
!lodash.isEmpty(option.units) && (React__default["default"].createElement(OptionUnitsCard, { units: option.units, parentIndex: index, onUnitsChange: handleOnUnitsChange })),
|
|
7854
|
+
!lodash.isEmpty(option.pax) && (React__default["default"].createElement(OptionPaxCard, { pax: option.pax, parentIndex: index, onPaxChange: handleOnPaxChange }))))))))))); }),
|
|
7855
|
+
React__default["default"].createElement(NoneOption, { group: group, parentId: parentId, handleNoneSelectionChanged: handleNoneSelectionChanged })))));
|
|
7792
7856
|
};
|
|
7793
7857
|
|
|
7794
7858
|
var OptionsForm = function () {
|
|
@@ -7880,27 +7944,32 @@ var OptionsForm = function () {
|
|
|
7880
7944
|
};
|
|
7881
7945
|
|
|
7882
7946
|
var ProductCard = function (_a) {
|
|
7883
|
-
var productName = _a.productName, thumbnailUrl = _a.thumbnailUrl;
|
|
7947
|
+
var productName = _a.productName, thumbnailUrl = _a.thumbnailUrl, handleToggleClick = _a.handleToggleClick;
|
|
7884
7948
|
return (React__default["default"].createElement("div", { className: "booking__product" },
|
|
7885
7949
|
React__default["default"].createElement("div", { className: "booking__product-image" }, thumbnailUrl && (React__default["default"].createElement("img", { src: thumbnailUrl + "?height=100&width=100", alt: productName, className: "mediacontent" }))),
|
|
7886
7950
|
React__default["default"].createElement("div", { className: "booking__product-text" },
|
|
7887
|
-
React__default["default"].createElement("h3", { className: "booking__product-heading" }, productName))
|
|
7951
|
+
React__default["default"].createElement("h3", { className: "booking__product-heading" }, productName)),
|
|
7952
|
+
React__default["default"].createElement("button", { type: "button", className: "booking__product-toggle", onClick: handleToggleClick })));
|
|
7888
7953
|
};
|
|
7889
7954
|
|
|
7890
7955
|
var Sidebar = function (_a) {
|
|
7891
7956
|
var productName = _a.productName, thumbnailUrl = _a.thumbnailUrl, isLoading = _a.isLoading, travelersText = _a.travelersText, startDateText = _a.startDateText, endDateText = _a.endDateText, departureFlightText = _a.departureFlightText, returnFlightText = _a.returnFlightText, basePrice = _a.basePrice, totalPrice = _a.totalPrice, includedCosts = _a.includedCosts, extraCosts = _a.extraCosts, deposit = _a.deposit, showAccommodationInfo = _a.showAccommodationInfo, headerComponent = _a.headerComponent, footerComponent = _a.footerComponent, loaderComponent = _a.loaderComponent;
|
|
7957
|
+
var _b = React.useState(false), active = _b[0], setActive = _b[1];
|
|
7892
7958
|
var canShowPriceBreakdownSection = Boolean(basePrice && basePrice > 0) ||
|
|
7893
7959
|
!lodash.isEmpty(includedCosts) ||
|
|
7894
7960
|
!lodash.isEmpty(extraCosts);
|
|
7895
7961
|
var canShowTotalPriceSection = Boolean(totalPrice && totalPrice > 0);
|
|
7896
7962
|
var remainingAmount = (totalPrice !== null && totalPrice !== void 0 ? totalPrice : 0) - (deposit !== null && deposit !== void 0 ? deposit : 0);
|
|
7963
|
+
var handleToggleClick = function () {
|
|
7964
|
+
setActive(!active);
|
|
7965
|
+
};
|
|
7897
7966
|
return (React__default["default"].createElement("div", { className: buildClassName([
|
|
7898
7967
|
"booking__sidebar",
|
|
7899
|
-
"booking__sidebar--active",
|
|
7968
|
+
active && "booking__sidebar--active",
|
|
7900
7969
|
]) },
|
|
7901
7970
|
headerComponent,
|
|
7902
7971
|
React__default["default"].createElement("div", { className: "booking__sidebar-frame" },
|
|
7903
|
-
React__default["default"].createElement(ProductCard, { productName: productName, thumbnailUrl: thumbnailUrl }),
|
|
7972
|
+
React__default["default"].createElement(ProductCard, { productName: productName, thumbnailUrl: thumbnailUrl, handleToggleClick: handleToggleClick }),
|
|
7904
7973
|
React__default["default"].createElement("div", { className: "pricing-summary" },
|
|
7905
7974
|
React__default["default"].createElement("div", { className: "pricing-summary__region" },
|
|
7906
7975
|
React__default["default"].createElement("div", { className: "pricing-summary__group" },
|
|
@@ -8207,6 +8276,16 @@ var LabeledSelect = function (_a) {
|
|
|
8207
8276
|
function isValidEmail(email) {
|
|
8208
8277
|
return !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(email);
|
|
8209
8278
|
}
|
|
8279
|
+
function getAge(birthDateText, startDateText) {
|
|
8280
|
+
var birthDate = new Date(birthDateText);
|
|
8281
|
+
var startDate = new Date(startDateText);
|
|
8282
|
+
var age = startDate.getFullYear() - birthDate.getFullYear();
|
|
8283
|
+
var m = startDate.getMonth() - birthDate.getMonth();
|
|
8284
|
+
if (m < 0 || (m === 0 && startDate.getDate() < birthDate.getDate())) {
|
|
8285
|
+
age--;
|
|
8286
|
+
}
|
|
8287
|
+
return age;
|
|
8288
|
+
}
|
|
8210
8289
|
var validateForm = function (values) {
|
|
8211
8290
|
var errors = {};
|
|
8212
8291
|
values.adults.forEach(function (adult, index) {
|
|
@@ -8222,6 +8301,12 @@ var validateForm = function (values) {
|
|
|
8222
8301
|
if (lodash.isEmpty(adult.birthDate)) {
|
|
8223
8302
|
lodash.set(errors, "adults[" + index + "].birthDate", "Reiziger " + (index + 1) + ": geboortedatum");
|
|
8224
8303
|
}
|
|
8304
|
+
else if (values.startDate) {
|
|
8305
|
+
var age = getAge(adult.birthDate, values.startDate);
|
|
8306
|
+
if (age < 18) {
|
|
8307
|
+
lodash.set(errors, "adults[" + index + "].birthDate", "Reiziger " + (index + 1) + ": is geen volwassene");
|
|
8308
|
+
}
|
|
8309
|
+
}
|
|
8225
8310
|
});
|
|
8226
8311
|
values.children.forEach(function (child, index) {
|
|
8227
8312
|
if (lodash.isEmpty(child.gender)) {
|
|
@@ -8236,6 +8321,12 @@ var validateForm = function (values) {
|
|
|
8236
8321
|
if (lodash.isEmpty(child.birthDate)) {
|
|
8237
8322
|
lodash.set(errors, "children[" + index + "].birthDate", "Reiziger " + (values.adults.length + index + 1) + ": geboortedatum");
|
|
8238
8323
|
}
|
|
8324
|
+
else if (values.startDate) {
|
|
8325
|
+
var age = getAge(child.birthDate, values.startDate);
|
|
8326
|
+
if (age >= 18) {
|
|
8327
|
+
lodash.set(errors, "children[" + index + "].birthDate", "Reiziger " + (index + 1) + ": is geen kind");
|
|
8328
|
+
}
|
|
8329
|
+
}
|
|
8239
8330
|
});
|
|
8240
8331
|
if (values.mainBookerId < 0) {
|
|
8241
8332
|
errors.mainBookerId = "Er werd geen hoofdboeker geselecteerd";
|
|
@@ -8276,8 +8367,9 @@ var validateForm = function (values) {
|
|
|
8276
8367
|
function createTraveler(id) {
|
|
8277
8368
|
return { id: id, firstName: "", lastName: "", birthDate: "", gender: "" };
|
|
8278
8369
|
}
|
|
8279
|
-
function createInitialValues(adultIds, childIds) {
|
|
8370
|
+
function createInitialValues(adultIds, childIds, startDate) {
|
|
8280
8371
|
var initialValues = {
|
|
8372
|
+
startDate: startDate,
|
|
8281
8373
|
adults: adultIds.map(function (id) { return createTraveler(id); }),
|
|
8282
8374
|
children: childIds.map(function (id) { return createTraveler(id); }),
|
|
8283
8375
|
mainBookerId: -1,
|
|
@@ -8301,9 +8393,10 @@ var TravelersForm = function () {
|
|
|
8301
8393
|
var dispatch = useAppDispatch();
|
|
8302
8394
|
var settings = React.useContext(SettingsContext);
|
|
8303
8395
|
var bookingQueryString = reactRedux.useSelector(selectBookingQueryString);
|
|
8396
|
+
var startDate = reactRedux.useSelector(selectStartDate);
|
|
8304
8397
|
var adultIds = reactRedux.useSelector(selectAdultIds);
|
|
8305
8398
|
var childIds = reactRedux.useSelector(selectChildIds);
|
|
8306
|
-
var initialValues = (_a = reactRedux.useSelector(selectTravelersFormValues)) !== null && _a !== void 0 ? _a : createInitialValues(adultIds, childIds);
|
|
8399
|
+
var initialValues = (_a = reactRedux.useSelector(selectTravelersFormValues)) !== null && _a !== void 0 ? _a : createInitialValues(adultIds, childIds, startDate);
|
|
8307
8400
|
var formik$1 = formik.useFormik({
|
|
8308
8401
|
initialValues: initialValues,
|
|
8309
8402
|
validate: validateForm,
|
|
@@ -8606,9 +8699,10 @@ var Booking = function (_a) {
|
|
|
8606
8699
|
React__default["default"].createElement(StepRoute, { path: error.pathSuffix, number: 4, title: translations.STEPS.ERROR, component: React__default["default"].createElement(Error$1, null) }))),
|
|
8607
8700
|
React__default["default"].createElement("div", { className: "backdrop", id: "backdrop" }),
|
|
8608
8701
|
React__default["default"].createElement(SidebarContainer, { productName: productName, thumbnailUrl: thumbnailUrl })))),
|
|
8609
|
-
|
|
8610
|
-
|
|
8611
|
-
|
|
8702
|
+
!packageDetails && !bookingNumber && (React__default["default"].createElement("div", { className: "booking" },
|
|
8703
|
+
React__default["default"].createElement("div", { className: "booking__loader" },
|
|
8704
|
+
loaderComponent,
|
|
8705
|
+
React__default["default"].createElement("p", { className: "booking__loader-text" }, translations.MAIN.PREPARING_BOOKING))))));
|
|
8612
8706
|
};
|
|
8613
8707
|
|
|
8614
8708
|
var BookingWizard = function (_a) {
|
|
@@ -19,6 +19,7 @@ export declare const selectBookingNumber: (state: RootState) => string | undefin
|
|
|
19
19
|
export declare const selectBookingRooms: (state: RootState) => Room[] | undefined;
|
|
20
20
|
export declare const selectCalculateDeposit: (state: RootState) => boolean;
|
|
21
21
|
export declare const selectIsRetry: (state: RootState) => boolean;
|
|
22
|
+
export declare const selectStartDate: (state: RootState) => string | undefined;
|
|
22
23
|
export declare const selectBookingQuery: (state: RootState) => Record<string, string> | undefined;
|
|
23
24
|
export declare const selectBookingQueryString: import("reselect").OutputSelector<{
|
|
24
25
|
booking: import("./booking-slice").BookingState;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { BookingOptionGroup, PerBookingPackageOption, PerPaxPackageOption, PerUnitPackageOption } from "@qite/tide-client/build/types";
|
|
2
|
+
import React from "react";
|
|
3
|
+
interface NoneOptionProps {
|
|
4
|
+
group: BookingOptionGroup<PerBookingPackageOption> | BookingOptionGroup<PerUnitPackageOption> | BookingOptionGroup<PerPaxPackageOption>;
|
|
5
|
+
parentId: string;
|
|
6
|
+
handleNoneSelectionChanged: () => void;
|
|
7
|
+
}
|
|
8
|
+
declare const NoneOption: React.FC<NoneOptionProps>;
|
|
9
|
+
export default NoneOption;
|