Themes Showcase: Display the page for the user without any site

[arthur791004]

Related to #82839

Proposed Changes

• Enable enableNoSites to allow the Theme Showcase to display the content for the user without any site
• Create the renderThemes function to determine which layout we should render - LoggedOut vs. LoggedIn
• Support rendering the logged-in Theme Showcase without the site ID as the user might not have any site now
• Go to the signup flow when the user picks the theme without any site
• Go to the signup flow with the preselected plan when the user clicks the Upsell banner without any site

Theme Showcase	Theme Details Page

Testing Instructions

Logged-in Theme Showcase for the user without any site

• Go to /themes
• Ensure you can see the theme list UI
• Click ... on any site, and you will see the options below
  
• Select any theme to ensure you can see the theme details page
  • Ensure the action buttons on the theme details page are followed
    
  • If you select the premium theme, ensure the upsell banner brings you to the sign up flow with the premium theme

Logged-in Theme Showcase for the user with sites

• Go to /themes
• Ensure you can see the site selection UI
• Select any site
• Ensure you can see the theme list

Logged-in Theme Showcase for the user with the specific site

• Go to /themes/<your_site>
• Ensure everything works as expected

Logged-out Theme Showcase

• Go to /themes
• Ensure everything works as expected

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• https://wpcalypso.wordpress.com/devdocs/docs/testing/index.md for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-ajp-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-84929

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-84929&env=jetpack

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~10 bytes removed 📉 [gzipped])

name                   parsed_size           gzip_size
entry-stepper               -125 B  (-0.0%)      -10 B  (-0.0%)
entry-main                  -125 B  (-0.0%)      -10 B  (-0.0%)
entry-subscriptions          +57 B  (+0.0%)      +19 B  (+0.0%)
entry-login                  +57 B  (+0.0%)      +19 B  (+0.0%)
entry-domains-landing        +57 B  (+0.0%)      +19 B  (+0.0%)
entry-browsehappy            +57 B  (+0.0%)      +19 B  (+0.1%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~4763 bytes added 📈 [gzipped])

name                               parsed_size           gzip_size
themes                                 -7730 B  (-0.8%)    -2440 B  (-0.8%)
woocommerce-installation                +317 B  (+0.1%)      +79 B  (+0.1%)
woocommerce                             +317 B  (+0.1%)      +79 B  (+0.1%)
subscribers                             +317 B  (+0.1%)      +79 B  (+0.0%)
stats                                   +317 B  (+0.0%)      +79 B  (+0.0%)
site-purchases                          +317 B  (+0.0%)      +79 B  (+0.0%)
site-monitoring                         +317 B  (+0.1%)      +79 B  (+0.1%)
settings-writing                        +317 B  (+0.1%)      +79 B  (+0.1%)
settings-security                       +317 B  (+0.1%)      +79 B  (+0.1%)
settings-reading                        +317 B  (+0.1%)      +79 B  (+0.1%)
settings-podcast                        +317 B  (+0.1%)      +79 B  (+0.1%)
settings-performance                    +317 B  (+0.1%)      +79 B  (+0.1%)
settings-newsletter                     +317 B  (+0.1%)      +79 B  (+0.1%)
settings-jetpack                        +317 B  (+0.1%)      +79 B  (+0.1%)
settings-discussion                     +317 B  (+0.1%)      +79 B  (+0.1%)
settings                                +317 B  (+0.0%)      +79 B  (+0.0%)
scan                                    +317 B  (+0.0%)      +79 B  (+0.0%)
purchases                               +317 B  (+0.0%)      +79 B  (+0.0%)
promote-post-i2                         +317 B  (+0.1%)      +79 B  (+0.1%)
preview                                 +317 B  (+0.1%)      +79 B  (+0.1%)
posts-custom                            +317 B  (+0.1%)      +79 B  (+0.0%)
posts                                   +317 B  (+0.1%)      +79 B  (+0.0%)
plans                                   +317 B  (+0.0%)      +79 B  (+0.0%)
people                                  +317 B  (+0.1%)      +79 B  (+0.0%)
pages                                   +317 B  (+0.1%)      +79 B  (+0.1%)
migrate                                 +317 B  (+0.1%)      +79 B  (+0.1%)
media                                   +317 B  (+0.0%)      +79 B  (+0.0%)
marketplace                             +317 B  (+0.0%)      +79 B  (+0.0%)
marketing                               +317 B  (+0.0%)      +79 B  (+0.0%)
jetpack-social                          +317 B  (+0.1%)      +79 B  (+0.1%)
jetpack-search                          +317 B  (+0.1%)      +79 B  (+0.1%)
jetpack-connect                         +317 B  (+0.0%)      +79 B  (+0.0%)
jetpack-cloud-settings                  +317 B  (+0.1%)      +79 B  (+0.1%)
jetpack-cloud-pricing                   +317 B  (+0.0%)      +79 B  (+0.0%)
jetpack-cloud-plugin-management         +317 B  (+0.0%)      +79 B  (+0.0%)
jetpack-cloud-features-comparison       +317 B  (+0.1%)      +79 B  (+0.0%)
jetpack-cloud                           +317 B  (+0.2%)      +79 B  (+0.1%)
import                                  +317 B  (+0.1%)      +79 B  (+0.1%)
hosting                                 +317 B  (+0.0%)      +79 B  (+0.0%)
home                                    +317 B  (+0.0%)      +79 B  (+0.0%)
gutenberg-editor                        +317 B  (+0.1%)      +79 B  (+0.1%)
google-my-business                      +317 B  (+0.1%)      +79 B  (+0.1%)
export                                  +317 B  (+0.1%)      +79 B  (+0.1%)
email                                   +317 B  (+0.0%)      +79 B  (+0.0%)
earn                                    +317 B  (+0.1%)      +79 B  (+0.1%)
domains                                 +317 B  (+0.0%)      +79 B  (+0.0%)
customize                               +317 B  (+0.1%)      +79 B  (+0.1%)
concierge                               +317 B  (+0.1%)      +79 B  (+0.1%)
comments                                +317 B  (+0.0%)      +79 B  (+0.0%)
checkout                                +317 B  (+0.0%)      +79 B  (+0.0%)
backup                                  +317 B  (+0.0%)      +79 B  (+0.0%)
add-ons                                 +317 B  (+0.1%)      +79 B  (+0.1%)
activity                                +317 B  (+0.0%)      +79 B  (+0.0%)
theme                                   +223 B  (+0.0%)      +49 B  (+0.0%)
plugins                                 +140 B  (+0.0%)     -553 B  (-0.1%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~2665 bytes added 📈 [gzipped])

name                                        parsed_size           gzip_size
async-load-calypso-blocks-upload-drop-zone      +8358 B    (new)    +2647 B    (new)
async-load-signup-steps-domains                   -69 B  (-0.0%)      +18 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[taipeicoder]

@arthur791004 could you check if the no results screen throws an JS error? Try something like /themes/all?s=testtesttest.

[taipeicoder]

The Assembler CTA also didn't work for me:

Is it possible to link users to /start/with-theme-assembler/user?ref=calypshowcase instead?

[arthur791004]

could you check if the no results screen throws an JS error? Try something like /themes/all?s=testtesttest.
The Assembler CTA also didn't work for me:

@taipeicoder Nice catch! I've addressed the above issues, thanks 👍

[fushar]

@arthur791004: I found one issue with premium flow. Steps:

1. Open the live branch with a user with no site.
2. Open /themes.
3. Select Enroute.
4. Go through domain step.
5. On the plan step, click start with another theme.
   • Expected: we go to the Design Picker
   • Actual: nothing happens.

[arthur791004]

I found one issue with premium flow. Steps:

@fushar I cannot reproduce the issue. When I clicked start with another theme, the new site was created, and the page went to the Design Picker. I've rebased onto the latest trunk and maybe the issue is resolved 🤔

[fushar]

@fushar I cannot reproduce the issue. When I clicked start with another theme, the new site was created, and the page went to the Design Picker. I've rebased onto the latest trunk and maybe the issue is resolved 🤔

Okay, that's weird, I checked it again and can't reproduce it, too. Maybe because it's somehow "fixed" on latest trunk 🤔
I'll continue testing this!

[fushar]

Tested the following:

✅ Logged-in, no site
✅ Logged-in, with sites
✅ Atomic
✅ Jetpack-connected
✅ Logged-out

All work. Nice 👍

[fushar]

@fushar I cannot reproduce the issue. When I clicked start with another theme, the new site was created, and the page went to the Design Picker. I've rebased onto the latest trunk and maybe the issue is resolved 🤔

Sorry, @arthur791004, after further investigation, it's my Chrome's fault 🤦 I somehow got hit with this bug. After doing the workaround in the forum, it's fixed 🤦

It's all good now!!