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

package/src/views/summary.spec.js

@@ -0,0 +1,170 @@
+import SummaryModel from '@/storefront/models/summary-model';
+import PlanModel from '@/storefront/models/plan-model';
+import ProductModel from '@/storefront/models/product-model';
+import { Loader } from '../loader';
+import { Translate } from '../i18n';
+import { mountSummary } from './summary';
+import { RebillyInstrumentsInstance } from '../index';
+
+describe('Summary component', () => {
+  let summaryElement;
+  beforeEach(() => {
+    document.body.innerHTML = '';
+    summaryElement = document.createElement('div');
+    document.body.append(summaryElement);
+  });
+
+  class TestMountSummaryInstance {
+    constructor({
+      configs = {},
+      options = {},
+      summary = summaryElement,
+      loader = new Loader(),
+      translate = new Translate()
+    } = {}) {
+      this.configs = configs;
+      this.options = options;
+      this.summary = summary;
+      this.loader = loader;
+      this.translate = translate;
+    }
+  }
+
+  const options = {
+    intent: {
+      countryCode: 'US',
+      items: [
+        {
+          planId: 'my-awesome-product',
+          quantity: 1,
+          thumbnail: ''
+        },
+        {
+          planId: 'awesome-t-shirt',
+          quantity: 2,
+          thumbnail: ''
+        }
+      ]
+    }
+  };
+
+  const summaryData = new SummaryModel({
+    currency: 'USD',
+    lineItems: [
+      {
+        type: 'debit',
+        description: 'My Awesome Product',
+        unitPrice: 30,
+        quantity: 1,
+        price: 30,
+        productId: 'test-product-1',
+        planId: 'my-awesome-product'
+      },
+      {
+        type: 'debit',
+        description: 'Awesome T-Shirt',
+        unitPrice: 20,
+        quantity: 2,
+        price: 40,
+        productId: 'test-product-2',
+        planId: 'awesome-t-shirt'
+      }
+    ],
+    subtotalAmount: 70,
+    taxAmount: 0,
+    shippingAmount: 0,
+    discountsAmount: 0,
+    total: 70
+  });
+
+  const planData = [
+    new PlanModel({
+      name: 'My Awesome Product',
+      id: 'my-awesome-product',
+      productId: 'test-product-1'
+    }),
+    new PlanModel({
+      name: 'My Awesome T-Shirt',
+      id: 'awesome-t-shirt',
+      productId: 'test-product-2'
+    })
+  ];
+
+  const productData = [
+    new ProductModel({
+      description: 'My Awesome Product',
+      id: 'test-product-1'
+    }),
+    new ProductModel({
+      description: 'My Awesome T-Shirt',
+      id: 'test-product-2'
+    })
+  ];
+
+  const configs = {
+    websiteId: 'test-website-id'
+  };
+
+  it('should render the summary correctly', () => {
+    const mountSummaryInstance = new TestMountSummaryInstance({
+      configs,
+      options
+    });
+
+    //TODO: improve design to avoid this manual change
+    mountSummaryInstance.loader.DOM.summary = mountSummaryInstance.summary;
+
+    mountSummary({
+      state: mountSummaryInstance,
+      summaryOptions: {
+        summary: summaryData,
+        plans: planData,
+        products: productData
+      }
+    });
+
+    // Number of line items
+    const itemsContainer = document.querySelector(
+      '.rebilly-instruments-summary-line-items'
+    );
+    expect(itemsContainer).toMatchSnapshot();
+
+    // Breakdown
+    const summaryBreakdown = document.querySelector(
+      '.rebilly-instruments-summary-breakdown'
+    );
+    expect(summaryBreakdown).toMatchSnapshot();
+  });
+
+  it('should not render the plan description if its falsy', () => {
+    const state = new RebillyInstrumentsInstance();
+    state.configs = configs;
+    state.options = options;
+
+    const mountSummaryInstance = new TestMountSummaryInstance({
+      configs,
+      options
+    });
+
+    // Making one product description falsy
+    productData[0].description = null;
+
+    //TODO: improve design to avoid this manual change
+    mountSummaryInstance.loader.DOM.summary = mountSummaryInstance.summary;
+
+    mountSummary({
+      state: mountSummaryInstance,
+      summaryOptions: {
+        summary: summaryData,
+        plans: planData,
+        products: productData
+      }
+    });
+
+    // Check that only one description is render
+    const itemsSynopsysDescription = document.querySelectorAll(
+      '.rebilly-instruments-summary-line-item-synopsis-description'
+    );
+    expect(itemsSynopsysDescription.length).toEqual(1);
+  });
+});

package/tests/async-utilities.js

@@ -0,0 +1,22 @@
+import { sleep } from '@/utils'
+
+export async function avoidUnhandledPromises() {
+  // We need this sleep to avoid unhandled promises.
+  // This hack will be removed if we refactor the current design.
+  await sleep(100)
+}
+
+/**
+ * @param {Promise} promise
+ */
+export async function expectConfigurationError(promise) {
+  const NoConfigOrOptionsError =
+    'Could not use Rebilly Instruments configurations or mount options to fetch Rebilly data'
+  let error = null
+  try {
+    await promise
+  } catch (e) {
+    error = e
+  }
+  expect(error.message).toBe(NoConfigOrOptionsError)
+}

package/tests/mocks/rebilly-instruments-mock.js

@@ -1,24 +1,122 @@
-import RebillyInstruments from '@rebilly/instruments';
+import { RebillyInstrumentsInstance } from '@rebilly/instruments';
+import { createFramepayMock } from 'tests/mocks/framepay-mock';
+import { get, ok, post } from 'msw-when-then';
+import { when } from 'tests/msw/server';
+import { storefrontURL } from 'tests/mocks/storefront-api-mock';
+import PlanModel from '@/storefront/models/plan-model';
+import ProductModel from '@/storefront/models/product-model';
+import SummaryModel from '@/storefront/models/summary-model';
+import merge from 'lodash.merge';
+
+export async function RenderMockRebillyInstruments(configs = {}, options = {}) {
+  const testPlan = new PlanModel({ name: 'Test Plan', id: 'test-plan-id-1' });
+  const testProduct = new ProductModel({
+    description: 'My Awesome Product',
+    id: 'test-product-1'
+  });
+  const testSummary = new SummaryModel({
+    currency: 'USD',
+    lineItems: [
+      {
+        description: 'test-plan-id-1',
+        planId: 'test-plan-id-1',
+        productId: 'test-product-1',
+        quantity: 1
+      }
+    ]
+  });
+  const framePayStyleUrl = 'https://dev.framepay.rebilly.com/rebilly.css';
+
+  when(post(`${storefrontURL}/ready-to-pay`)).thenReturn(
+    (() => {
+      return ok([
+        {
+          method: 'payment-card',
+          feature: {
+            name: 'Google Pay',
+            merchantName: 'google-pay-merchant-name',
+            merchantOrigin: 'google-pay-merchant-origin'
+          },
+          brands: ['Visa', 'MasterCard', 'American Express', 'Discover'],
+          filters: []
+        }
+      ]);
+    })()
+  );
+
+  when(post(`${storefrontURL}/preview-purchase`)).thenReturn(
+    (() => {
+      return ok(testSummary);
+    })()
+  );
+
+  when(get(`${storefrontURL}/plans`)).thenReturn(
+    (() => {
+      return ok([testPlan]);
+    })()
+  );
+
+  when(get(`${storefrontURL}/products`)).thenReturn(
+    (() => {
+      return ok([testProduct]);
+    })()
+  );
+
+  document.body.innerHTML = `
+      <div class="form-selector"></div>
+      <div class="summary-selector"></div>
+    `;
+
+  const defaultConfigs = {};
+
+  const defaultOptions = {
+    form: '.form-selector',
+    summary: '.summary-selector',
+    _dev: {
+      framePayStyleLink: framePayStyleUrl
+    },
+    options: {
+      locale: 'auto',
+      intent: {
+        items: [
+          {
+            planId: 'test-plan-id-1',
+            quantity: 1
+          }
+        ]
+      }
+    }
+  };
+
+  const framepayMock = createFramepayMock();
+  global.Rebilly = framepayMock;
+
+  const rebillyInstruments = MockRebillyInstruments(
+    merge(defaultConfigs, configs)
+  );
+  await rebillyInstruments.mount(merge(defaultOptions, options));
+  return rebillyInstruments;
+}
 
 export function MockRebillyInstruments(config = {}, mount = null) {
+  const instance = new RebillyInstrumentsInstance();
   const initializeConfig = {
     organizationId: 'test-organization-id',
     publishableKey: 'test-api-key',
     websiteId: 'test-website-id',
     apiMode: 'live',
     ...config
-  }
+  };
 
-  RebillyInstruments.initialize(initializeConfig);
+  instance.initialize(initializeConfig);
 
   if (mount !== null) {
-    document.body.innerHTML =
-    `
+    document.body.innerHTML = `
       <div class="${mount.form || 'rebilly-instruments'}"></div>
       <div class="${mount.summary || 'rebilly-instruments-summary'}"></div>
     `;
-    RebillyInstruments.mount(mount);
+    instance.mount(mount);
   }
 
-  return RebillyInstruments;
+  return instance;
 }

package/dist/components/confirmation.js

@@ -1,103 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.MountConfirmation = MountConfirmation;
-exports.baseConfirmationHTML = void 0;
-
-var _zoid = _interopRequireDefault(require("zoid"));
-
-var _main = require("../styles/main");
-
-var _zoidHelpers = require("./form/zoid-helpers");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-var baseConfirmationHTML = "\n  <div class=\"rebilly-instruments-confirmation\"></div>\n";
-exports.baseConfirmationHTML = baseConfirmationHTML;
-
-function _confirmPurchase(instrument) {
-  this.purchase(instrument);
-}
-
-function MountConfirmation(_ref) {
-  var _this$configs,
-      _this = this;
-
-  var instrument = _ref.instrument;
-  this.form.innerHTML += baseConfirmationHTML;
-  this.loader.startLoading({
-    id: 'confirmation'
-  });
-  var CONFIRMATION_CONTAINER = document.querySelector('.rebilly-instruments-confirmation');
-  this.form.querySelectorAll(":not(.rebilly-instruments-confirmation)").forEach(function (element) {
-    if (!element.classList.contains('rebilly-instruments-loader') && !element.classList.contains('rebilly-instruments-loader-spinner')) {
-      element.remove();
-    }
-  });
-  var paymentMethodsUrl = this.options._computed.paymentMethodsUrl;
-  var zoidCreateConfig = {
-    tag: 'rebilly-instruments-confirmation',
-    url: "".concat(paymentMethodsUrl, "/confirmation"),
-    defaultContext: 'iframe',
-    dimensions: {
-      width: '100%',
-      height: '100%'
-    }
-  };
-  var zoidMountConfig = {
-    configs: this.configs,
-    options: this.options,
-    MAIN_STYLE: (0, _main.MAIN_STYLE)(((_this$configs = this.configs) === null || _this$configs === void 0 ? void 0 : _this$configs.theme) || {}),
-    instrument: instrument,
-    // eslint-disable-next-line no-shadow
-    confirmPurchase: function confirmPurchase(instrument) {
-      _confirmPurchase.call(_this, instrument);
-    },
-    onFrameResize: function onFrameResize(height) {
-      CONFIRMATION_CONTAINER.style.height = height;
-    },
-    onLoading: function onLoading(id) {
-      setTimeout(function () {
-        _this.loader.stopLoading({
-          id: id
-        });
-      }, 1);
-    },
-    back: function back() {
-      CONFIRMATION_CONTAINER.remove();
-
-      _this._mountForm(_this.formOptions);
-    },
-    showBackDrop: function showBackDrop(_ref2) {
-      var doc = _ref2.doc,
-          uid = _ref2.uid,
-          focus = _ref2.focus;
-
-      var container = _zoidHelpers.containerTemplate.call(_this, {
-        doc: doc,
-        uid: uid,
-        focus: focus
-      });
-
-      document.body.append(container);
-    },
-    dispatch: _zoidHelpers.dispatch
-  };
-
-  if (!this.zoidComponents.confirmation) {
-    this.zoidComponents.confirmation = _zoid["default"].create(zoidCreateConfig);
-  }
-
-  this.zoidComponents.confirmation({
-    RebillyInstruments: zoidMountConfig,
-    onClose: function onClose() {
-      var backDropContainer = document.querySelector('.rebilly-instruments-overlay');
-
-      if (backDropContainer) {
-        backDropContainer.remove();
-      }
-    }
-  }).render('.rebilly-instruments-confirmation');
-}

package/dist/components/form/form.js

@@ -1,110 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.MountForm = MountForm;
-exports.baseFormHTML = void 0;
-
-var _getPaymentMethods = require("./get-payment-methods");
-
-var _mountExpressPaymentMethods = require("./mount-express-payment-methods");
-
-var _processDigitalWalletOptions = require("./process-digital-wallet-options");
-
-var _methodSelector = require("./method-selector");
-
-var _events = _interopRequireDefault(require("../../events"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var baseFormHTML = function baseFormHTML(compactExpressInstruments) {
-  return "\n  <form class=\"rebilly-instruments-form\">\n    <div class=\"rebilly-instruments-form-express ".concat(compactExpressInstruments ? 'compact' : '', "\">\n      <span data-rebilly-i18n=\"form.expressCheckout\" class=\"rebilly-instruments-form-express-label\">Express checkout</span>\n    </div>\n    <div class=\"rebilly-instruments-divider\">\n      <span class=\"rebilly-instruments-divider-label\" data-rebilly-i18n=\"form.or\">Or</span>\n    </div>\n  </form>\n");
-};
-
-exports.baseFormHTML = baseFormHTML;
-
-function MountForm() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      readyToPay = _ref.readyToPay,
-      summary = _ref.summary,
-      plans = _ref.plans,
-      products = _ref.products;
-
-  var _getPaymentMethods$ca = _getPaymentMethods.getPaymentMethods.call(this, readyToPay),
-      EXPRESS_METHODS = _getPaymentMethods$ca.EXPRESS_METHODS,
-      METHODS = _getPaymentMethods$ca.METHODS;
-
-  var EXPRESS_METHODS_CONTAINER = document.querySelector('.rebilly-instruments-form-express');
-  this.form.innerHTML += baseFormHTML(this.options.paymentInstruments.compactExpressInstruments);
-  var METHODS_DIVIDER = document.querySelector('.rebilly-instruments-divider');
-  METHODS_DIVIDER.style.display = METHODS.length && EXPRESS_METHODS.length ? 'block' : 'none';
-
-  var digitalWallet = _objectSpread({
-    transactionData: {
-      amount: summary.total,
-      currency: summary.currency,
-      countryCode: this.options.intent.countryCode,
-      label: this.configs.websiteId
-    }
-  }, (0, _processDigitalWalletOptions.processDigitalWalletOptions)(this.options));
-
-  this.configs = _objectSpread(_objectSpread({}, this.configs), {}, {
-    digitalWallet: digitalWallet
-  });
-
-  function initializeFramepay() {
-    var _this = this;
-
-    if (Rebilly.initialized) {
-      _mountExpressPaymentMethods.mountExpressPaymentMethods.call(this, {
-        EXPRESS_METHODS: EXPRESS_METHODS,
-        EXPRESS_METHODS_CONTAINER: EXPRESS_METHODS_CONTAINER
-      });
-    } else {
-      Rebilly.initialize({
-        publishableKey: this.configs.publishableKey,
-        organizationId: this.configs.organizationId,
-        digitalWallet: digitalWallet
-      });
-      Rebilly.on('ready', function () {
-        _mountExpressPaymentMethods.mountExpressPaymentMethods.call(_this, {
-          EXPRESS_METHODS: EXPRESS_METHODS,
-          EXPRESS_METHODS_CONTAINER: EXPRESS_METHODS_CONTAINER
-        });
-      });
-      Rebilly.on('token-ready', function (data) {
-        _events["default"].instrumentReady.dispatch(data);
-      });
-    }
-  }
-
-  if (METHODS.length) {
-    this.form.innerHTML += "<div class=\"rebilly-instruments-methods\"></div>";
-    var METHODS_CONTAINER = document.querySelector('.rebilly-instruments-methods');
-
-    _methodSelector.MountMethodSelector.call(this, {
-      METHODS_CONTAINER: METHODS_CONTAINER,
-      METHODS: METHODS,
-      plans: plans,
-      products: products
-    });
-  }
-
-  if (window.Rebilly && EXPRESS_METHODS.length) {
-    initializeFramepay.call(this);
-  }
-
-  this.translate.translateItems();
-  this.loader.stopLoading({
-    id: 'initForm'
-  });
-}
-
-;

package/dist/components/form/form.spec.js

@@ -1,135 +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 _form = require("./form");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-describe('Summary component', function () {
-  var formElement;
-  beforeEach(function () {
-    formElement = document.createElement('div');
-    document.body.append(formElement);
-  });
-
-  var TestMountFormInstance = /*#__PURE__*/function () {
-    function TestMountFormInstance() {
-      var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-          _ref$configs = _ref.configs,
-          configs = _ref$configs === void 0 ? {} : _ref$configs,
-          _ref$options = _ref.options,
-          options = _ref$options === void 0 ? {} : _ref$options,
-          _ref$form = _ref.form,
-          form = _ref$form === void 0 ? formElement : _ref$form,
-          _ref$loader = _ref.loader,
-          loader = _ref$loader === void 0 ? new _loader.Loader() : _ref$loader,
-          _ref$translate = _ref.translate,
-          translate = _ref$translate === void 0 ? new _i18n.Translate() : _ref$translate,
-          _ref$zoidComponents = _ref.zoidComponents,
-          zoidComponents = _ref$zoidComponents === void 0 ? {} : _ref$zoidComponents;
-
-      _classCallCheck(this, TestMountFormInstance);
-
-      this.configs = configs;
-      this.options = options;
-      this.form = form;
-      this.loader = loader;
-      this.translate = translate;
-      this.zoidComponents = zoidComponents;
-    }
-
-    _createClass(TestMountFormInstance, [{
-      key: "mountForm",
-      value: function mountForm(readyToPayAndSummary) {
-        this.loader.DOM.form = this.form;
-
-        for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-          args[_key - 1] = arguments[_key];
-        }
-
-        return _form.MountForm.apply(this, args.concat(readyToPayAndSummary));
-      }
-    }]);
-
-    return TestMountFormInstance;
-  }();
-
-  var options = {
-    intent: {
-      countryCode: 'US',
-      items: [{
-        planId: 'my-awesome-product',
-        quantity: 1,
-        thumbnail: ''
-      }, {
-        planId: 'awesome-t-shirt',
-        quantity: 2,
-        thumbnail: ''
-      }]
-    },
-    paymentInstruments: {
-      compactExpressInstruments: true
-    }
-  };
-  var 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
-  });
-  var readyToPayData = [new _readyToPayModel["default"](), new _readyToPayModel["default"]({
-    method: 'payment-card',
-    feature: {
-      name: 'Google Pay'
-    },
-    brands: ['Visa'],
-    filters: []
-  })];
-  var configs = {
-    websiteId: 'test-website-id'
-  };
-  it('should inject the proper HTML for express methods', function () {
-    var mountSummaryInstance = new TestMountFormInstance({
-      configs: configs,
-      options: options
-    });
-    mountSummaryInstance.mountForm({
-      summary: summaryData,
-      readyToPay: readyToPayData
-    });
-    var form = document.querySelector('.rebilly-instruments-form');
-    expect(form).toMatchSnapshot();
-  });
-});

package/dist/components/form/get-method-data.js

@@ -1,21 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getMethodData = void 0;
-
-var _utils = require("../../utils");
-
-var getMethodData = function getMethodData(method) {
-  var _method$feature, _method$feature2;
-
-  var METHOD_ID = (0, _utils.kebabCase)(((_method$feature = method.feature) === null || _method$feature === void 0 ? void 0 : _method$feature.name) || method.method);
-  var METHOD_TYPE = (0, _utils.camelCase)(((_method$feature2 = method.feature) === null || _method$feature2 === void 0 ? void 0 : _method$feature2.name) || method.method).replace('-', '');
-  return {
-    METHOD_ID: METHOD_ID,
-    METHOD_TYPE: METHOD_TYPE
-  };
-};
-
-exports.getMethodData = getMethodData;