@ordergroove/offers 2.26.9 → 2.27.0

package/src/shopify/shopifyBootstrap.ts

@@ -0,0 +1,136 @@
+import { authorize } from '../core/actions';
+import { clearCookie, getCookieValue, getMainJs, resolveEnvAndMerchant } from '../core/utils';
+
+const SHOPIFY_OG_AUTH_ENDPOINT = '/apps/subscriptions/auth/';
+const SHOPIFY_OG_AUTH_BEGIN = 'og_auth_begin';
+const SHOPIFY_OG_AUTH_END = 'og_auth_end';
+
+type ShopifyOGAuth = {
+  customerId: string;
+  timestamp: Number;
+  signature: string;
+};
+
+/**
+ * We tag shopify liquid this way.
+ *   window.ogShopifyConfig = {
+ *   {%- if customer -%}
+ *     customer: {
+ *       id: "{{customer.id}}",
+ *       email: "{{customer.email}}",
+ *       signature: "{{signature}}",
+ *       timestamp: "{{timestamp}}",
+ *     },
+ *   {%- else -%}
+ *     customer: null,
+ *   {%- endif -%}
+ */
+type OgShopifyConfigCustomer = {
+  id: string;
+  signature: string;
+  timestamp: string;
+  email?: string;
+};
+
+type OgShopifyConfig = {
+  customer?: OgShopifyConfigCustomer;
+};
+
+/**
+ * We rely on window.ogShopifyConfig side of integration
+ */
+declare global {
+  interface Window {
+    og: {
+      previewMode: boolean;
+    };
+    ogShopifyConfig: OgShopifyConfig;
+    Shopify: { routes?: { root: String } };
+  }
+}
+
+const parseIntegrationTempAuth = (raw: string) => {
+  const [id, timestamp, signature, email] = atob(raw).split('|');
+  return {
+    id,
+    signature,
+    timestamp,
+    email
+  } as OgShopifyConfigCustomer;
+};
+/**
+ *
+ * Markup needed for integration:
+ * ```html
+ * <script src="https://static.ordergroove.com/<merchant_id>/main.js" {% if customer -%}
+ * {%- assign secret_key = shop.metafields.accentuate.theme_hash_key -%}
+ * {%- assign timestamp = "now" | date: "%s" -%}
+ * {%- assign signature = customer.id | append: "|" | append: timestamp | hmac_sha256: secret_key -%}
+ * data-customer="{{customer.id | append: "|" | append: timestamp | append: "|" | append: signature | append: "|" | append: customer.email | base64_encode }}"
+ * {%- endif %}></script>
+ * ```
+ */
+export async function authorizeShopifyCustomer({ store }) {
+  const [merchantId] = resolveEnvAndMerchant();
+  const script = getMainJs();
+
+  let customer = script?.dataset.customer
+    ? parseIntegrationTempAuth(script.dataset.customer)
+    : window.ogShopifyConfig?.customer;
+  if (customer) {
+    const val = await getOrCreateAuthCookie(customer);
+    if (val) {
+      const [sig_field, ts, sig] = val.split('|');
+      store.dispatch(authorize(merchantId, sig_field, Number(ts), sig));
+    }
+  } else {
+    clearCookie('og_auth');
+  }
+}
+/**
+ * Borrow from here https://github.com/ordergroove/shopify-app/blob/88becb621b29776a946ab0cd3ae215043e174626/server/lib/theme-partials/js/helpers/cookies.js#L18
+ * @param customer
+ * @returns
+ */
+export async function fetchOGSignature(customer: OgShopifyConfigCustomer) {
+  try {
+    const response = await fetch(
+      `${SHOPIFY_OG_AUTH_ENDPOINT}?customer=${customer.id}&customer_signature=${customer.signature}&customer_timestamp=${customer.timestamp}`
+    );
+    const data = await response.text();
+    const beginningIndex = data.lastIndexOf(SHOPIFY_OG_AUTH_BEGIN);
+
+    if (beginningIndex < 0) throw 'Invalid response from OG auth endpoint';
+
+    return JSON.parse(
+      data.substring(beginningIndex + SHOPIFY_OG_AUTH_BEGIN.length, data.lastIndexOf(SHOPIFY_OG_AUTH_END))
+    ) as ShopifyOGAuth;
+  } catch (err) {
+    console.error(err);
+  }
+}
+/**
+ * Original source https://github.com/ordergroove/shopify-app/blob/88becb621b29776a946ab0cd3ae215043e174626/server/lib/theme-partials/js/helpers/cookies.js#L56
+ *
+ * @param customer
+ * @returns
+ */
+export async function getOrCreateAuthCookie(customer: OgShopifyConfigCustomer) {
+  const ogAuthCookie = getCookieValue('og_auth');
+
+  // The cookie hasn't expired yet so we don't need to refresh the auth
+  if (ogAuthCookie) {
+    return ogAuthCookie;
+  }
+  const { customerId, timestamp, signature } = await fetchOGSignature(customer);
+
+  if (!customerId) return '';
+
+  // set expiration to now + 2hrs
+  const ogToday = new Date();
+  const binarySignature = btoa(signature);
+  ogToday.setTime(ogToday.getTime() + 2 * 60 * 60 * 1000);
+  const value = `${customerId}|${timestamp}|${binarySignature};expires=${ogToday.toUTCString()}`;
+  document.cookie = `og_auth=${value};secure;path=/`;
+  return value;
+}

package/src/shopify/shopifyMiddleware.ts

@@ -0,0 +1,336 @@
+import memoize from 'lodash.memoize';
+import { debounce } from 'throttle-debounce';
+
+import {
+  CART_UPDATED_EVENT,
+  OPTIN_PRODUCT,
+  OPTOUT_PRODUCT,
+  PRODUCT_CHANGE_FREQUENCY,
+  RECEIVE_OFFER,
+  REQUEST_OFFER,
+  SETUP_CART,
+  SETUP_PRODUCT
+} from '../core/constants';
+
+import { makeSubscribedSelector } from '../core/selectors';
+import { safeProductId } from '../core/utils';
+
+const SHOPIFY_ROOT = window.Shopify?.routes?.root || '/';
+const CART_PAGE_URL = '/cart';
+const CART_JS_URL = `${SHOPIFY_ROOT}cart.js`;
+const PRODUCTS_URL = `${SHOPIFY_ROOT}products/`;
+
+const syncProductId = debounce(100, false, function(form, offer) {
+  const { id } = Object.fromEntries([...new FormData(form).entries()]);
+  offer.setAttribute('product', id);
+});
+
+async function setupPdp(store, offer) {
+  const handle = guessProductHandle();
+  if (handle) {
+    try {
+      store.dispatch({ type: SETUP_PRODUCT, payload: await getProduct(handle) });
+    } catch (err) {
+      console.warn('OG: Unable to fetch product details for PDP', err);
+    }
+  }
+
+  const form = offer.closest('form');
+
+  // keep product.id form in sync with offer serving.
+  new MutationObserver(() => syncProductId(form, offer)).observe(form, { subtree: true, childList: true });
+}
+
+const getCart = async () => await (await fetch(CART_JS_URL)).json();
+
+/**
+ * Attemps to guess the product handle o
+ * @returns
+ */
+function guessProductHandle(): String {
+  return (
+    [
+      () =>
+        // Use the oembed to get the product handle
+        (document
+          .querySelector('[href$=".oembed"]')
+          ?.getAttribute('href')
+          ?.match(/\/([^\/]+)\.oembed$/) || [])[1],
+
+      () =>
+        // Use the open graph og:type==product and og:url to get the product handle
+        ((document.querySelector('meta[property="og:type"][content="product"]') &&
+          document
+            .querySelector('meta[property="og:url"][content]')
+            ?.getAttribute('content')
+            ?.match(/\/([^\/]+)$/)) ||
+          [])[1],
+
+      () =>
+        // use any json in the markup
+        [...document.querySelectorAll('[type$=json]')]
+          .map(it => JSON.parse(it.textContent || '{}'))
+          .find(it => it.handle && it.price)?.handle
+    ]
+      // returns the first truthy and prevent call next functions
+      .reduce((acc, cur) => acc || cur(), '')
+  );
+}
+
+const getProduct = memoize(async handle => (await fetch(`${PRODUCTS_URL}${handle}.js`)).json());
+
+async function setupCart(store, offer) {
+  const cart = await getCart();
+  const { items } = cart;
+  store.dispatch({ type: SETUP_CART, payload: cart });
+
+  // some minicart templates does not contains line.key but contains line which corresponds to
+  // the index on the cart items (Vedge)
+
+  const productAsCartLine = Number(offer.product.id);
+  if (productAsCartLine <= items.length) {
+    offer.setAttribute('product', items[productAsCartLine - 1].key);
+  }
+
+  const products = await Promise.all(Array.from(new Set(items.map(({ handle }) => handle))).map(getProduct));
+  products.forEach(product => store.dispatch({ type: SETUP_PRODUCT, payload: product }));
+}
+
+/**
+ * Synchronizes the optins/optouts using shopify cart ajax api
+ *
+ * @param action
+ * @param store
+ */
+export async function synchronizeCartOptin(action: any, store: any) {
+  const offerElement = action.payload.offer;
+  const selling_plan = action.payload.frequency || null;
+  const trackingEvent = getTrackingEvent(action);
+
+  if (!offerElement?.isCart) {
+    if (offerElement) {
+      updateTrackingInputs(offerElement.product.id, trackingEvent[0], trackingEvent[1]);
+    }
+    return;
+  }
+
+  try {
+    // disable the interactions on the offer since we need to process its side-effects first.
+    offerElement.style.pointerEvents = 'none';
+    offerElement.style.opacity = '.7';
+
+    const closestSection = offerElement.closest('.shopify-section');
+    const closestSectionId = (closestSection?.id.match(/^shopify-section-(.+)/) || [])[1];
+
+    const key = action.payload.product.id; // shopify cart.item.key
+    const cart = await getCart();
+    const offerIx = cart?.items?.findIndex(it => it.key === key); // cart.items[offerIx];
+    const item = cart.items[offerIx];
+    const qty = item.quantity;
+    const productId = safeProductId(key);
+
+    const res = await fetch('/cart/change.js', {
+      method: 'POST',
+      credentials: 'same-origin',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        id: key,
+        quantity: qty,
+        attributes: Object.fromEntries([trackingEvent]),
+        properties: item.properties,
+        selling_plan: selling_plan || null,
+        sections: closestSectionId ? [closestSectionId] : undefined
+      })
+    });
+
+    if (res.status !== 200) throw new Error('Cart not updated');
+
+    const newCart = await res.json();
+
+    // If both carts have same length we can update the item.key
+    // to the original offer element, at least provide
+    // some graceful degradations if no sections nor cart page
+    const newKey =
+      cart.items.length === newCart.items.length
+        ? newCart.items[offerIx].key
+        : newCart.items.find(
+            line =>
+              line.quantity === qty &&
+              line.product_id === productId &&
+              ((!selling_plan && !line.selling_plan_allocation) ||
+                line?.selling_plan_allocation.selling_plan.id === selling_plan)
+          )?.key;
+
+    if (newKey) offerElement.setAttribute('product', newKey);
+
+    // dispatch SETUP_CART so offer does not flip the state
+    store.dispatch({ type: SETUP_CART, payload: newCart });
+
+    // Use a custom event to hook custom cart updates.
+    const cartUpdateEvent = new CustomEvent(CART_UPDATED_EVENT, { bubbles: true, cancelable: true });
+    offerElement.dispatchEvent(cartUpdateEvent);
+
+    // Let client uses preventDefault if they want to skip default logic after event.
+    if (cartUpdateEvent.defaultPrevented) return;
+
+    const sections = newCart.sections;
+
+    if (sections && closestSectionId in sections) {
+      const sectionRawHtml = sections[closestSectionId];
+
+      const el = new DOMParser()
+        .parseFromString(sectionRawHtml.toString() || '', 'text/html')
+        .getElementById('shopify-section-' + closestSectionId);
+      if (el) {
+        closestSection.innerHTML = el.innerHTML;
+      }
+    } else if (window.location.pathname.startsWith(CART_PAGE_URL)) {
+      // only do if we are on the cart page
+      window.location.reload();
+    }
+  } catch (err) {
+    console.log('OG Error updating cart', err);
+  } finally {
+    offerElement.style.pointerEvents = 'auto';
+    offerElement.style.opacity = '1';
+  }
+}
+
+/**
+ * Returns a tracking event adhering to the below format:
+ *
+ * og__<ts in seconds>: "<product_id>,<action>,<location>,<selling_plan 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",
+ *
+ * @param  action a Redux action
+ * @return {Array} an array with positional values key, value
+ */
+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 location = action.payload.offer?.location || '';
+  const value = [product_id, action.type.toLowerCase(), location];
+
+  switch (action.type) {
+    case REQUEST_OFFER:
+    case OPTOUT_PRODUCT:
+      value.push('');
+      break;
+    case OPTIN_PRODUCT:
+    case PRODUCT_CHANGE_FREQUENCY:
+      value.push(action.payload.frequency);
+      break;
+    default:
+      return []; // we dont track anything else
+  }
+
+  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
+ *
+ * @param store
+ */
+function synchronizeSellingPlan(store: any, offerElement?: HTMLElement) {
+  [...document.querySelectorAll('[name=id]')].forEach((productIdInput: HTMLInputElement) => {
+    const productId = productIdInput.value;
+
+    const subscribedSelector = makeSubscribedSelector({ id: productId });
+    const sellingPlanId = subscribedSelector(store.getState())?.frequency;
+
+    getOrCreateHidden(productIdInput.form, 'selling_plan', sellingPlanId);
+    if (offerElement) {
+      // use this to update the product attributes in future
+    }
+  });
+}
+
+export default function shopifyMiddleware(store) {
+  return next => action => {
+    /**
+     * This redux middleware will perform Shopify specific side-effects such as change
+     * the product selling plan when offer is cart
+     */
+    switch (action.type) {
+      case OPTIN_PRODUCT:
+      case OPTOUT_PRODUCT:
+      case PRODUCT_CHANGE_FREQUENCY:
+        break;
+      case REQUEST_OFFER:
+        if (action.payload.offer?.isCart) {
+          setupCart(store, action.payload.offer);
+        } else {
+          setupPdp(store, action.payload.offer);
+        }
+      default:
+    }
+
+    next(action);
+
+    switch (action.type) {
+      case OPTIN_PRODUCT:
+      case OPTOUT_PRODUCT:
+      case PRODUCT_CHANGE_FREQUENCY:
+        synchronizeCartOptin(action, store);
+      case REQUEST_OFFER:
+      case RECEIVE_OFFER:
+      case SETUP_PRODUCT:
+        synchronizeSellingPlan(store, action.payload.offer);
+        break;
+      default:
+    }
+  };
+}