@ordergroove/offers 2.34.9 → 2.35.0

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

@@ -4,14 +4,18 @@ describe('Shopify Utils', () => {
   describe('Money', () => {
     it('Should return formatted greater than $1 money price', () => {
       const price = 1000;
-      const formattedPrice = money(price);
+      const formattedPrice = money(price, 'USD');
       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');
+      const formattedPrice = money(price, 'USD');
+      expect(formattedPrice).toBe('$0.50');
+    });
+
+    it('Should format JPY values', () => {
+      expect(money(310000, 'JPY')).toBe('¥3,100');
     });
   });
 

package/src/shopify/reducers/productPlans.ts

@@ -20,25 +20,25 @@ export const getAllocationFrequency = (allocation: ShopifySellingPlanAllocations
   return (allocation.selling_plan_id || (allocation.selling_plan?.id ?? '')).toString();
 };
 
-export const getAllocationRegularPrice = (allocation: ShopifySellingPlanAllocationsEntity) => {
-  return money(allocation.compare_at_price);
+export const getAllocationRegularPrice = (allocation: ShopifySellingPlanAllocationsEntity, currency: string) => {
+  return money(allocation.compare_at_price, currency);
 };
 
-export const getAllocationSubscriptionPrice = (allocation: ShopifySellingPlanAllocationsEntity) => {
+export const getAllocationSubscriptionPrice = (allocation: ShopifySellingPlanAllocationsEntity, currency: string) => {
   if (isPrepaidAllocation(allocation)) {
     const prepaidShipmentsPerBilling = getPrepaidShipmentsNumberFromOptions(allocation.selling_plan?.options);
     const pricePerShipment = Math.round(allocation.price / prepaidShipmentsPerBilling);
-    return money(pricePerShipment);
+    return money(pricePerShipment, currency);
   }
 
-  return money(allocation.price);
+  return money(allocation.price, currency);
 };
 
 const getPrepaidPercentage = (allocation: ShopifySellingPlanAllocationsEntity, pricePerShipment: number) => {
   return Math.round(((allocation.compare_at_price - pricePerShipment) * 100) / allocation.compare_at_price);
 };
 
-export const getAllocationDiscountRate = (allocation: ShopifySellingPlanAllocationsEntity) => {
+export const getAllocationDiscountRate = (allocation: ShopifySellingPlanAllocationsEntity, currency: string) => {
   if (isPrepaidAllocation(allocation)) {
     const prepaidShipmentsPerBilling = getPrepaidShipmentsNumberFromOptions(allocation.selling_plan?.options);
     const pricePerShipment = allocation.price / prepaidShipmentsPerBilling;
@@ -52,9 +52,9 @@ export const getAllocationDiscountRate = (allocation: ShopifySellingPlanAllocati
   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);
+    formatted_discount = money(allocation.price_adjustments[0].value, currency);
   } else if (allocation.compare_at_price) {
-    formatted_discount = money(allocation.compare_at_price - allocation.price);
+    formatted_discount = money(allocation.compare_at_price - allocation.price, currency);
   }
 
   return formatted_discount;
@@ -70,7 +70,8 @@ export const getAllocationNumberOfShipments = (allocation: ShopifySellingPlanAll
 export const addPrepaidPriceAndSavings = (
   allocation: ShopifySellingPlanAllocationsEntity,
   productPlan: ProductPlanEntity,
-  payAsYouGoPlan: ShopifySellingPlansEntity
+  payAsYouGoPlan: ShopifySellingPlansEntity,
+  currency: string
 ) => {
   const prepaidShipmentsPerBilling = getPrepaidShipmentsNumberFromOptions(allocation.selling_plan?.options);
   const pricePerShipment = allocation.price / prepaidShipmentsPerBilling;
@@ -80,9 +81,9 @@ export const addPrepaidPriceAndSavings = (
   const payAsYouGoPercentage =
     payAsYouGoAdjustment && payAsYouGoAdjustment.value_type === 'percentage' ? payAsYouGoAdjustment.value : null;
 
-  productPlan['regularPrepaidPrice'] = money(allocation.price);
-  productPlan['prepaidSavingsPerShipment'] = money(Math.round(prepaidSaving));
-  productPlan['prepaidSavingsTotal'] = money(Math.round(prepaidSaving * prepaidShipmentsPerBilling));
+  productPlan['regularPrepaidPrice'] = money(allocation.price, currency);
+  productPlan['prepaidSavingsPerShipment'] = money(Math.round(prepaidSaving), currency);
+  productPlan['prepaidSavingsTotal'] = money(Math.round(prepaidSaving * prepaidShipmentsPerBilling), currency);
 
   if (payAsYouGoPercentage && prepaidPercentageSavings) {
     productPlan['prepaidExtraSavingsPercentage'] = percentage(prepaidPercentageSavings - payAsYouGoPercentage);
@@ -95,7 +96,8 @@ export const DEFAULT_PAY_AS_YOU_GO_GROUP_NAME = 'Subscribe and Save';
 
 export const mapSellingPlanToDiscount = (
   allocation: ShopifySellingPlanAllocationsEntity,
-  sellingPlans: ShopifySellingPlansEntity[] = []
+  sellingPlans: ShopifySellingPlansEntity[],
+  currency: string
 ) => {
   if (!allocation.selling_plan) {
     allocation.selling_plan = sellingPlans.find(plan => plan.id === allocation.selling_plan_id);
@@ -103,9 +105,9 @@ export const mapSellingPlanToDiscount = (
 
   const productPlan: ProductPlanEntity = {
     frequency: getAllocationFrequency(allocation),
-    regularPrice: getAllocationRegularPrice(allocation),
-    subscriptionPrice: getAllocationSubscriptionPrice(allocation),
-    discountRate: getAllocationDiscountRate(allocation),
+    regularPrice: getAllocationRegularPrice(allocation, currency),
+    subscriptionPrice: getAllocationSubscriptionPrice(allocation, currency),
+    discountRate: getAllocationDiscountRate(allocation, currency),
     prepaidShipments: getAllocationNumberOfShipments(allocation)
   };
 
@@ -113,7 +115,7 @@ export const mapSellingPlanToDiscount = (
     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 addPrepaidPriceAndSavings(allocation, productPlan, payAsYouGoPlan, currency);
   }
 
   return productPlan;
@@ -122,8 +124,9 @@ export const mapSellingPlanToDiscount = (
 export const sellingPlanAllocationsReducer = (
   acc: ProductPlanEntity[],
   cur: ShopifySellingPlanAllocationsEntity,
-  sellingPlans: ShopifySellingPlansEntity[] = []
-) => [...acc, mapSellingPlanToDiscount(cur, sellingPlans)];
+  sellingPlans: ShopifySellingPlansEntity[] = [],
+  currency: string
+) => [...acc, mapSellingPlanToDiscount(cur, sellingPlans, currency)];
 
 export const getSellingPlans = (product: ShopifyProductEntity) =>
   product.selling_plan_groups.reduce<ShopifySellingPlansEntity[]>(

package/src/shopify/shopifyBootstrap.ts

@@ -45,7 +45,15 @@ declare global {
       previewMode: boolean;
     };
     ogShopifyConfig: OgShopifyConfig;
-    Shopify: { routes?: { root: string } };
+    Shopify?: {
+      routes?: {
+        root: string;
+      };
+      currency?: {
+        active: string;
+        rate: string;
+      };
+    };
   }
 }
 

package/src/shopify/shopifyMiddleware.ts

@@ -28,6 +28,7 @@ const PRODUCTS_URL = `${SHOPIFY_ROOT}products/`;
 type SetupProductPayload = {
   product: ShopifyProductEntity;
   offer: any;
+  currency: string;
 };
 
 type SetupCartPayload = ShopifyCart;
@@ -47,12 +48,21 @@ const makeSyncProductId = offer =>
     }
   });
 
+async function getCurrency() {
+  const windowCurrency = window.Shopify?.currency?.active;
+  if (windowCurrency) {
+    return windowCurrency;
+  }
+  const cart = await getCart();
+  return cart.currency;
+}
+
 async function setupPdp(store, offer) {
   const handle = guessProductHandle(offer);
   if (handle) {
     try {
-      const product = await getProduct(handle);
-      const payload: SetupProductPayload = { product, offer };
+      const [product, currency] = await Promise.all([getProduct(handle), getCurrency()]);
+      const payload: SetupProductPayload = { product, offer, currency: currency };
       store.dispatch({ type: SETUP_PRODUCT, payload });
     } catch (err) {
       console.warn('OG: Unable to fetch product details for PDP', err);
@@ -152,7 +162,7 @@ async function setupCart(store, offer) {
 
   const products = await Promise.all(Array.from(new Set(items.map(({ handle }) => handle))).map(getProduct));
   products.forEach(product => {
-    const payload: SetupProductPayload = { product, offer };
+    const payload: SetupProductPayload = { product, offer, currency: cart.currency };
     store.dispatch({ type: SETUP_PRODUCT, payload });
   });
 }

package/src/shopify/shopifyReducer.js

@@ -440,7 +440,7 @@ export const productOffer = (state = {}, _action) => state;
 export const productPlans = (state = {}, action) => {
   if (constants.SETUP_PRODUCT === action.type) {
     const {
-      payload: { product }
+      payload: { product, currency }
     } = action;
 
     const sellingPlans = getSellingPlans(product);
@@ -451,7 +451,7 @@ export const productPlans = (state = {}, action) => {
         (acc, cur) => ({
           ...acc,
           [cur.id]: cur.selling_plan_allocations?.reduce(
-            (accumulator, current) => sellingPlanAllocationsReducer(accumulator, current, sellingPlans),
+            (accumulator, current) => sellingPlanAllocationsReducer(accumulator, current, sellingPlans, currency),
             []
           )
         }),
@@ -467,7 +467,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, [], cart.currency)
               }
             : acc,
         state

package/src/shopify/utils.ts

@@ -1,3 +1,9 @@
-export const money = val => (val === null ? '' : `$${val.toString().replace(/(\d\d)$/, '.$1')}`);
+export const money = (val: number, currency: string) =>
+  val === null
+    ? ''
+    : new Intl.NumberFormat(navigator.language, {
+        style: 'currency',
+        currency
+      }).format(val / 100);
 
 export const percentage = val => `${val}%`;