From 24d0223fee38c36ec19d9c662579dba7d787f8b4 Mon Sep 17 00:00:00 2001 From: Stefan Malzner Date: Thu, 5 Sep 2019 09:49:25 +0200 Subject: polishing --- src/features/todos/components/TodosWebview.js | 8 +- src/features/todos/store.js | 18 ++- .../workspaces/components/WorkspacesDashboard.js | 167 +++++++++++---------- .../workspaces/containers/WorkspacesScreen.js | 13 +- 4 files changed, 119 insertions(+), 87 deletions(-) (limited to 'src/features') diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js index 9a50f7e8d..fa530daed 100644 --- a/src/features/todos/components/TodosWebview.js +++ b/src/features/todos/components/TodosWebview.js @@ -9,7 +9,7 @@ import { defineMessages, intlShape } from 'react-intl'; import { mdiChevronRight, mdiCheckAll } from '@mdi/js'; import * as environment from '../../../environment'; import Appear from '../../../components/ui/effects/Appear'; -import ActivateTrialButton from '../../../components/ui/ActivateTrialButton'; +import UpgradeButton from '../../../components/ui/UpgradeButton'; const OPEN_TODOS_BUTTON_SIZE = 45; const CLOSE_TODOS_BUTTON_SIZE = 35; @@ -116,7 +116,7 @@ const styles = theme => ({ alignItems: 'center', width: '80%', maxWidth: 300, - margin: [-50, 'auto', 0], + margin: [0, 'auto'], textAlign: 'center', }, premiumIcon: { @@ -286,10 +286,10 @@ class TodosWebview extends Component { ) : (
- +

{intl.formatMessage(messages.premiumInfo)}

{intl.formatMessage(messages.rolloutInfo)}

- { + const { stats } = this.stores.settings.all; + + // Hide todos layer on first app start but show on second + if (stats.appStarts <= 1) { + this._updateSettings({ + isTodosPanelVisible: false, + }); + } else if (stats.appStarts <= 2) { + this._updateSettings({ + isTodosPanelVisible: true, + }); + } + }; } diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js index 059a681de..fc636dd95 100644 --- a/src/features/workspaces/components/WorkspacesDashboard.js +++ b/src/features/workspaces/components/WorkspacesDashboard.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react'; import { defineMessages, intlShape } from 'react-intl'; import injectSheet from 'react-jss'; -import { Infobox } from '@meetfranz/ui'; +import { Infobox, Badge } from '@meetfranz/ui'; import Loader from '../../../components/ui/Loader'; import WorkspaceItem from './WorkspaceItem'; @@ -11,9 +11,9 @@ import CreateWorkspaceForm from './CreateWorkspaceForm'; import Request from '../../../stores/lib/Request'; import Appear from '../../../components/ui/effects/Appear'; import { workspaceStore } from '../index'; -import PremiumFeatureContainer from '../../../components/ui/PremiumFeatureContainer'; import UIStore from '../../../stores/UIStore'; -import ActivateTrialButton from '../../../components/ui/ActivateTrialButton'; +import globalMessages from '../../../i18n/globalMessages'; +import UpgradeButton from '../../../components/ui/UpgradeButton'; const messages = defineMessages({ headline: { @@ -64,23 +64,24 @@ const styles = theme => ({ height: 'auto', }, premiumAnnouncement: { - padding: 20, - // backgroundColor: '#3498db', - marginLeft: -20, - marginBottom: 40, - paddingBottom: 40, height: 'auto', + }, + premiumAnnouncementContainer: { display: 'flex', - borderBottom: [1, 'solid', theme.inputBackground], + }, + announcementHeadline: { + marginBottom: 0, }, teaserImage: { - width: 200, - height: '100%', - float: 'left', - margin: [-8, 0, 0, -20], + width: 250, + margin: [-8, 0, 0, 20], + alignSelf: 'center', }, upgradeCTA: { - marginTop: 20, + margin: [40, 'auto'], + }, + proRequired: { + margin: [10, 0, 40], }, }); @@ -95,6 +96,8 @@ class WorkspacesDashboard extends Component { onCreateWorkspaceSubmit: PropTypes.func.isRequired, onWorkspaceClick: PropTypes.func.isRequired, workspaces: MobxPropTypes.arrayOrObservableArray.isRequired, + isPersonalUser: PropTypes.bool.isRequired, + onUpgradeAccount: PropTypes.func.isRequired, }; static contextTypes = { @@ -152,76 +155,80 @@ class WorkspacesDashboard extends Component { {workspaceStore.isPremiumUpgradeRequired && (
- -
-

{intl.formatMessage(messages.workspaceFeatureHeadline)}

-

{intl.formatMessage(messages.workspaceFeatureInfo)}

- + +

{intl.formatMessage(messages.workspaceFeatureHeadline)}

+ {intl.formatMessage(globalMessages.proRequired)} +
+
+

{intl.formatMessage(messages.workspaceFeatureInfo)}

+ +
+
)} - workspaceStore.isPremiumUpgradeRequired} - gaEventInfo={{ category: 'User', event: 'upgrade', label: 'workspaces' }} - > - {/* ===== Create workspace form ===== */} -
- -
- {getUserWorkspacesRequest.isExecuting ? ( - - ) : ( - - {/* ===== Workspace could not be loaded error ===== */} - {getUserWorkspacesRequest.error ? ( - - {intl.formatMessage(messages.workspacesRequestFailed)} - - ) : ( - - {workspaces.length === 0 ? ( -
- {/* ===== Workspaces empty state ===== */} -

- - - - {intl.formatMessage(messages.noServicesAdded)} -

-
- ) : ( - - {/* ===== Workspaces list ===== */} - - {workspaces.map(workspace => ( - onWorkspaceClick(w)} - /> - ))} - -
- )} - - )} - - )} - + {!workspaceStore.isPremiumUpgradeRequired && ( + <> + {/* ===== Create workspace form ===== */} +
+ +
+ {getUserWorkspacesRequest.isExecuting ? ( + + ) : ( + + {/* ===== Workspace could not be loaded error ===== */} + {getUserWorkspacesRequest.error ? ( + + {intl.formatMessage(messages.workspacesRequestFailed)} + + ) : ( + + {workspaces.length === 0 ? ( +
+ {/* ===== Workspaces empty state ===== */} +

+ + + + {intl.formatMessage(messages.noServicesAdded)} +

+
+ ) : ( + + {/* ===== Workspaces list ===== */} + + {workspaces.map(workspace => ( + onWorkspaceClick(w)} + /> + ))} + +
+ )} + + )} + + )} + + )}
); diff --git a/src/features/workspaces/containers/WorkspacesScreen.js b/src/features/workspaces/containers/WorkspacesScreen.js index 2ab565fa1..5fbb0c31d 100644 --- a/src/features/workspaces/containers/WorkspacesScreen.js +++ b/src/features/workspaces/containers/WorkspacesScreen.js @@ -10,29 +10,38 @@ import { getUserWorkspacesRequest, updateWorkspaceRequest, } from '../api'; +import UserStore from '../../../stores/UserStore'; -@inject('actions') @observer +@inject('stores', 'actions') @observer class WorkspacesScreen extends Component { static propTypes = { + stores: PropTypes.shape({ + user: PropTypes.instanceOf(UserStore), + }).isRequired, actions: PropTypes.shape({ workspace: PropTypes.shape({ edit: PropTypes.func.isRequired, }), + ui: PropTypes.shape({ + openSettings: PropTypes.func.isRequired, + }), }).isRequired, }; render() { - const { actions } = this.props; + const { stores, actions } = this.props; return ( actions.workspaces.create(data)} onWorkspaceClick={w => actions.workspaces.edit({ workspace: w })} + onUpgradeAccount={() => actions.ui.openSettings({ path: 'user' })} /> ); -- cgit v1.2.3-70-g09d2 From f0b46fc9655b9e13039f1e4f1b7c0c0def0c0241 Mon Sep 17 00:00:00 2001 From: Stefan Malzner Date: Thu, 5 Sep 2019 10:16:43 +0200 Subject: Fix linting issues --- src/components/settings/team/TeamDashboard.js | 2 -- src/components/ui/UpgradeButton/index.js | 1 - .../workspaces/components/WorkspacesDashboard.js | 4 +--- .../workspaces/containers/WorkspacesScreen.js | 11 +--------- .../components/settings/team/TeamDashboard.json | 24 +++++++++++----------- .../src/components/ui/UpgradeButton/index.json | 4 ++-- 6 files changed, 16 insertions(+), 30 deletions(-) (limited to 'src/features') diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js index 51a3f375d..a9df980d7 100644 --- a/src/components/settings/team/TeamDashboard.js +++ b/src/components/settings/team/TeamDashboard.js @@ -9,9 +9,7 @@ import { Badge } from '@meetfranz/ui'; import Loader from '../../ui/Loader'; import Button from '../../ui/Button'; import Infobox from '../../ui/Infobox'; -import PremiumFeatureContainer from '../../ui/PremiumFeatureContainer'; import globalMessages from '../../../i18n/globalMessages'; -import ActivateTrialButton from '../../ui/ActivateTrialButton'; import UpgradeButton from '../../ui/UpgradeButton'; const messages = defineMessages({ diff --git a/src/components/ui/UpgradeButton/index.js b/src/components/ui/UpgradeButton/index.js index 4aa494e38..73762f0bf 100644 --- a/src/components/ui/UpgradeButton/index.js +++ b/src/components/ui/UpgradeButton/index.js @@ -2,7 +2,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { inject, observer } from 'mobx-react'; import { defineMessages, intlShape } from 'react-intl'; -import classnames from 'classnames'; import { Button } from '@meetfranz/forms'; import { gaEvent } from '../../../lib/analytics'; diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js index fc636dd95..70e213912 100644 --- a/src/features/workspaces/components/WorkspacesDashboard.js +++ b/src/features/workspaces/components/WorkspacesDashboard.js @@ -50,7 +50,7 @@ const messages = defineMessages({ }, }); -const styles = theme => ({ +const styles = () => ({ table: { width: '100%', '& td': { @@ -96,8 +96,6 @@ class WorkspacesDashboard extends Component { onCreateWorkspaceSubmit: PropTypes.func.isRequired, onWorkspaceClick: PropTypes.func.isRequired, workspaces: MobxPropTypes.arrayOrObservableArray.isRequired, - isPersonalUser: PropTypes.bool.isRequired, - onUpgradeAccount: PropTypes.func.isRequired, }; static contextTypes = { diff --git a/src/features/workspaces/containers/WorkspacesScreen.js b/src/features/workspaces/containers/WorkspacesScreen.js index 5fbb0c31d..affbd230d 100644 --- a/src/features/workspaces/containers/WorkspacesScreen.js +++ b/src/features/workspaces/containers/WorkspacesScreen.js @@ -10,38 +10,29 @@ import { getUserWorkspacesRequest, updateWorkspaceRequest, } from '../api'; -import UserStore from '../../../stores/UserStore'; @inject('stores', 'actions') @observer class WorkspacesScreen extends Component { static propTypes = { - stores: PropTypes.shape({ - user: PropTypes.instanceOf(UserStore), - }).isRequired, actions: PropTypes.shape({ workspace: PropTypes.shape({ edit: PropTypes.func.isRequired, }), - ui: PropTypes.shape({ - openSettings: PropTypes.func.isRequired, - }), }).isRequired, }; render() { - const { stores, actions } = this.props; + const { actions } = this.props; return ( actions.workspaces.create(data)} onWorkspaceClick={w => actions.workspaces.edit({ workspace: w })} - onUpgradeAccount={() => actions.ui.openSettings({ path: 'user' })} /> ); diff --git a/src/i18n/messages/src/components/settings/team/TeamDashboard.json b/src/i18n/messages/src/components/settings/team/TeamDashboard.json index 6ef3789c4..01d033044 100644 --- a/src/i18n/messages/src/components/settings/team/TeamDashboard.json +++ b/src/i18n/messages/src/components/settings/team/TeamDashboard.json @@ -4,11 +4,11 @@ "defaultMessage": "!!!Team", "file": "src/components/settings/team/TeamDashboard.js", "start": { - "line": 18, + "line": 16, "column": 12 }, "end": { - "line": 21, + "line": 19, "column": 3 } }, @@ -17,11 +17,11 @@ "defaultMessage": "!!!Franz for Teams", "file": "src/components/settings/team/TeamDashboard.js", "start": { - "line": 22, + "line": 20, "column": 19 }, "end": { - "line": 25, + "line": 23, "column": 3 } }, @@ -30,11 +30,11 @@ "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.", "file": "src/components/settings/team/TeamDashboard.js", "start": { - "line": 26, + "line": 24, "column": 9 }, "end": { - "line": 29, + "line": 27, "column": 3 } }, @@ -43,11 +43,11 @@ "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!", "file": "src/components/settings/team/TeamDashboard.js", "start": { - "line": 30, + "line": 28, "column": 8 }, "end": { - "line": 33, + "line": 31, "column": 3 } }, @@ -56,11 +56,11 @@ "defaultMessage": "!!!Manage your Team on meetfranz.com", "file": "src/components/settings/team/TeamDashboard.js", "start": { - "line": 34, + "line": 32, "column": 16 }, "end": { - "line": 37, + "line": 35, "column": 3 } }, @@ -69,11 +69,11 @@ "defaultMessage": "!!!Upgrade your Account", "file": "src/components/settings/team/TeamDashboard.js", "start": { - "line": 38, + "line": 36, "column": 17 }, "end": { - "line": 41, + "line": 39, "column": 3 } } diff --git a/src/i18n/messages/src/components/ui/UpgradeButton/index.json b/src/i18n/messages/src/components/ui/UpgradeButton/index.json index 87e0bc913..28e44cb66 100644 --- a/src/i18n/messages/src/components/ui/UpgradeButton/index.json +++ b/src/i18n/messages/src/components/ui/UpgradeButton/index.json @@ -4,11 +4,11 @@ "defaultMessage": "!!!Upgrade to Franz Professional", "file": "src/components/ui/UpgradeButton/index.js", "start": { - "line": 14, + "line": 13, "column": 16 }, "end": { - "line": 17, + "line": 16, "column": 3 } } -- cgit v1.2.3-70-g09d2 From 2e6902a0ef00a1e07ebabce3a2f61e6efc92c726 Mon Sep 17 00:00:00 2001 From: Stefan Malzner Date: Thu, 5 Sep 2019 12:02:56 +0200 Subject: polish todo preview text --- src/features/todos/components/TodosWebview.js | 4 ++-- src/features/todos/store.js | 1 + src/i18n/locales/en-US.json | 6 +++--- src/i18n/messages/src/features/todos/components/TodosWebview.json | 4 ++-- 4 files changed, 8 insertions(+), 7 deletions(-) (limited to 'src/features') diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js index fa530daed..44c94a3ff 100644 --- a/src/features/todos/components/TodosWebview.js +++ b/src/features/todos/components/TodosWebview.js @@ -17,7 +17,7 @@ const CLOSE_TODOS_BUTTON_SIZE = 35; const messages = defineMessages({ premiumInfo: { id: 'feature.todos.premium.info', - defaultMessage: '!!!The Franz Todos Preview is currently only available for Franz Premium accounts.', + defaultMessage: '!!!Franz Todos are available to premium users now!', }, upgradeCTA: { id: 'feature.todos.premium.upgrade', @@ -25,7 +25,7 @@ const messages = defineMessages({ }, rolloutInfo: { id: 'feature.todos.premium.rollout', - defaultMessage: '!!!Franz Todos will be available to everyone soon.', + defaultMessage: '!!!Everyone else will have to wait a little longer.', }, }); diff --git a/src/features/todos/store.js b/src/features/todos/store.js index 5c6abff4c..4691c90ea 100644 --- a/src/features/todos/store.js +++ b/src/features/todos/store.js @@ -30,6 +30,7 @@ export default class TodoStore extends FeatureStore { } @computed get isTodosPanelVisible() { + console.log('isTodosPanelVisible', 'delayAppState.isDelayAppScreenVisible', delayAppState.isDelayAppScreenVisible); if (delayAppState.isDelayAppScreenVisible) return false; if (this.settings.isTodosPanelVisible === undefined) return DEFAULT_TODOS_VISIBLE; diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json index e09cca7d6..499d94ead 100644 --- a/src/i18n/locales/en-US.json +++ b/src/i18n/locales/en-US.json @@ -17,8 +17,8 @@ "feature.shareFranz.shareText.email": "I've added {count} services to Franz! Get the free app for WhatsApp, Messenger, Slack, Skype and co at www.meetfranz.com", "feature.shareFranz.shareText.twitter": "I've added {count} services to Franz! Get the free app for WhatsApp, Messenger, Slack, Skype and co at www.meetfranz.com /cc @FranzMessenger", "feature.shareFranz.text": "Tell your friends and colleagues how awesome Franz is and help us to spread the word.", - "feature.todos.premium.info": "The Franz Todos Preview is currently only available for Franz Premium accounts.", - "feature.todos.premium.rollout": "Franz Todos will be available to everyone soon.", + "feature.todos.premium.info": "Franz Todos are available to premium users now!", + "feature.todos.premium.rollout": "Everyone else will have to wait a little longer.", "feature.todos.premium.upgrade": "Upgrade Account", "global.api.unhealthy": "Can't connect to Franz online services", "global.franzProRequired": "Franz Professional Required", @@ -378,4 +378,4 @@ "workspaceDrawer.workspaceFeatureInfo": "

Franz Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time.

You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.

", "workspaceDrawer.workspacesSettingsTooltip": "Edit workspaces settings", "workspaces.switchingIndicator.switchingTo": "Switching to" -} \ No newline at end of file +} diff --git a/src/i18n/messages/src/features/todos/components/TodosWebview.json b/src/i18n/messages/src/features/todos/components/TodosWebview.json index 2387112b4..9cc3325d1 100644 --- a/src/i18n/messages/src/features/todos/components/TodosWebview.json +++ b/src/i18n/messages/src/features/todos/components/TodosWebview.json @@ -1,7 +1,7 @@ [ { "id": "feature.todos.premium.info", - "defaultMessage": "!!!The Franz Todos Preview is currently only available for Franz Premium accounts.", + "defaultMessage": "!!!Franz Todos are available to premium users now!", "file": "src/features/todos/components/TodosWebview.js", "start": { "line": 18, @@ -27,7 +27,7 @@ }, { "id": "feature.todos.premium.rollout", - "defaultMessage": "!!!Franz Todos will be available to everyone soon.", + "defaultMessage": "!!!Everyone else will have to wait a little longer.", "file": "src/features/todos/components/TodosWebview.js", "start": { "line": 26, -- cgit v1.2.3-70-g09d2 From f42ef7dc88323cd8f5af20a83fb8534aa78804b9 Mon Sep 17 00:00:00 2001 From: Stefan Malzner Date: Thu, 5 Sep 2019 12:06:53 +0200 Subject: remove console logs --- src/features/delayApp/Component.js | 1 - src/features/todos/store.js | 1 - 2 files changed, 2 deletions(-) (limited to 'src/features') diff --git a/src/features/delayApp/Component.js b/src/features/delayApp/Component.js index de5653f04..6344edb89 100644 --- a/src/features/delayApp/Component.js +++ b/src/features/delayApp/Component.js @@ -77,7 +77,6 @@ export default @inject('stores', 'actions') @injectSheet(styles) @observer class const { defaultTrialPlan } = stores.features.features; if (!hadSubscription) { - console.log('directly activate trial'); actions.user.activateTrial({ planId: defaultTrialPlan }); gaEvent('DelayApp', 'subscribe_click', 'Delay App Feature'); diff --git a/src/features/todos/store.js b/src/features/todos/store.js index 4691c90ea..5c6abff4c 100644 --- a/src/features/todos/store.js +++ b/src/features/todos/store.js @@ -30,7 +30,6 @@ export default class TodoStore extends FeatureStore { } @computed get isTodosPanelVisible() { - console.log('isTodosPanelVisible', 'delayAppState.isDelayAppScreenVisible', delayAppState.isDelayAppScreenVisible); if (delayAppState.isDelayAppScreenVisible) return false; if (this.settings.isTodosPanelVisible === undefined) return DEFAULT_TODOS_VISIBLE; -- cgit v1.2.3-70-g09d2