[Login] Improve error messaging displaying a new error screen when application password is disabled

RELEASE-NOTES.txt

@@ -1,5 +1,10 @@
 *** PLEASE FOLLOW THIS FORMAT: [<priority indicator, more stars = higher priority>] <description> [<PR URL>]
 *** Use [*****] to indicate smoke tests of all critical flows should be run on the final IPA before release (e.g. major library or OS update).
+
+21.7
+-----
+- [*] Better error messages if Application Password login is disabled on user's website. [https://github.com/woocommerce/woocommerce-ios/pull/15031]
+
 21.6
 -----
 - [*] Payments: improve retry handling when card reader updates fail due to low battery [https://github.com/woocommerce/woocommerce-ios/pull/14990]

WooCommerce/Classes/Authentication/Application Password/ApplicationPasswordAuthorizationViewModel.swift

@@ -4,7 +4,7 @@ import Yosemite
 /// View model for `ApplicationPasswordAuthorizationWebViewController`.
 ///
 final class ApplicationPasswordAuthorizationViewModel {
-    private let siteURL: String
+    let siteURL: String
     private let stores: StoresManager
 
     init(siteURL: String,

WooCommerce/Classes/Authentication/Application Password/ApplicationPasswordAuthorizationWebViewController.swift

@@ -157,7 +157,20 @@ private extension ApplicationPasswordAuthorizationWebViewController {
                 guard let url = try await viewModel.fetchAuthURL() else {
                     DDLogError("⛔️ No authorization URL found for application passwords")
                     analytics.track(.applicationPasswordAuthorizationURLNotAvailable)
-                    return showErrorAlert(message: Localization.applicationPasswordDisabled)
+
+                    let errorUI = applicationPasswordDisabledUI(for: viewModel.siteURL)
+                    // When the error view controller is popped, also pop the web view
+                    errorUI.navigationItem.leftBarButtonItem = UIBarButtonItem(
+                        image: UIImage(systemName: "chevron.backward"),
+                        style: .plain,
+                        target: self,
+                        action: #selector(popBothControllers)
+                    )
+
+                    // Push instead of present
+                    navigationController?.pushViewController(errorUI, animated: true)
+
+                    return
                 }
                 loadAuthorizationPage(url: url)
             } catch {
@@ -171,6 +184,12 @@ private extension ApplicationPasswordAuthorizationWebViewController {
         }
     }
 
+    @objc private func popBothControllers() {
+        // Pop back two view controllers to remove both error and web view
+        navigationController?.popViewController(animated: false)
+        navigationController?.popViewController(animated: true)
+    }
+
     func loadAuthorizationPage(url: URL) {
         let parameters: [URLQueryItem] = [
             URLQueryItem(name: Constants.Query.appName, value: appName),
@@ -220,6 +239,14 @@ private extension ApplicationPasswordAuthorizationWebViewController {
         }
         present(alertController, animated: true)
     }
+
+    /// The error screen to be displayed when the user tries to log in with site credentials
+    /// with application password disabled.
+    ///
+    func applicationPasswordDisabledUI(for siteURL: String) -> UIViewController {
+        let viewModel = ApplicationPasswordDisabledViewModel(siteURL: siteURL)
+        return ULErrorViewController(viewModel: viewModel)
+    }
 }
 
 extension ApplicationPasswordAuthorizationWebViewController: WKNavigationDelegate {
@@ -254,6 +281,13 @@ extension ApplicationPasswordAuthorizationWebViewController: WKNavigationDelegat
     }
 }
 
+extension ApplicationPasswordAuthorizationWebViewController: UIAdaptivePresentationControllerDelegate {
+    func presentationControllerDidDismiss(_ presentationController: UIPresentationController) {
+        // This will be called when the error UI is dismissed
+        navigationController?.dismiss(animated: true)
+    }
+}
+
 private extension ApplicationPasswordAuthorizationWebViewController {
     enum Constants {
         static let successURL = "woocommerce://application-password"

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

@@ -5,12 +5,15 @@ import WordPressAuthenticator
 /// modeling an error when application password is disabled.
 ///
 struct ApplicationPasswordDisabledViewModel: ULErrorViewModel {
-    init(siteURL: String) {
+    init(siteURL: String,
+         authentication: Authentication = ServiceLocator.authenticationManager) {
         self.siteURL = siteURL
+        self.authentication = authentication
     }
 
     let siteURL: String
-    let image: UIImage = .errorImage // TODO: update this if needed
+    let authentication: Authentication
+    let image: UIImage = .errorImage
 
     var text: NSAttributedString {
         let font: UIFont = .body
@@ -20,7 +23,7 @@ struct ApplicationPasswordDisabledViewModel: ULErrorViewModel {
                                                  attributes: [.font: boldFont])
         let message = NSMutableAttributedString(string: Localization.errorMessage)
 
-        message.replaceFirstOccurrence(of: "%@", with: boldSiteAddress)
+        message.replaceFirstOccurrence(of: "%1$@", with: boldSiteAddress)
 
         return message
     }
@@ -34,14 +37,18 @@ struct ApplicationPasswordDisabledViewModel: ULErrorViewModel {
     let secondaryButtonTitle = Localization.secondaryButtonTitle
 
     func viewDidLoad(_ viewController: UIViewController?) {
-        // TODO: add tracks if necessary
     }
 
+    // Navigates back to the third last view controller in the stack if possible,
+    // otherwise it navigates to the root view controller.
     func didTapPrimaryButton(in viewController: UIViewController?) {
-        guard let viewController else {
-            return
+        guard let navigationController = viewController?.navigationController else { return }
+        let viewControllers = navigationController.viewControllers
+        if viewControllers.count >= 3 {
+            navigationController.popToViewController(viewControllers[viewControllers.count - 3], animated: true)
+        } else {
+            navigationController.popToRootViewController(animated: true)
         }
-        WordPressAuthenticator.showLoginForJustWPCom(from: viewController)
     }
 
     func didTapSecondaryButton(in viewController: UIViewController?) {
@@ -55,28 +62,48 @@ struct ApplicationPasswordDisabledViewModel: ULErrorViewModel {
         }
         WebviewHelper.launch(Constants.applicationPasswordLink, with: viewController)
     }
+
+    var rightBarButtonItemTitle: String? {
+        return Localization.helpButtonTitle
+    }
+
+    func didTapRightBarButtonItem(in viewController: UIViewController?) {
+        guard let viewController else {
+            return
+        }
+        authentication.presentSupport(from: viewController, screen: .noWooError)
+    }
 }
 
 private extension ApplicationPasswordDisabledViewModel {
     enum Localization {
         static let errorMessage = NSLocalizedString(
-            "It seems that your site %@ has Application Password disabled. Please enable it to use the WooCommerce app.",
+            "applicationPasswordDisabled.errorMessage",
+            value: "It seems that your site %1$@ has Application Password disabled. Please enable it to use the WooCommerce app.",
             comment: "An error message displayed when the user tries to log in to the app with site credentials but has application password disabled. " +
             "Reads like: It seems that your site google.com has Application Password disabled. " +
             "Please enable it to use the WooCommerce app."
         )
+        static let primaryButtonTitle = NSLocalizedString(
+            "applicationPasswordDisabled.retry.buttonTitle",
+            value: "Retry",
+            comment: "Button to retry fetching application password authorization if application password is disabled"
+        )
         static let secondaryButtonTitle = NSLocalizedString(
-            "Log In With Another Account",
+            "applicationPasswordDisabled.secondaryButtonTitle",
+            value: "Log In With Another Account",
             comment: "Action button that will restart the login flow."
             + "Presented when the user tries to log in to the app with site credentials but has application password disabled."
         )
         static let auxiliaryButtonTitle = NSLocalizedString(
-            "What is Application Password?",
+            "applicationPasswordDisabled.auxiliaryButtonTitle",
+            value: "What is Application Password?",
             comment: "Button that will navigate to a web page explaining Application Password"
         )
-        static let primaryButtonTitle = NSLocalizedString(
-            "Log in with WordPress.com",
-            comment: "Button that will navigate to the authentication flow with WP.com"
+        static let helpButtonTitle = NSLocalizedString(
+            "applicationPasswordDisabled.helpButtonTitle",
+            value: "Help",
+            comment: "Button that will navigate to the support area"
         )
     }
     enum Constants {

WooCommerce/WooCommerceTests/Authentication/ApplicationPasswordDisabledViewModelTests.swift

@@ -40,7 +40,7 @@ final class ApplicationPasswordDisabledViewModelTests: XCTestCase {
     func test_viewmodel_provides_expected_error_message() {
         // Given
         let viewModel = ApplicationPasswordDisabledViewModel(siteURL: testURL)
-        let expectation = Expectations.errorMessage.replacingOccurrences(of: "%@", with: "test.com")
+        let expectation = Expectations.errorMessage.replacingOccurrences(of: "%1$@", with: "test.com")
 
         // When
         let errorMessage = viewModel.text.string
@@ -129,18 +129,30 @@ final class ApplicationPasswordDisabledViewModelTests: XCTestCase {
         XCTAssertTrue(navigationController.presentedViewController is SFSafariViewController)
     }
 
-    func test_didTapPrimaryButton_presents_LoginNavigationController() {
+    func test_didTapPrimaryButton_navigates_to_correct_view_controller() {
         // Given
         let viewModel = ApplicationPasswordDisabledViewModel(siteURL: testURL)
+        let viewController1 = UIViewController()
+        let viewController2 = UIViewController()
+        let viewController3 = UIViewController()
+
+        navigationController.viewControllers = [viewController1, viewController2, viewController3]
+        window.rootViewController = navigationController
+        window.makeKeyAndVisible()
+
+        XCTAssertEqual(viewController3.navigationController, navigationController, "viewController3 should be part of the navigationController's stack")
 
         // When
-        viewModel.didTapPrimaryButton(in: navigationController)
+        viewModel.didTapPrimaryButton(in: viewController3)
 
-        // Then
-        waitUntil {
-            self.navigationController.presentedViewController != nil
+        waitUntil(timeout: Constants.expectationTimeout) {
+            return self.navigationController.viewControllers.count == 1 &&
+            self.navigationController.topViewController === viewController1
         }
-        XCTAssertTrue(navigationController.presentedViewController is LoginNavigationController)
+
+        // Then
+        XCTAssertEqual(navigationController.viewControllers.count, 1, "After the action, navigationController's stack should contain only one view controller")
+        XCTAssertEqual(navigationController.topViewController, viewController1, "topViewController should be viewController1")
     }
 }
 
@@ -149,23 +161,27 @@ private extension ApplicationPasswordDisabledViewModelTests {
         static let image = UIImage.errorImage
 
         static let errorMessage = NSLocalizedString(
-            "It seems that your site %@ has Application Password disabled. Please enable it to use the WooCommerce app.",
+            "applicationPasswordDisabled.errorMessage",
+            value: "It seems that your site %1$@ has Application Password disabled. Please enable it to use the WooCommerce app.",
             comment: "An error message displayed when the user tries to log in to the app with site credentials but has application password disabled. " +
             "Reads like: It seems that your site google.com has Application Password disabled. " +
             "Please enable it to use the WooCommerce app."
         )
         static let secondaryButtonTitle = NSLocalizedString(
-            "Log In With Another Account",
+            "applicationPasswordDisabled.secondaryButtonTitle",
+            value: "Log In With Another Account",
             comment: "Action button that will restart the login flow."
             + "Presented when the user tries to log in to the app with site credentials but has application password disabled."
         )
         static let auxiliaryButtonTitle = NSLocalizedString(
-            "What is Application Password?",
+            "applicationPasswordDisabled.auxiliaryButtonTitle",
+            value: "What is Application Password?",
             comment: "Button that will navigate to a web page explaining Application Password"
         )
         static let primaryButtonTitle = NSLocalizedString(
-            "Log in with WordPress.com",
-            comment: "Button that will navigate to the authentication flow with WP.com"
+            "applicationPasswordDisabled.retry.buttonTitle",
+            value: "Retry",
+            comment: "Button to retry fetching application password authorization if application password is disabled"
         )
     }
 }