@roomstay/frontend 2.1.6 → 2.1.8

package/dist/src/pages/steps/StepHotel/StepHotelComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepHotelComponent.js","sourceRoot":"/","sources":["src/pages/steps/StepHotel/StepHotelComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import dayjs from 'dayjs';\nimport * as React from 'react';\nimport { useContext, useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { BasketContext, BookingEngineContext, CompanyContext, FullPageEngineContext } from '@frontend/contexts';\nimport BEButton from '@/components/generic/BEButton';\nimport Text, { TextType } from '@/components/generic/Text';\nimport LineBreak from '@/components/generic/LineBreak';\nimport HotelCardList from '@/components/steps/hotel/HotelCardList';\nimport HotelSearchParameters from '@/components/steps/hotel/HotelSearchParameters';\nimport type { Hotel } from '@/models/Client/Hotel/Hotel';\n\nimport { Translation } from 'translations/Translation';\nimport { Color } from '@/util/Color';\nimport ScreenSize from '@/util/ScreenSize';\nimport { useEvent } from '@/hooks/EventHook';\nimport { StepHotelViewEvent } from '@frontend/events';\nimport { IDefaultSelectOption, Select } from '@/components/generic/Select/Select';\n\nenum SortByOptions {\n    Recommended = 'R',\n    LowestPrice = 'L',\n    HighestPrice = 'H',\n}\n\nconst StepHotelComponent = () => {\n    const sortByValues = [\n        { value: SortByOptions.Recommended, text: 'Recommended' },\n        { value: SortByOptions.LowestPrice, text: 'Lowest Price' },\n        { value: SortByOptions.HighestPrice, text: 'Highest Price' },\n    ];\n\n    const ccx = useContext(CompanyContext);\n    const context = useContext(BookingEngineContext);\n    const basketContext = useContext(BasketContext);\n    const fullPageContext = useContext(FullPageEngineContext);\n\n    const [sortBy, setSortBy] = useState<SortByOptions>(sortByValues[0].value);\n    const [city, setCity] = useState(fullPageContext.urlParameters.defaultCity ?? 'All');\n\n    const [cityOptions, setCityOptions] = useState([]);\n\n    const [sortedHotels, setSortedHotels] = useState<Hotel[]>();\n\n    const basketRow = basketContext.selectedBasketRow ?? basketContext.currentBasketRows[0];\n\n    const { raise } = useEvent();\n\n    useEffect(() => {\n        const event = new StepHotelViewEvent();\n        raise(event);\n    }, []);\n\n    useEffect(() => {\n        const hotelsToShow = ccx.hotels.filter((hotel: Hotel) => {\n            if (hotel.address?.city === city) {\n                return hotel;\n            } else if (city === 'All') {\n                return hotel;\n            }\n        });\n\n        if (sortBy === SortByOptions.Recommended) {\n            setSortedHotels(hotelsToShow);\n        } else {\n            setSortedHotels(\n                [...hotelsToShow].sort((a: Hotel, b: Hotel) => {\n                    switch (sortBy) {\n                        case SortByOptions.LowestPrice:\n                            return a.lowestPrice?.value - b.lowestPrice?.value;\n                        case SortByOptions.HighestPrice:\n                            return b.lowestPrice?.value - a.lowestPrice?.value;\n                    }\n                })\n            );\n        }\n    }, [ccx.hotels, sortBy, city]);\n\n    useEffect(() => {\n        const cities: { [cityName: string]: any } = {};\n\n        ccx.hotels.forEach((hotel: Hotel) => {\n            // We must wait till address is loaded\n            if (hotel.address) {\n                cities[hotel.address.city] = { value: hotel.address.city, text: hotel.address.city };\n            }\n        });\n\n        setCityOptions([{ value: 'All', text: 'All' }, ...Object.values(cities)]);\n    }, [ccx.hotels]);\n\n    useEffect(() => {\n        ccx.hotels.forEach((hotel) => {\n            ccx.updateLowestPricePerNight(hotel, basketRow);\n        });\n    }, [basketRow?.getStartDate(), basketRow?.getEndDate(), basketRow?.getAdults(), basketRow?.getChildren(), basketRow?.getPromoCode()]);\n\n    const { t } = useTranslation();\n\n    const changeCountry = (selected: string) => {\n        setCity(selected);\n    };\n\n    const changeFilter = (selected: SortByOptions) => {\n        setSortBy(selected);\n    };\n\n    const clearFilters = () => {\n        setCity(cityOptions[0]?.value);\n        setSortBy(sortByValues[0].value);\n    };\n\n    useEffect(() => {\n        const startDate = basketRow.getStartDate();\n        const endDate = basketRow.getEndDate();\n\n        if (!startDate || !endDate) {\n            if (startDate) {\n                basketRow.setEndDate(startDate.add(1, 'day'));\n            } else {\n                basketRow.setStartDate(dayjs().add(1, 'day'));\n                basketRow.setEndDate(dayjs().add(2, 'day'));\n            }\n\n            basketContext.updateBasketRow(basketRow);\n        }\n    }, []);\n\n    return (\n        <div className=\"container\">\n            <div className={'row' + (context.screenSize > ScreenSize.ExtraLarge ? ' no-gutters' : '')}>\n                <div className=\"col-md-8\">\n                    {\n                        <div className=\"row align-items-end\">\n                            <div className=\"col-6 col-md-4 col-lg-3\">\n                                <Text type={TextType.Label} color={Color.DarkGrey}>\n                                    <strong>{t(Translation.Step.Room.SortBy)}</strong>\n                                </Text>\n                                <div>\n                                    <Select<IDefaultSelectOption, 'value'>\n                                        nativeOnMobile\n                                        options={sortByValues}\n                                        value={sortBy}\n                                        onChange={changeFilter}\n                                        keyName=\"value\"\n                                        labelName=\"text\"\n                                    />\n                                </div>\n                            </div>\n                            <div className=\"col-6 col-md-2 col-lg-2\">\n                                <div>\n                                    <Text type={TextType.Label} color={Color.DarkGrey}>\n                                        <strong>Cities</strong>\n                                    </Text>\n                                    <div className=\"filter-button d-flex align-items-center u-cursor-pointer\">\n                                        <Select<IDefaultSelectOption, 'value'>\n                                            nativeOnMobile\n                                            options={cityOptions}\n                                            value={city}\n                                            onChange={changeCountry}\n                                            keyName=\"value\"\n                                            labelName=\"text\"\n                                        />\n                                    </div>\n                                </div>\n                            </div>\n                            <div className={'col-sm-12 col-md-2 col-lg-1 u-flex u-flex-flex-end ' + (context.screenSize <= ScreenSize.Medium ? 'u-marg-top--light' : '')}>\n                                <BEButton rounded={true} size=\"tiny\" onClick={clearFilters} disabled={city === cityOptions[0]?.value && sortBy === sortByValues[0].value}>\n                                    Clear all\n                                </BEButton>\n                            </div>\n                        </div>\n                    }\n                </div>\n            </div>\n            <LineBreak />\n            {<HotelSearchParameters />}\n            <HotelCardList hotelList={sortedHotels} />\n        </div>\n    );\n};\n\nexport default StepHotelComponent;\n"]}
+{"version":3,"file":"StepHotelComponent.js","sourceRoot":"/","sources":["src/pages/steps/StepHotel/StepHotelComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import dayjs from 'dayjs';\nimport React, { useContext, useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { BasketContext, BookingEngineContext, CompanyContext, FullPageEngineContext } from '@frontend/contexts';\nimport BEButton from '@/components/generic/BEButton';\nimport Text, { TextType } from '@/components/generic/Text';\nimport LineBreak from '@/components/generic/LineBreak';\nimport HotelCardList from '@/components/steps/hotel/HotelCardList';\nimport HotelSearchParameters from '@/components/steps/hotel/HotelSearchParameters';\nimport type { Hotel } from '@/models/Client/Hotel/Hotel';\n\nimport { Translation } from 'translations/Translation';\nimport { Color } from '@/util/Color';\nimport ScreenSize from '@/util/ScreenSize';\nimport { useEvent } from '@/hooks/EventHook';\nimport { StepHotelViewEvent } from '@frontend/events';\nimport { IDefaultSelectOption, Select } from '@/components/generic/Select/Select';\n\nenum SortByOptions {\n    Recommended = 'R',\n    LowestPrice = 'L',\n    HighestPrice = 'H',\n}\n\ninterface ISortByOption {\n    value: SortByOptions;\n    text: string;\n}\n\nconst StepHotelComponent = () => {\n    const sortByValues = [\n        { value: SortByOptions.Recommended, text: 'Recommended' },\n        { value: SortByOptions.LowestPrice, text: 'Lowest Price' },\n        { value: SortByOptions.HighestPrice, text: 'Highest Price' },\n    ];\n\n    const ccx = useContext(CompanyContext);\n    const context = useContext(BookingEngineContext);\n    const basketContext = useContext(BasketContext);\n    const fullPageContext = useContext(FullPageEngineContext);\n\n    const [sortBy, setSortBy] = useState<SortByOptions>(sortByValues[0].value);\n    const [city, setCity] = useState(fullPageContext.urlParameters.defaultCity ?? 'All');\n\n    const [cityOptions, setCityOptions] = useState<IDefaultSelectOption[]>([]);\n\n    const [sortedHotels, setSortedHotels] = useState<Hotel[]>();\n\n    const basketRow = basketContext.selectedBasketRow ?? basketContext.currentBasketRows[0];\n\n    const { raise } = useEvent();\n\n    useEffect(() => {\n        const event = new StepHotelViewEvent();\n        raise(event);\n    }, []);\n\n    useEffect(() => {\n        const hotelsToShow = ccx.hotels.filter((hotel: Hotel) => {\n            if (hotel.address?.city === city) {\n                return hotel;\n            } else if (city === 'All') {\n                return hotel;\n            }\n        });\n\n        if (sortBy === SortByOptions.Recommended) {\n            setSortedHotels(hotelsToShow);\n        } else {\n            setSortedHotels(\n                [...hotelsToShow].sort((a: Hotel, b: Hotel) => {\n                    switch (sortBy) {\n                        case SortByOptions.LowestPrice:\n                            return (a.lowestPrice?.value as number) - (b.lowestPrice?.value as number);\n                        case SortByOptions.HighestPrice:\n                            return (b.lowestPrice?.value as number) - (a.lowestPrice?.value as number);\n                    }\n                })\n            );\n        }\n    }, [ccx.hotels, sortBy, city]);\n\n    useEffect(() => {\n        const cities: { [cityName: string]: any } = {};\n\n        ccx.hotels.forEach((hotel: Hotel) => {\n            // We must wait till address is loaded\n            if (hotel.address) {\n                cities[hotel.address.city as string] = { value: hotel.address.city, text: hotel.address.city };\n            }\n        });\n\n        setCityOptions([{ value: 'All', text: 'All' }, ...Object.values(cities)]);\n    }, [ccx.hotels]);\n\n    useEffect(() => {\n        ccx.hotels.forEach((hotel) => {\n            ccx.updateLowestPricePerNight(hotel, basketRow);\n        });\n    }, [basketRow?.getStartDate(), basketRow?.getEndDate(), basketRow?.getAdults(), basketRow?.getChildren(), basketRow?.getPromoCode()]);\n\n    const { t } = useTranslation();\n\n    const changeCountry = (selected: string) => {\n        setCity(selected);\n    };\n\n    const changeFilter = (selected: SortByOptions) => {\n        setSortBy(selected);\n    };\n\n    const clearFilters = () => {\n        setCity(cityOptions[0]?.value);\n        setSortBy(sortByValues[0].value);\n    };\n\n    useEffect(() => {\n        const startDate = basketRow.getStartDate();\n        const endDate = basketRow.getEndDate();\n\n        if (!startDate || !endDate) {\n            if (startDate) {\n                basketRow.setEndDate(startDate.add(1, 'day'));\n            } else {\n                basketRow.setStartDate(dayjs().add(1, 'day'));\n                basketRow.setEndDate(dayjs().add(2, 'day'));\n            }\n\n            basketContext.updateBasketRow(basketRow);\n        }\n    }, []);\n\n    return (\n        <div className=\"container\">\n            <div className={'row' + (context.screenSize > ScreenSize.ExtraLarge ? ' no-gutters' : '')}>\n                <div className=\"col-md-8\">\n                    <div className=\"row align-items-end\">\n                        <div className=\"col-6 col-md-4 col-lg-3\">\n                            <Text type={TextType.Label} color={Color.DarkGrey}>\n                                <strong>{t(Translation.Step.Room.SortBy)}</strong>\n                            </Text>\n                            <div>\n                                <Select<ISortByOption, 'value'> nativeOnMobile options={sortByValues} value={sortBy} onChange={changeFilter} keyName=\"value\" labelName=\"text\" />\n                            </div>\n                        </div>\n                        <div className=\"col-6 col-md-2 col-lg-2\">\n                            <div>\n                                <Text type={TextType.Label} color={Color.DarkGrey}>\n                                    <strong>Cities</strong>\n                                </Text>\n                                <div className=\"filter-button d-flex align-items-center u-cursor-pointer\">\n                                    <Select<IDefaultSelectOption, 'value'>\n                                        nativeOnMobile\n                                        options={cityOptions}\n                                        value={city}\n                                        onChange={changeCountry}\n                                        keyName=\"value\"\n                                        labelName=\"text\"\n                                    />\n                                </div>\n                            </div>\n                        </div>\n                        <div className={'col-sm-12 col-md-2 col-lg-1 u-flex u-flex-flex-end ' + (context.screenSize <= ScreenSize.Medium ? 'u-marg-top--light' : '')}>\n                            <BEButton rounded size=\"tiny\" onClick={clearFilters} disabled={city === cityOptions[0]?.value && sortBy === sortByValues[0].value}>\n                                Clear all\n                            </BEButton>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <LineBreak />\n            <HotelSearchParameters />\n            <HotelCardList hotelList={sortedHotels as Hotel[]} />\n        </div>\n    );\n};\n\nexport default StepHotelComponent;\n"]}

package/dist/src/pages/steps/StepHotel/StepHotelLoader.js

@@ -27,56 +27,56 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const contexts_1 = require("../../../contexts/index.js");
-const React = __importStar(require("react"));
-const react_1 = require("react");
+const react_1 = __importDefault(require("react"));
 const react_2 = require("react");
+const react_3 = require("react");
 const LineBreak_1 = __importDefault(require("../../../components/generic/LineBreak"));
 const Placeholder_1 = __importDefault(require("../../../components/generic/Placeholder"));
 const ScreenSize_1 = __importDefault(require("../../../util/ScreenSize"));
-const StepHotelComponent = (0, react_2.lazy)(() => Promise.resolve().then(() => __importStar(require('./StepHotelComponent'))));
+const StepHotelComponent = (0, react_3.lazy)(() => Promise.resolve().then(() => __importStar(require('./StepHotelComponent'))));
 const Loader = () => {
-    const { screenSize } = (0, react_1.useContext)(contexts_1.BookingEngineContext);
-    return screenSize > ScreenSize_1.default.Medium ? (React.createElement("div", { className: "container" },
-        React.createElement("div", { className: "u-marg-bottom--heavy" },
-            React.createElement(Placeholder_1.default, { blink: true, type: "text", w: "xs", h: "xs" }),
-            React.createElement(Placeholder_1.default, { blink: true, type: "text", w: "sm", h: "md" })),
-        React.createElement("div", null,
-            React.createElement(Placeholder_1.default, { blink: true, type: "text", w: "md", h: "lg" })),
-        React.createElement(LineBreak_1.default, null),
-        React.createElement("div", null,
-            React.createElement(Placeholder_1.default, { blink: true, type: "text", w: "xl", h: "lg" })),
-        React.createElement("div", { className: "row" }, [0, 1, 2].map((index) => (React.createElement("div", { className: "col-md-4", key: index },
-            React.createElement(Placeholder_1.default, { blink: true, rounded: "lg", type: "block", blockSize: "sm" }),
-            React.createElement(Placeholder_1.default, { blink: true, type: "text", w: "md", h: "md" }),
-            React.createElement(Placeholder_1.default, { blink: true, type: "text", w: "md", h: "md" }),
-            React.createElement(Placeholder_1.default, { blink: true, type: "text", w: "xl", h: "lg" }),
-            React.createElement(Placeholder_1.default, { blink: true, type: "text", w: "xl", h: "xs" }),
-            React.createElement(Placeholder_1.default, { blink: true, type: "text", w: "xl", h: "xs" }),
-            React.createElement(Placeholder_1.default, { blink: true, type: "text", w: "xl", h: "xs" }),
-            React.createElement(Placeholder_1.default, { blink: true, type: "block", blockSize: "xs", rounded: "md" }),
-            React.createElement(Placeholder_1.default, { blink: true, type: "text", w: "md", h: "xl" }))))))) : (React.createElement("div", { className: "container" },
-        React.createElement("div", { className: "row" },
-            React.createElement("div", { className: "col-6" },
-                React.createElement(Placeholder_1.default, { blink: true, type: "text", w: "md", h: "md" })),
-            React.createElement("div", { className: "col-6" },
-                React.createElement(Placeholder_1.default, { blink: true, type: "text", w: "md", h: "md" }))),
-        React.createElement(LineBreak_1.default, null),
-        React.createElement(Placeholder_1.default, { type: "block", blockSize: "sm", rounded: "lg", blink: true }),
-        React.createElement("div", { className: "u-marg-top--xl" },
-            React.createElement(Placeholder_1.default, { type: "block", blockSize: "xs", rounded: "lg", blink: true }),
-            React.createElement(Placeholder_1.default, { type: "text", w: "md", h: "sm", blink: true }),
-            React.createElement(Placeholder_1.default, { type: "text", w: "md", h: "sm", blink: true }),
-            React.createElement("div", { className: "u-marg-top--heavy" },
-                React.createElement(Placeholder_1.default, { type: "text", w: "md", h: "xs", blink: true }),
-                React.createElement(Placeholder_1.default, { type: "text", w: "md", h: "xs", blink: true }),
-                React.createElement(Placeholder_1.default, { type: "text", w: "md", h: "xs", blink: true })),
-            React.createElement(Placeholder_1.default, { type: "block", blockSize: "xs", rounded: "lg", blink: true }),
-            React.createElement(Placeholder_1.default, { type: "text", w: "md", h: "xl", blink: true }),
-            React.createElement(Placeholder_1.default, { type: "text", w: "xl", h: "md", blink: true }))));
+    const { screenSize } = (0, react_2.useContext)(contexts_1.BookingEngineContext);
+    return screenSize > ScreenSize_1.default.Medium ? (react_1.default.createElement("div", { className: "container" },
+        react_1.default.createElement("div", { className: "u-marg-bottom--heavy" },
+            react_1.default.createElement(Placeholder_1.default, { blink: true, type: "text", w: "xs", h: "xs" }),
+            react_1.default.createElement(Placeholder_1.default, { blink: true, type: "text", w: "sm", h: "md" })),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(Placeholder_1.default, { blink: true, type: "text", w: "md", h: "lg" })),
+        react_1.default.createElement(LineBreak_1.default, null),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(Placeholder_1.default, { blink: true, type: "text", w: "xl", h: "lg" })),
+        react_1.default.createElement("div", { className: "row" }, [0, 1, 2].map((index) => (react_1.default.createElement("div", { className: "col-md-4", key: index },
+            react_1.default.createElement(Placeholder_1.default, { blink: true, rounded: "lg", type: "block", blockSize: "sm" }),
+            react_1.default.createElement(Placeholder_1.default, { blink: true, type: "text", w: "md", h: "md" }),
+            react_1.default.createElement(Placeholder_1.default, { blink: true, type: "text", w: "md", h: "md" }),
+            react_1.default.createElement(Placeholder_1.default, { blink: true, type: "text", w: "xl", h: "lg" }),
+            react_1.default.createElement(Placeholder_1.default, { blink: true, type: "text", w: "xl", h: "xs" }),
+            react_1.default.createElement(Placeholder_1.default, { blink: true, type: "text", w: "xl", h: "xs" }),
+            react_1.default.createElement(Placeholder_1.default, { blink: true, type: "text", w: "xl", h: "xs" }),
+            react_1.default.createElement(Placeholder_1.default, { blink: true, type: "block", blockSize: "xs", rounded: "md" }),
+            react_1.default.createElement(Placeholder_1.default, { blink: true, type: "text", w: "md", h: "xl" }))))))) : (react_1.default.createElement("div", { className: "container" },
+        react_1.default.createElement("div", { className: "row" },
+            react_1.default.createElement("div", { className: "col-6" },
+                react_1.default.createElement(Placeholder_1.default, { blink: true, type: "text", w: "md", h: "md" })),
+            react_1.default.createElement("div", { className: "col-6" },
+                react_1.default.createElement(Placeholder_1.default, { blink: true, type: "text", w: "md", h: "md" }))),
+        react_1.default.createElement(LineBreak_1.default, null),
+        react_1.default.createElement(Placeholder_1.default, { type: "block", blockSize: "sm", rounded: "lg", blink: true }),
+        react_1.default.createElement("div", { className: "u-marg-top--xl" },
+            react_1.default.createElement(Placeholder_1.default, { type: "block", blockSize: "xs", rounded: "lg", blink: true }),
+            react_1.default.createElement(Placeholder_1.default, { type: "text", w: "md", h: "sm", blink: true }),
+            react_1.default.createElement(Placeholder_1.default, { type: "text", w: "md", h: "sm", blink: true }),
+            react_1.default.createElement("div", { className: "u-marg-top--heavy" },
+                react_1.default.createElement(Placeholder_1.default, { type: "text", w: "md", h: "xs", blink: true }),
+                react_1.default.createElement(Placeholder_1.default, { type: "text", w: "md", h: "xs", blink: true }),
+                react_1.default.createElement(Placeholder_1.default, { type: "text", w: "md", h: "xs", blink: true })),
+            react_1.default.createElement(Placeholder_1.default, { type: "block", blockSize: "xs", rounded: "lg", blink: true }),
+            react_1.default.createElement(Placeholder_1.default, { type: "text", w: "md", h: "xl", blink: true }),
+            react_1.default.createElement(Placeholder_1.default, { type: "text", w: "xl", h: "md", blink: true }))));
 };
 const StepHotelLoader = () => {
-    return (React.createElement(react_2.Suspense, { fallback: React.createElement(Loader, null) },
-        React.createElement(StepHotelComponent, null)));
+    return (react_1.default.createElement(react_3.Suspense, { fallback: react_1.default.createElement(Loader, null) },
+        react_1.default.createElement(StepHotelComponent, null)));
 };
 exports.default = StepHotelLoader;
 //# sourceMappingURL=StepHotelLoader.js.map

package/dist/src/pages/steps/StepHotel/StepHotelLoader.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepHotelLoader.js","sourceRoot":"/","sources":["src/pages/steps/StepHotel/StepHotelLoader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { BookingEngineContext } from '@frontend/contexts';\nimport * as React from 'react';\nimport { useContext } from 'react';\n\nimport { lazy, Suspense } from 'react';\nimport LineBreak from '@/components/generic/LineBreak';\nimport Placeholder from '@/components/generic/Placeholder';\nimport ScreenSize from '@/util/ScreenSize';\n\nconst StepHotelComponent = lazy(() => import('@/pages/steps/StepHotel/StepHotelComponent'));\n\nconst Loader = () => {\n    const { screenSize } = useContext(BookingEngineContext);\n\n    return screenSize > ScreenSize.Medium ? (\n        <div className=\"container\">\n            <div className=\"u-marg-bottom--heavy\">\n                <Placeholder blink={true} type=\"text\" w=\"xs\" h=\"xs\" />\n                <Placeholder blink={true} type=\"text\" w=\"sm\" h=\"md\" />\n            </div>\n            <div>\n                <Placeholder blink={true} type=\"text\" w=\"md\" h=\"lg\" />\n            </div>\n            <LineBreak />\n            <div>\n                <Placeholder blink={true} type=\"text\" w=\"xl\" h=\"lg\" />\n            </div>\n            <div className=\"row\">\n                {[0, 1, 2].map((index) => (\n                    <div className=\"col-md-4\" key={index}>\n                        <Placeholder blink={true} rounded=\"lg\" type=\"block\" blockSize=\"sm\" />\n                        <Placeholder blink={true} type=\"text\" w=\"md\" h=\"md\" />\n                        <Placeholder blink={true} type=\"text\" w=\"md\" h=\"md\" />\n                        <Placeholder blink={true} type=\"text\" w=\"xl\" h=\"lg\" />\n                        <Placeholder blink={true} type=\"text\" w=\"xl\" h=\"xs\" />\n                        <Placeholder blink={true} type=\"text\" w=\"xl\" h=\"xs\" />\n                        <Placeholder blink={true} type=\"text\" w=\"xl\" h=\"xs\" />\n                        <Placeholder blink={true} type=\"block\" blockSize=\"xs\" rounded=\"md\" />\n                        <Placeholder blink={true} type=\"text\" w=\"md\" h=\"xl\" />\n                    </div>\n                ))}\n            </div>\n        </div>\n    ) : (\n        <div className=\"container\">\n            <div className=\"row\">\n                <div className=\"col-6\">\n                    <Placeholder blink={true} type=\"text\" w=\"md\" h=\"md\" />\n                </div>\n                <div className=\"col-6\">\n                    <Placeholder blink={true} type=\"text\" w=\"md\" h=\"md\" />\n                </div>\n            </div>\n            <LineBreak />\n            <Placeholder type=\"block\" blockSize=\"sm\" rounded=\"lg\" blink={true} />\n            <div className=\"u-marg-top--xl\">\n                <Placeholder type=\"block\" blockSize=\"xs\" rounded=\"lg\" blink={true} />\n                <Placeholder type=\"text\" w=\"md\" h=\"sm\" blink={true} />\n                <Placeholder type=\"text\" w=\"md\" h=\"sm\" blink={true} />\n                <div className=\"u-marg-top--heavy\">\n                    <Placeholder type=\"text\" w=\"md\" h=\"xs\" blink={true} />\n                    <Placeholder type=\"text\" w=\"md\" h=\"xs\" blink={true} />\n                    <Placeholder type=\"text\" w=\"md\" h=\"xs\" blink={true} />\n                </div>\n                <Placeholder type=\"block\" blockSize=\"xs\" rounded=\"lg\" blink={true} />\n                <Placeholder type=\"text\" w=\"md\" h=\"xl\" blink={true} />\n                <Placeholder type=\"text\" w=\"xl\" h=\"md\" blink={true} />\n            </div>\n        </div>\n    );\n};\n\nconst StepHotelLoader = () => {\n    return (\n        <Suspense fallback={<Loader />}>\n            <StepHotelComponent />\n        </Suspense>\n    );\n};\n\nexport default StepHotelLoader;\n"]}
+{"version":3,"file":"StepHotelLoader.js","sourceRoot":"/","sources":["src/pages/steps/StepHotel/StepHotelLoader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { BookingEngineContext } from '@frontend/contexts';\nimport React from 'react';\nimport { useContext } from 'react';\n\nimport { lazy, Suspense } from 'react';\nimport LineBreak from '@/components/generic/LineBreak';\nimport Placeholder from '@/components/generic/Placeholder';\nimport ScreenSize from '@/util/ScreenSize';\n\nconst StepHotelComponent = lazy(() => import('@/pages/steps/StepHotel/StepHotelComponent'));\n\nconst Loader = () => {\n    const { screenSize } = useContext(BookingEngineContext);\n\n    return screenSize > ScreenSize.Medium ? (\n        <div className=\"container\">\n            <div className=\"u-marg-bottom--heavy\">\n                <Placeholder blink type=\"text\" w=\"xs\" h=\"xs\" />\n                <Placeholder blink type=\"text\" w=\"sm\" h=\"md\" />\n            </div>\n            <div>\n                <Placeholder blink type=\"text\" w=\"md\" h=\"lg\" />\n            </div>\n            <LineBreak />\n            <div>\n                <Placeholder blink type=\"text\" w=\"xl\" h=\"lg\" />\n            </div>\n            <div className=\"row\">\n                {[0, 1, 2].map((index) => (\n                    <div className=\"col-md-4\" key={index}>\n                        <Placeholder blink rounded=\"lg\" type=\"block\" blockSize=\"sm\" />\n                        <Placeholder blink type=\"text\" w=\"md\" h=\"md\" />\n                        <Placeholder blink type=\"text\" w=\"md\" h=\"md\" />\n                        <Placeholder blink type=\"text\" w=\"xl\" h=\"lg\" />\n                        <Placeholder blink type=\"text\" w=\"xl\" h=\"xs\" />\n                        <Placeholder blink type=\"text\" w=\"xl\" h=\"xs\" />\n                        <Placeholder blink type=\"text\" w=\"xl\" h=\"xs\" />\n                        <Placeholder blink type=\"block\" blockSize=\"xs\" rounded=\"md\" />\n                        <Placeholder blink type=\"text\" w=\"md\" h=\"xl\" />\n                    </div>\n                ))}\n            </div>\n        </div>\n    ) : (\n        <div className=\"container\">\n            <div className=\"row\">\n                <div className=\"col-6\">\n                    <Placeholder blink type=\"text\" w=\"md\" h=\"md\" />\n                </div>\n                <div className=\"col-6\">\n                    <Placeholder blink type=\"text\" w=\"md\" h=\"md\" />\n                </div>\n            </div>\n            <LineBreak />\n            <Placeholder type=\"block\" blockSize=\"sm\" rounded=\"lg\" blink />\n            <div className=\"u-marg-top--xl\">\n                <Placeholder type=\"block\" blockSize=\"xs\" rounded=\"lg\" blink />\n                <Placeholder type=\"text\" w=\"md\" h=\"sm\" blink />\n                <Placeholder type=\"text\" w=\"md\" h=\"sm\" blink />\n                <div className=\"u-marg-top--heavy\">\n                    <Placeholder type=\"text\" w=\"md\" h=\"xs\" blink />\n                    <Placeholder type=\"text\" w=\"md\" h=\"xs\" blink />\n                    <Placeholder type=\"text\" w=\"md\" h=\"xs\" blink />\n                </div>\n                <Placeholder type=\"block\" blockSize=\"xs\" rounded=\"lg\" blink />\n                <Placeholder type=\"text\" w=\"md\" h=\"xl\" blink />\n                <Placeholder type=\"text\" w=\"xl\" h=\"md\" blink />\n            </div>\n        </div>\n    );\n};\n\nconst StepHotelLoader = () => {\n    return (\n        <Suspense fallback={<Loader />}>\n            <StepHotelComponent />\n        </Suspense>\n    );\n};\n\nexport default StepHotelLoader;\n"]}

package/dist/src/pages/steps/StepRoom/StepRoom.d.ts

@@ -9,7 +9,7 @@ declare class StepRoom extends Step {
     getComponent(): typeof StepRoomLoader;
     getValidator(): StepRoomValidator;
     getStepTranslation(): string;
-    getColorProfile(company: Company, hotel?: Hotel): ColorProfile;
+    getColorProfile(company: Company, hotel?: Hotel): ColorProfile | undefined;
 }
 declare const _default: StepRoom;
 export default _default;

package/dist/src/pages/steps/StepRoom/StepRoom.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepRoom.js","sourceRoot":"/","sources":["src/pages/steps/StepRoom/StepRoom.ts"],"names":[],"mappings":";;;;;AAGA,0DAAuD;AACvD,8DAAsC;AACtC,2FAAmE;AACnE,iGAAyE;AAEzE,MAAM,QAAS,SAAQ,cAAI;IACvB;QACI,KAAK,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAEM,YAAY;QACf,OAAO,wBAAc,CAAC;IAC1B,CAAC;IAEM,YAAY;QACf,OAAO,IAAI,2BAAiB,EAAE,CAAC;IACnC,CAAC;IAEM,kBAAkB;QACrB,OAAO,yBAAW,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC;IAC7C,CAAC;IAEM,eAAe,CAAC,OAAgB,EAAE,KAAa;QAClD,IAAI,KAAK,EAAE;YACP,OAAO,KAAK,CAAC,MAAM,CAAC;SACvB;IACL,CAAC;CACJ;AAED,kBAAe,IAAI,QAAQ,EAAE,CAAC","sourcesContent":["import ColorProfile from '@/models/Client/Hotel/ColorProfile';\nimport { Company } from '@/models/Client/Hotel/Company';\nimport { Hotel } from '@/models/Client/Hotel/Hotel';\nimport { Translation } from 'translations/Translation';\nimport Step from '@/pages/steps/Step';\nimport StepRoomLoader from '@/pages/steps/StepRoom/StepRoomLoader';\nimport StepRoomValidator from '@/pages/steps/StepRoom/StepRoomValidator';\n\nclass StepRoom extends Step {\n    public constructor() {\n        super('Room');\n    }\n\n    public getComponent() {\n        return StepRoomLoader;\n    }\n\n    public getValidator() {\n        return new StepRoomValidator();\n    }\n\n    public getStepTranslation() {\n        return Translation.Navigation.Steps.Room;\n    }\n\n    public getColorProfile(company: Company, hotel?: Hotel): ColorProfile {\n        if (hotel) {\n            return hotel.colors;\n        }\n    }\n}\n\nexport default new StepRoom();\n"]}
+{"version":3,"file":"StepRoom.js","sourceRoot":"/","sources":["src/pages/steps/StepRoom/StepRoom.ts"],"names":[],"mappings":";;;;;AAGA,0DAAuD;AACvD,8DAAsC;AACtC,2FAAmE;AACnE,iGAAyE;AAEzE,MAAM,QAAS,SAAQ,cAAI;IACvB;QACI,KAAK,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAEM,YAAY;QACf,OAAO,wBAAc,CAAC;IAC1B,CAAC;IAEM,YAAY;QACf,OAAO,IAAI,2BAAiB,EAAE,CAAC;IACnC,CAAC;IAEM,kBAAkB;QACrB,OAAO,yBAAW,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC;IAC7C,CAAC;IAEM,eAAe,CAAC,OAAgB,EAAE,KAAa;QAClD,IAAI,KAAK,EAAE;YACP,OAAO,KAAK,CAAC,MAAM,CAAC;SACvB;IACL,CAAC;CACJ;AAED,kBAAe,IAAI,QAAQ,EAAE,CAAC","sourcesContent":["import ColorProfile from '@/models/Client/Hotel/ColorProfile';\nimport { Company } from '@/models/Client/Hotel/Company';\nimport { Hotel } from '@/models/Client/Hotel/Hotel';\nimport { Translation } from 'translations/Translation';\nimport Step from '@/pages/steps/Step';\nimport StepRoomLoader from '@/pages/steps/StepRoom/StepRoomLoader';\nimport StepRoomValidator from '@/pages/steps/StepRoom/StepRoomValidator';\n\nclass StepRoom extends Step {\n    public constructor() {\n        super('Room');\n    }\n\n    public getComponent() {\n        return StepRoomLoader;\n    }\n\n    public getValidator() {\n        return new StepRoomValidator();\n    }\n\n    public getStepTranslation() {\n        return Translation.Navigation.Steps.Room;\n    }\n\n    public getColorProfile(company: Company, hotel?: Hotel): ColorProfile | undefined {\n        if (hotel) {\n            return hotel.colors;\n        }\n    }\n}\n\nexport default new StepRoom();\n"]}

package/dist/src/pages/steps/StepRoom/StepRoomComponent.js

@@ -26,8 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("react");
-const React = __importStar(require("react"));
+const react_1 = __importStar(require("react"));
 const react_i18next_1 = require("react-i18next");
 const react_router_dom_1 = require("react-router-dom");
 const BackButton_1 = __importDefault(require("../../../components/generic/BackButton"));
@@ -48,10 +47,11 @@ const ScreenSize_1 = __importDefault(require("../../../util/ScreenSize"));
 const StepManager_1 = __importDefault(require("../../../util/StepManager"));
 const DataLayer_1 = __importStar(require("../../../util/DataLayer"));
 const contexts_1 = require("../../../contexts/index.js");
+const StepLayout_1 = require("../../../components/generic/Layout/StepLayout");
 const StepRoomComponent = () => {
     const context = (0, react_1.useContext)(contexts_1.BookingEngineContext);
     const { t } = (0, react_i18next_1.useTranslation)();
-    const filterButton = (0, react_1.useRef)();
+    const filterButton = (0, react_1.useRef)(null);
     const [filtersOpen, setFiltersOpen] = (0, react_1.useState)(false);
     const { currentStep } = (0, react_1.useContext)(contexts_1.FullPageEngineContext);
     const openFilter = () => {
@@ -61,37 +61,37 @@ const StepRoomComponent = () => {
     const closeFilter = () => {
         setFiltersOpen(false);
     };
-    return (React.createElement("div", { className: "container" },
-        React.createElement(BEMobileSummary_1.default, null),
-        React.createElement("div", { className: 'row' + (context.screenSize > ScreenSize_1.default.ExtraLarge ? ' no-gutters' : '') },
-            React.createElement("div", { className: "col-md-8" },
-                context.screenSize > ScreenSize_1.default.Medium && (React.createElement(React.Fragment, null,
-                    React.createElement(react_router_dom_1.Link, { to: StepManager_1.default.getPreviousStepUrl(currentStep) },
-                        React.createElement(BackButton_1.default, null)),
-                    React.createElement("div", { className: "u-marg-top--light u-marg-bottom--heavy" },
-                        React.createElement(Headline_1.default, { bold: true }, t(Translation_1.Translation.Step.Room.ChooseRoom))))),
-                React.createElement("div", { className: "row align-items-end" },
-                    React.createElement("div", { className: "col-6 col-md-4 col-lg-3" },
-                        React.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.DarkGrey },
-                            React.createElement("strong", null, t(Translation_1.Translation.Step.Room.SortBy))),
-                        React.createElement("div", null,
-                            React.createElement(StepRoomSortBy_1.default, null))),
-                    React.createElement("div", { className: "col-6 col-md-2 col-lg-2" },
-                        React.createElement("div", { ref: filterButton },
-                            React.createElement("div", { className: "filter-button d-flex align-items-center u-cursor-pointer", onClick: openFilter },
-                                React.createElement(Text_1.default, null, context.screenSize > ScreenSize_1.default.Medium ? t(Translation_1.Translation.Step.Room.FilterBy) : t(Translation_1.Translation.Step.Room.Filter.ShowFilters)),
-                                React.createElement(Icon_1.default, { icon: Icon_1.IconType.Dropdown, color: Color_1.Color.DarkGrey })),
-                            React.createElement(RoomFilterOverlay_1.default, { open: filtersOpen, anchorEl: filterButton.current, onClose: closeFilter }))),
-                    React.createElement("div", { className: "col-md-12 col-lg-7 u-align-right u-marg-top@l- u-empty-none filter-push-down" },
-                        React.createElement(AppliedFiltersBlock_1.default, null)))),
-            context.screenSize > ScreenSize_1.default.Medium && (React.createElement("div", { className: "col-xl-3 col-md-4 offset-xl-1 align-self-end" },
-                React.createElement(StepRoomHotelDetails_1.default, null)))),
-        context.screenSize > ScreenSize_1.default.Medium && React.createElement(LineBreak_1.default, null),
-        React.createElement("div", { className: 'row' + (context.screenSize > ScreenSize_1.default.ExtraLarge ? ' no-gutters' : '') },
-            React.createElement("div", { className: "col-md-7 col-lg-8" },
-                React.createElement(RoomList_1.default, null)),
-            React.createElement("div", { className: "col-xl-3 col-md-5 col-lg-4 offset-xl-1" },
-                React.createElement(StepRoomSummaryAndButton_1.default, null)))));
+    return (react_1.default.createElement("div", { className: "container" },
+        react_1.default.createElement(BEMobileSummary_1.default, null),
+        react_1.default.createElement(StepLayout_1.StepLayoutContainer, null,
+            react_1.default.createElement(StepLayout_1.StepLayoutLeftContent, null,
+                context.screenSize > ScreenSize_1.default.Medium && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(react_router_dom_1.Link, { to: StepManager_1.default.getPreviousStepUrl(currentStep) },
+                        react_1.default.createElement(BackButton_1.default, null)),
+                    react_1.default.createElement("div", { className: "u-marg-top--light u-marg-bottom--heavy" },
+                        react_1.default.createElement(Headline_1.default, { bold: true }, t(Translation_1.Translation.Step.Room.ChooseRoom))))),
+                react_1.default.createElement("div", { className: "row align-items-end" },
+                    react_1.default.createElement("div", { className: "col-6 col-md-4 col-lg-3" },
+                        react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.DarkGrey },
+                            react_1.default.createElement("strong", null, t(Translation_1.Translation.Step.Room.SortBy))),
+                        react_1.default.createElement("div", null,
+                            react_1.default.createElement(StepRoomSortBy_1.default, null))),
+                    react_1.default.createElement("div", { className: "col-6 col-md-2 col-lg-2" },
+                        react_1.default.createElement("div", { ref: filterButton },
+                            react_1.default.createElement("div", { className: "filter-button d-flex align-items-center u-cursor-pointer", onClick: openFilter },
+                                react_1.default.createElement(Text_1.default, null, context.screenSize > ScreenSize_1.default.Medium ? t(Translation_1.Translation.Step.Room.FilterBy) : t(Translation_1.Translation.Step.Room.Filter.ShowFilters)),
+                                react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Dropdown, color: Color_1.Color.DarkGrey })),
+                            react_1.default.createElement(RoomFilterOverlay_1.default, { open: filtersOpen, anchorEl: filterButton.current, onClose: closeFilter }))),
+                    react_1.default.createElement("div", { className: "col-md-12 col-lg-7 u-align-right u-marg-top@l- u-empty-none filter-push-down" },
+                        react_1.default.createElement(AppliedFiltersBlock_1.default, null)))),
+            context.screenSize > ScreenSize_1.default.Medium && (react_1.default.createElement(StepLayout_1.StepLayoutRightContent, null,
+                react_1.default.createElement(StepRoomHotelDetails_1.default, null)))),
+        context.screenSize > ScreenSize_1.default.Medium && react_1.default.createElement(LineBreak_1.default, null),
+        react_1.default.createElement(StepLayout_1.StepLayoutContainer, null,
+            react_1.default.createElement(StepLayout_1.StepLayoutLeftContent, null,
+                react_1.default.createElement(RoomList_1.default, null)),
+            react_1.default.createElement(StepLayout_1.StepLayoutRightContent, null,
+                react_1.default.createElement(StepRoomSummaryAndButton_1.default, null)))));
 };
 exports.default = StepRoomComponent;
 //# sourceMappingURL=StepRoomComponent.js.map

package/dist/src/pages/steps/StepRoom/StepRoomComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepRoomComponent.js","sourceRoot":"/","sources":["src/pages/steps/StepRoom/StepRoomComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useContext, useRef, useState } from 'react';\nimport * as React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Link } from 'react-router-dom';\nimport BackButton from '@/components/generic/BackButton';\nimport Headline from '@/components/generic/Headline';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport LineBreak from '@/components/generic/LineBreak';\nimport Text, { TextType } from '@/components/generic/Text';\nimport AppliedFiltersBlock from '@/components/steps/room/roomFilter/AppliedFiltersBlock';\nimport RoomFilterOverlay from '@/components/steps/room/roomFilter/RoomFilterOverlay';\nimport RoomList from '@/components/steps/room/RoomList';\nimport StepRoomHotelDetails from '@/components/steps/room/StepRoomHotelDetails';\nimport StepRoomSortBy from '@/components/steps/room/StepRoomSortBy';\nimport StepRoomSummaryAndButton from '@/components/steps/room/StepRoomSummaryAndButton';\nimport BEMobileSummary from '@/components/summary/BEMobileSummary';\n\nimport { Translation } from 'translations/Translation';\nimport { Color } from '@/util/Color';\nimport ScreenSize from '@/util/ScreenSize';\nimport StepManager from '@/util/StepManager';\nimport DataLayer, { InteractionType, InteractionStep } from '@/util/DataLayer';\nimport { BookingEngineContext, FullPageEngineContext } from '@frontend/contexts';\n\nconst StepRoomComponent = () => {\n    const context = useContext(BookingEngineContext);\n\n    const { t } = useTranslation();\n\n    const filterButton = useRef();\n    const [filtersOpen, setFiltersOpen] = useState(false);\n\n    const { currentStep } = useContext(FullPageEngineContext);\n\n    const openFilter = () => {\n        DataLayer.instance.sendInteraction('Show Filters', InteractionType.DROPDOWN, InteractionStep.ROOMS);\n        setFiltersOpen(true);\n    };\n\n    const closeFilter = () => {\n        setFiltersOpen(false);\n    };\n\n    return (\n        <div className=\"container\">\n            <BEMobileSummary />\n            <div className={'row' + (context.screenSize > ScreenSize.ExtraLarge ? ' no-gutters' : '')}>\n                <div className=\"col-md-8\">\n                    {context.screenSize > ScreenSize.Medium && (\n                        <>\n                            <Link to={StepManager.getPreviousStepUrl(currentStep)}>\n                                <BackButton />\n                            </Link>\n                            <div className=\"u-marg-top--light u-marg-bottom--heavy\">\n                                <Headline bold={true}>{t(Translation.Step.Room.ChooseRoom)}</Headline>\n                            </div>\n                        </>\n                    )}\n                    <div className=\"row align-items-end\">\n                        <div className=\"col-6 col-md-4 col-lg-3\">\n                            <Text type={TextType.Label} color={Color.DarkGrey}>\n                                <strong>{t(Translation.Step.Room.SortBy)}</strong>\n                            </Text>\n                            <div>\n                                <StepRoomSortBy />\n                            </div>\n                        </div>\n                        <div className=\"col-6 col-md-2 col-lg-2\">\n                            <div ref={filterButton}>\n                                <div className=\"filter-button d-flex align-items-center u-cursor-pointer\" onClick={openFilter}>\n                                    <Text>{context.screenSize > ScreenSize.Medium ? t(Translation.Step.Room.FilterBy) : t(Translation.Step.Room.Filter.ShowFilters)}</Text>\n                                    <Icon icon={IconType.Dropdown} color={Color.DarkGrey} />\n                                </div>\n                                {<RoomFilterOverlay open={filtersOpen} anchorEl={filterButton.current} onClose={closeFilter} />}\n                            </div>\n                        </div>\n                        <div className=\"col-md-12 col-lg-7 u-align-right u-marg-top@l- u-empty-none filter-push-down\">\n                            <AppliedFiltersBlock />\n                        </div>\n                    </div>\n                </div>\n                {context.screenSize > ScreenSize.Medium && (\n                    <div className=\"col-xl-3 col-md-4 offset-xl-1 align-self-end\">\n                        <StepRoomHotelDetails />\n                    </div>\n                )}\n            </div>\n            {context.screenSize > ScreenSize.Medium && <LineBreak />}\n            <div className={'row' + (context.screenSize > ScreenSize.ExtraLarge ? ' no-gutters' : '')}>\n                <div className=\"col-md-7 col-lg-8\">\n                    <RoomList />\n                </div>\n                <div className=\"col-xl-3 col-md-5 col-lg-4 offset-xl-1\">\n                    <StepRoomSummaryAndButton />\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default StepRoomComponent;\n"]}
+{"version":3,"file":"StepRoomComponent.js","sourceRoot":"/","sources":["src/pages/steps/StepRoom/StepRoomComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext, useRef, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Link } from 'react-router-dom';\nimport BackButton from '@/components/generic/BackButton';\nimport Headline from '@/components/generic/Headline';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport LineBreak from '@/components/generic/LineBreak';\nimport Text, { TextType } from '@/components/generic/Text';\nimport AppliedFiltersBlock from '@/components/steps/room/roomFilter/AppliedFiltersBlock';\nimport RoomFilterOverlay from '@/components/steps/room/roomFilter/RoomFilterOverlay';\nimport RoomList from '@/components/steps/room/RoomList';\nimport StepRoomHotelDetails from '@/components/steps/room/StepRoomHotelDetails';\nimport StepRoomSortBy from '@/components/steps/room/StepRoomSortBy';\nimport StepRoomSummaryAndButton from '@/components/steps/room/StepRoomSummaryAndButton';\nimport BEMobileSummary from '@/components/summary/BEMobileSummary';\n\nimport { Translation } from 'translations/Translation';\nimport { Color } from '@/util/Color';\nimport ScreenSize from '@/util/ScreenSize';\nimport StepManager from '@/util/StepManager';\nimport DataLayer, { InteractionStep, InteractionType } from '@/util/DataLayer';\nimport { BookingEngineContext, FullPageEngineContext } from '@frontend/contexts';\nimport { StepLayoutContainer, StepLayoutLeftContent, StepLayoutRightContent } from '@/components/generic/Layout/StepLayout';\n\nconst StepRoomComponent = () => {\n    const context = useContext(BookingEngineContext);\n\n    const { t } = useTranslation();\n\n    const filterButton = useRef<HTMLDivElement | null>(null);\n    const [filtersOpen, setFiltersOpen] = useState(false);\n\n    const { currentStep } = useContext(FullPageEngineContext);\n\n    const openFilter = () => {\n        DataLayer.instance.sendInteraction('Show Filters', InteractionType.DROPDOWN, InteractionStep.ROOMS);\n        setFiltersOpen(true);\n    };\n\n    const closeFilter = () => {\n        setFiltersOpen(false);\n    };\n\n    return (\n        <div className=\"container\">\n            <BEMobileSummary />\n            <StepLayoutContainer>\n                <StepLayoutLeftContent>\n                    {context.screenSize > ScreenSize.Medium && (\n                        <>\n                            <Link to={StepManager.getPreviousStepUrl(currentStep)}>\n                                <BackButton />\n                            </Link>\n                            <div className=\"u-marg-top--light u-marg-bottom--heavy\">\n                                <Headline bold>{t(Translation.Step.Room.ChooseRoom)}</Headline>\n                            </div>\n                        </>\n                    )}\n                    <div className=\"row align-items-end\">\n                        <div className=\"col-6 col-md-4 col-lg-3\">\n                            <Text type={TextType.Label} color={Color.DarkGrey}>\n                                <strong>{t(Translation.Step.Room.SortBy)}</strong>\n                            </Text>\n                            <div>\n                                <StepRoomSortBy />\n                            </div>\n                        </div>\n                        <div className=\"col-6 col-md-2 col-lg-2\">\n                            <div ref={filterButton}>\n                                <div className=\"filter-button d-flex align-items-center u-cursor-pointer\" onClick={openFilter}>\n                                    <Text>{context.screenSize > ScreenSize.Medium ? t(Translation.Step.Room.FilterBy) : t(Translation.Step.Room.Filter.ShowFilters)}</Text>\n                                    <Icon icon={IconType.Dropdown} color={Color.DarkGrey} />\n                                </div>\n                                <RoomFilterOverlay open={filtersOpen} anchorEl={filterButton.current} onClose={closeFilter} />\n                            </div>\n                        </div>\n                        <div className=\"col-md-12 col-lg-7 u-align-right u-marg-top@l- u-empty-none filter-push-down\">\n                            <AppliedFiltersBlock />\n                        </div>\n                    </div>\n                </StepLayoutLeftContent>\n                {context.screenSize > ScreenSize.Medium && (\n                    <StepLayoutRightContent>\n                        <StepRoomHotelDetails />\n                    </StepLayoutRightContent>\n                )}\n            </StepLayoutContainer>\n            {context.screenSize > ScreenSize.Medium && <LineBreak />}\n            <StepLayoutContainer>\n                <StepLayoutLeftContent>\n                    <RoomList />\n                </StepLayoutLeftContent>\n                <StepLayoutRightContent>\n                    <StepRoomSummaryAndButton />\n                </StepLayoutRightContent>\n            </StepLayoutContainer>\n        </div>\n    );\n};\n\nexport default StepRoomComponent;\n"]}

package/dist/src/pages/steps/StepRoom/StepRoomLoader.js

@@ -26,84 +26,84 @@ 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 = __importStar(require("react"));
 const Placeholder_1 = __importDefault(require("../../../components/generic/Placeholder"));
-const react_1 = require("react");
+const StepLayout_1 = require("../../../components/generic/Layout/StepLayout");
 const StepRoomComponent = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./StepRoomComponent'))));
 function StepRoomPlaceholder() {
-    return (React.createElement("div", { className: "container" },
-        React.createElement("div", { className: "row no-gutters" },
-            React.createElement("div", { className: "col-sm-12 col-md-8" },
-                React.createElement("div", { className: "d-none d-md-block u-marg-top--light u-marg-bottom--heavy" },
-                    React.createElement(Placeholder_1.default, { type: "text", w: "sm", h: "md", blink: true })),
-                React.createElement("br", null),
-                React.createElement("div", { className: "row" },
-                    React.createElement("div", { className: "col-6 col-md-4 col-lg-3" },
-                        React.createElement(Placeholder_1.default, { type: "text", w: "lg", h: "md", blink: true })),
-                    React.createElement("div", { className: "col-6 col-md-4 col-lg-3" },
-                        React.createElement(Placeholder_1.default, { type: "text", w: "lg", h: "md", blink: true })))),
-            React.createElement("div", { className: "d-none d-md-block col-xl-3 col-md-4 offset-xl-1 align-self-end" },
-                React.createElement("div", { className: "u-marg-bottom" },
-                    React.createElement(Placeholder_1.default, { type: "text", w: "md", h: "md", blink: true }),
-                    React.createElement(Placeholder_1.default, { type: "text", w: "sm", h: "sm", blink: true })),
-                React.createElement("div", { className: "row" },
-                    React.createElement("div", { className: "col-6" },
-                        React.createElement(Placeholder_1.default, { type: "text", w: "lg", h: "md", blink: true })),
-                    React.createElement("div", { className: "col-6" },
-                        React.createElement(Placeholder_1.default, { type: "text", w: "lg", h: "md", blink: true }))))),
-        React.createElement("div", { className: "line-break" }),
-        React.createElement("div", { className: "row no-gutters" },
-            React.createElement("div", { className: "col-md-7 col-lg-8" },
-                React.createElement("div", { className: "u-w-100 u-flex u-flex-direction-column u-flex-align-flex-end" },
-                    React.createElement(Placeholder_1.default, { type: "text", w: "lg", h: "lg", blink: true }),
-                    React.createElement(Placeholder_1.default, { type: "text", w: "xs", h: "md", blink: true })),
-                React.createElement("br", null),
-                React.createElement("div", { className: "u-marg-bottom" },
-                    React.createElement("div", { className: "row" },
-                        React.createElement("div", { className: "col-lg-12 col-xl-5 u-flex" },
-                            React.createElement(Placeholder_1.default, { type: "block", blockSize: "md", rounded: "lg", blink: true })),
-                        React.createElement("div", { className: "col-lg-7 col-xl-7" },
-                            React.createElement(Placeholder_1.default, { type: "text", w: "md", h: "md", blink: true }),
-                            React.createElement(Placeholder_1.default, { type: "text", w: "lg", h: "sm", blink: true }),
-                            React.createElement("div", { className: "u-marg-top-bottom--heavy" },
-                                React.createElement(Placeholder_1.default, { type: "text", w: "lg", h: "xs", blink: true }),
-                                React.createElement(Placeholder_1.default, { type: "text", w: "lg", h: "xs", blink: true })),
-                            React.createElement("div", { className: "u-marg-top-bottom--heavy" },
-                                React.createElement(Placeholder_1.default, { type: "text", w: "sm", h: "sm", blink: true }),
-                                React.createElement(Placeholder_1.default, { type: "text", w: "sm", h: "sm", blink: true }),
-                                React.createElement(Placeholder_1.default, { type: "text", w: "sm", h: "sm", blink: true }),
-                                React.createElement(Placeholder_1.default, { type: "text", w: "sm", h: "sm", blink: true }),
-                                React.createElement(Placeholder_1.default, { type: "text", w: "sm", h: "sm", blink: true })),
-                            React.createElement(Placeholder_1.default, { type: "text", w: "sm", h: "xs", blink: true })))),
-                React.createElement("div", { className: "u-marg-bottom" },
-                    React.createElement("div", { className: "row" },
-                        React.createElement("div", { className: "col-lg-12 col-xl-5 u-flex" },
-                            React.createElement(Placeholder_1.default, { type: "block", blockSize: "md", rounded: "lg", blink: true })),
-                        React.createElement("div", { className: "col-lg-7 col-xl-7" },
-                            React.createElement(Placeholder_1.default, { type: "text", w: "md", h: "md", blink: true }),
-                            React.createElement(Placeholder_1.default, { type: "text", w: "lg", h: "sm", blink: true }),
-                            React.createElement("div", { className: "u-marg-top-bottom--heavy" },
-                                React.createElement(Placeholder_1.default, { type: "text", w: "lg", h: "xs", blink: true }),
-                                React.createElement(Placeholder_1.default, { type: "text", w: "lg", h: "xs", blink: true })),
-                            React.createElement("div", { className: "u-marg-top-bottom--heavy" },
-                                React.createElement(Placeholder_1.default, { type: "text", w: "sm", h: "sm", blink: true }),
-                                React.createElement(Placeholder_1.default, { type: "text", w: "sm", h: "sm", blink: true }),
-                                React.createElement(Placeholder_1.default, { type: "text", w: "sm", h: "sm", blink: true }),
-                                React.createElement(Placeholder_1.default, { type: "text", w: "sm", h: "sm", blink: true }),
-                                React.createElement(Placeholder_1.default, { type: "text", w: "sm", h: "sm", blink: true })),
-                            React.createElement(Placeholder_1.default, { type: "text", w: "sm", h: "xs", blink: true }))))),
-            React.createElement("div", { className: "col-xl-3 col-md-5 col-lg-4 offset-xl-1" },
-                React.createElement("div", { className: "u-pad" },
-                    React.createElement("div", null,
-                        React.createElement(Placeholder_1.default, { type: "block", blockSize: "lg", rounded: "lg", blink: true })),
-                    React.createElement("div", null,
-                        React.createElement(Placeholder_1.default, { type: "text", w: "xl", h: "lg", blink: true })),
-                    React.createElement("div", { className: "u-marg-top--heavy" },
-                        React.createElement(Placeholder_1.default, { type: "block", blockSize: "sm", rounded: "lg", blink: true })))))));
+    return (react_1.default.createElement("div", { className: "container" },
+        react_1.default.createElement(StepLayout_1.StepLayoutContainer, null,
+            react_1.default.createElement(StepLayout_1.StepLayoutLeftContent, null,
+                react_1.default.createElement("div", { className: "d-none d-md-block u-marg-top--light u-marg-bottom--heavy" },
+                    react_1.default.createElement(Placeholder_1.default, { type: "text", w: "sm", h: "md", blink: true })),
+                react_1.default.createElement("br", null),
+                react_1.default.createElement("div", { className: "row" },
+                    react_1.default.createElement("div", { className: "col-6 col-md-4 col-lg-3" },
+                        react_1.default.createElement(Placeholder_1.default, { type: "text", w: "lg", h: "md", blink: true })),
+                    react_1.default.createElement("div", { className: "col-6 col-md-4 col-lg-3" },
+                        react_1.default.createElement(Placeholder_1.default, { type: "text", w: "lg", h: "md", blink: true })))),
+            react_1.default.createElement(StepLayout_1.StepLayoutRightContent, { className: "d-none d-md-block" },
+                react_1.default.createElement("div", { className: "u-marg-bottom" },
+                    react_1.default.createElement(Placeholder_1.default, { type: "text", w: "md", h: "md", blink: true }),
+                    react_1.default.createElement(Placeholder_1.default, { type: "text", w: "sm", h: "sm", blink: true })),
+                react_1.default.createElement("div", { className: "row" },
+                    react_1.default.createElement("div", { className: "col-6" },
+                        react_1.default.createElement(Placeholder_1.default, { type: "text", w: "lg", h: "md", blink: true })),
+                    react_1.default.createElement("div", { className: "col-6" },
+                        react_1.default.createElement(Placeholder_1.default, { type: "text", w: "lg", h: "md", blink: true }))))),
+        react_1.default.createElement("div", { className: "line-break" }),
+        react_1.default.createElement(StepLayout_1.StepLayoutContainer, null,
+            react_1.default.createElement(StepLayout_1.StepLayoutLeftContent, null,
+                react_1.default.createElement("div", { className: "u-w-100 u-flex u-flex-direction-column u-flex-align-flex-end" },
+                    react_1.default.createElement(Placeholder_1.default, { type: "text", w: "lg", h: "lg", blink: true }),
+                    react_1.default.createElement(Placeholder_1.default, { type: "text", w: "xs", h: "md", blink: true })),
+                react_1.default.createElement("br", null),
+                react_1.default.createElement("div", { className: "u-marg-bottom" },
+                    react_1.default.createElement("div", { className: "row" },
+                        react_1.default.createElement("div", { className: "col-lg-12 col-xl-5 u-flex" },
+                            react_1.default.createElement(Placeholder_1.default, { type: "block", blockSize: "md", rounded: "lg", blink: true })),
+                        react_1.default.createElement("div", { className: "col-lg-7 col-xl-7" },
+                            react_1.default.createElement(Placeholder_1.default, { type: "text", w: "md", h: "md", blink: true }),
+                            react_1.default.createElement(Placeholder_1.default, { type: "text", w: "lg", h: "sm", blink: true }),
+                            react_1.default.createElement("div", { className: "u-marg-top-bottom--heavy" },
+                                react_1.default.createElement(Placeholder_1.default, { type: "text", w: "lg", h: "xs", blink: true }),
+                                react_1.default.createElement(Placeholder_1.default, { type: "text", w: "lg", h: "xs", blink: true })),
+                            react_1.default.createElement("div", { className: "u-marg-top-bottom--heavy" },
+                                react_1.default.createElement(Placeholder_1.default, { type: "text", w: "sm", h: "sm", blink: true }),
+                                react_1.default.createElement(Placeholder_1.default, { type: "text", w: "sm", h: "sm", blink: true }),
+                                react_1.default.createElement(Placeholder_1.default, { type: "text", w: "sm", h: "sm", blink: true }),
+                                react_1.default.createElement(Placeholder_1.default, { type: "text", w: "sm", h: "sm", blink: true }),
+                                react_1.default.createElement(Placeholder_1.default, { type: "text", w: "sm", h: "sm", blink: true })),
+                            react_1.default.createElement(Placeholder_1.default, { type: "text", w: "sm", h: "xs", blink: true })))),
+                react_1.default.createElement("div", { className: "u-marg-bottom" },
+                    react_1.default.createElement("div", { className: "row" },
+                        react_1.default.createElement("div", { className: "col-lg-12 col-xl-5 u-flex" },
+                            react_1.default.createElement(Placeholder_1.default, { type: "block", blockSize: "md", rounded: "lg", blink: true })),
+                        react_1.default.createElement("div", { className: "col-lg-7 col-xl-7" },
+                            react_1.default.createElement(Placeholder_1.default, { type: "text", w: "md", h: "md", blink: true }),
+                            react_1.default.createElement(Placeholder_1.default, { type: "text", w: "lg", h: "sm", blink: true }),
+                            react_1.default.createElement("div", { className: "u-marg-top-bottom--heavy" },
+                                react_1.default.createElement(Placeholder_1.default, { type: "text", w: "lg", h: "xs", blink: true }),
+                                react_1.default.createElement(Placeholder_1.default, { type: "text", w: "lg", h: "xs", blink: true })),
+                            react_1.default.createElement("div", { className: "u-marg-top-bottom--heavy" },
+                                react_1.default.createElement(Placeholder_1.default, { type: "text", w: "sm", h: "sm", blink: true }),
+                                react_1.default.createElement(Placeholder_1.default, { type: "text", w: "sm", h: "sm", blink: true }),
+                                react_1.default.createElement(Placeholder_1.default, { type: "text", w: "sm", h: "sm", blink: true }),
+                                react_1.default.createElement(Placeholder_1.default, { type: "text", w: "sm", h: "sm", blink: true }),
+                                react_1.default.createElement(Placeholder_1.default, { type: "text", w: "sm", h: "sm", blink: true })),
+                            react_1.default.createElement(Placeholder_1.default, { type: "text", w: "sm", h: "xs", blink: true }))))),
+            react_1.default.createElement(StepLayout_1.StepLayoutRightContent, null,
+                react_1.default.createElement("div", { className: "u-pad" },
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement(Placeholder_1.default, { type: "block", blockSize: "lg", rounded: "lg", blink: true })),
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement(Placeholder_1.default, { type: "text", w: "xl", h: "lg", blink: true })),
+                    react_1.default.createElement("div", { className: "u-marg-top--heavy" },
+                        react_1.default.createElement(Placeholder_1.default, { type: "block", blockSize: "sm", rounded: "lg", blink: true })))))));
 }
 function StepRoomLoader() {
-    return (React.createElement(react_1.Suspense, { fallback: React.createElement(StepRoomPlaceholder, null) },
-        React.createElement(StepRoomComponent, null)));
+    return (react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement(StepRoomPlaceholder, null) },
+        react_1.default.createElement(StepRoomComponent, null)));
 }
 exports.default = StepRoomLoader;
 //# sourceMappingURL=StepRoomLoader.js.map