@ordergroove/offers 2.24.0 → 2.24.1-alpha-PR-566-5.3

package/examples/index.js

@@ -5,6 +5,16 @@ import { getMarkup, getStyles } from '@ordergroove/offers-templates';
 
 // runTests();
 
+window.og_settings = {
+  // object were key is product id and value is an array of plan discount
+  product_x_plans: {
+    UD729: {
+      '3_1': ['30.00', '10%', '$27.00'],
+      '1_2': ['30.00', '20%', '$24.00']
+    }
+  }
+};
+
 const frequencies = [
   {
     every: 1,
@@ -325,7 +335,11 @@ Add item to order on
     {
       name: 'Tooltip',
       selector: 'og-offer[location="tooltip-placement"]',
-      markup: [['top-left', 'top', 'top-right'], ['left', '', 'right'], ['bottom-left', 'bottom', 'bottom-right']]
+      markup: [
+        ['top-left', 'top', 'top-right'],
+        ['left', '', 'right'],
+        ['bottom-left', 'bottom', 'bottom-right']
+      ]
         .map(options =>
           options
             .map(
@@ -359,7 +373,6 @@ function updateTemplate(target) {
 
     const style = document.getElementById('offersGlobalCss');
     style.innerHTML = '';
-    console.log('it.config', JSON.parse(data).config, getStyles(JSON.parse(data).config));
     style.appendChild(document.createTextNode(getStyles(JSON.parse(data).config)));
 
     document.getElementById('the-html').innerText = (JSON.parse(data).markup || '').trim();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ordergroove/offers",
-  "version": "2.24.0",
+  "version": "2.24.1-alpha-PR-566-5.3+b7a041a1",
   "description": "offer state component",
   "author": "Eugenio Lattanzio <eugenio63@gmail.com>",
   "homepage": "https://github.com/ordergroove/plush-toys#readme",
@@ -45,5 +45,5 @@
   "devDependencies": {
     "@ordergroove/offers-templates": "^0.4.0"
   },
-  "gitHead": "5a104d20766e12bc957a4f052eb293facf8f26e5"
+  "gitHead": "b7a041a12a28708064fdbd024d104525fc4be05b"
 }

package/src/__tests__/offers.spec.js

@@ -1,16 +1,111 @@
-import offers from '../index';
+import { offers } from '../index';
+import { api } from '../core/api';
 
 describe('Offers', () => {
+  let register, fetchOfferSpy, mockStore;
   // TODO revisit chunks
   it('should have setPublicPath method as compatibility', () => {
     offers.setPublicPath('yum-path');
   });
 
-  xit('should warn if attempting to initialize twice', () => {
-    const warnSpy = spyOn(console, 'warn');
+  beforeEach(() => {
+    register = spyOn(offers, 'register');
+    fetchOfferSpy = spyOn(api, 'fetchOffer');
+    const dispatch = jasmine.createSpy();
+    mockStore = {
+      getState() {
+        return { sessionId: 'xyz' };
+      },
+      dispatch
+    };
+
+    offers.isReady = false;
+  });
+
+  it('should warn if attempting to initialize twice', () => {
+    const warn = spyOn(console, 'warn');
+
     offers.initialize('0e5de2bedc5e11e3a2e4bc764e106cf4', 'staging');
-    expect(warnSpy).not.toHaveBeenCalled();
+    expect(warn).not.toHaveBeenCalled();
+
     offers.initialize('0e5de2bedc5e11e3a2e4bc764e106cf4', 'staging');
-    expect(warnSpy).toHaveBeenCalledWith('og.offers has been initialized already. Skipping.');
+    expect(warn).toHaveBeenCalledWith('og.offers has been initialized already. Skipping.');
+    expect(register).toHaveBeenCalledTimes(1);
+  });
+
+  it('should warn if attempting to initialize twice', () => {
+    const resolveSettings = spyOn(offers, 'resolveSettings');
+    offers.initialize('0e5de2bedc5e11e3a2e4bc764e106cf4', 'staging');
+    expect(resolveSettings).toHaveBeenCalledWith(
+      '0e5de2bedc5e11e3a2e4bc764e106cf4',
+      'staging',
+      undefined,
+      offers.store
+    );
+  });
+
+  describe('offers.resolveSettings', () => {
+    it('should fetch offer for single product in pdp', () => {
+      offers.resolveSettings('0e5de2bedc5e11e3a2e4bc764e106cf4', 'staging', { product: '123' }, mockStore);
+      expect(fetchOfferSpy).toHaveBeenCalledWith(
+        'https://staging.om.ordergroove.com',
+        '0e5de2bedc5e11e3a2e4bc764e106cf4',
+        'xyz',
+        '123',
+        'pdp'
+      );
+    });
+
+    it('should fetch offer for each product in cart', () => {
+      offers.resolveSettings(
+        '0e5de2bedc5e11e3a2e4bc764e106cf4',
+        'staging',
+        { cart: { products: ['123', '456'] } },
+        mockStore
+      );
+      expect(fetchOfferSpy).toHaveBeenCalledTimes(2);
+
+      expect(fetchOfferSpy.calls.argsFor(0)).toEqual([
+        'https://staging.om.ordergroove.com',
+        '0e5de2bedc5e11e3a2e4bc764e106cf4',
+        'xyz',
+        '123',
+        'pdp'
+      ]);
+      expect(fetchOfferSpy.calls.argsFor(1)).toEqual([
+        'https://staging.om.ordergroove.com',
+        '0e5de2bedc5e11e3a2e4bc764e106cf4',
+        'xyz',
+        '456',
+        'pdp'
+      ]);
+    });
+
+    it('should set product price and discounts', () => {
+      offers.resolveSettings(
+        '0e5de2bedc5e11e3a2e4bc764e106cf4',
+        'staging',
+        {
+          // object were key is product id and value is an array of plan discount
+          product_x_plans: {
+            123: {
+              '2_2': ['30.00', '20%', '$24.00'],
+              '1_3': ['30.00', '10%', '$27.00']
+            }
+          }
+        },
+        mockStore
+      );
+      expect(mockStore.dispatch).toHaveBeenCalledTimes(1);
+      expect(mockStore.dispatch).toHaveBeenCalledWith({
+        type: 'RECEIVE_PRODUCT_PLANS',
+        payload: {
+          123: {
+            '2_2': ['30.00', '20%', '$24.00'],
+            '1_3': ['30.00', '10%', '$27.00']
+          }
+        }
+      });
+    });
   });
 });

package/src/components/Offer.js

@@ -134,13 +134,22 @@ export class Offer extends TemplateElement {
     return `
     <og-when test="regularEligible">
       <div>
+
         <og-optout-button>
           <og-text key="offerOptOutLabel"></og-text>
         </og-optout-button>
       </div>
       <div>
         <og-optin-button>
-          <og-text key="offerOptInLabel"></og-text>
+          
+          
+          <og-price discount>
+            <span slot="prepend">Subscribe and get</span>
+            <span slot="append">off</span>
+          </og-price>
+          <og-price regular></og-price>
+          <og-price subscription></og-price>
+    
         </og-optin-button>
         <og-tooltip placement="top-right">
           <div slot="trigger">

package/src/components/Price.js

@@ -0,0 +1,56 @@
+import { html } from 'lit-element';
+import { connect } from '../core/connect';
+
+import { withProduct } from '../core/resolveProperties';
+import { TemplateElement } from '../core/base';
+import { configSelector, makeProductFrequencySelector } from '../core/selectors';
+
+export class Price extends withProduct(TemplateElement) {
+  static get properties() {
+    return {
+      ...super.properties,
+      regular: { type: Boolean, reflect: true },
+      subscription: { type: Boolean, reflect: true },
+      discount: { type: Boolean, reflect: true }
+    };
+  }
+
+  get value() {
+    const frequency = this.frequency || this.defaultFrequency;
+    const plans = this.productPlans[this.product.id] || {};
+    const currentPlan = plans[frequency] || [];
+    if (!currentPlan) return '';
+    const [regularPrice, discountRate, subscriptionPrice] = currentPlan;
+    if (subscriptionPrice === regularPrice) return '';
+
+    if (this.regular) {
+      this.style.textDecoration = 'line-through';
+      return regularPrice;
+    }
+
+    if (this.subscription) return subscriptionPrice;
+    if (this.discount) return discountRate;
+    return '';
+  }
+
+  render() {
+    const value = this.value;
+    if (value)
+      return html`
+        <slot name="prepend"></slot>
+        ${value}
+        <slot name="append"></slot>
+      `;
+
+    return html`
+      <slot></slot>
+    `;
+  }
+}
+const mapStateToProps = (state, ownProps) => ({
+  productPlans: state.productPlans,
+  frequency: makeProductFrequencySelector(ownProps.product)(state),
+  ...configSelector(state, ownProps, 'defaultFrequency')
+});
+
+export default connect(mapStateToProps)(Price);

package/src/components/__tests__/OG.fspec.js

@@ -2,10 +2,10 @@ const og = window.og;
 describe('og.offers', function() {
   it('should define og namespace', () => {
     expect(og).toEqual(jasmine.any(Object));
-    expect(og.offers).toEqual(jasmine.any(Function));
+    expect(og.offers).toEqual(jasmine.any(Object));
   });
 
-  it('shoul define register() method', () => {
+  it('should define register() method', () => {
     expect(og.offers.register).toEqual(jasmine.any(Function));
   });
 });

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

@@ -0,0 +1,43 @@
+const og = window.og;
+
+async function simulateChange(element, value) {
+  const evt = new Event('change', { bubbles: true });
+  element.value = value;
+  element.dispatchEvent(evt, { target: { value } });
+  await new Promise(r => setTimeout(r, 1));
+}
+
+describe('Select Frequency', function() {
+  let element;
+  beforeEach(async () => {
+    og.offers.clear();
+    document.body.innerHTML = `
+    <og-offer product="123" preview-standard-offer>
+      <og-select-frequency default-text=" (recomended)">
+        <option value="optedOut">Buy one time</option>
+        <option value="2w" selected="selected">2 weeks</option>
+        <option value="1m">1 month </option>
+      </og-select-frequency>
+    </og-offer>
+    `;
+    element = document.querySelector('og-select-frequency');
+    await element.updateComplete;
+  });
+
+  it('it should have default frequency as value', async () => {
+    const htmlSelectElement = element.shadowRoot.querySelector('og-select').shadowRoot.querySelector('select');
+    expect(htmlSelectElement.value).toEqual('2_2');
+  });
+
+  it('should append recomended text to default frequency', async () => {
+    const htmlSelectElement = element.shadowRoot.querySelector('og-select').shadowRoot.querySelector('select');
+    expect(htmlSelectElement.innerText).toEqual('Buy one time\n2 weeks (recomended)\n1 month');
+  });
+
+  it('should not append recomended text to clicked frequency', async () => {
+    const htmlSelectElement = element.shadowRoot.querySelector('og-select').shadowRoot.querySelector('select');
+    await simulateChange(htmlSelectElement, '1_3');
+    expect(htmlSelectElement.value).toEqual('1_3');
+    expect(htmlSelectElement.innerText).toEqual('Buy one time\n2 weeks (recomended)\n1 month');
+  });
+});

package/src/core/constants.js

@@ -36,3 +36,4 @@ export const LOCAL_STORAGE_CHANGE = 'LOCAL_STORAGE_CHANGE';
 export const LOCAL_STORAGE_CLEAR = 'LOCAL_STORAGE_CLEAR';
 export const SET_FIRST_ORDER_PLACE_DATE = 'SET_FIRST_ORDER_PLACE_DATE';
 export const SET_PRODUCT_TO_SUBSCRIBE = 'SET_PRODUCT_TO_SUBSCRIBE';
+export const RECEIVE_PRODUCT_PLANS = 'RECEIVE_PRODUCT_PLANS';

package/src/core/reducer.js

@@ -443,7 +443,17 @@ export const templates = (state = [], action) => {
   }
 };
 
+export const productPlans = (state = {}, action) => {
+  switch (action.type) {
+    case constants.RECEIVE_PRODUCT_PLANS:
+      return { ...action.payload };
+    default:
+      return state;
+  }
+};
+
 export default combineReducers({
+  productPlans,
   environment,
   optedin,
   optedout,