@roomstay/frontend 1.6.1 → 2.0.0-2

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

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlanpayPaymentMethod = void 0;
+const React = require("react");
+const react_1 = require("react");
+const contexts_1 = require("@frontend/contexts");
+const web_1 = require("@planpay/web");
+const Placeholder_1 = require("components/generic/Placeholder");
+const CurrentHotelHook_1 = require("hooks/CurrentHotelHook");
+const PlanpayWidgetLoader = () => {
+    return (React.createElement("div", null,
+        React.createElement("div", { className: "row no-gutters" },
+            React.createElement("div", { className: "col-md-4" },
+                React.createElement("div", { className: "d-flex justify-content-center" },
+                    React.createElement(Placeholder_1.default, { type: "text", w: 'md', h: 'sm', blink: true })),
+                React.createElement(Placeholder_1.default, { type: "text", h: 'md', blink: true }),
+                React.createElement(Placeholder_1.default, { type: "text", h: 'md', blink: true })),
+            React.createElement("div", { className: "col-md-4" },
+                React.createElement("div", { className: "d-flex justify-content-center" },
+                    React.createElement(Placeholder_1.default, { type: "text", w: 'md', h: 'sm', blink: true })),
+                React.createElement(Placeholder_1.default, { type: "text", h: 'sm', blink: true }),
+                React.createElement(Placeholder_1.default, { type: "text", h: 'sm', blink: true }),
+                React.createElement(Placeholder_1.default, { type: "text", h: 'sm', blink: true })),
+            React.createElement("div", { className: "col-md-4" },
+                React.createElement("div", { className: "d-flex justify-content-center" },
+                    React.createElement(Placeholder_1.default, { type: "text", w: 'md', h: 'sm', blink: true })),
+                React.createElement("div", { className: "d-flex justify-content-center u-marg-top u-marg-bottom" },
+                    React.createElement(Placeholder_1.default, { type: "text", w: 'xs', h: 'sm', blink: true, noMarg: true })),
+                React.createElement("div", { className: "d-flex justify-content-center" },
+                    React.createElement(Placeholder_1.default, { type: "text", w: 'md', h: 'sm', blink: true, noMarg: true })),
+                React.createElement("div", { className: "d-flex justify-content-center u-marg-top u-marg-bottom" },
+                    React.createElement(Placeholder_1.default, { type: "text", w: 'xs', h: 'sm', blink: true, noMarg: true })))),
+        React.createElement("div", { className: "row no-gutters" },
+            React.createElement("div", { className: "col-md-4" },
+                React.createElement(Placeholder_1.default, { type: "text", h: 'lg', blink: true })),
+            React.createElement("div", { className: "offset-md-4 col-md-4 d-flex align-items-center" },
+                React.createElement(Placeholder_1.default, { type: "text", w: 'xl', h: 'sm', blink: true })))));
+};
+const PlanpayPaymentMethod = () => {
+    var _a, _b;
+    const basketContext = (0, react_1.useContext)(contexts_1.BasketContext);
+    const { hotel } = (0, CurrentHotelHook_1.useCurrentHotel)();
+    const planPayCheckoutResponse = (_b = (_a = basketContext.reservationData) === null || _a === void 0 ? void 0 : _a.payment) === null || _b === void 0 ? void 0 : _b.planpay;
+    (0, react_1.useLayoutEffect)(() => {
+        if (planPayCheckoutResponse === null || planPayCheckoutResponse === void 0 ? void 0 : planPayCheckoutResponse.id) {
+            web_1.planpay.checkout.refresh();
+        }
+    }, [planPayCheckoutResponse === null || planPayCheckoutResponse === void 0 ? void 0 : planPayCheckoutResponse.id]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        web_1.planpay.init({ environment: (_a = hotel === null || hotel === void 0 ? void 0 : hotel.planpay) === null || _a === void 0 ? void 0 : _a.env });
+    }, [hotel]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "planpay-payment-container", "data-planpay-checkout-id": planPayCheckoutResponse === null || planPayCheckoutResponse === void 0 ? void 0 : planPayCheckoutResponse.id, style: { minHeight: '204px', display: 'flex', justifyContent: 'flex-end', flexDirection: 'column' } },
+            React.createElement(PlanpayWidgetLoader, null))));
+};
+exports.PlanpayPaymentMethod = PlanpayPaymentMethod;
+//# sourceMappingURL=PlanpayPaymentMethod.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlanpayPaymentMethod.js","sourceRoot":"/","sources":["src/components/steps/confirmation/PlanpayPaymentMethod.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { FC, useContext, useEffect, useLayoutEffect } from 'react';\nimport { BasketContext } from '@frontend/contexts';\n\nimport { planpay } from '@planpay/web';\nimport Placeholder from 'components/generic/Placeholder';\nimport { useCurrentHotel } from 'hooks/CurrentHotelHook';\n\nconst PlanpayWidgetLoader = () => {\n    return (\n        <div>\n            <div className=\"row no-gutters\">\n                <div className=\"col-md-4\">\n                    <div className=\"d-flex justify-content-center\">\n                        <Placeholder type=\"text\" w={'md'} h={'sm'} blink={true} />\n                    </div>\n\n                    <Placeholder type=\"text\" h={'md'} blink={true} />\n                    <Placeholder type=\"text\" h={'md'} blink={true} />\n                </div>\n                <div className=\"col-md-4\">\n                    <div className=\"d-flex justify-content-center\">\n                        <Placeholder type=\"text\" w={'md'} h={'sm'} blink={true} />\n                    </div>\n\n                    <Placeholder type=\"text\" h={'sm'} blink={true} />\n                    <Placeholder type=\"text\" h={'sm'} blink={true} />\n                    <Placeholder type=\"text\" h={'sm'} blink={true} />\n                </div>\n                <div className=\"col-md-4\">\n                    <div className=\"d-flex justify-content-center\">\n                        <Placeholder type=\"text\" w={'md'} h={'sm'} blink={true} />\n                    </div>\n\n                    <div className=\"d-flex justify-content-center u-marg-top u-marg-bottom\">\n                        <Placeholder type=\"text\" w={'xs'} h={'sm'} blink={true} noMarg={true} />\n                    </div>\n\n                    <div className=\"d-flex justify-content-center\">\n                        <Placeholder type=\"text\" w={'md'} h={'sm'} blink={true} noMarg={true} />\n                    </div>\n                    <div className=\"d-flex justify-content-center u-marg-top u-marg-bottom\">\n                        <Placeholder type=\"text\" w={'xs'} h={'sm'} blink={true} noMarg={true} />\n                    </div>\n                </div>\n            </div>\n            <div className=\"row no-gutters\">\n                <div className=\"col-md-4\">\n                    <Placeholder type=\"text\" h={'lg'} blink={true} />\n                </div>\n                <div className=\"offset-md-4 col-md-4 d-flex align-items-center\">\n                    <Placeholder type=\"text\" w={'xl'} h={'sm'} blink={true} />\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport const PlanpayPaymentMethod: FC = () => {\n    const basketContext = useContext(BasketContext);\n    const { hotel } = useCurrentHotel();\n\n    const planPayCheckoutResponse = basketContext.reservationData?.payment?.planpay;\n\n    useLayoutEffect(() => {\n        if (planPayCheckoutResponse?.id) {\n            planpay.checkout.refresh();\n        }\n    }, [planPayCheckoutResponse?.id]);\n\n    useEffect(() => {\n        planpay.init({ environment: hotel?.planpay?.env });\n    }, [hotel]);\n\n    return (\n        <>\n            <div\n                className=\"planpay-payment-container\"\n                data-planpay-checkout-id={planPayCheckoutResponse?.id}\n                style={{ minHeight: '204px', display: 'flex', justifyContent: 'flex-end', flexDirection: 'column' }}\n            >\n                <PlanpayWidgetLoader />\n            </div>\n        </>\n    );\n};\n"]}

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

@@ -1,8 +1,3 @@
-import BasketRow from '../../../models/BasketRow';
-export interface RoomContactDetailsProps {
-    roomNumber: number;
-    basketRow: BasketRow;
-    showErrors?: boolean;
-    expandable?: boolean;
-}
-export default function RoomContactDetails(props: RoomContactDetailsProps): JSX.Element;
+import { FC } from 'react';
+declare const RoomContactDetails: FC;
+export default RoomContactDetails;

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

@@ -12,214 +12,275 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = require("react");
-const Text_1 = require("../../generic/Text");
-const InputGroup_1 = require("../../generic/InputGroup/InputGroup");
-const TextBox_1 = require("../../generic/TextBox");
-const Text_2 = require("../../generic/Text");
-const Translation_1 = require("../../../translations/Translation");
-const react_i18next_1 = require("react-i18next");
 const react_1 = require("react");
-const Headline_1 = require("../../generic/Headline");
-const Icon_1 = require("../../generic/Icon");
-const Color_1 = require("../../../util/Color");
-const StepConfirmationCountrySelector_1 = require("./StepConfirmationCountrySelector");
-const StringHelper_1 = require("../../../util/StringHelper");
-const LineBreak_1 = require("../../generic/LineBreak");
+const Text_1 = require("components/generic/Text");
+const InputGroup_1 = require("components/generic/InputGroup/InputGroup");
+const TextBox_1 = require("components/generic/TextBox");
+const Translation_1 = require("translations/Translation");
+const react_i18next_1 = require("react-i18next");
+const Headline_1 = require("components/generic/Headline");
+const Icon_1 = require("components/generic/Icon/Icon");
+const Color_1 = require("util/Color");
+const StepConfirmationCountrySelector_1 = require("components/steps/confirmation/StepConfirmationCountrySelector");
+const StringHelper_1 = require("util/StringHelper");
+const LineBreak_1 = require("components/generic/LineBreak");
 const react_hook_form_1 = require("react-hook-form");
-const Alert_1 = require("../../generic/Alert");
-const AutoAutoHeight_1 = require("../../../animations/AutoAutoHeight");
-const DataLayer_1 = require("../../../util/DataLayer");
-const EnhancedPhoneNumberField_1 = require("../../generic/custom/EnhancedPhoneNumberField/EnhancedPhoneNumberField");
-const E164PhoneNumberFieldFeature_1 = require("../../../providers/feature/E164PhoneNumberFieldFeature");
-const Validation_1 = require("../../../util/Validation");
-function RoomContactDetails(props) {
-    const { register, formState, getValues, control } = react_hook_form_1.useFormContext();
+const Alert_1 = require("components/generic/Alert");
+const AutoAutoHeight_1 = require("animations/AutoAutoHeight");
+const DataLayer_1 = require("util/DataLayer");
+const EnhancedPhoneNumberField_1 = require("components/generic/custom/EnhancedPhoneNumberField/EnhancedPhoneNumberField");
+const E164PhoneNumberFieldFeature_1 = require("providers/feature/E164PhoneNumberFieldFeature");
+const Confirmation_1 = require("../../../models/Confirmation");
+const Checkbox_1 = require("../../generic/Checkbox/Checkbox");
+const contexts_1 = require("@frontend/contexts");
+const core_1 = require("@roomstay/core");
+const RoomContactDetails = () => {
+    const { register, formState, control, watch, getValues, setValue } = (0, react_hook_form_1.useFormContext)();
+    const basketContext = (0, react_1.useContext)(contexts_1.BasketContext);
+    const basketRows = basketContext.getAllValidRows();
+    const basketAddonRows = basketContext.basketAddonRows;
+    const { update, fields } = (0, react_hook_form_1.useFieldArray)({
+        control,
+        name: 'userProfiles',
+    });
+    const [copyCheckBox, paymentMethod] = watch(['copyCheckBox', 'paymentMethod']);
     const errors = formState.errors;
-    const { t } = react_i18next_1.useTranslation();
-    const [isOpen, setIsOpen] = react_1.useState(props.roomNumber === 1);
-    const row = props.basketRow;
-    const hasErrors = Object.keys(errors)
-        .join('')
-        .indexOf('' + props.roomNumber) !== -1;
-    const getValidationClass = (name) => {
-        const paddedName = padInputName(name);
-        if (errors && (formState.touchedFields[paddedName] || props.showErrors)) {
-            if (errors[paddedName]) {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { roomstayMember: member } = (0, react_1.useContext)(contexts_1.RoomstayMemberContext);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        (_a = errors.userProfiles) === null || _a === void 0 ? void 0 : _a.forEach((_, index) => {
+            if (errors.userProfiles[index]) {
+                opens[index] = true;
+            }
+        });
+        setOpens(opens.slice(0));
+    }, [errors.userProfiles, copyCheckBox]);
+    (0, react_1.useEffect)(() => {
+        const getDefaultValue = (index, potentialDefaultValue = '') => {
+            return index === 0 ? potentialDefaultValue : '';
+        };
+        const userProfiles = basketRows.map((basketRows, index) => {
+            var _a, _b, _c, _d;
+            return {
+                [Confirmation_1.EUserProfileFormKey.Forename]: getDefaultValue(index, member === null || member === void 0 ? void 0 : member.forename),
+                [Confirmation_1.EUserProfileFormKey.Surname]: getDefaultValue(index, member === null || member === void 0 ? void 0 : member.surname),
+                [Confirmation_1.EUserProfileFormKey.Email]: getDefaultValue(index, member === null || member === void 0 ? void 0 : member.email),
+                [Confirmation_1.EUserProfileFormKey.Phone]: getDefaultValue(index, member === null || member === void 0 ? void 0 : member.phoneNumber),
+                [Confirmation_1.EUserProfileFormKey.Address]: getDefaultValue(index, (_a = member === null || member === void 0 ? void 0 : member.address) === null || _a === void 0 ? void 0 : _a.address),
+                [Confirmation_1.EUserProfileFormKey.City]: getDefaultValue(index, (_b = member === null || member === void 0 ? void 0 : member.address) === null || _b === void 0 ? void 0 : _b.city),
+                [Confirmation_1.EUserProfileFormKey.PostCode]: getDefaultValue(index, (_c = member === null || member === void 0 ? void 0 : member.address) === null || _c === void 0 ? void 0 : _c.zip),
+                [Confirmation_1.EUserProfileFormKey.Country]: getDefaultValue(index, (_d = member === null || member === void 0 ? void 0 : member.address) === null || _d === void 0 ? void 0 : _d.country),
+            };
+        });
+        setValue('userProfiles', userProfiles);
+        setValue('copyCheckBox', (basketRows === null || basketRows === void 0 ? void 0 : basketRows.length) && basketRows.length > 1);
+    }, [member, basketRows === null || basketRows === void 0 ? void 0 : basketRows.length]);
+    const padInputNameByRoomNumber = (name, index) => `userProfiles.${index}.${name}`;
+    const [opens, setOpens] = (0, react_1.useState)(basketRows.map((basketRow, index) => index === 0));
+    const onInputChange = (fieldName, interactionName) => (event) => {
+        DataLayer_1.default.instance.sendInteraction(interactionName, DataLayer_1.InteractionType.FORM_FIELD, DataLayer_1.InteractionStep.GUEST_DETAILS);
+    };
+    (0, react_1.useEffect)(() => {
+        if (copyCheckBox)
+            fields.forEach((basketRow, index) => {
+                if (index === 0)
+                    return;
+                update(index, getValues(`userProfiles.0`));
+            });
+    }, [copyCheckBox]);
+    (0, react_1.useEffect)(() => {
+        const { unsubscribe } = watch((allFields, { name, type }) => {
+            if (type === 'change' && name.includes('userProfiles') && name.split('.')[1] === '0' && allFields.copyCheckBox) {
+                fields.map((field, index) => {
+                    if (index === 0)
+                        return;
+                    update(index, getValues('userProfiles.0'));
+                });
+            }
+        });
+        return () => {
+            unsubscribe();
+        };
+    }, [fields]);
+    (0, react_1.useEffect)(() => {
+        DataLayer_1.default.instance.sendCheckoutView(basketRows, basketAddonRows);
+    }, []);
+    const setOpenByIndex = (index, value) => {
+        opens.splice(index, 1, value);
+        setOpens(opens.slice(0));
+    };
+    return (React.createElement(React.Fragment, null, fields.map((field, index) => {
+        var _a;
+        const padInputName = (name) => padInputNameByRoomNumber(name, index);
+        const getValidationClass = (name) => {
+            var _a;
+            if (!errors.userProfiles || (copyCheckBox && index >= 1))
+                return null;
+            if ((_a = errors.userProfiles[index]) === null || _a === void 0 ? void 0 : _a[name]) {
                 return 'error';
             }
             else {
                 return 'success';
             }
-        }
-        else {
-            return null;
-        }
-    };
-    if (hasErrors && !isOpen) {
-        setIsOpen(true);
-    }
-    const padInputName = (name) => {
-        return `${name}${props.roomNumber}`;
-    };
-    const inputValues = Object.keys(getValues());
-    const openExpandable = () => {
-        if (props.expandable)
-            setIsOpen(!isOpen);
-    };
-    const setForename = () => {
-        DataLayer_1.default.instance.sendInteraction('Forename - Contact Info', DataLayer_1.InteractionType.FORM_FIELD, DataLayer_1.InteractionStep.GUEST_DETAILS);
-    };
-    const setSurname = () => {
-        DataLayer_1.default.instance.sendInteraction('Surname - Contact Info', DataLayer_1.InteractionType.FORM_FIELD, DataLayer_1.InteractionStep.GUEST_DETAILS);
-    };
-    const setEmail = () => {
-        DataLayer_1.default.instance.sendInteraction('Email - Contact Info', DataLayer_1.InteractionType.FORM_FIELD, DataLayer_1.InteractionStep.GUEST_DETAILS);
-    };
-    const setPhone = () => {
-        DataLayer_1.default.instance.sendInteraction('Phone - Contact Info', DataLayer_1.InteractionType.FORM_FIELD, DataLayer_1.InteractionStep.GUEST_DETAILS);
-    };
-    const setAddress = () => {
-        DataLayer_1.default.instance.sendInteraction('Address - Address', DataLayer_1.InteractionType.FORM_FIELD, DataLayer_1.InteractionStep.GUEST_DETAILS);
-    };
-    const setCity = () => {
-        DataLayer_1.default.instance.sendInteraction('City - Address', DataLayer_1.InteractionType.FORM_FIELD, DataLayer_1.InteractionStep.GUEST_DETAILS);
-    };
-    const setPostCode = () => {
-        DataLayer_1.default.instance.sendInteraction('PostCode - Address', DataLayer_1.InteractionType.FORM_FIELD, DataLayer_1.InteractionStep.GUEST_DETAILS);
-    };
-    const setCountry = (event) => {
-        DataLayer_1.default.instance.sendInteraction('Country - Address', DataLayer_1.InteractionType.FORM_FIELD, DataLayer_1.InteractionStep.GUEST_DETAILS);
-    };
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "u-marg-bottom", onClick: openExpandable },
-            React.createElement("div", { className: "u-flex u-marg-bottom align-items-center" },
-                React.createElement(Headline_1.default, { bold: true },
-                    t(Translation_1.Translation.Misc.Room),
-                    " ",
-                    props.roomNumber),
-                props.expandable && React.createElement(Icon_1.default, { icon: isOpen ? Icon_1.IconType.ArrowDown2 : Icon_1.IconType.ArrowUp2, color: Color_1.Color.Grey })),
-            React.createElement("div", { className: "u-marg-bottom" },
-                React.createElement(Text_1.default, null,
-                    React.createElement("strong", { className: "u-block@l-" }, row.getRoom().name),
-                    " for ",
-                    StringHelper_1.default.pluralWithDictAndCount(row.getAdults(), Translation_1.Translation.Step.Date.Adult, t),
-                    ",\u00A0",
-                    StringHelper_1.default.pluralWithDictAndCount(row.getChildren(), Translation_1.Translation.Step.Date.Child, t)),
-                React.createElement("div", { className: "step-one-status--dates u-flex justify-content-start" },
-                    React.createElement(Text_1.default, { type: Text_2.TextType.Small, color: Color_1.Color.Accent },
-                        React.createElement("strong", null, row.getStartDate().format('ddd, MMM D'))),
-                    React.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowRight2, size: '18px' }),
-                    React.createElement(Text_1.default, { type: Text_2.TextType.Small, color: Color_1.Color.Accent },
-                        React.createElement("strong", null, row.getEndDate().format('ddd, MMM D'))))),
-            inputValues.map((error, index) => {
-                var _a, _b;
-                if (error.endsWith(`${props.roomNumber}`)) {
-                    let errorMessage = (_b = (_a = errors[error]) === null || _a === void 0 ? void 0 : _a.message) !== null && _b !== void 0 ? _b : '';
-                    errorMessage = errorMessage ? errorMessage : error.replace(`${props.roomNumber}`, '') + ' is required';
-                    return (React.createElement(AutoAutoHeight_1.default, { key: error, open: props.showErrors && hasErrors && !!errors[error] },
-                        React.createElement("div", { className: "u-flex" },
-                            React.createElement(Alert_1.default, { icon: Icon_1.IconType.Error, type: Alert_1.AlertType.Danger, noMargin: index === inputValues.length - 1 },
-                                React.createElement(Text_1.default, { type: Text_2.TextType.Small }, errorMessage)))));
-                }
-            })),
-        React.createElement("div", { className: "room-contact-details--row", style: { maxHeight: isOpen ? '' : 0 } },
-            React.createElement("div", { className: "u-marg-bottom--heavy" },
-                React.createElement("div", { className: "u-marg-bottom--light" },
-                    React.createElement(Text_1.default, { type: Text_2.TextType.Small },
-                        React.createElement("strong", null, t(Translation_1.Translation.Step.Confirmation.ContactInfo)))),
-                React.createElement(InputGroup_1.default, { dimensions: "2/2" },
-                    React.createElement(TextBox_1.default, Object.assign({ placeholder: t(Translation_1.Translation.Step.Confirmation.Inputs.Forename) + ' *', wide: true, required: true, validationStatus: getValidationClass('Forename') }, register(padInputName('Forename'), {
-                        onChange: setForename,
-                        required: {
-                            value: true,
-                            message: t(Translation_1.Translation.Step.Confirmation.Inputs.Required, { field: t(Translation_1.Translation.Step.Confirmation.Inputs.Forename) }),
-                        },
-                    }))),
-                    React.createElement(TextBox_1.default, Object.assign({ placeholder: t(Translation_1.Translation.Step.Confirmation.Inputs.Surname) + ' *', wide: true, required: true, validationStatus: getValidationClass('Surname') }, register(padInputName('Surname'), {
-                        onChange: setSurname,
-                        required: {
-                            value: true,
-                            message: t(Translation_1.Translation.Step.Confirmation.Inputs.Required, { field: t(Translation_1.Translation.Step.Confirmation.Inputs.Surname) }),
-                        },
-                    })))),
-                React.createElement(InputGroup_1.default, { dimensions: '2/2' },
-                    React.createElement(TextBox_1.default, Object.assign({ placeholder: t(Translation_1.Translation.Step.Confirmation.Inputs.Email) + ' *', wide: true, validationStatus: getValidationClass('Email'), required: true }, register(padInputName('Email'), {
-                        onChange: setEmail,
-                        required: {
-                            value: true,
-                            message: t(Translation_1.Translation.Step.Confirmation.Inputs.Required, { field: t(Translation_1.Translation.Step.Confirmation.Inputs.Email) }),
-                        },
-                        pattern: {
-                            value: Validation_1.EMAIL_REGEX,
-                            message: t(Translation_1.Translation.Step.Confirmation.Inputs.InvalidEmail),
-                        },
-                    }))),
-                    E164PhoneNumberFieldFeature_1.default.isActive() ? (React.createElement(react_hook_form_1.Controller, { control: control, name: padInputName('Phone'), rules: {
-                            required: {
-                                value: true,
-                                message: t(Translation_1.Translation.Step.Confirmation.Inputs.Required, { field: t(Translation_1.Translation.Step.Confirmation.Inputs.Phone) }),
-                            },
-                            minLength: {
-                                value: 5,
-                                message: 'Phone number is required',
-                            },
-                            maxLength: {
-                                value: 17,
-                                message: 'Phone number is too long',
-                            },
-                            pattern: {
-                                value: /^[1-9](\ |\d){1,15}$/g,
-                                message: 'Incorrect phone number entered',
-                            },
-                        }, render: ({ field, fieldState }) => {
-                            return (React.createElement(EnhancedPhoneNumberField_1.EnhancedPhoneNumberField, Object.assign({ validationStatus: getValidationClass('Phone') }, field, { onChange: (e) => {
-                                    field.onChange(e);
-                                    setPhone();
-                                } })));
-                        } })) : (React.createElement(TextBox_1.default, Object.assign({ placeholder: t(Translation_1.Translation.Step.Confirmation.Inputs.Phone) + ' *', wide: true, required: true, validationStatus: getValidationClass('Phone') }, register(padInputName('Phone'), {
-                        onChange: setPhone,
-                        required: {
-                            value: true,
-                            message: t(Translation_1.Translation.Step.Confirmation.Inputs.Required, { field: t(Translation_1.Translation.Step.Confirmation.Inputs.Phone) }),
-                        },
-                    })))))),
-            React.createElement("div", { className: "" },
-                React.createElement("div", { className: "u-marg-bottom--light" },
-                    React.createElement(Text_1.default, { type: Text_2.TextType.Small },
-                        React.createElement("strong", null, t(Translation_1.Translation.Step.Confirmation.Address)))),
-                React.createElement(InputGroup_1.default, { dimensions: '3/1' },
-                    React.createElement(TextBox_1.default, Object.assign({ placeholder: t(Translation_1.Translation.Step.Confirmation.Inputs.Address) + ' *', wide: true, required: true, validationStatus: getValidationClass('Address') }, register(padInputName('Address'), {
-                        onChange: setAddress,
-                        required: {
-                            value: true,
-                            message: t(Translation_1.Translation.Step.Confirmation.Inputs.Required, { field: t(Translation_1.Translation.Step.Confirmation.Inputs.Address) }),
-                        },
-                    }))),
-                    React.createElement(TextBox_1.default, Object.assign({ placeholder: t(Translation_1.Translation.Step.Confirmation.Inputs.City) + ' *', wide: true, required: true, validationStatus: getValidationClass('City') }, register(padInputName('City'), {
-                        onChange: setCity,
-                        required: {
-                            value: true,
-                            message: t(Translation_1.Translation.Step.Confirmation.Inputs.Required, { field: t(Translation_1.Translation.Step.Confirmation.Inputs.City) }),
-                        },
-                    })))),
-                React.createElement(InputGroup_1.default, { dimensions: '2/2' },
-                    React.createElement(TextBox_1.default, Object.assign({ placeholder: t(Translation_1.Translation.Step.Confirmation.Inputs.PostCode) + ' *', wide: true, required: true, validationStatus: getValidationClass('PostCode') }, register(padInputName('PostCode'), {
-                        onChange: setPostCode,
-                        required: {
-                            value: true,
-                            message: t(Translation_1.Translation.Step.Confirmation.Inputs.Required, { field: t(Translation_1.Translation.Step.Confirmation.Inputs.PostCode) }),
-                        },
-                    }))),
-                    React.createElement(react_hook_form_1.Controller, { control: control, name: padInputName('Country'), rules: {
-                            required: {
-                                value: true,
-                                message: t(Translation_1.Translation.Step.Confirmation.Inputs.Required, { field: t(Translation_1.Translation.Step.Confirmation.Inputs.Country) }),
-                            },
-                        }, render: ({ field }) => {
-                            const { ref } = field, rest = __rest(field, ["ref"]);
-                            return React.createElement(StepConfirmationCountrySelector_1.default, Object.assign({ validationStatus: getValidationClass('Country') }, rest, { defaultValue: null }));
-                        } })))),
-        React.createElement(LineBreak_1.default, null)));
-}
+        };
+        const openExpandable = () => {
+            if (index !== 0) {
+                setOpenByIndex(index, !opens[index]);
+            }
+        };
+        const basketRow = basketRows[index];
+        const isDisabled = (copyCheckBox && index >= 1) || paymentMethod === core_1.EBookingPaymentMethod.Planpay;
+        return (React.createElement("div", { key: field.id },
+            React.createElement("div", { className: index === 0 ? '' : 'u-marg-bottom--heavy' },
+                React.createElement("div", { className: "u-marg-bottom", onClick: openExpandable },
+                    React.createElement("div", { className: "u-flex u-marg-bottom align-items-center" },
+                        React.createElement(Headline_1.default, { bold: true },
+                            t(Translation_1.Translation.Misc.Room),
+                            " ",
+                            index + 1),
+                        index !== 0 && React.createElement(Icon_1.default, { icon: opens[index] ? Icon_1.IconType.ArrowDown2 : Icon_1.IconType.ArrowUp2, color: Color_1.Color.Grey })),
+                    basketRow && (React.createElement("div", { className: "u-marg-bottom" },
+                        React.createElement(Text_1.default, null,
+                            React.createElement("strong", { className: "u-block@l-" }, basketRow.getRoom().name),
+                            " for",
+                            ' ',
+                            StringHelper_1.default.pluralWithDictAndCount(basketRow.getAdults(), Translation_1.Translation.Step.Date.Adult, t),
+                            ",\u00A0",
+                            StringHelper_1.default.pluralWithDictAndCount(basketRow.getChildren(), Translation_1.Translation.Step.Date.Child, t)),
+                        React.createElement("div", { className: "step-one-status--dates u-flex justify-content-start" },
+                            React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Accent },
+                                React.createElement("strong", null, basketRow.getStartDate().format('ddd, MMM D'))),
+                            React.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowRight2, size: '18px' }),
+                            React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Accent },
+                                React.createElement("strong", null, basketRow.getEndDate().format('ddd, MMM D')))))),
+                    ((_a = errors.userProfiles) === null || _a === void 0 ? void 0 : _a[index]) &&
+                        formState.submitCount >= 1 &&
+                        (index === 0 || !copyCheckBox) &&
+                        Object.values(errors.userProfiles[index]).map((error, errorIndex) => {
+                            return (React.createElement(AutoAutoHeight_1.default, { key: errorIndex, open: true },
+                                React.createElement("div", { className: "u-flex" },
+                                    React.createElement(Alert_1.default, { icon: Icon_1.IconType.Error, type: Alert_1.AlertType.Danger, noMargin: errorIndex === Object.keys(errors.userProfiles[index]).length - 1 },
+                                        React.createElement(Text_1.default, { type: Text_1.TextType.Small }, error === null || error === void 0 ? void 0 : error.message)))));
+                        })),
+                React.createElement("div", { className: "room-contact-details--row", style: { maxHeight: opens[index] ? '' : 0 } },
+                    React.createElement("div", { className: "u-marg-bottom--heavy" },
+                        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.ContactInfo)))),
+                        React.createElement(InputGroup_1.default, { dimensions: "2/2" },
+                            React.createElement(TextBox_1.default, Object.assign({ inputProps: {
+                                    disabled: isDisabled,
+                                }, placeholder: t(Translation_1.Translation.Step.Confirmation.Inputs.Forename) + ' *', wide: true, required: true, validationStatus: getValidationClass(Confirmation_1.EUserProfileFormKey.Forename) }, register(padInputName(Confirmation_1.EUserProfileFormKey.Forename), {
+                                onChange: onInputChange(padInputName(Confirmation_1.EUserProfileFormKey.Forename), 'Forename - Contact Info'),
+                                required: {
+                                    value: true,
+                                    message: t(Translation_1.Translation.Step.Confirmation.Inputs.Required, { field: t(Translation_1.Translation.Step.Confirmation.Inputs.Forename) }),
+                                },
+                            }))),
+                            React.createElement(TextBox_1.default, Object.assign({ inputProps: {
+                                    disabled: isDisabled,
+                                }, placeholder: t(Translation_1.Translation.Step.Confirmation.Inputs.Surname) + ' *', wide: true, required: true, validationStatus: getValidationClass(Confirmation_1.EUserProfileFormKey.Surname) }, register(padInputName(Confirmation_1.EUserProfileFormKey.Surname), {
+                                onChange: onInputChange(padInputName(Confirmation_1.EUserProfileFormKey.Surname), 'Surname - Contact Info'),
+                                required: {
+                                    value: true,
+                                    message: t(Translation_1.Translation.Step.Confirmation.Inputs.Required, { field: t(Translation_1.Translation.Step.Confirmation.Inputs.Surname) }),
+                                },
+                            })))),
+                        React.createElement(InputGroup_1.default, { dimensions: '2/2' },
+                            React.createElement(TextBox_1.default, Object.assign({ inputProps: {
+                                    disabled: isDisabled,
+                                }, placeholder: t(Translation_1.Translation.Step.Confirmation.Inputs.Email) + ' *', wide: true, validationStatus: getValidationClass(Confirmation_1.EUserProfileFormKey.Email), required: true }, register(padInputName(Confirmation_1.EUserProfileFormKey.Email), {
+                                onChange: onInputChange(padInputName(Confirmation_1.EUserProfileFormKey.Email), 'Email - Contact Info'),
+                                required: {
+                                    value: true,
+                                    message: t(Translation_1.Translation.Step.Confirmation.Inputs.Required, { field: t(Translation_1.Translation.Step.Confirmation.Inputs.Email) }),
+                                },
+                                pattern: {
+                                    value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
+                                    message: t(Translation_1.Translation.Step.Confirmation.Inputs.InvalidEmail),
+                                },
+                            }))),
+                            E164PhoneNumberFieldFeature_1.default.isActive() ? (React.createElement(react_hook_form_1.Controller, { control: control, name: padInputName(Confirmation_1.EUserProfileFormKey.Phone), rules: {
+                                    required: {
+                                        value: true,
+                                        message: t(Translation_1.Translation.Step.Confirmation.Inputs.Required, { field: t(Translation_1.Translation.Step.Confirmation.Inputs.Phone) }),
+                                    },
+                                    minLength: {
+                                        value: 5,
+                                        message: 'Phone number is required',
+                                    },
+                                    maxLength: {
+                                        value: 17,
+                                        message: 'Phone number is too long',
+                                    },
+                                    pattern: {
+                                        value: /^[1-9]( |\d){1,15}$/g,
+                                        message: 'Incorrect phone number entered',
+                                    },
+                                }, render: ({ field }) => {
+                                    return (React.createElement(EnhancedPhoneNumberField_1.default, Object.assign({ disabled: isDisabled, validationStatus: getValidationClass(Confirmation_1.EUserProfileFormKey.Phone) }, field, { onChange: (e) => {
+                                            field.onChange(e);
+                                            onInputChange(padInputName(Confirmation_1.EUserProfileFormKey.Phone), 'Phone - Contact Info')(e);
+                                        } })));
+                                } })) : (React.createElement(TextBox_1.default, Object.assign({ inputProps: {
+                                    disabled: isDisabled,
+                                }, placeholder: t(Translation_1.Translation.Step.Confirmation.Inputs.Phone) + ' *', wide: true, required: true, validationStatus: getValidationClass(Confirmation_1.EUserProfileFormKey.Phone) }, register(padInputName(Confirmation_1.EUserProfileFormKey.Phone), {
+                                onChange: onInputChange(padInputName(Confirmation_1.EUserProfileFormKey.Phone), 'Phone - Contact Info'),
+                                required: {
+                                    value: true,
+                                    message: t(Translation_1.Translation.Step.Confirmation.Inputs.Required, { field: t(Translation_1.Translation.Step.Confirmation.Inputs.Phone) }),
+                                },
+                            })))))),
+                    React.createElement("div", { className: "" },
+                        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.Address)))),
+                        React.createElement(InputGroup_1.default, { dimensions: '3/1' },
+                            React.createElement(TextBox_1.default, Object.assign({ inputProps: {
+                                    disabled: isDisabled,
+                                }, placeholder: t(Translation_1.Translation.Step.Confirmation.Inputs.Address) + ' *', wide: true, required: true, validationStatus: getValidationClass(Confirmation_1.EUserProfileFormKey.Address) }, register(padInputName(Confirmation_1.EUserProfileFormKey.Address), {
+                                onChange: onInputChange(padInputName(Confirmation_1.EUserProfileFormKey.Address), 'Address - Address'),
+                                required: {
+                                    value: true,
+                                    message: t(Translation_1.Translation.Step.Confirmation.Inputs.Required, { field: t(Translation_1.Translation.Step.Confirmation.Inputs.Address) }),
+                                },
+                            }))),
+                            React.createElement(TextBox_1.default, Object.assign({ inputProps: {
+                                    disabled: isDisabled,
+                                }, placeholder: t(Translation_1.Translation.Step.Confirmation.Inputs.City) + ' *', wide: true, required: true, validationStatus: getValidationClass(Confirmation_1.EUserProfileFormKey.City) }, register(padInputName(Confirmation_1.EUserProfileFormKey.City), {
+                                onChange: onInputChange(padInputName(Confirmation_1.EUserProfileFormKey.City), 'City - Address'),
+                                required: {
+                                    value: true,
+                                    message: t(Translation_1.Translation.Step.Confirmation.Inputs.Required, { field: t(Translation_1.Translation.Step.Confirmation.Inputs.City) }),
+                                },
+                            })))),
+                        React.createElement(InputGroup_1.default, { dimensions: '2/2' },
+                            React.createElement(TextBox_1.default, Object.assign({ inputProps: {
+                                    disabled: isDisabled,
+                                }, placeholder: t(Translation_1.Translation.Step.Confirmation.Inputs.PostCode) + ' *', wide: true, required: true, validationStatus: getValidationClass(Confirmation_1.EUserProfileFormKey.PostCode) }, register(padInputName(Confirmation_1.EUserProfileFormKey.PostCode), {
+                                onChange: onInputChange(padInputName(Confirmation_1.EUserProfileFormKey.PostCode), 'PostCode - Address'),
+                                required: {
+                                    value: true,
+                                    message: t(Translation_1.Translation.Step.Confirmation.Inputs.Required, { field: t(Translation_1.Translation.Step.Confirmation.Inputs.PostCode) }),
+                                },
+                            }))),
+                            React.createElement(react_hook_form_1.Controller, { control: control, name: padInputName(Confirmation_1.EUserProfileFormKey.Country), rules: {
+                                    required: {
+                                        value: true,
+                                        message: t(Translation_1.Translation.Step.Confirmation.Inputs.Required, { field: t(Translation_1.Translation.Step.Confirmation.Inputs.Country) }),
+                                    },
+                                }, render: ({ field }) => {
+                                    const { ref, onChange } = field, rest = __rest(field, ["ref", "onChange"]);
+                                    return (React.createElement(StepConfirmationCountrySelector_1.default, Object.assign({ disabled: isDisabled, validationStatus: getValidationClass(Confirmation_1.EUserProfileFormKey.Country), onChange: (e) => {
+                                            onChange(e);
+                                            onInputChange(padInputName(Confirmation_1.EUserProfileFormKey.Country), 'Country - Address')(e);
+                                        } }, rest)));
+                                } })))),
+                React.createElement(LineBreak_1.default, null)),
+            fields.length > 1 && index === 0 ? (React.createElement("div", { className: "u-marg-bottom--heavy" },
+                React.createElement(Checkbox_1.default, Object.assign({ label: t(Translation_1.Translation.Step.Confirmation.ApplySameInfoToOtherRooms) }, register('copyCheckBox'))))) : null));
+    })));
+};
 exports.default = RoomContactDetails;
 //# sourceMappingURL=RoomContactDetails.js.map