@dintero/checkout-web-sdk 0.6.4 → 0.6.5

package/.github/dependabot.yml

@@ -3,8 +3,21 @@ updates:
   - package-ecosystem: npm
     directory: "/"
     schedule:
-      interval: daily
+      interval: weekly
     commit-message:
       prefix: fix
       prefix-development: chore
       include: scope
+    groups:
+      babel:
+        patterns:
+          - "@babel/*"
+      semantic-release:
+        patterns:
+          - "@semantic-release/*"
+          - "semantic-release"
+      vitest-webdriverio:
+        patterns:
+          - "@vitest/*"
+          - "vitest"
+          - "webdriverio"

package/dist/dintero-checkout-web-sdk.cjs.d.ts

@@ -1,2 +1,2 @@
 export * from "./declarations/src/index";
-//# sourceMappingURL=dintero-checkout-web-sdk.cjs.d.ts.map
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGludGVyby1jaGVja291dC13ZWItc2RrLmNqcy5kLnRzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi9kZWNsYXJhdGlvbnMvc3JjL2luZGV4LmQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEifQ==

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

@@ -6,7 +6,7 @@ require('native-promise-only');
 
 var pkg = {
 	name: "@dintero/checkout-web-sdk",
-	version: "0.6.4",
+	version: "0.6.5",
 	description: "Dintero Checkout SDK for web frontends",
 	main: "dist/dintero-checkout-web-sdk.cjs.js",
 	module: "dist/dintero-checkout-web-sdk.esm.js",
@@ -17,10 +17,9 @@ var pkg = {
 		umdName: "dintero"
 	},
 	scripts: {
-		"patch-vitest": "patch -u node_modules/vitest/dist/vendor-node.a7c48fe1.js -i patches/vitest+0.34.6.patch --forward || true",
-		build: "preconstruct build",
+		build: "yarn tsc --noEmit && preconstruct build",
 		lint: "prettier --cache --log-level warn -c --config .prettierrc.yml .",
-		test: "yarn patch-vitest && $(yarn bin)/vitest --browser.name=chrome --browser.headless",
+		test: "vitest --browser.name=chrome --browser.headless",
 		"semantic-release": "semantic-release",
 		prepublishOnly: "yarn run build"
 	},
@@ -36,16 +35,16 @@ var pkg = {
 		url: "https://github.com/Dintero/Dintero.Checkout.Web.SDK/issues"
 	},
 	devDependencies: {
-		"@babel/core": "7.23.5",
+		"@babel/core": "7.23.7",
 		"@babel/preset-typescript": "7.23.3",
-		"@preconstruct/cli": "2.8.1",
+		"@preconstruct/cli": "2.8.3",
 		"@semantic-release/git": "10.0.1",
-		"@vitest/browser": "0.34.6",
-		prettier: "3.1.0",
-		"semantic-release": "22.0.8",
-		typescript: "5.3.2",
-		vitest: "0.34.6",
-		webdriverio: "8.24.6"
+		"@vitest/browser": "1.2.0",
+		prettier: "3.1.1",
+		"semantic-release": "22.0.12",
+		typescript: "5.3.3",
+		vitest: "1.2.0",
+		webdriverio: "8.27.2"
 	},
 	dependencies: {
 		"native-promise-only": "0.8.1"
@@ -83,8 +82,7 @@ const windowLocationAssign = url => {
 };
 
 /**
- * Get the url for the session./yarn-error.log
-.DS_Store
+ * Get the url for the session
  */
 
 const getSessionUrl = options => {
@@ -144,6 +142,11 @@ const getPopOutUrl = ({
   }
   return `${padTralingSlash(endpoint)}?${params.toString()}`;
 };
+const url = {
+  getPopOutUrl,
+  getSessionUrl,
+  windowLocationAssign
+};
 
 /**
  * Creates an iframe and adds it to the container.
@@ -677,7 +680,9 @@ const configureButton = (button, {
   left,
   right,
   styles,
-  onClick
+  onClick,
+  stylesHover,
+  stylesFocusVisible
 }) => {
   button.setAttribute("id", OPEN_POP_OUT_BUTTON_ID);
   button.setAttribute("type", "button");
@@ -717,9 +722,49 @@ const configureButton = (button, {
   button.style.right = right + "px";
 
   // Appearance from checkout
-  for (const [key, value] of Object.entries(styles)) {
+  const {
+    ...directStyles
+  } = styles;
+  for (const [key, value] of Object.entries(directStyles)) {
     button.style[key] = value;
   }
+
+  // Add hover and focus-visible styles
+  try {
+    addHoverAndFocusVisibleStyles(stylesHover, stylesFocusVisible);
+  } catch (e) {
+    console.error(e);
+  }
+};
+const addHoverAndFocusVisibleStyles = (stylesHover, stylesFocusVisible) => {
+  if (!stylesHover && !stylesFocusVisible) {
+    return;
+  }
+  const styleId = `${OPEN_POP_OUT_BUTTON_ID}-styles`;
+  const hasStyles = document.getElementById(styleId);
+  if (hasStyles) {
+    return;
+  }
+  const style = document.createElement("style");
+  style.setAttribute("id", styleId);
+  let content = [];
+  if (stylesHover) {
+    content.push(toCssEntity(`#${OPEN_POP_OUT_BUTTON_ID}:hover:not(:disabled)`, stylesHover));
+  }
+  if (stylesFocusVisible) {
+    content.push(toCssEntity(`#${OPEN_POP_OUT_BUTTON_ID}:focus-visible`, stylesFocusVisible));
+  }
+  style.textContent = content.join("\n");
+  document.head.appendChild(style);
+};
+const toCssEntity = (selector, keyValues) => {
+  return [`${selector} {`, toCssParameters(keyValues), `}`].join("\n");
+};
+const toCssParameters = keyValues => {
+  return Object.entries(keyValues).map(([key, value]) => `    ${slugify(key)}: ${value} !important;`).join("\n");
+};
+const slugify = str => {
+  return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
 };
 const addPopOutButton = options => {
   // Will add or update existing button
@@ -813,8 +858,8 @@ const openPopOut = async options => {
   }
 
   // Open popup window
-  const url = getPopOutUrl(options);
-  popOutWindow = await createPopOutWindow(options.sid, url, WIDTH, HEIGHT);
+  const popOutUrl = url.getPopOutUrl(options);
+  popOutWindow = await createPopOutWindow(options.sid, popOutUrl, WIDTH, HEIGHT);
   const focusPopOut = () => {
     if (popOutWindow) {
       popOutWindow.focus();
@@ -856,6 +901,9 @@ const openPopOut = async options => {
     popOutWindow
   };
 };
+const popOut = {
+  openPopOut
+};
 
 /**
  * An event handler that navigates to the href in the event.
@@ -863,7 +911,7 @@ const openPopOut = async options => {
 const followHref = (event, checkout) => {
   cleanUpPopOut(checkout);
   if (event.href) {
-    windowLocationAssign(event.href);
+    url.windowLocationAssign(event.href);
   }
 };
 
@@ -984,7 +1032,7 @@ const showPopOut = async (event, checkout) => {
     close,
     focus,
     popOutWindow
-  } = await openPopOut({
+  } = await popOut.openPopOut({
     sid: checkout.options.sid,
     endpoint: checkout.options.endpoint,
     shouldCallValidateSession: Boolean(checkout.options.onValidateSession),
@@ -1025,7 +1073,7 @@ const createPopOutValidationCallback = (event, checkout) => {
     postValidationResult(checkout.iframe, checkout.options.sid, result);
     if (result.success && checkout.popOutWindow) {
       // Redirect user to session in pop out window
-      checkout.popOutWindow.location.href = getPopOutUrl({
+      checkout.popOutWindow.location.href = url.getPopOutUrl({
         sid: checkout.options.sid,
         endpoint: checkout.options.endpoint,
         shouldCallValidateSession: false,
@@ -1093,6 +1141,8 @@ const handleShowButton = (event, checkout) => {
       left: event.left,
       right: event.right,
       styles: event.styles,
+      stylesHover: event.stylesHover,
+      stylesFocusVisible: event.stylesFocusVisible,
       disabled: event.disabled,
       onClick: () => handlePopOutButtonClick(event, checkout)
     });
@@ -1122,6 +1172,10 @@ const cleanUpPopOut = checkout => {
     }
   }
 };
+const composeUrl = (base, path, query) => {
+  const slash = base.endsWith("/") ? "" : "/";
+  return `${base}${slash}${path}?${query}`;
+};
 
 /**
  * Show a dintero payment session in an embedded iframe.
@@ -1162,7 +1216,7 @@ const embed = async options => {
   const {
     iframe,
     initiate
-  } = createIframeAsync(innerContainer, endpoint, getSessionUrl({
+  } = createIframeAsync(innerContainer, endpoint, url.getSessionUrl({
     sid,
     endpoint,
     language,
@@ -1261,7 +1315,7 @@ const embed = async options => {
         pairs.push(["language", checkout.language]);
         pairs.push(["sdk", pkg.version]);
         const urlQuery = pairs.filter(([key, value]) => value).map(([key, value]) => `${key}=${value}`).join("&");
-        checkout.iframe.setAttribute("src", `${endpoint}/embedResult/?${urlQuery}`);
+        checkout.iframe.setAttribute("src", composeUrl(endpoint, "embedResult/", urlQuery));
         handler(event, checkout);
       }
     };
@@ -1310,15 +1364,15 @@ const embed = async options => {
     eventTypes: [CheckoutEvents.SessionLoaded, CheckoutEvents.SessionUpdated]
   }, {
     eventTypes: [CheckoutEvents.SessionPaymentOnHold],
-    handler: onPayment ? handleWithResult(sid, endpoint, onPayment) : followHref
+    handler: handleWithResult(sid, endpoint, onPayment || followHref)
   }, {
     eventTypes: [CheckoutEvents.SessionPaymentAuthorized],
-    handler: onPaymentAuthorized || onPayment ? handleWithResult(sid, endpoint, onPaymentAuthorized || onPayment) : followHref
+    handler: handleWithResult(sid, endpoint, onPaymentAuthorized || onPayment || followHref)
   }, {
-    handler: onSessionCancel ? handleWithResult(sid, endpoint, onSessionCancel) : followHref,
+    handler: handleWithResult(sid, endpoint, onSessionCancel || followHref),
     eventTypes: [CheckoutEvents.SessionCancel]
   }, {
-    handler: onPaymentError ? handleWithResult(sid, endpoint, onPaymentError) : followHref,
+    handler: handleWithResult(sid, endpoint, onPaymentError || followHref),
     eventTypes: [CheckoutEvents.SessionPaymentError]
   }, {
     handler: onSessionNotFound,
@@ -1388,7 +1442,7 @@ const redirect = options => {
     endpoint = "https://checkout.dintero.com"
   } = options;
   // Redirect the current browser window to the checkout session url.
-  windowLocationAssign(getSessionUrl({
+  url.windowLocationAssign(url.getSessionUrl({
     sid,
     endpoint,
     language,

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.4",
+	version: "0.6.5",
 	description: "Dintero Checkout SDK for web frontends",
 	main: "dist/dintero-checkout-web-sdk.cjs.js",
 	module: "dist/dintero-checkout-web-sdk.esm.js",
@@ -17,10 +17,9 @@ var pkg = {
 		umdName: "dintero"
 	},
 	scripts: {
-		"patch-vitest": "patch -u node_modules/vitest/dist/vendor-node.a7c48fe1.js -i patches/vitest+0.34.6.patch --forward || true",
-		build: "preconstruct build",
+		build: "yarn tsc --noEmit && preconstruct build",
 		lint: "prettier --cache --log-level warn -c --config .prettierrc.yml .",
-		test: "yarn patch-vitest && $(yarn bin)/vitest --browser.name=chrome --browser.headless",
+		test: "vitest --browser.name=chrome --browser.headless",
 		"semantic-release": "semantic-release",
 		prepublishOnly: "yarn run build"
 	},
@@ -36,16 +35,16 @@ var pkg = {
 		url: "https://github.com/Dintero/Dintero.Checkout.Web.SDK/issues"
 	},
 	devDependencies: {
-		"@babel/core": "7.23.5",
+		"@babel/core": "7.23.7",
 		"@babel/preset-typescript": "7.23.3",
-		"@preconstruct/cli": "2.8.1",
+		"@preconstruct/cli": "2.8.3",
 		"@semantic-release/git": "10.0.1",
-		"@vitest/browser": "0.34.6",
-		prettier: "3.1.0",
-		"semantic-release": "22.0.8",
-		typescript: "5.3.2",
-		vitest: "0.34.6",
-		webdriverio: "8.24.6"
+		"@vitest/browser": "1.2.0",
+		prettier: "3.1.1",
+		"semantic-release": "22.0.12",
+		typescript: "5.3.3",
+		vitest: "1.2.0",
+		webdriverio: "8.27.2"
 	},
 	dependencies: {
 		"native-promise-only": "0.8.1"
@@ -83,8 +82,7 @@ const windowLocationAssign = url => {
 };
 
 /**
- * Get the url for the session./yarn-error.log
-.DS_Store
+ * Get the url for the session
  */
 
 const getSessionUrl = options => {
@@ -144,6 +142,11 @@ const getPopOutUrl = ({
   }
   return `${padTralingSlash(endpoint)}?${params.toString()}`;
 };
+const url = {
+  getPopOutUrl,
+  getSessionUrl,
+  windowLocationAssign
+};
 
 /**
  * Creates an iframe and adds it to the container.
@@ -677,7 +680,9 @@ const configureButton = (button, {
   left,
   right,
   styles,
-  onClick
+  onClick,
+  stylesHover,
+  stylesFocusVisible
 }) => {
   button.setAttribute("id", OPEN_POP_OUT_BUTTON_ID);
   button.setAttribute("type", "button");
@@ -717,9 +722,49 @@ const configureButton = (button, {
   button.style.right = right + "px";
 
   // Appearance from checkout
-  for (const [key, value] of Object.entries(styles)) {
+  const {
+    ...directStyles
+  } = styles;
+  for (const [key, value] of Object.entries(directStyles)) {
     button.style[key] = value;
   }
+
+  // Add hover and focus-visible styles
+  try {
+    addHoverAndFocusVisibleStyles(stylesHover, stylesFocusVisible);
+  } catch (e) {
+    console.error(e);
+  }
+};
+const addHoverAndFocusVisibleStyles = (stylesHover, stylesFocusVisible) => {
+  if (!stylesHover && !stylesFocusVisible) {
+    return;
+  }
+  const styleId = `${OPEN_POP_OUT_BUTTON_ID}-styles`;
+  const hasStyles = document.getElementById(styleId);
+  if (hasStyles) {
+    return;
+  }
+  const style = document.createElement("style");
+  style.setAttribute("id", styleId);
+  let content = [];
+  if (stylesHover) {
+    content.push(toCssEntity(`#${OPEN_POP_OUT_BUTTON_ID}:hover:not(:disabled)`, stylesHover));
+  }
+  if (stylesFocusVisible) {
+    content.push(toCssEntity(`#${OPEN_POP_OUT_BUTTON_ID}:focus-visible`, stylesFocusVisible));
+  }
+  style.textContent = content.join("\n");
+  document.head.appendChild(style);
+};
+const toCssEntity = (selector, keyValues) => {
+  return [`${selector} {`, toCssParameters(keyValues), `}`].join("\n");
+};
+const toCssParameters = keyValues => {
+  return Object.entries(keyValues).map(([key, value]) => `    ${slugify(key)}: ${value} !important;`).join("\n");
+};
+const slugify = str => {
+  return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
 };
 const addPopOutButton = options => {
   // Will add or update existing button
@@ -813,8 +858,8 @@ const openPopOut = async options => {
   }
 
   // Open popup window
-  const url = getPopOutUrl(options);
-  popOutWindow = await createPopOutWindow(options.sid, url, WIDTH, HEIGHT);
+  const popOutUrl = url.getPopOutUrl(options);
+  popOutWindow = await createPopOutWindow(options.sid, popOutUrl, WIDTH, HEIGHT);
   const focusPopOut = () => {
     if (popOutWindow) {
       popOutWindow.focus();
@@ -856,6 +901,9 @@ const openPopOut = async options => {
     popOutWindow
   };
 };
+const popOut = {
+  openPopOut
+};
 
 /**
  * An event handler that navigates to the href in the event.
@@ -863,7 +911,7 @@ const openPopOut = async options => {
 const followHref = (event, checkout) => {
   cleanUpPopOut(checkout);
   if (event.href) {
-    windowLocationAssign(event.href);
+    url.windowLocationAssign(event.href);
   }
 };
 
@@ -984,7 +1032,7 @@ const showPopOut = async (event, checkout) => {
     close,
     focus,
     popOutWindow
-  } = await openPopOut({
+  } = await popOut.openPopOut({
     sid: checkout.options.sid,
     endpoint: checkout.options.endpoint,
     shouldCallValidateSession: Boolean(checkout.options.onValidateSession),
@@ -1025,7 +1073,7 @@ const createPopOutValidationCallback = (event, checkout) => {
     postValidationResult(checkout.iframe, checkout.options.sid, result);
     if (result.success && checkout.popOutWindow) {
       // Redirect user to session in pop out window
-      checkout.popOutWindow.location.href = getPopOutUrl({
+      checkout.popOutWindow.location.href = url.getPopOutUrl({
         sid: checkout.options.sid,
         endpoint: checkout.options.endpoint,
         shouldCallValidateSession: false,
@@ -1093,6 +1141,8 @@ const handleShowButton = (event, checkout) => {
       left: event.left,
       right: event.right,
       styles: event.styles,
+      stylesHover: event.stylesHover,
+      stylesFocusVisible: event.stylesFocusVisible,
       disabled: event.disabled,
       onClick: () => handlePopOutButtonClick(event, checkout)
     });
@@ -1122,6 +1172,10 @@ const cleanUpPopOut = checkout => {
     }
   }
 };
+const composeUrl = (base, path, query) => {
+  const slash = base.endsWith("/") ? "" : "/";
+  return `${base}${slash}${path}?${query}`;
+};
 
 /**
  * Show a dintero payment session in an embedded iframe.
@@ -1162,7 +1216,7 @@ const embed = async options => {
   const {
     iframe,
     initiate
-  } = createIframeAsync(innerContainer, endpoint, getSessionUrl({
+  } = createIframeAsync(innerContainer, endpoint, url.getSessionUrl({
     sid,
     endpoint,
     language,
@@ -1261,7 +1315,7 @@ const embed = async options => {
         pairs.push(["language", checkout.language]);
         pairs.push(["sdk", pkg.version]);
         const urlQuery = pairs.filter(([key, value]) => value).map(([key, value]) => `${key}=${value}`).join("&");
-        checkout.iframe.setAttribute("src", `${endpoint}/embedResult/?${urlQuery}`);
+        checkout.iframe.setAttribute("src", composeUrl(endpoint, "embedResult/", urlQuery));
         handler(event, checkout);
       }
     };
@@ -1310,15 +1364,15 @@ const embed = async options => {
     eventTypes: [CheckoutEvents.SessionLoaded, CheckoutEvents.SessionUpdated]
   }, {
     eventTypes: [CheckoutEvents.SessionPaymentOnHold],
-    handler: onPayment ? handleWithResult(sid, endpoint, onPayment) : followHref
+    handler: handleWithResult(sid, endpoint, onPayment || followHref)
   }, {
     eventTypes: [CheckoutEvents.SessionPaymentAuthorized],
-    handler: onPaymentAuthorized || onPayment ? handleWithResult(sid, endpoint, onPaymentAuthorized || onPayment) : followHref
+    handler: handleWithResult(sid, endpoint, onPaymentAuthorized || onPayment || followHref)
   }, {
-    handler: onSessionCancel ? handleWithResult(sid, endpoint, onSessionCancel) : followHref,
+    handler: handleWithResult(sid, endpoint, onSessionCancel || followHref),
     eventTypes: [CheckoutEvents.SessionCancel]
   }, {
-    handler: onPaymentError ? handleWithResult(sid, endpoint, onPaymentError) : followHref,
+    handler: handleWithResult(sid, endpoint, onPaymentError || followHref),
     eventTypes: [CheckoutEvents.SessionPaymentError]
   }, {
     handler: onSessionNotFound,
@@ -1388,7 +1442,7 @@ const redirect = options => {
     endpoint = "https://checkout.dintero.com"
   } = options;
   // Redirect the current browser window to the checkout session url.
-  windowLocationAssign(getSessionUrl({
+  url.windowLocationAssign(url.getSessionUrl({
     sid,
     endpoint,
     language,