Feature Request: Allow purchase management page to be sorted or filtered, especially by upcoming renewal date

[DavidRothstein]

What

It would be nice if the page at https://wordpress.com/me/purchases could be sorted (or have a default sort) by the date of upcoming auto-renewals. We used to have a separate "Upcoming Charges" page for that, which was removed a few years ago in favor of showing the renewal dates on this page; however, the old page listed the charges ordered by date, which was more useful.

@michaeldcain also mentioned to me that there may be some old designs for allowing this page to be sorted and filtered. And we could definitely imagine other ways to sort or filter it in general; for example, showing subscriptions that aren't scheduled to auto-renew, showing subscriptions without a payment method attached, etc.

Why

This would be useful for customers who own many sites or subscriptions, to keep track of what their upcoming charges are.

The screenshot below shows an example of what it looks like now when many subscriptions are present. The renewal dates for each subscription are shown, but the order isn't particularly useful for this purpose at all:

How

No response

[michaeldcain]

@michaeldcain also mentioned to me that there may be some old designs for allowing this page to be sorted and filtered.

Here they are: auq0mRJCnQxrR33yRi1o7x-fi-838_7324

[JessBoctor]

This is being worked on and tracked in pfOicC-hF-p2-Shilling

[JessBoctor]

Status update:

The PurchaseItem component is now being rendered in the DataViews table. This was launched in #101467

Next, I am breaking each of the "columns" of the PurchaseItem component out.

1. Sites -> Renders the Site icon
2. Product -> Rendered the product and which site it was purchased for
3. Status -> Current status of the subscription (e.g. next renewal date, one time purchase, expired, etc)
4. Payment method -> Renders the payment method which has been assigned to the subscription

[JessBoctor]

The PurchaseItem component has been broken down into the columns in four PRs:

1. Purchase Management: Convert Active Upgrades to DataViews Column 1: Sites #101373
2. Purchase Management: Active upgrades DataViews Conversion column 2: Product #102630
3. Purchases Management: Active upgrades DataViews Column 3: Status #102666
4. Purchases Management: Active upgrades DataViews Column 4: Payment Methods #102514

Two of the four PRs have merged. Third (#102666) is ready to go. Fourth (#102514) will need a rebase.

Once all four columns have merged, I will tackle CSS Styling, then the onChangeView function to handle the actual sorting, filtering, and pagination actions.

[JessBoctor]

Status Update:

🏅 Wins:

• 🚢 The PRs to split the PurchaseItem component out into four columns have all been merged. This means the functionality for each section has been pulled into their own functional components while PurchaseItems still renders in production.
• </> The CSS adjustments are in progress (Purchase management: Correct DataViews table CSS #102711)

⛰ Challenges:
It turns out that if a user makes a user-to-user purchase (Earn/Memberships/Newsletters/Etc) the purchase is rendered outside of the original site-based purchases rendered by PurchaseItem. This means that these types of purchases are now being rendered below the DataViews table.

I created an issue to work out what to do about this here: #102945

Next Up

• Decide on what purchases information should be filterable
• Complete onChangeView() to handle the user selections

[sirbrillig]

Something to note: #103064 disables the development feature flag for this list because apparently it breaks some e2e tests (I didn't know they used the dev environment but 🤷). So future development will require flipping on the flag manually until I can fix those tests.

[JessBoctor]

Status Update

🏅 Wins:

• @sirbrillig and I paired up to decide on how to handle the user-to-user purchases. PR is pending tests and review: Purchase Management: Show second DataViews table for membership purchases #103345
• CSS updates are getting close to being done: Purchase management: Correct DataViews table CSS #102711

⛰ Challenges:
There are some E2E tests which are failing when the purchases/purchase-list-dataview feature flag is set to true. This will need to be investigated.

Next up:

• Pagination
• Filter & Sort
• Search

[JessBoctor]

Status Update

🏅 Wins:

• 🚢 The fix for handling membership subscriptions was merged
• The PR for correcting the CSS is ready for review

⛰ Challenges:

• Nothing this week

Next up:

• Pagination
• Filter & Sort
• Search

[sirbrillig]

There's one more thing I noticed while testing the CSS PR (and maybe you already know): I think the table view has lost the ability to link to the single purchase view. This becomes particularly notable at mobile width due to the horizontal scrolling.

Production	DataView	DataView scrolled