@rebilly/instruments 1.0.2-beta.8 → 2.1.1-beta.0

package/src/functions/mount/setup-framepay.js

@@ -0,0 +1,41 @@
+import { addDOMElement } from '../../utils';
+
+export default ({
+  state: {
+      options: {
+      _dev
+    }
+  }
+} = {}) => {
+  const framePayUrls = {
+    script: _dev
+      ? _dev.framePayScriptLink || 'https://framepay.rebilly.com/rebilly.js'
+      : 'https://framepay.rebilly.com/rebilly.js',
+    style: _dev
+      ? _dev.framePayStyleLink || 'https://framepay.rebilly.com/rebilly.css'
+      : 'https://framepay.rebilly.com/rebilly.css'
+  };
+
+  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'
+    });
+  }
+}

package/src/functions/mount/setup-i18n.js

@@ -0,0 +1,19 @@
+const triggerTranslations = ({state}) => {
+  state.translate.init(state.options.locale, state.options.i18n);
+  state.translate.translateItems();
+}
+
+export default ({state = {}}) => {
+  if (
+    state.options.locale === 'auto' &&
+    state.data.riskMetadata?.browserData?.language
+  ) {
+    const {
+      browserData: { language }
+    } = state.data.riskMetadata;
+    state.options.locale = language;
+  }
+  state.translate.init(state.options.locale, state.options.i18n);
+
+  return triggerTranslations;
+}

package/src/functions/mount/setup-options.js

@@ -0,0 +1,100 @@
+import merge from 'lodash.merge';
+
+export const defaults = {
+  countryCode: 'US',
+  locale: 'auto',
+  paymentInstruments: {
+    address: {
+      name: 'default',
+      region: 'default',
+      hide: [],
+      show: [],
+      require: []
+    },
+    compactExpressInstruments: true,
+    googlePay: {
+      displayOptions: {
+        buttonColor: 'black',
+        buttonType: 'short',
+        buttonHeight: '44px'
+      }
+    },
+    applePay: {
+      displayOptions: {
+        buttonColor: 'black',
+        buttonType: 'plain',
+        buttonHeight: '44px'
+      }
+    },
+    paymentCard: {
+      popup: false
+    }
+  },
+  transactionType: 'purchase',
+  features: {
+    autoConfirmation: true,
+    autoResult: true
+  }
+};
+
+export function validateOptions(options) {
+  // TODO: validate more options
+  const purchaseData = [
+    options.items,
+    options.invoiceId,
+    options.money,
+    options.transactionId,
+  ].filter(v => v);
+
+  if (purchaseData.length === 0) {
+    throw new Error('Must provide purchase data');
+  }
+
+  if (purchaseData.length > 1) {
+    throw new Error('Must provide only one purchase data type');
+  }
+}
+
+export default ({
+  options = {}
+} = {}) => {
+  validateOptions(options);
+
+  const _computed = {
+    paymentMethodsUrl: options._dev
+      ? options._dev.paymentMethodsUrl || 'https://forms.local.rebilly.dev:3000'
+      : 'https://forms.secure-payments.app'
+  };
+
+  const combinedOptions = merge({...defaults}, {
+    organizationId: options.organizationId,
+    publishableKey: options.publishableKey,
+    websiteId: options.websiteId,
+    apiMode: options.apiMode,
+    i18n: options.i18n,
+    theme: options.theme,
+    css: options.css,
+    locale: options.locale,
+    countryCode: options.countryCode,
+    features: options.features,
+    paymentInstruments: options.paymentInstruments,
+    transactionType: options.transactionType,
+    _computed
+  });
+
+  // Add optional key's
+  [
+    'items',
+    'money',
+    'invoiceId',
+    'transactionId',
+    'customerJwt',
+    '_dev'
+  ].forEach(key => {
+    if (options[key]) {
+      combinedOptions[key] = options[key];
+    }
+  });
+
+  return combinedOptions;
+}

package/src/functions/mount/setup-options.spec.js

@@ -0,0 +1,60 @@
+import { RenderMockRebillyInstruments } from 'tests/mocks/rebilly-instruments-mock';
+import setupOptions, {validateOptions, defaults} from './setup-options';
+
+describe('Setup mount options', () => {
+  it("should fill with default options", () => {
+    const options = setupOptions({
+      options: {
+        items: [
+          {
+            planId: "test-plan-id",
+            quantity: 1
+          }
+        ]
+      }
+    });
+    expect(options).toMatchObject(defaults);
+  });
+
+  it("should setup options from mount", async () => {
+    const options = {
+      publishableKey: 'test-publishable-key',
+      organizationId: 'test-organization-id',
+      websiteId: 'test-website-id',
+      invoiceId: 'test-invoice-id',
+      customerJwt: 'test-customer-jwt'
+    }
+    const rebillyInstruments = await RenderMockRebillyInstruments(options);
+    expect(rebillyInstruments.state.options).toMatchObject(options);
+  });
+});
+
+describe('Validate mount options', () => {
+  it("should throw an error with no purchase data", async () => {
+    let error = null;
+    try {
+      const options = {};
+      validateOptions(options);
+    } catch (e) {
+      error = e;
+    }
+    expect(error.message).toBe('Must provide purchase data');
+  });
+
+  it("should throw error if there are more than one purchase property", () => {
+    let error = null;
+    try {
+      const options = {
+        invoiceId: "test-invoice-id",
+        items: [{
+          planId: "test-plan-id",
+          quantity: 1
+        }]
+      };
+      validateOptions(options);
+    } catch (e) {
+      error = e;
+    }
+    expect(error.message).toBe('Must provide only one purchase data type');
+  });
+});

package/src/functions/mount/setup-storefront.js

@@ -0,0 +1,24 @@
+import Storefront from '../../storefront';
+
+export default ({
+  options:{
+    publishableKey,
+    orgnizationId,
+    apiMode,
+    _dev
+  }
+}) => {
+  const storefront = {
+    publishableKey,
+    orgnizationId,
+    mode: apiMode || 'live'
+  };
+
+  if (_dev) {
+    storefront.liveUrl = _dev.liveUrl || 'https://api.rebilly.com';
+    storefront.sandboxUrl =
+      _dev.sandboxUrl || 'https://api-sandbox.rebilly.com';
+  }
+
+  return Storefront(storefront);
+}

package/src/functions/mount/setup-styles.js

@@ -0,0 +1,30 @@
+import { mainStyle } from '../../style';
+import { addDOMElement } from '../../utils';
+
+export default async ({
+  options: {
+    theme  =  {},
+    css,
+  }
+} = {}) => {
+  // Adds base stylesheet
+  const style = await mainStyle(theme || {});
+  addDOMElement({
+    element: 'style',
+    attributes: { type: 'text/css' },
+    content: style,
+    target: 'head'
+  });
+
+  // Adds options CSS to override any styles
+  if (css) {
+    addDOMElement({
+      element: 'style',
+      attributes: { type: 'text/css' },
+      content: css,
+      target: 'head'
+    });
+  }
+
+  return style;
+}

package/src/functions/on.js

@@ -1,17 +1,22 @@
-import camelCase from 'lodash.camelcase'
+import camelCase from 'lodash.camelcase';
 import Events, { publicEventNames } from '../events';
 
 /**
- * Register events that will be triggered
- * @param {string} eventName - The name of the event
- * @param {function} callback - The function that is triggered by the event.
+ @typedef OnParams
+ @type {Object}
+ @property {string} eventName - The name of the event
+ @property {function} callback - The function that is triggered by the event.
  */
-export function On (eventName, callback) {
 
+/**
+ * Register events that will be triggered
+ * @param {OnParams} params
+ */
+export function on({ eventName, callback }) {
   if (!publicEventNames.includes(eventName)) {
     throw new Error(`${eventName} is not a supported event`);
   }
-  
-  const internalEventName =  camelCase(eventName);
+
+  const internalEventName = camelCase(eventName);
   Events[internalEventName].addEventListener(callback);
-}
+}

package/src/functions/on.spec.js

@@ -1,32 +1,45 @@
 import camelCase from 'lodash.camelcase';
+import { RenderMockRebillyInstruments } from 'tests/mocks/rebilly-instruments-mock';
 import Events from '../events';
-import { MockRebillyInstruments } from 'tests/mocks/rebilly-instruments-mock';
 
 describe('RebillyInstruments on', () => {
   it('should register event listeners', async () => {
-    
-    const rebillyInstruments = MockRebillyInstruments();
-    const publicEventNames = ['instrument-ready', 'purchase-completed'] 
+    const rebillyInstruments = await RenderMockRebillyInstruments();
+    const publicEventNames = ['instrument-ready', 'purchase-completed'];
 
-    await Promise.all(publicEventNames.map(async eventName => {
-      const callback = jest.fn();
-      rebillyInstruments.on(eventName, callback);
+    await Promise.all(
+      publicEventNames.map(async (eventName) => {
+        const callback = jest.fn();
+        rebillyInstruments.on(eventName, callback);
 
-      const details = {
-        test: 'data'
-      };
-      Events[camelCase(eventName)].dispatch(details);
+        const details = {
+          test: 'data'
+        };
+        Events[camelCase(eventName)].dispatch(details);
 
-      expect(callback).toBeCalledTimes(1);
-      expect(callback).toBeCalledWith(details);
-    }));
+        expect(callback).toBeCalledTimes(1);
+        expect(callback).toBeCalledWith(details);
+      })
+    );
+  });
+
+  it('should throw error for internal namespaced events', async () => {
+    const callback = jest.fn();
+    const rebillyInstruments = await RenderMockRebillyInstruments();
 
-    
+    let error;
+    try {
+      // rebilly-instruments-purchase-completed will be used internally but not available externally
+      await rebillyInstruments.on('rebilly-instruments-purchase-completed', callback);
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toEqual(new Error('rebilly-instruments-purchase-completed is not a supported event'));
   });
 
   it('should throw error for a non defined event', async () => {
     const callback = jest.fn();
-    const rebillyInstruments = MockRebillyInstruments();
+    const rebillyInstruments = await RenderMockRebillyInstruments();
 
     let error;
     try {
@@ -34,6 +47,6 @@ describe('RebillyInstruments on', () => {
     } catch (e) {
       error = e;
     }
-    expect(error).toEqual(new Error(`not-an-event is not a supported event`));
+    expect(error).toEqual(new Error('not-an-event is not a supported event'));
   });
 });

package/src/functions/purchase.js

@@ -1,28 +1,110 @@
+import { postPurchase, postPayment } from '../storefront/purchase';
 import Events from '../events';
+import { mountModal } from '../views/modal';
+import { DataInstance } from './mount/fetch-data';
 
-export async function Purchase (purchasePayload) {
+export async function makePayment({ state, payload }) {
+  const {
+    _raw: {
+      id: token
+    }
+  } = payload;
+
+  const data = {
+    token,
+    ...payload
+  };
+
+  if (state.options.invoiceId) {
+    data.invoiceId = state.options.invoiceId;
+  }
+
+  if (state.options.transactionId) {
+    data.transactionId = state.options.transactionId;
+  }
+
+  if (state.options.money) {
+    data.websiteId = state.options.websiteId;
+    data.amount = state.options.money.amount;
+    data.currency = state.options.money.currency;
+  }
+
+  let { fields } = await postPayment({
+    state,
+    data
+  });
+
+  fields = {
+    transaction: fields,
+    token: fields.token || state.options.customerJwt
+  };
+
+  if (state.data.invoice) {
+    fields.invoice = state.data.invoice;
+  }
+
+  return fields;
+}
+
+export async function makePurchase({ state, payload }) {
+  const { fields } = await postPurchase({
+    state,
+    data: {
+      websiteId: state.options.websiteId,
+      items: state.options.items,
+      paymentInstruction: {
+        token: payload._raw.id
+      },
+      ...payload
+    }
+  });
+  return fields;
+}
+
+export function handleApprovalUrl({state, fields}) {
+  const { paymentMethodsUrl } = state.options._computed;
+
+  const model = {};
+  if (state.data.isPayment) {
+    model.payment = fields;
+  } else {
+    model.purchase = fields;
+  }
+
+  state.data = new DataInstance({state, ...fields});
+
+  mountModal({
+    state,
+    name: 'rebilly-instruments-approval-url',
+    url: `${paymentMethodsUrl}/approval-url`,
+    model,
+    close: (updatedPurchase) => {
+      Events.purchaseCompleted.dispatch(updatedPurchase);
+    }
+  });
+}
+
+export async function purchase({ state, payload }) {
   try {
-    const {fields: purchase} = await this._postPurchase(purchasePayload);
-
-    if (purchase.transaction.approvalUrl) {
-      const { paymentMethodsUrl } = this.options._computed;
-
-      this._mountModal({
-        name: 'rebilly-instruments-approval-url',
-        url: `${paymentMethodsUrl}/approval-url`,
-        model: {
-          purchase
-        },
-        close: (updatedPurchase) => {
-          // TODO: Check if this is purchase...
-          Events.purchaseCompleted.dispatch(updatedPurchase);
-        }
-      });
+    let fields;
+    if (state.data.isPayment) {
+      fields = await makePayment({ state, payload });
     } else {
-      Events.purchaseCompleted.dispatch(purchase);
+      fields = await makePurchase({ state, payload });
     }
-  } catch(error) {
+
+    if (fields.transaction?.approvalUrl) {
+      handleApprovalUrl({state, fields});
+    } else {
+      Events.purchaseCompleted.dispatch(fields);
+    }
+    return fields;
+  } catch (error) {
     // TODO: Display error to customer
+    console.error(error);
+    if(error.status === 422) {
+      error.details.forEach(e => console.error(e));
+    }
     return error;
   }
 }

package/src/functions/purchase.spec.js

@@ -1,20 +1,15 @@
-import { MockRebillyInstruments } from 'tests/mocks/rebilly-instruments-mock';
+import { RenderMockRebillyInstruments } from 'tests/mocks/rebilly-instruments-mock';
 import { ok, post } from 'msw-when-then';
 import { when } from 'tests/msw/server';
 import { storefrontURL } from 'tests/mocks/storefront-api-mock';
 import Events from '../events';
+import { avoidUnhandledPromises } from 'tests/async-utilities';
 
 describe('RebillyInstruments purchase', () => {
   it('should be able to make a purchase', async () => {
-    const configs = {
-      websiteId: 'test-website-id'
-    };
     const options = {
-      intent: {
-        items: [
-          { planId: 'test-plan-id', quantity: 1 }
-        ]
-      }
+      websiteId: 'test-website-id',
+      items: [{ planId: 'test-plan-id', quantity: 1 }]
     };
 
     const token = {
@@ -38,8 +33,8 @@ describe('RebillyInstruments purchase', () => {
     };
 
     when(post(`${storefrontURL}/purchase`)).thenReturn(ok(fields));
-    const rebillyInstruments = MockRebillyInstruments(configs, options);
-    jest.spyOn(rebillyInstruments.storefront.purchase, 'purchase');
+    const rebillyInstruments = await RenderMockRebillyInstruments(options);
+    const spyStorefrontPurchase = jest.spyOn(rebillyInstruments.state.storefront.purchase, 'purchase');
     jest.spyOn(Events.purchaseCompleted, 'dispatch');
 
     const purchaseCompletedListener = jest.fn();
@@ -47,8 +42,14 @@ describe('RebillyInstruments purchase', () => {
     rebillyInstruments.on('purchase-completed', purchaseCompletedListener);
 
     const purchasePayload = {
-      websiteId: rebillyInstruments.configs.websiteId,
-      items: rebillyInstruments.options.intent.items,
+      billingAddress,
+      deliveryAddress,
+      _raw: token
+    };
+
+    const purchasePayloadParsed = {
+      websiteId: rebillyInstruments.state.options.websiteId,
+      items: rebillyInstruments.state.options.items,
       billingAddress,
       deliveryAddress,
       paymentInstruction: {
@@ -58,10 +59,8 @@ describe('RebillyInstruments purchase', () => {
 
     await rebillyInstruments.purchase(purchasePayload);
 
-    expect(rebillyInstruments.storefront.purchase.purchase).toBeCalledTimes(1);
-    expect(rebillyInstruments.storefront.purchase.purchase).toBeCalledWith(
-      expect.objectContaining({data: purchasePayload})
-    );
+    expect(spyStorefrontPurchase).toBeCalledTimes(1);
+    expect(spyStorefrontPurchase).toBeCalledWith(expect.objectContaining({ data: purchasePayloadParsed }));
 
     expect(Events.purchaseCompleted.dispatch).toBeCalledTimes(1);
 
@@ -69,5 +68,6 @@ describe('RebillyInstruments purchase', () => {
     expect(purchaseCompletedListener).toBeCalledWith(
       expect.objectContaining(fields)
     );
+    await avoidUnhandledPromises();
   });
-});
+});

package/src/functions/setup.js

@@ -0,0 +1,48 @@
+import { setupPaymentInstrument } from '../storefront/payment-instruments';
+import Events from '../events';
+import { mountModal } from '../views/modal';
+import { DataInstance } from './mount/fetch-data';
+
+export async function setup({ state, payload }) {
+  try {
+    const {instrument, transaction} = await setupPaymentInstrument({
+      state,
+      data: {
+        token: payload._raw.id,
+        websiteId: state.options?.websiteId,
+        ...payload
+      }
+    });
+
+    state.data = new DataInstance({state, instrument, transaction});
+
+    if (transaction.approvalUrl) {
+      const { paymentMethodsUrl } = state.options._computed;
+      mountModal({
+        state,
+        name: 'rebilly-instruments-approval-url',
+        url: `${paymentMethodsUrl}/approval-url`,
+        model: {
+          setup: {transaction}
+        },
+        close: ({transaction: updatedTransaction = transaction}) => {
+          Events.setupCompleted.dispatch({
+            instrument,
+            transaction: updatedTransaction
+          });
+        }
+      });
+    } else {
+      Events.setupCompleted.dispatch({instrument, transaction});
+    }
+
+    return {instrument, transaction};
+  } catch (error) {
+    // TODO: Display error to customer
+    console.error(error);
+    if(error.status === 422) {
+      error.details.forEach(e => console.error(e));
+    }
+    return error;
+  }
+}