@rebilly/instruments 3.13.4-beta.0 → 3.14.3-beta.0

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

@@ -1,25 +0,0 @@
-import { MethodIframe } from '../../common/iframe';
-
-export default async function mountExpressMethod({ state, METHOD_ID }) {
-  const container = document.querySelector(`.rebilly-instruments-${METHOD_ID}-method`);
-
-  const { paymentMethodsUrl } = state.options._computed;
-
-  const model = {
-    options: state.options,
-    data: state.data.toPostmatesModel()
-  };
-
-  const iframe = await new MethodIframe({
-    name: METHOD_ID,
-    url: `${paymentMethodsUrl}/${METHOD_ID}`,
-    container,
-    model
-  });
-
-  iframe.bindEventListeners({
-    loader: state.loader
-  });
-
-  state.iframeComponents.push(iframe);
-}

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

@@ -1,178 +0,0 @@
-import camelCase from 'lodash.camelcase';
-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);
-    const { paymentMethodsUrl } =
-      state.options._computed || 'https://www.example.com';
-
-    const selector = `rebilly-instruments-${methodId}`;
-    const isPopup = [
-        'payment-card'
-      ].includes(methodId) && state.options.paymentInstruments[methodType]?.popup;
-    const model = {
-      account: state.data?.account,
-      options: state.options,
-      mainStyle: state.mainStyle,
-      plans: state.data.plans,
-      products: state.data.products,
-      method,
-      readyToPay: state.data.readyToPay,
-    };
-
-    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}" style="position: relative"></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}`);
-
-      state.loader.stopLoading({ id: method.method });
-      mountInline(state, {
-        methodId,
-        paymentMethodsUrl,
-        container,
-        model,
-        method
-      });
-    } 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 button = document.querySelector(`.${selector}`);
-      button.addEventListener('click', async () => {
-        const iframe = await mountModal({
-          state,
-          name: methodId,
-          url: `${paymentMethodsUrl}/${methodId}`,
-          model
-        });
-        state.iframeComponents.push(iframe);
-      });
-    } 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) => {
-      // set to open by default, will be closed by timeout below
-      targetDetail.open = true;
-      targetDetail.querySelector('summary').addEventListener('click', () => {
-        // Close all the accordion that are not targetDetail.
-          details.forEach((detail) => {
-            detail.removeAttribute('open');
-          });
-      });
-    });
-
-    // All details must be open to connect to Postmate than closed
-    setTimeout(() => {
-      details.forEach((detail) => {
-        detail.removeAttribute('open');
-      });
-      details[0].open = true;
-    }, 100);
-  }
-
-  state.translate.translateItems();
-}

package/src/views/summary.spec.js

@@ -1,145 +0,0 @@
-import SummaryModel from '@/storefront/models/summary-model';
-import PlanModel from '@/storefront/models/plan-model';
-import ProductModel from '@/storefront/models/product-model';
-import { Loader } from '../loader';
-import { Translate } from '../i18n';
-import { mountSummary } from './summary';
-import { DataInstance } from '../functions/mount/fetch-data';
-
-describe('Summary component', () => {
-  let summaryElement;
-  beforeEach(() => {
-    document.body.innerHTML = '';
-    summaryElement = document.createElement('div');
-    document.body.append(summaryElement);
-  });
-
-  class TestMountSummaryInstance {
-    constructor({
-      options = {},
-      summary = summaryElement,
-      loader = new Loader(),
-      translate = new Translate(),
-      data = {},
-    } = {}) {
-      this.options = options;
-      this.summary = summary;
-      this.loader = loader;
-      this.translate = translate;
-      this.data = new DataInstance({
-        state: {options},
-        previewPurchase: new SummaryModel({
-          currency: 'USD',
-          lineItems: [
-            {
-              type: 'debit',
-              description: 'My Awesome Product',
-              unitPrice: 30,
-              quantity: 1,
-              price: 30,
-              productId: 'test-product-1',
-              planId: 'my-awesome-product'
-            },
-            {
-              type: 'debit',
-              description: 'Awesome T-Shirt',
-              unitPrice: 20,
-              quantity: 2,
-              price: 40,
-              productId: 'test-product-2',
-              planId: 'awesome-t-shirt'
-            }
-          ],
-          subtotalAmount: 70,
-          taxAmount: 0,
-          shippingAmount: 0,
-          discountsAmount: 0,
-          total: 70
-        }),
-        plans: [
-          new PlanModel({
-            name: 'My Awesome Product',
-            id: 'my-awesome-product',
-            productId: 'test-product-1'
-          }),
-          new PlanModel({
-            name: 'My Awesome T-Shirt',
-            id: 'awesome-t-shirt',
-            productId: 'test-product-2'
-          })
-        ],
-        products: [
-          new ProductModel({
-            name: 'My Awesome Product',
-            id: 'test-product-1'
-          }),
-          new ProductModel({
-            name: 'My Awesome T-Shirt',
-            id: 'test-product-2'
-          })
-        ],
-        ...data
-      });
-    }
-  }
-
-  const options = {
-    websiteId: 'test-website-id',
-    countryCode: 'US',
-    items: [
-      {
-        planId: 'my-awesome-product',
-        quantity: 1,
-        thumbnail: ''
-      },
-      {
-        planId: 'awesome-t-shirt',
-        quantity: 2,
-        thumbnail: ''
-      }
-    ]
-  };
-
-  it('should render the summary correctly', () => {
-    const mountSummaryInstance = new TestMountSummaryInstance({
-      options
-    });
-
-    //TODO: improve design to avoid this manual change
-    mountSummaryInstance.loader.DOM.summary = mountSummaryInstance.summary;
-
-    mountSummary({ state: mountSummaryInstance });
-
-    // Number of line items
-    const itemsContainer = document.querySelector(
-      '.rebilly-instruments-summary-line-items'
-    );
-    expect(itemsContainer).toMatchSnapshot();
-
-    // Breakdown
-    const summaryBreakdown = document.querySelector(
-      '.rebilly-instruments-summary-breakdown'
-    );
-    expect(summaryBreakdown).toMatchSnapshot();
-  });
-
-  it('should not render the plan description if its falsy', () => {
-    const mountSummaryInstance = new TestMountSummaryInstance({
-      options
-    });
-
-    // Making one product description falsy
-    mountSummaryInstance.data.previewPurchase.lineItems[0].description = null;
-
-    //TODO: improve design to avoid this manual change
-    mountSummaryInstance.loader.DOM.summary = mountSummaryInstance.summary;
-
-    mountSummary({ state: mountSummaryInstance });
-
-    // Check that only one description is render
-    const itemsSynopsysDescription = document.querySelectorAll(
-      '.rebilly-instruments-summary-line-item-synopsis-description'
-    );
-    expect(itemsSynopsysDescription.length).toEqual(1);
-  });
-});