Merge pull request #4931 from woocommerce/issue/4333-integrate-srf-modal

[Mobile Payments] [Several Readers Found] Integrate choose-a-reader list modal

Author: allendav

WooCommerce/Classes/Extensions/Array+Helpers.swift

@@ -18,6 +18,11 @@ extension Array {
     var isNotEmpty: Bool {
         return !isEmpty
     }
+
+    /// A Bool indicating if the collection has at least two elements
+    var containsMoreThanOne: Bool {
+        return count > 1
+    }
 }
 
 

WooCommerce/Classes/ViewRelated/CardPresentPayments/CardReaderConnectionController.swift

@@ -23,10 +23,14 @@ final class CardReaderConnectionController {
         ///
         case searching
 
-        /// Found a card reader
+        /// Found one card reader
         ///
         case foundReader
 
+        /// Found two or more card readers
+        ///
+        case foundSeveralReaders
+
         /// Attempting to connect to a card reader. The completion passed to `searchAndConnect`
         /// will be called with a `success` `Bool` `True` result if successful, after which the view controller
         /// passed to `searchAndConnect` will be dereferenced and the state set to `idle`
@@ -77,6 +81,13 @@ final class CardReaderConnectionController {
     ///
     private var candidateReader: CardReader?
 
+    /// Since the number of readers can go greater than 1 and then back to 1, and we don't
+    /// want to keep changing the UI from the several-readers-found list to a single prompt
+    /// and back (as this would be visually quite annoying), this flag will tell us that we've
+    /// already switched to list format for this discovery flow, so that stay in list mode
+    /// even if the number of found readers drops to less than 2
+    private var showSeveralFoundReaders: Bool = false
+
     private var subscriptions = Set<AnyCancellable>()
 
     private var onCompletion: ((Result<Bool, Error>) -> Void)?
@@ -123,6 +134,8 @@ private extension CardReaderConnectionController {
             onSearching()
         case .foundReader:
             onFoundReader()
+        case .foundSeveralReaders:
+            onFoundSeveralReaders()
         case .cancel:
             onCancel()
         case .connectToReader:
@@ -134,17 +147,49 @@ private extension CardReaderConnectionController {
         }
     }
 
-    /// Updates the found readers list by removing any the user has asked
-    /// us to ignore (aka keep searching) during this discovery session
+    /// To avoid presenting the "Do you want to connect to reader XXXX" prompt
+    /// repeatedly for the same reader, keep track of readers the user has tapped
+    /// "Keep Searching" for.
+    ///
+    /// If we have switched to the list view, however, don't prune
     ///
     func pruneSkippedReaders() {
-        self.foundReaders = self.foundReaders.filter({!skippedReaderIDs.contains($0.id)})
+        guard !showSeveralFoundReaders else {
+            return
+        }
+        foundReaders = foundReaders.filter({!skippedReaderIDs.contains($0.id)})
     }
 
     /// Returns the list of found readers which are also known
     ///
     func getFoundKnownReaders() -> [CardReader] {
-        self.foundReaders.filter({knownReaderIDs.contains($0.id)})
+        foundReaders.filter({knownReaderIDs.contains($0.id)})
+    }
+
+    /// A helper to return an array of found reader IDs
+    ///
+    func getFoundReaderIDs() -> [String] {
+        foundReaders.compactMap({$0.id})
+    }
+
+    /// A helper to return a specific CardReader instance based on the reader ID
+    ///
+    func getFoundReaderByID(readerID: String) -> CardReader? {
+        foundReaders.first(where: {$0.id == readerID})
+    }
+
+    /// Updates the show multiple readers flag to indicate that, for this discovery flow,
+    /// we have already shown the multiple readers UI (so we don't switch back to the
+    /// single reader found UI for this particular discovery)
+    ///
+    func updateShowSeveralFoundReaders() {
+        guard ServiceLocator.featureFlagService.isFeatureFlagEnabled(.cardPresentSeveralReadersFound) else {
+            return
+        }
+
+        if foundReaders.containsMoreThanOne {
+            showSeveralFoundReaders = true
+        }
     }
 
     /// Initial state of the controller
@@ -161,6 +206,7 @@ private extension CardReaderConnectionController {
         ///
         skippedReaderIDs = []
         candidateReader = nil
+        showSeveralFoundReaders = false
 
         /// Fetch the list of known readers - i.e. readers we should automatically connect to when we see them
         ///
@@ -181,8 +227,10 @@ private extension CardReaderConnectionController {
     /// Begins the search for a card reader
     /// Does NOT open any modal
     /// Transitions state to `.searching`
-    /// Later, when a reader is found, state transitions to `.foundReader` if it is unknown,
-    /// or  to `.connectToReader` if it is known
+    /// Later, when a reader is found, state transitions to
+    /// `.foundReader` if one unknown reader is found,
+    /// `.foundMultipleReaders` if two or more readers are found,
+    /// or  to `.connectToReader` if one known reader is found
     ///
     func onBeginSearch() {
         self.state = .searching
@@ -193,16 +241,25 @@ private extension CardReaderConnectionController {
                     return
                 }
 
-                /// First, update our copy of the foundReaders and prune
-                /// skipped ones
+                /// Update our copy of the foundReaders, evaluate if we should switch to the list view,
+                /// and prune skipped ones
                 ///
                 self.foundReaders = cardReaders
+                self.updateShowSeveralFoundReaders()
                 self.pruneSkippedReaders()
 
-                /// This completion can be called repeatedly as more readers
-                /// become discovered. To avoid interrupting connecting to
-                /// a known reader, or interrupting the user prompt for a unknown
-                /// reader, ensure we are in the searching state first
+                /// Note: This completion will be called repeatedly as the list of readers
+                /// discovered changes, so some care around state must be taken here.
+                ///
+
+                /// If the found-several-readers view is already presenting, update its list of found readers
+                ///
+                if case .foundSeveralReaders = self.state {
+                    self.alerts.updateSeveralReadersList(readerIDs: self.getFoundReaderIDs())
+                }
+
+                /// To avoid interrupting connecting to a known reader, ensure we are
+                /// in the searching state before proceeding further
                 ///
                 guard case .searching = self.state else {
                     return
@@ -216,11 +273,19 @@ private extension CardReaderConnectionController {
                     return
                 }
 
+                /// If we have found multiple readers, advance to foundMultipleReaders
+                ///
+                if self.showSeveralFoundReaders {
+                    self.state = .foundSeveralReaders
+                    return
+                }
+
                 /// If we have a found (but unknown) reader, advance to foundReader
                 ///
                 if self.foundReaders.isNotEmpty {
                     self.candidateReader = self.foundReaders.first
                     self.state = .foundReader
+                    return
                 }
             },
             onError: { [weak self] error in
@@ -243,15 +308,36 @@ private extension CardReaderConnectionController {
             return
         }
 
-        /// In the case of multiple found readers, we may have another reader to show
-        /// to the user at this point, so don't open the searching modal, but go to
-        /// onFoundReader
+        /// If we enter this state and another reader was discovered while the
+        /// "Do you want to connect to" modal was being displayed and if that reader
+        /// is known and the merchant tapped keep searching on the first
+        /// (unknown) reader, auto-connect to that known reader
+        if self.getFoundKnownReaders().isNotEmpty {
+            self.candidateReader = self.getFoundKnownReaders().first
+            self.state = .connectToReader
+            return
+        }
+
+        /// If we already have found readers
+        /// display the list view if so enabled, or...
+        ///
+        if showSeveralFoundReaders {
+            self.state = .foundSeveralReaders
+            return
+        }
+
+        /// Display the single view and ask the merchant if they'd
+        /// like to connect to it
+        ///
         if foundReaders.isNotEmpty {
             self.candidateReader = foundReaders.first
             self.state = .foundReader
             return
         }
 
+        /// If all else fails, display the "scanning" modal and
+        /// stay in this state
+        ///
         alerts.scanningForReader(from: from, cancel: {
             self.state = .cancel
         })
@@ -283,6 +369,30 @@ private extension CardReaderConnectionController {
             })
     }
 
+    /// Several readers have been found
+    /// Opens a continually updating list modal for the user to pick one (or cancel the search)
+    ///
+    func onFoundSeveralReaders() {
+        guard let from = fromController else {
+            return
+        }
+
+        alerts.foundSeveralReaders(
+            from: from,
+            readerIDs: getFoundReaderIDs(),
+            connect: { [weak self] readerID in
+                guard let self = self else {
+                    return
+                }
+                self.candidateReader = self.getFoundReaderByID(readerID: readerID)
+                self.state = .connectToReader
+            },
+            cancelSearch: { [weak self] in
+                self?.state = .cancel
+            }
+        )
+    }
+
     /// End the search for a card reader
     ///
     func onCancel() {
@@ -296,10 +406,6 @@ private extension CardReaderConnectionController {
     /// Connect to the candidate card reader
     ///
     func onConnectToReader() {
-        /// We always work with the first reader in the foundReaders array
-        /// The array will have already had skipped (aka "keep searching") readers removed
-        /// by time we get here
-        ///
         guard let candidateReader = candidateReader else {
             return
         }

WooCommerce/Classes/ViewRelated/CardPresentPayments/SeveralReadersFoundViewController.swift

@@ -16,19 +16,13 @@ final class SeveralReadersFoundViewController: UIViewController, UITableViewDele
     private var sections = [Section]()
 
     private var readerIDs = [String]()
+    private var onConnect: ((String) -> Void)?
+    private var onCancel: (() -> Void)?
 
     init() {
         super.init(nibName: Self.nibName, bundle: nil)
 
         modalPresentationStyle = .overFullScreen
-
-        // TODO: Dummy data for now
-        self.readerIDs = [
-            "CHB204909005931",
-            "CHB204909005942",
-            "CHB204909005953",
-            "CHB204909005964",
-        ]
     }
 
     required init?(coder: NSCoder) {
@@ -62,9 +56,17 @@ final class SeveralReadersFoundViewController: UIViewController, UITableViewDele
         }
     }
 
-    // TODO - accept updates to the list of CardReaderIDs to present and reloadData
+    func configureController(readerIDs: [String], connect: @escaping ((String) -> Void), cancelSearch: @escaping (() -> Void)) {
+        self.readerIDs = readerIDs
+        onConnect = connect
+        onCancel = cancelSearch
+    }
 
-    // TODO - call completion with selected CardReaderID? (nil on cancel)
+    func updateReaderIDs(readerIDs: [String]) {
+        self.readerIDs = readerIDs
+        configureSections()
+        tableView?.reloadData()
+    }
 }
 
 // MARK: - View Configuration
@@ -77,6 +79,9 @@ private extension SeveralReadersFoundViewController {
     func configureNavigation() {
         headlineLabel.text = Localization.headline
         cancelButton.setTitle(Localization.cancel, for: .normal)
+        cancelButton.on(.touchUpInside) { [weak self] _ in
+            self?.didTapCancel()
+        }
     }
 
     /// Setup the sections in this table view
@@ -156,16 +161,21 @@ private extension SeveralReadersFoundViewController {
         guard let cell = cell as? LabelAndButtonTableViewCell else {
             return
         }
-        cell.label.text = readerID
-        cell.button.setTitle(Localization.connect, for: .normal)
+        cell.configure(
+            labelText: readerID,
+            buttonTitle: Localization.connect,
+            didTapButton: {
+                self.didTapConnect(readerID: readerID)
+            }
+        )
         cell.selectionStyle = .none
     }
 
     func configureScanningRow(cell: UITableViewCell) {
         guard let cell = cell as? ActivitySpinnerAndLabelTableViewCell else {
             return
         }
-        cell.label.text = Localization.scanningLabel
+        cell.configure(labelText: Localization.scanningLabel)
         cell.selectionStyle = .none
     }
 
@@ -184,6 +194,22 @@ private extension SeveralReadersFoundViewController {
     }
 }
 
+// MARK: - Actions
+//
+private extension SeveralReadersFoundViewController {
+    @objc func didTapConnect(readerID: String) {
+        self.dismiss(animated: true, completion: {
+            self.onConnect?(readerID)
+        })
+    }
+
+    @objc func didTapCancel() {
+        self.dismiss(animated: true, completion: {
+            self.onCancel?()
+        })
+    }
+}
+
 // MARK: - Convenience Methods
 //
 private extension SeveralReadersFoundViewController {