@notabene/javascript-sdk 2.0.0-next.2 → 2.0.0-next.20

package/src/components/EmbeddedComponent.ts

@@ -2,7 +2,6 @@ import {
   CMType,
   HMType,
   HostMessage,
-  Transaction,
   TransactionResponse,
   ValidationError,
 } from '../types';
@@ -15,23 +14,32 @@ import {
  * An embedded Notabene component
  * @public
  */
-export default class EmbeddedComponent {
+
+export default class EmbeddedComponent<V, O> {
   private _url: string;
-  private _value: Partial<Transaction>;
+  private _value: Partial<V>;
+  private _options?: O;
   private _errors: ValidationError[] = [];
 
   private iframe?: HTMLIFrameElement;
-  private eventManager: MessageEventManager;
-  private ready = false;
+  private eventManager: MessageEventManager<V, O>;
+  private modal?: HTMLDialogElement;
+
+  /**
+   * Creates an instance of EmbeddedComponent.
+   * @param url - The URL of the embedded component
+   * @param value - The initial transaction value
+   */
 
-  constructor(url: string, value: Partial<Transaction>) {
+  constructor(url: string, value: Partial<V>, options?: O) {
     this._url = url;
     this._value = value;
-    this.eventManager = new MessageEventManager();
+    this._options = options;
+    this.eventManager = new MessageEventManager<V, O>();
     this.on(CMType.INVALID, (message) => {
       if (message.type === CMType.INVALID) {
         this._errors = message.errors;
-        this._value = message.value as Transaction;
+        this._value = message.value as V;
       }
     });
     this.on(CMType.RESIZE, (message) => {
@@ -40,64 +48,128 @@ export default class EmbeddedComponent {
       }
     });
   }
+  /**
+   * Gets the URL of the embedded component
+   * @returns The URL of the embedded component
+   */
 
   public get url(): string {
     return this._url;
   }
+  /**
+   * Gets the current transaction value
+   * @returns The current transaction value
+   */
 
-  public get value(): Partial<Transaction> {
+  public get value(): Partial<V> {
     return this._value;
   }
 
+  public get options(): O | undefined {
+    return this._options;
+  }
+
   public get errors(): ValidationError[] {
     return this._errors;
   }
 
+  /**
+   * Opens the component URL in the current window
+   */
+
   public open() {
     document.location.href = this.url;
   }
 
+  /**
+   * Mounts the component to a parent element
+   * @param parentId - The ID of the parent element
+   * @throws Will throw an error if the parent element is not found
+   */
+
   mount(parentId: string) {
+    const parent = document.querySelector(parentId);
+    if (!parent) throw new Error(`parentID ${parentId} not found`);
+    this.embed(parent);
+  }
+
+  /**
+   * Embeds the component into a parent element
+   * @param parent - The parent element to embed the component into
+   */
+  embed(parent: Element, modal: boolean = false) {
+    // console.log(this.url);
+    this.removeEmbed();
     this.iframe = document.createElement('iframe');
-    this.iframe.src = this.url;
+    this.iframe.src = this.url + (!modal ? '&embedded=true' : '');
+    this.iframe.allow = 'web-share';
     this.iframe.style.width = '100%';
     this.iframe.style.height = '100px';
     this.iframe.style.border = 'none';
     this.iframe.style.overflow = 'hidden';
+    // this.iframe.setAttribute('allowtransparency', 'true');
+    // this.iframe.style.backgroundColor = 'transparent';
+    parent.appendChild(this.iframe);
 
-    window.addEventListener('message', (event) => {
+    window.addEventListener('message', (event: MessageEvent) => {
       if (event.source !== this.iframe?.contentWindow) {
         return;
       }
-      console.log('received message from iframe', event.data);
+      // console.log('received message from iframe', event.data);
       this.eventManager?.setPort(event.ports[0]);
-      this.ready = true;
     });
 
-    const parent = document.querySelector(parentId);
-    if (!parent) throw new Error(`parentID ${parentId} not found`);
-    parent.appendChild(this.iframe);
     this.iframe?.contentWindow?.focus();
   }
 
-  send(message: HostMessage): void {
+  removeEmbed() {
+    if (this.iframe) this.iframe.remove();
+  }
+
+  /**
+   * Sends a message to the embedded component
+   * @param message - The message to send
+   */
+  send(message: HostMessage<V, O>): void {
     this.eventManager.send(message);
   }
 
-  on(messageType: string, callback: MessageCallback): void {
+  /**
+   * Adds an event listener for a specific message type
+   * @param messageType - The type of message to listen for
+   * @param callback - The callback function to execute when the message is received
+   */
+
+  on(messageType: string, callback: MessageCallback<V>): void {
     this.eventManager.on(messageType, callback);
   }
 
-  off(messageType: string, callback: MessageCallback): void {
+  /**
+   * Removes an event listener for a specific message type
+   * @param messageType - The type of message to stop listening for
+   * @param callback - The callback function to remove
+   */
+
+  off(messageType: string, callback: MessageCallback<V>): void {
     this.eventManager.off(messageType, callback);
   }
 
-  update(value: Partial<Transaction>) {
+  /**
+   * Updates the transaction value and sends an update message to the component
+   * @param value - The new transaction value
+   */
+  update(value: Partial<V>, options?: O) {
     this._value = value;
-    this.send({ type: HMType.UPDATE, value });
+    if (options) this._options = options;
+    this.send({ type: HMType.UPDATE, value, options: this._options });
   }
 
-  completion(): Promise<TransactionResponse> {
+  /**
+   * Waits for the component to complete and returns the transaction response
+   * @returns A promise that resolves with the transaction response
+   */
+
+  completion(): Promise<TransactionResponse<V>> {
     return new Promise((resolve, reject) => {
       this.on(CMType.COMPLETE, (message) => {
         resolve((message as any).response);
@@ -107,4 +179,51 @@ export default class EmbeddedComponent {
       });
     });
   }
+
+  /**
+   * Opens the component in a modal dialog
+   */
+
+  openModal(): Promise<TransactionResponse<V>> {
+    if (this.modal) {
+      this.closeModal();
+    }
+    this.modal = document.createElement('dialog');
+    this.modal.style.border = 'none';
+    this.modal.style.backgroundColor = 'white';
+    this.modal.style.maxWidth = '100vw';
+    this.modal.style.maxHeight = '100vh';
+    this.modal.style.width = '600px';
+    this.modal.style.height = '600px';
+
+    document.body.appendChild(this.modal);
+    this.embed(this.modal, true);
+    this.on(CMType.CANCEL, () => {
+      this.closeModal();
+    });
+
+    this.on(CMType.COMPLETE, () => {
+      this.closeModal();
+    });
+
+    this.modal.showModal();
+    this.modal.addEventListener('click', () => {
+      // console.log('click');
+      this.closeModal();
+    });
+    return this.completion();
+  }
+  /**
+   * Closes the modal dialog
+   *
+   */
+
+  closeModal(): void {
+    if (this.modal) {
+      // console.log('closeModal');
+      this.modal?.close();
+      this.modal.remove();
+      this.modal = undefined;
+    }
+  }
 }

package/src/components/__tests__/EmbeddedComponent.test.ts

@@ -1,5 +1,13 @@
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
-import { CMType, HMType, HostMessage, Transaction } from '../../types';
+import {
+  AgentType,
+  CMType,
+  HMType,
+  type HostMessage,
+  type Transaction,
+  type TransactionOptions,
+  type Withdrawal,
+} from '../../types';
 import EmbeddedComponent from '../EmbeddedComponent';
 
 const url = 'https://example.com';
@@ -8,9 +16,11 @@ const value: Partial<Transaction> = { amountDecimal: 100 };
 
 describe('EmbeddedComponent', () => {
   describe('creation', () => {
-    let component: EmbeddedComponent;
+    let component: EmbeddedComponent<Withdrawal, TransactionOptions>;
     beforeEach(() => {
-      component = new EmbeddedComponent(url, { amountDecimal: 100 });
+      component = new EmbeddedComponent<Withdrawal, TransactionOptions>(url, {
+        amountDecimal: 100,
+      });
     });
 
     test('sets value', () => {
@@ -60,14 +70,20 @@ describe('EmbeddedComponent', () => {
     });
 
     test('mount', () => {
-      const component = new EmbeddedComponent(url, value);
+      const component = new EmbeddedComponent<Withdrawal, TransactionOptions>(
+        url,
+        value,
+      );
       component.mount(parentId);
-      expect(iframe?.src).toBe(url);
+      expect(iframe?.src).toBe(url + '&embedded=true');
       expect(parentElement.appendChild).toHaveBeenCalledWith(iframe);
     });
 
     test('on', () => {
-      const component = new EmbeddedComponent(url, value);
+      const component = new EmbeddedComponent<Withdrawal, TransactionOptions>(
+        url,
+        value,
+      );
       const messageType = 'customEvent';
       const callback = vi.fn();
       component.on(messageType, callback);
@@ -78,7 +94,10 @@ describe('EmbeddedComponent', () => {
     });
 
     test('off', () => {
-      const component = new EmbeddedComponent(url, value);
+      const component = new EmbeddedComponent<Withdrawal, TransactionOptions>(
+        url,
+        value,
+      );
       const messageType = 'customEvent';
       const callback = vi.fn();
       component.on(messageType, callback);
@@ -96,7 +115,8 @@ describe('EmbeddedComponent', () => {
       let messageHandler: (event: MessageEvent) => void;
       let port: MessagePort;
       let handshake: MessageEvent;
-      let component: EmbeddedComponent;
+      let component: EmbeddedComponent<Withdrawal, TransactionOptions>;
+      let options: TransactionOptions;
 
       beforeEach(() => {
         port = {
@@ -113,7 +133,12 @@ describe('EmbeddedComponent', () => {
           .mockImplementation((event, handler) => {
             messageHandler = handler;
           });
-        component = new EmbeddedComponent(url, value);
+        options = { allowedAgentTypes: [AgentType.PRIVATE, AgentType.VASP] };
+        component = new EmbeddedComponent<Withdrawal, TransactionOptions>(
+          url,
+          value,
+          options,
+        );
         component.mount(parentId);
 
         expect(messageHandler).toBeDefined();
@@ -121,23 +146,51 @@ describe('EmbeddedComponent', () => {
       });
 
       test('send', () => {
-        const message: HostMessage = {
+        const message: HostMessage<Withdrawal, TransactionOptions> = {
           type: HMType.UPDATE,
-          value: { amountDecimal: 100 },
+          value: {
+            requestId: 'id',
+          },
+          options: { allowedAgentTypes: [AgentType.PRIVATE] },
         };
         component.send(message);
-
-        // Assert that the message is sent to the embedded component
-        // and handled correctly.
+        expect(port.postMessage).toHaveBeenCalledWith(message);
       });
 
-      test('update', () => {
-        const newValue: Partial<Transaction> = { amountDecimal: 200 };
-        component.update(newValue);
+      describe('update', () => {
+        test('with out options', () => {
+          const newValue: Partial<Transaction> = { amountDecimal: 200 };
 
-        expect(component.value).toBe(newValue);
-      });
+          const message: HostMessage<Withdrawal, TransactionOptions> = {
+            type: HMType.UPDATE,
+            value: newValue,
+            options,
+          };
+
+          component.update(newValue);
+
+          expect(component.value).toBe(newValue);
+          expect(component.options).toBe(options);
+          expect(port.postMessage).toHaveBeenCalledWith(message);
+        });
 
+        test('with options', () => {
+          const newValue: Partial<Transaction> = { amountDecimal: 200 };
+          const newOptions = { allowedAgentTypes: [AgentType.PRIVATE] };
+
+          const message: HostMessage<Withdrawal, TransactionOptions> = {
+            type: HMType.UPDATE,
+            value: newValue,
+            options: newOptions,
+          };
+
+          component.update(newValue, newOptions);
+
+          expect(component.value).toBe(newValue);
+          expect(component.options).toBe(newOptions);
+          expect(port.postMessage).toHaveBeenCalledWith(message);
+        });
+      });
       // TODO not sure this actually does what I want it to do
       test('completion', async () => {
         const response = { valid: true, value: 'completed' };
@@ -147,7 +200,7 @@ describe('EmbeddedComponent', () => {
         // @ts-expect-error - we've already verified that port exists
         port.onmessage({
           data: { type: CMType.COMPLETE, response },
-        } as MessageEvent);
+        });
 
         promise.then((result) => {
           expect(result).toBe(response);