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

package/src/style/payment-instruments/payment-instrument-list.js

@@ -0,0 +1,44 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the payment instrument list component.
+// -----------------------------------------------------------------------------
+export const paymentInstrumentList = () => `
+  .rebilly-instruments-payment-instrument-list {
+    margin: 0;
+    padding: 0;
+  }
+
+  .rebilly-instruments-payment-instrument-list > li {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    list-style-type: none;
+    padding: var(--rebilly-spacings-xs) 0;
+  }
+
+  .rebilly-instruments-payment-instrument-list > li:first-child {
+    padding-top: 0;
+  }
+
+  .rebilly-instruments-payment-instrument-list > li:last-child {
+    padding-bottom: 0;
+  }
+
+  .rebilly-instruments-payment-instrument-list > li + li {
+    border-top: 1px solid var(--rebilly-colorMutedBorder);
+  }
+
+  .rebilly-instruments-payment-instrument-list.is-relaxed > li {
+    min-height: var(--rebilly-spacings-form-element-min-height);
+  }
+
+  .rebilly-instruments-payment-instrument-list .rebilly-instruments-form-field {
+    width: 100%;
+  }
+
+  .rebilly-instruments-payment-instrument-list > li .rebilly-instruments-payment-instrument-list-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+  }
+`;

package/src/style/payment-instruments/payment-instrument.js

@@ -0,0 +1,43 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the payment instrument component.
+// -----------------------------------------------------------------------------
+export const paymentInstrument = () => `
+  .rebilly-instruments-payment-instrument {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 26px;
+    margin: 0 0 var(--rebilly-spacings-l);
+  }
+
+  .rebilly-instruments-payment-instrument figure {
+    margin: 0 var(--rebilly-spacings-2xs) 0 0;
+    height: 26px;
+    padding: 0;
+  }
+
+  .rebilly-instruments-payment-instrument figure img {
+    width: auto;
+    height: 100%;
+    border-radius: 4px;
+  }
+
+  .rebilly-instruments-payment-instrument-brand,
+  .rebilly-instruments-payment-instrument-exp,
+  .rebilly-instruments-payment-instrument-last4 {
+    display: inline-block;
+    white-space: nowrap;
+  }
+
+  .rebilly-instruments-payment-instrument-brand {
+    margin: 0 0 0 var(--rebilly-spacings-s);
+  }
+
+  .rebilly-instruments-payment-instrument-last4 {
+    margin: 0 var(--rebilly-spacings-s);
+  }
+
+  .rebilly-instruments-payment-instrument-exp {
+    color: var(--rebilly-colorMutedText);
+  }
+`;

package/src/style/views/confirmation.js

@@ -23,55 +23,4 @@ export const confirmation = () => `
   .rebilly-instruments-confirmation-address-title .rebilly-instruments-link {
     margin-left: var(--rebilly-spacings-s);
   }
-
-  .rebilly-instruments-confirmation-address-actions {
-    margin-top: var(--rebilly-spacings-base);
-    display: flex;
-  }
-
-  .rebilly-instruments-confirmation-address-actions :first-child {
-    margin: 0 var(--rebilly-spacings-xs) 0 0;
-  }
-
-  .rebilly-instruments-confirmation-address-actions :last-child {
-    margin: 0 0 0 var(--rebilly-spacings-xs);
-  }
-
-  .rebilly-instruments-confirmation-payment-method {
-    display: inline-flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 26px;
-    margin: 0 0 var(--rebilly-spacings-l);
-  }
-
-  .rebilly-instruments-confirmation-payment-method figure {
-    margin: 0 var(--rebilly-spacings-2xs) 0 0;
-    height: 26px;
-    padding: 0;
-  }
-
-  .rebilly-instruments-confirmation-payment-method figure img {
-    width: auto;
-    height: 100%;
-    border-radius: 4px;
-  }
-
-  .rebilly-instruments-confirmation-payment-method-brand,
-  .rebilly-instruments-confirmation-payment-method-exp,
-  .rebilly-instruments-confirmation-payment-method-last4 {
-    display: inline-block;
-  }
-
-  .rebilly-instruments-confirmation-payment-method-brand {
-    margin: 0 0 0 var(--rebilly-spacings-s);
-  }
-
-  .rebilly-instruments-confirmation-payment-method-last4 {
-    margin: 0 var(--rebilly-spacings-s);
-  }
-
-  .rebilly-instruments-confirmation-payment-method-exp {
-    color: var(--rebilly-colorMutedText);
-  }
 `;

package/src/views/method-selector/express-methods/apple-pay.js

@@ -43,7 +43,9 @@ export default function mountApplePay({
     Rebilly.initialize({
       publishableKey: state.options.publishableKey,
       organizationId: state.options.organizationId,
-      digitalWallet
+      transactionData: digitalWallet.transactionData,
+      methods: state.data.readyToPay,
+      applePay: digitalWallet.applePayDisplayOptions,
     });
   } else {
     mountApplePayButton();
@@ -75,4 +77,4 @@ export default function mountApplePay({
   Rebilly.on('error', error => {
     console.error(error)
   });
-}
+}

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

@@ -33,8 +33,8 @@ function displayBrands({summary, method}) {
   }
 
   const {brands} = method;
-  summary.insertAdjacentHTML(
-    'beforeend',
+  summary.querySelector('.rebilly-instruments-accordion-title').insertAdjacentHTML(
+    'afterend',
     `<div class="rebilly-instruments-accordion-brands">${(() => {
       if (brands.length >= 4) {
         const truncatedBrands = brands.slice(0, 3);
@@ -61,15 +61,16 @@ 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,
     };
 
     if (isAccordion) {
@@ -77,9 +78,9 @@ export function MountMethods({
         '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>
+                <span class="rebilly-instruments-accordion-summary-checkmark"></span>
             </summary>
             <div id="${selector}" data-rebilly-instruments-type="${methodId}"></div>
         </details>`
@@ -91,23 +92,8 @@ export function MountMethods({
         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 (isiFrame) {
       METHODS_CONTAINER.insertAdjacentHTML(
         'beforeend',
         `<div id="${selector}" data-rebilly-instruments-type="${methodId}"></div>`
@@ -122,7 +108,7 @@ export function MountMethods({
         model,
         method
       });
-    } else {
+    } else if (isPopup) {
       METHODS_CONTAINER.insertAdjacentHTML(
         'beforeend',
         `<div id="${selector}" data-rebilly-instruments-type="${methodId}"></div>`
@@ -135,8 +121,8 @@ export function MountMethods({
           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,
@@ -145,8 +131,22 @@ 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) {
@@ -154,7 +154,7 @@ export function MountMethods({
     const details = document.querySelectorAll('.rebilly-instruments-accordion');
     // Add the onclick listeners.
     details.forEach((targetDetail) => {
-      targetDetail.addEventListener('click', () => {
+      targetDetail.querySelector('summary').addEventListener('click', () => {
         // Close all the accordion that are not targetDetail.
           details.forEach((detail) => {
             detail.removeAttribute('open');

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) => {