Skip to content

[MKT-841]:feat/checkout flow improves for new annual plans #1947

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jaaaaavier merged 2 commits into from
May 5, 2026
Merged

[MKT-841]:feat/checkout flow improves for new annual plans #1947

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8a041f2
feat:checkout flow text updates for new annual plans
jaaaaavier May 5, 2026
4910fcd
Update ChangePlanDialog.tsx
jaaaaavier May 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions src/app/i18n/locales/de.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,7 +231,7 @@
"lifetime": "lebenslang"
},
"renewalTitle": {
"month": "monatlich",
"month": "jährlich",
"year": "jährlich",
"lifetime": "lebenslang"
},
Expand All @@ -256,7 +256,8 @@
"inputText": "Gutscheincode"
},
"apply": "Anwenden",
"taxes": "Steuern"
"taxes": "Steuern",
"annualBillingTemplate": "Jahresplan, monatlich abgerechnet mit {{price}}{{currency}}/Monat für 12 Monate"
},
"confirmCryptoPayment": {
"title": "Zahlung bestätigen",
Expand Down Expand Up @@ -1990,6 +1991,7 @@
"title": "Essential (Basis)",
"features": [
"1TB verschlüsselter Cloud-Speicher",
"30 Tage risikofrei testen",
"Post-Quanten-Verschlüsselung",
"Zero-Knowledge-Verschlüsselung",
"Zwei-Faktor-Authentifizierung",
Expand All @@ -2003,6 +2005,7 @@
"title": "Premium",
"features": [
"3TB verschlüsselter Cloud-Speicher",
"30 Tage risikofrei testen",
"Post-Quanten-Verschlüsselung",
"Zero-Knowledge-Verschlüsselung",
"Zwei-Faktor-Authentifizierung",
Expand All @@ -2019,6 +2022,7 @@
"title": "Ultimate (Ultimativ)",
"features": [
"5TB verschlüsselter Cloud-Speicher",
"30 Tage risikofrei testen",
"Post-Quanten-Verschlüsselung",
"Zero-Knowledge-Verschlüsselung",
"Zwei-Faktor-Authentifizierung",
Expand Down
8 changes: 6 additions & 2 deletions src/app/i18n/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -276,7 +276,7 @@
"lifetime": "lifetime"
},
"renewalTitle": {
"month": "monthly",
"month": "annual",
"year": "annual",
"lifetime": "lifetime"
},
Expand Down Expand Up @@ -304,7 +304,8 @@
"inputText": "Coupon code"
},
"apply": "Apply",
"taxes": "Taxes"
"taxes": "Taxes",
"annualBillingTemplate": "Annual plan, billed monthly at {{price}}{{currency}}/month for 12 months"
},
"confirmCryptoPayment": {
"title": "Confirm the payment",
Expand Down Expand Up @@ -2074,6 +2075,7 @@
"title": "Essential",
"features": [
"1TB of encrypted cloud storage",
"Try risk-free for 30 days",
"Post-Quantum Encryption",
"Zero-Knowledge Encryption",
"Two-Factor Authentication",
Expand All @@ -2087,6 +2089,7 @@
"title": "Premium",
"features": [
"3TB of encrypted cloud storage",
"Try risk-free for 30 days",
"Post-Quantum Encryption",
"Zero-Knowledge Encryption",
"Two-Factor Authentication",
Expand All @@ -2103,6 +2106,7 @@
"title": "Ultimate",
"features": [
"5TB of encrypted cloud storage",
"Try risk-free for 30 days",
"Post-Quantum Encryption",
"Zero-Knowledge Encryption",
"Two-Factor Authentication",
Expand Down
8 changes: 6 additions & 2 deletions src/app/i18n/locales/es.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -258,7 +258,7 @@
"lifetime": "lifetime"
},
"renewalTitle": {
"month": "mensual",
"month": "anual",
"year": "anual",
"lifetime": "pago único"
},
Expand All @@ -283,7 +283,8 @@
"inputText": "Código de cupón"
},
"apply": "Aplicar",
"taxes": "Impuestos"
"taxes": "Impuestos",
"annualBillingTemplate": "Plan anual, facturado mensualmente a {{price}}{{currency}}/mes durante 12 meses"
},
"confirmCryptoPayment": {
"title": "Confirmar el pago",
Expand Down Expand Up @@ -2050,6 +2051,7 @@
"title": "Esencial",
"features": [
"1TB de almacenamiento en la nube cifrado",
"Pruébalo sin riesgo durante 30 días",
"Criptografía postcuántica",
"Cifrado de conocimiento cero",
"Autenticación de dos factores",
Expand All @@ -2063,6 +2065,7 @@
"title": "Premium",
"features": [
"3TB de almacenamiento en la nube cifrado",
"Pruébalo sin riesgo durante 30 días",
"Criptografía postcuántica",
"Cifrado de conocimiento cero",
"Autenticación de dos factores",
Expand All @@ -2079,6 +2082,7 @@
"title": "Ultimate",
"features": [
"5TB de almacenamiento en la nube cifrado",
"Pruébalo sin riesgo durante 30 días",
"Criptografía postcuántica",
"Cifrado de conocimiento cero",
"Autenticación de dos factores",
Expand Down
8 changes: 6 additions & 2 deletions src/app/i18n/locales/fr.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,7 +231,7 @@
"lifetime": "à vie"
},
"renewalTitle": {
"month": "mensuel",
"month": "annuel",
"year": "annuel",
"lifetime": "à vie"
},
Expand All @@ -256,7 +256,8 @@
"inputText": "Code de coupon"
},
"apply": "Appliquer",
"taxes": "Taxes"
"taxes": "Taxes",
"annualBillingTemplate": "Plan annuel, facturé mensuellement à {{price}}{{currency}}/mois pendant 12 mois"
},
"confirmCryptoPayment": {
"title": "Confirmer le paiement",
Expand Down Expand Up @@ -1996,6 +1997,7 @@
"title": "Essential (Essentiel)",
"features": [
"1To de stockage cloud chiffré",
"Essayez sans risque pendant 30 jours",
"Chiffrement Post-Quantique",
"Chiffrement Zéro-Connaissance",
"Authentification à Deux Facteurs",
Expand All @@ -2009,6 +2011,7 @@
"title": "Premium",
"features": [
"3To de stockage cloud chiffré",
"Essayez sans risque pendant 30 jours",
"Chiffrement Post-Quantique",
"Chiffrement Zéro-Connaissance",
"Authentification à Deux Facteurs",
Expand All @@ -2025,6 +2028,7 @@
"title": "Ultimate (Ultime)",
"features": [
"5To de stockage cloud chiffré",
"Essayez sans risque pendant 30 jours",
"Chiffrement Post-Quantique",
"Chiffrement Zéro-Connaissance",
"Authentification à Deux Facteurs",
Expand Down
8 changes: 6 additions & 2 deletions src/app/i18n/locales/it.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,7 +248,7 @@
"lifetime": "a vita"
},
"renewalTitle": {
"month": "mensile",
"month": "annuale",
"year": "annuale",
"lifetime": "a vita"
},
Expand Down Expand Up @@ -347,7 +347,8 @@
"inputText": "Codice coupon"
},
"apply": "Applica",
"taxes": "Tasse"
"taxes": "Tasse",
"annualBillingTemplate": "Piano annuale, fatturato mensilmente a {{price}}{{currency}}/mese per 12 mesi"
},
"confirmCryptoPayment": {
"title": "Conferma il pagamento",
Expand Down Expand Up @@ -2103,6 +2104,7 @@
"title": "Essential (Essenziale)",
"features": [
"1TB di spazio di archiviazione cloud crittografato",
"Provalo senza rischi per 30 giorni",
"Crittografia Post-Quantistica",
"Crittografia Zero-Knowledge",
"Autenticazione a Due Fattori",
Expand All @@ -2116,6 +2118,7 @@
"title": "Premium",
"features": [
"3TB di spazio di archiviazione cloud crittografato",
"Provalo senza rischi per 30 giorni",
"Crittografia Post-Quantistica",
"Crittografia Zero-Knowledge",
"Autenticazione a Due Fattori",
Expand All @@ -2132,6 +2135,7 @@
"title": "Ultimate (Definitivo)",
"features": [
"5TB di spazio di archiviazione cloud crittografato",
"Provalo senza rischi per 30 giorni",
"Crittografia Post-Quantistica",
"Crittografia Zero-Knowledge",
"Autenticazione a Due Fattori",
Expand Down
8 changes: 6 additions & 2 deletions src/app/i18n/locales/ru.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,7 +231,7 @@
"lifetime": "пожизненный"
},
"renewalTitle": {
"month": "ежемесячный",
"month": "ежегодный",
"year": "ежегодный",
"lifetime": "пожизненный"
},
Expand All @@ -256,7 +256,8 @@
"inputText": "Код купона"
},
"apply": "Применить",
"taxes": "Налоги"
"taxes": "Налоги",
"annualBillingTemplate": "Годовой план, ежемесячная оплата {{price}}{{currency}}/мес. в течение 12 месяцев"
},
"confirmCryptoPayment": {
"title": "Подтвердить платеж",
Expand Down Expand Up @@ -2011,6 +2012,7 @@
"title": "Essential (Базовый)",
"features": [
"1 ТБ зашифрованного облачного хранилища",
"Попробуйте без риска в течение 30 дней",
"Постквантовая криптография",
"Шифрование с нулевым разглашением (Zero-Knowledge)",
"Двухфакторная аутентификация",
Expand All @@ -2024,6 +2026,7 @@
"title": "Premium (Премиум)",
"features": [
"3 ТБ зашифрованного облачного хранилища",
"Попробуйте без риска в течение 30 дней",
"Постквантовая криптография",
"Шифрование с нулевым разглашением (Zero-Knowledge)",
"Двухфакторная аутентификация",
Expand All @@ -2040,6 +2043,7 @@
"title": "Ultimate (Максимальный)",
"features": [
"5ТБ зашифрованного облачного хранилища",
"Попробуйте без риска в течение 30 дней",
"Постквантовая криптография",
"Шифрование с нулевым разглашением (Zero-Knowledge)",
"Двухфакторная аутентификация",
Expand Down
8 changes: 6 additions & 2 deletions src/app/i18n/locales/tw.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -247,7 +247,7 @@
"lifetime": "終身"
},
"renewalTitle": {
"month": "每月",
"month": "每年",
"year": "每年",
"lifetime": "終身"
},
Expand All @@ -272,7 +272,8 @@
"inputText": "優惠券代碼"
},
"apply": "應用",
"taxes": "稅金"
"taxes": "稅金",
"annualBillingTemplate": "年度計劃，每月 {{price}}{{currency}}/月，持續 12 個月"
},
"confirmCryptoPayment": {
"title": "確認付款",
Expand Down Expand Up @@ -2000,6 +2001,7 @@
"title": "Essential (基本版)",
"features": [
"1TB 加密雲端儲存空間",
"30 天無風險試用",
"後量子密碼學",
"零知識加密",
"雙重身份驗證",
Expand All @@ -2013,6 +2015,7 @@
"title": "Premium (進階版)",
"features": [
"3TB 加密雲端儲存空間",
"30 天無風險試用",
"後量子密碼學",
"零知識加密",
"雙重身份驗證",
Expand All @@ -2030,6 +2033,7 @@
"title": "Ultimate (旗艦版)",
"features": [
"5TB 加密雲端儲存空間",
"30 天無風險試用",
"後量子密碼學",
"零知識加密",
"雙重身份驗證",
Expand Down
8 changes: 6 additions & 2 deletions src/app/i18n/locales/zh.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,7 +245,7 @@
"lifetime": "终身"
},
"renewalTitle": {
"month": "每月",
"month": "每年",
"year": "每年",
"lifetime": "终身"
},
Expand All @@ -270,7 +270,8 @@
"inputText": "优惠券代码"
},
"apply": "应用",
"taxes": "税费"
"taxes": "税费",
"annualBillingTemplate": "年度计划，每月 {{price}}{{currency}}/月，持续 12 个月"
},
"confirmCryptoPayment": {
"title": "确认付款",
Expand Down Expand Up @@ -2038,6 +2039,7 @@
"title": "Essential (基础版)",
"features": [
"1TB 加密云存储空间",
"30 天无风险试用",
"后量子密码学",
"零知识加密",
"两步验证",
Expand All @@ -2051,6 +2053,7 @@
"title": "Premium (高级版)",
"features": [
"3TB 加密云存储空间",
"30 天无风险试用",
"后量子密码学",
"零知识加密",
"两步验证",
Expand All @@ -2067,6 +2070,7 @@
"title": "Ultimate (旗舰版)",
"features": [
"5TB 加密云存储空间",
"30 天无风险试用",
"后量子密码学",
"零知识加密",
"两步验证",
Expand Down
8 changes: 8 additions & 0 deletions src/views/Checkout/components/CheckoutProductCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -277,6 +277,14 @@ export const CheckoutProductCard = ({
</div>
{couponCodeData && priceData.interval !== 'lifetime' && <p className="text-gray-60">{renewalPeriodLabel}</p>}
{showHardcodedRenewal && <p className="text-gray-60">{showHardcodedRenewal}</p>}
{priceData.interval === 'month' && (
<p className="text-gray-60">
{translate('checkout.productCard.annualBillingTemplate', {
price: normalPriceAmount,
currency: currencySymbol,
})}
</p>
)}
</div>
);
};
8 changes: 2 additions & 6 deletions src/views/NewSettings/components/Sections/Account/Plans/components/ChangePlanDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,18 +57,14 @@ const ChangePlanDialog = ({
let currentAmountMonthly: number | null = null;
let subscriptionCurrencySymbol: string | null = null;

if (selectedPlanInterval === 'month') {
if (selectedPlanInterval === 'month' || selectedPlanInterval === 'year') {
amountMonthly = selectedPlanAmount;
} else if (selectedPlanInterval === 'year') {
amountMonthly = selectedPlanAmount / 12;
}

if (subscription?.type === 'subscription') {
subscriptionCurrencySymbol = moneyService.getCurrencySymbol(subscription?.currency.toUpperCase());
if (subscription.interval === 'month') {
if (subscription.interval === 'month' || subscription.interval === 'year') {
currentAmountMonthly = subscription.amount;
} else if (subscription.interval === 'year') {
currentAmountMonthly = subscription.amount / 12;
}
}

Expand Down
2 changes: 1 addition & 1 deletion src/views/NewSettings/components/Sections/Account/Plans/components/PlanCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ const PlanCard = ({
isLoading,
disableActionButton,
}: PlanCardProps) => {
const userText = ' ' + t('preferences.account.plans.billedMonthly');
const userText = ' ' + t('preferences.account.plans.billedAnnually');

return (
<div className={'flex w-80 flex-col rounded-xl border border-gray-10 bg-gray-5 p-4 '}>
Expand Down
Loading