@getopenpay/openpay-js 0.1.14 → 0.1.15-alpha.09caa9f

package/dist/index.d.ts

@@ -1,6 +1,21 @@
 import { PaymentRequest as PaymentRequest_2 } from '@stripe/stripe-js';
+import { Subject } from 'rxjs';
 import { z } from 'zod';
 
+declare type AllCallbacks = {
+    onFocus?: (elementId: string, field: AllFieldNames) => void;
+    onBlur?: (elementId: string, field: AllFieldNames) => void;
+    onChange?: (elementId: string, field: AllFieldNames, errors?: string[]) => void;
+    onLoad?: (totalAmountAtoms?: number, currency?: string) => void;
+    onLoadError?: (message: string) => void;
+    onValidationError?: OnValidationError;
+    onCheckoutStarted?: OnCheckoutStarted;
+    onCheckoutSuccess?: OnCheckoutSuccess;
+    onSetupPaymentMethodSuccess?: OnSetupPaymentMethodSuccess;
+    onCheckoutError?: OnCheckoutError;
+    onPaymentRequestLoad?: (paymentRequests: PRStatuses) => void;
+};
+
 declare const AllFieldNames = z.union([FieldNameEnum, PrivateFieldNameEnum]);
 
 declare type AllFieldNames = z.infer<typeof AllFieldNames>;
@@ -34,17 +49,9 @@ declare const CheckoutPaymentMethod = z.object({
 
 declare type CheckoutPaymentMethod = z.infer<typeof CheckoutPaymentMethod>;
 
-export declare type Config = ElementsFormProps & {
-    _frameUrl?: URL;
-};
+export declare type Config = ElementsFormProps & AllCallbacks;
 
-declare class ConnectionManager {
-    private connections;
-    constructor();
-    addConnection(id: ElementType, connection: CdeConnection): void;
-    getConnection(): CdeConnection;
-    getAllConnections(): Map<ElementType, CdeConnection>;
-}
+declare type CurrentStatus<T> = InitialStatus | SuccessStatus<T> | ErrorStatus;
 
 declare type CustomInitParams = {
     stripeLink?: {
@@ -78,19 +85,8 @@ declare type ElementProps<PlaceholderType extends z.ZodTypeAny = z.ZodString> =
 export declare type ElementsFormProps = {
     className?: string;
     checkoutSecureToken: string;
-    onFocus?: (elementId: string, field: AllFieldNames) => void;
-    onBlur?: (elementId: string, field: AllFieldNames) => void;
-    onChange?: (elementId: string, field: AllFieldNames, errors?: string[]) => void;
-    onLoad?: (totalAmountAtoms?: number, currency?: string) => void;
-    onLoadError?: (message: string) => void;
-    onValidationError?: (field: AllFieldNames, errors: string[], elementId?: string) => void;
-    onCheckoutStarted?: () => void;
-    onCheckoutSuccess?: (invoiceUrls: string[], subscriptionIds: string[], customerId: string) => void;
-    onSetupPaymentMethodSuccess?: (paymentMethodId: string) => void;
-    onCheckoutError?: (message: string) => void;
     baseUrl?: string;
     formTarget?: string;
-    onPaymentRequestLoad?: (paymentRequests: Record<PaymentRequestProvider, PaymentRequestStatus>) => void;
     customInitParams?: CustomInitParams;
 };
 
@@ -124,6 +120,13 @@ declare enum ElementTypeEnum {
 
 declare type ElementTypeEnumValue = ElementTypeEnum[keyof ElementTypeEnum];
 
+declare type ErrorStatus = {
+    status: 'error';
+    isSuccess: false;
+    error: unknown; // Anything can be thrown, so we don't want to be strict here
+    errMsg: string;
+};
+
 /**
  * Expected input fields
  */
@@ -142,6 +145,41 @@ export declare enum FieldName {
     PROMOTION_CODE = 'promotionCode',
 }
 
+declare class FormCallbacks {
+    private _callbacks: AllCallbacks = {};
+
+    static fromObject = (obj: unknown) => {
+        const instance = new FormCallbacks();
+        instance.setCallbacks(ZodFormCallbacks.parse(obj));
+        return instance;
+    };
+
+    /**
+     * Sets ALL form callbacks. Note that all old callbacks are removed.
+     */
+    setCallbacks = (rawCallbacks: AllCallbacks) => {
+        // Making sure to reinitialize
+        this._callbacks = {};
+        Object.entries(rawCallbacks).forEach(([key, rawCallback]) => {
+            const safeCallback = makeCallbackSafe(key, rawCallback ?? (() => {}), err__);
+            // @ts-expect-error - trust the process
+            this._callbacks[key] = safeCallback;
+        });
+    };
+
+    /**
+     * Returns a read-only version of the callbacks object.
+     */
+    get get() {
+        return { ...this._callbacks };
+    }
+}
+
+declare type InitialStatus = {
+    status: 'initial';
+    isSuccess: false;
+};
+
 declare type InitOjsFlow<T extends InitOjsFlowResult> = (params: InitOjsFlowParams) => Promise<T>;
 
 declare type InitOjsFlowParams = {
@@ -154,13 +192,22 @@ declare type InitOjsFlowParams = {
     /**
      * Lifecycle callbacks for OJS flows.
      */
-    flowCallbacks: OjsFlowCallbacks;
+    formCallbacks: FormCallbacks;
 };
 
 declare type InitOjsFlowResult = {
     isAvailable: boolean;
 };
 
+declare type InitStripeLinkFlowResult =
+| {
+    isAvailable: true;
+    controller: StripeLinkController;
+}
+| {
+    isAvailable: false;
+};
+
 declare type InitStripePrFlowResult =
 | InitStripePrFlowSuccess
 | {
@@ -179,19 +226,6 @@ declare type InitStripePrFlowSuccess = {
     };
 };
 
-declare type Loadable<T> =
-| {
-    status: 'loading';
-}
-| {
-    status: 'loaded';
-    result: T;
-}
-| {
-    status: 'error';
-    message: string;
-};
-
 declare const LoadedEventPayload = z.object({
     type: z.literal(EventType.enum.LOADED),
     sessionId: RequiredString,
@@ -202,6 +236,95 @@ declare const LoadedEventPayload = z.object({
 
 declare type LoadedEventPayload = z.infer<typeof LoadedEventPayload>;
 
+declare class LoadedOncePublisher<T> {
+    private _current: CurrentStatus<T>;
+    private _subject: Subject<T>;
+
+    constructor() {
+        this._current = { status: 'initial', isSuccess: false };
+        this._subject = new Subject<T>();
+    }
+
+    set = (value: T) => {
+        if (this._current.status === 'success') {
+            throw new Error('LoadedOnce is already in success state');
+        }
+        this._current = { status: 'success', isSuccess: true, loadedValue: value };
+        this._subject.next(value);
+        this._subject.complete();
+    };
+
+    throw = (error: unknown, errMsg: string) => {
+        if (this._current.status === 'success') {
+            throw new Error('LoadedOnce is already in success state');
+        }
+        this._current = { status: 'error', isSuccess: false, error, errMsg };
+        this._subject.error(error);
+        // Do not complete the subject since a set() call might be made after this
+    };
+
+    get current() {
+        return this._current;
+    }
+
+    getValueIfLoadedElse = <T_ELSE>(valueIfNotLoaded: T_ELSE): T | T_ELSE => {
+        if (this._current.status === 'success') return this._current.loadedValue;
+        return valueIfNotLoaded;
+    };
+
+    subscribe = (fn: (value: Exclude<CurrentStatus<T>, InitialStatus>) => void) => {
+        if (this._current.status === 'success') {
+            fn(this._current);
+            return;
+        }
+
+        if (this._current.status === 'error') {
+            fn(this._current);
+            // Do not return, as we will still have the fn subscribed to the subject
+        }
+
+        const subscription = this._subject.subscribe({
+            next: () => {
+                if (this._current.status !== 'success') {
+                    throw new Error('Invalid state (next): please make sure to update _current before the subject');
+                }
+                fn(this._current);
+                subscription.unsubscribe();
+            },
+            error: () => {
+                if (this._current.status !== 'error') {
+                    throw new Error('Invalid state (error): please make sure to update _current before the subject');
+                }
+                fn(this._current);
+                // Do not unsubscribe
+            },
+        });
+    };
+
+    waitForLoad = (timeoutConfig: { timeoutSec: number; timeoutErrMsg: string }): Promise<T> => {
+        if (this._current.status === 'success') return Promise.resolve(this._current.loadedValue);
+        if (this._current.status === 'error') return Promise.reject(this._current.error);
+        if (this._current.status !== 'initial') assertNever(this._current);
+
+        const timeoutParams = {
+            first: timeoutConfig.timeoutSec * 1000,
+            with: () => throwError(() => new Error(timeoutConfig.timeoutErrMsg)),
+        };
+
+        /*
+        * Note: lastValueFrom converts the observable to a promise (https://rxjs.dev/api/index/function/lastValueFrom)
+        *
+        * We use lastValueFrom to wait for the observable to close successfully before resolving the Promise.
+        * To avoid hanging threads forever, we use timeoutParams to throw an error if it takes too long.
+        * firstValueFrom is theoretically also usable, but it might result in bugs
+        * if we do decide to emit more values in this Observable/Subject in the future.
+        *
+        * For more details, see: https://rxjs.dev/deprecations/to-promise
+        */
+        return lastValueFrom(this._subject.pipe(timeout(timeoutParams)));
+    };
+}
+
 declare type OjsContext = {
     /**
      * The form element for the OJS form (non-CDE form).
@@ -221,7 +344,7 @@ declare type OjsContext = {
     /**
      * All the CDE connection objects (one for each CDE iframe).
      */
-    cdeConnections: Map<ElementType, CdeConnection>;
+    anyCdeConnection: CdeConnection;
 
     /**
      * Custom init params for init flows.
@@ -239,14 +362,6 @@ declare type OjsFlow<T_PARAMS = unknown, T_INIT_RESULT extends InitOjsFlowResult
     run: RunOjsFlow<T_PARAMS, T_INIT_RESULT>;
 };
 
-declare type OjsFlowCallbacks = {
-    onCheckoutError: OnCheckoutError;
-    onCheckoutStarted: OnCheckoutStarted;
-    onCheckoutSuccess: OnCheckoutSuccess;
-    onSetupPaymentMethodSuccess: OnSetupPaymentMethodSuccess;
-    onValidationError: OnValidationError;
-};
-
 declare type OjsFlowParams<T_PARAMS = void, T_INIT_RESULT = void> = {
     /**
      * Contains the context where OJS is run.
@@ -265,9 +380,9 @@ declare type OjsFlowParams<T_PARAMS = void, T_INIT_RESULT = void> = {
     nonCdeFormInputs: Record<string, unknown>;
 
     /**
-     * Lifecycle callbacks for OJS flows.
+     * Form callbacks. Take note that these can be dynamically updated (but the object remains)
      */
-    flowCallbacks: OjsFlowCallbacks;
+    formCallbacks: FormCallbacks;
 
     /**
      * Custom parameters for the flow.
@@ -285,6 +400,7 @@ declare const OjsFlows = {
 
     // Common
     commonCC: {
+        init: async () => {},
         run: runCommonCcFlow,
     },
 
@@ -314,53 +430,72 @@ declare type OnSetupPaymentMethodSuccess = (paymentMethodId: string) => void;
 declare type OnValidationError = (field: AllFieldNames, errors: string[], elementId?: string) => void;
 
 export declare class OpenPayForm {
-    config: Config;
-    formId: string;
-    formTarget: string;
-    checkoutFired: boolean;
-    ojsVersion: string;
-    ojsReleaseVersion: string;
-    private referer;
+    readonly config: Config;
+    readonly formId: string;
+    readonly formTarget: string;
+    readonly ojsVersion: string;
+    readonly ojsReleaseVersion: string;
+    readonly formProperties: {
+        height: string;
+    };
+    readonly referrer: string;
+    readonly baseUrl: string;
+    readonly formCallbacks: FormCallbacks;
+    private registeredElements;
     private eventHandler;
-    private formProperties;
     private connectionManager;
-    private ojsFlowsInitialization;
-    private cdeLoadedPayload;
-    private elements;
     static ojsFlows: typeof OjsFlows;
+    private readonly cdeLoadEvent;
+    private readonly anyCdeConn;
+    private readonly context;
+    readonly initFlows: {
+        readonly stripePR: {
+            publisher: LoadedOncePublisher<InitStripePrFlowResult>;
+            initialize: (initParams: InitOjsFlowParams) => Promise<void>;
+        };
+        readonly stripeLink: {
+            publisher: LoadedOncePublisher<InitStripeLinkFlowResult>;
+            initialize: (initParams: InitOjsFlowParams) => Promise<void>;
+        };
+    };
     constructor(config: Config);
+    /**
+     * Starts the form initialization process
+     */
+    private startFormInit;
     /**
      * Assign the instance to the window as a singleton
-     * @param form - The OpenPayForm instance
      */
-    static assignAsSingleton(form: OpenPayForm): void;
+    private static assignAsSingleton;
     /**
      * Get the singleton instance of OpenPayForm
-     * @returns The OpenPayForm instance
      */
-    static getInstance(): OpenPayForm | null;
-    getConnectionManager(): ConnectionManager;
-    setFormHeight(height: string): void;
-    tryInitOjsFlows: () => void;
+    static getInstance: () => OpenPayForm | null;
+    get checkoutSecureToken(): string;
+    setFormHeight: (height: string) => void;
     onCdeLoaded: (payload: LoadedEventPayload) => void;
-    onStripePRStatusChange: (initStatus: Loadable<InitStripePrFlowResult>) => void;
-    createElement(elementValue: ElementTypeEnumValue, options?: ElementProps): {
-        type: ElementTypeEnum;
-        node: HTMLIFrameElement;
-        mount: (selector: string) => HTMLIFrameElement | undefined;
-    };
+    onCdeLoadError: (errMsg: string) => void;
+    createElement: (elementValue: ElementTypeEnumValue, options?: ElementProps) => RegisteredElement;
+    registerIframe: (type: ElementTypeEnum, frame: HTMLIFrameElement) => RegisteredElement;
     private buildQueryString;
     private connectToElement;
     private getFormDiv;
-    private createOjsFlowContext;
-    private createOjsFlowCallbacks;
-    submit(): void;
-    submitPaymentRequest: (provider: PaymentRequestProvider, initResult: InitStripePrFlowSuccess, params?: PaymentRequestStartParams) => Promise<void>;
-    onPaymentRequestError(errMsg: string): void;
-    destroy(): void;
+    /**
+     * Builds the OJS context object. Take note that this is a pure function.
+     */
+    private static buildOjsFlowContext;
+    /**
+     * Runs the common credit card flow
+     */
+    submitCard: () => void;
+    /**
+     * Alias for submitCard
+     */
+    submit: () => void;
+    destroy: () => void;
 }
 
-declare const PaymentRequestProvider: z.ZodEnum<["apple_pay", "google_pay"]>;
+declare const PaymentRequestProvider = z.enum(['apple_pay', 'google_pay']);
 
 declare type PaymentRequestProvider = z.infer<typeof PaymentRequestProvider>;
 
@@ -377,8 +512,28 @@ declare type PaymentRequestStatus = {
     startFlow: (params?: PaymentRequestStartParams) => Promise<void>;
 };
 
+declare type PRStatuses = Record<PaymentRequestProvider, PaymentRequestStatus>;
+
+declare type RegisteredElement = {
+    type: ElementType;
+    node: HTMLIFrameElement;
+    mount: (selector: string) => void;
+};
+
 declare type RunOjsFlow<T_PARAMS = undefined, T_INIT_RESULT = undefined> = (
 params: OjsFlowParams<T_PARAMS, T_INIT_RESULT>
 ) => Promise<void>;
 
+declare type StripeLinkController = {
+    mountButton: () => void;
+    dismountButton: () => void;
+    waitForButtonToMount: () => Promise<HTMLElement>;
+};
+
+declare type SuccessStatus<T> = {
+    status: 'success';
+    isSuccess: true;
+    loadedValue: T;
+};
+
 export { }