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

package/src/views/summary.js

@@ -1,118 +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({ state, summaryOptions }) {
-  const { summary, products } = summaryOptions;
-  state.summary.innerHTML += baseSummaryHTML;
-  const itemsContainer = document.querySelector(
-    '.rebilly-instruments-summary-line-items'
-  );
-  const summaryBreakdown = document.querySelector(
-    '.rebilly-instruments-summary-breakdown'
-  );
+import { fetchData } from '../functions/mount/fetch-data';
+
+export function lineItemHTML({state, lineItem}) {
+  const {products} = state.data;
+  const {
+    currency = null,
+  } = state.data?.amountAndCurrency;
+
   const {
-    items: optionItems
+    items: optionItems = []
   } = state.options;
   const hasThumbnails = optionItems?.some((optionItem) => optionItem.thumbnail);
+  const { thumbnail = null } = optionItems.find(
+    (optionItem) => optionItem.planId === lineItem.planId
+  ) || {};
 
-  const {
-    lineItems,
-    currency,
-    discountsAmount,
-    shippingAmount,
-    subtotalAmount,
-    taxAmount,
-    total
-  } = summary;
-
-  lineItems.forEach((lineItem) => {
-    const { thumbnail } = optionItems.find(
-      (optionItem) => optionItem.planId === lineItem.planId
-    );
-    const { name } = 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>
-            ${
-              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>
+  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>
   `;
+}
 
-  state.translate.translateItems();
+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);
+  }
+  
+  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 = '';
+
+  state.translate.translateItems();
   state.loader.stopLoading({ section: 'summary', id: 'initSummary' });
 }
 
@@ -128,29 +180,21 @@ export async function updateSummary({ state, instrument = null }) {
     };
   }
 
-  const {
-    readyToPay,
-    summary: summaryData,
-    plans,
-    products
-  } = await fetchSummaryData({
+  state.data = await fetchData({
     riskMetadata,
     summaryPayload,
     state
   });
 
-  const summaryOptions = {
-    summary: summaryData,
-    readyToPay,
-    plans,
-    products
-  };
+  if (state.data.transaction && state.data.transaction?.type === 'setup') {
+    state.options.transactionType = 'setup';
+  }
 
   const itemsContainer = state.summary.querySelector(
     '.rebilly-instruments-content'
   );
   itemsContainer?.remove();
 
-  mountSummary({ state, summaryOptions });
+  mountSummary({ state });
 }
 

package/src/views/summary.spec.js

@@ -4,7 +4,7 @@ import ProductModel from '@/storefront/models/product-model';
 import { Loader } from '../loader';
 import { Translate } from '../i18n';
 import { mountSummary } from './summary';
-import { RebillyInstrumentsInstance } from '../index';
+import { DataInstance } from '../functions/mount/fetch-data';
 
 describe('Summary component', () => {
   let summaryElement;
@@ -19,12 +19,67 @@ describe('Summary component', () => {
       options = {},
       summary = summaryElement,
       loader = new Loader(),
-      translate = new Translate()
+      translate = new Translate(),
+      data = {},
     } = {}) {
       this.options = options;
       this.summary = summary;
       this.loader = loader;
       this.translate = translate;
+      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
+      });
     }
   }
 
@@ -45,59 +100,6 @@ describe('Summary component', () => {
     ]
   };
 
-  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
@@ -106,14 +108,7 @@ describe('Summary component', () => {
     //TODO: improve design to avoid this manual change
     mountSummaryInstance.loader.DOM.summary = mountSummaryInstance.summary;
 
-    mountSummary({
-      state: mountSummaryInstance,
-      summaryOptions: {
-        summary: summaryData,
-        plans: planData,
-        products: productData
-      }
-    });
+    mountSummary({ state: mountSummaryInstance });
 
     // Number of line items
     const itemsContainer = document.querySelector(
@@ -129,27 +124,17 @@ describe('Summary component', () => {
   });
 
   it('should not render the plan description if its falsy', () => {
-    const state = new RebillyInstrumentsInstance();
-    state.options = options;
-
     const mountSummaryInstance = new TestMountSummaryInstance({
       options
     });
 
     // Making one product description falsy
-    summaryData.lineItems[0].description = null;
+    mountSummaryInstance.data.previewPurchase.lineItems[0].description = null;
 
     //TODO: improve design to avoid this manual change
     mountSummaryInstance.loader.DOM.summary = mountSummaryInstance.summary;
 
-    mountSummary({
-      state: mountSummaryInstance,
-      summaryOptions: {
-        summary: summaryData,
-        plans: planData,
-        products: productData
-      }
-    });
+    mountSummary({ state: mountSummaryInstance });
 
     // Check that only one description is render
     const itemsSynopsysDescription = document.querySelectorAll(

package/tests/mocks/rebilly-instruments-mock.js

@@ -6,9 +6,14 @@ import { storefrontURL } from 'tests/mocks/storefront-api-mock';
 import PlanModel from '@/storefront/models/plan-model';
 import ProductModel from '@/storefront/models/product-model';
 import SummaryModel from '@/storefront/models/summary-model';
+import InvoiceModel from '@/storefront/models/invoice-model';
 import merge from 'lodash.merge';
+import { DataInstance } from '../../src/functions/mount/fetch-data';
 
 export async function RenderMockRebillyInstruments(options = {}) {
+  const testInvoice = new InvoiceModel({
+    id: 'test-invoice-id'
+  });
   const testPlan = new PlanModel({ name: 'Test Plan', id: 'test-plan-id-1' });
   const testProduct = new ProductModel({
     description: 'My Awesome Product',
@@ -28,6 +33,12 @@ export async function RenderMockRebillyInstruments(options = {}) {
   });
   const framePayStyleUrl = 'https://dev.framepay.rebilly.com/rebilly.css';
 
+  when(get(`${storefrontURL}/invoices/*`)).thenReturn(
+    (() => {
+      return ok(testInvoice);
+    })()
+  );
+
   when(post(`${storefrontURL}/ready-to-pay`)).thenReturn(
     (() => {
       return ok([
@@ -67,17 +78,27 @@ export async function RenderMockRebillyInstruments(options = {}) {
     form: '.form-selector',
     summary: '.summary-selector',
     locale: 'auto',
-    items: [
-      {
-        planId: 'test-plan-id-1',
-        quantity: 1
-      }
-    ],
     _dev: {
       framePayStyleLink: framePayStyleUrl
     },
   };
-  const mergedOptions = merge(defaultOptions, options);
+
+  const hasPurchaseData = [
+    'items',
+    'invoiceId',
+    'transactionId',
+    'money'
+  ].some(key => Object.keys(options).includes(key))
+  if(!hasPurchaseData) {
+    defaultOptions.items = [
+      {
+        planId: 'test-plan-id-1',
+        quantity: 1
+      }
+    ];
+  }
+
+  const mergedOptions = merge({...defaultOptions}, options);
 
   const framepayMock = createFramepayMock();
   global.Rebilly = framepayMock;
@@ -91,5 +112,14 @@ export async function RenderMockRebillyInstruments(options = {}) {
 
   await rebillyInstruments.mount(mergedOptions);
 
+  rebillyInstruments.mock = {
+    data: (data) => {
+      rebillyInstruments.state.data = new DataInstance({
+        state: rebillyInstruments.state,
+        ...data
+      });
+    }
+  };
+
   return rebillyInstruments;
 }

package/tests/mocks/storefront-api-mock.js

@@ -18,4 +18,12 @@ export const initStoreFrontApiMocks = (when) => {
   when(get(`${storefrontURL}/products`)).thenReturn((() => {
     return ok([])
   })());
+
+  when(post(`${storefrontURL}/payment-instruments`)).thenReturn((() => {
+    return ok([])
+  })());
+  
+  when(post(`${storefrontURL}/payment-instruments/*/setup`)).thenReturn((() => {
+    return ok([])
+  })());
 };

package/tests/mocks/storefront-mock.js

@@ -1,5 +1,22 @@
 import Storefront from '@/storefront';
+import { DataInstance } from '@/functions/mount/fetch-data';
 
 export function MockStorefront(config = {}) {
   return Storefront(config);
+}
+
+export function StorefontTestingInstance({
+  MockStorefrontConfig = {},
+  options = {},
+  data = {}
+} = {}) {
+  class TestInstance {
+    constructor() {
+      this.options = options;
+      this.storefront = MockStorefront(MockStorefrontConfig);
+      this.data = new DataInstance({state: {options}, ...data});
+    }
+  }
+
+  return new TestInstance();
 }

package/dist/functions/mount/fetch-summary-data.js

@@ -1,46 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.fetchSummaryData = fetchSummaryData;
-
-var _plans = require("../../storefront/plans");
-
-var _products = require("../../storefront/products");
-
-var _readyToPay = require("../../storefront/ready-to-pay");
-
-var _summary = require("../../storefront/summary");
-
-async function fetchSummaryData({
-  state = null,
-  riskMetadata = null,
-  summaryPayload = null
-}) {
-  if (!riskMetadata) {
-    throw new Error('riskMetadata is required for FetchSummaryData');
-  }
-
-  const [readyToPay, summary] = await Promise.all([(0, _readyToPay.fetchReadyToPay)({
-    riskMetadata,
-    state
-  }), (0, _summary.fetchSummary)({
-    data: summaryPayload,
-    state
-  })]);
-  const plans = await (0, _plans.fetchPlans)({
-    data: summary,
-    state
-  });
-  const products = await (0, _products.fetchProducts)({
-    data: plans,
-    state
-  });
-  return {
-    readyToPay,
-    summary,
-    plans,
-    products
-  };
-}

package/dist/functions/mount/fetch-summary-data.spec.js

@@ -1,43 +0,0 @@
-"use strict";
-
-var _fetchSummaryData = require("./fetch-summary-data");
-
-describe.skip('Fetch Summary Data function helper', () => {
-  class TestInstance {
-    constructor() {
-      this.storefront = jest.fn();
-      this.options = jest.fn();
-      this._fetchSummary = jest.fn(() => {
-        return new Promise(resolve => resolve({}));
-      });
-      this._fetchProducts = jest.fn();
-    }
-
-  }
-
-  it.skip('should fetch all the data', async () => {
-    const instance = new TestInstance();
-    await (0, _fetchSummaryData.fetchSummaryData)({
-      riskMetadata: {},
-      state: instance
-    });
-    expect(fetchReadyToPay).toBeCalledTimes(1);
-    expect(instance._fetchSummary).toBeCalledTimes(1);
-    expect(instance._fetchPlans).toBeCalledTimes(1);
-    expect(instance._fetchProducts).toBeCalledTimes(1);
-  });
-  it('should pass riskMetadata to ready to pay', async () => {
-    const testRiskMetadata = {};
-    const instance = new TestInstance();
-    await (0, _fetchSummaryData.fetchSummaryData)({
-      riskMetadata: testRiskMetadata,
-      state: instance
-    });
-    expect(instance._fetchReadyToPay).toBeCalledWith(testRiskMetadata);
-    expect(async () => {
-      await (0, _fetchSummaryData.fetchSummaryData)({
-        state: instance
-      });
-    }).rejects.toEqual(new Error('riskMetadata is required for FetchSummaryData'));
-  });
-});