Merge pull request #6908 from woocommerce/issue/6904-add-tertiary-cancel-button-to-card-reader-found-modal

[Mobile Payments] Add a Cancel button to the Card Reader Found modal

Author: toupper

WooCommerce/Classes/Extensions/UIButton+Helpers.swift

@@ -134,6 +134,15 @@ extension UIButton {
         tintColor = .accent
     }
 
+    /// By default UIButton adds an animation when changing the title. Use this method to avoid that
+    /// 
+    func setTitleWithoutAnimation(_ title: String?, for state: UIControl.State) {
+        UIView.performWithoutAnimation {
+            setTitle(title, for: .normal)
+            layoutIfNeeded()
+        }
+    }
+
     /// Supports title of multiple lines, either from longer text than allocated width or text with line breaks.
     private func enableMultipleLines() {
         titleLabel?.lineBreakMode = .byWordWrapping

WooCommerce/Classes/ViewModels/CardPresentPayments/CardPresentModalFoundReader.swift

@@ -9,8 +9,11 @@ final class CardPresentModalFoundReader: CardPresentPaymentsModalViewModel {
     /// Called when keep searching button is tapped
     private let continueSearchAction: () -> Void
 
+    /// Called when the cancel button is tapped
+    private let cancelAction: () -> Void
+
     let textMode: PaymentsModalTextMode = .noBottomInfo
-    let actionsMode: PaymentsModalActionsMode = .twoAction
+    let actionsMode: PaymentsModalActionsMode = .twoActionAndAuxiliary
 
     var topTitle: String
 
@@ -22,7 +25,7 @@ final class CardPresentModalFoundReader: CardPresentPaymentsModalViewModel {
 
     let secondaryButtonTitle: String? = Localization.continueSearching
 
-    let auxiliaryButtonTitle: String? = nil
+    let auxiliaryButtonTitle: String? = Localization.cancel
 
     let bottomTitle: String? = nil
 
@@ -32,10 +35,11 @@ final class CardPresentModalFoundReader: CardPresentPaymentsModalViewModel {
         return Localization.connect
     }
 
-    init(name: String, connect: @escaping () -> Void, continueSearch: @escaping () -> Void) {
+    init(name: String, connect: @escaping () -> Void, continueSearch: @escaping () -> Void, cancel: @escaping () -> Void) {
         self.topTitle = String.localizedStringWithFormat(Localization.title, name)
         self.connectAction = connect
         self.continueSearchAction = continueSearch
+        self.cancelAction = cancel
     }
 
     func didTapPrimaryButton(in viewController: UIViewController?) {
@@ -46,7 +50,9 @@ final class CardPresentModalFoundReader: CardPresentPaymentsModalViewModel {
         continueSearchAction()
     }
 
-    func didTapAuxiliaryButton(in viewController: UIViewController?) {}
+    func didTapAuxiliaryButton(in viewController: UIViewController?) {
+        cancelAction()
+    }
 }
 
 private extension CardPresentModalFoundReader {
@@ -65,5 +71,10 @@ private extension CardPresentModalFoundReader {
             "Keep Searching",
             comment: "Label for a button that when tapped, continues searching for card readers"
         )
+
+        static let cancel = NSLocalizedString(
+            "Cancel",
+            comment: "Label for a button that when tapped, cancels the process of connecting to a card reader "
+        )
     }
 }

WooCommerce/Classes/ViewRelated/CardPresentPayments/CardPresentPaymentsModalViewController.swift

@@ -279,8 +279,8 @@ private extension CardPresentPaymentsModalViewController {
             return
         }
 
+        auxiliaryButton.setTitleWithoutAnimation(viewModel.auxiliaryButtonTitle, for: .normal)
         auxiliaryButton.isHidden = false
-        auxiliaryButton.setTitle(viewModel.auxiliaryButtonTitle, for: .normal)
     }
 
     func configureSpacer() {

WooCommerce/Classes/ViewRelated/Dashboard/Settings/CardReadersV2/CardReaderSettingsAlerts.swift

@@ -58,7 +58,8 @@ final class CardReaderSettingsAlerts: CardReaderSettingsAlertsProvider {
         setViewModelAndPresent(from: from,
                                viewModel: foundReader(name: name,
                                                       connect: connect,
-                                                      continueSearch: continueSearch
+                                                      continueSearch: continueSearch,
+                                                      cancel: { from.dismiss(animated: true) }
                                )
         )
     }
@@ -208,8 +209,10 @@ private extension CardReaderSettingsAlerts {
         }
     }
 
-    func foundReader(name: String, connect: @escaping () -> Void, continueSearch: @escaping () -> Void) -> CardPresentPaymentsModalViewModel {
-        CardPresentModalFoundReader(name: name, connect: connect, continueSearch: continueSearch)
+    func foundReader(name: String, connect: @escaping () -> Void,
+                     continueSearch: @escaping () -> Void,
+                     cancel: @escaping () -> Void) -> CardPresentPaymentsModalViewModel {
+        CardPresentModalFoundReader(name: name, connect: connect, continueSearch: continueSearch, cancel: cancel)
     }
 
     func setViewModelAndPresent(from: UIViewController, viewModel: CardPresentPaymentsModalViewModel) {

WooCommerce/WooCommerceTests/ViewModels/CardPresentPayments/CardPresentModalFoundReaderTests.swift

@@ -8,7 +8,10 @@ final class CardPresentModalFoundReaderTests: XCTestCase {
     override func setUp() {
         super.setUp()
         closures = Closures()
-        viewModel = CardPresentModalFoundReader(name: Expectations.name, connect: closures.primaryAction(), continueSearch: closures.secondaryAction())
+        viewModel = CardPresentModalFoundReader(name: Expectations.name,
+                                                connect: closures.primaryAction(),
+                                                continueSearch: closures.secondaryAction(),
+                                                cancel: closures.auxiliaryAction())
     }
 
     override func tearDown() {
@@ -36,8 +39,8 @@ final class CardPresentModalFoundReaderTests: XCTestCase {
         XCTAssertNotNil(viewModel.secondaryButtonTitle)
     }
 
-    func test_auxiliary_button_title_is_nil() {
-        XCTAssertNil(viewModel.auxiliaryButtonTitle)
+    func test_auxiliary_button_title_is_not_nil() {
+        XCTAssertNotNil(viewModel.auxiliaryButtonTitle)
     }
 
     func test_bottom_title_is_nil() {
@@ -59,6 +62,12 @@ final class CardPresentModalFoundReaderTests: XCTestCase {
 
         XCTAssertTrue(closures.didTapContinue)
     }
+
+    func test_auxiliary_button_action_calls_closure() {
+        viewModel.didTapAuxiliaryButton(in: nil)
+
+        XCTAssertTrue(closures.didTapCancel)
+    }
 }
 
 
@@ -74,6 +83,7 @@ private extension CardPresentModalFoundReaderTests {
 private final class Closures {
     var didTapConnect = false
     var didTapContinue = false
+    var didTapCancel = false
 
     func primaryAction() -> () -> Void {
         return {[weak self] in
@@ -86,4 +96,10 @@ private final class Closures {
             self?.didTapContinue = true
         }
     }
+
+    func auxiliaryAction() -> () -> Void {
+        return {[weak self] in
+            self?.didTapCancel = true
+        }
+    }
 }