diff options
author | Stefan Malzner <stefan@adlk.io> | 2019-08-05 13:24:35 +0200 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2019-08-05 13:24:35 +0200 |
commit | 76559f2895012803aed3256ce521b9cfff2f63b8 (patch) | |
tree | f511ed44ab8cb16af257e58ff960da1fd60c5876 /src/components/settings/account | |
parent | Add trial onboarding during signup (diff) | |
download | ferdium-app-76559f2895012803aed3256ce521b9cfff2f63b8.tar.gz ferdium-app-76559f2895012803aed3256ce521b9cfff2f63b8.tar.zst ferdium-app-76559f2895012803aed3256ce521b9cfff2f63b8.zip |
WIP: add option to activate trial
Diffstat (limited to 'src/components/settings/account')
-rw-r--r-- | src/components/settings/account/AccountDashboard.js | 134 |
1 files changed, 84 insertions, 50 deletions
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js index 3f6964b6b..0366dc1ee 100644 --- a/src/components/settings/account/AccountDashboard.js +++ b/src/components/settings/account/AccountDashboard.js | |||
@@ -135,62 +135,96 @@ export default @observer class AccountDashboard extends Component { | |||
135 | )} | 135 | )} |
136 | 136 | ||
137 | {!userInfoRequestFailed && ( | 137 | {!userInfoRequestFailed && ( |
138 | <Fragment> | 138 | <> |
139 | {!isLoading && ( | 139 | {!isLoading && ( |
140 | <div className="account"> | 140 | <> |
141 | <div className="account__box account__box--flex"> | 141 | <div className="account"> |
142 | <div className="account__avatar"> | 142 | <div className="account__box account__box--flex"> |
143 | <img | 143 | <div className="account__avatar"> |
144 | src="./assets/images/logo.svg" | 144 | <img |
145 | alt="" | 145 | src="./assets/images/logo.svg" |
146 | /> | 146 | alt="" |
147 | </div> | 147 | /> |
148 | <div className="account__info"> | 148 | </div> |
149 | <h2> | 149 | <div className="account__info"> |
150 | <span className="username">{`${user.firstname} ${user.lastname}`}</span> | 150 | <h2> |
151 | {user.isPremium && ( | 151 | <span className="username">{`${user.firstname} ${user.lastname}`}</span> |
152 | <> | 152 | {user.isPremium && ( |
153 | {' '} | ||
154 | <ProBadge /> | ||
155 | <span className="badge badge--premium">{intl.formatMessage(messages.accountTypePremium)}</span> | ||
156 | </> | ||
157 | )} | ||
158 | </h2> | ||
159 | {user.organization && `${user.organization}, `} | ||
160 | {user.email} | ||
161 | {user.isPremium && ( | ||
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 | <> | 153 | <> |
170 | <Button | 154 | {' '} |
171 | label={intl.formatMessage(messages.manageSubscriptionButtonLabel)} | 155 | <ProBadge /> |
172 | className="franz-form__button--inverted" | 156 | {/* <span className="badge badge--premium">{intl.formatMessage(messages.accountTypePremium)}</span> */} |
173 | onClick={openBilling} | ||
174 | /> | ||
175 | <Button | ||
176 | label={intl.formatMessage(messages.invoicesButton)} | ||
177 | className="franz-form__button--inverted" | ||
178 | onClick={openInvoices} | ||
179 | /> | ||
180 | </> | 157 | </> |
181 | )} | 158 | )} |
182 | </div> | 159 | </h2> |
160 | <p> | ||
161 | {user.organization && `${user.organization}, `} | ||
162 | {user.email} | ||
163 | </p> | ||
164 | {user.isPremium && ( | ||
165 | <div className="manage-user-links"> | ||
166 | <Button | ||
167 | label={intl.formatMessage(messages.accountEditButton)} | ||
168 | className="franz-form__button--inverted" | ||
169 | onClick={openEditAccount} | ||
170 | /> | ||
171 | {/* {user.isSubscriptionOwner && ( | ||
172 | <> | ||
173 | <Button | ||
174 | label={intl.formatMessage(messages.manageSubscriptionButtonLabel)} | ||
175 | className="franz-form__button--inverted" | ||
176 | onClick={openBilling} | ||
177 | /> | ||
178 | <Button | ||
179 | label={intl.formatMessage(messages.invoicesButton)} | ||
180 | className="franz-form__button--inverted" | ||
181 | onClick={openInvoices} | ||
182 | /> | ||
183 | </> | ||
184 | )} */} | ||
185 | </div> | ||
186 | )} | ||
187 | </div> | ||
188 | {!user.isPremium && ( | ||
189 | <Button | ||
190 | label={intl.formatMessage(messages.accountEditButton)} | ||
191 | className="franz-form__button--inverted" | ||
192 | onClick={openEditAccount} | ||
193 | /> | ||
183 | )} | 194 | )} |
184 | </div> | 195 | </div> |
185 | {!user.isPremium && ( | ||
186 | <Button | ||
187 | label={intl.formatMessage(messages.accountEditButton)} | ||
188 | className="franz-form__button--inverted" | ||
189 | onClick={openEditAccount} | ||
190 | /> | ||
191 | )} | ||
192 | </div> | 196 | </div> |
193 | </div> | 197 | {user.isSubscriptionOwner && ( |
198 | <div className="account"> | ||
199 | <div className="account__box"> | ||
200 | <h2> | ||
201 | Your license: {user.team.plan} | ||
202 | </h2> | ||
203 | {user.team.isTrial && ( | ||
204 | <> | ||
205 | <p> | ||
206 | Trial ends in 14 days | ||
207 | </p> | ||
208 | </> | ||
209 | )} | ||
210 | {user.isPremium && ( | ||
211 | <div className="manage-user-links"> | ||
212 | <Button | ||
213 | label={intl.formatMessage(messages.manageSubscriptionButtonLabel)} | ||
214 | className="franz-form__button--inverted" | ||
215 | onClick={openBilling} | ||
216 | /> | ||
217 | <Button | ||
218 | label={intl.formatMessage(messages.invoicesButton)} | ||
219 | className="franz-form__button--inverted" | ||
220 | onClick={openInvoices} | ||
221 | /> | ||
222 | </div> | ||
223 | )} | ||
224 | </div> | ||
225 | </div> | ||
226 | )} | ||
227 | </> | ||
194 | )} | 228 | )} |
195 | 229 | ||
196 | {!user.isPremium && ( | 230 | {!user.isPremium && ( |
@@ -227,7 +261,7 @@ export default @observer class AccountDashboard extends Component { | |||
227 | )} | 261 | )} |
228 | </div> | 262 | </div> |
229 | </div> | 263 | </div> |
230 | </Fragment> | 264 | </> |
231 | )} | 265 | )} |
232 | </div> | 266 | </div> |
233 | <ReactTooltip place="right" type="dark" effect="solid" /> | 267 | <ReactTooltip place="right" type="dark" effect="solid" /> |