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

.changeset/orange-doors-notice.md

@@ -0,0 +1,2 @@
+---
+---

.typedoc/__tests__/__snapshots__/file-structure.test.ts.snap

@@ -127,6 +127,7 @@ exports[`Typedoc output > should have a deliberate file structure 1`] = `
   "types/without.mdx",
   "shared/api-url-from-publishable-key.mdx",
   "shared/build-clerk-js-script-attributes.mdx",
+  "shared/build-error-thrower.mdx",
   "shared/build-publishable-key.mdx",
   "shared/camel-to-snake.mdx",
   "shared/clerk-js-script-url.mdx",
@@ -137,6 +138,7 @@ exports[`Typedoc output > should have a deliberate file structure 1`] = `
   "shared/deep-snake-to-camel.mdx",
   "shared/deprecated-object-property.mdx",
   "shared/derive-state.mdx",
+  "shared/error-to-json.mdx",
   "shared/extract-dev-browser-jwt-from-url.mdx",
   "shared/fast-deep-merge-and-replace.mdx",
   "shared/get-clerk-js-major-version-or-tag.mdx",
@@ -148,22 +150,35 @@ exports[`Typedoc output > should have a deliberate file structure 1`] = `
   "shared/icon-image-url.mdx",
   "shared/in-browser.mdx",
   "shared/is-browser-online.mdx",
+  "shared/is-captcha-error.mdx",
+  "shared/is-clerk-api-response-error.mdx",
   "shared/is-clerk-runtime-error.mdx",
   "shared/is-development-from-publishable-key.mdx",
   "shared/is-development-from-secret-key.mdx",
+  "shared/is-email-link-error.mdx",
   "shared/is-ipv4-address.mdx",
+  "shared/is-known-error.mdx",
+  "shared/is-metamask-error.mdx",
+  "shared/is-network-error.mdx",
+  "shared/is-password-pwned-error.mdx",
   "shared/is-production-from-publishable-key.mdx",
   "shared/is-production-from-secret-key.mdx",
   "shared/is-publishable-key.mdx",
+  "shared/is-reverification-cancelled-error.mdx",
   "shared/is-staging.mdx",
   "shared/is-truthy.mdx",
+  "shared/is-unauthorized-error.mdx",
+  "shared/is-user-locked-error.mdx",
   "shared/is-valid-browser-online.mdx",
   "shared/is-valid-browser.mdx",
+  "shared/is4xx-error.mdx",
   "shared/isomorphic-atob.mdx",
   "shared/load-clerk-js-script.mdx",
   "shared/pages-or-infinite-options.mdx",
   "shared/paginated-hook-config.mdx",
   "shared/paginated-resources.mdx",
+  "shared/parse-error.mdx",
+  "shared/parse-errors.mdx",
   "shared/parse-publishable-key.mdx",
   "shared/read-json-file.mdx",
   "shared/set-clerk-js-loading-error-package-name.mdx",

integration/tests/pricing-table.test.ts

@@ -345,7 +345,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl
         page
           .locator('.cl-checkout-root')
           .getByText(
-            'You cannot subscribe to this plan by paying monthly. To subscribe to this plan, you need to choose to pay annually',
+            'You cannot subscribe to this plan by paying monthly. To subscribe to this plan, you need to choose to pay annually.',
           ),
       ).toBeVisible();
 

packages/clerk-js/bundlewatch.config.json

@@ -23,7 +23,7 @@
     { "path": "./dist/waitlist*.js", "maxSize": "1.5KB" },
     { "path": "./dist/keylessPrompt*.js", "maxSize": "6.5KB" },
     { "path": "./dist/pricingTable*.js", "maxSize": "4.02KB" },
-    { "path": "./dist/checkout*.js", "maxSize": "8.4KB" },
+    { "path": "./dist/checkout*.js", "maxSize": "8.45KB" },
     { "path": "./dist/up-billing-page*.js", "maxSize": "3.0KB" },
     { "path": "./dist/op-billing-page*.js", "maxSize": "3.0KB" },
     { "path": "./dist/up-plans-page*.js", "maxSize": "1.0KB" },

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

@@ -48,6 +48,11 @@ export const InvalidPlanScreen = () => {
     return _error?.meta?.plan;
   }, [error]);
 
+  const isPlanUpgradePossible = useMemo(() => {
+    const _error = error?.errors.find(e => e.code === 'invalid_plan_change');
+    return _error?.meta?.isPlanUpgradePossible || false;
+  }, [error]);
+
   if (!planFromError) {
     return null;
   }
@@ -85,7 +90,11 @@ export const InvalidPlanScreen = () => {
           <Alert
             variant='info'
             colorScheme='info'
-            title={localizationKeys('commerce.cannotSubscribeMonthly')}
+            title={
+              isPlanUpgradePossible
+                ? localizationKeys('commerce.cannotSubscribeMonthly')
+                : localizationKeys('commerce.cannotSubscribeUnrecoverable')
+            }
           />
         </Box>
       </Flex>

packages/localizations/src/en-US.ts

@@ -67,6 +67,8 @@ 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.',
+    cannotSubscribeUnrecoverable:
+      'You cannot subscribe to this plan. Your existing subscription is more expensive than this plan.',
     checkout: {
       description__paymentSuccessful: 'Your payment was successful.',
       description__subscriptionSuccessful: 'Your new subscription is all set.',

packages/shared/src/error.ts

@@ -4,21 +4,33 @@ import type {
   ClerkAPIResponseError as ClerkAPIResponseErrorInterface,
 } from '@clerk/types';
 
+/**
+ *
+ */
 export function isUnauthorizedError(e: any): boolean {
   const status = e?.status;
   const code = e?.errors?.[0]?.code;
   return code === 'authentication_invalid' && status === 401;
 }
 
+/**
+ *
+ */
 export function isCaptchaError(e: ClerkAPIResponseError): boolean {
   return ['captcha_invalid', 'captcha_not_enabled', 'captcha_missing_token'].includes(e.errors[0].code);
 }
 
+/**
+ *
+ */
 export function is4xxError(e: any): boolean {
   const status = e?.status;
   return !!status && status >= 400 && status < 500;
 }
 
+/**
+ *
+ */
 export function isNetworkError(e: any): boolean {
   // TODO: revise during error handling epic
   const message = (`${e.message}${e.name}` || '').toLowerCase().replace(/\s+/g, '');
@@ -40,10 +52,16 @@ export interface MetamaskError extends Error {
   data?: unknown;
 }
 
+/**
+ *
+ */
 export function isKnownError(error: any): error is ClerkAPIResponseError | ClerkRuntimeError | MetamaskError {
   return isClerkAPIResponseError(error) || isMetamaskError(error) || isClerkRuntimeError(error);
 }
 
+/**
+ *
+ */
 export function isClerkAPIResponseError(err: any): err is ClerkAPIResponseError {
   return 'clerkError' in err;
 }
@@ -68,26 +86,44 @@ export function isClerkRuntimeError(err: any): err is ClerkRuntimeError {
   return 'clerkRuntimeError' in err;
 }
 
+/**
+ *
+ */
 export function isReverificationCancelledError(err: any) {
   return isClerkRuntimeError(err) && err.code === 'reverification_cancelled';
 }
 
+/**
+ *
+ */
 export function isMetamaskError(err: any): err is MetamaskError {
   return 'code' in err && [4001, 32602, 32603].includes(err.code) && 'message' in err;
 }
 
+/**
+ *
+ */
 export function isUserLockedError(err: any) {
   return isClerkAPIResponseError(err) && err.errors?.[0]?.code === 'user_locked';
 }
 
+/**
+ *
+ */
 export function isPasswordPwnedError(err: any) {
   return isClerkAPIResponseError(err) && err.errors?.[0]?.code === 'form_password_pwned';
 }
 
+/**
+ *
+ */
 export function parseErrors(data: ClerkAPIErrorJSON[] = []): ClerkAPIError[] {
   return data.length > 0 ? data.map(parseError) : [];
 }
 
+/**
+ *
+ */
 export function parseError(error: ClerkAPIErrorJSON): ClerkAPIError {
   return {
     code: error.code,
@@ -100,10 +136,14 @@ export function parseError(error: ClerkAPIErrorJSON): ClerkAPIError {
       identifiers: error?.meta?.identifiers,
       zxcvbn: error?.meta?.zxcvbn,
       plan: error?.meta?.plan,
+      isPlanUpgradePossible: error?.meta?.is_plan_upgrade_possible,
     },
   };
 }
 
+/**
+ *
+ */
 export function errorToJSON(error: ClerkAPIError | null): ClerkAPIErrorJSON {
   return {
     code: error?.code || '',
@@ -116,6 +156,7 @@ export function errorToJSON(error: ClerkAPIError | null): ClerkAPIErrorJSON {
       identifiers: error?.meta?.identifiers,
       zxcvbn: error?.meta?.zxcvbn,
       plan: error?.meta?.plan,
+      is_plan_upgrade_possible: error?.meta?.isPlanUpgradePossible,
     },
   };
 }
@@ -217,6 +258,9 @@ export class EmailLinkError extends Error {
   }
 }
 
+/**
+ *
+ */
 export function isEmailLinkError(err: Error): err is EmailLinkError {
   return err.name === 'EmailLinkError';
 }
@@ -275,6 +319,9 @@ export interface ErrorThrower {
   throw(message: string): never;
 }
 
+/**
+ *
+ */
 export function buildErrorThrower({ packageName, customMessages }: ErrorThrowerOptions): ErrorThrower {
   let pkg = packageName;
 

packages/types/src/api.ts

@@ -36,6 +36,7 @@ export interface ClerkAPIError {
       id: string;
       name: string;
     };
+    isPlanUpgradePossible?: boolean;
   };
 }
 

packages/types/src/json.ts

@@ -358,6 +358,7 @@ export interface ClerkAPIErrorJSON {
       id: string;
       name: string;
     };
+    is_plan_upgrade_possible?: boolean;
   };
 }
 

packages/types/src/localization.ts

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