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

Change CardMultilineWidget icon to represent validity of input #2236

Merged
merged 1 commit into from
Mar 2, 2020
Merged

Change CardMultilineWidget icon to represent validity of input #2236

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 55 additions & 6 deletions stripe/src/main/java/com/stripe/android/view/CardMultilineWidget.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import androidx.annotation.DrawableRes
import androidx.annotation.IdRes
import androidx.annotation.IntRange
import androidx.annotation.StringRes
import androidx.annotation.VisibleForTesting
import androidx.core.content.ContextCompat
import androidx.core.graphics.drawable.DrawableCompat
import com.google.android.material.textfield.TextInputLayout
Expand Down Expand Up @@ -164,9 +165,12 @@ class CardMultilineWidget @JvmOverloads constructor(
override val cardBuilder: Card.Builder?
get() {
if (!validateAllFields()) {
shouldShowErrorIcon = true
return null
}

shouldShowErrorIcon = false

val cardNumber = cardNumber
val cardDate = requireNotNull(expiryDateEditText.validDateFields)
val cvcValue = cvcEditText.text?.toString()
Expand Down Expand Up @@ -216,6 +220,17 @@ class CardMultilineWidget @JvmOverloads constructor(
.setScale(0, RoundingMode.HALF_DOWN)
.toInt()

@VisibleForTesting
internal var shouldShowErrorIcon = false
private set(value) {
val isValueChange = field != value
field = value

if (isValueChange) {
updateBrandUi()
}
}

init {
orientation = VERTICAL
View.inflate(getContext(), R.layout.card_multiline_widget, this)
Expand Down Expand Up @@ -294,6 +309,15 @@ class CardMultilineWidget @JvmOverloads constructor(
cardBrand = CardBrand.Unknown
updateBrandUi()

allFields.forEach {
it.addTextChangedListener(object : StripeTextWatcher() {
override fun afterTextChanged(s: Editable?) {
super.afterTextChanged(s)
shouldShowErrorIcon = false
}
})
}

isEnabled = true
}

Expand Down Expand Up @@ -518,11 +542,21 @@ class CardMultilineWidget @JvmOverloads constructor(
}

private fun flipToCvcIconIfNotFinished() {
if (cardBrand.isMaxCvc(cvcEditText.text?.toString())) {
if (cardBrand.isMaxCvc(cvcEditText.fieldText)) {
return
}

updateDrawable(cardBrand.cvcIcon, true)
if (shouldShowErrorIcon) {
updateDrawable(
iconResourceId = cardBrand.errorIcon,
shouldTint = false
)
} else {
updateDrawable(
iconResourceId = cardBrand.cvcIcon,
shouldTint = true
)
}
}

private fun initDeleteEmptyListeners() {
Expand Down Expand Up @@ -595,26 +629,41 @@ class CardMultilineWidget @JvmOverloads constructor(

private fun updateBrandUi() {
updateCvc()
updateDrawable(cardBrand.icon, CardBrand.Unknown == cardBrand)
if (shouldShowErrorIcon) {
updateDrawable(
iconResourceId = cardBrand.errorIcon,
shouldTint = false
)
} else {
updateDrawable(
iconResourceId = cardBrand.icon,
shouldTint = CardBrand.Unknown == cardBrand
)
}
}

private fun updateCvc() {
cvcEditText.updateBrand(cardBrand, customCvcLabel, cvcTextInputLayout)
}

private fun updateDrawable(@DrawableRes iconResourceId: Int, needsTint: Boolean) {
private fun updateDrawable(@DrawableRes iconResourceId: Int, shouldTint: Boolean) {
val icon = ContextCompat.getDrawable(context, iconResourceId) ?: return
val original = cardNumberEditText.compoundDrawablesRelative[0] ?: return
val iconPadding = cardNumberEditText.compoundDrawablePadding
icon.bounds = createDrawableBounds(original)

val compatIcon = DrawableCompat.wrap(icon)
if (needsTint) {
if (shouldTint) {
DrawableCompat.setTint(compatIcon.mutate(), tintColorInt)
}

cardNumberEditText.compoundDrawablePadding = iconPadding
cardNumberEditText.setCompoundDrawablesRelative(compatIcon, null, null, null)
cardNumberEditText.setCompoundDrawablesRelative(
compatIcon,
null,
null,
null
)
}

private fun createDrawableBounds(drawable: Drawable): Rect {
Expand Down
21 changes: 21 additions & 0 deletions stripe/src/test/java/com/stripe/android/view/CardMultilineWidgetTest.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -753,6 +753,27 @@ internal class CardMultilineWidgetTest {
)
}

@Test
fun shouldShowErrorIcon_shouldBeUpdatedCorrectly() {
cardMultilineWidget.setExpiryDate(12, 2030)
cardMultilineWidget.setCvcCode("123")

// show error icon when validating fields with invalid card number
cardMultilineWidget.setCardNumber(VISA_NO_SPACES.take(6))
assertNull(cardMultilineWidget.paymentMethodCreateParams)
assertTrue(cardMultilineWidget.shouldShowErrorIcon)

// don't show error icon after changing input
cardMultilineWidget.setCardNumber(VISA_NO_SPACES.take(7))
assertFalse(cardMultilineWidget.shouldShowErrorIcon)

// don't show error icon when validating fields with invalid card number
assertNull(cardMultilineWidget.paymentMethodCreateParams)
cardMultilineWidget.setCardNumber(VISA_NO_SPACES)
assertNotNull(cardMultilineWidget.paymentMethodCreateParams)
assertFalse(cardMultilineWidget.shouldShowErrorIcon)
}

internal class WidgetControlGroup(widget: CardMultilineWidget) {
val cardNumberEditText: CardNumberEditText = widget.findViewById(R.id.et_card_number)
val cardInputLayout: TextInputLayout = widget.findViewById(R.id.tl_card_number)
Expand Down