Payment activity widget: show actual dates for selected time period preset for clarity, e.g. `Last 7 days: June 3 - June 9, 2024`

[nagpai]

Issue description

The Payment activity widget currently uses the InlineLabelSelect component.

We need a different label format for display of selection on the dropdown button

Current

Design

To Reproduce

1. Make sure you have the feature flag _wcpay_feature_payment_overview_widget enabled
2. Checkout this branch and browse to Payments > Overview
3. See the dropdown that appears on top right of the Your payment activity widget
4. It shows as Select option: Last 7 days
5. It should show Last 7 days: June 3 - June 9, 2024 as per design

Additional context

• PR - Reporting: Add preset date selector to the Payment activity widget
  Reporting: Add preset date selector to the Payment activity widget #8927

[haszari]

@nagpai I've updated the title to make the benefit to merchant clear – the gap is that the presets are easier to understand and use if there are dates shown.

[Jinksi]

If we want to match the design, the value will be rendered where the label is (e.g. Last 7 days rather than Select an option). This will be a different implementation to the props available for InlineLabelSelect, and we may prefer to create a new component for this case to avoid label/value/hint confusion. Or maybe a showValueInline prop would be suitable.

There are some UX and a11y considerations here – IMO we would want a label for this somewhere, e.g. aria-label="Period".

TLDR My concern is that we should have a label, e.g. "Period:", and render this consistently with the nearby "Currency:" select UI.

[jessy-p]

There are some UX and a11y considerations here – IMO we would want a label for this somewhere, e.g. aria-label="Period".

@rogermattic Could you confirm/double-check the design.

[jessy-p]

Moving to backlog for pending design and technical discussions.

[jessy-p]

Not a priority for 7.9 as it is a cosmetic change.

[rogermattic]

Thanks, guys, for this discussion!

To be honest, I design it this way, that the label changes depending on the period selected. Thought it was a nice, flexible and more user friendly way of telling the users what they are looking at, and the label – Period seemed a bit unhelpful and redundant to me.

But I can see how this make it overcomplicated to implement probably... and it is a single case that we would use it for - in all other dropdown cases we'd have a simple label. As you said @Jinksi :

TLDR My concern is that we should have a label, e.g. "Period:", and render this consistently with the nearby "Currency:" select UI.

The consistency would be an argument for simplifying it.

Is it a technical challenge to implement it this way (it's originally designed)?
If not, I'd say that makes it a little bit more user friendly, as I think the labels Month to date Last 7 days etc make it easier to understand the period at a glance.

[haszari]

Is it a technical challenge to implement it this way (it's originally designed)?

TLDR yes. We are working hard to try and use a consistent shared component for this time period selector, currency selector – and make that available for use elsewhere.

Adding a new kind of label / display behaviour for the time period use-case (i.e. the second use of the new component) would complicate things.

Longer term we can look at making the component more flexible, and support this different display/label mode, especially if we are successful in getting this component merged back into woo.

So TLDR it's a classic case of consistency == less effort, better to maintain vs. custom behaviour == more effort, more effort to maintain.

[rogermattic]

Makes sense!
Let's go with the Period label then :)

[haszari]

Note – I've added this to Payment activity card project, and removed from current sprint on Helix sprint board. This project / feature is paused, if we resume we should included this issue!

[rogermattic]

A note from me – when we are ready to resume this project, please would you mind giving me the heads up so I can check if at this point any further alignment with the Analytics project is needed? Thanks a lot!