feat(enabler): splitting creation of the component into 2 steps via b…

…uilder
commercetools · Mar 11, 2024 · 223cebb · 223cebb
1 parent c708a58
commit 223cebb
Show file tree

Hide file tree

Showing 9 changed files with 241 additions and 137 deletions.
diff --git a/enabler/src/components/base.ts b/enabler/src/components/base.ts
@@ -1,58 +1,87 @@
-import Core from '@adyen/adyen-web/dist/types/core/core';
-import { ComponentOptions, PaymentComponent, PaymentMethod } from '../payment-enabler/payment-enabler';
-import ApplePay from '@adyen/adyen-web/dist/types/components/ApplePay';
-import GooglePay from '@adyen/adyen-web/dist/types/components/GooglePay';
-import RedirectElement from '@adyen/adyen-web/dist/types/components/Redirect/Redirect';
+import ApplePay from "@adyen/adyen-web/dist/types/components/ApplePay";
+import GooglePay from "@adyen/adyen-web/dist/types/components/GooglePay";
+import RedirectElement from "@adyen/adyen-web/dist/types/components/Redirect/Redirect";
+import Core from "@adyen/adyen-web/dist/types/core/core";
+import {
+  ComponentOptions,
+  PaymentComponent,
+  PaymentComponentBuilder,
+  PaymentMethod,
+} from "../payment-enabler/payment-enabler";
 
 export type BaseOptions = {
   adyenCheckout: typeof Core;
-}
+};
 
 /**
  * Base Web Component
  */
-export abstract class BaseComponent implements PaymentComponent {
+export abstract class AdyenBaseComponentBuilder
+  implements PaymentComponentBuilder
+{
+  public componentHasSubmit = true;
+
   protected paymentMethod: PaymentMethod;
   protected adyenCheckout: typeof Core;
-  protected config: ComponentOptions['config'];
-  protected component: typeof ApplePay | typeof GooglePay | typeof RedirectElement;
 
-  constructor(paymentMethod: PaymentMethod, baseOptions: BaseOptions, componentOptions: ComponentOptions) {
+  constructor(paymentMethod: PaymentMethod, baseOptions: BaseOptions) {
     this.paymentMethod = paymentMethod;
     this.adyenCheckout = baseOptions.adyenCheckout;
-    this.config = componentOptions.config;
-    this.component = this._create();
   }
 
-  protected _create(): typeof ApplePay | typeof GooglePay | typeof RedirectElement {
-    return this.adyenCheckout.create(this.paymentMethod, this.config);
+  build(config: ComponentOptions): PaymentComponent {
+    const component = new DefaultAdyenComponent(
+      this.paymentMethod,
+      this.adyenCheckout,
+      config
+    );
+    component.init();
+    return component;
   }
+}
 
-  submit()  {
+export class DefaultAdyenComponent implements PaymentComponent {
+  protected component:
+    | typeof ApplePay
+    | typeof GooglePay
+    | typeof RedirectElement;
+  protected paymentMethod: PaymentMethod;
+  protected adyenCheckout: typeof Core;
+  protected componentOptions: ComponentOptions;
+
+  constructor(
+    paymentMethod: PaymentMethod,
+    adyenCheckout: typeof Core,
+    componentOptions: ComponentOptions
+  ) {
+    this.paymentMethod = paymentMethod;
+    this.adyenCheckout = adyenCheckout;
+    this.componentOptions = componentOptions;
+  }
+  // This is an internal method
+  init() {
+    this.component = this.adyenCheckout.create(
+      this.paymentMethod,
+      this.componentOptions
+    );
+  }
+
+  submit() {
     this.component.submit();
-  };
+  }
 
   mount(selector: string) {
-    if ('isAvailable' in this.component) {
-      this.component.isAvailable()
+    if ("isAvailable" in this.component) {
+      this.component
+        .isAvailable()
         .then(() => {
           this.component.mount(selector);
         })
         .catch((e: unknown) => {
-          console.log(`${this.paymentMethod } is not available`, e);
+          console.log(`${this.paymentMethod} is not available`, e);
         });
     } else {
       this.component.mount(selector);
     }
   }
-
-  showValidation?(): void;
-  isValid?(): boolean;
-  getState?(): {
-    card?: {
-      endDigits?: string;
-      brand?: string;
-      expiryDate? : string;
-    }
-  };
 }
diff --git a/enabler/src/components/payment-methods/applepay.ts b/enabler/src/components/payment-methods/applepay.ts
@@ -1,14 +1,15 @@
-import { BaseComponent, BaseOptions } from '../base';
-import { ComponentOptions, PaymentMethod } from '../../payment-enabler/payment-enabler';
+import { PaymentMethod } from "../../payment-enabler/payment-enabler";
+import { AdyenBaseComponentBuilder, BaseOptions } from "../base";
 
 /**
  * Apple pay component
  *
  * Configuration options:
  * https://docs.adyen.com/payment-methods/apple-pay/web-component/
  */
-export class Applepay extends BaseComponent {
-  constructor(baseOptions: BaseOptions, componentOptions: ComponentOptions) {
-    super(PaymentMethod.applepay, baseOptions, componentOptions);
+export class ApplepayBuilder extends AdyenBaseComponentBuilder {
+  public componentHasSubmit = false;
+  constructor(baseOptions: BaseOptions) {
+    super(PaymentMethod.applepay, baseOptions);
   }
 }
diff --git a/enabler/src/components/payment-methods/card.ts b/enabler/src/components/payment-methods/card.ts
@@ -1,5 +1,14 @@
-import { ComponentOptions, PaymentMethod } from '../../payment-enabler/payment-enabler';
-import { BaseComponent, BaseOptions } from '../base';
+import Core from "@adyen/adyen-web/dist/types/core/core";
+import {
+  ComponentOptions,
+  PaymentComponent,
+  PaymentMethod,
+} from "../../payment-enabler/payment-enabler";
+import {
+  AdyenBaseComponentBuilder,
+  BaseOptions,
+  DefaultAdyenComponent,
+} from "../base";
 
 /**
  * Credit card component
@@ -8,27 +17,29 @@ import { BaseComponent, BaseOptions } from '../base';
  * https://docs.adyen.com/payment-methods/cards/web-component/
  */
 
+export class CardBuilder extends AdyenBaseComponentBuilder {
 
-export class Card extends BaseComponent {
-  private endDigits: string;
-
-  constructor(baseOptions: BaseOptions, componentOptions: ComponentOptions) {
-    super(PaymentMethod.card, baseOptions, componentOptions);
+  constructor(baseOptions: BaseOptions) {
+    super(PaymentMethod.card, baseOptions);
   }
 
-  protected _create() {
-    const that = this;
-    return this.adyenCheckout.create(this.paymentMethod, {
-      onFieldValid : function(data) {
-        const { endDigits, fieldType } = data;
-        if (endDigits && fieldType === 'encryptedCardNumber') {
-          that.endDigits = endDigits;
-        }
-      },
-      ...this.config,
-    });
+  build(config: ComponentOptions): PaymentComponent {
+    const cardComponent = new CardComponent(this.paymentMethod, this.adyenCheckout, config);
+    cardComponent.init();
+    return cardComponent;
   }
+}
 
+export class CardComponent extends DefaultAdyenComponent {
+  private endDigits: string;
+
+  constructor(
+    paymentMethod: PaymentMethod,
+    adyenCheckout: typeof Core,
+    componentOptions: ComponentOptions
+  ) {
+    super(paymentMethod, adyenCheckout, componentOptions);
+  }
 
   showValidation() {
     this.component.showValidation();
@@ -43,8 +54,7 @@ export class Card extends BaseComponent {
       card: {
         endDigits: this.endDigits,
         brand: this.component.state.selectedBrandValue,
-      }
+      },
     };
   }
-
 }
diff --git a/enabler/src/components/payment-methods/googlepay.ts b/enabler/src/components/payment-methods/googlepay.ts
@@ -1,14 +1,16 @@
-import { BaseComponent, BaseOptions } from '../base';
-import { ComponentOptions, PaymentMethod } from '../../payment-enabler/payment-enabler';
+import { PaymentMethod } from '../../payment-enabler/payment-enabler';
+import { AdyenBaseComponentBuilder, BaseOptions } from '../base';
 
 /**
  * Google pay component
  *
  * Configuration options:
  * https://docs.adyen.com/payment-methods/google-pay/web-component/
  */
-export class Googlepay extends BaseComponent {
-  constructor(baseOptions: BaseOptions, componentOptions: ComponentOptions) {
-    super(PaymentMethod.googlepay, baseOptions, componentOptions);
+export class GooglepayBuilder extends AdyenBaseComponentBuilder {
+  public componentHasSubmit = false;
+
+  constructor(baseOptions: BaseOptions) {
+    super(PaymentMethod.googlepay, baseOptions);
   }
 }
diff --git a/enabler/src/components/payment-methods/ideal.ts b/enabler/src/components/payment-methods/ideal.ts
@@ -1,14 +1,37 @@
-import { ComponentOptions, PaymentMethod } from '../../payment-enabler/payment-enabler';
-import { BaseComponent, BaseOptions } from '../base';
+import Core from "@adyen/adyen-web/dist/types/core/core";
+import {
+  ComponentOptions,
+  PaymentComponent,
+  PaymentMethod,
+} from "../../payment-enabler/payment-enabler";
+import {
+  AdyenBaseComponentBuilder,
+  DefaultAdyenComponent,
+  BaseOptions,
+} from "../base";
 /**
  * Ideal component
  *
  * Configuration options:
  * https://docs.adyen.com/payment-methods/ideal/web-component/
  */
-export class Ideal extends BaseComponent {
-  constructor(baseOptions: BaseOptions, componentOptions: ComponentOptions) {
-    super(PaymentMethod.ideal, baseOptions, componentOptions);
+export class IdealBuilder extends AdyenBaseComponentBuilder {
+  constructor(baseOptions: BaseOptions) {
+    super(PaymentMethod.ideal, baseOptions);
+  }
+
+  build(config: ComponentOptions): PaymentComponent {
+    return new IdealComponent(this.paymentMethod, this.adyenCheckout, config);
+  }
+}
+
+export class IdealComponent extends DefaultAdyenComponent {
+  constructor(
+    paymentMethod: PaymentMethod,
+    adyenCheckout: typeof Core,
+    componentOptions: ComponentOptions
+  ) {
+    super(paymentMethod, adyenCheckout, componentOptions);
   }
 
   showValidation() {

diff --git a/enabler/src/components/payment-methods/klarna.ts b/enabler/src/components/payment-methods/klarna.ts
@@ -1,17 +1,17 @@
-import { BaseComponent, BaseOptions } from '../base';
-import { ComponentOptions, PaymentMethod } from '../../payment-enabler/payment-enabler';
+import { PaymentMethod } from '../../payment-enabler/payment-enabler';
+import { AdyenBaseComponentBuilder, BaseOptions } from '../base';
 
 /**
  * Klarna component
  *
  * Configuration options:
  * https://docs.adyen.com/payment-methods/klarna/web-component/
  */
-export class Klarna extends BaseComponent {
-  constructor(baseOptions: BaseOptions, componentOptions: ComponentOptions) {
+export class KlarnaBuilder extends AdyenBaseComponentBuilder {
+  constructor(baseOptions: BaseOptions) {
     /* todo:
       pass locale
     */
-    super(PaymentMethod.klarna, baseOptions, componentOptions);
+    super(PaymentMethod.klarna, baseOptions);
   }
 }
diff --git a/enabler/src/components/payment-methods/paypal.ts b/enabler/src/components/payment-methods/paypal.ts
@@ -1,15 +1,19 @@
-import { BaseComponent, BaseOptions } from '../base';
-import { ComponentOptions, PaymentMethod } from '../../payment-enabler/payment-enabler';
+import {
+  PaymentMethod
+} from "../../payment-enabler/payment-enabler";
+import { AdyenBaseComponentBuilder, BaseOptions } from "../base";
 
 /**
  * Paypal component
  *
  * Configuration options:
  * https://docs.adyen.com/payment-methods/paypal/web-component/
  */
-export class Paypal extends BaseComponent {
-  constructor(baseOptions: BaseOptions, componentOptions: ComponentOptions) {
-    // TODO: 
+export class PaypalBuilder extends AdyenBaseComponentBuilder {
+  public componentHasSubmit = false;
+
+  constructor(baseOptions: BaseOptions) {
+    // TODO:
 
     /*
 
@@ -22,6 +26,6 @@ export class Paypal extends BaseComponent {
 
       const paypalComponent = checkout.create('paypal', paypalConfiguration).mount('#paypal-container');
       */
-    super(PaymentMethod.paypal, baseOptions, componentOptions);
+    super(PaymentMethod.paypal, baseOptions);
   }
 }