fix(clerk-js,types,localizations): Update <Checkout /> header to have x12 prefix when is annual (#5857)

nikospapcom · wobsoriano · commit 9201d5ff2671 · 2025-05-06T12:05:34.000-07:00
diff --git a/.changeset/twenty-clouds-rest.md b/.changeset/twenty-clouds-rest.md
@@ -0,0 +1,7 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Update `<Checkout />` line items to include `x12` prefix when plan is annual
diff --git a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
@@ -47,11 +47,15 @@ export const CheckoutForm = ({
       >
         <LineItems.Root>
           <LineItems.Group borderTop={showDowngradeInfo}>
-            <LineItems.Title title={plan.name} />
+            <LineItems.Title
+              title={plan.name}
+              description={planPeriod === 'annual' ? localizationKeys('commerce.billedAnnually') : undefined}
+            />
             {/* TODO(@Commerce): needs localization */}
             <LineItems.Description
+              prefix={planPeriod === 'annual' ? 'x12' : undefined}
               text={`${plan.currencySymbol}${planPeriod === 'month' ? plan.amountFormatted : plan.annualMonthlyAmountFormatted}`}
-              suffix={`per month${planPeriod === 'annual' ? ', times 12 months' : ''}`}
+              suffix={localizationKeys('commerce.checkout.perMonth')}
             />
           </LineItems.Group>
           <LineItems.Group
diff --git a/packages/clerk-js/src/ui/elements/LineItems.tsx b/packages/clerk-js/src/ui/elements/LineItems.tsx
@@ -163,6 +163,7 @@ function Description({ text, prefix, suffix, truncateText = false, copyText = fa
         sx={t => ({
           display: 'inline-flex',
           justifyContent: 'flex-end',
+          alignItems: 'center',
           gap: t.space.$1,
           minWidth: '0',
         })}
diff --git a/packages/localizations/src/ar-SA.ts b/packages/localizations/src/ar-SA.ts
@@ -51,6 +51,7 @@ export const arSA: LocalizationResource = {
         title__subscriptionBegins: undefined,
         title__totalPaid: undefined,
       },
+      perMonth: undefined,
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
diff --git a/packages/localizations/src/be-BY.ts b/packages/localizations/src/be-BY.ts
@@ -51,6 +51,7 @@ export const beBY: LocalizationResource = {
         title__subscriptionBegins: undefined,
         title__totalPaid: undefined,
       },
+      perMonth: undefined,
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
diff --git a/packages/localizations/src/bg-BG.ts b/packages/localizations/src/bg-BG.ts
@@ -51,6 +51,7 @@ export const bgBG: LocalizationResource = {
         title__subscriptionBegins: undefined,
         title__totalPaid: undefined,
       },
+      perMonth: undefined,
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
diff --git a/packages/localizations/src/ca-ES.ts b/packages/localizations/src/ca-ES.ts
@@ -51,6 +51,7 @@ export const caES: LocalizationResource = {
         title__subscriptionBegins: undefined,
         title__totalPaid: undefined,
       },
+      perMonth: undefined,
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
diff --git a/packages/localizations/src/cs-CZ.ts b/packages/localizations/src/cs-CZ.ts
@@ -51,6 +51,7 @@ export const csCZ: LocalizationResource = {
         title__subscriptionBegins: undefined,
         title__totalPaid: undefined,
       },
+      perMonth: undefined,
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
diff --git a/packages/localizations/src/da-DK.ts b/packages/localizations/src/da-DK.ts
@@ -51,6 +51,7 @@ export const daDK: LocalizationResource = {
         title__subscriptionBegins: undefined,
         title__totalPaid: undefined,
       },
+      perMonth: undefined,
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
diff --git a/packages/localizations/src/de-DE.ts b/packages/localizations/src/de-DE.ts
@@ -51,6 +51,7 @@ export const deDE: LocalizationResource = {
         title__subscriptionBegins: undefined,
         title__totalPaid: undefined,
       },
+      perMonth: undefined,
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
diff --git a/packages/localizations/src/el-GR.ts b/packages/localizations/src/el-GR.ts
@@ -51,6 +51,7 @@ export const elGR: LocalizationResource = {
         title__subscriptionBegins: undefined,
         title__totalPaid: undefined,
       },
+      perMonth: undefined,
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
diff --git a/packages/localizations/src/en-GB.ts b/packages/localizations/src/en-GB.ts
@@ -51,6 +51,7 @@ export const enGB: LocalizationResource = {
         title__subscriptionBegins: undefined,
         title__totalPaid: undefined,
       },
+      perMonth: undefined,
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts
@@ -40,6 +40,7 @@ export const enUS: LocalizationResource = {
         title__subscriptionBegins: 'Subscription begins',
         title__totalPaid: 'Total paid',
       },
+      perMonth: 'per month',
       title__paymentSuccessful: 'Payment was successful!',
       title__subscriptionSuccessful: 'Success!',
     },
diff --git a/packages/localizations/src/es-ES.ts b/packages/localizations/src/es-ES.ts
@@ -51,6 +51,7 @@ export const esES: LocalizationResource = {
         title__subscriptionBegins: undefined,
         title__totalPaid: undefined,
       },
+      perMonth: undefined,
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
diff --git a/packages/localizations/src/es-MX.ts b/packages/localizations/src/es-MX.ts
@@ -51,6 +51,7 @@ export const esMX: LocalizationResource = {
         title__subscriptionBegins: undefined,
         title__totalPaid: undefined,
       },
+      perMonth: undefined,
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
diff --git a/packages/localizations/src/fi-FI.ts b/packages/localizations/src/fi-FI.ts
@@ -51,6 +51,7 @@ export const fiFI: LocalizationResource = {
         title__subscriptionBegins: undefined,
         title__totalPaid: undefined,
       },
+      perMonth: undefined,
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
diff --git a/packages/localizations/src/fr-FR.ts b/packages/localizations/src/fr-FR.ts
@@ -51,6 +51,7 @@ export const frFR: LocalizationResource = {
         title__subscriptionBegins: undefined,
         title__totalPaid: undefined,
       },
+      perMonth: undefined,
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
diff --git a/packages/localizations/src/he-IL.ts b/packages/localizations/src/he-IL.ts
@@ -51,6 +51,7 @@ export const heIL: LocalizationResource = {
         title__subscriptionBegins: undefined,
         title__totalPaid: undefined,
       },
+      perMonth: undefined,
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
diff --git a/packages/localizations/src/hr-HR.ts b/packages/localizations/src/hr-HR.ts
@@ -51,6 +51,7 @@ export const hrHR: LocalizationResource = {
         title__subscriptionBegins: undefined,
         title__totalPaid: undefined,
       },
+      perMonth: undefined,
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
diff --git a/packages/localizations/src/hu-HU.ts b/packages/localizations/src/hu-HU.ts
@@ -51,6 +51,7 @@ export const huHU: LocalizationResource = {
         title__subscriptionBegins: undefined,
         title__totalPaid: undefined,
       },
+      perMonth: undefined,
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
diff --git a/packages/localizations/src/id-ID.ts b/packages/localizations/src/id-ID.ts
@@ -51,6 +51,7 @@ export const idID: LocalizationResource = {
         title__subscriptionBegins: undefined,
         title__totalPaid: undefined,
       },
+      perMonth: undefined,
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
diff --git a/packages/localizations/src/is-IS.ts b/packages/localizations/src/is-IS.ts
@@ -51,6 +51,7 @@ export const isIS: LocalizationResource = {
         title__subscriptionBegins: undefined,
         title__totalPaid: undefined,
       },
+      perMonth: undefined,
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
diff --git a/packages/localizations/src/it-IT.ts b/packages/localizations/src/it-IT.ts
@@ -51,6 +51,7 @@ export const itIT: LocalizationResource = {
         title__subscriptionBegins: undefined,
         title__totalPaid: undefined,
       },
+      perMonth: undefined,
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
diff --git a/packages/localizations/src/ja-JP.ts b/packages/localizations/src/ja-JP.ts
@@ -51,6 +51,7 @@ export const jaJP: LocalizationResource = {
         title__subscriptionBegins: undefined,
         title__totalPaid: undefined,
       },
+      perMonth: undefined,
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
diff --git a/packages/localizations/src/ko-KR.ts b/packages/localizations/src/ko-KR.ts
@@ -51,6 +51,7 @@ export const koKR: LocalizationResource = {
         title__subscriptionBegins: undefined,
         title__totalPaid: undefined,
       },
+      perMonth: undefined,
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
diff --git a/packages/localizations/src/mn-MN.ts b/packages/localizations/src/mn-MN.ts
@@ -51,6 +51,7 @@ export const mnMN: LocalizationResource = {
         title__subscriptionBegins: undefined,
         title__totalPaid: undefined,
       },
+      perMonth: undefined,
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
diff --git a/packages/localizations/src/nb-NO.ts b/packages/localizations/src/nb-NO.ts
@@ -51,6 +51,7 @@ export const nbNO: LocalizationResource = {
         title__subscriptionBegins: undefined,
         title__totalPaid: undefined,
       },
+      perMonth: undefined,
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
diff --git a/packages/localizations/src/nl-BE.ts b/packages/localizations/src/nl-BE.ts
@@ -51,6 +51,7 @@ export const nlBE: LocalizationResource = {
         title__subscriptionBegins: undefined,
         title__totalPaid: undefined,
       },
+      perMonth: undefined,
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
diff --git a/packages/localizations/src/nl-NL.ts b/packages/localizations/src/nl-NL.ts
@@ -51,6 +51,7 @@ export const nlNL: LocalizationResource = {
         title__subscriptionBegins: undefined,
         title__totalPaid: undefined,
       },
+      perMonth: undefined,
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
diff --git a/packages/localizations/src/pl-PL.ts b/packages/localizations/src/pl-PL.ts
@@ -51,6 +51,7 @@ export const plPL: LocalizationResource = {
         title__subscriptionBegins: undefined,
         title__totalPaid: undefined,
       },
+      perMonth: undefined,
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
diff --git a/packages/localizations/src/pt-BR.ts b/packages/localizations/src/pt-BR.ts
@@ -51,6 +51,7 @@ export const ptBR: LocalizationResource = {
         title__subscriptionBegins: undefined,
         title__totalPaid: undefined,
       },
+      perMonth: undefined,
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
diff --git a/packages/localizations/src/pt-PT.ts b/packages/localizations/src/pt-PT.ts
@@ -51,6 +51,7 @@ export const ptPT: LocalizationResource = {
         title__subscriptionBegins: undefined,
         title__totalPaid: undefined,
       },
+      perMonth: undefined,
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
diff --git a/packages/localizations/src/ro-RO.ts b/packages/localizations/src/ro-RO.ts
@@ -51,6 +51,7 @@ export const roRO: LocalizationResource = {
         title__subscriptionBegins: undefined,
         title__totalPaid: undefined,
       },
+      perMonth: undefined,
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
diff --git a/packages/localizations/src/ru-RU.ts b/packages/localizations/src/ru-RU.ts
@@ -51,6 +51,7 @@ export const ruRU: LocalizationResource = {
         title__subscriptionBegins: undefined,
         title__totalPaid: undefined,
       },
+      perMonth: undefined,
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
diff --git a/packages/localizations/src/sk-SK.ts b/packages/localizations/src/sk-SK.ts
@@ -51,6 +51,7 @@ export const skSK: LocalizationResource = {
         title__subscriptionBegins: undefined,
         title__totalPaid: undefined,
       },
+      perMonth: undefined,
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
diff --git a/packages/localizations/src/sr-RS.ts b/packages/localizations/src/sr-RS.ts
@@ -51,6 +51,7 @@ export const srRS: LocalizationResource = {
         title__subscriptionBegins: undefined,
         title__totalPaid: undefined,
       },
+      perMonth: undefined,
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
diff --git a/packages/localizations/src/sv-SE.ts b/packages/localizations/src/sv-SE.ts
@@ -51,6 +51,7 @@ export const svSE: LocalizationResource = {
         title__subscriptionBegins: undefined,
         title__totalPaid: undefined,
       },
+      perMonth: undefined,
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
diff --git a/packages/localizations/src/th-TH.ts b/packages/localizations/src/th-TH.ts
@@ -51,6 +51,7 @@ export const thTH: LocalizationResource = {
         title__subscriptionBegins: undefined,
         title__totalPaid: undefined,
       },
+      perMonth: undefined,
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
diff --git a/packages/localizations/src/tr-TR.ts b/packages/localizations/src/tr-TR.ts
@@ -51,6 +51,7 @@ export const trTR: LocalizationResource = {
         title__subscriptionBegins: undefined,
         title__totalPaid: undefined,
       },
+      perMonth: undefined,
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
diff --git a/packages/localizations/src/uk-UA.ts b/packages/localizations/src/uk-UA.ts
@@ -51,6 +51,7 @@ export const ukUA: LocalizationResource = {
         title__subscriptionBegins: undefined,
         title__totalPaid: undefined,
       },
+      perMonth: undefined,
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
diff --git a/packages/localizations/src/vi-VN.ts b/packages/localizations/src/vi-VN.ts
@@ -51,6 +51,7 @@ export const viVN: LocalizationResource = {
         title__subscriptionBegins: undefined,
         title__totalPaid: undefined,
       },
+      perMonth: undefined,
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
diff --git a/packages/localizations/src/zh-CN.ts b/packages/localizations/src/zh-CN.ts
@@ -51,6 +51,7 @@ export const zhCN: LocalizationResource = {
         title__subscriptionBegins: undefined,
         title__totalPaid: undefined,
       },
+      perMonth: undefined,
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
diff --git a/packages/localizations/src/zh-TW.ts b/packages/localizations/src/zh-TW.ts
@@ -51,6 +51,7 @@ export const zhTW: LocalizationResource = {
         title__subscriptionBegins: undefined,
         title__totalPaid: undefined,
       },
+      perMonth: undefined,
       title__paymentSuccessful: undefined,
       title__subscriptionSuccessful: undefined,
     },
diff --git a/packages/types/src/localization.ts b/packages/types/src/localization.ts
@@ -141,6 +141,7 @@ type _LocalizationResource = {
         subtitle: LocalizationValue;
       };
       downgradeNotice: LocalizationValue;
+      perMonth: LocalizationValue;
     };
   };
   signUp: {
