Tweak design of bank account details form

stripe · Jan 16, 2025 · ffc85e2 · ffc85e2
1 parent 96e9ba3
commit ffc85e2
Show file tree

Hide file tree

Showing 15 changed files with 27 additions and 7 deletions.
diff --git a/...ain/java/com/stripe/android/paymentsheet/paymentdatacollection/ach/TransformToBankIcon.kt b/...ain/java/com/stripe/android/paymentsheet/paymentdatacollection/ach/TransformToBankIcon.kt
@@ -26,7 +26,7 @@ internal interface TransformToBankIcon {
                     StripeR.drawable.stripe_ic_bank_suntrust,
                 Regex("Silicon Valley Bank", RegexOption.IGNORE_CASE) to
                     StripeR.drawable.stripe_ic_bank_svb,
-                Regex("Stripe|TestInstitution", RegexOption.IGNORE_CASE) to
+                Regex("Stripe|Test Institution", RegexOption.IGNORE_CASE) to
                     StripeR.drawable.stripe_ic_bank_stripe,
                 Regex("TD Bank", RegexOption.IGNORE_CASE) to
                     StripeR.drawable.stripe_ic_bank_td,

diff --git a/.../main/java/com/stripe/android/paymentsheet/paymentdatacollection/ach/USBankAccountForm.kt b/.../main/java/com/stripe/android/paymentsheet/paymentdatacollection/ach/USBankAccountForm.kt
@@ -26,6 +26,7 @@ import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
@@ -56,6 +57,7 @@ import com.stripe.android.uicore.elements.TextFieldController
 import com.stripe.android.uicore.elements.TextFieldSection
 import com.stripe.android.uicore.strings.resolve
 import com.stripe.android.uicore.stripeColors
+import com.stripe.android.uicore.stripeTypography
 import com.stripe.android.uicore.utils.collectAsState
 import com.stripe.android.R as StripeR
 import com.stripe.android.ui.core.R as PaymentsUiCoreR
@@ -405,14 +407,32 @@ private fun AccountDetailsForm(
                         modifier = Modifier.size(24.dp),
                     )
 
-                    Text(
-                        text = "$bankName •••• $last4",
-                        color = MaterialTheme.stripeColors.onComponent,
-                        overflow = TextOverflow.Ellipsis,
+                    Column(
                         modifier = Modifier
                             .alpha(if (isProcessing) 0.5f else 1f)
                             .weight(1f, fill = false),
-                    )
+                    ) {
+                        if (bankName != null) {
+                            Text(
+                                text = bankName,
+                                style = MaterialTheme.typography.body1.copy(
+                                    fontWeight = FontWeight(MaterialTheme.stripeTypography.fontWeightMedium),
+                                ),
+                                color = MaterialTheme.stripeColors.onComponent,
+                                overflow = TextOverflow.Ellipsis,
+                                maxLines = 1,
+                            )
+                        }
+
+                        Text(
+                            text = "••••${last4.orEmpty()}",
+                            style = MaterialTheme.typography.caption.copy(
+                                fontWeight = FontWeight(MaterialTheme.stripeTypography.fontWeightNormal),
+                            ),
+                            color = MaterialTheme.stripeColors.placeholderText,
+                            maxLines = 1,
+                        )
+                    }
 
                     promoBadgeState?.let { badgeState ->
                         PromoBadge(

diff --git a/...com/stripe/android/paymentsheet/paymentdatacollection/ach/AccountPreviewScreenshotTest.kt b/...com/stripe/android/paymentsheet/paymentdatacollection/ach/AccountPreviewScreenshotTest.kt
@@ -151,7 +151,7 @@ internal class AccountPreviewScreenshotTest {
                     sessionId = "session_1234",
                     promoText = "$5",
                     eligibleForPromo = false,
-                    bankName = "SuperDuperUltraLongBankName",
+                    bankName = "SuperDuperUltraLongBankNameOMG",
                 ),
                 instantDebits = true,
                 isPaymentFlow = true,

diff --git a/...tdatacollection.ach_AccountPreviewScreenshotTest_testPaymentFlow[DarkTheme].png b/...tdatacollection.ach_AccountPreviewScreenshotTest_testPaymentFlow[DarkTheme].png
diff --git a/...datacollection.ach_AccountPreviewScreenshotTest_testPaymentFlow[LightTheme].png b/...datacollection.ach_AccountPreviewScreenshotTest_testPaymentFlow[LightTheme].png
diff --git a/...entdatacollection.ach_AccountPreviewScreenshotTest_testSetupFlow[DarkTheme].png b/...entdatacollection.ach_AccountPreviewScreenshotTest_testSetupFlow[DarkTheme].png
diff --git a/...ntdatacollection.ach_AccountPreviewScreenshotTest_testSetupFlow[LightTheme].png b/...ntdatacollection.ach_AccountPreviewScreenshotTest_testSetupFlow[LightTheme].png
diff --git a/...llection.ach_AccountPreviewScreenshotTest_testWithBillingAddress[DarkTheme].png b/...llection.ach_AccountPreviewScreenshotTest_testWithBillingAddress[DarkTheme].png
diff --git a/...lection.ach_AccountPreviewScreenshotTest_testWithBillingAddress[LightTheme].png b/...lection.ach_AccountPreviewScreenshotTest_testWithBillingAddress[LightTheme].png
diff --git a/...on.ach_AccountPreviewScreenshotTest_testWithIneligiblePromoBadge[DarkTheme].png b/...on.ach_AccountPreviewScreenshotTest_testWithIneligiblePromoBadge[DarkTheme].png
diff --git a/...n.ach_AccountPreviewScreenshotTest_testWithIneligiblePromoBadge[LightTheme].png b/...n.ach_AccountPreviewScreenshotTest_testWithIneligiblePromoBadge[LightTheme].png
diff --git a/...eviewScreenshotTest_testWithPromoBadgeNextToSuperLongAccountName[DarkTheme].png b/...eviewScreenshotTest_testWithPromoBadgeNextToSuperLongAccountName[DarkTheme].png
diff --git a/...viewScreenshotTest_testWithPromoBadgeNextToSuperLongAccountName[LightTheme].png b/...viewScreenshotTest_testWithPromoBadgeNextToSuperLongAccountName[LightTheme].png
diff --git a/...tacollection.ach_AccountPreviewScreenshotTest_testWithPromoBadge[DarkTheme].png b/...tacollection.ach_AccountPreviewScreenshotTest_testWithPromoBadge[DarkTheme].png
diff --git a/...acollection.ach_AccountPreviewScreenshotTest_testWithPromoBadge[LightTheme].png b/...acollection.ach_AccountPreviewScreenshotTest_testWithPromoBadge[LightTheme].png