@rebilly/instruments 3.1.4-beta.0 → 3.3.0-beta.0

package/src/style/components/index.js

@@ -12,6 +12,7 @@ import { loader } from './loader';
 import { icons } from './icons';
 import { address } from './address';
 import { overlay } from './overlay';
+import {accordion} from './accordion';
 
 // Order of components matters for style cascade
 export const components = (theme) => `
@@ -32,4 +33,5 @@ export const components = (theme) => `
   ${icons(theme)}
   ${address(theme)}
   ${overlay(theme)}
+  ${accordion(theme)}
 `;

package/src/views/method-selector/generate-digital-wallet.js

@@ -45,7 +45,7 @@ export function generateDigitalWallet({ state, EXPRESS_METHODS }) {
         applePayDisplayOptions: paymentInstruments.applePay.displayOptions
       }
     }
-  })
+  });
 
   return output;
 }

package/src/views/method-selector/get-payment-methods.js

@@ -3,7 +3,7 @@ import { getMethodData } from './get-method-data';
 
 const SUPPORTED_EXPRESS_METHODS = ['Google Pay', 'Apple Pay', 'paypal'];
 
-const SUPPORTED_METHODS = ['payment-card'];
+const SUPPORTED_METHODS = ['payment-card', 'ach'];
 
 const isExpressMethod = ({ method, feature }) => {
   return (
@@ -23,7 +23,7 @@ export function getPaymentMethods({ state }) {
     METHODS: []
   };
 
-  state.data.readyToPay.forEach((method) => {
+  state.data.readyToPay?.forEach((method) => {
     if (isExpressMethod(method)) {
       const { METHOD_TYPE } = getMethodData(method);
       // Add loader entry per express method

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);
@@ -26,25 +72,63 @@ 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});
+      }
 
-    if (isiFrame) {
-      const iframe = await new MethodIframe({
-        name: methodId,
-        url: `${paymentMethodsUrl}/${methodId}`,
+      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
+        model,
+        method
       });
-      iframe.bindEventListeners({
-        loader: state.loader,
-        id: method.method
+    } else if (isiFrame) {
+      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
       });
-      state.iframeComponents.push(iframe);
     } else {
+      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.${
@@ -64,4 +148,23 @@ export function MountMethods({
       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

@@ -87,7 +87,8 @@ export async function RenderMockRebillyInstruments(options = {}) {
     'items',
     'invoiceId',
     'transactionId',
-    'money'
+    'money',
+    'jwt'
   ].some(key => Object.keys(options).includes(key))
   if(!hasPurchaseData) {
     defaultOptions.items = [

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);
 };