Add save button to UpdatePaymentMethodUI for saving card brand

paymentsheet/src/main/java/com/stripe/android/customersheet/CustomerSheetViewModel.kt

@@ -587,6 +587,7 @@ internal class CustomerSheetViewModel(
                                 selectedBrand = it
                             )
                         },
+                        updateExecutor = ::updateExecutor,
                     ),
                     isLiveMode = isLiveModeProvider(),
                 )
@@ -614,12 +615,7 @@ internal class CustomerSheetViewModel(
                         },
                         displayName = providePaymentMethodName(paymentMethod.paymentMethod.type?.code),
                         removeExecutor = ::removeExecutor,
-                        updateExecutor = { method, brand ->
-                            when (val result = modifyCardPaymentMethod(method, brand)) {
-                                is CustomerSheetDataResult.Success -> Result.success(result.value)
-                                is CustomerSheetDataResult.Failure -> Result.failure(result.cause)
-                            }
-                        },
+                        updateExecutor = ::updateExecutor,
                         canRemove = customerState.canRemove,
                         isLiveMode = requireNotNull(customerState.metadata).stripeIntent.isLiveMode,
                         cardBrandFilter = PaymentSheetCardBrandFilter(customerState.configuration.cardBrandAcceptance)
@@ -637,6 +633,13 @@ internal class CustomerSheetViewModel(
         }.failureOrNull()?.cause
     }
 
+    private suspend fun updateExecutor(paymentMethod: PaymentMethod, brand: CardBrand): Result<PaymentMethod> {
+        return when (val result = modifyCardPaymentMethod(paymentMethod, brand)) {
+            is CustomerSheetDataResult.Success -> Result.success(result.value)
+            is CustomerSheetDataResult.Failure -> Result.failure(result.cause)
+        }
+    }
+
     private fun removePaymentMethodFromState(paymentMethod: PaymentMethod) {
         val currentCustomerState = customerState.value
         val newSavedPaymentMethods = currentCustomerState.paymentMethods.filter { it.id != paymentMethod.id!! }

paymentsheet/src/main/java/com/stripe/android/paymentsheet/SavedPaymentMethodMutator.kt

@@ -245,6 +245,7 @@ internal class SavedPaymentMethodMutator(
                         displayableSavedPaymentMethod,
                         cardBrandFilter = cardBrandFilter,
                         removeExecutor = ::removePaymentMethodInEditScreen,
+                        updateExecutor = ::modifyCardPaymentMethod,
                         onBrandChoiceOptionsShown = {
                             eventReporter.onShowPaymentOptionBrands(
                                 source = EventReporter.CardBrandChoiceEventSource.Edit,

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

@@ -24,22 +24,31 @@ internal interface UpdatePaymentMethodInteractor {
     val screenTitle: ResolvableString?
     val cardBrandFilter: CardBrandFilter
     val isExpiredCard: Boolean
+    val isModifiablePaymentMethod: Boolean
 
     val state: StateFlow<State>
 
     data class State(
         val error: ResolvableString?,
-        val isRemoving: Boolean,
+        val status: Status,
         val cardBrandChoice: CardBrandChoice,
+        val cardBrandHasBeenChanged: Boolean,
     )
 
+    enum class Status {
+        Idle,
+        Updating,
+        Removing
+    }
+
     fun handleViewAction(viewAction: ViewAction)
 
     sealed class ViewAction {
         data object RemovePaymentMethod : ViewAction()
         data object BrandChoiceOptionsShown : ViewAction()
         data class BrandChoiceChanged(val cardBrandChoice: CardBrandChoice) : ViewAction()
         data object BrandChoiceOptionsDismissed : ViewAction()
+        data object SaveButtonPressed : ViewAction()
     }
 
     companion object {
@@ -62,29 +71,36 @@ internal class DefaultUpdatePaymentMethodInteractor(
     override val displayableSavedPaymentMethod: DisplayableSavedPaymentMethod,
     override val cardBrandFilter: CardBrandFilter,
     private val removeExecutor: PaymentMethodRemoveOperation,
+    private val updateExecutor: PaymentMethodUpdateOperation,
     private val onBrandChoiceOptionsShown: (CardBrand) -> Unit,
     private val onBrandChoiceOptionsDismissed: (CardBrand) -> Unit,
     workContext: CoroutineContext = Dispatchers.Default,
 ) : UpdatePaymentMethodInteractor {
     private val coroutineScope = CoroutineScope(workContext + SupervisorJob())
     private val error = MutableStateFlow(getInitialError())
-    private val isRemoving = MutableStateFlow(false)
+    private val status = MutableStateFlow(UpdatePaymentMethodInteractor.Status.Idle)
     private val cardBrandChoice = MutableStateFlow(getInitialCardBrandChoice())
+    private val cardBrandHasBeenChanged = MutableStateFlow(false)
+    private val savedCardBrand = MutableStateFlow(getInitialCardBrandChoice())
 
     override val isExpiredCard = paymentMethodIsExpiredCard()
     override val screenTitle: ResolvableString? = UpdatePaymentMethodInteractor.screenTitle(
         displayableSavedPaymentMethod
     )
+    override val isModifiablePaymentMethod: Boolean
+        get() = !isExpiredCard && displayableSavedPaymentMethod.isModifiable()
 
     private val _state = combineAsStateFlow(
         error,
-        isRemoving,
+        status,
         cardBrandChoice,
-    ) { error, isRemoving, cardBrandChoice ->
+        cardBrandHasBeenChanged,
+    ) { error, status, cardBrandChoice, cardBrandHasBeenChanged, ->
         UpdatePaymentMethodInteractor.State(
             error = error,
-            isRemoving = isRemoving,
-            cardBrandChoice = cardBrandChoice
+            status = status,
+            cardBrandChoice = cardBrandChoice,
+            cardBrandHasBeenChanged = cardBrandHasBeenChanged,
         )
     }
     override val state = _state
@@ -98,6 +114,7 @@ internal class DefaultUpdatePaymentMethodInteractor(
             UpdatePaymentMethodInteractor.ViewAction.BrandChoiceOptionsDismissed -> onBrandChoiceOptionsDismissed(
                 cardBrandChoice.value.brand
             )
+            UpdatePaymentMethodInteractor.ViewAction.SaveButtonPressed -> savePaymentMethod()
             is UpdatePaymentMethodInteractor.ViewAction.BrandChoiceChanged -> onBrandChoiceChanged(
                 viewAction.cardBrandChoice
             )
@@ -107,17 +124,37 @@ internal class DefaultUpdatePaymentMethodInteractor(
     private fun removePaymentMethod() {
         coroutineScope.launch {
             error.emit(getInitialError())
-            isRemoving.emit(true)
+            status.emit(UpdatePaymentMethodInteractor.Status.Removing)
 
             val removeError = removeExecutor(displayableSavedPaymentMethod.paymentMethod)
 
-            isRemoving.emit(false)
+            status.emit(UpdatePaymentMethodInteractor.Status.Idle)
             error.emit(removeError?.stripeErrorMessage() ?: getInitialError())
         }
     }
 
+    private fun savePaymentMethod() {
+        coroutineScope.launch {
+            val newCardBrand = cardBrandChoice.value.brand
+
+            error.emit(getInitialError())
+            status.emit(UpdatePaymentMethodInteractor.Status.Updating)
+
+            val updateResult = updateExecutor(displayableSavedPaymentMethod.paymentMethod, newCardBrand)
+
+            updateResult.onSuccess {
+                savedCardBrand.emit(CardBrandChoice(brand = newCardBrand))
+                cardBrandHasBeenChanged.emit(false)
+            }.onFailure {
+                error.emit(it.stripeErrorMessage())
+            }
+            status.emit(UpdatePaymentMethodInteractor.Status.Idle)
+        }
+    }
+
     private fun onBrandChoiceChanged(cardBrandChoice: CardBrandChoice) {
         this.cardBrandChoice.value = cardBrandChoice
+        this.cardBrandHasBeenChanged.value = cardBrandChoice != savedCardBrand.value
 
         onBrandChoiceOptionsDismissed(cardBrandChoice.brand)
     }

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

@@ -50,6 +50,7 @@ import com.stripe.android.uicore.stripeColors
 import com.stripe.android.uicore.stripeShapes
 import com.stripe.android.uicore.utils.collectAsState
 import com.stripe.android.uicore.utils.mapAsStateFlow
+import com.stripe.android.common.ui.PrimaryButton as PrimaryButton
 import com.stripe.android.paymentsheet.R as PaymentSheetR
 
 @Composable
@@ -90,7 +91,9 @@ internal fun UpdatePaymentMethodUI(interactor: UpdatePaymentMethodInteractor, mo
                     style = MaterialTheme.typography.caption,
                     color = MaterialTheme.stripeColors.subtitle,
                     fontWeight = FontWeight.Normal,
-                    modifier = Modifier.padding(top = 12.dp).testTag(UPDATE_PM_DETAILS_SUBTITLE_TEST_TAG)
+                    modifier = Modifier
+                        .padding(top = 12.dp)
+                        .testTag(UPDATE_PM_DETAILS_SUBTITLE_TEST_TAG)
                 )
             }
         }
@@ -104,9 +107,26 @@ internal fun UpdatePaymentMethodUI(interactor: UpdatePaymentMethodInteractor, mo
             )
         }
 
-        if (interactor.canRemove) {
-            DeletePaymentMethodUi(interactor)
+        UpdatePaymentMethodButtons(interactor)
+    }
+}
+
+@Composable
+private fun UpdatePaymentMethodButtons(interactor: UpdatePaymentMethodInteractor) {
+    if (interactor.isModifiablePaymentMethod) {
+        Spacer(modifier = Modifier.requiredHeight(32.dp))
+        UpdatePaymentMethodUi(interactor)
+    }
+
+    if (interactor.canRemove) {
+        val spacerHeight = if (interactor.isModifiablePaymentMethod) {
+            16.dp
+        } else {
+            32.dp
         }
+
+        Spacer(modifier = Modifier.requiredHeight(spacerHeight))
+        DeletePaymentMethodUi(interactor)
     }
 }
 
@@ -128,7 +148,8 @@ private fun CardDetailsUI(
             CardNumberField(
                 card = card,
                 selectedBrand = selectedBrand,
-                isModifiable = displayableSavedPaymentMethod.isModifiable(),
+                shouldShowCardBrandDropdown = interactor.isModifiablePaymentMethod &&
+                    displayableSavedPaymentMethod.isModifiable(),
                 cardBrandFilter = interactor.cardBrandFilter,
                 savedPaymentMethodIcon = displayableSavedPaymentMethod
                     .paymentMethod
@@ -252,18 +273,29 @@ private fun BankAccountTextField(
     }
 }
 
+@Composable
+private fun UpdatePaymentMethodUi(interactor: UpdatePaymentMethodInteractor) {
+    val state by interactor.state.collectAsState()
+
+    PrimaryButton(
+        label = stringResource(id = PaymentSheetR.string.stripe_paymentsheet_save),
+        isLoading = state.status == UpdatePaymentMethodInteractor.Status.Updating,
+        isEnabled = state.cardBrandHasBeenChanged && state.status == UpdatePaymentMethodInteractor.Status.Idle,
+        onButtonClick = { interactor.handleViewAction(UpdatePaymentMethodInteractor.ViewAction.SaveButtonPressed) },
+        modifier = Modifier.testTag(UPDATE_PM_SAVE_BUTTON_TEST_TAG)
+    )
+}
+
 @Composable
 private fun DeletePaymentMethodUi(interactor: UpdatePaymentMethodInteractor) {
     val openDialogValue = rememberSaveable { mutableStateOf(false) }
-    val isRemoving by interactor.state.mapAsStateFlow { it.isRemoving }.collectAsState()
-
-    Spacer(modifier = Modifier.requiredHeight(32.dp))
+    val status by interactor.state.mapAsStateFlow { it.status }.collectAsState()
 
     RemoveButton(
         title = R.string.stripe_remove.resolvableString,
         borderColor = MaterialTheme.colors.error,
-        idle = true,
-        removing = openDialogValue.value || isRemoving,
+        idle = status == UpdatePaymentMethodInteractor.Status.Idle,
+        removing = openDialogValue.value || status == UpdatePaymentMethodInteractor.Status.Removing,
         onRemove = { openDialogValue.value = true },
         testTag = UPDATE_PM_REMOVE_BUTTON_TEST_TAG,
     )
@@ -283,7 +315,7 @@ private fun CardNumberField(
     card: PaymentMethod.Card,
     selectedBrand: CardBrandChoice,
     cardBrandFilter: CardBrandFilter,
-    isModifiable: Boolean,
+    shouldShowCardBrandDropdown: Boolean,
     savedPaymentMethodIcon: Int,
     onBrandOptionsShown: () -> Unit,
     onBrandChoiceChanged: (CardBrandChoice) -> Unit,
@@ -293,7 +325,7 @@ private fun CardNumberField(
         value = "•••• •••• •••• ${card.last4}",
         label = stringResource(id = R.string.stripe_acc_label_card_number),
         trailingIcon = {
-            if (isModifiable) {
+            if (shouldShowCardBrandDropdown) {
                 CardBrandDropdown(
                     selectedBrand = selectedBrand,
                     availableBrands = card.getAvailableNetworks(cardBrandFilter),
@@ -450,6 +482,7 @@ private fun PreviewUpdatePaymentMethodUI() {
             canRemove = true,
             displayableSavedPaymentMethod = exampleCard,
             removeExecutor = { null },
+            updateExecutor = { paymentMethod, _ -> Result.success(paymentMethod) },
             cardBrandFilter = DefaultCardBrandFilter,
             onBrandChoiceOptionsShown = {},
             onBrandChoiceOptionsDismissed = {},
@@ -481,6 +514,7 @@ private const val YEAR_2100 = 2100
 internal const val UPDATE_PM_EXPIRY_FIELD_TEST_TAG = "update_payment_method_expiry_date"
 internal const val UPDATE_PM_CVC_FIELD_TEST_TAG = "update_payment_method_cvc"
 internal const val UPDATE_PM_REMOVE_BUTTON_TEST_TAG = "update_payment_method_remove_button"
+internal const val UPDATE_PM_SAVE_BUTTON_TEST_TAG = "update_payment_method_save_button"
 internal const val UPDATE_PM_ERROR_MESSAGE_TEST_TAG = "update_payment_method_error_message"
 internal const val UPDATE_PM_US_BANK_ACCOUNT_TEST_TAG = "update_payment_method_bank_account_ui"
 internal const val UPDATE_PM_SEPA_DEBIT_TEST_TAG = "update_payment_method_sepa_debit_ui"

paymentsheet/src/test/java/com/stripe/android/customersheet/CustomerSheetScreenshotTest.kt

@@ -385,6 +385,7 @@ internal class CustomerSheetScreenshotTest {
             updatePaymentMethodInteractor = DefaultUpdatePaymentMethodInteractor(
                 displayableSavedPaymentMethod = PaymentMethodFixtures.displayableCard(),
                 removeExecutor = { null },
+                updateExecutor = { paymentMethod, _ -> Result.success(paymentMethod) },
                 canRemove = true,
                 isLiveMode = true,
                 cardBrandFilter = DefaultCardBrandFilter,

paymentsheet/src/test/java/com/stripe/android/model/PaymentMethodFixtures.kt

@@ -83,7 +83,12 @@ internal object PaymentMethodFixtures {
         type = PaymentMethod.Type.Card,
         billingDetails = BILLING_DETAILS,
         customerId = "cus_AQsHpvKfKwJDrF",
-        card = CARD.copy(
+        card = CARD_WITH_NETWORKS.copy(
+            displayBrand = "visa",
+            networks = PaymentMethod.Card.Networks(
+                available = setOf("visa", "cartes_bancaires"),
+                preferred = "visa",
+            ),
             expiryMonth = 4,
             expiryYear = 2024,
         ),