Add more information on yearly payment (#525)

antoinejaussoin · May 14, 2023 · 3c62be4 · 3c62be4
1 parent c22ada6
commit 3c62be4
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 20 deletions.
diff --git a/marketing/public/locales/de/common.json b/marketing/public/locales/de/common.json
@@ -64,6 +64,8 @@
 		"perYear": " / Jahr",
 		"currency": "€",
 		"subscribe": "Jetzt abonnieren",
+		"switchToYearly": "Wechseln Sie zu Jährlich und erhalten Sie einen Monat gratis!",
+		"switchedToYearly": "Gut gemacht, du wirst jedes Jahr einen Monat kostenlos bekommen",
 		"login": "Jetzt Anmelden",
 		"basic": {
 			"title": "Basic",

diff --git a/marketing/public/locales/en/common.json b/marketing/public/locales/en/common.json
@@ -64,6 +64,8 @@
 		"perYear": " / year",
 		"currency": "$",
 		"subscribe": "Subscribe Now",
+		"switchToYearly": "Switch to Yearly and get one month free!",
+		"switchedToYearly": "Well done, you will get one month free every year",
 		"login": "Login Now",
 		"basic": {
 			"title": "Basic",

diff --git a/marketing/public/locales/fr/common.json b/marketing/public/locales/fr/common.json
@@ -64,6 +64,8 @@
 		"perYear": " / an",
 		"currency": "€",
 		"subscribe": "Je m'abonne",
+		"switchToYearly": "Obtenez un mois gratuit par an en prenant un abonnement annuel !",
+		"switchedToYearly": "Bravo, vous recevrez un mois gratuit chaque année",
 		"login": "Connectez-vous",
 		"basic": {
 			"title": "Basique",

diff --git a/marketing/public/locales/nl/common.json b/marketing/public/locales/nl/common.json
@@ -64,6 +64,8 @@
 		"perYear": " / jaar",
 		"currency": "$",
 		"subscribe": "Nu abonneren",
+		"switchToYearly": "Switch to Yearly and get one month free!",
+		"switchedToYearly": "Well done, you will get one month free every year",
 		"login": "Nu inloggen",
 		"basic": {
 			"title": "Eenvoudig",

diff --git a/marketing/src/containers/Pricing/index.tsx b/marketing/src/containers/Pricing/index.tsx
@@ -3,7 +3,6 @@ import Fade from 'react-reveal/Fade';
 import Container from '@/common/components/UI/Container';
 import Heading from '@/common/components/Heading';
 import Button from '@/common/components/Button';
-import Image from '@/common/components/Image';
 import Text from '@/common/components/Text';
 import pricingFree from './pricing-free.svg';
 import pricingPro from './pricing-team.svg';
@@ -16,9 +15,11 @@ import {
   Grid,
   PriceTable,
   Features,
+  FreeDescription,
+  StrikethroughPrice,
+  StrikethroughPricePlaceholder,
 } from './pricing.style';
 import { useTranslation } from 'next-i18next';
-import NextImage from '@/common/components/NextImage';
 import { StaticImageData } from 'next/image';
 import styled from 'styled-components';
 
@@ -76,6 +77,10 @@ export const pricing: Pricing[] = [
   },
 ];
 
+function toOriginalPrice(currency: string, price: string) {
+  return <>{currency + (parseFloat(price) * 12).toFixed(2)}</>;
+}
+
 function toPrice(
   currency: string,
   price: string,
@@ -90,16 +95,7 @@ function toPrice(
     </>
   );
 
-  if (yearly && recurrent) {
-    p = (
-      <>
-        {p}
-        {<em>{recurrentWord}</em>}
-      </>
-    );
-  }
-
-  if (!yearly && recurrent) {
+  if (recurrent) {
     p = (
       <>
         {p}
@@ -144,6 +140,13 @@ const Pricing = () => {
             {t('Pricing.yearly')}
           </button>
         </SwitcherWrapper>
+        <FreeDescription>
+          {isMonthly ? (
+            <span>🎁 {t('Pricing.switchToYearly')}</span>
+          ) : (
+            <span>{t('Pricing.switchedToYearly')} 🎉</span>
+          )}
+        </FreeDescription>
         <Grid>
           {pricing.map((priceTable) => {
             const key = `Pricing.${priceTable.key}`;
@@ -168,6 +171,22 @@ const Pricing = () => {
                       isMonthly ? t(`Pricing.perMonth`) : t(`Pricing.perYear`)
                     )}
                   />
+                  {!isMonthly &&
+                  priceTable.recurrent &&
+                  priceTable.isSubscribe ? (
+                    <StrikethroughPrice>
+                      <span>
+                        {toOriginalPrice(
+                          t('Pricing.currency'),
+                          t(`${key}.price`)
+                        )}
+                      </span>
+                    </StrikethroughPrice>
+                  ) : (
+                    <StrikethroughPricePlaceholder>
+                      &nbsp;
+                    </StrikethroughPricePlaceholder>
+                  )}
 
                   <Features>
                     {plus ? (
@@ -205,11 +224,4 @@ const Pricing = () => {
   );
 };
 
-const Figure = styled.figure`
-  img {
-    width: 100%;
-    height: 100%;
-  }
-`;
-
 export default Pricing;
diff --git a/marketing/src/containers/Pricing/pricing.style.tsx b/marketing/src/containers/Pricing/pricing.style.tsx
@@ -40,11 +40,33 @@ export const SectionHeading = styled.div`
   }
 `;
 
+export const StrikethroughPrice = styled.div`
+  text-decoration: line-through;
+  color: red;
+  > span {
+    color: ${themeGet('colors.textColorLight')};
+  }
+  position: relative;
+  top: -20px;
+`;
+
+export const StrikethroughPricePlaceholder = styled.div`
+  position: relative;
+  top: -20px;
+`;
+
+export const FreeDescription = styled.div`
+  color: ${themeGet('colors.textColorLight')};
+  margin-bottom: 50px;
+  text-align: center;
+  font-size: 0.8rem;
+`;
+
 export const SwitcherWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 50px;
+  margin-bottom: 10px;
   button {
     background-color: transparent;
     border: 0;
@@ -195,9 +217,13 @@ export const PriceTable = styled.div`
       color: ${themeGet('colors.headingColor')};
     }
     p,
+    span,
     a {
       color: ${themeGet('colors.headingColor')};
     }
+    span.btn-text {
+      color: ${themeGet('colors.white')};
+    }
   }
   em {
     font-size: 0.5rem;