@roomstay/frontend 2.2.5 → 2.3.0-1

package/dist/src/components/steps/room/TabGroupedRooms/TabGroupedRooms.js

@@ -0,0 +1,107 @@
+"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 });
+exports.TabGroupedRooms = void 0;
+const Tab_1 = require("../../../generic/Tabs/Tab");
+const Tabs_1 = __importDefault(require("../../../generic/Tabs/Tabs"));
+const RoomRateAvailabilityListFromApi_1 = require("../../../../hooks/RoomRateAvailabilityListFromApi");
+const StepGroupedRoom_1 = __importDefault(require("../../../../pages/steps/StepGroupedRoom/StepGroupedRoom"));
+const hooks_1 = require("../../../../hooks/index.js");
+const react_1 = __importStar(require("react"));
+const TabGroupedRoomList_1 = require("./TabGroupedRoomList");
+const LargeLoader_1 = __importDefault(require("../../../generic/loader/LargeLoader"));
+const Query_1 = require("../../../../hooks/Query");
+const DataLayer_1 = __importDefault(require("../../../../util/DataLayer"));
+const NoRoomsFoundBlock_1 = __importDefault(require("../NoRoomsFoundBlock"));
+const RoomListCrossSellBlock_1 = __importDefault(require("../RoomListCrossSellBlock"));
+const StepRoomErrorForm_1 = require("../StepRoomErrorForm");
+const TabGroupedRooms = () => {
+    var _a;
+    const { hotel } = (0, hooks_1.useCurrentHotel)();
+    const { rooms, isLoading, openRoom, apiHasError } = (0, RoomRateAvailabilityListFromApi_1.useRoomRateAvailabilityListFromApi)();
+    const params = (0, Query_1.useHashQuery)();
+    const groupedRooms = (0, react_1.useMemo)(() => {
+        if (!(hotel === null || hotel === void 0 ? void 0 : hotel.roomGroups)) {
+            return [];
+        }
+        const sortingGroup = {
+            'list-all': {
+                id: 'list-all',
+                groupName: 'All Accomodations',
+                filters: {},
+                rooms: [],
+            },
+        };
+        for (const room of rooms) {
+            let groupId = !!room.roomGroupId ? room.roomGroupId : 'list-all';
+            if (!sortingGroup[groupId]) {
+                const foundGroup = hotel.roomGroups.find((group) => group.id === groupId);
+                if (foundGroup) {
+                    sortingGroup[groupId] = Object.assign(Object.assign({}, foundGroup), { rooms: [] });
+                }
+                else {
+                    // Can't find the specific room, defaulting to "unsorted" rooms
+                    groupId = 'list-all';
+                }
+            }
+            // Actual bit that puts the right room in the right location
+            sortingGroup[groupId].rooms.push(room);
+        }
+        const valuedSortedGroups = Object.values(sortingGroup);
+        if (valuedSortedGroups.length === 1 && valuedSortedGroups[0].rooms.length === 0) {
+            valuedSortedGroups.splice(0, 1);
+        }
+        DataLayer_1.default.instance.sendRoomImpressions();
+        return valuedSortedGroups;
+    }, [rooms, hotel === null || hotel === void 0 ? void 0 : hotel.roomGroups]);
+    const defaultTab = (0, react_1.useMemo)(() => {
+        var _a;
+        return (_a = params.get('defaultTab')) !== null && _a !== void 0 ? _a : undefined;
+    }, []);
+    if (isLoading) {
+        return react_1.default.createElement(LargeLoader_1.default, null);
+    }
+    if (groupedRooms.length) {
+        const onlyGroups = [...groupedRooms];
+        // Update onlyGroups to be the same as groupedRooms, but without the first element
+        onlyGroups.splice(0, 1);
+        return (react_1.default.createElement("div", { style: { maxWidth: '100%', overflow: 'hidden' } },
+            react_1.default.createElement(Tabs_1.default, { fullBleedOnLineBreak: false, activeKey: defaultTab },
+                react_1.default.createElement(Tab_1.Tab, { title: "All Accomodation", navPath: StepGroupedRoom_1.default.getStepUrl() + 'list-all', key: "list-all" }, groupedRooms === null || groupedRooms === void 0 ? void 0 : groupedRooms.filter((item) => item.rooms.length).map((group) => {
+                    return react_1.default.createElement(TabGroupedRoomList_1.TabGroupedRoomList, { group: group, rooms: group.rooms, key: group.id });
+                })),
+                onlyGroups.map((group) => (react_1.default.createElement(Tab_1.Tab, { title: group.groupName, navPath: StepGroupedRoom_1.default.getStepUrl() + group.groupName, key: group.id },
+                    react_1.default.createElement(TabGroupedRoomList_1.TabGroupedRoomList, { group: group, rooms: group.rooms })))))));
+    }
+    // No rooms found, so let's display the crossell block, or no rooms found
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        apiHasError ? react_1.default.createElement(StepRoomErrorForm_1.StepRoomErrorForm, null) : react_1.default.createElement(NoRoomsFoundBlock_1.default, null), (_a = hotel === null || hotel === void 0 ? void 0 : hotel.crossSellHotelIds) === null || _a === void 0 ? void 0 :
+        _a.map((hotelId) => (react_1.default.createElement(RoomListCrossSellBlock_1.default, { key: hotelId, hotelId: hotelId })))));
+};
+exports.TabGroupedRooms = TabGroupedRooms;
+//# sourceMappingURL=TabGroupedRooms.js.map

package/dist/src/components/steps/room/TabGroupedRooms/TabGroupedRooms.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabGroupedRooms.js","sourceRoot":"/","sources":["src/components/steps/room/TabGroupedRooms/TabGroupedRooms.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Tab } from '@/components/generic/Tabs/Tab';\nimport Tabs from '@/components/generic/Tabs/Tabs';\nimport { useRoomRateAvailabilityListFromApi } from '@/hooks/RoomRateAvailabilityListFromApi';\nimport StepGroupedRoom from '@/pages/steps/StepGroupedRoom/StepGroupedRoom';\nimport { useCurrentHotel } from '@frontend/hooks';\nimport React, { useMemo } from 'react';\nimport { TabGroupedRoomList } from '@/components/steps/room/TabGroupedRooms/TabGroupedRoomList';\nimport { HotelRoomGroupsDTO } from '@/models/Api/HotelDTO';\nimport { Room } from '@/models/Room/Room';\nimport LargeLoader from '@/components/generic/loader/LargeLoader';\nimport { useHashQuery } from '@/hooks/Query';\nimport DataLayer from '@/util/DataLayer';\nimport NoRoomsFoundBlock from '@/components/steps/room/NoRoomsFoundBlock';\nimport RoomListCrossSellBlock from '@/components/steps/room/RoomListCrossSellBlock';\nimport { StepRoomErrorForm } from '@/components/steps/room/StepRoomErrorForm';\n\nexport const TabGroupedRooms = () => {\n    const { hotel } = useCurrentHotel();\n\n    const { rooms, isLoading, openRoom, apiHasError } = useRoomRateAvailabilityListFromApi();\n    const params = useHashQuery();\n\n    const groupedRooms: (HotelRoomGroupsDTO[number] & { rooms: Room[] })[] = useMemo(() => {\n        if (!hotel?.roomGroups) {\n            return [];\n        }\n\n        const sortingGroup: { [id: string]: HotelRoomGroupsDTO[number] & { rooms: Room[] } } = {\n            'list-all': {\n                id: 'list-all',\n                groupName: 'All Accomodations',\n                filters: {},\n                rooms: [],\n            },\n        };\n\n        for (const room of rooms) {\n            let groupId = !!room.roomGroupId ? room.roomGroupId : 'list-all';\n\n            if (!sortingGroup[groupId]) {\n                const foundGroup = hotel.roomGroups.find((group) => group.id === groupId);\n\n                if (foundGroup) {\n                    sortingGroup[groupId] = {\n                        ...foundGroup,\n                        rooms: [],\n                    };\n                } else {\n                    // Can't find the specific room, defaulting to \"unsorted\" rooms\n                    groupId = 'list-all';\n                }\n            }\n\n            // Actual bit that puts the right room in the right location\n            sortingGroup[groupId].rooms.push(room);\n        }\n\n        const valuedSortedGroups = Object.values(sortingGroup);\n\n        if (valuedSortedGroups.length === 1 && valuedSortedGroups[0].rooms.length === 0) {\n            valuedSortedGroups.splice(0, 1);\n        }\n\n        DataLayer.instance.sendRoomImpressions();\n\n        return valuedSortedGroups;\n    }, [rooms, hotel?.roomGroups]);\n\n    const defaultTab = useMemo(() => {\n        return params.get('defaultTab') ?? undefined;\n    }, []);\n\n    if (isLoading) {\n        return <LargeLoader />;\n    }\n\n    if (groupedRooms.length) {\n        const onlyGroups = [...groupedRooms];\n        // Update onlyGroups to be the same as groupedRooms, but without the first element\n        onlyGroups.splice(0, 1);\n\n        return (\n            <div style={{ maxWidth: '100%', overflow: 'hidden' }}>\n                <Tabs fullBleedOnLineBreak={false} activeKey={defaultTab}>\n                    <Tab title=\"All Accomodation\" navPath={StepGroupedRoom.getStepUrl() + 'list-all'} key=\"list-all\">\n                        {/* We're not starting at 1 here as we want to display these rooms, even if they're not ordered */}\n                        {groupedRooms\n                            ?.filter((item) => item.rooms.length)\n                            .map((group) => {\n                                return <TabGroupedRoomList group={group} rooms={group.rooms} key={group.id} />;\n                            })}\n                    </Tab>\n                    {/* Reason we've got to splice here is 0 index will always be unsorted rooms */}\n                    {onlyGroups.map((group) => (\n                        <Tab title={group.groupName} navPath={StepGroupedRoom.getStepUrl() + group.groupName} key={group.id}>\n                            <TabGroupedRoomList group={group} rooms={group.rooms} />\n                        </Tab>\n                    ))}\n                </Tabs>\n            </div>\n        );\n    }\n\n    // No rooms found, so let's display the crossell block, or no rooms found\n    return (\n        <>\n            {apiHasError ? <StepRoomErrorForm /> : <NoRoomsFoundBlock />}\n            {hotel?.crossSellHotelIds?.map((hotelId) => (\n                <RoomListCrossSellBlock key={hotelId} hotelId={hotelId} />\n            ))}\n        </>\n    );\n};\n"]}

package/dist/src/components/steps/room/TripteaseLodgingSearchSchema.d.ts

@@ -0,0 +1 @@
+export declare const TripteaseLodgingSearchSchema: () => JSX.Element;

package/dist/src/components/steps/room/TripteaseLodgingSearchSchema.js

@@ -0,0 +1,43 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TripteaseLodgingSearchSchema = void 0;
+const react_1 = __importStar(require("react"));
+const contexts_1 = require("../../../contexts/index.js");
+const TripteaseLodgingSearchSchema = () => {
+    const { selectedBasketRow } = (0, react_1.useContext)(contexts_1.BasketContext);
+    return (react_1.default.createElement("script", { type: "application/ld+json" }, JSON.stringify({
+        '@context': 'https://structured-data.triptease.io',
+        '@type': 'LodgingSearch',
+        checkinTime: selectedBasketRow === null || selectedBasketRow === void 0 ? void 0 : selectedBasketRow.getStartDate().format('YYYY-M-D'),
+        checkoutTime: selectedBasketRow === null || selectedBasketRow === void 0 ? void 0 : selectedBasketRow.getEndDate().format('YYYY-M-D'),
+        numAdults: selectedBasketRow === null || selectedBasketRow === void 0 ? void 0 : selectedBasketRow.getAdults(),
+        numChildren: selectedBasketRow === null || selectedBasketRow === void 0 ? void 0 : selectedBasketRow.getChildren(),
+        numRooms: '1',
+        offerCode: selectedBasketRow === null || selectedBasketRow === void 0 ? void 0 : selectedBasketRow.getPromoCode(),
+    })));
+};
+exports.TripteaseLodgingSearchSchema = TripteaseLodgingSearchSchema;
+//# sourceMappingURL=TripteaseLodgingSearchSchema.js.map

package/dist/src/components/steps/room/TripteaseLodgingSearchSchema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TripteaseLodgingSearchSchema.js","sourceRoot":"/","sources":["src/components/steps/room/TripteaseLodgingSearchSchema.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,iDAAmD;AAE5C,MAAM,4BAA4B,GAAG,GAAG,EAAE;IAC7C,MAAM,EAAE,iBAAiB,EAAE,GAAG,IAAA,kBAAU,EAAC,wBAAa,CAAC,CAAC;IAExD,OAAO,CACH,0CAAQ,IAAI,EAAC,qBAAqB,IAC7B,IAAI,CAAC,SAAS,CAAC;QACZ,UAAU,EAAE,sCAAsC;QAClD,OAAO,EAAE,eAAe;QACxB,WAAW,EAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,YAAY,GAAG,MAAM,CAAC,UAAU,CAAC;QACjE,YAAY,EAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;QAChE,SAAS,EAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,SAAS,EAAE;QACzC,WAAW,EAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,WAAW,EAAE;QAC7C,QAAQ,EAAE,GAAG;QACb,SAAS,EAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,YAAY,EAAE;KAC/C,CAAC,CACG,CACZ,CAAC;AACN,CAAC,CAAC;AAjBW,QAAA,4BAA4B,gCAiBvC","sourcesContent":["import React, { useContext } from 'react';\nimport { BasketContext } from '@frontend/contexts';\n\nexport const TripteaseLodgingSearchSchema = () => {\n    const { selectedBasketRow } = useContext(BasketContext);\n\n    return (\n        <script type=\"application/ld+json\">\n            {JSON.stringify({\n                '@context': 'https://structured-data.triptease.io',\n                '@type': 'LodgingSearch',\n                checkinTime: selectedBasketRow?.getStartDate().format('YYYY-M-D'),\n                checkoutTime: selectedBasketRow?.getEndDate().format('YYYY-M-D'),\n                numAdults: selectedBasketRow?.getAdults(),\n                numChildren: selectedBasketRow?.getChildren(),\n                numRooms: '1',\n                offerCode: selectedBasketRow?.getPromoCode(),\n            })}\n        </script>\n    );\n};\n"]}

package/dist/src/components/steps/room/UserSearchSummary/UserSearchSummary.d.ts

@@ -0,0 +1 @@
+export declare const UserSearchSummary: () => JSX.Element;

package/dist/src/components/steps/room/UserSearchSummary/UserSearchSummary.js

@@ -0,0 +1,56 @@
+"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 });
+exports.UserSearchSummary = void 0;
+const react_1 = __importStar(require("react"));
+const TripteaseLodgingSearchSchema_1 = require("../TripteaseLodgingSearchSchema");
+const contexts_1 = require("../../../../contexts/index.js");
+const UserSearchSummaryRow_1 = require("./UserSearchSummaryRow");
+const react_i18next_1 = require("react-i18next");
+const BasketRow_1 = __importDefault(require("../../../../models/BasketRow"));
+const DataLayer_1 = __importStar(require("../../../../util/DataLayer"));
+const Translation_1 = require("../../../../translations/Translation");
+const Icon_1 = require("../../../generic/Icon/Icon");
+const BEButton_1 = __importDefault(require("../../../generic/BEButton"));
+const UserSearchSummary = () => {
+    const { currentBasketRows, addBasketRow } = (0, react_1.useContext)(contexts_1.BasketContext);
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const addRoomRowOnClick = () => {
+        DataLayer_1.default.instance.sendInteraction('Add Room Row', DataLayer_1.InteractionType.BUTTON, DataLayer_1.InteractionStep.ROOMS);
+        addBasketRow(new BasketRow_1.default());
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        currentBasketRows.map((row, index) => {
+            return react_1.default.createElement(UserSearchSummaryRow_1.UserSearchSummaryRow, { row: row, index: index, key: row.getID() });
+        }),
+        react_1.default.createElement("div", { className: "u-flex justify-content-end" },
+            react_1.default.createElement(BEButton_1.default, { icon: Icon_1.IconType.Add, onClick: addRoomRowOnClick, stopIconAnimation: true }, t(Translation_1.Translation.Step.Room.RoomInfo.AddRoom))),
+        react_1.default.createElement(TripteaseLodgingSearchSchema_1.TripteaseLodgingSearchSchema, null)));
+};
+exports.UserSearchSummary = UserSearchSummary;
+//# sourceMappingURL=UserSearchSummary.js.map

package/dist/src/components/steps/room/UserSearchSummary/UserSearchSummary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserSearchSummary.js","sourceRoot":"/","sources":["src/components/steps/room/UserSearchSummary/UserSearchSummary.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,kFAA+E;AAC/E,iDAAmD;AACnD,iEAA8D;AAC9D,iDAA+C;AAC/C,mEAA2C;AAC3C,8DAA+E;AAC/E,4DAAyD;AACzD,yDAA0D;AAC1D,6EAAqD;AAE9C,MAAM,iBAAiB,GAAG,GAAG,EAAE;IAClC,MAAM,EAAE,iBAAiB,EAAE,YAAY,EAAE,GAAG,IAAA,kBAAU,EAAC,wBAAa,CAAC,CAAC;IAEtE,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAC/B,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC3B,mBAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,cAAc,EAAE,2BAAe,CAAC,MAAM,EAAE,2BAAe,CAAC,KAAK,CAAC,CAAC;QAClG,YAAY,CAAC,IAAI,mBAAS,EAAE,CAAC,CAAC;IAClC,CAAC,CAAC;IAEF,OAAO,CACH;QACK,iBAAiB,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;YAClC,OAAO,8BAAC,2CAAoB,IAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,CAAC,KAAK,EAAE,GAAI,CAAC;QAC9E,CAAC,CAAC;QACF,uCAAK,SAAS,EAAC,4BAA4B;YACvC,8BAAC,kBAAQ,IAAC,IAAI,EAAE,eAAQ,CAAC,GAAG,EAAE,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,UACtE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CACnC,CACT;QACN,8BAAC,2DAA4B,OAAG,CACjC,CACN,CAAC;AACN,CAAC,CAAC;AAtBW,QAAA,iBAAiB,qBAsB5B","sourcesContent":["import React, { useContext } from 'react';\nimport { TripteaseLodgingSearchSchema } from '../TripteaseLodgingSearchSchema';\nimport { BasketContext } from '@frontend/contexts';\nimport { UserSearchSummaryRow } from './UserSearchSummaryRow';\nimport { useTranslation } from 'react-i18next';\nimport BasketRow from '@/models/BasketRow';\nimport DataLayer, { InteractionStep, InteractionType } from '@/util/DataLayer';\nimport { Translation } from '@/translations/Translation';\nimport { IconType } from '@/components/generic/Icon/Icon';\nimport BEButton from '@/components/generic/BEButton';\n\nexport const UserSearchSummary = () => {\n    const { currentBasketRows, addBasketRow } = useContext(BasketContext);\n\n    const { t } = useTranslation();\n    const addRoomRowOnClick = () => {\n        DataLayer.instance.sendInteraction('Add Room Row', InteractionType.BUTTON, InteractionStep.ROOMS);\n        addBasketRow(new BasketRow());\n    };\n\n    return (\n        <>\n            {currentBasketRows.map((row, index) => {\n                return <UserSearchSummaryRow row={row} index={index} key={row.getID()} />;\n            })}\n            <div className=\"u-flex justify-content-end\">\n                <BEButton icon={IconType.Add} onClick={addRoomRowOnClick} stopIconAnimation>\n                    {t(Translation.Step.Room.RoomInfo.AddRoom)}\n                </BEButton>\n            </div>\n            <TripteaseLodgingSearchSchema />\n        </>\n    );\n};\n"]}

package/dist/src/components/steps/room/UserSearchSummary/UserSearchSummaryPromocodeInput.d.ts

@@ -0,0 +1,8 @@
+import BasketRow from '../../../../models/BasketRow';
+type UserSearchSummaryPromocodeInputProps = {
+    row: BasketRow;
+    onChange: (code: string) => void;
+    disabled?: boolean;
+};
+export declare const UserSearchSummaryPromocdeInput: ({ row, disabled, onChange }: UserSearchSummaryPromocodeInputProps) => JSX.Element;
+export {};

package/dist/src/components/steps/room/UserSearchSummary/UserSearchSummaryPromocodeInput.js

@@ -0,0 +1,90 @@
+"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 });
+exports.UserSearchSummaryPromocdeInput = void 0;
+const BEButton_1 = __importDefault(require("../../../generic/BEButton"));
+const Icon_1 = __importStar(require("../../../generic/Icon/Icon"));
+const Overlay_1 = require("../../../generic/Overlay/Overlay");
+const PromoCodeInput_1 = __importDefault(require("../../../generic/PromoCodeInput"));
+const Text_1 = __importStar(require("../../../generic/Text"));
+const Tooltip_1 = __importDefault(require("../../../generic/Tooltip/Tooltip"));
+const Translation_1 = require("../../../../translations/Translation");
+const Color_1 = require("../../../../util/Color");
+const DataLayer_1 = __importStar(require("../../../../util/DataLayer"));
+const react_1 = __importStar(require("react"));
+const react_i18next_1 = require("react-i18next");
+const UserSearchSummaryPromocdeInput = ({ row, disabled = false, onChange }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const [isPromoModalOpen, setIsPromoModalOpen] = (0, react_1.useState)(false);
+    let promoCodeTooltip = '';
+    if (row.getPromoCodeStatus() === 'new') {
+        promoCodeTooltip = row.getPromoCode() ? t(Translation_1.Translation.Step.Date.PromoCodeTooltip.Checking) : t(Translation_1.Translation.Step.Date.PromoCodeTooltip.NoValue);
+    }
+    else {
+        if (row.getPromoCodeStatus() === 'valid') {
+            promoCodeTooltip = t(Translation_1.Translation.Step.Date.PromoCodeTooltip.Valid);
+        }
+        else {
+            promoCodeTooltip = t(Translation_1.Translation.Step.Date.PromoCodeTooltip.Invalid);
+        }
+    }
+    const thisElement = (0, react_1.useRef)(null);
+    const openPromoModalOnClick = () => {
+        if (disabled) {
+            return;
+        }
+        setIsPromoModalOpen(true);
+    };
+    const setPromoCodeOnClose = () => {
+        setIsPromoModalOpen(false);
+    };
+    const cancelPromoPopupOnClick = () => {
+        DataLayer_1.default.instance.sendInteraction('Cancel Promo Popup', DataLayer_1.InteractionType.BUTTON, DataLayer_1.InteractionStep.ROOMS);
+        setIsPromoModalOpen(false);
+    };
+    const _onChangePromoCode = (code) => {
+        onChange(code);
+        if (code) {
+            setIsPromoModalOpen(false);
+        }
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Tooltip_1.default, { title: promoCodeTooltip, wrapperClasses: "u-w-100@xl- d-flex", disabled: disabled },
+            react_1.default.createElement("div", { className: "room-builder-progress--value u-cursor-pointer", ref: thisElement, onClick: openPromoModalOnClick },
+                react_1.default.createElement("div", { className: "u-flex align-items-center justify-content-center u-w-100@xl-" },
+                    react_1.default.createElement(Text_1.default, { className: "u-pad-right--light", type: Text_1.TextType.Body, color: row.getPromoCode() ? row.getPromoCodeColour() : Color_1.Color.Navy }, row.getPromoCode() ? row.getPromoCode() : t(Translation_1.Translation.Step.Date.PromoCode)),
+                    react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Dropdown, color: Color_1.Color.DarkGrey })))),
+        react_1.default.createElement(Overlay_1.Overlay, { open: isPromoModalOpen, followElement: thisElement.current, onClose: setPromoCodeOnClose },
+            react_1.default.createElement("div", { className: "u-pad--heavy" },
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement(PromoCodeInput_1.default, { value: row === null || row === void 0 ? void 0 : row.getPromoCode(), onChange: _onChangePromoCode, valid: (row === null || row === void 0 ? void 0 : row.getPromoCodeStatus()) !== 'new' ? (row === null || row === void 0 ? void 0 : row.getPromoCodeStatus()) === 'valid' : undefined })),
+                react_1.default.createElement("div", { className: "u-flex justify-content-end align-items-center u-marg-top" },
+                    react_1.default.createElement(BEButton_1.default, { isText: true, size: "small", onClick: cancelPromoPopupOnClick }, t(Translation_1.Translation.Misc.Cancel)))))));
+};
+exports.UserSearchSummaryPromocdeInput = UserSearchSummaryPromocdeInput;
+//# sourceMappingURL=UserSearchSummaryPromocodeInput.js.map

package/dist/src/components/steps/room/UserSearchSummary/UserSearchSummaryPromocodeInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserSearchSummaryPromocodeInput.js","sourceRoot":"/","sources":["src/components/steps/room/UserSearchSummary/UserSearchSummaryPromocodeInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import BEButton from '@/components/generic/BEButton';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport { Overlay } from '@/components/generic/Overlay/Overlay';\nimport PromoCodeInput from '@/components/generic/PromoCodeInput';\nimport Text, { TextType } from '@/components/generic/Text';\nimport Tooltip from '@/components/generic/Tooltip/Tooltip';\nimport BasketRow from '@/models/BasketRow';\nimport { Translation } from '@/translations/Translation';\nimport { Color } from '@/util/Color';\nimport DataLayer, { InteractionStep, InteractionType } from '@/util/DataLayer';\nimport React, { useRef, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\n\ntype UserSearchSummaryPromocodeInputProps = {\n    row: BasketRow;\n    onChange: (code: string) => void;\n\n    disabled?: boolean;\n};\n\nexport const UserSearchSummaryPromocdeInput = ({ row, disabled = false, onChange }: UserSearchSummaryPromocodeInputProps) => {\n    const { t } = useTranslation();\n    const [isPromoModalOpen, setIsPromoModalOpen] = useState(false);\n\n    let promoCodeTooltip = '';\n\n    if (row.getPromoCodeStatus() === 'new') {\n        promoCodeTooltip = row.getPromoCode() ? t(Translation.Step.Date.PromoCodeTooltip.Checking) : t(Translation.Step.Date.PromoCodeTooltip.NoValue);\n    } else {\n        if (row.getPromoCodeStatus() === 'valid') {\n            promoCodeTooltip = t(Translation.Step.Date.PromoCodeTooltip.Valid);\n        } else {\n            promoCodeTooltip = t(Translation.Step.Date.PromoCodeTooltip.Invalid);\n        }\n    }\n\n    const thisElement = useRef<HTMLDivElement | null>(null);\n\n    const openPromoModalOnClick = () => {\n        if (disabled) {\n            return;\n        }\n\n        setIsPromoModalOpen(true);\n    };\n    const setPromoCodeOnClose = () => {\n        setIsPromoModalOpen(false);\n    };\n\n    const cancelPromoPopupOnClick = () => {\n        DataLayer.instance.sendInteraction('Cancel Promo Popup', InteractionType.BUTTON, InteractionStep.ROOMS);\n        setIsPromoModalOpen(false);\n    };\n\n    const _onChangePromoCode = (code: string) => {\n        onChange(code);\n        if (code) {\n            setIsPromoModalOpen(false);\n        }\n    };\n\n    return (\n        <>\n            <Tooltip title={promoCodeTooltip} wrapperClasses=\"u-w-100@xl- d-flex\" disabled={disabled}>\n                <div className=\"room-builder-progress--value u-cursor-pointer\" ref={thisElement} onClick={openPromoModalOnClick}>\n                    <div className=\"u-flex align-items-center justify-content-center u-w-100@xl-\">\n                        <Text className=\"u-pad-right--light\" type={TextType.Body} color={row.getPromoCode() ? row.getPromoCodeColour() : Color.Navy}>\n                            {row.getPromoCode() ? row.getPromoCode() : t(Translation.Step.Date.PromoCode)}\n                        </Text>\n                        <Icon icon={IconType.Dropdown} color={Color.DarkGrey} />\n                    </div>\n                </div>\n            </Tooltip>\n            <Overlay open={isPromoModalOpen} followElement={thisElement.current} onClose={setPromoCodeOnClose}>\n                <div className=\"u-pad--heavy\">\n                    <div>\n                        <PromoCodeInput\n                            value={row?.getPromoCode()}\n                            onChange={_onChangePromoCode}\n                            valid={row?.getPromoCodeStatus() !== 'new' ? row?.getPromoCodeStatus() === 'valid' : undefined}\n                        />\n                    </div>\n\n                    <div className=\"u-flex justify-content-end align-items-center u-marg-top\">\n                        <BEButton isText size=\"small\" onClick={cancelPromoPopupOnClick}>\n                            {t(Translation.Misc.Cancel)}\n                        </BEButton>\n                    </div>\n                </div>\n            </Overlay>\n        </>\n    );\n};\n"]}

package/dist/src/components/steps/room/UserSearchSummary/UserSearchSummaryRow.d.ts

@@ -0,0 +1,7 @@
+import BasketRow from '../../../../models/BasketRow';
+type UserSearchSummaryRowProps = {
+    row: BasketRow;
+    index: number;
+};
+export declare const UserSearchSummaryRow: ({ row, index }: UserSearchSummaryRowProps) => JSX.Element;
+export {};

package/dist/src/components/steps/room/UserSearchSummary/UserSearchSummaryRow.js

@@ -0,0 +1,172 @@
+"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 });
+exports.UserSearchSummaryRow = void 0;
+const react_1 = __importStar(require("react"));
+const UserSearchSummaryRow_module_scss_1 = __importDefault(require("./UserSearchSummaryRow.module.scss"));
+const Icon_1 = __importStar(require("../../../generic/Icon/Icon"));
+const classnames_1 = __importDefault(require("classnames"));
+const contexts_1 = require("../../../../contexts/index.js");
+const Text_1 = __importStar(require("../../../generic/Text"));
+const Tooltip_1 = __importDefault(require("../../../generic/Tooltip/Tooltip"));
+const FloatingDatePicker_1 = __importDefault(require("../../../generic/date/FloatingDatePicker"));
+const Color_1 = require("../../../../util/Color");
+const Translation_1 = require("../../../../translations/Translation");
+const react_i18next_1 = require("react-i18next");
+const NumberOfAdultsPicker_1 = __importDefault(require("../roomBuilderProgress/NumberOfAdultsPicker"));
+const DataLayer_1 = __importStar(require("../../../../util/DataLayer"));
+const NumberOfChildrenPicker_1 = __importDefault(require("../roomBuilderProgress/NumberOfChildrenPicker"));
+const UserSearchSummaryPromocodeInput_1 = require("./UserSearchSummaryPromocodeInput");
+const BEButton_1 = __importDefault(require("../../../generic/BEButton"));
+const ScreenSize_1 = __importDefault(require("../../../../util/ScreenSize"));
+const StringHelper_1 = __importDefault(require("../../../../util/StringHelper"));
+const Pill_1 = __importStar(require("../../../generic/Pill"));
+const hooks_1 = require("../../../../hooks/index.js");
+const UserSearchSummaryRow = ({ row, index }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const removeButtonRef = (0, react_1.useRef)();
+    const { hotel } = (0, hooks_1.useCurrentHotel)();
+    const { selectedBasketRow, currentBasketRows, updateBasketRow, removeBasketRow, selectBasketRow } = (0, react_1.useContext)(contexts_1.BasketContext);
+    const engineContext = (0, react_1.useContext)(contexts_1.BookingEngineContext);
+    const isSelectedRow = (0, react_1.useMemo)(() => {
+        return (selectedBasketRow === null || selectedBasketRow === void 0 ? void 0 : selectedBasketRow.getID()) === (row === null || row === void 0 ? void 0 : row.getID());
+    }, [selectedBasketRow]);
+    const canRemove = currentBasketRows.length > 1;
+    const removeRoomOnClick = () => {
+        DataLayer_1.default.instance.sendInteraction('Remove Room', DataLayer_1.InteractionType.BUTTON, DataLayer_1.InteractionStep.ROOMS);
+        removeBasketRow(row);
+    };
+    const removeButton = (react_1.default.createElement(Tooltip_1.default, { title: canRemove ? 'Remove this room' : 'Cannot remove this room as at least one must be selected.', followElement: removeButtonRef === null || removeButtonRef === void 0 ? void 0 : removeButtonRef.current, wrapperClasses: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__remove-tooltip'] },
+        react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__remove'], onClick: removeRoomOnClick, ref: removeButtonRef },
+            react_1.default.createElement(BEButton_1.default, { isText: true, icon: Icon_1.IconType.Close, iconPosition: "right", stopIconAnimation: true, disabled: !canRemove, onClick: removeRoomOnClick }))));
+    const updatePeopleValues = ({ adults, children, updatedPromoCode }) => {
+        if (adults && adults !== row.getAdults()) {
+            DataLayer_1.default.instance.sendInteraction('Guests', DataLayer_1.InteractionType.NUMBER_INPUT, DataLayer_1.InteractionStep.ROOMS);
+            row.setAdults(adults);
+        }
+        if ((children || children === 0) && children !== row.getChildren()) {
+            DataLayer_1.default.instance.sendInteraction('Guests', DataLayer_1.InteractionType.NUMBER_INPUT, DataLayer_1.InteractionStep.ROOMS);
+            row.setChildren(children);
+        }
+        if ((updatedPromoCode || updatedPromoCode === '') && updatedPromoCode !== row.getPromoCode()) {
+            DataLayer_1.default.instance.sendInteraction('Promo Code', DataLayer_1.InteractionType.FORM_FIELD, DataLayer_1.InteractionStep.ROOMS);
+            row.setPromoCode(updatedPromoCode);
+        }
+        updateBasketRow(row);
+    };
+    const updatePromoCode = (code) => {
+        DataLayer_1.default.instance.sendInteraction('Promo Code', DataLayer_1.InteractionType.FORM_FIELD, DataLayer_1.InteractionStep.ROOMS);
+        if (selectedBasketRow) {
+            selectedBasketRow.setPromoCode(code);
+            updateBasketRow(selectedBasketRow);
+        }
+    };
+    const updateDateValues = (startDate, endDate) => {
+        if (startDate) {
+            row.setStartDate(startDate);
+        }
+        if (endDate) {
+            row.setEndDate(endDate);
+        }
+        updateBasketRow(row);
+    };
+    const updateNumberOfAdultsOnChange = (value) => {
+        updatePeopleValues({ adults: +value });
+    };
+    const updateNumberOfChildrenOnChange = (value) => {
+        updatePeopleValues({ children: +value });
+    };
+    const changePromoCode = (val) => {
+        updatePromoCode(val);
+    };
+    const onClickCancelRoomChanges = () => {
+        DataLayer_1.default.instance.sendInteraction('Cancel Room Changes', DataLayer_1.InteractionType.LINK, DataLayer_1.InteractionStep.ROOMS);
+        selectBasketRow(null);
+    };
+    const onClickEditRoom = () => {
+        DataLayer_1.default.instance.sendInteraction('Edit Room', DataLayer_1.InteractionType.LINK, DataLayer_1.InteractionStep.ROOMS);
+        selectBasketRow(row);
+    };
+    const isValid = row.isValid();
+    const isLargerThanLarge = engineContext.screenSize > ScreenSize_1.default.ExtraLarge;
+    if (isValid && !isSelectedRow) {
+        return (react_1.default.createElement("div", { className: `${UserSearchSummaryRow_module_scss_1.default['user-completed-summary-row']} u-flex w-100` },
+            react_1.default.createElement("div", { className: "u-flex justify-content-start" },
+                react_1.default.createElement("div", { className: "u-flex flex-column" },
+                    react_1.default.createElement("span", null,
+                        react_1.default.createElement(Text_1.default, { inline: isLargerThanLarge },
+                            react_1.default.createElement("strong", null, row.getRoom().name)),
+                        react_1.default.createElement(Text_1.default, { inline: isLargerThanLarge, type: isLargerThanLarge ? Text_1.TextType.Body : Text_1.TextType.Small },
+                            react_1.default.createElement("span", { className: "u-marg-left--light@xl" },
+                                StringHelper_1.default.pluralWithDictAndCount(row.getAdults(), Translation_1.Translation.Step.Date.Adult, t),
+                                ",\u00A0",
+                                StringHelper_1.default.pluralWithDictAndCount(row.getChildren(), Translation_1.Translation.Step.Date.Child, t)))),
+                    react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Caption, color: Color_1.Color.DarkGrey },
+                        react_1.default.createElement("strong", null, row.getStayDateRange('ddd, MMM D, YYYY', ' -')))),
+                row.isPromoCodeValid() && (react_1.default.createElement("div", { className: "u-marg-left d-flex align-items-center" },
+                    react_1.default.createElement(Pill_1.default, { type: Pill_1.PillType.Success, icon: Icon_1.IconType.Money }, row.getPromoCode())))),
+            react_1.default.createElement("div", { className: "u-flex align-items-center" },
+                react_1.default.createElement("div", { className: "u-flex align-items-center room-builder-progress--edit" },
+                    react_1.default.createElement(Tooltip_1.default, { title: t(Translation_1.Translation.Step.Room.EditThisRoom) },
+                        react_1.default.createElement("div", { className: "u-flex align-items-center" },
+                            react_1.default.createElement(BEButton_1.default, { isText: true, size: "tiny", onClick: onClickEditRoom }, t(Translation_1.Translation.Misc.Edit).toUpperCase())))),
+                removeButton)));
+    }
+    // Commented out for now - need to figure out if all text should go the same colour
+    // const shouldTextBeWhite = hotel?.colors && lightOrDark(hotel?.colors.accent) === 'dark' && isValid;
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(UserSearchSummaryRow_module_scss_1.default['user-search-summary-row'], {
+            [UserSearchSummaryRow_module_scss_1.default['--selected']]: isSelectedRow,
+            [UserSearchSummaryRow_module_scss_1.default['--valid']]: isValid,
+        }) },
+        react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row--inner'] },
+            react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__group'] },
+                react_1.default.createElement(Text_1.default, { inline: true, bold: true, className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__group-label'] }, "Dates:"),
+                react_1.default.createElement(FloatingDatePicker_1.default, { startDate: row.getStartDate(), endDate: row.getEndDate(), selectedDateChanged: updateDateValues, isAboveNav: true, className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__input'] },
+                    react_1.default.createElement(Tooltip_1.default, { disabled: !isSelectedRow, title: t(Translation_1.Translation.Step.Date.SelectArrivalAndDepartureDatesByClickingHere) },
+                        react_1.default.createElement("div", { className: "u-flex align-items-center justify-content-center u-w-100@xl- u-cursor-pointer" },
+                            react_1.default.createElement(Text_1.default, { color: Color_1.Color.Accent, bold: true, className: "u-nowrap" }, row.getArrivalDate()),
+                            react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowRight2 }),
+                            react_1.default.createElement(Text_1.default, { color: Color_1.Color.Accent, bold: true, className: "u-nowrap" }, row.getDepartureDate()))))),
+            react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__divider'] }),
+            react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__group'] },
+                react_1.default.createElement(Text_1.default, { inline: true, bold: true, className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__group-label'] }, "Who:"),
+                react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__input'] },
+                    react_1.default.createElement(NumberOfAdultsPicker_1.default, { row: row, onChange: updateNumberOfAdultsOnChange })),
+                react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__input'] },
+                    react_1.default.createElement(NumberOfChildrenPicker_1.default, { row: row, onChange: updateNumberOfChildrenOnChange }))),
+            react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__divider'] }),
+            react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__group'] },
+                react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__input'] },
+                    react_1.default.createElement(UserSearchSummaryPromocodeInput_1.UserSearchSummaryPromocdeInput, { row: row, onChange: changePromoCode, disabled: !isSelectedRow })))),
+        react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row--buttons'] },
+            isSelectedRow && isValid && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(BEButton_1.default, { isText: true, size: "tiny", onClick: onClickCancelRoomChanges }, t(Translation_1.Translation.Misc.Cancel)))),
+            removeButton)));
+};
+exports.UserSearchSummaryRow = UserSearchSummaryRow;
+//# sourceMappingURL=UserSearchSummaryRow.js.map

package/dist/src/components/steps/room/UserSearchSummary/UserSearchSummaryRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserSearchSummaryRow.js","sourceRoot":"/","sources":["src/components/steps/room/UserSearchSummary/UserSearchSummaryRow.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext, useMemo, useRef } from 'react';\nimport BasketRow from '@/models/BasketRow';\n\nimport styles from './UserSearchSummaryRow.module.scss';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\n\nimport { default as cx } from 'classnames';\nimport { BasketContext, BookingEngineContext } from '@frontend/contexts';\nimport Text, { TextType } from '@/components/generic/Text';\nimport Tooltip from '@/components/generic/Tooltip/Tooltip';\nimport FloatingDatePicker from '@/components/generic/date/FloatingDatePicker';\nimport { Color, lightOrDark } from '@/util/Color';\nimport { Translation } from '@/translations/Translation';\nimport { useTranslation } from 'react-i18next';\nimport dayjs from 'dayjs';\nimport NumberOfAdultsPicker from '../roomBuilderProgress/NumberOfAdultsPicker';\nimport DataLayer, { InteractionType, InteractionStep } from '@/util/DataLayer';\nimport NumberOfChildrenPicker from '../roomBuilderProgress/NumberOfChildrenPicker';\nimport { UserSearchSummaryPromocdeInput } from './UserSearchSummaryPromocodeInput';\nimport BEButton from '@/components/generic/BEButton';\nimport ScreenSize from '@/util/ScreenSize';\nimport StringHelper from '@/util/StringHelper';\nimport Pill, { PillType } from '@/components/generic/Pill';\nimport { useCurrentHotel } from '@frontend/hooks';\n\ntype UserSearchSummaryRowProps = {\n    row: BasketRow;\n    index: number;\n};\n\nexport const UserSearchSummaryRow = ({ row, index }: UserSearchSummaryRowProps) => {\n    const { t } = useTranslation();\n    const removeButtonRef = useRef<any>();\n    const { hotel } = useCurrentHotel();\n\n    const { selectedBasketRow, currentBasketRows, updateBasketRow, removeBasketRow, selectBasketRow } = useContext(BasketContext);\n    const engineContext = useContext(BookingEngineContext);\n\n    const isSelectedRow = useMemo(() => {\n        return selectedBasketRow?.getID() === row?.getID();\n    }, [selectedBasketRow]);\n\n    const canRemove = currentBasketRows.length > 1;\n    const removeRoomOnClick = () => {\n        DataLayer.instance.sendInteraction('Remove Room', InteractionType.BUTTON, InteractionStep.ROOMS);\n        removeBasketRow(row);\n    };\n\n    const removeButton = (\n        <Tooltip\n            title={canRemove ? 'Remove this room' : 'Cannot remove this room as at least one must be selected.'}\n            followElement={removeButtonRef?.current}\n            wrapperClasses={styles['user-search-summary-row__remove-tooltip']}\n        >\n            <div className={styles['user-search-summary-row__remove']} onClick={removeRoomOnClick} ref={removeButtonRef}>\n                <BEButton isText icon={IconType.Close} iconPosition=\"right\" stopIconAnimation disabled={!canRemove} onClick={removeRoomOnClick} />\n            </div>\n        </Tooltip>\n    );\n\n    const updatePeopleValues = ({ adults, children, updatedPromoCode }: { adults?: number; children?: number; updatedPromoCode?: string }) => {\n        if (adults && adults !== row.getAdults()) {\n            DataLayer.instance.sendInteraction('Guests', InteractionType.NUMBER_INPUT, InteractionStep.ROOMS);\n            row.setAdults(adults);\n        }\n\n        if ((children || children === 0) && children !== row.getChildren()) {\n            DataLayer.instance.sendInteraction('Guests', InteractionType.NUMBER_INPUT, InteractionStep.ROOMS);\n            row.setChildren(children);\n        }\n\n        if ((updatedPromoCode || updatedPromoCode === '') && updatedPromoCode !== row.getPromoCode()) {\n            DataLayer.instance.sendInteraction('Promo Code', InteractionType.FORM_FIELD, InteractionStep.ROOMS);\n            row.setPromoCode(updatedPromoCode);\n        }\n\n        updateBasketRow(row);\n    };\n\n    const updatePromoCode = (code: string) => {\n        DataLayer.instance.sendInteraction('Promo Code', InteractionType.FORM_FIELD, InteractionStep.ROOMS);\n\n        if (selectedBasketRow) {\n            selectedBasketRow.setPromoCode(code);\n            updateBasketRow(selectedBasketRow);\n        }\n    };\n\n    const updateDateValues = (startDate: dayjs.Dayjs, endDate: dayjs.Dayjs) => {\n        if (startDate) {\n            row.setStartDate(startDate);\n        }\n\n        if (endDate) {\n            row.setEndDate(endDate);\n        }\n\n        updateBasketRow(row);\n    };\n\n    const updateNumberOfAdultsOnChange = (value: string) => {\n        updatePeopleValues({ adults: +value });\n    };\n    const updateNumberOfChildrenOnChange = (value: string) => {\n        updatePeopleValues({ children: +value });\n    };\n    const changePromoCode = (val: any) => {\n        updatePromoCode(val);\n    };\n\n    const onClickCancelRoomChanges = () => {\n        DataLayer.instance.sendInteraction('Cancel Room Changes', InteractionType.LINK, InteractionStep.ROOMS);\n        selectBasketRow(null);\n    };\n    const onClickEditRoom = () => {\n        DataLayer.instance.sendInteraction('Edit Room', InteractionType.LINK, InteractionStep.ROOMS);\n        selectBasketRow(row);\n    };\n\n    const isValid = row.isValid();\n    const isLargerThanLarge = engineContext.screenSize > ScreenSize.ExtraLarge;\n\n    if (isValid && !isSelectedRow) {\n        return (\n            <div className={`${styles['user-completed-summary-row']} u-flex w-100`}>\n                <div className=\"u-flex justify-content-start\">\n                    <div className=\"u-flex flex-column\">\n                        <span>\n                            <Text inline={isLargerThanLarge}>\n                                <strong>{row.getRoom().name}</strong>\n                            </Text>\n                            <Text inline={isLargerThanLarge} type={isLargerThanLarge ? TextType.Body : TextType.Small}>\n                                <span className=\"u-marg-left--light@xl\">\n                                    {StringHelper.pluralWithDictAndCount(row.getAdults(), Translation.Step.Date.Adult, t)}\n                                    ,&nbsp;\n                                    {StringHelper.pluralWithDictAndCount(row.getChildren(), Translation.Step.Date.Child, t)}\n                                </span>\n                            </Text>\n                        </span>\n                        <Text type={TextType.Caption} color={Color.DarkGrey}>\n                            <strong>{row.getStayDateRange('ddd, MMM D, YYYY', ' -')}</strong>\n                        </Text>\n                    </div>\n                    {row.isPromoCodeValid() && (\n                        <div className=\"u-marg-left d-flex align-items-center\">\n                            <Pill type={PillType.Success} icon={IconType.Money}>\n                                {row.getPromoCode()}\n                            </Pill>\n                        </div>\n                    )}\n                </div>\n                <div className=\"u-flex align-items-center\">\n                    <div className=\"u-flex align-items-center room-builder-progress--edit\">\n                        <Tooltip title={t(Translation.Step.Room.EditThisRoom)}>\n                            <div className=\"u-flex align-items-center\">\n                                <BEButton isText size=\"tiny\" onClick={onClickEditRoom}>\n                                    {t(Translation.Misc.Edit).toUpperCase()}\n                                </BEButton>\n                            </div>\n                        </Tooltip>\n                    </div>\n                    {removeButton}\n                </div>\n            </div>\n        );\n    }\n\n    // Commented out for now - need to figure out if all text should go the same colour\n    // const shouldTextBeWhite = hotel?.colors && lightOrDark(hotel?.colors.accent) === 'dark' && isValid;\n\n    return (\n        <div\n            className={cx(styles['user-search-summary-row'], {\n                [styles['--selected']]: isSelectedRow,\n                [styles['--valid']]: isValid,\n            })}\n        >\n            <div className={styles['user-search-summary-row--inner']}>\n                <div className={styles['user-search-summary-row__group']}>\n                    <Text inline bold className={styles['user-search-summary-row__group-label']}>\n                        Dates:\n                    </Text>\n                    <FloatingDatePicker\n                        startDate={row.getStartDate()}\n                        endDate={row.getEndDate()}\n                        selectedDateChanged={updateDateValues}\n                        isAboveNav\n                        className={styles['user-search-summary-row__input']}\n                    >\n                        <Tooltip disabled={!isSelectedRow} title={t(Translation.Step.Date.SelectArrivalAndDepartureDatesByClickingHere)}>\n                            <div className=\"u-flex align-items-center justify-content-center u-w-100@xl- u-cursor-pointer\">\n                                <Text color={Color.Accent} bold className=\"u-nowrap\">\n                                    {row.getArrivalDate()}\n                                </Text>\n                                <Icon icon={IconType.ArrowRight2} />\n                                <Text color={Color.Accent} bold className=\"u-nowrap\">\n                                    {row.getDepartureDate()}\n                                </Text>\n                            </div>\n                        </Tooltip>\n                    </FloatingDatePicker>\n                </div>\n                <div className={styles['user-search-summary-row__divider']} />\n                <div className={styles['user-search-summary-row__group']}>\n                    <Text inline bold className={styles['user-search-summary-row__group-label']}>\n                        Who:\n                    </Text>\n                    <div className={styles['user-search-summary-row__input']}>\n                        <NumberOfAdultsPicker row={row} onChange={updateNumberOfAdultsOnChange} />\n                    </div>\n                    <div className={styles['user-search-summary-row__input']}>\n                        <NumberOfChildrenPicker row={row} onChange={updateNumberOfChildrenOnChange} />\n                    </div>\n                </div>\n                <div className={styles['user-search-summary-row__divider']} />\n                <div className={styles['user-search-summary-row__group']}>\n                    <div className={styles['user-search-summary-row__input']}>\n                        <UserSearchSummaryPromocdeInput row={row} onChange={changePromoCode} disabled={!isSelectedRow} />\n                    </div>\n                </div>\n            </div>\n\n            <div className={styles['user-search-summary-row--buttons']}>\n                {isSelectedRow && isValid && (\n                    <>\n                        <BEButton isText size=\"tiny\" onClick={onClickCancelRoomChanges}>\n                            {t(Translation.Misc.Cancel)}\n                        </BEButton>\n                    </>\n                )}\n                {removeButton}\n            </div>\n        </div>\n    );\n};\n"]}