@rebilly/instruments 4.4.0 → 4.6.0

package/src/views/method-selector/index.js

@@ -13,18 +13,47 @@ import { updateSummary } from '../summary';
 import { mountAmountSelector } from '../amount-selector';
 
 function getElement(id, rootElement = state.form) {
-  return rootElement.querySelector(`[data-rebilly-instruments="${id}"]`);
+    return rootElement.querySelector(`[data-rebilly-instruments="${id}"]`);
 }
 
-const bumpOfferElement = () => {
-  const rootDiv = document.createElement('div');
-  rootDiv.classList.add('rebilly-instruments-bump-offers');
-  rootDiv.setAttribute('data-rebilly-instruments', 'bump-offer');
-  return rootDiv;
+const getBumpOfferElement = () => {
+    const rootDiv = document.createElement('div');
+    rootDiv.classList.add('rebilly-instruments-bump-offers');
+    rootDiv.setAttribute('data-rebilly-instruments', 'bump-offer');
+    return rootDiv;
+};
+
+export function hideExtraUI() {
+    const { expressMethods } = getPaymentMethods();
+
+    if (state.options?.deposit) {
+        const linkElement = getElement('deposit-back');
+        if (linkElement) {
+            linkElement.style.height = '0px';
+            linkElement.style.overflow = 'hidden';
+        }
+    }
+
+    if (expressMethods.length) {
+        const expressMethodsElement = getElement('express-methods');
+        if (expressMethodsElement) {
+            expressMethodsElement.style.height = '0px';
+            expressMethodsElement.style.overflow = 'hidden';
+        }
+    }
+
+    if (state.options?.bumpOffer?.length) {
+        const bumpOfferElement = getElement('bump-offer');
+        if (bumpOfferElement) {
+            bumpOfferElement.style.height = '0px';
+            bumpOfferElement.style.overflow = 'hidden';
+            bumpOfferElement.style.marginBottom = '0px';
+        }
+    }
 }
 
 const backToAmountElement = () => {
-  const template = `
+    const template = `
   <div class="rebilly-instruments-confirmation-go-back-link" style="display: inline-block;margin-bottom: var(--rebilly-spacingM);margin-left: calc(var(--rebilly-spacingXs) * -1);">
       <a
         class="rebilly-instruments-link has-icon-left"
@@ -45,27 +74,24 @@ const backToAmountElement = () => {
       </a>
     </div>
   `;
-  const rootDiv = document.createElement('div');
-  rootDiv.setAttribute('data-rebilly-instruments', 'deposit-back');
-  rootDiv.innerHTML += template;
-
-  const link = rootDiv.querySelector('.rebilly-instruments-link');
-  link.addEventListener('click', () => {
-    hideExtraUI();
-    mountAmountSelector();
-  });
-
-  return rootDiv;
-}
+    const rootDiv = document.createElement('div');
+    rootDiv.setAttribute('data-rebilly-instruments', 'deposit-back');
+    rootDiv.innerHTML += template;
+
+    const link = rootDiv.querySelector('.rebilly-instruments-link');
+    link.addEventListener('click', () => {
+        hideExtraUI();
+        mountAmountSelector();
+    });
 
+    return rootDiv;
+};
 
-const expressMethodsElement = ({
-  expressMethods,
-}) => {
-  const rootDiv = document.createElement('div');
-  rootDiv.classList.add('rebilly-instruments-method-selector');
-  rootDiv.setAttribute('data-rebilly-instruments', 'express-methods');
-  rootDiv.innerHTML = `
+const expressMethodsElement = ({ expressMethods }) => {
+    const rootDiv = document.createElement('div');
+    rootDiv.classList.add('rebilly-instruments-method-selector');
+    rootDiv.setAttribute('data-rebilly-instruments', 'express-methods');
+    rootDiv.innerHTML = `
   <div class="rebilly-instruments-express-methods ">
     <span data-rebilly-i18n="form.expressCheckout" class="rebilly-instruments-express-methods-label">Express checkout</span>
     <div class="rebilly-instruments-express-methods-container" data-rebilly-instruments="express-methods-container"></div>
@@ -74,135 +100,124 @@ const expressMethodsElement = ({
     <span class="rebilly-instruments-divider-label" data-rebilly-i18n="form.or">Or</span>
   </div>
   `;
-  const expressMethodsContainer = getElement('express-methods-container', rootDiv);
-  
-  const useCompactExpressInstruments = state.options.paymentInstruments.compactExpressInstruments && expressMethods.length;
-  if (useCompactExpressInstruments) {
-    rootDiv.classList.add('has-express-compact');
-    expressMethodsContainer.classList.add('is-compact')
-  }
-
-  return rootDiv;
-}
-
-export function hideExtraUI() {
-  const { expressMethods } = getPaymentMethods();
-
-  if (state.options?.deposit) {
-    const linkElement = getElement('deposit-back');
-    if (linkElement) {
-      linkElement.style.height = '0px';
-      linkElement.style.overflow = 'hidden';
+    const expressMethodsContainer = getElement(
+        'express-methods-container',
+        rootDiv,
+    );
+
+    const useCompactExpressInstruments =
+        state.options.paymentInstruments.compactExpressInstruments &&
+        expressMethods.length;
+    if (useCompactExpressInstruments) {
+        rootDiv.classList.add('has-express-compact');
+        expressMethodsContainer.classList.add('is-compact');
     }
-  }
 
-  if (expressMethods.length) {
-    const expressMethodsElement = getElement('express-methods');
-    if (expressMethodsElement) {
-      expressMethodsElement.style.height = '0px';
-      expressMethodsElement.style.overflow = 'hidden';
-    }
-  }
-
-  if (state.options?.bumpOffer?.length) {
-    const bumpOfferElement = getElement('bump-offer');
-    if (bumpOfferElement) {
-      bumpOfferElement.style.height = '0px';
-      bumpOfferElement.style.overflow = 'hidden';
-      bumpOfferElement.style.marginBottom = '0px';
-    }
-  }
-}
+    return rootDiv;
+};
 
 export async function mountMethodSelector() {
-  const contentEl = getElement('content');
-  const formEl = getElement('form');
-
-  const { expressMethods, methods } = getPaymentMethods();
-
-  if (state.options?.deposit) {
-    const existingDepositBackElement = getElement('deposit-back');
-    if (existingDepositBackElement) {
-      existingDepositBackElement.style.height = 'auto';
-    } else {
-      contentEl.insertBefore(backToAmountElement(), formEl);
+    const contentEl = getElement('content');
+    const formEl = getElement('form');
+
+    const { expressMethods, methods } = getPaymentMethods();
+
+    if (state.options?.deposit) {
+        const existingDepositBackElement = getElement('deposit-back');
+        if (existingDepositBackElement) {
+            existingDepositBackElement.style.height = 'auto';
+        } else {
+            contentEl.insertBefore(backToAmountElement(), formEl);
+        }
     }
-  }
 
-  if (expressMethods.length) {
-    const existingExpressMethodElement = getElement('express-methods');
-    if (existingExpressMethodElement) {
-      existingExpressMethodElement.style.height = 'auto';
-    } else {
-      contentEl.insertBefore(expressMethodsElement({expressMethods}), formEl);
-      state.options.digitalWallet = generateDigitalWallet({ expressMethods });
-      const container = document.querySelector('[data-rebilly-instruments="express-methods-container"]');
-      mountExpressMethods({
-        methods: expressMethods,
-        container,
-      });
+    if (expressMethods.length) {
+        const existingExpressMethodElement = getElement('express-methods');
+        if (existingExpressMethodElement) {
+            existingExpressMethodElement.style.height = 'auto';
+        } else {
+            contentEl.insertBefore(
+                expressMethodsElement({ expressMethods }),
+                formEl,
+            );
+            state.options.digitalWallet = generateDigitalWallet({
+                expressMethods,
+            });
+            const container = document.querySelector(
+                '[data-rebilly-instruments="express-methods-container"]',
+            );
+            mountExpressMethods({
+                methods: expressMethods,
+                container,
+            });
+        }
     }
-  }
 
-  if (state.options?.bumpOffer?.length) {
-    const existingExpressMethodElement = getElement('bump-offer');
-    if (existingExpressMethodElement) {
-      existingExpressMethodElement.style.height = 'auto';
-      existingExpressMethodElement.style.marginBottom = 'calc(var(--rebilly-spacingM) + var(--rebilly-fontSizeS))';
-    } else {
-      contentEl.insertBefore(bumpOfferElement(), formEl);
-      const container = getElement('bump-offer');
-      mountBumpOffer({
-        container,
-      });
+    if (state.options?.bumpOffer?.length) {
+        const existingExpressMethodElement = getElement('bump-offer');
+        if (existingExpressMethodElement) {
+            existingExpressMethodElement.style.height = 'auto';
+            existingExpressMethodElement.style.marginBottom =
+                'calc(var(--rebilly-spacingM) + var(--rebilly-fontSizeS))';
+        } else {
+            contentEl.insertBefore(getBumpOfferElement(), formEl);
+            const container = getElement('bump-offer');
+            mountBumpOffer({
+                container,
+            });
+        }
     }
-  }
 
-  if (methods.length) {
-    const iframe = iframes.form;
-    if (!iframe) {
-      await mountForm();
+    if (methods.length) {
+        const iframe = iframes.form;
+        if (!iframe) {
+            await mountForm();
+        }
+
+        const modelSafeState = state.toModel();
+        const model = {
+            options: modelSafeState.options,
+            data: modelSafeState.data,
+            mainStyleVars: modelSafeState.mainStyleVars,
+        };
+
+        iframe?.component?.call('route', {
+            name: 'method-switch',
+        });
+
+        iframe?.component?.call('update', model);
+
+        iframe?.component?.on('choose-another-method', () => {
+            if (state.data.isPurchase) {
+                updateSummary();
+            }
+            mountMethodSelector();
+        });
+    } else {
+        state.loader.stopLoading({ id: 'rebilly-instruments-form' });
+        state.form.querySelector(
+            '[data-rebilly-instruments="form"]',
+        ).style.display = 'none';
+        document
+            .querySelectorAll('[data-rebilly-instruments="divider"]')
+            .forEach((el) => {
+                el.style.display = 'none';
+            });
     }
 
-    const modelSafeState = state.toModel();
-    const model = {
-      options: modelSafeState.options,
-      data: modelSafeState.data,
-      mainStyleVars: modelSafeState.mainStyleVars,
-    };
-
-    iframe?.component?.call('route', {
-      name: 'method-switch'
-    });
-
-    iframe?.component?.call('update', model);
-
-    iframe?.component?.on('choose-another-method', () => {
-      if (state.data.isPurchase) {
-        updateSummary();
-      }
-      mountMethodSelector();
-    });
-
-  } else {
-    state.loader.stopLoading({id: 'rebilly-instruments-form'});
-    state.form.querySelector('[data-rebilly-instruments="form"]').style.display = 'none';
-    document.querySelectorAll('[data-rebilly-instruments="divider"]').forEach(el => { el.style.display = 'none' });
-  }
-
-  state.translate.translateItems();
+    state.translate.translateItems();
 }
 
 export async function updateMethodSelector() {
-  state.loader.startLoading({ id: 'rebilly-instruments-methods' });
+    state.loader.startLoading({ id: 'rebilly-instruments-methods' });
 
-  const { riskMetadata } = await collectData();
-  state.data = await fetchData({ riskMetadata });
-  state.updateModel();
+    const { riskMetadata } = await collectData();
+    state.data = await fetchData({ riskMetadata });
+    state.updateModel();
 
-  if (state.data.transaction && state.data.transaction?.type === 'setup') {
-    state.options.transactionType = 'setup';
-  }
+    if (state.data.transaction && state.data.transaction?.type === 'setup') {
+        state.options.transactionType = 'setup';
+    }
 
-  mountMethodSelector();
+    mountMethodSelector();
 }

package/src/views/method-selector/method-selector.spec.js

@@ -2,19 +2,19 @@ import { RenderMockRebillyInstruments } from 'tests/mocks/rebilly-instruments-mo
 import { updateMethodSelector } from './index';
 
 describe('Methods Selector Component', () => {
-  it ('should inject the proper HTML for express methods', async () => {
-    await RenderMockRebillyInstruments({
-      form: '.rebilly-instruments-form'
-    });
+    it('should inject the proper HTML for express methods', async () => {
+        await RenderMockRebillyInstruments({
+            form: '.rebilly-instruments-form',
+        });
 
-    const form = document.querySelector('.rebilly-instruments-form');
-    expect(form).toMatchSnapshot();
-  });
+        const form = document.querySelector('.rebilly-instruments-form');
+        expect(form).toMatchSnapshot();
+    });
 
-  it ('should allow updating method selector', async () => {
-    await RenderMockRebillyInstruments();
-    await updateMethodSelector({
-      mainStyleVars: 'any main style'
+    it('should allow updating method selector', async () => {
+        await RenderMockRebillyInstruments();
+        await updateMethodSelector({
+            mainStyleVars: 'any main style',
+        });
     });
-  });
-});
+});

package/src/views/method-selector/mount-bump-offer.js

@@ -1,79 +1,94 @@
 import state from '../../state';
 import formatCurrency from '../../utils/format-currency';
-import {fetchSummary} from '../../storefront/summary'
+import { fetchSummary } from '../../storefront/summary';
 
-function lineItem({offer}) {
-  const plan = state.data.plans.find(item => item.id === offer.planId);
-  const product = state.data.products.find(item => item.id === plan.productId);
+function lineItem({ offer }) {
+    const plan = state.data.plans.find((item) => item.id === offer.planId);
+    const product = state.data.products.find(
+        (item) => item.id === plan.productId,
+    );
 
-  const rif = (condition, template) => condition ? template : '';
+    const rif = (condition, template) => (condition ? template : '');
 
-  function unitPrice() {
-    const planPricing = plan.pricing.isBracket
-      ? plan.pricing.brackets[0].price
-      : plan.pricing.price;
+    function unitPrice() {
+        const planPricing = plan.pricing.isBracket
+            ? plan.pricing.brackets[0].price
+            : plan.pricing.price;
 
-    const basePrice = formatCurrency(planPricing, plan.currency);
-    return plan.pricing.isBracket
-      ? state.translate.getTranslation('form.bumpOffer.startingAt')
-        .replace('{basePrice}', basePrice)
-      : basePrice;
-  }
+        const basePrice = formatCurrency(planPricing, plan.currency);
+        return plan.pricing.isBracket
+            ? state.translate
+                  .getTranslation('form.bumpOffer.startingAt')
+                  .replace('{basePrice}', basePrice)
+            : basePrice;
+    }
 
-  const thumbnail = (item) => rif(item.thumbnail, `
+    const thumbnail = (item) =>
+        rif(
+            item.thumbnail,
+            `
     <figure class="rebilly-instruments-bump-offer-line-item-figure">
       <img src="${item.thumbnail}" :alt="${item.name}"/>
     </figure>
-  `);
+  `,
+        );
 
-  const synopsis = (item) => `
+    const synopsis = (item) => `
     <div class="rebilly-instruments-bump-offer-line-item-synopsis">
       <p class="rebilly-instruments-bump-offer-line-item-synopsis-title">
         ${item.name}
       </p>
-      ${rif(item.description, `
+      ${rif(
+          item.description,
+          `
         <p class="rebilly-instruments-bump-offer-line-item-synopsis-description">
           ${item.description}
         </p>
-      `)}
+      `,
+      )}
     </div>
   `;
 
-  const breakdown = (item) => `
+    const breakdown = (item) => `
     <div class="rebilly-instruments-bump-offer-line-item-price-breakdown">
-      ${rif(item.quantity, `
+      ${rif(
+          item.quantity,
+          `
         <p class="rebilly-instruments-bump-offer-line-item-price-breakdown-quantity">
           ${item.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-bump-offer-line-item-price-breakdown-unit-price">
         ${item.unitPrice}
       </p>
     <div>
   `;
 
-  const line = {
-    ...offer,
-    quantity: plan.pricing.isBracket ? null : offer.quantity,
-    name: product.name,
-    description: plan.name,
-    unitPrice: unitPrice(),
-  }
+    const line = {
+        ...offer,
+        quantity: plan.pricing.isBracket ? null : offer.quantity,
+        name: product.name,
+        description: plan.name,
+        unitPrice: unitPrice(),
+    };
 
-  return `
+    return `
     <div class="rebilly-instruments-bump-offer-line-item">
       ${thumbnail(line)}
       ${synopsis(line)}
       ${breakdown(line)}
     </div>
-  `
+  `;
 }
 
-export function mountBumpOffer ({container}) {
-  container.insertAdjacentHTML('beforeEnd', `
+export function mountBumpOffer({ container }) {
+    container.insertAdjacentHTML(
+        'beforeEnd',
+        `
     <label for="rebilly-instruments-bump-offer" class="rebilly-instruments-form-field-checkbox">
       <div class="rebilly-instruments-bump-offer-label" data-rebilly-i18n="form.bumpOffer.title">
         ${state.translate.getTranslation('form.bumpOffer.title')}
@@ -84,21 +99,22 @@ export function mountBumpOffer ({container}) {
       />
       <span></span>
     </label>
-  `);
+  `,
+    );
 
-  const checkbox = document.getElementById('rebilly-instruments-bump-offer')
-  checkbox.addEventListener('click', async () => {
-    state.data.acceptBumpOffer = checkbox.checked;
-    await fetchSummary();
-    state.updateModel();
-  });
+    const checkbox = document.getElementById('rebilly-instruments-bump-offer');
+    checkbox.addEventListener('click', async () => {
+        state.data.acceptBumpOffer = checkbox.checked;
+        await fetchSummary();
+        state.updateModel();
+    });
 
-  checkbox.checked = state.data.acceptBumpOffer;
+    checkbox.checked = state.data.acceptBumpOffer;
 
-  state.options.bumpOffer.forEach(offer => {
-    const node = document.createElement('div');
-    node.classList.add('rebilly-instruments-bump-offer');
-    node.insertAdjacentHTML('beforeEnd', lineItem({offer}));
-    container.appendChild(node);
-  });
-}
+    state.options.bumpOffer.forEach((offer) => {
+        const node = document.createElement('div');
+        node.classList.add('rebilly-instruments-bump-offer');
+        node.insertAdjacentHTML('beforeEnd', lineItem({ offer }));
+        container.appendChild(node);
+    });
+}