From 01eb35ae21fa286e264a4e9b354bd5b5cfac5bcc Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Thu, 24 Jul 2025 13:25:07 +0300
Subject: [PATCH 1/3] fix(clerk-js): Display alert on plan details error

---
 .changeset/eighty-breads-knock.md             |  5 ++
 .../src/ui/components/Plans/PlanDetails.tsx   | 74 ++++++++++++++++---
 2 files changed, 68 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/eighty-breads-knock.md

diff --git a/.changeset/eighty-breads-knock.md b/.changeset/eighty-breads-knock.md
new file mode 100644
index 00000000000..0a0d866c029
--- /dev/null
+++ b/.changeset/eighty-breads-knock.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Display alert on plan details error
diff --git a/packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx b/packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx
index 8ab011c6983..529d2e73c20 100644
--- a/packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx
+++ b/packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx
@@ -1,15 +1,32 @@
 import { useClerk } from '@clerk/shared/react';
-import type { __internal_PlanDetailsProps, CommercePlanResource, CommerceSubscriptionPlanPeriod } from '@clerk/types';
+import type {
+  __internal_PlanDetailsProps,
+  ClerkAPIResponseError,
+  CommercePlanResource,
+  CommerceSubscriptionPlanPeriod,
+} from '@clerk/types';
 import * as React from 'react';
 import { useMemo, useState } from 'react';
 import useSWR from 'swr';
 
+import { Alert } from '@/ui/elements/Alert';
 import { Avatar } from '@/ui/elements/Avatar';
 import { Drawer } from '@/ui/elements/Drawer';
 import { Switch } from '@/ui/elements/Switch';
 
 import { SubscriberTypeContext } from '../../contexts';
-import { Box, Col, descriptors, Flex, Heading, localizationKeys, Span, Spinner, Text } from '../../customizables';
+import {
+  Box,
+  Col,
+  descriptors,
+  Flex,
+  Heading,
+  localizationKeys,
+  Span,
+  Spinner,
+  Text,
+  useLocalizations,
+} from '../../customizables';
 
 export const PlanDetails = (props: __internal_PlanDetailsProps) => {
   return (
@@ -19,6 +36,38 @@ export const PlanDetails = (props: __internal_PlanDetailsProps) => {
   );
 };
 
+const BodyFiller = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <Drawer.Body>
+      <Flex
+        align={'center'}
+        justify={'center'}
+        sx={t => ({
+          height: '100%',
+          padding: t.space.$4,
+          fontSize: t.fontSizes.$md,
+        })}
+      >
+        {children}
+      </Flex>
+    </Drawer.Body>
+  );
+};
+
+const PlanDetailsError = ({ error }: { error: ClerkAPIResponseError }) => {
+  const { translateError } = useLocalizations();
+  return (
+    <BodyFiller>
+      <Alert
+        variant='danger'
+        colorScheme='danger'
+      >
+        {translateError(error.errors[0])}
+      </Alert>
+    </BodyFiller>
+  );
+};
+
 const PlanDetailsInternal = ({
   planId,
   plan: initialPlan,
@@ -27,29 +76,32 @@ const PlanDetailsInternal = ({
   const clerk = useClerk();
   const [planPeriod, setPlanPeriod] = useState<CommerceSubscriptionPlanPeriod>(initialPlanPeriod);
 
-  const { data: plan, isLoading } = useSWR(
+  const {
+    data: plan,
+    isLoading,
+    error,
+  } = useSWR<CommercePlanResource, ClerkAPIResponseError>(
     planId || initialPlan ? { type: 'plan', id: planId || initialPlan?.id } : null,
     // @ts-expect-error we are handling it above
     () => clerk.billing.getPlan({ id: planId || initialPlan?.id }),
     {
       fallbackData: initialPlan,
+      keepPreviousData: true,
     },
   );
 
   if (isLoading && !initialPlan) {
     return (
-      <Flex
-        justify='center'
-        align='center'
-        sx={{
-          height: '100%',
-        }}
-      >
+      <BodyFiller>
         <Spinner />
-      </Flex>
+      </BodyFiller>
     );
   }
 
+  if (!plan && error) {
+    return <PlanDetailsError error={error} />;
+  }
+
   if (!plan) {
     return null;
   }

From 9edfad5b12e3e4a54e0da7fd245b2a73d08aa407 Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Thu, 24 Jul 2025 13:31:39 +0300
Subject: [PATCH 2/3] fix(clerk-js): Display alert on plan details error

---
 packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx b/packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx
index 529d2e73c20..f88e55401f8 100644
--- a/packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx
+++ b/packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx
@@ -86,6 +86,8 @@ const PlanDetailsInternal = ({
     () => clerk.billing.getPlan({ id: planId || initialPlan?.id }),
     {
       fallbackData: initialPlan,
+      revalidateOnFocus: false,
+      shouldRetryOnError: false,
       keepPreviousData: true,
     },
   );

From 4f648b21da07c602bac237120bf13c167afc23f2 Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Thu, 24 Jul 2025 18:41:59 +0300
Subject: [PATCH 3/3] address feedback

---
 .../src/ui/components/Plans/PlanDetails.tsx   | 25 ++++++++++---------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx b/packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx
index f88e55401f8..e319eb881f5 100644
--- a/packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx
+++ b/packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx
@@ -38,18 +38,19 @@ export const PlanDetails = (props: __internal_PlanDetailsProps) => {
 
 const BodyFiller = ({ children }: { children: React.ReactNode }) => {
   return (
-    <Drawer.Body>
-      <Flex
-        align={'center'}
-        justify={'center'}
-        sx={t => ({
-          height: '100%',
-          padding: t.space.$4,
-          fontSize: t.fontSizes.$md,
-        })}
-      >
-        {children}
-      </Flex>
+    <Drawer.Body
+      sx={t => ({
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flex: 1,
+        overflowY: 'auto',
+        padding: t.space.$4,
+        gap: t.space.$4,
+      })}
+    >
+      {children}
     </Drawer.Body>
   );
 };