Merge pull request #48 from commercetools/ddeliziact/enabler-refactoring

feat(enabler): splitting creation of the component into 2 steps via builder
commercetools · Mar 12, 2024 · e0cf38a · e0cf38a
2 parents c708a58 + 573c14b
commit e0cf38a
Show file tree

Hide file tree

Showing 9 changed files with 318 additions and 204 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,28 +17,45 @@ import { BaseComponent, BaseOptions } from '../base';
  * https://docs.adyen.com/payment-methods/cards/web-component/
  */
 
+export class CardBuilder extends AdyenBaseComponentBuilder {
 
-export class Card extends BaseComponent {
+  constructor(baseOptions: BaseOptions) {
+    super(PaymentMethod.card, baseOptions);
+  }
+
+  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(baseOptions: BaseOptions, componentOptions: ComponentOptions) {
-    super(PaymentMethod.card, baseOptions, componentOptions);
+  constructor(
+    paymentMethod: PaymentMethod,
+    adyenCheckout: typeof Core,
+    componentOptions: ComponentOptions
+  ) {
+    super(paymentMethod, adyenCheckout, componentOptions);
   }
 
-  protected _create() {
+  init() {
     const that = this;
-    return this.adyenCheckout.create(this.paymentMethod, {
+    this.component = this.adyenCheckout.create(this.paymentMethod, {
       onFieldValid : function(data) {
         const { endDigits, fieldType } = data;
         if (endDigits && fieldType === 'encryptedCardNumber') {
           that.endDigits = endDigits;
         }
       },
-      ...this.config,
+      hasHolderName: true,
+      holderNameRequired: true,
+      ...this.componentOptions,
     });
   }
 
-
   showValidation() {
     this.component.showValidation();
   }
@@ -43,8 +69,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,39 @@
-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 {
+    const idealComponent = new IdealComponent(this.paymentMethod, this.adyenCheckout, config);
+    idealComponent.init();
+    return idealComponent;
+  }
+}
+
+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
diff --git a/enabler/src/components/payment-methods/paypal.ts b/enabler/src/components/payment-methods/paypal.ts
@@ -1,27 +1,50 @@
-import { BaseComponent, BaseOptions } from '../base';
-import { ComponentOptions, PaymentMethod } from '../../payment-enabler/payment-enabler';
+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";
 
 /**
  * Paypal component
  *
  * Configuration options:
  * https://docs.adyen.com/payment-methods/paypal/web-component/
  */
-export class Paypal extends BaseComponent {
-  constructor(baseOptions: BaseOptions, componentOptions: ComponentOptions) {
-    // TODO: 
-
-    /*
-
-    Hide Venmo
-
-      If you and your shopper are both located in the US, Venmo is shown in the PayPal Component by default. To hide Venmo in the PayPal Component, set blockPayPalVenmoButton to true.
+export class PaypalBuilder extends AdyenBaseComponentBuilder {
+  public componentHasSubmit = false;
+
+  constructor(baseOptions: BaseOptions) {
+    super(PaymentMethod.paypal, baseOptions);
+  }
 
-      Use the create method of your AdyenCheckout instance, in this case checkout, to create an instance of the Component. Add the configuration object if you created one.
+  build(config: ComponentOptions): PaymentComponent {
+    const paypalComponent = new PaypalComponent(this.paymentMethod, this.adyenCheckout, config);
+    paypalComponent.init();
+    return paypalComponent;
+  }
+}
 
+export class PaypalComponent extends DefaultAdyenComponent {
+  constructor(
+    paymentMethod: PaymentMethod,
+    adyenCheckout: typeof Core,
+    componentOptions: ComponentOptions
+  ) {
+    super(paymentMethod, adyenCheckout, componentOptions);
+  }
 
-      const paypalComponent = checkout.create('paypal', paypalConfiguration).mount('#paypal-container');
-      */
-    super(PaymentMethod.paypal, baseOptions, componentOptions);
+  init() {
+    this.component = this.adyenCheckout.create(this.paymentMethod, {
+      ...this.componentOptions,
+      blockPayPalCreditButton: true,
+      blockPayPalPayLaterButton: true,
+      blockPayPalVenmoButton: true,
+    });
   }
 }