feat(clerk-js,types): Display trial subscriptions in profiles (#6526)

Author: panteliselef

.changeset/fresh-breads-fall.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Display trial subscriptions in UserProfile and OrganizationProfile.

packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx

@@ -240,7 +240,7 @@ function Card(props: CardProps) {
                     ? localizationKeys('badge__trialEndsAt', {
                         date: subscription.periodEnd,
                       })
-                    : localizationKeys('badge__startsAt', { date: subscription?.periodStart })
+                    : localizationKeys('badge__startsAt', { date: subscription.periodStart })
                 }
                 colorScheme='secondary'
                 sx={t => ({

packages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsx

@@ -174,6 +174,66 @@ describe('PricingTable - trial info', () => {
       expect(getByText('Subscribe')).toBeVisible();
     });
   });
+
+  it('shows footer notice with "starts at" when subscription is upcoming and not a free trial', async () => {
+    const { wrapper, fixtures, props } = await createFixtures(f => {
+      f.withUser({ email_addresses: ['test@clerk.com'] });
+    });
+
+    // Provide empty props to the PricingTable context
+    props.setProps({});
+
+    const nonTrialPlan = {
+      ...trialPlan,
+      freeTrialEnabled: false,
+      freeTrialDays: 0,
+    };
+
+    fixtures.clerk.billing.getPlans.mockResolvedValue({ data: [nonTrialPlan as any], total_count: 1 });
+    fixtures.clerk.billing.getSubscription.mockResolvedValue({
+      id: 'sub_1',
+      status: 'active',
+      activeAt: new Date('2021-01-01'),
+      createdAt: new Date('2021-01-01'),
+      nextPayment: null,
+      pastDueAt: null,
+      updatedAt: null,
+      subscriptionItems: [
+        {
+          id: 'si_1',
+          plan: nonTrialPlan,
+          createdAt: new Date('2021-01-01'),
+          paymentSourceId: 'src_1',
+          pastDueAt: null,
+          canceledAt: null,
+          periodStart: new Date('2021-02-01'),
+          periodEnd: new Date('2021-02-15'),
+          planPeriod: 'month' as const,
+          status: 'upcoming' as const,
+          isFreeTrial: false,
+          cancel: jest.fn(),
+          pathRoot: '',
+          reload: jest.fn(),
+        },
+      ],
+      pathRoot: '',
+      reload: jest.fn(),
+    });
+
+    const { findByRole, getByText, userEvent } = render(<PricingTable />, { wrapper });
+
+    // Wait for the plan to appear
+    await findByRole('heading', { name: 'Pro' });
+
+    // Default period is annual in mounted mode; switch to monthly to match the subscription
+    const periodSwitch = await findByRole('switch', { name: /billed annually/i });
+    await userEvent.click(periodSwitch);
+
+    await waitFor(() => {
+      // Non-trial upcoming subscription uses badge__startsAt localization
+      expect(getByText('Starts Feb 1, 2021')).toBeVisible();
+    });
+  });
 });
 
 describe('PricingTable - plans visibility', () => {

packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx

@@ -162,7 +162,9 @@ function SubscriptionRow({ subscription, length }: { subscription: CommerceSubsc
             >
               {subscription.plan.name}
             </Text>
-            {length > 1 || subscription.canceledAt !== null ? <SubscriptionBadge subscription={subscription} /> : null}
+            {subscription.isFreeTrial || length > 1 || !!subscription.canceledAt ? (
+              <SubscriptionBadge subscription={subscription.isFreeTrial ? { status: 'free_trial' } : subscription} />
+            ) : null}
           </Flex>
 
           {(!subscription.plan.isDefault || subscription.status === 'upcoming') && (