diff options
author | Vijay A <avijayr@protonmail.com> | 2021-07-17 20:32:22 +0530 |
---|---|---|
committer | Vijay Raghavan Aravamudhan <vraravam@users.noreply.github.com> | 2021-07-20 16:02:15 +0000 |
commit | 45373f655f68fdd0b320cde175b6108454ad4731 (patch) | |
tree | c1ccb0c73639d754b68a36a1977b74471fe4b566 /src/features/workspaces/components | |
parent | New Crowdin updates (#1668) (diff) | |
download | ferdium-app-45373f655f68fdd0b320cde175b6108454ad4731.tar.gz ferdium-app-45373f655f68fdd0b320cde175b6108454ad4731.tar.zst ferdium-app-45373f655f68fdd0b320cde175b6108454ad4731.zip |
Removed Franz paid plans features:
- serviceLimit
- planSelection
- trialStatusBar
and other Franz features that were for different tiers of subscription.
Diffstat (limited to 'src/features/workspaces/components')
-rw-r--r-- | src/features/workspaces/components/WorkspaceDrawer.js | 141 | ||||
-rw-r--r-- | src/features/workspaces/components/WorkspacesDashboard.js | 129 |
2 files changed, 84 insertions, 186 deletions
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js index bf7016e2f..3ddc9cf16 100644 --- a/src/features/workspaces/components/WorkspaceDrawer.js +++ b/src/features/workspaces/components/WorkspaceDrawer.js | |||
@@ -2,12 +2,11 @@ import React, { Component } from 'react'; | |||
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
4 | import injectSheet from 'react-jss'; | 4 | import injectSheet from 'react-jss'; |
5 | import { defineMessages, FormattedHTMLMessage, intlShape } from 'react-intl'; | 5 | import { defineMessages, intlShape } from 'react-intl'; |
6 | import { H1, Icon, ProBadge } from '@meetfranz/ui'; | 6 | import { H1, Icon } from '@meetfranz/ui'; |
7 | import { Button } from '@meetfranz/forms/lib'; | ||
8 | import ReactTooltip from 'react-tooltip'; | 7 | import ReactTooltip from 'react-tooltip'; |
9 | 8 | ||
10 | import { mdiPlusBox, mdiSettings, mdiStar } from '@mdi/js'; | 9 | import { mdiPlusBox, mdiSettings } from '@mdi/js'; |
11 | import WorkspaceDrawerItem from './WorkspaceDrawerItem'; | 10 | import WorkspaceDrawerItem from './WorkspaceDrawerItem'; |
12 | import { workspaceActions } from '../actions'; | 11 | import { workspaceActions } from '../actions'; |
13 | import { workspaceStore } from '../index'; | 12 | import { workspaceStore } from '../index'; |
@@ -29,22 +28,10 @@ const messages = defineMessages({ | |||
29 | id: 'workspaceDrawer.workspaceFeatureInfo', | 28 | id: 'workspaceDrawer.workspaceFeatureInfo', |
30 | defaultMessage: '!!!Info about workspace feature', | 29 | defaultMessage: '!!!Info about workspace feature', |
31 | }, | 30 | }, |
32 | premiumCtaButtonLabel: { | ||
33 | id: 'workspaceDrawer.premiumCtaButtonLabel', | ||
34 | defaultMessage: '!!!Create your first workspace', | ||
35 | }, | ||
36 | reactivatePremiumAccount: { | ||
37 | id: 'workspaceDrawer.reactivatePremiumAccountLabel', | ||
38 | defaultMessage: '!!!Reactivate premium account', | ||
39 | }, | ||
40 | addNewWorkspaceLabel: { | 31 | addNewWorkspaceLabel: { |
41 | id: 'workspaceDrawer.addNewWorkspaceLabel', | 32 | id: 'workspaceDrawer.addNewWorkspaceLabel', |
42 | defaultMessage: '!!!add new workspace', | 33 | defaultMessage: '!!!add new workspace', |
43 | }, | 34 | }, |
44 | premiumFeatureBadge: { | ||
45 | id: 'workspaceDrawer.proFeatureBadge', | ||
46 | defaultMessage: '!!!Premium feature', | ||
47 | }, | ||
48 | }); | 35 | }); |
49 | 36 | ||
50 | const styles = theme => ({ | 37 | const styles = theme => ({ |
@@ -60,9 +47,6 @@ const styles = theme => ({ | |||
60 | marginBottom: '25px', | 47 | marginBottom: '25px', |
61 | marginLeft: theme.workspaces.drawer.padding, | 48 | marginLeft: theme.workspaces.drawer.padding, |
62 | }, | 49 | }, |
63 | headlineProBadge: { | ||
64 | marginRight: 15, | ||
65 | }, | ||
66 | workspacesSettingsButton: { | 50 | workspacesSettingsButton: { |
67 | float: 'right', | 51 | float: 'right', |
68 | marginRight: theme.workspaces.drawer.padding, | 52 | marginRight: theme.workspaces.drawer.padding, |
@@ -78,16 +62,6 @@ const styles = theme => ({ | |||
78 | height: 'auto', | 62 | height: 'auto', |
79 | overflowY: 'auto', | 63 | overflowY: 'auto', |
80 | }, | 64 | }, |
81 | premiumAnnouncement: { | ||
82 | padding: '20px', | ||
83 | paddingTop: '0', | ||
84 | height: 'auto', | ||
85 | }, | ||
86 | premiumCtaButton: { | ||
87 | marginTop: '20px', | ||
88 | width: '100%', | ||
89 | color: 'white !important', | ||
90 | }, | ||
91 | addNewWorkspaceLabel: { | 65 | addNewWorkspaceLabel: { |
92 | height: 'auto', | 66 | height: 'auto', |
93 | color: theme.workspaces.drawer.buttons.color, | 67 | color: theme.workspaces.drawer.buttons.color, |
@@ -116,7 +90,6 @@ class WorkspaceDrawer extends Component { | |||
116 | static propTypes = { | 90 | static propTypes = { |
117 | classes: PropTypes.object.isRequired, | 91 | classes: PropTypes.object.isRequired, |
118 | getServicesForWorkspace: PropTypes.func.isRequired, | 92 | getServicesForWorkspace: PropTypes.func.isRequired, |
119 | onUpgradeAccountClick: PropTypes.func.isRequired, | ||
120 | }; | 93 | }; |
121 | 94 | ||
122 | static contextTypes = { | 95 | static contextTypes = { |
@@ -131,7 +104,6 @@ class WorkspaceDrawer extends Component { | |||
131 | const { | 104 | const { |
132 | classes, | 105 | classes, |
133 | getServicesForWorkspace, | 106 | getServicesForWorkspace, |
134 | onUpgradeAccountClick, | ||
135 | } = this.props; | 107 | } = this.props; |
136 | const { intl } = this.context; | 108 | const { intl } = this.context; |
137 | const { | 109 | const { |
@@ -144,14 +116,6 @@ class WorkspaceDrawer extends Component { | |||
144 | return ( | 116 | return ( |
145 | <div className={`${classes.drawer} workspaces-drawer`}> | 117 | <div className={`${classes.drawer} workspaces-drawer`}> |
146 | <H1 className={classes.headline}> | 118 | <H1 className={classes.headline}> |
147 | {workspaceStore.isPremiumUpgradeRequired && ( | ||
148 | <span | ||
149 | className={classes.headlineProBadge} | ||
150 | data-tip={`${intl.formatMessage(messages.premiumFeatureBadge)}`} | ||
151 | > | ||
152 | <ProBadge /> | ||
153 | </span> | ||
154 | )} | ||
155 | {intl.formatMessage(messages.headline)} | 119 | {intl.formatMessage(messages.headline)} |
156 | <span | 120 | <span |
157 | className={classes.workspacesSettingsButton} | 121 | className={classes.workspacesSettingsButton} |
@@ -167,75 +131,48 @@ class WorkspaceDrawer extends Component { | |||
167 | /> | 131 | /> |
168 | </span> | 132 | </span> |
169 | </H1> | 133 | </H1> |
170 | {workspaceStore.isPremiumUpgradeRequired ? ( | 134 | <div className={classes.workspaces}> |
171 | <div className={classes.premiumAnnouncement}> | 135 | <WorkspaceDrawerItem |
172 | <FormattedHTMLMessage {...messages.workspaceFeatureInfo} /> | 136 | name={intl.formatMessage(messages.allServices)} |
173 | {workspaceStore.userHasWorkspaces ? ( | 137 | onClick={() => { |
174 | <Button | 138 | workspaceActions.deactivate(); |
175 | className={classes.premiumCtaButton} | 139 | workspaceActions.toggleWorkspaceDrawer(); |
176 | buttonType="primary" | 140 | }} |
177 | label={intl.formatMessage(messages.reactivatePremiumAccount)} | 141 | services={getServicesForWorkspace(null)} |
178 | icon={mdiStar} | 142 | isActive={actualWorkspace == null} |
179 | onClick={() => { | 143 | shortcutIndex={0} |
180 | onUpgradeAccountClick(); | 144 | /> |
181 | }} | 145 | {workspaces.map((workspace, index) => ( |
182 | /> | ||
183 | ) : ( | ||
184 | <Button | ||
185 | className={classes.premiumCtaButton} | ||
186 | buttonType="primary" | ||
187 | label={intl.formatMessage(messages.premiumCtaButtonLabel)} | ||
188 | icon={mdiPlusBox} | ||
189 | onClick={() => { | ||
190 | workspaceActions.openWorkspaceSettings(); | ||
191 | }} | ||
192 | /> | ||
193 | )} | ||
194 | </div> | ||
195 | ) : ( | ||
196 | <div className={classes.workspaces}> | ||
197 | <WorkspaceDrawerItem | 146 | <WorkspaceDrawerItem |
198 | name={intl.formatMessage(messages.allServices)} | 147 | key={workspace.id} |
148 | name={workspace.name} | ||
149 | isActive={actualWorkspace === workspace} | ||
199 | onClick={() => { | 150 | onClick={() => { |
200 | workspaceActions.deactivate(); | 151 | if (actualWorkspace === workspace) return; |
152 | workspaceActions.activate({ workspace }); | ||
201 | workspaceActions.toggleWorkspaceDrawer(); | 153 | workspaceActions.toggleWorkspaceDrawer(); |
202 | }} | 154 | }} |
203 | services={getServicesForWorkspace(null)} | 155 | onContextMenuEditClick={() => workspaceActions.edit({ workspace })} |
204 | isActive={actualWorkspace == null} | 156 | services={getServicesForWorkspace(workspace)} |
205 | shortcutIndex={0} | 157 | shortcutIndex={index + 1} |
206 | /> | 158 | /> |
207 | {workspaces.map((workspace, index) => ( | 159 | ))} |
208 | <WorkspaceDrawerItem | 160 | <div |
209 | key={workspace.id} | 161 | className={classes.addNewWorkspaceLabel} |
210 | name={workspace.name} | 162 | onClick={() => { |
211 | isActive={actualWorkspace === workspace} | 163 | workspaceActions.openWorkspaceSettings(); |
212 | onClick={() => { | 164 | }} |
213 | if (actualWorkspace === workspace) return; | 165 | > |
214 | workspaceActions.activate({ workspace }); | 166 | <Icon |
215 | workspaceActions.toggleWorkspaceDrawer(); | 167 | icon={mdiPlusBox} |
216 | }} | 168 | size={1} |
217 | onContextMenuEditClick={() => workspaceActions.edit({ workspace })} | 169 | className={classes.workspacesSettingsButtonIcon} |
218 | services={getServicesForWorkspace(workspace)} | 170 | /> |
219 | shortcutIndex={index + 1} | 171 | <span> |
220 | /> | 172 | {intl.formatMessage(messages.addNewWorkspaceLabel)} |
221 | ))} | 173 | </span> |
222 | <div | ||
223 | className={classes.addNewWorkspaceLabel} | ||
224 | onClick={() => { | ||
225 | workspaceActions.openWorkspaceSettings(); | ||
226 | }} | ||
227 | > | ||
228 | <Icon | ||
229 | icon={mdiPlusBox} | ||
230 | size={1} | ||
231 | className={classes.workspacesSettingsButtonIcon} | ||
232 | /> | ||
233 | <span> | ||
234 | {intl.formatMessage(messages.addNewWorkspaceLabel)} | ||
235 | </span> | ||
236 | </div> | ||
237 | </div> | 174 | </div> |
238 | )} | 175 | </div> |
239 | <ReactTooltip place="right" type="dark" effect="solid" /> | 176 | <ReactTooltip place="right" type="dark" effect="solid" /> |
240 | </div> | 177 | </div> |
241 | ); | 178 | ); |
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js index cfaacd56e..0c2588c42 100644 --- a/src/features/workspaces/components/WorkspacesDashboard.js +++ b/src/features/workspaces/components/WorkspacesDashboard.js | |||
@@ -1,9 +1,9 @@ | |||
1 | import React, { Component, Fragment } from 'react'; | 1 | import React, { Component } from 'react'; |
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react'; | 3 | import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react'; |
4 | import { defineMessages, intlShape } from 'react-intl'; | 4 | import { defineMessages, intlShape } from 'react-intl'; |
5 | import injectSheet from 'react-jss'; | 5 | import injectSheet from 'react-jss'; |
6 | import { Infobox, Badge } from '@meetfranz/ui'; | 6 | import { Infobox } from '@meetfranz/ui'; |
7 | 7 | ||
8 | import { mdiCheckboxMarkedCircleOutline } from '@mdi/js'; | 8 | import { mdiCheckboxMarkedCircleOutline } from '@mdi/js'; |
9 | import Loader from '../../../components/ui/Loader'; | 9 | import Loader from '../../../components/ui/Loader'; |
@@ -11,10 +11,7 @@ import WorkspaceItem from './WorkspaceItem'; | |||
11 | import CreateWorkspaceForm from './CreateWorkspaceForm'; | 11 | import CreateWorkspaceForm from './CreateWorkspaceForm'; |
12 | import Request from '../../../stores/lib/Request'; | 12 | import Request from '../../../stores/lib/Request'; |
13 | import Appear from '../../../components/ui/effects/Appear'; | 13 | import Appear from '../../../components/ui/effects/Appear'; |
14 | import { workspaceStore } from '../index'; | ||
15 | import UIStore from '../../../stores/UIStore'; | 14 | import UIStore from '../../../stores/UIStore'; |
16 | import globalMessages from '../../../i18n/globalMessages'; | ||
17 | import UpgradeButton from '../../../components/ui/UpgradeButton'; | ||
18 | 15 | ||
19 | const messages = defineMessages({ | 16 | const messages = defineMessages({ |
20 | headline: { | 17 | headline: { |
@@ -64,12 +61,6 @@ const styles = () => ({ | |||
64 | appear: { | 61 | appear: { |
65 | height: 'auto', | 62 | height: 'auto', |
66 | }, | 63 | }, |
67 | premiumAnnouncement: { | ||
68 | height: 'auto', | ||
69 | }, | ||
70 | premiumAnnouncementContainer: { | ||
71 | display: 'flex', | ||
72 | }, | ||
73 | announcementHeadline: { | 64 | announcementHeadline: { |
74 | marginBottom: 0, | 65 | marginBottom: 0, |
75 | }, | 66 | }, |
@@ -78,12 +69,6 @@ const styles = () => ({ | |||
78 | margin: [-8, 0, 0, 20], | 69 | margin: [-8, 0, 0, 20], |
79 | alignSelf: 'center', | 70 | alignSelf: 'center', |
80 | }, | 71 | }, |
81 | upgradeCTA: { | ||
82 | margin: [40, 'auto'], | ||
83 | }, | ||
84 | proRequired: { | ||
85 | margin: [10, 0, 40], | ||
86 | }, | ||
87 | }); | 72 | }); |
88 | 73 | ||
89 | @inject('stores') @injectSheet(styles) @observer | 74 | @inject('stores') @injectSheet(styles) @observer |
@@ -152,77 +137,53 @@ class WorkspacesDashboard extends Component { | |||
152 | </Appear> | 137 | </Appear> |
153 | )} | 138 | )} |
154 | 139 | ||
155 | {workspaceStore.isPremiumUpgradeRequired && ( | 140 | {/* ===== Create workspace form ===== */} |
156 | <div className={classes.premiumAnnouncement}> | 141 | <div className={classes.createForm}> |
157 | 142 | <CreateWorkspaceForm | |
158 | <h1 className={classes.announcementHeadline}>{intl.formatMessage(messages.workspaceFeatureHeadline)}</h1> | 143 | isSubmitting={createWorkspaceRequest.isExecuting} |
159 | <Badge className={classes.proRequired}>{intl.formatMessage(globalMessages.proRequired)}</Badge> | 144 | onSubmit={onCreateWorkspaceSubmit} |
160 | <div className={classes.premiumAnnouncementContainer}> | 145 | /> |
161 | <div className={classes.premiumAnnouncementContent}> | 146 | </div> |
162 | <p>{intl.formatMessage(messages.workspaceFeatureInfo)}</p> | 147 | {getUserWorkspacesRequest.isExecuting ? ( |
163 | <UpgradeButton | 148 | <Loader /> |
164 | className={classes.upgradeCTA} | 149 | ) : ( |
165 | gaEventInfo={{ category: 'Workspaces', event: 'upgrade' }} | ||
166 | short | ||
167 | requiresPro | ||
168 | /> | ||
169 | </div> | ||
170 | <img src={`https://cdn.franzinfra.com/announcements/assets/workspaces_${this.props.stores.ui.isDarkThemeActive ? 'dark' : 'light'}.png`} className={classes.teaserImage} alt="" /> | ||
171 | </div> | ||
172 | </div> | ||
173 | )} | ||
174 | |||
175 | {!workspaceStore.isPremiumUpgradeRequired && ( | ||
176 | <> | 150 | <> |
177 | {/* ===== Create workspace form ===== */} | 151 | {/* ===== Workspace could not be loaded error ===== */} |
178 | <div className={classes.createForm}> | 152 | {getUserWorkspacesRequest.error ? ( |
179 | <CreateWorkspaceForm | 153 | <Infobox |
180 | isSubmitting={createWorkspaceRequest.isExecuting} | 154 | icon="alert" |
181 | onSubmit={onCreateWorkspaceSubmit} | 155 | type="danger" |
182 | /> | 156 | ctaLabel={intl.formatMessage(messages.tryReloadWorkspaces)} |
183 | </div> | 157 | ctaLoading={getUserWorkspacesRequest.isExecuting} |
184 | {getUserWorkspacesRequest.isExecuting ? ( | 158 | ctaOnClick={getUserWorkspacesRequest.retry} |
185 | <Loader /> | 159 | > |
160 | {intl.formatMessage(messages.workspacesRequestFailed)} | ||
161 | </Infobox> | ||
186 | ) : ( | 162 | ) : ( |
187 | <> | 163 | <> |
188 | {/* ===== Workspace could not be loaded error ===== */} | 164 | {workspaces.length === 0 ? ( |
189 | {getUserWorkspacesRequest.error ? ( | 165 | <div className="align-middle settings__empty-state"> |
190 | <Infobox | 166 | {/* ===== Workspaces empty state ===== */} |
191 | icon="alert" | 167 | <p className="settings__empty-text"> |
192 | type="danger" | 168 | <span className="emoji"> |
193 | ctaLabel={intl.formatMessage(messages.tryReloadWorkspaces)} | 169 | <img src="./assets/images/emoji/sad.png" alt="" /> |
194 | ctaLoading={getUserWorkspacesRequest.isExecuting} | 170 | </span> |
195 | ctaOnClick={getUserWorkspacesRequest.retry} | 171 | {intl.formatMessage(messages.noServicesAdded)} |
196 | > | 172 | </p> |
197 | {intl.formatMessage(messages.workspacesRequestFailed)} | 173 | </div> |
198 | </Infobox> | ||
199 | ) : ( | 174 | ) : ( |
200 | <> | 175 | <table className={classes.table}> |
201 | {workspaces.length === 0 ? ( | 176 | {/* ===== Workspaces list ===== */} |
202 | <div className="align-middle settings__empty-state"> | 177 | <tbody> |
203 | {/* ===== Workspaces empty state ===== */} | 178 | {workspaces.map(workspace => ( |
204 | <p className="settings__empty-text"> | 179 | <WorkspaceItem |
205 | <span className="emoji"> | 180 | key={workspace.id} |
206 | <img src="./assets/images/emoji/sad.png" alt="" /> | 181 | workspace={workspace} |
207 | </span> | 182 | onItemClick={w => onWorkspaceClick(w)} |
208 | {intl.formatMessage(messages.noServicesAdded)} | 183 | /> |
209 | </p> | 184 | ))} |
210 | </div> | 185 | </tbody> |
211 | ) : ( | 186 | </table> |
212 | <table className={classes.table}> | ||
213 | {/* ===== Workspaces list ===== */} | ||
214 | <tbody> | ||
215 | {workspaces.map(workspace => ( | ||
216 | <WorkspaceItem | ||
217 | key={workspace.id} | ||
218 | workspace={workspace} | ||
219 | onItemClick={w => onWorkspaceClick(w)} | ||
220 | /> | ||
221 | ))} | ||
222 | </tbody> | ||
223 | </table> | ||
224 | )} | ||
225 | </> | ||
226 | )} | 187 | )} |
227 | </> | 188 | </> |
228 | )} | 189 | )} |