Videopress onboarding: plan selection #67643

thedebian · 2022-09-12T09:52:52Z

Proposed Changes

This PR adds the plan selection step in the videopress flow.
Design and plan validation are still to be done, this PR is adding the basic feature to the flow.

Testing Instructions

Apply this PR
Go to http://calypso.localhost:3000/setup/intro?flow=videopress
✅ If you're logged in, you should be redirected to the options step
✅ If you're not logged in, you should be redirected to the account creation step, then to the options step
Add a site title and click continue
✅ You should be redirected to the domain selection step, with the site title as suggestion
Select a domain
✅ You should be redirected to the plan selection page
✅ Only premium and business should be displayed
✅ The page shouldn't be skippable and no free plan should be selectable here

Related to 1296-gh-Automattic/greenhouse

github-actions · 2022-09-12T09:53:04Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

matticbot · 2022-09-12T10:03:09Z

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

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

name                   parsed_size           gzip_size
entry-stepper            +197626 B  (+5.1%)   +52003 B  (+5.0%)
entry-gutenboarding        +3309 B  (+0.2%)     +937 B  (+0.1%)
entry-main                 +1209 B  (+0.1%)     +129 B  (+0.0%)
entry-domains-landing       +673 B  (+0.1%)     +132 B  (+0.1%)
entry-browsehappy           +673 B  (+0.7%)     +132 B  (+0.5%)
entry-login                 +565 B  (+0.1%)      +92 B  (+0.0%)

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

Sections (~18679 bytes removed 📉 [gzipped])

name                   parsed_size           gzip_size
signup                      +912 B  (+0.2%)      -68 B  (-0.1%)
accept-invite               +812 B  (+0.2%)     -192 B  (-0.2%)
jetpack-connect             +802 B  (+0.1%)     -306 B  (-0.1%)
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%)
domains                     +139 B  (+0.0%)    +1524 B  (+0.4%)
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 (~2406 bytes added 📈 [gzipped])

name                                              parsed_size           gzip_size
async-load-signup-steps-domains                        +405 B  (+0.1%)    +1186 B  (+1.0%)
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.

…rding store

pgk

Worked well, I see tube is back too! <3

* 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

* 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 changed the base branch from add/videopress-onboarding-v2 to add/videopress-onboarding-v2-domain-selection September 12, 2022 09:54

thedebian force-pushed the add/videopress-onboarding-v2-domain-selection branch from 7630f4a to 57f6dfa Compare September 13, 2022 08:11

thedebian force-pushed the add/videopress-onboarding-v2-plan-selection branch from d2c908d to 59571f1 Compare September 13, 2022 08:17

thedebian requested a review from pgk September 13, 2022 09:17

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 13, 2022

thedebian requested review from jgcaruso and roundhill September 13, 2022 09:17

thedebian marked this pull request as ready for review September 13, 2022 09:17

Base automatically changed from add/videopress-onboarding-v2-domain-selection to add/videopress-onboarding-v2 September 13, 2022 10:03

thedebian added 11 commits September 13, 2022 12:04

Submit options step

7f95ca2

VideoPress onboarding, domain selection step

7aedc90

Choose a domain styling

97c47d7

Add video, studio, productions, com as suggested tlds

e82a7ee

VideoPress site options step (WIP)

3a8acbb

Submit options step

d996507

VideoPress onboarding: select a plan (WIP)

38e273c

Update how we store site title, description and domain by using onboa…

6c7ea02

…rding store

VideoPress onboarding: choose a plan step

aacbd7f

Add translation for choose a domain step

1a4871f

Rebase

9b084f8

thedebian force-pushed the add/videopress-onboarding-v2-plan-selection branch from 59571f1 to 9b084f8 Compare September 13, 2022 10:08

pgk approved these changes Sep 13, 2022

View reviewed changes

pgk merged commit 9396b43 into add/videopress-onboarding-v2 Sep 13, 2022

pgk deleted the add/videopress-onboarding-v2-plan-selection branch September 13, 2022 10:54

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 13, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Videopress onboarding: plan selection #67643

Videopress onboarding: plan selection #67643

thedebian commented Sep 12, 2022 •

edited

Loading

github-actions bot commented Sep 12, 2022 •

edited by matticbot

Loading

matticbot commented Sep 12, 2022 •

edited

Loading

pgk left a comment •

edited

Loading

Videopress onboarding: plan selection #67643

Videopress onboarding: plan selection #67643

Conversation

thedebian commented Sep 12, 2022 • edited Loading

Proposed Changes

Testing Instructions

github-actions bot commented Sep 12, 2022 • edited by matticbot Loading

matticbot commented Sep 12, 2022 • edited Loading

pgk left a comment • edited Loading

Choose a reason for hiding this comment

thedebian commented Sep 12, 2022 •

edited

Loading

github-actions bot commented Sep 12, 2022 •

edited by matticbot

Loading

matticbot commented Sep 12, 2022 •

edited

Loading

pgk left a comment •

edited

Loading