@rebilly/instruments 3.13.2-beta.0 → 3.13.4-beta.0

package/src/views/method-selector/mount-methods.js

@@ -0,0 +1,178 @@
+import camelCase from 'lodash.camelcase';
+import { mountModal } from '../modal';
+import { MethodIframe } from '../common/iframe';
+import { getMethodData } from './get-method-data';
+
+async function mountInline(state, {
+  methodId,
+  paymentMethodsUrl,
+  container,
+  model,
+  method
+}) {
+  const iframe = await new MethodIframe({
+    name: methodId,
+    url: `${paymentMethodsUrl}/${methodId}`,
+    container,
+    model
+  });
+  iframe.bindEventListeners({
+    loader: state.loader,
+    id: method.method
+  });
+  state.iframeComponents.push(iframe);
+}
+
+function displayBrands({summary, method}) {
+  function renderBrand(brand) {
+    return `
+      <figure>
+        <img alt="${brand}" src="https://forms.secure-payments.app/payment-instruments/brand/${brand.replace(/\s/, '')}.svg" />
+      </figure>
+    `;
+  }
+
+  const {brands} = method;
+  summary.querySelector('.rebilly-instruments-accordion-title').insertAdjacentHTML(
+    'afterend',
+    `<div class="rebilly-instruments-accordion-brands">${(() => {
+      if (brands.length >= 4) {
+        const truncatedBrands = brands.slice(0, 3);
+        return `${truncatedBrands.map(brand => renderBrand(brand)).join('')}
+          <span data-rebilly-i18n="forms.andMore">and more</span>
+        `
+      }
+      return brands.map(brand => renderBrand(brand)).join('');
+    })()}</div>`
+  );
+}
+
+export function MountMethods({
+  state,
+  METHODS_CONTAINER,
+  METHODS
+}) {
+  const isAccordion = METHODS.length > 1;
+
+  METHODS.forEach(async (method) => {
+    const { METHOD_ID: methodId, METHOD_TYPE: methodType } =
+      getMethodData(method);
+    const { paymentMethodsUrl } =
+      state.options._computed || 'https://www.example.com';
+
+    const selector = `rebilly-instruments-${methodId}`;
+    const isPopup = [
+        'payment-card'
+      ].includes(methodId) && state.options.paymentInstruments[methodType]?.popup;
+    const model = {
+      account: state.data?.account,
+      options: state.options,
+      mainStyle: state.mainStyle,
+      plans: state.data.plans,
+      products: state.data.products,
+      method,
+      readyToPay: state.data.readyToPay,
+    };
+
+    if (isAccordion) {
+      METHODS_CONTAINER.insertAdjacentHTML(
+        'beforeend',
+        `<details class="rebilly-instruments-accordion for-${methodId}">
+            <summary class="rebilly-instruments-accordion-summary">
+                <img class="rebilly-instruments-accordion-${method.method}-img" src="${method.metadata.logo}" alt="${method.method}"/>
+                <span class="rebilly-instruments-accordion-title" data-rebilly-i18n="paymentMethods.${method.method}">${method.metadata.name}</span>
+                <span class="rebilly-instruments-accordion-summary-checkmark"></span>
+            </summary>
+            <div id="${selector}" data-rebilly-instruments-type="${methodId}" style="position: relative"></div>
+        </details>`
+      );
+
+      if ([
+        'payment-card'
+      ].includes(method.method)) {
+        const summary = document.querySelector(`.for-${methodId} > .rebilly-instruments-accordion-summary`);
+        displayBrands({summary, method});
+      }
+      state.loader.stopLoading({ id: method.method });
+
+      METHODS_CONTAINER.insertAdjacentHTML(
+        'beforeend',
+        `<div id="${selector}" data-rebilly-instruments-type="${methodId}"></div>`
+      );
+      const container = document.querySelector(`#${selector}`);
+
+      state.loader.stopLoading({ id: method.method });
+      mountInline(state, {
+        methodId,
+        paymentMethodsUrl,
+        container,
+        model,
+        method
+      });
+    } else if (isPopup) {
+      METHODS_CONTAINER.insertAdjacentHTML(
+        'beforeend',
+        `<div id="${selector}" data-rebilly-instruments-type="${methodId}"></div>`
+      );
+      const container = document.querySelector(`#${selector}`);
+
+      container.insertAdjacentHTML(
+        'beforeend',
+        `<button class="${selector} rebilly-instruments-button" data-rebilly-i18n="paymentMethods.${
+          method.method
+        }">${camelCase(method.method)}</button>`
+      );
+      const button = document.querySelector(`.${selector}`);
+      button.addEventListener('click', async () => {
+        const iframe = await mountModal({
+          state,
+          name: methodId,
+          url: `${paymentMethodsUrl}/${methodId}`,
+          model
+        });
+        state.iframeComponents.push(iframe);
+      });
+    } else {
+      METHODS_CONTAINER.insertAdjacentHTML(
+        'beforeend',
+        `<div id="${selector}" data-rebilly-instruments-type="${methodId}"></div>`
+      );
+      const container = document.querySelector(`#${selector}`);
+
+      mountInline(state, {
+        methodId,
+        paymentMethodsUrl,
+        container,
+        model,
+        method
+      });
+    }
+    state.loader.stopLoading({ id: method.method });
+  });
+
+  if (isAccordion) {
+    // Fetch all the accordion elements.
+    const details = document.querySelectorAll('.rebilly-instruments-accordion');
+    // Add the onclick listeners.
+    details.forEach((targetDetail) => {
+      // set to open by default, will be closed by timeout below
+      targetDetail.open = true;
+      targetDetail.querySelector('summary').addEventListener('click', () => {
+        // Close all the accordion that are not targetDetail.
+          details.forEach((detail) => {
+            detail.removeAttribute('open');
+          });
+      });
+    });
+
+    // All details must be open to connect to Postmate than closed
+    setTimeout(() => {
+      details.forEach((detail) => {
+        detail.removeAttribute('open');
+      });
+      details[0].open = true;
+    }, 100);
+  }
+
+  state.translate.translateItems();
+}

package/src/views/modal.js

@@ -46,7 +46,7 @@ export async function mountModal({
     modalContainer.classList.add('is-visible');
   }, 240);
   state.loader.addDOMElement({ section: 'modal', el: modalContent });
-  state.loader.startLoading({ section: 'modal', id: name });
+  state.loader.startLoading({ section: 'modal', id: 'modal-content' });
 
   const injectedModel = {
     options: state.options,

package/src/views/result.js

@@ -5,7 +5,7 @@ export async function mountResult({ payload, state }) {
   const resultContainerClassName = 'rebilly-instruments-result';
   replaceContent(state.form, `<div class="${resultContainerClassName}"></div>`);
 
-  state.loader.startLoading({ id: 'rebilly-instruments-result' });
+  state.loader.startLoading({ id: 'result' });
   state.loader.stopLoading({ id: 'express-purchase' });
 
   const container = document.querySelector(`.${resultContainerClassName}`);
@@ -13,7 +13,7 @@ export async function mountResult({ payload, state }) {
 
   const model = {
     options: state.options,
-    mainStyleVars: state.mainStyleVars,
+    mainStyle: state.mainStyle,
     [state.options.transactionType]: payload
   };
 
@@ -27,5 +27,5 @@ export async function mountResult({ payload, state }) {
     loader: state.loader
   });
 
-  state.iframeComponents.form.push(iframe);
+  state.iframeComponents.push(iframe);
 }

package/src/views/summary.js

@@ -1,34 +1,200 @@
-import { ViewIframe } from './common/iframe';
-import { fetchSummary } from '../storefront/summary';
+import { collectData } from '@rebilly/risk-data-collector';
+import { formatCurrency } from '../utils';
+import { fetchData } from '../functions/mount/fetch-data';
 
-export async function mountSummary({ state }) {
-  const model = {
-    options: state.options,
-    data: state.data.toPostmatesModel(),
-    mainStyleVars: state.mainStyleVars,
+export function lineItemHTML({state, lineItem}) {
+  const {products} = state.data;
+  const {
+    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>
+    </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
   };
-  const { paymentMethodsUrl } = state.options._computed;
 
-  const iframe = await new ViewIframe({
-    name: 'rebilly-instruments-summary',
-    url: `${paymentMethodsUrl}/summary`,
-    container: state.summary,
-    model
+  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);
+    }
   });
-  iframe.bindEventListeners({loader: state.loader});
-  state.iframeComponents.summary.push(iframe);
+  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 updateSummary({ state, instrument }) {
-  await fetchSummary({data: instrument, state});
-  const updateModel = {
-    data: state.data.toPostmatesModel(),
-    options: state.options
-  }
-  Object.values(state.iframeComponents).forEach(components => {
-    components.forEach(frame => {
-      frame.component.call('update', updateModel);
+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' });
+}
+
+export async function updateSummary({ state, instrument = null }) {
+  state.loader.startLoading({ section: 'summary', id: 'initSummary' });
+  const { riskMetadata } = await collectData();
+
+  let summaryPayload;
+
+  if (instrument?.billingAddress) {
+    summaryPayload = {
+      billingAddress: instrument.billingAddress
+    };
+  }
+
+  state.data = await fetchData({
+    riskMetadata,
+    summaryPayload,
+    state
   });
+
+  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 });
 }
 

package/src/views/summary.spec.js

@@ -0,0 +1,145 @@
+import SummaryModel from '@/storefront/models/summary-model';
+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 { DataInstance } from '../functions/mount/fetch-data';
+
+describe('Summary component', () => {
+  let summaryElement;
+  beforeEach(() => {
+    document.body.innerHTML = '';
+    summaryElement = document.createElement('div');
+    document.body.append(summaryElement);
+  });
+
+  class TestMountSummaryInstance {
+    constructor({
+      options = {},
+      summary = summaryElement,
+      loader = new Loader(),
+      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
+      });
+    }
+  }
+
+  const options = {
+    websiteId: 'test-website-id',
+    countryCode: 'US',
+    items: [
+      {
+        planId: 'my-awesome-product',
+        quantity: 1,
+        thumbnail: ''
+      },
+      {
+        planId: 'awesome-t-shirt',
+        quantity: 2,
+        thumbnail: ''
+      }
+    ]
+  };
+
+  it('should render the summary correctly', () => {
+    const mountSummaryInstance = new TestMountSummaryInstance({
+      options
+    });
+
+    //TODO: improve design to avoid this manual change
+    mountSummaryInstance.loader.DOM.summary = mountSummaryInstance.summary;
+
+    mountSummary({ state: mountSummaryInstance });
+
+    // Number of line items
+    const itemsContainer = document.querySelector(
+      '.rebilly-instruments-summary-line-items'
+    );
+    expect(itemsContainer).toMatchSnapshot();
+
+    // 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({
+      options
+    });
+
+    // Making one product description falsy
+    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'
+    );
+    expect(itemsSynopsysDescription.length).toEqual(1);
+  });
+});

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

@@ -3,52 +3,31 @@ import {ok, get, post} from 'msw-when-then';
 export const storefrontURL = '*/storefront';
 
 export const initStoreFrontApiMocks = (when) => {
-  const mocks = [
-    /* GET */
-    {
-      url: '/account',
-      method: get,
-      response: () => ok({})
-    }, {
-      url: '/plans',
-      method: get,
-      response: () => ok([])
-    }, {
-      url: '/products',
-      method: get,
-      response: () => ok([])
-    }, {
-      url: '/payment-instruments',
-      method: get,
-      response: () => ok([])
-    }, {
-      url: '/transactions/test-transaction-id',
-      method: get,
-      response: () => ok({})
-    },
-
-    /* POST */
-    {
-      url: '/ready-to-pay',
-      method: post,
-      response: () => ok([])
-    }, {
-      url: '/preview-purchase',
-      method: post,
-      response: () => ok({})
-    }, {
-      url: '/payment-instruments',
-      method: post,
-      response: () => ok([])
-    }, {
-      url: '/payment-instruments/*/setup',
-      method: post,
-      response: () => ok([])
-    }
-  ];
-
-  mocks.forEach(api => {
-    const http = api.method(`${storefrontURL}${api.url}`)
-    when(http).thenReturn(api.response());
-  });
+  when(post(`${storefrontURL}/ready-to-pay`)).thenReturn((() => {
+    return ok([]);
+  })());
+
+  when(post(`${storefrontURL}/preview-purchase`)).thenReturn((() => {
+    return ok({});
+  })());
+
+  when(get(`${storefrontURL}/plans`)).thenReturn((() => {
+    return ok([]);
+  })());
+
+  when(get(`${storefrontURL}/products`)).thenReturn((() => {
+    return ok([]);
+  })());
+
+  when(post(`${storefrontURL}/payment-instruments`)).thenReturn((() => {
+    return ok([]);
+  })());
+
+  when(post(`${storefrontURL}/payment-instruments/*/setup`)).thenReturn((() => {
+    return ok([]);
+  })());
+
+  when(get(`${storefrontURL}/transactions/test-transaction-id`)).thenReturn((() => {
+    return ok({});
+  })());
 };

package/src/style/utils/minifyCss.js

@@ -1,14 +0,0 @@
-export function minifyCss(_content) {
-    let content = _content;
-    // Remove all comments and new lines
-    content = content.replace( /\/\*(?:(?!\*\/)[\s\S])*\*\/|[\r\n\t]+/g, '' );
-    // Remove spaces between selectors
-    content = content.replace( /\s{2,}/g, ' ' );
-    // Remove spaces of nested { }
-    content = content.replace( /\s([{:}])\s/g, '$1' );
-    // Remove spaces between , and ;
-    content = content.replace( /([;,])\s/g, '$1' );
-    // Remove important! spaces
-    content = content.replace( /\s!/g, '!' );
-    return content;
-}