A4A: Add to the subscriptions on cancelled status a info popover

[cleacos]

Part of https://github.com/Automattic/automattic-for-agencies-dev/issues/2675

L-issue: A4A-1394

Proposed Changes

This PR adds cancellation information using a tooltip popover. The original design includes the cancellation date, but we don't have that information from the endpoint, so we omit it for now.

• Not refundable:

• Refundable:

Follow-up task

• On the Client app, in the Subscription section, we have to add the tooltip popover.

Why are these changes being made?

• A4A-1394

Testing Instructions

• As an agency, with cancelled referrals, go to the Referrals section.
• Click on multiple referrals to check the status (canceled, and others). Click on the actions button (chevron) and select the Purchases tab. In the ASSIGNED TO column you will see the Canceled label and info tooltip.
• Click on the tooltip, and you will see the message.
• If you have different cancellation types (refund, not refundable), check both cases. The copy will be different.

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?
• Have you tested accessibility for your changes? Ensure the feature remains usable with various user agents (e.g., browsers), interfaces (e.g., keyboard navigation), and assistive technologies (e.g., screen readers) (PCYsg-S3g-p2).
• 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)?
  • For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
• 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-aUh-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-154401

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-154401&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-154401&env=a8c-for-agencies

[travisw]

I haven't had a chance to review this yet but one quick note. Can we change "Your client cancelled this product...", to "This product was cancelled..."?

\We discussed it briefly in the Linear issue, but we don't truly know who cancelled the subscription at this point (client, agency, a11n) so it's probably best to be a little more general in the messaging.

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• help-center

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/a4a/subscription-cancelled-status-info-toolip on your sandbox.