Add Watchlist onboarding modal

WMF Framework/CommonStrings.swift

@@ -379,6 +379,28 @@ public class CommonStrings: NSObject {
 
     public static let compareRevisionsTitle = WMFLocalizedString("diff-compare-header-heading", value: "Compare Revisions", comment: "Heading label in header when comparing two revisions.")
 
+    public static let watchlistOnboardingTitle = WMFLocalizedString("watchlist-onboarding-title", value: "Introducing your Watchlist", comment: "Watchlists onboarding modal title")
+
+    public static let watchlistTrackChangesTitle = WMFLocalizedString("watchlist-track-title", value: "Track changes", comment: "Watchlists onboarding modal track changes section title")
+
+    public static let watchlistTrackChangesSubtitle = WMFLocalizedString("watchlist-track-subtitle", value: "The Watchlist is a tool that lets you keep track of changes made to pages or articles you're interested in.", comment: "Watchlists onboarding modal track changes section subtitle")
+
+    public static let watchlistWatchChangesTitle = WMFLocalizedString("watchlist-watch-title", value: "Watch articles", comment: "Watchlists onboarding modal watch articles section title")
+
+    public static let watchlistWatchChangesSubitle = WMFLocalizedString("watchlist-watch-subtitle", value: "By tapping the star or \"Watch\" action in the bottom toolbar of an article, you can add that page to your Watchlist.", comment: "Watchlists onboarding modal watch articles section subtitle")
+
+    public static let watchlistSetExpirationTitle = WMFLocalizedString("watchlist-expiration-title", value: "Set expiration", comment: "Watchlists onboarding modal set expiration section title")
+
+    public static let watchlistSetExpirationSubtitle = WMFLocalizedString("watchlist-expiration-subtitle", value: "Pages remain by default, but options exist for temporary watching ranging from one week to one year.", comment: "Watchlists onboarding modal set expiration section subtitle")
+
+    public static let watchlistViewUpdatesTitle = WMFLocalizedString("watchlist-updates-title", value: "View updates", comment: "Watchlists onboarding modal view updates section title")
+
+    public static let watchlistViewUpdatesSubitle = WMFLocalizedString("watchlist-updates-subtitle", value: "The Watchlist of the pages you've added, like edits or discussions, can be accessed via Settings → Account.", comment: "Watchlists onboarding modal view updates section subtitle")
+
+    public static let watchlistOnboardingLearnMore = WMFLocalizedString("watchlist-onboarding-button-title", value: "Learn more about the Watchlist", comment: "Watchlists onboarding modal learn more button title")
+
+    public static let continueButton = WMFLocalizedString("continue-button-title", value: "Continue", comment: "Continue button title")
+
     // Article As A Living Doucment Strings - for some reason build script doesn't auto generate these when used directly in SignificantEventsViewModels.swift
 
     public static let viewFullHistoryText = WMFLocalizedString("aaald-view-full-history-button", value: "View full article history", comment: "Text displayed in a button for pushing to the full article history view on the article as a living document screen.")

Wikipedia.xcodeproj/project.pbxproj

@@ -19869,7 +19869,7 @@
 			repositoryURL = "https://github.com/wikimedia/wikipedia-ios-components.git";
 			requirement = {
 				kind = revision;
-				revision = 97c835bce9820ae2a418b23be4dfc73c1374eb18;
+				revision = a1c2ed691283e8f77a280532e0f8b083ab44bf37;
 			};
 		};
 		67A770C6251BFE0400F94EF9 /* XCRemoteSwiftPackageReference "CocoaLumberjack" */ = {

Wikipedia.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved

@@ -23,7 +23,7 @@
       "kind" : "remoteSourceControl",
       "location" : "https://github.com/wikimedia/wikipedia-ios-components.git",
       "state" : {
-        "revision" : "97c835bce9820ae2a418b23be4dfc73c1374eb18"
+        "revision" : "a1c2ed691283e8f77a280532e0f8b083ab44bf37"
       }
     },
     {

Wikipedia/Code/AccountViewController.swift

@@ -149,12 +149,14 @@ class AccountViewController: SubSettingsViewController {
                     self.navigationController?.pushViewController(newTalkPage, animated: true)
                 }
         case .watchlist:
-            guard let linkURL = dataStore.primarySiteURL?.wmf_URL(withTitle: "Special:Watchlist"),
-            let userActivity = NSUserActivity.wmf_activity(for: linkURL) else {
-                return
+            let userDefaults = UserDefaults.standard
+
+            if !userDefaults.wmf_userHasOnboardedToWatchlists {
+                showWatchlistOnboarding()
+            } else {
+                goToWatchlist()
             }
-
-            NSUserActivity.wmf_navigate(to: userActivity)
+
         case .vanishAccount:
             let warningViewController = VanishAccountWarningViewHostingViewController(theme: theme)
             warningViewController.delegate = self
@@ -163,6 +165,32 @@ class AccountViewController: SubSettingsViewController {
             break
         }
     }
+
+    @objc func showWatchlistOnboarding() {
+        let trackChanges = WKOnboardingViewModel.WKOnboardingCellViewModel(icon: UIImage(named: "track-changes"), title: CommonStrings.watchlistTrackChangesTitle, subtitle: CommonStrings.watchlistTrackChangesSubtitle)
+        let watchArticles = WKOnboardingViewModel.WKOnboardingCellViewModel(icon: UIImage(named: "watch-articles"), title: CommonStrings.watchlistWatchChangesTitle, subtitle: CommonStrings.watchlistWatchChangesSubitle)
+        let setExpiration = WKOnboardingViewModel.WKOnboardingCellViewModel(icon: UIImage(named: "set-expiration"), title: CommonStrings.watchlistSetExpirationTitle, subtitle: CommonStrings.watchlistSetExpirationSubtitle)
+        let viewUpdates = WKOnboardingViewModel.WKOnboardingCellViewModel(icon: UIImage(named: "view-updates"), title: CommonStrings.watchlistViewUpdatesTitle, subtitle: CommonStrings.watchlistViewUpdatesSubitle)
+
+        let viewModel = WKOnboardingViewModel(title: CommonStrings.watchlistOnboardingTitle, cells: [trackChanges, watchArticles, setExpiration, viewUpdates], primaryButtonTitle: CommonStrings.continueButton, secondaryButtonTitle: CommonStrings.watchlistOnboardingLearnMore)
+
+        let viewController = WKOnboardingViewController(viewModel: viewModel)
+        viewController.hostingController.delegate = self
+
+        present(viewController, animated: true) {
+            UserDefaults.standard.wmf_userHasOnboardedToWatchlists = true
+        }
+    }
+
+    @objc func goToWatchlist() {
+
+        guard let linkURL = dataStore.primarySiteURL?.wmf_URL(withTitle: "Special:Watchlist"),
+        let userActivity = NSUserActivity.wmf_activity(for: linkURL) else {
+            return
+        }
+
+        NSUserActivity.wmf_navigate(to: userActivity)
+    }
 
     @objc func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
         return UITableView.automaticDimension
@@ -228,3 +256,29 @@ extension AccountViewController: VanishAccountWarningViewDelegate {
         navigationController?.pushViewController(viewController, animated: true)
     }
 }
+
+extension AccountViewController: WKOnboardingViewDelegate {
+    func didClickPrimaryButton() {
+        if let presentedViewController {
+            presentedViewController.dismiss(animated: true) {
+                self.goToWatchlist()
+            }
+        }
+    }
+
+    func didClickSecondaryButton() {
+
+        // TODO: get correct URL
+
+        if let presentedViewController {
+            presentedViewController.dismiss(animated: true) {
+                let siteURL = self.dataStore.primarySiteURL
+                guard let url = siteURL?.wmf_URL(withPath: "/wiki/Help:Watchlist", isMobile: true) else {
+                    self.showGenericError()
+                    return
+                }
+                self.navigate(to: url)
+            }
+        }
+    }
+}

Wikipedia/Code/NSUserDefaults+WMFExtensions.swift

@@ -28,6 +28,7 @@ let WMFSendUsageReports = "WMFSendUsageReports"
 let WMFShowNotificationsExploreFeedCard = "WMFShowNotificationsExploreFeedCard"
 let WMFUserHasOnboardedToNotificationsCenter = "WMFUserHasOnboardedToNotificationsCenter"
 let WMFUserHasOnboardedToContributingToTalkPages = "WMFUserHasOnboardedToContributingToTalkPages"
+let WMFUserHasOnboardedToWatchlists = "WMFUserHasOnboardedToWatchlists"
 let WMFDidShowNotificationsCenterPushOptInPanel = "WMFDidShowNotificationsCenterPushOptInPanel"
 let WMFSubscribedToEchoNotifications = "WMFSubscribedToEchoNotifications"
 let WMFTappedToImportSharedReadingListSurvey = "WMFTappedToImportSharedReadingListSurvey"
@@ -432,6 +433,15 @@ let WMFSessionStartDate =  "WMFSessionStartDate"
         }
     }
 
+    @objc var wmf_userHasOnboardedToWatchlists: Bool {
+        get {
+            return bool(forKey: WMFUserHasOnboardedToWatchlists)
+        }
+        set {
+            set(newValue, forKey: WMFUserHasOnboardedToWatchlists)
+        }
+    }
+
     @objc var wmf_didShowNotificationsCenterPushOptInPanel: Bool {
         get {
             return bool(forKey: WMFDidShowNotificationsCenterPushOptInPanel)

Wikipedia/Images.xcassets/Image.imageset/Contents.json

@@ -0,0 +1,20 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Wikipedia/Images.xcassets/watchlists/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Wikipedia/Images.xcassets/watchlists/set-expiration.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "set-expiration.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Wikipedia/Images.xcassets/watchlists/track-changes.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "track-changes.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Wikipedia/Images.xcassets/watchlists/view-updates.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "view-updates.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Wikipedia/Images.xcassets/watchlists/watch-articles.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "watch-articles.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Wikipedia/Localizations/en.lproj/Localizable.strings

@@ -155,6 +155,7 @@
 "clearing-cache-in-progress" = "Clearing cache in progress.";
 "close-button-accessibility-label" = "Close";
 "compass-direction" = "at $1 o'clock";
+"continue-button-title" = "Continue";
 "continue-reading-empty-description" = "Explore Wikipedia for more articles to read";
 "continue-reading-empty-title" = "No recently read articles";
 "crimean-tatar-variants-alert-body" = "The Wikipedia app now supports the following Crimean Tatar variants as primary or secondary languages within the app, making it easier to read, search and edit in your preferred variants:\n\nQırımtatarca, Latin Crimean Tatar Latin (chr-latn)\nкъырымтатарджа, Кирил Crimean Tatar Cyrillic (crh-cyrl)";
@@ -1115,6 +1116,8 @@
 "watchlist-change-expiry-option-three-months" = "3 months";
 "watchlist-change-expiry-subtitle" = "Choose Watchlist time period";
 "watchlist-change-expiry-title" = "Watchlist expiry";
+"watchlist-expiration-subtitle" = "Pages remain by default, but options exist for temporary watching ranging from one week to one year.";
+"watchlist-expiration-title" = "Set expiration";
 "watchlist-filter" = "Filter";
 "watchlist-filter-activity-header" = "Watchlist Activity";
 "watchlist-filter-activity-options-seen-changes" = "Seen changes";
@@ -1137,10 +1140,18 @@
 "watchlist-filter-user-registration-header" = "User registration and experience";
 "watchlist-filter-user-registration-options-registered" = "Registered";
 "watchlist-filter-user-registration-options-unregistered" = "Unregistered";
+"watchlist-onboarding-button-title" = "Learn more about the Watchlist";
+"watchlist-onboarding-title" = "Introducing your Watchlist";
 "watchlist-removed" = "Removed from your Watchlist";
+"watchlist-track-subtitle" = "The Watchlist is a tool that lets you keep track of changes made to pages or articles you're interested in.";
+"watchlist-track-title" = "Track changes";
+"watchlist-updates-subtitle" = "The Watchlist of the pages you've added, like edits or discussions, can be accessed via Settings → Account.";
+"watchlist-updates-title" = "View updates";
 "watchlist-user-button-user-contributions" = "User contributions";
 "watchlist-user-button-user-page" = "User page";
 "watchlist-user-button-user-talk-page" = "User talk page";
+"watchlist-watch-subtitle" = "By tapping the star or \"Watch\" action in the bottom toolbar of an article, you can add that page to your Watchlist.";
+"watchlist-watch-title" = "Watch articles";
 "welcome-exploration-explore-feed-description" = "Recommended reading and daily articles from our community";
 "welcome-exploration-explore-feed-title" = "Explore feed";
 "welcome-exploration-on-this-day-description" = "Travel back in time to learn what happened today in history";

Wikipedia/Localizations/qqq.lproj/Localizable.strings

@@ -155,6 +155,7 @@
 "clearing-cache-in-progress" = "Title of banner that appears when a user taps clear cache button in Settings. Informs the user that clearing of cache is in progress.";
 "close-button-accessibility-label" = "Accessibility label for a button that closes a dialog. {{Identical|Close}}";
 "compass-direction" = "Spoken description of compass direction, e.g. \"at 3 o'clock\" means \"to the right\", \"at 11 o'clock\" means \"slightly to the left\", etc. $1 is the hour.";
+"continue-button-title" = "Continue button title";
 "continue-reading-empty-description" = "Explore Wikipedia for more articles to read";
 "continue-reading-empty-title" = "No recently read articles";
 "crimean-tatar-variants-alert-body" = "Body text of alert used to inform users about Crimean Tatar variant support. Please do not translate the newlines (\n) or Crimean Tatar characters (къырымтатарджа, etc.).";
@@ -1115,6 +1116,8 @@
 "watchlist-change-expiry-option-three-months" = "Title of button in expiry change modal that watches a page for three months.";
 "watchlist-change-expiry-subtitle" = "Subtitle in modal that allows a user to choose the expiry setting of a page they are watching.";
 "watchlist-change-expiry-title" = "Title of modal that allows a user to change the expiry setting of a page they are watching.";
+"watchlist-expiration-subtitle" = "Watchlists onboarding modal set expiration section subtitle";
+"watchlist-expiration-title" = "Watchlists onboarding modal set expiration section title";
 "watchlist-filter" = "Title for filter button in watchlist.";
 "watchlist-filter-activity-header" = "Header of watchlist filter adjustment view \"Watchlist Activity\" section.";
 "watchlist-filter-activity-options-seen-changes" = "Option in the watchlist filter adjustment view \"Watchlist Activity\" section. When selected, this option only displays seen revisions in the user's watchlist.";
@@ -1137,10 +1140,18 @@
 "watchlist-filter-user-registration-header" = "Header of watchlist filter adjustment view \"User Registration and Experience\" section.";
 "watchlist-filter-user-registration-options-registered" = "Option in the watchlist filter adjustment view \"User Registration and Experience\" section. When selected, this option only displays registered/non-anonymous edits in the user's watchlist.";
 "watchlist-filter-user-registration-options-unregistered" = "Option in the watchlist filter adjustment view \"User Registration and Experience\" section. When selected, this option only displays unregistered/anonymous edits in the user's watchlist.";
+"watchlist-onboarding-button-title" = "Watchlists onboarding modal learn more button title";
+"watchlist-onboarding-title" = "Watchlists onboarding modal title";
 "watchlist-removed" = "Title in toast after a user successfully removes an article from their watchlist.";
+"watchlist-track-subtitle" = "Watchlists onboarding modal track changes section subtitle";
+"watchlist-track-title" = "Watchlists onboarding modal track changes section title";
+"watchlist-updates-subtitle" = "Watchlists onboarding modal view updates section subtitle";
+"watchlist-updates-title" = "Watchlists onboarding modal view updates section title";
 "watchlist-user-button-user-contributions" = "Title shown for user contributions action in user menu button in diff and watchlist views.";
 "watchlist-user-button-user-page" = "Title shown for user page action in user menu button in diff and watchlist views.";
 "watchlist-user-button-user-talk-page" = "Title shown for user talk page action in user menu button in diff and watchlist views.";
+"watchlist-watch-subtitle" = "Watchlists onboarding modal watch articles section subtitle";
+"watchlist-watch-title" = "Watchlists onboarding modal watch articles section title";
 "welcome-exploration-explore-feed-description" = "Description for Explore feed";
 "welcome-exploration-explore-feed-title" = "Title for Explore feed";
 "welcome-exploration-on-this-day-description" = "Description for On this day";