diff options
Diffstat (limited to 'src/components/settings/account')
-rw-r--r-- | src/components/settings/account/AccountDashboard.js | 107 |
1 files changed, 36 insertions, 71 deletions
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js index 181b95c8c..ca8b9e1bd 100644 --- a/src/components/settings/account/AccountDashboard.js +++ b/src/components/settings/account/AccountDashboard.js | |||
@@ -3,12 +3,10 @@ import PropTypes from 'prop-types'; | |||
3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; | 3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; |
4 | import { defineMessages, intlShape } from 'react-intl'; | 4 | import { defineMessages, intlShape } from 'react-intl'; |
5 | import ReactTooltip from 'react-tooltip'; | 5 | import ReactTooltip from 'react-tooltip'; |
6 | import moment from 'moment'; | ||
7 | 6 | ||
8 | import Loader from '../../ui/Loader'; | 7 | import Loader from '../../ui/Loader'; |
9 | import Button from '../../ui/Button'; | 8 | import Button from '../../ui/Button'; |
10 | import Infobox from '../../ui/Infobox'; | 9 | import Infobox from '../../ui/Infobox'; |
11 | import Link from '../../ui/Link'; | ||
12 | import SubscriptionForm from '../../../containers/subscription/SubscriptionFormScreen'; | 10 | import SubscriptionForm from '../../../containers/subscription/SubscriptionFormScreen'; |
13 | 11 | ||
14 | const messages = defineMessages({ | 12 | const messages = defineMessages({ |
@@ -24,10 +22,6 @@ const messages = defineMessages({ | |||
24 | id: 'settings.account.headlineUpgrade', | 22 | id: 'settings.account.headlineUpgrade', |
25 | defaultMessage: '!!!Upgrade your Account', | 23 | defaultMessage: '!!!Upgrade your Account', |
26 | }, | 24 | }, |
27 | headlineInvoices: { | ||
28 | id: 'settings.account.headlineInvoices', | ||
29 | defaultMessage: '!!Invoices', | ||
30 | }, | ||
31 | headlineDangerZone: { | 25 | headlineDangerZone: { |
32 | id: 'settings.account.headlineDangerZone', | 26 | id: 'settings.account.headlineDangerZone', |
33 | defaultMessage: '!!Danger Zone', | 27 | defaultMessage: '!!Danger Zone', |
@@ -48,6 +42,10 @@ const messages = defineMessages({ | |||
48 | id: 'settings.account.account.editButton', | 42 | id: 'settings.account.account.editButton', |
49 | defaultMessage: '!!!Edit Account', | 43 | defaultMessage: '!!!Edit Account', |
50 | }, | 44 | }, |
45 | invoicesButton: { | ||
46 | id: 'settings.account.headlineInvoices', | ||
47 | defaultMessage: '!!Invoices', | ||
48 | }, | ||
51 | invoiceDownload: { | 49 | invoiceDownload: { |
52 | id: 'settings.account.invoiceDownload', | 50 | id: 'settings.account.invoiceDownload', |
53 | defaultMessage: '!!!Download', | 51 | defaultMessage: '!!!Download', |
@@ -77,19 +75,17 @@ const messages = defineMessages({ | |||
77 | export default @observer class AccountDashboard extends Component { | 75 | export default @observer class AccountDashboard extends Component { |
78 | static propTypes = { | 76 | static propTypes = { |
79 | user: MobxPropTypes.observableObject.isRequired, | 77 | user: MobxPropTypes.observableObject.isRequired, |
80 | orders: MobxPropTypes.arrayOrObservableArray.isRequired, | ||
81 | isLoading: PropTypes.bool.isRequired, | 78 | isLoading: PropTypes.bool.isRequired, |
82 | isLoadingOrdersInfo: PropTypes.bool.isRequired, | ||
83 | isLoadingPlans: PropTypes.bool.isRequired, | 79 | isLoadingPlans: PropTypes.bool.isRequired, |
84 | isCreatingPaymentDashboardUrl: PropTypes.bool.isRequired, | ||
85 | userInfoRequestFailed: PropTypes.bool.isRequired, | 80 | userInfoRequestFailed: PropTypes.bool.isRequired, |
86 | retryUserInfoRequest: PropTypes.func.isRequired, | 81 | retryUserInfoRequest: PropTypes.func.isRequired, |
87 | openDashboard: PropTypes.func.isRequired, | ||
88 | openExternalUrl: PropTypes.func.isRequired, | ||
89 | onCloseSubscriptionWindow: PropTypes.func.isRequired, | 82 | onCloseSubscriptionWindow: PropTypes.func.isRequired, |
90 | deleteAccount: PropTypes.func.isRequired, | 83 | deleteAccount: PropTypes.func.isRequired, |
91 | isLoadingDeleteAccount: PropTypes.bool.isRequired, | 84 | isLoadingDeleteAccount: PropTypes.bool.isRequired, |
92 | isDeleteAccountSuccessful: PropTypes.bool.isRequired, | 85 | isDeleteAccountSuccessful: PropTypes.bool.isRequired, |
86 | openEditAccount: PropTypes.func.isRequired, | ||
87 | openBilling: PropTypes.func.isRequired, | ||
88 | openInvoices: PropTypes.func.isRequired, | ||
93 | }; | 89 | }; |
94 | 90 | ||
95 | static contextTypes = { | 91 | static contextTypes = { |
@@ -99,12 +95,7 @@ export default @observer class AccountDashboard extends Component { | |||
99 | render() { | 95 | render() { |
100 | const { | 96 | const { |
101 | user, | 97 | user, |
102 | orders, | ||
103 | isLoading, | 98 | isLoading, |
104 | isCreatingPaymentDashboardUrl, | ||
105 | openDashboard, | ||
106 | openExternalUrl, | ||
107 | isLoadingOrdersInfo, | ||
108 | isLoadingPlans, | 99 | isLoadingPlans, |
109 | userInfoRequestFailed, | 100 | userInfoRequestFailed, |
110 | retryUserInfoRequest, | 101 | retryUserInfoRequest, |
@@ -112,6 +103,9 @@ export default @observer class AccountDashboard extends Component { | |||
112 | deleteAccount, | 103 | deleteAccount, |
113 | isLoadingDeleteAccount, | 104 | isLoadingDeleteAccount, |
114 | isDeleteAccountSuccessful, | 105 | isDeleteAccountSuccessful, |
106 | openEditAccount, | ||
107 | openBilling, | ||
108 | openInvoices, | ||
115 | } = this.props; | 109 | } = this.props; |
116 | const { intl } = this.context; | 110 | const { intl } = this.context; |
117 | 111 | ||
@@ -161,68 +155,39 @@ export default @observer class AccountDashboard extends Component { | |||
161 | <div className="account__info"> | 155 | <div className="account__info"> |
162 | <h2> | 156 | <h2> |
163 | {`${user.firstname} ${user.lastname}`} | 157 | {`${user.firstname} ${user.lastname}`} |
158 | {user.isPremium && ( | ||
159 | <> | ||
160 | {' '} | ||
161 | <span className="badge badge--premium">{intl.formatMessage(messages.accountTypePremium)}</span> | ||
162 | </> | ||
163 | )} | ||
164 | </h2> | 164 | </h2> |
165 | {user.organization && `${user.organization}, `} | 165 | {user.organization && `${user.organization}, `} |
166 | {user.email} | 166 | {user.email} |
167 | <br /> | 167 | <div className="manage-user-links"> |
168 | {user.isPremium && ( | 168 | <Button |
169 | <span className="badge badge--premium">{intl.formatMessage(messages.accountTypePremium)}</span> | 169 | label={intl.formatMessage(messages.accountEditButton)} |
170 | )} | 170 | className="franz-form__button--inverted" |
171 | </div> | 171 | onClick={openEditAccount} |
172 | <Link to="/settings/user/edit" className="button"> | 172 | /> |
173 | {intl.formatMessage(messages.accountEditButton)} | 173 | {user.isSubscriptionOwner && ( |
174 | </Link> | 174 | <> |
175 | {user.emailValidated} | ||
176 | </div> | ||
177 | </div> | ||
178 | )} | ||
179 | |||
180 | {user.isSubscriptionOwner && ( | ||
181 | isLoadingOrdersInfo ? ( | ||
182 | <Loader /> | ||
183 | ) : ( | ||
184 | <div className="account franz-form"> | ||
185 | {orders.length > 0 && ( | ||
186 | <Fragment> | ||
187 | <div className="account__box"> | ||
188 | <h2>{intl.formatMessage(messages.headlineSubscription)}</h2> | ||
189 | <div className="account__subscription"> | ||
190 | {orders[0].name} | ||
191 | <span className="badge">{orders[0].price}</span> | ||
192 | <Button | 175 | <Button |
193 | label={intl.formatMessage(messages.manageSubscriptionButtonLabel)} | 176 | label={intl.formatMessage(messages.manageSubscriptionButtonLabel)} |
194 | className="account__subscription-button franz-form__button--inverted" | 177 | className="franz-form__button--inverted" |
195 | loaded={!isCreatingPaymentDashboardUrl} | 178 | onClick={openBilling} |
196 | onClick={() => openDashboard()} | ||
197 | /> | 179 | /> |
198 | </div> | 180 | <Button |
199 | </div> | 181 | label={intl.formatMessage(messages.invoicesButton)} |
200 | <div className="account__box"> | 182 | className="franz-form__button--inverted" |
201 | <h2>{intl.formatMessage(messages.headlineInvoices)}</h2> | 183 | onClick={openInvoices} |
202 | <table className="invoices"> | 184 | /> |
203 | <tbody> | 185 | </> |
204 | {orders.map(order => ( | 186 | )} |
205 | <tr key={order.id}> | 187 | </div> |
206 | <td className="invoices__date"> | 188 | </div> |
207 | {moment(order.date).format('DD.MM.YYYY')} | ||
208 | </td> | ||
209 | <td className="invoices__action"> | ||
210 | <button | ||
211 | type="button" | ||
212 | onClick={() => openExternalUrl(order.invoiceUrl)} | ||
213 | > | ||
214 | {intl.formatMessage(messages.invoiceDownload)} | ||
215 | </button> | ||
216 | </td> | ||
217 | </tr> | ||
218 | ))} | ||
219 | </tbody> | ||
220 | </table> | ||
221 | </div> | ||
222 | </Fragment> | ||
223 | )} | ||
224 | </div> | 189 | </div> |
225 | ) | 190 | </div> |
226 | )} | 191 | )} |
227 | 192 | ||
228 | {!user.isPremium && ( | 193 | {!user.isPremium && ( |