[fenix] For https://github.com/mozilla-mobile/fenix/issues/19495 - Add validation for the name on card (https://github.com/mozilla-mobile/fenix/pull/19836)

- We want to ensure that name on card in the credit card is not empty when submitted. Display an appropriate error when the field is invalid.

app/src/main/java/org/mozilla/fenix/settings/creditcards/view/CreditCardEditorView.kt

@@ -73,7 +73,7 @@ class CreditCardEditorView(
     internal fun saveCreditCard(state: CreditCardEditorState) {
         containerView.hideKeyboard()
 
-        if (validateCreditCard()) {
+        if (validateForm()) {
             val cardNumber = card_number_input.text.toString().toCreditCardNumber()
 
             if (state.isEditing) {
@@ -103,20 +103,32 @@ class CreditCardEditorView(
     /**
      * Validates the credit card information entered by the user.
      *
-     * @return true if the credit card is valid, false otherwise.
+     * @return true if the credit card information is valid, false otherwise.
      */
     @VisibleForTesting(otherwise = VisibleForTesting.PRIVATE)
-    internal fun validateCreditCard(): Boolean {
+    internal fun validateForm(): Boolean {
         var isValid = true
 
         if (card_number_input.text.toString().validateCreditCardNumber()) {
             card_number_layout.error = null
             card_number_title.setTextColor(containerView.context.getColorFromAttr(R.attr.primaryText))
         } else {
+            isValid = false
+
             card_number_layout.error =
                 containerView.context.getString(R.string.credit_cards_number_validation_error_message)
             card_number_title.setTextColor(containerView.context.getColorFromAttr(R.attr.destructive))
+        }
+
+        if (name_on_card_input.text.toString().isNotBlank()) {
+            name_on_card_layout.error = null
+            name_on_card_title.setTextColor(containerView.context.getColorFromAttr(R.attr.primaryText))
+        } else {
             isValid = false
+
+            name_on_card_layout.error =
+                containerView.context.getString(R.string.credit_cards_name_on_card_validation_error_message)
+            name_on_card_title.setTextColor(containerView.context.getColorFromAttr(R.attr.destructive))
         }
 
         return isValid

app/src/main/res/values/strings.xml

@@ -1546,6 +1546,8 @@
     <string name="credit_cards_saved_cards">Saved cards</string>
     <!-- Error message for credit card number validation -->
     <string name="credit_cards_number_validation_error_message">Please enter a valid credit card number</string>
+    <!-- Error message for credit card name on card validation -->
+    <string name="credit_cards_name_on_card_validation_error_message">Please fill out this field</string>
     <!-- Message displayed in biometric prompt displayed for authentication before allowing users to view their saved credit cards -->
     <string name="credit_cards_biometric_prompt_message">Unlock to view your saved cards</string>
     <!-- Title of warning dialog if users have no device authentication set up -->

app/src/test/java/org/mozilla/fenix/settings/creditcards/CreditCardEditorViewTest.kt

@@ -143,7 +143,64 @@ class CreditCardEditorViewTest {
 
         val calendar = Calendar.getInstance()
 
-        val billingName = "Banana Apple"
+        var billingName = "Banana Apple"
+        val cardNumber = "2221000000000000"
+        val expiryMonth = 5
+        val expiryYear = calendar.get(Calendar.YEAR)
+
+        view.card_number_input.text = cardNumber.toEditable()
+        view.name_on_card_input.text = billingName.toEditable()
+        view.expiry_month_drop_down.setSelection(expiryMonth - 1)
+
+        view.save_button.performClick()
+
+        verify {
+            creditCardEditorView.validateForm()
+        }
+
+        assertFalse(creditCardEditorView.validateForm())
+
+        verify(exactly = 0) {
+            interactor.onSaveCreditCard(
+                NewCreditCardFields(
+                    billingName = billingName,
+                    plaintextCardNumber = CreditCardNumber.Plaintext(cardNumber),
+                    cardNumberLast4 = "0000",
+                    expiryMonth = expiryMonth.toLong(),
+                    expiryYear = expiryYear.toLong(),
+                    cardType = CreditCardNetworkType.MASTERCARD.cardName
+                )
+            )
+        }
+
+        billingName = ""
+        view.name_on_card_input.text = billingName.toEditable()
+
+        view.save_button.performClick()
+
+        assertFalse(creditCardEditorView.validateForm())
+
+        verify(exactly = 0) {
+            interactor.onSaveCreditCard(
+                NewCreditCardFields(
+                    billingName = billingName,
+                    plaintextCardNumber = CreditCardNumber.Plaintext(cardNumber),
+                    cardNumberLast4 = "0000",
+                    expiryMonth = expiryMonth.toLong(),
+                    expiryYear = expiryYear.toLong(),
+                    cardType = CreditCardNetworkType.MASTERCARD.cardName
+                )
+            )
+        }
+    }
+
+    @Test
+    fun `GIVEN invalid name on card WHEN the save button is clicked THEN interactor is not called`() {
+        creditCardEditorView.bind(getInitialCreditCardEditorState())
+
+        val calendar = Calendar.getInstance()
+
+        val billingName = "       "
         val cardNumber = "2221000000000000"
         val expiryMonth = 5
         val expiryYear = calendar.get(Calendar.YEAR)
@@ -155,10 +212,10 @@ class CreditCardEditorViewTest {
         view.save_button.performClick()
 
         verify {
-            creditCardEditorView.validateCreditCard()
+            creditCardEditorView.validateForm()
         }
 
-        assertFalse(creditCardEditorView.validateCreditCard())
+        assertFalse(creditCardEditorView.validateForm())
 
         verify(exactly = 0) {
             interactor.onSaveCreditCard(
@@ -192,10 +249,10 @@ class CreditCardEditorViewTest {
         view.save_button.performClick()
 
         verify {
-            creditCardEditorView.validateCreditCard()
+            creditCardEditorView.validateForm()
         }
 
-        assertTrue(creditCardEditorView.validateCreditCard())
+        assertTrue(creditCardEditorView.validateForm())
 
         verify {
             interactor.onSaveCreditCard(