@ordergroove/offers 2.27.16 → 2.27.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ordergroove/offers",
-  "version": "2.27.16",
+  "version": "2.27.17",
   "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.15"
   },
-  "gitHead": "9d55bfe3c5bac0e80acbe1d6bfdddc8ecf222842"
+  "gitHead": "982c709e906d0fe6f151bdd71d194363af85b60d"
 }

package/src/components/IncentiveText.js

@@ -107,9 +107,6 @@ export class IncentiveText extends withProduct(LitElement) {
   }
 
   renderFallback() {
-    const incentiveClass = this.from;
-    const incentiveValue = this.value;
-    const incentiveType = this.initial ? 'initial' : 'ongoing';
     return html`
       ${discountBuilder({
         field: 'sub_total',

package/src/components/Offer.js

@@ -250,7 +250,7 @@ export class Offer extends TemplateElement {
     }
     this.frequency = this.defaultFrequency;
 
-    if (changed.has('product') && this.product.id && !this.isPreview) {
+    if (changed.has('product') && !this.isPreview) {
       onReady(() => this.fetchOffer(this.product.id, DEFAULT_OFFER_MODULE, this));
     }
 

package/src/components/SelectFrequency.js

@@ -89,10 +89,17 @@ export class SelectFrequency extends withChildOptions(FrequencyStatus) {
     const defaultFrequency = this.defaultFrequency;
 
     if (this.frequencies?.length) {
-      options = this.frequencies.map((value, ix) => ({
-        value,
-        text: frequencyText(this.config.frequenciesEveryPeriod[ix], defaultFrequency)
-      }));
+      options = this.frequencies.map((value, ix) => {
+        let text;
+        if (this.config.frequenciesEveryPeriod && ix in this.config.frequenciesEveryPeriod) {
+          text = frequencyText(this.config.frequenciesEveryPeriod[ix], defaultFrequency);
+        } else if (this.frequenciesText && ix in this.frequenciesText) {
+          text = this.frequenciesText[ix];
+        } else {
+          text = frequencyText(value, this.defaultFrequency);
+        }
+        return { value, text };
+      });
     } else {
       ({ options } = this.childOptions);
     }

package/src/components/When.js

@@ -31,9 +31,8 @@ export class When extends withProduct(LitElement) {
   shouldUpdate(changedProperties) {
     return (
       changedProperties.size &&
-      this.product &&
-      this.product.id in this.state.autoshipEligible &&
-      this.product.id in this.state.inStock
+      ((this.product && this.product.id in this.state.autoshipEligible && this.product.id in this.state.inStock) ||
+        !this.product.id)
     );
   }
 }

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

@@ -1,4 +1,44 @@
 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));
+}
+
+const expectToBeVisible = offer => {
+  const { x, y, width, height } = offer.getClientRects()[0];
+  expect(height).toBeGreaterThan(30);
+};
+const expectNotToBeVisible = offer => {
+  const { x, y, width, height } = offer.getClientRects()[0];
+  expect(height).toBeLessThan(30);
+};
+const waitUpdate = async offer => {
+  await offer.updateComplete;
+  await new Promise(r => setTimeout(r, 10));
+};
+const mockOfferResponse = (productId, inStock = true, autoship = true) => {
+  return Promise.resolve({
+    json() {
+      return Promise.resolve({
+        in_stock: { [productId]: inStock },
+        eligibility_groups: { [productId]: ['subscription', 'upsell'] },
+        result: 'success',
+        autoship: { [productId]: autoship },
+        autoship_by_default: { [productId]: false },
+        modifiers: {},
+        module_view: { regular: '096135e6650111e9a444bc764e106cf4' },
+        incentives_display: {},
+        incentives: {
+          [productId]: { initial: [], ongoing: [] }
+        }
+      });
+    }
+  });
+};
+
 describe('og.offers', function() {
   it('should define og namespace', () => {
     expect(og).toEqual(jasmine.any(Object));
@@ -33,3 +73,141 @@ describe('og.offers', function() {
     expect(og.offers).toEqual(api);
   });
 });
+
+describe('Offer', function() {
+  let productIdNotInStock;
+  let productIdInStock;
+  let fetch;
+
+  beforeEach(async () => {
+    fetch = spyOn(window, 'fetch');
+    productIdNotInStock = `oos${Math.random()
+      .toString(36)
+      .substring(2, 10)}`;
+    productIdInStock = `s-${Math.random()
+      .toString(36)
+      .substring(2, 10)}`;
+  });
+
+  it('should show offer when instock and eligible', async () => {
+    fetch.and.returnValue(mockOfferResponse(productIdInStock, true, true));
+    document.body.innerHTML = `
+    <og-offer product="${productIdInStock}">
+      <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>
+    `;
+    const offer = document.querySelector('og-offer');
+    await waitUpdate(offer);
+    expect(fetch).toHaveBeenCalledTimes(1);
+    expectToBeVisible(document.querySelector('og-offer'));
+  });
+
+  it('should not show offer when not in stock', async () => {
+    fetch.and.returnValue(mockOfferResponse(productIdNotInStock, false, false));
+    document.body.innerHTML = `
+    <og-offer product="${productIdNotInStock}">
+      <og-when test="regularEligible">
+        <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-when>
+    </og-offer>
+    `;
+    const offer = document.querySelector('og-offer');
+    await waitUpdate(offer);
+    expect(fetch).toHaveBeenCalledTimes(1);
+    expectNotToBeVisible(document.querySelector('og-offer'));
+  });
+
+  it('should show hide offer based on variants in stock or oos', async () => {
+    fetch.and.returnValue(mockOfferResponse(productIdNotInStock, false, true));
+    document.body.innerHTML = `
+    <og-offer product="${productIdNotInStock}">
+      <og-when test="regularEligible">
+        <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-when>
+    </og-offer>
+    `;
+    const offer = document.querySelector('og-offer');
+
+    await waitUpdate(offer);
+    expect(fetch).toHaveBeenCalledTimes(1);
+    expectNotToBeVisible(offer);
+
+    fetch.and.returnValue(mockOfferResponse(productIdInStock, true, true));
+    offer.setAttribute('product', productIdInStock);
+    await waitUpdate(offer);
+    expect(fetch).toHaveBeenCalledTimes(2);
+    expectToBeVisible(offer);
+  });
+
+  it('should hide when no product id', async () => {
+    fetch.and.returnValue(mockOfferResponse(productIdInStock, true, true));
+    document.body.innerHTML = `
+    <og-offer product="${productIdInStock}">
+      <og-when test="regularEligible">
+        <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-when>
+    </og-offer>
+    `;
+    const offer = document.querySelector('og-offer');
+    await waitUpdate(offer);
+    expect(fetch).toHaveBeenCalledTimes(1);
+    expectToBeVisible(offer);
+
+    offer.removeAttribute('product');
+    await waitUpdate(offer);
+    expectNotToBeVisible(offer);
+  });
+
+  describe('Select Frequency', function() {
+    let element;
+    beforeEach(async () => {
+      fetch.and.returnValue(mockOfferResponse(productIdInStock));
+      document.body.innerHTML = `
+    <og-offer product="${productIdInStock}">
+      <og-select-frequency default-text=" (recomended)">
+        <option value="optedOut">Buy one time</option>
+        <option value="2_2" selected="selected">2 weeks</option>
+        <option value="1_3">1 month </option>
+      </og-select-frequency>
+    </og-offer>
+    `;
+      element = document.querySelector('og-select-frequency');
+      await element.updateComplete;
+      await new Promise(r => setTimeout(r, 10));
+      expect(fetch).toHaveBeenCalledTimes(1);
+    });
+
+    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

@@ -197,7 +197,7 @@ export const fetchOffer = (product, module = constants.DEFAULT_OFFER_MODULE, off
     dispatch(requestAction);
 
     const productId = safeProductId(product);
-
+    if (!productId) return null;
     return api
       .fetchOffer(apiUrl, merchantId, sessionId, productId, module)
       .then(

package/src/core/descriptors.js

@@ -31,7 +31,7 @@ export const upcomingOrderContainsProduct = (state, ownProps) =>
  */
 export const upsellEligible = (state, ownProps) =>
   // don't show IU in cart offers
-  !ownProps.offer.isCart &&
+  !ownProps.offer?.isCart &&
   state.offerId &&
   state.offerId !== '0' &&
   state.auth &&

package/src/core/reducer.js

@@ -111,6 +111,9 @@ export const autoshipEligible = (state = {}, action) => {
 
 export const inStock = (state = {}, action) => {
   switch (action.type) {
+    // force offer to refresh when requesting a new one
+    case constants.REQUEST_OFFER:
+      return { ...state };
     case constants.RECEIVE_OFFER:
       return {
         ...state,
@@ -383,6 +386,7 @@ export const config = (
         defaultFrequency: action.payload.defaultFrequency
           ? stringifyFrequency(action.payload.defaultFrequency)
           : state.defaultFrequency,
+        frequenciesEveryPeriod: [],
         frequencies: action.payload.frequencies ? action.payload.frequencies.map(stringifyFrequency) : state.frequencies
       };
     default:

package/src/core/utils.ts

@@ -36,6 +36,7 @@ export function resolveEnvAndMerchant() {
 }
 
 export const safeProductId = product => {
+  if (!product ) return '';
   let productId = `${product.id || product}`;
   if (platform?.shopify_selling_plans) {
     // we can't avoid make offer request since we need to know the upsell group and autoship by default

package/src/init-func-tests.js

@@ -2,3 +2,4 @@ window.OG_SAVE_TO_LOCAL_TIMEOUT = 1;
 window.merchantId = '12345678901234567890123456789012';
 window.env = 'staging';
 window.og.offers.initialize(window.merchantId, window.env, 0);
+localStorage.clear();

package/src/shopify/shopifyReducer.js

@@ -111,7 +111,8 @@ export function textToFreq(text) {
 export const config = (
   state = {
     frequencies: [],
-    offerType: 'radio'
+    offerType: 'radio',
+    frequenciesEveryPeriod: []
   },
   action
 ) => {
@@ -168,6 +169,10 @@ export const inStock = (state = {}, action) => {
 
     return [product, ...product?.variants]?.reduce(productOrVariantInStockReducer, state) || state;
   }
+  // force offer to refresh when requesting a new one
+  if (constants.REQUEST_OFFER === action.type && action.payload.product === null) {
+    return { ...state };
+  }
 
   return state;
 };

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

@@ -1,43 +0,0 @@
-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__/SelectFrequency.fspec.js

@@ -1,44 +0,0 @@
-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;
-    await new Promise(r => setTimeout(r, 1000));
-  });
-
-  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');
-  });
-});