Add cancel button to CardReaderDetail reconnecting state

Author: kidinov

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/payments/cardreader/detail/CardReaderDetailFragment.kt

@@ -189,13 +189,14 @@ class CardReaderDetailFragment : BaseFragment(R.layout.fragment_card_reader_deta
                             cardReaderDetailIllustration,
                             state.illustration
                         )
-                        UiHelpers.setTextOrHide(cardReaderDetailFirstHintLabel, state.firstHintLabel)
+                        cardReaderDetailFirstHintLabel.visibility = View.GONE
                         cardReaderDetailFirstHintNumberLabel.visibility = View.GONE
                         cardReaderDetailSecondHintLabel.visibility = View.GONE
                         cardReaderDetailSecondHintNumberLabel.visibility = View.GONE
                         cardReaderDetailThirdHintLabel.visibility = View.GONE
                         cardReaderDetailThirdHintNumberLabel.visibility = View.GONE
-                        cardReaderDetailConnectBtn.visibility = View.GONE
+                        UiHelpers.setTextOrHide(cardReaderDetailConnectBtn, state.cancelBtnLabel)
+                        cardReaderDetailConnectBtn.setOnClickListener { state.onCancelClicked.invoke() }
                         with(cardReaderDetailLearnMoreTv.root) {
                             movementMethod = LinkMovementMethod.getInstance()
                             UiHelpers.setTextOrHide(this, state.learnMoreLabel)

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/payments/cardreader/detail/CardReaderDetailViewModel.kt

@@ -139,7 +139,14 @@ class CardReaderDetailViewModel @Inject constructor(
     }
 
     private fun handleReconnectingState() {
-        viewState.value = ViewState.ReconnectingState(onLearnMoreClicked = ::onLearnMoreClicked)
+        viewState.value = ViewState.ReconnectingState(
+            onCancelClicked = ::onCancelReconnectionClicked,
+            onLearnMoreClicked = ::onLearnMoreClicked
+        )
+    }
+
+    private fun onCancelReconnectionClicked() {
+        cardReaderManager.cancelReconnection()
     }
 
     private fun cancelConnectedScopeJobs() {
@@ -317,13 +324,14 @@ class CardReaderDetailViewModel @Inject constructor(
         object Loading : ViewState()
 
         data class ReconnectingState(
+            val onCancelClicked: (() -> Unit),
             val onLearnMoreClicked: (() -> Unit),
         ) : ViewState() {
             val headerLabel = UiStringRes(R.string.card_reader_detail_reconnecting_header)
 
             @DrawableRes
             val illustration = R.drawable.img_card_reader_not_connected
-            val firstHintLabel = UiStringRes(R.string.card_reader_detail_reconnecting_hint)
+            val cancelBtnLabel = UiStringRes(R.string.card_reader_detail_reconnecting_cancel)
             val learnMoreLabel = UiStringRes(R.string.card_reader_detail_learn_more, containsHtml = true)
         }
     }

WooCommerce/src/main/res/values/strings.xml

@@ -1635,7 +1635,7 @@
     -->
     <string name="card_reader_detail_not_connected_header">Connect your card reader</string>
     <string name="card_reader_detail_reconnecting_header">Reconnecting to card reader…</string>
-    <string name="card_reader_detail_reconnecting_hint">Please wait while we attempt to reconnect</string>
+    <string name="card_reader_detail_reconnecting_cancel">Cancel reconnection</string>
     <string name="card_reader_detail_learn_more">&lt;a href=\'\'&gt;Learn more&lt;/a&gt; about accepting mobile payments and ordering card readers</string>
     <string name="card_reader_detail_not_connected_first_hint_label">Make sure card reader is charged</string>
     <string name="card_reader_detail_not_connected_second_hint_label">Turn card reader on and place it next to mobile device</string>