My Jetpack: Add red bubble and warning Notice when paid plans are expired or expiring soon.

[elliottprogrammer]

This PR adds red bubble functionality and displays a warning/error Notice in My Jetpack when any paid plans are expiring soon or expired.

Fixes https://github.com/Automattic/jetpack-roadmap/issues/1937

Proposed changes:

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

Project Thread: pbNhbs-bJN-p2

Design Thread: p1HpG7-umC-p2

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

No

Testing instructions:

• Apply this PR branch on a Jurassic Ninja site using the Beta plugin - In the "More options" section, select to assign a license for Jetpack VideoPress.
• Connect Jetpack (both site and user connection).
• Go to Store Admin, Look up the JN site, Make sure that Jetpack VideoPress subscription is attached to the site. Now change the expiration date to just a few days after today's date, so that it will be "expiring soon". (you may need to turn-off "auto-renew".. I'm not sure.)
• Go to My Jetpack and reload the page.
• Verify that the status of the VideoPress card is Expiring soon. (See image)
  
• Verify that there is a red bubble on the My Jetpack menu item.
  
• Verify that you see the following "Expiring soon" Notice:
  
• Down in the "My plans" section, verify your VideoPress plan is showing as "Expiring soon on..." with yellow color text, and showing a "Renew subscription" link. See screenshot:
  
• In Store Admin, change the VideoPress expiring date to before todays date, so that it will be "Expired".
• Verify that the status of the VideoPress card is Expired. (See image)
  
• Verify that there is a red bubble on the My Jetpack menu item.
• Verify that you see the following "Expired" Notice:
  
• Down in the "My plans" section, verify your VideoPress plan is showing as "Expired on..." with red color text, and showing a "Resume subscription" link. See screenshot:
  
• In Store Admin, remove the VideoPress subscription, and now add a Jetpack Security subscription. Run through the same steps as above where you'll set the expiration date to 'expiring soon", view the result, then set the expiration to 'expired', view the result, making sure the red-bubble and Notice are displaying properly.

"Expiring soon" Notice for Jetpack Security:

"Expired Notice" for Jetpack Security:

• Next, disconnect Jetpack. Verify there are no code errors and that the statuses of all the product cards appear as expected.
• Now establish a site-only connection (no user connection). Verify there are no code errors and that the statuses of all the product cards appear as expected.

[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 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/redbubble_for_expired_products branch.

  • For jetpack-mu-wpcom changes, also add define( 'JETPACK_MU_WPCOM_LOAD_VIA_BETA_PLUGIN', true ); to your wp-config.php file.

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

  bin/jetpack-downloader test jetpack add/redbubble_for_expired_products
  

  bin/jetpack-downloader test jetpack-mu-wpcom-plugin add/redbubble_for_expired_products
  

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 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:

1. Ensure all required checks appearing at the bottom of this PR are passing.
2. 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.
3. Get at least one approval before merging.

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

[elliottprogrammer]

Thanks for reviewing @CodeyGuyDylan! 🙌

• The CTA on the banner opens a new tab, but the CTAs on the cards do not. Was this intentional? I think they should probably be the same

Yes good catch, thank you! fixed this. 👍

• Is it possible that we could send them straight to checkout with the renewal in the cart? I think it would be great if possible so the user doesn't have to find the renewal button and click another CTA to get there. Less clicks should equal better conversion

Yes, for expiring-soon products I'm sending the user straight to checkout with the renewal in the cart. For expired products, I'm sending then to the purchase management page so they can either renew the product, or choose to remove it if they wish.

• I think there should be a limit on how old a subscription can be where we still show the expired notice. For example, when testing I set the expiration date to 1 year ago and the notice still showed. My gut is if the plan is expired and the user hasn't renewed within a month, we can probably stop showing it.

I left a comment about this in the previous PR related to the age of the expiring products notice. Let me know what you think.

I noticed that if the site is disconnected, all the products broken by the disconnection are highlighted red. Is that expected?

Good catch, thanks! This is fixed. 👍

[IanRamosC]

The functionality looks good to me and it works as described. I left some minor comments, but I can mark it as approved already.

Thanks for addressing the other comments, the feature works well.

[IanRamosC]

I'm not sure if whether it's safe to remove ai here. I remember there was a reason to keep, but I don't remember what the reason was lol
I tried to test it in different scenarios and it works as expected so it might have changed, but I wanted to mention this anyway.

[elliottprogrammer]

Ok, thanks @IanRamosC! I left a comment to the author on the PR where this duplicate class was added originally, and he stated the same thing but doesn't remember exactly what the reason was either. (See: #35910 (review))

I added it back for now, just in case.. And also added a code comment(s) referencing the original PR for future reference. 👍

[IanRamosC]

I feel like this switch will get bigger and bigger as we add more products with specific messaging. I was thinking if we could have the notice text content in one place and a somewhat generic function that uses that text content to build the JSX a bit more dynamically. I don't have a strong opinion right now, though. I'm mostly interested in having this code a bit easier to extend.

[elliottprogrammer]

Yeah I initially had the notice content split up into 2 files, one for expired products, and one for expiring soon, which simplified each file quite a bit, but then it was suggested that I combine the files into one, adding more conditionals and so forth possibly making things a bit more confusing to extend. But, given the nature of each product maybe needing different text, different number of paragraphs, different jsx structure, and possibly displaying other differences (such as icons, images, etc), I fear trying to combine and generalize/optimize any more on this file... For now anyway until we know more exactly what the content of each product will look like. We can always clean up or refactor this file more as needed, as we (maybe) eventually add more content for each specific product. 👍😃

[CodeyGuyDylan]

That was my suggestion 😅 I tend to try to combine files when possible, but that's not always the best solution so my apologies for not thinking of the downsides of it

[CodeyGuyDylan]

The code changes look good to me. The spacing looks a bit weird here in the My Plan section but I wouldn't say it's blocking: