diff options
author | 2022-10-26 18:49:54 +0530 | |
---|---|---|
committer | 2022-10-26 19:26:39 +0530 | |
commit | 47af2abe2c7dfa1b18494092278cbfb0a54f5db5 (patch) | |
tree | 6866f6744456bbc7146aa6120cbf5022976a9b1f /src/components/settings/account/AccountDashboard.js | |
parent | Upgrade 'macos-notification-state' to git SHA from fork '0a168f5b1f94c1fd3c08... (diff) | |
download | ferdium-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.js | 224 |
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 @@ | |||
1 | import { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; | ||
4 | import { defineMessages, injectIntl } from 'react-intl'; | ||
5 | import ReactTooltip from 'react-tooltip'; | ||
6 | import { H1, H2 } from '../../ui/headline'; | ||
7 | |||
8 | import Loader from '../../ui/Loader'; | ||
9 | import Button from '../../ui/button'; | ||
10 | import Infobox from '../../ui/Infobox'; | ||
11 | import { LOCAL_SERVER, LIVE_FRANZ_API } from '../../../config'; | ||
12 | |||
13 | const 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 | |||
67 | class 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 | |||
224 | export default injectIntl(observer(AccountDashboard)); | ||