Purchase Management: Add manage button to dataviews purchase

[sirbrillig]

Proposed Changes

The DataViews version of the purchases list no longer links to the individual purchase page. We can probably add it as an action button on the last column, but we may also want to consider how that appears on mobile where most of the columns are hidden via horizontal scroll.

This PR also fixes sorting of the rows so it works more how customers would expect.

Note

This version of the purchases list is still behind a feature flag. To test this you will need to manually enable the purchases/purchase-list-dataview flag in your local development.json config before starting calypso.

Part of https://linear.app/a8c/project/replace-calypsos-active-upgrades-subscriptions-with-dataviews-a7b39dea5417/overview / #86616

Tracked by https://linear.app/a8c/issue/CHE-151/link-to-the-subscription-from-the-dataviews-subscription-list

Also fixes https://linear.app/a8c/issue/CHE-159/allow-sorting-dataviews-purchases-by-date-of-next-auto-renewal

Testing Instructions

• Use an account which has a number of purchases, the more the better.
• Visit /me/purchases with the DataView enabled (see above).
• Verify that you see a chevron on each purchase.
• Verify that clicking on the chevron redirects you to view the purchase management page.
• Try clicking on the column headings and verify that they sort the rows how you'd expect.

[matticbot]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~382 bytes added 📈 [gzipped])

name            parsed_size           gzip_size
purchases           +1312 B  (+0.0%)     +382 B  (+0.1%)
site-purchases        +14 B  (+0.0%)       +4 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[JessBoctor]

A couple of things came up when I was functionally testing this.

First, it looks like some types of purchases need to have the link the Purchase management screen filtered out. For example, the case of domain connection subscriptions:

Production PurchaseItem Component:

In this PR, when I click on the "Action" link for the domain connection, the purchase management screen never loads.

It looks like the logic for the filter in the PurchaseItem component is here:

wp-calypso/client/me/purchases/purchase-item/index.tsx

Line 820 in 5d8d65d

if ( getManagePurchaseUrlFor && slug ) {

Second, I saw that some sort of filtering was merged in #103788. However, when I view the DataViews in trunk, the filters don't appear.

But with this PR applied, the filters are shown, but are very broken. I don't know if that is a side effect of the React hooks, some other functionality bleeding through, or the filtering being incomplete.

[sirbrillig]

But with this PR applied, the filters are shown, but are very broken. I don't know if that is a side effect of the React hooks, some other functionality bleeding through, or the filtering being incomplete.

I'm guessing it's because I switched from @wordpress/dataviews to @automattic/dataviews in this PR. I'll see if I can figure it out.

[sirbrillig]

First, it looks like some types of purchases need to have the link the Purchase management screen filtered out. For example, the case of domain connection subscriptions:

Good find! I think it is only broken when the site has been deleted. I believe I've fixed it.

Second, I saw that some sort of filtering was merged in #103788. However, when I view the DataViews in trunk, the filters don't appear.

I've pushed a fix to prevent some fatal errors but you're right; the filtering is broken. I'll work on that in a separate PR.

Should this be added to the MembershipsDataViews component as well? This would ensure both tables handle mobile screens the same way.

I applied the fix and actions to Memberships also.

[sirbrillig]

Second, I saw that some sort of filtering was merged in #103788. However, when I view the DataViews in trunk, the filters don't appear.

Actually, since the TeamCity environment for this PR is broken and there's no fix in sight, I've spent the time to fix filtering (by disabling it for now – filtering only works with a list of options and I can't think of what sort of options we'd want to use for filtering) and improve sorting here. I think that sorting should actually provide everything we really need.

[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-manage-button-to-dataviews-purchase on your sandbox.

[a8ci18n]

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/17528033

Some locales (Hebrew, Japanese) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

Thank you @sirbrillig for including a screenshot in the description! This is really helpful for our translators.