fix prices not updating on region change (#117)

Author: kasperkristensen

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

src/lib/hooks/use-product-price.tsx

@@ -1,5 +1,5 @@
 import { formatAmount, useCart, useProducts } from "medusa-react"
-import { useMemo } from "react"
+import { useEffect, useMemo } from "react"
 import { CalculatedVariant } from "types/medusa"
 
 type useProductPriceProps = {
@@ -10,14 +10,20 @@ type useProductPriceProps = {
 const useProductPrice = ({ id, variantId }: useProductPriceProps) => {
   const { cart } = useCart()
 
-  const { products, isLoading, isError } = useProducts(
+  const { products, isLoading, isError, refetch } = useProducts(
     {
       id: id,
       cart_id: cart?.id,
     },
-    { enabled: !!cart }
+    { enabled: !!cart?.id && !!cart?.region_id }
   )
 
+  useEffect(() => {
+    if (cart?.region_id) {
+      refetch()
+    }
+  }, [cart?.region_id, refetch])
+
   const product = products?.[0]
 
   const getPercentageDiff = (original: number, calculated: number) => {
@@ -55,7 +61,7 @@ const useProductPrice = ({ id, variantId }: useProductPriceProps) => {
         cheapestVariant.calculated_price
       ),
     }
-  }, [product, cart])
+  }, [product, cart?.region])
 
   const variantPrice = useMemo(() => {
     if (!product || !variantId || !cart?.region) {
@@ -87,7 +93,7 @@ const useProductPrice = ({ id, variantId }: useProductPriceProps) => {
         variant.calculated_price
       ),
     }
-  }, [product, variantId, cart])
+  }, [product, variantId, cart?.region])
 
   return {
     product,

src/modules/collections/templates/index.tsx

@@ -4,10 +4,10 @@ import repeat from "@lib/util/repeat"
 import ProductPreview from "@modules/products/components/product-preview"
 import SkeletonProductPreview from "@modules/skeletons/components/skeleton-product-preview"
 import { fetchCollectionProducts } from "@pages/collections/[id]"
+import { useInfiniteQuery } from "@tanstack/react-query"
 import { useCart } from "medusa-react"
 import React, { useEffect } from "react"
 import { useInView } from "react-intersection-observer"
-import { useInfiniteQuery } from "@tanstack/react-query"
 
 type CollectionTemplateProps = {
   collection: {
@@ -28,6 +28,7 @@ const CollectionTemplate: React.FC<CollectionTemplateProps> = ({
     fetchNextPage,
     isFetchingNextPage,
     isLoading,
+    refetch,
   } = useInfiniteQuery(
     [`get_collection_products`, collection.id, cart?.id],
     ({ pageParam }) =>
@@ -41,6 +42,12 @@ const CollectionTemplate: React.FC<CollectionTemplateProps> = ({
     }
   )
 
+  useEffect(() => {
+    if (cart?.region_id) {
+      refetch()
+    }
+  }, [cart?.region_id, refetch])
+
   const previews = usePreviews({
     pages: infiniteData?.pages,
     region: cart?.region,