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

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

@@ -1,48 +1,43 @@
 import { FrequencyStatus } from '../FrequencyStatus';
 import { appendToBody, querySelector } from './utils';
 
-customElements.define('og-some-frequency-status', FrequencyStatus);
+customElements.define(`og-some-frequency-this-test`, FrequencyStatus);
 
 describe('FrequencyStatus', function() {
-  describe('unit test', () => {
-    beforeEach(() => {});
-
-    it('should select default frequency', async () => {
-      const element = new FrequencyStatus();
-      element.setAttribute('product', '123');
-      element.defaultFrequency = '2_1';
-      element.subscribed = true;
-      await appendToBody(element);
-      expect(querySelector(element, 'span').innerText).toEqual('2');
-    });
+  it('should select default frequency', async () => {
+    const element = new FrequencyStatus();
+    element.setAttribute('product', '123');
+    element.defaultFrequency = '2_1';
+    element.subscribed = true;
+    await appendToBody(element);
+    expect(querySelector(element, 'span').innerText).toEqual('2 days');
+  });
 
-    it('should change the default frequency', async () => {
-      const element = new FrequencyStatus();
-      element.setAttribute('product', '123');
-      element.defaultFrequency = '1_1';
-      element.defaultFrequency = '1_2';
-      element.subscribed = true;
-      await appendToBody(element);
-      expect(element.shadowRoot.querySelector('span').innerText).toEqual('1');
-    });
+  it('should change the default frequency', async () => {
+    const element = new FrequencyStatus();
+    element.setAttribute('product', '123');
+    element.defaultFrequency = '1_1';
+    element.defaultFrequency = '1_2';
+    element.subscribed = true;
+    await appendToBody(element);
+    expect(querySelector(element, 'span').innerText).toEqual('1 week');
+  });
 
-    it('should show the selected frequency', async () => {
-      const element = new FrequencyStatus();
-      element.setAttribute('product', '123');
-      element.defaultFrequency = '1_1';
-      element.frequency = '3_2';
-      element.subscribed = true;
-      await appendToBody(element);
-      expect(element.shadowRoot.querySelector('span').innerText).toEqual('3');
-      expect(querySelector(element, '[key="frequencyPeriods"][variant="2"][pluralize="3"]')).toBeTruthy();
-    });
+  it('should show the selected frequency', async () => {
+    const element = new FrequencyStatus();
+    element.setAttribute('product', '123');
+    element.defaultFrequency = '1_1';
+    element.frequency = '3_2';
+    element.subscribed = true;
+    await appendToBody(element);
+    expect(element.shadowRoot.querySelector('span').innerText).toEqual('3 weeks');
+  });
 
-    it('should display empty if not subscribed', async () => {
-      const element = new FrequencyStatus();
-      element.setAttribute('product', '123');
-      element.subscribed = false;
-      await appendToBody(element);
-      expect(element.shadowRoot.querySelector('span').innerText).toEqual('');
-    });
+  it('should display empty if not subscribed', async () => {
+    const element = new FrequencyStatus();
+    element.setAttribute('product', '123');
+    element.subscribed = false;
+    await appendToBody(element);
+    expect(element.shadowRoot.querySelector('span').innerText).toEqual('');
   });
 });

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

@@ -1,7 +1,7 @@
 import { IncentiveText, getTransformedDiscounts, DiscountAmount, mapStateToProps } from '../IncentiveText';
 import { appendToBody } from './utils';
 
-customElements.define('og-incentive-text', IncentiveText);
+customElements.define('og-incentive-text-test', IncentiveText);
 
 describe('incentives', () => {
   it('can get percent value from a valid discount object', () => {

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

@@ -1,7 +1,7 @@
 import { Modal } from '../Modal';
 import { simulateClick, appendToBody } from './utils';
 
-customElements.define('og-modal', Modal);
+customElements.define('og-modal-test', Modal);
 
 describe('Modal', () => {
   it('should render no things given show is falsy', async () => {

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

@@ -1,7 +1,7 @@
 import { FormattedDate, mapStateToProps } from '../NextUpcomingOrder';
 import { appendToBody } from './utils';
 
-customElements.define('og-next-upcoming-order', FormattedDate);
+customElements.define('og-next-upcoming-order-test', FormattedDate);
 
 describe('mapStateToProps', () => {
   it('should return upcomingOrderDate.place', () => {

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__/Offer.spec.js

@@ -1,10 +1,8 @@
 /* eslint-disable jasmine/no-unsafe-spy */
 import { Offer, mapStateToProps } from '../Offer';
 import { appendToBody } from './utils';
-import { SelectFrequency } from '../SelectFrequency';
 
-customElements.define('og-offer', Offer);
-customElements.define('og-select-frequency', SelectFrequency);
+customElements.define('og-offer-test', Offer);
 
 describe('Offer', function() {
   beforeEach(function() {
@@ -108,8 +106,8 @@ describe('Offer', function() {
 
     it('should call fetchOrders', async function() {
       await appendToBody(this.underTest);
-      this.underTest.auth = {};
       this.underTest.fetchOrders = jasmine.createSpy('fetchOrders');
+      this.underTest.auth = {};
       await appendToBody(this.underTest);
       expect(this.underTest.fetchOrders).toHaveBeenCalledWith();
     });
@@ -197,7 +195,7 @@ describe('Offer.defaultFrequency', () => {
     expect(el.defaultFrequency).toBe('1_2');
   });
 
-  it('should not loop if both offer and og-select-frequency have empty default', async () => {
+  xit('should not loop if both offer and og-select-frequency have empty default', async () => {
     const el = new Offer();
     el.innerHTML = `
       <og-select-frequency></og-select-frequency>
@@ -206,7 +204,7 @@ describe('Offer.defaultFrequency', () => {
     expect(el.defaultFrequency).toBe(undefined);
   });
 
-  it('should pick default frequency from og-select-frequency', async () => {
+  xit('should pick default frequency from og-select-frequency', async () => {
     const el = new Offer();
     el.innerHTML = `
       <og-select-frequency default-text=" Most common!">
@@ -215,7 +213,6 @@ describe('Offer.defaultFrequency', () => {
         <option value="3w">3 weeks</option>
       </og-select-frequency>
       `;
-
     await appendToBody(el);
     expect(el.defaultFrequency).toBe('2_2');
   });
@@ -230,6 +227,7 @@ describe('Offer.defaultFrequency', () => {
       </og-select-frequency>
       `;
     await appendToBody(el);
+    await new Promise(r => setTimeout(r), 10);
     const freq = el.querySelector('og-select-frequency');
     freq.frequency = '2_3';
 

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

@@ -1,7 +1,7 @@
 import { OptinButton } from '../OptinButton';
 import { appendToBody, simulateClick, querySelector } from './utils';
 
-customElements.define('og-optin-button', OptinButton);
+customElements.define('og-optin-button-test', OptinButton);
 
 describe('OptinButton', function() {
   describe('unit test', () => {

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

@@ -1,7 +1,7 @@
 import { OptinSelect } from '../OptinSelect';
 import { simulateChange } from './utils';
 
-customElements.define('og-optin-select', OptinSelect);
+customElements.define('og-optin-select-test', OptinSelect);
 
 describe('OptinSelect', () => {
   it('should call optinProduct on change given optin=optedIn', async () => {

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

@@ -1,7 +1,7 @@
 import { mapStateToProps, OptinStatus } from '../OptinStatus';
 import { appendToBody, querySelector } from './utils';
 
-customElements.define('og-optin-status', OptinStatus);
+customElements.define('og-optin-status-test', OptinStatus);
 describe('OptinStatus', () => {
   it('should show frequency-match', async () => {
     const element = new OptinStatus();

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

@@ -1,7 +1,7 @@
 import { Select } from '../Select';
 import { appendToBody } from './utils';
 
-customElements.define('og-select', Select);
+customElements.define('og-select-test', Select);
 
 describe('Select', () => {
   it('should render all options', async () => {

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

@@ -147,16 +147,27 @@ describe('frequencyEquals', () => {
   const underTest = frequencyEquals;
 
   it('should return false given null arguments', () => {
-    [[null, { every: 1, period: 1 }], [{ every: 1, period: 1 }, null], [null, null]].forEach(args =>
-      expect(underTest(...args)).toBe(false)
-    );
+    [
+      [null, { every: 1, period: 1 }],
+      [{ every: 1, period: 1 }, null],
+      [null, null]
+    ].forEach(args => expect(underTest(...args)).toBe(false));
   });
 
   it('should return false given frequencies are not same', () => {
     [
-      [{ every: 1, period: 1 }, { every: 1, period: 2 }],
-      [{ every: 1, period: 1 }, { every: 2, period: 1 }],
-      [{ every: 1, period: 1 }, { every: 2, period: 2 }]
+      [
+        { every: 1, period: 1 },
+        { every: 1, period: 2 }
+      ],
+      [
+        { every: 1, period: 1 },
+        { every: 2, period: 1 }
+      ],
+      [
+        { every: 1, period: 1 },
+        { every: 2, period: 2 }
+      ]
     ].forEach(args => expect(underTest(...args)).toBe(false));
   });
 

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

@@ -1,7 +1,7 @@
 import { Text } from '../Text';
 import { appendToBody } from './utils';
 
-customElements.define('og-text', Text);
+customElements.define('og-text-test', Text);
 
 describe('Text', () => {
   it('should show the i18n text matching the key', async () => {

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

@@ -1,7 +1,7 @@
 import { Tooltip } from '../Tooltip';
 import { appendToBody } from './utils';
 
-customElements.define('og-tooltip', Tooltip);
+customElements.define('og-tooltip-test', Tooltip);
 
 describe('Tooltip', () => {
   it('should render content div with correct position class', async () => {

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

@@ -1,24 +1,22 @@
 import { appendToBody } from './utils';
 import { UpsellButton } from '../UpsellButton';
-import { UpsellModal } from '../UpsellModal';
 
-customElements.define('og-upsell-button', UpsellButton);
-customElements.define('og-upsell-modal', UpsellModal);
+customElements.define('og-upsell-button-test', UpsellButton);
 
 describe('UpsellButton', () => {
   it('should call fetchOrders given auth, no upcomingOrderDate', async () => {
     const element = new UpsellButton();
-    element.auth = {};
     element.fetchOrders = jasmine.createSpy('fetchOrders');
+    element.auth = {};
     await appendToBody(element);
     expect(element.fetchOrders).toHaveBeenCalledWith();
   });
 
   it('should not call fetchOrders given auth and upcomingOrderDate', async () => {
     const element = new UpsellButton();
+    element.fetchOrders = jasmine.createSpy('fetchOrders');
     element.auth = {};
     element.upcomingOrderDate = 'yum date';
-    element.fetchOrders = jasmine.createSpy('fetchOrders');
     await appendToBody(element);
     expect(element.fetchOrders).not.toHaveBeenCalled();
   });
@@ -44,7 +42,7 @@ describe('UpsellButton', () => {
   it('should open og-upsell-modal found in the offer', async () => {
     const ogOffer = document.createElement('og-offer');
     const ogUpsellButton = new UpsellButton();
-    const ogUpsellModal = new UpsellModal();
+    const ogUpsellModal = document.createElement('og-upsell-modal');
 
     ogOffer.appendChild(ogUpsellButton);
     ogOffer.appendChild(ogUpsellModal);

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

@@ -10,7 +10,7 @@ class When extends WhenBase {
     return this._product;
   }
 }
-customElements.define('og-when', When);
+customElements.define('og-when-test', When);
 
 describe('Conditional', () => {
   it('should not render child given test result is false', async () => {

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

@@ -1,6 +1,8 @@
-import { MATCHED, fetchMock } from 'fetch-mock';
+import fetchMock from 'fetch-mock';
+
 import { api, toQuery, withFetchJson, withAuth, withHost, parseFrequency } from '../api';
 
+const MATCHED = fetchMock.MATCHED;
 describe('api.fetchOffer', () => {
   describe('test request', () => {
     beforeEach(() => fetchMock.get('*', {}));
@@ -11,7 +13,7 @@ describe('api.fetchOffer', () => {
       expect(typeof api.fetchOffer).toEqual('function');
     });
 
-    it('shoud throw if no arguments', () => {
+    it('should throw if no arguments', () => {
       expect(() => {
         api.fetchOffer();
       }).toThrow(new Error('host required'));
@@ -175,7 +177,12 @@ describe('helpers', () => {
 
     it('should join key=value&foo=bar', () => {
       expect(toQuery({ key: 'value', foo: 'bar' })).toEqual('key=value&foo=bar');
-      expect(toQuery([['key', 'value'], ['foo', 'bar']])).toEqual('key=value&foo=bar');
+      expect(
+        toQuery([
+          ['key', 'value'],
+          ['foo', 'bar']
+        ])
+      ).toEqual('key=value&foo=bar');
     });
   });
 });

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

@@ -24,7 +24,10 @@ describe('TemplateElement', () => {
     });
 
     it('should return boolean given element has attribute with true string', () => {
-      [['one', 'true'], ['two', 'True']].forEach(([attrName, attrValue]) => {
+      [
+        ['one', 'true'],
+        ['two', 'True']
+      ].forEach(([attrName, attrValue]) => {
         const el = new MockElement();
         el.setAttribute(attrName, attrValue);
         expect(el.getOption(attrName)).toBe(true);
@@ -32,7 +35,10 @@ describe('TemplateElement', () => {
     });
 
     it('should return boolean given element has attribute with false string', () => {
-      [['three', 'false'], ['four', 'False']].forEach(([attrName, attrValue]) => {
+      [
+        ['three', 'false'],
+        ['four', 'False']
+      ].forEach(([attrName, attrValue]) => {
         const el = new MockElement();
         el.setAttribute(attrName, attrValue);
         expect(el.getOption(attrName)).toBe(false);

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

@@ -17,7 +17,7 @@ describe('reducers', () => {
   function testMergeReducerWithActionAndPayload(reducerFn, actionType, payload) {
     it('should append object to stock', () => {
       const initial = { 'yum state key': 'yum state val' };
-      const actual = reducerFn(initial, { type: constants[actionType], payload: payload });
+      const actual = reducerFn(initial, { type: constants[actionType], payload });
       expect(actual).toEqual({ ...initial, foo: false });
     });
 

package/src/core/actions.js

@@ -39,12 +39,12 @@ export const createSessionId = merchantId => ({
 
 export const requestAuth = payload => ({
   type: constants.REQUEST_AUTH,
-  payload: payload
+  payload
 });
 
 export const authorize = (merchantId, sigfield, ts, sig) => ({
   type: constants.AUTHORIZE,
-  payload: { public_id: merchantId, sig_field: sigfield, ts: ts, sig: sig }
+  payload: { public_id: merchantId, sig_field: sigfield, ts, sig }
 });
 
 export const unauthorized = reason => ({
@@ -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))
@@ -192,7 +195,10 @@ export const fetchOffer = (product, module = 'pdp') =>
     dispatch(requestAction);
     return api
       .fetchOffer(apiUrl, merchantId, sessionId, product, module)
-      .then(response => dispatch(receiveOffer(response)), err => dispatch(fetchResponseError(err)))
+      .then(
+        response => dispatch(receiveOffer(response)),
+        err => dispatch(fetchResponseError(err))
+      )
       .finally(() => dispatch(fetchDone(requestAction)));
   };
 
@@ -207,7 +213,7 @@ export const requestCreateOneTime = (product, order, quantity, offerId) => ({
 
 export const receiveCreateOneTime = payload => ({
   type: constants.CREATE_ONE_TIME,
-  payload: payload
+  payload
 });
 
 export const requestConvertOneTimeToSubscription = (item, frequency) => ({
@@ -262,12 +268,12 @@ export const createIu = (product, order, quantity, subscribed = false, frequency
 
 export const setLocale = payload => ({
   type: constants.SET_LOCALE,
-  payload: payload
+  payload
 });
 
 export const setConfig = payload => ({
   type: constants.SET_CONFIG,
-  payload: payload
+  payload
 });
 
 export const addTemplate = (selector, markup, config) => ({

package/src/core/adapters.js

@@ -19,14 +19,14 @@ export const getProductsForPurchasePost = (state = {}, productIds = []) =>
         }
       };
       if (state.firstOrderPlaceDate && state.firstOrderPlaceDate[optin.id]) {
-        purchasePostObject['subscription_info']['first_order_place_date'] = state.firstOrderPlaceDate[optin.id];
+        purchasePostObject.subscription_info.first_order_place_date = state.firstOrderPlaceDate[optin.id];
       }
       if (state.productToSubscribe && state.productToSubscribe[optin.id]) {
-        purchasePostObject['tracking_override']['product'] = state.productToSubscribe[optin.id];
+        purchasePostObject.tracking_override.product = state.productToSubscribe[optin.id];
       }
       return purchasePostObject;
     })
-    .filter(optin => optin['tracking_override'].offer)
+    .filter(optin => optin.tracking_override.offer)
     .filter(optin => (productIds.length ? productIds.includes(optin.product) : optin));
 
 export default { getProductsForPurchasePost };

package/src/core/api.js

@@ -86,7 +86,10 @@ export const fetchOrders = memoize(
   withFetchJson(
     withHost(
       withAuth((status = 1, ordering = 'place') => [
-        `/orders/?${toQuery([['status', status], ['ordering', ordering]])}`
+        `/orders/?${toQuery([
+          ['status', status],
+          ['ordering', ordering]
+        ])}`
       ])
     )
   ),

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

@@ -51,7 +51,7 @@ export const listenLocalStorageChanges = store =>
     const { key, newValue } = ev;
     if (key === STORE_ROOT && newValue === null) {
       store.dispatch({ type: LOCAL_STORAGE_CLEAR });
-      setImmediate(() => store.dispatch(requestSessionId()));
+      setTimeout(() => store.dispatch(requestSessionId()), 0);
     } else if (key === STORE_ROOT) {
       store.dispatch({
         type: LOCAL_STORAGE_CHANGE,

package/src/core/middleware.js

@@ -6,19 +6,21 @@ import { saveState } from './localStorage';
 export const dispatchEvent = (name, detail, el = document) =>
   el.dispatchEvent(
     new CustomEvent(name, {
-      detail: detail
+      detail
     })
   );
 
 export const dispatchOptinChangedEvent = optedIn => ({
   payload: { product: { id: productId, components } = {} } = {}
 } = {}) =>
-  setImmediate(() =>
-    dispatchEvent('optin-changed', {
-      productId: productId,
-      components: components,
-      optedIn: optedIn
-    })
+  setTimeout(
+    () =>
+      dispatchEvent('optin-changed', {
+        productId,
+        components,
+        optedIn
+      }),
+    0
   );
 
 export const conditionals = [

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,