@ordergroove/offers 2.30.2-alpha-PR-715-5.3 → 2.30.3

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-alpha-PR-715-5.3+1cc1ca11",
+  "version": "2.30.3",
   "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": "1cc1ca119c0d7aaaf8552855075f89a62dbd3049"
+  "gitHead": "8133777abaeacaf6acdac2bef33ee1b2aa5b72c7"
 }

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/components/Price.js

@@ -25,7 +25,7 @@ export class Price extends withProduct(TemplateElement) {
     const plans = this.productPlans[realProductId] || [];
 
     if (this.payAsYouGo) {
-      const payAsYouGoPlan = plans.find(plan => plan.prepaidShipments === null);
+      const payAsYouGoPlan = plans.find(plan => plan.prepaidShipments === null || plan.prepaidShipments === undefined);
       if (!payAsYouGoPlan) return '';
       return payAsYouGoPlan.subscriptionPrice;
     }

package/src/components/__tests__/Price.spec.js

@@ -72,6 +72,75 @@ describe('Price', () => {
     expect(insideText).toBe('10%');
   });
 
+  it('should render payAsYouGo price with undefined prepaidShipments', async () => {
+    const template = html`
+      <og-some-price pay-as-you-go product="yum id"> </og-some-price>
+    `;
+    const priceDivUndefinedPrepaid = await renderPriceTemplate(template, {
+      frequency: '1_3',
+      productPlans: {
+        'yum id': [
+          {
+            frequency: '1_3',
+            regularPrice: '$1.00',
+            discountRate: '10%',
+            subscriptionPrice: '$1.00',
+            prepaidShipments: 3
+          },
+          {
+            frequency: '1_3',
+            regularPrice: '$1.00',
+            discountRate: '10%',
+            subscriptionPrice: '$2.00'
+          },
+          {
+            frequency: '1_3',
+            regularPrice: '$1.00',
+            discountRate: '10%',
+            subscriptionPrice: '$1.00',
+            prepaidShipments: 6
+          }
+        ]
+      }
+    });
+  });
+
+  it('should render payAsYouGo price with nullish prepaidShipments', async () => {
+    const template = html`
+      <og-some-price pay-as-you-go product="yum id"> </og-some-price>
+    `;
+    const priceDivNullPrepaid = await renderPriceTemplate(template, {
+      frequency: '1_3',
+      productPlans: {
+        'yum id': [
+          {
+            frequency: '1_3',
+            regularPrice: '$1.00',
+            discountRate: '10%',
+            subscriptionPrice: '$1.00',
+            prepaidShipments: 3
+          },
+          {
+            frequency: '1_3',
+            regularPrice: '$1.00',
+            discountRate: '10%',
+            subscriptionPrice: '$4.50',
+            prepaidShipments: null
+          },
+          {
+            frequency: '1_3',
+            regularPrice: '$1.00',
+            discountRate: '10%',
+            subscriptionPrice: '$1.00',
+            prepaidShipments: 6
+          }
+        ]
+      }
+    });
+    const ogPriceNullPrepaid = priceDivNullPrepaid.shadowRoot.innerHTML;
+    expect(ogPriceNullPrepaid).toContain('$4.50');
+  });
+
   it('should render empty price when subscription is equal to regular', async () => {
     const template = html`
       <og-some-price discount product="yum id"> </og-some-price>

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/__tests__/productPlan.spec.js

@@ -236,6 +236,50 @@ describe('Shopify productPlan Reducer', () => {
 
       expect(newProductPlan).toEqual(expectedProductPlan);
     });
+
+    it('should deal with dividing integers and not add decimals to prices/discounts that are added', () => {
+      const allocation = {
+        price: 4798,
+        compare_at_price: 1999,
+        selling_plan: {
+          options: [
+            {
+              name: 'Delivery every',
+              position: 1,
+              value: 'PREPAID-1 month'
+            },
+            {
+              name: 'Shipment amount',
+              position: 2,
+              value: '3 shipments'
+            }
+          ]
+        }
+      };
+
+      const productPlan = {
+        frequency: '688412852500',
+        regularPrice: '19.99',
+        subscriptionPrice: '$15.99',
+        discountRate: '20%',
+        prepaidShipments: 3
+      };
+
+      const expectedProductPlan = {
+        frequency: '688412852500',
+        regularPrice: '19.99',
+        subscriptionPrice: '$15.99',
+        discountRate: '20%',
+        prepaidShipments: 3,
+        regularPrepaidPrice: '$47.98',
+        prepaidSavingsPerShipment: '$4.00',
+        prepaidSavingsTotal: '$11.99'
+      };
+
+      const newProductPlan = addPrepaidPriceAndSavings(allocation, productPlan);
+
+      expect(newProductPlan).toEqual(expectedProductPlan);
+    });
   });
 
   describe('mapSellingPlanToDiscount', () => {