@rebilly/instruments 3.16.1-beta.0 → 3.16.4-beta.0

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

@@ -1,9 +1,8 @@
 import { collectData } from '@rebilly/risk-data-collector';
 import { fetchProductsFromPlans } from '../../storefront/fetch-products-from-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 { fetchInvoiceAndProducts as FetchInvoiceAndProducts } from '../../storefront/invoices';
 import { fetchTransaction as FetchTransaction } from '../../storefront/transactions';
 import { fetchAccount as FetchAccount } from '../../storefront/account';
 import { fetchPaymentInstrument as FetchInstruments } from '../../storefront/payment-instruments';
@@ -121,7 +120,7 @@ export async function fetchData({
   riskMetadata = null,
 
   // Dependency injectable functions
-  fetchInvoice = FetchInvoice,
+  fetchInvoiceAndProducts = FetchInvoiceAndProducts,
   fetchTransaction = FetchTransaction,
   fetchAccount = FetchAccount,
   fetchInstruments = FetchInstruments
@@ -140,21 +139,23 @@ export async function fetchData({
       availableInstrumentsPromise = fetchInstruments({state});
     }
 
-    const paymentMethodsMetadataPromise = 
-      state.storefront.rebilly.paymentMethods.getAll().then(
-        ({ items }) => items.map(({fields}) => fields)
-      );
-
     if (state.options?.transactionId) {
       state.data.transaction = await fetchTransaction({data: {
         id: state.options.transactionId
       }, state});
     }
 
+    let productsPromise;
     if (state.options?.invoiceId || state.data?.transaction?.hasInvoice) {
-      state.data.invoice = await fetchInvoice({data: {
-        id: state.options?.invoiceId || state.data?.transaction?.invoiceId
-      }, state});
+      const { invoice, products } = await fetchInvoiceAndProducts(
+        {
+          data: {
+            id: state.options?.invoiceId || state.data?.transaction?.invoiceId
+          },
+        state,
+      });
+      productsPromise = Promise.resolve(products);
+      state.data.invoice = invoice;
     }
 
     if (!riskMetadata) {
@@ -163,17 +164,14 @@ export async function fetchData({
     }
 
     const readyToPayPromise = state.data?.readyToPay ??
-        accountPromise.then(() => fetchReadyToPay({
-          riskMetadata, state, paymentMethodsMetadataPromise
-      }));
+        accountPromise.then(() => fetchReadyToPay({riskMetadata, state}));
 
     const previewPurchasePromise = state.options.items ?
       fetchSummary({ state }) : null;
 
-    let productsPromise;
-    if (state.options?.jwt) {
-      productsPromise = fetchProducts({state});
-    } else {
+    if (!state.options?.jwt) {
+      // There is no invoice, only plans through the static options,
+      // so we should fetch the products from the provided plan names.
       productsPromise = fetchProductsFromPlans({ state });
     }
 

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

@@ -4,7 +4,7 @@ import TransactionModel from '../../storefront/models/transaction-model';
 
 describe('fetchData function', () => {
   it('Should use correct invoice id for invoiceId', async () => {
-    const mockFetchInvoice = jest.fn();
+    const mockFetchInvoiceAndProducts = jest.fn();
     const invoiceId = 'test-invoice-id';
     const state = new StorefontTestingInstance({
       options: {
@@ -14,11 +14,11 @@ describe('fetchData function', () => {
 
     await fetchData({
       state,
-      fetchInvoice: mockFetchInvoice
+      fetchInvoiceAndProducts: mockFetchInvoiceAndProducts
     });
     
-    expect(mockFetchInvoice).toBeCalledTimes(1);
-    expect(mockFetchInvoice).toBeCalledWith(
+    expect(mockFetchInvoiceAndProducts).toBeCalledTimes(1);
+    expect(mockFetchInvoiceAndProducts).toBeCalledWith(
       expect.objectContaining({
         data:{
           id: invoiceId
@@ -28,7 +28,7 @@ describe('fetchData function', () => {
   });
 
   it('Should use correct invoice id for transaction with invoiceIds', async () => {
-    const mockFetchInvoice = jest.fn();
+    const mockFetchInvoiceAndProducts = jest.fn();
     const invoiceId = 'test-invoice-id';
     const state = new StorefontTestingInstance({
       options: {},
@@ -41,11 +41,11 @@ describe('fetchData function', () => {
 
     await fetchData({
       state,
-      fetchInvoice: mockFetchInvoice
+      fetchInvoiceAndProducts: mockFetchInvoiceAndProducts
     });
     
-    expect(mockFetchInvoice).toBeCalledTimes(1);
-    expect(mockFetchInvoice).toBeCalledWith(
+    expect(mockFetchInvoiceAndProducts).toBeCalledTimes(1);
+    expect(mockFetchInvoiceAndProducts).toBeCalledWith(
       expect.objectContaining({
         data:{
           id: invoiceId
@@ -55,7 +55,7 @@ describe('fetchData function', () => {
   });
 
   it('Should not fetch invoice for transaction with no invoice Ids', async () => {
-    const mockFetchInvoice = jest.fn();
+    const mockFetchInvoiceAndProducts = jest.fn();
     const invoiceState = {
       options: {},
       data: {
@@ -67,10 +67,10 @@ describe('fetchData function', () => {
 
     fetchData({
       state: invoiceState,
-      fetchInvoice: mockFetchInvoice
+      fetchInvoiceAndProducts: mockFetchInvoiceAndProducts
     });
     
-    expect(mockFetchInvoice).toBeCalledTimes(0);
+    expect(mockFetchInvoiceAndProducts).toBeCalledTimes(0);
  
   });
 

package/src/functions/mount/index.js

@@ -135,6 +135,11 @@ export async function mount({
     }
     state.i18n({state});
     state.hasMounted = true;
+
+    if (!data.readyToPay.length) {
+      state.loader.stopLoading({id: 'rebilly-instruments-form'});
+      showError(state.translate.getTranslation('form.error.noPaymentMethods'))
+    }
   } catch (error) {
     showError(error);
     throw error;

package/src/functions/mount/setup-storefront.js

@@ -3,13 +3,14 @@ import Storefront from '../../storefront';
 export default ({
   options:{
     publishableKey,
-    orgnizationId,
+    organizationId,
     apiMode,
     _dev
   }
 }) => {
+
   const storefront = {
-    orgnizationId,
+    organizationId,
     mode: apiMode || 'live'
   };
 

package/src/i18n/index.js

@@ -21,8 +21,8 @@ export class Translate {
     if (this.locale in this.languages) {
       return this.items.forEach((item) => {
         const translate = this.getTranslation(
+          item.dataset.rebillyI18n,
           this.languages[this.locale],
-          item.dataset.rebillyI18n
         );
         if (translate) {
           item.innerHTML = translate;
@@ -48,12 +48,12 @@ export class Translate {
   translateItem(item) {
     const locale = this.getLocale();
     return this.getTranslation(
+      item.dataset.rebillyI18n,
       this.languages[locale],
-      item.dataset.rebillyI18n
     );
   }
 
-  getTranslation(lan = this.locale, prop) {
+  getTranslation(prop, lan = this.languages[this.locale]) {
     return prop.split('.').reduce((acc, val) => acc?.[val], lan);
   }
 }

package/src/storefront/invoices.js

@@ -1,11 +1,20 @@
 import InvoiceModel from './models/invoice-model';
+import ProductModel from './models/product-model';
 import { Endpoint } from './index';
 
-export async function fetchInvoice({ data = null, state = null }) {
+export async function fetchInvoiceAndProducts({ data = null, state = null }) {
   return Endpoint({state}, async () => {
     state.storefront.setSessionToken(state.options.jwt);
-    const {fields} = await state.storefront.invoices.get(data);
+    const {fields} = await state.storefront.invoices.get({
+      ...data,
+      expand: 'items.*.product'
+    });
 
-    return new InvoiceModel(fields);
+    const products = fields.items.map(items => new ProductModel(items._embedded.product));
+
+    return {
+      products,
+      invoice: new InvoiceModel(fields),
+    };
   });
 }

package/src/storefront/invoices.spec.js

@@ -0,0 +1,56 @@
+import { StorefontTestingInstance } from 'tests/mocks/storefront-mock';
+import { ok, get } from 'msw-when-then';
+import { when } from 'tests/msw/server';
+import { storefrontURL } from 'tests/mocks/storefront-api-mock';
+import { fetchInvoiceAndProducts } from './invoices';
+import ProductModel from './models/product-model';
+import InvoiceModel from './models/invoice-model';
+
+describe('Storefront Invoices', () => {
+  it('can fetch an invoice and its embedded products', async () => {
+    const id = '1234';
+    const testInvoice = {
+      id: 'test-invoice-id-1',
+      items: [
+        {
+          _embedded: {
+            product: {
+              id: 'test-product-id'
+            }
+          }
+        }
+      ]
+    };
+
+    when(get(`${storefrontURL}/invoices/${id}`)).thenReturn(ok(testInvoice));
+
+    const instance = new StorefontTestingInstance({
+      data: {
+        invoice: {
+          id
+        }
+      }
+    });
+
+    jest.spyOn(instance.storefront.invoices, 'get');
+
+    const { invoice, products } = await fetchInvoiceAndProducts({
+      data: { id },
+      state: instance
+    });
+
+    expect(instance.storefront.invoices.get).toBeCalledTimes(1);
+    expect(instance.storefront.invoices.get).toBeCalledWith({
+      id,
+      expand: 'items.*.product'
+    });
+    expect(invoice).toBeInstanceOf(InvoiceModel);
+    expect(products).toBeInstanceOf(Array);
+    expect(products[0]).toBeInstanceOf(ProductModel);
+    expect(products[0]).toMatchInlineSnapshot(`
+      ProductModel {
+        "id": "test-product-id",
+      }
+    `);
+  });
+});

package/src/storefront/ready-to-pay.js

@@ -1,11 +1,11 @@
 import { collectData } from '@rebilly/risk-data-collector';
+import paymentMethodsFile from '../data/payment-methods.json';
 import ReadyToPayModel from './models/ready-to-pay-model';
 import { Endpoint } from './index';
 
 export async function fetchReadyToPay({
   state,
   riskMetadata = null,
-  paymentMethodsMetadataPromise = Promise.resolve([])
 }) {
   return Endpoint({state}, async () => {
     if (!riskMetadata) {
@@ -42,7 +42,7 @@ export async function fetchReadyToPay({
     }
 
     const { fields: readyToPayFields } = await state.storefront.purchase.readyToPay({ data });
-    const paymentMethodsMetadata = await paymentMethodsMetadataPromise;
+    const paymentMethodsMetadata = [...paymentMethodsFile];
 
     return Object.values(readyToPayFields)
       // Remove result for "old" paypal method

package/src/storefront/ready-to-pay.spec.js

@@ -5,6 +5,8 @@ import { storefrontURL } from 'tests/mocks/storefront-api-mock';
 import { fetchReadyToPay } from './ready-to-pay';
 import ReadyToPayModel from './models/ready-to-pay-model';
 import { expectConfigurationError } from 'tests/async-utilities';
+import PaymentMetadataModel from './models/payment-metadata';
+import paymentMethodsFile from '@/data/payment-methods.json';
 
 describe('Storefront API Ready to Pay', () => {
   it('can fetch ready to pay', async () => {
@@ -26,6 +28,8 @@ describe('Storefront API Ready to Pay', () => {
       ]
     };
 
+    const paymentCardMetadata = [...paymentMethodsFile].find(method => method.apiName === 'payment-card');
+
     when(post(`${storefrontURL}/ready-to-pay`)).thenReturn(
       ok(readyToPayPayload)
     );
@@ -52,7 +56,8 @@ describe('Storefront API Ready to Pay', () => {
     expect(response).toEqual([
       new ReadyToPayModel({
         index: 0,
-        ...readyToPayPayload[0]
+        ...readyToPayPayload[0],
+        metadata: new PaymentMetadataModel(paymentCardMetadata),
       })
     ]);
   });

package/tests/mocks/storefront-api-mock.js

@@ -6,42 +6,43 @@ export const initStoreFrontApiMocks = (when) => {
   const mocks = [
     /* GET */
     {
-      url: '/account',
+      url: '*/account',
       method: get,
       response: () => ok({})
     }, {
-      url: '/plans',
+      url: '*/plans',
       method: get,
       response: () => ok([])
     }, {
-      url: '/products',
+      url: '*/payment-instruments',
       method: get,
       response: () => ok([])
     }, {
-      url: '/payment-instruments',
-      method: get,
-      response: () => ok([])
-    }, {
-      url: '/transactions/test-transaction-id',
+      url: '*/transactions/test-transaction-id',
       method: get,
       response: () => ok({})
     },
 
     /* POST */
     {
-      url: '/ready-to-pay',
+      url: '*/ready-to-pay',
       method: post,
-      response: () => ok([])
+      response: () => ok([
+        {
+          filters: [],
+          method: "method",
+        }
+      ])
     }, {
-      url: '/preview-purchase',
+      url: '*/preview-purchase',
       method: post,
       response: () => ok({})
     }, {
-      url: '/payment-instruments',
+      url: '*/payment-instruments',
       method: post,
       response: () => ok([])
     }, {
-      url: '/payment-instruments/*/setup',
+      url: '*/payment-instruments/*/setup',
       method: post,
       response: () => ok([])
     }

package/src/storefront/products.js

@@ -1,27 +0,0 @@
-import ProductModel from './models/product-model';
-import { Endpoint } from './index';
-
-export async function fetchProducts({ state }) {
-  return Endpoint({state}, async () => {
-    const plansData = state.data.invoice?.items ?? [];
-
-    const filterByProductId = {
-      filter: ''
-    };
-
-    if (plansData.length) {
-      filterByProductId.filter = `id:${plansData
-        .map((item) => item.productId)
-        .join(',')}`;
-    }
-
-    // Only fetch products if we  hae specific products to fetch
-    if (filterByProductId.filter.length) {
-      const { items: productItems } = await state.storefront.products.getAll(
-        filterByProductId
-      );
-      return productItems.map(({ fields }) => new ProductModel(fields));
-    }
-    return [];
-  });
-}

package/src/storefront/products.spec.js

@@ -1,73 +0,0 @@
-import { StorefontTestingInstance } from 'tests/mocks/storefront-mock';
-import { ok, get } from 'msw-when-then';
-import { when } from 'tests/msw/server';
-import { storefrontURL } from 'tests/mocks/storefront-api-mock';
-import { fetchProducts } from './products';
-import ProductModel from './models/product-model';
-import { expectConfigurationError } from 'tests/async-utilities';
-
-describe('Storefront API Plan', () => {
-  it('can fetch products', async () => {
-    const testProduct = { name: 'Test Product', id: 'test-product-id-1' };
-
-    when(get(`${storefrontURL}/products`)).thenReturn(ok([testProduct]));
-
-    const instance = new StorefontTestingInstance({
-      data: {
-        invoice: {
-          items: [
-            {
-              productId: 'test-product-id'
-            },
-          ],
-        },
-      },
-    });
-
-    jest.spyOn(instance.storefront.products, 'getAll');
-
-    const response = await fetchProducts({ state: instance });
-
-    expect(instance.storefront.products.getAll).toBeCalledTimes(1);
-    expect(instance.storefront.products.getAll).toBeCalledWith({
-      filter: 'id:test-product-id'
-    });
-    expect(response).toBeInstanceOf(Array);
-    expect(response[0]).toBeInstanceOf(ProductModel);
-    expect(response).toEqual([new ProductModel(testProduct)]);
-  });
-
-  it('can fetch products with filter', async () => {
-    const instance = new StorefontTestingInstance({
-      data: {
-        invoice: {
-          items: [
-            {
-              productId: 'test-product-1'
-            },
-            {
-              productId: 'test-product-2'
-            },
-          ],
-        },
-      },
-    });
-
-    jest.spyOn(instance.storefront.products, 'getAll');
-
-    await fetchProducts({ state: instance });
-
-    expect(instance.storefront.products.getAll).toBeCalledWith({
-      filter: 'id:test-product-1,test-product-2'
-    });
-  });
-
-  it('should throw errors with no options', async () => {
-    const noConfigOrOptionsInstance = new StorefontTestingInstance({
-      options: null
-    });
-    await expectConfigurationError(
-      fetchProducts({ state: noConfigOrOptionsInstance })
-    );
-  });
-});