@rebilly/instruments 2.1.1-beta.0 → 3.0.0-beta.0

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

@@ -98,6 +98,10 @@ class DataInstance {
     return lineItems;
   }
 
+  get isShippingRequired() {
+    return this.products.some(product => product.requiresShipping);
+  }
+
 }
 
 exports.DataInstance = DataInstance;

package/dist/functions/mount/index.js

@@ -27,6 +27,8 @@ var _setupStyles = _interopRequireDefault(require("./setup-styles"));
 
 var _setupI18n = _interopRequireDefault(require("./setup-i18n"));
 
+var _setupFramepayTheme = _interopRequireDefault(require("./setup-framepay-theme"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /* eslint-disable max-len */
@@ -139,6 +141,10 @@ async function mount({
     state.data = await (0, _fetchData.fetchData)({
       state
     });
+    state.options.themeFramepay = await (0, _setupFramepayTheme.default)({
+      state,
+      options
+    });
     const i18n = (0, _setupI18n.default)({
       state
     });

package/dist/functions/mount/mount.spec.js

@@ -31,9 +31,7 @@ describe('RebillyInstruments instance', () => {
         quantity: 1
       }],
       theme: {
-        color: {
-          background: '#000'
-        }
+        colorBackground: '#000'
       },
       css: `
       .rebilly-instruments-summary-line-item-synopsis-title {
@@ -50,7 +48,7 @@ describe('RebillyInstruments instance', () => {
     expect(summarySelector.innerHTML).toMatch('My Product'); // Theme config overrides initial styles
 
     const SUMMARY_CONTAINER = summarySelector.querySelector('.rebilly-instruments-content');
-    expect(getComputedStyle(SUMMARY_CONTAINER).background).toEqual('rgb(0, 0, 0)'); // CSS config property overrides initial styles
+    expect(getComputedStyle(SUMMARY_CONTAINER).getPropertyValue('--rebilly-colorBackground')).toEqual('#000'); // CSS config property overrides initial styles
 
     const LINE_ITEM_TITLE = document.querySelector('.rebilly-instruments-summary-line-item-synopsis-title');
     expect(getComputedStyle(LINE_ITEM_TITLE).color).toEqual('rgb(0, 68, 212)'); // Mounts default FramePay script

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

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _css = _interopRequireDefault(require("css"));
+
+var _postcss = _interopRequireDefault(require("postcss"));
+
+var _postcssCustomProperties = _interopRequireDefault(require("postcss-custom-properties"));
+
+var _lodash = _interopRequireDefault(require("lodash.camelcase"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const resolveCssVars = async rawCss => (0, _postcss.default)([(0, _postcssCustomProperties.default)({
+  preserve: false
+})]).process(rawCss, {
+  from: undefined
+}).then(output => output.css);
+
+const getStyleProps = (ast, selector) => {
+  const {
+    rules
+  } = ast.stylesheet;
+  const output = {
+    color: null,
+    fontFamily: null,
+    fontSize: null,
+    lineHeight: null,
+    fontWeight: null,
+    background: null
+  };
+
+  for (let i = 0; i < rules.length; i += 1) {
+    const rule = rules[i];
+
+    if (rule.type === 'rule' && rule.selectors.includes(selector)) {
+      rule.declarations.forEach(decl => {
+        const propName = (0, _lodash.default)(decl.property);
+
+        if (typeof output[propName] !== 'undefined') {
+          output[propName] = decl.value;
+        }
+      });
+    }
+  }
+
+  return output;
+};
+
+var _default = async ({
+  state,
+  options = {}
+}) => {
+  const fullCss = `
+    ${state.mainStyle}
+    ${options.css || ''}
+  `;
+  const resolvedCss = await resolveCssVars(fullCss);
+
+  const cssAst = _css.default.parse(resolvedCss);
+
+  const cssSelectors = {
+    base: '.rebilly-instruments-form-field-input',
+    baseHover: '.rebilly-instruments-form-field-input:hover',
+    baseFocus: '.rebilly-instruments-form-field-input:focus',
+    basePlaceholder: '.rebilly-instruments-form-field-input::placeholder',
+    baseSelection: '.rebilly-instruments-form-field-input::selection',
+    invalid: '.rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input',
+    invalidHover: '.rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input:hover',
+    invalidFocus: '.rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input:focus',
+    invalidPlaceholder: '.rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input::placeholder',
+    invalidSelection: '.rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input::selection'
+  };
+  const framepayStyle = {
+    base: { ...getStyleProps(cssAst, cssSelectors.base),
+      ':hover': getStyleProps(cssAst, cssSelectors.baseHover),
+      ':focus': getStyleProps(cssAst, cssSelectors.baseFocus),
+      '::placeholder': getStyleProps(cssAst, cssSelectors.basePlaceholder),
+      '::selection': getStyleProps(cssAst, cssSelectors.baseSelection)
+    },
+    invalid: { ...getStyleProps(cssAst, cssSelectors.invalid),
+      ':hover': getStyleProps(cssAst, cssSelectors.invalidHover),
+      ':focus': getStyleProps(cssAst, cssSelectors.invalidFocus),
+      '::placeholder': getStyleProps(cssAst, cssSelectors.invalidPlaceholder),
+      '::selection': getStyleProps(cssAst, cssSelectors.invalidSelection)
+    }
+  };
+  return framepayStyle;
+};
+
+exports.default = _default;

package/dist/functions/mount/setup-options.js

@@ -13,6 +13,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const defaults = {
   countryCode: 'US',
   locale: 'auto',
+  theme: {
+    labels: 'floating'
+  },
   paymentInstruments: {
     address: {
       name: 'default',

package/dist/i18n/en.json

@@ -2,7 +2,7 @@
   "en": {
     "summary": {
       "subTotal": "Sub Total",
-      "discounts": "Discouts",
+      "discounts": "Discounts",
       "taxes": "Taxes",
       "shipping": "Shipping",
       "total": "Total"

package/dist/style/base/__snapshots__/theme.spec.js.snap

@@ -3,50 +3,193 @@
 exports[`RebillyInstruments theme builds the theme object 1`] = `
 Object {
   "borderRadius": "4px",
-  "color": Object {
-    "background": "#ffffff",
-    "buttonText": "#ffffff",
-    "errorText": "#cd5c5c",
-    "primary": "#0044d4",
-    "text": "#0D2B3E",
-  },
-  "getComputed": Object {
-    "color": Object {
-      "mutedBorder": "rgba(13, 43, 62, 0.25)",
-      "mutedText": "rgba(13, 43, 62, 0.6)",
-      "primaryValues": Values {
-        "alpha": 1,
-        "rgb": Array [
-          0,
-          68,
-          212,
-        ],
-        "type": "base",
-        "weight": 0,
-      },
-    },
-  },
-  "space": Object {
-    "form": Object {
-      "horizontalPadding": "16px",
-      "minHeight": "44px",
-      "padding": "8px 16px",
-      "verticalPadding": "8px",
-    },
-    "l": "48px",
-    "m": "24px",
-    "s": "12px",
-    "xl": "96px",
-    "xs": "6px",
-    "xxl": "112px",
-    "xxs": "4px",
-  },
-  "typography": Object {
-    "captionFontSize": "12px",
-    "captionLineHeight": "12px",
-    "fontFamily": "Avenir, Helvetica, Arial, sans-serif",
-    "fontSize": "16px",
-    "lineHeight": "24px",
-  },
+  "buttonActiveColorBackground": "var(--rebilly-buttonHoverColorBackground)",
+  "buttonBorder": "1px solid transparent",
+  "buttonBorderRadius": "var(--rebilly-borderRadius)",
+  "buttonBoxShadow": "none",
+  "buttonColorBackground": "var(--rebilly-colorPrimary)",
+  "buttonColorText": "#FFFFFF",
+  "buttonFontFamily": "var(--rebilly-fontFamily)",
+  "buttonFontLineHeight": "1.5",
+  "buttonFontSize": "var(--rebilly-fontSizeBase)",
+  "buttonFontWeight": "var(--rebilly-fontWeightBase)",
+  "buttonHoverColorBackground": "#0036aa",
+  "colorBackground": "#FFFFFF",
+  "colorDanger": "#CD5C5C",
+  "colorMutedBorder": "rgba(13, 43, 62, 0.25)",
+  "colorMutedText": "rgba(13, 43, 62, 0.6)",
+  "colorPrimary": "#0044D4",
+  "colorText": "#0D2B3E",
+  "cssVars": "--rebilly-colorPrimary: #0044D4;
+--rebilly-colorBackground: #FFFFFF;
+--rebilly-colorText: #0D2B3E;
+--rebilly-colorMutedText: rgba(13, 43, 62, 0.6);
+--rebilly-colorMutedBorder: rgba(13, 43, 62, 0.25);
+--rebilly-colorDanger: #CD5C5C;
+--rebilly-fontFamily: Avenir, Helvetica, Arial, sans-serif;
+--rebilly-fontSizeBase: 16px;
+--rebilly-fontWeightBase: 400;
+--rebilly-fontLineHeightBase: initial;
+--rebilly-fontSmooth: auto;
+--rebilly-borderRadius: 4px;
+--rebilly-headingFontFamily: var(--rebilly-fontFamily);
+--rebilly-headingFontWeight: 500;
+--rebilly-headingColorText: var(--rebilly-colorText);
+--rebilly-buttonColorBackground: var(--rebilly-colorPrimary);
+--rebilly-buttonColorText: #FFFFFF;
+--rebilly-buttonFontFamily: var(--rebilly-fontFamily);
+--rebilly-buttonFontSize: var(--rebilly-fontSizeBase);
+--rebilly-buttonFontLineHeight: 1.5;
+--rebilly-buttonFontWeight: var(--rebilly-fontWeightBase);
+--rebilly-buttonBorder: 1px solid transparent;
+--rebilly-buttonBorderRadius: var(--rebilly-borderRadius);
+--rebilly-buttonBoxShadow: none;
+--rebilly-buttonHoverColorBackground: #0036aa;
+--rebilly-buttonActiveColorBackground: var(--rebilly-buttonHoverColorBackground);
+--rebilly-inputColorBackground: transparent;
+--rebilly-inputColorText: var(--rebilly-colorText);
+--rebilly-inputFontFamily: var(--rebilly-fontFamily);
+--rebilly-inputFontSize: var(--rebilly-fontSizeBase);
+--rebilly-inputFontLineHeight: 1.5;
+--rebilly-inputFontWeight: var(--rebilly-fontWeightBase);
+--rebilly-inputBorder: 1px solid rgba(13, 43, 62, 0.25);
+--rebilly-inputBorderRadius: var(--rebilly-borderRadius);
+--rebilly-inputBoxShadow: none;
+--rebilly-inputHoverColorBackground: var(--rebilly-inputColorBackground);
+--rebilly-inputHoverColorText: var(--rebilly-inputColorText);
+--rebilly-inputHoverFontFamily: var(--rebilly-inputFontFamily);
+--rebilly-inputHoverFontSize: var(--rebilly-inputFontSize);
+--rebilly-inputHoverFontLineHeight: var(--rebilly-inputFontLineHeight);
+--rebilly-inputHoverFontWeight: var(--rebilly-inputFontWeight);
+--rebilly-inputHoverBorder: var(--rebilly-inputBorder);
+--rebilly-inputHoverBorderRadius: var(--rebilly-inputBorderRadius);
+--rebilly-inputHoverBoxShadow: var(--rebilly-inputBoxShadow);
+--rebilly-inputFocusColorBackground: var(--rebilly-inputHoverColorBackground);
+--rebilly-inputFocusColorText: var(--rebilly-inputHoverColorText);
+--rebilly-inputFocusFontFamily: var(--rebilly-inputHoverFontFamily);
+--rebilly-inputFocusFontSize: var(--rebilly-inputHoverFontSize);
+--rebilly-inputFocusFontLineHeight: var(--rebilly-inputHoverFontLineHeight);
+--rebilly-inputFocusFontWeight: var(--rebilly-inputHoverFontWeight);
+--rebilly-inputFocusBorder: 1px solid #0044D4;
+--rebilly-inputFocusBorderRadius: var(--rebilly-inputHoverBorderRadius);
+--rebilly-inputFocusBoxShadow: 0 0 0 1px #0044D4;
+--rebilly-inputPlaceholderColorText: rgba(13, 43, 62, 0.6);
+--rebilly-inputPlaceholderFontFamily: var(--rebilly-inputFontFamily);
+--rebilly-inputPlaceholderFontSize: var(--rebilly-inputFontSize);
+--rebilly-inputPlaceholderFontLineHeight: var(--rebilly-inputFontLineHeight);
+--rebilly-inputPlaceholderFontWeight: var(--rebilly-inputFontWeight);
+--rebilly-inputSelectionColorText: initial;
+--rebilly-inputSelectionColorBackground: initial;
+--rebilly-inputErrorColorBackground: var(--rebilly-inputColorBackground);
+--rebilly-inputErrorColorText: var(--rebilly-colorDanger);
+--rebilly-inputErrorFontFamily: var(--rebilly-inputFontFamily);
+--rebilly-inputErrorFontSize: var(--rebilly-inputFontSize);
+--rebilly-inputErrorFontLineHeight: var(--rebilly-inputFontLineHeight);
+--rebilly-inputErrorFontWeight: var(--rebilly-inputFontWeight);
+--rebilly-inputErrorBorder: 1px solid #CD5C5C;
+--rebilly-inputErrorBorderRadius: var(--rebilly-inputBorderRadius);
+--rebilly-inputErrorBoxShadow: var(--rebilly-inputBoxShadow);
+--rebilly-inputErrorHoverColorBackground: var(--rebilly-inputErrorColorBackground);
+--rebilly-inputErrorHoverColorText: var(--rebilly-inputErrorColorText);
+--rebilly-inputErrorHoverFontFamily: var(--rebilly-inputErrorFontFamily);
+--rebilly-inputErrorHoverFontSize: var(--rebilly-inputErrorFontSize);
+--rebilly-inputErrorHoverFontLineHeight: var(--rebilly-inputErrorFontLineHeight);
+--rebilly-inputErrorHoverFontWeight: var(--rebilly-inputErrorFontWeight);
+--rebilly-inputErrorHoverBorder: var(--rebilly-inputErrorBorder);
+--rebilly-inputErrorHoverBorderRadius: var(--rebilly-inputErrorBorderRadius);
+--rebilly-inputErrorHoverBoxShadow: var(--rebilly-inputErrorBoxShadow);
+--rebilly-inputErrorFocusColorBackground: var(--rebilly-inputErrorHoverColorBackground);
+--rebilly-inputErrorFocusColorText: var(--rebilly-inputErrorHoverColorText);
+--rebilly-inputErrorFocusFontFamily: var(--rebilly-inputErrorHoverFontFamily);
+--rebilly-inputErrorFocusFontSize: var(--rebilly-inputErrorHoverFontSize);
+--rebilly-inputErrorFocusFontLineHeight: var(--rebilly-inputErrorHoverFontLineHeight);
+--rebilly-inputErrorFocusFontWeight: var(--rebilly-inputErrorHoverFontWeight);
+--rebilly-inputErrorFocusBorder: var(--rebilly-inputErrorHoverBorder);
+--rebilly-inputErrorFocusBorderRadius: var(--rebilly-inputErrorHoverBorderRadius);
+--rebilly-inputErrorFocusBoxShadow: var(--rebilly-inputErrorHoverBoxShadow);
+--rebilly-inputErrorPlaceholderColorText: rgba(205, 92, 92, 0.6);
+--rebilly-inputErrorPlaceholderFontFamily: var(--rebilly-inputPlaceholderFontFamily);
+--rebilly-inputErrorPlaceholderFontSize: var(--rebilly-inputPlaceholderFontSize);
+--rebilly-inputErrorPlaceholderFontLineHeight: var(--rebilly-inputPlaceholderFontLineHeight);
+--rebilly-inputErrorPlaceholderFontWeight: var(--rebilly-inputPlaceholderFontWeight);
+--rebilly-inputErrorSelectionColorText: var(--rebilly-inputSelectionColorText);
+--rebilly-inputErrorSelectionColorBackground: var(--rebilly-inputSelectionColorBackground);",
+  "fontFamily": "Avenir, Helvetica, Arial, sans-serif",
+  "fontLineHeightBase": "initial",
+  "fontSizeBase": "16px",
+  "fontSmooth": "auto",
+  "fontWeightBase": "400",
+  "headingColorText": "var(--rebilly-colorText)",
+  "headingFontFamily": "var(--rebilly-fontFamily)",
+  "headingFontWeight": "500",
+  "inputBorder": "1px solid rgba(13, 43, 62, 0.25)",
+  "inputBorderRadius": "var(--rebilly-borderRadius)",
+  "inputBoxShadow": "none",
+  "inputColorBackground": "transparent",
+  "inputColorText": "var(--rebilly-colorText)",
+  "inputErrorBorder": "1px solid #CD5C5C",
+  "inputErrorBorderRadius": "var(--rebilly-inputBorderRadius)",
+  "inputErrorBoxShadow": "var(--rebilly-inputBoxShadow)",
+  "inputErrorColorBackground": "var(--rebilly-inputColorBackground)",
+  "inputErrorColorText": "var(--rebilly-colorDanger)",
+  "inputErrorFocusBorder": "var(--rebilly-inputErrorHoverBorder)",
+  "inputErrorFocusBorderRadius": "var(--rebilly-inputErrorHoverBorderRadius)",
+  "inputErrorFocusBoxShadow": "var(--rebilly-inputErrorHoverBoxShadow)",
+  "inputErrorFocusColorBackground": "var(--rebilly-inputErrorHoverColorBackground)",
+  "inputErrorFocusColorText": "var(--rebilly-inputErrorHoverColorText)",
+  "inputErrorFocusFontFamily": "var(--rebilly-inputErrorHoverFontFamily)",
+  "inputErrorFocusFontLineHeight": "var(--rebilly-inputErrorHoverFontLineHeight)",
+  "inputErrorFocusFontSize": "var(--rebilly-inputErrorHoverFontSize)",
+  "inputErrorFocusFontWeight": "var(--rebilly-inputErrorHoverFontWeight)",
+  "inputErrorFontFamily": "var(--rebilly-inputFontFamily)",
+  "inputErrorFontLineHeight": "var(--rebilly-inputFontLineHeight)",
+  "inputErrorFontSize": "var(--rebilly-inputFontSize)",
+  "inputErrorFontWeight": "var(--rebilly-inputFontWeight)",
+  "inputErrorHoverBorder": "var(--rebilly-inputErrorBorder)",
+  "inputErrorHoverBorderRadius": "var(--rebilly-inputErrorBorderRadius)",
+  "inputErrorHoverBoxShadow": "var(--rebilly-inputErrorBoxShadow)",
+  "inputErrorHoverColorBackground": "var(--rebilly-inputErrorColorBackground)",
+  "inputErrorHoverColorText": "var(--rebilly-inputErrorColorText)",
+  "inputErrorHoverFontFamily": "var(--rebilly-inputErrorFontFamily)",
+  "inputErrorHoverFontLineHeight": "var(--rebilly-inputErrorFontLineHeight)",
+  "inputErrorHoverFontSize": "var(--rebilly-inputErrorFontSize)",
+  "inputErrorHoverFontWeight": "var(--rebilly-inputErrorFontWeight)",
+  "inputErrorPlaceholderColorText": "rgba(205, 92, 92, 0.6)",
+  "inputErrorPlaceholderFontFamily": "var(--rebilly-inputPlaceholderFontFamily)",
+  "inputErrorPlaceholderFontLineHeight": "var(--rebilly-inputPlaceholderFontLineHeight)",
+  "inputErrorPlaceholderFontSize": "var(--rebilly-inputPlaceholderFontSize)",
+  "inputErrorPlaceholderFontWeight": "var(--rebilly-inputPlaceholderFontWeight)",
+  "inputErrorSelectionColorBackground": "var(--rebilly-inputSelectionColorBackground)",
+  "inputErrorSelectionColorText": "var(--rebilly-inputSelectionColorText)",
+  "inputFocusBorder": "1px solid #0044D4",
+  "inputFocusBorderRadius": "var(--rebilly-inputHoverBorderRadius)",
+  "inputFocusBoxShadow": "0 0 0 1px #0044D4",
+  "inputFocusColorBackground": "var(--rebilly-inputHoverColorBackground)",
+  "inputFocusColorText": "var(--rebilly-inputHoverColorText)",
+  "inputFocusFontFamily": "var(--rebilly-inputHoverFontFamily)",
+  "inputFocusFontLineHeight": "var(--rebilly-inputHoverFontLineHeight)",
+  "inputFocusFontSize": "var(--rebilly-inputHoverFontSize)",
+  "inputFocusFontWeight": "var(--rebilly-inputHoverFontWeight)",
+  "inputFontFamily": "var(--rebilly-fontFamily)",
+  "inputFontLineHeight": "1.5",
+  "inputFontSize": "var(--rebilly-fontSizeBase)",
+  "inputFontWeight": "var(--rebilly-fontWeightBase)",
+  "inputHoverBorder": "var(--rebilly-inputBorder)",
+  "inputHoverBorderRadius": "var(--rebilly-inputBorderRadius)",
+  "inputHoverBoxShadow": "var(--rebilly-inputBoxShadow)",
+  "inputHoverColorBackground": "var(--rebilly-inputColorBackground)",
+  "inputHoverColorText": "var(--rebilly-inputColorText)",
+  "inputHoverFontFamily": "var(--rebilly-inputFontFamily)",
+  "inputHoverFontLineHeight": "var(--rebilly-inputFontLineHeight)",
+  "inputHoverFontSize": "var(--rebilly-inputFontSize)",
+  "inputHoverFontWeight": "var(--rebilly-inputFontWeight)",
+  "inputPlaceholderColorText": "rgba(13, 43, 62, 0.6)",
+  "inputPlaceholderFontFamily": "var(--rebilly-inputFontFamily)",
+  "inputPlaceholderFontLineHeight": "var(--rebilly-inputFontLineHeight)",
+  "inputPlaceholderFontSize": "var(--rebilly-inputFontSize)",
+  "inputPlaceholderFontWeight": "var(--rebilly-inputFontWeight)",
+  "inputSelectionColorBackground": "initial",
+  "inputSelectionColorText": "initial",
+  "labels": "floating",
 }
 `;