Merge pull request #18450 from wordpress-mobile/task/18387-qs-reader

Quick Start for Existing Users: Update Reader task

Author: momo-ozawa

RELEASE-NOTES.txt

@@ -3,6 +3,7 @@
 * [**] Self hosted sites are not restricted by video length during media uploads [https://github.com/wordpress-mobile/WordPress-iOS/pull/18414]
 * [*] [internal] My Site Dashboard: Made some changes to the code architecture of the dashboard. The majority of the changes are related to the posts cards. It should have no visible changes but could cause regressions. Please test it by creating/trashing drafts and scheduled posts and testing that they appear correctly on the dashboard. [#18405]
 * [*] Quick Start: Updated the Stats tour. The tour can now be accessed from either the dashboard or the menu tab. [#18413]
+* [*] Quick Start: Updated the Reader tour. The tour now highlights the Discover tab and guides users to follow topics via the Settings screen. [#18450]
 * [*] [internal] Quick Start: Refactored some code related to the tasks displayed in the Quick Start Card and the Quick Start modal. It should have no visible changes but could cause regressions. [#18395]
 
 19.7

WordPress/Classes/ViewRelated/Blog/Blog Details/BlogDetailsViewController.h

@@ -60,7 +60,7 @@ typedef NS_ENUM(NSInteger, QuickStartTourElement) {
     QuickStartTourElementSharing = 8,
     QuickStartTourElementConnections = 9,
     QuickStartTourElementReaderTab = 10,
-    QuickStartTourElementReaderSearch = 12,
+    QuickStartTourElementReaderDiscoverSettings = 12,
     QuickStartTourElementTourCompleted = 13,
     QuickStartTourElementCongratulations = 14,
     QuickStartTourElementSiteIcon = 15,

WordPress/Classes/ViewRelated/Blog/QuickStartTourGuide.swift

@@ -253,7 +253,7 @@ open class QuickStartTourGuide: NSObject {
         }
         if element != currentElement {
             let blogDetailEvents: [QuickStartTourElement] = [.blogDetailNavigation, .checklist, .themes, .viewSite, .sharing, .siteMenu]
-            let readerElements: [QuickStartTourElement] = [.readerTab, .readerSearch]
+            let readerElements: [QuickStartTourElement] = [.readerTab, .readerDiscoverSettings]
 
             if blogDetailEvents.contains(element) {
                 endCurrentTour()

WordPress/Classes/ViewRelated/Blog/QuickStartTours.swift

@@ -191,22 +191,32 @@ struct QuickStartPublishTour: QuickStartTour {
 struct QuickStartFollowTour: QuickStartTour {
     let key = "quick-start-follow-tour"
     let analyticsKey = "follow_site"
-    let title = NSLocalizedString("Follow other sites", comment: "Title of a Quick Start Tour")
-    let titleMarkedCompleted = NSLocalizedString("Completed: Follow other sites", comment: "The Quick Start Tour title after the user finished the step.")
-    let description = NSLocalizedString("Find sites that speak to you, and follow them to get updates when they publish.", comment: "Description of a Quick Start Tour")
+    let title = NSLocalizedString("Connect with other sites", comment: "Title of a Quick Start Tour")
+    let titleMarkedCompleted = NSLocalizedString("Completed: Connect with other sites", comment: "The Quick Start Tour title after the user finished the step.")
+    let description = NSLocalizedString("Discover and follow sites that inspire you.", comment: "Description of a Quick Start Tour")
     let icon = UIImage.gridicon(.readerFollow)
     let suggestionNoText = Strings.notNow
     let suggestionYesText = Strings.yesShowMe
     let possibleEntryPoints: Set<QuickStartTourEntryPoint> = [.blogDetails, .blogDashboard]
 
     var waypoints: [WayPoint] = {
-        let step1DescriptionBase = NSLocalizedString("Select %@ to continue", comment: "A step in a guided tour for quick start. %@ will be the name of the item to select.")
+        let step1DescriptionBase = NSLocalizedString("Select %@ to find other sites.", comment: "A step in a guided tour for quick start. %@ will be the name of the item to select.")
         let step1DescriptionTarget = NSLocalizedString("Reader", comment: "The menu item to select during a guided tour.")
         let step1: WayPoint = (element: .readerTab, description: step1DescriptionBase.highlighting(phrase: step1DescriptionTarget, icon: .gridicon(.reader)))
 
-        let step2DescriptionBase = NSLocalizedString("Select %@ to look for sites with similar interests", comment: "A step in a guided tour for quick start. %@ will be the name of the item to select.")
-        let step2DescriptionTarget = NSLocalizedString("Search", comment: "The menu item to select during a guided tour.")
-        let step2: WayPoint = (element: .readerSearch, description: step2DescriptionBase.highlighting(phrase: step2DescriptionTarget, icon: .gridicon(.search)))
+        let step2DiscoverDescriptionBase = NSLocalizedString("Use %@ to find sites and tags.", comment: "A step in a guided tour for quick start. %@ will be the name of the item to select.")
+        let step2DiscoverDescriptionTarget = NSLocalizedString("Discover", comment: "The menu item to select during a guided tour.")
+        let step2DiscoverDescription = step2DiscoverDescriptionBase.highlighting(phrase: step2DiscoverDescriptionTarget, icon: nil)
+
+        let step2SettingsDescriptionBase = NSLocalizedString("Try selecting %@ to add topics you like.", comment: "A step in a guided tour for quick start. %@ will be the name of the item to select.")
+        let step2SettingsDescriptionTarget = NSLocalizedString("Settings", comment: "The menu item to select during a guided tour.")
+        let step2SettingsDescription = step2SettingsDescriptionBase.highlighting(phrase: step2SettingsDescriptionTarget, icon: .gridicon(.cog))
+
+        /// Combined description for step 2
+        let step2Format = NSAttributedString(string: "%@ %@")
+        let step2Description = NSAttributedString(format: step2Format, args: step2DiscoverDescription, step2SettingsDescription)
+
+        let step2: WayPoint = (element: .readerDiscoverSettings, description: step2Description)
 
         return [step1, step2]
     }()
@@ -456,3 +466,15 @@ private extension String {
         }
     }
 }
+
+private extension NSAttributedString {
+    convenience init(format: NSAttributedString, args: NSAttributedString...) {
+        let mutableNSAttributedString = NSMutableAttributedString(attributedString: format)
+
+        args.forEach { (attributedString) in
+            let range = NSString(string: mutableNSAttributedString.string).range(of: "%@")
+            mutableNSAttributedString.replaceCharacters(in: range, with: attributedString)
+        }
+        self.init(attributedString: mutableNSAttributedString)
+    }
+}

WordPress/Classes/ViewRelated/Reader/Manage/ReaderManageScenePresenter.swift

@@ -53,6 +53,7 @@ class ReaderManageScenePresenter: ScenePresenter {
         presentedViewController = navigationController
         viewController.present(navigationController, animated: true, completion: nil)
 
+        QuickStartTourGuide.shared.visited(.readerDiscoverSettings)
         WPAnalytics.track(.readerManageViewDisplayed)
     }
 }

WordPress/Classes/ViewRelated/Reader/Tab Navigation/ReaderTabViewController.swift

@@ -11,7 +11,7 @@ class ReaderTabViewController: UIViewController {
         return makeReaderTabView(viewModel)
     }()
 
-    private let searchButton: SpotlightableButton = SpotlightableButton(type: .custom)
+    private let settingsButton: SpotlightableButton = SpotlightableButton(type: .custom)
 
     init(viewModel: ReaderTabViewModel, readerTabViewFactory: @escaping (ReaderTabViewModel) -> ReaderTabView) {
         self.viewModel = viewModel
@@ -61,7 +61,16 @@ class ReaderTabViewController: UIViewController {
     }
 
     override func viewWillAppear(_ animated: Bool) {
-        searchButton.shouldShowSpotlight = QuickStartTourGuide.shared.isCurrentElement(.readerSearch)
+        super.viewWillAppear(animated)
+
+        if QuickStartTourGuide.shared.isCurrentElement(.readerDiscoverSettings) {
+
+            if viewModel.selectedIndex != ReaderTabConstants.discoverIndex {
+                viewModel.showTab(at: ReaderTabConstants.discoverIndex)
+            }
+
+            settingsButton.shouldShowSpotlight = true
+        }
     }
 
     override func viewWillDisappear(_ animated: Bool) {
@@ -71,22 +80,21 @@ class ReaderTabViewController: UIViewController {
     }
 
     func setupNavigationButtons() {
-        // Settings Button
-        let settingsButton = UIBarButtonItem(image: UIImage.gridicon(.cog),
-                                             style: .plain,
-                                             target: self,
-                                             action: #selector(didTapSettingsButton))
-        settingsButton.accessibilityIdentifier = ReaderTabConstants.settingsButtonIdentifier
-
         // Search Button
-        searchButton.spotlightOffset = UIOffset(horizontal: 20, vertical: -10)
-        searchButton.setImage(.gridicon(.search), for: .normal)
-        searchButton.addTarget(self, action: #selector(didTapSearchButton), for: .touchUpInside)
+        let searchButton = UIBarButtonItem(image: UIImage.gridicon(.search),
+                                           style: .plain,
+                                           target: self,
+                                           action: #selector(didTapSearchButton))
         searchButton.accessibilityIdentifier = ReaderTabConstants.searchButtonAccessibilityIdentifier
 
-        let searchBarButton = UIBarButtonItem(customView: searchButton)
+        // Settings Button
+        settingsButton.spotlightOffset = ReaderTabConstants.spotlightOffset
+        settingsButton.setImage(.gridicon(.cog), for: .normal)
+        settingsButton.addTarget(self, action: #selector(didTapSettingsButton), for: .touchUpInside)
+        settingsButton.accessibilityIdentifier = ReaderTabConstants.settingsButtonIdentifier
+        let settingsButton = UIBarButtonItem(customView: settingsButton)
 
-        navigationItem.rightBarButtonItems = [searchBarButton, settingsButton]
+        navigationItem.rightBarButtonItems = [searchButton, settingsButton]
     }
 
     override func loadView() {
@@ -115,6 +123,7 @@ class ReaderTabViewController: UIViewController {
 // MARK: - Navigation Buttons
 extension ReaderTabViewController {
     @objc private func didTapSettingsButton() {
+        settingsButton.shouldShowSpotlight = false
         viewModel.presentManage(from: self)
     }
 
@@ -172,5 +181,6 @@ extension ReaderTabViewController {
         static let restorationIdentifier = "WPReaderTabControllerRestorationID"
         static let encodedIndexKey = "WPReaderTabControllerIndexRestorationKey"
         static let discoverIndex = 1
+        static let spotlightOffset = UIOffset(horizontal: 20, vertical: -10)
     }
 }

WordPress/Classes/ViewRelated/Reader/Tab Navigation/WPTabBarController+ReaderTabNavigation.swift

@@ -64,7 +64,6 @@ extension WPTabBarController {
     func navigateToReaderSearch() {
         let searchController = ReaderSearchViewController.controller()
         navigateToReader(searchController)
-        QuickStartTourGuide.shared.visited(.readerSearch)
     }
 
     func navigateToReaderSite(_ topic: ReaderSiteTopic) {