@rebilly/instruments 4.4.0 → 4.6.0

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

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

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

@@ -4,30 +4,27 @@ import { minifyCss } from '../../style/utils/minifyCss';
 import state from '../../state';
 
 export default () => {
-  const {
-    theme  =  {},
-    css,
-  } = state.options;
+    const { theme = {}, css } = state.options;
 
-  // Adds base CSS vars stylesheet
-  const styleVars = mainStyleVars(theme || {});
+    // Adds base CSS vars stylesheet
+    const styleVars = mainStyleVars(theme || {});
 
-  addDOMElement({
-    element: 'style',
-    attributes: { type: 'text/css' },
-    content: minifyCss(styleVars),
-    target: 'head'
-  });
-
-  // Adds options CSS to override any styles
-  if (css) {
     addDOMElement({
-      element: 'style',
-      attributes: { type: 'text/css' },
-      content: minifyCss(css),
-      target: 'head'
+        element: 'style',
+        attributes: { type: 'text/css' },
+        content: minifyCss(styleVars),
+        target: 'head',
     });
-  }
 
-  return styleVars;
-}
+    // Adds options CSS to override any styles
+    if (css) {
+        addDOMElement({
+            element: 'style',
+            attributes: { type: 'text/css' },
+            content: minifyCss(css),
+            target: 'head',
+        });
+    }
+
+    return styleVars;
+};

package/src/functions/mount/setup-user-flow.js

@@ -3,54 +3,58 @@ import { show } from '../show';
 import { purchase } from '../purchase';
 import { setup } from '../setup';
 
-function showResult({state, payload}) {
-  show({
-    componentName: 'result',
-    payload,
-    state
-  });
+function showResult({ state, payload }) {
+    show({
+        componentName: 'result',
+        payload,
+        state,
+    });
 }
 
-export default ({state = {}}) => {
-  if (state.options.features.autoConfirmation) {
-    on({
-      eventName: 'instrument-ready',
-      callback: (payload) => {
-        // Alternate flow for paypal.
-        if (payload._raw?.method === 'paypal') {
-          if (!state.data.isShippingRequired) {
-            if (state.options.transactionType === 'setup') {
-              setup({state, payload});
-            } else {
-              purchase({state, payload});
-            }
-            state.loader.startLoading({state, id: 'express-purchase', message: 'form.loaderMessages.processingPayment' });
-            return;
-          }
-        }
-        show({
-          componentName: 'confirmation',
-          payload,
-          state
+export default ({ state = {} }) => {
+    if (state.options.features.autoConfirmation) {
+        on({
+            eventName: 'instrument-ready',
+            callback: (payload) => {
+                // Alternate flow for paypal.
+                if (payload._raw?.method === 'paypal') {
+                    if (!state.data.isShippingRequired) {
+                        if (state.options.transactionType === 'setup') {
+                            setup({ state, payload });
+                        } else {
+                            purchase({ state, payload });
+                        }
+                        state.loader.startLoading({
+                            state,
+                            id: 'express-purchase',
+                            message: 'form.loaderMessages.processingPayment',
+                        });
+                        return;
+                    }
+                }
+                show({
+                    componentName: 'confirmation',
+                    payload,
+                    state,
+                });
+            },
         });
-      }
-    });
-  }
+    }
 
-  if (state.options.features.autoResult) {
-    on({
-      eventName: 'purchase-completed',
-      callback: (payload) => {
-        payload = JSON.parse(JSON.stringify(payload));
-        showResult({state, payload});
-      }
-    });
-    on({
-      eventName: 'setup-completed',
-      callback: (payload) => {
-        payload = JSON.parse(JSON.stringify(payload));
-        showResult({state, payload});
-      }
-    });
-  }
-}
+    if (state.options.features.autoResult) {
+        on({
+            eventName: 'purchase-completed',
+            callback: (payload) => {
+                payload = JSON.parse(JSON.stringify(payload));
+                showResult({ state, payload });
+            },
+        });
+        on({
+            eventName: 'setup-completed',
+            callback: (payload) => {
+                payload = JSON.parse(JSON.stringify(payload));
+                showResult({ state, payload });
+            },
+        });
+    }
+};

package/src/functions/on.js

@@ -13,10 +13,10 @@ import Events, { publicEventNames } from '../events';
  * @param {OnParams} params
  */
 export function on({ eventName, callback }) {
-  if (!publicEventNames.includes(eventName)) {
-    throw new Error(`${eventName} is not a supported event`);
-  }
+    if (!publicEventNames.includes(eventName)) {
+        throw new Error(`${eventName} is not a supported event`);
+    }
 
-  const internalEventName = camelCase(eventName);
-  Events[internalEventName].addEventListener(callback);
+    const internalEventName = camelCase(eventName);
+    Events[internalEventName].addEventListener(callback);
 }

package/src/functions/on.spec.js

@@ -5,62 +5,71 @@ import Events from '@/events';
 import iframes from '@/state/iframes';
 
 describe('RebillyInstruments on', () => {
-  it('should register event listeners', async () => {
-    const rebillyInstruments = await RenderMockRebillyInstruments();
-    const publicEventNames = ['instrument-ready', 'purchase-completed'];
+    it('should register event listeners', async () => {
+        const rebillyInstruments = await RenderMockRebillyInstruments();
+        const publicEventNames = ['instrument-ready', 'purchase-completed'];
 
-    await Promise.all(
-      publicEventNames.map(async (eventName) => {
-        const callback = vi.fn();
-        rebillyInstruments.on(eventName, callback);
+        await Promise.all(
+            publicEventNames.map(async (eventName) => {
+                const callback = vi.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 = vi.fn();
-    const instance = new RebillyInstrumentsInstance();
-    const iframeMock = {
-      component: {
-        call: vi.fn()
-      }
-    };
-    iframes.form = iframeMock;
+    it('should throw error for internal namespaced events', async () => {
+        const callback = vi.fn();
+        const instance = new RebillyInstrumentsInstance();
+        const iframeMock = {
+            component: {
+                call: vi.fn(),
+            },
+        };
+        iframes.form = iframeMock;
 
-    let error;
-    try {
-      // rebilly-instruments-purchase-completed will be used internally but not available externally
-      await instance.on('rebilly-instruments-purchase-completed', callback);
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toEqual(new Error('rebilly-instruments-purchase-completed is not a supported event'));
-  });
+        let error;
+        try {
+            // rebilly-instruments-purchase-completed will be used internally but not available externally
+            await instance.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 = vi.fn();
-    const instance = new RebillyInstrumentsInstance();
-    const iframeMock = {
-      component: {
-        call: vi.fn()
-      }
-    };
-    iframes.form = iframeMock;
+    it('should throw error for a non defined event', async () => {
+        const callback = vi.fn();
+        const instance = new RebillyInstrumentsInstance();
+        const iframeMock = {
+            component: {
+                call: vi.fn(),
+            },
+        };
+        iframes.form = iframeMock;
 
-    let error;
-    try {
-      await instance.on('not-an-event', callback);
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toEqual(new Error('not-an-event is not a supported event'));
-  });
+        let error;
+        try {
+            await instance.on('not-an-event', callback);
+        } catch (e) {
+            error = e;
+        }
+        expect(error).toEqual(
+            new Error('not-an-event is not a supported event'),
+        );
+    });
 });

package/src/functions/purchase.js

@@ -7,152 +7,167 @@ import { showError } from '../views/errors';
 import { mapItemsQuantities } from '../utils/quantity';
 
 export async function makePayment({ payload }) {
-  const {
-    _raw: {
-      id
-    },
-    isExistingInstrument
-  } = payload;
-  delete payload.isExistingInstrument;
-  delete payload._raw;
-
-  const data = {
-    ...payload
-  };
-
-  if (isExistingInstrument) {
-    data.paymentInstrumentId = id;
-    
-  } else {
-    data.token = id;
-  }
-
-  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;
-  }
-  
-  if (state.options?.deposit) {
-    data.websiteId = state.options.websiteId;
-    data.amount = state.data.amountAndCurrency.amount;
-    data.currency = state.data.amountAndCurrency.currency;
-  }
-
-  if (state.data?.couponIds && Array.isArray(state.data.couponIds)) {
-    data.couponIds = state.data.couponIds
-  }
-
-  let { fields } = await postPayment({
-    state,
-    data
-  });
-
-  fields = {
-    transaction: fields,
-    token: fields.token || state.options.jwt
-  };
-
-  if (state.data.invoice) {
-    fields.invoice = state.data.invoice;
-  }
-
-  return fields;
+    const {
+        _raw: { id },
+        isExistingInstrument,
+    } = payload;
+    delete payload.isExistingInstrument;
+    delete payload._raw;
+
+    const data = {
+        ...payload,
+    };
+
+    if (isExistingInstrument) {
+        data.paymentInstrumentId = id;
+    } else {
+        data.token = id;
+    }
+
+    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;
+    }
+
+    if (state.options?.deposit) {
+        data.websiteId = state.options.websiteId;
+        data.amount = state.data.amountAndCurrency.amount;
+        data.currency = state.data.amountAndCurrency.currency;
+    }
+
+    if (state.data?.couponIds && Array.isArray(state.data.couponIds)) {
+        data.couponIds = state.data.couponIds;
+    }
+
+    let { fields } = await postPayment({
+        state,
+        data,
+    });
+
+    fields = {
+        transaction: fields,
+        token: fields.token || state.options.jwt,
+    };
+
+    if (state.data.invoice) {
+        fields.invoice = state.data.invoice;
+    }
+
+    return fields;
 }
 
 export async function makePurchase({ payload }) {
-  const data = {
-    websiteId: state.options.websiteId,
-    paymentInstruction: {
-      token: payload._raw.id
-    },
-    ...payload
-  };
-
-  if (state.data.acceptBumpOffer) {
-    data.items = state.options.bumpOffer;
-  } else {
-    data.items = mapItemsQuantities(state.options.items);
-  }
-
-  if (state.data.couponIds && Array.isArray(state.data.couponIds)) {
-    data.couponIds = state.data.couponIds
-  }
-
-  if (state.options.addons && state.data.addons && Array.isArray(state.data.addons)) {
-    state.options.addons.forEach(addon => {
-      if (state.data.addons.includes(addon.planId)) {
-        data.items.push(addon);
-      }
-    })
-  }
-
-  const { fields } = await postPurchase({
-    state,
-    data
-  });
-  return fields;
-}
+    const data = {
+        websiteId: state.options.websiteId,
+        paymentInstruction: {
+            token: payload._raw.id,
+        },
+        ...payload,
+    };
+
+    if (state.data.acceptBumpOffer) {
+        data.items = state.options.bumpOffer;
+    } else {
+        data.items = mapItemsQuantities(state.options.items);
+    }
 
-export function handleApprovalUrl({fields, payload}) {
-  if (payload.redirectUrl || !fields.transaction?.approvalUrl) {
-    const { paymentMethodsUrl } = state.options._computed;
-    const modelSafeFields = JSON.parse(JSON.stringify(fields));
+    if (state.data.couponIds && Array.isArray(state.data.couponIds)) {
+        data.couponIds = state.data.couponIds;
+    }
 
-    const model = {};
-    if (state.data.isPayment) {
-      model.payment = modelSafeFields;
-    } else {
-      model.purchase = modelSafeFields;
+    if (
+        state.options.addons &&
+        state.data.addons &&
+        Array.isArray(state.data.addons)
+    ) {
+        state.options.addons.forEach((addon) => {
+            if (state.data.addons.includes(addon.planId)) {
+                data.items.push(addon);
+            }
+        });
     }
-  
-    state.data = new DataInstance({...fields});
-
-    const name = 'rebilly-instruments-approval-url'
-    mountModal({
-      name,
-      url: `${paymentMethodsUrl}?name=${name}`,
-      model,
-      close: (updatedPurchase) => {
-        Events.purchaseCompleted.dispatch(updatedPurchase);
-      }
+
+    const { fields } = await postPurchase({
+        state,
+        data,
     });
-  } else if (fields.transaction?.approvalUrl) {
-    window.location = fields.transaction?.approvalUrl
-  }  
+    return fields;
 }
 
-export async function purchase({ payload }) {
-  Object.keys(payload).forEach(key => {
-    if (payload[key] === null) {
-      delete payload[key];
+export function handleApprovalUrl({ fields, payload }) {
+    if (
+        state.options.features.fullPageRedirect &&
+        (payload.redirectUrl || fields.transaction?.approvalUrl)
+    ) {
+        window.location =
+            payload.redirectUrl || fields.transaction?.approvalUrl;
+        return;
     }
-  });
 
-  try {
-    let fields;
-    if (state.data.isPayment) {
-      fields = await makePayment({ state, payload });
-    } else {
-      fields = await makePurchase({ state, payload });
+    if (payload.redirectUrl || !fields.transaction?.approvalUrl) {
+        const { paymentMethodsUrl } = state.options._computed;
+        const modelSafeFields = JSON.parse(JSON.stringify(fields));
+
+        const model = {};
+        if (state.data.isPayment) {
+            model.payment = modelSafeFields;
+        } else {
+            model.purchase = modelSafeFields;
+        }
+
+        state.data = new DataInstance({ ...fields });
+
+        const name = 'rebilly-instruments-approval-url';
+        mountModal({
+            name,
+            url: `${paymentMethodsUrl}?name=${name}`,
+            model,
+            close: (updatedPurchase) => {
+                Events.purchaseCompleted.dispatch(updatedPurchase);
+            },
+        });
+    } else if (fields.transaction?.approvalUrl) {
+        window.location = fields.transaction?.approvalUrl;
     }
+}
 
-    if (fields.transaction?.approvalUrl && fields.transaction?.result === 'unknown') {
-      handleApprovalUrl({state, fields, payload});
-    } else {
-      Events.purchaseCompleted.dispatch(fields);
+export async function purchase({ payload }) {
+    Object.keys(payload).forEach((key) => {
+        if (payload[key] === null) {
+            delete payload[key];
+        }
+    });
+
+    try {
+        let fields;
+        if (state.data.isPayment) {
+            fields = await makePayment({ payload });
+        } else {
+            fields = await makePurchase({ payload });
+        }
+        if (
+            fields.transaction?.approvalUrl &&
+            fields.transaction?.result === 'unknown'
+        ) {
+            if (state.options.features.fullPageRedirect) {
+                window.location = fields.transaction?.approvalUrl;
+            } else {
+                handleApprovalUrl({ fields, payload });
+            }
+        } else {
+            Events.purchaseCompleted.dispatch(fields);
+        }
+    } catch (error) {
+        showError(error);
+        return error;
     }
-    return fields;
-  } catch (error) {
-    showError(error);
-    return error;
-  }
 }