UNPKG

@transferwise/approve-api-action-helpers

Version:

An http client that handles SCA protected requests gracefully

120 lines (103 loc) 3.38 kB
/* 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); }