From c41bf73d129d2fba3ec23c1b7b463aaf9dc80dc6 Mon Sep 17 00:00:00 2001 From: Stefan Malzner Date: Mon, 8 Apr 2019 15:57:32 +0200 Subject: Add new Team page in settings --- src/components/settings/team/TeamDashboard.js | 125 ++++++++++++++++++++++++++ 1 file changed, 125 insertions(+) create mode 100644 src/components/settings/team/TeamDashboard.js (limited to 'src/components/settings/team/TeamDashboard.js') diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js new file mode 100644 index 000000000..a29a262e9 --- /dev/null +++ b/src/components/settings/team/TeamDashboard.js @@ -0,0 +1,125 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; +import { defineMessages, intlShape } from 'react-intl'; +import ReactTooltip from 'react-tooltip'; +import injectSheet from 'react-jss'; + +import Loader from '../../ui/Loader'; +import Button from '../../ui/Button'; +import Infobox from '../../ui/Infobox'; +import PremiumFeatureContainer from '../../ui/PremiumFeatureContainer'; + +const messages = defineMessages({ + headline: { + id: 'settings.team.headline', + defaultMessage: '!!!Team', + }, + contentHeadline: { + id: 'settings.team.contentHeadline', + defaultMessage: '!!!Franz for Teams', + }, + intro: { + id: 'settings.team.intro', + 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.', + }, + copy: { + id: 'settings.team.copy', + defaultMessage: '!!!Franz 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!', + }, + manageButton: { + id: 'settings.team.manageAction', + defaultMessage: '!!!Manage your Team', + }, + upgradeButton: { + id: 'settings.team.upgradeAction', + defaultMessage: '!!!Upgrade your Account', + }, +}); + +const styles = theme => ({ + cta: { + marginTop: 40, + }, +}); + + +export default @injectSheet(styles) @observer class TeamDashboard extends Component { + static propTypes = { + user: MobxPropTypes.observableObject.isRequired, + isLoading: PropTypes.bool.isRequired, + userInfoRequestFailed: PropTypes.bool.isRequired, + retryUserInfoRequest: PropTypes.func.isRequired, + openTeamManagement: PropTypes.func.isRequired, + upgradeAccount: PropTypes.func.isRequired, + classes: PropTypes.object.isRequired, + }; + + static contextTypes = { + intl: intlShape, + }; + + render() { + const { + user, + isLoading, + userInfoRequestFailed, + retryUserInfoRequest, + openTeamManagement, + upgradeAccount, + classes, + } = this.props; + const { intl } = this.context; + + return ( +
+
+ + {intl.formatMessage(messages.headline)} + +
+
+ {isLoading && ( + + )} + + {!isLoading && userInfoRequestFailed && ( + + {intl.formatMessage(messages.userInfoRequestFailed)} + + )} + + {!userInfoRequestFailed && ( + <> + {!isLoading && ( + <> + + <> +

{intl.formatMessage(messages.contentHeadline)}

+

{intl.formatMessage(messages.intro)}

+

{intl.formatMessage(messages.copy)}

+ {user.isSubscriptionOwner && ( +
+ +
+ ); + } +} -- cgit v1.2.3-70-g09d2 From b92541305cbeaf32f54ed2751f4ddd880baa2b69 Mon Sep 17 00:00:00 2001 From: Stefan Malzner Date: Mon, 8 Apr 2019 16:01:39 +0200 Subject: Clean up --- src/components/settings/team/TeamDashboard.js | 6 ++---- src/containers/settings/TeamScreen.js | 5 ----- 2 files changed, 2 insertions(+), 9 deletions(-) (limited to 'src/components/settings/team/TeamDashboard.js') diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js index a29a262e9..e222bb14c 100644 --- a/src/components/settings/team/TeamDashboard.js +++ b/src/components/settings/team/TeamDashboard.js @@ -37,11 +37,11 @@ const messages = defineMessages({ }, }); -const styles = theme => ({ +const styles = { cta: { marginTop: 40, }, -}); +}; export default @injectSheet(styles) @observer class TeamDashboard extends Component { @@ -51,7 +51,6 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon userInfoRequestFailed: PropTypes.bool.isRequired, retryUserInfoRequest: PropTypes.func.isRequired, openTeamManagement: PropTypes.func.isRequired, - upgradeAccount: PropTypes.func.isRequired, classes: PropTypes.object.isRequired, }; @@ -66,7 +65,6 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon userInfoRequestFailed, retryUserInfoRequest, openTeamManagement, - upgradeAccount, classes, } = this.props; const { intl } = this.context; diff --git a/src/containers/settings/TeamScreen.js b/src/containers/settings/TeamScreen.js index 3a4b7ef77..30b0895e3 100644 --- a/src/containers/settings/TeamScreen.js +++ b/src/containers/settings/TeamScreen.js @@ -1,9 +1,7 @@ -import { remote } from 'electron'; import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { inject, observer } from 'mobx-react'; -import PaymentStore from '../../stores/PaymentStore'; import UserStore from '../../stores/UserStore'; import AppStore from '../../stores/AppStore'; @@ -11,8 +9,6 @@ import TeamDashboard from '../../components/settings/team/TeamDashboard'; import ErrorBoundary from '../../components/util/ErrorBoundary'; import { WEBSITE } from '../../environment'; -const { BrowserWindow } = remote; - export default @inject('stores', 'actions') @observer class TeamScreen extends Component { handleWebsiteLink(route) { const { actions, stores } = this.props; @@ -45,7 +41,6 @@ export default @inject('stores', 'actions') @observer class TeamScreen extends C TeamScreen.wrappedComponent.propTypes = { stores: PropTypes.shape({ user: PropTypes.instanceOf(UserStore).isRequired, - payment: PropTypes.instanceOf(PaymentStore).isRequired, app: PropTypes.instanceOf(AppStore).isRequired, }).isRequired, actions: PropTypes.shape({ -- cgit v1.2.3-70-g09d2 From a24af19461d5270fc474d92521be39160377610e Mon Sep 17 00:00:00 2001 From: Stefan Malzner Date: Fri, 12 Apr 2019 13:32:52 +0200 Subject: Fix styling issues & add premium badge --- .../settings/account/AccountDashboard.js | 10 +--- .../settings/navigation/SettingsNavigation.js | 6 +++ src/components/settings/team/TeamDashboard.js | 2 +- .../settings/account/AccountDashboard.json | 60 +++++++++++----------- .../components/settings/team/TeamDashboard.json | 2 +- src/styles/settings.scss | 35 ++++++------- 6 files changed, 56 insertions(+), 59 deletions(-) (limited to 'src/components/settings/team/TeamDashboard.js') diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js index ea335815c..4a73b51d9 100644 --- a/src/components/settings/account/AccountDashboard.js +++ b/src/components/settings/account/AccountDashboard.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; import { defineMessages, intlShape } from 'react-intl'; import ReactTooltip from 'react-tooltip'; +import { ProBadge } from '@meetfranz/ui'; import Loader from '../../ui/Loader'; import Button from '../../ui/Button'; @@ -143,14 +144,6 @@ export default @observer class AccountDashboard extends Component { src="./assets/images/logo.svg" alt="" /> - {user.isPremium && ( - - - - )}

@@ -158,6 +151,7 @@ export default @observer class AccountDashboard extends Component { {user.isPremium && ( <> {' '} + {intl.formatMessage(messages.accountTypePremium)} )} diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js index cab6f23d7..df4b3b3b2 100644 --- a/src/components/settings/navigation/SettingsNavigation.js +++ b/src/components/settings/navigation/SettingsNavigation.js @@ -7,6 +7,7 @@ import { ProBadge } from '@meetfranz/ui'; import Link from '../../ui/Link'; import { workspaceStore } from '../../../features/workspaces'; import UIStore from '../../../stores/UIStore'; +import UserStore from '../../../stores/UserStore'; const messages = defineMessages({ availableServices: { @@ -47,6 +48,7 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp static propTypes = { stores: PropTypes.shape({ ui: PropTypes.instanceOf(UIStore).isRequired, + user: PropTypes.instanceOf(UserStore).isRequired, }).isRequired, serviceCount: PropTypes.number.isRequired, workspaceCount: PropTypes.number.isRequired, @@ -59,6 +61,7 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp render() { const { serviceCount, workspaceCount, stores } = this.props; const { isDarkThemeActive } = stores.ui; + const { router, user } = stores; const { intl } = this.context; return ( @@ -107,6 +110,9 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp activeClassName="is-active" > {intl.formatMessage(messages.team)} + {!user.data.isPremium && ( + + )} Date: Sat, 13 Apr 2019 12:43:59 +0200 Subject: Polish team screen --- src/components/settings/team/TeamDashboard.js | 51 +++++++++++++++++++++------ 1 file changed, 41 insertions(+), 10 deletions(-) (limited to 'src/components/settings/team/TeamDashboard.js') diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js index 3eb464d49..63381c4ed 100644 --- a/src/components/settings/team/TeamDashboard.js +++ b/src/components/settings/team/TeamDashboard.js @@ -39,8 +39,36 @@ const messages = defineMessages({ const styles = { cta: { - marginTop: 40, + margin: [40, 'auto'], }, + container: { + display: 'flex', + flexDirection: 'column', + height: 'auto', + + ['@media(min-width: 800px)']: { + flexDirection: 'row', + }, + }, + content: { + height: 'auto', + order: 1, + + ['@media(min-width: 800px)']: { + order: 0, + }, + }, + image: { + display: 'block', + height: 150, + order: 0, + margin: [0, 'auto', 40, 'auto'], + + ['@media(min-width: 800px)']: { + marginLeft: 40, + order: 1, + }, + } }; @@ -100,15 +128,18 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon <>

{intl.formatMessage(messages.contentHeadline)}

-

{intl.formatMessage(messages.intro)}

-

{intl.formatMessage(messages.copy)}

- {user.isSubscriptionOwner && ( -