Transactions Download functionality Improvements #10211
Conversation
Test the buildOption 1. Jetpack Beta
Option 2. Jurassic Ninja - available for logged-in A12s🚀 Launch a JN site with this branch 🚀 ℹ️ Install this Tampermonkey script to get more options. Build info:
Note: the build is updated when a new commit is pushed to this PR. |
|
Size Change: +492 B (0%) Total Size: 1.28 MB
ℹ️ View Unchanged
|
jessy-p
changed the title
jessy-p
changed the title
- The response is changed to an array - If the file times out, don't show an error. The file may be emailed.
- Removed the file URL check that blocks local testing - Changed isDownloading to isExportInProgress - Removed the track event as it is not user triggered.
…attic/woocommerce-payments into update/9969-poll-async-job
…rom useReportExport().
|
✅ Failing e2e test is unrelated, due to the removal of the date settings notice in #10129: 
|
There was a problem hiding this comment.
This tests well! I've tested it on a Pressable site against with various filters enabled, all is working smoothly. It feels magic to have a transact-platform-server generated CSV appear so instantly as a client-side download 🌟
Flicking my network off immediately after clicking download, to force the polling to fail, results in the CSV still being emailed, and the UI gracefully cancelling the polling process ✅
I've added some minor commits that:
- Remove unused
sprintfimport in cfead56 - Add extra documentation for export response interfaces in b068840: I was getting confused reading
ExportResponseandExportURLResponseand thought that we can make it clearer what these response objects contain and their purpose in the export flow. - Add
isBusyprop toDownloadButtonto show loading state during export in b52e61f - this provides better user feedback while the export is being processed, following WP component patterns for loading states. If this change is incorrect, e.g. I missed a discussion about this already, please feel free to revert it 👍
Button.isBusy.mov
Pulling some thoughts from our discussion in Slack (p1738811085595819-slack-C02BW3Z8SHK):
Do you think the notice stays for too much time ?
No, I think it is a sufficient amount of time for the merchant to read the message, and the Snackbar can be dismissed on click.
Is the polling working reliably (just once, I felt like it polled once, and failed - worked all the other times). I haven't changed anything about it, so not sure if it was just a issue with my build that one time.
It has been reliable for me when testing on a Pressable site 👍
changelog/update-9969-poll-async-job
Outdated
| Significance: minor | ||
| Type: update | ||
|
|
||
| Replaced JS export with downloading Transactions CSV from service. |
There was a problem hiding this comment.
Maybe this could be more descriptive, to explain the changes from a merchant's perspective.
| Replaced JS export with downloading Transactions CSV from service. | |
| Enhanced transaction CSV exports with async transact platform service processing, improving the CSV export experience. |
(My attempt, please modify or ignore 😉)
There was a problem hiding this comment.
Updated the change log with hints from what you have shared, Eric - ef7b796
There was a problem hiding this comment.
Quick review - tested locally only. Looking good, we can maybe polish the flow a little more but we can do that as follow up.
- In my first test, the download didn't happen, and felt strange when the button was still spinning but the snackbar had disappeared. Would be nice if we can sync them, but this is maybe an edge case.
- The snackbar is a little sad, it should be be gently triumphant!
client/transactions/list/index.tsx
Outdated
| __( | ||
| 'There was a problem generating your export.', | ||
| 'Processing your export. The file will download automatically and will be emailed to %s', |
There was a problem hiding this comment.
This wording feels a little sad! Not a blocker but here are some ideas:
- Can we add a symbol / emoji to make it more happy / triumphant?
- Add a full stop at end of sentence so it doesn't dangle
- If possible, might be helpful to use different formatting for the email (bold or something).
✅ Now processing your export. The file will automatically download and will be emailed to [email protected].
There was a problem hiding this comment.
I have added an icon and full stop. I was unable to add a bold font face for the email, since createNotice supports only string.
There was a problem hiding this comment.
Hmmm @haszari @nagpai @jessy-p I feel like this first part of the message sounds a bit weird.. could we say: "We’re processing your export. The file will download automatically and be emailed to [email]."
In terms of the celebratory symbol and layout, could we remove the side padding and keep the style consistent with the original component without diverging too much? If we want, we could add 🚀 or 🎉 inline instead.
For example:
We’re processing your export. 🎉 The file will download automatically and be emailed to [email].
or
We’re processing your export. The file will download automatically and be emailed to [email]. 🚀
I'm just thinking ✅ means finished. But if you want to keep it, then please, could it be inline?
There was a problem hiding this comment.
We’re processing your export. 🎉 The file will download automatically and be emailed to [email].
Sounds good to me, thanks for following up and refining this @rogermattic !
Also works without the emoji, if that's preferable:
We’re processing your export. The file will download automatically and be emailed to [email].
|
Since we have approvals, and no more blocking feedback remains, I am merging this branch. It will also help speed up Disputes and Payout exports. If any major bugs are found, we can reopen. |
Fixes #10255 which is part of the Epic #9969
Summary
The PR moves Transaction exports to a single implementation via Transact Platform Service API. This does away with the redundant JS based export for a single page export, and email + server export for larger data, that led to data inconsistency and additional maintenance overhead. With this PR, the merchant gets a browser download via an async service request, if it takes within 6 seconds ( 1 + 6 retries at 1 second interval ). There is always an email sent with the export file as a backup. If the file takes longer than 6 seconds to generate, the merchant will anyway get it on email.
For security reasons, we are unable to store the export file in the uploads folder on the server. We were guided by the systems team to asynchronously poll the job id of the export and use that to get the URL of the exported report.
Changes proposed in this Pull Request
@woocommerce/csv-exportbased JS export on the Transactions pagetransactions/downloadendpoint for all downloads instead.export_idtransactions/download/<export_id>endpoint to get the download URL.By removing the browser export and using only server based export, the functionality is simplified and made consistent. We also preserve the functionality for the merchant by making the file available immediately in the browser whenever possible.
Testing instructions
The necessary API changes to the Transact Platform Service is already merged
Checkout this branch on Pressable test site via Jetpack Beta, or Local + Sandbox.
Browse to
Payments > TransactionsClick the Export button in the top right corner of the report list
You should see a snack bar notice with copy and appearance similar to this screenshot:
Download various numbers of rows or filtered rows and check that the file is downloaded. An email is also sent to the merchant with the download URL.
If the cron job is not running/slow, i.e the file is not available, the file will not be downloaded and a message displayed that the file will be emailed. When the job runs, the email is sent.
Here is a video of the complete flow ( please watch in full screen since the snack bar notice is obscured by the player controls in small screen ):
Screen.Recording.2025-02-07.at.8.51.30.PM.mov
npm run changelogto add a changelog file, choosepatchto leave it empty if the change is not significant. You can add multiple changelog files in one PR by running this command a few times.Post merge