@rebilly/instruments 1.0.1-beta → 1.0.2-beta.10

package/dist/views/method-selector/get-payment-methods.spec.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _getPaymentMethods = require("./get-payment-methods");
+
+var _readyToPayModel = _interopRequireDefault(require("../../storefront/models/ready-to-pay-model"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+class TestInstance {
+  constructor() {
+    this.loader = {
+      startLoading: jest.fn()
+    };
+  }
+
+}
+
+it('should only return the allowed methods', () => {
+  const instance = new TestInstance();
+  const methods = [new _readyToPayModel.default({
+    method: 'payment-card',
+    feature: {
+      name: 'Google Pay',
+      merchantName: 'google-pay-merchant-name',
+      merchantOrigin: 'google-pay-merchant-origin'
+    },
+    brands: ['Visa'],
+    filters: []
+  }), new _readyToPayModel.default({
+    method: 'bitcoin',
+    filters: []
+  }), new _readyToPayModel.default({
+    method: 'payment-card',
+    brands: ['Visa'],
+    filters: []
+  })];
+  const results = (0, _getPaymentMethods.getPaymentMethods)({
+    methods,
+    state: instance
+  });
+  expect(results.hasOwnProperty('EXPRESS_METHODS')).toEqual(true);
+  expect(results['EXPRESS_METHODS'].length).toEqual(1);
+  expect(results['METHODS'].length).toEqual(1);
+});

package/dist/views/method-selector/index.js

@@ -0,0 +1,133 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mountMethodSelector = mountMethodSelector;
+exports.updateMethodSelector = updateMethodSelector;
+exports.baseMethodSelectorHTML = void 0;
+
+var _riskDataCollector = require("@rebilly/risk-data-collector");
+
+var _getPaymentMethods = require("./get-payment-methods");
+
+var _mountExpressMethods = require("./mount-express-methods");
+
+var _generateDigitalWallet = require("./generate-digital-wallet");
+
+var _mountMethods = require("./mount-methods");
+
+var _fetchSummaryData = require("../../functions/mount/fetch-summary-data");
+
+/* eslint-disable no-undef */
+const baseMethodSelectorHTML = compactExpressInstruments => `
+<div class="rebilly-instruments-content">
+  <div class="rebilly-instruments-method-selector">
+    <div class="rebilly-instruments-express-methods ${compactExpressInstruments ? 'is-compact' : ''}">
+      <span data-rebilly-i18n="form.expressCheckout" class="rebilly-instruments-express-methods-label">Express checkout</span>
+      <div class="rebilly-instruments-express-methods-container"></div>
+    </div>
+    <div class="rebilly-instruments-divider">
+      <span class="rebilly-instruments-divider-label" data-rebilly-i18n="form.or">Or</span>
+    </div>
+    <div class="rebilly-instruments-methods"></div>
+  </div>
+</div>
+`;
+
+exports.baseMethodSelectorHTML = baseMethodSelectorHTML;
+
+function mountMethodSelector({
+  state,
+  formOptions
+}) {
+  const {
+    readyToPay,
+    summary,
+    plans,
+    products,
+    mainStyle
+  } = formOptions;
+  const {
+    EXPRESS_METHODS,
+    METHODS
+  } = (0, _getPaymentMethods.getPaymentMethods)({
+    methods: readyToPay,
+    state
+  });
+  state.form.innerHTML += baseMethodSelectorHTML(state.options.paymentInstruments.compactExpressInstruments);
+  const EXPRESS_METHODS_CONTAINER = document.querySelector('.rebilly-instruments-express-methods-container');
+  const METHODS_DIVIDER = document.querySelector('.rebilly-instruments-divider');
+  METHODS_DIVIDER.style.display = METHODS.length && EXPRESS_METHODS.length ? 'block' : 'none';
+  const METHODS_CONTAINER = document.querySelector('.rebilly-instruments-methods');
+  state.configs.digitalWallet = (0, _generateDigitalWallet.generateDigitalWallet)({
+    state,
+    summary,
+    EXPRESS_METHODS
+  });
+
+  if (METHODS.length) {
+    (0, _mountMethods.MountMethods)({
+      state,
+      METHODS_CONTAINER,
+      METHODS,
+      mainStyle,
+      plans,
+      products
+    });
+  } else {
+    METHODS_CONTAINER.style.display = 'none';
+  }
+
+  if (EXPRESS_METHODS.length) {
+    (0, _mountExpressMethods.mountExpressMethods)({
+      state,
+      EXPRESS_METHODS,
+      EXPRESS_METHODS_CONTAINER
+    });
+  } else {
+    EXPRESS_METHODS_CONTAINER.parentNode.style.display = 'none';
+  }
+
+  state.translate.translateItems();
+  state.loader.stopLoading({
+    id: 'initForm'
+  });
+}
+
+async function updateMethodSelector({
+  state,
+  mainStyle
+}) {
+  state.loader.startLoading({
+    id: 'initForm'
+  });
+  const {
+    riskMetadata
+  } = await (0, _riskDataCollector.collectData)();
+  const {
+    readyToPay,
+    summary: summaryData,
+    plans,
+    products
+  } = await (0, _fetchSummaryData.fetchSummaryData)({
+    state,
+    riskMetadata
+  });
+  const formOptions = {
+    summary: summaryData,
+    readyToPay,
+    plans,
+    products,
+    mainStyle
+  };
+  state.form.querySelectorAll(':not(.rebilly-instruments-confirmation)').forEach(element => {
+    if (!element.classList.contains('rebilly-instruments-loader') && !element.classList.contains('rebilly-instruments-loader-spinner')) {
+      element.remove();
+    }
+  });
+  mountMethodSelector({
+    state,
+    formOptions
+  });
+}

package/dist/views/method-selector/method-selector.spec.js

@@ -0,0 +1,139 @@
+"use strict";
+
+var _summaryModel = _interopRequireDefault(require("../../storefront/models/summary-model"));
+
+var _readyToPayModel = _interopRequireDefault(require("../../storefront/models/ready-to-pay-model"));
+
+var _loader = require("../../loader");
+
+var _i18n = require("../../i18n");
+
+var _index = require("./index");
+
+var _asyncUtilities = require("../../../tests/async-utilities");
+
+var _storefrontMock = require("../../../tests/mocks/storefront-mock");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('Summary component', () => {
+  let formElement;
+  beforeEach(() => {
+    formElement = document.createElement('div');
+    document.body.append(formElement);
+  });
+
+  class TestMountMethodSelectorInstance {
+    constructor({
+      configs = {},
+      options = {},
+      form = formElement,
+      loader = new _loader.Loader(),
+      translate = new _i18n.Translate(),
+      zoidComponents = {}
+    } = {}) {
+      this.configs = configs;
+      this.options = options;
+      this.form = form;
+      this.loader = loader;
+      this.translate = translate;
+      this.zoidComponents = zoidComponents;
+      this.storefront = (0, _storefrontMock.MockStorefront)();
+    }
+
+  }
+
+  const options = {
+    intent: {
+      countryCode: 'US',
+      items: [{
+        planId: 'my-awesome-product',
+        quantity: 1,
+        thumbnail: ''
+      }, {
+        planId: 'awesome-t-shirt',
+        quantity: 2,
+        thumbnail: ''
+      }]
+    },
+    paymentInstruments: {
+      googlePay: {
+        displayOptions: {
+          buttonColor: 'black',
+          buttonHeight: '44px',
+          buttonType: 'short'
+        }
+      },
+      compactExpressInstruments: true
+    },
+    _computed: {
+      paymentMethodsUrl: ''
+    }
+  };
+  const summaryData = new _summaryModel.default({
+    currency: 'USD',
+    lineItems: [{
+      type: 'debit',
+      description: 'My Awesome Product',
+      unitPrice: 30,
+      quantity: 1,
+      price: 30,
+      productId: 'my-awesome-product',
+      planId: 'my-awesome-product'
+    }, {
+      type: 'debit',
+      description: 'Awesome T-Shirt',
+      unitPrice: 20,
+      quantity: 2,
+      price: 40,
+      productId: 'my-app',
+      planId: 'awesome-t-shirt'
+    }],
+    subtotalAmount: 70,
+    taxAmount: 0,
+    shippingAmount: 0,
+    discountsAmount: 0,
+    total: 70
+  });
+  const readyToPayData = [new _readyToPayModel.default({
+    method: 'payment-card',
+    feature: {
+      name: 'Google Pay',
+      merchantName: 'google-pay-merchant-name',
+      merchantOrigin: 'google-pay-merchant-origin'
+    },
+    brands: ['Visa'],
+    filters: []
+  })];
+  const configs = {
+    websiteId: 'test-website-id'
+  };
+  it('should inject the proper HTML for express methods', async () => {
+    const mountSummaryInstance = new TestMountMethodSelectorInstance({
+      configs,
+      options
+    });
+    mountSummaryInstance.loader.DOM.form = mountSummaryInstance.form;
+    (0, _index.mountMethodSelector)({
+      state: mountSummaryInstance,
+      formOptions: {
+        summary: summaryData,
+        readyToPay: readyToPayData
+      }
+    });
+    const form = document.querySelector('.rebilly-instruments-form');
+    expect(form).toMatchSnapshot();
+    await (0, _asyncUtilities.avoidUnhandledPromises)();
+  });
+  it('should allow updating method selector', async () => {
+    const state = new TestMountMethodSelectorInstance({
+      configs,
+      options
+    });
+    state.loader.DOM.form = state.form;
+    await (0, _index.updateMethodSelector)({
+      state,
+      mainStyle: 'any main style'
+    });
+  });
+});

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

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mountExpressMethods = mountExpressMethods;
+
+var _googlePay = _interopRequireDefault(require("./express-methods/google-pay"));
+
+var _applePay = _interopRequireDefault(require("./express-methods/apple-pay"));
+
+var _paypal = _interopRequireDefault(require("./express-methods/paypal"));
+
+var _getMethodData = require("./get-method-data");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function mountExpressMethods({
+  state,
+  EXPRESS_METHODS,
+  EXPRESS_METHODS_CONTAINER
+}) {
+  // A child div for each method must be created before mounting.
+  // Any DOM operation (innerHTML, append, etc) done on the parent div (EXPRESS_METHODS_CONTAINER) in between
+  // the two Postmate's instantiation (1 parent, 1 child) will cause the parent <-> child handshake to fail
+  EXPRESS_METHODS.forEach(expressMethod => {
+    const {
+      METHOD_ID
+    } = (0, _getMethodData.getMethodData)(expressMethod);
+    EXPRESS_METHODS_CONTAINER.innerHTML += `
+      <div class="rebilly-instruments-${METHOD_ID}-method"></div>
+    `;
+  });
+  EXPRESS_METHODS.forEach(expressMethod => {
+    const {
+      method,
+      feature
+    } = expressMethod;
+    const {
+      METHOD_ID,
+      METHOD_TYPE
+    } = (0, _getMethodData.getMethodData)(expressMethod);
+
+    if ((feature === null || feature === void 0 ? void 0 : feature.name) === 'Google Pay') {
+      (0, _googlePay.default)({
+        state,
+        METHOD_ID
+      });
+    }
+
+    if ((feature === null || feature === void 0 ? void 0 : feature.name) === 'Apple Pay') {
+      (0, _applePay.default)({
+        state,
+        METHOD_ID,
+        METHOD_TYPE,
+        EXPRESS_METHODS,
+        EXPRESS_METHODS_CONTAINER
+      });
+    }
+
+    if (method === 'paypal') {
+      (0, _paypal.default)({
+        state,
+        METHOD_ID,
+        METHOD_TYPE
+      });
+    }
+  });
+}

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

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MountMethods = MountMethods;
+
+var _lodash = _interopRequireDefault(require("lodash.camelcase"));
+
+var _modal = require("../modal");
+
+var _iframe = require("../common/iframe");
+
+var _getMethodData = require("./get-method-data");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function MountMethods({
+  state,
+  METHODS_CONTAINER,
+  METHODS,
+  mainStyle,
+  plans,
+  products
+}) {
+  METHODS.forEach(async method => {
+    var _state$options$paymen;
+
+    const {
+      METHOD_ID: methodId,
+      METHOD_TYPE: methodType
+    } = (0, _getMethodData.getMethodData)(method);
+    const {
+      paymentMethodsUrl
+    } = state.options._computed || 'https://www.example.com';
+    const selector = `rebilly-instruments-${methodId}`;
+    const isiFrame = methodId === 'payment-card' && !((_state$options$paymen = state.options.paymentInstruments[methodType]) !== null && _state$options$paymen !== void 0 && _state$options$paymen.popup);
+    const model = {
+      configs: state.configs,
+      options: state.options,
+      mainStyle,
+      method,
+      plans,
+      products
+    };
+    METHODS_CONTAINER.insertAdjacentHTML('beforeend', `<div id="${selector}" data-rebilly-instruments-type="${methodId}"></div>`);
+    const container = document.querySelector(`#${selector}`);
+
+    if (isiFrame) {
+      const iframe = await new _iframe.MethodIframe({
+        name: methodId,
+        url: `${paymentMethodsUrl}/${methodId}`,
+        container,
+        model
+      });
+      iframe.bindEventListeners({
+        loader: state.loader,
+        id: method.method
+      });
+      state.iframeComponents.push(iframe);
+    } else {
+      container.insertAdjacentHTML('beforeend', `<button class="${selector} rebilly-instruments-button" data-rebilly-i18n="paymentMethods.${method.method}">${(0, _lodash.default)(method.method)}</button>`);
+      const paymentCardButton = document.querySelector(`.${selector}`);
+      paymentCardButton.addEventListener('click', async () => {
+        const iframe = await (0, _modal.mountModal)({
+          state,
+          name: methodId,
+          url: `${paymentMethodsUrl}/${methodId}`,
+          model
+        });
+        state.iframeComponents.push(iframe);
+      });
+      state.loader.stopLoading({
+        id: method.method
+      });
+    }
+  });
+}

package/dist/views/modal.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mountModal = mountModal;
+
+var _iframe = require("./common/iframe");
+
+const modalTemplate = (isRedirect, method) => `
+  <div class="rebilly-instruments-modal-overlay">
+    <div class="rebilly-instruments-modal-container ${method ? `rebilly-instruments-${method}` : ''} ${isRedirect ? 'is-redirect' : ''}">
+      <svg class="rebilly-instruments-modal-close" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
+        <path d="m15 13.5858 7.2929-7.293c.3905-.3904 1.0237-.3904 1.4142 0 .3905.3906.3905 1.0238 0 1.4143L16.4142 15l7.293 7.2929c.3904.3905.3904 1.0237 0 1.4142-.3906.3905-1.0238.3905-1.4143 0L15 16.4142l-7.2929 7.293c-.3905.3904-1.0237.3904-1.4142 0-.3905-.3906-.3905-1.0238 0-1.4143L13.5858 15l-7.293-7.2929c-.3904-.3905-.3904-1.0237 0-1.4142.3906-.3905 1.0238-.3905 1.4143 0L15 13.5858Z" fill-rule="nonzero"/>
+      </svg>
+      <div class="rebilly-instruments-modal-content"></div>
+    </div>
+  </div>
+`;
+
+async function mountModal({
+  name = '',
+  url = '',
+  model = {},
+  classListArray = [],
+  close = () => {},
+  state = null
+} = {}) {
+  var _model$method;
+
+  const method = model === null || model === void 0 ? void 0 : (_model$method = model.method) === null || _model$method === void 0 ? void 0 : _model$method.method;
+  const isRedirect = name === 'rebilly-instruments-approval-url';
+  state.form.insertAdjacentHTML('beforeend', modalTemplate(isRedirect, method));
+  const modalOverlay = document.querySelector('.rebilly-instruments-modal-overlay');
+  const modalContainer = document.querySelector('.rebilly-instruments-modal-container');
+  const closeButton = document.querySelector('.rebilly-instruments-modal-close');
+  const modalContent = document.querySelector('.rebilly-instruments-modal-content');
+  document.body.style.overflow = 'hidden';
+  setTimeout(() => {
+    modalOverlay.classList.add('is-visible');
+    modalContainer.classList.add('is-visible');
+  }, 240);
+  state.loader.addDOMElement({
+    section: 'modal',
+    el: modalContent
+  });
+  state.loader.startLoading({
+    section: 'modal',
+    id: 'modal-content'
+  });
+  const injectedModel = {
+    configs: state.configs,
+    options: state.options,
+    ...model
+  };
+  const iframe = await new _iframe.ModalIframe({
+    name,
+    url,
+    model: injectedModel,
+    classListArray,
+    container: modalContent
+  });
+
+  const closeModal = (...args) => {
+    modalContainer.classList.remove('is-visible');
+    modalOverlay.classList.remove('is-visible');
+    setTimeout(() => {
+      document.body.style.overflow = 'auto';
+      modalOverlay.children.forEach(child => child.remove());
+      modalOverlay.remove();
+      close(...args);
+      iframe.destroy();
+    }, 300);
+  };
+
+  iframe.bindEventListeners({
+    close: closeModal,
+    loader: state.loader
+  });
+  modalOverlay.addEventListener('click', closeModal);
+  closeButton.addEventListener('click', closeModal);
+  return iframe;
+}

package/dist/views/result.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mountResult = mountResult;
+
+var _iframe = require("./common/iframe");
+
+var _renderUtilities = require("./common/render-utilities");
+
+async function mountResult({
+  purchase,
+  mainStyle,
+  state
+}) {
+  const resultContainerClassName = 'rebilly-instruments-result';
+  (0, _renderUtilities.replaceContent)(state.form, `<div class="${resultContainerClassName}"></div>`);
+  state.loader.startLoading({
+    id: 'result'
+  });
+  const container = document.querySelector(`.${resultContainerClassName}`);
+  const {
+    paymentMethodsUrl
+  } = state.options._computed;
+  const model = {
+    configs: state.configs,
+    options: state.options,
+    mainStyle,
+    purchase
+  };
+  const iframe = await new _iframe.ViewIframe({
+    name: 'rebilly-instruments-result',
+    url: `${paymentMethodsUrl}/result`,
+    container,
+    model
+  });
+  iframe.bindEventListeners({
+    loader: state.loader
+  });
+  state.iframeComponents.push(iframe);
+}