@roomstay/frontend 2.1.6 → 2.1.7

package/dist/src/pages/findReservation/ReservationRowModal.js

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const SimpleModal_1 = __importStar(require("../../components/generic/modal/SimpleModal"));
 const ImageGallerySlider_1 = __importDefault(require("../../components/steps/room/ImageGallerySlider"));
 const Headline_1 = __importDefault(require("../../components/generic/Headline"));
@@ -55,73 +55,73 @@ function ReservationRowModal(props) {
     const lastNight = (0, dayjs_1.default)(nightKeys[nightKeys.length - 1]).add(1, 'day');
     const guaranteePolicy = reservation.guaranteePolicy;
     const cancelPolicy = reservation.cancelPolicy;
-    const roomName = reservation.roomType ? reservation.roomType : (_b = hotel.rooms[reservation.roomCode]) === null || _b === void 0 ? void 0 : _b.name;
-    return (React.createElement(SimpleModal_1.default, { open: props.open, onClose: props.onClose, title: `Reservation #${props.reservation.reservationNumber}`, size: SimpleModal_1.SimpleModalSize.Small },
-        React.createElement(React.Fragment, null,
-            React.createElement("div", { style: { height: '300px' } },
-                React.createElement(ImageGallerySlider_1.default, { images: images })),
-            React.createElement("div", { className: "u-marg-heavy u-marg@m-" },
-                React.createElement("div", { className: "u-marg-bottom" },
-                    React.createElement(Headline_1.default, { size: 'large', bold: true }, roomName),
-                    React.createElement(Text_1.default, { type: Text_1.TextType.Small }, reservation.rate)),
-                React.createElement("ul", null,
-                    React.createElement("li", { className: "u-flex justify-content-start u-marg-bottom--light" },
-                        React.createElement(Icon_1.default, { color: Color_1.Color.Grey, icon: Icon_1.IconType.Person }),
-                        React.createElement("div", { className: "u-marg-left--light" },
-                            React.createElement(Text_1.default, { type: Text_1.TextType.Small },
+    const roomName = reservation.roomType ? reservation.roomType : (_b = hotel === null || hotel === void 0 ? void 0 : hotel.rooms[reservation.roomCode]) === null || _b === void 0 ? void 0 : _b.name;
+    return (react_1.default.createElement(SimpleModal_1.default, { open: props.open, onClose: props.onClose, title: `Reservation #${props.reservation.reservationNumber}`, size: SimpleModal_1.SimpleModalSize.Small },
+        react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", { style: { height: '300px' } },
+                react_1.default.createElement(ImageGallerySlider_1.default, { images: images })),
+            react_1.default.createElement("div", { className: "u-marg-heavy u-marg@m-" },
+                react_1.default.createElement("div", { className: "u-marg-bottom" },
+                    react_1.default.createElement(Headline_1.default, { size: "large", bold: true }, roomName),
+                    react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small }, reservation.rate)),
+                react_1.default.createElement("ul", null,
+                    react_1.default.createElement("li", { className: "u-flex justify-content-start u-marg-bottom--light" },
+                        react_1.default.createElement(Icon_1.default, { color: Color_1.Color.Grey, icon: Icon_1.IconType.Person }),
+                        react_1.default.createElement("div", { className: "u-marg-left--light" },
+                            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small },
                                 reservation.guest.firstName,
                                 " ",
                                 reservation.guest.lastName,
                                 " ",
-                                React.createElement("span", { style: { color: Color_1.Color.DarkGrey } },
+                                react_1.default.createElement("span", { style: { color: Color_1.Color.DarkGrey } },
                                     "- ",
                                     adultsAndChildren)))),
-                    React.createElement("li", { className: "u-flex justify-content-start u-marg-bottom--light" },
-                        React.createElement(Icon_1.default, { icon: Icon_1.IconType.Email, color: Color_1.Color.Grey }),
-                        React.createElement("div", { className: "u-marg-left--light" },
-                            React.createElement(Text_1.default, { type: Text_1.TextType.Small }, reservation.guest.email))),
-                    React.createElement("li", { className: "u-flex justify-content-start u-marg-bottom--light" },
-                        React.createElement(Icon_1.default, { icon: Icon_1.IconType.Calendar, color: Color_1.Color.Grey }),
-                        React.createElement("div", { className: "u-marg-left--light" },
-                            React.createElement(Text_1.default, { type: Text_1.TextType.Small }, firstNight.format('dddd, MMM D, YYYY')),
-                            React.createElement(Text_1.default, { type: Text_1.TextType.Small }, lastNight.format('dddd, MMM D, YYYY')))),
-                    React.createElement("li", { className: "u-flex justify-content-start" },
-                        React.createElement(Icon_1.default, { icon: Icon_1.IconType.CreditCard, color: Color_1.Color.Grey }),
-                        React.createElement("div", { className: "u-marg-left--light" },
-                            React.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                    react_1.default.createElement("li", { className: "u-flex justify-content-start u-marg-bottom--light" },
+                        react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Email, color: Color_1.Color.Grey }),
+                        react_1.default.createElement("div", { className: "u-marg-left--light" },
+                            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small }, reservation.guest.email))),
+                    react_1.default.createElement("li", { className: "u-flex justify-content-start u-marg-bottom--light" },
+                        react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Calendar, color: Color_1.Color.Grey }),
+                        react_1.default.createElement("div", { className: "u-marg-left--light" },
+                            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small }, firstNight.format('dddd, MMM D, YYYY')),
+                            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small }, lastNight.format('dddd, MMM D, YYYY')))),
+                    react_1.default.createElement("li", { className: "u-flex justify-content-start" },
+                        react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.CreditCard, color: Color_1.Color.Grey }),
+                        react_1.default.createElement("div", { className: "u-marg-left--light" },
+                            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small },
                                 "\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 ",
                                 reservation.paymentCard.last4,
                                 " ",
-                                React.createElement("span", { style: { color: Color_1.Color.DarkGrey } },
+                                react_1.default.createElement("span", { style: { color: Color_1.Color.DarkGrey } },
                                     "(",
                                     reservation.paymentCard.type,
                                     ")"))))),
-                React.createElement(LineBreak_1.default, null),
+                react_1.default.createElement(LineBreak_1.default, null),
                 nightKeys.map((night) => {
                     const currentDay = (0, dayjs_1.default)(night);
                     const currentDayFormatted = currentDay.format('dddd, MMM DD, YYYY');
-                    return (React.createElement("div", { className: "u-flex u-marg-bottom", key: reservation.reservationNumber },
-                        React.createElement(Text_1.default, null, currentDayFormatted),
-                        React.createElement(Text_1.default, { color: Color_1.Color.DarkGrey },
-                            React.createElement(Currency_1.default, null, reservation.nights[night].total))));
+                    return (react_1.default.createElement("div", { className: "u-flex u-marg-bottom", key: reservation.reservationNumber },
+                        react_1.default.createElement(Text_1.default, null, currentDayFormatted),
+                        react_1.default.createElement(Text_1.default, { color: Color_1.Color.DarkGrey },
+                            react_1.default.createElement(Currency_1.default, null, reservation.nights[night].total))));
                 }),
-                React.createElement("div", { className: "u-flex" },
-                    React.createElement(Text_1.default, null, lastNight.format('dddd, MMM DD, YYYY')),
-                    React.createElement(Text_1.default, { color: Color_1.Color.Success }, "Check Out")),
-                React.createElement(LineBreak_1.default, null),
-                React.createElement("div", null,
-                    guaranteePolicy && (React.createElement("div", { className: "u-marg-bottom--heavy" },
-                        React.createElement("div", { className: "u-marg-bottom--light" },
-                            React.createElement(Text_1.default, { type: Text_1.TextType.Small },
-                                React.createElement("strong", null, t(Translation_1.Translation.Misc.GuaranteePolicy)))),
-                        React.createElement(Text_1.default, { type: Text_1.TextType.Small },
-                            React.createElement("span", { className: "u-clear-font-weight", dangerouslySetInnerHTML: { __html: guaranteePolicy } })))),
-                    React.createElement("div", { className: "u-marg-bottom--heavy" },
-                        React.createElement("div", { className: "u-marg-bottom--light" },
-                            React.createElement(Text_1.default, { type: Text_1.TextType.Small },
-                                React.createElement("strong", null, t(Translation_1.Translation.Misc.CancellationPolicy)))),
-                        React.createElement(Text_1.default, { type: Text_1.TextType.Small },
-                            React.createElement("span", { className: "u-clear-font-weight", dangerouslySetInnerHTML: { __html: cancelPolicy } }))))))));
+                react_1.default.createElement("div", { className: "u-flex" },
+                    react_1.default.createElement(Text_1.default, null, lastNight.format('dddd, MMM DD, YYYY')),
+                    react_1.default.createElement(Text_1.default, { color: Color_1.Color.Success }, "Check Out")),
+                react_1.default.createElement(LineBreak_1.default, null),
+                react_1.default.createElement("div", null,
+                    guaranteePolicy && (react_1.default.createElement("div", { className: "u-marg-bottom--heavy" },
+                        react_1.default.createElement("div", { className: "u-marg-bottom--light" },
+                            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                                react_1.default.createElement("strong", null, t(Translation_1.Translation.Misc.GuaranteePolicy)))),
+                        react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                            react_1.default.createElement("span", { className: "u-clear-font-weight", dangerouslySetInnerHTML: { __html: guaranteePolicy } })))),
+                    react_1.default.createElement("div", { className: "u-marg-bottom--heavy" },
+                        react_1.default.createElement("div", { className: "u-marg-bottom--light" },
+                            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                                react_1.default.createElement("strong", null, t(Translation_1.Translation.Misc.CancellationPolicy)))),
+                        react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                            react_1.default.createElement("span", { className: "u-clear-font-weight", dangerouslySetInnerHTML: { __html: cancelPolicy } }))))))));
 }
 exports.default = ReservationRowModal;
 //# sourceMappingURL=ReservationRowModal.js.map

package/dist/src/pages/findReservation/ReservationRowModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReservationRowModal.js","sourceRoot":"/","sources":["src/pages/findReservation/ReservationRowModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { ReservationDTO } from '@/models/Api/ReservationsDTO';\nimport SimpleModal, { SimpleModalSize } from '@/components/generic/modal/SimpleModal';\nimport ImageGallerySlider from '@/components/steps/room/ImageGallerySlider';\nimport Headline from '@/components/generic/Headline';\nimport Text, { TextType } from '@/components/generic/Text';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport { Color } from '@/util/Color';\nimport StringHelper from '@/util/StringHelper';\nimport { Translation } from 'translations/Translation';\nimport dayjs from 'dayjs';\nimport { useTranslation } from 'react-i18next';\nimport LineBreak from '@/components/generic/LineBreak';\nimport Currency from '@/components/generic/Currency';\nimport { useCurrentHotel } from '@frontend/hooks';\n\ninterface ReservationRowModalProps {\n    reservation: ReservationDTO;\n    onClose: () => void;\n    open: boolean;\n    images?: string[];\n}\n\nexport default function ReservationRowModal(props: ReservationRowModalProps) {\n    const { hotel } = useCurrentHotel();\n\n    const { reservation } = props;\n    const { t } = useTranslation();\n\n    const images = reservation.images && reservation.images.length ? reservation.images : props.images ?? [];\n\n    let adultsAndChildren = StringHelper.pluralWithDictAndCount(reservation.guestCounts.adults, Translation.Step.Date.Adult, t);\n\n    if (reservation.guestCounts.children) {\n        adultsAndChildren += ', ' + StringHelper.pluralWithDictAndCount(reservation.guestCounts.children, Translation.Step.Date.Child, t);\n    }\n\n    const nightKeys = Object.keys(reservation.nights);\n\n    const firstNight = dayjs(nightKeys[0]);\n    const lastNight = dayjs(nightKeys[nightKeys.length - 1]).add(1, 'day');\n\n    const guaranteePolicy = reservation.guaranteePolicy;\n    const cancelPolicy = reservation.cancelPolicy;\n\n    const roomName = reservation.roomType ? reservation.roomType : hotel.rooms[reservation.roomCode]?.name;\n\n    return (\n        <SimpleModal open={props.open} onClose={props.onClose} title={`Reservation #${props.reservation.reservationNumber}`} size={SimpleModalSize.Small}>\n            <>\n                <div style={{ height: '300px' }}>\n                    <ImageGallerySlider images={images} />\n                </div>\n                <div className=\"u-marg-heavy u-marg@m-\">\n                    <div className=\"u-marg-bottom\">\n                        <Headline size={'large'} bold={true}>\n                            {roomName}\n                        </Headline>\n                        <Text type={TextType.Small}>{reservation.rate}</Text>\n                    </div>\n\n                    <ul>\n                        <li className=\"u-flex justify-content-start u-marg-bottom--light\">\n                            <Icon color={Color.Grey} icon={IconType.Person} />\n                            <div className=\"u-marg-left--light\">\n                                <Text type={TextType.Small}>\n                                    {reservation.guest.firstName} {reservation.guest.lastName} <span style={{ color: Color.DarkGrey }}>- {adultsAndChildren}</span>\n                                </Text>\n                            </div>\n                        </li>\n                        <li className=\"u-flex justify-content-start u-marg-bottom--light\">\n                            <Icon icon={IconType.Email} color={Color.Grey} />\n                            <div className=\"u-marg-left--light\">\n                                <Text type={TextType.Small}>{reservation.guest.email}</Text>\n                            </div>\n                        </li>\n                        <li className=\"u-flex justify-content-start u-marg-bottom--light\">\n                            <Icon icon={IconType.Calendar} color={Color.Grey} />\n                            <div className=\"u-marg-left--light\">\n                                <Text type={TextType.Small}>{firstNight.format('dddd, MMM D, YYYY')}</Text>\n                                <Text type={TextType.Small}>{lastNight.format('dddd, MMM D, YYYY')}</Text>\n                            </div>\n                        </li>\n                        <li className=\"u-flex justify-content-start\">\n                            <Icon icon={IconType.CreditCard} color={Color.Grey} />\n                            <div className=\"u-marg-left--light\">\n                                <Text type={TextType.Small}>\n                                    •••• •••• •••• {reservation.paymentCard.last4} <span style={{ color: Color.DarkGrey }}>({reservation.paymentCard.type})</span>\n                                </Text>\n                            </div>\n                        </li>\n                    </ul>\n\n                    <LineBreak />\n\n                    {nightKeys.map((night) => {\n                        const currentDay = dayjs(night);\n                        const currentDayFormatted = currentDay.format('dddd, MMM DD, YYYY');\n\n                        return (\n                            <div className=\"u-flex u-marg-bottom\" key={reservation.reservationNumber}>\n                                <Text>{currentDayFormatted}</Text>\n                                <Text color={Color.DarkGrey}>\n                                    <Currency>{reservation.nights[night].total}</Currency>\n                                </Text>\n                            </div>\n                        );\n                    })}\n                    <div className=\"u-flex\">\n                        <Text>{lastNight.format('dddd, MMM DD, YYYY')}</Text>\n                        <Text color={Color.Success}>Check Out</Text>\n                    </div>\n\n                    <LineBreak />\n\n                    <div>\n                        {guaranteePolicy && (\n                            <div className=\"u-marg-bottom--heavy\">\n                                <div className=\"u-marg-bottom--light\">\n                                    <Text type={TextType.Small}>\n                                        <strong>{t(Translation.Misc.GuaranteePolicy)}</strong>\n                                    </Text>\n                                </div>\n                                <Text type={TextType.Small}>\n                                    <span className=\"u-clear-font-weight\" dangerouslySetInnerHTML={{ __html: guaranteePolicy }} />\n                                </Text>\n                            </div>\n                        )}\n                        {\n                            <div className=\"u-marg-bottom--heavy\">\n                                <div className=\"u-marg-bottom--light\">\n                                    <Text type={TextType.Small}>\n                                        <strong>{t(Translation.Misc.CancellationPolicy)}</strong>\n                                    </Text>\n                                </div>\n                                <Text type={TextType.Small}>\n                                    <span className=\"u-clear-font-weight\" dangerouslySetInnerHTML={{ __html: cancelPolicy }} />\n                                </Text>\n                            </div>\n                        }\n                    </div>\n                </div>\n            </>\n        </SimpleModal>\n    );\n}\n"]}
+{"version":3,"file":"ReservationRowModal.js","sourceRoot":"/","sources":["src/pages/findReservation/ReservationRowModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { ReservationDTO } from '@/models/Api/ReservationsDTO';\nimport SimpleModal, { SimpleModalSize } from '@/components/generic/modal/SimpleModal';\nimport ImageGallerySlider from '@/components/steps/room/ImageGallerySlider';\nimport Headline from '@/components/generic/Headline';\nimport Text, { TextType } from '@/components/generic/Text';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport { Color } from '@/util/Color';\nimport StringHelper from '@/util/StringHelper';\nimport { Translation } from 'translations/Translation';\nimport dayjs from 'dayjs';\nimport { useTranslation } from 'react-i18next';\nimport LineBreak from '@/components/generic/LineBreak';\nimport Currency from '@/components/generic/Currency';\nimport { useCurrentHotel } from '@frontend/hooks';\n\ninterface ReservationRowModalProps {\n    reservation: ReservationDTO;\n    onClose: () => void;\n    open: boolean;\n    images?: string[];\n}\n\nexport default function ReservationRowModal(props: ReservationRowModalProps) {\n    const { hotel } = useCurrentHotel();\n\n    const { reservation } = props;\n    const { t } = useTranslation();\n\n    const images = reservation.images && reservation.images.length ? reservation.images : props.images ?? [];\n\n    let adultsAndChildren = StringHelper.pluralWithDictAndCount(reservation.guestCounts.adults, Translation.Step.Date.Adult, t);\n\n    if (reservation.guestCounts.children) {\n        adultsAndChildren += ', ' + StringHelper.pluralWithDictAndCount(reservation.guestCounts.children, Translation.Step.Date.Child, t);\n    }\n\n    const nightKeys = Object.keys(reservation.nights);\n\n    const firstNight = dayjs(nightKeys[0]);\n    const lastNight = dayjs(nightKeys[nightKeys.length - 1]).add(1, 'day');\n\n    const guaranteePolicy = reservation.guaranteePolicy;\n    const cancelPolicy = reservation.cancelPolicy;\n\n    const roomName = reservation.roomType ? reservation.roomType : hotel?.rooms[reservation.roomCode]?.name;\n\n    return (\n        <SimpleModal open={props.open} onClose={props.onClose} title={`Reservation #${props.reservation.reservationNumber}`} size={SimpleModalSize.Small}>\n            <>\n                <div style={{ height: '300px' }}>\n                    <ImageGallerySlider images={images} />\n                </div>\n                <div className=\"u-marg-heavy u-marg@m-\">\n                    <div className=\"u-marg-bottom\">\n                        <Headline size=\"large\" bold>\n                            {roomName}\n                        </Headline>\n                        <Text type={TextType.Small}>{reservation.rate}</Text>\n                    </div>\n\n                    <ul>\n                        <li className=\"u-flex justify-content-start u-marg-bottom--light\">\n                            <Icon color={Color.Grey} icon={IconType.Person} />\n                            <div className=\"u-marg-left--light\">\n                                <Text type={TextType.Small}>\n                                    {reservation.guest.firstName} {reservation.guest.lastName} <span style={{ color: Color.DarkGrey }}>- {adultsAndChildren}</span>\n                                </Text>\n                            </div>\n                        </li>\n                        <li className=\"u-flex justify-content-start u-marg-bottom--light\">\n                            <Icon icon={IconType.Email} color={Color.Grey} />\n                            <div className=\"u-marg-left--light\">\n                                <Text type={TextType.Small}>{reservation.guest.email}</Text>\n                            </div>\n                        </li>\n                        <li className=\"u-flex justify-content-start u-marg-bottom--light\">\n                            <Icon icon={IconType.Calendar} color={Color.Grey} />\n                            <div className=\"u-marg-left--light\">\n                                <Text type={TextType.Small}>{firstNight.format('dddd, MMM D, YYYY')}</Text>\n                                <Text type={TextType.Small}>{lastNight.format('dddd, MMM D, YYYY')}</Text>\n                            </div>\n                        </li>\n                        <li className=\"u-flex justify-content-start\">\n                            <Icon icon={IconType.CreditCard} color={Color.Grey} />\n                            <div className=\"u-marg-left--light\">\n                                <Text type={TextType.Small}>\n                                    •••• •••• •••• {reservation.paymentCard.last4} <span style={{ color: Color.DarkGrey }}>({reservation.paymentCard.type})</span>\n                                </Text>\n                            </div>\n                        </li>\n                    </ul>\n\n                    <LineBreak />\n\n                    {nightKeys.map((night) => {\n                        const currentDay = dayjs(night);\n                        const currentDayFormatted = currentDay.format('dddd, MMM DD, YYYY');\n\n                        return (\n                            <div className=\"u-flex u-marg-bottom\" key={reservation.reservationNumber}>\n                                <Text>{currentDayFormatted}</Text>\n                                <Text color={Color.DarkGrey}>\n                                    <Currency>{reservation.nights[night].total}</Currency>\n                                </Text>\n                            </div>\n                        );\n                    })}\n                    <div className=\"u-flex\">\n                        <Text>{lastNight.format('dddd, MMM DD, YYYY')}</Text>\n                        <Text color={Color.Success}>Check Out</Text>\n                    </div>\n\n                    <LineBreak />\n\n                    <div>\n                        {guaranteePolicy && (\n                            <div className=\"u-marg-bottom--heavy\">\n                                <div className=\"u-marg-bottom--light\">\n                                    <Text type={TextType.Small}>\n                                        <strong>{t(Translation.Misc.GuaranteePolicy)}</strong>\n                                    </Text>\n                                </div>\n                                <Text type={TextType.Small}>\n                                    <span className=\"u-clear-font-weight\" dangerouslySetInnerHTML={{ __html: guaranteePolicy }} />\n                                </Text>\n                            </div>\n                        )}\n                        <div className=\"u-marg-bottom--heavy\">\n                            <div className=\"u-marg-bottom--light\">\n                                <Text type={TextType.Small}>\n                                    <strong>{t(Translation.Misc.CancellationPolicy)}</strong>\n                                </Text>\n                            </div>\n                            <Text type={TextType.Small}>\n                                <span className=\"u-clear-font-weight\" dangerouslySetInnerHTML={{ __html: cancelPolicy }} />\n                            </Text>\n                        </div>\n                    </div>\n                </div>\n            </>\n        </SimpleModal>\n    );\n}\n"]}

package/dist/src/pages/hotel/HotelInfo.js

@@ -26,13 +26,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const Color_1 = require("../../util/Color");
 const Icon_1 = __importStar(require("../../components/generic/Icon/Icon"));
 const Text_1 = __importStar(require("../../components/generic/Text"));
 const Headline_1 = __importDefault(require("../../components/generic/Headline"));
 const HotelLocationMap_1 = __importDefault(require("../../components/generic/map/HotelLocationMap"));
-const react_1 = require("react");
+const react_2 = require("react");
 const fslightbox_react_1 = __importDefault(require("fslightbox-react"));
 const TransportDistanceFromHotelBlock_1 = __importDefault(require("../../components/summary/TransportDistanceFromHotelBlock"));
 const hooks_1 = require("../../hooks/index.js");
@@ -50,8 +50,8 @@ function HotelInfo() {
     const { t } = (0, react_i18next_1.useTranslation)();
     const imageUrl = hotel === null || hotel === void 0 ? void 0 : hotel.heroImage;
     const { line1, line2, postalCode, country } = (_a = hotel === null || hotel === void 0 ? void 0 : hotel.address) !== null && _a !== void 0 ? _a : {};
-    const [lightboxController, setLightboxController] = (0, react_1.useState)({ toggler: false, slide: 1 });
-    const [images, setImages] = (0, react_1.useState)([]);
+    const [lightboxController, setLightboxController] = (0, react_2.useState)({ toggler: false, slide: 1 });
+    const [images, setImages] = (0, react_2.useState)([]);
     const openSlider = (slide) => {
         setLightboxController((controller) => ({ toggler: !controller.toggler, slide: slide + 1 }));
     };
@@ -59,15 +59,15 @@ function HotelInfo() {
         openSlider(4);
     };
     const { raise } = (0, hooks_1.useEvent)();
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         const event = new events_1.StepHotelInfoViewEvent();
         raise(event);
     }, []);
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         var _a, _b;
         const newImages = [];
         if ((_a = hotel === null || hotel === void 0 ? void 0 : hotel.images) === null || _a === void 0 ? void 0 : _a.length) {
-            newImages.push(...hotel === null || hotel === void 0 ? void 0 : hotel.images);
+            newImages.push(...hotel.images);
         }
         else if (hotel === null || hotel === void 0 ? void 0 : hotel.rooms) {
             for (const room of Object.values(hotel === null || hotel === void 0 ? void 0 : hotel.rooms)) {
@@ -86,104 +86,104 @@ function HotelInfo() {
             openSlider(index);
         };
         const resizedUrl = ImageProvider_1.default.resizeImage(images[index], ImageProvider_1.ImageSize.Small);
-        return (React.createElement("div", { style: { backgroundImage: `url('${resizedUrl}')`, paddingTop: '75%' }, className: "c-images u-block u-w-100 u-marg-bottom u-marg-bottom--heavy", onClick: openSliderOnClickHandler }));
+        return (react_1.default.createElement("div", { style: { backgroundImage: `url('${resizedUrl}')`, paddingTop: '75%' }, className: "c-images u-block u-w-100 u-marg-bottom u-marg-bottom--heavy", onClick: openSliderOnClickHandler }));
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { style: { backgroundImage: `url('${imageUrl}')` }, className: "c-masthead has-tint" },
-            React.createElement("div", { className: "container" },
-                React.createElement("div", { className: "c-masthead__body u-fill-white u-pad--heavy u-shadow-accent" },
-                    React.createElement("h1", { className: "c-masthead__header" }, hotel === null || hotel === void 0 ? void 0 : hotel.name),
-                    React.createElement("h2", { className: "c-masthead__sub-header" }, (_b = hotel === null || hotel === void 0 ? void 0 : hotel.address) === null || _b === void 0 ? void 0 : _b.country)))),
-        React.createElement("div", { className: "u-fill-snow u-pad--heavy-med u-pad-top-bottom--heavy@m-" },
-            React.createElement("div", { className: "container" },
-                React.createElement("div", { className: "row" },
-                    React.createElement("div", { className: "col-md-6 u-flex align-items-center" },
-                        React.createElement("ul", null,
-                            React.createElement("li", { className: "u-flex u-marg-bottom--heavy" },
-                                React.createElement(Icon_1.default, { icon: Icon_1.IconType.Map, size: "1.3em", color: Color_1.Color.Accent }),
-                                React.createElement("span", { className: "u-flex__item u-marg-left" },
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { style: { backgroundImage: `url('${imageUrl}')` }, className: "c-masthead has-tint" },
+            react_1.default.createElement("div", { className: "container" },
+                react_1.default.createElement("div", { className: "c-masthead__body u-fill-white u-pad--heavy u-shadow-accent" },
+                    react_1.default.createElement("h1", { className: "c-masthead__header" }, hotel === null || hotel === void 0 ? void 0 : hotel.name),
+                    react_1.default.createElement("h2", { className: "c-masthead__sub-header" }, (_b = hotel === null || hotel === void 0 ? void 0 : hotel.address) === null || _b === void 0 ? void 0 : _b.country)))),
+        react_1.default.createElement("div", { className: "u-fill-snow u-pad--heavy-med u-pad-top-bottom--heavy@m-" },
+            react_1.default.createElement("div", { className: "container" },
+                react_1.default.createElement("div", { className: "row" },
+                    react_1.default.createElement("div", { className: "col-md-6 u-flex align-items-center" },
+                        react_1.default.createElement("ul", null,
+                            react_1.default.createElement("li", { className: "u-flex u-marg-bottom--heavy" },
+                                react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Map, size: "1.3em", color: Color_1.Color.Accent }),
+                                react_1.default.createElement("span", { className: "u-flex__item u-marg-left" },
                                     line1,
-                                    React.createElement("br", null),
+                                    react_1.default.createElement("br", null),
                                     line2,
                                     " ",
                                     postalCode,
                                     ", ",
                                     country)),
-                            React.createElement("li", { className: "u-flex u-marg-bottom--heavy" },
-                                React.createElement(Icon_1.default, { icon: Icon_1.IconType.Phone, size: "1.3em", color: Color_1.Color.Accent }),
-                                React.createElement("span", { className: "u-flex__item u-marg-left" }, hotel === null || hotel === void 0 ? void 0 : hotel.phone)),
-                            React.createElement("li", { className: "u-flex u-marg-bottom--heavy" },
-                                React.createElement(Icon_1.default, { icon: Icon_1.IconType.Hotel2, size: "1.3em", color: Color_1.Color.Accent }),
-                                React.createElement("span", { className: "u-flex__item u-marg-left" },
-                                    React.createElement("a", { href: hotel === null || hotel === void 0 ? void 0 : hotel.hotelUrl, style: { color: 'var(--rs-color-accent-1)' } }, hotel === null || hotel === void 0 ? void 0 : hotel.name))),
-                            React.createElement("li", { className: "u-flex" },
-                                React.createElement(BEButton_1.default, { icon: Icon_1.IconType.ArrowRight, primary: true, filled: true, iconPosition: 'right', onClick: onBookNowClick }, t(Translation_1.Translation.HotelInfo.BookNowButton))))),
-                    React.createElement("div", { className: "col-md-6" },
-                        React.createElement("div", { className: "c-overlap" },
-                            React.createElement("div", { className: "u-marg-bottom u-marg-bottom--heavy u-marg-top u-marg-top--heavy", style: { height: '240px' } },
-                                React.createElement(HotelLocationMap_1.default, null)),
-                            React.createElement("div", { className: "u-flex u-flex-column justify-content-center" },
-                                React.createElement(TransportDistanceFromHotelBlock_1.default, { hotel: hotel }))))))),
-        React.createElement("div", { className: "u-pad u-pad--heavy-plus u-pad-top-bottom--heavy@m-" },
-            React.createElement("div", { className: "container" },
-                React.createElement("div", { className: "row" },
-                    React.createElement("div", { className: "col-lg-6" },
-                        React.createElement("div", { className: "u-marg-bottom u-marg-bottom--heavy" },
-                            React.createElement("div", { className: "u-marg-bottom u-marg-bottom--heavy" },
-                                React.createElement(Headline_1.default, { bold: true }, "About")),
-                            React.createElement("div", { className: "u-marg-bottom u-marg-bottom--heavy" },
-                                React.createElement(Text_1.default, { type: Text_1.TextType.Small },
-                                    React.createElement("span", { dangerouslySetInnerHTML: { __html: (_c = hotel === null || hotel === void 0 ? void 0 : hotel.description) === null || _c === void 0 ? void 0 : _c.replace('\r\n', '<br/><br/>') } })),
-                                !!(hotel === null || hotel === void 0 ? void 0 : hotel.locationDescription) && (React.createElement(React.Fragment, null,
-                                    React.createElement("div", { className: "u-marg-top" },
-                                        React.createElement(Text_1.default, { type: Text_1.TextType.Small },
-                                            React.createElement("strong", null, "Location"))),
-                                    React.createElement(Text_1.default, { type: Text_1.TextType.Small },
-                                        React.createElement("span", { dangerouslySetInnerHTML: { __html: (_d = hotel === null || hotel === void 0 ? void 0 : hotel.locationDescription) === null || _d === void 0 ? void 0 : _d.replace('\r\n', '<br/><br/>') } }))))),
-                            !!((_e = hotel === null || hotel === void 0 ? void 0 : hotel.perks) === null || _e === void 0 ? void 0 : _e.length) && (React.createElement(React.Fragment, null,
-                                React.createElement("div", { className: "u-marg-bottom u-marg-bottom--heavy" },
-                                    React.createElement(Text_1.default, { type: Text_1.TextType.Small },
-                                        React.createElement("strong", null, "And you get all these for free:"))),
-                                React.createElement("div", { className: "row" }, hotel === null || hotel === void 0 ? void 0 : hotel.perks.map((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" }, perk.iconElement ? perk.iconElement : React.createElement(Icon_1.default, { icon: perk.icon })),
-                                            React.createElement("span", { className: "u-flex__item" },
-                                                React.createElement(Text_1.default, { type: Text_1.TextType.Small }, perk.name)))));
+                            react_1.default.createElement("li", { className: "u-flex u-marg-bottom--heavy" },
+                                react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Phone, size: "1.3em", color: Color_1.Color.Accent }),
+                                react_1.default.createElement("span", { className: "u-flex__item u-marg-left" }, hotel === null || hotel === void 0 ? void 0 : hotel.phone)),
+                            react_1.default.createElement("li", { className: "u-flex u-marg-bottom--heavy" },
+                                react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Hotel2, size: "1.3em", color: Color_1.Color.Accent }),
+                                react_1.default.createElement("span", { className: "u-flex__item u-marg-left" },
+                                    react_1.default.createElement("a", { href: hotel === null || hotel === void 0 ? void 0 : hotel.hotelUrl, style: { color: 'var(--rs-color-accent-1)' } }, hotel === null || hotel === void 0 ? void 0 : hotel.name))),
+                            react_1.default.createElement("li", { className: "u-flex" },
+                                react_1.default.createElement(BEButton_1.default, { icon: Icon_1.IconType.ArrowRight, primary: true, filled: true, iconPosition: "right", onClick: onBookNowClick }, t(Translation_1.Translation.HotelInfo.BookNowButton))))),
+                    react_1.default.createElement("div", { className: "col-md-6" },
+                        react_1.default.createElement("div", { className: "c-overlap" },
+                            react_1.default.createElement("div", { className: "u-marg-bottom u-marg-bottom--heavy u-marg-top u-marg-top--heavy", style: { height: '240px' } },
+                                react_1.default.createElement(HotelLocationMap_1.default, null)),
+                            react_1.default.createElement("div", { className: "u-flex u-flex-column justify-content-center" },
+                                react_1.default.createElement(TransportDistanceFromHotelBlock_1.default, { hotel: hotel }))))))),
+        react_1.default.createElement("div", { className: "u-pad u-pad--heavy-plus u-pad-top-bottom--heavy@m-" },
+            react_1.default.createElement("div", { className: "container" },
+                react_1.default.createElement("div", { className: "row" },
+                    react_1.default.createElement("div", { className: "col-lg-6" },
+                        react_1.default.createElement("div", { className: "u-marg-bottom u-marg-bottom--heavy" },
+                            react_1.default.createElement("div", { className: "u-marg-bottom u-marg-bottom--heavy" },
+                                react_1.default.createElement(Headline_1.default, { bold: true }, "About")),
+                            react_1.default.createElement("div", { className: "u-marg-bottom u-marg-bottom--heavy" },
+                                react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                                    react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: ((_c = hotel === null || hotel === void 0 ? void 0 : hotel.description) === null || _c === void 0 ? void 0 : _c.replace('\r\n', '<br/><br/>')) || '' } })),
+                                !!(hotel === null || hotel === void 0 ? void 0 : hotel.locationDescription) && (react_1.default.createElement(react_1.default.Fragment, null,
+                                    react_1.default.createElement("div", { className: "u-marg-top" },
+                                        react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                                            react_1.default.createElement("strong", null, "Location"))),
+                                    react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                                        react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: (_d = hotel === null || hotel === void 0 ? void 0 : hotel.locationDescription) === null || _d === void 0 ? void 0 : _d.replace('\r\n', '<br/><br/>') } }))))),
+                            !!((_e = hotel === null || hotel === void 0 ? void 0 : hotel.perks) === null || _e === void 0 ? void 0 : _e.length) && (react_1.default.createElement(react_1.default.Fragment, null,
+                                react_1.default.createElement("div", { className: "u-marg-bottom u-marg-bottom--heavy" },
+                                    react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                                        react_1.default.createElement("strong", null, "And you get all these for free:"))),
+                                react_1.default.createElement("div", { className: "row" }, hotel === null || hotel === void 0 ? void 0 : hotel.perks.map((perk) => {
+                                    return (react_1.default.createElement("div", { className: "col-6 col-md-4", key: perk.name },
+                                        react_1.default.createElement("div", { className: "u-flex u-marg-bottom" },
+                                            react_1.default.createElement("div", { className: "room-perk-icon" }, perk.iconElement ? perk.iconElement : react_1.default.createElement(Icon_1.default, { icon: perk.icon })),
+                                            react_1.default.createElement("span", { className: "u-flex__item" },
+                                                react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small }, perk.name)))));
                                 }))))),
-                        !!((_f = hotel === null || hotel === void 0 ? void 0 : hotel.hotelServices) === null || _f === void 0 ? void 0 : _f.length) && (React.createElement("div", { className: "u-marg-bottom u-marg-bottom--heavy" },
-                            React.createElement("div", { className: "u-marg-bottom--heavy" },
-                                React.createElement(Headline_1.default, { bold: true }, "Hotel Amenities")),
-                            React.createElement("div", { className: "row" }, hotel === null || hotel === void 0 ? void 0 : hotel.hotelServices.map((hotelService, index) => {
-                                return (React.createElement("div", { key: index, className: "col-md-6" },
-                                    React.createElement("div", { className: "u-flex u-marg-bottom" },
-                                        React.createElement(Icon_1.default, { icon: Icon_1.IconType.Check, color: Color_1.Color.White, backgroundColor: Color_1.Color.Accent, borderRadius: 'round', noPadding: true, size: "16px" }),
-                                        React.createElement("span", { className: "u-flex__item u-marg-left--light" },
-                                            React.createElement(Text_1.default, { type: Text_1.TextType.Small }, hotelService.name)))));
+                        !!((_f = hotel === null || hotel === void 0 ? void 0 : hotel.hotelServices) === null || _f === void 0 ? void 0 : _f.length) && (react_1.default.createElement("div", { className: "u-marg-bottom u-marg-bottom--heavy" },
+                            react_1.default.createElement("div", { className: "u-marg-bottom--heavy" },
+                                react_1.default.createElement(Headline_1.default, { bold: true }, "Hotel Amenities")),
+                            react_1.default.createElement("div", { className: "row" }, hotel === null || hotel === void 0 ? void 0 : hotel.hotelServices.map((hotelService, index) => {
+                                return (react_1.default.createElement("div", { key: index, className: "col-md-6" },
+                                    react_1.default.createElement("div", { className: "u-flex u-marg-bottom" },
+                                        react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Check, color: Color_1.Color.White, backgroundColor: Color_1.Color.Accent, borderRadius: "round", noPadding: true, size: "16px" }),
+                                        react_1.default.createElement("span", { className: "u-flex__item u-marg-left--light" },
+                                            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small }, hotelService.name)))));
                             })))),
-                        !!(hotel === null || hotel === void 0 ? void 0 : hotel.policies) && (React.createElement("div", { className: "u-marg-bottom u-marg-bottom--heavy" },
-                            React.createElement("div", { className: "u-marg-bottom--heavy" },
-                                React.createElement(Headline_1.default, { bold: true }, "Policies")),
-                            React.createElement(Text_1.default, { type: Text_1.TextType.Small },
-                                React.createElement("a", { href: hotel === null || hotel === void 0 ? void 0 : hotel.policies, target: "_blank", style: { color: hotel === null || hotel === void 0 ? void 0 : hotel.colors.accent }, rel: "noreferrer" }, hotel === null || hotel === void 0 ? void 0 : hotel.policies))))),
-                    React.createElement("div", { className: "col-lg-6" },
-                        React.createElement("div", { className: "u-marg-bottom u-marg-bottom--heavy" },
-                            React.createElement("div", { className: "u-marg-bottom u-marg-bottom--heavy" },
-                                React.createElement(Headline_1.default, { bold: true }, "Gallery")),
+                        !!(hotel === null || hotel === void 0 ? void 0 : hotel.policies) && (react_1.default.createElement("div", { className: "u-marg-bottom u-marg-bottom--heavy" },
+                            react_1.default.createElement("div", { className: "u-marg-bottom--heavy" },
+                                react_1.default.createElement(Headline_1.default, { bold: true }, "Policies")),
+                            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                                react_1.default.createElement("a", { href: hotel === null || hotel === void 0 ? void 0 : hotel.policies, target: "_blank", style: { color: hotel === null || hotel === void 0 ? void 0 : hotel.colors.accent }, rel: "noreferrer" }, hotel === null || hotel === void 0 ? void 0 : hotel.policies))))),
+                    react_1.default.createElement("div", { className: "col-lg-6" },
+                        react_1.default.createElement("div", { className: "u-marg-bottom u-marg-bottom--heavy" },
+                            react_1.default.createElement("div", { className: "u-marg-bottom u-marg-bottom--heavy" },
+                                react_1.default.createElement(Headline_1.default, { bold: true }, "Gallery")),
                             images.length >= 1 && getImage(0),
-                            React.createElement("div", { className: "row" },
+                            react_1.default.createElement("div", { className: "row" },
                                 [1, 2, 3].map((index) => {
                                     if (images.length > index) {
-                                        return (React.createElement("div", { key: index, className: "col-6" }, getImage(index)));
+                                        return (react_1.default.createElement("div", { key: index, className: "col-6" }, getImage(index)));
                                     }
                                 }),
-                                images.length > 5 && (React.createElement("div", { className: "col-6" },
-                                    React.createElement("div", { className: "c-images c-images--more", onClick: openSliderOnClick },
+                                images.length > 5 && (react_1.default.createElement("div", { className: "col-6" },
+                                    react_1.default.createElement("div", { className: "c-images c-images--more", onClick: openSliderOnClick },
                                         getImage(4),
-                                        React.createElement("span", null,
+                                        react_1.default.createElement("span", null,
                                             "+ ",
                                             images.length - 5)))))))))),
-        !!(images === null || images === void 0 ? void 0 : images.length) && React.createElement(fslightbox_react_1.default, { toggler: lightboxController.toggler, slide: lightboxController.slide, sources: images, type: "image" })));
+        !!(images === null || images === void 0 ? void 0 : images.length) && react_1.default.createElement(fslightbox_react_1.default, { toggler: lightboxController.toggler, slide: lightboxController.slide, sources: images, type: "image" })));
 }
 exports.default = HotelInfo;
 //# sourceMappingURL=HotelInfo.js.map

package/dist/src/pages/hotel/HotelInfo.js.map

@@ -1 +1 @@
-{"version":3,"file":"HotelInfo.js","sourceRoot":"/","sources":["src/pages/hotel/HotelInfo.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Color } from '@/util/Color';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport Text, { TextType } from '@/components/generic/Text';\nimport Headline from '@/components/generic/Headline';\nimport HotelLocationMap from '@/components/generic/map/HotelLocationMap';\nimport { useState, useEffect } from 'react';\nimport FsLightbox from 'fslightbox-react';\nimport TransportDistanceFromHotelBlock from '@/components/summary/TransportDistanceFromHotelBlock';\nimport { useCurrentHotel, useEvent } from '@frontend/hooks';\nimport BEButton from '@/components/generic/BEButton';\nimport { useHistory } from 'react-router-dom';\nimport StepManager from '@/util/StepManager';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\nimport ImageProvider, { ImageSize } from '@/providers/ImageProvider';\nimport { StepHotelInfoViewEvent } from '@frontend/events';\n\nexport default function HotelInfo() {\n    const { hotel } = useCurrentHotel();\n    const history = useHistory();\n    const { t } = useTranslation();\n\n    const imageUrl = hotel?.heroImage;\n\n    const { line1, line2, postalCode, country } = hotel?.address ?? {};\n\n    const [lightboxController, setLightboxController] = useState({ toggler: false, slide: 1 });\n    const [images, setImages] = useState<string[]>([]);\n\n    const openSlider = (slide: number) => {\n        setLightboxController((controller) => ({ toggler: !controller.toggler, slide: slide + 1 }));\n    };\n    const openSliderOnClick = () => {\n        openSlider(4);\n    };\n\n    const { raise } = useEvent();\n\n    useEffect(() => {\n        const event = new StepHotelInfoViewEvent();\n        raise(event);\n    }, []);\n\n    useEffect(() => {\n        const newImages: string[] = [];\n\n        if (hotel?.images?.length) {\n            newImages.push(...hotel?.images);\n        } else 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 onBookNowClick = () => {\n        history.push(StepManager.getFirstStep().getStepUrl());\n    };\n\n    const getImage = (index: number) => {\n        const openSliderOnClickHandler = () => {\n            openSlider(index);\n        };\n\n        const resizedUrl = ImageProvider.resizeImage(images[index], ImageSize.Small);\n\n        return (\n            <div\n                style={{ backgroundImage: `url('${resizedUrl}')`, paddingTop: '75%' }}\n                className=\"c-images u-block u-w-100 u-marg-bottom u-marg-bottom--heavy\"\n                onClick={openSliderOnClickHandler}\n            />\n        );\n    };\n\n    return (\n        <>\n            <div style={{ backgroundImage: `url('${imageUrl}')` }} className=\"c-masthead has-tint\">\n                <div className=\"container\">\n                    <div className=\"c-masthead__body u-fill-white u-pad--heavy u-shadow-accent\">\n                        <h1 className=\"c-masthead__header\">{hotel?.name}</h1>\n                        <h2 className=\"c-masthead__sub-header\">{hotel?.address?.country}</h2>\n                    </div>\n                </div>\n            </div>\n            <div className=\"u-fill-snow u-pad--heavy-med u-pad-top-bottom--heavy@m-\">\n                <div className=\"container\">\n                    <div className=\"row\">\n                        <div className=\"col-md-6 u-flex align-items-center\">\n                            <ul>\n                                <li className=\"u-flex u-marg-bottom--heavy\">\n                                    <Icon icon={IconType.Map} size=\"1.3em\" color={Color.Accent} />\n                                    <span className=\"u-flex__item u-marg-left\">\n                                        {line1}\n                                        <br />\n                                        {line2} {postalCode}, {country}\n                                    </span>\n                                </li>\n                                <li className=\"u-flex u-marg-bottom--heavy\">\n                                    <Icon icon={IconType.Phone} size=\"1.3em\" color={Color.Accent} />\n                                    <span className=\"u-flex__item u-marg-left\">{hotel?.phone}</span>\n                                </li>\n                                <li className=\"u-flex u-marg-bottom--heavy\">\n                                    <Icon icon={IconType.Hotel2} size=\"1.3em\" color={Color.Accent} />\n                                    <span className=\"u-flex__item u-marg-left\">\n                                        <a href={hotel?.hotelUrl} style={{ color: 'var(--rs-color-accent-1)' }}>\n                                            {hotel?.name}\n                                        </a>\n                                    </span>\n                                </li>\n                                <li className=\"u-flex\">\n                                    <BEButton icon={IconType.ArrowRight} primary={true} filled={true} iconPosition={'right'} onClick={onBookNowClick}>\n                                        {t(Translation.HotelInfo.BookNowButton)}\n                                    </BEButton>\n                                </li>\n                            </ul>\n                        </div>\n                        <div className=\"col-md-6\">\n                            <div className=\"c-overlap\">\n                                <div className=\"u-marg-bottom u-marg-bottom--heavy u-marg-top u-marg-top--heavy\" style={{ height: '240px' }}>\n                                    <HotelLocationMap />\n                                </div>\n                                <div className=\"u-flex u-flex-column justify-content-center\">\n                                    <TransportDistanceFromHotelBlock hotel={hotel} />\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div className=\"u-pad u-pad--heavy-plus u-pad-top-bottom--heavy@m-\">\n                <div className=\"container\">\n                    <div className=\"row\">\n                        <div className=\"col-lg-6\">\n                            <div className=\"u-marg-bottom u-marg-bottom--heavy\">\n                                <div className=\"u-marg-bottom u-marg-bottom--heavy\">\n                                    <Headline bold={true}>About</Headline>\n                                </div>\n                                <div className=\"u-marg-bottom u-marg-bottom--heavy\">\n                                    <Text type={TextType.Small}>\n                                        <span dangerouslySetInnerHTML={{ __html: hotel?.description?.replace('\\r\\n', '<br/><br/>') }} />\n                                    </Text>\n                                    {!!hotel?.locationDescription && (\n                                        <>\n                                            <div className=\"u-marg-top\">\n                                                <Text type={TextType.Small}>\n                                                    <strong>Location</strong>\n                                                </Text>\n                                            </div>\n                                            <Text type={TextType.Small}>\n                                                <span dangerouslySetInnerHTML={{ __html: hotel?.locationDescription?.replace('\\r\\n', '<br/><br/>') }} />\n                                            </Text>\n                                        </>\n                                    )}\n                                </div>\n                                {!!hotel?.perks?.length && (\n                                    <>\n                                        <div className=\"u-marg-bottom u-marg-bottom--heavy\">\n                                            <Text type={TextType.Small}>\n                                                <strong>And you get all these for free:</strong>\n                                            </Text>\n                                        </div>\n                                        <div className=\"row\">\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\">{perk.iconElement ? perk.iconElement : <Icon icon={perk.icon} />}</div>\n                                                            <span className=\"u-flex__item\">\n                                                                <Text type={TextType.Small}>{perk.name}</Text>\n                                                            </span>\n                                                        </div>\n                                                    </div>\n                                                );\n                                            })}\n                                        </div>\n                                    </>\n                                )}\n                            </div>\n                            {!!hotel?.hotelServices?.length && (\n                                <div className=\"u-marg-bottom u-marg-bottom--heavy\">\n                                    <div className=\"u-marg-bottom--heavy\">\n                                        <Headline bold={true}>Hotel Amenities</Headline>\n                                    </div>\n                                    <div className=\"row\">\n                                        {hotel?.hotelServices.map((hotelService, index) => {\n                                            return (\n                                                <div key={index} className=\"col-md-6\">\n                                                    <div className=\"u-flex u-marg-bottom\">\n                                                        <Icon\n                                                            icon={IconType.Check}\n                                                            color={Color.White}\n                                                            backgroundColor={Color.Accent}\n                                                            borderRadius={'round'}\n                                                            noPadding={true}\n                                                            size=\"16px\"\n                                                        />\n                                                        <span className=\"u-flex__item u-marg-left--light\">\n                                                            <Text type={TextType.Small}>{hotelService.name}</Text>\n                                                        </span>\n                                                    </div>\n                                                </div>\n                                            );\n                                        })}\n                                    </div>\n                                </div>\n                            )}\n                            {!!hotel?.policies && (\n                                <div className=\"u-marg-bottom u-marg-bottom--heavy\">\n                                    <div className=\"u-marg-bottom--heavy\">\n                                        <Headline bold={true}>Policies</Headline>\n                                    </div>\n                                    <Text type={TextType.Small}>\n                                        <a href={hotel?.policies} target=\"_blank\" style={{ color: hotel?.colors.accent }} rel=\"noreferrer\">\n                                            {hotel?.policies}\n                                        </a>\n                                    </Text>\n                                </div>\n                            )}\n                        </div>\n                        <div className=\"col-lg-6\">\n                            <div className=\"u-marg-bottom u-marg-bottom--heavy\">\n                                <div className=\"u-marg-bottom u-marg-bottom--heavy\">\n                                    <Headline bold={true}>Gallery</Headline>\n                                </div>\n                                {images.length >= 1 && getImage(0)}\n                                <div className=\"row\">\n                                    {[1, 2, 3].map((index) => {\n                                        if (images.length > index) {\n                                            return (\n                                                <div key={index} className=\"col-6\">\n                                                    {getImage(index)}\n                                                </div>\n                                            );\n                                        }\n                                    })}\n                                    {images.length > 5 && (\n                                        <div className=\"col-6\">\n                                            <div className=\"c-images c-images--more\" onClick={openSliderOnClick}>\n                                                {getImage(4)}\n                                                <span>+ {images.length - 5}</span>\n                                            </div>\n                                        </div>\n                                    )}\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            {!!images?.length && <FsLightbox toggler={lightboxController.toggler} slide={lightboxController.slide} sources={images} type=\"image\" />}\n        </>\n    );\n}\n"]}
+{"version":3,"file":"HotelInfo.js","sourceRoot":"/","sources":["src/pages/hotel/HotelInfo.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Color } from '@/util/Color';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport Text, { TextType } from '@/components/generic/Text';\nimport Headline from '@/components/generic/Headline';\nimport HotelLocationMap from '@/components/generic/map/HotelLocationMap';\nimport { useState, useEffect } from 'react';\nimport FsLightbox from 'fslightbox-react';\nimport TransportDistanceFromHotelBlock from '@/components/summary/TransportDistanceFromHotelBlock';\nimport { useCurrentHotel, useEvent } from '@frontend/hooks';\nimport BEButton from '@/components/generic/BEButton';\nimport { useHistory } from 'react-router-dom';\nimport StepManager from '@/util/StepManager';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\nimport ImageProvider, { ImageSize } from '@/providers/ImageProvider';\nimport { StepHotelInfoViewEvent } from '@frontend/events';\n\nexport default function HotelInfo() {\n    const { hotel } = useCurrentHotel();\n    const history = useHistory();\n    const { t } = useTranslation();\n\n    const imageUrl = hotel?.heroImage;\n\n    const { line1, line2, postalCode, country } = hotel?.address ?? {};\n\n    const [lightboxController, setLightboxController] = useState({ toggler: false, slide: 1 });\n    const [images, setImages] = useState<string[]>([]);\n\n    const openSlider = (slide: number) => {\n        setLightboxController((controller) => ({ toggler: !controller.toggler, slide: slide + 1 }));\n    };\n    const openSliderOnClick = () => {\n        openSlider(4);\n    };\n\n    const { raise } = useEvent();\n\n    useEffect(() => {\n        const event = new StepHotelInfoViewEvent();\n        raise(event);\n    }, []);\n\n    useEffect(() => {\n        const newImages: string[] = [];\n\n        if (hotel?.images?.length) {\n            newImages.push(...hotel.images);\n        } else 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 onBookNowClick = () => {\n        history.push(StepManager.getFirstStep().getStepUrl());\n    };\n\n    const getImage = (index: number) => {\n        const openSliderOnClickHandler = () => {\n            openSlider(index);\n        };\n\n        const resizedUrl = ImageProvider.resizeImage(images[index], ImageSize.Small);\n\n        return (\n            <div\n                style={{ backgroundImage: `url('${resizedUrl}')`, paddingTop: '75%' }}\n                className=\"c-images u-block u-w-100 u-marg-bottom u-marg-bottom--heavy\"\n                onClick={openSliderOnClickHandler}\n            />\n        );\n    };\n\n    return (\n        <>\n            <div style={{ backgroundImage: `url('${imageUrl}')` }} className=\"c-masthead has-tint\">\n                <div className=\"container\">\n                    <div className=\"c-masthead__body u-fill-white u-pad--heavy u-shadow-accent\">\n                        <h1 className=\"c-masthead__header\">{hotel?.name}</h1>\n                        <h2 className=\"c-masthead__sub-header\">{hotel?.address?.country}</h2>\n                    </div>\n                </div>\n            </div>\n            <div className=\"u-fill-snow u-pad--heavy-med u-pad-top-bottom--heavy@m-\">\n                <div className=\"container\">\n                    <div className=\"row\">\n                        <div className=\"col-md-6 u-flex align-items-center\">\n                            <ul>\n                                <li className=\"u-flex u-marg-bottom--heavy\">\n                                    <Icon icon={IconType.Map} size=\"1.3em\" color={Color.Accent} />\n                                    <span className=\"u-flex__item u-marg-left\">\n                                        {line1}\n                                        <br />\n                                        {line2} {postalCode}, {country}\n                                    </span>\n                                </li>\n                                <li className=\"u-flex u-marg-bottom--heavy\">\n                                    <Icon icon={IconType.Phone} size=\"1.3em\" color={Color.Accent} />\n                                    <span className=\"u-flex__item u-marg-left\">{hotel?.phone}</span>\n                                </li>\n                                <li className=\"u-flex u-marg-bottom--heavy\">\n                                    <Icon icon={IconType.Hotel2} size=\"1.3em\" color={Color.Accent} />\n                                    <span className=\"u-flex__item u-marg-left\">\n                                        <a href={hotel?.hotelUrl} style={{ color: 'var(--rs-color-accent-1)' }}>\n                                            {hotel?.name}\n                                        </a>\n                                    </span>\n                                </li>\n                                <li className=\"u-flex\">\n                                    <BEButton icon={IconType.ArrowRight} primary filled iconPosition=\"right\" onClick={onBookNowClick}>\n                                        {t(Translation.HotelInfo.BookNowButton)}\n                                    </BEButton>\n                                </li>\n                            </ul>\n                        </div>\n                        <div className=\"col-md-6\">\n                            <div className=\"c-overlap\">\n                                <div className=\"u-marg-bottom u-marg-bottom--heavy u-marg-top u-marg-top--heavy\" style={{ height: '240px' }}>\n                                    <HotelLocationMap />\n                                </div>\n                                <div className=\"u-flex u-flex-column justify-content-center\">\n                                    <TransportDistanceFromHotelBlock hotel={hotel} />\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div className=\"u-pad u-pad--heavy-plus u-pad-top-bottom--heavy@m-\">\n                <div className=\"container\">\n                    <div className=\"row\">\n                        <div className=\"col-lg-6\">\n                            <div className=\"u-marg-bottom u-marg-bottom--heavy\">\n                                <div className=\"u-marg-bottom u-marg-bottom--heavy\">\n                                    <Headline bold>About</Headline>\n                                </div>\n                                <div className=\"u-marg-bottom u-marg-bottom--heavy\">\n                                    <Text type={TextType.Small}>\n                                        <span dangerouslySetInnerHTML={{ __html: hotel?.description?.replace('\\r\\n', '<br/><br/>') || '' }} />\n                                    </Text>\n                                    {!!hotel?.locationDescription && (\n                                        <>\n                                            <div className=\"u-marg-top\">\n                                                <Text type={TextType.Small}>\n                                                    <strong>Location</strong>\n                                                </Text>\n                                            </div>\n                                            <Text type={TextType.Small}>\n                                                <span dangerouslySetInnerHTML={{ __html: hotel?.locationDescription?.replace('\\r\\n', '<br/><br/>') }} />\n                                            </Text>\n                                        </>\n                                    )}\n                                </div>\n                                {!!hotel?.perks?.length && (\n                                    <>\n                                        <div className=\"u-marg-bottom u-marg-bottom--heavy\">\n                                            <Text type={TextType.Small}>\n                                                <strong>And you get all these for free:</strong>\n                                            </Text>\n                                        </div>\n                                        <div className=\"row\">\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\">{perk.iconElement ? perk.iconElement : <Icon icon={perk.icon as IconType} />}</div>\n                                                            <span className=\"u-flex__item\">\n                                                                <Text type={TextType.Small}>{perk.name}</Text>\n                                                            </span>\n                                                        </div>\n                                                    </div>\n                                                );\n                                            })}\n                                        </div>\n                                    </>\n                                )}\n                            </div>\n                            {!!hotel?.hotelServices?.length && (\n                                <div className=\"u-marg-bottom u-marg-bottom--heavy\">\n                                    <div className=\"u-marg-bottom--heavy\">\n                                        <Headline bold>Hotel Amenities</Headline>\n                                    </div>\n                                    <div className=\"row\">\n                                        {hotel?.hotelServices.map((hotelService, index) => {\n                                            return (\n                                                <div key={index} className=\"col-md-6\">\n                                                    <div className=\"u-flex u-marg-bottom\">\n                                                        <Icon icon={IconType.Check} color={Color.White} backgroundColor={Color.Accent} borderRadius=\"round\" noPadding size=\"16px\" />\n                                                        <span className=\"u-flex__item u-marg-left--light\">\n                                                            <Text type={TextType.Small}>{hotelService.name}</Text>\n                                                        </span>\n                                                    </div>\n                                                </div>\n                                            );\n                                        })}\n                                    </div>\n                                </div>\n                            )}\n                            {!!hotel?.policies && (\n                                <div className=\"u-marg-bottom u-marg-bottom--heavy\">\n                                    <div className=\"u-marg-bottom--heavy\">\n                                        <Headline bold>Policies</Headline>\n                                    </div>\n                                    <Text type={TextType.Small}>\n                                        <a href={hotel?.policies} target=\"_blank\" style={{ color: hotel?.colors.accent }} rel=\"noreferrer\">\n                                            {hotel?.policies}\n                                        </a>\n                                    </Text>\n                                </div>\n                            )}\n                        </div>\n                        <div className=\"col-lg-6\">\n                            <div className=\"u-marg-bottom u-marg-bottom--heavy\">\n                                <div className=\"u-marg-bottom u-marg-bottom--heavy\">\n                                    <Headline bold>Gallery</Headline>\n                                </div>\n                                {images.length >= 1 && getImage(0)}\n                                <div className=\"row\">\n                                    {[1, 2, 3].map((index) => {\n                                        if (images.length > index) {\n                                            return (\n                                                <div key={index} className=\"col-6\">\n                                                    {getImage(index)}\n                                                </div>\n                                            );\n                                        }\n                                    })}\n                                    {images.length > 5 && (\n                                        <div className=\"col-6\">\n                                            <div className=\"c-images c-images--more\" onClick={openSliderOnClick}>\n                                                {getImage(4)}\n                                                <span>+ {images.length - 5}</span>\n                                            </div>\n                                        </div>\n                                    )}\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            {!!images?.length && <FsLightbox toggler={lightboxController.toggler} slide={lightboxController.slide} sources={images} type=\"image\" />}\n        </>\n    );\n}\n"]}