Skip to content

Commit 0e036d2

Browse files
dstaleydstaley
authored
feat(clerk-js,localizations,shared,ui): Render seat costs in PricingTable (#7917)
1 parent f2e39f4 commit 0e036d2

7 files changed

Lines changed: 886 additions & 6 deletions

File tree

‎packages/clerk-js/sandbox/scenarios/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
export { UserButtonSignedIn } from './user-button-signed-in';
22
export { CheckoutAccountCredit } from './checkout-account-credit';
3+
export { PricingTableSBB } from './pricing-table-sbb';

‎packages/clerk-js/sandbox/scenarios/pricing-table-sbb.ts‎

Lines changed: 371 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,371 @@
1+
import {
2+
clerkHandlers,
3+
http,
4+
HttpResponse,
5+
EnvironmentService,
6+
SessionService,
7+
setClerkState,
8+
type MockScenario,
9+
UserService,
10+
} from '@clerk/msw';
11+
import type { BillingPlanJSON } from '@clerk/shared/types';
12+
13+
export function PricingTableSBB(): MockScenario {
14+
const user = UserService.create();
15+
const session = SessionService.create(user);
16+
const money = (amount: number) => ({
17+
amount,
18+
amount_formatted: (amount / 100).toFixed(2),
19+
currency: 'USD',
20+
currency_symbol: '$',
21+
});
22+
const mockFeatures = [
23+
{
24+
object: 'feature' as const,
25+
id: 'feature_custom_domains',
26+
name: 'Custom domains',
27+
description: 'Connect and manage branded domains.',
28+
slug: 'custom-domains',
29+
avatar_url: null,
30+
},
31+
{
32+
object: 'feature' as const,
33+
id: 'feature_saml_sso',
34+
name: 'SAML SSO',
35+
description: 'Single sign-on with enterprise identity providers.',
36+
slug: 'saml-sso',
37+
avatar_url: null,
38+
},
39+
{
40+
object: 'feature' as const,
41+
id: 'feature_audit_logs',
42+
name: 'Audit logs',
43+
description: 'Track account activity and security events.',
44+
slug: 'audit-logs',
45+
avatar_url: null,
46+
},
47+
{
48+
object: 'feature' as const,
49+
id: 'feature_priority_support',
50+
name: 'Priority support',
51+
description: 'Faster response times from the support team.',
52+
slug: 'priority-support',
53+
avatar_url: null,
54+
},
55+
{
56+
object: 'feature' as const,
57+
id: 'feature_rate_limit_boost',
58+
name: 'Rate limit boost',
59+
description: 'Higher API request thresholds for production traffic.',
60+
slug: 'rate-limit-boost',
61+
avatar_url: null,
62+
},
63+
];
64+
65+
setClerkState({
66+
environment: EnvironmentService.MULTI_SESSION,
67+
session,
68+
user,
69+
});
70+
71+
const subscriptionHandler = http.get('https://*.clerk.accounts.dev/v1/me/billing/subscription', () => {
72+
return HttpResponse.json({
73+
response: {
74+
data: {},
75+
},
76+
});
77+
});
78+
79+
const paymentMethodsHandler = http.get('https://*.clerk.accounts.dev/v1/me/billing/payment_methods', () => {
80+
return HttpResponse.json({
81+
response: {
82+
data: {},
83+
},
84+
});
85+
});
86+
87+
const plansHandler = http.get('https://*.clerk.accounts.dev/v1/billing/plans', () => {
88+
return HttpResponse.json({
89+
data: [
90+
{
91+
object: 'commerce_plan',
92+
id: 'plan_a_sbb',
93+
name: 'Plan A',
94+
fee: money(12989),
95+
annual_fee: null,
96+
annual_monthly_fee: null,
97+
description: null,
98+
is_default: false,
99+
is_recurring: true,
100+
has_base_fee: true,
101+
for_payer_type: 'org',
102+
publicly_visible: true,
103+
slug: 'plan-a-sbb',
104+
avatar_url: null,
105+
features: mockFeatures,
106+
free_trial_enabled: false,
107+
free_trial_days: null,
108+
unit_prices: [
109+
{
110+
name: 'seat',
111+
block_size: 1,
112+
tiers: [
113+
{
114+
id: 'tier_plan_a_seats_1',
115+
object: 'commerce_unit_price',
116+
starts_at_block: 1,
117+
ends_after_block: 5,
118+
fee_per_block: money(0),
119+
},
120+
],
121+
},
122+
],
123+
},
124+
{
125+
object: 'commerce_plan',
126+
id: 'plan_b_sbb',
127+
name: 'Plan B',
128+
fee: money(12989),
129+
annual_fee: null,
130+
annual_monthly_fee: null,
131+
description: null,
132+
is_default: false,
133+
is_recurring: true,
134+
has_base_fee: true,
135+
for_payer_type: 'org',
136+
publicly_visible: true,
137+
slug: 'plan-b-sbb',
138+
avatar_url: null,
139+
features: mockFeatures,
140+
free_trial_enabled: false,
141+
free_trial_days: null,
142+
unit_prices: [
143+
{
144+
name: 'seat',
145+
block_size: 1,
146+
tiers: [
147+
{
148+
id: 'tier_plan_b_seats_1',
149+
object: 'commerce_unit_price',
150+
starts_at_block: 1,
151+
ends_after_block: null,
152+
fee_per_block: money(1200),
153+
},
154+
],
155+
},
156+
],
157+
},
158+
{
159+
object: 'commerce_plan',
160+
id: 'plan_c_sbb',
161+
name: 'Plan C',
162+
fee: money(0),
163+
annual_fee: null,
164+
annual_monthly_fee: null,
165+
description: null,
166+
is_default: false,
167+
is_recurring: true,
168+
has_base_fee: false,
169+
for_payer_type: 'org',
170+
publicly_visible: true,
171+
slug: 'plan-c-sbb',
172+
avatar_url: null,
173+
features: mockFeatures,
174+
free_trial_enabled: false,
175+
free_trial_days: null,
176+
unit_prices: [
177+
{
178+
name: 'seat',
179+
block_size: 1,
180+
tiers: [
181+
{
182+
id: 'tier_plan_c_seats_1',
183+
object: 'commerce_unit_price',
184+
starts_at_block: 1,
185+
ends_after_block: null,
186+
fee_per_block: money(1200),
187+
},
188+
],
189+
},
190+
],
191+
},
192+
{
193+
object: 'commerce_plan',
194+
id: 'plan_d_sbb',
195+
name: 'Plan D',
196+
fee: money(12989),
197+
annual_fee: null,
198+
annual_monthly_fee: null,
199+
description: null,
200+
is_default: false,
201+
is_recurring: true,
202+
has_base_fee: true,
203+
for_payer_type: 'org',
204+
publicly_visible: true,
205+
slug: 'plan-d-sbb',
206+
avatar_url: null,
207+
features: mockFeatures,
208+
free_trial_enabled: false,
209+
free_trial_days: null,
210+
unit_prices: [
211+
{
212+
name: 'seat',
213+
block_size: 1,
214+
tiers: [
215+
{
216+
id: 'tier_plan_d_seats_1',
217+
object: 'commerce_unit_price',
218+
starts_at_block: 1,
219+
ends_after_block: 5,
220+
fee_per_block: money(0),
221+
},
222+
{
223+
id: 'tier_plan_d_seats_2',
224+
object: 'commerce_unit_price',
225+
starts_at_block: 6,
226+
ends_after_block: null,
227+
fee_per_block: money(1200),
228+
},
229+
],
230+
},
231+
],
232+
},
233+
{
234+
object: 'commerce_plan',
235+
id: 'plan_e_sbb',
236+
name: 'Plan E',
237+
fee: money(12989),
238+
annual_fee: null,
239+
annual_monthly_fee: null,
240+
description: null,
241+
is_default: false,
242+
is_recurring: true,
243+
has_base_fee: true,
244+
for_payer_type: 'org',
245+
publicly_visible: true,
246+
slug: 'plan-e-sbb',
247+
avatar_url: null,
248+
features: mockFeatures,
249+
free_trial_enabled: false,
250+
free_trial_days: null,
251+
},
252+
{
253+
object: 'commerce_plan',
254+
id: 'plan_f_sbb',
255+
name: 'Plan F',
256+
fee: money(0),
257+
annual_fee: null,
258+
annual_monthly_fee: null,
259+
description: null,
260+
is_default: true,
261+
is_recurring: true,
262+
has_base_fee: false,
263+
for_payer_type: 'org',
264+
publicly_visible: true,
265+
slug: 'plan-f-sbb',
266+
avatar_url: null,
267+
features: mockFeatures,
268+
free_trial_enabled: false,
269+
free_trial_days: null,
270+
unit_prices: [
271+
{
272+
name: 'seat',
273+
block_size: 1,
274+
tiers: [
275+
{
276+
id: 'tier_plan_f_seats_1',
277+
object: 'commerce_unit_price',
278+
starts_at_block: 1,
279+
ends_after_block: 5,
280+
fee_per_block: money(0),
281+
},
282+
{
283+
id: 'tier_plan_f_seats_2',
284+
object: 'commerce_unit_price',
285+
starts_at_block: 6,
286+
ends_after_block: null,
287+
fee_per_block: money(1200),
288+
},
289+
],
290+
},
291+
],
292+
},
293+
{
294+
object: 'commerce_plan',
295+
id: 'plan_g_sbb',
296+
name: 'Plan G',
297+
fee: money(0),
298+
annual_fee: null,
299+
annual_monthly_fee: null,
300+
description: null,
301+
is_default: false,
302+
is_recurring: true,
303+
has_base_fee: false,
304+
for_payer_type: 'org',
305+
publicly_visible: true,
306+
slug: 'plan-g-sbb',
307+
avatar_url: null,
308+
features: mockFeatures,
309+
free_trial_enabled: false,
310+
free_trial_days: null,
311+
unit_prices: [
312+
{
313+
name: 'seat',
314+
block_size: 1,
315+
tiers: [
316+
{
317+
id: 'tier_plan_g_seats_1',
318+
object: 'commerce_unit_price',
319+
starts_at_block: 1,
320+
ends_after_block: null,
321+
fee_per_block: money(0),
322+
},
323+
],
324+
},
325+
],
326+
},
327+
{
328+
object: 'commerce_plan',
329+
id: 'plan_h_sbb',
330+
name: 'Plan H',
331+
fee: money(12989),
332+
annual_fee: money(10000),
333+
annual_monthly_fee: money(833),
334+
description: null,
335+
is_default: false,
336+
is_recurring: true,
337+
has_base_fee: true,
338+
for_payer_type: 'org',
339+
publicly_visible: true,
340+
slug: 'plan-h-sbb',
341+
avatar_url: null,
342+
features: mockFeatures,
343+
free_trial_enabled: false,
344+
free_trial_days: null,
345+
unit_prices: [
346+
{
347+
name: 'seat',
348+
block_size: 1,
349+
tiers: [
350+
{
351+
id: 'tier_plan_h_seats_1',
352+
object: 'commerce_unit_price',
353+
starts_at_block: 1,
354+
ends_after_block: null,
355+
fee_per_block: money(0),
356+
},
357+
],
358+
},
359+
],
360+
},
361+
] as BillingPlanJSON[],
362+
});
363+
});
364+
365+
return {
366+
description: 'PricingTable with seat-based billing plans',
367+
handlers: [plansHandler, subscriptionHandler, paymentMethodsHandler, ...clerkHandlers],
368+
initialState: { session, user },
369+
name: 'pricing-table-sbb',
370+
};
371+
}

0 commit comments

Comments
 (0)