@rebilly/instruments 3.39.2 → 3.39.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rebilly/instruments",
-  "version": "3.39.2",
+  "version": "3.39.4",
   "author": "Rebilly",
   "license": "MIT",
   "main": "dist/index.js",
@@ -26,7 +26,7 @@
     "lodash.isequal": "^4.5.0",
     "lodash.kebabcase": "^4.1.1",
     "lodash.merge": "^4.6.2",
-    "popostmate": "^1.6.4",
+    "popostmate": "2.0.0",
     "rebilly-js-sdk": "^47.14.2",
     "values.js": "^2.0.0"
   },

package/src/functions/mount/index.js

@@ -23,9 +23,12 @@ export async function mount({
     state.data = {};
     state.options = {};
 
+    // Setup options
+    state.options = setupOptions({ options });
+
     // Setup DOM
-    state.form = setupElement({ element: 'form', options });
-    state.summary = setupElement({ element: 'summary', options });
+    state.form = setupElement({ element: 'form' });
+    state.summary = setupElement({ element: 'summary' });
     // hardcode max-width to not break UX
     // PayPal button cannot exceed 750px;
     state.form.style.maxWidth = '750px';
@@ -34,10 +37,9 @@ export async function mount({
     }
 
     // Setup state
-    state.options = setupOptions({ options });
-    state.storefront = setupStorefront({ options });
-    state.mainStyleVars = setupStylesVars({ options });
-    state.options.themeFramepay = setupFramepayTheme({ options });
+    state.storefront = setupStorefront();
+    state.mainStyleVars = setupStylesVars();
+    state.options.themeFramepay = setupFramepayTheme();
 
     // Setup loader
     state.loader.addDOMElement({ el: state.form });

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

@@ -1,6 +1,9 @@
 import { processPropertyAsDOMElement } from '../../utils';
+import state from '../../state';
 
-export default ({element = '', options = {}}) => {
+export default ({element = ''}) => {
+  const {options} = state;
+  
   if (element !== 'form' && element !== 'summary') {
     throw new Error('element must be "form" or "summary"');
   }

package/src/functions/mount/setup-framepay-theme.js

@@ -45,12 +45,10 @@ const getStyleProps = (obj, particle = '') => {
   return output;
 }
 
-export default ({
-  options = {}
-}) => {
+export default () => {
   const fullCss = `
     ${state.mainStyleVars}
-    ${options.css || ''}
+    ${state.options?.css || ''}
   `;
 
   const resolvedCssVarsObj = replaceCssVars(fullCss);

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

@@ -1,13 +1,13 @@
 import Storefront from '../../storefront';
+import state from '../../state';
 
-export default ({
-  options:{
+export default () => {
+  const {
     publishableKey,
     organizationId,
     apiMode,
     _dev
-  }
-}) => {
+  } = state.options;
 
   const storefront = {
     organizationId,

package/src/functions/mount/setup-styles-vars.js

@@ -1,13 +1,14 @@
 import { mainStyleVars } from '../../style';
 import { addDOMElement } from '../../utils';
 import { minifyCss } from '../../style/utils/minifyCss';
+import state from '../../state';
 
-export default ({
-  options: {
+export default () => {
+  const {
     theme  =  {},
     css,
-  }
-} = {}) => {
+  } = state.options;
+
   // Adds base CSS vars stylesheet
   const styleVars = mainStyleVars(theme || {});
 

package/src/functions/purchase.js

@@ -115,11 +115,11 @@ export function handleApprovalUrl({fields, payload}) {
     }
   
     state.data = new DataInstance({...fields});
-  
+
+    const name = 'rebilly-instruments-approval-url'
     mountModal({
-      state,
-      name: 'rebilly-instruments-approval-url',
-      url: `${paymentMethodsUrl}/approval-url`,
+      name,
+      url: `${paymentMethodsUrl}?name=${name}`,
       model,
       close: (updatedPurchase) => {
         Events.purchaseCompleted.dispatch(updatedPurchase);

package/src/views/confirmation.js

@@ -25,13 +25,13 @@ export async function mountConfirmation({ payload: instrument }) {
     mainStyleVars: modelSafeState.mainStyleVars,
     instrument
   };
+  
+  iframe?.component?.call('update', model);
 
   iframe?.component?.call('route', {
     name: 'confirmation'
   });
 
-  iframe?.component?.call('update', model);
-
   iframe?.component?.on(`${iframe.name}-confirm-purchase`, (confirmedInstrument) => {
     purchase({ payload: confirmedInstrument });
   });

package/src/views/modal.js

@@ -88,5 +88,9 @@ export async function mountModal({
     closeButton.addEventListener('click', closeModal);
   }
 
+  iframe.component?.call('route', {
+    name: 'approval-url'
+  });
+
   return iframe;
 }

package/CONTRIBUTING.md

@@ -1,4 +0,0 @@
-# Constributing to Rebilly Instruments package/core
-
-## Setup
-No additional setup is required to run this package locally