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

package/dist/style/views/method-selector.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.methodSelector = void 0;
+
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the selector view.
+// -----------------------------------------------------------------------------
+const methodSelector = theme => `
+  /**
+  * Method selector
+  */
+  .rebilly-instruments-method-selector {
+    padding-top: ${theme.space.s};
+  }
+`;
+
+exports.methodSelector = methodSelector;

package/dist/style/views/modal.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.modal = void 0;
+
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the modal view.
+// -----------------------------------------------------------------------------
+const modal = theme => `
+  /**
+  * Modal
+  */
+
+  .rebilly-instruments-modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    z-index: 1055;
+    padding: 30px;
+    width:  100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    transition: all 0.12s ease-in-out;
+    background-color: rgba(0,0,0,0.7);
+    opacity: 0
+  }
+
+  .rebilly-instruments-modal-overlay.is-visible {
+    opacity: 1;
+  }
+
+  .rebilly-instruments-modal-container {
+    transition: all .24s ease-in-out;
+    position: relative;
+    max-width: 800px;
+    min-height: 240px;
+    background: ${theme.color.background};
+    margin: 50px auto 20px;
+    box-shadow: 0 19px 38px rgba(0,0,0,0.20), 0 15px 12px rgba(0,0,0,0.12);
+    border-radius: ${theme.borderRadius};
+    transform: translateY(-50px);
+    opacity: 0;
+  }
+
+  .rebilly-instruments-modal-container.is-visible {
+    transform: translateY(0);
+    opacity: 1;
+  }
+
+  .rebilly-instruments-modal-container.is-redirect {
+    max-width: 60vw;
+    width: auto;
+  }
+
+  .rebilly-instruments-modal-content {
+    transition: all .15s;
+    padding: 20px;
+    overflow: hidden;
+    background-color: ${theme.color.background};
+    text-align: center;
+    border-radius: ${theme.borderRadius};
+  }
+
+  .rebilly-instruments-modal-content .rebilly-instruments-iframe {
+    transition: all .15s;
+    height: 100%;
+  }
+
+  .rebilly-instruments-modal-container.is-redirect .rebilly-instruments-modal-content {
+    padding: 0;
+  }
+
+  .rebilly-instruments-modal-close {
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    top: -40px;
+    right: 0;
+    fill: #ffffff;
+    cursor: pointer;
+  }
+  
+  .rebilly-instruments-modal-close:hover{
+    color: #000;
+  }
+`;
+
+exports.modal = modal;

package/dist/style/views/result.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.result = void 0;
+
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the result view.
+// -----------------------------------------------------------------------------
+const result = theme => `
+  /**
+  * Result
+  */
+  .rebilly-instruments-results .rebilly-instruments-h1 {
+    text-align: center;
+    margin: 0;
+  }
+
+  .rebilly-instruments-results-icon {
+    width: 160px;
+    margin: 0 auto ${theme.space.m} auto;
+    display: block;
+  }
+
+  .rebilly-instruments-results-icon g {
+    stroke: ${theme.color.primary};
+  }
+
+  .rebilly-instruments-results-icon.is-error g {
+    stroke: ${theme.color.errorText};
+  }
+
+  .rebilly-instruments-results-icon path {
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .rebilly-instruments-results-icon path.circle {
+    stroke-dasharray: 350;
+    stroke-dashoffset: 0;
+    animation: 0.6s cubic-bezier(1.0, 0.5, 0.8, 1.0) 1 rebillyDashResultIcon;
+  }
+
+  .rebilly-instruments-results-icon path.mark {
+    stroke-dasharray: 350;
+    stroke-dashoffset: 0;
+    animation: 1s cubic-bezier(1.0, 0.5, 0.8, 1.0) 1 rebillyDashResultIcon;
+  }
+
+  @keyframes rebillyDashResultIcon {
+    from {
+        stroke-dashoffset: 350;
+    }
+    to {
+        stroke-dashoffset: 0;
+    }
+  }
+`;
+
+exports.result = result;

package/dist/style/views/summary.js

@@ -0,0 +1,123 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.summary = void 0;
+
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the summary view.
+// -----------------------------------------------------------------------------
+const summary = theme => `
+  /**
+  * Summary
+  */
+  .rebilly-instruments-summary-line-item {
+    border-bottom: 1px solid ${theme.getComputed.color.mutedBorder};
+    padding: ${theme.space.s} 0;
+    display: flex;
+    align-items: center;
+    position: relative;
+  }
+
+  .rebilly-instruments-summary-line-item:first-child {
+    padding-top: 0;
+  }
+
+  .rebilly-instruments-summary-line-item-figure {
+    margin: 0 ${theme.space.s} 0 0;
+    flex: 0 0 auto;
+    width: 48px;
+    height: 48px;
+    border-radius: ${theme.borderRadius};
+    border: 1px solid ${theme.getComputed.color.mutedBorder};
+    overflow: hidden;
+  }
+
+  .rebilly-instruments-summary-line-item-figure img {
+    width: 100%;
+  }
+
+  .rebilly-instruments-summary-line-item-synopsis {
+    flex: 1 2 auto;
+  }
+
+  .rebilly-instruments-summary-line-item-synopsis-title {
+    margin: 0;
+    font-weight: 500;
+  }
+
+  .rebilly-instruments-summary-line-item-synopsis-description {
+    color: ${theme.getComputed.color.mutedText};
+    margin: 0;
+    font-size: 14px;
+    line-height: 14px;
+  }
+
+  .rebilly-instruments-summary-line-item-price-breakdown {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: ${theme.getComputed.color.mutedText};
+    margin: 0 0 0 ${theme.spaceS};
+  }
+
+  .rebilly-instruments-summary-line-item-price-breakdown .rebilly-instruments-icon {
+    fill: ${theme.getComputed.color.mutedText};
+  }
+
+  .rebilly-instruments-summary-line-item-price-breakdown-unit-price {
+    color: ${theme.color.text};
+  }
+
+  .rebilly-instruments-summary-breakdown table {
+    width: 100%;
+    margin: ${theme.space.xs} 0;
+    color: inherit;
+  }
+
+  .rebilly-instruments-summary-breakdown table colgroup col:first-child {
+    width: 85%;
+  }
+
+  .rebilly-instruments-summary-breakdown table colgroup col {
+    width: 15%;
+  }
+
+  .rebilly-instruments-summary-breakdown table tr td {
+    text-align: right;
+  }
+
+  .rebilly-instruments-summary-breakdown table tr td:first-child {
+    padding-right: ${theme.space.s};
+    font-weight: 500;
+  }
+
+  .rebilly-instruments-summary-breakdown-total {
+    padding-top: ${theme.space.xs};
+    display: flex;
+    border-top: 1px solid ${theme.getComputed.color.mutedBorder};
+    align-items: center;
+  }
+
+  .rebilly-instruments-summary-breakdown-total p {
+    margin: ${theme.space.s} 0;
+  }
+
+  .rebilly-instruments-summary-breakdown-total-amount {
+      flex: 1 2 80%;
+      font-size: 24px;
+      font-weight: 500;
+      text-align: right;
+      font-weight: bold;
+  }
+
+  .rebilly-instruments-summary-breakdown-total-amount-currency {
+    font-size: ${theme.typography.fontSize};
+    font-weight: normal;
+    color: ${theme.getComputed.color.mutedText};
+    margin-right: ${theme.space.s};
+  }
+`;
+
+exports.summary = summary;

package/dist/utils/add-dom-element.js

@@ -3,40 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = addDOMElement;
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-function addDOMElement() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      _ref$element = _ref.element,
-      element = _ref$element === void 0 ? 'div' : _ref$element,
-      _ref$attributes = _ref.attributes,
-      attributes = _ref$attributes === void 0 ? {} : _ref$attributes,
-      _ref$content = _ref.content,
-      content = _ref$content === void 0 ? null : _ref$content,
-      _ref$target = _ref.target,
-      target = _ref$target === void 0 ? 'body' : _ref$target,
-      _ref$insertMethod = _ref.insertMethod,
-      insertMethod = _ref$insertMethod === void 0 ? 'append' : _ref$insertMethod;
-
-  var ELEMENT = document.createElement(element);
-  var ELEMENT_ATTRIBUTES = Object.entries(attributes);
-  ELEMENT_ATTRIBUTES.forEach(function (_ref2) {
-    var _ref3 = _slicedToArray(_ref2, 2),
-        attribute = _ref3[0],
-        value = _ref3[1];
-
+exports.default = addDOMElement;
+
+function addDOMElement({
+  element = 'div',
+  attributes = {},
+  content = null,
+  target = 'body',
+  insertMethod = 'append'
+} = {}) {
+  const ELEMENT = document.createElement(element);
+  const ELEMENT_ATTRIBUTES = Object.entries(attributes);
+  ELEMENT_ATTRIBUTES.forEach(([attribute, value]) => {
     ELEMENT.setAttribute(attribute, value);
   });
 

package/dist/utils/format-currency.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = formatCurrency;
+exports.default = formatCurrency;
 
-function formatCurrency(number) {
-  var currency = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'USD';
+function formatCurrency(number, currency = 'USD') {
+  if (!number) return '-';
   return new Intl.NumberFormat('en-US', {
     style: 'currency',
-    currency: currency
+    currency
   }).format(number);
 }

package/dist/utils/has-valid-css-selector.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = hasValidCSSSelector;
+exports.default = hasValidCSSSelector;
 
 function hasValidCSSSelector(selector) {
-  var REGEX_CSS_SELECTOR = /([.#][_a-z]+[_a-z0-9-:\\]*)/ig;
+  const REGEX_CSS_SELECTOR = /([.#][_a-z]+[_a-z0-9-:\\]*)/gi;
   return typeof selector === 'string' && selector.match(REGEX_CSS_SELECTOR);
 }

package/dist/utils/index.js

@@ -5,50 +5,38 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "addDOMElement", {
   enumerable: true,
-  get: function get() {
-    return _addDomElement["default"];
+  get: function () {
+    return _addDomElement.default;
   }
 });
 Object.defineProperty(exports, "processPropertyAsDOMElement", {
   enumerable: true,
-  get: function get() {
-    return _processPropertyAsDomElement["default"];
+  get: function () {
+    return _processPropertyAsDomElement.default;
   }
 });
 Object.defineProperty(exports, "isDOMElement", {
   enumerable: true,
-  get: function get() {
-    return _isDomElement["default"];
+  get: function () {
+    return _isDomElement.default;
   }
 });
 Object.defineProperty(exports, "hasValidCSSSelector", {
   enumerable: true,
-  get: function get() {
-    return _hasValidCssSelector["default"];
+  get: function () {
+    return _hasValidCssSelector.default;
   }
 });
 Object.defineProperty(exports, "formatCurrency", {
   enumerable: true,
-  get: function get() {
-    return _formatCurrency["default"];
+  get: function () {
+    return _formatCurrency.default;
   }
 });
-Object.defineProperty(exports, "kebabCase", {
+Object.defineProperty(exports, "sleep", {
   enumerable: true,
-  get: function get() {
-    return _kebabCase["default"];
-  }
-});
-Object.defineProperty(exports, "unKebabCase", {
-  enumerable: true,
-  get: function get() {
-    return _unKebabCase["default"];
-  }
-});
-Object.defineProperty(exports, "camelCase", {
-  enumerable: true,
-  get: function get() {
-    return _camelCase["default"];
+  get: function () {
+    return _sleep.default;
   }
 });
 
@@ -62,10 +50,6 @@ var _hasValidCssSelector = _interopRequireDefault(require("./has-valid-css-selec
 
 var _formatCurrency = _interopRequireDefault(require("./format-currency"));
 
-var _kebabCase = _interopRequireDefault(require("./kebab-case"));
-
-var _unKebabCase = _interopRequireDefault(require("./un-kebab-case"));
-
-var _camelCase = _interopRequireDefault(require("./camel-case"));
+var _sleep = _interopRequireDefault(require("./sleep"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/utils/is-dom-element.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = isDOMElement;
+exports.default = isDOMElement;
 
 function isDOMElement(element) {
   return element instanceof Element || element instanceof HTMLDocument;

package/dist/utils/process-property-as-dom-element.js

@@ -3,40 +3,35 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = processPropertyAsDOMElement;
+exports.default = processPropertyAsDOMElement;
 
 var _hasValidCssSelector = _interopRequireDefault(require("./has-valid-css-selector"));
 
 var _isDomElement = _interopRequireDefault(require("./is-dom-element"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function processPropertyAsDOMElement() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      prop = _ref.prop,
-      _ref$propName = _ref.propName,
-      propName = _ref$propName === void 0 ? 'Mounting' : _ref$propName,
-      _ref$isRequired = _ref.isRequired,
-      isRequired = _ref$isRequired === void 0 ? true : _ref$isRequired;
-
-  var DOMElement;
+function processPropertyAsDOMElement({
+  prop,
+  propName = 'Mounting',
+  isRequired = true
+} = {}) {
+  let DOMElement;
 
   if (typeof prop === 'undefined') {
     throw new Error('processPropertyDOMElement: Missing argument "prop"');
   }
 
-  ;
-
-  if ((0, _hasValidCssSelector["default"])(prop)) {
+  if ((0, _hasValidCssSelector.default)(prop)) {
     DOMElement = document.querySelector(prop);
-  } else if ((0, _isDomElement["default"])(prop)) {
+  } else if ((0, _isDomElement.default)(prop)) {
     DOMElement = prop;
   } else {
-    throw new Error("Please provide a valid CSS class, id or DOM element for \"".concat(propName, "\" property"));
+    throw new Error(`Please provide a valid CSS class, id or DOM element for "${propName}" property`);
   }
 
   if (!DOMElement && isRequired) {
-    throw new Error("Could not find DOM element with CSS class or id \"".concat(prop, "\" to mount ").concat(propName));
+    throw new Error(`Could not find DOM element with CSS class or id "${prop}" to mount ${propName}`);
   }
 
   return DOMElement;

package/dist/utils/sleep.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = sleep;
+
+function sleep(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}

package/{src/components → dist/views}/__snapshots__/summary.spec.js.snap

@@ -24,12 +24,14 @@ exports[`Summary component should render the summary correctly 1`] = `
       </p>
       
             
+              
       <p
         class="rebilly-instruments-summary-line-item-synopsis-description"
       >
         My Awesome Product
       </p>
       
+            
         
     </div>
     
@@ -94,12 +96,14 @@ exports[`Summary component should render the summary correctly 1`] = `
       </p>
       
             
+              
       <p
         class="rebilly-instruments-summary-line-item-synopsis-description"
       >
         My Awesome T-Shirt
       </p>
       
+            
         
     </div>
     
@@ -203,7 +207,7 @@ exports[`Summary component should render the summary correctly 2`] = `
         
         
         <td>
-          $0.00
+          -
         </td>
         
       
@@ -223,7 +227,7 @@ exports[`Summary component should render the summary correctly 2`] = `
         
         
         <td>
-          $0.00
+          -
         </td>
         
       
@@ -243,7 +247,7 @@ exports[`Summary component should render the summary correctly 2`] = `
         
         
         <td>
-          $0.00
+          -
         </td>
         
       

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

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _postmate = _interopRequireDefault(require("postmate"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+class BaseIframe {
+  constructor({
+    name = '',
+    url = '',
+    model = {},
+    container = null,
+    classListArray = []
+  } = {}) {
+    classListArray = Array.isArray(classListArray) ? classListArray : [];
+
+    if (!classListArray.includes('rebilly-instruments-iframe')) {
+      classListArray.push('rebilly-instruments-iframe');
+    }
+
+    this.container = container;
+    this.classListArray = classListArray;
+    this.name = name;
+    this.url = url;
+    this.model = model;
+    this.component = null;
+    return (async () => {
+      this.component = await this.createComponent();
+      return this;
+    })();
+  }
+
+  async destroy() {
+    if (this.component.frame.parentNode) {
+      await this.component.destroy();
+    }
+  }
+
+  async createComponent() {
+    const component = await new _postmate.default({
+      name: this.name,
+      url: this.url,
+      container: this.container,
+      classListArray: this.classListArray,
+      model: this.model
+    });
+    return component;
+  }
+
+}
+
+exports.default = BaseIframe;