@rebilly/instruments 3.5.3-beta.0 → 3.7.2-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rebilly/instruments",
-  "version": "3.5.3-beta.0",
+  "version": "3.7.2-beta.0",
   "author": "Rebilly",
   "main": "dist/index.js",
   "unpkg": "dist/index.min.js",
@@ -25,7 +25,6 @@
     "lodash.merge": "^4.6.2",
     "popostmate": "^1.6.4",
     "postcss": "^8.4.5",
-    "postcss-css-variables": "^0.18.0",
     "rebilly-js-sdk": "^44.4.0",
     "values.js": "^2.0.0"
   },

package/src/events/index.js

@@ -2,6 +2,7 @@ import kebabCase from 'lodash.kebabcase';
 import BaseEvent from './base-event';
 
 const events = {
+  dataReady: new BaseEvent('data-ready'),
   instrumentReady: new BaseEvent('instrument-ready'),
   purchaseCompleted: new BaseEvent('purchase-completed'),
   setupCompleted: new BaseEvent('setup-completed')

package/src/functions/mount/index.js

@@ -2,6 +2,7 @@
 import { mountSummary } from '../../views/summary';
 import { mountMethodSelector } from '../../views/method-selector';
 import { fetchData } from './fetch-data';
+import Events from '../../events';
 import setupElement from './setup-element';
 import setupStorefront from './setup-storefront';
 import setupOptions from './setup-options';
@@ -96,9 +97,12 @@ export async function mount({
     // Setup state
     state.options = setupOptions({ options });
     state.storefront = setupStorefront({ options });
+    
     state.mainStyle = await setupStyles({ options });
+    
     state.data = await fetchData({ state });
-
+    Events.dataReady.dispatch(state.data);
+    
     state.options.themeFramepay = await setupFramepayTheme({ state, options });
     state.i18n = setupI18n({ state });
 

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

@@ -1,13 +1,37 @@
 import css from 'css';
-import postcss from 'postcss';
-import cssvariables from 'postcss-css-variables';
 import camelCase from 'lodash.camelcase';
 
-const resolveCssVars = async (rawCss) => postcss([
-  cssvariables({ preserve: false })
-  ])
-  .process(rawCss, { from: undefined })
-  .then(output => output.css);
+function processCSS(rawCss) {
+  const cssMap = {};
+ [...rawCss.matchAll(/(--rebilly.*(?=:))[:\s](.*(?=;))/g)]
+   .forEach(item => {
+     cssMap[item[1]] = item[2].trim();
+   });
+ 
+ function parseValue(value) {
+   const cssVariables = value.match(/var\((.+?)\)/g);
+   if(cssVariables) {
+     let cssValue = value;
+     cssVariables.forEach(variable => {
+       const cssVarName = variable.match(/\((.*)\)/i)[1];
+       cssValue = value.replace(variable, cssMap[cssVarName]);
+     });
+     return parseValue(cssValue);
+   }
+   return value
+ }
+
+ return Object.entries(cssMap)
+   .map(([key, value]) => [key, parseValue(value)]);
+}
+
+function replaceCssVars(rawCss) {
+  processCSS(rawCss).forEach(([key, value]) => {
+    rawCss = rawCss.split(`var(${key})`).join(value);
+  });
+
+  return rawCss;
+}
 
 const getStyleProps = (ast, selector) => {
   const { rules } = ast.stylesheet;
@@ -44,7 +68,7 @@ export default async ({
     ${options.css || ''}
   `;
 
-  const resolvedCss = await resolveCssVars(fullCss);
+  const resolvedCss = replaceCssVars(fullCss);
   const cssAst = css.parse(resolvedCss);
 
   const cssSelectors = {
@@ -102,4 +126,4 @@ export default async ({
   }
 
   return framepayStyle;
-}
+}

package/src/style/vendor/framepay.js

@@ -20,7 +20,7 @@ export const framepayStyle = () => `
       box-shadow: none;
     }
 
-    .rebilly-instruments-framepay .rebilly-framepay.rebilly-framepay-digital-wallet {
+    .rebilly-instruments-framepay .rebilly-framepay.rebilly-framepay-google-pay {
       min-height: auto;
       border: none;
       margin: 0;

package/src/views/common/iframe/base-iframe.js

@@ -35,16 +35,27 @@ export default class BaseIframe {
   }
 
   async createComponent() {
+    // Use a fake container so we can capture the appendChild call
+    // and immediately apply the feature-policy flags to the iframe
+    // before Postmate tries to load the iframe. The feature policy
+    // would otherwise not apply until the frame was reloaded.
+    const container = {
+      appendChild: (iframe) => {
+        iframe.setAttribute('loading', 'lazy');
+        iframe.setAttribute('allow', 'payment');
+        iframe.allowPaymentRequest = true;
+        this.container.appendChild(iframe);
+      },
+    };
+
     const component = await new Postmate({
       name: this.name,
       url: this.url,
-      container: this.container,
+      container,
       classListArray: this.classListArray,
       model: this.model
     });
 
-    component.frame.setAttribute('allowpaymentrequest', 'allowpaymentrequest');
-    component.frame.setAttribute('allow', 'payment');
     return component;
   }
 }