@transferwise/approve-api-action-helpers/src/iframeFlow.js

An http client that handles SCA protected requests gracefully

/* eslint-disable fp/no-mutation */
/* eslint-disable unicorn/prefer-dom-node-append */
import { iframeResize } from 'iframe-resizer';

import { MESSAGE_SUCCESS, MESSAGE_FAILED, MESSAGE_CLOSED } from './config';
import { createForm } from './createForm';

const css = `
  .tw-approval-modal-overlay {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: rgba(55,81,126,0);
    transition: background-color .35s cubic-bezier(0,.94,.62,1);
    z-index: 1050;
  }
  .tw-approval-modal-overlay--open {
    background: rgba(55,81,126,0.8);
  }
  .tw-approval-modal-wrapper {
    height: 100%;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
  }
  .tw-approval-modal {
    display: flex;
    max-height: 100%;
    width: 540px;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 5px 15px rgba(0,0,0,.2);
    overflow: auto;
  }
  .tw-approval-modal iframe {
    width: 100%;
    height: 520px;
    transition: height 0.1s ease-in-out;
  }
`;

function addStylesheet() {
  const { head } = document;
  const stylesheet = document.createElement('style');
  stylesheet.id = 'tw-approve-api-action-styles';
  stylesheet.appendChild(document.createTextNode(css));
  head.appendChild(stylesheet);
}

export function iframeFlow({ token, approvalPageUrl, resolve, reject }) {
  // eslint-disable-next-line unicorn/prefer-query-selector
  if (!document.getElementById('tw-approve-api-action-styles')) {
    addStylesheet();
  }

  const overlay = document.createElement('div');
  // eslint-disable-next-line sonarjs/no-duplicate-string
  overlay.id = 'tw-approval-modal-overlay';
  overlay.classList.add('tw-approval-modal-overlay');

  const modalWrapper = document.createElement('div');
  modalWrapper.classList.add('tw-approval-modal-wrapper');
  overlay.appendChild(modalWrapper);

  const modal = document.createElement('div');
  modal.classList.add('tw-approval-modal');
  modalWrapper.appendChild(modal);

  const iframe = document.createElement('iframe');
  iframe.name = 'tw-approve-api-action';
  iframe.style.border = '0';
  modal.appendChild(iframe);

  const form = createForm({ token, approvalPageUrl, flow: 'iframe' });
  modal.appendChild(form);

  document.body.appendChild(overlay);

  iframeResize({ checkOrigin: false, minHeight: 400 }, iframe);

  overlay.classList.add('tw-approval-modal-overlay--open');

  form.setAttribute('target', 'tw-approve-api-action');
  form.submit();

  const handleEvents = ({ data }) => {
    // eslint-disable-next-line default-case
    switch (data) {
      case MESSAGE_SUCCESS:
        closeModal();
        resolve();
        return;
      case MESSAGE_FAILED:
        closeModal();
        reject();
        return;
      case MESSAGE_CLOSED:
        closeModal();
    }
  };

  const closeModal = () => {
    iframe.src = 'about:blank';
    // eslint-disable-next-line unicorn/prefer-query-selector
    const overlayElement = document.getElementById('tw-approval-modal-overlay');
    // eslint-disable-next-line unicorn/prefer-dom-node-remove
    overlayElement.parentNode.removeChild(overlayElement);
    window.removeEventListener('message', handleEvents);
  };

  overlay.addEventListener('click', closeModal, { once: true });
  window.addEventListener('message', handleEvents);
}