feat(PAYMENTS-15270): form - activate & getStatus

src/core/status/form-status.enum.ts

@@ -0,0 +1,5 @@
+export enum FormStatus {
+  undefined = 'undefined',
+  pending = 'pending',
+  active = 'active',
+}

src/features/headless-checkout/headless-checkout.ts

@@ -25,6 +25,7 @@ import { getUserBalanceHandler } from './post-messages-handlers/get-user-balance
 import { nextActionHandler } from './post-messages-handlers/next-action.handler';
 import { getPaymentStatusHandler } from './post-messages-handlers/get-payment-status/get-payment-status.handler';
 import { headlessCheckoutAppUrl } from './environment';
+import { FormStatus } from '../../core/status/form-status.enum';
 
 @singleton()
 export class HeadlessCheckout {
@@ -62,16 +63,22 @@ export class HeadlessCheckout {
      * @returns {Form} form details
      */
     init: async (configuration: FormConfiguration): Promise<Form> => {
+      this.formStatus = FormStatus.pending;
+
       const msg: Message = {
         name: EventName.initForm,
         data: {
           configuration,
         },
       };
 
-      return this.postMessagesClient.send<Form>(msg, (message) =>
+      const form = (await this.postMessagesClient.send<Form>(msg, (message) =>
         initFormHandler(message, () => (this.formSpy.formWasInit = true))
-      ) as Promise<Form>;
+      )) as unknown as Promise<Form>;
+
+      this.formStatus = FormStatus.active;
+
+      return form;
     },
 
     onNextAction: (callbackFn: (nextAction: NextAction) => void): void => {
@@ -86,28 +93,20 @@ export class HeadlessCheckout {
       );
     },
 
-    getStatus: async (): Promise<Status> => {
-      const msg: Message = {
-        name: EventName.getPaymentStatus,
-      };
-
-      const status = await this.postMessagesClient.send<Status>(
-        msg,
-        (message) => getPaymentStatusHandler(message)
-      );
+    getStatus: (): FormStatus => {
+      if (this.formSpy.formWasInit) return FormStatus.active;
 
-      if (!status) {
-        return {
-          statusState: StatusEnum.unknown,
-          statusMessage: 'Unknown status',
-          group: 'unknown',
-        };
-      }
+      return this.formStatus === FormStatus.pending
+        ? FormStatus.pending
+        : FormStatus.undefined;
+    },
 
-      return status;
+    activate: (): void => {
+      this.formStatus = FormStatus.active;
     },
   };
 
+  private formStatus: FormStatus = FormStatus.undefined;
   private isWebView?: boolean;
   private coreIframe!: HTMLIFrameElement;
   private errorsSubscription?: () => void;
@@ -228,6 +227,26 @@ export class HeadlessCheckout {
     ) as Promise<UserBalance>;
   }
 
+  public async getStatus(): Promise<Status> {
+    const msg: Message = {
+      name: EventName.getPaymentStatus,
+    };
+
+    const status = await this.postMessagesClient.send<Status>(msg, (message) =>
+      getPaymentStatusHandler(message)
+    );
+
+    if (!status) {
+      return {
+        statusState: StatusEnum.unknown,
+        statusMessage: 'Unknown status',
+        group: 'unknown',
+      };
+    }
+
+    return status;
+  }
+
   private async setupCoreIframe(): Promise<void> {
     this.coreIframe = this.window.document.createElement('iframe');
     this.coreIframe.width = '0px';