feat: update Marks to support the children prop (#155)

This children prop is for displaying custom markup when ineligible.
paypal · Sep 14, 2021 · 6aebf98 · 6aebf98
1 parent f7b4a25
commit 6aebf98
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 6 deletions.
diff --git a/src/components/PayPalMarks.test.js b/src/components/PayPalMarks.test.js
@@ -165,13 +165,21 @@ describe("<PayPalMarks />", () => {
             render: mockRender,
         });
 
-        render(
+        const { container } = render(
             <PayPalScriptProvider options={{ "client-id": "test" }}>
-                <PayPalMarks />
+                <PayPalMarks className="mark-container">
+                    <div className="ineligible"></div>
+                </PayPalMarks>
             </PayPalScriptProvider>
         );
 
-        await waitFor(() => expect(mockIsEligible).toBeCalled());
+        await waitFor(() =>
+            expect(
+                container.querySelector(".ineligible") instanceof HTMLDivElement
+            ).toBeTruthy()
+        );
+        expect(container.querySelector(".mark-container")).toBeNull();
+        expect(mockIsEligible).toBeCalledTimes(1);
         expect(mockRender).not.toBeCalled();
     });
 

diff --git a/src/components/PayPalMarks.tsx b/src/components/PayPalMarks.tsx
@@ -1,4 +1,12 @@
-import React, { useEffect, useRef, useState, FunctionComponent } from "react";
+import React, {
+    useEffect,
+    useRef,
+    useState,
+    FunctionComponent,
+    ReactElement,
+    ReactPortal,
+    ReactFragment,
+} from "react";
 import { usePayPalScriptReducer } from "../hooks/scriptProviderHooks";
 import { getPayPalWindowNamespace } from "../utils";
 import { DEFAULT_PAYPAL_NAMESPACE } from "../constants";
@@ -12,6 +20,7 @@ export interface PayPalMarksComponentProps extends PayPalMarksComponentOptions {
      * Pass a css class to the div container.
      */
     className?: string;
+    children?: ReactElement | ReactPortal | ReactFragment;
 }
 
 /**
@@ -32,10 +41,12 @@ A `FUNDING` object is exported by this library which has a key for every availab
 */
 export const PayPalMarks: FunctionComponent<PayPalMarksComponentProps> = ({
     className = "",
+    children,
     ...markProps
 }: PayPalMarksComponentProps) => {
     const [{ isResolved, options }] = usePayPalScriptReducer();
     const markContainerRef = useRef<HTMLDivElement>(null);
+    const [isEligible, setIsEligible] = useState(true);
     const [, setErrorState] = useState(null);
 
     /**
@@ -45,7 +56,9 @@ export const PayPalMarks: FunctionComponent<PayPalMarksComponentProps> = ({
         const { current } = markContainerRef;
 
         // only render the mark when eligible
-        if (!current || !mark.isEligible()) return;
+        if (!current || !mark.isEligible()) {
+            return setIsEligible(false);
+        }
         // Remove any children before render it again
         if (current.firstChild) {
             current.removeChild(current.firstChild);
@@ -89,7 +102,15 @@ export const PayPalMarks: FunctionComponent<PayPalMarksComponentProps> = ({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isResolved, markProps.fundingSource]);
 
-    return <div ref={markContainerRef} className={className} />;
+    return (
+        <>
+            {isEligible ? (
+                <div ref={markContainerRef} className={className} />
+            ) : (
+                children
+            )}
+        </>
+    );
 };
 
 function getErrorMessage({