@rebilly/instruments 1.0.2-beta.9 → 3.0.0-beta.0

package/src/functions/setup.js

@@ -0,0 +1,48 @@
+import { setupPaymentInstrument } from '../storefront/payment-instruments';
+import Events from '../events';
+import { mountModal } from '../views/modal';
+import { DataInstance } from './mount/fetch-data';
+
+export async function setup({ state, payload }) {
+  try {
+    const {instrument, transaction} = await setupPaymentInstrument({
+      state,
+      data: {
+        token: payload._raw.id,
+        websiteId: state.options?.websiteId,
+        ...payload
+      }
+    });
+
+    state.data = new DataInstance({state, instrument, transaction});
+
+    if (transaction.approvalUrl) {
+      const { paymentMethodsUrl } = state.options._computed;
+      mountModal({
+        state,
+        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) {
+    // TODO: Display error to customer
+    console.error(error);
+    if(error.status === 422) {
+      error.details.forEach(e => console.error(e));
+    }
+    return error;
+  }
+}

package/src/functions/setup.spec.js

@@ -0,0 +1,98 @@
+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 = jest.spyOn(rebillyInstruments.state.storefront.paymentInstruments, 'create');
+    const spySetupPaymentInstrument = jest.spyOn(rebillyInstruments.state.storefront.paymentInstruments, 'setup');
+    const spyDispatchSetupCompleted = jest.spyOn(Events.setupCompleted, 'dispatch');
+
+    const setupCompletedListener = jest.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,23 +1,33 @@
+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.iframeComponents = this.iframeComponents.filter(iframe => {
-        iframe.component.destroy();
+      state.iframeComponents = state.iframeComponents.filter((iframe) => {
+        iframe.destroy();
         return false;
       });
-      this._mountResult.call(this, payload);
+      mountResult({payload, state});
       break;
     case 'confirmation':
-      this.iframeComponents = this.iframeComponents.filter(iframe => {
-        iframe.component.destroy();
+      state.iframeComponents = state.iframeComponents.filter((iframe) => {
+        iframe.destroy();
         return false;
       });
-      this._mountConfirmation.call(this, payload);
+      mountConfirmation({payload, state});
       break;
     default:
       throw new Error(`'${componentName}' not a supported component`);

package/src/functions/show.spec.js

@@ -1,39 +1,60 @@
-import { MockRebillyInstruments } from 'tests/mocks/rebilly-instruments-mock';
+import * as result from '@/views/result';
+import * as confirmation from '@/views/confirmation';
+import { RenderMockRebillyInstruments } from 'tests/mocks/rebilly-instruments-mock';
+import { RebillyInstrumentsInstance } from '../index';
+
+const iframeMock = { destroy: jest.fn() };
 
 describe('RebillyInstruments show', () => {
-  it('should show result component', () => {
+  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'
     };
-    const rebillyInstruments = MockRebillyInstruments();
 
-    rebillyInstruments._mountResult = jest.fn();
-    
-    rebillyInstruments.show('result', payload);
+    await instance.show('result', payload);
 
-    expect(rebillyInstruments._mountResult).toBeCalledTimes(1);
-    expect(rebillyInstruments._mountResult).toBeCalledWith(payload);
+    expect(mountResult).toBeCalledTimes(1);
+    expect(mountResult).toBeCalledWith({payload, state: instance.state});
+    expect(instance.state.iframeComponents).toEqual([]);
   });
 
-  it('should show confirmation component', () => {
+  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'
     };
-    const rebillyInstruments = MockRebillyInstruments();
 
-    rebillyInstruments._mountConfirmation = jest.fn();
-    
-    rebillyInstruments.show('confirmation', payload);
+    await instance.show('confirmation', payload);
 
-    expect(rebillyInstruments._mountConfirmation).toBeCalledTimes(1);
-    expect(rebillyInstruments._mountConfirmation).toBeCalledWith(payload);
+    expect(mountConfirmation).toBeCalledTimes(1);
+    expect(mountConfirmation).toBeCalledWith({payload, state: instance.state});
+    expect(instance.state.iframeComponents).toEqual([]);
   });
 
-  it('should fail for non supported component', () => {
-    const rebillyInstruments = MockRebillyInstruments();
-
-    expect(async () => {
-      rebillyInstruments.show('not-a-component');
-    }).rejects.toEqual(new Error(`'not-a-component' not a supported component`));
+  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,8 +1,28 @@
 import merge from 'lodash.merge';
-import isEqual from 'lodash.isequal';
+import { destroy } from './destroy';
+import { mount } from './mount';
 
-export async function Update (newConfig) {
-  if (!this.hasMounted) {
+function sanitizeOldPurchaseData({newOptions}) {
+  let purchaseData = {};
+  const hasPurchaseDataKeys = Object.keys(newOptions).some(key => [
+    'items',
+    'money',
+    'invoiceId',
+    'transactionId'
+  ].includes(key));
+
+  purchaseData = hasPurchaseDataKeys ? {
+    items: null,
+    money: null,
+    invoiceId: null,
+    transactionId: null
+  } : purchaseData;
+
+  return purchaseData;
+};
+
+export async function update({state, newOptions = {}}) {
+  if (!state.hasMounted) {
     throw Error('Update method cannot be called before mounting instruments');
   }
 
@@ -11,29 +31,32 @@ export async function Update (newConfig) {
    * 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(this.options, newConfig.options); 
-    const newLocale = newConfig?.options.locale;
-    this.options = updatedOptions; 
-    this.translate.updateTranslationsToNewLocale(newLocale);
-    this.iframeComponents.forEach(iframe => iframe.component.call('changeLocale', newLocale));
-    return;
-  }
-  
-  const updatedOptions = merge(this.options, newConfig.options); 
-  await this.destroy()
-
-  this.initialize(this.configs);
-    
-  this.mount({
-    form: this.form,
-    summary: this.summary,
-    options: updatedOptions,
-    _dev: this._dev    
-  })
-};
+  // 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 oldOptions = {
+    ...state.options,
+    ...sanitizeOldPurchaseData({newOptions})
+  };
+
+  const updatedOptions = merge({...oldOptions}, newOptions);
 
+  await destroy({ state });
 
+  mount({
+    state,
+    form: state.form,
+    summary: state.summary,
+    ...updatedOptions,
+  });
+}

package/src/functions/update.spec.js

@@ -1,65 +1,100 @@
 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.hasMounted = false;
-    
+    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'));
+
+    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) 
+  // 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
+    // Simulate mounted iframe
     const fakeIFrameComponent = {
       destroy: jest.fn(),
       component: {
         call
       }
     };
-    rebillyInstruments.iframeComponents = [fakeIFrameComponent];
-  
-    await rebillyInstruments.update({options: {locale: 'ja'}});
+    rebillyInstruments.state.iframeComponents = [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.options.locale).toBe('ja');
-    expect(rebillyInstruments.translate.locale).toBe('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
+    // Simulate mounted iframe
     const fakeIFrameComponent = {
+      destroy: jest.fn(),
+      component: {
+        call
+      }
+    };
+    rebillyInstruments.state.iframeComponents = [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 = jest.fn();
+    // Simulate mounted iframe
+    const fakeIFrameComponent = {
+      destroy: jest.fn(),
       component: {
-        destroy: jest.fn(),
         call
       }
     };
     rebillyInstruments.iframeComponents = [fakeIFrameComponent];
 
-    await rebillyInstruments.update({options: {intent: {countryCode: 'ES'}}});
-    
-    expect(rebillyInstruments.options.intent.countryCode).toEqual('ES');
-    expect(formElement.innerHTML).toEqual('');
-    expect(summaryElement.innerHTML).toEqual('');
+    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

@@ -2,7 +2,7 @@
   "en": {
     "summary": {
       "subTotal": "Sub Total",
-      "discounts": "Discouts",
+      "discounts": "Discounts",
       "taxes": "Taxes",
       "shipping": "Shipping",
       "total": "Total"
@@ -10,7 +10,10 @@
     "form": {
       "expressCheckout": "Express checkout",
       "or": "Or",
-      "popupOverlayText": "Click here to show popup window"
+      "popupOverlayText": "Click here to show popup window",
+      "error": {
+        "noPaymentMethods": "No payment methods available for this transaction, please contact support."
+      }
     },
     "paymentMethods": {
       "payment-card": "Payment card"

package/src/i18n/es.json

@@ -10,7 +10,10 @@
     "form": {
       "expressCheckout": "Chequeo rápido",
       "or": "O pague con",
-      "popupOverlayText": "Haga clic aquí para mostrar la ventana emergente"
+      "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."
+      }
     },
     "paymentMethods": {
       "payment-card": "Tarjeta de crédito"

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.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;
         }
@@ -35,8 +38,7 @@ export class Translate {
   }
 
   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, '');
@@ -45,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);
   }
 }