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

package/src/style/views/summary.js

@@ -0,0 +1,114 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the summary view.
+// -----------------------------------------------------------------------------
+export 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};
+  }
+`;

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

@@ -1,16 +1,15 @@
-export default 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);
-    });
+export default 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);
+  });
   if (content) {
     ELEMENT.innerHTML = content;
   }

package/src/utils/format-currency.js

@@ -1,3 +1,6 @@
 export default function formatCurrency(number, currency = 'USD') {
-  return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(number)
+  if (!number) return '-';
+  return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(
+    number
+  );
 }

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

@@ -1,4 +1,4 @@
 export default function hasValidCSSSelector(selector) {
-    const REGEX_CSS_SELECTOR = /([.#][_a-z]+[_a-z0-9-:\\]*)/ig;
-    return typeof selector === 'string' && selector.match(REGEX_CSS_SELECTOR);
+  const REGEX_CSS_SELECTOR = /([.#][_a-z]+[_a-z0-9-:\\]*)/gi;
+  return typeof selector === 'string' && selector.match(REGEX_CSS_SELECTOR);
 }

package/src/utils/index.js

@@ -3,9 +3,7 @@ import processPropertyAsDOMElement from './process-property-as-dom-element';
 import isDOMElement from './is-dom-element';
 import hasValidCSSSelector from './has-valid-css-selector';
 import formatCurrency from './format-currency';
-import kebabCase from './kebab-case';
-import unKebabCase from './un-kebab-case';
-import camelCase from './camel-case';
+import sleep from './sleep';
 
 export {
   addDOMElement,
@@ -13,7 +11,5 @@ export {
   isDOMElement,
   hasValidCSSSelector,
   formatCurrency,
-  kebabCase,
-  unKebabCase,
-  camelCase,
+  sleep
 };

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

@@ -1,3 +1,3 @@
 export default function isDOMElement(element) {
-  return element instanceof Element || element instanceof HTMLDocument;  
+  return element instanceof Element || element instanceof HTMLDocument;
 }

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

@@ -1,28 +1,31 @@
 import hasValidCSSSelector from './has-valid-css-selector';
 import isDOMElement from './is-dom-element';
 
-export default function processPropertyAsDOMElement(
-  {
-    prop,
-    propName = 'Mounting',
-    isRequired = true
-  } = {}) {
-    let DOMElement;
-    
-    if (typeof prop === 'undefined') {
-      throw new Error('processPropertyDOMElement: Missing argument "prop"');
-    };
-    
-    if (hasValidCSSSelector(prop)) {
-      DOMElement = document.querySelector(prop);
-    } else if (isDOMElement(prop)) {
-      DOMElement = prop;
-    } else {
-      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 "${prop}" to mount ${propName}`,);
-    }
-    return DOMElement;
+export default function processPropertyAsDOMElement({
+  prop,
+  propName = 'Mounting',
+  isRequired = true
+} = {}) {
+  let DOMElement;
+
+  if (typeof prop === 'undefined') {
+    throw new Error('processPropertyDOMElement: Missing argument "prop"');
+  }
+
+  if (hasValidCSSSelector(prop)) {
+    DOMElement = document.querySelector(prop);
+  } else if (isDOMElement(prop)) {
+    DOMElement = prop;
+  } else {
+    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 "${prop}" to mount ${propName}`
+    );
+  }
+  return DOMElement;
 }

package/src/utils/sleep.js

@@ -0,0 +1,3 @@
+export default function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}

package/src/views/__snapshots__/summary.spec.js.snap

@@ -0,0 +1,292 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Summary component should render the summary correctly 1`] = `
+<div
+  class="rebilly-instruments-summary-line-items"
+>
+  
+      
+  <div
+    class="rebilly-instruments-summary-line-item"
+  >
+    
+        
+        
+    <div
+      class="rebilly-instruments-summary-line-item-synopsis"
+    >
+      
+            
+      <p
+        class="rebilly-instruments-summary-line-item-synopsis-title"
+      >
+        My Awesome Product
+      </p>
+      
+            
+              
+      <p
+        class="rebilly-instruments-summary-line-item-synopsis-description"
+      >
+        My Awesome Product
+      </p>
+      
+            
+        
+    </div>
+    
+        
+    <div
+      class="rebilly-instruments-summary-line-item-price-breakdown"
+    >
+      
+          
+      <p
+        class="rebilly-instruments-summary-line-item-price-breakdown-quantity"
+      >
+        1
+      </p>
+      
+          
+      <svg
+        class="rebilly-instruments-icon"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        
+            
+        <path
+          d="M12 10.5858l2.8284-2.8284c.3906-.3906 1.0237-.3906 1.4142 0 .3906.3905.3906 1.0236 0 1.4142L13.4142 12l2.8284 2.8284c.3906.3906.3906 1.0237 0 1.4142-.3905.3906-1.0236.3906-1.4142 0L12 13.4142l-2.8284 2.8284c-.3906.3906-1.0237.3906-1.4142 0-.3906-.3905-.3906-1.0236 0-1.4142L10.5858 12 7.7574 9.1716c-.3906-.3906-.3906-1.0237 0-1.4142.3905-.3906 1.0236-.3906 1.4142 0L12 10.5858z"
+          fill-rule="nonzero"
+        />
+        
+          
+      </svg>
+      
+          
+      <p
+        class="rebilly-instruments-summary-line-item-price-breakdown-unit-price"
+      >
+        $30.00
+      </p>
+      
+        
+    </div>
+    
+      
+  </div>
+  
+    
+      
+  <div
+    class="rebilly-instruments-summary-line-item"
+  >
+    
+        
+        
+    <div
+      class="rebilly-instruments-summary-line-item-synopsis"
+    >
+      
+            
+      <p
+        class="rebilly-instruments-summary-line-item-synopsis-title"
+      >
+        My Awesome T-Shirt
+      </p>
+      
+            
+              
+      <p
+        class="rebilly-instruments-summary-line-item-synopsis-description"
+      >
+        My Awesome T-Shirt
+      </p>
+      
+            
+        
+    </div>
+    
+        
+    <div
+      class="rebilly-instruments-summary-line-item-price-breakdown"
+    >
+      
+          
+      <p
+        class="rebilly-instruments-summary-line-item-price-breakdown-quantity"
+      >
+        2
+      </p>
+      
+          
+      <svg
+        class="rebilly-instruments-icon"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        
+            
+        <path
+          d="M12 10.5858l2.8284-2.8284c.3906-.3906 1.0237-.3906 1.4142 0 .3906.3905.3906 1.0236 0 1.4142L13.4142 12l2.8284 2.8284c.3906.3906.3906 1.0237 0 1.4142-.3905.3906-1.0236.3906-1.4142 0L12 13.4142l-2.8284 2.8284c-.3906.3906-1.0237.3906-1.4142 0-.3906-.3905-.3906-1.0236 0-1.4142L10.5858 12 7.7574 9.1716c-.3906-.3906-.3906-1.0237 0-1.4142.3905-.3906 1.0236-.3906 1.4142 0L12 10.5858z"
+          fill-rule="nonzero"
+        />
+        
+          
+      </svg>
+      
+          
+      <p
+        class="rebilly-instruments-summary-line-item-price-breakdown-unit-price"
+      >
+        $20.00
+      </p>
+      
+        
+    </div>
+    
+      
+  </div>
+  
+    
+</div>
+`;
+
+exports[`Summary component should render the summary correctly 2`] = `
+<div
+  class="rebilly-instruments-summary-breakdown"
+>
+  
+    
+  <table>
+    
+      
+    <colgroup>
+      
+        
+      <col />
+      
+        
+      <col />
+      
+      
+    </colgroup>
+    
+      
+    <tbody>
+      <tr
+        class="rebilly-instruments-summary-breakdown-sub-total"
+      >
+        
+        
+        <td
+          data-rebilly-i18n="summary.subTotal"
+        >
+          Sub Total
+        </td>
+        
+        
+        <td>
+          $70.00
+        </td>
+        
+      
+      </tr>
+      
+      
+      <tr
+        class="rebilly-instruments-summary-breakdown-discounts"
+      >
+        
+        
+        <td
+          data-rebilly-i18n="summary.discounts"
+        >
+          Discounts
+        </td>
+        
+        
+        <td>
+          -
+        </td>
+        
+      
+      </tr>
+      
+      
+      <tr
+        class="rebilly-instruments-summary-breakdown-taxes"
+      >
+        
+        
+        <td
+          data-rebilly-i18n="summary.taxes"
+        >
+          Taxes
+        </td>
+        
+        
+        <td>
+          -
+        </td>
+        
+      
+      </tr>
+      
+      
+      <tr
+        class="rebilly-instruments-summary-breakdown-taxes"
+      >
+        
+        
+        <td
+          data-rebilly-i18n="summary.shipping"
+        >
+          Shipping
+        </td>
+        
+        
+        <td>
+          -
+        </td>
+        
+      
+      </tr>
+      
+    
+    </tbody>
+  </table>
+  
+    
+  <div
+    class="rebilly-instruments-summary-breakdown-total"
+  >
+    
+      
+    <p
+      data-rebilly-i18n="summary.total"
+    >
+      Total
+    </p>
+    
+      
+    <p
+      class="rebilly-instruments-summary-breakdown-total-amount"
+    >
+      
+        
+      <span
+        class="rebilly-instruments-summary-breakdown-total-amount-currency"
+      >
+        USD
+      </span>
+      $70.00
+      
+    </p>
+    
+    
+  </div>
+  
+  
+</div>
+`;

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

@@ -0,0 +1,46 @@
+import Postmate from 'postmate';
+
+export default 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({
+      name: this.name,
+      url: this.url,
+      container: this.container,
+      classListArray: this.classListArray,
+      model: this.model
+    });
+
+    return component;
+  }
+}

package/src/views/common/iframe/event-listeners.js

@@ -0,0 +1,27 @@
+import camelCase from 'lodash.camelcase';
+import Events from '../../../events';
+
+export function dispatchRebillyInsturmentEventHandler(iframe) {
+  iframe.component.on(`${iframe.name}-dispatch`, ({ event, detail }) => {
+    Events[camelCase(event).replace(/-/, '')].dispatch(detail);
+  });
+}
+
+export function resizeComponentHandler(iframe) {
+  iframe.component.on(`${iframe.name}-resize-frame`, (height) => {
+    iframe.component.frame.style.height = height;
+  });
+}
+
+export function stopLoaderHandler(iframe, data = { section: 'form' }) {
+  iframe.component.on(`${iframe.name}-stop-loading`, (id = null) => {
+    data.loader?.stopLoading({ section: data.section, id: id || data.id });
+  });
+}
+
+export function changeIframeSrcHandler(iframe) {
+  iframe.component.on(`${iframe.name}-change-iframe-src`, (url = null) => {
+    iframe.component.frame.src = url;
+    iframe.component.frame.style.height = '75vh';
+  });
+}

package/src/views/common/iframe/index.js

@@ -0,0 +1,7 @@
+import { MethodIframe as method } from './method-iframe';
+import { ViewIframe as view } from './view-iframe';
+import { ModalIframe as modal } from './modal-iframe';
+
+export const MethodIframe = method;
+export const ViewIframe = view;
+export const ModalIframe = modal;

package/src/views/common/iframe/method-iframe.js

@@ -0,0 +1,21 @@
+import BaseIframe from './base-iframe';
+import {
+  dispatchRebillyInsturmentEventHandler,
+  resizeComponentHandler,
+  stopLoaderHandler
+} from './event-listeners';
+
+export class MethodIframe extends BaseIframe {
+  constructor(args = {}) {
+    super(args);
+  }
+
+  bindEventListeners({ loader, id } = {}) {
+    dispatchRebillyInsturmentEventHandler(this);
+    resizeComponentHandler(this);
+    stopLoaderHandler(this, {
+      loader,
+      id
+    });
+  }
+}

package/src/views/common/iframe/modal-iframe.js

@@ -0,0 +1,27 @@
+import BaseIframe from './base-iframe';
+import {
+  dispatchRebillyInsturmentEventHandler,
+  resizeComponentHandler,
+  changeIframeSrcHandler,
+  stopLoaderHandler
+} from './event-listeners';
+
+export class ModalIframe extends BaseIframe {
+  constructor(args = {}) {
+    super(args);
+  }
+
+  bindEventListeners({ close = () => {}, loader } = {}) {
+    dispatchRebillyInsturmentEventHandler(this);
+    resizeComponentHandler(this);
+    changeIframeSrcHandler(this);
+    this.component.on(`${this.name}-close`, (...args) => {
+      close(...args);
+    });
+    stopLoaderHandler(this, {
+      loader,
+      section: 'modal',
+      id: 'modal-content'
+    });
+  }
+}

package/src/views/common/iframe/view-iframe.js

@@ -0,0 +1,18 @@
+import BaseIframe from './base-iframe';
+import {
+  dispatchRebillyInsturmentEventHandler,
+  resizeComponentHandler,
+  stopLoaderHandler
+} from './event-listeners';
+
+export class ViewIframe extends BaseIframe {
+  constructor(args = {}) {
+    super(args);
+  }
+
+  bindEventListeners({ loader } = {}) {
+    dispatchRebillyInsturmentEventHandler(this);
+    resizeComponentHandler(this);
+    stopLoaderHandler(this, { loader });
+  }
+}

package/src/views/common/render-utilities.js

@@ -0,0 +1,4 @@
+export function replaceContent(form, newContent) {
+  const contentElement = form.querySelector('.rebilly-instruments-content');
+  contentElement.innerHTML = newContent;
+}