@rebilly/instruments 1.0.2-beta.9 → 3.0.0-beta.0

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,90 @@ 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-sub-total"
+    >
       
-      <tr
-        class="rebilly-instruments-summary-breakdown-discounts"
-      >
-        
         
-        <td
-          data-rebilly-i18n="summary.discounts"
-        >
-          Discounts
-        </td>
-        
-        
-        <td>
-          $0.00
-        </td>
-        
-      
-      </tr>
-      
-      
-      <tr
-        class="rebilly-instruments-summary-breakdown-taxes"
+      <td
+        data-rebilly-i18n="summary.subTotal"
       >
+        Sub Total
+      </td>
+      
         
-        
-        <td
-          data-rebilly-i18n="summary.taxes"
-        >
-          Taxes
-        </td>
-        
-        
-        <td>
-          $0.00
-        </td>
-        
+      <td>
+        $70.00
+      </td>
       
-      </tr>
       
+    </tr>
+    <tr
+      class="rebilly-instruments-summary-breakdown-taxes"
+    >
       
-      <tr
-        class="rebilly-instruments-summary-breakdown-taxes"
-      >
-        
-        
-        <td
-          data-rebilly-i18n="summary.shipping"
-        >
-          Shipping
-        </td>
         
+      <td
+        data-rebilly-i18n="summary.taxes"
+      >
+        Taxes
+      </td>
+      
         
-        <td>
-          $0.00
-        </td>
-        
+      <td>
+        $0.00
+      </td>
       
-      </tr>
       
-    
-    </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,59 @@ 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'
-    })
+    });
+
+    // Close modal via postmate
+    this.component.on(`${this.name}-close`, (...args) => {
+      close(...args);
+    });
+
+    // Close modal via postMessage (specifically during approal url flow)
+    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 });
   }
-}
+}

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

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

package/src/views/confirmation.js

@@ -1,29 +1,32 @@
+import { purchase } from '../functions/purchase';
+import { setup } from '../functions/setup';
 import { ViewIframe } from './common/iframe';
 import { replaceContent } from './common/render-utilities';
+import { updateMethodSelector } from './method-selector';
+import { updateSummary } from './summary';
 
-export const baseConfirmationHTML = '<div class="rebilly-instruments-confirmation"></div>';
+export const baseConfirmationHTML =
+  '<div class="rebilly-instruments-confirmation"></div>';
 
-export async function MountConfirmation({
-  instrument,
-  mainStyle
-}) {
-  if(instrument.billingAddress && this.summary) {
-    this._updateSummary.call(this, instrument);
+export async function mountConfirmation({ payload: instrument, state }) {
+  if (
+    (instrument.billingAddress && state.summary) &&
+    state.data.isPurchase
+  ) {
+    updateSummary({ state, instrument });
   }
 
-  replaceContent(this.form, baseConfirmationHTML);
-  
-  this.loader.startLoading({id: 'confirmation'});
-  
+  replaceContent(state.form, baseConfirmationHTML);
+
+  state.loader.startLoading({ id: 'confirmation' });
 
   const container = document.querySelector('.rebilly-instruments-confirmation');
-  
-  const {paymentMethodsUrl} = this.options._computed;
+
+  const { paymentMethodsUrl } = state.options._computed;
 
   const model = {
-    configs: this.configs,
-    options: this.options,
-    mainStyle,
+    options: state.options,
+    mainStyle: state.mainStyle,
     instrument
   };
   const name = 'rebilly-instruments-confirmation';
@@ -34,24 +37,30 @@ export async function MountConfirmation({
     model
   });
   iframe.bindEventListeners({
-    loader: this.loader,
+    loader: state.loader
   });
 
   iframe.component.on(`${name}-confirm-purchase`, (confirmedInstrument) => {
-    this.purchase(confirmedInstrument);
+    purchase({ state, payload: confirmedInstrument });
+  });
+
+  iframe.component.on(`${name}-confirm-setup`, (confirmedInstrument) => {
+    setup({ state, payload: confirmedInstrument });
   });
 
   iframe.component.on('choose-another-method', () => {
-    this.iframeComponents = this.iframeComponents.filter(item => {
-      if(item.name === iframe.name) {
-        item.component.destroy();
+    state.iframeComponents = state.iframeComponents.filter((item) => {
+      if (item.name === iframe.name) {
+        item.destroy();
         return false;
       }
       return true;
     });
-    this._updateSummary.call(this);
-    this._updateSelector.call(this, {mainStyle});
+    if (state.data.isPurchase) {
+      updateSummary({ state });
+    }
+    updateMethodSelector({ state, mainStyle: state.mainStyle });
   });
 
-  this.iframeComponents.push(iframe);
-}
+  state.iframeComponents.push(iframe);
+}