Merge pull request #7773 from woocommerce/issue/7766-suggestion-connect-jectpack-wpcom

Login: Show instruction to connect to a WP.com site from the account mismatch error screen

Author: itsmeichigo

RELEASE-NOTES.txt

@@ -5,6 +5,7 @@
 
 - [**] Products tab: products search now has an option to search products by SKU. Stores with WC version 6.6+ support partial SKU search, otherwise the product(s) with the exact SKU match is returned. [https://github.com/woocommerce/woocommerce-ios/pull/7781]
 - [*] Fixed a rare crash when selecting a store in the store picker. [https://github.com/woocommerce/woocommerce-ios/pull/7765]
+- [*] Show suggestion for logging in to a WP.com site with a mismatched WP.com account. [https://github.com/woocommerce/woocommerce-ios/pull/7773]
 - [*] Help center: Added help center web page with FAQs for "Not a WooCommerce site" and "Wrong WordPress.com account" error screens. [https://github.com/woocommerce/woocommerce-ios/pull/7767, https://github.com/woocommerce/woocommerce-ios/pull/7769]
 
 10.5

WooCommerce/Classes/Authentication/Navigation Exceptions/JetpackConnectionWebViewModel.swift

@@ -27,28 +27,38 @@ final class JetpackConnectionWebViewModel: AuthenticatedWebViewModel {
     }
 
     func handleRedirect(for url: URL?) {
-        // No-op
+        guard let path = url?.absoluteString else {
+            return
+        }
+        handleCompletionIfPossible(path)
     }
 
     func decidePolicy(for navigationURL: URL) async -> WKNavigationActionPolicy {
         let url = navigationURL.absoluteString
-        switch url {
-        // When the web view navigates to the site address or Jetpack plans page,
-        // we can assume that the setup has completed.
-        case let url where url.hasPrefix(siteURL) || url.hasPrefix(Constants.plansPage):
-            await MainActor.run { [weak self] in
-                self?.handleSetupCompletion()
-            }
+        if handleCompletionIfPossible(url) {
             return .cancel
-        default:
-            return .allow
         }
+        return .allow
     }
 
     private func handleSetupCompletion() {
         analytics.track(.loginJetpackConnectCompleted)
         completionHandler()
     }
+
+    @discardableResult
+    func handleCompletionIfPossible(_ url: String) -> Bool {
+        // When the web view navigates to the site address or Jetpack plans page,
+        // we can assume that the setup has completed.
+        if url.hasPrefix(siteURL) || url.hasPrefix(Constants.plansPage) {
+            // Running on the main thread is necessary if this method is triggered from `decidePolicy`.
+            DispatchQueue.main.async { [weak self] in
+                self?.handleSetupCompletion()
+            }
+            return true
+        }
+        return false
+    }
 }
 
 private extension JetpackConnectionWebViewModel {

WooCommerce/Classes/Authentication/Navigation Exceptions/ULAccountMismatchViewController.swift

@@ -27,7 +27,6 @@ final class ULAccountMismatchViewController: UIViewController {
     @IBOutlet private weak var logOutButton: UIButton!
     @IBOutlet private weak var primaryButton: NUXButton!
     @IBOutlet private weak var secondaryButton: NUXButton!
-    @IBOutlet private weak var activityIndicator: UIActivityIndicatorView!
 
     @IBOutlet private weak var imageView: UIImageView!
     @IBOutlet private weak var errorMessage: UILabel!
@@ -65,7 +64,6 @@ final class ULAccountMismatchViewController: UIViewController {
 
         configurePrimaryButton()
         configureSecondaryButon()
-        configureActivityIndicator()
 
         setUnifiedMargins(forWidth: view.frame.width)
 
@@ -162,12 +160,6 @@ private extension ULAccountMismatchViewController {
                 self?.primaryButton.showActivityIndicator(isLoading)
             }
             .store(in: &subscriptions)
-
-        viewModel.isPrimaryButtonHidden
-            .sink { [weak self] isHidden in
-                self?.primaryButton.isHidden = isHidden
-            }
-            .store(in: &subscriptions)
     }
 
     func configureSecondaryButon() {
@@ -179,20 +171,6 @@ private extension ULAccountMismatchViewController {
         }
     }
 
-    func configureActivityIndicator() {
-        activityIndicator.hidesWhenStopped = true
-
-        viewModel.isShowingActivityIndicator
-            .sink { [weak self] showing in
-                if showing {
-                    self?.activityIndicator.startAnimating()
-                } else {
-                    self?.activityIndicator.stopAnimating()
-                }
-            }
-            .store(in: &subscriptions)
-    }
-
     /// This logic is lifted from WPAuthenticator's LoginPrologueViewController
     /// This View Controller will be provided to WPAuthenticator. WPAuthenticator
     /// will insert it into its own navigation stack, where it is applying a similar logic
@@ -282,10 +260,6 @@ extension ULAccountMismatchViewController {
         return secondaryButton
     }
 
-    func getActivityIndicator() -> UIActivityIndicatorView {
-        return activityIndicator
-    }
-
     func getUserNameLabel() -> UILabel {
         return userNameLabel
     }

WooCommerce/Classes/Authentication/Navigation Exceptions/ULAccountMismatchViewController.xib

@@ -11,7 +11,6 @@
     <objects>
         <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner" customClass="ULAccountMismatchViewController" customModule="WooCommerce" customModuleProvider="target">
             <connections>
-                <outlet property="activityIndicator" destination="GcM-pl-Wag" id="SyY-Mz-h3S"/>
                 <outlet property="buttonViewLeadingConstraint" destination="r9Z-y5-j3W" id="bWb-vV-0U2"/>
                 <outlet property="buttonViewTrailingConstraint" destination="3Fe-tr-bmb" id="DjF-95-KFx"/>
                 <outlet property="errorMessage" destination="a2d-le-aKc" id="YgT-Ex-Gwh"/>
@@ -35,17 +34,13 @@
             <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
             <subviews>
                 <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="10Z-y1-ZQ6" userLabel="Action Background View">
-                    <rect key="frame" x="0.0" y="662" width="414" height="200"/>
+                    <rect key="frame" x="0.0" y="702" width="414" height="160"/>
                     <subviews>
                         <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" spacing="20" translatesAutoresizingMaskIntoConstraints="NO" id="mhI-fa-Yzw">
-                            <rect key="frame" x="20" y="20" width="374" height="160"/>
+                            <rect key="frame" x="20" y="20" width="374" height="120"/>
                             <subviews>
-                                <activityIndicatorView opaque="NO" contentMode="scaleToFill" horizontalHuggingPriority="750" verticalHuggingPriority="750" style="medium" id="GcM-pl-Wag">
-                                    <rect key="frame" x="0.0" y="0.0" width="374" height="20"/>
-                                    <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
-                                </activityIndicatorView>
                                 <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="ZHa-is-GJK" userLabel="secondary action button" customClass="NUXButton" customModule="WordPressAuthenticator">
-                                    <rect key="frame" x="0.0" y="40" width="374" height="50"/>
+                                    <rect key="frame" x="0.0" y="0.0" width="374" height="50"/>
                                     <constraints>
                                         <constraint firstAttribute="height" constant="50" id="Gcd-Af-CS9"/>
                                     </constraints>
@@ -55,7 +50,7 @@
                                     </state>
                                 </button>
                                 <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="0ZR-ma-6pq" userLabel="secondary action button" customClass="NUXButton" customModule="WordPressAuthenticator">
-                                    <rect key="frame" x="0.0" y="110" width="374" height="50"/>
+                                    <rect key="frame" x="0.0" y="70" width="374" height="50"/>
                                     <constraints>
                                         <constraint firstAttribute="height" constant="50" id="BTA-bw-h4s"/>
                                     </constraints>
@@ -75,7 +70,7 @@
                     </constraints>
                 </view>
                 <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" alignment="center" spacing="32" translatesAutoresizingMaskIntoConstraints="NO" id="jIt-xb-rrN">
-                    <rect key="frame" x="34" y="176" width="346" height="486"/>
+                    <rect key="frame" x="34" y="192" width="346" height="486"/>
                     <subviews>
                         <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="Np4-PU-IRZ" customClass="CircularImageView" customModule="WooCommerce" customModuleProvider="target">
                             <rect key="frame" x="143" y="0.0" width="60" height="60"/>

WooCommerce/Classes/Authentication/Navigation Exceptions/ULAccountMismatchViewModel.swift

@@ -28,9 +28,6 @@ protocol ULAccountMismatchViewModel {
     /// Provides a title for a primary action button
     var primaryButtonTitle: String { get }
 
-    /// Provides the visibility of the primary button
-    var isPrimaryButtonHidden: AnyPublisher<Bool, Never> { get }
-
     /// Provides the loading state of the primary button
     var isPrimaryButtonLoading: AnyPublisher<Bool, Never> { get }
 
@@ -40,9 +37,6 @@ protocol ULAccountMismatchViewModel {
     /// Provides the visibility of the secondary button
     var isSecondaryButtonHidden: Bool { get }
 
-    /// Provides the visibility of the activity indicator
-    var isShowingActivityIndicator: AnyPublisher<Bool, Never> { get }
-
     /// Provides the title for the logout button
     var logOutButtonTitle: String { get }
 

WooCommerce/Classes/Authentication/Navigation Exceptions/WrongAccountErrorViewModel.swift

@@ -24,11 +24,10 @@ final class WrongAccountErrorViewModel: ULAccountMismatchViewModel {
     private var siteUsername: String = ""
     private var jetpackConnectionURL: URL?
 
-    private let primaryButtonHiddenSubject = CurrentValueSubject<Bool, Never>(true)
-    private let primaryButtonLoadingSubject = CurrentValueSubject<Bool, Never>(false)
-    private let activityIndicatorLoadingSubject = CurrentValueSubject<Bool, Never>(false)
+    @Published private var isSelfHostedSite = false
+    @Published private var primaryButtonLoading = false
 
-    private var primaryButtonSubscription: AnyCancellable?
+    private var siteInfoSubscription: AnyCancellable?
 
     init(siteURL: String?,
          showsConnectedStores: Bool,
@@ -96,19 +95,12 @@ final class WrongAccountErrorViewModel: ULAccountMismatchViewModel {
 
     let secondaryButtonTitle = Localization.secondaryButtonTitle
 
-    var isPrimaryButtonHidden: AnyPublisher<Bool, Never> {
-        primaryButtonHiddenSubject.eraseToAnyPublisher()
-    }
-
     var isPrimaryButtonLoading: AnyPublisher<Bool, Never> {
-        primaryButtonLoadingSubject.eraseToAnyPublisher()
+        $primaryButtonLoading.eraseToAnyPublisher()
     }
 
     var isSecondaryButtonHidden: Bool { !showsConnectedStores }
 
-    var isShowingActivityIndicator: AnyPublisher<Bool, Never> {
-        activityIndicatorLoadingSubject.eraseToAnyPublisher()
-    }
 
     // Configures `Help` button title
     var rightBarButtonItemTitle: String? {
@@ -117,19 +109,17 @@ final class WrongAccountErrorViewModel: ULAccountMismatchViewModel {
 
     // MARK: - Actions
     func viewDidLoad(_ viewController: UIViewController?) {
-        primaryButtonSubscription = primaryButtonHiddenSubject
+        siteInfoSubscription = $isSelfHostedSite
             .dropFirst() // ignores first element
-            .sink { [weak self] isHidden in
-                // if the button is hidden, the site is not self-hosted.
-                self?.analytics.track(event: .LoginJetpackConnection.jetpackConnectionErrorShown(selfHostedSite: !isHidden))
+            .sink { [weak self] isSelfHosted in
+                self?.analytics.track(event: .LoginJetpackConnection.jetpackConnectionErrorShown(selfHostedSite: isSelfHosted))
             }
 
         // Fetches site info if we're not sure whether the site is self-hosted.
         if siteXMLRPC.isEmpty {
             fetchSiteInfo()
         } else {
-            // Shows the Connect Jetpack button if the site is self-hosted
-            primaryButtonHiddenSubject.send(false)
+            isSelfHostedSite = true
         }
     }
 
@@ -140,7 +130,10 @@ final class WrongAccountErrorViewModel: ULAccountMismatchViewModel {
         }
 
         guard let url = jetpackConnectionURL else {
-            return showSiteCredentialLoginAndJetpackConnection(from: viewController)
+            if isSelfHostedSite {
+                return showSiteCredentialLoginAndJetpackConnection(from: viewController)
+            }
+            return presentConnectToWPComSiteAlert(from: viewController)
         }
 
         showJetpackConnectionWebView(url: url, from: viewController)
@@ -182,18 +175,14 @@ private extension WrongAccountErrorViewModel {
     /// If the site is self-hosted, make the Connect Jetpack button visible.
     ///
     func fetchSiteInfo() {
-        activityIndicatorLoadingSubject.send(true)
+        primaryButtonLoading = true
         authenticatorType.fetchSiteInfo(for: siteURL) { [weak self] result in
             guard let self = self else { return }
-            self.activityIndicatorLoadingSubject.send(false)
+            self.primaryButtonLoading = false
 
             switch result {
             case .success(let siteInfo):
-                if siteInfo.isWPCom == false {
-                    self.primaryButtonHiddenSubject.send(false)
-                } else {
-                    self.primaryButtonHiddenSubject.send(true)
-                }
+                self.isSelfHostedSite = !siteInfo.isWPCom
             case .failure(let error):
                 DDLogWarn("⚠️ Error fetching site info: \(error)")
             }
@@ -214,10 +203,10 @@ private extension WrongAccountErrorViewModel {
     /// Fetches the URL for handling Jetpack connection in a web view
     ///
     func fetchJetpackConnectionURL(onCompletion: ((URL) -> Void)? = nil) {
-        primaryButtonLoadingSubject.send(true)
+        primaryButtonLoading = true
         let action = JetpackConnectionAction.fetchJetpackConnectionURL { [weak self] result in
             guard let self = self else { return }
-            self.primaryButtonLoadingSubject.send(false)
+            self.primaryButtonLoading = false
             switch result {
             case .success(let url):
                 onCompletion?(url)
@@ -244,6 +233,13 @@ private extension WrongAccountErrorViewModel {
         }
     }
 
+    func presentConnectToWPComSiteAlert(from viewController: UIViewController) {
+        let fancyAlert = FancyAlertViewController.makeConnectAccountToWPComSiteAlert()
+        fancyAlert.modalPresentationStyle = .custom
+        fancyAlert.transitioningDelegate = AppDelegate.shared.tabBarController
+        viewController.present(fancyAlert, animated: true)
+    }
+
     /// Presents a web view pointing to the Jetpack connection URL.
     ///
     func showJetpackConnectionWebView(url: URL, from viewController: UIViewController) {
@@ -348,9 +344,9 @@ private extension WrongAccountErrorViewModel {
                                                           comment: "Action button linking to a list of connected stores."
                                                           + "Presented when logging in with a store address that does not match the account entered")
 
-        static let primaryButtonTitle = NSLocalizedString("Connect Jetpack",
-                                                          comment: "Action button to handle Jetpack connection."
-                                                          + "Presented when logging in with a self-hosted site that does not match the account entered")
+        static let primaryButtonTitle = NSLocalizedString("Connect to the site",
+                                                          comment: "Action button to handle connecting the logged-in account to a given site."
+                                                          + "Presented when logging in with a store address that does not match the account entered")
 
         static let yourSite = NSLocalizedString("your site",
                                                 comment: "Placeholder for site url, if the url is unknown."

WooCommerce/Classes/ViewRelated/Fancy Alerts/FancyAlertViewController+UnifiedLogin.swift

@@ -39,6 +39,20 @@ extension FancyAlertViewController {
         return controller
 
     }
+
+    static func makeConnectAccountToWPComSiteAlert() -> FancyAlertViewController {
+        let dismissButton = makeDismissButtonConfig()
+        let config = FancyAlertViewController.Config(titleText: Localization.connectToWPComSite,
+                                                     bodyText: Localization.connectToWPComSiteDescription,
+                                                     headerImage: nil,
+                                                     dividerPosition: .top,
+                                                     defaultButton: dismissButton,
+                                                     cancelButton: nil,
+                                                     dismissAction: {})
+
+        let controller = FancyAlertViewController.controllerWithConfiguration(configuration: config)
+        return controller
+    }
 }
 
 
@@ -81,6 +95,18 @@ private extension FancyAlertViewController {
             "Need more help?",
             comment: "Title of button to learn more presented when users attempt to log in with an email address that does not match a WP.com account"
         )
+
+        static let connectToWPComSite = NSLocalizedString(
+            "Connecting to a WordPress.com site",
+            comment: "Title of alert for suggestion on how to connect to a WP.com site" +
+            "Presented when a user logs in with an email that does not have access to a WP.com site"
+        )
+
+        static let connectToWPComSiteDescription = NSLocalizedString(
+            "Please contact the site owner for an invitation to the site as a shop manager or administrator to use the app.",
+            comment: "Description of alert for suggestion on how to connect to a WP.com site" +
+            "Presented when a user logs in with an email that does not have access to a WP.com site"
+        )
     }
 
     enum Strings {

WooCommerce/WooCommerceTests/Authentication/JetpackConnectionWebViewModelTests.swift

@@ -18,11 +18,13 @@ final class JetpackConnectionWebViewModelTests: XCTestCase {
         let authorizePolicy = await viewModel.decidePolicy(for: authorizeURL)
         let finalUrl = try XCTUnwrap(URL(string: siteURL + "/wp-admin"))
         let completionPolicy = await viewModel.decidePolicy(for: finalUrl)
+        waitUntil {
+            completionTriggered == true
+        }
 
         // Then
         XCTAssertEqual(authorizePolicy, .allow)
         XCTAssertEqual(completionPolicy, .cancel)
-        XCTAssertTrue(completionTriggered)
     }
 
     func test_dismissal_is_tracked() throws {
@@ -46,13 +48,21 @@ final class JetpackConnectionWebViewModelTests: XCTestCase {
         let analyticsProvider = MockAnalyticsProvider()
         let analytics = WooAnalytics(analyticsProvider: analyticsProvider)
 
+        var completionTriggered = false
+        let completionHandler: () -> Void = {
+            completionTriggered = true
+        }
+
         let siteURL = "https://test.com"
         let initialURL = try XCTUnwrap(URL(string: "https://jetpack.wordpress.com/jetpack.authorize/1/"))
-        let viewModel = JetpackConnectionWebViewModel(initialURL: initialURL, siteURL: siteURL, analytics: analytics, completion: {})
+        let viewModel = JetpackConnectionWebViewModel(initialURL: initialURL, siteURL: siteURL, analytics: analytics, completion: completionHandler)
 
         // When
         let finalUrl = try XCTUnwrap(URL(string: siteURL + "/wp-admin"))
         _ = await viewModel.decidePolicy(for: finalUrl)
+        waitUntil {
+            completionTriggered == true
+        }
 
         // Then
         XCTAssertNotNil(analyticsProvider.receivedEvents.first(where: { $0 == "login_jetpack_connect_completed" }))