Merge pull request #82 from Trendyol/Trendyol/feature/cart_input_view…

…/clear_errors Implement clear errors functionality for CardInputView
Trendyol · Nov 2, 2021 · 0742ca0 · 0742ca0
2 parents 8b2670d + 915e82f
commit 0742ca0
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 7 deletions.
diff --git a/buildSrc/src/main/kotlin/ComponentVersions.kt b/buildSrc/src/main/kotlin/ComponentVersions.kt
@@ -6,7 +6,7 @@ object ComponentVersions {
     const val imageSliderVersion = "1.0.8"
     const val phoneNumberVersion = "1.0.2"
     const val dialogsVersion = "1.2.5"
-    const val cardInputViewVersion = "1.1.2"
+    const val cardInputViewVersion = "1.1.3"
     const val quantityPickerViewVersion = "1.2.4"
     const val timelineViewVersion = "1.0.0"
     const val touchDelegatorVersion = "1.0.0"

diff --git a/libraries/card-input-view/README.md b/libraries/card-input-view/README.md
@@ -43,6 +43,8 @@ To validate inputs, call `CardInputView.validate()`. If you want to get created
 
 To reset all inputs, call `CardInputView.reset()`.
 
+To clear all inputs' errors, call `CardInputView.clearErrors()`.
+
 To focus and show soft keyboard on card number field call `CardInputView.focusToCardNumberField()`, to focus CVV field call `CardInputView.focusToCvvField()`.
 
 For expire month and year selection, you need to open custom dialog or input field, we suggest you to use **Dialogs**, to more information about **Dialogs**, [click here](https://github.com/Trendyol/android-ui-components/tree/master/libraries/dialogs).

diff --git a/libraries/card-input-view/src/main/java/com/trendyol/cardinputview/CardInputView.kt b/libraries/card-input-view/src/main/java/com/trendyol/cardinputview/CardInputView.kt
@@ -79,7 +79,8 @@ class CardInputView : ConstraintLayout {
             cardNumberValid = isCardNumberValid,
             expiryMonthValid = isExpiryMonthValid,
             expiryYearValid = isExpiryYearValid,
-            cvvValid = isCvvValid
+            cvvValid = isCvvValid,
+            shouldShowErrors = true
         )
         binding.executePendingBindings()
 
@@ -108,6 +109,16 @@ class CardInputView : ConstraintLayout {
         binding.executePendingBindings()
     }
 
+    /**
+     *
+     * Clears all input fields' error states
+     * it will immediately sets all fields backgrounds with [CardInputViewState.inputBackgroundDrawable].
+     */
+    fun clearErrors() {
+        binding.viewState = binding.viewState?.copy(shouldShowErrors = false)
+        binding.executePendingBindings()
+    }
+
     /**
      *
      * Card number field will be focused and keyboard will open.

diff --git a/libraries/card-input-view/src/main/java/com/trendyol/cardinputview/CardInputViewState.kt b/libraries/card-input-view/src/main/java/com/trendyol/cardinputview/CardInputViewState.kt
@@ -24,6 +24,7 @@ data class CardInputViewState(
     private val expiryMonthValid: Boolean = true,
     private val expiryYearValid: Boolean = true,
     private val cvvValid: Boolean = true,
+    private val shouldShowErrors: Boolean = true,
     var cardInformation: CardInformation = CardInformation()
 ) {
 
@@ -52,25 +53,25 @@ data class CardInputViewState(
     val dividerVisibility: Int = if (cardBankLogoDrawable != null) View.VISIBLE else View.GONE
     val cvvInfoButtonVisibility: Int = if (showCvvInfoButton) View.VISIBLE else View.GONE
     val cardNumberBackground: Drawable? =
-        if (cardNumberValid) {
+        if (!shouldShowErrors || cardNumberValid) {
             inputBackgroundDrawable
         } else {
             inputErrorBackgroundDrawable
         }?.constantState?.newDrawable()
     val expiryMonthBackground: Drawable? =
-        if (expiryMonthValid) {
+        if (!shouldShowErrors || expiryMonthValid) {
             inputBackgroundDrawable
         } else {
             inputErrorBackgroundDrawable
         }?.constantState?.newDrawable()
     val expiryYearBackground: Drawable? =
-        if (expiryYearValid) {
+        if (!shouldShowErrors || expiryYearValid) {
             inputBackgroundDrawable
         } else {
             inputErrorBackgroundDrawable
         }?.constantState?.newDrawable()
     val cvvBackground: Drawable? =
-        if (cvvValid) {
+        if (!shouldShowErrors || cvvValid) {
             inputBackgroundDrawable
         } else {
             inputErrorBackgroundDrawable
@@ -83,6 +84,7 @@ data class CardInputViewState(
         cardNumberValid = true,
         expiryMonthValid = true,
         expiryYearValid = true,
-        cvvValid = true
+        cvvValid = true,
+        shouldShowErrors = true
     )
 }
diff --git a/sample/src/main/java/com/trendyol/uicomponents/CardInputViewActivity.kt b/sample/src/main/java/com/trendyol/uicomponents/CardInputViewActivity.kt
@@ -22,6 +22,7 @@ class CardInputViewActivity : AppCompatActivity() {
     private val buttonValidate by lazy { findViewById<Button>(R.id.button_validate) }
     private val buttonValidateAndGet by lazy { findViewById<Button>(R.id.button_validate_and_get) }
     private val buttonReset by lazy { findViewById<Button>(R.id.button_reset) }
+    private val buttonClearErrors by lazy { findViewById<Button>(R.id.button_clear_errors) }
 
     private val months =
         listOf("01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12")
@@ -81,6 +82,7 @@ class CardInputViewActivity : AppCompatActivity() {
             if (result != null) showCardInformationDialog(result)
         }
         buttonReset.setOnClickListener { cardInputView.reset() }
+        buttonClearErrors.setOnClickListener { cardInputView.clearErrors() }
     }
 
     private fun showCardInformationDialog(cardInformation: CardInformation) {

diff --git a/sample/src/main/res/layout/activity_card_input.xml b/sample/src/main/res/layout/activity_card_input.xml
@@ -78,6 +78,15 @@
         android:layout_marginTop="8dp"
         android:text="Validate and Get Card Information" />
 
+    <com.google.android.material.button.MaterialButton
+        android:id="@+id/button_clear_errors"
+        style="@style/Sample.ButtonStyle"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_gravity="center_horizontal"
+        android:layout_marginTop="8dp"
+        android:text="Clear errors" />
+
     <com.google.android.material.button.MaterialButton
         android:id="@+id/button_reset"
         style="@style/Sample.ButtonStyle"