@rebilly/instruments 3.23.0-beta.0 → 3.23.0-beta.1

package/src/state/index.js

@@ -1,61 +0,0 @@
-import { reactive } from '@vue/reactivity';
-import { Loader } from '../loader';
-import { Translate } from '../i18n';
-import iframes from './iframes';
-
-export default (() => {
-  let state = null;
-  const defaultState = {
-    options: null,
-    data: {},
-    mountingPoints: null,
-    storefront: null,
-    form: null,
-    summary: null,
-    loader: new Loader(),
-    translate: new Translate,
-    hasMounted: false,
-    toModel() {
-      const model = {
-        ...state,
-        data: state.data.toPostmatesMode ? state.data.toPostmatesModel() : {},
-      };
-      
-      // remove functions from model
-      delete model.toModel;
-      delete model.updateModel;
-
-      return JSON.parse(JSON.stringify(model));
-    },
-    updateModel() {
-      const modelSafeState = state?.toModel();
-      if (modelSafeState) {
-        const updateModel = {
-          data: modelSafeState.data,
-          options: modelSafeState.options
-        }
-    
-        if (iframes.hasComponent('summary')) {
-          iframes.summary.component.call('update', updateModel);
-        }
-        if (iframes.hasComponent('summary')) {
-          iframes.form.component.call('update', updateModel);
-        }
-      }
-    },
-    reset() {
-      if (state !== null) {
-        state = reactive({...defaultState});
-      }
-    }
-  };
-
-  return {
-    getInstance() {
-      if (state === null) {
-        state = reactive({...defaultState});
-      }
-      return state;
-    }
-  }
-})().getInstance();

package/src/views/method-selector/mount-bump-offer.js

@@ -1,99 +0,0 @@
-import state from '../../state';
-import formatCurrency from '../../utils/format-currency';
-import {fetchSummary} from '../../storefront/summary'
-
-function lineItem({offer}) {
-  const plan = state.data.plans.find(item => item.id === offer.planId);
-  const product = state.data.products.find(item => item.id === plan.productId);
-
-  const rif = (condition, template) => condition ? template : '';
-
-  function unitPrice() {
-    const planPricing = plan.pricing.isBracket
-      ? plan.pricing.brackets[0].price
-      : plan.pricing.price;
-
-    const basePrice = formatCurrency(planPricing, plan.currency);
-    return plan.pricing.isBracket ? `Starting at ${basePrice}` : basePrice;
-  }
-
-  const thumbnail = (item) => rif(item.thumbnail, `
-    <figure class="rebilly-instruments-bump-offer-line-item-figure">
-      <img src="${item.thumbnail}" :alt="${item.name}"/>
-    </figure>
-  `);
-
-  const synopsis = (item) => `
-    <div class="rebilly-instruments-bump-offer-line-item-synopsis">
-      <p class="rebilly-instruments-bump-offer-line-item-synopsis-title">
-        ${item.name}
-      </p>
-      ${rif(item.description, `
-        <p class="rebilly-instruments-bump-offer-line-item-synopsis-description">
-          ${item.description}
-        </p>
-      `)}
-    </div>
-  `;
-
-  const breakdown = (item) => `
-    <div class="rebilly-instruments-bump-offer-line-item-price-breakdown">
-      ${rif(item.quantity, `
-        <p class="rebilly-instruments-bump-offer-line-item-price-breakdown-quantity">
-          ${item.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-bump-offer-line-item-price-breakdown-unit-price">
-        ${item.unitPrice}
-      </p>
-    <div>
-  `;
-
-  const line = {
-    ...offer,
-    quantity: plan.pricing.isBracket ? null : offer.quantity,
-    name: product.name,
-    description: plan.name,
-    unitPrice: unitPrice(),
-  }
-
-  return `
-    <div class="rebilly-instruments-bump-offer-line-item">
-      ${thumbnail(line)}
-      ${synopsis(line)}
-      ${breakdown(line)}
-    </div>
-  `
-}
-
-export function mountBumpOffer ({container}) {
-  container.insertAdjacentHTML('beforeEnd', `
-    <label for="rebilly-instruments-bump-offer" class="rebilly-instruments-form-field-checkbox">
-      <div class="rebilly-instruments-bump-offer-label">Yes, I want to upgrade!</div>
-      <input
-        type="checkbox"
-        id="rebilly-instruments-bump-offer"
-      />
-      <span></span>
-    </label>
-  `);
-
-  const checkbox = document.getElementById('rebilly-instruments-bump-offer')
-  checkbox.addEventListener('click', async () => {
-    state.data.acceptBumpOffer = checkbox.checked;
-    await fetchSummary();
-    state.updateModel();
-  });
-
-  checkbox.checked = state.data.acceptBumpOffer;
-
-  state.options.bumpOffer.forEach(offer => {
-    const node = document.createElement('div');
-    node.classList.add('rebilly-instruments-bump-offer');
-    node.insertAdjacentHTML('beforeEnd', lineItem({offer}));
-    container.appendChild(node);
-  });
-}