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

package/dist/style/utils/color-values.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.alphaColor = alphaColor;
-exports.colorValues = void 0;
+exports.lighten = exports.darken = exports.mutedBorderColor = exports.mutedTextColor = exports.colorValues = void 0;
 
 var _values = _interopRequireDefault(require("values.js"));
 
@@ -15,8 +15,44 @@ const colorValues = color => new _values.default(color);
 exports.colorValues = colorValues;
 
 function alphaColor(color, alphaValue = 1) {
-  const _alphaColor = new _values.default(color);
+  if (color === null) {
+    return color;
+  }
+
+  const _alphaColor = colorValues(color);
 
   _alphaColor.alpha = alphaValue;
   return _alphaColor.rgbString();
-}
+}
+
+const mutedTextColor = color => alphaColor(color, 0.6);
+
+exports.mutedTextColor = mutedTextColor;
+
+const mutedBorderColor = color => alphaColor(color, 0.25);
+
+exports.mutedBorderColor = mutedBorderColor;
+
+const darken = (color, percent) => {
+  if (color === null) {
+    return color;
+  }
+
+  const _color = colorValues(color);
+
+  return _color.shade(percent).hexString();
+};
+
+exports.darken = darken;
+
+const lighten = (color, percent) => {
+  if (color === null) {
+    return color;
+  }
+
+  const _color = colorValues(color);
+
+  return _color.tint(percent).hexString();
+};
+
+exports.lighten = lighten;

package/dist/style/utils/remove-empty-null.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _postcss = _interopRequireDefault(require("postcss"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _postcss.default.plugin('postcss-remove-empty-null', () => root => {
+  root.walkDecls(decl => {
+    if ((decl.value === '\'\'' || decl.value === '""' || decl.value.includes('null')) && decl.prop !== 'content') {
+      decl.remove();
+    }
+  });
+});
+
+exports.default = _default;

package/dist/style/vendor/framepay.js

@@ -5,22 +5,25 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.framepayStyle = void 0;
 
-const framepayStyle = theme => `
+const framepayStyle = () => `
     .rebilly-instruments-framepay .rebilly-framepay {
-      box-shadow: none; 
-      min-height: ${theme.space.form.minHeight};
-      border: 1px solid ${theme.getComputed.color.mutedBorder};
+      min-height: var(--rebilly-spacings-form-element-min-height);
+      border: var(--rebilly-inputBorder);
       margin-bottom: 0;
-      background: ${theme.color.background};
+      background: var(--rebilly-inputColorBackground);
+      border-radius: var(--rebilly-inputBorderRadius);
+      box-shadow: var(--rebilly-inputBoxShadow);
     }
 
     .rebilly-instruments-framepay .rebilly-framepay.rebilly-framepay-focus {
-      border: 1px solid ${theme.color.primary};
-      box-shadow: 0 0 0 1px ${theme.color.primary};
+      background: var(--rebilly-inputFocusColorBackground);
+      border: var(--rebilly-inputFocusBorder);
+      border-radius: var(--rebilly-inputFocusBorderRadius);
+      box-shadow: var(--rebilly-inputFocusBoxShadow);
     }
 
     .rebilly-instruments-framepay .rebilly-framepay.rebilly-framepay-invalid {
-      border: 1px solid ${theme.color.errorText};
+      border-color: var(--rebilly-colorDanger);
       box-shadow: none;
     }
 

package/dist/style/vendor/postmate.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.postmateStyle = void 0;
 
-const postmateStyle = theme => `
+const postmateStyle = () => `
     .rebilly-instruments-iframe {
       border: none;
       width: 100%;
-      min-height: ${theme.space.form.minHeight};
+      min-height: var(--rebilly-spacings-form-element-min-height);
       transition: all 0.2s ease;
     }
   `;

package/dist/style/views/confirmation.js

@@ -8,7 +8,7 @@ exports.confirmation = void 0;
 // -----------------------------------------------------------------------------
 // This file contains all styles related to the confirmation view.
 // -----------------------------------------------------------------------------
-const confirmation = theme => `
+const confirmation = () => `
   /**
   * Confirmation
   */
@@ -18,8 +18,8 @@ const confirmation = theme => `
 
   .rebilly-instruments-confirmation-go-back-link {
     display: inline-block;
-    margin-bottom: ${theme.space.m};
-    margin-left: -${theme.space.xs};
+    margin-bottom: var(--rebilly-spacings-base);
+    margin-left: calc(var(--rebilly-spacings-xs) * -1);
   }
 
   .rebilly-instruments-confirmation-address-title {
@@ -28,20 +28,20 @@ const confirmation = theme => `
   }
 
   .rebilly-instruments-confirmation-address-title .rebilly-instruments-link {
-    margin-left: ${theme.space.s};
+    margin-left: var(--rebilly-spacings-s);
   }
 
   .rebilly-instruments-confirmation-address-actions {
-    margin-top: ${theme.space.m};
+    margin-top: var(--rebilly-spacings-base);
     display: flex;
   }
 
   .rebilly-instruments-confirmation-address-actions :first-child {
-    margin: 0 ${theme.space.xs} 0 0;
+    margin: 0 var(--rebilly-spacings-xs) 0 0;
   }
 
   .rebilly-instruments-confirmation-address-actions :last-child {
-    margin: 0 0 0 ${theme.space.xs};
+    margin: 0 0 0 var(--rebilly-spacings-xs);
   }
 
   .rebilly-instruments-confirmation-payment-method {
@@ -49,18 +49,18 @@ const confirmation = theme => `
     align-items: center;
     justify-content: space-between;
     height: 26px;
-    margin: 0 0 ${theme.space.l};
+    margin: 0 0 var(--rebilly-spacings-l);
   }
 
   .rebilly-instruments-confirmation-payment-method figure {
-    margin: 0 ${theme.space.xxs} 0 0;
+    margin: 0 var(--rebilly-spacings-2xs) 0 0;
     height: 26px;
     padding: 0;
   }
 
   .rebilly-instruments-confirmation-payment-method figure img {
     width: 42px;
-    border-radius: ${theme.borderRadius};
+    border-radius: 4px;
   }
 
   .rebilly-instruments-confirmation-payment-method-brand,
@@ -70,15 +70,15 @@ const confirmation = theme => `
   }
 
   .rebilly-instruments-confirmation-payment-method-brand {
-    margin: 0 0 0 ${theme.space.s};
+    margin: 0 0 0 var(--rebilly-spacings-s);
   }
 
   .rebilly-instruments-confirmation-payment-method-last4 {
-    margin: 0 ${theme.space.s};
+    margin: 0 var(--rebilly-spacings-s);
   }
 
   .rebilly-instruments-confirmation-payment-method-exp {
-    color: ${theme.getComputed.color.mutedText};
+    color: var(--rebilly-colorMutedText);
   }
 `;
 

package/dist/style/views/method-selector.js

@@ -8,12 +8,12 @@ exports.methodSelector = void 0;
 // -----------------------------------------------------------------------------
 // This file contains all styles related to the selector view.
 // -----------------------------------------------------------------------------
-const methodSelector = theme => `
+const methodSelector = () => `
   /**
   * Method selector
   */
   .rebilly-instruments-method-selector.has-express-compact {
-    padding-top: ${theme.space.s};
+    padding-top: var(--rebilly-spacings-s);
   }
 `;
 

package/dist/style/views/modal.js

@@ -8,7 +8,7 @@ exports.modal = void 0;
 // -----------------------------------------------------------------------------
 // This file contains all styles related to the modal view.
 // -----------------------------------------------------------------------------
-const modal = theme => `
+const modal = () => `
   /**
   * Modal
   */
@@ -38,10 +38,10 @@ const modal = theme => `
     transition: all .24s ease-in-out;
     position: relative;
     max-width: 800px;
-    background: ${theme.color.background};
+    background: var(--rebilly-colorBackground);
     margin: 50px auto 20px;
     box-shadow: 0 19px 38px rgba(0,0,0,0.20), 0 15px 12px rgba(0,0,0,0.12);
-    border-radius: ${theme.borderRadius};
+    border-radius: 4px;
     transform: translateY(-50px);
     opacity: 0;
   }
@@ -60,9 +60,9 @@ const modal = theme => `
     transition: all .15s;
     padding: 20px;
     overflow: hidden;
-    background-color: ${theme.color.background};
+    background-color: var(--rebilly-colorBackground);
     text-align: center;
-    border-radius: ${theme.borderRadius};
+    border-radius: 4px;
   }
 
   .rebilly-instruments-modal-content .rebilly-instruments-iframe {
@@ -81,7 +81,7 @@ const modal = theme => `
     height: 30px;
     top: -40px;
     right: 0;
-    fill: #ffffff;
+    fill: #FFF;
     cursor: pointer;
   }
   

package/dist/style/views/result.js

@@ -8,7 +8,7 @@ exports.result = void 0;
 // -----------------------------------------------------------------------------
 // This file contains all styles related to the result view.
 // -----------------------------------------------------------------------------
-const result = theme => `
+const result = () => `
   /**
   * Result
   */
@@ -19,16 +19,16 @@ const result = theme => `
 
   .rebilly-instruments-results-icon {
     width: 160px;
-    margin: 0 auto ${theme.space.m} auto;
+    margin: 0 auto var(--rebilly-spacings-base) auto;
     display: block;
   }
 
   .rebilly-instruments-results-icon g {
-    stroke: ${theme.color.primary};
+    stroke: var(--rebilly-colorPrimary);
   }
 
   .rebilly-instruments-results-icon.is-error g {
-    stroke: ${theme.color.errorText};
+    stroke: var(--rebilly-colorDanger);
   }
 
   .rebilly-instruments-results-icon path {

package/dist/style/views/summary.js

@@ -8,13 +8,13 @@ exports.summary = void 0;
 // -----------------------------------------------------------------------------
 // This file contains all styles related to the summary view.
 // -----------------------------------------------------------------------------
-const summary = theme => `
+const summary = () => `
   /**
   * Summary
   */
   .rebilly-instruments-summary-line-item {
-    border-bottom: 1px solid ${theme.getComputed.color.mutedBorder};
-    padding: ${theme.space.s} 0;
+    border-bottom: 1px solid var(--rebilly-colorMutedBorder);
+    padding: var(--rebilly-spacings-s) 0;
     display: flex;
     align-items: center;
     position: relative;
@@ -25,12 +25,12 @@ const summary = theme => `
   }
 
   .rebilly-instruments-summary-line-item-figure {
-    margin: 0 ${theme.space.s} 0 0;
+    margin: 0 var(--rebilly-spacings-s) 0 0;
     flex: 0 0 auto;
     width: 48px;
     height: 48px;
-    border-radius: ${theme.borderRadius};
-    border: 1px solid ${theme.getComputed.color.mutedBorder};
+    border-radius: var(--rebilly-borderRadius);
+    border: 1px solid var(--rebilly-colorMutedBorder);
     overflow: hidden;
   }
 
@@ -48,31 +48,31 @@ const summary = theme => `
   }
 
   .rebilly-instruments-summary-line-item-synopsis-description {
-    color: ${theme.getComputed.color.mutedText};
+    color: var(--rebilly-colorMutedText);
     margin: 0;
-    font-size: 14px;
-    line-height: 14px;
+    font-size: calc(var(--rebilly-fontSizeBase) * 0.875);
+    line-height: 1;
   }
 
   .rebilly-instruments-summary-line-item-price-breakdown {
     display: flex;
     justify-content: center;
     align-items: center;
-    color: ${theme.getComputed.color.mutedText};
-    margin: 0 0 0 ${theme.spaceS};
+    color: var(--rebilly-colorMutedText);
+    margin: 0 0 0 var(--rebilly-spacings-s);
   }
 
   .rebilly-instruments-summary-line-item-price-breakdown .rebilly-instruments-icon {
-    fill: ${theme.getComputed.color.mutedText};
+    fill: var(--rebilly-colorMutedText);
   }
 
   .rebilly-instruments-summary-line-item-price-breakdown-unit-price {
-    color: ${theme.color.text};
+    color: var(--rebilly-colorText);
   }
 
   .rebilly-instruments-summary-breakdown table {
     width: 100%;
-    margin: ${theme.space.xs} 0;
+    margin: var(--rebilly-spacings-xs) 0;
     color: inherit;
   }
 
@@ -89,38 +89,38 @@ const summary = theme => `
   }
 
   .rebilly-instruments-summary-breakdown table tr td:first-child {
-    padding-right: ${theme.space.s};
+    padding-right: var(--rebilly-spacings-s);
     font-weight: 500;
   }
 
   .rebilly-instruments-summary-breakdown table {
-    border-bottom: 1px solid ${theme.getComputed.color.mutedBorder};
-    padding-bottom: ${theme.space.xs};
+    border-bottom: 1px solid var(--rebilly-colorMutedBorder);
+    padding-bottom: var(--rebilly-spacings-xs);
   }
 
   .rebilly-instruments-summary-breakdown-total {
-    padding-top: ${theme.space.xs};
+    padding-top: var(--rebilly-spacings-xs);
     display: flex;
     align-items: center;
   }
 
   .rebilly-instruments-summary-breakdown-total p {
-    margin: ${theme.space.s} 0;
+    margin: var(--rebilly-spacings-s) 0;
   }
 
   .rebilly-instruments-summary-breakdown-total-amount {
       flex: 1 2 80%;
-      font-size: 24px;
+      font-size: calc(var(--rebilly-fontSizeBase) * 1.5);
       font-weight: 500;
       text-align: right;
       font-weight: bold;
   }
 
   .rebilly-instruments-summary-breakdown-total-amount-currency {
-    font-size: ${theme.typography.fontSize};
+    font-size: var(--rebilly-fontSizeBase);
     font-weight: normal;
-    color: ${theme.getComputed.color.mutedText};
-    margin-right: ${theme.space.s};
+    color: var(--rebilly-colorMutedText);
+    margin-right: var(--rebilly-spacings-s);
   }
 `;
 

package/dist/views/__snapshots__/summary.spec.js.snap

@@ -176,73 +176,37 @@ exports[`Summary component should render the summary correctly 2`] = `
       class="rebilly-instruments-summary-breakdown-sub-total"
     >
       
-      
+        
       <td
         data-rebilly-i18n="summary.subTotal"
       >
         Sub Total
       </td>
       
-      
+        
       <td>
         $70.00
       </td>
       
-    
-    </tr>
-    <tr
-      class="rebilly-instruments-summary-breakdown-discounts"
-    >
-      
       
-      <td
-        data-rebilly-i18n="summary.discounts"
-      >
-        Discounts
-      </td>
-      
-      
-      <td>
-        $0.00
-      </td>
-      
-    
     </tr>
     <tr
       class="rebilly-instruments-summary-breakdown-taxes"
     >
       
-      
+        
       <td
         data-rebilly-i18n="summary.taxes"
       >
         Taxes
       </td>
       
-      
+        
       <td>
         $0.00
       </td>
       
-    
-    </tr>
-    <tr
-      class="rebilly-instruments-summary-breakdown-shipping"
-    >
-      
       
-      <td
-        data-rebilly-i18n="summary.shipping"
-      >
-        Shipping
-      </td>
-      
-      
-      <td>
-        $0.00
-      </td>
-      
-    
     </tr>
   </table>
   <div

package/dist/views/common/iframe/modal-iframe.js

@@ -27,7 +27,12 @@ class ModalIframe extends _baseIframe.default {
       loader,
       section: 'modal',
       id: 'modal-content'
-    });
+    }); // Close modal via postmate
+
+    this.component.on(`${this.name}-close`, (...args) => {
+      close(...args);
+    }); // Close modal via postMessage (specifically during approal url flow)
+
     window.addEventListener('message', async event => {
       if (event.data === 'rebilly-instruments-approval-url-close') {
         if (this.state.options.transactionType === 'purchase') {

package/dist/views/summary.js

@@ -79,22 +79,26 @@ function summaryBreakdownHTML({
     label: 'Sub Total',
     class: 'sub-total',
     i18n: 'summary.subTotal',
-    value: subtotalAmount
+    value: subtotalAmount,
+    show: true
   }, {
     label: 'Discounts',
     class: 'discounts',
     i18n: 'summary.discounts',
-    value: discountsAmount
+    value: discountsAmount,
+    show: discountsAmount > 0
   }, {
     label: 'Taxes',
     class: 'taxes',
     i18n: 'summary.taxes',
-    value: taxAmount
+    value: taxAmount,
+    show: true
   }, {
     label: 'Shipping',
     class: 'shipping',
     i18n: 'summary.shipping',
-    value: shippingAmount
+    value: shippingAmount,
+    show: state.data.isShippingRequired
   }].filter(({
     value
   }) => value !== null).forEach(item => {
@@ -108,13 +112,15 @@ function summaryBreakdownHTML({
       `);
     }
 
-    const row = document.createElement('tr');
-    row.setAttribute('class', `rebilly-instruments-summary-breakdown-${item.class}`);
-    row.insertAdjacentHTML('beforeend', `
-      <td data-rebilly-i18n="${item.i18n}">${item.label}</td>
-      <td>${(0, _utils.formatCurrency)(item.value, currency)}</td>
-    `);
-    table.appendChild(row);
+    if (item.show) {
+      const row = document.createElement('tr');
+      row.setAttribute('class', `rebilly-instruments-summary-breakdown-${item.class}`);
+      row.insertAdjacentHTML('beforeend', `
+        <td data-rebilly-i18n="${item.i18n}">${item.label}</td>
+        <td>${(0, _utils.formatCurrency)(item.value, currency)}</td>
+      `);
+      table.appendChild(row);
+    }
   });
 
   if (table) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rebilly/instruments",
-  "version": "2.1.1-beta.0",
+  "version": "3.0.0-beta.0",
   "author": "Rebilly",
   "main": "dist/index.js",
   "license": "MIT",
@@ -16,12 +16,14 @@
     "@babel/preset-env": "^7.14.7",
     "@rebilly/risk-data-collector": "^2.0.1",
     "autoprefixer": "^10.3.4",
+    "css": "^3.0.0",
     "lodash.camelcase": "^4.3.0",
     "lodash.isequal": "^4.5.0",
     "lodash.kebabcase": "^4.1.1",
     "lodash.merge": "^4.6.2",
     "popostmate": "^1.6.4",
     "postcss": "^8.3.6",
+    "postcss-custom-properties": "^12.0.0",
     "rebilly-js-sdk": "^44.4.0",
     "values.js": "^2.0.0"
   },

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

@@ -81,6 +81,10 @@ export class DataInstance {
 
     return lineItems;
   }
+
+  get isShippingRequired() {
+    return this.products.some(product => product.requiresShipping);
+  }
 }
 
 export async function fetchData({

package/src/functions/mount/index.js

@@ -10,6 +10,7 @@ import setupOptions from './setup-options';
 import setupFramepay from './setup-framepay';
 import setupStyles from './setup-styles';
 import setupI18n from './setup-i18n';
+import setupFramepayTheme from './setup-framepay-theme';
 
 /**
  * @typedef {object} Item
@@ -95,6 +96,7 @@ export async function mount({
     state.options = setupOptions({ options });
     state.mainStyle = await setupStyles({ options });
     state.data = await fetchData({ state });
+    state.options.themeFramepay = await setupFramepayTheme({ state, options });
     const i18n = setupI18n({ state });
     setupFramepay({ state });
 

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

@@ -23,9 +23,7 @@ describe('RebillyInstruments instance', () => {
         }
       ],
       theme: {
-        color: {
-          background: '#000'
-        }
+        colorBackground: '#000'
       },
       css: `
       .rebilly-instruments-summary-line-item-synopsis-title {
@@ -47,8 +45,8 @@ describe('RebillyInstruments instance', () => {
     const SUMMARY_CONTAINER = summarySelector.querySelector(
       '.rebilly-instruments-content'
     );
-    expect(getComputedStyle(SUMMARY_CONTAINER).background).toEqual(
-      'rgb(0, 0, 0)'
+    expect(getComputedStyle(SUMMARY_CONTAINER).getPropertyValue('--rebilly-colorBackground')).toEqual(
+      '#000'
     );
 
     // CSS config property overrides initial styles