Feature: add donation overview page

[JoshuaHungDinh]

Resolves GIVE-2601

Description

This PR introduces a new Donation Overview page to the GiveWP admin, providing a comprehensive summary and key insights for individual donations. The overview page is designed to improve the admin experience by consolidating donation details, statistics, and related actions into a single, easily navigable interface.

Changes to note:

• Added Overview Panel component to src/admin/components
• Update formatTimestamp util function to handle & return an additional readable format.
• Container components included in the Overview directory.

Component logic

DonationStats

• If donation has events ticket sales it should show the Events Statwidget otherwise its hidden.
• If Fee Recovery is not installed the color of the amount $0.00 should be grey & the statwidget should show an upgrade link.

DonationSummaryGrid

• Clicking on the Campaign Title should direct the user to the Campaign page.
• Clicking on the Donor Name should direct users to the Donor page.
• If available the View donation on gateway link should send the user to the appropriate gateway.

Affects

Donation Overview page & components

Visuals

Testing Instructions

General

• Navigate to the new Donation Overview page in the GiveWP admin for an individual donation.
• Confirm the page loads successfully.

Component: DonationStats
If the donation includes event ticket sales:

• Confirm the Events Statwidget is visible.
• Ensure it displays relevant stats.

If the donation does not include event ticket sales:

• Confirm the Events Statwidget is hidden.

If the Fee Recovery add-on is not installed:

• The amount should be displayed as $0.00 in grey.
• The Fee Recovery Statwidget should show an "Upgrade" link.

If the Fee Recovery add-on is installed:

• The amount should use the standard color.
• The Statwidget should not display an upgrade link.

Component: DonationSummaryGrid

• Clicking the Campaign Title should navigate to the corresponding Campaign admin page.
• Clicking the Donor Name should navigate to the corresponding Donor admin page.

If gatewayViewUrl is available:

• The "View donation on gateway" link should be visible. Clicking it should open the correct gateway dashboard page in a new tab.
• If gatewayViewUrl is not available: the link should not be shown.

Pre-review Checklist

• Acceptance criteria satisfied and marked in related issue
• Relevant @unreleased tags included in DocBlocks
• Includes unit tests
• Reviewed by the designer (if follows a design)
• Self Review of code and UX completed

[pauloiankoski]

Great job! I’m approving this 👏
There are just a couple of small things we might want to revisit later:

• I’m wondering if it wouldn’t be better for gateways to provide their own view URL, maybe as a method in the Gateway API. That way, given a transactionId, each gateway could return its formatted URL. The current approach might make it harder for other gateways (including 3rd-party ones) to have their view URLs shown in the Donation Details page.
• Also, we’re not showing the gateway title properly at the moment. Maybe we could get the title directly from the gateway and include it already formatted in the API response?

Nothing blocking for now, just some ideas to consider moving forward 🙂

[JoshuaHungDinh]

@pauloiankoski Thanks! For the Payment method title - I actually did update where we were pulling that information from but did not update the visuals for you in time. Its updated now but I am however working with Jeffrey to get icons for all the gateways.

I'll make sure to circle back on how we are providing the urls! Could be a good Fun-Friday thing I might bring you in on 😄

[jonwaldstein]

@JoshuaHungDinh @pauloiankoski we should definitely not be hardcoding gateway links here. There is an existing filter that gateways use to display their link on the current details page that we can use for now since all gateways are already using it:

apply_filters( "give_payment_details_transaction_id-{$gatewayId}", $gatewayTransactionId, $donationId )

We can create a dedicated method in the gateway api for this as well - but should start by using the filter