Add tooltip for installed with no videos #38842

CodeyGuyDylan · 2024-08-12T18:05:38Z

Proposed changes:

Add tooltip for the following states of the videopress card

Inactive with videos
Active with no videos
Active with a plan
Active without a plan

These tooltips will have to be adjusted when we add the comparison data and when we add context switching between "last 30 days" and "all-time" stats. That will be handled in those individual PRs

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

P2: p1HpG7-rb7-p2

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

Yes, there are tracks for all the tooltips onClick, as well as a track when the user clicks a link within one of the tooltips

Testing instructions:

To see the tooltip copy you can look here: tCejO24bAGT2ME7iYEfmuG-fi-6392_3262

Create a Jurassic ninja site with sandbox access and checkout this branch on Jetpack (you may want to test this on your local environment, the stats are cached in a transient and it could be useful to comment that out when testing)
Go to My Jetpack. There should be no tooltips for VideoPress when the product is unowned and no videos are uploaded
Now add 1 or more videos to your site and go back to My Jetpack. You should now see a tooltip icon and when you open it, you should see the correct amount of videos in the content, as well as a link to some documentation
Make sure the hosting link goes to the right place (https://jetpack.com/support/jetpack-videopress/the-jetpack-videopress-dashboard/#manage-local-videos)
Now activate the product and connect your user account
To mock some randomized data, go to uggcf%3N%2S%2Suers.yv%2S%3Suggcf%3N%2S%2Sbcratebx.n8p.pbz%2Sfbhepr%2Skers%2Sjcpbz%2Schoyvp.ncv%2Serfg%2Sjcpbz%2Qwfba%2Qraqcbvagf%2Spynff.jcpbz%2Qwfba%2Qncv%2Qfgngf%2Qivqrb%2Qcynlf%2Qi1%2Q1%2Qraqcbvag.cuc%3Se%3Q210o65nn%26zb%3Q1199%26sv%3Q37%2350-og and replace all those zeros with something like rand(0, 100). You can pick whatever numbers you'd like if you wanted to test out smaller or bigger numbers.
Make sure you only have 1 video and look at the tooltips. They should both be in the context of a site without a plan and only 1 video
Now purchase a VideoPress plan and go back to My Jetpack. The tooltip related to views should now be updated.

Bonus: Test with an active plugin with 0 stats and 1 video. Ensure that we do not imply they are currently gathering views on their video

github-actions · 2024-08-12T18:06:51Z

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.

Follow this PR Review Process:

Ensure all required checks appearing at the bottom of this PR are passing.
Choose a review path based on your changes:
- A. Team Review: add the "[Status] Needs Team Review" label
  - For most changes, including minor cross-team impacts.
  - Example: Updating a team-specific component or a small change to a shared library.
- B. Crew Review: add the "[Status] Needs Review" label
  - For significant changes to core functionality.
  - Example: Major updates to a shared library or complex features.
- C. Both: Start with Team, then request Crew
  - For complex changes or when you need extra confidence.
  - Example: Refactor affecting multiple systems.
Get at least one approval before merging.

Still unsure? Reach out in #jetpack-developers for guidance!

github-actions · 2024-08-12T18:07:31Z

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/tooltip-for-videopress-card branch.

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

bin/jetpack-downloader test jetpack add/tooltip-for-videopress-card

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

CodeyGuyDylan · 2024-08-12T20:41:10Z

...-jetpack/_inc/components/product-cards-section/videopress-card/use-videopress-description.ts

@@ -19,7 +19,7 @@ const useVideoPressCardDescription = ( {
 	if ( isPluginActive && ! videoCount ) {
 		return preventWidows(
 			__(
-				'Stunning-quality, ad-free video in the WordPress Editor. Begin by uploading your first video.',
+				'Stunning-quality, ad-free video in the WordPress Editor. Begin by uploading your first video',


The info icon looked weird after a period, let me know if you disagree

Hmm, yeah IMO I think the period should remain. To me it's the opposite, and to me it looks kinda weird without the period. (and seems grammatically improper)

I'd be curious what anybody else thinks. 🤷‍♂️

With Period Without Period

Not a blocker though... 👍

jboland88

This looks pretty good and tested well.
The way you are managing the tooltip copy makes sense to me.

I noticed one grammar error and one bug that I think will be addressed in the base branch. This one seems good to merge into base IMO.

jboland88 · 2024-08-13T19:04:10Z

...ackages/my-jetpack/_inc/components/product-cards-section/videopress-card/use-tooltip-copy.ts

+			sprintf(
+				// translators: %d is the number of videos in the Media Library that could benefit from VideoPress.
+				_n(
+					'You have %d video in your Media Library that could benefit from VideoPress. Start <a>hosting</a> them today to unlock multiple benefits: enhanced quality add-free streaming, faster load times, customizable player controls.',


In this string: "them" sounds incorrect for the singular.

Nice catch, updating it to "it"

jboland88 · 2024-08-13T19:06:37Z

...ackages/my-jetpack/_inc/components/product-cards-section/videopress-card/use-tooltip-copy.ts

+
+	const viewsWithoutPlan = {
+		title: __( 'High-quality video, wherever your audience is', 'jetpack-my-jetpack' ),
+		text: __( 'Success! 🌟 Your video is live and gathering views.', 'jetpack-my-jetpack' ),


I think this bug was covered in the other PR, but I am still getting this message with no watch time or views. I think the intent is to omit the stats with 0 views?

Talked about this elsewhere, decided to keep this way 😄

CodeyGuyDylan · 2024-08-13T21:22:37Z

@ilonagl this is the PR where the tooltip comes into play. Let me know if the placements look okay!

ilonagl · 2024-08-13T21:31:19Z

Thank you for the ping, @CodeyGuyDylan!

Could we make this text shorter so it fits into two lines? Something like this: "This metric shows total video viewing time for the last 30 days."

The info icon placement looks good. It would be best if we could keep them consistent. The rest of them have info icon next to the header, so it would be good to make it like this in this case as well:

What about making the header 'Existing videos' and placing the info icon next to it?

Other than that, looks great. Thank you for working on this!!

ilonagl · 2024-08-13T21:39:57Z

@elliottprogrammer could we possibly update the info icon placement for the Protect card?

The base branch was changed.

elliottprogrammer

Tested functionality works good as described! The code looks overall good to me, I don't see any issues! Just a couple minor comments.
LGTM! 👍

elliottprogrammer · 2024-08-16T16:04:41Z

...-jetpack/_inc/components/product-cards-section/videopress-card/use-videopress-description.ts

@@ -19,7 +19,7 @@ const useVideoPressCardDescription = ( {
 	if ( isPluginActive && ! videoCount ) {
 		return preventWidows(
 			__(
-				'Stunning-quality, ad-free video in the WordPress Editor. Begin by uploading your first video.',
+				'Stunning-quality, ad-free video in the WordPress Editor. Begin by uploading your first video',


Hmm, yeah IMO I think the period should remain. To me it's the opposite, and to me it looks kinda weird without the period. (and seems grammatically improper)

I'd be curious what anybody else thinks. 🤷‍♂️

With Period Without Period

Not a blocker though... 👍

elliottprogrammer · 2024-08-16T16:10:11Z

...y-jetpack/_inc/components/product-cards-section/videopress-card/videopress-value-section.tsx

+						} }
+					>
+						<h3>{ watchTime.title }</h3>
+


Nitpick: Unnecessary space here...
Not a blocker, of course. 😉

* Add tooltip for installed with no videos * Add tooltip for inactive with videos * Add tooltips for active states * Add changelog * Update copy * Update tooltip location when videos are present but plugin is inactive * Move info tooltip to heading * Nitpicks

CodeyGuyDylan force-pushed the add/tooltip-for-videopress-card branch from 9b5c0b7 to 7622e4c Compare August 12, 2024 18:06

github-actions bot added the [Package] My Jetpack label Aug 12, 2024

github-actions bot added the [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! label Aug 12, 2024

CodeyGuyDylan force-pushed the add/tooltip-for-videopress-card branch from 7622e4c to c09349a Compare August 12, 2024 20:06

CodeyGuyDylan commented Aug 12, 2024

View reviewed changes

jboland88 previously approved these changes Aug 13, 2024

View reviewed changes

CodeyGuyDylan force-pushed the add/value-to-active-state-videopress-card branch from b848419 to e97e266 Compare August 14, 2024 18:47

CodeyGuyDylan force-pushed the add/tooltip-for-videopress-card branch from cd13c12 to 9563f26 Compare August 14, 2024 21:53

CodeyGuyDylan force-pushed the add/value-to-active-state-videopress-card branch from 510c733 to 0bd3885 Compare August 15, 2024 15:36

Base automatically changed from add/value-to-active-state-videopress-card to trunk August 15, 2024 16:33

github-actions bot added the [Package] VideoPress label Aug 15, 2024

CodeyGuyDylan added 7 commits August 15, 2024 10:48

Add tooltip for installed with no videos

9754c45

Add tooltip for inactive with videos

25735d7

Add tooltips for active states

57e971c

Add changelog

34436dd

Update copy

5aef298

Update tooltip location when videos are present but plugin is inactive

b751106

Move info tooltip to heading

8374b91

CodeyGuyDylan force-pushed the add/tooltip-for-videopress-card branch from a3ecd1b to 8374b91 Compare August 15, 2024 16:48

elliottprogrammer previously approved these changes Aug 16, 2024

View reviewed changes

Nitpicks

0b704f9

CodeyGuyDylan dismissed elliottprogrammer’s stale review via 0b704f9 August 16, 2024 16:25

elliottprogrammer approved these changes Aug 16, 2024

View reviewed changes

CodeyGuyDylan merged commit 66515fb into trunk Aug 16, 2024
71 checks passed

CodeyGuyDylan deleted the add/tooltip-for-videopress-card branch August 16, 2024 16:42

github-actions bot removed the [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! label Aug 16, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add tooltip for installed with no videos #38842

Add tooltip for installed with no videos #38842

CodeyGuyDylan commented Aug 12, 2024 •

edited

Loading

github-actions bot commented Aug 12, 2024 •

edited

Loading

github-actions bot commented Aug 12, 2024 •

edited

Loading

CodeyGuyDylan Aug 12, 2024

elliottprogrammer Aug 16, 2024

jboland88 left a comment

jboland88 Aug 13, 2024

CodeyGuyDylan Aug 14, 2024

jboland88 Aug 13, 2024

CodeyGuyDylan Aug 14, 2024

CodeyGuyDylan commented Aug 13, 2024

ilonagl commented Aug 13, 2024 •

edited

Loading

ilonagl commented Aug 13, 2024

elliottprogrammer left a comment

elliottprogrammer Aug 16, 2024

elliottprogrammer Aug 16, 2024

Add tooltip for installed with no videos #38842

Add tooltip for installed with no videos #38842

Conversation

CodeyGuyDylan commented Aug 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 Aug 12, 2024 • edited Loading

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jboland88 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

CodeyGuyDylan commented Aug 13, 2024

ilonagl commented Aug 13, 2024 • edited Loading

ilonagl commented Aug 13, 2024

elliottprogrammer left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

CodeyGuyDylan commented Aug 12, 2024 •

edited

Loading

github-actions bot commented Aug 12, 2024 •

edited

Loading

github-actions bot commented Aug 12, 2024 •

edited

Loading

ilonagl commented Aug 13, 2024 •

edited

Loading