Stats Traffic date picker

[guarani]

Fixes #22382

Add the Stats Traffic date picker.

To test

Enable the feature flag: swipe right on any screen (h/t to @staskus for telling me about this), tap Feature Flags, enable Stats Traffic Tab. Then open the Stats Traffic tab.

Day selection

1. Go back and forth between different days
2. You shouldn't be able to go to future dates

Week selection

1. Switch to "By week"
2. Go back and forth between different calendar weeks (Monday to Sunday, inclusive)
3. The current week may include future days, but it should prevent you from going to the next week after that

Month selection

1. Switch to "By month"
2. Go back and forth between different calendar months (e.g. Jan 1-31st)
3. The current month may include future days, but it should prevent you from going to the next month after that

Year selection

1. Switch to "By year"
2. Go back and forth between different calendar years (e.g. Jan 1 to Dec 31, 2024)
3. The current year may include future days, but it should prevent you from going to the next year after that

Switching periods

1. Switch to "By week"
2. Go to a given week
3. Switch to "By day"
4. The date the picker lands on should be the date you were in beforehand

Regression Notes

1. Potential unintended areas of impact

The changes here are mostly isolated to the Traffic tab.

5. What I did to test those areas of impact (or what existing automated tests I relied on)

Not applicable.

6. What automated tests I added (or what prevented me from doing so)

I manually tested the new date picker and added unit tests.

PR submission checklist:

• I have completed the Regression Notes.
• I have considered adding unit tests for my changes.
• I have considered adding accessibility improvements for my changes.
• I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

UI Changes testing checklist:

• Portrait and landscape orientations.
• Light and dark modes.
• Fonts: Larger, smaller and bold text.
• High contrast.
• VoiceOver.
• Languages with large words or with letters/accents not frequently used in English.
• Right-to-left languages. (Even if translation isn’t complete, formatting should still respect the right-to-left layout)
• iPhone and iPad.
• Multi-tasking: Split view and Slide over. (iPad)

[wpmobilebot]

📲 You can test the changes from this Pull Request in WordPress Alpha by scanning the QR code below to install the corresponding build.

	App Name	WordPress Alpha
	Configuration	Release-Alpha
	Build Number	pr22400-18b7d4b
	Version	24.3
	Bundle ID	org.wordpress.alpha
	Commit	18b7d4b
	App Center Build	WPiOS - One-Offs #8997

Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

[wpmobilebot]

📲 You can test the changes from this Pull Request in Jetpack Alpha by scanning the QR code below to install the corresponding build.

	App Name	Jetpack Alpha
	Configuration	Release-Alpha
	Build Number	pr22400-18b7d4b
	Version	24.3
	Bundle ID	com.jetpack.alpha
	Commit	18b7d4b
	App Center Build	jetpack-installable-builds #8035

Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

[guarani]

👋 @staskus, a heads-up: the date picker is working functionally, but visually isn't quite there yet. It also needs localization, testing, etc.

[staskus]

Shorten the date format, e.g. "Jan 14, 2024 - Jan 20, 2024" is too long

1. Agree. I think we should follow what is shown on designs IqhXWz3Iir7RMb5XH5gGfZ-fi-97_5069:

2. I also noticed that By Month, and By Year uses the date range instead of a single date, that could be fixed as well and would allow dates to fit:

3. Nit-pick. I think the space between chevron and date text could be a bit larger (Length.Padding.single) according to designs

[guarani]

👋 Thanks for the review comments, @staskus! I should have considered re-using some of the existing logic, so I'll see what can be done there.
Yes, you're right about the date format in the designs; it shows how to represent the different periods, so I will update it to match.

[mokagio]

I'm going to bump this to the next release because we'll be code freezing 24.3 today and it seems like this has not been approved yet.

It doesn't seem the case, but if it's very important that this makes it into this release, let me know and we'll organize a new beta once ready.

[guarani]

👋 Hey @staskus, this should be working now. Thanks for all the great feedback; I think I've incorporated it all in.

I added analytics, fixed the design and date formats, connected the date picker to the site's date, and refactored to use the existing date methods.

I haven't gone back and re-tested it all yet. If you have time, I'd appreciate your testing of this, but if not, I'll come back here and re-test everything tomorrow.

[staskus]

Thanks, looks and works well! Only left a couple of comments.

Day selection

• Go back and forth between different days
• You shouldn't be able to go to future dates

Week selection

Switch to "By week"

• Go back and forth between different calendar weeks (Monday to Sunday, inclusive)
• The current week may include future days, but it should prevent you from going to the next week after that

Month selection

• Switch to "By month"
• Go back and forth between different calendar months (e.g. Jan 1-31st)
• The current month may include future days, but it should prevent you from going to the next month after that

Year selection

• Switch to "By year"
• Go back and forth between different calendar years (e.g. Jan 1 to Dec 31, 2024)
  The current year may include future days, but it should prevent you from going to the next year after that

Switching periods

• Switch to "By week"
• Go to a given week
• Switch to "By day"
• The date the picker lands on should be the date you were in beforehand

Other tests

• Analytics
• RTL Language
• Dark mode
• Larger fonts
• Different orientations
• Voiceover

[staskus]

I found a corner-case issue that combines these two requirements:

The current month may include future days, but it should prevent you from going to the next month after that
The date the picker lands on should be the date you were in beforehand

1. Select By month
2. Come back a couple of months to November, 2023
3. Select By Year
4. Confirm 2023 is shown
5. Go forward to 2024
6. Select by month
7. Now the data loads for November, 2024 which is an unexistent future Month

[guarani]

Thanks for catching that. I've made a separate issue for it: https://github.com/wordpress-mobile/jetpack-issue-repo/issues/19

Enabling auto-merge now