#7783514 Improve tooltips in theme showcase

Proposed Changes

This PR makes a number of small improvements to the tooltips we show for premium themes in the theme showcase:

• When you have purchased a premium theme via a one-time purchase, we now show “You have purchased this theme.” instead of “You have purchased an annual subscription for this theme.”
• When you have a subscription to a marketplace theme, we now show one of the following two messages instead of “This premium theme is only available while your current plan is active and costs per year.”
  • When you have a plan that allows access to the Atomic platform: “You have a subscription for this theme, and it will be usable as long as you keep a Business plan or higher on your site.”
  • When you have a plan that doesn’t allow access to the Atomic platform: “You have a subscription for this theme, but it will only be usable if you have the Business plan on your site.” – this link takes the user to checkout with the business plan; we do need to improve that flow in a follow-up PR
• When you are looking at a premium theme on a site without access to premium themes (i.e. free or with the Personal plan), we now show “This premium theme is included in the Premium plan, or you can purchase individually for [price].” where we removed an incorrect “a year” from the end of the text
• When viewing a marketplace theme that requires the Business plan on a site with a lower plan, we now show both the monthly and annual prices (and actually show the price!), as well as a link to purchase the Business plan
• When viewing a marketplace theme on a site with a Business plan or higher, we now show the text “This premium theme is only available while your current plan is active and costs [annualPrice] per year or [monthlyPrice] per month.” We previously tried to show the annual price (and weren’t getting that right).
• Finally, I fixed the font size for the links in the tooltips. It used to be slightly smaller.

Screenshots

Purchased theme: one-time purchase

Before	After

Purchased theme: subscription

Before	After

Premium theme on plan lower than Premium

Before	After

Marketplace theme on plan lower than Business

Before	After

Marketplace theme on Business plan or higher

Before	After

Testing Instructions

• Run this branch locally and perform the following tests:
• Work with a free site and navigate to Appearance -> Themes
• Mouse over the badge for a premium A8c-owned theme, and verify that the “a year” suffix has been removed
• Purchase a premium theme
• Navigate to Appearance -> Themes
• Mouse over the badge for your purchased theme and verify the text is “You have purchased this theme.”
• Mouse over the badge for a marketplace theme
• Verify that the text now reads “This premium theme costs [annualPrice] per year or [monthlyPrice] per month, and can only be purchased if you have the Business plan on your site.”
  • Also verify that the Business plan link has the same font size
• Either purchase a Business plan for your site, or switch to a site that has the Business plan already
• Ensure that the site is Atomic – the easiest path is to visit Settings -> Hosting Configuration and activating your hosting features
• Navigate to Appearance -> Themes
• Mouse over the badge for a marketplace theme
• Verify that the text reads: “This premium theme is only available while your current plan is active and costs [annualPrice] per year or [monthlyPrice] per month.”
• Purchase a marketplace theme
• Navigate to Appearance -> Themes
• Mouse over the badge for the marketplace theme you purchased
• Verify that you see the following text: “You have a subscription for this theme, and it will be usable as long as you keep a Business plan or higher on your site.”
• Open Store Admin for your user, and find your test site that has a Business (or higher) plan and your marketplace theme subscription
• Remove the Business plan from the site
• Navigate to Appearance -> Themes
• Mouse over the badge for the marketplace theme you purchased
• Verify that you see the following text: “You have a subscription for this theme, but it will only be usable if you have the Business plan on your site.”

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• [N/A] Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the “[Status] String Freeze” label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
• [N/A] For changes affecting Jetpack: Have we added the “[Status] Needs Privacy Updates” label if this pull request changes what data or activity we track or use (p4TIVU-ajp-p2)?