@rebilly/instruments 3.2.0-beta.0 → 3.3.2-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.insertAdjacentHTML(
+    'beforeend',
+    `<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,9 +61,9 @@ 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,
@@ -26,33 +72,56 @@ export function MountMethods({
       method
     };
 
-    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">
+                <span class="rebilly-instruments-accordion-summary-radio"></span>
+                <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>
+            </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 });
+
+      METHODS_CONTAINER.insertAdjacentHTML(
+        'beforeend',
+        `<div id="${selector}" data-rebilly-instruments-type="${methodId}"></div>`
+      );
+      const container = document.querySelector(`#${selector}`);
 
-    if (isiFrame) {
-      const iframe = await new MethodIframe({
-        name: methodId,
-        url: `${paymentMethodsUrl}/${methodId}`,
+      state.loader.stopLoading({ id: method.method });
+      mountInline(state, {
+        methodId,
+        paymentMethodsUrl,
         container,
-        model
-      });
-      iframe.bindEventListeners({
-        loader: state.loader,
-        id: method.method
+        model,
+        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 +130,40 @@ export function MountMethods({
         });
         state.iframeComponents.push(iframe);
       });
+    } else {
+      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
+      });
     }
   });
+
+  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/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);
 };