diff options
Diffstat (limited to 'src/components/ui')
-rw-r--r-- | src/components/ui/ActivateTrialButton/index.js | 107 | ||||
-rw-r--r-- | src/components/ui/AppLoader/index.js | 2 | ||||
-rw-r--r-- | src/components/ui/AppLoader/styles.js | 8 | ||||
-rw-r--r-- | src/components/ui/FeatureItem.js | 2 | ||||
-rw-r--r-- | src/components/ui/FeatureList.js | 83 | ||||
-rw-r--r-- | src/components/ui/ImageUpload.js | 7 | ||||
-rw-r--r-- | src/components/ui/Link.js | 2 | ||||
-rw-r--r-- | src/components/ui/Modal/styles.js | 2 | ||||
-rw-r--r-- | src/components/ui/PremiumFeatureContainer/index.js | 101 | ||||
-rw-r--r-- | src/components/ui/PremiumFeatureContainer/styles.js | 34 | ||||
-rw-r--r-- | src/components/ui/Radio.js | 2 | ||||
-rw-r--r-- | src/components/ui/SearchInput.js | 2 | ||||
-rw-r--r-- | src/components/ui/Select.js | 4 | ||||
-rw-r--r-- | src/components/ui/ServiceIcon.js | 2 | ||||
-rw-r--r-- | src/components/ui/Slider.js | 2 | ||||
-rw-r--r-- | src/components/ui/Tabs/TabItem.js | 8 | ||||
-rw-r--r-- | src/components/ui/Tabs/Tabs.js | 2 | ||||
-rw-r--r-- | src/components/ui/Toggle.js | 2 | ||||
-rw-r--r-- | src/components/ui/ToggleRaw.js | 2 | ||||
-rw-r--r-- | src/components/ui/UpgradeButton/index.js | 83 | ||||
-rw-r--r-- | src/components/ui/WebviewLoader/styles.js | 2 |
21 files changed, 44 insertions, 415 deletions
diff --git a/src/components/ui/ActivateTrialButton/index.js b/src/components/ui/ActivateTrialButton/index.js deleted file mode 100644 index 8f4d21f64..000000000 --- a/src/components/ui/ActivateTrialButton/index.js +++ /dev/null | |||
@@ -1,107 +0,0 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { inject, observer } from 'mobx-react'; | ||
4 | import { defineMessages, intlShape } from 'react-intl'; | ||
5 | import classnames from 'classnames'; | ||
6 | |||
7 | import { Button } from '@meetfranz/forms'; | ||
8 | |||
9 | import UserStore from '../../../stores/UserStore'; | ||
10 | import UIStore from '../../../stores/UIStore'; | ||
11 | |||
12 | const messages = defineMessages({ | ||
13 | action: { | ||
14 | id: 'feature.delayApp.upgrade.action', | ||
15 | defaultMessage: '!!!Get a Franz Supporter License', | ||
16 | }, | ||
17 | actionTrial: { | ||
18 | id: 'feature.delayApp.trial.action', | ||
19 | defaultMessage: '!!!Yes, I want the free 14 day trial of Franz Professional', | ||
20 | }, | ||
21 | shortAction: { | ||
22 | id: 'feature.delayApp.upgrade.actionShort', | ||
23 | defaultMessage: '!!!Upgrade account', | ||
24 | }, | ||
25 | shortActionTrial: { | ||
26 | id: 'feature.delayApp.trial.actionShort', | ||
27 | defaultMessage: '!!!Activate the free Franz Professional trial', | ||
28 | }, | ||
29 | noStringsAttachedHeadline: { | ||
30 | id: 'pricing.trial.terms.headline', | ||
31 | defaultMessage: '!!!No strings attached', | ||
32 | }, | ||
33 | noCreditCard: { | ||
34 | id: 'pricing.trial.terms.noCreditCard', | ||
35 | defaultMessage: '!!!No credit card required', | ||
36 | }, | ||
37 | automaticTrialEnd: { | ||
38 | id: 'pricing.trial.terms.automaticTrialEnd', | ||
39 | defaultMessage: '!!!Your free trial ends automatically after 14 days', | ||
40 | }, | ||
41 | }); | ||
42 | |||
43 | @inject('stores', 'actions') @observer | ||
44 | class ActivateTrialButton extends Component { | ||
45 | static propTypes = { | ||
46 | className: PropTypes.string, | ||
47 | short: PropTypes.bool, | ||
48 | gaEventInfo: PropTypes.shape({ | ||
49 | category: PropTypes.string.isRequired, | ||
50 | event: PropTypes.string.isRequired, | ||
51 | label: PropTypes.string, | ||
52 | }), | ||
53 | }; | ||
54 | |||
55 | static defaultProps = { | ||
56 | className: '', | ||
57 | short: false, | ||
58 | gaEventInfo: null, | ||
59 | } | ||
60 | |||
61 | static contextTypes = { | ||
62 | intl: intlShape, | ||
63 | }; | ||
64 | |||
65 | handleCTAClick() { | ||
66 | const { actions } = this.props; | ||
67 | |||
68 | actions.ui.openSettings({ path: 'user' }); | ||
69 | } | ||
70 | |||
71 | render() { | ||
72 | const { stores, className, short } = this.props; | ||
73 | const { intl } = this.context; | ||
74 | |||
75 | const { hadSubscription } = stores.user.data; | ||
76 | |||
77 | let label; | ||
78 | if (hadSubscription) { | ||
79 | label = short ? messages.shortAction : messages.action; | ||
80 | } else { | ||
81 | label = short ? messages.shortActionTrial : messages.actionTrial; | ||
82 | } | ||
83 | |||
84 | return ( | ||
85 | <Button | ||
86 | label={intl.formatMessage(label)} | ||
87 | className={classnames({ | ||
88 | [className]: className, | ||
89 | })} | ||
90 | buttonType="inverted" | ||
91 | onClick={this.handleCTAClick.bind(this)} | ||
92 | busy={stores.user.activateTrialRequest.isExecuting} | ||
93 | /> | ||
94 | ); | ||
95 | } | ||
96 | } | ||
97 | |||
98 | export default ActivateTrialButton; | ||
99 | |||
100 | ActivateTrialButton.wrappedComponent.propTypes = { | ||
101 | stores: PropTypes.shape({ | ||
102 | user: PropTypes.instanceOf(UserStore).isRequired, | ||
103 | }).isRequired, | ||
104 | actions: PropTypes.shape({ | ||
105 | ui: PropTypes.instanceOf(UIStore).isRequired, | ||
106 | }).isRequired, | ||
107 | }; | ||
diff --git a/src/components/ui/AppLoader/index.js b/src/components/ui/AppLoader/index.js index a7f6f4545..31d7ca249 100644 --- a/src/components/ui/AppLoader/index.js +++ b/src/components/ui/AppLoader/index.js | |||
@@ -37,7 +37,7 @@ export default @injectSheet(styles) @withTheme class AppLoader extends Component | |||
37 | 37 | ||
38 | componentDidMount() { | 38 | componentDidMount() { |
39 | this.interval = setInterval(() => { | 39 | this.interval = setInterval(() => { |
40 | this.setState(prevState => ({ | 40 | this.setState((prevState) => ({ |
41 | step: prevState.step === textList.length - 1 ? 0 : prevState.step + 1, | 41 | step: prevState.step === textList.length - 1 ? 0 : prevState.step + 1, |
42 | })); | 42 | })); |
43 | }, 2500); | 43 | }, 2500); |
diff --git a/src/components/ui/AppLoader/styles.js b/src/components/ui/AppLoader/styles.js index 755a56b40..9891e0387 100644 --- a/src/components/ui/AppLoader/styles.js +++ b/src/components/ui/AppLoader/styles.js | |||
@@ -1,3 +1,9 @@ | |||
1 | let sloganTransition = 'none'; | ||
2 | |||
3 | if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) { | ||
4 | sloganTransition = 'opacity 1s ease'; | ||
5 | } | ||
6 | |||
1 | export default { | 7 | export default { |
2 | component: { | 8 | component: { |
3 | color: '#FFF', | 9 | color: '#FFF', |
@@ -5,7 +11,7 @@ export default { | |||
5 | slogan: { | 11 | slogan: { |
6 | display: 'block', | 12 | display: 'block', |
7 | opacity: 0, | 13 | opacity: 0, |
8 | transition: 'opacity 1s ease', | 14 | transition: sloganTransition, |
9 | position: 'absolute', | 15 | position: 'absolute', |
10 | textAlign: 'center', | 16 | textAlign: 'center', |
11 | width: '100%', | 17 | width: '100%', |
diff --git a/src/components/ui/FeatureItem.js b/src/components/ui/FeatureItem.js index 4926df470..646cf56ca 100644 --- a/src/components/ui/FeatureItem.js +++ b/src/components/ui/FeatureItem.js | |||
@@ -4,7 +4,7 @@ import { Icon } from '@meetfranz/ui'; | |||
4 | import classnames from 'classnames'; | 4 | import classnames from 'classnames'; |
5 | import { mdiCheckCircle } from '@mdi/js'; | 5 | import { mdiCheckCircle } from '@mdi/js'; |
6 | 6 | ||
7 | const styles = theme => ({ | 7 | const styles = (theme) => ({ |
8 | featureItem: { | 8 | featureItem: { |
9 | borderBottom: [1, 'solid', theme.defaultContentBorder], | 9 | borderBottom: [1, 'solid', theme.defaultContentBorder], |
10 | padding: [8, 0], | 10 | padding: [8, 0], |
diff --git a/src/components/ui/FeatureList.js b/src/components/ui/FeatureList.js index 72c799819..cf2664830 100644 --- a/src/components/ui/FeatureList.js +++ b/src/components/ui/FeatureList.js | |||
@@ -3,12 +3,11 @@ import PropTypes from 'prop-types'; | |||
3 | import { defineMessages, intlShape } from 'react-intl'; | 3 | import { defineMessages, intlShape } from 'react-intl'; |
4 | 4 | ||
5 | import { FeatureItem } from './FeatureItem'; | 5 | import { FeatureItem } from './FeatureItem'; |
6 | import { PLANS } from '../../config'; | ||
7 | 6 | ||
8 | const messages = defineMessages({ | 7 | const messages = defineMessages({ |
9 | availableRecipes: { | 8 | availableRecipes: { |
10 | id: 'pricing.features.recipes', | 9 | id: 'pricing.features.recipes', |
11 | defaultMessage: '!!!Choose from more than 70 Services', | 10 | defaultMessage: '!!!Choose from more than 70 Services', // TODO: Make this dynamic |
12 | }, | 11 | }, |
13 | accountSync: { | 12 | accountSync: { |
14 | id: 'pricing.features.accountSync', | 13 | id: 'pricing.features.accountSync', |
@@ -22,14 +21,6 @@ const messages = defineMessages({ | |||
22 | id: 'pricing.features.unlimitedServices', | 21 | id: 'pricing.features.unlimitedServices', |
23 | defaultMessage: '!!!Add unlimited services', | 22 | defaultMessage: '!!!Add unlimited services', |
24 | }, | 23 | }, |
25 | upToThreeServices: { | ||
26 | id: 'pricing.features.upToThreeServices', | ||
27 | defaultMessage: '!!!Add up to 3 services', | ||
28 | }, | ||
29 | upToSixServices: { | ||
30 | id: 'pricing.features.upToSixServices', | ||
31 | defaultMessage: '!!!Add up to 6 services', | ||
32 | }, | ||
33 | spellchecker: { | 24 | spellchecker: { |
34 | id: 'pricing.features.spellchecker', | 25 | id: 'pricing.features.spellchecker', |
35 | defaultMessage: '!!!Spellchecker support', | 26 | defaultMessage: '!!!Spellchecker support', |
@@ -58,31 +49,17 @@ const messages = defineMessages({ | |||
58 | id: 'pricing.features.teamManagement', | 49 | id: 'pricing.features.teamManagement', |
59 | defaultMessage: '!!!Team Management', | 50 | defaultMessage: '!!!Team Management', |
60 | }, | 51 | }, |
61 | appDelays: { | ||
62 | id: 'pricing.features.appDelays', | ||
63 | defaultMessage: '!!!No Waiting Screens', | ||
64 | }, | ||
65 | adFree: { | ||
66 | id: 'pricing.features.adFree', | ||
67 | defaultMessage: '!!!Forever ad-free', | ||
68 | }, | ||
69 | appDelayEnabled: { | ||
70 | id: 'pricing.features.appDelaysEnabled', | ||
71 | defaultMessage: '!!!Occasional Waiting Screens', | ||
72 | }, | ||
73 | }); | 52 | }); |
74 | 53 | ||
75 | export class FeatureList extends Component { | 54 | export class FeatureList extends Component { |
76 | static propTypes = { | 55 | static propTypes = { |
77 | className: PropTypes.string, | 56 | className: PropTypes.string, |
78 | featureClassName: PropTypes.string, | 57 | featureClassName: PropTypes.string, |
79 | plan: PropTypes.oneOf(Object.keys(PLANS)), | ||
80 | }; | 58 | }; |
81 | 59 | ||
82 | static defaultProps = { | 60 | static defaultProps = { |
83 | className: '', | 61 | className: '', |
84 | featureClassName: '', | 62 | featureClassName: '', |
85 | plan: false, | ||
86 | } | 63 | } |
87 | 64 | ||
88 | static contextTypes = { | 65 | static contextTypes = { |
@@ -93,53 +70,29 @@ export class FeatureList extends Component { | |||
93 | const { | 70 | const { |
94 | className, | 71 | className, |
95 | featureClassName, | 72 | featureClassName, |
96 | plan, | ||
97 | } = this.props; | 73 | } = this.props; |
98 | const { intl } = this.context; | 74 | const { intl } = this.context; |
99 | 75 | ||
100 | const features = []; | 76 | const features = [ |
101 | if (plan === PLANS.FREE) { | 77 | messages.availableRecipes, |
102 | features.push( | 78 | messages.accountSync, |
103 | messages.appDelayEnabled, | 79 | messages.desktopNotifications, |
104 | messages.upToThreeServices, | 80 | |
105 | messages.availableRecipes, | 81 | messages.spellchecker, |
106 | messages.accountSync, | 82 | |
107 | messages.desktopNotifications, | 83 | messages.workspaces, |
108 | ); | 84 | messages.customWebsites, |
109 | } else if (plan === PLANS.PERSONAL) { | 85 | messages.thirdPartyServices, |
110 | features.push( | 86 | |
111 | messages.upToSixServices, | 87 | messages.unlimitedServices, |
112 | messages.spellchecker, | 88 | messages.onPremise, |
113 | messages.appDelays, | 89 | messages.serviceProxies, |
114 | messages.adFree, | 90 | messages.teamManagement, |
115 | ); | 91 | ]; |
116 | } else if (plan === PLANS.PRO) { | ||
117 | features.push( | ||
118 | messages.unlimitedServices, | ||
119 | messages.workspaces, | ||
120 | messages.customWebsites, | ||
121 | // messages.onPremise, | ||
122 | messages.thirdPartyServices, | ||
123 | // messages.serviceProxies, | ||
124 | ); | ||
125 | } else { | ||
126 | features.push( | ||
127 | messages.unlimitedServices, | ||
128 | messages.spellchecker, | ||
129 | messages.workspaces, | ||
130 | messages.customWebsites, | ||
131 | messages.onPremise, | ||
132 | messages.thirdPartyServices, | ||
133 | messages.serviceProxies, | ||
134 | messages.teamManagement, | ||
135 | messages.appDelays, | ||
136 | messages.adFree, | ||
137 | ); | ||
138 | } | ||
139 | 92 | ||
140 | return ( | 93 | return ( |
141 | <ul className={className}> | 94 | <ul className={className}> |
142 | {features.map(feature => <FeatureItem name={intl.formatMessage(feature)} className={featureClassName} />)} | 95 | {features.map((feature) => <FeatureItem name={intl.formatMessage(feature)} className={featureClassName} />)} |
143 | </ul> | 96 | </ul> |
144 | ); | 97 | ); |
145 | } | 98 | } |
diff --git a/src/components/ui/ImageUpload.js b/src/components/ui/ImageUpload.js index 059610aec..bb4ea0565 100644 --- a/src/components/ui/ImageUpload.js +++ b/src/components/ui/ImageUpload.js | |||
@@ -26,16 +26,13 @@ export default @observer class ImageUpload extends Component { | |||
26 | 26 | ||
27 | dropzoneRef = null; | 27 | dropzoneRef = null; |
28 | 28 | ||
29 | imgPath = null; | ||
30 | |||
31 | onDrop(acceptedFiles) { | 29 | onDrop(acceptedFiles) { |
32 | const { field } = this.props; | 30 | const { field } = this.props; |
33 | 31 | ||
34 | acceptedFiles.forEach((file) => { | 32 | acceptedFiles.forEach((file) => { |
35 | this.imgPath = isWindows ? file.path.replace(/\\/g, '/') : file.path; | 33 | const imgPath = isWindows ? file.path.replace(/\\/g, '/') : file.path; |
36 | |||
37 | this.setState({ | 34 | this.setState({ |
38 | path: this.imgPath, | 35 | path: imgPath, |
39 | }); | 36 | }); |
40 | 37 | ||
41 | this.props.field.onDrop(file); | 38 | this.props.field.onDrop(file); |
diff --git a/src/components/ui/Link.js b/src/components/ui/Link.js index 7930d98b4..fd14b7018 100644 --- a/src/components/ui/Link.js +++ b/src/components/ui/Link.js | |||
@@ -48,7 +48,7 @@ export default @inject('stores') @observer class Link extends Component { | |||
48 | href={router.history.createHref(to)} | 48 | href={router.history.createHref(to)} |
49 | className={linkClasses} | 49 | className={linkClasses} |
50 | style={style} | 50 | style={style} |
51 | onClick={e => this.onClick(e)} | 51 | onClick={(e) => this.onClick(e)} |
52 | > | 52 | > |
53 | {children} | 53 | {children} |
54 | </a> | 54 | </a> |
diff --git a/src/components/ui/Modal/styles.js b/src/components/ui/Modal/styles.js index c2bebf9bb..f32c075ce 100644 --- a/src/components/ui/Modal/styles.js +++ b/src/components/ui/Modal/styles.js | |||
@@ -1,4 +1,4 @@ | |||
1 | export default theme => ({ | 1 | export default (theme) => ({ |
2 | component: { | 2 | component: { |
3 | zIndex: 500, | 3 | zIndex: 500, |
4 | position: 'absolute', | 4 | position: 'absolute', |
diff --git a/src/components/ui/PremiumFeatureContainer/index.js b/src/components/ui/PremiumFeatureContainer/index.js deleted file mode 100644 index 1e100f9d8..000000000 --- a/src/components/ui/PremiumFeatureContainer/index.js +++ /dev/null | |||
@@ -1,101 +0,0 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import { inject, observer } from 'mobx-react'; | ||
3 | import PropTypes from 'prop-types'; | ||
4 | import { defineMessages, intlShape } from 'react-intl'; | ||
5 | import injectSheet from 'react-jss'; | ||
6 | |||
7 | import { oneOrManyChildElements } from '../../../prop-types'; | ||
8 | |||
9 | import UserStore from '../../../stores/UserStore'; | ||
10 | |||
11 | import styles from './styles'; | ||
12 | import FeaturesStore from '../../../stores/FeaturesStore'; | ||
13 | import UIStore from '../../../stores/UIStore'; | ||
14 | |||
15 | const messages = defineMessages({ | ||
16 | action: { | ||
17 | id: 'premiumFeature.button.upgradeAccount', | ||
18 | defaultMessage: '!!!Upgrade account', | ||
19 | }, | ||
20 | }); | ||
21 | |||
22 | @inject('stores', 'actions') @injectSheet(styles) @observer | ||
23 | class PremiumFeatureContainer extends Component { | ||
24 | static propTypes = { | ||
25 | classes: PropTypes.object.isRequired, | ||
26 | condition: PropTypes.oneOfType([ | ||
27 | PropTypes.bool, | ||
28 | PropTypes.func, | ||
29 | ]), | ||
30 | gaEventInfo: PropTypes.shape({ | ||
31 | category: PropTypes.string.isRequired, | ||
32 | event: PropTypes.string.isRequired, | ||
33 | label: PropTypes.string, | ||
34 | }), | ||
35 | }; | ||
36 | |||
37 | static defaultProps = { | ||
38 | condition: null, | ||
39 | gaEventInfo: null, | ||
40 | }; | ||
41 | |||
42 | static contextTypes = { | ||
43 | intl: intlShape, | ||
44 | }; | ||
45 | |||
46 | render() { | ||
47 | const { | ||
48 | classes, | ||
49 | children, | ||
50 | actions, | ||
51 | condition, | ||
52 | stores, | ||
53 | } = this.props; | ||
54 | |||
55 | const { intl } = this.context; | ||
56 | |||
57 | let showWrapper = !!condition; | ||
58 | |||
59 | if (condition === null) { | ||
60 | showWrapper = !stores.user.data.isPremium; | ||
61 | } else if (typeof condition === 'function') { | ||
62 | showWrapper = condition({ | ||
63 | isPremium: stores.user.data.isPremium, | ||
64 | features: stores.features.features, | ||
65 | }); | ||
66 | } | ||
67 | |||
68 | return showWrapper ? ( | ||
69 | <div className={classes.container}> | ||
70 | <div className={classes.titleContainer}> | ||
71 | <p className={classes.title}>Premium Feature</p> | ||
72 | <button | ||
73 | className={classes.actionButton} | ||
74 | type="button" | ||
75 | onClick={() => { | ||
76 | actions.ui.openSettings({ path: 'user' }); | ||
77 | }} | ||
78 | > | ||
79 | {intl.formatMessage(messages.action)} | ||
80 | </button> | ||
81 | </div> | ||
82 | <div className={classes.content}> | ||
83 | {children} | ||
84 | </div> | ||
85 | </div> | ||
86 | ) : children; | ||
87 | } | ||
88 | } | ||
89 | |||
90 | PremiumFeatureContainer.wrappedComponent.propTypes = { | ||
91 | children: oneOrManyChildElements.isRequired, | ||
92 | stores: PropTypes.shape({ | ||
93 | user: PropTypes.instanceOf(UserStore).isRequired, | ||
94 | features: PropTypes.instanceOf(FeaturesStore).isRequired, | ||
95 | }).isRequired, | ||
96 | actions: PropTypes.shape({ | ||
97 | ui: PropTypes.instanceOf(UIStore).isRequired, | ||
98 | }).isRequired, | ||
99 | }; | ||
100 | |||
101 | export default PremiumFeatureContainer; | ||
diff --git a/src/components/ui/PremiumFeatureContainer/styles.js b/src/components/ui/PremiumFeatureContainer/styles.js deleted file mode 100644 index 41881e044..000000000 --- a/src/components/ui/PremiumFeatureContainer/styles.js +++ /dev/null | |||
@@ -1,34 +0,0 @@ | |||
1 | export default theme => ({ | ||
2 | container: { | ||
3 | background: theme.colorSubscriptionContainerBackground, | ||
4 | border: theme.colorSubscriptionContainerBorder, | ||
5 | margin: [0, 0, 20, -20], | ||
6 | padding: 20, | ||
7 | 'border-radius': theme.borderRadius, | ||
8 | pointerEvents: 'none', | ||
9 | height: 'auto', | ||
10 | }, | ||
11 | titleContainer: { | ||
12 | display: 'flex', | ||
13 | }, | ||
14 | title: { | ||
15 | 'font-weight': 'bold', | ||
16 | color: theme.colorSubscriptionContainerTitle, | ||
17 | }, | ||
18 | actionButton: { | ||
19 | background: theme.colorSubscriptionContainerActionButtonBackground, | ||
20 | color: theme.colorSubscriptionContainerActionButtonColor, | ||
21 | 'margin-left': 'auto', | ||
22 | 'border-radius': theme.borderRadiusSmall, | ||
23 | padding: [4, 8], | ||
24 | 'font-size': 12, | ||
25 | pointerEvents: 'initial', | ||
26 | }, | ||
27 | content: { | ||
28 | opacity: 0.5, | ||
29 | 'margin-top': 20, | ||
30 | '& > :last-child': { | ||
31 | 'margin-bottom': 0, | ||
32 | }, | ||
33 | }, | ||
34 | }); | ||
diff --git a/src/components/ui/Radio.js b/src/components/ui/Radio.js index ba13aca63..e77714eb7 100644 --- a/src/components/ui/Radio.js +++ b/src/components/ui/Radio.js | |||
@@ -54,7 +54,7 @@ export default @observer class Radio extends Component { | |||
54 | </label> | 54 | </label> |
55 | )} | 55 | )} |
56 | <div className="franz-form__radio-wrapper"> | 56 | <div className="franz-form__radio-wrapper"> |
57 | {field.options.map(type => ( | 57 | {field.options.map((type) => ( |
58 | <label | 58 | <label |
59 | key={type.value} | 59 | key={type.value} |
60 | htmlFor={`${field.id}-${type.value}`} | 60 | htmlFor={`${field.id}-${type.value}`} |
diff --git a/src/components/ui/SearchInput.js b/src/components/ui/SearchInput.js index 78d6aae8b..0b25734dd 100644 --- a/src/components/ui/SearchInput.js +++ b/src/components/ui/SearchInput.js | |||
@@ -96,7 +96,7 @@ export default @observer class SearchInput extends Component { | |||
96 | type="text" | 96 | type="text" |
97 | placeholder={placeholder} | 97 | placeholder={placeholder} |
98 | value={value} | 98 | value={value} |
99 | onChange={e => this.onChange(e)} | 99 | onChange={(e) => this.onChange(e)} |
100 | ref={(ref) => { this.input = ref; }} | 100 | ref={(ref) => { this.input = ref; }} |
101 | /> | 101 | /> |
102 | </label> | 102 | </label> |
diff --git a/src/components/ui/Select.js b/src/components/ui/Select.js index b4511433c..e7a5eafa8 100644 --- a/src/components/ui/Select.js +++ b/src/components/ui/Select.js | |||
@@ -82,7 +82,7 @@ export default @observer class Select extends Component { | |||
82 | </label> | 82 | </label> |
83 | )} | 83 | )} |
84 | <select | 84 | <select |
85 | onChange={multiple ? e => this.multipleChange(e) : field.onChange} | 85 | onChange={multiple ? (e) => this.multipleChange(e) : field.onChange} |
86 | id={field.id} | 86 | id={field.id} |
87 | defaultValue={selected} | 87 | defaultValue={selected} |
88 | className="franz-form__select" | 88 | className="franz-form__select" |
@@ -90,7 +90,7 @@ export default @observer class Select extends Component { | |||
90 | multiple={multiple} | 90 | multiple={multiple} |
91 | ref={this.element} | 91 | ref={this.element} |
92 | > | 92 | > |
93 | {field.options.map(type => ( | 93 | {field.options.map((type) => ( |
94 | <option | 94 | <option |
95 | key={type.value} | 95 | key={type.value} |
96 | value={type.value} | 96 | value={type.value} |
diff --git a/src/components/ui/ServiceIcon.js b/src/components/ui/ServiceIcon.js index 0b9155a4e..b2dadeac3 100644 --- a/src/components/ui/ServiceIcon.js +++ b/src/components/ui/ServiceIcon.js | |||
@@ -6,7 +6,7 @@ import classnames from 'classnames'; | |||
6 | 6 | ||
7 | import ServiceModel from '../../models/Service'; | 7 | import ServiceModel from '../../models/Service'; |
8 | 8 | ||
9 | const styles = theme => ({ | 9 | const styles = (theme) => ({ |
10 | root: { | 10 | root: { |
11 | height: 'auto', | 11 | height: 'auto', |
12 | }, | 12 | }, |
diff --git a/src/components/ui/Slider.js b/src/components/ui/Slider.js index b00a6a3f8..f344449a0 100644 --- a/src/components/ui/Slider.js +++ b/src/components/ui/Slider.js | |||
@@ -53,7 +53,7 @@ export default @observer class Slider extends Component { | |||
53 | value={field.value} | 53 | value={field.value} |
54 | min="1" | 54 | min="1" |
55 | max="100" | 55 | max="100" |
56 | onChange={e => (!disabled ? this.onChange(e) : null)} | 56 | onChange={(e) => (!disabled ? this.onChange(e) : null)} |
57 | /> | 57 | /> |
58 | </div> | 58 | </div> |
59 | 59 | ||
diff --git a/src/components/ui/Tabs/TabItem.js b/src/components/ui/Tabs/TabItem.js index 546b05a4e..d0ef4e798 100644 --- a/src/components/ui/Tabs/TabItem.js +++ b/src/components/ui/Tabs/TabItem.js | |||
@@ -1,17 +1,15 @@ | |||
1 | import React, { Component, Fragment } from 'react'; | 1 | import React, { Component } from 'react'; |
2 | 2 | ||
3 | import { oneOrManyChildElements } from '../../../prop-types'; | 3 | import { oneOrManyChildElements } from '../../../prop-types'; |
4 | 4 | ||
5 | export default class TabItem extends Component { | 5 | export default class TabItem extends Component { |
6 | static propTypes = { | 6 | static propTypes = { |
7 | children: oneOrManyChildElements.isRequired, | 7 | children: oneOrManyChildElements.isRequired, |
8 | } | 8 | }; |
9 | 9 | ||
10 | render() { | 10 | render() { |
11 | const { children } = this.props; | 11 | const { children } = this.props; |
12 | 12 | ||
13 | return ( | 13 | return <>{children}</>; |
14 | <>{children}</> | ||
15 | ); | ||
16 | } | 14 | } |
17 | } | 15 | } |
diff --git a/src/components/ui/Tabs/Tabs.js b/src/components/ui/Tabs/Tabs.js index e68dc3a1d..56c76f215 100644 --- a/src/components/ui/Tabs/Tabs.js +++ b/src/components/ui/Tabs/Tabs.js | |||
@@ -28,7 +28,7 @@ class Tab extends Component { | |||
28 | 28 | ||
29 | render() { | 29 | render() { |
30 | const { children: childElements } = this.props; | 30 | const { children: childElements } = this.props; |
31 | const children = childElements.filter(c => !!c); | 31 | const children = childElements.filter((c) => !!c); |
32 | 32 | ||
33 | if (children.length === 1) { | 33 | if (children.length === 1) { |
34 | return <div>{children}</div>; | 34 | return <div>{children}</div>; |
diff --git a/src/components/ui/Toggle.js b/src/components/ui/Toggle.js index 78fb77cbe..14330e5c7 100644 --- a/src/components/ui/Toggle.js +++ b/src/components/ui/Toggle.js | |||
@@ -59,7 +59,7 @@ export default @observer class Toggle extends Component { | |||
59 | name={field.name} | 59 | name={field.name} |
60 | value={field.name} | 60 | value={field.name} |
61 | checked={field.value} | 61 | checked={field.value} |
62 | onChange={e => (!disabled ? this.onChange(e) : null)} | 62 | onChange={(e) => (!disabled ? this.onChange(e) : null)} |
63 | /> | 63 | /> |
64 | </label> | 64 | </label> |
65 | {field.error && <div className={field.error}>{field.error}</div>} | 65 | {field.error && <div className={field.error}>{field.error}</div>} |
diff --git a/src/components/ui/ToggleRaw.js b/src/components/ui/ToggleRaw.js index dcaf664e1..4700127d4 100644 --- a/src/components/ui/ToggleRaw.js +++ b/src/components/ui/ToggleRaw.js | |||
@@ -64,7 +64,7 @@ export default @observer class ToggleRaw extends Component { | |||
64 | name={field.name} | 64 | name={field.name} |
65 | value={field.name} | 65 | value={field.name} |
66 | checked={field.value} | 66 | checked={field.value} |
67 | onChange={e => (!disabled ? this.onChange(e) : null)} | 67 | onChange={(e) => (!disabled ? this.onChange(e) : null)} |
68 | /> | 68 | /> |
69 | </label> | 69 | </label> |
70 | {field.error && <div className={field.error}>{field.error}</div>} | 70 | {field.error && <div className={field.error}>{field.error}</div>} |
diff --git a/src/components/ui/UpgradeButton/index.js b/src/components/ui/UpgradeButton/index.js deleted file mode 100644 index eade46cfd..000000000 --- a/src/components/ui/UpgradeButton/index.js +++ /dev/null | |||
@@ -1,83 +0,0 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { inject, observer } from 'mobx-react'; | ||
4 | import { defineMessages, intlShape } from 'react-intl'; | ||
5 | |||
6 | import { Button } from '@meetfranz/forms'; | ||
7 | |||
8 | import UserStore from '../../../stores/UserStore'; | ||
9 | import ActivateTrialButton from '../ActivateTrialButton'; | ||
10 | import UIStore from '../../../stores/UIStore'; | ||
11 | |||
12 | const messages = defineMessages({ | ||
13 | upgradeToPro: { | ||
14 | id: 'global.upgradeButton.upgradeToPro', | ||
15 | defaultMessage: '!!!Upgrade to Franz Professional', | ||
16 | }, | ||
17 | }); | ||
18 | |||
19 | @inject('stores', 'actions') @observer | ||
20 | class UpgradeButton extends Component { | ||
21 | static propTypes = { | ||
22 | // eslint-disable-next-line | ||
23 | classes: PropTypes.object.isRequired, | ||
24 | className: PropTypes.string, | ||
25 | gaEventInfo: PropTypes.shape({ | ||
26 | category: PropTypes.string.isRequired, | ||
27 | event: PropTypes.string.isRequired, | ||
28 | label: PropTypes.string, | ||
29 | }), | ||
30 | requiresPro: PropTypes.bool, | ||
31 | }; | ||
32 | |||
33 | static defaultProps = { | ||
34 | className: '', | ||
35 | gaEventInfo: null, | ||
36 | requiresPro: false, | ||
37 | } | ||
38 | |||
39 | static contextTypes = { | ||
40 | intl: intlShape, | ||
41 | }; | ||
42 | |||
43 | handleCTAClick() { | ||
44 | const { actions } = this.props; | ||
45 | |||
46 | actions.ui.openSettings({ path: 'user' }); | ||
47 | } | ||
48 | |||
49 | render() { | ||
50 | const { stores, requiresPro } = this.props; | ||
51 | const { intl } = this.context; | ||
52 | |||
53 | const { isPremium, isPersonal } = stores.user; | ||
54 | |||
55 | if (isPremium && isPersonal && requiresPro) { | ||
56 | return ( | ||
57 | <Button | ||
58 | label={intl.formatMessage(messages.upgradeToPro)} | ||
59 | onClick={this.handleCTAClick.bind(this)} | ||
60 | className={this.props.className} | ||
61 | buttonType="inverted" | ||
62 | /> | ||
63 | ); | ||
64 | } | ||
65 | |||
66 | if (!isPremium) { | ||
67 | return <ActivateTrialButton {...this.props} />; | ||
68 | } | ||
69 | |||
70 | return null; | ||
71 | } | ||
72 | } | ||
73 | |||
74 | export default UpgradeButton; | ||
75 | |||
76 | UpgradeButton.wrappedComponent.propTypes = { | ||
77 | stores: PropTypes.shape({ | ||
78 | user: PropTypes.instanceOf(UserStore).isRequired, | ||
79 | }).isRequired, | ||
80 | actions: PropTypes.shape({ | ||
81 | ui: PropTypes.instanceOf(UIStore).isRequired, | ||
82 | }).isRequired, | ||
83 | }; | ||
diff --git a/src/components/ui/WebviewLoader/styles.js b/src/components/ui/WebviewLoader/styles.js index dbd75db8a..5d58011fe 100644 --- a/src/components/ui/WebviewLoader/styles.js +++ b/src/components/ui/WebviewLoader/styles.js | |||
@@ -1,4 +1,4 @@ | |||
1 | export default theme => ({ | 1 | export default (theme) => ({ |
2 | component: { | 2 | component: { |
3 | background: theme.colorWebviewLoaderBackground, | 3 | background: theme.colorWebviewLoaderBackground, |
4 | padding: 20, | 4 | padding: 20, |