Extend ProductCard component and create recommendations UI #38319

robertsreberski · 2024-07-12T12:12:52Z

Proposed changes:

Refactor ProductCard to ts, add 'recommendation' property
Add price/discount calculation and checkout buttons to the product card variation
Update useRecommendationsSection() to useEvaluationRecommendations()

Other information:

Have you written new tests for your changes, if applicable?
Have you checked the E2E test CI results, and verified that your changes do not break them?
Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

Run JN ninja with Jetpack Beta
Activate Jetpack plugin with add/recommendations-section-component branch
Go to My Jetpack page, and go through onboarding process: Connect site, choose goals for your site
As a result, you'll be presented "Our recommendations for you" section, you can confirm prices are correct, and links work well etc.

github-actions · 2024-07-12T12:14:29Z

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

✅ Include a description of your PR changes.
✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
✅ Add testing instructions.
✅ Specify whether this PR includes any changes to data or privacy.
🔴 Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

🔴 Action required: Please add missing changelog entries for the following projects: projects/packages/my-jetpack

Use the Jetpack CLI tool to generate changelog entries by running the following command: jetpack changelog add.
Guidelines: /docs/writing-a-good-changelog-entry.md

Once your PR is ready for review, check one last time that all required checks appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team Review" label and ask someone from your team review the code. Once reviewed, it can then be merged.
If you need an extra review from someone familiar with the codebase, you can update the labels from "[Status] Needs Team Review" to "[Status] Needs Review", and in that case Jetpack Approvers will do a final review of your PR.

github-actions · 2024-07-12T12:15:23Z

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

To test on WoA, go to the Plugins menu on a WordPress.com Simple site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin, and enable the add/recommendations-section-component branch.

To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack add/recommendations-section-component

Interested in more tips and information?

In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
Read more about our development workflow here: PCYsg-eg0-p2
Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

elliottprogrammer

Looks good @robertsreberski! Just a couple small suggestions, and then the issue/question about All the products showing a "Start for free" link.
Other than that, everything looks good to me!

projects/packages/my-jetpack/_inc/components/product-card/index.tsx

projects/packages/my-jetpack/_inc/components/product-card/recommendation-actions.tsx

robertsreberski · 2024-07-19T12:07:21Z

Hey @elliottprogrammer ! I've improved the PR and supported all possible states recommendation cards can be in (even though we'll aim not to propose already-owned products - I'll support it in the separate PR)

CodeyGuyDylan

I am seeing products that are active in my recommendations

If you rebase, you should be able to use the new is_owned data to filter out any recommendations that are already owned by the user. Do you think that would be a good idea?

Additionally if you rebase, you'll probably have a decent amount of merge conflicts because of the separation of the owned/unowned products PR that just shipped, as well as the PR that updates how statuses work a bit

projects/packages/my-jetpack/_inc/components/evaluation-recommendations/index.tsx

projects/packages/my-jetpack/_inc/components/product-card/action-button.tsx

projects/packages/my-jetpack/_inc/components/product-card/index.tsx

projects/packages/my-jetpack/_inc/components/product-card/pricing-component.tsx

projects/packages/my-jetpack/_inc/components/product-card/recommendation-actions.tsx

projects/packages/my-jetpack/_inc/components/product-card/secondary-button.tsx

projects/packages/my-jetpack/_inc/components/product-card/style.module.scss

CodeyGuyDylan · 2024-07-22T20:08:32Z

projects/packages/my-jetpack/_inc/components/product-card/use-pricing-data.ts

+};
+
+const getLearnMoreAction = ( detail: ProductCamelCase ) => {
+	if ( detail.status !== PRODUCT_STATUSES.ACTIVE && detail.tiers.includes( 'free' ) ) {


Not all products that have a free offering have the "free" tier in the product detail. You might want to also check the has_free_offering and potentially even the requires_plan value that is currently only used on the backend. Just to make sure there is no free offering as Backup (as far as I can remember) should really be the only one without one 🤔

Hmm, good point, however, here I wanted to reflect how our interstitials look like (as this is the label of button leading to interstitial). E.g. VideoPress, Stats, Social don't display "Start for free" option in the interstitial, they are also following "tiers" logic from what I understand.

But I'm not completely sure which way we should go here. 🤔

VideoPress, Stats, Social don't display "Start for free" option in the interstitial, they are also following "tiers" logic from what I understand.

This is true! However with the updated statuses PR, all of those plans (if they are in the owned section at least) will have an "Activate" button rather than a "Learn More" -> interstitial CTA reducing friction as much as possible. The goal was to allow users to activate and use our free offering if it exists as easily as possible, and some of the interstitials don't offer the free version on them as they should. That will be handled when we redo interstitials but for now I think it'd be best to allow them to start for free as easily as possible, especially if we are specifically recommending it to them

For what it's worth, this isn't a problem for most of these product cards. The only ones I can see that are missing it are VideoPress, CRM, and Social 😄

I think Boost as well. It's good point, I'll update the condition here to include all products that have free offering

projects/packages/my-jetpack/_inc/components/evaluation-recommendations/index.tsx

robertsreberski · 2024-07-23T18:31:49Z

Thanks for the review @CodeyGuyDylan ! I've addressed all your comments.

If you rebase, you should be able to use the new is_owned data to filter out any recommendations that are already owned by the user. Do you think that would be a good idea?

It's a good idea, I actually plan to first merge everything to feature/welcome-flow that is a base branch and then handle resolving conflicts from there. How does that sound?

CodeyGuyDylan · 2024-07-23T18:33:19Z

It's a good idea, I actually plan to first merge everything to feature/welcome-flow that is a base branch and then handle resolving conflicts from there. How does that sound?

That sounds like a good plan forward to me 😄

CodeyGuyDylan

Functionally this works well. I left a few nitpick comments as well as suggesting I still think we should show the "Start for free" CTA for all products that have a free offering, but since it's nitpicks and an opinion, I'll approve this 😄

CodeyGuyDylan · 2024-07-23T19:20:32Z

projects/packages/my-jetpack/_inc/components/evaluation-recommendations/index.tsx

+			<Col>
+				<Text>
+					{ __(
+						'Here are the features that will best help you with your site:',


I am sorry, we might also want to use a _n here as well. Maybe not since plugins have more than one feature each 🤔 Idk it's up to you, just thought i'd point it out 😄

I'll note that down, and will ask design team once everything is on feature/welcome-flow and ready for their review

projects/packages/my-jetpack/_inc/components/product-card/action-button.tsx

projects/packages/my-jetpack/_inc/components/product-card/index.tsx

projects/packages/my-jetpack/_inc/components/product-card/pricing-component.tsx

CodeyGuyDylan · 2024-07-23T19:29:58Z

projects/packages/my-jetpack/_inc/components/product-card/use-pricing-data.ts

+};
+
+const getLearnMoreAction = ( detail: ProductCamelCase ) => {
+	if ( detail.status !== PRODUCT_STATUSES.ACTIVE && detail.tiers.includes( 'free' ) ) {


For what it's worth, this isn't a problem for most of these product cards. The only ones I can see that are missing it are VideoPress, CRM, and Social 😄

CodeyGuyDylan · 2024-07-23T19:38:34Z

FYI I am also getting some console errors about isAdmin being required, might want to fix those as well

robertsreberski · 2024-07-24T10:01:50Z

I still think we should show the "Start for free" CTA for all products that have a free offering

Hey @CodeyGuyDylan ! Can you take one more look at how it's handled now?

CodeyGuyDylan

Thank you for the small improvements! I do have one issue with the CTAs on the cards now. I was hoping it would automatically activate the product rather than go to the interstitial 🤔

I would still say I think we should go that route, but having a "Start for free" CTA that sends the user to an interstitial without a free option to select from isn't ideal and if we are set on sending them to interstitials, then I would retract my suggestion and say we should go back to the "Learn More" CTA in this case

Additionally I am seeing a few products with a free offering on the interstitial have "Learn More" CTAs rather than a "Start for free" one

CodeyGuyDylan · 2024-07-24T14:44:36Z

projects/packages/my-jetpack/_inc/components/product-card/use-pricing-data.ts

 		const hasDiscount = discountPrice && discountPrice !== fullPrice;
 		return {
-			wpcomProductSlug,
+			wpcomProductSlug: ! quantity ? wpcomProductSlug : `${ wpcomProductSlug }:-q-${ quantity }`,


Oh nice catch here

CodeyGuyDylan

This looks good! I left one nitpick but the testing works well as far as I can tell. Will do more in depth testing when you merge everything and create the cleanup PR 😄

CodeyGuyDylan · 2024-07-24T20:25:28Z

projects/packages/my-jetpack/_inc/components/product-card/use-pricing-data.ts

+	} );
+
+	const handleActivate = useCallback( () => {
+		activate( {} );


I think we can just have activate(), I see that used that way elsewhere 🤔

I think I messed up the typing of useSimpleMutation last time I was working on this, I'll fix it in the cleanup PR, or log it as maintenance task if it's more complex.

* Set WelcomeFlow structure and update WelcomeBanner (async site-only connection) (#37715) * Enhance TermsOfService component * Update MyJetpack connection hook and its usage * Update WelcomeBanner text and add async site registration on click * changelog * Add events and banner dismissal upon connection success * Update versions * Add WelcomeFlow (separate code) structure * Revert WelcomeBanner code * Update banner * Update versions * Hide notices when welcome banner is active * Code improvements * Prevent reloading on site connection * Introduce Notice templating (unify Notices) * Improve displaying notices when welcome banner is active * Improve styling of disabled 'x' button * Add evaluation form to Welcome Flow (#37790) * Enhance TermsOfService component * Update MyJetpack connection hook and its usage * Update WelcomeBanner text and add async site registration on click * changelog * Add events and banner dismissal upon connection success * Update versions * Add WelcomeFlow (separate code) structure * Revert WelcomeBanner code * Update banner * Update versions * Add evaluation form step * Add evaluation processing step and styles * Add evaluation steps to welcome flow * Replace classnames with clsx * Update image filename * Hide notices when welcome banner is active * Code improvements * Prevent reloading on site connection * Introduce Notice templating (unify Notices) * Add 'currentStep' prop to dismiss Tracks event * Add more info to dismiss Tracks event * Code improvements * Add /recommendations/evaluation endpoint handling (#38011) * Enhance TermsOfService component * Update MyJetpack connection hook and its usage * Update WelcomeBanner text and add async site registration on click * changelog * Add events and banner dismissal upon connection success * Update versions * Add WelcomeFlow (separate code) structure * Revert WelcomeBanner code * Update banner * Update versions * Add evaluation form step * Add evaluation processing step and styles * Add evaluation steps to welcome flow * Replace classnames with clsx * Update image filename * Hide notices when welcome banner is active * Code improvements * Prevent reloading on site connection * Introduce Notice templating (unify Notices) * Add 'currentStep' prop to dismiss Tracks event * Add more info to dismiss Tracks event * Code improvements * Improve mutation hook code * Add recommendations evaluation endpoint handling * Implement saving evaluation recommendations * Delete remaining reference * Code improvements and analytics * Fix code review comments * Fix phan * Fix phan 2 * Surpress other parameters * Fix phan completely * Improve Tracks events * Add Evaluation Recommendations logic (#38171) * Add ValueStore logic * Add Evaluation Recommendations logic * changelog * Fix refactor leftover * Improve querying evaluation endpoints * Code review improvements * Extend ProductCard component and create recommendations UI (#38319) * Refactor ProductCard to ts, add 'recommendation' property * Add price component and purchase button * Refactor and cleanup code * Fix backup card * Revert to short descriptions * Improve recommendation button names * Fix additional actions typing * Fix determining state of the recommended product * Fix literal translation handling (transpilation bug) * Fix checkout link redirect * Fix purchase button * Minor code review improvements * Improve handling checkout urls * Fix nitpicks * Improve handling free offerings and upgrade urls * Don't make admin flag required (as it's not required in every case now) * Fix code splitting issue * Activate plugins on 'start for free' action * Add Evaluation Recommendations context menu (#38378) * Refactor ProductCard to ts, add 'recommendation' property * Add price component and purchase button * Refactor and cleanup code * Fix backup card * Revert to short descriptions * Improve recommendation button names * Fix additional actions typing * Fix determining state of the recommended product * Fix literal translation handling (transpilation bug) * Fix boost card popover * Add delete endpoint, unify with others * Extend functionality of Welcome Banner and Evaluation Recommendations hooks * Add context menu to view layer * Fix checkout link redirect * Fix purchase button * Minor code review improvements * Improve handling checkout urls * Code review improvements * Fix nitpicks * Improve handling free offerings and upgrade urls * Don't make admin flag required (as it's not required in every case now) * Fix code splitting issue * Add recommendations initializer tweaks (#38452) * Refactor ProductCard to ts, add 'recommendation' property * Add price component and purchase button * Refactor and cleanup code * Fix backup card * Revert to short descriptions * Improve recommendation button names * Fix additional actions typing * Fix determining state of the recommended product * Fix literal translation handling (transpilation bug) * Fix boost card popover * Add delete endpoint, unify with others * Extend functionality of Welcome Banner and Evaluation Recommendations hooks * Add context menu to view layer * Add silent redBubble alerts - don't show in menu * Hide recommendations when user purchases the product * Fix checkout link redirect * Fix purchase button * Minor code review improvements * Improve handling checkout urls * Code review improvements * Fix nitpicks * Improve handling free offerings and upgrade urls * Don't make admin flag required (as it's not required in every case now) * Fix code splitting issue * Leftover after merge conflict resolution * Welcome Flow: Various tweaks and fixes (#38536) * Various tweaks and fixes * Improve layout of product card, hide boost tooltip on click * Fix Protect tooltips dependency * Display notices when in survey step * Remove red dot on survey step, don't show survey step when user is not new * Fix condition, and add comment * Improve 'start for free' actions and small fixes * Dismiss recommendations instead of deleting them * Fix condition * Redoing recommendations only happens locally * Limit recommendations to 3 * Code review fixes and disabling 'start for free' functionality * Change placement of Boost tooltip and revert click functionality * Welcome Flow: fixes and improvements pt. 2 (#38589) * Apply min-width 300px to cards * Set loading state of site connection button * Fix parsing active modules array * Update changelogger * Fix Tracks events code * Update projects/packages/my-jetpack/_inc/components/product-card/index.tsx Co-authored-by: Ian Ramos <5714212+IanRamosC@users.noreply.github.com> --------- Co-authored-by: jboland88 <18016357+jboland88@users.noreply.github.com> Co-authored-by: Ian Ramos <5714212+IanRamosC@users.noreply.github.com>

Refactor ProductCard to ts, add 'recommendation' property

d315d78

robertsreberski force-pushed the add/recommendations-section-component branch from 0e6c9ae to d315d78 Compare July 12, 2024 12:14

github-actions bot added [Package] My Jetpack [Status] In Progress labels Jul 12, 2024

robertsreberski added 2 commits July 12, 2024 17:56

Add price component and purchase button

547a45f

Refactor and cleanup code

eea13b7

robertsreberski marked this pull request as ready for review July 16, 2024 12:18

robertsreberski changed the title ~~Add view for recommendations section~~ Jul 16, 2024

robertsreberski changed the title ~~Extend ProductCard component and create UI for Evaluation Recommendations~~ Jul 16, 2024

robertsreberski added 3 commits July 16, 2024 14:34

Fix backup card

23e9caa

Revert to short descriptions

4095551

Improve recommendation button names

7ac4bd6

elliottprogrammer reviewed Jul 16, 2024

View reviewed changes

robertsreberski added 2 commits July 19, 2024 13:55

Fix additional actions typing

339cfe8

Fix determining state of the recommended product

8ab6e7e

robertsreberski added 3 commits July 19, 2024 14:12

Fix literal translation handling (transpilation bug)

f6a909d

Fix checkout link redirect

266ffdb

Fix purchase button

b469f67

CodeyGuyDylan requested changes Jul 22, 2024

View reviewed changes

CodeyGuyDylan reviewed Jul 22, 2024

View reviewed changes

projects/packages/my-jetpack/_inc/components/evaluation-recommendations/index.tsx Outdated Show resolved Hide resolved

robertsreberski added 2 commits July 23, 2024 19:50

Minor code review improvements

082ca7b

Improve handling checkout urls

b8a50dc

CodeyGuyDylan approved these changes Jul 23, 2024

View reviewed changes

Fix nitpicks

3b4c0d8

robertsreberski added 2 commits July 24, 2024 11:58

Improve handling free offerings and upgrade urls

c256ded

Don't make admin flag required (as it's not required in every case now)

c01d5cc

Fix code splitting issue

4dcf9ae

CodeyGuyDylan requested changes Jul 24, 2024

View reviewed changes

CodeyGuyDylan mentioned this pull request Jul 24, 2024

Add recommendations initializer tweaks #38452

Merged

3 tasks

Activate plugins on 'start for free' action

94a0b6a

CodeyGuyDylan approved these changes Jul 24, 2024

View reviewed changes

robertsreberski merged commit d8f907b into feature/welcome-flow Jul 25, 2024
63 of 66 checks passed

robertsreberski deleted the add/recommendations-section-component branch July 25, 2024 07:22

github-actions bot removed the [Status] In Progress label Jul 25, 2024

robertsreberski mentioned this pull request Jul 25, 2024

New Feature: My Jetpack Welcome Flow #38534

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Extend ProductCard component and create recommendations UI #38319

Extend ProductCard component and create recommendations UI #38319

robertsreberski commented Jul 12, 2024 •

edited

Loading

github-actions bot commented Jul 12, 2024

github-actions bot commented Jul 12, 2024 •

edited

Loading

elliottprogrammer left a comment

robertsreberski commented Jul 19, 2024

CodeyGuyDylan left a comment

CodeyGuyDylan Jul 22, 2024

robertsreberski Jul 23, 2024

CodeyGuyDylan Jul 23, 2024

CodeyGuyDylan Jul 23, 2024

robertsreberski Jul 24, 2024

robertsreberski commented Jul 23, 2024

CodeyGuyDylan commented Jul 23, 2024

CodeyGuyDylan left a comment

CodeyGuyDylan Jul 23, 2024

robertsreberski Jul 24, 2024

CodeyGuyDylan Jul 23, 2024

CodeyGuyDylan commented Jul 23, 2024

robertsreberski commented Jul 24, 2024

CodeyGuyDylan left a comment

CodeyGuyDylan Jul 24, 2024

CodeyGuyDylan left a comment

CodeyGuyDylan Jul 24, 2024

robertsreberski Jul 25, 2024

Extend ProductCard component and create recommendations UI #38319

Extend ProductCard component and create recommendations UI #38319

Conversation

robertsreberski commented Jul 12, 2024 • edited Loading

Proposed changes:

Other information:

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

github-actions bot commented Jul 12, 2024

github-actions bot commented Jul 12, 2024 • edited Loading

elliottprogrammer left a comment

Choose a reason for hiding this comment

robertsreberski commented Jul 19, 2024

CodeyGuyDylan left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

robertsreberski commented Jul 23, 2024

CodeyGuyDylan commented Jul 23, 2024

CodeyGuyDylan left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

CodeyGuyDylan commented Jul 23, 2024

robertsreberski commented Jul 24, 2024

CodeyGuyDylan left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

CodeyGuyDylan left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

robertsreberski commented Jul 12, 2024 •

edited

Loading

github-actions bot commented Jul 12, 2024 •

edited

Loading