Address PR #13 review feedback

- Fix race condition in useProductListing with loadIdRef guard for
  both loadProducts and loadMore to prevent stale results
- Add .catch handlers to fetchStates in AddressEditModal and
  PaymentStep to prevent unhandled promise rejections
- Simplify handleUpdateSavedAddress with early-return guard clauses
- Throw instead of silently returning in handleSaveEditedAddress
- Fix PriceFilter inputs not resetting on clearFilters via key prop
- Add error logging to withFallback for production observability
- Use neutral fallback message in applyCouponCode
- Encode cookie values in setStoreCookies
- Spread emptyAddress to avoid shared mutable reference

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: Cichorek

src/app/[country]/[locale]/(checkout)/checkout/[id]/page.tsx

@@ -369,16 +369,21 @@ export default function CheckoutPage({ params }: CheckoutPageProps) {
   // Update a saved address
   const handleUpdateSavedAddress = async (id: string, data: AddressParams) => {
     const result = await updateAddress(id, data);
+
     if (!result.success) {
       throw new Error(result.error || "Failed to update address");
     }
-    if (result.address) {
-      setSavedAddresses((prev) =>
-        prev.map((addr) => (addr.id === id ? result.address! : addr)),
-      );
-      return result.address;
+
+    if (!result.address) {
+      throw new Error("Update succeeded but address payload is missing");
     }
-    throw new Error("Failed to update address");
+
+    const updatedAddress = result.address;
+    setSavedAddresses((prev) =>
+      prev.map((addr) => (addr.id === id ? updatedAddress : addr)),
+    );
+
+    return updatedAddress;
   };
 
   // Navigate back to a previous step

src/components/checkout/AddressEditModal.tsx

@@ -44,7 +44,7 @@ export function AddressEditModal({
   title,
 }: AddressEditModalProps) {
   const [formData, setFormData] = useState<AddressFormData>(
-    address ? addressToFormData(address) : emptyAddress,
+    address ? addressToFormData(address) : { ...emptyAddress },
   );
   const [states, setStates] = useState<StoreState[]>([]);
   const [loadingStates, setLoadingStates] = useState(false);
@@ -78,6 +78,9 @@ export function AddressEditModal({
       .then((result) => {
         if (!cancelled) setStates(result);
       })
+      .catch(() => {
+        if (!cancelled) setStates([]);
+      })
       .finally(() => {
         if (!cancelled) setLoadingStates(false);
       });

src/components/checkout/AddressStep.tsx

@@ -107,7 +107,9 @@ export function AddressStep({
   };
 
   const handleSaveEditedAddress = async (data: AddressParams, id?: string) => {
-    if (!id || !onUpdateSavedAddress) return;
+    if (!id || !onUpdateSavedAddress) {
+      throw new Error("Cannot update address");
+    }
 
     const updatedAddress = await onUpdateSavedAddress(id, data);
     if (updatedAddress) {

src/components/checkout/PaymentStep.tsx

@@ -59,11 +59,13 @@ export function PaymentStep({
     let cancelled = false;
 
     startTransitionBill(() => {
-      fetchStates(billAddress.country_iso).then((states) => {
-        if (!cancelled) {
-          setBillStates(states);
-        }
-      });
+      fetchStates(billAddress.country_iso)
+        .then((states) => {
+          if (!cancelled) setBillStates(states);
+        })
+        .catch(() => {
+          if (!cancelled) setBillStates([]);
+        });
     });
 
     return () => {

src/components/products/ProductFilters.tsx

@@ -145,6 +145,7 @@ export function ProductFilters({
                 onToggle={() => toggleSection(filter.id)}
               >
                 <PriceFilter
+                  key={`${activeFilters.priceMin}-${activeFilters.priceMax}`}
                   filter={filter as PriceRangeFilter}
                   minValue={activeFilters.priceMin}
                   maxValue={activeFilters.priceMax}

src/hooks/useProductListing.ts

@@ -47,6 +47,7 @@ export function useProductListing({
   const pageRef = useRef(1);
   const hasMoreRef = useRef(false);
   const filtersRef = useRef<ActiveFilters>({ optionValues: [] });
+  const loadIdRef = useRef(0);
 
   const fetchProducts = useCallback(
     async (page: number, filters: ActiveFilters, query: string) => {
@@ -68,18 +69,21 @@ export function useProductListing({
     async (filters: ActiveFilters, query: string) => {
       setLoading(true);
       pageRef.current = 1;
+      const currentLoadId = ++loadIdRef.current;
 
       const response = await fetchProducts(1, filters, query);
 
-      if (response) {
+      if (response && loadIdRef.current === currentLoadId) {
         setProducts(response.data);
         setTotalCount(response.meta.count);
         const moreAvailable = 1 < response.meta.pages;
         setHasMore(moreAvailable);
         hasMoreRef.current = moreAvailable;
       }
 
-      setLoading(false);
+      if (loadIdRef.current === currentLoadId) {
+        setLoading(false);
+      }
     },
     [fetchProducts],
   );
@@ -140,11 +144,12 @@ export function useProductListing({
     if (loadingMore || !hasMoreRef.current) return;
 
     setLoadingMore(true);
+    const currentLoadId = loadIdRef.current;
     const nextPage = pageRef.current + 1;
 
     const response = await fetchProducts(nextPage, activeFilters, searchQuery);
 
-    if (response) {
+    if (response && loadIdRef.current === currentLoadId) {
       setProducts((prev) => [...prev, ...response.data]);
       const moreAvailable = nextPage < response.meta.pages;
       setHasMore(moreAvailable);

src/lib/data/__tests__/checkout.test.ts

@@ -192,14 +192,14 @@ describe("checkout server actions", () => {
       });
     });
 
-    it("returns 'Invalid coupon code' for non-Error throws", async () => {
+    it("returns fallback message for non-Error throws", async () => {
       mockApplyCoupon.mockRejectedValue("unexpected");
 
       const result = await applyCouponCode("order-1", "BAD");
 
       expect(result).toEqual({
         success: false,
-        error: "Invalid coupon code",
+        error: "Failed to apply coupon code",
       });
     });
   });

src/lib/data/checkout.ts

@@ -62,7 +62,7 @@ export async function applyCouponCode(orderId: string, couponCode: string) {
   return actionResult(async () => {
     const order = await applyCoupon(orderId, couponCode);
     return { order };
-  }, "Invalid coupon code");
+  }, "Failed to apply coupon code");
 }
 
 export async function removeCouponCode(orderId: string, promotionId: string) {

src/lib/data/utils.ts

@@ -26,7 +26,8 @@ export async function withFallback<T>(
 ): Promise<T> {
   try {
     return await fn();
-  } catch {
+  } catch (error) {
+    console.error(error);
     return fallback;
   }
 }

src/lib/utils/cookies.ts

@@ -4,6 +4,6 @@ const ONE_YEAR = 60 * 60 * 24 * 365;
  * Persist the selected country and locale in client-side cookies.
  */
 export function setStoreCookies(country: string, locale: string): void {
-  document.cookie = `spree_country=${country}; path=/; max-age=${ONE_YEAR}`;
-  document.cookie = `spree_locale=${locale}; path=/; max-age=${ONE_YEAR}`;
+  document.cookie = `spree_country=${encodeURIComponent(country)}; path=/; max-age=${ONE_YEAR}`;
+  document.cookie = `spree_locale=${encodeURIComponent(locale)}; path=/; max-age=${ONE_YEAR}`;
 }