@notabene/javascript-sdk 1.34.0 → 2.0.0-next.11

package/src/components/EmbeddedComponent.ts

@@ -0,0 +1,217 @@
+import {
+  CMType,
+  ComponentRequest,
+  HMType,
+  HostMessage,
+  ValidationError,
+} from '../types';
+import {
+  MessageCallback,
+  MessageEventManager,
+} from '../utils/MessageEventManager';
+
+/**
+ * An embedded Notabene component
+ * @public
+ */
+
+export default class EmbeddedComponent<V, R> {
+  private _url: string;
+  private _value: V;
+  private _errors: ValidationError[] = [];
+
+  private iframe?: HTMLIFrameElement;
+  private eventManager: MessageEventManager;
+  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: V) {
+    this._url = url;
+    this._value = value;
+    this.eventManager = new MessageEventManager();
+    this.on(CMType.INVALID, (message) => {
+      if (message.type === CMType.INVALID) {
+        this._errors = message.errors;
+        this._value = message.value as V;
+      }
+    });
+    this.on(CMType.RESIZE, (message) => {
+      if (message.type === CMType.RESIZE) {
+        if (this.iframe) this.iframe.style.height = `${message.height}px`;
+      }
+    });
+  }
+  /**
+   * 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(): V {
+    return this._value;
+  }
+
+  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) {
+    this.iframe = document.createElement('iframe');
+    this.iframe.src = this.url;
+    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: MessageEvent) => {
+      if (event.source !== this.iframe?.contentWindow) {
+        return;
+      }
+      console.log('received message from iframe', event.data);
+      this.eventManager?.setPort(event.ports[0]);
+    });
+
+    this.iframe?.contentWindow?.focus();
+  }
+
+  /**
+   * Sends a message to the embedded component
+   * @param message - The message to send
+   */
+  send(message: HostMessage): void {
+    this.eventManager.send(message);
+  }
+
+  /**
+   * 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): void {
+    this.eventManager.on(messageType, callback);
+  }
+
+  /**
+   * 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): void {
+    this.eventManager.off(messageType, callback);
+  }
+
+  /**
+   * Updates the transaction value and sends an update message to the component
+   * @param value - The new transaction value
+   */
+  update(value: V) {
+    this._value = value;
+    this.send({ type: HMType.UPDATE, value: value as ComponentRequest });
+  }
+
+  /**
+   * Waits for the component to complete and returns the transaction response
+   * @returns A promise that resolves with the transaction response
+   */
+
+  completion(): Promise<R> {
+    return new Promise((resolve, reject) => {
+      this.on(CMType.COMPLETE, (message) => {
+        resolve((message as any).response);
+      });
+      this.on('error', (message) => {
+        reject(new Error((message as any).message));
+      });
+    });
+  }
+
+  /**
+   * Opens the component in a modal dialog
+   */
+
+  openModal(): Promise<R> {
+    if (this.modal) {
+      this.closeModal();
+    }
+    this.modal = document.createElement('dialog');
+    this.modal.style.border = 'none';
+    this.modal.style.backgroundColor = 'transparent';
+    this.modal.style.maxWidth = '100vw';
+    this.modal.style.maxHeight = '100vh';
+    this.modal.style.width = '600px';
+    this.modal.style.height = '800px';
+
+    document.body.appendChild(this.modal);
+    this.embed(this.modal);
+    this.on(CMType.CANCEL, () => {
+      this.closeModal();
+    });
+    this.on(CMType.CLOSE, () => {
+      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

@@ -0,0 +1,188 @@
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
+import {
+  CMType,
+  HMType,
+  HostMessage,
+  Transaction,
+  TransactionResponse,
+  Withdrawal,
+} from '../../types';
+import EmbeddedComponent from '../EmbeddedComponent';
+
+const url = 'https://example.com';
+const parentId = 'parent-container';
+const value: Partial<Transaction> = { amountDecimal: 100 };
+
+describe('EmbeddedComponent', () => {
+  describe('creation', () => {
+    let component: EmbeddedComponent<
+      Partial<Withdrawal>,
+      TransactionResponse<Withdrawal>
+    >;
+    beforeEach(() => {
+      component = new EmbeddedComponent<
+        Partial<Withdrawal>,
+        TransactionResponse<Withdrawal>
+      >(url, { amountDecimal: 100 });
+    });
+
+    test('sets value', () => {
+      expect(component.value).toStrictEqual(value);
+    });
+
+    test('sets url', () => {
+      expect(component.url).toBe(url);
+    });
+  });
+
+  describe('iframe', () => {
+    let document: Document;
+    let parentElement: HTMLElement;
+    let iframe: HTMLIFrameElement;
+    let window: Window;
+    let iframeWindow: Window;
+
+    beforeEach(() => {
+      parentElement = {
+        appendChild: vi.fn(),
+      } as unknown as HTMLElement;
+
+      iframe = {
+        style: {},
+        src: '',
+        contentWindow: iframeWindow,
+        setAttribute: vi.fn(),
+        addEventListener: vi.fn(),
+      } as unknown as HTMLIFrameElement;
+
+      document = {
+        createElement: vi.fn().mockReturnValue(iframe),
+        querySelector: vi.fn().mockReturnValue(parentElement),
+      } as unknown as Document;
+
+      window = {
+        addEventListener: vi.fn(),
+      } as unknown as Window;
+
+      vi.stubGlobal('document', document);
+      vi.stubGlobal('window', window);
+    });
+
+    afterEach(() => {
+      vi.unstubAllGlobals();
+    });
+
+    test('mount', () => {
+      const component = new EmbeddedComponent<
+        Partial<Withdrawal>,
+        TransactionResponse<Withdrawal>
+      >(url, value);
+      component.mount(parentId);
+      expect(iframe?.src).toBe(url);
+      expect(parentElement.appendChild).toHaveBeenCalledWith(iframe);
+    });
+
+    test('on', () => {
+      const component = new EmbeddedComponent<
+        Partial<Withdrawal>,
+        TransactionResponse<Withdrawal>
+      >(url, value);
+      const messageType = 'customEvent';
+      const callback = vi.fn();
+      component.on(messageType, callback);
+      component.mount(parentId);
+
+      // Simulate receiving a message of the specified type
+      // and assert that the callback is called with the correct payload.
+    });
+
+    test('off', () => {
+      const component = new EmbeddedComponent<
+        Partial<Withdrawal>,
+        TransactionResponse<Withdrawal>
+      >(url, value);
+      const messageType = 'customEvent';
+      const callback = vi.fn();
+      component.on(messageType, callback);
+
+      // Simulate receiving a message of the specified type
+      // and assert that the callback is called with the correct payload.
+
+      component.off(messageType, callback);
+
+      // Simulate receiving another message of the specified type
+      // and assert that the callback is not called.
+    });
+
+    describe('connected to iframe', () => {
+      let messageHandler: (event: MessageEvent) => void;
+      let port: MessagePort;
+      let handshake: MessageEvent;
+      let component: EmbeddedComponent<
+        Partial<Withdrawal>,
+        TransactionResponse<Withdrawal>
+      >;
+
+      beforeEach(() => {
+        port = {
+          postMessage: vi.fn(),
+          start: vi.fn(),
+          onmessage: null,
+        } as unknown as MessagePort;
+        handshake = {
+          source: iframe.contentWindow,
+          ports: [port],
+        } as unknown as MessageEvent;
+        window.addEventListener = vi
+          .fn()
+          .mockImplementation((event, handler) => {
+            messageHandler = handler;
+          });
+        component = new EmbeddedComponent<
+          Partial<Withdrawal>,
+          TransactionResponse<Withdrawal>
+        >(url, value);
+        component.mount(parentId);
+
+        expect(messageHandler).toBeDefined();
+        messageHandler(handshake);
+      });
+
+      test('send', () => {
+        const message: HostMessage = {
+          type: HMType.UPDATE,
+          value: {
+            requestId: 'id',
+          },
+        };
+        component.send(message);
+        expect(port.postMessage).toHaveBeenCalledWith(message);
+      });
+
+      test('update', () => {
+        const newValue: Partial<Transaction> = { amountDecimal: 200 };
+        component.update(newValue);
+
+        expect(component.value).toBe(newValue);
+      });
+
+      // TODO not sure this actually does what I want it to do
+      test('completion', async () => {
+        const response = { valid: true, value: 'completed' };
+        expect(port.onmessage).toBeDefined();
+
+        const promise = component.completion();
+        // @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);
+        });
+        return promise;
+        // Assert that the completion promise resolves with the expected response.
+      });
+    });
+  });
+});