@roomstay/frontend 1.3.0

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

@@ -0,0 +1,148 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const react_1 = require("react");
+const react_i18next_1 = require("react-i18next");
+const BookingAPI_1 = require("../../../api/BookingAPI");
+const contexts_1 = require("@frontend/contexts");
+const events_1 = require("../../../events");
+const hooks_1 = require("@frontend/hooks");
+const EventHook_1 = require("../../../hooks/EventHook");
+const RoomUpsellFeature_1 = require("../../../providers/feature/RoomUpsellFeature");
+const Translation_1 = require("../../../translations/Translation");
+const Color_1 = require("../../../util/Color");
+const DataLayer_1 = require("../../../util/DataLayer");
+const BEButton_1 = require("../../generic/BEButton");
+const Currency_1 = require("../../generic/Currency");
+const Headline_1 = require("../../generic/Headline");
+const SimpleModal_1 = require("../../generic/modal/SimpleModal");
+const Text_1 = require("../../generic/Text");
+const ImageGallerySlider_1 = require("./ImageGallerySlider");
+const LargeRoomCard_1 = require("./LargeRoomCard");
+const AvailableUpgradesModal = () => {
+    const { t } = react_i18next_1.useTranslation();
+    const { hotel } = hooks_1.useCurrentHotel();
+    const [isOpen, setIsOpen] = react_1.useState(false);
+    const [row, setRow] = react_1.useState(null);
+    const basketContext = react_1.useContext(contexts_1.BasketContext);
+    const { on } = EventHook_1.useEvent();
+    const room = row === null || row === void 0 ? void 0 : row.getRoom();
+    const selectedRate = row === null || row === void 0 ? void 0 : row.getRate();
+    const [rates, setRates] = react_1.useState();
+    react_1.useEffect(() => {
+        let cancelled = false;
+        on(events_1.AddToCartEvent, (event) => __awaiter(void 0, void 0, void 0, function* () {
+            if (cancelled)
+                return;
+            setRow(event.basketRow);
+            return true;
+        }));
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    react_1.useEffect(() => {
+        let cancelled = false;
+        if (row) {
+            BookingAPI_1.default.Availability.fetchAvailabilityData(row, hotel.hotelID).then((availableRooms) => {
+                if (cancelled)
+                    return;
+                const unfilteredRates = [];
+                availableRooms
+                    .map((availableRoom) => {
+                    return availableRoom.getRates();
+                })
+                    .forEach((fewRates) => {
+                    fewRates.forEach((oneRate) => {
+                        unfilteredRates.push(oneRate);
+                    });
+                });
+                const filteredRates = unfilteredRates
+                    .filter((rate) => {
+                    return rate.getAveragePrice() > (selectedRate === null || selectedRate === void 0 ? void 0 : selectedRate.getAveragePrice()) && rate.name === selectedRate.name;
+                })
+                    .sort((a, b) => {
+                    if (a.getAveragePrice() === (selectedRate === null || selectedRate === void 0 ? void 0 : selectedRate.getAveragePrice()))
+                        return 1;
+                    if (b.getAveragePrice() === (selectedRate === null || selectedRate === void 0 ? void 0 : selectedRate.getAveragePrice()))
+                        return -1;
+                    return a.getAveragePrice() - b.getAveragePrice();
+                })
+                    .slice(0, 3);
+                setRates(filteredRates);
+                if (filteredRates.length === 0 && selectedRate) {
+                    // Proceed as if user clicked the nav.
+                    confirmRateOnClick();
+                }
+                else {
+                    setIsOpen(true);
+                }
+            });
+        }
+        return () => {
+            cancelled = true;
+        };
+    }, [row]);
+    const closeModal = () => {
+        setIsOpen(false);
+        setRow(null);
+    };
+    const confirmRateOnClick = (rate) => {
+        if (row) {
+            if (rate) {
+                DataLayer_1.default.instance.sendUpsellConfirmed(row.getRate(), rate);
+                row.setRate(rate);
+                basketContext.updateBasketRow(row);
+                closeModal();
+            }
+            else {
+                DataLayer_1.default.instance.sendUpsellCancelled(row.getRate());
+                closeModal();
+            }
+        }
+    };
+    return (RoomUpsellFeature_1.default.isActive() && (React.createElement(SimpleModal_1.default, { open: isOpen, onClose: closeModal, title: "Available Upgrades" },
+        React.createElement("div", { className: "upgrades-room-modal" },
+            React.createElement("div", { className: "current-room-block container" },
+                React.createElement("div", { className: "u-flex u-flex-flex-start row" },
+                    React.createElement("div", { className: "image-wrapper col-md-3 col-12" },
+                        React.createElement(ImageGallerySlider_1.default, { images: room === null || room === void 0 ? void 0 : room.getImages() })),
+                    React.createElement("div", { className: "u-flex info-block col-md-7 col-sm-9" },
+                        React.createElement("div", null,
+                            React.createElement(Text_1.default, { color: Color_1.Color.DarkGrey, bold: true }, t(Translation_1.Translation.Step.Room.CurrentSelectedRoom)),
+                            React.createElement(Headline_1.default, { bold: true }, room === null || room === void 0 ? void 0 : room.name),
+                            React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.DarkGrey }, selectedRate === null || selectedRate === void 0 ? void 0 : selectedRate.name)),
+                        React.createElement("div", null,
+                            React.createElement("div", { className: "room-details--content-price flex-row" },
+                                React.createElement(Headline_1.default, { bold: true },
+                                    React.createElement(Currency_1.default, { hideDecimals: true }, selectedRate === null || selectedRate === void 0 ? void 0 : selectedRate.getAveragePrice())),
+                                React.createElement(Text_1.default, { color: Color_1.Color.DarkGrey, inline: true },
+                                    "/",
+                                    t(Translation_1.Translation.Misc.Night))),
+                            React.createElement("div", { className: "u-marg-bottom" },
+                                React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Grey, inline: true, className: "u-nowrap" }, t(Translation_1.Translation.Step.Room.RoomInfo.IncludesTaxes))))),
+                    React.createElement("div", { className: "u-flex u-flex-align-center col-md-2 col-sm-3" },
+                        React.createElement(BEButton_1.default, { wide: true, filled: true, primary: true, onClick: confirmRateOnClick }, t(Translation_1.Translation.Step.Room.Confirm))))),
+            React.createElement("div", { className: "container", style: { backgroundColor: Color_1.Color.Snow } },
+                React.createElement("div", { className: "u-pad-top u-marg-bottom" },
+                    React.createElement("div", { className: "u-marg-bottom--heavy" },
+                        React.createElement(Headline_1.default, { bold: true }, t(Translation_1.Translation.Step.Room.CheckOutOtherOptions))),
+                    React.createElement("div", { className: "row no-gutters" }, rates === null || rates === void 0 ? void 0 : rates.map((rate) => {
+                        const onSelectRate = () => {
+                            confirmRateOnClick(rate);
+                        };
+                        return (React.createElement("div", { className: "col-md-6 col-xl-4 u-marg-bottom u-pad-left--light u-pad-right--light", key: rate.getRoom().name },
+                            React.createElement(LargeRoomCard_1.default, { selectedRate: selectedRate, rate: rate, onSelectRate: onSelectRate })));
+                    }))))))));
+};
+exports.default = AvailableUpgradesModal;
+//# sourceMappingURL=AvailableUpgradesModal.js.map

package/dist/src/components/steps/room/AvailableUpgradesModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvailableUpgradesModal.js","sourceRoot":"/","sources":["src/components/steps/room/AvailableUpgradesModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport { useEffect, useState, useContext } from 'react';\n\nimport { useTranslation } from 'react-i18next';\nimport API from '../../../api/BookingAPI';\nimport { BasketContext } from '@frontend/contexts';\nimport { AddToCartEvent } from '../../../events';\nimport { useCurrentHotel } from '@frontend/hooks';\nimport { useEvent } from '../../../hooks/EventHook';\nimport BasketRow from '../../../models/BasketRow';\n\nimport { RoomRate } from '../../../models/Room/RoomRate';\nimport RoomUpsellFeature from '../../../providers/feature/RoomUpsellFeature';\nimport { Translation } from '../../../translations/Translation';\nimport { Color } from '../../../util/Color';\nimport DataLayer from '../../../util/DataLayer';\nimport BEButton from '../../generic/BEButton';\nimport Currency from '../../generic/Currency';\nimport Headline from '../../generic/Headline';\nimport SimpleModal from '../../generic/modal/SimpleModal';\nimport Text, { TextType } from '../../generic/Text';\nimport ImageGallerySlider from './ImageGallerySlider';\nimport LargeRoomCard from './LargeRoomCard';\n\nconst AvailableUpgradesModal = () => {\n    const { t } = useTranslation();\n    const { hotel } = useCurrentHotel();\n    const [isOpen, setIsOpen] = useState(false);\n    const [row, setRow] = useState<BasketRow>(null);\n\n    const basketContext = useContext(BasketContext);\n\n    const { on } = useEvent();\n\n    const room = row?.getRoom();\n    const selectedRate = row?.getRate();\n\n    const [rates, setRates] = useState<RoomRate[]>();\n\n    useEffect(() => {\n        let cancelled = false;\n\n        on(AddToCartEvent, async (event: AddToCartEvent) => {\n            if (cancelled) return;\n\n            setRow(event.basketRow);\n\n            return true;\n        });\n\n        return () => {\n            cancelled = true;\n        };\n    }, []);\n\n    useEffect(() => {\n        let cancelled = false;\n\n        if (row) {\n            API.Availability.fetchAvailabilityData(row, hotel.hotelID).then((availableRooms) => {\n                if (cancelled) return;\n\n                const unfilteredRates: RoomRate[] = [];\n                availableRooms\n                    .map((availableRoom) => {\n                        return availableRoom.getRates();\n                    })\n                    .forEach((fewRates) => {\n                        fewRates.forEach((oneRate) => {\n                            unfilteredRates.push(oneRate);\n                        });\n                    });\n                const filteredRates = unfilteredRates\n                    .filter((rate) => {\n                        return rate.getAveragePrice() > selectedRate?.getAveragePrice() && rate.name === selectedRate.name;\n                    })\n                    .sort((a: RoomRate, b: RoomRate) => {\n                        if (a.getAveragePrice() === selectedRate?.getAveragePrice()) return 1;\n                        if (b.getAveragePrice() === selectedRate?.getAveragePrice()) return -1;\n                        return a.getAveragePrice() - b.getAveragePrice();\n                    })\n                    .slice(0, 3);\n\n                setRates(filteredRates);\n                if (filteredRates.length === 0 && selectedRate) {\n                    // Proceed as if user clicked the nav.\n                    confirmRateOnClick();\n                } else {\n                    setIsOpen(true);\n                }\n            });\n        }\n\n        return () => {\n            cancelled = true;\n        };\n    }, [row]);\n\n    const closeModal = () => {\n        setIsOpen(false);\n        setRow(null);\n    };\n\n    const confirmRateOnClick = (rate?: RoomRate) => {\n        if (row) {\n            if (rate) {\n                DataLayer.instance.sendUpsellConfirmed(row.getRate(), rate);\n\n                row.setRate(rate);\n                basketContext.updateBasketRow(row);\n                closeModal();\n            } else {\n                DataLayer.instance.sendUpsellCancelled(row.getRate());\n                closeModal();\n            }\n        }\n    };\n\n    return (\n        RoomUpsellFeature.isActive() && (\n            <SimpleModal open={isOpen} onClose={closeModal} title=\"Available Upgrades\">\n                <div className=\"upgrades-room-modal\">\n                    <div className=\"current-room-block container\">\n                        <div className=\"u-flex u-flex-flex-start row\">\n                            <div className=\"image-wrapper col-md-3 col-12\">\n                                <ImageGallerySlider images={room?.getImages()} />\n                            </div>\n                            <div className=\"u-flex info-block col-md-7 col-sm-9\">\n                                <div>\n                                    <Text color={Color.DarkGrey} bold={true}>\n                                        {t(Translation.Step.Room.CurrentSelectedRoom)}\n                                    </Text>\n                                    <Headline bold={true}>{room?.name}</Headline>\n                                    <Text type={TextType.Small} color={Color.DarkGrey}>\n                                        {selectedRate?.name}\n                                    </Text>\n                                </div>\n                                <div>\n                                    <div className=\"room-details--content-price flex-row\">\n                                        <Headline bold={true}>\n                                            <Currency hideDecimals={true}>{selectedRate?.getAveragePrice()}</Currency>\n                                        </Headline>\n                                        <Text color={Color.DarkGrey} inline={true}>\n                                            /{t(Translation.Misc.Night)}\n                                        </Text>\n                                    </div>\n                                    <div className=\"u-marg-bottom\">\n                                        <Text type={TextType.Small} color={Color.Grey} inline={true} className=\"u-nowrap\">\n                                            {t(Translation.Step.Room.RoomInfo.IncludesTaxes)}\n                                        </Text>\n                                    </div>\n                                </div>\n                            </div>\n                            <div className=\"u-flex u-flex-align-center col-md-2 col-sm-3\">\n                                <BEButton wide={true} filled={true} primary={true} onClick={confirmRateOnClick}>\n                                    {t(Translation.Step.Room.Confirm)}\n                                </BEButton>\n                            </div>\n                        </div>\n                    </div>\n                    <div className=\"container\" style={{ backgroundColor: Color.Snow }}>\n                        <div className=\"u-pad-top u-marg-bottom\">\n                            <div className=\"u-marg-bottom--heavy\">\n                                <Headline bold={true}>{t(Translation.Step.Room.CheckOutOtherOptions)}</Headline>\n                            </div>\n                            <div className=\"row no-gutters\">\n                                {rates?.map((rate) => {\n                                    const onSelectRate = () => {\n                                        confirmRateOnClick(rate);\n                                    };\n\n                                    return (\n                                        <div className=\"col-md-6 col-xl-4 u-marg-bottom u-pad-left--light u-pad-right--light\" key={rate.getRoom().name}>\n                                            <LargeRoomCard selectedRate={selectedRate} rate={rate} onSelectRate={onSelectRate} />\n                                        </div>\n                                    );\n                                })}\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </SimpleModal>\n        )\n    );\n};\n\nexport default AvailableUpgradesModal;\n"]}

package/dist/src/components/steps/room/ImageGallerySlider.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ImageSize } from '../../../providers/ImageProvider';
+interface ImageGallerySliderProps {
+    images: string[];
+    imageSize?: ImageSize;
+    hideLightboxIcon?: boolean;
+}
+export default function ImageGallerySlider(props: ImageGallerySliderProps): JSX.Element;
+export {};

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

@@ -0,0 +1,126 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const react_1 = require("react");
+const react_use_gesture_1 = require("react-use-gesture");
+const web_1 = require("@react-spring/web");
+const react_use_measure_1 = require("react-use-measure");
+const Icon_1 = require("../../generic/Icon");
+const Color_1 = require("../../../util/Color");
+const fslightbox_react_1 = require("fslightbox-react");
+const ScreenSize_1 = require("../../../util/ScreenSize");
+const ImageLoader_1 = require("../../generic/loader/ImageLoader");
+const react_dom_1 = require("react-dom");
+const contexts_1 = require("@frontend/contexts");
+function ImageGallerySlider(props) {
+    var _a;
+    const context = react_1.useContext(contexts_1.BookingEngineContext);
+    const [{ x }, set] = web_1.useSpring(() => ({ x: 0 }));
+    const [ref, bounds] = react_use_measure_1.default();
+    const [prevReleasePosition, setPrevRelPos] = react_1.useState(0);
+    const images = (_a = props.images) !== null && _a !== void 0 ? _a : [];
+    const [toggler, setToggler] = react_1.useState(false);
+    const [lastReleaseX, setLastReleaseX] = react_1.useState(0);
+    const [lastIndex, setLastIndex] = react_1.useState(0);
+    const [isDragging, setIsDragging] = react_1.useState(false);
+    let sliderVelocity = 0;
+    const handleDrag = ({ down, movement: [mx], velocity }) => {
+        if (context.screenSize <= ScreenSize_1.default.Medium) {
+            velocity = velocity * 0.5;
+            sliderVelocity = velocity > 2 ? 2 : velocity < 1 ? 1 : velocity;
+        }
+        else {
+            sliderVelocity = 1;
+        }
+        const cardWidth = bounds.width;
+        const maxX = images.length * cardWidth;
+        if (!down) {
+            const releasePosition = lastReleaseX + mx * sliderVelocity;
+            let restingLocation = 0;
+            let last = 0;
+            if (releasePosition > 0) {
+                restingLocation = 0;
+                last = 0;
+            }
+            else if (releasePosition < -(maxX - cardWidth)) {
+                restingLocation = -(maxX - cardWidth);
+                last = images.length - 1;
+            }
+            else {
+                const magic = -releasePosition / cardWidth;
+                if (releasePosition >= prevReleasePosition) {
+                    last = releasePosition % cardWidth > -cardWidth / 0.001 ? Math.floor(magic) : Math.ceil(magic);
+                    setPrevRelPos(releasePosition + (-releasePosition % cardWidth));
+                    restingLocation = -(last * cardWidth);
+                }
+                else {
+                    last = releasePosition % cardWidth > -cardWidth / 1000 ? Math.floor(magic) : Math.ceil(magic);
+                    setPrevRelPos(releasePosition - (cardWidth - (-releasePosition % cardWidth)));
+                    restingLocation = -(last * cardWidth);
+                }
+            }
+            let inPercent = 0;
+            if (restingLocation !== 0) {
+                inPercent = restingLocation / maxX;
+            }
+            setLastIndex(last);
+            set({ x: inPercent });
+            setLastReleaseX(restingLocation);
+            setTimeout(() => {
+                setIsDragging(false);
+            }, 50);
+        }
+        else {
+            let inPercent = 0;
+            const newReleasePx = lastReleaseX + mx;
+            inPercent = newReleasePx / maxX;
+            set({ x: inPercent });
+            if (mx) {
+                setIsDragging(true);
+            }
+        }
+    };
+    // Set the drag hook and define component movement based on gesture data
+    const bind = react_use_gesture_1.useDrag((event) => {
+        handleDrag(event);
+    });
+    const nextImage = () => {
+        handleDrag({ down: false, movement: [-bounds.width, 0], velocity: 1 });
+    };
+    const prevImage = () => {
+        handleDrag({ down: false, movement: [bounds.width, 0], velocity: 1 });
+    };
+    const onClickPrevImage = () => {
+        return prevImage();
+    };
+    const toggleToggler = () => {
+        return setToggler(!toggler);
+    };
+    const nextImageOnClick = () => {
+        return nextImage();
+    };
+    const toggleClickHandler = () => {
+        if (!isDragging) {
+            setToggler(!toggler);
+        }
+    };
+    return (React.createElement("div", { ref: ref, className: "room-gallery-slider" },
+        images.length > 1 && (React.createElement("div", { className: "room-gallery-slider__icon-left", onClick: onClickPrevImage },
+            React.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowLeft2, color: Color_1.Color.White, size: "24px" }))),
+        React.createElement(web_1.animated.div, Object.assign({ className: "room-gallery-slider__animation" }, bind(), { style: { left: x.to((perc) => `${perc * 100 * images.length}%`) }, onClick: toggleClickHandler }),
+            React.createElement("ul", { className: "room-gallery-slider__track", style: { width: `${images.length * 100}%` } }, images.map((image, index) => {
+                return (React.createElement("li", { key: index, className: "room-gallery-slider__item", style: {
+                        width: `${100 / images.length}%`,
+                        overflow: 'hidden',
+                    } },
+                    React.createElement(ImageLoader_1.default, { visible: lastIndex >= index, size: props.imageSize, draggable: false, src: image, style: { objectFit: 'cover', objectPosition: 'center', height: '100%', width: '100%' } })));
+            }))),
+        !!images.length && (React.createElement(React.Fragment, null,
+            !props.hideLightboxIcon && (React.createElement("div", { className: "room-gallery-slider__icon-lightbox", onClick: toggleToggler },
+                React.createElement(Icon_1.default, { icon: Icon_1.IconType.Fullscreen, color: Color_1.Color.White, size: "20px" }))),
+            react_dom_1.createPortal(React.createElement(fslightbox_react_1.default, { toggler: toggler, sources: images, type: "image", loadOnlyCurrentSource: true }), document.body))),
+        images.length > 1 && (React.createElement("div", { className: "room-gallery-slider__icon-right", onClick: nextImageOnClick },
+            React.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowRight2, color: Color_1.Color.White, size: "24px" })))));
+}
+exports.default = ImageGallerySlider;
+//# sourceMappingURL=ImageGallerySlider.js.map

package/dist/src/components/steps/room/ImageGallerySlider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageGallerySlider.js","sourceRoot":"/","sources":["src/components/steps/room/ImageGallerySlider.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useState, useContext } from 'react';\n\nimport { useDrag } from 'react-use-gesture';\nimport { useSpring, animated } from '@react-spring/web';\nimport useMeasure from 'react-use-measure';\nimport Icon, { IconType } from '../../generic/Icon';\nimport { Color } from '../../../util/Color';\nimport FsLightbox from 'fslightbox-react';\n\nimport ScreenSize from '../../../util/ScreenSize';\nimport { FullGestureState, StateKey } from 'react-use-gesture/dist/types';\nimport { ImageSize } from '../../../providers/ImageProvider';\nimport ImageLoader from '../../generic/loader/ImageLoader';\nimport { createPortal } from 'react-dom';\nimport { BookingEngineContext } from '@frontend/contexts';\n\ninterface ImageGallerySliderProps {\n    images: string[];\n\n    imageSize?: ImageSize;\n    hideLightboxIcon?: boolean;\n}\n\nexport default function ImageGallerySlider(props: ImageGallerySliderProps) {\n    const context = useContext(BookingEngineContext);\n\n    const [{ x }, set] = useSpring(() => ({ x: 0 }));\n    const [ref, bounds] = useMeasure();\n    const [prevReleasePosition, setPrevRelPos] = useState(0);\n    const images = props.images ?? [];\n\n    const [toggler, setToggler] = useState(false);\n    const [lastReleaseX, setLastReleaseX] = useState(0);\n    const [lastIndex, setLastIndex] = useState(0);\n\n    const [isDragging, setIsDragging] = useState(false);\n\n    let sliderVelocity = 0;\n\n    const handleDrag = ({ down, movement: [mx], velocity }: FullGestureState<StateKey<'drag'>>) => {\n        if (context.screenSize <= ScreenSize.Medium) {\n            velocity = velocity * 0.5;\n            sliderVelocity = velocity > 2 ? 2 : velocity < 1 ? 1 : velocity;\n        } else {\n            sliderVelocity = 1;\n        }\n\n        const cardWidth = bounds.width;\n        const maxX = images.length * cardWidth;\n\n        if (!down) {\n            const releasePosition = lastReleaseX + mx * sliderVelocity;\n\n            let restingLocation = 0;\n            let last = 0;\n\n            if (releasePosition > 0) {\n                restingLocation = 0;\n                last = 0;\n            } else if (releasePosition < -(maxX - cardWidth)) {\n                restingLocation = -(maxX - cardWidth);\n                last = images.length - 1;\n            } else {\n                const magic = -releasePosition / cardWidth;\n                if (releasePosition >= prevReleasePosition) {\n                    last = releasePosition % cardWidth > -cardWidth / 0.001 ? Math.floor(magic) : Math.ceil(magic);\n                    setPrevRelPos(releasePosition + (-releasePosition % cardWidth));\n                    restingLocation = -(last * cardWidth);\n                } else {\n                    last = releasePosition % cardWidth > -cardWidth / 1000 ? Math.floor(magic) : Math.ceil(magic);\n                    setPrevRelPos(releasePosition - (cardWidth - (-releasePosition % cardWidth)));\n                    restingLocation = -(last * cardWidth);\n                }\n            }\n\n            let inPercent = 0;\n            if (restingLocation !== 0) {\n                inPercent = restingLocation / maxX;\n            }\n\n            setLastIndex(last);\n            set({ x: inPercent });\n            setLastReleaseX(restingLocation);\n\n            setTimeout(() => {\n                setIsDragging(false);\n            }, 50);\n        } else {\n            let inPercent = 0;\n            const newReleasePx = lastReleaseX + mx;\n            inPercent = newReleasePx / maxX;\n\n            set({ x: inPercent });\n            if (mx) {\n                setIsDragging(true);\n            }\n        }\n    };\n\n    // Set the drag hook and define component movement based on gesture data\n    const bind = useDrag((event) => {\n        handleDrag(event);\n    });\n\n    const nextImage = () => {\n        handleDrag({ down: false, movement: [-bounds.width, 0], velocity: 1 } as any);\n    };\n\n    const prevImage = () => {\n        handleDrag({ down: false, movement: [bounds.width, 0], velocity: 1 } as any);\n    };\n\n    const onClickPrevImage = () => {\n        return prevImage();\n    };\n    const toggleToggler = () => {\n        return setToggler(!toggler);\n    };\n    const nextImageOnClick = () => {\n        return nextImage();\n    };\n    const toggleClickHandler = () => {\n        if (!isDragging) {\n            setToggler(!toggler);\n        }\n    };\n\n    return (\n        <div ref={ref} className=\"room-gallery-slider\">\n            {images.length > 1 && (\n                <div className=\"room-gallery-slider__icon-left\" onClick={onClickPrevImage}>\n                    <Icon icon={IconType.ArrowLeft2} color={Color.White} size=\"24px\" />\n                </div>\n            )}\n            <animated.div className=\"room-gallery-slider__animation\" {...bind()} style={{ left: x.to((perc) => `${perc * 100 * images.length}%`) }} onClick={toggleClickHandler}>\n                <ul className=\"room-gallery-slider__track\" style={{ width: `${images.length * 100}%` }}>\n                    {images.map((image: any, index: number) => {\n                        return (\n                            <li\n                                key={index}\n                                className=\"room-gallery-slider__item\"\n                                style={{\n                                    width: `${100 / images.length}%`,\n                                    overflow: 'hidden',\n                                }}\n                            >\n                                <ImageLoader\n                                    visible={lastIndex >= index}\n                                    size={props.imageSize}\n                                    draggable={false}\n                                    src={image}\n                                    style={{ objectFit: 'cover', objectPosition: 'center', height: '100%', width: '100%' }}\n                                />\n                            </li>\n                        );\n                    })}\n                </ul>\n            </animated.div>\n            {!!images.length && (\n                <>\n                    {!props.hideLightboxIcon && (\n                        <div className=\"room-gallery-slider__icon-lightbox\" onClick={toggleToggler}>\n                            <Icon icon={IconType.Fullscreen} color={Color.White} size=\"20px\" />\n                        </div>\n                    )}\n                    {createPortal(<FsLightbox toggler={toggler} sources={images} type=\"image\" loadOnlyCurrentSource={true} />, document.body)}\n                </>\n            )}\n            {images.length > 1 && (\n                <div className=\"room-gallery-slider__icon-right\" onClick={nextImageOnClick}>\n                    <Icon icon={IconType.ArrowRight2} color={Color.White} size=\"24px\" />\n                </div>\n            )}\n        </div>\n    );\n}\n"]}

package/dist/src/components/steps/room/InactivityWindow.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const InactivityWindow: () => JSX.Element;
+export default InactivityWindow;

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

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const react_1 = require("react");
+const react_i18next_1 = require("react-i18next");
+const react_router_1 = require("react-router");
+const BookingAPI_1 = require("../../../api/BookingAPI");
+const contexts_1 = require("@frontend/contexts");
+const contexts_2 = require("@frontend/contexts");
+const hooks_1 = require("@frontend/hooks");
+const StepAddon_1 = require("../../../pages/steps/StepAddon/StepAddon");
+const StepConfirmation_1 = require("../../../pages/steps/StepConfirmation/StepConfirmation");
+const StepRoom_1 = require("../../../pages/steps/StepRoom/StepRoom");
+const Translation_1 = require("../../../translations/Translation");
+const DataLayer_1 = require("../../../util/DataLayer");
+const ScreenSize_1 = require("../../../util/ScreenSize");
+const BEButton_1 = require("../../generic/BEButton");
+const Headline_1 = require("../../generic/Headline");
+const SimpleModal_1 = require("../../generic/modal/SimpleModal");
+const Text_1 = require("../../generic/Text");
+const InactivityWindow = () => {
+    const { t } = react_i18next_1.useTranslation();
+    const { currentStep } = react_1.useContext(contexts_2.FullPageEngineContext);
+    const { screenSize } = react_1.useContext(contexts_1.BookingEngineContext);
+    const basketContext = react_1.useContext(contexts_1.BasketContext);
+    const { hotel } = hooks_1.useCurrentHotel();
+    const history = react_router_1.useHistory();
+    const [isInactive, setInactive] = react_1.useState(false);
+    react_1.useEffect(() => {
+        let inactivityTimeout;
+        const resetTimeout = () => {
+            clearTimeout(inactivityTimeout);
+            if (!isInactive) {
+                inactivityTimeout = setTimeout(() => {
+                    setInactive(true);
+                }, 300000);
+            }
+        };
+        document.body.addEventListener('click', resetTimeout);
+        return () => {
+            document.body.addEventListener('click', resetTimeout);
+            clearTimeout(inactivityTimeout);
+        };
+    }, []);
+    react_1.useEffect(() => {
+        if (isInactive) {
+            DataLayer_1.default.instance.sendAwayWindowOpen();
+        }
+    }, [isInactive]);
+    const onClose = () => {
+        var _a;
+        setInactive(false);
+        switch (currentStep) {
+            case StepAddon_1.default:
+                history.push(StepRoom_1.default.getStepUrl());
+            case StepConfirmation_1.default:
+                history.push(StepRoom_1.default.getStepUrl());
+            case StepRoom_1.default:
+                if (basketContext.selectedBasketRow) {
+                    BookingAPI_1.default.Availability.invalidateAvailability(basketContext.selectedBasketRow, hotel.hotelID);
+                    (_a = basketContext.selectedBasketRow) === null || _a === void 0 ? void 0 : _a.setStale(true);
+                    basketContext.updateBasketRow(basketContext.selectedBasketRow);
+                }
+                break;
+        }
+    };
+    return (React.createElement(SimpleModal_1.default, { size: SimpleModal_1.SimpleModalSize.ExtraSmall, open: isInactive, onClose: onClose, alignCenter: true },
+        React.createElement("div", { className: "u-pad--heavy inactivity-window" },
+            React.createElement("div", { className: "u-marg-bottom--heavy" },
+                React.createElement(Headline_1.default, { bold: true }, t(Translation_1.Translation.Step.Room.YouHaveBeenAway))),
+            React.createElement("div", { className: "u-marg-bottom--heavy" },
+                React.createElement(Text_1.default, null, t(Translation_1.Translation.Step.Room.UpdateYourSearch))),
+            React.createElement("div", { className: "u-flex inactivity-buttons" },
+                React.createElement("div", { className: `u-marg-${screenSize > ScreenSize_1.default.Medium ? 'right' : 'bottom'}--light u-w-100` },
+                    React.createElement(BEButton_1.default, { onClick: onClose, wide: true }, t(Translation_1.Translation.Step.Room.NoThanks))),
+                React.createElement("div", { className: "u-w-100" },
+                    React.createElement(BEButton_1.default, { onClick: onClose, wide: true, filled: true, primary: true }, t(Translation_1.Translation.Step.Room.Update)))))));
+};
+exports.default = InactivityWindow;
+//# sourceMappingURL=InactivityWindow.js.map

package/dist/src/components/steps/room/InactivityWindow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InactivityWindow.js","sourceRoot":"/","sources":["src/components/steps/room/InactivityWindow.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useContext, useState, useEffect } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useHistory } from 'react-router';\nimport API from '../../../api/BookingAPI';\nimport { BasketContext, BookingEngineContext } from '@frontend/contexts';\nimport { FullPageEngineContext } from '@frontend/contexts';\n\nimport { useCurrentHotel } from '@frontend/hooks';\n\nimport StepAddon from '../../../pages/steps/StepAddon/StepAddon';\nimport StepConfirmation from '../../../pages/steps/StepConfirmation/StepConfirmation';\nimport StepRoom from '../../../pages/steps/StepRoom/StepRoom';\nimport { Translation } from '../../../translations/Translation';\nimport DataLayer from '../../../util/DataLayer';\nimport ScreenSize from '../../../util/ScreenSize';\nimport BEButton from '../../generic/BEButton';\nimport Headline from '../../generic/Headline';\nimport SimpleModal, { SimpleModalSize } from '../../generic/modal/SimpleModal';\nimport Text from '../../generic/Text';\n\nconst InactivityWindow = () => {\n    const { t } = useTranslation();\n\n    const { currentStep } = useContext(FullPageEngineContext);\n    const { screenSize } = useContext(BookingEngineContext);\n    const basketContext = useContext(BasketContext);\n    const { hotel } = useCurrentHotel();\n\n    const history = useHistory();\n\n    const [isInactive, setInactive] = useState(false);\n\n    useEffect(() => {\n        let inactivityTimeout: any;\n\n        const resetTimeout = () => {\n            clearTimeout(inactivityTimeout);\n\n            if (!isInactive) {\n                inactivityTimeout = setTimeout(() => {\n                    setInactive(true);\n                }, 300000);\n            }\n        };\n\n        document.body.addEventListener('click', resetTimeout);\n\n        return () => {\n            document.body.addEventListener('click', resetTimeout);\n\n            clearTimeout(inactivityTimeout);\n        };\n    }, []);\n\n    useEffect(() => {\n        if (isInactive) {\n            DataLayer.instance.sendAwayWindowOpen();\n        }\n    }, [isInactive]);\n\n    const onClose = () => {\n        setInactive(false);\n\n        switch (currentStep) {\n            case StepAddon:\n                history.push(StepRoom.getStepUrl());\n            case StepConfirmation:\n                history.push(StepRoom.getStepUrl());\n            case StepRoom:\n                if (basketContext.selectedBasketRow) {\n                    API.Availability.invalidateAvailability(basketContext.selectedBasketRow, hotel.hotelID);\n                    basketContext.selectedBasketRow?.setStale(true);\n                    basketContext.updateBasketRow(basketContext.selectedBasketRow);\n                }\n                break;\n        }\n    };\n\n    return (\n        <SimpleModal size={SimpleModalSize.ExtraSmall} open={isInactive} onClose={onClose} alignCenter={true}>\n            <div className=\"u-pad--heavy inactivity-window\">\n                <div className=\"u-marg-bottom--heavy\">\n                    <Headline bold={true}>{t(Translation.Step.Room.YouHaveBeenAway)}</Headline>\n                </div>\n                <div className=\"u-marg-bottom--heavy\">\n                    <Text>{t(Translation.Step.Room.UpdateYourSearch)}</Text>\n                </div>\n                <div className=\"u-flex inactivity-buttons\">\n                    <div className={`u-marg-${screenSize > ScreenSize.Medium ? 'right' : 'bottom'}--light u-w-100`}>\n                        <BEButton onClick={onClose} wide={true}>\n                            {t(Translation.Step.Room.NoThanks)}\n                        </BEButton>\n                    </div>\n                    <div className=\"u-w-100\">\n                        <BEButton onClick={onClose} wide={true} filled={true} primary={true}>\n                            {t(Translation.Step.Room.Update)}\n                        </BEButton>\n                    </div>\n                </div>\n            </div>\n        </SimpleModal>\n    );\n};\n\nexport default InactivityWindow;\n"]}

package/dist/src/components/steps/room/LargeRoomCard.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { RoomRate } from '../../../models/Room/RoomRate';
+interface Props {
+    rate: RoomRate;
+    selectedRate: RoomRate;
+    onSelectRate: () => void;
+}
+declare const LargeRoomCard: (props: Props) => JSX.Element;
+export default LargeRoomCard;

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

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const react_1 = require("react");
+const react_i18next_1 = require("react-i18next");
+const hooks_1 = require("@frontend/hooks");
+const Translation_1 = require("../../../translations/Translation");
+const Color_1 = require("../../../util/Color");
+const ScreenSize_1 = require("../../../util/ScreenSize");
+const BEButton_1 = require("../../generic/BEButton");
+const BETooltip_1 = require("../../generic/BETooltip");
+const Currency_1 = require("../../generic/Currency");
+const Headline_1 = require("../../generic/Headline");
+const Icon_1 = require("../../generic/Icon");
+const Text_1 = require("../../generic/Text");
+const ImageGallerySlider_1 = require("../room/ImageGallerySlider");
+const contexts_1 = require("@frontend/contexts");
+const LargeRoomCard = (props) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const beContext = react_1.useContext(contexts_1.BookingEngineContext);
+    const { hotel } = hooks_1.useCurrentHotel();
+    const { t } = react_i18next_1.useTranslation();
+    const perksFree = hotel.perks.slice(0, 4);
+    const extraRoomData = hotel.rooms[(_a = props.rate) === null || _a === void 0 ? void 0 : _a.getRoom().code];
+    const roomSize = (_b = hotel === null || hotel === void 0 ? void 0 : hotel.overwrites) === null || _b === void 0 ? void 0 : _b[(_c = props.rate) === null || _c === void 0 ? void 0 : _c.getRoom().code];
+    const trimmedDescription = (_d = props.rate) === null || _d === void 0 ? void 0 : _d.getRoom().getShortDescription();
+    const updateRate = () => {
+        props.onSelectRate();
+    };
+    const roomInfo = [
+        {
+            icon: Icon_1.IconType.People,
+            text: `Sleeps ${extraRoomData === null || extraRoomData === void 0 ? void 0 : extraRoomData.maxOccupancy}`,
+        },
+        {
+            icon: Icon_1.IconType.Bed,
+            text: `${extraRoomData === null || extraRoomData === void 0 ? void 0 : extraRoomData.bedType} ${extraRoomData === null || extraRoomData === void 0 ? void 0 : extraRoomData.bedQuantity}`,
+        },
+        {
+            icon: Icon_1.IconType.RoomSize,
+            text: roomSize === null || roomSize === void 0 ? void 0 : roomSize.RoomDimensions,
+        },
+    ];
+    return (React.createElement("div", { className: "large-room-card u-border-rounded" },
+        React.createElement("div", { className: "large-room-card --image" },
+            React.createElement(ImageGallerySlider_1.default, { images: (_e = props.rate) === null || _e === void 0 ? void 0 : _e.getRoom().getImages() })),
+        React.createElement("div", { className: "u-pad container" },
+            React.createElement(Text_1.default, { bold: true }, (_f = props.rate) === null || _f === void 0 ? void 0 : _f.getRoom().name),
+            React.createElement("div", { className: "u-flex u-marg-top-bottom" }, roomInfo.map((item, index) => {
+                return (React.createElement("div", { className: "u-flex", key: index },
+                    React.createElement(Icon_1.default, { icon: item.icon }),
+                    React.createElement(Text_1.default, { className: "u-marg-left--light", type: Text_1.TextType.Label }, item.text)));
+            })),
+            React.createElement("div", { className: "u-marg-bottom--light description" },
+                React.createElement(Text_1.default, { className: "text", type: Text_1.TextType.Small }, React.createElement("span", { dangerouslySetInnerHTML: { __html: trimmedDescription === null || trimmedDescription === void 0 ? void 0 : trimmedDescription.replace(/<br(\/|)>/g, '') } }))),
+            React.createElement(Text_1.default, { className: "u-marg-bottom", bold: true, type: Text_1.TextType.Label, color: Color_1.Color.Accent }, t(Translation_1.Translation.Step.Room.YouWillGetThisAllForFree)),
+            React.createElement("div", { className: "u-flex u-flex-align-center row justify-content-center" },
+                React.createElement("div", { className: "u-flex col-md-12 flex-wrap justify-content-start" }, perksFree === null || perksFree === void 0 ? void 0 : perksFree.map((perk) => {
+                    const isAllPerksOpened = beContext.screenSize < ScreenSize_1.default.ExtraLarge;
+                    return (React.createElement("div", { className: "u-flex justify-content-start u-flex-align-center u-marg-bottom u-w-48@l- u-pad-left--light u-pad-right--light", key: perk.name },
+                        React.createElement(BETooltip_1.default, { title: perk.name },
+                            React.createElement("div", null, perk.iconElement ? perk.iconElement : React.createElement(Icon_1.default, { icon: perk.icon, backgroundColor: Color_1.Color.Snow }))),
+                        React.createElement("div", { className: `u-marg-left u-marg-right ${isAllPerksOpened ? '' : 'u-none'}` },
+                            React.createElement(Text_1.default, { type: Text_1.TextType.Small }, perk.name))));
+                }))),
+            React.createElement("div", { className: "u-flex flex-column no-gutters" },
+                React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Navy, inline: true }, t(Translation_1.Translation.Misc.From)),
+                React.createElement("div", { className: "u-flex u-flex-flex-start u-flex-align-center flex-row" },
+                    React.createElement(Headline_1.default, { bold: true },
+                        React.createElement("span", { className: "u-flex align-items-center" },
+                            "+",
+                            React.createElement(Currency_1.default, { hideDecimals: true }, ((_g = props.rate) === null || _g === void 0 ? void 0 : _g.getAveragePrice()) - ((_h = props.selectedRate) === null || _h === void 0 ? void 0 : _h.getAveragePrice())))),
+                    React.createElement(Text_1.default, { color: Color_1.Color.DarkGrey, inline: true },
+                        "/",
+                        t(Translation_1.Translation.Misc.Night))),
+                React.createElement("div", { className: "u-marg-bottom" },
+                    React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Grey, inline: true, className: "u-nowrap" }, t(Translation_1.Translation.Step.Room.ExcludingTaxes))),
+                React.createElement("div", { className: "u-marg-top--light u-flex justify-content-end u-w-100@m-" },
+                    React.createElement(BEButton_1.default, { onClick: updateRate, name: "ViewRatesNowButton", primary: true, filled: true, wide: true }, t(Translation_1.Translation.Step.Room.Upgrade)))))));
+};
+exports.default = LargeRoomCard;
+//# sourceMappingURL=LargeRoomCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LargeRoomCard.js","sourceRoot":"/","sources":["src/components/steps/room/LargeRoomCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useContext } from 'react';\n\nimport { useTranslation } from 'react-i18next';\nimport { useCurrentHotel } from '@frontend/hooks';\nimport { RoomRate } from '../../../models/Room/RoomRate';\nimport { Translation } from '../../../translations/Translation';\nimport { Color } from '../../../util/Color';\nimport ScreenSize from '../../../util/ScreenSize';\nimport BEButton from '../../generic/BEButton';\nimport BETooltip from '../../generic/BETooltip';\nimport Currency from '../../generic/Currency';\nimport Headline from '../../generic/Headline';\nimport Icon, { IconType } from '../../generic/Icon';\nimport Text, { TextType } from '../../generic/Text';\nimport ImageGallerySlider from '../room/ImageGallerySlider';\nimport { BookingEngineContext } from '@frontend/contexts';\n\ninterface Props {\n    rate: RoomRate;\n    selectedRate: RoomRate;\n\n    onSelectRate: () => void;\n}\n\nconst LargeRoomCard = (props: Props) => {\n    const beContext = useContext(BookingEngineContext);\n    const { hotel } = useCurrentHotel();\n\n    const { t } = useTranslation();\n\n    const perksFree = hotel.perks.slice(0, 4);\n\n    const extraRoomData = hotel.rooms[props.rate?.getRoom().code];\n    const roomSize = hotel?.overwrites?.[props.rate?.getRoom().code];\n    const trimmedDescription = props.rate?.getRoom().getShortDescription();\n\n    const updateRate = () => {\n        props.onSelectRate();\n    };\n\n    const roomInfo = [\n        {\n            icon: IconType.People,\n            text: `Sleeps ${extraRoomData?.maxOccupancy}`,\n        },\n        {\n            icon: IconType.Bed,\n            text: `${extraRoomData?.bedType} ${extraRoomData?.bedQuantity}`,\n        },\n        {\n            icon: IconType.RoomSize,\n            text: roomSize?.RoomDimensions,\n        },\n    ];\n\n    return (\n        <div className=\"large-room-card u-border-rounded\">\n            <div className=\"large-room-card --image\">\n                <ImageGallerySlider images={props.rate?.getRoom().getImages()} />\n            </div>\n            <div className=\"u-pad container\">\n                <Text bold={true}>{props.rate?.getRoom().name}</Text>\n                <div className=\"u-flex u-marg-top-bottom\">\n                    {roomInfo.map((item, index) => {\n                        return (\n                            <div className=\"u-flex\" key={index}>\n                                <Icon icon={item.icon} />\n                                <Text className=\"u-marg-left--light\" type={TextType.Label}>\n                                    {item.text}\n                                </Text>\n                            </div>\n                        );\n                    })}\n                </div>\n                <div className=\"u-marg-bottom--light description\">\n                    <Text className=\"text\" type={TextType.Small}>\n                        {<span dangerouslySetInnerHTML={{ __html: trimmedDescription?.replace(/<br(\\/|)>/g, '') }} />}\n                    </Text>\n                </div>\n                <Text className=\"u-marg-bottom\" bold={true} type={TextType.Label} color={Color.Accent}>\n                    {t(Translation.Step.Room.YouWillGetThisAllForFree)}\n                </Text>\n                <div className=\"u-flex u-flex-align-center row justify-content-center\">\n                    <div className=\"u-flex col-md-12 flex-wrap justify-content-start\">\n                        {perksFree?.map((perk) => {\n                            const isAllPerksOpened = beContext.screenSize < ScreenSize.ExtraLarge;\n\n                            return (\n                                <div className=\"u-flex justify-content-start u-flex-align-center u-marg-bottom u-w-48@l- u-pad-left--light u-pad-right--light\" key={perk.name}>\n                                    <BETooltip title={perk.name}>\n                                        <div>{perk.iconElement ? perk.iconElement : <Icon icon={perk.icon} backgroundColor={Color.Snow} />}</div>\n                                    </BETooltip>\n                                    <div className={`u-marg-left u-marg-right ${isAllPerksOpened ? '' : 'u-none'}`}>\n                                        <Text type={TextType.Small}>{perk.name}</Text>\n                                    </div>\n                                </div>\n                            );\n                        })}\n                    </div>\n                </div>\n                <div className=\"u-flex flex-column no-gutters\">\n                    <Text type={TextType.Small} color={Color.Navy} inline={true}>\n                        {t(Translation.Misc.From)}\n                    </Text>\n                    <div className=\"u-flex u-flex-flex-start u-flex-align-center flex-row\">\n                        <Headline bold={true}>\n                            <span className=\"u-flex align-items-center\">\n                                +<Currency hideDecimals={true}>{props.rate?.getAveragePrice() - props.selectedRate?.getAveragePrice()}</Currency>\n                            </span>\n                        </Headline>\n                        <Text color={Color.DarkGrey} inline={true}>\n                            /{t(Translation.Misc.Night)}\n                        </Text>\n                    </div>\n                    <div className=\"u-marg-bottom\">\n                        <Text type={TextType.Small} color={Color.Grey} inline={true} className=\"u-nowrap\">\n                            {t(Translation.Step.Room.ExcludingTaxes)}\n                        </Text>\n                    </div>\n                    <div className=\"u-marg-top--light u-flex justify-content-end u-w-100@m-\">\n                        <BEButton onClick={updateRate} name=\"ViewRatesNowButton\" primary={true} filled={true} wide={true}>\n                            {t(Translation.Step.Room.Upgrade)}\n                        </BEButton>\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default LargeRoomCard;\n"]}

package/dist/src/components/steps/room/MemberSignInModal/MemberSignInModal.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface MemberSignInModalProps {
+    onClose?: () => void;
+    isOpen?: boolean;
+}
+export default function MemberSignInModal(props: MemberSignInModalProps): JSX.Element;
+export {};