fix(clerk-js,types,localizations): Adjust invalid plan change alert wording

Author: aeliox

.changeset/orange-doors-notice.md

@@ -0,0 +1,5 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---

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

@@ -82,7 +82,11 @@ export const InvalidPlanScreen = () => {
           <Alert
             variant='info'
             colorScheme='info'
-            title={localizationKeys('commerce.cannotSubscribeMonthly')}
+            title={
+              planFromError.annual_monthly_amount_formatted !== '0'
+                ? localizationKeys('commerce.cannotSubscribeMonthly')
+                : localizationKeys('commerce.cannotSubscribeMonthlyNoAnnual')
+            }
           />
         </Box>
       </Flex>

packages/localizations/src/en-US.ts

@@ -67,6 +67,7 @@ export const enUS: LocalizationResource = {
     cancelSubscriptionTitle: 'Cancel {{plan}} Subscription?',
     cannotSubscribeMonthly:
       'You cannot subscribe to this plan by paying monthly. To subscribe to this plan, you need to choose to pay annually.',
+    cannotSubscribeMonthlyNoAnnual: 'You cannot subscribe to this plan with an existing annual subscription.',
     checkout: {
       description__paymentSuccessful: 'Your payment was successful.',
       description__subscriptionSuccessful: 'Your new subscription is all set.',

packages/types/src/localization.ts

@@ -199,6 +199,7 @@ export type __internal_LocalizationResource = {
     monthly: LocalizationValue;
     annually: LocalizationValue;
     cannotSubscribeMonthly: LocalizationValue;
+    cannotSubscribeMonthlyNoAnnual: LocalizationValue;
     pricingTable: {
       billingCycle: LocalizationValue;
       included: LocalizationValue;