@rebilly/instruments 3.12.3-beta.0 → 3.13.2-beta.0

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

@@ -114,7 +114,7 @@ describe('Summary component', () => {
 
     await updateMethodSelector({
       state,
-      mainStyle: 'any main style'
+      mainStyleVars: 'any main style'
     });
   });
 });

package/src/views/method-selector/mount-express-methods.js

@@ -1,41 +1,81 @@
 import mountExpressMethod from './express-methods';
-import mountApplePay from './express-methods/apple-pay';
+import {generateFramepayConfig} from './generate-framepay-config'
 import { getMethodData } from './get-method-data';
+import Events from '../../events';
 
-export function mountExpressMethods({
+const browserIsSafari = () => window.ApplePaySession;
+
+export async function mountExpressMethods({
   state,
-  EXPRESS_METHODS,
-  EXPRESS_METHODS_CONTAINER
+  methods,
+  container
 }) {
-  // A child div for each method must be created before mounting.
-  // Any DOM operation (innerHTML, append, etc) done on the parent div (EXPRESS_METHODS_CONTAINER) in between
-  // the two Postmate's instantiation (1 parent, 1 child) will cause the parent <-> child handshake to fail
-  EXPRESS_METHODS.forEach((expressMethod) => {
+  const methodIds = methods.map((expressMethod) => {
     const { METHOD_ID } = getMethodData(expressMethod);
+    return METHOD_ID
+  });
+  const {Rebilly} = window;
 
-    EXPRESS_METHODS_CONTAINER.innerHTML += `
-      <div class="rebilly-instruments-${METHOD_ID}-method"></div>
+  if(!Rebilly?.initialized) {
+    await Rebilly?.initialize(
+      generateFramepayConfig({
+        state,
+        methodIds
+      })
+    );
+  }
+
+  methodIds.forEach((id) => {
+    // filter out apple pay unless in safari
+    if (id === 'apple-pay' && !browserIsSafari()) return
+
+    container.innerHTML += `
+      <div class="rebilly-instruments-${id}-method"></div>
     `;
+    mountExpressMethod({
+      state,
+      id,
+    });
   });
 
+  // HOTFIX: Hardcoded, use env variables in the future
+  const redirectUrl = state.options.apiMode === 'sandbox'
+    ? 'https://forms-sandbox.secure-payments.app/approval-url?close=true'
+    : 'https://forms.secure-payments.app/approval-url?close=true';
+
+  Rebilly?.on('token-ready', (token) => {
+    const instrumentReadyPayload = {
+      websiteId: state.options.websiteId,
+      billingAddress: token.billingAddress,
+      redirectUrl,
+      _raw: token
+    };
+    
+    if (state.data?.isShippingRequired) {
+      if (token.shippingAddress) {
+        instrumentReadyPayload.deliveryAddress = token.shippingAddress;
+      } else {
+        instrumentReadyPayload.deliveryAddress = instrumentReadyPayload.billingAddress;
+      }
+    }
 
-  EXPRESS_METHODS.forEach((expressMethod) => {
-    const { feature } = expressMethod;
-    const { METHOD_ID, METHOD_TYPE } = getMethodData(expressMethod);
+    if (Array.isArray(instrumentReadyPayload.billingAddress?.emails)) {
+      const email = instrumentReadyPayload.billingAddress.emails
+        .find(e => e.label === 'main')
 
-    if (feature?.name === 'Apple Pay') {
-      mountApplePay({
-        state,
-        METHOD_ID,
-        METHOD_TYPE,
-        EXPRESS_METHODS,
-        EXPRESS_METHODS_CONTAINER
-      });
-    } else {
-      mountExpressMethod({
-        state,
-        METHOD_ID
-      })
+      if (email?.value) {
+        instrumentReadyPayload.billingAddress.email = email.value;
+      }
     }
+    if (Array.isArray(instrumentReadyPayload.deliveryAddress?.emails)) {
+      const email = instrumentReadyPayload.deliveryAddress.emails
+        .find(e => e.label === 'main')
+
+      if (email?.value) {
+        instrumentReadyPayload.deliveryAddress.email = email.value;
+      }
+    }
+
+    Events.instrumentReady.dispatch(instrumentReadyPayload);
   });
 }

package/src/views/modal.js

@@ -46,7 +46,7 @@ export async function mountModal({
     modalContainer.classList.add('is-visible');
   }, 240);
   state.loader.addDOMElement({ section: 'modal', el: modalContent });
-  state.loader.startLoading({ section: 'modal', id: 'modal-content' });
+  state.loader.startLoading({ section: 'modal', id: name });
 
   const injectedModel = {
     options: state.options,

package/src/views/result.js

@@ -5,7 +5,7 @@ export async function mountResult({ payload, state }) {
   const resultContainerClassName = 'rebilly-instruments-result';
   replaceContent(state.form, `<div class="${resultContainerClassName}"></div>`);
 
-  state.loader.startLoading({ id: 'result' });
+  state.loader.startLoading({ id: 'rebilly-instruments-result' });
   state.loader.stopLoading({ id: 'express-purchase' });
 
   const container = document.querySelector(`.${resultContainerClassName}`);
@@ -13,7 +13,7 @@ export async function mountResult({ payload, state }) {
 
   const model = {
     options: state.options,
-    mainStyle: state.mainStyle,
+    mainStyleVars: state.mainStyleVars,
     [state.options.transactionType]: payload
   };
 
@@ -27,5 +27,5 @@ export async function mountResult({ payload, state }) {
     loader: state.loader
   });
 
-  state.iframeComponents.push(iframe);
+  state.iframeComponents.form.push(iframe);
 }

package/src/views/summary.js

@@ -1,200 +1,34 @@
-import { collectData } from '@rebilly/risk-data-collector';
-import { formatCurrency } from '../utils';
-import { fetchData } from '../functions/mount/fetch-data';
+import { ViewIframe } from './common/iframe';
+import { fetchSummary } from '../storefront/summary';
 
-export function lineItemHTML({state, lineItem}) {
-  const {products} = state.data;
-  const {
-    currency = null,
-  } = state.data?.amountAndCurrency;
-
-  const {
-    items: optionItems = []
-  } = state.options;
-  const hasThumbnails = optionItems?.some((optionItem) => optionItem.thumbnail);
-  const { thumbnail = null } = optionItems.find(
-    (optionItem) => optionItem.planId === lineItem.planId
-  ) || {};
-
-  const { name } = products.find(
-    (product) => product.id === lineItem.productId
-  );
-
-  return `
-    <div class="rebilly-instruments-summary-line-item">
-      ${
-        hasThumbnails
-          ? `
-        <figure class="rebilly-instruments-summary-line-item-figure">
-          ${thumbnail ? `<img src="${thumbnail}" alt="${name}">` : ''}
-        </figure>
-      `
-          : ''
-      }
-      <div class="rebilly-instruments-summary-line-item-synopsis">
-          <p class="rebilly-instruments-summary-line-item-synopsis-title">${name}</p>
-          ${
-            lineItem.description
-              ? `
-            <p class="rebilly-instruments-summary-line-item-synopsis-description">${lineItem.description}</p>
-          `
-              : ''
-          }
-      </div>
-      <div class="rebilly-instruments-summary-line-item-price-breakdown">
-        <p class="rebilly-instruments-summary-line-item-price-breakdown-quantity">${
-          lineItem.quantity
-        }</p>
-        <svg class="rebilly-instruments-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <path d="M12 10.5858l2.8284-2.8284c.3906-.3906 1.0237-.3906 1.4142 0 .3906.3905.3906 1.0236 0 1.4142L13.4142 12l2.8284 2.8284c.3906.3906.3906 1.0237 0 1.4142-.3905.3906-1.0236.3906-1.4142 0L12 13.4142l-2.8284 2.8284c-.3906.3906-1.0237.3906-1.4142 0-.3906-.3905-.3906-1.0236 0-1.4142L10.5858 12 7.7574 9.1716c-.3906-.3906-.3906-1.0237 0-1.4142.3905-.3906 1.0236-.3906 1.4142 0L12 10.5858z" fill-rule="nonzero"/>
-        </svg>
-        <p class="rebilly-instruments-summary-line-item-price-breakdown-unit-price">${formatCurrency(
-          lineItem.unitPrice,
-          currency
-        )}</p>
-      </div>
-    </div>
-  `;
-}
-
-export function summaryBreakdownHTML({state, element}) {
-  const {
-    amount = null,
-    currency = null,
-    discountsAmount = null,
-    shippingAmount = null,
-    subtotalAmount = null,
-    taxAmount = null,
-  } = {
-    ...state.data.amountAndCurrency,
-    ...state.data.summaryItems
+export async function mountSummary({ state }) {
+  const model = {
+    options: state.options,
+    data: state.data.toPostmatesModel(),
+    mainStyleVars: state.mainStyleVars,
   };
+  const { paymentMethodsUrl } = state.options._computed;
 
-  let table = null;
-  [
-    {
-      label: 'Sub Total',
-      class: 'sub-total',
-      i18n: 'summary.subTotal',
-      value: subtotalAmount,
-      show: true,
-    },
-    {
-      label: 'Discounts',
-      class: 'discounts',
-      i18n: 'summary.discounts',
-      value: discountsAmount,
-      show: discountsAmount > 0
-    },
-    {
-      label: 'Taxes',
-      class: 'taxes',
-      i18n: 'summary.taxes',
-      value: taxAmount,
-      show: true,
-    },
-    {
-      label: 'Shipping',
-      class: 'shipping',
-      i18n: 'summary.shipping',
-      value: shippingAmount,
-      show: state.data.isShippingRequired,
-    },
-  ].filter(({value}) => value !== null)
-   .forEach(item => {
-    if (!table) {
-      table = document.createElement('table');
-      table.insertAdjacentHTML('beforeend', `
-        <colgroup>
-          <col>
-          <col>
-        </colgroup>
-      `);
-    }
-
-    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>${formatCurrency(item.value, currency)}</td>
-      `);
-      table.appendChild(row);
-    }
+  const iframe = await new ViewIframe({
+    name: 'rebilly-instruments-summary',
+    url: `${paymentMethodsUrl}/summary`,
+    container: state.summary,
+    model
   });
-  if (table) {
-    element.appendChild(table);
-  }
-
-  const totalElement = document.createElement('div');
-  totalElement.setAttribute('class', 'rebilly-instruments-summary-breakdown-total');
-  totalElement.insertAdjacentHTML('beforeend', `
-    <p data-rebilly-i18n="summary.total">Total</p>
-    <p class="rebilly-instruments-summary-breakdown-total-amount">
-      <span class="rebilly-instruments-summary-breakdown-total-amount-currency">
-        ${currency}
-      </span>
-      ${formatCurrency(amount, currency)}
-    <p>
-  `);
-  element.appendChild(totalElement);
-
-  return element;
+  iframe.bindEventListeners({loader: state.loader});
+  state.iframeComponents.summary.push(iframe);
 }
 
-export async function mountSummary({ state }) {
-  const contentContainer = document.createElement('div');
-  contentContainer.setAttribute('class', 'rebilly-instruments-content');
-
-  const lineItems = state.data.summaryLineItems;
-  if (lineItems) {
-    const lineItemsElement = document.createElement('div');
-    lineItemsElement.setAttribute('class', 'rebilly-instruments-summary-line-items');
-
-    lineItems.forEach((lineItem) => {
-      lineItemsElement.insertAdjacentHTML('beforeend', lineItemHTML({ state, lineItem }));
-    });
-    contentContainer.appendChild(lineItemsElement);
+export async function updateSummary({ state, instrument }) {
+  await fetchSummary({data: instrument, state});
+  const updateModel = {
+    data: state.data.toPostmatesModel(),
+    options: state.options
   }
-  
-  const summaryBreakdownElement = document.createElement('div');
-  summaryBreakdownElement.setAttribute('class', 'rebilly-instruments-summary-breakdown');
-  contentContainer.appendChild(summaryBreakdownHTML({ state, element: summaryBreakdownElement}));
-
-  state.summary.appendChild(contentContainer);
-  state.summary.style.minHeight = '';
-
-  state.translate.translateItems();
-  state.loader.stopLoading({ section: 'summary', id: 'initSummary' });
-}
-
-export async function updateSummary({ state, instrument = null }) {
-  state.loader.startLoading({ section: 'summary', id: 'initSummary' });
-  const { riskMetadata } = await collectData();
-
-  let summaryPayload;
-
-  if (instrument?.billingAddress) {
-    summaryPayload = {
-      billingAddress: instrument.billingAddress
-    };
-  }
-
-  state.data = await fetchData({
-    riskMetadata,
-    summaryPayload,
-    state
+  Object.values(state.iframeComponents).forEach(components => {
+    components.forEach(frame => {
+      frame.component.call('update', updateModel);
+    });
   });
-
-  if (state.data.transaction && state.data.transaction?.type === 'setup') {
-    state.options.transactionType = 'setup';
-  }
-
-  const itemsContainer = state.summary.querySelector(
-    '.rebilly-instruments-content'
-  );
-  itemsContainer?.remove();
-
-  mountSummary({ state });
 }
 

package/tests/mocks/storefront-api-mock.js

@@ -3,31 +3,52 @@ import {ok, get, post} from 'msw-when-then';
 export const storefrontURL = '*/storefront';
 
 export const initStoreFrontApiMocks = (when) => {
-  when(post(`${storefrontURL}/ready-to-pay`)).thenReturn((() => {
-    return ok([]);
-  })());
-
-  when(post(`${storefrontURL}/preview-purchase`)).thenReturn((() => {
-    return ok({});
-  })());
-
-  when(get(`${storefrontURL}/plans`)).thenReturn((() => {
-    return ok([]);
-  })());
-
-  when(get(`${storefrontURL}/products`)).thenReturn((() => {
-    return ok([]);
-  })());
-
-  when(post(`${storefrontURL}/payment-instruments`)).thenReturn((() => {
-    return ok([]);
-  })());
-
-  when(post(`${storefrontURL}/payment-instruments/*/setup`)).thenReturn((() => {
-    return ok([]);
-  })());
-
-  when(get(`${storefrontURL}/transactions/test-transaction-id`)).thenReturn((() => {
-    return ok({});
-  })());
+  const mocks = [
+    /* GET */
+    {
+      url: '/account',
+      method: get,
+      response: () => ok({})
+    }, {
+      url: '/plans',
+      method: get,
+      response: () => ok([])
+    }, {
+      url: '/products',
+      method: get,
+      response: () => ok([])
+    }, {
+      url: '/payment-instruments',
+      method: get,
+      response: () => ok([])
+    }, {
+      url: '/transactions/test-transaction-id',
+      method: get,
+      response: () => ok({})
+    },
+
+    /* POST */
+    {
+      url: '/ready-to-pay',
+      method: post,
+      response: () => ok([])
+    }, {
+      url: '/preview-purchase',
+      method: post,
+      response: () => ok({})
+    }, {
+      url: '/payment-instruments',
+      method: post,
+      response: () => ok([])
+    }, {
+      url: '/payment-instruments/*/setup',
+      method: post,
+      response: () => ok([])
+    }
+  ];
+
+  mocks.forEach(api => {
+    const http = api.method(`${storefrontURL}${api.url}`)
+    when(http).thenReturn(api.response());
+  });
 };

package/src/style/browserslist.js

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

package/src/style/components/accordion.js

@@ -1,140 +0,0 @@
-// -----------------------------------------------------------------------------
-// This file contains all styles related to the accordion component.
-// -----------------------------------------------------------------------------
-
-export const accordion = () => `
-  /* ACCORDION CLOSED */
-  .rebilly-instruments-accordion {
-    border: 1px solid var(--rebilly-colorMutedBorder);
-    padding: 0 calc(var(--rebilly-spacings-m) - var(--rebilly-spacings-2xs));
-    background: var(--rebilly-colorBackground);
-    transition: border 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
-    margin: var(--rebilly-spacings-s) 0;
-    border-radius: var(--rebilly-borderRadius);
-    overflow: hidden;
-    opacity: 0.7;
-  }
-
-  .rebilly-instruments-accordion:hover {
-    opacity: 1;
-  }
-
-  .rebilly-instruments-accordion:first-of-type {
-    margin-top: 0;
-  }
-
-  .rebilly-instruments-accordion:last-of-type {
-    margin-bottom: 0;
-  }
-
-  .rebilly-instruments-accordion .rebilly-instruments-accordion-summary::-webkit-details-marker {
-    display: none;
-  }
-
-  .rebilly-instruments-accordion .rebilly-instruments-accordion-summary {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    list-style: none;
-    padding: calc(var(--rebilly-spacings-m) - var(--rebilly-spacings-s)) calc(var(--rebilly-spacings-m) - var(--rebilly-spacings-2xs));
-    margin: 0px calc(-1 * calc(var(--rebilly-spacings-m) - var(--rebilly-spacings-2xs)));
-    background: var(--rebilly-colorBackground);
-  }
-
-  .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-summary-checkmark {
-    position: relative;
-    width: calc(var(--rebilly-spacings-m) - var(--rebilly-spacings-2xs));
-    height: calc(var(--rebilly-spacings-m) - var(--rebilly-spacings-2xs));
-    border-radius: 50%;
-    opacity: 0;
-    background: var(--rebilly-colorText);
-    margin-left: var(--rebilly-spacings-m);
-    transition: all 0.2s ease;
-  }
-
-  .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-summary-checkmark::after {
-    content: '';
-    position: absolute;
-    border: solid var(--rebilly-colorBackground);
-    width: calc(var(--rebilly-spacings-xs) + var(--rebilly-spacings-2xs));
-    height: calc(var(--rebilly-spacings-xs) - var(--rebilly-spacings-2xs) + 2px);
-    border-width: 2px 2px 0 0;
-    border-radius: 2px;
-    top: 50%;
-    left: 50%;
-    transform: translateY(-60%) translateX(-50%) rotate(135deg);
-    transition: all 0.2s ease;
-  }
-
-  .rebilly-instruments-accordion-summary:hover .rebilly-instruments-accordion-summary-checkmark {
-    opacity: 0.5;
-  }
-
-  .rebilly-instruments-accordion .rebilly-instruments-accordion-summary > img {
-    margin-right: var(--rebilly-spacings-s);
-    height: auto;
-    max-width: 40px;
-    width: 100%;
-  }
-
-  .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-title {
-    margin: 0;
-    font-weight: 500;
-    flex: 2;
-  }
-
-  .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-brands {
-    display: inline-flex;
-    justify-content: flex-end;
-    align-items: center;
-  }
-
-  .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-brands figure {
-    margin: auto;
-    padding: 0;
-    height: 26px;
-  }
-
-  .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-brands figure img {
-    width: auto;
-    height: 100%;
-    border-radius: var(--rebilly-borderRadius);
-    margin-right: var(--rebilly-spacings-xs);
-  }
-
-  .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-brands span {
-    color: var(--rebilly-colorMutedText);
-    margin: 0 0 0 var(--rebilly-spacings-xs);
-    font-size: calc(var(--rebilly-fontSizeBase) * 0.875);
-    line-height: 1;
-  }
-
-  /* ACCORDION OPENED */
-  .rebilly-instruments-accordion[open] {
-    padding: 0 calc(var(--rebilly-spacings-m) - var(--rebilly-spacings-2xs)) calc(var(--rebilly-spacings-m) - var(--rebilly-spacings-2xs));
-    opacity: 1;
-  }
-
-  .rebilly-instruments-accordion[open] .rebilly-instruments-accordion-summary {
-    border-bottom: 1px solid var(--rebilly-colorMutedBorder);
-    margin-bottom: calc(var(--rebilly-spacings-m) - var(--rebilly-spacings-2xs));
-  }
-
-  .rebilly-instruments-accordion[open] .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-summary-checkmark {
-    background: var(--rebilly-colorText);
-    opacity: 1;
-  }
-
-  @media screen and (max-width: 600px) {
-    .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-brands figure:nth-child(2),
-    .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-brands figure:nth-child(3) {
-      display: none;
-    }
-  }
-
-  @media screen and (max-width: 480px) {
-    .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-brands {
-      display: none;
-    }
-  }
-`;

package/src/style/components/address.js

@@ -1,55 +0,0 @@
-// -----------------------------------------------------------------------------
-// This file contains all styles related to the address component.
-// -----------------------------------------------------------------------------
-export const address = () => `
-  /**
-  * Address
-  */
-  .rebilly-instruments-address {
-    margin: 0 0 var(--rebilly-spacings-base);
-    color: var(--rebilly-colorMutedText);
-    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 */
-  }
-`;