@rebilly/instruments 1.0.2-beta.1 → 1.0.2-beta.10

package/src/storefront/summary.spec.js

@@ -2,27 +2,20 @@ import { MockStorefront } from 'tests/mocks/storefront-mock';
 import { ok, post } from 'msw-when-then';
 import { when } from 'tests/msw/server';
 import { storefrontURL } from 'tests/mocks/storefront-api-mock';
-import { FetchSummary } from './summary';
+import { fetchSummary } from './summary';
 import SummaryModel from '@/storefront/models/summary-model';
+import { expectConfigurationError } from 'tests/async-utilities';
 
 describe('Storefront API Summary', () => {
   class TestSummaryInstance {
-    constructor({
-      configs = {},
-      options = {},
-      storefront = null,
-    } = {}) {
+    constructor({ configs = {}, options = {}, storefront = null } = {}) {
       this.configs = configs;
       this.options = options;
       this.storefront = storefront === null ? MockStorefront() : storefront;
     }
-
-    fetchSummary(...args) {
-      return FetchSummary.apply(this, args);
-    }
   }
-  
-  it ('can fetch preview', async () => {
+
+  it('can fetch preview', async () => {
     const configs = {
       websiteId: 'test-website-id'
     };
@@ -42,7 +35,7 @@ describe('Storefront API Summary', () => {
         {
           description: 'test-plan-id-1',
           planId: 'test-plan-id-1',
-          quantity: 1,
+          quantity: 1
         }
       ]
     };
@@ -51,26 +44,25 @@ describe('Storefront API Summary', () => {
 
     const instance = new TestSummaryInstance({
       configs,
-      options,
+      options
     });
 
     jest.spyOn(instance.storefront.purchase, 'preview');
 
-    const response = await instance.fetchSummary();
-    
+    const response = await fetchSummary({ state: instance });
+
     expect(instance.storefront.purchase.preview).toBeCalledTimes(1);
     expect(instance.storefront.purchase.preview).toBeCalledWith({
       data: {
         items: options.intent.items,
-        websiteId: configs.websiteId,
+        websiteId: configs.websiteId
       }
     });
     expect(response).toBeInstanceOf(SummaryModel);
     expect(response).toEqual(new SummaryModel(testSummary));
-    
   });
 
-  it ('Adds billing address to preview payload', async () => {
+  it('Adds billing address to preview payload', async () => {
     const configs = {
       websiteId: 'test-website-id'
     };
@@ -90,28 +82,29 @@ describe('Storefront API Summary', () => {
     };
     const instance = new TestSummaryInstance({
       configs,
-      options,
+      options
     });
 
     jest.spyOn(instance.storefront.purchase, 'preview');
 
-    await instance.fetchSummary({
+    await fetchSummary({
       data: {
-        billingAddress,
-      }
+        billingAddress
+      },
+      state: instance
     });
-    
+
     expect(instance.storefront.purchase.preview).toBeCalledTimes(1);
     expect(instance.storefront.purchase.preview).toBeCalledWith({
       data: {
         items: options.intent.items,
         websiteId: configs.websiteId,
-        billingAddress,
+        billingAddress
       }
     });
   });
 
-  it ('Adds delivery address to preview payload', async () => {
+  it('Adds delivery address to preview payload', async () => {
     const configs = {
       websiteId: 'test-website-id'
     };
@@ -131,53 +124,47 @@ describe('Storefront API Summary', () => {
     };
     const instance = new TestSummaryInstance({
       configs,
-      options,
+      options
     });
 
     jest.spyOn(instance.storefront.purchase, 'preview');
 
-    await instance.fetchSummary({
+    await fetchSummary({
       data: {
-        deliveryAddress,
-      }
+        deliveryAddress
+      },
+      state: instance
     });
-    
+
     expect(instance.storefront.purchase.preview).toBeCalledTimes(1);
     expect(instance.storefront.purchase.preview).toBeCalledWith({
       data: {
         items: options.intent.items,
         websiteId: configs.websiteId,
-        deliveryAddress,
+        deliveryAddress
       }
     });
-    
   });
 
-  it ('should throw errors with no configs or options', () => {
-    const NoConfigOrOptionsError = new Error('Could not use Rebilly Instruments configurations or mount options to fetch Rebilly data');
+  it('should throw errors with no configs or options', async () => {
     const noConfigOrOptionsInstance = new TestSummaryInstance({
       configs: null,
-      options: null,
+      options: null
     });
+    await expectConfigurationError(
+      fetchSummary({ state: noConfigOrOptionsInstance })
+    );
+
     const noConfigInstance = new TestSummaryInstance({
       configs: null,
-      options: {},
+      options: {}
     });
+    await expectConfigurationError(fetchSummary({ state: noConfigInstance }));
+
     const noOptionsInstance = new TestSummaryInstance({
       configs: {},
-      options: null,
+      options: null
     });
-
-    expect(async () => {
-      await noConfigOrOptionsInstance.fetchSummary();
-    }).rejects.toEqual(NoConfigOrOptionsError);
-
-    expect(async () => {
-      await noConfigInstance.fetchSummary();
-    }).rejects.toEqual(NoConfigOrOptionsError);
-
-    expect(async () => {
-      await noOptionsInstance.fetchSummary();
-    }).rejects.toEqual(NoConfigOrOptionsError);
+    await expectConfigurationError(fetchSummary({ state: noOptionsInstance }));
   });
 });

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

@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+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",
+  },
+}
+`;

package/src/style/base/index.js

@@ -0,0 +1,63 @@
+export const base = (theme) => `
+  /* Base, Typography
+  ------------------------------------------------------------ */
+  /* Base setup for top level elements */
+  .rebilly-instruments-content,
+  .rebilly-instruments-method-content,
+  .rebilly-instruments-confirmation,
+  .rebilly-instruments-results {
+    color: ${theme.color.text};
+    background: ${theme.color.background};
+    font-size: ${theme.typography.fontSize};
+    line-height: ${theme.typography.lineHeight};
+    font-family: ${theme.typography.fontFamily};
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: left;
+    transition: all 200ms;
+  }
+
+  .rebilly-instruments-link {
+    color: ${theme.color.primary};
+    cursor: pointer;
+  }
+
+  .rebilly-instruments-link:hover {
+    text-decoration: none;
+  }
+
+  .rebilly-instruments-link .rebilly-instruments-icon {
+    fill: ${theme.color.primary};
+  }
+
+  .rebilly-instruments-link.has-icon-left,
+  .rebilly-instruments-link.has-icon-right {
+    display: inline-flex;
+  }
+
+  .rebilly-instruments-link.has-icon-left .rebilly-instruments-icon {
+    margin-right: ${theme.space.xs};
+  }
+
+  .rebilly-instruments-link.has-icon-right .rebilly-instruments-icon {
+    margin-left: ${theme.space.xs};
+  }
+
+  /* Typography */
+  .rebilly-instruments-h1,
+  .rebilly-instruments-h2 {
+    font-weight: 500;
+  }
+
+  .rebilly-instruments-h1 {
+    font-size: calc(${theme.typography.fontSize} * 1.5);
+    line-height: calc(${theme.typography.lineHeight} * 1.5);
+    margin: 0 0 calc(${theme.space.m} * 1.5) 0;
+  }
+
+  .rebilly-instruments-h2 {
+    font-size: calc(${theme.typography.fontSize} * 1.12);
+    line-height: ${theme.typography.lineHeight};
+    margin: 0 0 ${theme.space.m} 0;
+  }
+`;

package/src/style/base/theme.js

@@ -0,0 +1,61 @@
+import merge from 'lodash.merge';
+import { colorValues, alphaColor } from '../utils/color-values';
+
+export class Theme {
+  constructor(overrides = {}) {
+    this.overrides = overrides;
+    this.theme = {
+      color: {
+        primary: '#0044d4',
+        errorText: '#cd5c5c',
+        text: '#0D2B3E',
+        buttonText: '#ffffff',
+        background: '#ffffff'
+      },
+      typography: {
+        fontFamily: 'Avenir, Helvetica, Arial, sans-serif',
+        fontSize: '16px',
+        lineHeight: '24px',
+        captionFontSize: '12px',
+        captionLineHeight: '12px'
+      },
+      space: {
+        xxs: '4px',
+        xs: '6px',
+        s: '12px',
+        m: '24px',
+        l: '48px',
+        xl: '96px',
+        xxl: '112px',
+        form: {
+          padding: '8px 16px',
+          verticalPadding: '8px',
+          horizontalPadding: '16px',
+          minHeight: '44px'
+        }
+      },
+      borderRadius: '4px'
+    };
+  }
+
+  get getComputed() {
+    return this.computed();
+  }
+
+  computed() {
+    return {
+      color: {
+        primaryValues: colorValues(this.theme.color.primary),
+        mutedText: alphaColor(this.theme.color.text, 0.6),
+        mutedBorder: alphaColor(this.theme.color.text, 0.25)
+      }
+    };
+  }
+
+  build() {
+    return {
+      ...merge(this.theme, this.overrides),
+      getComputed: this.getComputed
+    };
+  }
+}

package/src/style/base/theme.spec.js

@@ -0,0 +1,32 @@
+import { Theme } from './theme';
+import Values from 'values.js';
+
+describe('RebillyInstruments theme', () => {
+  it('builds the theme object', () => {
+    const theme = new Theme().build();
+
+    expect(theme).toMatchSnapshot();
+  });
+
+  it('properly overrides the default properties', () => {
+    const overrides = {
+      color: {
+        primary: 'purple',
+        text: 'gray'
+      }
+    };
+    const theme = new Theme(overrides).build();
+
+    expect(theme.color.primary).toEqual('purple');
+    expect(theme.color.text).toEqual('gray');
+  });
+
+  it('computes new styles from theme properties', () => {
+    const theme = new Theme().build();
+
+    expect(theme.getComputed.color.primaryValues instanceof Values).toEqual(
+      true
+    );
+    expect(theme.getComputed.color.mutedText).toEqual('rgba(13, 43, 62, 0.6)');
+  });
+});

package/src/style/browserslist.js

@@ -0,0 +1 @@
+export const browserslist = ['> 1%', 'last 2 versions'];

package/src/style/components/address.js

@@ -0,0 +1,55 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the address component.
+// -----------------------------------------------------------------------------
+export const address = (theme) => `
+  /**
+  * Address
+  */
+  .rebilly-instruments-address {
+    margin: 0 0 ${theme.space.m};
+    color: ${theme.getComputed.color.mutedText};
+    font-style: normal;
+  }
+
+  /**
+   * Address Name: Default
+   */
+  .rebilly-instruments-address-name-default {
+    /* No style changes */
+  }
+
+  /**
+   * Address Name: Combined
+   */
+  .rebilly-instruments-address-name-combined {
+    /* No style changes */
+  }
+
+  /**
+   * Address Name: Stacked
+   */
+  .rebilly-instruments-address-name-stacked {
+    /* No style changes */
+  }
+
+  /**
+   * Address Region: Default
+   */
+  .rebilly-instruments-address-region-default {
+    /* No style changes */
+  }
+
+  /**
+   * Address Region: Split
+   */
+  .rebilly-instruments-address-region-split {
+    /* No style changes */
+  }
+
+  /**
+   * Address Name: Stacked
+   */
+  .rebilly-instruments-address-region-stacked {
+    /* No style changes */
+  }
+`;

package/src/style/components/button.js

@@ -0,0 +1,54 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the button component.
+// -----------------------------------------------------------------------------
+export const button = (theme) => `
+  /**
+  * Buttons
+  */
+  .rebilly-instruments-button {
+    font-size: ${theme.typography.fontSize};
+    font-family: ${theme.typography.fontFamily};
+    line-height: ${theme.typography.lineHeight};
+    padding: ${theme.space.form.padding};
+    box-sizing: border-box;
+    background: ${theme.color.primary};
+    color: ${theme.color.buttonText};
+    border-radius: ${theme.borderRadius};
+    margin: calc(${theme.space.xxs} + ${theme.space.s} / 2) 0;
+    font-weight: 500;
+    border: none;
+    width: 100%;
+    cursor: pointer;
+    min-height: 44px;
+    transition: all 0.2s ease;
+    outline: none;
+  }
+
+  .rebilly-instruments-button:hover,
+  .rebilly-instruments-button:active {
+    background: ${theme.getComputed.color.primaryValues.shade(20).hexString()};
+  }
+
+  .rebilly-instruments-button.rebilly-instruments-button-secondary {
+    background: ${theme.color.background};
+    box-shadow: inset 0 0 0 1px ${theme.color.primary};
+    color: ${theme.color.primary};
+  }
+
+  .rebilly-instruments-button.rebilly-instruments-button-secondary:hover,
+  .rebilly-instruments-button.rebilly-instruments-button-secondary:active {
+    background: ${theme.color.background};
+  }
+
+  .rebilly-instruments-button:focus { box-shadow: 0 0 0 2px ${theme.getComputed.color.primaryValues
+    .tint(60)
+    .hexString()}; }
+
+  .rebilly-instruments-button:disabled { opacity: 0.6; }
+
+  .rebilly-instruments-button::first-letter { text-transform: uppercase; }
+
+  .rebilly-instruments-button:first-of-type { margin-top: 0; }
+
+  .rebilly-instruments-button:last-of-type { margin-bottom: 0; }
+`;

package/src/style/components/divider.js

@@ -0,0 +1,39 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the divider component.
+// -----------------------------------------------------------------------------
+export const divider = (theme) => `
+  /**
+  * Divider
+  */
+  .rebilly-instruments-divider {
+    line-height: ${theme.typography.lineHeight};
+    padding: ${theme.space.m} 0;
+    margin: 0;
+    position: relative;
+    outline: 0;
+    border: 0;
+    text-align: center;
+  }
+
+  .rebilly-instruments-divider::before {
+    background: ${theme.getComputed.color.mutedBorder};
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    width: 100%;
+    height: 1px;
+  }
+
+  .rebilly-instruments-divider .rebilly-instruments-divider-label {
+    color: ${theme.getComputed.color.mutedText};
+    font-weight: 500;
+    text-transform: uppercase;
+    padding: 0 ${theme.space.s};
+    line-height: 14px;
+    background-color: ${theme.color.background};
+    font-size: 12px;
+    position: relative;
+    display: inline-block;
+  }
+`;

package/src/style/components/forms/checkbox.js

@@ -0,0 +1,76 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the checkbox component.
+// -----------------------------------------------------------------------------
+export const checkbox = (theme) => `
+  /**
+  * Checkbox
+  */
+  .rebilly-instruments-form-field-checkbox {
+    position: relative;
+    opacity: 1;
+    padding-left: calc(${theme.space.m} + ${theme.space.s});
+    align-items: center;
+    display: inline-block;
+    cursor: pointer;
+    transform: none;
+  }
+
+  .rebilly-instruments-form-field-checkbox > * {
+    cursor: pointer;
+  }
+
+  .rebilly-instruments-form-field-checkbox input[type="checkbox"] {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+  }
+
+  .rebilly-instruments-form-field-checkbox span {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 24px;
+    width: 24px;
+    border-radius: ${theme.borderRadius};
+    box-shadow: inset 0 0 0 1px ${theme.getComputed.color.mutedBorder};
+    background-color: transparent;
+    transition: all 200ms;
+  }
+
+  .rebilly-instruments-form-field-checkbox span:after {
+    content: '';
+    position: absolute;
+    left: 9px;
+    top: 4px;
+    opacity: 0;
+    width: 5px;
+    height: 11px;
+    border: solid ${theme.color.primary};
+    border-width: 0 2px 2px 0;
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+    transition: all 200ms;
+  }
+
+  .rebilly-instruments-form-field-checkbox input[type="checkbox"]:checked ~ span {
+    box-shadow: inset 0 0 0 2px ${theme.color.primary};
+  }
+
+  .rebilly-instruments-form-field-checkbox input[type="checkbox"]:checked ~ span:after {
+    opacity: 1;
+  }
+
+  .rebilly-instruments-form-field-checkbox input[type="checkbox"]:focus ~ span {
+    box-shadow: 0 0 0 2px ${theme.getComputed.color.primaryValues
+      .tint(80)
+      .hexString()},
+    inset 0 0 0 1px ${theme.color.primary};
+  }
+
+  .rebilly-instruments-form-field-checkbox input[type="checkbox"]:disabled ~ span {
+    opacity: 0.6;
+  }
+`;

package/src/style/components/forms/field.js

@@ -0,0 +1,44 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the field component.
+// -----------------------------------------------------------------------------
+export const field = (theme) => `
+  /**
+  * Field
+  */
+  .rebilly-instruments-form-field {
+    margin: calc(${theme.space.xxs} + ${theme.space.s}) 0;
+    position: relative;
+  }
+
+  /* Field group */
+  .rebilly-instruments-form-field-group {
+    margin: calc(-${theme.space.xxs} - ${theme.space.s}) 0;
+    display: flex;
+  }
+
+  .rebilly-instruments-form-field-group > * {
+    flex: 1 0;
+    margin-left: ${theme.space.xs};
+    margin-right: ${theme.space.xs}
+  }
+
+  .rebilly-instruments-form-field-group > *:first-child {
+    margin-left: 0;
+  }
+
+  .rebilly-instruments-form-field-group > *:last-child {
+    margin-right: 0;
+  }
+
+  @media (max-width: 480px) {
+    .rebilly-instruments-form-field-group {
+      display: block;
+      margin: calc(${theme.space.xxs} + ${theme.space.s}) 0;
+    }
+
+    .rebilly-instruments-form-field-group > * {
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+`;

package/src/style/components/forms/form.js

@@ -0,0 +1,19 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the form component.
+// -----------------------------------------------------------------------------
+export const form = (theme) => `
+  /**
+  * Form
+  */
+  /* Chrome autocomplete styles */
+  .rebilly-instruments-form input:-webkit-autofill,
+  .rebilly-instruments-form input:-webkit-autofill:hover, 
+  .rebilly-instruments-form input:-webkit-autofill:focus,
+  .rebilly-instruments-form select:-webkit-autofill,
+  .rebilly-instruments-form select:-webkit-autofill:hover,
+  .rebilly-instruments-form select:-webkit-autofill:focus {
+    -webkit-text-fill-color: ${theme.color.text};
+    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
+    transition: background-color 5000s ease-in-out 0s;
+  }
+`;