@roomstay/frontend 1.3.0

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

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const SimpleModal_1 = require("../../generic/modal/SimpleModal");
+const BEButton_1 = require("../../generic/BEButton");
+const Currency_1 = require("../../generic/Currency");
+const Text_1 = require("../../generic/Text");
+const Color_1 = require("../../../util/Color");
+const react_1 = require("react");
+const contexts_1 = require("@frontend/contexts");
+const Headline_1 = require("../../generic/Headline");
+const LineBreak_1 = require("../../generic/LineBreak");
+const Icon_1 = require("../../generic/Icon");
+const Countdown_1 = require("../../generic/Countdown");
+const dayjs = require("dayjs");
+const Pill_1 = require("../../generic/Pill");
+function StepConfirmationCheckoutDifferencesModal(props) {
+    var _a, _b;
+    const basketContext = react_1.useContext(contexts_1.BasketContext);
+    const [endTime, setEndTime] = react_1.useState(dayjs().add(14, 'minute'));
+    react_1.useEffect(() => {
+        var _a;
+        let cancelled = false;
+        let timeout = null;
+        if (!!props.differences.length || !!((_a = props.warnings) === null || _a === void 0 ? void 0 : _a.length)) {
+            timeout = setTimeout(() => {
+                if (!cancelled) {
+                    props.onClose();
+                }
+            }, 740000);
+        }
+        return () => {
+            cancelled = true;
+            clearTimeout(timeout);
+        };
+    }, [props.differences.length, (_a = props.warnings) === null || _a === void 0 ? void 0 : _a.length]);
+    const mobileFooter = (React.createElement("div", { className: "u-flex" },
+        React.createElement(BEButton_1.default, { isText: true, size: 'small', icon: Icon_1.IconType.ArrowLeft, onClick: props.onClose, isLoading: props.isLoading }, "Take me back"),
+        React.createElement(BEButton_1.default, { primary: true, filled: true, icon: Icon_1.IconType.ArrowRight, iconPosition: 'right', onClick: props.onProceed, isLoading: props.isLoading }, "Continue with reservation")));
+    return (React.createElement(SimpleModal_1.default, { open: !!props.differences.length || !!((_b = props.warnings) === null || _b === void 0 ? void 0 : _b.length), title: 'Your total price has Changed!', mobileFooter: mobileFooter, desktopFooter: React.createElement("div", { className: "u-marg-heavy u-marg@m-" }, mobileFooter), size: SimpleModal_1.SimpleModalSize.Small, alignCenter: true },
+        React.createElement("div", { className: "u-marg-heavy u-marg@m-" },
+            React.createElement("div", { className: "row" },
+                React.createElement("div", { className: "col-md-8" },
+                    React.createElement(Text_1.default, { type: Text_1.TextType.Small }, "We apologize for any inconvenience, but the price for your selected reservation has changed during your checkout, please confirm that you accept the new total shown below.")),
+                React.createElement("div", { className: "col-md-4" },
+                    React.createElement(Pill_1.default, { icon: Icon_1.IconType.Time, type: Pill_1.PillType.Primary },
+                        React.createElement("span", { className: "u-marg-right--light" }, "Reverts in"),
+                        React.createElement(Countdown_1.default, { endTimeDate: endTime })))),
+            React.createElement(LineBreak_1.default, null),
+            !!(props.differences && props.differences.length) &&
+                props.differences.map((difference) => {
+                    const basketRow = basketContext.getAllValidRows().find((row) => row.getID() === difference.id);
+                    return (React.createElement("div", { key: difference.id },
+                        !!basketRow && (React.createElement("div", { className: "u-marg-bottom--heavy" },
+                            React.createElement("div", { className: "u-marg-bottom--light" },
+                                React.createElement(Headline_1.default, null, basketRow.getRoom().name)),
+                            React.createElement(Text_1.default, null, basketRow.getRate().name))),
+                        React.createElement("div", { className: "u-flex u-marg-bottom--light" },
+                            React.createElement(Text_1.default, { type: Text_1.TextType.Body },
+                                React.createElement("strong", null, "Displayed price:")),
+                            React.createElement(Text_1.default, { color: Color_1.Color.Alert },
+                                React.createElement(Currency_1.default, null, difference.totalPrice.before))),
+                        React.createElement("div", { className: "u-flex" },
+                            React.createElement(Text_1.default, { type: Text_1.TextType.Body },
+                                React.createElement("strong", null, "Actual price:")),
+                            React.createElement(Text_1.default, { color: Color_1.Color.Success },
+                                React.createElement(Currency_1.default, null, difference.totalPrice.after))),
+                        React.createElement(LineBreak_1.default, null)));
+                }),
+            !!(props.warnings && props.warnings.length) &&
+                props.warnings.map((warning, index) => {
+                    return React.createElement(Text_1.default, { key: index }, warning);
+                }))));
+}
+exports.default = StepConfirmationCheckoutDifferencesModal;
+//# sourceMappingURL=StepConfirmationCheckoutDifferencesModal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StepConfirmationCheckoutDifferencesModal.js","sourceRoot":"/","sources":["src/components/steps/confirmation/StepConfirmationCheckoutDifferencesModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport SimpleModal, { SimpleModalSize } from '../../generic/modal/SimpleModal';\nimport BEButton from '../../generic/BEButton';\nimport BasketRowDifferences from '../../../models/BasketRowDifferences';\nimport Currency from '../../generic/Currency';\nimport Text, { TextType } from '../../generic/Text';\nimport { Color } from '../../../util/Color';\nimport { useContext, useState, useEffect } from 'react';\nimport { BasketContext } from '@frontend/contexts';\nimport Headline from '../../generic/Headline';\nimport LineBreak from '../../generic/LineBreak';\nimport { IconType } from '../../generic/Icon';\nimport Countdown from '../../generic/Countdown';\nimport * as dayjs from 'dayjs';\nimport Pill, { PillType } from '../../generic/Pill';\n\ninterface StepConfirmationCheckoutDifferencesModalProps {\n    differences: BasketRowDifferences[];\n    warnings: string[];\n\n    onClose: () => void;\n    onProceed: () => void;\n    isLoading?: boolean;\n}\n\nexport default function StepConfirmationCheckoutDifferencesModal(props: StepConfirmationCheckoutDifferencesModalProps) {\n    const basketContext = useContext(BasketContext);\n\n    const [endTime, setEndTime] = useState(dayjs().add(14, 'minute'));\n\n    useEffect(() => {\n        let cancelled = false;\n        let timeout: any = null;\n\n        if (!!props.differences.length || !!props.warnings?.length) {\n            timeout = setTimeout(() => {\n                if (!cancelled) {\n                    props.onClose();\n                }\n            }, 740000);\n        }\n\n        return () => {\n            cancelled = true;\n            clearTimeout(timeout);\n        };\n    }, [props.differences.length, props.warnings?.length]);\n\n    const mobileFooter = (\n        <div className=\"u-flex\">\n            <BEButton isText={true} size={'small'} icon={IconType.ArrowLeft} onClick={props.onClose} isLoading={props.isLoading}>\n                Take me back\n            </BEButton>\n            <BEButton primary={true} filled={true} icon={IconType.ArrowRight} iconPosition={'right'} onClick={props.onProceed} isLoading={props.isLoading}>\n                Continue with reservation\n            </BEButton>\n        </div>\n    );\n\n    return (\n        <SimpleModal\n            open={!!props.differences.length || !!props.warnings?.length}\n            title={'Your total price has Changed!'}\n            mobileFooter={mobileFooter}\n            desktopFooter={<div className=\"u-marg-heavy u-marg@m-\">{mobileFooter}</div>}\n            size={SimpleModalSize.Small}\n            alignCenter={true}\n        >\n            <div className=\"u-marg-heavy u-marg@m-\">\n                <div className=\"row\">\n                    <div className=\"col-md-8\">\n                        <Text type={TextType.Small}>\n                            We apologize for any inconvenience, but the price for your selected reservation has changed during your checkout, please confirm that you accept the new\n                            total shown below.\n                        </Text>\n                    </div>\n                    <div className=\"col-md-4\">\n                        <Pill icon={IconType.Time} type={PillType.Primary}>\n                            <span className=\"u-marg-right--light\">Reverts in</span>\n                            <Countdown endTimeDate={endTime} />\n                        </Pill>\n                    </div>\n                </div>\n                <LineBreak />\n                {!!(props.differences && props.differences.length) &&\n                    props.differences.map((difference) => {\n                        const basketRow = basketContext.getAllValidRows().find((row) => row.getID() === difference.id);\n\n                        return (\n                            <div key={difference.id}>\n                                {!!basketRow && (\n                                    <div className=\"u-marg-bottom--heavy\">\n                                        <div className=\"u-marg-bottom--light\">\n                                            <Headline>{basketRow.getRoom().name}</Headline>\n                                        </div>\n                                        <Text>{basketRow.getRate().name}</Text>\n                                    </div>\n                                )}\n                                <div className=\"u-flex u-marg-bottom--light\">\n                                    <Text type={TextType.Body}>\n                                        <strong>Displayed price:</strong>\n                                    </Text>\n                                    <Text color={Color.Alert}>\n                                        <Currency>{difference.totalPrice.before}</Currency>\n                                    </Text>\n                                </div>\n                                <div className=\"u-flex\">\n                                    <Text type={TextType.Body}>\n                                        <strong>Actual price:</strong>\n                                    </Text>\n                                    <Text color={Color.Success}>\n                                        <Currency>{difference.totalPrice.after}</Currency>\n                                    </Text>\n                                </div>\n                                <LineBreak />\n                            </div>\n                        );\n                    })}\n                {!!(props.warnings && props.warnings.length) &&\n                    props.warnings.map((warning: string, index: number) => {\n                        return <Text key={index}>{warning}</Text>;\n                    })}\n            </div>\n        </SimpleModal>\n    );\n}\n"]}

package/dist/src/components/steps/confirmation/StepConfirmationCommentsComponent.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface StepConfirmationCommentsComponentProps {
+    inputRef: any;
+}
+export declare const BE_CONFIRMATION_COMMENTS_BLOCK = "BEConfirmationCommentsBlock";
+export declare function StepConfirmationCommentsComponent(props: StepConfirmationCommentsComponentProps): JSX.Element;

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StepConfirmationCommentsComponent = exports.BE_CONFIRMATION_COMMENTS_BLOCK = void 0;
+const React = require("react");
+const react_i18next_1 = require("react-i18next");
+const DIProvider_1 = require("../../../providers/DIProvider");
+const Translation_1 = require("../../../translations/Translation");
+const Headline_1 = require("../../generic/Headline");
+const LineBreak_1 = require("../../generic/LineBreak");
+const TextArea_1 = require("../../generic/TextArea");
+function OriginalComponent(props) {
+    const { t } = react_i18next_1.useTranslation();
+    return (React.createElement(React.Fragment, null,
+        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, { ref: props.inputRef, placeholder: t(Translation_1.Translation.Step.Confirmation.Inputs.EnterSpecialRequestsHere) }))));
+}
+exports.BE_CONFIRMATION_COMMENTS_BLOCK = 'BEConfirmationCommentsBlock';
+function StepConfirmationCommentsComponent(props) {
+    return DIProvider_1.withDI(exports.BE_CONFIRMATION_COMMENTS_BLOCK, OriginalComponent, props);
+}
+exports.StepConfirmationCommentsComponent = StepConfirmationCommentsComponent;
+//# sourceMappingURL=StepConfirmationCommentsComponent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StepConfirmationCommentsComponent.js","sourceRoot":"/","sources":["src/components/steps/confirmation/StepConfirmationCommentsComponent.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,iDAA+C;AAC/C,8DAAuD;AACvD,mEAAgE;AAChE,qDAA8C;AAC9C,uDAAgD;AAEhD,qDAA8C;AAK9C,SAAS,iBAAiB,CAAC,KAA6C;IACpE,MAAM,EAAE,CAAC,EAAE,GAAG,8BAAc,EAAE,CAAC;IAE/B,OAAO,CACH;QACI,oBAAC,mBAAS,OAAG;QACb,6BAAK,SAAS,EAAC,sBAAsB;YACjC,6BAAK,SAAS,EAAC,eAAe;gBAC1B,oBAAC,kBAAQ,IAAC,IAAI,EAAE,IAAI,IAAG,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAY,CAC1E;YACN,oBAAC,kBAAQ,IAAC,GAAG,EAAE,KAAK,CAAC,QAAQ,EAAE,WAAW,EAAE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,wBAAwB,CAAC,GAAI,CAC9G,CACP,CACN,CAAC;AACN,CAAC;AAEY,QAAA,8BAA8B,GAAG,6BAA6B,CAAC;AAC5E,SAAgB,iCAAiC,CAAC,KAA6C;IAC3F,OAAO,mBAAM,CAAC,sCAA8B,EAAE,iBAAiB,EAAE,KAAK,CAAC,CAAC;AAC5E,CAAC;AAFD,8EAEC","sourcesContent":["import * as React from 'react';\n\nimport { useTranslation } from 'react-i18next';\nimport { withDI } from '../../../providers/DIProvider';\nimport { Translation } from '../../../translations/Translation';\nimport Headline from '../../generic/Headline';\nimport LineBreak from '../../generic/LineBreak';\n\nimport TextArea from '../../generic/TextArea';\nexport interface StepConfirmationCommentsComponentProps {\n    inputRef: any;\n}\n\nfunction OriginalComponent(props: StepConfirmationCommentsComponentProps) {\n    const { t } = useTranslation();\n\n    return (\n        <>\n            <LineBreak />\n            <div className=\"u-marg-bottom--heavy\">\n                <div className=\"u-marg-bottom\">\n                    <Headline bold={true}>{t(Translation.Step.Confirmation.Comments)}</Headline>\n                </div>\n                <TextArea ref={props.inputRef} placeholder={t(Translation.Step.Confirmation.Inputs.EnterSpecialRequestsHere)} />\n            </div>\n        </>\n    );\n}\n\nexport const BE_CONFIRMATION_COMMENTS_BLOCK = 'BEConfirmationCommentsBlock';\nexport function StepConfirmationCommentsComponent(props: StepConfirmationCommentsComponentProps) {\n    return withDI(BE_CONFIRMATION_COMMENTS_BLOCK, OriginalComponent, props);\n}\n"]}

package/dist/src/components/steps/confirmation/StepConfirmationCountrySelector.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { AutocompleteProps } from '@material-ui/lab';
+interface CountrySelectorProps extends AutocompleteProps<undefined, undefined, undefined, undefined> {
+    validationStatus?: any;
+    inputPlaceholder?: string;
+    name: string;
+    onChange?: (e: React.ChangeEvent) => void;
+}
+export default function StepConfirmationCountrySelector(props: Partial<CountrySelectorProps>): JSX.Element;
+export {};

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

@@ -0,0 +1,65 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const core_1 = require("@material-ui/core");
+const lab_1 = require("@material-ui/lab");
+const Icon_1 = require("../../generic/Icon");
+const classNames = require("classnames");
+const RoomstayThemeEngine_1 = require("../../../providers/RoomstayThemeEngine");
+const react_i18next_1 = require("react-i18next");
+const Translation_1 = require("../../../translations/Translation");
+const CountryCodesAndNumbers_1 = require("../../../models/CountryCodesAndNumbers");
+function StepConfirmationCountrySelector(props) {
+    const { validationStatus: validationFields } = props, rest = __rest(props, ["validationStatus"]);
+    const classes = classNames('textbox c-input h-100', {
+        '--success': validationFields === 'success',
+        '--error': validationFields === 'error',
+    });
+    const { t } = react_i18next_1.useTranslation();
+    const popperComponentHandler = (propsForPopperComponent) => {
+        return (React.createElement(core_1.Popper, Object.assign({ container: RoomstayThemeEngine_1.default.EngineContainer, placement: "bottom", disablePortal: false, modifiers: {
+                flip: {
+                    enabled: true,
+                },
+                preventOverflow: {
+                    enabled: false,
+                    boundariesElement: 'scrollParent',
+                },
+            } }, propsForPopperComponent)));
+    };
+    const getOptionLabelHandler = (option) => {
+        return option.label;
+    };
+    const renderOptionHandler = (option) => {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("span", null, CountryCodesAndNumbers_1.convertCountryCodeToFlag(option.code)),
+            React.createElement("span", { className: "u-marg-left" },
+                option.label,
+                " (",
+                option.code,
+                ")")));
+    };
+    const renderInputHandler = (params) => {
+        var _a;
+        const placeholder = (_a = props.inputPlaceholder) !== null && _a !== void 0 ? _a : t(Translation_1.Translation.Step.Confirmation.Inputs.Country) + ' *';
+        return (React.createElement(core_1.TextField, Object.assign({}, params, { placeholder: placeholder, inputProps: Object.assign(Object.assign({}, params.inputProps), { autoComplete: 'new-password' }) })));
+    };
+    if (typeof rest.value === 'undefined') {
+        rest.value = null;
+    }
+    return (React.createElement("div", { className: classes },
+        React.createElement(lab_1.Autocomplete, Object.assign({ options: CountryCodesAndNumbers_1.ListOfCountriesAndCodes, style: { width: '100%' }, autoHighlight: true, getOptionLabel: getOptionLabelHandler, closeIcon: React.createElement(Icon_1.default, { icon: Icon_1.IconType.Close }), popupIcon: React.createElement(Icon_1.default, { icon: Icon_1.IconType.Dropdown }), PopperComponent: popperComponentHandler, renderOption: renderOptionHandler, renderInput: renderInputHandler }, rest, { onChange: (a, b, c) => rest.onChange({ target: { name: rest.name, value: b !== null && b !== void 0 ? b : undefined } }) }))));
+}
+exports.default = StepConfirmationCountrySelector;
+//# sourceMappingURL=StepConfirmationCountrySelector.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StepConfirmationCountrySelector.js","sourceRoot":"/","sources":["src/components/steps/confirmation/StepConfirmationCountrySelector.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { TextField, Popper } from '@material-ui/core';\nimport { Autocomplete, AutocompleteProps } from '@material-ui/lab';\nimport Icon, { IconType } from '../../generic/Icon';\n\nimport * as classNames from 'classnames';\nimport RoomstayThemeEngine from '../../../providers/RoomstayThemeEngine';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from '../../../translations/Translation';\nimport { convertCountryCodeToFlag, ListOfCountriesAndCodes } from '../../../models/CountryCodesAndNumbers';\n\ninterface CountrySelectorProps extends AutocompleteProps<undefined, undefined, undefined, undefined> {\n    validationStatus?: any;\n\n    inputPlaceholder?: string;\n\n    name: string;\n    onChange?: (e: React.ChangeEvent) => void;\n}\n\nexport default function StepConfirmationCountrySelector(props: Partial<CountrySelectorProps>) {\n    const { validationStatus: validationFields, ...rest } = props;\n\n    const classes = classNames('textbox c-input h-100', {\n        '--success': validationFields === 'success',\n        '--error': validationFields === 'error',\n    });\n\n    const { t } = useTranslation();\n    const popperComponentHandler = (propsForPopperComponent: any) => {\n        return (\n            <Popper\n                container={RoomstayThemeEngine.EngineContainer}\n                placement=\"bottom\"\n                disablePortal={false}\n                modifiers={{\n                    flip: {\n                        enabled: true,\n                    },\n                    preventOverflow: {\n                        enabled: false,\n                        boundariesElement: 'scrollParent',\n                    },\n                }}\n                {...propsForPopperComponent}\n            />\n        );\n    };\n\n    const getOptionLabelHandler = (option: any) => {\n        return option.label;\n    };\n\n    const renderOptionHandler = (option: any) => {\n        return (\n            <React.Fragment>\n                <span>{convertCountryCodeToFlag(option.code)}</span>\n                <span className=\"u-marg-left\">\n                    {option.label} ({option.code})\n                </span>\n            </React.Fragment>\n        );\n    };\n\n    const renderInputHandler = (params: any) => {\n        const placeholder = props.inputPlaceholder ?? t(Translation.Step.Confirmation.Inputs.Country) + ' *';\n\n        return (\n            <TextField\n                {...params}\n                placeholder={placeholder}\n                inputProps={{\n                    ...params.inputProps,\n                    autoComplete: 'new-password', // disable autocomplete and autofill\n                }}\n            />\n        );\n    };\n\n    if (typeof rest.value === 'undefined') {\n        rest.value = null;\n    }\n\n    return (\n        <div className={classes}>\n            <Autocomplete\n                options={ListOfCountriesAndCodes}\n                style={{ width: '100%' }}\n                autoHighlight={true}\n                getOptionLabel={getOptionLabelHandler}\n                closeIcon={<Icon icon={IconType.Close} />}\n                popupIcon={<Icon icon={IconType.Dropdown} />}\n                PopperComponent={popperComponentHandler}\n                renderOption={renderOptionHandler}\n                renderInput={renderInputHandler}\n                {...rest}\n                onChange={(a, b, c) => rest.onChange({ target: { name: rest.name, value: b ?? undefined } } as any)}\n            />\n        </div>\n    );\n}\n"]}

package/dist/src/components/steps/confirmation/StepConfirmationForm.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function StepConfirmationForm(): JSX.Element;

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

@@ -0,0 +1,343 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const react_1 = require("react");
+const Headline_1 = require("../../generic/Headline");
+const Translation_1 = require("../../../translations/Translation");
+const Text_1 = require("../../generic/Text");
+const Color_1 = require("../../../util/Color");
+const react_hook_form_1 = require("react-hook-form");
+const RoomContactDetails_1 = require("./RoomContactDetails");
+const StepConfirmationPaymentDetails_1 = require("./StepConfirmationPaymentDetails");
+const LineBreak_1 = require("../../generic/LineBreak");
+const StepConfirmationPoliciesSection_1 = require("./StepConfirmationPoliciesSection");
+const NextStepButton_1 = require("../../generic/buttons/NextStepButton");
+const react_i18next_1 = require("react-i18next");
+const contexts_1 = require("@frontend/contexts");
+const Checkbox_1 = require("../../generic/Checkbox");
+const BookingAPI_1 = require("../../../api/BookingAPI");
+const Icon_1 = require("../../generic/Icon");
+const SSLSecureBadge_1 = require("../../generic/badging/SSLSecureBadge");
+const StepConfirmationCheckoutDifferencesModal_1 = require("./StepConfirmationCheckoutDifferencesModal");
+const react_router_1 = require("react-router");
+const ErrorModal_1 = require("../../generic/modal/ErrorModal");
+const DataLayer_1 = require("../../../util/DataLayer");
+const Sentry = require("@sentry/browser");
+const severity_1 = require("@sentry/types/dist/severity");
+const StepConfirmationPolicyBlock_1 = require("./StepConfirmationPolicyBlock");
+const ErrorContext_1 = require("../../../contexts/ErrorContext");
+const StepConfirmationAcknowledgement_1 = require("./StepConfirmationAcknowledgement");
+const BEButton_1 = require("../../generic/BEButton");
+const Alert_1 = require("../../generic/Alert");
+const StepConfirmation_1 = require("../../../pages/steps/StepConfirmation/StepConfirmation");
+const StepRoom_1 = require("../../../pages/steps/StepRoom/StepRoom");
+const StepConfirmationCommentsComponent_1 = require("./StepConfirmationCommentsComponent");
+const ConfirmationFormContext_1 = require("../../../contexts/ConfirmationFormContext");
+const hooks_1 = require("@frontend/hooks");
+const ConfirmationVerifyFeature_1 = require("../../../providers/feature/ConfirmationVerifyFeature");
+const TextBox_1 = require("../../generic/TextBox");
+const ShowIATANumberOnCheckoutFeature_1 = require("../../../providers/feature/ShowIATANumberOnCheckoutFeature");
+const ScrollFocusHook_1 = require("../../../hooks/ScrollFocusHook");
+function StepConfirmationForm() {
+    var _a;
+    const { t } = react_i18next_1.useTranslation();
+    const { hotel } = hooks_1.useCurrentHotel();
+    const context = react_1.useContext(contexts_1.BookingEngineContext);
+    const formContext = react_1.useContext(ConfirmationFormContext_1.default);
+    const [source, setSource] = react_1.useState('');
+    context.engine
+        .getSessionProvider()
+        .getSession()
+        .then((session) => {
+        setSource(session.source);
+    });
+    const basketContext = react_1.useContext(contexts_1.BasketContext);
+    const [isLoading, setIsLoading] = react_1.useState(false);
+    const [differences, setDifferences] = react_1.useState([]);
+    const [warnings, setWarnings] = react_1.useState([]);
+    const [reservationData, setReservationData] = react_1.useState(null);
+    const [apiErrors, setApiErrors] = react_1.useState('');
+    const [confirmationPolicyError, setConfirmationPolicyError] = react_1.useState(false);
+    const commentTextbox = react_1.useRef(null);
+    const tokenizerRef = react_1.useRef(null);
+    const confirmationPolicy = react_1.useRef(null);
+    const { focusElement } = ScrollFocusHook_1.useWindowScroll();
+    const history = react_router_1.useHistory();
+    const methods = react_hook_form_1.useForm({
+        mode: 'onChange',
+        reValidateMode: 'onChange',
+    });
+    const parseReservationIdsFromData = (data) => {
+        var _a;
+        return (_a = data === null || data === void 0 ? void 0 : data.reservations) === null || _a === void 0 ? void 0 : _a.map((reservation) => reservation.reservationNumber);
+    };
+    const apiErrorsOnClose = () => {
+        return setApiErrors('');
+    };
+    const onCheckoutClose = () => {
+        try {
+            rollbackReservation();
+        }
+        catch (ex) {
+            console.log('Failed to rollback reservations');
+            Sentry.captureException(ex);
+        }
+    };
+    const onCheckoutProceed = () => {
+        try {
+            commitReservation();
+        }
+        catch (ex) {
+            console.log('Failed to commit reservation');
+            Sentry.captureException(ex);
+        }
+    };
+    const commitReservation = (initialReservationData) => __awaiter(this, void 0, void 0, function* () {
+        const resData = reservationData !== null && reservationData !== void 0 ? reservationData : initialReservationData;
+        setIsLoading(true);
+        if (resData) {
+            const reservationIds = parseReservationIdsFromData(resData);
+            if (reservationIds.length) {
+                BookingAPI_1.default.Reservation.commit(reservationIds, hotel.hotelID)
+                    .then((response) => {
+                    try {
+                        DataLayer_1.default.instance.sendReservationConfirmed(basketContext.getAllValidRows(), basketContext.basketAddonRows, response);
+                    }
+                    catch (ex) {
+                        Sentry.captureException('Failed to read reservations from GTM code: ' + JSON.stringify(ex));
+                    }
+                    basketContext.checkedOut(response);
+                })
+                    .catch((ex) => {
+                    console.log(ex);
+                    setIsLoading(false);
+                });
+            }
+            else {
+                setIsLoading(false);
+                ErrorContext_1.ErrorHandler.add({ message: 'Committing reservation failed due to an unexpected error' });
+                Sentry.captureException('No reservation IDs found when attempting to commit: ' + JSON.stringify(resData));
+            }
+        }
+    });
+    const rollbackReservation = () => __awaiter(this, void 0, void 0, function* () {
+        const reservationIds = parseReservationIdsFromData(reservationData);
+        if (reservationIds.length) {
+            setIsLoading(true);
+            yield BookingAPI_1.default.Reservation.rollback(reservationIds, hotel.hotelID);
+            setIsLoading(false);
+        }
+        else {
+            Sentry.captureException('No reservation IDs found when attempting to rollback: ' + JSON.stringify(reservationData));
+        }
+        history.push(StepRoom_1.default.getStepUrl());
+    });
+    const returnToPickRooms = () => __awaiter(this, void 0, void 0, function* () {
+        history.push(StepRoom_1.default.getStepUrl());
+    });
+    const makeReservation = () => __awaiter(this, void 0, void 0, function* () {
+        var _b;
+        if (ConfirmationVerifyFeature_1.default.isActive() && !((_b = confirmationPolicy === null || confirmationPolicy === void 0 ? void 0 : confirmationPolicy.current) === null || _b === void 0 ? void 0 : _b.checked)) {
+            setConfirmationPolicyError(true);
+            return;
+        }
+        let adhocValid = true;
+        formContext.errorChecks.forEach((check) => {
+            if (!check().validate()) {
+                adhocValid = false;
+            }
+        });
+        if (!adhocValid) {
+            return;
+        }
+        setConfirmationPolicyError(false);
+        setIsLoading(true);
+        try {
+            const card = yield tokenizerRef.current.getTokenizedCode();
+            const allDetails = methods.getValues();
+            const userProfiles = basketRows.map((row, i) => {
+                var _a, _b;
+                const rowNumber = i + 1;
+                return {
+                    FirstName: allDetails[`Forename${rowNumber}`],
+                    LastName: allDetails[`Surname${rowNumber}`],
+                    Phone: (_a = allDetails[`Phone${rowNumber}`]) === null || _a === void 0 ? void 0 : _a.replace(' ', ''),
+                    Email: allDetails[`Email${rowNumber}`],
+                    Address: {
+                        Line1: allDetails[`Address${rowNumber}`],
+                        City: allDetails[`City${rowNumber}`],
+                        PostalCode: allDetails[`PostCode${rowNumber}`],
+                        Country: (_b = allDetails[`Country${rowNumber}`]) === null || _b === void 0 ? void 0 : _b.label,
+                    },
+                    MarketingOptIn: false,
+                };
+            });
+            DataLayer_1.default.instance.sendInteraction('Complete Booking', DataLayer_1.InteractionType.BUTTON, DataLayer_1.InteractionStep.GUEST_DETAILS);
+            BookingAPI_1.default.Reservation.bookNow(basketRows, userProfiles, card, basketAddonRows, commentTextbox.current.value, allDetails.IATANumber, hotel.hotelID)
+                .then((data) => {
+                setReservationData(data);
+                const apiDifferences = [];
+                if (data.reservations) {
+                    data.reservations.forEach((reservation, index) => {
+                        const diff = basketContext.currentBasketRows[index].checkDiffFromReservation(reservation);
+                        if (diff) {
+                            apiDifferences.push(diff);
+                        }
+                    });
+                }
+                else {
+                    Sentry.addBreadcrumb({
+                        level: severity_1.Severity.Error,
+                        message: 'No reservation data: ' + JSON.stringify(data),
+                    });
+                    throw new Error('The reservation could not be completed due to an unexpected issue, please try again');
+                }
+                // If there are differences, we want to display them to make sure the booking still needs to proceed
+                if (apiDifferences.length || (data.warnings && data.warnings.length)) {
+                    setIsLoading(false);
+                    setDifferences(apiDifferences);
+                    setWarnings(data.warnings);
+                }
+                else {
+                    // Everything is clear, re-run the totals and commit to the booking
+                    commitReservation(data);
+                }
+            })
+                .catch((error) => {
+                var _a;
+                setIsLoading(false);
+                setApiErrors((_a = error === null || error === void 0 ? void 0 : error.Message) !== null && _a !== void 0 ? _a : 'Unexpected error returned from the booking database.');
+            });
+        }
+        catch (ex) {
+            setIsLoading(false);
+        }
+    });
+    const onSubmit = () => __awaiter(this, void 0, void 0, function* () {
+        yield makeReservation();
+    });
+    const basketRows = basketContext.getAllValidRows();
+    const basketAddonRows = basketContext.basketAddonRows;
+    const [copyCheckBox, setCheckBox] = react_1.useState(true);
+    const [showErrors, setShowErrors] = react_1.useState(false);
+    react_1.useEffect(() => {
+        ['Forename', 'Surname', 'Email', 'Phone', 'Country', 'City', 'Address', 'PostCode'].forEach((input) => {
+            updateRepeatingValues(input, methods.getValues(`${input}1`));
+        });
+    }, [copyCheckBox]);
+    react_1.useEffect(() => {
+        DataLayer_1.default.instance.sendCheckoutView(basketRows, basketAddonRows);
+        const { unsubscribe } = methods.watch((allFields, { name, type }) => {
+            if (type === 'change') {
+                onFormChangeHandler(name, allFields[name]);
+            }
+        });
+        return () => {
+            unsubscribe();
+        };
+    }, []);
+    react_1.useEffect(() => {
+        scrollFirstErrorIntoView();
+    }, [(_a = methods === null || methods === void 0 ? void 0 : methods.formState) === null || _a === void 0 ? void 0 : _a.errors]);
+    const updateRepeatingValues = (field, value) => {
+        if (basketRows.length >= 2) {
+            for (let i = 2; i <= basketRows.length; i++) {
+                methods.setValue(`${field}${i}`, value);
+            }
+        }
+    };
+    const onFormChangeHandler = (fieldName, value) => {
+        if (fieldName === null || fieldName === void 0 ? void 0 : fieldName.endsWith('1')) {
+            if (copyCheckBox) {
+                updateRepeatingValues(fieldName.replace('1', ''), value);
+            }
+        }
+    };
+    const scrollFirstErrorIntoView = () => {
+        var _a;
+        if ((_a = methods === null || methods === void 0 ? void 0 : methods.formState) === null || _a === void 0 ? void 0 : _a.errors) {
+            setTimeout(() => {
+                var _a, _b;
+                const values = Object.values((_a = methods === null || methods === void 0 ? void 0 : methods.formState) === null || _a === void 0 ? void 0 : _a.errors);
+                if (values.length > 0 && ((_b = values[0]) === null || _b === void 0 ? void 0 : _b.ref)) {
+                    focusElement(values[0].ref);
+                }
+            }, 350);
+        }
+    };
+    const onNextStepClicked = () => __awaiter(this, void 0, void 0, function* () {
+        yield methods.handleSubmit(onSubmit)();
+        scrollFirstErrorIntoView();
+        setShowErrors(true);
+        return false;
+    });
+    return (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(react_hook_form_1.FormProvider, Object.assign({}, methods),
+            React.createElement("form", { onSubmit: methods.handleSubmit(onSubmit) }, basketRows.map((room, index) => {
+                const checkboxOnChange = (value) => {
+                    setCheckBox(value);
+                };
+                return (React.createElement("div", { key: room.getID() },
+                    React.createElement("div", { className: index === 0 ? '' : 'u-marg-bottom--heavy' },
+                        React.createElement(RoomContactDetails_1.default, { showErrors: showErrors, basketRow: room, roomNumber: index + 1, expandable: basketRows.length !== 1 })),
+                    basketRows.length > 1 && index === 0 ? (React.createElement("div", { className: "u-marg-bottom--heavy" },
+                        React.createElement(Checkbox_1.default, { label: t(Translation_1.Translation.Step.Confirmation.ApplySameInfoToOtherRooms), checked: copyCheckBox, onChange: checkboxOnChange }))) : 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)),
+        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(StepConfirmationPaymentDetails_1.default, { ref: tokenizerRef }),
+            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))),
+        ShowIATANumberOnCheckoutFeature_1.default.isActive() && (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(StepConfirmationCommentsComponent_1.StepConfirmationCommentsComponent, { inputRef: commentTextbox }),
+        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, { ref: confirmationPolicy, confirmationPolicyError: confirmationPolicyError })))),
+        React.createElement("div", { className: "u-flex u-marg-top--heavy justify-content-end" },
+            React.createElement(NextStepButton_1.default, { 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: apiErrorsOnClose },
+            React.createElement(Text_1.default, null, apiErrors)),
+        React.createElement(StepConfirmationCheckoutDifferencesModal_1.default, { differences: differences, warnings: warnings, isLoading: isLoading, onClose: onCheckoutClose, onProceed: onCheckoutProceed })));
+}
+exports.default = StepConfirmationForm;
+//# sourceMappingURL=StepConfirmationForm.js.map