Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix missing theming for add lpm button and notes text #5068

Merged
merged 2 commits into from May 25, 2022
Merged

Fix missing theming for add lpm button and notes text #5068

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6a20157
Fix missing theming for add lpm button and notes text
skyler-stripe May 25, 2022
94fabe1
changelog
skyler-stripe May 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Expand Up @@ -3,6 +3,7 @@

### PaymentSheet
* [DEPRECATED][5061](https://github.com/stripe/stripe-android/pull/5061) Add Deprecated annotation to old primaryButtonColor api.
* [FIXED][5068](https://github.com/stripe/stripe-android/pull/5068) Fix missing theming for add lpm button and notes text

## 20.4.0 - 2022-05-23
This release adds [appearance customization APIs](https://github.com/stripe/stripe-android/blob/master/paymentsheet/src/main/java/com/stripe/android/paymentsheet/PaymentSheet.kt#L186) to payment sheet and enables Affirm and AU BECS direct debit as payment methods within Payment Sheet.
Expand Down
316 changes: 160 additions & 156 deletions paymentsheet/src/main/java/com/stripe/android/paymentsheet/PaymentOptionsAdapter.kt
View file
Open in desktop
Expand Up @@ -340,21 +340,23 @@ internal class PaymentOptionsAdapter(
)

composeView.setContent {
PaymentOptionUi(
viewWidth = width,
isEditing = isEditing,
isSelected = isSelected,
isEnabled = isEnabled,
iconRes = savedPaymentMethod.paymentMethod.getSavedPaymentMethodIcon() ?: 0,
labelIcon = labelIcon,
labelText = labelText,
removePmDialogTitle = removeTitle,
description = item.getDescription(itemView.resources),
onRemoveListener = { onRemoveListener(position) },
onRemoveAccessibilityDescription =
savedPaymentMethod.getRemoveDescription(itemView.resources),
onItemSelectedListener = { onItemSelectedListener(position, true) },
)
PaymentsTheme {
PaymentOptionUi(
viewWidth = width,
isEditing = isEditing,
isSelected = isSelected,
isEnabled = isEnabled,
iconRes = savedPaymentMethod.paymentMethod.getSavedPaymentMethodIcon() ?: 0,
labelIcon = labelIcon,
labelText = labelText,
removePmDialogTitle = removeTitle,
description = item.getDescription(itemView.resources),
onRemoveListener = { onRemoveListener(position) },
onRemoveAccessibilityDescription =
savedPaymentMethod.getRemoveDescription(itemView.resources),
onItemSelectedListener = { onItemSelectedListener(position, true) },
)
}
}
}
}
Expand All @@ -381,26 +383,28 @@ internal class PaymentOptionsAdapter(
position: Int
) {
composeView.setContent {
val iconRes = if (
MaterialTheme.paymentsColors.component.shouldUseDarkDynamicColor()
) {
R.drawable.stripe_ic_paymentsheet_add_dark
} else {
R.drawable.stripe_ic_paymentsheet_add_light
PaymentsTheme {
val iconRes = if (
MaterialTheme.paymentsColors.component.shouldUseDarkDynamicColor()
) {
R.drawable.stripe_ic_paymentsheet_add_dark
} else {
R.drawable.stripe_ic_paymentsheet_add_light
}
PaymentOptionUi(
viewWidth = width,
isEditing = false,
isSelected = false,
isEnabled = isEnabled,
labelText = itemView.resources.getString(
R.string.stripe_paymentsheet_add_payment_method_button_label
),
iconRes = iconRes,
onItemSelectedListener = onItemSelectedListener,
description =
itemView.resources.getString(R.string.add_new_payment_method),
)
}
PaymentOptionUi(
viewWidth = width,
isEditing = false,
isSelected = false,
isEnabled = isEnabled,
labelText = itemView.resources.getString(
R.string.stripe_paymentsheet_add_payment_method_button_label
),
iconRes = iconRes,
onItemSelectedListener = onItemSelectedListener,
description =
itemView.resources.getString(R.string.add_new_payment_method),
)
}
}
}
Expand Down Expand Up @@ -431,16 +435,18 @@ internal class PaymentOptionsAdapter(
position: Int
) {
composeView.setContent {
PaymentOptionUi(
viewWidth = width,
isEditing = false,
isSelected = isSelected,
isEnabled = isEnabled,
iconRes = R.drawable.stripe_google_pay_mark,
labelText = itemView.resources.getString(R.string.google_pay),
description = itemView.resources.getString(R.string.google_pay),
onItemSelectedListener = { onItemSelectedListener(position, true) },
)
PaymentsTheme {
PaymentOptionUi(
viewWidth = width,
isEditing = false,
isSelected = isSelected,
isEnabled = isEnabled,
iconRes = R.drawable.stripe_google_pay_mark,
labelText = itemView.resources.getString(R.string.google_pay),
description = itemView.resources.getString(R.string.google_pay),
onItemSelectedListener = { onItemSelectedListener(position, true) },
)
}
}
}
}
Expand Down Expand Up @@ -593,131 +599,129 @@ internal fun PaymentOptionUi(
) {
// An attempt was made to not use constraint layout here but it was unsuccessful in
// precisely positioning the check and delete icons to match the mocks.
PaymentsTheme {
ConstraintLayout(
ConstraintLayout(
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks like I changed way more than I did. I just removed the PaymentsTheme being set.

modifier = Modifier
.padding(top = 12.dp)
.width(viewWidth)
.alpha(alpha = if (isEnabled) 1.0F else 0.6F)
.selectable(selected = isSelected, enabled = isEnabled, onClick = {
onItemSelectedListener()
})
) {
val (checkIcon, deleteIcon, label, card) = createRefs()
SectionCard(
isSelected = isSelected,
modifier = Modifier
.padding(top = 12.dp)
.width(viewWidth)
.alpha(alpha = if (isEnabled) 1.0F else 0.6F)
.selectable(selected = isSelected, enabled = isEnabled, onClick = {
onItemSelectedListener()
})
.height(64.dp)
.padding(horizontal = PM_OPTIONS_DEFAULT_PADDING.dp)
.fillMaxWidth()
.constrainAs(card) {
top.linkTo(parent.top)
start.linkTo(parent.start)
end.linkTo(parent.end)
}
) {
val (checkIcon, deleteIcon, label, card) = createRefs()
SectionCard(
isSelected = isSelected,
modifier = Modifier
.height(64.dp)
.padding(horizontal = PM_OPTIONS_DEFAULT_PADDING.dp)
.fillMaxWidth()
.constrainAs(card) {
top.linkTo(parent.top)
start.linkTo(parent.start)
end.linkTo(parent.end)
}
Column(
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier.fillMaxSize()
) {
Column(
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier.fillMaxSize()
) {
Image(
painter = painterResource(iconRes),
contentDescription = null,
modifier = Modifier
.height(40.dp)
.width(56.dp)
)
}
}
if (isSelected) {
val iconColor = MaterialTheme.colors.primary
val checkSymbolColor = if (iconColor.shouldUseDarkDynamicColor()) {
Color.Black
} else {
Color.White
}
Box(
contentAlignment = Alignment.Center,
Image(
painter = painterResource(iconRes),
contentDescription = null,
modifier = Modifier
.clip(CircleShape)
.size(24.dp)
.background(MaterialTheme.colors.primary)
.constrainAs(checkIcon) {
top.linkTo(card.bottom, (-18).dp)
end.linkTo(card.end)
}
) {
Icon(
imageVector = Icons.Filled.Check,
contentDescription = null,
tint = checkSymbolColor,
modifier = Modifier
.size(12.dp)
)
}
}
if (isEditing && onRemoveListener != null) {
val openDialog = remember { mutableStateOf(false) }

SimpleDialogElementUI(
openDialog = openDialog,
titleText = removePmDialogTitle,
messageText = description,
confirmText = stringResource(R.string.remove),
dismissText = stringResource(R.string.cancel),
onConfirmListener = onRemoveListener
.height(40.dp)
.width(56.dp)
)

// tint the delete symbol so it contrasts well with the error color around it.
val iconColor = MaterialTheme.colors.error
val deleteIconColor = if (iconColor.shouldUseDarkDynamicColor()) {
Color.Black
} else {
Color.White
}
Image(
painter = painterResource(R.drawable.stripe_ic_delete_symbol),
contentDescription = onRemoveAccessibilityDescription,
colorFilter = ColorFilter.tint(deleteIconColor),
}
}
if (isSelected) {
val iconColor = MaterialTheme.colors.primary
val checkSymbolColor = if (iconColor.shouldUseDarkDynamicColor()) {
Color.Black
} else {
Color.White
}
Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.clip(CircleShape)
.size(24.dp)
.background(MaterialTheme.colors.primary)
.constrainAs(checkIcon) {
top.linkTo(card.bottom, (-18).dp)
end.linkTo(card.end)
}
) {
Icon(
imageVector = Icons.Filled.Check,
contentDescription = null,
tint = checkSymbolColor,
modifier = Modifier
.constrainAs(deleteIcon) {
top.linkTo(card.top, margin = (-9).dp)
end.linkTo(card.end)
}
.size(20.dp)
.clip(CircleShape)
.background(color = iconColor)
.clickable(
onClick = {
openDialog.value = true
}
)
.size(12.dp)
)
}
}
if (isEditing && onRemoveListener != null) {
val openDialog = remember { mutableStateOf(false) }

SimpleDialogElementUI(
openDialog = openDialog,
titleText = removePmDialogTitle,
messageText = description,
confirmText = stringResource(R.string.remove),
dismissText = stringResource(R.string.cancel),
onConfirmListener = onRemoveListener
)

LpmSelectorText(
icon = labelIcon,
text = labelText,
textColor = MaterialTheme.colors.onSurface,
isEnabled = isEnabled,
// tint the delete symbol so it contrasts well with the error color around it.
val iconColor = MaterialTheme.colors.error
val deleteIconColor = if (iconColor.shouldUseDarkDynamicColor()) {
Color.Black
} else {
Color.White
}
Image(
painter = painterResource(R.drawable.stripe_ic_delete_symbol),
contentDescription = onRemoveAccessibilityDescription,
colorFilter = ColorFilter.tint(deleteIconColor),
modifier = Modifier
.constrainAs(label) {
top.linkTo(card.bottom)
start.linkTo(card.start)
.constrainAs(deleteIcon) {
top.linkTo(card.top, margin = (-9).dp)
end.linkTo(card.end)
}
.padding(
top = 4.dp,
start = PM_OPTIONS_DEFAULT_PADDING.dp,
end = PM_OPTIONS_DEFAULT_PADDING.dp
.size(20.dp)
.clip(CircleShape)
.background(color = iconColor)
.clickable(
onClick = {
openDialog.value = true
}
)
.semantics {
// This makes the screen reader read out numbers digit by digit
// one one one one vs one thousand one hundred eleven
this.contentDescription =
description.replace("\\d".toRegex(), "$0 ")
},
)
}

LpmSelectorText(
icon = labelIcon,
text = labelText,
textColor = MaterialTheme.colors.onSurface,
isEnabled = isEnabled,
modifier = Modifier
.constrainAs(label) {
top.linkTo(card.bottom)
start.linkTo(card.start)
}
.padding(
top = 4.dp,
start = PM_OPTIONS_DEFAULT_PADDING.dp,
end = PM_OPTIONS_DEFAULT_PADDING.dp
)
.semantics {
// This makes the screen reader read out numbers digit by digit
// one one one one vs one thousand one hundred eleven
this.contentDescription =
description.replace("\\d".toRegex(), "$0 ")
},
)
}
}
17 changes: 10 additions & 7 deletions paymentsheet/src/main/java/com/stripe/android/paymentsheet/ui/BaseSheetActivity.kt
View file
Open in desktop
Expand Up @@ -281,13 +281,16 @@ internal abstract class BaseSheetActivity<ResultType> : AppCompatActivity() {
val showNotes = text != null
text?.let {
notesView.setContent {
Html(
html = text,
imageGetter = mapOf(),
color = MaterialTheme.paymentsColors.subtitle,
style = MaterialTheme.typography.body1.copy(textAlign = TextAlign.Center),
modifier = Modifier.padding(vertical = 8.dp)
)
PaymentsTheme {
Html(
html = text,
imageGetter = mapOf(),
color = MaterialTheme.paymentsColors.subtitle,
style = MaterialTheme.typography.body1.copy(
textAlign = TextAlign.Center
)
)
}
}
}
notesView.isVisible = showNotes
Expand Down