@rebilly/instruments 1.0.2-beta.8 → 2.1.1-beta.0

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

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

@@ -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,68 @@
+"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

@@ -0,0 +1,135 @@
+"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-payment-methods.js

@@ -5,8 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getPaymentMethods = getPaymentMethods;
 
+var _getMethodData = require("./get-method-data");
+
 /* eslint-disable no-unused-expressions, arrow-body-style */
-const SUPPORTED_EXPRESS_METHODS = ['Google Pay'];
+const SUPPORTED_EXPRESS_METHODS = ['Google Pay', 'Apple Pay', 'paypal'];
 const SUPPORTED_METHODS = ['payment-card'];
 
 const isExpressMethod = ({
@@ -20,27 +22,45 @@ const isSupportedMethod = ({
   method
 }) => {
   return SUPPORTED_METHODS.includes(method);
-};
+}; // TODO: just loader is used. We could simplify signature
 
-function getPaymentMethods(methods) {
+
+function getPaymentMethods({
+  state
+}) {
   const result = {
     EXPRESS_METHODS: [],
     METHODS: []
   };
-  methods.forEach(method => {
+  state.data.readyToPay.forEach(method => {
     if (isExpressMethod(method)) {
-      // Add loader entry per express method
-      this.loader.startLoading({
-        id: `${method.method}-express`
+      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
-      this.loader.startLoading({
+      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

@@ -2,45 +2,44 @@
 
 var _getPaymentMethods = require("./get-payment-methods");
 
-var _readyToPayModel = _interopRequireDefault(require("@/storefront/models/ready-to-pay-model"));
+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()
+      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: []
+      })]
     };
-  }
-
-  _getPaymentMethods() {
-    return _getPaymentMethods.getPaymentMethods.apply(this, arguments);
   }
 
 }
 
 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 = instance._getPaymentMethods(methods);
-
+  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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MountMethodSelector = MountMethodSelector;
-exports.UpdateMethodSelector = UpdateMethodSelector;
+exports.mountMethodSelector = mountMethodSelector;
+exports.updateMethodSelector = updateMethodSelector;
 exports.baseMethodSelectorHTML = void 0;
 
 var _riskDataCollector = require("@rebilly/risk-data-collector");
@@ -13,22 +13,19 @@ var _getPaymentMethods = require("./get-payment-methods");
 
 var _mountExpressMethods = require("./mount-express-methods");
 
-var _processDigitalWalletOptions = require("./process-digital-wallet-options");
+var _generateDigitalWallet = require("./generate-digital-wallet");
 
 var _mountMethods = require("./mount-methods");
 
-var _fetchSummaryData = require("../../functions/mount/fetch-summary-data");
-
-var _events = _interopRequireDefault(require("../../events"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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">
+  <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>
@@ -40,114 +37,86 @@ const baseMethodSelectorHTML = compactExpressInstruments => `
 
 exports.baseMethodSelectorHTML = baseMethodSelectorHTML;
 
-function MountMethodSelector({
-  readyToPay,
-  summary,
-  plans,
-  products,
-  mainStyle
-} = {}) {
+function mountMethodSelector({
+  state
+}) {
   const {
     EXPRESS_METHODS,
     METHODS
-  } = _getPaymentMethods.getPaymentMethods.call(this, readyToPay);
-
-  this.form.innerHTML += baseMethodSelectorHTML(this.options.paymentInstruments.compactExpressInstruments);
-  const EXPRESS_METHODS_CONTAINER = document.querySelector('.rebilly-instruments-express-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');
-  const digitalWallet = {
-    transactionData: {
-      amount: summary.total,
-      currency: summary.currency,
-      countryCode: this.options.intent.countryCode,
-      label: this.configs.websiteId
-    },
-    ...(0, _processDigitalWalletOptions.processDigitalWalletOptions)(this.options, EXPRESS_METHODS)
-  };
-  this.configs = { ...this.configs,
-    digitalWallet
-  };
-
-  function initializeFramepay() {
-    if (Rebilly.initialized) {
-      _mountExpressMethods.mountExpressMethods.call(this, {
-        EXPRESS_METHODS,
-        EXPRESS_METHODS_CONTAINER
-      });
-    } else {
-      Rebilly.initialize({
-        publishableKey: this.configs.publishableKey,
-        organizationId: this.configs.organizationId,
-        digitalWallet
-      });
-      Rebilly.on('ready', () => {
-        _mountExpressMethods.mountExpressMethods.call(this, {
-          EXPRESS_METHODS,
-          EXPRESS_METHODS_CONTAINER
-        });
-      });
-      Rebilly.on('token-ready', data => {
-        _events.default.instrumentReady.dispatch(data);
-      });
-    }
-  }
+  state.options.digitalWallet = (0, _generateDigitalWallet.generateDigitalWallet)({
+    state,
+    EXPRESS_METHODS
+  });
 
   if (METHODS.length) {
-    _mountMethods.MountMethods.call(this, {
+    (0, _mountMethods.MountMethods)({
+      state,
       METHODS_CONTAINER,
-      METHODS,
-      mainStyle,
-      plans,
-      products
+      METHODS
     });
   } else {
     METHODS_CONTAINER.style.display = 'none';
   }
 
-  if (window.Rebilly && EXPRESS_METHODS.length) {
-    initializeFramepay.call(this);
+  if (EXPRESS_METHODS.length) {
+    (0, _mountExpressMethods.mountExpressMethods)({
+      state,
+      EXPRESS_METHODS,
+      EXPRESS_METHODS_CONTAINER
+    });
   } else {
-    EXPRESS_METHODS_CONTAINER.style.display = 'none';
+    EXPRESS_METHODS_CONTAINER.parentNode.style.display = 'none';
   }
 
-  this.translate.translateItems();
-  this.loader.stopLoading({
+  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;
 
-async function UpdateMethodSelector({
-  mainStyle
-} = {}) {
-  this.loader.startLoading({
+  state.loader.startLoading({
     id: 'initForm'
   });
   const {
     riskMetadata
   } = await (0, _riskDataCollector.collectData)();
-  const {
-    readyToPay,
-    summary: summaryData,
-    plans,
-    products
-  } = await _fetchSummaryData.FetchSummaryData.call(this, {
+  state.data = await (0, _fetchData.fetchData)({
+    state,
     riskMetadata
   });
-  this.formOptions = {
-    summary: summaryData,
-    readyToPay,
-    plans,
-    products,
-    mainStyle
-  };
-  this.form.querySelectorAll(':not(.rebilly-instruments-confirmation)').forEach(element => {
+
+  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.call(this, this.formOptions);
+  mountMethodSelector({
+    state
+  });
 }