@transferwise/approve-api-action-helpers
Version:
An http client that handles SCA protected requests gracefully
120 lines (103 loc) • 3.38 kB
JavaScript
/* 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);
}