@roomstay/frontend 1.6.0 → 2.0.0-1

package/dist/src/models/SearchParameters.d.ts

@@ -1,4 +1,4 @@
-export declare type SearchParameters = {
+export type SearchParameters = {
     checkInTime: string;
     checkOutTime: string;
     numAdults: number;

package/dist/src/models/UserProfile.d.ts

@@ -1,4 +1,4 @@
-declare type UserProfile = {
+type UserProfile = {
     Title?: string;
     FirstName: string;
     MiddleName?: string;
@@ -16,5 +16,6 @@ declare type UserProfile = {
         Country: string;
     };
     MarketingOptIn: boolean;
+    ReservationId?: string;
 };
 export default UserProfile;

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

@@ -1 +1 @@
-{"version":3,"file":"UserProfile.js","sourceRoot":"/","sources":["src/models/UserProfile.ts"],"names":[],"mappings":"","sourcesContent":["type UserProfile = {\n    Title?: string;\n    FirstName: string;\n    MiddleName?: string;\n    LastName: string;\n    NameSuffix?: string;\n    Phone: string;\n    Email: string;\n    Address: {\n        Line1?: string;\n        Line2?: string;\n        Line3?: string;\n        City: string;\n        PostalCode: string;\n        State?: string;\n        Country: string;\n    };\n    MarketingOptIn: boolean;\n};\n\nexport default UserProfile;\n"]}
+{"version":3,"file":"UserProfile.js","sourceRoot":"/","sources":["src/models/UserProfile.ts"],"names":[],"mappings":"","sourcesContent":["type UserProfile = {\n    Title?: string;\n    FirstName: string;\n    MiddleName?: string;\n    LastName: string;\n    NameSuffix?: string;\n    Phone: string;\n    Email: string;\n    Address: {\n        Line1?: string;\n        Line2?: string;\n        Line3?: string;\n        City: string;\n        PostalCode: string;\n        State?: string;\n        Country: string;\n    };\n    MarketingOptIn: boolean;\n    ReservationId?: string;\n};\n\nexport default UserProfile;\n"]}

package/dist/src/pages/account/AccountHome/AccountHomePage.d.ts

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

package/dist/src/pages/account/AccountHome/AccountHomePage.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccountHomePage = void 0;
+const React = require("react");
+const ReservationItem_1 = require("components/reservation/ReservationItem");
+const Headline_1 = require("components/generic/Headline");
+const Text_1 = require("components/generic/Text");
+const IconNavCard_1 = require("components/generic/Card/IconNavCard/IconNavCard");
+const Icon_1 = require("components/generic/Icon/Icon");
+const Color_1 = require("util/Color");
+const BEButton_1 = require("components/generic/BEButton");
+const react_router_dom_1 = require("react-router-dom");
+const StepManager_1 = require("util/StepManager");
+const hooks_1 = require("@frontend/hooks");
+const react_i18next_1 = require("react-i18next");
+const Translation_1 = require("translations/Translation");
+const react_1 = require("react");
+const contexts_1 = require("@frontend/contexts");
+const ScreenSize_1 = require("util/ScreenSize");
+const AccountRoutes_1 = require("pages/account/AccountRoutes");
+const RoomstayThemeEngine_1 = require("providers/RoomstayThemeEngine");
+const AccountHomePage = () => {
+    const { fullName, upcomingBookings } = (0, hooks_1.useMember)();
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const context = (0, react_1.useContext)(contexts_1.BookingEngineContext);
+    const isMobile = context.screenSize <= ScreenSize_1.default.Large;
+    const firstStepUrl = StepManager_1.default.getFirstStep().getStepUrl();
+    const hasBookings = upcomingBookings.length > 0;
+    return (React.createElement("div", null,
+        React.createElement("div", { className: "u-marg-top--heavy@m u-marg-top@m- u-marg-bottom" },
+            React.createElement(react_router_dom_1.Link, { to: StepManager_1.default.getFirstStep().getStepUrl() },
+                React.createElement(BEButton_1.default, { isText: true, icon: Icon_1.IconType.ArrowLeft, size: 'small' }, t(Translation_1.Translation.UserPortal.HomeScreen.BackToBooking)))),
+        React.createElement("div", { className: "u-marg-bottom--heavy u-pad-top@m" },
+            React.createElement(Headline_1.default, { size: 'extra-large', className: 'u-marg-bottom' },
+                t(Translation_1.Translation.UserPortal.HomeScreen.Title),
+                " ",
+                fullName,
+                "!"),
+            hasBookings ? (React.createElement(Text_1.default, { type: Text_1.TextType.Body }, t(Translation_1.Translation.UserPortal.HomeScreen.Subtitle))) : (React.createElement(Text_1.default, { className: "u-marg-top" }, t(Translation_1.Translation.Reservation.EmptyPage.SubTitle)))),
+        React.createElement("div", { className: "u-marg-bottom--heavy" }, hasBookings ? (React.createElement(ReservationItem_1.default, { itineraryItem: upcomingBookings[0] })) : (React.createElement("div", { className: "u-marg-top--heavy u-flex u-flex-align-center u-flex-direction-column@l- u-flex-gap" },
+            React.createElement("div", null,
+                React.createElement("img", { className: "mw-100", src: RoomstayThemeEngine_1.default.getImageAssetUrl('account/account-home-empty-graphic.svg'), alt: "Account homepage image" })),
+            React.createElement("div", { className: "u-marg-top--heavy@m-" },
+                React.createElement(Headline_1.default, { size: "large" }, t(Translation_1.Translation.Reservation.EmptyPage.Message)),
+                React.createElement(Text_1.default, { color: Color_1.Color.DarkGrey, type: Text_1.TextType.Small, className: "u-marg-top--light" }, t(Translation_1.Translation.Reservation.EmptyPage.SubMessage)),
+                React.createElement("div", { className: "u-marg-top--heavy u-flex u-flex-flex-start u-flex-gap--light u-flex-direction-column@l-" },
+                    React.createElement(react_router_dom_1.Link, { to: firstStepUrl },
+                        React.createElement(BEButton_1.default, { wide: isMobile, rounded: true, filled: true, icon: Icon_1.IconType.ArrowRight, iconPosition: "right", primary: true }, t(Translation_1.Translation.Reservation.EmptyPage.SearchRooms))),
+                    React.createElement(react_router_dom_1.Link, { to: AccountRoutes_1.AccountRoutes.Reservations.path },
+                        React.createElement(BEButton_1.default, { wide: isMobile, rounded: true, icon: Icon_1.IconType.ArrowRight, iconPosition: "right" }, t(Translation_1.Translation.Reservation.EmptyPage.SeeAll)))))))),
+        React.createElement("div", { className: "row" },
+            React.createElement("div", { className: "col-md-3" },
+                React.createElement(IconNavCard_1.IconNavCard, { icon: Icon_1.IconType.Info, title: "View all bookings", description: "See all of your bookings, past, present and cancelled.", link: {
+                        text: 'See list',
+                        pathTo: AccountRoutes_1.AccountRoutes.Reservations.path,
+                        icon: 'arrow',
+                        color: Color_1.Color.Accent,
+                    } })),
+            React.createElement("div", { className: "col-md-3" },
+                React.createElement(IconNavCard_1.IconNavCard, { icon: Icon_1.IconType.Person, title: "Profile Information", description: "Edit your personal details, like address, and name", link: {
+                        text: 'Edit Info',
+                        pathTo: AccountRoutes_1.AccountRoutes.ProfileDetails.path,
+                        icon: 'arrow',
+                        color: Color_1.Color.Accent,
+                    } })),
+            React.createElement("div", { className: "col-md-3" },
+                React.createElement(IconNavCard_1.IconNavCard, { icon: Icon_1.IconType.CreditCard, title: "Payment Information", description: "Lorem ipsum dolor sit amet, consectetur adipiscing.", link: {
+                        text: 'Edit Info',
+                        pathTo: AccountRoutes_1.AccountRoutes.CardDetails.path,
+                        icon: 'arrow',
+                        color: Color_1.Color.Accent,
+                    } })),
+            React.createElement("div", { className: "col-md-3" },
+                React.createElement(IconNavCard_1.IconNavCard, { icon: Icon_1.IconType.Time, title: "Need Help?", description: "Lorem ipsum dolor sit amet, consectetur adipiscing.", link: {
+                        text: 'Edit Info',
+                        pathTo: AccountRoutes_1.AccountRoutes.Help.path,
+                        icon: 'arrow',
+                        color: Color_1.Color.Accent,
+                    } })))));
+};
+exports.AccountHomePage = AccountHomePage;
+//# sourceMappingURL=AccountHomePage.js.map

package/dist/src/pages/account/AccountHome/AccountHomePage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccountHomePage.js","sourceRoot":"/","sources":["src/pages/account/AccountHome/AccountHomePage.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport ReservationItem from 'components/reservation/ReservationItem';\nimport Headline from 'components/generic/Headline';\nimport Text, { TextType } from 'components/generic/Text';\nimport { IconNavCard } from 'components/generic/Card/IconNavCard/IconNavCard';\nimport { IconType } from 'components/generic/Icon/Icon';\nimport { Color } from 'util/Color';\nimport BEButton from 'components/generic/BEButton';\nimport { Link } from 'react-router-dom';\nimport StepManager from 'util/StepManager';\nimport { useMember } from '@frontend/hooks';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\nimport { useContext } from 'react';\nimport { BookingEngineContext } from '@frontend/contexts';\nimport ScreenSize from 'util/ScreenSize';\nimport { AccountRoutes } from 'pages/account/AccountRoutes';\nimport RoomstayThemeEngine from 'providers/RoomstayThemeEngine';\n\nexport const AccountHomePage = () => {\n    const { fullName, upcomingBookings } = useMember();\n    const { t } = useTranslation();\n\n    const context = useContext(BookingEngineContext);\n    const isMobile = context.screenSize <= ScreenSize.Large;\n\n    const firstStepUrl = StepManager.getFirstStep().getStepUrl();\n\n    const hasBookings = upcomingBookings.length > 0;\n\n    return (\n        <div>\n            <div className=\"u-marg-top--heavy@m u-marg-top@m- u-marg-bottom\">\n                <Link to={StepManager.getFirstStep().getStepUrl()}>\n                    <BEButton isText={true} icon={IconType.ArrowLeft} size={'small'}>\n                        {t(Translation.UserPortal.HomeScreen.BackToBooking)}\n                    </BEButton>\n                </Link>\n            </div>\n            <div className=\"u-marg-bottom--heavy u-pad-top@m\">\n                <Headline size={'extra-large'} className={'u-marg-bottom'}>\n                    {t(Translation.UserPortal.HomeScreen.Title)} {fullName}!\n                </Headline>\n                {hasBookings ? (\n                    <Text type={TextType.Body}>{t(Translation.UserPortal.HomeScreen.Subtitle)}</Text>\n                ) : (\n                    <Text className=\"u-marg-top\">{t(Translation.Reservation.EmptyPage.SubTitle)}</Text>\n                )}\n            </div>\n\n            <div className=\"u-marg-bottom--heavy\">\n                {hasBookings ? (\n                    <ReservationItem itineraryItem={upcomingBookings[0]} />\n                ) : (\n                    <div className=\"u-marg-top--heavy u-flex u-flex-align-center u-flex-direction-column@l- u-flex-gap\">\n                        <div>\n                            <img className=\"mw-100\" src={RoomstayThemeEngine.getImageAssetUrl('account/account-home-empty-graphic.svg')} alt=\"Account homepage image\" />\n                        </div>\n                        <div className=\"u-marg-top--heavy@m-\">\n                            <Headline size=\"large\">{t(Translation.Reservation.EmptyPage.Message)}</Headline>\n                            <Text color={Color.DarkGrey} type={TextType.Small} className=\"u-marg-top--light\">\n                                {t(Translation.Reservation.EmptyPage.SubMessage)}\n                            </Text>\n                            <div className=\"u-marg-top--heavy u-flex u-flex-flex-start u-flex-gap--light u-flex-direction-column@l-\">\n                                <Link to={firstStepUrl}>\n                                    <BEButton wide={isMobile} rounded={true} filled={true} icon={IconType.ArrowRight} iconPosition=\"right\" primary={true}>\n                                        {t(Translation.Reservation.EmptyPage.SearchRooms)}\n                                    </BEButton>\n                                </Link>\n                                <Link to={AccountRoutes.Reservations.path}>\n                                    <BEButton wide={isMobile} rounded={true} icon={IconType.ArrowRight} iconPosition=\"right\">\n                                        {t(Translation.Reservation.EmptyPage.SeeAll)}\n                                    </BEButton>\n                                </Link>\n                            </div>\n                        </div>\n                    </div>\n                )}\n            </div>\n\n            <div className=\"row\">\n                <div className=\"col-md-3\">\n                    <IconNavCard\n                        icon={IconType.Info}\n                        title=\"View all bookings\"\n                        description=\"See all of your bookings, past, present and cancelled.\"\n                        link={{\n                            text: 'See list',\n                            pathTo: AccountRoutes.Reservations.path,\n                            icon: 'arrow',\n                            color: Color.Accent,\n                        }}\n                    />\n                </div>\n                <div className=\"col-md-3\">\n                    <IconNavCard\n                        icon={IconType.Person}\n                        title=\"Profile Information\"\n                        description=\"Edit your personal details, like address, and name\"\n                        link={{\n                            text: 'Edit Info',\n                            pathTo: AccountRoutes.ProfileDetails.path,\n                            icon: 'arrow',\n                            color: Color.Accent,\n                        }}\n                    />\n                </div>\n\n                <div className=\"col-md-3\">\n                    <IconNavCard\n                        icon={IconType.CreditCard}\n                        title=\"Payment Information\"\n                        description=\"Lorem ipsum dolor sit amet, consectetur adipiscing.\"\n                        link={{\n                            text: 'Edit Info',\n                            pathTo: AccountRoutes.CardDetails.path,\n                            icon: 'arrow',\n                            color: Color.Accent,\n                        }}\n                    />\n                </div>\n\n                <div className=\"col-md-3\">\n                    <IconNavCard\n                        icon={IconType.Time}\n                        title=\"Need Help?\"\n                        description=\"Lorem ipsum dolor sit amet, consectetur adipiscing.\"\n                        link={{\n                            text: 'Edit Info',\n                            pathTo: AccountRoutes.Help.path,\n                            icon: 'arrow',\n                            color: Color.Accent,\n                        }}\n                    />\n                </div>\n            </div>\n        </div>\n    );\n};\n"]}

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+type AccountOutletProps = {
+    children: React.ReactNode | React.ReactNode[];
+};
+export declare const AccountOutlet: (props: AccountOutletProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccountOutlet = void 0;
+const React = require("react");
+const AccountOutlet = (props) => {
+    return (React.createElement("div", { style: { backgroundColor: 'white' } },
+        React.createElement("div", { className: "container u-pad-top u-pad-bottom--massive" }, props.children)));
+};
+exports.AccountOutlet = AccountOutlet;
+//# sourceMappingURL=AccountOutlet.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountOutlet.js","sourceRoot":"/","sources":["src/pages/account/AccountOutlet.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAKxB,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAE,EAAE;IACvD,OAAO,CACH,6BAAK,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,EAAE;QACpC,6BAAK,SAAS,EAAC,2CAA2C,IAAE,KAAK,CAAC,QAAQ,CAAO,CAC/E,CACT,CAAC;AACN,CAAC,CAAC;AANW,QAAA,aAAa,iBAMxB","sourcesContent":["import * as React from 'react';\n\ntype AccountOutletProps = {\n    children: React.ReactNode | React.ReactNode[];\n};\nexport const AccountOutlet = (props: AccountOutletProps) => {\n    return (\n        <div style={{ backgroundColor: 'white' }}>\n            <div className=\"container u-pad-top u-pad-bottom--massive\">{props.children}</div>\n        </div>\n    );\n};\n"]}

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

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

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccountRouter = void 0;
+const React = require("react");
+const react_router_dom_1 = require("react-router-dom");
+const AccountOutlet_1 = require("pages/account/AccountOutlet");
+const AccountHomePage_1 = require("pages/account/AccountHome/AccountHomePage");
+const AccountReservationsPage_1 = require("pages/account/Reservations/AccountReservationsPage");
+const AccountReservationSinglePage_1 = require("pages/account/Reservations/AccountReservationSinglePage");
+const AccountReservationMultiplePage_1 = require("pages/account/Reservations/AccountReservationMultiplePage");
+const AccountReservationCancelledPage_1 = require("pages/account/Reservations/AccountReservationCancelledPage");
+const AccountDetailsProfilePage_1 = require("pages/account/Details/AccountDetailsProfilePage");
+const AccountDetailsCardsPage_1 = require("pages/account/Details/AccountDetailsCardsPage");
+const AccountHelpPage_1 = require("pages/account/Help/AccountHelpPage");
+const AccountRoutes_1 = require("./AccountRoutes");
+const PrivateRoute_1 = require("../../containers/PrivateRoute");
+const AccountRouter = () => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(PrivateRoute_1.PrivateRoute, { path: "/account" },
+            React.createElement(AccountOutlet_1.AccountOutlet, null,
+                React.createElement(react_router_dom_1.Route, { path: AccountRoutes_1.AccountRoutes.Home.path, component: AccountHomePage_1.AccountHomePage }),
+                React.createElement(react_router_dom_1.Route, { path: AccountRoutes_1.AccountRoutes.Reservations.matchPath, component: AccountReservationsPage_1.AccountReservationPage, exact: true }),
+                React.createElement(react_router_dom_1.Route, { path: AccountRoutes_1.AccountRoutes.SingleReservation.matchPath, component: AccountReservationSinglePage_1.AccountReservationSinglePage }),
+                React.createElement(react_router_dom_1.Route, { path: "/account/reservation/single", component: AccountReservationSinglePage_1.AccountReservationSinglePage }),
+                React.createElement(react_router_dom_1.Route, { path: "/account/reservation/multiple-with-addons", component: AccountReservationMultiplePage_1.AccountReservationMultiplePage }),
+                React.createElement(react_router_dom_1.Route, { path: "/account/reservation/cancelled", component: AccountReservationCancelledPage_1.AccountReservationCancelledPage }),
+                React.createElement(react_router_dom_1.Route, { path: AccountRoutes_1.AccountRoutes.ProfileDetails.path, component: AccountDetailsProfilePage_1.AccountDetailsProfilePage }),
+                React.createElement(react_router_dom_1.Route, { path: AccountRoutes_1.AccountRoutes.CardDetails.path, component: AccountDetailsCardsPage_1.AccountDetailsCardsPage }),
+                React.createElement(react_router_dom_1.Route, { path: AccountRoutes_1.AccountRoutes.Help.path, component: AccountHelpPage_1.AccountHelpPage })))));
+};
+exports.AccountRouter = AccountRouter;
+//# sourceMappingURL=AccountRouter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountRouter.js","sourceRoot":"/","sources":["src/pages/account/AccountRouter.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,uDAAyC;AACzC,+DAA4D;AAC5D,+EAA4E;AAC5E,gGAA4F;AAC5F,0GAAuG;AACvG,8GAA2G;AAC3G,gHAA6G;AAC7G,+FAA4F;AAC5F,2FAAwF;AACxF,wEAAqE;AACrE,mDAAgD;AAChD,gEAA6D;AAEtD,MAAM,aAAa,GAAG,GAAG,EAAE;IAC9B,OAAO,CACH;QACI,oBAAC,2BAAY,IAAC,IAAI,EAAC,UAAU;YACzB,oBAAC,6BAAa;gBACV,oBAAC,wBAAK,IAAC,IAAI,EAAE,6BAAa,CAAC,IAAI,CAAC,IAAI,EAAE,SAAS,EAAE,iCAAe,GAAI;gBACpE,oBAAC,wBAAK,IAAC,IAAI,EAAE,6BAAa,CAAC,YAAY,CAAC,SAAS,EAAE,SAAS,EAAE,gDAAsB,EAAE,KAAK,EAAE,IAAI,GAAI;gBAErG,oBAAC,wBAAK,IAAC,IAAI,EAAE,6BAAa,CAAC,iBAAiB,CAAC,SAAS,EAAE,SAAS,EAAE,2DAA4B,GAAI;gBAEnG,oBAAC,wBAAK,IAAC,IAAI,EAAC,6BAA6B,EAAC,SAAS,EAAE,2DAA4B,GAAI;gBACrF,oBAAC,wBAAK,IAAC,IAAI,EAAC,2CAA2C,EAAC,SAAS,EAAE,+DAA8B,GAAI;gBACrG,oBAAC,wBAAK,IAAC,IAAI,EAAC,gCAAgC,EAAC,SAAS,EAAE,iEAA+B,GAAI;gBAE3F,oBAAC,wBAAK,IAAC,IAAI,EAAE,6BAAa,CAAC,cAAc,CAAC,IAAI,EAAE,SAAS,EAAE,qDAAyB,GAAI;gBACxF,oBAAC,wBAAK,IAAC,IAAI,EAAE,6BAAa,CAAC,WAAW,CAAC,IAAI,EAAE,SAAS,EAAE,iDAAuB,GAAI;gBAEnF,oBAAC,wBAAK,IAAC,IAAI,EAAE,6BAAa,CAAC,IAAI,CAAC,IAAI,EAAE,SAAS,EAAE,iCAAe,GAAI,CACxD,CACL,CAChB,CACN,CAAC;AACN,CAAC,CAAC;AAtBW,QAAA,aAAa,iBAsBxB","sourcesContent":["import * as React from 'react';\nimport { Route } from 'react-router-dom';\nimport { AccountOutlet } from 'pages/account/AccountOutlet';\nimport { AccountHomePage } from 'pages/account/AccountHome/AccountHomePage';\nimport { AccountReservationPage } from 'pages/account/Reservations/AccountReservationsPage';\nimport { AccountReservationSinglePage } from 'pages/account/Reservations/AccountReservationSinglePage';\nimport { AccountReservationMultiplePage } from 'pages/account/Reservations/AccountReservationMultiplePage';\nimport { AccountReservationCancelledPage } from 'pages/account/Reservations/AccountReservationCancelledPage';\nimport { AccountDetailsProfilePage } from 'pages/account/Details/AccountDetailsProfilePage';\nimport { AccountDetailsCardsPage } from 'pages/account/Details/AccountDetailsCardsPage';\nimport { AccountHelpPage } from 'pages/account/Help/AccountHelpPage';\nimport { AccountRoutes } from './AccountRoutes';\nimport { PrivateRoute } from '../../containers/PrivateRoute';\n\nexport const AccountRouter = () => {\n    return (\n        <>\n            <PrivateRoute path=\"/account\">\n                <AccountOutlet>\n                    <Route path={AccountRoutes.Home.path} component={AccountHomePage} />\n                    <Route path={AccountRoutes.Reservations.matchPath} component={AccountReservationPage} exact={true} />\n\n                    <Route path={AccountRoutes.SingleReservation.matchPath} component={AccountReservationSinglePage} />\n\n                    <Route path=\"/account/reservation/single\" component={AccountReservationSinglePage} />\n                    <Route path=\"/account/reservation/multiple-with-addons\" component={AccountReservationMultiplePage} />\n                    <Route path=\"/account/reservation/cancelled\" component={AccountReservationCancelledPage} />\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            </PrivateRoute>\n        </>\n    );\n};\n"]}

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

@@ -0,0 +1,22 @@
+export declare const AccountRoutes: {
+    Home: {
+        path: string;
+    };
+    Reservations: {
+        matchPath: string;
+        path: string;
+    };
+    SingleReservation: {
+        matchPath: string;
+        path: string;
+    };
+    ProfileDetails: {
+        path: string;
+    };
+    CardDetails: {
+        path: string;
+    };
+    Help: {
+        path: string;
+    };
+};

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccountRoutes = void 0;
+exports.AccountRoutes = {
+    Home: {
+        path: '/account/home',
+    },
+    Reservations: {
+        matchPath: '/account/reservations/:tabPath?',
+        path: '/account/reservations',
+    },
+    SingleReservation: {
+        matchPath: '/account/reservations/:resId/item',
+        path: '/account/reservations/',
+    },
+    ProfileDetails: {
+        path: '/account/details/profile',
+    },
+    CardDetails: {
+        path: '/account/details/cards',
+    },
+    Help: {
+        path: '/account/help',
+    },
+};
+//# sourceMappingURL=AccountRoutes.js.map

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

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

package/dist/src/pages/account/Details/AccountDetailsCardsPage.d.ts

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

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

@@ -0,0 +1,125 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccountDetailsCardsPage = void 0;
+const React = require("react");
+const react_1 = require("react");
+const react_router_dom_1 = require("react-router-dom");
+const BEButton_1 = require("components/generic/BEButton");
+const Icon_1 = require("components/generic/Icon/Icon");
+const Headline_1 = require("components/generic/Headline");
+const AccountDetailsCardsPage_module_scss_1 = require("./AccountDetailsCardsPage.module.scss");
+const CardList_1 = require("components/pages/Account/Card/CardList");
+const Text_1 = require("components/generic/Text");
+const PaymentCardInput_1 = require("components/generic/PaymentCard/PaymentCardInput");
+const contexts_1 = require("@frontend/contexts");
+const MembersServiceAPI_1 = require("api/members-service/MembersServiceAPI");
+const Fade_1 = require("animations/Fade");
+const AccountDetailsNoCardsPage_1 = require("pages/account/Details/AccountDetailsNoCardsPage");
+const LargeLoader_1 = require("components/generic/loader/LargeLoader");
+const AccountDetailsCardsPage = (ref) => {
+    var _a, _b;
+    const { roomstayMember, cards: memberCards, updateCardToMemberDetail, fetchRoomstayMember, updateMemberDetails, loading } = (0, react_1.useContext)(contexts_1.RoomstayMemberContext);
+    const emptyCard = (0, react_1.useMemo)(() => ({
+        cardId: '',
+        cardNumber: '',
+        expiry: '',
+        name: '',
+        securityCode: '',
+        type: '',
+        username: roomstayMember === null || roomstayMember === void 0 ? void 0 : roomstayMember.username,
+    }), [roomstayMember]);
+    const [selectedCard, setSelectedCard] = (0, react_1.useState)(null);
+    const [isAddingCard, setIsAddingCard] = (0, react_1.useState)(!!((_a = roomstayMember === null || roomstayMember === void 0 ? void 0 : roomstayMember.cards) === null || _a === void 0 ? void 0 : _a.length));
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if ((_a = roomstayMember === null || roomstayMember === void 0 ? void 0 : roomstayMember.cards) === null || _a === void 0 ? void 0 : _a.length) {
+            setIsAddingCard(true);
+        }
+    }, [(_b = roomstayMember === null || roomstayMember === void 0 ? void 0 : roomstayMember.cards) === null || _b === void 0 ? void 0 : _b.length]);
+    (0, react_1.useEffect)(() => {
+        // Check if selected card is not there anymore
+        let cardExists = false;
+        if (selectedCard) {
+            for (const newCard of memberCards) {
+                if (newCard.cardId === selectedCard.cardId) {
+                    cardExists = true;
+                    break;
+                }
+            }
+        }
+        // Check if user has no cards, set the selected card to be empty in that case.
+        if (memberCards.length === 0) {
+            setSelectedCard(emptyCard);
+            return;
+        }
+        if (((!selectedCard || (selectedCard === null || selectedCard === void 0 ? void 0 : selectedCard.cardId) === emptyCard.cardId) && memberCards.length > 0) || (!cardExists && (selectedCard === null || selectedCard === void 0 ? void 0 : selectedCard.cardId) !== '')) {
+            if (roomstayMember === null || roomstayMember === void 0 ? void 0 : roomstayMember.defaultCard) {
+                for (const card of memberCards) {
+                    if (card.cardId === roomstayMember.defaultCard) {
+                        setSelectedCard(memberCards[0]);
+                        return;
+                    }
+                }
+            }
+            setSelectedCard(memberCards[0]);
+        }
+    }, [roomstayMember, memberCards === null || memberCards === void 0 ? void 0 : memberCards.length]);
+    const onNewCardClicked = () => {
+        setSelectedCard(emptyCard);
+    };
+    const onCardChangedSubmit = (card) => __awaiter(void 0, void 0, void 0, function* () {
+        // TODO: Add loading
+        if (!card.cardId) {
+            (0, MembersServiceAPI_1.AddMemberCard)(card).then((newCard) => {
+                setSelectedCard(Object.assign(Object.assign({}, card), newCard));
+                updateCardToMemberDetail(newCard);
+            });
+        }
+        else
+            (0, MembersServiceAPI_1.EditMemberCard)(card).then((res) => {
+                setSelectedCard(card);
+                updateCardToMemberDetail(res);
+            });
+    });
+    const onDeleteClicked = (card) => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            yield (0, MembersServiceAPI_1.DeleteMemberCard)(card);
+            yield fetchRoomstayMember();
+        }
+        catch (ex) {
+            console.log('Failed deleting card');
+        }
+    });
+    const onMarkedAsDefault = (card) => __awaiter(void 0, void 0, void 0, function* () {
+        yield updateMemberDetails(Object.assign(Object.assign({}, roomstayMember), { defaultCard: card === null || card === void 0 ? void 0 : card.cardId }));
+        try {
+        }
+        catch (ex) { }
+    });
+    if (loading)
+        return React.createElement(LargeLoader_1.default, null);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "u-marg-top--heavy@m u-marg-top@m- u-marg-bottom--heavy" },
+            React.createElement(react_router_dom_1.Link, { to: '/account/home' },
+                React.createElement(BEButton_1.default, { isText: true, icon: Icon_1.IconType.ArrowLeft, size: 'small' }, "BACK TO YOUR ACCOUNT"))),
+        React.createElement("div", { className: "u-marg-bottom--heavy@m" },
+            React.createElement(Headline_1.default, { size: 'extra-large', bold: true }, "Payment Information")),
+        React.createElement(Fade_1.default, { open: isAddingCard },
+            React.createElement("div", { className: AccountDetailsCardsPage_module_scss_1.default['layout-grid'] },
+                React.createElement("div", { className: AccountDetailsCardsPage_module_scss_1.default['card-list'] },
+                    React.createElement(Text_1.default, { bold: true, className: "u-marg-bottom" }, "Saved Cards"),
+                    React.createElement(CardList_1.CardList, { onNewCardClicked: onNewCardClicked, value: selectedCard, onChange: (selectedCard) => setSelectedCard(selectedCard), options: memberCards })),
+                React.createElement(PaymentCardInput_1.PaymentCardInput, { card: selectedCard, onSubmit: onCardChangedSubmit, onDeleteClicked: onDeleteClicked, onMarkedAsDefaultClicked: onMarkedAsDefault }))),
+        !isAddingCard && React.createElement(AccountDetailsNoCardsPage_1.AccountDetailsNoCardsPage, { onAddNewCard: () => setIsAddingCard(true) })));
+};
+exports.AccountDetailsCardsPage = AccountDetailsCardsPage;
+//# sourceMappingURL=AccountDetailsCardsPage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountDetailsCardsPage.js","sourceRoot":"/","sources":["src/pages/account/Details/AccountDetailsCardsPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useContext, useEffect, useMemo, useState } from 'react';\nimport { Link } from 'react-router-dom';\nimport BEButton from 'components/generic/BEButton';\nimport { IconType } from 'components/generic/Icon/Icon';\nimport Headline from 'components/generic/Headline';\n\nimport styles from './AccountDetailsCardsPage.module.scss';\nimport { CardList } from 'components/pages/Account/Card/CardList';\nimport Text from 'components/generic/Text';\nimport { PaymentCardInput } from 'components/generic/PaymentCard/PaymentCardInput';\nimport { RoomstayMemberContext } from '@frontend/contexts';\nimport { AddMemberCard, DeleteMemberCard, EditMemberCard } from 'api/members-service/MembersServiceAPI';\nimport { IRoomstayMemberCards } from '@roomstay/core';\nimport FadeAnimation from 'animations/Fade';\nimport { AccountDetailsNoCardsPage } from 'pages/account/Details/AccountDetailsNoCardsPage';\nimport LargeLoader from 'components/generic/loader/LargeLoader';\n\nexport const AccountDetailsCardsPage = (ref: any) => {\n    const { roomstayMember, cards: memberCards, updateCardToMemberDetail, fetchRoomstayMember, updateMemberDetails, loading } = useContext(RoomstayMemberContext);\n    const emptyCard = useMemo(\n        () => ({\n            cardId: '',\n            cardNumber: '',\n            expiry: '',\n            name: '',\n            securityCode: '',\n            type: '',\n            username: roomstayMember?.username,\n        }),\n        [roomstayMember]\n    );\n\n    const [selectedCard, setSelectedCard] = useState<IRoomstayMemberCards>(null);\n    const [isAddingCard, setIsAddingCard] = useState<boolean>(!!roomstayMember?.cards?.length);\n\n    useEffect(() => {\n        if (roomstayMember?.cards?.length) {\n            setIsAddingCard(true);\n        }\n    }, [roomstayMember?.cards?.length]);\n\n    useEffect(() => {\n        // Check if selected card is not there anymore\n        let cardExists = false;\n        if (selectedCard) {\n            for (const newCard of memberCards) {\n                if (newCard.cardId === selectedCard.cardId) {\n                    cardExists = true;\n                    break;\n                }\n            }\n        }\n\n        // Check if user has no cards, set the selected card to be empty in that case.\n        if (memberCards.length === 0) {\n            setSelectedCard(emptyCard);\n            return;\n        }\n\n        if (((!selectedCard || selectedCard?.cardId === emptyCard.cardId) && memberCards.length > 0) || (!cardExists && selectedCard?.cardId !== '')) {\n            if (roomstayMember?.defaultCard) {\n                for (const card of memberCards) {\n                    if (card.cardId === roomstayMember.defaultCard) {\n                        setSelectedCard(memberCards[0]);\n                        return;\n                    }\n                }\n            }\n\n            setSelectedCard(memberCards[0]);\n        }\n    }, [roomstayMember, memberCards?.length]);\n\n    const onNewCardClicked = () => {\n        setSelectedCard(emptyCard);\n    };\n\n    const onCardChangedSubmit = async (card: IRoomstayMemberCards): Promise<void> => {\n        // TODO: Add loading\n        if (!card.cardId) {\n            AddMemberCard(card).then((newCard) => {\n                setSelectedCard({ ...card, ...newCard });\n                updateCardToMemberDetail(newCard);\n            });\n        } else\n            EditMemberCard(card).then((res) => {\n                setSelectedCard(card);\n                updateCardToMemberDetail(res);\n            });\n    };\n\n    const onDeleteClicked = async (card: IRoomstayMemberCards) => {\n        try {\n            await DeleteMemberCard(card);\n\n            await fetchRoomstayMember();\n        } catch (ex) {\n            console.log('Failed deleting card');\n        }\n    };\n\n    const onMarkedAsDefault = async (card: IRoomstayMemberCards) => {\n        await updateMemberDetails({ ...roomstayMember, defaultCard: card?.cardId });\n\n        try {\n        } catch (ex) {}\n    };\n\n    if (loading) return <LargeLoader />;\n\n    return (\n        <>\n            <div className=\"u-marg-top--heavy@m u-marg-top@m- u-marg-bottom--heavy\">\n                <Link to={'/account/home'}>\n                    <BEButton isText={true} icon={IconType.ArrowLeft} size={'small'}>\n                        BACK TO YOUR ACCOUNT\n                    </BEButton>\n                </Link>\n            </div>\n            <div className=\"u-marg-bottom--heavy@m\">\n                <Headline size={'extra-large'} bold={true}>\n                    Payment Information\n                </Headline>\n            </div>\n            <FadeAnimation open={isAddingCard}>\n                <div className={styles['layout-grid']}>\n                    <div className={styles['card-list']}>\n                        <Text bold className=\"u-marg-bottom\">\n                            Saved Cards\n                        </Text>\n\n                        <CardList onNewCardClicked={onNewCardClicked} value={selectedCard} onChange={(selectedCard) => setSelectedCard(selectedCard)} options={memberCards} />\n                    </div>\n                    <PaymentCardInput card={selectedCard} onSubmit={onCardChangedSubmit} onDeleteClicked={onDeleteClicked} onMarkedAsDefaultClicked={onMarkedAsDefault} />\n                </div>\n            </FadeAnimation>\n            {!isAddingCard && <AccountDetailsNoCardsPage onAddNewCard={() => setIsAddingCard(true)} />}\n        </>\n    );\n};\n"]}

package/dist/src/pages/account/Details/AccountDetailsNoCardsPage.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { BEButtonProps } from 'components/generic/BEButton';
+interface AccountDetailsNoCardsPageProps {
+    onAddNewCard?: BEButtonProps['onClick'];
+}
+export declare const AccountDetailsNoCardsPage: FC<AccountDetailsNoCardsPageProps>;
+export {};

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccountDetailsNoCardsPage = void 0;
+const React = require("react");
+const react_1 = require("react");
+const RoomstayThemeEngine_1 = require("../../../providers/RoomstayThemeEngine");
+const Headline_1 = require("components/generic/Headline");
+const Color_1 = require("util/Color");
+const Text_1 = require("components/generic/Text");
+const BEButton_1 = require("components/generic/BEButton");
+const contexts_1 = require("@frontend/contexts");
+const ScreenSize_1 = require("util/ScreenSize");
+const AccountDetailsNoCardsPage = ({ onAddNewCard }) => {
+    const context = (0, react_1.useContext)(contexts_1.BookingEngineContext);
+    const isMobile = context.screenSize <= ScreenSize_1.default.Medium;
+    return (React.createElement("div", { className: "u-align-center u-marg-top@m-" },
+        React.createElement("img", { className: "u-max-width-full", src: RoomstayThemeEngine_1.default.getImageAssetUrl('account/account-details-no-cards-graphic.svg'), alt: "" }),
+        React.createElement(Headline_1.default, { className: "u-marg-top--heavy", bold: true, size: isMobile ? 'normal' : 'large', color: Color_1.Color.Navy }, "You don't have any cards yet!"),
+        React.createElement(Text_1.default, { style: {
+                maxWidth: 660,
+            }, className: "u-marg-top u-marg-left-right--auto", color: Color_1.Color.Graphite, type: isMobile ? Text_1.TextType.Small : Text_1.TextType.Body }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),
+        React.createElement(BEButton_1.default, { className: "u-marg-top", filled: true, primary: true, rounded: true, onClick: onAddNewCard }, "Add new card")));
+};
+exports.AccountDetailsNoCardsPage = AccountDetailsNoCardsPage;
+//# sourceMappingURL=AccountDetailsNoCardsPage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountDetailsNoCardsPage.js","sourceRoot":"/","sources":["src/pages/account/Details/AccountDetailsNoCardsPage.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAAuC;AACvC,gFAAyE;AACzE,0DAAmD;AACnD,sCAAmC;AACnC,kDAAyD;AACzD,0DAAsE;AACtE,iDAA0D;AAC1D,gDAAyC;AAKlC,MAAM,yBAAyB,GAAuC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE;IAC9F,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,+BAAoB,CAAC,CAAC;IACjD,MAAM,QAAQ,GAAG,OAAO,CAAC,UAAU,IAAI,oBAAU,CAAC,MAAM,CAAC;IAEzD,OAAO,CACH,6BAAK,SAAS,EAAC,8BAA8B;QACzC,6BAAK,SAAS,EAAC,kBAAkB,EAAC,GAAG,EAAE,6BAAmB,CAAC,gBAAgB,CAAC,8CAA8C,CAAC,EAAE,GAAG,EAAC,EAAE,GAAG;QACtI,oBAAC,kBAAQ,IAAC,SAAS,EAAC,mBAAmB,EAAC,IAAI,QAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,aAAK,CAAC,IAAI,oCAExF;QACX,oBAAC,cAAI,IACD,KAAK,EAAE;gBACH,QAAQ,EAAE,GAAG;aAChB,EACD,SAAS,EAAC,oCAAoC,EAC9C,KAAK,EAAE,aAAK,CAAC,QAAQ,EACrB,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,eAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,eAAQ,CAAC,IAAI,kIAG5C;QACP,oBAAC,kBAAQ,IAAC,SAAS,EAAC,YAAY,EAAC,MAAM,QAAC,OAAO,QAAC,OAAO,QAAC,OAAO,EAAE,YAAY,mBAElE,CACT,CACT,CAAC;AACN,CAAC,CAAC;AAzBW,QAAA,yBAAyB,6BAyBpC","sourcesContent":["import * as React from 'react';\nimport { FC, useContext } from 'react';\nimport RoomstayThemeEngine from '../../../providers/RoomstayThemeEngine';\nimport Headline from 'components/generic/Headline';\nimport { Color } from 'util/Color';\nimport Text, { TextType } from 'components/generic/Text';\nimport BEButton, { BEButtonProps } from 'components/generic/BEButton';\nimport { BookingEngineContext } from '@frontend/contexts';\nimport ScreenSize from 'util/ScreenSize';\n\ninterface AccountDetailsNoCardsPageProps {\n    onAddNewCard?: BEButtonProps['onClick'];\n}\nexport const AccountDetailsNoCardsPage: FC<AccountDetailsNoCardsPageProps> = ({ onAddNewCard }) => {\n    const context = useContext(BookingEngineContext);\n    const isMobile = context.screenSize <= ScreenSize.Medium;\n\n    return (\n        <div className=\"u-align-center u-marg-top@m-\">\n            <img className=\"u-max-width-full\" src={RoomstayThemeEngine.getImageAssetUrl('account/account-details-no-cards-graphic.svg')} alt=\"\" />\n            <Headline className=\"u-marg-top--heavy\" bold size={isMobile ? 'normal' : 'large'} color={Color.Navy}>\n                You don&apos;t have any cards yet!\n            </Headline>\n            <Text\n                style={{\n                    maxWidth: 660,\n                }}\n                className=\"u-marg-top u-marg-left-right--auto\"\n                color={Color.Graphite}\n                type={isMobile ? TextType.Small : TextType.Body}\n            >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n            </Text>\n            <BEButton className=\"u-marg-top\" filled primary rounded onClick={onAddNewCard}>\n                Add new card\n            </BEButton>\n        </div>\n    );\n};\n"]}

package/dist/src/pages/account/Details/AccountDetailsProfilePage.d.ts

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

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

@@ -0,0 +1,127 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccountDetailsProfilePage = void 0;
+const React = require("react");
+const react_1 = require("react");
+const BEButton_1 = require("components/generic/BEButton");
+const EnhancedPhoneNumberField_1 = require("components/generic/custom/EnhancedPhoneNumberField/EnhancedPhoneNumberField");
+const Headline_1 = require("components/generic/Headline");
+const Icon_1 = require("components/generic/Icon/Icon");
+const LineBreak_1 = require("components/generic/LineBreak");
+const Text_1 = require("components/generic/Text");
+const TextBox_1 = require("components/generic/TextBox");
+const StepConfirmationCountrySelector_1 = require("components/steps/confirmation/StepConfirmationCountrySelector");
+const react_hook_form_1 = require("react-hook-form");
+const react_router_dom_1 = require("react-router-dom");
+const Color_1 = require("util/Color");
+const contexts_1 = require("@frontend/contexts");
+const Validation_1 = require("../../../util/Validation");
+const PasswordBox_1 = require("../../../components/generic/PasswordBox/PasswordBox");
+const AccountRoutes_1 = require("../AccountRoutes");
+const react_i18next_1 = require("react-i18next");
+const Translation_1 = require("translations/Translation");
+const LabelAndInputGroup = (props) => {
+    const { label, component, hint, error } = props;
+    return (React.createElement("div", { className: "row u-marg-bottom--heavy" },
+        React.createElement("div", { className: "col-md-4" },
+            React.createElement(Text_1.default, { type: Text_1.TextType.Small, bold: true }, label)),
+        React.createElement("div", { className: "col-md-8" },
+            component,
+            !!error && (React.createElement("p", { className: "text-small", style: { color: '#ED4362' } }, error.message)),
+            !!hint && (React.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.Grey }, hint)))));
+};
+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)({
+        mode: 'onChange',
+    });
+    const getErrorValidationClass = (name) => (errors[name] ? 'error' : undefined);
+    (0, react_1.useEffect)(() => {
+        if (roomstayMember) {
+            resetFormValues(roomstayMember);
+        }
+    }, [roomstayMember]);
+    const onSaveDetails = (values) => {
+        updateMemberDetails(values).then(() => {
+            notifications.addNotification({
+                icon: Icon_1.IconType.Check,
+                children: React.createElement(Text_1.default, null, "Details saved succesfully"),
+                ttl: 500,
+            });
+        });
+    };
+    const saveButtonDisabled = !isDirty || isLoadingMember || !!Object.keys(errors).length;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "u-marg-top--heavy@m u-marg-top@- u-marg-bottom--heavy" },
+            React.createElement(react_router_dom_1.Link, { to: AccountRoutes_1.AccountRoutes.Home.path },
+                React.createElement(BEButton_1.default, { isText: true, icon: Icon_1.IconType.ArrowLeft, size: 'small' }, t(Translation_1.Translation.Reservation.BackToYourAccount)))),
+        React.createElement("div", { className: "u-marg-bottom--heavy@m" },
+            React.createElement(Headline_1.default, { size: 'extra-large', bold: true }, "Profile Information")),
+        React.createElement("form", { onSubmit: handleSubmit(onSaveDetails) },
+            React.createElement("div", { className: "row" },
+                React.createElement("div", { className: "col-md-8" },
+                    React.createElement("div", null,
+                        React.createElement(LabelAndInputGroup, { label: "First Name", component: React.createElement(TextBox_1.default, Object.assign({ validationStatus: getErrorValidationClass('forename') }, register('forename', {
+                                required: {
+                                    message: 'First name is required',
+                                    value: true,
+                                },
+                            }))), error: errors.forename }),
+                        React.createElement(LabelAndInputGroup, { label: "Last Name", component: React.createElement(TextBox_1.default, Object.assign({ validationStatus: getErrorValidationClass('surname') }, register('surname', {
+                                required: {
+                                    message: 'Last name is required',
+                                    value: true,
+                                },
+                            }))), error: errors.surname }),
+                        React.createElement(LabelAndInputGroup, { label: "Email Address", component: React.createElement(TextBox_1.default, { validationStatus: getErrorValidationClass('email'), inputProps: { disabled: true }, value: roomstayMember === null || roomstayMember === void 0 ? void 0 : roomstayMember.email }), error: errors.email }),
+                        React.createElement(LabelAndInputGroup, { label: "Phone Number", component: React.createElement(react_hook_form_1.Controller, { rules: {
+                                    pattern: {
+                                        value: /.*\s\d+/,
+                                        message: 'Phone Number is required',
+                                    },
+                                }, control: control, name: "phoneNumber", render: ({ field }) => {
+                                    return (React.createElement(EnhancedPhoneNumberField_1.default, Object.assign({}, field, { onChange: (e) => {
+                                            field.onChange(e);
+                                        }, validationStatus: getErrorValidationClass('phoneNumber') })));
+                                } }), error: errors.phoneNumber }),
+                        React.createElement(LineBreak_1.default, null),
+                        React.createElement(LabelAndInputGroup, { label: "Password", component: React.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: Validation_1.passwordPatternRule,
+                            }), { validationStatus: getErrorValidationClass('password') })), hint: "At least 8 characters long, case sensitive, can contain !$#%, no spaces.", error: errors.password }),
+                        React.createElement(LabelAndInputGroup, { label: "Repeat Password", component: React.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: {
+                                    value: !!watch('password'),
+                                    message: 'Repeat Password is required',
+                                },
+                                validate: {
+                                    isSame: (0, Validation_1.isPassWordMatch)(watch('password')),
+                                },
+                            }), { validationStatus: getErrorValidationClass('passwordRepeat') })), error: errors.passwordRepeat }),
+                        React.createElement(LineBreak_1.default, null),
+                        React.createElement(LabelAndInputGroup, { label: "Address", component: React.createElement(TextBox_1.default, Object.assign({}, register('address.address'))) }),
+                        React.createElement(LabelAndInputGroup, { label: "City", component: React.createElement(TextBox_1.default, Object.assign({}, register('address.city'))) }),
+                        React.createElement(LabelAndInputGroup, { label: "ZIP/Post Code", component: React.createElement(TextBox_1.default, Object.assign({}, register('address.zip'))) }),
+                        React.createElement(LabelAndInputGroup, { label: "Country", component: React.createElement(react_hook_form_1.Controller, { control: control, name: 'address.country', render: ({ field }) => {
+                                    const { ref } = field, rest = __rest(field, ["ref"]);
+                                    return React.createElement(StepConfirmationCountrySelector_1.default, Object.assign({}, rest));
+                                } }) })))),
+            React.createElement("div", { className: "u-flex justify-content-start u-marg-top--heavy" },
+                React.createElement(react_router_dom_1.Link, { to: "/account/home", className: "u-marg-right" },
+                    React.createElement(BEButton_1.default, null, "Cancel")),
+                React.createElement(BEButton_1.default, { disabled: saveButtonDisabled, isLoading: isLoadingMember, primary: true, filled: true, htmlType: "submit" }, "Save all changes")))));
+};
+exports.AccountDetailsProfilePage = AccountDetailsProfilePage;
+//# sourceMappingURL=AccountDetailsProfilePage.js.map