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

package/src/style/views/result.js

@@ -1,52 +0,0 @@
-// -----------------------------------------------------------------------------
-// This file contains all styles related to the result view.
-// -----------------------------------------------------------------------------
-export const result = () => `
-  /**
-  * Result
-  */
-  .rebilly-instruments-results .rebilly-instruments-h1 {
-    text-align: center;
-    margin: 0;
-  }
-
-  .rebilly-instruments-results-icon {
-    width: 160px;
-    margin: 0 auto var(--rebilly-spacings-base) auto;
-    display: block;
-  }
-
-  .rebilly-instruments-results-icon g {
-    stroke: var(--rebilly-colorPrimary);
-  }
-
-  .rebilly-instruments-results-icon.is-error g {
-    stroke: var(--rebilly-colorDanger);
-  }
-
-  .rebilly-instruments-results-icon path {
-    stroke-linecap: round;
-    stroke-linejoin: round;
-  }
-
-  .rebilly-instruments-results-icon path.circle {
-    stroke-dasharray: 350;
-    stroke-dashoffset: 0;
-    animation: 0.6s cubic-bezier(1.0, 0.5, 0.8, 1.0) 1 rebillyDashResultIcon;
-  }
-
-  .rebilly-instruments-results-icon path.mark {
-    stroke-dasharray: 350;
-    stroke-dashoffset: 0;
-    animation: 1s cubic-bezier(1.0, 0.5, 0.8, 1.0) 1 rebillyDashResultIcon;
-  }
-
-  @keyframes rebillyDashResultIcon {
-    from {
-        stroke-dashoffset: 350;
-    }
-    to {
-        stroke-dashoffset: 0;
-    }
-  }
-`;

package/src/style/views/summary.js

@@ -1,118 +0,0 @@
-// -----------------------------------------------------------------------------
-// This file contains all styles related to the summary view.
-// -----------------------------------------------------------------------------
-export const summary = () => `
-  /**
-  * Summary
-  */
-  .rebilly-instruments-summary-line-item {
-    border-bottom: 1px solid var(--rebilly-colorMutedBorder);
-    padding: var(--rebilly-spacings-s) 0;
-    display: flex;
-    align-items: center;
-    position: relative;
-  }
-
-  .rebilly-instruments-summary-line-item:first-child {
-    padding-top: 0;
-  }
-
-  .rebilly-instruments-summary-line-item-figure {
-    margin: 0 var(--rebilly-spacings-s) 0 0;
-    flex: 0 0 auto;
-    width: 48px;
-    height: 48px;
-    border-radius: var(--rebilly-borderRadius);
-    border: 1px solid var(--rebilly-colorMutedBorder);
-    overflow: hidden;
-  }
-
-  .rebilly-instruments-summary-line-item-figure img {
-    width: 100%;
-  }
-
-  .rebilly-instruments-summary-line-item-synopsis {
-    flex: 1 2 auto;
-  }
-
-  .rebilly-instruments-summary-line-item-synopsis-title {
-    margin: 0;
-    font-weight: 500;
-  }
-
-  .rebilly-instruments-summary-line-item-synopsis-description {
-    color: var(--rebilly-colorMutedText);
-    margin: 0;
-    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: var(--rebilly-colorMutedText);
-    margin: 0 0 0 var(--rebilly-spacings-s);
-  }
-
-  .rebilly-instruments-summary-line-item-price-breakdown .rebilly-instruments-icon {
-    fill: var(--rebilly-colorMutedText);
-  }
-
-  .rebilly-instruments-summary-line-item-price-breakdown-unit-price {
-    color: var(--rebilly-colorText);
-  }
-
-  .rebilly-instruments-summary-breakdown table {
-    width: 100%;
-    margin: var(--rebilly-spacings-xs) 0;
-    color: inherit;
-  }
-
-  .rebilly-instruments-summary-breakdown table colgroup col:first-child {
-    width: 85%;
-  }
-
-  .rebilly-instruments-summary-breakdown table colgroup col {
-    width: 15%;
-  }
-
-  .rebilly-instruments-summary-breakdown table tr td {
-    text-align: right;
-  }
-
-  .rebilly-instruments-summary-breakdown table tr td:first-child {
-    padding-right: var(--rebilly-spacings-s);
-    font-weight: 500;
-  }
-
-  .rebilly-instruments-summary-breakdown table {
-    border-bottom: 1px solid var(--rebilly-colorMutedBorder);
-    padding-bottom: var(--rebilly-spacings-xs);
-  }
-
-  .rebilly-instruments-summary-breakdown-total {
-    padding-top: var(--rebilly-spacings-xs);
-    display: flex;
-    align-items: center;
-  }
-
-  .rebilly-instruments-summary-breakdown-total p {
-    margin: var(--rebilly-spacings-s) 0;
-  }
-
-  .rebilly-instruments-summary-breakdown-total-amount {
-      flex: 1 2 80%;
-      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: var(--rebilly-fontSizeBase);
-    font-weight: normal;
-    color: var(--rebilly-colorMutedText);
-    margin-right: var(--rebilly-spacings-s);
-  }
-`;

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

@@ -1,246 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Summary component should render the summary correctly 1`] = `
-<div
-  class="rebilly-instruments-summary-line-items"
->
-  
-    
-  <div
-    class="rebilly-instruments-summary-line-item"
-  >
-    
-      
-      
-    <div
-      class="rebilly-instruments-summary-line-item-synopsis"
-    >
-      
-          
-      <p
-        class="rebilly-instruments-summary-line-item-synopsis-title"
-      >
-        My Awesome Product
-      </p>
-      
-          
-            
-      <p
-        class="rebilly-instruments-summary-line-item-synopsis-description"
-      >
-        My Awesome Product
-      </p>
-      
-          
-      
-    </div>
-    
-      
-    <div
-      class="rebilly-instruments-summary-line-item-price-breakdown"
-    >
-      
-        
-      <p
-        class="rebilly-instruments-summary-line-item-price-breakdown-quantity"
-      >
-        1
-      </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"
-      >
-        $30.00
-      </p>
-      
-      
-    </div>
-    
-    
-  </div>
-  
-  
-  
-    
-  <div
-    class="rebilly-instruments-summary-line-item"
-  >
-    
-      
-      
-    <div
-      class="rebilly-instruments-summary-line-item-synopsis"
-    >
-      
-          
-      <p
-        class="rebilly-instruments-summary-line-item-synopsis-title"
-      >
-        My Awesome T-Shirt
-      </p>
-      
-          
-            
-      <p
-        class="rebilly-instruments-summary-line-item-synopsis-description"
-      >
-        Awesome T-Shirt
-      </p>
-      
-          
-      
-    </div>
-    
-      
-    <div
-      class="rebilly-instruments-summary-line-item-price-breakdown"
-    >
-      
-        
-      <p
-        class="rebilly-instruments-summary-line-item-price-breakdown-quantity"
-      >
-        2
-      </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"
-      >
-        $20.00
-      </p>
-      
-      
-    </div>
-    
-    
-  </div>
-  
-  
-</div>
-`;
-
-exports[`Summary component should render the summary correctly 2`] = `
-<div
-  class="rebilly-instruments-summary-breakdown"
->
-  <table>
-    
-        
-    <colgroup>
-      
-          
-      <col />
-      
-          
-      <col />
-      
-        
-    </colgroup>
-    
-      
-    <tr
-      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-taxes"
-    >
-      
-        
-      <td
-        data-rebilly-i18n="summary.taxes"
-      >
-        Taxes
-      </td>
-      
-        
-      <td>
-        $0.00
-      </td>
-      
-      
-    </tr>
-  </table>
-  <div
-    class="rebilly-instruments-summary-breakdown-total"
-  >
-    
-    
-    <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"
-      >
-        
-        USD
-      
-      </span>
-      
-      $70.00
-    
-    </p>
-    <p>
-      
-  
-    </p>
-  </div>
-</div>
-`;

package/src/views/method-selector/express-methods/apple-pay.js

@@ -1,92 +0,0 @@
-import Events from '../../../events';
-
-const browserIsSafari = () => window.ApplePaySession;
-
-export default function mountApplePay({
-  state,
-  METHOD_ID,
-  METHOD_TYPE,
-  EXPRESS_METHODS,
-  EXPRESS_METHODS_CONTAINER
-}) {
-  const container = document.querySelector(`.rebilly-instruments-${METHOD_ID}-method`);
-  const digitalWallet = state.options.digitalWallet.applePay;
-
-  function mountApplePayButton() {
-    if(!container.children.length) {
-      Rebilly.applePay.mount(`.rebilly-instruments-${METHOD_ID}-method`);
-    }
-    state.loader.stopLoading({ id: `${METHOD_TYPE}-express` });
-  }
-
-  // Hack: The correct way to do this is to accept the options via the framepay package
-  // Will remove once these options are added to framepay
-  function updateBtnStyling() {
-    const applePayButton = document.querySelector('#rebilly-apple-pay-button');
-    applePayButton.style.margin = '0px';
-    applePayButton.style.width = '100%';
-    applePayButton.style.height = digitalWallet.applePayDisplayOptions.buttonHeight;
-  }
-
-  if(!browserIsSafari()) {
-    if(EXPRESS_METHODS.length === 1) {
-      EXPRESS_METHODS_CONTAINER.parentNode.style.display = 'none';
-    }
-    state.loader.stopLoading({ id: `${METHOD_TYPE}-express` });
-    container.style.display = 'none';
-    return;
-  } 
-
-  container.style.height = digitalWallet.applePayDisplayOptions.buttonHeight;
-
-  if (!Rebilly.initialized) {
-    const options = {
-      transactionData: digitalWallet.transactionData,
-      methods: state.data.readyToPay,
-      applePay: digitalWallet.applePayDisplayOptions,
-      organizationId: state.options.organizationId
-    }
-    if (state.options.jwt && !state.options.publishableKey) {
-      options.jwt = state.options.jwt;
-      options.sandbox = state.options.apiMode === 'sandbox';
-    } else {
-      options.publishableKey = state.options.publishableKey;
-    }
-    Rebilly.initialize(options);
-  } else {
-    mountApplePayButton();
-    updateBtnStyling();
-  }
-
-  Rebilly.on('ready', () => {
-    mountApplePayButton();
-    updateBtnStyling();
-  });
-
-  // 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,
-      items: state.options.items,
-      paymentInstruction: {
-        token: token.id,
-      },
-      billingAddress: token.billingAddress,
-      redirectUrl,
-      _raw: token
-    }
-    if (!token.shippingAddress) {
-      instrumentReadyPayload.deliveryAddress = token.shippingAddress;
-    }
-
-    Events.instrumentReady.dispatch(instrumentReadyPayload);
-  });
-
-  Rebilly.on('error', error => {
-    console.error(error)
-  });
-}

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

@@ -1,25 +0,0 @@
-import { MethodIframe } from '../../common/iframe';
-
-export default async function mountExpressMethod({ state, METHOD_ID }) {
-  const container = document.querySelector(`.rebilly-instruments-${METHOD_ID}-method`);
-
-  const { paymentMethodsUrl } = state.options._computed;
-
-  const model = {
-    options: state.options,
-    data: state.data.toPostmatesModel()
-  };
-
-  const iframe = await new MethodIframe({
-    name: METHOD_ID,
-    url: `${paymentMethodsUrl}/${METHOD_ID}`,
-    container,
-    model
-  });
-
-  iframe.bindEventListeners({
-    loader: state.loader
-  });
-
-  state.iframeComponents.push(iframe);
-}

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

@@ -1,178 +0,0 @@
-import camelCase from 'lodash.camelcase';
-import { mountModal } from '../modal';
-import { MethodIframe } from '../common/iframe';
-import { getMethodData } from './get-method-data';
-
-async function mountInline(state, {
-  methodId,
-  paymentMethodsUrl,
-  container,
-  model,
-  method
-}) {
-  const iframe = await new MethodIframe({
-    name: methodId,
-    url: `${paymentMethodsUrl}/${methodId}`,
-    container,
-    model
-  });
-  iframe.bindEventListeners({
-    loader: state.loader,
-    id: method.method
-  });
-  state.iframeComponents.push(iframe);
-}
-
-function displayBrands({summary, method}) {
-  function renderBrand(brand) {
-    return `
-      <figure>
-        <img alt="${brand}" src="https://forms.secure-payments.app/payment-instruments/brand/${brand.replace(/\s/, '')}.svg" />
-      </figure>
-    `;
-  }
-
-  const {brands} = method;
-  summary.querySelector('.rebilly-instruments-accordion-title').insertAdjacentHTML(
-    'afterend',
-    `<div class="rebilly-instruments-accordion-brands">${(() => {
-      if (brands.length >= 4) {
-        const truncatedBrands = brands.slice(0, 3);
-        return `${truncatedBrands.map(brand => renderBrand(brand)).join('')}
-          <span data-rebilly-i18n="forms.andMore">and more</span>
-        `
-      }
-      return brands.map(brand => renderBrand(brand)).join('');
-    })()}</div>`
-  );
-}
-
-export function MountMethods({
-  state,
-  METHODS_CONTAINER,
-  METHODS
-}) {
-  const isAccordion = METHODS.length > 1;
-
-  METHODS.forEach(async (method) => {
-    const { METHOD_ID: methodId, METHOD_TYPE: methodType } =
-      getMethodData(method);
-    const { paymentMethodsUrl } =
-      state.options._computed || 'https://www.example.com';
-
-    const selector = `rebilly-instruments-${methodId}`;
-    const isPopup = [
-        'payment-card'
-      ].includes(methodId) && state.options.paymentInstruments[methodType]?.popup;
-    const model = {
-      account: state.data?.account,
-      options: state.options,
-      mainStyle: state.mainStyle,
-      plans: state.data.plans,
-      products: state.data.products,
-      method,
-      readyToPay: state.data.readyToPay,
-    };
-
-    if (isAccordion) {
-      METHODS_CONTAINER.insertAdjacentHTML(
-        'beforeend',
-        `<details class="rebilly-instruments-accordion for-${methodId}">
-            <summary class="rebilly-instruments-accordion-summary">
-                <img class="rebilly-instruments-accordion-${method.method}-img" src="${method.metadata.logo}" alt="${method.method}"/>
-                <span class="rebilly-instruments-accordion-title" data-rebilly-i18n="paymentMethods.${method.method}">${method.metadata.name}</span>
-                <span class="rebilly-instruments-accordion-summary-checkmark"></span>
-            </summary>
-            <div id="${selector}" data-rebilly-instruments-type="${methodId}" style="position: relative"></div>
-        </details>`
-      );
-
-      if ([
-        'payment-card'
-      ].includes(method.method)) {
-        const summary = document.querySelector(`.for-${methodId} > .rebilly-instruments-accordion-summary`);
-        displayBrands({summary, method});
-      }
-      state.loader.stopLoading({ id: method.method });
-
-      METHODS_CONTAINER.insertAdjacentHTML(
-        'beforeend',
-        `<div id="${selector}" data-rebilly-instruments-type="${methodId}"></div>`
-      );
-      const container = document.querySelector(`#${selector}`);
-
-      state.loader.stopLoading({ id: method.method });
-      mountInline(state, {
-        methodId,
-        paymentMethodsUrl,
-        container,
-        model,
-        method
-      });
-    } else if (isPopup) {
-      METHODS_CONTAINER.insertAdjacentHTML(
-        'beforeend',
-        `<div id="${selector}" data-rebilly-instruments-type="${methodId}"></div>`
-      );
-      const container = document.querySelector(`#${selector}`);
-
-      container.insertAdjacentHTML(
-        'beforeend',
-        `<button class="${selector} rebilly-instruments-button" data-rebilly-i18n="paymentMethods.${
-          method.method
-        }">${camelCase(method.method)}</button>`
-      );
-      const button = document.querySelector(`.${selector}`);
-      button.addEventListener('click', async () => {
-        const iframe = await mountModal({
-          state,
-          name: methodId,
-          url: `${paymentMethodsUrl}/${methodId}`,
-          model
-        });
-        state.iframeComponents.push(iframe);
-      });
-    } else {
-      METHODS_CONTAINER.insertAdjacentHTML(
-        'beforeend',
-        `<div id="${selector}" data-rebilly-instruments-type="${methodId}"></div>`
-      );
-      const container = document.querySelector(`#${selector}`);
-
-      mountInline(state, {
-        methodId,
-        paymentMethodsUrl,
-        container,
-        model,
-        method
-      });
-    }
-    state.loader.stopLoading({ id: method.method });
-  });
-
-  if (isAccordion) {
-    // Fetch all the accordion elements.
-    const details = document.querySelectorAll('.rebilly-instruments-accordion');
-    // Add the onclick listeners.
-    details.forEach((targetDetail) => {
-      // set to open by default, will be closed by timeout below
-      targetDetail.open = true;
-      targetDetail.querySelector('summary').addEventListener('click', () => {
-        // Close all the accordion that are not targetDetail.
-          details.forEach((detail) => {
-            detail.removeAttribute('open');
-          });
-      });
-    });
-
-    // All details must be open to connect to Postmate than closed
-    setTimeout(() => {
-      details.forEach((detail) => {
-        detail.removeAttribute('open');
-      });
-      details[0].open = true;
-    }, 100);
-  }
-
-  state.translate.translateItems();
-}