From c4f369510632704114c3f162ac61b81a47dad7c5 Mon Sep 17 00:00:00 2001 From: Stefan Malzner Date: Wed, 23 Oct 2019 14:06:39 +0200 Subject: Add price disclaimer --- .../planSelection/components/PlanSelection.js | 46 +++++++++++++++++----- src/i18n/locales/defaultMessages.json | 13 ++++++ src/i18n/locales/en-US.json | 3 +- .../planSelection/components/PlanSelection.json | 13 ++++++ 4 files changed, 64 insertions(+), 11 deletions(-) diff --git a/src/features/planSelection/components/PlanSelection.js b/src/features/planSelection/components/PlanSelection.js index aff6bf94f..b6bb9d32d 100644 --- a/src/features/planSelection/components/PlanSelection.js +++ b/src/features/planSelection/components/PlanSelection.js @@ -6,7 +6,7 @@ import { defineMessages, intlShape } from 'react-intl'; import { H1, H2, Icon } from '@meetfranz/ui'; import color from 'color'; -import { mdiRocket } from '@mdi/js'; +import { mdiRocket, mdiArrowRight } from '@mdi/js'; import PlanItem from './PlanItem'; import { i18nPlanName } from '../../../helpers/plan-helpers'; import { PLANS } from '../../../config'; @@ -59,6 +59,10 @@ const messages = defineMessages({ id: 'feature.planSelection.fullFeatureList', defaultMessage: '!!!Complete comparison of all plans', }, + pricesBasedOnAnnualPayment: { + id: 'feature.planSelection.pricesBasedOnAnnualPayment', + defaultMessage: '!!!All prices based on yearly payment', + }, }); const styles = theme => ({ @@ -132,11 +136,23 @@ const styles = theme => ({ borderBottom: [1, 'solid', '#CECECE'], }, }, + footer: { + display: 'flex', + color: theme.styleTypes.primary.contrast, + marginTop: 20, + padding: [0, 15], + }, fullFeatureList: { - marginTop: 40, + marginRight: 'auto', textAlign: 'center', - display: 'block', + display: 'flex', + justifyContent: 'center', + alignItems: 'center', color: `${theme.styleTypes.primary.contrast} !important`, + + '& svg': { + marginRight: 5, + }, }, scrollContainer: { border: '1px solid red', @@ -145,6 +161,10 @@ const styles = theme => ({ featuredPlan: { transform: 'scale(1.05)', }, + disclaimer: { + textAlign: 'right', + margin: [10, 15, 0, 0], + }, }); @injectSheet(styles) @observer @@ -238,13 +258,19 @@ class PlanSelection extends Component { /> - - {intl.formatMessage(messages.fullFeatureList)} - +
+ + + {intl.formatMessage(messages.fullFeatureList)} + + {/*

*/} + {intl.formatMessage(messages.pricesBasedOnAnnualPayment)} + {/*

*/} +
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json index 9b77fe34c..9dfaf959d 100644 --- a/src/i18n/locales/defaultMessages.json +++ b/src/i18n/locales/defaultMessages.json @@ -4136,6 +4136,19 @@ "column": 19, "line": 58 } + }, + { + "defaultMessage": "!!!All prices are based on the yearly plan", + "end": { + "column": 3, + "line": 65 + }, + "file": "src/features/planSelection/components/PlanSelection.js", + "id": "feature.planSelection.pricesBasedOnAnnualPayment", + "start": { + "column": 30, + "line": 62 + } } ], "path": "src/features/planSelection/components/PlanSelection.json" diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json index 8bef09d4d..6e84d47f7 100644 --- a/src/i18n/locales/en-US.json +++ b/src/i18n/locales/en-US.json @@ -23,6 +23,7 @@ "feature.planSelection.fullscreen.subheadline": "It's time to make a choice. Franz works best on our Personal and Professional plans. Please have a look and choose the best one for you.", "feature.planSelection.fullscreen.welcome": "Are you ready to choose, {name}?", "feature.planSelection.personal.text": "More services, no waiting - ideal for personal use.", + "feature.planSelection.pricesBasedOnAnnualPayment": "All prices based on yearly payment", "feature.planSelection.pro.text": "Unlimited services and professional features for you - and your team.", "feature.serviceLimit.limitReached": "You have added {amount} out of {limit} services that are included in your plan. Please upgrade your account to add more services.", "feature.shareFranz.action.email": "Send as email", @@ -425,4 +426,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/planSelection/components/PlanSelection.json b/src/i18n/messages/src/features/planSelection/components/PlanSelection.json index 685e81e82..7f1de6cfd 100644 --- a/src/i18n/messages/src/features/planSelection/components/PlanSelection.json +++ b/src/i18n/messages/src/features/planSelection/components/PlanSelection.json @@ -141,5 +141,18 @@ "line": 61, "column": 3 } + }, + { + "id": "feature.planSelection.pricesBasedOnAnnualPayment", + "defaultMessage": "!!!All prices based on yearly payment", + "file": "src/features/planSelection/components/PlanSelection.js", + "start": { + "line": 62, + "column": 30 + }, + "end": { + "line": 65, + "column": 3 + } } ] \ No newline at end of file -- cgit v1.2.3-54-g00ecf