Merge pull request #433 from paypal/hotfix/form-type-correction

Hotfix/form type correction
paypal · Apr 29, 2024 · 1c042da · 1c042da
2 parents f5a861a + ffb7af8
commit 1c042da
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 42 deletions.
diff --git 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:
 

diff --git 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/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>

diff --git 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;