#7575079 Purchases: Sort all user purchases by status urgency.

Proposed Changes

This PR sorts the purchases list at /me/purchases by “Status” (the Status column), so that purchases that are requiring some action (such as Pending activation, or Disconnected, or Plan expired, or Payment method expired, etc) will appear at the top of the list, sorted by importance/urgency.

Partially completes: Automattic/jetpack#22913 (comment)
Completes task: 1164141197617539-as-1201858908716160/f

Implementation notes:

The Purchases are still grouped together by site (like they always have been), and then the purchases/sites that require some action (such as disconnected site, license pending activation, expiring/expired subscription, etc are sorted to the top based on importance.

The sort order looks like this:

1. Site is disconnected
2. License not activated
3. Subscription expired
4. Subscription expiring soon (or CC expires before renew date)
5. Purchases where no action is needed
6. Purchases that are managed elsewhere (by hosting partner)

Also this PR updates the status for non-activated license-based purchases from “Pending activation” to a more actionable message of, “Activate your product license key” with a Learn more link pointing to a Jetpack.com page explaining how to activate product license keys. As suggested per issue Automattic/jetpack#22913

Ideally, next steps to follow-up this PR would be to convert /client/me/purchases-list component to a functional component and then memoize the getPurchasesBySite() with useMemo. Probably some other optimizations also..

Testing Instructions

It’s kind of difficult to test this PR.
The best way to test this PR is with a WordPress account with multiple connected sites, and ideally some of the sites will have 2 or more purchased products. And also ideally you will have 1 or more purchased, unactivated product license(s).
If you don’t have multiple sites with purchases, you will have to create/connect multiple Jurassic Ninja sites, and purchase a product (or more) for each of them. Then also purchase a product originating from Jetpack.com so that you will obtain a product license (But do not attach/activate it to a site).

• Do one of these:
  • Use the Calypso Live link:
    • Click the Calypso Live link below, and go to /me/purchases
  • Or spin up this PR by: git fetch && git checkout add/sort-all-user-purchases && yarn start
• Then go to http://calypso.localhost:3000/me/purchases
• Compare with WordPress.com and see that all purchases needing action are sorted to the top based on importance.
• You will likely want to Disconnect a site, then reload the page to see that it gets sorted to the top. (reconnect it when done)
• You may also likely want to open your purchases/subscriptions in Store Admin(SA) and modify subscription expiration dates to force products to be expired or expiring soon (<30 days). (Remember to set them back to the way they were, if they are on real, non-testing sites you own)

Screenshots: (Before & After):

BEFORE:

.
AFTER:

Pre-merge Checklist

• 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 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)?

• To see the specific tasks where the Asana app for GitHub is being used, see below:
  • 0-as-1201858908716160