@ordergroove/offers 2.34.8-alpha-PR-793-2.0 → 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,19 +115,21 @@ 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;
 };
 
-export const sellingPlanAllocationsReducer = (acc, cur, sellingPlans = []) => [
-  ...acc,
-  mapSellingPlanToDiscount(cur, sellingPlans)
-];
+export const sellingPlanAllocationsReducer = (
+  acc: ProductPlanEntity[],
+  cur: ShopifySellingPlanAllocationsEntity,
+  sellingPlans: ShopifySellingPlansEntity[] = [],
+  currency: string
+) => [...acc, mapSellingPlanToDiscount(cur, sellingPlans, currency)];
 
 export const getSellingPlans = (product: ShopifyProductEntity) =>
-  product.selling_plan_groups.reduce(
+  product.selling_plan_groups.reduce<ShopifySellingPlansEntity[]>(
     (allGroups, group) => [
       ...allGroups,
       ...group.selling_plans.map(selling_plan => ({ ...selling_plan, group_name: group.name }))

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

@@ -17,12 +17,22 @@ import {
 import { makeSubscribedSelector } from '../core/selectors';
 import { getOrCreateHidden, safeProductId } from '../core/utils';
 import { getTrackingKey } from './shopifyTrackingMiddleware';
+import { ShopifyCart, ShopifyProductEntity } from './types/shopify';
 
 const SHOPIFY_ROOT = window.Shopify?.routes?.root || '/';
 const CART_PAGE_URL = '/cart';
 const CART_JS_URL = `${SHOPIFY_ROOT}cart.js`;
+const CART_CHANGE_URL = `${SHOPIFY_ROOT}cart/change.js`;
 const PRODUCTS_URL = `${SHOPIFY_ROOT}products/`;
 
+type SetupProductPayload = {
+  product: ShopifyProductEntity;
+  offer: any;
+  currency: string;
+};
+
+type SetupCartPayload = ShopifyCart;
+
 /**
  * List of section DOM elements to update via section-rendering api https://shopify.dev/api/section-rendering
  */
@@ -38,12 +48,22 @@ 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);
-      store.dispatch({ type: SETUP_PRODUCT, payload: { 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);
     }
@@ -79,7 +99,9 @@ async function setupPdp(store, offer) {
   }
 }
 
-const getCart = async () => await (await fetch(CART_JS_URL)).json();
+async function getCart(): Promise<ShopifyCart> {
+  return (await fetch(CART_JS_URL)).json();
+}
 
 /**
  * Attemps to guess the product handle o
@@ -120,12 +142,15 @@ export function guessProductHandle(offer): string {
   );
 }
 
-const getProduct = memoize(async handle => (await fetch(`${PRODUCTS_URL}${handle}.js`)).json());
+const getProduct = memoize(async function(handle: string): Promise<ShopifyProductEntity> {
+  return (await fetch(`${PRODUCTS_URL}${handle}.js`)).json();
+});
 
 async function setupCart(store, offer) {
   const cart = await getCart();
   const { items } = cart;
-  store.dispatch({ type: SETUP_CART, payload: cart });
+  const cartPayload: SetupCartPayload = cart;
+  store.dispatch({ type: SETUP_CART, payload: cartPayload });
 
   // some minicart templates does not contains line.key but contains line which corresponds to
   // the index on the cart items (Vedge)
@@ -136,7 +161,10 @@ async function setupCart(store, offer) {
   }
 
   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, offer } }));
+  products.forEach(product => {
+    const payload: SetupProductPayload = { product, offer, currency: cart.currency };
+    store.dispatch({ type: SETUP_PRODUCT, payload });
+  });
 }
 
 /**
@@ -168,7 +196,7 @@ export async function synchronizeCartOptin(action: any, store: any) {
     const qty = item.quantity;
     const productId = safeProductId(key);
 
-    const res = await fetch('/cart/change.js', {
+    const res = await fetch(CART_CHANGE_URL, {
       method: 'POST',
       credentials: 'same-origin',
       headers: { 'Content-Type': 'application/json' },
@@ -184,7 +212,7 @@ export async function synchronizeCartOptin(action: any, store: any) {
 
     if (res.status !== 200) throw new Error('Cart not updated');
 
-    const newCart = await res.json();
+    const newCart: ShopifyCart = await res.json();
 
     // If both carts have same length we can update the item.key
     // to the original offer element, at least provide
@@ -213,7 +241,8 @@ export async function synchronizeCartOptin(action: any, store: any) {
     }
 
     // dispatch SETUP_CART so offer does not flip the state
-    store.dispatch({ type: SETUP_CART, payload: newCart });
+    const newCartPayload: SetupCartPayload = newCart;
+    store.dispatch({ type: SETUP_CART, payload: newCartPayload });
 
     // Use a custom event to hook custom cart updates.
     const cartUpdateEvent = new CustomEvent(CART_UPDATED_EVENT, { bubbles: true, cancelable: true });

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/types/shopify.ts

@@ -96,3 +96,136 @@ export interface ShopifyProductEntity {
   requires_selling_plan: boolean;
   selling_plan_groups?: ShopifySellingPlanGroupsEntity[] | null;
 }
+
+export interface ShopifyCart {
+  token: string;
+  note: string;
+  attributes: Record<string, string>;
+  original_total_price: number;
+  total_price: number;
+  total_discount: number;
+  total_weight: number;
+  item_count: number;
+  items: CartItem[];
+  requires_shipping: boolean;
+  currency: string;
+  items_subtotal_price: number;
+  cart_level_discount_applications: CartLevelDiscountApplication[];
+  sections?: Record<string, string>;
+}
+
+interface CartItem {
+  id: number;
+  properties: Record<string, string>;
+  quantity: number;
+  variant_id: number;
+  key: string;
+  title: string;
+  price: number;
+  original_price: number;
+  discounted_price: number;
+  line_price: number;
+  original_line_price: number;
+  total_discount: number;
+  discounts: Discount[];
+  sku: string;
+  grams: number;
+  vendor: string;
+  taxable: boolean;
+  product_id: number;
+  product_has_only_default_variant: boolean;
+  gift_card: boolean;
+  final_price: number;
+  final_line_price: number;
+  url: string;
+  featured_image: FeaturedImage;
+  image: string;
+  handle: string;
+  requires_shipping: boolean;
+  product_type: string;
+  product_title: string;
+  product_description: string;
+  variant_title?: string;
+  variant_options: string[];
+  options_with_values: OptionsWithValue[];
+  line_level_discount_allocations: LineLevelDiscountAllocation[];
+  line_level_total_discount: number;
+  quantity_rule: QuantityRule;
+  has_components: boolean;
+  selling_plan_allocation?: SellingPlanAllocation;
+  unit_price?: number;
+  unit_price_measurement?: UnitPriceMeasurement;
+}
+
+interface Discount {
+  amount: number;
+  title: string;
+}
+
+interface FeaturedImage {
+  aspect_ratio: number;
+  alt: string;
+  height: number;
+  url: string;
+  width: number;
+}
+
+interface OptionsWithValue {
+  name: string;
+  value: string;
+}
+
+interface LineLevelDiscountAllocation {
+  amount: number;
+  discount_application: DiscountApplication;
+}
+
+interface DiscountApplication {
+  type: string;
+  key: string;
+  title: string;
+  description: string;
+  value: string;
+  created_at: string;
+  value_type: string;
+  allocation_method: string;
+  target_selection: string;
+  target_type: string;
+  total_allocated_amount: number;
+}
+
+interface QuantityRule {
+  min: number;
+  max?: number;
+  increment: number;
+}
+
+interface SellingPlanAllocation {
+  price_adjustments: ShopifyPriceAdjustmentsEntity[];
+  price: number;
+  compare_at_price: number;
+  per_delivery_price: number;
+  selling_plan: ShopifySellingPlansEntity;
+}
+
+interface UnitPriceMeasurement {
+  measured_type: string;
+  quantity_value: string;
+  quantity_unit: string;
+  reference_value: number;
+  reference_unit: string;
+}
+
+interface CartLevelDiscountApplication {
+  type: string;
+  key: string;
+  title: string;
+  description: string;
+  value: string;
+  created_at: string;
+  value_type: string;
+  allocation_method: string;
+  target_selection: string;
+  target_type: string;
+  total_allocated_amount: number;
+}

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}%`;