[fenix] For https://github.com/mozilla-mobile/fenix/issues/18881 - Create a new layout for 'Add credit card' button

Add functionality for 'Add credit card' button

Add unit tests for 'Add credit card' functionality

app/src/main/java/org/mozilla/fenix/settings/creditcards/controller/CreditCardsManagementController.kt

@@ -21,6 +21,11 @@ interface CreditCardsManagementController {
      * @see [CreditCardsManagementInteractor.onSelectCreditCard]
      */
     fun handleCreditCardClicked(creditCard: CreditCard)
+
+    /**
+     * @see [CreditCardsManagementInteractor.onClickAddCreditCard]
+     */
+    fun handleAddCreditCard()
 }
 
 /**
@@ -31,6 +36,14 @@ class DefaultCreditCardsManagementController(
 ) : CreditCardsManagementController {
 
     override fun handleCreditCardClicked(creditCard: CreditCard) {
+        navigateToCreditCardEditor(creditCard)
+    }
+
+    override fun handleAddCreditCard() {
+        navigateToCreditCardEditor()
+    }
+
+    private fun navigateToCreditCardEditor(creditCard: CreditCard? = null) {
         navController.navigateBlockingForAsyncNavGraph(
             CreditCardsManagementFragmentDirections
                 .actionCreditCardsManagementFragmentToCreditCardEditorFragment(

app/src/main/java/org/mozilla/fenix/settings/creditcards/interactor/CreditCardsManagementInteractor.kt

@@ -19,6 +19,12 @@ interface CreditCardsManagementInteractor {
      * @param creditCard The selected [CreditCard] to edit.
      */
     fun onSelectCreditCard(creditCard: CreditCard)
+
+    /**
+     * Navigates to the credit card editor to add a new credit card. Called when a user
+     * taps on 'Add credit card' button.
+     */
+    fun onClickAddCreditCard()
 }
 
 /**
@@ -34,4 +40,8 @@ class DefaultCreditCardsManagementInteractor(
     override fun onSelectCreditCard(creditCard: CreditCard) {
         controller.handleCreditCardClicked(creditCard)
     }
+
+    override fun onClickAddCreditCard() {
+        controller.handleAddCreditCard()
+    }
 }

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

@@ -31,6 +31,8 @@ class CreditCardsManagementView(
             adapter = creditCardsAdapter
             layoutManager = LinearLayoutManager(containerView.context)
         }
+
+        add_credit_card_button.setOnClickListener { interactor.onClickAddCreditCard() }
     }
 
     /**

app/src/main/res/layout/component_credit_cards.xml

@@ -2,12 +2,12 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:id="@+id/credit_cards_wrapper"
     android:layout_width="match_parent"
-    android:layout_height="match_parent">
+    android:layout_height="wrap_content">
 
     <ProgressBar
         android:id="@+id/progress_bar"
@@ -17,14 +17,28 @@
         android:layout_height="8dp"
         android:translationY="-3dp"
         android:visibility="gone"
+        app:layout_constraintVertical_chainStyle="packed"
         app:layout_constraintTop_toTopOf="parent"
-        app:layout_constraintStart_toStartOf="parent" />
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"/>
 
     <androidx.recyclerview.widget.RecyclerView
         android:id="@+id/credit_cards_list"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:visibility="gone"
-        tools:listitem="@layout/credit_card_list_item" />
+        app:layout_constrainedHeight="true"
+        tools:listitem="@layout/credit_card_list_item"
+        app:layout_constraintTop_toBottomOf="@id/progress_bar"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintBottom_toTopOf="@id/add_credit_card_button"/>
 
-</FrameLayout>
+    <include
+        android:id="@+id/add_credit_card_button"
+        layout="@layout/layout_add_credit_card"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/credit_cards_list" />
+
+</androidx.constraintlayout.widget.ConstraintLayout>

app/src/main/res/layout/layout_add_credit_card.xml

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8"?><!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<androidx.constraintlayout.widget.ConstraintLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:background="?attr/selectableItemBackground"
+    android:clickable="true"
+    android:focusable="true">
+
+    <androidx.appcompat.widget.AppCompatImageView
+        android:id="@+id/add_credit_card_icon"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="@dimen/credit_cards_saved_cards_item_margin_start"
+        app:srcCompat="@drawable/ic_new"
+        android:importantForAccessibility="no"
+        app:layout_constraintBottom_toBottomOf="@id/add_credit_card_text"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="@id/add_credit_card_text" />
+
+    <com.google.android.material.textview.MaterialTextView
+        android:id="@+id/add_credit_card_text"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:layout_margin="@dimen/credit_cards_saved_cards_item_margin_start"
+        android:text="@string/preferences_credit_cards_add_credit_card"
+        style="@style/Body16TextStyle"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toEndOf="@id/add_credit_card_icon"
+        app:layout_constraintTop_toTopOf="parent" />
+
+</androidx.constraintlayout.widget.ConstraintLayout>

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

@@ -61,4 +61,15 @@ class DefaultCreditCardsManagementControllerTest {
             )
         }
     }
+
+    @Test
+    fun handleAddCreditCardClicked() {
+        controller.handleAddCreditCard()
+
+        verify {
+            navController.navigate(
+                CreditCardsManagementFragmentDirections.actionCreditCardsManagementFragmentToCreditCardEditorFragment()
+            )
+        }
+    }
 }

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

@@ -29,4 +29,10 @@ class DefaultCreditCardsManagementInteractorTest {
         interactor.onSelectCreditCard(creditCard)
         verify { controller.handleCreditCardClicked(creditCard) }
     }
+
+    @Test
+    fun onClickAddCreditCard() {
+        interactor.onClickAddCreditCard()
+        verify { controller.handleAddCreditCard() }
+    }
 }