Merge pull request #4985 from woocommerce/issue/4984-disconnect-button

[Mobile Payments] Disable disconnect button and show spinner while disconnecting from reader

Author: allendav

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

@@ -213,6 +213,12 @@ private extension CardReaderSettingsConnectedViewController {
         cell.configure(style: .primary, title: Localization.updateButtonTitle, bottomSpacing: 0) {
             self.viewModel?.startCardReaderUpdate()
         }
+
+        let readerDisconnectInProgress = viewModel?.readerDisconnectInProgress ?? false
+        let readerUpdateInProgress = viewModel?.readerUpdateInProgress ?? false
+        cell.enableButton(!readerDisconnectInProgress && !readerUpdateInProgress)
+        cell.showActivityIndicator(readerUpdateInProgress)
+
         cell.selectionStyle = .none
         cell.backgroundColor = .clear
     }
@@ -222,6 +228,12 @@ private extension CardReaderSettingsConnectedViewController {
         cell.configure(style: style, title: Localization.disconnectButtonTitle) { [weak self] in
             self?.viewModel?.disconnectReader()
         }
+
+        let readerDisconnectInProgress = viewModel?.readerDisconnectInProgress ?? false
+        let readerUpdateInProgress = viewModel?.readerUpdateInProgress ?? false
+        cell.enableButton(!readerDisconnectInProgress && !readerUpdateInProgress)
+        cell.showActivityIndicator(readerDisconnectInProgress)
+
         cell.selectionStyle = .none
         cell.backgroundColor = .clear
     }

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

@@ -14,6 +14,8 @@ final class CardReaderSettingsConnectedViewModel: CardReaderSettingsPresentedVie
     private(set) var readerUpdateInProgress: Bool = false
     private(set) var readerUpdateCompletedSuccessfully: Bool = false
 
+    private(set) var readerDisconnectInProgress: Bool = false
+
     var connectedReaderID: String?
     var connectedReaderBatteryLevel: String?
 
@@ -66,6 +68,9 @@ final class CardReaderSettingsConnectedViewModel: CardReaderSettingsPresentedVie
             guard let self = self else {
                 return
             }
+            guard !self.readerDisconnectInProgress else {
+                return
+            }
             switch result {
             case .success(let update):
                 self.readerUpdateAvailable = update != nil ? .isTrue : .isFalse
@@ -112,11 +117,17 @@ final class CardReaderSettingsConnectedViewModel: CardReaderSettingsPresentedVie
     func disconnectReader() {
         ServiceLocator.analytics.track(.cardReaderDisconnectTapped)
 
+        self.readerDisconnectInProgress = true
+        self.didUpdate?()
+
         if connectedReaderID != nil {
             knownReadersProvider?.forgetCardReader(cardReaderID: connectedReaderID!)
         }
 
         let action = CardPresentPaymentAction.disconnect() { result in
+            self.readerDisconnectInProgress = false
+            self.didUpdate?()
+
             guard result.isSuccess else {
                 DDLogError("Unexpected error when disconnecting reader")
                 return

WooCommerce/Classes/ViewRelated/Orders/Order Details/Shipping Labels/Create Shipping Label Form/Cells/ShippingLabelFormStepTableViewCell.xib

@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="17506" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="18122" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
     <device id="retina6_1" orientation="portrait" appearance="light"/>
     <dependencies>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17505"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="18093"/>
         <capability name="Safe area layout guides" minToolsVersion="9.0"/>
         <capability name="System colors in document resources" minToolsVersion="11.0"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>

WooCommerce/Classes/ViewRelated/ReusableViews/ButtonTableViewCell.swift

@@ -3,7 +3,7 @@ import UIKit
 /// Displays a button inside a `UITableViewCell`.
 ///
 final class ButtonTableViewCell: UITableViewCell {
-    @IBOutlet private var button: UIButton!
+    @IBOutlet private var button: ButtonActivityIndicator!
     @IBOutlet private weak var topConstraint: NSLayoutConstraint!
     @IBOutlet private weak var bottomConstraint: NSLayoutConstraint!
 
@@ -49,6 +49,14 @@ final class ButtonTableViewCell: UITableViewCell {
     func enableButton(_ enabled: Bool) {
         button.isEnabled = enabled
     }
+
+    func showActivityIndicator(_ show: Bool) {
+        guard show else {
+            button.hideActivityIndicator()
+            return
+        }
+        button.showActivityIndicator()
+    }
 }
 
 private extension ButtonTableViewCell {

WooCommerce/Classes/ViewRelated/ReusableViews/ButtonTableViewCell.xib

@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="17506" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="18122" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
     <device id="retina4_7" orientation="portrait" appearance="light"/>
     <dependencies>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17505"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="18093"/>
         <capability name="Safe area layout guides" minToolsVersion="9.0"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
@@ -16,7 +16,7 @@
                 <rect key="frame" x="0.0" y="0.0" width="331" height="75"/>
                 <autoresizingMask key="autoresizingMask"/>
                 <subviews>
-                    <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="Rng-8C-l5l">
+                    <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="Rng-8C-l5l" customClass="ButtonActivityIndicator" customModule="WooCommerce" customModuleProvider="target">
                         <rect key="frame" x="16" y="20" width="299" height="35"/>
                         <state key="normal" title="Button"/>
                         <connections>