chore(clerk-js): Display free trial badge <PricingTable/> (#6656)

Author: panteliselef

.changeset/eighty-bananas-listen.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Display free trial badge `<PricingTable/>`.

integration/tests/pricing-table.test.ts

@@ -299,7 +299,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl
 
       // Verify the user is now shown as having an active free trial
       // The pricing table should show their current plan as active
-      await u.po.pricingTable.waitToBeActive({ planSlug: 'trial' });
+      await u.po.pricingTable.waitToBeFreeTrial({ planSlug: 'trial' });
 
       await u.po.page.goToRelative('/user');
       await u.po.userProfile.waitForMounted();

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

@@ -184,7 +184,11 @@ function Card(props: CardProps) {
         isCompact={isCompact}
         planPeriod={planPeriod}
         setPlanPeriod={setPlanPeriod}
-        badge={showStatusRow ? <SubscriptionBadge subscription={subscription} /> : undefined}
+        badge={
+          showStatusRow ? (
+            <SubscriptionBadge subscription={subscription.isFreeTrial ? { status: 'free_trial' } : subscription} />
+          ) : undefined
+        }
       />
       <Box
         elementDescriptor={descriptors.pricingTableCardBody}

packages/testing/src/playwright/unstable/page-objects/pricingTable.ts

@@ -59,6 +59,9 @@ export const createPricingTablePageObject = (testArgs: { page: EnhancedPage }) =
     waitToBeActive: async ({ planSlug }: { planSlug: string }) => {
       return locators.badge(planSlug).getByText('Active').waitFor({ state: 'visible' });
     },
+    waitToBeFreeTrial: async ({ planSlug }: { planSlug: string }) => {
+      return locators.badge(planSlug).getByText('Free trial').waitFor({ state: 'visible' });
+    },
     getPlanCardCTA: ({ planSlug }: { planSlug: string }) => {
       return locators.footer(planSlug).getByRole('button', {
         name: /get|switch|subscribe/i,