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

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

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dispatchRebillyInsturmentEventHandler = dispatchRebillyInsturmentEventHandler;
+exports.resizeComponentHandler = resizeComponentHandler;
+exports.stopLoaderHandler = stopLoaderHandler;
+exports.changeIframeSrcHandler = changeIframeSrcHandler;
+
+var _lodash = _interopRequireDefault(require("lodash.camelcase"));
+
+var _events = _interopRequireDefault(require("../../../events"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function dispatchRebillyInsturmentEventHandler(iframe) {
+  iframe.component.on(`${iframe.name}-dispatch`, ({
+    event,
+    detail
+  }) => {
+    _events.default[(0, _lodash.default)(event).replace(/-/, '')].dispatch(detail);
+  });
+}
+
+function resizeComponentHandler(iframe) {
+  iframe.component.on(`${iframe.name}-resize-frame`, height => {
+    iframe.component.frame.style.height = height;
+  });
+}
+
+function stopLoaderHandler(iframe, data = {
+  section: 'form'
+}) {
+  iframe.component.on(`${iframe.name}-stop-loading`, (id = null) => {
+    var _data$loader;
+
+    (_data$loader = data.loader) === null || _data$loader === void 0 ? void 0 : _data$loader.stopLoading({
+      section: data.section,
+      id: id || data.id
+    });
+  });
+}
+
+function changeIframeSrcHandler(iframe) {
+  iframe.component.on(`${iframe.name}-change-iframe-src`, (url = null) => {
+    iframe.component.frame.src = url;
+    iframe.component.frame.style.height = '75vh';
+  });
+}

package/dist/views/common/iframe/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ModalIframe = exports.ViewIframe = exports.MethodIframe = void 0;
+
+var _methodIframe = require("./method-iframe");
+
+var _viewIframe = require("./view-iframe");
+
+var _modalIframe = require("./modal-iframe");
+
+const MethodIframe = _methodIframe.MethodIframe;
+exports.MethodIframe = MethodIframe;
+const ViewIframe = _viewIframe.ViewIframe;
+exports.ViewIframe = ViewIframe;
+const ModalIframe = _modalIframe.ModalIframe;
+exports.ModalIframe = ModalIframe;

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

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MethodIframe = void 0;
+
+var _baseIframe = _interopRequireDefault(require("./base-iframe"));
+
+var _eventListeners = require("./event-listeners");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+class MethodIframe extends _baseIframe.default {
+  constructor(args = {}) {
+    super(args);
+  }
+
+  bindEventListeners({
+    loader,
+    id
+  } = {}) {
+    (0, _eventListeners.dispatchRebillyInsturmentEventHandler)(this);
+    (0, _eventListeners.resizeComponentHandler)(this);
+    (0, _eventListeners.stopLoaderHandler)(this, {
+      loader,
+      id
+    });
+  }
+
+}
+
+exports.MethodIframe = MethodIframe;

package/dist/views/common/iframe/modal-iframe.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ModalIframe = void 0;
+
+var _baseIframe = _interopRequireDefault(require("./base-iframe"));
+
+var _eventListeners = require("./event-listeners");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+class ModalIframe extends _baseIframe.default {
+  constructor(args = {}) {
+    super(args);
+  }
+
+  bindEventListeners({
+    close = () => {},
+    loader
+  } = {}) {
+    (0, _eventListeners.dispatchRebillyInsturmentEventHandler)(this);
+    (0, _eventListeners.resizeComponentHandler)(this);
+    (0, _eventListeners.changeIframeSrcHandler)(this);
+    this.component.on(`${this.name}-close`, (...args) => {
+      close(...args);
+    });
+    (0, _eventListeners.stopLoaderHandler)(this, {
+      loader,
+      section: 'modal',
+      id: 'modal-content'
+    });
+  }
+
+}
+
+exports.ModalIframe = ModalIframe;

package/dist/views/common/iframe/view-iframe.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ViewIframe = void 0;
+
+var _baseIframe = _interopRequireDefault(require("./base-iframe"));
+
+var _eventListeners = require("./event-listeners");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+class ViewIframe extends _baseIframe.default {
+  constructor(args = {}) {
+    super(args);
+  }
+
+  bindEventListeners({
+    loader
+  } = {}) {
+    (0, _eventListeners.dispatchRebillyInsturmentEventHandler)(this);
+    (0, _eventListeners.resizeComponentHandler)(this);
+    (0, _eventListeners.stopLoaderHandler)(this, {
+      loader
+    });
+  }
+
+}
+
+exports.ViewIframe = ViewIframe;

package/dist/views/common/render-utilities.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.replaceContent = replaceContent;
+
+function replaceContent(form, newContent) {
+  const contentElement = form.querySelector('.rebilly-instruments-content');
+  contentElement.innerHTML = newContent;
+}

package/dist/views/confirmation.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mountConfirmation = mountConfirmation;
+exports.baseConfirmationHTML = void 0;
+
+var _purchase = require("../functions/purchase");
+
+var _iframe = require("./common/iframe");
+
+var _renderUtilities = require("./common/render-utilities");
+
+var _methodSelector = require("./method-selector");
+
+var _summary = require("./summary");
+
+const baseConfirmationHTML = '<div class="rebilly-instruments-confirmation"></div>';
+exports.baseConfirmationHTML = baseConfirmationHTML;
+
+async function mountConfirmation({
+  instrument,
+  mainStyle,
+  state
+}) {
+  if (instrument.billingAddress && state.summary) {
+    (0, _summary.updateSummary)({
+      state,
+      instrument
+    });
+  }
+
+  (0, _renderUtilities.replaceContent)(state.form, baseConfirmationHTML);
+  state.loader.startLoading({
+    id: 'confirmation'
+  });
+  const container = document.querySelector('.rebilly-instruments-confirmation');
+  const {
+    paymentMethodsUrl
+  } = state.options._computed;
+  const model = {
+    configs: state.configs,
+    options: state.options,
+    mainStyle,
+    instrument
+  };
+  const name = 'rebilly-instruments-confirmation';
+  const iframe = await new _iframe.ViewIframe({
+    name,
+    url: `${paymentMethodsUrl}/confirmation`,
+    container,
+    model
+  });
+  iframe.bindEventListeners({
+    loader: state.loader
+  });
+  iframe.component.on(`${name}-confirm-purchase`, confirmedInstrument => {
+    (0, _purchase.purchase)({
+      state,
+      payload: confirmedInstrument
+    });
+  });
+  iframe.component.on('choose-another-method', () => {
+    state.iframeComponents = state.iframeComponents.filter(item => {
+      if (item.name === iframe.name) {
+        item.destroy();
+        return false;
+      }
+
+      return true;
+    });
+    (0, _summary.updateSummary)({
+      state
+    });
+    (0, _methodSelector.updateMethodSelector)({
+      state,
+      mainStyle
+    });
+  });
+  state.iframeComponents.push(iframe);
+}

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

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Summary component should inject the proper HTML for express methods 1`] = `null`;

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

@@ -0,0 +1,92 @@
+"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.configs.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.configs.publishableKey,
+      organizationId: state.configs.organizationId,
+      digitalWallet
+    });
+  } else {
+    mountApplePayButton();
+    updateBtnStyling();
+  }
+
+  Rebilly.on('ready', () => {
+    mountApplePayButton();
+    updateBtnStyling();
+  });
+  Rebilly.on('token-ready', token => {
+    const instrumentReadyPayload = {
+      websiteId: state.configs.websiteId,
+      items: state.options.intent.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

@@ -0,0 +1,32 @@
+"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 = {
+    configs: state.configs,
+    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

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

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateDigitalWallet = generateDigitalWallet;
+
+var _getMethodData = require("./get-method-data");
+
+function generateDigitalWallet({
+  state,
+  summary,
+  EXPRESS_METHODS
+}) {
+  const output = {};
+  const {
+    paymentInstruments
+  } = state.options;
+  const transactionData = {
+    amount: summary.total,
+    currency: summary.currency,
+    countryCode: state.options.intent.countryCode,
+    label: state.configs.websiteId
+  };
+  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;
+
+      output[METHOD_TYPE] = {
+        transactionData,
+        merchantConfig: {
+          merchantName: (_paymentInstruments$a = paymentInstruments.applePay.merchantConfig) === null || _paymentInstruments$a === void 0 ? void 0 : _paymentInstruments$a.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

@@ -0,0 +1,132 @@
+"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"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('generateDigitalWallet', () => {
+  class TestInstance {
+    constructor({
+      configs = {},
+      options = {}
+    } = {}) {
+      this.configs = configs;
+      this.options = options;
+    }
+
+  }
+
+  const summary = new _summaryModel.default({
+    currency: 'USD',
+    total: 1
+  });
+  const configs = {
+    websiteId: 'test-website-id'
+  };
+  const options = {
+    intent: {
+      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({
+        configs,
+        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({
+        configs,
+        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

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

@@ -0,0 +1,55 @@
+"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({
+  methods,
+  state
+}) {
+  const result = {
+    EXPRESS_METHODS: [],
+    METHODS: []
+  };
+  methods.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);
+    }
+  });
+  return result;
+}