@rebilly/instruments 3.7.2-beta.0 → 3.7.3-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rebilly/instruments",
-  "version": "3.7.2-beta.0",
+  "version": "3.7.3-beta.0",
   "author": "Rebilly",
   "main": "dist/index.js",
   "unpkg": "dist/index.min.js",

package/src/loader/index.js

@@ -1,17 +1,19 @@
 import isDOMElement from '../utils/is-dom-element';
 
+export const loaderHTML = `
+  <div class="rebilly-instruments-loader is-active">
+    <div class="rebilly-instruments-loader-spinner"></div>
+    <span class="rebilly-instuments-loader-message"></span>
+  </div>
+`
+
 export class Loader {
   constructor() {
     this.summary = [];
     this.form = [];
     this.modal = [];
     this.DOM = {
-      loading: `
-                <div class="rebilly-instruments-loader is-active">
-                    <div class="rebilly-instruments-loader-spinner"></div>
-                    <span class="rebilly-instuments-loader-message"><span>
-                </div>
-            `
+      loading: loaderHTML
     };
   }
 

package/src/style/components/button.js

@@ -96,4 +96,22 @@ export const button = () => `
   .rebilly-instruments-button-group .rebilly-instruments-button:last-of-type {
     margin-right: 0;
   }
+
+  @media screen and (max-width: 480px) {
+    .rebilly-instruments-button-group {
+      flex-direction: column-reverse;
+    }
+
+    .rebilly-instruments-button-group .rebilly-instruments-button:first-of-type {
+      margin: 0;
+    }
+  
+    .rebilly-instruments-button-group .rebilly-instruments-button:last-of-type {
+      margin: 0;
+    }
+
+    .rebilly-instruments-button-group .rebilly-instruments-button + .rebilly-instruments-button {
+      margin-bottom: var(--rebilly-spacings-s);
+    } 
+  }
 `;

package/src/style/components/methods.js

@@ -80,7 +80,7 @@ export const expressMethods = () => `
     }
     .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container > * {
       max-width: 100%;
-      margin: 0 0 var(--rebilly-spacings-xs);
+      margin: 0 0 var(--rebilly-spacings-s);
     }
     .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container > *:last-child {
       margin: 0;

package/src/style/vendor/postmate.js

@@ -2,11 +2,8 @@ export const postmateStyle = () => `
     .rebilly-instruments-iframe {
       border: none;
       width: 100%;
+      padding: 0;
       min-height: var(--rebilly-spacings-form-element-min-height);
-      transition: all 0.2s ease;
-      transition: width 0s ease;
-      transition: height 0s ease;
-      transition: position 0s ease;
     }
 
     .rebilly-instruments-iframe-overlay {

package/src/views/common/iframe/base-iframe.js

@@ -1,4 +1,6 @@
 import Postmate from 'popostmate';
+import { SUPPORTED_METHODS } from '../../method-selector/get-payment-methods';
+import { loaderHTML } from '../../../loader';
 
 export default class BaseIframe {
   constructor({
@@ -48,6 +50,10 @@ export default class BaseIframe {
       },
     };
 
+    if (SUPPORTED_METHODS.includes(this.name)) {
+      this.container.insertAdjacentHTML('beforeend', loaderHTML);
+    }
+
     const component = await new Postmate({
       name: this.name,
       url: this.url,

package/src/views/common/iframe/event-listeners.js

@@ -14,6 +14,12 @@ export function resizeComponentHandler(iframe) {
 }
 
 export function stopLoaderHandler(iframe, data = { section: 'form' }) {
+  const iframeLoader = iframe.container.querySelectorAll('.rebilly-instruments-loader.is-active');
+
+  if (iframeLoader && iframeLoader.length) {
+    iframeLoader.forEach(loader => loader.classList.remove('is-active'));
+  }
+  
   iframe.component.on(`${iframe.name}-stop-loading`, (id = null) => {
     data.loader?.stopLoading({ section: data.section, id: id || data.id });
   });

package/src/views/method-selector/get-payment-methods.js

@@ -1,20 +1,13 @@
-/* eslint-disable no-unused-expressions, arrow-body-style */
-import { getMethodData } from './get-method-data';
-
 const SUPPORTED_EXPRESS_METHODS = ['Google Pay', 'Apple Pay', 'paypal'];
 
-const SUPPORTED_METHODS = ['payment-card', 'ach'];
+export const SUPPORTED_METHODS = ['payment-card', 'ach'];
 
-const isExpressMethod = ({ method, feature }) => {
-  return (
+const isExpressMethod = ({ method, feature }) => (
     SUPPORTED_EXPRESS_METHODS.includes(method) ||
     SUPPORTED_EXPRESS_METHODS.includes(feature?.name)
   );
-};
 
-const isSupportedMethod = ({ method }) => {
-  return SUPPORTED_METHODS.includes(method);
-};
+const isSupportedMethod = ({ method }) => SUPPORTED_METHODS.includes(method);
 
 // TODO: just loader is used. We could simplify signature
 export function getPaymentMethods({ state }) {
@@ -25,13 +18,8 @@ export function getPaymentMethods({ state }) {
 
   state.data.readyToPay?.forEach((method) => {
     if (isExpressMethod(method)) {
-      const { METHOD_TYPE } = getMethodData(method);
-      // Add loader entry per express method
-      state.loader.startLoading({ id: `${METHOD_TYPE}-express` });
       result.EXPRESS_METHODS.push(method);
     } else if (isSupportedMethod(method)) {
-      // Add loader entry per method
-      state.loader.startLoading({ id: method.method });
       result.METHODS.push(method);
     }
   });

package/src/views/method-selector/mount-methods.js

@@ -82,7 +82,7 @@ export function MountMethods({
                 <span class="rebilly-instruments-accordion-title" data-rebilly-i18n="paymentMethods.${method.method}">${method.metadata.name}</span>
                 <span class="rebilly-instruments-accordion-summary-checkmark"></span>
             </summary>
-            <div id="${selector}" data-rebilly-instruments-type="${methodId}"></div>
+            <div id="${selector}" data-rebilly-instruments-type="${methodId}" style="position: relative"></div>
         </details>`
       );