@ordergroove/offers 2.30.2 → 2.30.4-alpha-PR-716-2.14

package/examples/index.html

@@ -114,6 +114,7 @@
         <option>upsell</option>
         <option>subscribed</option>
         <option>not-subscribed</option>
+        <option>prepaid</option>
       </select>
 
       <div id="the-offer">

package/examples/index.js

@@ -8,24 +8,24 @@ import { getMarkup, getStyles } from '@ordergroove/offers-templates';
 window.og_settings = {
   // object were key is product id and value is an array of plan discount
   product_discounts: {
-    UD729: {
+    UD728: {
       '3_1': ['30.00', '10%', '$27.00'],
       '1_2': ['30.00', '20%', '$24.00']
     },
-    UD728: [
+    UD729: [
       {
-        frequency: '1_2',
-        prepaidShipments: '3',
+        frequency: '1_3',
+        prepaidShipments: null,
         regularPrice: '$15.00',
         subscriptionPrice: '$13.50',
         discountRate: '10%'
       },
       {
-        frequency: '3_1',
+        frequency: '2_3',
         prepaidShipments: null,
         regularPrice: '$15.00',
-        subscriptionPrice: '$12.00',
-        discountRate: '20%'
+        subscriptionPrice: '$13.50',
+        discountRate: '10%'
       }
     ]
   }
@@ -179,7 +179,8 @@ const offersExamples = [
   },
   {
     name: 'Prepaid',
-    selector: 'og-offer[location="initial"]',
+    defaultPreviewMode: 'prepaid',
+    selector: 'og-offer[location="prepaid-pdp"]',
     config: {
       settings: {
         ...settings,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ordergroove/offers",
-  "version": "2.30.2",
+  "version": "2.30.4-alpha-PR-716-2.14+6c203a6e",
   "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.5.1"
+    "@ordergroove/offers-templates": "^0.5.2"
   },
-  "gitHead": "81e7eb5ad4aabc79a35df89c936632c8f422d7d5"
+  "gitHead": "6c203a6e6da4957fde333448b676e1584ef4c685"
 }

package/src/components/Offer.js

@@ -64,6 +64,7 @@ export class Offer extends TemplateElement {
     if (preview === 'preview-standard-offer') this.preview = 'regular';
     else if (preview === 'preview-upsell-offer') this.preview = 'upsell';
     else if (preview === 'preview-subscribed-offer') this.preview = 'subscribed';
+    else if (preview === 'preview-prepaid-offer') this.preview = 'prepaid';
   }
 
   static get styles() {

package/src/core/__tests__/actions-preview.spec.js

@@ -0,0 +1,187 @@
+import { mergeProductPlansToState } from '../actions-preview';
+
+describe('actions preview', () => {
+  describe('mergeProductPlansToState', () => {
+    it('Should merge productPlans to state correctly', () => {
+      const payAsYouGoPlan = [
+        {
+          frequency: '3_1',
+          prepaidShipments: null,
+          regularPrice: '30.00',
+          subscriptionPrice: '$27.00',
+          discountRate: '10%'
+        },
+        {
+          frequency: '1_2',
+          prepaidShipments: null,
+          regularPrice: '30.00',
+          subscriptionPrice: '$24.00',
+          discountRate: '20%'
+        }
+      ];
+
+      const payAsYouGoThat2 = [
+        {
+          frequency: '1_3',
+          prepaidShipments: null,
+          regularPrice: '$15.00',
+          subscriptionPrice: '$13.50',
+          discountRate: '10%'
+        },
+        {
+          frequency: '2_3',
+          prepaidShipments: null,
+          regularPrice: '$15.00',
+          subscriptionPrice: '$13.50',
+          discountRate: '10%'
+        }
+      ];
+
+      const prepaidPlansToBeAdded = [
+        {
+          frequency: '1_3',
+          regularPrice: '$15.00',
+          subscriptionPrice: '$12.00',
+          discountRate: '25%',
+          prepaidShipments: 3,
+          regularPrepaidPrice: '$36.00',
+          prepaidSavingsPerShipment: '$3.00',
+          prepaidSavingsTotal: '$9.00',
+          prepaidExtraSavingsPercentage: '10%'
+        },
+        {
+          frequency: '1_3',
+          regularPrice: '$15.00',
+          subscriptionPrice: '$12.00',
+          discountRate: '20%',
+          prepaidShipments: 6,
+          regularPrepaidPrice: '$72.00',
+          prepaidSavingsPerShipment: '$3.00',
+          prepaidSavingsTotal: '$18.00',
+          prepaidExtraSavingsPercentage: '10%'
+        },
+        {
+          frequency: '1_3',
+          regularPrice: '$15.00',
+          subscriptionPrice: '$12.00',
+          discountRate: '20%',
+          prepaidShipments: 12,
+          regularPrepaidPrice: '$144.00',
+          prepaidSavingsPerShipment: '$3.00',
+          prepaidSavingsTotal: '$36.00',
+          prepaidExtraSavingsPercentage: '10%'
+        }
+      ];
+
+      const state = {
+        UD728: payAsYouGoPlan,
+        UD729: payAsYouGoThat2,
+        UD730: [
+          {
+            frequency: '1_2',
+            prepaidShipments: null,
+            regularPrice: '30.00',
+            subscriptionPrice: '$24.00',
+            discountRate: '20%'
+          }
+        ]
+      };
+
+      const repeatedProductPlan = {
+        frequency: '3_1',
+        prepaidShipments: null,
+        regularPrice: '30.00',
+        subscriptionPrice: '$27.00',
+        discountRate: '10%'
+      };
+
+      const differentProductPlan = {
+        frequency: '1_2',
+        prepaidShipments: null,
+        regularPrice: '30.00',
+        subscriptionPrice: '$24.00',
+        discountRate: '21%'
+      };
+
+      const productPlans = {
+        UD728: [repeatedProductPlan],
+        UD729: prepaidPlansToBeAdded,
+        UD730: [differentProductPlan]
+      };
+
+      const expected = {
+        UD728: [...payAsYouGoPlan],
+        UD729: [...payAsYouGoThat2, ...prepaidPlansToBeAdded],
+        UD730: [
+          {
+            frequency: '1_2',
+            prepaidShipments: null,
+            regularPrice: '30.00',
+            subscriptionPrice: '$24.00',
+            discountRate: '20%'
+          },
+          {
+            frequency: '1_2',
+            prepaidShipments: null,
+            regularPrice: '30.00',
+            subscriptionPrice: '$24.00',
+            discountRate: '21%'
+          }
+        ]
+      };
+
+      expect(mergeProductPlansToState(state, productPlans)).toEqual(expected);
+    });
+
+    it('Should not add anything if productPlans are equal to state', () => {
+      const prepaidPlans = [
+        {
+          frequency: '1_3',
+          regularPrice: '$15.00',
+          subscriptionPrice: '$12.00',
+          discountRate: '25%',
+          prepaidShipments: 3,
+          regularPrepaidPrice: '$36.00',
+          prepaidSavingsPerShipment: '$3.00',
+          prepaidSavingsTotal: '$9.00',
+          prepaidExtraSavingsPercentage: '10%'
+        },
+        {
+          frequency: '1_3',
+          regularPrice: '$15.00',
+          subscriptionPrice: '$12.00',
+          discountRate: '20%',
+          prepaidShipments: 6,
+          regularPrepaidPrice: '$72.00',
+          prepaidSavingsPerShipment: '$3.00',
+          prepaidSavingsTotal: '$18.00',
+          prepaidExtraSavingsPercentage: '10%'
+        },
+        {
+          frequency: '1_3',
+          regularPrice: '$15.00',
+          subscriptionPrice: '$12.00',
+          discountRate: '20%',
+          prepaidShipments: 12,
+          regularPrepaidPrice: '$144.00',
+          prepaidSavingsPerShipment: '$3.00',
+          prepaidSavingsTotal: '$36.00',
+          prepaidExtraSavingsPercentage: '10%'
+        }
+      ];
+      const state = {
+        UD729: prepaidPlans
+      };
+
+      const productPlans = {
+        UD729: prepaidPlans
+      };
+
+      const expected = {
+        UD729: prepaidPlans
+      };
+
+      expect(mergeProductPlansToState(state, productPlans)).toEqual(expected);
+    });
+  });
+});

package/src/core/actions-preview.js

@@ -1,4 +1,5 @@
-import { receiveOffer, receiveOrders, authorize, unauthorized, optinProduct, optoutProduct } from './actions';
+import { receiveOffer, receiveOrders, authorize, unauthorized, optinProduct } from './actions';
+import { getObjectStructuredProductPlans } from './adapters';
 import * as constants from './constants';
 
 export const setPreviewStandardOffer = (isPreview, productId, offer) =>
@@ -62,6 +63,19 @@ export const setPreviewStandardOffer = (isPreview, productId, offer) =>
     );
   };
 
+export const mergeProductPlansToState = (state, newProductPlans) => {
+  Object.entries(newProductPlans).forEach(([key, value]) => {
+    if (Object.prototype.hasOwnProperty.call(state, key)) {
+      const mergedArray = state[key].concat(value);
+      const uniqueArray = [...new Set(mergedArray.map(item => JSON.stringify(item)))];
+      state[key] = uniqueArray.map(item => JSON.parse(item));
+    } else {
+      state[key] = value;
+    }
+  });
+  return state;
+};
+
 export const setPreviewUpsellOffer = (isPreview, productId, offer) =>
   async function setPreviewUpsellOfferThunk(dispatch, getState) {
     await dispatch({ type: constants.SET_PREVIEW_UPSELL_OFFER, payload: isPreview });
@@ -122,6 +136,133 @@ export const setPreviewUpsellOffer = (isPreview, productId, offer) =>
     }
   };
 
+export const setPreviewPrepaid = (isPreview, productId, offer) =>
+  async function setPreviewPrepaidThunk(dispatch, getState) {
+    const existingProductPlans = getState().productPlans;
+
+    await dispatch({
+      type: constants.SET_PREVIEW_PREPAID_OFFER,
+      payload: isPreview
+    });
+    await dispatch({
+      type: constants.UNAUTHORIZED
+    });
+    await dispatch(
+      receiveOffer(
+        {
+          in_stock: { [productId]: true },
+          eligibility_groups: { [productId]: ['subscription', 'upsell', 'prepaid'] },
+          result: 'success',
+          autoship: { [productId]: true },
+          autoship_by_default: { [productId]: false },
+          modifiers: {},
+          module_view: { regular: '096135e6650111e9a444bc764e106cf4' },
+          incentives_display: {
+            '47c01e9aacbe40389b5c7325d79091aa': {
+              field: 'sub_total',
+              object: 'order',
+              type: 'Discount Percent',
+              value: 5
+            },
+            e6534b9d877f41e586c37b7d8abc3a58: {
+              field: 'total_price',
+              object: 'item',
+              type: 'Discount Percent',
+              value: 10
+            },
+            f35e842710b24929922db4a529eecd40: {
+              field: 'total_price',
+              object: 'item',
+              type: 'Discount Percent',
+              value: 10
+            },
+            '5be321d7c17f4e18a757212b9a20bfcc': {
+              field: 'total_price',
+              object: 'item',
+              type: 'Discount Percent',
+              value: 1
+            }
+          },
+          incentives: {
+            [productId]: {
+              initial: ['5be321d7c17f4e18a757212b9a20bfcc'],
+              ongoing: [
+                'e6534b9d877f41e586c37b7d8abc3a58',
+                '47c01e9aacbe40389b5c7325d79091aa',
+                'f35e842710b24929922db4a529eecd40'
+              ]
+            }
+          }
+        },
+        offer
+      )
+    );
+    await dispatch({
+      type: constants.RECEIVE_PRODUCT_PLANS,
+      payload: mergeProductPlansToState(
+        existingProductPlans,
+        getObjectStructuredProductPlans({
+          [productId]: [
+            {
+              frequency: '1_3',
+              regularPrice: '$15.00',
+              subscriptionPrice: '$12.00',
+              discountRate: '25%',
+              prepaidShipments: 3,
+              regularPrepaidPrice: '$36.00',
+              prepaidSavingsPerShipment: '$3.00',
+              prepaidSavingsTotal: '$9.00',
+              prepaidExtraSavingsPercentage: '10%'
+            },
+            {
+              frequency: '1_3',
+              regularPrice: '$15.00',
+              subscriptionPrice: '$12.00',
+              discountRate: '20%',
+              prepaidShipments: 6,
+              regularPrepaidPrice: '$72.00',
+              prepaidSavingsPerShipment: '$3.00',
+              prepaidSavingsTotal: '$18.00',
+              prepaidExtraSavingsPercentage: '10%'
+            },
+            {
+              frequency: '1_3',
+              regularPrice: '$15.00',
+              subscriptionPrice: '$12.00',
+              discountRate: '20%',
+              prepaidShipments: 12,
+              regularPrepaidPrice: '$144.00',
+              prepaidSavingsPerShipment: '$3.00',
+              prepaidSavingsTotal: '$36.00',
+              prepaidExtraSavingsPercentage: '10%'
+            }
+          ]
+        })
+      )
+    });
+    await dispatch({
+      type: constants.SET_CONFIG,
+      payload: {
+        prepaidSellingPlans: {
+          [productId]: [
+            {
+              numberShipments: 3,
+              sellingPlan: '1_3'
+            },
+            {
+              numberShipments: 6,
+              sellingPlan: '1_3'
+            },
+            {
+              numberShipments: 12,
+              sellingPlan: '1_3'
+            }
+          ]
+        }
+      }
+    });
+  };
+
 export const setPreview = (value, oldValue, offer) =>
   async function(dispatch, getState) {
     await dispatch({ type: constants.LOCAL_STORAGE_CLEAR });
@@ -145,6 +286,11 @@ export const setPreview = (value, oldValue, offer) =>
         dispatch(setPreviewStandardOffer(true, offer.product.id, offer));
         dispatch(optinProduct(offer.product, '2_2'));
         break;
+      case 'prepaid':
+        dispatch(setPreviewPrepaid(true, offer.product.id, offer));
+        // Prepaid needs to be subscribed to appear
+        dispatch(optinProduct(offer.product, '1_3'));
+        break;
       default:
     }
   };

package/src/core/constants.js

@@ -31,6 +31,7 @@ export const SET_LOCALE = 'SET_LOCALE';
 export const SET_CONFIG = 'SET_CONFIG';
 export const SET_PREVIEW_STANDARD_OFFER = 'SET_PREVIEW_STANDARD_OFFER';
 export const SET_PREVIEW_UPSELL_OFFER = 'SET_PREVIEW_UPSELL_OFFER';
+export const SET_PREVIEW_PREPAID_OFFER = 'SET_PREVIEW_PREPAID_OFFER';
 export const ADD_TEMPLATE = 'ADD_TEMPLATE';
 export const SET_TEMPLATES = 'SET_TEMPLATES';
 export const LOCAL_STORAGE_CHANGE = 'LOCAL_STORAGE_CHANGE';

package/src/core/reducer.js

@@ -420,6 +420,15 @@ export const previewUpsellOffer = (state = false, action) => {
   }
 };
 
+export const previewPrepaidOffer = (state = false, action) => {
+  switch (action.type) {
+    case constants.SET_PREVIEW_PREPAID_OFFER:
+      return action.payload;
+    default:
+      return state;
+  }
+};
+
 export const autoshipByDefault = (state = [], action) => {
   switch (action.type) {
     case constants.RECEIVE_OFFER:

package/src/shopify/shopifyMiddleware.ts

@@ -27,14 +27,15 @@ const PRODUCTS_URL = `${SHOPIFY_ROOT}products/`;
  */
 const DEFAULT_SHOPIFY_CART_AJAX_SECTIONS =
   '[id^="shopify-section-"][id$=__cart-items], [id^="shopify-section-"][id$="__cart-footer"],#cart-live-region-text,#cart-icon-bubble';
-const syncProductId = debounce(100, false, function(form, offer) {
-  const { id } = Object.fromEntries([...new FormData(form).entries()]);
-  if (id) {
-    offer.setAttribute('product', id);
-  } else {
-    offer.removeAttribute('product');
-  }
-});
+const makeSyncProductId = offer =>
+  debounce(100, false, function(form) {
+    const { id } = Object.fromEntries([...new FormData(form).entries()]);
+    if (id) {
+      offer.setAttribute('product', id);
+    } else {
+      offer.removeAttribute('product');
+    }
+  });
 
 async function setupPdp(store, offer) {
   const handle = guessProductHandle(offer);
@@ -48,7 +49,6 @@ async function setupPdp(store, offer) {
   }
   // try closest form (safer)
   let form = offer.closest('form');
-
   // sometimes template is so closest does not work
   // <div>
   //   <og-offer ..>
@@ -69,8 +69,9 @@ async function setupPdp(store, offer) {
 
   if (form) {
     // since syncProductId is debounced not matter which comes first mutation or onchange
-    form.addEventListener('change', ev => syncProductId(form, offer));
-    const mo = new MutationObserver(() => syncProductId(form, offer));
+    const syncProductId = makeSyncProductId(offer);
+    form.addEventListener('change', ev => syncProductId(form));
+    const mo = new MutationObserver(() => syncProductId(form));
     mo.observe(form, { subtree: true, childList: true });
   } else {
     console.info('no /cart/add form found for og-offer', offer);