@ordergroove/offers 2.28.6-alpha-PR-690-4.5 → 2.28.6

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.6-alpha-PR-690-4.5+df9bd648",
+  "version": "2.28.6",
   "description": "offer state component",
   "author": "Eugenio Lattanzio <eugenio63@gmail.com>",
   "homepage": "https://github.com/ordergroove/plush-toys#readme",
@@ -45,7 +45,7 @@
     "throttle-debounce": "^2.1.0"
   },
   "devDependencies": {
-    "@ordergroove/offers-templates": "^0.4.20-alpha-PR-690-4.8+df9bd648"
+    "@ordergroove/offers-templates": "^0.4.19"
   },
-  "gitHead": "df9bd64861d17c6f78736f5283a29f18afc9ddf7"
+  "gitHead": "8fcfa089277dc66d25e5d35f6a92e39b510078cf"
 }

package/src/core/store.js

@@ -32,7 +32,7 @@ export function makeStore(reducer, ...extraMiddlewares) {
     }
   }
 
-  const enhancer = composeEnhancers(applyMiddleware(...middlewares, ...extraMiddlewares));
+  const enhancer = composeEnhancers(applyMiddleware(...middlewares, ...extraMiddlewares.filter(it => it)));
   const store = createStore(reducer, initial, enhancer);
 
   window.og = window.og || {};

package/src/core/utils.ts

@@ -123,3 +123,20 @@ export const mapFrequencyToSellingPlan = (sellingPlans, frequenciesEveryPeriod,
 
   return null;
 };
+
+export function getOrCreateHidden(parent, name, value) {
+  let input = parent.querySelector(`[name="${name}"]`);
+  if (input && !value) {
+    input.remove();
+    return;
+  }
+  if (!input && value) {
+    input = document.createElement('input');
+    input.type = 'hidden';
+    input.name = name;
+    parent.appendChild(input);
+  }
+  if (input) {
+    input.value = value;
+  }
+}

package/src/index.js

@@ -6,9 +6,11 @@ import shopifyMiddleware from './shopify/shopifyMiddleware';
 import platform from './platform';
 import { autoInitializeOffers, onReady } from './core/utils';
 import { authorizeShopifyCustomer } from './shopify/shopifyBootstrap';
+import shopifyTrackingMiddleware from './shopify/shopifyTrackingMiddleware';
 
 export const store = makeStore(
-  ...(platform?.shopify_selling_plans ? [shopifyReducer, shopifyMiddleware] : [defaultReducer])
+  ...(platform?.shopify_selling_plans ? [shopifyReducer, shopifyMiddleware] : [defaultReducer]),
+  platform.shopify && shopifyTrackingMiddleware
 );
 
 export const offers = makeApi(store);

package/src/platform.ts

@@ -3,7 +3,7 @@ import { getMainJs } from './core/utils';
 const script = getMainJs();
 
 export default {
-  shopify: typeof script?.dataset.shopifySellingPlans !== 'undefined',
+  shopify: typeof window.Shopify !== 'undefined',
   // detect in the frontend if we should use shopify selling plans or not
   shopify_selling_plans: typeof script?.dataset.shopifySellingPlans !== 'undefined'
 };

package/src/shopify/shopifyMiddleware.ts

@@ -13,7 +13,7 @@ import {
 } from '../core/constants';
 
 import { makeSubscribedSelector } from '../core/selectors';
-import { safeProductId } from '../core/utils';
+import { getOrCreateHidden, safeProductId } from '../core/utils';
 
 const SHOPIFY_ROOT = window.Shopify?.routes?.root || '/';
 const CART_PAGE_URL = '/cart';
@@ -142,9 +142,6 @@ export async function synchronizeCartOptin(action: any, store: any) {
   const trackingEvent = getTrackingEvent(action);
 
   if (!offerElement?.isCart) {
-    if (offerElement) {
-      updateTrackingInputs(offerElement.product.id, trackingEvent[0], trackingEvent[1]);
-    }
     return;
   }
 
@@ -288,52 +285,6 @@ export function getTrackingEvent(action): Array<string> {
   return [key, value.join(',')];
 }
 
-/**
- * Creates or updates a hidden input used for tracking on non-cart pages
- *
- * @param  product_id a product ID
- * @param  name an input name, og_<timestamp in seconds>
- * @param  value an input value, <tracking event>
- * @return {undefined}
- */
-export function updateTrackingInputs(product_id: string, name: string, value: string) {
-  const store2FormElementSelector = `[name="id"][value="${product_id}"]`;
-  const store1FormElementSelector = `form[action="/cart/add"] option[value="${product_id}"]`;
-  if (!name) return;
-  let cartAddFormElements = document.querySelectorAll(store2FormElementSelector);
-  if (!cartAddFormElements.length) {
-    cartAddFormElements = document.querySelectorAll(store1FormElementSelector);
-  }
-  [...cartAddFormElements].forEach((cartAddFormElement: HTMLInputElement) => {
-    const parent = cartAddFormElement.form;
-
-    let input = parent?.querySelector(`[name="${name}"]`) as HTMLInputElement;
-    if (!input) {
-      input = document.createElement('input');
-      input.type = 'hidden';
-      input.name = `attributes[${name}]`;
-      parent?.appendChild(input);
-    }
-    input.value = value;
-  });
-}
-
-export function getOrCreateHidden(parent, name, value) {
-  let input = parent.querySelector(`[name="${name}"]`);
-  if (input && !value) {
-    input.remove();
-    return;
-  }
-  if (!input && value) {
-    input = document.createElement('input');
-    input.type = 'hidden';
-    input.name = name;
-    parent.appendChild(input);
-  }
-  if (input) {
-    input.value = value;
-  }
-}
 /**
  * // update <input type="hidden" name="selling_plan"/> if available
  *

package/src/shopify/shopifyTrackingMiddleware.ts

@@ -0,0 +1,52 @@
+import { OPTIN_PRODUCT, OPTOUT_PRODUCT, PRODUCT_CHANGE_FREQUENCY } from '../core/constants';
+import { getTrackingEvent } from './shopifyMiddleware';
+
+/**
+ * Creates or updates a hidden input used for tracking on non-cart pages
+ *
+ * @param  product_id a product ID
+ * @param  name an input name, og_<timestamp in seconds>
+ * @param  value an input value, <tracking event>
+ * @return {undefined}
+ */
+export function updateTrackingInputs(product_id: string, name: string, value: string) {
+  const store2FormElementSelector = `[name="id"][value="${product_id}"]`;
+  const store1FormElementSelector = `form[action="/cart/add"] option[value="${product_id}"]`;
+  if (!name) return;
+  let cartAddFormElements = document.querySelectorAll(store2FormElementSelector);
+  if (!cartAddFormElements.length) {
+    cartAddFormElements = document.querySelectorAll(store1FormElementSelector);
+  }
+  [...cartAddFormElements].forEach((cartAddFormElement: HTMLInputElement) => {
+    const parent = cartAddFormElement.form;
+
+    let input = parent?.querySelector(`[name="${name}"]`) as HTMLInputElement;
+    if (!input) {
+      input = document.createElement('input');
+      input.type = 'hidden';
+      input.name = `attributes[${name}]`;
+      parent?.appendChild(input);
+    }
+    input.value = value;
+  });
+}
+
+export default function shopifyTrackingMiddleware(store) {
+  return next => action => {
+    next(action);
+
+    switch (action.type) {
+      case OPTIN_PRODUCT:
+      case OPTOUT_PRODUCT:
+      case PRODUCT_CHANGE_FREQUENCY:
+        const offerElement = action.payload.offer;
+        const trackingEvent = getTrackingEvent(action);
+
+        if (offerElement && !offerElement.isCart) {
+          updateTrackingInputs(offerElement.product.id, trackingEvent[0], trackingEvent[1]);
+        }
+        break;
+      default:
+    }
+  };
+}