@roomstay/frontend 1.3.0

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

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

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

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const RoomTypeFilter_1 = require("../../../../models/Room/Filters/RoomTypeFilter");
+const Text_1 = require("../../../generic/Text");
+const Translation_1 = require("../../../../translations/Translation");
+const BEButton_1 = require("../../../generic/BEButton");
+const react_i18next_1 = require("react-i18next");
+const Checkbox_1 = require("../../../generic/Checkbox");
+const react_1 = require("react");
+const SmallSpinner_1 = require("../../../generic/loader/SmallSpinner");
+function RoomFilterRoomType(props) {
+    var _a;
+    const { t } = react_i18next_1.useTranslation();
+    const [selectedRooms, setSelectedRooms] = react_1.useState({});
+    const [resetCounter, setResetCounter] = react_1.useState(0);
+    const obj = react_1.useRef();
+    react_1.useEffect(() => {
+        if (props.roomList) {
+            const roomTypes = {};
+            const visibleRoomsFilter = props.filter ? props.filter.getVisibleRooms() : null;
+            props.roomList.forEach((room) => {
+                roomTypes[room.name] = { status: visibleRoomsFilter ? visibleRoomsFilter.includes(room.name) || visibleRoomsFilter.includes(room.code) : true };
+            });
+            setSelectedRooms(roomTypes);
+        }
+    }, [props.roomList, resetCounter]);
+    const allRooms = Object.keys(selectedRooms);
+    const rooms = allRooms.filter((name) => selectedRooms[name].status);
+    react_1.useEffect(() => {
+        var _a;
+        if (!(obj === null || obj === void 0 ? void 0 : obj.current) || !((_a = props.roomList) === null || _a === void 0 ? void 0 : _a.length))
+            return;
+        if (rooms.length === allRooms.length) {
+            props.onChange(null);
+        }
+        else {
+            props.onChange(new RoomTypeFilter_1.default(rooms));
+        }
+    }, [selectedRooms]);
+    const clearOnClickHandler = () => {
+        props.onChange(null);
+        setResetCounter((old) => old + 1);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "u-flex u-marg-bottom u-marg-top--heavy", ref: obj },
+            React.createElement(Text_1.default, { inline: true, type: Text_1.TextType.Small },
+                React.createElement("strong", null, t(Translation_1.Translation.Step.Room.Filter.RoomType))),
+            React.createElement(BEButton_1.default, { size: "tiny", isText: true, disabled: !props.filter, onClick: clearOnClickHandler }, t(Translation_1.Translation.Misc.Clear))),
+        React.createElement("div", null, ((_a = props.roomList) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (selectedRooms &&
+            Object.keys(selectedRooms).map((selectedRoomKey) => {
+                const onChangeCheckboxHandler = (value) => {
+                    const oldRooms = Object.assign({}, selectedRooms);
+                    oldRooms[selectedRoomKey].status = value;
+                    setSelectedRooms(oldRooms);
+                };
+                return (React.createElement("div", { className: "u-marg-bottom--light", key: selectedRoomKey },
+                    React.createElement(Checkbox_1.default, { label: selectedRoomKey, checked: selectedRooms[selectedRoomKey].status, onChange: onChangeCheckboxHandler })));
+            })) : (React.createElement("div", { className: "u-marg-top-bottom u-flex justify-content-center" },
+            React.createElement(SmallSpinner_1.default, null))))));
+}
+exports.default = RoomFilterRoomType;
+//# sourceMappingURL=RoomFilterRoomType.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RoomFilterRoomType.js","sourceRoot":"/","sources":["src/components/steps/room/roomFilter/RoomFilterRoomType.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Room } from '../../../../models/Room/Room';\nimport RoomTypeFilter from '../../../../models/Room/Filters/RoomTypeFilter';\nimport Text, { TextType } from '../../../generic/Text';\nimport { Translation } from '../../../../translations/Translation';\nimport BEButton from '../../../generic/BEButton';\nimport { useTranslation } from 'react-i18next';\nimport Checkbox from '../../../generic/Checkbox';\nimport { useState, useRef, useEffect } from 'react';\nimport SmallSpinner from '../../../generic/loader/SmallSpinner';\n\ninterface RoomFilterRoomTypeProps {\n    roomList: Room[];\n    filter: RoomTypeFilter;\n    onChange: (filter: RoomTypeFilter) => void;\n}\n\ninterface RoomFilterRoomTypeStatus {\n    [name: string]: {\n        status: boolean;\n    };\n}\n\nexport default function RoomFilterRoomType(props: RoomFilterRoomTypeProps) {\n    const { t } = useTranslation();\n\n    const [selectedRooms, setSelectedRooms] = useState<{ [name: string]: { status: boolean } }>({});\n    const [resetCounter, setResetCounter] = useState(0);\n    const obj = useRef();\n\n    useEffect(() => {\n        if (props.roomList) {\n            const roomTypes: RoomFilterRoomTypeStatus = {};\n            const visibleRoomsFilter = props.filter ? props.filter.getVisibleRooms() : null;\n\n            props.roomList.forEach((room) => {\n                roomTypes[room.name] = { status: visibleRoomsFilter ? visibleRoomsFilter.includes(room.name) || visibleRoomsFilter.includes(room.code) : true };\n            });\n\n            setSelectedRooms(roomTypes);\n        }\n    }, [props.roomList, resetCounter]);\n\n    const allRooms = Object.keys(selectedRooms);\n    const rooms = allRooms.filter((name) => selectedRooms[name].status);\n    useEffect(() => {\n        if (!obj?.current || !props.roomList?.length) return;\n        if (rooms.length === allRooms.length) {\n            props.onChange(null);\n        } else {\n            props.onChange(new RoomTypeFilter(rooms));\n        }\n    }, [selectedRooms]);\n    const clearOnClickHandler = () => {\n        props.onChange(null);\n        setResetCounter((old) => old + 1);\n    };\n    return (\n        <>\n            <div className=\"u-flex u-marg-bottom u-marg-top--heavy\" ref={obj}>\n                <Text inline={true} type={TextType.Small}>\n                    <strong>{t(Translation.Step.Room.Filter.RoomType)}</strong>\n                </Text>\n                <BEButton size=\"tiny\" isText={true} disabled={!props.filter} onClick={clearOnClickHandler}>\n                    {t(Translation.Misc.Clear)}\n                </BEButton>\n            </div>\n            <div>\n                {props.roomList?.length > 0 ? (\n                    selectedRooms &&\n                    Object.keys(selectedRooms).map((selectedRoomKey) => {\n                        const onChangeCheckboxHandler = (value: any) => {\n                            const oldRooms = { ...selectedRooms };\n                            oldRooms[selectedRoomKey].status = value;\n                            setSelectedRooms(oldRooms);\n                        };\n                        return (\n                            <div className=\"u-marg-bottom--light\" key={selectedRoomKey}>\n                                <Checkbox label={selectedRoomKey} checked={selectedRooms[selectedRoomKey].status} onChange={onChangeCheckboxHandler} />\n                            </div>\n                        );\n                    })\n                ) : (\n                    <div className=\"u-marg-top-bottom u-flex justify-content-center\">\n                        <SmallSpinner />\n                    </div>\n                )}\n            </div>\n        </>\n    );\n}\n"]}

package/dist/src/components/summary/BEMapWidget.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export interface MapProps {
+    mapLatLng?: {
+        lat: number;
+        lng: number;
+    };
+    google?: any;
+    isFullScreen?: boolean;
+    imageOverride?: string;
+}
+declare const _default: React.ForwardRefExoticComponent<MapProps & React.RefAttributes<unknown>>;
+export default _default;

package/dist/src/components/summary/BEMapWidget.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const google_maps_react_1 = require("google-maps-react");
+const react_1 = require("react");
+const Icon_1 = require("../generic/Icon");
+const react_2 = require("react");
+const SimpleModal_1 = require("../generic/modal/SimpleModal");
+const RoomstayThemeEngine_1 = require("../../providers/RoomstayThemeEngine");
+const hooks_1 = require("@frontend/hooks");
+function BEMapWidget(props) {
+    const mapStyle = [
+        {
+            featureType: 'poi.business',
+            stylers: [{ visibility: 'off' }],
+        },
+    ];
+    function _mapLoaded(mapProps, map) {
+        map.setOptions({
+            styles: mapStyle,
+        });
+    }
+    const onReadyHandler = (mapProps, map) => {
+        return _mapLoaded(mapProps, map);
+    };
+    return (React.createElement(google_maps_react_1.Map, { google: props.google, initialCenter: props.mapLatLng, center: props.mapLatLng, zoom: 15, disableDefaultUI: !props.isFullScreen, fullscreenControl: !props.isFullScreen, onReady: onReadyHandler }, !!props.mapLatLng && React.createElement(google_maps_react_1.Marker, { mapCenter: props.mapLatLng })));
+}
+const WrappedBEMapWidget = google_maps_react_1.GoogleApiWrapper({
+    apiKey: 'AIzaSyBFoDziXY56EWFYGsREjZtK9fOdav2adcY',
+})(BEMapWidget);
+exports.default = react_1.forwardRef((props, ref) => {
+    const { hotel } = hooks_1.useCurrentHotel();
+    const [toggler, setToggler] = react_2.useState(false);
+    const togglerOn = () => {
+        return setToggler(true);
+    };
+    const togglerOff = () => {
+        return setToggler(false);
+    };
+    const mapObject = (hotel === null || hotel === void 0 ? void 0 : hotel.googleMapsImage) ? React.createElement("img", { className: "static-image", src: RoomstayThemeEngine_1.default.wrapAssetUrl(hotel === null || hotel === void 0 ? void 0 : hotel.googleMapsImage) }) : React.createElement(WrappedBEMapWidget, Object.assign({}, props));
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "be-map-widget" },
+            React.createElement("span", { className: "room-gallery-slider__icon-lightbox-map", onClick: togglerOn },
+                React.createElement(Icon_1.default, { icon: Icon_1.IconType.Fullscreen, size: "24px" })),
+            mapObject),
+        React.createElement(SimpleModal_1.default, { open: toggler, size: SimpleModal_1.SimpleModalSize.Large, alignCenter: true, onClose: togglerOff },
+            React.createElement("div", { style: { height: 500, maxHeight: '80vh' } },
+                React.createElement(WrappedBEMapWidget, Object.assign({}, props, { isFullScreen: true }))))));
+});
+//# sourceMappingURL=BEMapWidget.js.map

package/dist/src/components/summary/BEMapWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BEMapWidget.js","sourceRoot":"/","sources":["src/components/summary/BEMapWidget.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,yDAAkE;AAClE,iCAAmC;AACnC,0CAAiD;AACjD,iCAAiC;AACjC,8DAA4E;AAC5E,6EAAsE;AACtE,2CAAkD;AAUlD,SAAS,WAAW,CAAC,KAAe;IAChC,MAAM,QAAQ,GAAG;QACb;YACI,WAAW,EAAE,cAAc;YAC3B,OAAO,EAAE,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC;SACnC;KACJ,CAAC;IAEF,SAAS,UAAU,CAAC,QAAa,EAAE,GAAQ;QACvC,GAAG,CAAC,UAAU,CAAC;YACX,MAAM,EAAE,QAAQ;SACnB,CAAC,CAAC;IACP,CAAC;IACD,MAAM,cAAc,GAAG,CAAC,QAAa,EAAE,GAAQ,EAAE,EAAE;QAC/C,OAAO,UAAU,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;IACrC,CAAC,CAAC;IACF,OAAO,CACH,oBAAC,uBAAG,IACA,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,aAAa,EAAE,KAAK,CAAC,SAAS,EAC9B,MAAM,EAAE,KAAK,CAAC,SAAS,EACvB,IAAI,EAAE,EAAE,EACR,gBAAgB,EAAE,CAAC,KAAK,CAAC,YAAY,EACrC,iBAAiB,EAAE,CAAC,KAAK,CAAC,YAAY,EACtC,OAAO,EAAE,cAAc,IAEtB,CAAC,CAAC,KAAK,CAAC,SAAS,IAAI,oBAAC,0BAAM,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,GAAI,CAC1D,CACT,CAAC;AACN,CAAC;AAED,MAAM,kBAAkB,GAAQ,oCAAgB,CAAC;IAC7C,MAAM,EAAE,yCAAyC;CACpD,CAAC,CAAC,WAAW,CAAC,CAAC;AAEhB,kBAAe,kBAAU,CAAC,CAAC,KAAe,EAAE,GAAG,EAAE,EAAE;IAC/C,MAAM,EAAE,KAAK,EAAE,GAAG,uBAAe,EAAE,CAAC;IACpC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,gBAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,SAAS,GAAG,GAAG,EAAE;QACnB,OAAO,UAAU,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,GAAG,EAAE;QACpB,OAAO,UAAU,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,EAAC,CAAC,CAAC,6BAAK,SAAS,EAAC,cAAc,EAAC,GAAG,EAAE,6BAAmB,CAAC,YAAY,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,CAAC,GAAI,CAAC,CAAC,CAAC,oBAAC,kBAAkB,oBAAK,KAAK,EAAI,CAAC;IAE/K,OAAO,CACH;QACI,6BAAK,SAAS,EAAC,eAAe;YAC1B,8BAAM,SAAS,EAAC,wCAAwC,EAAC,OAAO,EAAE,SAAS;gBACvE,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,UAAU,EAAE,IAAI,EAAC,MAAM,GAAG,CAC5C;YACN,SAAS,CACR;QAEF,oBAAC,qBAAW,IAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,6BAAe,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU;YAC3F,6BAAK,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE;gBAC1C,oBAAC,kBAAkB,oBAAK,KAAK,IAAE,YAAY,EAAE,IAAI,IAAI,CACnD,CACI,CAEnB,CACN,CAAC;AACN,CAAC,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { GoogleApiWrapper, Map, Marker } from 'google-maps-react';\nimport { forwardRef } from 'react';\nimport Icon, { IconType } from '../generic/Icon';\nimport { useState } from 'react';\nimport SimpleModal, { SimpleModalSize } from '../generic/modal/SimpleModal';\nimport RoomstayThemeEngine from '../../providers/RoomstayThemeEngine';\nimport { useCurrentHotel } from '@frontend/hooks';\n\nexport interface MapProps {\n    mapLatLng?: { lat: number; lng: number };\n    google?: any;\n    isFullScreen?: boolean;\n\n    imageOverride?: string;\n}\n\nfunction BEMapWidget(props: MapProps) {\n    const mapStyle = [\n        {\n            featureType: 'poi.business',\n            stylers: [{ visibility: 'off' }],\n        },\n    ];\n\n    function _mapLoaded(mapProps: any, map: any) {\n        map.setOptions({\n            styles: mapStyle,\n        });\n    }\n    const onReadyHandler = (mapProps: any, map: any) => {\n        return _mapLoaded(mapProps, map);\n    };\n    return (\n        <Map\n            google={props.google}\n            initialCenter={props.mapLatLng}\n            center={props.mapLatLng}\n            zoom={15}\n            disableDefaultUI={!props.isFullScreen}\n            fullscreenControl={!props.isFullScreen}\n            onReady={onReadyHandler}\n        >\n            {!!props.mapLatLng && <Marker mapCenter={props.mapLatLng} />}\n        </Map>\n    );\n}\n\nconst WrappedBEMapWidget: any = GoogleApiWrapper({\n    apiKey: 'AIzaSyBFoDziXY56EWFYGsREjZtK9fOdav2adcY',\n})(BEMapWidget);\n\nexport default forwardRef((props: MapProps, ref) => {\n    const { hotel } = useCurrentHotel();\n    const [toggler, setToggler] = useState(false);\n\n    const togglerOn = () => {\n        return setToggler(true);\n    };\n\n    const togglerOff = () => {\n        return setToggler(false);\n    };\n\n    const mapObject = hotel?.googleMapsImage ? <img className=\"static-image\" src={RoomstayThemeEngine.wrapAssetUrl(hotel?.googleMapsImage)} /> : <WrappedBEMapWidget {...props} />;\n\n    return (\n        <>\n            <div className=\"be-map-widget\">\n                <span className=\"room-gallery-slider__icon-lightbox-map\" onClick={togglerOn}>\n                    <Icon icon={IconType.Fullscreen} size=\"24px\" />\n                </span>\n                {mapObject}\n            </div>\n            {\n                <SimpleModal open={toggler} size={SimpleModalSize.Large} alignCenter={true} onClose={togglerOff}>\n                    <div style={{ height: 500, maxHeight: '80vh' }}>\n                        <WrappedBEMapWidget {...props} isFullScreen={true} />\n                    </div>\n                </SimpleModal>\n            }\n        </>\n    );\n});\n"]}

package/dist/src/components/summary/BEMobileSummary.d.ts

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

package/dist/src/components/summary/BEMobileSummary.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const Text_1 = require("../generic/Text");
+const Color_1 = require("../../util/Color");
+const Icon_1 = require("../generic/Icon");
+const Headline_1 = require("../generic/Headline");
+const TextAlignment_1 = require("../../util/TextAlignment");
+const Currency_1 = require("../generic/Currency");
+const react_i18next_1 = require("react-i18next");
+const Translation_1 = require("../../translations/Translation");
+const ScreenSize_1 = require("../../util/ScreenSize");
+const react_1 = require("react");
+const BEMobileSummaryModal_1 = require("./BEMobileSummaryModal");
+const StepDatePricePerRoom_1 = require("../../components/steps/date/StepDatePricePerRoom");
+const StepDate_1 = require("../../pages/steps/StepDate/StepDate");
+const contexts_1 = require("@frontend/contexts");
+function BEMobileSummary() {
+    const { screenSize } = react_1.useContext(contexts_1.BookingEngineContext);
+    const { currentStep } = react_1.useContext(contexts_1.FullPageEngineContext);
+    const basketContext = React.useContext(contexts_1.BasketContext);
+    const { t } = react_i18next_1.useTranslation();
+    const [modalOpen, setModalOpen] = react_1.useState(false);
+    if (screenSize <= ScreenSize_1.default.Medium) {
+        const openModal = () => {
+            setModalOpen(true);
+        };
+        const closeModal = () => {
+            setModalOpen(false);
+        };
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "be-mobile-summary row u-border-bottom u-pad-top-bottom u-marg-bottom", onClick: openModal },
+                React.createElement("div", { className: "col-8" },
+                    React.createElement("div", { className: "u-flex u-flex-flex-start" },
+                        React.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                            React.createElement("span", Object.assign({}, (basketContext.startDate ? { style: { color: Color_1.Color.Accent, fontWeight: 'bold' } } : {})), basketContext.startDate ? basketContext.startDate.format('ddd, MMM D') : t(Translation_1.Translation.Step.Date.Arrival))),
+                        React.createElement("span", { className: "u-marg-left-right--light" },
+                            React.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowRight2, size: '18px', color: Color_1.Color.DarkGrey })),
+                        React.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                            React.createElement("span", Object.assign({}, (basketContext.endDate ? { style: { color: Color_1.Color.Accent, fontWeight: 'bold' } } : {})), basketContext.endDate ? basketContext.endDate.format('ddd, MMM D') : t(Translation_1.Translation.Step.Date.Departure)))),
+                    React.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                        basketContext.getNumberOfAdults(true),
+                        ",\u00A0",
+                        basketContext.getNumberOfChildren(true),
+                        ",\u00A0",
+                        basketContext.getNumberOfRooms(true))),
+                React.createElement("div", { className: "col-4 u-flex u-flex-flex-end u-flex-align-center" },
+                    React.createElement(Headline_1.default, { bold: true, size: 'normal', align: TextAlignment_1.TextAlign.Right }, currentStep === StepDate_1.default ? React.createElement(StepDatePricePerRoom_1.default, { isMobile: true }) : React.createElement(Currency_1.default, null, basketContext.getTotalPrice())),
+                    React.createElement(Icon_1.default, { icon: Icon_1.IconType.Dropdown, size: '18px', color: Color_1.Color.DarkGrey }))),
+            React.createElement(BEMobileSummaryModal_1.default, { isOpen: modalOpen, onClose: closeModal })));
+    }
+    return React.createElement(React.Fragment, null);
+}
+exports.default = BEMobileSummary;
+//# sourceMappingURL=BEMobileSummary.js.map

package/dist/src/components/summary/BEMobileSummary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BEMobileSummary.js","sourceRoot":"/","sources":["src/components/summary/BEMobileSummary.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport Text, { TextType } from '../generic/Text';\nimport { Color } from '../../util/Color';\nimport Icon, { IconType } from '../generic/Icon';\nimport Headline from '../generic/Headline';\nimport { TextAlign } from '../../util/TextAlignment';\nimport Currency from '../generic/Currency';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from '../../translations/Translation';\nimport ScreenSize from '../../util/ScreenSize';\nimport { useContext, useState } from 'react';\nimport BEMobileSummaryModal from './BEMobileSummaryModal';\nimport StepDatePricePerRoom from '../../components/steps/date/StepDatePricePerRoom';\nimport StepDate from '../../pages/steps/StepDate/StepDate';\nimport { BasketContext, BookingEngineContext, FullPageEngineContext } from '@frontend/contexts';\n\nexport default function BEMobileSummary() {\n    const { screenSize } = useContext(BookingEngineContext);\n    const { currentStep } = useContext(FullPageEngineContext);\n    const basketContext = React.useContext(BasketContext);\n    const { t } = useTranslation();\n    const [modalOpen, setModalOpen] = useState(false);\n\n    if (screenSize <= ScreenSize.Medium) {\n        const openModal = () => {\n            setModalOpen(true);\n        };\n        const closeModal = () => {\n            setModalOpen(false);\n        };\n        return (\n            <>\n                <div className=\"be-mobile-summary row u-border-bottom u-pad-top-bottom u-marg-bottom\" onClick={openModal}>\n                    <div className=\"col-8\">\n                        <div className=\"u-flex u-flex-flex-start\">\n                            <Text type={TextType.Small}>\n                                <span {...(basketContext.startDate ? { style: { color: Color.Accent, fontWeight: 'bold' } } : {})}>\n                                    {basketContext.startDate ? basketContext.startDate.format('ddd, MMM D') : t(Translation.Step.Date.Arrival)}\n                                </span>\n                            </Text>\n                            <span className=\"u-marg-left-right--light\">\n                                <Icon icon={IconType.ArrowRight2} size={'18px'} color={Color.DarkGrey} />\n                            </span>\n                            <Text type={TextType.Small}>\n                                <span {...(basketContext.endDate ? { style: { color: Color.Accent, fontWeight: 'bold' } } : {})}>\n                                    {basketContext.endDate ? basketContext.endDate.format('ddd, MMM D') : t(Translation.Step.Date.Departure)}\n                                </span>\n                            </Text>\n                        </div>\n                        <Text type={TextType.Small}>\n                            {basketContext.getNumberOfAdults(true)},&nbsp;\n                            {basketContext.getNumberOfChildren(true)},&nbsp;\n                            {basketContext.getNumberOfRooms(true)}\n                        </Text>\n                    </div>\n                    <div className=\"col-4 u-flex u-flex-flex-end u-flex-align-center\">\n                        <Headline bold={true} size={'normal'} align={TextAlign.Right}>\n                            {currentStep === StepDate ? <StepDatePricePerRoom isMobile={true} /> : <Currency>{basketContext.getTotalPrice()}</Currency>}\n                        </Headline>\n                        <Icon icon={IconType.Dropdown} size={'18px'} color={Color.DarkGrey} />\n                    </div>\n                </div>\n                <BEMobileSummaryModal isOpen={modalOpen} onClose={closeModal} />\n            </>\n        );\n    }\n\n    return <></>;\n}\n"]}

package/dist/src/components/summary/BEMobileSummaryModal.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface BEMobileSummaryModalProps {
+    isOpen?: boolean;
+    onClose?: () => void;
+    showImages?: boolean;
+}
+export default function BEMobileSummaryModal(props: BEMobileSummaryModalProps): JSX.Element;

package/dist/src/components/summary/BEMobileSummaryModal.js

@@ -0,0 +1,142 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const SimpleModal_1 = require("../generic/modal/SimpleModal");
+const react_i18next_1 = require("react-i18next");
+const react_1 = require("react");
+const Translation_1 = require("../../translations/Translation");
+const React = require("react");
+const LineBreak_1 = require("../generic/LineBreak");
+const Icon_1 = require("../generic/Icon");
+const Color_1 = require("../../util/Color");
+const Text_1 = require("../generic/Text");
+const Headline_1 = require("../generic/Headline");
+const TextAlignment_1 = require("../../util/TextAlignment");
+const Currency_1 = require("../generic/Currency");
+const HotelLocationMap_1 = require("../generic/map/HotelLocationMap");
+const BESummaryRoomRow_1 = require("./BESummaryRoomRow");
+const BESummaryAddonRow_1 = require("./BESummaryAddonRow");
+const BESummaryPerkBlock_1 = require("./BESummaryPerkBlock");
+const TransportDistanceFromHotelBlock_1 = require("./TransportDistanceFromHotelBlock");
+const BESummaryPrivacyPolicy_1 = require("./BESummaryPrivacyPolicy");
+const contexts_1 = require("@frontend/contexts");
+const StringHelper_1 = require("../../util/StringHelper");
+const BEButton_1 = require("../generic/BEButton");
+const react_router_dom_1 = require("react-router-dom");
+const StepRoom_1 = require("../../pages/steps/StepRoom/StepRoom");
+const hooks_1 = require("@frontend/hooks");
+const BESummary_1 = require("./BESummary");
+const ElementSortHook_1 = require("../../hooks/ElementSortHook");
+function BEMobileSummaryModal(props) {
+    var _a, _b, _c, _d;
+    const basketContext = react_1.useContext(contexts_1.BasketContext);
+    const { hotel } = hooks_1.useCurrentHotel();
+    const selectedBasketRows = basketContext.getAllValidRows();
+    const addons = basketContext.basketAddonRows;
+    const { t } = react_i18next_1.useTranslation();
+    const [mobileLayout, setMobileLayout] = react_1.useState({});
+    react_1.useEffect(() => {
+        // We do this hacky thing since Mobile summary & Desktop summary are almost identical, just blocks are presented differently
+        const newLayout = Object.assign({}, BESummary_1.BESummaryLayoutOrder);
+        newLayout.TransportDistanceBlock.component = (React.createElement("div", { className: "u-flex justify-content-center u-marg-top u-marg-bottom" },
+            React.createElement("div", { className: "col-10 u-flex flex-row" },
+                React.createElement(TransportDistanceFromHotelBlock_1.default, { vertical: true, hotel: hotel }))));
+        newLayout.PerksBlock.component = React.createElement(BESummaryPerkBlock_1.BESummaryPerkBlock, { size: "mobile" });
+        setMobileLayout(newLayout);
+    }, []);
+    const { sortedComponents } = ElementSortHook_1.useElementSort(mobileLayout);
+    const totalDays = basketContext.endDate ? basketContext.endDate.diff(basketContext.startDate, 'day') : 0;
+    const addressLine1 = [(_a = hotel === null || hotel === void 0 ? void 0 : hotel.address) === null || _a === void 0 ? void 0 : _a.line1, (_b = hotel === null || hotel === void 0 ? void 0 : hotel.address) === null || _b === void 0 ? void 0 : _b.city];
+    const addressLine2 = [(_c = hotel === null || hotel === void 0 ? void 0 : hotel.address) === null || _c === void 0 ? void 0 : _c.postalCode, (_d = hotel === null || hotel === void 0 ? void 0 : hotel.address) === null || _d === void 0 ? void 0 : _d.state];
+    const getAddressString = (val) => {
+        const line = val.filter((it) => !!it && it !== '0').join(', ');
+        if (line) {
+            return React.createElement(Text_1.default, { type: Text_1.TextType.Small }, line);
+        }
+        return null;
+    };
+    const onCloseModalHandler = () => {
+        return props.onClose ? props.onClose() : null;
+    };
+    const editOnClick = () => {
+        props.onClose();
+    };
+    const onEditPropertyClickedHandler = () => {
+        props.onClose();
+    };
+    return (React.createElement(SimpleModal_1.default, { open: props.isOpen, title: t(Translation_1.Translation.Misc.Summary), onClose: onCloseModalHandler, mobileFooter: React.createElement("div", { className: "row align-items-center" },
+            React.createElement("div", { className: "col-4" },
+                React.createElement(Text_1.default, { type: Text_1.TextType.Body }, t(Translation_1.Translation.Misc.Total)),
+                React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Accent },
+                    React.createElement("strong", null, StringHelper_1.default.pluralWithDictAndCount(totalDays, Translation_1.Translation.Misc.Night, t)))),
+            React.createElement("div", { className: "col-8 u-flex u-flex-direction-column align-items-end" },
+                React.createElement(Headline_1.default, { bold: true, size: 'normal', align: TextAlignment_1.TextAlign.Right },
+                    React.createElement(Currency_1.default, null, basketContext.getTotalPrice())),
+                React.createElement(Text_1.default, { color: Color_1.Color.DarkGrey, type: Text_1.TextType.Small, align: TextAlignment_1.TextAlign.Right },
+                    React.createElement("span", { className: "u-nowrap" }, t(Translation_1.Translation.Step.Room.RoomInfo.IncludesTaxes))))) },
+        React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "container" },
+                React.createElement("div", { className: "row u-border-bottom u-pad-top-bottom" },
+                    React.createElement("div", { className: "col-6" },
+                        React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Grey },
+                            React.createElement("strong", null, t(Translation_1.Translation.Misc.CheckIn))),
+                        React.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                            t(Translation_1.Translation.Misc.After),
+                            " ", hotel === null || hotel === void 0 ? void 0 :
+                            hotel.checkInTime)),
+                    React.createElement("div", { className: "col-6" },
+                        React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Grey },
+                            React.createElement("strong", null, t(Translation_1.Translation.Misc.CheckOut))),
+                        React.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                            t(Translation_1.Translation.Misc.Before),
+                            " ", hotel === null || hotel === void 0 ? void 0 :
+                            hotel.checkOutTime))),
+                React.createElement("div", { className: "row u-border-bottom u-pad-top-bottom" },
+                    React.createElement("div", { className: "col-8" },
+                        React.createElement("div", { className: "u-flex u-flex-flex-start" },
+                            React.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                                React.createElement("span", Object.assign({}, (basketContext.startDate ? { style: { color: Color_1.Color.Accent, fontWeight: 'bold' } } : {})), basketContext.startDate ? basketContext.startDate.format('ddd, MMM D') : t(Translation_1.Translation.Step.Date.Arrival))),
+                            React.createElement("span", { className: "u-marg-left-right--light" },
+                                React.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowRight2, size: '18px', color: Color_1.Color.DarkGrey })),
+                            React.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                                React.createElement("span", Object.assign({}, (basketContext.endDate ? { style: { color: Color_1.Color.Accent, fontWeight: 'bold' } } : {})), basketContext.endDate ? basketContext.endDate.format('ddd, MMM D') : t(Translation_1.Translation.Step.Date.Departure)))),
+                        React.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                            basketContext.getNumberOfAdults(true),
+                            ",\u00A0",
+                            basketContext.getNumberOfChildren(true),
+                            ",\u00A0",
+                            basketContext.getNumberOfRooms(true))),
+                    React.createElement("div", { className: "col-4 u-align-right" },
+                        React.createElement(react_router_dom_1.Link, { to: StepRoom_1.default.getStepUrl() },
+                            React.createElement(BEButton_1.default, { onClick: editOnClick, size: 'tiny' }, "EDIT")))),
+                selectedBasketRows && selectedBasketRows.length ? (React.createElement(React.Fragment, null,
+                    selectedBasketRows.map((row, index) => {
+                        if (!row.isValid())
+                            return;
+                        return (React.createElement(BESummaryRoomRow_1.default, { row: row, index: index, key: row.getID(), showImages: props.showImages, onEditPropertyClicked: onEditPropertyClickedHandler }));
+                    }),
+                    addons.length > 0 && (React.createElement(React.Fragment, null,
+                        React.createElement(LineBreak_1.default, { noMargins: true, darker: true }),
+                        React.createElement("div", { className: "u-marg-top" },
+                            React.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.DarkGrey },
+                                React.createElement("strong", null, "Add-on Items"))),
+                        addons.map((row, index) => {
+                            const onRemoveClickHandler = () => {
+                                return basketContext.removeBasketAddonRow(row);
+                            };
+                            return React.createElement(BESummaryAddonRow_1.default, { row: row, key: row.getID(), onRemoveClick: onRemoveClickHandler });
+                        }))))) : (React.createElement("div", { className: "u-marg-bottom--heavy u-marg-top--heavy" },
+                    React.createElement("div", { className: "u-marg-bottom--heavy" },
+                        React.createElement(Text_1.default, { type: Text_1.TextType.Body }, t(Translation_1.Translation.Step.General.YourCartIsEmpty))),
+                    React.createElement("div", { style: { height: '150px', position: 'relative' } },
+                        React.createElement(HotelLocationMap_1.default, null)),
+                    React.createElement("div", { className: "u-marg-top" },
+                        React.createElement("div", { className: "u-marg-bottom" },
+                            React.createElement(Text_1.default, { bold: true }, hotel.name)),
+                        getAddressString(addressLine1),
+                        getAddressString(addressLine2)))),
+                sortedComponents,
+                React.createElement("div", { className: "u-marg-top--heavy u-marg-bottom--heavy" },
+                    React.createElement(BESummaryPrivacyPolicy_1.default, null))))));
+}
+exports.default = BEMobileSummaryModal;
+//# sourceMappingURL=BEMobileSummaryModal.js.map

package/dist/src/components/summary/BEMobileSummaryModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BEMobileSummaryModal.js","sourceRoot":"/","sources":["src/components/summary/BEMobileSummaryModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import SimpleModal from '../generic/modal/SimpleModal';\nimport { useTranslation } from 'react-i18next';\nimport { useContext, useEffect, useState } from 'react';\nimport { Translation } from '../../translations/Translation';\nimport * as React from 'react';\n\nimport LineBreak from '../generic/LineBreak';\nimport Icon, { IconType } from '../generic/Icon';\nimport { Color } from '../../util/Color';\nimport Text, { TextType } from '../generic/Text';\nimport Headline from '../generic/Headline';\nimport { TextAlign } from '../../util/TextAlignment';\nimport Currency from '../generic/Currency';\nimport BasketAddonRow from '../../models/BasketAddonRow';\nimport BasketRow from '../../models/BasketRow';\nimport HotelLocationMap from '../generic/map/HotelLocationMap';\nimport BESummaryRoomRow from './BESummaryRoomRow';\nimport BESummaryAddonRow from './BESummaryAddonRow';\nimport { BESummaryPerkBlock } from './BESummaryPerkBlock';\nimport TransportDistanceFromHotelBlock from './TransportDistanceFromHotelBlock';\nimport BESummaryPrivacyPolicy from './BESummaryPrivacyPolicy';\nimport { BasketContext } from '@frontend/contexts';\nimport StringHelper from '../../util/StringHelper';\nimport BEButton from '../generic/BEButton';\nimport { Link } from 'react-router-dom';\nimport StepRoom from '../../pages/steps/StepRoom/StepRoom';\nimport { useCurrentHotel } from '@frontend/hooks';\nimport { BESummaryLayoutOrder } from './BESummary';\nimport { OrderableReactList, useElementSort } from '../../hooks/ElementSortHook';\n\nexport interface BEMobileSummaryModalProps {\n    isOpen?: boolean;\n    onClose?: () => void;\n    showImages?: boolean;\n}\n\nexport default function BEMobileSummaryModal(props: BEMobileSummaryModalProps) {\n    const basketContext = useContext(BasketContext);\n    const { hotel } = useCurrentHotel();\n\n    const selectedBasketRows = basketContext.getAllValidRows();\n\n    const addons = basketContext.basketAddonRows;\n\n    const { t } = useTranslation();\n\n    const [mobileLayout, setMobileLayout] = useState<OrderableReactList>({});\n\n    useEffect(() => {\n        // We do this hacky thing since Mobile summary & Desktop summary are almost identical, just blocks are presented differently\n        const newLayout: typeof BESummaryLayoutOrder = { ...BESummaryLayoutOrder };\n        newLayout.TransportDistanceBlock.component = (\n            <div className=\"u-flex justify-content-center u-marg-top u-marg-bottom\">\n                <div className=\"col-10 u-flex flex-row\">\n                    <TransportDistanceFromHotelBlock vertical={true} hotel={hotel} />\n                </div>\n            </div>\n        );\n        newLayout.PerksBlock.component = <BESummaryPerkBlock size=\"mobile\" />;\n\n        setMobileLayout(newLayout);\n    }, []);\n\n    const { sortedComponents } = useElementSort(mobileLayout);\n\n    const totalDays = basketContext.endDate ? basketContext.endDate.diff(basketContext.startDate, 'day') : 0;\n\n    const addressLine1 = [hotel?.address?.line1, hotel?.address?.city];\n    const addressLine2 = [hotel?.address?.postalCode, hotel?.address?.state];\n\n    const getAddressString = (val: string[]) => {\n        const line = val.filter((it) => !!it && it !== '0').join(', ');\n\n        if (line) {\n            return <Text type={TextType.Small}>{line}</Text>;\n        }\n\n        return null;\n    };\n\n    const onCloseModalHandler = () => {\n        return props.onClose ? props.onClose() : null;\n    };\n\n    const editOnClick = () => {\n        props.onClose();\n    };\n\n    const onEditPropertyClickedHandler = () => {\n        props.onClose();\n    };\n\n    return (\n        <SimpleModal\n            open={props.isOpen}\n            title={t(Translation.Misc.Summary)}\n            onClose={onCloseModalHandler}\n            mobileFooter={\n                <div className=\"row align-items-center\">\n                    <div className=\"col-4\">\n                        <Text type={TextType.Body}>{t(Translation.Misc.Total)}</Text>\n                        <Text type={TextType.Small} color={Color.Accent}>\n                            <strong>{StringHelper.pluralWithDictAndCount(totalDays, Translation.Misc.Night, t)}</strong>\n                        </Text>\n                    </div>\n                    <div className=\"col-8 u-flex u-flex-direction-column align-items-end\">\n                        <Headline bold={true} size={'normal'} align={TextAlign.Right}>\n                            <Currency>{basketContext.getTotalPrice()}</Currency>\n                        </Headline>\n                        <Text color={Color.DarkGrey} type={TextType.Small} align={TextAlign.Right}>\n                            <span className=\"u-nowrap\">{t(Translation.Step.Room.RoomInfo.IncludesTaxes)}</span>\n                        </Text>\n                    </div>\n                </div>\n            }\n        >\n            <>\n                <div className=\"container\">\n                    <div className=\"row u-border-bottom u-pad-top-bottom\">\n                        <div className=\"col-6\">\n                            <Text type={TextType.Small} color={Color.Grey}>\n                                <strong>{t(Translation.Misc.CheckIn)}</strong>\n                            </Text>\n                            <Text type={TextType.Small}>\n                                {t(Translation.Misc.After)} {hotel?.checkInTime}\n                            </Text>\n                        </div>\n                        <div className=\"col-6\">\n                            <Text type={TextType.Small} color={Color.Grey}>\n                                <strong>{t(Translation.Misc.CheckOut)}</strong>\n                            </Text>\n                            <Text type={TextType.Small}>\n                                {t(Translation.Misc.Before)} {hotel?.checkOutTime}\n                            </Text>\n                        </div>\n                    </div>\n\n                    <div className=\"row u-border-bottom u-pad-top-bottom\">\n                        <div className=\"col-8\">\n                            <div className=\"u-flex u-flex-flex-start\">\n                                <Text type={TextType.Small}>\n                                    <span {...(basketContext.startDate ? { style: { color: Color.Accent, fontWeight: 'bold' } } : {})}>\n                                        {basketContext.startDate ? basketContext.startDate.format('ddd, MMM D') : t(Translation.Step.Date.Arrival)}\n                                    </span>\n                                </Text>\n                                <span className=\"u-marg-left-right--light\">\n                                    <Icon icon={IconType.ArrowRight2} size={'18px'} color={Color.DarkGrey} />\n                                </span>\n                                <Text type={TextType.Small}>\n                                    <span {...(basketContext.endDate ? { style: { color: Color.Accent, fontWeight: 'bold' } } : {})}>\n                                        {basketContext.endDate ? basketContext.endDate.format('ddd, MMM D') : t(Translation.Step.Date.Departure)}\n                                    </span>\n                                </Text>\n                            </div>\n                            <Text type={TextType.Small}>\n                                {basketContext.getNumberOfAdults(true)},&nbsp;\n                                {basketContext.getNumberOfChildren(true)},&nbsp;\n                                {basketContext.getNumberOfRooms(true)}\n                            </Text>\n                        </div>\n                        <div className=\"col-4 u-align-right\">\n                            <Link to={StepRoom.getStepUrl()}>\n                                <BEButton onClick={editOnClick} size={'tiny'}>\n                                    EDIT\n                                </BEButton>\n                            </Link>\n                        </div>\n                    </div>\n\n                    {selectedBasketRows && selectedBasketRows.length ? (\n                        <>\n                            {selectedBasketRows.map((row: BasketRow, index: number) => {\n                                if (!row.isValid()) return;\n\n                                return (\n                                    <BESummaryRoomRow\n                                        row={row}\n                                        index={index}\n                                        key={row.getID()}\n                                        showImages={props.showImages}\n                                        onEditPropertyClicked={onEditPropertyClickedHandler}\n                                    />\n                                );\n                            })}\n\n                            {addons.length > 0 && (\n                                <>\n                                    <LineBreak noMargins={true} darker={true} />\n\n                                    <div className=\"u-marg-top\">\n                                        <Text type={TextType.Label} color={Color.DarkGrey}>\n                                            <strong>Add-on Items</strong>\n                                        </Text>\n                                    </div>\n\n                                    {addons.map((row: BasketAddonRow, index: number) => {\n                                        const onRemoveClickHandler = () => {\n                                            return basketContext.removeBasketAddonRow(row);\n                                        };\n\n                                        return <BESummaryAddonRow row={row} key={row.getID()} onRemoveClick={onRemoveClickHandler} />;\n                                    })}\n                                </>\n                            )}\n                        </>\n                    ) : (\n                        <div className=\"u-marg-bottom--heavy u-marg-top--heavy\">\n                            <div className=\"u-marg-bottom--heavy\">\n                                <Text type={TextType.Body}>{t(Translation.Step.General.YourCartIsEmpty)}</Text>\n                            </div>\n                            <div style={{ height: '150px', position: 'relative' }}>\n                                <HotelLocationMap />\n                            </div>\n                            <div className=\"u-marg-top\">\n                                <div className=\"u-marg-bottom\">\n                                    <Text bold={true}>{hotel.name}</Text>\n                                </div>\n                                {getAddressString(addressLine1)}\n                                {getAddressString(addressLine2)}\n                            </div>\n                        </div>\n                    )}\n\n                    {sortedComponents}\n\n                    <div className=\"u-marg-top--heavy u-marg-bottom--heavy\">\n                        <BESummaryPrivacyPolicy />\n                    </div>\n                </div>\n            </>\n        </SimpleModal>\n    );\n}\n"]}

package/dist/src/components/summary/BESummary.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { OrderableReactList } from '../../hooks/ElementSortHook';
+export interface BESummaryProps {
+    showImages?: boolean;
+}
+export declare const BESummaryLayoutOrder: OrderableReactList;
+export declare function BESummary(props: BESummaryProps): JSX.Element;

package/dist/src/components/summary/BESummary.js

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BESummary = exports.BESummaryLayoutOrder = void 0;
+const React = require("react");
+const react_1 = require("react");
+const Headline_1 = require("../generic/Headline");
+const Text_1 = require("../generic/Text");
+const Color_1 = require("../../util/Color");
+const Currency_1 = require("../generic/Currency");
+const Alert_1 = require("../generic/Alert");
+const LineBreak_1 = require("../generic/LineBreak");
+const TextAlignment_1 = require("../../util/TextAlignment");
+const Icon_1 = require("../generic/Icon");
+const react_i18next_1 = require("react-i18next");
+const Translation_1 = require("../../translations/Translation");
+const contexts_1 = require("@frontend/contexts");
+const HotelLocationMap_1 = require("../generic/map/HotelLocationMap");
+const BESummaryRoomRow_1 = require("./BESummaryRoomRow");
+const BESummaryAddonRow_1 = require("./BESummaryAddonRow");
+const BESummaryPerkBlock_1 = require("./BESummaryPerkBlock");
+const TransportDistanceFromHotelBlock_1 = require("./TransportDistanceFromHotelBlock");
+const hooks_1 = require("@frontend/hooks");
+const contexts_2 = require("@frontend/contexts");
+const ElementSortHook_1 = require("../../hooks/ElementSortHook");
+const classnames_1 = require("classnames");
+const HotelOverridesContext_1 = require("../../contexts/HotelOverridesContext");
+const TransportDistanceFromHotelBlockContainer = () => {
+    const { transportDistances } = react_1.useContext(HotelOverridesContext_1.HotelOverridesContext);
+    return (React.createElement("div", { className: classnames_1.default('u-flex u-flex-column u-marg-top', {
+            'u-flex-justify-around': Object.entries(transportDistances !== null && transportDistances !== void 0 ? transportDistances : {}).filter(([key, value]) => !!value).length <= 2,
+        }) },
+        React.createElement(TransportDistanceFromHotelBlock_1.default, { vertical: true })));
+};
+exports.BESummaryLayoutOrder = {
+    TransportDistanceBlock: {
+        component: React.createElement(TransportDistanceFromHotelBlockContainer, null),
+        priority: 5,
+    },
+    PerksBlock: {
+        component: (React.createElement("div", { className: "u-marg-bottom--light u-marg-top--heavy" },
+            React.createElement(BESummaryPerkBlock_1.BESummaryPerkBlock, { size: "desktop" }))),
+        priority: 10,
+    },
+};
+function BESummary(props) {
+    var _a, _b, _c, _d;
+    const basketContext = react_1.useContext(contexts_1.BasketContext);
+    const ccx = react_1.useContext(contexts_2.CompanyContext);
+    const { phoneNumberInSummary } = react_1.useContext(HotelOverridesContext_1.HotelOverridesContext);
+    const { hotel } = hooks_1.useCurrentHotel();
+    const selectedBasketRows = basketContext.getAllValidRows();
+    const addons = basketContext.basketAddonRows;
+    const { t } = react_i18next_1.useTranslation();
+    const addressLine1 = [(_a = hotel === null || hotel === void 0 ? void 0 : hotel.address) === null || _a === void 0 ? void 0 : _a.line1, (_b = hotel === null || hotel === void 0 ? void 0 : hotel.address) === null || _b === void 0 ? void 0 : _b.city];
+    const addressLine2 = [(_c = hotel === null || hotel === void 0 ? void 0 : hotel.address) === null || _c === void 0 ? void 0 : _c.postalCode, (_d = hotel === null || hotel === void 0 ? void 0 : hotel.address) === null || _d === void 0 ? void 0 : _d.state];
+    const { sortedComponents } = ElementSortHook_1.useElementSort(exports.BESummaryLayoutOrder);
+    const getAddressString = (val) => {
+        const line = val.filter((it) => !!it && it !== '0').join(', ');
+        if (line) {
+            return React.createElement(Text_1.default, { type: Text_1.TextType.Small }, line);
+        }
+        return null;
+    };
+    const showBasketItems = selectedBasketRows && selectedBasketRows.length;
+    return (React.createElement("div", { className: "booking-engine-summary" },
+        React.createElement("div", { className: "u-marg-bottom" },
+            React.createElement(Headline_1.default, { bold: true }, t(Translation_1.Translation.Misc.Summary))),
+        showBasketItems ? (React.createElement(React.Fragment, null,
+            selectedBasketRows.map((row, index) => {
+                if (!row.isValid())
+                    return;
+                return React.createElement(BESummaryRoomRow_1.default, { key: row.getID(), row: row, index: index, showImages: props.showImages });
+            }),
+            addons.length > 0 && (React.createElement(React.Fragment, null,
+                React.createElement(LineBreak_1.default, { noMargins: true, darker: true }),
+                React.createElement("div", { className: "u-marg-top" },
+                    React.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.DarkGrey },
+                        React.createElement("strong", null, "Add-on Items"))),
+                addons.map((row) => {
+                    const onRemoveClickHandler = () => {
+                        return basketContext.removeBasketAddonRow(row);
+                    };
+                    return React.createElement(BESummaryAddonRow_1.default, { row: row, key: row.getID(), onRemoveClick: onRemoveClickHandler });
+                }))))) : (React.createElement("div", { className: "u-marg-bottom" },
+            React.createElement("div", { className: "u-marg-bottom" },
+                React.createElement(Text_1.default, { type: Text_1.TextType.Small }, t(Translation_1.Translation.Step.General.YourCartIsEmpty))),
+            React.createElement("div", { style: { height: '150px', position: 'relative' } },
+                React.createElement(HotelLocationMap_1.default, null)),
+            React.createElement("div", { className: "u-marg-top" },
+                React.createElement("div", { className: "u-marg-bottom" },
+                    React.createElement(Text_1.default, { bold: true }, hotel.name)),
+                getAddressString(addressLine1),
+                getAddressString(addressLine2),
+                phoneNumberInSummary && (hotel === null || hotel === void 0 ? void 0 : hotel.phone) && React.createElement(Text_1.default, { type: Text_1.TextType.Small }, hotel.phone)))),
+        sortedComponents,
+        ccx.currentCurrency !== (hotel === null || hotel === void 0 ? void 0 : hotel.defaultCurrency) && (React.createElement(Alert_1.default, { iconAlignCenter: true, icon: Icon_1.IconType.Money, type: Alert_1.AlertType.LightGray },
+            React.createElement(Text_1.default, { type: Text_1.TextType.Small }, t(Translation_1.Translation.Step.General.AlternateCurrencyInformation)))),
+        React.createElement(LineBreak_1.default, { darker: true }),
+        React.createElement("div", { className: "u-marg-top--light" },
+            React.createElement(Text_1.default, { type: Text_1.TextType.Small, align: TextAlignment_1.TextAlign.Right }, t(Translation_1.Translation.Misc.Total)),
+            React.createElement(Headline_1.default, { bold: true, size: 'large', align: TextAlignment_1.TextAlign.Right },
+                React.createElement(Currency_1.default, null, basketContext.getTotalPrice())),
+            React.createElement(Text_1.default, { color: Color_1.Color.DarkGrey, type: Text_1.TextType.Small, align: TextAlignment_1.TextAlign.Right }, t(Translation_1.Translation.Step.Room.RoomInfo.IncludesTaxes)))));
+}
+exports.BESummary = BESummary;
+//# sourceMappingURL=BESummary.js.map

package/dist/src/components/summary/BESummary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BESummary.js","sourceRoot":"/","sources":["src/components/summary/BESummary.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { FC, useContext } from 'react';\nimport Headline from '../generic/Headline';\nimport Text, { TextType } from '../generic/Text';\nimport { Color } from '../../util/Color';\nimport Currency from '../generic/Currency';\nimport Alert, { AlertType } from '../generic/Alert';\nimport LineBreak from '../generic/LineBreak';\nimport { TextAlign } from '../../util/TextAlignment';\nimport { IconType } from '../generic/Icon';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from '../../translations/Translation';\nimport BasketRow from '../../models/BasketRow';\nimport { BasketContext } from '@frontend/contexts';\nimport BasketAddonRow from '../../models/BasketAddonRow';\nimport HotelLocationMap from '../generic/map/HotelLocationMap';\nimport BESummaryRoomRow from './BESummaryRoomRow';\nimport BESummaryAddonRow from './BESummaryAddonRow';\nimport { BESummaryPerkBlock } from './BESummaryPerkBlock';\nimport TransportDistanceFromHotelBlock from './TransportDistanceFromHotelBlock';\nimport { useCurrentHotel } from '@frontend/hooks';\nimport { CompanyContext } from '@frontend/contexts';\nimport { OrderableReactList, useElementSort } from '../../hooks/ElementSortHook';\nimport classNames from 'classnames';\nimport { HotelOverridesContext } from '../../contexts/HotelOverridesContext';\n\nexport interface BESummaryProps {\n    showImages?: boolean;\n}\n\nconst TransportDistanceFromHotelBlockContainer: FC = () => {\n    const { transportDistances } = useContext(HotelOverridesContext);\n\n    return (\n        <div\n            className={classNames('u-flex u-flex-column u-marg-top', {\n                'u-flex-justify-around': Object.entries(transportDistances ?? {}).filter(([key, value]) => !!value).length <= 2,\n            })}\n        >\n            <TransportDistanceFromHotelBlock vertical={true} />\n        </div>\n    );\n};\n\nexport const BESummaryLayoutOrder: OrderableReactList = {\n    TransportDistanceBlock: {\n        component: <TransportDistanceFromHotelBlockContainer />,\n        priority: 5,\n    },\n    PerksBlock: {\n        component: (\n            <div className=\"u-marg-bottom--light u-marg-top--heavy\">\n                <BESummaryPerkBlock size=\"desktop\" />\n            </div>\n        ),\n        priority: 10,\n    },\n};\n\nexport function BESummary(props: BESummaryProps) {\n    const basketContext = useContext(BasketContext);\n    const ccx = useContext(CompanyContext);\n    const { phoneNumberInSummary } = useContext(HotelOverridesContext);\n\n    const { hotel } = useCurrentHotel();\n\n    const selectedBasketRows = basketContext.getAllValidRows();\n\n    const addons = basketContext.basketAddonRows;\n\n    const { t } = useTranslation();\n\n    const addressLine1 = [hotel?.address?.line1, hotel?.address?.city];\n    const addressLine2 = [hotel?.address?.postalCode, hotel?.address?.state];\n\n    const { sortedComponents } = useElementSort(BESummaryLayoutOrder);\n\n    const getAddressString = (val: string[]) => {\n        const line = val.filter((it) => !!it && it !== '0').join(', ');\n\n        if (line) {\n            return <Text type={TextType.Small}>{line}</Text>;\n        }\n\n        return null;\n    };\n\n    const showBasketItems = selectedBasketRows && selectedBasketRows.length;\n\n    return (\n        <div className=\"booking-engine-summary\">\n            <div className=\"u-marg-bottom\">\n                <Headline bold={true}>{t(Translation.Misc.Summary)}</Headline>\n            </div>\n\n            {showBasketItems ? (\n                <>\n                    {selectedBasketRows.map((row: BasketRow, index: number) => {\n                        if (!row.isValid()) return;\n\n                        return <BESummaryRoomRow key={row.getID()} row={row} index={index} showImages={props.showImages} />;\n                    })}\n                    {addons.length > 0 && (\n                        <>\n                            <LineBreak noMargins={true} darker={true} />\n\n                            <div className=\"u-marg-top\">\n                                <Text type={TextType.Label} color={Color.DarkGrey}>\n                                    <strong>Add-on Items</strong>\n                                </Text>\n                            </div>\n\n                            {addons.map((row: BasketAddonRow) => {\n                                const onRemoveClickHandler = () => {\n                                    return basketContext.removeBasketAddonRow(row);\n                                };\n                                return <BESummaryAddonRow row={row} key={row.getID()} onRemoveClick={onRemoveClickHandler} />;\n                            })}\n                        </>\n                    )}\n                </>\n            ) : (\n                <div className=\"u-marg-bottom\">\n                    <div className=\"u-marg-bottom\">\n                        <Text type={TextType.Small}>{t(Translation.Step.General.YourCartIsEmpty)}</Text>\n                    </div>\n                    <div style={{ height: '150px', position: 'relative' }}>\n                        <HotelLocationMap />\n                    </div>\n                    <div className=\"u-marg-top\">\n                        <div className=\"u-marg-bottom\">\n                            <Text bold={true}>{hotel.name}</Text>\n                        </div>\n                        {getAddressString(addressLine1)}\n                        {getAddressString(addressLine2)}\n                        {phoneNumberInSummary && hotel?.phone && <Text type={TextType.Small}>{hotel.phone}</Text>}\n                    </div>\n                </div>\n            )}\n            {sortedComponents}\n\n            {ccx.currentCurrency !== hotel?.defaultCurrency && (\n                <Alert iconAlignCenter={true} icon={IconType.Money} type={AlertType.LightGray}>\n                    <Text type={TextType.Small}>{t(Translation.Step.General.AlternateCurrencyInformation)}</Text>\n                </Alert>\n            )}\n\n            <LineBreak darker={true} />\n\n            <div className=\"u-marg-top--light\">\n                <Text type={TextType.Small} align={TextAlign.Right}>\n                    {t(Translation.Misc.Total)}\n                </Text>\n                <Headline bold={true} size={'large'} align={TextAlign.Right}>\n                    <Currency>{basketContext.getTotalPrice()}</Currency>\n                </Headline>\n                <Text color={Color.DarkGrey} type={TextType.Small} align={TextAlign.Right}>\n                    {t(Translation.Step.Room.RoomInfo.IncludesTaxes)}\n                </Text>\n            </div>\n        </div>\n    );\n}\n"]}

package/dist/src/components/summary/BESummaryAddonRow.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import BasketAddonRow from '../../models/BasketAddonRow';
+interface BESummaryAddonRowProps {
+    row: BasketAddonRow;
+    onRemoveClick: () => void;
+}
+export default function BESummaryAddonRow(props: BESummaryAddonRowProps): JSX.Element;
+export {};