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

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,7 @@
-export default function formatCurrency(number, currency = 'USD') {
-  return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(number)
+export default function formatCurrency(number, currency) {
+  const converToNumber = Number(number);
+  if (Number.isNaN(converToNumber) || number === null) return '-';
+  return new Intl.NumberFormat('en-US', { style: 'currency', currency: currency || 'USD'}).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/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

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

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

@@ -5,150 +5,151 @@ exports[`Summary component should render the summary correctly 1`] = `
   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
+        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>
 `;
 
@@ -156,137 +157,126 @@ 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"
+    <tr
+      class="rebilly-instruments-summary-breakdown-sub-total"
+    >
+      
+      
+      <td
+        data-rebilly-i18n="summary.subTotal"
       >
-        
-        
-        <td
-          data-rebilly-i18n="summary.subTotal"
-        >
-          Sub Total
-        </td>
-        
-        
-        <td>
-          $70.00
-        </td>
-        
+        Sub Total
+      </td>
+      
       
-      </tr>
+      <td>
+        $70.00
+      </td>
+      
+    
+    </tr>
+    <tr
+      class="rebilly-instruments-summary-breakdown-discounts"
+    >
       
       
-      <tr
-        class="rebilly-instruments-summary-breakdown-discounts"
+      <td
+        data-rebilly-i18n="summary.discounts"
       >
-        
-        
-        <td
-          data-rebilly-i18n="summary.discounts"
-        >
-          Discounts
-        </td>
-        
-        
-        <td>
-          $0.00
-        </td>
-        
+        Discounts
+      </td>
+      
+      
+      <td>
+        $0.00
+      </td>
       
-      </tr>
+    
+    </tr>
+    <tr
+      class="rebilly-instruments-summary-breakdown-taxes"
+    >
       
       
-      <tr
-        class="rebilly-instruments-summary-breakdown-taxes"
+      <td
+        data-rebilly-i18n="summary.taxes"
       >
-        
-        
-        <td
-          data-rebilly-i18n="summary.taxes"
-        >
-          Taxes
-        </td>
-        
-        
-        <td>
-          $0.00
-        </td>
-        
+        Taxes
+      </td>
+      
       
-      </tr>
+      <td>
+        $0.00
+      </td>
       
+    
+    </tr>
+    <tr
+      class="rebilly-instruments-summary-breakdown-shipping"
+    >
       
-      <tr
-        class="rebilly-instruments-summary-breakdown-taxes"
+      
+      <td
+        data-rebilly-i18n="summary.shipping"
       >
-        
-        
-        <td
-          data-rebilly-i18n="summary.shipping"
-        >
-          Shipping
-        </td>
-        
-        
-        <td>
-          $0.00
-        </td>
-        
+        Shipping
+      </td>
       
-      </tr>
+      
+      <td>
+        $0.00
+      </td>
       
     
-    </tbody>
+    </tr>
   </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>
+    <p>
       
+  
     </p>
-    
-    
   </div>
-  
-  
 </div>
 `;

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

@@ -1,7 +1,8 @@
-import Postmate from 'postmate';
+import Postmate from 'popostmate';
 
 export default class BaseIframe {
-  constructor ({
+  constructor({
+    state = {},
     name = '',
     url = '',
     model = {},
@@ -9,10 +10,11 @@ export default class BaseIframe {
     classListArray = []
   } = {}) {
     classListArray = Array.isArray(classListArray) ? classListArray : [];
-    if(!classListArray.includes('rebilly-instruments-iframe')) {
+    if (!classListArray.includes('rebilly-instruments-iframe')) {
       classListArray.push('rebilly-instruments-iframe');
     }
 
+    this.state = state;
     this.container = container;
     this.classListArray = classListArray;
     this.name = name;
@@ -26,6 +28,12 @@ export default class BaseIframe {
     })();
   }
 
+  async destroy() {
+    if (this.component.frame.parentNode) {
+      await this.component.destroy();
+    }
+  }
+
   async createComponent() {
     const component = await new Postmate({
       name: this.name,
@@ -37,4 +45,4 @@ export default class BaseIframe {
 
     return component;
   }
-}
+}

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

@@ -1,21 +1,21 @@
 import camelCase from 'lodash.camelcase';
-import Events from '../../../events'
+import Events from '../../../events';
 
 export function dispatchRebillyInsturmentEventHandler(iframe) {
-  iframe.component.on(`${iframe.name}-dispatch`, ({event, detail}) => {
+  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.on(`${iframe.name}-resize-frame`, (height) => {
     iframe.component.frame.style.height = height;
   });
 }
 
-export function stopLoaderHandler(iframe, data = {section: 'form'}) {
+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});
+    data.loader?.stopLoading({ section: data.section, id: id || data.id });
   });
 }
 
@@ -24,4 +24,4 @@ export function changeIframeSrcHandler(iframe) {
     iframe.component.frame.src = url;
     iframe.component.frame.style.height = '75vh';
   });
-}
+}

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

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

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

@@ -10,15 +10,12 @@ export class MethodIframe extends BaseIframe {
     super(args);
   }
 
-  bindEventListeners({
-    loader,
-    id,
-  } = {}) {
+  bindEventListeners({ loader, id } = {}) {
     dispatchRebillyInsturmentEventHandler(this);
     resizeComponentHandler(this);
     stopLoaderHandler(this, {
       loader,
       id
-    })
+    });
   }
-}
+}

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

@@ -11,17 +11,53 @@ export class ModalIframe extends BaseIframe {
     super(args);
   }
 
-  bindEventListeners({close = () => {}, loader} = {}) {
+  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'
-    })
+    });
+    
+    window.addEventListener('message', async (event) => {
+      if(event.data === 'rebilly-instruments-approval-url-close') {
+        if (this.state.options.transactionType === 'purchase') {
+          this.state.storefront.setSessionToken(this.state.data.token);
+
+          const [
+            {fields: transaction},
+            {fields: invoice}
+          ] = await Promise.all([
+            this.state.storefront.transactions.get({id: this.state.data.transaction.id}),
+            this.state.data.invoice?.id
+              ? this.state.storefront.invoices.get({id: this.state.data.invoice.id})
+              : {fields: null}
+          ]);
+          
+          const updatedPurchase = {
+            orderId: this.state.data.orderId,
+            token: this.state.data.token,
+            transaction,
+          };
+          if (invoice) {
+            updatedPurchase.invoice = invoice;
+          }
+          close(updatedPurchase);
+        } else if (this.state.options.transactionType === 'setup') {
+          this.state.storefront.setSessionToken(this.state.data.instrument.token);
+          const {
+            fields: transaction
+          } = await this.state.storefront.transactions.get({id: this.state.data.transaction.id});
+          close({
+            transaction,
+            instrument: this.state.data.instrument
+          });
+        } else {
+          close();
+        }
+      }
+    }, false);
   }
-}
+}

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

@@ -10,11 +10,9 @@ export class ViewIframe extends BaseIframe {
     super(args);
   }
 
-  bindEventListeners({
-    loader,
-  } = {}) {
+  bindEventListeners({ loader } = {}) {
     dispatchRebillyInsturmentEventHandler(this);
     resizeComponentHandler(this);
-    stopLoaderHandler(this, {loader});
+    stopLoaderHandler(this, { loader });
   }
-}
+}