@rebilly/instruments 4.8.0 → 4.8.2

package/src/views/method-selector/generate-framepay-config.spec.js

@@ -1,216 +0,0 @@
-import { generateFramepayConfig } from './generate-framepay-config';
-import state from '@/state';
-
-describe('Generate FramePay Config', () => {
-    beforeEach(() => {
-        state.options = {
-            themeFramepay: {},
-            locale: 'en-CA',
-            organizationId: 'test-organization-id',
-            websiteId: 'test-website-id',
-        };
-        state.data = {
-            readyToPay: [],
-        };
-    });
-
-    it('should generate default config', () => {
-        const config = generateFramepayConfig({
-            state,
-            methodIds: [],
-        });
-
-        const { options, data } = state;
-
-        expect(config).toEqual(
-            expect.objectContaining({
-                style: options.themeFramepay,
-                locale: options.locale,
-                organizationId: options.organizationId,
-                websiteId: options.websiteId,
-                methods: data.readyToPay,
-            }),
-        );
-    });
-
-    it('should add publishableKey', () => {
-        state.options.publishableKey = 'test-publishable-key';
-
-        const config = generateFramepayConfig({
-            state,
-            methodIds: [],
-        });
-
-        expect(config).toEqual(
-            expect.objectContaining({
-                publishableKey: state.options.publishableKey,
-            }),
-        );
-    });
-
-    it('should add jwt', () => {
-        state.options.jwt = 'test-jwt';
-        state.options.apiMode = 'sandbox';
-
-        const config = generateFramepayConfig({
-            state,
-            methodIds: [],
-        });
-
-        expect(config).toEqual(
-            expect.objectContaining({
-                jwt: state.options.jwt,
-                sandbox: true,
-            }),
-        );
-    });
-
-    it('should add configurations for PayPal', () => {
-        state.data.amountAndCurrency = {
-            amount: 10,
-            currency: 'CAD',
-        };
-        state.options.paymentInstruments = {
-            paypal: {
-                test: 'key',
-            },
-        };
-
-        const config = generateFramepayConfig({
-            state,
-            methodIds: ['pay-pal-billing-agreement'],
-        });
-
-        expect(config).toEqual(
-            expect.objectContaining({
-                transactionData: expect.objectContaining(
-                    state.data.amountAndCurrency,
-                ),
-                paypal: state.options.paymentInstruments.paypal,
-            }),
-        );
-    });
-
-    it('should add configurations for Google Pay', () => {
-        state.options.digitalWallet = {
-            googlePay: {
-                transactionData: {
-                    test: 'key',
-                },
-                googlePayDisplayOptions: {
-                    test: 'key',
-                },
-            },
-        };
-
-        const config = generateFramepayConfig({
-            state,
-            methodIds: ['google-pay'],
-        });
-
-        expect(config).toEqual(
-            expect.objectContaining({
-                transactionData: expect.objectContaining(
-                    state.options.digitalWallet.googlePay.transactionData,
-                ),
-                googlePay:
-                    state.options.digitalWallet.googlePay
-                        .googlePayDisplayOptions,
-            }),
-        );
-    });
-
-    it('should add configurations for Apple Pay', () => {
-        state.options.digitalWallet = {
-            applePay: {
-                transactionData: {
-                    test: 'key',
-                },
-                applePayDisplayOptions: {
-                    test: 'key',
-                },
-            },
-        };
-
-        const config = generateFramepayConfig({
-            state,
-            methodIds: ['apple-pay'],
-        });
-
-        expect(config).toEqual(
-            expect.objectContaining({
-                transactionData: expect.objectContaining(
-                    state.options.digitalWallet.applePay.transactionData,
-                ),
-                applePay:
-                    state.options.digitalWallet.applePay.applePayDisplayOptions,
-            }),
-        );
-    });
-
-    it('should add all instrument methods together', () => {
-        state.data.amountAndCurrency = {
-            test: 'key',
-        };
-        state.options = {
-            paymentInstruments: {
-                paypal: {
-                    test: 'key',
-                },
-            },
-            digitalWallet: {
-                googlePay: {
-                    transactionData: {
-                        test: 'key',
-                    },
-                    googlePayDisplayOptions: {
-                        test: 'key',
-                    },
-                },
-                applePay: {
-                    transactionData: {
-                        test: 'key',
-                    },
-                    applePayDisplayOptions: {
-                        test: 'key',
-                    },
-                },
-            },
-        };
-
-        const config = generateFramepayConfig({
-            state,
-            methodIds: ['pay-pal-billing-agreement', 'google-pay', 'apple-pay'],
-        });
-
-        expect(config).toEqual(
-            expect.objectContaining({
-                transactionData: expect.objectContaining(
-                    state.data.amountAndCurrency,
-                ),
-                paypal: state.options.paymentInstruments.paypal,
-            }),
-        );
-
-        expect(config).toEqual(
-            expect.objectContaining({
-                transactionData: expect.objectContaining(
-                    state.options.digitalWallet.googlePay.transactionData,
-                ),
-                googlePay:
-                    state.options.digitalWallet.googlePay
-                        .googlePayDisplayOptions,
-            }),
-        );
-
-        expect(config).toEqual(
-            expect.objectContaining({
-                transactionData: expect.objectContaining(
-                    state.options.digitalWallet.applePay.transactionData,
-                ),
-                applePay:
-                    state.options.digitalWallet.applePay.applePayDisplayOptions,
-            }),
-        );
-    });
-});

package/src/views/method-selector/get-method-data.js

@@ -1,11 +0,0 @@
-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 };
-};

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

@@ -1,25 +0,0 @@
-import state from '../../state';
-
-export function getPaymentMethods() {
-    const result = {
-        expressMethods: [],
-        methods: [],
-    };
-
-    state.data.readyToPay?.forEach((method) => {
-        if (method.metadata.isExpressMethod) {
-            result.expressMethods.push(method);
-        } else {
-            result.methods.push(method);
-        }
-    });
-
-    if (!window.ApplePaySession) {
-        result.expressMethods = result.expressMethods.filter(
-            (method) => method?.feature?.name !== 'Apple Pay',
-        );
-        state.loader.stopLoading({ id: 'applePay-express' });
-    }
-
-    return result;
-}

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

@@ -1,41 +0,0 @@
-import { StorefontTestingInstance } from 'tests/mocks/storefront-mock';
-import { getPaymentMethods } from './get-payment-methods';
-import { ok, post } from 'msw-when-then';
-import { when } from 'tests/msw/server';
-import { storefrontURL } from 'tests/mocks/storefront-api-mock';
-import { fetchReadyToPay } from '@/storefront/ready-to-pay';
-import state from '@/state';
-
-it('should only return the allowed methods', async () => {
-    StorefontTestingInstance();
-    when(post(`${storefrontURL}/ready-to-pay`)).thenReturn(
-        ok([
-            {
-                method: 'payment-card',
-                feature: {
-                    name: 'Google Pay',
-                    merchantName: 'google-pay-merchant-name',
-                    merchantOrigin: 'google-pay-merchant-origin',
-                },
-                brands: ['Visa'],
-                filters: [],
-            },
-            {
-                method: 'fake-method',
-                filters: [],
-            },
-            {
-                method: 'payment-card',
-                brands: ['Visa'],
-                filters: [],
-            },
-        ]),
-    );
-    state.data.readyToPay = await fetchReadyToPay({});
-
-    const results = getPaymentMethods();
-
-    expect(results.hasOwnProperty('expressMethods')).toEqual(true);
-    expect(results['expressMethods'].length).toEqual(1);
-    expect(results['methods'].length).toEqual(1);
-});

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

@@ -1,223 +0,0 @@
-/* eslint-disable no-undef */
-import { collectData } from '@rebilly/risk-data-collector';
-import state from '../../state';
-import iframes from '../../state/iframes';
-import { getPaymentMethods } from './get-payment-methods';
-import { fetchData } from '../../functions/mount/fetch-data';
-import { mountForm } from '../form';
-
-import { mountExpressMethods } from './mount-express-methods';
-import { mountBumpOffer } from './mount-bump-offer';
-import { generateDigitalWallet } from './generate-digital-wallet';
-import { updateSummary } from '../summary';
-import { mountAmountSelector } from '../amount-selector';
-
-function getElement(id, rootElement = state.form) {
-    return rootElement.querySelector(`[data-rebilly-instruments="${id}"]`);
-}
-
-const getBumpOfferElement = () => {
-    const rootDiv = document.createElement('div');
-    rootDiv.classList.add('rebilly-instruments-bump-offers');
-    rootDiv.setAttribute('data-rebilly-instruments', 'bump-offer');
-    return rootDiv;
-};
-
-export function hideExtraUI() {
-    const { expressMethods } = getPaymentMethods();
-
-    if (state.options?.deposit) {
-        const linkElement = getElement('deposit-back');
-        if (linkElement) {
-            linkElement.style.height = '0px';
-            linkElement.style.overflow = 'hidden';
-        }
-    }
-
-    if (expressMethods.length) {
-        const expressMethodsElement = getElement('express-methods');
-        if (expressMethodsElement) {
-            expressMethodsElement.style.height = '0px';
-            expressMethodsElement.style.overflow = 'hidden';
-        }
-    }
-
-    if (state.options?.bumpOffer?.length) {
-        const bumpOfferElement = getElement('bump-offer');
-        if (bumpOfferElement) {
-            bumpOfferElement.style.height = '0px';
-            bumpOfferElement.style.overflow = 'hidden';
-            bumpOfferElement.style.marginBottom = '0px';
-        }
-    }
-}
-
-const backToAmountElement = () => {
-    const template = `
-  <div class="rebilly-instruments-confirmation-go-back-link" style="display: inline-block;margin-bottom: var(--rebilly-spacingM);margin-left: calc(var(--rebilly-spacingXs) * -1);">
-      <a
-        class="rebilly-instruments-link has-icon-left"
-        style="display: inline-flex;color: var(--rebilly-colorPrimary);cursor: pointer;"
-      >
-        <svg
-          class="rebilly-instruments-icon"
-          style="margin-right: var(--rebilly-spacingXs);fill: var(--rebilly-colorPrimary)"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M6.2929 11.2929l5-5c.3905-.3905 1.0237-.3905 1.4142 0 .3905.3905.3905 1.0237 0 1.4142L9.4142 11H17c.5523 0 1 .4477 1 1s-.4477 1-1 1H9.4142l3.293 3.2929c.3904.3905.3904 1.0237 0 1.4142-.3906.3905-1.0238.3905-1.4143 0l-5-5A.9969.9969 0 016 12c0-.2761.112-.5261.2929-.7071z"
-            fill-rule="nonzero"
-          />
-        </svg>
-        <span data-rebilly-i18n="deposit.goBack"></span>
-      </a>
-    </div>
-  `;
-    const rootDiv = document.createElement('div');
-    rootDiv.setAttribute('data-rebilly-instruments', 'deposit-back');
-    rootDiv.innerHTML += template;
-
-    const link = rootDiv.querySelector('.rebilly-instruments-link');
-    link.addEventListener('click', () => {
-        hideExtraUI();
-        mountAmountSelector();
-    });
-
-    return rootDiv;
-};
-
-const expressMethodsElement = ({ expressMethods }) => {
-    const rootDiv = document.createElement('div');
-    rootDiv.classList.add('rebilly-instruments-method-selector');
-    rootDiv.setAttribute('data-rebilly-instruments', 'express-methods');
-    rootDiv.innerHTML = `
-  <div class="rebilly-instruments-express-methods ">
-    <span data-rebilly-i18n="form.expressCheckout" class="rebilly-instruments-express-methods-label">Express checkout</span>
-    <div class="rebilly-instruments-express-methods-container" data-rebilly-instruments="express-methods-container"></div>
-  </div>
-  <div data-rebilly-instruments="divider" class="rebilly-instruments-divider">
-    <span class="rebilly-instruments-divider-label" data-rebilly-i18n="form.or">Or</span>
-  </div>
-  `;
-    const expressMethodsContainer = getElement(
-        'express-methods-container',
-        rootDiv,
-    );
-
-    const useCompactExpressInstruments =
-        state.options.paymentInstruments.compactExpressInstruments &&
-        expressMethods.length;
-    if (useCompactExpressInstruments) {
-        rootDiv.classList.add('has-express-compact');
-        expressMethodsContainer.classList.add('is-compact');
-    }
-
-    return rootDiv;
-};
-
-export async function mountMethodSelector() {
-    const contentEl = getElement('content');
-    const formEl = getElement('form');
-
-    const { expressMethods, methods } = getPaymentMethods();
-
-    if (state.options?.deposit) {
-        const existingDepositBackElement = getElement('deposit-back');
-        if (existingDepositBackElement) {
-            existingDepositBackElement.style.height = 'auto';
-        } else {
-            contentEl.insertBefore(backToAmountElement(), formEl);
-        }
-    }
-
-    if (expressMethods.length) {
-        const existingExpressMethodElement = getElement('express-methods');
-        if (existingExpressMethodElement) {
-            existingExpressMethodElement.style.height = 'auto';
-        } else {
-            contentEl.insertBefore(
-                expressMethodsElement({ expressMethods }),
-                formEl,
-            );
-            state.options.digitalWallet = generateDigitalWallet({
-                expressMethods,
-            });
-            const container = document.querySelector(
-                '[data-rebilly-instruments="express-methods-container"]',
-            );
-            mountExpressMethods({
-                methods: expressMethods,
-                container,
-            });
-        }
-    }
-
-    if (state.options?.bumpOffer?.length) {
-        const existingExpressMethodElement = getElement('bump-offer');
-        if (existingExpressMethodElement) {
-            existingExpressMethodElement.style.height = 'auto';
-            existingExpressMethodElement.style.marginBottom =
-                'calc(var(--rebilly-spacingM) + var(--rebilly-fontSizeS))';
-        } else {
-            contentEl.insertBefore(getBumpOfferElement(), formEl);
-            const container = getElement('bump-offer');
-            mountBumpOffer({
-                container,
-            });
-        }
-    }
-
-    if (methods.length) {
-        const iframe = iframes.form;
-        if (!iframe) {
-            await mountForm();
-        }
-
-        const modelSafeState = state.toModel();
-        const model = {
-            options: modelSafeState.options,
-            data: modelSafeState.data,
-            mainStyleVars: modelSafeState.mainStyleVars,
-        };
-
-        iframe?.component?.call('route', {
-            name: 'method-switch',
-        });
-
-        iframe?.component?.call('update', model);
-
-        iframe?.component?.on('choose-another-method', () => {
-            if (state.data.isPurchase) {
-                updateSummary();
-            }
-            mountMethodSelector();
-        });
-    } else {
-        state.loader.stopLoading({ id: 'rebilly-instruments-form' });
-        state.form.querySelector(
-            '[data-rebilly-instruments="form"]',
-        ).style.display = 'none';
-        document
-            .querySelectorAll('[data-rebilly-instruments="divider"]')
-            .forEach((el) => {
-                el.style.display = 'none';
-            });
-    }
-
-    state.translate.translateItems();
-}
-
-export async function updateMethodSelector() {
-    state.loader.startLoading({ id: 'rebilly-instruments-methods' });
-
-    const { riskMetadata } = await collectData();
-    state.data = await fetchData({ riskMetadata });
-    state.updateModel();
-
-    if (state.data.transaction && state.data.transaction?.type === 'setup') {
-        state.options.transactionType = 'setup';
-    }
-
-    mountMethodSelector();
-}

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

@@ -1,20 +0,0 @@
-import { RenderMockRebillyInstruments } from 'tests/mocks/rebilly-instruments-mock';
-import { updateMethodSelector } from './index';
-
-describe('Methods Selector Component', () => {
-    it('should inject the proper HTML for express methods', async () => {
-        await RenderMockRebillyInstruments({
-            form: '.rebilly-instruments-form',
-        });
-
-        const form = document.querySelector('.rebilly-instruments-form');
-        expect(form).toMatchSnapshot();
-    });
-
-    it('should allow updating method selector', async () => {
-        await RenderMockRebillyInstruments();
-        await updateMethodSelector({
-            mainStyleVars: 'any main style',
-        });
-    });
-});

package/src/views/method-selector/mount-bump-offer.js

@@ -1,120 +0,0 @@
-import state from '../../state';
-import formatCurrency from '../../utils/format-currency';
-import { fetchSummary } from '../../storefront/summary';
-
-function lineItem({ offer }) {
-    const plan = state.data.plans.find((item) => item.id === offer.planId);
-    const product = state.data.products.find(
-        (item) => item.id === plan.productId,
-    );
-
-    const rif = (condition, template) => (condition ? template : '');
-
-    function unitPrice() {
-        const planPricing = plan.pricing.isBracket
-            ? plan.pricing.brackets[0].price
-            : plan.pricing.price;
-
-        const basePrice = formatCurrency(planPricing, plan.currency);
-        return plan.pricing.isBracket
-            ? state.translate
-                  .getTranslation('form.bumpOffer.startingAt')
-                  .replace('{basePrice}', basePrice)
-            : basePrice;
-    }
-
-    const thumbnail = (item) =>
-        rif(
-            item.thumbnail,
-            `
-    <figure class="rebilly-instruments-bump-offer-line-item-figure">
-      <img src="${item.thumbnail}" :alt="${item.name}"/>
-    </figure>
-  `,
-        );
-
-    const synopsis = (item) => `
-    <div class="rebilly-instruments-bump-offer-line-item-synopsis">
-      <p class="rebilly-instruments-bump-offer-line-item-synopsis-title">
-        ${item.name}
-      </p>
-      ${rif(
-          item.description,
-          `
-        <p class="rebilly-instruments-bump-offer-line-item-synopsis-description">
-          ${item.description}
-        </p>
-      `,
-      )}
-    </div>
-  `;
-
-    const breakdown = (item) => `
-    <div class="rebilly-instruments-bump-offer-line-item-price-breakdown">
-      ${rif(
-          item.quantity,
-          `
-        <p class="rebilly-instruments-bump-offer-line-item-price-breakdown-quantity">
-          ${item.quantity}
-        </p>
-        <svg class="rebilly-instruments-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <path d="M12 10.5858l2.8284-2.8284c.3906-.3906 1.0237-.3906 1.4142 0 .3906.3905.3906 1.0236 0 1.4142L13.4142 12l2.8284 2.8284c.3906.3906.3906 1.0237 0 1.4142-.3905.3906-1.0236.3906-1.4142 0L12 13.4142l-2.8284 2.8284c-.3906.3906-1.0237.3906-1.4142 0-.3906-.3905-.3906-1.0236 0-1.4142L10.5858 12 7.7574 9.1716c-.3906-.3906-.3906-1.0237 0-1.4142.3905-.3906 1.0236-.3906 1.4142 0L12 10.5858z" fill-rule="nonzero"/>
-        </svg>
-      `,
-      )}
-      <p class="rebilly-instruments-bump-offer-line-item-price-breakdown-unit-price">
-        ${item.unitPrice}
-      </p>
-    <div>
-  `;
-
-    const line = {
-        ...offer,
-        quantity: plan.pricing.isBracket ? null : offer.quantity,
-        name: product.name,
-        description: plan.name,
-        unitPrice: unitPrice(),
-    };
-
-    return `
-    <div class="rebilly-instruments-bump-offer-line-item">
-      ${thumbnail(line)}
-      ${synopsis(line)}
-      ${breakdown(line)}
-    </div>
-  `;
-}
-
-export function mountBumpOffer({ container }) {
-    container.insertAdjacentHTML(
-        'beforeEnd',
-        `
-    <label for="rebilly-instruments-bump-offer" class="rebilly-instruments-form-field-checkbox">
-      <div class="rebilly-instruments-bump-offer-label" data-rebilly-i18n="form.bumpOffer.title">
-        ${state.translate.getTranslation('form.bumpOffer.title')}
-      </div>
-      <input
-        type="checkbox"
-        id="rebilly-instruments-bump-offer"
-      />
-      <span></span>
-    </label>
-  `,
-    );
-
-    const checkbox = document.getElementById('rebilly-instruments-bump-offer');
-    checkbox.addEventListener('click', async () => {
-        state.data.acceptBumpOffer = checkbox.checked;
-        await fetchSummary();
-        state.updateModel();
-    });
-
-    checkbox.checked = state.data.acceptBumpOffer;
-
-    state.options.bumpOffer.forEach((offer) => {
-        const node = document.createElement('div');
-        node.classList.add('rebilly-instruments-bump-offer');
-        node.insertAdjacentHTML('beforeEnd', lineItem({ offer }));
-        container.appendChild(node);
-    });
-}