@rebilly/instruments 2.0.0-beta → 3.0.1-beta.0

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

@@ -5,146 +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"
       >
         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>
 `;
 
@@ -152,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>
-          $0.00
-        </td>
+      <td
+        data-rebilly-i18n="summary.taxes"
+      >
+        Taxes
+      </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

@@ -11,6 +11,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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;

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

@@ -8,6 +8,8 @@ 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");
@@ -20,11 +22,10 @@ const baseConfirmationHTML = '<div class="rebilly-instruments-confirmation"></di
 exports.baseConfirmationHTML = baseConfirmationHTML;
 
 async function mountConfirmation({
-  instrument,
-  mainStyle,
+  payload: instrument,
   state
 }) {
-  if (instrument.billingAddress && state.summary) {
+  if (instrument.billingAddress && state.summary && state.data.isPurchase) {
     (0, _summary.updateSummary)({
       state,
       instrument
@@ -41,7 +42,7 @@ async function mountConfirmation({
   } = state.options._computed;
   const model = {
     options: state.options,
-    mainStyle,
+    mainStyle: state.mainStyle,
     instrument
   };
   const name = 'rebilly-instruments-confirmation';
@@ -60,6 +61,12 @@ async function mountConfirmation({
       payload: confirmedInstrument
     });
   });
+  iframe.component.on(`${name}-confirm-setup`, confirmedInstrument => {
+    (0, _setup.setup)({
+      state,
+      payload: confirmedInstrument
+    });
+  });
   iframe.component.on('choose-another-method', () => {
     state.iframeComponents = state.iframeComponents.filter(item => {
       if (item.name === iframe.name) {
@@ -69,12 +76,16 @@ async function mountConfirmation({
 
       return true;
     });
-    (0, _summary.updateSummary)({
-      state
-    });
+
+    if (state.data.isPurchase) {
+      (0, _summary.updateSummary)({
+        state
+      });
+    }
+
     (0, _methodSelector.updateMethodSelector)({
       state,
-      mainStyle
+      mainStyle: state.mainStyle
     });
   });
   state.iframeComponents.push(iframe);

package/dist/views/method-selector/generate-digital-wallet.js

@@ -9,19 +9,28 @@ var _getMethodData = require("./get-method-data");
 
 function generateDigitalWallet({
   state,
-  summary,
   EXPRESS_METHODS
 }) {
+  var _state$data;
+
   const output = {};
   const {
     paymentInstruments
   } = state.options;
   const transactionData = {
-    amount: summary.total,
-    currency: summary.currency,
     countryCode: state.options.countryCode,
     label: state.options.websiteId
   };
+
+  if ((_state$data = state.data) !== null && _state$data !== void 0 && _state$data.amountAndCurrency) {
+    const {
+      amount,
+      currency
+    } = state.data.amountAndCurrency;
+    transactionData.amount = amount;
+    transactionData.currency = currency;
+  }
+
   EXPRESS_METHODS.forEach(method => {
     var _method$feature, _method$feature2;
 

package/dist/views/method-selector/generate-digital-wallet.spec.js

@@ -6,6 +6,8 @@ var _readyToPayModel = _interopRequireDefault(require("../../storefront/models/r
 
 var _summaryModel = _interopRequireDefault(require("../../storefront/models/summary-model"));
 
+var _fetchData = require("../../functions/mount/fetch-data");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 describe('generateDigitalWallet', () => {
@@ -14,6 +16,15 @@ describe('generateDigitalWallet', () => {
       options = {}
     } = {}) {
       this.options = options;
+      this.data = new _fetchData.DataInstance({
+        state: {
+          options
+        },
+        previewPurchase: {
+          total: 1,
+          currency: 'USD'
+        }
+      });
     }
 
   }

package/dist/views/method-selector/get-payment-methods.js

@@ -26,14 +26,13 @@ const isSupportedMethod = ({
 
 
 function getPaymentMethods({
-  methods,
   state
 }) {
   const result = {
     EXPRESS_METHODS: [],
     METHODS: []
   };
-  methods.forEach(method => {
+  state.data.readyToPay.forEach(method => {
     if (isExpressMethod(method)) {
       const {
         METHOD_TYPE
@@ -51,5 +50,17 @@ function getPaymentMethods({
       result.METHODS.push(method);
     }
   });
+
+  if (!window.ApplePaySession) {
+    result.EXPRESS_METHODS = result.EXPRESS_METHODS.filter(method => {
+      var _method$feature;
+
+      return (method === null || method === void 0 ? void 0 : (_method$feature = method.feature) === null || _method$feature === void 0 ? void 0 : _method$feature.name) !== 'Apple Pay';
+    });
+    state.loader.stopLoading({
+      id: 'applePay-express'
+    });
+  }
+
   return result;
 }

package/dist/views/method-selector/get-payment-methods.spec.js

@@ -9,7 +9,27 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 class TestInstance {
   constructor() {
     this.loader = {
-      startLoading: jest.fn()
+      startLoading: jest.fn(),
+      stopLoading: jest.fn()
+    };
+    this.data = {
+      readyToPay: [new _readyToPayModel.default({
+        method: 'payment-card',
+        feature: {
+          name: 'Google Pay',
+          merchantName: 'google-pay-merchant-name',
+          merchantOrigin: 'google-pay-merchant-origin'
+        },
+        brands: ['Visa'],
+        filters: []
+      }), new _readyToPayModel.default({
+        method: 'bitcoin',
+        filters: []
+      }), new _readyToPayModel.default({
+        method: 'payment-card',
+        brands: ['Visa'],
+        filters: []
+      })]
     };
   }
 
@@ -17,25 +37,7 @@ class TestInstance {
 
 it('should only return the allowed methods', () => {
   const instance = new TestInstance();
-  const methods = [new _readyToPayModel.default({
-    method: 'payment-card',
-    feature: {
-      name: 'Google Pay',
-      merchantName: 'google-pay-merchant-name',
-      merchantOrigin: 'google-pay-merchant-origin'
-    },
-    brands: ['Visa'],
-    filters: []
-  }), new _readyToPayModel.default({
-    method: 'bitcoin',
-    filters: []
-  }), new _readyToPayModel.default({
-    method: 'payment-card',
-    brands: ['Visa'],
-    filters: []
-  })];
   const results = (0, _getPaymentMethods.getPaymentMethods)({
-    methods,
     state: instance
   });
   expect(results.hasOwnProperty('EXPRESS_METHODS')).toEqual(true);