diff options
Diffstat (limited to 'src/components/settings/account/AccountDashboard.js')
-rw-r--r-- | src/components/settings/account/AccountDashboard.js | 126 |
1 files changed, 47 insertions, 79 deletions
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js index 181b95c8c..3f6964b6b 100644 --- a/src/components/settings/account/AccountDashboard.js +++ b/src/components/settings/account/AccountDashboard.js | |||
@@ -3,12 +3,11 @@ 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'; | 6 | import { ProBadge } from '@meetfranz/ui'; |
7 | 7 | ||
8 | import Loader from '../../ui/Loader'; | 8 | import Loader from '../../ui/Loader'; |
9 | import Button from '../../ui/Button'; | 9 | import Button from '../../ui/Button'; |
10 | import Infobox from '../../ui/Infobox'; | 10 | import Infobox from '../../ui/Infobox'; |
11 | import Link from '../../ui/Link'; | ||
12 | import SubscriptionForm from '../../../containers/subscription/SubscriptionFormScreen'; | 11 | import SubscriptionForm from '../../../containers/subscription/SubscriptionFormScreen'; |
13 | 12 | ||
14 | const messages = defineMessages({ | 13 | const messages = defineMessages({ |
@@ -24,10 +23,6 @@ const messages = defineMessages({ | |||
24 | id: 'settings.account.headlineUpgrade', | 23 | id: 'settings.account.headlineUpgrade', |
25 | defaultMessage: '!!!Upgrade your Account', | 24 | defaultMessage: '!!!Upgrade your Account', |
26 | }, | 25 | }, |
27 | headlineInvoices: { | ||
28 | id: 'settings.account.headlineInvoices', | ||
29 | defaultMessage: '!!Invoices', | ||
30 | }, | ||
31 | headlineDangerZone: { | 26 | headlineDangerZone: { |
32 | id: 'settings.account.headlineDangerZone', | 27 | id: 'settings.account.headlineDangerZone', |
33 | defaultMessage: '!!Danger Zone', | 28 | defaultMessage: '!!Danger Zone', |
@@ -48,6 +43,10 @@ const messages = defineMessages({ | |||
48 | id: 'settings.account.account.editButton', | 43 | id: 'settings.account.account.editButton', |
49 | defaultMessage: '!!!Edit Account', | 44 | defaultMessage: '!!!Edit Account', |
50 | }, | 45 | }, |
46 | invoicesButton: { | ||
47 | id: 'settings.account.headlineInvoices', | ||
48 | defaultMessage: '!!Invoices', | ||
49 | }, | ||
51 | invoiceDownload: { | 50 | invoiceDownload: { |
52 | id: 'settings.account.invoiceDownload', | 51 | id: 'settings.account.invoiceDownload', |
53 | defaultMessage: '!!!Download', | 52 | defaultMessage: '!!!Download', |
@@ -77,19 +76,17 @@ const messages = defineMessages({ | |||
77 | export default @observer class AccountDashboard extends Component { | 76 | export default @observer class AccountDashboard extends Component { |
78 | static propTypes = { | 77 | static propTypes = { |
79 | user: MobxPropTypes.observableObject.isRequired, | 78 | user: MobxPropTypes.observableObject.isRequired, |
80 | orders: MobxPropTypes.arrayOrObservableArray.isRequired, | ||
81 | isLoading: PropTypes.bool.isRequired, | 79 | isLoading: PropTypes.bool.isRequired, |
82 | isLoadingOrdersInfo: PropTypes.bool.isRequired, | ||
83 | isLoadingPlans: PropTypes.bool.isRequired, | 80 | isLoadingPlans: PropTypes.bool.isRequired, |
84 | isCreatingPaymentDashboardUrl: PropTypes.bool.isRequired, | ||
85 | userInfoRequestFailed: PropTypes.bool.isRequired, | 81 | userInfoRequestFailed: PropTypes.bool.isRequired, |
86 | retryUserInfoRequest: PropTypes.func.isRequired, | 82 | retryUserInfoRequest: PropTypes.func.isRequired, |
87 | openDashboard: PropTypes.func.isRequired, | ||
88 | openExternalUrl: PropTypes.func.isRequired, | ||
89 | onCloseSubscriptionWindow: PropTypes.func.isRequired, | 83 | onCloseSubscriptionWindow: PropTypes.func.isRequired, |
90 | deleteAccount: PropTypes.func.isRequired, | 84 | deleteAccount: PropTypes.func.isRequired, |
91 | isLoadingDeleteAccount: PropTypes.bool.isRequired, | 85 | isLoadingDeleteAccount: PropTypes.bool.isRequired, |
92 | isDeleteAccountSuccessful: PropTypes.bool.isRequired, | 86 | isDeleteAccountSuccessful: PropTypes.bool.isRequired, |
87 | openEditAccount: PropTypes.func.isRequired, | ||
88 | openBilling: PropTypes.func.isRequired, | ||
89 | openInvoices: PropTypes.func.isRequired, | ||
93 | }; | 90 | }; |
94 | 91 | ||
95 | static contextTypes = { | 92 | static contextTypes = { |
@@ -99,12 +96,7 @@ export default @observer class AccountDashboard extends Component { | |||
99 | render() { | 96 | render() { |
100 | const { | 97 | const { |
101 | user, | 98 | user, |
102 | orders, | ||
103 | isLoading, | 99 | isLoading, |
104 | isCreatingPaymentDashboardUrl, | ||
105 | openDashboard, | ||
106 | openExternalUrl, | ||
107 | isLoadingOrdersInfo, | ||
108 | isLoadingPlans, | 100 | isLoadingPlans, |
109 | userInfoRequestFailed, | 101 | userInfoRequestFailed, |
110 | retryUserInfoRequest, | 102 | retryUserInfoRequest, |
@@ -112,6 +104,9 @@ export default @observer class AccountDashboard extends Component { | |||
112 | deleteAccount, | 104 | deleteAccount, |
113 | isLoadingDeleteAccount, | 105 | isLoadingDeleteAccount, |
114 | isDeleteAccountSuccessful, | 106 | isDeleteAccountSuccessful, |
107 | openEditAccount, | ||
108 | openBilling, | ||
109 | openInvoices, | ||
115 | } = this.props; | 110 | } = this.props; |
116 | const { intl } = this.context; | 111 | const { intl } = this.context; |
117 | 112 | ||
@@ -149,80 +144,53 @@ export default @observer class AccountDashboard extends Component { | |||
149 | src="./assets/images/logo.svg" | 144 | src="./assets/images/logo.svg" |
150 | alt="" | 145 | alt="" |
151 | /> | 146 | /> |
152 | {user.isPremium && ( | ||
153 | <span | ||
154 | className="account__avatar-premium emoji" | ||
155 | data-tip="Premium Supporter Account" | ||
156 | > | ||
157 | <img src="./assets/images/emoji/star.png" alt="" /> | ||
158 | </span> | ||
159 | )} | ||
160 | </div> | 147 | </div> |
161 | <div className="account__info"> | 148 | <div className="account__info"> |
162 | <h2> | 149 | <h2> |
163 | {`${user.firstname} ${user.lastname}`} | 150 | <span className="username">{`${user.firstname} ${user.lastname}`}</span> |
151 | {user.isPremium && ( | ||
152 | <> | ||
153 | {' '} | ||
154 | <ProBadge /> | ||
155 | <span className="badge badge--premium">{intl.formatMessage(messages.accountTypePremium)}</span> | ||
156 | </> | ||
157 | )} | ||
164 | </h2> | 158 | </h2> |
165 | {user.organization && `${user.organization}, `} | 159 | {user.organization && `${user.organization}, `} |
166 | {user.email} | 160 | {user.email} |
167 | <br /> | ||
168 | {user.isPremium && ( | 161 | {user.isPremium && ( |
169 | <span className="badge badge--premium">{intl.formatMessage(messages.accountTypePremium)}</span> | 162 | <div className="manage-user-links"> |
163 | <Button | ||
164 | label={intl.formatMessage(messages.accountEditButton)} | ||
165 | className="franz-form__button--inverted" | ||
166 | onClick={openEditAccount} | ||
167 | /> | ||
168 | {user.isSubscriptionOwner && ( | ||
169 | <> | ||
170 | <Button | ||
171 | label={intl.formatMessage(messages.manageSubscriptionButtonLabel)} | ||
172 | className="franz-form__button--inverted" | ||
173 | onClick={openBilling} | ||
174 | /> | ||
175 | <Button | ||
176 | label={intl.formatMessage(messages.invoicesButton)} | ||
177 | className="franz-form__button--inverted" | ||
178 | onClick={openInvoices} | ||
179 | /> | ||
180 | </> | ||
181 | )} | ||
182 | </div> | ||
170 | )} | 183 | )} |
171 | </div> | 184 | </div> |
172 | <Link to="/settings/user/edit" className="button"> | 185 | {!user.isPremium && ( |
173 | {intl.formatMessage(messages.accountEditButton)} | 186 | <Button |
174 | </Link> | 187 | label={intl.formatMessage(messages.accountEditButton)} |
175 | {user.emailValidated} | 188 | className="franz-form__button--inverted" |
176 | </div> | 189 | onClick={openEditAccount} |
177 | </div> | 190 | /> |
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 | ||
193 | label={intl.formatMessage(messages.manageSubscriptionButtonLabel)} | ||
194 | className="account__subscription-button franz-form__button--inverted" | ||
195 | loaded={!isCreatingPaymentDashboardUrl} | ||
196 | onClick={() => openDashboard()} | ||
197 | /> | ||
198 | </div> | ||
199 | </div> | ||
200 | <div className="account__box"> | ||
201 | <h2>{intl.formatMessage(messages.headlineInvoices)}</h2> | ||
202 | <table className="invoices"> | ||
203 | <tbody> | ||
204 | {orders.map(order => ( | ||
205 | <tr key={order.id}> | ||
206 | <td className="invoices__date"> | ||
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 | )} | 191 | )} |
224 | </div> | 192 | </div> |
225 | ) | 193 | </div> |
226 | )} | 194 | )} |
227 | 195 | ||
228 | {!user.isPremium && ( | 196 | {!user.isPremium && ( |