@roomstay/frontend 1.3.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"RoomRateRow.js","sourceRoot":"/","sources":["src/components/steps/room/roomDetails/roomRates/RoomRateRow.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport Text, { TextType } from '../../../../generic/Text';\nimport { Color } from '../../../../../util/Color';\nimport { TextAlign } from '../../../../../util/TextAlignment';\nimport BEButton from '../../../../generic/BEButton';\nimport { Translation } from '../../../../../translations/Translation';\nimport { useTranslation } from 'react-i18next';\n\nimport * as classNames from 'classnames';\n\nimport { IconType } from '../../../../generic/Icon';\nimport Pill, { PillType } from '../../../../generic/Pill';\nimport { BasketContext } from '@frontend/contexts';\nimport { useContext, useState, useEffect, useRef } from 'react';\nimport DataLayer, { InteractionStep, InteractionType } from '../../../../../util/DataLayer';\nimport RoomDetailsPriceBlock from '../RoomDetailsPriceBlock';\nimport { RoomRate, RoomRatePriceInclusion } from '../../../../../models/Room/RoomRate';\nimport RoomRateDetailsAndPriceBreakdownModal, { RoomRateDetailsAndPriceBreakdownModalTabs } from './RoomRateDetailsAndPriceBreakdownModal';\nimport BookNowButton from './BookNowButton';\nimport FeatureProvider from '../../../../../providers/FeatureProvider';\nimport { CompanyContext } from '@frontend/contexts';\nimport { useCurrentHotel } from '@frontend/hooks';\nimport RoomRatePills from './RoomRatePills';\n\nexport interface RoomRateRowProps {\n    rate: RoomRate;\n\n    getButtonLabel?: (isRoomSelectedAndEditing: boolean, isThisSelectedRow: boolean) => string;\n    onAddToBasketOverride?: (rate: RoomRate) => void;\n\n    isPromoRate?: boolean;\n}\n\nexport default function RoomRateRow(props: RoomRateRowProps) {\n    const ccx = useContext(CompanyContext);\n    const basketContext = useContext(BasketContext);\n\n    const [viewingModal, setViewingModal] = useState({ open: false, currentTab: RoomRateDetailsAndPriceBreakdownModalTabs.RoomDetails });\n\n    const { t } = useTranslation();\n    const { hotel } = useCurrentHotel();\n\n    const { rate } = props;\n    const selectedRow = basketContext.selectedBasketRow;\n    const isRoomSelectedAndEditing = selectedRow?.isValid();\n\n    const isThisSelectedRow = selectedRow && rate.name === selectedRow.getRate()?.name && rate.getRoom()?.name === selectedRow.getRoom()?.name;\n\n    const currentRow = useRef(null);\n\n    const classes = classNames('room-info', {\n        '--default': !rate.isMemberOnly,\n        '--locked': rate.isMemberOnly,\n        '--current': isThisSelectedRow && isRoomSelectedAndEditing,\n        '--is-promo': props.isPromoRate,\n    });\n\n    let isLocked = false;\n\n    if (rate.isMemberOnly && !ccx.signedInUser) {\n        isLocked = true;\n    }\n    FeatureProvider.load('AvailableUpgradesFeature');\n    useEffect(() => {\n        if (isThisSelectedRow) {\n            setTimeout(() => {\n                currentRow?.current?.scrollIntoView({ behavior: 'smooth' });\n            }, 250);\n        }\n\n        if (!isLocked) {\n            DataLayer.instance.addRoomRateImpression(rate.getRoom(), rate);\n        }\n    }, [isThisSelectedRow]);\n\n    const openTab = (tab: RoomRateDetailsAndPriceBreakdownModalTabs) => {\n        setViewingModal({ open: true, currentTab: tab });\n    };\n\n    let bookNowLabel = '';\n    if (props.getButtonLabel) {\n        bookNowLabel = props.getButtonLabel(isRoomSelectedAndEditing, isThisSelectedRow);\n    } else {\n        if (isRoomSelectedAndEditing) {\n            bookNowLabel = isThisSelectedRow ? t(Translation.Step.Room.RoomInfo.Selected) : (bookNowLabel = t(Translation.Step.Room.RoomInfo.Update));\n        } else {\n            bookNowLabel = t(Translation.Step.Room.RoomInfo.BookNow);\n        }\n    }\n\n    const openMemberSignupModalOnClick = () => {\n        DataLayer.instance.sendInteraction('Member Signup Modal', InteractionType.LINK, InteractionStep.ROOMS);\n        ccx.openMemberSignupModal();\n    };\n\n    const rateDetailsOnClick = () => {\n        DataLayer.instance.sendInteraction('More Rate Details', InteractionType.LINK, InteractionStep.ROOMS);\n        openTab(RoomRateDetailsAndPriceBreakdownModalTabs.RoomDetails);\n    };\n\n    const updateModalOnClose = () => {\n        setViewingModal((old) => {\n            old.open = false;\n            return { ...old };\n        });\n    };\n\n    const openTabOnClick = () => {\n        DataLayer.instance.sendInteraction('Rate Breakdown', InteractionType.LINK, InteractionStep.ROOMS);\n        openTab(RoomRateDetailsAndPriceBreakdownModalTabs.PriceBreakdown);\n    };\n\n    return (\n        <div className={classes} ref={currentRow}>\n            <div className=\"row\">\n                <div className=\"col-lg-8\">\n                    <div className=\"u-flex flex-column h-100\">\n                        <div>\n                            <div className=\"u-marg-bottom-half\">\n                                {isLocked ? (\n                                    <Text type={TextType.Body} color={Color.Success}>\n                                        <strong>{t(Translation.Step.Room.RoomInfo.MemberOnlyDeal)}</strong>\n                                    </Text>\n                                ) : (\n                                    <Text type={TextType.Body}>\n                                        <strong>{rate.name}</strong>\n                                    </Text>\n                                )}\n                            </div>\n                            <div className=\"u-marg-bottom u-h-ml-5 text-small u-clear-font-weight rdcaf\">\n                                <div dangerouslySetInnerHTML={{ __html: isLocked ? t(Translation.Step.Room.RoomInfo.DealForMemberOnly) : rate.description }} />\n                            </div>\n                            {isLocked && (\n                                <div className=\"u-marg\">\n                                    <span onClick={openMemberSignupModalOnClick}>\n                                        <Pill icon={IconType.Money} type={PillType.Success}>\n                                            {t(Translation.Step.Room.RoomInfo.SignUpToSee)}\n                                        </Pill>\n                                    </span>\n                                </div>\n                            )}\n                            <RoomRatePills rate={props.rate} />\n                        </div>\n                        <div className=\"u-flex justify-content-start u-marg-top-bottom@l-\">\n                            <div className=\"u-marg-right u-inline-flex\">\n                                <BEButton icon={IconType.ArrowRight2} isText={true} primary={true} size=\"small\" iconPosition=\"right\" onClick={rateDetailsOnClick}>\n                                    {t(Translation.Step.Room.ReadMore)}\n                                </BEButton>\n                            </div>\n                            <BEButton\n                                icon={IconType.ArrowRight2}\n                                isText={true}\n                                textColor={Color.Navy}\n                                size=\"small\"\n                                iconPosition=\"right\"\n                                onClick={openTabOnClick}\n                                disabled={isLocked}\n                            >\n                                {t(Translation.Step.Room.RoomInfo.ViewPriceBreakdown)}\n                            </BEButton>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"col-lg-4 u-flex flex-column align-items-start align-items-md-start align-items-lg-end justify-content-start\">\n                    <div className=\"u-flex flex-column align-items-start align-items-lg-end\">\n                        <RoomDetailsPriceBlock\n                            isLocked={isLocked}\n                            averagePreDiscount={rate.getAveragePriceBeforeDiscount(true)}\n                            averagePrice={rate.getAveragePrice(true)}\n                            isMemberOnly={props.rate.isMemberOnly}\n                        />\n                        <Text type={TextType.Label} color={Color.DarkGrey} align={TextAlign.Right}>\n                            {rate.getPriceType() === RoomRatePriceInclusion.IncludingFeesAndTaxes\n                                ? t(Translation.Step.Room.RoomInfo.IncludesTaxes)\n                                : t(Translation.Step.Room.ExcludingTaxes)}\n                        </Text>\n                    </div>\n                    <div className=\"u-marg-top u-w-100@l-\">\n                        {isLocked ? (\n                            <BEButton filled={true} success={true} wide={true} onClick={openMemberSignupModalOnClick}>\n                                {t(Translation.Step.Room.RoomInfo.RevealPrice)}\n                            </BEButton>\n                        ) : (\n                            <BookNowButton rate={rate} buttonLabel={bookNowLabel} onAddToBasketOverride={props.onAddToBasketOverride} isFilled={!isThisSelectedRow} />\n                        )}\n                    </div>\n                </div>\n            </div>\n            {\n                <RoomRateDetailsAndPriceBreakdownModal\n                    isOpen={viewingModal.open}\n                    currentTab={viewingModal.currentTab}\n                    rate={props.rate}\n                    getButtonLabel={props.getButtonLabel}\n                    onAddToBasketOverride={props.onAddToBasketOverride}\n                    onClose={updateModalOnClose}\n                />\n            }\n        </div>\n    );\n}\n"]}

package/dist/src/components/steps/room/roomDetails/roomRates/RoomRates.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { RoomRate } from '../../../../../models/Room/RoomRate';
+export interface RoomRatesProps {
+    roomCode: string;
+    rates: RoomRate[];
+    featuredRates?: RoomRate[];
+    classNames?: string;
+    hideMemberOnlyRow?: boolean;
+    getButtonLabel?: (isRoomSelectedAndEditing: boolean, isThisSelectedRow: boolean) => string;
+    onAddToBasketOverride?: (rate: RoomRate) => void;
+}
+export default function RoomRates(props: RoomRatesProps): JSX.Element;

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

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const RoomRateRow_1 = require("./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 contexts_1 = require("@frontend/contexts");
+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 hooks_1 = require("@frontend/hooks");
+const contexts_2 = require("@frontend/contexts");
+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 { rates } = props;
+    const numOfRatesToShowFirst = beContext.screenSize <= ScreenSize_1.default.Medium ? 2 : 3;
+    const sortBy = beContext.currentRoomSort;
+    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(() => {
+        DataLayer_1.default.instance.sendRoomImpressions();
+    }, [showingMoreOpen]);
+    return 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;
+        let sortedRates;
+        if (rates.length !== 0) {
+            sortedRates = rates.sort(RoomSortProvider_1.default.getSortByFunction(sortBy));
+        }
+        // Need two sorts because of MOD
+        sortedRates = rates.sort((a, b) => {
+            if (a.isMemberOnly) {
+                return -1;
+            }
+            else if (b.isMemberOnly) {
+                return 1;
+            }
+            else {
+                return 0;
+            }
+        });
+        const showMoreOnClick = () => {
+            setShowingMoreOpen(true);
+        };
+        const itemsToRender = [];
+        const renderRoomRateRow = (rate, isPromo = false) => {
+            return React.createElement(RoomRateRow_1.default, { key: rate.name, rate: rate, getButtonLabel: props.getButtonLabel, onAddToBasketOverride: props.onAddToBasketOverride, isPromoRate: isPromo });
+        };
+        const maxRows = hasFeaturedRates && !showingMoreOpen ? featuredRates.length : numOfRatesToShowFirst;
+        let rowsLeftToOpen = 0;
+        // 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 &&
+                !!(hotel === null || hotel === void 0 ? void 0 : hotel.memberOnlyPromoCode) &&
+                (!ccx.signedInUser || (hotel === null || hotel === void 0 ? void 0 : hotel.memberOnlyPromoCode) === ((_b = basketContext === null || basketContext === void 0 ? void 0 : basketContext.selectedBasketRow) === null || _b === void 0 ? void 0 : _b.getPromoCode()))) {
+                itemsToRender.push(React.createElement(MembersOnlyRow_1.default, null));
+            }
+        }
+        // Then we add the remaining rates to the render list - stop adding if we hit `maxRows`
+        sortedRates.forEach((rate) => {
+            if (itemsToRender.length < maxRows || showingMoreOpen) {
+                itemsToRender.push(renderRoomRateRow(rate));
+            }
+            else {
+                rowsLeftToOpen++;
+            }
+        });
+        return (React.createElement("div", { className: (_c = props.classNames) !== null && _c !== void 0 ? _c : '' },
+            itemsToRender.map((item, index) => {
+                return React.createElement(React.Fragment, { key: index }, item);
+            }),
+            rowsLeftToOpen > 0 && (React.createElement("div", { className: "room-show-more" },
+                React.createElement(BEButton_1.default, { icon: Icon_1.IconType.ArrowDown2, iconPosition: "right", stopIconAnimation: true, isText: true, textColor: Color_1.Color.Navy, onClick: showMoreOnClick },
+                    t(Translation_1.Translation.Step.Room.RoomInfo.Show),
+                    " ",
+                    rowsLeftToOpen,
+                    " ",
+                    t(Translation_1.Translation.Step.Room.RoomInfo.MoreRates))))));
+    }, [props.featuredRates, rates, beContext.currentRoomSort, showingMoreOpen]);
+}
+exports.default = RoomRates;
+//# sourceMappingURL=RoomRates.js.map

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

@@ -0,0 +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';\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.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function AppliedFiltersBlock(): JSX.Element;

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

@@ -0,0 +1,42 @@
+"use strict";
+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 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 filtersByKey = Object.keys(context.currentFilters).filter((current) => {
+        return current && context.currentFilters[current] instanceof Filter_1.default;
+    });
+    if (!filtersByKey.length) {
+        return React.createElement(React.Fragment, null);
+    }
+    const onClickIconPill = () => {
+        context.setCurrentFilters({});
+    };
+    const setFiltersOnClick = () => {
+        context.setCurrentFilters({});
+    };
+    return (React.createElement("div", { className: "u-flex w-100" },
+        React.createElement("div", { className: "filter-height" }, filtersByKey &&
+            (filtersByKey.length <= 2 ? (filtersByKey.map((filter) => {
+                if (filter && context.currentFilters[filter] instanceof Filter_1.default) {
+                    const onClickIconHandler = () => {
+                        context.setCurrentFilters(Object.assign(Object.assign({}, context.currentFilters), { [filter]: null }));
+                    };
+                    return (React.createElement(Pill_1.default, { key: filter, onClickIcon: onClickIconHandler, type: Pill_1.PillType.Secondary, icon: Icon_1.IconType.Close, iconPosition: "right" }, context.currentFilters[filter].getLabel()));
+                }
+            })) : (React.createElement(Pill_1.default, { onClickIcon: onClickIconPill, type: Pill_1.PillType.Secondary, icon: Icon_1.IconType.Close, iconPosition: "right" },
+                filtersByKey.length,
+                " Filters Applied")))),
+        !!Object.values(context.currentFilters).filter((it) => !!it).length && (React.createElement(BEButton_1.default, { isText: true, size: "tiny", onClick: setFiltersOnClick }, t(Translation_1.Translation.Misc.ClearAll)))));
+}
+exports.default = AppliedFiltersBlock;
+//# sourceMappingURL=AppliedFiltersBlock.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Room } from '../../../../models/Room/Room';
+export interface RoomFilterProps {
+    anchorEl: any;
+    filter?: () => Room[];
+    open: boolean;
+    onClose?: () => void;
+}
+export default function RoomFilterOverlay(props: RoomFilterProps): JSX.Element;

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

@@ -0,0 +1,106 @@
+"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 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 react_1 = require("react");
+const RoomFilterPriceSlider_1 = require("./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 hooks_1 = require("@frontend/hooks");
+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(() => {
+        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);
+        context.setCurrentFilters(filters);
+        props.onClose();
+    };
+    const stickyFooter = (React.createElement("div", { className: "u-flex align-items-center justify-content-between justify-content-md-end" },
+        React.createElement("div", { className: "u-marg-right--heavy" },
+            React.createElement(Text_1.default, { color: Color_1.Color.Accent },
+                React.createElement("strong", null,
+                    FilterProvider_1.default.filterRooms(roomList, Object.values(filters)).length,
+                    " ",
+                    t(Translation_1.Translation.Step.Room.Filter.MatchingRoomsRates)))),
+        React.createElement(BEButton_1.default, { primary: true, filled: true, onClick: applyChangesOnClickHandler }, t(Translation_1.Translation.Misc.ApplyChanges))));
+    const updateFilters = (name, filter) => {
+        setFilters((oldFilters) => (Object.assign(Object.assign({}, oldFilters), { [name]: filter })));
+    };
+    const onPriceSliderChangeHandler = (filter) => {
+        return updateFilters('Budget', filter);
+    };
+    const onFilterTypeChangeHandler = (filter) => {
+        return updateFilters('RoomType', filter);
+    };
+    const onFilterRateChangeHandler = (filter) => {
+        return updateFilters('RateType', filter);
+    };
+    const filterInside = (React.createElement("div", { className: "room-filter" },
+        React.createElement("div", { className: "u-pad--heavy u-pad-bottom--none" },
+            context.screenSize > ScreenSize_1.default.Medium && (React.createElement("div", { className: "u-marg-bottom" },
+                React.createElement(Headline_1.default, { bold: true }, t(Translation_1.Translation.Step.Room.FilterBy)))),
+            React.createElement("div", { className: "row" },
+                React.createElement("div", { className: "col-md-6" },
+                    React.createElement(RoomFilterPriceSlider_1.default, { filter: filters.Budget, onChange: onPriceSliderChangeHandler, roomList: roomList }),
+                    React.createElement("div", { className: "u-marg-bottom--heavy" },
+                        React.createElement(RoomFilterRoomType_1.default, { roomList: roomList, filter: filters.RoomType, onChange: onFilterTypeChangeHandler }))),
+                React.createElement("div", { className: "col-md-6" },
+                    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',
+            } },
+            React.createElement(React.Fragment, null,
+                filterInside,
+                React.createElement("div", { className: "u-pad--heavy u-pad-top--none" },
+                    React.createElement(LineBreak_1.default, null),
+                    stickyFooter))));
+    }
+    else {
+        return (React.createElement(SimpleModal_1.default, { open: props.open, onClose: props.onClose, title: 'Filter', mobileFooter: stickyFooter }, filterInside));
+    }
+}
+exports.default = RoomFilterOverlay;
+//# sourceMappingURL=RoomFilterOverlay.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import BudgetFilter from '../../../../models/Room/Filters/BudgetFilter';
+import { Room } from '../../../../models/Room/Room';
+interface RoomFilterPriceSliderProps {
+    filter: BudgetFilter;
+    roomList: Room[];
+    onChange: (filter: BudgetFilter) => void;
+}
+export default function RoomFilterPriceSlider(props: RoomFilterPriceSliderProps): JSX.Element;
+export {};

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

@@ -0,0 +1,99 @@
+"use strict";
+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 react_i18next_1 = require("react-i18next");
+const BudgetFilter_1 = require("../../../../models/Room/Filters/BudgetFilter");
+const SmallSpinner_1 = require("../../../generic/loader/SmallSpinner");
+const cx = require("classnames");
+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(() => {
+        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)
+            : 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(() => {
+        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
+        // away from the edges, to avoid overlapping
+        if (range[1] < rangeDefaults[0] + rangeDifference * 0.3) {
+            setPeaksReached('left');
+        }
+        else if (range[0] > rangeDefaults[1] - rangeDifference * 0.3) {
+            setPeaksReached('right');
+        }
+        else {
+            setPeaksReached(null);
+        }
+    }, [range]);
+    const currencyObj = (value, disableLoading = false) => {
+        return (React.createElement(Currency_1.default, { hideDecimals: true, disableLoading: true }, value));
+    };
+    const budgetMarks = [
+        {
+            label: (React.createElement("span", { className: "be-slider-label --start", style: { color: Color_1.Color.Grey } }, currencyObj(rangeDefaults[0]))),
+            value: rangeDefaults[0] - 1,
+        },
+        {
+            label: (React.createElement("span", { className: "be-slider-label", style: { color: Color_1.Color.Grey } }, currencyObj(rangeDefaults[1]))),
+            value: rangeDefaults[1] + 2,
+        },
+        {
+            label: (React.createElement("span", { className: "be-slider-label --main" },
+                currencyObj(range[0]),
+                " - ",
+                currencyObj(range[1]))),
+            value: (range[1] - range[0]) / 2 + range[0],
+        },
+    ];
+    const handleBudgetChange = (event, newValue) => {
+        setRange(newValue);
+    };
+    const handleBudgetCommittedChange = (event, newValue) => {
+        props.onChange(new BudgetFilter_1.default(newValue[0], newValue[1]));
+    };
+    const reset = () => {
+        setRange(rangeDefaults);
+        props.onChange(null);
+    };
+    const resetOnClickHandler = () => {
+        return reset();
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "u-flex" },
+            React.createElement("div", null,
+                React.createElement(Text_1.default, { inline: true, type: Text_1.TextType.Small },
+                    React.createElement("strong", null, t(Translation_1.Translation.Step.Room.Filter.Budget))),
+                React.createElement(Text_1.default, { inline: true, type: Text_1.TextType.Small },
+                    "/",
+                    t(Translation_1.Translation.Misc.PerNight))),
+            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(SmallSpinner_1.default, null)))));
+}
+exports.default = RoomFilterPriceSlider;
+//# sourceMappingURL=RoomFilterPriceSlider.js.map

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

@@ -0,0 +1 @@
+{"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 '../../../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"]}

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import RateTypeFilter from '../../../../models/Room/Filters/RateTypeFilter';
+import { Room } from '../../../../models/Room/Room';
+interface RoomFilterRateTypeProps {
+    filter: RateTypeFilter;
+    roomList: Room[];
+    onChange: (filter: RateTypeFilter) => void;
+}
+export default function RoomFilterRateType(props: RoomFilterRateTypeProps): JSX.Element;
+export {};

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

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const RateTypeFilter_1 = require("../../../../models/Room/Filters/RateTypeFilter");
+const Text_1 = require("../../../generic/Text");
+const Translation_1 = require("../../../../translations/Translation");
+const BEButton_1 = require("../../../generic/BEButton");
+const react_i18next_1 = require("react-i18next");
+const Checkbox_1 = require("../../../generic/Checkbox");
+const react_1 = require("react");
+const SmallSpinner_1 = require("../../../generic/loader/SmallSpinner");
+function RoomFilterRateType(props) {
+    var _a;
+    const { t } = react_i18next_1.useTranslation();
+    const [selectedRates, setSelectedRates] = react_1.useState({});
+    const [resetCounter, setResetCounter] = react_1.useState(0);
+    const obj = react_1.useRef();
+    react_1.useEffect(() => {
+        if (props.roomList) {
+            const rateTypes = {};
+            const viewOnlyFilter = props.filter ? props.filter.getViewOnly() : null;
+            props.roomList.forEach((room) => {
+                room.getOriginalRates().forEach((rate) => {
+                    rateTypes[rate.name] = { status: viewOnlyFilter ? viewOnlyFilter.includes(rate.name) : true };
+                });
+            });
+            setSelectedRates(rateTypes);
+        }
+    }, [props.roomList, resetCounter]);
+    react_1.useEffect(() => {
+        var _a;
+        if (!(obj === null || obj === void 0 ? void 0 : obj.current) || !((_a = props.roomList) === null || _a === void 0 ? void 0 : _a.length))
+            return;
+        const allRates = Object.keys(selectedRates);
+        const rates = allRates.filter((name) => selectedRates[name].status);
+        if (allRates.length === rates.length) {
+            props.onChange(null);
+        }
+        else {
+            props.onChange(new RateTypeFilter_1.default(rates));
+        }
+    }, [selectedRates]);
+    const resetCounterOnClick = () => {
+        props.onChange(null);
+        setResetCounter((old) => old + 1);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "u-flex u-marg-bottom", ref: obj },
+            React.createElement(Text_1.default, { inline: true, type: Text_1.TextType.Small },
+                React.createElement("strong", null, t(Translation_1.Translation.Step.Room.Filter.RateType))),
+            React.createElement(BEButton_1.default, { size: "tiny", isText: true, disabled: !props.filter, onClick: resetCounterOnClick }, t(Translation_1.Translation.Misc.Clear))),
+        React.createElement("div", null, ((_a = props.roomList) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (selectedRates &&
+            Object.keys(selectedRates).map((selectedRateKey) => {
+                const onChangeHandler = (value) => {
+                    const oldRates = Object.assign({}, selectedRates);
+                    oldRates[selectedRateKey].status = value;
+                    setSelectedRates(oldRates);
+                };
+                return (React.createElement("div", { className: "u-marg-bottom--light", key: selectedRateKey },
+                    React.createElement(Checkbox_1.default, { label: selectedRateKey, checked: selectedRates[selectedRateKey].status, onChange: onChangeHandler })));
+            })) : (React.createElement("div", { className: "u-marg-top-bottom u-flex justify-content-center" },
+            React.createElement(SmallSpinner_1.default, null))))));
+}
+exports.default = RoomFilterRateType;
+//# sourceMappingURL=RoomFilterRateType.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RoomFilterRateType.js","sourceRoot":"/","sources":["src/components/steps/room/roomFilter/RoomFilterRateType.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport RateTypeFilter from '../../../../models/Room/Filters/RateTypeFilter';\nimport { Room } from '../../../../models/Room/Room';\nimport Text, { TextType } from '../../../generic/Text';\nimport { Translation } from '../../../../translations/Translation';\nimport BEButton from '../../../generic/BEButton';\nimport { useTranslation } from 'react-i18next';\nimport Checkbox from '../../../generic/Checkbox';\nimport { useState, useEffect, useRef } from 'react';\nimport SmallSpinner from '../../../generic/loader/SmallSpinner';\n\ninterface RoomFilterRateTypeProps {\n    filter: RateTypeFilter;\n    roomList: Room[];\n    onChange: (filter: RateTypeFilter) => void;\n}\n\ninterface RoomFilterRateTypeStatusType {\n    [name: string]: {\n        status: boolean;\n    };\n}\n\nexport default function RoomFilterRateType(props: RoomFilterRateTypeProps) {\n    const { t } = useTranslation();\n\n    const [selectedRates, setSelectedRates] = useState<{ [name: string]: { status: boolean } }>({});\n    const [resetCounter, setResetCounter] = useState(0);\n    const obj = useRef();\n\n    useEffect(() => {\n        if (props.roomList) {\n            const rateTypes: RoomFilterRateTypeStatusType = {};\n            const viewOnlyFilter = props.filter ? props.filter.getViewOnly() : null;\n\n            props.roomList.forEach((room) => {\n                room.getOriginalRates().forEach((rate) => {\n                    rateTypes[rate.name] = { status: viewOnlyFilter ? viewOnlyFilter.includes(rate.name) : true };\n                });\n            });\n\n            setSelectedRates(rateTypes);\n        }\n    }, [props.roomList, resetCounter]);\n\n    useEffect(() => {\n        if (!obj?.current || !props.roomList?.length) return;\n\n        const allRates = Object.keys(selectedRates);\n        const rates = allRates.filter((name) => selectedRates[name].status);\n\n        if (allRates.length === rates.length) {\n            props.onChange(null);\n        } else {\n            props.onChange(new RateTypeFilter(rates));\n        }\n    }, [selectedRates]);\n    const resetCounterOnClick = () => {\n        props.onChange(null);\n        setResetCounter((old) => old + 1);\n    };\n    return (\n        <>\n            <div className=\"u-flex u-marg-bottom\" ref={obj}>\n                <Text inline={true} type={TextType.Small}>\n                    <strong>{t(Translation.Step.Room.Filter.RateType)}</strong>\n                </Text>\n                <BEButton size=\"tiny\" isText={true} disabled={!props.filter} onClick={resetCounterOnClick}>\n                    {t(Translation.Misc.Clear)}\n                </BEButton>\n            </div>\n            <div>\n                {props.roomList?.length > 0 ? (\n                    selectedRates &&\n                    Object.keys(selectedRates).map((selectedRateKey) => {\n                        const onChangeHandler = (value: any) => {\n                            const oldRates = { ...selectedRates };\n                            oldRates[selectedRateKey].status = value;\n                            setSelectedRates(oldRates);\n                        };\n                        return (\n                            <div className=\"u-marg-bottom--light\" key={selectedRateKey}>\n                                <Checkbox label={selectedRateKey} checked={selectedRates[selectedRateKey].status} onChange={onChangeHandler} />\n                            </div>\n                        );\n                    })\n                ) : (\n                    <div className=\"u-marg-top-bottom u-flex justify-content-center\">\n                        <SmallSpinner />\n                    </div>\n                )}\n            </div>\n        </>\n    );\n}\n"]}