@roomstay/frontend 2.1.6 → 2.1.7

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

@@ -36,8 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AccountDetailsCardsPage = void 0;
-const React = __importStar(require("react"));
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const react_router_dom_1 = require("react-router-dom");
 const BEButton_1 = __importDefault(require("../../../components/generic/BEButton"));
 const Icon_1 = require("../../../components/generic/Icon/Icon");
@@ -61,7 +60,7 @@ const AccountDetailsCardsPage = (ref) => {
         name: '',
         securityCode: '',
         type: '',
-        username: roomstayMember === null || roomstayMember === void 0 ? void 0 : roomstayMember.username,
+        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));
@@ -83,20 +82,20 @@ const AccountDetailsCardsPage = (ref) => {
             }
         }
         // Check if user has no cards, set the selected card to be empty in that case.
-        if (memberCards.length === 0) {
+        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.length > 0) || (!cardExists && (selectedCard === null || selectedCard === void 0 ? void 0 : selectedCard.cardId) !== '')) {
+        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[0]);
+                        setSelectedCard(memberCards === null || memberCards === void 0 ? void 0 : memberCards[0]);
                         return;
                     }
                 }
             }
-            setSelectedCard(memberCards[0]);
+            setSelectedCard(memberCards === null || memberCards === void 0 ? void 0 : memberCards[0]);
         }
     }, [roomstayMember, memberCards === null || memberCards === void 0 ? void 0 : memberCards.length]);
     const onNewCardClicked = () => {
@@ -107,45 +106,42 @@ const AccountDetailsCardsPage = (ref) => {
         if (!card.cardId) {
             (0, MembersServiceAPI_1.AddMemberCard)(card).then((newCard) => {
                 setSelectedCard(Object.assign(Object.assign({}, card), newCard));
-                updateCardToMemberDetail(newCard);
+                updateCardToMemberDetail === null || updateCardToMemberDetail === void 0 ? void 0 : updateCardToMemberDetail(newCard);
             });
         }
         else
             (0, MembersServiceAPI_1.EditMemberCard)(card).then((res) => {
                 setSelectedCard(card);
-                updateCardToMemberDetail(res);
+                updateCardToMemberDetail === null || updateCardToMemberDetail === void 0 ? void 0 : updateCardToMemberDetail(res);
             });
     });
     const onDeleteClicked = (card) => __awaiter(void 0, void 0, void 0, function* () {
         try {
             yield (0, MembersServiceAPI_1.DeleteMemberCard)(card);
-            yield fetchRoomstayMember();
+            yield (fetchRoomstayMember === null || fetchRoomstayMember === void 0 ? void 0 : 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) { }
+        yield (updateMemberDetails === null || updateMemberDetails === void 0 ? void 0 : updateMemberDetails(Object.assign(Object.assign({}, roomstayMember), { defaultCard: card === null || card === void 0 ? void 0 : card.cardId })));
     });
     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) })));
+        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("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(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(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) })));
 };
 exports.AccountDetailsCardsPage = AccountDetailsCardsPage;
 //# sourceMappingURL=AccountDetailsCardsPage.js.map

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

@@ -1 +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"]}
+{"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"]}

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

@@ -27,8 +27,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AccountDetailsNoCardsPage = void 0;
-const React = __importStar(require("react"));
-const react_1 = require("react");
+const react_1 = __importDefault(require("react"));
+const react_2 = require("react");
 const RoomstayThemeEngine_1 = __importDefault(require("../../../providers/RoomstayThemeEngine"));
 const Headline_1 = __importDefault(require("../../../components/generic/Headline"));
 const Color_1 = require("../../../util/Color");
@@ -37,15 +37,15 @@ const BEButton_1 = __importDefault(require("../../../components/generic/BEButton
 const contexts_1 = require("../../../contexts/index.js");
 const ScreenSize_1 = __importDefault(require("../../../util/ScreenSize"));
 const AccountDetailsNoCardsPage = ({ onAddNewCard }) => {
-    const context = (0, react_1.useContext)(contexts_1.BookingEngineContext);
+    const context = (0, react_2.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: {
+    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(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")));
+        react_1.default.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

@@ -1 +1 @@
-{"version":3,"file":"AccountDetailsNoCardsPage.js","sourceRoot":"/","sources":["src/pages/account/Details/AccountDetailsNoCardsPage.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAC/B,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,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"]}
+{"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&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.js

@@ -38,8 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AccountDetailsProfilePage = void 0;
-const React = __importStar(require("react"));
-const react_1 = require("react");
+const react_1 = __importDefault(require("react"));
+const react_2 = 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"));
@@ -59,75 +59,74 @@ 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" },
+    return (react_1.default.createElement("div", { className: "row u-marg-bottom--heavy" },
+        react_1.default.createElement("div", { className: "col-md-4" },
+            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, bold: true }, label)),
+        react_1.default.createElement("div", { className: "col-md-8" },
             component,
-            !!error && (React.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)))));
+            !!error && (react_1.default.createElement("p", { className: "text-small", style: { color: '#ED4362' } }, error.message)),
+            !!hint && (react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.Grey }, hint)))));
 };
 const AccountDetailsProfilePage = () => {
-    const { roomstayMember, loading: isLoadingMember, updateMemberDetails } = (0, react_1.useContext)(contexts_1.RoomstayMemberContext);
-    const notifications = (0, react_1.useContext)(contexts_1.NotificationContext);
+    const { roomstayMember, loading: isLoadingMember, updateMemberDetails } = (0, react_2.useContext)(contexts_1.RoomstayMemberContext);
+    const notifications = (0, react_2.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)(() => {
+    (0, react_2.useEffect)(() => {
         if (roomstayMember) {
             resetFormValues(roomstayMember);
         }
     }, [roomstayMember]);
     const onSaveDetails = (values) => {
-        updateMemberDetails(values).then(() => {
+        updateMemberDetails === null || updateMemberDetails === void 0 ? void 0 : updateMemberDetails(values).then(() => {
             notifications.addNotification({
                 icon: Icon_1.IconType.Check,
-                children: React.createElement(Text_1.default, null, "Details saved succesfully"),
-                ttl: 500,
+                children: react_1.default.createElement(Text_1.default, null, "Details saved succesfully"),
             });
         });
     };
     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', {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "u-marg-top--heavy@m u-marg-top@- u-marg-bottom--heavy" },
+            react_1.default.createElement(react_router_dom_1.Link, { to: AccountRoutes_1.AccountRoutes.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("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,
                                 },
                             }))), error: errors.forename }),
-                        React.createElement(LabelAndInputGroup, { label: "Last Name", component: React.createElement(TextBox_1.default, Object.assign({ validationStatus: getErrorValidationClass('surname') }, register('surname', {
+                        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,
                                 },
                             }))), 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: {
+                        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',
                                     },
                                 }, control: control, name: "phoneNumber", render: ({ field }) => {
-                                    return (React.createElement(EnhancedPhoneNumberField_1.default, Object.assign({}, field, { onChange: (e) => {
+                                    return (react_1.default.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', {
+                        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.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', {
+                        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',
@@ -136,18 +135,18 @@ const AccountDetailsProfilePage = () => {
                                     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 }) => {
+                        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 }) => {
                                     const { ref } = field, rest = __rest(field, ["ref"]);
-                                    return React.createElement(StepConfirmationCountrySelector_1.default, Object.assign({}, rest));
+                                    return react_1.default.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")))));
+            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")))));
 };
 exports.AccountDetailsProfilePage = AccountDetailsProfilePage;
 //# sourceMappingURL=AccountDetailsProfilePage.js.map

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

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