Merge pull request #819 from paypal/fix/use-eligible-methods-hook

Fix/use eligible methods hook

Author: HackTheW2d

.changeset/pay-later-eligibility.md

@@ -0,0 +1,5 @@
+---
+"@paypal/react-paypal-js": patch
+---
+
+Integrate useEligibleMethods hook into PayLaterOneTimePaymentButton component to automatically fetch and dispatch eligibility to context. Also fixes React Strict Mode compatibility by resetting lastFetchRef on cleanup.

packages/react-paypal-js/src/v6/components/PayLaterOneTimePaymentButton.tsx

@@ -5,7 +5,7 @@ import { usePayPal } from "../hooks/usePayPal";
 
 import type { UsePayLaterOneTimePaymentSessionProps } from "../hooks/usePayLaterOneTimePaymentSession";
 
-type PayLaterOneTimePaymentButtonProps =
+export type PayLaterOneTimePaymentButtonProps =
     UsePayLaterOneTimePaymentSessionProps & {
         autoRedirect?: never;
         disabled?: boolean;

packages/react-paypal-js/src/v6/hooks/useEligibleMethods.test.ts

@@ -110,16 +110,17 @@ describe("useEligibleMethods", () => {
     });
 
     describe("isLoading state", () => {
-        test("should return isLoading=false initially when not fetching", () => {
+        test("should return isLoading=true when no eligibility data and no error", () => {
             const { result } = renderHook(() => useEligibleMethods(), {
                 wrapper: createWrapper({
                     loadingStatus: INSTANCE_LOADING_STATE.PENDING,
+                    eligiblePaymentMethods: null,
                 }),
             });
 
-            // isLoading reflects isFetching state, not loadingStatus
-            // Initially false because no fetch has started yet (no sdkInstance)
-            expect(result.current.isLoading).toBe(false);
+            // isLoading is true when we don't have eligibility data yet
+            // This prevents UI flash before effect runs
+            expect(result.current.isLoading).toBe(true);
         });
 
         test("should return isLoading=false when eligibility already in context", () => {
@@ -139,15 +140,23 @@ describe("useEligibleMethods", () => {
             expect(result.current.isLoading).toBe(false);
         });
 
-        test("should return isLoading=false when context has error", () => {
+        test("should return isLoading=true when context has error but no eligibility data", () => {
+            // Context error (SDK load failure) doesn't set eligibilityError,
+            // but we still don't have eligibility data, so isLoading is true
             const { result } = renderHook(() => useEligibleMethods(), {
                 wrapper: createWrapper({
                     loadingStatus: INSTANCE_LOADING_STATE.REJECTED,
                     error: new Error("Failed"),
+                    eligiblePaymentMethods: null,
                 }),
             });
 
-            expect(result.current.isLoading).toBe(false);
+            // isLoading is true because we don't have eligibility data
+            // The context error is returned separately
+            expect(result.current.isLoading).toBe(true);
+            expect(result.current.error?.message).toContain(
+                "PayPal context error",
+            );
         });
     });
 
@@ -185,26 +194,28 @@ describe("useEligibleMethods", () => {
                 }),
             });
 
-            // isLoading is false because no fetch has started (no sdkInstance)
+            // isLoading is true because we don't have eligibility data yet
+            // This prevents UI flash before the effect has a chance to run
             expect(result.current).toEqual({
                 eligiblePaymentMethods: null,
-                isLoading: false,
+                isLoading: true,
                 error: null,
             });
         });
 
-        test("should return correct shape during error state", () => {
+        test("should return correct shape during error state with no eligibility", () => {
             const { result } = renderHook(() => useEligibleMethods(), {
                 wrapper: createWrapper({
                     eligiblePaymentMethods: null,
                     loadingStatus: INSTANCE_LOADING_STATE.REJECTED,
                 }),
             });
 
-            // Error from hook's local state, not context
+            // isLoading is true because we have no eligibility data and no eligibility error
+            // (context error is different from eligibility fetch error)
             expect(result.current).toEqual({
                 eligiblePaymentMethods: null,
-                isLoading: false,
+                isLoading: true,
                 error: null,
             });
         });
@@ -298,7 +309,7 @@ describe("useEligibleMethods", () => {
             expect(mockDispatch).not.toHaveBeenCalled();
         });
 
-        test("should set isLoading=true while fetching and false after", async () => {
+        test("should set isLoading=true while fetching", async () => {
             let resolvePromise: (value: unknown) => void;
             const pendingPromise = new Promise((resolve) => {
                 resolvePromise = resolve;
@@ -315,13 +326,33 @@ describe("useEligibleMethods", () => {
                 }),
             });
 
-            // Effect runs synchronously, so isLoading is already true
+            // isLoading is true because no eligibility data yet
             expect(result.current.isLoading).toBe(true);
 
-            // After promise resolves, should be false
+            // After promise resolves, isLoading is still true because
+            // eligiblePaymentMethods in context hasn't been updated
+            // (dispatch is mocked). In real usage, context would update.
             await act(async () => {
                 resolvePromise!(mockEligibilityResult);
             });
+            // The fetch itself completes but context isn't updated in this test setup
+            // so isLoading remains true. See "isLoading state" tests for cases
+            // where eligibility is in context.
+            expect(result.current.isLoading).toBe(true);
+        });
+
+        test("should return isLoading=false when eligibility data exists", () => {
+            const mockSdkInstance = createMockSdkInstance();
+
+            const { result } = renderHook(() => useEligibleMethods(), {
+                wrapper: createWrapper({
+                    sdkInstance: mockSdkInstance,
+                    eligiblePaymentMethods: mockEligibilityResult,
+                    loadingStatus: INSTANCE_LOADING_STATE.RESOLVED,
+                }),
+            });
+
+            // isLoading is false because eligibility data exists in context
             expect(result.current.isLoading).toBe(false);
         });
 

packages/react-paypal-js/src/v6/hooks/useEligibleMethods.ts

@@ -70,6 +70,10 @@ export function useEligibleMethods(
     const [eligibilityError, setError] = useError();
     const [isFetching, setIsFetching] = useState(false);
 
+    // Use ref to access eligiblePaymentMethods in effect without adding to deps
+    const eligiblePaymentMethodsRef = useRef(eligiblePaymentMethods);
+    eligiblePaymentMethodsRef.current = eligiblePaymentMethods;
+
     // Memoize payload to avoid unnecessary re-fetches when object reference changes
     const memoizedPayload = useDeepCompareMemoize(payload);
 
@@ -100,7 +104,10 @@ export function useEligibleMethods(
 
         // If eligibility exists and we haven't fetched anything yet (e.g., server hydration),
         // mark as fetched to avoid unnecessary re-fetch with same payload
-        if (eligiblePaymentMethods && lastFetchRef.current === null) {
+        if (
+            eligiblePaymentMethodsRef.current &&
+            lastFetchRef.current === null
+        ) {
             lastFetchRef.current = {
                 instance: sdkInstance,
                 payload: memoizedPayload,
@@ -140,26 +147,28 @@ export function useEligibleMethods(
 
         return () => {
             isSubscribed = false;
+            lastFetchRef.current = null; // Reset fetch tracking on unmount or dependency change
         };
-    }, [
-        sdkInstance,
-        memoizedPayload,
-        eligiblePaymentMethods,
-        dispatch,
-        setError,
-    ]);
+    }, [sdkInstance, memoizedPayload, dispatch, setError]);
+
+    // isLoading should be true if:
+    // 1. We're actively fetching, OR
+    // 2. We don't have eligibility data yet and no error occurred
+    // This prevents a flash where isLoading=false before the effect runs
+    const isLoading =
+        isFetching || (!eligiblePaymentMethods && !eligibilityError);
 
     if (contextError) {
         return {
             eligiblePaymentMethods,
-            isLoading: isFetching,
+            isLoading,
             error: new Error(`PayPal context error: ${contextError}`),
         };
     }
 
     return {
         eligiblePaymentMethods,
-        isLoading: isFetching,
+        isLoading,
         error: eligibilityError,
     };
 }

packages/react-paypal-js/src/v6/index.ts

@@ -23,7 +23,10 @@ export {
     PayPalCardFieldsProvider,
     type CardFieldsSessionType,
 } from "./components/PayPalCardFieldsProvider";
-export { PayLaterOneTimePaymentButton } from "./components/PayLaterOneTimePaymentButton";
+export {
+    PayLaterOneTimePaymentButton,
+    type PayLaterOneTimePaymentButtonProps,
+} from "./components/PayLaterOneTimePaymentButton";
 export { PayPalGuestPaymentButton } from "./components/PayPalGuestPaymentButton";
 export { PayPalOneTimePaymentButton } from "./components/PayPalOneTimePaymentButton";
 export { PayPalProvider } from "./components/PayPalProvider";