diff options
-rw-r--r-- | src/components/auth/Invite.js | 37 | ||||
-rw-r--r-- | src/containers/auth/InviteScreen.js | 10 | ||||
-rw-r--r-- | src/containers/settings/InviteScreen.js | 31 |
3 files changed, 37 insertions, 41 deletions
diff --git a/src/components/auth/Invite.js b/src/components/auth/Invite.js index 2dcce7f83..dfe6a00b7 100644 --- a/src/components/auth/Invite.js +++ b/src/components/auth/Invite.js | |||
@@ -13,6 +13,10 @@ import Input from '../ui/Input'; | |||
13 | import Button from '../ui/Button'; | 13 | import Button from '../ui/Button'; |
14 | 14 | ||
15 | const messages = defineMessages({ | 15 | const messages = defineMessages({ |
16 | settingsHeadline: { | ||
17 | id: 'settings.invite.headline', | ||
18 | defaultMessage: '!!!Invite Friends', | ||
19 | }, | ||
16 | headline: { | 20 | headline: { |
17 | id: 'invite.headline.friends', | 21 | id: 'invite.headline.friends', |
18 | defaultMessage: '!!!Invite 3 of your friends or colleagues', | 22 | defaultMessage: '!!!Invite 3 of your friends or colleagues', |
@@ -117,17 +121,19 @@ export default class Invite extends Component { | |||
117 | 'invite__embed--button': embed, | 121 | 'invite__embed--button': embed, |
118 | }); | 122 | }); |
119 | 123 | ||
120 | return ( | 124 | const renderForm = ( |
121 | <div> | 125 | <div> |
122 | {this.state.showSuccessInfo && isInviteSuccessful && (<Appear> | 126 | {this.state.showSuccessInfo && isInviteSuccessful && ( |
123 | <Infobox | 127 | <Appear> |
124 | type="success" | 128 | <Infobox |
125 | icon="checkbox-marked-circle-outline" | 129 | type="success" |
126 | dismissable | 130 | icon="checkbox-marked-circle-outline" |
127 | > | 131 | dismissable |
128 | {intl.formatMessage(messages.inviteSuccessInfo)} | 132 | > |
129 | </Infobox> | 133 | {intl.formatMessage(messages.inviteSuccessInfo)} |
130 | </Appear>)} | 134 | </Infobox> |
135 | </Appear> | ||
136 | )} | ||
131 | 137 | ||
132 | <form className="franz-form auth__form" onSubmit={e => this.submit(e)}> | 138 | <form className="franz-form auth__form" onSubmit={e => this.submit(e)}> |
133 | {!embed && (<img | 139 | {!embed && (<img |
@@ -162,5 +168,16 @@ export default class Invite extends Component { | |||
162 | </form> | 168 | </form> |
163 | </div> | 169 | </div> |
164 | ); | 170 | ); |
171 | |||
172 | return ( | ||
173 | <div className={!embed ? 'auth__container auth__container--signup' : 'settings__main'}> | ||
174 | {embed && ( | ||
175 | <div className="settings__header"> | ||
176 | <h1>{this.context.intl.formatMessage(messages.settingsHeadline)}</h1> | ||
177 | </div> | ||
178 | )} | ||
179 | {!embed ? <div>{renderForm}</div> : <div className="settings__body invite__form">{renderForm}</div>} | ||
180 | </div> | ||
181 | ); | ||
165 | } | 182 | } |
166 | } | 183 | } |
diff --git a/src/containers/auth/InviteScreen.js b/src/containers/auth/InviteScreen.js index e54d8d225..059888c99 100644 --- a/src/containers/auth/InviteScreen.js +++ b/src/containers/auth/InviteScreen.js | |||
@@ -14,12 +14,10 @@ export default class InviteScreen extends Component { | |||
14 | const { actions } = this.props; | 14 | const { actions } = this.props; |
15 | 15 | ||
16 | return ( | 16 | return ( |
17 | <div className="auth__container auth__container--signup"> | 17 | <Invite |
18 | <Invite | 18 | onSubmit={actions.user.invite} |
19 | onSubmit={actions.user.invite} | 19 | embed={false} |
20 | embed={false} | 20 | /> |
21 | /> | ||
22 | </div> | ||
23 | ); | 21 | ); |
24 | } | 22 | } |
25 | } | 23 | } |
diff --git a/src/containers/settings/InviteScreen.js b/src/containers/settings/InviteScreen.js index 1947e79f0..5f341b1b3 100644 --- a/src/containers/settings/InviteScreen.js +++ b/src/containers/settings/InviteScreen.js | |||
@@ -1,24 +1,12 @@ | |||
1 | import React, { Component } from 'react'; | 1 | import React, { Component } from 'react'; |
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { inject, observer } from 'mobx-react'; | 3 | import { inject, observer } from 'mobx-react'; |
4 | import { defineMessages, intlShape } from 'react-intl'; | ||
5 | 4 | ||
6 | import Invite from '../../components/auth/Invite'; | 5 | import Invite from '../../components/auth/Invite'; |
7 | import { gaPage } from '../../lib/analytics'; | 6 | import { gaPage } from '../../lib/analytics'; |
8 | 7 | ||
9 | const messages = defineMessages({ | ||
10 | headline: { | ||
11 | id: 'settings.invite.headline', | ||
12 | defaultMessage: '!!!Invite Friends', | ||
13 | }, | ||
14 | }); | ||
15 | |||
16 | @inject('stores', 'actions') @observer | 8 | @inject('stores', 'actions') @observer |
17 | export default class InviteScreen extends Component { | 9 | export default class InviteScreen extends Component { |
18 | static contextTypes = { | ||
19 | intl: intlShape, | ||
20 | }; | ||
21 | |||
22 | componentDidMount() { | 10 | componentDidMount() { |
23 | gaPage('Settings/Invite'); | 11 | gaPage('Settings/Invite'); |
24 | } | 12 | } |
@@ -32,19 +20,12 @@ export default class InviteScreen extends Component { | |||
32 | const { user } = this.props.stores; | 20 | const { user } = this.props.stores; |
33 | 21 | ||
34 | return ( | 22 | return ( |
35 | <div className="settings__main"> | 23 | <Invite |
36 | <div className="settings__header"> | 24 | onSubmit={actions.user.invite} |
37 | <h1>{this.context.intl.formatMessage(messages.headline)}</h1> | 25 | isLoadingInvite={user.inviteRequest.isExecuting} |
38 | </div> | 26 | isInviteSuccessful={user.inviteRequest.wasExecuted && !user.inviteRequest.isError} |
39 | <div className="settings__body invite__form"> | 27 | embed |
40 | <Invite | 28 | /> |
41 | onSubmit={actions.user.invite} | ||
42 | isLoadingInvite={user.inviteRequest.isExecuting} | ||
43 | isInviteSuccessful={user.inviteRequest.wasExecuted && !user.inviteRequest.isError} | ||
44 | embed | ||
45 | /> | ||
46 | </div> | ||
47 | </div> | ||
48 | ); | 29 | ); |
49 | } | 30 | } |
50 | } | 31 | } |