@roomstay/frontend 2.6.19 → 2.6.20

package/dist/src/models/RoomstaySession.js.map

@@ -1 +1 @@
-{"version":3,"file":"RoomstaySession.js","sourceRoot":"/","sources":["src/models/RoomstaySession.ts"],"names":[],"mappings":";;;AA6Da,QAAA,sBAAsB,GAAG,YAAY,CAAC","sourcesContent":["import { IBookingPayment } from '@roomstay/core';\nimport dayjs from 'dayjs';\n\nimport type BasketRow from '@/models/BasketRow';\nimport type { IRoom } from '@/models/Room/Room';\nimport type { IRoomRate } from '@/models/Room/RoomRate';\nimport UserProfile from '@/models/UserProfile';\n\nimport ReservationsDTO from './Api/ReservationsDTO';\n\n/**\n * Booking engine state object, that is stored, can be loaded and unloaded\n */\nexport type RoomstaySession = {\n    id: number;\n    step: string;\n    startDate: dayjs.Dayjs | null;\n    endDate: dayjs.Dayjs | null;\n    hotelID: number | string;\n    source: string;\n\n    basketRows: BasketRow[];\n\n    reservationRequest?: {\n        userProfiles: UserProfile[];\n        payment: IBookingPayment;\n        comments: string;\n    };\n    reservation?: ReservationsDTO;\n};\n\nexport type SerializedRoomstaySession = {\n    id: number;\n    step: string;\n    startDate: string;\n    endDate: string;\n    hotelID: number | string;\n    source: string;\n\n    basketRows: SerializedRoomstaySessionBasketRow[];\n    reservation?: ReservationsDTO;\n\n    reservationRequest?: RoomstaySession['reservationRequest'];\n};\n\nexport type SerializedRoomstaySessionBasketRow = {\n    uniqId: string;\n    startDate: string;\n    endDate: string;\n\n    adults: number;\n    children: number;\n    infants: number;\n\n    promoCode: string;\n    promoCodeStatus: string;\n\n    room: IRoom;\n    rate: IRoomRate;\n};\n\nexport const SERIALIZED_DATE_FORMAT = 'YYYY/MM/DD';\n"]}
+{"version":3,"file":"RoomstaySession.js","sourceRoot":"/","sources":["src/models/RoomstaySession.ts"],"names":[],"mappings":";;;AAkEa,QAAA,sBAAsB,GAAG,YAAY,CAAC","sourcesContent":["import { SignInUser } from '@frontend/contexts';\nimport { IBookingPayment } from '@roomstay/core';\nimport dayjs from 'dayjs';\n\nimport type BasketRow from '@/models/BasketRow';\nimport type { IRoom } from '@/models/Room/Room';\nimport type { IRoomRate } from '@/models/Room/RoomRate';\nimport UserProfile from '@/models/UserProfile';\n\nimport ReservationsDTO from './Api/ReservationsDTO';\n\n/**\n * Booking engine state object, that is stored, can be loaded and unloaded\n */\nexport type RoomstaySession = {\n    id: number;\n    step: string;\n    startDate: dayjs.Dayjs | null;\n    endDate: dayjs.Dayjs | null;\n    hotelID: number | string;\n    source: string;\n    user?: SignInUser;\n    memberId?: string;\n\n    basketRows: BasketRow[];\n\n    reservationRequest?: {\n        userProfiles: UserProfile[];\n        payment: IBookingPayment;\n        comments: string;\n    };\n    reservation?: ReservationsDTO;\n};\n\nexport type SerializedRoomstaySession = {\n    id: number;\n    step: string;\n    startDate: string;\n    endDate: string;\n    hotelID: number | string;\n    source: string;\n    user?: string;\n    memberId?: string;\n\n    basketRows: SerializedRoomstaySessionBasketRow[];\n\n    reservation?: ReservationsDTO;\n    reservationRequest?: RoomstaySession['reservationRequest'];\n};\n\nexport type SerializedRoomstaySessionBasketRow = {\n    uniqId: string;\n    startDate: string;\n    endDate: string;\n\n    adults: number;\n    children: number;\n    infants: number;\n\n    promoCode: string;\n    promoCodeStatus: string;\n\n    room: IRoom;\n    rate: IRoomRate;\n};\n\nexport const SERIALIZED_DATE_FORMAT = 'YYYY/MM/DD';\n"]}

package/dist/src/pages/account/AccountRouter.js

@@ -14,6 +14,7 @@ const AccountHelpPage_1 = require("./Help/AccountHelpPage");
 const AccountReservationSinglePage_1 = require("./Reservations/AccountReservationSinglePage");
 const AccountReservationsPage_1 = require("./Reservations/AccountReservationsPage");
 const AccountRoutes_1 = require("./AccountRoutes");
+const AccountChangePasswordPage_1 = require("./ChangePassword/AccountChangePasswordPage");
 const AccountRouter = () => {
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(AccountOutlet_1.AccountOutlet, null,
@@ -21,6 +22,7 @@ const AccountRouter = () => {
             react_1.default.createElement(react_router_dom_1.Route, { path: AccountRoutes_1.AccountRoutes.Reservations.matchPath, component: AccountReservationsPage_1.AccountReservationPage, exact: true }),
             react_1.default.createElement(react_router_dom_1.Route, { path: AccountRoutes_1.AccountRoutes.SingleReservation.matchPath, component: AccountReservationSinglePage_1.AccountReservationSinglePage }),
             react_1.default.createElement(react_router_dom_1.Route, { path: AccountRoutes_1.AccountRoutes.ProfileDetails.path, component: AccountDetailsProfilePage_1.AccountDetailsProfilePage }),
+            react_1.default.createElement(react_router_dom_1.Route, { path: AccountRoutes_1.AccountRoutes.ChangePassword.path, component: AccountChangePasswordPage_1.AccountChangePasswordPage }),
             react_1.default.createElement(react_router_dom_1.Route, { path: AccountRoutes_1.AccountRoutes.CardDetails.path, component: AccountDetailsCardsPage_1.AccountDetailsCardsPage }),
             react_1.default.createElement(react_router_dom_1.Route, { path: AccountRoutes_1.AccountRoutes.Help.path, component: AccountHelpPage_1.AccountHelpPage }))));
 };

package/dist/src/pages/account/AccountRouter.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccountRouter.js","sourceRoot":"/","sources":["src/pages/account/AccountRouter.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,uDAAyC;AAEzC,iFAA8E;AAC9E,iEAA8D;AAC9D,6FAA0F;AAC1F,iGAA8F;AAC9F,0EAAuE;AACvE,4GAAyG;AACzG,kGAA8F;AAE9F,mDAAgD;AAEzC,MAAM,aAAa,GAAG,GAAG,EAAE;IAC9B,OAAO,CACH;QACI,8BAAC,6BAAa;YACV,8BAAC,wBAAK,IAAC,IAAI,EAAE,6BAAa,CAAC,IAAI,CAAC,IAAI,EAAE,SAAS,EAAE,iCAAe,GAAI;YACpE,8BAAC,wBAAK,IAAC,IAAI,EAAE,6BAAa,CAAC,YAAY,CAAC,SAAS,EAAE,SAAS,EAAE,gDAAsB,EAAE,KAAK,SAAG;YAE9F,8BAAC,wBAAK,IAAC,IAAI,EAAE,6BAAa,CAAC,iBAAiB,CAAC,SAAS,EAAE,SAAS,EAAE,2DAA4B,GAAI;YAEnG,8BAAC,wBAAK,IAAC,IAAI,EAAE,6BAAa,CAAC,cAAc,CAAC,IAAI,EAAE,SAAS,EAAE,qDAAyB,GAAI;YACxF,8BAAC,wBAAK,IAAC,IAAI,EAAE,6BAAa,CAAC,WAAW,CAAC,IAAI,EAAE,SAAS,EAAE,iDAAuB,GAAI;YAEnF,8BAAC,wBAAK,IAAC,IAAI,EAAE,6BAAa,CAAC,IAAI,CAAC,IAAI,EAAE,SAAS,EAAE,iCAAe,GAAI,CACxD,CACjB,CACN,CAAC;AACN,CAAC,CAAC;AAhBW,QAAA,aAAa,iBAgBxB","sourcesContent":["import React from 'react';\nimport { Route } from 'react-router-dom';\n\nimport { AccountHomePage } from '@/pages/account/AccountHome/AccountHomePage';\nimport { AccountOutlet } from '@/pages/account/AccountOutlet';\nimport { AccountDetailsCardsPage } from '@/pages/account/Details/AccountDetailsCardsPage';\nimport { AccountDetailsProfilePage } from '@/pages/account/Details/AccountDetailsProfilePage';\nimport { AccountHelpPage } from '@/pages/account/Help/AccountHelpPage';\nimport { AccountReservationSinglePage } from '@/pages/account/Reservations/AccountReservationSinglePage';\nimport { AccountReservationPage } from '@/pages/account/Reservations/AccountReservationsPage';\n\nimport { AccountRoutes } from './AccountRoutes';\n\nexport const AccountRouter = () => {\n    return (\n        <>\n            <AccountOutlet>\n                <Route path={AccountRoutes.Home.path} component={AccountHomePage} />\n                <Route path={AccountRoutes.Reservations.matchPath} component={AccountReservationPage} exact />\n\n                <Route path={AccountRoutes.SingleReservation.matchPath} component={AccountReservationSinglePage} />\n\n                <Route path={AccountRoutes.ProfileDetails.path} component={AccountDetailsProfilePage} />\n                <Route path={AccountRoutes.CardDetails.path} component={AccountDetailsCardsPage} />\n\n                <Route path={AccountRoutes.Help.path} component={AccountHelpPage} />\n            </AccountOutlet>\n        </>\n    );\n};\n"]}
+{"version":3,"file":"AccountRouter.js","sourceRoot":"/","sources":["src/pages/account/AccountRouter.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,uDAAyC;AAEzC,iFAA8E;AAC9E,iEAA8D;AAC9D,6FAA0F;AAC1F,iGAA8F;AAC9F,0EAAuE;AACvE,4GAAyG;AACzG,kGAA8F;AAE9F,mDAAgD;AAChD,0FAAuF;AAEhF,MAAM,aAAa,GAAG,GAAG,EAAE;IAC9B,OAAO,CACH;QACI,8BAAC,6BAAa;YACV,8BAAC,wBAAK,IAAC,IAAI,EAAE,6BAAa,CAAC,IAAI,CAAC,IAAI,EAAE,SAAS,EAAE,iCAAe,GAAI;YACpE,8BAAC,wBAAK,IAAC,IAAI,EAAE,6BAAa,CAAC,YAAY,CAAC,SAAS,EAAE,SAAS,EAAE,gDAAsB,EAAE,KAAK,SAAG;YAE9F,8BAAC,wBAAK,IAAC,IAAI,EAAE,6BAAa,CAAC,iBAAiB,CAAC,SAAS,EAAE,SAAS,EAAE,2DAA4B,GAAI;YAEnG,8BAAC,wBAAK,IAAC,IAAI,EAAE,6BAAa,CAAC,cAAc,CAAC,IAAI,EAAE,SAAS,EAAE,qDAAyB,GAAI;YACxF,8BAAC,wBAAK,IAAC,IAAI,EAAE,6BAAa,CAAC,cAAc,CAAC,IAAI,EAAE,SAAS,EAAE,qDAAyB,GAAI;YACxF,8BAAC,wBAAK,IAAC,IAAI,EAAE,6BAAa,CAAC,WAAW,CAAC,IAAI,EAAE,SAAS,EAAE,iDAAuB,GAAI;YAEnF,8BAAC,wBAAK,IAAC,IAAI,EAAE,6BAAa,CAAC,IAAI,CAAC,IAAI,EAAE,SAAS,EAAE,iCAAe,GAAI,CACxD,CACjB,CACN,CAAC;AACN,CAAC,CAAC;AAjBW,QAAA,aAAa,iBAiBxB","sourcesContent":["import React from 'react';\nimport { Route } from 'react-router-dom';\n\nimport { AccountHomePage } from '@/pages/account/AccountHome/AccountHomePage';\nimport { AccountOutlet } from '@/pages/account/AccountOutlet';\nimport { AccountDetailsCardsPage } from '@/pages/account/Details/AccountDetailsCardsPage';\nimport { AccountDetailsProfilePage } from '@/pages/account/Details/AccountDetailsProfilePage';\nimport { AccountHelpPage } from '@/pages/account/Help/AccountHelpPage';\nimport { AccountReservationSinglePage } from '@/pages/account/Reservations/AccountReservationSinglePage';\nimport { AccountReservationPage } from '@/pages/account/Reservations/AccountReservationsPage';\n\nimport { AccountRoutes } from './AccountRoutes';\nimport { AccountChangePasswordPage } from './ChangePassword/AccountChangePasswordPage';\n\nexport const AccountRouter = () => {\n    return (\n        <>\n            <AccountOutlet>\n                <Route path={AccountRoutes.Home.path} component={AccountHomePage} />\n                <Route path={AccountRoutes.Reservations.matchPath} component={AccountReservationPage} exact />\n\n                <Route path={AccountRoutes.SingleReservation.matchPath} component={AccountReservationSinglePage} />\n\n                <Route path={AccountRoutes.ProfileDetails.path} component={AccountDetailsProfilePage} />\n                <Route path={AccountRoutes.ChangePassword.path} component={AccountChangePasswordPage} />\n                <Route path={AccountRoutes.CardDetails.path} component={AccountDetailsCardsPage} />\n\n                <Route path={AccountRoutes.Help.path} component={AccountHelpPage} />\n            </AccountOutlet>\n        </>\n    );\n};\n"]}

package/dist/src/pages/account/AccountRoutes.d.ts

@@ -19,4 +19,7 @@ export declare const AccountRoutes: {
     Help: {
         path: string;
     };
+    ChangePassword: {
+        path: string;
+    };
 };

package/dist/src/pages/account/AccountRoutes.js

@@ -22,5 +22,8 @@ exports.AccountRoutes = {
     Help: {
         path: '/account/help',
     },
+    ChangePassword: {
+        path: '/account/details/change-password',
+    },
 };
 //# sourceMappingURL=AccountRoutes.js.map

package/dist/src/pages/account/AccountRoutes.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccountRoutes.js","sourceRoot":"/","sources":["src/pages/account/AccountRoutes.ts"],"names":[],"mappings":";;;AAAa,QAAA,aAAa,GAAG;IACzB,IAAI,EAAE;QACF,IAAI,EAAE,eAAe;KACxB;IACD,YAAY,EAAE;QACV,SAAS,EAAE,iCAAiC;QAC5C,IAAI,EAAE,uBAAuB;KAChC;IACD,iBAAiB,EAAE;QACf,SAAS,EAAE,mCAAmC;QAC9C,IAAI,EAAE,wBAAwB;KACjC;IACD,cAAc,EAAE;QACZ,IAAI,EAAE,0BAA0B;KACnC;IACD,WAAW,EAAE;QACT,IAAI,EAAE,wBAAwB;KACjC;IACD,IAAI,EAAE;QACF,IAAI,EAAE,eAAe;KACxB;CACJ,CAAC","sourcesContent":["export const AccountRoutes = {\n    Home: {\n        path: '/account/home',\n    },\n    Reservations: {\n        matchPath: '/account/reservations/:tabPath?',\n        path: '/account/reservations',\n    },\n    SingleReservation: {\n        matchPath: '/account/reservations/:resId/item',\n        path: '/account/reservations/',\n    },\n    ProfileDetails: {\n        path: '/account/details/profile',\n    },\n    CardDetails: {\n        path: '/account/details/cards',\n    },\n    Help: {\n        path: '/account/help',\n    },\n};\n"]}
+{"version":3,"file":"AccountRoutes.js","sourceRoot":"/","sources":["src/pages/account/AccountRoutes.ts"],"names":[],"mappings":";;;AAAa,QAAA,aAAa,GAAG;IACzB,IAAI,EAAE;QACF,IAAI,EAAE,eAAe;KACxB;IACD,YAAY,EAAE;QACV,SAAS,EAAE,iCAAiC;QAC5C,IAAI,EAAE,uBAAuB;KAChC;IACD,iBAAiB,EAAE;QACf,SAAS,EAAE,mCAAmC;QAC9C,IAAI,EAAE,wBAAwB;KACjC;IACD,cAAc,EAAE;QACZ,IAAI,EAAE,0BAA0B;KACnC;IACD,WAAW,EAAE;QACT,IAAI,EAAE,wBAAwB;KACjC;IACD,IAAI,EAAE;QACF,IAAI,EAAE,eAAe;KACxB;IACD,cAAc,EAAE;QACZ,IAAI,EAAE,kCAAkC;KAC3C;CACJ,CAAC","sourcesContent":["export const AccountRoutes = {\n    Home: {\n        path: '/account/home',\n    },\n    Reservations: {\n        matchPath: '/account/reservations/:tabPath?',\n        path: '/account/reservations',\n    },\n    SingleReservation: {\n        matchPath: '/account/reservations/:resId/item',\n        path: '/account/reservations/',\n    },\n    ProfileDetails: {\n        path: '/account/details/profile',\n    },\n    CardDetails: {\n        path: '/account/details/cards',\n    },\n    Help: {\n        path: '/account/help',\n    },\n    ChangePassword: {\n        path: '/account/details/change-password',\n    },\n};\n"]}

package/dist/src/pages/account/ChangePassword/AccountChangePasswordPage.d.ts

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

package/dist/src/pages/account/ChangePassword/AccountChangePasswordPage.js

@@ -0,0 +1,143 @@
+"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.AccountChangePasswordPage = void 0;
+const contexts_1 = require("../../../contexts/index.js");
+const hooks_1 = require("../../../hooks/index.js");
+const react_1 = __importStar(require("react"));
+const react_hook_form_1 = require("react-hook-form");
+const react_i18next_1 = require("react-i18next");
+const react_router_dom_1 = require("react-router-dom");
+const Translation_1 = require("translations/Translation");
+const BEButton_1 = __importDefault(require("../../../components/generic/BEButton"));
+const Headline_1 = __importDefault(require("../../../components/generic/Headline"));
+const Icon_1 = require("../../../components/generic/Icon/Icon");
+const PasswordBox_1 = require("../../../components/generic/PasswordBox/PasswordBox");
+const Text_1 = __importStar(require("../../../components/generic/Text"));
+const Color_1 = require("../../../util/Color");
+const Validation_1 = require("../../../util/Validation");
+const AutoAutoHeight_1 = __importDefault(require("../../../animations/AutoAutoHeight"));
+const Alert_1 = __importStar(require("../../../components/generic/Alert"));
+const AccountRoutes_1 = require("../AccountRoutes");
+const LabelAndInputGroup = (props) => {
+    const { label, component, hint, error } = props;
+    return (react_1.default.createElement("div", { className: "row u-marg-bottom--heavy" },
+        react_1.default.createElement("div", { className: "col-md-4" },
+            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, bold: true }, label)),
+        react_1.default.createElement("div", { className: "col-md-8" },
+            component,
+            !!error && (react_1.default.createElement("p", { className: "text-small", style: { color: '#ED4362' } }, error.message)),
+            !!hint && (react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.Grey }, hint)))));
+};
+const AccountChangePasswordPage = () => {
+    const { loading: isLoadingMember, changePassword } = (0, react_1.useContext)(contexts_1.AuthenticationContext);
+    const { hotel } = (0, hooks_1.useCurrentHotel)();
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { trigger, watch, register, formState: { errors, isDirty }, handleSubmit, } = (0, react_hook_form_1.useForm)({
+        mode: 'onChange',
+        reValidateMode: 'onChange',
+        defaultValues: {
+            currentPassword: '',
+            newPassword: '',
+            confirmPassword: '',
+        },
+    });
+    const newPasswordWatch = watch('newPassword');
+    (0, react_1.useEffect)(() => {
+        trigger('confirmPassword');
+    }, [newPasswordWatch, trigger]);
+    const getErrorValidationClass = (name) => (errors[name] ? 'error' : undefined);
+    const [alert, setAlert] = (0, react_1.useState)(null);
+    const notificationMap = {
+        [contexts_1.CognitoLoginState.Success]: {
+            type: Alert_1.AlertType.Success,
+            icon: Icon_1.IconType.Check,
+            message: t(Translation_1.Translation.UserPortal.ChangePassword.ChangePasswordSuccessfully),
+        },
+        [contexts_1.CognitoLoginState.NotAuthorizedException]: {
+            type: Alert_1.AlertType.Danger,
+            icon: Icon_1.IconType.Error,
+            message: t(Translation_1.Translation.UserPortal.ChangePassword.NotAuthorizedException),
+        },
+        [contexts_1.CognitoLoginState.LimitExceededException]: {
+            type: Alert_1.AlertType.Danger,
+            icon: Icon_1.IconType.Error,
+            message: t(Translation_1.Translation.UserPortal.ChangePassword.LimitExceededException),
+        },
+    };
+    const onChangePassword = ({ currentPassword, newPassword }) => {
+        setAlert(null);
+        changePassword === null || changePassword === void 0 ? void 0 : changePassword(currentPassword, newPassword, { hotel }).then((state) => {
+            if (state) {
+                const notification = notificationMap[state];
+                if (notification) {
+                    setAlert(notification);
+                }
+            }
+        });
+    };
+    const saveButtonDisabled = !isDirty || isLoadingMember || !!Object.keys(errors).length;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "u-marg-top--heavy@m u-marg-top@- u-marg-bottom--heavy" },
+            react_1.default.createElement(react_router_dom_1.Link, { to: AccountRoutes_1.AccountRoutes.ProfileDetails.path },
+                react_1.default.createElement(BEButton_1.default, { isText: true, icon: Icon_1.IconType.ArrowLeft, size: "small" }, t(Translation_1.Translation.UserPortal.ChangePassword.BackToProfile)))),
+        react_1.default.createElement("div", { className: "u-marg-bottom--heavy@m" },
+            react_1.default.createElement(Headline_1.default, { size: "extra-large", bold: true }, t(Translation_1.Translation.Navigation.Menu.ChangePassword))),
+        react_1.default.createElement("div", { className: "u-marg-bottom--heavy@m" },
+            react_1.default.createElement(AutoAutoHeight_1.default, { open: !!alert },
+                react_1.default.createElement("div", { className: "row" },
+                    react_1.default.createElement("div", { className: "col-md-8" },
+                        react_1.default.createElement(Alert_1.default, { type: alert === null || alert === void 0 ? void 0 : alert.type, icon: alert === null || alert === void 0 ? void 0 : alert.icon },
+                            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small }, alert === null || alert === void 0 ? void 0 : alert.message)))))),
+        react_1.default.createElement("form", { onSubmit: handleSubmit(onChangePassword) },
+            react_1.default.createElement("div", { className: "row" },
+                react_1.default.createElement("div", { className: "col-md-8" },
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement(LabelAndInputGroup, { label: t(Translation_1.Translation.UserPortal.ChangePassword.Field.CurrentPassword), component: react_1.default.createElement(PasswordBox_1.PasswordBox, Object.assign({ placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" }, register('currentPassword', {
+                                pattern: (0, Validation_1.makePasswordPatternRule)(t),
+                                required: (0, Validation_1.makeRequiredRule)(t)(true, t(Translation_1.Translation.UserPortal.ChangePassword.Field.CurrentPassword)),
+                            }), { validationStatus: getErrorValidationClass('currentPassword') })), error: errors.currentPassword }),
+                        react_1.default.createElement(LabelAndInputGroup, { label: t(Translation_1.Translation.UserPortal.ChangePassword.Field.NewPassword), component: react_1.default.createElement(PasswordBox_1.PasswordBox, Object.assign({ placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" }, register('newPassword', {
+                                pattern: (0, Validation_1.makePasswordPatternRule)(t),
+                                required: (0, Validation_1.makeRequiredRule)(t)(true, t(Translation_1.Translation.UserPortal.ChangePassword.Field.NewPassword)),
+                            }), { validationStatus: getErrorValidationClass('newPassword') })), error: errors.newPassword }),
+                        react_1.default.createElement(LabelAndInputGroup, { label: t(Translation_1.Translation.UserPortal.ChangePassword.Field.ConfirmPassword), component: react_1.default.createElement(PasswordBox_1.PasswordBox, Object.assign({ placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" }, register('confirmPassword', {
+                                required: (0, Validation_1.makeRequiredRule)(t)(!!newPasswordWatch, t(Translation_1.Translation.Step.Confirmation.Inputs.ConfirmPassword)),
+                                validate: {
+                                    isSame: (0, Validation_1.isPasswordMatch)(t)(newPasswordWatch),
+                                },
+                            }), { validationStatus: getErrorValidationClass('confirmPassword') })), error: errors.confirmPassword })))),
+            react_1.default.createElement("div", { className: "row" },
+                react_1.default.createElement("div", { className: "col-md-8" },
+                    react_1.default.createElement("div", { className: "u-flex justify-content-start u-marg-top--heavy" },
+                        react_1.default.createElement(react_router_dom_1.Link, { to: "/account/home", className: "u-marg-right" },
+                            react_1.default.createElement(BEButton_1.default, null, t(Translation_1.Translation.Misc.Cancel))),
+                        react_1.default.createElement(BEButton_1.default, { disabled: saveButtonDisabled, isLoading: isLoadingMember, primary: true, filled: true, htmlType: "submit" }, t(Translation_1.Translation.Misc.Save))))))));
+};
+exports.AccountChangePasswordPage = AccountChangePasswordPage;
+//# sourceMappingURL=AccountChangePasswordPage.js.map

package/dist/src/pages/account/ChangePassword/AccountChangePasswordPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccountChangePasswordPage.js","sourceRoot":"/","sources":["src/pages/account/ChangePassword/AccountChangePasswordPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AuthenticationContext, CognitoLoginState, IMemberChangePassword } from '@frontend/contexts';\nimport { useCurrentHotel } from '@frontend/hooks';\nimport React, { useContext, useEffect, useState } from 'react';\nimport { FieldError, useForm } from 'react-hook-form';\nimport { useTranslation } from 'react-i18next';\nimport { Link } from 'react-router-dom';\nimport { Translation } from 'translations/Translation';\n\nimport BEButton from '@/components/generic/BEButton';\nimport Headline from '@/components/generic/Headline';\nimport { IconType } from '@/components/generic/Icon/Icon';\nimport { PasswordBox } from '@/components/generic/PasswordBox/PasswordBox';\nimport Text, { TextType } from '@/components/generic/Text';\nimport { Color } from '@/util/Color';\nimport { isPasswordMatch, makePasswordPatternRule, makeRequiredRule } from '@/util/Validation';\n\nimport AutoAutoHeight from '../../../animations/AutoAutoHeight';\nimport Alert, { AlertType } from '../../../components/generic/Alert';\nimport { AccountRoutes } from '../AccountRoutes';\n\ntype LabelAndInputGroupProps = {\n    component: React.ReactNode;\n    label: string;\n    hint?: string;\n    error?: FieldError;\n};\n\nconst LabelAndInputGroup = (props: LabelAndInputGroupProps) => {\n    const { label, component, hint, error } = props;\n    return (\n        <div className=\"row u-marg-bottom--heavy\">\n            <div className=\"col-md-4\">\n                <Text type={TextType.Small} bold>\n                    {label}\n                </Text>\n            </div>\n            <div className=\"col-md-8\">\n                {component}\n                {!!error && (\n                    <p className=\"text-small\" style={{ color: '#ED4362' }}>\n                        {error.message}\n                    </p>\n                )}\n\n                {!!hint && (\n                    <Text type={TextType.Label} color={Color.Grey}>\n                        {hint}\n                    </Text>\n                )}\n            </div>\n        </div>\n    );\n};\n\ntype FormValues = IMemberChangePassword;\n\nexport const AccountChangePasswordPage = () => {\n    const { loading: isLoadingMember, changePassword } = useContext(AuthenticationContext);\n    const { hotel } = useCurrentHotel();\n    const { t } = useTranslation();\n\n    const {\n        trigger,\n        watch,\n        register,\n        formState: { errors, isDirty },\n        handleSubmit,\n    } = useForm<FormValues>({\n        mode: 'onChange',\n        reValidateMode: 'onChange',\n        defaultValues: {\n            currentPassword: '',\n            newPassword: '',\n            confirmPassword: '',\n        } as FormValues,\n    });\n\n    const newPasswordWatch = watch('newPassword');\n\n    useEffect(() => {\n        trigger('confirmPassword');\n    }, [newPasswordWatch, trigger]);\n\n    const getErrorValidationClass = (name: keyof FormValues): 'error' | undefined => (errors[name] ? 'error' : undefined);\n\n    const [alert, setAlert] = useState<{ type: AlertType; icon: IconType; message: string } | null>(null);\n    const notificationMap: Partial<Record<CognitoLoginState, { type: AlertType; icon: IconType; message: string }>> = {\n        [CognitoLoginState.Success]: {\n            type: AlertType.Success,\n            icon: IconType.Check,\n            message: t(Translation.UserPortal.ChangePassword.ChangePasswordSuccessfully),\n        },\n        [CognitoLoginState.NotAuthorizedException]: {\n            type: AlertType.Danger,\n            icon: IconType.Error,\n            message: t(Translation.UserPortal.ChangePassword.NotAuthorizedException),\n        },\n        [CognitoLoginState.LimitExceededException]: {\n            type: AlertType.Danger,\n            icon: IconType.Error,\n            message: t(Translation.UserPortal.ChangePassword.LimitExceededException),\n        },\n    };\n\n    const onChangePassword = ({ currentPassword, newPassword }: FormValues) => {\n        setAlert(null);\n        changePassword?.(currentPassword, newPassword, { hotel }).then((state: CognitoLoginState | undefined) => {\n            if (state) {\n                const notification = notificationMap[state];\n                if (notification) {\n                    setAlert(notification);\n                }\n            }\n        });\n    };\n\n    const saveButtonDisabled = !isDirty || isLoadingMember || !!Object.keys(errors).length;\n\n    return (\n        <>\n            <div className=\"u-marg-top--heavy@m u-marg-top@- u-marg-bottom--heavy\">\n                <Link to={AccountRoutes.ProfileDetails.path}>\n                    <BEButton isText icon={IconType.ArrowLeft} size=\"small\">\n                        {t(Translation.UserPortal.ChangePassword.BackToProfile)}\n                    </BEButton>\n                </Link>\n            </div>\n            <div className=\"u-marg-bottom--heavy@m\">\n                <Headline size=\"extra-large\" bold>\n                    {t(Translation.Navigation.Menu.ChangePassword)}\n                </Headline>\n            </div>\n            <div className=\"u-marg-bottom--heavy@m\">\n                <AutoAutoHeight open={!!alert}>\n                    <div className=\"row\">\n                        <div className=\"col-md-8\">\n                            <Alert type={alert?.type} icon={alert?.icon}>\n                                <Text type={TextType.Small}>{alert?.message}</Text>\n                            </Alert>\n                        </div>\n                    </div>\n                </AutoAutoHeight>\n            </div>\n            <form onSubmit={handleSubmit(onChangePassword)}>\n                <div className=\"row\">\n                    <div className=\"col-md-8\">\n                        <div>\n                            <LabelAndInputGroup\n                                label={t(Translation.UserPortal.ChangePassword.Field.CurrentPassword)}\n                                component={\n                                    <PasswordBox\n                                        placeholder=\"•••••••••••••••\"\n                                        {...register('currentPassword', {\n                                            pattern: makePasswordPatternRule(t),\n                                            required: makeRequiredRule(t)(true, t(Translation.UserPortal.ChangePassword.Field.CurrentPassword)),\n                                        })}\n                                        validationStatus={getErrorValidationClass('currentPassword')}\n                                    />\n                                }\n                                error={errors.currentPassword}\n                            />\n                            <LabelAndInputGroup\n                                label={t(Translation.UserPortal.ChangePassword.Field.NewPassword)}\n                                component={\n                                    <PasswordBox\n                                        placeholder=\"•••••••••••••••\"\n                                        {...register('newPassword', {\n                                            pattern: makePasswordPatternRule(t),\n                                            required: makeRequiredRule(t)(true, t(Translation.UserPortal.ChangePassword.Field.NewPassword)),\n                                        })}\n                                        validationStatus={getErrorValidationClass('newPassword')}\n                                    />\n                                }\n                                error={errors.newPassword}\n                            />\n                            <LabelAndInputGroup\n                                label={t(Translation.UserPortal.ChangePassword.Field.ConfirmPassword)}\n                                component={\n                                    <PasswordBox\n                                        placeholder=\"•••••••••••••••\"\n                                        {...register('confirmPassword', {\n                                            required: makeRequiredRule(t)(!!newPasswordWatch, t(Translation.Step.Confirmation.Inputs.ConfirmPassword)),\n                                            validate: {\n                                                isSame: isPasswordMatch(t)(newPasswordWatch),\n                                            },\n                                        })}\n                                        validationStatus={getErrorValidationClass('confirmPassword')}\n                                    />\n                                }\n                                error={errors.confirmPassword}\n                            />\n                        </div>\n                    </div>\n                </div>\n                <div className=\"row\">\n                    <div className=\"col-md-8\">\n                        <div className=\"u-flex justify-content-start u-marg-top--heavy\">\n                            <Link to=\"/account/home\" className=\"u-marg-right\">\n                                <BEButton>{t(Translation.Misc.Cancel)}</BEButton>\n                            </Link>\n                            <BEButton disabled={saveButtonDisabled} isLoading={isLoadingMember} primary filled htmlType=\"submit\">\n                                {t(Translation.Misc.Save)}\n                            </BEButton>\n                        </div>\n                    </div>\n                </div>\n            </form>\n        </>\n    );\n};\n"]}

package/dist/src/pages/account/Details/AccountDetailsProfilePage.js

@@ -49,7 +49,6 @@ const EnhancedPhoneNumberField_1 = __importDefault(require("../../../components/
 const Headline_1 = __importDefault(require("../../../components/generic/Headline"));
 const Icon_1 = require("../../../components/generic/Icon/Icon");
 const LineBreak_1 = __importDefault(require("../../../components/generic/LineBreak"));
-const PasswordBox_1 = require("../../../components/generic/PasswordBox/PasswordBox");
 const Text_1 = __importStar(require("../../../components/generic/Text"));
 const TextBox_1 = __importDefault(require("../../../components/generic/TextBox"));
 const StepConfirmationCountrySelector_1 = __importDefault(require("../../../components/steps/confirmation/StepConfirmationCountrySelector"));
@@ -70,7 +69,7 @@ const AccountDetailsProfilePage = () => {
     const { roomstayMember, loading: isLoadingMember, updateMemberDetails } = (0, react_1.useContext)(contexts_1.RoomstayMemberContext);
     const notifications = (0, react_1.useContext)(contexts_1.NotificationContext);
     const { t } = (0, react_i18next_1.useTranslation)();
-    const { watch, register, formState: { errors, isDirty }, handleSubmit, reset: resetFormValues, control, } = (0, react_hook_form_1.useForm)({
+    const { register, formState: { errors, isDirty }, handleSubmit, reset: resetFormValues, control, } = (0, react_hook_form_1.useForm)({
         mode: 'onChange',
     });
     const getErrorValidationClass = (name) => (errors[name] ? 'error' : undefined);
@@ -113,16 +112,6 @@ const AccountDetailsProfilePage = () => {
                                         }, validationStatus: getErrorValidationClass('phoneNumber') })));
                                 } }), error: errors.phoneNumber }),
                         react_1.default.createElement(LineBreak_1.default, null),
-                        react_1.default.createElement(LabelAndInputGroup, { label: t(Translation_1.Translation.Step.Confirmation.Inputs.Password), component: react_1.default.createElement(PasswordBox_1.PasswordBox, Object.assign({ placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" }, register('password', {
-                                pattern: (0, Validation_1.makePasswordPatternRule)(t),
-                            }), { validationStatus: getErrorValidationClass('password') })), hint: "At least 8 characters long, case sensitive, can contain all symbols., no spaces.", error: errors.password }),
-                        react_1.default.createElement(LabelAndInputGroup, { label: t(Translation_1.Translation.Step.Confirmation.Inputs.ConfirmPassword), component: react_1.default.createElement(PasswordBox_1.PasswordBox, Object.assign({ placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" }, register('passwordRepeat', {
-                                required: (0, Validation_1.makeRequiredRule)(t)(!!watch('password'), t(Translation_1.Translation.Step.Confirmation.Inputs.ConfirmPassword)),
-                                validate: {
-                                    isSame: (0, Validation_1.isPasswordMatch)(t)(watch('password')),
-                                },
-                            }), { validationStatus: getErrorValidationClass('passwordRepeat') })), error: errors.passwordRepeat }),
-                        react_1.default.createElement(LineBreak_1.default, null),
                         react_1.default.createElement(LabelAndInputGroup, { label: t(Translation_1.Translation.Step.Confirmation.Inputs.Address), component: react_1.default.createElement(TextBox_1.default, Object.assign({}, register('address.address'))) }),
                         react_1.default.createElement(LabelAndInputGroup, { label: t(Translation_1.Translation.Step.Confirmation.Inputs.City), component: react_1.default.createElement(TextBox_1.default, Object.assign({}, register('address.city'))) }),
                         react_1.default.createElement(LabelAndInputGroup, { label: t(Translation_1.Translation.Step.Confirmation.Inputs.PostCode), component: react_1.default.createElement(TextBox_1.default, Object.assign({}, register('address.zip'))) }),
@@ -130,10 +119,16 @@ const AccountDetailsProfilePage = () => {
                                     const { ref } = field, rest = __rest(field, ["ref"]);
                                     return react_1.default.createElement(StepConfirmationCountrySelector_1.default, Object.assign({}, rest));
                                 } }) })))),
-            react_1.default.createElement("div", { className: "u-flex justify-content-start u-marg-top--heavy" },
-                react_1.default.createElement(react_router_dom_1.Link, { to: "/account/home", className: "u-marg-right" },
-                    react_1.default.createElement(BEButton_1.default, null, t(Translation_1.Translation.Misc.Cancel))),
-                react_1.default.createElement(BEButton_1.default, { disabled: saveButtonDisabled, isLoading: isLoadingMember, primary: true, filled: true, htmlType: "submit" }, t(Translation_1.Translation.Misc.SaveAllChanges))))));
+            react_1.default.createElement("div", { className: "row" },
+                react_1.default.createElement("div", { className: "col-md-8" },
+                    react_1.default.createElement("div", { className: "u-flex u-marg-top--heavy" },
+                        react_1.default.createElement("div", { className: "u-flex" },
+                            react_1.default.createElement(react_router_dom_1.Link, { to: "/account/home", className: "u-marg-right" },
+                                react_1.default.createElement(BEButton_1.default, null, t(Translation_1.Translation.Misc.Cancel))),
+                            react_1.default.createElement(BEButton_1.default, { disabled: saveButtonDisabled, isLoading: isLoadingMember, primary: true, filled: true, htmlType: "submit", className: "u-marg-right" }, t(Translation_1.Translation.Misc.SaveAllChanges))),
+                        react_1.default.createElement("div", { className: "u-flex-grow" },
+                            react_1.default.createElement(react_router_dom_1.Link, { to: AccountRoutes_1.AccountRoutes.ChangePassword.path },
+                                react_1.default.createElement(BEButton_1.default, null, t(Translation_1.Translation.Navigation.Menu.ChangePassword))))))))));
 };
 exports.AccountDetailsProfilePage = AccountDetailsProfilePage;
 //# sourceMappingURL=AccountDetailsProfilePage.js.map

package/dist/src/pages/account/Details/AccountDetailsProfilePage.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccountDetailsProfilePage.js","sourceRoot":"/","sources":["src/pages/account/Details/AccountDetailsProfilePage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { NotificationContext, RoomstayMemberContext } from '@frontend/contexts';\nimport type { IRoomstayMember } from '@roomstay/core';\nimport React, { useContext, useEffect } from 'react';\nimport { Controller, FieldError, useForm } from 'react-hook-form';\nimport { useTranslation } from 'react-i18next';\nimport { Link } from 'react-router-dom';\nimport { Translation } from 'translations/Translation';\n\nimport BEButton from '@/components/generic/BEButton';\nimport EnhancedPhoneNumberField from '@/components/generic/custom/EnhancedPhoneNumberField/EnhancedPhoneNumberField';\nimport Headline from '@/components/generic/Headline';\nimport { IconType } from '@/components/generic/Icon/Icon';\nimport LineBreak from '@/components/generic/LineBreak';\nimport { PasswordBox } from '@/components/generic/PasswordBox/PasswordBox';\nimport Text, { TextType } from '@/components/generic/Text';\nimport TextBox from '@/components/generic/TextBox';\nimport StepConfirmationCountrySelector from '@/components/steps/confirmation/StepConfirmationCountrySelector';\nimport { Color } from '@/util/Color';\nimport { isPasswordMatch, makePasswordPatternRule, makePhonePatternRule, makeRequiredRule } from '@/util/Validation';\n\nimport { AccountRoutes } from '../AccountRoutes';\n\ntype LabelAndInputGroupProps = {\n    component: React.ReactNode;\n    label: string;\n    hint?: string;\n    error?: FieldError;\n};\n\nconst LabelAndInputGroup = (props: LabelAndInputGroupProps) => {\n    const { label, component, hint, error } = props;\n    return (\n        <div className=\"row u-marg-bottom--heavy\">\n            <div className=\"col-md-4\">\n                <Text type={TextType.Small} bold>\n                    {label}\n                </Text>\n            </div>\n            <div className=\"col-md-8\">\n                {component}\n                {!!error && (\n                    <p className=\"text-small\" style={{ color: '#ED4362' }}>\n                        {error.message}\n                    </p>\n                )}\n\n                {!!hint && (\n                    <Text type={TextType.Label} color={Color.Grey}>\n                        {hint}\n                    </Text>\n                )}\n            </div>\n        </div>\n    );\n};\n\ntype FormValues = IRoomstayMember & {\n    password: string;\n    passwordRepeat: string;\n};\n\nexport const AccountDetailsProfilePage = () => {\n    const { roomstayMember, loading: isLoadingMember, updateMemberDetails } = useContext(RoomstayMemberContext);\n    const notifications = useContext(NotificationContext);\n\n    const { t } = useTranslation();\n\n    const {\n        watch,\n        register,\n        formState: { errors, isDirty },\n        handleSubmit,\n        reset: resetFormValues,\n        control,\n    } = useForm<FormValues>({\n        mode: 'onChange',\n    });\n\n    const getErrorValidationClass = (name: keyof FormValues): 'error' | undefined => (errors[name] ? 'error' : undefined);\n\n    useEffect(() => {\n        if (roomstayMember) {\n            resetFormValues(roomstayMember);\n        }\n    }, [roomstayMember]);\n\n    const onSaveDetails = (values: FormValues) => {\n        updateMemberDetails?.(values).then(() => {\n            notifications.addNotification({\n                icon: IconType.Check,\n                children: <Text>{t(Translation.UserPortal.ProfileScreen.DetailsSavedSuccessfully)}</Text>,\n            });\n        });\n    };\n\n    const saveButtonDisabled = !isDirty || isLoadingMember || !!Object.keys(errors).length;\n\n    return (\n        <>\n            <div className=\"u-marg-top--heavy@m u-marg-top@- u-marg-bottom--heavy\">\n                <Link to={AccountRoutes.Home.path}>\n                    <BEButton isText icon={IconType.ArrowLeft} size=\"small\">\n                        {t(Translation.Reservation.BackToYourAccount)}\n                    </BEButton>\n                </Link>\n            </div>\n            <div className=\"u-marg-bottom--heavy@m\">\n                <Headline size=\"extra-large\" bold>\n                    {t(Translation.Navigation.Menu.ProfileInformation)}\n                </Headline>\n            </div>\n            <form onSubmit={handleSubmit(onSaveDetails)}>\n                <div className=\"row\">\n                    <div className=\"col-md-8\">\n                        <div>\n                            <LabelAndInputGroup\n                                label={t(Translation.Step.Confirmation.Inputs.Forename)}\n                                component={\n                                    <TextBox\n                                        validationStatus={getErrorValidationClass('forename')}\n                                        {...register('forename', {\n                                            required: makeRequiredRule(t)(true, t(Translation.Step.Confirmation.Inputs.Forename)),\n                                        })}\n                                    />\n                                }\n                                error={errors.forename}\n                            />\n                            <LabelAndInputGroup\n                                label={t(Translation.Step.Confirmation.Inputs.Surname)}\n                                component={\n                                    <TextBox\n                                        validationStatus={getErrorValidationClass('surname')}\n                                        {...register('surname', {\n                                            required: makeRequiredRule(t)(true, t(Translation.Step.Confirmation.Inputs.Surname)),\n                                        })}\n                                    />\n                                }\n                                error={errors.surname}\n                            />\n                            <LabelAndInputGroup\n                                label={t(Translation.Step.Confirmation.Inputs.Email)}\n                                component={<TextBox validationStatus={getErrorValidationClass('email')} inputProps={{ disabled: true }} value={roomstayMember?.email} />}\n                                error={errors.email}\n                            />\n                            <LabelAndInputGroup\n                                label={t(Translation.Step.Confirmation.Inputs.Phone)}\n                                component={\n                                    <Controller\n                                        rules={{\n                                            pattern: makePhonePatternRule(t),\n                                        }}\n                                        control={control}\n                                        name=\"phoneNumber\"\n                                        render={({ field }) => {\n                                            return (\n                                                <EnhancedPhoneNumberField\n                                                    {...field}\n                                                    onChange={(e: any) => {\n                                                        field.onChange(e);\n                                                    }}\n                                                    validationStatus={getErrorValidationClass('phoneNumber')}\n                                                />\n                                            );\n                                        }}\n                                    />\n                                }\n                                error={errors.phoneNumber}\n                            />\n\n                            <LineBreak />\n\n                            <LabelAndInputGroup\n                                label={t(Translation.Step.Confirmation.Inputs.Password)}\n                                component={\n                                    <PasswordBox\n                                        placeholder=\"•••••••••••••••\"\n                                        {...register('password', {\n                                            pattern: makePasswordPatternRule(t),\n                                        })}\n                                        validationStatus={getErrorValidationClass('password')}\n                                    />\n                                }\n                                hint=\"At least 8 characters long, case sensitive, can contain all symbols., no spaces.\"\n                                error={errors.password}\n                            />\n                            <LabelAndInputGroup\n                                label={t(Translation.Step.Confirmation.Inputs.ConfirmPassword)}\n                                component={\n                                    <PasswordBox\n                                        placeholder=\"•••••••••••••••\"\n                                        {...register('passwordRepeat', {\n                                            required: makeRequiredRule(t)(!!watch('password'), t(Translation.Step.Confirmation.Inputs.ConfirmPassword)),\n                                            validate: {\n                                                isSame: isPasswordMatch(t)(watch('password')),\n                                            },\n                                        })}\n                                        validationStatus={getErrorValidationClass('passwordRepeat')}\n                                    />\n                                }\n                                error={errors.passwordRepeat}\n                            />\n\n                            <LineBreak />\n\n                            <LabelAndInputGroup label={t(Translation.Step.Confirmation.Inputs.Address)} component={<TextBox {...register('address.address')} />} />\n                            <LabelAndInputGroup label={t(Translation.Step.Confirmation.Inputs.City)} component={<TextBox {...register('address.city')} />} />\n                            <LabelAndInputGroup label={t(Translation.Step.Confirmation.Inputs.PostCode)} component={<TextBox {...register('address.zip')} />} />\n                            <LabelAndInputGroup\n                                label={t(Translation.Step.Confirmation.Inputs.Country)}\n                                component={\n                                    <Controller\n                                        control={control}\n                                        name=\"address.country\"\n                                        render={({ field }) => {\n                                            const { ref, ...rest } = field;\n                                            return <StepConfirmationCountrySelector {...rest} />;\n                                        }}\n                                    />\n                                }\n                            />\n                        </div>\n                    </div>\n                </div>\n\n                <div className=\"u-flex justify-content-start u-marg-top--heavy\">\n                    <Link to=\"/account/home\" className=\"u-marg-right\">\n                        <BEButton>{t(Translation.Misc.Cancel)}</BEButton>\n                    </Link>\n                    <BEButton disabled={saveButtonDisabled} isLoading={isLoadingMember} primary filled htmlType=\"submit\">\n                        {t(Translation.Misc.SaveAllChanges)}\n                    </BEButton>\n                </div>\n            </form>\n        </>\n    );\n};\n"]}
+{"version":3,"file":"AccountDetailsProfilePage.js","sourceRoot":"/","sources":["src/pages/account/Details/AccountDetailsProfilePage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { NotificationContext, RoomstayMemberContext } from '@frontend/contexts';\nimport type { IRoomstayMember } from '@roomstay/core';\nimport React, { useContext, useEffect } from 'react';\nimport { Controller, FieldError, useForm } from 'react-hook-form';\nimport { useTranslation } from 'react-i18next';\nimport { Link } from 'react-router-dom';\nimport { Translation } from 'translations/Translation';\n\nimport BEButton from '@/components/generic/BEButton';\nimport EnhancedPhoneNumberField from '@/components/generic/custom/EnhancedPhoneNumberField/EnhancedPhoneNumberField';\nimport Headline from '@/components/generic/Headline';\nimport { IconType } from '@/components/generic/Icon/Icon';\nimport LineBreak from '@/components/generic/LineBreak';\nimport Text, { TextType } from '@/components/generic/Text';\nimport TextBox from '@/components/generic/TextBox';\nimport StepConfirmationCountrySelector from '@/components/steps/confirmation/StepConfirmationCountrySelector';\nimport { Color } from '@/util/Color';\nimport { makePhonePatternRule, makeRequiredRule } from '@/util/Validation';\n\nimport { AccountRoutes } from '../AccountRoutes';\n\ntype LabelAndInputGroupProps = {\n    component: React.ReactNode;\n    label: string;\n    hint?: string;\n    error?: FieldError;\n};\n\nconst LabelAndInputGroup = (props: LabelAndInputGroupProps) => {\n    const { label, component, hint, error } = props;\n    return (\n        <div className=\"row u-marg-bottom--heavy\">\n            <div className=\"col-md-4\">\n                <Text type={TextType.Small} bold>\n                    {label}\n                </Text>\n            </div>\n            <div className=\"col-md-8\">\n                {component}\n                {!!error && (\n                    <p className=\"text-small\" style={{ color: '#ED4362' }}>\n                        {error.message}\n                    </p>\n                )}\n\n                {!!hint && (\n                    <Text type={TextType.Label} color={Color.Grey}>\n                        {hint}\n                    </Text>\n                )}\n            </div>\n        </div>\n    );\n};\n\ntype FormValues = IRoomstayMember;\n\nexport const AccountDetailsProfilePage = () => {\n    const { roomstayMember, loading: isLoadingMember, updateMemberDetails } = useContext(RoomstayMemberContext);\n    const notifications = useContext(NotificationContext);\n\n    const { t } = useTranslation();\n\n    const {\n        register,\n        formState: { errors, isDirty },\n        handleSubmit,\n        reset: resetFormValues,\n        control,\n    } = useForm<FormValues>({\n        mode: 'onChange',\n    });\n\n    const getErrorValidationClass = (name: keyof FormValues): 'error' | undefined => (errors[name] ? 'error' : undefined);\n\n    useEffect(() => {\n        if (roomstayMember) {\n            resetFormValues(roomstayMember);\n        }\n    }, [roomstayMember]);\n\n    const onSaveDetails = (values: FormValues) => {\n        updateMemberDetails?.(values).then(() => {\n            notifications.addNotification({\n                icon: IconType.Check,\n                children: <Text>{t(Translation.UserPortal.ProfileScreen.DetailsSavedSuccessfully)}</Text>,\n            });\n        });\n    };\n\n    const saveButtonDisabled = !isDirty || isLoadingMember || !!Object.keys(errors).length;\n\n    return (\n        <>\n            <div className=\"u-marg-top--heavy@m u-marg-top@- u-marg-bottom--heavy\">\n                <Link to={AccountRoutes.Home.path}>\n                    <BEButton isText icon={IconType.ArrowLeft} size=\"small\">\n                        {t(Translation.Reservation.BackToYourAccount)}\n                    </BEButton>\n                </Link>\n            </div>\n            <div className=\"u-marg-bottom--heavy@m\">\n                <Headline size=\"extra-large\" bold>\n                    {t(Translation.Navigation.Menu.ProfileInformation)}\n                </Headline>\n            </div>\n            <form onSubmit={handleSubmit(onSaveDetails)}>\n                <div className=\"row\">\n                    <div className=\"col-md-8\">\n                        <div>\n                            <LabelAndInputGroup\n                                label={t(Translation.Step.Confirmation.Inputs.Forename)}\n                                component={\n                                    <TextBox\n                                        validationStatus={getErrorValidationClass('forename')}\n                                        {...register('forename', {\n                                            required: makeRequiredRule(t)(true, t(Translation.Step.Confirmation.Inputs.Forename)),\n                                        })}\n                                    />\n                                }\n                                error={errors.forename}\n                            />\n                            <LabelAndInputGroup\n                                label={t(Translation.Step.Confirmation.Inputs.Surname)}\n                                component={\n                                    <TextBox\n                                        validationStatus={getErrorValidationClass('surname')}\n                                        {...register('surname', {\n                                            required: makeRequiredRule(t)(true, t(Translation.Step.Confirmation.Inputs.Surname)),\n                                        })}\n                                    />\n                                }\n                                error={errors.surname}\n                            />\n                            <LabelAndInputGroup\n                                label={t(Translation.Step.Confirmation.Inputs.Email)}\n                                component={<TextBox validationStatus={getErrorValidationClass('email')} inputProps={{ disabled: true }} value={roomstayMember?.email} />}\n                                error={errors.email}\n                            />\n                            <LabelAndInputGroup\n                                label={t(Translation.Step.Confirmation.Inputs.Phone)}\n                                component={\n                                    <Controller\n                                        rules={{\n                                            pattern: makePhonePatternRule(t),\n                                        }}\n                                        control={control}\n                                        name=\"phoneNumber\"\n                                        render={({ field }) => {\n                                            return (\n                                                <EnhancedPhoneNumberField\n                                                    {...field}\n                                                    onChange={(e: any) => {\n                                                        field.onChange(e);\n                                                    }}\n                                                    validationStatus={getErrorValidationClass('phoneNumber')}\n                                                />\n                                            );\n                                        }}\n                                    />\n                                }\n                                error={errors.phoneNumber}\n                            />\n\n                            <LineBreak />\n\n                            <LabelAndInputGroup label={t(Translation.Step.Confirmation.Inputs.Address)} component={<TextBox {...register('address.address')} />} />\n                            <LabelAndInputGroup label={t(Translation.Step.Confirmation.Inputs.City)} component={<TextBox {...register('address.city')} />} />\n                            <LabelAndInputGroup label={t(Translation.Step.Confirmation.Inputs.PostCode)} component={<TextBox {...register('address.zip')} />} />\n                            <LabelAndInputGroup\n                                label={t(Translation.Step.Confirmation.Inputs.Country)}\n                                component={\n                                    <Controller\n                                        control={control}\n                                        name=\"address.country\"\n                                        render={({ field }) => {\n                                            const { ref, ...rest } = field;\n                                            return <StepConfirmationCountrySelector {...rest} />;\n                                        }}\n                                    />\n                                }\n                            />\n                        </div>\n                    </div>\n                </div>\n                <div className=\"row\">\n                    <div className=\"col-md-8\">\n                        <div className=\"u-flex u-marg-top--heavy\">\n                            <div className=\"u-flex\">\n                                <Link to=\"/account/home\" className=\"u-marg-right\">\n                                    <BEButton>{t(Translation.Misc.Cancel)}</BEButton>\n                                </Link>\n                                <BEButton disabled={saveButtonDisabled} isLoading={isLoadingMember} primary filled htmlType=\"submit\" className=\"u-marg-right\">\n                                    {t(Translation.Misc.SaveAllChanges)}\n                                </BEButton>\n                            </div>\n                            <div className=\"u-flex-grow\">\n                                <Link to={AccountRoutes.ChangePassword.path}>\n                                    <BEButton>{t(Translation.Navigation.Menu.ChangePassword)}</BEButton>\n                                </Link>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </form>\n        </>\n    );\n};\n"]}

package/dist/src/pages/steps/StepDate/StepDateComponent.js

@@ -43,6 +43,7 @@ const StepOneDateRangePicker_1 = __importDefault(require("../../../components/st
 const StepOneDateRangePickerLegend_1 = __importDefault(require("../../../components/steps/date/StepOneDateRangePickerLegend"));
 const StepOneNextStepButton_1 = __importDefault(require("../../../components/steps/date/StepOneNextStepButton"));
 const StepOneStatusPeople_1 = __importDefault(require("../../../components/steps/date/StepOneStatusPeople"));
+const BasketRow_1 = __importDefault(require("../../../models/BasketRow"));
 const Color_1 = require("../../../util/Color");
 const ScreenSize_1 = __importDefault(require("../../../util/ScreenSize"));
 const BEMobileSummary = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('../../../components/summary/BEMobileSummary'))));
@@ -54,6 +55,7 @@ const StepDate = () => {
     const { hotel } = (0, hooks_1.useCurrentHotel)();
     const { t } = (0, react_i18next_1.useTranslation)();
     const peopleRef = (0, react_1.useRef)(null);
+    const { selectedBasketRow, addBasketRow } = basketContext;
     (0, react_1.useEffect)(() => {
         if (context.screenSize <= ScreenSize_1.default.Medium && basketContext.endDate) {
             if (peopleRef) {
@@ -69,6 +71,11 @@ const StepDate = () => {
         const event = new events_1.StepDateViewEvent();
         raise(event);
     }, []);
+    (0, react_1.useEffect)(() => {
+        if (!selectedBasketRow) {
+            addBasketRow(new BasketRow_1.default());
+        }
+    }, [selectedBasketRow]);
     return (react_1.default.createElement("div", { className: "container" },
         context.screenSize <= ScreenSize_1.default.Medium && react_1.default.createElement(BEMobileSummary, null),
         context.screenSize >= ScreenSize_1.default.Large && (react_1.default.createElement(react_1.default.Fragment, null,

package/dist/src/pages/steps/StepDate/StepDateComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepDateComponent.js","sourceRoot":"/","sources":["src/pages/steps/StepDate/StepDateComponent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iDAAyF;AACzF,6CAAqD;AACrD,2CAA4D;AAC5D,0EAAuE;AACvE,+CAA6E;AAC7E,iDAA+C;AAC/C,0DAAuD;AAEvD,6EAAqD;AACrD,+EAAuD;AACvD,qEAA6C;AAC7C,wFAAgE;AAChE,wGAAgF;AAChF,gGAAwE;AACxE,4GAAoF;AACpF,wHAAgG;AAChG,0GAAkF;AAClF,sGAA8E;AAC9E,wCAAqC;AACrC,mEAA2C;AAC3C,MAAM,eAAe,GAAG,IAAA,YAAI,EAAC,GAAG,EAAE,mDAAQ,sCAAsC,GAAC,CAAC,CAAC;AAEnF,MAAM,QAAQ,GAAG,GAAG,EAAE;IAClB,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,+BAAoB,CAAC,CAAC;IACjD,MAAM,aAAa,GAAG,IAAA,kBAAU,EAAC,wBAAa,CAAC,CAAC;IAChD,MAAM,GAAG,GAAG,IAAA,kBAAU,EAAC,yBAAc,CAAC,CAAC;IACvC,MAAM,EAAE,UAAU,EAAE,GAAG,IAAA,kBAAU,EAAC,6CAAqB,CAAC,CAAC;IAEzD,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,uBAAe,GAAE,CAAC;IAEpC,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAC/B,MAAM,SAAS,GAAG,IAAA,cAAM,EAAwB,IAAI,CAAC,CAAC;IAEtD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAI,OAAO,CAAC,UAAU,IAAI,oBAAU,CAAC,MAAM,IAAI,aAAa,CAAC,OAAO,EAAE;YAClE,IAAI,SAAS,EAAE;gBACX,UAAU,CAAC,GAAG,EAAE;;oBACZ,MAAA,MAAA,SAAS,CAAC,OAAO,0CAAE,cAAc,mDAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC;gBACpG,CAAC,EAAE,EAAE,CAAC,CAAC;aACV;SACJ;IACL,CAAC,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC;IAE5B,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,gBAAQ,GAAE,CAAC;IAE7B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,MAAM,KAAK,GAAG,IAAI,0BAAiB,EAAE,CAAC;QACtC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACH,uCAAK,SAAS,EAAC,WAAW;QACrB,OAAO,CAAC,UAAU,IAAI,oBAAU,CAAC,MAAM,IAAI,8BAAC,eAAe,OAAG;QAC9D,OAAO,CAAC,UAAU,IAAI,oBAAU,CAAC,KAAK,IAAI,CACvC;YACI,uCAAK,SAAS,EAAC,0BAA0B;gBACrC,uCAAK,SAAS,EAAC,mBAAmB;oBAC9B,uCAAK,SAAS,EAAC,sBAAsB;wBACjC,8BAAC,kBAAQ,IAAC,IAAI,UAAE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAY,CAC9D;oBACN,8BAAC,kBAAQ,IAAC,SAAS,EAAC,YAAY,EAAC,KAAK,EAAE,aAAK,CAAC,IAAI,IAC7C,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,CACL;oBACV,CAAC,UAAU,IAAI,CACZ,8BAAC,cAAI,IAAC,SAAS,EAAC,cAAc,EAAC,KAAK,EAAE,aAAK,CAAC,QAAQ;wBAC/C,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,EAAE,CAAC;;wBAAG,GAAG,CAAC,IAAI,CAC/B,CACV,CACC;gBACN,uCAAK,SAAS,EAAC,mBAAmB;oBAC9B,uCAAK,SAAS,EAAC,6BAA6B;wBACxC,uCAAK,SAAS,EAAC,UAAU;4BACrB,uCAAK,SAAS,EAAC,sBAAsB;gCACjC,8BAAC,kBAAQ,IAAC,IAAI,UAAE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAY,CACjE;4BACN,uCAAK,SAAS,EAAC,iBAAiB;gCAC5B,8BAAC,0BAAgB,OAAG;gCACpB,8BAAC,6BAAmB,OAAG,CACrB,CACJ;wBACN,uCAAK,SAAS,EAAC,UAAU;4BACrB,8BAAC,8BAAoB,IAAC,QAAQ,EAAE,KAAK,GAAI,CACvC,CACJ,CACJ,CACJ;YACN,8BAAC,mBAAS,OAAG,CACd,CACN;QAED,uCAAK,SAAS,EAAC,6EAA6E;YACxF,uCAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAC,mBAAmB;gBAC9C,8BAAC,sBAAY,OAAG,CACd;YACN,uCAAK,SAAS,EAAC,mBAAmB;gBAC9B,uCAAK,SAAS,EAAC,oEAAoE;oBAC/E,8BAAC,gBAAQ,IAAC,QAAQ,EAAC,aAAa;wBAC5B,8BAAC,gCAAsB,OAAG,CACnB,CACT;gBACL,OAAO,CAAC,UAAU,IAAI,oBAAU,CAAC,KAAK,CAAC,CAAC,CAAC,8BAAC,sCAA4B,OAAG,CAAC,CAAC,CAAC,8BAAC,mBAAS,OAAG,CACxF,CACJ;QACN,uCAAK,SAAS,EAAC,4BAA4B;YACvC,8BAAC,+BAAqB,OAAG,CACvB,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AACF,kBAAe,QAAQ,CAAC","sourcesContent":["import { BasketContext, BookingEngineContext, CompanyContext } from '@frontend/contexts';\nimport { StepDateViewEvent } from '@frontend/events';\nimport { useCurrentHotel, useEvent } from '@frontend/hooks';\nimport { HotelOverridesContext } from 'contexts/HotelOverridesContext';\nimport React, { lazy, Suspense, useContext, useEffect, useRef } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\n\nimport Headline from '@/components/generic/Headline';\nimport LineBreak from '@/components/generic/LineBreak';\nimport Text from '@/components/generic/Text';\nimport PeoplePicker from '@/components/steps/date/PeoplePicker';\nimport StepDatePricePerRoom from '@/components/steps/date/StepDatePricePerRoom';\nimport StepOneDateRange from '@/components/steps/date/StepOneDateRange';\nimport StepOneDateRangePicker from '@/components/steps/date/StepOneDateRangePicker';\nimport StepOneDateRangePickerLegend from '@/components/steps/date/StepOneDateRangePickerLegend';\nimport StepOneNextStepButton from '@/components/steps/date/StepOneNextStepButton';\nimport StepOneStatusPeople from '@/components/steps/date/StepOneStatusPeople';\nimport { Color } from '@/util/Color';\nimport ScreenSize from '@/util/ScreenSize';\nconst BEMobileSummary = lazy(() => import('@/components/summary/BEMobileSummary'));\n\nconst StepDate = () => {\n    const context = useContext(BookingEngineContext);\n    const basketContext = useContext(BasketContext);\n    const ccx = useContext(CompanyContext);\n    const { hideByLine } = useContext(HotelOverridesContext);\n\n    const { hotel } = useCurrentHotel();\n\n    const { t } = useTranslation();\n    const peopleRef = useRef<HTMLDivElement | null>(null);\n\n    useEffect(() => {\n        if (context.screenSize <= ScreenSize.Medium && basketContext.endDate) {\n            if (peopleRef) {\n                setTimeout(() => {\n                    peopleRef.current?.scrollIntoView?.({ behavior: 'smooth', block: 'center', inline: 'nearest' });\n                }, 50);\n            }\n        }\n    }, [basketContext.endDate]);\n\n    const { raise } = useEvent();\n\n    useEffect(() => {\n        const event = new StepDateViewEvent();\n        raise(event);\n    }, []);\n\n    return (\n        <div className=\"container\">\n            {context.screenSize <= ScreenSize.Medium && <BEMobileSummary />}\n            {context.screenSize >= ScreenSize.Large && (\n                <>\n                    <div className=\"row step-date-hotel-info\">\n                        <div className=\"col-md-4 col-lg-3\">\n                            <div className=\"u-marg-bottom--heavy\">\n                                <Headline bold>{t(Translation.Step.Date.Reservation)}</Headline>\n                            </div>\n                            <Headline className=\"hotel-name\" color={Color.Navy}>\n                                {hotel?.name}\n                            </Headline>\n                            {!hideByLine && (\n                                <Text className=\"company-name\" color={Color.DarkGrey}>\n                                    {t(Translation.Misc.By)} {ccx.name}\n                                </Text>\n                            )}\n                        </div>\n                        <div className=\"col-md-8 col-lg-9\">\n                            <div className=\"row justify-content-between\">\n                                <div className=\"col-md-6\">\n                                    <div className=\"u-marg-bottom--heavy\">\n                                        <Headline bold>{t(Translation.Step.Date.SelectYourDate)}</Headline>\n                                    </div>\n                                    <div className=\"step-one-status\">\n                                        <StepOneDateRange />\n                                        <StepOneStatusPeople />\n                                    </div>\n                                </div>\n                                <div className=\"col-md-4\">\n                                    <StepDatePricePerRoom isMobile={false} />\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <LineBreak />\n                </>\n            )}\n\n            <div className=\"row flex-column-reverse flex-md-row align-items-center align-items-md-start\">\n                <div ref={peopleRef} className=\"col-md-4 col-xl-3\">\n                    <PeoplePicker />\n                </div>\n                <div className=\"col-md-8 col-xl-9\">\n                    <div className=\"w-100 u-flex justify-content-center flex-column align-items-center\">\n                        <Suspense fallback=\"loading....\">\n                            <StepOneDateRangePicker />\n                        </Suspense>\n                    </div>\n                    {context.screenSize >= ScreenSize.Large ? <StepOneDateRangePickerLegend /> : <LineBreak />}\n                </div>\n            </div>\n            <div className=\"u-flex justify-content-end\">\n                <StepOneNextStepButton />\n            </div>\n        </div>\n    );\n};\nexport default StepDate;\n"]}
+{"version":3,"file":"StepDateComponent.js","sourceRoot":"/","sources":["src/pages/steps/StepDate/StepDateComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import { BasketContext, BookingEngineContext, CompanyContext } from '@frontend/contexts';\nimport { StepDateViewEvent } from '@frontend/events';\nimport { useCurrentHotel, useEvent } from '@frontend/hooks';\nimport { HotelOverridesContext } from 'contexts/HotelOverridesContext';\nimport React, { lazy, Suspense, useContext, useEffect, useRef } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\n\nimport Headline from '@/components/generic/Headline';\nimport LineBreak from '@/components/generic/LineBreak';\nimport Text from '@/components/generic/Text';\nimport PeoplePicker from '@/components/steps/date/PeoplePicker';\nimport StepDatePricePerRoom from '@/components/steps/date/StepDatePricePerRoom';\nimport StepOneDateRange from '@/components/steps/date/StepOneDateRange';\nimport StepOneDateRangePicker from '@/components/steps/date/StepOneDateRangePicker';\nimport StepOneDateRangePickerLegend from '@/components/steps/date/StepOneDateRangePickerLegend';\nimport StepOneNextStepButton from '@/components/steps/date/StepOneNextStepButton';\nimport StepOneStatusPeople from '@/components/steps/date/StepOneStatusPeople';\nimport BasketRow from '@/models/BasketRow';\nimport { Color } from '@/util/Color';\nimport ScreenSize from '@/util/ScreenSize';\nconst BEMobileSummary = lazy(() => import('@/components/summary/BEMobileSummary'));\n\nconst StepDate = () => {\n    const context = useContext(BookingEngineContext);\n    const basketContext = useContext(BasketContext);\n    const ccx = useContext(CompanyContext);\n    const { hideByLine } = useContext(HotelOverridesContext);\n    const { hotel } = useCurrentHotel();\n    const { t } = useTranslation();\n\n    const peopleRef = useRef<HTMLDivElement | null>(null);\n    const { selectedBasketRow, addBasketRow } = basketContext;\n\n    useEffect(() => {\n        if (context.screenSize <= ScreenSize.Medium && basketContext.endDate) {\n            if (peopleRef) {\n                setTimeout(() => {\n                    peopleRef.current?.scrollIntoView?.({ behavior: 'smooth', block: 'center', inline: 'nearest' });\n                }, 50);\n            }\n        }\n    }, [basketContext.endDate]);\n\n    const { raise } = useEvent();\n\n    useEffect(() => {\n        const event = new StepDateViewEvent();\n        raise(event);\n    }, []);\n\n    useEffect(() => {\n        if (!selectedBasketRow) {\n            addBasketRow(new BasketRow());\n        }\n    }, [selectedBasketRow]);\n\n    return (\n        <div className=\"container\">\n            {context.screenSize <= ScreenSize.Medium && <BEMobileSummary />}\n            {context.screenSize >= ScreenSize.Large && (\n                <>\n                    <div className=\"row step-date-hotel-info\">\n                        <div className=\"col-md-4 col-lg-3\">\n                            <div className=\"u-marg-bottom--heavy\">\n                                <Headline bold>{t(Translation.Step.Date.Reservation)}</Headline>\n                            </div>\n                            <Headline className=\"hotel-name\" color={Color.Navy}>\n                                {hotel?.name}\n                            </Headline>\n                            {!hideByLine && (\n                                <Text className=\"company-name\" color={Color.DarkGrey}>\n                                    {t(Translation.Misc.By)} {ccx.name}\n                                </Text>\n                            )}\n                        </div>\n                        <div className=\"col-md-8 col-lg-9\">\n                            <div className=\"row justify-content-between\">\n                                <div className=\"col-md-6\">\n                                    <div className=\"u-marg-bottom--heavy\">\n                                        <Headline bold>{t(Translation.Step.Date.SelectYourDate)}</Headline>\n                                    </div>\n                                    <div className=\"step-one-status\">\n                                        <StepOneDateRange />\n                                        <StepOneStatusPeople />\n                                    </div>\n                                </div>\n                                <div className=\"col-md-4\">\n                                    <StepDatePricePerRoom isMobile={false} />\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <LineBreak />\n                </>\n            )}\n\n            <div className=\"row flex-column-reverse flex-md-row align-items-center align-items-md-start\">\n                <div ref={peopleRef} className=\"col-md-4 col-xl-3\">\n                    <PeoplePicker />\n                </div>\n                <div className=\"col-md-8 col-xl-9\">\n                    <div className=\"w-100 u-flex justify-content-center flex-column align-items-center\">\n                        <Suspense fallback=\"loading....\">\n                            <StepOneDateRangePicker />\n                        </Suspense>\n                    </div>\n                    {context.screenSize >= ScreenSize.Large ? <StepOneDateRangePickerLegend /> : <LineBreak />}\n                </div>\n            </div>\n            <div className=\"u-flex justify-content-end\">\n                <StepOneNextStepButton />\n            </div>\n        </div>\n    );\n};\nexport default StepDate;\n"]}

package/dist/src/pages/steps/StepThanks/StepThanksComponent.js

@@ -70,7 +70,7 @@ function StepThanksComponent() {
                     priceCurrency: ccx.currentCurrency,
                 };
             });
-            const event = new events_1.StepThanksViewEvent(reservations, basketContext.currentBasketRows);
+            const event = new events_1.StepThanksViewEvent(reservations, basketContext.currentBasketRows, hotel);
             raise(event);
             return (0, TotalCalculator_1.calculateTotalForReservation)(checkoutData, !isFromRoomstay);
         }

package/dist/src/pages/steps/StepThanks/StepThanksComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepThanksComponent.js","sourceRoot":"/","sources":["src/pages/steps/StepThanks/StepThanksComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import { BasketContext, CompanyContext } from '@frontend/contexts';\nimport { useCurrentHotel, useEvent } from '@frontend/hooks';\nimport dayjs from 'dayjs';\nimport React, { useCallback, useContext, useEffect } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Link } from 'react-router-dom';\nimport { Translation } from 'translations/Translation';\n\nimport BEButton from '@/components/generic/BEButton';\nimport Currency from '@/components/generic/Currency';\nimport Headline from '@/components/generic/Headline';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport LineBreak from '@/components/generic/LineBreak';\nimport Text, { TextType } from '@/components/generic/Text';\nimport { CommonAddonSummary } from '@/components/steps/common/CommonAddonSummary/CommonAddonSummary';\nimport { StepThanksViewEvent } from '@/events';\nimport { IEventReservation } from '@/models/Api/IEventReservation';\nimport { ReservationAddonDTO, ReservationDTO } from '@/models/Api/ReservationsDTO';\nimport ReservationRow from '@/pages/findReservation/ReservationRow';\nimport { Color } from '@/util/Color';\nimport { TextAlign } from '@/util/TextAlignment';\nimport { calculateTotalForReservation } from '@/util/TotalCalculator';\n\nexport default function StepThanksComponent() {\n    const basketContext = useContext(BasketContext);\n\n    const { hotel } = useCurrentHotel();\n    const ccx = useContext(CompanyContext);\n    const { raise } = useEvent();\n\n    const checkoutData = basketContext.reservationData;\n\n    const isFromRoomstay = checkoutData?.itineraryNumber?.startsWith('RS');\n\n    const { t } = useTranslation();\n\n    const total = useCallback(() => {\n        if (checkoutData?.reservations) {\n            const reservations: IEventReservation[] = checkoutData?.reservations?.map((obj: ReservationDTO) => {\n                const nightKeys = Object.keys(obj.nights);\n                const dateFormat = 'YYYY-MM-DDTHH:mm:ss';\n\n                return {\n                    reservationId: obj.reservationNumber,\n                    checkInTime: dayjs(nightKeys[0]).format(dateFormat),\n                    checkOutTime: dayjs(nightKeys[nightKeys.length - 1])\n                        .add(1, 'day')\n                        .format(dateFormat),\n                    totalPrice: obj.total.afterTax,\n                    priceCurrency: ccx.currentCurrency,\n                };\n            });\n            const event = new StepThanksViewEvent(reservations, basketContext.currentBasketRows);\n            raise(event);\n\n            return calculateTotalForReservation(checkoutData, !isFromRoomstay);\n        }\n\n        return 0;\n    }, [checkoutData]);\n\n    const addons: ReservationAddonDTO[] = [];\n    const comments: string[] = [];\n\n    useEffect(() => {\n        return () => {\n            basketContext.finish();\n        };\n    }, []);\n\n    return (\n        <div className=\"container u-marg-top--heavy\">\n            <div className=\"row justify-content-center\">\n                <div className=\"col-lg-8 col-md-12 u-flex align-items-center u-flex-direction-column\">\n                    <div className=\"u-marg-bottom\">\n                        <Icon icon={IconType.Check} size=\"48px\" color={Color.White} backgroundColor={Color.Accent} borderRadius=\"round\" noPadding />\n                    </div>\n                    <div className=\"u-marg-bottom\" style={{ maxWidth: '530px' }}>\n                        <Headline size=\"large\" align={TextAlign.Center}>\n                            {t(Translation.Step.Thanks.ThankYouHeadline, { hotel: hotel?.name })}\n                        </Headline>\n                    </div>\n                    <div className=\"u-marg-bottom--heavy\">\n                        <Text color={Color.DarkGrey}>\n                            {t(Translation.Step.Thanks.InvoiceNumber)} {checkoutData.itineraryNumber}\n                        </Text>\n                    </div>\n                    <div className=\"u-marg-bottom--massive\">\n                        <Link to=\"/\">\n                            <BEButton>{t(Translation.Step.Thanks.GoBackHome)}</BEButton>\n                        </Link>\n                    </div>\n                    <>\n                        <div className=\"u-marg-top w-100\">\n                            {checkoutData?.reservations?.map((obj: ReservationDTO) => {\n                                if (obj.addons) {\n                                    const nights = Object.keys(obj.nights);\n                                    obj.addons.forEach((addon) => {\n                                        if (isFromRoomstay) {\n                                            addons.push({ ...addon, nights: nights.length });\n                                        } else {\n                                            addons.push(addon);\n                                        }\n                                    });\n                                }\n\n                                if (obj.comments) {\n                                    obj.comments.map((comment: string) => {\n                                        comments.push(comment);\n                                    });\n                                }\n\n                                return <ReservationRow reservation={obj} key={obj.reservationNumber} />;\n                            })}\n                        </div>\n                        <LineBreak />\n\n                        <div className=\"w-100\">\n                            <CommonAddonSummary addons={addons} />\n                            {comments.length >= 1 && (\n                                <div className=\"u-marg-bottom--heavy\">\n                                    <div className=\"u-marg-bottom\">\n                                        <Text type={TextType.Label} color={Color.Grey}>\n                                            {t(Translation.Step.Confirmation.Comments)}\n                                        </Text>\n                                    </div>\n                                    {comments.map((comment, index) => (\n                                        <Text\n                                            style={{\n                                                whiteSpace: 'pre',\n                                            }}\n                                            key={index}\n                                            type={TextType.Small}\n                                        >\n                                            {comment}\n                                        </Text>\n                                    ))}\n                                </div>\n                            )}\n                            <Text type={TextType.Small} align={TextAlign.Right}>\n                                {t(Translation.Misc.Total)}\n                            </Text>\n                            <Headline bold size=\"large\" align={TextAlign.Right}>\n                                <Currency>{total}</Currency>\n                            </Headline>\n                            <Text type={TextType.Small} align={TextAlign.Right} color={Color.DarkGrey}>\n                                {t(Translation.Step.Thanks.IncludingTaxes)}\n                            </Text>\n                        </div>\n                    </>\n                </div>\n            </div>\n            {checkoutData?.reservations?.map((obj: ReservationDTO, index) => {\n                const nightKeys = Object.keys(obj.nights);\n\n                const firstNight = dayjs(nightKeys[0]);\n                const lastNight = dayjs(nightKeys[nightKeys.length - 1]).add(1, 'day');\n\n                return (\n                    <script key={index} type=\"application/ld+json\">\n                        {JSON.stringify({\n                            '@context': 'http://schema.org',\n                            '@type': 'LodgingReservation',\n                            reservationId: obj.reservationNumber,\n                            reservationStatus: 'http://schema.org/ReservationConfirmed',\n                            checkinTime: firstNight.format('YYYY-MM-DDTHH:mm:ss'),\n                            checkoutTime: lastNight.format('YYYY-MM-DDTHH:mm:ss'),\n                            totalPrice: obj.total.afterTax,\n                            basePrice: obj.total.beforeTax,\n                            priceCurrency: ccx.currentCurrency,\n                        })}\n                    </script>\n                );\n            })}\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"StepThanksComponent.js","sourceRoot":"/","sources":["src/pages/steps/StepThanks/StepThanksComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import { BasketContext, CompanyContext } from '@frontend/contexts';\nimport { useCurrentHotel, useEvent } from '@frontend/hooks';\nimport dayjs from 'dayjs';\nimport React, { useCallback, useContext, useEffect } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Link } from 'react-router-dom';\nimport { Translation } from 'translations/Translation';\n\nimport BEButton from '@/components/generic/BEButton';\nimport Currency from '@/components/generic/Currency';\nimport Headline from '@/components/generic/Headline';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport LineBreak from '@/components/generic/LineBreak';\nimport Text, { TextType } from '@/components/generic/Text';\nimport { CommonAddonSummary } from '@/components/steps/common/CommonAddonSummary/CommonAddonSummary';\nimport { StepThanksViewEvent } from '@/events';\nimport { IEventReservation } from '@/models/Api/IEventReservation';\nimport { ReservationAddonDTO, ReservationDTO } from '@/models/Api/ReservationsDTO';\nimport ReservationRow from '@/pages/findReservation/ReservationRow';\nimport { Color } from '@/util/Color';\nimport { TextAlign } from '@/util/TextAlignment';\nimport { calculateTotalForReservation } from '@/util/TotalCalculator';\n\nexport default function StepThanksComponent() {\n    const basketContext = useContext(BasketContext);\n\n    const { hotel } = useCurrentHotel();\n    const ccx = useContext(CompanyContext);\n    const { raise } = useEvent();\n\n    const checkoutData = basketContext.reservationData;\n\n    const isFromRoomstay = checkoutData?.itineraryNumber?.startsWith('RS');\n\n    const { t } = useTranslation();\n\n    const total = useCallback(() => {\n        if (checkoutData?.reservations) {\n            const reservations: IEventReservation[] = checkoutData?.reservations?.map((obj: ReservationDTO) => {\n                const nightKeys = Object.keys(obj.nights);\n                const dateFormat = 'YYYY-MM-DDTHH:mm:ss';\n\n                return {\n                    reservationId: obj.reservationNumber,\n                    checkInTime: dayjs(nightKeys[0]).format(dateFormat),\n                    checkOutTime: dayjs(nightKeys[nightKeys.length - 1])\n                        .add(1, 'day')\n                        .format(dateFormat),\n                    totalPrice: obj.total.afterTax,\n                    priceCurrency: ccx.currentCurrency,\n                };\n            });\n            const event = new StepThanksViewEvent(reservations, basketContext.currentBasketRows, hotel);\n            raise(event);\n\n            return calculateTotalForReservation(checkoutData, !isFromRoomstay);\n        }\n\n        return 0;\n    }, [checkoutData]);\n\n    const addons: ReservationAddonDTO[] = [];\n    const comments: string[] = [];\n\n    useEffect(() => {\n        return () => {\n            basketContext.finish();\n        };\n    }, []);\n\n    return (\n        <div className=\"container u-marg-top--heavy\">\n            <div className=\"row justify-content-center\">\n                <div className=\"col-lg-8 col-md-12 u-flex align-items-center u-flex-direction-column\">\n                    <div className=\"u-marg-bottom\">\n                        <Icon icon={IconType.Check} size=\"48px\" color={Color.White} backgroundColor={Color.Accent} borderRadius=\"round\" noPadding />\n                    </div>\n                    <div className=\"u-marg-bottom\" style={{ maxWidth: '530px' }}>\n                        <Headline size=\"large\" align={TextAlign.Center}>\n                            {t(Translation.Step.Thanks.ThankYouHeadline, { hotel: hotel?.name })}\n                        </Headline>\n                    </div>\n                    <div className=\"u-marg-bottom--heavy\">\n                        <Text color={Color.DarkGrey}>\n                            {t(Translation.Step.Thanks.InvoiceNumber)} {checkoutData.itineraryNumber}\n                        </Text>\n                    </div>\n                    <div className=\"u-marg-bottom--massive\">\n                        <Link to=\"/\">\n                            <BEButton>{t(Translation.Step.Thanks.GoBackHome)}</BEButton>\n                        </Link>\n                    </div>\n                    <>\n                        <div className=\"u-marg-top w-100\">\n                            {checkoutData?.reservations?.map((obj: ReservationDTO) => {\n                                if (obj.addons) {\n                                    const nights = Object.keys(obj.nights);\n                                    obj.addons.forEach((addon) => {\n                                        if (isFromRoomstay) {\n                                            addons.push({ ...addon, nights: nights.length });\n                                        } else {\n                                            addons.push(addon);\n                                        }\n                                    });\n                                }\n\n                                if (obj.comments) {\n                                    obj.comments.map((comment: string) => {\n                                        comments.push(comment);\n                                    });\n                                }\n\n                                return <ReservationRow reservation={obj} key={obj.reservationNumber} />;\n                            })}\n                        </div>\n                        <LineBreak />\n\n                        <div className=\"w-100\">\n                            <CommonAddonSummary addons={addons} />\n                            {comments.length >= 1 && (\n                                <div className=\"u-marg-bottom--heavy\">\n                                    <div className=\"u-marg-bottom\">\n                                        <Text type={TextType.Label} color={Color.Grey}>\n                                            {t(Translation.Step.Confirmation.Comments)}\n                                        </Text>\n                                    </div>\n                                    {comments.map((comment, index) => (\n                                        <Text\n                                            style={{\n                                                whiteSpace: 'pre',\n                                            }}\n                                            key={index}\n                                            type={TextType.Small}\n                                        >\n                                            {comment}\n                                        </Text>\n                                    ))}\n                                </div>\n                            )}\n                            <Text type={TextType.Small} align={TextAlign.Right}>\n                                {t(Translation.Misc.Total)}\n                            </Text>\n                            <Headline bold size=\"large\" align={TextAlign.Right}>\n                                <Currency>{total}</Currency>\n                            </Headline>\n                            <Text type={TextType.Small} align={TextAlign.Right} color={Color.DarkGrey}>\n                                {t(Translation.Step.Thanks.IncludingTaxes)}\n                            </Text>\n                        </div>\n                    </>\n                </div>\n            </div>\n            {checkoutData?.reservations?.map((obj: ReservationDTO, index) => {\n                const nightKeys = Object.keys(obj.nights);\n\n                const firstNight = dayjs(nightKeys[0]);\n                const lastNight = dayjs(nightKeys[nightKeys.length - 1]).add(1, 'day');\n\n                return (\n                    <script key={index} type=\"application/ld+json\">\n                        {JSON.stringify({\n                            '@context': 'http://schema.org',\n                            '@type': 'LodgingReservation',\n                            reservationId: obj.reservationNumber,\n                            reservationStatus: 'http://schema.org/ReservationConfirmed',\n                            checkinTime: firstNight.format('YYYY-MM-DDTHH:mm:ss'),\n                            checkoutTime: lastNight.format('YYYY-MM-DDTHH:mm:ss'),\n                            totalPrice: obj.total.afterTax,\n                            basePrice: obj.total.beforeTax,\n                            priceCurrency: ccx.currentCurrency,\n                        })}\n                    </script>\n                );\n            })}\n        </div>\n    );\n}\n"]}

package/dist/src/providers/FeatureProvider.d.ts

@@ -1,5 +1,5 @@
 export default class FeatureProvider {
     private static features;
-    static load(name: string | (typeof FeatureProvider.features)[keyof typeof FeatureProvider.features]): void;
+    static load(name: string | (typeof FeatureProvider.features)[keyof typeof FeatureProvider.features], options?: any): void;
     static unLoad(name: string | (typeof FeatureProvider.features)[keyof typeof FeatureProvider.features]): void;
 }