Add option to show site creation guide on prologue screen (#844)

CHANGELOG.md

@@ -38,7 +38,7 @@ _None._
 
 ### New Features
 
-_None._
+- Add an option to show site creation guide on the prologue screen [#844]
 
 ### Bug Fixes
 

WordPressAuthenticator/Authenticator/WordPressAuthenticatorConfiguration.swift

@@ -174,6 +174,10 @@ public struct WordPressAuthenticatorConfiguration {
     ///
     let enableSiteAddressLoginOnlyInPrologue: Bool
 
+    /// If enabled, the prologue screen would display a link for site creation guide.
+    ///
+    let enableSiteCreationGuide: Bool
+
     /// Designated Initializer
     ///
     public init (wpcomClientId: String,
@@ -210,7 +214,8 @@ public struct WordPressAuthenticatorConfiguration {
                  enableManualSiteCredentialLogin: Bool = false,
                  enableManualErrorHandlingForSiteCredentialLogin: Bool = false,
                  useEnterEmailAddressAsStepValueForGetStartedVC: Bool = false,
-                 enableSiteAddressLoginOnlyInPrologue: Bool = false
+                 enableSiteAddressLoginOnlyInPrologue: Bool = false,
+                 enableSiteCreationGuide: Bool = false
     ) {
 
         self.wpcomClientId = wpcomClientId
@@ -248,5 +253,6 @@ public struct WordPressAuthenticatorConfiguration {
         self.enableManualErrorHandlingForSiteCredentialLogin = enableManualErrorHandlingForSiteCredentialLogin
         self.useEnterEmailAddressAsStepValueForGetStartedVC = useEnterEmailAddressAsStepValueForGetStartedVC
         self.enableSiteAddressLoginOnlyInPrologue = enableSiteAddressLoginOnlyInPrologue
+        self.enableSiteCreationGuide = enableSiteCreationGuide
     }
 }

WordPressAuthenticator/Authenticator/WordPressAuthenticatorDelegateProtocol.swift

@@ -148,6 +148,14 @@ public protocol WordPressAuthenticatorDelegate: AnyObject {
     ///
     func showSiteCreation(in navigationController: UINavigationController)
 
+    /// Signals to the Host App to navigate to the site creation guide.
+    /// This method triggered only if `enableSiteCreationGuide` config is enabled.
+    ///
+    /// - Parameters:
+    ///     - navigationController: the current navigation stack of the login flow.
+    ///
+    func showSiteCreationGuide(in navigationController: UINavigationController)
+
     /// Signals the Host App that a given Analytics Event has occurred.
     ///
     func track(event: WPAnalyticsStat)
@@ -172,6 +180,10 @@ public extension WordPressAuthenticatorDelegate {
         // No-op
     }
 
+    func showSiteCreationGuide(in navigationController: UINavigationController) {
+        // No-op
+    }
+
     func handleSiteCredentialLogin(credentials: WordPressOrgCredentials,
                                    onLoading: @escaping (Bool) -> Void,
                                    onSuccess: @escaping () -> Void,

WordPressAuthenticator/Authenticator/WordPressAuthenticatorDisplayStrings.swift

@@ -54,6 +54,7 @@ public struct WordPressAuthenticatorDisplayStrings {
     public let signupTermsOfService: String
     public let whatIsWPComLinkTitle: String
     public let siteCreationButtonTitle: String
+    public let siteCreationGuideButtonTitle: String
 
 	/// Placeholder text for textfields.
 	///
@@ -109,7 +110,8 @@ public struct WordPressAuthenticatorDisplayStrings {
                 passwordPlaceholder: String = defaultStrings.passwordPlaceholder,
                 siteAddressPlaceholder: String = defaultStrings.siteAddressPlaceholder,
                 twoFactorCodePlaceholder: String = defaultStrings.twoFactorCodePlaceholder,
-                emailAddressPlaceholder: String = defaultStrings.emailAddressPlaceholder) {
+                emailAddressPlaceholder: String = defaultStrings.emailAddressPlaceholder,
+                siteCreationGuideButtonTitle: String = defaultStrings.siteCreationGuideButtonTitle) {
         self.emailLoginInstructions = emailLoginInstructions
         self.getStartedInstructions = getStartedInstructions
         self.jetpackLoginInstructions = jetpackLoginInstructions
@@ -155,6 +157,7 @@ public struct WordPressAuthenticatorDisplayStrings {
         self.siteAddressPlaceholder = siteAddressPlaceholder
         self.twoFactorCodePlaceholder = twoFactorCodePlaceholder
         self.emailAddressPlaceholder = emailAddressPlaceholder
+        self.siteCreationGuideButtonTitle = siteCreationGuideButtonTitle
     }
 }
 
@@ -245,7 +248,12 @@ public extension WordPressAuthenticatorDisplayStrings {
             twoFactorCodePlaceholder: NSLocalizedString("Authentication code",
                                                         comment: "Placeholder for the 2FA code textfield."),
             emailAddressPlaceholder: NSLocalizedString("Email address",
-                                                       comment: "Placeholder for the email address textfield.")
+                                                       comment: "Placeholder for the email address textfield."),
+            siteCreationGuideButtonTitle: NSLocalizedString(
+                "wordPressAuthenticatorDisplayStrings.default.siteCreationGuideButtonTitle",
+                value: "Starting a new site?",
+                comment: "Title for the link for site creation guide."
+            )
         )
     }
 }

WordPressAuthenticator/NUX/Button/NUXButton.swift

@@ -25,6 +25,25 @@ public struct NUXButtonStyle {
         self.highlighted = highlighted
         self.disabled = disabled
     }
+
+    public static var linkButtonStyle: NUXButtonStyle {
+        let backgroundColor = UIColor.clear
+        let buttonTitleColor = WordPressAuthenticator.shared.unifiedStyle?.textButtonColor ?? WordPressAuthenticator.shared.style.textButtonColor
+        let buttonHighlightColor = WordPressAuthenticator.shared.unifiedStyle?.textButtonHighlightColor ?? WordPressAuthenticator.shared.style.textButtonHighlightColor
+
+        let normalButtonStyle = ButtonStyle(backgroundColor: backgroundColor,
+                                            borderColor: backgroundColor,
+                                            titleColor: buttonTitleColor)
+        let highlightedButtonStyle = ButtonStyle(backgroundColor: backgroundColor,
+                                                 borderColor: backgroundColor,
+                                                 titleColor: buttonHighlightColor)
+        let disabledButtonStyle = ButtonStyle(backgroundColor: backgroundColor,
+                                              borderColor: backgroundColor,
+                                              titleColor: buttonTitleColor.withAlphaComponent(0.5))
+        return NUXButtonStyle(normal: normalButtonStyle,
+                              highlighted: highlightedButtonStyle,
+                              disabled: disabledButtonStyle)
+    }
 }
 /// A stylized button used by Login controllers. It also can display a `UIActivityIndicatorView`.
 @objc open class NUXButton: UIButton {

WordPressAuthenticator/Signin/LoginPrologueViewController.swift

@@ -45,7 +45,10 @@ class LoginPrologueViewController: LoginViewController {
     /// Return`true` to use new `NUXStackedButtonsViewController` instead of `NUXButtonViewController` to create buttons
     ///
     private var useStackedButtonsViewController: Bool {
-        configuration.enableWPComLoginOnlyInPrologue || configuration.enableSiteCreation
+        configuration.enableWPComLoginOnlyInPrologue ||
+        configuration.enableSiteCreation ||
+        configuration.enableSiteAddressLoginOnlyInPrologue ||
+        configuration.enableSiteCreationGuide
     }
 
     // MARK: - Lifecycle Methods
@@ -268,13 +271,22 @@ class LoginPrologueViewController: LoginViewController {
         let displayStrings = WordPressAuthenticator.shared.displayStrings
         let buttons: [StackedButton]
 
-        let continueWithWPButton = StackedButton(title: displayStrings.continueWithWPButtonTitle,
-                                                 isPrimary: true,
-                                                 configureBodyFontForTitle: true,
-                                                 accessibilityIdentifier: "Prologue Continue Button",
-                                                 style: primaryButtonStyle,
-                                                 onTap: loginTapCallback())
-        let enterYourSiteAddressButton: StackedButton = {
+        let continueWithWPButton: StackedButton? = {
+            guard !configuration.enableSiteAddressLoginOnlyInPrologue else {
+                return nil
+            }
+            return StackedButton(title: displayStrings.continueWithWPButtonTitle,
+                                 isPrimary: true,
+                                 configureBodyFontForTitle: true,
+                                 accessibilityIdentifier: "Prologue Continue Button",
+                                 style: primaryButtonStyle,
+                                 onTap: loginTapCallback())
+        }()
+
+        let enterYourSiteAddressButton: StackedButton? = {
+            guard !configuration.enableWPComLoginOnlyInPrologue else {
+                return nil
+            }
             let isPrimary = configuration.enableSiteAddressLoginOnlyInPrologue && !configuration.enableSiteCreation
             return StackedButton(title: displayStrings.enterYourSiteAddressButtonTitle,
                                  isPrimary: isPrimary,
@@ -283,7 +295,11 @@ class LoginPrologueViewController: LoginViewController {
                                  style: secondaryButtonStyle,
                                  onTap: siteAddressTapCallback())
         }()
-        let createSiteButton: StackedButton = {
+
+        let createSiteButton: StackedButton? = {
+            guard configuration.enableSiteCreation else {
+                return nil
+            }
             let isPrimary = configuration.enableSiteAddressLoginOnlyInPrologue
             return StackedButton(title: displayStrings.siteCreationButtonTitle,
                                  isPrimary: isPrimary,
@@ -293,25 +309,33 @@ class LoginPrologueViewController: LoginViewController {
                                  onTap: simplifiedLoginSiteCreationCallback())
         }()
 
-        if configuration.enableWPComLoginOnlyInPrologue && configuration.enableSiteCreation {
-            buttons = [continueWithWPButton,
-                       createSiteButton]
-        } else if configuration.enableWPComLoginOnlyInPrologue {
-            buttons = [continueWithWPButton]
-        } else if configuration.enableSiteAddressLoginOnlyInPrologue && configuration.enableSiteCreation {
-            buttons = [createSiteButton, enterYourSiteAddressButton]
-        } else if configuration.enableSiteAddressLoginOnlyInPrologue {
-            buttons = [enterYourSiteAddressButton]
-        } else if configuration.enableSiteCreation {
-            let createSiteButtonForBottomStackView = StackedButton(using: createSiteButton,
-                                                                   stackView: .bottom)
-            buttons = [continueWithWPButton,
-                       enterYourSiteAddressButton,
-                       createSiteButtonForBottomStackView]
-        } else {
-            WPAuthenticatorLogError("Failed to create `StackedButton`s in login prologue screen.")
-            buttons = []
-        }
+        let createSiteButtonForBottomStackView: StackedButton? = {
+            guard let createSiteButton else {
+                return nil
+            }
+            return StackedButton(using: createSiteButton, stackView: .bottom)
+        }()
+
+        let siteCreationGuideButton: StackedButton? = {
+            guard configuration.enableSiteCreationGuide else {
+                return nil
+            }
+            return StackedButton(title: displayStrings.siteCreationGuideButtonTitle,
+                                 isPrimary: false,
+                                 configureBodyFontForTitle: true,
+                                 accessibilityIdentifier: "Prologue Site Creation Guide button",
+                                 style: NUXButtonStyle.linkButtonStyle,
+                                 onTap: siteCreationGuideCallback())
+        }()
+
+        let showBothLoginOptions = continueWithWPButton != nil && enterYourSiteAddressButton != nil
+        buttons = [
+            continueWithWPButton,
+            !showBothLoginOptions ? createSiteButton : nil,
+            enterYourSiteAddressButton,
+            showBothLoginOptions ? createSiteButtonForBottomStackView : nil,
+            siteCreationGuideButton
+        ].compactMap { $0 }
 
         let showDivider = configuration.enableWPComLoginOnlyInPrologue == false &&
             configuration.enableSiteCreation == true &&
@@ -345,6 +369,14 @@ class LoginPrologueViewController: LoginViewController {
         }
     }
 
+    private func siteCreationGuideCallback() -> NUXButtonViewController.CallBackType {
+        { [weak self] in
+            guard let self, let navigationController else { return }
+            // triggers the delegate to ask the host app to handle site creation guide
+            WordPressAuthenticator.shared.delegate?.showSiteCreationGuide(in: navigationController)
+        }
+    }
+
     private func showCancelIfNeccessary(_ buttonViewController: NUXButtonViewController) {
         if showCancel {
             let cancelTitle = NSLocalizedString("Cancel", comment: "Button title. Tapping it cancels the login flow.")