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

package/src/views/confirmation.js

@@ -0,0 +1,57 @@
+import { purchase } from '../functions/purchase';
+import { ViewIframe } from './common/iframe';
+import { replaceContent } from './common/render-utilities';
+import { updateMethodSelector } from './method-selector';
+import { updateSummary } from './summary';
+
+export const baseConfirmationHTML =
+  '<div class="rebilly-instruments-confirmation"></div>';
+
+export async function mountConfirmation({ instrument, mainStyle, state }) {
+  if (instrument.billingAddress && state.summary) {
+    updateSummary({ state, instrument });
+  }
+
+  replaceContent(state.form, baseConfirmationHTML);
+
+  state.loader.startLoading({ id: 'confirmation' });
+
+  const container = document.querySelector('.rebilly-instruments-confirmation');
+
+  const { paymentMethodsUrl } = state.options._computed;
+
+  const model = {
+    configs: state.configs,
+    options: state.options,
+    mainStyle,
+    instrument
+  };
+  const name = 'rebilly-instruments-confirmation';
+  const iframe = await new ViewIframe({
+    name,
+    url: `${paymentMethodsUrl}/confirmation`,
+    container,
+    model
+  });
+  iframe.bindEventListeners({
+    loader: state.loader
+  });
+
+  iframe.component.on(`${name}-confirm-purchase`, (confirmedInstrument) => {
+    purchase({ state, payload: confirmedInstrument });
+  });
+
+  iframe.component.on('choose-another-method', () => {
+    state.iframeComponents = state.iframeComponents.filter((item) => {
+      if (item.name === iframe.name) {
+        item.destroy();
+        return false;
+      }
+      return true;
+    });
+    updateSummary({ state });
+    updateMethodSelector({ state, mainStyle });
+  });
+
+  state.iframeComponents.push(iframe);
+}

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

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Summary component should inject the proper HTML for express methods 1`] = `null`;

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

@@ -0,0 +1,78 @@
+import Events from '../../../events';
+
+const browserIsSafari = () => window.ApplePaySession;
+
+export default function mountApplePay({
+  state,
+  METHOD_ID,
+  METHOD_TYPE,
+  EXPRESS_METHODS,
+  EXPRESS_METHODS_CONTAINER
+}) {
+  const container = document.querySelector(`.rebilly-instruments-${METHOD_ID}-method`);
+  const digitalWallet = state.configs.digitalWallet.applePay;
+
+  function mountApplePayButton() {
+    if(!container.children.length) {
+      Rebilly.applePay.mount(`.rebilly-instruments-${METHOD_ID}-method`);
+    }
+    state.loader.stopLoading({ id: `${METHOD_TYPE}-express` });
+  }
+
+  // Hack: The correct way to do this is to accept the options via the framepay package
+  // Will remove once these options are added to framepay
+  function updateBtnStyling() {
+    const applePayButton = document.querySelector('#rebilly-apple-pay-button');
+    applePayButton.style.margin = '0px';
+    applePayButton.style.width = '100%';
+    applePayButton.style.height = digitalWallet.applePayDisplayOptions.buttonHeight;
+  }
+
+  if(!browserIsSafari()) {
+    if(EXPRESS_METHODS.length === 1) {
+      EXPRESS_METHODS_CONTAINER.parentNode.style.display = 'none';
+    }
+    state.loader.stopLoading({ id: `${METHOD_TYPE}-express` });
+    container.style.display = 'none';
+    return;
+  } 
+
+  container.style.height = digitalWallet.applePayDisplayOptions.buttonHeight;
+
+  if (!Rebilly.initialized) {
+    Rebilly.initialize({
+      publishableKey: state.configs.publishableKey,
+      organizationId: state.configs.organizationId,
+      digitalWallet
+    });
+  } else {
+    mountApplePayButton();
+    updateBtnStyling();
+  }
+
+  Rebilly.on('ready', () => {
+    mountApplePayButton();
+    updateBtnStyling();
+  });
+
+  Rebilly.on('token-ready', (token) => {
+    const instrumentReadyPayload = {
+      websiteId: state.configs.websiteId,
+      items: state.options.intent.items,
+      paymentInstruction: {
+        token: token.id,
+      },
+      billingAddress: token.billingAddress,
+      _raw: token
+    }
+    if (!token.shippingAddress) {
+      instrumentReadyPayload.deliveryAddress = token.shippingAddress;
+    }
+
+    Events.instrumentReady.dispatch(instrumentReadyPayload);
+  });
+
+  Rebilly.on('error', error => {
+    console.error(error)
+  });
+}

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

@@ -0,0 +1,25 @@
+import { MethodIframe } from '../../common/iframe';
+
+export default async function mountGooglePay({ state, METHOD_ID }) {
+  const container = document.querySelector(`.rebilly-instruments-${METHOD_ID}-method`);
+
+  const { paymentMethodsUrl } = state.options._computed;
+
+  const model = {
+    configs: state.configs,
+    options: state.options
+  };
+
+  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/express-methods/paypal.js

@@ -0,0 +1,7 @@
+
+export default async function mountPaypal({ state, METHOD_ID, METHOD_TYPE }) {
+  console.log('PayPal - work in progress');
+  const container = document.querySelector(`.rebilly-instruments-${METHOD_ID}-method`);
+  container.style.display = 'none';
+  state.loader.stopLoading({ id: `${METHOD_TYPE}-express` });
+}

package/src/views/method-selector/generate-digital-wallet.js

@@ -0,0 +1,44 @@
+import { getMethodData } from './get-method-data';
+
+export function generateDigitalWallet({ state, summary, EXPRESS_METHODS }) {
+  const output = {};
+
+  const { paymentInstruments } = state.options;
+
+  const transactionData = {
+    amount: summary.total,
+    currency: summary.currency,
+    countryCode: state.options.intent.countryCode,
+    label: state.configs.websiteId
+  }
+
+  EXPRESS_METHODS.forEach(method => {
+    const { METHOD_TYPE } = getMethodData(method);
+
+    if (method.feature?.name === 'Google Pay') {
+      output[METHOD_TYPE] = {
+        transactionData,
+        merchantConfig: {
+          merchantName: method.feature.merchantName,
+          merchantOrigin: method.feature.merchantOrigin
+        },
+        googlePayDisplayOptions: paymentInstruments.googlePay.displayOptions,
+      }
+    }
+
+    if (method.feature?.name === 'Apple Pay') {
+      output[METHOD_TYPE] = {
+        transactionData,
+        merchantConfig: {
+          merchantName: paymentInstruments.applePay.merchantConfig?.merchantName,
+          // Apple Pay code cannot run in an iframe, and the merchant origin must be
+          // registered as a merchant domain, so we can just send the current URL.
+          merchantOrigin: window.location.hostname,
+        },
+        applePayDisplayOptions: paymentInstruments.applePay.displayOptions
+      }
+    }
+  })
+
+  return output;
+}

package/src/views/method-selector/generate-digital-wallet.spec.js

@@ -0,0 +1,131 @@
+import { generateDigitalWallet } from './generate-digital-wallet';
+import ReadyToPayModel from '@/storefront/models/ready-to-pay-model';
+import SummaryModel from '@/storefront/models/summary-model';
+
+describe('generateDigitalWallet', () => {
+  class TestInstance {
+    constructor({ configs = {}, options = {} } = {}) {
+      this.configs = configs;
+      this.options = options;
+    }
+  }
+
+  const summary = new SummaryModel({
+    currency: 'USD',
+    total: 1,
+  });
+
+  const configs = {
+    websiteId: 'test-website-id'
+  };
+
+  const options = {
+    intent: {
+      countryCode: 'US',
+    },
+    paymentInstruments: {
+      googlePay: {
+        displayOptions: {
+          buttonColor: 'black',
+          buttonType: 'short',
+          buttonHeight: '44px'
+        }
+      },
+      applePay: {
+        displayOptions: {
+          buttonColor: 'black',
+          buttonType: 'buy',
+          buttonHeight: '44px'
+        },
+        merchantConfig: {
+          merchantName: 'Test Store Name',
+        },
+      }
+    }
+  };
+
+  it('should generate the correct digital wallet config for Google pay', () => {
+    const expressMethods = [
+      new ReadyToPayModel({
+        method: 'payment-card',
+        feature: {
+          name: 'Google Pay',
+          merchantName: 'google-pay-merchant-name',
+          merchantOrigin: 'google-pay-merchant-origin'
+        },
+        brands: ['Visa']
+      })
+    ];
+
+    const output = generateDigitalWallet({
+      state: new TestInstance({configs, options}),
+      EXPRESS_METHODS: expressMethods,
+      summary
+    });
+
+    const expectedOutput ={
+      googlePay: {
+        transactionData: {
+          amount: 1,
+          currency: 'USD',
+          countryCode: 'US',
+          label: 'test-website-id'
+        },
+        merchantConfig: {
+          merchantName: 'google-pay-merchant-name',
+          merchantOrigin: 'google-pay-merchant-origin'
+        },
+        googlePayDisplayOptions: { 
+          buttonColor: 'black', 
+          buttonType: 'short', 
+          buttonHeight: '44px' 
+        }
+      }
+    }
+
+    expect(output).toMatchObject(expectedOutput);
+  });
+
+  it('should generate the correct digital wallet config for Apple pay', () => {
+    delete window.location
+    window.location = new URL('https://rebilly-apple-pay-test-tunnel.ngrok.io/');
+
+    const expressMethods = [
+      new ReadyToPayModel({
+        method: 'payment-card',
+        feature: {
+          name: 'Apple Pay',
+        },
+        brands: ['Visa']
+      })
+    ];
+
+    const output = generateDigitalWallet({
+      state: new TestInstance({configs, options}),
+      EXPRESS_METHODS: expressMethods,
+      summary
+    });
+
+    const expectedOutput = {
+      applePay: {
+        transactionData: {
+          amount: 1,
+          currency: 'USD',
+          countryCode: 'US',
+          label: 'test-website-id'
+        },
+        merchantConfig: {
+          merchantName: 'Test Store Name',
+          merchantOrigin: 'rebilly-apple-pay-test-tunnel.ngrok.io'
+        },
+        applePayDisplayOptions: { 
+          buttonColor: 'black', 
+          buttonType: 'buy', 
+          buttonHeight: '44px' 
+        }
+      }
+    }
+
+    expect(output).toMatchObject(expectedOutput);
+  });
+});

package/src/{components/form → views/method-selector}/get-method-data.js

@@ -1,8 +1,12 @@
-import {kebabCase, camelCase} from '../../utils';
+import kebabCase from 'lodash.kebabcase';
+import camelCase from 'lodash.camelcase';
 
 export const getMethodData = (method) => {
   const METHOD_ID = kebabCase(method.feature?.name || method.method);
-  const METHOD_TYPE = camelCase(method.feature?.name || method.method).replace('-', '');
-  
-  return {METHOD_ID, METHOD_TYPE}
-}
+  const METHOD_TYPE = camelCase(method.feature?.name || method.method).replace(
+    '-',
+    ''
+  );
+
+  return { METHOD_ID, METHOD_TYPE };
+};

package/src/views/method-selector/get-payment-methods.js

@@ -0,0 +1,40 @@
+/* eslint-disable no-unused-expressions, arrow-body-style */
+import { getMethodData } from './get-method-data';
+
+const SUPPORTED_EXPRESS_METHODS = ['Google Pay', 'Apple Pay', 'paypal'];
+
+const SUPPORTED_METHODS = ['payment-card'];
+
+const isExpressMethod = ({ method, feature }) => {
+  return (
+    SUPPORTED_EXPRESS_METHODS.includes(method) ||
+    SUPPORTED_EXPRESS_METHODS.includes(feature?.name)
+  );
+};
+
+const isSupportedMethod = ({ method }) => {
+  return SUPPORTED_METHODS.includes(method);
+};
+
+// TODO: just loader is used. We could simplify signature
+export function getPaymentMethods({ methods, state }) {
+  const result = {
+    EXPRESS_METHODS: [],
+    METHODS: []
+  };
+
+  methods.forEach((method) => {
+    if (isExpressMethod(method)) {
+      const { METHOD_TYPE } = getMethodData(method);
+      // Add loader entry per express method
+      state.loader.startLoading({ id: `${METHOD_TYPE}-express` });
+      result.EXPRESS_METHODS.push(method);
+    } else if (isSupportedMethod(method)) {
+      // Add loader entry per method
+      state.loader.startLoading({ id: method.method });
+      result.METHODS.push(method);
+    }
+  });
+
+  return result;
+}

package/src/views/method-selector/get-payment-methods.spec.js

@@ -0,0 +1,40 @@
+import { getPaymentMethods } from './get-payment-methods';
+import ReadyToPayModel from '@/storefront/models/ready-to-pay-model';
+
+class TestInstance {
+  constructor() {
+    this.loader = {
+      startLoading: jest.fn()
+    };
+  }
+}
+
+it('should only return the allowed methods', () => {
+  const instance = new TestInstance();
+  const methods = [
+    new ReadyToPayModel({
+      method: 'payment-card',
+      feature: {
+        name: 'Google Pay',
+        merchantName: 'google-pay-merchant-name',
+        merchantOrigin: 'google-pay-merchant-origin'
+      },
+      brands: ['Visa'],
+      filters: []
+    }),
+    new ReadyToPayModel({
+      method: 'bitcoin',
+      filters: []
+    }),
+    new ReadyToPayModel({
+      method: 'payment-card',
+      brands: ['Visa'],
+      filters: []
+    })
+  ];
+
+  const results = getPaymentMethods({ methods, state: instance });
+  expect(results.hasOwnProperty('EXPRESS_METHODS')).toEqual(true);
+  expect(results['EXPRESS_METHODS'].length).toEqual(1);
+  expect(results['METHODS'].length).toEqual(1);
+});

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

@@ -0,0 +1,110 @@
+/* eslint-disable no-undef */
+import { collectData } from '@rebilly/risk-data-collector';
+import { getPaymentMethods } from './get-payment-methods';
+import { mountExpressMethods } from './mount-express-methods';
+import { generateDigitalWallet } from './generate-digital-wallet';
+import { MountMethods } from './mount-methods';
+import { fetchSummaryData } from '../../functions/mount/fetch-summary-data';
+
+export const baseMethodSelectorHTML = (compactExpressInstruments) => `
+<div class="rebilly-instruments-content">
+  <div class="rebilly-instruments-method-selector">
+    <div class="rebilly-instruments-express-methods ${
+      compactExpressInstruments ? 'is-compact' : ''
+    }">
+      <span data-rebilly-i18n="form.expressCheckout" class="rebilly-instruments-express-methods-label">Express checkout</span>
+      <div class="rebilly-instruments-express-methods-container"></div>
+    </div>
+    <div class="rebilly-instruments-divider">
+      <span class="rebilly-instruments-divider-label" data-rebilly-i18n="form.or">Or</span>
+    </div>
+    <div class="rebilly-instruments-methods"></div>
+  </div>
+</div>
+`;
+
+export function mountMethodSelector({ state, formOptions }) {
+  const { readyToPay, summary, plans, products, mainStyle } = formOptions;
+  const { EXPRESS_METHODS, METHODS } = getPaymentMethods({
+    methods: readyToPay,
+    state
+  });
+
+  state.form.innerHTML += baseMethodSelectorHTML(
+    state.options.paymentInstruments.compactExpressInstruments
+  );
+
+  const EXPRESS_METHODS_CONTAINER = document.querySelector(
+    '.rebilly-instruments-express-methods-container'
+  );
+  const METHODS_DIVIDER = document.querySelector(
+    '.rebilly-instruments-divider'
+  );
+  METHODS_DIVIDER.style.display =
+    METHODS.length && EXPRESS_METHODS.length ? 'block' : 'none';
+  const METHODS_CONTAINER = document.querySelector(
+    '.rebilly-instruments-methods'
+  );
+
+  state.configs.digitalWallet = generateDigitalWallet({state, summary, EXPRESS_METHODS});
+
+  if (METHODS.length) {
+    MountMethods({
+      state,
+      METHODS_CONTAINER,
+      METHODS,
+      mainStyle,
+      plans,
+      products
+    });
+  } else {
+    METHODS_CONTAINER.style.display = 'none';
+  }
+
+  if (EXPRESS_METHODS.length) {
+    mountExpressMethods({
+      state,
+      EXPRESS_METHODS,
+      EXPRESS_METHODS_CONTAINER
+    });
+  } else {
+    EXPRESS_METHODS_CONTAINER.parentNode.style.display = 'none';
+  }
+
+  state.translate.translateItems();
+
+  state.loader.stopLoading({ id: 'initForm' });
+}
+
+export async function updateMethodSelector({ state, mainStyle }) {
+  state.loader.startLoading({ id: 'initForm' });
+  const { riskMetadata } = await collectData();
+
+  const {
+    readyToPay,
+    summary: summaryData,
+    plans,
+    products
+  } = await fetchSummaryData({ state, riskMetadata });
+
+  const formOptions = {
+    summary: summaryData,
+    readyToPay,
+    plans,
+    products,
+    mainStyle
+  };
+
+  state.form
+    .querySelectorAll(':not(.rebilly-instruments-confirmation)')
+    .forEach((element) => {
+      if (
+        !element.classList.contains('rebilly-instruments-loader') &&
+        !element.classList.contains('rebilly-instruments-loader-spinner')
+      ) {
+        element.remove();
+      }
+    });
+
+  mountMethodSelector({ state, formOptions });
+}