@nozle-js/react 0.5.3 → 0.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +34 -304
- package/dist/index.cjs +404 -1910
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +124 -295
- package/dist/index.d.ts +124 -295
- package/dist/index.js +404 -1900
- package/dist/index.js.map +1 -1
- package/package.json +11 -7
package/dist/index.d.cts
CHANGED
|
@@ -1,128 +1,78 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import React__default, { ReactNode } from 'react';
|
|
3
3
|
|
|
4
|
-
interface
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
4
|
+
interface CompletedCheckoutResult {
|
|
5
|
+
type: 'completed';
|
|
6
|
+
status: string;
|
|
7
|
+
payment_source?: string;
|
|
8
|
+
subscription_id?: string;
|
|
9
|
+
plan_code?: string;
|
|
10
|
+
invoice_id?: string;
|
|
11
|
+
amount_cents?: number;
|
|
12
|
+
currency?: string;
|
|
10
13
|
}
|
|
14
|
+
interface ScheduledCheckoutResult {
|
|
15
|
+
type: 'scheduled';
|
|
16
|
+
status: string;
|
|
17
|
+
subscription_id?: string;
|
|
18
|
+
plan_code?: string;
|
|
19
|
+
}
|
|
20
|
+
type CheckoutResult = {
|
|
21
|
+
type: 'stripe';
|
|
22
|
+
url?: string;
|
|
23
|
+
clientSecret?: string;
|
|
24
|
+
client_secret?: string;
|
|
25
|
+
} | {
|
|
26
|
+
type: 'razorpay';
|
|
27
|
+
orderId: string;
|
|
28
|
+
} | CompletedCheckoutResult | ScheduledCheckoutResult | {
|
|
29
|
+
url: string;
|
|
30
|
+
};
|
|
31
|
+
interface CreateCheckoutInput {
|
|
32
|
+
planCode: string;
|
|
33
|
+
returnUrl: string;
|
|
34
|
+
}
|
|
35
|
+
type CreateCheckout = (input: CreateCheckoutInput) => Promise<CheckoutResult>;
|
|
11
36
|
interface NozleClient {
|
|
12
|
-
|
|
37
|
+
publishableKey: string;
|
|
13
38
|
baseUrl: string;
|
|
14
|
-
|
|
15
|
-
can(customerId: string, feature: string): Promise<CanResult>;
|
|
39
|
+
catalogFetch(path: string, init?: RequestInit): Promise<Response>;
|
|
16
40
|
}
|
|
17
41
|
interface BillingContextValue {
|
|
18
|
-
client: NozleClient
|
|
19
|
-
|
|
20
|
-
centrifugoUrl: string;
|
|
21
|
-
centrifugoToken: string | null;
|
|
42
|
+
client: NozleClient;
|
|
43
|
+
createCheckout?: CreateCheckout;
|
|
22
44
|
}
|
|
23
|
-
declare const BillingContext:
|
|
45
|
+
declare const BillingContext: React__default.Context<BillingContextValue | null>;
|
|
24
46
|
interface BillingProviderProps {
|
|
25
|
-
|
|
47
|
+
publishableKey: string;
|
|
48
|
+
createCheckout?: CreateCheckout;
|
|
26
49
|
baseUrl?: string;
|
|
27
|
-
workspaceId?: string;
|
|
28
|
-
centrifugoUrl?: string;
|
|
29
50
|
children: ReactNode;
|
|
30
51
|
}
|
|
31
|
-
declare function BillingProvider({
|
|
52
|
+
declare function BillingProvider({ publishableKey, createCheckout, baseUrl, children, }: BillingProviderProps): React__default.ReactElement;
|
|
53
|
+
declare function useOptionalBillingContext(): BillingContextValue | null;
|
|
32
54
|
declare function useBillingContext(): BillingContextValue;
|
|
33
55
|
declare function useNozleClient(): NozleClient;
|
|
34
56
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
*/
|
|
42
|
-
interface CanState {
|
|
43
|
-
allowed: boolean;
|
|
44
|
-
remaining: number | null;
|
|
45
|
-
limit: number | null;
|
|
46
|
-
loading: boolean;
|
|
47
|
-
error: string | null;
|
|
48
|
-
}
|
|
49
|
-
/**
|
|
50
|
-
* Check whether a customer is entitled to a feature.
|
|
51
|
-
* Subscribes to Centrifugo workspace:{workspaceId}:entitlements channel for live updates.
|
|
52
|
-
* No polling — WebSocket only per CONTEXT.md locked decision.
|
|
53
|
-
*
|
|
54
|
-
* @param customerId - Customer ID to check entitlement for
|
|
55
|
-
* @param featureKey - Feature key to check
|
|
56
|
-
* @returns CanState with allowed, remaining, limit, loading, error
|
|
57
|
-
*/
|
|
58
|
-
declare function useCan(customerId: string, featureKey: string): CanState;
|
|
59
|
-
|
|
60
|
-
/**
|
|
61
|
-
* useUsage hook — fetch usage data for a customer metric.
|
|
62
|
-
* Calls GET /api/v1/usage/:customerId/:metricKey via client's fetch wrapper.
|
|
63
|
-
*/
|
|
64
|
-
interface UsageState {
|
|
65
|
-
value: number | null;
|
|
66
|
-
loading: boolean;
|
|
67
|
-
error: string | null;
|
|
68
|
-
}
|
|
69
|
-
/**
|
|
70
|
-
* Fetch usage for a customer metric.
|
|
71
|
-
*
|
|
72
|
-
* @param customerId - Customer ID to fetch usage for
|
|
73
|
-
* @param metricKey - Metric key to fetch
|
|
74
|
-
* @returns UsageState with value, loading, error
|
|
75
|
-
*/
|
|
76
|
-
declare function useUsage(customerId: string, metricKey: string): UsageState;
|
|
77
|
-
|
|
78
|
-
/**
|
|
79
|
-
* useCredits hook — fetch credit balance for a customer.
|
|
80
|
-
* Calls GET /api/v1/credits/:customerId/balance via client's fetch wrapper.
|
|
81
|
-
*/
|
|
82
|
-
interface CreditsState {
|
|
83
|
-
balance: number | null;
|
|
84
|
-
loading: boolean;
|
|
85
|
-
error: string | null;
|
|
57
|
+
interface Plan$1 {
|
|
58
|
+
code: string;
|
|
59
|
+
name: string;
|
|
60
|
+
amount_cents: number;
|
|
61
|
+
amount_currency: string;
|
|
62
|
+
interval: string;
|
|
86
63
|
}
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
* @returns CreditsState with balance, loading, error
|
|
92
|
-
*/
|
|
93
|
-
declare function useCredits(customerId: string): CreditsState;
|
|
94
|
-
|
|
95
|
-
/**
|
|
96
|
-
* BillingPortalProvider — Context wrapper for embeddable SDK components.
|
|
97
|
-
* UI-01: Wraps children and exposes a React context with { customerId, apiKey }.
|
|
98
|
-
* Components inside can consume this via the useBillingPortal() hook.
|
|
99
|
-
*
|
|
100
|
-
* Internally renders BillingProvider so all billing hooks work inside.
|
|
101
|
-
*/
|
|
64
|
+
declare function usePlans(): {
|
|
65
|
+
plans: Plan$1[];
|
|
66
|
+
isLoading: boolean;
|
|
67
|
+
};
|
|
102
68
|
|
|
103
|
-
interface
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
interface BillingPortalProviderProps {
|
|
109
|
-
customerId: string;
|
|
110
|
-
apiKey: string;
|
|
111
|
-
children: ReactNode;
|
|
69
|
+
interface UseCheckoutResult$1 {
|
|
70
|
+
fetchClientSecret: (planCode: string, returnUrl?: string) => Promise<string | null>;
|
|
71
|
+
checkout: CheckoutResult | null;
|
|
72
|
+
isLoading: boolean;
|
|
73
|
+
error: Error | null;
|
|
112
74
|
}
|
|
113
|
-
|
|
114
|
-
* BillingPortalProvider wraps your embedded billing UI and provides
|
|
115
|
-
* { customerId, apiKey } context to all nested SDK components.
|
|
116
|
-
*
|
|
117
|
-
* Usage:
|
|
118
|
-
* ```tsx
|
|
119
|
-
* <BillingPortalProvider customerId="cus_xxx" apiKey="bsr_pk_xxx">
|
|
120
|
-
* <PricingTable plans={plans} />
|
|
121
|
-
* <FeatureGate feature="analytics" />
|
|
122
|
-
* </BillingPortalProvider>
|
|
123
|
-
* ```
|
|
124
|
-
*/
|
|
125
|
-
declare function BillingPortalProvider({ customerId, apiKey, children, }: BillingPortalProviderProps): React.ReactElement;
|
|
75
|
+
declare function useCheckout$1(): UseCheckoutResult$1;
|
|
126
76
|
|
|
127
77
|
interface PricingPlan {
|
|
128
78
|
code: string;
|
|
@@ -133,17 +83,20 @@ interface PricingPlan {
|
|
|
133
83
|
description?: string;
|
|
134
84
|
}
|
|
135
85
|
interface PricingTableProps {
|
|
136
|
-
customerId?: string;
|
|
137
86
|
currentPlanCode?: string;
|
|
138
87
|
plans?: PricingPlan[];
|
|
139
88
|
features?: string[][];
|
|
140
89
|
onSelect?: (plan: PricingPlan) => void;
|
|
90
|
+
returnUrl?: string;
|
|
91
|
+
onStripeClientSecret?: (clientSecret: string) => void;
|
|
92
|
+
onCheckoutResult?: (result: CheckoutResult) => void;
|
|
93
|
+
onCheckoutError?: (error: Error) => void;
|
|
141
94
|
showToggle?: boolean;
|
|
142
95
|
highlightPlan?: string;
|
|
143
96
|
className?: string;
|
|
144
97
|
enterpriseEmail?: string;
|
|
145
98
|
}
|
|
146
|
-
declare function PricingTable({
|
|
99
|
+
declare function PricingTable({ currentPlanCode, plans: propPlans, features, onSelect, returnUrl, onStripeClientSecret, onCheckoutResult, onCheckoutError, showToggle, highlightPlan, className, enterpriseEmail, }: PricingTableProps): React__default.ReactElement;
|
|
147
100
|
|
|
148
101
|
/**
|
|
149
102
|
* PlanCard — Individual pricing plan card component.
|
|
@@ -162,14 +115,15 @@ interface Plan {
|
|
|
162
115
|
interface PlanCardProps extends Plan {
|
|
163
116
|
isAnnual: boolean;
|
|
164
117
|
isCurrent: boolean;
|
|
165
|
-
|
|
118
|
+
returnUrl?: string;
|
|
119
|
+
onSelect?: (input: CreateCheckoutInput) => void;
|
|
166
120
|
children?: ReactNode;
|
|
167
121
|
}
|
|
168
122
|
/**
|
|
169
123
|
* PlanCard renders a single pricing plan.
|
|
170
124
|
* Highlighted with aria-current="true" when isCurrent=true.
|
|
171
125
|
*/
|
|
172
|
-
declare function PlanCard({ id, name, monthlyPrice, annualPrice, features, description, isAnnual, isCurrent, onSelect, }: PlanCardProps):
|
|
126
|
+
declare function PlanCard({ id, name, monthlyPrice, annualPrice, features, description, isAnnual, isCurrent, returnUrl, onSelect, }: PlanCardProps): React__default.ReactElement;
|
|
173
127
|
|
|
174
128
|
/**
|
|
175
129
|
* PlanComparison — Side-by-side feature comparison table.
|
|
@@ -200,40 +154,24 @@ interface PlanComparisonProps {
|
|
|
200
154
|
* />
|
|
201
155
|
* ```
|
|
202
156
|
*/
|
|
203
|
-
declare function PlanComparison({ plans, features, }: PlanComparisonProps):
|
|
204
|
-
|
|
205
|
-
/**
|
|
206
|
-
* CheckoutButton — Initiates checkout for a plan.
|
|
207
|
-
* UI-02: Calls POST /api/v1/checkout, detects processor type from the response,
|
|
208
|
-
* and branches to the appropriate payment flow:
|
|
209
|
-
* - Stripe hosted checkout: redirect to url
|
|
210
|
-
* - Stripe embedded Elements: emit clientSecret via onStripeClientSecret callback
|
|
211
|
-
* - Razorpay: inject Razorpay.js and open the checkout modal
|
|
212
|
-
* - Legacy (no type): redirect to url for backwards compatibility
|
|
213
|
-
* Uses CSS variable theming with --nozle-* namespace.
|
|
214
|
-
*/
|
|
157
|
+
declare function PlanComparison({ plans, features, }: PlanComparisonProps): React__default.ReactElement;
|
|
215
158
|
|
|
216
159
|
interface CheckoutButtonProps {
|
|
217
|
-
|
|
160
|
+
planCode: string;
|
|
161
|
+
returnUrl?: string;
|
|
218
162
|
label?: string;
|
|
219
|
-
apiBaseUrl?: string;
|
|
220
163
|
className?: string;
|
|
221
|
-
style?:
|
|
164
|
+
style?: React__default.CSSProperties;
|
|
222
165
|
onError?: (error: Error) => void;
|
|
223
|
-
/** Required for Razorpay checkout path — the Razorpay publishable key (key_id). */
|
|
224
166
|
razorpayKeyId?: string;
|
|
225
|
-
/** Called with the Stripe Payment Intent / Checkout Session client secret
|
|
226
|
-
* when the BFF returns type:'stripe' without a hosted url.
|
|
227
|
-
* The host app is responsible for mounting Stripe Elements. */
|
|
228
167
|
onStripeClientSecret?: (clientSecret: string) => void;
|
|
229
|
-
/** Called with the Razorpay payment ID after a successful Razorpay payment. */
|
|
230
168
|
onSuccess?: (paymentId: string) => void;
|
|
169
|
+
onComplete?: (result: CompletedCheckoutResult) => void;
|
|
170
|
+
onScheduled?: (result: ScheduledCheckoutResult) => void;
|
|
231
171
|
}
|
|
232
172
|
interface RazorpayOptions {
|
|
233
173
|
key: string;
|
|
234
174
|
order_id: string;
|
|
235
|
-
name?: string;
|
|
236
|
-
description?: string;
|
|
237
175
|
handler: (response: {
|
|
238
176
|
razorpay_payment_id: string;
|
|
239
177
|
}) => void;
|
|
@@ -243,18 +181,12 @@ interface RazorpayOptions {
|
|
|
243
181
|
}
|
|
244
182
|
declare global {
|
|
245
183
|
interface Window {
|
|
246
|
-
Razorpay: new (
|
|
184
|
+
Razorpay: new (options: RazorpayOptions) => {
|
|
247
185
|
open(): void;
|
|
248
186
|
};
|
|
249
187
|
}
|
|
250
188
|
}
|
|
251
|
-
|
|
252
|
-
* CheckoutButton initiates a checkout session and routes to the appropriate
|
|
253
|
-
* payment processor path.
|
|
254
|
-
*
|
|
255
|
-
* Must be used inside a BillingPortalProvider.
|
|
256
|
-
*/
|
|
257
|
-
declare function CheckoutButton({ planId, label, apiBaseUrl, className, style, onError, razorpayKeyId, onStripeClientSecret, onSuccess, }: CheckoutButtonProps): React.ReactElement;
|
|
189
|
+
declare function CheckoutButton({ planCode, returnUrl, label, className, style, onError, razorpayKeyId, onStripeClientSecret, onSuccess, onComplete, onScheduled, }: CheckoutButtonProps): React__default.ReactElement;
|
|
258
190
|
|
|
259
191
|
interface CheckoutProps {
|
|
260
192
|
/** Stripe PaymentIntent client secret */
|
|
@@ -263,10 +195,14 @@ interface CheckoutProps {
|
|
|
263
195
|
publishableKey: string;
|
|
264
196
|
/** Optional Stripe Connect account ID */
|
|
265
197
|
stripeAccount?: string;
|
|
198
|
+
/** Where Stripe should return the buyer after a redirect-required payment. */
|
|
199
|
+
returnUrl?: string;
|
|
266
200
|
/** Custom label for the submit button (default: "Pay now") */
|
|
267
201
|
submitLabel?: string;
|
|
268
202
|
/** Called with the paymentIntentId when payment succeeds without redirect */
|
|
269
203
|
onSuccess?: (paymentIntentId: string) => void;
|
|
204
|
+
/** Called when an embedded Checkout Session completes without a redirect. */
|
|
205
|
+
onComplete?: () => void;
|
|
270
206
|
/** Called with the error when payment fails */
|
|
271
207
|
onError?: (error: Error) => void;
|
|
272
208
|
/** Called when the PaymentElement becomes interactive */
|
|
@@ -274,7 +210,9 @@ interface CheckoutProps {
|
|
|
274
210
|
/** Additional CSS class for the outer wrapper */
|
|
275
211
|
className?: string;
|
|
276
212
|
/** Inline styles for the outer wrapper */
|
|
277
|
-
style?:
|
|
213
|
+
style?: React__default.CSSProperties;
|
|
214
|
+
/** Optional custom controls for the PaymentIntent/PaymentElement branch. */
|
|
215
|
+
children?: React__default.ReactNode;
|
|
278
216
|
}
|
|
279
217
|
interface UseCheckoutResult {
|
|
280
218
|
/** Trigger payment confirmation programmatically */
|
|
@@ -285,54 +223,7 @@ interface UseCheckoutResult {
|
|
|
285
223
|
error: Error | null;
|
|
286
224
|
}
|
|
287
225
|
declare function useCheckout(): UseCheckoutResult;
|
|
288
|
-
declare function Checkout({ clientSecret, publishableKey, stripeAccount, submitLabel, onSuccess, onError, onReady, className, style, }: CheckoutProps):
|
|
289
|
-
|
|
290
|
-
/**
|
|
291
|
-
* UpgradeButton — Opens UpgradeModal on click.
|
|
292
|
-
* UI-02: Triggers plan upgrade flow with proration preview.
|
|
293
|
-
* Uses CSS variable theming with --nozle-* namespace.
|
|
294
|
-
*/
|
|
295
|
-
|
|
296
|
-
interface UpgradeButtonProps {
|
|
297
|
-
targetPlanId: string;
|
|
298
|
-
label?: string;
|
|
299
|
-
apiBaseUrl?: string;
|
|
300
|
-
className?: string;
|
|
301
|
-
style?: React.CSSProperties;
|
|
302
|
-
onUpgraded?: () => void;
|
|
303
|
-
}
|
|
304
|
-
/**
|
|
305
|
-
* UpgradeButton opens an UpgradeModal with live proration preview.
|
|
306
|
-
* Must be used inside a BillingPortalProvider.
|
|
307
|
-
*/
|
|
308
|
-
declare function UpgradeButton({ targetPlanId, label, apiBaseUrl, className, style, onUpgraded, }: UpgradeButtonProps): React.ReactElement;
|
|
309
|
-
|
|
310
|
-
/**
|
|
311
|
-
* CreditTopUpButton — Opens a dialog for purchasing credits.
|
|
312
|
-
* UI-02: Allows customers to top up their credit balance.
|
|
313
|
-
* Uses CSS variable theming with --nozle-* namespace.
|
|
314
|
-
*/
|
|
315
|
-
|
|
316
|
-
interface CreditTopUpButtonProps {
|
|
317
|
-
label?: string;
|
|
318
|
-
apiBaseUrl?: string;
|
|
319
|
-
className?: string;
|
|
320
|
-
style?: React.CSSProperties;
|
|
321
|
-
onSuccess?: (amount: number) => void;
|
|
322
|
-
onError?: (error: Error) => void;
|
|
323
|
-
}
|
|
324
|
-
/**
|
|
325
|
-
* CreditTopUpButton opens a dialog to purchase credits.
|
|
326
|
-
* Must be used inside a BillingPortalProvider.
|
|
327
|
-
*/
|
|
328
|
-
declare function CreditTopUpButton({ label, apiBaseUrl, className, style, onSuccess, onError, }: CreditTopUpButtonProps): React.ReactElement;
|
|
329
|
-
|
|
330
|
-
/**
|
|
331
|
-
* UpgradeModal — Shows live proration preview before confirming plan upgrade.
|
|
332
|
-
* UI-02: Fetches proration preview from POST /api/v1/subscriptions/preview.
|
|
333
|
-
* Shows credit, debit, net, and next billing date before confirming.
|
|
334
|
-
* Uses CSS variable theming with --nozle-* namespace.
|
|
335
|
-
*/
|
|
226
|
+
declare function Checkout({ clientSecret, publishableKey, stripeAccount, returnUrl, submitLabel, onSuccess, onComplete, onError, onReady, className, style, children, }: CheckoutProps): React__default.JSX.Element;
|
|
336
227
|
|
|
337
228
|
interface ProrationPreview {
|
|
338
229
|
credit: number;
|
|
@@ -342,47 +233,46 @@ interface ProrationPreview {
|
|
|
342
233
|
}
|
|
343
234
|
interface UpgradeModalProps {
|
|
344
235
|
isOpen: boolean;
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
236
|
+
planCode: string;
|
|
237
|
+
returnUrl?: string;
|
|
238
|
+
preview?: ProrationPreview;
|
|
239
|
+
onStripeClientSecret?: (clientSecret: string) => void;
|
|
240
|
+
onCheckoutStarted?: () => void;
|
|
241
|
+
onCompleted?: () => void;
|
|
242
|
+
onScheduled?: () => void;
|
|
349
243
|
onConfirm?: () => void;
|
|
350
244
|
onCancel?: () => void;
|
|
245
|
+
onError?: (error: Error) => void;
|
|
351
246
|
}
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
247
|
+
declare function UpgradeModal({ isOpen, planCode, returnUrl, preview, onStripeClientSecret, onCheckoutStarted, onCompleted, onScheduled, onConfirm, onCancel, onError, }: UpgradeModalProps): React__default.ReactElement | null;
|
|
248
|
+
|
|
249
|
+
interface UpgradeButtonProps {
|
|
250
|
+
planCode: string;
|
|
251
|
+
returnUrl?: string;
|
|
252
|
+
preview?: ProrationPreview;
|
|
253
|
+
label?: string;
|
|
254
|
+
className?: string;
|
|
255
|
+
style?: React__default.CSSProperties;
|
|
256
|
+
onStripeClientSecret?: (clientSecret: string) => void;
|
|
257
|
+
onCheckoutStarted?: () => void;
|
|
258
|
+
onDowngradeScheduled?: () => void;
|
|
259
|
+
onUpgraded?: () => void;
|
|
260
|
+
onError?: (error: Error) => void;
|
|
261
|
+
}
|
|
262
|
+
declare function UpgradeButton({ planCode, returnUrl, preview, label, className, style, onStripeClientSecret, onCheckoutStarted, onDowngradeScheduled, onUpgraded, onError, }: UpgradeButtonProps): React__default.ReactElement;
|
|
357
263
|
|
|
358
264
|
/**
|
|
359
|
-
*
|
|
360
|
-
*
|
|
361
|
-
* Renders null while loading to avoid layout shift.
|
|
265
|
+
* Presentational entitlement gate. The merchant backend owns entitlement
|
|
266
|
+
* retrieval; callers pass the resulting state into this component.
|
|
362
267
|
*/
|
|
363
268
|
|
|
364
269
|
interface FeatureGateProps {
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
/** Feature key to check */
|
|
368
|
-
feature: string;
|
|
369
|
-
/** Rendered when customer does not have access. Defaults to null. */
|
|
270
|
+
allowed: boolean;
|
|
271
|
+
loading?: boolean;
|
|
370
272
|
fallback?: ReactNode;
|
|
371
|
-
/** Content to show when customer has access */
|
|
372
273
|
children: ReactNode;
|
|
373
274
|
}
|
|
374
|
-
|
|
375
|
-
* FeatureGate renders children only when the customer is entitled to the feature.
|
|
376
|
-
* Returns null while the entitlement check is loading.
|
|
377
|
-
*
|
|
378
|
-
* Usage:
|
|
379
|
-
* ```tsx
|
|
380
|
-
* <FeatureGate customerId="cus_123" feature="analytics" fallback={<UpgradePrompt />}>
|
|
381
|
-
* <AnalyticsDashboard />
|
|
382
|
-
* </FeatureGate>
|
|
383
|
-
* ```
|
|
384
|
-
*/
|
|
385
|
-
declare function FeatureGate({ customerId, feature, fallback, children, }: FeatureGateProps): React.ReactElement | null;
|
|
275
|
+
declare function FeatureGate({ allowed, loading, fallback, children, }: FeatureGateProps): React__default.ReactElement | null;
|
|
386
276
|
|
|
387
277
|
/**
|
|
388
278
|
* UsageGate — Renders children if usage is below limit.
|
|
@@ -411,7 +301,7 @@ interface UsageGateProps {
|
|
|
411
301
|
* </UsageGate>
|
|
412
302
|
* ```
|
|
413
303
|
*/
|
|
414
|
-
declare function UsageGate({ usage, limit, fallback, children, }: UsageGateProps):
|
|
304
|
+
declare function UsageGate({ usage, limit, fallback, children, }: UsageGateProps): React__default.ReactElement;
|
|
415
305
|
|
|
416
306
|
/**
|
|
417
307
|
* PlanGate — Renders children if customer's plan is in the allowed list.
|
|
@@ -444,7 +334,7 @@ interface PlanGateProps {
|
|
|
444
334
|
* </PlanGate>
|
|
445
335
|
* ```
|
|
446
336
|
*/
|
|
447
|
-
declare function PlanGate({ currentPlan, allowedPlans, fallback, children, }: PlanGateProps):
|
|
337
|
+
declare function PlanGate({ currentPlan, allowedPlans, fallback, children, }: PlanGateProps): React__default.ReactElement;
|
|
448
338
|
|
|
449
339
|
/**
|
|
450
340
|
* UpgradePrompt — Reusable upgrade message component.
|
|
@@ -461,7 +351,7 @@ interface UpgradePromptProps {
|
|
|
461
351
|
* UpgradePrompt renders an upgrade call-to-action with a message and button.
|
|
462
352
|
* Used as default fallback in LockedOverlay and gate components.
|
|
463
353
|
*/
|
|
464
|
-
declare function UpgradePrompt({ text, planName, onUpgrade, }: UpgradePromptProps):
|
|
354
|
+
declare function UpgradePrompt({ text, planName, onUpgrade, }: UpgradePromptProps): React__default.ReactElement;
|
|
465
355
|
|
|
466
356
|
/**
|
|
467
357
|
* LockedOverlay — Wraps children with a blur filter + upgrade CTA overlay when locked.
|
|
@@ -496,7 +386,7 @@ interface LockedOverlayProps {
|
|
|
496
386
|
* </LockedOverlay>
|
|
497
387
|
* ```
|
|
498
388
|
*/
|
|
499
|
-
declare function LockedOverlay({ locked, upgradeText, upgradePlanName, onUpgrade, children, }: LockedOverlayProps):
|
|
389
|
+
declare function LockedOverlay({ locked, upgradeText, upgradePlanName, onUpgrade, children, }: LockedOverlayProps): React__default.ReactElement;
|
|
500
390
|
|
|
501
391
|
/**
|
|
502
392
|
* UsageMeter — embeddable usage progress bar with automatic color thresholds.
|
|
@@ -514,7 +404,7 @@ interface UsageMeterProps {
|
|
|
514
404
|
label?: string;
|
|
515
405
|
showText?: boolean;
|
|
516
406
|
}
|
|
517
|
-
declare function UsageMeter({ used, limit, label, showText, }: UsageMeterProps):
|
|
407
|
+
declare function UsageMeter({ used, limit, label, showText, }: UsageMeterProps): React.JSX.Element;
|
|
518
408
|
|
|
519
409
|
interface UsageDashboardFeature {
|
|
520
410
|
key: string;
|
|
@@ -526,7 +416,7 @@ interface UsageDashboardProps {
|
|
|
526
416
|
features?: UsageDashboardFeature[];
|
|
527
417
|
loading?: boolean;
|
|
528
418
|
}
|
|
529
|
-
declare function UsageDashboard({ features, loading, }: UsageDashboardProps):
|
|
419
|
+
declare function UsageDashboard({ features, loading, }: UsageDashboardProps): React.JSX.Element;
|
|
530
420
|
|
|
531
421
|
interface UsageAlertFeature {
|
|
532
422
|
key: string;
|
|
@@ -538,71 +428,17 @@ interface UsageAlertProps {
|
|
|
538
428
|
threshold?: number;
|
|
539
429
|
upgradeHref?: string;
|
|
540
430
|
}
|
|
541
|
-
declare function UsageAlert({ features, threshold, upgradeHref, }: UsageAlertProps):
|
|
431
|
+
declare function UsageAlert({ features, threshold, upgradeHref, }: UsageAlertProps): React.JSX.Element | null;
|
|
542
432
|
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
}
|
|
547
|
-
declare function CreditBalance({ customerId, currency, }: CreditBalanceProps): react_jsx_runtime.JSX.Element;
|
|
548
|
-
|
|
549
|
-
interface CreditTransaction {
|
|
550
|
-
id: string;
|
|
551
|
-
amount: number;
|
|
552
|
-
type: string;
|
|
553
|
-
description: string;
|
|
554
|
-
createdAt: string;
|
|
555
|
-
}
|
|
556
|
-
interface CreditHistoryProps {
|
|
557
|
-
customerId: string;
|
|
558
|
-
viewAllHref?: string;
|
|
559
|
-
}
|
|
560
|
-
declare function CreditHistory({ customerId, viewAllHref, }: CreditHistoryProps): react_jsx_runtime.JSX.Element;
|
|
433
|
+
/**
|
|
434
|
+
* PlanBadge — simple badge displaying plan name with tier-based coloring.
|
|
435
|
+
*/
|
|
561
436
|
|
|
562
437
|
interface PlanBadgeProps {
|
|
563
438
|
plan: string;
|
|
564
439
|
tier?: "free" | "starter" | "pro" | "enterprise";
|
|
565
440
|
}
|
|
566
|
-
declare function PlanBadge({ plan, tier }: PlanBadgeProps):
|
|
567
|
-
|
|
568
|
-
interface BillingPortalProps {
|
|
569
|
-
customerId: string;
|
|
570
|
-
usageFeatures?: UsageDashboardFeature[];
|
|
571
|
-
usageLoading?: boolean;
|
|
572
|
-
onChangePlan?: () => void;
|
|
573
|
-
subscriptionId?: string;
|
|
574
|
-
onCancelled?: () => void;
|
|
575
|
-
}
|
|
576
|
-
declare function BillingPortal({ customerId, usageFeatures, usageLoading, onChangePlan, }: BillingPortalProps): react_jsx_runtime.JSX.Element;
|
|
577
|
-
|
|
578
|
-
interface CurrentPlanData {
|
|
579
|
-
id: string;
|
|
580
|
-
planName: string;
|
|
581
|
-
interval: string;
|
|
582
|
-
status: string;
|
|
583
|
-
nextBillingDate?: string;
|
|
584
|
-
tier?: "free" | "starter" | "pro" | "enterprise";
|
|
585
|
-
}
|
|
586
|
-
interface CurrentPlanProps {
|
|
587
|
-
customerId: string;
|
|
588
|
-
onChangePlan?: () => void;
|
|
589
|
-
changePlanHref?: string;
|
|
590
|
-
}
|
|
591
|
-
declare function CurrentPlan({ customerId, onChangePlan, changePlanHref, }: CurrentPlanProps): react_jsx_runtime.JSX.Element;
|
|
592
|
-
|
|
593
|
-
interface Invoice {
|
|
594
|
-
id: string;
|
|
595
|
-
number: string;
|
|
596
|
-
date: string;
|
|
597
|
-
amount: number;
|
|
598
|
-
currency: string;
|
|
599
|
-
status: "draft" | "open" | "paid" | "void" | "uncollectible";
|
|
600
|
-
pdf_url?: string;
|
|
601
|
-
}
|
|
602
|
-
interface InvoiceListProps {
|
|
603
|
-
customerId: string;
|
|
604
|
-
}
|
|
605
|
-
declare function InvoiceList({ customerId }: InvoiceListProps): react_jsx_runtime.JSX.Element;
|
|
441
|
+
declare function PlanBadge({ plan, tier }: PlanBadgeProps): React__default.JSX.Element;
|
|
606
442
|
|
|
607
443
|
/**
|
|
608
444
|
* PaymentMethodDisplay — shows saved payment method details.
|
|
@@ -619,13 +455,6 @@ interface PaymentMethodDisplayProps {
|
|
|
619
455
|
onUpdatePaymentMethod?: () => void;
|
|
620
456
|
updateHref?: string;
|
|
621
457
|
}
|
|
622
|
-
declare function PaymentMethodDisplay({ paymentMethod, onUpdatePaymentMethod, updateHref, }: PaymentMethodDisplayProps):
|
|
623
|
-
|
|
624
|
-
declare const CANCEL_REASONS: readonly ["Too expensive", "Missing features", "Switching to competitor", "Not using it enough", "Other"];
|
|
625
|
-
interface CancelSubscriptionButtonProps {
|
|
626
|
-
subscriptionId: string;
|
|
627
|
-
onCancelled?: () => void;
|
|
628
|
-
}
|
|
629
|
-
declare function CancelSubscriptionButton({ subscriptionId, onCancelled, }: CancelSubscriptionButtonProps): react_jsx_runtime.JSX.Element;
|
|
458
|
+
declare function PaymentMethodDisplay({ paymentMethod, onUpdatePaymentMethod, updateHref, }: PaymentMethodDisplayProps): React.JSX.Element;
|
|
630
459
|
|
|
631
|
-
export { BillingContext, type BillingContextValue,
|
|
460
|
+
export { BillingContext, type BillingContextValue, BillingProvider, type BillingProviderProps, type Plan$1 as CatalogPlan, Checkout, CheckoutButton, type CheckoutButtonProps, type CheckoutProps, type CheckoutResult, type ComparisonFeature, type CompletedCheckoutResult, type CreateCheckout, type CreateCheckoutInput, FeatureGate, type FeatureGateProps, LockedOverlay, type LockedOverlayProps, type NozleClient, type PaymentMethod, PaymentMethodDisplay, type PaymentMethodDisplayProps, type Plan, PlanBadge, type PlanBadgeProps, PlanCard, type PlanCardProps, PlanComparison, type PlanComparisonProps, PlanGate, type PlanGateProps, type PricingPlan, PricingTable, type PricingTableProps, type ProrationPreview, type ScheduledCheckoutResult, UpgradeButton, type UpgradeButtonProps, UpgradeModal, type UpgradeModalProps, UpgradePrompt, type UpgradePromptProps, UsageAlert, type UsageAlertFeature, type UsageAlertProps, UsageDashboard, type UsageDashboardFeature, type UsageDashboardProps, UsageGate, type UsageGateProps, UsageMeter, type UsageMeterProps, type UseCheckoutResult, type UseCheckoutResult$1 as UseCheckoutSessionResult, getUsageMeterColor, useBillingContext, useCheckout, useCheckout$1 as useCheckoutSession, useNozleClient, useOptionalBillingContext, usePlans };
|