My Jetpack: Onboarding i4 | Wire up product activation and actions

[manzoorwanijk]

Completes MYJP-170

Proposed changes:

• Adds the activation and actions button logic to product cards

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:

• Go to My Jetpack > Products
• Check the action button for cards
• Confirm that it works as the action button in the Overview tab

Screen.Recording.2025-06-26.at.11.25.38.AM.mov

[Copilot]

Pull Request Overview

This PR wires up the product activation and actions for My Jetpack onboarding, completing MYJP-170.

• Extends product hooks (use-products, use-product, and use-all-products) to include refetching status.
• Updates the activation logic in use-activate-plugins to call a global products refetch and adjusts parameters for site connection handlers.
• Modifies UI components (product cards, action buttons, and related button components) to support new status-driven behavior and a new "compact" size prop.

Reviewed Changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
_inc/data/products/use-products.ts	Added refetching status to hook return values.
_inc/data/products/use-product.ts	Propagated new isRefetching property in product hook.
_inc/data/products/use-all-products.ts	Updated hook to return refetch and isRefetching with type casting adjustment.
_inc/data/products/use-activate-plugins.ts	Updated to use refetchAllProducts for global product state updates.
_inc/components/product-card/index.ts	Refactored the fixSiteConnectionHandler callback signature.
_inc/components/my-jetpack-tab-panel/products/product-card-action.tsx	Split the action rendering into UpgradeAction and DynamicAction based on product status.
_inc/components/my-jetpack-tab-panel/products/mappings.ts	Removed unneeded mapping keys.
_inc/components/action-button/secondary-button.tsx	Extended size prop to include "compact".
js-packages/components/components/button/*	Propagated the new "compact" button size across type definitions and implementation.
changelog	Updated changelog reflecting the activation and button size changes.

[github-actions]

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 WoA dev 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 (Jetpack), and enable the update/my-jetpack/onboarding-i4/wire-up-product-activation branch.
• To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack update/my-jetpack/onboarding-i4/wire-up-product-activation

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

[github-actions]

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 Review, ...).
  
• ✅ Add a "[Type]" label (Bug, Enhancement, Janitorial, Task).
  
• ✅ 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 🤖

---

🔴 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

---

Follow this PR Review Process:

1. Ensure all required checks appearing at the bottom of this PR are passing.
2. Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
3. You can use GitHub's Reviewers functionality to request a review.
4. When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

[jp-launch-control]

Code Coverage Summary

No summary data is available for parent commit 10db88e, so cannot calculate coverage changes. 😴

If that commit is a feature branch rather than a trunk commit, this is expected. Otherwise, this should be updated once coverage for 10db88e is available.

Full summary · PHP report · JS report

[robertsreberski]

for some reason, products that should have "Upgrade" button have "Learn More" instead of "Upgrade"

[keoshi]

Noticing that some products use a primary CTA while others a secondary CTA:

[keoshi]

Tiny difference, but the cards and the tables have a different border definition and color:

box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px vs border-color: rgb(240, 240, 240)

[keoshi]

When loading a page, the primary CTAs are not immediately available and can't be clicked (disabled). This does not happen with secondary CTAs.

Screen.Recording.2025-06-25.at.15.22.41.mov

[keoshi]

Scan is highlighted as a product in the Products page, but it's represented as Protect in the Overview page.

Products tab	Overview tab

Even though the plan is technically called Scan, my recommendation would be to highlight the Protect and send users through that respective flow. This would mean redirecting to admin.php?page=my-jetpack#/add-protect instead of admin.php?page=my-jetpack#/add-scan.

Pinging @augurlu and @Initsogar to get their thoughts. Thanks in advance!

Related P2 thread: pgvhYc-7S-p2

[keoshi]

Social is represented as a toggle in the Products page:

When activated, it's counterpart in the Overview page has an Upgrade and a View button:

I understand Social ships fully in Jetpack, just noting that this introduces an inconsistency between the two cards. It's a similar case as VideoPress, which can be enabled from the main plugin, but could benefit from having the SA sideloaded as it offers a much more compelling experience.

We should look at reconciling these differences soon, @grbicsanja!

[keoshi]

When purchasing a plan, it appears duplicated in the “Included in plan” filter:

[keoshi]

When purchasing a plan, it appears duplicated in the “Included in plan” filter:

Quick follow-up on this: seems it's only the AI being duplicated. But it's happening everywhere it shows up. 🤔

[manzoorwanijk]

The flow has been updated as per the design, following the conversation - p1750829934087949-slack-C08JR97D3J4

[manzoorwanijk]

@keoshi I have fixed the duplication of AI product card.

[manzoorwanijk]

Tiny difference, but the cards and the tables have a different border definition and color:

box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px vs border-color: rgb(240, 240, 240)

Pushed a fix. Thank you for pointing that out.

[robertsreberski]

bugbot run

[cursor]

Bug

The ProductCardAction component incorrectly determines whether to display an ActivationToggle or an UpgradeAction. The condition if ( product.standalonePluginInfo?.isStandaloneActive ) only shows the ActivationToggle when a standalone plugin is active.

If a standalone plugin exists but is inactive, this condition fails, causing the component to fall through to the switch statement. This leads to two issues:

1. An inactive standalone plugin may incorrectly display an UpgradeAction ("Learn more" button).
2. If the logic falls to the default case, an inactive standalone plugin will display a disabled ActivationToggle that appears active (due to the active prop defaulting to true), misrepresenting its actual state.

The condition should check for the existence of a standalone plugin (e.g., product.standalonePluginInfo?.hasStandalonePlugin or isStandaloneInstalled) and always pass the plugin's actual active state to the ActivationToggle component.

projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/products/product-card-action.tsx#L89-L108

jetpack/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/products/product-card-action.tsx

Lines 89 to 108 in 3a08416

	*/
	export function ProductCardAction( { product }: ProductCardActionProps ) {
	if ( product.standalonePluginInfo?.isStandaloneActive ) {
	return <ActivationToggle product={ product } />;
	}
	switch ( product.status ) {
	case PRODUCT_STATUSES.INACTIVE:
	case PRODUCT_STATUSES.MODULE_DISABLED:
	case PRODUCT_STATUSES.NEEDS_ACTIVATION:
	case PRODUCT_STATUSES.NEEDS_PLAN:
	case PRODUCT_STATUSES.CAN_UPGRADE:
	return <UpgradeAction product={ product } />;
	default:
	// We assume that the product is active but can't be deactivated
	// For example Scan
	return <ActivationToggle product={ product } disabled />;
	}
	}

Fix in Cursor

---

Bug: Cache Conflicts in Plugin Activation/Deactivation

The useDeactivatePlugins hook uses QUERY_ACTIVATE_PRODUCT_KEY for its mutation. This causes cache conflicts between activation and deactivation operations, potentially leading to stale data or incorrect cache invalidation. A unique query key, such as QUERY_DEACTIVATE_PRODUCT_KEY, should be used for deactivation.

projects/packages/my-jetpack/_inc/data/products/use-deactivate-plugins.ts#L47-L48

jetpack/projects/packages/my-jetpack/_inc/data/products/use-deactivate-plugins.ts

Lines 47 to 48 in 3a08416

	} = useSimpleMutation< { [ key: string ]: ProductSnakeCase } >( {
	name: QUERY_ACTIVATE_PRODUCT_KEY,

Fix in Cursor

---

BugBot free trial expires on July 22, 2025
You have used $0.00 of your $50.00 spend limit so far. Manage your spend limit in the Cursor dashboard.

Was this report helpful? Give feedback by reacting with 👍 or 👎

[robertsreberski]

The PR looks good! Let's also wait for @grbicsanja and @keoshi to check it out - but the logic makes sense to me.

One note is that we probably shouldn't install VaultPress plugin when purchasing the product. It leads to the awkward interaction, as seen here:

CleanShot.2025-06-26.at.11.50.35.mp4

[Initsogar]

Even though the plan is technically called Scan, my recommendation would be to highlight the Protect and send users through that respective flow. This would mean redirecting to admin.php?page=my-jetpack#/add-protect instead of admin.php?page=my-jetpack#/add-scan.

Related P2 thread: pgvhYc-7S-p2

Strongly agree with using Protect instead of Scan, it will help users to unlock the full experience of Protect in WP Admin.

I added some comments about the ongoing investigation of the Protect flow in pgvhYc-7S-p2#comment-157.

cc/ @grbicsanja

[grbicsanja]

Here's an illustration of the expected behaviour for products where standalone plugin installation is needed:

The 'Learn more' link takes the user to an interstitial, from which they can install the plugin.
The toggle serves to activate / deactivate the plugin, whose state is reflected in the card and in the Plugins page.

The same behaviour should work for any plugin that needs a standalone installation. I believe those are:

Backup
Boost
Protect - yes please let's use Protect instead of Scan
Akismet (comes installed)
CRM
Search
VideoPress (we could refer to the standalone in the VideoPress product card, and also add a separate module that is VideoPress Block, we can do this in the next iteration though)

While testing, this is what I see happening for Backups, the toggle becomes disabled_ON instead of OFF when deactivated.

Screen.Recording.2025-06-26.at.10.53.16.mov

Boost and CRM show up as disabled_ON even though the plugin is not installed. There should be a 'Learn more' button instead.

Screen.Recording.2025-06-26.at.12.19.22.mov

As for the cases where the product is not related to a module, like AI, we should show the toggle as disabled_ON. In the next iteration we will fix the interstitial to show a free plan as well.

[grbicsanja]

LGTM