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

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

@@ -1,122 +0,0 @@
-"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 _fetchData = require("../../functions/mount/fetch-data");
-
-/* eslint-disable no-undef */
-const baseMethodSelectorHTML = compactExpressInstruments => `
-<div class="rebilly-instruments-content">
-  <div class="rebilly-instruments-method-selector ${compactExpressInstruments ? 'has-express-compact' : ''}">
-    <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
-}) {
-  const {
-    EXPRESS_METHODS,
-    METHODS
-  } = (0, _getPaymentMethods.getPaymentMethods)({
-    state
-  });
-  state.form.innerHTML += baseMethodSelectorHTML(state.options.paymentInstruments.compactExpressInstruments && EXPRESS_METHODS.length);
-  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.options.digitalWallet = (0, _generateDigitalWallet.generateDigitalWallet)({
-    state,
-    EXPRESS_METHODS
-  });
-
-  if (METHODS.length) {
-    (0, _mountMethods.MountMethods)({
-      state,
-      METHODS_CONTAINER,
-      METHODS
-    });
-  } 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';
-  }
-
-  if (!METHODS.length && !EXPRESS_METHODS.length) {
-    state.form.innerHTML = `
-      <p data-rebilly-i18n="form.error.noPaymentMethods">
-        No payment methods available for this transaction, please contact support.
-      <p>
-    `;
-    state.form.style.minHeight = 'auto';
-  }
-
-  state.translate.translateItems();
-  state.loader.stopLoading({
-    id: 'initForm'
-  });
-}
-
-async function updateMethodSelector({
-  state
-}) {
-  var _state$data$transacti;
-
-  state.loader.startLoading({
-    id: 'initForm'
-  });
-  const {
-    riskMetadata
-  } = await (0, _riskDataCollector.collectData)();
-  state.data = await (0, _fetchData.fetchData)({
-    state,
-    riskMetadata
-  });
-
-  if (state.data.transaction && ((_state$data$transacti = state.data.transaction) === null || _state$data$transacti === void 0 ? void 0 : _state$data$transacti.type) === 'setup') {
-    state.options.transactionType = 'setup';
-  }
-
-  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
-  });
-}

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

@@ -1,124 +0,0 @@
-"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");
-
-var _fetchData = require("../../functions/mount/fetch-data");
-
-var _setupOptions = _interopRequireDefault(require("../../functions/mount/setup-options"));
-
-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({
-      options = {},
-      form = formElement,
-      loader = new _loader.Loader(),
-      translate = new _i18n.Translate()
-    } = {}) {
-      this.options = (0, _setupOptions.default)({
-        options
-      });
-      this.form = form;
-      this.loader = loader;
-      this.translate = translate;
-      this.storefront = (0, _storefrontMock.MockStorefront)();
-      this.data = new _fetchData.DataInstance({
-        state: {
-          options
-        },
-        previewPurchase: 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
-        }),
-        readyToPay: [new _readyToPayModel.default({
-          method: 'payment-card',
-          feature: {
-            name: 'Google Pay',
-            merchantName: 'google-pay-merchant-name',
-            merchantOrigin: 'google-pay-merchant-origin'
-          },
-          brands: ['Visa'],
-          filters: []
-        })]
-      });
-    }
-
-  }
-
-  const options = {
-    websiteId: 'test-website-id',
-    countryCode: 'US',
-    items: [{
-      planId: 'my-awesome-product',
-      quantity: 1
-    }, {
-      planId: 'awesome-t-shirt',
-      quantity: 2
-    }],
-    _computed: {
-      paymentMethodsUrl: ''
-    }
-  };
-  it('should inject the proper HTML for express methods', async () => {
-    const mountSummaryInstance = new TestMountMethodSelectorInstance({
-      options
-    });
-    mountSummaryInstance.loader.DOM.form = mountSummaryInstance.form;
-    (0, _index.mountMethodSelector)({
-      state: mountSummaryInstance
-    });
-    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({
-      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

@@ -1,69 +0,0 @@
-"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

@@ -1,74 +0,0 @@
-"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
-}) {
-  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 = {
-      options: state.options,
-      mainStyle: state.mainStyle,
-      plans: state.data.plans,
-      products: state.data.products,
-      method
-    };
-    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

@@ -1,88 +0,0 @@
-"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' : ''}">
-      ${isRedirect ? '' : `
-      <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 = {
-    options: state.options,
-    ...model
-  };
-  const iframe = await new _iframe.ModalIframe({
-    state,
-    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
-  });
-
-  if (!isRedirect) {
-    closeButton.addEventListener('click', closeModal);
-  }
-
-  return iframe;
-}

package/dist/views/result.js

@@ -1,40 +0,0 @@
-"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({
-  payload,
-  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 = {
-    options: state.options,
-    mainStyle: state.mainStyle,
-    [state.options.transactionType]: payload
-  };
-  const iframe = await new _iframe.ViewIframe({
-    name: 'rebilly-instruments-result',
-    url: `${paymentMethodsUrl}/result`,
-    container,
-    model
-  });
-  iframe.bindEventListeners({
-    loader: state.loader
-  });
-  state.iframeComponents.push(iframe);
-}