@ordergroove/offers 2.27.15 → 2.27.17

package/examples/index.js

@@ -68,11 +68,13 @@ const exampleTemplates = [
     'Offers example',
     {
       name: 'empty',
-      selector: 'og-offer:not([location])'
+      selector: 'og-offer:not([location])',
+      id: '1'
     },
     {
       name: 'built-in',
       selector: 'og-offer[location="initial"]',
+      id: '2',
       config: {
         settings: {
           ...settings,
@@ -84,6 +86,7 @@ const exampleTemplates = [
     {
       name: 'checkbox',
       selector: 'og-offer[location="initial-checkbox"]',
+      id: '3',
       config: {
         settings: {
           ...settings,
@@ -97,6 +100,7 @@ const exampleTemplates = [
     {
       name: 'select',
       selector: 'og-offer[location="initial-select"]',
+      id: '4',
       config: {
         settings: {
           ...settings,
@@ -108,6 +112,7 @@ const exampleTemplates = [
     {
       name: 'cart',
       selector: 'og-offer[location="cart"]',
+      id: '5',
       defaultPreviewMode: 'subscribed',
       config: {
         settings: {
@@ -120,6 +125,7 @@ const exampleTemplates = [
     {
       name: 'side-by-side',
       selector: 'og-offer[location="side-by-side"]',
+      id: '6',
       config: {
         settings: {
           ...settings,
@@ -135,6 +141,7 @@ const exampleTemplates = [
     {
       name: 'read-only',
       selector: 'og-offer[location="read-only"]',
+      id: '7',
       defaultPreviewMode: 'subscribed',
       config: {
         settings: {
@@ -151,6 +158,7 @@ const exampleTemplates = [
     {
       name: 'buttons',
       selector: 'og-offer[location="buttons"]',
+      id: '8',
       config: {
         settings: {
           ...settings,
@@ -167,6 +175,7 @@ const exampleTemplates = [
     {
       name: 'first-test',
       selector: 'og-offer[location="first-test"]',
+      id: '9',
       config: {
         settings: {
           ...settings,
@@ -181,6 +190,7 @@ const exampleTemplates = [
     {
       name: 'second-test no tooltip',
       selector: 'og-offer[location="second-test"]',
+      id: '10',
       config: {
         settings: {
           ...settings,
@@ -196,6 +206,7 @@ const exampleTemplates = [
     {
       name: 'Select mode',
       selector: 'og-offer[location="select1"]',
+      id: '11',
       markup: `
 <og-optin-select>
 <option value="optedOut">Buy one time</option>
@@ -206,6 +217,7 @@ const exampleTemplates = [
     {
       name: 'Custom markup',
       selector: 'og-offer[location="custom1"]',
+      id: '12',
       markup: `
 <og-when test="regularEligible">
 <p>
@@ -259,6 +271,7 @@ Add item to order on
       name: 'Upsell modal - radio',
       defaultPreviewMode: 'upsell',
       selector: 'og-offer[location="upsell-radio"]',
+      id: '13',
       markup: `
 <og-when test="upsellEligible">
 <og-upsell-button target="#upsell-radio">
@@ -283,6 +296,7 @@ Add item to order on
       name: 'Upsell modal - select',
       defaultPreviewMode: 'upsell',
       selector: 'og-offer[location="upsell-select"]',
+      id: '14',
       markup: `
 <og-when test="upsellEligible">
 <og-upsell-button target="#upsell-select">
@@ -297,6 +311,7 @@ Add item to order on
       name: 'Upsell modal - toggle',
       defaultPreviewMode: 'upsell',
       selector: 'og-offer[location="upsell-toggle"]',
+      id: '15',
       markup: `
 <og-when test="upsellEligible">
 <og-upsell-button target="#upsell-toggle">
@@ -315,6 +330,7 @@ Add item to order on
     {
       name: 'Product-specific default frequencies',
       selector: 'og-offer[location="psdf"]',
+      id: '16',
       markup: `
 <og-when test="regularEligible">
   <og-select-frequency default-text=" Most common!">
@@ -331,6 +347,7 @@ Add item to order on
     {
       name: 'og-optin-button',
       selector: 'og-offer[location=og-optin-button]',
+      id: '17',
       markup: `
 <og-optin-button>
   I want to subscribe to this product
@@ -340,6 +357,7 @@ Add item to order on
     {
       name: 'Frequency Status',
       selector: 'og-offer[location="frequency"]',
+      id: '18',
       markup: `
 <og-frequency-status>
   <span slot="not-subscribed">you are not subscribed </span>
@@ -348,6 +366,7 @@ Add item to order on
     {
       name: 'Tooltip',
       selector: 'og-offer[location="tooltip-placement"]',
+      id: '19',
       markup: [
         ['top-left', 'top', 'top-right'],
         ['left', '', 'right'],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ordergroove/offers",
-  "version": "2.27.15",
+  "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": "9ec6370c33f9ac82e46d35f1085e759c8b686a67"
+  "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

@@ -54,7 +54,8 @@ export class Offer extends TemplateElement {
       frequency: { type: String, reflect: true },
       productFrequency: { type: String },
       isCart: { type: Boolean, attribute: 'cart' },
-      optedin: { type: Object }
+      optedin: { type: Object },
+      variationId: { type: String }
     };
   }
 
@@ -236,7 +237,8 @@ export class Offer extends TemplateElement {
 
   applyTemplate(template) {
     super.applyTemplate(template);
-    const { locale } = template;
+    const { id: variationId, locale } = template;
+    this.variationId = variationId;
     this.locale = locale;
     const event = new CustomEvent('template-changed');
     this.dispatchEvent(event);
@@ -248,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/shopifyMiddleware.ts

@@ -227,13 +227,27 @@ export async function synchronizeCartOptin(action: any, store: any) {
 /**
  * Returns a tracking event adhering to the below format:
  *
- * og__<ts in seconds>: "<product_id>,<action>,<location>,<selling_plan optional>"
+ * og__<ts in seconds>: "<product_id>,<action>,<location>,<selling_plan optional>,<variation_id optional>"
  *
  * Examples:
- * og__165653130: "offer_show,pdp,123456789"
- * og__165653137: "optin,pdp,123,456"
- * og__165653138: "optout,pdp,123,"
- * og__165653139: "optin,cart,123,456",
+ *
+ *   - optin_product with selling plan ID 123 and variation ID 456:
+ *     og__165653130: "optin_product,pdp,123,456"
+ *
+ *   - optin_product with no selling plan and variation ID 456:
+ *     og__165653137: "optin_product,pdp,,456"
+ *
+ *   - optin_product with selling plan ID 123 and no variation ID:
+ *     og__165653139: "optin_product,pdp,123,"
+ *
+ *   - optin_product with no selling plan and no variation ID:
+ *     og__165653141: "optin_product,pdp,,"
+ *
+ *   - optout_product with variation id 456:
+ *     og__165653135: "optout_product,pdp,,456"
+ *
+ *   - product_change_frequency with selling plan ID 123 and variation ID 456:
+ *     og__165653131: "product_change_frequency,pdp,123,456"
  *
  * @param  action a Redux action
  * @return {Array} an array with positional values key, value
@@ -243,16 +257,19 @@ export function getTrackingEvent(action): Array<string> {
   if (!product_id) return [];
   const key = `og__${Math.ceil(new Date().getTime() / 1000)}`;
   const location = action.payload.offer?.location || '';
+  const variation = action.payload.offer?.variationId || '';
   const value = [product_id, action.type.toLowerCase(), location];
 
   switch (action.type) {
     case REQUEST_OFFER:
     case OPTOUT_PRODUCT:
-      value.push('');
+      value.push(''); // No selling plan should be associated with these actions
+      value.push(variation);
       break;
     case OPTIN_PRODUCT:
     case PRODUCT_CHANGE_FREQUENCY:
       value.push(action.payload.frequency);
+      value.push(variation);
       break;
     default:
       return []; // we dont track anything else

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');
-  });
-});