@rebilly/instruments 4.5.0 → 4.6.0

package/src/functions/update.spec.js

@@ -3,101 +3,102 @@ 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'
-    });
+    it('should throw an error when methods are not mounted', async () => {
+        const rebillyInstruments = await RenderMockRebillyInstruments();
+
+        rebillyInstruments.state.hasMounted = false;
 
-    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
+        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();
     });
 
-    expect(rebillyInstruments.state.options.items[0].quantity).toEqual(5);
-    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();
+    });
 });

package/src/i18n/en.json

@@ -1,35 +1,35 @@
 {
-  "en": {
-    "summary": {
-      "subTotal": "Sub Total",
-      "discounts": "Discounts",
-      "taxes": "Taxes",
-      "shipping": "Shipping",
-      "total": "Total"
-    },
-    "deposit": {
-      "goBack": "Choose another amount"
-    },
-    "form": {
-      "expressCheckout": "Express checkout",
-      "or": "Or",
-      "popupOverlayText": "Click here to show popup window",
-      "andMore": "and more",
-      "error": {
-        "noPaymentMethods": "No payment methods available for this transaction, please contact support.",
-        "invoiceIsPaid": "The invoice has been fully paid."
-      },
-      "loaderMessages": {
-        "processingPayment": "Processing payment instrument."
-      },
-      "bumpOffer": {
-        "title": "Yes, I want to upgrade!",
-        "startingAt": "Starting at {basePrice}"
-      }
-    },
-    "paymentMethods": {
-      "payment-card": "Payment card",
-      "ach": "Bank account"
+    "en": {
+        "summary": {
+            "subTotal": "Sub Total",
+            "discounts": "Discounts",
+            "taxes": "Taxes",
+            "shipping": "Shipping",
+            "total": "Total"
+        },
+        "deposit": {
+            "goBack": "Choose another amount"
+        },
+        "form": {
+            "expressCheckout": "Express checkout",
+            "or": "Or",
+            "popupOverlayText": "Click here to show popup window",
+            "andMore": "and more",
+            "error": {
+                "noPaymentMethods": "No payment methods available for this transaction, please contact support.",
+                "invoiceIsPaid": "The invoice has been fully paid."
+            },
+            "loaderMessages": {
+                "processingPayment": "Processing payment instrument."
+            },
+            "bumpOffer": {
+                "title": "Yes, I want to upgrade!",
+                "startingAt": "Starting at {basePrice}"
+            }
+        },
+        "paymentMethods": {
+            "payment-card": "Payment card",
+            "ach": "Bank account"
+        }
     }
-  }
 }

package/src/i18n/es.json

@@ -1,32 +1,32 @@
 {
-  "es": {
-    "summary": {
-      "subTotal": "Sub Total",
-      "discounts": "Descuentos",
-      "taxes": "Impuestos",
-      "shipping": "Envío",
-      "total": "Total"
-    },
-    "deposit": {
-      "goBack": "Elija otro monto a depositar"
-    },
-    "form": {
-      "expressCheckout": "Chequeo rápido",
-      "or": "O pague con",
-      "andMore": "y más",
-      "popupOverlayText": "Haga clic aquí para mostrar la ventana emergente",
-      "error": {
-        "noPaymentMethods": "No hay métodos de pago disponibles para esta transacción, por favor, póngase en contacto con el servicio de asistencia.",
-        "invoiceIsPaid": "La factura ha sido completamente pagada."
-      },
-      "bumpOffer": {
-        "title": "¡Sí, me gustaría actualizar!",
-        "startingAt": "A partir de {basePrice}"
-      }
-    },
-    "paymentMethods": {
-      "payment-card": "Tarjeta de crédito",
-      "ach": "Cuenta bancaria"
+    "es": {
+        "summary": {
+            "subTotal": "Sub Total",
+            "discounts": "Descuentos",
+            "taxes": "Impuestos",
+            "shipping": "Envío",
+            "total": "Total"
+        },
+        "deposit": {
+            "goBack": "Elija otro monto a depositar"
+        },
+        "form": {
+            "expressCheckout": "Chequeo rápido",
+            "or": "O pague con",
+            "andMore": "y más",
+            "popupOverlayText": "Haga clic aquí para mostrar la ventana emergente",
+            "error": {
+                "noPaymentMethods": "No hay métodos de pago disponibles para esta transacción, por favor, póngase en contacto con el servicio de asistencia.",
+                "invoiceIsPaid": "La factura ha sido completamente pagada."
+            },
+            "bumpOffer": {
+                "title": "¡Sí, me gustaría actualizar!",
+                "startingAt": "A partir de {basePrice}"
+            }
+        },
+        "paymentMethods": {
+            "payment-card": "Tarjeta de crédito",
+            "ach": "Cuenta bancaria"
+        }
     }
-  }
 }

package/src/i18n/i18n.spec.js

@@ -1,27 +1,27 @@
 import { Translate } from './index';
 
 describe('i18n Class', () => {
-  const canTranslate = document.createElement('div');
-  canTranslate.innerHTML = 'Discounts';
-  canTranslate.setAttribute('data-rebilly-i18n', 'summary.discounts');
+    const canTranslate = document.createElement('div');
+    canTranslate.innerHTML = 'Discounts';
+    canTranslate.setAttribute('data-rebilly-i18n', 'summary.discounts');
 
-  const canNotTranslate = document.createElement('div');
-  canNotTranslate.innerHTML = 'Untouched';
-  canNotTranslate.setAttribute('data-rebilly-i18n', 'does.not.exist');
+    const canNotTranslate = document.createElement('div');
+    canNotTranslate.innerHTML = 'Untouched';
+    canNotTranslate.setAttribute('data-rebilly-i18n', 'does.not.exist');
 
-  document.body.append(canTranslate);
-  document.body.append(canNotTranslate);
+    document.body.append(canTranslate);
+    document.body.append(canNotTranslate);
 
-  it('can translate element with proper data attribute and skip wrong translation path or languages', () => {
-    const translate = new Translate();
-    translate.init('es-US');
-    translate.translateItems();
+    it('can translate element with proper data attribute and skip wrong translation path or languages', () => {
+        const translate = new Translate();
+        translate.init('es-US');
+        translate.translateItems();
 
-    const [translated, untouched] = document.querySelectorAll(
-      '[data-rebilly-i18n]'
-    );
+        const [translated, untouched] = document.querySelectorAll(
+            '[data-rebilly-i18n]',
+        );
 
-    expect(translated.innerHTML).toEqual('Descuentos');
-    expect(untouched.innerHTML).toEqual('Untouched');
-  });
+        expect(translated.innerHTML).toEqual('Descuentos');
+        expect(untouched.innerHTML).toEqual('Untouched');
+    });
 });

package/src/i18n/index.js

@@ -3,57 +3,57 @@ import en from './en.json';
 import es from './es.json';
 
 export class Translate {
-  constructor() {
-    this.locale = '';
-    this.items = [];
-    this.languages = {};
-  }
-
-  init(locale, messages) {
-    this.items = document.querySelectorAll('[data-rebilly-i18n]');
-    this.locale = this.getLocale(locale);
-    this.languages = merge({}, { ...en, ...es }, messages);
-  }
-
-  translateItems() {
-    this.items = document.querySelectorAll('[data-rebilly-i18n]');
-
-    if (this.locale in this.languages) {
-      return this.items.forEach((item) => {
-        const translate = this.getTranslation(
-          item.dataset.rebillyI18n,
-          this.languages[this.locale],
-        );
-        if (translate) {
-          item.innerHTML = translate;
+    constructor() {
+        this.locale = '';
+        this.items = [];
+        this.languages = {};
+    }
+
+    init(locale, messages) {
+        this.items = document.querySelectorAll('[data-rebilly-i18n]');
+        this.locale = this.getLocale(locale);
+        this.languages = merge({}, { ...en, ...es }, messages);
+    }
+
+    translateItems() {
+        this.items = document.querySelectorAll('[data-rebilly-i18n]');
+
+        if (this.locale in this.languages) {
+            return this.items.forEach((item) => {
+                const translate = this.getTranslation(
+                    item.dataset.rebillyI18n,
+                    this.languages[this.locale],
+                );
+                if (translate) {
+                    item.innerHTML = translate;
+                }
+            });
+        }
+        return false;
+    }
+
+    updateTranslationsToNewLocale(newLocale) {
+        this.locale = newLocale;
+        this.translateItems();
+    }
+
+    getLocale(locale = this.locale) {
+        if (!locale.includes('-') || locale in this.languages) {
+            return locale;
         }
-      });
+        locale = locale.replace(/[-._]\w+$/gi, '');
+        return this.getLocale(locale);
     }
-    return false;
-  }
 
-  updateTranslationsToNewLocale(newLocale) {
-    this.locale = newLocale;
-    this.translateItems();
-  }
+    translateItem(item) {
+        const locale = this.getLocale();
+        return this.getTranslation(
+            item.dataset.rebillyI18n,
+            this.languages[locale],
+        );
+    }
 
-  getLocale(locale = this.locale) {
-    if (!locale.includes('-') || locale in this.languages) {
-      return locale;
+    getTranslation(prop, lan = this.languages[this.locale]) {
+        return prop.split('.').reduce((acc, val) => acc?.[val], lan);
     }
-    locale = locale.replace(/[-._]\w+$/gi, '');
-    return this.getLocale(locale);
-  }
-
-  translateItem(item) {
-    const locale = this.getLocale();
-    return this.getTranslation(
-      item.dataset.rebillyI18n,
-      this.languages[locale],
-    );
-  }
-
-  getTranslation(prop, lan = this.languages[this.locale]) {
-    return prop.split('.').reduce((acc, val) => acc?.[val], lan);
-  }
 }

package/src/instance.js

@@ -9,40 +9,40 @@ import { destroy } from './functions/destroy';
 import { show } from './functions/show';
 
 export class RebillyInstrumentsInstance {
-  constructor() {
-    this.state = state;
-    this.iframes = iframes;
-  }
-
-  async mount(options) {
-    await mount(options);
-  }
-
-  async destroy() {
-    await destroy();
-  }
-
-  async update(newOptions) {
-    await update({newOptions});
-  }
-
-  async purchase(payload) {
-    await purchase({ payload });
-  }
-
-  async setup(payload) {
-    await setup({ payload });
-  }
-
-  async show(componentName, payload) {
-    await show({ componentName, payload });
-  }
-
-  get version() { 
-    return 'RebillyInstruments Ver.[VI]{version}[/VI]';
-  }
-
-  on(eventName, callback) {
-    on({ eventName, callback });
-  }
+    constructor() {
+        this.state = state;
+        this.iframes = iframes;
+    }
+
+    async mount(options) {
+        await mount(options);
+    }
+
+    async destroy() {
+        await destroy();
+    }
+
+    async update(newOptions) {
+        await update({ newOptions });
+    }
+
+    async purchase(payload) {
+        await purchase({ payload });
+    }
+
+    async setup(payload) {
+        await setup({ payload });
+    }
+
+    async show(componentName, payload) {
+        await show({ componentName, payload });
+    }
+
+    get version() {
+        return 'RebillyInstruments Ver.[VI]{version}[/VI]';
+    }
+
+    on(eventName, callback) {
+        on({ eventName, callback });
+    }
 }

package/src/instance.spec.js

@@ -4,39 +4,41 @@ import RebillyInstruments from './index';
 import { RebillyInstrumentsInstance } from './instance';
 
 describe('RebillyInstruments instance', () => {
-  let rebillyInstruments;
+    let rebillyInstruments;
 
-  beforeEach(() => {
-    rebillyInstruments = RebillyInstruments;
-  });
+    beforeEach(() => {
+        rebillyInstruments = RebillyInstruments;
+    });
 
-  it('should have default export as instance of class', () => {
-    expect(RebillyInstruments).toBeInstanceOf(RebillyInstrumentsInstance);
-  });
+    it('should have default export as instance of class', () => {
+        expect(RebillyInstruments).toBeInstanceOf(RebillyInstrumentsInstance);
+    });
 
-  it('should be mountable', async () => {
-    vi.spyOn(rebillyInstruments, 'mount');
+    it('should be mountable', async () => {
+        vi.spyOn(rebillyInstruments, 'mount');
 
-    document.body.innerHTML = `
+        document.body.innerHTML = `
       <div class="form-selector"></div>
       <div class="summary-selector"></div>
     `;
 
-    const options = {
-      form: '.form-selector',
-      summary: '.summary-selector',
-      apiMode: 'sandbox',
-      items: [{
-        planId: 'test-plan-id',
-        quantity: 1,
-      }],
-      setupFramepay: setupFramepayMock,
-    };
-
-    await rebillyInstruments.mount(options);
-
-    expect(rebillyInstruments.mount).toHaveBeenCalledTimes(1);
-    expect(rebillyInstruments.mount).toHaveBeenCalledWith(options);
-    await avoidUnhandledPromises();
-  });
+        const options = {
+            form: '.form-selector',
+            summary: '.summary-selector',
+            apiMode: 'sandbox',
+            items: [
+                {
+                    planId: 'test-plan-id',
+                    quantity: 1,
+                },
+            ],
+            setupFramepay: setupFramepayMock,
+        };
+
+        await rebillyInstruments.mount(options);
+
+        expect(rebillyInstruments.mount).toHaveBeenCalledTimes(1);
+        expect(rebillyInstruments.mount).toHaveBeenCalledWith(options);
+        await avoidUnhandledPromises();
+    });
 });