Fix CardDisplayTextFactory styling (#4326)

stripe · Oct 27, 2021 · 0ea9b82 · 0ea9b82
1 parent 51baf1e
commit 0ea9b82
Show file tree

Hide file tree

Showing 2 changed files with 128 additions and 16 deletions.
diff --git a/payments-core/src/main/java/com/stripe/android/view/CardDisplayTextFactory.kt b/payments-core/src/main/java/com/stripe/android/view/CardDisplayTextFactory.kt
@@ -39,47 +39,49 @@ internal class CardDisplayTextFactory internal constructor(
 
         val cardEndingIn = resources.getString(R.string.card_ending_in, brandText, last4)
         val totalLength = cardEndingIn.length
-        val last4length = last4.length
-        val last4Start = totalLength - last4length
+        val last4Start = cardEndingIn.indexOf(last4)
+        val last4End = last4Start + last4.length
+        val brandStart = cardEndingIn.indexOf(brandText)
+        val brandEnd = brandStart + brandText.length
         @ColorInt val textColor = themeConfig.getTextColor(isSelected)
         @ColorInt val lightTextColor = themeConfig.getTextAlphaColor(isSelected)
 
         val displayString = SpannableString(cardEndingIn)
 
-        // style brand
+        // style full string
         setSpan(
             displayString,
-            TypefaceSpan("sans-serif-medium"),
+            ForegroundColorSpan(lightTextColor),
             0,
-            brandLength
+            totalLength
         )
+
+        // override brand style
         setSpan(
             displayString,
-            ForegroundColorSpan(textColor),
-            0,
-            brandLength
+            TypefaceSpan("sans-serif-medium"),
+            brandStart,
+            brandEnd
         )
-
-        // style "ending in"
         setSpan(
             displayString,
-            ForegroundColorSpan(lightTextColor),
-            brandLength,
-            last4Start
+            ForegroundColorSpan(textColor),
+            brandStart,
+            brandEnd
         )
 
-        // style last 4
+        // override last 4 style
         setSpan(
             displayString,
             TypefaceSpan("sans-serif-medium"),
             last4Start,
-            totalLength
+            last4End
         )
         setSpan(
             displayString,
             ForegroundColorSpan(textColor),
             last4Start,
-            totalLength
+            last4End
         )
 
         return displayString

diff --git a/payments-core/src/test/java/com/stripe/android/view/CardDisplayTextFactoryTest.kt b/payments-core/src/test/java/com/stripe/android/view/CardDisplayTextFactoryTest.kt
@@ -1,12 +1,17 @@
 package com.stripe.android.view
 
 import android.content.Context
+import android.text.ParcelableSpan
+import android.text.style.ForegroundColorSpan
+import android.text.style.TypefaceSpan
+import androidx.core.text.getSpans
 import androidx.test.core.app.ApplicationProvider
 import com.stripe.android.model.CardBrand
 import com.stripe.android.model.PaymentMethod
 import com.stripe.android.model.PaymentMethodFixtures
 import org.junit.runner.RunWith
 import org.robolectric.RobolectricTestRunner
+import org.robolectric.annotation.Config
 import kotlin.test.Test
 import kotlin.test.assertEquals
 
@@ -59,4 +64,109 @@ class CardDisplayTextFactoryTest {
             ).toString()
         )
     }
+
+    @Test
+    @Config(qualifiers = "ja")
+    fun createStyled_ja_withMasterCard() {
+        val context = ApplicationProvider.getApplicationContext<Context>()
+        val themeConfig = ThemeConfig(context)
+        val cardDisplayTextFactory = CardDisplayTextFactory(
+            context.resources,
+            themeConfig
+        )
+        val styledString = cardDisplayTextFactory.createStyled(
+            CardBrand.MasterCard,
+            "4242",
+            false
+        )
+
+        val spans = styledString.getSpans<ParcelableSpan>()
+
+        // Full string style
+        assertEquals(styledString.getSpanStart(spans[0]), 0)
+        assertEquals(styledString.getSpanEnd(spans[0]), 21)
+        assertEquals(
+            (spans[0] as ForegroundColorSpan).foregroundColor,
+            themeConfig.getTextAlphaColor(false)
+        )
+
+        // Brand style
+        assertEquals(styledString.getSpanStart(spans[1]), 11)
+        assertEquals(styledString.getSpanEnd(spans[1]), 21)
+        assertEquals((spans[1] as TypefaceSpan).family, "sans-serif-medium")
+        assertEquals(styledString.getSpanStart(spans[2]), 11)
+        assertEquals(styledString.getSpanEnd(spans[2]), 21)
+        assertEquals(
+            (spans[2] as ForegroundColorSpan).foregroundColor,
+            themeConfig.getTextColor(false)
+        )
+
+        // Last 4 style
+        assertEquals(styledString.getSpanStart(spans[3]), 4)
+        assertEquals(styledString.getSpanEnd(spans[3]), 8)
+        assertEquals((spans[3] as TypefaceSpan).family, "sans-serif-medium")
+        assertEquals(styledString.getSpanStart(spans[4]), 4)
+        assertEquals(styledString.getSpanEnd(spans[4]), 8)
+        assertEquals(
+            (spans[4] as ForegroundColorSpan).foregroundColor,
+            themeConfig.getTextColor(false)
+        )
+
+        assertEquals(
+            "末尾が 4242 の Mastercard",
+            styledString.toString()
+        )
+    }
+
+    @Test
+    fun createStyled_en_withVisa() {
+        val context = ApplicationProvider.getApplicationContext<Context>()
+        val themeConfig = ThemeConfig(context)
+        val cardDisplayTextFactory = CardDisplayTextFactory(
+            context.resources,
+            themeConfig
+        )
+        val styledString = cardDisplayTextFactory.createStyled(
+            CardBrand.Visa,
+            "4242",
+            false
+        )
+
+        val spans = styledString.getSpans<ParcelableSpan>()
+
+        // Full string style
+        assertEquals(styledString.getSpanStart(spans[0]), 0)
+        assertEquals(styledString.getSpanEnd(spans[0]), 19)
+        assertEquals(
+            (spans[0] as ForegroundColorSpan).foregroundColor,
+            themeConfig.getTextAlphaColor(false)
+        )
+
+        // Brand style
+        assertEquals(styledString.getSpanStart(spans[1]), 0)
+        assertEquals(styledString.getSpanEnd(spans[1]), 4)
+        assertEquals((spans[1] as TypefaceSpan).family, "sans-serif-medium")
+        assertEquals(styledString.getSpanStart(spans[2]), 0)
+        assertEquals(styledString.getSpanEnd(spans[2]), 4)
+        assertEquals(
+            (spans[2] as ForegroundColorSpan).foregroundColor,
+            themeConfig.getTextColor(false)
+        )
+
+        // Last 4 style
+        assertEquals(styledString.getSpanStart(spans[3]), 15)
+        assertEquals(styledString.getSpanEnd(spans[3]), 19)
+        assertEquals((spans[3] as TypefaceSpan).family, "sans-serif-medium")
+        assertEquals(styledString.getSpanStart(spans[4]), 15)
+        assertEquals(styledString.getSpanEnd(spans[4]), 19)
+        assertEquals(
+            (spans[4] as ForegroundColorSpan).foregroundColor,
+            themeConfig.getTextColor(false)
+        )
+
+        assertEquals(
+            "Visa ending in 4242",
+            styledString.toString()
+        )
+    }
 }