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

package/.babelrc

@@ -10,8 +10,17 @@
     ]
   ],
   "plugins": [
-    ["module-resolver", {
-      "root": ["./src"]
-    }]
+    [
+      "module-resolver",
+      {
+        "root": [
+          "./"
+        ],
+        "alias": {
+          "@": "./src/",
+          "test": "./test"
+        }
+      }
+    ]
   ]
-}
+}

package/.eslintrc.js

@@ -4,6 +4,9 @@ module.exports = {
     browser: true,
     es6: true,
   },
+  globals: {
+    Rebilly: "readonly",
+  },
   rules: {
     'class-methods-use-this': 'off',
     'import/no-extraneous-dependencies': 'off',

package/.prettierrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+  semi: true,
+  tabWidth: 2,
+  useTabs: false,
+  printWidth: 80,
+  endOfLine: 'auto',
+  trailingComma: 'none',
+  bracketSpacing: true,
+  arrowParens: 'always',
+  singleQuote: true,
+}

package/README.md

@@ -1,14 +1,8 @@
-<p align="center">
-  <img src="https://user-images.githubusercontent.com/1580169/129248437-0d0d5082-1fa5-48a5-b9ae-0b4c9ba1c526.png" alt="drawing" width="176"/>
-</p>
-<p align="center">
-  <img src="https://github.com/Rebilly/instruments/actions/workflows/publish.yaml/badge.svg" />
-</p>
-<p align="center"><br></p>
 <div align="center">
-    <h1>Rebilly Instruments</h1>
-    <p>The last payment integration that you will ever need.</p>
-    <br>
+  <img src="https://user-images.githubusercontent.com/1580169/129248437-0d0d5082-1fa5-48a5-b9ae-0b4c9ba1c526.png" alt="drawing" width="176"/>
+  <h1>Rebilly Instruments</h1>
+  <p>The last payment integration that you will ever need.</p>
+  <br>
 </div>
 
 > **Rebilly Instruments** is in active development and should be treated as **beta** software. This means it may contain bugs and instability.
@@ -51,312 +45,19 @@ Enjoy 🎉
 <script type="text/javascript">
   import RebillyInstruments from '@rebilly/instruments';
 
-  RebillyInstruments.initialize({
-    // ...see documentation below for initialize options
-  });
-
   RebillyInstruments.mount({
-    // ...see documentation below for mounting options
+    publishableKey: 'pk_sandbox_123',
+    organizationId: 'org-123',
+    websiteId: 'my-website-id',
+    items: [
+      {
+        planId: 'my-plan-id',
+        quantity: 1
+      },
+    ]
+    // ...see documentation below for more options
   });
 </script>
 ```
 
-## Initialization Options
-
-### `organizationId`
-
-**Required** *string*
-
-The Rebilly organization id that all api requests will be associated with.
-
-### `publishableKey`
-
-**Required** *string*
-
-The Rebilly publishable api key used to access the storefront api's.
-
-### `websiteID`
-
-**Required** *string*
-
-The Rebilly website api.
-
-### `apiMode`
-*string* - default: "live". "live", "sandbox"
-
-The rebilly storefront api mode
-
-### `css`
-*string* - default: null.
-
-A stringified CSS to be injected into the forms to override default styling.
-
-```js
-{
-  css: `
-    .rebilly-instruments-form-field-label {
-      text-transform: uppercase;
-    }
-  `,
-}
-```
-[List of used classes](https://github.com/Rebilly/instruments/tree/main/docs/CSS_CLASSES.md)
-
-It is possible to use your web browser developer tools and check the CSS rule you want to target.
-
-### `theme`
-*object* - default: null
-    
-Configurable object to override some styling. Use alone or with `css` to control the styles.
-
-```js
-{
-  typography: {/* options */},
-  color: {/* options */}
-}
-```
-
-#### `typography`
-
-* `fontFamily`: Same as CSS property "font-family". Will be used thoughout the library ui
-
-#### `color`
-* `primary`: CSS hexcode or color name, used to draw user attention
- * `errorText`: CSS hexcode or color name, used to display error messages
- * `text`: CSS hexcode or color name, used to display font color
- * `buttonText`: CSS hexcode or color name, used for buttons text, primary will be it's background
- * `background`: CSS hexcode or color name, the color used for the background of the forms
- 
-
-### `i18n`
-*object* - default: null
-
-```js
-{
-  en: {
-    /* translations */
-  },
-  "en-US": {
-    /* translations */
-  },
-  // any other languages...
-}
-```
-
-## Example Initialization Options
-```js
-{
-  organizationId: "abc-123-xyz",
-  publishableKey: "def-456-uvw",
-  websiteId: "ghi-789-qst",
-  apiMode: "sandbox",
-  css: ".rebilly-instruments-summary-line-item-figure { border: 2px solid #0044d4; }",
-  theme: {
-    color: {
-      primary: "#0044d4",
-      errorText: "#cd5c5c",
-      text: "#0D2B3E",
-      buttonText: "#ffffff",
-      background: "#ffffff"
-    },
-    typography: {
-      fontFamily: "Comic Sans MS"
-    }
-  },
-  i18n: {
-    en: {
-      confirmation: {
-        confirm: "Please continue to purchase"
-      }
-    }
-  }
-}
-```
-
-## Mount Options
-
-### `form`
-
-*string* or *HTMLElement* - default: ".rebilly-instruments"
-
-The CSS class or HTML element were the form will be mounted
-
-### `summary`
-
-*string* or *HTMLElement* - default: ".rebilly-instruments-summary"
-
-The CSS class or HTML element were the summary will be mounted.
-
-### `options`
-
-*object* 
-
-The configurations that are to be passed to the library for use.
-
-```js
-{
-  local: ''
-  features: {},
-  intent: {},
-  paymentInstruments: {},
-}
-```
-
-### `local`
-
-*string* - default: "auto"
-
-The locale of the forms to be posted, uses browser locale by default.
-
-### features
-
-*object*
-
-```js
-{
-  autoConfirmation: true,
-  autoResult: true
-}
-```
-
-- `autoConfirmation`: default: true. Will mount the confirmation screen after `instrument-ready` event is triggered. Will need to trigger purchase manually if set to false. Can use RebillyInstruments.show('confirmation', options) to mount defautl component
-
-- autoResult - default: true. Show results of transaction after `purchase-completed` event is triggered will need to handle purchase result manually if set to false. Can use RebillyInstruments.show('result', options) to display default component
-
-### `intent`
-
-*object*
-
-The information required for purchaseing or vaulting an instrument
-
-```js
-{
-  items: [],
-  countryCode: 'US'
-}
-```
-
-#### `items`
-
-*Array.objects*
-
-```js
-[{
-  planId: 'abc-123-def',
-  quantity: 1,
-  thumbnail: 'https://www.example.com/picture.png'
-}]
-```
-
-- `planId`: *string* - Rebilly planId for the item
-- `quantity`: *number* - number of this item being purchased
-- `thumbnail`: *string* - The image sorce for the item. Recommend ~100px by 100px
-
-#### `countryCode`
-
-*string*
-
-The country code for the transaction
-
-### `paymentInstruments`
-
-*object*
-
-```js
-{
-  compactExpressInstruments: true,
-  address: {},
-  googlePay: {}
-  paymentCard: {},
-}
-```
-
-#### `compactExpressInstruments`
-
-*boolean* - default: true
-
-Show express methods as inline pill buttons, or list of full width button.
-
-#### `address`
-
-*object*
-
-Address options control how the address form looks across the library.
-
-```js
-{
-  name: 'combined',
-  region: 'split',
-  show: ['organization', 'phoneNumber'],
-  hide: ['email', 'address2'],
-  require: ['address', 'postalCode']
-}
-```
-
-- `name` - *string* - Controls how the first name and last name inputs are displayed. `default`, `combined`, or `stacked`
-- `region` - *string* - Controls how the country, region, and postal code inputs are displayed. `default`, `split`, or `stacked`
-- `show`- *array < string >* - Controls if `organization` or `phoneNumber` inputs are displayed.
-- `hide` - *array < string >* - Controls if `email`, `address2`, `city`, `country`, `region`, or `postalCode` are displayed.
-- `require` -*array < string >* - Controls if `organization`, `email`, `phoneNumber`, `address`, `address2`, `city`, `country`, `region`, or `postalCode` inputs are required by the customer.
-
-> Note: `firstName` and `lastName` are always required. `country` is required if there are shippable plans in the intent.
-
-#### `paymentCard`
-
-*object*
-
-- `popup`: *boolean* - default: false. Show method as a button with a form popup. Otherwise the form will be mounted inline.
-
-#### `googlePay`
-
-*object*
-
-- `displayOptions` - display options for google pay instrument
-
-**displayOptions**
-
-- `buttonColor` - default "black". Color of google pay button. "back", "white"
-- `buttonType` - default "short". The length of the button. "short", "long"
-- `buttonHeight` - The value and units of the button to match other payment buttons. example: "44px", "1rem" etc.
-
-## Example Mount Options
-```js
-{
-  form: '.form-mounting-point',
-  summary: '.summary-mounting-point',
-  options: {
-    local: 'en-CA'
-    features: {
-      autoConfirmation: true,
-      autoResult: true
-    },
-    intent: {
-      items: [
-        {
-          planId: 'abc-123-def',
-          quantity: 1,
-          thumbnail: 'https://www.example.com/picture-1.png'
-        }, {
-          planId: 'xyz-987-uvw',
-          quantity: 2,
-          thumbnail: 'https://www.example.com/picture-2.png'
-        }
-      ],
-      countryCode: 'US'
-    },
-    paymentInstruments: {
-      compactExpressInstruments: true,
-      googlePay: {
-        displayOptions: {
-          buttonColor: 'black',
-          buttonType: 'short',
-          buttonHeight: '44px'
-        }
-      },
-      paymentCard: {
-        popup: false
-      },
-    },
-  }
-}
-```
+See documentation at [Rebilly developer docs](https://www.rebilly.com/docs/content/dev-docs/concept/rebilly-instruments/)

package/dist/events/base-event.js

@@ -37,10 +37,12 @@ exports.registeredListeners = registeredListeners;
 
 class BaseEvent {
   /**
-   * @param {string} name 
+   * @param {string} name
    */
   constructor(name) {
-    this.name = name;
+    // Using namespaced internal name as a protection mechanism
+    const PREFIX = 'rebilly-instruments-';
+    this.internalName = PREFIX + name;
   }
 
   addEventListener(callback) {
@@ -48,16 +50,11 @@ class BaseEvent {
       detail
     }) => callback(detail);
 
-    registeredListeners.add(this.name, innerCallback);
-  }
-
-  removeEventListener() {
-    document.removeEventListener(this.name, this.callback, false);
-    this.callback = null;
+    registeredListeners.add(this.internalName, innerCallback);
   }
 
   dispatch(detail) {
-    const event = new CustomEvent(this.name, {
+    const event = new CustomEvent(this.internalName, {
       bubbles: true,
       detail
     });

package/dist/events/events.spec.js

@@ -2,7 +2,7 @@
 
 var _lodash = _interopRequireDefault(require("lodash.kebabcase"));
 
-var _events = _interopRequireWildcard(require("@/events"));
+var _ = _interopRequireWildcard(require("./"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -11,8 +11,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 it('Should export all public event names', async () => {
-  Object.keys(_events.default).forEach(internalEventName => {
-    expect(_events.default[internalEventName].name).toEqual((0, _lodash.default)(internalEventName));
-    expect((0, _lodash.default)(internalEventName) in _events.publicEventNames);
+  Object.keys(_.default).forEach(internalEventName => {
+    expect(_.default[internalEventName].internalName).toEqual(`rebilly-instruments-${(0, _lodash.default)(internalEventName)}`);
+    expect((0, _lodash.default)(internalEventName) in _.publicEventNames);
   });
 });

package/dist/events/index.js

@@ -13,7 +13,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const events = {
   instrumentReady: new _baseEvent.default('instrument-ready'),
-  purchaseCompleted: new _baseEvent.default('purchase-completed')
+  purchaseCompleted: new _baseEvent.default('purchase-completed'),
+  setupCompleted: new _baseEvent.default('setup-completed')
 };
 var _default = events;
 exports.default = _default;

package/dist/functions/destroy.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Destroy = Destroy;
+exports.destroy = destroy;
 
 var _rebillyJsSdk = require("rebilly-js-sdk");
 
@@ -11,26 +11,24 @@ var _baseEvent = require("../events/base-event");
 
 var _utils = require("../utils");
 
-async function Destroy() {
+async function destroy({
+  state
+}) {
   // wait to allow for cancellation to catch any pending api requests
   const sleepMilliseconds = 1000;
   await (0, _utils.sleep)(sleepMilliseconds);
-  [...(this.iframeComponents || {})].forEach(iframe => {
-    var _iframe$component;
-
-    (_iframe$component = iframe.component) === null || _iframe$component === void 0 ? void 0 : _iframe$component.destroy();
+  [...(state.iframeComponents || {})].forEach(iframe => {
+    iframe.destroy();
   });
 
   _baseEvent.registeredListeners.removeAll(document);
 
-  this.iframeComponents = [];
-  this.hasMounted = false;
-  this.summary.textContent = '';
-  this.form.textContent = '';
+  state.iframeComponents = [];
+  state.hasMounted = false;
+  state.summary.textContent = '';
+  state.form.textContent = '';
 
   _rebillyJsSdk.cancellation.cancelAll();
 
-  this.loader.clearAll();
-}
-
-;
+  state.loader.clearAll();
+}

package/dist/functions/destroy.spec.js

@@ -1,10 +1,10 @@
 "use strict";
 
-var _events = _interopRequireWildcard(require("@/events"));
+var _events = _interopRequireWildcard(require("../events"));
 
-var _baseEvent = _interopRequireDefault(require("@/events/base-event"));
+var _baseEvent = _interopRequireDefault(require("../events/base-event"));
 
-var _rebillyInstrumentsMock = require("tests/mocks/rebilly-instruments-mock");
+var _rebillyInstrumentsMock = require("../../tests/mocks/rebilly-instruments-mock");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

package/dist/functions/mount/fetch-data.js

@@ -0,0 +1,183 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fetchData = fetchData;
+exports.DataInstance = void 0;
+
+var _riskDataCollector = require("@rebilly/risk-data-collector");
+
+var _plans = require("../../storefront/plans");
+
+var _products = require("../../storefront/products");
+
+var _readyToPay = require("../../storefront/ready-to-pay");
+
+var _summary = require("../../storefront/summary");
+
+var _invoices = require("../../storefront/invoices");
+
+var _transactions = require("../../storefront/transactions");
+
+class DataInstance {
+  constructor({
+    state = {},
+    ...fields
+  } = {}) {
+    var _state$options;
+
+    Object.entries({ ...(state.data || {}),
+      ...fields
+    }).forEach(([key, value]) => {
+      this[key] = value;
+    });
+    this.money = ((_state$options = state.options) === null || _state$options === void 0 ? void 0 : _state$options.money) || null;
+  }
+
+  get amountAndCurrency() {
+    let currency;
+    let amount;
+
+    if (this.previewPurchase) {
+      currency = this.previewPurchase.currency;
+      amount = this.previewPurchase.total;
+    } else if (this.invoice) {
+      currency = this.invoice.currency;
+      amount = this.invoice.amount;
+    } else if (this.transaction) {
+      currency = this.transaction.currency;
+      amount = this.transaction.amount;
+    } else if (this.money) {
+      currency = this.money.currency;
+      amount = this.money.amount;
+    }
+
+    return {
+      amount,
+      currency
+    };
+  }
+
+  get isPayment() {
+    return this.invoice || this.transaction || this.money;
+  }
+
+  get isPurchase() {
+    return this.previewPurchase;
+  }
+
+  get summaryItems() {
+    const {
+      discountsAmount = null,
+      shippingAmount = null,
+      subtotalAmount = null,
+      taxAmount = null
+    } = this.previewPurchase || this.invoice || {};
+    return {
+      discountsAmount,
+      shippingAmount,
+      subtotalAmount,
+      taxAmount
+    };
+  }
+
+  get summaryLineItems() {
+    let lineItems = [];
+
+    if (this.invoice) {
+      ({
+        items: lineItems = []
+      } = this.invoice);
+    } else {
+      ({
+        lineItems = []
+      } = this.previewPurchase || {});
+    }
+
+    return lineItems;
+  }
+
+}
+
+exports.DataInstance = DataInstance;
+
+async function fetchData({
+  state = null,
+  riskMetadata = null,
+  summaryPayload = null,
+  // Dependancy injectable functions
+  fetchInvoice = _invoices.fetchInvoice,
+  fetchTransaction = _transactions.fetchTransaction
+}) {
+  try {
+    var _state$options2, _state$options3, _state$data, _state$data$transacti, _state$data3;
+
+    let transaction = null;
+
+    if ((_state$options2 = state.options) !== null && _state$options2 !== void 0 && _state$options2.transactionId) {
+      transaction = await fetchTransaction({
+        data: {
+          id: state.options.transactionId
+        },
+        state
+      });
+      state.data.transaction = transaction;
+    }
+
+    let invoice = null;
+
+    if ((_state$options3 = state.options) !== null && _state$options3 !== void 0 && _state$options3.invoiceId || (_state$data = state.data) !== null && _state$data !== void 0 && (_state$data$transacti = _state$data.transaction) !== null && _state$data$transacti !== void 0 && _state$data$transacti.hasInvoice) {
+      var _state$options4, _state$data2, _state$data2$transact;
+
+      invoice = await fetchInvoice({
+        data: {
+          id: ((_state$options4 = state.options) === null || _state$options4 === void 0 ? void 0 : _state$options4.invoiceId) || ((_state$data2 = state.data) === null || _state$data2 === void 0 ? void 0 : (_state$data2$transact = _state$data2.transaction) === null || _state$data2$transact === void 0 ? void 0 : _state$data2$transact.invoiceId)
+        },
+        state
+      });
+      state.data.invoice = invoice;
+    }
+
+    if (!riskMetadata) {
+      const {
+        riskMetadata: data
+      } = await (0, _riskDataCollector.collectData)();
+      riskMetadata = data;
+    }
+
+    state.data = new DataInstance({
+      state,
+      invoice,
+      transaction,
+      riskMetadata
+    });
+    const [readyToPay, previewPurchase] = await Promise.all([((_state$data3 = state.data) === null || _state$data3 === void 0 ? void 0 : _state$data3.readyToPay) || (0, _readyToPay.fetchReadyToPay)({
+      riskMetadata,
+      state
+    }), state.options.items ? (0, _summary.fetchSummary)({
+      data: summaryPayload,
+      state
+    }) : null]);
+    const plans = await (0, _plans.fetchPlans)({
+      state
+    });
+    state.data.plans = plans;
+    const products = await (0, _products.fetchProducts)({
+      state
+    });
+    return new DataInstance({
+      state,
+      readyToPay,
+      previewPurchase,
+      plans,
+      products,
+      invoice,
+      transaction,
+      riskMetadata
+    });
+  } catch (error) {// console.log(error);
+  }
+
+  return new DataInstance({});
+}