@rebilly/instruments 2.0.0-beta → 3.0.1-beta.0

package/dist/views/summary.spec.js

@@ -12,7 +12,7 @@ var _i18n = require("../i18n");
 
 var _summary = require("./summary");
 
-var _index = require("../index");
+var _fetchData = require("../functions/mount/fetch-data");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -29,12 +29,60 @@ describe('Summary component', () => {
       options = {},
       summary = summaryElement,
       loader = new _loader.Loader(),
-      translate = new _i18n.Translate()
+      translate = new _i18n.Translate(),
+      data = {}
     } = {}) {
       this.options = options;
       this.summary = summary;
       this.loader = loader;
       this.translate = translate;
+      this.data = new _fetchData.DataInstance({
+        state: {
+          options
+        },
+        previewPurchase: new _summaryModel.default({
+          currency: 'USD',
+          lineItems: [{
+            type: 'debit',
+            description: 'My Awesome Product',
+            unitPrice: 30,
+            quantity: 1,
+            price: 30,
+            productId: 'test-product-1',
+            planId: 'my-awesome-product'
+          }, {
+            type: 'debit',
+            description: 'Awesome T-Shirt',
+            unitPrice: 20,
+            quantity: 2,
+            price: 40,
+            productId: 'test-product-2',
+            planId: 'awesome-t-shirt'
+          }],
+          subtotalAmount: 70,
+          taxAmount: 0,
+          shippingAmount: 0,
+          discountsAmount: 0,
+          total: 70
+        }),
+        plans: [new _planModel.default({
+          name: 'My Awesome Product',
+          id: 'my-awesome-product',
+          productId: 'test-product-1'
+        }), new _planModel.default({
+          name: 'My Awesome T-Shirt',
+          id: 'awesome-t-shirt',
+          productId: 'test-product-2'
+        })],
+        products: [new _productModel.default({
+          name: 'My Awesome Product',
+          id: 'test-product-1'
+        }), new _productModel.default({
+          name: 'My Awesome T-Shirt',
+          id: 'test-product-2'
+        })],
+        ...data
+      });
     }
 
   }
@@ -52,47 +100,6 @@ describe('Summary component', () => {
       thumbnail: ''
     }]
   };
-  const summaryData = new _summaryModel.default({
-    currency: 'USD',
-    lineItems: [{
-      type: 'debit',
-      description: 'My Awesome Product',
-      unitPrice: 30,
-      quantity: 1,
-      price: 30,
-      productId: 'test-product-1',
-      planId: 'my-awesome-product'
-    }, {
-      type: 'debit',
-      description: 'Awesome T-Shirt',
-      unitPrice: 20,
-      quantity: 2,
-      price: 40,
-      productId: 'test-product-2',
-      planId: 'awesome-t-shirt'
-    }],
-    subtotalAmount: 70,
-    taxAmount: 0,
-    shippingAmount: 0,
-    discountsAmount: 0,
-    total: 70
-  });
-  const planData = [new _planModel.default({
-    name: 'My Awesome Product',
-    id: 'my-awesome-product',
-    productId: 'test-product-1'
-  }), new _planModel.default({
-    name: 'My Awesome T-Shirt',
-    id: 'awesome-t-shirt',
-    productId: 'test-product-2'
-  })];
-  const productData = [new _productModel.default({
-    description: 'My Awesome Product',
-    id: 'test-product-1'
-  }), new _productModel.default({
-    description: 'My Awesome T-Shirt',
-    id: 'test-product-2'
-  })];
   it('should render the summary correctly', () => {
     const mountSummaryInstance = new TestMountSummaryInstance({
       options
@@ -100,12 +107,7 @@ describe('Summary component', () => {
 
     mountSummaryInstance.loader.DOM.summary = mountSummaryInstance.summary;
     (0, _summary.mountSummary)({
-      state: mountSummaryInstance,
-      summaryOptions: {
-        summary: summaryData,
-        plans: planData,
-        products: productData
-      }
+      state: mountSummaryInstance
     }); // Number of line items
 
     const itemsContainer = document.querySelector('.rebilly-instruments-summary-line-items');
@@ -115,22 +117,15 @@ describe('Summary component', () => {
     expect(summaryBreakdown).toMatchSnapshot();
   });
   it('should not render the plan description if its falsy', () => {
-    const state = new _index.RebillyInstrumentsInstance();
-    state.options = options;
     const mountSummaryInstance = new TestMountSummaryInstance({
       options
     }); // Making one product description falsy
 
-    summaryData.lineItems[0].description = null; //TODO: improve design to avoid this manual change
+    mountSummaryInstance.data.previewPurchase.lineItems[0].description = null; //TODO: improve design to avoid this manual change
 
     mountSummaryInstance.loader.DOM.summary = mountSummaryInstance.summary;
     (0, _summary.mountSummary)({
-      state: mountSummaryInstance,
-      summaryOptions: {
-        summary: summaryData,
-        plans: planData,
-        products: productData
-      }
+      state: mountSummaryInstance
     }); // Check that only one description is render
 
     const itemsSynopsysDescription = document.querySelectorAll('.rebilly-instruments-summary-line-item-synopsis-description');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rebilly/instruments",
-  "version": "2.0.0-beta",
+  "version": "3.0.1-beta.0",
   "author": "Rebilly",
   "main": "dist/index.js",
   "license": "MIT",
@@ -16,13 +16,15 @@
     "@babel/preset-env": "^7.14.7",
     "@rebilly/risk-data-collector": "^2.0.1",
     "autoprefixer": "^10.3.4",
+    "css": "^3.0.0",
     "lodash.camelcase": "^4.3.0",
     "lodash.isequal": "^4.5.0",
     "lodash.kebabcase": "^4.1.1",
     "lodash.merge": "^4.6.2",
     "popostmate": "^1.6.4",
     "postcss": "^8.3.6",
-    "rebilly-js-sdk": "^42.0.2",
+    "postcss-custom-properties": "^12.0.0",
+    "rebilly-js-sdk": "^44.4.0",
     "values.js": "^2.0.0"
   },
   "devDependencies": {

package/src/events/index.js

@@ -3,7 +3,8 @@ import BaseEvent from './base-event';
 
 const events = {
   instrumentReady: new BaseEvent('instrument-ready'),
-  purchaseCompleted: new BaseEvent('purchase-completed')
+  purchaseCompleted: new BaseEvent('purchase-completed'),
+  setupCompleted: new BaseEvent('setup-completed')
 };
 
 export default events;

package/src/functions/mount/fetch-data.js

@@ -0,0 +1,152 @@
+import { collectData } from '@rebilly/risk-data-collector';
+import { fetchPlans } from '../../storefront/plans';
+import { fetchProducts } from '../../storefront/products';
+import { fetchReadyToPay } from '../../storefront/ready-to-pay';
+import { fetchSummary } from '../../storefront/summary';
+import { fetchInvoice as FetchInvoice } from '../../storefront/invoices';
+import { fetchTransaction as FetchTransaction } from '../../storefront/transactions';
+
+export class DataInstance {
+  constructor({
+    state = {},
+    ...fields
+  } = {}) {
+    Object.entries({
+      ...state.data || {},
+      ...fields
+    }).forEach(([key, value]) => {
+      this[key] = value;
+    });
+
+    this.money = state.options?.money || null;
+  }
+
+  get amountAndCurrency() {
+    let currency;
+    let amount;
+    if (this.previewPurchase) {
+      currency = this.previewPurchase.currency;
+      amount = this.previewPurchase.total;
+    } else if (this.invoice) {
+      currency = this.invoice.currency;
+      amount = this.invoice.amount;
+    } else if (this.transaction) {
+      currency = this.transaction.currency;
+      amount = this.transaction.amount;
+    } else if (this.money) {
+      currency = this.money.currency;
+      amount = this.money.amount;
+    }
+    return {
+      amount,
+      currency
+    }
+  }
+
+  get isPayment() {
+    return (this.invoice || this.transaction || this.money);
+  }
+
+  get isPurchase() {
+    return this.previewPurchase;
+  }
+
+  get summaryItems() {
+    const {
+      discountsAmount = null,
+      shippingAmount = null,
+      subtotalAmount = null,
+      taxAmount = null,
+    } = (this.previewPurchase || this.invoice || {});
+
+    return {
+      discountsAmount,
+      shippingAmount,
+      subtotalAmount,
+      taxAmount
+    }
+  }
+
+  get summaryLineItems() {
+    let lineItems = [];
+    if (this.invoice) {
+      ({
+        items: lineItems = [],
+      } = this.invoice)
+    } else {
+      ({
+        lineItems = [],
+      } = this.previewPurchase || {});
+    }
+
+    return lineItems;
+  }
+
+  get isShippingRequired() {
+    return this.products.some(product => product.requiresShipping);
+  }
+}
+
+export async function fetchData({
+  state = null,
+  riskMetadata = null,
+  summaryPayload = null,
+
+  // Dependancy injectable functions
+  fetchInvoice = FetchInvoice,
+  fetchTransaction = FetchTransaction
+}) {
+  try {
+    let transaction = null;
+    if (state.options?.transactionId) {
+      transaction = await fetchTransaction({data: {
+        id: state.options.transactionId
+      }, state});
+      state.data.transaction = transaction;
+    }
+
+    let invoice = null;
+    if (state.options?.invoiceId || state.data?.transaction?.hasInvoice) {
+      invoice = await fetchInvoice({data: {
+        id: state.options?.invoiceId || state.data?.transaction?.invoiceId
+      }, state});
+      state.data.invoice = invoice;
+    }
+
+    if (!riskMetadata) {
+      const { riskMetadata: data } = await collectData();
+      riskMetadata = data;
+    }
+
+    state.data = new DataInstance({
+      state,
+      invoice,
+      transaction,
+      riskMetadata
+    });
+
+    const [readyToPay, previewPurchase] = await Promise.all([
+      state.data?.readyToPay || fetchReadyToPay({ riskMetadata, state }),
+      state.options.items ? fetchSummary({ data: summaryPayload, state }) : null
+    ]);
+
+    const plans = await fetchPlans({ state });
+    state.data.plans = plans;
+    const products = await fetchProducts({ state });
+
+    return new DataInstance({
+      state,
+      readyToPay,
+      previewPurchase,
+      plans,
+      products,
+      invoice,
+      transaction,
+      riskMetadata
+    });
+  } catch(error) {
+    // console.log(error);
+  }
+
+  return new DataInstance({});
+}

package/src/functions/mount/fetch-data.spec.js

@@ -0,0 +1,238 @@
+import { fetchData, DataInstance } from './fetch-data';
+import TransactionModel from '../../storefront/models/transaction-model';
+
+describe('fetchData function', () => {
+  it('Should use correct invoice id for invoiceId', async () => {
+    const mockFetchInvoice = jest.fn();
+    const invoiceId = 'test-invoice-id';
+    const invoiceState = {
+      options: {
+        invoiceId
+      }
+    }
+
+    fetchData({
+      state: invoiceState,
+      fetchInvoice: mockFetchInvoice
+    });
+    
+    expect(mockFetchInvoice).toBeCalledTimes(1);
+    expect(mockFetchInvoice).toBeCalledWith(
+      expect.objectContaining({
+        data:{
+          id: invoiceId
+        }
+      })
+    );
+  });
+
+  it('Should use correct invoice id for transaction with invoiceIds', async () => {
+    const mockFetchInvoice = jest.fn();
+    const invoiceId = 'test-invoice-id';
+    const invoiceState = {
+      options: {},
+      data: {
+        transaction: new TransactionModel({
+          invoiceIds: [invoiceId]
+        }),
+      }
+    }
+
+    fetchData({
+      state: invoiceState,
+      fetchInvoice: mockFetchInvoice
+    });
+    
+    expect(mockFetchInvoice).toBeCalledTimes(1);
+    expect(mockFetchInvoice).toBeCalledWith(
+      expect.objectContaining({
+        data:{
+          id: invoiceId
+        }
+      })
+    );
+  });
+
+  it('Should not fetch invoice for transaction with no invoice Ids', async () => {
+    const mockFetchInvoice = jest.fn();
+    const invoiceState = {
+      options: {},
+      data: {
+        transaction: new TransactionModel({
+          invoiceIds: []
+        }),
+      }
+    }
+
+    fetchData({
+      state: invoiceState,
+      fetchInvoice: mockFetchInvoice
+    });
+    
+    expect(mockFetchInvoice).toBeCalledTimes(0);
+ 
+  });
+});
+
+describe('DataInstance', () => {
+  it ('Should correctly determine amountAndCurrency', () => {
+    const expectedAmountAndCurrency = {
+      amount: 10,
+      currency: 'USD'
+    }
+    let fetchedData =  new DataInstance({
+      state: {
+        options: {
+          money: {
+            ...expectedAmountAndCurrency
+          }
+        }
+      }
+    });
+    expect(fetchedData.amountAndCurrency).toEqual(
+      expect.objectContaining(expectedAmountAndCurrency)
+    );
+
+    fetchedData =  new DataInstance({
+      previewPurchase: {
+        total: expectedAmountAndCurrency.amount,
+        currency: expectedAmountAndCurrency.currency
+      }
+    });
+    expect(fetchedData.amountAndCurrency).toEqual(
+      expect.objectContaining(expectedAmountAndCurrency)
+    );
+
+    fetchedData =  new DataInstance({
+      invoice: {
+        ...expectedAmountAndCurrency
+      }
+    });
+    expect(fetchedData.amountAndCurrency).toEqual(
+      expect.objectContaining(expectedAmountAndCurrency)
+    );
+
+    fetchedData =  new DataInstance({
+      transaction: {
+        ...expectedAmountAndCurrency
+      }
+    });
+    expect(fetchedData.amountAndCurrency).toEqual(
+      expect.objectContaining(expectedAmountAndCurrency)
+    );
+
+    fetchedData =  new DataInstance();
+    expect(fetchedData.amountAndCurrency).toEqual(
+      expect.objectContaining({
+        amount: undefined,
+        currency: undefined
+      })
+    );
+  });
+
+  it ('Should correctly determine isPayment', () => {
+    let fetchedData = new DataInstance({
+      state: {
+        options: {
+          money: true
+        }
+      }
+    });
+    expect(fetchedData.isPayment).toBeTruthy();
+
+    fetchedData = new DataInstance({
+      invoice: true
+    });
+    expect(fetchedData.isPayment).toBeTruthy();
+
+    fetchedData = new DataInstance({
+      transaction: true
+    });
+    expect(fetchedData.isPayment).toBeTruthy();
+
+    fetchedData = new DataInstance({
+      previewPurchase: true
+    });
+    expect(fetchedData.isPayment).toBeFalsy();
+
+    fetchedData = new DataInstance({});
+    expect(fetchedData.isPayment).toBeFalsy();
+  });
+
+  it ('Should correctly determine isPurchase', () => {
+    let fetchedData = new DataInstance({
+      previewPurchase: true
+    });
+    expect(fetchedData.isPurchase).toBeTruthy();
+    
+    fetchedData = new DataInstance({
+      state: {
+        options: {
+          money: true
+        }
+      }
+    });
+    expect(fetchedData.isPurchase).toBeFalsy();
+
+    fetchedData = new DataInstance({
+      invoice: true
+    });
+    expect(fetchedData.isPurchase).toBeFalsy();
+
+    fetchedData = new DataInstance({
+      transaction: true
+    });
+    expect(fetchedData.isPurchase).toBeFalsy();
+
+    fetchedData = new DataInstance({});
+    expect(fetchedData.isPurchase).toBeFalsy();
+  });
+
+  it ('Should get summaryItems', () => {
+    const expectedSummaryItems = {
+      discountsAmount: 1,
+      shippingAmount: 2,
+      subtotalAmount: 3,
+      taxAmount: 4
+    }
+
+    let fetchedData =  new DataInstance({
+      previewPurchase: {
+        ...expectedSummaryItems
+      }
+    });
+    expect(fetchedData.summaryItems).toEqual(
+      expect.objectContaining(expectedSummaryItems)
+    );
+
+    fetchedData =  new DataInstance({
+      invoice: {
+        ...expectedSummaryItems
+      }
+    });
+    expect(fetchedData.summaryItems).toEqual(
+      expect.objectContaining(expectedSummaryItems)
+    );
+  });
+
+  it ('Should get summaryLineItems', () => {
+    const expectedSummaryLineItems = [{
+      line: 'item'
+    }];
+
+    let fetchedData =  new DataInstance({
+      previewPurchase: {
+        lineItems: expectedSummaryLineItems
+      }
+    });
+    expect(fetchedData.summaryLineItems).toEqual(expectedSummaryLineItems);
+
+    fetchedData =  new DataInstance({
+      invoice: {
+        items: expectedSummaryLineItems
+      }
+    });
+    expect(fetchedData.summaryLineItems).toEqual(expectedSummaryLineItems);
+  });
+});
+