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

.changeset/dull-ads-type.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('__experimental_commerce.checkout.downgradeNotice')}
+            variant='caption'
+            colorScheme='secondary'
+          />
+        </Box>
+      )}
+
       <CheckoutFormElements
         checkout={checkout}
         onCheckoutComplete={onCheckoutComplete}

packages/localizations/src/ar-SA.ts

@@ -15,12 +15,15 @@ import type { LocalizationResource } from '@clerk/types';
 export const arSA: LocalizationResource = {
   locale: 'ar-SA',
   __experimental_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,6 +46,7 @@ export const arSA: LocalizationResource = {
     month: undefined,
     reSubscribe: undefined,
     seeAllFeatures: undefined,
+    subscribe: undefined,
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,

packages/localizations/src/be-BY.ts

@@ -15,12 +15,15 @@ import type { LocalizationResource } from '@clerk/types';
 export const beBY: LocalizationResource = {
   locale: 'be-BY',
   __experimental_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,6 +46,7 @@ export const beBY: LocalizationResource = {
     month: undefined,
     reSubscribe: undefined,
     seeAllFeatures: undefined,
+    subscribe: undefined,
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,

packages/localizations/src/bg-BG.ts

@@ -15,12 +15,15 @@ import type { LocalizationResource } from '@clerk/types';
 export const bgBG: LocalizationResource = {
   locale: 'bg-BG',
   __experimental_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,6 +46,7 @@ export const bgBG: LocalizationResource = {
     month: undefined,
     reSubscribe: undefined,
     seeAllFeatures: undefined,
+    subscribe: undefined,
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,

packages/localizations/src/ca-ES.ts

@@ -15,12 +15,15 @@ import type { LocalizationResource } from '@clerk/types';
 export const caES: LocalizationResource = {
   locale: 'ca-ES',
   __experimental_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,6 +46,7 @@ export const caES: LocalizationResource = {
     month: undefined,
     reSubscribe: undefined,
     seeAllFeatures: undefined,
+    subscribe: undefined,
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,

packages/localizations/src/cs-CZ.ts

@@ -15,12 +15,15 @@ import type { LocalizationResource } from '@clerk/types';
 export const csCZ: LocalizationResource = {
   locale: 'cs-CZ',
   __experimental_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,6 +46,7 @@ export const csCZ: LocalizationResource = {
     month: undefined,
     reSubscribe: undefined,
     seeAllFeatures: undefined,
+    subscribe: undefined,
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,

packages/localizations/src/da-DK.ts

@@ -15,12 +15,15 @@ import type { LocalizationResource } from '@clerk/types';
 export const daDK: LocalizationResource = {
   locale: 'da-DK',
   __experimental_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,6 +46,7 @@ export const daDK: LocalizationResource = {
     month: undefined,
     reSubscribe: undefined,
     seeAllFeatures: undefined,
+    subscribe: undefined,
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,

packages/localizations/src/de-DE.ts

@@ -15,12 +15,15 @@ import type { LocalizationResource } from '@clerk/types';
 export const deDE: LocalizationResource = {
   locale: 'de-DE',
   __experimental_commerce: {
+    alwaysFree: undefined,
     availableFeatures: undefined,
     billedAnnually: 'Jährlich abgerechnet',
+    billedMonthlyOnly: undefined,
     cancelSubscription: undefined,
     checkout: {
       description__paymentSuccessful: undefined,
       description__subscriptionSuccessful: undefined,
+      downgradeNotice: undefined,
       emailForm: {
         subtitle: undefined,
         title: undefined,
@@ -43,6 +46,7 @@ export const deDE: LocalizationResource = {
     month: 'Monat',
     reSubscribe: undefined,
     seeAllFeatures: undefined,
+    subscribe: undefined,
     switchPlan: 'Zu diesem Plan wechseln',
     switchToAnnual: undefined,
     viewFeatures: undefined,

packages/localizations/src/el-GR.ts

@@ -15,12 +15,15 @@ import type { LocalizationResource } from '@clerk/types';
 export const elGR: LocalizationResource = {
   locale: 'el-GR',
   __experimental_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,6 +46,7 @@ export const elGR: LocalizationResource = {
     month: undefined,
     reSubscribe: undefined,
     seeAllFeatures: undefined,
+    subscribe: undefined,
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,

packages/localizations/src/en-GB.ts

@@ -15,12 +15,15 @@ import type { LocalizationResource } from '@clerk/types';
 export const enGB: LocalizationResource = {
   locale: 'en-GB',
   __experimental_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,6 +46,7 @@ export const enGB: LocalizationResource = {
     month: undefined,
     reSubscribe: undefined,
     seeAllFeatures: undefined,
+    subscribe: undefined,
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,

packages/localizations/src/en-US.ts

@@ -3,14 +3,16 @@ import type { LocalizationResource } from '@clerk/types';
 export const enUS: LocalizationResource = {
   locale: 'en-US',
   __experimental_commerce: {
+    alwaysFree: 'Always free',
     availableFeatures: 'Available features',
     billedAnnually: 'Billed annually',
     billedMonthlyOnly: 'Only billed monthly',
-    alwaysFree: 'Always free',
     cancelSubscription: 'Cancel subscription',
     checkout: {
       description__paymentSuccessful: 'Your new subscription is all set.',
       description__subscriptionSuccessful: 'Your new subscription is all set.',
+      downgradeNotice:
+        'You will keep your current subscription and its features until the end of the billing cycle, then you will be switched to this subscription.',
       emailForm: {
         subtitle: 'Before you can complete your purchase you must add an email address where receipts will be sent.',
         title: 'Add an email address',

packages/localizations/src/es-ES.ts

@@ -15,12 +15,15 @@ import type { LocalizationResource } from '@clerk/types';
 export const esES: LocalizationResource = {
   locale: 'es-ES',
   __experimental_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,6 +46,7 @@ export const esES: LocalizationResource = {
     month: undefined,
     reSubscribe: undefined,
     seeAllFeatures: undefined,
+    subscribe: undefined,
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,

packages/localizations/src/es-MX.ts

@@ -15,12 +15,15 @@ import type { LocalizationResource } from '@clerk/types';
 export const esMX: LocalizationResource = {
   locale: 'es-MX',
   __experimental_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,6 +46,7 @@ export const esMX: LocalizationResource = {
     month: undefined,
     reSubscribe: undefined,
     seeAllFeatures: undefined,
+    subscribe: undefined,
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,

packages/localizations/src/fi-FI.ts

@@ -15,12 +15,15 @@ import type { LocalizationResource } from '@clerk/types';
 export const fiFI: LocalizationResource = {
   locale: 'fi-FI',
   __experimental_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,6 +46,7 @@ export const fiFI: LocalizationResource = {
     month: undefined,
     reSubscribe: undefined,
     seeAllFeatures: undefined,
+    subscribe: undefined,
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,

packages/localizations/src/fr-FR.ts

@@ -15,12 +15,15 @@ import type { LocalizationResource } from '@clerk/types';
 export const frFR: LocalizationResource = {
   locale: 'fr-FR',
   __experimental_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,6 +46,7 @@ export const frFR: LocalizationResource = {
     month: undefined,
     reSubscribe: undefined,
     seeAllFeatures: undefined,
+    subscribe: undefined,
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,