@rebilly/instruments 3.0.0-beta.0 → 3.1.2-beta.0

package/src/storefront/ready-to-pay.js

@@ -28,12 +28,13 @@ export async function fetchReadyToPay({ state, riskMetadata = null }) {
     const { fields: readyToPayFields } =
       await state.storefront.purchase.readyToPay({ data });
 
-    return Object.values(readyToPayFields).map(
-      (fields, index) =>
-        new ReadyToPayModel({
+    return Object.values(readyToPayFields)
+      // Remove result for "old" paypal method
+      .filter((fields) => !(fields.method === 'paypal' && !fields.feature))
+      .map((fields, index) => new ReadyToPayModel({
           index,
           ...fields
         })
-    );
+      );
   });
 }

package/src/style/base/__snapshots__/theme.spec.js.snap

@@ -3,7 +3,15 @@
 exports[`RebillyInstruments theme builds the theme object 1`] = `
 Object {
   "borderRadius": "4px",
+  "buttonActiveBorder": "var(--rebilly-buttonHoverBorder)",
+  "buttonActiveBorderRadius": "var(--rebilly-buttonHoverBorderRadius)",
+  "buttonActiveBoxShadow": "var(--rebilly-buttonHoverBoxShadow)",
   "buttonActiveColorBackground": "var(--rebilly-buttonHoverColorBackground)",
+  "buttonActiveColorText": "var(--rebilly-buttonHoverColorText)",
+  "buttonActiveFontFamily": "var(--rebilly-buttonHoverFontFamily)",
+  "buttonActiveFontLineHeight": "var(--rebilly-buttonHoverFontLineHeight)",
+  "buttonActiveFontSize": "var(--rebilly-buttonHoverFontSize)",
+  "buttonActiveFontWeight": "var(--rebilly-buttonHoverFontWeight)",
   "buttonBorder": "1px solid transparent",
   "buttonBorderRadius": "var(--rebilly-borderRadius)",
   "buttonBoxShadow": "none",
@@ -13,7 +21,15 @@ Object {
   "buttonFontLineHeight": "1.5",
   "buttonFontSize": "var(--rebilly-fontSizeBase)",
   "buttonFontWeight": "var(--rebilly-fontWeightBase)",
+  "buttonHoverBorder": "1px solid #0036aa",
+  "buttonHoverBorderRadius": "var(--rebilly-buttonBorderRadius)",
+  "buttonHoverBoxShadow": "var(--rebilly-buttonBoxShadow)",
   "buttonHoverColorBackground": "#0036aa",
+  "buttonHoverColorText": "var(--rebilly-buttonColorText)",
+  "buttonHoverFontFamily": "var(--rebilly-buttonFontFamily)",
+  "buttonHoverFontLineHeight": "var(--rebilly-buttonFontLineHeight)",
+  "buttonHoverFontSize": "var(--rebilly-buttonFontSize)",
+  "buttonHoverFontWeight": "var(--rebilly-buttonFontWeight)",
   "colorBackground": "#FFFFFF",
   "colorDanger": "#CD5C5C",
   "colorMutedBorder": "rgba(13, 43, 62, 0.25)",
@@ -45,7 +61,23 @@ Object {
 --rebilly-buttonBorderRadius: var(--rebilly-borderRadius);
 --rebilly-buttonBoxShadow: none;
 --rebilly-buttonHoverColorBackground: #0036aa;
+--rebilly-buttonHoverColorText: var(--rebilly-buttonColorText);
+--rebilly-buttonHoverFontFamily: var(--rebilly-buttonFontFamily);
+--rebilly-buttonHoverFontSize: var(--rebilly-buttonFontSize);
+--rebilly-buttonHoverFontLineHeight: var(--rebilly-buttonFontLineHeight);
+--rebilly-buttonHoverFontWeight: var(--rebilly-buttonFontWeight);
+--rebilly-buttonHoverBorder: 1px solid #0036aa;
+--rebilly-buttonHoverBorderRadius: var(--rebilly-buttonBorderRadius);
+--rebilly-buttonHoverBoxShadow: var(--rebilly-buttonBoxShadow);
 --rebilly-buttonActiveColorBackground: var(--rebilly-buttonHoverColorBackground);
+--rebilly-buttonActiveColorText: var(--rebilly-buttonHoverColorText);
+--rebilly-buttonActiveFontFamily: var(--rebilly-buttonHoverFontFamily);
+--rebilly-buttonActiveFontSize: var(--rebilly-buttonHoverFontSize);
+--rebilly-buttonActiveFontLineHeight: var(--rebilly-buttonHoverFontLineHeight);
+--rebilly-buttonActiveFontWeight: var(--rebilly-buttonHoverFontWeight);
+--rebilly-buttonActiveBorder: var(--rebilly-buttonHoverBorder);
+--rebilly-buttonActiveBorderRadius: var(--rebilly-buttonHoverBorderRadius);
+--rebilly-buttonActiveBoxShadow: var(--rebilly-buttonHoverBoxShadow);
 --rebilly-inputColorBackground: transparent;
 --rebilly-inputColorText: var(--rebilly-colorText);
 --rebilly-inputFontFamily: var(--rebilly-fontFamily);
@@ -79,7 +111,7 @@ Object {
 --rebilly-inputPlaceholderFontLineHeight: var(--rebilly-inputFontLineHeight);
 --rebilly-inputPlaceholderFontWeight: var(--rebilly-inputFontWeight);
 --rebilly-inputSelectionColorText: initial;
---rebilly-inputSelectionColorBackground: initial;
+--rebilly-inputSelectionColorBackground: highlight;
 --rebilly-inputErrorColorBackground: var(--rebilly-inputColorBackground);
 --rebilly-inputErrorColorText: var(--rebilly-colorDanger);
 --rebilly-inputErrorFontFamily: var(--rebilly-inputFontFamily);
@@ -188,7 +220,7 @@ Object {
   "inputPlaceholderFontLineHeight": "var(--rebilly-inputFontLineHeight)",
   "inputPlaceholderFontSize": "var(--rebilly-inputFontSize)",
   "inputPlaceholderFontWeight": "var(--rebilly-inputFontWeight)",
-  "inputSelectionColorBackground": "initial",
+  "inputSelectionColorBackground": "highlight",
   "inputSelectionColorText": "initial",
   "labels": "floating",
 }

package/src/style/base/default-theme.js

@@ -156,7 +156,7 @@ const properties = {
     }
   },
 
-  /** Buttons: Alternative States */
+  /** Buttons: Hover */
   buttonHoverColorBackground: {
     fallback: {
       type: 'func',
@@ -168,13 +168,116 @@ const properties = {
       }
     }
   },
-
+  buttonHoverColorText: {
+    fallback: {
+      type: 'variable',
+      value: 'buttonColorText',
+    }
+  },
+  buttonHoverFontFamily: {
+    fallback: {
+      type: 'variable',
+      value: 'buttonFontFamily',
+    }
+  },
+  buttonHoverFontSize: {
+    fallback: {
+      type: 'variable',
+      value: 'buttonFontSize',
+    }
+  },
+  buttonHoverFontLineHeight: {
+    fallback: {
+      type: 'variable',
+      value: 'buttonFontLineHeight',
+    }
+  },
+  buttonHoverFontWeight: {
+    fallback: {
+      type: 'variable',
+      value: 'buttonFontWeight',
+    }
+  },
+  buttonHoverBorder: {
+    fallback: {
+      type: 'func',
+      value: theme => {
+        if(theme.buttonBorderProvided) {
+          return theme.buttonBorder;
+        }
+        const buttonBorder = new Border(theme.buttonBorder);
+        return buttonBorder.updateColor(theme.buttonHoverColorBackground).value;
+      }
+    }
+  },
+  buttonHoverBorderRadius: {
+    fallback: {
+      type: 'variable',
+      value: 'buttonBorderRadius',
+    }
+  },
+  buttonHoverBoxShadow: {
+    fallback: {
+      type: 'variable',
+      value: 'buttonBoxShadow',
+    }
+  },
+  
+  /** Buttons: Active */
   buttonActiveColorBackground: {
     fallback: {
       type: 'variable',
       value: 'buttonHoverColorBackground',
     }
   },
+  buttonActiveColorText: {
+    fallback: {
+      type: 'variable',
+      value: 'buttonHoverColorText',
+    }
+  },
+  buttonActiveFontFamily: {
+    fallback: {
+      type: 'variable',
+      value: 'buttonHoverFontFamily',
+    }
+  },
+  buttonActiveFontSize: {
+    fallback: {
+      type: 'variable',
+      value: 'buttonHoverFontSize',
+    }
+  },
+  buttonActiveFontLineHeight: {
+    fallback: {
+      type: 'variable',
+      value: 'buttonHoverFontLineHeight',
+    }
+  },
+  buttonActiveFontWeight: {
+    fallback: {
+      type: 'variable',
+      value: 'buttonHoverFontWeight',
+    }
+  },
+  buttonActiveBorder: {
+    fallback: {
+      type: 'variable',
+      value: 'buttonHoverBorder'
+    }
+  },
+  buttonActiveBorderRadius: {
+    fallback: {
+      type: 'variable',
+      value: 'buttonHoverBorderRadius',
+    }
+  },
+  buttonActiveBoxShadow: {
+    fallback: {
+      type: 'variable',
+      value: 'buttonHoverBoxShadow',
+    }
+  },
 
   /** Inputs: Base */
   inputColorBackground: {
@@ -397,7 +500,7 @@ const properties = {
   inputSelectionColorBackground: {
     fallback: {
       type: 'static',
-      value: 'initial',
+      value: 'highlight',
     }
   },
 

package/src/style/components/button.js

@@ -12,7 +12,7 @@ export const button = () => `
     padding: var(--rebilly-spacings-button-py) var(--rebilly-spacings-button-px);
     box-sizing: border-box;
     background: var(--rebilly-buttonColorBackground);
-    color: var(--rebilly-buttonColorText, #FFF);
+    color: var(--rebilly-buttonColorText);
     border-radius: var(--rebilly-buttonBorderRadius);
     font-weight: var(--rebilly-buttonFontWeight);
     border: var(--rebilly-buttonBorder);
@@ -27,10 +27,26 @@ export const button = () => `
 
   .rebilly-instruments-button:not([disabled]):hover {
     background: var(--rebilly-buttonHoverColorBackground);
+    color: var(--rebilly-buttonHoverColorText);
+    font-family: var(--rebilly-buttonHoverFontFamily);
+    font-size: var(--rebilly-buttonHoverFontSize);
+    line-height: var(--rebilly-buttonHoverFontLineHeight);
+    font-weight: var(--rebilly-buttonHoverFontWeight);
+    border: var(--rebilly-buttonHoverBorder);
+    border-radius: var(--rebilly-buttonHoverBorderRadius);
+    box-shadow: var(--rebilly-buttonHoverBoxShadow);
   }
 
   .rebilly-instruments-button:not([disabled]):active {
     background: var(--rebilly-buttonActiveColorBackground);
+    color: var(--rebilly-buttonActiveColorText);
+    font-family: var(--rebilly-buttonActiveFontFamily);
+    font-size: var(--rebilly-buttonActiveFontSize);
+    line-height: var(--rebilly-buttonActiveFontLineHeight);
+    font-weight: var(--rebilly-buttonActiveFontWeight);
+    border: var(--rebilly-buttonActiveBorder);
+    border-radius: var(--rebilly-buttonActiveBorderRadius);
+    box-shadow: var(--rebilly-buttonActiveBoxShadow);
   }
 
   .rebilly-instruments-button.rebilly-instruments-button-secondary {

package/src/style/components/forms/label.js

@@ -42,11 +42,6 @@ export const label = () => `
     transform: translateY(-175%) scale(0.875);
   }
 
-  .is-floating .rebilly-instruments-form-field-select + .rebilly-instruments-form-field-label {
-    font-size: var(--rebilly-fontSizeBase);
-    opacity: 0.5;
-  }
-
   .is-floating .rebilly-instruments-form-field-input:focus + .rebilly-instruments-form-field-label,
   .is-floating .rebilly-instruments-form-field-select:focus + .rebilly-instruments-form-field-label,
   .is-floating .rebilly-instruments-form-field-label.is-active {

package/src/style/components/loader.js

@@ -15,8 +15,9 @@ export const loader = (theme) => `
     right: 0;
     justify-content: center;
     align-items: center;
+    flex-direction: column;
     background-color: var(--rebilly-colorBackground);
-    z-index: 9000;
+    z-index: 1000;
     transition: all 200ms;
   }
 

package/src/style/payment-instruments/payment-card.js

@@ -16,7 +16,8 @@ export const paymentCard = () => `
   }
 
   .rebilly-instruments-payment-card-brands figure img {
-    width: 42px;
+    width: auto;
+    height: 100%;
     border-radius: 4px;
   }
 

package/src/style/utils/remove-empty-null.js

@@ -1,10 +1,10 @@
-import postcss from 'postcss';
-
-export default postcss.plugin('postcss-remove-empty-null', () => (root) => {
-    root.walkDecls(decl => {
-        if ((decl.value === '\'\'' ||  decl.value === '""' || decl.value.includes('null')) && decl.prop !== 'content') {
-            decl.remove();
+export default () => ({
+        postcssPlugin: 'postcss-remove-empty-null',
+        Once (root) {
+            root.walkAtRules(decl => {
+                if ((decl.value === '\'\'' ||  decl.value === '""' || decl.value.includes('null')) && decl.prop !== 'content') {
+                    decl.remove();
+                }
+            });
         }
-    });
-  }
-);
+    })

package/src/style/vendor/postmate.js

@@ -4,5 +4,18 @@ export const postmateStyle = () => `
       width: 100%;
       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 {
+      top: -2px;
+      left: -2px;
+      width: calc(100vw + 2px);
+      height: 100vh;
+      min-height: calc(100vh + 4px);
+      position: fixed;
+      z-index: 99999999999999;
     }
   `;

package/src/style/views/confirmation.js

@@ -52,7 +52,8 @@ export const confirmation = () => `
   }
 
   .rebilly-instruments-confirmation-payment-method figure img {
-    width: 42px;
+    width: auto;
+    height: 100%;
     border-radius: 4px;
   }
 

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

@@ -43,6 +43,8 @@ export default class BaseIframe {
       model: this.model
     });
 
+    component.frame.setAttribute('allowpaymentrequest', 'allowpaymentrequest');
+    component.frame.setAttribute('allow', 'payment');
     return component;
   }
 }

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

@@ -25,3 +25,13 @@ export function changeIframeSrcHandler(iframe) {
     iframe.component.frame.style.height = '75vh';
   });
 }
+
+export function displayOverlay(iframe) {
+  iframe.component.on(`${iframe.name}-change-overlay`, (showOverlay = true) => {
+    if (showOverlay) {
+      iframe.component.frame.classList.add('rebilly-instruments-iframe-overlay');
+    } else {
+      iframe.component.frame.classList.remove('rebilly-instruments-iframe-overlay');
+    }
+  });
+}

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

@@ -2,7 +2,8 @@ import BaseIframe from './base-iframe';
 import {
   dispatchRebillyInsturmentEventHandler,
   resizeComponentHandler,
-  stopLoaderHandler
+  stopLoaderHandler,
+  displayOverlay
 } from './event-listeners';
 
 export class MethodIframe extends BaseIframe {
@@ -17,5 +18,6 @@ export class MethodIframe extends BaseIframe {
       loader,
       id
     });
+    displayOverlay(this);
   }
 }

package/src/views/confirmation.js

@@ -26,6 +26,7 @@ export async function mountConfirmation({ payload: instrument, state }) {
 
   const model = {
     options: state.options,
+    data: state.data.toPostmatesModel(),
     mainStyle: state.mainStyle,
     instrument
   };

package/src/views/method-selector/express-methods/{google-pay.js → index.js}

@@ -1,12 +1,13 @@
 import { MethodIframe } from '../../common/iframe';
 
-export default async function mountGooglePay({ state, METHOD_ID }) {
+export default async function mountExpressMethod({ state, METHOD_ID }) {
   const container = document.querySelector(`.rebilly-instruments-${METHOD_ID}-method`);
 
   const { paymentMethodsUrl } = state.options._computed;
 
   const model = {
-    options: state.options
+    options: state.options,
+    data: state.data.toPostmatesModel()
   };
 
   const iframe = await new MethodIframe({

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

@@ -1,7 +1,5 @@
-
-import mountGooglePay from './express-methods/google-pay';
+import mountExpressMethod from './express-methods';
 import mountApplePay from './express-methods/apple-pay';
-import mountPaypal from './express-methods/paypal';
 import { getMethodData } from './get-method-data';
 
 export function mountExpressMethods({
@@ -22,16 +20,9 @@ export function mountExpressMethods({
 
 
   EXPRESS_METHODS.forEach((expressMethod) => {
-    const { method, feature } = expressMethod;
+    const { feature } = expressMethod;
     const { METHOD_ID, METHOD_TYPE } = getMethodData(expressMethod);
 
-    if (feature?.name === 'Google Pay') {
-      mountGooglePay({
-        state,
-        METHOD_ID
-      });
-    }
-
     if (feature?.name === 'Apple Pay') {
       mountApplePay({
         state,
@@ -40,14 +31,11 @@ export function mountExpressMethods({
         EXPRESS_METHODS,
         EXPRESS_METHODS_CONTAINER
       });
-    }
-
-    if (method === 'paypal') {
-      mountPaypal({
+    } else {
+      mountExpressMethod({
         state,
-        METHOD_ID,
-        METHOD_TYPE,
-      });
+        METHOD_ID
+      })
     }
   });
 }

package/src/views/result.js

@@ -6,6 +6,7 @@ export async function mountResult({ payload, state }) {
   replaceContent(state.form, `<div class="${resultContainerClassName}"></div>`);
 
   state.loader.startLoading({ id: 'result' });
+  state.loader.stopLoading({ id: 'express-purchase' });
 
   const container = document.querySelector(`.${resultContainerClassName}`);
   const { paymentMethodsUrl } = state.options._computed;

package/tests/mocks/rebilly-instruments-mock.js

@@ -1,4 +1,4 @@
-import { RebillyInstrumentsInstance } from '@rebilly/instruments';
+import RebillyInstrumentsInstance from '@rebilly/instruments';
 import { createFramepayMock } from 'tests/mocks/framepay-mock';
 import { get, ok, post } from 'msw-when-then';
 import { when } from 'tests/msw/server';
@@ -103,7 +103,7 @@ export async function RenderMockRebillyInstruments(options = {}) {
   const framepayMock = createFramepayMock();
   global.Rebilly = framepayMock;
 
-  const rebillyInstruments = new RebillyInstrumentsInstance();
+  const rebillyInstruments = RebillyInstrumentsInstance;
 
   document.body.innerHTML = `
     <div class="${mergedOptions.form.replace('.', '')}"></div>

package/dist/events/base-event.js

@@ -1,66 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.registeredListeners = exports.RegisteredListeners = void 0;
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-class RegisteredListeners {
-  constructor() {
-    _defineProperty(this, "_listeners", {});
-  }
-
-  add(eventName, callback) {
-    document.addEventListener(eventName, callback, false);
-
-    if (!(eventName in this._listeners)) {
-      this._listeners[eventName] = [];
-    }
-
-    this._listeners[eventName].push(callback);
-  }
-
-  removeAll() {
-    Object.keys(this._listeners).forEach(eventName => {
-      this._listeners[eventName].forEach(callback => document.removeEventListener(eventName, callback, false));
-    });
-    this._listeners = {};
-  }
-
-}
-
-exports.RegisteredListeners = RegisteredListeners;
-const registeredListeners = new RegisteredListeners();
-exports.registeredListeners = registeredListeners;
-
-class BaseEvent {
-  /**
-   * @param {string} name
-   */
-  constructor(name) {
-    // Using namespaced internal name as a protection mechanism
-    const PREFIX = 'rebilly-instruments-';
-    this.internalName = PREFIX + name;
-  }
-
-  addEventListener(callback) {
-    const innerCallback = ({
-      detail
-    }) => callback(detail);
-
-    registeredListeners.add(this.internalName, innerCallback);
-  }
-
-  dispatch(detail) {
-    const event = new CustomEvent(this.internalName, {
-      bubbles: true,
-      detail
-    });
-    document.dispatchEvent(event);
-  }
-
-}
-
-exports.default = BaseEvent;

package/dist/events/events.spec.js

@@ -1,18 +0,0 @@
-"use strict";
-
-var _lodash = _interopRequireDefault(require("lodash.kebabcase"));
-
-var _ = _interopRequireWildcard(require("./"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-it('Should export all public event names', async () => {
-  Object.keys(_.default).forEach(internalEventName => {
-    expect(_.default[internalEventName].internalName).toEqual(`rebilly-instruments-${(0, _lodash.default)(internalEventName)}`);
-    expect((0, _lodash.default)(internalEventName) in _.publicEventNames);
-  });
-});

package/dist/events/index.js

@@ -1,22 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.publicEventNames = exports.default = void 0;
-
-var _lodash = _interopRequireDefault(require("lodash.kebabcase"));
-
-var _baseEvent = _interopRequireDefault(require("./base-event"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const events = {
-  instrumentReady: new _baseEvent.default('instrument-ready'),
-  purchaseCompleted: new _baseEvent.default('purchase-completed'),
-  setupCompleted: new _baseEvent.default('setup-completed')
-};
-var _default = events;
-exports.default = _default;
-const publicEventNames = Object.keys(events).map(internalName => (0, _lodash.default)(internalName));
-exports.publicEventNames = publicEventNames;

package/dist/functions/destroy.js

@@ -1,34 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.destroy = destroy;
-
-var _rebillyJsSdk = require("rebilly-js-sdk");
-
-var _baseEvent = require("../events/base-event");
-
-var _utils = require("../utils");
-
-async function destroy({
-  state
-}) {
-  // wait to allow for cancellation to catch any pending api requests
-  const sleepMilliseconds = 1000;
-  await (0, _utils.sleep)(sleepMilliseconds);
-  [...(state.iframeComponents || {})].forEach(iframe => {
-    iframe.destroy();
-  });
-
-  _baseEvent.registeredListeners.removeAll(document);
-
-  state.iframeComponents = [];
-  state.hasMounted = false;
-  state.summary.textContent = '';
-  state.form.textContent = '';
-
-  _rebillyJsSdk.cancellation.cancelAll();
-
-  state.loader.clearAll();
-}