Unified Login: No WPcom found error screen

[AmandaRiu]

Closes #2815. During the WordPress.com login flow, if the user enters an email address that is not associated with a WPcom account, then this new error screen is shown:

Before	After (light)	After (dark)

Tracks events

The following Flow, Step and Click tracks events were added:

• Step: no_wpcom_account_found - tracked as soon as this screen is shown
• Click: help_finding_connected_email - when clicking on the link to get help finding connected email
• Click: try_another_account - when clicking try another account
• Click: login_with_site_address - when clicking the option to login with site address

Track event samples:

Tracked: unified_login_step, Properties: {"source":"default","flow":"google_login","step":"no_wpcom_account_found"}
Tracked: unified_login_interaction, Properties: {"source":"default","flow":"google_login","step":"no_wpcom_account_found","click":"help_finding_connected_email"}
Tracked: unified_login_interaction, Properties: {"source":"default","flow":"login_site_address","step":"no_wpcom_account_found","click":"try_another_account"}
Tracked: unified_login_interaction, Properties: {"source":"default","flow":"google_login","step":"no_wpcom_account_found","click":"login_with_site_address"}

To Test

1. Launch the app to login
2. Click on Continue with WordPress.com
3. Enter an email address not associated with a WordPress.com account - verify new error screen is displayed
4. Click each button on screen to verify action and track event.

Update release notes:

• I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

[peril-woocommerce]

	Warnings
⚠️	PR has more than 500 lines of code changing. Consider splitting into smaller PRs if possible.

Messages

📖

This PR contains changes in the subtree libs/login/. It is your responsibility to ensure these changes are merged back into wordpress-mobile/WordPress-Login-Flow-Android. Follow these handy steps! WARNING: Make sure your git version is 2.19.x or lower - there is currently a bug in later versions that will corrupt the subtree history! cd woocommerce-android git checkout issue/2815-ul-wrong-wp git subtree push --prefix=libs/login/ https://github.com/wordpress-mobile/WordPress-Login-Flow-Android.git merge/woocommerce-android/2943 Browse to https://github.com/wordpress-mobile/WordPress-Login-Flow-Android/pull/new/merge/woocommerce-android/2943 and open a new PR.

Generated by 🚫 dangerJS

[peril-woocommerce]

You can test the changes on this Pull Request by downloading the APK here.

[AmandaRiu]

@Garance91540 This requires a design review:

• Since this error screen happens after entering an email address, I changed the error message to “It looks like isn’t associated with a WordPress.com account”. Please let me know if this is okay.
• The image asset had some errors when I tried to import it into Android Studio so the "WordPress" logo is missing. The error was The stroke-dasharray attribute is not supported. Maybe you can tweak the asset? Please let me know how to proceed.
• I also need a dark version of this image asset.

Many thanks!!

[Garance91540]

Hi Amanda! Everythink looks good, except I notice some fonts seem to not be right (we can tackle this in a separate PR):

• CTAs: https://d.pr/i/aRDLGM

The font for these should be: Roboto Medium 14

• "Need help finding the connected email?" should be Body 1 https://d.pr/i/kGG64z

Thanks!

[AmandaRiu]

Updated with recommendations from @Garance91540 and updated screenshots. This one is ready for review 👍

[nbradbury]

@AmandaRiu If I enter a non-WP email address and choose "Log in with another account" from the No WPcom found error screen, after I return to the prologue screen tapping "Continue with WordPress.com" does nothing.

Also, unrelated but wanted to mention it: there's no ripple on the "Continue with WordPress.com" button.

[AmandaRiu]

@nbradbury Great catches! Fixed and ready for another round!

[nbradbury]

Nice work!

[Garance91540]

Hi @AmandaRiu , you mentioned you updated the screenshots but I'm not sure? The buttons fonts needs to be Roboto Medium 14 https://d.pr/i/aRDLGM