@rebilly/instruments 3.9.0-beta.0 → 3.9.3-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rebilly/instruments",
-  "version": "3.9.0-beta.0",
+  "version": "3.9.3-beta.0",
   "author": "Rebilly",
   "main": "dist/index.js",
   "unpkg": "dist/index.min.js",
@@ -37,8 +37,8 @@
     "babel-plugin-module-resolver": "^4.1.0",
     "component-emitter": "^1.3.0",
     "jest": "^27.0.6",
-    "msw": "^0.23.0",
-    "msw-when-then": "^1.4.0",
+    "msw": "0.38.2",
+    "msw-when-then": "^1.5.1",
     "rollup": "^2.35.1",
     "rollup-plugin-ignore": "^1.0.10",
     "rollup-plugin-polyfill-node": "^0.8.0",

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

@@ -142,7 +142,7 @@ export async function fetchData({
       invoice,
       transaction,
       riskMetadata,
-      customerAddress: account?.address || null,
+      account,
     });
 
     const [readyToPay, previewPurchase] = await Promise.all([

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

@@ -93,7 +93,9 @@ describe('fetchData function', () => {
     const mockFetchAccount = jest.fn();
 
     await fetchData({
-      state: {},
+      state: {
+        options: {}
+      },
       fetchAccount: mockFetchAccount,
     });
 

package/src/functions/mount/mount.spec.js

@@ -1,11 +1,4 @@
-import { RenderMockRebillyInstruments } from 'tests/mocks/rebilly-instruments-mock';
-import { RebillyInstrumentsInstance } from '@rebilly/instruments';
-import { get, ok, post } from 'msw-when-then';
-import { when } from 'tests/msw/server';
-import { storefrontURL } from 'tests/mocks/storefront-api-mock';
-import PlanModel from '@/storefront/models/plan-model';
-import ProductModel from '@/storefront/models/product-model';
-import SummaryModel from '@/storefront/models/summary-model';
+import {RenderMockRebillyInstruments} from 'tests/mocks/rebilly-instruments-mock';
 
 describe('RebillyInstruments instance', () => {
   it('should inject HTML to the merchant\'s website', async () => {

package/src/style/payment-instruments/payment-instrument.js

@@ -30,7 +30,7 @@ export const paymentInstrument = () => `
   }
 
   .rebilly-instruments-payment-instrument-brand {
-    margin: 0 0 0 var(--rebilly-spacings-s);
+    margin: 0 0 0 var(--rebilly-spacings-xs);
   }
 
   .rebilly-instruments-payment-instrument-last4 {

package/src/style/views/modal.js

@@ -81,4 +81,11 @@ export const modal = () => `
   .rebilly-instruments-modal-close:hover{
     color: #000;
   }
+
+  @media screen and (max-width: 480px) {
+    .rebilly-instruments-modal-container.is-redirect {
+      max-width: 96vw;
+      margin: 20px auto 20px;
+    }
+  }
 `;

package/src/views/method-selector/mount-methods.js

@@ -65,7 +65,7 @@ export function MountMethods({
         'payment-card'
       ].includes(methodId) && state.options.paymentInstruments[methodType]?.popup;
     const model = {
-      customerAddress: state.data.customerAddress,
+      account: state.data?.account,
       options: state.options,
       mainStyle: state.mainStyle,
       plans: state.data.plans,

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

@@ -1,4 +1,4 @@
-import { ok, get, post } from 'msw-when-then';
+import {ok, get, post} from 'msw-when-then';
 
 export const storefrontURL = '*/storefront';
 
@@ -8,22 +8,26 @@ export const initStoreFrontApiMocks = (when) => {
   })());
 
   when(post(`${storefrontURL}/preview-purchase`)).thenReturn((() => {
-    return ok({})
+    return ok({});
   })());
 
   when(get(`${storefrontURL}/plans`)).thenReturn((() => {
-    return ok([])
+    return ok([]);
   })());
 
   when(get(`${storefrontURL}/products`)).thenReturn((() => {
-    return ok([])
+    return ok([]);
   })());
 
   when(post(`${storefrontURL}/payment-instruments`)).thenReturn((() => {
-    return ok([])
+    return ok([]);
   })());
-  
+
   when(post(`${storefrontURL}/payment-instruments/*/setup`)).thenReturn((() => {
-    return ok([])
+    return ok([]);
+  })());
+
+  when(get(`${storefrontURL}/transactions/test-transaction-id`)).thenReturn((() => {
+    return ok({});
   })());
 };

package/tests/msw/server.js

@@ -1,11 +1,10 @@
 import {setupServer} from 'msw/node';
 import {rest} from 'msw';
 import {whenThen} from 'msw-when-then';
-import {handlers} from './handlers';
 import {initStoreFrontApiMocks} from '../mocks/storefront-api-mock';
 import {initRebillyApiMocks} from '../mocks/rebilly-api-mock';
 
-export const server = setupServer(...handlers);
+export const server = setupServer();
 
 export const {when} = whenThen(server, rest);
 

package/tests/msw/handlers.js

@@ -1,37 +0,0 @@
-const withFallback = (resolver) => {
-  return {
-      predicate () {
-      // Match all requests, regardless of URL, method, etc.
-          return true;
-      },
-      resolver
-  };
-};
-
-export const handlers = [
-  withFallback((params, params2) => {
-      // Handle any requests that didn't match the existing handlers.
-      // Throw exceptions, or return a mocked response.
-
-      // params: {
-      //     url: URL {},
-      //     method: 'GET',
-      //     body: '',
-      //     headers: Headers { map: [Object] },
-      //     cookies: {},
-      //     params: {},
-      //     redirect: 'manual',
-      //     referrer: '',
-      //     keepalive: false,
-      //     cache: 'default',
-      //     mode: 'cors',
-      //     referrerPolicy: 'no-referrer',
-      //     integrity: '',
-      //     destination: 'document',
-      //     bodyUsed: false,
-      //     credentials: 'same-origin'
-      //   }
-
-      throw Error(`UNHANDLED URL!!! Url: ${params.url} method: ${params.method}}`);
-  })
-];