Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
12 changes: 2 additions & 10 deletions packages/clerk-js/src/core/clerk.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1158,14 +1158,6 @@ export class Clerk implements ClerkInterface {
}
return;
}
// Temporary backward compatibility for legacy prop: `forOrganizations`. Will be removed in the coming minor release.
const nextProps = { ...(props as any) } as PricingTableProps & { forOrganizations?: boolean };
if (typeof (props as any)?.forOrganizations !== 'undefined') {
logger.warnOnce(
'Clerk: [IMPORTANT] <PricingTable /> prop `forOrganizations` is deprecated and will be removed in the coming minors. Use `for="organization"` instead.',
);
}

this.assertComponentsReady(this.#clerkUi);
const component = 'PricingTable';
void this.#clerkUi
Expand All @@ -1175,11 +1167,11 @@ export class Clerk implements ClerkInterface {
name: component,
appearanceKey: 'pricingTable',
node,
props: nextProps,
props,
}),
);

this.telemetry?.record(eventPrebuiltComponentMounted(component, nextProps));
this.telemetry?.record(eventPrebuiltComponentMounted(component, props));
};

public unmountPricingTable = (node: HTMLDivElement): void => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -513,61 +513,6 @@ describe('PricingTable - plans visibility', () => {
await findByRole('heading', { name: 'Test Plan' });
});

it('fetches organization plans and renders when using legacy forOrganizations: true', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withBilling();
f.withOrganizations();
f.withUser({ email_addresses: ['test@clerk.com'], organization_memberships: ['Org1'] });
});

// Set legacy prop via context provider
props.setProps({ forOrganizations: true } as any);

fixtures.clerk.billing.getStatements.mockRejectedValue();
fixtures.clerk.organization.getPaymentMethods.mockRejectedValue();
fixtures.clerk.billing.getPlans.mockResolvedValue({ data: [testPlan as any], total_count: 1 });
fixtures.clerk.billing.getSubscription.mockResolvedValue({
id: 'sub_org_active',
status: 'active',
activeAt: new Date('2021-01-01'),
createdAt: new Date('2021-01-01'),
nextPayment: null,
pastDueAt: null,
updatedAt: null,
subscriptionItems: [
{
id: 'si_active_org',
plan: { ...testPlan, forPayerType: 'organization' },
createdAt: new Date('2021-01-01'),
paymentMethodId: 'src_1',
pastDueAt: null,
canceledAt: null,
periodStart: new Date('2021-01-01'),
periodEnd: new Date('2021-01-31'),
planPeriod: 'month' as const,
status: 'active' as const,
isFreeTrial: false,
cancel: vi.fn(),
pathRoot: '',
reload: vi.fn(),
},
],
pathRoot: '',
reload: vi.fn(),
});

const { getByRole } = render(<PricingTable />, { wrapper });

await waitFor(() => {
// Ensure plans rendered
expect(getByRole('heading', { name: 'Test Plan' })).toBeVisible();
// Ensure API args reflect org context
expect(fixtures.clerk.billing.getPlans).toHaveBeenCalledWith(expect.objectContaining({ for: 'organization' }));
// Ensure subscription called with active org
expect(fixtures.clerk.billing.getSubscription).toHaveBeenCalledWith(expect.objectContaining({ orgId: 'Org1' }));
});
});

it('fetches organization plans and renders when using for: organization', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withBilling();
Expand Down
7 changes: 1 addition & 6 deletions packages/ui/src/contexts/ClerkUIComponentsContext.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -95,12 +95,7 @@ export function ComponentContextProvider({
);
case 'PricingTable':
return (
<SubscriberTypeContext.Provider
value={
// Backward compatibility: support legacy `forOrganizations: true`
(props as any).forOrganizations ? 'organization' : (props as PricingTableProps).for || 'user'
}
>
<SubscriberTypeContext.Provider value={(props as PricingTableProps).for || 'user'}>
<PricingTableContext.Provider value={{ componentName, ...(props as PricingTableProps) }}>
{children}
</PricingTableContext.Provider>
Expand Down
Loading