@rebilly/instruments 4.8.0 → 4.8.2

package/src/views/errors.js

@@ -1,115 +0,0 @@
-const errorTemplate = (error) => {
-    const title = 'Error';
-
-    function displayString(message = null) {
-        if (message === null) {
-            message = 'An unexpected error occurred';
-
-            if (typeof error === 'string') {
-                message = error;
-            }
-
-            if (error.error) {
-                message = error.error;
-            }
-
-            if (error.message) {
-                message = error.message;
-            }
-        }
-
-        return `<p class="rebilly-instruments-error-card-message">${message}</p>`;
-    }
-
-    function displayList() {
-        function displayDetail(detail) {
-            let detailMessage = detail;
-            if (detail['data-rebilly']) {
-                detailMessage = `"${detail['data-rebilly']}" ${detail.error}`;
-            }
-            return detailMessage;
-        }
-
-        if (error.details.length > 1) {
-            return `<ul class="rebilly-instruments-error-card-details">
-        ${error.details
-            .map((detail) => `<li>${displayDetail(detail)}</li>`)
-            .join('')}
-      </ul>`;
-        }
-
-        return displayString(displayDetail(error.details[0]));
-    }
-
-    return `<div class="rebilly-instruments-error-card">
-  <header class="rebilly-instruments-error-card-header">
-    <p class="rebilly-instruments-error-card-title">${title}</p>
-    <button class="rebilly-instruments-error-card-close-button">
-      <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>
-    </button>
-  </header>
-  ${error.details ? displayList() : displayString()}
-</div>`;
-};
-
-export function clearError() {
-    const errorContainer = document.querySelector('#rebilly-instruments-error');
-    if (!errorContainer) return;
-
-    errorContainer.innerHTML = '';
-}
-
-export function showError(error, isCloseable = true) {
-    if (!error) return;
-    const errorContainer = document.querySelector('#rebilly-instruments-error');
-    if (!errorContainer) return;
-
-    errorContainer.innerHTML = errorTemplate(error);
-
-    function clickOutsideError(e) {
-        if (errorContainer.contains(e.target)) return;
-
-        window.removeEventListener('click', clickOutsideError, false);
-        clearError();
-    }
-
-    function windowBlur() {
-        setTimeout(() => {
-            if (document.activeElement.tagName === 'IFRAME') {
-                window.removeEventListener('click', windowBlur, false);
-                clearError();
-            }
-        });
-    }
-
-    const closeButton = document.querySelector(
-        '.rebilly-instruments-error-card-close-button',
-    );
-
-    if (isCloseable) {
-        closeButton.addEventListener('click', clearError);
-
-        window.addEventListener('click', clickOutsideError);
-        window.addEventListener('blur', windowBlur, { once: true });
-    } else {
-        const errorBox = document.querySelector(
-            '.rebilly-instruments-error-card',
-        );
-        errorBox.classList.add('not-closeable');
-        closeButton.remove();
-    }
-
-    if (errorContainer.scrollIntoView) {
-        errorContainer.scrollIntoView({
-            behavior: 'smooth',
-            block: 'end',
-            inline: 'nearest',
-        });
-    }
-    console.error('Rebilly Instruments Error', error);
-
-    // Must focus to ensure window blur event will trigger
-    window.focus();
-}

package/src/views/form.js

@@ -1,61 +0,0 @@
-import state from '../state';
-import iframes from '../state/iframes';
-import { ViewIframe } from './common/iframe';
-import { mountMethodSelector } from './method-selector';
-import { mountAmountSelector } from './amount-selector';
-
-export const baseMethodSelectorHTML = () => `
-<div data-rebilly-instruments="content" class="rebilly-instruments-content">
-  <div data-rebilly-instruments="content-error" id="rebilly-instruments-error"></div>
-  <div data-rebilly-instruments="form"></div>
-</div>
-`;
-
-export async function mountForm() {
-    state.form.innerHTML += baseMethodSelectorHTML();
-    const container = document.querySelector(
-        '[data-rebilly-instruments="form"]',
-    );
-    const { paymentMethodsUrl: url } = state?.options?._computed || {};
-    const name = 'rebilly-instruments-form';
-
-    const modelSafeState = state.toModel();
-    const model = {
-        options: modelSafeState.options,
-        data: modelSafeState.data,
-        mainStyleVars: modelSafeState.mainStyleVars,
-    };
-
-    const args = {
-        name,
-        url: `${url}?name=${name}`,
-        container,
-        model,
-    };
-
-    const iframe = await new ViewIframe(args);
-    iframe.bindEventListeners({ loader: state.loader });
-
-    iframes.form = iframe;
-
-    state.loader.stopLoading({ id: 'rebilly-instruments-form' });
-
-    return {
-        then: (callback) => callback(),
-    };
-}
-
-export function determineFirstView() {
-    if (state.options?.deposit) {
-        mountAmountSelector();
-    } else {
-        mountMethodSelector();
-    }
-}
-
-export function removeForm() {
-    const container = document.querySelector(
-        '[data-rebilly-instruments="form"]',
-    );
-    container.remove();
-}

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

@@ -1,135 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`Methods Selector Component > should inject the proper HTML for express methods 1`] = `
-<div
-  class="rebilly-instruments-form"
-  style="max-width: 750px; position: relative; min-height: calc(calc((4 * var(--rebilly-spacingFormElementMinHeight)) + (2 * var(--rebilly-fontLineHeightBase)) + (2 * var(--rebilly-spacingM)) + var(--rebilly-spacing2xs) + var(--rebilly-fontSizeS) + calc(2 * (var(--rebilly-spacingXs) + var(--rebilly-spacingS))) + var(--rebilly-spacingL)) +  +  + 4px);"
->
-  
-  
-  <div
-    class="rebilly-instruments-loader is-active"
-    style="padding: NaNpx"
-  >
-    
-  
-    <div
-      class="rebilly-instruments-methods-loader"
-    >
-      
-    
-      <div
-        class="rebilly-instruments-loader-form-el is-el-loading"
-      />
-      
-    
-      <div
-        class="rebilly-instruments-divider"
-      >
-        
-      
-        <span
-          class="rebilly-instruments-divider-label"
-        >
-          <span
-            class="is-el-loading"
-          >
-            Divi
-          </span>
-        </span>
-        
-    
-      </div>
-      
-    
-      <div
-        class="rebilly-instruments-loader-display-flex rebilly-instruments-loader-justify-end"
-      >
-        
-      
-        <div
-          class="rebilly-instruments-methods-loader-card-icon is-el-loading"
-        />
-        
-      
-        <div
-          class="rebilly-instruments-methods-loader-card-icon is-el-loading"
-        />
-        
-    
-      </div>
-      
-    
-      <div
-        class="rebilly-instruments-loader-form-el is-el-loading"
-      />
-      
-    
-      <div
-        class="rebilly-instruments-methods-loader-form-fields"
-      >
-        
-      
-        <div
-          class="rebilly-instruments-loader-form-label"
-        >
-          <small
-            class="is-el-loading"
-          >
-            Card holder name
-          </small>
-        </div>
-        
-      
-        <div
-          class="rebilly-instruments-loader-form-el is-el-loading"
-        />
-        
-    
-      </div>
-      
-    
-      <div
-        class="rebilly-instruments-loader-form-el is-button"
-      >
-        Continue
-      </div>
-       
-  
-    </div>
-    
-
-  </div>
-  
-
-
-  <div
-    class="rebilly-instruments-content"
-    data-rebilly-instruments="content"
-  >
-    
-  
-    <div
-      data-rebilly-instruments="content-error"
-      id="rebilly-instruments-error"
-    />
-    
-  
-    <div
-      data-rebilly-instruments="form"
-    >
-      <iframe
-        allow="payment"
-        class="rebilly-instruments-iframe"
-        loading="lazy"
-        name="rebilly-instruments-form"
-        src="https://forms.test.rebilly.dev?name=rebilly-instruments-form"
-      />
-    </div>
-    
-
-  </div>
-  
-
-</div>
-`;

package/src/views/method-selector/express-methods.js

@@ -1,52 +0,0 @@
-export default function mountExpressMethod({ state, id }) {
-    const { Rebilly } = window;
-    const container = document.querySelector(
-        `.rebilly-instruments-${id}-method`,
-    );
-
-    // Hack: The correct way to do this is to accept the options via the framepay package
-    // Will remove once these options are added to framepay
-    function updateApplePayStyling() {
-        const applePayButton = document.querySelector(
-            '#rebilly-apple-pay-button',
-        );
-        const {
-            applePayDisplayOptions: { buttonHeight },
-        } = state.options.digitalWallet.applePay;
-
-        applePayButton.style.margin = '0px';
-        applePayButton.style.width = '100%';
-        applePayButton.style.height = buttonHeight;
-        applePayButton.style.cursor = 'pointer';
-    }
-
-    function mountButton() {
-        if (!container.children.length) {
-            const rebillyMountFunction = {
-                'google-pay': 'googlePay',
-                'pay-pal-billing-agreement': 'paypal',
-                'apple-pay': 'applePay',
-            };
-
-            if (rebillyMountFunction[id]) {
-                Rebilly[rebillyMountFunction[id]].mount(
-                    `.rebilly-instruments-${id}-method`,
-                );
-
-                if (id === 'apple-pay') {
-                    updateApplePayStyling();
-                }
-            } else {
-                console.warn(`method '${id}' is not supported`);
-            }
-        }
-    }
-
-    Rebilly?.on('ready', () => {
-        mountButton();
-    });
-
-    Rebilly?.on('error', (error) => {
-        console.error(error);
-    });
-}

package/src/views/method-selector/generate-digital-wallet.js

@@ -1,53 +0,0 @@
-import state from '../../state';
-import { getMethodData } from './get-method-data';
-
-export function generateDigitalWallet({ expressMethods = [] }) {
-    const output = {};
-
-    const { paymentInstruments } = state.options;
-
-    const transactionData = {
-        countryCode: state.options.countryCode,
-        label: state.options.websiteId,
-    };
-
-    if (state.data?.amountAndCurrency) {
-        const { amount, currency } = state.data.amountAndCurrency;
-        transactionData.amount = amount;
-        transactionData.currency = currency;
-    }
-
-    expressMethods.forEach((method) => {
-        const { METHOD_TYPE } = getMethodData(method);
-
-        if (method.feature?.name === 'Google Pay') {
-            output[METHOD_TYPE] = {
-                transactionData,
-                merchantConfig: {
-                    merchantName: method.feature.merchantName,
-                    merchantOrigin: method.feature.merchantOrigin,
-                },
-                googlePayDisplayOptions:
-                    paymentInstruments.googlePay.displayOptions,
-            };
-        }
-
-        if (method.feature?.name === 'Apple Pay') {
-            output[METHOD_TYPE] = {
-                transactionData,
-                merchantConfig: {
-                    merchantName:
-                        paymentInstruments.applePay?.merchantConfig
-                            ?.merchantName,
-                    // Apple Pay code cannot run in an iframe, and the merchant origin must be
-                    // registered as a merchant domain, so we can just send the current URL.
-                    merchantOrigin: window.location.hostname,
-                },
-                applePayDisplayOptions:
-                    paymentInstruments.applePay.displayOptions,
-            };
-        }
-    });
-
-    return output;
-}

package/src/views/method-selector/generate-digital-wallet.spec.js

@@ -1,121 +0,0 @@
-import { generateDigitalWallet } from './generate-digital-wallet';
-import ReadyToPayModel from '@/storefront/models/ready-to-pay-model';
-import SummaryModel from '@/storefront/models/summary-model';
-import { DataInstance } from '@/functions/mount/fetch-data';
-import state from '@/state';
-
-describe('generateDigitalWallet', () => {
-    function setupState() {
-        state.options = {
-            websiteId: 'test-website-id',
-            countryCode: 'US',
-            paymentInstruments: {
-                googlePay: {
-                    displayOptions: {
-                        buttonColor: 'black',
-                        buttonType: 'plain',
-                        buttonHeight: '48px',
-                    },
-                },
-                applePay: {
-                    displayOptions: {
-                        buttonColor: 'black',
-                        buttonType: 'buy',
-                        buttonHeight: '48px',
-                    },
-                    merchantConfig: {
-                        merchantName: 'Test Store Name',
-                    },
-                },
-            },
-        };
-
-        state.data = new DataInstance({
-            previewPurchase: {
-                total: 1,
-                currency: 'USD',
-            },
-        });
-    }
-
-    it('should generate the correct digital wallet config for Google pay', () => {
-        const expressMethods = [
-            new ReadyToPayModel({
-                method: 'payment-card',
-                feature: {
-                    name: 'Google Pay',
-                    merchantName: 'google-pay-merchant-name',
-                    merchantOrigin: 'google-pay-merchant-origin',
-                },
-                brands: ['Visa'],
-            }),
-        ];
-        setupState();
-
-        const output = generateDigitalWallet({ expressMethods });
-
-        const expectedOutput = {
-            googlePay: {
-                transactionData: {
-                    amount: 1,
-                    currency: 'USD',
-                    countryCode: 'US',
-                    label: 'test-website-id',
-                },
-                merchantConfig: {
-                    merchantName: 'google-pay-merchant-name',
-                    merchantOrigin: 'google-pay-merchant-origin',
-                },
-                googlePayDisplayOptions: {
-                    buttonColor: 'black',
-                    buttonType: 'plain',
-                    buttonHeight: '48px',
-                },
-            },
-        };
-
-        expect(output).toMatchObject(expectedOutput);
-    });
-
-    it('should generate the correct digital wallet config for Apple pay', () => {
-        delete window.location;
-        window.location = new URL(
-            'https://rebilly-apple-pay-test-tunnel.ngrok.io/',
-        );
-
-        const expressMethods = [
-            new ReadyToPayModel({
-                method: 'payment-card',
-                feature: {
-                    name: 'Apple Pay',
-                },
-                brands: ['Visa'],
-            }),
-        ];
-        setupState();
-
-        const output = generateDigitalWallet({ expressMethods });
-
-        const expectedOutput = {
-            applePay: {
-                transactionData: {
-                    amount: 1,
-                    currency: 'USD',
-                    countryCode: 'US',
-                    label: 'test-website-id',
-                },
-                merchantConfig: {
-                    merchantName: 'Test Store Name',
-                    merchantOrigin: 'rebilly-apple-pay-test-tunnel.ngrok.io',
-                },
-                applePayDisplayOptions: {
-                    buttonColor: 'black',
-                    buttonType: 'buy',
-                    buttonHeight: '48px',
-                },
-            },
-        };
-
-        expect(output).toMatchObject(expectedOutput);
-    });
-});

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

@@ -1,56 +0,0 @@
-import merge from 'lodash.merge';
-import state from '../../state';
-
-export function generateFramepayConfig({ methodIds } = {}) {
-    const { options, data } = state;
-
-    const config = {
-        style: options.themeFramepay,
-        locale: options?.locale || 'auto',
-        organizationId: options.organizationId,
-        websiteId: options.websiteId,
-        methods: data.readyToPay,
-    };
-
-    if (methodIds.includes('pay-pal-billing-agreement')) {
-        config.transactionData = merge(
-            typeof config.transactionData === 'object'
-                ? config.transactionData
-                : {},
-            data.amountAndCurrency,
-        );
-        config.paypal = options.paymentInstruments.paypal;
-    }
-
-    if (methodIds.includes('google-pay')) {
-        config.transactionData = merge(
-            typeof config.transactionData === 'object'
-                ? config.transactionData
-                : {},
-            options.digitalWallet.googlePay?.transactionData,
-        );
-        config.googlePay =
-            options.digitalWallet.googlePay.googlePayDisplayOptions;
-    }
-
-    if (methodIds.includes('apple-pay')) {
-        config.transactionData = merge(
-            typeof config.transactionData === 'object'
-                ? config.transactionData
-                : {},
-            options.digitalWallet.applePay?.transactionData,
-        );
-        config.applePay = options.digitalWallet.applePay.applePayDisplayOptions;
-    }
-
-    if (options.publishableKey) {
-        config.publishableKey = options.publishableKey;
-    }
-
-    if (options.jwt) {
-        config.jwt = options.jwt;
-        config.sandbox = options.apiMode === 'sandbox';
-    }
-
-    return config;
-}