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" /> |