Unified Login: Jetpack not connected error screens

[AmandaRiu]

Closes #2657 by implementing new designs and button options on the "Jetpack not connected" screen:

Light	Dark

To Test

1. Tap Enter your store address
2. Enter a store address where Jetpack is either not installed or not active/connected.
3. Verify the Jetpack Required screen is displayed (see screenshot above)
4. Verify store address populates in the message.
5. Click What is Jetpack and verify the "What is jetpack" dialog appears. Close dialog.
6. Tap Learn how to install and connect Jetpack and verify help page loaded successfully
7. Tap to go back to Jetpack required screen.
8. Tap Log in with another account - verify routed back to the login prologue screen

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]

	Fails
🚫	Danger failed to run /app/danger-0.rtnc0skjx9m.ts.
🚫	Danger failed to run /app/danger-0.rf3xznzpvx.ts.

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/2657-woo-screens git subtree push --prefix=libs/login/ https://github.com/wordpress-mobile/WordPress-Login-Flow-Android.git merge/woocommerce-android/2816 Browse to https://github.com/wordpress-mobile/WordPress-Login-Flow-Android/pull/new/merge/woocommerce-android/2816 and open a new PR.

Error TypeError

Cannot read property 'added' of null
TypeError: Cannot read property 'added' of null
    at Object.exports.default (/app/danger-0.rtnc0skjx9m.ts:16:44)
    at process._tickCallback (internal/process/next_tick.js:68:7)

Dangerfile

11|         warn("The PlayStoreStrings.po file must be updated any time changes are made to release notes");
12|     }
13| 
14|     // If changes were made to the strings, make sure they follow our guidelines
15|     const modifiedStrings = modifiedFiles.filter((path: string) => path.endsWith('values/strings.xml'))
----------------------------------------------^
16| 
17|     for (let file of modifiedStrings) {        
18|         const stringDiffs = await danger.git.diffForFile(file)
19| 

Error TypeError

Cannot read property 'diff' of null
TypeError: Cannot read property 'diff' of null
    at checkCommitDiffs (/app/danger-0.rf3xznzpvx.ts:43:49)
    at process._tickCallback (internal/process/next_tick.js:68:7)

Dangerfile

38|         if (git === undefined) {
39|             console.log("About to crash due to an error")
40|             console.log("File:", thisFile)
41|             console.log("Danger Object: ", danger)
42| 
---------------------------------------------------^
43|             if (danger !== undefined) {
44|                 console.log("Danger is no longer defined")
45|             }
46|             else {

Generated by 🚫 dangerJS

[peril-woocommerce]

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

[ThomazFB]

Hey @AmandaRiu, awesome work here! The code is looking good, functionality, UI and Dark Mode looks just fine too! I've just noticed one problem with the Jetpack required screen:

When using in the landscape mode, the main text goes to the limits of the screen and seen to not follow the same margin of the back arrow and the bottom buttons.

Also, just to confirm, I've noticed that the center image and the image for the What is Jetpack? Dialog doesn't appear in landscape mode, I suppose this is intentional for best UI fit?

[AmandaRiu]

@ThomazFB Thanks for the review and awesome catch! I've fixed this issue in 8b6ed10

Also, just to confirm, I've noticed that the center image and the image for the What is Jetpack? Dialog doesn't appear in landscape mode, I suppose this is intentional for best UI fit?

Yup, the images are purposely left out in landscape view. 👍

Ready for another round!

[loremattei]

Hi there! I'm moving this to 5.1 because 5.0 has been cut. If you want this to make it to 5.0, please feel free to ping me.

[ThomazFB]

Hey @AmandaRiu, thanks for that change! Everything is working just fine now! LGTM