diff options
Diffstat (limited to 'src/containers')
-rw-r--r-- | src/containers/settings/AccountScreen.js | 51 | ||||
-rw-r--r-- | src/containers/settings/TeamScreen.js | 58 |
2 files changed, 67 insertions, 42 deletions
diff --git a/src/containers/settings/AccountScreen.js b/src/containers/settings/AccountScreen.js index ce1b9c333..b3f967353 100644 --- a/src/containers/settings/AccountScreen.js +++ b/src/containers/settings/AccountScreen.js | |||
@@ -1,4 +1,3 @@ | |||
1 | import { remote } from 'electron'; | ||
2 | import React, { Component } from 'react'; | 1 | import React, { Component } from 'react'; |
3 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
4 | import { inject, observer } from 'mobx-react'; | 3 | import { inject, observer } from 'mobx-react'; |
@@ -9,84 +8,52 @@ import AppStore from '../../stores/AppStore'; | |||
9 | 8 | ||
10 | import AccountDashboard from '../../components/settings/account/AccountDashboard'; | 9 | import AccountDashboard from '../../components/settings/account/AccountDashboard'; |
11 | import ErrorBoundary from '../../components/util/ErrorBoundary'; | 10 | import ErrorBoundary from '../../components/util/ErrorBoundary'; |
12 | 11 | import { WEBSITE } from '../../environment'; | |
13 | const { BrowserWindow } = remote; | ||
14 | 12 | ||
15 | export default @inject('stores', 'actions') @observer class AccountScreen extends Component { | 13 | export default @inject('stores', 'actions') @observer class AccountScreen extends Component { |
16 | componentWillMount() { | ||
17 | const { | ||
18 | user, | ||
19 | } = this.props.stores; | ||
20 | |||
21 | user.getUserInfoRequest.invalidate({ immediately: true }); | ||
22 | } | ||
23 | |||
24 | onCloseWindow() { | 14 | onCloseWindow() { |
25 | const { user, payment } = this.props.stores; | 15 | const { user } = this.props.stores; |
26 | user.getUserInfoRequest.invalidate({ immediately: true }); | 16 | user.getUserInfoRequest.invalidate({ immediately: true }); |
27 | payment.ordersDataRequest.invalidate({ immediately: true }); | ||
28 | } | 17 | } |
29 | 18 | ||
30 | reloadData() { | 19 | reloadData() { |
31 | const { user, payment } = this.props.stores; | 20 | const { user, payment } = this.props.stores; |
32 | 21 | ||
33 | user.getUserInfoRequest.reload(); | 22 | user.getUserInfoRequest.reload(); |
34 | payment.ordersDataRequest.reload(); | ||
35 | payment.plansRequest.reload(); | 23 | payment.plansRequest.reload(); |
36 | } | 24 | } |
37 | 25 | ||
38 | async handlePaymentDashboard() { | 26 | handleWebsiteLink(route) { |
39 | const { actions, stores } = this.props; | 27 | const { actions, stores } = this.props; |
40 | 28 | ||
41 | actions.payment.createDashboardUrl(); | 29 | const url = `${WEBSITE}${route}?authToken=${stores.user.authToken}&utm_source=app&utm_medium=account_dashboard`; |
42 | 30 | console.log(url); | |
43 | const dashboard = await stores.payment.createDashboardUrlRequest; | ||
44 | |||
45 | if (dashboard.url) { | ||
46 | const paymentWindow = new BrowserWindow({ | ||
47 | title: '🔒 Franz Subscription Dashboard', | ||
48 | parent: remote.getCurrentWindow(), | ||
49 | modal: false, | ||
50 | width: 900, | ||
51 | minWidth: 600, | ||
52 | webPreferences: { | ||
53 | nodeIntegration: false, | ||
54 | }, | ||
55 | }); | ||
56 | paymentWindow.loadURL(dashboard.url); | ||
57 | 31 | ||
58 | paymentWindow.on('closed', () => { | 32 | actions.app.openExternalUrl({ url }); |
59 | this.onCloseWindow(); | ||
60 | }); | ||
61 | } | ||
62 | } | 33 | } |
63 | 34 | ||
64 | render() { | 35 | render() { |
65 | const { user, payment } = this.props.stores; | 36 | const { user, payment } = this.props.stores; |
66 | const { openExternalUrl } = this.props.actions.app; | ||
67 | const { user: userActions } = this.props.actions; | 37 | const { user: userActions } = this.props.actions; |
68 | 38 | ||
69 | const isLoadingUserInfo = user.getUserInfoRequest.isExecuting; | 39 | const isLoadingUserInfo = user.getUserInfoRequest.isExecuting; |
70 | const isLoadingOrdersInfo = payment.ordersDataRequest.isExecuting; | ||
71 | const isLoadingPlans = payment.plansRequest.isExecuting; | 40 | const isLoadingPlans = payment.plansRequest.isExecuting; |
72 | 41 | ||
73 | return ( | 42 | return ( |
74 | <ErrorBoundary> | 43 | <ErrorBoundary> |
75 | <AccountDashboard | 44 | <AccountDashboard |
76 | user={user.data} | 45 | user={user.data} |
77 | orders={payment.orders} | ||
78 | isLoading={isLoadingUserInfo} | 46 | isLoading={isLoadingUserInfo} |
79 | isLoadingOrdersInfo={isLoadingOrdersInfo} | ||
80 | isLoadingPlans={isLoadingPlans} | 47 | isLoadingPlans={isLoadingPlans} |
81 | userInfoRequestFailed={user.getUserInfoRequest.wasExecuted && user.getUserInfoRequest.isError} | 48 | userInfoRequestFailed={user.getUserInfoRequest.wasExecuted && user.getUserInfoRequest.isError} |
82 | retryUserInfoRequest={() => this.reloadData()} | 49 | retryUserInfoRequest={() => this.reloadData()} |
83 | isCreatingPaymentDashboardUrl={payment.createDashboardUrlRequest.isExecuting} | ||
84 | openDashboard={price => this.handlePaymentDashboard(price)} | ||
85 | openExternalUrl={url => openExternalUrl({ url })} | ||
86 | onCloseSubscriptionWindow={() => this.onCloseWindow()} | 50 | onCloseSubscriptionWindow={() => this.onCloseWindow()} |
87 | deleteAccount={userActions.delete} | 51 | deleteAccount={userActions.delete} |
88 | isLoadingDeleteAccount={user.deleteAccountRequest.isExecuting} | 52 | isLoadingDeleteAccount={user.deleteAccountRequest.isExecuting} |
89 | isDeleteAccountSuccessful={user.deleteAccountRequest.wasExecuted && !user.deleteAccountRequest.isError} | 53 | isDeleteAccountSuccessful={user.deleteAccountRequest.wasExecuted && !user.deleteAccountRequest.isError} |
54 | openEditAccount={() => this.handleWebsiteLink('/user/profile')} | ||
55 | openBilling={() => this.handleWebsiteLink('/user/billing')} | ||
56 | openInvoices={() => this.handleWebsiteLink('/user/invoices')} | ||
90 | /> | 57 | /> |
91 | </ErrorBoundary> | 58 | </ErrorBoundary> |
92 | ); | 59 | ); |
diff --git a/src/containers/settings/TeamScreen.js b/src/containers/settings/TeamScreen.js new file mode 100644 index 000000000..30b0895e3 --- /dev/null +++ b/src/containers/settings/TeamScreen.js | |||
@@ -0,0 +1,58 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { inject, observer } from 'mobx-react'; | ||
4 | |||
5 | import UserStore from '../../stores/UserStore'; | ||
6 | import AppStore from '../../stores/AppStore'; | ||
7 | |||
8 | import TeamDashboard from '../../components/settings/team/TeamDashboard'; | ||
9 | import ErrorBoundary from '../../components/util/ErrorBoundary'; | ||
10 | import { WEBSITE } from '../../environment'; | ||
11 | |||
12 | export default @inject('stores', 'actions') @observer class TeamScreen extends Component { | ||
13 | handleWebsiteLink(route) { | ||
14 | const { actions, stores } = this.props; | ||
15 | |||
16 | const url = `${WEBSITE}${route}?authToken=${stores.user.authToken}&utm_source=app&utm_medium=account_dashboard`; | ||
17 | console.log(url); | ||
18 | |||
19 | actions.app.openExternalUrl({ url }); | ||
20 | } | ||
21 | |||
22 | render() { | ||
23 | const { user } = this.props.stores; | ||
24 | |||
25 | const isLoadingUserInfo = user.getUserInfoRequest.isExecuting; | ||
26 | |||
27 | return ( | ||
28 | <ErrorBoundary> | ||
29 | <TeamDashboard | ||
30 | user={user.data} | ||
31 | isLoading={isLoadingUserInfo} | ||
32 | userInfoRequestFailed={user.getUserInfoRequest.wasExecuted && user.getUserInfoRequest.isError} | ||
33 | retryUserInfoRequest={() => this.reloadData()} | ||
34 | openTeamManagement={() => this.handleWebsiteLink('/user/team')} | ||
35 | /> | ||
36 | </ErrorBoundary> | ||
37 | ); | ||
38 | } | ||
39 | } | ||
40 | |||
41 | TeamScreen.wrappedComponent.propTypes = { | ||
42 | stores: PropTypes.shape({ | ||
43 | user: PropTypes.instanceOf(UserStore).isRequired, | ||
44 | app: PropTypes.instanceOf(AppStore).isRequired, | ||
45 | }).isRequired, | ||
46 | actions: PropTypes.shape({ | ||
47 | payment: PropTypes.shape({ | ||
48 | createDashboardUrl: PropTypes.func.isRequired, | ||
49 | }).isRequired, | ||
50 | app: PropTypes.shape({ | ||
51 | openExternalUrl: PropTypes.func.isRequired, | ||
52 | }).isRequired, | ||
53 | user: PropTypes.shape({ | ||
54 | update: PropTypes.func.isRequired, | ||
55 | delete: PropTypes.func.isRequired, | ||
56 | }).isRequired, | ||
57 | }).isRequired, | ||
58 | }; | ||