@roomstay/frontend 1.6.1 → 2.0.0-2

package/dist/src/components/steps/room/roomDetails/roomRates/RoomRates.js

@@ -1,41 +1,40 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = require("react");
-const RoomRateRow_1 = require("./RoomRateRow");
+const RoomRateRow_1 = require("components/steps/room/roomDetails/roomRates/RoomRateRow");
 const react_1 = require("react");
-const Icon_1 = require("../../../../generic/Icon");
-const BEButton_1 = require("../../../../generic/BEButton");
-const Color_1 = require("../../../../../util/Color");
+const Icon_1 = require("components/generic/Icon/Icon");
+const BEButton_1 = require("components/generic/BEButton");
+const Color_1 = require("util/Color");
 const contexts_1 = require("@frontend/contexts");
-const RoomSortProvider_1 = require("../../../../../providers/RoomSortProvider");
+const RoomSortProvider_1 = require("providers/RoomSortProvider");
 const react_i18next_1 = require("react-i18next");
-const Translation_1 = require("../../../../../translations/Translation");
-const DataLayer_1 = require("../../../../../util/DataLayer");
-const MembersOnlyRow_1 = require("./MembersOnlyRow");
-const ScreenSize_1 = require("../../../../../util/ScreenSize");
+const Translation_1 = require("translations/Translation");
+const DataLayer_1 = require("util/DataLayer");
+const MembersOnlyRow_1 = require("components/steps/room/roomDetails/roomRates/MembersOnlyRow");
+const ScreenSize_1 = require("util/ScreenSize");
 const hooks_1 = require("@frontend/hooks");
 const contexts_2 = require("@frontend/contexts");
-const RoomRateListPromotion_1 = require("./RoomRateListPromotion/RoomRateListPromotion");
 function RoomRates(props) {
-    const { t } = react_i18next_1.useTranslation();
-    const [showingMoreOpen, setShowingMoreOpen] = react_1.useState(false);
-    const basketContext = react_1.useContext(contexts_1.BasketContext);
-    const beContext = react_1.useContext(contexts_1.BookingEngineContext);
-    const ccx = react_1.useContext(contexts_2.CompanyContext);
-    const { hotel } = hooks_1.useCurrentHotel();
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const [showingMoreOpen, setShowingMoreOpen] = (0, react_1.useState)(false);
+    const basketContext = (0, react_1.useContext)(contexts_1.BasketContext);
+    const beContext = (0, react_1.useContext)(contexts_1.BookingEngineContext);
+    const ccx = (0, react_1.useContext)(contexts_2.CompanyContext);
+    const { hotel } = (0, hooks_1.useCurrentHotel)();
     const { rates } = props;
     const numOfRatesToShowFirst = beContext.screenSize <= ScreenSize_1.default.Medium ? 2 : 3;
     const sortBy = beContext.currentRoomSort;
-    react_1.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         var _a;
         if (((_a = basketContext.selectedBasketRow) === null || _a === void 0 ? void 0 : _a.getRoom()) && basketContext.selectedBasketRow.getRoom().code === props.roomCode) {
             setShowingMoreOpen(true);
         }
     }, [basketContext.selectedBasketRow]);
-    react_1.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         DataLayer_1.default.instance.sendRoomImpressions();
     }, [showingMoreOpen]);
-    return react_1.useMemo(() => {
+    return (0, react_1.useMemo)(() => {
         var _a, _b, _c;
         const featuredRates = (_a = props.featuredRates) === null || _a === void 0 ? void 0 : _a.filter((rate) => !!rate);
         const hasFeaturedRates = !!featuredRates && featuredRates.length > 0;
@@ -64,15 +63,12 @@ function RoomRates(props) {
         };
         const maxRows = hasFeaturedRates && !showingMoreOpen ? featuredRates.length : numOfRatesToShowFirst;
         let rowsLeftToOpen = 0;
-        if (featuredRates && featuredRates.length) {
-            featuredRates.sort(RoomSortProvider_1.default.getSortByFunction(sortBy));
-            // First we add Featured Rates to the top of the list - no limits there
-            featuredRates.forEach((row) => {
-                if (row) {
-                    itemsToRender.push(renderRoomRateRow(row, true));
-                }
-            });
-        }
+        // First we add Featured Rates to the top of the list - no limits there
+        featuredRates === null || featuredRates === void 0 ? void 0 : featuredRates.forEach((row) => {
+            if (row) {
+                itemsToRender.push(renderRoomRateRow(row, true));
+            }
+        });
         // Then we do a tricky check to see if MOD intent should be displayed
         if (!hasFeaturedRates || showingMoreOpen) {
             if (!props.hideMemberOnlyRow &&
@@ -81,9 +77,6 @@ function RoomRates(props) {
                 itemsToRender.push(React.createElement(MembersOnlyRow_1.default, null));
             }
         }
-        if (basketContext.loadedPromotion) {
-            itemsToRender.push(React.createElement(RoomRateListPromotion_1.RoomRateListPromotion, { promotion: basketContext.loadedPromotion }));
-        }
         // Then we add the remaining rates to the render list - stop adding if we hit `maxRows`
         sortedRates.forEach((rate) => {
             if (itemsToRender.length < maxRows || showingMoreOpen) {
@@ -104,7 +97,7 @@ function RoomRates(props) {
                     rowsLeftToOpen,
                     " ",
                     t(Translation_1.Translation.Step.Room.RoomInfo.MoreRates))))));
-    }, [props.featuredRates, rates, beContext.currentRoomSort, showingMoreOpen, basketContext === null || basketContext === void 0 ? void 0 : basketContext.loadedPromotion]);
+    }, [props.featuredRates, rates, beContext.currentRoomSort, showingMoreOpen]);
 }
 exports.default = RoomRates;
 //# sourceMappingURL=RoomRates.js.map

package/dist/src/components/steps/room/roomDetails/roomRates/RoomRates.js.map

@@ -1 +1 @@
-{"version":3,"file":"RoomRates.js","sourceRoot":"/","sources":["src/components/steps/room/roomDetails/roomRates/RoomRates.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport RoomRateRow from './RoomRateRow';\nimport { RoomRate } from '../../../../../models/Room/RoomRate';\nimport { useState, useEffect, useContext, useMemo } from 'react';\nimport { IconType } from '../../../../generic/Icon';\nimport BEButton from '../../../../generic/BEButton';\nimport { Color } from '../../../../../util/Color';\nimport { BasketContext, BookingEngineContext } from '@frontend/contexts';\nimport RoomSortProvider from '../../../../../providers/RoomSortProvider';\n\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from '../../../../../translations/Translation';\nimport DataLayer from '../../../../../util/DataLayer';\nimport MembersOnlyRow from './MembersOnlyRow';\nimport ScreenSize from '../../../../../util/ScreenSize';\nimport { useCurrentHotel } from '@frontend/hooks';\nimport { CompanyContext } from '@frontend/contexts';\nimport { RoomRateListPromotion } from './RoomRateListPromotion/RoomRateListPromotion';\nexport interface RoomRatesProps {\n    roomCode: string;\n    rates: RoomRate[];\n\n    featuredRates?: RoomRate[];\n\n    classNames?: string;\n\n    hideMemberOnlyRow?: boolean;\n\n    // Inline Booking Widget overrides\n    getButtonLabel?: (isRoomSelectedAndEditing: boolean, isThisSelectedRow: boolean) => string;\n    onAddToBasketOverride?: (rate: RoomRate) => void;\n}\n\nexport default function RoomRates(props: RoomRatesProps) {\n    const { t } = useTranslation();\n    const [showingMoreOpen, setShowingMoreOpen] = useState(false);\n\n    const basketContext = useContext(BasketContext);\n    const beContext = useContext(BookingEngineContext);\n\n    const ccx = useContext(CompanyContext);\n\n    const { hotel } = useCurrentHotel();\n\n    const { rates } = props;\n\n    const numOfRatesToShowFirst = beContext.screenSize <= ScreenSize.Medium ? 2 : 3;\n\n    const sortBy = beContext.currentRoomSort;\n\n    useEffect(() => {\n        if (basketContext.selectedBasketRow?.getRoom() && basketContext.selectedBasketRow.getRoom().code === props.roomCode) {\n            setShowingMoreOpen(true);\n        }\n    }, [basketContext.selectedBasketRow]);\n\n    useEffect(() => {\n        DataLayer.instance.sendRoomImpressions();\n    }, [showingMoreOpen]);\n\n    return useMemo(() => {\n        const featuredRates = props.featuredRates?.filter((rate) => !!rate);\n        const hasFeaturedRates = !!featuredRates && featuredRates.length > 0;\n\n        let sortedRates: RoomRate[];\n\n        if (rates.length !== 0) {\n            sortedRates = rates.sort(RoomSortProvider.getSortByFunction(sortBy));\n        }\n\n        // Need two sorts because of MOD\n        sortedRates = rates.sort((a, b) => {\n            if (a.isMemberOnly) {\n                return -1;\n            } else if (b.isMemberOnly) {\n                return 1;\n            } else {\n                return 0;\n            }\n        });\n\n        const showMoreOnClick = () => {\n            setShowingMoreOpen(true);\n        };\n\n        const itemsToRender = [];\n\n        const renderRoomRateRow = (rate: RoomRate, isPromo = false) => {\n            return <RoomRateRow key={rate.name} rate={rate} getButtonLabel={props.getButtonLabel} onAddToBasketOverride={props.onAddToBasketOverride} isPromoRate={isPromo} />;\n        };\n\n        const maxRows = hasFeaturedRates && !showingMoreOpen ? featuredRates.length : numOfRatesToShowFirst;\n        let rowsLeftToOpen = 0;\n\n        if (featuredRates && featuredRates.length) {\n            featuredRates.sort(RoomSortProvider.getSortByFunction(sortBy));\n            // First we add Featured Rates to the top of the list - no limits there\n            featuredRates.forEach((row) => {\n                if (row) {\n                    itemsToRender.push(renderRoomRateRow(row, true));\n                }\n            });\n        }\n\n        // Then we do a tricky check to see if MOD intent should be displayed\n        if (!hasFeaturedRates || showingMoreOpen) {\n            if (\n                !props.hideMemberOnlyRow &&\n                !!hotel?.memberOnlyPromoCode &&\n                (!ccx.signedInUser || hotel?.memberOnlyPromoCode === basketContext?.selectedBasketRow?.getPromoCode())\n            ) {\n                itemsToRender.push(<MembersOnlyRow />);\n            }\n        }\n\n        if (basketContext.loadedPromotion) {\n            itemsToRender.push(<RoomRateListPromotion promotion={basketContext.loadedPromotion} />);\n        }\n\n        // Then we add the remaining rates to the render list - stop adding if we hit `maxRows`\n        sortedRates.forEach((rate: RoomRate) => {\n            if (itemsToRender.length < maxRows || showingMoreOpen) {\n                itemsToRender.push(renderRoomRateRow(rate));\n            } else {\n                rowsLeftToOpen++;\n            }\n        });\n\n        return (\n            <div className={props.classNames ?? ''}>\n                {itemsToRender.map((item: any, index: number) => {\n                    return <React.Fragment key={index}>{item}</React.Fragment>;\n                })}\n                {rowsLeftToOpen > 0 && (\n                    <div className=\"room-show-more\">\n                        <BEButton icon={IconType.ArrowDown2} iconPosition=\"right\" stopIconAnimation={true} isText={true} textColor={Color.Navy} onClick={showMoreOnClick}>\n                            {t(Translation.Step.Room.RoomInfo.Show)} {rowsLeftToOpen} {t(Translation.Step.Room.RoomInfo.MoreRates)}\n                        </BEButton>\n                    </div>\n                )}\n            </div>\n        );\n    }, [props.featuredRates, rates, beContext.currentRoomSort, showingMoreOpen, basketContext?.loadedPromotion]);\n}\n"]}
+{"version":3,"file":"RoomRates.js","sourceRoot":"/","sources":["src/components/steps/room/roomDetails/roomRates/RoomRates.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport RoomRateRow from 'components/steps/room/roomDetails/roomRates/RoomRateRow';\nimport { RoomRate } from 'models/Room/RoomRate';\nimport { useState, useEffect, useContext, useMemo } from 'react';\nimport { IconType } from 'components/generic/Icon/Icon';\nimport BEButton from 'components/generic/BEButton';\nimport { Color } from 'util/Color';\nimport { BasketContext, BookingEngineContext } from '@frontend/contexts';\nimport RoomSortProvider from 'providers/RoomSortProvider';\n\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\nimport DataLayer from 'util/DataLayer';\nimport MembersOnlyRow from 'components/steps/room/roomDetails/roomRates/MembersOnlyRow';\nimport ScreenSize from 'util/ScreenSize';\nimport { useCurrentHotel } from '@frontend/hooks';\nimport { CompanyContext } from '@frontend/contexts';\nexport interface RoomRatesProps {\n    roomCode: string;\n    rates: RoomRate[];\n\n    featuredRates?: RoomRate[];\n\n    classNames?: string;\n\n    hideMemberOnlyRow?: boolean;\n\n    // Inline Booking Widget overrides\n    getButtonLabel?: (isRoomSelectedAndEditing: boolean, isThisSelectedRow: boolean) => string;\n    onAddToBasketOverride?: (rate: RoomRate) => void;\n}\n\nexport default function RoomRates(props: RoomRatesProps) {\n    const { t } = useTranslation();\n    const [showingMoreOpen, setShowingMoreOpen] = useState(false);\n\n    const basketContext = useContext(BasketContext);\n    const beContext = useContext(BookingEngineContext);\n\n    const ccx = useContext(CompanyContext);\n\n    const { hotel } = useCurrentHotel();\n\n    const { rates } = props;\n\n    const numOfRatesToShowFirst = beContext.screenSize <= ScreenSize.Medium ? 2 : 3;\n\n    const sortBy = beContext.currentRoomSort;\n\n    useEffect(() => {\n        if (basketContext.selectedBasketRow?.getRoom() && basketContext.selectedBasketRow.getRoom().code === props.roomCode) {\n            setShowingMoreOpen(true);\n        }\n    }, [basketContext.selectedBasketRow]);\n\n    useEffect(() => {\n        DataLayer.instance.sendRoomImpressions();\n    }, [showingMoreOpen]);\n\n    return useMemo(() => {\n        const featuredRates = props.featuredRates?.filter((rate) => !!rate);\n        const hasFeaturedRates = !!featuredRates && featuredRates.length > 0;\n\n        let sortedRates: RoomRate[];\n\n        if (rates.length !== 0) {\n            sortedRates = rates.sort(RoomSortProvider.getSortByFunction(sortBy));\n        }\n\n        // Need two sorts because of MOD\n        sortedRates = rates.sort((a, b) => {\n            if (a.isMemberOnly) {\n                return -1;\n            } else if (b.isMemberOnly) {\n                return 1;\n            } else {\n                return 0;\n            }\n        });\n\n        const showMoreOnClick = () => {\n            setShowingMoreOpen(true);\n        };\n\n        const itemsToRender = [];\n\n        const renderRoomRateRow = (rate: RoomRate, isPromo = false) => {\n            return <RoomRateRow key={rate.name} rate={rate} getButtonLabel={props.getButtonLabel} onAddToBasketOverride={props.onAddToBasketOverride} isPromoRate={isPromo} />;\n        };\n\n        const maxRows = hasFeaturedRates && !showingMoreOpen ? featuredRates.length : numOfRatesToShowFirst;\n        let rowsLeftToOpen = 0;\n\n        // First we add Featured Rates to the top of the list - no limits there\n        featuredRates?.forEach((row) => {\n            if (row) {\n                itemsToRender.push(renderRoomRateRow(row, true));\n            }\n        });\n\n        // Then we do a tricky check to see if MOD intent should be displayed\n        if (!hasFeaturedRates || showingMoreOpen) {\n            if (\n                !props.hideMemberOnlyRow &&\n                !!hotel?.memberOnlyPromoCode &&\n                (!ccx.signedInUser || hotel?.memberOnlyPromoCode === basketContext?.selectedBasketRow?.getPromoCode())\n            ) {\n                itemsToRender.push(<MembersOnlyRow />);\n            }\n        }\n\n        // Then we add the remaining rates to the render list - stop adding if we hit `maxRows`\n        sortedRates.forEach((rate: RoomRate) => {\n            if (itemsToRender.length < maxRows || showingMoreOpen) {\n                itemsToRender.push(renderRoomRateRow(rate));\n            } else {\n                rowsLeftToOpen++;\n            }\n        });\n\n        return (\n            <div className={props.classNames ?? ''}>\n                {itemsToRender.map((item: any, index: number) => {\n                    return <React.Fragment key={index}>{item}</React.Fragment>;\n                })}\n                {rowsLeftToOpen > 0 && (\n                    <div className=\"room-show-more\">\n                        <BEButton icon={IconType.ArrowDown2} iconPosition=\"right\" stopIconAnimation={true} isText={true} textColor={Color.Navy} onClick={showMoreOnClick}>\n                            {t(Translation.Step.Room.RoomInfo.Show)} {rowsLeftToOpen} {t(Translation.Step.Room.RoomInfo.MoreRates)}\n                        </BEButton>\n                    </div>\n                )}\n            </div>\n        );\n    }, [props.featuredRates, rates, beContext.currentRoomSort, showingMoreOpen]);\n}\n"]}

package/dist/src/components/steps/room/roomFilter/AppliedFiltersBlock.js

@@ -2,16 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = require("react");
 const react_1 = require("react");
-const Filter_1 = require("../../../../models/Room/Filters/Filter");
-const Pill_1 = require("../../../generic/Pill");
-const Icon_1 = require("../../../generic/Icon");
-const BEButton_1 = require("../../../generic/BEButton");
-const Translation_1 = require("../../../../translations/Translation");
+const Filter_1 = require("models/Room/Filters/Filter");
+const Pill_1 = require("components/generic/Pill");
+const Icon_1 = require("components/generic/Icon/Icon");
+const BEButton_1 = require("components/generic/BEButton");
+const Translation_1 = require("translations/Translation");
 const react_i18next_1 = require("react-i18next");
 const contexts_1 = require("@frontend/contexts");
 function AppliedFiltersBlock() {
-    const context = react_1.useContext(contexts_1.BookingEngineContext);
-    const { t } = react_i18next_1.useTranslation();
+    const context = (0, react_1.useContext)(contexts_1.BookingEngineContext);
+    const { t } = (0, react_i18next_1.useTranslation)();
     const filtersByKey = Object.keys(context.currentFilters).filter((current) => {
         return current && context.currentFilters[current] instanceof Filter_1.default;
     });

package/dist/src/components/steps/room/roomFilter/AppliedFiltersBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppliedFiltersBlock.js","sourceRoot":"/","sources":["src/components/steps/room/roomFilter/AppliedFiltersBlock.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,iCAAmC;AACnC,mEAA4D;AAC5D,gDAAuD;AACvD,gDAAiD;AACjD,wDAAiD;AACjD,sEAAmE;AACnE,iDAA+C;AAC/C,iDAA0D;AAE1D,SAAwB,mBAAmB;IACvC,MAAM,OAAO,GAAG,kBAAU,CAAC,+BAAoB,CAAC,CAAC;IACjD,MAAM,EAAE,CAAC,EAAE,GAAG,8BAAc,EAAE,CAAC;IAE/B,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,EAAE,EAAE;QACxE,OAAO,OAAO,IAAI,OAAO,CAAC,cAAc,CAAC,OAAO,CAAC,YAAY,gBAAM,CAAC;IACxE,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE;QACtB,OAAO,yCAAK,CAAC;KAChB;IACD,MAAM,eAAe,GAAG,GAAG,EAAE;QACzB,OAAO,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;IAClC,CAAC,CAAC;IACF,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC3B,OAAO,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;IAClC,CAAC,CAAC;IACF,OAAO,CACH,6BAAK,SAAS,EAAC,cAAc;QACzB,6BAAK,SAAS,EAAC,eAAe,IACzB,YAAY;YACT,CAAC,YAAY,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,CACxB,YAAY,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;gBACxB,IAAI,MAAM,IAAI,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,YAAY,gBAAM,EAAE;oBAC5D,MAAM,kBAAkB,GAAG,GAAG,EAAE;wBAC5B,OAAO,CAAC,iBAAiB,iCAClB,OAAO,CAAC,cAAc,KACzB,CAAC,MAAM,CAAC,EAAE,IAAI,IAChB,CAAC;oBACP,CAAC,CAAC;oBACF,OAAO,CACH,oBAAC,cAAI,IAAC,GAAG,EAAE,MAAM,EAAE,WAAW,EAAE,kBAAkB,EAAE,IAAI,EAAE,eAAQ,CAAC,SAAS,EAAE,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,YAAY,EAAC,OAAO,IACnH,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,CACvC,CACV,CAAC;iBACL;YACL,CAAC,CAAC,CACL,CAAC,CAAC,CAAC,CACA,oBAAC,cAAI,IAAC,WAAW,EAAE,eAAe,EAAE,IAAI,EAAE,eAAQ,CAAC,SAAS,EAAE,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,YAAY,EAAC,OAAO;gBACnG,YAAY,CAAC,MAAM;mCACjB,CACV,CAAC,CACJ;QACL,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,IAAI,CACpE,oBAAC,kBAAQ,IAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,iBAAiB,IACzD,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CACtB,CACd,CACC,CACT,CAAC;AACN,CAAC;AAlDD,sCAkDC","sourcesContent":["import * as React from 'react';\nimport { useContext } from 'react';\nimport Filter from '../../../../models/Room/Filters/Filter';\nimport Pill, { PillType } from '../../../generic/Pill';\nimport { IconType } from '../../../generic/Icon';\nimport BEButton from '../../../generic/BEButton';\nimport { Translation } from '../../../../translations/Translation';\nimport { useTranslation } from 'react-i18next';\nimport { BookingEngineContext } from '@frontend/contexts';\n\nexport default function AppliedFiltersBlock() {\n    const context = useContext(BookingEngineContext);\n    const { t } = useTranslation();\n\n    const filtersByKey = Object.keys(context.currentFilters).filter((current) => {\n        return current && context.currentFilters[current] instanceof Filter;\n    });\n\n    if (!filtersByKey.length) {\n        return <></>;\n    }\n    const onClickIconPill = () => {\n        context.setCurrentFilters({});\n    };\n    const setFiltersOnClick = () => {\n        context.setCurrentFilters({});\n    };\n    return (\n        <div className=\"u-flex w-100\">\n            <div className=\"filter-height\">\n                {filtersByKey &&\n                    (filtersByKey.length <= 2 ? (\n                        filtersByKey.map((filter) => {\n                            if (filter && context.currentFilters[filter] instanceof Filter) {\n                                const onClickIconHandler = () => {\n                                    context.setCurrentFilters({\n                                        ...context.currentFilters,\n                                        [filter]: null,\n                                    });\n                                };\n                                return (\n                                    <Pill key={filter} onClickIcon={onClickIconHandler} type={PillType.Secondary} icon={IconType.Close} iconPosition=\"right\">\n                                        {context.currentFilters[filter].getLabel()}\n                                    </Pill>\n                                );\n                            }\n                        })\n                    ) : (\n                        <Pill onClickIcon={onClickIconPill} type={PillType.Secondary} icon={IconType.Close} iconPosition=\"right\">\n                            {filtersByKey.length} Filters Applied\n                        </Pill>\n                    ))}\n            </div>\n            {!!Object.values(context.currentFilters).filter((it) => !!it).length && (\n                <BEButton isText={true} size=\"tiny\" onClick={setFiltersOnClick}>\n                    {t(Translation.Misc.ClearAll)}\n                </BEButton>\n            )}\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"AppliedFiltersBlock.js","sourceRoot":"/","sources":["src/components/steps/room/roomFilter/AppliedFiltersBlock.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,iCAAmC;AACnC,uDAAgD;AAChD,kDAAyD;AACzD,uDAAwD;AACxD,0DAAmD;AACnD,0DAAuD;AACvD,iDAA+C;AAC/C,iDAA0D;AAE1D,SAAwB,mBAAmB;IACvC,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,+BAAoB,CAAC,CAAC;IACjD,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAE/B,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,EAAE,EAAE;QACxE,OAAO,OAAO,IAAI,OAAO,CAAC,cAAc,CAAC,OAAO,CAAC,YAAY,gBAAM,CAAC;IACxE,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE;QACtB,OAAO,yCAAK,CAAC;KAChB;IACD,MAAM,eAAe,GAAG,GAAG,EAAE;QACzB,OAAO,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;IAClC,CAAC,CAAC;IACF,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC3B,OAAO,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;IAClC,CAAC,CAAC;IACF,OAAO,CACH,6BAAK,SAAS,EAAC,cAAc;QACzB,6BAAK,SAAS,EAAC,eAAe,IACzB,YAAY;YACT,CAAC,YAAY,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,CACxB,YAAY,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;gBACxB,IAAI,MAAM,IAAI,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,YAAY,gBAAM,EAAE;oBAC5D,MAAM,kBAAkB,GAAG,GAAG,EAAE;wBAC5B,OAAO,CAAC,iBAAiB,iCAClB,OAAO,CAAC,cAAc,KACzB,CAAC,MAAM,CAAC,EAAE,IAAI,IAChB,CAAC;oBACP,CAAC,CAAC;oBACF,OAAO,CACH,oBAAC,cAAI,IAAC,GAAG,EAAE,MAAM,EAAE,WAAW,EAAE,kBAAkB,EAAE,IAAI,EAAE,eAAQ,CAAC,SAAS,EAAE,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,YAAY,EAAC,OAAO,IACnH,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,CACvC,CACV,CAAC;iBACL;YACL,CAAC,CAAC,CACL,CAAC,CAAC,CAAC,CACA,oBAAC,cAAI,IAAC,WAAW,EAAE,eAAe,EAAE,IAAI,EAAE,eAAQ,CAAC,SAAS,EAAE,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,YAAY,EAAC,OAAO;gBACnG,YAAY,CAAC,MAAM;mCACjB,CACV,CAAC,CACJ;QACL,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,IAAI,CACpE,oBAAC,kBAAQ,IAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,iBAAiB,IACzD,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CACtB,CACd,CACC,CACT,CAAC;AACN,CAAC;AAlDD,sCAkDC","sourcesContent":["import * as React from 'react';\nimport { useContext } from 'react';\nimport Filter from 'models/Room/Filters/Filter';\nimport Pill, { PillType } from 'components/generic/Pill';\nimport { IconType } from 'components/generic/Icon/Icon';\nimport BEButton from 'components/generic/BEButton';\nimport { Translation } from 'translations/Translation';\nimport { useTranslation } from 'react-i18next';\nimport { BookingEngineContext } from '@frontend/contexts';\n\nexport default function AppliedFiltersBlock() {\n    const context = useContext(BookingEngineContext);\n    const { t } = useTranslation();\n\n    const filtersByKey = Object.keys(context.currentFilters).filter((current) => {\n        return current && context.currentFilters[current] instanceof Filter;\n    });\n\n    if (!filtersByKey.length) {\n        return <></>;\n    }\n    const onClickIconPill = () => {\n        context.setCurrentFilters({});\n    };\n    const setFiltersOnClick = () => {\n        context.setCurrentFilters({});\n    };\n    return (\n        <div className=\"u-flex w-100\">\n            <div className=\"filter-height\">\n                {filtersByKey &&\n                    (filtersByKey.length <= 2 ? (\n                        filtersByKey.map((filter) => {\n                            if (filter && context.currentFilters[filter] instanceof Filter) {\n                                const onClickIconHandler = () => {\n                                    context.setCurrentFilters({\n                                        ...context.currentFilters,\n                                        [filter]: null,\n                                    });\n                                };\n                                return (\n                                    <Pill key={filter} onClickIcon={onClickIconHandler} type={PillType.Secondary} icon={IconType.Close} iconPosition=\"right\">\n                                        {context.currentFilters[filter].getLabel()}\n                                    </Pill>\n                                );\n                            }\n                        })\n                    ) : (\n                        <Pill onClickIcon={onClickIconPill} type={PillType.Secondary} icon={IconType.Close} iconPosition=\"right\">\n                            {filtersByKey.length} Filters Applied\n                        </Pill>\n                    ))}\n            </div>\n            {!!Object.values(context.currentFilters).filter((it) => !!it).length && (\n                <BEButton isText={true} size=\"tiny\" onClick={setFiltersOnClick}>\n                    {t(Translation.Misc.ClearAll)}\n                </BEButton>\n            )}\n        </div>\n    );\n}\n"]}

package/dist/src/components/steps/room/roomFilter/RoomFilterOverlay.d.ts

@@ -1,4 +1,4 @@
-import { Room } from '../../../../models/Room/Room';
+import { Room } from 'models/Room/Room';
 export interface RoomFilterProps {
     anchorEl: any;
     filter?: () => Room[];

package/dist/src/components/steps/room/roomFilter/RoomFilterOverlay.js

@@ -1,51 +1,40 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = require("react");
-const core_1 = require("@material-ui/core");
-const Headline_1 = require("../../../generic/Headline");
-const Text_1 = require("../../../generic/Text");
-const BEButton_1 = require("../../../generic/BEButton");
-const LineBreak_1 = require("../../../generic/LineBreak");
-const Color_1 = require("../../../../util/Color");
+const Headline_1 = require("components/generic/Headline");
+const Text_1 = require("components/generic/Text");
+const BEButton_1 = require("components/generic/BEButton");
+const LineBreak_1 = require("components/generic/LineBreak");
+const Color_1 = require("util/Color");
 const react_i18next_1 = require("react-i18next");
-const Translation_1 = require("../../../../translations/Translation");
-const ScreenSize_1 = require("../../../../util/ScreenSize");
-const SimpleModal_1 = require("../../../generic/modal/SimpleModal");
-const RoomstayThemeEngine_1 = require("../../../../providers/RoomstayThemeEngine");
+const Translation_1 = require("translations/Translation");
+const ScreenSize_1 = require("util/ScreenSize");
+const SimpleModal_1 = require("components/generic/modal/SimpleModal");
 const react_1 = require("react");
-const RoomFilterPriceSlider_1 = require("./RoomFilterPriceSlider");
+const RoomFilterPriceSlider_1 = require("components/steps/room/roomFilter/RoomFilterPriceSlider");
 const contexts_1 = require("@frontend/contexts");
-const FilterProvider_1 = require("../../../../providers/FilterProvider");
-const RoomFilterRateType_1 = require("./RoomFilterRateType");
-const RoomFilterRoomType_1 = require("./RoomFilterRoomType");
-const DataLayer_1 = require("../../../../util/DataLayer");
+const FilterProvider_1 = require("providers/FilterProvider");
+const RoomFilterRateType_1 = require("components/steps/room/roomFilter/RoomFilterRateType");
+const RoomFilterRoomType_1 = require("components/steps/room/roomFilter/RoomFilterRoomType");
+const DataLayer_1 = require("util/DataLayer");
 const hooks_1 = require("@frontend/hooks");
+const Overlay_1 = require("components/generic/Overlay/Overlay");
 function RoomFilterOverlay(props) {
-    const context = react_1.useContext(contexts_1.BookingEngineContext);
-    const basketContext = react_1.useContext(contexts_1.BasketContext);
-    const { hotel } = hooks_1.useCurrentHotel();
-    const { t } = react_i18next_1.useTranslation();
-    const [filters, setFilters] = react_1.useState(context.currentFilters);
-    const [roomList, setRoomList] = react_1.useState([]);
-    react_1.useEffect(() => {
+    const context = (0, react_1.useContext)(contexts_1.BookingEngineContext);
+    const basketContext = (0, react_1.useContext)(contexts_1.BasketContext);
+    const { hotel } = (0, hooks_1.useCurrentHotel)();
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const [filters, setFilters] = (0, react_1.useState)(context.currentFilters);
+    const [roomList, setRoomList] = (0, react_1.useState)([]);
+    (0, react_1.useEffect)(() => {
         var _a;
         setFilters(Object.assign({}, context.currentFilters));
-        const removeOverflow = () => {
-            document.body.style.overflow = null;
-        };
         if (props.open) {
-            document.body.style.overflow = 'hidden';
             const allRows = basketContext.getAllValidRows();
             FilterProvider_1.default.getUnfilteredRoomList((_a = basketContext.selectedBasketRow) !== null && _a !== void 0 ? _a : allRows[allRows.length - 1], hotel.hotelID).then((rooms) => {
                 setRoomList(rooms);
             });
         }
-        else {
-            removeOverflow();
-        }
-        return () => {
-            removeOverflow();
-        };
     }, [props.open]);
     const applyChangesOnClickHandler = () => {
         DataLayer_1.default.instance.sendInteraction('Apply Filters', DataLayer_1.InteractionType.BUTTON, DataLayer_1.InteractionStep.ROOMS);
@@ -85,13 +74,7 @@ function RoomFilterOverlay(props) {
                     React.createElement("div", { className: "u-marg-bottom--heavy" },
                         React.createElement(RoomFilterRateType_1.default, { roomList: roomList, filter: filters.RateType, onChange: onFilterRateChangeHandler })))))));
     if (context.screenSize > ScreenSize_1.default.Medium) {
-        return (React.createElement(core_1.Popover, { anchorEl: props.anchorEl, onClose: props.onClose, container: RoomstayThemeEngine_1.default.EngineContainer, open: props.open, anchorOrigin: {
-                vertical: 'bottom',
-                horizontal: 'center',
-            }, transformOrigin: {
-                vertical: 'top',
-                horizontal: 'left',
-            } },
+        return (React.createElement(Overlay_1.Overlay, { followElement: props.anchorEl, onClose: props.onClose, open: props.open, placement: 'bottom-start' },
             React.createElement(React.Fragment, null,
                 filterInside,
                 React.createElement("div", { className: "u-pad--heavy u-pad-top--none" },

package/dist/src/components/steps/room/roomFilter/RoomFilterOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"RoomFilterOverlay.js","sourceRoot":"/","sources":["src/components/steps/room/roomFilter/RoomFilterOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Popover } from '@material-ui/core';\nimport Headline from '../../../generic/Headline';\nimport Text from '../../../generic/Text';\nimport BEButton from '../../../generic/BEButton';\nimport LineBreak from '../../../generic/LineBreak';\nimport { Color } from '../../../../util/Color';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from '../../../../translations/Translation';\nimport ScreenSize from '../../../../util/ScreenSize';\nimport SimpleModal from '../../../generic/modal/SimpleModal';\nimport { Room } from '../../../../models/Room/Room';\nimport RoomstayThemeEngine from '../../../../providers/RoomstayThemeEngine';\nimport { useEffect, useState, useContext } from 'react';\nimport RoomFilterPriceSlider from './RoomFilterPriceSlider';\nimport Filter from '../../../../models/Room/Filters/Filter';\nimport { BasketContext, BookingEngineContext } from '@frontend/contexts';\nimport FilterProvider from '../../../../providers/FilterProvider';\nimport RoomFilterRateType from './RoomFilterRateType';\nimport RoomFilterRoomType from './RoomFilterRoomType';\nimport DataLayer, { InteractionStep, InteractionType } from '../../../../util/DataLayer';\nimport { useCurrentHotel } from '@frontend/hooks';\n\nexport interface RoomFilterProps {\n    anchorEl: any;\n    filter?: () => Room[];\n    open: boolean;\n\n    onClose?: () => void;\n}\n\nexport default function RoomFilterOverlay(props: RoomFilterProps) {\n    const context = useContext(BookingEngineContext);\n    const basketContext = useContext(BasketContext);\n    const { hotel } = useCurrentHotel();\n\n    const { t } = useTranslation();\n\n    const [filters, setFilters] = useState<any>(context.currentFilters);\n    const [roomList, setRoomList] = useState<Room[]>([]);\n\n    useEffect(() => {\n        setFilters({ ...context.currentFilters });\n\n        const removeOverflow = () => {\n            document.body.style.overflow = null;\n        };\n\n        if (props.open) {\n            document.body.style.overflow = 'hidden';\n\n            const allRows = basketContext.getAllValidRows();\n\n            FilterProvider.getUnfilteredRoomList(basketContext.selectedBasketRow ?? allRows[allRows.length - 1], hotel.hotelID).then((rooms) => {\n                setRoomList(rooms);\n            });\n        } else {\n            removeOverflow();\n        }\n\n        return () => {\n            removeOverflow();\n        };\n    }, [props.open]);\n\n    const applyChangesOnClickHandler = () => {\n        DataLayer.instance.sendInteraction('Apply Filters', InteractionType.BUTTON, InteractionStep.ROOMS);\n\n        context.setCurrentFilters(filters);\n        props.onClose();\n    };\n\n    const stickyFooter = (\n        <div className=\"u-flex align-items-center justify-content-between justify-content-md-end\">\n            <div className=\"u-marg-right--heavy\">\n                <Text color={Color.Accent}>\n                    <strong>\n                        {FilterProvider.filterRooms(roomList, Object.values(filters)).length} {t(Translation.Step.Room.Filter.MatchingRoomsRates)}\n                    </strong>\n                </Text>\n            </div>\n            <BEButton primary={true} filled={true} onClick={applyChangesOnClickHandler}>\n                {t(Translation.Misc.ApplyChanges)}\n            </BEButton>\n        </div>\n    );\n    const updateFilters = (name: string, filter: Filter) => {\n        setFilters((oldFilters: any) => ({\n            ...oldFilters,\n            [name]: filter,\n        }));\n    };\n    const onPriceSliderChangeHandler = (filter: any) => {\n        return updateFilters('Budget', filter);\n    };\n    const onFilterTypeChangeHandler = (filter: any) => {\n        return updateFilters('RoomType', filter);\n    };\n    const onFilterRateChangeHandler = (filter: any) => {\n        return updateFilters('RateType', filter);\n    };\n    const filterInside = (\n        <div className=\"room-filter\">\n            <div className=\"u-pad--heavy u-pad-bottom--none\">\n                {context.screenSize > ScreenSize.Medium && (\n                    <div className=\"u-marg-bottom\">\n                        <Headline bold={true}>{t(Translation.Step.Room.FilterBy)}</Headline>\n                    </div>\n                )}\n                <div className=\"row\">\n                    <div className=\"col-md-6\">\n                        <RoomFilterPriceSlider filter={filters.Budget} onChange={onPriceSliderChangeHandler} roomList={roomList} />\n                        <div className=\"u-marg-bottom--heavy\">\n                            <RoomFilterRoomType roomList={roomList} filter={filters.RoomType} onChange={onFilterTypeChangeHandler} />\n                        </div>\n                    </div>\n                    <div className=\"col-md-6\">\n                        <div className=\"u-marg-bottom--heavy\">\n                            <RoomFilterRateType roomList={roomList} filter={filters.RateType} onChange={onFilterRateChangeHandler} />\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n\n    if (context.screenSize > ScreenSize.Medium) {\n        return (\n            <Popover\n                anchorEl={props.anchorEl}\n                onClose={props.onClose}\n                container={RoomstayThemeEngine.EngineContainer}\n                open={props.open}\n                anchorOrigin={{\n                    vertical: 'bottom',\n                    horizontal: 'center',\n                }}\n                transformOrigin={{\n                    vertical: 'top',\n                    horizontal: 'left',\n                }}\n            >\n                <>\n                    {filterInside}\n                    <div className=\"u-pad--heavy u-pad-top--none\">\n                        <LineBreak />\n                        {stickyFooter}\n                    </div>\n                </>\n            </Popover>\n        );\n    } else {\n        return (\n            <SimpleModal open={props.open} onClose={props.onClose} title={'Filter'} mobileFooter={stickyFooter}>\n                {filterInside}\n            </SimpleModal>\n        );\n    }\n}\n"]}
+{"version":3,"file":"RoomFilterOverlay.js","sourceRoot":"/","sources":["src/components/steps/room/roomFilter/RoomFilterOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport Headline from 'components/generic/Headline';\nimport Text from 'components/generic/Text';\nimport BEButton from 'components/generic/BEButton';\nimport LineBreak from 'components/generic/LineBreak';\nimport { Color } from 'util/Color';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\nimport ScreenSize from 'util/ScreenSize';\nimport SimpleModal from 'components/generic/modal/SimpleModal';\nimport { Room } from 'models/Room/Room';\nimport { useEffect, useState, useContext } from 'react';\nimport RoomFilterPriceSlider from 'components/steps/room/roomFilter/RoomFilterPriceSlider';\nimport Filter from 'models/Room/Filters/Filter';\nimport { BasketContext, BookingEngineContext } from '@frontend/contexts';\nimport FilterProvider from 'providers/FilterProvider';\nimport RoomFilterRateType from 'components/steps/room/roomFilter/RoomFilterRateType';\nimport RoomFilterRoomType from 'components/steps/room/roomFilter/RoomFilterRoomType';\nimport DataLayer, { InteractionStep, InteractionType } from 'util/DataLayer';\nimport { useCurrentHotel } from '@frontend/hooks';\nimport { Overlay } from 'components/generic/Overlay/Overlay';\n\nexport interface RoomFilterProps {\n    anchorEl: any;\n    filter?: () => Room[];\n    open: boolean;\n\n    onClose?: () => void;\n}\n\nexport default function RoomFilterOverlay(props: RoomFilterProps) {\n    const context = useContext(BookingEngineContext);\n    const basketContext = useContext(BasketContext);\n    const { hotel } = useCurrentHotel();\n\n    const { t } = useTranslation();\n\n    const [filters, setFilters] = useState<any>(context.currentFilters);\n    const [roomList, setRoomList] = useState<Room[]>([]);\n\n    useEffect(() => {\n        setFilters({ ...context.currentFilters });\n\n        if (props.open) {\n            const allRows = basketContext.getAllValidRows();\n\n            FilterProvider.getUnfilteredRoomList(basketContext.selectedBasketRow ?? allRows[allRows.length - 1], hotel.hotelID).then((rooms) => {\n                setRoomList(rooms);\n            });\n        }\n    }, [props.open]);\n\n    const applyChangesOnClickHandler = () => {\n        DataLayer.instance.sendInteraction('Apply Filters', InteractionType.BUTTON, InteractionStep.ROOMS);\n\n        context.setCurrentFilters(filters);\n        props.onClose();\n    };\n\n    const stickyFooter = (\n        <div className=\"u-flex align-items-center justify-content-between justify-content-md-end\">\n            <div className=\"u-marg-right--heavy\">\n                <Text color={Color.Accent}>\n                    <strong>\n                        {FilterProvider.filterRooms(roomList, Object.values(filters)).length} {t(Translation.Step.Room.Filter.MatchingRoomsRates)}\n                    </strong>\n                </Text>\n            </div>\n            <BEButton primary={true} filled={true} onClick={applyChangesOnClickHandler}>\n                {t(Translation.Misc.ApplyChanges)}\n            </BEButton>\n        </div>\n    );\n    const updateFilters = (name: string, filter: Filter) => {\n        setFilters((oldFilters: any) => ({\n            ...oldFilters,\n            [name]: filter,\n        }));\n    };\n    const onPriceSliderChangeHandler = (filter: any) => {\n        return updateFilters('Budget', filter);\n    };\n    const onFilterTypeChangeHandler = (filter: any) => {\n        return updateFilters('RoomType', filter);\n    };\n    const onFilterRateChangeHandler = (filter: any) => {\n        return updateFilters('RateType', filter);\n    };\n    const filterInside = (\n        <div className=\"room-filter\">\n            <div className=\"u-pad--heavy u-pad-bottom--none\">\n                {context.screenSize > ScreenSize.Medium && (\n                    <div className=\"u-marg-bottom\">\n                        <Headline bold={true}>{t(Translation.Step.Room.FilterBy)}</Headline>\n                    </div>\n                )}\n                <div className=\"row\">\n                    <div className=\"col-md-6\">\n                        <RoomFilterPriceSlider filter={filters.Budget} onChange={onPriceSliderChangeHandler} roomList={roomList} />\n                        <div className=\"u-marg-bottom--heavy\">\n                            <RoomFilterRoomType roomList={roomList} filter={filters.RoomType} onChange={onFilterTypeChangeHandler} />\n                        </div>\n                    </div>\n                    <div className=\"col-md-6\">\n                        <div className=\"u-marg-bottom--heavy\">\n                            <RoomFilterRateType roomList={roomList} filter={filters.RateType} onChange={onFilterRateChangeHandler} />\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n\n    if (context.screenSize > ScreenSize.Medium) {\n        return (\n            <Overlay followElement={props.anchorEl} onClose={props.onClose} open={props.open} placement={'bottom-start'}>\n                <>\n                    {filterInside}\n                    <div className=\"u-pad--heavy u-pad-top--none\">\n                        <LineBreak />\n                        {stickyFooter}\n                    </div>\n                </>\n            </Overlay>\n        );\n    } else {\n        return (\n            <SimpleModal open={props.open} onClose={props.onClose} title={'Filter'} mobileFooter={stickyFooter}>\n                {filterInside}\n            </SimpleModal>\n        );\n    }\n}\n"]}

package/dist/src/components/steps/room/roomFilter/RoomFilterPriceSlider.d.ts

@@ -1,5 +1,5 @@
-import BudgetFilter from '../../../../models/Room/Filters/BudgetFilter';
-import { Room } from '../../../../models/Room/Room';
+import BudgetFilter from 'models/Room/Filters/BudgetFilter';
+import { Room } from 'models/Room/Room';
 interface RoomFilterPriceSliderProps {
     filter: BudgetFilter;
     roomList: Room[];

package/dist/src/components/steps/room/roomFilter/RoomFilterPriceSlider.js

@@ -2,38 +2,40 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = require("react");
 const react_1 = require("react");
-const Currency_1 = require("../../../generic/Currency");
-const core_1 = require("@material-ui/core");
-const Color_1 = require("../../../../util/Color");
-const Text_1 = require("../../../generic/Text");
-const Translation_1 = require("../../../../translations/Translation");
-const BEButton_1 = require("../../../generic/BEButton");
+const Currency_1 = require("components/generic/Currency");
+const Color_1 = require("util/Color");
+const Text_1 = require("components/generic/Text");
+const Translation_1 = require("translations/Translation");
+const BEButton_1 = require("components/generic/BEButton");
 const react_i18next_1 = require("react-i18next");
-const BudgetFilter_1 = require("../../../../models/Room/Filters/BudgetFilter");
-const SmallSpinner_1 = require("../../../generic/loader/SmallSpinner");
+const BudgetFilter_1 = require("models/Room/Filters/BudgetFilter");
+const SmallSpinner_1 = require("components/generic/loader/SmallSpinner");
 const cx = require("classnames");
+const Slider_1 = require("components/generic/Slider/Slider");
 function RoomFilterPriceSlider(props) {
     var _a, _b, _c, _d, _e;
-    const { t } = react_i18next_1.useTranslation();
-    const [rangeDefaults, setRangeDefaults] = react_1.useState([(_b = (_a = props.filter) === null || _a === void 0 ? void 0 : _a.getMin()) !== null && _b !== void 0 ? _b : 0, (_d = (_c = props.filter) === null || _c === void 0 ? void 0 : _c.getMax()) !== null && _d !== void 0 ? _d : 0]);
-    const [range, setRange] = react_1.useState(rangeDefaults);
-    const [peaksReached, setPeaksReached] = react_1.useState(null);
-    react_1.useEffect(() => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const [rangeDefaults, setRangeDefaults] = (0, react_1.useState)([(_b = (_a = props.filter) === null || _a === void 0 ? void 0 : _a.getMin()) !== null && _b !== void 0 ? _b : 0, (_d = (_c = props.filter) === null || _c === void 0 ? void 0 : _c.getMax()) !== null && _d !== void 0 ? _d : 0]);
+    const [range, setRange] = (0, react_1.useState)(rangeDefaults);
+    const [peaksReached, setPeaksReached] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
         var _a, _b, _c, _d, _e, _f;
-        const min = ((_a = props.roomList) === null || _a === void 0 ? void 0 : _a.length) ? props.roomList.reduce((total, room) => {
-            const roomLowest = room.getLowestPrice(true);
-            return total < roomLowest && total ? total : roomLowest;
-        }, null)
+        const min = ((_a = props.roomList) === null || _a === void 0 ? void 0 : _a.length)
+            ? props.roomList.reduce((total, room) => {
+                const roomLowest = room.getLowestPrice(true);
+                return total < roomLowest && total ? total : roomLowest;
+            }, null)
             : 0;
-        const max = ((_b = props.roomList) === null || _b === void 0 ? void 0 : _b.length) ? props.roomList.reduce((total, room) => {
-            const roomHighest = room.getHighestPrice(true);
-            return total > roomHighest && total ? total : roomHighest;
-        }, 0)
+        const max = ((_b = props.roomList) === null || _b === void 0 ? void 0 : _b.length)
+            ? props.roomList.reduce((total, room) => {
+                const roomHighest = room.getHighestPrice(true);
+                return total > roomHighest && total ? total : roomHighest;
+            }, 0)
             : 0;
         setRangeDefaults([min, max]);
         setRange([(_d = (_c = props.filter) === null || _c === void 0 ? void 0 : _c.getMin()) !== null && _d !== void 0 ? _d : min, (_f = (_e = props.filter) === null || _e === void 0 ? void 0 : _e.getMax()) !== null && _f !== void 0 ? _f : max]);
     }, [props.roomList]);
-    react_1.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         const rangeDifference = rangeDefaults[1] - rangeDefaults[0];
         // Basically we're checking if the RIGHT slider (max) is within 1.2x of the smallest value
         // and if LEFT slider (min) is within .8 of the largest value. This will hopefully allow us to transform the label
@@ -54,11 +56,11 @@ function RoomFilterPriceSlider(props) {
     const budgetMarks = [
         {
             label: (React.createElement("span", { className: "be-slider-label --start", style: { color: Color_1.Color.Grey } }, currencyObj(rangeDefaults[0]))),
-            value: rangeDefaults[0] - 1,
+            value: rangeDefaults[0],
         },
         {
             label: (React.createElement("span", { className: "be-slider-label", style: { color: Color_1.Color.Grey } }, currencyObj(rangeDefaults[1]))),
-            value: rangeDefaults[1] + 2,
+            value: rangeDefaults[1],
         },
         {
             label: (React.createElement("span", { className: "be-slider-label --main" },
@@ -68,8 +70,8 @@ function RoomFilterPriceSlider(props) {
             value: (range[1] - range[0]) / 2 + range[0],
         },
     ];
-    const handleBudgetChange = (event, newValue) => {
-        setRange(newValue);
+    const handleBudgetChange = (newValue) => {
+        setRange(newValue.map((value) => value.value));
     };
     const handleBudgetCommittedChange = (event, newValue) => {
         props.onChange(new BudgetFilter_1.default(newValue[0], newValue[1]));
@@ -81,6 +83,38 @@ function RoomFilterPriceSlider(props) {
     const resetOnClickHandler = () => {
         return reset();
     };
+    const markers = [
+        {
+            isVisible: true,
+            value: range[0],
+        },
+        {
+            isVisible: true,
+            value: range[1],
+        },
+        {
+            isVisible: false,
+            label: (React.createElement(React.Fragment, null,
+                currencyObj(range[0]),
+                " - ",
+                currencyObj(range[1]))),
+            value: range[0] + (range[1] - range[0]) / 2,
+        },
+    ];
+    const backgroundMarkers = [
+        {
+            isVisible: true,
+            value: rangeDefaults[0],
+            label: currencyObj(rangeDefaults[0]),
+            isEdge: 'start',
+        },
+        {
+            isVisible: true,
+            value: rangeDefaults[1],
+            label: currencyObj(rangeDefaults[1]),
+            isEdge: 'end',
+        },
+    ];
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: "u-flex" },
             React.createElement("div", null,
@@ -92,7 +126,11 @@ function RoomFilterPriceSlider(props) {
             React.createElement("div", null,
                 React.createElement(BEButton_1.default, { size: "tiny", isText: true, disabled: !props.filter, onClick: resetOnClickHandler }, t(Translation_1.Translation.Misc.Clear)))),
         ((_e = props.roomList) === null || _e === void 0 ? void 0 : _e.length) > 0 ? (React.createElement("div", { className: cx('roomstay-slider', { '--min-limit': peaksReached === 'left', '--max-limit': peaksReached === 'right' }) },
-            React.createElement(core_1.Slider, { min: rangeDefaults[0], max: rangeDefaults[1], valueLabelDisplay: "off", onChange: handleBudgetChange, onChangeCommitted: handleBudgetCommittedChange, "aria-labelledby": "track-false-range-slider", value: range, marks: budgetMarks }))) : (React.createElement("div", { className: "u-marg-top-bottom u-flex justify-content-center" },
+            React.createElement(Slider_1.Slider, { min: rangeDefaults[0], max: rangeDefaults[1], onChange: handleBudgetChange, 
+                // onChangeCommitted={handleBudgetCommittedChange}
+                // aria-labelledby="track-false-range-slider"
+                // value={range}
+                markers: markers, backgroundMarkers: backgroundMarkers }))) : (React.createElement("div", { className: "u-marg-top-bottom u-flex justify-content-center" },
             React.createElement(SmallSpinner_1.default, null)))));
 }
 exports.default = RoomFilterPriceSlider;

package/dist/src/components/steps/room/roomFilter/RoomFilterPriceSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"RoomFilterPriceSlider.js","sourceRoot":"/","sources":["src/components/steps/room/roomFilter/RoomFilterPriceSlider.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,iCAA4C;AAC5C,wDAAiD;AACjD,4CAA2C;AAC3C,kDAA+C;AAC/C,gDAAuD;AACvD,sEAAmE;AACnE,wDAAiD;AACjD,iDAA+C;AAC/C,+EAAwE;AAGxE,uEAAgE;AAEhE,iCAAiC;AAQjC,SAAwB,qBAAqB,CAAC,KAAiC;;IAC3E,MAAM,EAAE,CAAC,EAAE,GAAG,8BAAc,EAAE,CAAC;IAE/B,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,gBAAQ,CAAC,aAAC,KAAK,CAAC,MAAM,0CAAE,MAAM,qCAAM,CAAC,cAAE,KAAK,CAAC,MAAM,0CAAE,MAAM,qCAAM,CAAC,CAAC,CAAC,CAAC;IAC/G,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,gBAAQ,CAAC,aAAa,CAAC,CAAC;IAElD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,gBAAQ,CAAmB,IAAI,CAAC,CAAC;IAEzE,iBAAS,CAAC,GAAG,EAAE;;QACX,MAAM,GAAG,GAAQ,OAAA,KAAK,CAAC,QAAQ,0CAAE,MAAM,EACnC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,KAAa,EAAE,IAAU,EAAO,EAAE;YACrD,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;YAC7C,OAAO,KAAK,GAAG,UAAU,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC;QAC5D,CAAC,EAAE,IAAI,CAAC;YACV,CAAC,CAAC,CAAC,CAAC;QACR,MAAM,GAAG,GAAQ,OAAA,KAAK,CAAC,QAAQ,0CAAE,MAAM,EACnC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,KAAa,EAAE,IAAU,EAAO,EAAE;YACrD,MAAM,WAAW,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;YAC/C,OAAO,KAAK,GAAG,WAAW,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC;QAC9D,CAAC,EAAE,CAAC,CAAC;YACP,CAAC,CAAC,CAAC,CAAC;QAER,gBAAgB,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;QAC7B,QAAQ,CAAC,aAAC,KAAK,CAAC,MAAM,0CAAE,MAAM,qCAAM,GAAG,cAAE,KAAK,CAAC,MAAM,0CAAE,MAAM,qCAAM,GAAG,CAAC,CAAC,CAAC;IAC7E,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAErB,iBAAS,CAAC,GAAG,EAAE;QACX,MAAM,eAAe,GAAG,aAAa,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;QAE5D,0FAA0F;QAC1F,kHAAkH;QAClH,4CAA4C;QAC5C,IAAI,KAAK,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,GAAG,eAAe,GAAG,GAAG,EAAE;YACrD,eAAe,CAAC,MAAM,CAAC,CAAC;SAC3B;aAAM,IAAI,KAAK,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,GAAG,eAAe,GAAG,GAAG,EAAE;YAC5D,eAAe,CAAC,OAAO,CAAC,CAAC;SAC5B;aAAM;YACH,eAAe,CAAC,IAAI,CAAC,CAAC;SACzB;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,WAAW,GAAG,CAAC,KAAU,EAAE,cAAc,GAAG,KAAK,EAAE,EAAE;QACvD,OAAO,CACH,oBAAC,kBAAQ,IAAC,YAAY,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,IAC7C,KAAK,CACC,CACd,CAAC;IACN,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG;QAChB;YACI,KAAK,EAAE,CACH,8BAAM,SAAS,EAAC,yBAAyB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,aAAK,CAAC,IAAI,EAAE,IACjE,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAC3B,CACV;YACD,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC;SAC9B;QACD;YACI,KAAK,EAAE,CACH,8BAAM,SAAS,EAAC,iBAAiB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,aAAK,CAAC,IAAI,EAAE,IACzD,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAC3B,CACV;YACD,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC;SAC9B;QACD;YACI,KAAK,EAAE,CACH,8BAAM,SAAS,EAAC,wBAAwB;gBACnC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;;gBAAK,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAC7C,CACV;YACD,KAAK,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC;SAC9C;KACJ,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,KAAU,EAAE,QAA2B,EAAE,EAAE;QACnE,QAAQ,CAAC,QAAoB,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,MAAM,2BAA2B,GAAG,CAAC,KAAU,EAAE,QAAkB,EAAE,EAAE;QACnE,KAAK,CAAC,QAAQ,CAAC,IAAI,sBAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/D,CAAC,CAAC;IAEF,MAAM,KAAK,GAAG,GAAG,EAAE;QACf,QAAQ,CAAC,aAAa,CAAC,CAAC;QACxB,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IACzB,CAAC,CAAC;IACF,MAAM,mBAAmB,GAAG,GAAG,EAAE;QAC7B,OAAO,KAAK,EAAE,CAAC;IACnB,CAAC,CAAC;IACF,OAAO,CACH;QACI,6BAAK,SAAS,EAAC,QAAQ;YACnB;gBACI,oBAAC,cAAI,IAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,eAAQ,CAAC,KAAK;oBACpC,oCAAS,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAU,CACtD;gBACP,oBAAC,cAAI,IAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,eAAQ,CAAC,KAAK;;oBAClC,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAC3B,CACL;YACN;gBACI,oBAAC,kBAAQ,IAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE,mBAAmB,IACpF,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CACnB,CACT,CACJ;QACL,OAAA,KAAK,CAAC,QAAQ,0CAAE,MAAM,IAAG,CAAC,CAAC,CAAC,CAAC,CAC1B,6BAAK,SAAS,EAAE,EAAE,CAAC,iBAAiB,EAAE,EAAE,aAAa,EAAE,YAAY,KAAK,MAAM,EAAE,aAAa,EAAE,YAAY,KAAK,OAAO,EAAE,CAAC;YACtH,oBAAC,aAAM,IACH,GAAG,EAAE,aAAa,CAAC,CAAC,CAAC,EACrB,GAAG,EAAE,aAAa,CAAC,CAAC,CAAC,EACrB,iBAAiB,EAAC,KAAK,EACvB,QAAQ,EAAE,kBAAkB,EAC5B,iBAAiB,EAAE,2BAA2B,qBAC9B,0BAA0B,EAC1C,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,WAAW,GACpB,CACA,CACT,CAAC,CAAC,CAAC,CACA,6BAAK,SAAS,EAAC,iDAAiD;YAC5D,oBAAC,sBAAY,OAAG,CACd,CACT,CACF,CACN,CAAC;AACN,CAAC;AAhID,wCAgIC","sourcesContent":["import * as React from 'react';\nimport { useState, useEffect } from 'react';\nimport Currency from '../../../generic/Currency';\nimport { Slider } from '@material-ui/core';\nimport { Color } from '../../../../util/Color';\nimport Text, { TextType } from '../../../generic/Text';\nimport { Translation } from '../../../../translations/Translation';\nimport BEButton from '../../../generic/BEButton';\nimport { useTranslation } from 'react-i18next';\nimport BudgetFilter from '../../../../models/Room/Filters/BudgetFilter';\nimport { Room } from '../../../../models/Room/Room';\nimport Icon, { IconType } from '../../../generic/Icon';\nimport SmallSpinner from '../../../generic/loader/SmallSpinner';\n\nimport * as cx from 'classnames';\n\ninterface RoomFilterPriceSliderProps {\n    filter: BudgetFilter;\n    roomList: Room[];\n    onChange: (filter: BudgetFilter) => void;\n}\n\nexport default function RoomFilterPriceSlider(props: RoomFilterPriceSliderProps) {\n    const { t } = useTranslation();\n\n    const [rangeDefaults, setRangeDefaults] = useState([props.filter?.getMin() ?? 0, props.filter?.getMax() ?? 0]);\n    const [range, setRange] = useState(rangeDefaults);\n\n    const [peaksReached, setPeaksReached] = useState<'left' | 'right'>(null);\n\n    useEffect(() => {\n        const min: any = props.roomList?.length\n            ? props.roomList.reduce((total: number, room: Room): any => {\n                  const roomLowest = room.getLowestPrice(true);\n                  return total < roomLowest && total ? total : roomLowest;\n              }, null)\n            : 0;\n        const max: any = props.roomList?.length\n            ? props.roomList.reduce((total: number, room: Room): any => {\n                  const roomHighest = room.getHighestPrice(true);\n                  return total > roomHighest && total ? total : roomHighest;\n              }, 0)\n            : 0;\n\n        setRangeDefaults([min, max]);\n        setRange([props.filter?.getMin() ?? min, props.filter?.getMax() ?? max]);\n    }, [props.roomList]);\n\n    useEffect(() => {\n        const rangeDifference = rangeDefaults[1] - rangeDefaults[0];\n\n        // Basically we're checking if the RIGHT slider (max) is within 1.2x of the smallest value\n        // and if LEFT slider (min) is within .8 of the largest value. This will hopefully allow us to transform the label\n        // away from the edges, to avoid overlapping\n        if (range[1] < rangeDefaults[0] + rangeDifference * 0.3) {\n            setPeaksReached('left');\n        } else if (range[0] > rangeDefaults[1] - rangeDifference * 0.3) {\n            setPeaksReached('right');\n        } else {\n            setPeaksReached(null);\n        }\n    }, [range]);\n\n    const currencyObj = (value: any, disableLoading = false) => {\n        return (\n            <Currency hideDecimals={true} disableLoading={true}>\n                {value}\n            </Currency>\n        );\n    };\n\n    const budgetMarks = [\n        {\n            label: (\n                <span className=\"be-slider-label --start\" style={{ color: Color.Grey }}>\n                    {currencyObj(rangeDefaults[0])}\n                </span>\n            ),\n            value: rangeDefaults[0] - 1,\n        },\n        {\n            label: (\n                <span className=\"be-slider-label\" style={{ color: Color.Grey }}>\n                    {currencyObj(rangeDefaults[1])}\n                </span>\n            ),\n            value: rangeDefaults[1] + 2,\n        },\n        {\n            label: (\n                <span className=\"be-slider-label --main\">\n                    {currencyObj(range[0])} - {currencyObj(range[1])}\n                </span>\n            ),\n            value: (range[1] - range[0]) / 2 + range[0],\n        },\n    ];\n\n    const handleBudgetChange = (event: any, newValue: number | number[]) => {\n        setRange(newValue as number[]);\n    };\n\n    const handleBudgetCommittedChange = (event: any, newValue: number[]) => {\n        props.onChange(new BudgetFilter(newValue[0], newValue[1]));\n    };\n\n    const reset = () => {\n        setRange(rangeDefaults);\n        props.onChange(null);\n    };\n    const resetOnClickHandler = () => {\n        return reset();\n    };\n    return (\n        <>\n            <div className=\"u-flex\">\n                <div>\n                    <Text inline={true} type={TextType.Small}>\n                        <strong>{t(Translation.Step.Room.Filter.Budget)}</strong>\n                    </Text>\n                    <Text inline={true} type={TextType.Small}>\n                        /{t(Translation.Misc.PerNight)}\n                    </Text>\n                </div>\n                <div>\n                    <BEButton size=\"tiny\" isText={true} disabled={!props.filter} onClick={resetOnClickHandler}>\n                        {t(Translation.Misc.Clear)}\n                    </BEButton>\n                </div>\n            </div>\n            {props.roomList?.length > 0 ? (\n                <div className={cx('roomstay-slider', { '--min-limit': peaksReached === 'left', '--max-limit': peaksReached === 'right' })}>\n                    <Slider\n                        min={rangeDefaults[0]}\n                        max={rangeDefaults[1]}\n                        valueLabelDisplay=\"off\"\n                        onChange={handleBudgetChange}\n                        onChangeCommitted={handleBudgetCommittedChange}\n                        aria-labelledby=\"track-false-range-slider\"\n                        value={range}\n                        marks={budgetMarks}\n                    />\n                </div>\n            ) : (\n                <div className=\"u-marg-top-bottom u-flex justify-content-center\">\n                    <SmallSpinner />\n                </div>\n            )}\n        </>\n    );\n}\n"]}
+{"version":3,"file":"RoomFilterPriceSlider.js","sourceRoot":"/","sources":["src/components/steps/room/roomFilter/RoomFilterPriceSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useState, useEffect } from 'react';\nimport Currency from 'components/generic/Currency';\nimport { Color } from 'util/Color';\nimport Text, { TextType } from 'components/generic/Text';\nimport { Translation } from 'translations/Translation';\nimport BEButton from 'components/generic/BEButton';\nimport { useTranslation } from 'react-i18next';\nimport BudgetFilter from 'models/Room/Filters/BudgetFilter';\nimport { Room } from 'models/Room/Room';\nimport SmallSpinner from 'components/generic/loader/SmallSpinner';\n\nimport * as cx from 'classnames';\nimport { Slider, MarkerType, BackgroundMarkerType } from 'components/generic/Slider/Slider';\n\ninterface RoomFilterPriceSliderProps {\n    filter: BudgetFilter;\n    roomList: Room[];\n    onChange: (filter: BudgetFilter) => void;\n}\n\nexport default function RoomFilterPriceSlider(props: RoomFilterPriceSliderProps) {\n    const { t } = useTranslation();\n\n    const [rangeDefaults, setRangeDefaults] = useState([props.filter?.getMin() ?? 0, props.filter?.getMax() ?? 0]);\n    const [range, setRange] = useState(rangeDefaults);\n\n    const [peaksReached, setPeaksReached] = useState<'left' | 'right'>(null);\n\n    useEffect(() => {\n        const min: any = props.roomList?.length\n            ? props.roomList.reduce((total: number, room: Room): any => {\n                  const roomLowest = room.getLowestPrice(true);\n                  return total < roomLowest && total ? total : roomLowest;\n              }, null)\n            : 0;\n        const max: any = props.roomList?.length\n            ? props.roomList.reduce((total: number, room: Room): any => {\n                  const roomHighest = room.getHighestPrice(true);\n                  return total > roomHighest && total ? total : roomHighest;\n              }, 0)\n            : 0;\n\n        setRangeDefaults([min, max]);\n        setRange([props.filter?.getMin() ?? min, props.filter?.getMax() ?? max]);\n    }, [props.roomList]);\n\n    useEffect(() => {\n        const rangeDifference = rangeDefaults[1] - rangeDefaults[0];\n\n        // Basically we're checking if the RIGHT slider (max) is within 1.2x of the smallest value\n        // and if LEFT slider (min) is within .8 of the largest value. This will hopefully allow us to transform the label\n        // away from the edges, to avoid overlapping\n        if (range[1] < rangeDefaults[0] + rangeDifference * 0.3) {\n            setPeaksReached('left');\n        } else if (range[0] > rangeDefaults[1] - rangeDifference * 0.3) {\n            setPeaksReached('right');\n        } else {\n            setPeaksReached(null);\n        }\n    }, [range]);\n\n    const currencyObj = (value: any, disableLoading = false) => {\n        return (\n            <Currency hideDecimals={true} disableLoading={true}>\n                {value}\n            </Currency>\n        );\n    };\n\n    const budgetMarks = [\n        {\n            label: (\n                <span className=\"be-slider-label --start\" style={{ color: Color.Grey }}>\n                    {currencyObj(rangeDefaults[0])}\n                </span>\n            ),\n            value: rangeDefaults[0],\n        },\n        {\n            label: (\n                <span className=\"be-slider-label\" style={{ color: Color.Grey }}>\n                    {currencyObj(rangeDefaults[1])}\n                </span>\n            ),\n            value: rangeDefaults[1],\n        },\n        {\n            label: (\n                <span className=\"be-slider-label --main\">\n                    {currencyObj(range[0])} - {currencyObj(range[1])}\n                </span>\n            ),\n            value: (range[1] - range[0]) / 2 + range[0],\n        },\n    ];\n\n    const handleBudgetChange = (newValue: MarkerType[]) => {\n        setRange(newValue.map((value) => value.value));\n    };\n\n    const handleBudgetCommittedChange = (event: any, newValue: number[]) => {\n        props.onChange(new BudgetFilter(newValue[0], newValue[1]));\n    };\n\n    const reset = () => {\n        setRange(rangeDefaults);\n        props.onChange(null);\n    };\n    const resetOnClickHandler = () => {\n        return reset();\n    };\n\n    const markers: MarkerType[] = [\n        {\n            isVisible: true,\n            value: range[0],\n        },\n        {\n            isVisible: true,\n            value: range[1],\n        },\n        {\n            isVisible: false,\n            label: (\n                <>\n                    {currencyObj(range[0])} - {currencyObj(range[1])}\n                </>\n            ),\n            value: range[0] + (range[1] - range[0]) / 2,\n        },\n    ];\n\n    const backgroundMarkers: BackgroundMarkerType[] = [\n        {\n            isVisible: true,\n            value: rangeDefaults[0],\n            label: currencyObj(rangeDefaults[0]),\n            isEdge: 'start',\n        },\n        {\n            isVisible: true,\n            value: rangeDefaults[1],\n            label: currencyObj(rangeDefaults[1]),\n            isEdge: 'end',\n        },\n    ];\n\n    return (\n        <>\n            <div className=\"u-flex\">\n                <div>\n                    <Text inline={true} type={TextType.Small}>\n                        <strong>{t(Translation.Step.Room.Filter.Budget)}</strong>\n                    </Text>\n                    <Text inline={true} type={TextType.Small}>\n                        /{t(Translation.Misc.PerNight)}\n                    </Text>\n                </div>\n                <div>\n                    <BEButton size=\"tiny\" isText={true} disabled={!props.filter} onClick={resetOnClickHandler}>\n                        {t(Translation.Misc.Clear)}\n                    </BEButton>\n                </div>\n            </div>\n            {props.roomList?.length > 0 ? (\n                <div className={cx('roomstay-slider', { '--min-limit': peaksReached === 'left', '--max-limit': peaksReached === 'right' })}>\n                    <Slider\n                        min={rangeDefaults[0]}\n                        max={rangeDefaults[1]}\n                        onChange={handleBudgetChange}\n                        // onChangeCommitted={handleBudgetCommittedChange}\n                        // aria-labelledby=\"track-false-range-slider\"\n                        // value={range}\n                        markers={markers}\n                        backgroundMarkers={backgroundMarkers}\n                    />\n                </div>\n            ) : (\n                <div className=\"u-marg-top-bottom u-flex justify-content-center\">\n                    <SmallSpinner />\n                </div>\n            )}\n        </>\n    );\n}\n"]}

package/dist/src/components/steps/room/roomFilter/RoomFilterRateType.d.ts

@@ -1,5 +1,5 @@
-import RateTypeFilter from '../../../../models/Room/Filters/RateTypeFilter';
-import { Room } from '../../../../models/Room/Room';
+import RateTypeFilter from 'models/Room/Filters/RateTypeFilter';
+import { Room } from 'models/Room/Room';
 interface RoomFilterRateTypeProps {
     filter: RateTypeFilter;
     roomList: Room[];