@roomstay/frontend 2.10.0 → 2.10.1-0

package/dist/src/components/members/SignInModal/ExternalMemberModal.js

@@ -45,6 +45,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExternalMemberModelFieldType = void 0;
 const core_1 = require("@roomstay/core");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = __importStar(require("react"));
@@ -52,6 +53,8 @@ const react_hook_form_1 = require("react-hook-form");
 const react_i18next_1 = require("react-i18next");
 const BookingAPI_1 = __importDefault(require("../../../api/BookingAPI"));
 const BEButton_1 = __importDefault(require("../../generic/BEButton"));
+const Checkbox_1 = __importDefault(require("../../generic/Checkbox/Checkbox"));
+const EnhancedPhoneNumberField_1 = __importDefault(require("../../generic/custom/EnhancedPhoneNumberField/EnhancedPhoneNumberField"));
 const Headline_1 = __importDefault(require("../../generic/Headline"));
 const Icon_1 = require("../../generic/Icon/Icon");
 const InputGroup_1 = __importDefault(require("../../generic/InputGroup/InputGroup"));
@@ -61,22 +64,30 @@ const Text_1 = __importStar(require("../../generic/Text"));
 const TextBox_1 = __importDefault(require("../../generic/TextBox"));
 const contexts_1 = require("../../../contexts");
 const hooks_1 = require("../../../hooks");
+const E164PhoneNumberFieldFeature_1 = __importDefault(require("../../../providers/feature/E164PhoneNumberFieldFeature"));
 const ImageProvider_1 = __importStar(require("../../../providers/ImageProvider"));
 const Translation_1 = require("../../../translations/Translation");
 const Color_1 = require("../../../util/Color");
 const ExternalMemberModal_module_scss_1 = __importDefault(require("./ExternalMemberModal.module.scss"));
+var ExternalMemberModelFieldType;
+(function (ExternalMemberModelFieldType) {
+    ExternalMemberModelFieldType["TextBox"] = "TextBox";
+    ExternalMemberModelFieldType["CheckBox"] = "CheckBox";
+    ExternalMemberModelFieldType["Phone"] = "Phone";
+})(ExternalMemberModelFieldType || (exports.ExternalMemberModelFieldType = ExternalMemberModelFieldType = {}));
 const ExternalMemberModal = (props) => {
     var _a;
     const { hotel } = (0, hooks_1.useCurrentHotel)();
     const basketContext = (0, react_1.useContext)(contexts_1.BasketContext);
     const { signUserIn, closeMemberSignupModal } = (0, react_1.useContext)(contexts_1.CompanyContext);
     const { t } = (0, react_i18next_1.useTranslation)();
+    const formMethods = (0, react_hook_form_1.useFormContext)();
     const [isLoading, setIsLoading] = (0, react_1.useState)(false);
     const [errorMessage, setErrorMessage] = (0, react_1.useState)('');
-    const formMethods = (0, react_hook_form_1.useForm)();
     const modalPrimaryColor = (hotel === null || hotel === void 0 ? void 0 : hotel.memberOnlyModalUsePrimaryColor) ? Color_1.Color.Accent : Color_1.Color.Success;
     const memberOnlySignupLink = (_a = hotel === null || hotel === void 0 ? void 0 : hotel.memberOnlySignupLinks) === null || _a === void 0 ? void 0 : _a[props.provider];
     const getValidationClass = (name) => {
+        console.log(formMethods.formState, formMethods.getValues());
         if (formMethods.formState.errors) {
             if (formMethods.formState.errors[name]) {
                 return 'error';
@@ -135,11 +146,39 @@ const ExternalMemberModal = (props) => {
                     props.subTitle && react_1.default.createElement(Text_1.default, { className: "u-marg-top external-member-modal-sub-title" }, props.subTitle),
                     react_1.default.createElement("form", { onSubmit: formMethods.handleSubmit(onSubmit) },
                         props.fields.map((field) => {
-                            const isRequired = field.required !== false; // Default to true if not specified
-                            const inputProps = Object.assign({ iconProps: { color: Color_1.Color.DarkGrey }, icon: field.icon, inputProps: { disabled: isLoading }, placeholder: field.label, wide: true, required: isRequired, validationStatus: getValidationClass(field.name) }, formMethods.register(field.name, { required: isRequired }));
-                            return (react_1.default.createElement("div", { className: "u-marg-top u-marg-bottom", key: field.name },
-                                react_1.default.createElement(InputGroup_1.default, { dimensions: "1" }, field.isMasked ? react_1.default.createElement(PasswordBox_1.PasswordBox, Object.assign({}, inputProps)) : react_1.default.createElement(TextBox_1.default, Object.assign({}, inputProps))),
-                                field.helperText && (react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.DarkGrey }, field.helperText))));
+                            const isRequired = field.required !== false;
+                            const validationStatus = getValidationClass(field.name);
+                            const register = formMethods.register(field.name, { required: isRequired });
+                            const inputProps = Object.assign({ iconProps: { color: Color_1.Color.DarkGrey }, icon: field.icon, inputProps: { disabled: isLoading }, placeholder: field.label, wide: true, required: isRequired, validationStatus }, register);
+                            const renderCheckbox = () => (react_1.default.createElement("div", { className: "u-marg-top", key: field.name },
+                                react_1.default.createElement(InputGroup_1.default, { dimensions: "1" },
+                                    react_1.default.createElement(Checkbox_1.default, Object.assign({ label: field.label }, register)))));
+                            const renderPhone = () => (react_1.default.createElement(InputGroup_1.default, { dimensions: "1", key: field.name }, E164PhoneNumberFieldFeature_1.default.isActive() ? (react_1.default.createElement(react_hook_form_1.Controller, { control: formMethods.control, name: field.name, rules: {
+                                    required: {
+                                        value: isRequired,
+                                        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: controllerField }) => (react_1.default.createElement(EnhancedPhoneNumberField_1.default, Object.assign({}, controllerField, register, { validationStatus: validationStatus }))) })) : (react_1.default.createElement(TextBox_1.default, Object.assign({}, inputProps)))));
+                            const renderTextInput = () => {
+                                return (react_1.default.createElement("div", { className: "u-marg-top u-marg-bottom", key: field.name },
+                                    react_1.default.createElement(InputGroup_1.default, { dimensions: "1" }, field.isMasked ? react_1.default.createElement(PasswordBox_1.PasswordBox, Object.assign({}, inputProps)) : react_1.default.createElement(TextBox_1.default, Object.assign({}, inputProps))),
+                                    field.helperText && (react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.DarkGrey }, field.helperText))));
+                            };
+                            if (field.type === ExternalMemberModelFieldType.CheckBox) {
+                                return renderCheckbox();
+                            }
+                            if (field.type === ExternalMemberModelFieldType.Phone) {
+                                return renderPhone();
+                            }
+                            return renderTextInput();
                         }),
                         react_1.default.createElement(BEButton_1.default, { isLoading: isLoading, htmlType: "submit", className: "u-marg-top external-member-modal-submit-btn", size: "normal", filled: true, primary: hotel === null || hotel === void 0 ? void 0 : hotel.memberOnlyModalUsePrimaryColor, success: !(hotel === null || hotel === void 0 ? void 0 : hotel.memberOnlyModalUsePrimaryColor), stopIconAnimation: true, icon: Icon_1.IconType.ArrowRight, iconPosition: "right", wide: true }, t(Translation_1.Translation.ExternalMemberPopup.Submit)),
                         react_1.default.createElement("div", { className: "u-marg-top" },

package/dist/src/components/members/SignInModal/ExternalMemberModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExternalMemberModal.js","sourceRoot":"/","sources":["src/components/members/SignInModal/ExternalMemberModal.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yCAA4F;AAC5F,4DAAoC;AAEpC,+CAAoD;AACpD,qDAA4E;AAC5E,iDAA+C;AAE/C,kEAAmC;AACnC,6EAAqD;AACrD,6EAAqD;AACrD,yDAA0D;AAC1D,4FAAoE;AACpE,sFAAsF;AACtF,8EAA2E;AAC3E,kEAA2D;AAC3D,2EAAqE;AACrE,yCAA2D;AAC3D,mCAA0C;AAE1C,2EAAqE;AACrE,4DAAyD;AACzD,wCAAqC;AAErC,wGAAuD;AAyBvD,MAAM,mBAAmB,GAAG,CAA8C,KAAkC,EAAE,EAAE;;IAC5G,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,uBAAe,GAAE,CAAC;IACpC,MAAM,aAAa,GAAG,IAAA,kBAAU,EAAC,wBAAa,CAAC,CAAC;IAChD,MAAM,EAAE,UAAU,EAAE,sBAAsB,EAAE,GAAG,IAAA,kBAAU,EAAC,yBAAc,CAAC,CAAC;IAC1E,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAC/B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAC,EAAE,CAAC,CAAC;IACrD,MAAM,WAAW,GAAG,IAAA,yBAAO,GAAK,CAAC;IACjC,MAAM,iBAAiB,GAAG,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,8BAA8B,EAAC,CAAC,CAAC,aAAK,CAAC,MAAM,CAAC,CAAC,CAAC,aAAK,CAAC,OAAO,CAAC;IAC/F,MAAM,oBAAoB,GAAG,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,qBAAqB,0CAAG,KAAK,CAAC,QAAQ,CAAC,CAAC;IAE5E,MAAM,kBAAkB,GAAG,CAAC,IAAa,EAAE,EAAE;QACzC,IAAI,WAAW,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC;YAC/B,IAAI,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC;gBACrC,OAAO,OAAO,CAAC;YACnB,CAAC;iBAAM,CAAC;gBACJ,OAAO,SAAS,CAAC;YACrB,CAAC;QACL,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAqB,CAAO,MAAM,EAAE,EAAE;;QAChD,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,eAAe,CAAC,EAAE,CAAC,CAAC;QAEpB,IAAI,CAAC;YACD,MAAM,OAAO,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAiB,CAAC;YACzC,MAAM,MAAM,GAAG,MAAM,oBAAG,CAAC,MAAM,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;YAE9E,IAAI,MAAM,IAAI,MAAM,CAAC,QAAQ,EAAE,CAAC;gBAC5B,MAAM,UAAU,CAAC;oBACb,SAAS,EAAE,IAAI,EAAE,6BAA6B;oBAC9C,YAAY,EAAE,MAAM,CAAC,QAAQ;oBAC7B,cAAc,EAAE,KAAK,CAAC,QAAQ;oBAC9B,SAAS,EAAE,MAAM,CAAC,SAAS;oBAC3B,QAAQ,EAAE,MAAM,CAAC,QAAQ;oBACzB,KAAK,EAAE,MAAM,CAAC,KAAK;iBACtB,CAAC,CAAC;gBAEH,2BAA2B;gBAC3B,MAAA,aAAa,CAAC,iBAAiB,0CAAE,OAAO,CACpC,CAAC,GAAG,EAAE,EAAE,CACJ,CAAC,GAAG,CAAC,gBAAgB,GAAG;oBACpB,SAAS,EAAE,MAAM,CAAC,SAAS;oBAC3B,QAAQ,EAAE,MAAM,CAAC,QAAQ;oBACzB,KAAK,EAAE,MAAM,CAAC,KAAK;iBACtB,CAAC,CACT,CAAC;YACN,CAAC;iBAAM,CAAC;gBACJ,eAAe,CAAC,CAAC,CAAC,yBAAW,CAAC,mBAAmB,CAAC,aAAa,CAAC,CAAC,CAAC;YACtE,CAAC;QACL,CAAC;QAAC,OAAO,CAAM,EAAE,CAAC;YACd,IAAI,CAAC,CAAC,IAAA,aAAM,EAAW,SAAS,CAAC,CAAC,EAAE,CAAC;gBACjC,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;YAC/B,CAAC;iBAAM,CAAC;gBACJ,MAAM,CAAC,CAAC;YACZ,CAAC;QACL,CAAC;gBAAS,CAAC;YACP,YAAY,CAAC,KAAK,CAAC,CAAC;QACxB,CAAC;IACL,CAAC,CAAA,CAAC;IAEF,OAAO,CACH,8BAAC,qBAAW,IAAC,IAAI,EAAE,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE,sBAAsB,EAAE,IAAI,EAAE,6BAAe,CAAC,MAAM,EAAE,WAAW;QACvG,uCAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,yCAAM,CAAC,uBAAuB,CAAC,EAAE,KAAK,EAAE,yBAAyB,KAAK,CAAC,QAAQ,EAAE,CAAC;YACzG,uCAAK,SAAS,EAAC,sCAAsC;gBACjD,uCACI,GAAG,EAAE,uBAAa,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,EAAE,yBAAS,CAAC,QAAQ,CAAC,EAC/D,GAAG,EAAE,KAAK,CAAC,KAAK,EAChB,SAAS,EAAE,yCAAM,CAAC,uBAAuB,CAAC,EAC1C,KAAK,EAAE,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,GACvC,CACA;YAEN,uCAAK,SAAS,EAAC,qDAAqD;gBAChE,uCAAK,SAAS,EAAC,OAAO;oBAClB,8BAAC,kBAAQ,IAAC,SAAS,EAAC,6BAA6B,EAAC,IAAI,QAAC,KAAK,EAAE,iBAAiB,IAC1E,KAAK,CAAC,KAAK,CACL;oBACV,KAAK,CAAC,QAAQ,IAAI,8BAAC,cAAI,IAAC,SAAS,EAAC,4CAA4C,IAAE,KAAK,CAAC,QAAQ,CAAQ;oBAEvG,wCAAM,QAAQ,EAAE,WAAW,CAAC,YAAY,CAAC,QAAQ,CAAC;wBAC7C,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;4BACxB,MAAM,UAAU,GAAG,KAAK,CAAC,QAAQ,KAAK,KAAK,CAAC,CAAC,mCAAmC;4BAChF,MAAM,UAAU,mBACZ,SAAS,EAAE,EAAE,KAAK,EAAE,aAAK,CAAC,QAAQ,EAAE,EACpC,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,UAAU,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,EACnC,WAAW,EAAE,KAAK,CAAC,KAAK,EACxB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,UAAU,EACpB,gBAAgB,EAAE,kBAAkB,CAAC,KAAK,CAAC,IAAI,CAAC,IAC7C,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAe,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,CAC3E,CAAC;4BAEF,OAAO,CACH,uCAAK,SAAS,EAAC,0BAA0B,EAAC,GAAG,EAAE,KAAK,CAAC,IAAI;gCACrD,8BAAC,oBAAU,IAAC,UAAU,EAAC,GAAG,IAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,8BAAC,yBAAW,oBAAK,UAAU,EAAI,CAAC,CAAC,CAAC,8BAAC,iBAAO,oBAAK,UAAU,EAAI,CAAc;gCACvH,KAAK,CAAC,UAAU,IAAI,CACjB,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,aAAK,CAAC,QAAQ,IAC5C,KAAK,CAAC,UAAU,CACd,CACV,CACC,CACT,CAAC;wBACN,CAAC,CAAC;wBAEF,8BAAC,kBAAQ,IACL,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAC,QAAQ,EACjB,SAAS,EAAC,6CAA6C,EACvD,IAAI,EAAC,QAAQ,EACb,MAAM,QACN,OAAO,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,8BAA8B,EAC9C,OAAO,EAAE,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,8BAA8B,CAAA,EAC/C,iBAAiB,QACjB,IAAI,EAAE,eAAQ,CAAC,UAAU,EACzB,YAAY,EAAC,OAAO,EACpB,IAAI,UAEH,CAAC,CAAC,yBAAW,CAAC,mBAAmB,CAAC,MAAM,CAAC,CACnC;wBACX,uCAAK,SAAS,EAAC,YAAY;4BACvB,8BAAC,cAAI,IAAC,IAAI,QAAC,KAAK,EAAE,aAAK,CAAC,MAAM,IACzB,YAAY,CACV,CACL,CACH;oBAEN,oBAAoB,IAAI,CACrB,uCAAK,SAAS,EAAC,8BAA8B;wBACzC,uCAAK,SAAS,EAAC,YAAY,GAAO;wBAClC,uCAAK,SAAS,EAAC,wDAAwD;4BACnE,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,SAAS,EAAC,2BAA2B,EAAC,KAAK,EAAE,aAAK,CAAC,QAAQ,IAClF,CAAC,CAAC,yBAAW,CAAC,mBAAmB,CAAC,eAAe,CAAC,CAChD;4BACP,8BAAC,kBAAQ,IACL,SAAS,EAAC,kCAAkC,EAC5C,QAAQ,EAAC,QAAQ,EACjB,IAAI,EAAC,QAAQ,EACb,MAAM,QACN,OAAO,QACP,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,oBAAoB,EAAE,QAAQ,CAAC,IAEzD,CAAC,CAAC,yBAAW,CAAC,mBAAmB,CAAC,MAAM,CAAC,CACnC,CACT,CACJ,CACT,CACC,CACJ,CACJ,CACI,CACjB,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,mBAAmB,CAAC","sourcesContent":["import { EMembershipProvider, IMemberVerification, IMessage, nameof } from '@roomstay/core';\nimport classNames from 'classnames';\nimport { Property } from 'csstype';\nimport React, { useContext, useState } from 'react';\nimport { FieldValues, Path, SubmitHandler, useForm } from 'react-hook-form';\nimport { useTranslation } from 'react-i18next';\n\nimport API from '@/api/BookingAPI';\nimport BEButton from '@/components/generic/BEButton';\nimport Headline from '@/components/generic/Headline';\nimport { IconType } from '@/components/generic/Icon/Icon';\nimport InputGroup from '@/components/generic/InputGroup/InputGroup';\nimport SimpleModal, { SimpleModalSize } from '@/components/generic/modal/SimpleModal';\nimport { PasswordBox } from '@/components/generic/PasswordBox/PasswordBox';\nimport Text, { TextType } from '@/components/generic/Text';\nimport TextBox, { TextBoxProps } from '@/components/generic/TextBox';\nimport { BasketContext, CompanyContext } from '@/contexts';\nimport { useCurrentHotel } from '@/hooks';\nimport UserProfile from '@/models/UserProfile';\nimport ImageProvider, { ImageSize } from '@/providers/ImageProvider';\nimport { Translation } from '@/translations/Translation';\nimport { Color } from '@/util/Color';\n\nimport styles from './ExternalMemberModal.module.scss';\n\nexport type CommonMemberModalProps = {\n    title: string;\n    subTitle?: string;\n    image: string;\n    isOpen: boolean;\n    imageSize: Property.ObjectFit;\n    provider: EMembershipProvider;\n};\n\ntype ExternalMemberModalProps<T extends FieldValues> = CommonMemberModalProps & {\n    fields: ExternalMemberModelField<T>[];\n};\n\ntype ExternalMemberModelField<T extends FieldValues> = {\n    name: keyof T & string;\n    icon: IconType;\n    label: string;\n    profileMapping?: keyof UserProfile;\n    isMasked: boolean;\n    required?: boolean;\n    helperText?: string;\n};\n\nconst ExternalMemberModal = <T extends FieldValues & IMemberVerification>(props: ExternalMemberModalProps<T>) => {\n    const { hotel } = useCurrentHotel();\n    const basketContext = useContext(BasketContext);\n    const { signUserIn, closeMemberSignupModal } = useContext(CompanyContext);\n    const { t } = useTranslation();\n    const [isLoading, setIsLoading] = useState(false);\n    const [errorMessage, setErrorMessage] = useState('');\n    const formMethods = useForm<T>();\n    const modalPrimaryColor = hotel?.memberOnlyModalUsePrimaryColor ? Color.Accent : Color.Success;\n    const memberOnlySignupLink = hotel?.memberOnlySignupLinks?.[props.provider];\n\n    const getValidationClass = (name: keyof T) => {\n        if (formMethods.formState.errors) {\n            if (formMethods.formState.errors[name]) {\n                return 'error';\n            } else {\n                return 'success';\n            }\n        }\n    };\n\n    const onSubmit: SubmitHandler<T> = async (fields) => {\n        setIsLoading(true);\n        setErrorMessage('');\n\n        try {\n            const hotelId = hotel?.hotelID as string;\n            const member = await API.Member.verifyMember(hotelId, props.provider, fields);\n\n            if (member && member.memberId) {\n                await signUserIn({\n                    saveState: true, //TODO: why was this false???\n                    memberNumber: member.memberId,\n                    memberProvider: props.provider,\n                    firstName: fields.firstName,\n                    lastName: fields.lastName,\n                    email: fields.email,\n                });\n\n                // Preset checkout defaults\n                basketContext.currentBasketRows?.forEach(\n                    (row) =>\n                        (row.checkoutDefaults = {\n                            firstName: fields.firstName,\n                            lastName: fields.lastName,\n                            email: fields.email,\n                        })\n                );\n            } else {\n                setErrorMessage(t(Translation.ExternalMemberPopup.InvalidMember));\n            }\n        } catch (e: any) {\n            if (e[nameof<IMessage>('Message')]) {\n                setErrorMessage(e.Message);\n            } else {\n                throw e;\n            }\n        } finally {\n            setIsLoading(false);\n        }\n    };\n\n    return (\n        <SimpleModal open={props.isOpen} onClose={closeMemberSignupModal} size={SimpleModalSize.Normal} alignCenter>\n            <div className={classNames(styles['external-member-modal'], 'row', `external-member-modal-${props.provider}`)}>\n                <div className=\"col-md-6 external-member-modal-image\">\n                    <img\n                        src={ImageProvider.resizeImage(props.image, ImageSize.Original)}\n                        alt={props.title}\n                        className={styles['external-member-image']}\n                        style={{ objectFit: props.imageSize }}\n                    />\n                </div>\n\n                <div className=\"col-md-6 u-pad--heavy external-member-modal-content\">\n                    <div className=\"u-pad\">\n                        <Headline className=\"external-member-modal-title\" bold color={modalPrimaryColor}>\n                            {props.title}\n                        </Headline>\n                        {props.subTitle && <Text className=\"u-marg-top external-member-modal-sub-title\">{props.subTitle}</Text>}\n\n                        <form onSubmit={formMethods.handleSubmit(onSubmit)}>\n                            {props.fields.map((field) => {\n                                const isRequired = field.required !== false; // Default to true if not specified\n                                const inputProps: TextBoxProps = {\n                                    iconProps: { color: Color.DarkGrey },\n                                    icon: field.icon,\n                                    inputProps: { disabled: isLoading },\n                                    placeholder: field.label,\n                                    wide: true,\n                                    required: isRequired,\n                                    validationStatus: getValidationClass(field.name),\n                                    ...formMethods.register(field.name as Path<T>, { required: isRequired }),\n                                };\n\n                                return (\n                                    <div className=\"u-marg-top u-marg-bottom\" key={field.name}>\n                                        <InputGroup dimensions=\"1\">{field.isMasked ? <PasswordBox {...inputProps} /> : <TextBox {...inputProps} />}</InputGroup>\n                                        {field.helperText && (\n                                            <Text type={TextType.Small} color={Color.DarkGrey}>\n                                                {field.helperText}\n                                            </Text>\n                                        )}\n                                    </div>\n                                );\n                            })}\n\n                            <BEButton\n                                isLoading={isLoading}\n                                htmlType=\"submit\"\n                                className=\"u-marg-top external-member-modal-submit-btn\"\n                                size=\"normal\"\n                                filled\n                                primary={hotel?.memberOnlyModalUsePrimaryColor}\n                                success={!hotel?.memberOnlyModalUsePrimaryColor}\n                                stopIconAnimation\n                                icon={IconType.ArrowRight}\n                                iconPosition=\"right\"\n                                wide\n                            >\n                                {t(Translation.ExternalMemberPopup.Submit)}\n                            </BEButton>\n                            <div className=\"u-marg-top\">\n                                <Text bold color={Color.Danger}>\n                                    {errorMessage}\n                                </Text>\n                            </div>\n                        </form>\n\n                        {memberOnlySignupLink && (\n                            <div className=\"external-member-modal-signup\">\n                                <div className=\"line-break\"></div>\n                                <div className=\"u-marg-top u-flex align-items-center u-justify-between\">\n                                    <Text type={TextType.Small} className=\"u-flex align-items-center\" color={Color.DarkGrey}>\n                                        {t(Translation.ExternalMemberPopup.DontHaveAccount)}\n                                    </Text>\n                                    <BEButton\n                                        className=\"external-member-modal-signup-btn\"\n                                        htmlType=\"button\"\n                                        size=\"normal\"\n                                        filled\n                                        primary\n                                        onClick={() => window.open(memberOnlySignupLink, '_blank')}\n                                    >\n                                        {t(Translation.ExternalMemberPopup.SignUp)}\n                                    </BEButton>\n                                </div>\n                            </div>\n                        )}\n                    </div>\n                </div>\n            </div>\n        </SimpleModal>\n    );\n};\n\nexport default ExternalMemberModal;\n"]}
+{"version":3,"file":"ExternalMemberModal.js","sourceRoot":"/","sources":["src/components/members/SignInModal/ExternalMemberModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { EMembershipProvider, IMemberVerification, IMessage, nameof } from '@roomstay/core';\nimport classNames from 'classnames';\nimport { Property } from 'csstype';\nimport React, { useContext, useState } from 'react';\nimport { Controller, FieldValues, Path, SubmitHandler, useFormContext } from 'react-hook-form';\nimport { useTranslation } from 'react-i18next';\n\nimport API from '@/api/BookingAPI';\nimport BEButton from '@/components/generic/BEButton';\nimport Checkbox from '@/components/generic/Checkbox/Checkbox';\nimport EnhancedPhoneNumberField from '@/components/generic/custom/EnhancedPhoneNumberField/EnhancedPhoneNumberField';\nimport Headline from '@/components/generic/Headline';\nimport { IconType } from '@/components/generic/Icon/Icon';\nimport InputGroup from '@/components/generic/InputGroup/InputGroup';\nimport SimpleModal, { SimpleModalSize } from '@/components/generic/modal/SimpleModal';\nimport { PasswordBox } from '@/components/generic/PasswordBox/PasswordBox';\nimport Text, { TextType } from '@/components/generic/Text';\nimport TextBox, { TextBoxProps } from '@/components/generic/TextBox';\nimport { BasketContext, CompanyContext } from '@/contexts';\nimport { useCurrentHotel } from '@/hooks';\nimport UserProfile from '@/models/UserProfile';\nimport E164PhoneNumberFieldFeature from '@/providers/feature/E164PhoneNumberFieldFeature';\nimport ImageProvider, { ImageSize } from '@/providers/ImageProvider';\nimport { Translation } from '@/translations/Translation';\nimport { Color } from '@/util/Color';\n\nimport styles from './ExternalMemberModal.module.scss';\n\nexport type CommonMemberModalProps = {\n    title: string;\n    subTitle?: string;\n    image: string;\n    isOpen: boolean;\n    imageSize: Property.ObjectFit;\n    provider: EMembershipProvider;\n};\n\nexport type ExternalMemberModalProps<T extends FieldValues> = CommonMemberModalProps & {\n    fields: ExternalMemberModelField<T>[];\n};\n\nexport enum ExternalMemberModelFieldType {\n    TextBox = 'TextBox',\n    CheckBox = 'CheckBox',\n    Phone = 'Phone',\n}\nexport type ExternalMemberModelField<T extends FieldValues> = {\n    name: keyof T & string;\n    icon: IconType;\n    label: string;\n    profileMapping?: keyof UserProfile;\n    isMasked?: boolean;\n    required?: boolean;\n    helperText?: string;\n    type?: ExternalMemberModelFieldType;\n};\n\nconst ExternalMemberModal = <T extends FieldValues & IMemberVerification>(props: ExternalMemberModalProps<T>) => {\n    const { hotel } = useCurrentHotel();\n    const basketContext = useContext(BasketContext);\n    const { signUserIn, closeMemberSignupModal } = useContext(CompanyContext);\n    const { t } = useTranslation();\n    const formMethods: any = useFormContext<Record<string, string>>();\n\n    const [isLoading, setIsLoading] = useState(false);\n    const [errorMessage, setErrorMessage] = useState('');\n\n    const modalPrimaryColor = hotel?.memberOnlyModalUsePrimaryColor ? Color.Accent : Color.Success;\n    const memberOnlySignupLink = hotel?.memberOnlySignupLinks?.[props.provider];\n\n    const getValidationClass = (name: keyof T) => {\n        console.log(formMethods.formState, formMethods.getValues());\n        if (formMethods.formState.errors) {\n            if (formMethods.formState.errors[name]) {\n                return 'error';\n            } else {\n                return 'success';\n            }\n        }\n    };\n\n    const onSubmit: SubmitHandler<T> = async (fields) => {\n        setIsLoading(true);\n        setErrorMessage('');\n\n        try {\n            const hotelId = hotel?.hotelID as string;\n            const member = await API.Member.verifyMember(hotelId, props.provider, fields);\n\n            if (member && member.memberId) {\n                await signUserIn({\n                    saveState: true, //TODO: why was this false???\n                    memberNumber: member.memberId,\n                    memberProvider: props.provider,\n                    firstName: fields.firstName,\n                    lastName: fields.lastName,\n                    email: fields.email,\n                });\n\n                // Preset checkout defaults\n                basketContext.currentBasketRows?.forEach(\n                    (row) =>\n                        (row.checkoutDefaults = {\n                            firstName: fields.firstName,\n                            lastName: fields.lastName,\n                            email: fields.email,\n                        })\n                );\n            } else {\n                setErrorMessage(t(Translation.ExternalMemberPopup.InvalidMember));\n            }\n        } catch (e: any) {\n            if (e[nameof<IMessage>('Message')]) {\n                setErrorMessage(e.Message);\n            } else {\n                throw e;\n            }\n        } finally {\n            setIsLoading(false);\n        }\n    };\n\n    return (\n        <SimpleModal open={props.isOpen} onClose={closeMemberSignupModal} size={SimpleModalSize.Normal} alignCenter>\n            <div className={classNames(styles['external-member-modal'], 'row', `external-member-modal-${props.provider}`)}>\n                <div className=\"col-md-6 external-member-modal-image\">\n                    <img\n                        src={ImageProvider.resizeImage(props.image, ImageSize.Original)}\n                        alt={props.title}\n                        className={styles['external-member-image']}\n                        style={{ objectFit: props.imageSize }}\n                    />\n                </div>\n\n                <div className=\"col-md-6 u-pad--heavy external-member-modal-content\">\n                    <div className=\"u-pad\">\n                        <Headline className=\"external-member-modal-title\" bold color={modalPrimaryColor}>\n                            {props.title}\n                        </Headline>\n                        {props.subTitle && <Text className=\"u-marg-top external-member-modal-sub-title\">{props.subTitle}</Text>}\n\n                        <form onSubmit={formMethods.handleSubmit(onSubmit)}>\n                            {props.fields.map((field) => {\n                                const isRequired = field.required !== false;\n                                const validationStatus = getValidationClass(field.name);\n                                const register = formMethods.register(field.name as Path<T>, { required: isRequired });\n                                const inputProps: TextBoxProps = {\n                                    iconProps: { color: Color.DarkGrey },\n                                    icon: field.icon,\n                                    inputProps: { disabled: isLoading },\n                                    placeholder: field.label,\n                                    wide: true,\n                                    required: isRequired,\n                                    validationStatus,\n                                    ...register,\n                                };\n                                const renderCheckbox = () => (\n                                    <div className=\"u-marg-top\" key={field.name}>\n                                        <InputGroup dimensions=\"1\">\n                                            <Checkbox label={field.label} {...register} />\n                                        </InputGroup>\n                                    </div>\n                                );\n\n                                const renderPhone = () => (\n                                    <InputGroup dimensions=\"1\" key={field.name}>\n                                        {E164PhoneNumberFieldFeature.isActive() ? (\n                                            <Controller\n                                                control={formMethods.control}\n                                                name={field.name}\n                                                rules={{\n                                                    required: {\n                                                        value: isRequired,\n                                                        message: t(Translation.Step.Confirmation.Inputs.Required, {\n                                                            field: t(Translation.Step.Confirmation.Inputs.Phone),\n                                                        }),\n                                                    },\n                                                    minLength: { value: 5, message: 'Phone number is required' },\n                                                    maxLength: { value: 17, message: 'Phone number is too long' },\n                                                    pattern: {\n                                                        value: /^[1-9]( |\\d){1,15}$/g,\n                                                        message: 'Incorrect phone number entered',\n                                                    },\n                                                }}\n                                                render={({ field: controllerField }) => (\n                                                    <EnhancedPhoneNumberField {...controllerField} {...register} validationStatus={validationStatus} />\n                                                )}\n                                            />\n                                        ) : (\n                                            <TextBox {...inputProps} />\n                                        )}\n                                    </InputGroup>\n                                );\n\n                                const renderTextInput = () => {\n                                    return (\n                                        <div className=\"u-marg-top u-marg-bottom\" key={field.name}>\n                                            <InputGroup dimensions=\"1\">{field.isMasked ? <PasswordBox {...inputProps} /> : <TextBox {...inputProps} />}</InputGroup>\n\n                                            {field.helperText && (\n                                                <Text type={TextType.Small} color={Color.DarkGrey}>\n                                                    {field.helperText}\n                                                </Text>\n                                            )}\n                                        </div>\n                                    );\n                                };\n\n                                if (field.type === ExternalMemberModelFieldType.CheckBox) {\n                                    return renderCheckbox();\n                                }\n\n                                if (field.type === ExternalMemberModelFieldType.Phone) {\n                                    return renderPhone();\n                                }\n\n                                return renderTextInput();\n                            })}\n\n                            <BEButton\n                                isLoading={isLoading}\n                                htmlType=\"submit\"\n                                className=\"u-marg-top external-member-modal-submit-btn\"\n                                size=\"normal\"\n                                filled\n                                primary={hotel?.memberOnlyModalUsePrimaryColor}\n                                success={!hotel?.memberOnlyModalUsePrimaryColor}\n                                stopIconAnimation\n                                icon={IconType.ArrowRight}\n                                iconPosition=\"right\"\n                                wide\n                            >\n                                {t(Translation.ExternalMemberPopup.Submit)}\n                            </BEButton>\n                            <div className=\"u-marg-top\">\n                                <Text bold color={Color.Danger}>\n                                    {errorMessage}\n                                </Text>\n                            </div>\n                        </form>\n\n                        {memberOnlySignupLink && (\n                            <div className=\"external-member-modal-signup\">\n                                <div className=\"line-break\"></div>\n                                <div className=\"u-marg-top u-flex align-items-center u-justify-between\">\n                                    <Text type={TextType.Small} className=\"u-flex align-items-center\" color={Color.DarkGrey}>\n                                        {t(Translation.ExternalMemberPopup.DontHaveAccount)}\n                                    </Text>\n                                    <BEButton\n                                        className=\"external-member-modal-signup-btn\"\n                                        htmlType=\"button\"\n                                        size=\"normal\"\n                                        filled\n                                        primary\n                                        onClick={() => window.open(memberOnlySignupLink, '_blank')}\n                                    >\n                                        {t(Translation.ExternalMemberPopup.SignUp)}\n                                    </BEButton>\n                                </div>\n                            </div>\n                        )}\n                    </div>\n                </div>\n            </div>\n        </SimpleModal>\n    );\n};\n\nexport default ExternalMemberModal;\n"]}

package/dist/src/components/steps/date/BEPeoplePickerBlock.js

@@ -49,6 +49,7 @@ const Icon_1 = require("../../generic/Icon/Icon");
 const PromoCodeInput_1 = __importDefault(require("../../generic/PromoCodeInput"));
 const OccupancyWarningBlock_1 = __importDefault(require("./OccupancyWarningBlock"));
 const PeoplePickerRow_1 = __importDefault(require("./PeoplePickerRow"));
+const useSignedInMember_1 = require("../../../hooks/useSignedInMember");
 const BasketRow_1 = __importStar(require("../../../models/BasketRow"));
 const DIProvider_1 = require("../../../providers/DIProvider");
 const DataLayer_1 = __importStar(require("../../../util/DataLayer"));
@@ -57,6 +58,7 @@ function OriginalPeoplePickerBlock() {
     var _a, _b;
     const context = (0, react_1.useContext)(contexts_1.BasketContext);
     const { hotel } = (0, hooks_1.useCurrentHotel)();
+    const { signedInUser } = (0, useSignedInMember_1.useSignedInMember)();
     const updateRoomValues = (row, values) => {
         const { adults, children, infants, promoCode } = values;
         if (adults !== row.getAdults()) {
@@ -117,7 +119,7 @@ function OriginalPeoplePickerBlock() {
                     }, onChange: changeRoomValues, onRemove: removeBasketRowHandler })));
         }),
         react_1.default.createElement("div", { className: "u-marg-bottom" },
-            react_1.default.createElement(PromoCodeInput_1.default, { value: promocode, onChange: changePromoCode, valid: !promocode || promoCodeStatus === null || promoCodeStatus === BasketRow_1.EPromoCodeStatus.New ? undefined : promoCodeStatus === BasketRow_1.EPromoCodeStatus.Valid, variant: "outlined", row: context.selectedBasketRow })),
+            react_1.default.createElement(PromoCodeInput_1.default, { value: promocode, onChange: changePromoCode, valid: !promocode || promoCodeStatus === null || promoCodeStatus === BasketRow_1.EPromoCodeStatus.New ? undefined : promoCodeStatus === BasketRow_1.EPromoCodeStatus.Valid, variant: "outlined", row: selectedRow })),
         context.canAddAnotherRoom ? (react_1.default.createElement(BEButton_1.default, { isText: true, primary: true, icon: Icon_1.IconType.Add, stopIconAnimation: true, onClick: addAnotherRoomOnClickHandler }, t(Translation_1.Translation.Misc.AddAnotherRoom))) : (react_1.default.createElement(react_1.default.Fragment, null)),
         react_1.default.createElement(OccupancyWarningBlock_1.default, null)));
 }

package/dist/src/components/steps/date/BEPeoplePickerBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"BEPeoplePickerBlock.js","sourceRoot":"/","sources":["src/components/steps/date/BEPeoplePickerBlock.tsx"],"names":[],"mappings":"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","sourcesContent":["import { BasketContext } from '@frontend/contexts';\nimport { useCurrentHotel } from '@frontend/hooks';\nimport React, { useContext } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\n\nimport BEButton from '@/components/generic/BEButton';\nimport { IconType } from '@/components/generic/Icon/Icon';\nimport PromoCodeInput from '@/components/generic/PromoCodeInput';\nimport OccupancyWarningBlock from '@/components/steps/date/OccupancyWarningBlock';\nimport PeoplePickerRow, { PeoplePickerDetails } from '@/components/steps/date/PeoplePickerRow';\nimport BasketRow, { EPromoCodeStatus } from '@/models/BasketRow';\nimport { withDI } from '@/providers/DIProvider';\nimport DataLayer, { InteractionStep, InteractionType } from '@/util/DataLayer';\n\nexport const BE_PEOPLE_PICKER_BLOCK = 'BEPeoplePickerBlock';\n\nexport function OriginalPeoplePickerBlock() {\n    const context = useContext(BasketContext);\n    const { hotel } = useCurrentHotel();\n\n    const updateRoomValues = (row: BasketRow, values: PeoplePickerDetails) => {\n        const { adults, children, infants, promoCode } = values;\n\n        if (adults !== row.getAdults()) {\n            row.setAdults(adults);\n            DataLayer.instance.sendInteraction('Guests', InteractionType.NUMBER_INPUT, InteractionStep.DATES);\n        }\n        if (children !== row.getChildren()) {\n            row.setChildren(children);\n            DataLayer.instance.sendInteraction('Guests', InteractionType.NUMBER_INPUT, InteractionStep.DATES);\n        }\n\n        if (infants !== row.getInfants()) {\n            row.setInfants(infants);\n            DataLayer.instance.sendInteraction('Guests', InteractionType.NUMBER_INPUT, InteractionStep.DATES);\n        }\n\n        if (promoCode !== row.getPromoCode()) {\n            DataLayer.instance.sendInteraction('Promo Code', InteractionType.FORM_FIELD, InteractionStep.DATES);\n            row.setPromoCode(promoCode);\n        }\n\n        context.updateBasketRow(row);\n    };\n\n    const basketRows = context.currentBasketRows;\n    const { t } = useTranslation();\n\n    const addNewBasketRow = () => {\n        context.addBasketRow(new BasketRow());\n    };\n\n    const updatePromoCode = (code: string) => {\n        if (context.selectedBasketRow) {\n            context.selectedBasketRow.setManualInputPromoCode(!!true);\n            context.selectedBasketRow.setPromoCode(code);\n            context.updateBasketRow(context.selectedBasketRow);\n        }\n    };\n\n    const selectedRow = context.selectedBasketRow;\n\n    const promoCodeStatus = selectedRow?.getPromoCodeStatus() ?? null;\n    const addAnotherRoomOnClickHandler = () => {\n        DataLayer.instance.sendInteraction('Add Another Room', InteractionType.BUTTON, InteractionStep.DATES);\n        addNewBasketRow();\n    };\n    const changePromoCode = (val: any) => {\n        updatePromoCode(val);\n    };\n\n    const promocode = context.selectedBasketRow?.getPromoCode(hotel?.memberOnlyPromoCode);\n\n    return (\n        <div className=\"people-picker--items\">\n            {basketRows.map((item, index) => {\n                const changeRoomValues = (val: any) => {\n                    updateRoomValues(item, val);\n                };\n                const removeBasketRowHandler = () => {\n                    context.removeBasketRow(item);\n                };\n                return (\n                    <div key={item.getID()}>\n                        <PeoplePickerRow\n                            number={index}\n                            details={{\n                                adults: item.getAdults(),\n                                children: item.getChildren(),\n                                infants: item.getInfants(),\n                                promoCode: item.getPromoCode(),\n                                roomCode: item.getRoomCode(),\n                            }}\n                            onChange={changeRoomValues}\n                            onRemove={removeBasketRowHandler}\n                        />\n                    </div>\n                );\n            })}\n            <div className=\"u-marg-bottom\">\n                <PromoCodeInput\n                    value={promocode}\n                    onChange={changePromoCode}\n                    valid={!promocode || promoCodeStatus === null || promoCodeStatus === EPromoCodeStatus.New ? undefined : promoCodeStatus === EPromoCodeStatus.Valid}\n                    variant=\"outlined\"\n                    row={context.selectedBasketRow}\n                />\n            </div>\n\n            {context.canAddAnotherRoom ? (\n                <BEButton isText primary icon={IconType.Add} stopIconAnimation onClick={addAnotherRoomOnClickHandler}>\n                    {t(Translation.Misc.AddAnotherRoom)}\n                </BEButton>\n            ) : (\n                <></>\n            )}\n            <OccupancyWarningBlock />\n        </div>\n    );\n}\n\nexport default function BEPeoplePickerBlock() {\n    return withDI(BE_PEOPLE_PICKER_BLOCK, OriginalPeoplePickerBlock, null);\n}\n"]}
+{"version":3,"file":"BEPeoplePickerBlock.js","sourceRoot":"/","sources":["src/components/steps/date/BEPeoplePickerBlock.tsx"],"names":[],"mappings":"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","sourcesContent":["import { BasketContext } from '@frontend/contexts';\nimport { useCurrentHotel } from '@frontend/hooks';\nimport React, { useContext } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\n\nimport BEButton from '@/components/generic/BEButton';\nimport { IconType } from '@/components/generic/Icon/Icon';\nimport PromoCodeInput from '@/components/generic/PromoCodeInput';\nimport OccupancyWarningBlock from '@/components/steps/date/OccupancyWarningBlock';\nimport PeoplePickerRow, { PeoplePickerDetails } from '@/components/steps/date/PeoplePickerRow';\nimport { useSignedInMember } from '@/hooks/useSignedInMember';\nimport BasketRow, { EPromoCodeStatus } from '@/models/BasketRow';\nimport { withDI } from '@/providers/DIProvider';\nimport DataLayer, { InteractionStep, InteractionType } from '@/util/DataLayer';\n\nexport const BE_PEOPLE_PICKER_BLOCK = 'BEPeoplePickerBlock';\n\nexport function OriginalPeoplePickerBlock() {\n    const context = useContext(BasketContext);\n    const { hotel } = useCurrentHotel();\n    const { signedInUser } = useSignedInMember();\n    const updateRoomValues = (row: BasketRow, values: PeoplePickerDetails) => {\n        const { adults, children, infants, promoCode } = values;\n\n        if (adults !== row.getAdults()) {\n            row.setAdults(adults);\n            DataLayer.instance.sendInteraction('Guests', InteractionType.NUMBER_INPUT, InteractionStep.DATES);\n        }\n        if (children !== row.getChildren()) {\n            row.setChildren(children);\n            DataLayer.instance.sendInteraction('Guests', InteractionType.NUMBER_INPUT, InteractionStep.DATES);\n        }\n\n        if (infants !== row.getInfants()) {\n            row.setInfants(infants);\n            DataLayer.instance.sendInteraction('Guests', InteractionType.NUMBER_INPUT, InteractionStep.DATES);\n        }\n\n        if (promoCode !== row.getPromoCode()) {\n            DataLayer.instance.sendInteraction('Promo Code', InteractionType.FORM_FIELD, InteractionStep.DATES);\n            row.setPromoCode(promoCode);\n        }\n\n        context.updateBasketRow(row);\n    };\n\n    const basketRows = context.currentBasketRows;\n    const { t } = useTranslation();\n\n    const addNewBasketRow = () => {\n        context.addBasketRow(new BasketRow());\n    };\n\n    const updatePromoCode = (code: string) => {\n        if (context.selectedBasketRow) {\n            context.selectedBasketRow.setManualInputPromoCode(!!true);\n            context.selectedBasketRow.setPromoCode(code);\n            context.updateBasketRow(context.selectedBasketRow);\n        }\n    };\n\n    const selectedRow = context.selectedBasketRow;\n\n    const promoCodeStatus = selectedRow?.getPromoCodeStatus() ?? null;\n    const addAnotherRoomOnClickHandler = () => {\n        DataLayer.instance.sendInteraction('Add Another Room', InteractionType.BUTTON, InteractionStep.DATES);\n        addNewBasketRow();\n    };\n    const changePromoCode = (val: any) => {\n        updatePromoCode(val);\n    };\n\n    const promocode = context.selectedBasketRow?.getPromoCode(hotel?.memberOnlyPromoCode);\n\n    return (\n        <div className=\"people-picker--items\">\n            {basketRows.map((item, index) => {\n                const changeRoomValues = (val: any) => {\n                    updateRoomValues(item, val);\n                };\n                const removeBasketRowHandler = () => {\n                    context.removeBasketRow(item);\n                };\n                return (\n                    <div key={item.getID()}>\n                        <PeoplePickerRow\n                            number={index}\n                            details={{\n                                adults: item.getAdults(),\n                                children: item.getChildren(),\n                                infants: item.getInfants(),\n                                promoCode: item.getPromoCode(),\n                                roomCode: item.getRoomCode(),\n                            }}\n                            onChange={changeRoomValues}\n                            onRemove={removeBasketRowHandler}\n                        />\n                    </div>\n                );\n            })}\n            <div className=\"u-marg-bottom\">\n                <PromoCodeInput\n                    value={promocode}\n                    onChange={changePromoCode}\n                    valid={!promocode || promoCodeStatus === null || promoCodeStatus === EPromoCodeStatus.New ? undefined : promoCodeStatus === EPromoCodeStatus.Valid}\n                    variant=\"outlined\"\n                    row={selectedRow}\n                />\n            </div>\n\n            {context.canAddAnotherRoom ? (\n                <BEButton isText primary icon={IconType.Add} stopIconAnimation onClick={addAnotherRoomOnClickHandler}>\n                    {t(Translation.Misc.AddAnotherRoom)}\n                </BEButton>\n            ) : (\n                <></>\n            )}\n            <OccupancyWarningBlock />\n        </div>\n    );\n}\n\nexport default function BEPeoplePickerBlock() {\n    return withDI(BE_PEOPLE_PICKER_BLOCK, OriginalPeoplePickerBlock, null);\n}\n"]}

package/dist/src/components/steps/hotel/HotelCard.js

@@ -54,6 +54,7 @@ const Translation_1 = require("translations/Translation");
 const BEButton_1 = __importDefault(require("../../generic/BEButton"));
 const Currency_1 = __importDefault(require("../../generic/Currency"));
 const Headline_1 = __importDefault(require("../../generic/Headline"));
+const HotelPerkVisual_1 = require("../../generic/HotelPerkVisual");
 const Icon_1 = require("../../generic/Icon/Icon");
 const SmallSpinner_1 = __importDefault(require("../../generic/loader/SmallSpinner"));
 const Placeholder_1 = __importDefault(require("../../generic/Placeholder"));
@@ -66,7 +67,6 @@ const hooks_1 = require("../../../hooks");
 const BasketRow_1 = __importDefault(require("../../../models/BasketRow"));
 const Color_1 = require("../../../util/Color");
 const GetStepRoom_1 = __importDefault(require("../../../util/GetStepRoom"));
-const HotelPerkHelper_1 = require("../../../util/HotelPerkHelper");
 const ScreenSize_1 = __importDefault(require("../../../util/ScreenSize"));
 const HotelCard = ({ hotel }) => {
     var _a, _b, _c, _d;
@@ -151,11 +151,11 @@ const HotelCard = ({ hotel }) => {
                         const openPerkOnClick = () => {
                             setOpenPerk(perk.name);
                         };
-                        const perkIconElement = (0, HotelPerkHelper_1.getPerkIconElement)(perk);
                         return (react_1.default.createElement("div", { className: "u-flex u-flex-align-center", key: perk.name },
                             react_1.default.createElement(Tooltip_1.default, { title: (_a = perk.tooltip) !== null && _a !== void 0 ? _a : perk.name, overrideContainer: hotelCardRef === null || hotelCardRef === void 0 ? void 0 : hotelCardRef.current, dark: (0, Color_1.lightOrDark)(hotel.colors.accent2) === 'dark' },
                                 react_1.default.createElement("div", { onClick: openPerkOnClick, style: { backgroundColor: Color_1.Color.Snow }, className: "u-rounded u-pad--light u-marg-right--light d-flex justify-center" },
-                                    react_1.default.createElement("div", { className: "u-mw-16 d-flex justify-content-center" }, perkIconElement))),
+                                    react_1.default.createElement("div", { className: "u-mw-16 d-flex justify-content-center" },
+                                        react_1.default.createElement(HotelPerkVisual_1.HotelPerkVisual, { perk: perk })))),
                             react_1.default.createElement("div", { className: 'u-marg-right u-none@l- u-block@m- ' +
                                     (beContext.screenSize > ScreenSize_1.default.Medium ||
                                         beContext.screenSize <= ScreenSize_1.default.Mobile ||

package/dist/src/components/steps/hotel/HotelCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"HotelCard.js","sourceRoot":"/","sources":["src/components/steps/hotel/HotelCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import { BookingEngineContext, CompanyContext, useBasket } from '@frontend/contexts';\nimport dayjs from 'dayjs';\nimport React, { useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useNavigate } from 'react-router-dom';\nimport { Translation } from 'translations/Translation';\n\nimport BEButton from '@/components/generic/BEButton';\nimport Currency from '@/components/generic/Currency';\nimport Headline from '@/components/generic/Headline';\nimport { IconType } from '@/components/generic/Icon/Icon';\nimport SmallSpinner from '@/components/generic/loader/SmallSpinner';\nimport Placeholder from '@/components/generic/Placeholder';\nimport { TaxInclusionNotice } from '@/components/generic/TaxInclusionNotice/TaxInclusionNotice';\nimport Text, { TextType } from '@/components/generic/Text';\nimport Tooltip from '@/components/generic/Tooltip/Tooltip';\nimport HotelCardModal from '@/components/steps/hotel/HotelCardModal';\nimport ImageGallerySlider from '@/components/steps/room/ImageGallerySlider';\nimport { useCurrentHotel } from '@/hooks';\nimport BasketRow from '@/models/BasketRow';\nimport { Hotel } from '@/models/Client/Hotel/Hotel';\nimport { Color, getAccentOverrideStyleContent, lightOrDark } from '@/util/Color';\nimport getStepRoom from '@/util/GetStepRoom';\nimport { getPerkIconElement } from '@/util/HotelPerkHelper';\nimport ScreenSize from '@/util/ScreenSize';\n\ninterface HotelCardProps {\n    hotel: Hotel;\n}\n\nconst HotelCard = ({ hotel }: HotelCardProps) => {\n    const beContext = useContext(BookingEngineContext);\n    const ccx = useContext(CompanyContext);\n    const { hotel: currentHotel } = useCurrentHotel();\n    const basketContext = useBasket();\n\n    const navigate = useNavigate();\n\n    const [images, setImages] = useState<string[]>([]);\n    const [modalOpen, setModalOpen] = useState(false);\n\n    const hotelCardRef = useRef<HTMLElement | null>(null);\n\n    const currentPrice = hotel.lowestPrice?.value;\n    const currentPriceLoading = hotel.lowestPrice?.isLoading;\n\n    const showPrice = currentPriceLoading || (!currentPriceLoading && (currentPrice as number) > 0);\n\n    const { t } = useTranslation();\n\n    useEffect(() => {\n        const newImages: string[] = [];\n        if (hotel.heroImage) {\n            newImages.push(hotel.heroImage);\n        }\n\n        if (hotel.rooms) {\n            for (const room of Object.values(hotel.rooms)) {\n                room.images.forEach((image) => {\n                    newImages.push(image);\n                });\n            }\n        }\n\n        setImages(newImages);\n    }, [hotel.rooms, hotel.heroImage, setImages]);\n\n    const [openPerk, setOpenPerk] = useState(hotel.perks?.[0]?.name);\n    const colorProfile = hotel.colors;\n\n    const onViewRoomsClicked = async () => {\n        if (currentHotel?.hotelID !== hotel.hotelID) {\n            const appliedBasketRow = basketContext.selectedBasketRow || basketContext.currentBasketRows[basketContext.currentBasketRows.length - 1];\n            const row = new BasketRow();\n            row.setStartDate(appliedBasketRow?.getStartDate() || dayjs().add(1, 'day'));\n            row.setEndDate(appliedBasketRow?.getEndDate() || dayjs().add(2, 'day'));\n            row.setAdults(appliedBasketRow?.getAdults() || 1);\n            row.setChildren(appliedBasketRow?.getChildren() || 0);\n            row.setInfants(appliedBasketRow?.getInfants() || 0);\n            row.setPromoCode(appliedBasketRow.getPromoCode() ?? '');\n            basketContext.initBasketRows([row]);\n        }\n        ccx.changeHotel(hotel);\n\n        navigate(getStepRoom().getStepUrl());\n    };\n\n    const onMoreDetailsClicked = async () => {\n        setModalOpen(true);\n    };\n\n    const onModalClose = () => {\n        setModalOpen(false);\n    };\n\n    const isLoading = !hotel.hasLoadedDetails;\n\n    return useMemo(() => {\n        const content = isLoading ? (\n            <div>\n                <div className=\"d-flex flex-column\">\n                    <Placeholder type=\"block\" blockSize=\"sm\" rounded=\"lg\" blink />\n                    <div className=\"u-pad\">\n                        <Placeholder type=\"text\" w=\"md\" h=\"md\" blink />\n                        <Placeholder type=\"text\" w=\"md\" h=\"md\" blink />\n                        <div className=\"u-marg-top\">\n                            <div className=\"u-flex justify-space-between\">\n                                <Placeholder type=\"block\" blockSize=\"xs\" rounded=\"lg\" blink />\n                                <Placeholder type=\"block\" blockSize=\"xs\" rounded=\"lg\" blink />\n                                <Placeholder type=\"block\" blockSize=\"xs\" rounded=\"lg\" blink />\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        ) : (\n            <div className=\"large-hotel-card u-rounded h-100 justify-items-between\">\n                <div className=\"large-hotel-card--image\">\n                    <ImageGallerySlider images={images} />\n                </div>\n                <div className=\"large-hotel-card--body u-pad--heavy u-pad-bottom--none container\">\n                    <Headline bold>{hotel?.name}</Headline>\n                    <Text color={Color.DarkGrey} bold className=\"u-marg-bottom--light\">\n                        {hotel?.address?.city}\n                    </Text>\n                    <div className=\"u-flex u-marg-bottom\">\n                        <Text type={TextType.Small}>{[hotel?.address?.line1, hotel?.address?.line2, hotel?.address?.state].filter((line) => !!line).join(', ')}</Text>\n                    </div>\n                    <div className=\"u-marg-bottom--medium large-hotel-card--description\">\n                        <Text className=\"text\" type={TextType.Small}>\n                            <span dangerouslySetInnerHTML={{ __html: hotel.description || '' }}></span>\n                        </Text>\n                    </div>\n                    {!!hotel.perks?.length && (\n                        <Text className=\"u-marg-bottom\" bold type={TextType.Small} color={Color.Accent}>\n                            And these come free...\n                        </Text>\n                    )}\n                    <div className=\"u-flex u-flex-align-center u-marg-bottom--medium\">\n                        {!!hotel.perks?.length && (\n                            <div className=\"u-flex\">\n                                {hotel.perks.slice(0, 5).map((perk) => {\n                                    const openPerkOnClick = () => {\n                                        setOpenPerk(perk.name);\n                                    };\n\n                                    const perkIconElement = getPerkIconElement(perk);\n                                    return (\n                                        <div className=\"u-flex u-flex-align-center\" key={perk.name}>\n                                            <Tooltip\n                                                title={perk.tooltip ?? perk.name}\n                                                overrideContainer={hotelCardRef?.current}\n                                                dark={lightOrDark(hotel.colors.accent2) === 'dark'}\n                                            >\n                                                <div\n                                                    onClick={openPerkOnClick}\n                                                    style={{ backgroundColor: Color.Snow }}\n                                                    className=\"u-rounded u-pad--light u-marg-right--light d-flex justify-center\"\n                                                >\n                                                    <div className=\"u-mw-16 d-flex justify-content-center\">{perkIconElement}</div>\n                                                </div>\n                                            </Tooltip>\n                                            <div\n                                                className={\n                                                    'u-marg-right u-none@l- u-block@m- ' +\n                                                    (beContext.screenSize > ScreenSize.Medium ||\n                                                    beContext.screenSize <= ScreenSize.Mobile ||\n                                                    (beContext.screenSize > ScreenSize.Mobile && beContext.screenSize <= ScreenSize.Medium && openPerk !== perk.name)\n                                                        ? 'u-none-2'\n                                                        : '')\n                                                }\n                                            >\n                                                <Text type={TextType.Small}>{perk.name}</Text>\n                                            </div>\n                                        </div>\n                                    );\n                                })}\n                            </div>\n                        )}\n                        <BEButton icon={IconType.ArrowRight2} isText primary size=\"tiny\" iconPosition=\"right\" onClick={onMoreDetailsClicked}>\n                            {t(Translation.Step.Room.RoomInfo.MoreDetails)}\n                        </BEButton>\n                    </div>\n                </div>\n                <div className=\"u-pad--heavy u-pad-top--none h-100 justify-content-end u-flex flex-column u-flex-align-flex-start align-items-md-start no-gutters\">\n                    {showPrice ? (\n                        <>\n                            <Text type={TextType.Small} color={Color.Navy} inline>\n                                {t(Translation.Misc.From)}\n                            </Text>\n                            <div className=\"u-flex u-flex-flex-start u-flex-align-center flex-row\">\n                                <Headline bold className=\"u-flex\">\n                                    {hotel.lowestPrice?.isLoading ? (\n                                        <SmallSpinner />\n                                    ) : (\n                                        <Currency hideDecimals fromCurrencyCode={hotel.defaultCurrency}>\n                                            {currentPrice}\n                                        </Currency>\n                                    )}\n                                </Headline>\n                                <Text color={Color.DarkGrey} inline>\n                                    /{t(Translation.Misc.Night)}\n                                </Text>\n                            </div>\n                            <div className=\"u-marg-bottom\">\n                                <Text type={TextType.Small} color={Color.Grey} inline className=\"u-nowrap\">\n                                    <TaxInclusionNotice hasTax={false} />\n                                </Text>\n                            </div>\n                        </>\n                    ) : (\n                        <div className=\"u-h-fill d-flex align-items-center\">\n                            <Text type={TextType.Small} color={Color.Alert}>\n                                {t(Translation.Step.Hotel.HotelCard.DatesUnavailable)}\n                            </Text>\n                        </div>\n                    )}\n\n                    <div className=\"u-marg-top--light u-flex justify-content-end u-w-100@m-\">\n                        <BEButton\n                            name=\"ViewRatesNowButton\"\n                            primary\n                            primaryActive\n                            filled\n                            icon={IconType.ArrowRight}\n                            iconPosition=\"right\"\n                            wide={beContext.screenSize <= ScreenSize.Medium}\n                            onClick={onViewRoomsClicked}\n                        >\n                            {t(Translation.Step.Hotel.ViewRooms)}\n                        </BEButton>\n                    </div>\n                </div>\n                <HotelCardModal open={modalOpen} onClose={onModalClose} hotel={hotel} container={hotelCardRef?.current} />\n            </div>\n        );\n\n        return (\n            <span ref={hotelCardRef} id={`hotel-card-${hotel.hotelID}`}>\n                <style>{`#hotel-card-modal-${hotel.hotelID},\n                #hotel-card-${hotel.hotelID} {\n                    ${getAccentOverrideStyleContent(colorProfile)}\n                }`}</style>\n                {content}\n            </span>\n        );\n    }, [\n        isLoading,\n        images,\n        hotel?.hotelID,\n        hotel?.address,\n        hotel?.perks,\n        hotel?.lowestPrice,\n        hotel?.colors,\n        currentPrice,\n        currentPriceLoading,\n        modalOpen,\n        hotelCardRef,\n        openPerk,\n        showPrice,\n    ]);\n};\n\nexport default HotelCard;\n"]}
+{"version":3,"file":"HotelCard.js","sourceRoot":"/","sources":["src/components/steps/hotel/HotelCard.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iDAAqF;AACrF,kDAA0B;AAC1B,+CAAgF;AAChF,iDAA+C;AAC/C,uDAA+C;AAC/C,0DAAuD;AAEvD,6EAAqD;AACrD,6EAAqD;AACrD,6EAAqD;AACrD,0EAAuE;AACvE,yDAA0D;AAC1D,4FAAoE;AACpE,mFAA2D;AAC3D,mGAAgG;AAChG,kEAA2D;AAC3D,mFAA2D;AAC3D,6FAAqE;AACrE,oGAA4E;AAC5E,mCAA0C;AAC1C,mEAA2C;AAE3C,wCAAiF;AACjF,qEAA6C;AAC7C,mEAA2C;AAM3C,MAAM,SAAS,GAAG,CAAC,EAAE,KAAK,EAAkB,EAAE,EAAE;;IAC5C,MAAM,SAAS,GAAG,IAAA,kBAAU,EAAC,+BAAoB,CAAC,CAAC;IACnD,MAAM,GAAG,GAAG,IAAA,kBAAU,EAAC,yBAAc,CAAC,CAAC;IACvC,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,IAAA,uBAAe,GAAE,CAAC;IAClD,MAAM,aAAa,GAAG,IAAA,oBAAS,GAAE,CAAC;IAElC,MAAM,QAAQ,GAAG,IAAA,8BAAW,GAAE,CAAC;IAE/B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAW,EAAE,CAAC,CAAC;IACnD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAElD,MAAM,YAAY,GAAG,IAAA,cAAM,EAAqB,IAAI,CAAC,CAAC;IAEtD,MAAM,YAAY,GAAG,MAAA,KAAK,CAAC,WAAW,0CAAE,KAAK,CAAC;IAC9C,MAAM,mBAAmB,GAAG,MAAA,KAAK,CAAC,WAAW,0CAAE,SAAS,CAAC;IAEzD,MAAM,SAAS,GAAG,mBAAmB,IAAI,CAAC,CAAC,mBAAmB,IAAK,YAAuB,GAAG,CAAC,CAAC,CAAC;IAEhG,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAE/B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,MAAM,SAAS,GAAa,EAAE,CAAC;QAC/B,IAAI,KAAK,CAAC,SAAS,EAAE,CAAC;YAClB,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QACpC,CAAC;QAED,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC;YACd,KAAK,MAAM,IAAI,IAAI,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;gBAC5C,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;oBAC1B,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBAC1B,CAAC,CAAC,CAAC;YACP,CAAC;QACL,CAAC;QAED,SAAS,CAAC,SAAS,CAAC,CAAC;IACzB,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC;IAE9C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAC,MAAA,MAAA,KAAK,CAAC,KAAK,0CAAG,CAAC,CAAC,0CAAE,IAAI,CAAC,CAAC;IACjE,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC;IAElC,MAAM,kBAAkB,GAAG,GAAS,EAAE;;QAClC,IAAI,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,MAAK,KAAK,CAAC,OAAO,EAAE,CAAC;YAC1C,MAAM,gBAAgB,GAAG,aAAa,CAAC,iBAAiB,IAAI,aAAa,CAAC,iBAAiB,CAAC,aAAa,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YACxI,MAAM,GAAG,GAAG,IAAI,mBAAS,EAAE,CAAC;YAC5B,GAAG,CAAC,YAAY,CAAC,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,YAAY,EAAE,KAAI,IAAA,eAAK,GAAE,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;YAC5E,GAAG,CAAC,UAAU,CAAC,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,UAAU,EAAE,KAAI,IAAA,eAAK,GAAE,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;YACxE,GAAG,CAAC,SAAS,CAAC,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,SAAS,EAAE,KAAI,CAAC,CAAC,CAAC;YAClD,GAAG,CAAC,WAAW,CAAC,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,WAAW,EAAE,KAAI,CAAC,CAAC,CAAC;YACtD,GAAG,CAAC,UAAU,CAAC,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,UAAU,EAAE,KAAI,CAAC,CAAC,CAAC;YACpD,GAAG,CAAC,YAAY,CAAC,MAAA,gBAAgB,CAAC,YAAY,EAAE,mCAAI,EAAE,CAAC,CAAC;YACxD,aAAa,CAAC,cAAc,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;QACxC,CAAC;QACD,GAAG,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAEvB,QAAQ,CAAC,IAAA,qBAAW,GAAE,CAAC,UAAU,EAAE,CAAC,CAAC;IACzC,CAAC,CAAA,CAAC;IAEF,MAAM,oBAAoB,GAAG,GAAS,EAAE;QACpC,YAAY,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC,CAAA,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,EAAE;QACtB,YAAY,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,CAAC,KAAK,CAAC,gBAAgB,CAAC;IAE1C,OAAO,IAAA,eAAO,EAAC,GAAG,EAAE;;QAChB,MAAM,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC,CACxB;YACI,uCAAK,SAAS,EAAC,oBAAoB;gBAC/B,8BAAC,qBAAW,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,KAAK,SAAG;gBAC9D,uCAAK,SAAS,EAAC,OAAO;oBAClB,8BAAC,qBAAW,IAAC,IAAI,EAAC,MAAM,EAAC,CAAC,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAC,KAAK,SAAG;oBAC/C,8BAAC,qBAAW,IAAC,IAAI,EAAC,MAAM,EAAC,CAAC,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAC,KAAK,SAAG;oBAC/C,uCAAK,SAAS,EAAC,YAAY;wBACvB,uCAAK,SAAS,EAAC,8BAA8B;4BACzC,8BAAC,qBAAW,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,KAAK,SAAG;4BAC9D,8BAAC,qBAAW,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,KAAK,SAAG;4BAC9D,8BAAC,qBAAW,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,KAAK,SAAG,CAC5D,CACJ,CACJ,CACJ,CACJ,CACT,CAAC,CAAC,CAAC,CACA,uCAAK,SAAS,EAAC,wDAAwD;YACnE,uCAAK,SAAS,EAAC,yBAAyB;gBACpC,8BAAC,4BAAkB,IAAC,MAAM,EAAE,MAAM,GAAI,CACpC;YACN,uCAAK,SAAS,EAAC,kEAAkE;gBAC7E,8BAAC,kBAAQ,IAAC,IAAI,UAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,CAAY;gBACvC,8BAAC,cAAI,IAAC,KAAK,EAAE,aAAK,CAAC,QAAQ,EAAE,IAAI,QAAC,SAAS,EAAC,sBAAsB,IAC7D,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,IAAI,CAClB;gBACP,uCAAK,SAAS,EAAC,sBAAsB;oBACjC,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,IAAG,CAAC,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,KAAK,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,KAAK,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAQ,CAC5I;gBACN,uCAAK,SAAS,EAAC,qDAAqD;oBAChE,8BAAC,cAAI,IAAC,SAAS,EAAC,MAAM,EAAC,IAAI,EAAE,eAAQ,CAAC,KAAK;wBACvC,wCAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,WAAW,IAAI,EAAE,EAAE,GAAS,CACxE,CACL;gBACL,CAAC,CAAC,CAAA,MAAA,KAAK,CAAC,KAAK,0CAAE,MAAM,CAAA,IAAI,CACtB,8BAAC,cAAI,IAAC,SAAS,EAAC,eAAe,EAAC,IAAI,QAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,aAAK,CAAC,MAAM,6BAEvE,CACV;gBACD,uCAAK,SAAS,EAAC,kDAAkD;oBAC5D,CAAC,CAAC,CAAA,MAAA,KAAK,CAAC,KAAK,0CAAE,MAAM,CAAA,IAAI,CACtB,uCAAK,SAAS,EAAC,QAAQ,IAClB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;;wBAClC,MAAM,eAAe,GAAG,GAAG,EAAE;4BACzB,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;wBAC3B,CAAC,CAAC;wBAEF,OAAO,CACH,uCAAK,SAAS,EAAC,4BAA4B,EAAC,GAAG,EAAE,IAAI,CAAC,IAAI;4BACtD,8BAAC,iBAAO,IACJ,KAAK,EAAE,MAAA,IAAI,CAAC,OAAO,mCAAI,IAAI,CAAC,IAAI,EAChC,iBAAiB,EAAE,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,EACxC,IAAI,EAAE,IAAA,mBAAW,EAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,MAAM;gCAElD,uCACI,OAAO,EAAE,eAAe,EACxB,KAAK,EAAE,EAAE,eAAe,EAAE,aAAK,CAAC,IAAI,EAAE,EACtC,SAAS,EAAC,kEAAkE;oCAE5E,uCAAK,SAAS,EAAC,uCAAuC;wCAClD,8BAAC,iCAAe,IAAC,IAAI,EAAE,IAAI,GAAI,CAC7B,CACJ,CACA;4BACV,uCACI,SAAS,EACL,oCAAoC;oCACpC,CAAC,SAAS,CAAC,UAAU,GAAG,oBAAU,CAAC,MAAM;wCACzC,SAAS,CAAC,UAAU,IAAI,oBAAU,CAAC,MAAM;wCACzC,CAAC,SAAS,CAAC,UAAU,GAAG,oBAAU,CAAC,MAAM,IAAI,SAAS,CAAC,UAAU,IAAI,oBAAU,CAAC,MAAM,IAAI,QAAQ,KAAK,IAAI,CAAC,IAAI,CAAC;wCAC7G,CAAC,CAAC,UAAU;wCACZ,CAAC,CAAC,EAAE,CAAC;gCAGb,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,IAAG,IAAI,CAAC,IAAI,CAAQ,CAC5C,CACJ,CACT,CAAC;oBACN,CAAC,CAAC,CACA,CACT;oBACD,8BAAC,kBAAQ,IAAC,IAAI,EAAE,eAAQ,CAAC,WAAW,EAAE,MAAM,QAAC,OAAO,QAAC,IAAI,EAAC,MAAM,EAAC,YAAY,EAAC,OAAO,EAAC,OAAO,EAAE,oBAAoB,IAC9G,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,CACvC,CACT,CACJ;YACN,uCAAK,SAAS,EAAC,mIAAmI;gBAC7I,SAAS,CAAC,CAAC,CAAC,CACT;oBACI,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,aAAK,CAAC,IAAI,EAAE,MAAM,UAChD,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CACtB;oBACP,uCAAK,SAAS,EAAC,uDAAuD;wBAClE,8BAAC,kBAAQ,IAAC,IAAI,QAAC,SAAS,EAAC,QAAQ,IAC5B,CAAA,MAAA,KAAK,CAAC,WAAW,0CAAE,SAAS,EAAC,CAAC,CAAC,CAC5B,8BAAC,sBAAY,OAAG,CACnB,CAAC,CAAC,CAAC,CACA,8BAAC,kBAAQ,IAAC,YAAY,QAAC,gBAAgB,EAAE,KAAK,CAAC,eAAe,IACzD,YAAY,CACN,CACd,CACM;wBACX,8BAAC,cAAI,IAAC,KAAK,EAAE,aAAK,CAAC,QAAQ,EAAE,MAAM;;4BAC7B,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CACxB,CACL;oBACN,uCAAK,SAAS,EAAC,eAAe;wBAC1B,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,aAAK,CAAC,IAAI,EAAE,MAAM,QAAC,SAAS,EAAC,UAAU;4BACtE,8BAAC,uCAAkB,IAAC,MAAM,EAAE,KAAK,GAAI,CAClC,CACL,CACP,CACN,CAAC,CAAC,CAAC,CACA,uCAAK,SAAS,EAAC,oCAAoC;oBAC/C,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,aAAK,CAAC,KAAK,IACzC,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAClD,CACL,CACT;gBAED,uCAAK,SAAS,EAAC,yDAAyD;oBACpE,8BAAC,kBAAQ,IACL,IAAI,EAAC,oBAAoB,EACzB,OAAO,QACP,aAAa,QACb,MAAM,QACN,IAAI,EAAE,eAAQ,CAAC,UAAU,EACzB,YAAY,EAAC,OAAO,EACpB,IAAI,EAAE,SAAS,CAAC,UAAU,IAAI,oBAAU,CAAC,MAAM,EAC/C,OAAO,EAAE,kBAAkB,IAE1B,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAC7B,CACT,CACJ;YACN,8BAAC,wBAAc,IAAC,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,GAAI,CACxG,CACT,CAAC;QAEF,OAAO,CACH,wCAAM,GAAG,EAAE,YAAY,EAAE,EAAE,EAAE,cAAc,KAAK,CAAC,OAAO,EAAE;YACtD,6CAAQ,qBAAqB,KAAK,CAAC,OAAO;8BAC5B,KAAK,CAAC,OAAO;sBACrB,IAAA,qCAA6B,EAAC,YAAY,CAAC;kBAC/C,CAAS;YACV,OAAO,CACL,CACV,CAAC;IACN,CAAC,EAAE;QACC,SAAS;QACT,MAAM;QACN,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO;QACd,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO;QACd,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK;QACZ,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW;QAClB,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM;QACb,YAAY;QACZ,mBAAmB;QACnB,SAAS;QACT,YAAY;QACZ,QAAQ;QACR,SAAS;KACZ,CAAC,CAAC;AACP,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["import { BookingEngineContext, CompanyContext, useBasket } from '@frontend/contexts';\nimport dayjs from 'dayjs';\nimport React, { useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useNavigate } from 'react-router-dom';\nimport { Translation } from 'translations/Translation';\n\nimport BEButton from '@/components/generic/BEButton';\nimport Currency from '@/components/generic/Currency';\nimport Headline from '@/components/generic/Headline';\nimport { HotelPerkVisual } from '@/components/generic/HotelPerkVisual';\nimport { IconType } from '@/components/generic/Icon/Icon';\nimport SmallSpinner from '@/components/generic/loader/SmallSpinner';\nimport Placeholder from '@/components/generic/Placeholder';\nimport { TaxInclusionNotice } from '@/components/generic/TaxInclusionNotice/TaxInclusionNotice';\nimport Text, { TextType } from '@/components/generic/Text';\nimport Tooltip from '@/components/generic/Tooltip/Tooltip';\nimport HotelCardModal from '@/components/steps/hotel/HotelCardModal';\nimport ImageGallerySlider from '@/components/steps/room/ImageGallerySlider';\nimport { useCurrentHotel } from '@/hooks';\nimport BasketRow from '@/models/BasketRow';\nimport { Hotel } from '@/models/Client/Hotel/Hotel';\nimport { Color, getAccentOverrideStyleContent, lightOrDark } from '@/util/Color';\nimport getStepRoom from '@/util/GetStepRoom';\nimport ScreenSize from '@/util/ScreenSize';\n\ninterface HotelCardProps {\n    hotel: Hotel;\n}\n\nconst HotelCard = ({ hotel }: HotelCardProps) => {\n    const beContext = useContext(BookingEngineContext);\n    const ccx = useContext(CompanyContext);\n    const { hotel: currentHotel } = useCurrentHotel();\n    const basketContext = useBasket();\n\n    const navigate = useNavigate();\n\n    const [images, setImages] = useState<string[]>([]);\n    const [modalOpen, setModalOpen] = useState(false);\n\n    const hotelCardRef = useRef<HTMLElement | null>(null);\n\n    const currentPrice = hotel.lowestPrice?.value;\n    const currentPriceLoading = hotel.lowestPrice?.isLoading;\n\n    const showPrice = currentPriceLoading || (!currentPriceLoading && (currentPrice as number) > 0);\n\n    const { t } = useTranslation();\n\n    useEffect(() => {\n        const newImages: string[] = [];\n        if (hotel.heroImage) {\n            newImages.push(hotel.heroImage);\n        }\n\n        if (hotel.rooms) {\n            for (const room of Object.values(hotel.rooms)) {\n                room.images.forEach((image) => {\n                    newImages.push(image);\n                });\n            }\n        }\n\n        setImages(newImages);\n    }, [hotel.rooms, hotel.heroImage, setImages]);\n\n    const [openPerk, setOpenPerk] = useState(hotel.perks?.[0]?.name);\n    const colorProfile = hotel.colors;\n\n    const onViewRoomsClicked = async () => {\n        if (currentHotel?.hotelID !== hotel.hotelID) {\n            const appliedBasketRow = basketContext.selectedBasketRow || basketContext.currentBasketRows[basketContext.currentBasketRows.length - 1];\n            const row = new BasketRow();\n            row.setStartDate(appliedBasketRow?.getStartDate() || dayjs().add(1, 'day'));\n            row.setEndDate(appliedBasketRow?.getEndDate() || dayjs().add(2, 'day'));\n            row.setAdults(appliedBasketRow?.getAdults() || 1);\n            row.setChildren(appliedBasketRow?.getChildren() || 0);\n            row.setInfants(appliedBasketRow?.getInfants() || 0);\n            row.setPromoCode(appliedBasketRow.getPromoCode() ?? '');\n            basketContext.initBasketRows([row]);\n        }\n        ccx.changeHotel(hotel);\n\n        navigate(getStepRoom().getStepUrl());\n    };\n\n    const onMoreDetailsClicked = async () => {\n        setModalOpen(true);\n    };\n\n    const onModalClose = () => {\n        setModalOpen(false);\n    };\n\n    const isLoading = !hotel.hasLoadedDetails;\n\n    return useMemo(() => {\n        const content = isLoading ? (\n            <div>\n                <div className=\"d-flex flex-column\">\n                    <Placeholder type=\"block\" blockSize=\"sm\" rounded=\"lg\" blink />\n                    <div className=\"u-pad\">\n                        <Placeholder type=\"text\" w=\"md\" h=\"md\" blink />\n                        <Placeholder type=\"text\" w=\"md\" h=\"md\" blink />\n                        <div className=\"u-marg-top\">\n                            <div className=\"u-flex justify-space-between\">\n                                <Placeholder type=\"block\" blockSize=\"xs\" rounded=\"lg\" blink />\n                                <Placeholder type=\"block\" blockSize=\"xs\" rounded=\"lg\" blink />\n                                <Placeholder type=\"block\" blockSize=\"xs\" rounded=\"lg\" blink />\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        ) : (\n            <div className=\"large-hotel-card u-rounded h-100 justify-items-between\">\n                <div className=\"large-hotel-card--image\">\n                    <ImageGallerySlider images={images} />\n                </div>\n                <div className=\"large-hotel-card--body u-pad--heavy u-pad-bottom--none container\">\n                    <Headline bold>{hotel?.name}</Headline>\n                    <Text color={Color.DarkGrey} bold className=\"u-marg-bottom--light\">\n                        {hotel?.address?.city}\n                    </Text>\n                    <div className=\"u-flex u-marg-bottom\">\n                        <Text type={TextType.Small}>{[hotel?.address?.line1, hotel?.address?.line2, hotel?.address?.state].filter((line) => !!line).join(', ')}</Text>\n                    </div>\n                    <div className=\"u-marg-bottom--medium large-hotel-card--description\">\n                        <Text className=\"text\" type={TextType.Small}>\n                            <span dangerouslySetInnerHTML={{ __html: hotel.description || '' }}></span>\n                        </Text>\n                    </div>\n                    {!!hotel.perks?.length && (\n                        <Text className=\"u-marg-bottom\" bold type={TextType.Small} color={Color.Accent}>\n                            And these come free...\n                        </Text>\n                    )}\n                    <div className=\"u-flex u-flex-align-center u-marg-bottom--medium\">\n                        {!!hotel.perks?.length && (\n                            <div className=\"u-flex\">\n                                {hotel.perks.slice(0, 5).map((perk) => {\n                                    const openPerkOnClick = () => {\n                                        setOpenPerk(perk.name);\n                                    };\n\n                                    return (\n                                        <div className=\"u-flex u-flex-align-center\" key={perk.name}>\n                                            <Tooltip\n                                                title={perk.tooltip ?? perk.name}\n                                                overrideContainer={hotelCardRef?.current}\n                                                dark={lightOrDark(hotel.colors.accent2) === 'dark'}\n                                            >\n                                                <div\n                                                    onClick={openPerkOnClick}\n                                                    style={{ backgroundColor: Color.Snow }}\n                                                    className=\"u-rounded u-pad--light u-marg-right--light d-flex justify-center\"\n                                                >\n                                                    <div className=\"u-mw-16 d-flex justify-content-center\">\n                                                        <HotelPerkVisual perk={perk} />\n                                                    </div>\n                                                </div>\n                                            </Tooltip>\n                                            <div\n                                                className={\n                                                    'u-marg-right u-none@l- u-block@m- ' +\n                                                    (beContext.screenSize > ScreenSize.Medium ||\n                                                    beContext.screenSize <= ScreenSize.Mobile ||\n                                                    (beContext.screenSize > ScreenSize.Mobile && beContext.screenSize <= ScreenSize.Medium && openPerk !== perk.name)\n                                                        ? 'u-none-2'\n                                                        : '')\n                                                }\n                                            >\n                                                <Text type={TextType.Small}>{perk.name}</Text>\n                                            </div>\n                                        </div>\n                                    );\n                                })}\n                            </div>\n                        )}\n                        <BEButton icon={IconType.ArrowRight2} isText primary size=\"tiny\" iconPosition=\"right\" onClick={onMoreDetailsClicked}>\n                            {t(Translation.Step.Room.RoomInfo.MoreDetails)}\n                        </BEButton>\n                    </div>\n                </div>\n                <div className=\"u-pad--heavy u-pad-top--none h-100 justify-content-end u-flex flex-column u-flex-align-flex-start align-items-md-start no-gutters\">\n                    {showPrice ? (\n                        <>\n                            <Text type={TextType.Small} color={Color.Navy} inline>\n                                {t(Translation.Misc.From)}\n                            </Text>\n                            <div className=\"u-flex u-flex-flex-start u-flex-align-center flex-row\">\n                                <Headline bold className=\"u-flex\">\n                                    {hotel.lowestPrice?.isLoading ? (\n                                        <SmallSpinner />\n                                    ) : (\n                                        <Currency hideDecimals fromCurrencyCode={hotel.defaultCurrency}>\n                                            {currentPrice}\n                                        </Currency>\n                                    )}\n                                </Headline>\n                                <Text color={Color.DarkGrey} inline>\n                                    /{t(Translation.Misc.Night)}\n                                </Text>\n                            </div>\n                            <div className=\"u-marg-bottom\">\n                                <Text type={TextType.Small} color={Color.Grey} inline className=\"u-nowrap\">\n                                    <TaxInclusionNotice hasTax={false} />\n                                </Text>\n                            </div>\n                        </>\n                    ) : (\n                        <div className=\"u-h-fill d-flex align-items-center\">\n                            <Text type={TextType.Small} color={Color.Alert}>\n                                {t(Translation.Step.Hotel.HotelCard.DatesUnavailable)}\n                            </Text>\n                        </div>\n                    )}\n\n                    <div className=\"u-marg-top--light u-flex justify-content-end u-w-100@m-\">\n                        <BEButton\n                            name=\"ViewRatesNowButton\"\n                            primary\n                            primaryActive\n                            filled\n                            icon={IconType.ArrowRight}\n                            iconPosition=\"right\"\n                            wide={beContext.screenSize <= ScreenSize.Medium}\n                            onClick={onViewRoomsClicked}\n                        >\n                            {t(Translation.Step.Hotel.ViewRooms)}\n                        </BEButton>\n                    </div>\n                </div>\n                <HotelCardModal open={modalOpen} onClose={onModalClose} hotel={hotel} container={hotelCardRef?.current} />\n            </div>\n        );\n\n        return (\n            <span ref={hotelCardRef} id={`hotel-card-${hotel.hotelID}`}>\n                <style>{`#hotel-card-modal-${hotel.hotelID},\n                #hotel-card-${hotel.hotelID} {\n                    ${getAccentOverrideStyleContent(colorProfile)}\n                }`}</style>\n                {content}\n            </span>\n        );\n    }, [\n        isLoading,\n        images,\n        hotel?.hotelID,\n        hotel?.address,\n        hotel?.perks,\n        hotel?.lowestPrice,\n        hotel?.colors,\n        currentPrice,\n        currentPriceLoading,\n        modalOpen,\n        hotelCardRef,\n        openPerk,\n        showPrice,\n    ]);\n};\n\nexport default HotelCard;\n"]}

package/dist/src/components/steps/hotel/HotelCardModal.js

@@ -44,6 +44,7 @@ const Translation_1 = require("translations/Translation");
 const BEButton_1 = __importDefault(require("../../generic/BEButton"));
 const Currency_1 = __importDefault(require("../../generic/Currency"));
 const Headline_1 = __importDefault(require("../../generic/Headline"));
+const HotelPerkVisual_1 = require("../../generic/HotelPerkVisual");
 const Icon_1 = require("../../generic/Icon/Icon");
 const LineBreak_1 = __importDefault(require("../../generic/LineBreak"));
 const SimpleModal_1 = __importStar(require("../../generic/modal/SimpleModal"));
@@ -53,7 +54,6 @@ const ImageGallerySlider_1 = __importDefault(require("../room/ImageGallerySlider
 const TransportDistanceFromHotelBlock_1 = __importDefault(require("../../summary/TransportDistanceFromHotelBlock"));
 const StepHotel_1 = __importDefault(require("../../../pages/steps/StepHotel/StepHotel"));
 const Color_1 = require("../../../util/Color");
-const HotelPerkHelper_1 = require("../../../util/HotelPerkHelper");
 const StepManager_1 = __importDefault(require("../../../util/StepManager"));
 const HotelCardModal = (props) => {
     var _a, _b, _c, _d, _e;
@@ -99,10 +99,10 @@ const HotelCardModal = (props) => {
                 !!((_e = hotel.perks) === null || _e === void 0 ? void 0 : _e.length) && (react_1.default.createElement("div", null,
                     react_1.default.createElement(Text_1.default, { className: "u-marg-bottom", bold: true, color: Color_1.Color.Accent }, "And these come free..."),
                     react_1.default.createElement("div", { className: "u-flex row u-marg-bottom--massive" }, perksFree === null || perksFree === void 0 ? void 0 : perksFree.map((perk) => {
-                        const perkIconElement = (0, HotelPerkHelper_1.getPerkIconElement)(perk);
                         return (react_1.default.createElement("div", { className: "u-flex u-flex-align-center u-flex-flex-start col-sm-4 col-6 u-marg-bottom--light", key: perk.name },
                             react_1.default.createElement("div", { style: { backgroundColor: Color_1.Color.Snow }, className: "u-rounded u-pad--light u-marg-right--light" },
-                                react_1.default.createElement("div", { className: "u-mw-16 d-flex justify-content-center" }, perkIconElement)),
+                                react_1.default.createElement("div", { className: "u-mw-16 d-flex justify-content-center" },
+                                    react_1.default.createElement(HotelPerkVisual_1.HotelPerkVisual, { perk: perk }))),
                             react_1.default.createElement("div", { className: "u-marg-right u-block@m-" },
                                 react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small }, perk.name))));
                     })))),

package/dist/src/components/steps/hotel/HotelCardModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"HotelCardModal.js","sourceRoot":"/","sources":["src/components/steps/hotel/HotelCardModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { CompanyContext } from '@frontend/contexts';\nimport React, { useContext, useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useNavigate } from 'react-router-dom';\nimport { Translation } from 'translations/Translation';\n\nimport BEButton from '@/components/generic/BEButton';\nimport Currency from '@/components/generic/Currency';\nimport Headline from '@/components/generic/Headline';\nimport { IconType } from '@/components/generic/Icon/Icon';\nimport LineBreak from '@/components/generic/LineBreak';\nimport SimpleModal, { SimpleModalSize } from '@/components/generic/modal/SimpleModal';\nimport { TaxInclusionNotice } from '@/components/generic/TaxInclusionNotice/TaxInclusionNotice';\nimport Text, { TextType } from '@/components/generic/Text';\nimport ImageGallerySlider from '@/components/steps/room/ImageGallerySlider';\nimport TransportDistanceFromHotelBlock from '@/components/summary/TransportDistanceFromHotelBlock';\nimport { Hotel } from '@/models/Client/Hotel/Hotel';\nimport StepHotel from '@/pages/steps/StepHotel/StepHotel';\nimport { Color } from '@/util/Color';\nimport { getPerkIconElement } from '@/util/HotelPerkHelper';\nimport StepManager from '@/util/StepManager';\n\ninterface HotelCardModalProps {\n    open: boolean;\n    hotel: Hotel;\n\n    onClose: () => void;\n\n    container?: HTMLElement | null;\n}\n\nconst HotelCardModal = (props: HotelCardModalProps) => {\n    const hotel = props.hotel;\n\n    const [images, setImages] = useState([props.hotel.heroImage]);\n    const ccx = useContext(CompanyContext);\n    const navigate = useNavigate();\n\n    const { t } = useTranslation();\n\n    const currentPrice = hotel.lowestPrice?.value;\n\n    useEffect(() => {\n        const newImages: string[] = [hotel.heroImage];\n\n        if (hotel.rooms) {\n            for (const room of Object.values(hotel.rooms)) {\n                room.images?.forEach((image) => {\n                    newImages.push(image);\n                });\n            }\n        }\n\n        setImages(newImages);\n    }, [hotel.rooms]);\n\n    const perksFree = hotel.perks;\n\n    const onClickViewRooms = () => {\n        ccx.changeHotel(hotel);\n        navigate(StepManager.getNextStepUrl(StepHotel));\n    };\n\n    return (\n        <SimpleModal style={{ overflow: 'scroll' }} size={SimpleModalSize.Small} open={props.open} onClose={props.onClose} title={hotel.name} modalTarget={props.container}>\n            <div style={{ backgroundColor: Color.White }} id={`hotel-card-modal-${hotel.hotelID}`}>\n                <div style={{ height: '350px' }}>\n                    <ImageGallerySlider images={images} />\n                </div>\n                <div className=\"container u-pad--heavy\">\n                    <div className=\"u-marg-bottom--heavy\">\n                        <div className=\"u-marg-bottom--light\">\n                            <Headline size=\"large\" bold>\n                                {hotel.name}\n                            </Headline>\n                        </div>\n                        <Text bold color={Color.DarkGrey}>\n                            {hotel.address?.city}\n                        </Text>\n                    </div>\n                    <div className=\"u-marg-top-bottom--heavy row u-w-100\">\n                        <TransportDistanceFromHotelBlock tightMargins hotel={hotel} />\n                    </div>\n                    <div className=\"u-marg-bottom--heavy\">\n                        <Text type={TextType.Small} color={Color.DarkGrey}>\n                            {hotel.address?.line1}, {hotel.address?.line2}\n                        </Text>\n                    </div>\n                    {!!hotel.perks?.length && (\n                        <div>\n                            <Text className=\"u-marg-bottom\" bold color={Color.Accent}>\n                                And these come free...\n                            </Text>\n                            <div className=\"u-flex row u-marg-bottom--massive\">\n                                {perksFree?.map((perk) => {\n                                    const perkIconElement = getPerkIconElement(perk);\n\n                                    return (\n                                        <div className=\"u-flex u-flex-align-center u-flex-flex-start col-sm-4 col-6 u-marg-bottom--light\" key={perk.name}>\n                                            <div style={{ backgroundColor: Color.Snow }} className=\"u-rounded u-pad--light u-marg-right--light\">\n                                                <div className=\"u-mw-16 d-flex justify-content-center\">{perkIconElement}</div>\n                                            </div>\n                                            <div className=\"u-marg-right u-block@m-\">\n                                                <Text type={TextType.Small}>{perk.name}</Text>\n                                            </div>\n                                        </div>\n                                    );\n                                })}\n                            </div>\n                        </div>\n                    )}\n                    <div>\n                        <Text type={TextType.Small}>\n                            <span dangerouslySetInnerHTML={{ __html: hotel.description || '' }}></span>\n                        </Text>\n                    </div>\n                    <LineBreak />\n                    <div className=\"u-flex\">\n                        <div style={{ paddingLeft: '0' }} className=\"col-md-6 u-flex justify-content-start flex-column align-items-start\">\n                            <Text type={TextType.Small} color={Color.Navy} inline>\n                                {t(Translation.Misc.From)}\n                            </Text>\n                            <div className=\"room-details--content-price flex-row\">\n                                <Headline bold>\n                                    <Currency hideDecimals fromCurrencyCode={hotel.defaultCurrency}>\n                                        {currentPrice}\n                                    </Currency>\n                                </Headline>\n                                <Text color={Color.DarkGrey} inline>\n                                    /{t(Translation.Misc.Night)}\n                                </Text>\n                            </div>\n                            <div className=\"u-marg-bottom\">\n                                <Text type={TextType.Small} color={Color.Grey} inline className=\"u-nowrap\">\n                                    <TaxInclusionNotice hasTax={false} />\n                                </Text>\n                            </div>\n                        </div>\n                        <div>\n                            <BEButton primary filled icon={IconType.ArrowRight} iconPosition=\"right\" onClick={onClickViewRooms}>\n                                {t(Translation.Step.Hotel.ViewRooms)}\n                            </BEButton>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </SimpleModal>\n    );\n};\n\nexport default HotelCardModal;\n"]}
+{"version":3,"file":"HotelCardModal.js","sourceRoot":"/","sources":["src/components/steps/hotel/HotelCardModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { CompanyContext } from '@frontend/contexts';\nimport React, { useContext, useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useNavigate } from 'react-router-dom';\nimport { Translation } from 'translations/Translation';\n\nimport BEButton from '@/components/generic/BEButton';\nimport Currency from '@/components/generic/Currency';\nimport Headline from '@/components/generic/Headline';\nimport { HotelPerkVisual } from '@/components/generic/HotelPerkVisual';\nimport { IconType } from '@/components/generic/Icon/Icon';\nimport LineBreak from '@/components/generic/LineBreak';\nimport SimpleModal, { SimpleModalSize } from '@/components/generic/modal/SimpleModal';\nimport { TaxInclusionNotice } from '@/components/generic/TaxInclusionNotice/TaxInclusionNotice';\nimport Text, { TextType } from '@/components/generic/Text';\nimport ImageGallerySlider from '@/components/steps/room/ImageGallerySlider';\nimport TransportDistanceFromHotelBlock from '@/components/summary/TransportDistanceFromHotelBlock';\nimport { Hotel } from '@/models/Client/Hotel/Hotel';\nimport StepHotel from '@/pages/steps/StepHotel/StepHotel';\nimport { Color } from '@/util/Color';\nimport StepManager from '@/util/StepManager';\n\ninterface HotelCardModalProps {\n    open: boolean;\n    hotel: Hotel;\n\n    onClose: () => void;\n\n    container?: HTMLElement | null;\n}\n\nconst HotelCardModal = (props: HotelCardModalProps) => {\n    const hotel = props.hotel;\n\n    const [images, setImages] = useState([props.hotel.heroImage]);\n    const ccx = useContext(CompanyContext);\n    const navigate = useNavigate();\n\n    const { t } = useTranslation();\n\n    const currentPrice = hotel.lowestPrice?.value;\n\n    useEffect(() => {\n        const newImages: string[] = [hotel.heroImage];\n\n        if (hotel.rooms) {\n            for (const room of Object.values(hotel.rooms)) {\n                room.images?.forEach((image) => {\n                    newImages.push(image);\n                });\n            }\n        }\n\n        setImages(newImages);\n    }, [hotel.rooms]);\n\n    const perksFree = hotel.perks;\n\n    const onClickViewRooms = () => {\n        ccx.changeHotel(hotel);\n        navigate(StepManager.getNextStepUrl(StepHotel));\n    };\n\n    return (\n        <SimpleModal style={{ overflow: 'scroll' }} size={SimpleModalSize.Small} open={props.open} onClose={props.onClose} title={hotel.name} modalTarget={props.container}>\n            <div style={{ backgroundColor: Color.White }} id={`hotel-card-modal-${hotel.hotelID}`}>\n                <div style={{ height: '350px' }}>\n                    <ImageGallerySlider images={images} />\n                </div>\n                <div className=\"container u-pad--heavy\">\n                    <div className=\"u-marg-bottom--heavy\">\n                        <div className=\"u-marg-bottom--light\">\n                            <Headline size=\"large\" bold>\n                                {hotel.name}\n                            </Headline>\n                        </div>\n                        <Text bold color={Color.DarkGrey}>\n                            {hotel.address?.city}\n                        </Text>\n                    </div>\n                    <div className=\"u-marg-top-bottom--heavy row u-w-100\">\n                        <TransportDistanceFromHotelBlock tightMargins hotel={hotel} />\n                    </div>\n                    <div className=\"u-marg-bottom--heavy\">\n                        <Text type={TextType.Small} color={Color.DarkGrey}>\n                            {hotel.address?.line1}, {hotel.address?.line2}\n                        </Text>\n                    </div>\n                    {!!hotel.perks?.length && (\n                        <div>\n                            <Text className=\"u-marg-bottom\" bold color={Color.Accent}>\n                                And these come free...\n                            </Text>\n                            <div className=\"u-flex row u-marg-bottom--massive\">\n                                {perksFree?.map((perk) => {\n                                    return (\n                                        <div className=\"u-flex u-flex-align-center u-flex-flex-start col-sm-4 col-6 u-marg-bottom--light\" key={perk.name}>\n                                            <div style={{ backgroundColor: Color.Snow }} className=\"u-rounded u-pad--light u-marg-right--light\">\n                                                <div className=\"u-mw-16 d-flex justify-content-center\">\n                                                    <HotelPerkVisual perk={perk} />\n                                                </div>\n                                            </div>\n                                            <div className=\"u-marg-right u-block@m-\">\n                                                <Text type={TextType.Small}>{perk.name}</Text>\n                                            </div>\n                                        </div>\n                                    );\n                                })}\n                            </div>\n                        </div>\n                    )}\n                    <div>\n                        <Text type={TextType.Small}>\n                            <span dangerouslySetInnerHTML={{ __html: hotel.description || '' }}></span>\n                        </Text>\n                    </div>\n                    <LineBreak />\n                    <div className=\"u-flex\">\n                        <div style={{ paddingLeft: '0' }} className=\"col-md-6 u-flex justify-content-start flex-column align-items-start\">\n                            <Text type={TextType.Small} color={Color.Navy} inline>\n                                {t(Translation.Misc.From)}\n                            </Text>\n                            <div className=\"room-details--content-price flex-row\">\n                                <Headline bold>\n                                    <Currency hideDecimals fromCurrencyCode={hotel.defaultCurrency}>\n                                        {currentPrice}\n                                    </Currency>\n                                </Headline>\n                                <Text color={Color.DarkGrey} inline>\n                                    /{t(Translation.Misc.Night)}\n                                </Text>\n                            </div>\n                            <div className=\"u-marg-bottom\">\n                                <Text type={TextType.Small} color={Color.Grey} inline className=\"u-nowrap\">\n                                    <TaxInclusionNotice hasTax={false} />\n                                </Text>\n                            </div>\n                        </div>\n                        <div>\n                            <BEButton primary filled icon={IconType.ArrowRight} iconPosition=\"right\" onClick={onClickViewRooms}>\n                                {t(Translation.Step.Hotel.ViewRooms)}\n                            </BEButton>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </SimpleModal>\n    );\n};\n\nexport default HotelCardModal;\n"]}

package/dist/src/components/steps/hotel/HotelInfoPerksRow.js

@@ -36,19 +36,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BE_HOTEL_INFO_PERK_ROW = void 0;
 exports.default = HotelInfoPerkRow;
 const React = __importStar(require("react"));
+const HotelPerkVisual_1 = require("../../generic/HotelPerkVisual");
 const Text_1 = __importStar(require("../../generic/Text"));
 const DIProvider_1 = require("../../../providers/DIProvider");
-const HotelPerkHelper_1 = require("../../../util/HotelPerkHelper");
 const OriginalHotelInfoPerkRow = (props) => {
     const { hotel } = props;
     if (!hotel || !Array.isArray(hotel.perks)) {
         return null;
     }
     return (React.createElement(React.Fragment, null, hotel.perks.map((perk) => {
-        const perkIconElement = (0, HotelPerkHelper_1.getPerkIconElement)(perk);
         return (React.createElement("div", { className: "col-6 col-md-4", key: perk.name },
             React.createElement("div", { className: "u-flex u-marg-bottom" },
-                React.createElement("div", { className: "room-perk-icon" }, perkIconElement),
+                React.createElement("div", { className: "room-perk-icon" },
+                    React.createElement(HotelPerkVisual_1.HotelPerkVisual, { perk: perk })),
                 React.createElement("span", { className: "u-flex__item" },
                     React.createElement(Text_1.default, { type: Text_1.TextType.Small },
                         React.createElement("span", { dangerouslySetInnerHTML: {

package/dist/src/components/steps/hotel/HotelInfoPerksRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"HotelInfoPerksRow.js","sourceRoot":"/","sources":["src/components/steps/hotel/HotelInfoPerksRow.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,mCAEC;AAhDD,6CAA+B;AAE/B,kEAA2D;AAE3D,uDAAgD;AAChD,4DAA4D;AAM5D,MAAM,wBAAwB,GAAG,CAAC,KAA4B,EAAE,EAAE;IAC9D,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAExB,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;QACxC,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,OAAO,CACH,0CACK,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QACtB,MAAM,eAAe,GAAG,IAAA,oCAAkB,EAAC,IAAI,CAAC,CAAC;QAEjD,OAAO,CACH,6BAAK,SAAS,EAAC,gBAAgB,EAAC,GAAG,EAAE,IAAI,CAAC,IAAI;YAC1C,6BAAK,SAAS,EAAC,sBAAsB;gBACjC,6BAAK,SAAS,EAAC,gBAAgB,IAAE,eAAe,CAAO;gBACvD,8BAAM,SAAS,EAAC,cAAc;oBAC1B,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK;wBACtB,8BACI,uBAAuB,EAAE;gCACrB,MAAM,EAAE,IAAI,CAAC,IAAI;6BACpB,GACH,CACC,CACJ,CACL,CACJ,CACT,CAAC;IACN,CAAC,CAAC,CACH,CACN,CAAC;AACN,CAAC,CAAC;AAEW,QAAA,sBAAsB,GAAG,oBAAoB,CAAC;AAE3D,SAAwB,gBAAgB,CAAC,KAA4B;IACjE,OAAO,IAAA,mBAAM,EAAC,8BAAsB,EAAE,wBAAwB,EAAE,KAAK,CAAC,CAAC;AAC3E,CAAC","sourcesContent":["import * as React from 'react';\n\nimport Text, { TextType } from '@/components/generic/Text';\nimport { Hotel } from '@/models/Client/Hotel/Hotel';\nimport { withDI } from '@/providers/DIProvider';\nimport { getPerkIconElement } from '@/util/HotelPerkHelper';\n\nexport type HotelInfoPerkRowProps = {\n    hotel?: Hotel;\n};\n\nconst OriginalHotelInfoPerkRow = (props: HotelInfoPerkRowProps) => {\n    const { hotel } = props;\n\n    if (!hotel || !Array.isArray(hotel.perks)) {\n        return null;\n    }\n\n    return (\n        <>\n            {hotel.perks.map((perk) => {\n                const perkIconElement = getPerkIconElement(perk);\n\n                return (\n                    <div className=\"col-6 col-md-4\" key={perk.name}>\n                        <div className=\"u-flex u-marg-bottom\">\n                            <div className=\"room-perk-icon\">{perkIconElement}</div>\n                            <span className=\"u-flex__item\">\n                                <Text type={TextType.Small}>\n                                    <span\n                                        dangerouslySetInnerHTML={{\n                                            __html: perk.name,\n                                        }}\n                                    />\n                                </Text>\n                            </span>\n                        </div>\n                    </div>\n                );\n            })}\n        </>\n    );\n};\n\nexport const BE_HOTEL_INFO_PERK_ROW = 'BEHotelInfoPerkRow';\n\nexport default function HotelInfoPerkRow(props: HotelInfoPerkRowProps) {\n    return withDI(BE_HOTEL_INFO_PERK_ROW, OriginalHotelInfoPerkRow, props);\n}\n"]}
+{"version":3,"file":"HotelInfoPerksRow.js","sourceRoot":"/","sources":["src/components/steps/hotel/HotelInfoPerksRow.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,mCAEC;AAhDD,6CAA+B;AAE/B,0EAAuE;AACvE,kEAA2D;AAE3D,uDAAgD;AAMhD,MAAM,wBAAwB,GAAG,CAAC,KAA4B,EAAE,EAAE;IAC9D,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAExB,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;QACxC,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,OAAO,CACH,0CACK,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QACtB,OAAO,CACH,6BAAK,SAAS,EAAC,gBAAgB,EAAC,GAAG,EAAE,IAAI,CAAC,IAAI;YAC1C,6BAAK,SAAS,EAAC,sBAAsB;gBACjC,6BAAK,SAAS,EAAC,gBAAgB;oBAC3B,oBAAC,iCAAe,IAAC,IAAI,EAAE,IAAI,GAAI,CAC7B;gBACN,8BAAM,SAAS,EAAC,cAAc;oBAC1B,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK;wBACtB,8BACI,uBAAuB,EAAE;gCACrB,MAAM,EAAE,IAAI,CAAC,IAAI;6BACpB,GACH,CACC,CACJ,CACL,CACJ,CACT,CAAC;IACN,CAAC,CAAC,CACH,CACN,CAAC;AACN,CAAC,CAAC;AAEW,QAAA,sBAAsB,GAAG,oBAAoB,CAAC;AAE3D,SAAwB,gBAAgB,CAAC,KAA4B;IACjE,OAAO,IAAA,mBAAM,EAAC,8BAAsB,EAAE,wBAAwB,EAAE,KAAK,CAAC,CAAC;AAC3E,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { HotelPerkVisual } from '@/components/generic/HotelPerkVisual';\nimport Text, { TextType } from '@/components/generic/Text';\nimport { Hotel } from '@/models/Client/Hotel/Hotel';\nimport { withDI } from '@/providers/DIProvider';\n\nexport type HotelInfoPerkRowProps = {\n    hotel?: Hotel;\n};\n\nconst OriginalHotelInfoPerkRow = (props: HotelInfoPerkRowProps) => {\n    const { hotel } = props;\n\n    if (!hotel || !Array.isArray(hotel.perks)) {\n        return null;\n    }\n\n    return (\n        <>\n            {hotel.perks.map((perk) => {\n                return (\n                    <div className=\"col-6 col-md-4\" key={perk.name}>\n                        <div className=\"u-flex u-marg-bottom\">\n                            <div className=\"room-perk-icon\">\n                                <HotelPerkVisual perk={perk} />\n                            </div>\n                            <span className=\"u-flex__item\">\n                                <Text type={TextType.Small}>\n                                    <span\n                                        dangerouslySetInnerHTML={{\n                                            __html: perk.name,\n                                        }}\n                                    />\n                                </Text>\n                            </span>\n                        </div>\n                    </div>\n                );\n            })}\n        </>\n    );\n};\n\nexport const BE_HOTEL_INFO_PERK_ROW = 'BEHotelInfoPerkRow';\n\nexport default function HotelInfoPerkRow(props: HotelInfoPerkRowProps) {\n    return withDI(BE_HOTEL_INFO_PERK_ROW, OriginalHotelInfoPerkRow, props);\n}\n"]}

package/dist/src/components/steps/room/LargeRoomCard.js

@@ -44,13 +44,13 @@ const Translation_1 = require("translations/Translation");
 const BEButton_1 = __importDefault(require("../../generic/BEButton"));
 const Currency_1 = __importDefault(require("../../generic/Currency"));
 const Headline_1 = __importDefault(require("../../generic/Headline"));
+const HotelPerkVisual_1 = require("../../generic/HotelPerkVisual");
 const Icon_1 = __importStar(require("../../generic/Icon/Icon"));
 const TaxInclusionNotice_1 = require("../../generic/TaxInclusionNotice/TaxInclusionNotice");
 const Text_1 = __importStar(require("../../generic/Text"));
 const Tooltip_1 = __importDefault(require("../../generic/Tooltip/Tooltip"));
 const ImageGallerySlider_1 = __importDefault(require("./ImageGallerySlider"));
 const Color_1 = require("../../../util/Color");
-const HotelPerkHelper_1 = require("../../../util/HotelPerkHelper");
 const ScreenSize_1 = __importDefault(require("../../../util/ScreenSize"));
 const LargeRoomCard = (props) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -114,10 +114,10 @@ const LargeRoomCard = (props) => {
             react_1.default.createElement("div", { className: "u-flex u-flex-align-center row justify-content-center" },
                 react_1.default.createElement("div", { className: "u-flex col-md-12 flex-wrap justify-content-start" }, roomPerks === null || roomPerks === void 0 ? void 0 : roomPerks.map((perk) => {
                     const isAllPerksOpened = beContext.screenSize < ScreenSize_1.default.ExtraLarge;
-                    const perkIconElement = (0, HotelPerkHelper_1.getPerkIconElement)(perk, Color_1.Color.Snow);
                     return (react_1.default.createElement("div", { className: "u-flex justify-content-start u-flex-align-center u-marg-bottom u-w-48@l- u-pad-left--light u-pad-right--light", key: perk.name },
                         react_1.default.createElement(Tooltip_1.default, { title: perk.name },
-                            react_1.default.createElement("div", null, perkIconElement)),
+                            react_1.default.createElement("div", null,
+                                react_1.default.createElement(HotelPerkVisual_1.HotelPerkVisual, { perk: perk, iconBackgroundColor: Color_1.Color.Snow }))),
                         react_1.default.createElement("div", { className: `u-marg-left u-marg-right ${isAllPerksOpened ? '' : 'u-none'}` },
                             react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small }, (perk === null || perk === void 0 ? void 0 : perk.perkNameRenderer)
                                 ? perk.perkNameRenderer({