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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
panteliselef merged 13 commits into from
Aug 14, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
b228074
chore(clerk-js,types): Update PricingTable with trial info
panteliselef Aug 6, 2025
9eda6fa
chore(clerk-js,types): Update checkout to handle trials
panteliselef Aug 8, 2025
1c6b47c
chore(clerk-js,types): Update checkout to handle trials
panteliselef Aug 8, 2025
e729316
handle checkout confirming step
panteliselef Aug 12, 2025
9e7381a
feat(clerk-js,types): Display trialed subscriptions in profiles
panteliselef Aug 12, 2025
9a795da
Merge branch 'refs/heads/main' into elef/com-1122-show-free-trial-row…
panteliselef Aug 12, 2025
fd02396
Merge branch 'main' into elef/com-1122-show-free-trial-row-in-userpro…
panteliselef Aug 14, 2025
b106e12
test and patch changes
panteliselef Aug 14, 2025
5075752
Merge branch 'main' into elef/com-1122-show-free-trial-row-in-userpro…
panteliselef Aug 14, 2025
aa623e6
add tests
panteliselef Aug 14, 2025
fb98b76
fix tests
panteliselef Aug 14, 2025
ff10193
add changeset
panteliselef Aug 14, 2025
5a63011
Merge branch 'main' into elef/com-1122-show-free-trial-row-in-userpro…
panteliselef Aug 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/fresh-breads-fall.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/clerk-js': patch
---

Display trial subscriptions in UserProfile and OrganizationProfile.
2 changes: 1 addition & 1 deletion packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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 => ({
Expand Down
60 changes: 60 additions & 0 deletions packages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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'),
Comment on lines +209 to +210

@coderabbitaicoderabbitaiBotAug 14, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Avoid timezone-dependent date parsing in tests (can cause off-by-one day flakiness).

Parsing ISO dates like '2021-02-01' constructs a UTC date, which may render as the prior day in non-UTC timezones. Prefer the numeric Date constructor to create local-midnight dates and keep output consistent across environments.

Apply this diff:

- periodStart: new Date('2021-02-01'),- periodEnd: new Date('2021-02-15'),+ periodStart: new Date(2021, 1, 1), // Feb is 1 (0-indexed)+ periodEnd: new Date(2021, 1, 15),
📝 Committable suggestion

‼️IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
periodStart: newDate('2021-02-01'),
periodEnd: newDate('2021-02-15'),
periodStart: newDate(2021,1,1),// Feb is 1 (0-indexed)
periodEnd: newDate(2021,1,15),
🤖 Prompt for AI Agents
In
packages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsx
around lines 209-210, the test uses ISO string parsing new Date('2021-02-01')
and new Date('2021-02-15') which is timezone-dependent; replace them with
numeric Date constructors that create local-midnight dates (e.g., new Date(2021,
1, 1) and new Date(2021, 1, 15) — note month is zero-based) so the test is
stable across timezones.

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', () => {
Expand Down
4 changes: 3 additions & 1 deletion packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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') && (
Expand Down
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

panteliselef
merged 13 commits into

from

Aug 14, 2025
 Merged


feat(clerk-js,types): Display trial subscriptions in profiles
#6526
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


13 commits


Select commit
Hold shift + click to select a range
b228074

chore(clerk-js,types): Update PricingTable with trial info


panteliselef Aug 6, 2025
9eda6fa

chore(clerk-js,types): Update checkout to handle trials


panteliselef Aug 8, 2025
1c6b47c

chore(clerk-js,types): Update checkout to handle trials


panteliselef Aug 8, 2025
e729316

handle checkout confirming step


panteliselef Aug 12, 2025
9e7381a

feat(clerk-js,types): Display trialed subscriptions in profiles


panteliselef Aug 12, 2025
9a795da

Merge branch 'refs/heads/main' into elef/com-1122-show-free-trial-row…


panteliselef Aug 12, 2025
fd02396

Merge branch 'main' into elef/com-1122-show-free-trial-row-in-userpro…


panteliselef Aug 14, 2025
b106e12

test and patch changes


panteliselef Aug 14, 2025
5075752

Merge branch 'main' into elef/com-1122-show-free-trial-row-in-userpro…


panteliselef Aug 14, 2025
aa623e6

add tests


panteliselef Aug 14, 2025
fb98b76

fix tests


panteliselef Aug 14, 2025
ff10193

add changeset


panteliselef Aug 14, 2025
5a63011

Merge branch 'main' into elef/com-1122-show-free-trial-row-in-userpro…


panteliselef Aug 14, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


5 changes: 5 additions & 0 deletions
.changeset/fresh-breads-fall.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/clerk-js': patch
---

Display trial subscriptions in UserProfile and OrganizationProfile.

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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 => ({
Expand Down

60 changes: 60 additions & 0 deletions
packages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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'),

Comment on lines

+209
 to 
+210

@coderabbitaicoderabbitaiBotAug 14, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion
Avoid timezone-dependent date parsing in tests (can cause off-by-one day flakiness).
Parsing ISO dates like '2021-02-01' constructs a UTC date, which may render as the prior day in non-UTC timezones. Prefer the numeric Date constructor to create local-midnight dates and keep output consistent across environments.
Apply this diff:
- periodStart: new Date('2021-02-01'),- periodEnd: new Date('2021-02-15'),+ periodStart: new Date(2021, 1, 1), // Feb is 1 (0-indexed)+ periodEnd: new Date(2021, 1, 15),
📝 Committable suggestion
‼️IMPORTANT

Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

periodStart: newDate('2021-02-01'),
periodEnd: newDate('2021-02-15'),
periodStart: newDate(2021,1,1),// Feb is 1 (0-indexed)
periodEnd: newDate(2021,1,15),
🤖 Prompt for AI Agents
In
packages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsx
around lines 209-210, the test uses ISO string parsing new Date('2021-02-01')
and new Date('2021-02-15') which is timezone-dependent; replace them with
numeric Date constructors that create local-midnight dates (e.g., new Date(2021,
1, 1) and new Date(2021, 1, 15) — note month is zero-based) so the test is
stable across timezones.

 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', () => {
Expand Down

4 changes: 3 additions & 1 deletion
packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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') && (
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

panteliselef
merged 13 commits into

from

Aug 14, 2025
 Merged


feat(clerk-js,types): Display trial subscriptions in profiles
#6526
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


13 commits


Select commit
Hold shift + click to select a range
b228074

chore(clerk-js,types): Update PricingTable with trial info


panteliselef Aug 6, 2025
9eda6fa

chore(clerk-js,types): Update checkout to handle trials


panteliselef Aug 8, 2025
1c6b47c

chore(clerk-js,types): Update checkout to handle trials


panteliselef Aug 8, 2025
e729316

handle checkout confirming step


panteliselef Aug 12, 2025
9e7381a

feat(clerk-js,types): Display trialed subscriptions in profiles


panteliselef Aug 12, 2025
9a795da

Merge branch 'refs/heads/main' into elef/com-1122-show-free-trial-row…


panteliselef Aug 12, 2025
fd02396

Merge branch 'main' into elef/com-1122-show-free-trial-row-in-userpro…


panteliselef Aug 14, 2025
b106e12

test and patch changes


panteliselef Aug 14, 2025
5075752

Merge branch 'main' into elef/com-1122-show-free-trial-row-in-userpro…


panteliselef Aug 14, 2025
aa623e6

add tests


panteliselef Aug 14, 2025
fb98b76

fix tests


panteliselef Aug 14, 2025
ff10193

add changeset


panteliselef Aug 14, 2025
5a63011

Merge branch 'main' into elef/com-1122-show-free-trial-row-in-userpro…


panteliselef Aug 14, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


5 changes: 5 additions & 0 deletions
.changeset/fresh-breads-fall.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/clerk-js': patch
---

Display trial subscriptions in UserProfile and OrganizationProfile.

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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 => ({
Expand Down

60 changes: 60 additions & 0 deletions
packages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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'),

Comment on lines

+209
 to 
+210

@coderabbitaicoderabbitaiBotAug 14, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion
Avoid timezone-dependent date parsing in tests (can cause off-by-one day flakiness).
Parsing ISO dates like '2021-02-01' constructs a UTC date, which may render as the prior day in non-UTC timezones. Prefer the numeric Date constructor to create local-midnight dates and keep output consistent across environments.
Apply this diff:
- periodStart: new Date('2021-02-01'),- periodEnd: new Date('2021-02-15'),+ periodStart: new Date(2021, 1, 1), // Feb is 1 (0-indexed)+ periodEnd: new Date(2021, 1, 15),
📝 Committable suggestion
‼️IMPORTANT

Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

periodStart: newDate('2021-02-01'),
periodEnd: newDate('2021-02-15'),
periodStart: newDate(2021,1,1),// Feb is 1 (0-indexed)
periodEnd: newDate(2021,1,15),
🤖 Prompt for AI Agents
In
packages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsx
around lines 209-210, the test uses ISO string parsing new Date('2021-02-01')
and new Date('2021-02-15') which is timezone-dependent; replace them with
numeric Date constructors that create local-midnight dates (e.g., new Date(2021,
1, 1) and new Date(2021, 1, 15) — note month is zero-based) so the test is
stable across timezones.

 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', () => {
Expand Down

4 changes: 3 additions & 1 deletion
packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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') && (
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

panteliselef
merged 13 commits into

from

Aug 14, 2025
 Merged


feat(clerk-js,types): Display trial subscriptions in profiles
#6526
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


13 commits


Select commit
Hold shift + click to select a range
b228074

chore(clerk-js,types): Update PricingTable with trial info


panteliselef Aug 6, 2025
9eda6fa

chore(clerk-js,types): Update checkout to handle trials


panteliselef Aug 8, 2025
1c6b47c

chore(clerk-js,types): Update checkout to handle trials


panteliselef Aug 8, 2025
e729316

handle checkout confirming step


panteliselef Aug 12, 2025
9e7381a

feat(clerk-js,types): Display trialed subscriptions in profiles


panteliselef Aug 12, 2025
9a795da

Merge branch 'refs/heads/main' into elef/com-1122-show-free-trial-row…


panteliselef Aug 12, 2025
fd02396

Merge branch 'main' into elef/com-1122-show-free-trial-row-in-userpro…


panteliselef Aug 14, 2025
b106e12

test and patch changes


panteliselef Aug 14, 2025
5075752

Merge branch 'main' into elef/com-1122-show-free-trial-row-in-userpro…


panteliselef Aug 14, 2025
aa623e6

add tests


panteliselef Aug 14, 2025
fb98b76

fix tests


panteliselef Aug 14, 2025
ff10193

add changeset


panteliselef Aug 14, 2025
5a63011

Merge branch 'main' into elef/com-1122-show-free-trial-row-in-userpro…


panteliselef Aug 14, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


5 changes: 5 additions & 0 deletions
.changeset/fresh-breads-fall.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/clerk-js': patch
---

Display trial subscriptions in UserProfile and OrganizationProfile.

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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 => ({
Expand Down

60 changes: 60 additions & 0 deletions
packages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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'),

Comment on lines

+209
 to 
+210

@coderabbitaicoderabbitaiBotAug 14, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion
Avoid timezone-dependent date parsing in tests (can cause off-by-one day flakiness).
Parsing ISO dates like '2021-02-01' constructs a UTC date, which may render as the prior day in non-UTC timezones. Prefer the numeric Date constructor to create local-midnight dates and keep output consistent across environments.
Apply this diff:
- periodStart: new Date('2021-02-01'),- periodEnd: new Date('2021-02-15'),+ periodStart: new Date(2021, 1, 1), // Feb is 1 (0-indexed)+ periodEnd: new Date(2021, 1, 15),
📝 Committable suggestion
‼️IMPORTANT

Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

periodStart: newDate('2021-02-01'),
periodEnd: newDate('2021-02-15'),
periodStart: newDate(2021,1,1),// Feb is 1 (0-indexed)
periodEnd: newDate(2021,1,15),
🤖 Prompt for AI Agents
In
packages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsx
around lines 209-210, the test uses ISO string parsing new Date('2021-02-01')
and new Date('2021-02-15') which is timezone-dependent; replace them with
numeric Date constructors that create local-midnight dates (e.g., new Date(2021,
1, 1) and new Date(2021, 1, 15) — note month is zero-based) so the test is
stable across timezones.

 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', () => {
Expand Down

4 changes: 3 additions & 1 deletion
packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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') && (
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

panteliselef
merged 13 commits into

from

Aug 14, 2025
 Merged


feat(clerk-js,types): Display trial subscriptions in profiles
#6526
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


13 commits


Select commit
Hold shift + click to select a range
b228074

chore(clerk-js,types): Update PricingTable with trial info


panteliselef Aug 6, 2025
9eda6fa

chore(clerk-js,types): Update checkout to handle trials


panteliselef Aug 8, 2025
1c6b47c

chore(clerk-js,types): Update checkout to handle trials


panteliselef Aug 8, 2025
e729316

handle checkout confirming step


panteliselef Aug 12, 2025
9e7381a

feat(clerk-js,types): Display trialed subscriptions in profiles


panteliselef Aug 12, 2025
9a795da

Merge branch 'refs/heads/main' into elef/com-1122-show-free-trial-row…


panteliselef Aug 12, 2025
fd02396

Merge branch 'main' into elef/com-1122-show-free-trial-row-in-userpro…


panteliselef Aug 14, 2025
b106e12

test and patch changes


panteliselef Aug 14, 2025
5075752

Merge branch 'main' into elef/com-1122-show-free-trial-row-in-userpro…


panteliselef Aug 14, 2025
aa623e6

add tests


panteliselef Aug 14, 2025
fb98b76

fix tests


panteliselef Aug 14, 2025
ff10193

add changeset


panteliselef Aug 14, 2025
5a63011

Merge branch 'main' into elef/com-1122-show-free-trial-row-in-userpro…


panteliselef Aug 14, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


5 changes: 5 additions & 0 deletions
.changeset/fresh-breads-fall.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/clerk-js': patch
---

Display trial subscriptions in UserProfile and OrganizationProfile.

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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 => ({
Expand Down

60 changes: 60 additions & 0 deletions
packages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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'),

Comment on lines

+209
 to 
+210

@coderabbitaicoderabbitaiBotAug 14, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion
Avoid timezone-dependent date parsing in tests (can cause off-by-one day flakiness).
Parsing ISO dates like '2021-02-01' constructs a UTC date, which may render as the prior day in non-UTC timezones. Prefer the numeric Date constructor to create local-midnight dates and keep output consistent across environments.
Apply this diff:
- periodStart: new Date('2021-02-01'),- periodEnd: new Date('2021-02-15'),+ periodStart: new Date(2021, 1, 1), // Feb is 1 (0-indexed)+ periodEnd: new Date(2021, 1, 15),
📝 Committable suggestion
‼️IMPORTANT

Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

periodStart: newDate('2021-02-01'),
periodEnd: newDate('2021-02-15'),
periodStart: newDate(2021,1,1),// Feb is 1 (0-indexed)
periodEnd: newDate(2021,1,15),
🤖 Prompt for AI Agents
In
packages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsx
around lines 209-210, the test uses ISO string parsing new Date('2021-02-01')
and new Date('2021-02-15') which is timezone-dependent; replace them with
numeric Date constructors that create local-midnight dates (e.g., new Date(2021,
1, 1) and new Date(2021, 1, 15) — note month is zero-based) so the test is
stable across timezones.

 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', () => {
Expand Down

4 changes: 3 additions & 1 deletion
packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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') && (
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

panteliselef
merged 13 commits into

from

Aug 14, 2025
 Merged


feat(clerk-js,types): Display trial subscriptions in profiles
#6526
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


13 commits


Select commit
Hold shift + click to select a range
b228074

chore(clerk-js,types): Update PricingTable with trial info


panteliselef Aug 6, 2025
9eda6fa

chore(clerk-js,types): Update checkout to handle trials


panteliselef Aug 8, 2025
1c6b47c

chore(clerk-js,types): Update checkout to handle trials


panteliselef Aug 8, 2025
e729316

handle checkout confirming step


panteliselef Aug 12, 2025
9e7381a

feat(clerk-js,types): Display trialed subscriptions in profiles


panteliselef Aug 12, 2025
9a795da

Merge branch 'refs/heads/main' into elef/com-1122-show-free-trial-row…


panteliselef Aug 12, 2025
fd02396

Merge branch 'main' into elef/com-1122-show-free-trial-row-in-userpro…


panteliselef Aug 14, 2025
b106e12

test and patch changes


panteliselef Aug 14, 2025
5075752

Merge branch 'main' into elef/com-1122-show-free-trial-row-in-userpro…


panteliselef Aug 14, 2025
aa623e6

add tests


panteliselef Aug 14, 2025
fb98b76

fix tests


panteliselef Aug 14, 2025
ff10193

add changeset


panteliselef Aug 14, 2025
5a63011

Merge branch 'main' into elef/com-1122-show-free-trial-row-in-userpro…


panteliselef Aug 14, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


5 changes: 5 additions & 0 deletions
.changeset/fresh-breads-fall.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/clerk-js': patch
---

Display trial subscriptions in UserProfile and OrganizationProfile.

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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 => ({
Expand Down

60 changes: 60 additions & 0 deletions
packages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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'),

Comment on lines

+209
 to 
+210

@coderabbitaicoderabbitaiBotAug 14, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion
Avoid timezone-dependent date parsing in tests (can cause off-by-one day flakiness).
Parsing ISO dates like '2021-02-01' constructs a UTC date, which may render as the prior day in non-UTC timezones. Prefer the numeric Date constructor to create local-midnight dates and keep output consistent across environments.
Apply this diff:
- periodStart: new Date('2021-02-01'),- periodEnd: new Date('2021-02-15'),+ periodStart: new Date(2021, 1, 1), // Feb is 1 (0-indexed)+ periodEnd: new Date(2021, 1, 15),
📝 Committable suggestion
‼️IMPORTANT

Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

periodStart: newDate('2021-02-01'),
periodEnd: newDate('2021-02-15'),
periodStart: newDate(2021,1,1),// Feb is 1 (0-indexed)
periodEnd: newDate(2021,1,15),
🤖 Prompt for AI Agents
In
packages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsx
around lines 209-210, the test uses ISO string parsing new Date('2021-02-01')
and new Date('2021-02-15') which is timezone-dependent; replace them with
numeric Date constructors that create local-midnight dates (e.g., new Date(2021,
1, 1) and new Date(2021, 1, 15) — note month is zero-based) so the test is
stable across timezones.

 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', () => {
Expand Down

4 changes: 3 additions & 1 deletion
packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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') && (
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

panteliselef
merged 13 commits into

from

Aug 14, 2025
 Merged


feat(clerk-js,types): Display trial subscriptions in profiles
#6526
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


13 commits


Select commit
Hold shift + click to select a range
b228074

chore(clerk-js,types): Update PricingTable with trial info


panteliselef Aug 6, 2025
9eda6fa

chore(clerk-js,types): Update checkout to handle trials


panteliselef Aug 8, 2025
1c6b47c

chore(clerk-js,types): Update checkout to handle trials


panteliselef Aug 8, 2025
e729316

handle checkout confirming step


panteliselef Aug 12, 2025
9e7381a

feat(clerk-js,types): Display trialed subscriptions in profiles


panteliselef Aug 12, 2025
9a795da

Merge branch 'refs/heads/main' into elef/com-1122-show-free-trial-row…


panteliselef Aug 12, 2025
fd02396

Merge branch 'main' into elef/com-1122-show-free-trial-row-in-userpro…


panteliselef Aug 14, 2025
b106e12

test and patch changes


panteliselef Aug 14, 2025
5075752

Merge branch 'main' into elef/com-1122-show-free-trial-row-in-userpro…


panteliselef Aug 14, 2025
aa623e6

add tests


panteliselef Aug 14, 2025
fb98b76

fix tests


panteliselef Aug 14, 2025
ff10193

add changeset


panteliselef Aug 14, 2025
5a63011

Merge branch 'main' into elef/com-1122-show-free-trial-row-in-userpro…


panteliselef Aug 14, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


5 changes: 5 additions & 0 deletions
.changeset/fresh-breads-fall.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/clerk-js': patch
---

Display trial subscriptions in UserProfile and OrganizationProfile.

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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 => ({
Expand Down

60 changes: 60 additions & 0 deletions
packages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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'),

Comment on lines

+209
 to 
+210

@coderabbitaicoderabbitaiBotAug 14, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion
Avoid timezone-dependent date parsing in tests (can cause off-by-one day flakiness).
Parsing ISO dates like '2021-02-01' constructs a UTC date, which may render as the prior day in non-UTC timezones. Prefer the numeric Date constructor to create local-midnight dates and keep output consistent across environments.
Apply this diff:
- periodStart: new Date('2021-02-01'),- periodEnd: new Date('2021-02-15'),+ periodStart: new Date(2021, 1, 1), // Feb is 1 (0-indexed)+ periodEnd: new Date(2021, 1, 15),
📝 Committable suggestion
‼️IMPORTANT

Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

periodStart: newDate('2021-02-01'),
periodEnd: newDate('2021-02-15'),
periodStart: newDate(2021,1,1),// Feb is 1 (0-indexed)
periodEnd: newDate(2021,1,15),
🤖 Prompt for AI Agents
In
packages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsx
around lines 209-210, the test uses ISO string parsing new Date('2021-02-01')
and new Date('2021-02-15') which is timezone-dependent; replace them with
numeric Date constructors that create local-midnight dates (e.g., new Date(2021,
1, 1) and new Date(2021, 1, 15) — note month is zero-based) so the test is
stable across timezones.

 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', () => {
Expand Down

4 changes: 3 additions & 1 deletion
packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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') && (
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

panteliselef
merged 13 commits into

from

Aug 14, 2025
 Merged


feat(clerk-js,types): Display trial subscriptions in profiles
#6526
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


13 commits


Select commit
Hold shift + click to select a range
b228074

chore(clerk-js,types): Update PricingTable with trial info


panteliselef Aug 6, 2025
9eda6fa

chore(clerk-js,types): Update checkout to handle trials


panteliselef Aug 8, 2025
1c6b47c

chore(clerk-js,types): Update checkout to handle trials


panteliselef Aug 8, 2025
e729316

handle checkout confirming step


panteliselef Aug 12, 2025
9e7381a

feat(clerk-js,types): Display trialed subscriptions in profiles


panteliselef Aug 12, 2025
9a795da

Merge branch 'refs/heads/main' into elef/com-1122-show-free-trial-row…


panteliselef Aug 12, 2025
fd02396

Merge branch 'main' into elef/com-1122-show-free-trial-row-in-userpro…


panteliselef Aug 14, 2025
b106e12

test and patch changes


panteliselef Aug 14, 2025
5075752

Merge branch 'main' into elef/com-1122-show-free-trial-row-in-userpro…


panteliselef Aug 14, 2025
aa623e6

add tests


panteliselef Aug 14, 2025
fb98b76

fix tests


panteliselef Aug 14, 2025
ff10193

add changeset


panteliselef Aug 14, 2025
5a63011

Merge branch 'main' into elef/com-1122-show-free-trial-row-in-userpro…


panteliselef Aug 14, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


5 changes: 5 additions & 0 deletions
.changeset/fresh-breads-fall.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/clerk-js': patch
---

Display trial subscriptions in UserProfile and OrganizationProfile.

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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 => ({
Expand Down

60 changes: 60 additions & 0 deletions
packages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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'),

Comment on lines

+209
 to 
+210

@coderabbitaicoderabbitaiBotAug 14, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion
Avoid timezone-dependent date parsing in tests (can cause off-by-one day flakiness).
Parsing ISO dates like '2021-02-01' constructs a UTC date, which may render as the prior day in non-UTC timezones. Prefer the numeric Date constructor to create local-midnight dates and keep output consistent across environments.
Apply this diff:
- periodStart: new Date('2021-02-01'),- periodEnd: new Date('2021-02-15'),+ periodStart: new Date(2021, 1, 1), // Feb is 1 (0-indexed)+ periodEnd: new Date(2021, 1, 15),
📝 Committable suggestion
‼️IMPORTANT

Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

periodStart: newDate('2021-02-01'),
periodEnd: newDate('2021-02-15'),
periodStart: newDate(2021,1,1),// Feb is 1 (0-indexed)
periodEnd: newDate(2021,1,15),
🤖 Prompt for AI Agents
In
packages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsx
around lines 209-210, the test uses ISO string parsing new Date('2021-02-01')
and new Date('2021-02-15') which is timezone-dependent; replace them with
numeric Date constructors that create local-midnight dates (e.g., new Date(2021,
1, 1) and new Date(2021, 1, 15) — note month is zero-based) so the test is
stable across timezones.

 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', () => {
Expand Down

4 changes: 3 additions & 1 deletion
packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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') && (
Expand Down
Loading