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

package/src/views/modal.js

@@ -2,46 +2,59 @@ import { ModalIframe } from './common/iframe';
 
 const modalTemplate = (isRedirect, method) => `
   <div class="rebilly-instruments-modal-overlay">
-    <div class="rebilly-instruments-modal-container ${method ? `rebilly-instruments-${method}` : ''} ${isRedirect ? 'is-redirect' : ''}">
+    <div class="rebilly-instruments-modal-container ${
+      method ? `rebilly-instruments-${method}` : ''
+    } ${isRedirect ? 'is-redirect' : ''}">
+      ${isRedirect ? '' : `
       <svg class="rebilly-instruments-modal-close" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
         <path d="m15 13.5858 7.2929-7.293c.3905-.3904 1.0237-.3904 1.4142 0 .3905.3906.3905 1.0238 0 1.4143L16.4142 15l7.293 7.2929c.3904.3905.3904 1.0237 0 1.4142-.3906.3905-1.0238.3905-1.4143 0L15 16.4142l-7.2929 7.293c-.3905.3904-1.0237.3904-1.4142 0-.3905-.3906-.3905-1.0238 0-1.4143L13.5858 15l-7.293-7.2929c-.3904-.3905-.3904-1.0237 0-1.4142.3906-.3905 1.0238-.3905 1.4143 0L15 13.5858Z" fill-rule="nonzero"/>
       </svg>
+      `}
       <div class="rebilly-instruments-modal-content"></div>
     </div>
   </div>
 `;
 
-export async function MountModal({
+export async function mountModal({
   name = '',
   url = '',
   model = {},
   classListArray = [],
-  close = () => {}
+  close = () => {},
+  state = null
 } = {}) {
-  const {method} = model?.method;
+  const method = model?.method?.method;
   const isRedirect = name === 'rebilly-instruments-approval-url';
-  this.form.insertAdjacentHTML('beforeend', modalTemplate(isRedirect, method));
-  
-  const modalOverlay = document.querySelector('.rebilly-instruments-modal-overlay');
-  const modalContainer = document.querySelector('.rebilly-instruments-modal-container');
-  const closeButton = document.querySelector('.rebilly-instruments-modal-close');
-  const modalContent = document.querySelector('.rebilly-instruments-modal-content');
+  state.form.insertAdjacentHTML('beforeend', modalTemplate(isRedirect, method));
+
+  const modalOverlay = document.querySelector(
+    '.rebilly-instruments-modal-overlay'
+  );
+  const modalContainer = document.querySelector(
+    '.rebilly-instruments-modal-container'
+  );
+  const closeButton = document.querySelector(
+    '.rebilly-instruments-modal-close'
+  );
+  const modalContent = document.querySelector(
+    '.rebilly-instruments-modal-content'
+  );
 
   document.body.style.overflow = 'hidden';
   setTimeout(() => {
     modalOverlay.classList.add('is-visible');
     modalContainer.classList.add('is-visible');
   }, 240);
-  this.loader.addDOMElement({section: 'modal', el: modalContent});
-  this.loader.startLoading({section: 'modal', id: 'modal-content'});
+  state.loader.addDOMElement({ section: 'modal', el: modalContent });
+  state.loader.startLoading({ section: 'modal', id: 'modal-content' });
 
   const injectedModel = {
-    configs: this.configs,
-    options: this.options,
+    options: state.options,
     ...model
-  }
+  };
 
   const iframe = await new ModalIframe({
+    state,
     name,
     url,
     model: injectedModel,
@@ -54,20 +67,21 @@ export async function MountModal({
     modalOverlay.classList.remove('is-visible');
     setTimeout(() => {
       document.body.style.overflow = 'auto';
-      modalOverlay.children.forEach(child => child.remove());
+      modalOverlay.children.forEach((child) => child.remove());
       modalOverlay.remove();
       close(...args);
-      iframe.component.destroy();
+      iframe.destroy();
     }, 300);
-  }
-  
+  };
+
   iframe.bindEventListeners({
     close: closeModal,
-    loader: this.loader
+    loader: state.loader
   });
 
-  modalOverlay.addEventListener('click', closeModal);
-  closeButton.addEventListener('click', closeModal);
+  if (!isRedirect) {
+    closeButton.addEventListener('click', closeModal);
+  }
 
   return iframe;
-}
+}

package/src/views/result.js

@@ -1,24 +1,21 @@
 import { ViewIframe } from './common/iframe';
 import { replaceContent } from './common/render-utilities';
 
-export async function MountResult({
-  purchase,
-  mainStyle
-}) {
+export async function mountResult({ payload, state }) {
   const resultContainerClassName = 'rebilly-instruments-result';
-  replaceContent(this.form, `<div class="${resultContainerClassName}"></div>`);
+  replaceContent(state.form, `<div class="${resultContainerClassName}"></div>`);
+
+  state.loader.startLoading({ id: 'result' });
 
-  this.loader.startLoading({id: 'result'});
-  
   const container = document.querySelector(`.${resultContainerClassName}`);
-  const { paymentMethodsUrl } = this.options._computed;
+  const { paymentMethodsUrl } = state.options._computed;
 
   const model = {
-    configs: this.configs,
-    options: this.options,
-    mainStyle,
-    purchase
+    options: state.options,
+    mainStyle: state.mainStyle,
+    [state.options.transactionType]: payload
   };
+
   const iframe = await new ViewIframe({
     name: 'rebilly-instruments-result',
     url: `${paymentMethodsUrl}/result`,
@@ -26,8 +23,8 @@ export async function MountResult({
     model
   });
   iframe.bindEventListeners({
-    loader: this.loader
+    loader: state.loader
   });
 
-  this.iframeComponents.push(iframe);
-};
+  state.iframeComponents.push(iframe);
+}

package/src/views/summary.js

@@ -1,98 +1,170 @@
 import { collectData } from '@rebilly/risk-data-collector';
 import { formatCurrency } from '../utils';
-import { FetchSummaryData } from '../functions/mount/fetch-summary-data';
-
-export const baseSummaryHTML = `
-  <div class="rebilly-instruments-content">
-    <div class="rebilly-instruments-summary-line-items"></div>
-    <div class="rebilly-instruments-summary-breakdown"></div>
-  </div>
-`;
-
-export function MountSummary({summary, plans, products} = {}) {
-  this.summary.innerHTML += baseSummaryHTML;
-  const itemsContainer = document.querySelector('.rebilly-instruments-summary-line-items');
-  const summaryBreakdown = document.querySelector('.rebilly-instruments-summary-breakdown')
-  const {intent: {items: optionItems}} = this.options;
-  const hasThumbnails = optionItems.some(optionItem => optionItem.thumbnail);
+import { fetchData } from '../functions/mount/fetch-data';
 
+export function lineItemHTML({state, lineItem}) {
+  const {products} = state.data;
   const {
-    lineItems,
-    currency,
-    discountsAmount,
-    shippingAmount,
-    subtotalAmount,
-    taxAmount,
-    total
-  } = summary;
-
-  lineItems.forEach(lineItem => {
-    const {thumbnail} = optionItems.find(optionItem => optionItem.planId === lineItem.planId);
-    const {name} = plans.find(plan => plan.id === lineItem.planId);
-    const {description} = products.find(product => product.id === lineItem.productId);
-
-    itemsContainer.innerHTML += `
-      <div class="rebilly-instruments-summary-line-item">
-        ${hasThumbnails ? `
-          <figure class="rebilly-instruments-summary-line-item-figure">
-            ${thumbnail ? `<img src="${thumbnail}" alt="${name}">` : ''}
-          </figure>
-        ` : ''}
-        <div class="rebilly-instruments-summary-line-item-synopsis">
-            <p class="rebilly-instruments-summary-line-item-synopsis-title">${name}</p>
-            ${description ? `
-              <p class="rebilly-instruments-summary-line-item-synopsis-description">${description}</p>
-            ` : ''}
-        </div>
-        <div class="rebilly-instruments-summary-line-item-price-breakdown">
-          <p class="rebilly-instruments-summary-line-item-price-breakdown-quantity">${lineItem.quantity}</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">${formatCurrency(lineItem.unitPrice, currency)}</p>
-        </div>
+    currency = null,
+  } = state.data?.amountAndCurrency;
+
+  const {
+    items: optionItems = []
+  } = state.options;
+  const hasThumbnails = optionItems?.some((optionItem) => optionItem.thumbnail);
+  const { thumbnail = null } = optionItems.find(
+    (optionItem) => optionItem.planId === lineItem.planId
+  ) || {};
+
+  const { name } = products.find(
+    (product) => product.id === lineItem.productId
+  );
+
+  return `
+    <div class="rebilly-instruments-summary-line-item">
+      ${
+        hasThumbnails
+          ? `
+        <figure class="rebilly-instruments-summary-line-item-figure">
+          ${thumbnail ? `<img src="${thumbnail}" alt="${name}">` : ''}
+        </figure>
+      `
+          : ''
+      }
+      <div class="rebilly-instruments-summary-line-item-synopsis">
+          <p class="rebilly-instruments-summary-line-item-synopsis-title">${name}</p>
+          ${
+            lineItem.description
+              ? `
+            <p class="rebilly-instruments-summary-line-item-synopsis-description">${lineItem.description}</p>
+          `
+              : ''
+          }
+      </div>
+      <div class="rebilly-instruments-summary-line-item-price-breakdown">
+        <p class="rebilly-instruments-summary-line-item-price-breakdown-quantity">${
+          lineItem.quantity
+        }</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">${formatCurrency(
+          lineItem.unitPrice,
+          currency
+        )}</p>
       </div>
-    `;
-  });
-  summaryBreakdown.innerHTML = `
-    <table>
-      <colgroup>
-        <col>
-        <col>
-      </colgroup>
-      <tr class="rebilly-instruments-summary-breakdown-sub-total">
-        <td data-rebilly-i18n="summary.subTotal">Sub Total</td>
-        <td>${formatCurrency(subtotalAmount, currency)}</td>
-      </tr>
-      <tr class="rebilly-instruments-summary-breakdown-discounts">
-        <td data-rebilly-i18n="summary.discounts">Discounts</td>
-        <td>${formatCurrency(discountsAmount, currency)}</td>
-      </tr>
-      <tr class="rebilly-instruments-summary-breakdown-taxes">
-        <td data-rebilly-i18n="summary.taxes">Taxes</td>
-        <td>${formatCurrency(taxAmount, currency)}</td>
-      </tr>
-      <tr class="rebilly-instruments-summary-breakdown-taxes">
-        <td data-rebilly-i18n="summary.shipping">Shipping</td>
-        <td>${formatCurrency(shippingAmount, currency)}</td>
-      </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">${currency}</span>${formatCurrency(total, currency)}
-      </p>
     </div>
   `;
+}
+
+export function summaryBreakdownHTML({state, element}) {
+  const {
+    amount = null,
+    currency = null,
+    discountsAmount = null,
+    shippingAmount = null,
+    subtotalAmount = null,
+    taxAmount = null,
+  } = {
+    ...state.data.amountAndCurrency,
+    ...state.data.summaryItems
+  };
+
+  let table = null;
+  [
+    {
+      label: 'Sub Total',
+      class: 'sub-total',
+      i18n: 'summary.subTotal',
+      value: subtotalAmount
+    },
+    {
+      label: 'Discounts',
+      class: 'discounts',
+      i18n: 'summary.discounts',
+      value: discountsAmount
+    },
+    {
+      label: 'Taxes',
+      class: 'taxes',
+      i18n: 'summary.taxes',
+      value: taxAmount
+    },
+    {
+      label: 'Shipping',
+      class: 'shipping',
+      i18n: 'summary.shipping',
+      value: shippingAmount
+    },
+  ].filter(({value}) => value !== null)
+   .forEach(item => {
+    if (!table) {
+      table = document.createElement('table');
+      table.insertAdjacentHTML('beforeend', `
+        <colgroup>
+          <col>
+          <col>
+        </colgroup>
+      `);
+    }
+
+    const row = document.createElement('tr');
+    row.setAttribute('class', `rebilly-instruments-summary-breakdown-${item.class}`)
+    row.insertAdjacentHTML('beforeend', `
+      <td data-rebilly-i18n="${item.i18n}">${item.label}</td>
+      <td>${formatCurrency(item.value, currency)}</td>
+    `);
+    table.appendChild(row);
+  });
+  if (table) {
+    element.appendChild(table);
+  }
+
+  const totalElement = document.createElement('div');
+  totalElement.setAttribute('class', 'rebilly-instruments-summary-breakdown-total');
+  totalElement.insertAdjacentHTML('beforeend', `
+    <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">
+        ${currency}
+      </span>
+      ${formatCurrency(amount, currency)}
+    <p>
+  `);
+  element.appendChild(totalElement);
+
+  return element;
+}
+
+export async function mountSummary({ state }) {
+  const contentContainer = document.createElement('div');
+  contentContainer.setAttribute('class', 'rebilly-instruments-content');
+
+  const lineItems = state.data.summaryLineItems;
+  if (lineItems) {
+    const lineItemsElement = document.createElement('div');
+    lineItemsElement.setAttribute('class', 'rebilly-instruments-summary-line-items');
+
+    lineItems.forEach((lineItem) => {
+      lineItemsElement.insertAdjacentHTML('beforeend', lineItemHTML({ state, lineItem }));
+    });
+    contentContainer.appendChild(lineItemsElement);
+  }
   
-  this.translate.translateItems();
+  const summaryBreakdownElement = document.createElement('div');
+  summaryBreakdownElement.setAttribute('class', 'rebilly-instruments-summary-breakdown');
+  contentContainer.appendChild(summaryBreakdownHTML({ state, element: summaryBreakdownElement}));
+
+  state.summary.appendChild(contentContainer);
+  state.summary.style.minHeight = '';
 
-  this.loader.stopLoading({section: 'summary', id: 'initSummary'});
-};
+  state.translate.translateItems();
+  state.loader.stopLoading({ section: 'summary', id: 'initSummary' });
+}
 
-export async function UpdateSummary(instrument = null) {
-  this.loader.startLoading({section: 'summary', id: 'initSummary'});
-  const {riskMetadata} = await collectData();
+export async function updateSummary({ state, instrument = null }) {
+  state.loader.startLoading({ section: 'summary', id: 'initSummary' });
+  const { riskMetadata } = await collectData();
 
   let summaryPayload;
 
@@ -102,25 +174,21 @@ export async function UpdateSummary(instrument = null) {
     };
   }
 
-  const {
-    readyToPay,
-    summary: summaryData,
-    plans,
-    products
-  } = await FetchSummaryData.call(this, {
+  state.data = await fetchData({
     riskMetadata,
-    summaryPayload
+    summaryPayload,
+    state
   });
 
-  this.summaryOptions = {
-    summary: summaryData,
-    readyToPay,
-    plans,
-    products,
-  };
+  if (state.data.transaction && state.data.transaction?.type === 'setup') {
+    state.options.transactionType = 'setup';
+  }
 
-  const itemsContainer = this.summary.querySelector('.rebilly-instruments-content');
+  const itemsContainer = state.summary.querySelector(
+    '.rebilly-instruments-content'
+  );
   itemsContainer?.remove();
 
-  MountSummary.call(this, this.summaryOptions)
-}
+  mountSummary({ state });
+}
+

package/src/views/summary.spec.js

@@ -3,7 +3,8 @@ import PlanModel from '@/storefront/models/plan-model';
 import ProductModel from '@/storefront/models/product-model';
 import { Loader } from '../loader';
 import { Translate } from '../i18n';
-import { MountSummary } from './summary';
+import { mountSummary } from './summary';
+import { DataInstance } from '../functions/mount/fetch-data';
 
 describe('Summary component', () => {
   let summaryElement;
@@ -11,110 +12,134 @@ describe('Summary component', () => {
     document.body.innerHTML = '';
     summaryElement = document.createElement('div');
     document.body.append(summaryElement);
-  })
+  });
 
   class TestMountSummaryInstance {
     constructor({
-      configs = {},
       options = {},
       summary = summaryElement,
       loader = new Loader(),
       translate = new Translate(),
+      data = {},
     } = {}) {
-      this.configs = configs;
       this.options = options;
       this.summary = summary;
       this.loader = loader;
       this.translate = translate;
-    }
-
-    mountSummary(summaryProductsPlans, ...args) {
-      this.loader.DOM.summary = this.summary;
-      return MountSummary.apply(this, args.concat(summaryProductsPlans));
+      this.data = new DataInstance({
+        state: {options},
+        previewPurchase: new SummaryModel({
+          currency: 'USD',
+          lineItems: [
+            {
+              type: 'debit',
+              description: 'My Awesome Product',
+              unitPrice: 30,
+              quantity: 1,
+              price: 30,
+              productId: 'test-product-1',
+              planId: 'my-awesome-product'
+            },
+            {
+              type: 'debit',
+              description: 'Awesome T-Shirt',
+              unitPrice: 20,
+              quantity: 2,
+              price: 40,
+              productId: 'test-product-2',
+              planId: 'awesome-t-shirt'
+            }
+          ],
+          subtotalAmount: 70,
+          taxAmount: 0,
+          shippingAmount: 0,
+          discountsAmount: 0,
+          total: 70
+        }),
+        plans: [
+          new PlanModel({
+            name: 'My Awesome Product',
+            id: 'my-awesome-product',
+            productId: 'test-product-1'
+          }),
+          new PlanModel({
+            name: 'My Awesome T-Shirt',
+            id: 'awesome-t-shirt',
+            productId: 'test-product-2'
+          })
+        ],
+        products: [
+          new ProductModel({
+            name: 'My Awesome Product',
+            id: 'test-product-1'
+          }),
+          new ProductModel({
+            name: 'My Awesome T-Shirt',
+            id: 'test-product-2'
+          })
+        ],
+        ...data
+      });
     }
   }
 
   const options = {
-    intent: {
-      countryCode: 'US',
-      items: [
-        {
-          planId: 'my-awesome-product',
-          quantity: 1,
-          thumbnail: '',
-        },
-        {
-          planId: 'awesome-t-shirt',
-          quantity: 2,
-          thumbnail: '',
-        }
-      ]
-    }
+    websiteId: 'test-website-id',
+    countryCode: 'US',
+    items: [
+      {
+        planId: 'my-awesome-product',
+        quantity: 1,
+        thumbnail: ''
+      },
+      {
+        planId: 'awesome-t-shirt',
+        quantity: 2,
+        thumbnail: ''
+      }
+    ]
   };
 
-  const summaryData = new SummaryModel({
-    currency: "USD",
-    lineItems: [{
-      type: "debit",
-      description: "My Awesome Product",
-      unitPrice: 30,
-      quantity: 1,
-      price: 30,
-      productId: "test-product-1",
-      planId: "my-awesome-product"
-    }, {
-      type: "debit",
-      description: "Awesome T-Shirt",
-      unitPrice: 20,
-      quantity: 2,
-      price: 40,
-      productId: "test-product-2",
-      planId: "awesome-t-shirt"
-    }],
-    subtotalAmount: 70,
-    taxAmount: 0,
-    shippingAmount: 0,
-    discountsAmount: 0,
-    total: 70
-  });
-
-  const planData = [
-    new PlanModel({name: 'My Awesome Product', id: 'my-awesome-product', productId: 'test-product-1'}),
-    new PlanModel({name: 'My Awesome T-Shirt', id: 'awesome-t-shirt', productId: 'test-product-2'})
-  ];
-
-  const productData = [
-    new ProductModel({description: 'My Awesome Product', id: 'test-product-1'}),
-    new ProductModel({description: 'My Awesome T-Shirt', id: 'test-product-2'})
-  ];
+  it('should render the summary correctly', () => {
+    const mountSummaryInstance = new TestMountSummaryInstance({
+      options
+    });
 
-  const configs = {
-    websiteId: 'test-website-id'
-  };
+    //TODO: improve design to avoid this manual change
+    mountSummaryInstance.loader.DOM.summary = mountSummaryInstance.summary;
 
-  it('should render the summary correctly', () => {
-    const mountSummaryInstance = new TestMountSummaryInstance({configs, options});
-    mountSummaryInstance.mountSummary({summary: summaryData, plans: planData, products: productData});
+    mountSummary({ state: mountSummaryInstance });
 
     // Number of line items
-    const itemsContainer = document.querySelector('.rebilly-instruments-summary-line-items');
+    const itemsContainer = document.querySelector(
+      '.rebilly-instruments-summary-line-items'
+    );
     expect(itemsContainer).toMatchSnapshot();
 
     // Breakdown
-    const summaryBreakdown = document.querySelector('.rebilly-instruments-summary-breakdown');
+    const summaryBreakdown = document.querySelector(
+      '.rebilly-instruments-summary-breakdown'
+    );
     expect(summaryBreakdown).toMatchSnapshot();
   });
 
   it('should not render the plan description if its falsy', () => {
-    const mountSummaryInstance = new TestMountSummaryInstance({configs, options});
-    
+    const mountSummaryInstance = new TestMountSummaryInstance({
+      options
+    });
+
     // Making one product description falsy
-    productData[0].description = null;
-    mountSummaryInstance.mountSummary({summary: summaryData, plans: planData, products: productData});
+    mountSummaryInstance.data.previewPurchase.lineItems[0].description = null;
+
+    //TODO: improve design to avoid this manual change
+    mountSummaryInstance.loader.DOM.summary = mountSummaryInstance.summary;
+
+    mountSummary({ state: mountSummaryInstance });
 
     // Check that only one description is render
-    const itemsSynopsysDescription = document.querySelectorAll('.rebilly-instruments-summary-line-item-synopsis-description');
+    const itemsSynopsysDescription = document.querySelectorAll(
+      '.rebilly-instruments-summary-line-item-synopsis-description'
+    );
     expect(itemsSynopsysDescription.length).toEqual(1);
-
   });
-})
+});