Skip to content

Commit

Permalink
[MOBILESDK-2682] Display “default” badge on default card in horizonta…
Browse files Browse the repository at this point in the history 
…l mode (#9876)

* savedpayment method tab

* PaymentSheetScreenSelectSavedPaymentMethodsScreenshotTest

* payment option screenshot test

* payment options screenshot test

* payment option test

* lint

* failing screenshot tests

* apidump

* unused import

* failing screenshot tests 2

* reversing new screenshot tests that are failing

* change id to fix PaymentSheetScreenSelectSavedPaymentMethodsScreenshotTests

* add comment

* make the screenshot test more legible

* using the CI screenshot tests

* typos

* fix failing test by using unmergedtree

* line too long

* test helper functions

* comment and shouldShowDefaultBadge only when editing

* test helpers

* changed screenshot tests

* remove default values

* remove redundant screenshot tests

* remove unessecary comment

* rename and move helper function

* address comments in paymentoptiontest

* revert screenshot changes

* remove unessecary screenshot tests

* move private test method to the bottom

* testDefaultPaymentOptionNotEditing

* remove screenshot test add ui test
  • Loading branch information
@tianzhao-stripe
tianzhao-stripe authored Jan 15, 2025
1 parent 544ef90 commit 6a4c71c
Show file tree
Hide file tree
Showing 23 changed files with 429 additions and 223 deletions.
4 changes: 4 additions & 0 deletions paymentsheet/api/paymentsheet.api
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2511,16 +2511,20 @@ public final class com/stripe/android/paymentsheet/ui/ComposableSingletons$Saved
public static final field INSTANCE Lcom/stripe/android/paymentsheet/ui/ComposableSingletons$SavedPaymentMethodTabKt;
public static field lambda-1 Lkotlin/jvm/functions/Function2;
public static field lambda-2 Lkotlin/jvm/functions/Function2;
public static field lambda-3 Lkotlin/jvm/functions/Function2;
public fun <init> ()V
public final fun getLambda-1$paymentsheet_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda-2$paymentsheet_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda-3$paymentsheet_release ()Lkotlin/jvm/functions/Function2;
}

public final class com/stripe/android/paymentsheet/ui/ComposableSingletons$SavedPaymentMethodTabLayoutUIKt {
public static final field INSTANCE Lcom/stripe/android/paymentsheet/ui/ComposableSingletons$SavedPaymentMethodTabLayoutUIKt;
public static field lambda-1 Lkotlin/jvm/functions/Function2;
public static field lambda-2 Lkotlin/jvm/functions/Function2;
public fun <init> ()V
public final fun getLambda-1$paymentsheet_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda-2$paymentsheet_release ()Lkotlin/jvm/functions/Function2;
}

public final class com/stripe/android/paymentsheet/ui/ComposableSingletons$SepaMandateActivityKt {
Expand Down
28 changes: 28 additions & 0 deletions paymentsheet/src/main/java/com/stripe/android/paymentsheet/ui/SavedPaymentMethodTab.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ internal fun SavedPaymentMethodTab(
viewWidth: Dp,
isSelected: Boolean,
shouldShowModifyBadge: Boolean,
shouldShowDefaultBadge: Boolean,
isEnabled: Boolean,
isClickable: Boolean = isEnabled,
iconRes: Int,
Expand Down Expand Up @@ -110,6 +111,13 @@ internal fun SavedPaymentMethodTab(
contentDescription = description.readNumbersAsIndividualDigits()
}
)

if (shouldShowDefaultBadge) {
DefaultPaymentMethodLabel(
modifier = Modifier
.padding(top = 4.dp, start = 6.dp, end = 6.dp)
)
}
}
},
modifier = modifier
Expand Down Expand Up @@ -213,6 +221,7 @@ private fun SavedPaymentMethodTabUISelected() {
viewWidth = 100.dp,
isSelected = true,
shouldShowModifyBadge = false,
shouldShowDefaultBadge = false,
isEnabled = true,
iconRes = R.drawable.stripe_ic_paymentsheet_card_visa,
labelText = "MasterCard",
Expand All @@ -230,6 +239,25 @@ private fun SavedPaymentMethodTabUIModifiable() {
viewWidth = 100.dp,
isSelected = false,
shouldShowModifyBadge = true,
shouldShowDefaultBadge = false,
isEnabled = true,
iconRes = R.drawable.stripe_ic_paymentsheet_card_visa,
labelText = "MasterCard",
description = "MasterCard",
onItemSelectedListener = {},
)
}
}

@Preview(name = "Default Payment option in modifiable mode")
@Composable
private fun DefaultSavedPaymentMethodTabUIModifiable() {
StripeTheme {
SavedPaymentMethodTab(
viewWidth = 100.dp,
isSelected = false,
shouldShowModifyBadge = true,
shouldShowDefaultBadge = true,
isEnabled = true,
iconRes = R.drawable.stripe_ic_paymentsheet_card_visa,
labelText = "MasterCard",
Expand Down
105 changes: 72 additions & 33 deletions ...ntsheet/src/main/java/com/stripe/android/paymentsheet/ui/SavedPaymentMethodTabLayoutUI.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,44 +164,63 @@ internal fun SavedPaymentMethodTabLayoutUI(
}
}

private val PREVIEW_PAYMENT_OPTION_ITEMS = listOf(
PaymentOptionsItem.AddCard,
PaymentOptionsItem.Link,
PaymentOptionsItem.GooglePay,
PaymentOptionsItem.SavedPaymentMethod(
DisplayableSavedPaymentMethod.create(
displayName = "4242".resolvableString,
paymentMethod = PaymentMethod(
id = "001",
created = null,
liveMode = false,
code = PaymentMethod.Type.Card.code,
type = PaymentMethod.Type.Card,
card = PaymentMethod.Card(
brand = CardBrand.Visa,
last4 = "4242",
)
),
shouldShowDefaultBadge = true
),
),
PaymentOptionsItem.SavedPaymentMethod(
DisplayableSavedPaymentMethod.create(
displayName = "4242".resolvableString,
paymentMethod = PaymentMethod(
id = "002",
created = null,
liveMode = false,
code = PaymentMethod.Type.SepaDebit.code,
type = PaymentMethod.Type.SepaDebit,
)
),
),
PaymentOptionsItem.SavedPaymentMethod(
DisplayableSavedPaymentMethod.create(
displayName = "5555".resolvableString,
paymentMethod = PaymentMethod(
id = "003",
created = null,
liveMode = false,
code = PaymentMethod.Type.Card.code,
type = PaymentMethod.Type.Card,
card = PaymentMethod.Card(
brand = CardBrand.MasterCard,
last4 = "4242",
)
)
),
),
)

@Preview(widthDp = 700)
@Composable
private fun SavedPaymentMethodsTabLayoutPreview() {
DefaultStripeTheme {
SavedPaymentMethodTabLayoutUI(
paymentOptionsItems = listOf(
PaymentOptionsItem.AddCard,
PaymentOptionsItem.Link,
PaymentOptionsItem.GooglePay,
PaymentOptionsItem.SavedPaymentMethod(
DisplayableSavedPaymentMethod.create(
displayName = "4242".resolvableString,
paymentMethod = PaymentMethod(
id = "001",
created = null,
liveMode = false,
code = PaymentMethod.Type.Card.code,
type = PaymentMethod.Type.Card,
card = PaymentMethod.Card(
brand = CardBrand.Visa,
last4 = "4242",
)
)
),
),
PaymentOptionsItem.SavedPaymentMethod(
DisplayableSavedPaymentMethod.create(
displayName = "4242".resolvableString,
paymentMethod = PaymentMethod(
id = "002",
created = null,
liveMode = false,
code = PaymentMethod.Type.SepaDebit.code,
type = PaymentMethod.Type.SepaDebit,
)
),
),
),
paymentOptionsItems = PREVIEW_PAYMENT_OPTION_ITEMS,
selectedPaymentOptionsItem = PaymentOptionsItem.AddCard,
isEditing = false,
isProcessing = false,
Expand All @@ -212,6 +231,22 @@ private fun SavedPaymentMethodsTabLayoutPreview() {
}
}

@Preview(widthDp = 700)
@Composable
private fun SavedPaymentMethodsTabLayoutWithDefaultPreview() {
DefaultStripeTheme {
SavedPaymentMethodTabLayoutUI(
paymentOptionsItems = PREVIEW_PAYMENT_OPTION_ITEMS,
selectedPaymentOptionsItem = PaymentOptionsItem.AddCard,
isEditing = true,
isProcessing = false,
onAddCardPressed = { },
onItemSelected = { },
onModifyItem = { },
)
}
}

@Composable
internal fun rememberItemWidth(maxWidth: Dp): Dp = remember(maxWidth) {
val targetWidth = maxWidth - 17.dp * 2
Expand Down Expand Up @@ -291,6 +326,7 @@ private fun AddCardTab(
SavedPaymentMethodTab(
viewWidth = width,
shouldShowModifyBadge = false,
shouldShowDefaultBadge = false,
isSelected = false,
labelText = stringResource(R.string.stripe_paymentsheet_add_payment_method_button_label),
isEnabled = isEnabled,
Expand All @@ -312,6 +348,7 @@ private fun GooglePayTab(
SavedPaymentMethodTab(
viewWidth = width,
shouldShowModifyBadge = false,
shouldShowDefaultBadge = false,
isSelected = isSelected,
isEnabled = isEnabled,
iconRes = R.drawable.stripe_google_pay_mark,
Expand All @@ -333,6 +370,7 @@ private fun LinkTab(
SavedPaymentMethodTab(
viewWidth = width,
shouldShowModifyBadge = false,
shouldShowDefaultBadge = false,
isSelected = isSelected,
isEnabled = isEnabled,
iconRes = R.drawable.stripe_ic_paymentsheet_link,
Expand Down Expand Up @@ -372,6 +410,7 @@ private fun SavedPaymentMethodTab(
SavedPaymentMethodTab(
viewWidth = width,
shouldShowModifyBadge = isEnabled && isEditing,
shouldShowDefaultBadge = paymentMethod.displayableSavedPaymentMethod.shouldShowDefaultBadge && isEditing,
isSelected = isSelected,
isEnabled = isEnabled,
isClickable = !isEditing,
Expand Down
5 changes: 4 additions & 1 deletion paymentsheet/src/test/java/com/stripe/android/model/PaymentMethodFixtures.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -598,7 +598,10 @@ internal object PaymentMethodFixtures {
}

fun defaultDisplayableCard(): DisplayableSavedPaymentMethod {
return CARD_PAYMENT_METHOD.toDisplayableSavedPaymentMethod(shouldShowDefaultBadge = true)
return CARD_PAYMENT_METHOD.copy(
id = "pm_234567890",

).toDisplayableSavedPaymentMethod(shouldShowDefaultBadge = true)
}

fun PaymentMethod.toDisplayableSavedPaymentMethod(
Expand Down
Loading

0 comments on commit 6a4c71c

Please sign in to comment.