@ordergroove/offers 2.27.14 → 2.27.15-alpha-PR-654-7.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ordergroove/offers",
-  "version": "2.27.14",
+  "version": "2.27.15-alpha-PR-654-7.6+a8f4a9ff",
   "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": "087e5b417f9d3468b05a89ae4f0a5dd4d10115ca"
+  "gitHead": "a8f4a9ffa12e4f7162f40d9f01dc9081de3ad6fe"
 }

package/src/components/Offer.js

@@ -248,7 +248,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/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-preview.js

@@ -1,7 +1,7 @@
 import { receiveOffer, receiveOrders, authorize, unauthorized, optinProduct, optoutProduct } from './actions';
 import * as constants from './constants';
 
-export const setPreviewStandardOffer = (isPreview, productId) =>
+export const setPreviewStandardOffer = (isPreview, productId, offer) =>
   async function setPreviewStandardOfferThunk(dispatch) {
     await dispatch({
       type: constants.SET_PREVIEW_STANDARD_OFFER,
@@ -11,69 +11,77 @@ export const setPreviewStandardOffer = (isPreview, productId) =>
       type: constants.UNAUTHORIZED
     });
     await dispatch(
-      receiveOffer({
-        in_stock: { [productId]: true },
-        eligibility_groups: { [productId]: ['subscription', 'upsell'] },
-        result: 'success',
-        autoship: { [productId]: true },
-        modifiers: {},
-        module_view: { regular: '096135e6650111e9a444bc764e106cf4' },
-        incentives_display: {
-          '47c01e9aacbe40389b5c7325d79091aa': {
-            field: 'sub_total',
-            object: 'order',
-            type: 'Discount Percent',
-            value: 5
-          },
-          e6534b9d877f41e586c37b7d8abc3a58: {
-            field: 'total_price',
-            object: 'item',
-            type: 'Discount Percent',
-            value: 10
-          },
-          f35e842710b24929922db4a529eecd40: {
-            field: 'total_price',
-            object: 'item',
-            type: 'Discount Percent',
-            value: 10
+      receiveOffer(
+        {
+          in_stock: { [productId]: true },
+          eligibility_groups: { [productId]: ['subscription', 'upsell'] },
+          result: 'success',
+          autoship: { [productId]: true },
+          autoship_by_default: { [productId]: false },
+          modifiers: {},
+          module_view: { regular: '096135e6650111e9a444bc764e106cf4' },
+          incentives_display: {
+            '47c01e9aacbe40389b5c7325d79091aa': {
+              field: 'sub_total',
+              object: 'order',
+              type: 'Discount Percent',
+              value: 5
+            },
+            e6534b9d877f41e586c37b7d8abc3a58: {
+              field: 'total_price',
+              object: 'item',
+              type: 'Discount Percent',
+              value: 10
+            },
+            f35e842710b24929922db4a529eecd40: {
+              field: 'total_price',
+              object: 'item',
+              type: 'Discount Percent',
+              value: 10
+            },
+            '5be321d7c17f4e18a757212b9a20bfcc': {
+              field: 'total_price',
+              object: 'item',
+              type: 'Discount Percent',
+              value: 1
+            }
           },
-          '5be321d7c17f4e18a757212b9a20bfcc': {
-            field: 'total_price',
-            object: 'item',
-            type: 'Discount Percent',
-            value: 1
+          incentives: {
+            [productId]: {
+              initial: ['5be321d7c17f4e18a757212b9a20bfcc'],
+              ongoing: [
+                'e6534b9d877f41e586c37b7d8abc3a58',
+                '47c01e9aacbe40389b5c7325d79091aa',
+                'f35e842710b24929922db4a529eecd40'
+              ]
+            }
           }
         },
-        incentives: {
-          [productId]: {
-            initial: ['5be321d7c17f4e18a757212b9a20bfcc'],
-            ongoing: [
-              'e6534b9d877f41e586c37b7d8abc3a58',
-              '47c01e9aacbe40389b5c7325d79091aa',
-              'f35e842710b24929922db4a529eecd40'
-            ]
-          }
-        }
-      })
+        offer
+      )
     );
   };
 
-export const setPreviewUpsellOffer = (isPreview, productId) =>
+export const setPreviewUpsellOffer = (isPreview, productId, offer) =>
   async function setPreviewUpsellOfferThunk(dispatch, getState) {
     await dispatch({ type: constants.SET_PREVIEW_UPSELL_OFFER, payload: isPreview });
 
     const { merchantId } = getState();
     if (isPreview) {
       await dispatch(
-        receiveOffer({
-          in_stock: { [productId]: true },
-          module_view: { regular: '096135e6650111e9a444bc764e106cf4' },
-          default_frequencies: { [productId]: { every: 1, every_period: 3 } },
-          eligibility_groups: { [productId]: ['subscription', 'upsell'] },
-          result: 'success',
-          autoship: { [productId]: true },
-          modifiers: {}
-        })
+        receiveOffer(
+          {
+            in_stock: { [productId]: true },
+            module_view: { regular: '096135e6650111e9a444bc764e106cf4' },
+            default_frequencies: { [productId]: { every: 1, every_period: 3 } },
+            eligibility_groups: { [productId]: ['subscription', 'upsell'] },
+            result: 'success',
+            autoship: { [productId]: true },
+            autoship_by_default: { [productId]: false },
+            modifiers: {}
+          },
+          offer
+        )
       );
       await dispatch(
         receiveOrders({
@@ -114,7 +122,7 @@ export const setPreviewUpsellOffer = (isPreview, productId) =>
     }
   };
 
-export const setPreview = (value, oldValue, ownProps) =>
+export const setPreview = (value, oldValue, offer) =>
   async function(dispatch, getState) {
     await dispatch({ type: constants.LOCAL_STORAGE_CLEAR });
     await dispatch({
@@ -128,14 +136,14 @@ export const setPreview = (value, oldValue, ownProps) =>
 
     switch (value) {
       case 'regular':
-        dispatch(setPreviewStandardOffer(true, ownProps.product.id));
+        dispatch(setPreviewStandardOffer(true, offer.product.id, offer));
         break;
       case 'upsell':
-        dispatch(setPreviewUpsellOffer(true, ownProps.product.id));
+        dispatch(setPreviewUpsellOffer(true, offer.product.id, offer));
         break;
       case 'subscribed':
-        dispatch(setPreviewStandardOffer(true, ownProps.product.id));
-        dispatch(optinProduct(ownProps.product, '2_2'));
+        dispatch(setPreviewStandardOffer(true, offer.product.id, offer));
+        dispatch(optinProduct(offer.product, '2_2'));
         break;
       default:
     }

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,

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

@@ -168,6 +168,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');
-  });
-});