Add Paid Course Upsell #5169

fjorgemota · 2022-05-21T01:46:50Z

Fixes #5129

Changes proposed in this Pull Request

Add the Paid Course upsell screen;
Move the title from the steps in the Editor Wizard to the interior of their content;
Add a way to add an image to the right side of each step, as per the designs;

Testing instructions

Checkout this branch;
Guarantee that Sensei Pro isn't installed; (by the way, remember to backup your Sensei Pro directory if you're going to delete it through WordPress...hehe);
Create a new course;
Click "Next" on the modal that appears to see the Paid Course upsell screen;
Verify that the "Get Sensei Pro" button works and opens a new tab on the Sensei LMS page (with some UTM tracking codes in the query string, too). Also, verify that the editor wizard goes to the next step (the Course Pattern step);
Create another new course;
Click on the "Continue with Sensei Free" button and verify that it DOES NOT open a new tab, and just goes to the Course Pattern step;

Screenshot of the current version

To do

Fix price font size;
Adjust font style of the text "per year, 1 site" just below the price;
Add a background image covering both the content area of the modal + the header (I accept ideas and suggestions here! Still struggling a little bit with the CSS part..hehe) (WIP);
Add analytics parameters to the link opened when clicking on the "Get Sensei Pro" button?

Questions

I accept suggestions of tests to do; =)
I accept any feedback about the quality of the code;

…upsell

So we can have aligned texts for better demonstration

assets/admin/editor-wizard/style.scss

assets/admin/editor-wizard/steps/upgrade-step.js

As suggested by Renatho.

So we can remove margins of the modal and remove the title from the header. Co-authored-by: Renatho De Carli Rosa <renatho@gmail.com>

So we can customize it easily. Co-authored-by: Renatho De Carli Rosa <renatho@gmail.com>

…ff4106

And fix pricing and pricing detail font sizes

So we can least look at how other editor wizard steps will behave. =)

So we can know that it applies only for the Course editor wizard easily.

So we can have these strings translated properly :D

So we don't need to go looking around for updating the price in the code..:)

assets/admin/editor-wizard/use-sensei-pro-extension.js

So we can re-use the logic in the FeaturedProductSenseiPro component too! :D

Because I just observed that the image wasn't working in the final plugin build

assets/extensions/use-sensei-pro-extension.js

renatho

This is looking great! I just added some small suggestions.

I accept suggestions of tests to do; =)

Just in order to merge it earlier, I'd do it in another PR. I'd test the following parts:

useSenseiProExtension - We could mock the useSelect, and confirm if it's filtering the Sensei Pro properly.
EditorWizardModal - It'd be interesting to check if the upsell step is added when should and not when shouldn't. I think the easier way would be mocking the Wizard component, and checking if CourseUpgradeStep is in the array or not.
CourseUpgradeStep - We could also check if the price is rendered correctly and if the actions work properly.

assets/admin/editor-wizard/editor-wizard-modal.js

assets/admin/editor-wizard/steps/course-upgrade-step.js

assets/extensions/use-sensei-pro-extension.js

renatho · 2022-05-24T14:48:13Z

Just one other thing while checking the design:

The features list should have a font-weight: 700.
"per year, 1 site" should have a different spacing above and below the text.
I think it's not part of this PR, but if you could, we could take the opportunity to fix the spacing between the buttons in the Actions. It should have a 12px spacing between them. And the padding in the whole Action container should be 18px 30px instead of 30px.

Instead of copying the array again without the step.

I had to add a resolver in the store to be able to load the extensions and so to identify the extension appropriately.

assets/admin/editor-wizard/steps/course-upgrade-step.js

assets/admin/editor-wizard/editor-wizard-modal.js

…ibutes

renatho

This is very good! Just one final thing.
After that, since it's pretty simple, I think you can merge directly.

assets/admin/editor-wizard/steps/lesson-details-step.js

renatho

🎉🎉🎉
Great PR!

aaronfc

Sorry for the late review! It is looking nice but I found some "flashing" behaviour I reported in a comment.
Maybe we want to look into it.

aaronfc · 2022-05-25T10:43:58Z

assets/admin/editor-wizard/editor-wizard-modal.js

+	if ( ! senseiProExtension || senseiProExtension.is_installed === true ) {
+		stepsByPostType.course = stepsByPostType.course.filter(
+			( step ) => step !== CourseUpgradeStep
+		);
+	}


This is making the Upgrade step flash in/out if you go over the first step somewhat fast.
https://user-images.githubusercontent.com/799065/170244529-f19593a5-145b-42e3-baa5-b493d77157c7.mp4

Any idea on how to workaround that?

fjorgemota added 2 commits May 20, 2022 22:33

Fixes spacing of the header title and close button on the wizard modal

744c5dc

Start working on the Paid Course upsell step

48539b6

fjorgemota added the [Type] Enhancement label May 21, 2022

fjorgemota added this to the Course and Lesson Wizard milestone May 21, 2022

fjorgemota self-assigned this May 21, 2022

fjorgemota added 3 commits May 20, 2022 23:11

Add the image to include in the Paid Course upsell

a0e52c0

Add WIP CSS implementation to have the background on the Paid Course …

251e377

…upsell

Fix padding and add paragraph to the image container

0af742d

So we can have aligned texts for better demonstration

renatho reviewed May 23, 2022

View reviewed changes

assets/admin/editor-wizard/style.scss Outdated Show resolved Hide resolved

assets/admin/editor-wizard/steps/upgrade-step.js Outdated Show resolved Hide resolved

assets/admin/editor-wizard/steps/upgrade-step.js Outdated Show resolved Hide resolved

fjorgemota and others added 14 commits May 23, 2022 15:30

Refactor list of upsell features

0da0194

As suggested by Renatho.

Refactor styles of the editor wizard

e470151

So we can remove margins of the modal and remove the title from the header. Co-authored-by: Renatho De Carli Rosa <renatho@gmail.com>

Move Title to the interior of the Step

bff4106

So we can customize it easily. Co-authored-by: Renatho De Carli Rosa <renatho@gmail.com>

Fix typo on the upgrade step of the Editor Wizard

6e6136b

Add image to the Paid Course Upsell in the Editor Wizard

480180d

Delete test related to onStepChange, which was removed in the commit b…

2aaf789

…ff4106

Separate upsell classes into its own namespace

e0edf76

And fix pricing and pricing detail font sizes

Add images of the paid course upsell as placeholders

c262654

So we can least look at how other editor wizard steps will behave. =)

Add link to Sensei Pricing page with UTM tracking code

5c4230b

Rename Upgrade Step to Course Upgrade Step

0d40106

So we can know that it applies only for the Course editor wizard easily.

Add calls to i18n functions in paid course upsell in editor wizard

175e418

So we can have these strings translated properly :D

Add hook to get details about the Sensei Pro extension

ab52ba3

Hide Paid Course Upsell if the Sensei Pro plugin is installed

a694d07

Add dynamic price to Paid Course Upsell

39162b1

So we don't need to go looking around for updating the price in the code..:)

fjorgemota marked this pull request as ready for review May 24, 2022 00:35

fjorgemota requested review from a team and renatho May 24, 2022 00:36

fjorgemota commented May 24, 2022

View reviewed changes

assets/admin/editor-wizard/use-sensei-pro-extension.js Outdated Show resolved Hide resolved

fjorgemota linked an issue May 24, 2022 that may be closed by this pull request

Course Wizard - Create "Paid Course" upsell step #5129

Closed

fjorgemota added 2 commits May 24, 2022 09:46

Move useSenseiProExtension to avoid code duplication

35c7dac

So we can re-use the logic in the FeaturedProductSenseiPro component too! :D

Fix image path in the plugin directory

86ac4ef

Because I just observed that the image wasn't working in the final plugin build

fjorgemota commented May 24, 2022

View reviewed changes

assets/extensions/use-sensei-pro-extension.js Outdated Show resolved Hide resolved

renatho reviewed May 24, 2022

View reviewed changes

fjorgemota added 6 commits May 24, 2022 13:53

Remove CourseUpgradeStep from stepsByPostType.course using filter

c5c0094

Instead of copying the array again without the step.

Add comment defining Internal Dependencies for Course Upgrade Step

c5e62a7

Remove useSenseiProExtension in favour of a selector

9635974

I had to add a resolver in the store to be able to load the extensions and so to identify the extension appropriately.

Fix button spacing on the Course Upgrade Step

20902ba

Adjust price detail margin on the Course Upgrade Step

3f831f1

Fix font-weight on the list of features in the Course Upgrade Step

eaeb463

fjorgemota requested a review from renatho May 24, 2022 18:54

renatho reviewed May 24, 2022

View reviewed changes

assets/admin/editor-wizard/steps/course-upgrade-step.js Outdated Show resolved Hide resolved

assets/admin/editor-wizard/editor-wizard-modal.js Outdated Show resolved Hide resolved

fjorgemota added 3 commits May 24, 2022 16:26

Remove resolver in favour of using createRegistrySelector

2b5faa3

Use CSS to set the height of the image instead of relying on img attr…

d962689

…ibutes

Pass [] as dependencies and use arrow functions on useSelect calls

c2f7362

fjorgemota requested a review from renatho May 24, 2022 20:00

renatho previously approved these changes May 24, 2022

View reviewed changes

assets/admin/editor-wizard/steps/lesson-details-step.js Outdated Show resolved Hide resolved

Rename CSS class of the images on the editor wizard as per suggestion

fa0760a

fjorgemota dismissed renatho’s stale review via fa0760a May 24, 2022 21:30

renatho self-requested a review May 24, 2022 21:32

renatho approved these changes May 24, 2022

View reviewed changes

fjorgemota merged commit 7e6f68a into feature/course-lesson-wizard May 24, 2022

fjorgemota deleted the add/paid-course-upsell branch May 24, 2022 21:37

fjorgemota mentioned this pull request May 24, 2022

Course Wizard - Create "Paid Course" upsell step #5129

Closed

aaronfc reviewed May 25, 2022

View reviewed changes

aaronfc mentioned this pull request May 25, 2022

Upgrade step flashing in. #5182

Closed

fjorgemota mentioned this pull request May 25, 2022

Implement tests for the Paid Course upsell #5183

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Paid Course Upsell #5169

Add Paid Course Upsell #5169

fjorgemota commented May 21, 2022 •

edited

Loading

renatho left a comment

renatho commented May 24, 2022

renatho left a comment

renatho left a comment

aaronfc left a comment

aaronfc May 25, 2022

Add Paid Course Upsell #5169

Add Paid Course Upsell #5169

Conversation

fjorgemota commented May 21, 2022 • edited Loading

Changes proposed in this Pull Request

Testing instructions

Screenshot of the current version

To do

Questions

renatho left a comment

Choose a reason for hiding this comment

renatho commented May 24, 2022

renatho left a comment

Choose a reason for hiding this comment

renatho left a comment

Choose a reason for hiding this comment

aaronfc left a comment

Choose a reason for hiding this comment

aaronfc May 25, 2022

Choose a reason for hiding this comment

fjorgemota commented May 21, 2022 •

edited

Loading