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

package/src/views/summary.js

@@ -1,98 +1,176 @@
 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,
+      show: true,
+    },
+    {
+      label: 'Discounts',
+      class: 'discounts',
+      i18n: 'summary.discounts',
+      value: discountsAmount,
+      show: discountsAmount > 0
+    },
+    {
+      label: 'Taxes',
+      class: 'taxes',
+      i18n: 'summary.taxes',
+      value: taxAmount,
+      show: true,
+    },
+    {
+      label: 'Shipping',
+      class: 'shipping',
+      i18n: 'summary.shipping',
+      value: shippingAmount,
+      show: state.data.isShippingRequired,
+    },
+  ].filter(({value}) => value !== null)
+   .forEach(item => {
+    if (!table) {
+      table = document.createElement('table');
+      table.insertAdjacentHTML('beforeend', `
+        <colgroup>
+          <col>
+          <col>
+        </colgroup>
+      `);
+    }
+
+    if (item.show) {
+      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 +180,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);
-
   });
-})
+});

package/tests/async-utilities.js

@@ -0,0 +1,22 @@
+import { sleep } from '@/utils'
+
+export async function avoidUnhandledPromises() {
+  // We need this sleep to avoid unhandled promises.
+  // This hack will be removed if we refactor the current design.
+  await sleep(100)
+}
+
+/**
+ * @param {Promise} promise
+ */
+export async function expectConfigurationError(promise) {
+  const NoConfigOrOptionsError =
+    'Could not use Rebilly Instruments mount options to fetch Rebilly data'
+  let error = null
+  try {
+    await promise
+  } catch (e) {
+    error = e
+  }
+  expect(error.message).toBe(NoConfigOrOptionsError)
+}