From 3c62be416d955a467bb6ef0005736be122e2cdd0 Mon Sep 17 00:00:00 2001 From: Antoine Jaussoin Date: Sun, 14 May 2023 17:46:22 +0100 Subject: [PATCH] Add more information on yearly payment (#525) --- marketing/public/locales/de/common.json | 2 + marketing/public/locales/en/common.json | 2 + marketing/public/locales/fr/common.json | 2 + marketing/public/locales/nl/common.json | 2 + marketing/src/containers/Pricing/index.tsx | 50 ++++++++++++------- .../src/containers/Pricing/pricing.style.tsx | 28 ++++++++++- 6 files changed, 66 insertions(+), 20 deletions(-) diff --git a/marketing/public/locales/de/common.json b/marketing/public/locales/de/common.json index 0cc83500c..e0d5e319d 100644 --- 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 index 9951680a5..c090fe99f 100644 --- 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 index d1cfb86d2..56d96ee00 100644 --- 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 index de4807c7e..93f7a3e3e 100644 --- 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 index 8f10849b3..f87ddd4ec 100755 --- 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} - {{recurrentWord}} - - ); - } - - if (!yearly && recurrent) { + if (recurrent) { p = ( <> {p} @@ -144,6 +140,13 @@ const Pricing = () => { {t('Pricing.yearly')} + + {isMonthly ? ( + 🎁 {t('Pricing.switchToYearly')} + ) : ( + {t('Pricing.switchedToYearly')} 🎉 + )} + {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 ? ( + + + {toOriginalPrice( + t('Pricing.currency'), + t(`${key}.price`) + )} + + + ) : ( + +   + + )} {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 index 1c6fa21d4..f8e179dee 100755 --- 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;