@roomstay/frontend 2.1.6 → 2.1.8

package/dist/src/components/steps/confirmation/StepConfirmationCountrySelector.js

@@ -27,38 +27,38 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const react_1 = require("react");
+const react_1 = __importDefault(require("react"));
+const react_2 = require("react");
 const react_i18next_1 = require("react-i18next");
 const CountryCodesAndNumbers_1 = require("../../../models/CountryCodesAndNumbers");
 const Translation_1 = require("translations/Translation");
 const Icon_1 = __importStar(require("../../generic/Icon/Icon"));
 require("./StepConfirmationCountrySelector.global.scss");
-const AutoFocusOnSelect_1 = require("../../../hooks/AutoFocusOnSelect");
+const AutoFocusOnSelect_1 = require("hooks/AutoFocusOnSelect");
 const Select_1 = require("../../generic/Select/Select");
-const StepConfirmationCountrySelector = (0, react_1.forwardRef)(function InnerStepConfirmationCountrySelector(props, ref) {
-    const inputRef = (0, react_1.useRef)(null);
-    (0, react_1.useImperativeHandle)(ref, () => inputRef.current);
+const StepConfirmationCountrySelector = (0, react_2.forwardRef)(function InnerStepConfirmationCountrySelector(props, ref) {
+    const inputRef = (0, react_2.useRef)(null);
+    (0, react_2.useImperativeHandle)(ref, () => inputRef.current);
     const { onDropdownClosed, onItemSelected, onTriggerClicked, isDropdownOpen, isFocused } = (0, AutoFocusOnSelect_1.useAutoFocusOnSelect)({
         ref: inputRef.current,
         focusOnSelected: false,
     });
     const { validationStatus, name, onChange, value = '' } = props;
-    const [inputValue, setInputValue] = (0, react_1.useState)(value);
-    (0, react_1.useEffect)(() => {
+    const [inputValue, setInputValue] = (0, react_2.useState)(value);
+    (0, react_2.useEffect)(() => {
         setInputValue(value);
     }, [value]);
-    const organizedCountries = (0, react_1.useMemo)(() => {
+    const organizedCountries = (0, react_2.useMemo)(() => {
         return CountryCodesAndNumbers_1.ListOfCountriesAndCodes.sort((a, b) => {
             return `${(a.suggested ? '000' : '') + a.label}`.localeCompare(`${(b.suggested ? '000' : '') + b.label}`);
         });
     }, [CountryCodesAndNumbers_1.ListOfCountriesAndCodes]);
-    const filterCountries = (0, react_1.useCallback)((inputValue) => {
+    const filterCountries = (0, react_2.useCallback)((inputValue) => {
         return organizedCountries.filter(({ label }) => label.toUpperCase().includes(inputValue.toUpperCase()));
     }, [organizedCountries]);
-    const [options, setOptions] = (0, react_1.useState)(filterCountries(value));
+    const [options, setOptions] = (0, react_2.useState)(filterCountries(value));
     const { t } = (0, react_i18next_1.useTranslation)();
-    const container = (0, react_1.useRef)(null);
+    const container = (0, react_2.useRef)(null);
     const emptyValue = () => {
         onChange === null || onChange === void 0 ? void 0 : onChange({ target: { name, value: '' } });
         setInputValue('');
@@ -99,25 +99,30 @@ const StepConfirmationCountrySelector = (0, react_1.forwardRef)(function InnerSt
             emptyValue();
         }
     };
-    return (React.createElement("div", { className: fieldClasses },
-        React.createElement("div", { className: "rs-enhanced-country-field--anchor", ref: container }),
-        React.createElement("div", { className: "rs-enhanced-country-field--search" },
-            React.createElement("input", { disabled: props.disabled, ref: inputRef, placeholder: t(Translation_1.Translation.Step.Confirmation.Inputs.Country) + ' *', onChange: onInputChanged, value: inputValue }),
-            React.createElement("div", { onClick: () => {
+    return (react_1.default.createElement("div", { className: fieldClasses },
+        react_1.default.createElement("div", { className: "rs-enhanced-country-field--anchor", ref: container }),
+        react_1.default.createElement("div", { className: "rs-enhanced-country-field--search" },
+            react_1.default.createElement("input", { disabled: props.disabled, ref: inputRef, placeholder: t(Translation_1.Translation.Step.Confirmation.Inputs.Country) + ' *', onChange: onInputChanged, value: inputValue }),
+            react_1.default.createElement("div", { onClick: () => {
                     var _a;
                     emptyValue();
                     (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                 }, className: (0, classnames_1.default)('rs-enhanced-country-field--close', {
                     '--hide': !inputValue,
                 }) },
-                React.createElement(Icon_1.default, { icon: Icon_1.IconType.Close })),
-            React.createElement("div", { className: "rs-enhanced-country-field--country", onClick: onTriggerClicked },
-                React.createElement(Icon_1.default, { icon: Icon_1.IconType.Dropdown }))),
-        React.createElement(Select_1.Select, { offset: [0, 21], open: isDropdownOpen, onClose: onClose, target: container.current, options: options, value: value, onChange: (value) => onCountryClick(getOption(value)), keyName: "label", renderOption: (country) => (React.createElement("div", { className: "rs-enhanced-country-field--suggest-list-country" },
-                React.createElement("div", { className: "rs-enhanced-country-field--suggest-list-country-icon" }, (0, CountryCodesAndNumbers_1.convertCountryCodeToFlag)(country.code)),
-                React.createElement("div", { className: "rs-enhanced-country-field--suggest-list-country-name" },
+                react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Close })),
+            react_1.default.createElement("div", { className: "rs-enhanced-country-field--country", onClick: onTriggerClicked },
+                react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Dropdown }))),
+        react_1.default.createElement(Select_1.Select, { offset: [0, 21], open: isDropdownOpen, onClose: onClose, target: container.current, options: options, value: value, onChange: (value) => {
+                const option = getOption(value);
+                if (option) {
+                    onCountryClick(option);
+                }
+            }, keyName: "label", renderOption: (country) => (react_1.default.createElement("div", { className: "rs-enhanced-country-field--suggest-list-country" },
+                react_1.default.createElement("div", { className: "rs-enhanced-country-field--suggest-list-country-icon" }, (0, CountryCodesAndNumbers_1.convertCountryCodeToFlag)(country === null || country === void 0 ? void 0 : country.code)),
+                react_1.default.createElement("div", { className: "rs-enhanced-country-field--suggest-list-country-name" }, country === null || country === void 0 ? void 0 :
                     country.label,
-                    " (",
+                    " (", country === null || country === void 0 ? void 0 :
                     country.code,
                     ")"))) })));
 });

package/dist/src/components/steps/confirmation/StepConfirmationCountrySelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepConfirmationCountrySelector.js","sourceRoot":"/","sources":["src/components/steps/confirmation/StepConfirmationCountrySelector.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames';\nimport * as React from 'react';\nimport { ChangeEvent, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { convertCountryCodeToFlag, CountryType, ListOfCountriesAndCodes } from '@/models/CountryCodesAndNumbers';\nimport { Translation } from 'translations/Translation';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\n\nimport './StepConfirmationCountrySelector.global.scss';\nimport { useAutoFocusOnSelect } from '../../../hooks/AutoFocusOnSelect';\nimport { Select } from '../../generic/Select/Select';\n\ninterface StepConfirmationCountrySelectorProps {\n    validationStatus?: 'success' | 'error';\n    name?: string;\n    value?: string; // example: Australia\n    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n    disabled?: boolean;\n}\n\nconst StepConfirmationCountrySelector = forwardRef<HTMLInputElement, StepConfirmationCountrySelectorProps>(function InnerStepConfirmationCountrySelector(props, ref) {\n    const inputRef = useRef<HTMLInputElement>(null);\n    useImperativeHandle(ref, () => inputRef.current);\n    const { onDropdownClosed, onItemSelected, onTriggerClicked, isDropdownOpen, isFocused } = useAutoFocusOnSelect({\n        ref: inputRef.current,\n        focusOnSelected: false,\n    });\n\n    const { validationStatus, name, onChange, value = '' } = props;\n    const [inputValue, setInputValue] = useState<string>(value);\n\n    useEffect(() => {\n        setInputValue(value);\n    }, [value]);\n    const organizedCountries: CountryType[] = useMemo(() => {\n        return ListOfCountriesAndCodes.sort((a, b) => {\n            return `${(a.suggested ? '000' : '') + a.label}`.localeCompare(`${(b.suggested ? '000' : '') + b.label}`);\n        });\n    }, [ListOfCountriesAndCodes]);\n    const filterCountries = useCallback(\n        (inputValue: string): CountryType[] => {\n            return organizedCountries.filter(({ label }) => label.toUpperCase().includes(inputValue.toUpperCase()));\n        },\n        [organizedCountries]\n    );\n    const [options, setOptions] = useState<CountryType[]>(filterCountries(value));\n\n    const { t } = useTranslation();\n\n    const container = useRef(null);\n\n    const emptyValue = () => {\n        onChange?.({ target: { name, value: '' } } as any);\n        setInputValue('');\n        setOptions(organizedCountries);\n    };\n\n    const onInputChanged = (e: ChangeEvent<HTMLInputElement>) => {\n        const value = e.target.value?.trim() || '';\n        if (value) {\n            const options = filterCountries(value);\n            setOptions(options);\n            const exactCountry = options.find(({ label }) => label === value);\n            if (exactCountry) {\n                onCountryClick(exactCountry);\n            }\n        } else {\n            setOptions(organizedCountries);\n        }\n        setInputValue(e.target.value);\n    };\n\n    const fieldClasses = classNames('rs-enhanced-country-field', {\n        [`--${validationStatus}`]: !!validationStatus,\n        '--focused': isFocused,\n        '--disabled': props.disabled,\n    });\n\n    const onCountryClick = (country: CountryType): void => {\n        setInputValue(country.label);\n        onItemSelected();\n        onChange?.({ target: { name, value: country.label } } as any);\n    };\n\n    const getOption = (key: CountryType['label']): CountryType => {\n        return options.find(({ label }) => label === key);\n    };\n\n    const onClose = (e: MouseEvent) => {\n        onDropdownClosed(e);\n        if (organizedCountries.every(({ label }) => label !== inputRef.current?.value)) {\n            emptyValue();\n        }\n    };\n\n    return (\n        <div className={fieldClasses}>\n            <div className=\"rs-enhanced-country-field--anchor\" ref={container}></div>\n\n            <div className=\"rs-enhanced-country-field--search\">\n                <input disabled={props.disabled} ref={inputRef} placeholder={t(Translation.Step.Confirmation.Inputs.Country) + ' *'} onChange={onInputChanged} value={inputValue} />\n                <div\n                    onClick={() => {\n                        emptyValue();\n                        inputRef.current?.focus();\n                    }}\n                    className={classNames('rs-enhanced-country-field--close', {\n                        '--hide': !inputValue,\n                    })}\n                >\n                    <Icon icon={IconType.Close} />\n                </div>\n                <div className=\"rs-enhanced-country-field--country\" onClick={onTriggerClicked}>\n                    <Icon icon={IconType.Dropdown} />\n                </div>\n            </div>\n\n            <Select<CountryType, 'label'>\n                offset={[0, 21]}\n                open={isDropdownOpen}\n                onClose={onClose}\n                target={container.current}\n                options={options}\n                value={value}\n                onChange={(value) => onCountryClick(getOption(value))}\n                keyName=\"label\"\n                renderOption={(country) => (\n                    <div className=\"rs-enhanced-country-field--suggest-list-country\">\n                        <div className=\"rs-enhanced-country-field--suggest-list-country-icon\">{convertCountryCodeToFlag(country.code)}</div>\n                        <div className=\"rs-enhanced-country-field--suggest-list-country-name\">\n                            {country.label} ({country.code})\n                        </div>\n                    </div>\n                )}\n            />\n        </div>\n    );\n});\n\nexport default StepConfirmationCountrySelector;\n"]}
+{"version":3,"file":"StepConfirmationCountrySelector.js","sourceRoot":"/","sources":["src/components/steps/confirmation/StepConfirmationCountrySelector.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames';\nimport React from 'react';\nimport { ChangeEvent, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { convertCountryCodeToFlag, CountryType, ListOfCountriesAndCodes } from '@/models/CountryCodesAndNumbers';\nimport { Translation } from 'translations/Translation';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\n\nimport './StepConfirmationCountrySelector.global.scss';\nimport { useAutoFocusOnSelect } from 'hooks/AutoFocusOnSelect';\nimport { Select } from '../../generic/Select/Select';\n\ninterface StepConfirmationCountrySelectorProps {\n    validationStatus?: 'success' | 'error';\n    name?: string;\n    value?: string; // example: Australia\n    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n    disabled?: boolean;\n}\n\nconst StepConfirmationCountrySelector = forwardRef<HTMLInputElement | null, StepConfirmationCountrySelectorProps>(function InnerStepConfirmationCountrySelector(props, ref) {\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(ref, () => inputRef.current);\n    const { onDropdownClosed, onItemSelected, onTriggerClicked, isDropdownOpen, isFocused } = useAutoFocusOnSelect({\n        ref: inputRef.current,\n        focusOnSelected: false,\n    });\n\n    const { validationStatus, name, onChange, value = '' } = props;\n    const [inputValue, setInputValue] = useState<string>(value);\n\n    useEffect(() => {\n        setInputValue(value);\n    }, [value]);\n    const organizedCountries: CountryType[] = useMemo(() => {\n        return ListOfCountriesAndCodes.sort((a, b) => {\n            return `${(a.suggested ? '000' : '') + a.label}`.localeCompare(`${(b.suggested ? '000' : '') + b.label}`);\n        });\n    }, [ListOfCountriesAndCodes]);\n    const filterCountries = useCallback(\n        (inputValue: string): CountryType[] => {\n            return organizedCountries.filter(({ label }) => label.toUpperCase().includes(inputValue.toUpperCase()));\n        },\n        [organizedCountries]\n    );\n    const [options, setOptions] = useState<CountryType[]>(filterCountries(value));\n\n    const { t } = useTranslation();\n\n    const container = useRef(null);\n\n    const emptyValue = () => {\n        onChange?.({ target: { name, value: '' } } as any);\n        setInputValue('');\n        setOptions(organizedCountries);\n    };\n\n    const onInputChanged = (e: ChangeEvent<HTMLInputElement>) => {\n        const value = e.target.value?.trim() || '';\n        if (value) {\n            const options = filterCountries(value);\n            setOptions(options);\n            const exactCountry = options.find(({ label }) => label === value);\n            if (exactCountry) {\n                onCountryClick(exactCountry);\n            }\n        } else {\n            setOptions(organizedCountries);\n        }\n        setInputValue(e.target.value);\n    };\n\n    const fieldClasses = classNames('rs-enhanced-country-field', {\n        [`--${validationStatus}`]: !!validationStatus,\n        '--focused': isFocused,\n        '--disabled': props.disabled,\n    });\n\n    const onCountryClick = (country: CountryType): void => {\n        setInputValue(country.label);\n        onItemSelected();\n        onChange?.({ target: { name, value: country.label } } as any);\n    };\n\n    const getOption = (key: CountryType['label']): CountryType | undefined => {\n        return options.find(({ label }) => label === key);\n    };\n\n    const onClose = (e: Event) => {\n        onDropdownClosed(e);\n        if (organizedCountries.every(({ label }) => label !== inputRef.current?.value)) {\n            emptyValue();\n        }\n    };\n\n    return (\n        <div className={fieldClasses}>\n            <div className=\"rs-enhanced-country-field--anchor\" ref={container}></div>\n\n            <div className=\"rs-enhanced-country-field--search\">\n                <input disabled={props.disabled} ref={inputRef} placeholder={t(Translation.Step.Confirmation.Inputs.Country) + ' *'} onChange={onInputChanged} value={inputValue} />\n                <div\n                    onClick={() => {\n                        emptyValue();\n                        inputRef.current?.focus();\n                    }}\n                    className={classNames('rs-enhanced-country-field--close', {\n                        '--hide': !inputValue,\n                    })}\n                >\n                    <Icon icon={IconType.Close} />\n                </div>\n                <div className=\"rs-enhanced-country-field--country\" onClick={onTriggerClicked}>\n                    <Icon icon={IconType.Dropdown} />\n                </div>\n            </div>\n\n            <Select<CountryType, 'label'>\n                offset={[0, 21]}\n                open={isDropdownOpen}\n                onClose={onClose}\n                target={container.current}\n                options={options}\n                value={value}\n                onChange={(value) => {\n                    const option = getOption(value);\n                    if (option) {\n                        onCountryClick(option);\n                    }\n                }}\n                keyName=\"label\"\n                renderOption={(country) => (\n                    <div className=\"rs-enhanced-country-field--suggest-list-country\">\n                        <div className=\"rs-enhanced-country-field--suggest-list-country-icon\">{convertCountryCodeToFlag(country?.code as string)}</div>\n                        <div className=\"rs-enhanced-country-field--suggest-list-country-name\">\n                            {country?.label} ({country?.code})\n                        </div>\n                    </div>\n                )}\n            />\n        </div>\n    );\n});\n\nexport default StepConfirmationCountrySelector;\n"]}

package/dist/src/components/steps/confirmation/StepConfirmationForm.js

@@ -35,8 +35,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
-const react_1 = require("react");
+const react_1 = __importDefault(require("react"));
+const react_2 = require("react");
 const Headline_1 = __importDefault(require("../../generic/Headline"));
 const Translation_1 = require("translations/Translation");
 const Text_1 = __importStar(require("../../generic/Text"));
@@ -75,24 +75,25 @@ const RoomstayThemeEngine_1 = __importDefault(require("../../../providers/Roomst
 const hooks_1 = require("../../../hooks/index.js");
 const dayjs_1 = __importDefault(require("dayjs"));
 function StepConfirmationForm() {
-    const [differenceWarning, setDifferenceWarning] = (0, react_1.useState)({
+    const [differenceWarning, setDifferenceWarning] = (0, react_2.useState)({
         differences: [],
         warnings: [],
     });
-    const [source, setSource] = (0, react_1.useState)('');
+    const [source, setSource] = (0, react_2.useState)('');
     const { t } = (0, react_i18next_1.useTranslation)();
     const { queryPaymentMethod, queryRoomstayId, queryPlanpayCheckoutId } = (0, ConfirmationQuery_1.useConfirmationQuery)();
     const context = (0, contexts_1.useBookingEngine)();
     const methods = (0, react_hook_form_1.useFormContext)();
     const { isBackFromPlanpay, isLoading, apiErrors, clearApiErrors, book, rollbackReservation, commitReservation } = (0, ConfirmationStepContext_1.useConfirmationStep)();
     const basketContext = (0, contexts_1.useBasket)();
-    const tokenizerRef = (0, react_1.useRef)(null);
+    const tokenizerRef = (0, react_2.useRef)(null);
     const history = (0, react_router_dom_1.useHistory)();
     const { hotel } = (0, hooks_1.useCurrentHotel)();
     const toPaymentPayload = (paymentMethod) => __awaiter(this, void 0, void 0, function* () {
+        var _a;
         let payment;
         switch (paymentMethod) {
-            case core_1.EBookingPaymentMethod.Planpay:
+            case core_1.EBookingPaymentMethod.Planpay: {
                 const params = new URLSearchParams(window.location.search);
                 params.set('roomstayId', '{{rsId}}');
                 params.set('session', context.sessionProvider.getCurrentSessionID().toString());
@@ -100,19 +101,20 @@ function StepConfirmationForm() {
                 const redirectURL = `${window.location.origin}${window.location.pathname}${window.location.search}#/step/confirmation/?${params}`;
                 payment = {
                     Method: core_1.EBookingPaymentMethod.Planpay,
-                    PlanpayCheckoutId: queryPlanpayCheckoutId,
+                    PlanpayCheckoutId: queryPlanpayCheckoutId || undefined,
                     RedirectUrl: redirectURL,
                 };
                 break;
+            }
             default:
                 payment = {
                     Method: core_1.EBookingPaymentMethod.Card,
-                    PaymentCard: yield tokenizerRef.current.getTokenizedCode(),
+                    PaymentCard: yield ((_a = tokenizerRef.current) === null || _a === void 0 ? void 0 : _a.getTokenizedCode()),
                 };
         }
         return payment;
     });
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         var _a;
         const validatedPaymentMethod = Object.values(core_1.EBookingPaymentMethod).includes(queryPaymentMethod)
             ? queryPaymentMethod
@@ -124,16 +126,16 @@ function StepConfirmationForm() {
                 onPlaypayCallback(validatedPaymentMethod);
             }
             else {
-                rollbackReservation();
+                rollbackReservation === null || rollbackReservation === void 0 ? void 0 : rollbackReservation();
             }
         }
         return () => {
             if (!isBackFromPlanpay)
-                rollbackReservation();
+                rollbackReservation === null || rollbackReservation === void 0 ? void 0 : rollbackReservation();
         };
     }, []);
     const onPlaypayCallback = (paymentMethod) => __awaiter(this, void 0, void 0, function* () {
-        yield commitReservation(basketContext.reservationData);
+        yield (commitReservation === null || commitReservation === void 0 ? void 0 : commitReservation(basketContext.reservationData));
     });
     const paymentMethod = methods.watch('paymentMethod');
     context.engine
@@ -147,11 +149,11 @@ function StepConfirmationForm() {
         history.push(StepRoom_1.default.getStepUrl());
     });
     const onNextStepClicked = () => __awaiter(this, void 0, void 0, function* () {
-        yield handleBook(paymentMethod, (resData) => __awaiter(this, void 0, void 0, function* () { return commitReservation(resData); }));
+        yield handleBook(paymentMethod, (resData) => __awaiter(this, void 0, void 0, function* () { return commitReservation === null || commitReservation === void 0 ? void 0 : commitReservation(resData); }));
         return false;
     });
     const handleBook = (paymentMethod, onSuccess) => __awaiter(this, void 0, void 0, function* () {
-        yield book(() => __awaiter(this, void 0, void 0, function* () { return toPaymentPayload(paymentMethod); }), () => __awaiter(this, void 0, void 0, function* () {
+        yield (book === null || book === void 0 ? void 0 : book(() => __awaiter(this, void 0, void 0, function* () { return toPaymentPayload(paymentMethod); }), () => __awaiter(this, void 0, void 0, function* () {
             try {
                 if (paymentMethod === core_1.EBookingPaymentMethod.Card)
                     yield tokenizerRef.current.getTokenizedCode();
@@ -164,56 +166,58 @@ function StepConfirmationForm() {
             if (validationResult) {
                 setDifferenceWarning(validationResult);
             }
-        }, onSuccess);
+        }, onSuccess));
     });
     const handleChangePaymentMethod = (paymentMethod) => __awaiter(this, void 0, void 0, function* () {
         if (paymentMethod !== core_1.EBookingPaymentMethod.Planpay) {
-            yield rollbackReservation();
+            yield (rollbackReservation === null || rollbackReservation === void 0 ? void 0 : rollbackReservation());
         }
     });
-    return (React.createElement("form", null,
-        isBackFromPlanpay ? (React.createElement(LargeLoader_1.default, null)) : (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: "u-marg-bottom--heavy" },
-                React.createElement("div", { className: "u-marg-bottom--light" },
-                    React.createElement(Headline_1.default, { bold: true }, t(Translation_1.Translation.Step.Confirmation.GuestDetails))),
-                React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Success },
-                    React.createElement("strong", null, t(Translation_1.Translation.Step.Confirmation.AlmostDone, { required: '*' })))),
-            React.createElement(RoomContactDetails_1.default, null),
-            source === 'inline' ? (React.createElement(Alert_1.default, { type: Alert_1.AlertType.Accent2, heavyPadding: true },
-                React.createElement("div", { className: "u-flex u-w-100 flex-wrap flex-xl-nowrap" },
-                    React.createElement("div", null,
-                        React.createElement(Text_1.default, { color: Color_1.Color.Accent, bold: true }, t(Translation_1.Translation.Step.Confirmation.WantMoreRooms)),
-                        React.createElement(Text_1.default, { color: Color_1.Color.Navy }, t(Translation_1.Translation.Step.Confirmation.YouCanAddAndEditRooms))),
-                    React.createElement("div", { className: "d-flex align-items-center u-marg-top@xl-" },
-                        React.createElement(BEButton_1.default, { filled: true, primary: true, icon: Icon_1.IconType.Add, iconPosition: "left", onClick: returnToPickRooms }, t(Translation_1.Translation.Step.Confirmation.AddMoreRooms)))))) : (React.createElement(React.Fragment, null)),
-            ShowIATANumberOnCheckoutFeature_1.default.isActive() && (React.createElement(React.Fragment, null,
-                React.createElement("div", { className: "u-marg-bottom--heavy" },
-                    React.createElement("div", { className: "u-marg-bottom" },
-                        React.createElement(Headline_1.default, { bold: true }, "Travel Agent")),
-                    React.createElement("div", { className: "u-marg-bottom--light" },
-                        React.createElement(Text_1.default, { type: Text_1.TextType.Small },
-                            React.createElement("strong", null, t(Translation_1.Translation.Step.Confirmation.Inputs.IATANumber)))),
-                    React.createElement("div", { className: "u-marg-bottom--light" },
-                        React.createElement(Text_1.default, { type: Text_1.TextType.Small }, t(Translation_1.Translation.Step.Confirmation.Inputs.IATANumberGuide))),
-                    React.createElement(TextBox_1.default, Object.assign({ placeholder: t(Translation_1.Translation.Step.Confirmation.Inputs.IATANumber), wide: true }, methods.register('IATANumber')))),
-                React.createElement(LineBreak_1.default, null))),
-            React.createElement("div", { className: "u-marg-bottom--heavy" },
-                React.createElement("div", { className: "u-marg-bottom" },
-                    React.createElement(Headline_1.default, { bold: true }, t(Translation_1.Translation.Step.Confirmation.Comments))),
-                React.createElement(TextArea_1.default, Object.assign({ disabled: paymentMethod === core_1.EBookingPaymentMethod.Planpay, placeholder: t(Translation_1.Translation.Step.Confirmation.Inputs.EnterSpecialRequestsHere) }, methods.register('comment')))),
-            React.createElement(LineBreak_1.default, null),
-            React.createElement("div", { className: "u-marg-bottom--heavy" },
-                React.createElement("div", { className: "u-marg-bottom" },
-                    React.createElement(Headline_1.default, { bold: true }, t(Translation_1.Translation.Step.Confirmation.PaymentInformation))),
-                React.createElement(react_hook_form_1.Controller, { control: methods.control, name: "paymentMethod", render: ({ field: { onChange, value } }) => {
-                        return (React.createElement(React.Fragment, null,
-                            React.createElement("div", null,
-                                React.createElement(RadioButtonGroup_1.default, { options: [
+    return (react_1.default.createElement("form", null,
+        isBackFromPlanpay ? (react_1.default.createElement(LargeLoader_1.default, null)) : (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", { className: "u-marg-bottom--heavy" },
+                react_1.default.createElement("div", { className: "u-marg-bottom--light" },
+                    react_1.default.createElement(Headline_1.default, { bold: true }, t(Translation_1.Translation.Step.Confirmation.GuestDetails))),
+                react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Success },
+                    react_1.default.createElement("strong", null, t(Translation_1.Translation.Step.Confirmation.AlmostDone, { required: '*' })))),
+            react_1.default.createElement(RoomContactDetails_1.default, null),
+            source === 'inline' ? (react_1.default.createElement(Alert_1.default, { type: Alert_1.AlertType.Accent2, heavyPadding: true },
+                react_1.default.createElement("div", { className: "u-flex u-w-100 flex-wrap flex-xl-nowrap" },
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement(Text_1.default, { color: Color_1.Color.Accent, bold: true }, t(Translation_1.Translation.Step.Confirmation.WantMoreRooms)),
+                        react_1.default.createElement(Text_1.default, { color: Color_1.Color.Navy }, t(Translation_1.Translation.Step.Confirmation.YouCanAddAndEditRooms))),
+                    react_1.default.createElement("div", { className: "d-flex align-items-center u-marg-top@xl-" },
+                        react_1.default.createElement(BEButton_1.default, { filled: true, primary: true, icon: Icon_1.IconType.Add, iconPosition: "left", onClick: returnToPickRooms }, t(Translation_1.Translation.Step.Confirmation.AddMoreRooms)))))) : (react_1.default.createElement(react_1.default.Fragment, null)),
+            ShowIATANumberOnCheckoutFeature_1.default.isActive() && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("div", { className: "u-marg-bottom--heavy" },
+                    react_1.default.createElement("div", { className: "u-marg-bottom" },
+                        react_1.default.createElement(Headline_1.default, { bold: true }, "Travel Agent")),
+                    react_1.default.createElement("div", { className: "u-marg-bottom--light" },
+                        react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                            react_1.default.createElement("strong", null, t(Translation_1.Translation.Step.Confirmation.Inputs.IATANumber)))),
+                    react_1.default.createElement("div", { className: "u-marg-bottom--light" },
+                        react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small }, t(Translation_1.Translation.Step.Confirmation.Inputs.IATANumberGuide))),
+                    react_1.default.createElement(TextBox_1.default, Object.assign({ placeholder: t(Translation_1.Translation.Step.Confirmation.Inputs.IATANumber), wide: true }, methods.register('IATANumber')))),
+                react_1.default.createElement(LineBreak_1.default, null))),
+            react_1.default.createElement("div", { className: "u-marg-bottom--heavy" },
+                react_1.default.createElement("div", { className: "u-marg-bottom" },
+                    react_1.default.createElement(Headline_1.default, { bold: true }, t(Translation_1.Translation.Step.Confirmation.Comments))),
+                react_1.default.createElement(TextArea_1.default, Object.assign({ style: {
+                        resize: 'vertical',
+                    }, disabled: paymentMethod === core_1.EBookingPaymentMethod.Planpay, placeholder: t(Translation_1.Translation.Step.Confirmation.Inputs.EnterSpecialRequestsHere) }, methods.register('comment')))),
+            react_1.default.createElement(LineBreak_1.default, null),
+            react_1.default.createElement("div", { className: "u-marg-bottom--heavy" },
+                react_1.default.createElement("div", { className: "u-marg-bottom" },
+                    react_1.default.createElement(Headline_1.default, { bold: true }, t(Translation_1.Translation.Step.Confirmation.PaymentInformation))),
+                react_1.default.createElement(react_hook_form_1.Controller, { control: methods.control, name: "paymentMethod", render: ({ field: { onChange, value } }) => {
+                        return (react_1.default.createElement(react_1.default.Fragment, null,
+                            react_1.default.createElement("div", null,
+                                react_1.default.createElement(RadioButtonGroup_1.default, { options: [
                                         {
                                             value: core_1.EBookingPaymentMethod.Card,
-                                            label: (React.createElement("div", { className: "u-flex u-flex-align-center" },
-                                                React.createElement("div", { className: "u-marg-right--light" }, t(Translation_1.Translation.Step.Confirmation.CardLabel)),
-                                                React.createElement(AcceptablePaymentCard_1.default, { isDefault: (cardKey) => {
+                                            label: (react_1.default.createElement("div", { className: "u-flex u-flex-align-center" },
+                                                react_1.default.createElement("div", { className: "u-marg-right--light" }, t(Translation_1.Translation.Step.Confirmation.CardLabel)),
+                                                react_1.default.createElement(AcceptablePaymentCard_1.default, { isDefault: (cardKey) => {
                                                         return true;
                                                     }, style: {
                                                         height: 16,
@@ -222,33 +226,34 @@ function StepConfirmationForm() {
                                                         border: '0.5px solid #DFE1E5',
                                                         marginRight: 4,
                                                     } }))),
-                                            renderContent: () => React.createElement(StepConfirmationPaymentDetails_1.default, { ref: tokenizerRef }),
+                                            renderContent: () => react_1.default.createElement(StepConfirmationPaymentDetails_1.default, { ref: tokenizerRef }),
                                         },
                                         {
                                             value: core_1.EBookingPaymentMethod.Planpay,
-                                            label: (React.createElement("div", { className: "u-flex u-flex-align-center" },
-                                                React.createElement("div", null, t(Translation_1.Translation.Step.Confirmation.PlanpayLabel)),
-                                                React.createElement("div", { className: "u-flex u-flex-align-center u-marg-left--light", style: {
+                                            label: (react_1.default.createElement("div", { className: "u-flex u-flex-align-center" },
+                                                react_1.default.createElement("div", null, t(Translation_1.Translation.Step.Confirmation.PlanpayLabel)),
+                                                react_1.default.createElement("div", { className: "u-flex u-flex-align-center u-marg-left--light", style: {
                                                         borderRadius: '24px',
                                                         overflow: 'hidden',
                                                     } },
-                                                    React.createElement("img", { height: 16, src: RoomstayThemeEngine_1.default.getImageAssetUrl('planpay-logo-small.svg'), alt: "" })),
-                                                !methods.formState.isValid && (React.createElement(Text_1.default, { color: Color_1.Color.Graphite, className: "u-flex u-flex-align-center", style: {
+                                                    react_1.default.createElement("img", { height: 16, src: RoomstayThemeEngine_1.default.getImageAssetUrl('planpay-logo-small.svg'), alt: "" })),
+                                                !methods.formState.isValid && (react_1.default.createElement(Text_1.default, { color: Color_1.Color.Graphite, className: "u-flex u-flex-align-center", style: {
                                                         color: '#313131',
                                                         fontSize: 10,
                                                     } },
-                                                    React.createElement(Icon_1.default, { color: Color_1.Color.DarkGrey, icon: Icon_1.IconType.Info, className: "u-marg-right--lighter u-marg-left--light" }),
+                                                    react_1.default.createElement(Icon_1.default, { color: Color_1.Color.DarkGrey, icon: Icon_1.IconType.Info, className: "u-marg-right--lighter u-marg-left--light" }),
                                                     t(Translation_1.Translation.Step.Confirmation.PlanpayHelperText))))),
                                             disabled: !methods.formState.isValid,
                                             disabledReason: !methods.formState.isValid ? 'You must fill all the above details before proceeding with Planpay' : '',
-                                            renderContent: () => React.createElement(PlanpayPaymentMethod_1.PlanpayPaymentMethod, null),
+                                            renderContent: () => react_1.default.createElement(PlanpayPaymentMethod_1.PlanpayPaymentMethod, null),
                                         },
                                     ]
                                         .filter(({ value }) => { var _a; return (_a = hotel === null || hotel === void 0 ? void 0 : hotel.paymentMethods) === null || _a === void 0 ? void 0 : _a.includes(value); })
                                         .filter(({ value }) => {
-                                        var _a;
+                                        var _a, _b;
                                         return value !== core_1.EBookingPaymentMethod.Planpay ||
-                                            (0, dayjs_1.default)(basketContext.startDate).diff((0, dayjs_1.default)(), 'day') > ((_a = hotel === null || hotel === void 0 ? void 0 : hotel.planpay) === null || _a === void 0 ? void 0 : _a.minDaysShowPlanpay);
+                                            (((_a = hotel === null || hotel === void 0 ? void 0 : hotel.planpay) === null || _a === void 0 ? void 0 : _a.minDaysShowPlanpay) &&
+                                                (0, dayjs_1.default)(basketContext.startDate).diff((0, dayjs_1.default)(), 'day') > ((_b = hotel === null || hotel === void 0 ? void 0 : hotel.planpay) === null || _b === void 0 ? void 0 : _b.minDaysShowPlanpay));
                                     }), value: value, onChange: (code) => __awaiter(this, void 0, void 0, function* () {
                                         onChange(code);
                                         yield handleChangePaymentMethod(code);
@@ -257,27 +262,27 @@ function StepConfirmationForm() {
                                         }
                                     }) }))));
                     } }),
-                React.createElement("div", { className: "u-marg-top u-flex align-items-center" },
-                    React.createElement("div", { className: "u-flex align-items-center justify-content-start" },
-                        React.createElement(Icon_1.default, { icon: Icon_1.IconType.Lock, color: Color_1.Color.Success }),
-                        React.createElement("div", { className: "u-marg-left--light" },
-                            React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Success },
-                                React.createElement("strong", null, "Secured")))),
-                    React.createElement(SSLSecureBadge_1.default, null))),
-            React.createElement(LineBreak_1.default, null),
-            React.createElement(StepConfirmationPoliciesSection_1.default, null),
-            React.createElement("div", { className: "u-pad-top--light u-marg-bottom" },
-                React.createElement(StepConfirmationPolicyBlock_1.default, null)),
-            ConfirmationVerifyFeature_1.default.isActive() && (React.createElement(React.Fragment, null,
-                React.createElement(LineBreak_1.default, null),
-                React.createElement("div", null,
-                    React.createElement(StepConfirmationAcknowledgement_1.default, null)))),
-            React.createElement("div", { className: "u-flex u-marg-top--heavy justify-content-end" },
-                React.createElement(NextStepButton_1.default, { disabled: paymentMethod === core_1.EBookingPaymentMethod.Planpay || isLoading, text: t(Translation_1.Translation.Step.Confirmation.ConfirmReservation), history: null, isLoading: isLoading, currentStep: StepConfirmation_1.default, onClick: onNextStepClicked })))),
-        React.createElement(ErrorModal_1.default, { open: !!apiErrors, onClose: clearApiErrors },
-            React.createElement(Text_1.default, null, apiErrors)),
-        React.createElement(StepConfirmationCheckoutDifferencesModal_1.default, { differences: differenceWarning.differences, warnings: differenceWarning.warnings, isLoading: isLoading, onClose: () => __awaiter(this, void 0, void 0, function* () {
-                yield rollbackReservation();
+                react_1.default.createElement("div", { className: "u-marg-top u-flex align-items-center" },
+                    react_1.default.createElement("div", { className: "u-flex align-items-center justify-content-start" },
+                        react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Lock, color: Color_1.Color.Success }),
+                        react_1.default.createElement("div", { className: "u-marg-left--light" },
+                            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Success },
+                                react_1.default.createElement("strong", null, "Secured")))),
+                    react_1.default.createElement(SSLSecureBadge_1.default, null))),
+            react_1.default.createElement(LineBreak_1.default, null),
+            react_1.default.createElement(StepConfirmationPoliciesSection_1.default, null),
+            react_1.default.createElement("div", { className: "u-pad-top--light u-marg-bottom" },
+                react_1.default.createElement(StepConfirmationPolicyBlock_1.default, null)),
+            ConfirmationVerifyFeature_1.default.isActive() && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(LineBreak_1.default, null),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement(StepConfirmationAcknowledgement_1.default, null)))),
+            react_1.default.createElement("div", { className: "u-flex u-marg-top--heavy justify-content-end" },
+                react_1.default.createElement(NextStepButton_1.default, { disabled: paymentMethod === core_1.EBookingPaymentMethod.Planpay || isLoading, text: t(Translation_1.Translation.Step.Confirmation.ConfirmReservation), history: null, isLoading: isLoading, currentStep: StepConfirmation_1.default, onClick: onNextStepClicked })))),
+        react_1.default.createElement(ErrorModal_1.default, { open: !!apiErrors, onClose: clearApiErrors },
+            react_1.default.createElement(Text_1.default, null, apiErrors)),
+        react_1.default.createElement(StepConfirmationCheckoutDifferencesModal_1.default, { differences: differenceWarning.differences, warnings: differenceWarning.warnings, isLoading: isLoading, onClose: () => __awaiter(this, void 0, void 0, function* () {
+                yield (rollbackReservation === null || rollbackReservation === void 0 ? void 0 : rollbackReservation());
                 history.push(StepRoom_1.default.getStepUrl());
             }), onProceed: () => __awaiter(this, void 0, void 0, function* () {
                 if (paymentMethod === core_1.EBookingPaymentMethod.Planpay) {
@@ -287,7 +292,7 @@ function StepConfirmationForm() {
                     });
                 }
                 else {
-                    yield commitReservation(basketContext.reservationData);
+                    yield (commitReservation === null || commitReservation === void 0 ? void 0 : commitReservation(basketContext.reservationData));
                 }
             }) })));
 }