diff options
Diffstat (limited to 'src/features/workspaces/components/WorkspacesDashboard.js')
-rw-r--r-- | src/features/workspaces/components/WorkspacesDashboard.js | 42 |
1 files changed, 34 insertions, 8 deletions
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js index 52c3afdcf..1fad1f71d 100644 --- a/src/features/workspaces/components/WorkspacesDashboard.js +++ b/src/features/workspaces/components/WorkspacesDashboard.js | |||
@@ -10,6 +10,8 @@ import WorkspaceItem from './WorkspaceItem'; | |||
10 | import CreateWorkspaceForm from './CreateWorkspaceForm'; | 10 | import CreateWorkspaceForm from './CreateWorkspaceForm'; |
11 | import Request from '../../../stores/lib/Request'; | 11 | import Request from '../../../stores/lib/Request'; |
12 | import Appear from '../../../components/ui/effects/Appear'; | 12 | import Appear from '../../../components/ui/effects/Appear'; |
13 | import { workspaceStore } from '../index'; | ||
14 | import PremiumFeatureContainer from '../../../components/ui/PremiumFeatureContainer'; | ||
13 | 15 | ||
14 | const messages = defineMessages({ | 16 | const messages = defineMessages({ |
15 | headline: { | 17 | headline: { |
@@ -36,6 +38,14 @@ const messages = defineMessages({ | |||
36 | id: 'settings.workspaces.deletedInfo', | 38 | id: 'settings.workspaces.deletedInfo', |
37 | defaultMessage: '!!!Workspace has been deleted', | 39 | defaultMessage: '!!!Workspace has been deleted', |
38 | }, | 40 | }, |
41 | workspaceFeatureInfo: { | ||
42 | id: 'settings.workspaces.workspaceFeatureInfo', | ||
43 | defaultMessage: '!!!Info about workspace feature', | ||
44 | }, | ||
45 | workspaceFeatureHeadline: { | ||
46 | id: 'settings.workspaces.workspaceFeatureHeadline', | ||
47 | defaultMessage: '!!!Less is More: Introducing Franz Workspaces', | ||
48 | }, | ||
39 | }); | 49 | }); |
40 | 50 | ||
41 | const styles = () => ({ | 51 | const styles = () => ({ |
@@ -46,6 +56,12 @@ const styles = () => ({ | |||
46 | appear: { | 56 | appear: { |
47 | height: 'auto', | 57 | height: 'auto', |
48 | }, | 58 | }, |
59 | premiumAnnouncement: { | ||
60 | padding: '20px', | ||
61 | backgroundColor: '#3498db', | ||
62 | marginLeft: '-20px', | ||
63 | height: 'auto', | ||
64 | }, | ||
49 | }); | 65 | }); |
50 | 66 | ||
51 | @injectSheet(styles) @observer | 67 | @injectSheet(styles) @observer |
@@ -112,14 +128,24 @@ class WorkspacesDashboard extends Component { | |||
112 | </Appear> | 128 | </Appear> |
113 | )} | 129 | )} |
114 | 130 | ||
115 | {/* ===== Create workspace form ===== */} | 131 | <PremiumFeatureContainer |
116 | <div className={classes.createForm}> | 132 | condition={workspaceStore.isPremiumFeature} |
117 | <CreateWorkspaceForm | 133 | gaEventInfo={{ category: 'User', event: 'upgrade', label: 'workspaces' }} |
118 | isSubmitting={createWorkspaceRequest.isExecuting} | 134 | > |
119 | onSubmit={onCreateWorkspaceSubmit} | 135 | {/* ===== Create workspace form ===== */} |
120 | /> | 136 | <div className={classes.createForm}> |
121 | </div> | 137 | <CreateWorkspaceForm |
122 | 138 | isSubmitting={createWorkspaceRequest.isExecuting} | |
139 | onSubmit={onCreateWorkspaceSubmit} | ||
140 | /> | ||
141 | </div> | ||
142 | </PremiumFeatureContainer> | ||
143 | {workspaceStore.isUpgradeToPremiumRequired && ( | ||
144 | <div className={classes.premiumAnnouncement}> | ||
145 | <h2>{intl.formatMessage(messages.workspaceFeatureHeadline)}</h2> | ||
146 | <p>{intl.formatMessage(messages.workspaceFeatureInfo)}</p> | ||
147 | </div> | ||
148 | )} | ||
123 | {getUserWorkspacesRequest.isExecuting ? ( | 149 | {getUserWorkspacesRequest.isExecuting ? ( |
124 | <Loader /> | 150 | <Loader /> |
125 | ) : ( | 151 | ) : ( |