Update/videopress onboarding v2 site creation #68196

thedebian · 2022-09-23T09:56:40Z

Proposed Changes

This PR creates a new site at the end of the VideoPress onboarding flow and adds the selected domain to the cart.

Testing Instructions

Apply this PR
Go to http://calypso.localhost:3000/setup/intro?flow=videopress
Complete the steps until domain selection
Select a domain name
Select a plan
✅ You should be redirected to the checkout page
✅ You should see the selected domain in your cart (if not a .wordpress.com free subdomain)
✅ Your site should be created and ready to go, whether your complete checkout or not

Fixes Automattic/greenhouse#1337

matticbot · 2022-09-23T09:57:34Z

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

App Entrypoints (~50199 bytes added 📈 [gzipped])

name                   parsed_size           gzip_size
entry-stepper            +203209 B  (+5.3%)   +53861 B  (+5.2%)
entry-gutenboarding        +4150 B  (+0.2%)    +1120 B  (+0.2%)
entry-main                 +1209 B  (+0.1%)     +132 B  (+0.0%)
entry-domains-landing       +673 B  (+0.1%)     +137 B  (+0.1%)
entry-browsehappy           +673 B  (+0.7%)     +137 B  (+0.5%)
entry-login                 +565 B  (+0.1%)      +97 B  (+0.0%)

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

Sections (~18603 bytes removed 📉 [gzipped])

name                   parsed_size           gzip_size
signup                      +990 B  (+0.3%)      -62 B  (-0.1%)
accept-invite               +855 B  (+0.2%)     -199 B  (-0.2%)
jetpack-connect             +845 B  (+0.1%)     -313 B  (-0.1%)
domains                     +416 B  (+0.0%)    +1594 B  (+0.4%)
plans                       +303 B  (+0.0%)    +1408 B  (+0.5%)
jetpack-cloud-pricing       -256 B  (-0.0%)     -794 B  (-0.5%)
backup                      +157 B  (+0.0%)    +1212 B  (+0.5%)
site-purchases              +136 B  (+0.0%)     +963 B  (+0.3%)
purchases                   +136 B  (+0.0%)     +963 B  (+0.2%)
gutenberg-editor             -48 B  (-0.0%)     +105 B  (+0.1%)
settings-discussion          -39 B  (-0.0%)      +14 B  (+0.0%)
themes                       -26 B  (-0.0%)      -18 B  (-0.0%)
checkout                     -20 B  (-0.0%)      -36 B  (-0.0%)

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 (~2498 bytes added 📈 [gzipped])

name                                              parsed_size           gzip_size
async-load-signup-steps-domains                        +819 B  (+0.2%)    +1278 B  (+1.1%)
async-load-masterbar-cart-masterbar-cart-wrapper       -196 B  (-0.1%)     -707 B  (-1.4%)
async-load-calypso-layout-masterbar-checkout-tsx       -196 B  (-0.2%)     -819 B  (-2.6%)
async-load-calypso-layout-masterbar-checkout           -196 B  (-0.4%)     -772 B  (-4.4%)
async-load-signup-steps-plans                           +47 B  (+0.0%)      -50 B  (-0.1%)
async-load-calypso-blocks-editor-checkout-modal         -47 B  (-0.0%)      +44 B  (+0.0%)
async-load-calypso-blocks-app-banner                    +43 B  (+0.0%)      +80 B  (+0.1%)
async-load-signup-steps-plans-atomic-store              +13 B  (+0.0%)       +7 B  (+0.0%)
async-load-calypso-my-sites-checkout-modal              +13 B  (+0.0%)      +57 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.

matticbot · 2022-09-23T10:02:34Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

…boarding-v2-site-creation

roundhill

Hmm, I created a new account and when selecting the Premium plan nothing happens and I get this in the console:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'username')
    at t (entry-stepper.8033f3925f4032e7b8f8.min.js:1:339760)
    at onClick (92781.6bc400f26c19d9db929b.min.js:2:104817)
    at Object.Be (16909.96e4aece4080cfdca51a.min.js:2:124462)
    at Qe (16909.96e4aece4080cfdca51a.min.js:2:124616)
    at 16909.96e4aece4080cfdca51a.min.js:2:142819
    at Or (16909.96e4aece4080cfdca51a.min.js:2:142913)
    at Pr (16909.96e4aece4080cfdca51a.min.js:2:143327)
    at 16909.96e4aece4080cfdca51a.min.js:2:148975
    at Ue (16909.96e4aece4080cfdca51a.min.js:2:224336)
    at 16909.96e4aece4080cfdca51a.min.js:2:144786

roundhill

I had some strange issue locally that resolved itself. Tested well.

* Mobile layout for choose a plan * Trying to do stuff with things, but it's not working, WIP * One more step: got it to the checkout page. * Cleanup * Cleanup * Less parameters = more fun * Add domain to cart Co-authored-by: Panos Kountanis <panosktn@gmail.com>

* Create VideoPress Onboarding v2 stepper structure. (#67454) * VideoPress site options step (WIP) (#67501) * VideoPress site options step (WIP) * Submit options step * VideoPress Onboarding v2: Account Step (#67552) * VideoPress Onboarding v2: Create account. * Adjust the flow steps slightly and remove nonexistent ones. * Videopress onboarding v2: domain selection (#67596) * Submit options step * VideoPress onboarding, domain selection step * Choose a domain styling * Add video, studio, productions, com as suggested tlds * Videopress onboarding: plan selection (#67643) * Submit options step * VideoPress onboarding, domain selection step * Choose a domain styling * Add video, studio, productions, com as suggested tlds * VideoPress site options step (WIP) * Submit options step * VideoPress onboarding: select a plan (WIP) * Update how we store site title, description and domain by using onboarding store * VideoPress onboarding: choose a plan step * Add translation for choose a domain step * Rebase * Videopress onboarding v2 global style (#67736) * VideoPress onboarding theme * VideoPress powered logo * Update flow progress and fix svg properties in videopress logo * VideoPress Onboarding v2: Site options refined (#67790) * Update flow progress and fix svg properties in videopress logo * Site options refined * Populate existing site title and description in site options onboarding * VideoPress onboarding v2 : choose a domain step refined (#67857) * VideoPress onboarding theme * VideoPress powered logo * Update flow progress and fix svg properties in videopress logo * Site options refined * Populate existing site title and description in site options onboarding * Allow passing the products list down to the domain search results * Choose a domain styling WIP * Choose a domain asides and styling * Domain styling * Domain step, style placeholders * Add classname to body so we can target VideoPress stepper specifically (#67894) * Actually create a site on VideoPress Onboarding flow v2. (#67912) * VideoPress Onboarding V2: Intro View (#67613) * Adding intro view styles for new VideoPress flow. Refactors "Jetpack powered" to be more inclusive of different "powered by" products so that we can show the V ideoPress logo there instead of Jetpack. * New VP logo, aligned vertically * More updates to new design iteration. * Seeing if playsinline helps with mobile safari autoplay. * Fix merge conflict for showing jetpack powered badge. * No longer need z-index hack! * Adjustments to the triangles * Restore previous CSS classname. * Restoring code, unintentional change. * Move color styles out of body so they aren`t applied globally. * Fixing CSS after bad merge. * remove top margin to fix centering. Co-authored-by: Eduardo Villuendas <eduardo.villuendas@automattic.com> * Videopress onboarding v2 : plan selection refined (#67916) * VideoPress Onboarding V2: plan selection refined * Mobile layout for choose a plan * VP Onboarding: clear onboarding site options on flow start and flow completion (#68162) * clear onboarding site options on flow start and flow completion * clear domain as well when starting or completing videopress flow * Update/videopress onboarding v2 site creation (#68196) * Mobile layout for choose a plan * Trying to do stuff with things, but it's not working, WIP * One more step: got it to the checkout page. * Cleanup * Cleanup * Less parameters = more fun * Add domain to cart Co-authored-by: Panos Kountanis <panosktn@gmail.com> * VideoPress onboarding v2 : steps validation (#68280) * Mobile layout for choose a plan * Trying to do stuff with things, but it's not working, WIP * One more step: got it to the checkout page. * Cleanup * Cleanup * Less parameters = more fun * Add domain to cart * Steps proxy on useStepNavigation * Upate validation rules Co-authored-by: Panos Kountanis <panosktn@gmail.com> * VideoPress onboarding v2 : buttons feedback (#68336) * Mobile layout for choose a plan * Trying to do stuff with things, but it's not working, WIP * One more step: got it to the checkout page. * Cleanup * Cleanup * Less parameters = more fun * Add domain to cart * Steps proxy on useStepNavigation * Upate validation rules * Disable form button if site title is not set * Add button feedback for plan selection * Update style.scss Co-authored-by: Panos Kountanis <panosktn@gmail.com> * Update/videopress onboarding v2 processing step (#68349) * Mobile layout for choose a plan * Trying to do stuff with things, but it's not working, WIP * Cleanup * VP Onboarding: clear onboarding site options on flow start and flow completion (#68162) * clear onboarding site options on flow start and flow completion * clear domain as well when starting or completing videopress flow * Upate validation rules * Disable form button if site title is not set * VideoPress processing step WIP * Processing step Co-authored-by: John Caruso <johncaruso@gmail.com> * Use plan product for checkout URL instead of periodAgnosticSlug (#68438) * Adding new launchpad flow for VideoPress! (#67692) * Adding new launchpad flow for VideoPress! * Updating to i2 of design. * Moving styles to videopress.scss so all styles live in one place and can use the same color vars. * Set text-overflow: ellipsis for long domains. * Correcting `completing-purchase` path to use camel case. * Adding new launchpad flow for VideoPress! * Updating to i2 of design. * Moving styles to videopress.scss so all styles live in one place and can use the same color vars. * Set text-overflow: ellipsis for long domains. * Fix redirect URI from checkout page * Add plan to cart in order to add extra data for videomaker activation * Fixing launchpad settings for VideoPress flow. * Update client/landing/stepper/declarative-flow/internals/steps-repository/launchpad/task-helper.ts Co-authored-by: John Caruso <johncaruso@gmail.com> * Update client/landing/stepper/declarative-flow/internals/steps-repository/launchpad/task-helper.ts Co-authored-by: John Caruso <johncaruso@gmail.com> * Update client/landing/stepper/declarative-flow/internals/steps-repository/launchpad/translations.tsx Co-authored-by: John Caruso <johncaruso@gmail.com> Co-authored-by: thedebian <thedebian@users.noreply.github.com> Co-authored-by: John Caruso <johncaruso@gmail.com> * Videomaker Onboarding: Add theme selection step (#68721) * New styles and nearly there with functionality. Need to rebase to test fully. * Set the site_vertical_name option so the theme choice gets set properly. * Clear the selected design when finishing or starting over the flow. * Added responsive styles for small screen. * Add min height for large screens, fixes continue button from jumping. * User better import paths. * Changes to design based on feedback. * Add transitions to the VideoPress flow (#68913) * Fix launchpad to use actionDispatch and not immediately redirect * Adding changes from #68787 due to merge conflict mess. * Code style fixes. * Handling currentUser in case of null. * Disabling typescript "any" warnings. * More eslint "any" disables for code not changed in this PR. * Style lint fixes. * Add skip action to "already own a domain" * VideoPress Onboarding intro: Display first video frame while video is loading (#69078) * Fixed issue where site options were not being set which caused the launchpad video upload step to stop working. * Unintentionally removed an import line. * Addressing design feedback for intro page. * Style adjustments * Style adjustments for theme picker * Revert powered by videopress absolute position * Header margin adjustments * Customize processing step page * Launchpad, use computer as default preview device if window width >= 1430 px * Launchpad, yellowize the thing * Powered by VideoPress always at bottom. This solution is flexbox based, the main ingredient being that .step-container is a flexbox (column) and that content flex-grows to fill all the space. * Goto /start/videopress-account/user for account creation. We render the old signup page on that url.. * Show the progress bar on the VideoPress user account view. * VideoPress Launchpad: enable preview interactions. Only when VideoPress is the flow, we allow interactions in the launchpad preview. Useful if users want to play the homepage videos. * Fixed stacked theme buttons when screen was medium to large size. * Substract 10px to 100vh to compute the stepper min height * Video Onboarding: Add video upload celebration modal 🎉 (#69394) * Initial kind-of-working redirect after saving site with videopress intent. * Adding check that redirect has occurred. Disabled for atomic sites. * Removing deleted store item. * Deleting stylesheet, unused. * Remove style import, set redirect to wp.com host. * Adding a hopefully helpful comment about the comonents goal. * Changed from using a redirect to showing a celebration modal. * Use window location to get the site slug * Fix component naming and removed unrelated commits. * Linting fixes... not sure why as did not touch this code. * Fix errors introduced from upstream. * Update packages/data-stores/src/onboard/actions.ts Co-authored-by: John Caruso <johncaruso@gmail.com> * Removing unused i18n import. * Adding config for VideoPress flow. Enabled for dev, horizon, staging and wpcalypso. * Fixing styles for `is-primary` button. * Update client/landing/stepper/declarative-flow/internals/videopress.scss Co-authored-by: Mikey Arce <mikeyarce@gmail.com> * Style lint fix. * Add type cast to help with tests. * Fix redirect urls to use new path structure instead of using the `flow` parameter. * Style the new email activation banner to fit with the VideoPress onboarding theme. Co-authored-by: Pierre <thedebian@users.noreply.github.com> Co-authored-by: Dan Roundhill <dan@automattic.com> Co-authored-by: Eduardo Villuendas <eduardo.villuendas@automattic.com> Co-authored-by: John Caruso <johncaruso@gmail.com> Co-authored-by: Mikey Arce <mikeyarce@gmail.com>

thedebian and others added 3 commits September 23, 2022 11:58

Mobile layout for choose a plan

00e6bf2

Trying to do stuff with things, but it's not working, WIP

6ab44d0

One more step: got it to the checkout page.

a88207e

thedebian force-pushed the update/videopress-onboarding-v2-site-creation branch from e6cd123 to a88207e Compare September 23, 2022 09:58

thedebian added 4 commits September 23, 2022 13:57

Cleanup

85f5a8a

Cleanup

390bab5

Less parameters = more fun

a439c0b

Add domain to cart

2273853

thedebian requested review from pgk and jgcaruso September 26, 2022 13:37

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Sep 26, 2022

thedebian requested a review from roundhill September 26, 2022 13:37

thedebian self-assigned this Sep 26, 2022

thedebian marked this pull request as ready for review September 26, 2022 13:37

Merge branch 'add/videopress-onboarding-v2' into update/videopress-on…

090538e

…boarding-v2-site-creation

roundhill requested changes Sep 27, 2022

View reviewed changes

roundhill approved these changes Sep 28, 2022

View reviewed changes

thedebian merged commit b418699 into add/videopress-onboarding-v2 Sep 29, 2022

thedebian deleted the update/videopress-onboarding-v2-site-creation branch September 29, 2022 09:14

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Sep 29, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update/videopress onboarding v2 site creation #68196

Update/videopress onboarding v2 site creation #68196

thedebian commented Sep 23, 2022 •

edited

Loading

matticbot commented Sep 23, 2022 •

edited

Loading

matticbot commented Sep 23, 2022 •

edited

Loading

roundhill left a comment

roundhill left a comment

Update/videopress onboarding v2 site creation #68196

Update/videopress onboarding v2 site creation #68196

Conversation

thedebian commented Sep 23, 2022 • edited Loading

Proposed Changes

Testing Instructions

matticbot commented Sep 23, 2022 • edited Loading

matticbot commented Sep 23, 2022 • edited Loading

roundhill left a comment

Choose a reason for hiding this comment

roundhill left a comment

Choose a reason for hiding this comment

thedebian commented Sep 23, 2022 •

edited

Loading

matticbot commented Sep 23, 2022 •

edited

Loading

matticbot commented Sep 23, 2022 •

edited

Loading