diff --git a/.changeset/eighty-bananas-listen.md b/.changeset/eighty-bananas-listen.md new file mode 100644 index 00000000000..0b11ed64dfa --- /dev/null +++ b/.changeset/eighty-bananas-listen.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': patch +--- + +Display free trial badge ``. diff --git a/integration/tests/pricing-table.test.ts b/integration/tests/pricing-table.test.ts index 7ff5c9f690c..402f30b2c52 100644 --- a/integration/tests/pricing-table.test.ts +++ b/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(); diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx index 01609a95725..5e623e6c69a 100644 --- a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx +++ b/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 ? : undefined} + badge={ + showStatusRow ? ( + + ) : undefined + } /> { 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,