npm - @roomstay/frontend - Versions diffs - 1.6.0 → 2.0.0-1 - Mend

@roomstay/frontend 1.6.0 → 2.0.0-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1056) hide show

package/dist/src/components/navigation/Header.js CHANGED Viewed

@@ -1,32 +1,39 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = require("react");
-const Icon_1 = require("../generic/Icon");
-const Color_1 = require("../../util/Color");
+const react_1 = require("react");
+const Icon_1 = require("components/generic/Icon/Icon");
+const Color_1 = require("util/Color");
 const react_router_dom_1 = require("react-router-dom");
-const Text_1 = require("../generic/Text");
+const Text_1 = require("components/generic/Text");
 const react_i18next_1 = require("react-i18next");
-const Translation_1 = require("../../translations/Translation");
-const BESelect_1 = require("../generic/BESelect");
-const LanguageProvider_1 = require("../../providers/LanguageProvider");
-const CurrencyProvider_1 = require("../../providers/CurrencyProvider");
-const react_1 = require("react");
-const core_1 = require("@material-ui/core");
-const Fade_1 = require("../../animations/Fade");
-const RoomstayThemeEngine_1 = require("../../providers/RoomstayThemeEngine");
-const DataLayer_1 = require("../../util/DataLayer");
+const Translation_1 = require("translations/Translation");
+const BESelect_1 = require("components/generic/BESelect");
+const BEButton_1 = require("components/generic/BEButton");
+const LanguageProvider_1 = require("providers/LanguageProvider");
+const CurrencyProvider_1 = require("providers/CurrencyProvider");
+const Fade_1 = require("animations/Fade");
+const RoomstayThemeEngine_1 = require("providers/RoomstayThemeEngine");
+const DataLayer_1 = require("util/DataLayer");
 const hooks_1 = require("@frontend/hooks");
 const contexts_1 = require("@frontend/contexts");
-const contexts_2 = require("@frontend/contexts");
-const StepHotel_1 = require("../../pages/steps/StepHotel/StepHotel");
+const StepHotel_1 = require("pages/steps/StepHotel/StepHotel");
+const Portal_1 = require("components/generic/Portal/Portal");
+const UnauthenticatedUserModal_1 = require("components/generic/modal/SigninModal/UnauthenticatedUserModal");
+const AuthenticatedUserModal_1 = require("components/generic/modal/SigninModal/AuthenticatedUserModal");
+const MemberPortalFeature_1 = require("providers/feature/MemberPortalFeature");
 function Header() {
-    const { hotel } = hooks_1.useCurrentHotel();
-    const ccx = react_1.useContext(contexts_1.CompanyContext);
-    const { currentStep } = react_1.useContext(contexts_2.FullPageEngineContext);
-    const [hotelLogo, setHotelLogo] = react_1.useState('');
-    const [showHotelLinks, setShowHotelLinks] = react_1.useState(true);
-    const [mobileMenuOpen, setMobileMenuOpen] = react_1.useState(false);
-    const { t } = react_i18next_1.useTranslation();
+    const { hotel } = (0, hooks_1.useCurrentHotel)();
+    const ccx = (0, react_1.useContext)(contexts_1.CompanyContext);
+    const { currentStep } = (0, react_1.useContext)(contexts_1.FullPageEngineContext);
+    const { roomstayMember } = (0, react_1.useContext)(contexts_1.RoomstayMemberContext);
+    const loginAnchorEl = React.useRef(null);
+    const [hotelLogo, setHotelLogo] = (0, react_1.useState)('');
+    const [showHotelLinks, setShowHotelLinks] = (0, react_1.useState)(true);
+    const [mobileMenuOpen, setMobileMenuOpen] = (0, react_1.useState)(false);
+    const [mobileMenuFaderStatus, setMobileMenuFaderStatus] = (0, react_1.useState)(false);
+    const [loginModalOpen, setLoginModalOpen] = (0, react_1.useState)(false);
+    const { t } = (0, react_i18next_1.useTranslation)();
     const availableLanguages = LanguageProvider_1.LanguageProvider.getLanguages();
     const langKeys = Object.keys(availableLanguages);
     const onLanguageChangeHandler = (selected) => {
@@ -38,12 +45,33 @@ function Header() {
         DataLayer_1.default.instance.setCurrencyCodes(selected);
     };
     const closeMobileMenuClickHandler = () => {
-        setMobileMenuOpen(false);
+        setMobileMenuFaderStatus(false);
     };
     const openMobileMenuClickHandler = () => {
-        setMobileMenuOpen(true);
+        setMobileMenuFaderStatus(true);
+    };
+    const closeLoginClickHandler = () => {
+        setLoginModalOpen(false);
     };
-    react_1.useEffect(() => {
+    const onLoginClickHandler = () => {
+        setLoginModalOpen(true);
+        closeMobileMenuClickHandler();
+    };
+    (0, react_1.useEffect)(() => {
+        let timeout = null;
+        if (mobileMenuFaderStatus) {
+            setMobileMenuOpen(true);
+        }
+        else {
+            timeout = setTimeout(() => {
+                setMobileMenuOpen(false);
+            }, 500);
+        }
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, [mobileMenuFaderStatus]);
+    (0, react_1.useEffect)(() => {
         let cancelled = false;
         const loadImage = (src) => {
             const image = new Image();
@@ -69,13 +97,16 @@ function Header() {
             cancelled = true;
         };
     }, [hotel, hotel === null || hotel === void 0 ? void 0 : hotel.logo, ccx.logo, currentStep]);
-    const hotelImageElement = hotelLogo ? React.createElement("img", { src: hotelLogo, alt: "Hotel Logo", className: "u-block" }) : hotel === null || hotel === void 0 ? void 0 : hotel.logo;
+    let hotelImageElement = hotelLogo ? React.createElement("img", { src: hotelLogo, alt: "Hotel Logo", className: "u-block" }) : hotel === null || hotel === void 0 ? void 0 : hotel.logo;
+    if (typeof hotelImageElement === 'string' && !hotelImageElement.startsWith('<')) {
+        hotelImageElement = React.createElement("img", { src: hotelImageElement, alt: "Hotel Logo" });
+    }
     const links = (React.createElement("ul", { className: "c-header__list" },
         React.createElement("li", null,
             React.createElement(react_router_dom_1.NavLink, { to: "/hotel-info/", activeClassName: "is-active", onClick: closeMobileMenuClickHandler },
                 React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.White },
                     React.createElement("strong", null, t(Translation_1.Translation.Navigation.HotelInfo))))),
-        React.createElement("li", null, (hotel === null || hotel === void 0 ? void 0 : hotel.forwardFindReservationToSynxis) ? (React.createElement("a", { href: `https://be.synxis.com/signin?hotel=${hotel === null || hotel === void 0 ? void 0 : hotel.hotelID}`, target: "_blank" },
+        React.createElement("li", null, (hotel === null || hotel === void 0 ? void 0 : hotel.forwardFindReservationToSynxis) ? (React.createElement("a", { href: `https://be.synxis.com/signin?hotel=${hotel === null || hotel === void 0 ? void 0 : hotel.hotelID}`, target: "_blank", rel: "noreferrer" },
             React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.White, bold: true }, t(Translation_1.Translation.Navigation.FindReservation)))) : (React.createElement(react_router_dom_1.NavLink, { to: "/find-reservation", activeClassName: "is-active", onClick: closeMobileMenuClickHandler },
             React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.White, bold: true }, t(Translation_1.Translation.Navigation.FindReservation))))),
         React.createElement("li", { className: "phone" },
@@ -93,9 +124,18 @@ function Header() {
                         };
                     }) }))),
             React.createElement("li", null,
-                React.createElement(BESelect_1.default, { onChange: onCurrencyChangeHandler, selectedValue: ccx.currentCurrency, items: CurrencyProvider_1.default.getCurrencyItems() })))));
+                React.createElement(BESelect_1.default, { onChange: onCurrencyChangeHandler, selectedValue: ccx.currentCurrency, items: CurrencyProvider_1.default.getCurrencyItems() })),
+            MemberPortalFeature_1.default.isActive() && (React.createElement("li", { ref: loginAnchorEl }, roomstayMember ? (React.createElement(BEButton_1.default, { size: "small", isText: true, onClick: onLoginClickHandler, stopIconAnimation: true },
+                roomstayMember.forename,
+                " ",
+                roomstayMember.surname,
+                React.createElement("span", { className: "u-white u-pad-left--light", style: { marginRight: -13 } },
+                    React.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowDown2, size: "1.3em", color: Color_1.Color.DarkGrey })))) : (React.createElement(BEButton_1.default, { size: "small", isText: true, onClick: onLoginClickHandler, stopIconAnimation: true },
+                t(Translation_1.Translation.Navigation.SignIn.SignIn),
+                React.createElement("span", { className: "u-white u-pad-left--light", style: { marginRight: -13 } },
+                    React.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowDown2, size: "1.3em", color: Color_1.Color.DarkGrey })))))))));
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "c-header" },
+        React.createElement("div", { className: "c-header u-print-none" },
             React.createElement("div", { className: "container" },
                 React.createElement("div", { className: "u-flex" },
                     React.createElement("div", { className: "u-flex u-flex-flex-start u-flex__item" },
@@ -107,9 +147,9 @@ function Header() {
                         React.createElement("div", { className: "c-header__mobile-menu" },
                             React.createElement("span", { className: "u-white u-pad-left" },
                                 React.createElement(Icon_1.default, { icon: Icon_1.IconType.Menu, size: "26px", color: Color_1.Color.White, onClick: openMobileMenuClickHandler }))))))),
-        React.createElement(core_1.Modal, { open: mobileMenuOpen, container: RoomstayThemeEngine_1.default.EngineContainer },
-            React.createElement(Fade_1.default, { in: mobileMenuOpen },
-                React.createElement("div", { className: "mobile-header-menu" },
+        mobileMenuOpen && (React.createElement(Portal_1.RoomstayPortal, { target: RoomstayThemeEngine_1.default.EngineContainer },
+            React.createElement(Fade_1.default, { open: mobileMenuFaderStatus },
+                React.createElement("div", { className: `mobile-header-menu ${mobileMenuFaderStatus ? '' : '--closing'}` },
                     React.createElement("div", { className: "mobile-header-menu--replica u-flex" },
                         React.createElement("div", { className: "c-header__logo" },
                             React.createElement(react_router_dom_1.Link, { to: "/", onClick: closeMobileMenuClickHandler }, hotelImageElement)),
@@ -118,7 +158,8 @@ function Header() {
                                 React.createElement(Icon_1.default, { icon: Icon_1.IconType.Close, size: "26px", color: Color_1.Color.White, onClick: closeMobileMenuClickHandler })))),
                     React.createElement("div", { className: "mobile-header-menu--content" },
                         !!hotel && links,
-                        configs))))));
+                        configs))))),
+        MemberPortalFeature_1.default.isActive() && (React.createElement(React.Fragment, null, roomstayMember ? (React.createElement(AuthenticatedUserModal_1.AuthenticatedUserModal, { open: loginModalOpen, onClose: closeLoginClickHandler, anchorEl: loginAnchorEl.current })) : (React.createElement(UnauthenticatedUserModal_1.UnauthenticatedUserModal, { open: loginModalOpen, onClose: closeLoginClickHandler, anchorEl: loginAnchorEl.current }))))));
 }
 exports.default = Header;
 //# sourceMappingURL=Header.js.map

package/dist/src/components/navigation/Header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Header.js","sourceRoot":"/","sources":["src/components/navigation/Header.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport Icon, { IconType } from '../generic/Icon';\nimport { Color } from '../../util/Color';\nimport { Link, NavLink } from 'react-router-dom';\nimport Text, { TextType, TextTransform } from '../generic/Text';\n\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from '../../translations/Translation';\nimport BESelect from '../generic/BESelect';\nimport { LanguageProvider, Language } from '../../providers/LanguageProvider';\nimport CurrencyProvider from '../../providers/CurrencyProvider';\nimport { useState, useContext, useEffect } from 'react';\nimport { Modal } from '@material-ui/core';\nimport FadeAnimation from '../../animations/Fade';\nimport RoomstayThemeEngine from '../../providers/RoomstayThemeEngine';\nimport DataLayer from '../../util/DataLayer';\nimport { useCurrentHotel } from '@frontend/hooks';\nimport { CompanyContext } from '@frontend/contexts';\nimport { FullPageEngineContext } from '@frontend/contexts';\nimport StepHotel from '../../pages/steps/StepHotel/StepHotel';\n\nexport default function Header() {\n const { hotel } = useCurrentHotel();\n const ccx = useContext(CompanyContext);\n const { currentStep } = useContext(FullPageEngineContext);\n\n const [hotelLogo, setHotelLogo] = useState('');\n const [showHotelLinks, setShowHotelLinks] = useState(true);\n\n const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n\n const { t } = useTranslation();\n\n const availableLanguages = LanguageProvider.getLanguages();\n\n const langKeys = Object.keys(availableLanguages);\n\n const onLanguageChangeHandler = (selected: any) => {\n ccx.setCurrentLanguage(selected);\n LanguageProvider.changeLanguage(selected);\n };\n\n const onCurrencyChangeHandler = (selected: any) => {\n ccx.setCurrentCurrency(selected);\n DataLayer.instance.setCurrencyCodes(selected);\n };\n\n const closeMobileMenuClickHandler = () => {\n setMobileMenuOpen(false);\n };\n const openMobileMenuClickHandler = () => {\n setMobileMenuOpen(true);\n };\n\n useEffect(() => {\n let cancelled = false;\n\n const loadImage = (src: string) => {\n const image = new Image();\n image.onload = () => {\n if (!cancelled) {\n setHotelLogo(src);\n }\n };\n\n image.src = src;\n };\n\n // Check the Logo per step\n if (hotel && !(currentStep === StepHotel)) {\n if (typeof hotel?.logo === 'string') {\n loadImage(hotel?.logo);\n }\n } else {\n loadImage(ccx.logo);\n }\n\n // Check wether we should display the hotel related links or not\n setShowHotelLinks(currentStep !== StepHotel && !!hotel);\n\n return () => {\n cancelled = true;\n };\n }, [hotel, hotel?.logo, ccx.logo, currentStep]);\n\n const hotelImageElement = hotelLogo ? <img src={hotelLogo} alt=\"Hotel Logo\" className=\"u-block\" /> : hotel?.logo;\n\n const links = (\n <ul className=\"c-header__list\">\n <li>\n <NavLink to=\"/hotel-info/\" activeClassName=\"is-active\" onClick={closeMobileMenuClickHandler}>\n <Text type={TextType.Small} color={Color.White}>\n <strong>{t(Translation.Navigation.HotelInfo)}</strong>\n </Text>\n </NavLink>\n </li>\n <li>\n {hotel?.forwardFindReservationToSynxis ? (\n <a href={`https://be.synxis.com/signin?hotel=${hotel?.hotelID}`} target=\"_blank\">\n <Text type={TextType.Small} color={Color.White} bold={true}>\n {t(Translation.Navigation.FindReservation)}\n </Text>\n </a>\n ) : (\n <NavLink to=\"/find-reservation\" activeClassName=\"is-active\" onClick={closeMobileMenuClickHandler}>\n <Text type={TextType.Small} color={Color.White} bold={true}>\n {t(Translation.Navigation.FindReservation)}\n </Text>\n </NavLink>\n )}\n </li>\n <li className=\"phone\">\n <a href={`tel:${hotel?.phone}`} onClick={closeMobileMenuClickHandler}>\n <Text type={TextType.Small} transforms={[TextTransform.Uppercase]} color={Color.White}>\n <Icon icon={IconType.Phone} size=\"16px\" color={Color.White} />\n <strong className=\"u-marg-left--light\">{hotel?.phone}</strong>\n </Text>\n </a>\n </li>\n </ul>\n );\n\n const configs = (\n <>\n <ul className=\"c-header__list\">\n {langKeys.length > 1 && (\n <li>\n <BESelect\n onChange={onLanguageChangeHandler}\n selectedValue={ccx.currentLanguage}\n items={langKeys.map((lang: Language) => {\n return {\n value: lang,\n text: LanguageProvider.getPrettyLanguageName(lang),\n };\n })}\n />\n </li>\n )}\n <li>\n <BESelect onChange={onCurrencyChangeHandler} selectedValue={ccx.currentCurrency} items={CurrencyProvider.getCurrencyItems()} />\n </li>\n </ul>\n </>\n );\n\n return (\n <>\n <div className=\"c-header\">\n <div className=\"container\">\n <div className=\"u-flex\">\n <div className=\"u-flex u-flex-flex-start u-flex__item\">\n <div className=\"c-header__logo\">\n <a href={showHotelLinks ? hotel?.hotelUrl : ccx?.logoLink} onClick={closeMobileMenuClickHandler}>\n {hotelImageElement}\n </a>\n </div>\n {!!showHotelLinks && links}\n </div>\n <div className=\"u-flex mx-100\">\n {configs}\n <div className=\"c-header__mobile-menu\">\n <span className=\"u-white u-pad-left\">\n <Icon icon={IconType.Menu} size=\"26px\" color={Color.White} onClick={openMobileMenuClickHandler} />\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <Modal open={mobileMenuOpen} container={RoomstayThemeEngine.EngineContainer}>\n <FadeAnimation in={mobileMenuOpen}>\n <div className=\"mobile-header-menu\">\n <div className=\"mobile-header-menu--replica u-flex\">\n <div className=\"c-header__logo\">\n <Link to=\"/\" onClick={closeMobileMenuClickHandler}>\n {hotelImageElement}\n </Link>\n </div>\n <div className=\"c-header__mobile-menu\">\n <span className=\"u-white u-pad-left\">\n <Icon icon={IconType.Close} size=\"26px\" color={Color.White} onClick={closeMobileMenuClickHandler} />\n </span>\n </div>\n </div>\n <div className=\"mobile-header-menu--content\">\n {!!hotel && links}\n\n {configs}\n </div>\n </div>\n </FadeAnimation>\n </Modal>\n </>\n );\n}\n"]}
1	+ {"version":3,"file":"Header.js","sourceRoot":"/","sources":["src/components/navigation/Header.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useContext, useEffect, useState } from 'react';\nimport Icon, { IconType } from 'components/generic/Icon/Icon';\nimport { Color } from 'util/Color';\nimport { Link, NavLink } from 'react-router-dom';\nimport Text, { TextTransform, TextType } from 'components/generic/Text';\n\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\nimport BESelect from 'components/generic/BESelect';\nimport BEButton from 'components/generic/BEButton';\nimport { Language, LanguageProvider } from 'providers/LanguageProvider';\nimport CurrencyProvider from 'providers/CurrencyProvider';\nimport FadeAnimation from 'animations/Fade';\nimport RoomstayThemeEngine from 'providers/RoomstayThemeEngine';\nimport DataLayer from 'util/DataLayer';\nimport { useCurrentHotel } from '@frontend/hooks';\nimport { CompanyContext, FullPageEngineContext, RoomstayMemberContext } from '@frontend/contexts';\nimport StepHotel from 'pages/steps/StepHotel/StepHotel';\nimport { RoomstayPortal } from 'components/generic/Portal/Portal';\nimport { UnauthenticatedUserModal } from 'components/generic/modal/SigninModal/UnauthenticatedUserModal';\nimport { AuthenticatedUserModal } from 'components/generic/modal/SigninModal/AuthenticatedUserModal';\nimport MemberPortalFeature from 'providers/feature/MemberPortalFeature';\n\nexport default function Header() {\n const { hotel } = useCurrentHotel();\n const ccx = useContext(CompanyContext);\n const { currentStep } = useContext(FullPageEngineContext);\n\n const { roomstayMember } = useContext(RoomstayMemberContext);\n\n const loginAnchorEl = React.useRef(null);\n\n const [hotelLogo, setHotelLogo] = useState('');\n const [showHotelLinks, setShowHotelLinks] = useState(true);\n\n const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n const [mobileMenuFaderStatus, setMobileMenuFaderStatus] = useState(false);\n const [loginModalOpen, setLoginModalOpen] = useState(false);\n\n const { t } = useTranslation();\n\n const availableLanguages = LanguageProvider.getLanguages();\n\n const langKeys = Object.keys(availableLanguages);\n\n const onLanguageChangeHandler = (selected: any) => {\n ccx.setCurrentLanguage(selected);\n LanguageProvider.changeLanguage(selected);\n };\n\n const onCurrencyChangeHandler = (selected: any) => {\n ccx.setCurrentCurrency(selected);\n DataLayer.instance.setCurrencyCodes(selected);\n };\n\n const closeMobileMenuClickHandler = () => {\n setMobileMenuFaderStatus(false);\n };\n const openMobileMenuClickHandler = () => {\n setMobileMenuFaderStatus(true);\n };\n const closeLoginClickHandler = () => {\n setLoginModalOpen(false);\n };\n const onLoginClickHandler = () => {\n setLoginModalOpen(true);\n closeMobileMenuClickHandler();\n };\n\n useEffect(() => {\n let timeout: NodeJS.Timeout = null;\n\n if (mobileMenuFaderStatus) {\n setMobileMenuOpen(true);\n } else {\n timeout = setTimeout(() => {\n setMobileMenuOpen(false);\n }, 500);\n }\n\n return () => {\n clearTimeout(timeout);\n };\n }, [mobileMenuFaderStatus]);\n\n useEffect(() => {\n let cancelled = false;\n\n const loadImage = (src: string) => {\n const image = new Image();\n image.onload = () => {\n if (!cancelled) {\n setHotelLogo(src);\n }\n };\n\n image.src = src;\n };\n\n // Check the Logo per step\n if (hotel && !(currentStep === StepHotel)) {\n if (typeof hotel?.logo === 'string') {\n loadImage(hotel?.logo);\n }\n } else {\n loadImage(ccx.logo);\n }\n\n // Check wether we should display the hotel related links or not\n setShowHotelLinks(currentStep !== StepHotel && !!hotel);\n\n return () => {\n cancelled = true;\n };\n }, [hotel, hotel?.logo, ccx.logo, currentStep]);\n\n let hotelImageElement = hotelLogo ? <img src={hotelLogo} alt=\"Hotel Logo\" className=\"u-block\" /> : hotel?.logo;\n\n if (typeof hotelImageElement === 'string' && !hotelImageElement.startsWith('<')) {\n hotelImageElement = <img src={hotelImageElement} alt=\"Hotel Logo\" />;\n }\n\n const links = (\n <ul className=\"c-header__list\">\n <li>\n <NavLink to=\"/hotel-info/\" activeClassName=\"is-active\" onClick={closeMobileMenuClickHandler}>\n <Text type={TextType.Small} color={Color.White}>\n <strong>{t(Translation.Navigation.HotelInfo)}</strong>\n </Text>\n </NavLink>\n </li>\n <li>\n {hotel?.forwardFindReservationToSynxis ? (\n <a href={`https://be.synxis.com/signin?hotel=${hotel?.hotelID}`} target=\"_blank\" rel=\"noreferrer\">\n <Text type={TextType.Small} color={Color.White} bold={true}>\n {t(Translation.Navigation.FindReservation)}\n </Text>\n </a>\n ) : (\n <NavLink to=\"/find-reservation\" activeClassName=\"is-active\" onClick={closeMobileMenuClickHandler}>\n <Text type={TextType.Small} color={Color.White} bold={true}>\n {t(Translation.Navigation.FindReservation)}\n </Text>\n </NavLink>\n )}\n </li>\n <li className=\"phone\">\n <a href={`tel:${hotel?.phone}`} onClick={closeMobileMenuClickHandler}>\n <Text type={TextType.Small} transforms={[TextTransform.Uppercase]} color={Color.White}>\n <Icon icon={IconType.Phone} size=\"16px\" color={Color.White} />\n <strong className=\"u-marg-left--light\">{hotel?.phone}</strong>\n </Text>\n </a>\n </li>\n </ul>\n );\n\n const configs = (\n <>\n <ul className=\"c-header__list\">\n {langKeys.length > 1 && (\n <li>\n <BESelect\n onChange={onLanguageChangeHandler}\n selectedValue={ccx.currentLanguage}\n items={langKeys.map((lang: Language) => {\n return {\n value: lang,\n text: LanguageProvider.getPrettyLanguageName(lang),\n };\n })}\n />\n </li>\n )}\n <li>\n <BESelect onChange={onCurrencyChangeHandler} selectedValue={ccx.currentCurrency} items={CurrencyProvider.getCurrencyItems()} />\n </li>\n\n {MemberPortalFeature.isActive() && (\n <li ref={loginAnchorEl}>\n {roomstayMember ? (\n <BEButton size=\"small\" isText onClick={onLoginClickHandler} stopIconAnimation>\n {roomstayMember.forename} {roomstayMember.surname}\n <span className=\"u-white u-pad-left--light\" style={{ marginRight: -13 }}>\n <Icon icon={IconType.ArrowDown2} size=\"1.3em\" color={Color.DarkGrey} />\n </span>\n </BEButton>\n ) : (\n <BEButton size=\"small\" isText onClick={onLoginClickHandler} stopIconAnimation>\n {t(Translation.Navigation.SignIn.SignIn)}\n <span className=\"u-white u-pad-left--light\" style={{ marginRight: -13 }}>\n <Icon icon={IconType.ArrowDown2} size=\"1.3em\" color={Color.DarkGrey} />\n </span>\n </BEButton>\n )}\n </li>\n )}\n </ul>\n </>\n );\n\n return (\n <>\n <div className=\"c-header u-print-none\">\n <div className=\"container\">\n <div className=\"u-flex\">\n <div className=\"u-flex u-flex-flex-start u-flex__item\">\n <div className=\"c-header__logo\">\n <a href={showHotelLinks ? hotel?.hotelUrl : ccx?.logoLink} onClick={closeMobileMenuClickHandler}>\n {hotelImageElement}\n </a>\n </div>\n {!!showHotelLinks && links}\n </div>\n <div className=\"u-flex mx-100\">\n {configs}\n <div className=\"c-header__mobile-menu\">\n <span className=\"u-white u-pad-left\">\n <Icon icon={IconType.Menu} size=\"26px\" color={Color.White} onClick={openMobileMenuClickHandler} />\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n {mobileMenuOpen && (\n <RoomstayPortal target={RoomstayThemeEngine.EngineContainer}>\n <FadeAnimation open={mobileMenuFaderStatus}>\n <div className={`mobile-header-menu ${mobileMenuFaderStatus ? '' : '--closing'}`}>\n <div className=\"mobile-header-menu--replica u-flex\">\n <div className=\"c-header__logo\">\n <Link to=\"/\" onClick={closeMobileMenuClickHandler}>\n {hotelImageElement}\n </Link>\n </div>\n <div className=\"c-header__mobile-menu\">\n <span className=\"u-white u-pad-left\">\n <Icon icon={IconType.Close} size=\"26px\" color={Color.White} onClick={closeMobileMenuClickHandler} />\n </span>\n </div>\n </div>\n <div className=\"mobile-header-menu--content\">\n {!!hotel && links}\n\n {configs}\n </div>\n </div>\n </FadeAnimation>\n </RoomstayPortal>\n )}\n {MemberPortalFeature.isActive() && (\n <>\n {roomstayMember ? (\n <AuthenticatedUserModal open={loginModalOpen} onClose={closeLoginClickHandler} anchorEl={loginAnchorEl.current} />\n ) : (\n <UnauthenticatedUserModal open={loginModalOpen} onClose={closeLoginClickHandler} anchorEl={loginAnchorEl.current} />\n )}\n </>\n )}\n </>\n );\n}\n"]}

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

@@ -1,25 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = require("react");
-const Text_1 = require("../generic/Text");
-const Icon_1 = require("../generic/Icon");
+const Text_1 = require("components/generic/Text");
+const Icon_1 = 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 = require("util/StepManager");
 const react_i18next_1 = require("react-i18next");
-const Translation_1 = require("../../translations/Translation");
+const Translation_1 = require("translations/Translation");
 const classNames = require("classnames");
-const Color_1 = require("../../util/Color");
-const StepSelectorModal_1 = require("./StepSelectorModal");
-const ScreenSize_1 = require("../../util/ScreenSize");
+const Color_1 = require("util/Color");
+const StepSelectorModal_1 = require("components/navigation/StepSelectorModal");
+const ScreenSize_1 = require("util/ScreenSize");
 const contexts_1 = require("@frontend/contexts");
 const contexts_2 = require("@frontend/contexts");
 function StepSelector() {
-    const { screenSize } = react_1.useContext(contexts_1.BookingEngineContext);
-    const { currentStep } = react_1.useContext(contexts_2.FullPageEngineContext);
-    const basketContext = react_1.useContext(contexts_1.BasketContext);
-    const { t } = react_i18next_1.useTranslation();
-    const [modalOpen, setModalOpen] = react_1.useState(false);
+    const { screenSize } = (0, react_1.useContext)(contexts_1.BookingEngineContext);
+    const { currentStep } = (0, react_1.useContext)(contexts_2.FullPageEngineContext);
+    const basketContext = (0, react_1.useContext)(contexts_1.BasketContext);
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const [modalOpen, setModalOpen] = (0, react_1.useState)(false);
     const steps = StepManager_1.default.getSteps().filter((step) => (step.shouldShowOnNavigation() ? step : null));
     const onDropdownClick = () => {
         screenSize <= ScreenSize_1.default.Medium ? setModalOpen(true) : null;
@@ -31,7 +31,8 @@ function StepSelector() {
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: "step-dropdown", onClick: onDropdownClick },
             React.createElement("div", { className: "step-container" },
-                React.createElement(Icon_1.default, { icon: Icon_1.IconType.Dropdown }),
+                React.createElement("span", { className: "step-container-dropdown" },
+                    React.createElement(Icon_1.default, { icon: Icon_1.IconType.Dropdown })),
                 React.createElement("div", { className: "step-awards" },
                     React.createElement("img", { alt: "", style: { width: '80px' } })),
                 React.createElement("ul", { className: "step-selector" }, steps.map((step, stepIndex) => {
@@ -64,7 +65,7 @@ function StepSelector() {
                         React.createElement("div", null,
                             React.createElement("span", { className: "step-selector__step-count-mobile" },
                                 React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Navy },
-                                    React.createElement("strong", null, t(Translation_1.Translation.Navigation.Steps.StepProgress, { step: prettyStep })))),
+                                    React.createElement("strong", null, t(Translation_1.Translation.Navigation.Steps.StepProgress, { step: prettyStep, maxSteps: StepManager_1.default.getSteps().length })))),
                             React.createElement(Text_1.default, null,
                                 React.createElement("strong", null, stepName))),
                         React.createElement(react_router_dom_1.Link, { to: step.getStepUrl() })));

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

	@@ -1 +1 @@
1	- {"version":3,"file":"StepSelector.js","sourceRoot":"/","sources":["src/components/navigation/StepSelector.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,~~0CAAiD~~;~~AACjD~~,~~0CAAiD~~;~~AACjD~~,uDAAwC;AACxC,iCAA6C;AAC7C,~~wDAAiD~~;~~AACjD~~,iDAA+C;AAC/C,~~gEAA6D~~;~~AAC7D~~,yCAAyC;AACzC,~~4CAAyC~~;~~AACzC,2DAAoD~~;~~AACpD~~,~~sDAA+C~~;~~AAC/C~~,iDAAyE;AAEzE,iDAA2D;AAE3D,SAAwB,YAAY;IAChC,MAAM,EAAE,UAAU,EAAE,GAAG,kBAAU,~~CAAC~~,+BAAoB,CAAC,CAAC;IACxD,MAAM,EAAE,WAAW,EAAE,GAAG,kBAAU,~~CAAC~~,gCAAqB,CAAC,CAAC;IAC1D,MAAM,aAAa,GAAG,kBAAU,~~CAAC~~,wBAAa,CAAC,CAAC;IAEhD,MAAM,EAAE,CAAC,EAAE,GAAG,8BAAc,~~EAAE~~,CAAC;IAE/B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,gBAAQ,~~CAAC~~,KAAK,CAAC,CAAC;IAElD,MAAM,KAAK,GAAG,qBAAW,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,sBAAsB,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;IAErG,MAAM,eAAe,GAAG,GAAG,EAAE;QACzB,UAAU,IAAI,oBAAU,CAAC,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAChE,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,GAAG,EAAE;QACpB,YAAY,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,qBAAW,CAAC,YAAY,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC,CAAC;IAEzE,OAAO,CACH;QACI,6BAAK,SAAS,EAAC,eAAe,EAAC,OAAO,EAAE,eAAe;YACnD,6BAAK,SAAS,EAAC,gBAAgB;gBAC3B,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,QAAQ,GAAI;~~gBACjC~~,6BAAK,SAAS,EAAC,aAAa;oBACxB,6BAAK,GAAG,EAAC,EAAE,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAI,CACtC;gBACN,4BAAI,SAAS,EAAC,eAAe,IACxB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAU,EAAE,SAAiB,EAAE,EAAE;oBACzC,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC;oBAE9C,MAAM,UAAU,GAAG,SAAS,GAAG,CAAC,CAAC;oBAEjC,MAAM,UAAU,GAAG,gBAAgB,GAAG,UAAU,CAAC;oBAEjD,IAAI,UAAuB,CAAC;oBAC5B,IAAI,UAAU,EAAE;wBACZ,UAAU,GAAG,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,aAAK,CAAC,KAAK,EAAE,IAAI,EAAC,MAAM,GAAG,CAAC;qBAC/E;yBAAM;wBACH,UAAU,GAAG,CACT,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK;4BACtB,oCAAS,GAAG,GAAG,UAAU,CAAU,CAChC,CACV,CAAC;qBACL;oBAED,IAAI,WAAW,GAAG,KAAK,CAAC;oBAExB,IAAI,IAAI,EAAE;wBACN,MAAM,aAAa,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;wBAE1C,IAAI,aAAa,IAAI,aAAa,CAAC,OAAO,CAAC,aAAa,CAAC,EAAE;4BACvD,WAAW,GAAG,IAAI,CAAC;yBACtB;qBACJ;oBAED,MAAM,cAAc,GAAG,UAAU,CAAC,qBAAqB,EAAE;wBACrD,YAAY,EAAE,gBAAgB,KAAK,UAAU;wBAC7C,UAAU,EAAE,WAAW;wBACvB,aAAa,EAAE,UAAU;wBACzB,aAAa,EAAE,CAAC,UAAU,IAAI,gBAAgB,KAAK,UAAU,IAAI,CAAC,WAAW;qBAChF,CAAC,CAAC;oBAEH,OAAO,CACH,4BAAI,SAAS,EAAE,cAAc,EAAE,GAAG,EAAE,UAAU;wBAC1C,8BAAM,SAAS,EAAC,sBAAsB,IAAE,UAAU,CAAQ;wBAC1D;4BACI,8BAAM,SAAS,EAAC,kCAAkC;gCAC9C,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,aAAK,CAAC,IAAI;oCACzC,oCAAS,CAAC,CAAC,yBAAW,CAAC,UAAU,CAAC,KAAK,CAAC,YAAY,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAU,~~CAClF~~,CACJ;4BACP,oBAAC,cAAI;gCACD,oCAAS,QAAQ,CAAU,CACxB,CACL;wBACN,oBAAC,uBAAI,IAAC,EAAE,EAAE,IAAI,CAAC,UAAU,EAAE,GAAI,CAC9B,CACR,CAAC;gBACN,CAAC,CAAC,CACD,CACH,CACJ;QACL,UAAU,IAAI,oBAAU,CAAC,MAAM,IAAI,oBAAC,2BAAiB,IAAC,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,GAAI,CAClG,CACN,CAAC;AACN,CAAC;~~AAxFD~~,+~~BAwFC~~","sourcesContent":["import * as React from 'react';\nimport Text, { TextType } from '~~../~~generic/Text';\nimport Icon, { IconType } from '~~../~~generic/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 './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 <Icon icon={IconType.Dropdown} />\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 })}</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"]}
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"]}

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

@@ -1,22 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const SimpleModal_1 = require("../generic/modal/SimpleModal");
+const SimpleModal_1 = require("components/generic/modal/SimpleModal");
 const react_i18next_1 = require("react-i18next");
 const react_1 = require("react");
-const Translation_1 = require("../../translations/Translation");
+const Translation_1 = require("translations/Translation");
 const React = require("react");
 const classNames = require("classnames");
-const Icon_1 = require("../generic/Icon");
-const Color_1 = require("../../util/Color");
-const Text_1 = require("../generic/Text");
+const Icon_1 = require("components/generic/Icon/Icon");
+const Color_1 = require("util/Color");
+const Text_1 = require("components/generic/Text");
 const react_router_dom_1 = require("react-router-dom");
-const StepManager_1 = require("../../util/StepManager");
+const StepManager_1 = require("util/StepManager");
 const contexts_1 = require("@frontend/contexts");
 const contexts_2 = require("@frontend/contexts");
 function StepSelectorModal(props) {
-    const { currentStep } = react_1.useContext(contexts_2.FullPageEngineContext);
-    const basketContext = react_1.useContext(contexts_1.BasketContext);
-    const { t } = react_i18next_1.useTranslation();
+    const { currentStep } = (0, react_1.useContext)(contexts_2.FullPageEngineContext);
+    const basketContext = (0, react_1.useContext)(contexts_1.BasketContext);
+    const { t } = (0, react_i18next_1.useTranslation)();
     const steps = StepManager_1.default.getSteps().filter((step) => (step.shouldShowOnNavigation() ? step : null));
     const onModalClose = () => {
         return props.onClose ? props.onClose() : null;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"StepSelectorModal.js","sourceRoot":"/","sources":["src/components/navigation/StepSelectorModal.tsx"],"names":[],"mappings":";;AAAA,~~8DAAuD~~;~~AACvD~~,iDAA+C;AAC/C,iCAAmC;AACnC,~~gEAA6D~~;~~AAC7D~~,+BAA+B;AAC/B,yCAAyC;AAEzC,~~0CAAiD~~;~~AACjD~~,~~4CAAyC~~;~~AACzC~~,~~0CAAmC~~;~~AACnC~~,uDAAwC;AACxC,~~wDAAiD~~;~~AACjD~~,iDAAmD;AAEnD,iDAA2D;AAO3D,SAAwB,iBAAiB,CAAC,KAA6B;IACnE,MAAM,EAAE,WAAW,EAAE,GAAG,kBAAU,~~CAAC~~,gCAAqB,CAAC,CAAC;IAC1D,MAAM,aAAa,GAAG,kBAAU,~~CAAC~~,wBAAa,CAAC,CAAC;IAEhD,MAAM,EAAE,CAAC,EAAE,GAAG,8BAAc,~~EAAE~~,CAAC;IAE/B,MAAM,KAAK,GAAG,qBAAW,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,sBAAsB,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;IAErG,MAAM,YAAY,GAAG,GAAG,EAAE;QACtB,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IAClD,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,qBAAW,CAAC,YAAY,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC,CAAC;IAEzE,OAAO,CACH,oBAAC,qBAAW,IAAC,IAAI,EAAE,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,yBAAW,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,OAAO,EAAE,YAAY;QAC/F,4BAAI,SAAS,EAAC,4BAA4B,IACrC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAU,EAAE,SAAiB,EAAE,EAAE;YACzC,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC;YAE9C,MAAM,UAAU,GAAG,SAAS,GAAG,CAAC,CAAC;YAEjC,MAAM,UAAU,GAAG,gBAAgB,GAAG,UAAU,CAAC;YAEjD,IAAI,UAAuB,CAAC;YAC5B,IAAI,UAAU,EAAE;gBACZ,UAAU,GAAG,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,aAAK,CAAC,KAAK,EAAE,IAAI,EAAC,MAAM,GAAG,CAAC;aAC/E;iBAAM;gBACH,UAAU,GAAG,CACT,oBAAC,cAAI;oBACD,oCAAS,GAAG,GAAG,UAAU,CAAU,CAChC,CACV,CAAC;aACL;YAED,IAAI,WAAW,GAAG,KAAK,CAAC;YAExB,IAAI,IAAI,EAAE;gBACN,MAAM,aAAa,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;gBAE1C,IAAI,aAAa,IAAI,aAAa,CAAC,OAAO,CAAC,aAAa,CAAC,EAAE;oBACvD,WAAW,GAAG,IAAI,CAAC;iBACtB;aACJ;YAED,MAAM,cAAc,GAAG,UAAU,CAAC,qBAAqB,EAAE;gBACrD,YAAY,EAAE,gBAAgB,KAAK,UAAU;gBAC7C,UAAU,EAAE,WAAW;gBACvB,aAAa,EAAE,UAAU;gBACzB,aAAa,EAAE,CAAC,UAAU,IAAI,gBAAgB,KAAK,UAAU,IAAI,CAAC,WAAW;aAChF,CAAC,CAAC;YAEH,MAAM,YAAY,GAAG,GAAG,EAAE;gBACtB,KAAK,CAAC,OAAO,EAAE,CAAC;YACpB,CAAC,CAAC;YACF,OAAO,CACH,4BAAI,SAAS,EAAE,cAAc,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY;gBAChE,8BAAM,SAAS,EAAC,sBAAsB,IAAE,UAAU,CAAQ;gBAC1D;oBACI,oBAAC,cAAI;wBACD,oCAAS,QAAQ,CAAU,CACxB,CACL;gBACN,oBAAC,uBAAI,IAAC,EAAE,EAAE,IAAI,CAAC,UAAU,EAAE,GAAI,CAC9B,CACR,CAAC;QACN,CAAC,CAAC,CACD,CACK,CACjB,CAAC;AACN,CAAC;AAtED,oCAsEC","sourcesContent":["import SimpleModal from '~~../~~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 '~~../~~generic/Icon';\nimport { Color } from '~~../../~~util/Color';\nimport Text from '~~../~~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"]}
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"]}

package/dist/src/components/pages/Account/Card/CardList.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import { IRoomstayMemberCards } from '@roomstay/core';
+declare global {
+    interface Window {
+        VGSShow: any;
+    }
+}
+type CardListProps = {
+    options?: IRoomstayMemberCards[];
+    onChange?: (list: IRoomstayMemberCards) => void;
+    value?: Partial<IRoomstayMemberCards>;
+    onNewCardClicked?: () => void;
+};
+export declare const CardList: FC<CardListProps>;
+export {};

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

@@ -0,0 +1,36 @@
+"use strict";
+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_1 = require("swiper/react");
+const MemberCardItem_1 = require("./MemberCardItem");
+const CardList = ({ options = [], onChange, value, onNewCardClicked }) => {
+    const onCardClicked = (card) => {
+        onChange(card);
+    };
+    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: {
+                    992: {
+                        enabled: false,
+                        spaceBetween: 0,
+                    },
+                }, spaceBetween: 8, enabled: true, slidesPerView: "auto" },
+                options.map((card) => {
+                    const onClick = () => {
+                        onCardClicked(card);
+                    };
+                    return (React.createElement(react_1.SwiperSlide, { key: card.cardId, style: {
+                            width: 'auto',
+                        } },
+                        React.createElement(MemberCardItem_1.MemberCardItem, { selected: (value === null || value === void 0 ? void 0 : value.cardId) === card.cardId, item: card, onClick: onClick })));
+                }),
+                React.createElement(react_1.SwiperSlide, { style: {
+                        width: 'auto',
+                    } },
+                    React.createElement(MemberCardItem_1.MemberCardItem, { selected: !(value === null || value === void 0 ? void 0 : value.cardId), onClick: () => onNewCardClicked === null || onNewCardClicked === void 0 ? void 0 : onNewCardClicked() }))))));
+};
+exports.CardList = CardList;
+//# sourceMappingURL=CardList.js.map

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

@@ -0,0 +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"]}

package/dist/src/components/pages/Account/Card/MemberCardItem.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { IRoomstayMemberCards } from '@roomstay/core';
+type MemberCardItemProps = {
+    item?: IRoomstayMemberCards;
+    onClick?: () => void;
+    selected?: boolean;
+};
+export declare const MemberCardItem: (props: MemberCardItemProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,38 @@
+"use strict";
+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 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 Color_1 = require("util/Color");
+const PaymentCardHelper_1 = require("util/PaymentCardHelper");
+const MemberCardItem_module_scss_1 = 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'], {
+        [MemberCardItem_module_scss_1.default['--selected']]: selected,
+    });
+    const cardGraphics = (0, PaymentCardHelper_1.mapCardTypeToGraphic)(item === null || item === void 0 ? void 0 : item.type);
+    const iconUrl = cardGraphics.miniCardUrl;
+    const hiddenCardNumber = (_a = item === null || item === void 0 ? void 0 : item.cardNumber) === null || _a === void 0 ? void 0 : _a.substring(((_b = item === null || item === void 0 ? void 0 : item.cardNumber) === null || _b === void 0 ? void 0 : _b.length) - 4);
+    const renderedIcon = iconUrl ? React.createElement("img", { src: iconUrl, alt: item === null || item === void 0 ? void 0 : item.type }) : React.createElement("img", { src: RoomstayThemeEngine_1.default.getImageAssetUrl() + 'add-card.svg', alt: "Add card" });
+    const expirationDate = ((_c = item === null || item === void 0 ? void 0 : item.expiry) === null || _c === void 0 ? void 0 : _c.substring(0, 2)) + ' / ' + ((_d = item === null || item === void 0 ? void 0 : item.expiry) === null || _d === void 0 ? void 0 : _d.substring(2));
+    return (React.createElement("div", { className: cardClasses, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick() },
+        React.createElement("div", { className: MemberCardItem_module_scss_1.default['card-infographic'] }, renderedIcon),
+        React.createElement("div", { className: MemberCardItem_module_scss_1.default['card-details'] }, item ? (React.createElement(React.Fragment, null,
+            (roomstayMember === null || roomstayMember === void 0 ? void 0 : roomstayMember.defaultCard) === item.cardId && (React.createElement("div", { className: "u-marg-bottom--light" },
+                React.createElement(Pill_1.default, { size: 'small', type: Pill_1.PillType.Primary }, "DEFAULT CARD"))),
+            React.createElement(Text_1.default, { bold: true, type: Text_1.TextType.Small },
+                "\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 ",
+                hiddenCardNumber),
+            React.createElement(Text_1.default, { bold: true, type: Text_1.TextType.Small }, expirationDate))) : (React.createElement(BEButton_1.default, { onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(), isText: true, textColor: Color_1.Color.Accent3, size: 'tiny', icon: Icon_1.IconType.ArrowRight, iconPosition: 'right' }, "Add new Card")))));
+};
+exports.MemberCardItem = MemberCardItem;
+//# sourceMappingURL=MemberCardItem.js.map

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

@@ -0,0 +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"]}

package/dist/src/components/pages/PageColorComponent.d.ts ADDED Viewed

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

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageColorComponent = void 0;
+const React = require("react");
+const react_1 = require("react");
+const hooks_1 = require("@frontend/hooks");
+const RoomstayThemeEngine_1 = require("providers/RoomstayThemeEngine");
+const PageColorComponent = () => {
+    const { hotel } = (0, hooks_1.useCurrentHotel)();
+    (0, react_1.useEffect)(() => {
+        if (hotel) {
+            RoomstayThemeEngine_1.default.changeTheme(hotel.colors);
+        }
+    }, [hotel === null || hotel === void 0 ? void 0 : hotel.colors]);
+    return React.createElement(React.Fragment, null);
+};
+exports.PageColorComponent = PageColorComponent;
+//# sourceMappingURL=PageColorComponent.js.map

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

@@ -0,0 +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"]}

package/dist/src/components/reservation/ReservationItem.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import { IRoomstayMemberBookingItemWithRef } from '@frontend/contexts';
+export declare enum ReservationAction {
+    MoreDetails = "MoreDetails",
+    BookAgain = "BookAgain",
+    Cancel = "Cancel",
+    Modify = "Modify"
+}
+export type ReservationItemProps = {
+    itineraryItem: IRoomstayMemberBookingItemWithRef;
+    disableMarginBottom?: boolean;
+    actions?: ReservationAction[];
+    showCancelledNotifications?: boolean;
+    onActionClick?: (action: ReservationAction, item: IRoomstayMemberBookingItemWithRef) => void;
+};
+declare const ReservationItem: (props: ReservationItemProps) => JSX.Element;
+export default ReservationItem;