@roomstay/frontend 2.0.11 → 2.1.0

package/dist/src/components/navigation/StepSelector.js

@@ -1,17 +1,43 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = require("react");
-const Text_1 = require("components/generic/Text");
-const Icon_1 = require("components/generic/Icon/Icon");
+const React = __importStar(require("react"));
+const Text_1 = __importStar(require("components/generic/Text"));
+const Icon_1 = __importStar(require("components/generic/Icon/Icon"));
 const react_router_dom_1 = require("react-router-dom");
 const react_1 = require("react");
-const StepManager_1 = require("util/StepManager");
+const StepManager_1 = __importDefault(require("util/StepManager"));
 const react_i18next_1 = require("react-i18next");
 const Translation_1 = require("translations/Translation");
-const classNames = require("classnames");
+const classnames_1 = __importDefault(require("classnames"));
 const Color_1 = require("util/Color");
-const StepSelectorModal_1 = require("components/navigation/StepSelectorModal");
-const ScreenSize_1 = require("util/ScreenSize");
+const StepSelectorModal_1 = __importDefault(require("components/navigation/StepSelectorModal"));
+const ScreenSize_1 = __importDefault(require("util/ScreenSize"));
 const contexts_1 = require("@frontend/contexts");
 const contexts_2 = require("@frontend/contexts");
 function StepSelector() {
@@ -54,7 +80,7 @@ function StepSelector() {
                             isClickable = true;
                         }
                     }
-                    const stepClassNames = classNames('step-selector__item', {
+                    const stepClassNames = (0, classnames_1.default)('step-selector__item', {
                         'is-current': currentStepIndex === prettyStep,
                         'is-valid': isClickable,
                         'is-complete': isPrevStep,

package/dist/src/components/navigation/StepSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepSelector.js","sourceRoot":"/","sources":["src/components/navigation/StepSelector.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport Text, { TextType } from 'components/generic/Text';\nimport Icon, { IconType } from 'components/generic/Icon/Icon';\nimport { Link } from 'react-router-dom';\nimport { useContext, useState } from 'react';\nimport StepManager from 'util/StepManager';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\nimport * as classNames from 'classnames';\nimport { Color } from 'util/Color';\nimport StepSelectorModal from 'components/navigation/StepSelectorModal';\nimport ScreenSize from 'util/ScreenSize';\nimport { BasketContext, BookingEngineContext } from '@frontend/contexts';\nimport Step from 'pages/steps/Step';\nimport { FullPageEngineContext } from '@frontend/contexts';\n\nexport default function StepSelector() {\n    const { screenSize } = useContext(BookingEngineContext);\n    const { currentStep } = useContext(FullPageEngineContext);\n    const basketContext = useContext(BasketContext);\n\n    const { t } = useTranslation();\n\n    const [modalOpen, setModalOpen] = useState(false);\n\n    const steps = StepManager.getSteps().filter((step) => (step.shouldShowOnNavigation() ? step : null));\n\n    const onDropdownClick = () => {\n        screenSize <= ScreenSize.Medium ? setModalOpen(true) : null;\n    };\n\n    const closeModal = () => {\n        setModalOpen(false);\n    };\n\n    const currentStepIndex = StepManager.getStepIndex(currentStep.getName());\n\n    return (\n        <>\n            <div className=\"step-dropdown\" onClick={onDropdownClick}>\n                <div className=\"step-container\">\n                    <span className=\"step-container-dropdown\">\n                        <Icon icon={IconType.Dropdown} />\n                    </span>\n                    <div className=\"step-awards\">\n                        <img alt=\"\" style={{ width: '80px' }} />\n                    </div>\n                    <ul className=\"step-selector\">\n                        {steps.map((step: Step, stepIndex: number) => {\n                            const stepName = t(step.getStepTranslation());\n\n                            const prettyStep = stepIndex + 1;\n\n                            const isPrevStep = currentStepIndex > prettyStep;\n\n                            let stepNumber: JSX.Element;\n                            if (isPrevStep) {\n                                stepNumber = <Icon icon={IconType.Check} color={Color.White} size=\"24px\" />;\n                            } else {\n                                stepNumber = (\n                                    <Text type={TextType.Small}>\n                                        <strong>{'0' + prettyStep}</strong>\n                                    </Text>\n                                );\n                            }\n\n                            let isClickable = false;\n\n                            if (step) {\n                                const stepValidator = step.getValidator();\n\n                                if (stepValidator && stepValidator.isValid(basketContext)) {\n                                    isClickable = true;\n                                }\n                            }\n\n                            const stepClassNames = classNames('step-selector__item', {\n                                'is-current': currentStepIndex === prettyStep,\n                                'is-valid': isClickable,\n                                'is-complete': isPrevStep,\n                                'is-disabled': !isPrevStep && currentStepIndex !== prettyStep && !isClickable,\n                            });\n\n                            return (\n                                <li className={stepClassNames} key={prettyStep}>\n                                    <span className=\"step-selector__count\">{stepNumber}</span>\n                                    <div>\n                                        <span className=\"step-selector__step-count-mobile\">\n                                            <Text type={TextType.Small} color={Color.Navy}>\n                                                <strong>{t(Translation.Navigation.Steps.StepProgress, { step: prettyStep, maxSteps: StepManager.getSteps().length })}</strong>\n                                            </Text>\n                                        </span>\n                                        <Text>\n                                            <strong>{stepName}</strong>\n                                        </Text>\n                                    </div>\n                                    <Link to={step.getStepUrl()} />\n                                </li>\n                            );\n                        })}\n                    </ul>\n                </div>\n            </div>\n            {screenSize <= ScreenSize.Medium && <StepSelectorModal isOpen={modalOpen} onClose={closeModal} />}\n        </>\n    );\n}\n"]}
+{"version":3,"file":"StepSelector.js","sourceRoot":"/","sources":["src/components/navigation/StepSelector.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport Text, { TextType } from 'components/generic/Text';\nimport Icon, { IconType } from 'components/generic/Icon/Icon';\nimport { Link } from 'react-router-dom';\nimport { useContext, useState } from 'react';\nimport StepManager from 'util/StepManager';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\nimport classNames from 'classnames';\nimport { Color } from 'util/Color';\nimport StepSelectorModal from 'components/navigation/StepSelectorModal';\nimport ScreenSize from 'util/ScreenSize';\nimport { BasketContext, BookingEngineContext } from '@frontend/contexts';\nimport Step from 'pages/steps/Step';\nimport { FullPageEngineContext } from '@frontend/contexts';\n\nexport default function StepSelector() {\n    const { screenSize } = useContext(BookingEngineContext);\n    const { currentStep } = useContext(FullPageEngineContext);\n    const basketContext = useContext(BasketContext);\n\n    const { t } = useTranslation();\n\n    const [modalOpen, setModalOpen] = useState(false);\n\n    const steps = StepManager.getSteps().filter((step) => (step.shouldShowOnNavigation() ? step : null));\n\n    const onDropdownClick = () => {\n        screenSize <= ScreenSize.Medium ? setModalOpen(true) : null;\n    };\n\n    const closeModal = () => {\n        setModalOpen(false);\n    };\n\n    const currentStepIndex = StepManager.getStepIndex(currentStep.getName());\n\n    return (\n        <>\n            <div className=\"step-dropdown\" onClick={onDropdownClick}>\n                <div className=\"step-container\">\n                    <span className=\"step-container-dropdown\">\n                        <Icon icon={IconType.Dropdown} />\n                    </span>\n                    <div className=\"step-awards\">\n                        <img alt=\"\" style={{ width: '80px' }} />\n                    </div>\n                    <ul className=\"step-selector\">\n                        {steps.map((step: Step, stepIndex: number) => {\n                            const stepName = t(step.getStepTranslation());\n\n                            const prettyStep = stepIndex + 1;\n\n                            const isPrevStep = currentStepIndex > prettyStep;\n\n                            let stepNumber: JSX.Element;\n                            if (isPrevStep) {\n                                stepNumber = <Icon icon={IconType.Check} color={Color.White} size=\"24px\" />;\n                            } else {\n                                stepNumber = (\n                                    <Text type={TextType.Small}>\n                                        <strong>{'0' + prettyStep}</strong>\n                                    </Text>\n                                );\n                            }\n\n                            let isClickable = false;\n\n                            if (step) {\n                                const stepValidator = step.getValidator();\n\n                                if (stepValidator && stepValidator.isValid(basketContext)) {\n                                    isClickable = true;\n                                }\n                            }\n\n                            const stepClassNames = classNames('step-selector__item', {\n                                'is-current': currentStepIndex === prettyStep,\n                                'is-valid': isClickable,\n                                'is-complete': isPrevStep,\n                                'is-disabled': !isPrevStep && currentStepIndex !== prettyStep && !isClickable,\n                            });\n\n                            return (\n                                <li className={stepClassNames} key={prettyStep}>\n                                    <span className=\"step-selector__count\">{stepNumber}</span>\n                                    <div>\n                                        <span className=\"step-selector__step-count-mobile\">\n                                            <Text type={TextType.Small} color={Color.Navy}>\n                                                <strong>{t(Translation.Navigation.Steps.StepProgress, { step: prettyStep, maxSteps: StepManager.getSteps().length })}</strong>\n                                            </Text>\n                                        </span>\n                                        <Text>\n                                            <strong>{stepName}</strong>\n                                        </Text>\n                                    </div>\n                                    <Link to={step.getStepUrl()} />\n                                </li>\n                            );\n                        })}\n                    </ul>\n                </div>\n            </div>\n            {screenSize <= ScreenSize.Medium && <StepSelectorModal isOpen={modalOpen} onClose={closeModal} />}\n        </>\n    );\n}\n"]}

package/dist/src/components/navigation/StepSelectorModal.js

@@ -1,16 +1,42 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-const SimpleModal_1 = require("components/generic/modal/SimpleModal");
+const SimpleModal_1 = __importDefault(require("components/generic/modal/SimpleModal"));
 const react_i18next_1 = require("react-i18next");
 const react_1 = require("react");
 const Translation_1 = require("translations/Translation");
-const React = require("react");
-const classNames = require("classnames");
-const Icon_1 = require("components/generic/Icon/Icon");
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const Icon_1 = __importStar(require("components/generic/Icon/Icon"));
 const Color_1 = require("util/Color");
-const Text_1 = require("components/generic/Text");
+const Text_1 = __importDefault(require("components/generic/Text"));
 const react_router_dom_1 = require("react-router-dom");
-const StepManager_1 = require("util/StepManager");
+const StepManager_1 = __importDefault(require("util/StepManager"));
 const contexts_1 = require("@frontend/contexts");
 const contexts_2 = require("@frontend/contexts");
 function StepSelectorModal(props) {
@@ -42,7 +68,7 @@ function StepSelectorModal(props) {
                     isClickable = true;
                 }
             }
-            const stepClassNames = classNames('step-selector__item', {
+            const stepClassNames = (0, classnames_1.default)('step-selector__item', {
                 'is-current': currentStepIndex === prettyStep,
                 'is-valid': isClickable,
                 'is-complete': isPrevStep,

package/dist/src/components/navigation/StepSelectorModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepSelectorModal.js","sourceRoot":"/","sources":["src/components/navigation/StepSelectorModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import SimpleModal from 'components/generic/modal/SimpleModal';\nimport { useTranslation } from 'react-i18next';\nimport { useContext } from 'react';\nimport { Translation } from 'translations/Translation';\nimport * as React from 'react';\nimport * as classNames from 'classnames';\n\nimport Icon, { IconType } from 'components/generic/Icon/Icon';\nimport { Color } from 'util/Color';\nimport Text from 'components/generic/Text';\nimport { Link } from 'react-router-dom';\nimport StepManager from 'util/StepManager';\nimport { BasketContext } from '@frontend/contexts';\nimport Step from 'pages/steps/Step';\nimport { FullPageEngineContext } from '@frontend/contexts';\n\nexport interface StepSelectorModalProps {\n    isOpen?: boolean;\n    onClose?: () => void;\n}\n\nexport default function StepSelectorModal(props: StepSelectorModalProps) {\n    const { currentStep } = useContext(FullPageEngineContext);\n    const basketContext = useContext(BasketContext);\n\n    const { t } = useTranslation();\n\n    const steps = StepManager.getSteps().filter((step) => (step.shouldShowOnNavigation() ? step : null));\n\n    const onModalClose = () => {\n        return props.onClose ? props.onClose() : null;\n    };\n\n    const currentStepIndex = StepManager.getStepIndex(currentStep.getName());\n\n    return (\n        <SimpleModal open={props.isOpen} title={t(Translation.Navigation.SelectStep)} onClose={onModalClose}>\n            <ul className=\"step-selector --horizontal\">\n                {steps.map((step: Step, stepIndex: number) => {\n                    const stepName = t(step.getStepTranslation());\n\n                    const prettyStep = stepIndex + 1;\n\n                    const isPrevStep = currentStepIndex > prettyStep;\n\n                    let stepNumber: JSX.Element;\n                    if (isPrevStep) {\n                        stepNumber = <Icon icon={IconType.Check} color={Color.White} size=\"24px\" />;\n                    } else {\n                        stepNumber = (\n                            <Text>\n                                <strong>{'0' + prettyStep}</strong>\n                            </Text>\n                        );\n                    }\n\n                    let isClickable = false;\n\n                    if (step) {\n                        const stepValidator = step.getValidator();\n\n                        if (stepValidator && stepValidator.isValid(basketContext)) {\n                            isClickable = true;\n                        }\n                    }\n\n                    const stepClassNames = classNames('step-selector__item', {\n                        'is-current': currentStepIndex === prettyStep,\n                        'is-valid': isClickable,\n                        'is-complete': isPrevStep,\n                        'is-disabled': !isPrevStep && currentStepIndex !== prettyStep && !isClickable,\n                    });\n\n                    const closeOnClick = () => {\n                        props.onClose();\n                    };\n                    return (\n                        <li className={stepClassNames} key={stepIndex} onClick={closeOnClick}>\n                            <span className=\"step-selector__count\">{stepNumber}</span>\n                            <div>\n                                <Text>\n                                    <strong>{stepName}</strong>\n                                </Text>\n                            </div>\n                            <Link to={step.getStepUrl()} />\n                        </li>\n                    );\n                })}\n            </ul>\n        </SimpleModal>\n    );\n}\n"]}
+{"version":3,"file":"StepSelectorModal.js","sourceRoot":"/","sources":["src/components/navigation/StepSelectorModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import SimpleModal from 'components/generic/modal/SimpleModal';\nimport { useTranslation } from 'react-i18next';\nimport { useContext } from 'react';\nimport { Translation } from 'translations/Translation';\nimport * as React from 'react';\nimport classNames from 'classnames';\n\nimport Icon, { IconType } from 'components/generic/Icon/Icon';\nimport { Color } from 'util/Color';\nimport Text from 'components/generic/Text';\nimport { Link } from 'react-router-dom';\nimport StepManager from 'util/StepManager';\nimport { BasketContext } from '@frontend/contexts';\nimport Step from 'pages/steps/Step';\nimport { FullPageEngineContext } from '@frontend/contexts';\n\nexport interface StepSelectorModalProps {\n    isOpen?: boolean;\n    onClose?: () => void;\n}\n\nexport default function StepSelectorModal(props: StepSelectorModalProps) {\n    const { currentStep } = useContext(FullPageEngineContext);\n    const basketContext = useContext(BasketContext);\n\n    const { t } = useTranslation();\n\n    const steps = StepManager.getSteps().filter((step) => (step.shouldShowOnNavigation() ? step : null));\n\n    const onModalClose = () => {\n        return props.onClose ? props.onClose() : null;\n    };\n\n    const currentStepIndex = StepManager.getStepIndex(currentStep.getName());\n\n    return (\n        <SimpleModal open={props.isOpen} title={t(Translation.Navigation.SelectStep)} onClose={onModalClose}>\n            <ul className=\"step-selector --horizontal\">\n                {steps.map((step: Step, stepIndex: number) => {\n                    const stepName = t(step.getStepTranslation());\n\n                    const prettyStep = stepIndex + 1;\n\n                    const isPrevStep = currentStepIndex > prettyStep;\n\n                    let stepNumber: JSX.Element;\n                    if (isPrevStep) {\n                        stepNumber = <Icon icon={IconType.Check} color={Color.White} size=\"24px\" />;\n                    } else {\n                        stepNumber = (\n                            <Text>\n                                <strong>{'0' + prettyStep}</strong>\n                            </Text>\n                        );\n                    }\n\n                    let isClickable = false;\n\n                    if (step) {\n                        const stepValidator = step.getValidator();\n\n                        if (stepValidator && stepValidator.isValid(basketContext)) {\n                            isClickable = true;\n                        }\n                    }\n\n                    const stepClassNames = classNames('step-selector__item', {\n                        'is-current': currentStepIndex === prettyStep,\n                        'is-valid': isClickable,\n                        'is-complete': isPrevStep,\n                        'is-disabled': !isPrevStep && currentStepIndex !== prettyStep && !isClickable,\n                    });\n\n                    const closeOnClick = () => {\n                        props.onClose();\n                    };\n                    return (\n                        <li className={stepClassNames} key={stepIndex} onClick={closeOnClick}>\n                            <span className=\"step-selector__count\">{stepNumber}</span>\n                            <div>\n                                <Text>\n                                    <strong>{stepName}</strong>\n                                </Text>\n                            </div>\n                            <Link to={step.getStepUrl()} />\n                        </li>\n                    );\n                })}\n            </ul>\n        </SimpleModal>\n    );\n}\n"]}

package/dist/src/components/pages/Account/Card/CardList.js

@@ -1,9 +1,35 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CardList = void 0;
-const React = require("react");
-const CardList_module_scss_1 = require("./CardList.module.scss");
-const classNames = require("classnames");
+const React = __importStar(require("react"));
+const CardList_module_scss_1 = __importDefault(require("./CardList.module.scss"));
+const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("swiper/react");
 const MemberCardItem_1 = require("./MemberCardItem");
 const CardList = ({ options = [], onChange, value, onNewCardClicked }) => {
@@ -12,7 +38,7 @@ const CardList = ({ options = [], onChange, value, onNewCardClicked }) => {
     };
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: CardList_module_scss_1.default['card-list'] },
-            React.createElement(react_1.Swiper, { className: classNames(CardList_module_scss_1.default['card-list-swiper'], 'u-marg-bottom--heavy', 'u-marg-bottom--none@l'), breakpoints: {
+            React.createElement(react_1.Swiper, { className: (0, classnames_1.default)(CardList_module_scss_1.default['card-list-swiper'], 'u-marg-bottom--heavy', 'u-marg-bottom--none@l'), breakpoints: {
                     992: {
                         enabled: false,
                         spaceBetween: 0,

package/dist/src/components/pages/Account/Card/CardList.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardList.js","sourceRoot":"/","sources":["src/components/pages/Account/Card/CardList.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,iEAA4C;AAC5C,yCAAyC;AAEzC,wCAAmD;AAEnD,qDAAkD;AAe3C,MAAM,QAAQ,GAAsB,CAAC,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,gBAAgB,EAAE,EAAE,EAAE;IAC/F,MAAM,aAAa,GAAG,CAAC,IAA0B,EAAE,EAAE;QACjD,QAAQ,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC,CAAC;IAEF,OAAO,CACH;QACI,6BAAK,SAAS,EAAE,8BAAM,CAAC,WAAW,CAAC;YAC/B,oBAAC,cAAM,IACH,SAAS,EAAE,UAAU,CAAC,8BAAM,CAAC,kBAAkB,CAAC,EAAE,sBAAsB,EAAE,uBAAuB,CAAC,EAClG,WAAW,EAAE;oBACT,GAAG,EAAE;wBACD,OAAO,EAAE,KAAK;wBACd,YAAY,EAAE,CAAC;qBAClB;iBACJ,EACD,YAAY,EAAE,CAAC,EACf,OAAO,QACP,aAAa,EAAC,MAAM;gBAEnB,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;oBAClB,MAAM,OAAO,GAAG,GAAG,EAAE;wBACjB,aAAa,CAAC,IAAI,CAAC,CAAC;oBACxB,CAAC,CAAC;oBAEF,OAAO,CACH,oBAAC,mBAAW,IACR,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,KAAK,EAAE;4BACH,KAAK,EAAE,MAAM;yBAChB;wBAED,oBAAC,+BAAc,IAAC,QAAQ,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,MAAK,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,GAAI,CAC/E,CACjB,CAAC;gBACN,CAAC,CAAC;gBACF,oBAAC,mBAAW,IACR,KAAK,EAAE;wBACH,KAAK,EAAE,MAAM;qBAChB;oBAED,oBAAC,+BAAc,IAAC,QAAQ,EAAE,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,CAAA,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,EAAI,GAAI,CACvE,CACT,CACP,CACP,CACN,CAAC;AACN,CAAC,CAAC;AA/CW,QAAA,QAAQ,YA+CnB","sourcesContent":["import * as React from 'react';\nimport { FC } from 'react';\nimport styles from './CardList.module.scss';\nimport * as classNames from 'classnames';\n\nimport { Swiper, SwiperSlide } from 'swiper/react';\nimport { IRoomstayMemberCards } from '@roomstay/core';\nimport { MemberCardItem } from './MemberCardItem';\n\ndeclare global {\n    interface Window {\n        VGSShow: any;\n    }\n}\n\ntype CardListProps = {\n    options?: IRoomstayMemberCards[];\n    onChange?: (list: IRoomstayMemberCards) => void;\n    value?: Partial<IRoomstayMemberCards>;\n    onNewCardClicked?: () => void;\n};\n\nexport const CardList: FC<CardListProps> = ({ options = [], onChange, value, onNewCardClicked }) => {\n    const onCardClicked = (card: IRoomstayMemberCards) => {\n        onChange(card);\n    };\n\n    return (\n        <>\n            <div className={styles['card-list']}>\n                <Swiper\n                    className={classNames(styles['card-list-swiper'], 'u-marg-bottom--heavy', 'u-marg-bottom--none@l')}\n                    breakpoints={{\n                        992: {\n                            enabled: false,\n                            spaceBetween: 0,\n                        },\n                    }}\n                    spaceBetween={8}\n                    enabled\n                    slidesPerView=\"auto\"\n                >\n                    {options.map((card) => {\n                        const onClick = () => {\n                            onCardClicked(card);\n                        };\n\n                        return (\n                            <SwiperSlide\n                                key={card.cardId}\n                                style={{\n                                    width: 'auto',\n                                }}\n                            >\n                                <MemberCardItem selected={value?.cardId === card.cardId} item={card} onClick={onClick} />\n                            </SwiperSlide>\n                        );\n                    })}\n                    <SwiperSlide\n                        style={{\n                            width: 'auto',\n                        }}\n                    >\n                        <MemberCardItem selected={!value?.cardId} onClick={() => onNewCardClicked?.()} />\n                    </SwiperSlide>\n                </Swiper>\n            </div>\n        </>\n    );\n};\n"]}
+{"version":3,"file":"CardList.js","sourceRoot":"/","sources":["src/components/pages/Account/Card/CardList.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAE/B,kFAA4C;AAC5C,4DAAoC;AAEpC,wCAAmD;AAEnD,qDAAkD;AAe3C,MAAM,QAAQ,GAAsB,CAAC,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,gBAAgB,EAAE,EAAE,EAAE;IAC/F,MAAM,aAAa,GAAG,CAAC,IAA0B,EAAE,EAAE;QACjD,QAAQ,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC,CAAC;IAEF,OAAO,CACH;QACI,6BAAK,SAAS,EAAE,8BAAM,CAAC,WAAW,CAAC;YAC/B,oBAAC,cAAM,IACH,SAAS,EAAE,IAAA,oBAAU,EAAC,8BAAM,CAAC,kBAAkB,CAAC,EAAE,sBAAsB,EAAE,uBAAuB,CAAC,EAClG,WAAW,EAAE;oBACT,GAAG,EAAE;wBACD,OAAO,EAAE,KAAK;wBACd,YAAY,EAAE,CAAC;qBAClB;iBACJ,EACD,YAAY,EAAE,CAAC,EACf,OAAO,QACP,aAAa,EAAC,MAAM;gBAEnB,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;oBAClB,MAAM,OAAO,GAAG,GAAG,EAAE;wBACjB,aAAa,CAAC,IAAI,CAAC,CAAC;oBACxB,CAAC,CAAC;oBAEF,OAAO,CACH,oBAAC,mBAAW,IACR,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,KAAK,EAAE;4BACH,KAAK,EAAE,MAAM;yBAChB;wBAED,oBAAC,+BAAc,IAAC,QAAQ,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,MAAK,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,GAAI,CAC/E,CACjB,CAAC;gBACN,CAAC,CAAC;gBACF,oBAAC,mBAAW,IACR,KAAK,EAAE;wBACH,KAAK,EAAE,MAAM;qBAChB;oBAED,oBAAC,+BAAc,IAAC,QAAQ,EAAE,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,CAAA,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,EAAI,GAAI,CACvE,CACT,CACP,CACP,CACN,CAAC;AACN,CAAC,CAAC;AA/CW,QAAA,QAAQ,YA+CnB","sourcesContent":["import * as React from 'react';\nimport { FC } from 'react';\nimport styles from './CardList.module.scss';\nimport classNames from 'classnames';\n\nimport { Swiper, SwiperSlide } from 'swiper/react';\nimport { IRoomstayMemberCards } from '@roomstay/core';\nimport { MemberCardItem } from './MemberCardItem';\n\ndeclare global {\n    interface Window {\n        VGSShow: any;\n    }\n}\n\ntype CardListProps = {\n    options?: IRoomstayMemberCards[];\n    onChange?: (list: IRoomstayMemberCards) => void;\n    value?: Partial<IRoomstayMemberCards>;\n    onNewCardClicked?: () => void;\n};\n\nexport const CardList: FC<CardListProps> = ({ options = [], onChange, value, onNewCardClicked }) => {\n    const onCardClicked = (card: IRoomstayMemberCards) => {\n        onChange(card);\n    };\n\n    return (\n        <>\n            <div className={styles['card-list']}>\n                <Swiper\n                    className={classNames(styles['card-list-swiper'], 'u-marg-bottom--heavy', 'u-marg-bottom--none@l')}\n                    breakpoints={{\n                        992: {\n                            enabled: false,\n                            spaceBetween: 0,\n                        },\n                    }}\n                    spaceBetween={8}\n                    enabled\n                    slidesPerView=\"auto\"\n                >\n                    {options.map((card) => {\n                        const onClick = () => {\n                            onCardClicked(card);\n                        };\n\n                        return (\n                            <SwiperSlide\n                                key={card.cardId}\n                                style={{\n                                    width: 'auto',\n                                }}\n                            >\n                                <MemberCardItem selected={value?.cardId === card.cardId} item={card} onClick={onClick} />\n                            </SwiperSlide>\n                        );\n                    })}\n                    <SwiperSlide\n                        style={{\n                            width: 'auto',\n                        }}\n                    >\n                        <MemberCardItem selected={!value?.cardId} onClick={() => onNewCardClicked?.()} />\n                    </SwiperSlide>\n                </Swiper>\n            </div>\n        </>\n    );\n};\n"]}

package/dist/src/components/pages/Account/Card/MemberCardItem.js

@@ -1,22 +1,48 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MemberCardItem = void 0;
 const contexts_1 = require("@frontend/contexts");
-const classNames = require("classnames");
-const BEButton_1 = require("components/generic/BEButton");
+const classnames_1 = __importDefault(require("classnames"));
+const BEButton_1 = __importDefault(require("components/generic/BEButton"));
 const Icon_1 = require("components/generic/Icon/Icon");
-const Pill_1 = require("components/generic/Pill");
-const Text_1 = require("components/generic/Text");
-const RoomstayThemeEngine_1 = require("providers/RoomstayThemeEngine");
-const React = require("react");
+const Pill_1 = __importStar(require("components/generic/Pill"));
+const Text_1 = __importStar(require("components/generic/Text"));
+const RoomstayThemeEngine_1 = __importDefault(require("providers/RoomstayThemeEngine"));
+const React = __importStar(require("react"));
 const Color_1 = require("util/Color");
 const PaymentCardHelper_1 = require("util/PaymentCardHelper");
-const MemberCardItem_module_scss_1 = require("./MemberCardItem.module.scss");
+const MemberCardItem_module_scss_1 = __importDefault(require("./MemberCardItem.module.scss"));
 const MemberCardItem = (props) => {
     var _a, _b, _c, _d;
     const { item, onClick, selected } = props;
     const { roomstayMember } = React.useContext(contexts_1.RoomstayMemberContext);
-    const cardClasses = classNames(MemberCardItem_module_scss_1.default['card'], {
+    const cardClasses = (0, classnames_1.default)(MemberCardItem_module_scss_1.default['card'], {
         [MemberCardItem_module_scss_1.default['--selected']]: selected,
     });
     const cardGraphics = (0, PaymentCardHelper_1.mapCardTypeToGraphic)(item === null || item === void 0 ? void 0 : item.type);

package/dist/src/components/pages/Account/Card/MemberCardItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MemberCardItem.js","sourceRoot":"/","sources":["src/components/pages/Account/Card/MemberCardItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RoomstayMemberContext } from '@frontend/contexts';\nimport { IRoomstayMemberCards } from '@roomstay/core';\nimport * as classNames from 'classnames';\nimport BEButton from 'components/generic/BEButton';\nimport { IconType } from 'components/generic/Icon/Icon';\nimport Pill, { PillType } from 'components/generic/Pill';\nimport Text, { TextType } from 'components/generic/Text';\nimport { ECardType } from 'models/PaymentCard';\nimport RoomstayThemeEngine from 'providers/RoomstayThemeEngine';\nimport * as React from 'react';\nimport { Color } from 'util/Color';\nimport { mapCardTypeToGraphic } from 'util/PaymentCardHelper';\n\nimport styles from './MemberCardItem.module.scss';\n\ntype MemberCardItemProps = {\n    item?: IRoomstayMemberCards;\n    onClick?: () => void;\n    selected?: boolean;\n};\n\nexport const MemberCardItem = (props: MemberCardItemProps) => {\n    const { item, onClick, selected } = props;\n    const { roomstayMember } = React.useContext(RoomstayMemberContext);\n\n    const cardClasses = classNames(styles['card'], {\n        [styles['--selected']]: selected,\n    });\n\n    const cardGraphics = mapCardTypeToGraphic(item?.type as ECardType);\n    const iconUrl = cardGraphics.miniCardUrl;\n\n    const hiddenCardNumber = item?.cardNumber?.substring(item?.cardNumber?.length - 4);\n\n    const renderedIcon = iconUrl ? <img src={iconUrl} alt={item?.type} /> : <img src={RoomstayThemeEngine.getImageAssetUrl() + 'add-card.svg'} alt=\"Add card\" />;\n    const expirationDate = item?.expiry?.substring(0, 2) + ' / ' + item?.expiry?.substring(2);\n\n    return (\n        <div className={cardClasses} onClick={() => onClick?.()}>\n            <div className={styles['card-infographic']}>{renderedIcon}</div>\n            <div className={styles['card-details']}>\n                {item ? (\n                    <>\n                        {/** TODO: check if card is on users default card object */}\n                        {roomstayMember?.defaultCard === item.cardId && (\n                            <div className=\"u-marg-bottom--light\">\n                                <Pill size={'small'} type={PillType.Primary}>\n                                    DEFAULT CARD\n                                </Pill>\n                            </div>\n                        )}\n                        <Text bold={true} type={TextType.Small}>\n                            •••• •••• •••• {hiddenCardNumber}\n                        </Text>\n                        <Text bold={true} type={TextType.Small}>\n                            {expirationDate}\n                        </Text>\n                    </>\n                ) : (\n                    <BEButton onClick={() => onClick?.()} isText={true} textColor={Color.Accent3} size={'tiny'} icon={IconType.ArrowRight} iconPosition={'right'}>\n                        Add new Card\n                    </BEButton>\n                )}\n            </div>\n        </div>\n    );\n};\n"]}
+{"version":3,"file":"MemberCardItem.js","sourceRoot":"/","sources":["src/components/pages/Account/Card/MemberCardItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RoomstayMemberContext } from '@frontend/contexts';\nimport { IRoomstayMemberCards } from '@roomstay/core';\nimport classNames from 'classnames';\nimport BEButton from 'components/generic/BEButton';\nimport { IconType } from 'components/generic/Icon/Icon';\nimport Pill, { PillType } from 'components/generic/Pill';\nimport Text, { TextType } from 'components/generic/Text';\nimport { ECardType } from 'models/PaymentCard';\nimport RoomstayThemeEngine from 'providers/RoomstayThemeEngine';\nimport * as React from 'react';\nimport { Color } from 'util/Color';\nimport { mapCardTypeToGraphic } from 'util/PaymentCardHelper';\n\nimport styles from './MemberCardItem.module.scss';\n\ntype MemberCardItemProps = {\n    item?: IRoomstayMemberCards;\n    onClick?: () => void;\n    selected?: boolean;\n};\n\nexport const MemberCardItem = (props: MemberCardItemProps) => {\n    const { item, onClick, selected } = props;\n    const { roomstayMember } = React.useContext(RoomstayMemberContext);\n\n    const cardClasses = classNames(styles['card'], {\n        [styles['--selected']]: selected,\n    });\n\n    const cardGraphics = mapCardTypeToGraphic(item?.type as ECardType);\n    const iconUrl = cardGraphics.miniCardUrl;\n\n    const hiddenCardNumber = item?.cardNumber?.substring(item?.cardNumber?.length - 4);\n\n    const renderedIcon = iconUrl ? <img src={iconUrl} alt={item?.type} /> : <img src={RoomstayThemeEngine.getImageAssetUrl() + 'add-card.svg'} alt=\"Add card\" />;\n    const expirationDate = item?.expiry?.substring(0, 2) + ' / ' + item?.expiry?.substring(2);\n\n    return (\n        <div className={cardClasses} onClick={() => onClick?.()}>\n            <div className={styles['card-infographic']}>{renderedIcon}</div>\n            <div className={styles['card-details']}>\n                {item ? (\n                    <>\n                        {/** TODO: check if card is on users default card object */}\n                        {roomstayMember?.defaultCard === item.cardId && (\n                            <div className=\"u-marg-bottom--light\">\n                                <Pill size={'small'} type={PillType.Primary}>\n                                    DEFAULT CARD\n                                </Pill>\n                            </div>\n                        )}\n                        <Text bold={true} type={TextType.Small}>\n                            •••• •••• •••• {hiddenCardNumber}\n                        </Text>\n                        <Text bold={true} type={TextType.Small}>\n                            {expirationDate}\n                        </Text>\n                    </>\n                ) : (\n                    <BEButton onClick={() => onClick?.()} isText={true} textColor={Color.Accent3} size={'tiny'} icon={IconType.ArrowRight} iconPosition={'right'}>\n                        Add new Card\n                    </BEButton>\n                )}\n            </div>\n        </div>\n    );\n};\n"]}

package/dist/src/components/pages/PageColorComponent.js

@@ -1,10 +1,36 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageColorComponent = void 0;
-const React = require("react");
+const React = __importStar(require("react"));
 const react_1 = require("react");
 const hooks_1 = require("@frontend/hooks");
-const RoomstayThemeEngine_1 = require("providers/RoomstayThemeEngine");
+const RoomstayThemeEngine_1 = __importDefault(require("providers/RoomstayThemeEngine"));
 const PageColorComponent = () => {
     const { hotel } = (0, hooks_1.useCurrentHotel)();
     (0, react_1.useEffect)(() => {

package/dist/src/components/pages/PageColorComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageColorComponent.js","sourceRoot":"/","sources":["src/components/pages/PageColorComponent.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAAkC;AAClC,2CAAkD;AAClD,uEAAgE;AAEzD,MAAM,kBAAkB,GAAG,GAAG,EAAE;IACnC,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,uBAAe,GAAE,CAAC;IAEpC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAI,KAAK,EAAE;YACP,6BAAmB,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;SACjD;IACL,CAAC,EAAE,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,CAAC,CAAC,CAAC;IAEpB,OAAO,yCAAK,CAAC;AACjB,CAAC,CAAC;AAVW,QAAA,kBAAkB,sBAU7B","sourcesContent":["import * as React from 'react';\nimport { useEffect } from 'react';\nimport { useCurrentHotel } from '@frontend/hooks';\nimport RoomstayThemeEngine from 'providers/RoomstayThemeEngine';\n\nexport const PageColorComponent = () => {\n    const { hotel } = useCurrentHotel();\n\n    useEffect(() => {\n        if (hotel) {\n            RoomstayThemeEngine.changeTheme(hotel.colors);\n        }\n    }, [hotel?.colors]);\n\n    return <></>;\n};\n"]}
+{"version":3,"file":"PageColorComponent.js","sourceRoot":"/","sources":["src/components/pages/PageColorComponent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAC/B,iCAAkC;AAClC,2CAAkD;AAClD,wFAAgE;AAEzD,MAAM,kBAAkB,GAAG,GAAG,EAAE;IACnC,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,uBAAe,GAAE,CAAC;IAEpC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAI,KAAK,EAAE;YACP,6BAAmB,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;SACjD;IACL,CAAC,EAAE,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,CAAC,CAAC,CAAC;IAEpB,OAAO,yCAAK,CAAC;AACjB,CAAC,CAAC;AAVW,QAAA,kBAAkB,sBAU7B","sourcesContent":["import * as React from 'react';\nimport { useEffect } from 'react';\nimport { useCurrentHotel } from '@frontend/hooks';\nimport RoomstayThemeEngine from 'providers/RoomstayThemeEngine';\n\nexport const PageColorComponent = () => {\n    const { hotel } = useCurrentHotel();\n\n    useEffect(() => {\n        if (hotel) {\n            RoomstayThemeEngine.changeTheme(hotel.colors);\n        }\n    }, [hotel?.colors]);\n\n    return <></>;\n};\n"]}

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

@@ -1,28 +1,54 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReservationAction = void 0;
 const contexts_1 = require("@frontend/contexts");
 const core_1 = require("@roomstay/core");
-const classNames = require("classnames");
-const BEButton_1 = require("components/generic/BEButton");
-const Headline_1 = require("components/generic/Headline");
-const Icon_1 = require("components/generic/Icon/Icon");
-const Text_1 = require("components/generic/Text");
-const ImageGallerySlider_1 = require("components/steps/room/ImageGallerySlider");
-const dayjs = require("dayjs");
+const classnames_1 = __importDefault(require("classnames"));
+const BEButton_1 = __importDefault(require("components/generic/BEButton"));
+const Headline_1 = __importDefault(require("components/generic/Headline"));
+const Icon_1 = __importStar(require("components/generic/Icon/Icon"));
+const Text_1 = __importStar(require("components/generic/Text"));
+const ImageGallerySlider_1 = __importDefault(require("components/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 = require("react");
+const React = __importStar(require("react"));
 const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
 const react_router_dom_1 = require("react-router-dom");
 const Translation_1 = require("translations/Translation");
 const Color_1 = require("util/Color");
-const ScreenSize_1 = require("util/ScreenSize");
+const ScreenSize_1 = __importDefault(require("util/ScreenSize"));
 const TextAlignment_1 = require("util/TextAlignment");
-const ReservationItem_module_scss_1 = require("./ReservationItem.module.scss");
-const StepManager_1 = require("util/StepManager");
+const ReservationItem_module_scss_1 = __importDefault(require("./ReservationItem.module.scss"));
+const StepManager_1 = __importDefault(require("util/StepManager"));
 var ReservationAction;
 (function (ReservationAction) {
     ReservationAction["MoreDetails"] = "MoreDetails";
@@ -45,7 +71,7 @@ const ReservationItem = (props) => {
             mobileWidth: true,
             rounded: true,
             wide: isMobile,
-            className: classNames({
+            className: (0, classnames_1.default)({
                 'u-marg-right@m': index === 0,
             }),
         };
@@ -83,8 +109,8 @@ const ReservationItem = (props) => {
         return React.createElement(React.Fragment, null);
     }
     const itineraryItemNights = Object.keys(itineraryItem.nights);
-    const checkInDate = dayjs(itineraryItem.checkInDate);
-    const checkOutDate = dayjs(itineraryItem.checkOutDate);
+    const checkInDate = (0, dayjs_1.default)(itineraryItem.checkInDate);
+    const checkOutDate = (0, dayjs_1.default)(itineraryItem.checkOutDate);
     const reservationOccupancy = itineraryItem.adults + itineraryItem.children;
     const cancelled = itineraryItem.status === core_1.IBookingStatus.Cancelled;
     return (React.createElement(React.Fragment, null,
@@ -100,9 +126,9 @@ const ReservationItem = (props) => {
                         React.createElement(react_router_dom_1.Link, { to: AccountRoutes_1.AccountRoutes.Help.path }, "get in touch")),
                     ' ',
                     "if you find this to be a mistake")))),
-        React.createElement("div", { className: classNames('reservation-item-container', { 'u-marg-bottom--heavy u-marg-bottom@m-': !disableMarginBottom }) },
+        React.createElement("div", { className: (0, classnames_1.default)('reservation-item-container', { 'u-marg-bottom--heavy u-marg-bottom@m-': !disableMarginBottom }) },
             React.createElement("div", { className: "reservation-item" },
-                React.createElement("div", { className: classNames('reservation-item--image u-border-rounded u-print-none', { 'reservation-item--disabled': cancelled }) },
+                React.createElement("div", { className: (0, classnames_1.default)('reservation-item--image u-border-rounded u-print-none', { 'reservation-item--disabled': cancelled }) },
                     React.createElement(ImageGallerySlider_1.default, { images: itineraryItem.images, imageSize: ImageProvider_1.ImageSize.Medium }),
                     React.createElement("div", { className: "reservation-item--floating-date" },
                         React.createElement(Headline_1.default, { size: 'extra-large', color: cancelled ? Color_1.Color.DarkGrey : Color_1.Color.White, align: TextAlignment_1.TextAlign.Center }, checkInDate.format('DD')),

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 * as 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 * as 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 * as 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={true} 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={true} filled={true} 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;\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={true} 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={true}>\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 } 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 * as 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={true} 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={true} filled={true} 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;\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={true} 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={true}>\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"]}