Polish UpdatePaymentMethodUI (#9720)

* Polish UpdatePaymentMethodUI

* Update screenshots

paymentsheet/res/values/strings.xml

@@ -77,6 +77,8 @@
   <string name="stripe_paymentsheet_new_card">New card</string>
   <!-- Title shown above a section containing payment methods that a customer can choose to pay with e.g. card, bank account, etc. -->
   <string name="stripe_paymentsheet_new_pm">New payment method</string>
+  <!-- Text displayed on manage card screen when the only editable card detail is the card brand. -->
+  <string name="stripe_paymentsheet_only_card_brand_can_be_changed">Only card brand can be changed.</string>
   <!-- Title of a section containing multiple payment methods that can selected and will collect the payment information from the user. -->
   <string name="stripe_paymentsheet_or_pay_using">Or pay using</string>
   <!-- Title of a section containing a card form that will collect the payment information from the user. -->

paymentsheet/src/main/java/com/stripe/android/paymentsheet/ui/UpdatePaymentMethodUI.kt

@@ -60,13 +60,16 @@ internal fun UpdatePaymentMethodUI(interactor: UpdatePaymentMethodInteractor, mo
         id = PaymentSheetR.dimen.stripe_paymentsheet_outer_spacing_horizontal
     )
     val state by interactor.state.collectAsState()
+    val shouldShowCardBrandDropdown = interactor.isModifiablePaymentMethod &&
+        interactor.displayableSavedPaymentMethod.isModifiable()
 
     Column(
         modifier = modifier.padding(horizontal = horizontalPadding),
     ) {
         when (val savedPaymentMethod = interactor.displayableSavedPaymentMethod.savedPaymentMethod) {
             is SavedPaymentMethod.Card -> CardDetailsUI(
                 displayableSavedPaymentMethod = interactor.displayableSavedPaymentMethod,
+                shouldShowCardBrandDropdown = shouldShowCardBrandDropdown,
                 selectedBrand = state.cardBrandChoice,
                 card = savedPaymentMethod.card,
                 interactor = interactor,
@@ -85,7 +88,9 @@ internal fun UpdatePaymentMethodUI(interactor: UpdatePaymentMethodInteractor, mo
         }
 
         if (!interactor.isExpiredCard) {
-            interactor.displayableSavedPaymentMethod.getDetailsCannotBeChangedText()?.let {
+            interactor.displayableSavedPaymentMethod.getDetailsCannotBeChangedText(
+                shouldShowCardBrandDropdown = shouldShowCardBrandDropdown,
+            )?.let {
                 Text(
                     text = it.resolve(context),
                     style = MaterialTheme.typography.caption,
@@ -133,6 +138,7 @@ private fun UpdatePaymentMethodButtons(interactor: UpdatePaymentMethodInteractor
 @Composable
 private fun CardDetailsUI(
     displayableSavedPaymentMethod: DisplayableSavedPaymentMethod,
+    shouldShowCardBrandDropdown: Boolean,
     selectedBrand: CardBrandChoice,
     card: PaymentMethod.Card,
     interactor: UpdatePaymentMethodInteractor,
@@ -148,8 +154,7 @@ private fun CardDetailsUI(
             CardNumberField(
                 card = card,
                 selectedBrand = selectedBrand,
-                shouldShowCardBrandDropdown = interactor.isModifiablePaymentMethod &&
-                    displayableSavedPaymentMethod.isModifiable(),
+                shouldShowCardBrandDropdown = shouldShowCardBrandDropdown,
                 cardBrandFilter = interactor.cardBrandFilter,
                 savedPaymentMethodIcon = displayableSavedPaymentMethod
                     .paymentMethod
@@ -264,6 +269,7 @@ private fun BankAccountTextField(
 ) {
     Card(
         border = MaterialTheme.getBorderStroke(false),
+        elevation = 0.dp,
         modifier = modifier,
     ) {
         CommonTextField(
@@ -491,11 +497,17 @@ private fun PreviewUpdatePaymentMethodUI() {
     )
 }
 
-private fun DisplayableSavedPaymentMethod.getDetailsCannotBeChangedText(): ResolvableString? {
+private fun DisplayableSavedPaymentMethod.getDetailsCannotBeChangedText(
+    shouldShowCardBrandDropdown: Boolean,
+): ResolvableString? {
     return (
         when (savedPaymentMethod) {
             is SavedPaymentMethod.Card ->
-                PaymentSheetR.string.stripe_paymentsheet_card_details_cannot_be_changed
+                if (shouldShowCardBrandDropdown) {
+                    PaymentSheetR.string.stripe_paymentsheet_only_card_brand_can_be_changed
+                } else {
+                    PaymentSheetR.string.stripe_paymentsheet_card_details_cannot_be_changed
+                }
             is SavedPaymentMethod.USBankAccount ->
                 PaymentSheetR.string.stripe_paymentsheet_bank_account_details_cannot_be_changed
             is SavedPaymentMethod.SepaDebit ->

paymentsheet/src/test/java/com/stripe/android/paymentsheet/ui/UpdatePaymentMethodUITest.kt

@@ -268,6 +268,19 @@ class UpdatePaymentMethodUITest {
         }
     }
 
+    @Test
+    fun cardPaymentMethod_cbcEligible_onlyCardBrandCanBeChangedTextShown() {
+        runScenario(
+            displayableSavedPaymentMethod = PaymentMethodFixtures
+                .CARD_WITH_NETWORKS_PAYMENT_METHOD
+                .toDisplayableSavedPaymentMethod()
+        ) {
+            composeRule.onNodeWithTag(UPDATE_PM_DETAILS_SUBTITLE_TEST_TAG).assertTextEquals(
+                "Only card brand can be changed."
+            )
+        }
+    }
+
     @Test
     fun sepaPaymentMethod_sepaDetailsCannotBeChangedTextShown() {
         runScenario(