@rebilly/instruments 4.4.0 → 4.6.0

package/src/functions/purchase.spec.js

@@ -7,71 +7,74 @@ import Events from '../events';
 import { mapItemsQuantities } from '../utils/quantity';
 
 describe('RebillyInstruments purchase', () => {
-  it('should be able to make a purchase', async () => {
-    const options = {
-      websiteId: 'test-website-id',
-      items: [{ planId: 'test-plan-id', quantity: 1 }]
-    };
+    it('should be able to make a purchase', async () => {
+        const options = {
+            websiteId: 'test-website-id',
+            items: [{ planId: 'test-plan-id', quantity: 1 }],
+        };
 
-    const token = {
-      id: 'test-token-id'
-    };
-    const billingAddress = {
-      billing: 'address'
-    };
-    const deliveryAddress = {
-      delivery: 'address'
-    };
+        const token = {
+            id: 'test-token-id',
+        };
+        const billingAddress = {
+            billing: 'address',
+        };
+        const deliveryAddress = {
+            delivery: 'address',
+        };
 
-    const fields = {
-      orderId: 'test-order-id',
-      invoice: {
-        id: 'test-invoice-id'
-      },
-      transaction: {
-        id: 'test-transaction-id'
-      }
-    };
+        const fields = {
+            orderId: 'test-order-id',
+            invoice: {
+                id: 'test-invoice-id',
+            },
+            transaction: {
+                id: 'test-transaction-id',
+            },
+        };
 
-    when(post(`${storefrontURL}/purchase`)).thenReturn(ok(fields));
-    const rebillyInstruments = await RenderMockRebillyInstruments(options);
-    const spyStorefrontPurchase = vi.spyOn(rebillyInstruments.state.storefront.purchase, 'purchase');
-    vi.spyOn(Events.purchaseCompleted, 'dispatch');
+        when(post(`${storefrontURL}/purchase`)).thenReturn(ok(fields));
+        const rebillyInstruments = await RenderMockRebillyInstruments(options);
+        const spyStorefrontPurchase = vi.spyOn(
+            rebillyInstruments.state.storefront.purchase,
+            'purchase',
+        );
+        vi.spyOn(Events.purchaseCompleted, 'dispatch');
 
-    const purchaseCompletedListener = vi.fn();
+        const purchaseCompletedListener = vi.fn();
 
-    rebillyInstruments.on('purchase-completed', purchaseCompletedListener);
+        rebillyInstruments.on('purchase-completed', purchaseCompletedListener);
 
-    const purchasePayload = {
-      billingAddress,
-      deliveryAddress,
-      _raw: token
-    };
+        const purchasePayload = {
+            billingAddress,
+            deliveryAddress,
+            _raw: token,
+        };
 
-    const purchasePayloadParsed = {
-      websiteId: rebillyInstruments.state.options.websiteId,
-      items: mapItemsQuantities(rebillyInstruments.state.options.items),
-      billingAddress,
-      deliveryAddress,
-      couponIds: [],
-      paymentInstruction: {
-        token: token.id
-      }
-    };
+        const purchasePayloadParsed = {
+            websiteId: rebillyInstruments.state.options.websiteId,
+            items: mapItemsQuantities(rebillyInstruments.state.options.items),
+            billingAddress,
+            deliveryAddress,
+            couponIds: [],
+            paymentInstruction: {
+                token: token.id,
+            },
+        };
 
-    await rebillyInstruments.purchase(purchasePayload);
+        await rebillyInstruments.purchase(purchasePayload);
 
-    expect(spyStorefrontPurchase).toBeCalledTimes(1);
-    expect(spyStorefrontPurchase).toBeCalledWith({
-      data: expect.objectContaining(purchasePayloadParsed)
-    });
+        expect(spyStorefrontPurchase).toBeCalledTimes(1);
+        expect(spyStorefrontPurchase).toBeCalledWith({
+            data: expect.objectContaining(purchasePayloadParsed),
+        });
 
-    expect(Events.purchaseCompleted.dispatch).toBeCalledTimes(1);
+        expect(Events.purchaseCompleted.dispatch).toBeCalledTimes(1);
 
-    expect(purchaseCompletedListener).toBeCalledTimes(1);
-    expect(purchaseCompletedListener).toBeCalledWith(
-      expect.objectContaining(fields)
-    );
-    await avoidUnhandledPromises();
-  });
+        expect(purchaseCompletedListener).toBeCalledTimes(1);
+        expect(purchaseCompletedListener).toBeCalledWith(
+            expect.objectContaining(fields),
+        );
+        await avoidUnhandledPromises();
+    });
 });

package/src/functions/setup.js

@@ -4,59 +4,63 @@ import Events from '../events';
 import { mountModal } from '../views/modal';
 import { DataInstance } from './mount/fetch-data';
 import { showError } from '../views/errors';
- 
+
 export async function setup({ payload }) {
-  try {
-    const {
-      _raw: {
-        id
-      },
-      isExistingInstrument
-    } = payload;
-    delete payload.isExistingInstrument;
-    delete payload._raw;
-  
-    const data = {
-      ...payload
-    };
-  
-    if (isExistingInstrument) {
-      data.paymentInstrumentId = id;
-    } else {
-      data.token = id;
-    }
+    try {
+        const {
+            _raw: { id },
+            isExistingInstrument,
+        } = payload;
+        delete payload.isExistingInstrument;
+        delete payload._raw;
 
-    const {instrument, transaction} = await setupPaymentInstrument({
-      data: {
-        websiteId: state.options?.websiteId,
-        ...data
-      }
-    });
+        const data = {
+            ...payload,
+        };
+
+        if (isExistingInstrument) {
+            data.paymentInstrumentId = id;
+        } else {
+            data.token = id;
+        }
 
-    state.data = new DataInstance({instrument, transaction});
+        const { instrument, transaction } = await setupPaymentInstrument({
+            data: {
+                websiteId: state.options?.websiteId,
+                ...data,
+            },
+        });
 
-    if (transaction.approvalUrl && transaction.result === 'unknown') {
-      const { paymentMethodsUrl } = state.options._computed;
-      mountModal({
-        name: 'rebilly-instruments-approval-url',
-        url: `${paymentMethodsUrl}/approval-url`,
-        model: {
-          setup: {transaction}
-        },
-        close: ({transaction: updatedTransaction = transaction}) => {
-          Events.setupCompleted.dispatch({
-            instrument,
-            transaction: updatedTransaction
-          });
+        state.data = new DataInstance({ instrument, transaction });
+
+        if (transaction.approvalUrl && transaction.result === 'unknown') {
+            if (state.options.features.fullPageRedirect) {
+                window.location = transaction.approvalUrl;
+            } else {
+                const { paymentMethodsUrl } = state.options._computed;
+                mountModal({
+                    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 });
         }
-      });
-    } else {
-      Events.setupCompleted.dispatch({instrument, transaction});
-    }
 
-    return {instrument, transaction};
-  } catch (error) {
-    showError(error);
-    return error;
-  }
+        return { instrument, transaction };
+    } catch (error) {
+        showError(error);
+        return error;
+    }
 }

package/src/functions/setup.spec.js

@@ -6,93 +6,106 @@ import Events from '../events';
 import { avoidUnhandledPromises } from 'tests/async-utilities';
 
 describe('RebillyInstruments setup', () => {
-  it('should be able to setup a payment instrument', async () => {
-    const options = {
-      websiteId: 'test-website-id',
-      money: {
-        amount: 30,
-        currency: 'USD'
-      },
-      transactionType: 'setup'
-    };
+    it('should be able to setup a payment instrument', async () => {
+        const options = {
+            websiteId: 'test-website-id',
+            money: {
+                amount: 30,
+                currency: 'USD',
+            },
+            transactionType: 'setup',
+        };
 
-    const token = {
-      id: 'test-token-id'
-    };
-    const billingAddress = {
-      billing: 'address'
-    };
-    const deliveryAddress = {
-      delivery: 'address'
-    };
+        const token = {
+            id: 'test-token-id',
+        };
+        const billingAddress = {
+            billing: 'address',
+        };
+        const deliveryAddress = {
+            delivery: 'address',
+        };
 
-    const paymentInstrumentFields = {
-      id: 'payment-instrument-id'
-    };
+        const paymentInstrumentFields = {
+            id: 'payment-instrument-id',
+        };
 
-    const paymentInstrumentSetupFields = {
-      id: 'payment-instrument-id',
-      approvalUrl: null,
-    };
+        const paymentInstrumentSetupFields = {
+            id: 'payment-instrument-id',
+            approvalUrl: null,
+        };
 
-    when(post(`${storefrontURL}/payment-instruments`)).thenReturn(ok(paymentInstrumentFields));
-    when(post(`${storefrontURL}/payment-instruments/*/setup`)).thenReturn(ok(paymentInstrumentSetupFields));
-    const rebillyInstruments = await RenderMockRebillyInstruments(options);
+        when(post(`${storefrontURL}/payment-instruments`)).thenReturn(
+            ok(paymentInstrumentFields),
+        );
+        when(post(`${storefrontURL}/payment-instruments/*/setup`)).thenReturn(
+            ok(paymentInstrumentSetupFields),
+        );
+        const rebillyInstruments = await RenderMockRebillyInstruments(options);
 
-    const spyCreatePaymentInstrument = vi.spyOn(rebillyInstruments.state.storefront.paymentInstruments, 'create');
-    const spySetupPaymentInstrument = vi.spyOn(rebillyInstruments.state.storefront.paymentInstruments, 'setup');
-    const spyDispatchSetupCompleted = vi.spyOn(Events.setupCompleted, 'dispatch');
+        const spyCreatePaymentInstrument = vi.spyOn(
+            rebillyInstruments.state.storefront.paymentInstruments,
+            'create',
+        );
+        const spySetupPaymentInstrument = vi.spyOn(
+            rebillyInstruments.state.storefront.paymentInstruments,
+            'setup',
+        );
+        const spyDispatchSetupCompleted = vi.spyOn(
+            Events.setupCompleted,
+            'dispatch',
+        );
 
-    const setupCompletedListener = vi.fn();
+        const setupCompletedListener = vi.fn();
 
-    rebillyInstruments.on('setup-completed', setupCompletedListener);
+        rebillyInstruments.on('setup-completed', setupCompletedListener);
 
-    const setupPayload = {
-      billingAddress,
-      deliveryAddress,
-      ...options.money,
-      _raw: token
-    };
+        const setupPayload = {
+            billingAddress,
+            deliveryAddress,
+            ...options.money,
+            _raw: token,
+        };
 
-    rebillyInstruments.mock.data({
-      previewPurchase: {
-        currency: 'USD',
-        total: 30
-      }
-    });
+        rebillyInstruments.mock.data({
+            previewPurchase: {
+                currency: 'USD',
+                total: 30,
+            },
+        });
 
-    await rebillyInstruments.setup(setupPayload);
+        await rebillyInstruments.setup(setupPayload);
 
-    expect(spyCreatePaymentInstrument).toBeCalledTimes(1);
-    expect(spyCreatePaymentInstrument).toBeCalledWith(
-      expect.objectContaining({
-        data: expect.objectContaining ({
-          token: token.id
-        })
-      })
-    );
+        expect(spyCreatePaymentInstrument).toBeCalledTimes(1);
+        expect(spyCreatePaymentInstrument).toBeCalledWith(
+            expect.objectContaining({
+                data: expect.objectContaining({
+                    token: token.id,
+                }),
+            }),
+        );
 
-    expect(spySetupPaymentInstrument).toBeCalledTimes(1);
-    expect(spySetupPaymentInstrument).toBeCalledWith(
-      expect.objectContaining({
-        id: expect.stringContaining(paymentInstrumentFields.id),
-        data: expect.objectContaining ({
-          websiteId: rebillyInstruments.state.options.websiteId,
-          currency: 'USD',
-          amount: 30
-        })
-      })
-    );
+        expect(spySetupPaymentInstrument).toBeCalledTimes(1);
+        expect(spySetupPaymentInstrument).toBeCalledWith(
+            expect.objectContaining({
+                id: expect.stringContaining(paymentInstrumentFields.id),
+                data: expect.objectContaining({
+                    websiteId: rebillyInstruments.state.options.websiteId,
+                    currency: 'USD',
+                    amount: 30,
+                }),
+            }),
+        );
 
-    expect(spyDispatchSetupCompleted).toBeCalledTimes(1);
+        expect(spyDispatchSetupCompleted).toBeCalledTimes(1);
 
-    expect(setupCompletedListener).toBeCalledTimes(1);
-    expect(setupCompletedListener).toBeCalledWith(
-      expect.objectContaining({
-        instrument: paymentInstrumentFields,
-        transaction: paymentInstrumentSetupFields
-      })
-    );
-    await avoidUnhandledPromises();
-  });
+        expect(setupCompletedListener).toBeCalledTimes(1);
+        expect(setupCompletedListener).toBeCalledWith(
+            expect.objectContaining({
+                instrument: paymentInstrumentFields,
+                transaction: paymentInstrumentSetupFields,
+            }),
+        );
+        await avoidUnhandledPromises();
+    });
 });

package/src/functions/show.js

@@ -1,7 +1,6 @@
-import iframes from '../state/iframes';
 import { mountConfirmation } from '../views/confirmation';
 import { mountResult } from '../views/result';
-import { hideExtraUI as hideMethodSelectorUI} from '../views/method-selector'
+import { hideExtraUI as hideMethodSelectorUI } from '../views/method-selector';
 
 /**
  @typedef ShowParams
@@ -16,16 +15,16 @@ import { hideExtraUI as hideMethodSelectorUI} from '../views/method-selector'
  * @param {ShowParams} params
  */
 export async function show({ componentName, payload }) {
-  switch (componentName) {
-    case 'result':
-      hideMethodSelectorUI();
-      mountResult({ payload });
-      break;
-    case 'confirmation':
-      hideMethodSelectorUI();
-      mountConfirmation({ payload });
-      break;
-    default:
-      throw new Error(`'${componentName}' not a supported component`);
-  }
+    switch (componentName) {
+        case 'result':
+            hideMethodSelectorUI();
+            mountResult({ payload });
+            break;
+        case 'confirmation':
+            hideMethodSelectorUI();
+            mountConfirmation({ payload });
+            break;
+        default:
+            throw new Error(`'${componentName}' not a supported component`);
+    }
 }

package/src/functions/show.spec.js

@@ -6,57 +6,57 @@ import iframes from '@/state/iframes';
 const iframeMock = { destroy: vi.fn() };
 
 describe('RebillyInstruments show', () => {
-  it('should show result component', async () => {
-    const mountResult = vi
-      .spyOn(result, 'mountResult')
-      .mockReturnValue(Promise.resolve());
-
-    const instance = new RebillyInstrumentsInstance();
-
-    const payload = {
-      test: 'value'
-    };
-
-    await instance.show('result', payload);
-
-    expect(mountResult).toBeCalledTimes(1);
-    expect(mountResult).toBeCalledWith(
-      expect.objectContaining({ payload })
-    );
-  });
-
-  it('should show confirmation component', async () => {
-    const mountConfirmation = vi
-      .spyOn(confirmation, 'mountConfirmation')
-      .mockReturnValue(Promise.resolve());
-
-    const instance = new RebillyInstrumentsInstance();
-    iframes.form = iframeMock;
-
-    const payload = {
-      test: 'value'
-    };
-
-    await instance.show('confirmation', payload);
-
-    expect(mountConfirmation).toBeCalledTimes(1);
-    expect(mountConfirmation).toBeCalledWith(
-      expect.objectContaining({payload})
-    );
-    expect(iframes.form).toEqual(iframeMock);
-  });
-
-  it('should fail for non supported component', async () => {
-    const rebillyInstruments = new RebillyInstrumentsInstance();
-
-    let error;
-    try {
-      await rebillyInstruments.show('not-a-component', 'any payload');
-    } catch (e) {
-      error = e;
-    }
-    expect(error.toString()).toBe(
-      `Error: 'not-a-component' not a supported component`
-    );
-  });
+    it('should show result component', async () => {
+        const mountResult = vi
+            .spyOn(result, 'mountResult')
+            .mockReturnValue(Promise.resolve());
+
+        const instance = new RebillyInstrumentsInstance();
+
+        const payload = {
+            test: 'value',
+        };
+
+        await instance.show('result', payload);
+
+        expect(mountResult).toBeCalledTimes(1);
+        expect(mountResult).toBeCalledWith(
+            expect.objectContaining({ payload }),
+        );
+    });
+
+    it('should show confirmation component', async () => {
+        const mountConfirmation = vi
+            .spyOn(confirmation, 'mountConfirmation')
+            .mockReturnValue(Promise.resolve());
+
+        const instance = new RebillyInstrumentsInstance();
+        iframes.form = iframeMock;
+
+        const payload = {
+            test: 'value',
+        };
+
+        await instance.show('confirmation', payload);
+
+        expect(mountConfirmation).toBeCalledTimes(1);
+        expect(mountConfirmation).toBeCalledWith(
+            expect.objectContaining({ payload }),
+        );
+        expect(iframes.form).toEqual(iframeMock);
+    });
+
+    it('should fail for non supported component', async () => {
+        const rebillyInstruments = new RebillyInstrumentsInstance();
+
+        let error;
+        try {
+            await rebillyInstruments.show('not-a-component', 'any payload');
+        } catch (e) {
+            error = e;
+        }
+        expect(error.toString()).toBe(
+            `Error: 'not-a-component' not a supported component`,
+        );
+    });
 });

package/src/functions/update.js

@@ -3,36 +3,38 @@ import state from '../state';
 import { destroy } from './destroy';
 import { mount } from './mount';
 
-export async function update({newOptions = {}}) {
-  if (!state.hasMounted) {
-    throw Error('Update method cannot be called before mounting instruments');
-  }
+export async function update({ newOptions = {} }) {
+    if (!state.hasMounted) {
+        throw Error(
+            'Update method cannot be called before mounting instruments',
+        );
+    }
 
-  /**
-   * Framepay locale option is almost but not fully updatable yet:
-   * https://github.com/Rebilly/framepay/issues/450
-   * That's why this toggle disables real time locale update until that issue is fixed.
-   */
-  // const updatingJustLocale =
-  //   newOptions?.options && isEqual(Object.keys(newOptions), ['locale']);
-  // if (updatingJustLocale) {
-  //   const updatedOptions = merge(state.options, newOptions);
-  //   const newLocale = newOptions?.locale;
-  //   state.options = updatedOptions;
-  //   state.translate.updateTranslationsToNewLocale(newLocale);
-  //   state.iframeComponents.forEach((iframe) =>
-  //     iframe.component.call('changeLocale', newLocale)
-  //   );
-  //   return;
-  // }
+    /**
+     * Framepay locale option is almost but not fully updatable yet:
+     * https://github.com/Rebilly/framepay/issues/450
+     * That's why this toggle disables real time locale update until that issue is fixed.
+     */
+    // const updatingJustLocale =
+    //   newOptions?.options && isEqual(Object.keys(newOptions), ['locale']);
+    // if (updatingJustLocale) {
+    //   const updatedOptions = merge(state.options, newOptions);
+    //   const newLocale = newOptions?.locale;
+    //   state.options = updatedOptions;
+    //   state.translate.updateTranslationsToNewLocale(newLocale);
+    //   state.iframeComponents.forEach((iframe) =>
+    //     iframe.component.call('changeLocale', newLocale)
+    //   );
+    //   return;
+    // }
 
-  const updatedOptions = merge({...state.options}, newOptions);
+    const updatedOptions = merge({ ...state.options }, newOptions);
 
-  await destroy();
+    await destroy();
 
-  mount({
-    form: state.form,
-    summary: state.summary,
-    ...updatedOptions,
-  });
+    mount({
+        form: state.form,
+        summary: state.summary,
+        ...updatedOptions,
+    });
 }