Show magic link login option as a secondary CTA instead of a table view row under a configuration

[jaclync]

Iteration 2 for woocommerce/woocommerce-ios#7437

Description

For Iteration 2 of the Magic Link Emphasis experiment in WCiOS, we want to emphasize the magic link login option more on the password screen by moving the pre-existing table view cell to a new secondary CTA at the bottom (design at hHmVq03kKpvTDzV3uV4wqw-fi-14%3A2092).

The struggles I ran into were mostly on how the existing "Continue" CTA is implemented in the password screen. In a previous screen I worked on, the "Continue" CTA was implemented as a NUXButtonViewController configured in the storyboard. However, the password screen uses a different approach by just having a NUXButton in its Password.storyboard at the bottom of the view. Eventually, I implemented the optional secondary CTA under the "Continue" CTA by adding a UIStackViewto the bottom of the view. The "Continue" CTA is now in the stack view along with a new secondary NUXButton below. This secondary CTA is hidden if the new configuration isWPComMagicLinkShownAsSecondaryActionOnPasswordScreen is false to maintain the pre-existing UX.

In order to reuse the magic link async request logic better, I also extracted the async logic to a new struct MagicLinkRequester which is used in both PasswordCoordinator and PasswordViewController. It makes the UI updates in PasswordViewController more clear, since we're disabling the CTAs when requesting a magic link async and then enabling them afterward. There were also updates on the accessibility elements and the string/accessibility constants.

Analytics

The flow event property is set to login_password_magic_link_emphasis instead of login_password when the configuration is enabled.

Testing instructions

Accounts eligible for magic links

• Launch the app
• Log out if needed, and skip onboarding if needed
• Tap "Continue With WordPress.com"
• Enter a valid non-A8C WP.com email and tap "Continue" --> after a little bit (requesting magic link), a new magic link requested screen should be shown with two CTAs at the bottom
• Tap on "Use password to sign in" --> the password screen should be shown, and a "Or log in with magic link" CTA should be shown below the Continue CTA at the bottom. in the console, an event should be logged 🔵 Tracked unified_login_step, properties: [AnyHashable("step"): "start", AnyHashable("flow"): "login_password_magic_link_emphasis", AnyHashable("source"): "default"]
• Tap "Or log in with magic link" CTA --> the critical CTAs should be disabled while a magic link is requested (again)
• Continue with the password flow or tap on the magic link in the email to log in to the app

Accounts not eligible for magic links (e.g. A8C email)

• Launch the app
• Log out if needed, and skip onboarding if needed
• Tap "Continue With WordPress.com"
• Enter an A8C WP.com email and tap "Continue" --> after a little bit (requesting magic link), the password screen should be shown, and a "Or log in with magic link" CTA should be shown below the Continue CTA at the bottom. in the console, an event should be logged 🔵 Tracked unified_login_step, properties: [AnyHashable("step"): "start", AnyHashable("flow"): "login_password", AnyHashable("source"): "default"]
• Tap "Or log in with magic link" CTA --> the critical CTAs should be disabled while a magic link is requested, and an error alert should be shown
• Dismiss the alert --> the CTAs should be enabled again

Confidence check when the configuration is disabled

• @jaclync tested this case

Screenshots

\	light	dark
after
before

[itsmeichigo]

The changes look good to me! One minor thing though - when I tap the "Log in with magic link" button, the "Continue" button is displayed as loading instead of the other button. Should this be the other way around?

[jaclync]

The changes look good to me! One minor thing though - when I tap the "Log in with magic link" button, the "Continue" button is displayed as loading instead of the other button. Should this be the other way around?

Nice catch on this! I updated the waiting state in
68a8748

[jaclync]

Updated the PR for another look @itsmeichigo!

[itsmeichigo]

Thanks for the update!