@roomstay/frontend 2.1.33 → 2.2.1

package/dist/src/components/reservation/ReservationItem.js

@@ -36,11 +36,9 @@ const Icon_1 = __importStar(require("../generic/Icon/Icon"));
 const Text_1 = __importStar(require("../generic/Text"));
 const ImageGallerySlider_1 = __importDefault(require("../steps/room/ImageGallerySlider"));
 const dayjs_1 = __importDefault(require("dayjs"));
-const CurrentHotelHook_1 = require("../../hooks/CurrentHotelHook");
 const AccountRoutes_1 = require("../../pages/account/AccountRoutes");
 const ImageProvider_1 = require("../../providers/ImageProvider");
-const react_1 = __importDefault(require("react"));
-const react_2 = require("react");
+const react_1 = __importStar(require("react"));
 const react_i18next_1 = require("react-i18next");
 const react_router_dom_1 = require("react-router-dom");
 const Translation_1 = require("translations/Translation");
@@ -49,6 +47,11 @@ const ScreenSize_1 = __importDefault(require("../../util/ScreenSize"));
 const TextAlignment_1 = require("../../util/TextAlignment");
 const ReservationItem_module_scss_1 = __importDefault(require("./ReservationItem.module.scss"));
 const StepManager_1 = __importDefault(require("../../util/StepManager"));
+const EventCarouselContainer_1 = __importDefault(require("../Event/EventCarouselContainer"));
+const TimeHelper_1 = __importDefault(require("../../util/TimeHelper"));
+const hooks_1 = require("../../hooks");
+const NoPrint_1 = __importDefault(require("../generic/print/NoPrint"));
+const ModifyBookingFeature_1 = __importDefault(require("../../providers/feature/ModifyBookingFeature"));
 var ReservationAction;
 (function (ReservationAction) {
     ReservationAction["MoreDetails"] = "MoreDetails";
@@ -58,19 +61,30 @@ var ReservationAction;
 })(ReservationAction = exports.ReservationAction || (exports.ReservationAction = {}));
 const defaultActions = [ReservationAction.MoreDetails];
 const ReservationItem = (props) => {
-    var _a, _b, _c, _d;
-    const { itineraryItem, disableMarginBottom, actions = defaultActions, showCancelledNotifications = false } = props;
+    var _a, _b, _c, _d, _e, _f, _g;
+    const { itineraryItem, disableMarginBottom, actions = defaultActions, showCancelledNotifications = false, defaultEventsExpanded } = props;
     const { t } = (0, react_i18next_1.useTranslation)();
-    const context = (0, react_2.useContext)(contexts_1.BookingEngineContext);
-    const { hotel } = (0, CurrentHotelHook_1.useCurrentHotel)();
+    const context = (0, react_1.useContext)(contexts_1.BookingEngineContext);
+    const { hotel } = (0, hooks_1.useCurrentHotel)();
     const isMobile = context.screenSize <= ScreenSize_1.default.Large;
     const nameSize = isMobile ? 'normal' : 'large';
-    const CheckinCheckoutComponent = isMobile ? Text_1.default : Headline_1.default;
+    const CheckinCheckoutComponent = ({ translation, value }) => {
+        const TextContainer = isMobile ? Text_1.default : Headline_1.default;
+        const time = (0, react_1.useMemo)(() => {
+            // Using timeHelper to convert 24hr to 12hr
+            return TimeHelper_1.default.convert24To12hr(value);
+        }, [value]);
+        return (react_1.default.createElement(TextContainer, null,
+            t(translation),
+            " ",
+            time));
+    };
     const renderActions = () => actions.map((action, index) => {
         const defaultButtonProps = {
             mobileWidth: true,
             rounded: true,
             wide: isMobile,
+            key: index,
             className: (0, classnames_1.default)({
                 'u-marg-right@m': index === 0,
             }),
@@ -81,9 +95,9 @@ const ReservationItem = (props) => {
             }
         };
         /**
-         * Only renders Cancel if the booking is NOT cancelled
+         * Only renders Cancel/Modify if the booking is NOT cancelled
          */
-        if (cancelled && action === ReservationAction.Cancel) {
+        if (cancelled && [ReservationAction.Cancel, ReservationAction.Modify].includes(action)) {
             return;
         }
         /**
@@ -94,14 +108,14 @@ const ReservationItem = (props) => {
         }
         switch (action) {
             case ReservationAction.Modify:
-                return (react_1.default.createElement(BEButton_1.default, Object.assign({}, defaultButtonProps, { icon: Icon_1.IconType.ArrowRight, iconPosition: "right", onClick: onActionClick }), t(Translation_1.Translation.Reservation.ModifyThisRoom)));
+                return ModifyBookingFeature_1.default.isActive() ? (react_1.default.createElement(BEButton_1.default, Object.assign({}, defaultButtonProps, { icon: Icon_1.IconType.ArrowRight, iconPosition: "right", onClick: onActionClick, disabled: !itineraryItem.isCancellable }), t(Translation_1.Translation.Reservation.ModifyThisRoom))) : null;
             case ReservationAction.Cancel:
                 return (react_1.default.createElement(BEButton_1.default, Object.assign({}, defaultButtonProps, { danger: true, onClick: onActionClick, disabled: !itineraryItem.isCancellable }), t(Translation_1.Translation.Reservation.CancelReservation)));
             case ReservationAction.BookAgain:
-                return (react_1.default.createElement(react_router_dom_1.Link, { to: StepManager_1.default.getFirstStep().getStepUrl() },
+                return (react_1.default.createElement(react_router_dom_1.Link, { to: StepManager_1.default.getFirstStep().getStepUrl(), key: index },
                     react_1.default.createElement(BEButton_1.default, Object.assign({}, defaultButtonProps, { icon: Icon_1.IconType.ArrowRight, iconPosition: "right", onClick: onActionClick }), t(Translation_1.Translation.Reservation.BookAgain))));
             case ReservationAction.MoreDetails:
-                return (react_1.default.createElement(react_router_dom_1.Link, { to: `${AccountRoutes_1.AccountRoutes.SingleReservation.path}${itineraryItem.bookingId}/item` },
+                return (react_1.default.createElement(react_router_dom_1.Link, { to: `${AccountRoutes_1.AccountRoutes.SingleReservation.path}${itineraryItem.bookingId}/item`, key: index },
                     react_1.default.createElement(BEButton_1.default, Object.assign({}, defaultButtonProps, { primary: true, filled: true, icon: Icon_1.IconType.ArrowRight, iconPosition: "right" }), t(Translation_1.Translation.Reservation.MoreDetails))));
         }
     });
@@ -113,20 +127,20 @@ const ReservationItem = (props) => {
     const checkOutDate = (0, dayjs_1.default)(itineraryItem.checkOutDate);
     const reservationOccupancy = itineraryItem.adults + ((itineraryItem === null || itineraryItem === void 0 ? void 0 : itineraryItem.children) || 0);
     const cancelled = itineraryItem.status === core_1.IBookingStatus.Cancelled;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
+    const colorProfile = (_a = itineraryItem === null || itineraryItem === void 0 ? void 0 : itineraryItem.hotel) === null || _a === void 0 ? void 0 : _a.colors;
+    return (react_1.default.createElement("div", { id: `reservation-${itineraryItem.id}`, className: (0, classnames_1.default)({ 'u-marg-bottom--heavy u-marg-bottom@m-': !disableMarginBottom }) },
         showCancelledNotifications && cancelled && (react_1.default.createElement("div", { className: ReservationItem_module_scss_1.default['cancelledNotification'] },
             react_1.default.createElement("div", { className: ReservationItem_module_scss_1.default['cancelledNotification-icon'] },
                 react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Error, size: "44px", color: Color_1.Color.Danger })),
             react_1.default.createElement("div", null,
-                react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, bold: true, color: Color_1.Color.Danger, className: ReservationItem_module_scss_1.default['cancelledNotification-title'] }, "This room is cancelled!"),
-                react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small },
-                    "This room has been cancelled, please",
-                    ' ',
-                    react_1.default.createElement("span", { style: { color: Color_1.Color.Accent } },
-                        react_1.default.createElement(react_router_dom_1.Link, { to: AccountRoutes_1.AccountRoutes.Help.path }, "get in touch")),
-                    ' ',
-                    "if you find this to be a mistake")))),
-        react_1.default.createElement("div", { className: (0, classnames_1.default)('reservation-item-container', { 'u-marg-bottom--heavy u-marg-bottom@m-': !disableMarginBottom }) },
+                react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, bold: true, color: Color_1.Color.Danger, className: ReservationItem_module_scss_1.default['cancelledNotification-title'] }, t(Translation_1.Translation.Reservation.Notification.ThisRoomIsCancelled.Title)),
+                react_1.default.createElement(react_i18next_1.Trans, { i18nKey: Translation_1.Translation.Reservation.Notification.ThisRoomIsCancelled.Detail, components: [react_1.default.createElement(react_router_dom_1.Link, { key: 0, to: AccountRoutes_1.AccountRoutes.Help.path, style: { color: Color_1.Color.Accent } })] })))),
+        react_1.default.createElement("div", { className: "reservation-item-container" },
+            !!colorProfile && (react_1.default.createElement("style", null, `
+                        #reservation-${itineraryItem.id} {
+                            ${(0, Color_1.getAccentOverrideStyleContent)(colorProfile)}
+                            }
+                        `)),
             react_1.default.createElement("div", { className: "reservation-item" },
                 react_1.default.createElement("div", { className: (0, classnames_1.default)('reservation-item--image u-border-rounded u-print-none', { 'reservation-item--disabled': cancelled }) },
                     react_1.default.createElement(ImageGallerySlider_1.default, { images: itineraryItem.images, imageSize: ImageProvider_1.ImageSize.Medium }),
@@ -135,8 +149,9 @@ const ReservationItem = (props) => {
                         react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: cancelled ? Color_1.Color.DarkGrey : Color_1.Color.White, bold: true }, checkInDate.format('MMM YYYY')))),
                 react_1.default.createElement("div", { className: "reservation-item--content u-pad--heavy u-pad-left-none@m- u-pad-right-none@m- u-pad-bottom-none@m- u-print-pad-left-none" },
                     react_1.default.createElement("div", { className: "reservation-item--content-title u-marg-bottom--light" },
+                        (hotel === null || hotel === void 0 ? void 0 : hotel.hotelID) !== itineraryItem.hotelId && (react_1.default.createElement(Text_1.default, { color: Color_1.Color.Accent, size: nameSize, bold: true }, itineraryItem.hotel.name)),
                         react_1.default.createElement(Headline_1.default, { bold: true, size: nameSize }, itineraryItem.roomName)),
-                    react_1.default.createElement("div", { className: "text-body u-marg-bottom" }, ((_b = (_a = itineraryItem === null || itineraryItem === void 0 ? void 0 : itineraryItem.profile) === null || _a === void 0 ? void 0 : _a.firstName) !== null && _b !== void 0 ? _b : '') + ' ' + ((_d = (_c = itineraryItem === null || itineraryItem === void 0 ? void 0 : itineraryItem.profile) === null || _c === void 0 ? void 0 : _c.lastName) !== null && _d !== void 0 ? _d : '')),
+                    react_1.default.createElement("div", { className: "text-body u-marg-bottom" }, ((_c = (_b = itineraryItem === null || itineraryItem === void 0 ? void 0 : itineraryItem.profile) === null || _b === void 0 ? void 0 : _b.firstName) !== null && _c !== void 0 ? _c : '') + ' ' + ((_e = (_d = itineraryItem === null || itineraryItem === void 0 ? void 0 : itineraryItem.profile) === null || _d === void 0 ? void 0 : _d.lastName) !== null && _e !== void 0 ? _e : '')),
                     react_1.default.createElement("div", { className: "reservation-item--info u-marg-bottom--heavy" },
                         react_1.default.createElement("div", { className: "u-flex u-flex-gap--light" },
                             react_1.default.createElement("div", { className: "u-flex u-flex-nowrap u-flex-gap--light" },
@@ -155,17 +170,14 @@ const ReservationItem = (props) => {
                     react_1.default.createElement("div", { className: "reservation-item--checkin-checkout u-flex justify-content-start u-pad u-border-rounded" },
                         react_1.default.createElement("div", { className: "u-marg-right--heavy" },
                             react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.DarkGrey, className: "u-marg-bottom--light" }, t(Translation_1.Translation.Misc.CheckIn)),
-                            react_1.default.createElement(CheckinCheckoutComponent, null,
-                                t(Translation_1.Translation.Reservation.After),
-                                " ", hotel === null || hotel === void 0 ? void 0 :
-                                hotel.checkInTime)),
+                            react_1.default.createElement(CheckinCheckoutComponent, { translation: Translation_1.Translation.Reservation.After, value: (_f = itineraryItem === null || itineraryItem === void 0 ? void 0 : itineraryItem.hotel) === null || _f === void 0 ? void 0 : _f.checkInTime })),
                         react_1.default.createElement("div", null,
                             react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.DarkGrey, className: "u-marg-bottom--light" }, t(Translation_1.Translation.Misc.CheckOut)),
-                            react_1.default.createElement(CheckinCheckoutComponent, null,
-                                t(Translation_1.Translation.Reservation.Before),
-                                " ", hotel === null || hotel === void 0 ? void 0 :
-                                hotel.checkOutTime))),
-                    react_1.default.createElement("div", { className: "reservation-item--actions u-flex justify-content-start u-print-none u-marg-top--heavy" }, renderActions()))))));
+                            react_1.default.createElement(CheckinCheckoutComponent, { translation: Translation_1.Translation.Reservation.Before, value: (_g = itineraryItem === null || itineraryItem === void 0 ? void 0 : itineraryItem.hotel) === null || _g === void 0 ? void 0 : _g.checkOutTime }))),
+                    react_1.default.createElement("div", { className: "reservation-item--actions u-flex justify-content-start u-print-none u-marg-top--heavy" }, renderActions())))),
+        react_1.default.createElement(NoPrint_1.default, null,
+            react_1.default.createElement("div", { className: "u-marg-top--medium" },
+                react_1.default.createElement(EventCarouselContainer_1.default, { defaultExpanded: defaultEventsExpanded, hotelId: itineraryItem.hotelId, checkInDate: itineraryItem.checkInDate })))));
 };
 exports.default = ReservationItem;
 //# sourceMappingURL=ReservationItem.js.map

package/dist/src/components/reservation/ReservationItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReservationItem.js","sourceRoot":"/","sources":["src/components/reservation/ReservationItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { BookingEngineContext } from '@frontend/contexts';\nimport { IBookingStatus } from '@roomstay/core';\nimport classNames from 'classnames';\nimport BEButton, { BEButtonProps } from '@/components/generic/BEButton';\nimport Headline, { HeadlineProps } from '@/components/generic/Headline';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport Text, { TextType } from '@/components/generic/Text';\nimport ImageGallerySlider from '@/components/steps/room/ImageGallerySlider';\nimport dayjs from 'dayjs';\nimport { useCurrentHotel } from '@/hooks/CurrentHotelHook';\nimport { IRoomstayMemberBookingItemWithRef } from '@frontend/contexts';\nimport { AccountRoutes } from '@/pages/account/AccountRoutes';\nimport { ImageSize } from '@/providers/ImageProvider';\nimport React from 'react';\nimport { useContext } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Link } from 'react-router-dom';\nimport { Translation } from 'translations/Translation';\nimport { Color } from '@/util/Color';\nimport ScreenSize from '@/util/ScreenSize';\nimport { TextAlign } from '@/util/TextAlignment';\nimport styles from './ReservationItem.module.scss';\nimport Tooltip from '@/components/generic/Tooltip/Tooltip';\nimport StepManager from '@/util/StepManager';\n\nexport enum ReservationAction {\n    MoreDetails = 'MoreDetails',\n    BookAgain = 'BookAgain',\n    Cancel = 'Cancel',\n    Modify = 'Modify',\n}\n\nexport type ReservationItemProps = {\n    itineraryItem: IRoomstayMemberBookingItemWithRef;\n    disableMarginBottom?: boolean;\n    actions?: ReservationAction[];\n    showCancelledNotifications?: boolean;\n    onActionClick?: (action: ReservationAction, item: IRoomstayMemberBookingItemWithRef) => void;\n};\n\nconst defaultActions: ReservationAction[] = [ReservationAction.MoreDetails];\n\nconst ReservationItem = (props: ReservationItemProps) => {\n    const { itineraryItem, disableMarginBottom, actions = defaultActions, showCancelledNotifications = false } = props;\n\n    const { t } = useTranslation();\n    const context = useContext(BookingEngineContext);\n    const { hotel } = useCurrentHotel();\n\n    const isMobile = context.screenSize <= ScreenSize.Large;\n\n    const nameSize: HeadlineProps['size'] = isMobile ? 'normal' : 'large';\n    const CheckinCheckoutComponent = isMobile ? Text : Headline;\n\n    const renderActions = () =>\n        actions.map((action, index) => {\n            const defaultButtonProps: BEButtonProps = {\n                mobileWidth: true,\n                rounded: true,\n                wide: isMobile,\n                className: classNames({\n                    'u-marg-right@m': index === 0,\n                }),\n            };\n\n            const onActionClick = () => {\n                if (props.onActionClick) {\n                    props.onActionClick(action, itineraryItem);\n                }\n            };\n\n            /**\n             * Only renders Cancel if the booking is NOT cancelled\n             */\n            if (cancelled && action === ReservationAction.Cancel) {\n                return;\n            }\n\n            /**\n             * Only renders BookAgain if booking IS cancelled\n             */\n            if (!cancelled && action === ReservationAction.BookAgain) {\n                return;\n            }\n\n            switch (action) {\n                case ReservationAction.Modify:\n                    return (\n                        <BEButton {...defaultButtonProps} icon={IconType.ArrowRight} iconPosition=\"right\" onClick={onActionClick}>\n                            {t(Translation.Reservation.ModifyThisRoom)}\n                        </BEButton>\n                    );\n                case ReservationAction.Cancel:\n                    return (\n                        <BEButton {...defaultButtonProps} danger onClick={onActionClick} disabled={!itineraryItem.isCancellable}>\n                            {t(Translation.Reservation.CancelReservation)}\n                        </BEButton>\n                    );\n                case ReservationAction.BookAgain:\n                    return (\n                        <Link to={StepManager.getFirstStep().getStepUrl()}>\n                            <BEButton {...defaultButtonProps} icon={IconType.ArrowRight} iconPosition=\"right\" onClick={onActionClick}>\n                                {t(Translation.Reservation.BookAgain)}\n                            </BEButton>\n                        </Link>\n                    );\n                case ReservationAction.MoreDetails:\n                    return (\n                        <Link to={`${AccountRoutes.SingleReservation.path}${itineraryItem.bookingId}/item`}>\n                            <BEButton {...defaultButtonProps} primary filled icon={IconType.ArrowRight} iconPosition=\"right\">\n                                {t(Translation.Reservation.MoreDetails)}\n                            </BEButton>\n                        </Link>\n                    );\n            }\n        });\n\n    if (!itineraryItem) {\n        return <></>;\n    }\n\n    const itineraryItemNights = Object.keys(itineraryItem.nights);\n\n    const checkInDate = dayjs(itineraryItem.checkInDate);\n    const checkOutDate = dayjs(itineraryItem.checkOutDate);\n\n    const reservationOccupancy = itineraryItem.adults + (itineraryItem?.children || 0);\n\n    const cancelled = itineraryItem.status === IBookingStatus.Cancelled;\n\n    return (\n        <>\n            {showCancelledNotifications && cancelled && (\n                <div className={styles['cancelledNotification']}>\n                    <div className={styles['cancelledNotification-icon']}>\n                        <Icon icon={IconType.Error} size=\"44px\" color={Color.Danger} />\n                    </div>\n                    <div>\n                        <Text type={TextType.Small} bold color={Color.Danger} className={styles['cancelledNotification-title']}>\n                            This room is cancelled!\n                        </Text>\n                        <Text type={TextType.Small}>\n                            This room has been cancelled, please{' '}\n                            <span style={{ color: Color.Accent }}>\n                                <Link to={AccountRoutes.Help.path}>get in touch</Link>\n                            </span>{' '}\n                            if you find this to be a mistake\n                        </Text>\n                    </div>\n                </div>\n            )}\n            <div className={classNames('reservation-item-container', { 'u-marg-bottom--heavy u-marg-bottom@m-': !disableMarginBottom })}>\n                <div className=\"reservation-item\">\n                    <div className={classNames('reservation-item--image u-border-rounded u-print-none', { 'reservation-item--disabled': cancelled })}>\n                        <ImageGallerySlider images={itineraryItem.images} imageSize={ImageSize.Medium} />\n                        <div className=\"reservation-item--floating-date\">\n                            <Headline size=\"extra-large\" color={cancelled ? Color.DarkGrey : Color.White} align={TextAlign.Center}>\n                                {checkInDate.format('DD')}\n                            </Headline>\n                            <Text type={TextType.Small} color={cancelled ? Color.DarkGrey : Color.White} bold>\n                                {checkInDate.format('MMM YYYY')}\n                            </Text>\n                        </div>\n                    </div>\n\n                    <div className=\"reservation-item--content u-pad--heavy u-pad-left-none@m- u-pad-right-none@m- u-pad-bottom-none@m- u-print-pad-left-none\">\n                        <div className=\"reservation-item--content-title u-marg-bottom--light\">\n                            <Headline bold size={nameSize}>\n                                {itineraryItem.roomName}\n                            </Headline>\n                        </div>\n                        <div className=\"text-body u-marg-bottom\">{(itineraryItem?.profile?.firstName ?? '') + ' ' + (itineraryItem?.profile?.lastName ?? '')}</div>\n                        <div className=\"reservation-item--info u-marg-bottom--heavy\">\n                            <div className=\"u-flex u-flex-gap--light\">\n                                <div className=\"u-flex u-flex-nowrap u-flex-gap--light\">\n                                    <Icon icon={IconType.Calendar} color={Color.Grey} />\n                                    <Text type={TextType.Small}>{checkInDate.format('D MMM, YYYY')}</Text>\n                                </div>\n                                <div className=\"u-flex u-flex-nowrap u-flex-gap--light\">\n                                    <Icon icon={IconType.ArrowRight2} color={Color.Grey} />\n                                    <Text type={TextType.Small}>{checkOutDate.format('D MMM, YYYY')}</Text>\n                                </div>\n                            </div>\n                            <div className=\"u-flex u-flex-gap\">\n                                <div className=\"u-flex u-flex-nowrap u-flex-gap--light\">\n                                    <Icon icon={IconType.LateCheckout} color={Color.Grey} />\n                                    <Text type={TextType.Small}>{`${itineraryItemNights.length} night${itineraryItemNights.length > 1 ? 's' : ''}`}</Text>\n                                </div>\n                                <div className=\"u-flex u-flex-nowrap u-flex-gap--light\">\n                                    <Icon icon={IconType.Person} color={Color.Grey} />\n                                    <Text type={TextType.Small}>{`${reservationOccupancy} guest${reservationOccupancy > 1 ? 's' : ''}`}</Text>\n                                </div>\n                            </div>\n                        </div>\n                        <div className=\"reservation-item--checkin-checkout u-flex justify-content-start u-pad u-border-rounded\">\n                            <div className=\"u-marg-right--heavy\">\n                                <Text type={TextType.Small} color={Color.DarkGrey} className=\"u-marg-bottom--light\">\n                                    {t(Translation.Misc.CheckIn)}\n                                </Text>\n                                <CheckinCheckoutComponent>\n                                    {t(Translation.Reservation.After)} {hotel?.checkInTime}\n                                </CheckinCheckoutComponent>\n                            </div>\n                            <div>\n                                <Text type={TextType.Small} color={Color.DarkGrey} className=\"u-marg-bottom--light\">\n                                    {t(Translation.Misc.CheckOut)}\n                                </Text>\n                                <CheckinCheckoutComponent>\n                                    {t(Translation.Reservation.Before)} {hotel?.checkOutTime}\n                                </CheckinCheckoutComponent>\n                            </div>\n                        </div>\n                        <div className=\"reservation-item--actions u-flex justify-content-start u-print-none u-marg-top--heavy\">{renderActions()}</div>\n                    </div>\n                </div>\n            </div>\n        </>\n    );\n};\n\nexport default ReservationItem;\n"]}
+{"version":3,"file":"ReservationItem.js","sourceRoot":"/","sources":["src/components/reservation/ReservationItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { BookingEngineContext, IRoomstayMemberBookingItemWithRefAndHotelDetails } from '@frontend/contexts';\nimport { IBookingStatus } from '@roomstay/core';\nimport classNames from 'classnames';\nimport BEButton, { BEButtonProps } from '@/components/generic/BEButton';\nimport Headline, { HeadlineProps } from '@/components/generic/Headline';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport Text, { TextType } from '@/components/generic/Text';\nimport ImageGallerySlider from '@/components/steps/room/ImageGallerySlider';\nimport dayjs from 'dayjs';\nimport { AccountRoutes } from '@/pages/account/AccountRoutes';\nimport { ImageSize } from '@/providers/ImageProvider';\nimport React, { useContext, useMemo } from 'react';\nimport { Trans, useTranslation } from 'react-i18next';\nimport { Link } from 'react-router-dom';\nimport { Translation } from 'translations/Translation';\nimport { Color, getAccentOverrideStyleContent } from '@/util/Color';\nimport ScreenSize from '@/util/ScreenSize';\nimport { TextAlign } from '@/util/TextAlignment';\nimport styles from './ReservationItem.module.scss';\nimport StepManager from '@/util/StepManager';\nimport EventCarouselContainer from '@/components/Event/EventCarouselContainer';\nimport TimeHelper from '@/util/TimeHelper';\nimport { useCurrentHotel } from '@/hooks';\nimport NoPrint from '@/components/generic/print/NoPrint';\nimport ModifyBookingFeature from '@/providers/feature/ModifyBookingFeature';\n\nexport enum ReservationAction {\n    MoreDetails = 'MoreDetails',\n    BookAgain = 'BookAgain',\n    Cancel = 'Cancel',\n    Modify = 'Modify',\n}\n\nexport type ReservationItemProps = {\n    itineraryItem: IRoomstayMemberBookingItemWithRefAndHotelDetails;\n    disableMarginBottom?: boolean;\n    actions?: ReservationAction[];\n    showCancelledNotifications?: boolean;\n    onActionClick?: (action: ReservationAction, item: IRoomstayMemberBookingItemWithRefAndHotelDetails) => void;\n    defaultEventsExpanded?: boolean;\n};\n\nconst defaultActions: ReservationAction[] = [ReservationAction.MoreDetails];\n\nconst ReservationItem = (props: ReservationItemProps) => {\n    const { itineraryItem, disableMarginBottom, actions = defaultActions, showCancelledNotifications = false, defaultEventsExpanded } = props;\n\n    const { t } = useTranslation();\n    const context = useContext(BookingEngineContext);\n    const { hotel } = useCurrentHotel();\n\n    const isMobile = context.screenSize <= ScreenSize.Large;\n\n    const nameSize: HeadlineProps['size'] = isMobile ? 'normal' : 'large';\n\n    const CheckinCheckoutComponent = ({ translation, value }: { translation: string; value: string }) => {\n        const TextContainer = isMobile ? Text : Headline;\n\n        const time = useMemo(() => {\n            // Using timeHelper to convert 24hr to 12hr\n            return TimeHelper.convert24To12hr(value);\n        }, [value]);\n\n        return (\n            <TextContainer>\n                {t(translation)} {time}\n            </TextContainer>\n        );\n    };\n\n    const renderActions = () =>\n        actions.map((action, index) => {\n            const defaultButtonProps: BEButtonProps = {\n                mobileWidth: true,\n                rounded: true,\n                wide: isMobile,\n                key: index,\n                className: classNames({\n                    'u-marg-right@m': index === 0,\n                }),\n            };\n\n            const onActionClick = () => {\n                if (props.onActionClick) {\n                    props.onActionClick(action, itineraryItem);\n                }\n            };\n\n            /**\n             * Only renders Cancel/Modify if the booking is NOT cancelled\n             */\n            if (cancelled && [ReservationAction.Cancel, ReservationAction.Modify].includes(action)) {\n                return;\n            }\n\n            /**\n             * Only renders BookAgain if booking IS cancelled\n             */\n            if (!cancelled && action === ReservationAction.BookAgain) {\n                return;\n            }\n\n            switch (action) {\n                case ReservationAction.Modify:\n                    return ModifyBookingFeature.isActive() ? (\n                        <BEButton {...defaultButtonProps} icon={IconType.ArrowRight} iconPosition=\"right\" onClick={onActionClick} disabled={!itineraryItem.isCancellable}>\n                            {t(Translation.Reservation.ModifyThisRoom)}\n                        </BEButton>\n                    ) : null;\n                case ReservationAction.Cancel:\n                    return (\n                        <BEButton {...defaultButtonProps} danger onClick={onActionClick} disabled={!itineraryItem.isCancellable}>\n                            {t(Translation.Reservation.CancelReservation)}\n                        </BEButton>\n                    );\n                case ReservationAction.BookAgain:\n                    return (\n                        <Link to={StepManager.getFirstStep().getStepUrl()} key={index}>\n                            <BEButton {...defaultButtonProps} icon={IconType.ArrowRight} iconPosition=\"right\" onClick={onActionClick}>\n                                {t(Translation.Reservation.BookAgain)}\n                            </BEButton>\n                        </Link>\n                    );\n                case ReservationAction.MoreDetails:\n                    return (\n                        <Link to={`${AccountRoutes.SingleReservation.path}${itineraryItem.bookingId}/item`} key={index}>\n                            <BEButton {...defaultButtonProps} primary filled icon={IconType.ArrowRight} iconPosition=\"right\">\n                                {t(Translation.Reservation.MoreDetails)}\n                            </BEButton>\n                        </Link>\n                    );\n            }\n        });\n\n    if (!itineraryItem) {\n        return <></>;\n    }\n\n    const itineraryItemNights = Object.keys(itineraryItem.nights);\n\n    const checkInDate = dayjs(itineraryItem.checkInDate);\n    const checkOutDate = dayjs(itineraryItem.checkOutDate);\n\n    const reservationOccupancy = itineraryItem.adults + (itineraryItem?.children || 0);\n\n    const cancelled = itineraryItem.status === IBookingStatus.Cancelled;\n\n    const colorProfile = itineraryItem?.hotel?.colors;\n\n    return (\n        <div id={`reservation-${itineraryItem.id}`} className={classNames({ 'u-marg-bottom--heavy u-marg-bottom@m-': !disableMarginBottom })}>\n            {showCancelledNotifications && cancelled && (\n                <div className={styles['cancelledNotification']}>\n                    <div className={styles['cancelledNotification-icon']}>\n                        <Icon icon={IconType.Error} size=\"44px\" color={Color.Danger} />\n                    </div>\n                    <div>\n                        <Text type={TextType.Small} bold color={Color.Danger} className={styles['cancelledNotification-title']}>\n                            {t(Translation.Reservation.Notification.ThisRoomIsCancelled.Title)}\n                        </Text>\n                        <Trans\n                            i18nKey={Translation.Reservation.Notification.ThisRoomIsCancelled.Detail}\n                            components={[<Link key={0} to={AccountRoutes.Help.path} style={{ color: Color.Accent }}></Link>]}\n                        />\n                    </div>\n                </div>\n            )}\n            <div className=\"reservation-item-container\">\n                {!!colorProfile && (\n                    <style>\n                        {`\n                        #reservation-${itineraryItem.id} {\n                            ${getAccentOverrideStyleContent(colorProfile)}\n                            }\n                        `}\n                    </style>\n                )}\n\n                <div className=\"reservation-item\">\n                    <div className={classNames('reservation-item--image u-border-rounded u-print-none', { 'reservation-item--disabled': cancelled })}>\n                        <ImageGallerySlider images={itineraryItem.images} imageSize={ImageSize.Medium} />\n                        <div className=\"reservation-item--floating-date\">\n                            <Headline size=\"extra-large\" color={cancelled ? Color.DarkGrey : Color.White} align={TextAlign.Center}>\n                                {checkInDate.format('DD')}\n                            </Headline>\n                            <Text type={TextType.Small} color={cancelled ? Color.DarkGrey : Color.White} bold>\n                                {checkInDate.format('MMM YYYY')}\n                            </Text>\n                        </div>\n                    </div>\n\n                    <div className=\"reservation-item--content u-pad--heavy u-pad-left-none@m- u-pad-right-none@m- u-pad-bottom-none@m- u-print-pad-left-none\">\n                        <div className=\"reservation-item--content-title u-marg-bottom--light\">\n                            {hotel?.hotelID !== itineraryItem.hotelId && (\n                                <Text color={Color.Accent} size={nameSize} bold>\n                                    {itineraryItem.hotel.name}\n                                </Text>\n                            )}\n                            <Headline bold size={nameSize}>\n                                {itineraryItem.roomName}\n                            </Headline>\n                        </div>\n                        <div className=\"text-body u-marg-bottom\">{(itineraryItem?.profile?.firstName ?? '') + ' ' + (itineraryItem?.profile?.lastName ?? '')}</div>\n                        <div className=\"reservation-item--info u-marg-bottom--heavy\">\n                            <div className=\"u-flex u-flex-gap--light\">\n                                <div className=\"u-flex u-flex-nowrap u-flex-gap--light\">\n                                    <Icon icon={IconType.Calendar} color={Color.Grey} />\n                                    <Text type={TextType.Small}>{checkInDate.format('D MMM, YYYY')}</Text>\n                                </div>\n                                <div className=\"u-flex u-flex-nowrap u-flex-gap--light\">\n                                    <Icon icon={IconType.ArrowRight2} color={Color.Grey} />\n                                    <Text type={TextType.Small}>{checkOutDate.format('D MMM, YYYY')}</Text>\n                                </div>\n                            </div>\n                            <div className=\"u-flex u-flex-gap\">\n                                <div className=\"u-flex u-flex-nowrap u-flex-gap--light\">\n                                    <Icon icon={IconType.LateCheckout} color={Color.Grey} />\n                                    <Text type={TextType.Small}>{`${itineraryItemNights.length} night${itineraryItemNights.length > 1 ? 's' : ''}`}</Text>\n                                </div>\n                                <div className=\"u-flex u-flex-nowrap u-flex-gap--light\">\n                                    <Icon icon={IconType.Person} color={Color.Grey} />\n                                    <Text type={TextType.Small}>{`${reservationOccupancy} guest${reservationOccupancy > 1 ? 's' : ''}`}</Text>\n                                </div>\n                            </div>\n                        </div>\n                        <div className=\"reservation-item--checkin-checkout u-flex justify-content-start u-pad u-border-rounded\">\n                            <div className=\"u-marg-right--heavy\">\n                                <Text type={TextType.Small} color={Color.DarkGrey} className=\"u-marg-bottom--light\">\n                                    {t(Translation.Misc.CheckIn)}\n                                </Text>\n                                <CheckinCheckoutComponent translation={Translation.Reservation.After} value={itineraryItem?.hotel?.checkInTime} />\n                            </div>\n                            <div>\n                                <Text type={TextType.Small} color={Color.DarkGrey} className=\"u-marg-bottom--light\">\n                                    {t(Translation.Misc.CheckOut)}\n                                </Text>\n                                <CheckinCheckoutComponent translation={Translation.Reservation.Before} value={itineraryItem?.hotel?.checkOutTime} />\n                            </div>\n                        </div>\n                        <div className=\"reservation-item--actions u-flex justify-content-start u-print-none u-marg-top--heavy\">{renderActions()}</div>\n                    </div>\n                </div>\n            </div>\n            <NoPrint>\n                <div className=\"u-marg-top--medium\">\n                    <EventCarouselContainer defaultExpanded={defaultEventsExpanded} hotelId={itineraryItem.hotelId} checkInDate={itineraryItem.checkInDate} />\n                </div>\n            </NoPrint>\n        </div>\n    );\n};\n\nexport default ReservationItem;\n"]}

package/dist/src/components/reservation/ReservationList.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import { ReservationItemProps } from './ReservationItem';
-import { IRoomstayMemberBookingItemWithRef } from '../../contexts/index.js';
+import { IRoomstayMemberBookingItemWithRefAndHotelDetails } from '../../contexts/index.js';
 import { EmptyReservationProps } from './EmptyReservation';
 interface ReservationListProps extends EmptyReservationProps {
-    reservationItems: IRoomstayMemberBookingItemWithRef[];
+    reservationItems: IRoomstayMemberBookingItemWithRefAndHotelDetails[];
     actions?: ReservationItemProps['actions'];
     onActionClick?: ReservationItemProps['onActionClick'];
     showCancelledNotifications?: boolean;

package/dist/src/components/reservation/ReservationList.js

@@ -11,7 +11,7 @@ const ReservationList = (props) => {
     if (!reservationItems.length) {
         return react_1.default.createElement(EmptyReservation_1.default, { isCancelled: isCancelled });
     }
-    return (react_1.default.createElement("div", null, reservationItems.map((reservationItem, index) => (react_1.default.createElement(ReservationItem_1.default, { key: reservationItem.id, itineraryItem: reservationItem, disableMarginBottom: index === reservationItems.length - 1, actions: actions, onActionClick: props.onActionClick, showCancelledNotifications: props.showCancelledNotifications })))));
+    return (react_1.default.createElement("div", null, reservationItems.map((reservationItem, index) => (react_1.default.createElement(ReservationItem_1.default, { key: reservationItem.id, itineraryItem: reservationItem, disableMarginBottom: index === reservationItems.length - 1, actions: actions, onActionClick: props.onActionClick, showCancelledNotifications: props.showCancelledNotifications, defaultEventsExpanded: index === 0 })))));
 };
 exports.default = ReservationList;
 //# sourceMappingURL=ReservationList.js.map

package/dist/src/components/reservation/ReservationList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReservationList.js","sourceRoot":"/","sources":["src/components/reservation/ReservationList.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,+FAAiG;AAEjG,iGAAoG;AASpG,MAAM,eAAe,GAAmC,CAAC,KAAK,EAAE,EAAE;IAC9D,MAAM,EAAE,gBAAgB,GAAG,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IAE9D,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE;QAC1B,OAAO,8BAAC,0BAAgB,IAAC,WAAW,EAAE,WAAW,GAAI,CAAC;KACzD;IAED,OAAO,CACH,2CACK,gBAAgB,CAAC,GAAG,CAAC,CAAC,eAAe,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9C,8BAAC,yBAAe,IACZ,GAAG,EAAE,eAAe,CAAC,EAAE,EACvB,aAAa,EAAE,eAAe,EAC9B,mBAAmB,EAAE,KAAK,KAAK,gBAAgB,CAAC,MAAM,GAAG,CAAC,EAC1D,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,KAAK,CAAC,aAAa,EAClC,0BAA0B,EAAE,KAAK,CAAC,0BAA0B,GAC9D,CACL,CAAC,CACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,eAAe,CAAC","sourcesContent":["import React from 'react';\nimport ReservationItem, { ReservationItemProps } from '@/components/reservation/ReservationItem';\nimport { IRoomstayMemberBookingItemWithRef } from '@frontend/contexts';\nimport EmptyReservation, { EmptyReservationProps } from '@/components/reservation/EmptyReservation';\n\ninterface ReservationListProps extends EmptyReservationProps {\n    reservationItems: IRoomstayMemberBookingItemWithRef[];\n    actions?: ReservationItemProps['actions'];\n    onActionClick?: ReservationItemProps['onActionClick'];\n    showCancelledNotifications?: boolean;\n}\n\nconst ReservationList: React.FC<ReservationListProps> = (props) => {\n    const { reservationItems = [], actions, isCancelled } = props;\n\n    if (!reservationItems.length) {\n        return <EmptyReservation isCancelled={isCancelled} />;\n    }\n\n    return (\n        <div>\n            {reservationItems.map((reservationItem, index) => (\n                <ReservationItem\n                    key={reservationItem.id}\n                    itineraryItem={reservationItem}\n                    disableMarginBottom={index === reservationItems.length - 1}\n                    actions={actions}\n                    onActionClick={props.onActionClick}\n                    showCancelledNotifications={props.showCancelledNotifications}\n                />\n            ))}\n        </div>\n    );\n};\n\nexport default ReservationList;\n"]}
+{"version":3,"file":"ReservationList.js","sourceRoot":"/","sources":["src/components/reservation/ReservationList.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,+FAAiG;AAEjG,iGAAoG;AASpG,MAAM,eAAe,GAAmC,CAAC,KAAK,EAAE,EAAE;IAC9D,MAAM,EAAE,gBAAgB,GAAG,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IAE9D,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE;QAC1B,OAAO,8BAAC,0BAAgB,IAAC,WAAW,EAAE,WAAW,GAAI,CAAC;KACzD;IAED,OAAO,CACH,2CACK,gBAAgB,CAAC,GAAG,CAAC,CAAC,eAAe,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9C,8BAAC,yBAAe,IACZ,GAAG,EAAE,eAAe,CAAC,EAAE,EACvB,aAAa,EAAE,eAAe,EAC9B,mBAAmB,EAAE,KAAK,KAAK,gBAAgB,CAAC,MAAM,GAAG,CAAC,EAC1D,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,KAAK,CAAC,aAAa,EAClC,0BAA0B,EAAE,KAAK,CAAC,0BAA0B,EAC5D,qBAAqB,EAAE,KAAK,KAAK,CAAC,GACpC,CACL,CAAC,CACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,eAAe,CAAC","sourcesContent":["import React from 'react';\nimport ReservationItem, { ReservationItemProps } from '@/components/reservation/ReservationItem';\nimport { IRoomstayMemberBookingItemWithRefAndHotelDetails } from '@frontend/contexts';\nimport EmptyReservation, { EmptyReservationProps } from '@/components/reservation/EmptyReservation';\n\ninterface ReservationListProps extends EmptyReservationProps {\n    reservationItems: IRoomstayMemberBookingItemWithRefAndHotelDetails[];\n    actions?: ReservationItemProps['actions'];\n    onActionClick?: ReservationItemProps['onActionClick'];\n    showCancelledNotifications?: boolean;\n}\n\nconst ReservationList: React.FC<ReservationListProps> = (props) => {\n    const { reservationItems = [], actions, isCancelled } = props;\n\n    if (!reservationItems.length) {\n        return <EmptyReservation isCancelled={isCancelled} />;\n    }\n\n    return (\n        <div>\n            {reservationItems.map((reservationItem, index) => (\n                <ReservationItem\n                    key={reservationItem.id}\n                    itineraryItem={reservationItem}\n                    disableMarginBottom={index === reservationItems.length - 1}\n                    actions={actions}\n                    onActionClick={props.onActionClick}\n                    showCancelledNotifications={props.showCancelledNotifications}\n                    defaultEventsExpanded={index === 0}\n                />\n            ))}\n        </div>\n    );\n};\n\nexport default ReservationList;\n"]}

package/dist/src/components/steps/DaysSelectedInformer.js

@@ -22,17 +22,16 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_2 = require("react");
+const react_1 = __importStar(require("react"));
 const Text_1 = __importStar(require("../generic/Text"));
 const Color_1 = require("../../util/Color");
 const contexts_1 = require("../../contexts/index.js");
+const react_i18next_1 = require("react-i18next");
+const Translation_1 = require("../../translations/Translation");
 function DaysSelectedInformer() {
-    const dpContext = (0, react_2.useContext)(contexts_1.DatePickerContext);
+    const dpContext = (0, react_1.useContext)(contexts_1.DatePickerContext);
+    const { t } = (0, react_i18next_1.useTranslation)();
     const { startDate, endDate, hoveredMonth: hoveredDate } = dpContext;
     let daysPicked = 0;
     const correctEndDate = hoveredDate !== null && hoveredDate !== void 0 ? hoveredDate : endDate;
@@ -40,12 +39,18 @@ function DaysSelectedInformer() {
         daysPicked = correctEndDate.diff(dpContext.startDate, 'day');
     }
     return (react_1.default.createElement(Text_1.default, { bold: true, color: Color_1.Color.Success, type: Text_1.TextType.Small }, daysPicked > 0 ? (react_1.default.createElement(react_1.default.Fragment, null,
-        "Selected ",
+        t(Translation_1.Translation.Step.Room.RoomInfo.Selected),
+        " ",
         daysPicked,
-        " nights, ", startDate === null || startDate === void 0 ? void 0 :
+        " ",
+        t(Translation_1.Translation.Misc.Night_plural).toLowerCase(),
+        ", ", startDate === null || startDate === void 0 ? void 0 :
         startDate.format('D MMM'),
-        ", to ", correctEndDate === null || correctEndDate === void 0 ? void 0 :
-        correctEndDate.format('D MMM'))) : (react_1.default.createElement(react_1.default.Fragment, null, "Please select your dates"))));
+        ",",
+        ' ',
+        t(Translation_1.Translation.Misc.To).toLowerCase(),
+        " ", correctEndDate === null || correctEndDate === void 0 ? void 0 :
+        correctEndDate.format('D MMM'))) : (react_1.default.createElement(react_1.default.Fragment, null, t(Translation_1.Translation.Step.Date.PleaseSelectYourDates)))));
 }
 exports.default = DaysSelectedInformer;
 //# sourceMappingURL=DaysSelectedInformer.js.map

package/dist/src/components/steps/DaysSelectedInformer.js.map

@@ -1 +1 @@
-{"version":3,"file":"DaysSelectedInformer.js","sourceRoot":"/","sources":["src/components/steps/DaysSelectedInformer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,iCAAmC;AAEnC,kEAA2D;AAC3D,wCAAqC;AAErC,iDAAuD;AAEvD,SAAwB,oBAAoB;IACxC,MAAM,SAAS,GAAG,IAAA,kBAAU,EAAC,4BAAiB,CAAC,CAAC;IAEhD,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,GAAG,SAAS,CAAC;IAEpE,IAAI,UAAU,GAAG,CAAC,CAAC;IACnB,MAAM,cAAc,GAAG,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,OAAO,CAAC;IAE9C,IAAI,SAAS,IAAI,cAAc,EAAE;QAC7B,UAAU,GAAG,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;KAChE;IAED,OAAO,CACH,8BAAC,cAAI,IAAC,IAAI,QAAC,KAAK,EAAE,aAAK,CAAC,OAAO,EAAE,IAAI,EAAE,eAAQ,CAAC,KAAK,IAChD,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,CACd;;QACc,UAAU;qBAAW,SAAS,aAAT,SAAS;QAAT,SAAS,CAAE,MAAM,CAAC,OAAO,CAAC;iBAAO,cAAc,aAAd,cAAc;QAAd,cAAc,CAAE,MAAM,CAAC,OAAO,CAAC,CAChG,CACN,CAAC,CAAC,CAAC,CACA,yFAA6B,CAChC,CACE,CACV,CAAC;AACN,CAAC;AAvBD,uCAuBC","sourcesContent":["import React from 'react';\nimport { useContext } from 'react';\n\nimport Text, { TextType } from '@/components/generic/Text';\nimport { Color } from '@/util/Color';\n\nimport { DatePickerContext } from '@frontend/contexts';\n\nexport default function DaysSelectedInformer() {\n    const dpContext = useContext(DatePickerContext);\n\n    const { startDate, endDate, hoveredMonth: hoveredDate } = dpContext;\n\n    let daysPicked = 0;\n    const correctEndDate = hoveredDate ?? endDate;\n\n    if (startDate && correctEndDate) {\n        daysPicked = correctEndDate.diff(dpContext.startDate, 'day');\n    }\n\n    return (\n        <Text bold color={Color.Success} type={TextType.Small}>\n            {daysPicked > 0 ? (\n                <>\n                    Selected {daysPicked} nights, {startDate?.format('D MMM')}, to {correctEndDate?.format('D MMM')}\n                </>\n            ) : (\n                <>Please select your dates</>\n            )}\n        </Text>\n    );\n}\n"]}
+{"version":3,"file":"DaysSelectedInformer.js","sourceRoot":"/","sources":["src/components/steps/DaysSelectedInformer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,kEAA2D;AAC3D,wCAAqC;AAErC,iDAAuD;AACvD,iDAA+C;AAC/C,4DAAyD;AAEzD,SAAwB,oBAAoB;IACxC,MAAM,SAAS,GAAG,IAAA,kBAAU,EAAC,4BAAiB,CAAC,CAAC;IAChD,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAE/B,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,GAAG,SAAS,CAAC;IAEpE,IAAI,UAAU,GAAG,CAAC,CAAC;IACnB,MAAM,cAAc,GAAG,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,OAAO,CAAC;IAE9C,IAAI,SAAS,IAAI,cAAc,EAAE;QAC7B,UAAU,GAAG,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;KAChE;IAED,OAAO,CACH,8BAAC,cAAI,IAAC,IAAI,QAAC,KAAK,EAAE,aAAK,CAAC,OAAO,EAAE,IAAI,EAAE,eAAQ,CAAC,KAAK,IAChD,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,CACd;QACK,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC;;QAAG,UAAU;;QAAG,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,WAAW,EAAE;cAAI,SAAS,aAAT,SAAS;QAAT,SAAS,CAAE,MAAM,CAAC,OAAO,CAAC;;QAAG,GAAG;QAC5I,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,WAAW,EAAE;aAAG,cAAc,aAAd,cAAc;QAAd,cAAc,CAAE,MAAM,CAAC,OAAO,CAAC,CACxE,CACN,CAAC,CAAC,CAAC,CACA,8DAAG,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAI,CACxD,CACE,CACV,CAAC;AACN,CAAC;AAzBD,uCAyBC","sourcesContent":["import React, { useContext } from 'react';\n\nimport Text, { TextType } from '@/components/generic/Text';\nimport { Color } from '@/util/Color';\n\nimport { DatePickerContext } from '@frontend/contexts';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from '@/translations/Translation';\n\nexport default function DaysSelectedInformer() {\n    const dpContext = useContext(DatePickerContext);\n    const { t } = useTranslation();\n\n    const { startDate, endDate, hoveredMonth: hoveredDate } = dpContext;\n\n    let daysPicked = 0;\n    const correctEndDate = hoveredDate ?? endDate;\n\n    if (startDate && correctEndDate) {\n        daysPicked = correctEndDate.diff(dpContext.startDate, 'day');\n    }\n\n    return (\n        <Text bold color={Color.Success} type={TextType.Small}>\n            {daysPicked > 0 ? (\n                <>\n                    {t(Translation.Step.Room.RoomInfo.Selected)} {daysPicked} {t(Translation.Misc.Night_plural).toLowerCase()}, {startDate?.format('D MMM')},{' '}\n                    {t(Translation.Misc.To).toLowerCase()} {correctEndDate?.format('D MMM')}\n                </>\n            ) : (\n                <>{t(Translation.Step.Date.PleaseSelectYourDates)}</>\n            )}\n        </Text>\n    );\n}\n"]}

package/dist/src/components/steps/addons/AddonCard.js

@@ -30,7 +30,7 @@ const react_1 = __importStar(require("react"));
 const react_i18next_1 = require("react-i18next");
 const contexts_1 = require("../../../contexts/index.js");
 const Addon_1 = require("../../../models/Addon/Addon");
-const Translation_1 = require("translations/Translation");
+const Translation_1 = require("../../../translations/Translation");
 const Color_1 = require("../../../util/Color");
 const BEButton_1 = __importDefault(require("../../generic/BEButton"));
 const Currency_1 = __importDefault(require("../../generic/Currency"));
@@ -141,22 +141,20 @@ const AddonCard = ({ addon, className }) => {
     const pricingTypeSuffix = (() => {
         switch (addon.pricingType) {
             case Addon_1.AddonPricingType.PER_STAY:
-                return 'QTY';
-            case Addon_1.AddonPricingType.PER_NIGHT:
-                return 'Night';
+                return t(Translation_1.Translation.Misc.QTY);
             case Addon_1.AddonPricingType.PER_PERSON:
-                return 'Person';
+                return t(Translation_1.Translation.Misc.Person);
             case Addon_1.AddonPricingType.PER_PERSON_OCCUPANCY_PER_NIGHT:
             case Addon_1.AddonPricingType.PER_PERSON_PER_NIGHT:
-                return 'Person per night';
+                return t(Translation_1.Translation.Misc.PersonPerNight);
             case Addon_1.AddonPricingType.PER_ADULT_OCCUPANCY_PER_NIGHT:
-                return 'Adult per night';
             case Addon_1.AddonPricingType.PER_CHILD_OCCUPANCY_PER_NIGHT:
-                return 'Adult per night';
+                return t(Translation_1.Translation.Misc.AdultPerNight);
+            case Addon_1.AddonPricingType.PER_NIGHT:
             case Addon_1.AddonPricingType.PER_QUANTITY_NAME_PER_NIGHT:
-                return 'Night';
+                return t(Translation_1.Translation.Misc.Night);
             case Addon_1.AddonPricingType.PER_ROOM_QUANTITY_PER_NIGHT:
-                return 'Per Room / Day';
+                return t(Translation_1.Translation.Misc.PerRoomDay);
         }
     })();
     const addonCardImageStyle = {};
@@ -168,7 +166,7 @@ const AddonCard = ({ addon, className }) => {
         addonCardImageStyle.backgroundSize = '50%';
         addonCardImageStyle.backgroundRepeat = 'no-repeat';
     }
-    return (react_1.default.createElement("div", { className: 'u-flex u-flex-flex-start u-rounded addon-card-wrapper ' + className + ' ' + classes, style: { backgroundColor: Color_1.Color.White } },
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('u-flex u-flex-flex-start u-rounded addon-card-wrapper', className, classes), style: { backgroundColor: Color_1.Color.White } },
         react_1.default.createElement("div", { className: "addon-card-image", style: addonCardImageStyle }),
         react_1.default.createElement("div", { className: "u-marg-heavy u-marg@m- u-w-100@xl" },
             react_1.default.createElement("div", { className: "u-flex" },
@@ -210,7 +208,7 @@ const AddonCard = ({ addon, className }) => {
                                         "/ ",
                                         t(Translation_1.Translation.Step.Date.Child))))))),
                         react_1.default.createElement("div", { className: "u-marg-bottom--light" },
-                            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Grey, inline: true, className: "u-nowrap" }, "Including Fees and Taxes"))),
+                            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Grey, inline: true, className: "u-nowrap" }, t(Translation_1.Translation.Step.Addon.IncludingFeesAndTaxes)))),
                     react_1.default.createElement("div", { className: "u-marg-top--light u-flex justify-content-end u-w-100@l- flex-column flex-lg-row" },
                         addonBasketRow ? (react_1.default.createElement("div", { className: "u-marg-right--light@l u-marg-bottom--light@l-" },
                             react_1.default.createElement(BEButton_1.default, { onClick: onClickRemove, textColor: Color_1.Color.White, backgroundColor: Color_1.Color.Navy, wide: true }, t(Translation_1.Translation.Step.Addon.Remove)))) : (react_1.default.createElement(react_1.default.Fragment, null)),

package/dist/src/components/steps/addons/AddonCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddonCard.js","sourceRoot":"/","sources":["src/components/steps/addons/AddonCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport { useTranslation } from 'react-i18next';\nimport { BasketContext } from '@frontend/contexts';\nimport { Addon, AddonPricingType, PriceInfo } from '@/models/Addon/Addon';\nimport { Translation } from 'translations/Translation';\nimport { Color } from '@/util/Color';\nimport BEButton from '@/components/generic/BEButton';\nimport Currency from '@/components/generic/Currency';\nimport Headline from '@/components/generic/Headline';\nimport NumberIncrement from '@/components/generic/NumberIncrement';\nimport Text, { TextType } from '@/components/generic/Text';\nimport classNames from 'classnames';\nimport Check from 'icons/Check';\nimport { useCurrentHotel } from '@frontend/hooks';\nimport { IDefaultSelectOption, Select } from '@/components/generic/Select/Select';\nimport ImageProvider, { ImageSize } from '@/providers/ImageProvider';\n\ninterface Props {\n    addon: Addon;\n    className?: string;\n}\n\nconst AddonCard = ({ addon, className }: Props) => {\n    const { t } = useTranslation();\n\n    const { hotel } = useCurrentHotel();\n    const basketContext = React.useContext(BasketContext);\n\n    const addonBasketRow = basketContext.getRowForAddon(addon);\n\n    const [quantity, setQuantity] = useState(1);\n    const [adultQuantity, setAdultQuantity] = useState(addonBasketRow ? addonBasketRow.getAdultQuantity() : 1);\n    const [childQuantity, setChildQuantity] = useState(addonBasketRow ? addonBasketRow.getChildQuantity() : 0);\n\n    const [priceInfo, setPriceInfo] = useState<PriceInfo>({ quantity: 1 });\n\n    const [selectedDate, setSelectedDate] = useState(addonBasketRow ? addonBasketRow.getSelectedDate() : '');\n    const [selectedTime, setSelectedTime] = useState(addonBasketRow ? addonBasketRow.getSelectedTime() : '');\n\n    useEffect(() => {\n        if (addonBasketRow) {\n            setPriceInfo(addon.availability[addonBasketRow.getSelectedDate()] ?? addon.availability[addon.firstDate as string]);\n            setSelectedDate(addonBasketRow.getSelectedDate() ?? addon.firstDate);\n            setSelectedTime(addonBasketRow.getSelectedTime() ?? '');\n            setQuantity(addonBasketRow.getQuantity());\n            setAdultQuantity(addonBasketRow.getAdultQuantity());\n            setChildQuantity(addonBasketRow.getChildQuantity());\n        } else {\n            setPriceInfo(addon.availability[addon.firstDate as string] ?? ([] as any));\n            setSelectedDate(addon.firstDate as string);\n            setSelectedTime(addon.availability[addon.firstDate as string]?.selectorTimes?.[0]?.value || '');\n        }\n    }, []);\n\n    const setDate = (date: any) => {\n        setPriceInfo(addon.availability[date]);\n        setSelectedDate(date);\n        setSelectedTime(addon.availability[date]?.selectorTimes?.[0]?.value || '');\n        if (addon.availability[date].quantity < quantity) {\n            setQuantity(addon.availability[date].quantity);\n        }\n    };\n\n    const onClickAddToCartHandler = () => {\n        basketContext.setAddonQuantities(\n            addon,\n            {\n                quantity,\n                adult: adultQuantity,\n                child: childQuantity,\n            },\n            selectedDate,\n            selectedTime\n        );\n    };\n\n    const classes = classNames({\n        '--active': !!basketContext.getRowForAddon(addon),\n    });\n\n    const onClickRemove = () => {\n        const selectedAddon = basketContext.basketAddonRows.find((row) => {\n            return row.getAddon().code === addon.code;\n        });\n        if (selectedAddon) basketContext.removeBasketAddonRow(selectedAddon);\n    };\n\n    const setQuantityOnChange = (val: any) => {\n        setQuantity(val);\n    };\n    const setAdultsQuantityOnChange = (val: any) => {\n        setAdultQuantity(val);\n    };\n    const setChildQuantityOnChange = (val: any) => {\n        setChildQuantity(val);\n    };\n    const setDateOnChange = (selected: string) => {\n        setDate(selected);\n    };\n    const setSelectedTimeOnChange = (selected: any) => {\n        setSelectedTime(selected);\n    };\n\n    const addonConfigurations = [\n        {\n            name: 'Date',\n            enabled: (addonBasketRow?.getNumberOfAvailableNights?.() as number) > 1 && !addonBasketRow?.getAddon().hideDatePicker,\n            element: (\n                <Select<IDefaultSelectOption, 'value'>\n                    nativeOnMobile\n                    options={addon.selectorDates}\n                    value={selectedDate}\n                    onChange={setDateOnChange}\n                    keyName=\"value\"\n                    labelName=\"text\"\n                    className=\"u-flex align-items-center\"\n                />\n            ),\n        },\n        {\n            name: 'Time',\n            enabled: priceInfo?.selectorTimes?.length !== 0,\n            element: (\n                <Select<IDefaultSelectOption, 'value'>\n                    nativeOnMobile\n                    options={priceInfo?.selectorTimes || []}\n                    value={selectedTime}\n                    onChange={setSelectedTimeOnChange}\n                    keyName=\"value\"\n                    labelName=\"text\"\n                    className=\"u-flex align-items-center\"\n                />\n            ),\n        },\n        {\n            name: Translation.Step.Addon.Quantity,\n            enabled: priceInfo?.price,\n            element: <NumberIncrement number={quantity} min={1} max={priceInfo.quantity} onChange={setQuantityOnChange} />,\n        },\n        {\n            name: Translation.Step.Date.Adult_plural,\n            enabled: priceInfo?.adultPrice,\n            element: <NumberIncrement number={adultQuantity} min={0} max={priceInfo.quantity - childQuantity} onChange={setAdultsQuantityOnChange} />,\n        },\n        {\n            name: Translation.Step.Date.Child_plural,\n            enabled: priceInfo?.childPrice,\n            element: <NumberIncrement number={childQuantity} min={0} max={priceInfo.quantity - adultQuantity} onChange={setChildQuantityOnChange} />,\n        },\n    ];\n\n    const pricingTypeSuffix = (() => {\n        switch (addon.pricingType) {\n            case AddonPricingType.PER_STAY:\n                return 'QTY';\n            case AddonPricingType.PER_NIGHT:\n                return 'Night';\n            case AddonPricingType.PER_PERSON:\n                return 'Person';\n            case AddonPricingType.PER_PERSON_OCCUPANCY_PER_NIGHT:\n            case AddonPricingType.PER_PERSON_PER_NIGHT:\n                return 'Person per night';\n            case AddonPricingType.PER_ADULT_OCCUPANCY_PER_NIGHT:\n                return 'Adult per night';\n            case AddonPricingType.PER_CHILD_OCCUPANCY_PER_NIGHT:\n                return 'Adult per night';\n            case AddonPricingType.PER_QUANTITY_NAME_PER_NIGHT:\n                return 'Night';\n            case AddonPricingType.PER_ROOM_QUANTITY_PER_NIGHT:\n                return 'Per Room / Day';\n        }\n    })();\n\n    const addonCardImageStyle: any = {};\n    if (addon.image) {\n        addonCardImageStyle.backgroundImage = `url('${ImageProvider.resizeImage(addon.image, ImageSize.Original)}')`;\n    } else {\n        addonCardImageStyle.backgroundImage = `url('${hotel?.logo && ImageProvider.resizeImage(hotel?.logo as string, ImageSize.Original)}')`;\n        addonCardImageStyle.backgroundSize = '50%';\n        addonCardImageStyle.backgroundRepeat = 'no-repeat';\n    }\n\n    return (\n        <div className={'u-flex u-flex-flex-start u-rounded addon-card-wrapper ' + className + ' ' + classes} style={{ backgroundColor: Color.White }}>\n            <div className=\"addon-card-image\" style={addonCardImageStyle} />\n            <div className=\"u-marg-heavy u-marg@m- u-w-100@xl\">\n                <div className=\"u-flex\">\n                    <Headline bold>{addon.name}</Headline>\n                    {addonBasketRow ? <Check /> : <></>}\n                </div>\n                <Text color={Color.DarkGrey} type={TextType.Small}>\n                    {addon.description}\n                </Text>\n                <div className=\"addon-card-wrapper--price u-flex u-flex-align-flex-end\">\n                    <div className=\"u-w-100\">\n                        {addonConfigurations.map((input) => {\n                            if (!input.enabled) {\n                                return;\n                            }\n\n                            return (\n                                <div key={input.name} className=\"u-flex justify-content-start u-marg-bot u-marg-top\">\n                                    <Text className=\"u-mw-100\" bold>\n                                        {t(input.name)}\n                                    </Text>\n                                    {input.element}\n                                </div>\n                            );\n                        })}\n\n                        {/* {addon.guaranteeDescription && (\n                            <>\n                                <h4 className=\"u-marg-bottom--light u-marg-top\">Guarantee</h4>\n                                <div className=\"u-marg-bot--heavy\">\n                                    <Text type={TextType.Small}>{addon.guaranteeDescription}</Text>\n                                </div>\n                            </>\n                        )}\n                        {addon.cancelPenalty && (\n                            <>\n                                <h4 className=\"u-marg-bottom--light u-marg-top\">Cancellation Policy</h4>\n                                <div className=\"u-marg-bot--heavy\">\n                                    <Text type={TextType.Small}>{addon.cancelPenalty}</Text>\n                                </div>\n                            </>\n                        )} */}\n                    </div>\n                    <div className=\"addon-card-wrapper--price-action\">\n                        <div className=\"u-flex u-flex-direction-column u-flex-align-flex-end\" style={{ alignSelf: 'flex-end' }}>\n                            <Text type={TextType.Small} color={Color.Navy} inline>\n                                {t(Translation.Misc.From)}\n                            </Text>\n                            <div className=\"room-details--content-price flex-align-items-baseline flex-row\">\n                                {priceInfo?.price && (\n                                    <>\n                                        <div className=\"u-flex align-items-end\">\n                                            <Headline size=\"large\" bold lineHeight=\"1em\">\n                                                <Currency hideDecimals>{priceInfo.price}</Currency>\n                                            </Headline>\n                                            <Text type={TextType.Small} color={Color.DarkGrey} inline className=\"u-marg-left--light u-clear-font-weight\">\n                                                / {pricingTypeSuffix}\n                                            </Text>\n                                        </div>\n                                    </>\n                                )}\n                                {(!!priceInfo?.adultPrice || !!priceInfo?.childPrice) && (\n                                    <h2 className=\"u-marg-none d-flex flex-wrap justify-content-end\">\n                                        {!!priceInfo.adultPrice && (\n                                            <div className=\"d-flex align-items-end flex-row\">\n                                                <Headline size=\"large\" bold lineHeight=\"1em\">\n                                                    <Currency>{priceInfo.adultPrice}</Currency>\n                                                </Headline>\n                                                <Text type={TextType.Small} color={Color.DarkGrey} inline className=\"u-marg-left--light u-clear-font-weight\">\n                                                    / {t(Translation.Step.Date.Adult)}\n                                                </Text>\n                                            </div>\n                                        )}\n                                        {!!priceInfo.adultPrice && !!priceInfo.childPrice && <br />}\n                                        {!!priceInfo.childPrice && (\n                                            <div className=\"d-flex align-items-end flex-row\">\n                                                <Headline size=\"large\" bold lineHeight=\"1em\">\n                                                    <Currency>{priceInfo.childPrice}</Currency>\n                                                </Headline>\n                                                <Text type={TextType.Small} color={Color.DarkGrey} inline className=\"u-marg-left--light u-clear-font-weight\">\n                                                    / {t(Translation.Step.Date.Child)}\n                                                </Text>\n                                            </div>\n                                        )}\n                                    </h2>\n                                )}\n                            </div>\n                            <div className=\"u-marg-bottom--light\">\n                                <Text type={TextType.Small} color={Color.Grey} inline className=\"u-nowrap\">\n                                    Including Fees and Taxes\n                                </Text>\n                            </div>\n                        </div>\n                        <div className=\"u-marg-top--light u-flex justify-content-end u-w-100@l- flex-column flex-lg-row\">\n                            {addonBasketRow ? (\n                                <div className=\"u-marg-right--light@l u-marg-bottom--light@l-\">\n                                    <BEButton onClick={onClickRemove} textColor={Color.White} backgroundColor={Color.Navy} wide>\n                                        {t(Translation.Step.Addon.Remove)}\n                                    </BEButton>\n                                </div>\n                            ) : (\n                                <></>\n                            )}\n                            <BEButton onClick={onClickAddToCartHandler} primary filled wide>\n                                {addonBasketRow ? t(Translation.Step.Addon.UpdateCart) : t(Translation.Step.Addon.AddToCart)}\n                            </BEButton>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default AddonCard;\n"]}
+{"version":3,"file":"AddonCard.js","sourceRoot":"/","sources":["src/components/steps/addons/AddonCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport { useTranslation } from 'react-i18next';\nimport { BasketContext } from '@frontend/contexts';\nimport { Addon, AddonPricingType, PriceInfo } from '@/models/Addon/Addon';\nimport { Translation } from '@/translations/Translation';\nimport { Color } from '@/util/Color';\nimport BEButton from '@/components/generic/BEButton';\nimport Currency from '@/components/generic/Currency';\nimport Headline from '@/components/generic/Headline';\nimport NumberIncrement from '@/components/generic/NumberIncrement';\nimport Text, { TextType } from '@/components/generic/Text';\nimport classNames from 'classnames';\nimport Check from 'icons/Check';\nimport { useCurrentHotel } from '@frontend/hooks';\nimport { IDefaultSelectOption, Select } from '@/components/generic/Select/Select';\nimport ImageProvider, { ImageSize } from '@/providers/ImageProvider';\n\ninterface Props {\n    addon: Addon;\n    className?: string;\n}\n\nconst AddonCard = ({ addon, className }: Props) => {\n    const { t } = useTranslation();\n\n    const { hotel } = useCurrentHotel();\n    const basketContext = React.useContext(BasketContext);\n\n    const addonBasketRow = basketContext.getRowForAddon(addon);\n\n    const [quantity, setQuantity] = useState(1);\n    const [adultQuantity, setAdultQuantity] = useState(addonBasketRow ? addonBasketRow.getAdultQuantity() : 1);\n    const [childQuantity, setChildQuantity] = useState(addonBasketRow ? addonBasketRow.getChildQuantity() : 0);\n\n    const [priceInfo, setPriceInfo] = useState<PriceInfo>({ quantity: 1 });\n\n    const [selectedDate, setSelectedDate] = useState(addonBasketRow ? addonBasketRow.getSelectedDate() : '');\n    const [selectedTime, setSelectedTime] = useState(addonBasketRow ? addonBasketRow.getSelectedTime() : '');\n\n    useEffect(() => {\n        if (addonBasketRow) {\n            setPriceInfo(addon.availability[addonBasketRow.getSelectedDate()] ?? addon.availability[addon.firstDate as string]);\n            setSelectedDate(addonBasketRow.getSelectedDate() ?? addon.firstDate);\n            setSelectedTime(addonBasketRow.getSelectedTime() ?? '');\n            setQuantity(addonBasketRow.getQuantity());\n            setAdultQuantity(addonBasketRow.getAdultQuantity());\n            setChildQuantity(addonBasketRow.getChildQuantity());\n        } else {\n            setPriceInfo(addon.availability[addon.firstDate as string] ?? ([] as any));\n            setSelectedDate(addon.firstDate as string);\n            setSelectedTime(addon.availability[addon.firstDate as string]?.selectorTimes?.[0]?.value || '');\n        }\n    }, []);\n\n    const setDate = (date: any) => {\n        setPriceInfo(addon.availability[date]);\n        setSelectedDate(date);\n        setSelectedTime(addon.availability[date]?.selectorTimes?.[0]?.value || '');\n        if (addon.availability[date].quantity < quantity) {\n            setQuantity(addon.availability[date].quantity);\n        }\n    };\n\n    const onClickAddToCartHandler = () => {\n        basketContext.setAddonQuantities(\n            addon,\n            {\n                quantity,\n                adult: adultQuantity,\n                child: childQuantity,\n            },\n            selectedDate,\n            selectedTime\n        );\n    };\n\n    const classes = classNames({\n        '--active': !!basketContext.getRowForAddon(addon),\n    });\n\n    const onClickRemove = () => {\n        const selectedAddon = basketContext.basketAddonRows.find((row) => {\n            return row.getAddon().code === addon.code;\n        });\n        if (selectedAddon) basketContext.removeBasketAddonRow(selectedAddon);\n    };\n\n    const setQuantityOnChange = (val: any) => {\n        setQuantity(val);\n    };\n    const setAdultsQuantityOnChange = (val: any) => {\n        setAdultQuantity(val);\n    };\n    const setChildQuantityOnChange = (val: any) => {\n        setChildQuantity(val);\n    };\n    const setDateOnChange = (selected: string) => {\n        setDate(selected);\n    };\n    const setSelectedTimeOnChange = (selected: any) => {\n        setSelectedTime(selected);\n    };\n\n    const addonConfigurations = [\n        {\n            name: 'Date',\n            enabled: (addonBasketRow?.getNumberOfAvailableNights?.() as number) > 1 && !addonBasketRow?.getAddon().hideDatePicker,\n            element: (\n                <Select<IDefaultSelectOption, 'value'>\n                    nativeOnMobile\n                    options={addon.selectorDates}\n                    value={selectedDate}\n                    onChange={setDateOnChange}\n                    keyName=\"value\"\n                    labelName=\"text\"\n                    className=\"u-flex align-items-center\"\n                />\n            ),\n        },\n        {\n            name: 'Time',\n            enabled: priceInfo?.selectorTimes?.length !== 0,\n            element: (\n                <Select<IDefaultSelectOption, 'value'>\n                    nativeOnMobile\n                    options={priceInfo?.selectorTimes || []}\n                    value={selectedTime}\n                    onChange={setSelectedTimeOnChange}\n                    keyName=\"value\"\n                    labelName=\"text\"\n                    className=\"u-flex align-items-center\"\n                />\n            ),\n        },\n        {\n            name: Translation.Step.Addon.Quantity,\n            enabled: priceInfo?.price,\n            element: <NumberIncrement number={quantity} min={1} max={priceInfo.quantity} onChange={setQuantityOnChange} />,\n        },\n        {\n            name: Translation.Step.Date.Adult_plural,\n            enabled: priceInfo?.adultPrice,\n            element: <NumberIncrement number={adultQuantity} min={0} max={priceInfo.quantity - childQuantity} onChange={setAdultsQuantityOnChange} />,\n        },\n        {\n            name: Translation.Step.Date.Child_plural,\n            enabled: priceInfo?.childPrice,\n            element: <NumberIncrement number={childQuantity} min={0} max={priceInfo.quantity - adultQuantity} onChange={setChildQuantityOnChange} />,\n        },\n    ];\n\n    const pricingTypeSuffix = (() => {\n        switch (addon.pricingType) {\n            case AddonPricingType.PER_STAY:\n                return t(Translation.Misc.QTY);\n            case AddonPricingType.PER_PERSON:\n                return t(Translation.Misc.Person);\n            case AddonPricingType.PER_PERSON_OCCUPANCY_PER_NIGHT:\n            case AddonPricingType.PER_PERSON_PER_NIGHT:\n                return t(Translation.Misc.PersonPerNight);\n            case AddonPricingType.PER_ADULT_OCCUPANCY_PER_NIGHT:\n            case AddonPricingType.PER_CHILD_OCCUPANCY_PER_NIGHT:\n                return t(Translation.Misc.AdultPerNight);\n            case AddonPricingType.PER_NIGHT:\n            case AddonPricingType.PER_QUANTITY_NAME_PER_NIGHT:\n                return t(Translation.Misc.Night);\n            case AddonPricingType.PER_ROOM_QUANTITY_PER_NIGHT:\n                return t(Translation.Misc.PerRoomDay);\n        }\n    })();\n\n    const addonCardImageStyle: any = {};\n    if (addon.image) {\n        addonCardImageStyle.backgroundImage = `url('${ImageProvider.resizeImage(addon.image, ImageSize.Original)}')`;\n    } else {\n        addonCardImageStyle.backgroundImage = `url('${hotel?.logo && ImageProvider.resizeImage(hotel?.logo as string, ImageSize.Original)}')`;\n        addonCardImageStyle.backgroundSize = '50%';\n        addonCardImageStyle.backgroundRepeat = 'no-repeat';\n    }\n\n    return (\n        <div className={classNames('u-flex u-flex-flex-start u-rounded addon-card-wrapper', className, classes)} style={{ backgroundColor: Color.White }}>\n            <div className=\"addon-card-image\" style={addonCardImageStyle} />\n            <div className=\"u-marg-heavy u-marg@m- u-w-100@xl\">\n                <div className=\"u-flex\">\n                    <Headline bold>{addon.name}</Headline>\n                    {addonBasketRow ? <Check /> : <></>}\n                </div>\n                <Text color={Color.DarkGrey} type={TextType.Small}>\n                    {addon.description}\n                </Text>\n                <div className=\"addon-card-wrapper--price u-flex u-flex-align-flex-end\">\n                    <div className=\"u-w-100\">\n                        {addonConfigurations.map((input) => {\n                            if (!input.enabled) {\n                                return;\n                            }\n\n                            return (\n                                <div key={input.name} className=\"u-flex justify-content-start u-marg-bot u-marg-top\">\n                                    <Text className=\"u-mw-100\" bold>\n                                        {t(input.name)}\n                                    </Text>\n                                    {input.element}\n                                </div>\n                            );\n                        })}\n\n                        {/* {addon.guaranteeDescription && (\n                            <>\n                                <h4 className=\"u-marg-bottom--light u-marg-top\">Guarantee</h4>\n                                <div className=\"u-marg-bot--heavy\">\n                                    <Text type={TextType.Small}>{addon.guaranteeDescription}</Text>\n                                </div>\n                            </>\n                        )}\n                        {addon.cancelPenalty && (\n                            <>\n                                <h4 className=\"u-marg-bottom--light u-marg-top\">Cancellation Policy</h4>\n                                <div className=\"u-marg-bot--heavy\">\n                                    <Text type={TextType.Small}>{addon.cancelPenalty}</Text>\n                                </div>\n                            </>\n                        )} */}\n                    </div>\n                    <div className=\"addon-card-wrapper--price-action\">\n                        <div className=\"u-flex u-flex-direction-column u-flex-align-flex-end\" style={{ alignSelf: 'flex-end' }}>\n                            <Text type={TextType.Small} color={Color.Navy} inline>\n                                {t(Translation.Misc.From)}\n                            </Text>\n                            <div className=\"room-details--content-price flex-align-items-baseline flex-row\">\n                                {priceInfo?.price && (\n                                    <>\n                                        <div className=\"u-flex align-items-end\">\n                                            <Headline size=\"large\" bold lineHeight=\"1em\">\n                                                <Currency hideDecimals>{priceInfo.price}</Currency>\n                                            </Headline>\n                                            <Text type={TextType.Small} color={Color.DarkGrey} inline className=\"u-marg-left--light u-clear-font-weight\">\n                                                / {pricingTypeSuffix}\n                                            </Text>\n                                        </div>\n                                    </>\n                                )}\n                                {(!!priceInfo?.adultPrice || !!priceInfo?.childPrice) && (\n                                    <h2 className=\"u-marg-none d-flex flex-wrap justify-content-end\">\n                                        {!!priceInfo.adultPrice && (\n                                            <div className=\"d-flex align-items-end flex-row\">\n                                                <Headline size=\"large\" bold lineHeight=\"1em\">\n                                                    <Currency>{priceInfo.adultPrice}</Currency>\n                                                </Headline>\n                                                <Text type={TextType.Small} color={Color.DarkGrey} inline className=\"u-marg-left--light u-clear-font-weight\">\n                                                    / {t(Translation.Step.Date.Adult)}\n                                                </Text>\n                                            </div>\n                                        )}\n                                        {!!priceInfo.adultPrice && !!priceInfo.childPrice && <br />}\n                                        {!!priceInfo.childPrice && (\n                                            <div className=\"d-flex align-items-end flex-row\">\n                                                <Headline size=\"large\" bold lineHeight=\"1em\">\n                                                    <Currency>{priceInfo.childPrice}</Currency>\n                                                </Headline>\n                                                <Text type={TextType.Small} color={Color.DarkGrey} inline className=\"u-marg-left--light u-clear-font-weight\">\n                                                    / {t(Translation.Step.Date.Child)}\n                                                </Text>\n                                            </div>\n                                        )}\n                                    </h2>\n                                )}\n                            </div>\n                            <div className=\"u-marg-bottom--light\">\n                                <Text type={TextType.Small} color={Color.Grey} inline className=\"u-nowrap\">\n                                    {t(Translation.Step.Addon.IncludingFeesAndTaxes)}\n                                </Text>\n                            </div>\n                        </div>\n                        <div className=\"u-marg-top--light u-flex justify-content-end u-w-100@l- flex-column flex-lg-row\">\n                            {addonBasketRow ? (\n                                <div className=\"u-marg-right--light@l u-marg-bottom--light@l-\">\n                                    <BEButton onClick={onClickRemove} textColor={Color.White} backgroundColor={Color.Navy} wide>\n                                        {t(Translation.Step.Addon.Remove)}\n                                    </BEButton>\n                                </div>\n                            ) : (\n                                <></>\n                            )}\n                            <BEButton onClick={onClickAddToCartHandler} primary filled wide>\n                                {addonBasketRow ? t(Translation.Step.Addon.UpdateCart) : t(Translation.Step.Addon.AddToCart)}\n                            </BEButton>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default AddonCard;\n"]}

package/dist/src/components/steps/confirmation/PaymentDetails/AcceptablePaymentCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"AcceptablePaymentCard.js","sourceRoot":"/","sources":["src/components/steps/confirmation/PaymentDetails/AcceptablePaymentCard.tsx"],"names":[],"mappings":";;;;;AACA,kDAA0B;AAC1B,0FAAkE;AAClE,oDAAmE;AACnE,2CAAkD;AAClD,4DAAoC;AAOpC,MAAM,qBAAqB,GAAmC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE;;IAC9F,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,uBAAe,GAAE,CAAC;IACpC,MAAM,SAAS,GAAG,CAAC,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,gBAAgB,mCAAI,EAAE,CAAC;SAC5C,GAAG,CAAC,CAAC,IAAY,EAAE,EAAE;QAClB,MAAM,OAAO,GAAG,qCAA0B,CAAC,IAAI,CAAC,CAAC;QACjD,IAAI,CAAC,OAAO,EAAE;YACV,OAAO,IAAI,CAAC;SACf;QAED,OAAO;YACH,IAAI,EAAE,qCAA0B,CAAC,IAAI,CAAC;YACtC,MAAM,EAAE,KAAK;SAChB,CAAC;IACN,CAAC,CAAC;SACD,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC;IAC1B,OAAO,CACH,uCAAK,SAAS,EAAC,uCAAuC,IACjD,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,OAAY,EAAE,EAAE;;QACzC,OAAO,CACH,uCACI,GAAG,EAAE,OAAO,EACZ,EAAE,EAAE,MAAA,SAAS,CAAC,OAAO,CAAC,0CAAE,IAAI,EAC5B,SAAS,EAAE,IAAA,oBAAU,EAAC,oCAAoC,EAAE;gBACxD,UAAU,EAAE,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,OAAO,CAAC;gBAChC,UAAU,EAAE,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,OAAO,CAAC;aACnC,CAAC,EACF,KAAK,EAAE,MAAM,CAAC,MAAM,CAChB,EAAE,eAAe,EAAE,QAAQ,6BAAmB,CAAC,WAAW,EAAE,GAAG,aAAa,IAAG,MAAA,SAAS,CAAC,OAAO,CAAC,0CAAE,IAAI,CAAA,GAAG,MAAM,IAAI,EAAE,cAAc,EAAE,SAAS,EAAE,EACjJ,KAAK,IAAI,EAAE,CACd,GACH,CACL,CAAC;IACN,CAAC,CAAC,CACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,qBAAqB,CAAC","sourcesContent":["import { CSSProperties, FC } from 'react';\nimport React from 'react';\nimport RoomstayThemeEngine from '@/providers/RoomstayThemeEngine';\nimport { SynxisToVGSCardNameMapping } from '@/models/Api/HotelDTO';\nimport { useCurrentHotel } from '@frontend/hooks';\nimport classNames from 'classnames';\n\ninterface AcceptablePaymentCardProps {\n    isCurrent?: (cardKey: any) => boolean;\n    isDefault?: (cardKey: any) => boolean;\n    style?: CSSProperties;\n}\nconst AcceptablePaymentCard: FC<AcceptablePaymentCardProps> = ({ isCurrent, isDefault, style }) => {\n    const { hotel } = useCurrentHotel();\n    const cardTypes = (hotel?.paymentCardTypes ?? [])\n        .map((card: string) => {\n            const mapping = SynxisToVGSCardNameMapping[card];\n            if (!mapping) {\n                return null;\n            }\n\n            return {\n                name: SynxisToVGSCardNameMapping[card],\n                status: false,\n            };\n        })\n        .filter((obj) => obj);\n    return (\n        <div className=\"u-flex flex-row justify-content-start\">\n            {Object.keys(cardTypes).map((cardKey: any) => {\n                return (\n                    <div\n                        key={cardKey}\n                        id={cardTypes[cardKey]?.name}\n                        className={classNames('cc-icon u-flex u-marg-right--light', {\n                            '-current': isCurrent?.(cardKey),\n                            '-default': isDefault?.(cardKey),\n                        })}\n                        style={Object.assign(\n                            { backgroundImage: `url('${RoomstayThemeEngine.getAssetUrl() + 'assets/img/' + cardTypes[cardKey]?.name + '.png'}')`, backgroundSize: 'contain' },\n                            style || {}\n                        )}\n                    />\n                );\n            })}\n        </div>\n    );\n};\n\nexport default AcceptablePaymentCard;\n"]}
+{"version":3,"file":"AcceptablePaymentCard.js","sourceRoot":"/","sources":["src/components/steps/confirmation/PaymentDetails/AcceptablePaymentCard.tsx"],"names":[],"mappings":";;;;;AACA,kDAA0B;AAC1B,0FAAkE;AAClE,oDAAmE;AACnE,2CAAkD;AAClD,4DAAoC;AAOpC,MAAM,qBAAqB,GAAmC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE;;IAC9F,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,uBAAe,GAAE,CAAC;IACpC,MAAM,SAAS,GAAG,CAAC,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,gBAAgB,mCAAI,EAAE,CAAC;SAC5C,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QACV,MAAM,OAAO,GAAG,qCAA0B,CAAC,IAAI,CAAC,CAAC;QACjD,IAAI,CAAC,OAAO,EAAE;YACV,OAAO,IAAI,CAAC;SACf;QAED,OAAO;YACH,IAAI,EAAE,qCAA0B,CAAC,IAAI,CAAC;YACtC,MAAM,EAAE,KAAK;SAChB,CAAC;IACN,CAAC,CAAC;SACD,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC;IAC1B,OAAO,CACH,uCAAK,SAAS,EAAC,uCAAuC,IACjD,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,OAAY,EAAE,EAAE;;QACzC,OAAO,CACH,uCACI,GAAG,EAAE,OAAO,EACZ,EAAE,EAAE,MAAA,SAAS,CAAC,OAAO,CAAC,0CAAE,IAAI,EAC5B,SAAS,EAAE,IAAA,oBAAU,EAAC,oCAAoC,EAAE;gBACxD,UAAU,EAAE,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,OAAO,CAAC;gBAChC,UAAU,EAAE,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,OAAO,CAAC;aACnC,CAAC,EACF,KAAK,EAAE,MAAM,CAAC,MAAM,CAChB,EAAE,eAAe,EAAE,QAAQ,6BAAmB,CAAC,WAAW,EAAE,GAAG,aAAa,IAAG,MAAA,SAAS,CAAC,OAAO,CAAC,0CAAE,IAAI,CAAA,GAAG,MAAM,IAAI,EAAE,cAAc,EAAE,SAAS,EAAE,EACjJ,KAAK,IAAI,EAAE,CACd,GACH,CACL,CAAC;IACN,CAAC,CAAC,CACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,qBAAqB,CAAC","sourcesContent":["import { CSSProperties, FC } from 'react';\nimport React from 'react';\nimport RoomstayThemeEngine from '@/providers/RoomstayThemeEngine';\nimport { SynxisToVGSCardNameMapping } from '@/models/Api/HotelDTO';\nimport { useCurrentHotel } from '@frontend/hooks';\nimport classNames from 'classnames';\n\ninterface AcceptablePaymentCardProps {\n    isCurrent?: (cardKey: any) => boolean;\n    isDefault?: (cardKey: any) => boolean;\n    style?: CSSProperties;\n}\nconst AcceptablePaymentCard: FC<AcceptablePaymentCardProps> = ({ isCurrent, isDefault, style }) => {\n    const { hotel } = useCurrentHotel();\n    const cardTypes = (hotel?.paymentCardTypes ?? [])\n        .map((card) => {\n            const mapping = SynxisToVGSCardNameMapping[card];\n            if (!mapping) {\n                return null;\n            }\n\n            return {\n                name: SynxisToVGSCardNameMapping[card],\n                status: false,\n            };\n        })\n        .filter((obj) => obj);\n    return (\n        <div className=\"u-flex flex-row justify-content-start\">\n            {Object.keys(cardTypes).map((cardKey: any) => {\n                return (\n                    <div\n                        key={cardKey}\n                        id={cardTypes[cardKey]?.name}\n                        className={classNames('cc-icon u-flex u-marg-right--light', {\n                            '-current': isCurrent?.(cardKey),\n                            '-default': isDefault?.(cardKey),\n                        })}\n                        style={Object.assign(\n                            { backgroundImage: `url('${RoomstayThemeEngine.getAssetUrl() + 'assets/img/' + cardTypes[cardKey]?.name + '.png'}')`, backgroundSize: 'contain' },\n                            style || {}\n                        )}\n                    />\n                );\n            })}\n        </div>\n    );\n};\n\nexport default AcceptablePaymentCard;\n"]}