npm - @roomstay/frontend - Versions diffs - 2.1.5 → 2.1.7 - Mend

@roomstay/frontend 2.1.5 → 2.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (874) hide show

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

@@ -26,8 +26,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
-const react_1 = require("react");
+const react_1 = __importDefault(require("react"));
+const react_2 = require("react");
 const react_use_gesture_1 = require("react-use-gesture");
 const web_1 = require("@react-spring/web");
 const react_use_measure_1 = __importDefault(require("react-use-measure"));
@@ -40,15 +40,15 @@ const react_dom_1 = require("react-dom");
 const contexts_1 = require("../../../contexts/index.js");
 function ImageGallerySlider(props) {
     var _a;
-    const context = (0, react_1.useContext)(contexts_1.BookingEngineContext);
+    const context = (0, react_2.useContext)(contexts_1.BookingEngineContext);
     const [{ x }, set] = (0, web_1.useSpring)(() => ({ x: 0 }));
     const [ref, bounds] = (0, react_use_measure_1.default)();
-    const [prevReleasePosition, setPrevRelPos] = (0, react_1.useState)(0);
+    const [prevReleasePosition, setPrevRelPos] = (0, react_2.useState)(0);
     const images = (_a = props.images) !== null && _a !== void 0 ? _a : [];
-    const [toggler, setToggler] = (0, react_1.useState)(false);
-    const [lastReleaseX, setLastReleaseX] = (0, react_1.useState)(0);
-    const [lastIndex, setLastIndex] = (0, react_1.useState)(0);
-    const [isDragging, setIsDragging] = (0, react_1.useState)(false);
+    const [toggler, setToggler] = (0, react_2.useState)(false);
+    const [lastReleaseX, setLastReleaseX] = (0, react_2.useState)(0);
+    const [lastIndex, setLastIndex] = (0, react_2.useState)(0);
+    const [isDragging, setIsDragging] = (0, react_2.useState)(false);
     let sliderVelocity = 0;
     const handleDrag = ({ down, movement: [mx], velocity }) => {
         if (context.screenSize <= ScreenSize_1.default.Medium) {
@@ -130,23 +130,23 @@ function ImageGallerySlider(props) {
             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: {
+    return (react_1.default.createElement("div", { ref: ref, className: "room-gallery-slider" },
+        images.length > 1 && (react_1.default.createElement("div", { className: "room-gallery-slider__icon-left", onClick: onClickPrevImage },
+            react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowLeft2, color: Color_1.Color.White, size: "24px" }))),
+        react_1.default.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_1.default.createElement("ul", { className: "room-gallery-slider__track", style: { width: `${images.length * 100}%` } }, images.map((image, index) => {
+                return (react_1.default.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%' } })));
+                    react_1.default.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" }))),
-            (0, 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" })))));
+        !!images.length && (react_1.default.createElement(react_1.default.Fragment, null,
+            !props.hideLightboxIcon && (react_1.default.createElement("div", { className: "room-gallery-slider__icon-lightbox", onClick: toggleToggler },
+                react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Fullscreen, color: Color_1.Color.White, size: "20px" }))),
+            (0, react_dom_1.createPortal)(react_1.default.createElement(fslightbox_react_1.default, { toggler: toggler, sources: images, type: "image", loadOnlyCurrentSource: true }), document.body))),
+        images.length > 1 && (react_1.default.createElement("div", { className: "room-gallery-slider__icon-right", onClick: nextImageOnClick },
+            react_1.default.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 CHANGED Viewed

	@@ -1 +1 @@
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 '@/components/generic/Icon/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 '@/components/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"]}
1	+ {"version":3,"file":"ImageGallerySlider.js","sourceRoot":"/","sources":["src/components/steps/room/ImageGallerySlider.tsx"],"names":[],"mappings":"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","sourcesContent":["import 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 '@/components/generic/Icon/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 '@/components/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 />, 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.js CHANGED Viewed

@@ -26,8 +26,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
-const react_1 = require("react");
+const react_1 = __importDefault(require("react"));
+const react_2 = require("react");
 const react_i18next_1 = require("react-i18next");
 const react_router_dom_1 = require("react-router-dom");
 const BookingAPI_1 = __importDefault(require("../../../api/BookingAPI"));
@@ -46,13 +46,13 @@ const SimpleModal_1 = __importStar(require("../../generic/modal/SimpleModal"));
 const Text_1 = __importDefault(require("../../generic/Text"));
 const InactivityWindow = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const { currentStep } = (0, react_1.useContext)(contexts_2.FullPageEngineContext);
-    const { screenSize } = (0, react_1.useContext)(contexts_1.BookingEngineContext);
-    const basketContext = (0, react_1.useContext)(contexts_1.BasketContext);
+    const { currentStep } = (0, react_2.useContext)(contexts_2.FullPageEngineContext);
+    const { screenSize } = (0, react_2.useContext)(contexts_1.BookingEngineContext);
+    const basketContext = (0, react_2.useContext)(contexts_1.BasketContext);
     const { hotel } = (0, hooks_1.useCurrentHotel)();
     const history = (0, react_router_dom_1.useHistory)();
-    const [isInactive, setInactive] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
+    const [isInactive, setInactive] = (0, react_2.useState)(false);
+    (0, react_2.useEffect)(() => {
         let inactivityTimeout;
         const resetTimeout = () => {
             clearTimeout(inactivityTimeout);
@@ -73,7 +73,7 @@ const InactivityWindow = () => {
             clearTimeout(inactivityTimeout);
         };
     }, []);
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         if (isInactive) {
             DataLayer_1.default.instance.sendAwayWindowOpen();
         }
@@ -93,22 +93,22 @@ const InactivityWindow = () => {
                 break;
         }
         if (basketContext.selectedBasketRow) {
-            BookingAPI_1.default.Availability.invalidateAvailability(basketContext.selectedBasketRow, hotel.hotelID);
+            BookingAPI_1.default.Availability.invalidateAvailability(basketContext.selectedBasketRow, hotel === null || hotel === void 0 ? void 0 : hotel.hotelID);
             (_a = basketContext.selectedBasketRow) === null || _a === void 0 ? void 0 : _a.setStale(true);
             basketContext.updateBasketRow(basketContext.selectedBasketRow);
         }
     };
-    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: onReset, wide: true, filled: true, primary: true }, t(Translation_1.Translation.Step.Room.Update)))))));
+    return (react_1.default.createElement(SimpleModal_1.default, { size: SimpleModal_1.SimpleModalSize.ExtraSmall, open: isInactive, onClose: onClose, alignCenter: true },
+        react_1.default.createElement("div", { className: "u-pad--heavy inactivity-window" },
+            react_1.default.createElement("div", { className: "u-marg-bottom--heavy" },
+                react_1.default.createElement(Headline_1.default, { bold: true }, t(Translation_1.Translation.Step.Room.YouHaveBeenAway))),
+            react_1.default.createElement("div", { className: "u-marg-bottom--heavy" },
+                react_1.default.createElement(Text_1.default, null, t(Translation_1.Translation.Step.Room.UpdateYourSearch))),
+            react_1.default.createElement("div", { className: "u-flex inactivity-buttons" },
+                react_1.default.createElement("div", { className: `u-marg-${screenSize > ScreenSize_1.default.Medium ? 'right' : 'bottom'}--light u-w-100` },
+                    react_1.default.createElement(BEButton_1.default, { onClick: onClose, wide: true }, t(Translation_1.Translation.Step.Room.NoThanks))),
+                react_1.default.createElement("div", { className: "u-w-100" },
+                    react_1.default.createElement(BEButton_1.default, { onClick: onReset, 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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InactivityWindow.js","sourceRoot":"/","sources":["src/components/steps/room/InactivityWindow.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,~~6CAA+B~~;~~AAC/B~~,iCAAwD;AACxD,iDAA+C;AAC/C,uDAA8C;AAC9C,kEAAmC;AACnC,iDAAyE;AACzE,iDAA2D;AAE3D,2CAAkD;AAElD,kFAA0D;AAC1D,uGAA+E;AAC/E,+EAAuD;AACvD,0DAAuD;AACvD,iEAAyC;AACzC,mEAA2C;AAC3C,6EAAqD;AACrD,6EAAqD;AACrD,sFAAsF;AACtF,qEAA6C;AAE7C,MAAM,gBAAgB,GAAG,GAAG,EAAE;IAC1B,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAE/B,MAAM,EAAE,WAAW,EAAE,GAAG,IAAA,kBAAU,EAAC,gCAAqB,CAAC,CAAC;IAC1D,MAAM,EAAE,UAAU,EAAE,GAAG,IAAA,kBAAU,EAAC,+BAAoB,CAAC,CAAC;IACxD,MAAM,aAAa,GAAG,IAAA,kBAAU,EAAC,wBAAa,CAAC,CAAC;IAChD,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,uBAAe,GAAE,CAAC;IAEpC,MAAM,OAAO,GAAG,IAAA,6BAAU,GAAE,CAAC;IAE7B,MAAM,CAAC,UAAU,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAElD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAI,iBAAsB,CAAC;QAE3B,MAAM,YAAY,GAAG,GAAG,EAAE;YACtB,YAAY,CAAC,iBAAiB,CAAC,CAAC;YAEhC,IAAI,CAAC,UAAU,EAAE;gBACb,iBAAiB,GAAG,UAAU,CAAC,GAAG,EAAE;oBAChC,WAAW,CAAC,IAAI,CAAC,CAAC;gBACtB,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,YAAY;aAC3B;QACL,CAAC,CAAC;QAEF,YAAY,EAAE,CAAC;QAEf,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;QACtD,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;QAC1D,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;QAEzD,OAAO,GAAG,EAAE;YACR,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;YACzD,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;YAC7D,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;YAE5D,YAAY,CAAC,iBAAiB,CAAC,CAAC;QACpC,CAAC,CAAC;IACN,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAI,UAAU,EAAE;YACZ,mBAAS,CAAC,QAAQ,CAAC,kBAAkB,EAAE,CAAC;SAC3C;IACL,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,OAAO,GAAG,GAAG,EAAE;QACjB,WAAW,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,GAAG,EAAE;;QACjB,WAAW,CAAC,KAAK,CAAC,CAAC;QAEnB,QAAQ,WAAW,EAAE;YACjB,KAAK,mBAAS;gBACV,OAAO,CAAC,IAAI,CAAC,kBAAQ,CAAC,UAAU,EAAE,CAAC,CAAC;gBACpC,MAAM;YACV,KAAK,0BAAgB;gBACjB,OAAO,CAAC,IAAI,CAAC,kBAAQ,CAAC,UAAU,EAAE,CAAC,CAAC;gBACpC,MAAM;SACb;QAED,IAAI,aAAa,CAAC,iBAAiB,EAAE;YACjC,oBAAG,CAAC,YAAY,CAAC,sBAAsB,CAAC,aAAa,CAAC,iBAAiB,EAAE,KAAK,~~CAAC~~,~~OAAO~~,CAAC,CAAC;~~YACxF~~,MAAA,aAAa,CAAC,iBAAiB,0CAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;YAChD,aAAa,CAAC,eAAe,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;SAClE;IACL,CAAC,CAAC;IAEF,OAAO,CACH,~~oBAAC~~,qBAAW,IAAC,IAAI,EAAE,6BAAe,CAAC,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW~~,EAAE,IAAI~~;~~QAChG~~,~~6BAAK~~,SAAS,EAAC,gCAAgC;YAC3C,~~6BAAK~~,SAAS,EAAC,sBAAsB;gBACjC,~~oBAAC~~,kBAAQ,IAAC,IAAI,~~EAAE~~,~~IAAI,IAAG,~~CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAY,~~CACzE~~;YACN,~~6BAAK~~,SAAS,EAAC,sBAAsB;gBACjC,~~oBAAC~~,cAAI,QAAE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAQ,CACtD;YACN,~~6BAAK~~,SAAS,EAAC,2BAA2B;gBACtC,~~6BAAK~~,SAAS,EAAE,UAAU,UAAU,GAAG,oBAAU,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,iBAAiB;oBAC1F,~~oBAAC~~,kBAAQ,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,~~EAAE~~,~~IAAI,IACjC,~~CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAC3B,CACT;gBACN,~~6BAAK~~,SAAS,EAAC,SAAS;oBACpB,~~oBAAC~~,kBAAQ,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,~~EAAE~~,~~IAAI,EAAE,~~MAAM,~~EAAE~~,~~IAAI,EAAE,~~OAAO,~~EAAE~~,~~IAAI,IAC9D,~~CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CACzB,CACT,CACJ,CACJ,CACI,CACjB,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,gBAAgB,CAAC","sourcesContent":["import * as React from 'react';\nimport { useContext, useState, useEffect } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useHistory } from 'react-router-dom';\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 '@/components/generic/BEButton';\nimport Headline from '@/components/generic/Headline';\nimport SimpleModal, { SimpleModalSize } from '@/components/generic/modal/SimpleModal';\nimport Text from '@/components/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); // 5 minutes\n }\n };\n\n resetTimeout();\n\n document.body.addEventListener('click', resetTimeout);\n document.body.addEventListener('mouseover', resetTimeout);\n document.body.addEventListener('keypress', resetTimeout);\n\n return () => {\n document.body.removeEventListener('click', resetTimeout);\n document.body.removeEventListener('mouseover', resetTimeout);\n document.body.removeEventListener('keypress', 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\n const onReset = () => {\n setInactive(false);\n\n switch (currentStep) {\n case StepAddon:\n history.push(StepRoom.getStepUrl());\n break;\n case StepConfirmation:\n history.push(StepRoom.getStepUrl());\n break;\n }\n\n if (basketContext.selectedBasketRow) {\n API.Availability.invalidateAvailability(basketContext.selectedBasketRow, hotel.hotelID);\n basketContext.selectedBasketRow?.setStale(true);\n basketContext.updateBasketRow(basketContext.selectedBasketRow);\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={onReset} 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"]}
1	+ {"version":3,"file":"InactivityWindow.js","sourceRoot":"/","sources":["src/components/steps/room/InactivityWindow.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { useContext, useState, useEffect } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useHistory } from 'react-router-dom';\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 '@/components/generic/BEButton';\nimport Headline from '@/components/generic/Headline';\nimport SimpleModal, { SimpleModalSize } from '@/components/generic/modal/SimpleModal';\nimport Text from '@/components/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); // 5 minutes\n }\n };\n\n resetTimeout();\n\n document.body.addEventListener('click', resetTimeout);\n document.body.addEventListener('mouseover', resetTimeout);\n document.body.addEventListener('keypress', resetTimeout);\n\n return () => {\n document.body.removeEventListener('click', resetTimeout);\n document.body.removeEventListener('mouseover', resetTimeout);\n document.body.removeEventListener('keypress', 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\n const onReset = () => {\n setInactive(false);\n\n switch (currentStep) {\n case StepAddon:\n history.push(StepRoom.getStepUrl());\n break;\n case StepConfirmation:\n history.push(StepRoom.getStepUrl());\n break;\n }\n\n if (basketContext.selectedBasketRow) {\n API.Availability.invalidateAvailability(basketContext.selectedBasketRow, hotel?.hotelID as string);\n basketContext.selectedBasketRow?.setStale(true);\n basketContext.updateBasketRow(basketContext.selectedBasketRow);\n }\n };\n\n return (\n <SimpleModal size={SimpleModalSize.ExtraSmall} open={isInactive} onClose={onClose} alignCenter>\n <div className=\"u-pad--heavy inactivity-window\">\n <div className=\"u-marg-bottom--heavy\">\n <Headline bold>{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>\n {t(Translation.Step.Room.NoThanks)}\n </BEButton>\n </div>\n <div className=\"u-w-100\">\n <BEButton onClick={onReset} wide filled primary>\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.js CHANGED Viewed

@@ -26,8 +26,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
-const react_1 = require("react");
+const react_1 = __importDefault(require("react"));
+const react_2 = require("react");
 const react_i18next_1 = require("react-i18next");
 const hooks_1 = require("../../../hooks/index.js");
 const Translation_1 = require("translations/Translation");
@@ -43,11 +43,11 @@ const ImageGallerySlider_1 = __importDefault(require("./ImageGallerySlider"));
 const contexts_1 = require("../../../contexts/index.js");
 const LargeRoomCard = (props) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    const beContext = (0, react_1.useContext)(contexts_1.BookingEngineContext);
+    const beContext = (0, react_2.useContext)(contexts_1.BookingEngineContext);
     const { hotel } = (0, hooks_1.useCurrentHotel)();
     const { t } = (0, 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 perksFree = hotel === null || hotel === void 0 ? void 0 : hotel.perks.slice(0, 4);
+    const extraRoomData = hotel === null || hotel === void 0 ? void 0 : 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 = () => {
@@ -67,42 +67,43 @@ const LargeRoomCard = (props) => {
             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)));
+    return (react_1.default.createElement("div", { className: "large-room-card u-border-rounded" },
+        react_1.default.createElement("div", { className: "large-room-card --image" },
+            react_1.default.createElement(ImageGallerySlider_1.default, { images: (_e = props.rate) === null || _e === void 0 ? void 0 : _e.getRoom().getImages() })),
+        react_1.default.createElement("div", { className: "u-pad container" },
+            react_1.default.createElement(Text_1.default, { bold: true }, (_f = props.rate) === null || _f === void 0 ? void 0 : _f.getRoom().name),
+            react_1.default.createElement("div", { className: "u-flex u-marg-top-bottom" }, roomInfo.map((item, index) => {
+                return (react_1.default.createElement("div", { className: "u-flex", key: index },
+                    react_1.default.createElement(Icon_1.default, { icon: item.icon }),
+                    react_1.default.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) => {
+            react_1.default.createElement("div", { className: "u-marg-bottom--light description" },
+                react_1.default.createElement(Text_1.default, { className: "text", type: Text_1.TextType.Small },
+                    react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: (trimmedDescription === null || trimmedDescription === void 0 ? void 0 : trimmedDescription.replace(/<br(\/|)>/g, '')) || '' } }))),
+            react_1.default.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_1.default.createElement("div", { className: "u-flex u-flex-align-center row justify-content-center" },
+                react_1.default.createElement("div", { className: "u-flex col-md-12 flex-wrap justify-content-start" }, 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(Tooltip_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))));
+                    return (react_1.default.createElement("div", { className: "u-flex justify-content-start u-flex-align-center u-marg-bottom u-w-48@l- u-pad-left--light u-pad-right--light", key: perk.name },
+                        react_1.default.createElement(Tooltip_1.default, { title: perk.name },
+                            react_1.default.createElement("div", null, perk.iconElement ? perk.iconElement : react_1.default.createElement(Icon_1.default, { icon: perk.icon, backgroundColor: Color_1.Color.Snow }))),
+                        react_1.default.createElement("div", { className: `u-marg-left u-marg-right ${isAllPerksOpened ? '' : 'u-none'}` },
+                            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small }, perk.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_1.default.createElement("div", { className: "u-flex flex-column no-gutters" },
+                react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Navy, inline: true }, t(Translation_1.Translation.Misc.From)),
+                react_1.default.createElement("div", { className: "u-flex u-flex-flex-start u-flex-align-center flex-row" },
+                    react_1.default.createElement(Headline_1.default, { bold: true },
+                        react_1.default.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 },
+                            react_1.default.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_1.default.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)))))));
+                react_1.default.createElement("div", { className: "u-marg-bottom" },
+                    react_1.default.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_1.default.createElement("div", { className: "u-marg-top--light u-flex justify-content-end u-w-100@m-" },
+                    react_1.default.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 CHANGED Viewed

	@@ -1 +1 @@
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 '@/components/generic/BEButton';\nimport Tooltip from '@/components/generic/Tooltip/Tooltip';\nimport Currency from '@/components/generic/Currency';\nimport Headline from '@/components/generic/Headline';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport Text, { TextType } from '@/components/generic/Text';\nimport ImageGallerySlider from '@/components/steps/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 <Tooltip title={perk.name}>\n <div>{perk.iconElement ? perk.iconElement : <Icon icon={perk.icon} backgroundColor={Color.Snow} />}</div>\n </Tooltip>\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"]}
1	+ {"version":3,"file":"LargeRoomCard.js","sourceRoot":"/","sources":["src/components/steps/room/LargeRoomCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import 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 '@/components/generic/BEButton';\nimport Tooltip from '@/components/generic/Tooltip/Tooltip';\nimport Currency from '@/components/generic/Currency';\nimport Headline from '@/components/generic/Headline';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport Text, { TextType } from '@/components/generic/Text';\nimport ImageGallerySlider from '@/components/steps/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 as string];\n const roomSize = hotel?.overwrites?.[props.rate?.getRoom().code as string];\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>{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 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 <Tooltip title={perk.name}>\n <div>{perk.iconElement ? perk.iconElement : <Icon icon={perk.icon as IconType} backgroundColor={Color.Snow} />}</div>\n </Tooltip>\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>\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>\n <span className=\"u-flex align-items-center\">\n +<Currency hideDecimals>{props.rate?.getAveragePrice() - props.selectedRate?.getAveragePrice()}</Currency>\n </span>\n </Headline>\n <Text color={Color.DarkGrey} inline>\n /{t(Translation.Misc.Night)}\n </Text>\n </div>\n <div className=\"u-marg-bottom\">\n <Text type={TextType.Small} color={Color.Grey} inline className=\"u-nowrap\">\n {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 filled wide>\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.js CHANGED Viewed

@@ -52,8 +52,8 @@ const Color_1 = require("../../../../util/Color");
 const Headline_1 = __importDefault(require("../../../generic/Headline"));
 const Text_1 = __importStar(require("../../../generic/Text"));
 const BEButton_1 = __importDefault(require("../../../generic/BEButton"));
-const React = __importStar(require("react"));
-const react_1 = require("react");
+const react_1 = __importDefault(require("react"));
+const react_2 = require("react");
 const TextBox_1 = __importDefault(require("../../../generic/TextBox"));
 const react_hook_form_1 = require("react-hook-form");
 const BookingAPI_1 = __importDefault(require("../../../../api/BookingAPI"));
@@ -109,24 +109,23 @@ const MemberOnlyModalDefaultInputs = {
 function MemberSignInModal(props) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     const { t } = (0, react_i18next_1.useTranslation)();
-    const context = (0, react_1.useContext)(contexts_1.BookingEngineContext);
-    const basketContext = (0, react_1.useContext)(contexts_1.BasketContext);
-    const ccx = (0, react_1.useContext)(contexts_2.CompanyContext);
+    const context = (0, react_2.useContext)(contexts_1.BookingEngineContext);
+    const basketContext = (0, react_2.useContext)(contexts_1.BasketContext);
+    const ccx = (0, react_2.useContext)(contexts_2.CompanyContext);
     const { hotel } = (0, hooks_1.useCurrentHotel)();
-    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
-    const [showErrors, setShowErrors] = (0, react_1.useState)(false);
-    const [captchaScriptLoaded, setCaptchaScriptLoaded] = (0, react_1.useState)(false);
-    const [captchaRendered, setCaptchaRendered] = (0, react_1.useState)(false);
-    const [reCaptchaSecret, setReCaptchaSecret] = (0, react_1.useState)();
-    const [captchaError, setCaptchaError] = (0, react_1.useState)();
-    const captchaRef = (0, react_1.useRef)(null);
+    const [isLoading, setIsLoading] = (0, react_2.useState)(false);
+    const [showErrors, setShowErrors] = (0, react_2.useState)(false);
+    const [captchaScriptLoaded, setCaptchaScriptLoaded] = (0, react_2.useState)(false);
+    const [captchaRendered, setCaptchaRendered] = (0, react_2.useState)(false);
+    const [reCaptchaSecret, setReCaptchaSecret] = (0, react_2.useState)(null);
+    const [captchaError, setCaptchaError] = (0, react_2.useState)(null);
+    const captchaRef = (0, react_2.useRef)(null);
     const shouldLoadCaptcha = !!((_a = hotel === null || hotel === void 0 ? void 0 : hotel.googleReCaptcha) === null || _a === void 0 ? void 0 : _a.loadForMembers) && !!((_b = hotel === null || hotel === void 0 ? void 0 : hotel.googleReCaptcha) === null || _b === void 0 ? void 0 : _b.siteKey);
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         let cancelled = false;
         if (shouldLoadCaptcha) {
             RoomstayThemeEngine_1.default.loadScript('https://www.google.com/recaptcha/api.js', 'Google ReCaptcha').then(() => {
                 try {
-                    /** @ts-ignore */
                     window.grecaptcha.ready(() => {
                         if (!cancelled) {
                             setCaptchaScriptLoaded(true);
@@ -142,17 +141,17 @@ function MemberSignInModal(props) {
             cancelled = true;
         };
     }, [hotel]);
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         if (shouldLoadCaptcha && captchaScriptLoaded && (captchaRef === null || captchaRef === void 0 ? void 0 : captchaRef.current) && !captchaRendered && props.isOpen) {
             try {
                 setTimeout(() => {
+                    var _a;
                     const captchaCallback = (secret) => {
                         setReCaptchaSecret(secret);
                         setCaptchaError(undefined);
                     };
-                    /** @ts-ignore */
                     window.grecaptcha.render(captchaRef.current, {
-                        sitekey: hotel.googleReCaptcha.siteKey,
+                        sitekey: (_a = hotel.googleReCaptcha) === null || _a === void 0 ? void 0 : _a.siteKey,
                         callback: captchaCallback,
                     });
                     setCaptchaRendered(true);
@@ -164,7 +163,7 @@ function MemberSignInModal(props) {
             }
         }
     }, [props.isOpen, captchaScriptLoaded, captchaRef, captchaRef === null || captchaRef === void 0 ? void 0 : captchaRef.current, captchaRendered]);
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         if (!props.isOpen) {
             setReCaptchaSecret(null);
             setCaptchaError(null);
@@ -180,9 +179,6 @@ function MemberSignInModal(props) {
                 return 'success';
             }
         }
-        else {
-            return null;
-        }
     };
     const methods = (0, react_hook_form_1.useForm)({
         mode: 'onChange',
@@ -212,7 +208,7 @@ function MemberSignInModal(props) {
             const extraFields = Object.keys(extra).map((extraFieldKey) => {
                 return { name: extraFieldKey, value: extra[extraFieldKey] };
             });
-            const response = yield BookingAPI_1.default.Member.addMember(FirstName, LastName, Email, extraFields, hotel.hotelID, reCaptchaSecret);
+            const response = yield BookingAPI_1.default.Member.addMember(FirstName, LastName, Email, extraFields, hotel === null || hotel === void 0 ? void 0 : hotel.hotelID, reCaptchaSecret);
             if (response.error) {
                 setCaptchaError(t(Translation_1.Translation.MemberOnlyPopup.Errors.ReCaptcha.ValidationError));
             }
@@ -254,48 +250,48 @@ function MemberSignInModal(props) {
     const modalSubtitle = (_g = (_f = ccx === null || ccx === void 0 ? void 0 : ccx.memberOnlyModalPromotion) === null || _f === void 0 ? void 0 : _f.memberOnlyModalSubtitle) !== null && _g !== void 0 ? _g : t(Translation_1.Translation.MemberOnlyPopup.Subtitle);
     const modalButtonText = (_j = (_h = ccx === null || ccx === void 0 ? void 0 : ccx.memberOnlyModalPromotion) === null || _h === void 0 ? void 0 : _h.memberOnlyModalButtonText) !== null && _j !== void 0 ? _j : t(Translation_1.Translation.MemberOnlyPopup.SubmitButtonText);
     const modalLeadImage = (_l = (_k = ccx === null || ccx === void 0 ? void 0 : ccx.memberOnlyModalPromotion) === null || _k === void 0 ? void 0 : _k.memberOnlyModalImage) !== null && _l !== void 0 ? _l : hotel === null || hotel === void 0 ? void 0 : hotel.heroImage;
-    return (React.createElement(SimpleModal_1.default, { open: props.isOpen, onClose: loadingOnClose, size: SimpleModal_1.SimpleModalSize.Normal, alignCenter: true },
-        React.createElement("div", { className: "row" },
-            React.createElement("div", { className: "col-md-6 u-mh-none", style: {
+    return (react_1.default.createElement(SimpleModal_1.default, { open: props.isOpen, onClose: loadingOnClose, size: SimpleModal_1.SimpleModalSize.Normal, alignCenter: true },
+        react_1.default.createElement("div", { className: "row" },
+            react_1.default.createElement("div", { className: "col-md-6 u-mh-none", style: {
                     background: 'url("' + modalLeadImage + '")',
                     backgroundRepeat: 'no-repeat',
                     backgroundPosition: 'center',
                     backgroundSize: 'cover',
                 } }),
-            React.createElement("div", { className: "col-md-6" },
-                React.createElement("div", { className: "u-pad u-pad-heavy@m-" },
-                    React.createElement("div", { className: "u-marg-bottom-half" },
-                        React.createElement(Icon_1.default, { icon: Icon_1.IconType.Money, size: "24px", color: Color_1.Color.Success, backgroundColor: Color_1.Color.SuccessTint })),
-                    React.createElement("div", { className: "u-marg-bottom-half" },
-                        React.createElement(Headline_1.default, { bold: true, color: Color_1.Color.Success },
-                            React.createElement("div", { style: { color: Color_1.Color.Success }, dangerouslySetInnerHTML: {
+            react_1.default.createElement("div", { className: "col-md-6" },
+                react_1.default.createElement("div", { className: "u-pad u-pad-heavy@m-" },
+                    react_1.default.createElement("div", { className: "u-marg-bottom-half" },
+                        react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Money, size: "24px", color: Color_1.Color.Success, backgroundColor: Color_1.Color.SuccessTint })),
+                    react_1.default.createElement("div", { className: "u-marg-bottom-half" },
+                        react_1.default.createElement(Headline_1.default, { bold: true, color: Color_1.Color.Success },
+                            react_1.default.createElement("div", { style: { color: Color_1.Color.Success }, dangerouslySetInnerHTML: {
                                     __html: modalTitle,
                                 } }))),
-                    React.createElement("div", { className: "u-marg-bottom" },
-                        React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.DarkGrey },
-                            React.createElement("span", { dangerouslySetInnerHTML: { __html: modalSubtitle } }))),
-                    React.createElement(react_hook_form_1.FormProvider, Object.assign({}, methods),
-                        React.createElement("div", null, modalInputs.Lines.map((inputLine, lineIndex) => {
-                            return (React.createElement(InputGroup_1.default, { dimensions: inputLine.Dimension, key: lineIndex }, inputLine.Inputs.map((input, inputIndex) => {
+                    react_1.default.createElement("div", { className: "u-marg-bottom" },
+                        react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.DarkGrey },
+                            react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: modalSubtitle } }))),
+                    react_1.default.createElement(react_hook_form_1.FormProvider, Object.assign({}, methods),
+                        react_1.default.createElement("div", null, modalInputs.Lines.map((inputLine, lineIndex) => {
+                            return (react_1.default.createElement(InputGroup_1.default, { dimensions: inputLine.Dimension, key: lineIndex }, inputLine.Inputs.map((input, inputIndex) => {
                                 switch (input.type) {
                                     case 'TextBox':
-                                        return (React.createElement(TextBox_1.default, Object.assign({ key: inputIndex, wide: true, placeholder: input.placeholder, required: input.isRequired, validationStatus: getValidationClass(input.name) }, register(input.name, {
+                                        return (react_1.default.createElement(TextBox_1.default, Object.assign({ key: inputIndex, wide: true, placeholder: input.placeholder, required: input.isRequired, validationStatus: getValidationClass(input.name) }, register(input.name, {
                                             required: input.isRequired,
                                             validate: input.validate,
                                         }))));
                                 }
                             })));
                         })),
-                        React.createElement("div", { className: "u-marg-top--light", style: { marginBottom: '45px' } },
-                            captchaScriptLoaded && (React.createElement(React.Fragment, null,
-                                captchaError && (React.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.Alert }, captchaError)),
-                                React.createElement("div", { ref: captchaRef, className: "u-marg-bottom" }))),
-                            React.createElement(BEButton_1.default, { size: "normal", filled: true, success: true, isLoading: isLoading, stopIconAnimation: true, icon: context.screenSize > ScreenSize_1.default.Mobile ? Icon_1.IconType.ArrowRight : null, onClick: buttonOnClickHandler }, modalButtonText))),
-                    React.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.DarkGrey },
-                        React.createElement("span", { dangerouslySetInnerHTML: { __html: t(Translation_1.Translation.MemberOnlyPopup.AgreeToReceiveDeals, { companyShort: ccx === null || ccx === void 0 ? void 0 : ccx.companyShort }) } })),
+                        react_1.default.createElement("div", { className: "u-marg-top--light", style: { marginBottom: '45px' } },
+                            captchaScriptLoaded && (react_1.default.createElement(react_1.default.Fragment, null,
+                                captchaError && (react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.Alert }, captchaError)),
+                                react_1.default.createElement("div", { ref: captchaRef, className: "u-marg-bottom" }))),
+                            react_1.default.createElement(BEButton_1.default, { size: "normal", filled: true, success: true, isLoading: isLoading, stopIconAnimation: true, icon: context.screenSize > ScreenSize_1.default.Mobile ? Icon_1.IconType.ArrowRight : undefined, onClick: buttonOnClickHandler }, modalButtonText))),
+                    react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.DarkGrey },
+                        react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: t(Translation_1.Translation.MemberOnlyPopup.AgreeToReceiveDeals, { companyShort: ccx === null || ccx === void 0 ? void 0 : ccx.companyShort }) } })),
                     ' ',
-                    React.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.DarkGrey },
-                        React.createElement("span", { dangerouslySetInnerHTML: { __html: t(Translation_1.Translation.MemberOnlyPopup.UnsubscribeAnytime) } })))))));
+                    react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.DarkGrey },
+                        react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: t(Translation_1.Translation.MemberOnlyPopup.UnsubscribeAnytime) } })))))));
 }
 exports.default = MemberSignInModal;
 //# sourceMappingURL=MemberSignInModal.js.map