@rebilly/instruments 1.0.2-beta.8 → 2.1.1-beta.0

package/src/storefront/summary.js

@@ -1,37 +1,41 @@
 import SummaryModel from './models/summary-model';
+import { Endpoint } from './index';
 
-export async function FetchSummary ({
-  data = null
-} = {}) {
-  if (!this.storefront) {
-    throw new Error('Could not access rebilly-js-sdk instance');
-  }
-
-  if (!this.configs || !this.options) {
-    throw new Error('Could not use Rebilly Instruments configurations or mount options to fetch Rebilly data');
-  }
-
-  try {
-    const websiteId = this.configs?.websiteId || null;
-    const items = this.options?.intent?.items || [];
+export async function fetchSummary({ data = null, state = null } = {}) {
+  return Endpoint({state}, async () => {
+    const websiteId = state.options?.websiteId || null;
 
     const payload = {
       data: {
-        websiteId,
-        items
+        websiteId
+      }
+    };
+
+    if (state.options?.items) {
+      payload.data.items = state.options.items;
+    }
+
+    if (state.data?.amountAndCurrency) {
+      payload.data = {
+        ...payload.data,
+        ...state.data.amountAndCurrency
       }
     }
+
     if (data?.billingAddress) {
       payload.data.billingAddress = data.billingAddress;
     }
-    if(data?.deliveryAddress) {
+    if (data?.deliveryAddress) {
       payload.data.deliveryAddress = data.deliveryAddress;
     }
 
-    const {fields: summaryFields} = await this.storefront.purchase.preview(payload);
+    const { fields: summaryFields } = await state.storefront.purchase.preview(
+      payload
+    );
+
+    // In case of preview purchase gets call again for updating the values
+    state.data.previewPurchase = summaryFields;
 
     return new SummaryModel(summaryFields);
-  } catch (error) {
-    throw error;
-  }
-};
+  });
+}

package/src/storefront/summary.spec.js

@@ -1,40 +1,21 @@
-import { MockStorefront } from 'tests/mocks/storefront-mock';
+import { StorefontTestingInstance } 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,
-    } = {}) {
-      this.configs = configs;
-      this.options = options;
-      this.storefront = storefront === null ? MockStorefront() : storefront;
-    }
-
-    fetchSummary(...args) {
-      return FetchSummary.apply(this, args);
-    }
-  }
-  
-  it ('can fetch preview', async () => {
-    const configs = {
-      websiteId: 'test-website-id'
-    };
+  it('can fetch preview', async () => {
     const options = {
-      intent: {
-        items: [
-          {
-            planId: 'test-plan-id',
-            quantity: 1
-          }
-        ]
-      }
+      websiteId: 'test-website-id',
+      items: [
+        {
+          planId: 'test-plan-id',
+          quantity: 1
+        }
+      ]
     };
     const testSummary = {
       currency: 'USD',
@@ -42,142 +23,112 @@ describe('Storefront API Summary', () => {
         {
           description: 'test-plan-id-1',
           planId: 'test-plan-id-1',
-          quantity: 1,
+          quantity: 1
         }
       ]
     };
 
     when(post(`${storefrontURL}/preview-purchase`)).thenReturn(ok(testSummary));
 
-    const instance = new TestSummaryInstance({
-      configs,
-      options,
+    const instance = StorefontTestingInstance({
+      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,
+        items: options.items,
+        websiteId: options.websiteId
       }
     });
     expect(response).toBeInstanceOf(SummaryModel);
     expect(response).toEqual(new SummaryModel(testSummary));
-    
   });
 
-  it ('Adds billing address to preview payload', async () => {
-    const configs = {
-      websiteId: 'test-website-id'
-    };
+  it('Adds billing address to preview payload', async () => {
     const options = {
-      intent: {
-        items: [
-          {
-            planId: 'test-plan-id',
-            quantity: 1
-          }
-        ]
-      }
+      websiteId: 'test-website-id',
+      items: [
+        {
+          planId: 'test-plan-id',
+          quantity: 1
+        }
+      ]
     };
     const billingAddress = {
       firstName: 'Test',
       lastName: 'Customer'
     };
-    const instance = new TestSummaryInstance({
-      configs,
-      options,
+    const instance = StorefontTestingInstance({
+      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,
+        items: options.items,
+        websiteId: options.websiteId,
+        billingAddress
       }
     });
   });
 
-  it ('Adds delivery address to preview payload', async () => {
-    const configs = {
-      websiteId: 'test-website-id'
-    };
+  it('Adds delivery address to preview payload', async () => {
     const options = {
-      intent: {
-        items: [
-          {
-            planId: 'test-plan-id',
-            quantity: 1
-          }
-        ]
-      }
+      websiteId: 'test-website-id',
+      items: [
+        {
+          planId: 'test-plan-id',
+          quantity: 1
+        }
+      ]
     };
     const deliveryAddress = {
       firstName: 'Test',
       lastName: 'Customer'
     };
-    const instance = new TestSummaryInstance({
-      configs,
-      options,
+    const instance = StorefontTestingInstance({
+      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,
+        items: options.items,
+        websiteId: options.websiteId,
+        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');
-    const noConfigOrOptionsInstance = new TestSummaryInstance({
-      configs: null,
-      options: null,
-    });
-    const noConfigInstance = new TestSummaryInstance({
-      configs: null,
-      options: {},
-    });
-    const noOptionsInstance = new TestSummaryInstance({
-      configs: {},
-      options: null,
+  it('should throw errors with no options', async () => {
+    const noConfigOrOptionsInstance = StorefontTestingInstance({
+      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: noConfigOrOptionsInstance })
+    );
   });
 });

package/src/storefront/transactions.js

@@ -0,0 +1,11 @@
+import TransactionModel from './models/transaction-model';
+import { Endpoint } from './index';
+
+export async function fetchTransaction({ data = null, state = null }) {
+  return Endpoint({state}, async () => {
+    state.storefront.setSessionToken(state.options.customerJwt);
+    const {fields} = await state.storefront.transactions.get(data);
+
+    return new TransactionModel(fields);
+  });
+}

package/src/style/base/theme.js

@@ -31,29 +31,31 @@ export class Theme {
           padding: '8px 16px',
           verticalPadding: '8px',
           horizontalPadding: '16px',
-          minHeight: '44px',
+          minHeight: '44px'
         }
       },
-      borderRadius: '4px',
+      borderRadius: '4px'
     };
   }
-  
-  get getComputed() { return this.computed() }
+
+  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),
+        mutedBorder: alphaColor(this.theme.color.text, 0.25)
       }
-    }
+    };
   }
 
   build() {
     return {
-      ...merge(this.theme, this.overrides),
+      ...merge({...this.theme}, this.overrides),
       getComputed: this.getComputed
     };
   }
-};
+}

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

@@ -14,7 +14,7 @@ describe('RebillyInstruments theme', () => {
         primary: 'purple',
         text: 'gray'
       }
-    }
+    };
     const theme = new Theme(overrides).build();
 
     expect(theme.color.primary).toEqual('purple');
@@ -24,7 +24,9 @@ describe('RebillyInstruments theme', () => {
   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.primaryValues instanceof Values).toEqual(
+      true
+    );
     expect(theme.getComputed.color.mutedText).toEqual('rgba(13, 43, 62, 0.6)');
   });
 });

package/src/style/browserslist.js

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

package/src/style/components/button.js

@@ -40,7 +40,9 @@ export const button = (theme) => `
     background: ${theme.color.background};
   }
 
-  .rebilly-instruments-button:focus { box-shadow: 0 0 0 2px ${theme.getComputed.color.primaryValues.tint(60).hexString()}; }
+  .rebilly-instruments-button:focus { box-shadow: 0 0 0 2px ${theme.getComputed.color.primaryValues
+    .tint(60)
+    .hexString()}; }
 
   .rebilly-instruments-button:disabled { opacity: 0.6; }
 

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

@@ -64,7 +64,9 @@ export const checkbox = (theme) => `
   }
 
   .rebilly-instruments-form-field-checkbox input[type="checkbox"]:focus ~ span {
-    box-shadow: 0 0 0 2px ${theme.getComputed.color.primaryValues.tint(80).hexString()},
+    box-shadow: 0 0 0 2px ${theme.getComputed.color.primaryValues
+      .tint(80)
+      .hexString()},
     inset 0 0 0 1px ${theme.color.primary};
   }
 

package/src/style/components/index.js

@@ -32,4 +32,4 @@ export const components = (theme) => `
   ${icons(theme)}
   ${address(theme)}
   ${overlay(theme)}
-`
+`;

package/src/style/components/loader.js

@@ -24,7 +24,9 @@ export const loader = (theme) => `
   }
 
   .rebilly-instruments-loader-spinner {
-    border: 4px solid ${theme.getComputed.color.primaryValues.tint(80).hexString()};
+    border: 4px solid ${theme.getComputed.color.primaryValues
+      .tint(80)
+      .hexString()};
     border-top: 4px solid ${theme.color.primary};
     border-radius: 50%;
     width: 40px;

package/src/style/components/methods.js

@@ -6,73 +6,60 @@ export const expressMethods = (theme) => `
    * Express methods
    */
 
-  .rebilly-instruments-express-methods * + * {
-    margin-top: ${theme.space.s};
-  }
-
-  .rebilly-instruments-express-methods *:nth-child(2) {
-    margin-top: 0;
-  }
-
-  .rebilly-instruments-express-methods.is-compact * + * {
-    margin-top: 0;
+  @keyframes rebillyExpressShine {
+    to {
+      background-position-x: -200%;
+    }
   }
 
   .rebilly-instruments-express-methods.is-compact {
-    display: flex;
-    justify-content: center;
-    padding: calc(${theme.space.xs} + ${theme.space.s}) ${theme.space.s} ${theme.space.s};
     border: 1px solid ${theme.getComputed.color.mutedBorder};
+    padding: calc(${theme.space.xs} + ${theme.space.s}) ${theme.space.s} ${theme.space.s};
     border-radius: ${theme.borderRadius};
     position: relative;
-    flex-wrap: wrap;
   }
 
-  @keyframes rebillyExpressShine {
-    to {
-      background-position-x: -200%;
-    }
-  }
-
-  .rebilly-instruments-express-methods.is-compact > * {
-    flex: 1 1;
-    margin: ${theme.space.xs} ${theme.space.xs};
-    max-width: 260px;
+  .rebilly-instruments-express-methods .rebilly-instruments-iframe {
+    display: block;
+    margin-bottom: 0;
     height: 44px;
-    background: linear-gradient(110deg, ${theme.getComputed.color.mutedBorder} 0%, ${theme.color.background} 25%, ${theme.getComputed.color.mutedBorder} 50%);
-    border-radius: 6px;
-    background-size: 200% 100%;
-    animation: 1.5s rebillyExpressShine linear infinite;
-    position: relative;
   }
 
-  .rebilly-instruments-express-methods > * {
-    margin: ${theme.space.xs} 0;
-    height: 44px;
-    background: linear-gradient(110deg, ${theme.getComputed.color.mutedBorder} 0%, ${theme.color.background} 25%, ${theme.getComputed.color.mutedBorder} 50%);
+  .rebilly-instruments-express-methods .rebilly-instruments-express-methods-container > * {
     border-radius: 6px;
+    margin-bottom: ${theme.space.xs};
+    background: linear-gradient(110deg, ${theme.getComputed.color.mutedBorder} 0%, ${theme.color.background} 25%, ${theme.getComputed.color.mutedBorder} 50%);
     background-size: 200% 100%;
     animation: 1.5s rebillyExpressShine linear infinite;
   }
+  .rebilly-instruments-express-methods .rebilly-instruments-express-methods-container > *:last-child {
+    margin: 0;
+  }
 
-  .rebilly-instruments-express-methods > *:last-child {
-    margin-bottom: 0;
+  .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container {
+    display: flex;
+    justify-content: center;
   }
 
-  @media (max-width: 600px) {
-    .rebilly-instruments-express-methods.is-compact > * {
-      flex: 1 1 auto;
-      max-width: 100%;
-    }
+  .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container > * {
+    flex: 1 1 0px;
+    max-width: 260px;
+    margin: 0 ${theme.space.xs};
+  }
+  .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container > *:first-child {
+    margin-left: 0;
+  }
+  .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container > *:last-child {
+    margin-right: 0;
   }
 
   .rebilly-instruments-express-methods .rebilly-instruments-express-methods-label {
     display: none;
   }
-
   .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-label {
     position: absolute;
-    top: -12px;
+    top: -12px; left: 50%;
+    transform: translateX(-50%);
     color: ${theme.color.text};
     padding: 0 ${theme.space.s};
     line-height: ${theme.typography.lineHeight};
@@ -81,6 +68,20 @@ export const expressMethods = (theme) => `
     font-weight: 500;
     min-height: auto;
     margin: 0;
+    border: 1px soplid red;
+  }
+
+  @media (max-width: 600px) {
+    .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container  {
+      flex-direction: column;
+    }
+    .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container > * {
+      max-width: 100%;
+      margin: 0 0 ${theme.space.xs};
+    }
+    .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container > *:last-child {
+      margin: 0;
+    }
   }
 `;
 

package/src/style/helpers/index.js

@@ -48,4 +48,4 @@ export const helpers = (theme) => `
     .rebilly-instruments-helper-ml-xl { margin-left: ${theme.space.xl}!important }
     .rebilly-instruments-helper-ml-xxl { margin-left: ${theme.space.xxl}!important }
     .rebilly-instruments-helper-ml-0 { margin-left: 0!important }
-  `
+  `;

package/src/style/index.js

@@ -25,5 +25,6 @@ export const mainStyle = async (themeOverride) => {
   `;
 
   return postcss([autoprefixer(browserslist)])
-    .process(style, {from: undefined}).then(result => result.css)
+    .process(style, { from: undefined })
+    .then((result) => result.css);
 };

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

@@ -3,7 +3,7 @@ import Values from 'values.js';
 export const colorValues = (color) => new Values(color);
 
 export function alphaColor(color, alphaValue = 1) {
-	const _alphaColor = new Values(color);
-    _alphaColor.alpha = alphaValue;
-    return _alphaColor.rgbString();
-};
+  const _alphaColor = new Values(color);
+  _alphaColor.alpha = alphaValue;
+  return _alphaColor.rgbString();
+}

package/src/style/vendor/framepay.js

@@ -22,4 +22,4 @@ export const framepayStyle = (theme) => `
       border: none;
       margin: 0;
     }
-  `
+  `;

package/src/style/vendor/postmate.js

@@ -5,4 +5,4 @@ export const postmateStyle = (theme) => `
       min-height: ${theme.space.form.minHeight};
       transition: all 0.2s ease;
     }
-  `
+  `;

package/src/style/views/confirmation.js

@@ -15,10 +15,6 @@ export const confirmation = (theme) => `
     margin-left: -${theme.space.xs};
   }
 
-  .rebilly-instruments-confirmation .rebilly-instruments-h2 {    
-    margin: 0 0 ${theme.space.s};
-  }
-
   .rebilly-instruments-confirmation-address-title {
     display: flex;
     justify-content: flex-start;

package/src/style/views/index.js

@@ -13,4 +13,4 @@ export const views = (theme) => `
     ${confirmation(theme)}
     ${result(theme)}
     ${modal(theme)}
-  `
+  `;

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

@@ -5,7 +5,7 @@ export const methodSelector = (theme) => `
   /**
   * Method selector
   */
-  .rebilly-instruments-method-selector {
+  .rebilly-instruments-method-selector.has-express-compact {
     padding-top: ${theme.space.s};
   }
 `;

package/src/style/views/modal.js

@@ -31,6 +31,7 @@ export const modal = (theme) => `
     transition: all .24s ease-in-out;
     position: relative;
     max-width: 800px;
+    background: ${theme.color.background};
     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};
@@ -59,7 +60,8 @@ export const modal = (theme) => `
 
   .rebilly-instruments-modal-content .rebilly-instruments-iframe {
     transition: all .15s;
-    height: 100%;
+    height: auto;
+    min-height: 360px;
   }
 
   .rebilly-instruments-modal-container.is-redirect .rebilly-instruments-modal-content {
@@ -79,4 +81,4 @@ export const modal = (theme) => `
   .rebilly-instruments-modal-close:hover{
     color: #000;
   }
-`;
+`;

package/src/style/views/summary.js

@@ -86,10 +86,14 @@ export const summary = (theme) => `
     font-weight: 500;
   }
 
+  .rebilly-instruments-summary-breakdown table {
+    border-bottom: 1px solid ${theme.getComputed.color.mutedBorder};
+    padding-bottom: ${theme.space.xs};
+  }
+
   .rebilly-instruments-summary-breakdown-total {
     padding-top: ${theme.space.xs};
     display: flex;
-    border-top: 1px solid ${theme.getComputed.color.mutedBorder};
     align-items: center;
   }