From b164684addf8da664b33a5f0982d40103b759ee8 Mon Sep 17 00:00:00 2001
From: "Juan J. Campos" <juan.campos@commercetools.com>
Date: Thu, 8 Feb 2024 18:20:58 +0100
Subject: [PATCH] PR changes

---
 enabler/.env.template                         |  2 +-
 enabler/{public => dev-utils}/session.js      |  8 +-
 enabler/index.html                            | 92 +++++++++++++------
 enabler/package.json                          |  1 -
 enabler/public/README.txt                     |  1 +
 enabler/public/vite.svg                       |  1 -
 enabler/src/components/base.ts                | 31 ++++---
 .../components/payment-methods/card/card.ts   | 15 +--
 enabler/src/main.ts                           |  4 +-
 .../payment-connector/mockPaymentConnector.ts | 75 ---------------
 .../src/payment-connector/paymentConnector.ts | 21 -----
 .../src/payment-enabler/mockPaymentEnabler.ts | 57 ++++++++++++
 enabler/src/payment-enabler/paymentEnabler.ts | 41 +++++++++
 13 files changed, 199 insertions(+), 150 deletions(-)
 rename enabler/{public => dev-utils}/session.js (83%)
 create mode 100644 enabler/public/README.txt
 delete mode 100644 enabler/public/vite.svg
 delete mode 100644 enabler/src/payment-connector/mockPaymentConnector.ts
 delete mode 100644 enabler/src/payment-connector/paymentConnector.ts
 create mode 100644 enabler/src/payment-enabler/mockPaymentEnabler.ts
 create mode 100644 enabler/src/payment-enabler/paymentEnabler.ts

diff --git a/enabler/.env.template b/enabler/.env.template
index acebcee..3c2aa9b 100644
--- a/enabler/.env.template
+++ b/enabler/.env.template
@@ -3,4 +3,4 @@ VITE_ADMIN_CLIENT_ID=[client-id]
 VITE_ADMIN_CLIENT_SECRET=[client-secret]
 VITE_ADMIN_SCOPE=manage_project:commercetools-checkout
 VITE_REGION=europe-west1.gcp
-VITE_CART_ID=[cart-id]
+VITE_PROCESSOR_URL=http://localhost:8080
diff --git a/enabler/public/session.js b/enabler/dev-utils/session.js
similarity index 83%
rename from enabler/public/session.js
rename to enabler/dev-utils/session.js
index e511a68..629df10 100644
--- a/enabler/public/session.js
+++ b/enabler/dev-utils/session.js
@@ -34,15 +34,15 @@ const fetchAdminToken = async () => {
   return token.access_token;
 }
 
-const getSessionId = async() => {
+const getSessionId = async(cartId) => {
   const accessToken = await fetchAdminToken();
 
   const sessionMetadata = {
-    cartId: '',
-    allowedPaymentMethods: ['card', 'ideal', 'googlepay'],
+    cartId: cartId,
+    allowedPaymentMethods: ['card'], // add here your allowed methods for development purposes
   };
 
-  const res = await fetch(`http://localhost:3004/api/${projectKey}/sessions`, {
+  const res = await fetch(`https://session.${__VITE_REGION__}.commercetools.com/${projectKey}/sessions`, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
diff --git a/enabler/index.html b/enabler/index.html
index 98416a9..3d05422 100644
--- a/enabler/index.html
+++ b/enabler/index.html
@@ -5,41 +5,81 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + TS</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
     <script>
       var __VITE_ADMIN_CLIENT_ID__ = !'%VITE_ADMIN_CLIENT_ID%'.startsWith('%') && '%VITE_ADMIN_CLIENT_ID%';
       var __VITE_ADMIN_CLIENT_SECRET__ = !'%VITE_ADMIN_CLIENT_SECRET%'.startsWith('%') && '%VITE_ADMIN_CLIENT_SECRET%';
       var __VITE_ADMIN_SCOPE__ = !'%VITE_ADMIN_SCOPE%'.startsWith('%') && '%VITE_ADMIN_SCOPE%';
       var __VITE_REGION__ = !'%VITE_REGION%'.startsWith('%') && '%VITE_REGION%';
-      var __VITE_CART_ID__ = !'%VITE_CART_ID%'.startsWith('%') && '%VITE_CART_ID%';
+      var __VITE_PROCESSOR_URL__ = !'%VITE_PROCESSOR_URL%'.startsWith('%') && '%VITE_PROCESSOR_URL%';
     </script>
-    <script src="./session.js"></script>
+    <script src="../dev-utils/session.js"></script>
   </head>
   <body>
-    <div id="app"></div>
-    <script type="module">
-      import { Connector } from '/src/main.ts';
-
-      const sessionId = await getSessionId();
-      const connectorUrl = "https://service-ce9d8088-b10c-42df-8eb1-63f1fde80093.europe-west1.gcp.preview.commercetools.app";
-
-      const connector = new Connector({
-          connectorUrl: connectorUrl,
-          sessionId: sessionId,
-          config: {
-            
-          },
-          onComplete: ({ isSuccess, paymentReference }) => {
-            console.log('onComplete', { isSuccess, paymentReference });
-          },
-      });
-
-      connector.createComponent('card', {
-        config: {},
-      })
-      .then(e => e.mount('#card-component'));
 
-    </script>
 
-    <div id="card-component"></div>
+    <main role="main">
+
+      <section class="jumbotron text-center">
+        <div class="container">
+          <form action="/action_page.php">
+            <div class="text-center mb-4">
+              <h1 class="h3 mb-3 font-weight-normal">Dev Site</h1>
+              <p>Use this site for development purposes</p>
+            </div>
+            <div class="form-group">
+              <label for="cartId">Cart ID:</label>
+              <input type="text" class="form-control" id="cartId">
+            </div>
+            <button id="createCheckout" class="btn btn-lg btn-primary btn-block" type="submit">Create checkout</button>
+          </form>
+        </div>
+      </section>
+
+      <div class="album py-5 bg-light">
+        <div class="container">
+
+          <script type="module">
+            import { Enabler } from '/src/main.ts';
+      
+            document.getElementById('createCheckout').addEventListener('click', async (event) => {
+              event.preventDefault();
+              const cartId = document.getElementById('cartId').value;
+              const sessionId = await getSessionId(cartId);
+              const processorUrl = "https://service-ce9d8088-b10c-42df-8eb1-63f1fde80093.europe-west1.gcp.preview.commercetools.app";
+
+              const enabler = new Enabler({
+                processorUrl: __VITE_PROCESSOR_URL__,
+                sessionId: sessionId,
+                config: {
+                  
+                },
+                onComplete: ({ isSuccess, paymentReference }) => {
+                  console.log('onComplete', { isSuccess, paymentReference });
+                },
+              });
+        
+              enabler.createComponent('card', {
+                config: {},
+              })
+              .then(e => e.mount('#card-component'));
+            });
+      
+          </script>
+      
+          <div id="card-component"></div>
+        </div>
+      </div>
+
+    </main>
+
+
+
+    
+
+    
   </body>
 </html>
diff --git a/enabler/package.json b/enabler/package.json
index bbfd7d8..3239744 100644
--- a/enabler/package.json
+++ b/enabler/package.json
@@ -11,7 +11,6 @@
     "serve": "npm run build && npx http-server dist --port=3000  --cors"
   },
   "dependencies": {
-    "@adyen/adyen-web": "5.51.0",
     "http-server": "^14.1.1"
   },
   "devDependencies": {
diff --git a/enabler/public/README.txt b/enabler/public/README.txt
new file mode 100644
index 0000000..40ece9d
--- /dev/null
+++ b/enabler/public/README.txt
@@ -0,0 +1 @@
+Use this folder to include static assets
diff --git a/enabler/public/vite.svg b/enabler/public/vite.svg
deleted file mode 100644
index e7b8dfb..0000000
--- a/enabler/public/vite.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
diff --git a/enabler/src/components/base.ts b/enabler/src/components/base.ts
index 658d5d5..de80d69 100644
--- a/enabler/src/components/base.ts
+++ b/enabler/src/components/base.ts
@@ -1,18 +1,18 @@
 import { FakeSdk } from '../FakeSdk';
-import { ComponentOptions, PaymentMethod, PaymentResult } from '../payment-connector/paymentConnector';
-
+import { ComponentOptions, PaymentComponent, PaymentMethod, PaymentResult } from '../payment-enabler/paymentEnabler';
 
 export type ElementOptions = {
   paymentMethod: PaymentMethod;
-  isOffsite?: boolean;
 };
 
 export type BaseOptions = {
   sdk: FakeSdk;
-  connectorUrl: string;
+  processorUrl: string;
   sessionId: string;
   environment: string;
-  config: any;
+  config: {
+    showPayButton?: boolean;
+  };
   onComplete: (result: PaymentResult) => void;
   onError: (error?: any) => void;
 }
@@ -20,18 +20,20 @@ export type BaseOptions = {
 /**
  * Base Web Component
  */
-export abstract class BaseComponent {
+export abstract class BaseComponent implements PaymentComponent {
   protected paymentMethod: ElementOptions['paymentMethod'];
   protected sdk: FakeSdk;
-  protected connectorUrl: BaseOptions['connectorUrl'];
+  protected processorUrl: BaseOptions['processorUrl'];
   protected sessionId: BaseOptions['sessionId'];
   protected environment: BaseOptions['environment'];
   protected config: BaseOptions['config'];
   protected showPayButton: boolean;
+  protected onComplete: (result: PaymentResult) => void;
+  protected onError: (error?: any) => void;
 
   constructor(baseOptions: BaseOptions, componentOptions: ComponentOptions) {
     this.sdk = baseOptions.sdk;
-    this.connectorUrl = baseOptions.connectorUrl;
+    this.processorUrl = baseOptions.processorUrl;
     this.sessionId = baseOptions.sessionId;
     this.environment = baseOptions.environment;
     this.config = baseOptions.config;
@@ -43,12 +45,17 @@ export abstract class BaseComponent {
           true;
   }
 
-  async updated() {}
-
   abstract submit(): void;
 
   abstract mount(selector: string): void ;
 
-  onComplete: (result: PaymentResult) => void;
-  onError: (error?: any) => void;
+  showValidation?(): void;
+  isValid?(): boolean;
+  getState?(): {
+    card?: {
+      endDigits?: string;
+      brand?: string;
+      expiryDate? : string;
+    }
+  };
 }
diff --git a/enabler/src/components/payment-methods/card/card.ts b/enabler/src/components/payment-methods/card/card.ts
index 37a1744..d6ceda9 100644
--- a/enabler/src/components/payment-methods/card/card.ts
+++ b/enabler/src/components/payment-methods/card/card.ts
@@ -1,5 +1,5 @@
 import { BaseComponent, BaseOptions } from '../../base';
-import { ComponentOptions } from '../../../payment-connector/paymentConnector';
+import { ComponentOptions } from '../../../payment-enabler/paymentEnabler';
 import styles from '../../../style/style.module.scss';
 import inputFieldStyles from '../../../style/inputField.module.scss';
 import buttonStyles from '../../../style/button.module.scss';
@@ -39,10 +39,9 @@ export class Card extends BaseComponent {
             expiryYear: getInput(fieldIds.expiryDate).value.split('/')[1],
             cvc: getInput(fieldIds.cvv).value,
             holderName: getInput(fieldIds.holderName).value,
-        },
-        "paymentReference": "1234",
+        }
       };
-      const response = await fetch(this.connectorUrl + '/payments', {
+      const response = await fetch(this.processorUrl + '/payments', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json', 'X-Session-Id': this.sessionId },
         body: JSON.stringify(requestData),
@@ -117,9 +116,11 @@ export class Card extends BaseComponent {
 
   getState() {
     return {
-      endDigits: getInput(fieldIds.cardNumber).value.slice(-4),
-      brand: getCardBrand(getInput(fieldIds.cardNumber).value),
-      expiryDate: getInput(fieldIds.expiryDate).value,
+      card: {
+        endDigits: getInput(fieldIds.cardNumber).value.slice(-4),
+        brand: getCardBrand(getInput(fieldIds.cardNumber).value),
+        expiryDate: getInput(fieldIds.expiryDate).value,
+      },
     };
   }
 }
diff --git a/enabler/src/main.ts b/enabler/src/main.ts
index db70e88..9d20bf0 100644
--- a/enabler/src/main.ts
+++ b/enabler/src/main.ts
@@ -1,3 +1,3 @@
-import { MockPaymentConnector } from './payment-connector/mockPaymentConnector';
+import { MockPaymentEnabler } from './payment-enabler/mockPaymentEnabler';
 
-export { MockPaymentConnector as Connector };
+export { MockPaymentEnabler as Enabler };
diff --git a/enabler/src/payment-connector/mockPaymentConnector.ts b/enabler/src/payment-connector/mockPaymentConnector.ts
deleted file mode 100644
index 4315f56..0000000
--- a/enabler/src/payment-connector/mockPaymentConnector.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import { ComponentOptions, PaymentConnector, PaymentResult, PaymentMethod } from './paymentConnector';
-import { Card } from '../components/payment-methods/card/card';
-import { FakeSdk } from '../FakeSdk';
-import { BaseOptions } from '../components/base';
-
-const SupportedMethods: PaymentMethod[] = ['card'];
-
-declare global {
-  interface ImportMeta {
-    env: any;
-  }
-}
-
-type MockConnectorOptions = {
-  connectorUrl: string;
-  sessionId: string;
-  config?: { hidePayButton?: boolean };
-  onComplete?: (result: PaymentResult) => void;
-  onError?: (error: any) => void;
-};
-
-export class MockPaymentConnector implements PaymentConnector {
-  sessionId: MockConnectorOptions['sessionId'];
-  connectorUrl: MockConnectorOptions['connectorUrl'];
-  config: MockConnectorOptions['config'];
-  onComplete: MockConnectorOptions['onComplete'];
-  onError: MockConnectorOptions['onError'];
-  setupData: Promise<{ baseOptions: BaseOptions }>;
-
-  private constructor(props: MockConnectorOptions) {
-    this.sessionId = props.sessionId;
-    this.connectorUrl = props.connectorUrl;
-    this.config = props.config;
-    this.onComplete = props.onComplete;
-    this.onError = props.onError;
-    this.setupData = MockPaymentConnector._Setup(this);
-  }
-
-  private static _Setup = async (props: MockConnectorOptions): Promise<{ baseOptions: BaseOptions }> => {
-    // Fetch the config from the connector and use it to initialize your SDK:
-
-    // const configResponse = await fetch(instance.connectorUrl + '/config', {
-    //   method: 'GET',
-    //   headers: { 'Content-Type': 'application/json' },
-    // });
-
-    // const configJson = await configResponse.json();
-
-    const sdkOptions = {
-      // environment: configJson.environment,
-      environment: 'test'
-    }
-
-    return Promise.resolve({ baseOptions: {
-      sdk: new FakeSdk(sdkOptions),
-      connectorUrl: props.connectorUrl,
-      sessionId: props.sessionId,
-      environment: sdkOptions.environment,
-      config: props.config || {},
-      onComplete: props.onComplete || (() => {}),
-      onError: props.onError || (() => {}),
-     }
-    });
-  }
-
-  async createComponent(type: string, componentOptions: ComponentOptions) {
-    const { baseOptions } = await this.setupData;
-
-    switch (type) {
-      case 'card': 
-        return new Card(baseOptions, componentOptions);
-    }
-    throw new Error(`Payment method not supported: ${type}. Supported methods: ${Object.keys(SupportedMethods).join(', ')}`);
-  }
-}
diff --git a/enabler/src/payment-connector/paymentConnector.ts b/enabler/src/payment-connector/paymentConnector.ts
deleted file mode 100644
index 954984a..0000000
--- a/enabler/src/payment-connector/paymentConnector.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { BaseComponent } from '../components/base';
-
-export type PaymentMethod = 'card';
-
-export type PaymentResult = {
-  isSuccess: true;
-  paymentReference: string;
-} | { isSuccess: false };
-
-export type ComponentOptions = {
-  config: {
-    showPayButton?: boolean;
-  };
-};
-
-export interface PaymentConnector {
-  /** 
-   * @throws {Error}
-   */
-  createComponent: (type: string, opts: ComponentOptions, sessionId?: string) => Promise<BaseComponent | never>
-}
diff --git a/enabler/src/payment-enabler/mockPaymentEnabler.ts b/enabler/src/payment-enabler/mockPaymentEnabler.ts
new file mode 100644
index 0000000..370aa8b
--- /dev/null
+++ b/enabler/src/payment-enabler/mockPaymentEnabler.ts
@@ -0,0 +1,57 @@
+import { ComponentOptions, PaymentEnabler, PaymentMethod, EnablerOptions } from './paymentEnabler';
+import { Card } from '../components/payment-methods/card/card';
+import { FakeSdk } from '../FakeSdk';
+import { BaseOptions } from '../components/base';
+
+const SupportedMethods: PaymentMethod[] = ['card'];
+
+declare global {
+  interface ImportMeta {
+    env: any;
+  }
+}
+
+export class MockPaymentEnabler implements PaymentEnabler {
+  setupData: Promise<{ baseOptions: BaseOptions }>;
+
+  private constructor(options: EnablerOptions) {
+    this.setupData = MockPaymentEnabler._Setup(options);
+  }
+
+  private static _Setup = async (options: EnablerOptions): Promise<{ baseOptions: BaseOptions }> => {
+    // Fetch SDK config from processor if needed, for example:
+
+    // const configResponse = await fetch(instance.processorUrl + '/config', {
+    //   method: 'GET',
+    //   headers: { 'Content-Type': 'application/json' },
+    // });
+
+    // const configJson = await configResponse.json();
+
+    const sdkOptions = {
+      // environment: configJson.environment,
+      environment: 'test'
+    }
+
+    return Promise.resolve({ baseOptions: {
+      sdk: new FakeSdk(sdkOptions),
+      processorUrl: options.processorUrl,
+      sessionId: options.sessionId,
+      environment: sdkOptions.environment,
+      config: options.config || {},
+      onComplete: options.onComplete || (() => {}),
+      onError: options.onError || (() => {}),
+     }
+    });
+  }
+
+  async createComponent(type: string, componentOptions: ComponentOptions) {
+    const { baseOptions } = await this.setupData;
+
+    switch (type) {
+      case 'card': 
+        return new Card(baseOptions, componentOptions);
+    }
+    throw new Error(`Payment method not supported: ${type}. Supported methods: ${Object.keys(SupportedMethods).join(', ')}`);
+  }
+}
diff --git a/enabler/src/payment-enabler/paymentEnabler.ts b/enabler/src/payment-enabler/paymentEnabler.ts
new file mode 100644
index 0000000..5a9e6e0
--- /dev/null
+++ b/enabler/src/payment-enabler/paymentEnabler.ts
@@ -0,0 +1,41 @@
+export interface PaymentComponent {
+  mount(selector: string): void;
+  submit(): void;
+  showValidation?(): void;
+  isValid?(): boolean;
+  getState?(): {
+    card?: {
+      endDigits?: string;
+      brand?: string;
+      expiryDate?: string;
+    }
+  };
+}
+
+export type EnablerOptions = {
+  processorUrl: string;
+  sessionId: string;
+  config?: { showPayButton?: boolean };
+  onComplete?: (result: PaymentResult) => void;
+  onError?: (error: any) => void;
+};
+
+export type PaymentMethod = 'card';
+
+export type PaymentResult = {
+  isSuccess: true;
+  paymentReference: string;
+} | { isSuccess: false };
+
+export type ComponentOptions = {
+  config: {
+    showPayButton?: boolean;
+  };
+};
+
+export interface PaymentEnabler {
+  /** 
+   * @throws {Error}
+   */
+  createComponent: (type: string, opts: ComponentOptions, sessionId?: string) => Promise<PaymentComponent | never>
+}