npm - @roomstay/frontend - Versions diffs - 1.6.1 → 2.0.0-2 - Mend

@roomstay/frontend 1.6.1 → 2.0.0-2

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 (1056) hide show

package/dist/src/components/generic/date/DatePickerWeek.js CHANGED Viewed

@@ -11,36 +11,35 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = require("react");
 const react_1 = require("react");
-const DatePickerContext_1 = require("../../../contexts/DatePickerContext");
-const CalendarHelper_1 = require("../../../util/CalendarHelper");
-const DatePickerDay_1 = require("./DatePickerDay");
+const CalendarHelper_1 = require("util/CalendarHelper");
+const DatePickerDay_1 = require("components/generic/date/DatePickerDay");
 const web_1 = require("@react-spring/web");
 const react_use_measure_1 = require("react-use-measure");
 const react_use_gesture_1 = require("react-use-gesture");
 const dayjs = require("dayjs");
-const Icon_1 = require("../Icon");
-const Color_1 = require("../../../util/Color");
-const ScreenSize_1 = require("../../../util/ScreenSize");
-const DataLayer_1 = require("../../../util/DataLayer");
-const Text_1 = require("../Text");
-const TextAlignment_1 = require("../../../util/TextAlignment");
+const Icon_1 = require("components/generic/Icon/Icon");
+const Color_1 = require("util/Color");
+const ScreenSize_1 = require("util/ScreenSize");
+const DataLayer_1 = require("util/DataLayer");
+const Text_1 = require("components/generic/Text");
+const TextAlignment_1 = require("util/TextAlignment");
 const contexts_1 = require("@frontend/contexts");
 function DatePickerWeek() {
     var _a, _b;
-    const dpContext = react_1.useContext(DatePickerContext_1.DatePickerContext);
-    const context = react_1.useContext(contexts_1.BookingEngineContext);
+    const dpContext = (0, react_1.useContext)(contexts_1.DatePickerContext);
+    const context = (0, react_1.useContext)(contexts_1.BookingEngineContext);
     const showingMonth = (_b = (_a = dpContext.startDate) !== null && _a !== void 0 ? _a : dpContext.currentMonth) !== null && _b !== void 0 ? _b : dayjs().add(14, 'day');
     const scrollingOffset = 0;
     let sliderVelocity = 0;
-    const [{ x }, set] = web_1.useSpring(() => ({ x: 0, config: { mass: 1, tension: 170, friction: 20 } }));
-    const [lastReleaseX, setLastReleaseX] = react_1.useState(0);
-    const [ref, bounds] = react_use_measure_1.default();
-    const [daysLoaded, setDaysLoaded] = react_1.useState([]);
-    const [lastDay, setLastDay] = react_1.useState(null);
-    const [firstDay, setFirstDay] = react_1.useState(dayjs());
-    const [numberOfDaysLoaded, setNumberOfDaysLoaded] = react_1.useState(0);
-    const [toggler, setToggler] = react_1.useState(false);
-    react_1.useEffect(() => {
+    const [{ x }, set] = (0, web_1.useSpring)(() => ({ x: 0, config: { mass: 1, tension: 170, friction: 20 } }));
+    const [lastReleaseX, setLastReleaseX] = (0, react_1.useState)(0);
+    const [ref, bounds] = (0, react_use_measure_1.default)();
+    const [daysLoaded, setDaysLoaded] = (0, react_1.useState)([]);
+    const [lastDay, setLastDay] = (0, react_1.useState)(null);
+    const [firstDay, setFirstDay] = (0, react_1.useState)(dayjs());
+    const [numberOfDaysLoaded, setNumberOfDaysLoaded] = (0, react_1.useState)(0);
+    const [toggler, setToggler] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
         setDaysLoaded(CalendarHelper_1.default.getDaysBetween(dayjs(), showingMonth));
         if (dpContext.startDate) {
             setTimeout(() => {
@@ -72,12 +71,12 @@ function DatePickerWeek() {
             return newDaysLoaded;
         });
     });
-    react_1.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         setLastDay(daysLoaded[daysLoaded.length - 1]);
         setFirstDay(daysLoaded[0]);
         setNumberOfDaysLoaded(daysLoaded.length);
     }, [daysLoaded]);
-    react_1.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (62 * numberOfDaysLoaded - 1000 <= -lastReleaseX) {
             loadNext();
         }
@@ -88,7 +87,7 @@ function DatePickerWeek() {
     });
     let lastIndex = 0;
     // Set the drag hook and define component movement based on gesture data
-    const bind = react_use_gesture_1.useDrag(({ down, movement: [mx], velocity }) => {
+    const bind = (0, react_use_gesture_1.useDrag)(({ down, movement: [mx], velocity }) => {
         if (context.screenSize <= ScreenSize_1.default.Medium) {
             velocity = velocity * 0.75;
             sliderVelocity = velocity > 4 ? 4 : velocity < 1 ? 1 : velocity;
@@ -123,7 +122,7 @@ function DatePickerWeek() {
             set({ x: lastReleaseX + mx });
         }
     });
-    const days = react_1.useMemo(() => (React.createElement(React.Fragment, null, daysLoaded.map((date, index) => {
+    const days = (0, react_1.useMemo)(() => (React.createElement(React.Fragment, null, daysLoaded.map((date, index) => {
         const day = date.format('D');
         const unix = date.unix();
         return (React.createElement(React.Fragment, null,

package/dist/src/components/generic/date/DatePickerWeek.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DatePickerWeek.js","sourceRoot":"/","sources":["src/components/generic/date/DatePickerWeek.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useContext, useMemo, useState, useEffect } from 'react';\nimport { DatePickerContext } from '../../../contexts/DatePickerContext';\nimport CalendarHelper from '../../../util/CalendarHelper';\nimport DatePickerDay from './DatePickerDay';\nimport { useSpring, animated } from '@react-spring/web';\nimport useMeasure from 'react-use-measure';\nimport { useDrag } from 'react-use-gesture';\nimport * as dayjs from 'dayjs';\nimport Icon, { IconType } from '../Icon';\nimport { Color } from '../../../util/Color';\nimport ScreenSize from '../../../util/ScreenSize';\nimport DataLayer, { InteractionStep, InteractionType } from '../../../util/DataLayer';\nimport { Text, TextType } from '../Text';\nimport { TextAlign } from '../../../util/TextAlignment';\nimport { BookingEngineContext } from '@frontend/contexts';\n\nexport default function DatePickerWeek() {\n const dpContext = useContext(DatePickerContext);\n const context = useContext(BookingEngineContext);\n\n const showingMonth = dpContext.startDate ?? dpContext.currentMonth ?? dayjs().add(14, 'day');\n\n const scrollingOffset = 0;\n\n let sliderVelocity = 0;\n\n const [{ x }, set] = useSpring(() => ({ x: 0, config: { mass: 1, tension: 170, friction: 20 } }));\n const [lastReleaseX, setLastReleaseX] = useState(0);\n\n const [ref, bounds] = useMeasure();\n\n const [daysLoaded, setDaysLoaded] = useState<dayjs.Dayjs[]>([]);\n\n const [lastDay, setLastDay] = useState<dayjs.Dayjs>(null);\n const [firstDay, setFirstDay] = useState<dayjs.Dayjs>(dayjs());\n const [numberOfDaysLoaded, setNumberOfDaysLoaded] = useState(0);\n\n const [toggler, setToggler] = useState(false);\n\n useEffect(() => {\n setDaysLoaded(CalendarHelper.getDaysBetween(dayjs(), showingMonth));\n\n if (dpContext.startDate) {\n setTimeout(() => {\n focusDay(dpContext.startDate);\n }, 500);\n }\n }, []);\n\n const setSwiperLocation = (location: number) => {\n if (location > 0) {\n location = 0;\n }\n\n set({ x: location });\n setLastReleaseX(location);\n };\n\n const focusDay = (toFocus: dayjs.Dayjs) => {\n let index = 0;\n\n index = firstDay ? Math.abs(Number(toFocus.diff(firstDay, 'day'))) : Number(toFocus.format('DD'));\n\n const focus = -(62 * index);\n setSwiperLocation(focus);\n };\n\n const loadDataForDate = async (forDate: dayjs.Dayjs, after = true) => {\n if (forDate.isBefore(dayjs())) {\n return;\n }\n\n setDaysLoaded((oldDaysLoaded) => {\n let newDaysLoaded = [];\n const newDays = after ? CalendarHelper.getWeekFrom(forDate) : CalendarHelper.getWeekTo(forDate);\n\n newDaysLoaded = after ? [...oldDaysLoaded, ...newDays] : [...newDays.reverse(), ...oldDaysLoaded];\n\n return newDaysLoaded;\n });\n };\n\n useEffect(() => {\n setLastDay(daysLoaded[daysLoaded.length - 1]);\n setFirstDay(daysLoaded[0]);\n setNumberOfDaysLoaded(daysLoaded.length);\n }, [daysLoaded]);\n\n useEffect(() => {\n if (62 * numberOfDaysLoaded - 1000 <= -lastReleaseX) {\n loadNext();\n }\n }, [lastReleaseX]);\n\n const loadNext = async () => {\n loadDataForDate(daysLoaded[daysLoaded.length - 1] ?? showingMonth.add(7, 'days'));\n };\n\n let lastIndex = 0;\n\n // Set the drag hook and define component movement based on gesture data\n const bind = useDrag(({ down, movement: [mx], velocity }) => {\n if (context.screenSize <= ScreenSize.Medium) {\n velocity = velocity * 0.75;\n sliderVelocity = velocity > 4 ? 4 : velocity < 1 ? 1 : velocity;\n } else {\n sliderVelocity = 1;\n }\n\n mx = mx * sliderVelocity;\n\n if (!down) {\n const releasePosition = lastReleaseX + mx;\n const cardWidth = 62;\n const maxX = numberOfDaysLoaded * cardWidth;\n\n let restingLocation = 0;\n\n if (releasePosition > 0) {\n restingLocation = 0;\n } else if (releasePosition < -maxX) {\n restingLocation = -maxX;\n } else {\n const magic = -releasePosition / cardWidth;\n lastIndex = releasePosition % cardWidth > -cardWidth / 2 ? Math.floor(magic) : Math.ceil(magic);\n restingLocation = -(lastIndex * cardWidth);\n }\n\n if (62 * numberOfDaysLoaded - 1000 <= -releasePosition) {\n loadNext();\n }\n\n set({ x: restingLocation });\n setLastReleaseX(restingLocation);\n } else {\n set({ x: lastReleaseX + mx });\n }\n });\n\n const days = useMemo(\n () => (\n <>\n {daysLoaded.map((date, index) => {\n const day = date.format('D');\n const unix = date.unix();\n\n return (\n <>\n <DatePickerDay key={unix} text={day} selectable={true} day={date} displayType=\"week\" unix={unix} />\n </>\n );\n })}\n </>\n ),\n [daysLoaded]\n );\n\n // TODO refactor\n const getCurrentDay = () => {\n const day = Math.floor(lastReleaseX / 62);\n\n if (firstDay) {\n return firstDay.add(-day, 'day').format('MMMM');\n }\n\n return showingMonth.format('MMMM');\n };\n\n const currentDayValue = getCurrentDay();\n const showPreviousWeek = () => {\n DataLayer.instance.sendInteraction('Show Previous Week', InteractionType.CALENDAR, InteractionStep.DATES);\n setSwiperLocation(lastReleaseX + 62 * 7);\n };\n const showNextWeek = () => {\n DataLayer.instance.sendInteraction('Show Next Week', InteractionType.CALENDAR, InteractionStep.DATES);\n setSwiperLocation(lastReleaseX - 62 * 7);\n };\n return (\n <>\n <div className=\"diji-calendar-navigation\">\n <Icon icon={IconType.ArrowLeft2} onClick={showPreviousWeek} color={Color.White} backgroundColor={Color.Navy} borderRadius=\"round\" size=\"24px\" />\n <Icon icon={IconType.ArrowRight2} onClick={showNextWeek} color={Color.White} backgroundColor={Color.Navy} borderRadius=\"round\" size=\"24px\" />\n </div>\n <div className=\"u-marg-top\">\n <Text type={TextType.Body} bold={true} align={TextAlign.Center}>\n {currentDayValue}\n </Text>\n </div>\n <div className=\"diji-calendar-week--global-month\">{currentDayValue}</div>\n <div className=\"diji-calendar-week\">\n <div className=\"diji-calendar-week--track\" {...bind()}>\n <animated.div className=\"diji-calendar-week--items\" style={{ left: x }}>\n {days}\n </animated.div>\n </div>\n </div>\n </>\n );\n}\n"]}
1	+ {"version":3,"file":"DatePickerWeek.js","sourceRoot":"/","sources":["src/components/generic/date/DatePickerWeek.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useContext, useMemo, useState, useEffect } from 'react';\n\nimport CalendarHelper from 'util/CalendarHelper';\nimport DatePickerDay from 'components/generic/date/DatePickerDay';\nimport { useSpring, animated } from '@react-spring/web';\nimport useMeasure from 'react-use-measure';\nimport { useDrag } from 'react-use-gesture';\nimport * as dayjs from 'dayjs';\nimport Icon, { IconType } from 'components/generic/Icon/Icon';\nimport { Color } from 'util/Color';\nimport ScreenSize from 'util/ScreenSize';\nimport DataLayer, { InteractionStep, InteractionType } from 'util/DataLayer';\nimport { Text, TextType } from 'components/generic/Text';\nimport { TextAlign } from 'util/TextAlignment';\nimport { BookingEngineContext, DatePickerContext } from '@frontend/contexts';\n\nexport default function DatePickerWeek() {\n const dpContext = useContext(DatePickerContext);\n const context = useContext(BookingEngineContext);\n\n const showingMonth = dpContext.startDate ?? dpContext.currentMonth ?? dayjs().add(14, 'day');\n\n const scrollingOffset = 0;\n\n let sliderVelocity = 0;\n\n const [{ x }, set] = useSpring(() => ({ x: 0, config: { mass: 1, tension: 170, friction: 20 } }));\n const [lastReleaseX, setLastReleaseX] = useState(0);\n\n const [ref, bounds] = useMeasure();\n\n const [daysLoaded, setDaysLoaded] = useState<dayjs.Dayjs[]>([]);\n\n const [lastDay, setLastDay] = useState<dayjs.Dayjs>(null);\n const [firstDay, setFirstDay] = useState<dayjs.Dayjs>(dayjs());\n const [numberOfDaysLoaded, setNumberOfDaysLoaded] = useState(0);\n\n const [toggler, setToggler] = useState(false);\n\n useEffect(() => {\n setDaysLoaded(CalendarHelper.getDaysBetween(dayjs(), showingMonth));\n\n if (dpContext.startDate) {\n setTimeout(() => {\n focusDay(dpContext.startDate);\n }, 500);\n }\n }, []);\n\n const setSwiperLocation = (location: number) => {\n if (location > 0) {\n location = 0;\n }\n\n set({ x: location });\n setLastReleaseX(location);\n };\n\n const focusDay = (toFocus: dayjs.Dayjs) => {\n let index = 0;\n\n index = firstDay ? Math.abs(Number(toFocus.diff(firstDay, 'day'))) : Number(toFocus.format('DD'));\n\n const focus = -(62 * index);\n setSwiperLocation(focus);\n };\n\n const loadDataForDate = async (forDate: dayjs.Dayjs, after = true) => {\n if (forDate.isBefore(dayjs())) {\n return;\n }\n\n setDaysLoaded((oldDaysLoaded) => {\n let newDaysLoaded = [];\n const newDays = after ? CalendarHelper.getWeekFrom(forDate) : CalendarHelper.getWeekTo(forDate);\n\n newDaysLoaded = after ? [...oldDaysLoaded, ...newDays] : [...newDays.reverse(), ...oldDaysLoaded];\n\n return newDaysLoaded;\n });\n };\n\n useEffect(() => {\n setLastDay(daysLoaded[daysLoaded.length - 1]);\n setFirstDay(daysLoaded[0]);\n setNumberOfDaysLoaded(daysLoaded.length);\n }, [daysLoaded]);\n\n useEffect(() => {\n if (62 * numberOfDaysLoaded - 1000 <= -lastReleaseX) {\n loadNext();\n }\n }, [lastReleaseX]);\n\n const loadNext = async () => {\n loadDataForDate(daysLoaded[daysLoaded.length - 1] ?? showingMonth.add(7, 'days'));\n };\n\n let lastIndex = 0;\n\n // Set the drag hook and define component movement based on gesture data\n const bind = useDrag(({ down, movement: [mx], velocity }) => {\n if (context.screenSize <= ScreenSize.Medium) {\n velocity = velocity * 0.75;\n sliderVelocity = velocity > 4 ? 4 : velocity < 1 ? 1 : velocity;\n } else {\n sliderVelocity = 1;\n }\n\n mx = mx * sliderVelocity;\n\n if (!down) {\n const releasePosition = lastReleaseX + mx;\n const cardWidth = 62;\n const maxX = numberOfDaysLoaded * cardWidth;\n\n let restingLocation = 0;\n\n if (releasePosition > 0) {\n restingLocation = 0;\n } else if (releasePosition < -maxX) {\n restingLocation = -maxX;\n } else {\n const magic = -releasePosition / cardWidth;\n lastIndex = releasePosition % cardWidth > -cardWidth / 2 ? Math.floor(magic) : Math.ceil(magic);\n restingLocation = -(lastIndex * cardWidth);\n }\n\n if (62 * numberOfDaysLoaded - 1000 <= -releasePosition) {\n loadNext();\n }\n\n set({ x: restingLocation });\n setLastReleaseX(restingLocation);\n } else {\n set({ x: lastReleaseX + mx });\n }\n });\n\n const days = useMemo(\n () => (\n <>\n {daysLoaded.map((date, index) => {\n const day = date.format('D');\n const unix = date.unix();\n\n return (\n <>\n <DatePickerDay key={unix} text={day} selectable={true} day={date} displayType=\"week\" unix={unix} />\n </>\n );\n })}\n </>\n ),\n [daysLoaded]\n );\n\n // TODO refactor\n const getCurrentDay = () => {\n const day = Math.floor(lastReleaseX / 62);\n\n if (firstDay) {\n return firstDay.add(-day, 'day').format('MMMM');\n }\n\n return showingMonth.format('MMMM');\n };\n\n const currentDayValue = getCurrentDay();\n const showPreviousWeek = () => {\n DataLayer.instance.sendInteraction('Show Previous Week', InteractionType.CALENDAR, InteractionStep.DATES);\n setSwiperLocation(lastReleaseX + 62 * 7);\n };\n const showNextWeek = () => {\n DataLayer.instance.sendInteraction('Show Next Week', InteractionType.CALENDAR, InteractionStep.DATES);\n setSwiperLocation(lastReleaseX - 62 * 7);\n };\n return (\n <>\n <div className=\"diji-calendar-navigation\">\n <Icon icon={IconType.ArrowLeft2} onClick={showPreviousWeek} color={Color.White} backgroundColor={Color.Navy} borderRadius=\"round\" size=\"24px\" />\n <Icon icon={IconType.ArrowRight2} onClick={showNextWeek} color={Color.White} backgroundColor={Color.Navy} borderRadius=\"round\" size=\"24px\" />\n </div>\n <div className=\"u-marg-top\">\n <Text type={TextType.Body} bold={true} align={TextAlign.Center}>\n {currentDayValue}\n </Text>\n </div>\n <div className=\"diji-calendar-week--global-month\">{currentDayValue}</div>\n <div className=\"diji-calendar-week\">\n <div className=\"diji-calendar-week--track\" {...bind()}>\n <animated.div className=\"diji-calendar-week--items\" style={{ left: x }}>\n {days}\n </animated.div>\n </div>\n </div>\n </>\n );\n}\n"]}

package/dist/src/components/generic/date/FloatingDatePicker.js CHANGED Viewed

@@ -1,52 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const core_1 = require("@material-ui/core");
 const React = require("react");
-const DatePicker_1 = require("./DatePicker");
 const react_1 = require("react");
-const DataLayer_1 = require("../../../util/DataLayer");
+const DatePicker_1 = require("components/generic/date/DatePicker");
+const DataLayer_1 = require("util/DataLayer");
+const Overlay_1 = require("components/generic/Overlay/Overlay");
 function FloatingDatePicker(props) {
     var _a;
-    const [isOpen, setIsOpen] = react_1.useState(false);
-    let isStatelessOpen = isOpen;
-    const [startDate, setStartDate] = react_1.useState(null);
-    const thisElement = react_1.useRef(null);
-    react_1.useEffect(() => {
-        const event = (e) => {
-            var _a;
-            if (isStatelessOpen) {
-                let isInDatepicker = false;
-                for (const element of e.composedPath()) {
-                    if ((_a = element.classList) === null || _a === void 0 ? void 0 : _a.contains('floating-roomstay-calendar')) {
-                        isInDatepicker = true;
-                        break;
-                    }
-                }
-                if (!isInDatepicker) {
-                    isStatelessOpen = false;
-                    setIsOpen(false);
-                }
-            }
-        };
-        const preventPropagation = (e) => {
-            e.stopPropagation();
-        };
-        const openEvent = (e) => {
-            preventPropagation(e);
-            isStatelessOpen = true;
-            setIsOpen(true);
-        };
-        if (thisElement === null || thisElement === void 0 ? void 0 : thisElement.current) {
-            thisElement === null || thisElement === void 0 ? void 0 : thisElement.current.addEventListener('click', openEvent);
-        }
-        document.addEventListener('click', event);
-        return () => {
-            document.removeEventListener('click', event);
-            if (thisElement === null || thisElement === void 0 ? void 0 : thisElement.current) {
-                thisElement === null || thisElement === void 0 ? void 0 : thisElement.current.removeEventListener('click', openEvent);
-            }
-        };
-    }, [thisElement]);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [startDate, setStartDate] = (0, react_1.useState)(null);
+    const thisElement = (0, react_1.useRef)(null);
     const selectedDateChanged = (endDate) => {
         DataLayer_1.default.instance.sendInteraction('Check Out Date', DataLayer_1.InteractionType.CALENDAR, DataLayer_1.InteractionStep.ROOMS);
         if (props.selectedDateChanged && startDate) {
@@ -58,11 +21,17 @@ function FloatingDatePicker(props) {
         DataLayer_1.default.instance.sendInteraction('Check In Date', DataLayer_1.InteractionType.CALENDAR, DataLayer_1.InteractionStep.ROOMS);
         setStartDate(date);
     };
+    const onOverlayClose = () => {
+        setIsOpen(false);
+    };
+    const onOverlayOpen = () => {
+        setIsOpen(true);
+    };
     const inner = (React.createElement("div", { className: "d-flex align-items-center flex-column" },
         React.createElement(DatePicker_1.default, { showMonthOnLoad: props.startDate, showMultipleMonths: false, supportsMultiSelecting: true, onStartDateChanged: onStartDateChangedHandler, onEndDateChanged: selectedDateChanged, showMinNightStay: true })));
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { ref: thisElement, className: props.className }, props.children),
-        React.createElement(core_1.Popper, { modifiers: { flip: { enabled: false } }, className: 'floating-roomstay-calendar', open: isOpen, container: (_a = thisElement.current) === null || _a === void 0 ? void 0 : _a.parentElement.parentElement, anchorEl: thisElement.current, placement: 'bottom' }, inner)));
+        React.createElement("div", { ref: thisElement, className: props.className, onClick: onOverlayOpen }, props.children),
+        React.createElement(Overlay_1.Overlay, { open: isOpen, onClose: onOverlayClose, container: (_a = thisElement.current) === null || _a === void 0 ? void 0 : _a.parentElement.parentElement, followElement: thisElement.current, className: 'floating-roomstay-calendar' }, inner)));
 }
 exports.default = FloatingDatePicker;
 //# sourceMappingURL=FloatingDatePicker.js.map

package/dist/src/components/generic/date/FloatingDatePicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FloatingDatePicker.js","sourceRoot":"/","sources":["src/components/generic/date/FloatingDatePicker.tsx"],"names":[],"mappings":";;AAAA~~,4CAA2C;AAC3C~~,+BAA+B;AAC/B,~~6CAAsC~~;~~AAItC~~,~~iCAAoD~~;~~AACpD~~,~~uDAAsF~~;~~AAYtF~~,SAAwB,kBAAkB,CAAC,KAA8B;;IACrE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,gBAAQ,~~CAAC~~,KAAK,CAAC,CAAC;~~IAC5C~~,~~IAAI,eAAe,GAAG,~~MAAM,CAAC~~;IAE7B~~,~~MAAM,CAAC,~~SAAS,EAAE,YAAY,CAAC,GAAG,gBAAQ,~~CAAc~~,IAAI,CAAC,CAAC;IAE9D,MAAM,WAAW,GAAG,cAAM,~~CAAC~~,IAAI,CAAC,CAAC;IAEjC,~~iBAAS,CAAC,GAAG,EAAE;QACX,~~MAAM,~~KAAK~~,GAAG,CAAC,~~CAAa~~,EAAE,EAAE~~;;YAC5B,IAAI,eAAe,EAAE~~;~~gBACjB~~,~~IAAI~~,~~cAAc,GAAG,KAAK,~~CAAC~~;gBAC3B~~,~~KAAK,MAAM,OAAO,IAAI,CAAC,CAAC,YAAY,EAAmB,EAAE;oBACrD,UAAI,OAAO,CAAC,SAAS,0CAAE,~~QAAQ,CAAC,~~4BAA4B,GAAG;wBAC3D,cAAc,GAAG,IAAI,CAAC;wBACtB,MAAM;qBACT;iBACJ;gBAED,IAAI,CAAC,cAAc,EAAE;oBACjB,~~eAAe,~~GAAG,KAAK,~~CAAC~~;oBACxB~~,~~SAAS~~,~~CAAC,KAAK,CAAC,CAAC;iBACpB;aACJ;QACL,CAAC,CAAC;QAEF,MAAM,kBAAkB,GAAG,CAAC,CAAM,~~EAAE,~~EAAE;YAClC~~,CAAC,~~CAAC~~,~~eAAe,~~EAAE,~~CAAC;QACxB~~,CAAC,~~CAAC;QAEF~~,~~MAAM,SAAS,GAAG,~~CAAC,~~CAAM,EAAE,EAAE;YACzB,kBAAkB,~~CAAC~~,CAAC,CAAC,CAAC~~;~~YACtB~~,~~eAAe,GAAG,~~IAAI,~~CAAC;YACvB~~,~~SAAS,~~CAAC,~~IAAI~~,~~CAAC,CAAC;QACpB,CAAC,CAAC;QAEF,~~IAAI,~~WAAW~~,~~aAAX,WAAW,uBAAX,WAAW,CAAE,OAAO,~~EAAE;~~YACtB~~,~~WAAW~~,~~aAAX,WAAW,uBAAX,WAAW,CAAE,OAAO,~~CAAC,~~gBAAgB~~,CAAC,~~OAAO,EAAE,~~SAAS,EAAE~~;SAC7D;QAED~~,~~QAAQ,CAAC,gBAAgB,CAAC,~~OAAO,~~EAAE,KAAK,~~CAAC,CAAC;~~QAE1C,OAAO,GAAG,EAAE~~;~~YACR~~,~~QAAQ~~,CAAC,~~mBAAmB,CAAC,OAAO,EAAE,~~KAAK,CAAC,CAAC;~~YAE7C~~,~~IAAI,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,OAAO,EAAE;gBACtB,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,OAAO,~~CAAC,~~mBAAmB,~~CAAC~~,OAAO,EAAE,SAAS,EAAE~~;~~aAChE;QACL~~,~~CAAC,CAAC;IACN,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,~~MAAM,~~mBAAmB~~,GAAG,CAAC,~~OAAoB~~,EAAE,EAAE;~~QACjD~~,mBAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,~~gBAAgB~~,EAAE,2BAAe,CAAC,QAAQ,EAAE,2BAAe,CAAC,KAAK,CAAC,CAAC;~~QAEtG~~,~~IAAI~~,~~KAAK,~~CAAC,~~mBAAmB,~~IAAI,~~SAAS~~,~~EAAE~~;~~YACxC~~,~~KAAK,~~CAAC,~~mBAAmB,~~CAAC,~~SAAS~~,~~EAAE~~,~~OAAO~~,~~CAAC~~,~~CAAC~~;~~SACjD;QAED~~,SAAS,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,~~yBAAyB~~,GAAG,~~CAAC~~,~~IAAS,~~EAAE~~,EAAE~~;~~QAC5C~~,~~mBAAS~~,CAAC,~~QAAQ,CAAC,eAAe,CAAC,eAAe,EAAE,2BAAe,CAAC,QAAQ,EAAE,2BAAe,CAAC,KAAK,CAAC,CAAC;QACrG,YAAY,CAAC,~~IAAI,CAAC,CAAC;~~IACvB~~,CAAC,CAAC;IAEF,MAAM,KAAK,GAAG,CACV,6BAAK,SAAS,EAAC,uCAAuC;QAClD,oBAAC,oBAAU,IACP,eAAe,EAAE,KAAK,CAAC,SAAS,EAChC,kBAAkB,EAAE,KAAK,EACzB,sBAAsB,EAAE,IAAI,EAC5B,kBAAkB,EAAE,yBAAyB,EAC7C,gBAAgB,EAAE,mBAAmB,EACrC,gBAAgB,EAAE,IAAI,GACxB,CACA,CACT,CAAC;IAEF,OAAO,CACH;QACI,6BAAK,GAAG,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,~~IAC5C~~,KAAK,CAAC,QAAQ,CACb;QACN,oBAAC,~~aAAM~~,~~IACH~~,~~SAAS~~,EAAE,~~EAAE~~,~~IAAI~~,~~EAAE,EAAE,~~OAAO,EAAE,~~KAAK~~,~~EAAE~~,~~EAAE,EACvC,~~SAAS,EAAE,~~4BAA4B~~,~~EACvC,IAAI,EAAE,MAAM,EACZ,SAAS,QAAE,~~WAAW,CAAC,OAAO,0CAAE,aAAa,CAAC,aAAa,EAC3D,~~QAAQ~~,EAAE,WAAW,CAAC,OAAO,~~EAC7B~~,SAAS,EAAE,~~QAAQ~~,~~IAElB~~,KAAK,~~CACD~~,~~CACV~~,CACN,CAAC;AACN,CAAC;~~AAhGD~~,~~qCAgGC~~","sourcesContent":["import { ~~Popper~~ } from '~~@material-ui/core~~';\nimport * as ~~React~~ from 'react';\nimport DatePicker from './DatePicker';\n\nimport * as dayjs from 'dayjs';\n\nimport { ~~useEffect~~, ~~useRef,~~ ~~useState~~ } from '~~react~~';\nimport ~~DataLayer,~~ { ~~InteractionStep,~~ ~~InteractionType~~ } from '~~../../../util~~/~~DataLayer~~';\n\nexport interface FloatingDatePickerProps {\n children?: React.ReactNode;\n startDate?: dayjs.Dayjs;\n endDate?: dayjs.Dayjs;\n\n selectedDateChanged?: (startDate: dayjs.Dayjs, endDate: dayjs.Dayjs) => void;\n\n className?: string;\n}\n\nexport default function FloatingDatePicker(props: FloatingDatePickerProps) {\n const [isOpen, setIsOpen] = useState(false);\n ~~let isStatelessOpen = isOpen;\n~~\n const [startDate, setStartDate] = useState<dayjs.Dayjs>(null);\n\n const thisElement = useRef(null);\n\n ~~useEffect(() => {\n~~ const event = (e: MouseEvent) => {\n if (isStatelessOpen) {\n let isInDatepicker = false;\n for (const element of e.composedPath() as HTMLElement[]) {\n if (element.classList?.contains('floating-roomstay-calendar')) {\n isInDatepicker = true;\n break;\n }\n }\n\n if (!isInDatepicker) {\n isStatelessOpen = false;\n setIsOpen(false);\n }\n }\n };\n\n const preventPropagation = (e: any) => {\n e.stopPropagation();\n };\n\n const openEvent = (e: any) => {\n preventPropagation(e);\n isStatelessOpen = true;\n setIsOpen(true);\n };\n\n if (thisElement?.current) {\n thisElement?.current.addEventListener('click', openEvent);\n }\n\n document.addEventListener('click', event);\n\n return () => {\n document.removeEventListener('click', event);\n\n if (thisElement?.current) {\n thisElement?.current.removeEventListener('click', openEvent);\n }\n };\n }, [thisElement]);\n\n const selectedDateChanged = (endDate: dayjs.Dayjs) => {\n DataLayer.instance.sendInteraction('Check Out Date', InteractionType.CALENDAR, InteractionStep.ROOMS);\n\n if (props.selectedDateChanged && startDate) {\n props.selectedDateChanged(startDate, endDate);\n }\n\n setIsOpen(false);\n };\n\n const onStartDateChangedHandler = (date: any) => {\n DataLayer.instance.sendInteraction('Check In Date', InteractionType.CALENDAR, InteractionStep.ROOMS);\n setStartDate(date);\n };\n\n const inner = (\n <div className=\"d-flex align-items-center flex-column\">\n <DatePicker\n showMonthOnLoad={props.startDate}\n showMultipleMonths={false}\n supportsMultiSelecting={true}\n onStartDateChanged={onStartDateChangedHandler}\n onEndDateChanged={selectedDateChanged}\n showMinNightStay={true}\n />\n </div>\n );\n\n return (\n <>\n <div ref={thisElement} className={props.className}>\n {props.children}\n </div>\n <~~Popper~~\n ~~modifiers~~={~~{ flip: { enabled: false~~ } }}\n ~~className~~={~~'floating-roomstay-calendar'~~}\n ~~open={isOpen}\n~~ container={thisElement.current?.parentElement.parentElement}\n ~~anchorEl~~={thisElement.current}\n ~~placement~~={'~~bottom~~'}\n >\n {inner}\n </~~Popper~~>\n </>\n );\n}\n"]}
1	+ {"version":3,"file":"FloatingDatePicker.js","sourceRoot":"/","sources":["src/components/generic/date/FloatingDatePicker.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,iCAAyC;AAEzC,mEAA4D;AAI5D,8CAA6E;AAC7E,gEAA6D;AAY7D,SAAwB,kBAAkB,CAAC,KAA8B;;IACrE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE5C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAc,IAAI,CAAC,CAAC;IAE9D,MAAM,WAAW,GAAG,IAAA,cAAM,EAAC,IAAI,CAAC,CAAC;IAEjC,MAAM,mBAAmB,GAAG,CAAC,OAAoB,EAAE,EAAE;QACjD,mBAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,gBAAgB,EAAE,2BAAe,CAAC,QAAQ,EAAE,2BAAe,CAAC,KAAK,CAAC,CAAC;QAEtG,IAAI,KAAK,CAAC,mBAAmB,IAAI,SAAS,EAAE;YACxC,KAAK,CAAC,mBAAmB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;SACjD;QAED,SAAS,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,yBAAyB,GAAG,CAAC,IAAS,EAAE,EAAE;QAC5C,mBAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,eAAe,EAAE,2BAAe,CAAC,QAAQ,EAAE,2BAAe,CAAC,KAAK,CAAC,CAAC;QACrG,YAAY,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,GAAG,EAAE;QACxB,SAAS,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;QACvB,SAAS,CAAC,IAAI,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,MAAM,KAAK,GAAG,CACV,6BAAK,SAAS,EAAC,uCAAuC;QAClD,oBAAC,oBAAU,IACP,eAAe,EAAE,KAAK,CAAC,SAAS,EAChC,kBAAkB,EAAE,KAAK,EACzB,sBAAsB,EAAE,IAAI,EAC5B,kBAAkB,EAAE,yBAAyB,EAC7C,gBAAgB,EAAE,mBAAmB,EACrC,gBAAgB,EAAE,IAAI,GACxB,CACA,CACT,CAAC;IAEF,OAAO,CACH;QACI,6BAAK,GAAG,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,OAAO,EAAE,aAAa,IACpE,KAAK,CAAC,QAAQ,CACb;QACN,oBAAC,iBAAO,IACJ,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,cAAc,EACvB,SAAS,EAAE,MAAA,WAAW,CAAC,OAAO,0CAAE,aAAa,CAAC,aAAa,EAC3D,aAAa,EAAE,WAAW,CAAC,OAAO,EAClC,SAAS,EAAE,4BAA4B,IAEtC,KAAK,CACA,CACX,CACN,CAAC;AACN,CAAC;AA3DD,qCA2DC","sourcesContent":["import * as React from 'react';\nimport { useRef, useState } from 'react';\n\nimport DatePicker from 'components/generic/date/DatePicker';\n\nimport * as dayjs from 'dayjs';\n\nimport DataLayer, { InteractionStep, InteractionType } from 'util/DataLayer';\nimport { Overlay } from 'components/generic/Overlay/Overlay';\n\nexport interface FloatingDatePickerProps {\n children?: React.ReactNode;\n startDate?: dayjs.Dayjs;\n endDate?: dayjs.Dayjs;\n\n selectedDateChanged?: (startDate: dayjs.Dayjs, endDate: dayjs.Dayjs) => void;\n\n className?: string;\n}\n\nexport default function FloatingDatePicker(props: FloatingDatePickerProps) {\n const [isOpen, setIsOpen] = useState(false);\n\n const [startDate, setStartDate] = useState<dayjs.Dayjs>(null);\n\n const thisElement = useRef(null);\n\n const selectedDateChanged = (endDate: dayjs.Dayjs) => {\n DataLayer.instance.sendInteraction('Check Out Date', InteractionType.CALENDAR, InteractionStep.ROOMS);\n\n if (props.selectedDateChanged && startDate) {\n props.selectedDateChanged(startDate, endDate);\n }\n\n setIsOpen(false);\n };\n\n const onStartDateChangedHandler = (date: any) => {\n DataLayer.instance.sendInteraction('Check In Date', InteractionType.CALENDAR, InteractionStep.ROOMS);\n setStartDate(date);\n };\n\n const onOverlayClose = () => {\n setIsOpen(false);\n };\n\n const onOverlayOpen = () => {\n setIsOpen(true);\n };\n\n const inner = (\n <div className=\"d-flex align-items-center flex-column\">\n <DatePicker\n showMonthOnLoad={props.startDate}\n showMultipleMonths={false}\n supportsMultiSelecting={true}\n onStartDateChanged={onStartDateChangedHandler}\n onEndDateChanged={selectedDateChanged}\n showMinNightStay={true}\n />\n </div>\n );\n\n return (\n <>\n <div ref={thisElement} className={props.className} onClick={onOverlayOpen}>\n {props.children}\n </div>\n <Overlay\n open={isOpen}\n onClose={onOverlayClose}\n container={thisElement.current?.parentElement.parentElement}\n followElement={thisElement.current}\n className={'floating-roomstay-calendar'}\n >\n {inner}\n </Overlay>\n </>\n );\n}\n"]}

package/dist/src/components/generic/loader/ImageLoader.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ImageSize } from '../../../providers/ImageProvider';
+import { ImageSize } from 'providers/ImageProvider';
 interface ImageLoaderProps {
     src: string;
     visible?: boolean;

package/dist/src/components/generic/loader/ImageLoader.js CHANGED Viewed

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = require("react");
 const react_1 = require("react");
-const ImageProvider_1 = require("../../../providers/ImageProvider");
-const SmallSpinner_1 = require("./SmallSpinner");
+const ImageProvider_1 = require("providers/ImageProvider");
+const SmallSpinner_1 = require("components/generic/loader/SmallSpinner");
 function ImageLoader(props) {
-    const [imageLoading, setImageLoading] = react_1.useState(false);
-    const [imageSource, setImageSource] = react_1.useState('');
-    react_1.useEffect(() => {
+    const [imageLoading, setImageLoading] = (0, react_1.useState)(false);
+    const [imageSource, setImageSource] = (0, react_1.useState)('');
+    (0, react_1.useEffect)(() => {
         var _a;
         if (props.visible !== undefined && props.visible === false) {
             return;
@@ -25,7 +25,7 @@ function ImageLoader(props) {
             setImageLoading(false);
         };
     }, [props.src, props.visible]);
-    return react_1.useMemo(() => {
+    return (0, react_1.useMemo)(() => {
         return imageLoading ? (React.createElement("div", { className: "d-flex justify-content-center align-items-center", style: {
                 width: '100%',
                 height: '100%',

package/dist/src/components/generic/loader/ImageLoader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ImageLoader.js","sourceRoot":"/","sources":["src/components/generic/loader/ImageLoader.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,iCAAqD;AACrD,~~oEAA4E~~;~~AAC5E~~,~~iDAA0C~~;~~AAc1C~~,SAAwB,WAAW,CAAC,KAAuB;IACvD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,gBAAQ,~~CAAC~~,KAAK,CAAC,CAAC;IACxD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,gBAAQ,~~CAAC~~,EAAE,CAAC,CAAC;IAEnD,iBAAS,~~CAAC~~,GAAG,EAAE;;QACX,IAAI,KAAK,CAAC,OAAO,KAAK,SAAS,IAAI,KAAK,CAAC,OAAO,KAAK,KAAK,EAAE;YACxD,OAAO;SACV;QAED,IAAI,SAAS,GAAG,KAAK,CAAC;QAEtB,eAAe,CAAC,IAAI,CAAC,CAAC;QACtB,uBAAa,CAAC,qBAAqB,CAAC,KAAK,CAAC,GAAG,~~QAAE~~,KAAK,CAAC,IAAI,mCAAI,yBAAS,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE;YACxF,IAAI,CAAC,SAAS,EAAE;gBACZ,cAAc,CAAC,GAAG,CAAC,CAAC;gBACpB,eAAe,CAAC,KAAK,CAAC,CAAC;aAC1B;QACL,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACR,SAAS,GAAG,IAAI,CAAC;YACjB,eAAe,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAE/B,OAAO,eAAO,~~CAAC~~,GAAG,EAAE;QAChB,OAAO,YAAY,CAAC,CAAC,CAAC,CAClB,6BACI,SAAS,EAAC,kDAAkD,EAC5D,KAAK,EAAE;gBACH,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;aACjB;YAED,oBAAC,sBAAY,OAAG,CACd,CACT,CAAC,CAAC,CAAC,CACA,6BAAK,GAAG,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,GAAI,CAC5E,CAAC;IACN,CAAC,EAAE,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC,CAAC;AACpC,CAAC;AAxCD,8BAwCC","sourcesContent":["import * as React from 'react';\nimport { useMemo, useState, useEffect } from 'react';\nimport ImageProvider, { ImageSize } from '~~../../../~~providers/ImageProvider';\nimport SmallSpinner from './SmallSpinner';\n\ninterface ImageLoaderProps {\n src: string;\n\n // Visibility override for complex objects\n visible?: boolean;\n\n draggable?: boolean;\n\n size?: ImageSize;\n style?: React.CSSProperties;\n}\n\nexport default function ImageLoader(props: ImageLoaderProps) {\n const [imageLoading, setImageLoading] = useState(false);\n const [imageSource, setImageSource] = useState('');\n\n useEffect(() => {\n if (props.visible !== undefined && props.visible === false) {\n return;\n }\n\n let cancelled = false;\n\n setImageLoading(true);\n ImageProvider.getLazyLoadedImageUrl(props.src, props.size ?? ImageSize.Medium).then((src) => {\n if (!cancelled) {\n setImageSource(src);\n setImageLoading(false);\n }\n });\n\n return () => {\n cancelled = true;\n setImageLoading(false);\n };\n }, [props.src, props.visible]);\n\n return useMemo(() => {\n return imageLoading ? (\n <div\n className=\"d-flex justify-content-center align-items-center\"\n style={{\n width: '100%',\n height: '100%',\n }}\n >\n <SmallSpinner />\n </div>\n ) : (\n <img src={imageSource} style={props.style} draggable={props.draggable} />\n );\n }, [imageLoading, imageSource]);\n}\n"]}
1	+ {"version":3,"file":"ImageLoader.js","sourceRoot":"/","sources":["src/components/generic/loader/ImageLoader.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,iCAAqD;AACrD,2DAAmE;AACnE,yEAAkE;AAclE,SAAwB,WAAW,CAAC,KAAuB;IACvD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACxD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAC,EAAE,CAAC,CAAC;IAEnD,IAAA,iBAAS,EAAC,GAAG,EAAE;;QACX,IAAI,KAAK,CAAC,OAAO,KAAK,SAAS,IAAI,KAAK,CAAC,OAAO,KAAK,KAAK,EAAE;YACxD,OAAO;SACV;QAED,IAAI,SAAS,GAAG,KAAK,CAAC;QAEtB,eAAe,CAAC,IAAI,CAAC,CAAC;QACtB,uBAAa,CAAC,qBAAqB,CAAC,KAAK,CAAC,GAAG,EAAE,MAAA,KAAK,CAAC,IAAI,mCAAI,yBAAS,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE;YACxF,IAAI,CAAC,SAAS,EAAE;gBACZ,cAAc,CAAC,GAAG,CAAC,CAAC;gBACpB,eAAe,CAAC,KAAK,CAAC,CAAC;aAC1B;QACL,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACR,SAAS,GAAG,IAAI,CAAC;YACjB,eAAe,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAE/B,OAAO,IAAA,eAAO,EAAC,GAAG,EAAE;QAChB,OAAO,YAAY,CAAC,CAAC,CAAC,CAClB,6BACI,SAAS,EAAC,kDAAkD,EAC5D,KAAK,EAAE;gBACH,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;aACjB;YAED,oBAAC,sBAAY,OAAG,CACd,CACT,CAAC,CAAC,CAAC,CACA,6BAAK,GAAG,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,GAAI,CAC5E,CAAC;IACN,CAAC,EAAE,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC,CAAC;AACpC,CAAC;AAxCD,8BAwCC","sourcesContent":["import * as React from 'react';\nimport { useMemo, useState, useEffect } from 'react';\nimport ImageProvider, { ImageSize } from 'providers/ImageProvider';\nimport SmallSpinner from 'components/generic/loader/SmallSpinner';\n\ninterface ImageLoaderProps {\n src: string;\n\n // Visibility override for complex objects\n visible?: boolean;\n\n draggable?: boolean;\n\n size?: ImageSize;\n style?: React.CSSProperties;\n}\n\nexport default function ImageLoader(props: ImageLoaderProps) {\n const [imageLoading, setImageLoading] = useState(false);\n const [imageSource, setImageSource] = useState('');\n\n useEffect(() => {\n if (props.visible !== undefined && props.visible === false) {\n return;\n }\n\n let cancelled = false;\n\n setImageLoading(true);\n ImageProvider.getLazyLoadedImageUrl(props.src, props.size ?? ImageSize.Medium).then((src) => {\n if (!cancelled) {\n setImageSource(src);\n setImageLoading(false);\n }\n });\n\n return () => {\n cancelled = true;\n setImageLoading(false);\n };\n }, [props.src, props.visible]);\n\n return useMemo(() => {\n return imageLoading ? (\n <div\n className=\"d-flex justify-content-center align-items-center\"\n style={{\n width: '100%',\n height: '100%',\n }}\n >\n <SmallSpinner />\n </div>\n ) : (\n <img src={imageSource} style={props.style} draggable={props.draggable} />\n );\n }, [imageLoading, imageSource]);\n}\n"]}

package/dist/src/components/generic/loader/LargeLoader.js CHANGED Viewed

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const React = require("react");
 const react_1 = require("react");
 const web_1 = require("@react-spring/web");
-const Text_1 = require("../Text");
+const Text_1 = require("components/generic/Text");
 const paths = [
     'M21 16V14L13 9V3.5C13 2.67 12.33 2 11.5 2C10.67 2 10 2.67 10 3.5V9L2 14V16L10 13.5V19L8 20.5V22L11.5 21L15 22V20.5L13 19V13.5L21 16Z',
     'M20.57 14.86L22 13.43L20.57 12L17 15.57L8.43 7L12 3.43L10.57 2L9.14 3.43L7.71 2L5.57 4.14L4.14 2.71L2.71 4.14L4.14 5.57L2 7.71L3.43 9.14L2 10.57L3.43 12L7 8.43L15.57 17L12 20.57L13.43 22L14.86 20.57L16.29 22L18.43 19.86L19.86 21.29L21.29 19.86L19.86 18.43L22 16.29L20.57 14.86Z',
@@ -11,9 +11,9 @@ const paths = [
 ];
 const local = [];
 function LargeLoader() {
-    const [interpolators, setInterpolators] = react_1.useState([]);
-    const [index, setIndex] = react_1.useState(0);
-    react_1.useEffect(() => {
+    const [interpolators, setInterpolators] = (0, react_1.useState)([]);
+    const [index, setIndex] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
         if (local.length === 0) {
             for (let i = 0; i < paths.length; i++) {
                 const nextIndex = paths[i + 1] || paths[0];
@@ -41,7 +41,7 @@ function LargeLoader() {
         React.createElement("div", { className: "large-loader-circle --delay-4" }),
         React.createElement("div", { className: "large-loader-circle --delay-6" }),
         React.createElement("svg", { width: "180", viewBox: "0 0 22 22" },
-            React.createElement("g", { fill: "var(--color-accent-1)" },
+            React.createElement("g", { fill: "var(--rs-color-accent-1)" },
                 React.createElement(web_1.Spring, { reset: true, from: { t: 0 }, to: { t: 1 }, onRest: onRestHandler }, ({ t }) => React.createElement(web_1.animated.path, { className: "c-image-blank-slate", d: interpolators.length ? t.to(interpolators[index]) : paths[0] })))),
         React.createElement("div", { className: "u-marg-top" },
             React.createElement(Text_1.default, null, "Loading"))));

package/dist/src/components/generic/loader/LargeLoader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LargeLoader.js","sourceRoot":"/","sources":["src/components/generic/loader/LargeLoader.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,iCAA4C;AAC5C,2CAAqD;AACrD,~~kCAA2B~~;~~AAE3B~~,MAAM,KAAK,GAAG;IACV,sIAAsI;IACtI,uRAAuR;IACvR,sGAAsG;CACzG,CAAC;AAEF,MAAM,KAAK,GAAU,EAAE,CAAC;AAExB,SAAwB,WAAW;IAC/B,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,gBAAQ,~~CAAC~~,EAAE,CAAC,CAAC;IACvD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,gBAAQ,~~CAAC~~,CAAC,CAAC,CAAC;IAEtC,iBAAS,~~CAAC~~,GAAG,EAAE;QACX,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;YACpB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBACnC,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC;gBAE3C,IAAI,OAAO,IAAI,KAAK,WAAW,EAAE;oBAC7B,2EAA2E;oBAE3E,gBAAgB,CAAC,KAAK,CAAC,CAAC;iBAC3B;aACJ;SACJ;aAAM;YACH,gBAAgB,CAAC,KAAK,CAAC,CAAC;SAC3B;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,MAAM,GAAG,GAAG,EAAE;QAChB,UAAU,CAAC,GAAG,EAAE;YACZ,QAAQ,CAAC,KAAK,GAAG,CAAC,IAAI,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;QAChE,CAAC,EAAE,GAAG,CAAC,CAAC;IACZ,CAAC,CAAC;IACF,MAAM,aAAa,GAAG,GAAG,EAAE;QACvB,OAAO,MAAM,EAAE,CAAC;IACpB,CAAC,CAAC;IACF,OAAO,CACH,6BAAK,SAAS,EAAC,cAAc;QACzB,6BAAK,SAAS,EAAC,qBAAqB,GAAG;QACvC,6BAAK,SAAS,EAAC,+BAA+B,GAAG;QACjD,6BAAK,SAAS,EAAC,+BAA+B,GAAG;QACjD,6BAAK,SAAS,EAAC,+BAA+B,GAAG;QAEjD,6BAAK,KAAK,EAAC,KAAK,EAAC,OAAO,EAAC,WAAW;YAChC,2BAAG,IAAI,EAAC,~~uBAAuB~~;~~gBAC3B~~,oBAAC,YAAM,IAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,aAAa,IACnE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,oBAAC,cAAQ,CAAC,IAAI,IAAC,SAAS,EAAC,qBAAqB,EAAC,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAI,CACzH,CACT,CACF;QACN,6BAAK,SAAS,EAAC,YAAY;YACvB,oBAAC,cAAI,kBAAe,CAClB,CACJ,CACT,CAAC;AACN,CAAC;AA/CD,8BA+CC","sourcesContent":["import * as React from 'react';\nimport { useState, useEffect } from 'react';\nimport { Spring, animated } from '@react-spring/web';\nimport Text from '~~../~~Text';\n\nconst paths = [\n 'M21 16V14L13 9V3.5C13 2.67 12.33 2 11.5 2C10.67 2 10 2.67 10 3.5V9L2 14V16L10 13.5V19L8 20.5V22L11.5 21L15 22V20.5L13 19V13.5L21 16Z',\n 'M20.57 14.86L22 13.43L20.57 12L17 15.57L8.43 7L12 3.43L10.57 2L9.14 3.43L7.71 2L5.57 4.14L4.14 2.71L2.71 4.14L4.14 5.57L2 7.71L3.43 9.14L2 10.57L3.43 12L7 8.43L15.57 17L12 20.57L13.43 22L14.86 20.57L16.29 22L18.43 19.86L19.86 21.29L21.29 19.86L19.86 18.43L22 16.29L20.57 14.86Z',\n 'M10 15.27L16.18 19L14.54 11.97L20 7.24L12.81 6.63L10 0L7.19 6.63L0 7.24L5.46 11.97L3.82 19L10 15.27Z',\n];\n\nconst local: any[] = [];\n\nexport default function LargeLoader() {\n const [interpolators, setInterpolators] = useState([]);\n const [index, setIndex] = useState(0);\n\n useEffect(() => {\n if (local.length === 0) {\n for (let i = 0; i < paths.length; i++) {\n const nextIndex = paths[i + 1] \|\| paths[0];\n\n if (typeof jest === 'undefined') {\n // local.push(interpolate(paths[i], nextIndex, { maxSegmentLength: 0.1 }));\n\n setInterpolators(local);\n }\n }\n } else {\n setInterpolators(local);\n }\n }, []);\n\n const goNext = () => {\n setTimeout(() => {\n setIndex(index + 1 >= interpolators.length ? 0 : index + 1);\n }, 300);\n };\n const onRestHandler = () => {\n return goNext();\n };\n return (\n <div className=\"large-loader\">\n <div className=\"large-loader-circle\" />\n <div className=\"large-loader-circle --delay-2\" />\n <div className=\"large-loader-circle --delay-4\" />\n <div className=\"large-loader-circle --delay-6\" />\n\n <svg width=\"180\" viewBox=\"0 0 22 22\">\n <g fill=\"var(--color-accent-1)\">\n <Spring reset={true} from={{ t: 0 }} to={{ t: 1 }} onRest={onRestHandler}>\n {({ t }) => <animated.path className=\"c-image-blank-slate\" d={interpolators.length ? t.to(interpolators[index]) : paths[0]} />}\n </Spring>\n </g>\n </svg>\n <div className=\"u-marg-top\">\n <Text>Loading</Text>\n </div>\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"LargeLoader.js","sourceRoot":"/","sources":["src/components/generic/loader/LargeLoader.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,iCAA4C;AAC5C,2CAAqD;AACrD,kDAA2C;AAE3C,MAAM,KAAK,GAAG;IACV,sIAAsI;IACtI,uRAAuR;IACvR,sGAAsG;CACzG,CAAC;AAEF,MAAM,KAAK,GAAU,EAAE,CAAC;AAExB,SAAwB,WAAW;IAC/B,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAAC,EAAE,CAAC,CAAC;IACvD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,CAAC,CAAC;IAEtC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;YACpB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBACnC,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC;gBAE3C,IAAI,OAAO,IAAI,KAAK,WAAW,EAAE;oBAC7B,2EAA2E;oBAE3E,gBAAgB,CAAC,KAAK,CAAC,CAAC;iBAC3B;aACJ;SACJ;aAAM;YACH,gBAAgB,CAAC,KAAK,CAAC,CAAC;SAC3B;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,MAAM,GAAG,GAAG,EAAE;QAChB,UAAU,CAAC,GAAG,EAAE;YACZ,QAAQ,CAAC,KAAK,GAAG,CAAC,IAAI,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;QAChE,CAAC,EAAE,GAAG,CAAC,CAAC;IACZ,CAAC,CAAC;IACF,MAAM,aAAa,GAAG,GAAG,EAAE;QACvB,OAAO,MAAM,EAAE,CAAC;IACpB,CAAC,CAAC;IACF,OAAO,CACH,6BAAK,SAAS,EAAC,cAAc;QACzB,6BAAK,SAAS,EAAC,qBAAqB,GAAG;QACvC,6BAAK,SAAS,EAAC,+BAA+B,GAAG;QACjD,6BAAK,SAAS,EAAC,+BAA+B,GAAG;QACjD,6BAAK,SAAS,EAAC,+BAA+B,GAAG;QAEjD,6BAAK,KAAK,EAAC,KAAK,EAAC,OAAO,EAAC,WAAW;YAChC,2BAAG,IAAI,EAAC,0BAA0B;gBAC9B,oBAAC,YAAM,IAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,aAAa,IACnE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,oBAAC,cAAQ,CAAC,IAAI,IAAC,SAAS,EAAC,qBAAqB,EAAC,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAI,CACzH,CACT,CACF;QACN,6BAAK,SAAS,EAAC,YAAY;YACvB,oBAAC,cAAI,kBAAe,CAClB,CACJ,CACT,CAAC;AACN,CAAC;AA/CD,8BA+CC","sourcesContent":["import * as React from 'react';\nimport { useState, useEffect } from 'react';\nimport { Spring, animated } from '@react-spring/web';\nimport Text from 'components/generic/Text';\n\nconst paths = [\n 'M21 16V14L13 9V3.5C13 2.67 12.33 2 11.5 2C10.67 2 10 2.67 10 3.5V9L2 14V16L10 13.5V19L8 20.5V22L11.5 21L15 22V20.5L13 19V13.5L21 16Z',\n 'M20.57 14.86L22 13.43L20.57 12L17 15.57L8.43 7L12 3.43L10.57 2L9.14 3.43L7.71 2L5.57 4.14L4.14 2.71L2.71 4.14L4.14 5.57L2 7.71L3.43 9.14L2 10.57L3.43 12L7 8.43L15.57 17L12 20.57L13.43 22L14.86 20.57L16.29 22L18.43 19.86L19.86 21.29L21.29 19.86L19.86 18.43L22 16.29L20.57 14.86Z',\n 'M10 15.27L16.18 19L14.54 11.97L20 7.24L12.81 6.63L10 0L7.19 6.63L0 7.24L5.46 11.97L3.82 19L10 15.27Z',\n];\n\nconst local: any[] = [];\n\nexport default function LargeLoader() {\n const [interpolators, setInterpolators] = useState([]);\n const [index, setIndex] = useState(0);\n\n useEffect(() => {\n if (local.length === 0) {\n for (let i = 0; i < paths.length; i++) {\n const nextIndex = paths[i + 1] \|\| paths[0];\n\n if (typeof jest === 'undefined') {\n // local.push(interpolate(paths[i], nextIndex, { maxSegmentLength: 0.1 }));\n\n setInterpolators(local);\n }\n }\n } else {\n setInterpolators(local);\n }\n }, []);\n\n const goNext = () => {\n setTimeout(() => {\n setIndex(index + 1 >= interpolators.length ? 0 : index + 1);\n }, 300);\n };\n const onRestHandler = () => {\n return goNext();\n };\n return (\n <div className=\"large-loader\">\n <div className=\"large-loader-circle\" />\n <div className=\"large-loader-circle --delay-2\" />\n <div className=\"large-loader-circle --delay-4\" />\n <div className=\"large-loader-circle --delay-6\" />\n\n <svg width=\"180\" viewBox=\"0 0 22 22\">\n <g fill=\"var(--rs-color-accent-1)\">\n <Spring reset={true} from={{ t: 0 }} to={{ t: 1 }} onRest={onRestHandler}>\n {({ t }) => <animated.path className=\"c-image-blank-slate\" d={interpolators.length ? t.to(interpolators[index]) : paths[0]} />}\n </Spring>\n </g>\n </svg>\n <div className=\"u-marg-top\">\n <Text>Loading</Text>\n </div>\n </div>\n );\n}\n"]}

package/dist/src/components/generic/loader/SmallSpinner.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { IconProps } from '../Icon';
+import { IconProps } from 'components/generic/Icon/Icon';
 export default function SmallSpinner(props: Partial<IconProps>): JSX.Element;

package/dist/src/components/generic/loader/SmallSpinner.js CHANGED Viewed

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = require("react");
-const Icon_1 = require("../Icon");
-const Color_1 = require("../../../util/Color");
+const Icon_1 = require("components/generic/Icon/Icon");
+const Color_1 = require("util/Color");
 function SmallSpinner(props) {
     return (React.createElement("div", { className: "u-inline-flex a-spin" },
         React.createElement(Icon_1.default, Object.assign({ color: Color_1.Color.Accent, icon: Icon_1.IconType.Spinner }, props))));

package/dist/src/components/generic/loader/SmallSpinner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SmallSpinner.js","sourceRoot":"/","sources":["src/components/generic/loader/SmallSpinner.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,~~kCAAoD~~;~~AACpD,+CAA4C~~;~~AAE5C~~,SAAwB,YAAY,CAAC,KAAyB;IAC1D,OAAO,CACH,6BAAK,SAAS,EAAC,sBAAsB;QACjC,oBAAC,cAAI,kBAAC,KAAK,EAAE,aAAK,CAAC,MAAM,EAAE,IAAI,EAAE,eAAQ,CAAC,OAAO,IAAM,KAAK,EAAI,CAC9D,CACT,CAAC;AACN,CAAC;AAND,+BAMC","sourcesContent":["import * as React from 'react';\nimport Icon, { IconType, IconProps } from '~~../~~Icon';\nimport { Color } from '~~../../../~~util/Color';\n\nexport default function SmallSpinner(props: Partial<IconProps>) {\n return (\n <div className=\"u-inline-flex a-spin\">\n <Icon color={Color.Accent} icon={IconType.Spinner} {...props} />\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"SmallSpinner.js","sourceRoot":"/","sources":["src/components/generic/loader/SmallSpinner.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,uDAAyE;AACzE,sCAAmC;AAEnC,SAAwB,YAAY,CAAC,KAAyB;IAC1D,OAAO,CACH,6BAAK,SAAS,EAAC,sBAAsB;QACjC,oBAAC,cAAI,kBAAC,KAAK,EAAE,aAAK,CAAC,MAAM,EAAE,IAAI,EAAE,eAAQ,CAAC,OAAO,IAAM,KAAK,EAAI,CAC9D,CACT,CAAC;AACN,CAAC;AAND,+BAMC","sourcesContent":["import * as React from 'react';\nimport Icon, { IconType, IconProps } from 'components/generic/Icon/Icon';\nimport { Color } from 'util/Color';\n\nexport default function SmallSpinner(props: Partial<IconProps>) {\n return (\n <div className=\"u-inline-flex a-spin\">\n <Icon color={Color.Accent} icon={IconType.Spinner} {...props} />\n </div>\n );\n}\n"]}

package/dist/src/components/generic/map/HotelLocationMap.js CHANGED Viewed

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = require("react");
-const BEMapWidget_1 = require("../../summary/BEMapWidget");
+const BEMapWidget_1 = require("components/summary/BEMapWidget");
 const hooks_1 = require("@frontend/hooks");
 function HotelLocationMap() {
-    const { hotel } = hooks_1.useCurrentHotel();
+    const { hotel } = (0, hooks_1.useCurrentHotel)();
     return React.createElement(React.Fragment, null, hotel.latitude && hotel.longitude && React.createElement(BEMapWidget_1.default, { mapLatLng: { lat: hotel.latitude, lng: hotel.longitude } }));
 }
 exports.default = HotelLocationMap;

package/dist/src/components/generic/map/HotelLocationMap.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HotelLocationMap.js","sourceRoot":"/","sources":["src/components/generic/map/HotelLocationMap.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,~~2DAAoD~~;~~AACpD~~,2CAAkD;AAElD,SAAwB,gBAAgB;IACpC,MAAM,EAAE,KAAK,EAAE,GAAG,uBAAe,~~EAAE~~,CAAC;IAEpC,OAAO,0CAAG,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,SAAS,IAAI,oBAAC,qBAAW,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,KAAK,CAAC,QAAQ,EAAE,GAAG,EAAE,KAAK,CAAC,SAAS,EAAE,GAAI,CAAI,CAAC;AACjI,CAAC;AAJD,mCAIC","sourcesContent":["import * as React from 'react';\nimport BEMapWidget from '~~../../~~summary/BEMapWidget';\nimport { useCurrentHotel } from '@frontend/hooks';\n\nexport default function HotelLocationMap() {\n const { hotel } = useCurrentHotel();\n\n return <>{hotel.latitude && hotel.longitude && <BEMapWidget mapLatLng={{ lat: hotel.latitude, lng: hotel.longitude }} />}</>;\n}\n"]}
1	+ {"version":3,"file":"HotelLocationMap.js","sourceRoot":"/","sources":["src/components/generic/map/HotelLocationMap.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,gEAAyD;AACzD,2CAAkD;AAElD,SAAwB,gBAAgB;IACpC,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,uBAAe,GAAE,CAAC;IAEpC,OAAO,0CAAG,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,SAAS,IAAI,oBAAC,qBAAW,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,KAAK,CAAC,QAAQ,EAAE,GAAG,EAAE,KAAK,CAAC,SAAS,EAAE,GAAI,CAAI,CAAC;AACjI,CAAC;AAJD,mCAIC","sourcesContent":["import * as React from 'react';\nimport BEMapWidget from 'components/summary/BEMapWidget';\nimport { useCurrentHotel } from '@frontend/hooks';\n\nexport default function HotelLocationMap() {\n const { hotel } = useCurrentHotel();\n\n return <>{hotel.latitude && hotel.longitude && <BEMapWidget mapLatLng={{ lat: hotel.latitude, lng: hotel.longitude }} />}</>;\n}\n"]}

package/dist/src/components/generic/modal/ConfirmationModal.js CHANGED Viewed

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = require("react");
-const SimpleModal_1 = require("./SimpleModal");
-const BEButton_1 = require("../BEButton");
-const Text_1 = require("../Text");
+const SimpleModal_1 = require("components/generic/modal/SimpleModal");
+const BEButton_1 = require("components/generic/BEButton");
+const Text_1 = require("components/generic/Text");
 function ConfirmationModal(props) {
     const cancelOnClickHandler = () => {
         if (props.onClose) {

package/dist/src/components/generic/modal/ConfirmationModal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ConfirmationModal.js","sourceRoot":"/","sources":["src/components/generic/modal/ConfirmationModal.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B~~,+CAA6D~~;~~AAC7D~~,~~0CAAmC~~;~~AACnC~~,~~kCAA2B~~;~~AAU3B~~,SAAwB,iBAAiB,CAAC,KAA6B;IACnE,MAAM,oBAAoB,GAAG,GAAG,EAAE;QAC9B,IAAI,KAAK,CAAC,OAAO,EAAE;YACf,KAAK,CAAC,OAAO,EAAE,CAAC;SACnB;IACL,CAAC,CAAC;IACF,MAAM,mBAAmB,GAAG,GAAG,EAAE;QAC7B,IAAI,KAAK,CAAC,SAAS,EAAE;YACjB,KAAK,CAAC,SAAS,EAAE,CAAC;SACrB;IACL,CAAC,CAAC;IACF,MAAM,MAAM,GAAG,CACX,6BAAK,SAAS,EAAC,QAAQ;QACnB,oBAAC,kBAAQ,IAAC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,oBAAoB,aAE1C;QACX,oBAAC,kBAAQ,IAAC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,mBAAmB,UAExD,CACT,CACT,CAAC;IAEF,OAAO,CACH,oBAAC,qBAAW,IACR,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,WAAW,EAAE,IAAI,EACjB,aAAa,EAAE,6BAAK,SAAS,EAAC,wBAAwB,IAAE,MAAM,CAAO,EACrE,YAAY,EAAE,MAAM,EACpB,IAAI,EAAE,6BAAe,CAAC,KAAK,EAC3B,KAAK,EAAC,SAAS;QAEf,6BAAK,SAAS,EAAC,wBAAwB;YACnC,6BAAK,SAAS,EAAC,eAAe;gBAC1B,oBAAC,cAAI,QAAE,KAAK,CAAC,OAAO,CAAQ,CAC1B,CACJ,CACI,CACjB,CAAC;AACN,CAAC;AAtCD,oCAsCC","sourcesContent":["import * as React from 'react';\nimport SimpleModal, { SimpleModalSize } from './SimpleModal';\nimport BEButton from '~~../~~BEButton';\nimport Text from '~~../~~Text';\n\ninterface ConfirmationModalProps {\n open: boolean;\n onClose?: () => void;\n onConfirm: () => void;\n\n message: string;\n}\n\nexport default function ConfirmationModal(props: ConfirmationModalProps) {\n const cancelOnClickHandler = () => {\n if (props.onClose) {\n props.onClose();\n }\n };\n const onConfirmationClick = () => {\n if (props.onConfirm) {\n props.onConfirm();\n }\n };\n const footer = (\n <div className=\"u-flex\">\n <BEButton isText={true} onClick={cancelOnClickHandler}>\n Cancel\n </BEButton>\n <BEButton filled={true} primary={true} onClick={onConfirmationClick}>\n Yes\n </BEButton>\n </div>\n );\n\n return (\n <SimpleModal\n open={props.open}\n alignCenter={true}\n desktopFooter={<div className=\"u-marg-heavy u-marg@m-\">{footer}</div>}\n mobileFooter={footer}\n size={SimpleModalSize.Small}\n title=\"Confirm\"\n >\n <div className=\"u-marg-heavy u-marg@m-\">\n <div className=\"u-marg-bottom\">\n <Text>{props.message}</Text>\n </div>\n </div>\n </SimpleModal>\n );\n}\n"]}
1	+ {"version":3,"file":"ConfirmationModal.js","sourceRoot":"/","sources":["src/components/generic/modal/ConfirmationModal.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,sEAAoF;AACpF,0DAAmD;AACnD,kDAA2C;AAU3C,SAAwB,iBAAiB,CAAC,KAA6B;IACnE,MAAM,oBAAoB,GAAG,GAAG,EAAE;QAC9B,IAAI,KAAK,CAAC,OAAO,EAAE;YACf,KAAK,CAAC,OAAO,EAAE,CAAC;SACnB;IACL,CAAC,CAAC;IACF,MAAM,mBAAmB,GAAG,GAAG,EAAE;QAC7B,IAAI,KAAK,CAAC,SAAS,EAAE;YACjB,KAAK,CAAC,SAAS,EAAE,CAAC;SACrB;IACL,CAAC,CAAC;IACF,MAAM,MAAM,GAAG,CACX,6BAAK,SAAS,EAAC,QAAQ;QACnB,oBAAC,kBAAQ,IAAC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,oBAAoB,aAE1C;QACX,oBAAC,kBAAQ,IAAC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,mBAAmB,UAExD,CACT,CACT,CAAC;IAEF,OAAO,CACH,oBAAC,qBAAW,IACR,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,WAAW,EAAE,IAAI,EACjB,aAAa,EAAE,6BAAK,SAAS,EAAC,wBAAwB,IAAE,MAAM,CAAO,EACrE,YAAY,EAAE,MAAM,EACpB,IAAI,EAAE,6BAAe,CAAC,KAAK,EAC3B,KAAK,EAAC,SAAS;QAEf,6BAAK,SAAS,EAAC,wBAAwB;YACnC,6BAAK,SAAS,EAAC,eAAe;gBAC1B,oBAAC,cAAI,QAAE,KAAK,CAAC,OAAO,CAAQ,CAC1B,CACJ,CACI,CACjB,CAAC;AACN,CAAC;AAtCD,oCAsCC","sourcesContent":["import * as React from 'react';\nimport SimpleModal, { SimpleModalSize } from 'components/generic/modal/SimpleModal';\nimport BEButton from 'components/generic/BEButton';\nimport Text from 'components/generic/Text';\n\ninterface ConfirmationModalProps {\n open: boolean;\n onClose?: () => void;\n onConfirm: () => void;\n\n message: string;\n}\n\nexport default function ConfirmationModal(props: ConfirmationModalProps) {\n const cancelOnClickHandler = () => {\n if (props.onClose) {\n props.onClose();\n }\n };\n const onConfirmationClick = () => {\n if (props.onConfirm) {\n props.onConfirm();\n }\n };\n const footer = (\n <div className=\"u-flex\">\n <BEButton isText={true} onClick={cancelOnClickHandler}>\n Cancel\n </BEButton>\n <BEButton filled={true} primary={true} onClick={onConfirmationClick}>\n Yes\n </BEButton>\n </div>\n );\n\n return (\n <SimpleModal\n open={props.open}\n alignCenter={true}\n desktopFooter={<div className=\"u-marg-heavy u-marg@m-\">{footer}</div>}\n mobileFooter={footer}\n size={SimpleModalSize.Small}\n title=\"Confirm\"\n >\n <div className=\"u-marg-heavy u-marg@m-\">\n <div className=\"u-marg-bottom\">\n <Text>{props.message}</Text>\n </div>\n </div>\n </SimpleModal>\n );\n}\n"]}

package/dist/src/components/generic/modal/ErrorModal.js CHANGED Viewed

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = require("react");
-const SimpleModal_1 = require("./SimpleModal");
-const BEButton_1 = require("../BEButton");
-const Icon_1 = require("../Icon");
+const SimpleModal_1 = require("components/generic/modal/SimpleModal");
+const BEButton_1 = require("components/generic/BEButton");
+const Icon_1 = require("components/generic/Icon/Icon");
 function ErrorModal(props) {
     var _a;
     return (React.createElement(SimpleModal_1.default, { open: props.open, onClose: props.onClose, size: SimpleModal_1.SimpleModalSize.Small, title: (_a = props.title) !== null && _a !== void 0 ? _a : 'Unexpected error occured', alignCenter: true },

package/dist/src/components/generic/modal/ErrorModal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ErrorModal.js","sourceRoot":"/","sources":["src/components/generic/modal/ErrorModal.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B~~,+CAA6D~~;~~AAC7D~~,~~0CAAmC~~;~~AACnC~~,~~kCAAmC~~;~~AAUnC~~,SAAwB,UAAU,CAAC,KAAsB;;IACrD,OAAO,CACH,oBAAC,qBAAW,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,IAAI,EAAE,6BAAe,CAAC,KAAK,EAAE,KAAK,~~QAAE~~,KAAK,CAAC,KAAK,mCAAI,0BAA0B,EAAE,WAAW,EAAE,IAAI;QACnJ,6BAAK,SAAS,EAAC,wBAAwB;YACnC,6BAAK,SAAS,EAAC,eAAe,IAAE,KAAK,CAAC,QAAQ,CAAO;YACrD,oBAAC,kBAAQ,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,iBAAiB,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,IACvG,KAAK,CAAC,eAAe,IAAI,OAAO,CAC1B,CACT,CACI,CACjB,CAAC;AACN,CAAC;AAXD,6BAWC","sourcesContent":["import * as React from 'react';\nimport SimpleModal, { SimpleModalSize } from './SimpleModal';\nimport BEButton from '~~../~~BEButton';\nimport { IconType } from '~~../~~Icon';\n\ninterface ErrorModalProps {\n open: boolean;\n onClose: () => void;\n children: React.ReactElement;\n title?: string;\n closeButtonText?: string;\n}\n\nexport default function ErrorModal(props: ErrorModalProps) {\n return (\n <SimpleModal open={props.open} onClose={props.onClose} size={SimpleModalSize.Small} title={props.title ?? 'Unexpected error occured'} alignCenter={true}>\n <div className=\"u-marg-heavy u-marg@m-\">\n <div className=\"u-marg-bottom\">{props.children}</div>\n <BEButton icon={IconType.Close} primary={true} filled={true} stopIconAnimation={true} onClick={props.onClose}>\n {props.closeButtonText \|\| 'Close'}\n </BEButton>\n </div>\n </SimpleModal>\n );\n}\n"]}
1	+ {"version":3,"file":"ErrorModal.js","sourceRoot":"/","sources":["src/components/generic/modal/ErrorModal.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,sEAAoF;AACpF,0DAAmD;AACnD,uDAAwD;AAUxD,SAAwB,UAAU,CAAC,KAAsB;;IACrD,OAAO,CACH,oBAAC,qBAAW,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,IAAI,EAAE,6BAAe,CAAC,KAAK,EAAE,KAAK,EAAE,MAAA,KAAK,CAAC,KAAK,mCAAI,0BAA0B,EAAE,WAAW,EAAE,IAAI;QACnJ,6BAAK,SAAS,EAAC,wBAAwB;YACnC,6BAAK,SAAS,EAAC,eAAe,IAAE,KAAK,CAAC,QAAQ,CAAO;YACrD,oBAAC,kBAAQ,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,iBAAiB,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,IACvG,KAAK,CAAC,eAAe,IAAI,OAAO,CAC1B,CACT,CACI,CACjB,CAAC;AACN,CAAC;AAXD,6BAWC","sourcesContent":["import * as React from 'react';\nimport SimpleModal, { SimpleModalSize } from 'components/generic/modal/SimpleModal';\nimport BEButton from 'components/generic/BEButton';\nimport { IconType } from 'components/generic/Icon/Icon';\n\ninterface ErrorModalProps {\n open: boolean;\n onClose: () => void;\n children: React.ReactElement;\n title?: string;\n closeButtonText?: string;\n}\n\nexport default function ErrorModal(props: ErrorModalProps) {\n return (\n <SimpleModal open={props.open} onClose={props.onClose} size={SimpleModalSize.Small} title={props.title ?? 'Unexpected error occured'} alignCenter={true}>\n <div className=\"u-marg-heavy u-marg@m-\">\n <div className=\"u-marg-bottom\">{props.children}</div>\n <BEButton icon={IconType.Close} primary={true} filled={true} stopIconAnimation={true} onClick={props.onClose}>\n {props.closeButtonText \|\| 'Close'}\n </BEButton>\n </div>\n </SimpleModal>\n );\n}\n"]}

package/dist/src/components/generic/modal/SigninModal/AuthenticatedUserModal.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+type AuthenticatedUserModalProps = {
+    open: boolean;
+    anchorEl?: HTMLElement;
+    containerEl?: HTMLElement;
+    onClose?: () => void;
+};
+export declare const AuthenticatedUserModal: (props: AuthenticatedUserModalProps) => JSX.Element;
+export {};

package/dist/src/components/generic/modal/SigninModal/AuthenticatedUserModal.js ADDED Viewed

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AuthenticatedUserModal = void 0;
+const React = require("react");
+const react_1 = require("react");
+const Overlay_1 = require("components/generic/Overlay/Overlay");
+const contexts_1 = require("@frontend/contexts");
+const ScreenSize_1 = require("util/ScreenSize");
+const Icon_1 = require("components/generic/Icon/Icon");
+const Color_1 = require("util/Color");
+const Text_1 = require("components/generic/Text");
+const react_router_dom_1 = require("react-router-dom");
+const LineBreak_1 = require("components/generic/LineBreak");
+const AuthenticatedUserModal_module_scss_1 = require("./AuthenticatedUserModal.module.scss");
+const AccountRoutes_1 = require("pages/account/AccountRoutes");
+const AuthenticatedUserModal = (props) => {
+    const { open, anchorEl, containerEl } = props;
+    const { logout } = (0, react_1.useContext)(contexts_1.AuthenticationContext);
+    const { screenSize } = (0, react_1.useContext)(contexts_1.BookingEngineContext);
+    const shouldBreakpoint = screenSize <= ScreenSize_1.default.Large;
+    const onClose = () => {
+        var _a;
+        (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+    };
+    const onLogoutClick = () => {
+        onClose();
+        logout();
+    };
+    const items = [
+        {
+            icon: Icon_1.IconType.Bed,
+            text: 'Your Reservations',
+            link: AccountRoutes_1.AccountRoutes.Reservations.path,
+        },
+        {
+            icon: Icon_1.IconType.Person,
+            text: 'Profile Information',
+            link: AccountRoutes_1.AccountRoutes.ProfileDetails.path,
+        },
+        {
+            icon: Icon_1.IconType.CreditCard,
+            text: 'Payment Information',
+            link: AccountRoutes_1.AccountRoutes.CardDetails.path,
+        },
+        {
+            icon: Icon_1.IconType.Hotel,
+            text: 'Hotel Information',
+            link: '/hotel-info/',
+        },
+        {
+            icon: Icon_1.IconType.Info,
+            text: 'Need Help?',
+            link: AccountRoutes_1.AccountRoutes.Help.path,
+        },
+    ];
+    return (open && (React.createElement(Overlay_1.Overlay, { usePortal: true, followElement: shouldBreakpoint ? null : anchorEl, placement: "auto-end", container: containerEl, open: open, onClose: onClose, strategy: "fixed", className: AuthenticatedUserModal_module_scss_1.default['logged-in-overlay'] },
+        React.createElement("div", { className: AuthenticatedUserModal_module_scss_1.default['list-items'] },
+            items.map((item, index) => {
+                return (React.createElement(react_router_dom_1.NavLink, { isActive: (item, location) => {
+                        return item && item.url && location.pathname.toLowerCase().includes(item.url.toLowerCase());
+                    }, activeClassName: AuthenticatedUserModal_module_scss_1.default['--selected'], to: item.link, className: AuthenticatedUserModal_module_scss_1.default['list-item'], key: index, onClick: onClose },
+                    React.createElement("div", { className: AuthenticatedUserModal_module_scss_1.default['list-item--icon'] },
+                        React.createElement(Icon_1.default, { icon: item.icon, color: Color_1.Color.Grey, size: '24px' })),
+                    React.createElement(Text_1.default, null, item.text)));
+            }),
+            React.createElement(LineBreak_1.default, null),
+            React.createElement("div", { className: AuthenticatedUserModal_module_scss_1.default['list-item'], onClick: onLogoutClick },
+                React.createElement("div", { className: AuthenticatedUserModal_module_scss_1.default['list-item--icon'] },
+                    React.createElement(Icon_1.default, { icon: Icon_1.IconType.LogOut, color: Color_1.Color.Alert, size: '24px' })),
+                React.createElement(Text_1.default, { color: Color_1.Color.Alert }, "Log Out"))))));
+};
+exports.AuthenticatedUserModal = AuthenticatedUserModal;
+//# sourceMappingURL=AuthenticatedUserModal.js.map

package/dist/src/components/generic/modal/SigninModal/AuthenticatedUserModal.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"AuthenticatedUserModal.js","sourceRoot":"/","sources":["src/components/generic/modal/SigninModal/AuthenticatedUserModal.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAAmC;AACnC,gEAA6D;AAC7D,iDAAiF;AACjF,gDAAyC;AAEzC,uDAA8D;AAC9D,sCAAmC;AACnC,kDAA2C;AAC3C,uDAA2C;AAC3C,4DAAqD;AAErD,6FAA0D;AAC1D,+DAA4D;AAerD,MAAM,sBAAsB,GAAG,CAAC,KAAkC,EAAE,EAAE;IACzE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IAE9C,MAAM,EAAE,MAAM,EAAE,GAAG,IAAA,kBAAU,EAAC,gCAAqB,CAAC,CAAC;IAErD,MAAM,EAAE,UAAU,EAAE,GAAG,IAAA,kBAAU,EAAC,+BAAoB,CAAC,CAAC;IACxD,MAAM,gBAAgB,GAAG,UAAU,IAAI,oBAAU,CAAC,KAAK,CAAC;IAExD,MAAM,OAAO,GAAG,GAAG,EAAE;;QACjB,MAAA,KAAK,CAAC,OAAO,qDAAI,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;QACvB,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,CAAC;IACb,CAAC,CAAC;IAEF,MAAM,KAAK,GAAmB;QAC1B;YACI,IAAI,EAAE,eAAQ,CAAC,GAAG;YAClB,IAAI,EAAE,mBAAmB;YACzB,IAAI,EAAE,6BAAa,CAAC,YAAY,CAAC,IAAI;SACxC;QACD;YACI,IAAI,EAAE,eAAQ,CAAC,MAAM;YACrB,IAAI,EAAE,qBAAqB;YAC3B,IAAI,EAAE,6BAAa,CAAC,cAAc,CAAC,IAAI;SAC1C;QACD;YACI,IAAI,EAAE,eAAQ,CAAC,UAAU;YACzB,IAAI,EAAE,qBAAqB;YAC3B,IAAI,EAAE,6BAAa,CAAC,WAAW,CAAC,IAAI;SACvC;QACD;YACI,IAAI,EAAE,eAAQ,CAAC,KAAK;YACpB,IAAI,EAAE,mBAAmB;YACzB,IAAI,EAAE,cAAc;SACvB;QACD;YACI,IAAI,EAAE,eAAQ,CAAC,IAAI;YACnB,IAAI,EAAE,YAAY;YAClB,IAAI,EAAE,6BAAa,CAAC,IAAI,CAAC,IAAI;SAChC;KACJ,CAAC;IAEF,OAAO,CACH,IAAI,IAAI,CACJ,oBAAC,iBAAO,IACJ,SAAS,EAAE,IAAI,EACf,aAAa,EAAE,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,EACjD,SAAS,EAAC,UAAU,EACpB,SAAS,EAAE,WAAW,EACtB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAC,OAAO,EAChB,SAAS,EAAE,4CAAM,CAAC,mBAAmB,CAAC;QAEtC,6BAAK,SAAS,EAAE,4CAAM,CAAC,YAAY,CAAC;YAC/B,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBACvB,OAAO,CACH,oBAAC,0BAAO,IACJ,QAAQ,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE;wBACzB,OAAO,IAAI,IAAI,IAAI,CAAC,GAAG,IAAI,QAAQ,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC,CAAC;oBAChG,CAAC,EACD,eAAe,EAAE,4CAAM,CAAC,YAAY,CAAC,EACrC,EAAE,EAAE,IAAI,CAAC,IAAI,EACb,SAAS,EAAE,4CAAM,CAAC,WAAW,CAAC,EAC9B,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,OAAO;oBAEhB,6BAAK,SAAS,EAAE,4CAAM,CAAC,iBAAiB,CAAC;wBACrC,oBAAC,cAAI,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,aAAK,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,GAAI,CACxD;oBACN,oBAAC,cAAI,QAAE,IAAI,CAAC,IAAI,CAAQ,CAClB,CACb,CAAC;YACN,CAAC,CAAC;YACF,oBAAC,mBAAS,OAAG;YACb,6BAAK,SAAS,EAAE,4CAAM,CAAC,WAAW,CAAC,EAAE,OAAO,EAAE,aAAa;gBACvD,6BAAK,SAAS,EAAE,4CAAM,CAAC,iBAAiB,CAAC;oBACrC,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,MAAM,EAAE,KAAK,EAAE,aAAK,CAAC,KAAK,EAAE,IAAI,EAAE,MAAM,GAAI,CAC/D;gBACN,oBAAC,cAAI,IAAC,KAAK,EAAE,aAAK,CAAC,KAAK,cAAgB,CACtC,CACJ,CACA,CACb,CACJ,CAAC;AACN,CAAC,CAAC;AAxFW,QAAA,sBAAsB,0BAwFjC","sourcesContent":["import * as React from 'react';\nimport { useContext } from 'react';\nimport { Overlay } from 'components/generic/Overlay/Overlay';\nimport { AuthenticationContext, BookingEngineContext } from '@frontend/contexts';\nimport ScreenSize from 'util/ScreenSize';\n\nimport Icon, { IconType } from 'components/generic/Icon/Icon';\nimport { Color } from 'util/Color';\nimport Text from 'components/generic/Text';\nimport { NavLink } from 'react-router-dom';\nimport LineBreak from 'components/generic/LineBreak';\n\nimport styles from './AuthenticatedUserModal.module.scss';\nimport { AccountRoutes } from 'pages/account/AccountRoutes';\n\ntype AuthenticatedUserModalProps = {\n open: boolean;\n anchorEl?: HTMLElement;\n containerEl?: HTMLElement;\n onClose?: () => void;\n};\n\ntype MenuItemType = {\n icon: IconType;\n text: string;\n link: string;\n};\n\nexport const AuthenticatedUserModal = (props: AuthenticatedUserModalProps) => {\n const { open, anchorEl, containerEl } = props;\n\n const { logout } = useContext(AuthenticationContext);\n\n const { screenSize } = useContext(BookingEngineContext);\n const shouldBreakpoint = screenSize <= ScreenSize.Large;\n\n const onClose = () => {\n props.onClose?.();\n };\n\n const onLogoutClick = () => {\n onClose();\n logout();\n };\n\n const items: MenuItemType[] = [\n {\n icon: IconType.Bed,\n text: 'Your Reservations',\n link: AccountRoutes.Reservations.path,\n },\n {\n icon: IconType.Person,\n text: 'Profile Information',\n link: AccountRoutes.ProfileDetails.path,\n },\n {\n icon: IconType.CreditCard,\n text: 'Payment Information',\n link: AccountRoutes.CardDetails.path,\n },\n {\n icon: IconType.Hotel,\n text: 'Hotel Information',\n link: '/hotel-info/',\n },\n {\n icon: IconType.Info,\n text: 'Need Help?',\n link: AccountRoutes.Help.path,\n },\n ];\n\n return (\n open && (\n <Overlay\n usePortal={true}\n followElement={shouldBreakpoint ? null : anchorEl}\n placement=\"auto-end\"\n container={containerEl}\n open={open}\n onClose={onClose}\n strategy=\"fixed\"\n className={styles['logged-in-overlay']}\n >\n <div className={styles['list-items']}>\n {items.map((item, index) => {\n return (\n <NavLink\n isActive={(item, location) => {\n return item && item.url && location.pathname.toLowerCase().includes(item.url.toLowerCase());\n }}\n activeClassName={styles['--selected']}\n to={item.link}\n className={styles['list-item']}\n key={index}\n onClick={onClose}\n >\n <div className={styles['list-item--icon']}>\n <Icon icon={item.icon} color={Color.Grey} size={'24px'} />\n </div>\n <Text>{item.text}</Text>\n </NavLink>\n );\n })}\n <LineBreak />\n <div className={styles['list-item']} onClick={onLogoutClick}>\n <div className={styles['list-item--icon']}>\n <Icon icon={IconType.LogOut} color={Color.Alert} size={'24px'} />\n </div>\n <Text color={Color.Alert}>Log Out</Text>\n </div>\n </div>\n </Overlay>\n )\n );\n};\n"]}