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

package/dist/views/method-selector/express-methods/apple-pay.js

@@ -1,92 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = mountApplePay;
-
-var _events = _interopRequireDefault(require("../../../events"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const browserIsSafari = () => window.ApplePaySession;
-
-function mountApplePay({
-  state,
-  METHOD_ID,
-  METHOD_TYPE,
-  EXPRESS_METHODS,
-  EXPRESS_METHODS_CONTAINER
-}) {
-  const container = document.querySelector(`.rebilly-instruments-${METHOD_ID}-method`);
-  const digitalWallet = state.options.digitalWallet.applePay;
-
-  function mountApplePayButton() {
-    if (!container.children.length) {
-      Rebilly.applePay.mount(`.rebilly-instruments-${METHOD_ID}-method`);
-    }
-
-    state.loader.stopLoading({
-      id: `${METHOD_TYPE}-express`
-    });
-  } // Hack: The correct way to do this is to accept the options via the framepay package
-  // Will remove once these options are added to framepay
-
-
-  function updateBtnStyling() {
-    const applePayButton = document.querySelector('#rebilly-apple-pay-button');
-    applePayButton.style.margin = '0px';
-    applePayButton.style.width = '100%';
-    applePayButton.style.height = digitalWallet.applePayDisplayOptions.buttonHeight;
-  }
-
-  if (!browserIsSafari()) {
-    if (EXPRESS_METHODS.length === 1) {
-      EXPRESS_METHODS_CONTAINER.parentNode.style.display = 'none';
-    }
-
-    state.loader.stopLoading({
-      id: `${METHOD_TYPE}-express`
-    });
-    container.style.display = 'none';
-    return;
-  }
-
-  container.style.height = digitalWallet.applePayDisplayOptions.buttonHeight;
-
-  if (!Rebilly.initialized) {
-    Rebilly.initialize({
-      publishableKey: state.options.publishableKey,
-      organizationId: state.options.organizationId,
-      digitalWallet
-    });
-  } else {
-    mountApplePayButton();
-    updateBtnStyling();
-  }
-
-  Rebilly.on('ready', () => {
-    mountApplePayButton();
-    updateBtnStyling();
-  });
-  Rebilly.on('token-ready', token => {
-    const instrumentReadyPayload = {
-      websiteId: state.options.websiteId,
-      items: state.options.items,
-      paymentInstruction: {
-        token: token.id
-      },
-      billingAddress: token.billingAddress,
-      _raw: token
-    };
-
-    if (!token.shippingAddress) {
-      instrumentReadyPayload.deliveryAddress = token.shippingAddress;
-    }
-
-    _events.default.instrumentReady.dispatch(instrumentReadyPayload);
-  });
-  Rebilly.on('error', error => {
-    console.error(error);
-  });
-}

package/dist/views/method-selector/express-methods/google-pay.js

@@ -1,31 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = mountGooglePay;
-
-var _iframe = require("../../common/iframe");
-
-async function mountGooglePay({
-  state,
-  METHOD_ID
-}) {
-  const container = document.querySelector(`.rebilly-instruments-${METHOD_ID}-method`);
-  const {
-    paymentMethodsUrl
-  } = state.options._computed;
-  const model = {
-    options: state.options
-  };
-  const iframe = await new _iframe.MethodIframe({
-    name: METHOD_ID,
-    url: `${paymentMethodsUrl}/${METHOD_ID}`,
-    container,
-    model
-  });
-  iframe.bindEventListeners({
-    loader: state.loader
-  });
-  state.iframeComponents.push(iframe);
-}

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

@@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = mountPaypal;
-
-async function mountPaypal({
-  state,
-  METHOD_ID,
-  METHOD_TYPE
-}) {
-  console.log('PayPal - work in progress');
-  const container = document.querySelector(`.rebilly-instruments-${METHOD_ID}-method`);
-  container.style.display = 'none';
-  state.loader.stopLoading({
-    id: `${METHOD_TYPE}-express`
-  });
-}

package/dist/views/method-selector/generate-digital-wallet.js

@@ -1,68 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.generateDigitalWallet = generateDigitalWallet;
-
-var _getMethodData = require("./get-method-data");
-
-function generateDigitalWallet({
-  state,
-  EXPRESS_METHODS
-}) {
-  var _state$data;
-
-  const output = {};
-  const {
-    paymentInstruments
-  } = state.options;
-  const transactionData = {
-    countryCode: state.options.countryCode,
-    label: state.options.websiteId
-  };
-
-  if ((_state$data = state.data) !== null && _state$data !== void 0 && _state$data.amountAndCurrency) {
-    const {
-      amount,
-      currency
-    } = state.data.amountAndCurrency;
-    transactionData.amount = amount;
-    transactionData.currency = currency;
-  }
-
-  EXPRESS_METHODS.forEach(method => {
-    var _method$feature, _method$feature2;
-
-    const {
-      METHOD_TYPE
-    } = (0, _getMethodData.getMethodData)(method);
-
-    if (((_method$feature = method.feature) === null || _method$feature === void 0 ? void 0 : _method$feature.name) === 'Google Pay') {
-      output[METHOD_TYPE] = {
-        transactionData,
-        merchantConfig: {
-          merchantName: method.feature.merchantName,
-          merchantOrigin: method.feature.merchantOrigin
-        },
-        googlePayDisplayOptions: paymentInstruments.googlePay.displayOptions
-      };
-    }
-
-    if (((_method$feature2 = method.feature) === null || _method$feature2 === void 0 ? void 0 : _method$feature2.name) === 'Apple Pay') {
-      var _paymentInstruments$a, _paymentInstruments$a2;
-
-      output[METHOD_TYPE] = {
-        transactionData,
-        merchantConfig: {
-          merchantName: (_paymentInstruments$a = paymentInstruments.applePay) === null || _paymentInstruments$a === void 0 ? void 0 : (_paymentInstruments$a2 = _paymentInstruments$a.merchantConfig) === null || _paymentInstruments$a2 === void 0 ? void 0 : _paymentInstruments$a2.merchantName,
-          // Apple Pay code cannot run in an iframe, and the merchant origin must be
-          // registered as a merchant domain, so we can just send the current URL.
-          merchantOrigin: window.location.hostname
-        },
-        applePayDisplayOptions: paymentInstruments.applePay.displayOptions
-      };
-    }
-  });
-  return output;
-}

package/dist/views/method-selector/generate-digital-wallet.spec.js

@@ -1,135 +0,0 @@
-"use strict";
-
-var _generateDigitalWallet = require("./generate-digital-wallet");
-
-var _readyToPayModel = _interopRequireDefault(require("../../storefront/models/ready-to-pay-model"));
-
-var _summaryModel = _interopRequireDefault(require("../../storefront/models/summary-model"));
-
-var _fetchData = require("../../functions/mount/fetch-data");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-describe('generateDigitalWallet', () => {
-  class TestInstance {
-    constructor({
-      options = {}
-    } = {}) {
-      this.options = options;
-      this.data = new _fetchData.DataInstance({
-        state: {
-          options
-        },
-        previewPurchase: {
-          total: 1,
-          currency: 'USD'
-        }
-      });
-    }
-
-  }
-
-  const summary = new _summaryModel.default({
-    currency: 'USD',
-    total: 1
-  });
-  const options = {
-    websiteId: 'test-website-id',
-    countryCode: 'US',
-    paymentInstruments: {
-      googlePay: {
-        displayOptions: {
-          buttonColor: 'black',
-          buttonType: 'short',
-          buttonHeight: '44px'
-        }
-      },
-      applePay: {
-        displayOptions: {
-          buttonColor: 'black',
-          buttonType: 'buy',
-          buttonHeight: '44px'
-        },
-        merchantConfig: {
-          merchantName: 'Test Store Name'
-        }
-      }
-    }
-  };
-  it('should generate the correct digital wallet config for Google pay', () => {
-    const expressMethods = [new _readyToPayModel.default({
-      method: 'payment-card',
-      feature: {
-        name: 'Google Pay',
-        merchantName: 'google-pay-merchant-name',
-        merchantOrigin: 'google-pay-merchant-origin'
-      },
-      brands: ['Visa']
-    })];
-    const output = (0, _generateDigitalWallet.generateDigitalWallet)({
-      state: new TestInstance({
-        options
-      }),
-      EXPRESS_METHODS: expressMethods,
-      summary
-    });
-    const expectedOutput = {
-      googlePay: {
-        transactionData: {
-          amount: 1,
-          currency: 'USD',
-          countryCode: 'US',
-          label: 'test-website-id'
-        },
-        merchantConfig: {
-          merchantName: 'google-pay-merchant-name',
-          merchantOrigin: 'google-pay-merchant-origin'
-        },
-        googlePayDisplayOptions: {
-          buttonColor: 'black',
-          buttonType: 'short',
-          buttonHeight: '44px'
-        }
-      }
-    };
-    expect(output).toMatchObject(expectedOutput);
-  });
-  it('should generate the correct digital wallet config for Apple pay', () => {
-    delete window.location;
-    window.location = new URL('https://rebilly-apple-pay-test-tunnel.ngrok.io/');
-    const expressMethods = [new _readyToPayModel.default({
-      method: 'payment-card',
-      feature: {
-        name: 'Apple Pay'
-      },
-      brands: ['Visa']
-    })];
-    const output = (0, _generateDigitalWallet.generateDigitalWallet)({
-      state: new TestInstance({
-        options
-      }),
-      EXPRESS_METHODS: expressMethods,
-      summary
-    });
-    const expectedOutput = {
-      applePay: {
-        transactionData: {
-          amount: 1,
-          currency: 'USD',
-          countryCode: 'US',
-          label: 'test-website-id'
-        },
-        merchantConfig: {
-          merchantName: 'Test Store Name',
-          merchantOrigin: 'rebilly-apple-pay-test-tunnel.ngrok.io'
-        },
-        applePayDisplayOptions: {
-          buttonColor: 'black',
-          buttonType: 'buy',
-          buttonHeight: '44px'
-        }
-      }
-    };
-    expect(output).toMatchObject(expectedOutput);
-  });
-});

package/dist/views/method-selector/get-method-data.js

@@ -1,25 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getMethodData = void 0;
-
-var _lodash = _interopRequireDefault(require("lodash.kebabcase"));
-
-var _lodash2 = _interopRequireDefault(require("lodash.camelcase"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const getMethodData = method => {
-  var _method$feature, _method$feature2;
-
-  const METHOD_ID = (0, _lodash.default)(((_method$feature = method.feature) === null || _method$feature === void 0 ? void 0 : _method$feature.name) || method.method);
-  const METHOD_TYPE = (0, _lodash2.default)(((_method$feature2 = method.feature) === null || _method$feature2 === void 0 ? void 0 : _method$feature2.name) || method.method).replace('-', '');
-  return {
-    METHOD_ID,
-    METHOD_TYPE
-  };
-};
-
-exports.getMethodData = getMethodData;

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

@@ -1,66 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getPaymentMethods = getPaymentMethods;
-
-var _getMethodData = require("./get-method-data");
-
-/* eslint-disable no-unused-expressions, arrow-body-style */
-const SUPPORTED_EXPRESS_METHODS = ['Google Pay', 'Apple Pay', 'paypal'];
-const SUPPORTED_METHODS = ['payment-card'];
-
-const isExpressMethod = ({
-  method,
-  feature
-}) => {
-  return SUPPORTED_EXPRESS_METHODS.includes(method) || SUPPORTED_EXPRESS_METHODS.includes(feature === null || feature === void 0 ? void 0 : feature.name);
-};
-
-const isSupportedMethod = ({
-  method
-}) => {
-  return SUPPORTED_METHODS.includes(method);
-}; // TODO: just loader is used. We could simplify signature
-
-
-function getPaymentMethods({
-  state
-}) {
-  const result = {
-    EXPRESS_METHODS: [],
-    METHODS: []
-  };
-  state.data.readyToPay.forEach(method => {
-    if (isExpressMethod(method)) {
-      const {
-        METHOD_TYPE
-      } = (0, _getMethodData.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);
-    }
-  });
-
-  if (!window.ApplePaySession) {
-    result.EXPRESS_METHODS = result.EXPRESS_METHODS.filter(method => {
-      var _method$feature;
-
-      return (method === null || method === void 0 ? void 0 : (_method$feature = method.feature) === null || _method$feature === void 0 ? void 0 : _method$feature.name) !== 'Apple Pay';
-    });
-    state.loader.stopLoading({
-      id: 'applePay-express'
-    });
-  }
-
-  return result;
-}

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

@@ -1,46 +0,0 @@
-"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(),
-      stopLoading: jest.fn()
-    };
-    this.data = {
-      readyToPay: [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: []
-      })]
-    };
-  }
-
-}
-
-it('should only return the allowed methods', () => {
-  const instance = new TestInstance();
-  const results = (0, _getPaymentMethods.getPaymentMethods)({
-    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

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