[L] Year in Review - Build initial paging UI component
Closed, ResolvedPublic
Actions

Assigned To

None

Authored By

	Tsevener
	Sep 24 2024, 9:55 PM

Description

Background

The Apps team plans to explore if a personalized Wikipedia Year in Review feature that displays insights about a user's reading history, editing history, and donation history is engaging for App users, and inspires them to make a donation to the Wikimedia Foundation.

Task

This task is to build the UI paging component view for the Year in Review paging flow to match designs in Figma. A separate task for the entry point, introduction and closing screens, and the data populating this paging component will be created later. For now a new item in the profile view as an entry point will suffice (badge is not necessary at this point).

Screenshot 2024-09-27 at 11.55.56 AM (379×182 px, 27 KB)

Notes:

New component UI work must live in WMFComponents. Component must theme properly and fonts must scale properly.
The elements aligned to the bottom (Continue, Learn more buttons, Hashtag card, Share button, paging indicators, Next button) might need to pin to the bottom. The image, title text, and body text will likely need to be scrollable for smaller screens. (Confirm this assumption with design).
Build with SwiftUI if possible.
Do not add any animations yet, just a static image for the component.

Before we merge the PR: We need to either remove the entry point in profile, or add a developer feature flag for the entry point (task TBD).

1. Test Notes
To have entry point, test in build 170 OR uncomment lines 178-199 in WMFProfileViewModel - this PR has the entry point commented out

QA Notes

Install app
Ensure device region in iOS settings is set to Mexico or Italy
Ensure primary app language is set to Spanish, Italian or English
Tap through rabbit hole to build up 6+ articles in the History tab if needed
Enable year in review feature flag in app developer settings menu
Background / foreground the app to trigger report creation.
Year in Review entry point should appear in Profile menu
Test year in review slides according to Figma. Done button, next button, theming, and dynamic type should work. Note the final donate slide (T376073) will not yet be in place.

Related Objects
Search...

Status	Assigned	Task
Resolved	HNordeenWMF	T371946 [Epic] Wikipedia Year in Review on iOS App
Resolved	None	T376037 [Engineering Epic] Wikipedia Year in Review V1 Main Flow & Actions
Resolved	None	T375566 [L] Year in Review - Build initial paging UI component

Event Timeline

Tsevener created this task.Sep 24 2024, 9:55 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 24 2024, 9:55 PM

Tsevener updated the task description. (Show Details)Sep 27 2024, 4:56 PM

Tsevener updated the task description. (Show Details)

Tsevener assigned this task to GOlson-WMF.Sep 27 2024, 7:26 PM

Tsevener edited projects, added Wikipedia-iOS-App-Backlog (iOS Release FY2024-25); removed Wikipedia-iOS-App-Backlog.

Tsevener moved this task from Tasks from Product Backlog to Ready for future sprints on the Wikipedia-iOS-App-Backlog (iOS Release FY2024-25) board.

Tsevener added a subscriber: GOlson-WMF.

Tsevener removed a subscriber: GOlson-WMF.

HNordeenWMF triaged this task as Medium priority.Sep 30 2024, 2:54 PM

HNordeenWMF added a parent task: T371946: [Epic] Wikipedia Year in Review on iOS App .Sep 30 2024, 2:57 PM

HNordeenWMF mentioned this in T376037: [Engineering Epic] Wikipedia Year in Review V1 Main Flow & Actions.Sep 30 2024, 3:11 PM

HNordeenWMF edited parent tasks, added: T376037: [Engineering Epic] Wikipedia Year in Review V1 Main Flow & Actions; removed: T371946: [Epic] Wikipedia Year in Review on iOS App .

HNordeenWMF updated the task description. (Show Details)Sep 30 2024, 3:36 PM

HNordeenWMF mentioned this in T376044: [M] Present paging components when tapping Profile item.Sep 30 2024, 5:50 PM

HNordeenWMF mentioned this in T376046: [M] Attach donate logic to page slides.

HNordeenWMF moved this task from Ready for future sprints to Current Sprint Work on the Wikipedia-iOS-App-Backlog (iOS Release FY2024-25) board.Sep 30 2024, 6:55 PM

GOlson-WMF moved this task from Current Sprint Work to Doing on the Wikipedia-iOS-App-Backlog (iOS Release FY2024-25) board.Oct 1 2024, 4:50 PM

Tsevener renamed this task from Wikiwrapped - Build initial paging UI component to [L] Wikiwrapped - Build initial paging UI component.Oct 1 2024, 6:09 PM

GOlson-WMF updated the task description. (Show Details)Oct 1 2024, 7:56 PM

l-olson1214 opened https://github.com/wikimedia/wikipedia-ios/pull/5000

@scblr - build 170 whenever you're ready! Note: I didn't copy the text directly from the Figma so it's dummy data for now but will be ripped out soonish

@GOlson-WMF a note that we would like the entry point to display for both logged-in and logged-out users

mazevedofs closed https://github.com/wikimedia/wikipedia-ios/pull/5000

@HNordeenWMF - will be added once we have the entry point as a "real" one - right now to keep users from accessing it, it'll be commented out so just using 1 for now :)

Got it - thanks @GOlson-WMF !

Tsevener mentioned this in T376073: [L] Add Donate slide for Year in Review, adjust slide component, create Learn more webview.Oct 3 2024, 5:28 PM

Tsevener mentioned this in T376071: [M] Introduction screen component for Year in Review.Oct 3 2024, 5:32 PM

Tsevener mentioned this in T376313: [S] Add/update profile view year in review item + badge state.Oct 4 2024, 1:33 PM

HNordeenWMF renamed this task from [L] Wikiwrapped - Build initial paging UI component to [L] Year in Review - Build initial paging UI component.Oct 4 2024, 3:14 PM

HNordeenWMF updated the task description. (Show Details)

Tsevener mentioned this in T376355: [S] Info-icon on slides.Oct 4 2024, 4:49 PM

Thanks @GOlson-WMF – great work so far!

In addition to @HNordeenWMF’s earlier point to show the entry point to all users, I noticed the following:

1) Please group the "Year in Review" menu item with the "Donate" option to streamline the menu architecture:

Design	vs	Implementation

2) Streamline horizontal alignment of labels, icons, and slider dots in the bottom section:

Design	vs	Implementation

3) Highlight the active slide with the accent (blue) color:

CleanShot 2024-10-14 at 17.23.49.png (2×1 px, 218 KB)

4) Likely not part of this PR, but the info icon is missing from the view:

CleanShot 2024-10-14 at 17.26.46.png (1×786 px, 120 KB)

PS: I tried to study all the changes discussed last week, but please review my comments, @HNordeenWMF, in case I missed something.

• scblr moved this task from Design signoff to Did not pass design review on the Wikipedia-iOS-App-Backlog (iOS Release FY2024-25) board.Oct 14 2024, 3:30 PM

@GOlson-WMF

In addition to @HNordeenWMF’s earlier point to show the entry point to all users, I noticed the following:

Please group the "Year in Review" menu item with the "Donate" option to streamline the menu architecture:

For these two pieces, I did this work in my PR for T376042, so no need to address those in this task.

Likely not part of this PR, but the info icon is missing from the view:

We have a separate task for adding the info-icon/tooltip T376355. It'd be ideal if we don't add the visual element until we're able to have the tooltip/link working (as it's a nice-to-have).

@scblr it would also be good to review this task: https://phabricator.wikimedia.org/T376044 at the same time

Toni took care of 1, fixed 2 and 3, and 4 will be in that other ticket :)

Build #174

Tsevener moved this task from Did not pass design review to Design signoff on the Wikipedia-iOS-App-Backlog (iOS Release FY2024-25) board.Oct 15 2024, 9:11 PM

Update: build #176

Tsevener mentioned this in T376066: [M] Article total personalized slide: You read 350 articles.Oct 17 2024, 2:34 PM

@GOlson-WMF and I tweaked this in real-time together – looks great now!

• scblr moved this task from Design signoff to Needs Code Review on the Wikipedia-iOS-App-Backlog (iOS Release FY2024-25) board.Oct 17 2024, 6:06 PM

Tsevener moved this task from Needs Code Review to Waiting for Build on the Wikipedia-iOS-App-Backlog (iOS Release FY2024-25) board.Oct 17 2024, 10:35 PM

Tsevener moved this task from Waiting for Build to Needs QA signoff on the Wikipedia-iOS-App-Backlog (iOS Release FY2024-25) board.Oct 28 2024, 12:10 PM

Tsevener updated the task description. (Show Details)Oct 28 2024, 12:18 PM

Tsevener removed GOlson-WMF as the assignee of this task.Oct 28 2024, 12:25 PM

Tsevener added a subscriber: GOlson-WMF.

Testing on 7.6.2 (4337). This is working for me on iPhone for both personalized and collective slides. This is not working for me on iPad. On iPad, I only see the collective slide regardless of the number of articles in the history.

ABorbaWMF moved this task from Did not pass QA to Ready for PM Signoff on the Wikipedia-iOS-App-Backlog (iOS Release FY2024-25) board.Oct 31 2024, 10:20 PM

HNordeenWMF moved this task from Ready for PM Signoff to Ready for Release on the Wikipedia-iOS-App-Backlog (iOS Release FY2024-25) board.Nov 1 2024, 6:30 PM

HNordeenWMF closed this task as Resolved.Nov 22 2024, 3:47 PM

	F57613318: CleanShot 2024-10-14 at 17.26.46.png
	Oct 14 2024, 3:30 PM

	F57613311: CleanShot 2024-10-14 at 17.23.49.png
	Oct 14 2024, 3:30 PM

	F57613301: CleanShot 2024-10-14 at 17.19.31.png
	Oct 14 2024, 3:30 PM

	F57613309: CleanShot 2024-10-14 at 17.21.32.png
	Oct 14 2024, 3:30 PM

	F57613293: CleanShot 2024-10-14 at 17.14.06.png
	Oct 14 2024, 3:30 PM

	F57562738: Screenshot 2024-09-27 at 11.55.56 AM
	Sep 27 2024, 4:56 PM

	F57583186: image.png
	Oct 2 2024, 4:47 PM

[L] Year in Review - Build initial paging UI componentClosed, ResolvedPublicActions