Offline banners for views with cached data

RELEASE-NOTES.txt

@@ -2,6 +2,7 @@
 
 7.7
 -----
+- [*] Show banner on screens that use cached data when device is offline. [https://github.com/woocommerce/woocommerce-ios/pull/5000]
 
 
 7.6
@@ -10,7 +11,6 @@
 - [***] Shipping Labels: Merchants can now add new custom and service packages for shipping labels directly from the app. [https://github.com/woocommerce/woocommerce-ios/pull/4976]
 - [*] Fix: when product image upload fails, the image cell stop loading. [https://github.com/woocommerce/woocommerce-ios/pull/4989]
 
-
 7.5
 -----
 - [***] Merchants can now purchase shipping labels and declare customs forms for international orders. [https://github.com/woocommerce/woocommerce-ios/pull/4896]

WooCommerce/Classes/Extensions/UIImage+Woo.swift

@@ -384,6 +384,12 @@ extension UIImage {
         return UIImage.gridicon(.menu)
     }
 
+    /// Lightning icon on offline banner
+    ///
+    static var lightningImage: UIImage {
+        return UIImage.gridicon(.offline).imageFlippedForRightToLeftLayoutDirection()
+    }
+
     /// Invisible Image
     ///
     static var invisibleImage: UIImage {

WooCommerce/Classes/Extensions/UIViewController+Connectivity.swift

@@ -0,0 +1,12 @@
+import UIKit
+import Combine
+
+extension UIViewController {
+    /// Defines if the view controller should show a "no connection" banner when offline.
+    /// This requires the view controller to be contained inside a `WooNavigationController`.
+    /// Defaults to `false`.
+    ///
+    @objc var shouldShowOfflineBanner: Bool {
+        false
+    }
+}

WooCommerce/Classes/System/WooNavigationController.swift

@@ -1,3 +1,4 @@
+import Combine
 import UIKit
 
 /// Subclass to set Woo styling. Removes back button text on managed view controllers.
@@ -38,13 +39,25 @@ class WooNavigationController: UINavigationController {
 ///
 private class WooNavigationControllerDelegate: NSObject, UINavigationControllerDelegate {
 
+    private let connectivityObserver: ConnectivityObserver
+    private var currentController: UIViewController?
+    private var subscriptions: Set<AnyCancellable> = []
+
+    init(connectivityObserver: ConnectivityObserver = ServiceLocator.connectivityObserver) {
+        self.connectivityObserver = connectivityObserver
+        super.init()
+        observeConnectivity()
+    }
+
     /// Children delegate, all events will be forwarded to this object
     ///
     weak var forwardDelegate: UINavigationControllerDelegate?
 
     /// Configures the back button for the managed `ViewController` and forwards the event to the children delegate.
     ///
     func navigationController(_ navigationController: UINavigationController, willShow viewController: UIViewController, animated: Bool) {
+        currentController = viewController
+        configureOfflineBanner(for: viewController)
         configureBackButton(for: viewController)
         forwardDelegate?.navigationController?(navigationController, willShow: viewController, animated: animated)
     }
@@ -76,3 +89,69 @@ private extension WooNavigationControllerDelegate {
         viewController.removeNavigationBackBarButtonText()
     }
 }
+
+// MARK: Offline banner configuration
+private extension WooNavigationControllerDelegate {
+
+    /// Observes changes in status of connectivity and updates the offline banner in current view controller accordingly.
+    ///
+    func observeConnectivity() {
+        connectivityObserver.statusPublisher
+            .sink { [weak self] status in
+                guard let self = self, let currentController = self.currentController else { return }
+                self.configureOfflineBanner(for: currentController, status: status)
+            }
+            .store(in: &subscriptions)
+    }
+
+    /// Shows or hides offline banner based on the input connectivity status and
+    /// whether the view controller supports showing the banner.
+    ///
+    func configureOfflineBanner(for viewController: UIViewController, status: ConnectivityStatus? = nil) {
+        if viewController.shouldShowOfflineBanner {
+            setOfflineBannerWhenNoConnection(for: viewController, status: status ?? connectivityObserver.currentStatus)
+        } else {
+            removeOfflineBanner(for: viewController)
+        }
+    }
+
+    /// Adds offline banner at the bottom of the view controller.
+    ///
+    func setOfflineBannerWhenNoConnection(for viewController: UIViewController, status: ConnectivityStatus) {
+        // We can only show it when we are sure we can't reach the internet
+        guard status == .notReachable else {
+            return removeOfflineBanner(for: viewController)
+        }
+
+        // Only add banner view if it's not already added.
+        guard let navigationController = viewController.navigationController,
+              let view = viewController.view,
+              view.subviews.first(where: { $0 is OfflineBannerView }) == nil else {
+            return
+        }
+
+        let offlineBannerView = OfflineBannerView(frame: .zero)
+        offlineBannerView.backgroundColor = .gray
+        offlineBannerView.translatesAutoresizingMaskIntoConstraints = false
+        view.addSubview(offlineBannerView)
+
+        let extraBottomSpace = viewController.hidesBottomBarWhenPushed ? navigationController.view.safeAreaInsets.bottom : 0
+        NSLayoutConstraint.activate([
+            offlineBannerView.heightAnchor.constraint(equalToConstant: OfflineBannerView.height),
+            offlineBannerView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
+            offlineBannerView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
+            offlineBannerView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -extraBottomSpace)
+        ])
+        viewController.additionalSafeAreaInsets = UIEdgeInsets(top: 0, left: 0, bottom: OfflineBannerView.height, right: 0)
+    }
+
+    /// Removes the offline banner from the view controller if it exists.
+    ///
+    func removeOfflineBanner(for viewController: UIViewController) {
+        guard let offlineBanner = viewController.view.subviews.first(where: { $0 is OfflineBannerView }) else {
+            return
+        }
+        offlineBanner.removeFromSuperview()
+        viewController.additionalSafeAreaInsets = .zero
+    }
+}

WooCommerce/Classes/Tools/Connectivity/ConnectivityObserver.swift

@@ -1,17 +1,17 @@
-import Foundation
+import Combine
 
 /// Interface for the observing connectivity
 ///
 protocol ConnectivityObserver {
     /// Getter for current state of the connectivity.
-    var isConnectivityAvailable: Bool { get }
+    var currentStatus: ConnectivityStatus { get }
+
+    /// Publisher for connectivity availability.
+    var statusPublisher: AnyPublisher<ConnectivityStatus, Never> { get }
 
     /// Starts the observer.
     func startObserving()
 
-    /// Updates the listener for the connectivity observer.
-    func updateListener(_ listener: @escaping (ConnectivityStatus) -> Void)
-
     /// Stops the observer.
     func stopObserving()
 }

WooCommerce/Classes/Tools/Connectivity/DefaultConnectivityObserver.swift

@@ -1,4 +1,4 @@
-import Foundation
+import Combine
 import Network
 
 final class DefaultConnectivityObserver: ConnectivityObserver {
@@ -8,32 +8,27 @@ final class DefaultConnectivityObserver: ConnectivityObserver {
     private let networkMonitor: NetworkMonitoring
     private let observingQueue: DispatchQueue = .global(qos: .background)
 
-    var isConnectivityAvailable: Bool {
-        if case .reachable = connectivityStatus(from: networkMonitor.currentNetwork) {
-            return true
-        }
-        return false
+    @Published private(set) var currentStatus: ConnectivityStatus = .unknown
+
+    var statusPublisher: AnyPublisher<ConnectivityStatus, Never> {
+        $currentStatus.eraseToAnyPublisher()
     }
 
     init(networkMonitor: NetworkMonitoring = NWPathMonitor()) {
         self.networkMonitor = networkMonitor
         startObserving()
-    }
-
-    func startObserving() {
-        networkMonitor.start(queue: observingQueue)
-    }
-
-    func updateListener(_ listener: @escaping (ConnectivityStatus) -> Void) {
         networkMonitor.networkUpdateHandler = { [weak self] path in
             guard let self = self else { return }
-            let connectivityStatus = self.connectivityStatus(from: path)
             DispatchQueue.main.async {
-                listener(connectivityStatus)
+                self.currentStatus = self.connectivityStatus(from: path)
             }
         }
     }
 
+    func startObserving() {
+        networkMonitor.start(queue: observingQueue)
+    }
+
     func stopObserving() {
         networkMonitor.cancel()
     }
@@ -65,8 +60,6 @@ final class DefaultConnectivityObserver: ConnectivityObserver {
 
 /// Proxy protocol for mocking `NWPathMonitor`.
 protocol NetworkMonitoring: AnyObject {
-    var currentNetwork: NetworkMonitorable { get }
-
     /// A handler that receives network updates.
     var networkUpdateHandler: ((NetworkMonitorable) -> Void)? { get set }
 
@@ -88,10 +81,6 @@ protocol NetworkMonitorable {
 
 extension NWPath: NetworkMonitorable {}
 extension NWPathMonitor: NetworkMonitoring {
-    var currentNetwork: NetworkMonitorable {
-        currentPath
-    }
-
     var networkUpdateHandler: ((NetworkMonitorable) -> Void)? {
         get {
             let closure: ((NetworkMonitorable) -> Void)? = {

WooCommerce/Classes/ViewRelated/Dashboard/DashboardViewController.swift

@@ -119,6 +119,10 @@ final class DashboardViewController: UIViewController {
         super.viewDidLayoutSubviews()
         dashboardUI?.view.frame = containerView.bounds
     }
+
+    override var shouldShowOfflineBanner: Bool {
+        return true
+    }
 }
 
 // MARK: - Configuration

WooCommerce/Classes/ViewRelated/Orders/Order Details/OrderDetailsViewController.swift

@@ -122,6 +122,10 @@ final class OrderDetailsViewController: UIViewController {
         super.viewDidLayoutSubviews()
         tableView.updateHeaderHeight()
     }
+
+    override var shouldShowOfflineBanner: Bool {
+        return true
+    }
 }
 
 

WooCommerce/Classes/ViewRelated/Orders/Order Details/Review Order/ReviewOrderViewController.swift

@@ -64,11 +64,16 @@ final class ReviewOrderViewController: UIViewController {
         super.viewDidLayoutSubviews()
         tableView.updateFooterHeight()
     }
+
+    override var shouldShowOfflineBanner: Bool {
+        return true
+    }
 }
 
 // MARK: - UI Configuration
 //
 private extension ReviewOrderViewController {
+
     func configureViewModel() {
         viewModel.configureResultsControllers { [weak self] in
             self?.tableView.reloadData()

WooCommerce/Classes/ViewRelated/Orders/Order Details/Shipping Labels/Create Shipping Label Form/ShippingLabelFormViewController.swift

@@ -44,6 +44,10 @@ final class ShippingLabelFormViewController: UIViewController {
         registerTableViewHeaderFooters()
         observeViewModel()
     }
+
+    override var shouldShowOfflineBanner: Bool {
+        return true
+    }
 }
 
 // MARK: - View Configuration

WooCommerce/Classes/ViewRelated/Orders/OrdersRootViewController.swift

@@ -64,6 +64,10 @@ final class OrdersRootViewController: UIViewController {
     func presentDetails(for note: Note) {
         ordersViewController.presentDetails(for: note)
     }
+
+    override var shouldShowOfflineBanner: Bool {
+        return true
+    }
 }
 
 // MARK: - Configuration

WooCommerce/Classes/ViewRelated/Products/Edit Product/ProductFormViewController.swift

@@ -134,6 +134,10 @@ final class ProductFormViewController<ViewModel: ProductFormViewModelProtocol>:
         view.endEditing(true)
     }
 
+    override var shouldShowOfflineBanner: Bool {
+        return true
+    }
+
     // MARK: - Navigation actions handling
 
     override func shouldPopOnBackButton() -> Bool {
@@ -403,6 +407,7 @@ final class ProductFormViewController<ViewModel: ProductFormViewModelProtocol>:
 // MARK: - Configuration
 //
 private extension ProductFormViewController {
+
     func configureNavigationBar() {
         updateNavigationBar()
         updateBackButtonTitle()

WooCommerce/Classes/ViewRelated/Products/ProductsViewController.swift

@@ -201,6 +201,10 @@ final class ProductsViewController: UIViewController {
 
         updateTableHeaderViewHeight()
     }
+
+    override var shouldShowOfflineBanner: Bool {
+        return true
+    }
 }
 
 // MARK: - Navigation Bar Actions

WooCommerce/Classes/ViewRelated/ReusableViews/OfflineBannerView.swift

@@ -0,0 +1,52 @@
+import UIKit
+
+/// Gray banner showing message when device is offline.
+///
+final class OfflineBannerView: UIView {
+
+    static let height: CGFloat = 44
+
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        setupView()
+    }
+
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    private func setupView() {
+        let stackView = UIStackView()
+        stackView.axis = .horizontal
+        stackView.spacing = 3
+        stackView.distribution = .fillProportionally
+        stackView.alignment = .center
+        stackView.translatesAutoresizingMaskIntoConstraints = false
+
+        let imageView = UIImageView(image: .lightningImage)
+        imageView.tintColor = .white
+        imageView.contentMode = .scaleAspectFit
+        imageView.translatesAutoresizingMaskIntoConstraints = false
+        NSLayoutConstraint.activate([
+            imageView.widthAnchor.constraint(equalToConstant: 24),
+            imageView.heightAnchor.constraint(equalToConstant: 24)
+        ])
+
+        let messageLabel = UILabel()
+        messageLabel.text = NSLocalizedString("Offline - using cached data", comment: "Message for offline banner")
+        messageLabel.applyCalloutStyle()
+        messageLabel.textColor = .white
+        messageLabel.translatesAutoresizingMaskIntoConstraints = false
+
+        stackView.addArrangedSubview(imageView)
+        stackView.addArrangedSubview(messageLabel)
+
+        addSubview(stackView)
+        NSLayoutConstraint.activate([
+            stackView.safeLeadingAnchor.constraint(greaterThanOrEqualTo: safeLeadingAnchor, constant: 0),
+            stackView.safeBottomAnchor.constraint(greaterThanOrEqualTo: safeBottomAnchor, constant: 0),
+            stackView.centerXAnchor.constraint(equalTo: centerXAnchor),
+            stackView.centerYAnchor.constraint(equalTo: centerYAnchor)
+        ])
+    }
+}

WooCommerce/Classes/ViewRelated/Reviews/ReviewDetailsViewController.swift

@@ -1,4 +1,3 @@
-import Foundation
 import UIKit
 import Yosemite
 import Gridicons
@@ -77,6 +76,10 @@ final class ReviewDetailsViewController: UIViewController {
         super.viewWillAppear(animated)
         markAsReadIfNeeded(notification)
     }
+
+    override var shouldShowOfflineBanner: Bool {
+        return true
+    }
 }