@roomstay/frontend 2.1.6 → 2.1.8

package/dist/src/components/steps/confirmation/PaymentDetails/StepConfirmationPaymentDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepConfirmationPaymentDetails.js","sourceRoot":"/","sources":["src/components/steps/confirmation/PaymentDetails/StepConfirmationPaymentDetails.tsx"],"names":[],"mappings":"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","sourcesContent":["import PaymentCard from '@/models/PaymentCard';\nimport * as React from 'react';\nimport { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport InputGroup from '@/components/generic/InputGroup/InputGroup';\nimport AutoAutoHeight from '@/animations/AutoAutoHeight';\nimport Alert, { AlertType } from '@/components/generic/Alert';\nimport { IconType } from '@/components/generic/Icon/Icon';\nimport Text, { TextType } from '@/components/generic/Text';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\nimport { SynxisToVGSCardNameMapping } from '@/models/Api/HotelDTO';\nimport { useCurrentHotel, useMember, useWindowScroll } from '@frontend/hooks';\nimport { useVgsCollect } from '@/hooks/VGSHooks';\nimport { IRoomstayMemberCards } from '@roomstay/core';\nimport { ExistingCardPicker } from './ExistingCardPicker';\nimport AcceptablePaymentCard from '@/components/steps/confirmation/PaymentDetails/AcceptablePaymentCard';\n\ntype VGSInputType = 'card-number' | 'text' | 'card-expiration-date' | 'card-security-code';\n\nfunction StepConfirmationPaymentDetails(props: any, ref: any) {\n    const { hotel } = useCurrentHotel();\n    const member = useMember();\n\n    const [errors, setErrors] = useState<{ [x: string]: string }>({});\n\n    const { t } = useTranslation();\n\n    const { focusElement } = useWindowScroll();\n\n    const vgsInputCss = {\n        fontSize: '13px',\n        lineHeight: '18px',\n        '&::placeholder': {\n            color: '#8B8F9A',\n            opacity: 1,\n        },\n    };\n\n    const {\n        fields: [cardNumber, nameOnCard, expirationDate, securityCode],\n        triggerFieldUpdate,\n        vgsForm,\n    } = useVgsCollect([\n        {\n            label: t(Translation.Step.Confirmation.Inputs.CardNumber),\n            name: 'credit-card',\n            type: 'card-number',\n            vgsProps: {\n                autoComplete: ['cc-number'],\n                successColor: '#4F8A10',\n                errorColor: '#D8000C',\n                showCardIcon: false,\n                placeholder: t(Translation.Step.Confirmation.Inputs.CardNumber) + ' *',\n                validations: ['required', 'validCardNumber'],\n                css: vgsInputCss,\n            },\n        },\n        {\n            label: t(Translation.Step.Confirmation.Inputs.NameOnCard),\n            name: 'card-name',\n            type: 'text',\n            vgsProps: {\n                validations: ['required'],\n                css: vgsInputCss,\n                placeholder: t(Translation.Step.Confirmation.Inputs.NameOnCard) + ' *',\n            },\n        },\n        {\n            label: t(Translation.Step.Confirmation.Inputs.CardExpiry),\n            name: 'expiration-date',\n            type: 'card-expiration-date',\n            vgsProps: {\n                placeholder: t(Translation.Step.Confirmation.Inputs.CardExpiry) + ' *',\n                validations: ['required', 'validCardExpirationDate'],\n                css: vgsInputCss,\n            },\n        },\n        {\n            label: t(Translation.Step.Confirmation.Inputs.SecurityCode),\n            name: 'security-code',\n            type: 'card-security-code',\n            vgsProps: {\n                placeholder: t(Translation.Step.Confirmation.Inputs.SecurityCode) + ' *',\n                validations: ['required', 'validCardSecurityCode'],\n                css: vgsInputCss,\n            },\n        },\n    ]);\n\n    const setErrorsOnFaults = (faults: any) => {\n        const newErrors: { [x: string]: string } = {};\n\n        Object.keys(faults).forEach((input) => {\n            let name = '';\n\n            switch (input) {\n                case 'credit-card':\n                    name = 'Credit Card';\n                    break;\n                case 'expiration-date':\n                    name = 'Expiration Date';\n                    break;\n                case 'security-code':\n                    name = 'Security Code';\n                    break;\n                default:\n                    name = 'Card Name';\n                    break;\n            }\n\n            newErrors[input] = name + ' ' + faults[input].errorMessages[faults[input].errorMessages.length - 1];\n        });\n\n        setErrors(newErrors);\n    };\n\n    useEffect(() => {\n        if (errors && Object.keys(errors).length !== 0 && cardNumber?.ref?.current) {\n            focusElement(cardNumber?.ref?.current);\n        }\n    }, [errors]);\n\n    useImperativeHandle(ref, () => ({\n        getTokenizedCode: () =>\n            new Promise<PaymentCard | IRoomstayMemberCards>((resolve, reject) => {\n                if (vgsForm) {\n                    vgsForm.submit(\n                        '/post',\n                        {\n                            serializer: 'deep',\n                            methods: 'POST',\n                        },\n                        (status: any, response: any) => {\n                            const cardData = JSON.parse(response.data);\n                            const expMatch = cardData['expiration-date'].match(/^(\\d+)\\s*\\/\\s*(\\d+)$/);\n                            if (!expMatch || expMatch[1].length > 2 || (expMatch[2].length !== 4 && expMatch[2].length !== 2)) {\n                                setErrorsOnFaults({\n                                    'expiration-date': {\n                                        errorMessages: ['Invalid - it must be in the format MM / YY or MM / YYYY'],\n                                    },\n                                });\n                                reject('invalid expiration date');\n                                return;\n                            }\n\n                            const expiration = (expMatch[1].length === 1 ? '0' : '') + expMatch[1] + (expMatch[2].length === 2 ? expMatch[2] : expMatch[2].substr(2));\n\n                            const card: any = {\n                                CVV: cardData['security-code'],\n                                Expiry: expiration,\n                                Name: cardData['card-name'],\n                                Number: cardData['credit-card'],\n                                Type: cardNumber.state.cardType,\n                            };\n\n                            resolve(card);\n                        },\n                        (error: any) => {\n                            setErrorsOnFaults(error);\n                            reject(error);\n                        }\n                    );\n                } else {\n                    console.error('VGS not on element, problem has occurred');\n                }\n            }),\n    }));\n\n    const formRef = useRef(null);\n\n    const inputNames = ['credit-card', 'card-name', 'expiration-date', 'security-code'];\n    const cardTypes = (hotel?.paymentCardTypes ?? [])\n        .map((card: string) => {\n            const mapping = SynxisToVGSCardNameMapping[card];\n            if (!mapping) {\n                return null;\n            }\n\n            return {\n                name: SynxisToVGSCardNameMapping[card],\n                status: false,\n            };\n        })\n        .filter((obj) => obj);\n\n    const onMemberCardSelected = (card: IRoomstayMemberCards) => {\n        // TODO:\n    };\n\n    return (\n        <div>\n            <div>{!!member.user && <ExistingCardPicker onCardSelected={onMemberCardSelected} />}</div>\n            <div>\n                {inputNames.map((name) => {\n                    const errorMessage = errors[name];\n                    return (\n                        <AutoAutoHeight open={!!errorMessage} key={name}>\n                            <div className=\"u-flex\">\n                                <Alert type={AlertType.Danger} icon={IconType.Error}>\n                                    <Text type={TextType.Small}>{errorMessage}</Text>\n                                </Alert>\n                            </div>\n                        </AutoAutoHeight>\n                    );\n                })}\n                <div className=\"u-marg-bottom\">\n                    <AcceptablePaymentCard\n                        isCurrent={(cardKey: any) => {\n                            return cardNumber.state.cardType !== null && cardTypes[cardKey].name === cardNumber.state.cardType;\n                        }}\n                        isDefault={(cardKey: any) => {\n                            return cardNumber.state.cardType === null;\n                        }}\n                    />\n                </div>\n                <form ref={formRef}>\n                    <InputGroup dimensions=\"2/2\">\n                        <div className={cardNumber.getClasses()} ref={cardNumber.ref} />\n                        <InputGroup dimensions=\"2/2\">\n                            <div className={expirationDate.getClasses()} ref={expirationDate.ref} />\n                            <div className={securityCode.getClasses()} ref={securityCode.ref} />\n                        </InputGroup>\n                    </InputGroup>\n                    <InputGroup dimensions=\"1\">\n                        <div className={nameOnCard.getClasses()} ref={nameOnCard.ref} />\n                    </InputGroup>\n                </form>\n            </div>\n        </div>\n    );\n}\n\nexport default forwardRef(StepConfirmationPaymentDetails);\n"]}
+{"version":3,"file":"StepConfirmationPaymentDetails.js","sourceRoot":"/","sources":["src/components/steps/confirmation/PaymentDetails/StepConfirmationPaymentDetails.tsx"],"names":[],"mappings":"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","sourcesContent":["import PaymentCard from '@/models/PaymentCard';\nimport React from 'react';\nimport { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport InputGroup from '@/components/generic/InputGroup/InputGroup';\nimport AutoAutoHeight from '@/animations/AutoAutoHeight';\nimport Alert, { AlertType } from '@/components/generic/Alert';\nimport { IconType } from '@/components/generic/Icon/Icon';\nimport Text, { TextType } from '@/components/generic/Text';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\nimport { SynxisToVGSCardNameMapping } from '@/models/Api/HotelDTO';\nimport { useCurrentHotel, useMember, useWindowScroll } from '@frontend/hooks';\nimport { useVgsCollect } from '@/hooks/VGSHooks';\nimport { IRoomstayMemberCards } from '@roomstay/core';\nimport { ExistingCardPicker } from './ExistingCardPicker';\nimport AcceptablePaymentCard from '@/components/steps/confirmation/PaymentDetails/AcceptablePaymentCard';\n\ntype VGSInputType = 'card-number' | 'text' | 'card-expiration-date' | 'card-security-code';\n\nfunction StepConfirmationPaymentDetails(props: any, ref: any) {\n    const { hotel } = useCurrentHotel();\n    const member = useMember();\n\n    const [errors, setErrors] = useState<{ [x: string]: string }>({});\n\n    const { t } = useTranslation();\n\n    const { focusElement } = useWindowScroll();\n\n    const vgsInputCss = {\n        fontSize: '13px',\n        lineHeight: '18px',\n        '&::placeholder': {\n            color: '#8B8F9A',\n            opacity: 1,\n        },\n    };\n\n    const {\n        fields: [cardNumber, nameOnCard, expirationDate, securityCode],\n        triggerFieldUpdate,\n        vgsForm,\n    } = useVgsCollect([\n        {\n            label: t(Translation.Step.Confirmation.Inputs.CardNumber),\n            name: 'credit-card',\n            type: 'card-number',\n            vgsProps: {\n                autoComplete: ['cc-number'],\n                successColor: '#4F8A10',\n                errorColor: '#D8000C',\n                showCardIcon: false,\n                placeholder: t(Translation.Step.Confirmation.Inputs.CardNumber) + ' *',\n                validations: ['required', 'validCardNumber'],\n                css: vgsInputCss,\n            },\n        },\n        {\n            label: t(Translation.Step.Confirmation.Inputs.NameOnCard),\n            name: 'card-name',\n            type: 'text',\n            vgsProps: {\n                validations: ['required'],\n                css: vgsInputCss,\n                placeholder: t(Translation.Step.Confirmation.Inputs.NameOnCard) + ' *',\n            },\n        },\n        {\n            label: t(Translation.Step.Confirmation.Inputs.CardExpiry),\n            name: 'expiration-date',\n            type: 'card-expiration-date',\n            vgsProps: {\n                placeholder: t(Translation.Step.Confirmation.Inputs.CardExpiry) + ' *',\n                validations: ['required', 'validCardExpirationDate'],\n                css: vgsInputCss,\n            },\n        },\n        {\n            label: t(Translation.Step.Confirmation.Inputs.SecurityCode),\n            name: 'security-code',\n            type: 'card-security-code',\n            vgsProps: {\n                placeholder: t(Translation.Step.Confirmation.Inputs.SecurityCode) + ' *',\n                validations: ['required', 'validCardSecurityCode'],\n                css: vgsInputCss,\n            },\n        },\n    ]);\n\n    const setErrorsOnFaults = (faults: any) => {\n        const newErrors: { [x: string]: string } = {};\n\n        Object.keys(faults).forEach((input) => {\n            let name = '';\n\n            switch (input) {\n                case 'credit-card':\n                    name = 'Credit Card';\n                    break;\n                case 'expiration-date':\n                    name = 'Expiration Date';\n                    break;\n                case 'security-code':\n                    name = 'Security Code';\n                    break;\n                default:\n                    name = 'Card Name';\n                    break;\n            }\n\n            newErrors[input] = name + ' ' + faults[input].errorMessages[faults[input].errorMessages.length - 1];\n        });\n\n        setErrors(newErrors);\n    };\n\n    useEffect(() => {\n        if (errors && Object.keys(errors).length !== 0 && cardNumber?.ref?.current) {\n            focusElement(cardNumber?.ref?.current);\n        }\n    }, [errors]);\n\n    useImperativeHandle(ref, () => ({\n        getTokenizedCode: () =>\n            new Promise<PaymentCard | IRoomstayMemberCards>((resolve, reject) => {\n                if (vgsForm) {\n                    vgsForm.submit(\n                        '/post',\n                        {\n                            serializer: 'deep',\n                            methods: 'POST',\n                        },\n                        (status: any, response: any) => {\n                            const cardData = JSON.parse(response.data);\n                            const expMatch = cardData['expiration-date'].match(/^(\\d+)\\s*\\/\\s*(\\d+)$/);\n                            if (!expMatch || expMatch[1].length > 2 || (expMatch[2].length !== 4 && expMatch[2].length !== 2)) {\n                                setErrorsOnFaults({\n                                    'expiration-date': {\n                                        errorMessages: ['Invalid - it must be in the format MM / YY or MM / YYYY'],\n                                    },\n                                });\n                                reject('invalid expiration date');\n                                return;\n                            }\n\n                            const expiration = (expMatch[1].length === 1 ? '0' : '') + expMatch[1] + (expMatch[2].length === 2 ? expMatch[2] : expMatch[2].substr(2));\n\n                            const card: any = {\n                                CVV: cardData['security-code'],\n                                Expiry: expiration,\n                                Name: cardData['card-name'],\n                                Number: cardData['credit-card'],\n                                Type: cardNumber.state.cardType,\n                            };\n\n                            resolve(card);\n                        },\n                        (error: any) => {\n                            setErrorsOnFaults(error);\n                            reject(error);\n                        }\n                    );\n                } else {\n                    console.error('VGS not on element, problem has occurred');\n                }\n            }),\n    }));\n\n    const formRef = useRef(null);\n\n    const inputNames = ['credit-card', 'card-name', 'expiration-date', 'security-code'];\n    const cardTypes = (hotel?.paymentCardTypes ?? [])\n        .map((card: string) => {\n            const mapping = SynxisToVGSCardNameMapping[card];\n            if (!mapping) {\n                return null;\n            }\n\n            return {\n                name: SynxisToVGSCardNameMapping[card],\n                status: false,\n            };\n        })\n        .filter((obj) => obj);\n\n    const onMemberCardSelected = (card: IRoomstayMemberCards) => {\n        // TODO:\n    };\n\n    return (\n        <div>\n            <div>{!!member.user && <ExistingCardPicker onCardSelected={onMemberCardSelected} />}</div>\n            <div>\n                {inputNames.map((name) => {\n                    const errorMessage = errors[name];\n                    return (\n                        <AutoAutoHeight open={!!errorMessage} key={name}>\n                            <div className=\"u-flex\">\n                                <Alert type={AlertType.Danger} icon={IconType.Error}>\n                                    <Text type={TextType.Small}>{errorMessage}</Text>\n                                </Alert>\n                            </div>\n                        </AutoAutoHeight>\n                    );\n                })}\n                <div className=\"u-marg-bottom\">\n                    <AcceptablePaymentCard\n                        isCurrent={(cardKey: any) => {\n                            return cardNumber.state.cardType !== null && cardTypes[cardKey]?.name === cardNumber.state.cardType;\n                        }}\n                        isDefault={(cardKey: any) => {\n                            return cardNumber.state.cardType === null;\n                        }}\n                    />\n                </div>\n                <form ref={formRef}>\n                    <InputGroup dimensions=\"2/2\">\n                        <div className={cardNumber.getClasses()} ref={cardNumber.ref} />\n                        <InputGroup dimensions=\"2/2\">\n                            <div className={expirationDate.getClasses()} ref={expirationDate.ref} />\n                            <div className={securityCode.getClasses()} ref={securityCode.ref} />\n                        </InputGroup>\n                    </InputGroup>\n                    <InputGroup dimensions=\"1\">\n                        <div className={nameOnCard.getClasses()} ref={nameOnCard.ref} />\n                    </InputGroup>\n                </form>\n            </div>\n        </div>\n    );\n}\n\nexport default forwardRef(StepConfirmationPaymentDetails);\n"]}

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

@@ -1,84 +1,61 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PlanpayPaymentMethod = void 0;
-const React = __importStar(require("react"));
-const react_1 = require("react");
+const react_1 = __importDefault(require("react"));
+const react_2 = require("react");
 const contexts_1 = require("../../../contexts/index.js");
 const web_1 = require("@planpay/web");
 const Placeholder_1 = __importDefault(require("../../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 })))));
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("div", { className: "row no-gutters" },
+            react_1.default.createElement("div", { className: "col-md-4" },
+                react_1.default.createElement("div", { className: "d-flex justify-content-center" },
+                    react_1.default.createElement(Placeholder_1.default, { type: "text", w: "md", h: "sm", blink: true })),
+                react_1.default.createElement(Placeholder_1.default, { type: "text", h: "md", blink: true }),
+                react_1.default.createElement(Placeholder_1.default, { type: "text", h: "md", blink: true })),
+            react_1.default.createElement("div", { className: "col-md-4" },
+                react_1.default.createElement("div", { className: "d-flex justify-content-center" },
+                    react_1.default.createElement(Placeholder_1.default, { type: "text", w: "md", h: "sm", blink: true })),
+                react_1.default.createElement(Placeholder_1.default, { type: "text", h: "sm", blink: true }),
+                react_1.default.createElement(Placeholder_1.default, { type: "text", h: "sm", blink: true }),
+                react_1.default.createElement(Placeholder_1.default, { type: "text", h: "sm", blink: true })),
+            react_1.default.createElement("div", { className: "col-md-4" },
+                react_1.default.createElement("div", { className: "d-flex justify-content-center" },
+                    react_1.default.createElement(Placeholder_1.default, { type: "text", w: "md", h: "sm", blink: true })),
+                react_1.default.createElement("div", { className: "d-flex justify-content-center u-marg-top u-marg-bottom" },
+                    react_1.default.createElement(Placeholder_1.default, { type: "text", w: "xs", h: "sm", blink: true, noMarg: true })),
+                react_1.default.createElement("div", { className: "d-flex justify-content-center" },
+                    react_1.default.createElement(Placeholder_1.default, { type: "text", w: "md", h: "sm", blink: true, noMarg: true })),
+                react_1.default.createElement("div", { className: "d-flex justify-content-center u-marg-top u-marg-bottom" },
+                    react_1.default.createElement(Placeholder_1.default, { type: "text", w: "xs", h: "sm", blink: true, noMarg: true })))),
+        react_1.default.createElement("div", { className: "row no-gutters" },
+            react_1.default.createElement("div", { className: "col-md-4" },
+                react_1.default.createElement(Placeholder_1.default, { type: "text", h: "lg", blink: true })),
+            react_1.default.createElement("div", { className: "offset-md-4 col-md-4 d-flex align-items-center" },
+                react_1.default.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 basketContext = (0, react_2.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)(() => {
+    (0, react_2.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)(() => {
+    (0, react_2.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))));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.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_1.default.createElement(PlanpayWidgetLoader, null))));
 };
 exports.PlanpayPaymentMethod = PlanpayPaymentMethod;
 //# sourceMappingURL=PlanpayPaymentMethod.js.map

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

@@ -1 +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"]}
+{"version":3,"file":"PlanpayPaymentMethod.js","sourceRoot":"/","sources":["src/components/steps/confirmation/PlanpayPaymentMethod.tsx"],"names":[],"mappings":"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","sourcesContent":["import 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 />\n                    </div>\n\n                    <Placeholder type=\"text\" h=\"md\" blink />\n                    <Placeholder type=\"text\" h=\"md\" blink />\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 />\n                    </div>\n\n                    <Placeholder type=\"text\" h=\"sm\" blink />\n                    <Placeholder type=\"text\" h=\"sm\" blink />\n                    <Placeholder type=\"text\" h=\"sm\" blink />\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 />\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 noMarg />\n                    </div>\n\n                    <div className=\"d-flex justify-content-center\">\n                        <Placeholder type=\"text\" w=\"md\" h=\"sm\" blink noMarg />\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 noMarg />\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 />\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 />\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.js

@@ -37,8 +37,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
-const react_1 = require("react");
+const react_1 = __importDefault(require("react"));
+const react_2 = require("react");
 const Text_1 = __importStar(require("../../generic/Text"));
 const InputGroup_1 = __importDefault(require("../../generic/InputGroup/InputGroup"));
 const TextBox_1 = __importDefault(require("../../generic/TextBox"));
@@ -63,7 +63,7 @@ const core_1 = require("@roomstay/core");
 const Validation_1 = require("../../../util/Validation");
 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 basketContext = (0, react_2.useContext)(contexts_1.BasketContext);
     const basketRows = basketContext.getAllValidRows();
     const basketAddonRows = basketContext.basketAddonRows;
     const { update, fields } = (0, react_hook_form_1.useFieldArray)({
@@ -73,17 +73,18 @@ const RoomContactDetails = () => {
     const [copyCheckBox, paymentMethod] = watch(['copyCheckBox', 'paymentMethod']);
     const errors = formState.errors;
     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]) {
+    const { roomstayMember: member } = (0, react_2.useContext)(contexts_1.RoomstayMemberContext);
+    (0, react_2.useEffect)(() => {
+        var _a, _b;
+        (_b = (_a = errors.userProfiles) === null || _a === void 0 ? void 0 : _a.forEach) === null || _b === void 0 ? void 0 : _b.call(_a, (_, index) => {
+            var _a;
+            if ((_a = errors.userProfiles) === null || _a === void 0 ? void 0 : _a[index]) {
                 opens[index] = true;
             }
         });
         setOpens(opens.slice(0));
     }, [errors.userProfiles, copyCheckBox]);
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         const getDefaultValue = (index, potentialDefaultValue = '') => {
             return index === 0 ? potentialDefaultValue : '';
         };
@@ -101,14 +102,14 @@ const RoomContactDetails = () => {
             };
         });
         setValue('userProfiles', userProfiles);
-        setValue('copyCheckBox', (basketRows === null || basketRows === void 0 ? void 0 : basketRows.length) && basketRows.length > 1);
+        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 [opens, setOpens] = (0, react_2.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)(() => {
+    (0, react_2.useEffect)(() => {
         if (copyCheckBox)
             fields.forEach((basketRow, index) => {
                 if (index === 0)
@@ -116,9 +117,9 @@ const RoomContactDetails = () => {
                 update(index, getValues(`userProfiles.0`));
             });
     }, [copyCheckBox]);
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         const { unsubscribe } = watch((allFields, { name, type }) => {
-            if (type === 'change' && name.includes('userProfiles') && name.split('.')[1] === '0' && allFields.copyCheckBox) {
+            if (type === 'change' && (name === null || name === void 0 ? void 0 : name.includes('userProfiles')) && name.split('.')[1] === '0' && allFields.copyCheckBox) {
                 fields.map((field, index) => {
                     if (index === 0)
                         return;
@@ -130,20 +131,31 @@ const RoomContactDetails = () => {
             unsubscribe();
         };
     }, [fields]);
-    (0, react_1.useEffect)(() => {
+    (0, react_2.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) => {
+    const renderError = (userProfileIndex) => {
         var _a;
+        const userProfile = (_a = errors.userProfiles) === null || _a === void 0 ? void 0 : _a[userProfileIndex];
+        if (userProfile && formState.submitCount >= 1 && (userProfileIndex === 0 || !copyCheckBox))
+            Object.values(userProfile).map((error, errorIndex) => {
+                return (react_1.default.createElement(AutoAutoHeight_1.default, { key: errorIndex, open: true },
+                    react_1.default.createElement("div", { className: "u-flex" },
+                        react_1.default.createElement(Alert_1.default, { icon: Icon_1.IconType.Error, type: Alert_1.AlertType.Danger, noMargin: errorIndex === Object.keys(userProfile).length - 1 },
+                            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small }, error === null || error === void 0 ? void 0 : error.message)))));
+            });
+        return null;
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null, fields.map((field, index) => {
         const padInputName = (name) => padInputNameByRoomNumber(name, index);
         const getValidationClass = (name) => {
             var _a;
             if (!errors.userProfiles || (copyCheckBox && index >= 1))
-                return null;
+                return;
             if ((_a = errors.userProfiles[index]) === null || _a === void 0 ? void 0 : _a[name]) {
                 return 'error';
             }
@@ -158,45 +170,37 @@ const RoomContactDetails = () => {
         };
         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 },
+        return (react_1.default.createElement("div", { key: field.id },
+            react_1.default.createElement("div", { className: index === 0 ? '' : 'u-marg-bottom--heavy' },
+                react_1.default.createElement("div", { className: "u-marg-bottom", onClick: openExpandable },
+                    react_1.default.createElement("div", { className: "u-flex u-marg-bottom align-items-center" },
+                        react_1.default.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),
+                        index !== 0 && react_1.default.createElement(Icon_1.default, { icon: opens[index] ? Icon_1.IconType.ArrowDown2 : Icon_1.IconType.ArrowUp2, color: Color_1.Color.Grey })),
+                    basketRow && (react_1.default.createElement("div", { className: "u-marg-bottom" },
+                        react_1.default.createElement(Text_1.default, null,
+                            react_1.default.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: {
+                        react_1.default.createElement("div", { className: "step-one-status--dates u-flex justify-content-start" },
+                            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Accent },
+                                react_1.default.createElement("strong", null, basketRow.getStartDate().format('ddd, MMM D'))),
+                            react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowRight2, size: "18px" }),
+                            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Accent },
+                                react_1.default.createElement("strong", null, basketRow.getEndDate().format('ddd, MMM D')))))),
+                    renderError(index)),
+                react_1.default.createElement("div", { className: "room-contact-details--row", style: { maxHeight: opens[index] ? undefined : 0 } },
+                    react_1.default.createElement("div", { className: "u-marg-bottom--heavy" },
+                        react_1.default.createElement("div", { className: "u-marg-bottom--light" },
+                            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                                react_1.default.createElement("strong", null, t(Translation_1.Translation.Step.Confirmation.ContactInfo)))),
+                        react_1.default.createElement(InputGroup_1.default, { dimensions: "2/2" },
+                            react_1.default.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'),
@@ -205,7 +209,7 @@ const RoomContactDetails = () => {
                                     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: {
+                            react_1.default.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'),
@@ -214,8 +218,8 @@ const RoomContactDetails = () => {
                                     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: {
+                        react_1.default.createElement(InputGroup_1.default, { dimensions: "2/2" },
+                            react_1.default.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'),
@@ -228,7 +232,7 @@ const RoomContactDetails = () => {
                                     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: {
+                            E164PhoneNumberFieldFeature_1.default.isActive() ? (react_1.default.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) }),
@@ -246,11 +250,11 @@ const RoomContactDetails = () => {
                                         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) => {
+                                    return (react_1.default.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: {
+                                } })) : (react_1.default.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'),
@@ -259,12 +263,12 @@ const RoomContactDetails = () => {
                                     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: {
+                    react_1.default.createElement("div", { className: "" },
+                        react_1.default.createElement("div", { className: "u-marg-bottom--light" },
+                            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                                react_1.default.createElement("strong", null, t(Translation_1.Translation.Step.Confirmation.Address)))),
+                        react_1.default.createElement(InputGroup_1.default, { dimensions: "3/1" },
+                            react_1.default.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'),
@@ -273,7 +277,7 @@ const RoomContactDetails = () => {
                                     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: {
+                            react_1.default.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'),
@@ -282,8 +286,8 @@ const RoomContactDetails = () => {
                                     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: {
+                        react_1.default.createElement(InputGroup_1.default, { dimensions: "2/2" },
+                            react_1.default.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'),
@@ -292,21 +296,21 @@ const RoomContactDetails = () => {
                                     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: {
+                            react_1.default.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) => {
+                                    return (react_1.default.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));
+                react_1.default.createElement(LineBreak_1.default, null)),
+            fields.length > 1 && index === 0 ? (react_1.default.createElement("div", { className: "u-marg-bottom--heavy" },
+                react_1.default.createElement(Checkbox_1.default, Object.assign({ label: t(Translation_1.Translation.Step.Confirmation.ApplySameInfoToOtherRooms) }, register('copyCheckBox'))))) : null));
     })));
 };
 exports.default = RoomContactDetails;