Tweak bank form in PaymentSheet (#8517)

* Tweak bank form in PaymentSheet - Use non-padded Stripe Bank icon - Make icon smaller and adjust spacing around it - Increase line spacing in mandate text - Add space before last4 - Use `IconButton` instead of `Image` * Update screenshots
stripe · May 23, 2024 · 87b2464 · 87b2464
1 parent 1bdc1dc
commit 87b2464
Show file tree

Hide file tree

Showing 47 changed files with 85 additions and 42 deletions.
diff --git a/payments-core/res/drawable/stripe_ic_bank_stripe.xml b/payments-core/res/drawable/stripe_ic_bank_stripe.xml
@@ -1,16 +1,12 @@
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="56dp"
-    android:height="40dp"
-    android:viewportWidth="56"
-    android:viewportHeight="40">
-    <group>
-        <clip-path android:pathData="M14,6.5h27v27h-27z" />
-        <path
-            android:pathData="M14,6.5H41V33.5H14V6.5Z"
-            android:fillColor="#6772E5"
-            android:fillType="evenOdd" />
-        <path
-            android:pathData="M26.285,16.903C26.285,16.245 26.825,15.992 27.719,15.992C29.002,15.992 30.613,16.38 31.896,17.072V13.107C30.495,12.558 29.111,12.339 27.719,12.339C24.302,12.339 22.024,14.119 22.024,17.106C22.024,21.747 28.428,21.013 28.428,23.012C28.428,23.788 27.753,24.042 26.808,24.042C25.416,24.042 23.627,23.468 22.21,22.692V26.699C23.779,27.374 25.365,27.661 26.808,27.661C30.31,27.661 32.714,25.932 32.714,22.911C32.706,17.899 26.285,18.785 26.285,16.903V16.903Z"
-            android:fillColor="#ffffff" />
-    </group>
+    android:width="32dp"
+    android:height="32dp"
+    android:viewportWidth="32"
+    android:viewportHeight="32">
+    <path
+        android:pathData="M2,0L30,0A2,2 0,0 1,32 2L32,30A2,2 0,0 1,30 32L2,32A2,2 0,0 1,0 30L0,2A2,2 0,0 1,2 0z"
+        android:fillColor="#6772E5" />
+    <path
+        android:pathData="M14.563,12.328C14.563,11.549 15.202,11.25 16.259,11.25C17.776,11.25 19.692,11.709 21.209,12.527V7.837C19.552,7.178 17.916,6.919 16.259,6.919C12.208,6.919 9.513,9.035 9.513,12.567C9.513,18.076 17.098,17.198 17.098,19.573C17.098,20.491 16.299,20.79 15.182,20.79C13.525,20.79 11.41,20.111 9.733,19.193V23.944C11.589,24.742 13.465,25.081 15.182,25.081C19.333,25.081 22.187,23.025 22.187,19.453C22.167,13.505 14.563,14.563 14.563,12.328Z"
+        android:fillColor="#ffffff" />
 </vector>
diff --git a/paymentsheet/api/paymentsheet.api b/paymentsheet/api/paymentsheet.api
@@ -1706,6 +1706,13 @@ public final class com/stripe/android/paymentsheet/model/SetupIntentClientSecret
 	public synthetic fun newArray (I)[Ljava/lang/Object;
 }
 
+public final class com/stripe/android/paymentsheet/paymentdatacollection/ach/ComposableSingletons$USBankAccountFormKt {
+	public static final field INSTANCE Lcom/stripe/android/paymentsheet/paymentdatacollection/ach/ComposableSingletons$USBankAccountFormKt;
+	public static field lambda-1 Lkotlin/jvm/functions/Function2;
+	public fun <init> ()V
+	public final fun getLambda-1$paymentsheet_release ()Lkotlin/jvm/functions/Function2;
+}
+
 public final class com/stripe/android/paymentsheet/paymentdatacollection/ach/USBankAccountFormScreenState$BillingDetailsCollection$Creator : android/os/Parcelable$Creator {
 	public fun <init> ()V
 	public final fun createFromParcel (Landroid/os/Parcel;)Lcom/stripe/android/paymentsheet/paymentdatacollection/ach/USBankAccountFormScreenState$BillingDetailsCollection;
@@ -1920,6 +1927,13 @@ public final class com/stripe/android/paymentsheet/ui/ComposableSingletons$EditP
 	public final fun getLambda-2$paymentsheet_release ()Lkotlin/jvm/functions/Function2;
 }
 
+public final class com/stripe/android/paymentsheet/ui/ComposableSingletons$MandateTextKt {
+	public static final field INSTANCE Lcom/stripe/android/paymentsheet/ui/ComposableSingletons$MandateTextKt;
+	public static field lambda-1 Lkotlin/jvm/functions/Function2;
+	public fun <init> ()V
+	public final fun getLambda-1$paymentsheet_release ()Lkotlin/jvm/functions/Function2;
+}
+
 public final class com/stripe/android/paymentsheet/ui/ComposableSingletons$PaymentSheetScreenKt {
 	public static final field INSTANCE Lcom/stripe/android/paymentsheet/ui/ComposableSingletons$PaymentSheetScreenKt;
 	public static field lambda-1 Lkotlin/jvm/functions/Function4;

diff --git a/.../main/java/com/stripe/android/paymentsheet/paymentdatacollection/ach/USBankAccountForm.kt b/.../main/java/com/stripe/android/paymentsheet/paymentdatacollection/ach/USBankAccountForm.kt
@@ -1,22 +1,24 @@
 package com.stripe.android.paymentsheet.paymentdatacollection.ach
 
 import androidx.compose.foundation.Image
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -249,7 +251,7 @@ internal fun BillingDetailsForm(
             } else {
                 stringResource(R.string.stripe_paymentsheet_save_bank_title)
             },
-            modifier = Modifier.padding(top = 16.dp, bottom = 8.dp)
+            modifier = Modifier.padding(vertical = 8.dp)
         )
 
         val showName = if (instantDebits) {
@@ -397,8 +399,8 @@ private fun AccountDetailsForm(
     saveForFutureUseElement: SaveForFutureUseElement,
     onRemoveAccount: () -> Unit,
 ) {
-    var openDialog by remember { mutableStateOf(false) }
-    val bankIcon = TransformToBankIcon(bankName)
+    var openDialog by rememberSaveable { mutableStateOf(false) }
+    val bankIcon = remember(bankName) { TransformToBankIcon(bankName) }
 
     Column(
         Modifier
@@ -409,41 +411,45 @@ private fun AccountDetailsForm(
             text = stringResource(StripeR.string.stripe_title_bank_account),
             modifier = Modifier.padding(vertical = 8.dp)
         )
+
         SectionCard(modifier = Modifier.fillMaxWidth()) {
             Row(
                 modifier = Modifier
                     .fillMaxWidth()
-                    .padding(all = 8.dp),
+                    .heightIn(min = 56.dp)
+                    .padding(vertical = 12.dp)
+                    .padding(start = 16.dp)
+                    .padding(end = 8.dp),
                 verticalAlignment = Alignment.CenterVertically,
                 horizontalArrangement = Arrangement.SpaceBetween
             ) {
-                Row(verticalAlignment = Alignment.CenterVertically) {
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.spacedBy(8.dp),
+                ) {
                     Image(
                         painter = painterResource(bankIcon),
                         contentDescription = null,
-                        modifier = Modifier
-                            .height(40.dp)
-                            .width(56.dp)
+                        modifier = Modifier.size(24.dp),
                     )
+
                     Text(
-                        text = "$bankName ••••$last4",
+                        text = "$bankName •••• $last4",
                         modifier = Modifier.alpha(if (isProcessing) 0.5f else 1f),
-                        color = MaterialTheme.stripeColors.onComponent
+                        color = MaterialTheme.stripeColors.onComponent,
+                    )
+                }
+
+                IconButton(
+                    enabled = !isProcessing,
+                    onClick = { openDialog = true },
+                    modifier = Modifier.size(24.dp),
+                ) {
+                    Icon(
+                        painter = painterResource(StripeR.drawable.stripe_ic_clear),
+                        contentDescription = null,
                     )
                 }
-                Image(
-                    painter = painterResource(StripeR.drawable.stripe_ic_clear),
-                    contentDescription = null,
-                    modifier = Modifier
-                        .height(20.dp)
-                        .width(20.dp)
-                        .alpha(if (isProcessing) 0.5f else 1f)
-                        .clickable {
-                            if (!isProcessing) {
-                                openDialog = true
-                            }
-                        }
-                )
             }
         }
         if (showCheckbox) {

diff --git a/paymentsheet/src/main/java/com/stripe/android/paymentsheet/ui/MandateText.kt b/paymentsheet/src/main/java/com/stripe/android/paymentsheet/ui/MandateText.kt
@@ -3,7 +3,12 @@ package com.stripe.android.paymentsheet.ui
 import androidx.compose.material.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.TextUnit
+import androidx.compose.ui.unit.sp
+import com.stripe.android.uicore.StripeTheme
 import com.stripe.android.uicore.stripeColors
 import com.stripe.android.uicore.text.Html
 
@@ -13,11 +18,33 @@ internal fun Mandate(
     modifier: Modifier = Modifier,
 ) {
     mandateText?.let { text ->
+        val body = MaterialTheme.typography.body1
+        val lineHeight = body.calculateLineHeight(spacing = 4)
+
         Html(
             html = text,
             color = MaterialTheme.stripeColors.subtitle,
-            style = MaterialTheme.typography.body1.copy(textAlign = TextAlign.Center),
+            style = body.copy(
+                textAlign = TextAlign.Center,
+                lineHeight = lineHeight,
+            ),
             modifier = modifier,
         )
     }
 }
+
+@Preview(widthDp = 400)
+@Composable
+internal fun MandatePreview() {
+    StripeTheme {
+        Mandate("A super long mandate that just keeps going and going, and it just won't freaking end ever")
+    }
+}
+
+private fun TextStyle.calculateLineHeight(spacing: Int): TextUnit {
+    return if (fontSize.isSp) {
+        (fontSize.value + spacing).sp
+    } else {
+        fontSize
+    }
+}
diff --git a/...com/stripe/android/paymentsheet/paymentdatacollection/ach/AccountPreviewScreenshotTest.kt b/...com/stripe/android/paymentsheet/paymentdatacollection/ach/AccountPreviewScreenshotTest.kt
@@ -26,7 +26,7 @@ internal class AccountPreviewScreenshotTest {
     val paparazzi = PaparazziRule(
         SystemAppearance.entries,
         boxModifier = Modifier
-            .padding(0.dp)
+            .padding(16.dp)
             .fillMaxWidth(),
     )
 

diff --git a/...enshotTest_testSelectUSBankAccount[DarkTheme,DefaultFont,DefaultAppearance].png b/...enshotTest_testSelectUSBankAccount[DarkTheme,DefaultFont,DefaultAppearance].png
diff --git a/...nshotTest_testSelectUSBankAccount[LightTheme,DefaultFont,DefaultAppearance].png b/...nshotTest_testSelectUSBankAccount[LightTheme,DefaultFont,DefaultAppearance].png
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_BillingDetailsCollectionScreenshotTest_testEmptySetupFlow[DarkTheme].png b/...on.ach_BillingDetailsCollectionScreenshotTest_testEmptySetupFlow[DarkTheme].png
diff --git a/...n.ach_BillingDetailsCollectionScreenshotTest_testEmptySetupFlow[LightTheme].png b/...n.ach_BillingDetailsCollectionScreenshotTest_testEmptySetupFlow[LightTheme].png
diff --git a/...llingDetailsCollectionScreenshotTest_testEmptyWithBillingAddress[DarkTheme].png b/...llingDetailsCollectionScreenshotTest_testEmptyWithBillingAddress[DarkTheme].png
diff --git a/...lingDetailsCollectionScreenshotTest_testEmptyWithBillingAddress[LightTheme].png b/...lingDetailsCollectionScreenshotTest_testEmptyWithBillingAddress[LightTheme].png
diff --git a/...acollection.ach_BillingDetailsCollectionScreenshotTest_testEmpty[DarkTheme].png b/...acollection.ach_BillingDetailsCollectionScreenshotTest_testEmpty[DarkTheme].png
diff --git a/...collection.ach_BillingDetailsCollectionScreenshotTest_testEmpty[LightTheme].png b/...collection.ach_BillingDetailsCollectionScreenshotTest_testEmpty[LightTheme].png
diff --git a/...lingDetailsCollectionScreenshotTest_testFilledWithBillingAddress[DarkTheme].png b/...lingDetailsCollectionScreenshotTest_testFilledWithBillingAddress[DarkTheme].png
diff --git a/...ingDetailsCollectionScreenshotTest_testFilledWithBillingAddress[LightTheme].png b/...ingDetailsCollectionScreenshotTest_testFilledWithBillingAddress[LightTheme].png
diff --git a/...collection.ach_BillingDetailsCollectionScreenshotTest_testFilled[DarkTheme].png b/...collection.ach_BillingDetailsCollectionScreenshotTest_testFilled[DarkTheme].png
diff --git a/...ollection.ach_BillingDetailsCollectionScreenshotTest_testFilled[LightTheme].png b/...ollection.ach_BillingDetailsCollectionScreenshotTest_testFilled[LightTheme].png
diff --git a/...dateSnapshotTest_testHtmlMandateText[DarkTheme,CrazyAppearance,DefaultFont].png b/...dateSnapshotTest_testHtmlMandateText[DarkTheme,CrazyAppearance,DefaultFont].png
diff --git a/...andateSnapshotTest_testHtmlMandateText[DarkTheme,CrazyAppearance,LargeFont].png b/...andateSnapshotTest_testHtmlMandateText[DarkTheme,CrazyAppearance,LargeFont].png
diff --git a/...ateSnapshotTest_testHtmlMandateText[DarkTheme,CustomAppearance,DefaultFont].png b/...ateSnapshotTest_testHtmlMandateText[DarkTheme,CustomAppearance,DefaultFont].png
diff --git a/...ndateSnapshotTest_testHtmlMandateText[DarkTheme,CustomAppearance,LargeFont].png b/...ndateSnapshotTest_testHtmlMandateText[DarkTheme,CustomAppearance,LargeFont].png
diff --git a/...teSnapshotTest_testHtmlMandateText[DarkTheme,DefaultAppearance,DefaultFont].png b/...teSnapshotTest_testHtmlMandateText[DarkTheme,DefaultAppearance,DefaultFont].png
diff --git a/...dateSnapshotTest_testHtmlMandateText[DarkTheme,DefaultAppearance,LargeFont].png b/...dateSnapshotTest_testHtmlMandateText[DarkTheme,DefaultAppearance,LargeFont].png
diff --git a/...ateSnapshotTest_testHtmlMandateText[LightTheme,CrazyAppearance,DefaultFont].png b/...ateSnapshotTest_testHtmlMandateText[LightTheme,CrazyAppearance,DefaultFont].png
diff --git a/...ndateSnapshotTest_testHtmlMandateText[LightTheme,CrazyAppearance,LargeFont].png b/...ndateSnapshotTest_testHtmlMandateText[LightTheme,CrazyAppearance,LargeFont].png
diff --git a/...teSnapshotTest_testHtmlMandateText[LightTheme,CustomAppearance,DefaultFont].png b/...teSnapshotTest_testHtmlMandateText[LightTheme,CustomAppearance,DefaultFont].png
diff --git a/...dateSnapshotTest_testHtmlMandateText[LightTheme,CustomAppearance,LargeFont].png b/...dateSnapshotTest_testHtmlMandateText[LightTheme,CustomAppearance,LargeFont].png
diff --git a/...eSnapshotTest_testHtmlMandateText[LightTheme,DefaultAppearance,DefaultFont].png b/...eSnapshotTest_testHtmlMandateText[LightTheme,DefaultAppearance,DefaultFont].png
diff --git a/...ateSnapshotTest_testHtmlMandateText[LightTheme,DefaultAppearance,LargeFont].png b/...ateSnapshotTest_testHtmlMandateText[LightTheme,DefaultAppearance,LargeFont].png
diff --git a/...dateSnapshotTest_testLongMandateText[DarkTheme,CrazyAppearance,DefaultFont].png b/...dateSnapshotTest_testLongMandateText[DarkTheme,CrazyAppearance,DefaultFont].png
diff --git a/...andateSnapshotTest_testLongMandateText[DarkTheme,CrazyAppearance,LargeFont].png b/...andateSnapshotTest_testLongMandateText[DarkTheme,CrazyAppearance,LargeFont].png
diff --git a/...ateSnapshotTest_testLongMandateText[DarkTheme,CustomAppearance,DefaultFont].png b/...ateSnapshotTest_testLongMandateText[DarkTheme,CustomAppearance,DefaultFont].png
diff --git a/...ndateSnapshotTest_testLongMandateText[DarkTheme,CustomAppearance,LargeFont].png b/...ndateSnapshotTest_testLongMandateText[DarkTheme,CustomAppearance,LargeFont].png
diff --git a/...teSnapshotTest_testLongMandateText[DarkTheme,DefaultAppearance,DefaultFont].png b/...teSnapshotTest_testLongMandateText[DarkTheme,DefaultAppearance,DefaultFont].png
diff --git a/...dateSnapshotTest_testLongMandateText[DarkTheme,DefaultAppearance,LargeFont].png b/...dateSnapshotTest_testLongMandateText[DarkTheme,DefaultAppearance,LargeFont].png
diff --git a/...ateSnapshotTest_testLongMandateText[LightTheme,CrazyAppearance,DefaultFont].png b/...ateSnapshotTest_testLongMandateText[LightTheme,CrazyAppearance,DefaultFont].png
diff --git a/...ndateSnapshotTest_testLongMandateText[LightTheme,CrazyAppearance,LargeFont].png b/...ndateSnapshotTest_testLongMandateText[LightTheme,CrazyAppearance,LargeFont].png
diff --git a/...teSnapshotTest_testLongMandateText[LightTheme,CustomAppearance,DefaultFont].png b/...teSnapshotTest_testLongMandateText[LightTheme,CustomAppearance,DefaultFont].png
diff --git a/...dateSnapshotTest_testLongMandateText[LightTheme,CustomAppearance,LargeFont].png b/...dateSnapshotTest_testLongMandateText[LightTheme,CustomAppearance,LargeFont].png
diff --git a/...eSnapshotTest_testLongMandateText[LightTheme,DefaultAppearance,DefaultFont].png b/...eSnapshotTest_testLongMandateText[LightTheme,DefaultAppearance,DefaultFont].png
diff --git a/...ateSnapshotTest_testLongMandateText[LightTheme,DefaultAppearance,LargeFont].png b/...ateSnapshotTest_testLongMandateText[LightTheme,DefaultAppearance,LargeFont].png