Skip to content

Commit

Permalink
Update PaymentDetailsListItemScreenShotTest.kt
Browse files Browse the repository at this point in the history
Add screenshots

Minor fixes

clean up

fix test theme

Fix screenshots

Remove strings

remove unused payment details

remove alpha

Delete screenshots

Update strings.xml

Update screenshots

Fix screenshots
  • Loading branch information
toluo-stripe committed Nov 21, 2024
1 parent e0ed111 commit 98a4d44
Show file tree
Hide file tree
Showing 34 changed files with 139 additions and 134 deletions.
7 changes: 7 additions & 0 deletions link/api/link.api
Original file line number Diff line number Diff line change
Expand Up @@ -216,6 +216,13 @@ public final class com/stripe/android/link/ui/verification/ComposableSingletons$
public final fun getLambda-1$link_release ()Lkotlin/jvm/functions/Function3;
}

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

public final class com/stripe/android/link/utils/ComposableSingletons$InlineContentTemplateBuilderKt {
public static final field INSTANCE Lcom/stripe/android/link/utils/ComposableSingletons$InlineContentTemplateBuilderKt;
public static field lambda-1 Lkotlin/jvm/functions/Function2;
Expand Down
8 changes: 6 additions & 2 deletions link/res/values/strings.xml
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,10 @@
<string name="stripe_wallet_update_card">Update card</string>
<!-- A text notice shown when the user selects an expired card. -->
<string name="stripe_wallet_update_expired_card_error">This card has expired. Update your card info or choose a different payment method.</string>
<!-- Title for a button that when tapped removes a saved card. -->
<string name="stripe_wallet_remove_card">Remove card</string>
<!-- Prefix for last 4 digits of payment method id e.g •••• 1234 -->
<string name="stripe_wallet_last4_prefix" translatable="false">•••• </string>
<!-- Default name for bank account payment method when bank name is unavailable -->
<string name="stripe_wallet_bank">Bank</string>
<!-- Accessibility description for Passthrough payment method -->
<string name="stripe_wallet_passthrough_description" translatable="false">Passthrough</string>
</resources>

This file was deleted.

199 changes: 105 additions & 94 deletions link/src/main/java/com/stripe/android/link/ui/wallet/PaymentDetails.kt
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import androidx.compose.foundation.layout.width
import androidx.compose.material.CircularProgressIndicator
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.LocalContentAlpha
import androidx.compose.material.MaterialTheme
import androidx.compose.material.RadioButton
import androidx.compose.material.RadioButtonDefaults
Expand All @@ -34,7 +33,6 @@ import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.stripe.android.link.R
import com.stripe.android.link.model.icon
import com.stripe.android.link.theme.MinimumTouchTargetSize
import com.stripe.android.link.theme.linkColors
import com.stripe.android.link.theme.linkShapes
Expand All @@ -51,95 +49,115 @@ internal fun PaymentDetailsListItem(
onClick: () -> Unit,
onMenuButtonClick: () -> Unit
) {
Row(
modifier = Modifier
.fillMaxWidth()
.defaultMinSize(minHeight = 56.dp)
.clickable(enabled = enabled, onClick = onClick),
verticalAlignment = Alignment.CenterVertically
) {
RadioButton(
selected = isSelected,
onClick = null,
modifier = Modifier.padding(start = 20.dp, end = 6.dp),
colors = RadioButtonDefaults.colors(
selectedColor = MaterialTheme.linkColors.actionLabelLight,
unselectedColor = MaterialTheme.linkColors.disabledText
)
)
Column(
Column {
Row(
modifier = Modifier
.padding(vertical = 8.dp)
.weight(1f)
.fillMaxWidth()
.defaultMinSize(minHeight = 56.dp)
.clickable(enabled = enabled, onClick = onClick),
verticalAlignment = Alignment.CenterVertically
) {
Row(
modifier = Modifier.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically
RadioButton(
selected = isSelected,
onClick = null,
modifier = Modifier.padding(start = 20.dp, end = 6.dp),
colors = RadioButtonDefaults.colors(
selectedColor = MaterialTheme.linkColors.actionLabelLight,
unselectedColor = MaterialTheme.linkColors.disabledText
)
)
Column(
modifier = Modifier
.padding(vertical = 8.dp)
.weight(1f)
) {
PaymentDetails(paymentDetails = paymentDetails)
Row(
modifier = Modifier.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically
) {
PaymentDetails(paymentDetails = paymentDetails)

if (paymentDetails.isDefault) {
Box(
modifier = Modifier
.background(
color = MaterialTheme.colors.secondary,
shape = MaterialTheme.linkShapes.extraSmall
),
contentAlignment = Alignment.Center
) {
Text(
text = stringResource(id = R.string.stripe_wallet_default),
modifier = Modifier.padding(horizontal = 4.dp, vertical = 2.dp),
color = MaterialTheme.linkColors.disabledText,
fontSize = 12.sp,
fontWeight = FontWeight.Medium
)
if (paymentDetails.isDefault) {
DefaultTag()
}
}

val showWarning = (paymentDetails as? Card)?.isExpired ?: false
if (showWarning && !isSelected) {
Icon(
painter = painterResource(R.drawable.stripe_link_error),
contentDescription = null,
modifier = Modifier.size(20.dp),
tint = MaterialTheme.linkColors.errorText
)
val showWarning = (paymentDetails as? Card)?.isExpired ?: false
if (showWarning && !isSelected) {
Icon(
painter = painterResource(R.drawable.stripe_link_error),
contentDescription = null,
modifier = Modifier.size(20.dp),
tint = MaterialTheme.linkColors.errorText
)
}
}
}

MenuAndLoader(
enabled = enabled,
isUpdating = isUpdating,
onMenuButtonClick = onMenuButtonClick
)
}
TabRowDefaults.Divider(
modifier = Modifier.padding(horizontal = 20.dp),
color = MaterialTheme.linkColors.componentDivider,
thickness = 1.dp
)
}
}

Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.size(MinimumTouchTargetSize)
.padding(end = 12.dp)
) {
if (isUpdating) {
CircularProgressIndicator(
modifier = Modifier.size(24.dp),
strokeWidth = 2.dp
@Composable
private fun MenuAndLoader(
enabled: Boolean,
isUpdating: Boolean,
onMenuButtonClick: () -> Unit
) {
Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.size(MinimumTouchTargetSize)
.padding(end = 12.dp)
) {
if (isUpdating) {
CircularProgressIndicator(
modifier = Modifier.size(24.dp),
strokeWidth = 2.dp
)
} else {
IconButton(
onClick = onMenuButtonClick,
enabled = enabled
) {
Icon(
imageVector = Icons.Filled.MoreVert,
contentDescription = stringResource(StripeR.string.stripe_edit),
tint = MaterialTheme.linkColors.actionLabelLight,
modifier = Modifier.size(24.dp)
)
} else {
IconButton(
onClick = onMenuButtonClick,
enabled = enabled
) {
Icon(
imageVector = Icons.Filled.MoreVert,
contentDescription = stringResource(StripeR.string.stripe_edit),
tint = MaterialTheme.linkColors.actionLabelLight,
modifier = Modifier.size(24.dp)
)
}
}
}
}
TabRowDefaults.Divider(
modifier = Modifier.padding(horizontal = 20.dp),
color = MaterialTheme.linkColors.componentDivider,
thickness = 1.dp
)
}

@Composable
private fun DefaultTag() {
Box(
modifier = Modifier
.background(
color = MaterialTheme.colors.secondary,
shape = MaterialTheme.linkShapes.extraSmall
),
contentAlignment = Alignment.Center
) {
Text(
text = stringResource(id = R.string.stripe_wallet_default),
modifier = Modifier.padding(horizontal = 4.dp, vertical = 2.dp),
color = MaterialTheme.linkColors.disabledText,
fontSize = 12.sp,
fontWeight = FontWeight.Medium
)
}
}

@Composable
Expand All @@ -161,7 +179,7 @@ private fun RowScope.PaymentDetails(
CardInfo(
last4 = paymentDetails.last4,
icon = R.drawable.stripe_link_bank,
contentDescription = "Passthrough"
contentDescription = stringResource(R.string.stripe_wallet_passthrough_description)
)
}
}
Expand All @@ -184,17 +202,14 @@ private fun RowScope.CardInfo(
.width(38.dp)
.padding(horizontal = 6.dp),
alignment = Alignment.Center,
alpha = LocalContentAlpha.current
)
Text(
text = "•••• ",
color = MaterialTheme.colors.onPrimary
.copy(alpha = LocalContentAlpha.current)
text = stringResource(R.string.stripe_wallet_last4_prefix),
color = MaterialTheme.colors.onPrimary,
)
Text(
text = last4,
color = MaterialTheme.colors.onPrimary
.copy(alpha = LocalContentAlpha.current),
color = MaterialTheme.colors.onPrimary,
style = MaterialTheme.typography.h6
)
}
Expand All @@ -209,35 +224,31 @@ private fun RowScope.BankAccountInfo(
verticalAlignment = Alignment.CenterVertically
) {
Image(
painter = painterResource(bankAccount.icon),
painter = painterResource(R.drawable.stripe_link_bank),
contentDescription = null,
modifier = Modifier
.width(38.dp)
.padding(horizontal = 6.dp),
alignment = Alignment.Center,
alpha = LocalContentAlpha.current,
colorFilter = ColorFilter.tint(MaterialTheme.linkColors.actionLabelLight)
)
Column(horizontalAlignment = Alignment.Start) {
Text(
text = bankAccount.bankName ?: "Bank",
color = MaterialTheme.colors.onPrimary
.copy(alpha = LocalContentAlpha.current),
text = bankAccount.bankName ?: stringResource(R.string.stripe_wallet_bank),
color = MaterialTheme.colors.onPrimary,
overflow = TextOverflow.Ellipsis,
maxLines = 1,
style = MaterialTheme.typography.h6
)
Row(verticalAlignment = Alignment.CenterVertically) {
Text(
text = "•••• ",
color = MaterialTheme.colors.onSecondary
.copy(alpha = LocalContentAlpha.current),
text = stringResource(R.string.stripe_wallet_last4_prefix),
color = MaterialTheme.colors.onSecondary,
style = MaterialTheme.typography.body2
)
Text(
text = bankAccount.last4,
color = MaterialTheme.colors.onSecondary
.copy(alpha = LocalContentAlpha.current),
color = MaterialTheme.colors.onSecondary,
style = MaterialTheme.typography.body2
)
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ internal data class WalletUiState(
): WalletUiState {
return copy(
paymentDetailsList = response.paymentDetails,
selectedItem = paymentDetailsList.firstOrNull { supportedTypes.contains(it.type) },
selectedItem = response.paymentDetails.firstOrNull(),
isProcessing = false
)
}
Expand Down
Loading

0 comments on commit 98a4d44

Please sign in to comment.