Issue mozilla-mobile#9813 - Add CreditCardUtils to parse credit card …

…types from a card number and retrieve their logos
gabrielluong · May 24, 2021 · 74413b3 · 74413b3
1 parent dbf2a04
commit 74413b3
Show file tree

Hide file tree

Showing 16 changed files with 955 additions and 20 deletions.
diff --git a/...wser/engine-gecko/src/main/java/mozilla/components/browser/engine/gecko/ext/CreditCard.kt b/...wser/engine-gecko/src/main/java/mozilla/components/browser/engine/gecko/ext/CreditCard.kt
@@ -5,12 +5,9 @@
 package mozilla.components.browser.engine.gecko.ext
 
 import mozilla.components.concept.engine.prompt.CreditCard
+import mozilla.components.support.utils.creditCardIIN
 import org.mozilla.geckoview.Autocomplete
 
-// Placeholder for the card type. This will be replaced when we can identify the card type.
-// This is dependent on https://github.com/mozilla-mobile/android-components/issues/9813.
-private const val CARD_TYPE_PLACEHOLDER = ""
-
 /**
  * Converts a GeckoView [Autocomplete.CreditCard] to an Android Components [CreditCard].
  */
@@ -20,7 +17,7 @@ fun Autocomplete.CreditCard.toCreditCard() = CreditCard(
     number = number,
     expiryMonth = expirationMonth,
     expiryYear = expirationYear,
-    cardType = CARD_TYPE_PLACEHOLDER
+    cardType = number.creditCardIIN()?.creditCardIssuerNetwork?.name ?: ""
 )
 
 /**

diff --git a/...s/src/main/java/mozilla/components/feature/prompts/creditcard/CreditCardItemViewHolder.kt b/...s/src/main/java/mozilla/components/feature/prompts/creditcard/CreditCardItemViewHolder.kt
@@ -5,10 +5,12 @@
 package mozilla.components.feature.prompts.creditcard
 
 import android.view.View
+import android.widget.ImageView
 import android.widget.TextView
 import androidx.recyclerview.widget.RecyclerView
 import mozilla.components.concept.engine.prompt.CreditCard
 import mozilla.components.feature.prompts.R
+import mozilla.components.support.utils.creditCardIssuerNetwork
 import java.text.SimpleDateFormat
 import java.util.Calendar
 import java.util.Locale
@@ -29,6 +31,9 @@ class CreditCardItemViewHolder(
      * @param creditCard The [CreditCard] to display.
      */
     fun bind(creditCard: CreditCard) {
+        itemView.findViewById<ImageView>(R.id.credit_card_logo)
+            .setImageResource(creditCard.cardType.creditCardIssuerNetwork().icon)
+
         itemView.findViewById<TextView>(R.id.credit_card_number).text =
             creditCard.obfuscatedCardNumber
 

diff --git a/...nents/feature/prompts/src/main/res/layout/mozac_feature_prompts_credit_card_list_item.xml b/...nents/feature/prompts/src/main/res/layout/mozac_feature_prompts_credit_card_list_item.xml
@@ -9,40 +9,51 @@
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:background="?android:attr/selectableItemBackground"
-    android:clickable="true"
-    android:focusable="true"
-    android:minHeight="?android:attr/listPreferredItemHeight"
-    android:paddingStart="63dp"
-    android:paddingTop="8dp"
-    android:paddingEnd="8dp"
-    android:paddingBottom="8dp">
+    android:minHeight="?android:attr/listPreferredItemHeight">
+
+    <ImageView
+        android:id="@+id/credit_card_logo"
+        android:layout_width="40dp"
+        android:layout_height="40dp"
+        android:layout_marginStart="16dp"
+        android:scaleType="fitCenter"
+        android:importantForAccessibility="no"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintBottom_toBottomOf="parent" />
 
     <TextView
         android:id="@+id/credit_card_number"
-        android:layout_width="match_parent"
+        android:layout_width="0dp"
         android:layout_height="wrap_content"
+        android:layout_marginStart="16dp"
+        android:layout_marginEnd="48dp"
         android:clickable="false"
         android:focusable="false"
         android:importantForAutofill="no"
         android:textAppearance="?android:attr/textAppearanceListItem"
         android:textIsSelectable="false"
+        app:layout_constraintBottom_toTopOf="@id/credit_card_expiration_date"
         app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintStart_toEndOf="@id/credit_card_logo"
         app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintVertical_chainStyle="packed"
         tools:text="Card 0000000000" />
 
     <TextView
         android:id="@+id/credit_card_expiration_date"
-        android:layout_width="match_parent"
+        android:layout_width="0dp"
         android:layout_height="wrap_content"
+        android:layout_marginStart="16dp"
+        android:layout_marginEnd="48dp"
         android:clickable="false"
         android:focusable="false"
         android:importantForAutofill="no"
         android:textAppearance="?android:attr/textAppearanceListItemSecondary"
         android:textIsSelectable="false"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintStart_toEndOf="@id/credit_card_logo"
         app:layout_constraintTop_toBottomOf="@id/credit_card_number"
         tools:text="01/2022" />
 </androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/...s/feature/prompts/src/main/res/layout/mozac_feature_prompts_credit_card_select_prompt.xml b/...s/feature/prompts/src/main/res/layout/mozac_feature_prompts_credit_card_select_prompt.xml
@@ -68,7 +68,7 @@
                 android:background="?android:selectableItemBackground"
                 android:drawablePadding="24dp"
                 android:gravity="center_vertical"
-                android:paddingStart="16dp"
+                android:paddingStart="24dp"
                 android:paddingEnd="0dp"
                 android:text="@string/mozac_feature_prompts_manage_credit_cards"
                 android:textColor="?android:textColorPrimary"

diff --git a/...c/test/java/mozilla/components/feature/prompts/creditcard/CreditCardItemViewHolderTest.kt b/...c/test/java/mozilla/components/feature/prompts/creditcard/CreditCardItemViewHolderTest.kt
@@ -6,13 +6,16 @@ package mozilla.components.feature.prompts.creditcard
 
 import android.view.LayoutInflater
 import android.view.View
+import android.widget.ImageView
 import android.widget.TextView
 import androidx.test.ext.junit.runners.AndroidJUnit4
 import mozilla.components.concept.engine.prompt.CreditCard
 import mozilla.components.feature.prompts.R
 import mozilla.components.support.test.mock
 import mozilla.components.support.test.robolectric.testContext
+import mozilla.components.support.utils.CreditCardNetworkType
 import org.junit.Assert.assertEquals
+import org.junit.Assert.assertNotNull
 import org.junit.Before
 import org.junit.Test
 import org.junit.runner.RunWith
@@ -21,31 +24,34 @@ import org.junit.runner.RunWith
 class CreditCardItemViewHolderTest {
 
     private lateinit var view: View
+    private lateinit var cardLogoView: ImageView
     private lateinit var cardNumberView: TextView
     private lateinit var expirationDateView: TextView
     private lateinit var onCreditCardSelected: (CreditCard) -> Unit
 
     private val creditCard = CreditCard(
         guid = "1",
         name = "Banana Apple",
-        number = "4111111111111110",
+        number = "4111111111111111",
         expiryMonth = "5",
         expiryYear = "2030",
-        cardType = "amex"
+        cardType = CreditCardNetworkType.VISA.cardName
     )
 
     @Before
     fun setup() {
         view = LayoutInflater.from(testContext).inflate(CreditCardItemViewHolder.LAYOUT_ID, null)
+        cardLogoView = view.findViewById(R.id.credit_card_logo)
         cardNumberView = view.findViewById(R.id.credit_card_number)
         expirationDateView = view.findViewById(R.id.credit_card_expiration_date)
         onCreditCardSelected = mock()
     }
 
     @Test
-    fun `GIVEN a credit card item WHEN bind is called THEN set the card number and expiry date text`() {
+    fun `GIVEN a credit card item WHEN bind is called THEN set the card number, logo and expiry date`() {
         CreditCardItemViewHolder(view, onCreditCardSelected).bind(creditCard)
 
+        assertNotNull(cardLogoView.drawable)
         assertEquals(creditCard.obfuscatedCardNumber, cardNumberView.text)
         assertEquals("0${creditCard.expiryMonth}/${creditCard.expiryYear}", expirationDateView.text)
     }