chore(clerk-js,localizations): Reposition manage subscription button #6428
Conversation
🦋 Changeset detectedLatest commit: efc0412 The changes in this PR will be included in the next version bump. This PR includes changesets to release 22 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
@clerk/agent-toolkit
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/dev-cli
@clerk/elements
@clerk/clerk-expo
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/clerk-react
@clerk/react-router
@clerk/remix
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/themes
@clerk/types
@clerk/upgrade
@clerk/vue
commit: |
📝 WalkthroughWalkthroughThis change set introduces a new "Manage Subscription" button to the subscriptions list UI in both user and organization billing pages. The Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Note 🔌 MCP (Model Context Protocol) integration is now available in Early Access!Pro users can now connect to remote MCP servers under the Integrations page to get reviews and chat conversations that understand additional development context. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (52)
✅ Files skipped from review due to trivial changes (18)
🚧 Files skipped from review as they are similar to previous changes (34)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 8
🔭 Outside diff range comments (6)
packages/localizations/src/it-IT.ts (2)
311-318: TranslateactionLabel__manageSubscriptioninstead of leavingundefined.Leaving the value
undefinedforces a fallback to English, breaking the otherwise–complete Italian experience.
Use the existing wording already present in the commerce section (manageSubscription: 'Gestisci abbonamento').- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'Gestisci abbonamento',
964-971: Duplicate missing translation – apply the same fix here.Ensure consistency between organization and user billing pages.
- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'Gestisci abbonamento',packages/localizations/src/ru-RU.ts (2)
306-313: Provide a Russian translation foractionLabel__manageSubscription.Undefined strings degrade UX; propose a concise, formal translation:
- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'Управлять подпиской',
970-977: Same key missing in the user-profile section – update accordingly.- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'Управлять подпиской',packages/localizations/src/vi-VN.ts (1)
308-315: Provide Vietnamese text for the newactionLabel__manageSubscriptionkeyThe new key is currently
undefined, so the button will render an empty label in the UI. A concise, existing equivalent already lives undercommerce.manageSubscriptionas"Quản lý đăng ký". Re-using the same phrase keeps the locale complete and consistent.- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'Quản lý đăng ký',Also applies to: 962-969
packages/localizations/src/en-GB.ts (1)
302-310: Fill in missing localization keys in en-GB
Replace allundefinedvalues insubscriptionsListSectionwith the matching plain-English strings from the base en-US locale. Shippingundefinedcauses a fallback or empty UI label.SubscriptionsListSection should be:
subscriptionsListSection: { - actionLabel__manageSubscription: undefined, - actionLabel__newSubscription: undefined, - actionLabel__switchPlan: undefined, - tableHeader__edit: undefined, - tableHeader__plan: undefined, - tableHeader__startDate: undefined, - title: undefined, + actionLabel__manageSubscription: 'Manage', + actionLabel__newSubscription: 'Subscribe to a plan', + actionLabel__switchPlan: 'Switch plans', + tableHeader__edit: 'Edit', + tableHeader__plan: 'Plan', + tableHeader__startDate: 'Start date', + title: 'Subscription', },• Apply this change at both occurrences in
packages/localizations/src/en-GB.ts.
• Confirm no remainingundefinedvalues for these keys.
♻️ Duplicate comments (5)
packages/localizations/src/id-ID.ts (1)
963-967: Duplicate missing translation in user profile section.Same recommendation applies here; keep the wording identical so UI copy stays consistent.
- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'Kelola langganan',packages/localizations/src/he-IL.ts (1)
942-946: Same missing Hebrew string in user profile subsection.Keep the text identical across sections.
- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'נהל מנוי',packages/localizations/src/bn-IN.ts (1)
964-964: Duplicate issue – user profile section also needs a translation.Same concern as above for the user-profile path; supply a Bengali translation or insert a TODO.
packages/localizations/src/sk-SK.ts (1)
961-961: Repeat of untranslated key in user profile section.Add the same Slovak translation (or a TODO) here to avoid fallback to English.
packages/localizations/src/el-GR.ts (1)
959-962: Same issue for the user profile section – please translateReplicate (or reference) the translated text added above to keep consistency between organization and user billing pages.
🧹 Nitpick comments (63)
packages/localizations/src/zh-CN.ts (1)
301-301: Provide actual translation for the new key
actionLabel__manageSubscriptionwas added withundefinedvalue in both user- and organization-profile sections.
Leaving itundefinedwill make the UI fall back to English. If a Chinese translation is intended, please supply it before shipping.Also applies to: 937-937
packages/localizations/src/ca-ES.ts (2)
301-309: Add the actual Catalan text for the new key
actionLabel__manageSubscriptionis introduced asundefined, so the UI will fall back to English. Please supply the Catalan translation (e.g.'Gestiona subscripció'or similar) or add a TODO so it doesn’t get overlooked.
954-962: Same missing translation under the user profile pathThe same key is still
undefinedhere. Provide the localized string to keep parity with the organization section.packages/localizations/src/da-DK.ts (2)
302-310: Provide Danish wording for the new label
actionLabel__manageSubscriptionshould get a Danish value (e.g.'Administrer abonnement'). Leaving itundefinedwill surface English in the UI.
951-959: Duplicate omission — user profile sectionFill in the Danish translation here as well so both paths are covered.
packages/localizations/src/es-UY.ts (1)
965-967: Duplicate placeholder – update here as wellRemember to keep the string in sync for the user-profile variant:
- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'Gestionar',After adding the translations, run the i18n extraction check to ensure no missing keys remain.
packages/localizations/src/th-TH.ts (2)
301-305: Add a proper Thai translation for the new keyThe newly-added
actionLabel__manageSubscriptionis stillundefined, which means the UI will fall back to English.
Please supply a Thai string (e.g. “จัดการการสมัครสมาชิก”) to keep this locale complete.- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'จัดการการสมัครสมาชิก',
951-954: Duplicate missing translation – fix here as wellSame remark for the user profile section. Provide the Thai text so both occurrences are covered.
- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'จัดการการสมัครสมาชิก',packages/localizations/src/de-DE.ts (2)
308-312: Fill in the German wording instead of leavingundefined
actionLabel__manageSubscriptionshould get an actual value.
Reuse the wording already present incommerce.manageSubscriptionto stay consistent:- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'Mitgliedschaft verwalten',
975-978: Same update needed for the user profile copyProvide the German translation here as well.
- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'Mitgliedschaft verwalten',packages/localizations/src/hu-HU.ts (2)
301-303: Provide actual Hungarian copy for the new key instead ofundefinedLeaving the new
actionLabel__manageSubscriptionvalue asundefinedwill make the UI fall back to the base language.
Suggested HU string: “Előfizetés kezelése”.- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'Előfizetés kezelése',
954-956: Duplicate missing translation – same fix needed in userProfile nodeMirror the translation you add above so both sections stay in sync.
- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'Előfizetés kezelése',packages/localizations/src/tr-TR.ts (2)
301-303: Add Turkish translation for the new “manage subscription” labelUndefined will fall back to English.
Suggested TR string: “Aboneliği yönet”.- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'Aboneliği yönet',
958-960: Repeat the Turkish copy in the userProfile sectionKeep both occurrences aligned.
- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'Aboneliği yönet',packages/localizations/src/sr-RS.ts (2)
302-302: Fill in the missing Serbian translation for the new “manage subscription” labelLeaving the value
undefinedmeans the UI will fall back to the base (English) string or show nothing.
Provide an explicit Serbian string so the new button is localized.- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'Upravljaj',
954-954: Duplicate missing translation in user profile sectionSame issue as above: supply a Serbian translation instead of
undefinedto keep parity between organization-level and user-level billing pages.- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'Upravljaj',packages/localizations/src/fr-FR.ts (2)
308-308: Add the French string for the new “manage subscription” action
undefinedwill fall back to English; complete the translation for consistency.- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'Gérer',
967-967: Same missing translation in user billing sectionEnsure the user-profile copy is also translated.
- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'Gérer',packages/localizations/src/ar-SA.ts (2)
302-304: Provide Arabic translation instead ofundefined
actionLabel__manageSubscriptionis surfaced to end-users; shippingundefinedwill fall back to English and break consistency with the other Arabic strings.- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'إدارة الاشتراك',
951-953: Missing translation for user-profile contextSame key is still
undefinedunder the user billing page. Supply an Arabic string that matches the org-profile one to keep wording consistent.- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'إدارة الاشتراك',packages/localizations/src/ro-RO.ts (2)
303-305: Add Romanian text for the new button labelLeaving the key blank will fall back to English. Suggested formal & friendly wording:
- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'Gestionați abonamentul',
957-959: Duplicate missing translation in user profile sectionReplicate the same Romanian translation for the user billing page block.
- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'Gestionați abonamentul',packages/localizations/src/be-BY.ts (1)
304-311: Add Belarusian text foractionLabel__manageSubscriptionLeaving the key
undefinedmeans the button label will be blank. A short, clear translation would be “Кіраваць падпіскай”.- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'Кіраваць падпіскай',Optional – the file already contains many placeholders, but filling new UI-visible strings prevents regressions.
Also applies to: 961-968
packages/localizations/src/ms-MY.ts (2)
304-306: Provide Malay translation instead of keeping value undefinedThe key
actionLabel__manageSubscriptionwill surface directly in the UI. Leaving itundefinedresults in the user seeing a fallback (usually the raw key).
Re-use the wording already chosen for the commerce section ('Urus keahlian') to stay consistent with the rest of the locale.- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'Urus keahlian',
970-973: Duplicate missing value – fix here as wellSame key under the user profile section is still
undefined. Apply the same translation so both billing pages stay aligned.- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'Urus keahlian',packages/localizations/src/kk-KZ.ts (2)
302-304: Add Kazakh translation to avoid UI fallback
actionLabel__manageSubscriptionshould get the same translation used in the commerce block ('Жазылымды басқару') instead of remainingundefined.- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'Жазылымды басқару',
941-943: Mirror the translation for the user profile billing pagePopulate the value here as well for consistency.
- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'Жазылымды басқару',packages/localizations/src/fa-IR.ts (2)
308-315: Provide a concrete Persian translation instead ofundefinedThe new key is currently
undefined, so UI will fall back to the default (English) string.
There’s already a suitable Persian phrase in the same file (commerce.manageSubscription: 'مدیریت اشتراک'). Re-use it here for consistency.- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'مدیریت اشتراک',
964-971: Duplicate missing translation – fix as aboveThe same key under
userProfile.billingPage.subscriptionsListSectionalso needs the concrete value.- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'مدیریت اشتراک',packages/localizations/src/nl-NL.ts (2)
302-309: Missing Dutch translation for new keyLeaving this
undefinedwill surface an English fallback. Suggested Dutch copy:- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'Abonnement beheren',
954-961: Repeat the Dutch translation for the user profile blockSame fix needed here:
- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'Abonnement beheren',packages/localizations/src/pt-PT.ts (2)
301-304: Add the actual Portuguese translation for the new label
actionLabel__manageSubscriptionis currentlyundefined.
Suggested wording: “Gerir subscrição” to stay consistent with the existing commerce terms (“Gerir”, “subscrição”) in this locale.- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'Gerir subscrição',
954-956: Duplicate missing translation in user profile sectionSame key is also left
undefinedhere. Apply the same fix to avoid runtime fallback to the base locale.- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'Gerir subscrição',packages/localizations/src/es-ES.ts (2)
303-305: Provide Spanish wording for the new “Manage subscription” label
actionLabel__manageSubscriptionis missing.
Recommended translation: “Gestionar suscripción”.- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'Gestionar suscripción',
958-960: Replicate the translation in the user profile sectionEnsure the same Spanish string is supplied here as well.
- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'Gestionar suscripción',packages/localizations/src/en-GB.ts (1)
959-967: Duplicate placeholder – fill with a value or delete if not used.The exact key is introduced again under
userProfile.billingPage.subscriptionsListSection.
Leaving two separateundefinedvalues increases the chance of forgetting to translate one of them later. Either:
- Assign the same string as above, or
- Remove this second entry if the higher-level one is sufficient (deduplicating relies on how the i18n merge works).
packages/localizations/src/uk-UA.ts (2)
302-310: Add Ukrainian translation for the new label.
actionLabel__manageSubscriptioncurrently falls back to the base locale.
Suggested UA translation:- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'Керувати підпискою',
951-958: Fill in the second occurrence or remove duplication.Repeat of the key under the user-profile section is also
undefined. Populate it with the same Ukrainian text or deduplicate as appropriate.packages/localizations/src/sv-SE.ts (1)
303-304: Provide actual Swedish translation for the new “Manage subscription” labelThe newly-added
actionLabel__manageSubscriptionkeys are stillundefined, so they will fall back to the default (likely English).
Suggested translation:Hantera prenumeration.- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'Hantera prenumeration',Happy to open a follow-up PR with the full update if that helps.
Also applies to: 957-958
packages/localizations/src/ko-KR.ts (1)
303-304: Add missing Korean string for “Manage subscription”
actionLabel__manageSubscriptionis leftundefined, causing a fallback to English in the UI.
Suggested translation:구독 관리.- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: '구독 관리',Let me know if you’d like a patch with this change applied across all Korean resources.
Also applies to: 947-948
packages/localizations/src/zh-TW.ts (2)
301-301: New localization key added but needs translation.The new
actionLabel__manageSubscriptionkey follows the correct structure and naming convention. However, this should be translated to Traditional Chinese to provide proper localization support.Consider providing the Traditional Chinese translation:
- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: '管理訂閱',
936-936: New localization key added but needs translation.The new
actionLabel__manageSubscriptionkey is correctly placed and follows established conventions. However, like the organization profile section, this should be translated to Traditional Chinese.Consider providing the Traditional Chinese translation:
- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: '管理訂閱',packages/localizations/src/bg-BG.ts (2)
302-302: New localization key added but needs Bulgarian translation.The structural addition is correct and follows established patterns. However, this should be translated to Bulgarian for proper localization support.
Consider providing the Bulgarian translation:
- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'Управление на абонамента',
952-952: New localization key added but needs Bulgarian translation.The key addition is structurally sound and maintains consistency with the organization profile section. Consider translating to Bulgarian for complete localization support.
Consider providing the Bulgarian translation:
- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'Управление на абонамента',packages/localizations/src/is-IS.ts (2)
302-305: Provide Icelandic translation foractionLabel__manageSubscriptionLeaving the value
undefinedwill surface an empty label or the raw key in the UI.
Suggested Icelandic copy:- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'Stjórna áskrift',I can open a follow-up PR to batch-fill the missing text across all locales if helpful.
957-960: Duplicate missing translation in user profile sectionSame issue here—please add the Icelandic string to keep the user and organization pages consistent.
- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'Stjórna áskrift',packages/localizations/src/ja-JP.ts (2)
302-305: Add Japanese copy foractionLabel__manageSubscriptionUndefined will fall back to an empty/English label.
Proposed translation:- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'サブスクリプションを管理',
953-956: Same missing translation in user profile sectionPlease mirror the Japanese text here as well for consistency.
- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'サブスクリプションを管理',packages/localizations/src/hi-IN.ts (1)
304-311: Provide the actual Hindi translation for the newactionLabel__manageSubscriptionkeyThe key has been introduced but its value is
undefined, which will surface as a missing-string placeholder at runtime.
A safe, already-present phrasing exists in this file (commerce.manageSubscription: "सदस्यता प्रबंधित करें"). Re-use it to keep wording consistent and avoid gaps.- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'सदस्यता प्रबंधित करें',Repeat the same change for the second occurrence under
userProfile.billingPage.subscriptionsListSection.Also applies to: 965-972
packages/localizations/src/ta-IN.ts (1)
304-311: Fill in the Tamil translation instead of leaving the keyundefined
actionLabel__manageSubscriptionis required by the UI and currently resolves toundefined.
You can mirror the existing wording already present incommerce.manageSubscriptionto preserve consistency:- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'சந்தாவை நிர்வகிக்கவும்',Apply the same update to the corresponding key inside
userProfile.billingPage.subscriptionsListSection.Also applies to: 971-978
packages/localizations/src/hr-HR.ts (2)
302-302: Consider providing Croatian translation for the new manage subscription label.The new
actionLabel__manageSubscriptionkey has been added with anundefinedvalue. While this follows the pattern for community-maintained localization files, Croatian users would benefit from a proper translation. Consider providing a translation like"Upravljaj pretplatom"or similar.
960-960: Consistent addition - same translation consideration applies.The
actionLabel__manageSubscriptionkey has been consistently added to the user profile billing section as well. The same recommendation for providing a Croatian translation applies here for better user experience.packages/localizations/src/fi-FI.ts (2)
303-303: Consider providing Finnish translation for manage subscription functionality.The new
actionLabel__manageSubscriptionkey follows the established pattern but lacks a Finnish translation. Consider providing a translation like"Hallitse tilausta"to improve the user experience for Finnish users.
955-955: Consistent implementation across billing contexts.The
actionLabel__manageSubscriptionkey has been consistently added to both organization and user profile billing sections. This maintains structural consistency with the broader localization update.packages/localizations/src/cs-CZ.ts (1)
308-308: Provide the actual Czech translation instead ofundefinedThe new key
actionLabel__manageSubscriptionis left asundefinedin both Organization and User billing sections.
A translation already exists in the same file undercommerce.manageSubscription('Spravovat předplatné'). Re-use it here so the UI doesn’t fall back to English.- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'Spravovat předplatné',Also applies to: 964-964
packages/localizations/src/mn-MN.ts (1)
303-303: Missing Mongolian translation for the new key
actionLabel__manageSubscriptionwas added but leftundefined.
Please supply the Mongolian wording (e.g.'Захиалгыг удирдах') to avoid a runtime fallback.- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'Захиалгыг удирдах',Also applies to: 955-955
packages/localizations/src/nl-BE.ts (1)
301-304: Add an actual Dutch string instead ofundefinedfor the new keyLeaving
actionLabel__manageSubscriptionasundefinedmeans the UI will silently fall back to English or an empty label.
Suggested quick fix:- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'Beheer abonnement',If you prefer another wording (“Abonnement beheren”, …) feel free to adjust.
packages/localizations/src/es-CR.ts (1)
303-306: Provide the Spanish text instead ofundefinedFor
es-CR, a reasonable translation would be:- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'Gestionar suscripción',This avoids falling back to English in the UI.
packages/localizations/src/bn-IN.ts (1)
304-304: Provide a real Bengali string instead ofundefined.The newly-added
actionLabel__manageSubscriptionkey is left asundefined.
Without a concrete value the UI will fall back to English, defeating the purpose of adding a Bengali entry.Example fix:
- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'সদস্যতা পরিচালনা করুন',If you’re uncertain about the exact phrasing, leave a TODO comment so translators can pick it up.
packages/localizations/src/te-IN.ts (2)
303-303: Missing translation for new manage subscription key.The new
actionLabel__manageSubscriptionkey has been properly added but needs a Telugu translation. Theundefinedvalue indicates this translation is incomplete.Consider adding the Telugu translation for "Manage subscription" to complete this localization entry, or flag this for completion by Telugu speakers.
967-967: Missing translation for new manage subscription key.The new
actionLabel__manageSubscriptionkey has been properly added but needs a Telugu translation. Theundefinedvalue indicates this translation is incomplete.Consider adding the Telugu translation for "Manage subscription" to complete this localization entry, or flag this for completion by Telugu speakers.
packages/localizations/src/el-GR.ts (1)
302-305: Provide a real Greek string for the newactionLabel__manageSubscriptionkeyThe new key is added but still set to
undefined. This will fall back to the default locale at runtime, producing an English label while the surrounding UI is (mostly) Greek.If a proper translation is not yet available, consider at least adding the English text as a stop-gap so users do not see a blank label.
Example:- actionLabel__manageSubscription: undefined, + actionLabel__manageSubscription: 'Διαχείριση συνδρομής',(Adjust wording/grammar as needed before merge.)
packages/clerk-js/src/ui/elements/Section.tsx (1)
214-232: Remove unuseddisableAnimationpropThe
disableAnimationprop is defined in the component interface but never used in the implementation. This creates confusion about the component's capabilities.-type ProfileSectionButtonGroupProps = PropsOfComponent<typeof Flex> & { - id: ProfileSectionId; - disableAnimation?: boolean; -}; +type ProfileSectionButtonGroupProps = PropsOfComponent<typeof Flex> & { + id: ProfileSectionId; +};
| subscriptionsListSection: { | ||
| actionLabel__manageSubscription: undefined, | ||
| actionLabel__newSubscription: undefined, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Provide the actual Spanish translation instead of undefined.
The new key is left as undefined, yet the same wording already exists in commerce.manageSubscription ('Gestionar suscripción'). Re-use that translation here to avoid missing labels at runtime.
- actionLabel__manageSubscription: undefined,
+ actionLabel__manageSubscription: 'Gestionar suscripción',📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| subscriptionsListSection: { | |
| actionLabel__manageSubscription: undefined, | |
| actionLabel__newSubscription: undefined, | |
| subscriptionsListSection: { | |
| - actionLabel__manageSubscription: undefined, | |
| + actionLabel__manageSubscription: 'Gestionar suscripción', | |
| actionLabel__newSubscription: undefined, |
🤖 Prompt for AI Agents
In packages/localizations/src/es-MX.ts around lines 303 to 305, the keys
actionLabel__manageSubscription and actionLabel__newSubscription are set to
undefined, causing missing labels at runtime. Replace undefined with the actual
Spanish translations; for actionLabel__manageSubscription, reuse the existing
translation 'Gestionar suscripción' from commerce.manageSubscription, and
provide the appropriate Spanish translation for actionLabel__newSubscription to
ensure all labels display correctly.
| subscriptionsListSection: { | ||
| actionLabel__manageSubscription: undefined, | ||
| actionLabel__newSubscription: undefined, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Duplicate missing translation – fill it as well.
Ensure consistency between organization and user billing pages.
- actionLabel__manageSubscription: undefined,
+ actionLabel__manageSubscription: 'Gestionar suscripción',📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| subscriptionsListSection: { | |
| actionLabel__manageSubscription: undefined, | |
| actionLabel__newSubscription: undefined, | |
| subscriptionsListSection: { | |
| - actionLabel__manageSubscription: undefined, | |
| + actionLabel__manageSubscription: 'Gestionar suscripción', | |
| actionLabel__newSubscription: undefined, |
🤖 Prompt for AI Agents
In packages/localizations/src/es-MX.ts around lines 964 to 966, the translation
keys actionLabel__manageSubscription and actionLabel__newSubscription are set to
undefined, causing missing translations. Provide the appropriate Spanish
translations for these keys to ensure consistency between organization and user
billing pages.
| subscriptionsListSection: { | ||
| actionLabel__manageSubscription: undefined, | ||
| actionLabel__newSubscription: undefined, | ||
| actionLabel__switchPlan: undefined, | ||
| tableHeader__edit: undefined, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add the Hebrew translation for the new key.
Undefined will render an empty button label. Suggested Hebrew copy:
- actionLabel__manageSubscription: undefined,
+ actionLabel__manageSubscription: 'נהל מנוי',Happy to supply a verified translation or coordinate with the community translator if needed.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| subscriptionsListSection: { | |
| actionLabel__manageSubscription: undefined, | |
| actionLabel__newSubscription: undefined, | |
| actionLabel__switchPlan: undefined, | |
| tableHeader__edit: undefined, | |
| subscriptionsListSection: { | |
| actionLabel__manageSubscription: 'נהל מנוי', | |
| actionLabel__newSubscription: undefined, | |
| actionLabel__switchPlan: undefined, | |
| tableHeader__edit: undefined, |
🤖 Prompt for AI Agents
In packages/localizations/src/he-IL.ts around lines 301 to 305, the keys under
subscriptionsListSection are set to undefined, which results in empty button
labels. Replace the undefined values with the appropriate Hebrew translations
for each key to ensure the UI displays meaningful labels. If unsure about the
exact translations, coordinate with a community translator or use a verified
translation source.
| subscriptionsListSection: { | ||
| actionLabel__manageSubscription: undefined, | ||
| actionLabel__newSubscription: undefined, | ||
| actionLabel__switchPlan: undefined, | ||
| tableHeader__edit: undefined, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Provide the actual Indonesian translation instead of undefined.
Leaving the new key without a value will surface the raw fallback string to end-users.
Suggested translation:
- actionLabel__manageSubscription: undefined,
+ actionLabel__manageSubscription: 'Kelola langganan',If you’d like, I can open a follow-up PR that fills in all remaining undefined values for this locale.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| subscriptionsListSection: { | |
| actionLabel__manageSubscription: undefined, | |
| actionLabel__newSubscription: undefined, | |
| actionLabel__switchPlan: undefined, | |
| tableHeader__edit: undefined, | |
| subscriptionsListSection: { | |
| actionLabel__manageSubscription: 'Kelola langganan', | |
| actionLabel__newSubscription: undefined, | |
| actionLabel__switchPlan: undefined, | |
| tableHeader__edit: undefined, |
🤖 Prompt for AI Agents
In packages/localizations/src/id-ID.ts around lines 302 to 306, the keys under
subscriptionsListSection are set to undefined, which causes fallback strings to
appear to users. Replace each undefined value with the appropriate Indonesian
translation for the corresponding key to provide proper localization and avoid
fallback display.
| subscriptionsListSection: { | ||
| actionLabel__manageSubscription: undefined, | ||
| actionLabel__newSubscription: undefined, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Missing Norwegian translation for actionLabel__manageSubscription
The key is introduced but still set to undefined, so the UI will fall back to English (or possibly display nothing). Add an actual Norwegian label to keep the UX consistent with the rest of this locale.
- actionLabel__manageSubscription: undefined,
+ actionLabel__manageSubscription: 'Administrer abonnement',Apply the same fix in both occurrences (organization & user billing pages).
Also applies to: 953-955
🤖 Prompt for AI Agents
In packages/localizations/src/nb-NO.ts at lines 302 to 304 and also at lines 953
to 955, the key actionLabel__manageSubscription is set to undefined, causing the
UI to fallback to English or show nothing. Replace undefined with the correct
Norwegian translation for "Manage Subscription" to maintain consistent
localization. Apply this fix in both the organization and user billing sections
where this key appears.
| actionLabel__manageSubscription: undefined, | ||
| actionLabel__newSubscription: undefined, | ||
| actionLabel__switchPlan: undefined, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add the Polish wording for “Manage subscription”.
Leaving the value undefined will surface an untranslated key in the UI.
- actionLabel__manageSubscription: undefined,
+ actionLabel__manageSubscription: 'Zarządzaj subskrypcją',📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| actionLabel__manageSubscription: undefined, | |
| actionLabel__newSubscription: undefined, | |
| actionLabel__switchPlan: undefined, | |
| actionLabel__manageSubscription: 'Zarządzaj subskrypcją', | |
| actionLabel__newSubscription: undefined, | |
| actionLabel__switchPlan: undefined, |
🤖 Prompt for AI Agents
In packages/localizations/src/pl-PL.ts around lines 303 to 305, the key
actionLabel__manageSubscription is set to undefined, causing untranslated text
to appear in the UI. Replace undefined with the correct Polish translation for
"Manage subscription" to ensure proper localization.
| actionLabel__manageSubscription: undefined, | ||
| actionLabel__newSubscription: undefined, | ||
| actionLabel__switchPlan: undefined, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Fill in the missing translation here as well.
- actionLabel__manageSubscription: undefined,
+ actionLabel__manageSubscription: 'Zarządzaj subskrypcją',📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| actionLabel__manageSubscription: undefined, | |
| actionLabel__newSubscription: undefined, | |
| actionLabel__switchPlan: undefined, | |
| actionLabel__manageSubscription: 'Zarządzaj subskrypcją', | |
| actionLabel__newSubscription: undefined, | |
| actionLabel__switchPlan: undefined, |
🤖 Prompt for AI Agents
In packages/localizations/src/pl-PL.ts at lines 963 to 965, the translation keys
actionLabel__manageSubscription, actionLabel__newSubscription, and
actionLabel__switchPlan are set to undefined. Replace these undefined values
with the correct Polish translations for these action labels to complete the
localization.
| actionLabel__manageSubscription: undefined, | ||
| actionLabel__newSubscription: 'Assinar um plano', | ||
| actionLabel__switchPlan: 'Mudar de plano', |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Provide Brazilian-Portuguese string for actionLabel__manageSubscription
Leaving the value undefined breaks localization completeness. Supply a proper translation.
- actionLabel__manageSubscription: undefined,
+ actionLabel__manageSubscription: 'Gerenciar assinatura',Mirror the change for both the organization and user billing sections.
Also applies to: 967-969
🤖 Prompt for AI Agents
In packages/localizations/src/pt-BR.ts at lines 308 to 310 and also at lines 967
to 969, the key actionLabel__manageSubscription is set to undefined, breaking
localization completeness. Replace undefined with the correct
Brazilian-Portuguese translation for "Manage Subscription" (e.g., "Gerenciar
assinatura") in both the organization and user billing sections to ensure full
localization coverage.
| onClick={() => void navigate('plans')} | ||
| /> | ||
| ) : null} | ||
| <ProfileSection.ButtonGroup id='subscriptionsList'> |
There was a problem hiding this comment.
The alignment of these feels off. Do we need the arrow button usage on these?
| t => ({ | ||
| justifyContent: 'start', | ||
| height: t.sizes.$8, | ||
| width: isManageButtonVisible ? 'unset' : undefined, |
There was a problem hiding this comment.
whats the goal were after here? span full width if alone, justify between if there are two? Can this be handled via the parent group container vs needing to do this width changes/unsetting here?
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx (1)
168-209: Good refactor to bottom button group, but address duplicate IDs.The move to a bottom button group improves the UI layout and user experience. However, there are a few concerns to address:
Critical Issue: Duplicate element IDs
Both buttons useid='subscriptionsList'(lines 171, 191), which can cause accessibility issues and styling conflicts. Each button should have a unique identifier.- id='subscriptionsList' + id='subscriptionsListSwitch'- id='subscriptionsList' + id='subscriptionsListManage'Consider simplifying width handling
The conditional width styling (lines 177, 197) could be handled more elegantly through the parentButtonGroupcontainer's CSS flexbox properties rather than individual button width manipulation.
🧹 Nitpick comments (1)
packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx (1)
170-186: LGTM! Good conditional button logic with minor coupling concern.The switch/new subscription button implementation is solid:
- Appropriate conditional text and icons based on subscription state
- Proper localization usage
- Correct navigation logic
The width styling
width: isManageButtonVisible ? 'unset' : undefinedcreates tight coupling between buttons. Consider using CSS flexbox properties on the parent container to handle layout distribution instead.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx(3 hunks)packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (10)
packages/clerk-js/src/ui/**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/clerk-js-ui.mdc)
packages/clerk-js/src/ui/**/*.{ts,tsx}: Element descriptors should always be camelCase
Use element descriptors in UI components to enable consistent theming and styling via appearance.elements
Element descriptors should generate unique, stable CSS classes for theming
Element descriptors should handle state classes (e.g., cl-loading, cl-active, cl-error, cl-open) automatically based on component state
Do not render hard-coded values; all user-facing strings must be localized using provided localization methods
Use the useLocalizations hook and localizationKeys utility for all text and error messages
Use the styled system (sx prop, theme tokens, responsive values) for custom component styling
Use useCardState for card-level state, useFormState for form-level state, and useLoadingStatus for loading states
Always use handleError utility for API errors and use translateError for localized error messages
Use useFormControl for form field state, implement proper validation, and handle loading and error states in forms
Use localization keys for all form labels and placeholders
Use element descriptors for consistent styling and follow the theme token system
Use the Card and FormContainer patterns for consistent UI structure
Files:
packages/clerk-js/src/ui/elements/ArrowBlockButton.tsxpackages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
**/*.{js,jsx,ts,tsx}: All code must pass ESLint checks with the project's configuration
Follow established naming conventions (PascalCase for components, camelCase for variables)
Maintain comprehensive JSDoc comments for public APIs
Use dynamic imports for optional features
All public APIs must be documented with JSDoc
Provide meaningful error messages to developers
Include error recovery suggestions where applicable
Log errors appropriately for debugging
Lazy load components and features when possible
Implement proper caching strategies
Use efficient data structures and algorithms
Profile and optimize critical paths
Validate all inputs and sanitize outputs
Implement proper logging with different levels
Files:
packages/clerk-js/src/ui/elements/ArrowBlockButton.tsxpackages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx
**/*.{js,jsx,ts,tsx,json,css,scss,md,yaml,yml}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
Use Prettier for consistent code formatting
Files:
packages/clerk-js/src/ui/elements/ArrowBlockButton.tsxpackages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx
packages/**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/clerk-js/src/ui/elements/ArrowBlockButton.tsxpackages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx
packages/**/*.{ts,tsx,d.ts}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
Packages should export TypeScript types alongside runtime code
Files:
packages/clerk-js/src/ui/elements/ArrowBlockButton.tsxpackages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
Use proper TypeScript error types
**/*.{ts,tsx}: Always define explicit return types for functions, especially public APIs
Use proper type annotations for variables and parameters where inference isn't clear
Avoidanytype - preferunknownwhen type is uncertain, then narrow with type guards
Useinterfacefor object shapes that might be extended
Usetypefor unions, primitives, and computed types
Preferreadonlyproperties for immutable data structures
Useprivatefor internal implementation details
Useprotectedfor inheritance hierarchies
Usepublicexplicitly for clarity in public APIs
Preferreadonlyfor properties that shouldn't change after construction
Prefer composition and interfaces over deep inheritance chains
Use mixins for shared behavior across unrelated classes
Implement dependency injection for loose coupling
Let TypeScript infer when types are obvious
Useconst assertionsfor literal types:as const
Usesatisfiesoperator for type checking without widening
Use mapped types for transforming object types
Use conditional types for type-level logic
Leverage template literal types for string manipulation
Use ES6 imports/exports consistently
Use default exports sparingly, prefer named exports
Use type-only imports:import type { ... } from ...
Noanytypes without justification
Proper error handling with typed errors
Consistent use ofreadonlyfor immutable data
Proper generic constraints
No unused type parameters
Proper use of utility types instead of manual type construction
Type-only imports where possible
Proper tree-shaking friendly exports
No circular dependencies
Efficient type computations (avoid deep recursion)
Files:
packages/clerk-js/src/ui/elements/ArrowBlockButton.tsxpackages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx
**/*.{jsx,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
**/*.{jsx,tsx}: Use error boundaries in React components
Minimize re-renders in React components
**/*.{jsx,tsx}: Always use functional components with hooks instead of class components
Follow PascalCase naming for components:UserProfile,NavigationMenu
Keep components focused on a single responsibility - split large components
Limit component size to 150-200 lines; extract logic into custom hooks
Use composition over inheritance - prefer smaller, composable components
Export components as named exports for better tree-shaking
One component per file with matching filename and component name
Use useState for simple state management
Use useReducer for complex state logic
Implement proper state initialization
Use proper state updates with callbacks
Implement proper state cleanup
Use Context API for theme/authentication
Implement proper state selectors
Use proper state normalization
Implement proper state persistence
Use React.memo for expensive components
Implement proper useCallback for handlers
Use proper useMemo for expensive computations
Implement proper virtualization for lists
Use proper code splitting with React.lazy
Implement proper cleanup in useEffect
Use proper refs for DOM access
Implement proper event listener cleanup
Use proper abort controllers for fetch
Implement proper subscription cleanup
Use proper HTML elements
Implement proper ARIA attributes
Use proper heading hierarchy
Implement proper form labels
Use proper button types
Implement proper focus management
Use proper keyboard shortcuts
Implement proper tab order
Use proper skip links
Implement proper focus traps
Implement proper error boundaries
Use proper error logging
Implement proper error recovery
Use proper error messages
Implement proper error fallbacks
Use proper form validation
Implement proper error states
Use proper error messages
Implement proper form submission
Use proper form reset
Use proper component naming
Implement proper file naming
Use proper prop naming
Implement proper...
Files:
packages/clerk-js/src/ui/elements/ArrowBlockButton.tsxpackages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/monorepo.mdc)
Support multiple Clerk environment variables (CLERK_, NEXT_PUBLIC_CLERK_, etc.) for configuration.
Files:
packages/clerk-js/src/ui/elements/ArrowBlockButton.tsxpackages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx
**/*.tsx
📄 CodeRabbit Inference Engine (.cursor/rules/react.mdc)
**/*.tsx: Use proper type definitions for props and state
Leverage TypeScript's type inference where possible
Use proper event types for handlers
Implement proper generic types for reusable components
Use proper type guards for conditional rendering
Files:
packages/clerk-js/src/ui/elements/ArrowBlockButton.tsxpackages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx
**/*
⚙️ CodeRabbit Configuration File
**/*: If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes.Whenever reviewing a pull request, if there are any changes that could impact security, always tag
@clerk/securityin the PR.Security-impacting changes include, but are not limited to:
- Changes to authentication logic or mechanisms (e.g. login, session handling, token issuance)
- Any modification to access control, authorization checks, or role-based permissions
- Introduction or modification of hashing algorithms, signature verification, or cryptographic primitives
- Handling of sensitive data (e.g. passwords, tokens, secrets, PII)
- Integration with external identity providers (e.g. SSO, OAuth, OpenID Connect)
- Modifications to security headers, cookie flags, CORS policies, or CSRF protections
- Bypass mechanisms (e.g. feature flags, testing overrides) that could weaken protections
- Changes to rate limiting, abuse prevention, or input validation
If you're unsure whether a change is security-relevant, err on the side of caution and tag
@clerk/security.Any time that you tag
@clerk/security, please do so explicitly in a code comment, rather than within a collapsed section in a coderabbit comment, such as the "recent review details" section. If you do use the team name in any thinking or non-direct-code-comment content, it can be referred to as "clerk security team" to avoid accidentally printing the tag which sends a notification to the team.
Files:
packages/clerk-js/src/ui/elements/ArrowBlockButton.tsxpackages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: Build Packages
- GitHub Check: Formatting | Dedupe | Changeset
- GitHub Check: semgrep/ci
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (6)
packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx (4)
1-1: LGTM! Clean imports and utility function.The new imports are appropriate for the added functionality, and the
isFreePlanutility function correctly identifies free plans by checking for the absence of a base fee.Also applies to: 4-4, 15-15, 20-21
24-26: LGTM! Improved prop naming enhances API clarity.The renamed props (
switchPlansLabel,newSubscriptionLabel,manageSubscriptionLabel) are more descriptive and make the component's interface clearer than generic naming.Also applies to: 29-31
189-208: LGTM! Well-implemented manage subscription button.The manage subscription button implementation is clean and follows good practices:
- Proper conditional rendering based on billing permissions and subscription state
- Appropriate CogFilled icon for management actions
- Correct use of
rightIcon={null}to prevent default arrow rendering- Proper event handling with
openSubscriptionDetails
36-38: Confirmed billing permission string is correctThe permission
'org:sys_billing:manage'is used consistently across the codebase and documented in the changelogs. No further changes are needed.LGTM!
packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx (2)
10-10: LGTM! Type change correctly supports explicit null values.The type change from
React.ComponentTypetoReact.ComponentType | nullproperly allows explicit null values for therightIconprop, improving type safety and API flexibility.
128-146: LGTM! Proper conditional rendering prevents unnecessary Icon rendering.The conditional rendering
{rightIcon && (...)}correctly prevents the Icon component from rendering whenrightIconis null or undefined. This avoids unnecessary DOM elements and potential errors, supporting the explicitrightIcon={null}usage in other components.
Description
Before
After
Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change
Summary by CodeRabbit
Summary by CodeRabbit
New Features
Enhancements
Bug Fixes
Tests