@rebilly/instruments 3.2.1-beta.0 → 3.4.0-beta.0

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

@@ -3,11 +3,57 @@ 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);
@@ -15,44 +61,68 @@ export function MountMethods({
       state.options._computed || 'https://www.example.com';
 
     const selector = `rebilly-instruments-${methodId}`;
-    const isiFrame =
-      methodId === 'payment-card' &&
-      !state.options.paymentInstruments[methodType]?.popup;
+    const isPopup = [
+        'payment-card'
+      ].includes(methodId) && state.options.paymentInstruments[methodType]?.popup;
     const model = {
       options: state.options,
       mainStyle: state.mainStyle,
       plans: state.data.plans,
       products: state.data.products,
-      method
+      method,
+      readyToPay: state.data.readyToPay,
     };
 
-    METHODS_CONTAINER.insertAdjacentHTML(
-      'beforeend',
-      `<div id="${selector}" data-rebilly-instruments-type="${methodId}"></div>`
-    );
-    const container = document.querySelector(`#${selector}`);
+    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}"></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 });
 
-    if (isiFrame) {
-      const iframe = await new MethodIframe({
-        name: methodId,
-        url: `${paymentMethodsUrl}/${methodId}`,
+      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
+        model,
+        method
       });
-      iframe.bindEventListeners({
-        loader: state.loader,
-        id: method.method
-      });
-      state.iframeComponents.push(iframe);
-    } else {
+    } 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 paymentCardButton = document.querySelector(`.${selector}`);
-      paymentCardButton.addEventListener('click', async () => {
+      const button = document.querySelector(`.${selector}`);
+      button.addEventListener('click', async () => {
         const iframe = await mountModal({
           state,
           name: methodId,
@@ -61,7 +131,40 @@ export function MountMethods({
         });
         state.iframeComponents.push(iframe);
       });
-      state.loader.stopLoading({ id: method.method });
+    } 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) => {
+      targetDetail.addEventListener('click', () => {
+        // Close all the accordion that are not targetDetail.
+          details.forEach((detail) => {
+            detail.removeAttribute('open');
+          });
+      });
+    });
+
+    // Open the first accordion by default
+    details[0].open = true;
+  }
+
+  state.translate.translateItems();
 }

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

@@ -0,0 +1,9 @@
+import { ok, get } from 'msw-when-then';
+
+export const rebillyURL = '*';
+
+export const initRebillyApiMocks = (when) => {
+  when(get(`${rebillyURL}/payment-methods`)).thenReturn((() => {
+    return ok([])
+  })());
+};

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

@@ -8,7 +8,18 @@ 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';
+import { DataInstance } from 'src/functions/mount/fetch-data';
+import { sleep } from 'src/utils';
+import setupFramepay from 'src/functions/mount/setup-framepay';
+
+export const setupFramepayMock = async () => {
+  /*
+   * onload() is never called in JSDOM context but we want to test the rest of the setupFramepay code,
+   * so we run it asynchonously and wait for 10 ms
+   */
+  setupFramepay()
+  await sleep(10);
+}
 
 export async function RenderMockRebillyInstruments(options = {}) {
   const testInvoice = new InvoiceModel({
@@ -34,14 +45,11 @@ export async function RenderMockRebillyInstruments(options = {}) {
   const framePayStyleUrl = 'https://dev.framepay.rebilly.com/rebilly.css';
 
   when(get(`${storefrontURL}/invoices/*`)).thenReturn(
-    (() => {
-      return ok(testInvoice);
-    })()
+    (() => ok(testInvoice))()
   );
 
   when(post(`${storefrontURL}/ready-to-pay`)).thenReturn(
-    (() => {
-      return ok([
+    (() => ok([
         {
           method: 'payment-card',
           feature: {
@@ -52,26 +60,19 @@ export async function RenderMockRebillyInstruments(options = {}) {
           brands: ['Visa', 'MasterCard', 'American Express', 'Discover'],
           filters: []
         }
-      ]);
-    })()
+      ]))()
   );
 
   when(post(`${storefrontURL}/preview-purchase`)).thenReturn(
-    (() => {
-      return ok(testSummary);
-    })()
+    (() => ok(testSummary))()
   );
 
   when(get(`${storefrontURL}/plans`)).thenReturn(
-    (() => {
-      return ok([testPlan]);
-    })()
+    (() => ok([testPlan]))()
   );
 
   when(get(`${storefrontURL}/products`)).thenReturn(
-    (() => {
-      return ok([testProduct]);
-    })()
+    (() => ok([testProduct]))()
   );
 
   const defaultOptions = {
@@ -111,7 +112,10 @@ export async function RenderMockRebillyInstruments(options = {}) {
     <div class="${mergedOptions.summary.replace('.', '')}"></div>
   `;
 
-  await rebillyInstruments.mount(mergedOptions);
+  await rebillyInstruments.mount({
+        setupFramepay: setupFramepayMock,
+        ...mergedOptions,
+    });
 
   rebillyInstruments.mock = {
     data: (data) => {

package/tests/msw/server.js

@@ -3,6 +3,7 @@ import {rest} from 'msw';
 import {whenThen} from 'msw-when-then';
 import {handlers} from './handlers';
 import {initStoreFrontApiMocks} from '../mocks/storefront-api-mock';
+import {initRebillyApiMocks} from '../mocks/rebilly-api-mock';
 
 export const server = setupServer(...handlers);
 
@@ -10,4 +11,5 @@ export const {when} = whenThen(server, rest);
 
 export const initGlobalHandlers = () => {
     initStoreFrontApiMocks(when);
+    initRebillyApiMocks(when);
 };