@ordergroove/offers 2.29.0 → 2.29.1-alpha-PR-707-2.113

package/src/components/PrepaidToggle.js

@@ -0,0 +1,108 @@
+import { LitElement, html, css } from 'lit-element';
+import { connect } from '../core/connect';
+import {
+  makeProductPrepaidShipmentOptionsSelector,
+  makeProductPrepaidShipmentsOptedInSelector,
+  makePrepaidShipmentsSelectedSelector
+} from '../core/selectors';
+import { productChangePrepaidShipments } from '../core/actions';
+import { withProduct } from '../core/resolveProperties';
+
+export class PrepaidToggle extends withProduct(LitElement) {
+  constructor() {
+    super();
+    this.options = [];
+    this.text = 'shipments';
+  }
+
+  static get properties() {
+    return {
+      options: { type: Array },
+      text: { type: String },
+      shipmentsOptedIn: { type: Number },
+      prepaidShipmentsSelected: { type: Number }
+    };
+  }
+
+  // copied from SelectFrequency
+  static get styles() {
+    return css`
+      og-select {
+        display: inline-block;
+        cursor: pointer;
+        background-color: var(--og-select-bg-color, #fff);
+        border: var(--og-select-border, 1px solid #aaa);
+        border-width: var(--og-select-border-width, 1px);
+        box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04);
+        z-index: 1;
+      }
+
+      input {
+        width: 1.2em;
+        height: 1.2em;
+        accent-color: var(--og-prepaid-checkbox-color, black);
+        border-radius: 4px;
+      }
+    `;
+  }
+
+  get checked() {
+    return this.shipmentsOptedIn > 1;
+  }
+
+  handleChange(e) {
+    if (e.target.checked) {
+      const selectedShipments = this.prepaidShipmentsSelected || this.options[0];
+      this.productChangePrepaidShipments(this.product, selectedShipments, this.offer);
+    } else {
+      this.productChangePrepaidShipments(this.product, null, this.offer);
+    }
+  }
+
+  handleSelect({ target: { value } }) {
+    const valueAsNumber = +value;
+    this.productChangePrepaidShipments(this.product, valueAsNumber, this.offer);
+  }
+
+  render() {
+    if (this.options.length === 0) {
+      return html``;
+    }
+
+    const displayOptions = this.options.map(value => ({
+      value: value,
+      text: `${value} ${this.text}`
+    }));
+
+    return html`
+      <div>
+        <input id="cbx" type="checkbox" .checked=${this.checked} @change=${this.handleChange} />
+        <label for="cbx">
+          <slot name="label">Prepay for</slot>
+          ${this.options.length > 1
+            ? html`
+                <og-select
+                  .options=${displayOptions}
+                  .selected=${this.prepaidShipmentsSelected || this.shipmentsOptedIn}
+                  .onChange="${e => this.handleSelect(e)}"
+                ></og-select>
+              `
+            : html`
+                <span>${displayOptions[0].text}</span>
+              `}
+          <slot name="append"></slot>
+        </label>
+      </div>
+    `;
+  }
+}
+
+const mapStateToProps = (state, ownProps) => ({
+  options: makeProductPrepaidShipmentOptionsSelector(ownProps.product.id)(state),
+  shipmentsOptedIn: makeProductPrepaidShipmentsOptedInSelector(ownProps.product)(state),
+  prepaidShipmentsSelected: makePrepaidShipmentsSelectedSelector(ownProps.product)(state)
+});
+
+const ConnectedPrepaidToggle = connect(mapStateToProps, { productChangePrepaidShipments })(PrepaidToggle);
+
+export { ConnectedPrepaidToggle };

package/src/components/Price.js

@@ -4,6 +4,7 @@ import { connect } from '../core/connect';
 import { withProduct } from '../core/resolveProperties';
 import { TemplateElement } from '../core/base';
 import { makeProductFrequencySelector } from '../core/selectors';
+import { safeProductId } from '../core/utils';
 
 export class Price extends withProduct(TemplateElement) {
   static get properties() {
@@ -18,14 +19,13 @@ export class Price extends withProduct(TemplateElement) {
   }
 
   get value() {
-    // when product is in cart, we use item.key for shopify that is composed as <variant_id>:<line_hash>
-    // this code omits the <line_hash>. We dont support colon : in product_id so this hack wont affect other platforms
-    const realProductId = this.product.id?.split(':')[0];
+    const realProductId = safeProductId(this.product);
     const frequency = this.frequency || this.configDefaultFrequency || this.offer?.defaultFrequency;
-    const plans = this.productPlans[realProductId] || {};
-    const currentPlan = plans[frequency] || [];
+    const plans = this.productPlans[realProductId] || [];
+    const currentPlan = plans.find(plan => plan.frequency === frequency);
     if (!currentPlan) return '';
-    const [regularPrice, discountRate, subscriptionPrice] = currentPlan;
+    const { regularPrice, discountRate, subscriptionPrice } = currentPlan;
+
     if (subscriptionPrice === regularPrice) return '';
 
     if (this.regular) {

package/src/components/Select.js

@@ -70,7 +70,12 @@ export class Select extends LitElement {
       <select @change="${handleOnChange}">
         ${this.options.map(
           option => html`
-            <option value="${option.value}" ?selected=${option.value === this.selected}>${option.text}</option>
+            <option
+              value="${option.value}"
+              ?selected=${option.value === this.selected}
+              .selected=${option.value === this.selected}
+              >${option.text}</option
+            >
           `
         )}
       </select>

package/src/components/__tests__/PrepaidData.spec.js

@@ -0,0 +1,173 @@
+import { html, render } from 'lit-html';
+import { PrepaidData } from '../PrepaidData';
+
+const TEST_CONTAINER_ID = 'test-container';
+const TAG_NAME_UNDER_TEST = 'og-some-prepaid-data';
+customElements.define(TAG_NAME_UNDER_TEST, PrepaidData);
+
+const productPlanPayload = {
+  'yum id': [
+    {
+      frequency: 'selling-plan-id-1',
+      regularPrice: '$5.00',
+      subscriptionPrice: '$4.50',
+      discountRate: '$.50',
+      prepaidShipments: null
+    },
+    {
+      frequency: 'prepaid-selling-plan-id-1',
+      regularPrice: '$5.00',
+      subscriptionPrice: '$4.00',
+      discountRate: '20%',
+      prepaidShipments: 3,
+      regularPrepaidPrice: '$12.00',
+      prepaidSavingsPerShipment: '$1.00',
+      prepaidSavingsTotal: '$3.00',
+      prepaidExtraSavingsPercentage: '10%'
+    },
+    {
+      frequency: 'prepaid-selling-plan-id-2',
+      regularPrice: '$5.00',
+      subscriptionPrice: '$4.00',
+      discountRate: '20%',
+      prepaidShipments: 6,
+      regularPrepaidPrice: '$24.00',
+      prepaidSavingsPerShipment: '$1.00',
+      prepaidSavingsTotal: '$6.00',
+      prepaidExtraSavingsPercentage: '10%'
+    },
+    {
+      frequency: 'prepaid-selling-plan-id-2',
+      regularPrice: '$5.00',
+      subscriptionPrice: '$3.75',
+      discountRate: '25%',
+      prepaidShipments: 12,
+      regularPrepaidPrice: '$45.00',
+      prepaidSavingsPerShipment: '$1.25',
+      prepaidSavingsTotal: '$15.00',
+      prepaidExtraSavingsPercentage: '15%'
+    }
+  ]
+};
+
+async function renderPrepaidDataTemplate({
+  template,
+  shipmentsOptedIn = null,
+  prepaidShipmentsSelected = null,
+  productPlans = productPlanPayload
+}) {
+  // make sure the element was cleaned up
+  expect(document.body.querySelector(TAG_NAME_UNDER_TEST)).toBeFalsy();
+  render(template, document.getElementById(TEST_CONTAINER_ID));
+  const element = document.querySelector(TAG_NAME_UNDER_TEST);
+  element.shipmentsOptedIn = shipmentsOptedIn;
+  element.prepaidShipmentsSelected = prepaidShipmentsSelected;
+  element.productPlans = productPlans;
+  await element.updateComplete;
+  return element;
+}
+
+describe('PrepaidData', () => {
+  beforeEach(() => {
+    // create a dedicated container to render the templates into
+    // otherwise we get race conditions
+    const testContainer = document.createElement('div');
+    testContainer.id = TEST_CONTAINER_ID;
+    document.body.appendChild(testContainer);
+  });
+
+  afterEach(() => {
+    const testContainer = document.getElementById(TEST_CONTAINER_ID);
+    testContainer.remove();
+  });
+
+  it('should render total prepaid price for first prepaid product plan', async () => {
+    const template = html`
+      <og-some-prepaid-data total-price product="yum id"></og-some-prepaid-data>
+    `;
+    const prepaidDataDiv = await renderPrepaidDataTemplate({ template });
+    const insideText = prepaidDataDiv.shadowRoot.textContent.trim();
+    expect(insideText).toBe('$12.00');
+  });
+
+  it('should render total prepaid price for 6 shipments', async () => {
+    const template = html`
+      <og-some-prepaid-data total-price product="yum id"></og-some-prepaid-data>
+    `;
+    const prepaidDataDiv = await renderPrepaidDataTemplate({ template: template, prepaidShipmentsSelected: 6 });
+    const insideText = prepaidDataDiv.shadowRoot.textContent.trim();
+    expect(insideText).toBe('$24.00');
+  });
+
+  it('should render total prepaid price for 12 shipments based on optedIn shipment', async () => {
+    const template = html`
+      <og-some-prepaid-data total-price product="yum id"></og-some-prepaid-data>
+    `;
+    const prepaidDataDiv = await renderPrepaidDataTemplate({ template: template, shipmentsOptedIn: 12 });
+    const insideText = prepaidDataDiv.shadowRoot.textContent.trim();
+    expect(insideText).toBe('$45.00');
+  });
+
+  it('should render per delivery price', async () => {
+    const template = html`
+      <og-some-prepaid-data per-delivery-price product="yum id"></og-some-prepaid-data>
+    `;
+    const prepaidDataDiv = await renderPrepaidDataTemplate({ template });
+    const insideText = prepaidDataDiv.shadowRoot.textContent.trim();
+    expect(insideText).toBe('$4.00');
+  });
+
+  it('should render total savings price', async () => {
+    const template = html`
+      <og-some-prepaid-data total-savings product="yum id"></og-some-prepaid-data>
+    `;
+    const prepaidDataDiv = await renderPrepaidDataTemplate({ template });
+    const insideText = prepaidDataDiv.shadowRoot.textContent.trim();
+    expect(insideText).toBe('$3.00');
+  });
+
+  it('should render per delivery savings price', async () => {
+    const template = html`
+      <og-some-prepaid-data per-delivery-savings product="yum id"></og-some-prepaid-data>
+    `;
+    const prepaidDataDiv = await renderPrepaidDataTemplate({ template });
+    const insideText = prepaidDataDiv.shadowRoot.textContent.trim();
+    expect(insideText).toBe('$1.00');
+  });
+
+  it('should render percentage savings', async () => {
+    const template = html`
+      <og-some-prepaid-data percentage-savings product="yum id"></og-some-prepaid-data>
+    `;
+    const prepaidDataDiv = await renderPrepaidDataTemplate({ template });
+    const insideText = prepaidDataDiv.shadowRoot.textContent.trim();
+    expect(insideText).toBe('20%');
+  });
+
+  it('should render extraPercentageSavings savings', async () => {
+    const template = html`
+      <og-some-prepaid-data extra-percentage-savings product="yum id"></og-some-prepaid-data>
+    `;
+    const prepaidDataDiv = await renderPrepaidDataTemplate({ template });
+    const insideText = prepaidDataDiv.shadowRoot.textContent.trim();
+    expect(insideText).toBe('10%');
+  });
+
+  it('should render numberOfShipments', async () => {
+    const template = html`
+      <og-some-prepaid-data number-of-shipments product="yum id"></og-some-prepaid-data>
+    `;
+    const prepaidDataDiv = await renderPrepaidDataTemplate({ template });
+    const insideText = prepaidDataDiv.shadowRoot.textContent.trim();
+    expect(insideText).toBe('3');
+  });
+
+  it('should render nothing when no property is provided', async () => {
+    const template = html`
+      <og-some-prepaid-data product="yum id"></og-some-prepaid-data>
+    `;
+    const prepaidDataDiv = await renderPrepaidDataTemplate({ template });
+    const insideText = prepaidDataDiv.shadowRoot.textContent.trim();
+    expect(insideText).toBe('');
+  });
+});

package/src/components/__tests__/PrepaidToggle.spec.js

@@ -0,0 +1,115 @@
+import { html, render } from 'lit-html';
+import { PrepaidToggle } from '../PrepaidToggle';
+
+const TEST_CONTAINER_ID = 'test-container';
+const TAG_NAME_UNDER_TEST = 'og-some-prepaid-toggle';
+customElements.define(TAG_NAME_UNDER_TEST, PrepaidToggle);
+
+async function renderTemplate(template) {
+  // make sure the element was cleaned up
+  expect(document.body.querySelector(TAG_NAME_UNDER_TEST)).toBeFalsy();
+  render(template, document.getElementById(TEST_CONTAINER_ID));
+  const element = document.querySelector(TAG_NAME_UNDER_TEST);
+  await element.updateComplete;
+  return element;
+}
+
+function getPrepaidToggleTemplate(options = [3, 6]) {
+  return html`
+    <og-some-prepaid-toggle product="yum product" .options=${options}> </og-some-prepaid-toggle>
+  `;
+}
+
+function expectPrepaidShipmentsAction(toggle, numShipments) {
+  expect(toggle.productChangePrepaidShipments).toHaveBeenCalledWith({ id: 'yum product' }, numShipments, undefined);
+  toggle.productChangePrepaidShipments.calls.reset();
+}
+
+function toggleCheckbox(checkbox) {
+  checkbox.checked = !checkbox.checked;
+  checkbox.dispatchEvent(new Event('change'));
+}
+
+function selectOption(ogSelect, value) {
+  const innerSelect = ogSelect.shadowRoot.querySelector('select');
+  innerSelect.value = value;
+  innerSelect.dispatchEvent(new Event('change'));
+}
+
+describe('PrepaidToggle', () => {
+  beforeEach(() => {
+    // create a dedicated container to render the templates into
+    // otherwise we get race conditions
+    const testContainer = document.createElement('div');
+    testContainer.id = TEST_CONTAINER_ID;
+    document.body.appendChild(testContainer);
+  });
+
+  afterEach(() => {
+    const testContainer = document.getElementById(TEST_CONTAINER_ID);
+    testContainer.remove();
+  });
+
+  it('should render with select options', async () => {
+    const toggle = await renderTemplate(getPrepaidToggleTemplate());
+
+    const select = toggle.shadowRoot.querySelector('og-select');
+    expect(select).toBeTruthy();
+    expect(select.options).toEqual([
+      { value: 3, text: '3 shipments' },
+      { value: 6, text: '6 shipments' }
+    ]);
+  });
+
+  it('should render static text when only one option', async () => {
+    const toggle = await renderTemplate(getPrepaidToggleTemplate([3]));
+    const select = toggle.shadowRoot.querySelector('og-select');
+    expect(select).toBeFalsy();
+    const label = toggle.shadowRoot.querySelector('label');
+    expect(label.innerText).toBe('Prepay for 3 shipments');
+  });
+
+  it('should opt into prepaid', async () => {
+    const toggle = await renderTemplate(getPrepaidToggleTemplate());
+    toggle.productChangePrepaidShipments = jasmine.createSpy('productChangePrepaidShipments');
+    const checkbox = toggle.shadowRoot.querySelector('input');
+
+    // checking checkbox selects default value
+    toggleCheckbox(checkbox);
+    expectPrepaidShipmentsAction(toggle, 3);
+
+    // changing select changes selection
+    const select = toggle.shadowRoot.querySelector('og-select');
+    selectOption(select, 6);
+    // This is changed on the prepaidShipmentsSelected reducer by the productChangePrepaidShipments action
+    toggle.prepaidShipmentsSelected = 6;
+    expectPrepaidShipmentsAction(toggle, 6);
+
+    // unchecking checkbox opts out of prepaid
+    toggleCheckbox(checkbox);
+    expectPrepaidShipmentsAction(toggle, null);
+
+    // checking checkbox again opts into previously selected value
+    toggleCheckbox(checkbox);
+    expectPrepaidShipmentsAction(toggle, 6);
+  });
+
+  it('should preselect a value if shipments is set', async () => {
+    const toggle = await renderTemplate(getPrepaidToggleTemplate());
+    toggle.shipmentsOptedIn = 6;
+
+    await toggle.updateComplete;
+
+    const checkbox = toggle.shadowRoot.querySelector('input');
+    expect(checkbox.checked).toBe(true);
+
+    const select = toggle.shadowRoot.querySelector('og-select');
+    expect(select.selected).toBe(6);
+  });
+
+  it('should handle empty options', async () => {
+    const toggle = await renderTemplate(getPrepaidToggleTemplate([]));
+    // should render an empty component and not throw
+    expect(toggle.shadowRoot.textContent).toBe('');
+  });
+});

package/src/components/__tests__/Price.spec.js

@@ -0,0 +1,96 @@
+import { html, render } from 'lit-html';
+import { Price } from '../Price';
+
+const TEST_CONTAINER_ID = 'test-container';
+const TAG_NAME_UNDER_TEST = 'og-some-price';
+customElements.define(TAG_NAME_UNDER_TEST, Price);
+
+async function renderPriceTemplate(
+  template,
+  properties = {
+    frequency: '1_3',
+    productPlans: {
+      'yum id': [
+        {
+          frequency: '1_3',
+          regularPrice: '$1.00',
+          discountRate: '10%',
+          subscriptionPrice: '$0.90'
+        }
+      ]
+    }
+  }
+) {
+  // make sure the element was cleaned up
+  expect(document.body.querySelector(TAG_NAME_UNDER_TEST)).toBeFalsy();
+  render(template, document.getElementById(TEST_CONTAINER_ID));
+  const element = document.querySelector(TAG_NAME_UNDER_TEST);
+  element.frequency = properties.frequency;
+  element.productPlans = properties.productPlans;
+  await element.updateComplete;
+  return element;
+}
+
+describe('Price', () => {
+  beforeEach(() => {
+    // create a dedicated container to render the templates into
+    // otherwise we get race conditions
+    const testContainer = document.createElement('div');
+    testContainer.id = TEST_CONTAINER_ID;
+    document.body.appendChild(testContainer);
+  });
+
+  afterEach(() => {
+    const testContainer = document.getElementById(TEST_CONTAINER_ID);
+    testContainer.remove();
+  });
+
+  it('should render subscription price', async () => {
+    const template = html`
+      <og-some-price product="yum id"> </og-some-price>
+    `;
+    const priceDiv = await renderPriceTemplate(template);
+    const insideText = priceDiv.shadowRoot.textContent.trim();
+    expect(insideText).toBe('$0.90');
+  });
+
+  it('should render regular price', async () => {
+    const template = html`
+      <og-some-price regular product="yum id"> </og-some-price>
+    `;
+    const priceDiv = await renderPriceTemplate(template);
+    const insideText = priceDiv.shadowRoot.textContent.trim();
+    expect(insideText).toBe('$1.00');
+  });
+
+  it('should render discount price', async () => {
+    const template = html`
+      <og-some-price discount product="yum id"> </og-some-price>
+    `;
+    const priceDiv = await renderPriceTemplate(template);
+    const insideText = priceDiv.shadowRoot.textContent.trim();
+    expect(insideText).toBe('10%');
+  });
+
+  it('should render empty price when subscription is equal to regular', async () => {
+    const template = html`
+      <og-some-price discount product="yum id"> </og-some-price>
+    `;
+    const priceDiv = await renderPriceTemplate(template, {
+      frequency: '1_3',
+      productPlans: {
+        'yum id': [
+          {
+            frequency: '1_3',
+            regularPrice: '$1.00',
+            discountRate: '10%',
+            subscriptionPrice: '$1.00'
+          }
+        ]
+      }
+    });
+    const ogPrice = priceDiv.shadowRoot.innerHTML;
+    expect(ogPrice).not.toContain('10%');
+    expect(ogPrice).not.toContain('$1.00');
+  });
+});