Add price disclaimer

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 {
                 />
               </PlanItem>
             </div>
-            <a
-              href="https://meetfranz.com/pricing"
-              target="_blank"
-              className={classes.fullFeatureList}
-            >
-              {intl.formatMessage(messages.fullFeatureList)}
-            </a>
+            <div className={classes.footer}>
+              <a
+                href="https://meetfranz.com/pricing"
+                target="_blank"
+                className={classes.fullFeatureList}
+              >
+                <Icon icon={mdiArrowRight} />
+                {intl.formatMessage(messages.fullFeatureList)}
+              </a>
+              {/* <p className={classes.disclaimer}> */}
+              {intl.formatMessage(messages.pricesBasedOnAnnualPayment)}
+              {/* </p> */}
+            </div>
           </div>
         </div>
       </Appear>
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": "<p>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.</p><p>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.</p>",
   "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