@rebilly/instruments 4.8.1 → 4.8.2

package/src/functions/purchase.js

@@ -1,173 +0,0 @@
-import state from '../state';
-import { postPurchase, postPayment } from '../storefront/purchase';
-import Events from '../events';
-import { mountModal } from '../views/modal';
-import { DataInstance } from './mount/fetch-data';
-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;
-}
-
-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;
-}
-
-export function handleApprovalUrl({ fields, payload }) {
-    if (
-        state.options.features.fullPageRedirect &&
-        (payload.redirectUrl || fields.transaction?.approvalUrl)
-    ) {
-        window.location =
-            payload.redirectUrl || fields.transaction?.approvalUrl;
-        return;
-    }
-
-    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;
-    }
-}
-
-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;
-    }
-}

package/src/functions/purchase.spec.js

@@ -1,80 +0,0 @@
-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 { avoidUnhandledPromises } from 'tests/async-utilities';
-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 }],
-        };
-
-        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',
-            },
-        };
-
-        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();
-
-        rebillyInstruments.on('purchase-completed', purchaseCompletedListener);
-
-        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,
-            },
-        };
-
-        await rebillyInstruments.purchase(purchasePayload);
-
-        expect(spyStorefrontPurchase).toBeCalledTimes(1);
-        expect(spyStorefrontPurchase).toBeCalledWith({
-            data: expect.objectContaining(purchasePayloadParsed),
-        });
-
-        expect(Events.purchaseCompleted.dispatch).toBeCalledTimes(1);
-
-        expect(purchaseCompletedListener).toBeCalledTimes(1);
-        expect(purchaseCompletedListener).toBeCalledWith(
-            expect.objectContaining(fields),
-        );
-        await avoidUnhandledPromises();
-    });
-});

package/src/functions/setup.js

@@ -1,66 +0,0 @@
-import state from '../state';
-import { setupPaymentInstrument } from '../storefront/payment-instruments';
-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;
-        }
-
-        const { instrument, transaction } = await setupPaymentInstrument({
-            data: {
-                websiteId: state.options?.websiteId,
-                ...data,
-            },
-        });
-
-        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 });
-        }
-
-        return { instrument, transaction };
-    } catch (error) {
-        showError(error);
-        return error;
-    }
-}

package/src/functions/setup.spec.js

@@ -1,111 +0,0 @@
-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 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 paymentInstrumentFields = {
-            id: 'payment-instrument-id',
-        };
-
-        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);
-
-        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();
-
-        rebillyInstruments.on('setup-completed', setupCompletedListener);
-
-        const setupPayload = {
-            billingAddress,
-            deliveryAddress,
-            ...options.money,
-            _raw: token,
-        };
-
-        rebillyInstruments.mock.data({
-            previewPurchase: {
-                currency: 'USD',
-                total: 30,
-            },
-        });
-
-        await rebillyInstruments.setup(setupPayload);
-
-        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(spyDispatchSetupCompleted).toBeCalledTimes(1);
-
-        expect(setupCompletedListener).toBeCalledTimes(1);
-        expect(setupCompletedListener).toBeCalledWith(
-            expect.objectContaining({
-                instrument: paymentInstrumentFields,
-                transaction: paymentInstrumentSetupFields,
-            }),
-        );
-        await avoidUnhandledPromises();
-    });
-});

package/src/functions/show.js

@@ -1,30 +0,0 @@
-import { mountConfirmation } from '../views/confirmation';
-import { mountResult } from '../views/result';
-import { hideExtraUI as hideMethodSelectorUI } from '../views/method-selector';
-
-/**
- @typedef ShowParams
- @type {Object}
- @property {string} componentName - The name of the component to render to the form.
- @property {object} payload - The extra data to provide the component.
- @property {object} state - The global state.
- */
-
-/**
- * Register events that will be triggered
- * @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`);
-    }
-}

package/src/functions/show.spec.js

@@ -1,62 +0,0 @@
-import * as result from '@/views/result';
-import * as confirmation from '@/views/confirmation';
-import { RebillyInstrumentsInstance } from '@/instance';
-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`,
-        );
-    });
-});

package/src/functions/update.js

@@ -1,40 +0,0 @@
-import merge from 'lodash.merge';
-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',
-        );
-    }
-
-    /**
-     * 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);
-
-    await destroy();
-
-    mount({
-        form: state.form,
-        summary: state.summary,
-        ...updatedOptions,
-    });
-}

package/src/functions/update.spec.js

@@ -1,104 +0,0 @@
-import { RenderMockRebillyInstruments } from 'tests/mocks/rebilly-instruments-mock';
-import { avoidUnhandledPromises } from 'tests/async-utilities';
-import iframes from '@/state/iframes';
-
-describe('RebillyInstruments Update', () => {
-    it('should throw an error when methods are not mounted', async () => {
-        const rebillyInstruments = await RenderMockRebillyInstruments();
-
-        rebillyInstruments.state.hasMounted = false;
-
-        let error;
-        try {
-            await rebillyInstruments.update();
-        } catch (e) {
-            error = e;
-        }
-
-        expect(error).toEqual(
-            new Error(
-                'Update method cannot be called before mounting instruments',
-            ),
-        );
-    });
-
-    // TODO: Un skip this test when we activate real time update (currently disabled by feature toggle in update.js)
-    it.skip('should call changeLocale when updating locale options', async () => {
-        const rebillyInstruments = await RenderMockRebillyInstruments();
-
-        const call = vi.fn();
-        // Simulate mounted iframe
-        const fakeIFrameComponent = {
-            destroy: vi.fn(),
-            component: {
-                call,
-            },
-        };
-        iframes.form = fakeIFrameComponent;
-
-        await rebillyInstruments.update({ locale: 'ja' });
-
-        expect(call).toBeCalledWith('changeLocale', 'ja');
-        // It would be better to match real UI instead of implementation state
-        expect(rebillyInstruments.state.options.locale).toBe('ja');
-        expect(rebillyInstruments.state.translate.locale).toBe('ja');
-    });
-
-    it('should destroy and update when updating options different than locale', async () => {
-        const rebillyInstruments = await RenderMockRebillyInstruments();
-        const formElement = document.querySelector('.form-selector');
-        const summaryElement = document.querySelector('.summary-selector');
-
-        expect(formElement.innerHTML).not.toEqual('');
-        expect(summaryElement.innerHTML).not.toEqual('');
-
-        const call = vi.fn();
-        // Simulate mounted iframe
-        const fakeIFrameComponent = {
-            destroy: vi.fn(),
-            component: {
-                call,
-            },
-        };
-        iframes.form = fakeIFrameComponent;
-
-        await rebillyInstruments.update({
-            countryCode: 'ES',
-        });
-
-        expect(rebillyInstruments.state.options.countryCode).toEqual('ES');
-        await avoidUnhandledPromises();
-    });
-
-    it('should replace the items with different options', async () => {
-        const rebillyInstruments = await RenderMockRebillyInstruments();
-        const formElement = document.querySelector('.form-selector');
-        const summaryElement = document.querySelector('.summary-selector');
-
-        expect(formElement.innerHTML).not.toEqual('');
-        expect(summaryElement.innerHTML).not.toEqual('');
-
-        const call = vi.fn();
-        // Simulate mounted iframe
-        const fakeIFrameComponent = {
-            destroy: vi.fn(),
-            component: {
-                call,
-            },
-        };
-
-        iframes.form = fakeIFrameComponent;
-
-        await rebillyInstruments.update({
-            items: [
-                {
-                    planId: 'test-plan-id-1',
-                    quantity: 5,
-                },
-            ],
-        });
-
-        expect(rebillyInstruments.state.options.items[0].quantity).toEqual(5);
-        await avoidUnhandledPromises();
-    });
-});