@ordergroove/offers 2.24.2 → 2.25.2-alpha-PR-576-3.7

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_discounts: {
+    UD729: {
+      '3_1': ['30.00', '10%', '$27.00'],
+      '1_2': ['30.00', '20%', '$24.00']
+    }
+  }
+};
+
 const frequencies = [
   {
     every: 1,
@@ -31,10 +41,11 @@ const settings = {
 
 const textCopy = {
   showTooltip: true,
-  offerOptInLabel: 'Subscribe and SAVE {{ogIncentive DiscountAmount 10}}',
-  offerOptOutLabel: 'Purchase one time',
-  offerEveryLabel: 'Ships Every:',
-  offerTooltipTrigger: 'Hover for additional info',
+  offerOptInLabel: 'Subscribe and Save',
+  offerIncentiveText: 'Save {{ogIncentive DiscountPercent}} when you subscribe',
+  offerOptOutLabel: 'Deliver one-time only',
+  offerEveryLabel: 'Deliver every',
+  offerTooltipTrigger: '[?]',
   offerTooltipContent: 'Seems this is a great subscription offering. Many fun details about this program exist.',
   optinButtonLabel: '•',
   optoutButtonLabel: '•',
@@ -325,7 +336,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 +374,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.2",
+  "version": "2.25.2-alpha-PR-576-3.7+adf67759",
   "description": "offer state component",
   "author": "Eugenio Lattanzio <eugenio63@gmail.com>",
   "homepage": "https://github.com/ordergroove/plush-toys#readme",
@@ -33,8 +33,8 @@
     }
   ],
   "dependencies": {
-    "@ordergroove/auth": "^2.2.0",
-    "@ordergroove/offers-live-editor": "^0.4.0",
+    "@ordergroove/auth": "^2.2.1-alpha-PR-576-3.39+adf67759",
+    "@ordergroove/offers-live-editor": "^0.4.1",
     "lit-element": "^2.1.0",
     "lodash.memoize": "^4.1.2",
     "logical-expression-parser": "1.0.0",
@@ -43,7 +43,7 @@
     "throttle-debounce": "^2.1.0"
   },
   "devDependencies": {
-    "@ordergroove/offers-templates": "^0.4.2"
+    "@ordergroove/offers-templates": "^0.4.4"
   },
-  "gitHead": "15d044be78de0e47b82dd310d3d1c4d06fecc98f"
+  "gitHead": "adf67759424245c191b298426b53cd997ea6b0b6"
 }

package/schema.json

@@ -274,27 +274,32 @@
       "properties": {
         "defaultFrequencyCopy": {
           "type": "string",
-          "default": "Recommended",
+          "default": "(Most Popular)",
           "title": "Default frequency copy"
         },
         "offerOptInLabel": {
           "type": "string",
-          "default": "Subscribe and get 20% off",
-          "title": "Subscribe option copy"
+          "default": "Subscribe and Save",
+          "title": "Subscription copy"
+        },
+        "offerIncentiveText": {
+          "type": "string",
+          "default": "Save {{ogIncentive DiscountPercent}} when you subscribe",
+          "title": "Subscription sub copy"
         },
         "offerEveryLabel": {
           "type": "string",
-          "default": "Ships Every: ",
+          "default": "Deliver Every",
           "title": "Subscribe frequency label"
         },
         "offerOptOutLabel": {
           "type": "string",
-          "default": "One-time",
+          "default": "Deliver one-time only",
           "title": "One-time option copy"
         },
         "showTooltip": {
           "type": "boolean",
-          "default": false,
+          "default": true,
           "title": "Add a tool tip"
         }
       },
@@ -364,7 +369,7 @@
         },
         "tooltipPlacement": {
           "type": "string",
-          "default": "top",
+          "default": "bottom",
           "enum": ["top", "top-left", "top-right", "bottom", "bottom-left", "bottom-right", "right", "left"]
         }
       }
@@ -441,11 +446,12 @@
           "offerType": "radio"
         },
         "textCopy": {
-          "defaultFrequencyCopy": "Recommended",
-          "offerOptInLabel": "Subscribe and get 20% off",
+          "defaultFrequencyCopy": "(Most Popular)",
+          "offerOptInLabel": "Subscribe and Save",
+          "offerIncentiveText": "Save {{ogIncentive DiscountPercent}} when you subscribe",
           "offerEveryLabel": "Ships Every: ",
           "offerOptOutLabel": "One-time",
-          "showTooltip": false,
+          "showTooltip": true,
           "upsellButtonLabel": "Add to upcoming subscription order and receive 20% off",
           "upsellButtonContent": "Add to Next Order on ",
           "upsellModalContent": "Subscribe to this product and have it conveniently delivered to you at the frequency you choose! Read the FAQ here. Promotion subject to change.",

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_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/components/Offer.js

@@ -134,15 +134,24 @@ 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">
+        <og-tooltip placement="bottom">
           <div slot="trigger">
             <og-text key="offerTooltipTrigger"></og-text>
           </div>
@@ -151,7 +160,7 @@ export class Offer extends TemplateElement {
           </div>
         </og-tooltip>
       </div>
-      <div style="margin-left: 1.5em">
+      <div style="margin-left: 2.2em">
         <og-text key="offerEveryLabel"></og-text>
         <og-select-frequency>
           <option value="3_1" selected>3 Days</option>

package/src/components/OptinStatus.js

@@ -31,9 +31,9 @@ export class OptinStatus extends withProduct(TemplateElement) {
 
       .btn {
         position: relative;
-        width: 1.4em;
-        height: 1.4em;
-        margin: 0;
+        width: var(--og-radio-width, 1.4em);
+        height: var(--og-radio-height, 1.4em);
+        margin: var(--og-radio-margin, 0);
         padding: 0;
         border: 1px solid var(--og-primary-color, black);
         background: #fff;

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/Select.js

@@ -54,7 +54,7 @@ export class Select extends LitElement {
         color: inherit;
         fill: white;
         pointer-events: none;
-        right: 0.4em;
+        right: 0.3em;
         top: 50%;
         z-index: 1;
         font-size: 1em;

package/src/components/Tooltip.js

@@ -3,7 +3,7 @@ import { LitElement, html, css } from 'lit-element';
 export class Tooltip extends LitElement {
   static get properties() {
     return {
-      placement: { type: String, default: 'top' }
+      placement: { type: String, default: 'bottom' }
     };
   }
 
@@ -16,6 +16,7 @@ export class Tooltip extends LitElement {
       :host {
         display: inline-block;
         position: relative;
+        z-index: 9;
       }
 
       .trigger {
@@ -33,12 +34,14 @@ export class Tooltip extends LitElement {
         display: block;
         width: 200px;
         opacity: 0;
-        padding: 0.5em;
+        padding: var(--og-tooltip-padding, 0.5em);
+        text-align: var(--og-tooltip-text-align, left);
         pointer-events: none;
         position: absolute;
         transform: translateY(10px);
         transition: transform 0.25s ease-out;
         z-index: 99999;
+        border-radius: var(--og-tooltip-border-radius, 0);
       }
 
       .content:after {
@@ -189,7 +192,7 @@ export class Tooltip extends LitElement {
             ${this.trigger}
           </slot>
         </span>
-        <div class="content ${this.placement || 'top'}">
+        <div class="content ${this.placement || 'bottom'}">
           <slot name="content">
             ${this.content}
           </slot>

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/actions.js

@@ -121,11 +121,14 @@ export const fetchOrders = (status = 1, ordering = 'place') =>
       .then(
         // eslint-disable-next-line camelcase
         response => {
-          dispatch(receiveOrders(response));
-          const nextOrderId = (response.results[0] || {}).public_id;
-          if (nextOrderId) {
-            return api.fetchItems(legoUrl, auth, nextOrderId).then(res => dispatch(receiveItems(res)));
+          if (response.results) {
+            dispatch(receiveOrders(response));
+            const nextOrderId = (response.results[0] || {}).public_id;
+            if (nextOrderId) {
+              return api.fetchItems(legoUrl, auth, nextOrderId).then(res => dispatch(receiveItems(res)));
+            }
           }
+          dispatch(unauthorized(response.detail));
           return null;
         },
         err => dispatch(unauthorized(err))

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

@@ -332,10 +332,11 @@ export const environment = (state = {}, action) => {
 
 export const locale = (
   state = {
-    offerOptInLabel: 'Subscribe',
-    offerOptOutLabel: 'Purchase one time',
-    offerEveryLabel: 'Every',
-    offerTooltipTrigger: 'Hover for additional info',
+    offerOptInLabel: 'Subscribe and Save',
+    offerIncentiveText: 'Save {{ogIncentive DiscountPercent}} when you subscribe',
+    offerOptOutLabel: 'Deliver one-time only',
+    offerEveryLabel: 'Delivery Every',
+    offerTooltipTrigger: '[?]',
     offerTooltipContent: 'Seems this is a great subscription offering. Many fun details about this program exist.',
     optinButtonLabel: '•',
     optoutButtonLabel: '•',
@@ -350,7 +351,7 @@ export const locale = (
     upsellModalTitle: 'Impulse Upsell',
     upsellModalConfirmLabel: 'Ok',
     upsellModalCancelLabel: 'Cancel',
-    defaultFrequencyCopy: '(Recommended)',
+    defaultFrequencyCopy: '(Most Popular)',
     frequencyPeriods: {
       '1': 'day',
       '2': 'week',
@@ -443,7 +444,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,