@roomstay/frontend 1.6.1 → 2.0.0-2

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

@@ -11,333 +11,260 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 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 Headline_1 = require("components/generic/Headline");
+const Translation_1 = require("translations/Translation");
+const Text_1 = require("components/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 RoomContactDetails_1 = require("components/steps/confirmation/RoomContactDetails");
+const LineBreak_1 = require("components/generic/LineBreak");
+const StepConfirmationPoliciesSection_1 = require("components/steps/confirmation/StepConfirmationPoliciesSection");
+const NextStepButton_1 = require("components/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 Icon_1 = require("components/generic/Icon/Icon");
+const SSLSecureBadge_1 = require("components/generic/badging/SSLSecureBadge");
+const StepConfirmationCheckoutDifferencesModal_1 = require("components/steps/confirmation/StepConfirmationCheckoutDifferencesModal");
+const react_router_dom_1 = require("react-router-dom");
+const ErrorModal_1 = require("components/generic/modal/ErrorModal");
+const StepConfirmationPolicyBlock_1 = require("components/steps/confirmation/StepConfirmationPolicyBlock");
+const StepConfirmationAcknowledgement_1 = require("components/steps/confirmation/StepConfirmationAcknowledgement");
+const BEButton_1 = require("components/generic/BEButton");
+const Alert_1 = require("components/generic/Alert");
+const StepConfirmation_1 = require("pages/steps/StepConfirmation/StepConfirmation");
+const StepRoom_1 = require("pages/steps/StepRoom/StepRoom");
+const ConfirmationVerifyFeature_1 = require("providers/feature/ConfirmationVerifyFeature");
+const TextBox_1 = require("components/generic/TextBox");
+const ShowIATANumberOnCheckoutFeature_1 = require("providers/feature/ShowIATANumberOnCheckoutFeature");
+const PlanpayPaymentMethod_1 = require("./PlanpayPaymentMethod");
+const TextArea_1 = require("../../generic/TextArea");
+const ConfirmationStepContext_1 = require("contexts/ConfirmationStepContext/ConfirmationStepContext");
+const ConfirmationQuery_1 = require("hooks/ConfirmationQuery");
+const LargeLoader_1 = require("components/generic/loader/LargeLoader");
+const StepConfirmationPaymentDetails_1 = require("./PaymentDetails/StepConfirmationPaymentDetails");
+const core_1 = require("@roomstay/core");
+const RadioButtonGroup_1 = require("components/generic/RadioButtonGroup/RadioButtonGroup");
+const AcceptablePaymentCard_1 = require("components/steps/confirmation/PaymentDetails/AcceptablePaymentCard");
+const RoomstayThemeEngine_1 = require("providers/RoomstayThemeEngine");
 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");
+const dayjs = require("dayjs");
 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 [differenceWarning, setDifferenceWarning] = (0, react_1.useState)({
+        differences: [],
+        warnings: [],
     });
-    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 [source, setSource] = (0, react_1.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 history = (0, react_router_dom_1.useHistory)();
+    const { hotel } = (0, hooks_1.useCurrentHotel)();
+    const toPaymentPayload = (paymentMethod) => __awaiter(this, void 0, void 0, function* () {
+        let payment;
+        switch (paymentMethod) {
+            case core_1.EBookingPaymentMethod.Planpay:
+                const params = new URLSearchParams(window.location.search);
+                params.set('roomstayId', '{{rsId}}');
+                params.set('session', context.sessionProvider.getCurrentSessionID().toString());
+                params.set('paymentMethod', core_1.EBookingPaymentMethod.Planpay);
+                const redirectURL = `${window.location.origin}${window.location.pathname}${window.location.search}#/step/confirmation/?${params}`;
+                payment = {
+                    Method: core_1.EBookingPaymentMethod.Planpay,
+                    PlanpayCheckoutId: queryPlanpayCheckoutId,
+                    RedirectUrl: redirectURL,
+                };
+                break;
+            default:
+                payment = {
+                    Method: core_1.EBookingPaymentMethod.Card,
+                    PaymentCard: yield tokenizerRef.current.getTokenizedCode(),
+                };
+        }
+        return payment;
     });
-    const parseReservationIdsFromData = (data) => {
+    (0, react_1.useEffect)(() => {
         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);
-                });
+        const validatedPaymentMethod = Object.values(core_1.EBookingPaymentMethod).includes(queryPaymentMethod)
+            ? queryPaymentMethod
+            : core_1.EBookingPaymentMethod.Card;
+        methods.setValue('paymentMethod', validatedPaymentMethod);
+        handleChangePaymentMethod(validatedPaymentMethod);
+        if (isBackFromPlanpay) {
+            if (queryRoomstayId === ((_a = basketContext.reservationData) === null || _a === void 0 ? void 0 : _a.roomstayId)) {
+                onPlaypayCallback(validatedPaymentMethod);
             }
             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));
+                rollbackReservation();
             }
         }
+        return () => {
+            if (!isBackFromPlanpay)
+                rollbackReservation();
+        };
+    }, []);
+    const onPlaypayCallback = (paymentMethod) => __awaiter(this, void 0, void 0, function* () {
+        yield commitReservation(basketContext.reservationData, yield toPaymentPayload(paymentMethod));
     });
-    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 paymentMethod = methods.watch('paymentMethod');
+    context.engine
+        .getSessionProvider()
+        .getSession()
+        .then((session) => {
+        setSource(session.source);
     });
     const returnToPickRooms = () => __awaiter(this, void 0, void 0, function* () {
+        // TODO: What if StepRoom doesn't exist?
         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 onNextStepClicked = () => __awaiter(this, void 0, void 0, function* () {
+        yield handleBook(paymentMethod, (resData) => __awaiter(this, void 0, void 0, function* () { return commitReservation(resData, yield toPaymentPayload(paymentMethod)); }));
+        return false;
     });
-    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]);
+    const handleBook = (paymentMethod, onSuccess) => __awaiter(this, void 0, void 0, function* () {
+        yield book(yield toPaymentPayload(paymentMethod), () => __awaiter(this, void 0, void 0, function* () {
+            try {
+                if (paymentMethod === core_1.EBookingPaymentMethod.Card)
+                    yield tokenizerRef.current.getTokenizedCode();
+                return true;
             }
-        });
-        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);
+            catch (e) {
+                return false;
             }
-        }
-    };
-    const onFormChangeHandler = (fieldName, value) => {
-        if (fieldName === null || fieldName === void 0 ? void 0 : fieldName.endsWith('1')) {
-            if (copyCheckBox) {
-                updateRepeatingValues(fieldName.replace('1', ''), value);
+        }), (validationResult) => {
+            if (validationResult) {
+                setDifferenceWarning(validationResult);
             }
+        }, onSuccess);
+    });
+    const handleChangePaymentMethod = (paymentMethod) => __awaiter(this, void 0, void 0, function* () {
+        if (paymentMethod !== core_1.EBookingPaymentMethod.Planpay) {
+            yield rollbackReservation();
         }
-    };
-    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,
+    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: [
+                                        {
+                                            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) => {
+                                                        return true;
+                                                    }, style: {
+                                                        height: 16,
+                                                        width: 24,
+                                                        borderRadius: 2.5,
+                                                        border: '0.5px solid #DFE1E5',
+                                                        marginRight: 4,
+                                                    } }))),
+                                            renderContent: () => React.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: {
+                                                        background: '#e5c5ff',
+                                                        padding: '4px 8px',
+                                                        borderRadius: '24px',
+                                                    } },
+                                                    React.createElement("img", { height: 8, 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: {
+                                                        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" }),
+                                                    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),
+                                        },
+                                    ]
+                                        .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;
+                                        return value !== core_1.EBookingPaymentMethod.Planpay ||
+                                            dayjs(basketContext.startDate).diff(dayjs(), 'day') > ((_a = hotel === null || hotel === void 0 ? void 0 : hotel.planpay) === null || _a === void 0 ? void 0 : _a.minDaysShowPlanpay);
+                                    }), value: value, onChange: (code) => __awaiter(this, void 0, void 0, function* () {
+                                        onChange(code);
+                                        yield handleChangePaymentMethod(code);
+                                        if (code === core_1.EBookingPaymentMethod.Planpay) {
+                                            yield handleBook(code);
+                                        }
+                                    }) }))));
+                    } }),
+                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("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(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, 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: differences, warnings: warnings, isLoading: isLoading, onClose: onCheckoutClose, onProceed: onCheckoutProceed })));
+        React.createElement(StepConfirmationCheckoutDifferencesModal_1.default, { differences: differenceWarning.differences, warnings: differenceWarning.warnings, isLoading: isLoading, onClose: () => __awaiter(this, void 0, void 0, function* () {
+                yield rollbackReservation();
+                history.push(StepRoom_1.default.getStepUrl());
+            }), onProceed: () => __awaiter(this, void 0, void 0, function* () {
+                if (paymentMethod === core_1.EBookingPaymentMethod.Planpay) {
+                    setDifferenceWarning({
+                        differences: [],
+                        warnings: [],
+                    });
+                }
+                else {
+                    yield commitReservation(basketContext.reservationData, yield toPaymentPayload(paymentMethod));
+                }
+            }) })));
 }
 exports.default = StepConfirmationForm;
 //# sourceMappingURL=StepConfirmationForm.js.map