All files / elements/MastercardForm MastercardForm.element.js

100% Statements 42/42
100% Branches 9/9
100% Functions 11/11
100% Lines 35/35

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98      9x   18x       9x 9x 9x 9x       9x     5x 5x 5x 3x 2x     1x 1x 1x 1x 1x     5x 1x   2x     2x   1x   2x     2x         5x                           4x 4x               5x 5x 5x         5x   1x     1x       4x   9x          
/** @param {import('./types').ElementImports} $inject */
function mastercardForm_injector($inject) {
  const { appConfig, HTMLElement, crypto, logger, document, MutationObserver } =
    $inject;
 
  return class MastercardForm extends HTMLElement {
    /**
     * @type {import('./types').ElementExports['constructor']}
     */
    constructor() {
      super();
      this.eventStream = null;
      this.events = null;
    }
 
    // - Lifecycle events
    /**
     * @type {import('./types').ElementExports['connectedCallback']}
     */
    connectedCallback() {
      const existingEventStream = this.querySelector('mastercard-event-stream');
      if (existingEventStream) {
        this.eventStream = existingEventStream;
      } else if (this.getAttribute('event-stream-id')?.length) {
        /** @type {string} */
        // @ts-ignore
        const streamId = this.getAttribute('event-stream-id');
        this.eventStream = document.createElement('mastercard-event-stream');
        this.eventStream.setAttribute('event-stream-id', streamId);
        this.appendChild(this.eventStream);
        this.events = this.eventStream.events;
      }
      // Proxy this to make it easier to access
      this.observer = new MutationObserver(() => {
        Array.from(this.querySelectorAll('mastercard-input'))
          .filter((elem) => {
            return elem.getAttribute('form-id') !== this.id;
          })
          .forEach((elem) => {
            elem.setAttribute('form-id', this.id);
          });
        Array.from(this.querySelectorAll('mastercard-mfa-choice'))
          .filter((elem) => {
            return elem.getAttribute('form-id') !== this.id;
          })
          .forEach((elem) => {
            elem.setAttribute('form-id', this.id);
          });
      });
 
      // @ts-ignore
      this.observer.observe(this, {
        subtree: true,
        childList: true,
        characterData: false,
      });
    }
 
    // - Custom methods
    /**
     * This method is used to intercept native onSubmit calls and forward them to our own custom
     * submit function
     * @type {import('./types').ElementExports['onSubmit']}
     */
    onSubmit(event) {
      event.preventDefault();
      this.submit();
    }
 
    /**
     * Sends a message to the orchestration service, which lives in the event stream iframe
     * @type {import('./types').ElementExports['submit']}
     */
    submit() {
      const requestId = crypto.randomUUID();
      const targetOrigin = appConfig.getSDKBase();
      const message = {
        formId: this.getAttribute('id'),
        eventType: 'submitRequest',
        requestId,
      };
      if (this.eventStream) {
        // @ts-ignore
        message.eventStreamId =
          this.eventStream.getAttribute('event-stream-id');
          // @ts-ignore
          this.eventStream
            .querySelector('iframe')
            .contentWindow.postMessage(message, targetOrigin);
      } else {
        logger.warn(`No event stream registered!`);
      }
    }
  };
}
 
export { mastercardForm_injector };