@nozle-js/react 0.10.1 → 0.11.0

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/dist/index.d.cts CHANGED
@@ -1,5 +1,9 @@
1
1
  import * as React from 'react';
2
2
  import React__default, { ReactNode, CSSProperties } from 'react';
3
+ import { A as Appearance, E as ElementKey } from './tokens-Bm4VWWb0.cjs';
4
+ export { a as Elements, T as Theme, V as Variables } from './tokens-Bm4VWWb0.cjs';
5
+ import { QueryClient, UseQueryResult } from '@tanstack/react-query';
6
+ import * as _tanstack_query_core from '@tanstack/query-core';
3
7
 
4
8
  /** A short-lived customer-portal credential issued by the merchant's backend. */
5
9
  interface BillingPortalSession {
@@ -55,6 +59,7 @@ interface CancellationControlProps {
55
59
  locale?: string;
56
60
  timezone?: string;
57
61
  nonce?: string;
62
+ appearance?: Appearance;
58
63
  }
59
64
  /** Customer cancellation UI. All mutations go through the merchant's authenticated callbacks. */
60
65
  declare function CancellationControl(props: CancellationControlProps): React.JSX.Element;
@@ -71,6 +76,7 @@ interface CheckoutSubscriptionResult {
71
76
  interface CompletedCheckoutResult extends CheckoutSubscriptionResult {
72
77
  type: "completed";
73
78
  status: string;
79
+ /** `credits` or `none`. */
74
80
  payment_source?: string;
75
81
  subscription_id?: string;
76
82
  plan_code?: string;
@@ -84,7 +90,9 @@ interface ScheduledCheckoutResult extends CheckoutSubscriptionResult {
84
90
  subscription_id?: string;
85
91
  plan_code?: string;
86
92
  effective_at?: string;
87
- pending_subscription_id?: string;
93
+ /** `upgrade` or `downgrade`. */
94
+ transition_direction?: string;
95
+ transition_policy?: string;
88
96
  }
89
97
  interface RazorpayCheckoutResult {
90
98
  type: "razorpay";
@@ -94,20 +102,40 @@ interface RazorpayCheckoutResult {
94
102
  amount_cents: number;
95
103
  currency: string;
96
104
  expires_at?: string;
105
+ /** Set for an invoice checkout. A paid upgrade returns `plan_upgrade_intent_id` instead. */
97
106
  invoice_id?: string;
107
+ plan_upgrade_intent_id?: string;
108
+ external_entity_id?: string;
109
+ external_subscription_id?: string;
98
110
  customer_id?: string;
99
111
  recurring?: boolean;
100
112
  mandate_max_amount_cents?: number;
101
113
  }
114
+ /**
115
+ * The checkout is not ready to collect payment yet: Razorpay while the order is
116
+ * being created, and Stripe when a quoted upgrade is replayed while its webhook is
117
+ * still pending. Recover with the checkout status call using `checkout_id`.
118
+ */
102
119
  interface ProcessingCheckoutResult {
103
120
  type: "processing";
104
121
  checkout_id: string;
105
122
  status: string;
123
+ amount_cents?: number;
124
+ currency?: string;
125
+ expires_at?: string;
126
+ invoice_id?: string;
127
+ plan_upgrade_intent_id?: string;
106
128
  }
129
+ /** A Razorpay payment link. The customer is redirected to `payment_url`. */
107
130
  interface HostedCheckoutResult {
108
131
  type: "hosted";
109
132
  payment_url: string;
110
133
  checkout_id?: string;
134
+ amount_cents?: number;
135
+ currency?: string;
136
+ expires_at?: string;
137
+ invoice_id?: string;
138
+ plan_upgrade_intent_id?: string;
111
139
  }
112
140
  interface RazorpayVerification {
113
141
  razorpay_order_id: string;
@@ -129,13 +157,19 @@ type VerifyCheckout = (checkoutId: string, verification: RazorpayVerification) =
129
157
  type GetCheckoutStatus = (checkoutId: string) => Promise<CheckoutStatus>;
130
158
  type CheckoutResult = {
131
159
  type: "stripe";
160
+ /** Not returned by plan and invoice checkout, which never issue a Stripe-hosted URL. */
132
161
  url?: string;
162
+ /** Embedded Checkout Session secret (`cs_...`). */
133
163
  clientSecret?: string;
134
164
  client_secret?: string;
165
+ /** Not returned by Nozle. Pass your Stripe publishable key to `Checkout`. */
135
166
  publishable_key?: string;
167
+ /** Not returned by Nozle. */
136
168
  stripe_account?: string;
137
169
  checkout_id?: string;
138
170
  invoice_id?: string;
171
+ /** Set instead of `invoice_id` for a paid upgrade. */
172
+ plan_upgrade_intent_id?: string;
139
173
  amount_cents?: number;
140
174
  currency?: string;
141
175
  external_entity_id?: string;
@@ -159,11 +193,24 @@ interface NozleClient {
159
193
  baseUrl: string;
160
194
  catalogFetch(path: string, init?: RequestInit): Promise<Response>;
161
195
  }
196
+ /** A failed request to your billing endpoint. `code` is the error code the endpoint returned. */
197
+ declare class BillingRequestError extends Error {
198
+ readonly status: number;
199
+ readonly code: string | undefined;
200
+ readonly requestId?: string | undefined;
201
+ constructor(status: number, code: string | undefined, requestId?: string | undefined);
202
+ }
203
+ type BillingFetch = <T>(route: string, params?: Record<string, string | number | undefined>) => Promise<T>;
162
204
  interface BillingContextValue {
163
205
  client: NozleClient;
164
206
  createCheckout?: CreateCheckout;
165
207
  verifyCheckout?: VerifyCheckout;
166
208
  getCheckoutStatus?: GetCheckoutStatus;
209
+ /** The query client the billing hooks use: the `queryClient` prop, or one the provider made. */
210
+ queryClient: QueryClient;
211
+ /** Reads a route of your billing endpoint; undefined when `billingEndpoint` is not set. */
212
+ billingFetch?: BillingFetch;
213
+ billingEndpoint?: string;
167
214
  }
168
215
  declare const BillingContext: React__default.Context<BillingContextValue | null>;
169
216
  interface BillingProviderProps {
@@ -172,9 +219,28 @@ interface BillingProviderProps {
172
219
  verifyCheckout?: VerifyCheckout;
173
220
  getCheckoutStatus?: GetCheckoutStatus;
174
221
  baseUrl?: string;
222
+ /**
223
+ * Path of your backend route that serves the customer hooks (`useSubscription`,
224
+ * `useEntitlement`, `useCreditBalance`, `useCreditHistory`, `useUsage`, `useUpgradePreview`),
225
+ * for example `/api/nozle`. Serve it with `createBillingHandler` from `@nozle-js/node`.
226
+ */
227
+ billingEndpoint?: string;
228
+ /** Extra headers for billing endpoint requests, such as a CSRF token. */
229
+ billingHeaders?: () => HeadersInit | Promise<HeadersInit>;
230
+ /**
231
+ * Your app's TanStack Query client, to share its cache and devtools. Without it the provider
232
+ * makes its own. The hooks pass their client explicitly, so they never use or replace a
233
+ * `QueryClientProvider` of your app.
234
+ */
235
+ queryClient?: QueryClient;
236
+ /**
237
+ * Look of every component inside: a predefined theme from `@nozle-js/react/themes`, your own
238
+ * variables, and per-element class names or styles. A component's own `appearance` goes on top.
239
+ */
240
+ appearance?: Appearance;
175
241
  children: ReactNode;
176
242
  }
177
- declare function BillingProvider({ publishableKey, createCheckout, verifyCheckout, getCheckoutStatus, baseUrl, children, }: BillingProviderProps): React__default.ReactElement;
243
+ declare function BillingProvider({ publishableKey, createCheckout, verifyCheckout, getCheckoutStatus, baseUrl, billingEndpoint, billingHeaders, queryClient, appearance, children, }: BillingProviderProps): React__default.ReactElement;
178
244
  declare function useOptionalBillingContext(): BillingContextValue | null;
179
245
  declare function useBillingContext(): BillingContextValue;
180
246
  declare function useNozleClient(): NozleClient;
@@ -259,6 +325,7 @@ interface PlanChangeControlProps {
259
325
  locale?: string;
260
326
  timezone?: string;
261
327
  nonce?: string;
328
+ appearance?: Appearance;
262
329
  }
263
330
  /** Payment-backed upgrades and scheduled downgrades for one external subscription. */
264
331
  declare function PlanChangeControl(props: PlanChangeControlProps): React.JSX.Element;
@@ -277,22 +344,541 @@ interface BillingPortalProps {
277
344
  /** CSP nonce for the component's scoped stylesheet. No Tailwind setup is required. */
278
345
  nonce?: string;
279
346
  onError?: (error: BillingPortalError) => void;
347
+ appearance?: Appearance;
280
348
  }
281
349
  /** Native React customer portal. Uses customer-scoped GraphQL, with no iframe or global auth storage. */
282
- declare function BillingPortal({ createSession, cancellationActions, planChangeActions, locale, className, style, nonce, onError, }: BillingPortalProps): React.JSX.Element;
350
+ declare function BillingPortal({ createSession, cancellationActions, planChangeActions, locale, className, style, nonce, onError, appearance, }: BillingPortalProps): React.JSX.Element;
351
+
352
+ interface ElementProps {
353
+ className?: string;
354
+ style?: CSSProperties;
355
+ }
356
+ interface UseAppearance {
357
+ /** Props for a component's root: its `nozle-<key>` class, the theme's CSS variables and its element overrides. */
358
+ root(key: ElementKey, style?: CSSProperties, className?: string): ElementProps;
359
+ /** Props for an inner element: its `nozle-<key>` class and its element overrides. */
360
+ el(key: ElementKey, style?: CSSProperties, className?: string): ElementProps;
361
+ /** The plan card layout the theme asks for. */
362
+ planCardLayout: "card" | "panel";
363
+ /** The theme's CSS variables, for an element rendered beside the root rather than inside it. */
364
+ vars: CSSProperties;
365
+ }
366
+ /**
367
+ * Resolves the provider's appearance with the component's own on top. Without any appearance no
368
+ * variables are written, so CSS variables an app sets on `:root` keep working.
369
+ */
370
+ declare function useAppearance(appearance?: Appearance): UseAppearance;
283
371
 
284
- interface Plan$1 {
372
+ interface CatalogPrivilege {
373
+ code: string;
374
+ name: string;
375
+ value_type: string;
376
+ value: string | number | boolean | null;
377
+ }
378
+ interface CatalogEntitlement {
379
+ feature_type: string;
380
+ code: string;
381
+ name: string;
382
+ description?: string | null;
383
+ usage_limit?: number | null;
384
+ privileges?: CatalogPrivilege[];
385
+ }
386
+ interface CatalogCreditGrantRule {
387
+ credit_system_code: string;
388
+ amount: string;
389
+ interval: string;
390
+ interval_count?: number;
391
+ }
392
+ interface CatalogChargeRange {
393
+ from_value: number;
394
+ to_value: number | null;
395
+ per_unit_amount?: string;
396
+ flat_amount?: string;
397
+ rate?: string;
398
+ }
399
+ /** A usage charge. Amounts inside `properties` are decimal strings in currency units, not cents. */
400
+ interface CatalogCharge {
401
+ code?: string | null;
402
+ feature_code?: string | null;
403
+ charge_model: string;
404
+ properties?: {
405
+ amount?: string;
406
+ package_size?: number;
407
+ free_units?: number;
408
+ rate?: string;
409
+ fixed_amount?: string;
410
+ graduated_ranges?: CatalogChargeRange[];
411
+ volume_ranges?: CatalogChargeRange[];
412
+ graduated_percentage_ranges?: CatalogChargeRange[];
413
+ };
414
+ }
415
+ interface PlanFeatureSource {
416
+ amount_currency: string;
417
+ entitlements?: CatalogEntitlement[];
418
+ credit_grant_rules?: CatalogCreditGrantRule[];
419
+ charges?: CatalogCharge[];
420
+ }
421
+ /**
422
+ * One line per thing a plan gives, built only from the catalog: entitlements, credit grants and usage
423
+ * prices, in the order the catalog returns them. Charges whose price cannot be written as a line
424
+ * (`custom`, `dynamic`) are skipped.
425
+ */
426
+ declare function planFeatures(plan: PlanFeatureSource): string[];
427
+ interface ComparisonPlan extends PlanFeatureSource {
428
+ code: string;
429
+ }
430
+ interface ComparisonRow {
431
+ key: string;
432
+ label: string;
433
+ values: Record<string, string | boolean>;
434
+ }
435
+ /**
436
+ * One row per entitlement and per granted credit system across the plans, in the order they first
437
+ * appear. A plan that does not have the entitlement gets `false`, so the table shows the real gap.
438
+ */
439
+ declare function comparisonRows(plans: ComparisonPlan[]): ComparisonRow[];
440
+ interface SortablePlan {
441
+ amount_cents: number;
442
+ amount_currency: string;
443
+ }
444
+ /**
445
+ * The default plan order: cheapest base price first, so a free plan comes first. Plans in different
446
+ * currencies stay grouped in the order each currency first appears, because their amounts cannot be
447
+ * compared. Plans with the same price keep the order the catalog returned them in.
448
+ */
449
+ declare function sortPlansByPrice<T extends SortablePlan>(plans: T[]): T[];
450
+
451
+ interface Plan {
285
452
  code: string;
286
453
  name: string;
287
454
  amount_cents: number;
288
455
  amount_currency: string;
289
456
  interval: string;
457
+ description?: string | null;
458
+ /** The public catalog also returns these. They are absent from an older or reduced response. */
459
+ entitlements?: CatalogEntitlement[];
460
+ credit_grant_rules?: CatalogCreditGrantRule[];
461
+ charges?: CatalogCharge[];
290
462
  }
463
+ /** The public plan catalog, read with the publishable key and cached by TanStack Query. */
291
464
  declare function usePlans(): {
292
- plans: Plan$1[];
465
+ plans: Plan[];
293
466
  isLoading: boolean;
294
467
  error: Error | null;
468
+ refetch: (options?: _tanstack_query_core.RefetchOptions) => Promise<_tanstack_query_core.QueryObserverResult<{
469
+ plans: Plan[];
470
+ nozleBranding: boolean;
471
+ }, Error>>;
472
+ };
473
+
474
+ /**
475
+ * Whether the merchant's Nozle plan keeps the "Powered by Nozle" badge. The server decides
476
+ * (`meta.nozle_branding` in the publishable-key plan catalog); without a BillingProvider, or
477
+ * before the answer arrives, there is no badge.
478
+ */
479
+ declare function useNozleBranding(): boolean;
480
+ /** "Powered by" and the Nozle logo, linking to nozle.dev. */
481
+ declare function PoweredByNozle(): React__default.ReactElement;
482
+
483
+ interface CreditBalanceSource {
484
+ id: string;
485
+ type: "subscription_grant" | "top_up" | "manual_grant" | "adjustment" | "allocated_top_up";
486
+ remaining: string;
487
+ expires_at: string | null;
488
+ }
489
+ /** The fields of the SDK's credit balance (`nozle.credits.balance`) that this component reads. */
490
+ interface CreditBalanceData {
491
+ credit_system_name: string;
492
+ unit_name: string;
493
+ available: string;
494
+ as_of: string;
495
+ sources?: CreditBalanceSource[];
496
+ }
497
+ interface CreditBalanceProps {
498
+ /** One balance from your backend. `null` or `undefined` shows the empty message. */
499
+ balance?: CreditBalanceData | null;
500
+ isLoading?: boolean;
501
+ error?: Error | string | null;
502
+ emptyMessage?: string;
503
+ appearance?: Appearance;
504
+ }
505
+ declare function CreditBalance({ balance, isLoading, error, emptyMessage, appearance, }: CreditBalanceProps): React__default.ReactElement;
506
+
507
+ /** The fields of the SDK's credit operation (`nozle.credits.operations`) that this component reads. */
508
+ interface CreditOperationData {
509
+ id: string;
510
+ type: "consume" | "grant" | "adjustment" | "expire" | "revoke" | "refund" | "transfer";
511
+ status: "succeeded" | "denied" | "reversed";
512
+ credit_amount: string;
513
+ feature_code: string | null;
514
+ occurred_at: string;
515
+ }
516
+ interface CreditHistoryProps {
517
+ operations?: CreditOperationData[];
518
+ isLoading?: boolean;
519
+ error?: Error | string | null;
520
+ emptyMessage?: string;
521
+ /** When true a "Load more" button is shown. Fetch the next page with the SDK's `next_cursor`. */
522
+ hasMore?: boolean;
523
+ onLoadMore?: () => void;
524
+ appearance?: Appearance;
525
+ }
526
+ declare function CreditHistory({ operations, isLoading, error, emptyMessage, hasMore, onLoadMore, appearance, }: CreditHistoryProps): React__default.ReactElement;
527
+
528
+ /** One charge's usage in a period, as returned by Core's `current_usage` and `past_usage`. */
529
+ interface ChargeUsageData {
530
+ /** Decimal string, for example `"1200.0"`. */
531
+ units: string;
532
+ amount_cents: number;
533
+ amount_currency: string;
534
+ events_count?: number;
535
+ charge: {
536
+ nozle_id: string;
537
+ charge_model: string;
538
+ invoice_display_name?: string | null;
539
+ };
540
+ feature: {
541
+ nozle_id: string;
542
+ code: string;
543
+ name: string;
544
+ aggregation_type?: string;
545
+ };
546
+ }
547
+ /**
548
+ * A customer's usage for one billing period: the `customer_usage` object of
549
+ * `GET /customers/{external_customer_id}/current_usage`, or one item of `usage_periods` in
550
+ * `GET /customers/{external_customer_id}/past_usage`. Read them on your backend with a secret key.
551
+ */
552
+ interface CustomerUsageData {
553
+ from_datetime: string;
554
+ to_datetime: string;
555
+ currency: string;
556
+ amount_cents: number;
557
+ charges_usage: ChargeUsageData[];
558
+ }
559
+
560
+ /** The customer's subscription with its plan and any scheduled change, or nulls without one. */
561
+ interface BillingSubscription {
562
+ subscription: {
563
+ external_id: string;
564
+ plan_code: string;
565
+ status: string;
566
+ ending_at: string | null;
567
+ plan: {
568
+ code: string;
569
+ name: string;
570
+ amount_cents: number | string;
571
+ currency: string;
572
+ interval: string;
573
+ };
574
+ } | null;
575
+ pending_change: {
576
+ plan_code: string;
577
+ name: string;
578
+ effective_at: string;
579
+ } | null;
580
+ /** The customer has an unpaid invoice past its due date. */
581
+ past_due?: boolean;
582
+ }
583
+ /** An entitlement decision for one feature (`can()` on your backend). */
584
+ interface EntitlementResult {
585
+ allowed: boolean;
586
+ used?: number;
587
+ limit: number | null;
588
+ remaining: number | null;
589
+ reason?: string;
590
+ }
591
+ /** The price of changing to another plan, before the customer confirms. */
592
+ interface UpgradePreview {
593
+ quote_id: string;
594
+ currency: string;
595
+ net_amount_cents: number | string;
596
+ amount_due_now_cents: number | string;
597
+ amount_due_at_effective_cents: number | string;
598
+ transition_direction: "upgrade" | "downgrade";
599
+ timing: "immediate" | "end_of_period";
600
+ effective_at: string;
601
+ renewal_at: string | null;
602
+ }
603
+ interface CreditHistoryPage {
604
+ operations: CreditOperationData[];
605
+ next_cursor: string | null;
606
+ }
607
+ /** The signed-in customer's subscription, plan and scheduled change. */
608
+ declare function useSubscription(): UseQueryResult<BillingSubscription, Error>;
609
+ /** Whether the customer may use a feature now, with used, limit and remaining. */
610
+ declare function useEntitlement(featureCode: string, options?: {
611
+ enabled?: boolean;
612
+ }): UseQueryResult<EntitlementResult, Error>;
613
+ /**
614
+ * One credit balance, ready for `<CreditBalance balance={data} />`: the given credit system,
615
+ * or the first one with credits, or the first one.
616
+ */
617
+ declare function useCreditBalance(creditSystemCode?: string): UseQueryResult<CreditBalanceData | null, Error>;
618
+ /**
619
+ * Credit operations, newest first, a page at a time. `operations` flattens the loaded pages for
620
+ * `<CreditHistory operations={operations} hasMore={hasNextPage} onLoadMore={fetchNextPage} />`.
621
+ */
622
+ declare function useCreditHistory(options?: {
623
+ creditSystemCode?: string;
624
+ limit?: number;
625
+ }): {
626
+ operations: CreditOperationData[];
627
+ data: _tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>;
628
+ error: Error;
629
+ isError: true;
630
+ isPending: false;
631
+ isLoading: false;
632
+ isLoadingError: false;
633
+ isRefetchError: true;
634
+ isSuccess: false;
635
+ isPlaceholderData: false;
636
+ status: "error";
637
+ fetchNextPage: (options?: _tanstack_query_core.FetchNextPageOptions) => Promise<_tanstack_query_core.InfiniteQueryObserverResult<_tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>, Error>>;
638
+ fetchPreviousPage: (options?: _tanstack_query_core.FetchPreviousPageOptions) => Promise<_tanstack_query_core.InfiniteQueryObserverResult<_tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>, Error>>;
639
+ hasNextPage: boolean;
640
+ hasPreviousPage: boolean;
641
+ isFetchNextPageError: boolean;
642
+ isFetchingNextPage: boolean;
643
+ isFetchPreviousPageError: boolean;
644
+ isFetchingPreviousPage: boolean;
645
+ dataUpdatedAt: number;
646
+ errorUpdatedAt: number;
647
+ failureCount: number;
648
+ failureReason: Error | null;
649
+ errorUpdateCount: number;
650
+ isFetched: boolean;
651
+ isFetchedAfterMount: boolean;
652
+ isFetching: boolean;
653
+ isInitialLoading: boolean;
654
+ isPaused: boolean;
655
+ isRefetching: boolean;
656
+ isStale: boolean;
657
+ isEnabled: boolean;
658
+ refetch: (options?: _tanstack_query_core.RefetchOptions) => Promise<_tanstack_query_core.QueryObserverResult<_tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>, Error>>;
659
+ fetchStatus: _tanstack_query_core.FetchStatus;
660
+ } | {
661
+ operations: CreditOperationData[];
662
+ data: _tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>;
663
+ error: null;
664
+ isError: false;
665
+ isPending: false;
666
+ isLoading: false;
667
+ isLoadingError: false;
668
+ isRefetchError: false;
669
+ isFetchNextPageError: false;
670
+ isFetchPreviousPageError: false;
671
+ isSuccess: true;
672
+ isPlaceholderData: false;
673
+ status: "success";
674
+ fetchNextPage: (options?: _tanstack_query_core.FetchNextPageOptions) => Promise<_tanstack_query_core.InfiniteQueryObserverResult<_tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>, Error>>;
675
+ fetchPreviousPage: (options?: _tanstack_query_core.FetchPreviousPageOptions) => Promise<_tanstack_query_core.InfiniteQueryObserverResult<_tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>, Error>>;
676
+ hasNextPage: boolean;
677
+ hasPreviousPage: boolean;
678
+ isFetchingNextPage: boolean;
679
+ isFetchingPreviousPage: boolean;
680
+ dataUpdatedAt: number;
681
+ errorUpdatedAt: number;
682
+ failureCount: number;
683
+ failureReason: Error | null;
684
+ errorUpdateCount: number;
685
+ isFetched: boolean;
686
+ isFetchedAfterMount: boolean;
687
+ isFetching: boolean;
688
+ isInitialLoading: boolean;
689
+ isPaused: boolean;
690
+ isRefetching: boolean;
691
+ isStale: boolean;
692
+ isEnabled: boolean;
693
+ refetch: (options?: _tanstack_query_core.RefetchOptions) => Promise<_tanstack_query_core.QueryObserverResult<_tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>, Error>>;
694
+ fetchStatus: _tanstack_query_core.FetchStatus;
695
+ } | {
696
+ operations: CreditOperationData[];
697
+ data: undefined;
698
+ error: Error;
699
+ isError: true;
700
+ isPending: false;
701
+ isLoading: false;
702
+ isLoadingError: true;
703
+ isRefetchError: false;
704
+ isFetchNextPageError: false;
705
+ isFetchPreviousPageError: false;
706
+ isSuccess: false;
707
+ isPlaceholderData: false;
708
+ status: "error";
709
+ fetchNextPage: (options?: _tanstack_query_core.FetchNextPageOptions) => Promise<_tanstack_query_core.InfiniteQueryObserverResult<_tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>, Error>>;
710
+ fetchPreviousPage: (options?: _tanstack_query_core.FetchPreviousPageOptions) => Promise<_tanstack_query_core.InfiniteQueryObserverResult<_tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>, Error>>;
711
+ hasNextPage: boolean;
712
+ hasPreviousPage: boolean;
713
+ isFetchingNextPage: boolean;
714
+ isFetchingPreviousPage: boolean;
715
+ dataUpdatedAt: number;
716
+ errorUpdatedAt: number;
717
+ failureCount: number;
718
+ failureReason: Error | null;
719
+ errorUpdateCount: number;
720
+ isFetched: boolean;
721
+ isFetchedAfterMount: boolean;
722
+ isFetching: boolean;
723
+ isInitialLoading: boolean;
724
+ isPaused: boolean;
725
+ isRefetching: boolean;
726
+ isStale: boolean;
727
+ isEnabled: boolean;
728
+ refetch: (options?: _tanstack_query_core.RefetchOptions) => Promise<_tanstack_query_core.QueryObserverResult<_tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>, Error>>;
729
+ fetchStatus: _tanstack_query_core.FetchStatus;
730
+ } | {
731
+ operations: CreditOperationData[];
732
+ data: undefined;
733
+ error: null;
734
+ isError: false;
735
+ isPending: true;
736
+ isLoading: true;
737
+ isLoadingError: false;
738
+ isRefetchError: false;
739
+ isFetchNextPageError: false;
740
+ isFetchPreviousPageError: false;
741
+ isSuccess: false;
742
+ isPlaceholderData: false;
743
+ status: "pending";
744
+ fetchNextPage: (options?: _tanstack_query_core.FetchNextPageOptions) => Promise<_tanstack_query_core.InfiniteQueryObserverResult<_tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>, Error>>;
745
+ fetchPreviousPage: (options?: _tanstack_query_core.FetchPreviousPageOptions) => Promise<_tanstack_query_core.InfiniteQueryObserverResult<_tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>, Error>>;
746
+ hasNextPage: boolean;
747
+ hasPreviousPage: boolean;
748
+ isFetchingNextPage: boolean;
749
+ isFetchingPreviousPage: boolean;
750
+ dataUpdatedAt: number;
751
+ errorUpdatedAt: number;
752
+ failureCount: number;
753
+ failureReason: Error | null;
754
+ errorUpdateCount: number;
755
+ isFetched: boolean;
756
+ isFetchedAfterMount: boolean;
757
+ isFetching: boolean;
758
+ isInitialLoading: boolean;
759
+ isPaused: boolean;
760
+ isRefetching: boolean;
761
+ isStale: boolean;
762
+ isEnabled: boolean;
763
+ refetch: (options?: _tanstack_query_core.RefetchOptions) => Promise<_tanstack_query_core.QueryObserverResult<_tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>, Error>>;
764
+ fetchStatus: _tanstack_query_core.FetchStatus;
765
+ } | {
766
+ operations: CreditOperationData[];
767
+ data: undefined;
768
+ error: null;
769
+ isError: false;
770
+ isPending: true;
771
+ isLoadingError: false;
772
+ isRefetchError: false;
773
+ isFetchNextPageError: false;
774
+ isFetchPreviousPageError: false;
775
+ isSuccess: false;
776
+ isPlaceholderData: false;
777
+ status: "pending";
778
+ fetchNextPage: (options?: _tanstack_query_core.FetchNextPageOptions) => Promise<_tanstack_query_core.InfiniteQueryObserverResult<_tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>, Error>>;
779
+ fetchPreviousPage: (options?: _tanstack_query_core.FetchPreviousPageOptions) => Promise<_tanstack_query_core.InfiniteQueryObserverResult<_tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>, Error>>;
780
+ hasNextPage: boolean;
781
+ hasPreviousPage: boolean;
782
+ isFetchingNextPage: boolean;
783
+ isFetchingPreviousPage: boolean;
784
+ dataUpdatedAt: number;
785
+ errorUpdatedAt: number;
786
+ failureCount: number;
787
+ failureReason: Error | null;
788
+ errorUpdateCount: number;
789
+ isFetched: boolean;
790
+ isFetchedAfterMount: boolean;
791
+ isFetching: boolean;
792
+ isLoading: boolean;
793
+ isInitialLoading: boolean;
794
+ isPaused: boolean;
795
+ isRefetching: boolean;
796
+ isStale: boolean;
797
+ isEnabled: boolean;
798
+ refetch: (options?: _tanstack_query_core.RefetchOptions) => Promise<_tanstack_query_core.QueryObserverResult<_tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>, Error>>;
799
+ fetchStatus: _tanstack_query_core.FetchStatus;
800
+ } | {
801
+ operations: CreditOperationData[];
802
+ data: _tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>;
803
+ isError: false;
804
+ error: null;
805
+ isPending: false;
806
+ isLoading: false;
807
+ isLoadingError: false;
808
+ isRefetchError: false;
809
+ isSuccess: true;
810
+ isPlaceholderData: true;
811
+ isFetchNextPageError: false;
812
+ isFetchPreviousPageError: false;
813
+ status: "success";
814
+ fetchNextPage: (options?: _tanstack_query_core.FetchNextPageOptions) => Promise<_tanstack_query_core.InfiniteQueryObserverResult<_tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>, Error>>;
815
+ fetchPreviousPage: (options?: _tanstack_query_core.FetchPreviousPageOptions) => Promise<_tanstack_query_core.InfiniteQueryObserverResult<_tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>, Error>>;
816
+ hasNextPage: boolean;
817
+ hasPreviousPage: boolean;
818
+ isFetchingNextPage: boolean;
819
+ isFetchingPreviousPage: boolean;
820
+ dataUpdatedAt: number;
821
+ errorUpdatedAt: number;
822
+ failureCount: number;
823
+ failureReason: Error | null;
824
+ errorUpdateCount: number;
825
+ isFetched: boolean;
826
+ isFetchedAfterMount: boolean;
827
+ isFetching: boolean;
828
+ isInitialLoading: boolean;
829
+ isPaused: boolean;
830
+ isRefetching: boolean;
831
+ isStale: boolean;
832
+ isEnabled: boolean;
833
+ refetch: (options?: _tanstack_query_core.RefetchOptions) => Promise<_tanstack_query_core.QueryObserverResult<_tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>, Error>>;
834
+ fetchStatus: _tanstack_query_core.FetchStatus;
295
835
  };
836
+ /**
837
+ * The current billing period's usage (`period: "current"`, the default) for `<UsageBreakdown>`,
838
+ * or past periods (`period: "past"`) for `<UsageTrend>`.
839
+ */
840
+ declare function useUsage(options?: {
841
+ period?: "current";
842
+ }): UseQueryResult<CustomerUsageData | null>;
843
+ declare function useUsage(options: {
844
+ period: "past";
845
+ periods?: number;
846
+ }): UseQueryResult<CustomerUsageData[]>;
847
+ /** One of the customer's finalized invoices. */
848
+ interface InvoiceData {
849
+ nozle_id: string;
850
+ number: string;
851
+ issuing_date: string;
852
+ payment_due_date?: string | null;
853
+ payment_status: string;
854
+ payment_overdue?: boolean;
855
+ currency: string;
856
+ total_amount_cents: number;
857
+ file_url?: string | null;
858
+ }
859
+ interface InvoicePageData {
860
+ invoices: InvoiceData[];
861
+ meta: {
862
+ current_page: number;
863
+ next_page: number | null;
864
+ prev_page: number | null;
865
+ total_pages: number;
866
+ total_count: number;
867
+ };
868
+ }
869
+ /** The customer's finalized invoices, newest first, 20 per page. */
870
+ declare function useInvoices(options?: {
871
+ page?: number;
872
+ }): UseQueryResult<InvoicePageData, Error>;
873
+ /**
874
+ * Returns a function that resolves an invoice's PDF URL, or `null` while Nozle is still generating
875
+ * the PDF (ask again in a few seconds). Your backend only answers for the customer's own invoices.
876
+ */
877
+ declare function useInvoiceDownload(): (invoiceId: string) => Promise<string | null>;
878
+ /** What changing to `planCode` would cost now and later. Does nothing until a plan is given. */
879
+ declare function useUpgradePreview(planCode: string | undefined): UseQueryResult<UpgradePreview, Error>;
880
+ /** Returns a function that reloads every billing hook, for example after checkout or a plan change. */
881
+ declare function useBillingRefresh(): () => Promise<void>;
296
882
 
297
883
  interface UseCheckoutResult$1 {
298
884
  fetchClientSecret: (planCode: string, returnUrl?: string) => Promise<string | null>;
@@ -308,81 +894,95 @@ interface PricingPlan {
308
894
  amount_cents: number;
309
895
  amount_currency: string;
310
896
  interval: string;
311
- description?: string;
897
+ description?: string | null;
898
+ /** Present in the public catalog. The table turns these into each card's feature list. */
899
+ entitlements?: CatalogEntitlement[];
900
+ credit_grant_rules?: CatalogCreditGrantRule[];
901
+ charges?: CatalogCharge[];
312
902
  }
313
903
  interface PricingTableProps {
314
904
  currentPlanCode?: string;
315
905
  plans?: PricingPlan[];
316
- features?: string[][];
906
+ /**
907
+ * Optional. By default each card lists what its plan gives, read from the catalog. Pass an array
908
+ * (aligned to the rendered plan order) or an object keyed by plan code to replace the lines of
909
+ * a plan.
910
+ */
911
+ features?: string[][] | Record<string, string[]>;
912
+ /**
913
+ * Optional. Orders the plans. By default they are sorted by base price, cheapest first, with
914
+ * `contactSalesPlans` last.
915
+ */
916
+ sort?: (a: PricingPlan, b: PricingPlan) => number;
317
917
  onSelect?: (plan: PricingPlan) => void;
318
918
  returnUrl?: string;
319
919
  onStripeClientSecret?: (clientSecret: string) => void;
320
920
  onCheckoutResult?: (result: CheckoutResult) => void;
321
921
  onCheckoutError?: (error: Error) => void;
322
922
  showToggle?: boolean;
923
+ /** Code of the plan to highlight. */
323
924
  highlightPlan?: string;
925
+ /**
926
+ * How the highlighted card stands out: `outline` (default) draws a border in `colorHighlight`;
927
+ * `filled` paints the card in `colorHighlight` and its text and button in `colorHighlightForeground`.
928
+ */
929
+ highlightStyle?: 'outline' | 'filled';
930
+ /** Badge on the highlighted card. Default "Most Popular"; pass `null` for no badge. */
931
+ highlightLabel?: string | null;
324
932
  className?: string;
933
+ /**
934
+ * Codes of plans sold on request. Their card shows "Custom" instead of a price and a "Contact Sales"
935
+ * button, which opens `enterpriseEmail` when set.
936
+ */
937
+ contactSalesPlans?: string[];
325
938
  enterpriseEmail?: string;
939
+ appearance?: Appearance;
326
940
  }
327
- declare function PricingTable({ currentPlanCode, plans: propPlans, features, onSelect, returnUrl, onStripeClientSecret, onCheckoutResult, onCheckoutError, showToggle, highlightPlan, className, enterpriseEmail, }: PricingTableProps): React__default.ReactElement;
941
+ declare function PricingTable({ currentPlanCode, plans: propPlans, features, sort, onSelect, returnUrl, onStripeClientSecret, onCheckoutResult, onCheckoutError, showToggle, highlightPlan, highlightStyle, highlightLabel, className, contactSalesPlans, enterpriseEmail, appearance, }: PricingTableProps): React__default.ReactElement;
328
942
 
329
943
  /**
330
944
  * PlanCard — Individual pricing plan card component.
331
945
  * UI-01: Shows plan name, price, interval, features list, and CTA button.
332
- * Uses CSS variable theming with --nozle-* namespace.
946
+ * Themed through `appearance` (see the appearance tokens).
333
947
  */
334
948
 
335
- interface Plan {
336
- id: string;
337
- name: string;
338
- monthlyPrice: number;
339
- annualPrice: number;
340
- features: string[];
341
- description?: string;
342
- }
343
- interface PlanCardProps extends Plan {
344
- isAnnual: boolean;
949
+ interface PlanCardProps {
950
+ /** A plan from the public catalog. Its price and feature lines are read from it. */
951
+ plan: PricingPlan;
952
+ /** Optional. Replaces the lines read from the plan. */
953
+ features?: string[];
345
954
  isCurrent: boolean;
346
955
  returnUrl?: string;
347
956
  onSelect?: (input: CreateCheckoutInput) => void;
348
- children?: ReactNode;
957
+ appearance?: Appearance;
349
958
  }
350
959
  /**
351
- * PlanCard renders a single pricing plan.
960
+ * PlanCard renders a single pricing plan from the catalog.
352
961
  * Highlighted with aria-current="true" when isCurrent=true.
353
962
  */
354
- declare function PlanCard({ id, name, monthlyPrice, annualPrice, features, description, isAnnual, isCurrent, returnUrl, onSelect, }: PlanCardProps): React__default.ReactElement;
963
+ declare function PlanCard({ plan, features: featureOverride, isCurrent, returnUrl, onSelect, appearance, }: PlanCardProps): React__default.ReactElement;
355
964
 
356
965
  /**
357
966
  * PlanComparison — Side-by-side feature comparison table.
358
967
  * UI-01: Renders shadcn-style table with plan names as headers and features as rows.
359
- * Check/cross icons for boolean values. Uses CSS variable theming.
968
+ * Check/cross icons for boolean values. Themed through `appearance`.
360
969
  */
361
970
 
362
- interface ComparisonFeature {
363
- key: string;
364
- label: string;
365
- values: Record<string, string | boolean>;
366
- }
971
+ type ComparisonFeature = ComparisonRow;
367
972
  interface PlanComparisonProps {
368
- plans: Plan[];
369
- features: ComparisonFeature[];
973
+ /** Plans from the public catalog. The rows are built from their entitlements and credit grants. */
974
+ plans: PricingPlan[];
975
+ /** Optional. Replaces the rows built from the plans. `values` is keyed by plan code. */
976
+ features?: ComparisonFeature[];
977
+ /** Optional. Orders the plans. By default they are sorted by base price, cheapest first. */
978
+ sort?: (a: PricingPlan, b: PricingPlan) => number;
979
+ appearance?: Appearance;
370
980
  }
371
981
  /**
372
- * PlanComparison renders a side-by-side feature comparison table.
373
- *
374
- * Usage:
375
- * ```tsx
376
- * <PlanComparison
377
- * plans={plans}
378
- * features={[
379
- * { key: 'api_calls', label: 'API Calls', values: { starter: '10K', pro: '100K' } },
380
- * { key: 'analytics', label: 'Analytics', values: { starter: false, pro: true } },
381
- * ]}
382
- * />
383
- * ```
982
+ * PlanComparison renders a side-by-side comparison of catalog plans. A plan that does not have an
983
+ * entitlement shows a cross, so the table shows the real difference between plans.
384
984
  */
385
- declare function PlanComparison({ plans, features, }: PlanComparisonProps): React__default.ReactElement;
985
+ declare function PlanComparison({ plans: catalogPlans, features: featureOverride, sort, appearance, }: PlanComparisonProps): React__default.ReactElement;
386
986
 
387
987
  interface RazorpayActions {
388
988
  verifyCheckout?: VerifyCheckout;
@@ -420,6 +1020,7 @@ interface CheckoutButtonProps extends Omit<RazorpayActions, "verifyCheckout" | "
420
1020
  returnUrl?: string;
421
1021
  label?: string;
422
1022
  className?: string;
1023
+ appearance?: Appearance;
423
1024
  style?: React__default.CSSProperties;
424
1025
  onError?: (error: Error) => void;
425
1026
  /** @deprecated The server supplies the public Razorpay key in the checkout response. */
@@ -430,7 +1031,7 @@ interface CheckoutButtonProps extends Omit<RazorpayActions, "verifyCheckout" | "
430
1031
  onComplete?: (result: CompletedCheckoutResult) => void;
431
1032
  onScheduled?: (result: ScheduledCheckoutResult) => void;
432
1033
  }
433
- declare function CheckoutButton({ planCode, returnUrl, label, className, style, onError, razorpayKeyId, registerMandate, onProcessing, onDismiss, onStripeClientSecret, onSuccess, onComplete, onScheduled, }: CheckoutButtonProps): React__default.ReactElement;
1034
+ declare function CheckoutButton({ planCode, returnUrl, label, className, style, onError, razorpayKeyId, registerMandate, onProcessing, onDismiss, onStripeClientSecret, onSuccess, onComplete, onScheduled, appearance, }: CheckoutButtonProps): React__default.ReactElement;
434
1035
 
435
1036
  interface StripeCheckoutProps {
436
1037
  /** Stripe PaymentIntent client secret */
@@ -445,7 +1046,11 @@ interface StripeCheckoutProps {
445
1046
  submitLabel?: string;
446
1047
  /** Called with the paymentIntentId when payment succeeds without redirect */
447
1048
  onSuccess?: (paymentIntentId: string) => void;
448
- /** Called when an embedded Checkout Session completes without a redirect. */
1049
+ /**
1050
+ * Called when an embedded Checkout Session completes without a redirect. It does
1051
+ * not fire when the session redirects to `returnUrl`: show success from the return
1052
+ * page, or reload billing status there.
1053
+ */
449
1054
  onComplete?: () => void;
450
1055
  /** Called with the error when payment fails */
451
1056
  onError?: (error: Error) => void;
@@ -457,6 +1062,8 @@ interface StripeCheckoutProps {
457
1062
  style?: React__default.CSSProperties;
458
1063
  /** Optional custom controls for the PaymentIntent/PaymentElement branch. */
459
1064
  children?: React__default.ReactNode;
1065
+ /** Also passed to Stripe's Payment Element. Stripe's embedded Checkout uses your Stripe branding instead. */
1066
+ appearance?: Appearance;
460
1067
  }
461
1068
  interface UseCheckoutResult {
462
1069
  /** Trigger payment confirmation programmatically */
@@ -479,6 +1086,7 @@ interface ProviderCheckoutProps {
479
1086
  verifyCheckout?: VerifyCheckout;
480
1087
  getCheckoutStatus?: GetCheckoutStatus;
481
1088
  onDismiss?: () => void;
1089
+ appearance?: Appearance;
482
1090
  }
483
1091
  type CheckoutProps = StripeCheckoutProps | ProviderCheckoutProps;
484
1092
  declare function Checkout(props: CheckoutProps): React__default.JSX.Element;
@@ -514,7 +1122,10 @@ interface UpgradeModalProps {
514
1122
  onScheduled?: () => void;
515
1123
  onConfirm?: () => void;
516
1124
  onCancel?: () => void;
1125
+ /** Shows a Back button on the left of the actions, for a step that has a previous step. */
1126
+ onBack?: () => void;
517
1127
  onError?: (error: Error) => void;
1128
+ appearance?: Appearance;
518
1129
  }
519
1130
  declare function UpgradeModal(props: UpgradeModalProps): React__default.ReactElement | null;
520
1131
 
@@ -527,6 +1138,7 @@ interface UpgradeButtonProps {
527
1138
  preview?: ProrationPreview;
528
1139
  label?: string;
529
1140
  className?: string;
1141
+ appearance?: Appearance;
530
1142
  style?: React__default.CSSProperties;
531
1143
  onStripeClientSecret?: (clientSecret: string) => void;
532
1144
  onCheckoutStarted?: () => void;
@@ -534,7 +1146,7 @@ interface UpgradeButtonProps {
534
1146
  onUpgraded?: () => void;
535
1147
  onError?: (error: Error) => void;
536
1148
  }
537
- declare function UpgradeButton({ planCode, returnUrl, subscriptionId, quoteId, idempotencyKey, preview, label, className, style, onStripeClientSecret, onCheckoutStarted, onDowngradeScheduled, onUpgraded, onError, }: UpgradeButtonProps): React__default.ReactElement;
1149
+ declare function UpgradeButton({ planCode, returnUrl, subscriptionId, quoteId, idempotencyKey, preview, label, className, style, onStripeClientSecret, onCheckoutStarted, onDowngradeScheduled, onUpgraded, onError, appearance, }: UpgradeButtonProps): React__default.ReactElement;
538
1150
 
539
1151
  /**
540
1152
  * Presentational entitlement gate. The merchant backend owns entitlement
@@ -614,24 +1226,25 @@ declare function PlanGate({ currentPlan, allowedPlans, fallback, children, }: Pl
614
1226
  /**
615
1227
  * UpgradePrompt — Reusable upgrade message component.
616
1228
  * UI-03: Shows plan name + upgrade button; used as default fallback for LockedOverlay.
617
- * Uses CSS variable theming with --nozle-* namespace.
1229
+ * Themed through `appearance` (see the appearance tokens).
618
1230
  */
619
1231
 
620
1232
  interface UpgradePromptProps {
621
1233
  text?: string;
622
1234
  planName?: string;
623
1235
  onUpgrade?: () => void;
1236
+ appearance?: Appearance;
624
1237
  }
625
1238
  /**
626
1239
  * UpgradePrompt renders an upgrade call-to-action with a message and button.
627
1240
  * Used as default fallback in LockedOverlay and gate components.
628
1241
  */
629
- declare function UpgradePrompt({ text, planName, onUpgrade, }: UpgradePromptProps): React__default.ReactElement;
1242
+ declare function UpgradePrompt({ text, planName, onUpgrade, appearance, }: UpgradePromptProps): React__default.ReactElement;
630
1243
 
631
1244
  /**
632
1245
  * LockedOverlay — Wraps children with a blur filter + upgrade CTA overlay when locked.
633
1246
  * UI-03: Applies CSS blur(4px) to children with an upgrade prompt overlay.
634
- * Uses CSS variable theming with --nozle-* namespace.
1247
+ * Themed through `appearance` (see the appearance tokens).
635
1248
  */
636
1249
 
637
1250
  interface LockedOverlayProps {
@@ -645,6 +1258,7 @@ interface LockedOverlayProps {
645
1258
  onUpgrade?: () => void;
646
1259
  /** Content to blur when locked */
647
1260
  children: ReactNode;
1261
+ appearance?: Appearance;
648
1262
  }
649
1263
  /**
650
1264
  * LockedOverlay wraps children in a relative container.
@@ -661,37 +1275,46 @@ interface LockedOverlayProps {
661
1275
  * </LockedOverlay>
662
1276
  * ```
663
1277
  */
664
- declare function LockedOverlay({ locked, upgradeText, upgradePlanName, onUpgrade, children, }: LockedOverlayProps): React__default.ReactElement;
1278
+ declare function LockedOverlay({ locked, upgradeText, upgradePlanName, onUpgrade, children, appearance, }: LockedOverlayProps): React__default.ReactElement;
665
1279
 
666
- /**
667
- * UsageMeter — embeddable usage progress bar with automatic color thresholds.
668
- * Uses --nozle-* CSS variables for theming (customer-facing portal layer).
669
- *
670
- * Color thresholds:
671
- * < 80% → primary (normal)
672
- * 80-94% → warning (amber)
673
- * ≥ 95% → destructive (red)
674
- */
675
1280
  declare function getUsageMeterColor(percentage: number): string;
676
1281
  interface UsageMeterProps {
677
1282
  used: number;
678
- limit: number;
1283
+ /** `null` or `undefined` means the feature has no limit. */
1284
+ limit?: number | null;
679
1285
  label?: string;
680
1286
  showText?: boolean;
1287
+ appearance?: Appearance;
681
1288
  }
682
- declare function UsageMeter({ used, limit, label, showText, }: UsageMeterProps): React.JSX.Element;
1289
+ declare function UsageMeter({ used, limit, label, showText, appearance, }: UsageMeterProps): React.JSX.Element;
683
1290
 
684
1291
  interface UsageDashboardFeature {
685
1292
  key: string;
686
1293
  label: string;
687
1294
  used: number;
688
- limit: number;
1295
+ /** `null` or `undefined` means the feature has no limit. */
1296
+ limit?: number | null;
1297
+ }
1298
+ /** The `can()` result fields the dashboard needs. */
1299
+ interface UsageResult {
1300
+ used: number;
1301
+ limit?: number | null;
689
1302
  }
1303
+ /**
1304
+ * Joins a plan's metered entitlements (names come from the catalog) with the usage results you read
1305
+ * on your backend, keyed by feature code. Entitlements without a result are left out.
1306
+ */
1307
+ declare function usageItems(entitlements: CatalogEntitlement[], results: Record<string, UsageResult | undefined>): UsageDashboardFeature[];
690
1308
  interface UsageDashboardProps {
691
1309
  features?: UsageDashboardFeature[];
692
1310
  loading?: boolean;
1311
+ /** Shown in place of the meters when set. */
1312
+ error?: Error | string | null;
1313
+ /** Shown when there are no features. */
1314
+ emptyMessage?: string;
1315
+ appearance?: Appearance;
693
1316
  }
694
- declare function UsageDashboard({ features, loading, }: UsageDashboardProps): React.JSX.Element;
1317
+ declare function UsageDashboard({ features, loading, error, emptyMessage, appearance, }: UsageDashboardProps): React.JSX.Element;
695
1318
 
696
1319
  interface UsageAlertFeature {
697
1320
  key: string;
@@ -702,8 +1325,42 @@ interface UsageAlertProps {
702
1325
  features: UsageAlertFeature[];
703
1326
  threshold?: number;
704
1327
  upgradeHref?: string;
1328
+ appearance?: Appearance;
1329
+ }
1330
+ declare function UsageAlert({ features, threshold, upgradeHref, appearance, }: UsageAlertProps): React.JSX.Element | null;
1331
+
1332
+ interface CurrentPlanDetail {
1333
+ label: string;
1334
+ value: ReactNode;
1335
+ }
1336
+ interface CurrentPlanProps {
1337
+ /** The `useSubscription` result. Omit it to read it through `billingEndpoint`. */
1338
+ subscription?: BillingSubscription | null;
1339
+ /** Meters to show. Omit to build them from the plan's metered limits and this period's usage. */
1340
+ usage?: UsageDashboardFeature[];
1341
+ /** Extra label and value rows, for example included events or a renewal date. */
1342
+ details?: CurrentPlanDetail[];
1343
+ /** Buttons for the header, for example a link to your billing portal. */
1344
+ actions?: ReactNode;
1345
+ /** Text of the notice shown when the customer is past due. */
1346
+ pastDueMessage?: string;
1347
+ /** A meter at or above this percentage shows a notice. Default 80; `null` turns notices off. */
1348
+ warningPercent?: number | null;
1349
+ title?: string;
1350
+ isLoading?: boolean;
1351
+ error?: Error | string | null;
1352
+ emptyMessage?: string;
1353
+ locale?: string;
1354
+ appearance?: Appearance;
705
1355
  }
706
- declare function UsageAlert({ features, threshold, upgradeHref, }: UsageAlertProps): React.JSX.Element | null;
1356
+ /** Meters from the plan's metered limits joined with this period's units, by feature code. */
1357
+ declare function currentPlanMeters(entitlements: {
1358
+ feature_type: string;
1359
+ code: string;
1360
+ name: string;
1361
+ usage_limit?: number | null;
1362
+ }[] | undefined, usage: CustomerUsageData | null | undefined): UsageDashboardFeature[];
1363
+ declare function CurrentPlan(props: CurrentPlanProps): React__default.ReactElement;
707
1364
 
708
1365
  /**
709
1366
  * PlanBadge — simple badge displaying plan name with tier-based coloring.
@@ -712,13 +1369,10 @@ declare function UsageAlert({ features, threshold, upgradeHref, }: UsageAlertPro
712
1369
  interface PlanBadgeProps {
713
1370
  plan: string;
714
1371
  tier?: "free" | "starter" | "pro" | "enterprise";
1372
+ appearance?: Appearance;
715
1373
  }
716
- declare function PlanBadge({ plan, tier }: PlanBadgeProps): React__default.JSX.Element;
1374
+ declare function PlanBadge({ plan, tier, appearance }: PlanBadgeProps): React__default.JSX.Element;
717
1375
 
718
- /**
719
- * PaymentMethodDisplay — shows saved payment method details.
720
- * Displays last4, brand, expiry. "Update Payment Method" button opens checkout.
721
- */
722
1376
  interface PaymentMethod {
723
1377
  last4: string;
724
1378
  brand: string;
@@ -729,7 +1383,33 @@ interface PaymentMethodDisplayProps {
729
1383
  paymentMethod?: PaymentMethod;
730
1384
  onUpdatePaymentMethod?: () => void;
731
1385
  updateHref?: string;
1386
+ appearance?: Appearance;
1387
+ }
1388
+ declare function PaymentMethodDisplay({ paymentMethod, onUpdatePaymentMethod, updateHref, appearance, }: PaymentMethodDisplayProps): React.JSX.Element;
1389
+
1390
+ interface UsageBreakdownProps {
1391
+ /** The `customer_usage` object from Core's `current_usage`, read on your backend. */
1392
+ usage?: CustomerUsageData | null;
1393
+ isLoading?: boolean;
1394
+ error?: Error | string | null;
1395
+ emptyMessage?: string;
1396
+ appearance?: Appearance;
1397
+ }
1398
+ declare function UsageBreakdown({ usage, isLoading, error, emptyMessage, appearance, }: UsageBreakdownProps): React__default.ReactElement;
1399
+
1400
+ interface UsageTrendProps {
1401
+ /** The `usage_periods` of Core's `past_usage`, read on your backend, in any order. */
1402
+ periods?: CustomerUsageData[] | null;
1403
+ /**
1404
+ * Chart the units of this feature code in each period instead of the amount. Periods without the
1405
+ * feature show zero.
1406
+ */
1407
+ featureCode?: string;
1408
+ isLoading?: boolean;
1409
+ error?: Error | string | null;
1410
+ emptyMessage?: string;
1411
+ appearance?: Appearance;
732
1412
  }
733
- declare function PaymentMethodDisplay({ paymentMethod, onUpdatePaymentMethod, updateHref, }: PaymentMethodDisplayProps): React.JSX.Element;
1413
+ declare function UsageTrend({ periods, featureCode, isLoading, error, emptyMessage, appearance, }: UsageTrendProps): React__default.ReactElement;
734
1414
 
735
- export { BillingContext, type BillingContextValue, BillingPortal, BillingPortalError, type BillingPortalProps, type BillingPortalSession, BillingProvider, type BillingProviderProps, type CancellationActions, type CancellationApplyInput, CancellationControl, type CancellationControlProps, type CancellationInput, type CancellationOperation, type CancellationPreview, type CancellationSubscription, type Plan$1 as CatalogPlan, Checkout, CheckoutButton, type CheckoutButtonProps, type CheckoutProps, type CheckoutResult, type CheckoutStatus, type CheckoutSubscriptionResult, type ComparisonFeature, type CompletedCheckoutResult, type CreateBillingPortalSession, type CreateCheckout, type CreateCheckoutInput, FeatureGate, type FeatureGateProps, type GetCheckoutStatus, type HostedCheckoutResult, LockedOverlay, type LockedOverlayProps, type NozleClient, type PaymentMethod, PaymentMethodDisplay, type PaymentMethodDisplayProps, type Plan, PlanBadge, type PlanBadgeProps, PlanCard, type PlanCardProps, type PlanChangeActions, type PlanChangeApplyInput, PlanChangeControl, type PlanChangeControlProps, type PlanChangeInput, type PlanChangeOperation, type PlanChangePreview, type PlanChangePreviewInput, type PlanChangeState, type PlanChangeWithdrawInput, PlanComparison, type PlanComparisonProps, PlanGate, type PlanGateProps, type PortalPlan, type PricingPlan, PricingTable, type PricingTableProps, type ProcessingCheckoutResult, type ProrationPreview, type RazorpayCheckoutResult, type RazorpayVerification, 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, type VerifyCheckout, getUsageMeterColor, useBillingContext, useCheckout, useCheckout$1 as useCheckoutSession, useNozleClient, useOptionalBillingContext, usePlans };
1415
+ export { Appearance, BillingContext, type BillingContextValue, type BillingFetch, BillingPortal, BillingPortalError, type BillingPortalProps, type BillingPortalSession, BillingProvider, type BillingProviderProps, BillingRequestError, type BillingSubscription, type CancellationActions, type CancellationApplyInput, CancellationControl, type CancellationControlProps, type CancellationInput, type CancellationOperation, type CancellationPreview, type CancellationSubscription, type CatalogCharge, type CatalogCreditGrantRule, type CatalogEntitlement, type Plan as CatalogPlan, type CatalogPrivilege, type ChargeUsageData, Checkout, CheckoutButton, type CheckoutButtonProps, type CheckoutProps, type CheckoutResult, type CheckoutStatus, type CheckoutSubscriptionResult, type ComparisonFeature, type ComparisonRow, type CompletedCheckoutResult, type CreateBillingPortalSession, type CreateCheckout, type CreateCheckoutInput, CreditBalance, type CreditBalanceData, type CreditBalanceProps, type CreditBalanceSource, CreditHistory, type CreditHistoryProps, type CreditOperationData, CurrentPlan, type CurrentPlanDetail, type CurrentPlanProps, type CustomerUsageData, ElementKey, type ElementProps, type EntitlementResult, FeatureGate, type FeatureGateProps, type GetCheckoutStatus, type HostedCheckoutResult, type InvoiceData, type InvoicePageData, LockedOverlay, type LockedOverlayProps, type NozleClient, type PaymentMethod, PaymentMethodDisplay, type PaymentMethodDisplayProps, PlanBadge, type PlanBadgeProps, PlanCard, type PlanCardProps, type PlanChangeActions, type PlanChangeApplyInput, PlanChangeControl, type PlanChangeControlProps, type PlanChangeInput, type PlanChangeOperation, type PlanChangePreview, type PlanChangePreviewInput, type PlanChangeState, type PlanChangeWithdrawInput, PlanComparison, type PlanComparisonProps, PlanGate, type PlanGateProps, type PortalPlan, PoweredByNozle, type PricingPlan, PricingTable, type PricingTableProps, type ProcessingCheckoutResult, type ProrationPreview, type RazorpayCheckoutResult, type RazorpayVerification, type ScheduledCheckoutResult, UpgradeButton, type UpgradeButtonProps, UpgradeModal, type UpgradeModalProps, type UpgradePreview, UpgradePrompt, type UpgradePromptProps, UsageAlert, type UsageAlertFeature, type UsageAlertProps, UsageBreakdown, type UsageBreakdownProps, UsageDashboard, type UsageDashboardFeature, type UsageDashboardProps, UsageGate, type UsageGateProps, UsageMeter, type UsageMeterProps, type UsageResult, UsageTrend, type UsageTrendProps, type UseAppearance, type UseCheckoutResult, type UseCheckoutResult$1 as UseCheckoutSessionResult, type VerifyCheckout, comparisonRows, currentPlanMeters, getUsageMeterColor, planFeatures, sortPlansByPrice, usageItems, useAppearance, useBillingContext, useBillingRefresh, useCheckout, useCheckout$1 as useCheckoutSession, useCreditBalance, useCreditHistory, useEntitlement, useInvoiceDownload, useInvoices, useNozleBranding, useNozleClient, useOptionalBillingContext, usePlans, useSubscription, useUpgradePreview, useUsage };