Adding new launchpad flow for VideoPress! #67692

roundhill · 2022-09-12T19:51:45Z

Proposed Changes

Adds a new launchpad checklist for VideoPress/Videomaker onboarding:

Related: D87583-code.

Testing Instructions

Apply D87583 to your sandbox.
Start with http://calypso.localhost:3000/setup/intro?flow=videopress, and complete a signup for a site.
You should end up at the launchpad. Note that the active step is Upload your first video.
Upload a video to the site.
Return to the launchpad, and the step should be marked as completed.
Click Launch Video Site, it should work properly.

Pre-merge Checklist

Have you written new tests 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)?

github-actions · 2022-09-12T19:55:09Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

matticbot · 2022-09-12T19:55:22Z

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

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

name                   parsed_size           gzip_size
entry-stepper            +205744 B  (+5.3%)   +54456 B  (+5.2%)
entry-gutenboarding        +4150 B  (+0.2%)    +1117 B  (+0.2%)
entry-main                 +1209 B  (+0.1%)     +131 B  (+0.0%)
entry-domains-landing       +673 B  (+0.1%)     +134 B  (+0.1%)
entry-browsehappy           +673 B  (+0.7%)     +134 B  (+0.5%)
entry-login                 +565 B  (+0.1%)      +94 B  (+0.0%)

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

Sections (~18610 bytes removed 📉 [gzipped])

name                   parsed_size           gzip_size
signup                      +980 B  (+0.3%)      -69 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.

…ding-launchpad

…can use the same color vars.

thedebian

Code looks good.
When I uploaded a video, the launchpad task wasn't updated, so I couldn't go further and click on "launch site"

…ding-launchpad

…can use the same color vars.

…attic/wp-calypso into add/videopress-onboading-launchpad # Conflicts: # client/landing/stepper/declarative-flow/internals/steps-repository/choose-a-plan/index.tsx

jgcaruso

Tested alongside D87583-code and it worked as expected!

I could be completely wrong about the casing of site in the various actions, so those comments are not blocking at all.

client/landing/stepper/declarative-flow/internals/steps-repository/launchpad/task-helper.ts

client/landing/stepper/declarative-flow/internals/steps-repository/launchpad/translations.tsx

…tory/launchpad/task-helper.ts Co-authored-by: John Caruso <johncaruso@gmail.com>

…tory/launchpad/translations.tsx Co-authored-by: John Caruso <johncaruso@gmail.com>

* 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>

* 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>

Adding new launchpad flow for VideoPress!

b735fde

roundhill added [Status] In Progress [Feature] VideoPress A feature to help you upload and insert videos on your site. labels Sep 12, 2022

roundhill requested review from pgk, thedebian and jgcaruso September 12, 2022 19:51

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

roundhill added 6 commits September 15, 2022 13:26

Merge branch 'add/videopress-onboarding-v2' into add/videopress-onboa…

d137722

…ding-launchpad

Updating to i2 of design.

d39ec77

Merge branch 'add/videopress-onboarding-v2' into add/videopress-onboa…

b169efe

…ding-launchpad

Moving styles to videopress.scss so all styles live in one place and …

59385b2

…can use the same color vars.

Merge videopress-onboarding-v2.

54a413c

Set text-overflow: ellipsis for long domains.

eb62f07

roundhill removed the [Status] In Progress label Sep 16, 2022

roundhill changed the title ~~(WIP) Adding new launchpad flow for VideoPress!~~ Adding new launchpad flow for VideoPress! Sep 16, 2022

thedebian suggested changes Sep 22, 2022

View reviewed changes

roundhill added 7 commits September 22, 2022 09:09

Merge branch 'add/videopress-onboarding-v2' into add/videopress-onboa…

84a017b

…ding-launchpad

Merge branch 'add/videopress-onboarding-v2' into add/videopress-onboa…

a14c4bb

…ding-launchpad

Correcting completing-purchase path to use camel case.

f741727

Adding new launchpad flow for VideoPress!

65ce813

Updating to i2 of design.

e120c5c

Moving styles to videopress.scss so all styles live in one place and …

ed14f99

…can use the same color vars.

Set text-overflow: ellipsis for long domains.

6ff8108

thedebian force-pushed the add/videopress-onboading-launchpad branch from f741727 to 6ff8108 Compare September 30, 2022 08:42

thedebian and others added 4 commits September 30, 2022 12:19

Fix redirect URI from checkout page

ab1b29f

Add plan to cart in order to add extra data for videomaker activation

2a83bc4

Merge branch 'add/videopress-onboading-launchpad' of github.com:Autom…

a845bc6

…attic/wp-calypso into add/videopress-onboading-launchpad # Conflicts: # client/landing/stepper/declarative-flow/internals/steps-repository/choose-a-plan/index.tsx

Fixing launchpad settings for VideoPress flow.

f971a08

roundhill requested a review from thedebian October 3, 2022 16:43

jgcaruso approved these changes Oct 5, 2022

View reviewed changes

roundhill and others added 3 commits October 5, 2022 15:59

Update client/landing/stepper/declarative-flow/internals/steps-reposi…

399fec1

…tory/launchpad/task-helper.ts Co-authored-by: John Caruso <johncaruso@gmail.com>

Update client/landing/stepper/declarative-flow/internals/steps-reposi…

0670197

…tory/launchpad/task-helper.ts Co-authored-by: John Caruso <johncaruso@gmail.com>

Update client/landing/stepper/declarative-flow/internals/steps-reposi…

3572516

…tory/launchpad/translations.tsx Co-authored-by: John Caruso <johncaruso@gmail.com>

roundhill merged commit 530a07c into add/videopress-onboarding-v2 Oct 5, 2022

roundhill deleted the add/videopress-onboading-launchpad branch October 5, 2022 22:00

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 Oct 5, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adding new launchpad flow for VideoPress! #67692

Adding new launchpad flow for VideoPress! #67692

roundhill commented Sep 12, 2022 •

edited

Loading

github-actions bot commented Sep 12, 2022 •

edited by matticbot

Loading

matticbot commented Sep 12, 2022 •

edited

Loading

thedebian left a comment

jgcaruso left a comment

Adding new launchpad flow for VideoPress! #67692

Adding new launchpad flow for VideoPress! #67692

Conversation

roundhill commented Sep 12, 2022 • edited Loading

Proposed Changes

Testing Instructions

Pre-merge Checklist

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

matticbot commented Sep 12, 2022 • edited Loading

thedebian left a comment

Choose a reason for hiding this comment

jgcaruso left a comment

Choose a reason for hiding this comment

roundhill commented Sep 12, 2022 •

edited

Loading

github-actions bot commented Sep 12, 2022 •

edited by matticbot

Loading

matticbot commented Sep 12, 2022 •

edited

Loading