Merge pull request #5913 from woocommerce/issue/5874-notification-badge-in-the-Hub-Menu-and-inside-the-hub-menu-cell-in-case-there-is-a-new-notification

Hub Menu: managed notification badge in the hub menu tab

Author: pmusolino

WooCommerce/Classes/ServiceLocator/PushNotesManager.swift

@@ -61,7 +61,7 @@ protocol PushNotesManager {
     ///
     func registerDeviceToken(with tokenData: Data, defaultStoreID: Int64)
 
-    /// Handles a Remote Push Notifican Payload. On completion the `completionHandler` will be executed.
+    /// Handles a Remote Push Notification Payload. On completion the `completionHandler` will be executed.
     ///
     func handleNotification(_ userInfo: [AnyHashable: Any],
                             onBadgeUpdateCompletion: @escaping () -> Void,

WooCommerce/Classes/ViewRelated/Hub Menu/HubMenu.swift

@@ -30,7 +30,12 @@ struct HubMenu: View {
 
                 LazyVGrid(columns: gridItemLayout, spacing: Constants.itemSpacing) {
                     ForEach(viewModel.menuElements, id: \.self) { menu in
-                        HubMenuElement(image: menu.icon, imageColor: menu.iconColor, text: menu.title, onTapGesture: {
+                        // Currently the badge is always zero, because we are not handling push notifications count
+                        // correctly due to the first behavior described here p91TBi-66O:
+                        // AppDelegate’s `application(_:didReceiveRemoteNotification:fetchCompletionHandler:)`
+                        // can be called twice for the same push notification when receiving it
+                        // and tapping on it to open the app. This means that some push notifications are incrementing the badge number by 2, and some by 1.
+                        HubMenuElement(image: menu.icon, imageColor: menu.iconColor, text: menu.title, badge: 0, onTapGesture: {
                             switch menu {
                             case .woocommerceAdmin:
                                 ServiceLocator.analytics.track(.hubMenuOptionTapped, withProperties: [Constants.option: "admin_menu"])

WooCommerce/Classes/ViewRelated/Hub Menu/HubMenuElement.swift

@@ -6,6 +6,7 @@ struct HubMenuElement: View {
     let image: UIImage
     let imageColor: UIColor
     let text: String
+    let badge: Int
     let onTapGesture: (() -> Void)
 
     @ScaledMetric var imageSize: CGFloat = 58
@@ -15,30 +16,56 @@ struct HubMenuElement: View {
         Button {
             onTapGesture()
         } label: {
-            VStack {
-                ZStack {
-                    Color(UIColor(light: .listBackground,
-                                  dark: .secondaryButtonBackground))
-                    Image(uiImage: image)
-                        .renderingMode(.template)
-                        .resizable()
-                        .scaledToFit()
-                        .foregroundColor(Color(imageColor))
-                        .frame(width: iconSize, height: iconSize)
+            ZStack(alignment: .topTrailing) {
+
+                VStack {
+                    ZStack {
+                        Color(UIColor(light: .listBackground,
+                                      dark: .secondaryButtonBackground))
+                        Image(uiImage: image)
+                            .renderingMode(.template)
+                            .resizable()
+                            .scaledToFit()
+                            .foregroundColor(Color(imageColor))
+                            .frame(width: iconSize, height: iconSize)
+                    }
+                    .frame(width: imageSize, height: imageSize, alignment: .center)
+                    .cornerRadius(imageSize/2)
+                    .padding(.bottom, Constants.paddingBetweenElements)
+                    Text(text)
+                        .bodyStyle()
                 }
-                .frame(width: imageSize, height: imageSize, alignment: .center)
-                .cornerRadius(imageSize/2)
-                .padding(.bottom, Constants.paddingBetweenElements)
-                Text(text)
+                .frame(width: Constants.itemSize, height: Constants.itemSize)
+                HubMenuBadge(value: badge)
+                    .padding([.top, .trailing], 8)
+                    .renderedIf(badge > 0)
+            }
+        }
+    }
+
+    private struct HubMenuBadge: View {
+        let value: Int
+
+        var body: some View {
+            ZStack (alignment: .center) {
+                Rectangle()
+                    .fill(.purple)
+                    .cornerRadius(Constants.cornerRadius)
+                Text(String(value))
+                    .foregroundColor(.white)
                     .bodyStyle()
+                    .padding([.leading, .trailing], Constants.paddingBetweenElements)
             }
-            .frame(width: Constants.itemSize, height: Constants.itemSize)
+            .frame(height: Constants.badgeSize)
+            .fixedSize()
         }
     }
 
     enum Constants {
         static let paddingBetweenElements: CGFloat = 8
         static let itemSize: CGFloat = 160
+        static let badgeSize: CGFloat = 24
+        static let cornerRadius: CGFloat = badgeSize/2
     }
 }
 
@@ -47,6 +74,7 @@ struct HubMenuElement_Previews: PreviewProvider {
         HubMenuElement(image: .starOutlineImage(),
                        imageColor: .blue,
                        text: "Menu",
+                       badge: 1,
                        onTapGesture: {})
             .previewLayout(.fixed(width: 160, height: 160))
             .previewDisplayName("Hub Menu Element")

WooCommerce/Classes/ViewRelated/MainTabBarController.swift

@@ -123,7 +123,7 @@ final class MainTabBarController: UITabBarController {
         configureTabViewControllers()
         observeSiteIDForViewControllers()
 
-        loadReviewsTabNotificationCountAndUpdateBadge()
+        loadHubMenuTabNotificationCountAndUpdateBadge()
     }
 
     override func viewWillAppear(_ animated: Bool) {
@@ -133,7 +133,7 @@ final class MainTabBarController: UITabBarController {
         /// We hook up KVO in this spot... because at the point in which `viewDidLoad` fires, we haven't really fully
         /// loaded the childViewControllers, and the tabBar isn't fully initialized.
         ///
-        startListeningToReviewsTabBadgeUpdates()
+        startListeningToHubMenuTabBadgeUpdates()
         startListeningToOrdersBadge()
     }
 
@@ -467,40 +467,43 @@ private extension MainTabBarController {
     }
 }
 
-// MARK: - Reviews Tab Badge Updates
+// MARK: - Hub Menu Tab Badge Updates
 //
 private extension MainTabBarController {
 
     /// Setup: KVO Hooks.
     ///
-    func startListeningToReviewsTabBadgeUpdates() {
+    func startListeningToHubMenuTabBadgeUpdates() {
         NotificationCenter.default.addObserver(self,
-                                               selector: #selector(loadReviewsTabNotificationCountAndUpdateBadge),
+                                               selector: #selector(loadHubMenuTabNotificationCountAndUpdateBadge),
                                                name: .reviewsBadgeReloadRequired,
                                                object: nil)
     }
 
-    @objc func loadReviewsTabNotificationCountAndUpdateBadge() {
+    @objc func loadHubMenuTabNotificationCountAndUpdateBadge() {
         guard let siteID = stores.sessionManager.defaultStoreID else {
             return
         }
 
         let action = NotificationCountAction.load(siteID: siteID, type: .kind(.comment)) { [weak self] count in
-            self?.updateReviewsTabBadge(count: count)
+            self?.updateHubMenuTabBadge(count: count)
         }
         stores.dispatch(action)
     }
 
-    /// Displays or Hides the Dot on the Reviews tab, depending on the notification count
+    /// Displays or Hides the Dot on the Hub Menu tab, depending on the notification count
     ///
-    func updateReviewsTabBadge(count: Int) {
-        //TODO-5509: handle reviews badge
-        guard !isHubMenuFeatureFlagOn else {
-            return
+    func updateHubMenuTabBadge(count: Int) {
+        if isHubMenuFeatureFlagOn {
+            let tab = WooTab.hubMenu
+            let tabIndex = tab.visibleIndex(isHubMenuFeatureFlagOn)
+            notificationsBadge.badgeCountWasUpdated(newValue: count, tab: tab, in: tabBar, tabIndex: tabIndex)
+        }
+        else {
+            let tab = WooTab.reviews
+            let tabIndex = tab.visibleIndex(isHubMenuFeatureFlagOn)
+            notificationsBadge.badgeCountWasUpdated(newValue: count, tab: tab, in: tabBar, tabIndex: tabIndex)
         }
-        let tab = WooTab.reviews
-        let tabIndex = tab.visibleIndex(isHubMenuFeatureFlagOn)
-        notificationsBadge.badgeCountWasUpdated(newValue: count, tab: tab, in: tabBar, tabIndex: tabIndex)
     }
 }
 

WooCommerce/Classes/ViewRelated/Reviews/ReviewDetailsViewController.swift

@@ -75,6 +75,7 @@ final class ReviewDetailsViewController: UIViewController {
     override func viewWillAppear(_ animated: Bool) {
         super.viewWillAppear(animated)
         markAsReadIfNeeded(notification)
+        resetApplicationBadge()
     }
 
     override var shouldShowOfflineBanner: Bool {
@@ -127,6 +128,12 @@ private extension ReviewDetailsViewController {
     func reloadRows() {
         rows = [.header, .content]
     }
+
+    /// Nukes the BadgeCount
+    ///
+    func resetApplicationBadge() {
+        ServiceLocator.pushNotesManager.resetBadgeCount(type: .comment)
+    }
 }