@roomstay/frontend 1.3.0

package/dist/src/components/steps/date/StepDatePricePerRoom.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const Text_1 = require("../../generic/Text");
+const TextAlignment_1 = require("../../../util/TextAlignment");
+const Color_1 = require("../../../util/Color");
+const Translation_1 = require("../../../translations/Translation");
+const Headline_1 = require("../../generic/Headline");
+const Currency_1 = require("../../generic/Currency");
+const react_i18next_1 = require("react-i18next");
+const react_1 = require("react");
+const contexts_1 = require("@frontend/contexts");
+const BookingAPI_1 = require("../../../api/BookingAPI");
+const Icon_1 = require("../../generic/Icon");
+const hooks_1 = require("@frontend/hooks");
+function StepDatePricePerRoom(props) {
+    const { t } = react_i18next_1.useTranslation();
+    const basketContext = react_1.useContext(contexts_1.BasketContext);
+    const { hotel } = hooks_1.useCurrentHotel();
+    const [pricePerRoom, setPricePerRoom] = react_1.useState(0);
+    const [isLoading, setIsLoading] = react_1.useState(false);
+    react_1.useEffect(() => {
+        var _a;
+        let cancelled = false;
+        const selectedBasketRow = (_a = basketContext.selectedBasketRow) !== null && _a !== void 0 ? _a : basketContext.currentBasketRows[basketContext.currentBasketRows.length - 1];
+        if (basketContext.endDate) {
+            const adults = selectedBasketRow ? selectedBasketRow.getAdults() : 0;
+            const children = selectedBasketRow ? selectedBasketRow.getChildren() : 0;
+            const promoCode = selectedBasketRow ? selectedBasketRow.getPromoCode() : '';
+            setIsLoading(true);
+            setTimeout(() => {
+                BookingAPI_1.default.Availability.getCheapestPricePerDay(basketContext.startDate, basketContext.endDate.subtract(1, 'day'), adults, children, promoCode, hotel.hotelID).then((dayPrices) => {
+                    const prices = Object.values(dayPrices);
+                    if (!cancelled) {
+                        let cheapestFromAPI = prices.length > 0 ? prices.reduce((prev, curr) => (!curr ? prev : Math.min(prev, curr))) : 0;
+                        if (isNaN(cheapestFromAPI)) {
+                            cheapestFromAPI = 0;
+                        }
+                        setPricePerRoom(cheapestFromAPI);
+                        setIsLoading(false);
+                    }
+                });
+            }, 250);
+        }
+        return () => {
+            setIsLoading(false);
+            cancelled = true;
+        };
+    }, [basketContext.endDate, basketContext.selectedBasketRow]);
+    const isMobile = props.isMobile;
+    return react_1.useMemo(() => {
+        return (React.createElement("div", { className: "u-flex flex-column justify-content-end align-items-end h-100" },
+            React.createElement(Text_1.default, { type: isMobile ? Text_1.TextType.Label : Text_1.TextType.Small, align: TextAlignment_1.TextAlign.Right, className: "u-nowrap" },
+                React.createElement("span", { style: { color: Color_1.Color.DarkGrey } },
+                    t(Translation_1.Translation.Misc.From),
+                    " ",
+                    React.createElement("span", { style: { color: Color_1.Color.Grey } },
+                        "(",
+                        t(Translation_1.Translation.Misc.PerRoom),
+                        ")"))),
+            isMobile ? (React.createElement("span", { className: "u-ellip-w-100-deep" },
+                React.createElement(Text_1.default, { bold: true }, isLoading ? (React.createElement("div", { className: "u-inline-flex a-spin" },
+                    React.createElement(Icon_1.default, { icon: Icon_1.IconType.Spinner }))) : (React.createElement(Currency_1.default, { removeCurrencyAfterChar: 6 }, pricePerRoom))))) : (React.createElement(Headline_1.default, { bold: true, size: 'large', align: TextAlignment_1.TextAlign.Right }, isLoading ? (React.createElement("div", { className: "u-inline-flex a-spin" },
+                React.createElement(Icon_1.default, { icon: Icon_1.IconType.Spinner }))) : (React.createElement(Currency_1.default, null, pricePerRoom))))));
+    }, [isLoading, pricePerRoom]);
+}
+exports.default = StepDatePricePerRoom;
+//# sourceMappingURL=StepDatePricePerRoom.js.map

package/dist/src/components/steps/date/StepDatePricePerRoom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepDatePricePerRoom.js","sourceRoot":"/","sources":["src/components/steps/date/StepDatePricePerRoom.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport Text, { TextType } from '../../generic/Text';\nimport { TextAlign } from '../../../util/TextAlignment';\nimport { Color } from '../../../util/Color';\nimport { Translation } from '../../../translations/Translation';\nimport Headline from '../../generic/Headline';\nimport Currency from '../../generic/Currency';\nimport { useTranslation } from 'react-i18next';\nimport { useMemo, useState, useContext, useEffect } from 'react';\nimport { BasketContext } from '@frontend/contexts';\nimport API from '../../../api/BookingAPI';\nimport Icon, { IconType } from '../../generic/Icon';\nimport { useCurrentHotel } from '@frontend/hooks';\n\ninterface StepDatePricePerRoomProps {\n    isMobile: boolean;\n}\n\nexport default function StepDatePricePerRoom(props: StepDatePricePerRoomProps) {\n    const { t } = useTranslation();\n    const basketContext = useContext(BasketContext);\n    const { hotel } = useCurrentHotel();\n\n    const [pricePerRoom, setPricePerRoom] = useState(0);\n    const [isLoading, setIsLoading] = useState(false);\n\n    useEffect(() => {\n        let cancelled = false;\n\n        const selectedBasketRow = basketContext.selectedBasketRow ?? basketContext.currentBasketRows[basketContext.currentBasketRows.length - 1];\n\n        if (basketContext.endDate) {\n            const adults = selectedBasketRow ? selectedBasketRow.getAdults() : 0;\n            const children = selectedBasketRow ? selectedBasketRow.getChildren() : 0;\n            const promoCode = selectedBasketRow ? selectedBasketRow.getPromoCode() : '';\n\n            setIsLoading(true);\n            setTimeout(() => {\n                API.Availability.getCheapestPricePerDay(basketContext.startDate, basketContext.endDate.subtract(1, 'day'), adults, children, promoCode, hotel.hotelID).then(\n                    (dayPrices) => {\n                        const prices = Object.values(dayPrices);\n\n                        if (!cancelled) {\n                            let cheapestFromAPI = prices.length > 0 ? prices.reduce((prev, curr) => (!curr ? prev : Math.min(prev, curr))) : 0;\n\n                            if (isNaN(cheapestFromAPI)) {\n                                cheapestFromAPI = 0;\n                            }\n\n                            setPricePerRoom(cheapestFromAPI);\n                            setIsLoading(false);\n                        }\n                    }\n                );\n            }, 250);\n        }\n\n        return () => {\n            setIsLoading(false);\n\n            cancelled = true;\n        };\n    }, [basketContext.endDate, basketContext.selectedBasketRow]);\n\n    const isMobile = props.isMobile;\n\n    return useMemo(() => {\n        return (\n            <div className=\"u-flex flex-column justify-content-end align-items-end h-100\">\n                <Text type={isMobile ? TextType.Label : TextType.Small} align={TextAlign.Right} className=\"u-nowrap\">\n                    <span style={{ color: Color.DarkGrey }}>\n                        {t(Translation.Misc.From)} <span style={{ color: Color.Grey }}>({t(Translation.Misc.PerRoom)})</span>\n                    </span>\n                </Text>\n                {isMobile ? (\n                    <span className=\"u-ellip-w-100-deep\">\n                        <Text bold={true}>\n                            {isLoading ? (\n                                <div className=\"u-inline-flex a-spin\">\n                                    <Icon icon={IconType.Spinner} />\n                                </div>\n                            ) : (\n                                <Currency removeCurrencyAfterChar={6}>{pricePerRoom}</Currency>\n                            )}\n                        </Text>\n                    </span>\n                ) : (\n                    <Headline bold={true} size={'large'} align={TextAlign.Right}>\n                        {isLoading ? (\n                            <div className=\"u-inline-flex a-spin\">\n                                <Icon icon={IconType.Spinner} />\n                            </div>\n                        ) : (\n                            <Currency>{pricePerRoom}</Currency>\n                        )}\n                    </Headline>\n                )}\n            </div>\n        );\n    }, [isLoading, pricePerRoom]);\n}\n"]}

package/dist/src/components/steps/date/StepOneDateRange.d.ts

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

package/dist/src/components/steps/date/StepOneDateRange.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const react_1 = require("react");
+const contexts_1 = require("@frontend/contexts");
+const Headline_1 = require("../../generic/Headline");
+const Color_1 = require("../../../util/Color");
+const Translation_1 = require("../../../translations/Translation");
+const Icon_1 = require("../../generic/Icon");
+const react_i18next_1 = require("react-i18next");
+function StepOneDateRange() {
+    const context = react_1.useContext(contexts_1.BasketContext);
+    const { t } = react_i18next_1.useTranslation();
+    return react_1.useMemo(() => {
+        return (React.createElement("div", { className: "step-one-status--dates" },
+            React.createElement(Headline_1.default, null,
+                React.createElement("span", Object.assign({}, (context.startDate ? { style: { color: Color_1.Color.Accent, fontWeight: 'bold' } } : {})), context.startDate ? context.startDate.format('ddd, MMM D') : t(Translation_1.Translation.Step.Date.Arrival))),
+            React.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowRight2, size: '18px' }),
+            React.createElement(Headline_1.default, null,
+                React.createElement("span", Object.assign({}, (context.endDate ? { style: { color: Color_1.Color.Accent, fontWeight: 'bold' } } : {})), context.endDate ? context.endDate.format('ddd, MMM D') : t(Translation_1.Translation.Step.Date.Departure)))));
+    }, [context.startDate, context.endDate]);
+}
+exports.default = StepOneDateRange;
+//# sourceMappingURL=StepOneDateRange.js.map

package/dist/src/components/steps/date/StepOneDateRange.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepOneDateRange.js","sourceRoot":"/","sources":["src/components/steps/date/StepOneDateRange.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAE/B,iCAA4C;AAC5C,iDAAmD;AACnD,qDAA8C;AAC9C,+CAA4C;AAC5C,mEAAgE;AAChE,6CAAoD;AACpD,iDAA+C;AAE/C,SAAwB,gBAAgB;IACpC,MAAM,OAAO,GAAG,kBAAU,CAAC,wBAAa,CAAC,CAAC;IAE1C,MAAM,EAAE,CAAC,EAAE,GAAG,8BAAc,EAAE,CAAC;IAE/B,OAAO,eAAO,CAAC,GAAG,EAAE;QAChB,OAAO,CACH,6BAAK,SAAS,EAAC,wBAAwB;YACnC,oBAAC,kBAAQ;gBACL,8CAAU,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,aAAK,CAAC,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GACtF,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAC3F,CACA;YACX,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,WAAW,EAAE,IAAI,EAAE,MAAM,GAAI;YAClD,oBAAC,kBAAQ;gBACL,8CAAU,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,aAAK,CAAC,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GACpF,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CACzF,CACA,CACT,CACT,CAAC;IACN,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;AAC7C,CAAC;AAtBD,mCAsBC","sourcesContent":["import * as React from 'react';\n\nimport { useContext, useMemo } from 'react';\nimport { BasketContext } from '@frontend/contexts';\nimport Headline from '../../generic/Headline';\nimport { Color } from '../../../util/Color';\nimport { Translation } from '../../../translations/Translation';\nimport Icon, { IconType } from '../../generic/Icon';\nimport { useTranslation } from 'react-i18next';\n\nexport default function StepOneDateRange() {\n    const context = useContext(BasketContext);\n\n    const { t } = useTranslation();\n\n    return useMemo(() => {\n        return (\n            <div className=\"step-one-status--dates\">\n                <Headline>\n                    <span {...(context.startDate ? { style: { color: Color.Accent, fontWeight: 'bold' } } : {})}>\n                        {context.startDate ? context.startDate.format('ddd, MMM D') : t(Translation.Step.Date.Arrival)}\n                    </span>\n                </Headline>\n                <Icon icon={IconType.ArrowRight2} size={'18px'} />\n                <Headline>\n                    <span {...(context.endDate ? { style: { color: Color.Accent, fontWeight: 'bold' } } : {})}>\n                        {context.endDate ? context.endDate.format('ddd, MMM D') : t(Translation.Step.Date.Departure)}\n                    </span>\n                </Headline>\n            </div>\n        );\n    }, [context.startDate, context.endDate]);\n}\n"]}

package/dist/src/components/steps/date/StepOneDateRangePicker.d.ts

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

package/dist/src/components/steps/date/StepOneDateRangePicker.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const DatePicker_1 = require("../../generic/date/DatePicker");
+const React = require("react");
+const react_1 = require("react");
+const ScreenSize_1 = require("../../../util/ScreenSize");
+const contexts_1 = require("@frontend/contexts");
+const DataLayer_1 = require("../../../util/DataLayer");
+function StepOneDateRangePicker() {
+    const context = react_1.useContext(contexts_1.BasketContext);
+    const appContext = react_1.useContext(contexts_1.BookingEngineContext);
+    return react_1.useMemo(() => {
+        const onStartDateChangedHandler = (newDate) => {
+            DataLayer_1.default.instance.sendInteraction('Check In Date', DataLayer_1.InteractionType.CALENDAR, DataLayer_1.InteractionStep.DATES);
+            context.setStartDate(newDate);
+        };
+        const onEndDateChangedHandler = (newDate) => {
+            DataLayer_1.default.instance.sendInteraction('Check Out Date', DataLayer_1.InteractionType.CALENDAR, DataLayer_1.InteractionStep.DATES);
+            context.setEndDate(newDate);
+        };
+        return (React.createElement(DatePicker_1.default, { supportsMultiSelecting: true, showMultipleMonths: appContext.screenSize > ScreenSize_1.default.ExtraLarge, selectedStartDate: context.startDate, selectedEndDate: context.endDate, supportsWeek: true, showMinNightStay: true, onStartDateChanged: onStartDateChangedHandler, onEndDateChanged: onEndDateChangedHandler }));
+    }, [context.startDate, context.endDate, appContext.screenSize]);
+}
+exports.default = StepOneDateRangePicker;
+//# sourceMappingURL=StepOneDateRangePicker.js.map

package/dist/src/components/steps/date/StepOneDateRangePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepOneDateRangePicker.js","sourceRoot":"/","sources":["src/components/steps/date/StepOneDateRangePicker.tsx"],"names":[],"mappings":";;AAAA,8DAAuD;AACvD,+BAA+B;AAC/B,iCAA4C;AAC5C,yDAAkD;AAClD,iDAAyE;AACzE,uDAAsF;AAEtF,SAAwB,sBAAsB;IAC1C,MAAM,OAAO,GAAG,kBAAU,CAAC,wBAAa,CAAC,CAAC;IAC1C,MAAM,UAAU,GAAG,kBAAU,CAAC,+BAAoB,CAAC,CAAC;IAEpD,OAAO,eAAO,CAAC,GAAG,EAAE;QAChB,MAAM,yBAAyB,GAAG,CAAC,OAAY,EAAE,EAAE;YAC/C,mBAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,eAAe,EAAE,2BAAe,CAAC,QAAQ,EAAE,2BAAe,CAAC,KAAK,CAAC,CAAC;YACrG,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QAClC,CAAC,CAAC;QACF,MAAM,uBAAuB,GAAG,CAAC,OAAY,EAAE,EAAE;YAC7C,mBAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,gBAAgB,EAAE,2BAAe,CAAC,QAAQ,EAAE,2BAAe,CAAC,KAAK,CAAC,CAAC;YACtG,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAChC,CAAC,CAAC;QACF,OAAO,CACH,oBAAC,oBAAU,IACP,sBAAsB,EAAE,IAAI,EAC5B,kBAAkB,EAAE,UAAU,CAAC,UAAU,GAAG,oBAAU,CAAC,UAAU,EACjE,iBAAiB,EAAE,OAAO,CAAC,SAAS,EACpC,eAAe,EAAE,OAAO,CAAC,OAAO,EAChC,YAAY,EAAE,IAAI,EAClB,gBAAgB,EAAE,IAAI,EACtB,kBAAkB,EAAE,yBAAyB,EAC7C,gBAAgB,EAAE,uBAAuB,GAC3C,CACL,CAAC;IACN,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC,OAAO,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC;AACpE,CAAC;AA1BD,yCA0BC","sourcesContent":["import DatePicker from '../../generic/date/DatePicker';\nimport * as React from 'react';\nimport { useContext, useMemo } from 'react';\nimport ScreenSize from '../../../util/ScreenSize';\nimport { BasketContext, BookingEngineContext } from '@frontend/contexts';\nimport DataLayer, { InteractionStep, InteractionType } from '../../../util/DataLayer';\n\nexport default function StepOneDateRangePicker() {\n    const context = useContext(BasketContext);\n    const appContext = useContext(BookingEngineContext);\n\n    return useMemo(() => {\n        const onStartDateChangedHandler = (newDate: any) => {\n            DataLayer.instance.sendInteraction('Check In Date', InteractionType.CALENDAR, InteractionStep.DATES);\n            context.setStartDate(newDate);\n        };\n        const onEndDateChangedHandler = (newDate: any) => {\n            DataLayer.instance.sendInteraction('Check Out Date', InteractionType.CALENDAR, InteractionStep.DATES);\n            context.setEndDate(newDate);\n        };\n        return (\n            <DatePicker\n                supportsMultiSelecting={true}\n                showMultipleMonths={appContext.screenSize > ScreenSize.ExtraLarge}\n                selectedStartDate={context.startDate}\n                selectedEndDate={context.endDate}\n                supportsWeek={true}\n                showMinNightStay={true}\n                onStartDateChanged={onStartDateChangedHandler}\n                onEndDateChanged={onEndDateChangedHandler}\n            />\n        );\n    }, [context.startDate, context.endDate, appContext.screenSize]);\n}\n"]}

package/dist/src/components/steps/date/StepOneDateRangePickerLegend.d.ts

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

package/dist/src/components/steps/date/StepOneDateRangePickerLegend.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const Color_1 = require("../../../util/Color");
+const Translation_1 = require("../../../translations/Translation");
+const Text_1 = require("../../generic/Text");
+const react_i18next_1 = require("react-i18next");
+const RoomstayThemeEngine_1 = require("../../../providers/RoomstayThemeEngine");
+const RoomstayThemeEngine_2 = require("../../../providers/RoomstayThemeEngine");
+function StepOneDateRangePickerLegend() {
+    const { t } = react_i18next_1.useTranslation();
+    return (React.createElement("div", { className: "diji-calendar-legend u-marg-top u-marg-bottom" },
+        React.createElement("ul", { className: "u-list-inline-flex u-flex justify-content-xl-start justify-content-center" }, [
+            {
+                color: Color_1.Color.Navy,
+                text: t(Translation_1.Translation.Step.Date.Legend.Today),
+            },
+            {
+                color: Color_1.Color.Accent,
+                text: t(Translation_1.Translation.Step.Date.Legend.SelectedDates),
+            },
+            {
+                color: Color_1.Color.Success,
+                text: t(Translation_1.Translation.Step.Date.Legend.AvailableDates),
+            },
+            {
+                color: RoomstayThemeEngine_2.default.ThemeType === RoomstayThemeEngine_1.RoomstayTheme.Light ? Color_1.Color.Snow : Color_1.Color.LightGrey,
+                text: t(Translation_1.Translation.Step.Date.Legend.NoAvailability),
+            },
+        ].map((row, index) => {
+            return (React.createElement("li", { className: "u-marg-right align-items-center", key: index },
+                React.createElement("span", { className: "diji-calendar-legend-icon", style: { backgroundColor: row.color } }),
+                React.createElement(Text_1.default, { type: Text_1.TextType.Small, inline: true }, row.text)));
+        }))));
+}
+exports.default = StepOneDateRangePickerLegend;
+//# sourceMappingURL=StepOneDateRangePickerLegend.js.map

package/dist/src/components/steps/date/StepOneDateRangePickerLegend.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepOneDateRangePickerLegend.js","sourceRoot":"/","sources":["src/components/steps/date/StepOneDateRangePickerLegend.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,+CAA4C;AAC5C,mEAAgE;AAChE,6CAAoD;AACpD,iDAA+C;AAC/C,gFAAuE;AACvE,gFAAyE;AAEzE,SAAwB,4BAA4B;IAChD,MAAM,EAAE,CAAC,EAAE,GAAG,8BAAc,EAAE,CAAC;IAE/B,OAAO,CACH,6BAAK,SAAS,EAAC,+CAA+C;QAC1D,4BAAI,SAAS,EAAC,2EAA2E,IACpF;YACG;gBACI,KAAK,EAAE,aAAK,CAAC,IAAI;gBACjB,IAAI,EAAE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;aAC9C;YACD;gBACI,KAAK,EAAE,aAAK,CAAC,MAAM;gBACnB,IAAI,EAAE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC;aACtD;YACD;gBACI,KAAK,EAAE,aAAK,CAAC,OAAO;gBACpB,IAAI,EAAE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC;aACvD;YACD;gBACI,KAAK,EAAE,6BAAmB,CAAC,SAAS,KAAK,mCAAa,CAAC,KAAK,CAAC,CAAC,CAAC,aAAK,CAAC,IAAI,CAAC,CAAC,CAAC,aAAK,CAAC,SAAS;gBAC3F,IAAI,EAAE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC;aACvD;SACJ,CAAC,GAAG,CAAC,CAAC,GAAQ,EAAE,KAAa,EAAE,EAAE;YAC9B,OAAO,CACH,4BAAI,SAAS,EAAC,iCAAiC,EAAC,GAAG,EAAE,KAAK;gBACtD,8BAAM,SAAS,EAAC,2BAA2B,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,GAAG,CAAC,KAAK,EAAE,GAAI;gBACrF,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,IACnC,GAAG,CAAC,IAAI,CACN,CACN,CACR,CAAC;QACN,CAAC,CAAC,CACD,CACH,CACT,CAAC;AACN,CAAC;AApCD,+CAoCC","sourcesContent":["import * as React from 'react';\nimport { Color } from '../../../util/Color';\nimport { Translation } from '../../../translations/Translation';\nimport Text, { TextType } from '../../generic/Text';\nimport { useTranslation } from 'react-i18next';\nimport { RoomstayTheme } from '../../../providers/RoomstayThemeEngine';\nimport RoomstayThemeEngine from '../../../providers/RoomstayThemeEngine';\n\nexport default function StepOneDateRangePickerLegend() {\n    const { t } = useTranslation();\n\n    return (\n        <div className=\"diji-calendar-legend u-marg-top u-marg-bottom\">\n            <ul className=\"u-list-inline-flex u-flex justify-content-xl-start justify-content-center\">\n                {[\n                    {\n                        color: Color.Navy,\n                        text: t(Translation.Step.Date.Legend.Today),\n                    },\n                    {\n                        color: Color.Accent,\n                        text: t(Translation.Step.Date.Legend.SelectedDates),\n                    },\n                    {\n                        color: Color.Success,\n                        text: t(Translation.Step.Date.Legend.AvailableDates),\n                    },\n                    {\n                        color: RoomstayThemeEngine.ThemeType === RoomstayTheme.Light ? Color.Snow : Color.LightGrey,\n                        text: t(Translation.Step.Date.Legend.NoAvailability),\n                    },\n                ].map((row: any, index: number) => {\n                    return (\n                        <li className=\"u-marg-right align-items-center\" key={index}>\n                            <span className=\"diji-calendar-legend-icon\" style={{ backgroundColor: row.color }} />\n                            <Text type={TextType.Small} inline={true}>\n                                {row.text}\n                            </Text>\n                        </li>\n                    );\n                })}\n            </ul>\n        </div>\n    );\n}\n"]}

package/dist/src/components/steps/date/StepOneNextStepButton.d.ts

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

package/dist/src/components/steps/date/StepOneNextStepButton.js

@@ -0,0 +1,51 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const NextStepButton_1 = require("../../generic/buttons/NextStepButton");
+const React = require("react");
+const react_1 = require("react");
+const Translation_1 = require("../../../translations/Translation");
+const react_i18next_1 = require("react-i18next");
+const contexts_1 = require("@frontend/contexts");
+const DataLayer_1 = require("../../../util/DataLayer");
+const contexts_2 = require("@frontend/contexts");
+function StepOneNextStepButton(props) {
+    const { t } = react_i18next_1.useTranslation();
+    const context = react_1.useContext(contexts_1.BasketContext);
+    const { currentStep } = react_1.useContext(contexts_2.FullPageEngineContext);
+    let label = '';
+    if (!context.startDate) {
+        label = Translation_1.Translation.Step.Date.SelectStartDate;
+    }
+    else if (!context.endDate) {
+        label = Translation_1.Translation.Step.Date.SelectCheckoutDate;
+    }
+    else {
+        label = Translation_1.Translation.Step.Date.CheckAvailability;
+    }
+    const buttonOnClickHandler = () => __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        DataLayer_1.default.instance.sendInteraction('Check Availability', DataLayer_1.InteractionType.BUTTON, DataLayer_1.InteractionStep.DATES);
+        if ((_a = context.selectedBasketRow) === null || _a === void 0 ? void 0 : _a.getPromoCode()) {
+            const rowsWithoutPromo = context.currentBasketRows.filter((row) => !row.getPromoCode());
+            if (rowsWithoutPromo.length) {
+                rowsWithoutPromo.forEach((row) => {
+                    row.setPromoCode(context.selectedBasketRow.getPromoCode());
+                    context.updateBasketRow(row);
+                });
+            }
+        }
+        return true;
+    });
+    return (React.createElement(NextStepButton_1.default, { text: t(label), history: props.history, disabled: !context.endDate, currentStep: currentStep, hideIcon: !context.endDate, onClick: buttonOnClickHandler }));
+}
+exports.default = StepOneNextStepButton;
+//# sourceMappingURL=StepOneNextStepButton.js.map

package/dist/src/components/steps/date/StepOneNextStepButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepOneNextStepButton.js","sourceRoot":"/","sources":["src/components/steps/date/StepOneNextStepButton.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,yEAAkE;AAClE,+BAA+B;AAC/B,iCAAmC;AACnC,mEAAgE;AAChE,iDAA+C;AAC/C,iDAAmD;AACnD,uDAAsF;AACtF,iDAA2D;AAE3D,SAAwB,qBAAqB,CAAC,KAAU;IACpD,MAAM,EAAE,CAAC,EAAE,GAAG,8BAAc,EAAE,CAAC;IAE/B,MAAM,OAAO,GAAG,kBAAU,CAAC,wBAAa,CAAC,CAAC;IAC1C,MAAM,EAAE,WAAW,EAAE,GAAG,kBAAU,CAAC,gCAAqB,CAAC,CAAC;IAE1D,IAAI,KAAK,GAAG,EAAE,CAAC;IAEf,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE;QACpB,KAAK,GAAG,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC;KACjD;SAAM,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE;QACzB,KAAK,GAAG,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC;KACpD;SAAM;QACH,KAAK,GAAG,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC;KACnD;IAED,MAAM,oBAAoB,GAAG,GAAS,EAAE;;QACpC,mBAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,oBAAoB,EAAE,2BAAe,CAAC,MAAM,EAAE,2BAAe,CAAC,KAAK,CAAC,CAAC;QAExG,UAAI,OAAO,CAAC,iBAAiB,0CAAE,YAAY,IAAI;YAC3C,MAAM,gBAAgB,GAAG,OAAO,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC,CAAC;YAExF,IAAI,gBAAgB,CAAC,MAAM,EAAE;gBACzB,gBAAgB,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;oBAC7B,GAAG,CAAC,YAAY,CAAC,OAAO,CAAC,iBAAiB,CAAC,YAAY,EAAE,CAAC,CAAC;oBAC3D,OAAO,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;gBACjC,CAAC,CAAC,CAAC;aACN;SACJ;QAED,OAAO,IAAI,CAAC;IAChB,CAAC,CAAA,CAAC;IAEF,OAAO,CACH,oBAAC,wBAAc,IAAC,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,QAAQ,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,OAAO,EAAE,oBAAoB,GAAI,CAC9K,CAAC;AACN,CAAC;AApCD,wCAoCC","sourcesContent":["import NextStepButton from '../../generic/buttons/NextStepButton';\nimport * as React from 'react';\nimport { useContext } from 'react';\nimport { Translation } from '../../../translations/Translation';\nimport { useTranslation } from 'react-i18next';\nimport { BasketContext } from '@frontend/contexts';\nimport DataLayer, { InteractionStep, InteractionType } from '../../../util/DataLayer';\nimport { FullPageEngineContext } from '@frontend/contexts';\n\nexport default function StepOneNextStepButton(props: any) {\n    const { t } = useTranslation();\n\n    const context = useContext(BasketContext);\n    const { currentStep } = useContext(FullPageEngineContext);\n\n    let label = '';\n\n    if (!context.startDate) {\n        label = Translation.Step.Date.SelectStartDate;\n    } else if (!context.endDate) {\n        label = Translation.Step.Date.SelectCheckoutDate;\n    } else {\n        label = Translation.Step.Date.CheckAvailability;\n    }\n\n    const buttonOnClickHandler = async () => {\n        DataLayer.instance.sendInteraction('Check Availability', InteractionType.BUTTON, InteractionStep.DATES);\n\n        if (context.selectedBasketRow?.getPromoCode()) {\n            const rowsWithoutPromo = context.currentBasketRows.filter((row) => !row.getPromoCode());\n\n            if (rowsWithoutPromo.length) {\n                rowsWithoutPromo.forEach((row) => {\n                    row.setPromoCode(context.selectedBasketRow.getPromoCode());\n                    context.updateBasketRow(row);\n                });\n            }\n        }\n\n        return true;\n    };\n\n    return (\n        <NextStepButton text={t(label)} history={props.history} disabled={!context.endDate} currentStep={currentStep} hideIcon={!context.endDate} onClick={buttonOnClickHandler} />\n    );\n}\n"]}

package/dist/src/components/steps/date/StepOneStatusPeople.d.ts

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

package/dist/src/components/steps/date/StepOneStatusPeople.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const contexts_1 = require("@frontend/contexts");
+const Text_1 = require("../../generic/Text");
+function StepOneStatusPeople() {
+    const context = React.useContext(contexts_1.BasketContext);
+    return (React.createElement("div", { className: "step-one-status--people" },
+        React.createElement(Text_1.default, null,
+            context.getNumberOfAdults(true),
+            ",\u00A0",
+            context.getNumberOfChildren(true),
+            ",\u00A0",
+            context.getNumberOfRooms(true))));
+}
+exports.default = StepOneStatusPeople;
+//# sourceMappingURL=StepOneStatusPeople.js.map

package/dist/src/components/steps/date/StepOneStatusPeople.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepOneStatusPeople.js","sourceRoot":"/","sources":["src/components/steps/date/StepOneStatusPeople.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,iDAAmD;AACnD,6CAAsC;AAEtC,SAAwB,mBAAmB;IACvC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,wBAAa,CAAC,CAAC;IAChD,OAAO,CACH,6BAAK,SAAS,EAAC,yBAAyB;QACpC,oBAAC,cAAI;YACA,OAAO,CAAC,iBAAiB,CAAC,IAAI,CAAC;;YAC/B,OAAO,CAAC,mBAAmB,CAAC,IAAI,CAAC;;YACjC,OAAO,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAC5B,CACL,CACT,CAAC;AACN,CAAC;AAXD,sCAWC","sourcesContent":["import * as React from 'react';\nimport { BasketContext } from '@frontend/contexts';\nimport Text from '../../generic/Text';\n\nexport default function StepOneStatusPeople() {\n    const context = React.useContext(BasketContext);\n    return (\n        <div className=\"step-one-status--people\">\n            <Text>\n                {context.getNumberOfAdults(true)},&nbsp;\n                {context.getNumberOfChildren(true)},&nbsp;\n                {context.getNumberOfRooms(true)}\n            </Text>\n        </div>\n    );\n}\n"]}

package/dist/src/components/steps/hotel/HotelCard.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Hotel } from '../../../models/Client/Hotel/Hotel';
+interface HotelCardProps {
+    hotel: Hotel;
+}
+declare const HotelCard: ({ hotel }: HotelCardProps) => JSX.Element;
+export default HotelCard;

package/dist/src/components/steps/hotel/HotelCard.js

@@ -0,0 +1,145 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const react_1 = require("react");
+const react_i18next_1 = require("react-i18next");
+const Translation_1 = require("../../../translations/Translation");
+const Color_1 = require("../../../util/Color");
+const ScreenSize_1 = require("../../../util/ScreenSize");
+const BEButton_1 = require("../../generic/BEButton");
+const Currency_1 = require("../../generic/Currency");
+const Headline_1 = require("../../generic/Headline");
+const Icon_1 = require("../../generic/Icon");
+const Text_1 = require("../../generic/Text");
+const ImageGallerySlider_1 = require("../room/ImageGallerySlider");
+const react_router_1 = require("react-router");
+const Placeholder_1 = require("../../generic/Placeholder");
+const HotelCardModal_1 = require("./HotelCardModal");
+const contexts_1 = require("@frontend/contexts");
+const BETooltip_1 = require("../../generic/BETooltip");
+const SmallSpinner_1 = require("../../generic/loader/SmallSpinner");
+const StepRoom_1 = require("../../../pages/steps/StepRoom/StepRoom");
+const HotelCard = ({ hotel }) => {
+    var _a, _b, _c;
+    const beContext = react_1.useContext(contexts_1.BookingEngineContext);
+    const ccx = react_1.useContext(contexts_1.CompanyContext);
+    const history = react_router_1.useHistory();
+    const [images, setImages] = react_1.useState([hotel.heroImage]);
+    const [modalOpen, setModalOpen] = react_1.useState(false);
+    const hotelCardRef = react_1.useRef();
+    const currentPrice = (_a = hotel.lowestPrice) === null || _a === void 0 ? void 0 : _a.value;
+    const currentPriceLoading = (_b = hotel.lowestPrice) === null || _b === void 0 ? void 0 : _b.isLoading;
+    const showPrice = currentPriceLoading || (!currentPriceLoading && currentPrice > 0);
+    const { t } = react_i18next_1.useTranslation();
+    react_1.useEffect(() => {
+        const newImages = [hotel.heroImage];
+        if (hotel.rooms) {
+            for (const room of Object.values(hotel.rooms)) {
+                room.images.forEach((image) => {
+                    newImages.push(image);
+                });
+            }
+        }
+        setImages(newImages);
+    }, [hotel.rooms]);
+    react_1.useEffect(() => {
+        if (!hotel.hasLoadedDetails) {
+            // If we haven't fetched this hotel yet, lets trigger
+            ccx.refreshHotelFromApi(hotel.hotelID);
+        }
+    }, [hotel.hasLoadedDetails]);
+    const [openPerk, setOpenPerk] = react_1.useState((_c = hotel.perks[0]) === null || _c === void 0 ? void 0 : _c.name);
+    const colorProfile = hotel.colors;
+    const onViewRoomsClicked = () => __awaiter(void 0, void 0, void 0, function* () {
+        ccx.changeHotel(hotel);
+        history.push(StepRoom_1.default.getStepUrl());
+    });
+    const onMoreDetailsClicked = () => __awaiter(void 0, void 0, void 0, function* () {
+        setModalOpen(true);
+    });
+    const onModalClose = () => {
+        setModalOpen(false);
+    };
+    const isLoading = !hotel.hasLoadedDetails;
+    return react_1.useMemo(() => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const content = isLoading ? (React.createElement("div", null,
+            React.createElement("div", { className: "d-flex flex-column" },
+                React.createElement(Placeholder_1.default, { type: "block", blockSize: "sm", rounded: "lg", blink: true }),
+                React.createElement("div", { className: "u-pad" },
+                    React.createElement(Placeholder_1.default, { type: "text", w: "md", h: "md", blink: true }),
+                    React.createElement(Placeholder_1.default, { type: "text", w: "md", h: "md", blink: true }),
+                    React.createElement("div", { className: "u-marg-top" },
+                        React.createElement("div", { className: "u-flex justify-space-between" },
+                            React.createElement(Placeholder_1.default, { type: "block", blockSize: "xs", rounded: "lg", blink: true }),
+                            React.createElement(Placeholder_1.default, { type: "block", blockSize: "xs", rounded: "lg", blink: true }),
+                            React.createElement(Placeholder_1.default, { type: "block", blockSize: "xs", rounded: "lg", blink: true }))))))) : (React.createElement("div", { className: "large-hotel-card u-rounded h-100 justify-items-between" },
+            React.createElement("div", { className: "large-hotel-card--image" },
+                React.createElement(ImageGallerySlider_1.default, { images: images })),
+            React.createElement("div", { className: "large-hotel-card--body u-pad--heavy u-pad-bottom--none container" },
+                React.createElement(Headline_1.default, { bold: true }, hotel === null || hotel === void 0 ? void 0 : hotel.name),
+                React.createElement(Text_1.default, { color: Color_1.Color.DarkGrey, bold: true, className: "u-marg-bottom--light" }, (_a = hotel === null || hotel === void 0 ? void 0 : hotel.address) === null || _a === void 0 ? void 0 : _a.city),
+                React.createElement("div", { className: "u-flex u-marg-bottom" },
+                    React.createElement(Text_1.default, { type: Text_1.TextType.Small }, [(_b = hotel === null || hotel === void 0 ? void 0 : hotel.address) === null || _b === void 0 ? void 0 : _b.line1, (_c = hotel === null || hotel === void 0 ? void 0 : hotel.address) === null || _c === void 0 ? void 0 : _c.line2, (_d = hotel === null || hotel === void 0 ? void 0 : hotel.address) === null || _d === void 0 ? void 0 : _d.state].filter((line) => !!line).join(', '))),
+                React.createElement("div", { className: "u-marg-bottom--medium large-hotel-card--description" },
+                    React.createElement(Text_1.default, { className: "text", type: Text_1.TextType.Small },
+                        React.createElement("span", { dangerouslySetInnerHTML: { __html: hotel.description } }))),
+                !!((_e = hotel.perks) === null || _e === void 0 ? void 0 : _e.length) && (React.createElement(Text_1.default, { className: "u-marg-bottom", bold: true, type: Text_1.TextType.Small, color: Color_1.Color.Accent }, "And these come free...")),
+                React.createElement("div", { className: "u-flex u-flex-align-center u-marg-bottom--medium" },
+                    !!((_f = hotel.perks) === null || _f === void 0 ? void 0 : _f.length) && (React.createElement("div", { className: "u-flex" }, hotel.perks.slice(0, 5).map((perk) => {
+                        var _a;
+                        const openPerkOnClick = () => {
+                            setOpenPerk(perk.name);
+                        };
+                        return (React.createElement("div", { className: "u-flex u-flex-align-center", key: perk.name },
+                            React.createElement(BETooltip_1.default, { title: (_a = perk.tooltip) !== null && _a !== void 0 ? _a : perk.name, overrideContainer: hotelCardRef === null || hotelCardRef === void 0 ? void 0 : hotelCardRef.current },
+                                React.createElement("div", { onClick: openPerkOnClick, style: { backgroundColor: Color_1.Color.Snow }, className: "u-rounded u-pad--light u-marg-right--light d-flex justify-center" },
+                                    React.createElement("div", { className: "u-mw-16 d-flex justify-content-center" }, perk.iconElement ? perk.iconElement : React.createElement(Icon_1.default, { icon: perk.icon })))),
+                            React.createElement("div", { className: 'u-marg-right u-none@l- u-block@m- ' +
+                                    (beContext.screenSize > ScreenSize_1.default.Medium ||
+                                        beContext.screenSize <= ScreenSize_1.default.Mobile ||
+                                        (beContext.screenSize > ScreenSize_1.default.Mobile && beContext.screenSize <= ScreenSize_1.default.Medium && openPerk !== perk.name)
+                                        ? 'u-none-2'
+                                        : '') },
+                                React.createElement(Text_1.default, { type: Text_1.TextType.Small }, perk.name))));
+                    }))),
+                    React.createElement(BEButton_1.default, { icon: Icon_1.IconType.ArrowRight2, isText: true, primary: true, size: "tiny", iconPosition: "right", onClick: onMoreDetailsClicked }, t(Translation_1.Translation.Step.Room.RoomInfo.MoreDetails)))),
+            React.createElement("div", { className: "u-pad--heavy u-pad-top--none h-100 justify-content-end u-flex flex-column u-flex-align-flex-start align-items-md-start no-gutters" },
+                showPrice ? (React.createElement(React.Fragment, null,
+                    React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Navy, inline: true }, t(Translation_1.Translation.Misc.From)),
+                    React.createElement("div", { className: "u-flex u-flex-flex-start u-flex-align-center flex-row" },
+                        React.createElement(Headline_1.default, { bold: true, className: "u-flex" }, ((_g = hotel.lowestPrice) === null || _g === void 0 ? void 0 : _g.isLoading) ? (React.createElement(SmallSpinner_1.default, null)) : (React.createElement(Currency_1.default, { hideDecimals: true, originalCurrencyCode: hotel.defaultCurrency }, currentPrice))),
+                        React.createElement(Text_1.default, { color: Color_1.Color.DarkGrey, inline: true },
+                            "/",
+                            t(Translation_1.Translation.Misc.Night))),
+                    React.createElement("div", { className: "u-marg-bottom" },
+                        React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Grey, inline: true, className: "u-nowrap" }, t(Translation_1.Translation.Step.Room.ExcludingTaxes))))) : (React.createElement("div", { className: "u-h-fill d-flex align-items-center" },
+                    React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Alert }, t(Translation_1.Translation.Step.Hotel.HotelCard.DatesUnavailable)))),
+                React.createElement("div", { className: "u-marg-top--light u-flex justify-content-end u-w-100@m-" },
+                    React.createElement(BEButton_1.default, { name: "ViewRatesNowButton", primary: true, primaryActive: true, filled: true, icon: Icon_1.IconType.ArrowRight, iconPosition: 'right', wide: beContext.screenSize <= ScreenSize_1.default.Medium, onClick: onViewRoomsClicked }, "View Rooms"))),
+            React.createElement(HotelCardModal_1.default, { open: modalOpen, onClose: onModalClose, hotel: hotel, container: hotelCardRef === null || hotelCardRef === void 0 ? void 0 : hotelCardRef.current })));
+        return (React.createElement("span", { ref: hotelCardRef, id: `hotel-card-${hotel.hotelID}` },
+            React.createElement("style", { dangerouslySetInnerHTML: {
+                    __html: ` 
+                    #hotel-card-modal-${hotel.hotelID},
+                    #hotel-card-${hotel.hotelID} {
+                        --color-accent-1: ${colorProfile.accent}!important;
+                        --color-accent-2: ${colorProfile.accent2}!important;
+                        --color-accent-3: ${colorProfile.accent3}!important;
+                    }
+                `,
+                } }),
+            content));
+    }, [currentPrice, isLoading, currentPriceLoading, modalOpen, hotelCardRef, openPerk]);
+};
+exports.default = HotelCard;
+//# sourceMappingURL=HotelCard.js.map

package/dist/src/components/steps/hotel/HotelCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HotelCard.js","sourceRoot":"/","sources":["src/components/steps/hotel/HotelCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useState, useContext, useEffect, useMemo, useRef } from 'react';\n\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from '../../../translations/Translation';\nimport { Color } from '../../../util/Color';\nimport ScreenSize from '../../../util/ScreenSize';\nimport BEButton from '../../generic/BEButton';\nimport Currency from '../../generic/Currency';\nimport Headline from '../../generic/Headline';\nimport Icon, { IconType } from '../../generic/Icon';\nimport Text, { TextType } from '../../generic/Text';\nimport ImageGallerySlider from '../room/ImageGallerySlider';\nimport { useHistory } from 'react-router';\nimport Placeholder from '../../generic/Placeholder';\nimport HotelCardModal from './HotelCardModal';\nimport { BookingEngineContext, CompanyContext } from '@frontend/contexts';\nimport BETooltip from '../../generic/BETooltip';\nimport { Hotel } from '../../../models/Client/Hotel/Hotel';\n\nimport SmallSpinner from '../../generic/loader/SmallSpinner';\nimport StepRoom from '../../../pages/steps/StepRoom/StepRoom';\n\ninterface HotelCardProps {\n    hotel: Hotel;\n}\n\nconst HotelCard = ({ hotel }: HotelCardProps) => {\n    const beContext = useContext(BookingEngineContext);\n    const ccx = useContext(CompanyContext);\n\n    const history = useHistory();\n\n    const [images, setImages] = useState([hotel.heroImage]);\n    const [modalOpen, setModalOpen] = useState(false);\n\n    const hotelCardRef = useRef();\n\n    const currentPrice = hotel.lowestPrice?.value;\n    const currentPriceLoading = hotel.lowestPrice?.isLoading;\n\n    const showPrice = currentPriceLoading || (!currentPriceLoading && currentPrice > 0);\n\n    const { t } = useTranslation();\n\n    useEffect(() => {\n        const newImages: string[] = [hotel.heroImage];\n\n        if (hotel.rooms) {\n            for (const room of Object.values(hotel.rooms)) {\n                room.images.forEach((image) => {\n                    newImages.push(image);\n                });\n            }\n        }\n\n        setImages(newImages);\n    }, [hotel.rooms]);\n\n    useEffect(() => {\n        if (!hotel.hasLoadedDetails) {\n            // If we haven't fetched this hotel yet, lets trigger\n            ccx.refreshHotelFromApi(hotel.hotelID);\n        }\n    }, [hotel.hasLoadedDetails]);\n\n    const [openPerk, setOpenPerk] = useState(hotel.perks[0]?.name);\n    const colorProfile = hotel.colors;\n\n    const onViewRoomsClicked = async () => {\n        ccx.changeHotel(hotel);\n\n        history.push(StepRoom.getStepUrl());\n    };\n\n    const onMoreDetailsClicked = async () => {\n        setModalOpen(true);\n    };\n\n    const onModalClose = () => {\n        setModalOpen(false);\n    };\n\n    const isLoading = !hotel.hasLoadedDetails;\n\n    return useMemo(() => {\n        const content = isLoading ? (\n            <div>\n                <div className=\"d-flex flex-column\">\n                    <Placeholder type=\"block\" blockSize=\"sm\" rounded=\"lg\" blink={true} />\n                    <div className=\"u-pad\">\n                        <Placeholder type=\"text\" w=\"md\" h=\"md\" blink={true} />\n                        <Placeholder type=\"text\" w=\"md\" h=\"md\" blink={true} />\n                        <div className=\"u-marg-top\">\n                            <div className=\"u-flex justify-space-between\">\n                                <Placeholder type=\"block\" blockSize=\"xs\" rounded=\"lg\" blink={true} />\n                                <Placeholder type=\"block\" blockSize=\"xs\" rounded=\"lg\" blink={true} />\n                                <Placeholder type=\"block\" blockSize=\"xs\" rounded=\"lg\" blink={true} />\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        ) : (\n            <div className=\"large-hotel-card u-rounded h-100 justify-items-between\">\n                <div className=\"large-hotel-card--image\">\n                    <ImageGallerySlider images={images} />\n                </div>\n                <div className=\"large-hotel-card--body u-pad--heavy u-pad-bottom--none container\">\n                    <Headline bold={true}>{hotel?.name}</Headline>\n                    <Text color={Color.DarkGrey} bold={true} className=\"u-marg-bottom--light\">\n                        {hotel?.address?.city}\n                    </Text>\n                    <div className=\"u-flex u-marg-bottom\">\n                        <Text type={TextType.Small}>{[hotel?.address?.line1, hotel?.address?.line2, hotel?.address?.state].filter((line) => !!line).join(', ')}</Text>\n                    </div>\n                    <div className=\"u-marg-bottom--medium large-hotel-card--description\">\n                        <Text className=\"text\" type={TextType.Small}>\n                            <span dangerouslySetInnerHTML={{ __html: hotel.description }}></span>\n                        </Text>\n                    </div>\n                    {!!hotel.perks?.length && (\n                        <Text className=\"u-marg-bottom\" bold={true} type={TextType.Small} color={Color.Accent}>\n                            And these come free...\n                        </Text>\n                    )}\n                    <div className=\"u-flex u-flex-align-center u-marg-bottom--medium\">\n                        {!!hotel.perks?.length && (\n                            <div className=\"u-flex\">\n                                {hotel.perks.slice(0, 5).map((perk) => {\n                                    const openPerkOnClick = () => {\n                                        setOpenPerk(perk.name);\n                                    };\n                                    return (\n                                        <div className=\"u-flex u-flex-align-center\" key={perk.name}>\n                                            <BETooltip title={perk.tooltip ?? perk.name} overrideContainer={hotelCardRef?.current}>\n                                                <div\n                                                    onClick={openPerkOnClick}\n                                                    style={{ backgroundColor: Color.Snow }}\n                                                    className=\"u-rounded u-pad--light u-marg-right--light d-flex justify-center\"\n                                                >\n                                                    <div className=\"u-mw-16 d-flex justify-content-center\">{perk.iconElement ? perk.iconElement : <Icon icon={perk.icon} />}</div>\n                                                </div>\n                                            </BETooltip>\n                                            <div\n                                                className={\n                                                    'u-marg-right u-none@l- u-block@m- ' +\n                                                    (beContext.screenSize > ScreenSize.Medium ||\n                                                    beContext.screenSize <= ScreenSize.Mobile ||\n                                                    (beContext.screenSize > ScreenSize.Mobile && beContext.screenSize <= ScreenSize.Medium && openPerk !== perk.name)\n                                                        ? 'u-none-2'\n                                                        : '')\n                                                }\n                                            >\n                                                <Text type={TextType.Small}>{perk.name}</Text>\n                                            </div>\n                                        </div>\n                                    );\n                                })}\n                            </div>\n                        )}\n                        <BEButton icon={IconType.ArrowRight2} isText={true} primary={true} size=\"tiny\" iconPosition=\"right\" onClick={onMoreDetailsClicked}>\n                            {t(Translation.Step.Room.RoomInfo.MoreDetails)}\n                        </BEButton>\n                    </div>\n                </div>\n                <div className=\"u-pad--heavy u-pad-top--none h-100 justify-content-end u-flex flex-column u-flex-align-flex-start align-items-md-start no-gutters\">\n                    {showPrice ? (\n                        <>\n                            <Text type={TextType.Small} color={Color.Navy} inline={true}>\n                                {t(Translation.Misc.From)}\n                            </Text>\n                            <div className=\"u-flex u-flex-flex-start u-flex-align-center flex-row\">\n                                <Headline bold={true} className=\"u-flex\">\n                                    {hotel.lowestPrice?.isLoading ? (\n                                        <SmallSpinner />\n                                    ) : (\n                                        <Currency hideDecimals={true} originalCurrencyCode={hotel.defaultCurrency}>\n                                            {currentPrice}\n                                        </Currency>\n                                    )}\n                                </Headline>\n                                <Text color={Color.DarkGrey} inline={true}>\n                                    /{t(Translation.Misc.Night)}\n                                </Text>\n                            </div>\n                            <div className=\"u-marg-bottom\">\n                                <Text type={TextType.Small} color={Color.Grey} inline={true} className=\"u-nowrap\">\n                                    {t(Translation.Step.Room.ExcludingTaxes)}\n                                </Text>\n                            </div>\n                        </>\n                    ) : (\n                        <div className=\"u-h-fill d-flex align-items-center\">\n                            <Text type={TextType.Small} color={Color.Alert}>\n                                {t(Translation.Step.Hotel.HotelCard.DatesUnavailable)}\n                            </Text>\n                        </div>\n                    )}\n\n                    <div className=\"u-marg-top--light u-flex justify-content-end u-w-100@m-\">\n                        <BEButton\n                            name=\"ViewRatesNowButton\"\n                            primary={true}\n                            primaryActive={true}\n                            filled={true}\n                            icon={IconType.ArrowRight}\n                            iconPosition={'right'}\n                            wide={beContext.screenSize <= ScreenSize.Medium}\n                            onClick={onViewRoomsClicked}\n                        >\n                            View Rooms\n                        </BEButton>\n                    </div>\n                </div>\n                <HotelCardModal open={modalOpen} onClose={onModalClose} hotel={hotel} container={hotelCardRef?.current} />\n            </div>\n        );\n\n        return (\n            <span ref={hotelCardRef} id={`hotel-card-${hotel.hotelID}`}>\n                <style\n                    dangerouslySetInnerHTML={{\n                        __html: ` \n                    #hotel-card-modal-${hotel.hotelID},\n                    #hotel-card-${hotel.hotelID} {\n                        --color-accent-1: ${colorProfile.accent}!important;\n                        --color-accent-2: ${colorProfile.accent2}!important;\n                        --color-accent-3: ${colorProfile.accent3}!important;\n                    }\n                `,\n                    }}\n                />\n                {content}\n            </span>\n        );\n    }, [currentPrice, isLoading, currentPriceLoading, modalOpen, hotelCardRef, openPerk]);\n};\n\nexport default HotelCard;\n"]}

package/dist/src/components/steps/hotel/HotelCardList.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Hotel } from '../../../models/Client/Hotel/Hotel';
+export interface HotelCardListProps {
+    hotelList: Hotel[];
+}
+export default function HotelCardList({ hotelList }: HotelCardListProps): JSX.Element;

package/dist/src/components/steps/hotel/HotelCardList.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const HotelCard_1 = require("./HotelCard");
+const NoHotelsAvailable_1 = require("./NoHotelsAvailable");
+function HotelCardList({ hotelList }) {
+    return (hotelList === null || hotelList === void 0 ? void 0 : hotelList.length) > 0 ? (React.createElement("div", { className: "row" }, hotelList.map((hotel, index) => {
+        return (React.createElement("div", { key: `${hotel.hotelID}-${index}`, className: "col-md-4 u-marg-bottom--heavy" },
+            React.createElement(HotelCard_1.default, { hotel: hotel })));
+    }))) : (React.createElement(NoHotelsAvailable_1.default, null));
+}
+exports.default = HotelCardList;
+//# sourceMappingURL=HotelCardList.js.map

package/dist/src/components/steps/hotel/HotelCardList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HotelCardList.js","sourceRoot":"/","sources":["src/components/steps/hotel/HotelCardList.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAG/B,2CAAoC;AACpC,2DAAoD;AAMpD,SAAwB,aAAa,CAAC,EAAE,SAAS,EAAsB;IACnE,OAAO,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,MAAM,IAAG,CAAC,CAAC,CAAC,CAAC,CAC3B,6BAAK,SAAS,EAAC,KAAK,IACf,SAAS,CAAC,GAAG,CAAC,CAAC,KAAY,EAAE,KAAa,EAAE,EAAE;QAC3C,OAAO,CACH,6BAAK,GAAG,EAAE,GAAG,KAAK,CAAC,OAAO,IAAI,KAAK,EAAE,EAAE,SAAS,EAAC,+BAA+B;YAC5E,oBAAC,mBAAS,IAAC,KAAK,EAAE,KAAK,GAAI,CACzB,CACT,CAAC;IACN,CAAC,CAAC,CACA,CACT,CAAC,CAAC,CAAC,CACA,oBAAC,2BAAiB,OAAG,CACxB,CAAC;AACN,CAAC;AAdD,gCAcC","sourcesContent":["import * as React from 'react';\nimport { Hotel } from '../../../models/Client/Hotel/Hotel';\n\nimport HotelCard from './HotelCard';\nimport NoHotelsAvailable from './NoHotelsAvailable';\n\nexport interface HotelCardListProps {\n    hotelList: Hotel[];\n}\n\nexport default function HotelCardList({ hotelList }: HotelCardListProps) {\n    return hotelList?.length > 0 ? (\n        <div className=\"row\">\n            {hotelList.map((hotel: Hotel, index: number) => {\n                return (\n                    <div key={`${hotel.hotelID}-${index}`} className=\"col-md-4 u-marg-bottom--heavy\">\n                        <HotelCard hotel={hotel} />\n                    </div>\n                );\n            })}\n        </div>\n    ) : (\n        <NoHotelsAvailable />\n    );\n}\n"]}

package/dist/src/components/steps/hotel/HotelCardModal.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { Hotel } from '../../../models/Client/Hotel/Hotel';
+interface HotelCardModalProps {
+    open: boolean;
+    hotel: Hotel;
+    onClose: () => void;
+    container: React.ReactInstance;
+}
+declare const HotelCardModal: (props: HotelCardModalProps) => JSX.Element;
+export default HotelCardModal;