Hero Flow: Integrate video courses #58234

arthur791004 · 2021-11-18T11:10:10Z

Changes proposed in this Pull Request

Use signup/starting-point-courses to control showing “Take the masterclass” starting point or not and now is only for English user
Add “Watching Blogging videos” into the list of the starting point
Integrate the video UI but keep the navigation bar of the signup framework.

Note that we should ensure the tracks event fired correctly in the Hero Flow.

Desktop

courses-step-demo.mov

Mobile

courses-step-demo-mobile.mov

Testing instructions

Go to /start/setup-site/intent?siteSlug=<your_site>
Select write intent
Fill out the site options
Select “Take the masterclass” as starting point
Check the following things:
- Video UI show correctly.
- The “Back” button works correctly
- “Draft your post” button works correctly
- The footer shows after you complete the courses. Clicking the “start writing” button makes you complete the flow and land on the editor
- Ensure the tracks event works correctly

Related to

Blogger Flow: Video UI branch from starting-point screen #58262

github-actions · 2021-11-18T11:10:29Z

Link to Calypso live: https://calypso.live?image=registry.a8c.com/calypso/app:build-23472
Link to Jetpack Cloud live: https://calypso.live?image=registry.a8c.com/calypso/app:build-23472&env=jetpack

matticbot · 2021-11-18T11:20:27Z

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

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

name                   parsed_size           gzip_size
entry-main                  +150 B  (+0.0%)      +50 B  (+0.0%)
entry-login                 +150 B  (+0.0%)      +50 B  (+0.0%)
entry-gutenboarding         +150 B  (+0.0%)      +50 B  (+0.0%)
entry-domains-landing       +150 B  (+0.0%)      +50 B  (+0.0%)
entry-browsehappy           +150 B  (+0.2%)      +50 B  (+0.2%)

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

Sections (~149 bytes added 📈 [gzipped])

name             parsed_size           gzip_size
signup               +1906 B  (+0.5%)      +66 B  (+0.1%)
home                  +782 B  (+0.1%)      +60 B  (+0.0%)
jetpack-connect        +39 B  (+0.0%)      +14 B  (+0.0%)
accept-invite          +39 B  (+0.0%)      +14 B  (+0.0%)
plans                  +29 B  (+0.0%)      +13 B  (+0.0%)
domains                +29 B  (+0.0%)      +10 B  (+0.0%)
checkout               +29 B  (+0.0%)      +10 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 (~7330 bytes added 📈 [gzipped])

name                                                  parsed_size           gzip_size
async-load-signup-steps-courses                          +79747 B    (new)   +25391 B    (new)
async-load-signup-steps-starting-point                     +603 B  (+0.8%)     +165 B  (+0.7%)
async-load-signup-steps-intent                             +268 B  (+0.3%)      +54 B  (+0.2%)
async-load-signup-steps-site-options                       +258 B  (+0.3%)      +47 B  (+0.2%)
async-load-signup-steps-design-picker                      +258 B  (+0.3%)      +47 B  (+0.1%)
async-load-signup-steps-woocommerce-install-transfer        +34 B  (+0.0%)      +16 B  (+0.1%)
async-load-signup-steps-woocommerce-install-confirm         +34 B  (+0.0%)      +14 B  (+0.0%)
async-load-signup-steps-user                                +34 B  (+0.0%)      +13 B  (+0.0%)
async-load-signup-steps-theme-selection                     +34 B  (+0.0%)      +15 B  (+0.0%)
async-load-signup-steps-test-step                           +34 B  (+0.0%)      +16 B  (+0.1%)
async-load-signup-steps-survey                              +34 B  (+0.0%)      +17 B  (+0.1%)
async-load-signup-steps-site-type                           +34 B  (+0.0%)      +16 B  (+0.1%)
async-load-signup-steps-site-topic                          +34 B  (+0.0%)      +15 B  (+0.1%)
async-load-signup-steps-site-title                          +34 B  (+0.0%)      +14 B  (+0.1%)
async-load-signup-steps-site-style                          +34 B  (+0.0%)      +17 B  (+0.1%)
async-load-signup-steps-site-picker                         +34 B  (+0.0%)      +14 B  (+0.0%)
async-load-signup-steps-site-or-domain                      +34 B  (+0.0%)      +15 B  (+0.1%)
async-load-signup-steps-site-info-collection                +34 B  (+0.0%)      +16 B  (+0.0%)
async-load-signup-steps-site                                +34 B  (+0.0%)      +14 B  (+0.0%)
async-load-signup-steps-rewind-were-backing                 +34 B  (+0.0%)      +13 B  (+0.1%)
async-load-signup-steps-rewind-migrate                      +34 B  (+0.0%)      +15 B  (+0.1%)
async-load-signup-steps-rewind-form-creds                   +34 B  (+0.0%)      +16 B  (+0.0%)
async-load-signup-steps-reader-landing                      +34 B  (+0.0%)      +15 B  (+0.1%)
async-load-signup-steps-plans-atomic-store                  +34 B  (+0.0%)      +17 B  (+0.0%)
async-load-signup-steps-plans                               +34 B  (+0.0%)      +14 B  (+0.0%)
async-load-signup-steps-passwordless                        +34 B  (+0.0%)      +15 B  (+0.1%)
async-load-signup-steps-p2-site                             +34 B  (+0.0%)      +14 B  (+0.0%)
async-load-signup-steps-p2-get-started                      +34 B  (+0.0%)      +13 B  (+0.1%)
async-load-signup-steps-p2-details                          +34 B  (+0.0%)      +15 B  (+0.1%)
async-load-signup-steps-import-from                         +34 B  (+0.0%)      +14 B  (+0.0%)
async-load-signup-steps-import                              +34 B  (+0.0%)      +13 B  (+0.0%)
async-load-signup-steps-emails                              +34 B  (+0.0%)      +15 B  (+0.1%)
async-load-signup-steps-domains                             +34 B  (+0.0%)      +12 B  (+0.0%)
async-load-signup-steps-difm-design-picker                  +34 B  (+0.0%)      +14 B  (+0.1%)
async-load-signup-steps-creds-permission                    +34 B  (+0.0%)      +15 B  (+0.0%)
async-load-signup-steps-creds-confirm                       +34 B  (+0.0%)      +16 B  (+0.1%)
async-load-signup-steps-creds-complete                      +34 B  (+0.0%)      +15 B  (+0.1%)
async-load-signup-steps-clone-start                         +34 B  (+0.0%)      +18 B  (+0.1%)
async-load-signup-steps-clone-ready                         +34 B  (+0.0%)      +14 B  (+0.0%)
async-load-signup-steps-clone-point                         +34 B  (+0.0%)      +15 B  (+0.0%)
async-load-signup-steps-clone-jetpack                       +34 B  (+0.0%)      +14 B  (+0.1%)
async-load-signup-steps-clone-destination                   +34 B  (+0.0%)      +13 B  (+0.0%)
async-load-signup-steps-clone-credentials                   +34 B  (+0.0%)      +15 B  (+0.0%)
async-load-signup-steps-clone-cloning                       +34 B  (+0.0%)      +14 B  (+0.1%)
async-load-signup-steps-about                               +34 B  (+0.0%)      +15 B  (+0.0%)
async-load-calypso-blocks-editor-checkout-modal             +29 B  (+0.0%)      +10 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.

kwight · 2021-11-22T20:55:16Z

Thanks @arthur791004 – I've added it to our board too so we can see where improvements to the component itself can be made. 👍

arthur791004 · 2021-11-23T08:20:54Z

client/components/videos-ui/style-video-bar.scss

-    align-items: center;
-    justify-content: space-between;
-    font-size: $font-body-small;
+	padding: 20px 24px;


auto format by prettier

kwight · 2021-11-23T19:58:51Z

We're simplifying the props to the <VideosUi /> component and changing how the header and footer variations are handled – let's hold off on much more here until we can make some progress. Thanks for putting this together so quickly @arthur791004 , it's super helpful for us to work from and see where we've got to go! ✨

arthur791004 · 2021-11-24T03:13:22Z

@kwight Okay!

kwight · 2021-12-06T17:47:09Z

On a quick first look:

style-video-bar.scss is being removed, so no need for changes there,
the header and footer components have already been added and tested.

kwight · 2021-12-06T18:00:14Z

@ianstewart also mentioned that we shouldn't be calling it "Masterclass" – maybe "Watch some quick videos"? @provenself any opinions here?

provenself · 2021-12-06T18:24:28Z

I'd go with:

Learn the Basics
Get started fast with our video primer

@ianstewart also mentioned that we shouldn't be calling it "Masterclass" – maybe "Watch some quick videos"? @provenself any opinions here?

blackjackkent · 2021-12-06T20:51:59Z

This seems to be working great! (Minus the wording change that Kirk mentioned.)

One random thought - it seems to me like maybe the "Draft your first post" and "start writing" buttons should open in a new tab. As a user, I feel like I might want to be able to go back to the videos/hero flow and see what else was there (or check the videos while writing the post, etc.)

arthur791004 · 2021-12-07T02:04:45Z

One random thought - it seems to me like maybe the "Draft your first post" and "start writing" buttons should open in a new tab. As a user, I feel like I might want to be able to go back to the videos/hero flow and see what else was there (or check the videos while writing the post, etc.)

I think it's a good point to let the user go back to see the video again. But it's also weird that the user would stop at here after they have completed the video. Thus, we only let the user see the footer bar to start writing or they can click the top-right button to draft a post. So I think it's okay to redirect to the post page at the current page.

arthur791004 · 2021-12-07T02:11:01Z

@kwight I've removed style-video-bar.scss and update the copy!

kwight · 2021-12-07T17:59:46Z

I've removed style-video-bar.scss and update the copy!

Oh sorry @arthur791004 , I wasn't clear – I meant remove style-video-bar.scss changes from the PR, not to remove the file completely (we'll need a separate PR where we verify that everything remaining in it is handled elsewhere).

For the copy, we should go with editorial's suggestion above.

Otherwise, looking great – keen to get this out!

autumnfjeld · 2021-12-07T22:39:31Z

Will we be able to ship to all languages all at once with this feature? Hopefully translations are already done since the feature has been on my home. Then there are just a few new translations in the Blogger Flow.

arthur791004 · 2021-12-21T09:19:39Z

client/components/videos-ui/index.jsx

 	const { updateUserCourseProgression } = useUpdateUserCourseProgressionMutation();

-	const initialUserCourseProgression = useMemo( () => course?.completions ?? [], [ course ] );
-
-	const [ userCourseProgression, setUserCourseProgression ] = useState( [] );


We don't need initialUserCourseProgression and userCourseProgression anymore as the course would be updated whenever the video is marked as completed.

React Query does have a section about optimistic updates, maybe we could be using something like that instead?

arthur791004 · 2021-12-21T09:20:33Z

client/components/videos-ui/index.jsx

-		updatedUserCourseProgression[ videoData.slug ] = true;
-		setUserCourseProgression( updatedUserCourseProgression );
-		updateUserCourseProgression( courseSlug, videoData.slug );
+		if ( ! completedVideoSlugs.includes( videoData.slug ) ) {


Only complete the course if it's incomplete

p-jackson

Hooks 😵‍💫 😅

This change makes a lot of sense after reading through it. At first, I thought using useCourseData() from within the step component was too powerful. It didn't really feel like the step needed ownership over the isCompleted state and that a simple callback when the completed state changed would be enough. But what about if you close the completed course UI and reopen? Then we want <CoursesFooter> to appear immediately. So a callback doesn't cut it.

So separation of concerns here into "data" and "UI" works well here.

Big change though so we should definitely make sure we loop Explorers back in. Whatever form the PR eventually takes, I think separating the concerns here is a good move 👍

client/data/courses/use-course-query.js

p-jackson · 2021-12-22T07:41:28Z

client/data/courses/use-update-user-course-progression-mutation.js

-				queryClient.invalidateQueries( [ 'course-progression', args.courseSlug ] );
-				queryOptions.onSuccess?.( ...args );
+			onSuccess( data, variables, context ) {
+				queryClient.invalidateQueries( [ 'courses', variables.courseSlug ] );


This change looks good. If feels like the POST could return the new progression data so we can update the local cache without using another GET. This works though.
I'm a bit confused about how it was working before. I can't see what the old [ 'course-progression', args.courseSlug ] query key was referring to.

client/data/courses/use-course-data.ts

p-jackson · 2021-12-22T07:50:28Z

client/components/videos-ui/index.jsx

 	const { updateUserCourseProgression } = useUpdateUserCourseProgressionMutation();

-	const initialUserCourseProgression = useMemo( () => course?.completions ?? [], [ course ] );
-
-	const [ userCourseProgression, setUserCourseProgression ] = useState( [] );


React Query does have a section about optimistic updates, maybe we could be using something like that instead?

arthur791004 · 2021-12-22T08:41:26Z

This change looks good. If feels like the POST could return the new progression data so we can update the local cache without using another GET. This works though.

I saw that the best practice suggested that “Always refetch after error or success” by onSettled function even though they also update the local query data manually. I think we can keep it simple to re-fetch here as we don't update the course data often

I'm a bit confused about how it was working before. I can't see what the old [ 'course-progression', args.courseSlug ] query key was referring to.

I think there might be something wrong as the courseSlug doesn't exist in args 😅

client/components/videos-ui/index.jsx

client/data/courses/types.ts

andres-blanco

This is looking good! 🎉

The code is much cleaner now since there are no modifications to the VideoUI component.
The flow tests fine:
- Back button works properly on desktop & mobile.
- Videos get marked as completed.
- When all videos are marked as complete the CTA appears.
- The links in the CTA are correct.

a8ci18n · 2022-01-05T06:16:33Z

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/7074284

Thank you @arthur791004 for including a screenshot in the description! This is really helpful for our translators.

* Hero Flow: Integrate video courses * Setup Header and Footer * Adjust courses header style * Implement courses footer to handle the completion of courses * Turn on config for wpcalypso * Update copy * Enable to non-English users * Refine by review

a8ci18n · 2022-01-14T10:28:54Z

Translation for this Pull Request has now been finished.

arthur791004 added the Blogger Experience Pod label Nov 19, 2021

arthur791004 mentioned this pull request Nov 19, 2021

Blogger Flow: Video UI branch from starting-point screen #58262

Closed

10 tasks

arthur791004 force-pushed the feat/hero-flow-video-courses branch 2 times, most recently from c501567 to 39b7022 Compare November 22, 2021 08:44

arthur791004 force-pushed the feat/hero-flow-video-courses branch from 39b7022 to 66b5ec5 Compare November 23, 2021 07:52

arthur791004 commented Nov 23, 2021

View reviewed changes

arthur791004 requested a review from a team November 23, 2021 08:21

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

arthur791004 changed the title ~~WIP Hero Flow: Integrate video courses~~ Hero Flow: Integrate video courses Nov 23, 2021

arthur791004 force-pushed the feat/hero-flow-video-courses branch from 66b5ec5 to 189f7ef Compare November 23, 2021 10:49

arthur791004 changed the title ~~Hero Flow: Integrate video courses~~ [On hold] Hero Flow: Integrate video courses Nov 24, 2021

arthur791004 force-pushed the feat/hero-flow-video-courses branch 2 times, most recently from 80db0ca to 8f37535 Compare November 26, 2021 08:31

arthur791004 changed the title ~~[On hold] Hero Flow: Integrate video courses~~ Hero Flow: Integrate video courses Dec 3, 2021

arthur791004 force-pushed the feat/hero-flow-video-courses branch 2 times, most recently from 3a538d3 to f3f2a15 Compare December 6, 2021 08:29

kwight mentioned this pull request Dec 6, 2021

Onboarding: Implement the video course. #56888

Closed

16 tasks

arthur791004 commented Dec 21, 2021

View reviewed changes

p-jackson reviewed Dec 22, 2021

View reviewed changes

p-jackson requested review from andres-blanco and blackjackkent December 22, 2021 07:58

arthur791004 force-pushed the feat/hero-flow-video-courses branch from 736beac to e2714cb Compare December 22, 2021 08:16

andres-blanco mentioned this pull request Dec 22, 2021

Videos UI: remove retry: false from query. #59500

Merged

andres-blanco reviewed Dec 22, 2021

View reviewed changes

client/components/videos-ui/index.jsx Outdated Show resolved Hide resolved

client/data/courses/types.ts Outdated Show resolved Hide resolved

arthur791004 mentioned this pull request Dec 23, 2021

Video UI: Add useCourseData hook to share the logic of the computed data #59514

Merged

arthur791004 force-pushed the feat/hero-flow-video-courses branch from 4d0b0fd to 2d8afab Compare December 23, 2021 03:16

andres-blanco mentioned this pull request Dec 23, 2021

Videos UI: Add types & constants. #59534

Merged

arthur791004 added 8 commits December 24, 2021 11:47

Hero Flow: Integrate video courses

4729886

Setup Header and Footer

78666d3

Adjust courses header style

d162368

Implement courses footer to handle the completion of courses

5879b89

Turn on config for wpcalypso

660f854

Update copy

e891733

Enable to non-English users

225b16c

Refine by review

be2ea80

arthur791004 force-pushed the feat/hero-flow-video-courses branch from 2d8afab to be2ea80 Compare December 24, 2021 03:47

andres-blanco mentioned this pull request Dec 27, 2021

Videos UI: Better cache handling. #59576

Merged

andres-blanco approved these changes Jan 4, 2022

View reviewed changes

arthur791004 merged commit 0334e54 into trunk Jan 5, 2022

arthur791004 deleted the feat/hero-flow-video-courses branch January 5, 2022 05:36

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

arthur791004 mentioned this pull request Jan 5, 2022

Hero Flow: Turn on video course as starting point #59747

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Hero Flow: Integrate video courses #58234

Hero Flow: Integrate video courses #58234

arthur791004 commented Nov 18, 2021 •

edited

Loading

github-actions bot commented Nov 18, 2021 •

edited by matticbot

Loading

matticbot commented Nov 18, 2021 •

edited

Loading

kwight commented Nov 22, 2021

arthur791004 Nov 23, 2021

kwight commented Nov 23, 2021

arthur791004 commented Nov 24, 2021

kwight commented Dec 6, 2021

kwight commented Dec 6, 2021

provenself commented Dec 6, 2021 •

edited

Loading

blackjackkent commented Dec 6, 2021

arthur791004 commented Dec 7, 2021

arthur791004 commented Dec 7, 2021

kwight commented Dec 7, 2021 •

edited

Loading

autumnfjeld commented Dec 7, 2021

arthur791004 Dec 21, 2021

p-jackson Dec 22, 2021

arthur791004 Dec 21, 2021

p-jackson left a comment

p-jackson Dec 22, 2021

p-jackson Dec 22, 2021

arthur791004 commented Dec 22, 2021 •

edited

Loading

andres-blanco left a comment •

edited

Loading

a8ci18n commented Jan 5, 2022 •

edited

Loading

a8ci18n commented Jan 14, 2022

Hero Flow: Integrate video courses #58234

Hero Flow: Integrate video courses #58234

Conversation

arthur791004 commented Nov 18, 2021 • edited Loading

Changes proposed in this Pull Request

Testing instructions

Related to

github-actions bot commented Nov 18, 2021 • edited by matticbot Loading

matticbot commented Nov 18, 2021 • edited Loading

kwight commented Nov 22, 2021

arthur791004 Nov 23, 2021

Choose a reason for hiding this comment

kwight commented Nov 23, 2021

arthur791004 commented Nov 24, 2021

kwight commented Dec 6, 2021

kwight commented Dec 6, 2021

provenself commented Dec 6, 2021 • edited Loading

blackjackkent commented Dec 6, 2021

arthur791004 commented Dec 7, 2021

arthur791004 commented Dec 7, 2021

kwight commented Dec 7, 2021 • edited Loading

autumnfjeld commented Dec 7, 2021

arthur791004 Dec 21, 2021

Choose a reason for hiding this comment

p-jackson Dec 22, 2021

Choose a reason for hiding this comment

arthur791004 Dec 21, 2021

Choose a reason for hiding this comment

p-jackson left a comment

Choose a reason for hiding this comment

p-jackson Dec 22, 2021

Choose a reason for hiding this comment

p-jackson Dec 22, 2021

Choose a reason for hiding this comment

arthur791004 commented Dec 22, 2021 • edited Loading

andres-blanco left a comment • edited Loading

Choose a reason for hiding this comment

a8ci18n commented Jan 5, 2022 • edited Loading

a8ci18n commented Jan 14, 2022

arthur791004 commented Nov 18, 2021 •

edited

Loading

github-actions bot commented Nov 18, 2021 •

edited by matticbot

Loading

matticbot commented Nov 18, 2021 •

edited

Loading

provenself commented Dec 6, 2021 •

edited

Loading

kwight commented Dec 7, 2021 •

edited

Loading

arthur791004 commented Dec 22, 2021 •

edited

Loading

andres-blanco left a comment •

edited

Loading

a8ci18n commented Jan 5, 2022 •

edited

Loading