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

package/src/components/form/method-selector.js

@@ -1,47 +0,0 @@
-import { MAIN_STYLE as STYLE } from '../../styles/main';
-import { zoidIframe, zoidPopup, dispatch } from './zoid-helpers';
-import { getMethodData } from './get-method-data';
-
-export function MountMethodSelector({
-  METHODS_CONTAINER,
-  METHODS,
-  plans,
-  products
-}) {
-  METHODS_CONTAINER.innerHTML = `<div class="rebilly-instruments-method-selector"></div>`;
-  const SELECTOR_CONTAINER = document.querySelector('.rebilly-instruments-method-selector');
-
-  METHODS.forEach(method => {
-    const {METHOD_ID, METHOD_TYPE} = getMethodData(method);
-    const {paymentMethodsUrl} = this.options._computed || 'https://www.example.com';
-
-    const zoidComponent = METHOD_ID;
-    const zoidCreateConfig = {
-      tag: METHOD_ID,
-      url: `${paymentMethodsUrl}/${METHOD_ID}`,
-    };
-    const zoidMountConfig = {
-      configs: this.configs,
-      options: this.options,
-      MAIN_STYLE: STYLE(this.configs?.theme || {}),
-      method,
-      plans,
-      products,
-      dispatch: (event, detail) => {
-        dispatch.call(this, event, detail);
-      },
-    };
-
-    const isiFrame = METHOD_ID === 'payment-card' && !this.options.paymentInstruments[METHOD_TYPE]?.popup;
-    const zoidDefaultContext = isiFrame ? zoidIframe : zoidPopup;
-    this.zoidComponents[METHOD_ID] = zoidDefaultContext.call(this, {
-      zoidComponent,
-      zoidCreateConfig,
-      zoidMountConfig
-    }, {
-      SELECTOR_CONTAINER,
-      METHOD_ID,
-      method
-    });
-  });
-}

package/src/components/form/mount-express-payment-methods.js

@@ -1,84 +0,0 @@
-/* eslint-disable no-undef */
-import { zoidIframe, dispatch } from './zoid-helpers';
-import { getMethodData } from './get-method-data';
-import { MAIN_STYLE as STYLE } from '../../styles/main';
-
-function mountGooglePay({
-  METHOD_ID,
-}) {
-  const SELECTOR_CONTAINER = document.querySelector('.rebilly-instruments-form-express');
-
-  const {paymentMethodsUrl} = this.options._computed;
-  const zoidComponent = 'googlePay';
-  const zoidCreateConfig = {
-    tag: METHOD_ID,
-    url: `${paymentMethodsUrl}/${METHOD_ID}`,
-    prerenderTemplate: () => null
-  };
-  const zoidMountConfig = {
-    configs: this.configs,
-    options: this.options,
-    MAIN_STYLE: STYLE(this.configs?.theme || {}),
-    dispatch,
-  };
-
-  this.zoidComponents.googlePay = zoidIframe.call(this, {
-    zoidComponent,
-    zoidCreateConfig,
-    zoidMountConfig
-  }, {
-    SELECTOR_CONTAINER,
-    METHOD_ID,
-  });
-}
-
-function mountApplePay({
-  EXPRESS_METHODS_CONTAINER,
-  METHOD_ID, 
-  METHOD_TYPE,
-}) {
-  EXPRESS_METHODS_CONTAINER.innerHTML += `
-    <div id="rebilly-instruments-${METHOD_ID}" data-rebilly-instruments-express-type="${METHOD_TYPE}"></div>
-  `;
-  Rebilly.applePay.mount(`#rebilly-instruments-${METHOD_ID}`);
-
-  Rebilly.on('token-ready', (token) => {
-    dispatch('instrument-ready', token);
-  });
-}
-
-function mountPaypal() {
-  console.log('PayPal - work in progress');
-  this.loader.stopLoading({id: 'paypal-express'});
-}
-
-const browserIsSafari = () => window.ApplePaySession;
-
-export function mountExpressPaymentMethods({
-  EXPRESS_METHODS,
-  EXPRESS_METHODS_CONTAINER,
-}) {
-  EXPRESS_METHODS.forEach((expressMethod) => {
-    const {method, feature} = expressMethod;
-    const methodData = getMethodData(expressMethod);
-
-    if (method === 'paypal') {
-      mountPaypal.call(this);
-    };
-
-    if (feature?.name === 'Google Pay') {
-      mountGooglePay.call(this, {
-        ...methodData
-      });
-    }
-
-    if (feature?.name === 'Apple Pay' && browserIsSafari()) {
-      mountApplePay.call(this, {
-        EXPRESS_METHODS_CONTAINER,
-        ...methodData,
-      });
-    } else {
-      this.loader.stopLoading({id: 'payment-card-express'});
-    }
-  });
-}

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,114 +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 = typeof this.zoidComponents[zoidComponent] === "function" ? 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({
-      RebillyInstruments: {
-        ...zoidMountConfig,
-        onFrameResize: (height) => {
-            METHOD_WRAPPER.style.height = height;
-        },
-        onLoading: (id) => {
-          this.loader.stopLoading({id});
-        },
-      },
-      onDestroy: () => {
-        setTimeout(() => {
-          METHOD_WRAPPER.remove();
-        }, 1000);
-      }
-    }).render(`#${selector}`);
-
-    return component;
-  }
-
-export function zoidPopup({
-    zoidComponent,
-    zoidCreateConfig,
-    zoidMountConfig
-  }, {
-    SELECTOR_CONTAINER,
-    METHOD_ID,
-    method,
-  }) {
-    let component = typeof this.zoidComponents[zoidComponent] === "function" ? this.zoidComponents[zoidComponent] : undefined;
-    if (!component) {
-      component = zoid.create({
-        ...zoidCreateConfig,
-        defaultContext: 'popup',
-        dimensions: {
-          width: '600px',
-          height: '600px',
-        },
-        containerTemplate: containerTemplate.bind(this)
-      });
-    }
-    
-    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>`;
-
-    this.loader.stopLoading({id: method.method});
-    
-    const PAYMENT_CARD_BUTTON = document.querySelector(`#${selector} button`);
-    PAYMENT_CARD_BUTTON.addEventListener('click', () => {
-      component({
-        RebillyInstruments: {
-          ...zoidMountConfig
-        }
-      }).render();
-    });
-
-    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);
-  }
-}

package/src/functions/mount.js

@@ -1,204 +0,0 @@
-import { collectData } from '@rebilly/risk-data-collector';
-import { merge } from 'lodash';
-import { MAIN_STYLE } from '../styles/main';
-import { addDOMElement, processPropertyAsDOMElement } from '../utils';
-
-/**
- * @typedef {Object} Item
- * @property {string} planId - The Rebilly id of the plan.
- * @property {number} quantity - The number of the plans to be purchased.
- * @property {string} thumbnail - The source img for the product. Recommend 100px by 100px.
- */
-
- /**
- * @typedef {Object} Intent
- * @property {"purchase" | "vault"} mode - Which mode the mount is usings. Default "purchase".
- * @property {Array.<Item>} items - Which plans the customer is purchasing.
- * @property {string} customerId - Which customer is associated with the instrument.
- */
-
-/**
- * @typedef {Object} Options
- * @property {Intent} intent - The information required for purchaseing or vaulting an instrument
- */
-
-/**
- * Mount library with configurations.
- * @param {string | HTMLElement} form - The CSS class or HTML element were the form will be mounted.
- * @param {string | HTMLElement} summary - The CSS class or HTML element were the summary will be mounted.
- * @param {Options} options - The configurations that are to be passed to the library for use.
- */
-export async function Mount (
-  {
-    form = '.rebilly-instruments',
-    summary = '.rebilly-instruments-summary',
-    _dev = {
-      framePayScriptLink: null,
-      framePayStyleLink: null,
-      paymentMethodsUrl: null
-    },
-    options = {},
-  } = {},
-) {
-  this.form = form;
-  this.summary = summary;
-
-  const framePayUrls = {
-    script: _dev.framePayScriptLink || 'https://framepay.rebilly.com/rebilly.js',
-    style: _dev.framePayStyleLink || 'https://framepay.rebilly.com/rebilly.css'
-  };
-
-  const _computed = {
-    paymentMethodsUrl: _dev.paymentMethodsUrl || 'https://forms.secure-payments.app',
-  }
-
-  const OPTIONS_DEFAULTS = {
-    intent: {
-      countryCode: 'US'
-    },
-    locale: 'auto',
-    paymentInstruments: {
-      compactExpressInstruments: true,
-      googlePay: {
-        displayOptions: {
-          buttonColor: 'black',
-          buttonType: 'short',
-          buttonHeight: '44px'
-        }
-      },
-      paymentCard: {
-        popup: false
-      }
-    },
-    flowFlags: {
-      autoConfirmation: true,
-      autoResult: true
-    }
-  };
-
-  // TODO: Only add _dev in dev enviroment
-  this.options = merge(OPTIONS_DEFAULTS, {...options, _dev, _computed});
-  this.form = processPropertyAsDOMElement({prop: this.form, propName: 'form'});
-  this.summary = processPropertyAsDOMElement({prop: this.summary, propName: 'summary', isRequired: false});
-
-  // Setup loader
-  this.loader.addDOMElement({el: this.form});
-  this.loader.addDOMElement({section: 'summary', el: this.summary});
-
-  // Adds base stylesheet
-  addDOMElement(
-    {
-      element: 'style',
-      attributes: {type: 'text/css'},
-      content: MAIN_STYLE(this.configs?.theme || {}),
-      target: 'head'
-    }
-  );
-
-  // Adds configs CSS to override any styles
-  if (this.configs.css) {
-    addDOMElement(
-      {
-        element: 'style',
-        attributes: {type: 'text/css'},
-        content: this.configs.css,
-        target: 'head'
-      }
-    );
-  }
-  
-  // Adds FramePay
-  if (!document.querySelectorAll(`[framepay*="script"]`).length) {
-    addDOMElement(
-      {
-        element: 'script',
-        attributes: {
-          'framepay': 'script',
-          src: framePayUrls.script
-        },
-        target: 'head'
-      }
-    );
-  }
-
-  if(!document.querySelectorAll(`[framepay*="stylesheet"]`).length) {
-    addDOMElement(
-      {
-        element: 'link',
-        attributes: {
-          'framepay': 'stylesheet',
-          href: framePayUrls.style,
-          rel: 'stylesheet'
-        },
-        target: 'head'
-      }
-    );
-  }
-
-  try {
-    this.loader.startLoading({section: 'summary', id: 'initSummary'});
-    this.loader.startLoading({id: 'initForm'});
-    
-    const {riskMetadata} = await collectData();
-
-    if (this.options.locale === 'auto' && riskMetadata?.browserData?.language) {
-      const {browserData: {language}} = riskMetadata;
-      this.options.locale = language;
-    }
-
-    const i18n = this.configs?.i18n || {};
-    this.translate.init(this.options.locale, i18n);
-
-    const [
-      readyToPayData,
-      summaryData,
-    ] = await Promise.all([
-      this._fetchReadyToPay(riskMetadata),
-      this._fetchSummary()
-    ]);
-
-    const plansData = await this._fetchPlans({data: summaryData});
-    const productsData = await this._fetchProducts({data: plansData});
-    
-    if (this.form) {
-      this.formOptions = {
-        readyToPay: readyToPayData,
-        summary: summaryData,
-        plans: plansData,
-        products: productsData
-      };
-      this._mountForm(this.formOptions);
-    }
-
-    if (this.summary) {
-      this._mountSummary({
-        summary: summaryData,
-        plans: plansData,
-        products: productsData,
-      });
-    }
-  } catch(error) {
-    throw error;
-  }
-
-  const i18n = this.configs?.i18n || {};
-  this.translate.init(this.options.locale, i18n);
-  this.translate.translateItems();
-
-
-  if (this.options.flowFlags.autoConfirmation) {
-    this.on('instrument-ready', (instrument) => {
-      this.show('confirmation', {
-        instrument
-      });
-    });
-  }
-
-  if (this.options.flowFlags.autoResult) {
-    this.on('purchase-complete', (purchase) => {
-      this.show('result', {
-        purchase
-      });
-    });
-  }
-};