@roomstay/frontend 1.3.0

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

@@ -0,0 +1,120 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PriceBreakdownFooter = void 0;
+const React = require("react");
+const react_i18next_1 = require("react-i18next");
+const contexts_1 = require("@frontend/contexts");
+const Color_1 = require("../../../../../util/Color");
+const StringHelper_1 = require("../../../../../util/StringHelper");
+const Translation_1 = require("../../../../../translations/Translation");
+const Text_1 = require("../../../../generic/Text");
+const Headline_1 = require("../../../../generic/Headline");
+const LineBreak_1 = require("../../../../generic/LineBreak");
+const Currency_1 = require("../../../../generic/Currency");
+const RoomDetailsPriceBlock_1 = require("../RoomDetailsPriceBlock");
+const BookNowButton_1 = require("./BookNowButton");
+const react_1 = require("react");
+const contexts_2 = require("@frontend/contexts");
+exports.PriceBreakdownFooter = (props) => {
+    var _a, _b, _c;
+    const { t } = react_i18next_1.useTranslation();
+    const basketContext = react_1.useContext(contexts_1.BasketContext);
+    // Just like the room list, if none are selected we select the last one. Possible refactor here & room list?
+    // TODO
+    const basketRow = (_a = basketContext.selectedBasketRow) !== null && _a !== void 0 ? _a : basketContext.currentBasketRows[basketContext.currentBasketRows.length - 1];
+    const { rate } = props;
+    const days = [];
+    const totalDays = (_c = (_b = basketRow === null || basketRow === void 0 ? void 0 : basketRow.getEndDate()) === null || _b === void 0 ? void 0 : _b.diff(basketRow === null || basketRow === void 0 ? void 0 : basketRow.getStartDate(), 'day')) !== null && _c !== void 0 ? _c : 0;
+    for (let i = 0; i <= totalDays; i++) {
+        const currentDay = basketRow === null || basketRow === void 0 ? void 0 : basketRow.getStartDate().add(i, 'day');
+        if (currentDay) {
+            days.push(currentDay.format('dddd, MMM DD, YYYY'));
+        }
+    }
+    const bookButtonLabel = props.getButtonLabel ? props.getButtonLabel(false, false) : t(Translation_1.Translation.Step.Room.RoomInfo.BookNow);
+    return (React.createElement("div", { className: "u-flex align-items-center" },
+        React.createElement(Text_1.default, { color: Color_1.Color.DarkGrey },
+            basketRow !== null && (React.createElement(React.Fragment, null,
+                StringHelper_1.default.pluralWithDictAndCount(basketRow === null || basketRow === void 0 ? void 0 : basketRow.getAdults(), Translation_1.Translation.Step.Date.Adult, t),
+                ",\u00A0",
+                StringHelper_1.default.pluralWithDictAndCount(basketRow === null || basketRow === void 0 ? void 0 : basketRow.getChildren(), Translation_1.Translation.Step.Date.Child, t),
+                ",\u00A0")),
+            StringHelper_1.default.pluralWithDictAndCount(days.length - 1, Translation_1.Translation.Misc.Night, t)),
+        React.createElement("div", { className: "u-flex align-items-center" },
+            React.createElement(BookNowButton_1.default, { isFilled: true, rate: props.rate, buttonLabel: bookButtonLabel, onAddToBasketOverride: props.onAddToBasketOverride }))));
+};
+function PriceBreakdownBlock(props) {
+    var _a, _b;
+    const { t } = react_i18next_1.useTranslation();
+    const ccx = react_1.useContext(contexts_2.CompanyContext);
+    const basketContext = React.useContext(contexts_1.BasketContext);
+    const selectedRow = (_a = basketContext.selectedBasketRow) !== null && _a !== void 0 ? _a : basketContext.currentBasketRows[basketContext.currentBasketRows.length - 1];
+    const { rate } = props;
+    const days = [];
+    const totalDays = (_b = selectedRow === null || selectedRow === void 0 ? void 0 : selectedRow.getEndDate().diff(selectedRow === null || selectedRow === void 0 ? void 0 : selectedRow.getStartDate(), 'day')) !== null && _b !== void 0 ? _b : 0;
+    for (let i = 0; i <= totalDays; i++) {
+        const currentDay = selectedRow === null || selectedRow === void 0 ? void 0 : selectedRow.getStartDate().add(i, 'day');
+        if (currentDay) {
+            days.push(currentDay.format('dddd, MMM DD, YYYY'));
+        }
+    }
+    const nightRates = Object.values(rate.nightRates);
+    let isLocked = false;
+    if (rate.isMemberOnly && !ccx.signedInUser) {
+        isLocked = true;
+    }
+    const totalFees = rate.getTotalFees();
+    const totalTax = rate.getTotalTaxes();
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "row" },
+            React.createElement("div", { className: "col-md-6" },
+                React.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.DarkGrey }, t(Translation_1.Translation.Step.Room.Filter.RoomType)),
+                React.createElement("div", { className: "u-flex" },
+                    React.createElement(Headline_1.default, null,
+                        React.createElement("strong", null, rate.getRoom().name)))),
+            React.createElement("div", { className: "col-md-6" },
+                React.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.DarkGrey }, t(Translation_1.Translation.Step.Room.Filter.RateType)),
+                React.createElement("div", { className: "u-flex" },
+                    React.createElement(Headline_1.default, null,
+                        React.createElement("strong", null, rate.name))))),
+        React.createElement(LineBreak_1.default, null),
+        days.map((day, index) => {
+            const isLastDay = index === days.length - 1;
+            const nightRate = nightRates[index];
+            if (!nightRate && !isLastDay) {
+                return;
+            }
+            return (React.createElement("div", { className: "u-flex u-marg-bottom", key: index },
+                React.createElement(Text_1.default, null, day),
+                isLastDay ? (React.createElement(Text_1.default, { color: Color_1.Color.Success }, t(Translation_1.Translation.Misc.CheckOut))) : (React.createElement(Text_1.default, { color: Color_1.Color.DarkGrey, className: "u-pos-rel" },
+                    Number(nightRate.discount) > 0 && (React.createElement("span", { style: {
+                            textDecoration: 'line-through',
+                            fontSize: '14px',
+                            height: '1.1em',
+                            position: 'absolute',
+                            top: '0',
+                            right: '0',
+                            transform: 'translateY(-100%)',
+                        }, className: "u-cross-out" },
+                        React.createElement(Currency_1.default, null, nightRate.cost + nightRate.discount))),
+                    React.createElement("span", { className: "u-primary u-bold" },
+                        React.createElement(Currency_1.default, null, nightRate.cost))))));
+        }),
+        !!totalFees && (React.createElement("div", { className: "u-flex u-marg-bottom" },
+            React.createElement(Text_1.default, null, t(Translation_1.Translation.Step.Room.Summary.Fees)),
+            React.createElement(Text_1.default, { color: Color_1.Color.DarkGrey },
+                React.createElement(Currency_1.default, null, totalFees)))),
+        !!totalTax && (React.createElement("div", { className: "u-flex u-marg-bottom" },
+            React.createElement(Text_1.default, null, t(Translation_1.Translation.Step.Room.Summary.Taxes)),
+            React.createElement(Text_1.default, { color: Color_1.Color.DarkGrey },
+                React.createElement(Currency_1.default, null, totalTax)))),
+        React.createElement("div", { className: "u-marg-top-bottom--heavy u-flex flex-column align-items-end" },
+            React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Navy }, t(Translation_1.Translation.Misc.Total)),
+            React.createElement(RoomDetailsPriceBlock_1.default, { isLocked: isLocked, averagePreDiscount: rate.getTotalPriceBeforeDiscount(), averagePrice: rate.getTotalPrice(), isMemberOnly: props.rate.isMemberOnly, hidePerNight: true }),
+            React.createElement("div", { className: "u-marg-bottom" },
+                React.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.DarkGrey, inline: true },
+                    t(Translation_1.Translation.Step.Room.RoomInfo.IncludesTaxes),
+                    ".")))));
+}
+exports.default = PriceBreakdownBlock;
+//# sourceMappingURL=PriceBreakdownBlock.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PriceBreakdownBlock.js","sourceRoot":"/","sources":["src/components/steps/room/roomDetails/roomRates/PriceBreakdownBlock.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { RoomRate } from '../../../../../models/Room/RoomRate';\nimport { useTranslation } from 'react-i18next';\nimport { BasketContext } from '@frontend/contexts';\nimport { Color } from '../../../../../util/Color';\nimport StringHelper from '../../../../../util/StringHelper';\nimport { Translation } from '../../../../../translations/Translation';\nimport Text, { TextType } from '../../../../generic/Text';\nimport Headline from '../../../../generic/Headline';\nimport LineBreak from '../../../../generic/LineBreak';\nimport Currency from '../../../../generic/Currency';\nimport RoomDetailsPriceBlock from '../RoomDetailsPriceBlock';\nimport BookNowButton from './BookNowButton';\nimport { useContext } from 'react';\nimport { CompanyContext } from '@frontend/contexts';\n\ninterface RoomModalProps {\n    rate: RoomRate;\n    onClose?: (closedByBooking: boolean) => void;\n}\ninterface PriceBreakdownFooterProps {\n    rate: RoomRate;\n    onClose: () => void;\n\n    getButtonLabel?: (isRoomSelectedAndEditing: boolean, isThisSelectedRow: boolean) => string;\n    onAddToBasketOverride?: (rate: RoomRate) => void;\n}\n\nexport const PriceBreakdownFooter = (props: PriceBreakdownFooterProps) => {\n    const { t } = useTranslation();\n\n    const basketContext = useContext(BasketContext);\n    // Just like the room list, if none are selected we select the last one. Possible refactor here & room list?\n    // TODO\n    const basketRow = basketContext.selectedBasketRow ?? basketContext.currentBasketRows[basketContext.currentBasketRows.length - 1];\n\n    const { rate } = props;\n\n    const days: any = [];\n    const totalDays = basketRow?.getEndDate()?.diff(basketRow?.getStartDate(), 'day') ?? 0;\n\n    for (let i = 0; i <= totalDays; i++) {\n        const currentDay = basketRow?.getStartDate().add(i, 'day');\n        if (currentDay) {\n            days.push(currentDay.format('dddd, MMM DD, YYYY'));\n        }\n    }\n\n    const bookButtonLabel = props.getButtonLabel ? props.getButtonLabel(false, false) : t(Translation.Step.Room.RoomInfo.BookNow);\n\n    return (\n        <div className=\"u-flex align-items-center\">\n            <Text color={Color.DarkGrey}>\n                {basketRow !== null && (\n                    <>\n                        {StringHelper.pluralWithDictAndCount(basketRow?.getAdults(), Translation.Step.Date.Adult, t)},&nbsp;\n                        {StringHelper.pluralWithDictAndCount(basketRow?.getChildren(), Translation.Step.Date.Child, t)},&nbsp;\n                    </>\n                )}\n                {StringHelper.pluralWithDictAndCount(days.length - 1, Translation.Misc.Night, t)}\n            </Text>\n            <div className=\"u-flex align-items-center\">\n                <BookNowButton isFilled={true} rate={props.rate} buttonLabel={bookButtonLabel} onAddToBasketOverride={props.onAddToBasketOverride} />\n            </div>\n        </div>\n    );\n};\n\nexport default function PriceBreakdownBlock(props: RoomModalProps) {\n    const { t } = useTranslation();\n    const ccx = useContext(CompanyContext);\n\n    const basketContext = React.useContext(BasketContext);\n\n    const selectedRow = basketContext.selectedBasketRow ?? basketContext.currentBasketRows[basketContext.currentBasketRows.length - 1];\n\n    const { rate } = props;\n\n    const days: any = [];\n\n    const totalDays = selectedRow?.getEndDate().diff(selectedRow?.getStartDate(), 'day') ?? 0;\n\n    for (let i = 0; i <= totalDays; i++) {\n        const currentDay = selectedRow?.getStartDate().add(i, 'day');\n        if (currentDay) {\n            days.push(currentDay.format('dddd, MMM DD, YYYY'));\n        }\n    }\n\n    const nightRates = Object.values(rate.nightRates);\n\n    let isLocked = false;\n    if (rate.isMemberOnly && !ccx.signedInUser) {\n        isLocked = true;\n    }\n\n    const totalFees = rate.getTotalFees();\n    const totalTax = rate.getTotalTaxes();\n\n    return (\n        <>\n            <div className=\"row\">\n                <div className=\"col-md-6\">\n                    <Text type={TextType.Label} color={Color.DarkGrey}>\n                        {t(Translation.Step.Room.Filter.RoomType)}\n                    </Text>\n                    <div className=\"u-flex\">\n                        <Headline>\n                            <strong>{rate.getRoom().name}</strong>\n                        </Headline>\n                    </div>\n                </div>\n                <div className=\"col-md-6\">\n                    <Text type={TextType.Label} color={Color.DarkGrey}>\n                        {t(Translation.Step.Room.Filter.RateType)}\n                    </Text>\n                    <div className=\"u-flex\">\n                        <Headline>\n                            <strong>{rate.name}</strong>\n                        </Headline>\n                    </div>\n                </div>\n            </div>\n            <LineBreak />\n            {days.map((day: any, index: number) => {\n                const isLastDay = index === days.length - 1;\n\n                const nightRate = nightRates[index];\n\n                if (!nightRate && !isLastDay) {\n                    return;\n                }\n\n                return (\n                    <div className=\"u-flex u-marg-bottom\" key={index}>\n                        <Text>{day}</Text>\n                        {isLastDay ? (\n                            <Text color={Color.Success}>{t(Translation.Misc.CheckOut)}</Text>\n                        ) : (\n                            <Text color={Color.DarkGrey} className=\"u-pos-rel\">\n                                {Number(nightRate.discount) > 0 && (\n                                    <span\n                                        style={{\n                                            textDecoration: 'line-through',\n                                            fontSize: '14px',\n                                            height: '1.1em',\n                                            position: 'absolute',\n                                            top: '0',\n                                            right: '0',\n                                            transform: 'translateY(-100%)',\n                                        }}\n                                        className=\"u-cross-out\"\n                                    >\n                                        <Currency>{nightRate.cost + nightRate.discount}</Currency>\n                                    </span>\n                                )}\n                                <span className=\"u-primary u-bold\">\n                                    <Currency>{nightRate.cost}</Currency>\n                                </span>\n                            </Text>\n                        )}\n                    </div>\n                );\n            })}\n            {!!totalFees && (\n                <div className=\"u-flex u-marg-bottom\">\n                    <Text>{t(Translation.Step.Room.Summary.Fees)}</Text>\n                    <Text color={Color.DarkGrey}>\n                        <Currency>{totalFees}</Currency>\n                    </Text>\n                </div>\n            )}\n            {!!totalTax && (\n                <div className=\"u-flex u-marg-bottom\">\n                    <Text>{t(Translation.Step.Room.Summary.Taxes)}</Text>\n                    <Text color={Color.DarkGrey}>\n                        <Currency>{totalTax}</Currency>\n                    </Text>\n                </div>\n            )}\n\n            <div className=\"u-marg-top-bottom--heavy u-flex flex-column align-items-end\">\n                <Text type={TextType.Small} color={Color.Navy}>\n                    {t(Translation.Misc.Total)}\n                </Text>\n                <RoomDetailsPriceBlock\n                    isLocked={isLocked}\n                    averagePreDiscount={rate.getTotalPriceBeforeDiscount()}\n                    averagePrice={rate.getTotalPrice()}\n                    isMemberOnly={props.rate.isMemberOnly}\n                    hidePerNight={true}\n                />\n                <div className=\"u-marg-bottom\">\n                    <Text type={TextType.Label} color={Color.DarkGrey} inline={true}>\n                        {t(Translation.Step.Room.RoomInfo.IncludesTaxes)}.\n                    </Text>\n                </div>\n            </div>\n        </>\n    );\n}\n"]}

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { RoomRate } from '../../../../../models/Room/RoomRate';
+interface RoomRateDescriptionTabProps {
+    rate: RoomRate;
+}
+interface RoomRateDescriptionFooterProps {
+    rate: RoomRate;
+    onClose: () => void;
+    getButtonLabel?: (isRoomSelectedAndEditing: boolean, isThisSelectedRow: boolean) => string;
+    onAddToBasketOverride?: (rate: RoomRate) => void;
+}
+export declare const RoomRateDescriptionFooter: (props: RoomRateDescriptionFooterProps) => JSX.Element;
+export default function RoomRateDescriptionTab(props: RoomRateDescriptionTabProps): JSX.Element;
+export {};

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

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RoomRateDescriptionFooter = void 0;
+const React = require("react");
+const Headline_1 = require("../../../../generic/Headline");
+const LineBreak_1 = require("../../../../generic/LineBreak");
+const Text_1 = require("../../../../generic/Text");
+const react_i18next_1 = require("react-i18next");
+const Translation_1 = require("../../../../../translations/Translation");
+const Color_1 = require("../../../../../util/Color");
+const TextAlignment_1 = require("../../../../../util/TextAlignment");
+const BEButton_1 = require("../../../../generic/BEButton");
+const react_1 = require("react");
+const RoomDetailsPriceBlock_1 = require("../RoomDetailsPriceBlock");
+const DataLayer_1 = require("../../../../../util/DataLayer");
+const BookNowButton_1 = require("./BookNowButton");
+const contexts_1 = require("@frontend/contexts");
+exports.RoomRateDescriptionFooter = (props) => {
+    const { t } = react_i18next_1.useTranslation();
+    const ccx = react_1.useContext(contexts_1.CompanyContext);
+    const { rate } = props;
+    let isLocked = false;
+    if (rate.isMemberOnly && !ccx.signedInUser) {
+        isLocked = true;
+    }
+    const bookButtonLabel = props.getButtonLabel ? props.getButtonLabel(false, false) : t(Translation_1.Translation.Step.Room.RoomInfo.BookNow);
+    const openSignupModalOnClick = () => {
+        DataLayer_1.default.instance.sendInteraction('Member Signup Modal', DataLayer_1.InteractionType.LINK, DataLayer_1.InteractionStep.ROOMS);
+        ccx.openMemberSignupModal();
+    };
+    const bookNowButton = isLocked ? (React.createElement(BEButton_1.default, { filled: true, success: true, onClick: openSignupModalOnClick }, t(Translation_1.Translation.Step.Room.RoomInfo.RevealPrice))) : (React.createElement(BookNowButton_1.default, { isFilled: true, rate: props.rate, buttonLabel: bookButtonLabel, onAddToBasketOverride: props.onAddToBasketOverride }));
+    const priceBlock = React.createElement("div", { className: "u-flex flex-column align-items-start align-items-md-end justify-content-start" });
+    return (React.createElement("div", { className: "u-flex" },
+        priceBlock,
+        React.createElement("div", { className: "u-flex align-items-center" }, bookNowButton)));
+};
+function RoomRateDescriptionTab(props) {
+    var _a;
+    const ccx = react_1.useContext(contexts_1.CompanyContext);
+    const { t } = react_i18next_1.useTranslation();
+    const cancelPolicy = props.rate.getCancellationPolicy();
+    const guaranteePolicy = props.rate.getGuaranteePolicy();
+    let isLocked = false;
+    if (props.rate.isMemberOnly && !ccx.signedInUser) {
+        isLocked = true;
+    }
+    const rate = props.rate;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", null,
+            React.createElement("div", { className: "u-marg-bottom--light" },
+                React.createElement(Headline_1.default, { bold: true }, props.rate.name)),
+            React.createElement("div", { className: "text-small u-pre-wrap u-clear-font-weight", dangerouslySetInnerHTML: { __html: (_a = props.rate.longDescription) !== null && _a !== void 0 ? _a : props.rate.description } }),
+            React.createElement(LineBreak_1.default, null),
+            React.createElement("div", { className: "u-marg-bottom--light" },
+                React.createElement(Text_1.default, null,
+                    React.createElement("strong", null, t(Translation_1.Translation.Step.Confirmation.Policies)))),
+            React.createElement("div", { className: "u-marg-bottom--heavy" },
+                guaranteePolicy && (React.createElement("div", { className: "u-marg-bottom--heavy" },
+                    React.createElement("div", { className: "u-marg-bottom--light" },
+                        React.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                            React.createElement("strong", null, t(Translation_1.Translation.Misc.GuaranteePolicy)))),
+                    React.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                        React.createElement("span", { className: "u-clear-font-weight", dangerouslySetInnerHTML: { __html: guaranteePolicy } })))),
+                React.createElement("div", { className: "u-marg-bottom--heavy" },
+                    React.createElement("div", { className: "u-marg-bottom--light" },
+                        React.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                            React.createElement("strong", null, t(Translation_1.Translation.Misc.CancellationPolicy)))),
+                    React.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                        React.createElement("span", { className: "u-clear-font-weight", dangerouslySetInnerHTML: { __html: cancelPolicy } })))),
+            React.createElement("div", { className: "u-flex flex-column align-items-start align-items-md-end justify-content-end" },
+                React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Navy }, t(Translation_1.Translation.Misc.Total)),
+                React.createElement(RoomDetailsPriceBlock_1.default, { isLocked: isLocked, averagePreDiscount: rate.getTotalPriceBeforeDiscount(), averagePrice: rate.getTotalPrice(), isMemberOnly: props.rate.isMemberOnly, hidePerNight: true }),
+                React.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.DarkGrey, align: TextAlignment_1.TextAlign.Right }, t(Translation_1.Translation.Step.Room.RoomInfo.IncludesTaxes))))));
+}
+exports.default = RoomRateDescriptionTab;
+//# sourceMappingURL=RoomRateDescriptionTab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RoomRateDescriptionTab.js","sourceRoot":"/","sources":["src/components/steps/room/roomDetails/roomRates/RoomRateDescriptionTab.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,2DAAoD;AACpD,6DAAsD;AACtD,mDAA0D;AAC1D,iDAA+C;AAC/C,yEAAsE;AACtE,qDAAkD;AAClD,qEAA8D;AAC9D,2DAAoD;AACpD,iCAAmC;AACnC,oEAA6D;AAC7D,6DAA4F;AAC5F,mDAA4C;AAC5C,iDAAoD;AAavC,QAAA,yBAAyB,GAAG,CAAC,KAAqC,EAAE,EAAE;IAC/E,MAAM,EAAE,CAAC,EAAE,GAAG,8BAAc,EAAE,CAAC;IAC/B,MAAM,GAAG,GAAG,kBAAU,CAAC,yBAAc,CAAC,CAAC;IAEvC,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAEvB,IAAI,QAAQ,GAAG,KAAK,CAAC;IAErB,IAAI,IAAI,CAAC,YAAY,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;QACxC,QAAQ,GAAG,IAAI,CAAC;KACnB;IAED,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IAE9H,MAAM,sBAAsB,GAAG,GAAG,EAAE;QAChC,mBAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,qBAAqB,EAAE,2BAAe,CAAC,IAAI,EAAE,2BAAe,CAAC,KAAK,CAAC,CAAC;QACvG,GAAG,CAAC,qBAAqB,EAAE,CAAC;IAChC,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAC,CAC7B,oBAAC,kBAAQ,IAAC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,sBAAsB,IACjE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,CACvC,CACd,CAAC,CAAC,CAAC,CACA,oBAAC,uBAAa,IAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,WAAW,EAAE,eAAe,EAAE,qBAAqB,EAAE,KAAK,CAAC,qBAAqB,GAAI,CACxI,CAAC;IAEF,MAAM,UAAU,GAAG,6BAAK,SAAS,EAAC,+EAA+E,GAAG,CAAC;IAErH,OAAO,CACH,6BAAK,SAAS,EAAC,QAAQ;QAClB,UAAU;QACX,6BAAK,SAAS,EAAC,2BAA2B,IAAE,aAAa,CAAO,CAC9D,CACT,CAAC;AACN,CAAC,CAAC;AAEF,SAAwB,sBAAsB,CAAC,KAAkC;;IAC7E,MAAM,GAAG,GAAG,kBAAU,CAAC,yBAAc,CAAC,CAAC;IAEvC,MAAM,EAAE,CAAC,EAAE,GAAG,8BAAc,EAAE,CAAC;IAC/B,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC;IACxD,MAAM,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAExD,IAAI,QAAQ,GAAG,KAAK,CAAC;IACrB,IAAI,KAAK,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;QAC9C,QAAQ,GAAG,IAAI,CAAC;KACnB;IAED,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;IAExB,OAAO,CACH;QACI;YACI,6BAAK,SAAS,EAAC,sBAAsB;gBACjC,oBAAC,kBAAQ,IAAC,IAAI,EAAE,IAAI,IAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAY,CAChD;YAEN,6BAAK,SAAS,EAAC,2CAA2C,EAAC,uBAAuB,EAAE,EAAE,MAAM,QAAE,KAAK,CAAC,IAAI,CAAC,eAAe,mCAAI,KAAK,CAAC,IAAI,CAAC,WAAW,EAAE,GAAI;YAExJ,oBAAC,mBAAS,OAAG;YACb,6BAAK,SAAS,EAAC,sBAAsB;gBACjC,oBAAC,cAAI;oBACD,oCAAS,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAU,CACzD,CACL;YACN,6BAAK,SAAS,EAAC,sBAAsB;gBAChC,eAAe,IAAI,CAChB,6BAAK,SAAS,EAAC,sBAAsB;oBACjC,6BAAK,SAAS,EAAC,sBAAsB;wBACjC,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK;4BACtB,oCAAS,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,eAAe,CAAC,CAAU,CACnD,CACL;oBACN,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK;wBACtB,8BAAM,SAAS,EAAC,qBAAqB,EAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,eAAe,EAAE,GAAI,CAC3F,CACL,CACT;gBAEG,6BAAK,SAAS,EAAC,sBAAsB;oBACjC,6BAAK,SAAS,EAAC,sBAAsB;wBACjC,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK;4BACtB,oCAAS,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAU,CACtD,CACL;oBACN,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK;wBACtB,8BAAM,SAAS,EAAC,qBAAqB,EAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE,GAAI,CACxF,CACL,CAER;YAEN,6BAAK,SAAS,EAAC,6EAA6E;gBACxF,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,aAAK,CAAC,IAAI,IACxC,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CACvB;gBACP,oBAAC,+BAAqB,IAClB,QAAQ,EAAE,QAAQ,EAClB,kBAAkB,EAAE,IAAI,CAAC,2BAA2B,EAAE,EACtD,YAAY,EAAE,IAAI,CAAC,aAAa,EAAE,EAClC,YAAY,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,EACrC,YAAY,EAAE,IAAI,GACpB;gBACF,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,aAAK,CAAC,QAAQ,EAAE,KAAK,EAAE,yBAAS,CAAC,KAAK,IACpE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,CAC7C,CACL,CACJ,CACP,CACN,CAAC;AACN,CAAC;AA1ED,yCA0EC","sourcesContent":["import * as React from 'react';\nimport { RoomRate } from '../../../../../models/Room/RoomRate';\nimport Headline from '../../../../generic/Headline';\nimport LineBreak from '../../../../generic/LineBreak';\nimport Text, { TextType } from '../../../../generic/Text';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from '../../../../../translations/Translation';\nimport { Color } from '../../../../../util/Color';\nimport { TextAlign } from '../../../../../util/TextAlignment';\nimport BEButton from '../../../../generic/BEButton';\nimport { useContext } from 'react';\nimport RoomDetailsPriceBlock from '../RoomDetailsPriceBlock';\nimport DataLayer, { InteractionStep, InteractionType } from '../../../../../util/DataLayer';\nimport BookNowButton from './BookNowButton';\nimport { CompanyContext } from '@frontend/contexts';\n\ninterface RoomRateDescriptionTabProps {\n    rate: RoomRate;\n}\ninterface RoomRateDescriptionFooterProps {\n    rate: RoomRate;\n    onClose: () => void;\n\n    getButtonLabel?: (isRoomSelectedAndEditing: boolean, isThisSelectedRow: boolean) => string;\n    onAddToBasketOverride?: (rate: RoomRate) => void;\n}\n\nexport const RoomRateDescriptionFooter = (props: RoomRateDescriptionFooterProps) => {\n    const { t } = useTranslation();\n    const ccx = useContext(CompanyContext);\n\n    const { rate } = props;\n\n    let isLocked = false;\n\n    if (rate.isMemberOnly && !ccx.signedInUser) {\n        isLocked = true;\n    }\n\n    const bookButtonLabel = props.getButtonLabel ? props.getButtonLabel(false, false) : t(Translation.Step.Room.RoomInfo.BookNow);\n\n    const openSignupModalOnClick = () => {\n        DataLayer.instance.sendInteraction('Member Signup Modal', InteractionType.LINK, InteractionStep.ROOMS);\n        ccx.openMemberSignupModal();\n    };\n\n    const bookNowButton = isLocked ? (\n        <BEButton filled={true} success={true} onClick={openSignupModalOnClick}>\n            {t(Translation.Step.Room.RoomInfo.RevealPrice)}\n        </BEButton>\n    ) : (\n        <BookNowButton isFilled={true} rate={props.rate} buttonLabel={bookButtonLabel} onAddToBasketOverride={props.onAddToBasketOverride} />\n    );\n\n    const priceBlock = <div className=\"u-flex flex-column align-items-start align-items-md-end justify-content-start\" />;\n\n    return (\n        <div className=\"u-flex\">\n            {priceBlock}\n            <div className=\"u-flex align-items-center\">{bookNowButton}</div>\n        </div>\n    );\n};\n\nexport default function RoomRateDescriptionTab(props: RoomRateDescriptionTabProps) {\n    const ccx = useContext(CompanyContext);\n\n    const { t } = useTranslation();\n    const cancelPolicy = props.rate.getCancellationPolicy();\n    const guaranteePolicy = props.rate.getGuaranteePolicy();\n\n    let isLocked = false;\n    if (props.rate.isMemberOnly && !ccx.signedInUser) {\n        isLocked = true;\n    }\n\n    const rate = props.rate;\n\n    return (\n        <>\n            <div>\n                <div className=\"u-marg-bottom--light\">\n                    <Headline bold={true}>{props.rate.name}</Headline>\n                </div>\n\n                <div className=\"text-small u-pre-wrap u-clear-font-weight\" dangerouslySetInnerHTML={{ __html: props.rate.longDescription ?? props.rate.description }} />\n\n                <LineBreak />\n                <div className=\"u-marg-bottom--light\">\n                    <Text>\n                        <strong>{t(Translation.Step.Confirmation.Policies)}</strong>\n                    </Text>\n                </div>\n                <div className=\"u-marg-bottom--heavy\">\n                    {guaranteePolicy && (\n                        <div className=\"u-marg-bottom--heavy\">\n                            <div className=\"u-marg-bottom--light\">\n                                <Text type={TextType.Small}>\n                                    <strong>{t(Translation.Misc.GuaranteePolicy)}</strong>\n                                </Text>\n                            </div>\n                            <Text type={TextType.Small}>\n                                <span className=\"u-clear-font-weight\" dangerouslySetInnerHTML={{ __html: guaranteePolicy }} />\n                            </Text>\n                        </div>\n                    )}\n                    {\n                        <div className=\"u-marg-bottom--heavy\">\n                            <div className=\"u-marg-bottom--light\">\n                                <Text type={TextType.Small}>\n                                    <strong>{t(Translation.Misc.CancellationPolicy)}</strong>\n                                </Text>\n                            </div>\n                            <Text type={TextType.Small}>\n                                <span className=\"u-clear-font-weight\" dangerouslySetInnerHTML={{ __html: cancelPolicy }} />\n                            </Text>\n                        </div>\n                    }\n                </div>\n\n                <div className=\"u-flex flex-column align-items-start align-items-md-end justify-content-end\">\n                    <Text type={TextType.Small} color={Color.Navy}>\n                        {t(Translation.Misc.Total)}\n                    </Text>\n                    <RoomDetailsPriceBlock\n                        isLocked={isLocked}\n                        averagePreDiscount={rate.getTotalPriceBeforeDiscount()}\n                        averagePrice={rate.getTotalPrice()}\n                        isMemberOnly={props.rate.isMemberOnly}\n                        hidePerNight={true}\n                    />\n                    <Text type={TextType.Label} color={Color.DarkGrey} align={TextAlign.Right}>\n                        {t(Translation.Step.Room.RoomInfo.IncludesTaxes)}\n                    </Text>\n                </div>\n            </div>\n        </>\n    );\n}\n"]}

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { RoomRate } from '../../../../../models/Room/RoomRate';
+export declare enum RoomRateDetailsAndPriceBreakdownModalTabs {
+    PriceBreakdown = "Price Breakdown",
+    RoomDetails = "Room Details"
+}
+interface RoomRateDetailsAndPriceBreakdownModalProps {
+    isOpen: boolean;
+    currentTab: RoomRateDetailsAndPriceBreakdownModalTabs;
+    rate: RoomRate;
+    getButtonLabel?: (isRoomSelectedAndEditing: boolean, isThisSelectedRow: boolean) => string;
+    onAddToBasketOverride?: (rate: RoomRate) => void;
+    onClose: () => void;
+}
+export default function RoomRateDetailsAndPriceBreakdownModal(props: RoomRateDetailsAndPriceBreakdownModalProps): JSX.Element;
+export {};

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RoomRateDetailsAndPriceBreakdownModalTabs = void 0;
+const React = require("react");
+const TabbedModal_1 = require("../../../../generic/modal/TabbedModal");
+const PriceBreakdownBlock_1 = require("./PriceBreakdownBlock");
+const RoomRateDescriptionTab_1 = require("./RoomRateDescriptionTab");
+const react_1 = require("react");
+const contexts_1 = require("@frontend/contexts");
+var RoomRateDetailsAndPriceBreakdownModalTabs;
+(function (RoomRateDetailsAndPriceBreakdownModalTabs) {
+    RoomRateDetailsAndPriceBreakdownModalTabs["PriceBreakdown"] = "Price Breakdown";
+    RoomRateDetailsAndPriceBreakdownModalTabs["RoomDetails"] = "Room Details";
+})(RoomRateDetailsAndPriceBreakdownModalTabs = exports.RoomRateDetailsAndPriceBreakdownModalTabs || (exports.RoomRateDetailsAndPriceBreakdownModalTabs = {}));
+function RoomRateDetailsAndPriceBreakdownModal(props) {
+    const ccx = react_1.useContext(contexts_1.CompanyContext);
+    const tabs = {
+        [RoomRateDetailsAndPriceBreakdownModalTabs.RoomDetails]: {
+            content: React.createElement(RoomRateDescriptionTab_1.default, { rate: props.rate }),
+            footer: (React.createElement(RoomRateDescriptionTab_1.RoomRateDescriptionFooter, { rate: props.rate, onClose: props.onClose, getButtonLabel: props.getButtonLabel, onAddToBasketOverride: props.onAddToBasketOverride })),
+            title: 'Room Rate Details',
+        },
+    };
+    if ((props.rate.isMemberOnly && ccx.signedInUser) || !props.rate.isMemberOnly) {
+        tabs[RoomRateDetailsAndPriceBreakdownModalTabs.PriceBreakdown] = {
+            content: React.createElement(PriceBreakdownBlock_1.default, { rate: props.rate }),
+            footer: React.createElement(PriceBreakdownBlock_1.PriceBreakdownFooter, { rate: props.rate, onClose: props.onClose, getButtonLabel: props.getButtonLabel, onAddToBasketOverride: props.onAddToBasketOverride }),
+            title: 'Price Breakdown',
+        };
+    }
+    return React.createElement(TabbedModal_1.default, { isOpen: props.isOpen, onClose: props.onClose, tabs: tabs, openTab: props.currentTab });
+}
+exports.default = RoomRateDetailsAndPriceBreakdownModal;
+//# sourceMappingURL=RoomRateDetailsAndPriceBreakdownModal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RoomRateDetailsAndPriceBreakdownModal.js","sourceRoot":"/","sources":["src/components/steps/room/roomDetails/roomRates/RoomRateDetailsAndPriceBreakdownModal.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,uEAAoF;AACpF,+DAAkF;AAElF,qEAA6F;AAC7F,iCAAmC;AACnC,iDAAoD;AAEpD,IAAY,yCAGX;AAHD,WAAY,yCAAyC;IACjD,+EAAkC,CAAA;IAClC,yEAA4B,CAAA;AAChC,CAAC,EAHW,yCAAyC,GAAzC,iDAAyC,KAAzC,iDAAyC,QAGpD;AAcD,SAAwB,qCAAqC,CAAC,KAAiD;IAC3G,MAAM,GAAG,GAAG,kBAAU,CAAC,yBAAc,CAAC,CAAC;IAEvC,MAAM,IAAI,GAAuC;QAC7C,CAAC,yCAAyC,CAAC,WAAW,CAAC,EAAE;YACrD,OAAO,EAAE,oBAAC,gCAAsB,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,GAAI;YACrD,MAAM,EAAE,CACJ,oBAAC,kDAAyB,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,cAAc,EAAE,KAAK,CAAC,cAAc,EAAE,qBAAqB,EAAE,KAAK,CAAC,qBAAqB,GAAI,CACpK;YACD,KAAK,EAAE,mBAAmB;SAC7B;KACJ,CAAC;IAEF,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,IAAI,GAAG,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,EAAE;QAC3E,IAAI,CAAC,yCAAyC,CAAC,cAAc,CAAC,GAAG;YAC7D,OAAO,EAAE,oBAAC,6BAAmB,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,GAAI;YAClD,MAAM,EAAE,oBAAC,0CAAoB,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,cAAc,EAAE,KAAK,CAAC,cAAc,EAAE,qBAAqB,EAAE,KAAK,CAAC,qBAAqB,GAAI;YACpK,KAAK,EAAE,iBAAiB;SAC3B,CAAC;KACL;IAED,OAAO,oBAAC,qBAAW,IAAC,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,UAAU,GAAI,CAAC;AAChH,CAAC;AAtBD,wDAsBC","sourcesContent":["import * as React from 'react';\nimport TabbedModal, { TabbedModalTab } from '../../../../generic/modal/TabbedModal';\nimport PriceBreakdownBlock, { PriceBreakdownFooter } from './PriceBreakdownBlock';\nimport { RoomRate } from '../../../../../models/Room/RoomRate';\nimport RoomRateDescriptionTab, { RoomRateDescriptionFooter } from './RoomRateDescriptionTab';\nimport { useContext } from 'react';\nimport { CompanyContext } from '@frontend/contexts';\n\nexport enum RoomRateDetailsAndPriceBreakdownModalTabs {\n    PriceBreakdown = 'Price Breakdown',\n    RoomDetails = 'Room Details',\n}\n\ninterface RoomRateDetailsAndPriceBreakdownModalProps {\n    isOpen: boolean;\n    currentTab: RoomRateDetailsAndPriceBreakdownModalTabs;\n\n    rate: RoomRate;\n\n    getButtonLabel?: (isRoomSelectedAndEditing: boolean, isThisSelectedRow: boolean) => string;\n    onAddToBasketOverride?: (rate: RoomRate) => void;\n\n    onClose: () => void;\n}\n\nexport default function RoomRateDetailsAndPriceBreakdownModal(props: RoomRateDetailsAndPriceBreakdownModalProps) {\n    const ccx = useContext(CompanyContext);\n\n    const tabs: { [name: string]: TabbedModalTab } = {\n        [RoomRateDetailsAndPriceBreakdownModalTabs.RoomDetails]: {\n            content: <RoomRateDescriptionTab rate={props.rate} />,\n            footer: (\n                <RoomRateDescriptionFooter rate={props.rate} onClose={props.onClose} getButtonLabel={props.getButtonLabel} onAddToBasketOverride={props.onAddToBasketOverride} />\n            ),\n            title: 'Room Rate Details',\n        },\n    };\n\n    if ((props.rate.isMemberOnly && ccx.signedInUser) || !props.rate.isMemberOnly) {\n        tabs[RoomRateDetailsAndPriceBreakdownModalTabs.PriceBreakdown] = {\n            content: <PriceBreakdownBlock rate={props.rate} />,\n            footer: <PriceBreakdownFooter rate={props.rate} onClose={props.onClose} getButtonLabel={props.getButtonLabel} onAddToBasketOverride={props.onAddToBasketOverride} />,\n            title: 'Price Breakdown',\n        };\n    }\n\n    return <TabbedModal isOpen={props.isOpen} onClose={props.onClose} tabs={tabs} openTab={props.currentTab} />;\n}\n"]}

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { Room } from '../../../../../models/Room/Room';
+import { RoomRate } from '../../../../../models/Room/RoomRate';
+interface RoomRatePillsProps {
+    room?: Room;
+    rate?: RoomRate;
+    limit?: number;
+    showMore?: boolean;
+}
+export default function RoomRatePills(props: RoomRatePillsProps): JSX.Element;
+export {};

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

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const react_1 = require("react");
+const react_i18next_1 = require("react-i18next");
+const RatePillProvider_1 = require("../../../../../providers/RatePillProvider");
+const Pill_1 = require("../../../../generic/Pill");
+const Icon_1 = require("../../../../generic/Icon");
+const hooks_1 = require("@frontend/hooks");
+const Translation_1 = require("../../../../../translations/Translation");
+const contexts_1 = require("@frontend/contexts");
+const RoomstayThemeEngine_1 = require("../../../../../providers/RoomstayThemeEngine");
+const contexts_2 = require("@frontend/contexts");
+const FeaturedPromoFeature_1 = require("../../../../../providers/feature/FeaturedPromoFeature");
+function RoomRatePills(props) {
+    const [pills, setPills] = react_1.useState([]);
+    const currentHotel = hooks_1.useCurrentHotel();
+    const ccx = react_1.useContext(contexts_1.CompanyContext);
+    const basketContext = react_1.useContext(contexts_2.BasketContext);
+    const { t } = react_i18next_1.useTranslation();
+    react_1.useEffect(() => {
+        let pillsToDisplay = [];
+        RatePillProvider_1.default.registerRatePill({ icon: Icon_1.IconType.Breakfast, title: 'Breakfast Included' }, ({ rate, hotel }) => {
+            var _a;
+            return hotel.showMealPill && ((_a = rate.mealsIncluded) === null || _a === void 0 ? void 0 : _a.breakfast);
+        }, true);
+        RatePillProvider_1.default.registerRatePill({
+            translation: Translation_1.Translation.Step.Room.RoomInfo.PromoCode.MemberDeal,
+            translationProps: {
+                companyShort: ccx.name,
+            },
+            icon: Icon_1.IconType.Check,
+        }, ({ rate, hotel }) => {
+            var _a;
+            return rate.promoCode && ((_a = rate === null || rate === void 0 ? void 0 : rate.promoCode) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === (hotel === null || hotel === void 0 ? void 0 : hotel.memberOnlyPromoCode);
+        }, true);
+        RatePillProvider_1.default.registerRatePill({
+            translation: Translation_1.Translation.Step.Room.RoomInfo.PromoCode.Standard,
+            icon: Icon_1.IconType.Check,
+        }, ({ rate, hotel }) => {
+            var _a;
+            return rate.promoCode && !(((_a = rate === null || rate === void 0 ? void 0 : rate.promoCode) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === (hotel === null || hotel === void 0 ? void 0 : hotel.memberOnlyPromoCode));
+        }, true);
+        /** Registering Room Pills */
+        RatePillProvider_1.default.registerRoomPill({
+            translation: Translation_1.Translation.Misc.Pills.PeopleBookedShort,
+            translationProps: {
+                people: Math.floor(Math.random() * 8 + 7),
+            },
+            icon: Icon_1.IconType.People,
+        }, () => {
+            return RoomstayThemeEngine_1.default.canSee(RoomstayThemeEngine_1.ModulePermission.NumberOfPeopleBookedPill);
+        });
+        RatePillProvider_1.default.registerRoomPill({ icon: Icon_1.IconType.Check, title: 'Promo code is applied' }, (match) => {
+            var _a, _b, _c, _d;
+            if (FeaturedPromoFeature_1.default.isActive() && ((_a = match.room) === null || _a === void 0 ? void 0 : _a.getRates())) {
+                for (const rate of match.room.getRates()) {
+                    if (((_b = rate === null || rate === void 0 ? void 0 : rate.promoCode) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === ((_d = (_c = basketContext === null || basketContext === void 0 ? void 0 : basketContext.selectedBasketRow) === null || _c === void 0 ? void 0 : _c.getPromoCode()) === null || _d === void 0 ? void 0 : _d.toLowerCase())) {
+                        return true;
+                    }
+                }
+            }
+            return false;
+        });
+        if (props.room) {
+            pillsToDisplay = RatePillProvider_1.default.getPillsForRoom({ room: props.room, hotel: currentHotel.hotel });
+        }
+        else if (props.rate) {
+            pillsToDisplay = RatePillProvider_1.default.getPillsForRate({ rate: props.rate, hotel: currentHotel.hotel });
+        }
+        if (props.limit) {
+            setPills(pillsToDisplay.splice(0, props.limit));
+        }
+        else {
+            setPills(pillsToDisplay);
+        }
+    }, [props.room, props.rate, props.limit]);
+    return (React.createElement("div", { className: "c-pill-list u-marg-bottom--light" }, pills.map((pill, index) => {
+        var _a;
+        // TODO: Add tooltip support in Pill
+        return (React.createElement("div", { className: "u-inline u-marg-left--light u-marg-bottom--light", key: index },
+            React.createElement(Pill_1.default, { type: (_a = pill.type) !== null && _a !== void 0 ? _a : Pill_1.PillType.Primary, icon: pill.icon }, pill.translation ? t(pill.translation, pill.translationProps) : pill.title)));
+    })));
+}
+exports.default = RoomRatePills;
+//# sourceMappingURL=RoomRatePills.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RoomRatePills.js","sourceRoot":"/","sources":["src/components/steps/room/roomDetails/roomRates/RoomRatePills.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useContext, useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Room } from '../../../../../models/Room/Room';\nimport { RoomRate } from '../../../../../models/Room/RoomRate';\nimport RatePillProvider, { RatePill } from '../../../../../providers/RatePillProvider';\nimport Pill, { PillType } from '../../../../generic/Pill';\nimport { IconType } from '../../../../generic/Icon';\nimport { useCurrentHotel } from '@frontend/hooks';\nimport { Translation } from '../../../../../translations/Translation';\nimport { CompanyContext } from '@frontend/contexts';\nimport RoomstayThemeEngine, { ModulePermission } from '../../../../../providers/RoomstayThemeEngine';\nimport { BasketContext } from '@frontend/contexts';\nimport FeaturedPromoFeature from '../../../../../providers/feature/FeaturedPromoFeature';\n\ninterface RoomRatePillsProps {\n    room?: Room;\n    rate?: RoomRate;\n\n    limit?: number;\n    // TODO: In future, we'll have a tooltip / modal to show more pills\n    showMore?: boolean;\n}\n\nexport default function RoomRatePills(props: RoomRatePillsProps) {\n    const [pills, setPills] = useState<RatePill[]>([]);\n    const currentHotel = useCurrentHotel();\n    const ccx = useContext(CompanyContext);\n    const basketContext = useContext(BasketContext);\n\n    const { t } = useTranslation();\n\n    useEffect(() => {\n        let pillsToDisplay: RatePill[] = [];\n\n        RatePillProvider.registerRatePill(\n            { icon: IconType.Breakfast, title: 'Breakfast Included' },\n            ({ rate, hotel }) => {\n                return hotel.showMealPill && rate.mealsIncluded?.breakfast;\n            },\n            true\n        );\n\n        RatePillProvider.registerRatePill(\n            {\n                translation: Translation.Step.Room.RoomInfo.PromoCode.MemberDeal,\n                translationProps: {\n                    companyShort: ccx.name,\n                },\n                icon: IconType.Check,\n            },\n            ({ rate, hotel }) => {\n                return rate.promoCode && rate?.promoCode?.toUpperCase() === hotel?.memberOnlyPromoCode;\n            },\n            true\n        );\n\n        RatePillProvider.registerRatePill(\n            {\n                translation: Translation.Step.Room.RoomInfo.PromoCode.Standard,\n                icon: IconType.Check,\n            },\n            ({ rate, hotel }) => {\n                return rate.promoCode && !(rate?.promoCode?.toUpperCase() === hotel?.memberOnlyPromoCode);\n            },\n            true\n        );\n\n        /** Registering Room Pills */\n        RatePillProvider.registerRoomPill(\n            {\n                translation: Translation.Misc.Pills.PeopleBookedShort,\n                translationProps: {\n                    people: Math.floor(Math.random() * 8 + 7),\n                },\n                icon: IconType.People,\n            },\n            () => {\n                return RoomstayThemeEngine.canSee(ModulePermission.NumberOfPeopleBookedPill);\n            }\n        );\n\n        RatePillProvider.registerRoomPill({ icon: IconType.Check, title: 'Promo code is applied' }, (match) => {\n            if (FeaturedPromoFeature.isActive() && match.room?.getRates()) {\n                for (const rate of match.room.getRates()) {\n                    if (rate?.promoCode?.toLowerCase() === basketContext?.selectedBasketRow?.getPromoCode()?.toLowerCase()) {\n                        return true;\n                    }\n                }\n            }\n\n            return false;\n        });\n\n        if (props.room) {\n            pillsToDisplay = RatePillProvider.getPillsForRoom({ room: props.room, hotel: currentHotel.hotel });\n        } else if (props.rate) {\n            pillsToDisplay = RatePillProvider.getPillsForRate({ rate: props.rate, hotel: currentHotel.hotel });\n        }\n\n        if (props.limit) {\n            setPills(pillsToDisplay.splice(0, props.limit));\n        } else {\n            setPills(pillsToDisplay);\n        }\n    }, [props.room, props.rate, props.limit]);\n\n    return (\n        <div className=\"c-pill-list u-marg-bottom--light\">\n            {pills.map((pill, index) => {\n                // TODO: Add tooltip support in Pill\n                return (\n                    <div className=\"u-inline u-marg-left--light u-marg-bottom--light\" key={index}>\n                        <Pill type={pill.type ?? PillType.Primary} icon={pill.icon}>\n                            {pill.translation ? t(pill.translation, pill.translationProps) : pill.title}\n                        </Pill>\n                    </div>\n                );\n            })}\n        </div>\n    );\n}\n"]}

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { RoomRate } from '../../../../../models/Room/RoomRate';
+export interface RoomRateRowProps {
+    rate: RoomRate;
+    getButtonLabel?: (isRoomSelectedAndEditing: boolean, isThisSelectedRow: boolean) => string;
+    onAddToBasketOverride?: (rate: RoomRate) => void;
+    isPromoRate?: boolean;
+}
+export default function RoomRateRow(props: RoomRateRowProps): JSX.Element;

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

@@ -0,0 +1,119 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const Text_1 = require("../../../../generic/Text");
+const Color_1 = require("../../../../../util/Color");
+const TextAlignment_1 = require("../../../../../util/TextAlignment");
+const BEButton_1 = require("../../../../generic/BEButton");
+const Translation_1 = require("../../../../../translations/Translation");
+const react_i18next_1 = require("react-i18next");
+const classNames = require("classnames");
+const Icon_1 = require("../../../../generic/Icon");
+const Pill_1 = require("../../../../generic/Pill");
+const contexts_1 = require("@frontend/contexts");
+const react_1 = require("react");
+const DataLayer_1 = require("../../../../../util/DataLayer");
+const RoomDetailsPriceBlock_1 = require("../RoomDetailsPriceBlock");
+const RoomRate_1 = require("../../../../../models/Room/RoomRate");
+const RoomRateDetailsAndPriceBreakdownModal_1 = require("./RoomRateDetailsAndPriceBreakdownModal");
+const BookNowButton_1 = require("./BookNowButton");
+const FeatureProvider_1 = require("../../../../../providers/FeatureProvider");
+const contexts_2 = require("@frontend/contexts");
+const hooks_1 = require("@frontend/hooks");
+const RoomRatePills_1 = require("./RoomRatePills");
+function RoomRateRow(props) {
+    var _a, _b, _c;
+    const ccx = react_1.useContext(contexts_2.CompanyContext);
+    const basketContext = react_1.useContext(contexts_1.BasketContext);
+    const [viewingModal, setViewingModal] = react_1.useState({ open: false, currentTab: RoomRateDetailsAndPriceBreakdownModal_1.RoomRateDetailsAndPriceBreakdownModalTabs.RoomDetails });
+    const { t } = react_i18next_1.useTranslation();
+    const { hotel } = hooks_1.useCurrentHotel();
+    const { rate } = props;
+    const selectedRow = basketContext.selectedBasketRow;
+    const isRoomSelectedAndEditing = selectedRow === null || selectedRow === void 0 ? void 0 : selectedRow.isValid();
+    const isThisSelectedRow = selectedRow && rate.name === ((_a = selectedRow.getRate()) === null || _a === void 0 ? void 0 : _a.name) && ((_b = rate.getRoom()) === null || _b === void 0 ? void 0 : _b.name) === ((_c = selectedRow.getRoom()) === null || _c === void 0 ? void 0 : _c.name);
+    const currentRow = react_1.useRef(null);
+    const classes = classNames('room-info', {
+        '--default': !rate.isMemberOnly,
+        '--locked': rate.isMemberOnly,
+        '--current': isThisSelectedRow && isRoomSelectedAndEditing,
+        '--is-promo': props.isPromoRate,
+    });
+    let isLocked = false;
+    if (rate.isMemberOnly && !ccx.signedInUser) {
+        isLocked = true;
+    }
+    FeatureProvider_1.default.load('AvailableUpgradesFeature');
+    react_1.useEffect(() => {
+        if (isThisSelectedRow) {
+            setTimeout(() => {
+                var _a;
+                (_a = currentRow === null || currentRow === void 0 ? void 0 : currentRow.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
+            }, 250);
+        }
+        if (!isLocked) {
+            DataLayer_1.default.instance.addRoomRateImpression(rate.getRoom(), rate);
+        }
+    }, [isThisSelectedRow]);
+    const openTab = (tab) => {
+        setViewingModal({ open: true, currentTab: tab });
+    };
+    let bookNowLabel = '';
+    if (props.getButtonLabel) {
+        bookNowLabel = props.getButtonLabel(isRoomSelectedAndEditing, isThisSelectedRow);
+    }
+    else {
+        if (isRoomSelectedAndEditing) {
+            bookNowLabel = isThisSelectedRow ? t(Translation_1.Translation.Step.Room.RoomInfo.Selected) : (bookNowLabel = t(Translation_1.Translation.Step.Room.RoomInfo.Update));
+        }
+        else {
+            bookNowLabel = t(Translation_1.Translation.Step.Room.RoomInfo.BookNow);
+        }
+    }
+    const openMemberSignupModalOnClick = () => {
+        DataLayer_1.default.instance.sendInteraction('Member Signup Modal', DataLayer_1.InteractionType.LINK, DataLayer_1.InteractionStep.ROOMS);
+        ccx.openMemberSignupModal();
+    };
+    const rateDetailsOnClick = () => {
+        DataLayer_1.default.instance.sendInteraction('More Rate Details', DataLayer_1.InteractionType.LINK, DataLayer_1.InteractionStep.ROOMS);
+        openTab(RoomRateDetailsAndPriceBreakdownModal_1.RoomRateDetailsAndPriceBreakdownModalTabs.RoomDetails);
+    };
+    const updateModalOnClose = () => {
+        setViewingModal((old) => {
+            old.open = false;
+            return Object.assign({}, old);
+        });
+    };
+    const openTabOnClick = () => {
+        DataLayer_1.default.instance.sendInteraction('Rate Breakdown', DataLayer_1.InteractionType.LINK, DataLayer_1.InteractionStep.ROOMS);
+        openTab(RoomRateDetailsAndPriceBreakdownModal_1.RoomRateDetailsAndPriceBreakdownModalTabs.PriceBreakdown);
+    };
+    return (React.createElement("div", { className: classes, ref: currentRow },
+        React.createElement("div", { className: "row" },
+            React.createElement("div", { className: "col-lg-8" },
+                React.createElement("div", { className: "u-flex flex-column h-100" },
+                    React.createElement("div", null,
+                        React.createElement("div", { className: "u-marg-bottom-half" }, isLocked ? (React.createElement(Text_1.default, { type: Text_1.TextType.Body, color: Color_1.Color.Success },
+                            React.createElement("strong", null, t(Translation_1.Translation.Step.Room.RoomInfo.MemberOnlyDeal)))) : (React.createElement(Text_1.default, { type: Text_1.TextType.Body },
+                            React.createElement("strong", null, rate.name)))),
+                        React.createElement("div", { className: "u-marg-bottom u-h-ml-5 text-small u-clear-font-weight rdcaf" },
+                            React.createElement("div", { dangerouslySetInnerHTML: { __html: isLocked ? t(Translation_1.Translation.Step.Room.RoomInfo.DealForMemberOnly) : rate.description } })),
+                        isLocked && (React.createElement("div", { className: "u-marg" },
+                            React.createElement("span", { onClick: openMemberSignupModalOnClick },
+                                React.createElement(Pill_1.default, { icon: Icon_1.IconType.Money, type: Pill_1.PillType.Success }, t(Translation_1.Translation.Step.Room.RoomInfo.SignUpToSee))))),
+                        React.createElement(RoomRatePills_1.default, { rate: props.rate })),
+                    React.createElement("div", { className: "u-flex justify-content-start u-marg-top-bottom@l-" },
+                        React.createElement("div", { className: "u-marg-right u-inline-flex" },
+                            React.createElement(BEButton_1.default, { icon: Icon_1.IconType.ArrowRight2, isText: true, primary: true, size: "small", iconPosition: "right", onClick: rateDetailsOnClick }, t(Translation_1.Translation.Step.Room.ReadMore))),
+                        React.createElement(BEButton_1.default, { icon: Icon_1.IconType.ArrowRight2, isText: true, textColor: Color_1.Color.Navy, size: "small", iconPosition: "right", onClick: openTabOnClick, disabled: isLocked }, t(Translation_1.Translation.Step.Room.RoomInfo.ViewPriceBreakdown))))),
+            React.createElement("div", { className: "col-lg-4 u-flex flex-column align-items-start align-items-md-start align-items-lg-end justify-content-start" },
+                React.createElement("div", { className: "u-flex flex-column align-items-start align-items-lg-end" },
+                    React.createElement(RoomDetailsPriceBlock_1.default, { isLocked: isLocked, averagePreDiscount: rate.getAveragePriceBeforeDiscount(true), averagePrice: rate.getAveragePrice(true), isMemberOnly: props.rate.isMemberOnly }),
+                    React.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.DarkGrey, align: TextAlignment_1.TextAlign.Right }, rate.getPriceType() === RoomRate_1.RoomRatePriceInclusion.IncludingFeesAndTaxes
+                        ? t(Translation_1.Translation.Step.Room.RoomInfo.IncludesTaxes)
+                        : t(Translation_1.Translation.Step.Room.ExcludingTaxes))),
+                React.createElement("div", { className: "u-marg-top u-w-100@l-" }, isLocked ? (React.createElement(BEButton_1.default, { filled: true, success: true, wide: true, onClick: openMemberSignupModalOnClick }, t(Translation_1.Translation.Step.Room.RoomInfo.RevealPrice))) : (React.createElement(BookNowButton_1.default, { rate: rate, buttonLabel: bookNowLabel, onAddToBasketOverride: props.onAddToBasketOverride, isFilled: !isThisSelectedRow }))))),
+        React.createElement(RoomRateDetailsAndPriceBreakdownModal_1.default, { isOpen: viewingModal.open, currentTab: viewingModal.currentTab, rate: props.rate, getButtonLabel: props.getButtonLabel, onAddToBasketOverride: props.onAddToBasketOverride, onClose: updateModalOnClose })));
+}
+exports.default = RoomRateRow;
+//# sourceMappingURL=RoomRateRow.js.map