npm - @roomstay/frontend - Versions diffs - 2.1.33 → 2.2.1 - Mend

@roomstay/frontend 2.1.33 → 2.2.1

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

Files changed (468) hide show

package/dist/src/models/Room/Filters/RoomTypeFilter.js CHANGED Viewed

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const Filter_1 = __importDefault(require("./Filter"));
+const Translation_1 = require("../../../translations/Translation");
 class RoomTypeFilter extends Filter_1.default {
     constructor(roomNames) {
         super();
@@ -12,8 +13,8 @@ class RoomTypeFilter extends Filter_1.default {
     getVisibleRooms() {
         return this.visibleRooms;
     }
-    getLabel() {
-        return 'Room Type';
+    getLabel(t) {
+        return t(Translation_1.Translation.Step.Room.Filter.RoomType);
     }
     check(room) {
         if (this.visibleRooms.includes(room.name) || this.visibleRooms.includes(room.code)) {

package/dist/src/models/Room/Filters/RoomTypeFilter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RoomTypeFilter.js","sourceRoot":"/","sources":["src/models/Room/Filters/RoomTypeFilter.ts"],"names":[],"mappings":";;;;;AAAA,0EAAkD;~~AAGlD~~,MAAqB,cAAe,SAAQ,gBAAM;~~IAE9C~~,YAAmB,SAAmB;QAClC,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;IAClC,CAAC;IAEM,eAAe;QAClB,OAAO,IAAI,CAAC,YAAY,CAAC;IAC7B,CAAC;IAEM,QAAQ;~~QACX~~,OAAO,~~WAAW~~,CAAC;~~IACvB~~,CAAC;IAEM,KAAK,CAAC,IAAU;QACnB,IAAI,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAc,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAc,CAAC,EAAE;YACpG,OAAO,IAAI,CAAC;SACf;QAED,OAAO,IAAI,CAAC;IAChB,CAAC;CACJ;~~AAtBD~~,~~iCAsBC~~","sourcesContent":["import Filter from '@/models/Room/Filters/Filter';\nimport { Room } from '@/models/Room/Room';\n\nexport default class RoomTypeFilter extends Filter {\n private visibleRooms: string[];\n public constructor(roomNames: string[]) {\n super();\n this.visibleRooms = roomNames;\n }\n\n public getVisibleRooms() {\n return this.visibleRooms;\n }\n\n public getLabel() {\n return 'Room ~~Type'~~;\n }\n\n public check(room: Room) {\n if (this.visibleRooms.includes(room.name as string) \|\| this.visibleRooms.includes(room.code as string)) {\n return room;\n }\n\n return null;\n }\n}\n"]}
1	+ {"version":3,"file":"RoomTypeFilter.js","sourceRoot":"/","sources":["src/models/Room/Filters/RoomTypeFilter.ts"],"names":[],"mappings":";;;;;AAAA,0EAAkD;AAElD,4DAAyD;AAGzD,MAAqB,cAAe,SAAQ,gBAAM;IAG9C,YAAmB,SAAmB;QAClC,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;IAClC,CAAC;IAEM,eAAe;QAClB,OAAO,IAAI,CAAC,YAAY,CAAC;IAC7B,CAAC;IAEM,QAAQ,CAAC,CAAY;QACxB,OAAO,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IACpD,CAAC;IAEM,KAAK,CAAC,IAAU;QACnB,IAAI,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAc,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAc,CAAC,EAAE;YACpG,OAAO,IAAI,CAAC;SACf;QAED,OAAO,IAAI,CAAC;IAChB,CAAC;CACJ;AAvBD,iCAuBC","sourcesContent":["import Filter from '@/models/Room/Filters/Filter';\nimport { Room } from '@/models/Room/Room';\nimport { Translation } from '@/translations/Translation';\nimport { TFunction } from 'i18next';\n\nexport default class RoomTypeFilter extends Filter {\n private visibleRooms: string[];\n\n public constructor(roomNames: string[]) {\n super();\n this.visibleRooms = roomNames;\n }\n\n public getVisibleRooms() {\n return this.visibleRooms;\n }\n\n public getLabel(t: TFunction) {\n return t(Translation.Step.Room.Filter.RoomType);\n }\n\n public check(room: Room) {\n if (this.visibleRooms.includes(room.name as string) \|\| this.visibleRooms.includes(room.code as string)) {\n return room;\n }\n\n return null;\n }\n}\n"]}

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

@@ -27,7 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AccountHomePage = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const ReservationItem_1 = __importDefault(require("../../../components/reservation/ReservationItem"));
 const Headline_1 = __importDefault(require("../../../components/generic/Headline"));
 const Text_1 = __importStar(require("../../../components/generic/Text"));
@@ -40,15 +40,14 @@ const StepManager_1 = __importDefault(require("../../../util/StepManager"));
 const hooks_1 = require("../../../hooks/index.js");
 const react_i18next_1 = require("react-i18next");
 const Translation_1 = require("translations/Translation");
-const react_2 = require("react");
 const contexts_1 = require("../../../contexts/index.js");
 const ScreenSize_1 = __importDefault(require("../../../util/ScreenSize"));
 const AccountRoutes_1 = require("../AccountRoutes");
-const RoomstayThemeEngine_1 = __importDefault(require("../../../providers/RoomstayThemeEngine"));
+const HomeEmptyReservation_1 = __importDefault(require("../../../components/graphics/HomeEmptyReservation"));
 const AccountHomePage = () => {
     const { fullName, upcomingBookings } = (0, hooks_1.useMember)();
     const { t } = (0, react_i18next_1.useTranslation)();
-    const context = (0, react_2.useContext)(contexts_1.BookingEngineContext);
+    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 === null || upcomingBookings === void 0 ? void 0 : upcomingBookings.length) > 0;
@@ -63,9 +62,9 @@ const AccountHomePage = () => {
                 fullName,
                 "!"),
             hasBookings ? (react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Body }, t(Translation_1.Translation.UserPortal.HomeScreen.Subtitle))) : (react_1.default.createElement(Text_1.default, { className: "u-marg-top" }, t(Translation_1.Translation.Reservation.EmptyPage.SubTitle)))),
-        react_1.default.createElement("div", { className: "u-marg-bottom--heavy" }, hasBookings ? (react_1.default.createElement(ReservationItem_1.default, { itineraryItem: upcomingBookings === null || upcomingBookings === void 0 ? void 0 : upcomingBookings[0] })) : (react_1.default.createElement("div", { className: "u-marg-top--heavy u-flex u-flex-align-center u-flex-direction-column@l- u-flex-gap" },
+        react_1.default.createElement("div", { className: "u-marg-bottom--heavy" }, hasBookings ? (react_1.default.createElement(ReservationItem_1.default, { itineraryItem: upcomingBookings === null || upcomingBookings === void 0 ? void 0 : upcomingBookings[0], defaultEventsExpanded: true })) : (react_1.default.createElement("div", { className: "u-marg-top--heavy u-flex u-flex-align-center u-flex-direction-column@l- u-flex-gap" },
             react_1.default.createElement("div", null,
-                react_1.default.createElement("img", { className: "mw-100", src: RoomstayThemeEngine_1.default.getImageAssetUrl('account/account-home-empty-graphic.svg'), alt: "Account homepage image" })),
+                react_1.default.createElement(HomeEmptyReservation_1.default, { className: "mw-100" })),
             react_1.default.createElement("div", { className: "u-marg-top--heavy@m-" },
                 react_1.default.createElement(Headline_1.default, { size: "large" }, t(Translation_1.Translation.Reservation.EmptyPage.Message)),
                 react_1.default.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)),
@@ -76,28 +75,28 @@ const AccountHomePage = () => {
                         react_1.default.createElement(BEButton_1.default, { wide: isMobile, rounded: true, icon: Icon_1.IconType.ArrowRight, iconPosition: "right" }, t(Translation_1.Translation.Reservation.EmptyPage.SeeAll)))))))),
         react_1.default.createElement("div", { className: "row" },
             react_1.default.createElement("div", { className: "col-md-3" },
-                react_1.default.createElement(IconNavCard_1.IconNavCard, { icon: Icon_1.IconType.Info, title: "View all bookings", description: "See all of your bookings, past, present and cancelled.", link: {
+                react_1.default.createElement(IconNavCard_1.IconNavCard, { icon: Icon_1.IconType.Info, title: t(Translation_1.Translation.UserPortal.HomeScreen.ViewAllBookings), 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_1.default.createElement("div", { className: "col-md-3" },
-                react_1.default.createElement(IconNavCard_1.IconNavCard, { icon: Icon_1.IconType.Person, title: "Profile Information", description: "Edit your personal details, like address, and name", link: {
+                react_1.default.createElement(IconNavCard_1.IconNavCard, { icon: Icon_1.IconType.Person, title: t(Translation_1.Translation.Navigation.Menu.ProfileInformation), 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_1.default.createElement("div", { className: "col-md-3" },
-                react_1.default.createElement(IconNavCard_1.IconNavCard, { icon: Icon_1.IconType.CreditCard, title: "Payment Information", description: "Effortlessly manage cards for smoother checkout", link: {
+                react_1.default.createElement(IconNavCard_1.IconNavCard, { icon: Icon_1.IconType.CreditCard, title: t(Translation_1.Translation.Navigation.Menu.PaymentInformation), description: "Effortlessly manage cards for smoother checkout", link: {
                         text: 'Manage cards',
                         pathTo: AccountRoutes_1.AccountRoutes.CardDetails.path,
                         icon: 'arrow',
                         color: Color_1.Color.Accent,
                     } })),
             react_1.default.createElement("div", { className: "col-md-3" },
-                react_1.default.createElement(IconNavCard_1.IconNavCard, { icon: Icon_1.IconType.Time, title: "Need Help?", description: "Connect with our hotel staff for prompt assistance", link: {
+                react_1.default.createElement(IconNavCard_1.IconNavCard, { icon: Icon_1.IconType.Time, title: t(Translation_1.Translation.Navigation.Menu.NeedHelp), description: "Connect with our hotel staff for prompt assistance", link: {
                         text: 'Contact now',
                         pathTo: AccountRoutes_1.AccountRoutes.Help.path,
                         icon: 'arrow',

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AccountHomePage.js","sourceRoot":"/","sources":["src/pages/account/AccountHome/AccountHomePage.tsx"],"names":[],"mappings":"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","sourcesContent":["import 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, IRoomstayMemberBookingItemWithRef } 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 as number) > 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 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] as IRoomstayMemberBookingItemWithRef} />\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 filled icon={IconType.ArrowRight} iconPosition=\"right\" primary>\n {t(Translation.Reservation.EmptyPage.SearchRooms)}\n </BEButton>\n </Link>\n <Link to={AccountRoutes.Reservations.path}>\n <BEButton wide={isMobile} rounded 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=\"Effortlessly manage cards for smoother checkout\"\n link={{\n text: 'Manage cards',\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=\"Connect with our hotel staff for prompt assistance\"\n link={{\n text: 'Contact now',\n pathTo: AccountRoutes.Help.path,\n icon: 'arrow',\n color: Color.Accent,\n }}\n />\n </div>\n </div>\n </div>\n );\n};\n"]}
1	+ {"version":3,"file":"AccountHomePage.js","sourceRoot":"/","sources":["src/pages/account/AccountHome/AccountHomePage.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext } 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 { BookingEngineContext, IRoomstayMemberBookingItemWithRefAndHotelDetails } from '@frontend/contexts';\nimport ScreenSize from '@/util/ScreenSize';\nimport { AccountRoutes } from '@/pages/account/AccountRoutes';\nimport HomeEmptyReservation from '@/components/graphics/HomeEmptyReservation';\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 as number) > 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 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] as IRoomstayMemberBookingItemWithRefAndHotelDetails} defaultEventsExpanded />\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 <HomeEmptyReservation className=\"mw-100\" />\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 filled icon={IconType.ArrowRight} iconPosition=\"right\" primary>\n {t(Translation.Reservation.EmptyPage.SearchRooms)}\n </BEButton>\n </Link>\n <Link to={AccountRoutes.Reservations.path}>\n <BEButton wide={isMobile} rounded 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={t(Translation.UserPortal.HomeScreen.ViewAllBookings)}\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={t(Translation.Navigation.Menu.ProfileInformation)}\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={t(Translation.Navigation.Menu.PaymentInformation)}\n description=\"Effortlessly manage cards for smoother checkout\"\n link={{\n text: 'Manage cards',\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={t(Translation.Navigation.Menu.NeedHelp)}\n description=\"Connect with our hotel staff for prompt assistance\"\n link={{\n text: 'Contact now',\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/AccountRouter.js CHANGED Viewed

@@ -14,17 +14,15 @@ const AccountDetailsProfilePage_1 = require("./Details/AccountDetailsProfilePage
 const AccountDetailsCardsPage_1 = require("./Details/AccountDetailsCardsPage");
 const AccountHelpPage_1 = require("./Help/AccountHelpPage");
 const AccountRoutes_1 = require("./AccountRoutes");
-const PrivateRoute_1 = require("../../containers/PrivateRoute");
 const AccountRouter = () => {
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(PrivateRoute_1.PrivateRoute, { path: "/account" },
-            react_1.default.createElement(AccountOutlet_1.AccountOutlet, null,
-                react_1.default.createElement(react_router_dom_1.Route, { path: AccountRoutes_1.AccountRoutes.Home.path, component: AccountHomePage_1.AccountHomePage }),
-                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.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 })))));
+        react_1.default.createElement(AccountOutlet_1.AccountOutlet, null,
+            react_1.default.createElement(react_router_dom_1.Route, { path: AccountRoutes_1.AccountRoutes.Home.path, component: AccountHomePage_1.AccountHomePage }),
+            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.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 }))));
 };
 exports.AccountRouter = AccountRouter;
 //# sourceMappingURL=AccountRouter.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AccountRouter.js","sourceRoot":"/","sources":["src/pages/account/AccountRouter.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,uDAAyC;AACzC,iEAA8D;AAC9D,iFAA8E;AAC9E,kGAA8F;AAC9F,4GAAyG;AACzG,iGAA8F;AAC9F,6FAA0F;AAC1F,0EAAuE;AACvE,mDAAgD;~~AAChD~~,~~4DAAyD;AAElD,~~MAAM,aAAa,GAAG,GAAG,EAAE;IAC9B,OAAO,CACH;QACI,8BAAC,~~2BAAY,IAAC,IAAI,EAAC,UAAU;YACzB,8BAAC,~~6BAAa;~~gBACV~~,8BAAC,wBAAK,IAAC,IAAI,EAAE,6BAAa,CAAC,IAAI,CAAC,IAAI,EAAE,SAAS,EAAE,iCAAe,GAAI;~~gBACpE~~,8BAAC,wBAAK,IAAC,IAAI,EAAE,6BAAa,CAAC,YAAY,CAAC,SAAS,EAAE,SAAS,EAAE,gDAAsB,EAAE,KAAK,SAAG;~~gBAE9F~~,8BAAC,wBAAK,IAAC,IAAI,EAAE,6BAAa,CAAC,iBAAiB,CAAC,SAAS,EAAE,SAAS,EAAE,2DAA4B,GAAI;~~gBAEnG~~,8BAAC,wBAAK,IAAC,IAAI,EAAE,6BAAa,CAAC,cAAc,CAAC,IAAI,EAAE,SAAS,EAAE,qDAAyB,GAAI;~~gBACxF~~,8BAAC,wBAAK,IAAC,IAAI,EAAE,6BAAa,CAAC,WAAW,CAAC,IAAI,EAAE,SAAS,EAAE,iDAAuB,GAAI;~~gBAEnF~~,8BAAC,wBAAK,IAAC,IAAI,EAAE,6BAAa,CAAC,IAAI,CAAC,IAAI,EAAE,SAAS,EAAE,iCAAe,GAAI,CACxD,~~CACL~~,~~CAChB,~~CACN,CAAC;AACN,CAAC,CAAC;~~AAlBW~~,QAAA,aAAa,~~iBAkBxB~~","sourcesContent":["import 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 { 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 />\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 ~~</PrivateRoute>\n~~ </>\n );\n};\n"]}
1	+ {"version":3,"file":"AccountRouter.js","sourceRoot":"/","sources":["src/pages/account/AccountRouter.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,uDAAyC;AACzC,iEAA8D;AAC9D,iFAA8E;AAC9E,kGAA8F;AAC9F,4GAAyG;AACzG,iGAA8F;AAC9F,6FAA0F;AAC1F,0EAAuE;AACvE,mDAAgD;AAGzC,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';\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 { 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 <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"]}

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

@@ -50,9 +50,11 @@ const MembersServiceAPI_1 = require("../../../api/members-service/MembersService
 const Fade_1 = __importDefault(require("../../../animations/Fade"));
 const AccountDetailsNoCardsPage_1 = require("./AccountDetailsNoCardsPage");
 const LargeLoader_1 = __importDefault(require("../../../components/generic/loader/LargeLoader"));
+const react_i18next_1 = require("react-i18next");
+const Translation_1 = require("../../../translations/Translation");
 const AccountDetailsCardsPage = (ref) => {
     var _a, _b;
-    const { roomstayMember, cards: memberCards, updateCardToMemberDetail, fetchRoomstayMember, updateMemberDetails, loading } = (0, react_1.useContext)(contexts_1.RoomstayMemberContext);
+    const { roomstayMember, cards: memberCards = [], updateCardToMemberDetail, fetchRoomstayMember, updateMemberDetails, loading } = (0, react_1.useContext)(contexts_1.RoomstayMemberContext);
     const emptyCard = (0, react_1.useMemo)(() => ({
         cardId: '',
         cardNumber: '',
@@ -62,7 +64,8 @@ const AccountDetailsCardsPage = (ref) => {
         type: '',
         username: (roomstayMember === null || roomstayMember === void 0 ? void 0 : roomstayMember.username) || '',
     }), [roomstayMember]);
-    const [selectedCard, setSelectedCard] = (0, react_1.useState)(null);
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const [selectedCard, setSelectedCard] = (0, react_1.useState)(emptyCard);
     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;
@@ -71,31 +74,12 @@ const AccountDetailsCardsPage = (ref) => {
         }
     }, [(_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 === null || memberCards === void 0 ? void 0 : memberCards.length) === 0) {
-            setSelectedCard(emptyCard);
-            return;
-        }
-        if (((!selectedCard || (selectedCard === null || selectedCard === void 0 ? void 0 : selectedCard.cardId) === emptyCard.cardId) && (memberCards === null || memberCards === void 0 ? void 0 : 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 === null || memberCards === void 0 ? void 0 : memberCards[0]);
-                        return;
-                    }
-                }
-            }
-            setSelectedCard(memberCards === null || memberCards === void 0 ? void 0 : memberCards[0]);
+        const existedCard = memberCards.find((card) => card.cardId === selectedCard.cardId);
+        if (!existedCard) {
+            if (memberCards.length)
+                setSelectedCard(memberCards[0]);
+            else
+                setSelectedCard(emptyCard);
         }
     }, [roomstayMember, memberCards === null || memberCards === void 0 ? void 0 : memberCards.length]);
     const onNewCardClicked = () => {
@@ -104,15 +88,17 @@ const AccountDetailsCardsPage = (ref) => {
     const onCardChangedSubmit = (card) => __awaiter(void 0, void 0, void 0, function* () {
         // TODO: Add loading
         if (!card.cardId) {
-            (0, MembersServiceAPI_1.AddMemberCard)(card).then((newCard) => {
+            return (0, MembersServiceAPI_1.AddMemberCard)(card).then((newCard) => {
                 setSelectedCard(Object.assign(Object.assign({}, card), newCard));
                 updateCardToMemberDetail === null || updateCardToMemberDetail === void 0 ? void 0 : updateCardToMemberDetail(newCard);
+                return newCard;
             });
         }
         else
-            (0, MembersServiceAPI_1.EditMemberCard)(card).then((res) => {
+            return (0, MembersServiceAPI_1.EditMemberCard)(card).then((res) => {
                 setSelectedCard(card);
                 updateCardToMemberDetail === null || updateCardToMemberDetail === void 0 ? void 0 : updateCardToMemberDetail(res);
+                return res;
             });
     });
     const onDeleteClicked = (card) => __awaiter(void 0, void 0, void 0, function* () {
@@ -126,19 +112,20 @@ const AccountDetailsCardsPage = (ref) => {
     });
     const onMarkedAsDefault = (card) => __awaiter(void 0, void 0, void 0, function* () {
         yield (updateMemberDetails === null || updateMemberDetails === void 0 ? void 0 : updateMemberDetails(Object.assign(Object.assign({}, roomstayMember), { defaultCard: card === null || card === void 0 ? void 0 : card.cardId })));
+        setSelectedCard(card);
     });
     if (loading)
         return react_1.default.createElement(LargeLoader_1.default, null);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: "u-marg-top--heavy@m u-marg-top@m- u-marg-bottom--heavy" },
             react_1.default.createElement(react_router_dom_1.Link, { to: "/account/home" },
-                react_1.default.createElement(BEButton_1.default, { isText: true, icon: Icon_1.IconType.ArrowLeft, size: "small" }, "BACK TO YOUR ACCOUNT"))),
+                react_1.default.createElement(BEButton_1.default, { isText: true, icon: Icon_1.IconType.ArrowLeft, size: "small" }, t(Translation_1.Translation.Reservation.BackToYourAccount)))),
         react_1.default.createElement("div", { className: "u-marg-bottom--heavy@m" },
-            react_1.default.createElement(Headline_1.default, { size: "extra-large", bold: true }, "Payment Information")),
+            react_1.default.createElement(Headline_1.default, { size: "extra-large", bold: true }, t(Translation_1.Translation.Navigation.Menu.PaymentInformation))),
         react_1.default.createElement(Fade_1.default, { open: isAddingCard },
             react_1.default.createElement("div", { className: AccountDetailsCardsPage_module_scss_1.default['layout-grid'] },
                 react_1.default.createElement("div", { className: AccountDetailsCardsPage_module_scss_1.default['card-list'] },
-                    react_1.default.createElement(Text_1.default, { bold: true, className: "u-marg-bottom" }, "Saved Cards"),
+                    react_1.default.createElement(Text_1.default, { bold: true, className: "u-marg-bottom" }, t(Translation_1.Translation.UserPortal.PaymentInformationScreen.SavedCards)),
                     react_1.default.createElement(CardList_1.CardList, { onNewCardClicked: onNewCardClicked, value: selectedCard, onChange: (selectedCard) => setSelectedCard(selectedCard), options: memberCards })),
                 react_1.default.createElement(PaymentCardInput_1.PaymentCardInput, { card: selectedCard, onSubmit: onCardChangedSubmit, onDeleteClicked: onDeleteClicked, onMarkedAsDefaultClicked: onMarkedAsDefault }))),
         !isAddingCard && react_1.default.createElement(AccountDetailsNoCardsPage_1.AccountDetailsNoCardsPage, { onAddNewCard: () => setIsAddingCard(true) })));

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AccountDetailsCardsPage.js","sourceRoot":"/","sources":["src/pages/account/Details/AccountDetailsCardsPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { 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 { IRoomstayMember, 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<IRoomstayMemberCards>(\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>(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 as IRoomstayMemberCards[]) {\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 as number) > 0) \|\| (!cardExists && selectedCard?.cardId !== '')) {\n if (roomstayMember?.defaultCard) {\n for (const card of memberCards as IRoomstayMemberCards[]) {\n if (card.cardId === roomstayMember.defaultCard) {\n setSelectedCard(memberCards?.[0] as IRoomstayMemberCards);\n return;\n }\n }\n }\n\n setSelectedCard(memberCards?.[0] as IRoomstayMemberCards);\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 } as IRoomstayMember);\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 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>\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\n onNewCardClicked={onNewCardClicked}\n value={selectedCard as IRoomstayMemberCards}\n onChange={(selectedCard) => setSelectedCard(selectedCard)}\n options={memberCards}\n />\n </div>\n <PaymentCardInput\n card={selectedCard as IRoomstayMemberCards}\n onSubmit={onCardChangedSubmit}\n onDeleteClicked={onDeleteClicked}\n onMarkedAsDefaultClicked={onMarkedAsDefault}\n />\n </div>\n </FadeAnimation>\n {!isAddingCard && <AccountDetailsNoCardsPage onAddNewCard={() => setIsAddingCard(true)} />}\n </>\n );\n};\n"]}
1	+ {"version":3,"file":"AccountDetailsCardsPage.js","sourceRoot":"/","sources":["src/pages/account/Details/AccountDetailsCardsPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { 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 { IRoomstayMember, IRoomstayMemberCards } from '@roomstay/core';\nimport FadeAnimation from '@/animations/Fade';\nimport { AccountDetailsNoCardsPage } from '@/pages/account/Details/AccountDetailsNoCardsPage';\nimport LargeLoader from '@/components/generic/loader/LargeLoader';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from '@/translations/Translation';\n\nexport const AccountDetailsCardsPage = (ref: any) => {\n const { roomstayMember, cards: memberCards = [], updateCardToMemberDetail, fetchRoomstayMember, updateMemberDetails, loading } = useContext(RoomstayMemberContext);\n const emptyCard = useMemo<IRoomstayMemberCards>(\n () => ({\n cardId: '',\n cardNumber: '',\n expiry: '',\n name: '',\n securityCode: '',\n type: '',\n username: roomstayMember?.username \|\| '',\n }),\n [roomstayMember]\n );\n const { t } = useTranslation();\n\n const [selectedCard, setSelectedCard] = useState<IRoomstayMemberCards>(emptyCard);\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 const existedCard = memberCards.find((card) => card.cardId === selectedCard.cardId);\n if (!existedCard) {\n if (memberCards.length) setSelectedCard(memberCards[0]);\n else setSelectedCard(emptyCard);\n }\n }, [roomstayMember, memberCards?.length]);\n\n const onNewCardClicked = () => {\n setSelectedCard(emptyCard);\n };\n\n const onCardChangedSubmit = async (card: IRoomstayMemberCards): Promise<IRoomstayMemberCards> => {\n // TODO: Add loading\n if (!card.cardId) {\n return AddMemberCard(card).then((newCard) => {\n setSelectedCard({ ...card, ...newCard });\n updateCardToMemberDetail?.(newCard);\n return newCard;\n });\n } else\n return EditMemberCard(card).then((res) => {\n setSelectedCard(card);\n updateCardToMemberDetail?.(res);\n return 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 } as IRoomstayMember);\n setSelectedCard(card);\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 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.PaymentInformation)}\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 {t(Translation.UserPortal.PaymentInformationScreen.SavedCards)}\n </Text>\n\n <CardList\n onNewCardClicked={onNewCardClicked}\n value={selectedCard as IRoomstayMemberCards}\n onChange={(selectedCard) => setSelectedCard(selectedCard)}\n options={memberCards}\n />\n </div>\n <PaymentCardInput\n card={selectedCard as IRoomstayMemberCards}\n onSubmit={onCardChangedSubmit}\n onDeleteClicked={onDeleteClicked}\n onMarkedAsDefaultClicked={onMarkedAsDefault}\n />\n </div>\n </FadeAnimation>\n {!isAddingCard && <AccountDetailsNoCardsPage onAddNewCard={() => setIsAddingCard(true)} />}\n </>\n );\n};\n"]}

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

@@ -27,25 +27,27 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AccountDetailsNoCardsPage = void 0;
-const react_1 = __importDefault(require("react"));
-const react_2 = require("react");
-const RoomstayThemeEngine_1 = __importDefault(require("../../../providers/RoomstayThemeEngine"));
+const react_1 = __importStar(require("react"));
 const Headline_1 = __importDefault(require("../../../components/generic/Headline"));
 const Color_1 = require("../../../util/Color");
 const Text_1 = __importStar(require("../../../components/generic/Text"));
 const BEButton_1 = __importDefault(require("../../../components/generic/BEButton"));
 const contexts_1 = require("../../../contexts/index.js");
 const ScreenSize_1 = __importDefault(require("../../../util/ScreenSize"));
+const HomeEmptyCard_1 = __importDefault(require("../../../components/graphics/HomeEmptyCard"));
+const react_i18next_1 = require("react-i18next");
+const Translation_1 = require("../../../translations/Translation");
 const AccountDetailsNoCardsPage = ({ onAddNewCard }) => {
-    const context = (0, react_2.useContext)(contexts_1.BookingEngineContext);
+    const context = (0, react_1.useContext)(contexts_1.BookingEngineContext);
     const isMobile = context.screenSize <= ScreenSize_1.default.Medium;
+    const { t } = (0, react_i18next_1.useTranslation)();
     return (react_1.default.createElement("div", { className: "u-align-center u-marg-top@m-" },
-        react_1.default.createElement("img", { className: "u-max-width-full", src: RoomstayThemeEngine_1.default.getImageAssetUrl('account/account-details-no-cards-graphic.svg'), alt: "" }),
-        react_1.default.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_1.default.createElement(HomeEmptyCard_1.default, { className: "u-max-width-full" }),
+        react_1.default.createElement(Headline_1.default, { className: "u-marg-top--heavy", bold: true, size: isMobile ? 'normal' : 'large', color: Color_1.Color.Navy }, t(Translation_1.Translation.UserPortal.PaymentInformationScreen.YouDontHaveAnyCardsYet)),
         react_1.default.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_1.default.createElement(BEButton_1.default, { className: "u-marg-top", filled: true, primary: true, rounded: true, onClick: onAddNewCard }, "Add new card")));
+        react_1.default.createElement(BEButton_1.default, { className: "u-marg-top", filled: true, primary: true, rounded: true, onClick: onAddNewCard }, t(Translation_1.Translation.UserPortal.PaymentInformationScreen.AddNewCard))));
 };
 exports.AccountDetailsNoCardsPage = AccountDetailsNoCardsPage;
 //# sourceMappingURL=AccountDetailsNoCardsPage.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AccountDetailsNoCardsPage.js","sourceRoot":"/","sources":["src/pages/account/Details/AccountDetailsNoCardsPage.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA~~,kDAA0B~~;~~AAC1B~~,~~iCAAuC;AACvC,iGAAyE;AACzE,~~6EAAqD;AACrD,wCAAqC;AACrC,kEAA2D;AAC3D,6EAAwE;AACxE,iDAA0D;AAC1D,mEAA2C;~~AAKpC~~,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~~,~~uCAAK~~,~~SAAS~~,~~EAAC~~,~~8BAA8B;QACzC~~,~~uCAAK~~,~~SAAS~~,~~EAAC~~,~~kBAAkB~~,~~EAAC~~,~~GAAG~~,~~EAAE~~,~~6BAAmB~~,~~CAAC~~,~~gBAAgB~~,~~CAAC~~,~~8CAA8C~~,~~CAAC~~,~~EAAE,GAAG,~~EAAC,~~EAAE~~,GAAG;~~QACtI~~,8BAAC,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,8BAAC,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,8BAAC,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 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'~~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"]}
1	+ {"version":3,"file":"AccountDetailsNoCardsPage.js","sourceRoot":"/","sources":["src/pages/account/Details/AccountDetailsNoCardsPage.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA8C;AAE9C,6EAAqD;AACrD,wCAAqC;AACrC,kEAA2D;AAC3D,6EAAwE;AACxE,iDAA0D;AAC1D,mEAA2C;AAC3C,wFAAgE;AAChE,iDAA+C;AAC/C,4DAAyD;AAMlD,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;IACzD,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAE/B,OAAO,CACH,uCAAK,SAAS,EAAC,8BAA8B;QACzC,8BAAC,uBAAa,IAAC,SAAS,EAAC,kBAAkB,GAAG;QAC9C,8BAAC,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,IAC9F,CAAC,CAAC,yBAAW,CAAC,UAAU,CAAC,wBAAwB,CAAC,sBAAsB,CAAC,CACnE;QACX,8BAAC,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,8BAAC,kBAAQ,IAAC,SAAS,EAAC,YAAY,EAAC,MAAM,QAAC,OAAO,QAAC,OAAO,QAAC,OAAO,EAAE,YAAY,IACxE,CAAC,CAAC,yBAAW,CAAC,UAAU,CAAC,wBAAwB,CAAC,UAAU,CAAC,CACvD,CACT,CACT,CAAC;AACN,CAAC,CAAC;AA1BW,QAAA,yBAAyB,6BA0BpC","sourcesContent":["import React, { 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';\nimport HomeEmptyCard from '@/components/graphics/HomeEmptyCard';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from '@/translations/Translation';\n\ninterface AccountDetailsNoCardsPageProps {\n onAddNewCard?: BEButtonProps['onClick'];\n}\n\nexport const AccountDetailsNoCardsPage: FC<AccountDetailsNoCardsPageProps> = ({ onAddNewCard }) => {\n const context = useContext(BookingEngineContext);\n const isMobile = context.screenSize <= ScreenSize.Medium;\n const { t } = useTranslation();\n\n return (\n <div className=\"u-align-center u-marg-top@m-\">\n <HomeEmptyCard className=\"u-max-width-full\" />\n <Headline className=\"u-marg-top--heavy\" bold size={isMobile ? 'normal' : 'large'} color={Color.Navy}>\n {t(Translation.UserPortal.PaymentInformationScreen.YouDontHaveAnyCardsYet)}\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 {t(Translation.UserPortal.PaymentInformationScreen.AddNewCard)}\n </BEButton>\n </div>\n );\n};\n"]}

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

@@ -38,8 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AccountDetailsProfilePage = void 0;
-const react_1 = __importDefault(require("react"));
-const react_2 = require("react");
+const react_1 = __importStar(require("react"));
 const BEButton_1 = __importDefault(require("../../../components/generic/BEButton"));
 const EnhancedPhoneNumberField_1 = __importDefault(require("../../../components/generic/custom/EnhancedPhoneNumberField/EnhancedPhoneNumberField"));
 const Headline_1 = __importDefault(require("../../../components/generic/Headline"));
@@ -68,14 +67,14 @@ const LabelAndInputGroup = (props) => {
             !!hint && (react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.Grey }, hint)))));
 };
 const AccountDetailsProfilePage = () => {
-    const { roomstayMember, loading: isLoadingMember, updateMemberDetails } = (0, react_2.useContext)(contexts_1.RoomstayMemberContext);
-    const notifications = (0, react_2.useContext)(contexts_1.NotificationContext);
+    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_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         if (roomstayMember) {
             resetFormValues(roomstayMember);
         }
@@ -84,7 +83,7 @@ const AccountDetailsProfilePage = () => {
         updateMemberDetails === null || updateMemberDetails === void 0 ? void 0 : updateMemberDetails(values).then(() => {
             notifications.addNotification({
                 icon: Icon_1.IconType.Check,
-                children: react_1.default.createElement(Text_1.default, null, "Details saved succesfully"),
+                children: react_1.default.createElement(Text_1.default, null, t(Translation_1.Translation.UserPortal.ProfileScreen.DetailsSavedSuccessfully)),
             });
         });
     };
@@ -94,59 +93,47 @@ const AccountDetailsProfilePage = () => {
             react_1.default.createElement(react_router_dom_1.Link, { to: AccountRoutes_1.AccountRoutes.Home.path },
                 react_1.default.createElement(BEButton_1.default, { isText: true, icon: Icon_1.IconType.ArrowLeft, size: "small" }, t(Translation_1.Translation.Reservation.BackToYourAccount)))),
         react_1.default.createElement("div", { className: "u-marg-bottom--heavy@m" },
-            react_1.default.createElement(Headline_1.default, { size: "extra-large", bold: true }, "Profile Information")),
+            react_1.default.createElement(Headline_1.default, { size: "extra-large", bold: true }, t(Translation_1.Translation.Navigation.Menu.ProfileInformation))),
         react_1.default.createElement("form", { onSubmit: handleSubmit(onSaveDetails) },
             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: "First Name", component: react_1.default.createElement(TextBox_1.default, Object.assign({ validationStatus: getErrorValidationClass('forename') }, register('forename', {
-                                required: {
-                                    message: 'First name is required',
-                                    value: true,
-                                },
+                        react_1.default.createElement(LabelAndInputGroup, { label: t(Translation_1.Translation.Step.Confirmation.Inputs.Forename), component: react_1.default.createElement(TextBox_1.default, Object.assign({ validationStatus: getErrorValidationClass('forename') }, register('forename', {
+                                required: (0, Validation_1.makeRequiredRule)(t)(true, t(Translation_1.Translation.Step.Confirmation.Inputs.Forename)),
                             }))), error: errors.forename }),
-                        react_1.default.createElement(LabelAndInputGroup, { label: "Last Name", component: react_1.default.createElement(TextBox_1.default, Object.assign({ validationStatus: getErrorValidationClass('surname') }, register('surname', {
-                                required: {
-                                    message: 'Last name is required',
-                                    value: true,
-                                },
+                        react_1.default.createElement(LabelAndInputGroup, { label: t(Translation_1.Translation.Step.Confirmation.Inputs.Surname), component: react_1.default.createElement(TextBox_1.default, Object.assign({ validationStatus: getErrorValidationClass('surname') }, register('surname', {
+                                required: (0, Validation_1.makeRequiredRule)(t)(true, t(Translation_1.Translation.Step.Confirmation.Inputs.Surname)),
                             }))), error: errors.surname }),
-                        react_1.default.createElement(LabelAndInputGroup, { label: "Email Address", component: react_1.default.createElement(TextBox_1.default, { validationStatus: getErrorValidationClass('email'), inputProps: { disabled: true }, value: roomstayMember === null || roomstayMember === void 0 ? void 0 : roomstayMember.email }), error: errors.email }),
-                        react_1.default.createElement(LabelAndInputGroup, { label: "Phone Number", component: react_1.default.createElement(react_hook_form_1.Controller, { rules: {
-                                    pattern: {
-                                        value: /.*\s\d+/,
-                                        message: 'Phone Number is required',
-                                    },
+                        react_1.default.createElement(LabelAndInputGroup, { label: t(Translation_1.Translation.Step.Confirmation.Inputs.Email), component: react_1.default.createElement(TextBox_1.default, { validationStatus: getErrorValidationClass('email'), inputProps: { disabled: true }, value: roomstayMember === null || roomstayMember === void 0 ? void 0 : roomstayMember.email }), error: errors.email }),
+                        react_1.default.createElement(LabelAndInputGroup, { label: t(Translation_1.Translation.Step.Confirmation.Inputs.Phone), component: react_1.default.createElement(react_hook_form_1.Controller, { rules: {
+                                    pattern: (0, Validation_1.makePhonePatternRule)(t),
                                 }, control: control, name: "phoneNumber", render: ({ field }) => {
                                     return (react_1.default.createElement(EnhancedPhoneNumberField_1.default, Object.assign({}, field, { onChange: (e) => {
                                             field.onChange(e);
                                         }, validationStatus: getErrorValidationClass('phoneNumber') })));
                                 } }), error: errors.phoneNumber }),
                         react_1.default.createElement(LineBreak_1.default, null),
-                        react_1.default.createElement(LabelAndInputGroup, { label: "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: Validation_1.passwordPatternRule,
-                            }), { validationStatus: getErrorValidationClass('password') })), hint: "At least 8 characters long, case sensitive, can contain !$#%, no spaces.", error: errors.password }),
-                        react_1.default.createElement(LabelAndInputGroup, { label: "Repeat 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('passwordRepeat', {
-                                required: {
-                                    value: !!watch('password'),
-                                    message: 'Repeat Password is required',
-                                },
+                        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)(watch('password')),
+                                    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: "Address", component: react_1.default.createElement(TextBox_1.default, Object.assign({}, register('address.address'))) }),
-                        react_1.default.createElement(LabelAndInputGroup, { label: "City", component: react_1.default.createElement(TextBox_1.default, Object.assign({}, register('address.city'))) }),
-                        react_1.default.createElement(LabelAndInputGroup, { label: "ZIP/Post Code", component: react_1.default.createElement(TextBox_1.default, Object.assign({}, register('address.zip'))) }),
-                        react_1.default.createElement(LabelAndInputGroup, { label: "Country", component: react_1.default.createElement(react_hook_form_1.Controller, { control: control, name: "address.country", render: ({ field }) => {
+                        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'))) }),
+                        react_1.default.createElement(LabelAndInputGroup, { label: t(Translation_1.Translation.Step.Confirmation.Inputs.Country), component: react_1.default.createElement(react_hook_form_1.Controller, { control: control, name: "address.country", render: ({ field }) => {
                                     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, "Cancel")),
-                react_1.default.createElement(BEButton_1.default, { disabled: saveButtonDisabled, isLoading: isLoadingMember, primary: true, filled: true, htmlType: "submit" }, "Save all changes")))));
+                    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))))));
 };
 exports.AccountDetailsProfilePage = AccountDetailsProfilePage;
 //# sourceMappingURL=AccountDetailsProfilePage.js.map