@ordergroove/offers 2.28.7-alpha-PR-690-14.11 → 2.28.7

package/examples/index.html

@@ -76,8 +76,6 @@
         --og-tooltip-size: 10px;
         --og-tooltip-color: rgba(245, 166, 35, 1);
 
-        --og-checkbox-border-color: #000000;
-
         --og-upsell-background: rgba(202, 25, 148, 1);
         --og-upsell-family: Arial, Helvetica, sans-serif;
         --og-upsell-size: 13px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ordergroove/offers",
-  "version": "2.28.7-alpha-PR-690-14.11+6ec39a1d",
+  "version": "2.28.7",
   "description": "offer state component",
   "author": "Eugenio Lattanzio <eugenio63@gmail.com>",
   "homepage": "https://github.com/ordergroove/plush-toys#readme",
@@ -47,5 +47,5 @@
   "devDependencies": {
     "@ordergroove/offers-templates": "^0.4.19"
   },
-  "gitHead": "6ec39a1d1a4cd1426566006c5be41be68b030978"
+  "gitHead": "20dc90b04c6796d7374cde6375228faf3a8108e1"
 }

package/src/components/OptinStatus.js

@@ -53,12 +53,6 @@ export class OptinStatus extends withProduct(TemplateElement) {
       .checkbox {
         border-radius: 3px;
       }
-
-      .radio,
-      .checkbox {
-        border-color: var(--og-checkbox-border-color, black);
-      }
-
       .checkbox.active::after,
       .radio.active::after {
         position: absolute;
@@ -67,12 +61,12 @@ export class OptinStatus extends withProduct(TemplateElement) {
         width: 100%;
         height: 100%;
         box-sizing: border-box;
-        background: var(--og-checkbox-border-color, black);
       }
 
       .radio.active::after {
         content: ' ';
         border-radius: 100%;
+        background: var(--og-primary-color, var(--og-radio-background-color, black));
         border: 2px solid #fff;
       }
 
@@ -81,6 +75,7 @@ export class OptinStatus extends withProduct(TemplateElement) {
         border-radius: 0;
         background: #fff;
         content: '\\2714';
+        color: var(--og-primary-color, var(--og-checkbox-color, black));
         line-height: 1;
         text-align: center;
         overflow: visible;

package/src/components/OptinToggle.js

@@ -25,7 +25,7 @@ export class OptinToggle extends OptinStatus {
         height: var(--og-radio-height, 1.4em);
         margin: var(--og-radio-margin, 0);
         padding: 0;
-        border: 1px solid var(--og-checkbox-border-color, black);
+        border: 1px solid var(--og-primary-color, black);
         background: #fff;
         vertical-align: middle;
         color: var(--og-primary-color, black);
@@ -36,7 +36,7 @@ export class OptinToggle extends OptinStatus {
       }
 
       .btn.active {
-        background: var(--og-checkbox-border-color, black);
+        background: #090909;
       }
 
       .btn.active:after {

package/src/shopify/__tests__/shopifyMiddleware.spec.js

@@ -1,6 +1,7 @@
 import fetchMock from 'fetch-mock';
 import { CART_UPDATED_EVENT, OPTIN_PRODUCT, SETUP_CART } from '../../core/constants';
-import { getOrCreateHidden, synchronizeCartOptin } from '../shopifyMiddleware';
+import { synchronizeCartOptin, getTrackingEvent } from '../shopifyMiddleware';
+import { getOrCreateHidden } from '../../core/utils';
 
 function makeForm(addInput = true) {
   const element = document.createElement('form');
@@ -43,6 +44,46 @@ describe('getOrCreateHidden', () => {
   });
 });
 
+describe('getTrackingEvent', () => {
+  const keyRegex = new RegExp('og__[0-9]+');
+  it('make tracking event for optout', () => {
+    const actionIn = {
+      type: 'OPTOUT_PRODUCT',
+      payload: {
+        product: {
+          id: 'testProduct'
+        },
+        offer: {
+          location: 'testLocation',
+          variationId: 'testVariation'
+        }
+      }
+    };
+    const trackingEvent = getTrackingEvent(actionIn);
+    expect(keyRegex.test(trackingEvent[0])).toEqual(true);
+    expect(trackingEvent[1]).toEqual('testProduct,optout_product,testLocation,,testVariation');
+  });
+
+  it('make tracking event for optin', () => {
+    const actionIn = {
+      type: 'OPTIN_PRODUCT',
+      payload: {
+        product: {
+          id: 'testProduct'
+        },
+        offer: {
+          location: 'testLocation',
+          variationId: 'testVariation'
+        },
+        frequency: 'testFrequency'
+      }
+    };
+    const trackingEvent = getTrackingEvent(actionIn);
+    expect(keyRegex.test(trackingEvent[0])).toEqual(true);
+    expect(trackingEvent[1]).toEqual('testProduct,optin_product,testLocation,testFrequency,testVariation');
+  });
+});
+
 describe('synchronizeCartOptin', () => {
   let store, offer, frequency, product;
   beforeEach(() => {

package/src/shopify/__tests__/shopifyTrackingMiddleware.spec.js

@@ -0,0 +1,125 @@
+import { updateTrackingInputs, addDefaultToSubTracking } from '../shopifyTrackingMiddleware';
+
+function makeForm() {
+  const element = document.createElement('form');
+  element.action = '/cart/add';
+  element.innerHTML = `
+  <input value="123456" name="id" type="hidden">
+  `;
+  document.body.appendChild(element);
+  return element;
+}
+
+const testProduct = '123456';
+
+describe('updateTrackingInputs', () => {
+  let formElement;
+  beforeEach(() => {
+    formElement = makeForm();
+  });
+
+  afterEach(() => {
+    formElement.remove();
+  });
+
+  const testName = 'og__123456789';
+  const testValue = '123456,optin_product,pdp,yay_selling_plan,yay_variant';
+
+  it('should add tracking input with all values passed in', () => {
+    expect(formElement.querySelector(`[name="attributes[${testName}]"]`)).toBeFalsy();
+    updateTrackingInputs(testProduct, testName, testValue);
+    const newInput = formElement.querySelector(`[name="attributes[${testName}]"]`);
+    expect(newInput).toBeTruthy();
+    expect(newInput.getAttribute('value')).toEqual(testValue);
+  });
+
+  it('should not add input if one already exists with the same name', () => {
+    updateTrackingInputs(testProduct, testName, testValue);
+    const newInput = formElement.querySelectorAll(`[name="attributes[${testName}]"]`);
+    expect(newInput.length).toBe(1);
+    updateTrackingInputs(testProduct, testName, testValue);
+    expect(newInput.length).toBe(1);
+  });
+
+  it('should add inputs to multiple forms if existing', () => {
+    const formElement1 = makeForm();
+    const formElement2 = makeForm();
+    updateTrackingInputs(testProduct, testName, testValue);
+    const newInput1 = formElement1.querySelector(`[name="attributes[${testName}]"]`);
+    const newInput2 = formElement2.querySelector(`[name="attributes[${testName}]"]`);
+    expect(newInput1).toBeTruthy();
+    expect(newInput2).toBeTruthy();
+    expect(newInput1).toEqual(newInput2);
+    formElement1.remove();
+    formElement2.remove();
+  });
+});
+
+describe('addDefaultToSubTracking', () => {
+  const keyRegex = new RegExp('attributes[og__[0-9]+]');
+
+  const defaultValue = `${testProduct},optin_product,testLocation,4_2,testVariation`;
+  const inputSelector = `[value="${defaultValue}"]`;
+
+  const storeOg = {
+    getState: () => {
+      return { optedin: [{ id: testProduct, frequency: '4_2' }] };
+    }
+  };
+
+  let formElement;
+  beforeEach(() => {
+    formElement = makeForm();
+  });
+
+  afterEach(() => {
+    formElement.remove();
+  });
+
+  it('make tracking event for default to sub optin for RECEIVE_OFFER', () => {
+    const actionReceiveOffer = {
+      type: 'RECEIVE_OFFER',
+      payload: {
+        product: {
+          id: testProduct
+        },
+        offer: {
+          location: 'testLocation',
+          variationId: 'testVariation',
+          autoshipByDefault: true,
+          product: {
+            id: testProduct
+          }
+        }
+      }
+    };
+    expect(document.querySelector(inputSelector)).toBeFalsy();
+    addDefaultToSubTracking(actionReceiveOffer, storeOg);
+    const defaultInput = document.querySelector(inputSelector);
+    expect(defaultInput).toBeTruthy();
+    expect(keyRegex.test(defaultInput.name)).toEqual(true);
+    expect(defaultInput.value).toEqual(defaultValue);
+  });
+
+  it('should not make input if product is not default-to-sub', () => {
+    const actionReceiveOffer = {
+      type: 'RECEIVE_OFFER',
+      payload: {
+        product: {
+          id: testProduct
+        },
+        offer: {
+          location: 'testLocation',
+          variationId: 'testVariation',
+          product: {
+            id: testProduct
+          }
+        }
+      }
+    };
+    expect(document.querySelector(inputSelector)).toBeFalsy();
+    addDefaultToSubTracking(actionReceiveOffer, storeOg);
+    const defaultInput = document.querySelector(inputSelector);
+    expect(defaultInput).toBeFalsy();
+  });
+});

package/src/shopify/shopifyMiddleware.ts

@@ -14,6 +14,7 @@ import {
 
 import { makeSubscribedSelector } from '../core/selectors';
 import { getOrCreateHidden, safeProductId } from '../core/utils';
+import { getTrackingKey } from './shopifyTrackingMiddleware';
 
 const SHOPIFY_ROOT = window.Shopify?.routes?.root || '/';
 const CART_PAGE_URL = '/cart';
@@ -262,7 +263,7 @@ export async function synchronizeCartOptin(action: any, store: any) {
 export function getTrackingEvent(action): Array<string> {
   const product_id = action.payload.product.id;
   if (!product_id) return [];
-  const key = `og__${Math.ceil(new Date().getTime() / 1000)}`;
+  const key = getTrackingKey();
   const location = action.payload.offer?.location || '';
   const variation = action.payload.offer?.variationId || '';
   const value = [product_id, action.type.toLowerCase(), location];
@@ -285,6 +286,12 @@ export function getTrackingEvent(action): Array<string> {
   return [key, value.join(',')];
 }
 
+export function getSubscribedFrequency(productId, store) {
+  const subscribedSelector = makeSubscribedSelector({ id: productId });
+  const sellingPlanId = subscribedSelector(store.getState())?.frequency;
+  return sellingPlanId;
+}
+
 /**
  * // update <input type="hidden" name="selling_plan"/> if available
  *
@@ -296,8 +303,7 @@ function synchronizeSellingPlan(store: any, offerElement?: HTMLElement) {
   [...document.querySelectorAll('form[action$="/cart/add"] [name=id]')].forEach((productIdInput: HTMLInputElement) => {
     const productId = productIdInput.value;
 
-    const subscribedSelector = makeSubscribedSelector({ id: productId });
-    const sellingPlanId = subscribedSelector(store.getState())?.frequency;
+    const sellingPlanId = getSubscribedFrequency(productId, store);
 
     getOrCreateHidden(productIdInput.form, 'selling_plan', sellingPlanId);
     if (offerElement) {

package/src/shopify/shopifyTrackingMiddleware.ts

@@ -1,5 +1,5 @@
-import { OPTIN_PRODUCT, OPTOUT_PRODUCT, PRODUCT_CHANGE_FREQUENCY } from '../core/constants';
-import { getTrackingEvent } from './shopifyMiddleware';
+import { OPTIN_PRODUCT, OPTOUT_PRODUCT, PRODUCT_CHANGE_FREQUENCY, RECEIVE_OFFER, SETUP_PRODUCT } from '../core/constants';
+import { getTrackingEvent, getSubscribedFrequency } from './shopifyMiddleware';
 
 /**
  * Creates or updates a hidden input used for tracking on non-cart pages
@@ -31,6 +31,27 @@ export function updateTrackingInputs(product_id: string, name: string, value: st
   });
 }
 
+export function getTrackingKey() {
+  return `og__${Math.ceil(new Date().getTime() / 1000)}`;
+}
+
+export function addDefaultToSubTracking(action, store) {
+  // check if default to sub
+  const isDefaultToSub = action.payload.offer?.autoshipByDefault;
+  if (!isDefaultToSub) return;
+
+  // if default to sub, get tracking info
+  const productId = action.payload.offer?.product.id;
+  const key = getTrackingKey();
+  const location = action.payload.offer?.location || '';
+  const variation = action.payload.offer?.variationId || '';
+  const frequency = getSubscribedFrequency(productId, store);
+  const value = [productId, OPTIN_PRODUCT.toLowerCase(), location, frequency, variation];
+  const inputValue = value.join(',');
+  updateTrackingInputs(productId, key, inputValue);
+    
+}
+
 export default function shopifyTrackingMiddleware(store) {
   return next => action => {
     next(action);
@@ -46,6 +67,9 @@ export default function shopifyTrackingMiddleware(store) {
           updateTrackingInputs(offerElement.product.id, trackingEvent[0], trackingEvent[1]);
         }
         break;
+      case RECEIVE_OFFER:
+        addDefaultToSubTracking(action, store);
+        break;
       default:
     }
   };