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

package/.babelrc

@@ -1,8 +1,26 @@
 {
-  "presets": ["@babel/preset-env"],
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "current"
+        }
+      }
+    ]
+  ],
   "plugins": [
-    ["module-resolver", {
-      "root": ["./src"]
-    }]
+    [
+      "module-resolver",
+      {
+        "root": [
+          "./"
+        ],
+        "alias": {
+          "@": "./src/",
+          "test": "./test"
+        }
+      }
+    ]
   ]
-}
+}

package/.eslintrc.js

@@ -0,0 +1,27 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    es6: true,
+  },
+  globals: {
+    Rebilly: "readonly",
+  },
+  rules: {
+    'class-methods-use-this': 'off',
+    'import/no-extraneous-dependencies': 'off',
+    'import/prefer-default-export': 'off',
+    'max-classes-per-file': 'off',
+    'max-len': ['error', {code: 120, ignoreStrings: true, ignoreTemplateLiterals: true, ignoreUrls: true}],
+    'no-useless-catch': 'off',
+    'no-underscore-dangle': 'off',
+    'no-console': 'off',
+    'no-param-reassign': 0,
+    quotes: ["error", "single"],
+  },
+  parser: 'babel-eslint',
+  extends: [
+    'airbnb-base',
+    'prettier',
+  ],
+};

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/CONTRIBUTING.md

@@ -0,0 +1,4 @@
+# Constributing to Rebilly Instruments package/core
+
+## Setup
+No additional setup is required to run this package locally

package/README.md

@@ -1,3 +1,362 @@
-# @rebilly/instruments
+<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>
+</div>
 
-TBD
+> **Rebilly Instruments** is in active development and should be treated as **beta** software. This means it may contain bugs and instability.
+
+<div align="center">
+  <br>
+  <img src="https://user-images.githubusercontent.com/13054039/134418583-e051a891-5559-4170-9364-b5f89a96082e.png" alt="rebilly instruments" width="600"/>
+  <br>
+  <br>
+</div>
+
+# Getting Started
+
+## ⏳ Installation
+
+Install Rebilly Instruments with this **Quickstart** command to add Rebilly instruments to your existing project:
+
+- Use **yarn** to install (recommended). [Install yarn with these docs](https://yarnpkg.com/lang/en/docs/install/).
+
+```bash
+yarn add @rebilly/instruments
+```
+
+**or**
+
+- Use npm/npx to install Rebilly Instruments.
+
+```bash
+npx install @rebilly/instruments
+```
+
+Enjoy 🎉
+
+# 🛠️ Usage
+
+```html
+<div class="rebilly-instruments-summary"></div>
+<div class="rebilly-instruments"></div>
+
+<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
+  });
+</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
+      },
+    },
+  }
+}
+```

package/dist/events/base-event.js

@@ -3,50 +3,64 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = exports.registeredListeners = exports.RegisteredListeners = void 0;
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+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; }
 
-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); } }
+class RegisteredListeners {
+  constructor() {
+    _defineProperty(this, "_listeners", {});
+  }
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+  add(eventName, callback) {
+    document.addEventListener(eventName, callback, false);
 
-var BaseEvent = /*#__PURE__*/function () {
-  function BaseEvent(name) {
-    _classCallCheck(this, BaseEvent);
+    if (!(eventName in this._listeners)) {
+      this._listeners[eventName] = [];
+    }
 
-    this.name = name;
-    this.callback = null;
+    this._listeners[eventName].push(callback);
   }
 
-  _createClass(BaseEvent, [{
-    key: "addEventListener",
-    value: function addEventListener(callback) {
-      this.callback = function (_ref) {
-        var detail = _ref.detail;
-        return callback(detail);
-      };
+  removeAll() {
+    Object.keys(this._listeners).forEach(eventName => {
+      this._listeners[eventName].forEach(callback => document.removeEventListener(eventName, callback, false));
+    });
+    this._listeners = {};
+  }
 
-      document.addEventListener(this.name, this.callback, false);
-    }
-  }, {
-    key: "removeEventListener",
-    value: function removeEventListener() {
-      document.removeEventListener(this.name, this.callback, false);
-      this.callback = null;
-    }
-  }, {
-    key: "dispatch",
-    value: function dispatch(detail) {
-      var event = new CustomEvent(this.name, {
-        bubbles: true,
-        detail: detail
-      });
-      document.dispatchEvent(event);
-    }
-  }]);
+}
+
+exports.RegisteredListeners = RegisteredListeners;
+const registeredListeners = new RegisteredListeners();
+exports.registeredListeners = registeredListeners;
+
+class BaseEvent {
+  /**
+   * @param {string} name
+   */
+  constructor(name) {
+    // Using namespaced internal name as a protection mechanism
+    const PREFIX = 'rebilly-instruments-';
+    this.internalName = PREFIX + name;
+  }
+
+  addEventListener(callback) {
+    const innerCallback = ({
+      detail
+    }) => callback(detail);
+
+    registeredListeners.add(this.internalName, innerCallback);
+  }
+
+  dispatch(detail) {
+    const event = new CustomEvent(this.internalName, {
+      bubbles: true,
+      detail
+    });
+    document.dispatchEvent(event);
+  }
 
-  return BaseEvent;
-}();
+}
 
-exports["default"] = BaseEvent;
+exports.default = BaseEvent;

package/dist/events/events.spec.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _lodash = _interopRequireDefault(require("lodash.kebabcase"));
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+it('Should export all public event names', async () => {
+  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

@@ -3,16 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.publicEventNames = exports.default = void 0;
 
-var _instrumentReady = _interopRequireDefault(require("./instrument-ready"));
+var _lodash = _interopRequireDefault(require("lodash.kebabcase"));
 
-var _purchaseComplete = _interopRequireDefault(require("./purchase-complete"));
+var _baseEvent = _interopRequireDefault(require("./base-event"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _default = {
-  instrumentReady: new _instrumentReady["default"](),
-  purchaseComplete: new _purchaseComplete["default"]()
+const events = {
+  instrumentReady: new _baseEvent.default('instrument-ready'),
+  purchaseCompleted: new _baseEvent.default('purchase-completed')
 };
-exports["default"] = _default;
+var _default = events;
+exports.default = _default;
+const publicEventNames = Object.keys(events).map(internalName => (0, _lodash.default)(internalName));
+exports.publicEventNames = publicEventNames;

package/dist/functions/destroy.js

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