@ordergroove/offers 2.26.2 → 2.26.3-alpha-PR-593-20.20

package/src/components/Select.js

@@ -35,14 +35,7 @@ export class Select extends LitElement {
       select::-ms-expand {
         display: none;
       }
-      select:hover {
-        // border-color: #888;
-      }
       select:focus {
-        // border-color: #aaa;
-        // box-shadow: 0 0 1px 3px rgba(59, 153, 252, 0.7);
-        // box-shadow: 0 0 0 3px -moz-mac-focusring;
-        // color: #222;
         outline: none;
       }
       select option {
@@ -72,19 +65,16 @@ export class Select extends LitElement {
   }
 
   render() {
+    const handleOnChange = ev => this.onChange(ev);
     return html`
-      <select @change="${this.onChange}" .value="${this.selected}">
+      <select @change="${handleOnChange}">
         ${this.options.map(
           option => html`
-            <option value="${option.value}" ?selected=${this.selected === option.value}>${option.text}</option>
+            <option value="${option.value}" ?selected=${option.value === this.selected}>${option.text}</option>
           `
         )}
       </select>
       <span>&#9660;</span>
-      <!-- <svg xmlns="http://www.w3.org/2000/svg" width="36" height="100%" viewBox="0 0 36 36">
-        <path d="M10.5 15l7.5 7.5 7.5-7.5z" />
-        <path d="M0 0h36v36h-36z" fill="none" />
-      </svg> -->
     `;
   }
 }

package/src/components/SelectFrequency.js

@@ -50,10 +50,13 @@ export class SelectFrequency extends withChildOptions(FrequencyStatus) {
 
   // default frequency comes from redux store first, then default option value, and then finally attribute value.
   get defaultFrequency() {
-    const { options, isSelected } = this.childOptions;
+    if (this.configDefaultFrequency) {
+      return this.configDefaultFrequency;
+    }
     if (this.productDefaultFrequency) {
       return this.productDefaultFrequency;
     }
+    const { options, isSelected } = this.childOptions;
     if (isSelected) {
       return isSelected;
     }
@@ -64,7 +67,10 @@ export class SelectFrequency extends withChildOptions(FrequencyStatus) {
   }
 
   get currentFrequency() {
-    return this.frequency || this.defaultFrequency;
+    if (this.frequency) {
+      return this.frequency;
+    }
+    return this.defaultFrequency;
   }
 
   productChangeFrequency(_, value) {
@@ -72,7 +78,20 @@ export class SelectFrequency extends withChildOptions(FrequencyStatus) {
   }
 
   render() {
-    let { options } = this.childOptions;
+    let options;
+
+    if (this.frequencies?.length) {
+      options = this.frequencies.map((value, ix) => ({
+        value,
+        text:
+          this.frequenciesText && ix in this.frequenciesText
+            ? this.frequenciesText[ix]
+            : frequencyText(value, this.defaultFrequency)
+      }));
+    } else {
+      ({ options } = this.childOptions);
+    }
+
     if (!options.length) {
       options = (this.frequencies || []).map(value => ({
         value,
@@ -82,16 +101,15 @@ export class SelectFrequency extends withChildOptions(FrequencyStatus) {
     const defaultFrequency = this.defaultFrequency;
 
     options = options.map(({ text, value }) => ({
-      text: value === defaultFrequency ? `${text} ${(this.defaultText || '').trim()}`.trim() : text,
+      text: value === defaultFrequency ? `${text} ${(this.defaultText || '').trim()}` : text,
       value
     }));
-
     return html`
       <og-select
         .options="${options}"
         .selected="${this.currentFrequency}"
         .onChange="${({ target: { value } }) => {
-          this.productChangeFrequency(this.product, value);
+          this.productChangeFrequency(this.product, value, this.offer);
         }}"
       ></og-select>
     `;

package/src/components/TestWizard.js

@@ -8,7 +8,7 @@ export class TestWizard extends LitElement {
       :host {
         position: fixed;
         top: 5em;
-        right: 5em;
+        righit: 5em;
         background-color: rgba(255, 255, 255, 0.7);
         width: 400px;
         padding: 1em;

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

@@ -8,4 +8,28 @@ describe('og.offers', function() {
   it('should define register() method', () => {
     expect(og.offers.register).toEqual(jasmine.any(Function));
   });
+
+  const api = jasmine.objectContaining({
+    store: jasmine.any(Object),
+    addOptinChangedCallback: jasmine.any(Function),
+    addTemplate: jasmine.any(Function),
+    clear: jasmine.any(Function),
+    config: jasmine.any(Function),
+    disableOptinChangedCallbacks: jasmine.any(Function),
+    getOptins: jasmine.any(Function),
+    getProductsForPurchasePost: jasmine.any(Function),
+    initialize: jasmine.any(Function),
+    previewMode: jasmine.any(Function),
+    register: jasmine.any(Function),
+    resolveSettings: jasmine.any(Function),
+    setAuthUrl: jasmine.any(Function),
+    setEnvironment: jasmine.any(Function),
+    setLocale: jasmine.any(Function),
+    setMerchantId: jasmine.any(Function),
+    setPublicPath: jasmine.any(Function),
+    setTemplates: jasmine.any(Function)
+  });
+  it('imported ', () => {
+    expect(og.offers).toEqual(api);
+  });
 });

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

@@ -22,7 +22,7 @@ describe('Offer', function() {
       expect(this.underTest.fetchOffer).not.toHaveBeenCalledWith();
       this.underTest.setAttribute('product', 'yum product');
       await this.underTest.updateComplete;
-      expect(this.underTest.fetchOffer).toHaveBeenCalledWith('yum product');
+      expect(this.underTest.fetchOffer).toHaveBeenCalledWith('yum product', 'pdp', this.underTest);
     });
 
     it('should not call dispatch given product attribute has not changed', async function() {
@@ -125,7 +125,7 @@ describe('Offer', function() {
       el.location = 'cart';
       el.product = { id: 'yum id' };
       await appendToBody(el);
-      expect(el.optinProduct).toHaveBeenCalledWith({ id: 'yum id' }, '1_1');
+      expect(el.optinProduct).toHaveBeenCalledWith({ id: 'yum id' }, '1_1', el);
     });
 
     it('should not optin by default on location=cart when optin exists', async () => {
@@ -165,7 +165,7 @@ describe('Offer', function() {
       el.product = { id: 'yum id' };
       el.productComponents = ['a', 'b'];
       await appendToBody(el);
-      expect(el.optinProduct).toHaveBeenCalledWith({ id: 'yum id', components: ['a', 'b'] }, '1_1');
+      expect(el.optinProduct).toHaveBeenCalledWith({ id: 'yum id', components: ['a', 'b'] }, '1_1', el);
     });
 
     it('should optin withithout components given offer is autoship eligible, offer does not have product components, and location is cart', async () => {
@@ -178,7 +178,7 @@ describe('Offer', function() {
       el.location = 'cart';
       el.product = { id: 'yum id' };
       await appendToBody(el);
-      expect(el.optinProduct).toHaveBeenCalledWith({ id: 'yum id' }, '1_1');
+      expect(el.optinProduct).toHaveBeenCalledWith({ id: 'yum id' }, '1_1', el);
     });
   });
 });

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

@@ -30,7 +30,7 @@ describe('OptinButton', function() {
       element.defaultFrequency = '1_1';
       element.optinProduct = jasmine.createSpy('optinProduct');
       await simulateClick(element, 'button');
-      expect(element.optinProduct).toHaveBeenCalledWith({ id: '123' }, '1_1');
+      expect(element.optinProduct).toHaveBeenCalledWith({ id: '123' }, '1_1', undefined);
     });
 
     it('should dispatch optinProduct(product, someFreq) action on click', async () => {
@@ -39,7 +39,7 @@ describe('OptinButton', function() {
       element.defaultFrequency = 'custom 2.2';
       element.optinProduct = jasmine.createSpy('optinProduct');
       await simulateClick(element, 'button');
-      expect(element.optinProduct).toHaveBeenCalledWith({ id: '123' }, 'custom 2.2');
+      expect(element.optinProduct).toHaveBeenCalledWith({ id: '123' }, 'custom 2.2', undefined);
     });
   });
 });

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

@@ -46,7 +46,7 @@ describe('OptinToggle', () => {
     elm.setAttribute('product', 'yum product');
     elm.setAttribute('frequency', '1_1');
     await simulateClick(elm, 'button');
-    expect(elm.optinProduct).toHaveBeenCalledWith({ id: 'yum product' }, '1_1');
+    expect(elm.optinProduct).toHaveBeenCalledWith({ id: 'yum product' }, '1_1', undefined);
   });
 
   it('should optinProduct with product and set frequency', async () => {
@@ -57,6 +57,6 @@ describe('OptinToggle', () => {
     elm.setAttribute('product', 'yum product');
     elm.frequency = '3_3';
     await simulateClick(elm, 'button');
-    expect(elm.optinProduct).toHaveBeenCalledWith({ id: 'yum product' }, '3_3');
+    expect(elm.optinProduct).toHaveBeenCalledWith({ id: 'yum product' }, '3_3', undefined);
   });
 });

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

@@ -16,7 +16,7 @@ describe('OptoutButton', () => {
     elm.setAttribute('product', 'foo');
     elm.optoutProduct = jasmine.createSpy('optoutProduct');
     await simulateClick(elm, 'button');
-    expect(elm.optoutProduct).toHaveBeenCalledWith({ id: 'foo' });
+    expect(elm.optoutProduct).toHaveBeenCalledWith({ id: 'foo' }, undefined);
   });
 
   it('should have empty label if subscribed', async () => {

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

@@ -22,6 +22,7 @@ describe('Select Frequency', function() {
     `;
     element = document.querySelector('og-select-frequency');
     await element.updateComplete;
+    await new Promise(r => setTimeout(r, 1000));
   });
 
   it('it should have default frequency as value', async () => {

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

@@ -10,7 +10,7 @@ describe('SelectFrequency', () => {
     selectFrequency.productChangeFrequency = jasmine.createSpy('productChangeFrequency');
     selectFrequency.setAttribute('product', 'yum product');
     await simulateChange(selectFrequency, '2_1');
-    expect(selectFrequency.productChangeFrequency).toHaveBeenCalledWith({ id: 'yum product' }, '2_1');
+    expect(selectFrequency.productChangeFrequency).toHaveBeenCalledWith({ id: 'yum product' }, '2_1', undefined);
   });
 
   it('should append default-text to selected frequency', async () => {

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

@@ -1,11 +1,11 @@
 import { TestWizard } from '../TestWizard';
 import { simulateClick } from './utils';
-import { getStore } from '../../core/store';
+import { makeStore } from '../../core/store';
 
 customElements.define('og-test-wizard', TestWizard);
 
 describe('TestWizard', () => {
-  const store = getStore();
+  const store = makeStore();
   it('should run the tests when the button is clicked', async () => {
     const testWizard = new TestWizard();
     testWizard.runTests = jasmine.createSpy('runTests');

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

@@ -16,6 +16,7 @@ describe('Text', () => {
 
   it('should show the i18n text from locale matching the key', async () => {
     const offer = document.createElement('og-offer');
+    offer.fetchOffer = jasmine.createSpy();
     offer.locale = {
       foo: 'baz'
     };
@@ -26,6 +27,8 @@ describe('Text', () => {
     element.key = 'foo';
     offer.appendChild(element);
     await appendToBody(offer);
+    await offer.updateComplete;
+
     expect(element.innerText.trim()).toEqual('baz');
   });
 

package/src/core/__tests__/actions.spec.js

@@ -55,29 +55,29 @@ describe('redux actions', function() {
   it('optinProduct should return payload', () => {
     expect(optinProduct('foo', '1_2')).toEqual({
       type: 'OPTIN_PRODUCT',
-      payload: {
+      payload: jasmine.objectContaining({
         product: 'foo',
         frequency: '1_2'
-      }
+      })
     });
   });
 
   it('optoutProduct should return payload', () => {
     expect(optoutProduct('foo')).toEqual({
       type: 'OPTOUT_PRODUCT',
-      payload: {
+      payload: jasmine.objectContaining({
         product: 'foo'
-      }
+      })
     });
   });
 
   it('productChangeFrequency should return payload', () => {
     expect(productChangeFrequency('foo', 'freq')).toEqual({
       type: 'PRODUCT_CHANGE_FREQUENCY',
-      payload: {
+      payload: jasmine.objectContaining({
         product: 'foo',
         frequency: 'freq'
-      }
+      })
     });
   });
 

package/src/core/actions.js

@@ -1,15 +1,16 @@
 import { resolveAuth } from '@ordergroove/auth';
 import * as constants from './constants';
 import { api } from './api';
+import platform from '../platform';
 
-export const optinProduct = (product, frequency) => ({
+export const optinProduct = (product, frequency, offer) => ({
   type: constants.OPTIN_PRODUCT,
-  payload: { product, frequency }
+  payload: { product, frequency, offer }
 });
 
-export const optoutProduct = product => ({
+export const optoutProduct = (product, offer) => ({
   type: constants.OPTOUT_PRODUCT,
-  payload: { product }
+  payload: { product, offer }
 });
 
 export const productHasChangedComponents = (newProduct, product) => ({
@@ -17,9 +18,9 @@ export const productHasChangedComponents = (newProduct, product) => ({
   payload: { newProduct, product }
 });
 
-export const productChangeFrequency = (product, frequency) => ({
+export const productChangeFrequency = (product, frequency, offer) => ({
   type: constants.PRODUCT_CHANGE_FREQUENCY,
-  payload: { product, frequency }
+  payload: { product, frequency, offer }
 });
 
 export const concludeUpsell = product => ({
@@ -179,20 +180,21 @@ export const fetchResponseError = err => ({
   payload: err
 });
 
-export const requestOffer = (product, module = 'pdp') => ({
+export const requestOffer = (product, module = constants.DEFAULT_OFFER_MODULE, offer) => ({
   type: constants.REQUEST_OFFER,
-  payload: { product, module }
+  payload: { product, module, offer }
 });
 
-export const fetchOffer = (product, module = 'pdp') =>
+export const fetchOffer = (product, module = constants.DEFAULT_OFFER_MODULE, offer) =>
   function fetchOfferThunk(dispatch, getState) {
     const {
       merchantId,
       sessionId,
       environment: { apiUrl }
     } = getState();
-    const requestAction = requestOffer(product, module);
+    const requestAction = requestOffer(product, module, offer);
     dispatch(requestAction);
+    if (platform.shopify_selling_plans) return null;
     return api
       .fetchOffer(apiUrl, merchantId, sessionId, product, module)
       .then(

package/src/core/constants.js

@@ -37,3 +37,6 @@ 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';
+export const SETUP_PRODUCT = 'SETUP_PRODUCT';
+export const SETUP_CART = 'SETUP_CART';
+export const DEFAULT_OFFER_MODULE = 'pdp';

package/src/core/reducer.js

@@ -370,7 +370,6 @@ export const locale = (
 
 export const config = (
   state = {
-    frequencies: ['1_2', '1_2', '1_3'],
     offerType: 'radio'
   },
   action
@@ -454,29 +453,30 @@ export const productPlans = (state = {}, action) => {
 };
 
 export default combineReducers({
-  productPlans,
-  environment,
   optedin,
   optedout,
-  merchantId,
-  offer,
-  offerId,
-  productOffer,
-  sessionId,
+  nextUpcomingOrder,
+  autoshipEligible,
   inStock,
   eligibilityGroups,
-  autoshipByDefault,
-  autoshipEligible,
   incentives,
-  nextUpcomingOrder,
+  frequency,
   auth,
+  merchantId,
   authUrl,
+  offer,
+  offerId,
+  sessionId,
+  productOffer,
+  firstOrderPlaceDate,
+  productToSubscribe,
+  environment,
   locale,
   config,
   previewStandardOffer,
   previewUpsellOffer,
-  templates,
+  autoshipByDefault,
   defaultFrequencies,
-  firstOrderPlaceDate,
-  productToSubscribe
+  templates,
+  productPlans
 });

package/src/core/resolveProperties.js

@@ -93,22 +93,17 @@ export const withProduct = Base =>
 export const withChildOptions = Base =>
   class extends Base {
     get childOptions() {
-      return this._childOptions || { options: [] };
-    }
-
-    connectedCallback() {
       const options = [];
       let isSelected = null;
+
       this.querySelectorAll('option').forEach(it => {
         const value = sanitizeFrequencyString(it.value);
         const text = it.innerText.trim();
         options.push({ value, text });
-
         if (!isSelected && it.selected) {
           isSelected = value;
         }
       });
-      this._childOptions = { options, isSelected };
-      super.connectedCallback && super.connectedCallback();
+      return { options, isSelected };
     }
   };

package/src/core/selectors.js

@@ -133,9 +133,9 @@ export const kebabCase = string => {
  */
 export const configSelector = (state, element, key, defaultValue) => ({
   [key]:
+    (state.config && state.config[key]) ||
     (element && element.hasAttribute && element.hasAttribute(kebabCase(key)) && element[key]) ||
     (element.offer && typeof (element.offer[key] !== 'undefined') && element.offer[key]) ||
-    (state.config && state.config[key]) ||
     defaultValue
 });
 

package/src/core/store.js

@@ -1,10 +1,10 @@
 import { createStore, compose, applyMiddleware } from 'redux';
 import thunk from 'redux-thunk';
-import reducer from './reducer';
-import { loadState, saveState } from './localStorage';
+
+import { loadState } from './localStorage';
 import { dispatchMiddleware, localStorageMiddleware } from './middleware';
 
-export function getStore() {
+export function makeStore(reducer, ...extraMiddlewares) {
   if (window.og && window.og.store) return window.og.store;
 
   const isPreviewMode = window.og && window.og.previewMode;
@@ -19,11 +19,12 @@ export function getStore() {
       : compose;
 
   const middlewares = [thunk, dispatchMiddleware];
+
   if (!isPreviewMode) {
     middlewares.push(localStorageMiddleware);
   }
 
-  const enhancer = composeEnhancers(applyMiddleware(...middlewares));
+  const enhancer = composeEnhancers(applyMiddleware(...middlewares, ...extraMiddlewares));
   const store = createStore(reducer, isPreviewMode ? {} : loadState(), enhancer);
 
   window.og = window.og || {};
@@ -31,4 +32,4 @@ export function getStore() {
   return store;
 }
 
-export default getStore;
+export default makeStore;