@dintero/checkout-web-sdk 0.6.0 → 0.6.2

package/dist/dintero-checkout-web-sdk.cjs.prod.js

@@ -6,7 +6,7 @@ require('native-promise-only');
 
 var pkg = {
 	name: "@dintero/checkout-web-sdk",
-	version: "0.6.0",
+	version: "0.6.2",
 	description: "Dintero Checkout SDK for web frontends",
 	main: "dist/dintero-checkout-web-sdk.cjs.js",
 	module: "dist/dintero-checkout-web-sdk.esm.js",
@@ -17,8 +17,10 @@ var pkg = {
 		umdName: "dintero"
 	},
 	scripts: {
+		postinstall: "patch -u node_modules/vitest/dist/vendor-node.a7c48fe1.js -i patches/vitest+0.34.6.patch --forward || true",
 		build: "preconstruct build",
-		test: "$(yarn bin)/karma start",
+		lint: "prettier --cache --log-level warn -c --config .prettierrc.yml .",
+		test: "$(yarn bin)/vitest --browser.name=chrome --browser.headless",
 		"semantic-release": "semantic-release",
 		prepublishOnly: "yarn run build"
 	},
@@ -34,25 +36,19 @@ var pkg = {
 		url: "https://github.com/Dintero/Dintero.Checkout.Web.SDK/issues"
 	},
 	devDependencies: {
-		"@babel/preset-env": "^7.14.1",
-		"@babel/preset-typescript": "^7.13.0",
-		"@preconstruct/cli": "^2.1.5",
-		"@semantic-release/git": "^10.0.1",
-		chai: "^4.2.0",
-		karma: "^6.4.2",
-		"karma-chai": "^0.1.0",
-		"karma-chrome-launcher": "^3.1.0",
-		"karma-mocha": "^2.0.1",
-		"karma-typescript": "^5.0.3",
-		mocha: "^8.1.1",
-		prettier: "^3.0.3",
-		puppeteer: "^21.1.0",
-		"semantic-release": "^22.0.1",
-		sinon: "^15.0.0",
-		typescript: "^5.2.2"
+		"@babel/core": "7.13.0",
+		"@babel/preset-typescript": "7.13.0",
+		"@preconstruct/cli": "2.8.1",
+		"@semantic-release/git": "10.0.1",
+		"@vitest/browser": "0.34.6",
+		prettier: "3.0.3",
+		"semantic-release": "22.0.5",
+		typescript: "5.2.2",
+		vitest: "0.34.6",
+		webdriverio: "8.16.22"
 	},
 	dependencies: {
-		"native-promise-only": "^0.8.1"
+		"native-promise-only": "0.8.1"
 	}
 };
 
@@ -104,18 +100,18 @@ const getSessionUrl = options => {
     throw new Error("Invalid endpoint");
   }
   const params = new URLSearchParams();
-  params.append('sdk', pkg.version);
+  params.append("sdk", pkg.version);
   if (ui) {
-    params.append('ui', ui);
+    params.append("ui", ui);
   }
   if (language) {
-    params.append('language', language);
+    params.append("language", language);
   }
   if (shouldCallValidateSession) {
-    params.append('client_side_validation', 'true');
+    params.append("client_side_validation", "true");
   }
   if (popOut) {
-    params.append('role', 'pop_out_launcher');
+    params.append("role", "pop_out_launcher");
   }
   if (endpoint === "https://checkout.dintero.com") {
     // Default endpoint will redirect via the view endpoint
@@ -124,28 +120,29 @@ const getSessionUrl = options => {
   // When a custom endpoint is set skip the view redirect endpoint since
   // custom endpoints like localhost and PR builds does not support the
   // serverside view flow.
-  params.append('sid', sid);
-  return `${endpoint}/?${params.toString()}`;
+  params.append("sid", sid);
+  return `${padTralingSlash(endpoint)}?${params.toString()}`;
 };
-const padTralingSlash = endpoint => endpoint.endsWith('/') ? endpoint : `${endpoint}/`;
+const padTralingSlash = endpoint => endpoint.endsWith("/") ? endpoint : `${endpoint}/`;
 const getPopOutUrl = ({
   sid,
   endpoint,
   language,
   shouldCallValidateSession
 }) => {
-  if (shouldCallValidateSession) {
-    return `${padTralingSlash(endpoint)}?loader=true`;
-  }
   const params = new URLSearchParams();
-  params.append('ui', 'fullscreen');
-  params.append('role', 'pop_out_payment');
-  params.append('sid', sid);
-  params.append('sdk', pkg.version);
+  params.append("ui", "fullscreen");
+  params.append("role", "pop_out_payment");
+  params.append("sid", sid);
+  params.append("sdk", pkg.version);
   if (language) {
-    params.append('language', language);
+    params.append("language", language);
+  }
+  if (shouldCallValidateSession) {
+    params.append("loader", "true");
+    return `${padTralingSlash(endpoint)}?${params.toString()}`;
   }
-  return `${endpoint}/?${params.toString()}`;
+  return `${padTralingSlash(endpoint)}?${params.toString()}`;
 };
 
 /**
@@ -372,11 +369,11 @@ const subscribe = options => {
 
 const getBackdropZIndex = () => {
   // Iterate all DOM items to get current highest element.
-  const elements = document.getElementsByTagName('*');
+  const elements = document.getElementsByTagName("*");
   const highest = Array.from(elements).reduce((acc, element) => {
     try {
       const zIndexStr = document.defaultView.getComputedStyle(element, null).getPropertyValue("z-index");
-      const zIndex = parseInt(zIndexStr || '0');
+      const zIndex = parseInt(zIndexStr || "0");
       if (!isNaN(zIndex) && zIndex > acc) {
         return zIndex;
       }
@@ -387,15 +384,15 @@ const getBackdropZIndex = () => {
     return acc;
   }, 0);
   if (highest < 9999) {
-    return '9999';
+    return "9999";
   }
   return (highest + 1).toString();
 };
-const STYLE_ID = 'dintero-checkout-sdk-style';
-const BACKDROP_ID = 'dintero-checkout-sdk-backdrop';
-const BACKDROP_DESCRIPTION = 'dintero-checkout-sdk-backdrop-description';
-const FOCUS_CHECKOUT_BUTTON_ID = 'dintero-checkout-sdk-backdrop-focus';
-const CLOSE_BACKDROP_BUTTON_ID = 'dintero-checkout-sdk-backdrop-close';
+const STYLE_ID = "dintero-checkout-sdk-style";
+const BACKDROP_ID = "dintero-checkout-sdk-backdrop";
+const BACKDROP_DESCRIPTION = "dintero-checkout-sdk-backdrop-description";
+const FOCUS_CHECKOUT_BUTTON_ID = "dintero-checkout-sdk-backdrop-focus";
+const CLOSE_BACKDROP_BUTTON_ID = "dintero-checkout-sdk-backdrop-close";
 const wrapPreventDefault = fn => {
   // Creates a wrapped function that will invoke preventDefault() to stop
   // the event from bubbling up the DOM tree.
@@ -412,8 +409,8 @@ const appendBackdropStyles = () => {
     return;
   }
   // Add style to DOM
-  const style = document.createElement('style');
-  style.setAttribute('id', STYLE_ID);
+  const style = document.createElement("style");
+  style.setAttribute("id", STYLE_ID);
   style.innerHTML = `
         @keyframes ${BACKDROP_ID}-fade-in {
             from {opacity: 0;}
@@ -528,7 +525,7 @@ const appendBackdropStyles = () => {
 };
 const createBackdropDOM = () => {
   // Dark translucent backdrop element
-  const backdrop = document.createElement('div');
+  const backdrop = document.createElement("div");
   backdrop.setAttribute("id", BACKDROP_ID);
   backdrop.setAttribute("role", "dialog");
   backdrop.style.zIndex = getBackdropZIndex();
@@ -536,7 +533,7 @@ const createBackdropDOM = () => {
 };
 const createCloseButtonDOM = label => {
   // Close button for the top right corner
-  const button = document.createElement('button');
+  const button = document.createElement("button");
   button.setAttribute("id", CLOSE_BACKDROP_BUTTON_ID);
   button.setAttribute("type", "button");
   button.setAttribute("aria-label", label);
@@ -560,7 +557,7 @@ const createCloseButtonDOM = label => {
 };
 const createDinteroLogoDOM = () => {
   // Close button for the top right corner
-  const div = document.createElement('div');
+  const div = document.createElement("div");
   div.innerHTML = `
         <svg width="120px" height="22px" viewBox="0 0 630 111" version="1.1" >
             <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
@@ -573,8 +570,8 @@ const createDinteroLogoDOM = () => {
 };
 const createLabelDOM = text => {
   // Text about the pop out
-  const p = document.createElement('p');
-  p.setAttribute('id', BACKDROP_DESCRIPTION);
+  const p = document.createElement("p");
+  p.setAttribute("id", BACKDROP_DESCRIPTION);
   p.innerText = text;
   return p;
 };
@@ -582,7 +579,7 @@ const createFocusButtonDOM = text => {
   // Mock button to give the user a call to action element to click, even
   // though the entire backdrop (except the close button) returns focus to the
   // checkout.
-  const button = document.createElement('button');
+  const button = document.createElement("button");
   button.setAttribute("id", FOCUS_CHECKOUT_BUTTON_ID);
   button.setAttribute("type", "button");
   button.innerText = text;
@@ -592,7 +589,7 @@ const focusTrap = e => {
   // Prevent the user focusing outside of the backdrop while it is visible
   const focusButton = document.getElementById(FOCUS_CHECKOUT_BUTTON_ID);
   const closeButton = document.getElementById(CLOSE_BACKDROP_BUTTON_ID);
-  if (e.key === 'Tab' || e.code === "Tab") {
+  if (e.key === "Tab" || e.code === "Tab") {
     if (document.activeElement === focusButton) {
       closeButton.focus();
       e.preventDefault();
@@ -619,7 +616,7 @@ const createBackdropView = options => {
   closeButton.onclick = wrapPreventDefault(options.close);
 
   // Add focus trap when backdrop is visible
-  document.addEventListener('keydown', focusTrap);
+  document.addEventListener("keydown", focusTrap);
 
   // Append to document
   backdrop.appendChild(closeButton);
@@ -641,7 +638,7 @@ const setBackdropLabels = event => {
   }
   const closeButton = document.getElementById(CLOSE_BACKDROP_BUTTON_ID);
   if (closeButton) {
-    closeButton.setAttribute('aria-label', event.descriptionLabel);
+    closeButton.setAttribute("aria-label", event.descriptionLabel);
   }
 };
 const createBackdrop = options => {
@@ -664,7 +661,7 @@ const removeBackdrop = () => {
     if (backdrop) {
       document.body.removeChild(backdrop);
     }
-    document.removeEventListener('keydown', focusTrap);
+    document.removeEventListener("keydown", focusTrap);
   } catch (e) {
     // Ignore errors when closing backdrop. If it fails we should not stop
     // the rest of the application from working.
@@ -682,14 +679,14 @@ const configureButton = (button, {
   styles,
   onClick
 }) => {
-  button.setAttribute('id', OPEN_POP_OUT_BUTTON_ID);
-  button.setAttribute('type', 'button');
+  button.setAttribute("id", OPEN_POP_OUT_BUTTON_ID);
+  button.setAttribute("type", "button");
 
   // Is clickable
-  if (disabled === 'true') {
-    button.setAttribute('disabled', disabled);
+  if (disabled === "true") {
+    button.setAttribute("disabled", disabled);
   } else {
-    button.removeAttribute('disabled');
+    button.removeAttribute("disabled");
   }
 
   // Click handler
@@ -699,14 +696,14 @@ const configureButton = (button, {
     event.stopPropagation();
 
     // Update look
-    button.style.boxShadow = 'inset 0 0 10px rgba(34, 84, 65, 0.9)';
+    button.style.boxShadow = "inset 0 0 10px rgba(34, 84, 65, 0.9)";
 
     // Invoke handler
     onClick();
 
     // Reset look
     window.setTimeout(() => {
-      button.style.boxShadow = 'none';
+      button.style.boxShadow = "none";
     }, 200);
   };
 
@@ -714,10 +711,10 @@ const configureButton = (button, {
   button.innerText = label;
 
   // Position
-  button.style.position = 'absolute';
-  button.style.top = top + 'px';
-  button.style.left = left + 'px';
-  button.style.right = right + 'px';
+  button.style.position = "absolute";
+  button.style.top = top + "px";
+  button.style.left = left + "px";
+  button.style.right = right + "px";
 
   // Appearance from checkout
   for (const [key, value] of Object.entries(styles)) {
@@ -730,7 +727,7 @@ const addPopOutButton = options => {
     container
   } = options;
   const exists = document.getElementById(OPEN_POP_OUT_BUTTON_ID);
-  const button = exists || document.createElement('button');
+  const button = exists || document.createElement("button");
   configureButton(button, options);
   if (!exists) {
     container.appendChild(button);
@@ -741,9 +738,9 @@ const setPopOutButtonDisabled = disabled => {
     const button = document.getElementById(OPEN_POP_OUT_BUTTON_ID);
     if (button) {
       if (disabled) {
-        button.setAttribute('disabled', disabled.toString());
+        button.setAttribute("disabled", disabled.toString());
       } else {
-        button.removeAttribute('disabled');
+        button.removeAttribute("disabled");
       }
     }
   } catch (e) {
@@ -766,31 +763,42 @@ const removePopOutButton = () => {
 const WIDTH = Math.min(480, window.screen.width);
 const HEIGHT = Math.min(840, window.screen.height);
 let popOutWindow;
-const createPopOutWindow = (url, width, height) => {
+const createPopOutWindow = (sid, url, width, height) => {
   return new Promise(resolve => {
     try {
-      // Opens a centered pop up window
+      // Creates a centered pop up window
       const left = window.screenX + (window.outerWidth - width) / 2;
       const top = window.screenY + (window.outerHeight - height) / 2;
       const features = `width=${width},height=${height},left=${left},top=${top},location=no,menubar=no,toolbar=no,status=no`;
-      const popOut = window.open(url, 'dintero-checkout', features);
+      let popOut;
+      let timeout = -1;
+      // Set up listener for application loaded message from pop out window
+      const handleAppLoaded = event => {
+        const correctSource = event.source === popOut;
+        const correctOrigin = event.origin === new URL(url).origin;
+        const correctMessage = event.data && event.data.type === "AppLoaded";
+        const correctContext = event.data.context === "popOut";
+        const correctSid = event.data.sid === sid;
+        if (correctSource && correctOrigin && correctMessage && correctContext && correctSid) {
+          clearTimeout(timeout);
+          resolve(popOut);
+          window.removeEventListener("message", handleAppLoaded);
+        }
+      };
+      window.addEventListener("message", handleAppLoaded);
+      // Open pop out
+      popOut = window.open(url, "dintero-checkout", features);
+      // Check that pop out was opened
       if (!popOut) {
-        console.log('createPopOutWindow no popOut');
+        console.log("createPopOutWindow no popOut");
         resolve(undefined);
         return;
       }
-      const timeout = window.setTimeout(() => {
-        console.log('createPopOutWindow timeout');
+      // Trigger timeout if pop out is not loaded
+      timeout = window.setTimeout(() => {
+        console.log("createPopOutWindow timeout");
         resolve(undefined);
       }, 3000);
-      popOut.addEventListener('load', event => {
-        console.log('createPopOutWindow loaded', {
-          popOut,
-          event
-        });
-        clearTimeout(timeout);
-        resolve(popOut);
-      });
     } catch (err) {
       resolve(undefined);
     }
@@ -806,7 +814,7 @@ const openPopOut = async options => {
 
   // Open popup window
   const url = getPopOutUrl(options);
-  popOutWindow = await createPopOutWindow(url, WIDTH, HEIGHT);
+  popOutWindow = await createPopOutWindow(options.sid, url, WIDTH, HEIGHT);
   const focusPopOut = () => {
     if (popOutWindow) {
       popOutWindow.focus();
@@ -815,7 +823,7 @@ const openPopOut = async options => {
   const cleanUpClosed = () => {
     window.clearInterval(intervalId);
     intervalId = -1;
-    window.removeEventListener('beforeunload', closePopOut);
+    window.removeEventListener("beforeunload", closePopOut);
     popOutWindow = undefined;
     options.onClose();
     if (unsubscribe) {
@@ -835,7 +843,7 @@ const openPopOut = async options => {
   };
 
   // Close pop out if current window is closed
-  window.addEventListener('beforeunload', closePopOut);
+  window.addEventListener("beforeunload", closePopOut);
 
   // Check if checkout is still open
   intervalId = window.setInterval(checkIfPopupClosed, 200);
@@ -875,8 +883,8 @@ const setIframeHeight = (event, checkout) => {
 const scrollToIframeTop = (event, checkout) => {
   try {
     checkout.iframe.scrollIntoView({
-      block: 'start',
-      behavior: 'smooth'
+      block: "start",
+      behavior: "smooth"
     });
   } catch (e) {
     // Ignore error silently bug log it to the console.
@@ -935,7 +943,7 @@ const createPopOutMessageHandler = (source, checkout) => {
           console.error(e);
         }
       } else {
-        console.error('Payment Complete event missing href property');
+        console.error("Payment Complete event missing href property");
       }
     }
   };
@@ -943,7 +951,7 @@ const createPopOutMessageHandler = (source, checkout) => {
   // Listens to messages from pop out window and routes the events to dedicated handlers
   const messageRouter = event => {
     // Check that we should handle the message
-    if (event.source === source && event.data.context === 'popOut' && event.data.sid === checkout.options.sid) {
+    if (event.source === source && event.data.context === "popOut" && event.data.sid === checkout.options.sid) {
       // Check if handler matches incoming event and trigger the handler if so.
       [
       // SDK events for managing the pop out flow.
@@ -960,11 +968,11 @@ const createPopOutMessageHandler = (source, checkout) => {
     }
   };
   // Add messageRouter event listener to the Pop Out
-  window.addEventListener('message', messageRouter);
+  window.addEventListener("message", messageRouter);
 
   // Return unsubscribe function
   return () => {
-    window.removeEventListener('message', messageRouter);
+    window.removeEventListener("message", messageRouter);
   };
 };
 
@@ -1060,7 +1068,7 @@ const handlePopOutButtonClick = async (event, checkout) => {
       console.error(e);
       postValidationResult(checkout.iframe, checkout.options.sid, {
         success: false,
-        clientValidationError: 'Validation runtime error'
+        clientValidationError: "Validation runtime error"
       });
     }
   }
@@ -1120,9 +1128,9 @@ const cleanUpPopOut = checkout => {
  */
 const embed = async options => {
   // Create inner container to offset any styling on the container.
-  const innerContainer = document.createElement('div');
-  innerContainer.style.position = 'relative';
-  innerContainer.style['box-sizing'] = 'border-box';
+  const innerContainer = document.createElement("div");
+  innerContainer.style.position = "relative";
+  innerContainer.style["box-sizing"] = "border-box";
   const internalOptions = {
     endpoint: "https://checkout.dintero.com",
     innerContainer: innerContainer,