Merge pull request #43 from xsolla/PAYMENTS-17002_flow-updates

fix(status): listening flow updates without form

src/features/headless-checkout/web-components/status/status.component.ts

@@ -11,13 +11,10 @@ import { HeadlessCheckout } from '../../headless-checkout';
 import { getStatusComponentTemplate } from './status.component.template';
 import { StatusComponentConfig } from './status.component.config.interface';
 import { HeadlessCheckoutSpy } from '../../../../core/spy/headless-checkout-spy/headless-checkout-spy';
-import { FormSpy } from '../../../../core/spy/form-spy/form-spy';
 
 export class StatusComponent extends WebComponentAbstract {
   private readonly headlessCheckout: HeadlessCheckout;
   private readonly headlessCheckoutSpy: HeadlessCheckoutSpy;
-  private readonly formSpy: FormSpy;
-
   private statusConfig: StatusComponentConfig | null = null;
   private prevStatusUpdate: StatusUpdatedAction | null = null;
 
@@ -26,7 +23,6 @@ export class StatusComponent extends WebComponentAbstract {
 
     this.headlessCheckout = container.resolve(HeadlessCheckout);
     this.headlessCheckoutSpy = container.resolve(HeadlessCheckoutSpy);
-    this.formSpy = container.resolve(FormSpy);
   }
 
   protected connectedCallback(): void {
@@ -47,11 +43,6 @@ export class StatusComponent extends WebComponentAbstract {
   }
 
   private listenFormInit(): void {
-    if (!this.formSpy.formWasInit) {
-      this.formSpy.listenFormInit(() => this.listenFormInit());
-      return;
-    }
-
     this.headlessCheckout.form.onNextAction((nextAction) => {
       if (
         isStatusUpdatedAction(nextAction) &&
@@ -65,7 +56,7 @@ export class StatusComponent extends WebComponentAbstract {
   }
 
   private statusLoadedHandler(
-    statusConfig: StatusComponentConfig | null
+    statusConfig: StatusComponentConfig | null,
   ): void {
     this.statusConfig = statusConfig;
 

src/features/headless-checkout/web-components/submit-button/submit-button-attributes.enum.ts

@@ -0,0 +1,4 @@
+export enum SubmitButtonAttributes {
+  text = 'text',
+  isLoading = 'isLoading',
+}

src/features/headless-checkout/web-components/submit-button/submit-button.component.spec.ts

@@ -34,6 +34,7 @@ describe('SubmitButtonComponent', () => {
     headlessCheckout = {
       form: {
         onNextAction: noopStub,
+        onFieldsStatusChange: noopStub,
       },
     } as unknown as HeadlessCheckout;
 

src/features/headless-checkout/web-components/submit-button/submit-button.component.ts

@@ -1,11 +1,15 @@
-import { WebComponentAbstract } from '../../../../core/web-components/web-component.abstract';
 import { container } from 'tsyringe';
+import { WebComponentAbstract } from '../../../../core/web-components/web-component.abstract';
 import { PostMessagesClient } from '../../../../core/post-messages-client/post-messages-client';
-import { submitButtonHandler } from './submit-button.handler';
 import { EventName } from '../../../../core/event-name.enum';
+import { HeadlessCheckout } from '../../headless-checkout';
+import { SubmitButtonAttributes } from './submit-button-attributes.enum';
+import { getSubmitButtonTemplate } from './submit-button.template';
+import { submitButtonHandler } from './submit-button.handler';
 
 export class SubmitButtonComponent extends WebComponentAbstract {
   private readonly postMessagesClient: PostMessagesClient;
+  private readonly headlessCheckout: HeadlessCheckout;
 
   private get elementRef(): HTMLButtonElement {
     return this.querySelector('button')! as HTMLButtonElement;
@@ -14,22 +18,57 @@ export class SubmitButtonComponent extends WebComponentAbstract {
   public constructor() {
     super();
     this.postMessagesClient = container.resolve(PostMessagesClient);
+    this.headlessCheckout = container.resolve(HeadlessCheckout);
+  }
+
+  public static get observedAttributes(): string[] {
+    return [SubmitButtonAttributes.isLoading, SubmitButtonAttributes.text];
   }
 
   protected connectedCallback(): void {
     super.render();
 
     this.addEventListenerToElement(this.elementRef, 'click', () => {
+      if (this.getAttribute(SubmitButtonAttributes.isLoading)) {
+        return;
+      }
+
+      this.setAttribute(SubmitButtonAttributes.isLoading, 'true');
+
+      let isCheckedFieldStatuses = false;
+      this.headlessCheckout.form.onFieldsStatusChange((fieldsStatus) => {
+        if (isCheckedFieldStatuses) {
+          return;
+        }
+
+        isCheckedFieldStatuses = true;
+
+        const isInvalidForm = Object.entries(fieldsStatus).some((fields) => {
+          const [, value] = fields;
+
+          return value.validationStatus === 'INVALID';
+        });
+
+        if (isInvalidForm) {
+          this.removeAttribute(SubmitButtonAttributes.isLoading);
+
+          super.render();
+        }
+      });
+
       void this.postMessagesClient.send(
         { name: EventName.submitForm },
-        submitButtonHandler
+        submitButtonHandler,
       );
+
+      super.render();
     });
   }
 
   protected getHtml(): string {
-    return `
-    <button>${this.getAttribute('text')!}</button>
-    `;
+    const text = this.getAttribute(SubmitButtonAttributes.text) ?? '';
+    const isLoading = !!this.getAttribute(SubmitButtonAttributes.isLoading);
+
+    return getSubmitButtonTemplate(text, isLoading);
   }
 }

src/features/headless-checkout/web-components/submit-button/submit-button.template.ts

@@ -0,0 +1,16 @@
+const getLoaderTemplate = (): string => {
+  return `
+    <div class="loader"></div>
+   `;
+};
+
+export const getSubmitButtonTemplate = (
+  text: string,
+  isLoading: boolean,
+): string => {
+  return `
+    <button>
+      ${isLoading ? getLoaderTemplate() : text}
+    </button>
+  `;
+};