@ordergroove/offers 2.29.0 → 2.29.1-alpha-PR-707-2.113

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

@@ -0,0 +1,25 @@
+import { money, percentage } from '../utils';
+
+describe('Shopify Utils', () => {
+  describe('Money', () => {
+    it('Should return formatted greater than $1 money price', () => {
+      const price = 1000;
+      const formattedPrice = money(price);
+      expect(formattedPrice).toBe('$10.00');
+    });
+
+    it('Should return formatted lower than $1 money price', () => {
+      const price = 50;
+      const formattedPrice = money(price);
+      expect(formattedPrice).toBe('$.50');
+    });
+  });
+
+  describe('Percentage', () => {
+    it('Should return percentage', () => {
+      const price = 10;
+      const formattedPrice = percentage(price);
+      expect(formattedPrice).toBe('10%');
+    });
+  });
+});

package/src/shopify/reducers/productPlans.ts

@@ -0,0 +1,134 @@
+import { money, percentage } from '../utils';
+import { ShopifyProductEntity, ShopifySellingPlanAllocationsEntity, ShopifySellingPlansEntity } from '../types/shopify';
+import { ProductPlanEntity } from '../types/productPlan';
+
+export const isPrepaidAllocation = (allocation: ShopifySellingPlanAllocationsEntity) =>
+  Array.isArray(allocation.selling_plan?.options) &&
+  allocation.selling_plan?.options.some(option => option?.name === 'Shipment amount');
+
+export const getPrepaidShipmentsNumberFromOptions = options => {
+  if (options && options.length > 1) {
+    const shipmentAmountArray = options.find(option => option?.name === 'Shipment amount').value.split(' ');
+    return shipmentAmountArray.length > 0 ? +shipmentAmountArray[0] : null;
+  }
+
+  return null;
+};
+
+export const getAllocationFrequency = (allocation: ShopifySellingPlanAllocationsEntity) => {
+  // now frequency every_period will match with selling_plan_id so no need to convert it
+  return (allocation.selling_plan_id || allocation.selling_plan?.id).toString();
+};
+
+export const getAllocationRegularPrice = (allocation: ShopifySellingPlanAllocationsEntity) => {
+  return money(allocation.compare_at_price);
+};
+
+export const getAllocationSubscriptionPrice = (allocation: ShopifySellingPlanAllocationsEntity) => {
+  if (isPrepaidAllocation(allocation)) {
+    const prepaidShipmentsPerBilling = getPrepaidShipmentsNumberFromOptions(allocation.selling_plan?.options);
+    const pricePerShipment = allocation.price / prepaidShipmentsPerBilling;
+    return money(pricePerShipment);
+  }
+
+  return money(allocation.price);
+};
+
+const getPrepaidPercentage = (allocation: ShopifySellingPlanAllocationsEntity, pricePerShipment: number) => {
+  return ((allocation.compare_at_price - pricePerShipment) * 100) / allocation.compare_at_price;
+};
+
+export const getAllocationDiscountRate = (allocation: ShopifySellingPlanAllocationsEntity) => {
+  if (isPrepaidAllocation(allocation)) {
+    const prepaidShipmentsPerBilling = getPrepaidShipmentsNumberFromOptions(allocation.selling_plan?.options);
+    const pricePerShipment = allocation.price / prepaidShipmentsPerBilling;
+    const prepaidPercentageSavings = getPrepaidPercentage(allocation, pricePerShipment);
+
+    return percentage(prepaidPercentageSavings);
+  }
+
+  let formatted_discount = '';
+
+  if (allocation.price_adjustments[0]?.value_type === 'percentage') {
+    formatted_discount = percentage(allocation.price_adjustments[0].value);
+  } else if (allocation.price_adjustments[0]?.value) {
+    formatted_discount = money(allocation.price_adjustments[0].value);
+  } else if (allocation.compare_at_price) {
+    formatted_discount = money(allocation.compare_at_price - allocation.price);
+  }
+
+  return formatted_discount;
+};
+
+export const getAllocationNumberOfShipments = (allocation: ShopifySellingPlanAllocationsEntity) => {
+  if (isPrepaidAllocation(allocation)) {
+    return getPrepaidShipmentsNumberFromOptions(allocation.selling_plan?.options);
+  }
+  return null;
+};
+
+export const addPrepaidPriceAndSavings = (
+  allocation: ShopifySellingPlanAllocationsEntity,
+  productPlan: ProductPlanEntity,
+  payAsYouGoPlan: ShopifySellingPlansEntity
+) => {
+  const prepaidShipmentsPerBilling = getPrepaidShipmentsNumberFromOptions(allocation.selling_plan?.options);
+  const pricePerShipment = allocation.price / prepaidShipmentsPerBilling;
+  const prepaidSaving = allocation.compare_at_price - pricePerShipment;
+  const prepaidPercentageSavings = getPrepaidPercentage(allocation, pricePerShipment);
+  const payAsYouGoAdjustment = payAsYouGoPlan?.price_adjustments?.[0];
+  const payAsYouGoPercentage =
+    payAsYouGoAdjustment && payAsYouGoAdjustment.value_type === 'percentage' ? payAsYouGoAdjustment.value : null;
+
+  productPlan['regularPrepaidPrice'] = money(allocation.price);
+  productPlan['prepaidSavingsPerShipment'] = money(prepaidSaving);
+  productPlan['prepaidSavingsTotal'] = money(prepaidSaving * prepaidShipmentsPerBilling);
+
+  if (payAsYouGoPercentage && prepaidPercentageSavings) {
+    productPlan['prepaidExtraSavingsPercentage'] = percentage(prepaidPercentageSavings - payAsYouGoPercentage);
+  }
+
+  return productPlan;
+};
+
+export const DEFAULT_PAY_AS_YOU_GO_GROUP_NAME = 'Subscribe and Save';
+
+export const mapSellingPlanToDiscount = (
+  allocation: ShopifySellingPlanAllocationsEntity,
+  sellingPlans: ShopifySellingPlansEntity[] = []
+) => {
+  if (!allocation.selling_plan) {
+    allocation.selling_plan = sellingPlans.find(plan => plan.id === allocation.selling_plan_id);
+  }
+
+  const productPlan: ProductPlanEntity = {
+    frequency: getAllocationFrequency(allocation),
+    regularPrice: getAllocationRegularPrice(allocation),
+    subscriptionPrice: getAllocationSubscriptionPrice(allocation),
+    discountRate: getAllocationDiscountRate(allocation),
+    prepaidShipments: getAllocationNumberOfShipments(allocation)
+  };
+
+  if (isPrepaidAllocation(allocation)) {
+    const payAsYouGoPlan = sellingPlans.find(
+      plan => plan.group_name === DEFAULT_PAY_AS_YOU_GO_GROUP_NAME && plan.options.length === 1
+    );
+    return addPrepaidPriceAndSavings(allocation, productPlan, payAsYouGoPlan);
+  }
+
+  return productPlan;
+};
+
+export const sellingPlanAllocationsReducer = (acc, cur, sellingPlans = []) => [
+  ...acc,
+  mapSellingPlanToDiscount(cur, sellingPlans)
+];
+
+export const getSellingPlans = (product: ShopifyProductEntity) =>
+  product.selling_plan_groups.reduce(
+    (allGroups, group) => [
+      ...allGroups,
+      ...group.selling_plans.map(selling_plan => ({ ...selling_plan, group_name: group.name }))
+    ],
+    []
+  );

package/src/shopify/shopifyMiddleware.ts

@@ -6,6 +6,7 @@ import {
   OPTIN_PRODUCT,
   OPTOUT_PRODUCT,
   PRODUCT_CHANGE_FREQUENCY,
+  PRODUCT_CHANGE_PREPAID_SHIPMENTS,
   RECEIVE_OFFER,
   REQUEST_OFFER,
   SETUP_CART,
@@ -345,6 +346,8 @@ export default function shopifyMiddleware(store) {
       case OPTOUT_PRODUCT:
       case PRODUCT_CHANGE_FREQUENCY:
         synchronizeCartOptin(action, store);
+      // eslint-disable-next-line no-fallthrough
+      case PRODUCT_CHANGE_PREPAID_SHIPMENTS:
       case REQUEST_OFFER:
       case RECEIVE_OFFER:
       case SETUP_PRODUCT:

package/src/shopify/shopifyReducer.js

@@ -21,36 +21,24 @@ import baseReducer, {
   previewUpsellOffer,
   productToSubscribe,
   sessionId,
-  templates
+  templates,
+  prepaidShipmentsSelected
 } from '../core/reducer';
 import {
   getFirstSellingPlan,
   hasShopifySellingPlans,
   isOgFrequency,
   mapFrequencyToSellingPlan,
-  safeProductId
+  safeProductId,
+  getMatchingProductIfExists
 } from '../core/utils';
 
-const money = val => (val === null ? '' : `$${val.toString().replace(/(\d\d)$/, '.$1')}`);
-
-const percentage = val => `${val}%`;
-
-const mapSellingPlanToDiscount = allocation => {
-  let formatted_discount = '';
-  if (allocation.price_adjustments[0]?.value_type === 'percentage') {
-    formatted_discount = percentage(allocation.price_adjustments[0].value);
-  } else if (allocation.price_adjustments[0]?.value) {
-    formatted_discount = money(allocation.price_adjustments[0].value);
-  } else if (allocation.compare_at_price) {
-    formatted_discount = money(allocation.compare_at_price - allocation.price);
-  }
-
-  if (formatted_discount) {
-    return [money(allocation.compare_at_price), formatted_discount, money(allocation.price)];
-  }
-
-  return [money(allocation.price), '', money(allocation.price)];
-};
+import { getObjectStructuredProductPlans } from '../core/adapters';
+import {
+  sellingPlanAllocationsReducer,
+  getSellingPlans,
+  DEFAULT_PAY_AS_YOU_GO_GROUP_NAME
+} from './reducers/productPlans';
 
 const overrideLineKey = (state, productId, newValue) => {
   const keys = Object.keys(state).filter(it => it.startsWith(productId.toString()));
@@ -140,7 +128,7 @@ export const reduceNewOptinsFromOfferResponse = (
 
 const getOGSellingPlanGroup = product => {
   const sellingPlanGroup = product?.selling_plan_groups.find(group => {
-    return group.name === 'Subscribe and Save';
+    return group.name === DEFAULT_PAY_AS_YOU_GO_GROUP_NAME;
   });
   return sellingPlanGroup;
 };
@@ -152,12 +140,6 @@ const productOrVariantInStockReducer = (acc, cur) => ({
 
 const productTrue = (acc, [id]) => ({ ...acc, [id]: true });
 
-const sellingPlanAllocationsReducer = (acc, cur) => ({
-  ...acc,
-  // now frequency every_period will match with selling_plan_id so no need to convert it
-  [cur.selling_plan_id || cur.selling_plan?.id]: mapSellingPlanToDiscount(cur)
-});
-
 const reduceProductCartLine = (acc, cur) => {
   const productId = safeProductId(cur.key);
   return { ...acc, [cur.key]: acc[productId] || null };
@@ -210,6 +192,26 @@ export function sellingPlansToFrequencies(sellingPlanGroup) {
   return sellingPlanGroup?.selling_plans?.map(({ id }) => `${id}`);
 }
 
+function getPrepaidShipments(sellingPlan) {
+  const shipments = sellingPlan?.options.find(({ name }) => name === 'Shipment amount')?.value.split(' ')[0];
+  return shipments ? Number(shipments) : undefined;
+}
+
+function getPrepaidSellingPlans(prepaidSellingPlanGroups) {
+  return prepaidSellingPlanGroups.reduce((acc, cur) => {
+    const variant = cur.name.split('-')[1];
+
+    const sellingPlanInfo = cur.selling_plans.map(sellingPlanObject => {
+      return {
+        numberShipments: getPrepaidShipments(sellingPlanObject),
+        sellingPlan: String(sellingPlanObject.id)
+      };
+    });
+
+    return { ...acc, [variant]: sellingPlanInfo };
+  }, {});
+}
+
 export const config = (
   state = {
     frequencies: [],
@@ -236,8 +238,10 @@ export const config = (
     const {
       payload: { offer: offerEl, product }
     } = action;
+    let configToAdd = {};
+    // pay as you go selling plans
     const sellingPlanGroup = getOGSellingPlanGroup(product);
-    const frequencies = sellingPlanGroup?.selling_plans?.map(({ id }) => `${id}`);
+    const frequencies = sellingPlansToFrequencies(sellingPlanGroup);
     if (frequencies?.length) {
       const frequenciesEveryPeriod = sellingPlansToEveryPeriod(sellingPlanGroup);
       const frequenciesText = sellingPlanGroup.options?.[0]?.values || frequencies;
@@ -249,15 +253,26 @@ export const config = (
           getFirstSellingPlan(frequencies) ||
           defaultFrequency;
       }
-
-      return {
-        ...state,
-        frequenciesEveryPeriod,
+      configToAdd = {
         frequencies,
+        frequenciesEveryPeriod,
         frequenciesText,
         ...(defaultFrequency ? { defaultFrequency } : {})
       };
     }
+
+    // prepaid selling plans
+    const prepaidSellingPlanGroups = product?.selling_plan_groups.filter(group => /^Prepaid-.*/.test(group.name));
+    if (prepaidSellingPlanGroups.length) {
+      configToAdd = {
+        ...configToAdd,
+        prepaidSellingPlans: getPrepaidSellingPlans(prepaidSellingPlanGroups)
+      };
+    }
+    return {
+      ...state,
+      ...configToAdd
+    };
   }
 
   if (constants.RECEIVE_OFFER === action.type) {
@@ -310,20 +325,33 @@ export const inStock = (state = {}, action) => {
 
 export const offer = (state = {}, action) => state;
 
+function getFrequencyForPrepaidShipments({ prepaidShipments, offer: offerEl, product }) {
+  if (prepaidShipments) {
+    const productId = product.id;
+    const plan = offerEl.config.prepaidSellingPlans[productId]?.find(p => p.numberShipments === prepaidShipments);
+    return plan ? plan.sellingPlan : null;
+  }
+  return offerEl.config.frequencies[0];
+}
+
+function getOptedInItem(cartItem) {
+  const prepaidShipments = getPrepaidShipments(cartItem.selling_plan_allocation.selling_plan);
+  const item = {
+    id: cartItem.key,
+    frequency: `${cartItem.selling_plan_allocation.selling_plan.id}`
+  };
+  if (prepaidShipments) {
+    item.prepaidShipments = prepaidShipments;
+  }
+  return item;
+}
+
 export const optedin = (state = [], action) => {
   if (constants.SETUP_CART === action.type) {
     const cart = action.payload;
     return state
       .filter(it => !it.id.includes(':'))
-      .concat(
-        cart.items.reduce(
-          (acc, cur) =>
-            cur.selling_plan_allocation
-              ? [...acc, { id: cur.key, frequency: `${cur.selling_plan_allocation.selling_plan.id}` }]
-              : acc,
-          []
-        )
-      );
+      .concat(cart.items.reduce((acc, cur) => (cur.selling_plan_allocation ? [...acc, getOptedInItem(cur)] : acc), []));
   }
 
   if (constants.RECEIVE_OFFER === action.type) {
@@ -354,6 +382,19 @@ export const optedin = (state = [], action) => {
     });
   }
 
+  if (constants.PRODUCT_CHANGE_PREPAID_SHIPMENTS === action.type) {
+    const { payload } = action;
+    // core reducer sets prepaid shipments
+    const newState = coreOptedin(state, action);
+    // get the new frequency (selling plan) that matches the prepaid shipments
+    const [oldone, rest] = getMatchingProductIfExists(newState, payload.product);
+    return rest.concat({
+      ...oldone,
+      ...payload.product,
+      frequency: getFrequencyForPrepaidShipments(payload)
+    });
+  }
+
   return coreOptedin(state, action);
 };
 
@@ -364,11 +405,18 @@ export const productPlans = (state = {}, action) => {
     const {
       payload: { product }
     } = action;
+
+    const sellingPlans = getSellingPlans(product);
+
     return (
+      // We consider the product here as well for cases where we don't have any variants
       [product, ...product?.variants]?.reduce(
         (acc, cur) => ({
           ...acc,
-          [cur.id]: cur.selling_plan_allocations?.reduce(sellingPlanAllocationsReducer, {})
+          [cur.id]: cur.selling_plan_allocations?.reduce(
+            (accumulator, current) => sellingPlanAllocationsReducer(accumulator, current, sellingPlans),
+            []
+          )
         }),
         state
       ) || state
@@ -382,7 +430,7 @@ export const productPlans = (state = {}, action) => {
           cur.selling_plan_allocation
             ? {
                 ...acc,
-                [cur.key]: sellingPlanAllocationsReducer({}, cur.selling_plan_allocation)
+                [cur.key]: sellingPlanAllocationsReducer([], cur.selling_plan_allocation)
               }
             : acc,
         state
@@ -390,7 +438,7 @@ export const productPlans = (state = {}, action) => {
     );
   }
   if (constants.RECEIVE_PRODUCT_PLANS === action.type) {
-    return { ...action.payload };
+    return getObjectStructuredProductPlans(action.payload);
   }
   return state;
 };
@@ -420,7 +468,8 @@ const reducer = combineReducers({
   productPlans,
   productToSubscribe,
   sessionId,
-  templates
+  templates,
+  prepaidShipmentsSelected
 });
 
 export default function shopifyReducer(state, action) {

package/src/shopify/shopifyTrackingMiddleware.ts

@@ -1,4 +1,4 @@
-import { OPTIN_PRODUCT, OPTOUT_PRODUCT, PRODUCT_CHANGE_FREQUENCY, RECEIVE_OFFER, SETUP_PRODUCT } from '../core/constants';
+import { OPTIN_PRODUCT, OPTOUT_PRODUCT, PRODUCT_CHANGE_FREQUENCY, RECEIVE_OFFER } from '../core/constants';
 import { getTrackingEvent, getSubscribedFrequency } from './shopifyMiddleware';
 
 /**

package/src/shopify/types/productPlan.ts

@@ -0,0 +1,11 @@
+export interface ProductPlanEntity {
+  frequency: string;
+  regularPrice: string;
+  subscriptionPrice: string;
+  discountRate: string;
+  prepaidShipments: number;
+  regularPrepaidPrice?: string;
+  prepaidSavingsPerShipment?: string;
+  prepaidSavingsTotal?: string;
+  prepaidExtraSavingsPercentage?: string;
+}

package/src/shopify/types/shopify.ts

@@ -0,0 +1,98 @@
+export interface ShopifyPriceAdjustmentsEntity {
+  position: number;
+  price?: number;
+  order_count?: null;
+  value_type?: string;
+  value?: number;
+}
+
+export interface ShopifyAllOptionsEntity {
+  name: string;
+  position: number;
+  values?: string[] | null;
+}
+
+export interface ShopifyOptionsEntity {
+  name: string;
+  position: number;
+  value: string;
+}
+
+export interface ShopifySellingPlansEntity {
+  id: number;
+  name: string;
+  description?: null;
+  options?: ShopifyOptionsEntity[] | null;
+  recurring_deliveries: boolean;
+  price_adjustments?: ShopifyPriceAdjustmentsEntity[] | null;
+  group_name?: string;
+}
+
+export interface ShopifySellingPlanGroupsEntity {
+  id: string;
+  name: string;
+  options?: ShopifyAllOptionsEntity[] | null;
+  selling_plans?: ShopifySellingPlansEntity[] | null;
+  app_id?: null;
+}
+
+export interface ShopifySellingPlanAllocationsEntity {
+  price_adjustments?: ShopifyPriceAdjustmentsEntity[] | null;
+  price: number;
+  compare_at_price: number;
+  per_delivery_price: number;
+  selling_plan_id: number;
+  selling_plan_group_id: string;
+  selling_plan?: ShopifySellingPlansEntity;
+}
+
+export interface ShopifyVariantsEntity {
+  id: number;
+  title: string;
+  option1: string;
+  option2?: null;
+  option3?: null;
+  sku: string;
+  requires_shipping: boolean;
+  taxable: boolean;
+  featured_image?: null;
+  available: boolean;
+  name: string;
+  public_title: string;
+  options?: string[] | null;
+  price: number;
+  weight: number;
+  compare_at_price?: null;
+  inventory_management: string;
+  barcode: string;
+  requires_selling_plan: boolean;
+  selling_plan_allocations?: ShopifySellingPlanAllocationsEntity[] | null;
+}
+
+export interface ShopifyProductEntity {
+  id: number;
+  title: string;
+  handle: string;
+  description: string;
+  published_at: string;
+  created_at: string;
+  vendor: string;
+  type: string;
+  tags?: null[] | null;
+  price: number;
+  price_min: number;
+  price_max: number;
+  available: boolean;
+  price_varies: boolean;
+  compare_at_price?: null;
+  compare_at_price_min: number;
+  compare_at_price_max: number;
+  compare_at_price_varies: boolean;
+  variants?: ShopifyVariantsEntity[] | null;
+  images?: null[] | null;
+  featured_image?: null;
+  options?: ShopifyAllOptionsEntity[] | null;
+  url: string;
+  requires_selling_plan: boolean;
+  selling_plan_groups?: ShopifySellingPlanGroupsEntity[] | null;
+}

package/src/shopify/utils.ts

@@ -0,0 +1,3 @@
+export const money = val => (val === null ? '' : `$${val.toString().replace(/(\d\d)$/, '.$1')}`);
+
+export const percentage = val => `${val}%`;