@rebilly/instruments 1.0.1-beta → 1.0.2-beta.10

package/src/functions/purchase.js

@@ -1,73 +1,33 @@
-import zoid from 'zoid';
+import { postPurchase } from '../storefront/purchase';
 import Events from '../events';
+import { mountModal } from '../views/modal';
 
-function zoidComponentClose(purchase) {
-  return async () => {
-    try {
-      this.storefront.setSessionToken(purchase.token);
-      const [
-        {fields: transaction},
-        {fields: invoice}
-      ] = await Promise.all([
-        this.storefront.transactions.get({id: purchase.transaction.id}),
-        this.storefront.invoices.get({id: purchase.invoice.id})
-      ]);
-  
-      const updatedPurchase = {
-        ...purchase,
-        transaction,
-        invoice
-      }
-  
-      Events.purchaseComplete.dispatch(updatedPurchase);
-    } catch (e) {
-      Events.purchaseComplete.dispatch(e);
-    }
-  }
-}
-
-function openApprovalUrl(purchase) {
-  function containerTemplate({ doc, uid, focus }) {
-    const container = doc.createElement('div');
-    const text = doc.createElement('p');
-    text.innerText = 'Click here to show popup window'
-    container.id = uid;
-    container.append(text);
-    container.classList.add('rebilly-instruments-overlay');
-    container.addEventListener('click', focus);
-    return container;
-  };
-
-  const {paymentMethodsUrl} = this.options._computed;
-  const zoidComponent = zoid.create({
-    tag: 'rebilly-instruments-approval-url',
-    url: `${paymentMethodsUrl}/approval-url`,
-    defaultContext: 'popup',
-    dimensions: {
-      width: '600px',
-      height: '600px',
-    },
-    containerTemplate,
-  });
-
-  zoidComponent({
-    RebillyInstruments: {
-      approvalUrl: purchase.transaction.approvalUrl
-    },
-    onClose: zoidComponentClose.call(this, purchase)
-  }).render();
-}
-
-export async function Purchase (purchasePayload) {
+export async function purchase({ state, payload: purchasePayload }) {
   try {
-    const {fields: purchase} = await this._postPurchase(purchasePayload);
+    const { fields: purchaseFields } = await postPurchase({
+      state,
+      data: purchasePayload
+    });
 
-    if (purchase.transaction.approvalUrl) {
-      openApprovalUrl.call(this, purchase);
+    if (purchaseFields.transaction.approvalUrl) {
+      const { paymentMethodsUrl } = state.options._computed;
+      mountModal({
+        state,
+        name: 'rebilly-instruments-approval-url',
+        url: `${paymentMethodsUrl}/approval-url`,
+        model: {
+          purchase: purchaseFields
+        },
+        close: (updatedPurchase) => {
+          // TODO: Check if this is purchase...
+          Events.purchaseCompleted.dispatch(updatedPurchase);
+        }
+      });
     } else {
-      Events.purchaseComplete.dispatch(purchase);
+      Events.purchaseCompleted.dispatch(purchaseFields);
     }
-  } catch(error) {
+    return purchaseFields;
+  } catch (error) {
     // TODO: Display error to customer
     return error;
   }

package/src/functions/purchase.spec.js

@@ -3,6 +3,7 @@ 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 purchase', () => {
   it('should be able to make a purchase', async () => {
@@ -11,9 +12,7 @@ describe('RebillyInstruments purchase', () => {
     };
     const options = {
       intent: {
-        items: [
-          { planId: 'test-plan-id', quantity: 1 }
-        ]
+        items: [{ planId: 'test-plan-id', quantity: 1 }]
       }
     };
 
@@ -39,16 +38,16 @@ describe('RebillyInstruments purchase', () => {
 
     when(post(`${storefrontURL}/purchase`)).thenReturn(ok(fields));
     const rebillyInstruments = MockRebillyInstruments(configs, options);
-    jest.spyOn(rebillyInstruments.storefront.purchase, 'purchase');
-    jest.spyOn(Events.purchaseComplete, 'dispatch');
+    jest.spyOn(rebillyInstruments.state.storefront.purchase, 'purchase');
+    jest.spyOn(Events.purchaseCompleted, 'dispatch');
 
-    const purchaseCompleteListener = jest.fn();
+    const purchaseCompletedListener = jest.fn();
 
-    rebillyInstruments.on('purchase-complete', purchaseCompleteListener);
+    rebillyInstruments.on('purchase-completed', purchaseCompletedListener);
 
     const purchasePayload = {
-      websiteId: rebillyInstruments.configs.websiteId,
-      items: rebillyInstruments.options.intent.items,
+      websiteId: rebillyInstruments.state.configs.websiteId,
+      items: rebillyInstruments.state.options.intent.items,
       billingAddress,
       deliveryAddress,
       paymentInstruction: {
@@ -58,16 +57,19 @@ describe('RebillyInstruments purchase', () => {
 
     await rebillyInstruments.purchase(purchasePayload);
 
-    expect(rebillyInstruments.storefront.purchase.purchase).toBeCalledTimes(1);
-    expect(rebillyInstruments.storefront.purchase.purchase).toBeCalledWith(
-      expect.objectContaining({data: purchasePayload})
-    );
+    expect(
+      rebillyInstruments.state.storefront.purchase.purchase
+    ).toBeCalledTimes(1);
+    expect(
+      rebillyInstruments.state.storefront.purchase.purchase
+    ).toBeCalledWith(expect.objectContaining({ data: purchasePayload }));
 
-    expect(Events.purchaseComplete.dispatch).toBeCalledTimes(1);
+    expect(Events.purchaseCompleted.dispatch).toBeCalledTimes(1);
 
-    expect(purchaseCompleteListener).toBeCalledTimes(1);
-    expect(purchaseCompleteListener).toBeCalledWith(
+    expect(purchaseCompletedListener).toBeCalledTimes(1);
+    expect(purchaseCompletedListener).toBeCalledWith(
       expect.objectContaining(fields)
     );
+    await avoidUnhandledPromises();
   });
-});
+});

package/src/functions/show.js

@@ -1,17 +1,37 @@
+import { mountConfirmation } from '../views/confirmation';
+import { mountResult } from '../views/result';
+
+/**
+ @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 {string} componentName - The name of the component to render to the form
- * @param {function} payload - The extra data to provide the component
+ * @param {ShowParams} params
  */
-export async function Show (componentName, payload = {}) {
-  switch(componentName) {
+export async function show({ componentName, payload, state }) {
+  switch (componentName) {
     case 'result':
-      this._mountResult.call(this, payload);
+      state.iframeComponents = state.iframeComponents.filter((iframe) => {
+        iframe.destroy();
+        return false;
+      });
+      payload.state = state;
+      mountResult(payload);
       break;
     case 'confirmation':
-      this._mountConfirmation.call(this, payload);
+      state.iframeComponents = state.iframeComponents.filter((iframe) => {
+        iframe.destroy();
+        return false;
+      });
+      payload.state = state;
+      mountConfirmation(payload);
       break;
     default:
-      throw new Error(`'${componentName}' not a supported component'`);
+      throw new Error(`'${componentName}' not a supported component`);
   }
 }

package/src/functions/show.spec.js

@@ -0,0 +1,61 @@
+import * as result from '@/views/result';
+import * as confirmation from '@/views/confirmation';
+import { MockRebillyInstruments } from 'tests/mocks/rebilly-instruments-mock';
+import { show } from './show';
+import { RebillyInstrumentsInstance } from '../index';
+
+const iframeMock = { destroy: jest.fn() };
+
+describe('RebillyInstruments show', () => {
+  it('should show result component', async () => {
+    const mountResult = jest
+      .spyOn(result, 'mountResult')
+      .mockReturnValue(Promise.resolve());
+
+    const instance = new RebillyInstrumentsInstance();
+    instance.state.iframeComponents.push(iframeMock);
+
+    const payload = {
+      test: 'value'
+    };
+
+    await instance.show('result', payload);
+
+    expect(mountResult).toBeCalledTimes(1);
+    expect(mountResult).toBeCalledWith(payload);
+    expect(instance.state.iframeComponents).toEqual([]);
+  });
+
+  it('should show confirmation component', async () => {
+    const mountConfirmation = jest
+      .spyOn(confirmation, 'mountConfirmation')
+      .mockReturnValue(Promise.resolve());
+
+    const instance = new RebillyInstrumentsInstance();
+    instance.state.iframeComponents.push(iframeMock);
+
+    const payload = {
+      test: 'value'
+    };
+
+    await instance.show('confirmation', payload);
+
+    expect(mountConfirmation).toBeCalledTimes(1);
+    expect(mountConfirmation).toBeCalledWith(payload);
+    expect(instance.state.iframeComponents).toEqual([]);
+  });
+
+  it('should fail for non supported component', async () => {
+    const rebillyInstruments = MockRebillyInstruments();
+
+    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,3 +1,50 @@
-export function Update () {
-  console.error('Update no yet implemented');
-};
+import merge from 'lodash.merge';
+import isEqual from 'lodash.isequal';
+import { destroy } from './destroy';
+import { initialize } from './initialize';
+import { mount } from './mount';
+
+export async function update(state, newConfig) {
+  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 temporaryDisableRealTimeLocaleUpdate = true;
+
+  const updatingJustLocale =
+    newConfig?.options && isEqual(Object.keys(newConfig?.options), ['locale']);
+  if (updatingJustLocale && !temporaryDisableRealTimeLocaleUpdate) {
+    const updatedOptions = merge(state.options, newConfig.options);
+    const newLocale = newConfig?.options.locale;
+    state.options = updatedOptions;
+    state.translate.updateTranslationsToNewLocale(newLocale);
+    state.iframeComponents.forEach((iframe) =>
+      iframe.component.call('changeLocale', newLocale)
+    );
+    return;
+  }
+  // Check if the provided intent items object is different to avoid merging the items entries
+  if (
+    newConfig?.options?.intent?.items &&
+    !isEqual(state.options.intent.items, newConfig?.options?.intent?.items)
+  ) {
+    state.options.intent.items = newConfig?.options?.intent?.items;
+  }
+  const updatedOptions = merge(state.options, newConfig.options);
+  await destroy({ state });
+
+  initialize({ state, configs: state.configs });
+
+  mount({
+    state,
+    form: state.form,
+    summary: state.summary,
+    options: updatedOptions,
+    _dev: state._dev
+  });
+}

package/src/functions/update.spec.js

@@ -0,0 +1,107 @@
+import { RenderMockRebillyInstruments } from 'tests/mocks/rebilly-instruments-mock';
+import { avoidUnhandledPromises } from 'tests/async-utilities';
+
+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 = jest.fn();
+    // Simulate mounted iframe
+    const fakeIFrameComponent = {
+      destroy: jest.fn(),
+      component: {
+        call
+      }
+    };
+    rebillyInstruments.state.iframeComponents = [fakeIFrameComponent];
+
+    await rebillyInstruments.update({ options: { 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 = jest.fn();
+    // Simulate mounted iframe
+    const fakeIFrameComponent = {
+      destroy: jest.fn(),
+      component: {
+        call
+      }
+    };
+    rebillyInstruments.state.iframeComponents = [fakeIFrameComponent];
+
+    await rebillyInstruments.update({
+      options: { intent: { countryCode: 'ES' } }
+    });
+
+    expect(rebillyInstruments.state.options.intent.countryCode).toEqual('ES');
+    expect(formElement.innerHTML).toEqual('');
+    expect(summaryElement.innerHTML).toEqual('');
+    await avoidUnhandledPromises();
+  });
+  it('should replace the intent 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 = jest.fn();
+    // Simulate mounted iframe
+    const fakeIFrameComponent = {
+      destroy: jest.fn(),
+      component: {
+        call
+      }
+    };
+    rebillyInstruments.iframeComponents = [fakeIFrameComponent];
+
+    await rebillyInstruments.update({
+      options: {
+        intent: {
+          items: [
+            {
+              planId: 'test-plan-id-1',
+              quantity: 5
+            }
+          ]
+        }
+      }
+    });
+
+    expect(rebillyInstruments.state.options.intent.items[0].quantity).toEqual(5);
+    expect(formElement.innerHTML).toEqual('');
+    expect(summaryElement.innerHTML).toEqual('');
+    await avoidUnhandledPromises();
+  });
+});

package/src/i18n/i18n.spec.js

@@ -1,5 +1,5 @@
 import { Translate } from './index';
- 
+
 describe('i18n Class', () => {
   const canTranslate = document.createElement('div');
   canTranslate.innerHTML = 'Discounts';
@@ -16,9 +16,11 @@ describe('i18n Class', () => {
     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');
   });

package/src/i18n/index.js

@@ -1,7 +1,7 @@
-import { merge } from 'lodash';
+import merge from 'lodash.merge';
 import en from './en.json';
 import es from './es.json';
- 
+
 export class Translate {
   constructor() {
     this.locale = '';
@@ -12,15 +12,18 @@ export class Translate {
   init(locale, messages) {
     this.items = document.querySelectorAll('[data-rebilly-i18n]');
     this.locale = this.getLocale(locale);
-    this.languages = merge({...en, ...es}, messages);
+    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(this.languages[this.locale], item.dataset.rebillyI18n);
+      return this.items.forEach((item) => {
+        const translate = this.getTranslation(
+          this.languages[this.locale],
+          item.dataset.rebillyI18n
+        );
         if (translate) {
           item.innerHTML = translate;
         }
@@ -29,9 +32,13 @@ export class Translate {
     return false;
   }
 
+  updateTranslationsToNewLocale(newLocale) {
+    this.locale = newLocale;
+    this.translateItems();
+  }
+
   getLocale(locale = this.locale) {
-    if (!locale.includes('-')
-      || locale in this.languages) {
+    if (!locale.includes('-') || locale in this.languages) {
       return locale;
     }
     locale = locale.replace(/[-._]\w+$/gi, '');
@@ -40,12 +47,13 @@ export class Translate {
 
   translateItem(item) {
     const locale = this.getLocale();
-    return this.getTranslation(this.languages[locale], item.dataset.rebillyI18n);
+    return this.getTranslation(
+      this.languages[locale],
+      item.dataset.rebillyI18n
+    );
   }
 
   getTranslation(lan = this.locale, prop) {
-    return prop
-      .split('.')
-      .reduce((acc, val) => acc?.[val], lan);
+    return prop.split('.').reduce((acc, val) => acc?.[val], lan);
   }
 }

package/src/index.js

@@ -1,28 +1,15 @@
-import { Initialize } from "./functions/initialize";
-import { Mount } from './functions/mount';
-import { Update } from './functions/update';
-import { Destroy } from './functions/destroy';
-import { Purchase } from './functions/purchase';
-import { Show } from './functions/show';
-import { On } from './functions/on';
-
-import { FetchReadyToPay } from './storefront/ready-to-pay';
-import { FetchSummary } from './storefront/summary';
-import { FetchPlans } from './storefront/plans';
-import { FetchProducts } from './storefront/products';
-import { PostPurchase } from './storefront/purchase';
-
-import { MountSummary } from './components/summary';
-import { MountForm } from './components/form/form';
-import { MountConfirmation } from './components/confirmation';
-import { MountResult } from './components/result';
-
+import { mount } from './functions/mount';
+import { purchase } from './functions/purchase';
+import { on } from './functions/on';
+import { update } from './functions/update';
+import { destroy } from './functions/destroy';
 import { Loader } from './loader';
 import { Translate } from './i18n';
+import { initialize } from './functions/initialize';
+import { show } from './functions/show';
 
-export class RebillyInstrumentsInstance {
+export class InstrumentsState {
   constructor() {
-    this.configs = null;
     this.options = null;
     this.mountingPoints = null;
     this.storefront = null;
@@ -30,38 +17,45 @@ export class RebillyInstrumentsInstance {
     this.summary = null;
     this.loader = new Loader();
     this.translate = new Translate();
-    this.zoidComponents = {};
+    this.iframeComponents = [];
+    this.hasMounted = false;
+  }
+}
 
-    const functionsMap = {
-      // "Private" functions
-      _fetchReadyToPay: FetchReadyToPay,
-      _fetchSummary: FetchSummary,
-      _fetchPlans: FetchPlans,
-      _fetchProducts: FetchProducts,
-      _postPurchase: PostPurchase,
+export class RebillyInstrumentsInstance {
+  constructor() {
+    this.state = new InstrumentsState();
+    // TODO: mountConfirmation, mountResult have different contract shape when they look similar
+    // TODO: review test coverage of UpdateSummary and UpdateMethodSelector as no tests were broken
+    // when commenting them
+  }
 
-      _mountSummary: MountSummary,
-      _mountForm: MountForm,
-      _mountConfirmation: MountConfirmation,
-      _mountResult: MountResult,
+  initialize(configs) {
+    initialize({ state: this.state, configs });
+  }
 
-      // Public Functions
-      initialize: Initialize,
-      mount: Mount,
-      update: Update,
-      destroy: Destroy,
-      purchase: Purchase,
-      show: Show,
-      on: On,
-    };
+  async mount(options) {
+    await mount({ state: this.state, ...options });
+  }
+
+  async destroy() {
+    await destroy({ state: this.state });
+  }
+
+  async update(newConfig) {
+    await update(this.state, newConfig);
+  }
+
+  async purchase(payload) {
+    await purchase({ state: this.state, payload });
+  }
+
+  async show(componentName, payload) {
+    await show({ componentName, payload, state: this.state });
+  }
 
-    // eslint-disable-next-line no-restricted-syntax
-    for (const local of Object.keys(functionsMap)) {
-      // eslint-disable-next-line func-names
-      this[local] = function(...args) {
-        return functionsMap[local].apply(this, args);
-      }
-    }
+  on(eventName, callback) {
+    on({ eventName, callback });
   }
 }