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

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/getProduct.ts

@@ -0,0 +1,6 @@
+import { guessProductHandle } from './guessProductHandle';
+
+
+export async function getProduct(handle) {
+  return (await fetch(`${window.Shopify?.routes.root}products/${handle}.js`)).json();
+}

package/src/shopify/guessProductHandle.ts

@@ -0,0 +1,26 @@
+/**
+ * Attemps to guess the product handle o
+ * @returns
+ */
+
+export 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(), '')
+  );
+}

package/src/shopify/shopifyMiddleware.ts

@@ -0,0 +1,137 @@
+import {
+  OPTIN_PRODUCT,
+  OPTOUT_PRODUCT,
+  PRODUCT_CHANGE_FREQUENCY,
+  REQUEST_OFFER,
+  SETUP_CART,
+  SETUP_PRODUCT
+} from '../core/constants';
+import { guessProductHandle } from './guessProductHandle';
+import { getProduct } from './getProduct';
+import { makeSubscribedSelector } from '../core/selectors';
+
+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(`${window.Shopify?.routes.root}cart.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 }));
+}
+
+async function synchronizeCartOptin(action: any, store: any) {
+  const offerElement = action.payload.offer;
+  const selling_plan = action.payload.frequency || null;
+
+  if (offerElement?.isCart) {
+    const closestSection = offerElement.closest('.shopify-section');
+    const closestSectionId = closestSection && (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', {
+      method: 'POST',
+      credentials: 'same-origin',
+      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()) || {};
+
+    if (sections?.length) {
+      const [section] = Object.values(sections);
+
+      const el = new DOMParser()
+        .parseFromString(section?.toString() || '', 'text/html')
+        .getElementById('shopify-section-' + closestSectionId);
+      closestSection.innerHTML = el.innerHTML;
+    } else {
+      window.location.reload();
+    }
+
+    console.log('update cart');
+  }
+}
+
+/**
+ * // update <input type="hidden" name="selling_plan"/> if available
+ *
+ * @param store
+ */
+function synchronizeSellingPlan(store: any) {
+  [...document.querySelectorAll('[name=id]')].forEach(productIdInput => {
+    const productId = productIdInput.value;
+    let sellingPlanInput = productIdInput.form.selling_plan;
+    if (!sellingPlanInput) {
+      sellingPlanInput = document.createElement('input');
+      sellingPlanInput.type = 'hidden';
+      sellingPlanInput.name = 'selling_plan';
+      productIdInput.form.appendChild(sellingPlanInput);
+    }
+
+    const subscribedSelector = makeSubscribedSelector({ id: productId });
+    const sellingPlanId = subscribedSelector(store.getState())?.frequency;
+
+    sellingPlanInput.value = sellingPlanId;
+  });
+}
+
+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);
+        break;
+      default:
+    }
+  };
+}