@whop/embedded-components-vanilla-js
Version:
Whop Elements loading utility
433 lines (411 loc) • 20.7 kB
TypeScript
declare const locales: readonly ["en"];
type I18nSupportedLocale = (typeof locales)[number];
type CSSValue = string;
type CSSProps = Record<string, CSSValue>;
type Classes = Record<string, CSSProps>;
type Variables = Record<`--${string}`, string>;
type Theme = {
appearance?: "light" | "dark";
accentColor?: "ruby" | "blue" | "red" | "yellow" | "green" | "gray" | "tomato" | "crimson" | "pink" | "plum" | "purple" | "violet" | "iris" | "cyan" | "teal" | "jade" | "grass" | "brown" | "orange" | "indigo" | "sky" | "mint" | "amber" | "lime" | "lemon" | "magenta" | "gold" | "bronze";
grayColor?: "gray" | "mauve" | "slate" | "sage" | "olive" | "sand" | "auto";
dangerColor?: "ruby" | "red" | "tomato";
warningColor?: "yellow" | "amber";
successColor?: "green" | "teal" | "jade" | "grass";
infoColor?: "sky" | "blue";
};
type Appearance = {
variables?: Variables | null;
classes?: Classes | null;
theme?: Theme | null;
};
interface EmbeddableElement {
mount: (element: HTMLElement | `#${string}`) => void;
unmount: () => void;
}
type ListenerSignature<L> = {
[E in keyof L]: (...args: any[]) => any;
};
type DefaultListener = Record<string, (...args: any[]) => any>;
declare const TypedEmitter: new <L extends ListenerSignature<L> = DefaultListener>() => TypedEmitterType<L>;
type TypedEmitter<L extends ListenerSignature<L> = DefaultListener> = InstanceType<typeof TypedEmitter<L>>;
declare class TypedEmitterType<L extends ListenerSignature<L> = DefaultListener> {
static defaultMaxListeners: number;
addListener<U extends keyof L>(event: U, listener: L[U]): this;
prependListener<U extends keyof L>(event: U, listener: L[U]): this;
prependOnceListener<U extends keyof L>(event: U, listener: L[U]): this;
removeListener<U extends keyof L>(event: U, listener: L[U]): this;
removeAllListeners(event?: keyof L): this;
once<U extends keyof L>(event: U, listener: L[U]): this;
on<U extends keyof L>(event: U, listener: L[U]): this;
off<U extends keyof L>(event: U, listener: L[U]): this;
emit<U extends keyof L>(event: U, ...args: Parameters<L[U]>): boolean;
eventNames<U extends keyof L>(): U[];
listenerCount(type: keyof L): number;
listeners<U extends keyof L>(type: U): L[U][];
rawListeners<U extends keyof L>(type: U): L[U][];
getMaxListeners(): number;
setMaxListeners(n: number): this;
}
interface WhopElement<ElementOptions, ElementEvents extends ListenerSignature<ElementEvents> & {
snapshot: (snapshot: ElementSnapshot) => void;
}, ElementSnapshot> extends TypedEmitter<ElementEvents>, EmbeddableElement {
options: ElementOptions;
state: "loading" | "ready";
updateOptions: (options: Partial<ElementOptions>) => void;
getSnapshot: () => ElementSnapshot;
}
interface BalanceElementEvents {
error: (error: unknown) => void;
ready: (element: BalanceElement) => void;
optionsUpdated: (options: BalanceElementOptions) => void;
snapshot: (snapshot: BalanceElementSnapshot) => void;
showTotalBalanceBreakdown: (ev: CustomEvent<BalanceElement>) => void;
showPendingBalanceBreakdown: (ev: CustomEvent<BalanceElement>) => void;
showRegularReserveBalanceBreakdown: (ev: CustomEvent<BalanceElement>) => void;
showBnplReserveBalanceBreakdown: (ev: CustomEvent<BalanceElement>) => void;
}
interface BalanceElementOptions {
hidePendingBalance?: boolean;
onReady?: (element: BalanceElement) => void;
onShowTotalBalanceBreakdown?: (ev: CustomEvent<BalanceElement>) => void;
onShowPendingBalanceBreakdown?: (ev: CustomEvent<BalanceElement>) => void;
onShowRegularReserveBalanceBreakdown?: (ev: CustomEvent<BalanceElement>) => void;
onShowBnplReserveBalanceBreakdown?: (ev: CustomEvent<BalanceElement>) => void;
}
interface BalanceElementSnapshot {
state: "loading" | "ready";
}
type BalanceElement = WhopElement<BalanceElementOptions, BalanceElementEvents, BalanceElementSnapshot>;
interface BnplReserveBalanceBreakdownElementEvents {
error: (error: unknown) => void;
ready: (element: BnplReserveBalanceBreakdownElement) => void;
optionsUpdated: (options: BnplReserveBalanceBreakdownElementOptions) => void;
close: (ev: CustomEvent) => void;
snapshot: (snapshot: BnplReserveBalanceBreakdownElementSnapshot) => void;
}
interface BnplReserveBalanceBreakdownElementOptions {
onReady?: (element: BnplReserveBalanceBreakdownElement) => void;
onClose?: (ev: CustomEvent) => void;
}
interface BnplReserveBalanceBreakdownElementSnapshot {
state: "loading" | "ready";
}
type BnplReserveBalanceBreakdownElement = WhopElement<BnplReserveBalanceBreakdownElementOptions, BnplReserveBalanceBreakdownElementEvents, BnplReserveBalanceBreakdownElementSnapshot>;
interface ChangeAccountCountryElementEvents {
error: (error: unknown) => void;
ready: (element: ChangeAccountCountryElement) => void;
optionsUpdated: (options: ChangeAccountCountryElementOptions) => void;
close: (ev: CustomEvent) => void;
snapshot: (snapshot: ChangeAccountCountryElementSnapshot) => void;
countryChanged: (ev: CustomEvent<{
country: string;
}>) => void;
}
interface ChangeAccountCountryElementOptions {
onReady?: (element: ChangeAccountCountryElement) => void;
onClose?: (ev: CustomEvent) => void;
onCountryChanged?: (ev: CustomEvent<{
country: string;
}>) => void;
}
interface ChangeAccountCountryElementSnapshot {
state: "loading" | "ready";
}
type ChangeAccountCountryElement = WhopElement<ChangeAccountCountryElementOptions, ChangeAccountCountryElementEvents, ChangeAccountCountryElementSnapshot>;
interface PendingBalanceBreakdownElementEvents {
error: (error: unknown) => void;
ready: (element: PendingBalanceBreakdownElement) => void;
optionsUpdated: (options: PendingBalanceBreakdownElementOptions) => void;
close: (ev: CustomEvent) => void;
snapshot: (snapshot: PendingBalanceBreakdownElementSnapshot) => void;
}
interface PendingBalanceBreakdownElementOptions {
onReady?: (element: PendingBalanceBreakdownElement) => void;
onClose?: (ev: CustomEvent) => void;
}
interface PendingBalanceBreakdownElementSnapshot {
state: "loading" | "ready";
}
type PendingBalanceBreakdownElement = WhopElement<PendingBalanceBreakdownElementOptions, PendingBalanceBreakdownElementEvents, PendingBalanceBreakdownElementSnapshot>;
interface RegularReserveBalanceBreakdownElementEvents {
error: (error: unknown) => void;
ready: (element: RegularReserveBalanceBreakdownElement) => void;
optionsUpdated: (options: RegularReserveBalanceBreakdownElementOptions) => void;
close: (ev: CustomEvent) => void;
snapshot: (snapshot: RegularReserveBalanceBreakdownElementSnapshot) => void;
}
interface RegularReserveBalanceBreakdownElementOptions {
onReady?: (element: RegularReserveBalanceBreakdownElement) => void;
onClose?: (ev: CustomEvent) => void;
}
interface RegularReserveBalanceBreakdownElementSnapshot {
state: "loading" | "ready";
}
type RegularReserveBalanceBreakdownElement = WhopElement<RegularReserveBalanceBreakdownElementOptions, RegularReserveBalanceBreakdownElementEvents, RegularReserveBalanceBreakdownElementSnapshot>;
interface ResetAccountElementEvents {
error: (error: unknown) => void;
ready: (element: ResetAccountElement) => void;
optionsUpdated: (options: ResetAccountElementOptions) => void;
close: (ev: CustomEvent) => void;
snapshot: (snapshot: ResetAccountElementSnapshot) => void;
reset: (ev: CustomEvent) => void;
}
interface ResetAccountElementOptions {
onReady?: (element: ResetAccountElement) => void;
onClose?: (ev: CustomEvent) => void;
onReset?: (ev: CustomEvent) => void;
}
interface ResetAccountElementSnapshot {
state: "loading" | "ready";
}
type ResetAccountElement = WhopElement<ResetAccountElementOptions, ResetAccountElementEvents, ResetAccountElementSnapshot>;
interface TotalBalanceBreakdownElementEvents {
error: (error: unknown) => void;
ready: (element: TotalBalanceBreakdownElement) => void;
optionsUpdated: (options: TotalBalanceBreakdownElementOptions) => void;
close: (ev: CustomEvent) => void;
snapshot: (snapshot: TotalBalanceBreakdownElementSnapshot) => void;
}
interface TotalBalanceBreakdownElementOptions {
onReady?: (element: TotalBalanceBreakdownElement) => void;
onClose?: (ev: CustomEvent) => void;
}
interface TotalBalanceBreakdownElementSnapshot {
state: "loading" | "ready";
}
type TotalBalanceBreakdownElement = WhopElement<TotalBalanceBreakdownElementOptions, TotalBalanceBreakdownElementEvents, TotalBalanceBreakdownElementSnapshot>;
interface VerifyElementEvents {
error: (error: unknown) => void;
ready: (element: VerifyElement) => void;
optionsUpdated: (options: VerifyElementOptions) => void;
close: (ev: CustomEvent) => void;
snapshot: (snapshot: VerifyElementSnapshot) => void;
verificationSubmitted: (ev: CustomEvent<VerifyElement>) => void;
}
interface VerifyElementOptions {
includeControls?: boolean;
onReady?: (element: VerifyElement) => void;
onVerificationSubmitted?: (ev: CustomEvent<VerifyElement>) => void;
onClose?: (ev: CustomEvent) => void;
}
interface VerifyElementSnapshot {
state: "loading" | "ready";
}
type VerifyElement = WhopElement<VerifyElementOptions, VerifyElementEvents, VerifyElementSnapshot>;
interface WithdrawButtonElementEvents {
error: (error: unknown) => void;
ready: (element: WithdrawButtonElement) => void;
optionsUpdated: (options: WithdrawButtonElementOptions) => void;
verify: (ev: CustomEvent<WithdrawButtonElement>) => void;
withdraw: (ev: CustomEvent<WithdrawButtonElement>) => void;
snapshot: (snapshot: WithdrawButtonElementSnapshot) => void;
verificationSubmitted: (ev: CustomEvent<WithdrawButtonElement>) => void;
withdrawalRequested: (ev: CustomEvent<WithdrawButtonElement>) => void;
}
interface WithdrawButtonElementOptions {
hidePendingBalance?: boolean;
onReady?: (element: WithdrawButtonElement) => void;
onVerificationSubmitted?: (ev: CustomEvent<WithdrawButtonElement>) => void;
onWithdrawalRequested?: (ev: CustomEvent<WithdrawButtonElement>) => void;
}
interface WithdrawButtonElementSnapshot {
state: "loading" | "ready";
}
type WithdrawButtonElement = WhopElement<WithdrawButtonElementOptions, WithdrawButtonElementEvents, WithdrawButtonElementSnapshot>;
interface WithdrawElementEvents {
error: (error: unknown) => void;
ready: (element: WithdrawElement) => void;
optionsUpdated: (options: WithdrawElementOptions) => void;
snapshot: (snapshot: WithdrawElementSnapshot) => void;
close: (ev: CustomEvent) => void;
withdraw: (ev: CustomEvent) => void;
}
interface WithdrawElementOptions {
onReady?: (element: WithdrawElement) => void;
onWithdraw?: (ev: CustomEvent) => void;
onClose?: (ev: CustomEvent) => void;
}
interface WithdrawElementSnapshot {
state: "loading" | "ready";
}
type WithdrawElement = WhopElement<WithdrawElementOptions, WithdrawElementEvents, WithdrawElementSnapshot>;
interface WithdrawalBreakdownElementEvents {
error: (error: unknown) => void;
ready: (element: WithdrawalBreakdownElement) => void;
optionsUpdated: (options: WithdrawalBreakdownElementOptions) => void;
close: (ev: CustomEvent) => void;
snapshot: (snapshot: WithdrawalBreakdownElementSnapshot) => void;
}
interface WithdrawalBreakdownElementOptions {
withdrawalId: string;
onReady?: (element: WithdrawalBreakdownElement) => void;
onClose?: (ev: CustomEvent) => void;
}
interface WithdrawalBreakdownElementSnapshot {
state: "loading" | "ready";
}
type WithdrawalBreakdownElement = WhopElement<WithdrawalBreakdownElementOptions, WithdrawalBreakdownElementEvents, WithdrawalBreakdownElementSnapshot>;
interface WithdrawalsElementEvents {
error: (error: unknown) => void;
ready: (element: WithdrawalsElement) => void;
optionsUpdated: (options: WithdrawalsElementOptions) => void;
snapshot: (snapshot: WithdrawalsElementSnapshot) => void;
showWithdrawalBreakdown: (ev: CustomEvent<{
withdrawalId: string;
}>) => void;
}
interface WithdrawalsElementOptions {
onReady?: (element: WithdrawalsElement) => void;
}
interface WithdrawalsElementSnapshot {
state: "loading" | "ready";
}
type WithdrawalsElement = WhopElement<WithdrawalsElementOptions, WithdrawalsElementEvents, WithdrawalsElementSnapshot>;
interface ModalContainer {
overlay: HTMLElement;
modal: HTMLElement;
content: HTMLElement;
mount: () => void;
close: () => void;
}
/** elements types */
type GetToken = (opts: {
abortSignal: AbortSignal;
}) => Promise<string | null> | string | null;
interface PayoutsSessionOptions {
/**
* The token to use for the session. If a function is provided, it will be called and awaited to get the token.
* When a function is provided, the token will be refreshed automatically before it expires.
*
* if a string is provided, it will be used as the token and not refreshed automatically. However you can update the token at runtime by
* calling `updateOptions` with a new token.
*
* @example
* ```ts
* // with a static token
* async function createPayoutsSession() {
* const token = await fetch("/api/token")
* .then(res => res.json())
* .then(data => data.token)
* return new PayoutsSession({ token })
* }
*
* // with a dynamic function
* function createPayoutsSession() {
* return new PayoutsSession({
* token: () => {
* return await fetch("/api/token")
* .then(res => res.json())
* .then(data => data.token)
* }
* })
* }
* ```
*/
token: string | Promise<string | null> | null | GetToken;
/**
* The currency to use in the Elements
*
* @default "USD"
*/
currency?: string;
/**
* The company ID to use in the Elements
*/
companyId: string;
/**
* URL to redirect to after identity verification is completed.
* This must be an absolute URL (e.g., "https://yourapp.com/callback").
* Localhost URLs will not work - use ngrok for local development.
*/
redirectUrl: string;
}
interface ExpandedPayoutsSessionOptions extends PayoutsSessionOptions {
}
interface PayoutsSessionEvents {
optionsUpdated: (options: ExpandedPayoutsSessionOptions) => void;
tokenRefreshed: (token: string) => void;
tokenRefreshError: (error: unknown) => void;
error: (error: unknown) => void;
}
type PayoutsSessionElements = {
"balance-element": [BalanceElementOptions, BalanceElement];
"withdraw-button-element": [
WithdrawButtonElementOptions,
WithdrawButtonElement
];
"withdraw-element": [WithdrawElementOptions, WithdrawElement];
"verify-element": [VerifyElementOptions, VerifyElement];
"withdrawals-element": [WithdrawalsElementOptions, WithdrawalsElement];
"withdrawal-breakdown-element": [
WithdrawalBreakdownElementOptions,
WithdrawalBreakdownElement
];
"change-account-country-element": [
ChangeAccountCountryElementOptions,
ChangeAccountCountryElement
];
"reset-account-element": [ResetAccountElementOptions, ResetAccountElement];
"regular-reserve-balance-breakdown-element": [
RegularReserveBalanceBreakdownElementOptions,
RegularReserveBalanceBreakdownElement
];
"bnpl-reserve-balance-breakdown-element": [
BnplReserveBalanceBreakdownElementOptions,
BnplReserveBalanceBreakdownElement
];
"total-balance-breakdown-element": [
TotalBalanceBreakdownElementOptions,
TotalBalanceBreakdownElement
];
"pending-balance-breakdown-element": [
PendingBalanceBreakdownElementOptions,
PendingBalanceBreakdownElement
];
};
interface PayoutsSession extends TypedEmitter<PayoutsSessionEvents> {
token: Promise<string | null>;
updateOptions: (options: Partial<PayoutsSessionOptions>) => void;
destroy: () => void;
createElement<T extends keyof PayoutsSessionElements>(type: T | {
type: T;
}, options: PayoutsSessionElements[T][0]): PayoutsSessionElements[T][1];
showWithdrawModal: <Force extends boolean = false>(options: WithdrawElementOptions | ((modal: ModalContainer) => WithdrawElementOptions), force?: Force) => Force extends true ? ModalContainer : ModalContainer | undefined;
showVerifyModal: <Force extends boolean = false>(options: VerifyElementOptions | ((modal: ModalContainer) => VerifyElementOptions), force?: Force) => Force extends true ? ModalContainer : ModalContainer | undefined;
showWithdrawalBreakdownModal: <Force extends boolean = false>(options: WithdrawalBreakdownElementOptions | ((modal: ModalContainer) => WithdrawalBreakdownElementOptions), force?: Force) => Force extends true ? ModalContainer : ModalContainer | undefined;
showChangeAccountCountryModal: <Force extends boolean = false>(options: ChangeAccountCountryElementOptions | ((modal: ModalContainer) => ChangeAccountCountryElementOptions), force?: Force) => Force extends true ? ModalContainer : ModalContainer | undefined;
showResetAccountModal: <Force extends boolean = false>(options: ResetAccountElementOptions | ((modal: ModalContainer) => ResetAccountElementOptions), force?: Force) => Force extends true ? ModalContainer : ModalContainer | undefined;
showTotalBalanceBreakdownModal: <Force extends boolean = false>(options: TotalBalanceBreakdownElementOptions | ((modal: ModalContainer) => TotalBalanceBreakdownElementOptions), force?: Force) => Force extends true ? ModalContainer : ModalContainer | undefined;
showPendingBalanceBreakdownModal: <Force extends boolean = false>(options: PendingBalanceBreakdownElementOptions | ((modal: ModalContainer) => PendingBalanceBreakdownElementOptions), force?: Force) => Force extends true ? ModalContainer : ModalContainer | undefined;
showRegularReserveBalanceBreakdownModal: <Force extends boolean = false>(options: RegularReserveBalanceBreakdownElementOptions | ((modal: ModalContainer) => RegularReserveBalanceBreakdownElementOptions), force?: Force) => Force extends true ? ModalContainer : ModalContainer | undefined;
showBnplReserveBalanceBreakdownModal: <Force extends boolean = false>(options: BnplReserveBalanceBreakdownElementOptions | ((modal: ModalContainer) => BnplReserveBalanceBreakdownElementOptions), force?: Force) => Force extends true ? ModalContainer : ModalContainer | undefined;
}
declare global {
interface Window {
WhopElements: WhopElementsConstructor;
}
}
type WhopElementsOptions = {
/**
* Customize the appearance of the Whop embedded Elements
*/
appearance?: Appearance;
/**
* This locale to use in the Elements
*
* @default "en"
*/
locale?: I18nSupportedLocale;
};
type WhopElementsConstructor = {
new (options?: WhopElementsOptions): WhopElements;
};
interface WhopElements extends TypedEmitter<WhopElementsEvents> {
createPayoutsSession: (options: PayoutsSessionOptions) => PayoutsSession;
updateOptions: (options: Partial<WhopElementsOptions>) => void;
options: WhopElementsOptions;
}
interface WhopElementsEvents {
optionsUpdated: (options: WhopElementsOptions) => void;
}
export type { Appearance, BalanceElement, BalanceElementOptions, BalanceElementSnapshot, BnplReserveBalanceBreakdownElement, BnplReserveBalanceBreakdownElementOptions, BnplReserveBalanceBreakdownElementSnapshot, ChangeAccountCountryElement, ChangeAccountCountryElementOptions, ChangeAccountCountryElementSnapshot, ExpandedPayoutsSessionOptions, GetToken, I18nSupportedLocale, PayoutsSession, PayoutsSessionEvents, PayoutsSessionOptions, PendingBalanceBreakdownElement, PendingBalanceBreakdownElementOptions, PendingBalanceBreakdownElementSnapshot, RegularReserveBalanceBreakdownElement, RegularReserveBalanceBreakdownElementOptions, RegularReserveBalanceBreakdownElementSnapshot, ResetAccountElement, ResetAccountElementOptions, ResetAccountElementSnapshot, TotalBalanceBreakdownElement, TotalBalanceBreakdownElementOptions, TotalBalanceBreakdownElementSnapshot, VerifyElement, VerifyElementOptions, VerifyElementSnapshot, WhopElement, WhopElements, WhopElementsConstructor, WhopElementsEvents, WhopElementsOptions, WithdrawButtonElement, WithdrawButtonElementOptions, WithdrawElement, WithdrawElementOptions, WithdrawElementSnapshot, WithdrawalBreakdownElement, WithdrawalBreakdownElementOptions, WithdrawalBreakdownElementSnapshot, WithdrawalsElement, WithdrawalsElementOptions, WithdrawalsElementSnapshot };