From 465b008d924bef577ac04af78af049d1b1a5380e Mon Sep 17 00:00:00 2001
From: Sultan Al-Maari <sltun2oo9@gmail.com>
Date: Wed, 18 Dec 2024 13:56:24 +0100
Subject: [PATCH] fix: update credit card form validation (#11306)

* fix: update credit card form validation

* add test

(cherry picked from commit e2c4d6d82a43e969d0c31e456dd9ff7efaa3bdcf)
---
 .../Bidding/Screens/CreditCardForm.tests.tsx  | 30 +++++++++++++++++--
 .../creditCardFormFieldsValidationSchema.ts   |  4 ++-
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/app/Components/Bidding/Screens/CreditCardForm.tests.tsx b/src/app/Components/Bidding/Screens/CreditCardForm.tests.tsx
index fdb22d153c5..607008268e3 100644
--- a/src/app/Components/Bidding/Screens/CreditCardForm.tests.tsx
+++ b/src/app/Components/Bidding/Screens/CreditCardForm.tests.tsx
@@ -160,7 +160,7 @@ describe("CreditCardForm", () => {
     await waitFor(() => expect(addButton.props.accessibilityState.disabled).toEqual(true))
   })
 
-  it("is enabled while the form is valid", () => {
+  it("is enabled while the form is valid", async () => {
     const onSubmitMock = jest.fn()
 
     ;(createToken as jest.Mock).mockReturnValueOnce(stripeToken)
@@ -187,7 +187,33 @@ describe("CreditCardForm", () => {
 
     const addButton = screen.getByTestId("credit-card-form-button")
 
-    expect(addButton.props.accessibilityState.disabled).toEqual(false)
+    await waitFor(() => expect(addButton.props.accessibilityState.disabled).toEqual(false))
+  })
+
+  it("is disabled when the form is invalid", async () => {
+    renderWithWrappers(
+      <CreditCardForm
+        onSubmit={onSubmitMock}
+        navigator={{ pop: () => null } as any}
+        billingAddress={{
+          fullName: "mockName",
+          addressLine1: "mockAddress1",
+          addressLine2: "mockAddress2",
+          city: "mockCity",
+          state: "mockState",
+          postalCode: "mockPostalCode",
+          phoneNumber: "mockPhone",
+          country: { shortName: "US", longName: "United States" },
+        }}
+      />
+    )
+
+    const creditCardField = screen.getByTestId("credit-card-field")
+    fireEvent.changeText(creditCardField, "4242") // incomplete number
+
+    const addButton = screen.getByTestId("credit-card-form-button")
+
+    await waitFor(() => expect(addButton.props.accessibilityState.disabled).toEqual(true))
   })
 
   it("shows an error when stripe's API returns an error", async () => {
diff --git a/src/app/Components/Bidding/Validators/creditCardFormFieldsValidationSchema.ts b/src/app/Components/Bidding/Validators/creditCardFormFieldsValidationSchema.ts
index 7358751777f..05448d63d5e 100644
--- a/src/app/Components/Bidding/Validators/creditCardFormFieldsValidationSchema.ts
+++ b/src/app/Components/Bidding/Validators/creditCardFormFieldsValidationSchema.ts
@@ -2,7 +2,9 @@ import * as Yup from "yup"
 
 export const creditCardFormValidationSchema = Yup.object().shape({
   creditCard: Yup.object().shape({
-    valid: Yup.boolean().required("Credit card is required"),
+    valid: Yup.boolean()
+      .oneOf([true], "Credit card is required")
+      .required("Credit card is required"),
   }),
   fullName: Yup.string().required("Name is required"),
   addressLine1: Yup.string().required("Address is required"),