@rebilly/instruments 3.1.0-beta.0 → 3.1.4-beta.0

package/src/style/components/button.js

@@ -57,6 +57,7 @@ export const button = () => `
 
   .rebilly-instruments-button.rebilly-instruments-button-secondary:not([disabled]):hover,
   .rebilly-instruments-button.rebilly-instruments-button-secondary:not([disabled]):active {
+    color: var(--rebilly-buttonColorBackground);
     background: var(--rebilly-colorBackground);
   }
 

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();
-}

package/dist/functions/destroy.spec.js

@@ -1,69 +0,0 @@
-"use strict";
-
-var _events = _interopRequireWildcard(require("../events"));
-
-var _baseEvent = _interopRequireDefault(require("../events/base-event"));
-
-var _rebillyInstrumentsMock = require("../../tests/mocks/rebilly-instruments-mock");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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; }
-
-describe('RebillyInstruments Destroy', () => {
-  it('should be able to destroy instance', async () => {
-    const rebillyInstruments = await (0, _rebillyInstrumentsMock.RenderMockRebillyInstruments)();
-    const formElement = document.querySelector('.form-selector');
-    const summaryElement = document.querySelector('.summary-selector');
-    expect(formElement.innerHTML).not.toEqual('');
-    expect(summaryElement.innerHTML).not.toEqual('');
-    await rebillyInstruments.destroy();
-    expect(formElement.innerHTML).toEqual('');
-    expect(summaryElement.innerHTML).toEqual('');
-  });
-  it('should remove registered listeners', async () => {
-    const rebillyInstruments = await (0, _rebillyInstrumentsMock.RenderMockRebillyInstruments)();
-    const fakeEventListener = jest.fn();
-    _events.default.fakeEvent = new _baseEvent.default('fake-event');
-
-    _events.publicEventNames.push('fake-event');
-
-    rebillyInstruments.on('fake-event', fakeEventListener);
-
-    _events.default.fakeEvent.dispatch();
-
-    expect(fakeEventListener).toHaveBeenCalledTimes(1);
-    fakeEventListener.mockClear();
-    await rebillyInstruments.destroy();
-
-    _events.default.fakeEvent.dispatch();
-
-    expect(fakeEventListener).not.toHaveBeenCalled();
-  });
-  it('should remove multiple listeners on the same event', async () => {
-    const rebillyInstruments = await (0, _rebillyInstrumentsMock.RenderMockRebillyInstruments)();
-    const fakeEventListener = jest.fn();
-    const anotherFakeEventListener = jest.fn();
-    _events.default.fakeEvent = new _baseEvent.default('fake-event');
-
-    _events.publicEventNames.push('fake-event');
-
-    rebillyInstruments.on('fake-event', fakeEventListener);
-    rebillyInstruments.on('fake-event', anotherFakeEventListener);
-
-    _events.default.fakeEvent.dispatch();
-
-    expect(fakeEventListener).toHaveBeenCalledTimes(1);
-    expect(anotherFakeEventListener).toHaveBeenCalledTimes(1);
-    fakeEventListener.mockClear();
-    anotherFakeEventListener.mockClear();
-    await rebillyInstruments.destroy();
-
-    _events.default.fakeEvent.dispatch();
-
-    expect(fakeEventListener).not.toHaveBeenCalled();
-    expect(anotherFakeEventListener).not.toHaveBeenCalled();
-  });
-});

package/dist/functions/mount/fetch-data.js

@@ -1,187 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.fetchData = fetchData;
-exports.DataInstance = void 0;
-
-var _riskDataCollector = require("@rebilly/risk-data-collector");
-
-var _plans = require("../../storefront/plans");
-
-var _products = require("../../storefront/products");
-
-var _readyToPay = require("../../storefront/ready-to-pay");
-
-var _summary = require("../../storefront/summary");
-
-var _invoices = require("../../storefront/invoices");
-
-var _transactions = require("../../storefront/transactions");
-
-class DataInstance {
-  constructor({
-    state = {},
-    ...fields
-  } = {}) {
-    var _state$options;
-
-    Object.entries({ ...(state.data || {}),
-      ...fields
-    }).forEach(([key, value]) => {
-      this[key] = value;
-    });
-    this.money = ((_state$options = state.options) === null || _state$options === void 0 ? void 0 : _state$options.money) || null;
-  }
-
-  get amountAndCurrency() {
-    let currency;
-    let amount;
-
-    if (this.previewPurchase) {
-      currency = this.previewPurchase.currency;
-      amount = this.previewPurchase.total;
-    } else if (this.invoice) {
-      currency = this.invoice.currency;
-      amount = this.invoice.amount;
-    } else if (this.transaction) {
-      currency = this.transaction.currency;
-      amount = this.transaction.amount;
-    } else if (this.money) {
-      currency = this.money.currency;
-      amount = this.money.amount;
-    }
-
-    return {
-      amount,
-      currency
-    };
-  }
-
-  get isPayment() {
-    return this.invoice || this.transaction || this.money;
-  }
-
-  get isPurchase() {
-    return this.previewPurchase;
-  }
-
-  get summaryItems() {
-    const {
-      discountsAmount = null,
-      shippingAmount = null,
-      subtotalAmount = null,
-      taxAmount = null
-    } = this.previewPurchase || this.invoice || {};
-    return {
-      discountsAmount,
-      shippingAmount,
-      subtotalAmount,
-      taxAmount
-    };
-  }
-
-  get summaryLineItems() {
-    let lineItems = [];
-
-    if (this.invoice) {
-      ({
-        items: lineItems = []
-      } = this.invoice);
-    } else {
-      ({
-        lineItems = []
-      } = this.previewPurchase || {});
-    }
-
-    return lineItems;
-  }
-
-  get isShippingRequired() {
-    return this.products.some(product => product.requiresShipping);
-  }
-
-}
-
-exports.DataInstance = DataInstance;
-
-async function fetchData({
-  state = null,
-  riskMetadata = null,
-  summaryPayload = null,
-  // Dependancy injectable functions
-  fetchInvoice = _invoices.fetchInvoice,
-  fetchTransaction = _transactions.fetchTransaction
-}) {
-  try {
-    var _state$options2, _state$options3, _state$data, _state$data$transacti, _state$data3;
-
-    let transaction = null;
-
-    if ((_state$options2 = state.options) !== null && _state$options2 !== void 0 && _state$options2.transactionId) {
-      transaction = await fetchTransaction({
-        data: {
-          id: state.options.transactionId
-        },
-        state
-      });
-      state.data.transaction = transaction;
-    }
-
-    let invoice = null;
-
-    if ((_state$options3 = state.options) !== null && _state$options3 !== void 0 && _state$options3.invoiceId || (_state$data = state.data) !== null && _state$data !== void 0 && (_state$data$transacti = _state$data.transaction) !== null && _state$data$transacti !== void 0 && _state$data$transacti.hasInvoice) {
-      var _state$options4, _state$data2, _state$data2$transact;
-
-      invoice = await fetchInvoice({
-        data: {
-          id: ((_state$options4 = state.options) === null || _state$options4 === void 0 ? void 0 : _state$options4.invoiceId) || ((_state$data2 = state.data) === null || _state$data2 === void 0 ? void 0 : (_state$data2$transact = _state$data2.transaction) === null || _state$data2$transact === void 0 ? void 0 : _state$data2$transact.invoiceId)
-        },
-        state
-      });
-      state.data.invoice = invoice;
-    }
-
-    if (!riskMetadata) {
-      const {
-        riskMetadata: data
-      } = await (0, _riskDataCollector.collectData)();
-      riskMetadata = data;
-    }
-
-    state.data = new DataInstance({
-      state,
-      invoice,
-      transaction,
-      riskMetadata
-    });
-    const [readyToPay, previewPurchase] = await Promise.all([((_state$data3 = state.data) === null || _state$data3 === void 0 ? void 0 : _state$data3.readyToPay) || (0, _readyToPay.fetchReadyToPay)({
-      riskMetadata,
-      state
-    }), state.options.items ? (0, _summary.fetchSummary)({
-      data: summaryPayload,
-      state
-    }) : null]);
-    const plans = await (0, _plans.fetchPlans)({
-      state
-    });
-    state.data.plans = plans;
-    const products = await (0, _products.fetchProducts)({
-      state
-    });
-    return new DataInstance({
-      state,
-      readyToPay,
-      previewPurchase,
-      plans,
-      products,
-      invoice,
-      transaction,
-      riskMetadata
-    });
-  } catch (error) {// console.log(error);
-  }
-
-  return new DataInstance({});
-}