chore(clerk-js,types,localizations): Update checkout downgrade notice (#5837)

Author: alexcarpenter

.changeset/thin-owls-draw.md

@@ -0,0 +1,7 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Update checkout downgrade notice placement and text.

packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx

@@ -11,7 +11,7 @@ import type { SetupIntent } from '@stripe/stripe-js';
 import { useEffect, useMemo, useState } from 'react';
 
 import { useCheckoutContext } from '../../contexts';
-import { Box, Button, Col, descriptors, Form, localizationKeys, Span } from '../../customizables';
+import { Box, Button, Col, descriptors, Form, localizationKeys, Text } from '../../customizables';
 import { Alert, Drawer, LineItems, SegmentedControl, Select, SelectButton, SelectOptionList } from '../../elements';
 import { useFetch } from '../../hooks';
 import { ArrowUpDown } from '../../icons';
@@ -47,18 +47,6 @@ export const CheckoutForm = ({
         })}
       >
         <LineItems.Root>
-          {/* TODO(@Commerce): needs localization */}
-          {showDowngradeInfo && (
-            <Span
-              localizationKey={'Your features will remain until the end of your current subscription.'}
-              elementDescriptor={descriptors.lineItemsDowngradeNotice}
-              sx={t => ({
-                fontSize: t.fontSizes.$sm,
-                color: t.colors.$colorTextSecondary,
-              })}
-            />
-          )}
-
           <LineItems.Group borderTop={showDowngradeInfo}>
             <LineItems.Title title={plan.name} />
             {/* TODO(@Commerce): needs localization */}
@@ -94,6 +82,23 @@ export const CheckoutForm = ({
         </LineItems.Root>
       </Box>
 
+      {/* TODO(@Commerce): needs localization */}
+      {showDowngradeInfo && (
+        <Box
+          elementDescriptor={descriptors.checkoutFormLineItemsRoot}
+          sx={t => ({
+            paddingBlockStart: t.space.$4,
+            paddingInline: t.space.$4,
+          })}
+        >
+          <Text
+            localizationKey={localizationKeys('commerce.checkout.downgradeNotice')}
+            variant='caption'
+            colorScheme='secondary'
+          />
+        </Box>
+      )}
+
       <CheckoutFormElements
         checkout={checkout}
         onCheckoutComplete={onCheckoutComplete}

packages/localizations/src/ar-SA.ts

@@ -14,13 +14,32 @@ import type { LocalizationResource } from '@clerk/types';
 
 export const arSA: LocalizationResource = {
   locale: 'ar-SA',
+  backButton: 'الرجوع',
+  badge__canceledEndsAt: undefined,
+  badge__currentPlan: undefined,
+  badge__default: 'الأفتراضي',
+  badge__endsAt: undefined,
+  badge__expired: undefined,
+  badge__otherImpersonatorDevice: 'جهاز منتحل آخر',
+  badge__primary: 'الرئيسي',
+  badge__renewsAt: undefined,
+  badge__requiresAction: 'الإجراء المطلوب',
+  badge__startsAt: undefined,
+  badge__thisDevice: 'هذا الجهاز',
+  badge__unverified: 'لم يتم التحقق منه',
+  badge__upcomingPlan: undefined,
+  badge__userDevice: 'جهاز المستخدم',
+  badge__you: 'أنت',
   commerce: {
+    alwaysFree: undefined,
     availableFeatures: undefined,
     billedAnnually: undefined,
+    billedMonthlyOnly: undefined,
     cancelSubscription: undefined,
     checkout: {
       description__paymentSuccessful: undefined,
       description__subscriptionSuccessful: undefined,
+      downgradeNotice: undefined,
       emailForm: {
         subtitle: undefined,
         title: undefined,
@@ -43,26 +62,11 @@ export const arSA: LocalizationResource = {
     month: undefined,
     reSubscribe: undefined,
     seeAllFeatures: undefined,
+    subscribe: undefined,
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,
   },
-  backButton: 'الرجوع',
-  badge__canceledEndsAt: undefined,
-  badge__currentPlan: undefined,
-  badge__default: 'الأفتراضي',
-  badge__endsAt: undefined,
-  badge__expired: undefined,
-  badge__otherImpersonatorDevice: 'جهاز منتحل آخر',
-  badge__primary: 'الرئيسي',
-  badge__renewsAt: undefined,
-  badge__requiresAction: 'الإجراء المطلوب',
-  badge__startsAt: undefined,
-  badge__thisDevice: 'هذا الجهاز',
-  badge__unverified: 'لم يتم التحقق منه',
-  badge__upcomingPlan: undefined,
-  badge__userDevice: 'جهاز المستخدم',
-  badge__you: 'أنت',
   createOrganization: {
     formButtonSubmit: 'أنشاء منظمة',
     invitePage: {
@@ -695,6 +699,22 @@ export const arSA: LocalizationResource = {
     action__signOutAll: 'تسجيل الخروج من جميع الحسابات',
   },
   userProfile: {
+    backupCodePage: {
+      actionLabel__copied: 'تم النسخ',
+      actionLabel__copy: 'نسخ الكل',
+      actionLabel__download: 'تحميل ملف .txt',
+      actionLabel__print: 'طباعة',
+      infoText1: 'سيتم تفعيل رموز النسخ الأحتياطي لهذا الحساب',
+      infoText2:
+        'قم بتخزين الرموز في مكان آمن وحافظ على سريتها. يمكنك تجديد الرموز الأحتياطية اذا كنت تشك أن حسابك معرض للخطر',
+      subtitle__codelist: 'قم بتخزين الرموز في مكان آمن وابقيها سرا.',
+      successMessage:
+        'رموز النسخ الأحتياطي مفعلة الآن. يمكنك أستعمال واحدة من هذه الرموز لتسجيل الدخول إلى حسابك, اذا فقدت الوصول إلى جهاز المصادقة الخاص بك. كل رمز يمكن أستعماله لمرة واحدة فقط.',
+      successSubtitle:
+        'يمكنك أستعمال واحدة من هذه الرموز لتسجيل الدخول إلى حسابك, اذا فقدت الوصول إلى جهاز المصادقة الخاص بك',
+      title: 'إضافة التحقق عن طريق الرموز الأحتياطية',
+      title__codelist: 'رموز النسخ الأحتياطي',
+    },
     billingPage: {
       paymentSourcesSection: {
         actionLabel__default: undefined,
@@ -723,22 +743,6 @@ export const arSA: LocalizationResource = {
       },
       title: undefined,
     },
-    backupCodePage: {
-      actionLabel__copied: 'تم النسخ',
-      actionLabel__copy: 'نسخ الكل',
-      actionLabel__download: 'تحميل ملف .txt',
-      actionLabel__print: 'طباعة',
-      infoText1: 'سيتم تفعيل رموز النسخ الأحتياطي لهذا الحساب',
-      infoText2:
-        'قم بتخزين الرموز في مكان آمن وحافظ على سريتها. يمكنك تجديد الرموز الأحتياطية اذا كنت تشك أن حسابك معرض للخطر',
-      subtitle__codelist: 'قم بتخزين الرموز في مكان آمن وابقيها سرا.',
-      successMessage:
-        'رموز النسخ الأحتياطي مفعلة الآن. يمكنك أستعمال واحدة من هذه الرموز لتسجيل الدخول إلى حسابك, اذا فقدت الوصول إلى جهاز المصادقة الخاص بك. كل رمز يمكن أستعماله لمرة واحدة فقط.',
-      successSubtitle:
-        'يمكنك أستعمال واحدة من هذه الرموز لتسجيل الدخول إلى حسابك, اذا فقدت الوصول إلى جهاز المصادقة الخاص بك',
-      title: 'إضافة التحقق عن طريق الرموز الأحتياطية',
-      title__codelist: 'رموز النسخ الأحتياطي',
-    },
     connectedAccountPage: {
       formHint: 'أختر موفر خدمة لتوصيل حسابك',
       formHint__noAccounts: 'لا يوجد موفرين خدمة لتوصيل حسابك',

packages/localizations/src/be-BY.ts

@@ -14,13 +14,32 @@ import type { LocalizationResource } from '@clerk/types';
 
 export const beBY: LocalizationResource = {
   locale: 'be-BY',
+  backButton: 'Назад',
+  badge__canceledEndsAt: undefined,
+  badge__currentPlan: undefined,
+  badge__default: 'Па-змаўчанні',
+  badge__endsAt: undefined,
+  badge__expired: undefined,
+  badge__otherImpersonatorDevice: 'Іншая прылада',
+  badge__primary: 'Асноўная',
+  badge__renewsAt: undefined,
+  badge__requiresAction: 'Патрабуецца дзеянне',
+  badge__startsAt: undefined,
+  badge__thisDevice: 'Гэта прылада',
+  badge__unverified: 'Не верыфікавана',
+  badge__upcomingPlan: undefined,
+  badge__userDevice: 'Карыстальніцкая прылада',
+  badge__you: 'Вы',
   commerce: {
+    alwaysFree: undefined,
     availableFeatures: undefined,
     billedAnnually: undefined,
+    billedMonthlyOnly: undefined,
     cancelSubscription: undefined,
     checkout: {
       description__paymentSuccessful: undefined,
       description__subscriptionSuccessful: undefined,
+      downgradeNotice: undefined,
       emailForm: {
         subtitle: undefined,
         title: undefined,
@@ -43,26 +62,11 @@ export const beBY: LocalizationResource = {
     month: undefined,
     reSubscribe: undefined,
     seeAllFeatures: undefined,
+    subscribe: undefined,
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,
   },
-  backButton: 'Назад',
-  badge__canceledEndsAt: undefined,
-  badge__currentPlan: undefined,
-  badge__default: 'Па-змаўчанні',
-  badge__endsAt: undefined,
-  badge__expired: undefined,
-  badge__otherImpersonatorDevice: 'Іншая прылада',
-  badge__primary: 'Асноўная',
-  badge__renewsAt: undefined,
-  badge__requiresAction: 'Патрабуецца дзеянне',
-  badge__startsAt: undefined,
-  badge__thisDevice: 'Гэта прылада',
-  badge__unverified: 'Не верыфікавана',
-  badge__upcomingPlan: undefined,
-  badge__userDevice: 'Карыстальніцкая прылада',
-  badge__you: 'Вы',
   createOrganization: {
     formButtonSubmit: 'Стварыць арганізацыю',
     invitePage: {
@@ -703,6 +707,22 @@ export const beBY: LocalizationResource = {
     action__signOutAll: 'Выйсці з усіх уліковых запісаў',
   },
   userProfile: {
+    backupCodePage: {
+      actionLabel__copied: 'Скапіравана!',
+      actionLabel__copy: 'Скапіраваць усё',
+      actionLabel__download: 'Спампаваць .txt',
+      actionLabel__print: 'Друкаваць',
+      infoText1: 'Рэзервовыя коды будуць уключаны для гэтага ўліковага запісу.',
+      infoText2:
+        'Захоўвайце рэзервовыя коды ў тайне і захоўвайце іх у бяспецы. Вы можаце стварыць новыя рэзервовыя коды, калі падазраеце, што яны былі скампраметаваныя.',
+      subtitle__codelist: 'Захоўвайце іх у бяспецы і не паведамляйце нікому.',
+      successMessage:
+        'Рэзервовыя коды ўключаны. Вы можаце выкарыстоўваць адзін з гэтых кодоў для ўваходу ў свой уліковы запіс, калі вы страціце доступ да свайго аўтэнтыфікацыйнага прылады. Кожны код можа быць выкарыстаны толькі аднойчы.',
+      successSubtitle:
+        'Вы можаце выкарыстоўваць адзін з гэтых кодоў для ўваходу ў свой уліковы запіс, калі вы страціце доступ да свайго аўтэнтыфікацыйнага прылады.',
+      title: 'Дадаць рэзервовы код пацверджання',
+      title__codelist: 'Рэзервовы коды',
+    },
     billingPage: {
       paymentSourcesSection: {
         actionLabel__default: undefined,
@@ -731,22 +751,6 @@ export const beBY: LocalizationResource = {
       },
       title: undefined,
     },
-    backupCodePage: {
-      actionLabel__copied: 'Скапіравана!',
-      actionLabel__copy: 'Скапіраваць усё',
-      actionLabel__download: 'Спампаваць .txt',
-      actionLabel__print: 'Друкаваць',
-      infoText1: 'Рэзервовыя коды будуць уключаны для гэтага ўліковага запісу.',
-      infoText2:
-        'Захоўвайце рэзервовыя коды ў тайне і захоўвайце іх у бяспецы. Вы можаце стварыць новыя рэзервовыя коды, калі падазраеце, што яны былі скампраметаваныя.',
-      subtitle__codelist: 'Захоўвайце іх у бяспецы і не паведамляйце нікому.',
-      successMessage:
-        'Рэзервовыя коды ўключаны. Вы можаце выкарыстоўваць адзін з гэтых кодоў для ўваходу ў свой уліковы запіс, калі вы страціце доступ да свайго аўтэнтыфікацыйнага прылады. Кожны код можа быць выкарыстаны толькі аднойчы.',
-      successSubtitle:
-        'Вы можаце выкарыстоўваць адзін з гэтых кодоў для ўваходу ў свой уліковы запіс, калі вы страціце доступ да свайго аўтэнтыфікацыйнага прылады.',
-      title: 'Дадаць рэзервовы код пацверджання',
-      title__codelist: 'Рэзервовы коды',
-    },
     connectedAccountPage: {
       formHint: 'Выберыце правайдара для падключэння вашага ўліковага запісу.',
       formHint__noAccounts: 'Няма даступных правайдараў знешніх уліковых запісаў.',

packages/localizations/src/bg-BG.ts

@@ -14,13 +14,32 @@ import type { LocalizationResource } from '@clerk/types';
 
 export const bgBG: LocalizationResource = {
   locale: 'bg-BG',
+  backButton: 'Назад',
+  badge__canceledEndsAt: undefined,
+  badge__currentPlan: undefined,
+  badge__default: 'По подразбиране',
+  badge__endsAt: undefined,
+  badge__expired: undefined,
+  badge__otherImpersonatorDevice: 'Друго устройство за имитация',
+  badge__primary: 'Основен',
+  badge__renewsAt: undefined,
+  badge__requiresAction: 'Изисква действие',
+  badge__startsAt: undefined,
+  badge__thisDevice: 'Това устройство',
+  badge__unverified: 'Непотвърден',
+  badge__upcomingPlan: undefined,
+  badge__userDevice: 'Потребителско устройство',
+  badge__you: 'Вие',
   commerce: {
+    alwaysFree: undefined,
     availableFeatures: undefined,
     billedAnnually: undefined,
+    billedMonthlyOnly: undefined,
     cancelSubscription: undefined,
     checkout: {
       description__paymentSuccessful: undefined,
       description__subscriptionSuccessful: undefined,
+      downgradeNotice: undefined,
       emailForm: {
         subtitle: undefined,
         title: undefined,
@@ -43,26 +62,11 @@ export const bgBG: LocalizationResource = {
     month: undefined,
     reSubscribe: undefined,
     seeAllFeatures: undefined,
+    subscribe: undefined,
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,
   },
-  backButton: 'Назад',
-  badge__canceledEndsAt: undefined,
-  badge__currentPlan: undefined,
-  badge__default: 'По подразбиране',
-  badge__endsAt: undefined,
-  badge__expired: undefined,
-  badge__otherImpersonatorDevice: 'Друго устройство за имитация',
-  badge__primary: 'Основен',
-  badge__renewsAt: undefined,
-  badge__requiresAction: 'Изисква действие',
-  badge__startsAt: undefined,
-  badge__thisDevice: 'Това устройство',
-  badge__unverified: 'Непотвърден',
-  badge__upcomingPlan: undefined,
-  badge__userDevice: 'Потребителско устройство',
-  badge__you: 'Вие',
   createOrganization: {
     formButtonSubmit: 'Създаване на организация',
     invitePage: {
@@ -694,6 +698,22 @@ export const bgBG: LocalizationResource = {
     action__signOutAll: 'Изход от всички акаунти',
   },
   userProfile: {
+    backupCodePage: {
+      actionLabel__copied: 'Копирано!',
+      actionLabel__copy: 'Копиране на всички',
+      actionLabel__download: 'Изтегляне на .txt',
+      actionLabel__print: 'Отпечатване',
+      infoText1: 'Резервните кодове ще бъдат активирани за този акаунт.',
+      infoText2:
+        'Дръжте резервните кодове в тайна и ги съхранявайте сигурно. Можете да генерирате нови резервни кодове, ако подозирате, че те са били компрометирани.',
+      subtitle__codelist: 'Запазете ги сигурно и ги държете в тайна.',
+      successMessage:
+        'Резервните кодове са активирани. Можете да използвате един от тях, за да влезете в акаунта си, ако загубите достъпа до устройството си за удостоверяване. Всеки код може да се използва само веднъж.',
+      successSubtitle:
+        'Можете да използвате един от тях, за да влезете в акаунта си, ако загубите достъпа до устройството си за удостоверяване.',
+      title: 'Добавяне на резервен код за потвърждение',
+      title__codelist: 'Резервни кодове',
+    },
     billingPage: {
       paymentSourcesSection: {
         actionLabel__default: undefined,
@@ -722,22 +742,6 @@ export const bgBG: LocalizationResource = {
       },
       title: undefined,
     },
-    backupCodePage: {
-      actionLabel__copied: 'Копирано!',
-      actionLabel__copy: 'Копиране на всички',
-      actionLabel__download: 'Изтегляне на .txt',
-      actionLabel__print: 'Отпечатване',
-      infoText1: 'Резервните кодове ще бъдат активирани за този акаунт.',
-      infoText2:
-        'Дръжте резервните кодове в тайна и ги съхранявайте сигурно. Можете да генерирате нови резервни кодове, ако подозирате, че те са били компрометирани.',
-      subtitle__codelist: 'Запазете ги сигурно и ги държете в тайна.',
-      successMessage:
-        'Резервните кодове са активирани. Можете да използвате един от тях, за да влезете в акаунта си, ако загубите достъпа до устройството си за удостоверяване. Всеки код може да се използва само веднъж.',
-      successSubtitle:
-        'Можете да използвате един от тях, за да влезете в акаунта си, ако загубите достъпа до устройството си за удостоверяване.',
-      title: 'Добавяне на резервен код за потвърждение',
-      title__codelist: 'Резервни кодове',
-    },
     connectedAccountPage: {
       formHint: 'Изберете доставчик, за да свържете вашия профил.',
       formHint__noAccounts: 'Няма налични външни акаунт доставчици.',