Fix/use eligible methods hook

.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.test.tsx

@@ -4,19 +4,24 @@ import { render, fireEvent } from "@testing-library/react";
 import { PayLaterOneTimePaymentButton } from "./PayLaterOneTimePaymentButton";
 import { usePayLaterOneTimePaymentSession } from "../hooks/usePayLaterOneTimePaymentSession";
 import { usePayPal } from "../hooks/usePayPal";
+import { useEligibleMethods } from "../hooks/useEligibleMethods";
 
 jest.mock("../hooks/usePayLaterOneTimePaymentSession", () => ({
     usePayLaterOneTimePaymentSession: jest.fn(),
 }));
 jest.mock("../hooks/usePayPal", () => ({
     usePayPal: jest.fn(),
 }));
+jest.mock("../hooks/useEligibleMethods", () => ({
+    useEligibleMethods: jest.fn(),
+}));
 
 describe("PayLaterOneTimePaymentButton", () => {
     const mockHandleClick = jest.fn();
     const mockUsePayLaterOneTimePaymentSession =
         usePayLaterOneTimePaymentSession as jest.Mock;
     const mockUsePayPal = usePayPal as jest.Mock;
+    const mockUseEligibleMethods = useEligibleMethods as jest.Mock;
 
     beforeEach(() => {
         jest.clearAllMocks();
@@ -26,9 +31,13 @@ describe("PayLaterOneTimePaymentButton", () => {
             handleClick: mockHandleClick,
         });
         mockUsePayPal.mockReturnValue({
-            eligiblePaymentMethods: null,
             isHydrated: true,
         });
+        mockUseEligibleMethods.mockReturnValue({
+            eligiblePaymentMethods: null,
+            isLoading: false,
+            error: null,
+        });
     });
 
     it("should render paypal-pay-later-button when hydrated", () => {
@@ -46,7 +55,6 @@ describe("PayLaterOneTimePaymentButton", () => {
 
     it("should render a div when not hydrated", () => {
         mockUsePayPal.mockReturnValue({
-            eligiblePaymentMethods: null,
             isHydrated: false,
         });
         const { container } = render(
@@ -162,8 +170,7 @@ describe("PayLaterOneTimePaymentButton", () => {
 
     describe("auto-population from eligibility context", () => {
         it("should auto-populate countryCode and productCode from eligibility context", () => {
-            mockUsePayPal.mockReturnValue({
-                isHydrated: true,
+            mockUseEligibleMethods.mockReturnValue({
                 eligiblePaymentMethods: {
                     isEligible: jest.fn().mockReturnValue(true),
                     getDetails: jest.fn().mockReturnValue({
@@ -172,6 +179,8 @@ describe("PayLaterOneTimePaymentButton", () => {
                         canBeVaulted: false,
                     }),
                 },
+                isLoading: false,
+                error: null,
             });
 
             const { container } = render(
@@ -188,9 +197,10 @@ describe("PayLaterOneTimePaymentButton", () => {
         });
 
         it("should handle when eligibility was not fetched", () => {
-            mockUsePayPal.mockReturnValue({
-                isHydrated: true,
+            mockUseEligibleMethods.mockReturnValue({
                 eligiblePaymentMethods: null,
+                isLoading: false,
+                error: null,
             });
 
             const { container } = render(
@@ -207,12 +217,13 @@ describe("PayLaterOneTimePaymentButton", () => {
         });
 
         it("should handle when PayLater details are not available", () => {
-            mockUsePayPal.mockReturnValue({
-                isHydrated: true,
+            mockUseEligibleMethods.mockReturnValue({
                 eligiblePaymentMethods: {
                     isEligible: jest.fn().mockReturnValue(false),
                     getDetails: jest.fn().mockReturnValue(undefined),
                 },
+                isLoading: false,
+                error: null,
             });
 
             const { container } = render(

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

@@ -1,6 +1,7 @@
 import React, { useEffect } from "react";
 
 import { usePayLaterOneTimePaymentSession } from "../hooks/usePayLaterOneTimePaymentSession";
+import { useEligibleMethods } from "../hooks/useEligibleMethods";
 import { usePayPal } from "../hooks/usePayPal";
 
 import type { UsePayLaterOneTimePaymentSessionProps } from "../hooks/usePayLaterOneTimePaymentSession";
@@ -35,7 +36,8 @@ export const PayLaterOneTimePaymentButton = ({
     disabled = false,
     ...hookProps
 }: PayLaterOneTimePaymentButtonProps): JSX.Element | null => {
-    const { eligiblePaymentMethods, isHydrated } = usePayPal();
+    const { isHydrated } = usePayPal();
+    const { eligiblePaymentMethods, isLoading } = useEligibleMethods();
     const { error, isPending, handleClick } =
         usePayLaterOneTimePaymentSession(hookProps);
 
@@ -49,7 +51,7 @@ export const PayLaterOneTimePaymentButton = ({
         }
     }, [error]);
 
-    if (isPending) {
+    if (isPending || isLoading) {
         return null;
     }
 

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

@@ -133,13 +133,12 @@ export function useEligibleMethods(
                 }
             })
             .finally(() => {
-                if (isSubscribed) {
-                    setIsFetching(false);
-                }
+                setIsFetching(false);
             });
 
         return () => {
             isSubscribed = false;
+            lastFetchRef.current = null; // Reset fetch tracking on unmount or dependency change
         };
     }, [
         sdkInstance,