@ordergroove/offers 2.23.1 → 2.24.1-alpha-PR-566-18.13

package/examples/index.html

@@ -121,5 +121,8 @@
 
     <pre id="the-html"></pre>
     <textarea id="the-js" readonly></textarea>
+    <script type="text/javascript" src="examples.js"></script>
+    <!-- offers should be latest since it overides og.offers namespace -->
+    <script type="text/javascript" src="offers.js"></script>
   </body>
 </html>

package/examples/index.js

@@ -1,9 +1,19 @@
 /* global og */
 import { getMarkup, getStyles } from '@ordergroove/offers-templates';
 
-import runTests from '../src/run-tests';
+// import runTests from '../src/run-tests';
 
-runTests();
+// runTests();
+
+window.og_settings = {
+  // object were key is product id and value is an array of plan discount
+  product_discounts: {
+    UD729: {
+      '3_1': ['30.00', '10%', '$27.00'],
+      '1_2': ['30.00', '20%', '$24.00']
+    }
+  }
+};
 
 const frequencies = [
   {
@@ -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(
@@ -354,17 +368,16 @@ function updateTemplate(target) {
 
   el.setAttribute('location', value);
   window.location.hash = value;
-  setImmediate(() => {
+  setTimeout(() => {
     const data = target.dataset.config;
 
     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();
     document.getElementById('the-js').innerHTML = data;
-  });
+  }, 0);
 }
 
 const addOption = dropdown => (it, ix) => {

package/karma-functional.conf.js

@@ -41,18 +41,20 @@ module.exports = function(config) {
     // preprocess matching files before serving them to the browser
     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
     preprocessors: {
-      'src/**/*.fspec.js': ['webpack', 'sourcemap']
-    },
-    webpack: {
-      mode: 'development'
-      // devtool: 'inline-source-map'
+      'src/**/*.fspec.js': ['esbuild']
     },
+    esbuild: {
+      // Replace some global variables
+      define: {
+        // COVERAGE: coverage,
+        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || ''),
+        ENABLE_PERFORMANCE: true
+      },
+      // plugins: [createEsbuildPlugin()],
 
-    webpackMiddleware: {
-      // webpack-dev-middleware configuration
-      // i. e.
-      stats: 'errors-only'
-      // logLevel: 'debug'
+      // Karma-esbuild specific options
+      singleBundle: false // Merge all test files into one bundle(default: true)
+      // singleBundle: true // Merge all test files into one bundle(default: true)
     },
 
     // test results reporter to use

package/karma.conf.js

@@ -9,6 +9,12 @@ module.exports = function(config) {
 
     // list of files / patterns to load in the browser
     files: [
+      {
+        pattern: 'src/init-test.js',
+        type: 'js',
+        included: true,
+        served: true
+      },
       {
         pattern: 'src/**/*.spec.js',
         type: 'js',
@@ -23,17 +29,21 @@ module.exports = function(config) {
     // preprocess matching files before serving them to the browser
     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
     preprocessors: {
-      'src/**/*.js': ['webpack', 'sourcemap']
+      '**/*.js': ['esbuild']
     },
-    webpack: {
-      mode: 'development'
-      // devtool: 'inline-source-map'
-    },
-    webpackMiddleware: {
-      // webpack-dev-middleware configuration
-      // i. e.
-      stats: 'errors-only',
-      logLevel: 'error'
+
+    esbuild: {
+      // Replace some global variables
+      define: {
+        // COVERAGE: coverage,
+        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || ''),
+        ENABLE_PERFORMANCE: true
+      },
+      // plugins: [createEsbuildPlugin()],
+
+      // Karma-esbuild specific options
+      singleBundle: false // Merge all test files into one bundle(default: true)
+      // singleBundle: true // Merge all test files into one bundle(default: true)
     },
 
     // test results reporter to use

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ordergroove/offers",
-  "version": "2.23.1",
+  "version": "2.24.1-alpha-PR-566-18.13+79cf9e73",
   "description": "offer state component",
   "author": "Eugenio Lattanzio <eugenio63@gmail.com>",
   "homepage": "https://github.com/ordergroove/plush-toys#readme",
@@ -11,21 +11,17 @@
     "url": "git+https://github.com/ordergroove/plush-toys.git"
   },
   "scripts": {
-    "start": "../../node_modules/.bin/webpack-dev-server",
-    "build": "rm -rf dist && ../../node_modules/.bin/webpack --mode production",
-    "build:prod": "rm -rf dist && ../../node_modules/.bin/webpack --mode production --display errors-only",
-    "build:dev": "rm -rf dist && ../../node_modules/.bin/webpack --mode development",
+    "start": "npm run build -- --serve",
+    "build": "rm -rf dist && mkdir dist && cp examples/index.html dist/index.html && node build.js",
+    "build:prod": "rm -rf dist && node build.js --prod",
     "bundlesize": "../../node_modules/.bin/bundlesize",
     "lint": "../../node_modules/.bin/eslint --ignore-path ../../.gitignore ./src",
-    "dev": "../../node_modules/.bin/webpack-dev-server",
-    "watch": "rm -rf dist && ../../node_modules/.bin/webpack --mode development --watch",
-    "prepublishOnly": "npm run -s lint && npm run -s test && npm run -s build:prod && npm run -s bundlesize",
+    "prepublishOnly": "npm run -s build:prod && npm run -s bundlesize",
     "test": "../../node_modules/.bin/karma start --single-run --log-level error --reporters progress && npm run build && ../../node_modules/.bin/karma start --single-run --log-level error --reporters progress karma-functional.conf.js",
     "test:watch": "../../node_modules/.bin/karma start",
     "test:watch:functional": "npm run build:dev && ../../node_modules/.bin/karma start karma-functional.conf.js",
     "test:functional": "npm run test:watch:functional -- --single-run --log-level error --reporters progress",
-    "test:watch:silent": "../../node_modules/.bin/karma start --log-level error  --reporters dots",
-    "postversion": "../../bin/postversion.sh"
+    "test:watch:silent": "../../node_modules/.bin/karma start --log-level error  --reporters dots"
   },
   "bugs": {
     "url": "https://github.com/ordergroove/plush-toys/issues"
@@ -37,8 +33,8 @@
     }
   ],
   "dependencies": {
-    "@ordergroove/auth": "^2.1.9",
-    "@ordergroove/offers-live-editor": "^0.3.0",
+    "@ordergroove/auth": "^2.2.0",
+    "@ordergroove/offers-live-editor": "^0.4.0",
     "lit-element": "^2.1.0",
     "lodash.memoize": "^4.1.2",
     "logical-expression-parser": "1.0.0",
@@ -47,8 +43,7 @@
     "throttle-debounce": "^2.1.0"
   },
   "devDependencies": {
-    "@ordergroove/js-utils": "^1.0.3",
-    "@ordergroove/offers-templates": "^0.3.19"
+    "@ordergroove/offers-templates": "^0.4.0"
   },
-  "gitHead": "502b4968dae2de28b0db509f53fa7932172eb688"
+  "gitHead": "79cf9e73836b5e364322016e41a01a33a7dc2adb"
 }

package/src/__tests__/offers.spec.js

@@ -0,0 +1,111 @@
+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');
+  });
+
+  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(warn).not.toHaveBeenCalled();
+
+    offers.initialize('0e5de2bedc5e11e3a2e4bc764e106cf4', 'staging');
+    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_discounts: {
+            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/__tests__/test-mode.spec.js

@@ -0,0 +1,16 @@
+import { keys } from '../test-mode';
+
+describe('TestMode', () => {
+  it('should add the element if correct key stroke is keyed in', async () => {
+    document.body.innerHTML = '';
+    expect(document.querySelectorAll('og-test-wizard').length).toEqual(0);
+    await Promise.all(
+      keys.map(async keyCode => {
+        document.dispatchEvent(new KeyboardEvent('keyup', { keyCode }));
+        await new Promise(res => setTimeout(res, 0));
+      })
+    );
+    await new Promise(res => setTimeout(res, 0));
+    expect(document.querySelectorAll('og-test-wizard').length).toEqual(1);
+  });
+});

package/src/components/FrequencyStatus.js

@@ -31,9 +31,9 @@ export class FrequencyStatus extends withProduct(TemplateElement) {
     return {
       ...super.properties,
       disabled: { type: Boolean },
-      subscribed: subscribed,
+      subscribed,
       frequency: { type: String },
-      defaultFrequency: defaultFrequency,
+      defaultFrequency,
       productDefaultFrequency: { type: String },
       frequencies: {
         converter: {

package/src/components/IncentiveText.js

@@ -97,7 +97,7 @@ export class IncentiveText extends withProduct(LitElement) {
     const incentiveType = this.initial ? 'initial' : 'ongoing';
 
     const incentive = (this.incentives[incentiveType] || []).find(
-      filterIncentives.bind({ incentiveClass: incentiveClass, incentiveValue: incentiveValue })
+      filterIncentives.bind({ incentiveClass, incentiveValue })
     );
 
     return html`

package/src/components/Offer.js

@@ -1,6 +1,7 @@
 import { html, css } from 'lit-element';
 import memoize from 'lodash.memoize';
 import { connect } from '../core/connect';
+import { setPreview } from '../core/actions-preview';
 import {
   fetchOffer,
   productHasChangedComponents,
@@ -133,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">
@@ -229,9 +239,7 @@ export class Offer extends TemplateElement {
 
   updated(changed) {
     if (changed.has('preview')) {
-      import(/* webpackChunkName: "offers-preview-mode" */ '../core/actions-preview').then(({ setPreview }) =>
-        this.store.dispatch(setPreview(this.preview, changed.get('preview'), this))
-      );
+      this.setPreview(this.preview, changed.get('preview'), this);
     }
 
     this.frequency = this.defaultFrequency;
@@ -321,16 +329,14 @@ export const mapStateToProps = (state, ownProps) => ({
   subscribed: makeOptedinSelector(ownProps.product)(state),
   ...templatesSelector(state)
 });
-export const ConnectedOffer = connect(
-  mapStateToProps,
-  {
-    fetchOffer,
-    fetchOrders,
-    productHasChangedComponents,
-    optinProduct,
-    setFirstOrderPlaceDate,
-    setProductToSubscribe
-  }
-)(Offer);
+export const ConnectedOffer = connect(mapStateToProps, {
+  fetchOffer,
+  fetchOrders,
+  productHasChangedComponents,
+  optinProduct,
+  setFirstOrderPlaceDate,
+  setProductToSubscribe,
+  setPreview
+})(Offer);
 
 export default ConnectedOffer;

package/src/components/OptinButton.js

@@ -10,7 +10,7 @@ export class OptinButton extends OptinStatus {
     return {
       ...super.properties,
       frequency: { type: String, reflect: true },
-      defaultFrequency: defaultFrequency,
+      defaultFrequency,
       optinButtonLabel: { type: String }
     };
   }
@@ -34,9 +34,6 @@ export class OptinButton extends OptinStatus {
   }
 }
 
-export const ConnectedOptinButton = connect(
-  mapStateToProps,
-  { optinProduct }
-)(OptinButton);
+export const ConnectedOptinButton = connect(mapStateToProps, { optinProduct })(OptinButton);
 
 export default ConnectedOptinButton;

package/src/components/OptinSelect.js

@@ -12,7 +12,7 @@ export class OptinSelect extends withChildOptions(OptinStatus) {
       ...super.properties,
       frequencies: { type: Array, attribute: false },
       frequency: { type: String },
-      defaultFrequency: defaultFrequency
+      defaultFrequency
     };
   }
 
@@ -54,7 +54,7 @@ export class OptinSelect extends withChildOptions(OptinStatus) {
           `
         },
         ...(this.frequencies || []).map(value => ({
-          value: value,
+          value,
           text: frequencyText(value, this.defaultFrequency)
         }))
       ];

package/src/components/OptinToggle.js

@@ -32,9 +32,6 @@ export class OptinToggle extends OptinStatus {
   }
 }
 
-export const ConnectedOptinToggle = connect(
-  mapStateToProps,
-  { optoutProduct, optinProduct }
-)(OptinToggle);
+export const ConnectedOptinToggle = connect(mapStateToProps, { optoutProduct, optinProduct })(OptinToggle);
 
 export default ConnectedOptinToggle;

package/src/components/OptoutButton.js

@@ -30,9 +30,6 @@ export class OptoutButton extends OptinStatus {
   }
 }
 
-export const ConnectedOptoutButton = connect(
-  mapStateToProps,
-  { optoutProduct }
-)(OptoutButton);
+export const ConnectedOptoutButton = connect(mapStateToProps, { optoutProduct })(OptoutButton);
 
 export default ConnectedOptoutButton;

package/src/components/Price.js

@@ -0,0 +1,54 @@
+import { html } from 'lit-element';
+import { connect } from '../core/connect';
+
+import { withProduct } from '../core/resolveProperties';
+import { TemplateElement } from '../core/base';
+import { 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 },
+      frequency: { type: Object },
+      productPlans: { type: Object }
+    };
+  }
+
+  get value() {
+    const frequency = this.frequency || (this.offer && this.offer.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) {
+      return regularPrice;
+    }
+    if (this.discount) return discountRate;
+    return subscriptionPrice;
+  }
+
+  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)
+});
+
+export default connect(mapStateToProps)(Price);

package/src/components/SelectFrequency.js

@@ -73,10 +73,9 @@ export class SelectFrequency extends withChildOptions(FrequencyStatus) {
 
   render() {
     let { options } = this.childOptions;
-
     if (!options.length) {
       options = (this.frequencies || []).map(value => ({
-        value: value,
+        value,
         text: frequencyText(value, this.defaultFrequency)
       }));
     }
@@ -99,11 +98,8 @@ export class SelectFrequency extends withChildOptions(FrequencyStatus) {
   }
 }
 
-export const ConnectedSelectFrequency = connect(
-  mapStateToProps,
-  {
-    productChangeFrequency
-  }
-)(SelectFrequency);
+export const ConnectedSelectFrequency = connect(mapStateToProps, {
+  productChangeFrequency
+})(SelectFrequency);
 
 export default ConnectedSelectFrequency;

package/src/components/UpsellButton.js

@@ -24,7 +24,7 @@ export class UpsellButton extends withProduct(TemplateElement) {
         type: String,
         attribute: false
       },
-      auth: auth,
+      auth,
       isPreview: { type: Boolean, attribute: false },
       target: { type: String }
     };
@@ -73,9 +73,6 @@ export const mapStateToProps = state => ({
   isPreview: state.previewUpsellOffer
 });
 
-export const ConnectedUpsellButton = connect(
-  mapStateToProps,
-  { fetchOrders }
-)(UpsellButton);
+export const ConnectedUpsellButton = connect(mapStateToProps, { fetchOrders })(UpsellButton);
 
 export default UpsellButton;

package/src/components/UpsellModal.js

@@ -10,8 +10,8 @@ export class UpsellModal extends withProduct(TemplateElement) {
   static get properties() {
     return {
       ...super.properties,
-      defaultFrequency: defaultFrequency,
-      auth: auth,
+      defaultFrequency,
+      auth,
       subscribed: { type: Boolean, attribute: false },
       frequency: { type: String, attribute: false },
       nextUpcomingOrder: { type: Object, attribute: false },
@@ -22,7 +22,6 @@ export class UpsellModal extends withProduct(TemplateElement) {
 
   constructor() {
     super();
-    this.title = '';
     this.createIu = () => 0;
     this.concludeUpsell = () => 0;
   }
@@ -109,12 +108,9 @@ export const mapStateToProps = (state, ownProps) => ({
   isPreview: state.previewUpsellOffer
 });
 
-export const ConnectedUpsellModal = connect(
-  mapStateToProps,
-  {
-    concludeUpsell,
-    createIu
-  }
-)(UpsellModal);
+export const ConnectedUpsellModal = connect(mapStateToProps, {
+  concludeUpsell,
+  createIu
+})(UpsellModal);
 
 export default UpsellModal;