@ordergroove/offers 2.26.2 → 2.26.3-alpha-PR-593-20.20

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

@@ -0,0 +1,477 @@
+import * as constants from '../../core/constants';
+import * as coreReducers from '../../core/reducer';
+import {
+  autoshipEligible,
+  config,
+  inStock,
+  offer,
+  offerId,
+  optedin,
+  productOffer,
+  productPlans
+} from '../shopifyReducer';
+
+describe('autoshipEligible', () => {
+  it('should return true for each id given action RECEIVE_PRODUCT_PLANS', () => {
+    const actual = autoshipEligible(
+      {},
+      {
+        type: constants.RECEIVE_PRODUCT_PLANS,
+        payload: {
+          'yum product id 1': {},
+          'yum product id 2': {}
+        }
+      }
+    );
+    expect(actual).toEqual({ 'yum product id 1': true, 'yum product id 2': true });
+  });
+
+  it('should return true for each key in items given action SETUP_CART', () => {
+    const actual = autoshipEligible(
+      {},
+      {
+        type: constants.SETUP_CART,
+        payload: {
+          items: [
+            {
+              key: 'yum key 1'
+            },
+            {
+              key: 'yum key 2'
+            }
+          ]
+        }
+      }
+    );
+    expect(actual).toEqual({ 'yum key 1': true, 'yum key 2': true });
+  });
+
+  it('should return true for each product and variant given action SETUP_PRODUCT and products have selling plan allocations', () => {
+    const actual = autoshipEligible(
+      {},
+      {
+        type: constants.SETUP_PRODUCT,
+        payload: {
+          id: 'yum product id',
+          selling_plan_allocations: [{ 'yum key': 'yum value' }],
+          variants: [
+            {
+              id: 'yum variant id',
+              selling_plan_allocations: [{ 'yum key': 'yum value' }]
+            }
+          ]
+        }
+      }
+    );
+
+    expect(actual).toEqual({ 'yum product id': true, 'yum variant id': true });
+  });
+
+  it('should return false for each product and variant given action SETUP_PRODUCT and products have no selling plan allocations', () => {
+    const actual = autoshipEligible(
+      {},
+      {
+        type: constants.SETUP_PRODUCT,
+        payload: {
+          id: 'yum product id',
+          selling_plan_allocations: [],
+          variants: [
+            {
+              id: 'yum variant id',
+              selling_plan_allocations: []
+            }
+          ]
+        }
+      }
+    );
+
+    expect(actual).toEqual({ 'yum product id': false, 'yum variant id': false });
+  });
+
+  it('should return unmodified state given unsupported action', () => {
+    const actual = autoshipEligible(
+      { 'yum existing key': 'yum existing value' },
+      {
+        type: 'yum unsupported action',
+        payload: {}
+      }
+    );
+
+    expect(actual).toEqual({ 'yum existing key': 'yum existing value' });
+  });
+});
+
+describe('config', () => {
+  it('should return unique frequencies given action RECEIVE_PRODUCT_PLANS', () => {
+    const actual = config(
+      {},
+      {
+        type: constants.RECEIVE_PRODUCT_PLANS,
+        payload: {
+          'product plan id': { '1_1': {}, '3_1': {} }
+        }
+      }
+    );
+
+    expect(actual).toEqual(
+      jasmine.objectContaining({
+        frequencies: ['1_1', '3_1']
+      })
+    );
+  });
+
+  it('should return first selling plan id as default frequency given action SETUP_PRODUCT', () => {
+    const actual = config(
+      {},
+      {
+        type: constants.SETUP_PRODUCT,
+        payload: {
+          selling_plan_groups: [
+            {
+              selling_plans: [
+                {
+                  id: 'yum selling plan id 1'
+                },
+                {
+                  id: 'yum selling plan id 2'
+                }
+              ]
+            }
+          ]
+        }
+      }
+    );
+
+    expect(actual).toEqual(
+      jasmine.objectContaining({
+        defaultFrequency: 'yum selling plan id 1'
+      })
+    );
+  });
+
+  it('should return selling plan ids as frequencies given action SETUP_PRODUCT', () => {
+    const actual = config(
+      {},
+      {
+        type: constants.SETUP_PRODUCT,
+        payload: {
+          selling_plan_groups: [
+            {
+              selling_plans: [
+                {
+                  id: 'yum selling plan id 1'
+                },
+                {
+                  id: 'yum selling plan id 2'
+                }
+              ]
+            }
+          ]
+        }
+      }
+    );
+
+    expect(actual).toEqual(
+      jasmine.objectContaining({
+        frequencies: ['yum selling plan id 1', 'yum selling plan id 2']
+      })
+    );
+  });
+
+  it('should return values of first selling plan group as frequencies text given action SETUP_PRODUCT', () => {
+    const actual = config(
+      {},
+      {
+        type: constants.SETUP_PRODUCT,
+        payload: {
+          selling_plan_groups: [
+            {
+              options: [{ values: 'yum values' }],
+              selling_plans: [
+                {
+                  id: 'yum selling plan id'
+                }
+              ]
+            }
+          ]
+        }
+      }
+    );
+
+    expect(actual).toEqual(
+      jasmine.objectContaining({
+        frequenciesText: 'yum values'
+      })
+    );
+  });
+
+  it('should return unmodified state given unsupported action', () => {
+    const actual = config(
+      { 'yum existing key': 'yum existing value' },
+      {
+        type: 'yum unsupported action',
+        payload: {}
+      }
+    );
+
+    expect(actual).toEqual({ 'yum existing key': 'yum existing value' });
+  });
+});
+
+describe('inStock', () => {
+  it('should return true for each id given action RECEIVE_PRODUCT_PLANS', () => {
+    const actual = inStock(
+      {},
+      {
+        type: constants.RECEIVE_PRODUCT_PLANS,
+        payload: {
+          'yum product id 1': {},
+          'yum product id 2': {}
+        }
+      }
+    );
+    expect(actual).toEqual({ 'yum product id 1': true, 'yum product id 2': true });
+  });
+
+  it('should return true item key given action SETUP_CART', () => {
+    const actual = inStock(
+      {},
+      {
+        type: constants.SETUP_CART,
+        payload: {
+          items: [{ key: 'yum item key 1' }, { key: 'yum item key 2' }]
+        }
+      }
+    );
+    expect(actual).toEqual({ 'yum item key 1': true, 'yum item key 2': true });
+  });
+
+  it('should return true for each available product and variant given action SETUP_PRODUCT', () => {
+    const actual = inStock(
+      {},
+      {
+        type: constants.SETUP_PRODUCT,
+        payload: {
+          id: 'yum product id',
+          available: true,
+          variants: [
+            {
+              id: 'yum variant id',
+              available: true
+            }
+          ]
+        }
+      }
+    );
+
+    expect(actual).toEqual({
+      'yum product id': true,
+      'yum variant id': true
+    });
+  });
+
+  it('should return false for each unavailable product and variant given action SETUP_PRODUCT', () => {
+    const actual = inStock(
+      {},
+      {
+        type: constants.SETUP_PRODUCT,
+        payload: {
+          id: 'yum product id',
+          available: false,
+          variants: [
+            {
+              id: 'yum variant id',
+              available: false
+            }
+          ]
+        }
+      }
+    );
+
+    expect(actual).toEqual({
+      'yum product id': false,
+      'yum variant id': false
+    });
+  });
+
+  it('should return unmodified state given unsupported action', () => {
+    const actual = inStock(
+      { 'yum existing key': 'yum existing value' },
+      {
+        type: 'yum unsupported action',
+        payload: {}
+      }
+    );
+
+    expect(actual).toEqual({ 'yum existing key': 'yum existing value' });
+  });
+});
+
+describe('offer', () => {
+  it('should return unmodified state', () => {
+    const actual = offer({ 'yum existing key': 'yum existing value' });
+
+    expect(actual).toEqual({ 'yum existing key': 'yum existing value' });
+  });
+});
+
+describe('offerId', () => {
+  it('should return shopify constant', () => {
+    const actual = offerId();
+
+    expect(actual).toEqual('native-shopify-offer');
+  });
+});
+
+describe('optedin', () => {
+  it('should return optins given action SETUP_CART', () => {
+    const actual = optedin(
+      {},
+      {
+        type: constants.SETUP_CART,
+        payload: {
+          items: [
+            {
+              key: 'yum item key 1',
+              selling_plan_allocation: {
+                selling_plan: {
+                  id: 'yum selling plan id 1'
+                }
+              }
+            },
+            {
+              key: 'yum item key 2',
+              selling_plan_allocation: {
+                selling_plan: {
+                  id: 'yum selling plan id 2'
+                }
+              }
+            }
+          ]
+        }
+      }
+    );
+
+    expect(actual).toEqual([
+      {
+        id: 'yum item key 1',
+        frequency: 'yum selling plan id 1'
+      },
+      {
+        id: 'yum item key 2',
+        frequency: 'yum selling plan id 2'
+      }
+    ]);
+  });
+
+  it('should return unmodified state given unsupported action', () => {
+    const actual = optedin(
+      { 'yum existing key': 'yum existing value' },
+      {
+        type: 'yum unsupported action',
+        payload: {}
+      }
+    );
+
+    expect(actual).toEqual({ 'yum existing key': 'yum existing value' });
+  });
+});
+
+describe('productOffer', () => {
+  it('should return unmodified state', () => {
+    const actual = productOffer({ 'yum existing key': 'yum existing value' });
+
+    expect(actual).toEqual({ 'yum existing key': 'yum existing value' });
+  });
+});
+
+describe('productPlans', () => {
+  it('should product plans with formatted discounts given action SETUP_PRODUCT', () => {
+    const actual = productPlans(
+      {},
+      {
+        type: constants.SETUP_PRODUCT,
+        payload: {
+          id: 'yum product id',
+          selling_plan_allocations: [
+            {
+              selling_plan_id: 'yum selling plan id 1',
+              compare_at_price: 100,
+              price: 50,
+              price_adjustments: [
+                {
+                  value: 50,
+                  value_type: 'percentage'
+                }
+              ]
+            }
+          ],
+          variants: [
+            {
+              id: 'yum variant id 1',
+              selling_plan_allocations: [
+                {
+                  selling_plan_id: 'yum selling plan id 2',
+                  compare_at_price: 50,
+                  price: 25,
+                  price_adjustments: [
+                    {
+                      value: 25
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              id: 'yum variant id 2',
+              selling_plan_allocations: [
+                {
+                  selling_plan_id: 'yum selling plan id 3',
+                  compare_at_price: 10,
+                  price: 8,
+                  price_adjustments: []
+                }
+              ]
+            }
+          ]
+        }
+      }
+    );
+
+    expect(actual).toEqual({
+      'yum product id': { 'yum selling plan id 1': ['$1.00', '50%', '$.50'] },
+      'yum variant id 1': {
+        'yum selling plan id 2': ['$.50', '$.25', '$.25']
+      },
+      'yum variant id 2': { 'yum selling plan id 3': ['$.10', '%', '$8'] }
+    });
+  });
+
+  it('should return payload given action RECEIVE_PRODUCT_PLANS', () => {
+    const actual = productPlans(
+      {},
+      {
+        type: constants.RECEIVE_PRODUCT_PLANS,
+        payload: {
+          'yum key': 'yum value'
+        }
+      }
+    );
+
+    expect(actual).toEqual({
+      'yum key': 'yum value'
+    });
+  });
+
+  it('should return unmodified state given unsupported action', () => {
+    const actual = productPlans(
+      { 'yum existing key': 'yum existing value' },
+      {
+        type: 'yum unsupported action',
+        payload: {}
+      }
+    );
+
+    expect(actual).toEqual({ 'yum existing key': 'yum existing value' });
+  });
+});

package/src/shopify/shopifyMiddleware.ts

@@ -0,0 +1,202 @@
+import memoize from 'lodash.memoize';
+import {
+  OPTIN_PRODUCT,
+  OPTOUT_PRODUCT,
+  PRODUCT_CHANGE_FREQUENCY,
+  REQUEST_OFFER,
+  SETUP_CART,
+  SETUP_PRODUCT
+} from '../core/constants';
+
+import { makeSubscribedSelector } from '../core/selectors';
+
+declare global {
+  interface Window {
+    og: {
+      previewMode: boolean;
+    };
+    Shopify: { routes?: { root: String } };
+  }
+}
+
+const SHOPIFY_ROOT = window.Shopify?.routes.root || '/';
+const CART_PAGE_URL = `${SHOPIFY_ROOT}cart`;
+const CART_CHANGE_JS_URL = `${SHOPIFY_ROOT}cart/change.js`;
+const CART_JS_URL = `${SHOPIFY_ROOT}cart.js`;
+const PRODUCTS_URL = `${SHOPIFY_ROOT}products/`;
+
+async function setupPdp(store) {
+  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 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) {
+  const cart = await getCart();
+  store.dispatch({ type: SETUP_CART, payload: cart });
+  const { items } = cart;
+  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
+ */
+async function synchronizeCartOptin(action: any, store: any) {
+  const offerElement = action.payload.offer;
+  const selling_plan = action.payload.frequency || null;
+
+  if (!offerElement?.isCart) return;
+
+  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 item = cart.items.find(it => it.key === key); // cart.items[offerIx];
+
+  const res = await fetch(CART_CHANGE_JS_URL, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      id: key,
+      quantity: item.quantity,
+      properties: item.properties,
+      selling_plan: selling_plan || null,
+      sections: closestSectionId ? [closestSectionId] : undefined
+    })
+  });
+
+  if (res.status !== 200) throw new Error('Cart not updated');
+
+  const sections = (await res.json())?.sections;
+
+  if (sections && closestSectionId in sections) {
+    const sectionRawHtml = sections[closestSectionId];
+
+    const el = new DOMParser()
+      .parseFromString(sectionRawHtml.toString() || '', 'text/html')
+      .getElementById('shopify-section-' + closestSectionId);
+
+    closestSection.innerHTML = el.innerHTML;
+    
+  } else if (window.location.href.endsWith(CART_PAGE_URL)) {
+    // only do if we are on the cart page
+    window.location.reload();
+  }
+}
+
+function getOrCreateHidden(parent, name, value) {
+  let input = parent.querySelector(`[name="${name}"]`);
+  if (input && !value) {
+    input.remove();
+    return;
+  }
+  if (!input) {
+    input = document.createElement('input');
+    input.type = 'hidden';
+    input.name = name;
+    parent.appendChild(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);
+        } else {
+          setupPdp(store);
+        }
+      default:
+    }
+
+    next(action);
+
+    switch (action.type) {
+      case OPTIN_PRODUCT:
+      case OPTOUT_PRODUCT:
+      case PRODUCT_CHANGE_FREQUENCY:
+        synchronizeCartOptin(action, store);
+      case REQUEST_OFFER:
+      case SETUP_PRODUCT:
+        synchronizeSellingPlan(store, action.payload.offer);
+        break;
+      default:
+    }
+  };
+}