@solvapay/react 1.0.7 → 1.0.8-preview.10
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/CONTRIBUTING.md +117 -0
- package/README.md +234 -1
- package/dist/CancelPlanButton-CieT9swn.d.cts +1102 -0
- package/dist/CancelPlanButton-f56UlQN-.d.ts +1102 -0
- package/dist/chunk-MOP3ZBGC.js +4749 -0
- package/dist/index.cjs +4393 -1036
- package/dist/index.d.cts +375 -652
- package/dist/index.d.ts +375 -652
- package/dist/index.js +570 -1665
- package/dist/primitives/index.cjs +4254 -0
- package/dist/primitives/index.d.cts +533 -0
- package/dist/primitives/index.d.ts +533 -0
- package/dist/primitives/index.js +187 -0
- package/dist/styles.css +869 -0
- package/package.json +20 -5
|
@@ -0,0 +1,533 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import React, { Ref } from 'react';
|
|
3
|
+
import { k as Plan, F as Product, y as UseTopupAmountSelectorReturn, D as PurchaseInfo, T as TopupFormProps } from '../CancelPlanButton-f56UlQN-.js';
|
|
4
|
+
export { a4 as ActivationFlow, a5 as ActivationFlowActivateButton, a6 as ActivationFlowActivated, a7 as ActivationFlowAmountPicker, a8 as ActivationFlowContinueButton, a9 as ActivationFlowError, aa as ActivationFlowLoading, ab as ActivationFlowRetrying, ac as ActivationFlowRoot, G as ActivationFlowStep, ad as ActivationFlowSummary, H as BalanceBadge, I as CancelPlanButton, O as MandateText, Q as MandateTextProps, ae as PaymentForm, e as PaymentFormCardElement, c as PaymentFormCustomerFields, j as PaymentFormError, i as PaymentFormLoading, f as PaymentFormMandateText, d as PaymentFormPaymentElement, af as PaymentFormRoot, h as PaymentFormSubmitButton, b as PaymentFormSummary, g as PaymentFormTermsCheckbox, Z as PlanBadge, _ as ProductBadge, $ as PurchaseGate, ag as PurchaseGateAllowed, ah as PurchaseGateBlocked, ai as PurchaseGateError, aj as PurchaseGateLoading, ak as PurchaseGateRoot, al as useActivationFlow, am as usePurchaseGate } from '../CancelPlanButton-f56UlQN-.js';
|
|
5
|
+
import { PaymentElement } from '@stripe/react-stripe-js';
|
|
6
|
+
import { Stripe, StripeElements } from '@stripe/stripe-js';
|
|
7
|
+
import '@solvapay/server';
|
|
8
|
+
import '../adapters/auth.js';
|
|
9
|
+
|
|
10
|
+
interface SlotProps extends React.HTMLAttributes<HTMLElement> {
|
|
11
|
+
children?: React.ReactNode;
|
|
12
|
+
}
|
|
13
|
+
declare const Slot: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLElement>>;
|
|
14
|
+
declare const Slottable: ({ children }: {
|
|
15
|
+
children: React.ReactNode;
|
|
16
|
+
}) => react_jsx_runtime.JSX.Element;
|
|
17
|
+
|
|
18
|
+
type PossibleRef<T> = Ref<T> | null | undefined;
|
|
19
|
+
/**
|
|
20
|
+
* Assign a value to a single ref, whether it's a function ref, object ref,
|
|
21
|
+
* or null/undefined. Mirrors the Radix UI helper so primitives can cleanly
|
|
22
|
+
* forward refs when composed via `asChild`.
|
|
23
|
+
*/
|
|
24
|
+
declare function setRef<T>(ref: PossibleRef<T>, value: T | null): void;
|
|
25
|
+
/**
|
|
26
|
+
* Compose multiple refs into a single callback ref. Forwards the node
|
|
27
|
+
* (or null on unmount) to every provided ref. Null/undefined refs are ignored.
|
|
28
|
+
*/
|
|
29
|
+
declare function composeRefs<T>(...refs: Array<PossibleRef<T>>): (node: T | null) => void;
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* Compose a consumer-provided event handler with an internal handler.
|
|
33
|
+
* The consumer handler runs first; the internal handler is skipped when
|
|
34
|
+
* the consumer calls `event.preventDefault()` (unless opted out).
|
|
35
|
+
*
|
|
36
|
+
* Mirrors the Radix UI helper so primitive leaves can safely chain
|
|
37
|
+
* user handlers with their own state updates.
|
|
38
|
+
*/
|
|
39
|
+
declare function composeEventHandlers<E extends {
|
|
40
|
+
defaultPrevented: boolean;
|
|
41
|
+
}>(originalEventHandler?: ((event: E) => void) | undefined, ourEventHandler?: ((event: E) => void) | undefined, { checkForDefaultPrevented }?: {
|
|
42
|
+
checkForDefaultPrevented?: boolean;
|
|
43
|
+
}): (event: E) => void;
|
|
44
|
+
|
|
45
|
+
/**
|
|
46
|
+
* CheckoutSummary compound primitive.
|
|
47
|
+
*
|
|
48
|
+
* Unstyled, accessible building blocks for rendering a checkout-time summary
|
|
49
|
+
* of the selected plan + product. Consumers compose subcomponents; the
|
|
50
|
+
* top-level `@solvapay/react` package ships a thin default-tree shim in
|
|
51
|
+
* `src/components/CheckoutSummary.tsx`.
|
|
52
|
+
*
|
|
53
|
+
* Every leaf subcomponent accepts `asChild` for Slot-style composition with
|
|
54
|
+
* consumer elements (shadcn/ui, Tailwind, plain HTML). State comes from
|
|
55
|
+
* `usePlan` + `useProduct` with optional fallback through
|
|
56
|
+
* `PlanSelectionContext`.
|
|
57
|
+
*/
|
|
58
|
+
|
|
59
|
+
type CheckoutSummaryContextValue = {
|
|
60
|
+
plan: Plan | null;
|
|
61
|
+
product: Product | null;
|
|
62
|
+
priceFormatted: string;
|
|
63
|
+
trialBanner: string | null;
|
|
64
|
+
loading: boolean;
|
|
65
|
+
};
|
|
66
|
+
declare const CheckoutSummaryRoot: React.ForwardRefExoticComponent<{
|
|
67
|
+
planRef?: string;
|
|
68
|
+
productRef?: string;
|
|
69
|
+
asChild?: boolean;
|
|
70
|
+
children?: React.ReactNode;
|
|
71
|
+
} & Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & React.RefAttributes<HTMLDivElement>>;
|
|
72
|
+
declare const CheckoutSummaryProduct: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
|
|
73
|
+
asChild?: boolean;
|
|
74
|
+
} & React.RefAttributes<HTMLSpanElement>>;
|
|
75
|
+
declare const CheckoutSummaryPlan: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
|
|
76
|
+
asChild?: boolean;
|
|
77
|
+
} & React.RefAttributes<HTMLSpanElement>>;
|
|
78
|
+
declare const CheckoutSummaryPrice: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
|
|
79
|
+
asChild?: boolean;
|
|
80
|
+
} & React.RefAttributes<HTMLSpanElement>>;
|
|
81
|
+
declare const CheckoutSummaryTrial: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
|
|
82
|
+
asChild?: boolean;
|
|
83
|
+
} & React.RefAttributes<HTMLSpanElement>>;
|
|
84
|
+
declare const CheckoutSummaryTaxNote: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
|
|
85
|
+
asChild?: boolean;
|
|
86
|
+
} & React.RefAttributes<HTMLSpanElement>>;
|
|
87
|
+
declare const CheckoutSummary: {
|
|
88
|
+
readonly Root: React.ForwardRefExoticComponent<{
|
|
89
|
+
planRef?: string;
|
|
90
|
+
productRef?: string;
|
|
91
|
+
asChild?: boolean;
|
|
92
|
+
children?: React.ReactNode;
|
|
93
|
+
} & Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & React.RefAttributes<HTMLDivElement>>;
|
|
94
|
+
readonly Product: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
|
|
95
|
+
asChild?: boolean;
|
|
96
|
+
} & React.RefAttributes<HTMLSpanElement>>;
|
|
97
|
+
readonly Plan: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
|
|
98
|
+
asChild?: boolean;
|
|
99
|
+
} & React.RefAttributes<HTMLSpanElement>>;
|
|
100
|
+
readonly Price: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
|
|
101
|
+
asChild?: boolean;
|
|
102
|
+
} & React.RefAttributes<HTMLSpanElement>>;
|
|
103
|
+
readonly Trial: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
|
|
104
|
+
asChild?: boolean;
|
|
105
|
+
} & React.RefAttributes<HTMLSpanElement>>;
|
|
106
|
+
readonly TaxNote: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
|
|
107
|
+
asChild?: boolean;
|
|
108
|
+
} & React.RefAttributes<HTMLSpanElement>>;
|
|
109
|
+
};
|
|
110
|
+
/**
|
|
111
|
+
* Hook for consumers who need the resolved plan/product/price state directly
|
|
112
|
+
* (for example, to gate sibling UI outside the primitive tree).
|
|
113
|
+
*
|
|
114
|
+
* Must be called inside `<CheckoutSummary.Root>`.
|
|
115
|
+
*/
|
|
116
|
+
declare function useCheckoutSummary(): CheckoutSummaryContextValue;
|
|
117
|
+
|
|
118
|
+
/**
|
|
119
|
+
* PlanSelector compound primitive.
|
|
120
|
+
*
|
|
121
|
+
* Unstyled, accessible building blocks for fetching a product's active plans
|
|
122
|
+
* and letting users pick one. Consumers compose subcomponents; the top-level
|
|
123
|
+
* `@solvapay/react` package ships a thin default-tree shim in
|
|
124
|
+
* `src/components/PlanSelector.tsx`.
|
|
125
|
+
*
|
|
126
|
+
* State machine lives in the existing `usePlans` hook and
|
|
127
|
+
* `PlanSelectionContext`. Each `Card` emits `data-state=idle|selected|current|disabled`
|
|
128
|
+
* and optional `data-free`, `data-popular`, `data-trial` flags for CSS
|
|
129
|
+
* targeting without inline styles.
|
|
130
|
+
*/
|
|
131
|
+
|
|
132
|
+
type PlanSelectorContextValue = {
|
|
133
|
+
plans: Plan[];
|
|
134
|
+
loading: boolean;
|
|
135
|
+
error: Error | null;
|
|
136
|
+
selectedPlan: Plan | null;
|
|
137
|
+
selectedPlanRef: string | null;
|
|
138
|
+
popularPlanRef: string | undefined;
|
|
139
|
+
currentPlanRef: string | null;
|
|
140
|
+
isCurrent: (ref: string) => boolean;
|
|
141
|
+
isFree: (ref: string) => boolean;
|
|
142
|
+
isPopular: (ref: string) => boolean;
|
|
143
|
+
select: (ref: string) => void;
|
|
144
|
+
};
|
|
145
|
+
declare const PlanSelectorRoot: React.ForwardRefExoticComponent<{
|
|
146
|
+
productRef?: string;
|
|
147
|
+
fetcher?: (productRef: string) => Promise<Plan[]>;
|
|
148
|
+
filter?: (plan: Plan, index: number) => boolean;
|
|
149
|
+
sortBy?: (a: Plan, b: Plan) => number;
|
|
150
|
+
autoSelectFirstPaid?: boolean;
|
|
151
|
+
initialPlanRef?: string;
|
|
152
|
+
currentPlanRef?: string | null;
|
|
153
|
+
popularPlanRef?: string;
|
|
154
|
+
onSelect?: (planRef: string, plan: Plan) => void;
|
|
155
|
+
children?: React.ReactNode;
|
|
156
|
+
} & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onSelect"> & React.RefAttributes<HTMLDivElement>>;
|
|
157
|
+
declare const PlanSelectorHeading: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & {
|
|
158
|
+
asChild?: boolean;
|
|
159
|
+
} & React.RefAttributes<HTMLHeadingElement>>;
|
|
160
|
+
declare const PlanSelectorGrid: React.ForwardRefExoticComponent<{
|
|
161
|
+
children?: React.ReactNode;
|
|
162
|
+
} & Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & React.RefAttributes<HTMLDivElement>>;
|
|
163
|
+
declare const PlanSelectorCard: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
164
|
+
asChild?: boolean;
|
|
165
|
+
} & React.RefAttributes<HTMLButtonElement>>;
|
|
166
|
+
declare const PlanSelectorCardName: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
|
|
167
|
+
asChild?: boolean;
|
|
168
|
+
} & React.RefAttributes<HTMLSpanElement>>;
|
|
169
|
+
declare const PlanSelectorCardPrice: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
|
|
170
|
+
asChild?: boolean;
|
|
171
|
+
} & React.RefAttributes<HTMLSpanElement>>;
|
|
172
|
+
declare const PlanSelectorCardInterval: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
|
|
173
|
+
asChild?: boolean;
|
|
174
|
+
} & React.RefAttributes<HTMLSpanElement>>;
|
|
175
|
+
declare const PlanSelectorCardBadge: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
|
|
176
|
+
asChild?: boolean;
|
|
177
|
+
} & {
|
|
178
|
+
'data-variant'?: "current" | "popular";
|
|
179
|
+
} & React.RefAttributes<HTMLSpanElement>>;
|
|
180
|
+
declare const PlanSelectorLoading: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
|
|
181
|
+
asChild?: boolean;
|
|
182
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
183
|
+
declare const PlanSelectorError: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
|
|
184
|
+
asChild?: boolean;
|
|
185
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
186
|
+
declare const PlanSelector: {
|
|
187
|
+
readonly Root: React.ForwardRefExoticComponent<{
|
|
188
|
+
productRef?: string;
|
|
189
|
+
fetcher?: (productRef: string) => Promise<Plan[]>;
|
|
190
|
+
filter?: (plan: Plan, index: number) => boolean;
|
|
191
|
+
sortBy?: (a: Plan, b: Plan) => number;
|
|
192
|
+
autoSelectFirstPaid?: boolean;
|
|
193
|
+
initialPlanRef?: string;
|
|
194
|
+
currentPlanRef?: string | null;
|
|
195
|
+
popularPlanRef?: string;
|
|
196
|
+
onSelect?: (planRef: string, plan: Plan) => void;
|
|
197
|
+
children?: React.ReactNode;
|
|
198
|
+
} & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onSelect"> & React.RefAttributes<HTMLDivElement>>;
|
|
199
|
+
readonly Heading: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & {
|
|
200
|
+
asChild?: boolean;
|
|
201
|
+
} & React.RefAttributes<HTMLHeadingElement>>;
|
|
202
|
+
readonly Grid: React.ForwardRefExoticComponent<{
|
|
203
|
+
children?: React.ReactNode;
|
|
204
|
+
} & Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & React.RefAttributes<HTMLDivElement>>;
|
|
205
|
+
readonly Card: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
206
|
+
asChild?: boolean;
|
|
207
|
+
} & React.RefAttributes<HTMLButtonElement>>;
|
|
208
|
+
readonly CardName: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
|
|
209
|
+
asChild?: boolean;
|
|
210
|
+
} & React.RefAttributes<HTMLSpanElement>>;
|
|
211
|
+
readonly CardPrice: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
|
|
212
|
+
asChild?: boolean;
|
|
213
|
+
} & React.RefAttributes<HTMLSpanElement>>;
|
|
214
|
+
readonly CardInterval: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
|
|
215
|
+
asChild?: boolean;
|
|
216
|
+
} & React.RefAttributes<HTMLSpanElement>>;
|
|
217
|
+
readonly CardBadge: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
|
|
218
|
+
asChild?: boolean;
|
|
219
|
+
} & {
|
|
220
|
+
'data-variant'?: "current" | "popular";
|
|
221
|
+
} & React.RefAttributes<HTMLSpanElement>>;
|
|
222
|
+
readonly Loading: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
|
|
223
|
+
asChild?: boolean;
|
|
224
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
225
|
+
readonly Error: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
|
|
226
|
+
asChild?: boolean;
|
|
227
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
228
|
+
};
|
|
229
|
+
/**
|
|
230
|
+
* Hook for reading the shared PlanSelector state inside the primitive tree.
|
|
231
|
+
* Must be called under `<PlanSelector.Root>`.
|
|
232
|
+
*/
|
|
233
|
+
declare function usePlanSelector(): PlanSelectorContextValue;
|
|
234
|
+
|
|
235
|
+
/**
|
|
236
|
+
* AmountPicker compound primitive.
|
|
237
|
+
*
|
|
238
|
+
* Unstyled building blocks for the top-up amount selector: quick-pick pills
|
|
239
|
+
* (`Option`), a custom input (`Custom`), and a `Confirm` button that runs
|
|
240
|
+
* the hook's `validate()` before proceeding. State comes from
|
|
241
|
+
* `useTopupAmountSelector` via `Root` and is exposed through
|
|
242
|
+
* `useAmountPicker()` for fully custom layouts.
|
|
243
|
+
*
|
|
244
|
+
* `Option` emits `data-state=idle|selected|disabled` and a numeric
|
|
245
|
+
* `data-amount` attribute; `Custom` emits `data-state=active|dormant`
|
|
246
|
+
* based on whether the custom input holds the active resolved amount.
|
|
247
|
+
*/
|
|
248
|
+
|
|
249
|
+
type AmountPickerContextValue = UseTopupAmountSelectorReturn & {
|
|
250
|
+
currency: string;
|
|
251
|
+
creditsPerMinorUnit: number | null;
|
|
252
|
+
displayExchangeRate: number | null;
|
|
253
|
+
estimatedCredits: number | null;
|
|
254
|
+
isApproximate: boolean;
|
|
255
|
+
};
|
|
256
|
+
declare const AmountPickerRoot: React.ForwardRefExoticComponent<{
|
|
257
|
+
currency: string;
|
|
258
|
+
minAmount?: number;
|
|
259
|
+
maxAmount?: number;
|
|
260
|
+
onChange?: (amount: number | null) => void;
|
|
261
|
+
asChild?: boolean;
|
|
262
|
+
children?: React.ReactNode;
|
|
263
|
+
} & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & React.RefAttributes<HTMLDivElement>>;
|
|
264
|
+
declare const AmountPickerOption: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
265
|
+
asChild?: boolean;
|
|
266
|
+
amount: number;
|
|
267
|
+
} & React.RefAttributes<HTMLButtonElement>>;
|
|
268
|
+
declare const AmountPickerCustom: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & {
|
|
269
|
+
asChild?: boolean;
|
|
270
|
+
} & React.RefAttributes<HTMLInputElement>>;
|
|
271
|
+
declare const AmountPickerConfirm: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
272
|
+
asChild?: boolean;
|
|
273
|
+
onConfirm?: (amount: number) => void;
|
|
274
|
+
} & React.RefAttributes<HTMLButtonElement>>;
|
|
275
|
+
declare const AmountPicker: {
|
|
276
|
+
readonly Root: React.ForwardRefExoticComponent<{
|
|
277
|
+
currency: string;
|
|
278
|
+
minAmount?: number;
|
|
279
|
+
maxAmount?: number;
|
|
280
|
+
onChange?: (amount: number | null) => void;
|
|
281
|
+
asChild?: boolean;
|
|
282
|
+
children?: React.ReactNode;
|
|
283
|
+
} & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & React.RefAttributes<HTMLDivElement>>;
|
|
284
|
+
readonly Option: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
285
|
+
asChild?: boolean;
|
|
286
|
+
amount: number;
|
|
287
|
+
} & React.RefAttributes<HTMLButtonElement>>;
|
|
288
|
+
readonly Custom: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & {
|
|
289
|
+
asChild?: boolean;
|
|
290
|
+
} & React.RefAttributes<HTMLInputElement>>;
|
|
291
|
+
readonly Confirm: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
292
|
+
asChild?: boolean;
|
|
293
|
+
onConfirm?: (amount: number) => void;
|
|
294
|
+
} & React.RefAttributes<HTMLButtonElement>>;
|
|
295
|
+
};
|
|
296
|
+
declare function useAmountPicker(): AmountPickerContextValue;
|
|
297
|
+
/** Helper for copy consumers composing the default-tree shim. */
|
|
298
|
+
declare function useAmountPickerCopy(): {
|
|
299
|
+
selectAmountLabel: string;
|
|
300
|
+
customAmountLabel: string;
|
|
301
|
+
creditEstimate: (credits: number) => string;
|
|
302
|
+
};
|
|
303
|
+
|
|
304
|
+
/**
|
|
305
|
+
* CancelledPlanNotice compound primitive.
|
|
306
|
+
*
|
|
307
|
+
* Banner surfaced when the customer has a cancelled-but-still-active
|
|
308
|
+
* purchase. `Root` renders `null` when no cancelled purchase exists;
|
|
309
|
+
* otherwise it emits `data-state=active|expired` and `data-has-reason`,
|
|
310
|
+
* and all leaves render only their respective slice of the cancellation
|
|
311
|
+
* data (Expires, DaysRemaining, AccessUntil, CancelledOn, Reason).
|
|
312
|
+
* `ReactivateButton` wires up `usePurchaseActions().reactivateRenewal`
|
|
313
|
+
* with `data-state=idle|reactivating`.
|
|
314
|
+
*/
|
|
315
|
+
|
|
316
|
+
type NoticeState = 'active' | 'expired';
|
|
317
|
+
type CancelledPlanNoticeContextValue = {
|
|
318
|
+
purchase: PurchaseInfo;
|
|
319
|
+
state: NoticeState;
|
|
320
|
+
daysRemaining: number | null;
|
|
321
|
+
hasReason: boolean;
|
|
322
|
+
formatDate: (date?: string) => string | null;
|
|
323
|
+
reactivate: () => Promise<void>;
|
|
324
|
+
isReactivating: boolean;
|
|
325
|
+
};
|
|
326
|
+
declare const CancelledPlanNoticeRoot: React.ForwardRefExoticComponent<{
|
|
327
|
+
onReactivated?: () => void;
|
|
328
|
+
onError?: (error: Error) => void;
|
|
329
|
+
asChild?: boolean;
|
|
330
|
+
children?: React.ReactNode;
|
|
331
|
+
} & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onError"> & React.RefAttributes<HTMLDivElement>>;
|
|
332
|
+
declare const CancelledPlanNoticeHeading: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
|
|
333
|
+
asChild?: boolean;
|
|
334
|
+
} & React.RefAttributes<HTMLParagraphElement>>;
|
|
335
|
+
declare const CancelledPlanNoticeExpires: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
|
|
336
|
+
asChild?: boolean;
|
|
337
|
+
} & React.RefAttributes<HTMLParagraphElement>>;
|
|
338
|
+
declare const CancelledPlanNoticeDaysRemaining: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
|
|
339
|
+
asChild?: boolean;
|
|
340
|
+
} & React.RefAttributes<HTMLParagraphElement>>;
|
|
341
|
+
declare const CancelledPlanNoticeAccessUntil: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
|
|
342
|
+
asChild?: boolean;
|
|
343
|
+
} & React.RefAttributes<HTMLParagraphElement>>;
|
|
344
|
+
declare const CancelledPlanNoticeCancelledOn: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
|
|
345
|
+
asChild?: boolean;
|
|
346
|
+
} & React.RefAttributes<HTMLParagraphElement>>;
|
|
347
|
+
declare const CancelledPlanNoticeReason: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
|
|
348
|
+
asChild?: boolean;
|
|
349
|
+
} & React.RefAttributes<HTMLSpanElement>>;
|
|
350
|
+
declare const CancelledPlanNoticeReactivateButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
351
|
+
asChild?: boolean;
|
|
352
|
+
} & React.RefAttributes<HTMLButtonElement>>;
|
|
353
|
+
declare const CancelledPlanNotice: {
|
|
354
|
+
readonly Root: React.ForwardRefExoticComponent<{
|
|
355
|
+
onReactivated?: () => void;
|
|
356
|
+
onError?: (error: Error) => void;
|
|
357
|
+
asChild?: boolean;
|
|
358
|
+
children?: React.ReactNode;
|
|
359
|
+
} & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onError"> & React.RefAttributes<HTMLDivElement>>;
|
|
360
|
+
readonly Heading: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
|
|
361
|
+
asChild?: boolean;
|
|
362
|
+
} & React.RefAttributes<HTMLParagraphElement>>;
|
|
363
|
+
readonly Expires: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
|
|
364
|
+
asChild?: boolean;
|
|
365
|
+
} & React.RefAttributes<HTMLParagraphElement>>;
|
|
366
|
+
readonly DaysRemaining: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
|
|
367
|
+
asChild?: boolean;
|
|
368
|
+
} & React.RefAttributes<HTMLParagraphElement>>;
|
|
369
|
+
readonly AccessUntil: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
|
|
370
|
+
asChild?: boolean;
|
|
371
|
+
} & React.RefAttributes<HTMLParagraphElement>>;
|
|
372
|
+
readonly CancelledOn: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
|
|
373
|
+
asChild?: boolean;
|
|
374
|
+
} & React.RefAttributes<HTMLParagraphElement>>;
|
|
375
|
+
readonly Reason: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
|
|
376
|
+
asChild?: boolean;
|
|
377
|
+
} & React.RefAttributes<HTMLSpanElement>>;
|
|
378
|
+
readonly ReactivateButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
379
|
+
asChild?: boolean;
|
|
380
|
+
} & React.RefAttributes<HTMLButtonElement>>;
|
|
381
|
+
};
|
|
382
|
+
declare function useCancelledPlanNotice(): CancelledPlanNoticeContextValue;
|
|
383
|
+
|
|
384
|
+
/**
|
|
385
|
+
* CreditGate compound primitive.
|
|
386
|
+
*
|
|
387
|
+
* Companion to `<PurchaseGate>` for usage-based flows. `Root` compares the
|
|
388
|
+
* customer's credit balance against a threshold and drives
|
|
389
|
+
* `data-state=allowed|blocked|loading`. Subcomponents render only in their
|
|
390
|
+
* matching state:
|
|
391
|
+
* - `Heading`, `Subheading`, `Topup` — `blocked`
|
|
392
|
+
* - `Loading` — `loading`
|
|
393
|
+
* - `Error` — when `useBalance()` reports a fetch error
|
|
394
|
+
*
|
|
395
|
+
* Consumer-rendered "allowed" content is gated via the `useCreditGate()`
|
|
396
|
+
* hook or by conditionally mounting children.
|
|
397
|
+
*/
|
|
398
|
+
|
|
399
|
+
type GateState = 'allowed' | 'blocked' | 'loading';
|
|
400
|
+
type CreditGateContextValue = {
|
|
401
|
+
state: GateState;
|
|
402
|
+
loading: boolean;
|
|
403
|
+
hasCredits: boolean;
|
|
404
|
+
balance: number | null;
|
|
405
|
+
productName: string | null;
|
|
406
|
+
topupAmount: number;
|
|
407
|
+
topupCurrency: string;
|
|
408
|
+
};
|
|
409
|
+
type TopupProps = {
|
|
410
|
+
amount?: number;
|
|
411
|
+
currency?: string;
|
|
412
|
+
};
|
|
413
|
+
declare const CreditGateRoot: React.ForwardRefExoticComponent<{
|
|
414
|
+
minCredits?: number;
|
|
415
|
+
productRef?: string;
|
|
416
|
+
topupAmount?: number;
|
|
417
|
+
topupCurrency?: string;
|
|
418
|
+
asChild?: boolean;
|
|
419
|
+
children?: React.ReactNode;
|
|
420
|
+
} & Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & React.RefAttributes<HTMLDivElement>>;
|
|
421
|
+
declare const CreditGateHeading: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
|
|
422
|
+
asChild?: boolean;
|
|
423
|
+
} & React.RefAttributes<HTMLHeadingElement>>;
|
|
424
|
+
declare const CreditGateSubheading: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
|
|
425
|
+
asChild?: boolean;
|
|
426
|
+
} & React.RefAttributes<HTMLParagraphElement>>;
|
|
427
|
+
declare const CreditGateTopup: React.FC<TopupProps>;
|
|
428
|
+
declare const CreditGateLoading: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
|
|
429
|
+
asChild?: boolean;
|
|
430
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
431
|
+
declare const CreditGateError: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
|
|
432
|
+
asChild?: boolean;
|
|
433
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
434
|
+
declare const CreditGate: {
|
|
435
|
+
readonly Root: React.ForwardRefExoticComponent<{
|
|
436
|
+
minCredits?: number;
|
|
437
|
+
productRef?: string;
|
|
438
|
+
topupAmount?: number;
|
|
439
|
+
topupCurrency?: string;
|
|
440
|
+
asChild?: boolean;
|
|
441
|
+
children?: React.ReactNode;
|
|
442
|
+
} & Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & React.RefAttributes<HTMLDivElement>>;
|
|
443
|
+
readonly Heading: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
|
|
444
|
+
asChild?: boolean;
|
|
445
|
+
} & React.RefAttributes<HTMLHeadingElement>>;
|
|
446
|
+
readonly Subheading: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
|
|
447
|
+
asChild?: boolean;
|
|
448
|
+
} & React.RefAttributes<HTMLParagraphElement>>;
|
|
449
|
+
readonly Topup: React.FC<TopupProps>;
|
|
450
|
+
readonly Loading: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
|
|
451
|
+
asChild?: boolean;
|
|
452
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
453
|
+
readonly Error: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
|
|
454
|
+
asChild?: boolean;
|
|
455
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
456
|
+
};
|
|
457
|
+
declare function useCreditGate(): CreditGateContextValue;
|
|
458
|
+
|
|
459
|
+
/**
|
|
460
|
+
* TopupForm compound primitive.
|
|
461
|
+
*
|
|
462
|
+
* Wraps `useTopup` + Stripe Elements to run a one-shot credit top-up.
|
|
463
|
+
* Unlike `PaymentForm`, no backend reconciliation is needed — credits land
|
|
464
|
+
* via the webhook handler, so `onSuccess` fires immediately after Stripe
|
|
465
|
+
* confirmation.
|
|
466
|
+
*
|
|
467
|
+
* `TopupForm.AmountPicker` is re-exported from the `AmountPicker` primitive
|
|
468
|
+
* so consumers can compose an in-place amount picker without importing from
|
|
469
|
+
* two modules. The amount flows into the form either via the `amount` prop
|
|
470
|
+
* on `Root` or via a sibling `AmountPicker` with matching state.
|
|
471
|
+
*/
|
|
472
|
+
|
|
473
|
+
type TopupFormState = 'loading' | 'ready' | 'error';
|
|
474
|
+
type TopupFormContextValue = {
|
|
475
|
+
amount: number;
|
|
476
|
+
currency?: string;
|
|
477
|
+
state: TopupFormState;
|
|
478
|
+
clientSecret: string | null;
|
|
479
|
+
stripe: Stripe | null;
|
|
480
|
+
elements: StripeElements | null;
|
|
481
|
+
isReady: boolean;
|
|
482
|
+
isProcessing: boolean;
|
|
483
|
+
paymentInputComplete: boolean;
|
|
484
|
+
canSubmit: boolean;
|
|
485
|
+
error: string | null;
|
|
486
|
+
returnUrl: string;
|
|
487
|
+
setPaymentInputComplete: (complete: boolean) => void;
|
|
488
|
+
submit: () => Promise<void>;
|
|
489
|
+
};
|
|
490
|
+
type PaymentElementProps = {
|
|
491
|
+
options?: React.ComponentProps<typeof PaymentElement>['options'];
|
|
492
|
+
};
|
|
493
|
+
declare const TopupFormRoot: React.ForwardRefExoticComponent<TopupFormProps & {
|
|
494
|
+
asChild?: boolean;
|
|
495
|
+
children?: React.ReactNode;
|
|
496
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
497
|
+
declare const TopupFormPaymentElement: React.FC<PaymentElementProps>;
|
|
498
|
+
declare const TopupFormSubmitButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
499
|
+
asChild?: boolean;
|
|
500
|
+
} & React.RefAttributes<HTMLButtonElement>>;
|
|
501
|
+
declare const TopupFormLoading: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
|
|
502
|
+
asChild?: boolean;
|
|
503
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
504
|
+
declare const TopupFormError: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
|
|
505
|
+
asChild?: boolean;
|
|
506
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
507
|
+
declare const TopupForm: {
|
|
508
|
+
readonly Root: React.ForwardRefExoticComponent<TopupFormProps & {
|
|
509
|
+
asChild?: boolean;
|
|
510
|
+
children?: React.ReactNode;
|
|
511
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
512
|
+
readonly AmountPicker: React.ForwardRefExoticComponent<{
|
|
513
|
+
currency: string;
|
|
514
|
+
minAmount?: number;
|
|
515
|
+
maxAmount?: number;
|
|
516
|
+
onChange?: (amount: number | null) => void;
|
|
517
|
+
asChild?: boolean;
|
|
518
|
+
children?: React.ReactNode;
|
|
519
|
+
} & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & React.RefAttributes<HTMLDivElement>>;
|
|
520
|
+
readonly PaymentElement: React.FC<PaymentElementProps>;
|
|
521
|
+
readonly SubmitButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
522
|
+
asChild?: boolean;
|
|
523
|
+
} & React.RefAttributes<HTMLButtonElement>>;
|
|
524
|
+
readonly Loading: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
|
|
525
|
+
asChild?: boolean;
|
|
526
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
527
|
+
readonly Error: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
|
|
528
|
+
asChild?: boolean;
|
|
529
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
530
|
+
};
|
|
531
|
+
declare function useTopupForm(): TopupFormContextValue;
|
|
532
|
+
|
|
533
|
+
export { AmountPicker, AmountPickerConfirm, AmountPickerCustom, AmountPickerOption, AmountPickerRoot, CancelledPlanNotice, CancelledPlanNoticeAccessUntil, CancelledPlanNoticeCancelledOn, CancelledPlanNoticeDaysRemaining, CancelledPlanNoticeExpires, CancelledPlanNoticeHeading, CancelledPlanNoticeReactivateButton, CancelledPlanNoticeReason, CancelledPlanNoticeRoot, CheckoutSummary, CheckoutSummaryPlan, CheckoutSummaryPrice, CheckoutSummaryProduct, CheckoutSummaryRoot, CheckoutSummaryTaxNote, CheckoutSummaryTrial, CreditGate, CreditGateError, CreditGateHeading, CreditGateLoading, CreditGateRoot, CreditGateSubheading, CreditGateTopup, PlanSelector, PlanSelectorCard, PlanSelectorCardBadge, PlanSelectorCardInterval, PlanSelectorCardName, PlanSelectorCardPrice, PlanSelectorError, PlanSelectorGrid, PlanSelectorHeading, PlanSelectorLoading, PlanSelectorRoot, Slot, Slottable, TopupForm, TopupFormError, TopupFormLoading, TopupFormPaymentElement, TopupFormRoot, TopupFormSubmitButton, composeEventHandlers, composeRefs, setRef, useAmountPicker, useAmountPickerCopy, useCancelledPlanNotice, useCheckoutSummary, useCreditGate, usePlanSelector, useTopupForm };
|