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

package/dist/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/dist/views/common/iframe/base-iframe.js

@@ -5,12 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _postmate = _interopRequireDefault(require("postmate"));
+var _popostmate = _interopRequireDefault(require("popostmate"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 class BaseIframe {
   constructor({
+    state = {},
     name = '',
     url = '',
     model = {},
@@ -23,6 +24,7 @@ class BaseIframe {
       classListArray.push('rebilly-instruments-iframe');
     }
 
+    this.state = state;
     this.container = container;
     this.classListArray = classListArray;
     this.name = name;
@@ -35,8 +37,14 @@ class BaseIframe {
     })();
   }
 
+  async destroy() {
+    if (this.component.frame.parentNode) {
+      await this.component.destroy();
+    }
+  }
+
   async createComponent() {
-    const component = await new _postmate.default({
+    const component = await new _popostmate.default({
       name: this.name,
       url: this.url,
       container: this.container,

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

@@ -23,14 +23,60 @@ class ModalIframe extends _baseIframe.default {
     (0, _eventListeners.dispatchRebillyInsturmentEventHandler)(this);
     (0, _eventListeners.resizeComponentHandler)(this);
     (0, _eventListeners.changeIframeSrcHandler)(this);
-    this.component.on(`${this.name}-close`, (...args) => {
-      close(...args);
-    });
     (0, _eventListeners.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') {
+          var _this$state$data$invo;
+
+          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$invo = this.state.data.invoice) !== null && _this$state$data$invo !== void 0 && _this$state$data$invo.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/dist/views/confirmation.js

@@ -3,36 +3,46 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MountConfirmation = MountConfirmation;
+exports.mountConfirmation = mountConfirmation;
 exports.baseConfirmationHTML = void 0;
 
+var _purchase = require("../functions/purchase");
+
+var _setup = require("../functions/setup");
+
 var _iframe = require("./common/iframe");
 
 var _renderUtilities = require("./common/render-utilities");
 
+var _methodSelector = require("./method-selector");
+
+var _summary = require("./summary");
+
 const baseConfirmationHTML = '<div class="rebilly-instruments-confirmation"></div>';
 exports.baseConfirmationHTML = baseConfirmationHTML;
 
-async function MountConfirmation({
-  instrument,
-  mainStyle
+async function mountConfirmation({
+  payload: instrument,
+  state
 }) {
-  if (instrument.billingAddress && this.summary) {
-    this._updateSummary.call(this, instrument);
+  if (instrument.billingAddress && state.summary && state.data.isPurchase) {
+    (0, _summary.updateSummary)({
+      state,
+      instrument
+    });
   }
 
-  (0, _renderUtilities.replaceContent)(this.form, baseConfirmationHTML);
-  this.loader.startLoading({
+  (0, _renderUtilities.replaceContent)(state.form, baseConfirmationHTML);
+  state.loader.startLoading({
     id: 'confirmation'
   });
   const container = document.querySelector('.rebilly-instruments-confirmation');
   const {
     paymentMethodsUrl
-  } = this.options._computed;
+  } = state.options._computed;
   const model = {
-    configs: this.configs,
-    options: this.options,
-    mainStyle,
+    options: state.options,
+    mainStyle: state.mainStyle,
     instrument
   };
   const name = 'rebilly-instruments-confirmation';
@@ -43,26 +53,40 @@ async function MountConfirmation({
     model
   });
   iframe.bindEventListeners({
-    loader: this.loader
+    loader: state.loader
   });
   iframe.component.on(`${name}-confirm-purchase`, confirmedInstrument => {
-    this.purchase(confirmedInstrument);
+    (0, _purchase.purchase)({
+      state,
+      payload: confirmedInstrument
+    });
+  });
+  iframe.component.on(`${name}-confirm-setup`, confirmedInstrument => {
+    (0, _setup.setup)({
+      state,
+      payload: confirmedInstrument
+    });
   });
   iframe.component.on('choose-another-method', () => {
-    this.iframeComponents = this.iframeComponents.filter(item => {
+    state.iframeComponents = state.iframeComponents.filter(item => {
       if (item.name === iframe.name) {
-        item.component.destroy();
+        item.destroy();
         return false;
       }
 
       return true;
     });
 
-    this._updateSummary.call(this);
+    if (state.data.isPurchase) {
+      (0, _summary.updateSummary)({
+        state
+      });
+    }
 
-    this._updateSelector.call(this, {
-      mainStyle
+    (0, _methodSelector.updateMethodSelector)({
+      state,
+      mainStyle: state.mainStyle
     });
   });
-  this.iframeComponents.push(iframe);
+  state.iframeComponents.push(iframe);
 }

package/dist/views/method-selector/express-methods/apple-pay.js

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = mountApplePay;
+
+var _events = _interopRequireDefault(require("../../../events"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const browserIsSafari = () => window.ApplePaySession;
+
+function mountApplePay({
+  state,
+  METHOD_ID,
+  METHOD_TYPE,
+  EXPRESS_METHODS,
+  EXPRESS_METHODS_CONTAINER
+}) {
+  const container = document.querySelector(`.rebilly-instruments-${METHOD_ID}-method`);
+  const digitalWallet = state.options.digitalWallet.applePay;
+
+  function mountApplePayButton() {
+    if (!container.children.length) {
+      Rebilly.applePay.mount(`.rebilly-instruments-${METHOD_ID}-method`);
+    }
+
+    state.loader.stopLoading({
+      id: `${METHOD_TYPE}-express`
+    });
+  } // Hack: The correct way to do this is to accept the options via the framepay package
+  // Will remove once these options are added to framepay
+
+
+  function updateBtnStyling() {
+    const applePayButton = document.querySelector('#rebilly-apple-pay-button');
+    applePayButton.style.margin = '0px';
+    applePayButton.style.width = '100%';
+    applePayButton.style.height = digitalWallet.applePayDisplayOptions.buttonHeight;
+  }
+
+  if (!browserIsSafari()) {
+    if (EXPRESS_METHODS.length === 1) {
+      EXPRESS_METHODS_CONTAINER.parentNode.style.display = 'none';
+    }
+
+    state.loader.stopLoading({
+      id: `${METHOD_TYPE}-express`
+    });
+    container.style.display = 'none';
+    return;
+  }
+
+  container.style.height = digitalWallet.applePayDisplayOptions.buttonHeight;
+
+  if (!Rebilly.initialized) {
+    Rebilly.initialize({
+      publishableKey: state.options.publishableKey,
+      organizationId: state.options.organizationId,
+      digitalWallet
+    });
+  } else {
+    mountApplePayButton();
+    updateBtnStyling();
+  }
+
+  Rebilly.on('ready', () => {
+    mountApplePayButton();
+    updateBtnStyling();
+  });
+  Rebilly.on('token-ready', token => {
+    const instrumentReadyPayload = {
+      websiteId: state.options.websiteId,
+      items: state.options.items,
+      paymentInstruction: {
+        token: token.id
+      },
+      billingAddress: token.billingAddress,
+      _raw: token
+    };
+
+    if (!token.shippingAddress) {
+      instrumentReadyPayload.deliveryAddress = token.shippingAddress;
+    }
+
+    _events.default.instrumentReady.dispatch(instrumentReadyPayload);
+  });
+  Rebilly.on('error', error => {
+    console.error(error);
+  });
+}

package/dist/views/method-selector/express-methods/google-pay.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = mountGooglePay;
+
+var _iframe = require("../../common/iframe");
+
+async function mountGooglePay({
+  state,
+  METHOD_ID
+}) {
+  const container = document.querySelector(`.rebilly-instruments-${METHOD_ID}-method`);
+  const {
+    paymentMethodsUrl
+  } = state.options._computed;
+  const model = {
+    options: state.options
+  };
+  const iframe = await new _iframe.MethodIframe({
+    name: METHOD_ID,
+    url: `${paymentMethodsUrl}/${METHOD_ID}`,
+    container,
+    model
+  });
+  iframe.bindEventListeners({
+    loader: state.loader
+  });
+  state.iframeComponents.push(iframe);
+}