@rebilly/instruments 1.0.2-beta.1 → 1.0.2-beta.10

package/src/components/form/process-digital-wallet-options.js

@@ -1,11 +0,0 @@
-export function processDigitalWalletOptions(options) {
-    const {paymentInstruments} = options;
-    const digitalWalletOptions = {};
-
-    if (paymentInstruments?.googlePay) {
-      const {googlePay} = paymentInstruments;
-      digitalWalletOptions.merchantConfig = googlePay.merchantConfig; // Throw error?
-      digitalWalletOptions.googlePayDisplayOptions = googlePay.displayOptions;
-    }
-    return digitalWalletOptions;
-  }

package/src/components/form/zoid-helpers.js

@@ -1,117 +0,0 @@
-import zoid from 'zoid';
-import Events from '../../events';
-import {
-  camelCase,
-  unKebabCase
-} from '../../utils/index';
-
-export const dispatch = (event, detail) => {
-  Events[camelCase(event).replace(/-/, '')].dispatch(detail);
-}
-
-export function containerTemplate({ doc, uid, focus }) {
-  if (doc === null || doc === undefined) {
-    doc = document;
-  }
-
-  const container = doc.createElement('div');
-  const text = doc.createElement('p');
-
-  text.dataset.rebillyI18n = 'form.popupOverlayText';
-  text.innerText = this.translate?.translateItem(text) || 'Click here to show popup window';
-  container.id = uid;
-  container.append(text);
-  container.classList.add('rebilly-instruments-overlay');
-  container.addEventListener('click', focus);
-
-  return container;
-};
-
-export function zoidIframe({
-    zoidComponent,
-    zoidCreateConfig,
-    zoidMountConfig
-  }, {
-    SELECTOR_CONTAINER,
-    METHOD_ID,
-  }) {
-    let component = this.zoidComponents[zoidComponent] || undefined;
-    const selector = `rebilly-instruments-${METHOD_ID}`;
-    SELECTOR_CONTAINER.innerHTML += `<div id="${selector}" data-rebilly-instruments-type="${METHOD_ID}"></div>`;
-
-    const METHOD_WRAPPER = document.querySelector(`#${selector}`);
-
-    if(!component) {
-      component = zoid.create({
-        ...zoidCreateConfig,
-        defaultContext: 'iframe',
-        dimensions: {
-          width: '100%',
-          height: '100%'
-        }
-      });
-
-      component = component({
-        RebillyInstruments: {
-          ...zoidMountConfig,
-          onFrameResize: (height) => {
-              METHOD_WRAPPER.style.height = height;
-          },
-          onLoading: (id) => {
-            this.loader.stopLoading({id});
-          },
-        },
-        onDestroy: () => {
-          setTimeout(() => {
-            METHOD_WRAPPER.remove();
-          }, 1000);
-        }
-      });
-    }
-    
-    component.render(`#${selector}`).catch(e => console.log(e));
-
-    return component;
-  }
-
-export function zoidPopup({
-    zoidComponent,
-    zoidCreateConfig,
-    zoidMountConfig
-  }, {
-    SELECTOR_CONTAINER,
-    METHOD_ID,
-    method,
-  }) {
-    let component = this.zoidComponents[zoidComponent] || undefined;
-    if (!component) {
-      component = zoid.create({
-        ...zoidCreateConfig,
-        defaultContext: 'popup',
-        dimensions: {
-          width: '600px',
-          height: '600px',
-        },
-        containerTemplate: containerTemplate.bind(this)
-      });
-      component = component({
-        RebillyInstruments: {
-          ...zoidMountConfig
-        }
-      });
-    }
-    
-    const selector = `rebilly-instruments-${METHOD_ID}`;
-    SELECTOR_CONTAINER.innerHTML += `<div id="${selector}" data-rebilly-instruments-type="${METHOD_ID}">
-      <button data-rebilly-i18n="paymentMethods.${method.method}" class="rebilly-instruments-button">${unKebabCase(method.method)}</button>
-    </div>`;
-
-    const PAYMENT_CARD_BUTTON = document.querySelector(`#${selector} button`);
-    PAYMENT_CARD_BUTTON.addEventListener('click', () => {
-      component.render().catch(e => console.log(e));
-    });
-
-    this.loader.stopLoading({id: method.method});
-
-    return component;
-  }

package/src/components/result.js

@@ -1,50 +0,0 @@
-import zoid from 'zoid';
-import { MAIN_STYLE } from '../styles/main';
-
-export function MountResult({
-  purchase,
-}) {
-  const resultContainerClassName = 'rebilly-instruments-result';
-  this.form.innerHTML += `<div class="${resultContainerClassName}"></div>`;
-  this.loader.startLoading({id: 'result'});
-  const RESULT_CONTAINER = document.querySelector(`.${resultContainerClassName}`);
-
-  this.form.querySelectorAll(`:not(.${resultContainerClassName})`).forEach(element => {
-    if (!element.classList.contains('rebilly-instruments-loader')
-      && !element.classList.contains('rebilly-instruments-loader-spinner')) {
-      element.remove();
-    }
-  });
-
-  const {paymentMethodsUrl} = this.options._computed;
-  const zoidCreateConfig = {
-    tag: 'rebilly-instruments-result',
-    url: `${paymentMethodsUrl}/result`,
-    defaultContext: 'iframe',
-    dimensions: {
-      width: '100%',
-      height: '100%'
-    },
-  };
-  const zoidMountConfig = {
-    configs: this.configs,
-    options: this.options,
-    MAIN_STYLE: MAIN_STYLE(this.configs?.theme || {}),
-    purchase,
-    onFrameResize: (height) => {
-      RESULT_CONTAINER.style.height = height;
-    },
-    onLoading: (id) => {
-      setTimeout(() => {
-        this.loader.stopLoading({id});
-      }, 1);
-    },
-  };
-
-  if(!this.zoidComponents.result) {
-    this.zoidComponents.result = zoid.create(zoidCreateConfig);
-  }
-  this.zoidComponents.result({
-    RebillyInstruments: zoidMountConfig,
-  }).render(`.${resultContainerClassName}`);
-};

package/src/components/summary.spec.js

@@ -1,106 +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';
-
-describe('Summary component', () => {
-  let summaryElement;
-  beforeEach(() => {
-    summaryElement = document.createElement('div');
-    document.body.append(summaryElement);
-  })
-
-  class TestMountSummaryInstance {
-    constructor({
-      configs = {},
-      options = {},
-      summary = summaryElement,
-      loader = new Loader(),
-      translate = new Translate(),
-    } = {}) {
-      this.configs = configs;
-      this.options = options;
-      this.summary = summary;
-      this.loader = loader;
-      this.translate = translate;
-    }
-
-    mountSummary(summaryProductsPlans, ...args) {
-      this.loader.DOM.summary = this.summary;
-      return MountSummary.apply(this, args.concat(summaryProductsPlans));
-    }
-  }
-
-  const options = {
-    intent: {
-      countryCode: 'US',
-      items: [
-        {
-          planId: 'my-awesome-product',
-          quantity: 1,
-          thumbnail: '',
-        },
-        {
-          planId: 'awesome-t-shirt',
-          quantity: 2,
-          thumbnail: '',
-        }
-      ]
-    }
-  };
-
-  const summaryData = 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
-  });
-
-  const planData = [
-    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'})
-  ];
-
-  const productData = [
-    new ProductModel({description: 'My Awesome Product', id: 'test-product-1'}),
-    new ProductModel({description: 'My Awesome T-Shirt', id: 'test-product-2'})
-  ];
-
-  const configs = {
-    websiteId: 'test-website-id'
-  };
-
-  it('should render the summary correctly', () => {
-    const mountSummaryInstance = new TestMountSummaryInstance({configs, options});
-    mountSummaryInstance.mountSummary({summary: summaryData, plans: planData, products: productData});
-
-    // 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();
-  });
-})

package/src/events/instrument-ready.js

@@ -1,11 +0,0 @@
-import BaseEvent from './base-event';
-
-export const InstrumentReadyEventName = 'rebilly-instruments-instrument-ready';
-
-export default class InstrumentReadyEvent extends BaseEvent {
-  constructor({
-    name = InstrumentReadyEventName
-  } = {}) {
-    super(name);
-  }
-}

package/src/events/purchase-complete.js

@@ -1,11 +0,0 @@
-import BaseEvent from './base-event';
-
-export const InstrumentReadyEventName = 'rebilly-instruments-purchase-complete';
-
-export default class PurchaseCompleteEvent extends BaseEvent {
-  constructor({
-    name = InstrumentReadyEventName
-  } = {}) {
-    super(name);
-  }
-}