aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/settings/account/AccountDashboard.js
diff options
context:
space:
mode:
authorLibravatar Balaji Vijayakumar <kuttibalaji.v6@gmail.com>2022-10-26 18:49:54 +0530
committerLibravatar Vijay Aravamudhan <vraravam@users.noreply.github.com>2022-10-26 19:26:39 +0530
commit47af2abe2c7dfa1b18494092278cbfb0a54f5db5 (patch)
tree6866f6744456bbc7146aa6120cbf5022976a9b1f /src/components/settings/account/AccountDashboard.js
parentUpgrade 'macos-notification-state' to git SHA from fork '0a168f5b1f94c1fd3c08... (diff)
downloadferdium-app-47af2abe2c7dfa1b18494092278cbfb0a54f5db5.tar.gz
ferdium-app-47af2abe2c7dfa1b18494092278cbfb0a54f5db5.tar.zst
ferdium-app-47af2abe2c7dfa1b18494092278cbfb0a54f5db5.zip
refactor: convert AccountDashboard to typescript
Diffstat (limited to 'src/components/settings/account/AccountDashboard.js')
-rw-r--r--src/components/settings/account/AccountDashboard.js224
1 files changed, 0 insertions, 224 deletions
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
deleted file mode 100644
index a1612cf8b..000000000
--- a/src/components/settings/account/AccountDashboard.js
+++ /dev/null
@@ -1,224 +0,0 @@
1import { Component } from 'react';
2import PropTypes from 'prop-types';
3import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
4import { defineMessages, injectIntl } from 'react-intl';
5import ReactTooltip from 'react-tooltip';
6import { H1, H2 } from '../../ui/headline';
7
8import Loader from '../../ui/Loader';
9import Button from '../../ui/button';
10import Infobox from '../../ui/Infobox';
11import { LOCAL_SERVER, LIVE_FRANZ_API } from '../../../config';
12
13const messages = defineMessages({
14 headline: {
15 id: 'settings.account.headline',
16 defaultMessage: 'Account',
17 },
18 headlineDangerZone: {
19 id: 'settings.account.headlineDangerZone',
20 defaultMessage: 'Danger Zone',
21 },
22 accountEditButton: {
23 id: 'settings.account.account.editButton',
24 defaultMessage: 'Edit account',
25 },
26 invoicesButton: {
27 id: 'settings.account.headlineInvoices',
28 defaultMessage: 'Invoices',
29 },
30 userInfoRequestFailed: {
31 id: 'settings.account.userInfoRequestFailed',
32 defaultMessage: 'Could not load user information',
33 },
34 tryReloadUserInfoRequest: {
35 id: 'settings.account.tryReloadUserInfoRequest',
36 defaultMessage: 'Try again',
37 },
38 deleteAccount: {
39 id: 'settings.account.deleteAccount',
40 defaultMessage: 'Delete account',
41 },
42 deleteInfo: {
43 id: 'settings.account.deleteInfo',
44 defaultMessage:
45 "If you don't need your Ferdium account any longer, you can delete your account and all related data here.",
46 },
47 deleteEmailSent: {
48 id: 'settings.account.deleteEmailSent',
49 defaultMessage:
50 'You have received an email with a link to confirm your account deletion. Your account and data cannot be restored!',
51 },
52 yourLicense: {
53 id: 'settings.account.yourLicense',
54 defaultMessage: 'Your Ferdium License:',
55 },
56 accountUnavailable: {
57 id: 'settings.account.accountUnavailable',
58 defaultMessage: 'Account is unavailable',
59 },
60 accountUnavailableInfo: {
61 id: 'settings.account.accountUnavailableInfo',
62 defaultMessage:
63 'You are using Ferdium without an account. If you want to use Ferdium with an account and keep your services synchronized across installations, please select a server in the Settings tab then login.',
64 },
65});
66
67class AccountDashboard extends Component {
68 static propTypes = {
69 user: MobxPropTypes.observableObject.isRequired,
70 isLoading: PropTypes.bool.isRequired,
71 userInfoRequestFailed: PropTypes.bool.isRequired,
72 retryUserInfoRequest: PropTypes.func.isRequired,
73 deleteAccount: PropTypes.func.isRequired,
74 isLoadingDeleteAccount: PropTypes.bool.isRequired,
75 isDeleteAccountSuccessful: PropTypes.bool.isRequired,
76 openEditAccount: PropTypes.func.isRequired,
77 openInvoices: PropTypes.func.isRequired,
78 server: PropTypes.string.isRequired,
79 };
80
81 render() {
82 const {
83 user,
84 isLoading,
85 userInfoRequestFailed,
86 retryUserInfoRequest,
87 deleteAccount,
88 isLoadingDeleteAccount,
89 isDeleteAccountSuccessful,
90 openEditAccount,
91 openInvoices,
92 server,
93 } = this.props;
94 const { intl } = this.props;
95
96 const isUsingWithoutAccount = server === LOCAL_SERVER;
97 const isUsingFranzServer = server === LIVE_FRANZ_API;
98
99 return (
100 <div className="settings__main">
101 <div className="settings__header">
102 <span className="settings__header-item">
103 {intl.formatMessage(messages.headline)}
104 </span>
105 </div>
106 <div className="settings__body">
107 {isUsingWithoutAccount && (
108 <>
109 <H1 className=".no-bottom-margin">
110 {intl.formatMessage(messages.accountUnavailable)}
111 </H1>
112 <p
113 className="settings__message"
114 style={{
115 borderTop: 0,
116 marginTop: 0,
117 }}
118 >
119 {intl.formatMessage(messages.accountUnavailableInfo)}
120 </p>
121 </>
122 )}
123 {!isUsingWithoutAccount && (
124 <>
125 {isLoading && <Loader />}
126
127 {!isLoading && userInfoRequestFailed && (
128 <Infobox
129 icon="alert"
130 type="danger"
131 ctaLabel={intl.formatMessage(
132 messages.tryReloadUserInfoRequest,
133 )}
134 ctaLoading={isLoading}
135 ctaOnClick={retryUserInfoRequest}
136 >
137 {intl.formatMessage(messages.userInfoRequestFailed)}
138 </Infobox>
139 )}
140
141 {!userInfoRequestFailed && (
142 <>
143 {!isLoading && (
144 <>
145 <div className="account">
146 <div className="account__box account__box--flex">
147 <div className="account__avatar">
148 <img src="./assets/images/logo.svg" alt="" />
149 </div>
150 <div className="account__info">
151 <H1>
152 <span className="username">{`${user.firstname} ${user.lastname}`}</span>
153 </H1>
154 <p>
155 {user.organization && `${user.organization}, `}
156 {user.email}
157 </p>
158 <div className="manage-user-links">
159 <Button
160 label={intl.formatMessage(
161 messages.accountEditButton,
162 )}
163 className="franz-form__button--inverted"
164 onClick={openEditAccount}
165 />
166 </div>
167 </div>
168 </div>
169 </div>
170 {user.isSubscriptionOwner && isUsingFranzServer && (
171 <div className="account">
172 <div className="account__box">
173 <H2>{intl.formatMessage(messages.yourLicense)}</H2>
174 <p>Franz</p>
175 <div className="manage-user-links">
176 <Button
177 label={intl.formatMessage(
178 messages.invoicesButton,
179 )}
180 className="franz-form__button--inverted"
181 onClick={openInvoices}
182 />
183 </div>
184 </div>
185 </div>
186 )}
187 </>
188 )}
189
190 {isUsingFranzServer && (
191 <div className="account franz-form">
192 <div className="account__box">
193 <H2>
194 {intl.formatMessage(messages.headlineDangerZone)}
195 </H2>
196 {!isDeleteAccountSuccessful && (
197 <div className="account__subscription">
198 <p>{intl.formatMessage(messages.deleteInfo)}</p>
199 <Button
200 label={intl.formatMessage(messages.deleteAccount)}
201 buttonType="danger"
202 onClick={() => deleteAccount()}
203 loaded={!isLoadingDeleteAccount}
204 />
205 </div>
206 )}
207 {isDeleteAccountSuccessful && (
208 <p>{intl.formatMessage(messages.deleteEmailSent)}</p>
209 )}
210 </div>
211 </div>
212 )}
213 </>
214 )}
215 </>
216 )}
217 </div>
218 <ReactTooltip place="right" type="dark" effect="solid" />
219 </div>
220 );
221 }
222}
223
224export default injectIntl(observer(AccountDashboard));
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2024-08-22 21:36:45 +0000