Payments Overview Widget - Data Highlights

[anu-rock]

Description

Display the key numbers related to TPV in a 4-column layout just below the chart - charges, refunds, disputes, and fees - based on the selected filters.

Acceptance criteria

Tip

Check the design in additional context section below for up-to-date requirements.

• Create the 4-column layout component to display the key numbers and their trends (based on comparison period).
• Add tooltip icons for charges and fees.
• Hovering over each key number should reveal the "view report" link, click which redirects to the relevant report page along with the selected filters (eg. Transactions page). See pepjwh-Jw-p2#comment-872 for requirements specific to this link.
• Optimize for mobile web - 1-column, 4-row layout with "view report" link permanently visible.
• Add Tracks event(s) to record clicks on each data highlight.

Designs

Additional context

• Project - paJDYF-bWn-p2
• Designs - p6riRB-9OY-p2
• Widget breakdown - pepjwh-Jw-p2

[anu-rock]

The PR is reviewed and in good shape. Marking the issue as blocked until the API endpoint is ready. cc @Automattic/helix