aboutsummaryrefslogtreecommitdiffstats
path: root/src/components
diff options
context:
space:
mode:
authorLibravatar vantezzen <hello@vantezzen.io>2020-03-25 17:13:47 +0100
committerLibravatar vantezzen <hello@vantezzen.io>2020-03-25 17:13:47 +0100
commitf00f32f91e69566dc38a1e3db892bb14c6c0dc5a (patch)
tree6016b96bbf3fc64eff533d46a58495f8ef972cee /src/components
parentImprove user onboarding (#493) (diff)
downloadferdium-app-f00f32f91e69566dc38a1e3db892bb14c6c0dc5a.tar.gz
ferdium-app-f00f32f91e69566dc38a1e3db892bb14c6c0dc5a.tar.zst
ferdium-app-f00f32f91e69566dc38a1e3db892bb14c6c0dc5a.zip
Improve information about premium
As seen in #496, the current way Ferdi displays information about the Premium status may be irritating to new users. This commit will: - Hide all premium sections if we are not using the Franz server - Hide teams section if we are not using the Franz server - Update the description on the Teams page to reflect the use of Teams in Ferdi - Fix accessing the Team Management page to go to meetfranz.com instead of getferdi.com
Diffstat (limited to 'src/components')
-rw-r--r--src/components/settings/account/AccountDashboard.js41
-rw-r--r--src/components/settings/navigation/SettingsNavigation.js25
-rw-r--r--src/components/settings/team/TeamDashboard.js6
3 files changed, 39 insertions, 33 deletions
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index 7d6bad883..809bfda6e 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -154,6 +154,7 @@ class AccountDashboard extends Component {
154 } 154 }
155 155
156 const isUsingWithoutAccount = server === LOCAL_SERVER; 156 const isUsingWithoutAccount = server === LOCAL_SERVER;
157 const isUsingFranzServer = server === 'https://api.franzinfra.com';
157 158
158 return ( 159 return (
159 <div className="settings__main"> 160 <div className="settings__main">
@@ -243,7 +244,7 @@ class AccountDashboard extends Component {
243 )} 244 )}
244 </div> 245 </div>
245 </div> 246 </div>
246 {user.isPremium && user.isSubscriptionOwner && ( 247 {user.isPremium && user.isSubscriptionOwner && isUsingFranzServer && (
247 <div className="account"> 248 <div className="account">
248 <div className="account__box"> 249 <div className="account__box">
249 <H2>{intl.formatMessage(messages.yourLicense)}</H2> 250 <H2>{intl.formatMessage(messages.yourLicense)}</H2>
@@ -322,25 +323,27 @@ class AccountDashboard extends Component {
322 </> 323 </>
323 )} 324 )}
324 325
325 <div className="account franz-form"> 326 {isUsingFranzServer && (
326 <div className="account__box"> 327 <div className="account franz-form">
327 <H2>{intl.formatMessage(messages.headlineDangerZone)}</H2> 328 <div className="account__box">
328 {!isDeleteAccountSuccessful && ( 329 <H2>{intl.formatMessage(messages.headlineDangerZone)}</H2>
329 <div className="account__subscription"> 330 {!isDeleteAccountSuccessful && (
330 <p>{intl.formatMessage(messages.deleteInfo)}</p> 331 <div className="account__subscription">
331 <Button 332 <p>{intl.formatMessage(messages.deleteInfo)}</p>
332 label={intl.formatMessage(messages.deleteAccount)} 333 <Button
333 buttonType="danger" 334 label={intl.formatMessage(messages.deleteAccount)}
334 onClick={() => deleteAccount()} 335 buttonType="danger"
335 loaded={!isLoadingDeleteAccount} 336 onClick={() => deleteAccount()}
336 /> 337 loaded={!isLoadingDeleteAccount}
337 </div> 338 />
338 )} 339 </div>
339 {isDeleteAccountSuccessful && ( 340 )}
340 <p>{intl.formatMessage(messages.deleteEmailSent)}</p> 341 {isDeleteAccountSuccessful && (
341 )} 342 <p>{intl.formatMessage(messages.deleteEmailSent)}</p>
343 )}
344 </div>
342 </div> 345 </div>
343 </div> 346 )}
344 </> 347 </>
345 )} 348 )}
346 </> 349 </>
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index eb3249fa0..6b03f05be 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -105,6 +105,7 @@ export default @inject('stores', 'actions') @observer class SettingsNavigation e
105 const { intl } = this.context; 105 const { intl } = this.context;
106 const isLoggedIn = Boolean(localStorage.getItem('authToken')); 106 const isLoggedIn = Boolean(localStorage.getItem('authToken'));
107 const isUsingWithoutAccount = stores.settings.app.server === LOCAL_SERVER; 107 const isUsingWithoutAccount = stores.settings.app.server === LOCAL_SERVER;
108 const isUsingFranzServer = stores.settings.app.server === 'https://api.franzinfra.com';
108 109
109 return ( 110 return (
110 <div className="settings-navigation"> 111 <div className="settings-navigation">
@@ -154,17 +155,19 @@ export default @inject('stores', 'actions') @observer class SettingsNavigation e
154 > 155 >
155 {intl.formatMessage(messages.account)} 156 {intl.formatMessage(messages.account)}
156 </Link> 157 </Link>
157 <Link 158 {isUsingFranzServer && (
158 to="/settings/team" 159 <Link
159 className="settings-navigation__link" 160 to="/settings/team"
160 activeClassName="is-active" 161 className="settings-navigation__link"
161 disabled={!isLoggedIn} 162 activeClassName="is-active"
162 > 163 disabled={!isLoggedIn}
163 {intl.formatMessage(messages.team)} 164 >
164 {!user.data.isPremium && ( 165 {intl.formatMessage(messages.team)}
165 <ProBadge inverted={!isDarkThemeActive && router.location.pathname === '/settings/team'} /> 166 {!user.data.isPremium && (
166 )} 167 <ProBadge inverted={!isDarkThemeActive && router.location.pathname === '/settings/team'} />
167 </Link> 168 )}
169 </Link>
170 )}
168 <Link 171 <Link
169 to="/settings/app" 172 to="/settings/app"
170 className="settings-navigation__link" 173 className="settings-navigation__link"
diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js
index 3d5358d89..72358d485 100644
--- a/src/components/settings/team/TeamDashboard.js
+++ b/src/components/settings/team/TeamDashboard.js
@@ -20,15 +20,15 @@ const messages = defineMessages({
20 }, 20 },
21 contentHeadline: { 21 contentHeadline: {
22 id: 'settings.team.contentHeadline', 22 id: 'settings.team.contentHeadline',
23 defaultMessage: '!!!Ferdi for Teams', 23 defaultMessage: '!!!Franz Team Management',
24 }, 24 },
25 intro: { 25 intro: {
26 id: 'settings.team.intro', 26 id: 'settings.team.intro',
27 defaultMessage: '!!!You and your team use Franz? You can now manage Premium subscriptions for as many colleagues, friends or family members as you want, all from within one account.', 27 defaultMessage: '!!!Your are currently using Franz Servers, which is why you have access to Team Management.',
28 }, 28 },
29 copy: { 29 copy: {
30 id: 'settings.team.copy', 30 id: 'settings.team.copy',
31 defaultMessage: '!!!Ferdi for Teams gives you the option to invite co-workers to your team by sending them email invitations and manage their subscriptions in your account’s preferences. Don’t waste time setting up subscriptions for every team member individually, forget about multiple invoices and different billing cycles - one team to rule them all!', 31 defaultMessage: '!!!Franz\'s Team Management allows you to manage Franz Subscriptions for multiple users. Please keep in mind that having a Franz Premium subscription will give you no advantages in using Ferdi: The only reason you still have access to Team Management is so you can manage your legacy Franz Teams and so that you don\'t loose any functionality in managing your account.',
32 }, 32 },
33 manageButton: { 33 manageButton: {
34 id: 'settings.team.manageAction', 34 id: 'settings.team.manageAction',