@rebilly/instruments 2.1.1-beta.0 → 3.1.1-beta.0

package/dist/views/summary.js

@@ -1,209 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.lineItemHTML = lineItemHTML;
-exports.summaryBreakdownHTML = summaryBreakdownHTML;
-exports.mountSummary = mountSummary;
-exports.updateSummary = updateSummary;
-
-var _riskDataCollector = require("@rebilly/risk-data-collector");
-
-var _utils = require("../utils");
-
-var _fetchData = require("../functions/mount/fetch-data");
-
-function lineItemHTML({
-  state,
-  lineItem
-}) {
-  var _state$data;
-
-  const {
-    products
-  } = state.data;
-  const {
-    currency = null
-  } = (_state$data = state.data) === null || _state$data === void 0 ? void 0 : _state$data.amountAndCurrency;
-  const {
-    items: optionItems = []
-  } = state.options;
-  const hasThumbnails = optionItems === null || optionItems === void 0 ? void 0 : 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">${(0, _utils.formatCurrency)(lineItem.unitPrice, currency)}</p>
-      </div>
-    </div>
-  `;
-}
-
-function summaryBreakdownHTML({
-  state,
-  element
-}) {
-  const {
-    amount = null,
-    currency = null,
-    discountsAmount = null,
-    shippingAmount = null,
-    subtotalAmount = null,
-    taxAmount = null
-  } = { ...state.data.amountAndCurrency,
-    ...state.data.summaryItems
-  };
-  let table = null;
-  [{
-    label: 'Sub Total',
-    class: 'sub-total',
-    i18n: 'summary.subTotal',
-    value: subtotalAmount
-  }, {
-    label: 'Discounts',
-    class: 'discounts',
-    i18n: 'summary.discounts',
-    value: discountsAmount
-  }, {
-    label: 'Taxes',
-    class: 'taxes',
-    i18n: 'summary.taxes',
-    value: taxAmount
-  }, {
-    label: 'Shipping',
-    class: 'shipping',
-    i18n: 'summary.shipping',
-    value: shippingAmount
-  }].filter(({
-    value
-  }) => value !== null).forEach(item => {
-    if (!table) {
-      table = document.createElement('table');
-      table.insertAdjacentHTML('beforeend', `
-        <colgroup>
-          <col>
-          <col>
-        </colgroup>
-      `);
-    }
-
-    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>${(0, _utils.formatCurrency)(item.value, currency)}</td>
-    `);
-    table.appendChild(row);
-  });
-
-  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>
-      ${(0, _utils.formatCurrency)(amount, currency)}
-    <p>
-  `);
-  element.appendChild(totalElement);
-  return element;
-}
-
-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);
-  }
-
-  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'
-  });
-}
-
-async function updateSummary({
-  state,
-  instrument = null
-}) {
-  var _state$data$transacti;
-
-  state.loader.startLoading({
-    section: 'summary',
-    id: 'initSummary'
-  });
-  const {
-    riskMetadata
-  } = await (0, _riskDataCollector.collectData)();
-  let summaryPayload;
-
-  if (instrument !== null && instrument !== void 0 && instrument.billingAddress) {
-    summaryPayload = {
-      billingAddress: instrument.billingAddress
-    };
-  }
-
-  state.data = await (0, _fetchData.fetchData)({
-    riskMetadata,
-    summaryPayload,
-    state
-  });
-
-  if (state.data.transaction && ((_state$data$transacti = state.data.transaction) === null || _state$data$transacti === void 0 ? void 0 : _state$data$transacti.type) === 'setup') {
-    state.options.transactionType = 'setup';
-  }
-
-  const itemsContainer = state.summary.querySelector('.rebilly-instruments-content');
-  itemsContainer === null || itemsContainer === void 0 ? void 0 : itemsContainer.remove();
-  mountSummary({
-    state
-  });
-}

package/dist/views/summary.spec.js

@@ -1,134 +0,0 @@
-"use strict";
-
-var _summaryModel = _interopRequireDefault(require("../storefront/models/summary-model"));
-
-var _planModel = _interopRequireDefault(require("../storefront/models/plan-model"));
-
-var _productModel = _interopRequireDefault(require("../storefront/models/product-model"));
-
-var _loader = require("../loader");
-
-var _i18n = require("../i18n");
-
-var _summary = require("./summary");
-
-var _fetchData = require("../functions/mount/fetch-data");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-describe('Summary component', () => {
-  let summaryElement;
-  beforeEach(() => {
-    document.body.innerHTML = '';
-    summaryElement = document.createElement('div');
-    document.body.append(summaryElement);
-  });
-
-  class TestMountSummaryInstance {
-    constructor({
-      options = {},
-      summary = summaryElement,
-      loader = new _loader.Loader(),
-      translate = new _i18n.Translate(),
-      data = {}
-    } = {}) {
-      this.options = options;
-      this.summary = summary;
-      this.loader = loader;
-      this.translate = translate;
-      this.data = new _fetchData.DataInstance({
-        state: {
-          options
-        },
-        previewPurchase: new _summaryModel.default({
-          currency: 'USD',
-          lineItems: [{
-            type: 'debit',
-            description: 'My Awesome Product',
-            unitPrice: 30,
-            quantity: 1,
-            price: 30,
-            productId: 'test-product-1',
-            planId: 'my-awesome-product'
-          }, {
-            type: 'debit',
-            description: 'Awesome T-Shirt',
-            unitPrice: 20,
-            quantity: 2,
-            price: 40,
-            productId: 'test-product-2',
-            planId: 'awesome-t-shirt'
-          }],
-          subtotalAmount: 70,
-          taxAmount: 0,
-          shippingAmount: 0,
-          discountsAmount: 0,
-          total: 70
-        }),
-        plans: [new _planModel.default({
-          name: 'My Awesome Product',
-          id: 'my-awesome-product',
-          productId: 'test-product-1'
-        }), new _planModel.default({
-          name: 'My Awesome T-Shirt',
-          id: 'awesome-t-shirt',
-          productId: 'test-product-2'
-        })],
-        products: [new _productModel.default({
-          name: 'My Awesome Product',
-          id: 'test-product-1'
-        }), new _productModel.default({
-          name: 'My Awesome T-Shirt',
-          id: 'test-product-2'
-        })],
-        ...data
-      });
-    }
-
-  }
-
-  const options = {
-    websiteId: 'test-website-id',
-    countryCode: 'US',
-    items: [{
-      planId: 'my-awesome-product',
-      quantity: 1,
-      thumbnail: ''
-    }, {
-      planId: 'awesome-t-shirt',
-      quantity: 2,
-      thumbnail: ''
-    }]
-  };
-  it('should render the summary correctly', () => {
-    const mountSummaryInstance = new TestMountSummaryInstance({
-      options
-    }); //TODO: improve design to avoid this manual change
-
-    mountSummaryInstance.loader.DOM.summary = mountSummaryInstance.summary;
-    (0, _summary.mountSummary)({
-      state: mountSummaryInstance
-    }); // Number of line items
-
-    const itemsContainer = document.querySelector('.rebilly-instruments-summary-line-items');
-    expect(itemsContainer).toMatchSnapshot(); // Breakdown
-
-    const summaryBreakdown = document.querySelector('.rebilly-instruments-summary-breakdown');
-    expect(summaryBreakdown).toMatchSnapshot();
-  });
-  it('should not render the plan description if its falsy', () => {
-    const mountSummaryInstance = new TestMountSummaryInstance({
-      options
-    }); // Making one product description falsy
-
-    mountSummaryInstance.data.previewPurchase.lineItems[0].description = null; //TODO: improve design to avoid this manual change
-
-    mountSummaryInstance.loader.DOM.summary = mountSummaryInstance.summary;
-    (0, _summary.mountSummary)({
-      state: mountSummaryInstance
-    }); // Check that only one description is render
-
-    const itemsSynopsysDescription = document.querySelectorAll('.rebilly-instruments-summary-line-item-synopsis-description');
-    expect(itemsSynopsysDescription.length).toEqual(1);
-  });
-});

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

@@ -1,7 +0,0 @@
-
-export default async function mountPaypal({ state, METHOD_ID, METHOD_TYPE }) {
-  console.log('PayPal - work in progress');
-  const container = document.querySelector(`.rebilly-instruments-${METHOD_ID}-method`);
-  container.style.display = 'none';
-  state.loader.stopLoading({ id: `${METHOD_TYPE}-express` });
-}