[Home Page Picker] Enable Home Page Picker feature

[chipsnyder]

Fixes wordpress-mobile/gutenberg-mobile#2727

To test:

This enables the Home Page Picker for the enhanced site design selection. The old flow can still be tested for comparison reasons by toggling the feature off.

To disable or enable the development version of Home Page Picker

• Open the app from the build that allows FeatureFlags such as a PR build or a local development build
  • By default, the modal layout picker will be disabled.
  • From the site page:
    • Click on your Gravatar.
    • Click on App Settings.
    • Click on Debug.
    • Toggle "Site Creation: Home Page Picker" to enable or disable the picker
    • 

To Test

From a clean install:

1. Log in
2. Navigate to the Create WordPress.com site
   • My Sites > ➕ > Create WordPress.com site
3. Expect To be presented with the Choose a design screen instead of the site Segment selection

Full Feature Testing:

Create a Site - Selecting a design

Steps

1. Navigate to the Create WordPress.com site
   • My Sites > ➕ > Create WordPress.com site
2. Expect
   • To see the analytics event enhanced_site_creation_site_design_viewed
   • To see a single placeholder while the network request to fetch the available design is processing
     • 📓 You may not see this if you're on a fast network
   • To see placeholders populate for each site design
   • To see thumbnail images load as their network request finishes
3. Scroll to the bottom of the list
4. Expect
   • To see the header collapse as you scroll down
   • To see placeholders for thumbnails that weren't on the screen during the initial load.
     • 📓 You may not see the thumbnail placeholders if you're on a fast network and if they were cached on the server
5. Scroll to the top of the list
6. Expect
   • To see the header expand as you reach the top
   • Thumbnails should not be fetched from the server again unless your device purged the cache (low memory devices)
7. Select a layout
8. Expect
   • To see the footer slide in from the bottom
   • To see a border and checkmark animate in place on the selected design.
9. Select Choose
10. Expect
    • To see the analytics event enhanced_site_creation_site_design_selected with the property template populated with the selected layout's slug
11. Search for a domain
    • Selecting Cassel or Bowen should include .blog subdomains all others (at the time of writing this) should not.
12. Select a Domain
13. Select Create Site
14. Expect
    • To see a temporary screen as the site is being created
    • To see the site confirmation screen.

Create a Site - Skip button

Steps

1. Navigate to the Create WordPress.com site
   • My Sites > ➕ > Create WordPress.com site
2. Expect
   • To see the analytics event enhanced_site_creation_site_design_viewed
   • To see a single placeholder while the network request to fetch the available design is processing
     • 📓 You may not see this if you're on a fast network
   • To see placeholders populate for each site design
   • To see thumbnail images load as their network request finishes
3. Select Skip in the top right-hand corner
4. Scroll to the top of the list
5. Expect
   • To see the analytics event enhanced_site_creation_site_design_skipped
6. Search for a domain
   • This should not include .blog subdomains
7. Select a Domain
8. Select Create Site
9. Expect
   • To see a temporary screen as the site is being created
   • To see the site confirmation screen.
   • This should create a site based on the default layout

Preview then Create a Site

Steps

1. Preform Create a Site - Selecting a design 1-8
2. Select Preview
3. Expect
   • A new modal to appear stacked on top of the current one
   • A progress bar should appear and begin progressing
   • To see the event enhanced_site_creation_site_design_preview_viewed fire with the parameter template populated with the selected design's slug
   • To see the event enhanced_site_creation_site_design_preview_loading
   • To see the event enhanced_site_creation_site_design_preview_loaded
     • If there is a network error: Expect to see the event enhanced_site_creation_error_shown fire with the parameter error_info with a description of the error
   • On a successful load the preview should be populated with a demo site
     • If there is a network error: you should see the error screen but should be able to tap "Choose" still
4. Select Choose
5. Expect to see the preview modal dismiss and for the Choose a Domain screen to be "pushed" on to the navigation flow.
6. Continue Create a Site - Selecting a design at step 10 Expect ...

Error Scenario

Steps

1. Using an account that is logged in
2. Disconnect your device from a network connection
3. Navigate to the Create WordPress.com site
   • My Sites > ➕ > Create WordPress.com site
4. Expect
   • To see the analytics event enhanced_site_creation_error_shown with error_info populated with a description of the error that occurred.
   • To see the error screen in the screenshots below
5. Repair your network connection
6. Either:
   • Tap Retry and expect to be able to complete Create a Site - Selecting a design
   • Tap Skip and expect to be able to complete Create a Site - Skip button

Screenshots:

Choose a design

Expanded	Collapsed	Selected	Network Error

Preview

Choose a Domain

Expanded	No Options	Results	Selected	Network Error

Additional Context:

This is a continuation of the work done in the Home Page Picker Project.

PR submission checklist:

• I have considered adding unit tests where possible.
• I have considered adding accessibility improvements for my changes.
• I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

[peril-wordpress-mobile]

You can test the changes on this Pull Request by downloading it from AppCenter here with build number: 38292. IPA is available here. If you need access to this, you can ask a maintainer to add you.

[peril-wordpress-mobile]

You can trigger optional UI/connected tests for these changes by visiting CircleCI here.

[antonis]

LGTM @chip 🎉

[mkevins]

I've re-tested all the flows described, and everything is working as expected. I've also verified the events in the debugger and in the live view, and all events are emitted correctly.

Two issues I observed are described here: wordpress-mobile/WordPress-Android#13409 (comment) which were also present in the iOS app.

Nice work Chip! 👍

[chipsnyder]

Two issues I observed are described here: wordpress-mobile/WordPress-Android#13409 (comment) which were also present in the iOS app.

Thanks for testing and confirming @mkevins. I agree with what @antonis' analysis, this is probably something we can help triage to fix on the backend. I'll do some more investigating as well on the iOS side.

[chipsnyder]

@kyleaparker @SylvesterWilmott @iamthomasbishop I merged the other changes as mentioned in #15324 (comment) and updated this branch with those changes. That way we can start a call for testing and you have a more comprehensive build to look at.

Build 38175 just finished so when you get a chance to take a look and if you have any final feedback let me know and I'll start working on it :)

[chipsnyder]

Running through some test cases on different devices this is a running list of issues I'm encountering. I'll branch these off into fixes soon:
(all devices are simulators unless noted)

---

(Edit) The following issue(s) are being addressed in #15360

Choose a Domain screen - Header unexpectantly expands when search results change

Noticed on:

• iPad Air 11.4

Steps

1. Navigate to Choose a Domain
2. Search for results

Notice the header will sometimes expand

[kyleaparker]

Thanks for the ping @chipsnyder! This is looking really great 🎉 I have reviewed the build and have a couple of comments:

• On a slow connection the homepage images load in one by one. Do we have a skeleton loading state we can use to fade the images in once they're available? I think this would help the loading state feel a bit smoother.
• I'd mentioned this in a previous PR but I think it would be useful to add the Skip option to the domains screen
• On the Choose a Domain screen, the "Search Domains" placeholder text looks too small, what size are we using for that?
• I think we should change the wording of the sub-text on the Choose a Design screen from "Pick your favorite homepage layout. You can customize or change it later." to "Pick your favorite homepage layout. You can edit and customize it later." At least until we know which approach we are going to take on switching homepage layouts. cc @iamthomasbishop I'd like to hear your thoughts on changing the wording here.

[chipsnyder]

Thank you, @kyleaparker, for your review 😃

On a slow connection the homepage images load in one by one. Do we have a skeleton loading state we can use to fade the images in once they're available? I think this would help the loading state feel a bit smoother.

I see what you mean. Having a more uniform loading might help make the experience more smooth. I came up with a few scenarios while thinking about this that I fear might lead to worse overall behavior and add complexity. Let me know your thoughts on it. If you feel like there is enough value to smoothing out that load then we can continue to investigate and I'll create a GH issue to track that work.

• During development, we saw some issues with the server where an image would fail to generate. We would want to decide how we want to handle this and how long we'd want to "hold up" the other images from displaying while waiting for one that's lagging behind. In some cases, we saw the image take upwards of 10 seconds to generate from the time the request began. (1). I'm worried this introduces a risk of completely breaking the feature if a server error happens, or make the feature seem overly sluggish.
• We also want to think about how many images we want to try and download at a time. If we attempt to download all of them we could overwhelm the device's ability to process all of the requests. This could end up in the images being downloaded even slower and cause the user to sit and wait patiently which I fear might be frustrating. By batching the requests we could end up in a situation where if the total is separated into three batches then it could be upwards of 30 secs before the user sees anything. (2)
• One way we might be able to achieve this goal is to throttle the updates so that you only see images load in every # seconds. So if we say you see an update every 2 seconds then that might help. On iOS, the containers that display the design thumbnails are reused so we would want to consider conditions where an image downloaded but then the image scrolled off-screen and changed to a different design. I think this adds enough complexity where I would be hesitant to include it here.

(1) Once the image is generated we cache it and it's available so only a very small number of users will ever experience this lag for an image. Hopefully, this lag will be mostly internal team members as were testing and verifying a new site design.
(2) The way the code works today is we ask for the images that are on the screen and display them once they load there currently isn't a relationship from one to the other to throttle the updates. If a layout is scrolled offscreen then we stop waiting and will try and load the next set.

I'd mentioned this in a previous PR but I think it would be useful to add the Skip option to the domains screen

I think we still need more research before we charge forward with this. I went ahead and created an issue to track this though and added my initial research. wordpress-mobile/gutenberg-mobile#2828

We were able to get some of the V2 items work for the code cut off but I feel like this is something that won't make it until next release. Let me know if you feel like it's a higher priority though.

On the Choose a Domain screen, the "Search Domains" placeholder text looks too small, what size are we using for that?

I reused the same search control from the other flow for this which had it set to a style defined in the style guide as the default search bar text attributes. Which seems to translate to the system's preferred size of footnote so if have the default accessibility font size set this would translate to 13 points.

Searching through the code this looks like this is used for other search bars as well so let me know if you'd like to see some other options and explore making this a one-off case I'm happy to take some screenshots of some other cases. If I get time today I'll come back through and post those in another comment.

I think we should change the wording of the sub-text on the Choose a Design screen from ...

Given our other discussions, I think think this is a good idea. I'll go ahead and make this change in the bug fix branch.

[kyleaparker]

I see what you mean. Having a more uniform loading might help make the experience more smooth. I came up with a few scenarios while thinking about this that I fear might lead to worse overall behavior and add complexity. Let me know your thoughts on it. If you feel like there is enough value to smoothing out that load then we can continue to investigate and I'll create a GH issue to track that work.

Ahh yes I see how this could cause more potential problems. I think this is another one we can leave as is for V1 and possibly investigate other options for V2.

I think we still need more research before we charge forward with this. I went ahead and created an issue to track this though and added my initial research. wordpress-mobile/gutenberg-mobile#2828

Sounds good, I don't think there is any rush on this so investigating it during V2 works for me

Searching through the code this looks like this is used for other search bars as well so let me know if you'd like to see some other options and explore making this a one-off case I'm happy to take some screenshots of some other cases. If I get time today I'll come back through and post those in another comment.

It seems small to me, but if we are using it throughout the app let's keep it as is for now

Given our other discussions, I think think this is a good idea. I'll go ahead and make this change in the bug fix branch.

Thank you!

[Tug]

LGTM 👍