clerk · octoper · May 6, 2025 · May 6, 2025 · May 6, 2025
diff --git a/.changeset/thin-poems-listen.md b/.changeset/thin-poems-listen.md
@@ -0,0 +1,7 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Show annual amount in the subscriptions list if the subscription has annual plan period
diff --git a/packages/clerk-js/src/core/resources/CommercePlan.ts b/packages/clerk-js/src/core/resources/CommercePlan.ts
@@ -7,6 +7,8 @@ export class CommercePlan extends BaseResource implements CommercePlanResource {
   name!: string;
   amount!: number;
   amountFormatted!: string;
+  annualAmount!: number;
+  annualAmountFormatted!: string;
   annualMonthlyAmount!: number;
   annualMonthlyAmountFormatted!: string;
   currencySymbol!: string;
@@ -35,6 +37,8 @@ export class CommercePlan extends BaseResource implements CommercePlanResource {
     this.name = data.name;
     this.amount = data.amount;
     this.amountFormatted = data.amount_formatted;
+    this.annualAmount = data.annual_amount;
+    this.annualAmountFormatted = data.annual_amount_formatted;
     this.annualMonthlyAmount = data.annual_monthly_amount;
     this.annualMonthlyAmountFormatted = data.annual_monthly_amount_formatted;
     this.currencySymbol = data.currency_symbol;

diff --git a/packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx b/packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx
@@ -131,9 +131,9 @@ export function SubscriptionsList() {
               <Text variant='subtitle'>
                 {subscription.plan.currencySymbol}
                 {subscription.planPeriod === 'annual'
-                  ? subscription.plan.annualMonthlyAmountFormatted
+                  ? subscription.plan.annualAmountFormatted
                   : subscription.plan.amountFormatted}
-                {subscription.plan.amount > 0 && (
+                {(subscription.plan.amount > 0 || subscription.plan.annualAmount > 0) && (
                   <Span
                     sx={t => ({
                       color: t.colors.$colorTextSecondary,
@@ -143,7 +143,11 @@ export function SubscriptionsList() {
                         marginInline: t.space.$1,
                       },
                     })}
-                    localizationKey={localizationKeys('commerce.month')}
+                    localizationKey={
+                      subscription.planPeriod === 'annual'
+                        ? localizationKeys('commerce.year')
+                        : localizationKeys('commerce.month')
+                    }
                   />
                 )}
               </Text>

diff --git a/packages/localizations/src/ar-SA.ts b/packages/localizations/src/ar-SA.ts
@@ -68,6 +68,7 @@ export const arSA: LocalizationResource = {
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,
+    year: undefined,
   },
   createOrganization: {
     formButtonSubmit: 'أنشاء منظمة',

diff --git a/packages/localizations/src/be-BY.ts b/packages/localizations/src/be-BY.ts
@@ -68,6 +68,7 @@ export const beBY: LocalizationResource = {
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,
+    year: undefined,
   },
   createOrganization: {
     formButtonSubmit: 'Стварыць арганізацыю',

diff --git a/packages/localizations/src/bg-BG.ts b/packages/localizations/src/bg-BG.ts
@@ -68,6 +68,7 @@ export const bgBG: LocalizationResource = {
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,
+    year: undefined,
   },
   createOrganization: {
     formButtonSubmit: 'Създаване на организация',

diff --git a/packages/localizations/src/ca-ES.ts b/packages/localizations/src/ca-ES.ts
@@ -68,6 +68,7 @@ export const caES: LocalizationResource = {
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,
+    year: undefined,
   },
   createOrganization: {
     formButtonSubmit: 'Crea organització',

diff --git a/packages/localizations/src/cs-CZ.ts b/packages/localizations/src/cs-CZ.ts
@@ -68,6 +68,7 @@ export const csCZ: LocalizationResource = {
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,
+    year: undefined,
   },
   createOrganization: {
     formButtonSubmit: 'Vytvořit organizaci',

diff --git a/packages/localizations/src/da-DK.ts b/packages/localizations/src/da-DK.ts
@@ -68,6 +68,7 @@ export const daDK: LocalizationResource = {
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,
+    year: undefined,
   },
   createOrganization: {
     formButtonSubmit: 'Opret organisation',

diff --git a/packages/localizations/src/de-DE.ts b/packages/localizations/src/de-DE.ts
@@ -68,6 +68,7 @@ export const deDE: LocalizationResource = {
     switchPlan: 'Zu diesem Plan wechseln',
     switchToAnnual: undefined,
     viewFeatures: undefined,
+    year: undefined,
   },
   createOrganization: {
     formButtonSubmit: 'Organisation erstellen',

diff --git a/packages/localizations/src/el-GR.ts b/packages/localizations/src/el-GR.ts
@@ -68,6 +68,7 @@ export const elGR: LocalizationResource = {
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,
+    year: undefined,
   },
   createOrganization: {
     formButtonSubmit: 'Δημιουργία οργανισμού',

diff --git a/packages/localizations/src/en-GB.ts b/packages/localizations/src/en-GB.ts
@@ -68,6 +68,7 @@ export const enGB: LocalizationResource = {
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,
+    year: undefined,
   },
   createOrganization: {
     formButtonSubmit: 'Create organisation',

diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts
@@ -57,6 +57,7 @@ export const enUS: LocalizationResource = {
     switchPlan: 'Switch to this plan',
     switchToAnnual: 'Switch to annual',
     viewFeatures: 'View features',
+    year: 'Year',
   },
   createOrganization: {
     formButtonSubmit: 'Create organization',

diff --git a/packages/localizations/src/es-ES.ts b/packages/localizations/src/es-ES.ts
@@ -68,6 +68,7 @@ export const esES: LocalizationResource = {
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,
+    year: undefined,
   },
   createOrganization: {
     formButtonSubmit: 'Crear organización',

diff --git a/packages/localizations/src/es-MX.ts b/packages/localizations/src/es-MX.ts
@@ -68,6 +68,7 @@ export const esMX: LocalizationResource = {
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,
+    year: undefined,
   },
   createOrganization: {
     formButtonSubmit: 'Crear organización',

diff --git a/packages/localizations/src/fi-FI.ts b/packages/localizations/src/fi-FI.ts
@@ -68,6 +68,7 @@ export const fiFI: LocalizationResource = {
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,
+    year: undefined,
   },
   createOrganization: {
     formButtonSubmit: 'Luo organisaatio',

diff --git a/packages/localizations/src/fr-FR.ts b/packages/localizations/src/fr-FR.ts
@@ -68,6 +68,7 @@ export const frFR: LocalizationResource = {
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,
+    year: undefined,
   },
   createOrganization: {
     formButtonSubmit: 'Créer l’organisation',

diff --git a/packages/localizations/src/he-IL.ts b/packages/localizations/src/he-IL.ts
@@ -68,6 +68,7 @@ export const heIL: LocalizationResource = {
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,
+    year: undefined,
   },
   createOrganization: {
     formButtonSubmit: 'צור ארגון',

diff --git a/packages/localizations/src/hr-HR.ts b/packages/localizations/src/hr-HR.ts
@@ -68,6 +68,7 @@ export const hrHR: LocalizationResource = {
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,
+    year: undefined,
   },
   createOrganization: {
     formButtonSubmit: 'kreiraj organizaciju',

diff --git a/packages/localizations/src/hu-HU.ts b/packages/localizations/src/hu-HU.ts
@@ -68,6 +68,7 @@ export const huHU: LocalizationResource = {
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,
+    year: undefined,
   },
   createOrganization: {
     formButtonSubmit: 'Szervezet létrehozása',

diff --git a/packages/localizations/src/id-ID.ts b/packages/localizations/src/id-ID.ts
@@ -68,6 +68,7 @@ export const idID: LocalizationResource = {
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,
+    year: undefined,
   },
   createOrganization: {
     formButtonSubmit: 'Buat organisasi',

diff --git a/packages/localizations/src/is-IS.ts b/packages/localizations/src/is-IS.ts
@@ -68,6 +68,7 @@ export const isIS: LocalizationResource = {
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,
+    year: undefined,
   },
   createOrganization: {
     formButtonSubmit: 'Stofna samtök',

diff --git a/packages/localizations/src/it-IT.ts b/packages/localizations/src/it-IT.ts
@@ -68,6 +68,7 @@ export const itIT: LocalizationResource = {
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,
+    year: undefined,
   },
   createOrganization: {
     formButtonSubmit: 'Crea organizzazione',

diff --git a/packages/localizations/src/ja-JP.ts b/packages/localizations/src/ja-JP.ts
@@ -68,6 +68,7 @@ export const jaJP: LocalizationResource = {
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,
+    year: undefined,
   },
   createOrganization: {
     formButtonSubmit: '組織を作成する',

diff --git a/packages/localizations/src/ko-KR.ts b/packages/localizations/src/ko-KR.ts
@@ -68,6 +68,7 @@ export const koKR: LocalizationResource = {
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,
+    year: undefined,
   },
   createOrganization: {
     formButtonSubmit: '조직 만들기',

diff --git a/packages/localizations/src/mn-MN.ts b/packages/localizations/src/mn-MN.ts
@@ -68,6 +68,7 @@ export const mnMN: LocalizationResource = {
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,
+    year: undefined,
   },
   createOrganization: {
     formButtonSubmit: 'Байгуулга үүсгэх',

diff --git a/packages/localizations/src/nb-NO.ts b/packages/localizations/src/nb-NO.ts
@@ -68,6 +68,7 @@ export const nbNO: LocalizationResource = {
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,
+    year: undefined,
   },
   createOrganization: {
     formButtonSubmit: 'Opprett organisasjon',

diff --git a/packages/localizations/src/nl-BE.ts b/packages/localizations/src/nl-BE.ts
@@ -68,6 +68,7 @@ export const nlBE: LocalizationResource = {
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,
+    year: undefined,
   },
   createOrganization: {
     formButtonSubmit: 'Creëer organisatie',

diff --git a/packages/localizations/src/nl-NL.ts b/packages/localizations/src/nl-NL.ts
@@ -68,6 +68,7 @@ export const nlNL: LocalizationResource = {
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,
+    year: undefined,
   },
   createOrganization: {
     formButtonSubmit: 'Creëer organisatie',

diff --git a/packages/localizations/src/pl-PL.ts b/packages/localizations/src/pl-PL.ts
@@ -68,6 +68,7 @@ export const plPL: LocalizationResource = {
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,
+    year: undefined,
   },
   createOrganization: {
     formButtonSubmit: 'Utwórz organizację',

diff --git a/packages/localizations/src/pt-BR.ts b/packages/localizations/src/pt-BR.ts
@@ -68,6 +68,7 @@ export const ptBR: LocalizationResource = {
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,
+    year: undefined,
   },
   createOrganization: {
     formButtonSubmit: 'Criar organização',

diff --git a/packages/localizations/src/pt-PT.ts b/packages/localizations/src/pt-PT.ts
@@ -68,6 +68,7 @@ export const ptPT: LocalizationResource = {
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,
+    year: undefined,
   },
   createOrganization: {
     formButtonSubmit: 'Criar organização',

diff --git a/packages/localizations/src/ro-RO.ts b/packages/localizations/src/ro-RO.ts
@@ -68,6 +68,7 @@ export const roRO: LocalizationResource = {
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,
+    year: undefined,
   },
   createOrganization: {
     formButtonSubmit: 'Creați o organizație',

diff --git a/packages/localizations/src/ru-RU.ts b/packages/localizations/src/ru-RU.ts
@@ -68,6 +68,7 @@ export const ruRU: LocalizationResource = {
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,
+    year: undefined,
   },
   createOrganization: {
     formButtonSubmit: 'Создать организацию',

diff --git a/packages/localizations/src/sk-SK.ts b/packages/localizations/src/sk-SK.ts
@@ -68,6 +68,7 @@ export const skSK: LocalizationResource = {
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,
+    year: undefined,
   },
   createOrganization: {
     formButtonSubmit: 'Vytvoriť organizáciu',

diff --git a/packages/localizations/src/sr-RS.ts b/packages/localizations/src/sr-RS.ts
@@ -68,6 +68,7 @@ export const srRS: LocalizationResource = {
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,
+    year: undefined,
   },
   createOrganization: {
     formButtonSubmit: 'Kreiraj organizaciju',

diff --git a/packages/localizations/src/sv-SE.ts b/packages/localizations/src/sv-SE.ts
@@ -68,6 +68,7 @@ export const svSE: LocalizationResource = {
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,
+    year: undefined,
   },
   createOrganization: {
     formButtonSubmit: 'Skapa organisation',

diff --git a/packages/localizations/src/th-TH.ts b/packages/localizations/src/th-TH.ts
@@ -68,6 +68,7 @@ export const thTH: LocalizationResource = {
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,
+    year: undefined,
   },
   createOrganization: {
     formButtonSubmit: 'สร้างองค์กร',

diff --git a/packages/localizations/src/tr-TR.ts b/packages/localizations/src/tr-TR.ts
@@ -68,6 +68,7 @@ export const trTR: LocalizationResource = {
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,
+    year: undefined,
   },
   createOrganization: {
     formButtonSubmit: 'Oluştur',

diff --git a/packages/localizations/src/uk-UA.ts b/packages/localizations/src/uk-UA.ts
@@ -68,6 +68,7 @@ export const ukUA: LocalizationResource = {
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,
+    year: undefined,
   },
   createOrganization: {
     formButtonSubmit: 'Створити організацію',

diff --git a/packages/localizations/src/vi-VN.ts b/packages/localizations/src/vi-VN.ts
@@ -68,6 +68,7 @@ export const viVN: LocalizationResource = {
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,
+    year: undefined,
   },
   createOrganization: {
     formButtonSubmit: 'Tạo tổ chức',

diff --git a/packages/localizations/src/zh-CN.ts b/packages/localizations/src/zh-CN.ts
@@ -68,6 +68,7 @@ export const zhCN: LocalizationResource = {
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,
+    year: undefined,
   },
   createOrganization: {
     formButtonSubmit: '创建组织',

diff --git a/packages/localizations/src/zh-TW.ts b/packages/localizations/src/zh-TW.ts
@@ -68,6 +68,7 @@ export const zhTW: LocalizationResource = {
     switchPlan: undefined,
     switchToAnnual: undefined,
     viewFeatures: undefined,
+    year: undefined,
   },
   createOrganization: {
     formButtonSubmit: '創建組織',

diff --git a/packages/types/src/commerce.ts b/packages/types/src/commerce.ts
@@ -44,6 +44,8 @@ export interface CommercePlanResource extends ClerkResource {
   name: string;
   amount: number;
   amountFormatted: string;
+  annualAmount: number;
+  annualAmountFormatted: string;
   annualMonthlyAmount: number;
   annualMonthlyAmountFormatted: string;
   currencySymbol: string;

diff --git a/packages/types/src/json.ts b/packages/types/src/json.ts
@@ -599,6 +599,8 @@ export interface CommercePlanJSON extends ClerkResourceJSON {
   name: string;
   amount: number;
   amount_formatted: string;
+  annual_amount: number;
+  annual_amount_formatted: string;
   annual_monthly_amount: number;
   annual_monthly_amount_formatted: string;
   currency_symbol: string;

diff --git a/packages/types/src/localization.ts b/packages/types/src/localization.ts
@@ -107,6 +107,7 @@ type _LocalizationResource = {
   membershipRole__guestMember: LocalizationValue;
   commerce: {
     month: LocalizationValue;
+    year: LocalizationValue;
     free: LocalizationValue;
     getStarted: LocalizationValue;
     manage: LocalizationValue;