@roomstay/frontend 1.3.0

package/dist/src/pages/findReservation/FindReservationResults.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const react_router_1 = require("react-router");
+const react_1 = require("react");
+const BookingAPI_1 = require("../../api/BookingAPI");
+const Color_1 = require("../../util/Color");
+const LargeLoader_1 = require("../../components/generic/loader/LargeLoader");
+const AutoAutoHeight_1 = require("../../animations/AutoAutoHeight");
+const Alert_1 = require("../../components/generic/Alert");
+const ReservationRow_1 = require("./ReservationRow");
+const BackButton_1 = require("../../components/generic/BackButton");
+const Headline_1 = require("../../components/generic/Headline");
+const LineBreak_1 = require("../../components/generic/LineBreak");
+const Text_1 = require("../../components/generic/Text");
+const Currency_1 = require("../../components/generic/Currency");
+const Translation_1 = require("../../translations/Translation");
+const TextAlignment_1 = require("../../util/TextAlignment");
+const react_i18next_1 = require("react-i18next");
+const hooks_1 = require("@frontend/hooks");
+const CommonAddonSummary_1 = require("components/steps/common/CommonAddonSummary/CommonAddonSummary");
+const TotalCalculator_1 = require("util/TotalCalculator");
+function FindReservationResults() {
+    var _a;
+    const params = react_router_1.useParams();
+    const history = react_router_1.useHistory();
+    const { hotel } = hooks_1.useCurrentHotel();
+    const { t } = react_i18next_1.useTranslation();
+    const [bookingInformation, setBookingInformation] = react_1.useState(null);
+    const [isLoading, setIsLoading] = react_1.useState(false);
+    const [cancellationMessage, setCancellationMessage] = react_1.useState('');
+    const [cancellationTrigger, setCancellationTrigger] = react_1.useState(0);
+    const pushHistoryOnClick = () => {
+        history.push('../');
+    };
+    react_1.useEffect(() => {
+        let isCancelled = false;
+        setIsLoading(true);
+        if (params === null || params === void 0 ? void 0 : params.ref) {
+            BookingAPI_1.default.Reservation.findReservation(params.ref, params.email, hotel.hotelID)
+                .then((data) => {
+                if (!isCancelled) {
+                    setBookingInformation(data);
+                    setIsLoading(false);
+                }
+            })
+                .catch(() => {
+                history.push('/find-reservation/');
+            });
+        }
+        else {
+            history.push('/find-reservation/');
+        }
+        return () => {
+            isCancelled = true;
+        };
+    }, [cancellationTrigger]);
+    const addons = [];
+    const comments = [];
+    const total = react_1.useCallback(() => {
+        if (bookingInformation === null || bookingInformation === void 0 ? void 0 : bookingInformation.reservations) {
+            return TotalCalculator_1.calculateTotalForReservation(bookingInformation);
+        }
+        return 0;
+    }, [bookingInformation]);
+    return (React.createElement("div", { className: "container u-pad--heavy-plus u-pad-left u-pad-right" }, isLoading ? (React.createElement(LargeLoader_1.default, null)) : (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "u-marg-bottom" },
+            React.createElement(BackButton_1.default, { onClick: pushHistoryOnClick })),
+        React.createElement(Headline_1.default, { size: "extra-large" }, t(Translation_1.Translation.FindReservation.YourItinerary)),
+        React.createElement(Headline_1.default, { color: Color_1.Color.DarkGrey },
+            "#", bookingInformation === null || bookingInformation === void 0 ? void 0 :
+            bookingInformation.itineraryNumber),
+        React.createElement("div", { className: "row u-marg-top--heavy" },
+            React.createElement(AutoAutoHeight_1.default, { open: !!cancellationMessage },
+                React.createElement(Alert_1.default, null, cancellationMessage)), (_a = bookingInformation === null || bookingInformation === void 0 ? void 0 : bookingInformation.reservations) === null || _a === void 0 ? void 0 :
+            _a.map((obj) => {
+                if (obj.addons) {
+                    const nights = Object.keys(obj.nights);
+                    obj.addons.forEach((addon) => addons.push(Object.assign(Object.assign({}, addon), { nights: nights.length })));
+                }
+                if (obj.comments) {
+                    obj.comments.map((comment) => {
+                        comments.push(comment);
+                    });
+                }
+                return (React.createElement("div", { className: "col-lg-6", key: obj.reservationNumber },
+                    React.createElement(ReservationRow_1.default, { reservation: obj, key: obj.reservationNumber })));
+            })),
+        React.createElement(LineBreak_1.default, null),
+        React.createElement(CommonAddonSummary_1.CommonAddonSummary, { addons: addons }),
+        comments.length >= 1 && (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "u-marg-bottom" },
+                React.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.Grey }, t(Translation_1.Translation.Step.Confirmation.Comments))),
+            comments.map((comment, index) => (React.createElement(Text_1.default, { key: index, type: Text_1.TextType.Small }, comment))),
+            React.createElement(LineBreak_1.default, null))),
+        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, total)),
+        React.createElement(Text_1.default, { type: Text_1.TextType.Small, align: TextAlignment_1.TextAlign.Right, color: Color_1.Color.DarkGrey }, t(Translation_1.Translation.Step.Thanks.IncludingTaxes))))));
+}
+exports.default = FindReservationResults;
+//# sourceMappingURL=FindReservationResults.js.map

package/dist/src/pages/findReservation/FindReservationResults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FindReservationResults.js","sourceRoot":"/","sources":["src/pages/findReservation/FindReservationResults.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,+CAAqD;AACrD,iCAAyD;AACzD,qDAAuC;AACvC,4CAAyC;AAEzC,6EAAsE;AACtE,oEAA6D;AAC7D,0DAAmD;AACnD,qDAA8C;AAC9C,oEAA6D;AAC7D,gEAAyD;AACzD,kEAA2D;AAC3D,wDAA+D;AAC/D,gEAAyD;AACzD,gEAA6D;AAC7D,4DAAqD;AACrD,iDAA+C;AAC/C,2CAAkD;AAClD,sGAAmG;AACnG,0DAAoE;AAEpE,SAAwB,sBAAsB;;IAC1C,MAAM,MAAM,GAAQ,wBAAS,EAAE,CAAC;IAChC,MAAM,OAAO,GAAG,yBAAU,EAAE,CAAC;IAE7B,MAAM,EAAE,KAAK,EAAE,GAAG,uBAAe,EAAE,CAAC;IAEpC,MAAM,EAAE,CAAC,EAAE,GAAG,8BAAc,EAAE,CAAC;IAE/B,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,gBAAQ,CAAkB,IAAI,CAAC,CAAC;IACpF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,gBAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,gBAAQ,CAAC,EAAE,CAAC,CAAC;IACnE,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,gBAAQ,CAAC,CAAC,CAAC,CAAC;IAClE,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC5B,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,CAAC;IACF,iBAAS,CAAC,GAAG,EAAE;QACX,IAAI,WAAW,GAAG,KAAK,CAAC;QAExB,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,IAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,GAAG,EAAE;YACb,oBAAG,CAAC,WAAW,CAAC,eAAe,CAAC,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC;iBACnE,IAAI,CAAC,CAAC,IAAqB,EAAE,EAAE;gBAC5B,IAAI,CAAC,WAAW,EAAE;oBACd,qBAAqB,CAAC,IAAI,CAAC,CAAC;oBAC5B,YAAY,CAAC,KAAK,CAAC,CAAC;iBACvB;YACL,CAAC,CAAC;iBACD,KAAK,CAAC,GAAG,EAAE;gBACR,OAAO,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;YACvC,CAAC,CAAC,CAAC;SACV;aAAM;YACH,OAAO,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;SACtC;QAED,OAAO,GAAG,EAAE;YACR,WAAW,GAAG,IAAI,CAAC;QACvB,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAC;IAE1B,MAAM,MAAM,GAA0B,EAAE,CAAC;IACzC,MAAM,QAAQ,GAAa,EAAE,CAAC;IAE9B,MAAM,KAAK,GAAG,mBAAW,CAAC,GAAG,EAAE;QAC3B,IAAI,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,YAAY,EAAE;YAClC,OAAO,8CAA4B,CAAC,kBAAkB,CAAC,CAAC;SAC3D;QAED,OAAO,CAAC,CAAC;IACb,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAEzB,OAAO,CACH,6BAAK,SAAS,EAAC,oDAAoD,IAC9D,SAAS,CAAC,CAAC,CAAC,CACT,oBAAC,qBAAW,OAAG,CAClB,CAAC,CAAC,CAAC,CACA;QACI,6BAAK,SAAS,EAAC,eAAe;YAC1B,oBAAC,oBAAU,IAAC,OAAO,EAAE,kBAAkB,GAAI,CACzC;QACN,oBAAC,kBAAQ,IAAC,IAAI,EAAC,aAAa,IAAE,CAAC,CAAC,yBAAW,CAAC,eAAe,CAAC,aAAa,CAAC,CAAY;QACtF,oBAAC,kBAAQ,IAAC,KAAK,EAAE,aAAK,CAAC,QAAQ;iBAAI,kBAAkB,aAAlB,kBAAkB;YAAlB,kBAAkB,CAAE,eAAe,CAAY;QAClF,6BAAK,SAAS,EAAC,uBAAuB;YAClC,oBAAC,wBAAc,IAAC,IAAI,EAAE,CAAC,CAAC,mBAAmB;gBACvC,oBAAC,eAAK,QAAE,mBAAmB,CAAS,CACvB,QAChB,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,YAAY;eAAE,GAAG,CAAC,CAAC,GAAmB,EAAE,EAAE;gBAC3D,IAAI,GAAG,CAAC,MAAM,EAAE;oBACZ,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;oBACvC,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,iCAAM,KAAK,KAAE,MAAM,EAAE,MAAM,CAAC,MAAM,IAAG,CAAC,CAAC;iBACnF;gBAED,IAAI,GAAG,CAAC,QAAQ,EAAE;oBACd,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAe,EAAE,EAAE;wBACjC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;oBAC3B,CAAC,CAAC,CAAC;iBACN;gBAED,OAAO,CACH,6BAAK,SAAS,EAAC,UAAU,EAAC,GAAG,EAAE,GAAG,CAAC,iBAAiB;oBAChD,oBAAC,wBAAc,IAAC,WAAW,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,iBAAiB,GAAI,CAC9D,CACT,CAAC;YACN,CAAC,EACC;QACN,oBAAC,mBAAS,OAAG;QACb,oBAAC,uCAAkB,IAAC,MAAM,EAAE,MAAM,GAAI;QACrC,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,CACrB;YACI,6BAAK,SAAS,EAAC,eAAe;gBAC1B,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,aAAK,CAAC,IAAI,IACxC,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CACvC,CACL;YACL,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAa,EAAE,EAAE,CAAC,CACtC,oBAAC,cAAI,IAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,eAAQ,CAAC,KAAK,IACjC,OAAO,CACL,CACV,CAAC;YACF,oBAAC,mBAAS,OAAG,CACd,CACN;QACD,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,yBAAS,CAAC,KAAK,IAC7C,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CACvB;QACP,oBAAC,kBAAQ,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,yBAAS,CAAC,KAAK;YACvD,oBAAC,kBAAQ,QAAE,KAAK,CAAY,CACrB;QACX,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,yBAAS,CAAC,KAAK,EAAE,KAAK,EAAE,aAAK,CAAC,QAAQ,IACpE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,CACvC,CACR,CACN,CACC,CACT,CAAC;AACN,CAAC;AAnHD,yCAmHC","sourcesContent":["import * as React from 'react';\nimport { useParams, useHistory } from 'react-router';\nimport { useEffect, useState, useCallback } from 'react';\nimport API from '../../api/BookingAPI';\nimport { Color } from '../../util/Color';\nimport ReservationsDTO, { ReservationDTO, ReservationAddonDTO } from '../../models/Api/ReservationsDTO';\nimport LargeLoader from '../../components/generic/loader/LargeLoader';\nimport AutoAutoHeight from '../../animations/AutoAutoHeight';\nimport Alert from '../../components/generic/Alert';\nimport ReservationRow from './ReservationRow';\nimport BackButton from '../../components/generic/BackButton';\nimport Headline from '../../components/generic/Headline';\nimport LineBreak from '../../components/generic/LineBreak';\nimport Text, { TextType } from '../../components/generic/Text';\nimport Currency from '../../components/generic/Currency';\nimport { Translation } from '../../translations/Translation';\nimport { TextAlign } from '../../util/TextAlignment';\nimport { useTranslation } from 'react-i18next';\nimport { useCurrentHotel } from '@frontend/hooks';\nimport { CommonAddonSummary } from 'components/steps/common/CommonAddonSummary/CommonAddonSummary';\nimport { calculateTotalForReservation } from 'util/TotalCalculator';\n\nexport default function FindReservationResults() {\n    const params: any = useParams();\n    const history = useHistory();\n\n    const { hotel } = useCurrentHotel();\n\n    const { t } = useTranslation();\n\n    const [bookingInformation, setBookingInformation] = useState<ReservationsDTO>(null);\n    const [isLoading, setIsLoading] = useState(false);\n\n    const [cancellationMessage, setCancellationMessage] = useState('');\n    const [cancellationTrigger, setCancellationTrigger] = useState(0);\n    const pushHistoryOnClick = () => {\n        history.push('../');\n    };\n    useEffect(() => {\n        let isCancelled = false;\n\n        setIsLoading(true);\n        if (params?.ref) {\n            API.Reservation.findReservation(params.ref, params.email, hotel.hotelID)\n                .then((data: ReservationsDTO) => {\n                    if (!isCancelled) {\n                        setBookingInformation(data);\n                        setIsLoading(false);\n                    }\n                })\n                .catch(() => {\n                    history.push('/find-reservation/');\n                });\n        } else {\n            history.push('/find-reservation/');\n        }\n\n        return () => {\n            isCancelled = true;\n        };\n    }, [cancellationTrigger]);\n\n    const addons: ReservationAddonDTO[] = [];\n    const comments: string[] = [];\n\n    const total = useCallback(() => {\n        if (bookingInformation?.reservations) {\n            return calculateTotalForReservation(bookingInformation);\n        }\n\n        return 0;\n    }, [bookingInformation]);\n\n    return (\n        <div className=\"container u-pad--heavy-plus u-pad-left u-pad-right\">\n            {isLoading ? (\n                <LargeLoader />\n            ) : (\n                <>\n                    <div className=\"u-marg-bottom\">\n                        <BackButton onClick={pushHistoryOnClick} />\n                    </div>\n                    <Headline size=\"extra-large\">{t(Translation.FindReservation.YourItinerary)}</Headline>\n                    <Headline color={Color.DarkGrey}>#{bookingInformation?.itineraryNumber}</Headline>\n                    <div className=\"row u-marg-top--heavy\">\n                        <AutoAutoHeight open={!!cancellationMessage}>\n                            <Alert>{cancellationMessage}</Alert>\n                        </AutoAutoHeight>\n                        {bookingInformation?.reservations?.map((obj: ReservationDTO) => {\n                            if (obj.addons) {\n                                const nights = Object.keys(obj.nights);\n                                obj.addons.forEach((addon) => addons.push({ ...addon, nights: nights.length }));\n                            }\n\n                            if (obj.comments) {\n                                obj.comments.map((comment: string) => {\n                                    comments.push(comment);\n                                });\n                            }\n\n                            return (\n                                <div className=\"col-lg-6\" key={obj.reservationNumber}>\n                                    <ReservationRow reservation={obj} key={obj.reservationNumber} />\n                                </div>\n                            );\n                        })}\n                    </div>\n                    <LineBreak />\n                    <CommonAddonSummary addons={addons} />\n                    {comments.length >= 1 && (\n                        <>\n                            <div className=\"u-marg-bottom\">\n                                <Text type={TextType.Label} color={Color.Grey}>\n                                    {t(Translation.Step.Confirmation.Comments)}\n                                </Text>\n                            </div>\n                            {comments.map((comment, index: number) => (\n                                <Text key={index} type={TextType.Small}>\n                                    {comment}\n                                </Text>\n                            ))}\n                            <LineBreak />\n                        </>\n                    )}\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>{total}</Currency>\n                    </Headline>\n                    <Text type={TextType.Small} align={TextAlign.Right} color={Color.DarkGrey}>\n                        {t(Translation.Step.Thanks.IncludingTaxes)}\n                    </Text>\n                </>\n            )}\n        </div>\n    );\n}\n"]}

package/dist/src/pages/findReservation/ReservationRow.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ReservationDTO } from '../../models/Api/ReservationsDTO';
+interface ReservationRowProps {
+    reservation: ReservationDTO;
+    onCancelled?: () => void;
+}
+export default function ReservationRow(props: ReservationRowProps): JSX.Element;
+export {};

package/dist/src/pages/findReservation/ReservationRow.js

@@ -0,0 +1,147 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const dayjs = require("dayjs");
+const StringHelper_1 = require("../../util/StringHelper");
+const Translation_1 = require("../../translations/Translation");
+const ImageGallerySlider_1 = require("../../components/steps/room/ImageGallerySlider");
+const Color_1 = require("../../util/Color");
+const Text_1 = require("../../components/generic/Text");
+const Icon_1 = require("../../components/generic/Icon");
+const BEButton_1 = require("../../components/generic/BEButton");
+const Currency_1 = require("../../components/generic/Currency");
+const react_i18next_1 = require("react-i18next");
+const react_1 = require("react");
+const ReservationRowModal_1 = require("./ReservationRowModal");
+const BookingAPI_1 = require("../../api/BookingAPI");
+const DataLayer_1 = require("../../util/DataLayer");
+const ConfirmationModal_1 = require("../../components/generic/modal/ConfirmationModal");
+const ErrorContext_1 = require("../../contexts/ErrorContext");
+const hooks_1 = require("@frontend/hooks");
+function ReservationRow(props) {
+    var _a;
+    const { t } = react_i18next_1.useTranslation();
+    const { hotel } = hooks_1.useCurrentHotel();
+    const obj = props.reservation;
+    const [isModalOpen, setIsModalOpen] = react_1.useState(false);
+    const [isCancelled, setIsCancelled] = react_1.useState(obj.status === 'Cancelled');
+    const [isCancelLoading, setIsCancelLoading] = react_1.useState(false);
+    const [confirmOpen, setConfirmOpen] = react_1.useState(false);
+    let adultsAndChildren = StringHelper_1.default.pluralWithDictAndCount(obj.guestCounts.adults, Translation_1.Translation.Step.Date.Adult, t);
+    if (obj.guestCounts.children) {
+        adultsAndChildren += ', ' + StringHelper_1.default.pluralWithDictAndCount(obj.guestCounts.children, Translation_1.Translation.Step.Date.Child, t);
+    }
+    const nightKeys = Object.keys(obj.nights);
+    const openModalOnClick = () => {
+        setIsModalOpen(true);
+    };
+    const closeModalOnClick = () => {
+        setIsModalOpen(false);
+    };
+    const confirmModalOnClick = () => {
+        setConfirmOpen(true);
+    };
+    const onConfirmHandler = () => {
+        cancelRow();
+        setConfirmOpen(false);
+    };
+    const openConfirmationHandler = () => {
+        setConfirmOpen(false);
+    };
+    const firstNight = dayjs(nightKeys[0]);
+    const lastNight = dayjs(nightKeys[nightKeys.length - 1]).add(1, 'day');
+    let images = obj.images;
+    if ((!images || !images.length) && (hotel === null || hotel === void 0 ? void 0 : hotel.rooms[obj.roomCode])) {
+        images = hotel === null || hotel === void 0 ? void 0 : hotel.rooms[obj.roomCode].images;
+    }
+    const cancelRow = () => {
+        setIsCancelLoading(true);
+        BookingAPI_1.default.Reservation.cancelReservation(obj.reservationNumber, obj.guest.email, hotel.hotelID)
+            .then(() => {
+            DataLayer_1.default.instance.sendCancellation(obj.reservationNumber);
+            setIsCancelled(true);
+            setIsCancelLoading(false);
+            if (props.onCancelled) {
+                props.onCancelled();
+            }
+        })
+            .catch((ex) => {
+            ErrorContext_1.ErrorHandler.add({
+                title: 'Error while cancelling reservation',
+                message: ex.Message,
+            });
+        });
+    };
+    const roomName = obj.roomType ? obj.roomType : (_a = hotel.rooms[obj.roomCode]) === null || _a === void 0 ? void 0 : _a.name;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "reservation-row" },
+            React.createElement("div", { className: "room-details +is-open " },
+                React.createElement("div", { className: "room-details--image" },
+                    React.createElement(ImageGallerySlider_1.default, { images: images })),
+                React.createElement("div", { className: "room-details--content u-pad--heavy u-pad@m-" },
+                    React.createElement("div", { className: "u-marg-bottom" },
+                        React.createElement("div", { className: "room-details--content-title u-marg-bottom--light" }, !isCancelled ? (React.createElement(Text_1.default, null,
+                            React.createElement("strong", null, roomName),
+                            React.createElement("small", { style: { color: Color_1.Color.Grey } },
+                                " #",
+                                obj.reservationNumber))) : (React.createElement(Text_1.default, null,
+                            React.createElement("del", null,
+                                React.createElement("strong", null, roomName)),
+                            React.createElement("small", { style: { color: Color_1.Color.Alert } }, " Cancelled")))),
+                        React.createElement("div", { className: "room-details--content-description u-marg-bottom--light" },
+                            React.createElement(Text_1.default, { color: Color_1.Color.DarkGrey, type: Text_1.TextType.Small }, React.createElement(React.Fragment, null,
+                                hotel.name,
+                                " - ",
+                                hotel.address.line1)))),
+                    React.createElement("div", { className: "" },
+                        React.createElement("ul", null,
+                            React.createElement("li", { className: "u-flex justify-content-start u-marg-bottom--light" },
+                                React.createElement(Icon_1.default, { color: Color_1.Color.Grey, icon: Icon_1.IconType.Person }),
+                                React.createElement("div", { className: "u-marg-left--light" },
+                                    React.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                                        obj.guest.firstName,
+                                        " ",
+                                        obj.guest.lastName,
+                                        " ",
+                                        React.createElement("span", { style: { color: Color_1.Color.DarkGrey } },
+                                            "- ",
+                                            adultsAndChildren)))),
+                            React.createElement("li", { className: "u-flex justify-content-start u-marg-bottom--light" },
+                                React.createElement(Icon_1.default, { icon: Icon_1.IconType.Email, color: Color_1.Color.Grey }),
+                                React.createElement("div", { className: "u-marg-left--light" },
+                                    React.createElement(Text_1.default, { type: Text_1.TextType.Small }, obj.guest.email))),
+                            React.createElement("li", { className: "u-flex justify-content-start u-marg-bottom--light" },
+                                React.createElement(Icon_1.default, { icon: Icon_1.IconType.Calendar, color: Color_1.Color.Grey }),
+                                React.createElement("div", { className: "u-marg-left--light" },
+                                    React.createElement(Text_1.default, { type: Text_1.TextType.Small }, firstNight.format('dddd, MMM D, YYYY')),
+                                    React.createElement(Text_1.default, { type: Text_1.TextType.Small }, lastNight.format('dddd, MMM D, YYYY')))),
+                            React.createElement("li", { className: "u-flex justify-content-start" },
+                                React.createElement(Icon_1.default, { icon: Icon_1.IconType.CreditCard, color: Color_1.Color.Grey }),
+                                React.createElement("div", { className: "u-marg-left--light" },
+                                    React.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                                        "\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 ",
+                                        obj.paymentCard.last4,
+                                        " ",
+                                        React.createElement("span", { style: { color: Color_1.Color.DarkGrey } },
+                                            "(",
+                                            obj.paymentCard.type,
+                                            ")")))))))),
+            React.createElement("div", { className: "reservation-row--actions" },
+                React.createElement("div", { className: "u-flex justify-content-start align-items-center" },
+                    React.createElement("div", { className: "u-marg-right--heavy u-inline-flex" },
+                        React.createElement(BEButton_1.default, { icon: Icon_1.IconType.ArrowRight2, isText: true, primary: true, size: "tiny", iconPosition: "right", onClick: openModalOnClick }, t(Translation_1.Translation.Step.Room.RoomInfo.MoreDetails))),
+                    React.createElement("div", { className: "u-inline-flex" },
+                        React.createElement(BEButton_1.default, { isText: true, size: "tiny", isLoading: isCancelLoading, disabled: !obj.isCancelable || isCancelled, textColor: Color_1.Color.DarkGrey, onClick: confirmModalOnClick }, "Cancel"))),
+                React.createElement("div", { className: "u-flex u-flex-direction-row align-items-center" },
+                    React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.DarkGrey }, t(Translation_1.Translation.Misc.Total)),
+                    React.createElement("div", { className: "u-marg-left" }, !isCancelled ? (React.createElement(Text_1.default, { color: Color_1.Color.Navy },
+                        React.createElement("strong", null,
+                            React.createElement(Currency_1.default, null, obj.total.afterTax)))) : (React.createElement(Text_1.default, { color: Color_1.Color.Navy },
+                        React.createElement("del", null,
+                            React.createElement("strong", { className: "u-flex u-flex-direction-row align-items-center" },
+                                React.createElement(Currency_1.default, null, obj.total.afterTax))))))))),
+        React.createElement(ReservationRowModal_1.default, { open: isModalOpen, onClose: closeModalOnClick, reservation: props.reservation, images: images }),
+        React.createElement(ConfirmationModal_1.default, { open: confirmOpen, message: "Are you sure you want to cancel this reservation?", onConfirm: onConfirmHandler, onClose: openConfirmationHandler })));
+}
+exports.default = ReservationRow;
+//# sourceMappingURL=ReservationRow.js.map

package/dist/src/pages/findReservation/ReservationRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReservationRow.js","sourceRoot":"/","sources":["src/pages/findReservation/ReservationRow.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { ReservationDTO } from '../../models/Api/ReservationsDTO';\nimport * as dayjs from 'dayjs';\nimport StringHelper from '../../util/StringHelper';\nimport { Translation } from '../../translations/Translation';\nimport ImageGallerySlider from '../../components/steps/room/ImageGallerySlider';\nimport { Color } from '../../util/Color';\nimport Text, { TextType } from '../../components/generic/Text';\nimport Icon, { IconType } from '../../components/generic/Icon';\nimport BEButton from '../../components/generic/BEButton';\nimport Currency from '../../components/generic/Currency';\nimport { useTranslation } from 'react-i18next';\nimport { useState } from 'react';\nimport ReservationRowModal from './ReservationRowModal';\nimport API from '../../api/BookingAPI';\nimport DataLayer from '../../util/DataLayer';\nimport ConfirmationModal from '../../components/generic/modal/ConfirmationModal';\nimport RoomstayThemeEngine from '../../providers/RoomstayThemeEngine';\nimport { ErrorHandler } from '../../contexts/ErrorContext';\nimport { useCurrentHotel } from '@frontend/hooks';\n\ninterface ReservationRowProps {\n    reservation: ReservationDTO;\n    onCancelled?: () => void;\n}\n\nexport default function ReservationRow(props: ReservationRowProps) {\n    const { t } = useTranslation();\n    const { hotel } = useCurrentHotel();\n\n    const obj = props.reservation;\n\n    const [isModalOpen, setIsModalOpen] = useState(false);\n    const [isCancelled, setIsCancelled] = useState(obj.status === 'Cancelled');\n    const [isCancelLoading, setIsCancelLoading] = useState(false);\n\n    const [confirmOpen, setConfirmOpen] = useState(false);\n\n    let adultsAndChildren = StringHelper.pluralWithDictAndCount(obj.guestCounts.adults, Translation.Step.Date.Adult, t);\n\n    if (obj.guestCounts.children) {\n        adultsAndChildren += ', ' + StringHelper.pluralWithDictAndCount(obj.guestCounts.children, Translation.Step.Date.Child, t);\n    }\n\n    const nightKeys = Object.keys(obj.nights);\n\n    const openModalOnClick = () => {\n        setIsModalOpen(true);\n    };\n    const closeModalOnClick = () => {\n        setIsModalOpen(false);\n    };\n    const confirmModalOnClick = () => {\n        setConfirmOpen(true);\n    };\n    const onConfirmHandler = () => {\n        cancelRow();\n        setConfirmOpen(false);\n    };\n    const openConfirmationHandler = () => {\n        setConfirmOpen(false);\n    };\n\n    const firstNight = dayjs(nightKeys[0]);\n    const lastNight = dayjs(nightKeys[nightKeys.length - 1]).add(1, 'day');\n\n    let images: string[] = obj.images;\n\n    if ((!images || !images.length) && hotel?.rooms[obj.roomCode]) {\n        images = hotel?.rooms[obj.roomCode].images;\n    }\n\n    const cancelRow = () => {\n        setIsCancelLoading(true);\n\n        API.Reservation.cancelReservation(obj.reservationNumber, obj.guest.email, hotel.hotelID)\n            .then(() => {\n                DataLayer.instance.sendCancellation(obj.reservationNumber);\n\n                setIsCancelled(true);\n                setIsCancelLoading(false);\n\n                if (props.onCancelled) {\n                    props.onCancelled();\n                }\n            })\n            .catch((ex) => {\n                ErrorHandler.add({\n                    title: 'Error while cancelling reservation',\n                    message: ex.Message,\n                });\n            });\n    };\n\n    const roomName = obj.roomType ? obj.roomType : hotel.rooms[obj.roomCode]?.name;\n\n    return (\n        <>\n            <div className=\"reservation-row\">\n                <div className=\"room-details +is-open \">\n                    <div className=\"room-details--image\">\n                        <ImageGallerySlider images={images} />\n                    </div>\n                    <div className=\"room-details--content u-pad--heavy u-pad@m-\">\n                        <div className=\"u-marg-bottom\">\n                            <div className=\"room-details--content-title u-marg-bottom--light\">\n                                {!isCancelled ? (\n                                    <Text>\n                                        <strong>{roomName}</strong>\n                                        <small style={{ color: Color.Grey }}> #{obj.reservationNumber}</small>\n                                    </Text>\n                                ) : (\n                                    <Text>\n                                        <del>\n                                            <strong>{roomName}</strong>\n                                        </del>\n                                        <small style={{ color: Color.Alert }}> Cancelled</small>\n                                    </Text>\n                                )}\n                            </div>\n                            <div className=\"room-details--content-description u-marg-bottom--light\">\n                                <Text color={Color.DarkGrey} type={TextType.Small}>\n                                    {\n                                        <>\n                                            {hotel.name} - {hotel.address.line1}\n                                        </>\n                                    }\n                                </Text>\n                            </div>\n                        </div>\n\n                        <div className=\"\">\n                            <ul>\n                                <li className=\"u-flex justify-content-start u-marg-bottom--light\">\n                                    <Icon color={Color.Grey} icon={IconType.Person} />\n                                    <div className=\"u-marg-left--light\">\n                                        <Text type={TextType.Small}>\n                                            {obj.guest.firstName} {obj.guest.lastName} <span style={{ color: Color.DarkGrey }}>- {adultsAndChildren}</span>\n                                        </Text>\n                                    </div>\n                                </li>\n                                <li className=\"u-flex justify-content-start u-marg-bottom--light\">\n                                    <Icon icon={IconType.Email} color={Color.Grey} />\n                                    <div className=\"u-marg-left--light\">\n                                        <Text type={TextType.Small}>{obj.guest.email}</Text>\n                                    </div>\n                                </li>\n                                <li className=\"u-flex justify-content-start u-marg-bottom--light\">\n                                    <Icon icon={IconType.Calendar} color={Color.Grey} />\n                                    <div className=\"u-marg-left--light\">\n                                        <Text type={TextType.Small}>{firstNight.format('dddd, MMM D, YYYY')}</Text>\n                                        <Text type={TextType.Small}>{lastNight.format('dddd, MMM D, YYYY')}</Text>\n                                    </div>\n                                </li>\n                                <li className=\"u-flex justify-content-start\">\n                                    <Icon icon={IconType.CreditCard} color={Color.Grey} />\n                                    <div className=\"u-marg-left--light\">\n                                        <Text type={TextType.Small}>\n                                            •••• •••• •••• {obj.paymentCard.last4} <span style={{ color: Color.DarkGrey }}>({obj.paymentCard.type})</span>\n                                        </Text>\n                                    </div>\n                                </li>\n                            </ul>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"reservation-row--actions\">\n                    <div className=\"u-flex justify-content-start align-items-center\">\n                        <div className=\"u-marg-right--heavy u-inline-flex\">\n                            <BEButton icon={IconType.ArrowRight2} isText={true} primary={true} size=\"tiny\" iconPosition=\"right\" onClick={openModalOnClick}>\n                                {t(Translation.Step.Room.RoomInfo.MoreDetails)}\n                            </BEButton>\n                        </div>\n                        {\n                            <div className=\"u-inline-flex\">\n                                <BEButton\n                                    isText={true}\n                                    size=\"tiny\"\n                                    isLoading={isCancelLoading}\n                                    disabled={!obj.isCancelable || isCancelled}\n                                    textColor={Color.DarkGrey}\n                                    onClick={confirmModalOnClick}\n                                >\n                                    Cancel\n                                </BEButton>\n                            </div>\n                        }\n                    </div>\n                    <div className=\"u-flex u-flex-direction-row align-items-center\">\n                        <Text type={TextType.Small} color={Color.DarkGrey}>\n                            {t(Translation.Misc.Total)}\n                        </Text>\n                        <div className=\"u-marg-left\">\n                            {!isCancelled ? (\n                                <Text color={Color.Navy}>\n                                    <strong>\n                                        <Currency>{obj.total.afterTax}</Currency>\n                                    </strong>\n                                </Text>\n                            ) : (\n                                <Text color={Color.Navy}>\n                                    <del>\n                                        <strong className=\"u-flex u-flex-direction-row align-items-center\">\n                                            <Currency>{obj.total.afterTax}</Currency>\n                                        </strong>\n                                    </del>\n                                </Text>\n                            )}\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <ReservationRowModal open={isModalOpen} onClose={closeModalOnClick} reservation={props.reservation} images={images} />\n            <ConfirmationModal open={confirmOpen} message=\"Are you sure you want to cancel this reservation?\" onConfirm={onConfirmHandler} onClose={openConfirmationHandler} />\n        </>\n    );\n}\n"]}

package/dist/src/pages/findReservation/ReservationRowModal.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ReservationDTO } from '../../models/Api/ReservationsDTO';
+interface ReservationRowModalProps {
+    reservation: ReservationDTO;
+    onClose: () => void;
+    open: boolean;
+    images?: string[];
+}
+export default function ReservationRowModal(props: ReservationRowModalProps): JSX.Element;
+export {};

package/dist/src/pages/findReservation/ReservationRowModal.js

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const SimpleModal_1 = require("../../components/generic/modal/SimpleModal");
+const ImageGallerySlider_1 = require("../../components/steps/room/ImageGallerySlider");
+const Headline_1 = require("../../components/generic/Headline");
+const Text_1 = require("../../components/generic/Text");
+const Icon_1 = require("../../components/generic/Icon");
+const Color_1 = require("../../util/Color");
+const StringHelper_1 = require("../../util/StringHelper");
+const Translation_1 = require("../../translations/Translation");
+const dayjs = require("dayjs");
+const react_i18next_1 = require("react-i18next");
+const LineBreak_1 = require("../../components/generic/LineBreak");
+const Currency_1 = require("../../components/generic/Currency");
+const hooks_1 = require("@frontend/hooks");
+function ReservationRowModal(props) {
+    var _a, _b;
+    const { hotel } = hooks_1.useCurrentHotel();
+    const { reservation } = props;
+    const { t } = react_i18next_1.useTranslation();
+    const images = reservation.images && reservation.images.length ? reservation.images : (_a = props.images) !== null && _a !== void 0 ? _a : [];
+    let adultsAndChildren = StringHelper_1.default.pluralWithDictAndCount(reservation.guestCounts.adults, Translation_1.Translation.Step.Date.Adult, t);
+    if (reservation.guestCounts.children) {
+        adultsAndChildren += ', ' + StringHelper_1.default.pluralWithDictAndCount(reservation.guestCounts.children, Translation_1.Translation.Step.Date.Child, t);
+    }
+    const nightKeys = Object.keys(reservation.nights);
+    const firstNight = dayjs(nightKeys[0]);
+    const lastNight = dayjs(nightKeys[nightKeys.length - 1]).add(1, 'day');
+    const guaranteePolicy = reservation.guaranteePolicy;
+    const cancelPolicy = reservation.cancelPolicy;
+    const roomName = reservation.roomType ? reservation.roomType : (_b = hotel.rooms[reservation.roomCode]) === null || _b === void 0 ? void 0 : _b.name;
+    return (React.createElement(SimpleModal_1.default, { open: props.open, onClose: props.onClose, title: `Reservation #${props.reservation.reservationNumber}`, size: SimpleModal_1.SimpleModalSize.Small },
+        React.createElement(React.Fragment, null,
+            React.createElement("div", { style: { height: '300px' } },
+                React.createElement(ImageGallerySlider_1.default, { images: images })),
+            React.createElement("div", { className: "u-marg-heavy u-marg@m-" },
+                React.createElement("div", { className: "u-marg-bottom" },
+                    React.createElement(Headline_1.default, { size: 'large', bold: true }, roomName),
+                    React.createElement(Text_1.default, { type: Text_1.TextType.Small }, reservation.rate)),
+                React.createElement("ul", null,
+                    React.createElement("li", { className: "u-flex justify-content-start u-marg-bottom--light" },
+                        React.createElement(Icon_1.default, { color: Color_1.Color.Grey, icon: Icon_1.IconType.Person }),
+                        React.createElement("div", { className: "u-marg-left--light" },
+                            React.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                                reservation.guest.firstName,
+                                " ",
+                                reservation.guest.lastName,
+                                " ",
+                                React.createElement("span", { style: { color: Color_1.Color.DarkGrey } },
+                                    "- ",
+                                    adultsAndChildren)))),
+                    React.createElement("li", { className: "u-flex justify-content-start u-marg-bottom--light" },
+                        React.createElement(Icon_1.default, { icon: Icon_1.IconType.Email, color: Color_1.Color.Grey }),
+                        React.createElement("div", { className: "u-marg-left--light" },
+                            React.createElement(Text_1.default, { type: Text_1.TextType.Small }, reservation.guest.email))),
+                    React.createElement("li", { className: "u-flex justify-content-start u-marg-bottom--light" },
+                        React.createElement(Icon_1.default, { icon: Icon_1.IconType.Calendar, color: Color_1.Color.Grey }),
+                        React.createElement("div", { className: "u-marg-left--light" },
+                            React.createElement(Text_1.default, { type: Text_1.TextType.Small }, firstNight.format('dddd, MMM D, YYYY')),
+                            React.createElement(Text_1.default, { type: Text_1.TextType.Small }, lastNight.format('dddd, MMM D, YYYY')))),
+                    React.createElement("li", { className: "u-flex justify-content-start" },
+                        React.createElement(Icon_1.default, { icon: Icon_1.IconType.CreditCard, color: Color_1.Color.Grey }),
+                        React.createElement("div", { className: "u-marg-left--light" },
+                            React.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                                "\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 ",
+                                reservation.paymentCard.last4,
+                                " ",
+                                React.createElement("span", { style: { color: Color_1.Color.DarkGrey } },
+                                    "(",
+                                    reservation.paymentCard.type,
+                                    ")"))))),
+                React.createElement(LineBreak_1.default, null),
+                nightKeys.map((night) => {
+                    const currentDay = dayjs(night);
+                    const currentDayFormatted = currentDay.format('dddd, MMM DD, YYYY');
+                    return (React.createElement("div", { className: "u-flex u-marg-bottom", key: reservation.reservationNumber },
+                        React.createElement(Text_1.default, null, currentDayFormatted),
+                        React.createElement(Text_1.default, { color: Color_1.Color.DarkGrey },
+                            React.createElement(Currency_1.default, null, reservation.nights[night].total))));
+                }),
+                React.createElement("div", { className: "u-flex" },
+                    React.createElement(Text_1.default, null, lastNight.format('dddd, MMM DD, YYYY')),
+                    React.createElement(Text_1.default, { color: Color_1.Color.Success }, "Check Out")),
+                React.createElement(LineBreak_1.default, null),
+                React.createElement("div", null,
+                    guaranteePolicy && (React.createElement("div", { className: "u-marg-bottom--heavy" },
+                        React.createElement("div", { className: "u-marg-bottom--light" },
+                            React.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                                React.createElement("strong", null, t(Translation_1.Translation.Misc.GuaranteePolicy)))),
+                        React.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                            React.createElement("span", { className: "u-clear-font-weight", dangerouslySetInnerHTML: { __html: guaranteePolicy } })))),
+                    React.createElement("div", { className: "u-marg-bottom--heavy" },
+                        React.createElement("div", { className: "u-marg-bottom--light" },
+                            React.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                                React.createElement("strong", null, t(Translation_1.Translation.Misc.CancellationPolicy)))),
+                        React.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                            React.createElement("span", { className: "u-clear-font-weight", dangerouslySetInnerHTML: { __html: cancelPolicy } }))))))));
+}
+exports.default = ReservationRowModal;
+//# sourceMappingURL=ReservationRowModal.js.map

package/dist/src/pages/findReservation/ReservationRowModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReservationRowModal.js","sourceRoot":"/","sources":["src/pages/findReservation/ReservationRowModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { ReservationDTO } from '../../models/Api/ReservationsDTO';\nimport SimpleModal, { SimpleModalSize } from '../../components/generic/modal/SimpleModal';\nimport ImageGallerySlider from '../../components/steps/room/ImageGallerySlider';\nimport Headline from '../../components/generic/Headline';\nimport Text, { TextType } from '../../components/generic/Text';\nimport Icon, { IconType } from '../../components/generic/Icon';\nimport { Color } from '../../util/Color';\nimport StringHelper from '../../util/StringHelper';\nimport { Translation } from '../../translations/Translation';\nimport * as dayjs from 'dayjs';\nimport { useTranslation } from 'react-i18next';\nimport LineBreak from '../../components/generic/LineBreak';\nimport Currency from '../../components/generic/Currency';\nimport { useCurrentHotel } from '@frontend/hooks';\n\ninterface ReservationRowModalProps {\n    reservation: ReservationDTO;\n    onClose: () => void;\n    open: boolean;\n    images?: string[];\n}\n\nexport default function ReservationRowModal(props: ReservationRowModalProps) {\n    const { hotel } = useCurrentHotel();\n\n    const { reservation } = props;\n    const { t } = useTranslation();\n\n    const images = reservation.images && reservation.images.length ? reservation.images : props.images ?? [];\n\n    let adultsAndChildren = StringHelper.pluralWithDictAndCount(reservation.guestCounts.adults, Translation.Step.Date.Adult, t);\n\n    if (reservation.guestCounts.children) {\n        adultsAndChildren += ', ' + StringHelper.pluralWithDictAndCount(reservation.guestCounts.children, Translation.Step.Date.Child, t);\n    }\n\n    const nightKeys = Object.keys(reservation.nights);\n\n    const firstNight = dayjs(nightKeys[0]);\n    const lastNight = dayjs(nightKeys[nightKeys.length - 1]).add(1, 'day');\n\n    const guaranteePolicy = reservation.guaranteePolicy;\n    const cancelPolicy = reservation.cancelPolicy;\n\n    const roomName = reservation.roomType ? reservation.roomType : hotel.rooms[reservation.roomCode]?.name;\n\n    return (\n        <SimpleModal open={props.open} onClose={props.onClose} title={`Reservation #${props.reservation.reservationNumber}`} size={SimpleModalSize.Small}>\n            <>\n                <div style={{ height: '300px' }}>\n                    <ImageGallerySlider images={images} />\n                </div>\n                <div className=\"u-marg-heavy u-marg@m-\">\n                    <div className=\"u-marg-bottom\">\n                        <Headline size={'large'} bold={true}>\n                            {roomName}\n                        </Headline>\n                        <Text type={TextType.Small}>{reservation.rate}</Text>\n                    </div>\n\n                    <ul>\n                        <li className=\"u-flex justify-content-start u-marg-bottom--light\">\n                            <Icon color={Color.Grey} icon={IconType.Person} />\n                            <div className=\"u-marg-left--light\">\n                                <Text type={TextType.Small}>\n                                    {reservation.guest.firstName} {reservation.guest.lastName} <span style={{ color: Color.DarkGrey }}>- {adultsAndChildren}</span>\n                                </Text>\n                            </div>\n                        </li>\n                        <li className=\"u-flex justify-content-start u-marg-bottom--light\">\n                            <Icon icon={IconType.Email} color={Color.Grey} />\n                            <div className=\"u-marg-left--light\">\n                                <Text type={TextType.Small}>{reservation.guest.email}</Text>\n                            </div>\n                        </li>\n                        <li className=\"u-flex justify-content-start u-marg-bottom--light\">\n                            <Icon icon={IconType.Calendar} color={Color.Grey} />\n                            <div className=\"u-marg-left--light\">\n                                <Text type={TextType.Small}>{firstNight.format('dddd, MMM D, YYYY')}</Text>\n                                <Text type={TextType.Small}>{lastNight.format('dddd, MMM D, YYYY')}</Text>\n                            </div>\n                        </li>\n                        <li className=\"u-flex justify-content-start\">\n                            <Icon icon={IconType.CreditCard} color={Color.Grey} />\n                            <div className=\"u-marg-left--light\">\n                                <Text type={TextType.Small}>\n                                    •••• •••• •••• {reservation.paymentCard.last4} <span style={{ color: Color.DarkGrey }}>({reservation.paymentCard.type})</span>\n                                </Text>\n                            </div>\n                        </li>\n                    </ul>\n\n                    <LineBreak />\n\n                    {nightKeys.map((night) => {\n                        const currentDay = dayjs(night);\n                        const currentDayFormatted = currentDay.format('dddd, MMM DD, YYYY');\n\n                        return (\n                            <div className=\"u-flex u-marg-bottom\" key={reservation.reservationNumber}>\n                                <Text>{currentDayFormatted}</Text>\n                                <Text color={Color.DarkGrey}>\n                                    <Currency>{reservation.nights[night].total}</Currency>\n                                </Text>\n                            </div>\n                        );\n                    })}\n                    <div className=\"u-flex\">\n                        <Text>{lastNight.format('dddd, MMM DD, YYYY')}</Text>\n                        <Text color={Color.Success}>Check Out</Text>\n                    </div>\n\n                    <LineBreak />\n\n                    <div>\n                        {guaranteePolicy && (\n                            <div className=\"u-marg-bottom--heavy\">\n                                <div className=\"u-marg-bottom--light\">\n                                    <Text type={TextType.Small}>\n                                        <strong>{t(Translation.Misc.GuaranteePolicy)}</strong>\n                                    </Text>\n                                </div>\n                                <Text type={TextType.Small}>\n                                    <span className=\"u-clear-font-weight\" dangerouslySetInnerHTML={{ __html: guaranteePolicy }} />\n                                </Text>\n                            </div>\n                        )}\n                        {\n                            <div className=\"u-marg-bottom--heavy\">\n                                <div className=\"u-marg-bottom--light\">\n                                    <Text type={TextType.Small}>\n                                        <strong>{t(Translation.Misc.CancellationPolicy)}</strong>\n                                    </Text>\n                                </div>\n                                <Text type={TextType.Small}>\n                                    <span className=\"u-clear-font-weight\" dangerouslySetInnerHTML={{ __html: cancelPolicy }} />\n                                </Text>\n                            </div>\n                        }\n                    </div>\n                </div>\n            </>\n        </SimpleModal>\n    );\n}\n"]}

package/dist/src/pages/hotel/HotelInfo.d.ts

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