@roomstay/frontend 2.1.6 → 2.1.8

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

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const Text_1 = __importStar(require("../../generic/Text"));
 const TextAlignment_1 = require("../../../util/TextAlignment");
 const Color_1 = require("../../../util/Color");
@@ -34,18 +34,18 @@ const Translation_1 = require("translations/Translation");
 const Headline_1 = __importDefault(require("../../generic/Headline"));
 const Currency_1 = __importDefault(require("../../generic/Currency"));
 const react_i18next_1 = require("react-i18next");
-const react_1 = require("react");
+const react_2 = require("react");
 const contexts_1 = require("../../../contexts/index.js");
 const BookingAPI_1 = __importDefault(require("../../../api/BookingAPI"));
 const Icon_1 = __importStar(require("../../generic/Icon/Icon"));
 const hooks_1 = require("../../../hooks/index.js");
 function StepDatePricePerRoom(props) {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const basketContext = (0, react_1.useContext)(contexts_1.BasketContext);
+    const basketContext = (0, react_2.useContext)(contexts_1.BasketContext);
     const { hotel } = (0, hooks_1.useCurrentHotel)();
-    const [pricePerRoom, setPricePerRoom] = (0, react_1.useState)(0);
-    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
+    const [pricePerRoom, setPricePerRoom] = (0, react_2.useState)(0);
+    const [isLoading, setIsLoading] = (0, react_2.useState)(false);
+    (0, react_2.useEffect)(() => {
         var _a;
         let cancelled = false;
         const selectedBasketRow = (_a = basketContext.selectedBasketRow) !== null && _a !== void 0 ? _a : basketContext.currentBasketRows[basketContext.currentBasketRows.length - 1];
@@ -55,7 +55,7 @@ function StepDatePricePerRoom(props) {
             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) => {
+                BookingAPI_1.default.Availability.getCheapestPricePerDay(basketContext.startDate, basketContext.endDate.subtract(1, 'day'), adults, children, promoCode, hotel === null || hotel === void 0 ? void 0 : 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;
@@ -74,20 +74,20 @@ function StepDatePricePerRoom(props) {
         };
     }, [basketContext.endDate, basketContext.selectedBasketRow]);
     const isMobile = props.isMobile;
-    return (0, 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 } },
+    return (0, react_2.useMemo)(() => {
+        return (react_1.default.createElement("div", { className: "u-flex flex-column justify-content-end align-items-end h-100" },
+            react_1.default.createElement(Text_1.default, { type: isMobile ? Text_1.TextType.Label : Text_1.TextType.Small, align: TextAlignment_1.TextAlign.Right, className: "u-nowrap" },
+                react_1.default.createElement("span", { style: { color: Color_1.Color.DarkGrey } },
                     t(Translation_1.Translation.Misc.From),
                     " ",
-                    React.createElement("span", { style: { color: Color_1.Color.Grey } },
+                    react_1.default.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))))));
+            isMobile ? (react_1.default.createElement("span", { className: "u-ellip-w-100-deep" },
+                react_1.default.createElement(Text_1.default, { bold: true }, isLoading ? (react_1.default.createElement("div", { className: "u-inline-flex a-spin" },
+                    react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Spinner }))) : (react_1.default.createElement(Currency_1.default, { removeCurrencyAfterChar: 6 }, pricePerRoom))))) : (react_1.default.createElement(Headline_1.default, { bold: true, size: "large", align: TextAlignment_1.TextAlign.Right }, isLoading ? (react_1.default.createElement("div", { className: "u-inline-flex a-spin" },
+                react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Spinner }))) : (react_1.default.createElement(Currency_1.default, null, pricePerRoom))))));
     }, [isLoading, pricePerRoom]);
 }
 exports.default = StepDatePricePerRoom;

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

@@ -1 +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 '@/components/generic/Text';\nimport { TextAlign } from '@/util/TextAlignment';\nimport { Color } from '@/util/Color';\nimport { Translation } from 'translations/Translation';\nimport Headline from '@/components/generic/Headline';\nimport Currency from '@/components/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 '@/components/generic/Icon/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"]}
+{"version":3,"file":"StepDatePricePerRoom.js","sourceRoot":"/","sources":["src/components/steps/date/StepDatePricePerRoom.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,kEAA2D;AAC3D,wDAAiD;AACjD,wCAAqC;AACrC,0DAAuD;AACvD,6EAAqD;AACrD,6EAAqD;AACrD,iDAA+C;AAC/C,iCAAiE;AACjE,iDAAmD;AACnD,kEAAmC;AACnC,uEAAgE;AAChE,2CAAkD;AAMlD,SAAwB,oBAAoB,CAAC,KAAgC;IACzE,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAC/B,MAAM,aAAa,GAAG,IAAA,kBAAU,EAAC,wBAAa,CAAC,CAAC;IAChD,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,uBAAe,GAAE,CAAC;IAEpC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,CAAC,CAAC;IACpD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAElD,IAAA,iBAAS,EAAC,GAAG,EAAE;;QACX,IAAI,SAAS,GAAG,KAAK,CAAC;QAEtB,MAAM,iBAAiB,GAAG,MAAA,aAAa,CAAC,iBAAiB,mCAAI,aAAa,CAAC,iBAAiB,CAAC,aAAa,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAEzI,IAAI,aAAa,CAAC,OAAO,EAAE;YACvB,MAAM,MAAM,GAAG,iBAAiB,CAAC,CAAC,CAAC,iBAAiB,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;YACrE,MAAM,QAAQ,GAAG,iBAAiB,CAAC,CAAC,CAAC,iBAAiB,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;YACzE,MAAM,SAAS,GAAG,iBAAiB,CAAC,CAAC,CAAC,iBAAiB,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;YAE5E,YAAY,CAAC,IAAI,CAAC,CAAC;YACnB,UAAU,CAAC,GAAG,EAAE;gBACZ,oBAAG,CAAC,YAAY,CAAC,sBAAsB,CACnC,aAAa,CAAC,SAAS,EACvB,aAAa,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,EAAE,KAAK,CAAC,EACxC,MAAM,EACN,QAAQ,EACR,SAAS,EACT,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAiB,CAC3B,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,EAAE;oBACjB,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;oBAExC,IAAI,CAAC,SAAS,EAAE;wBACZ,IAAI,eAAe,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;wBAEnH,IAAI,KAAK,CAAC,eAAe,CAAC,EAAE;4BACxB,eAAe,GAAG,CAAC,CAAC;yBACvB;wBAED,eAAe,CAAC,eAAe,CAAC,CAAC;wBACjC,YAAY,CAAC,KAAK,CAAC,CAAC;qBACvB;gBACL,CAAC,CAAC,CAAC;YACP,CAAC,EAAE,GAAG,CAAC,CAAC;SACX;QAED,OAAO,GAAG,EAAE;YACR,YAAY,CAAC,KAAK,CAAC,CAAC;YAEpB,SAAS,GAAG,IAAI,CAAC;QACrB,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,aAAa,CAAC,OAAO,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAE7D,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC;IAEhC,OAAO,IAAA,eAAO,EAAC,GAAG,EAAE;QAChB,OAAO,CACH,uCAAK,SAAS,EAAC,8DAA8D;YACzE,8BAAC,cAAI,IAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,eAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,yBAAS,CAAC,KAAK,EAAE,SAAS,EAAC,UAAU;gBAChG,wCAAM,KAAK,EAAE,EAAE,KAAK,EAAE,aAAK,CAAC,QAAQ,EAAE;oBACjC,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC;;oBAAE,wCAAM,KAAK,EAAE,EAAE,KAAK,EAAE,aAAK,CAAC,IAAI,EAAE;;wBAAI,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,OAAO,CAAC;4BAAS,CAClG,CACJ;YACN,QAAQ,CAAC,CAAC,CAAC,CACR,wCAAM,SAAS,EAAC,oBAAoB;gBAChC,8BAAC,cAAI,IAAC,IAAI,UACL,SAAS,CAAC,CAAC,CAAC,CACT,uCAAK,SAAS,EAAC,sBAAsB;oBACjC,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,OAAO,GAAI,CAC9B,CACT,CAAC,CAAC,CAAC,CACA,8BAAC,kBAAQ,IAAC,uBAAuB,EAAE,CAAC,IAAG,YAAY,CAAY,CAClE,CACE,CACJ,CACV,CAAC,CAAC,CAAC,CACA,8BAAC,kBAAQ,IAAC,IAAI,QAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,yBAAS,CAAC,KAAK,IAC7C,SAAS,CAAC,CAAC,CAAC,CACT,uCAAK,SAAS,EAAC,sBAAsB;gBACjC,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,OAAO,GAAI,CAC9B,CACT,CAAC,CAAC,CAAC,CACA,8BAAC,kBAAQ,QAAE,YAAY,CAAY,CACtC,CACM,CACd,CACC,CACT,CAAC;IACN,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC;AAClC,CAAC;AAvFD,uCAuFC","sourcesContent":["import React from 'react';\nimport Text, { TextType } from '@/components/generic/Text';\nimport { TextAlign } from '@/util/TextAlignment';\nimport { Color } from '@/util/Color';\nimport { Translation } from 'translations/Translation';\nimport Headline from '@/components/generic/Headline';\nimport Currency from '@/components/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 '@/components/generic/Icon/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(\n                    basketContext.startDate,\n                    basketContext.endDate.subtract(1, 'day'),\n                    adults,\n                    children,\n                    promoCode,\n                    hotel?.hotelID as string\n                ).then((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            }, 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>\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 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.js

@@ -26,8 +26,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
-const react_1 = require("react");
+const react_1 = __importDefault(require("react"));
+const react_2 = require("react");
 const contexts_1 = require("../../../contexts/index.js");
 const Headline_1 = __importDefault(require("../../generic/Headline"));
 const Color_1 = require("../../../util/Color");
@@ -35,15 +35,15 @@ const Translation_1 = require("translations/Translation");
 const Icon_1 = __importStar(require("../../generic/Icon/Icon"));
 const react_i18next_1 = require("react-i18next");
 function StepOneDateRange() {
-    const context = (0, react_1.useContext)(contexts_1.BasketContext);
+    const context = (0, react_2.useContext)(contexts_1.BasketContext);
     const { t } = (0, react_i18next_1.useTranslation)();
-    return (0, 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)))));
+    return (0, react_2.useMemo)(() => {
+        return (react_1.default.createElement("div", { className: "step-one-status--dates" },
+            react_1.default.createElement(Headline_1.default, null,
+                react_1.default.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_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowRight2, size: "18px" }),
+            react_1.default.createElement(Headline_1.default, null,
+                react_1.default.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;

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

@@ -1 +1 @@
-{"version":3,"file":"StepOneDateRange.js","sourceRoot":"/","sources":["src/components/steps/date/StepOneDateRange.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAE/B,iCAA4C;AAC5C,iDAAmD;AACnD,6EAAqD;AACrD,wCAAqC;AACrC,0DAAuD;AACvD,uEAAgE;AAChE,iDAA+C;AAE/C,SAAwB,gBAAgB;IACpC,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,wBAAa,CAAC,CAAC;IAE1C,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAE/B,OAAO,IAAA,eAAO,EAAC,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 '@/components/generic/Headline';\nimport { Color } from '@/util/Color';\nimport { Translation } from 'translations/Translation';\nimport Icon, { IconType } from '@/components/generic/Icon/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"]}
+{"version":3,"file":"StepOneDateRange.js","sourceRoot":"/","sources":["src/components/steps/date/StepOneDateRange.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAE1B,iCAA4C;AAC5C,iDAAmD;AACnD,6EAAqD;AACrD,wCAAqC;AACrC,0DAAuD;AACvD,uEAAgE;AAChE,iDAA+C;AAE/C,SAAwB,gBAAgB;IACpC,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,wBAAa,CAAC,CAAC;IAE1C,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAE/B,OAAO,IAAA,eAAO,EAAC,GAAG,EAAE;QAChB,OAAO,CACH,uCAAK,SAAS,EAAC,wBAAwB;YACnC,8BAAC,kBAAQ;gBACL,wDAAU,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,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,WAAW,EAAE,IAAI,EAAC,MAAM,GAAG;YAChD,8BAAC,kBAAQ;gBACL,wDAAU,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 React from 'react';\n\nimport { useContext, useMemo } from 'react';\nimport { BasketContext } from '@frontend/contexts';\nimport Headline from '@/components/generic/Headline';\nimport { Color } from '@/util/Color';\nimport { Translation } from 'translations/Translation';\nimport Icon, { IconType } from '@/components/generic/Icon/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.js

@@ -27,15 +27,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const DatePicker_1 = __importDefault(require("../../generic/date/DatePicker"));
-const React = __importStar(require("react"));
-const react_1 = require("react");
+const react_1 = __importDefault(require("react"));
+const react_2 = require("react");
 const ScreenSize_1 = __importDefault(require("../../../util/ScreenSize"));
 const contexts_1 = require("../../../contexts/index.js");
 const DataLayer_1 = __importStar(require("../../../util/DataLayer"));
 function StepOneDateRangePicker() {
-    const context = (0, react_1.useContext)(contexts_1.BasketContext);
-    const appContext = (0, react_1.useContext)(contexts_1.BookingEngineContext);
-    return (0, react_1.useMemo)(() => {
+    const context = (0, react_2.useContext)(contexts_1.BasketContext);
+    const appContext = (0, react_2.useContext)(contexts_1.BookingEngineContext);
+    return (0, react_2.useMemo)(() => {
         const onStartDateChangedHandler = (newDate) => {
             DataLayer_1.default.instance.sendInteraction('Check In Date', DataLayer_1.InteractionType.CALENDAR, DataLayer_1.InteractionStep.DATES);
             context.setStartDate(newDate);
@@ -44,7 +44,7 @@ function StepOneDateRangePicker() {
             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 }));
+        return (react_1.default.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;

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

@@ -1 +1 @@
-{"version":3,"file":"StepOneDateRangePicker.js","sourceRoot":"/","sources":["src/components/steps/date/StepOneDateRangePicker.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,sFAA8D;AAC9D,6CAA+B;AAC/B,iCAA4C;AAC5C,mEAA2C;AAC3C,iDAAyE;AACzE,8DAA+E;AAE/E,SAAwB,sBAAsB;IAC1C,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,wBAAa,CAAC,CAAC;IAC1C,MAAM,UAAU,GAAG,IAAA,kBAAU,EAAC,+BAAoB,CAAC,CAAC;IAEpD,OAAO,IAAA,eAAO,EAAC,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 '@/components/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"]}
+{"version":3,"file":"StepOneDateRangePicker.js","sourceRoot":"/","sources":["src/components/steps/date/StepOneDateRangePicker.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,sFAA8D;AAC9D,kDAA0B;AAC1B,iCAA4C;AAC5C,mEAA2C;AAC3C,iDAAyE;AACzE,8DAA+E;AAE/E,SAAwB,sBAAsB;IAC1C,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,wBAAa,CAAC,CAAC;IAC1C,MAAM,UAAU,GAAG,IAAA,kBAAU,EAAC,+BAAoB,CAAC,CAAC;IAEpD,OAAO,IAAA,eAAO,EAAC,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,8BAAC,oBAAU,IACP,sBAAsB,QACtB,kBAAkB,EAAE,UAAU,CAAC,UAAU,GAAG,oBAAU,CAAC,UAAU,EACjE,iBAAiB,EAAE,OAAO,CAAC,SAAS,EACpC,eAAe,EAAE,OAAO,CAAC,OAAO,EAChC,YAAY,QACZ,gBAAgB,QAChB,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 '@/components/generic/date/DatePicker';\nimport 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\n                showMultipleMonths={appContext.screenSize > ScreenSize.ExtraLarge}\n                selectedStartDate={context.startDate}\n                selectedEndDate={context.endDate}\n                supportsWeek\n                showMinNightStay\n                onStartDateChanged={onStartDateChangedHandler}\n                onEndDateChanged={onEndDateChangedHandler}\n            />\n        );\n    }, [context.startDate, context.endDate, appContext.screenSize]);\n}\n"]}

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

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const Color_1 = require("../../../util/Color");
 const Translation_1 = require("translations/Translation");
 const Text_1 = __importStar(require("../../generic/Text"));
@@ -35,8 +35,8 @@ const RoomstayThemeEngine_1 = require("../../../providers/RoomstayThemeEngine");
 const RoomstayThemeEngine_2 = __importDefault(require("../../../providers/RoomstayThemeEngine"));
 function StepOneDateRangePickerLegend() {
     const { t } = (0, 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" }, [
+    return (react_1.default.createElement("div", { className: "diji-calendar-legend u-marg-top u-marg-bottom" },
+        react_1.default.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),
@@ -54,9 +54,9 @@ function StepOneDateRangePickerLegend() {
                 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)));
+            return (react_1.default.createElement("li", { className: "u-marg-right align-items-center", key: index },
+                react_1.default.createElement("span", { className: "diji-calendar-legend-icon", style: { backgroundColor: row.color } }),
+                react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, inline: true }, row.text)));
         }))));
 }
 exports.default = StepOneDateRangePickerLegend;

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

@@ -1 +1 @@
-{"version":3,"file":"StepOneDateRangePickerLegend.js","sourceRoot":"/","sources":["src/components/steps/date/StepOneDateRangePickerLegend.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAC/B,wCAAqC;AACrC,0DAAuD;AACvD,kEAA2D;AAC3D,iDAA+C;AAC/C,yEAAgE;AAChE,0FAAkE;AAElE,SAAwB,4BAA4B;IAChD,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,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 '@/components/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"]}
+{"version":3,"file":"StepOneDateRangePickerLegend.js","sourceRoot":"/","sources":["src/components/steps/date/StepOneDateRangePickerLegend.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,wCAAqC;AACrC,0DAAuD;AACvD,kEAA2D;AAC3D,iDAA+C;AAC/C,yEAAgE;AAChE,0FAAkE;AAElE,SAAwB,4BAA4B;IAChD,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAE/B,OAAO,CACH,uCAAK,SAAS,EAAC,+CAA+C;QAC1D,sCAAI,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,sCAAI,SAAS,EAAC,iCAAiC,EAAC,GAAG,EAAE,KAAK;gBACtD,wCAAM,SAAS,EAAC,2BAA2B,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,GAAG,CAAC,KAAK,EAAE,GAAI;gBACrF,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,MAAM,UAC7B,GAAG,CAAC,IAAI,CACN,CACN,CACR,CAAC;QACN,CAAC,CAAC,CACD,CACH,CACT,CAAC;AACN,CAAC;AApCD,+CAoCC","sourcesContent":["import React from 'react';\nimport { Color } from '@/util/Color';\nimport { Translation } from 'translations/Translation';\nimport Text, { TextType } from '@/components/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>\n                                {row.text}\n                            </Text>\n                        </li>\n                    );\n                })}\n            </ul>\n        </div>\n    );\n}\n"]}

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

@@ -36,8 +36,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const NextStepButton_1 = __importDefault(require("../../generic/buttons/NextStepButton"));
-const React = __importStar(require("react"));
-const react_1 = require("react");
+const react_1 = __importDefault(require("react"));
+const react_2 = require("react");
 const Translation_1 = require("translations/Translation");
 const react_i18next_1 = require("react-i18next");
 const contexts_1 = require("../../../contexts/index.js");
@@ -45,8 +45,8 @@ const DataLayer_1 = __importStar(require("../../../util/DataLayer"));
 const contexts_2 = require("../../../contexts/index.js");
 function StepOneNextStepButton(props) {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const context = (0, react_1.useContext)(contexts_1.BasketContext);
-    const { currentStep } = (0, react_1.useContext)(contexts_2.FullPageEngineContext);
+    const context = (0, react_2.useContext)(contexts_1.BasketContext);
+    const { currentStep } = (0, react_2.useContext)(contexts_2.FullPageEngineContext);
     let label = '';
     if (!context.startDate) {
         label = Translation_1.Translation.Step.Date.SelectStartDate;
@@ -71,7 +71,7 @@ function StepOneNextStepButton(props) {
         }
         return true;
     });
-    return (React.createElement(NextStepButton_1.default, { text: t(label), history: props.history, disabled: !context.endDate, currentStep: currentStep, hideIcon: !context.endDate, onClick: buttonOnClickHandler }));
+    return (react_1.default.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

@@ -1 +1 @@
-{"version":3,"file":"StepOneNextStepButton.js","sourceRoot":"/","sources":["src/components/steps/date/StepOneNextStepButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iGAAyE;AACzE,6CAA+B;AAC/B,iCAAmC;AACnC,0DAAuD;AACvD,iDAA+C;AAC/C,iDAAmD;AACnD,8DAA+E;AAC/E,iDAA2D;AAE3D,SAAwB,qBAAqB,CAAC,KAAU;IACpD,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAE/B,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,wBAAa,CAAC,CAAC;IAC1C,MAAM,EAAE,WAAW,EAAE,GAAG,IAAA,kBAAU,EAAC,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,IAAI,MAAA,OAAO,CAAC,iBAAiB,0CAAE,YAAY,EAAE,EAAE;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 '@/components/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"]}
+{"version":3,"file":"StepOneNextStepButton.js","sourceRoot":"/","sources":["src/components/steps/date/StepOneNextStepButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iGAAyE;AACzE,kDAA0B;AAC1B,iCAAmC;AACnC,0DAAuD;AACvD,iDAA+C;AAC/C,iDAAmD;AACnD,8DAA+E;AAC/E,iDAA2D;AAE3D,SAAwB,qBAAqB,CAAC,KAAU;IACpD,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAE/B,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,wBAAa,CAAC,CAAC;IAC1C,MAAM,EAAE,WAAW,EAAE,GAAG,IAAA,kBAAU,EAAC,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,IAAI,MAAA,OAAO,CAAC,iBAAiB,0CAAE,YAAY,EAAE,EAAE;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,8BAAC,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 '@/components/generic/buttons/NextStepButton';\nimport 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.js

@@ -1,38 +1,15 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const contexts_1 = require("../../../contexts/index.js");
 const Text_1 = __importDefault(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,
+    const context = react_1.default.useContext(contexts_1.BasketContext);
+    return (react_1.default.createElement("div", { className: "step-one-status--people" },
+        react_1.default.createElement(Text_1.default, null,
             context.getNumberOfAdults(true),
             ",\u00A0",
             context.getNumberOfChildren(true),

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

@@ -1 +1 @@
-{"version":3,"file":"StepOneStatusPeople.js","sourceRoot":"/","sources":["src/components/steps/date/StepOneStatusPeople.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAC/B,iDAAmD;AACnD,qEAA6C;AAE7C,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 '@/components/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"]}
+{"version":3,"file":"StepOneStatusPeople.js","sourceRoot":"/","sources":["src/components/steps/date/StepOneStatusPeople.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,iDAAmD;AACnD,qEAA6C;AAE7C,SAAwB,mBAAmB;IACvC,MAAM,OAAO,GAAG,eAAK,CAAC,UAAU,CAAC,wBAAa,CAAC,CAAC;IAChD,OAAO,CACH,uCAAK,SAAS,EAAC,yBAAyB;QACpC,8BAAC,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 React from 'react';\nimport { BasketContext } from '@frontend/contexts';\nimport Text from '@/components/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.js

@@ -35,8 +35,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const react_i18next_1 = require("react-i18next");
 const Translation_1 = require("translations/Translation");
 const Color_1 = require("../../../util/Color");
@@ -54,14 +53,19 @@ const contexts_1 = require("../../../contexts/index.js");
 const Tooltip_1 = __importDefault(require("../../generic/Tooltip/Tooltip"));
 const SmallSpinner_1 = __importDefault(require("../../generic/loader/SmallSpinner"));
 const StepRoom_1 = __importDefault(require("../../../pages/steps/StepRoom/StepRoom"));
+const hooks_1 = require("../../../hooks");
+const BasketRow_1 = __importDefault(require("../../../models/BasketRow"));
+const dayjs_1 = __importDefault(require("dayjs"));
 const HotelCard = ({ hotel }) => {
     var _a, _b, _c;
     const beContext = (0, react_1.useContext)(contexts_1.BookingEngineContext);
     const ccx = (0, react_1.useContext)(contexts_1.CompanyContext);
+    const { hotel: currentHotel } = (0, hooks_1.useCurrentHotel)();
+    const basketContext = (0, contexts_1.useBasket)();
     const history = (0, react_router_dom_1.useHistory)();
     const [images, setImages] = (0, react_1.useState)([hotel.heroImage]);
     const [modalOpen, setModalOpen] = (0, react_1.useState)(false);
-    const hotelCardRef = (0, react_1.useRef)();
+    const hotelCardRef = (0, react_1.useRef)(null);
     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);
@@ -86,6 +90,15 @@ const HotelCard = ({ hotel }) => {
     const [openPerk, setOpenPerk] = (0, 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* () {
+        if ((currentHotel === null || currentHotel === void 0 ? void 0 : currentHotel.hotelID) !== hotel.hotelID) {
+            const appliedBasketRow = basketContext.selectedBasketRow || basketContext.currentBasketRows[basketContext.currentBasketRows.length - 1];
+            const row = new BasketRow_1.default();
+            row.setStartDate((appliedBasketRow === null || appliedBasketRow === void 0 ? void 0 : appliedBasketRow.getStartDate()) || (0, dayjs_1.default)().add(1, 'day'));
+            row.setEndDate((appliedBasketRow === null || appliedBasketRow === void 0 ? void 0 : appliedBasketRow.getEndDate()) || (0, dayjs_1.default)().add(2, 'day'));
+            row.setChildren((appliedBasketRow === null || appliedBasketRow === void 0 ? void 0 : appliedBasketRow.getAdults()) || 1);
+            row.setChildren((appliedBasketRow === null || appliedBasketRow === void 0 ? void 0 : appliedBasketRow.getChildren()) || 0);
+            basketContext.initBasketRows([row]);
+        }
         ccx.changeHotel(hotel);
         history.push(StepRoom_1.default.getStepUrl());
     });
@@ -98,63 +111,63 @@ const HotelCard = ({ hotel }) => {
     const isLoading = !hotel.hasLoadedDetails;
     return (0, 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) => {
+        const content = isLoading ? (react_1.default.createElement("div", null,
+            react_1.default.createElement("div", { className: "d-flex flex-column" },
+                react_1.default.createElement(Placeholder_1.default, { type: "block", blockSize: "sm", rounded: "lg", blink: true }),
+                react_1.default.createElement("div", { className: "u-pad" },
+                    react_1.default.createElement(Placeholder_1.default, { type: "text", w: "md", h: "md", blink: true }),
+                    react_1.default.createElement(Placeholder_1.default, { type: "text", w: "md", h: "md", blink: true }),
+                    react_1.default.createElement("div", { className: "u-marg-top" },
+                        react_1.default.createElement("div", { className: "u-flex justify-space-between" },
+                            react_1.default.createElement(Placeholder_1.default, { type: "block", blockSize: "xs", rounded: "lg", blink: true }),
+                            react_1.default.createElement(Placeholder_1.default, { type: "block", blockSize: "xs", rounded: "lg", blink: true }),
+                            react_1.default.createElement(Placeholder_1.default, { type: "block", blockSize: "xs", rounded: "lg", blink: true }))))))) : (react_1.default.createElement("div", { className: "large-hotel-card u-rounded h-100 justify-items-between" },
+            react_1.default.createElement("div", { className: "large-hotel-card--image" },
+                react_1.default.createElement(ImageGallerySlider_1.default, { images: images })),
+            react_1.default.createElement("div", { className: "large-hotel-card--body u-pad--heavy u-pad-bottom--none container" },
+                react_1.default.createElement(Headline_1.default, { bold: true }, hotel === null || hotel === void 0 ? void 0 : hotel.name),
+                react_1.default.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_1.default.createElement("div", { className: "u-flex u-marg-bottom" },
+                    react_1.default.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_1.default.createElement("div", { className: "u-marg-bottom--medium large-hotel-card--description" },
+                    react_1.default.createElement(Text_1.default, { className: "text", type: Text_1.TextType.Small },
+                        react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: hotel.description || '' } }))),
+                !!((_e = hotel.perks) === null || _e === void 0 ? void 0 : _e.length) && (react_1.default.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_1.default.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_1.default.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(Tooltip_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- ' +
+                        return (react_1.default.createElement("div", { className: "u-flex u-flex-align-center", key: perk.name },
+                            react_1.default.createElement(Tooltip_1.default, { title: (_a = perk.tooltip) !== null && _a !== void 0 ? _a : perk.name, overrideContainer: hotelCardRef === null || hotelCardRef === void 0 ? void 0 : hotelCardRef.current },
+                                react_1.default.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_1.default.createElement("div", { className: "u-mw-16 d-flex justify-content-center" }, perk.iconElement ? perk.iconElement : react_1.default.createElement(Icon_1.default, { icon: perk.icon })))),
+                            react_1.default.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_1.default.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 },
+                    react_1.default.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_1.default.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_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Navy, inline: true }, t(Translation_1.Translation.Misc.From)),
+                    react_1.default.createElement("div", { className: "u-flex u-flex-flex-start u-flex-align-center flex-row" },
+                        react_1.default.createElement(Headline_1.default, { bold: true, className: "u-flex" }, ((_g = hotel.lowestPrice) === null || _g === void 0 ? void 0 : _g.isLoading) ? (react_1.default.createElement(SmallSpinner_1.default, null)) : (react_1.default.createElement(Currency_1.default, { hideDecimals: true, originalCurrencyCode: hotel.defaultCurrency }, currentPrice))),
+                        react_1.default.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: {
+                    react_1.default.createElement("div", { className: "u-marg-bottom" },
+                        react_1.default.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_1.default.createElement("div", { className: "u-h-fill d-flex align-items-center" },
+                    react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Alert }, t(Translation_1.Translation.Step.Hotel.HotelCard.DatesUnavailable)))),
+                react_1.default.createElement("div", { className: "u-marg-top--light u-flex justify-content-end u-w-100@m-" },
+                    react_1.default.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_1.default.createElement(HotelCardModal_1.default, { open: modalOpen, onClose: onModalClose, hotel: hotel, container: hotelCardRef === null || hotelCardRef === void 0 ? void 0 : hotelCardRef.current })));
+        return (react_1.default.createElement("span", { ref: hotelCardRef, id: `hotel-card-${hotel.hotelID}` },
+            react_1.default.createElement("style", { dangerouslySetInnerHTML: {
                     __html: ` 
                     #hotel-card-modal-${hotel.hotelID},
                     #hotel-card-${hotel.hotelID} {