From 3306470c3d1818a54bf74484bd58d883952636cb Mon Sep 17 00:00:00 2001
From: Mervin Choun <mchoun@paypal.com>
Date: Mon, 29 Apr 2024 13:59:19 -0400
Subject: [PATCH 1/3] fix: remove inputEvents and style for form component

---
 .../cardFields/PayPalCardFieldsForm.test.tsx  | 58 +++++++++----------
 src/types/payPalCardFieldsTypes.ts            |  7 +--
 2 files changed, 29 insertions(+), 36 deletions(-)

diff --git a/src/components/cardFields/PayPalCardFieldsForm.test.tsx b/src/components/cardFields/PayPalCardFieldsForm.test.tsx
index be218966..cb879e21 100644
--- a/src/components/cardFields/PayPalCardFieldsForm.test.tsx
+++ b/src/components/cardFields/PayPalCardFieldsForm.test.tsx
@@ -67,7 +67,7 @@ describe("PayPalCardFieldsForm", () => {
 
         (loadScript as jest.Mock).mockResolvedValue(window.paypal);
     });
-    test("should render each component with the global style passed", async () => {
+    test("should initialize CardFields with the global style object", async () => {
         const spyConsoleError = jest
             .spyOn(console, "error")
             .mockImplementation();
@@ -85,28 +85,25 @@ describe("PayPalCardFieldsForm", () => {
                     onApprove={mockOnApprove}
                     createOrder={mockCreateOrder}
                     onError={mockOnError}
+                    style={{ input: { color: "black" } }}
                 >
-                    <PayPalCardFieldsForm
-                        style={{ input: { color: "black" } }}
-                    />
+                    <PayPalCardFieldsForm />
                 </PayPalCardFieldsProvider>
             </PayPalScriptProvider>,
             { wrapper }
         );
         await waitFor(() => expect(onError).toHaveBeenCalledTimes(0));
 
-        [CVVField, ExpiryField, NameField, NumberField].forEach((field) => {
-            expect(field).toHaveBeenCalledWith(
-                expect.objectContaining({
-                    style: { input: { color: "black" } },
-                })
-            );
-        });
+        expect(CardFields).toBeCalledWith(
+            expect.objectContaining({
+                style: { input: { color: "black" } },
+            })
+        );
 
         spyConsoleError.mockRestore();
     });
 
-    test("should render component with specific input event callbacks", async () => {
+    test("should initialize CardFields with global input events", async () => {
         const spyConsoleError = jest
             .spyOn(console, "error")
             .mockImplementation();
@@ -124,33 +121,30 @@ describe("PayPalCardFieldsForm", () => {
                     onApprove={mockOnApprove}
                     createOrder={mockCreateOrder}
                     onError={mockOnError}
+                    inputEvents={{
+                        onChange: mockOnChange,
+                        onFocus: mockOnFocus,
+                        onBlur: mockOnBlur,
+                        onInputSubmitRequest: mockOnInputSubmitRequest,
+                    }}
                 >
-                    <PayPalCardFieldsForm
-                        inputEvents={{
-                            onChange: mockOnChange,
-                            onFocus: mockOnFocus,
-                            onBlur: mockOnBlur,
-                            onInputSubmitRequest: mockOnInputSubmitRequest,
-                        }}
-                    />
+                    <PayPalCardFieldsForm />
                 </PayPalCardFieldsProvider>
             </PayPalScriptProvider>,
             { wrapper }
         );
         await waitFor(() => expect(onError).toHaveBeenCalledTimes(0));
 
-        [CVVField, ExpiryField, NameField, NumberField].forEach((field) => {
-            expect(field).toHaveBeenCalledWith(
-                expect.objectContaining({
-                    inputEvents: {
-                        onChange: mockOnChange,
-                        onFocus: mockOnFocus,
-                        onBlur: mockOnBlur,
-                        onInputSubmitRequest: mockOnInputSubmitRequest,
-                    },
-                })
-            );
-        });
+        expect(CardFields).toBeCalledWith(
+            expect.objectContaining({
+                inputEvents: {
+                    onChange: mockOnChange,
+                    onFocus: mockOnFocus,
+                    onBlur: mockOnBlur,
+                    onInputSubmitRequest: mockOnInputSubmitRequest,
+                },
+            })
+        );
 
         spyConsoleError.mockRestore();
     });
diff --git a/src/types/payPalCardFieldsTypes.ts b/src/types/payPalCardFieldsTypes.ts
index d54bb83f..1ba5d5d5 100644
--- a/src/types/payPalCardFieldsTypes.ts
+++ b/src/types/payPalCardFieldsTypes.ts
@@ -25,10 +25,9 @@ export type PayPalCardFieldsIndividualFieldOptions = FieldOptions & {
     className?: string;
 };
 
-export type PayPalCardFieldsFormOptions = Omit<
-    PayPalCardFieldsIndividualFieldOptions,
-    "placeholder"
->;
+export type PayPalCardFieldsFormOptions = {
+    className?: string;
+};
 
 export type PayPalCardFieldsNamespace = {
     components: string | string[] | undefined;

From 557f591c6980f7ddf5eba38fe46c6b7bb713391f Mon Sep 17 00:00:00 2001
From: Mervin Choun <mchoun@paypal.com>
Date: Mon, 29 Apr 2024 14:00:08 -0400
Subject: [PATCH 2/3] fix: typo correction in readme

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index a4fe4a9c..8ddca6d4 100644
--- a/README.md
+++ b/README.md
@@ -364,7 +364,7 @@ export default function App() {
 
 The JS SDK card-fields component provides payment form functionality that you can customize. Read more about this integration in the [PayPal Advanced Card Payments documentation](https://developer.paypal.com/docs/business/checkout/advanced-card-payments/).
 
-#### Using Card Fields Form (recommeneded)
+#### Using Card Fields Form (recommended)
 
 There are 3 parts to the this card-fields integration:
 

From ffb7af8639c1f9452261499f1d0af456a5ec9e40 Mon Sep 17 00:00:00 2001
From: Mervin Choun <mchoun@paypal.com>
Date: Mon, 29 Apr 2024 14:05:11 -0400
Subject: [PATCH 3/3] fix: remove options from form component

---
 src/components/cardFields/PayPalCardFieldsForm.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/cardFields/PayPalCardFieldsForm.tsx b/src/components/cardFields/PayPalCardFieldsForm.tsx
index 5b24c5b3..f8bb5557 100644
--- a/src/components/cardFields/PayPalCardFieldsForm.tsx
+++ b/src/components/cardFields/PayPalCardFieldsForm.tsx
@@ -7,18 +7,17 @@ import { FullWidthContainer } from "../ui/FullWidthContainer";
 
 export const PayPalCardFieldsForm: React.FC<PayPalCardFieldsFormOptions> = ({
     className,
-    ...options
 }) => {
     return (
         <div className={className}>
-            <PayPalCardField fieldName="NameField" {...options} />
-            <PayPalCardField fieldName="NumberField" {...options} />
+            <PayPalCardField fieldName="NameField" />
+            <PayPalCardField fieldName="NumberField" />
             <FlexContainer>
                 <FullWidthContainer>
-                    <PayPalCardField fieldName="ExpiryField" {...options} />
+                    <PayPalCardField fieldName="ExpiryField" />
                 </FullWidthContainer>
                 <FullWidthContainer>
-                    <PayPalCardField fieldName="CVVField" {...options} />
+                    <PayPalCardField fieldName="CVVField" />
                 </FullWidthContainer>
             </FlexContainer>
         </div>