PR https://github.com/wikimedia/wikipedia-ios/pull/5029

tonisevener closed https://github.com/wikimedia/wikipedia-ios/pull/5029

@scblr
I'm not sure if this falls under needing design review or not, but the navigation to the donate forms are in place for Year in Review. You can test on the latest main Wikipedia (white icon) TestFlight build.

1. Ensure device region is a supported country code (Italy, Mexico)
2. Ensure primary app language wiki is supported (EN works)
3. Tap through articles to build up a history of 5+ articles
4. Go to developer settings menu, enable feature flag
5. Background/foreground the app to trigger report population
6. Entry point should appear in Profile

Thanks @Tsevener. Per the conversation today with @HNordeenWMF, I reviewed this to see if the flow works. I think it does work (for V1), so I’m moving it to the next column.

In the future, I suggest including the donation views (apple pay and web view) to a modal and stack it on top of the current view:

It makes going back to the core flow easier for users.

@scblr @HNordeenWMF Here's the main blocker to that approach. Any time you show a web view, it has the potential to push on more webviews, and eventually articles, talk pages, editing flows, etc. It can send users into many unexpected places and cause bugs. This video should demonstrate the problem with presenting donation in a modal from YiR. It's easiest if we keep the navigation structure as flat as possible. I would like to avoid presenting more modal flows until we first dismiss the first one:

https://drive.google.com/file/d/1_DIjgfLwVJixkl5xMGJnrAAU5dTfh15N/view?usp=drive_link

Also Apple discourages modals on top of modals in general:

Let people dismiss a modal view before presenting another one. Allowing multiple modal views to be visible at the same time tends to create visual clutter and can make your app seem scattered and disorganized. People need to remember the context they were in before a modal view appears, so presenting multiple views adds to people’s cognitive load, especially when a modal view hides another one by appearing on top of it. Although an alert can appear on top of all other content — including other modal views — you never want to display more than one alert at the same time.

I would love to figure this out since it keeps coming up in requests, but we need a direction on how to deal with that problem first. We could kick any web view out to the Safari app instead so they don't lose their place, but my understanding is that we want them to stay in the app as much as possible. Also we would lose some niceties like the "Return" button on the thank you page in the in-app web view, and the "thank you" toast after they come back from donating.

Looks good to me on 7.6.2 (4337)

When I navigate back to "Explore" from the WebView of donate.wiki after "Donate" from an early slide and choosing "other payment method", Year in Review is not presented again.
@Tsevener checking that this is correct, I think you were exploring if it could be presented again at the correct spot.

@HNordeenWMF https://phabricator.wikimedia.org/T376073#10263278 This is where we discussed that - back when I was thinking we would dismiss YiR before showing any in-app web view for Learn more. If we were going to get it working with Learn more, then the plan was to incorporate that into Donate.

Now we're going to try to present the Learn more in-app web view over YiR in T376073, so we won't get a chance to look at this for the Donate flows. Let me know if you want me to look at it, you can either kick this task back or create a new one.

Thanks @Tsevener, Is it possible present the donation flow over YiR similar to how we're doing for in-app WebViews?

@HNordeenWMF @scblr I kicked off a build (Experimental 188), let me know if this is what you were thinking!

This works @Tsevener, thanks!

We must look at consistent options to close, go back, or dismiss modals in the future. I suggest doing this as one of the next items on our list to unify the app’s interface. A few examples from only this feature:

Oh, and I noticed the globe was missing on the first slide in this build (188) 👇

FYI @HNordeenWMF

Thanks @Tsevener, Is it possible present the donation flow over YiR similar to how we're doing for in-app WebViews?

This is what I meant in T376046#10274452:

In the future, I suggest including the donation views (apple pay and web view) to a modal and stack it on top of the current view:

It makes going back to the core flow easier for users.

tonisevener opened https://github.com/wikimedia/wikipedia-ios/pull/5048

Thanks @Tsevener this looks great to me on Mobile. The way it shows on iPad makes me hesitate (I know you already raised this on a different task, apologies). On my iPad 12.9, I get the desktop view of Donate wiki within the small window after step 1.
https://drive.google.com/file/d/1SSNYEa9xZ0b9A6BhUousjLkrefIu_qxR/view?usp=sharing
cc @scblr, check out the above video for iPad user experience.

Is there any modification that could make the iPad WebView larger in that scenario?
If not, I want to reevaluate if this is the right solution over dismissing & re-presenting the correct slide of Year in Review.

@HNordeenWMF I kicked off another build (Experimental 189) expanding the preferred content size for the web view, let me know if that fixes it for you!

Thanks @Tsevener, that's much better. I'll leave this for @scblr 's final review

I tried it out as well on an iPad Mini, and it works perfectly with the bigger window size:

@Tsevener – did you apply the change system-wide? I noticed that e.g., the profile menu uses full-width, but maybe that was the case all along:

There is no need to change anything; it is just good to know for new designs.

Thanks for the work @Tsevener!

CC @HNordeenWMF

@scblr

did you apply the change system-wide? I noticed that e.g., the profile menu uses full-width, but maybe that was the case all along:

I only applied it to the in-app web view. So all in-app web views, when presented modally like that (which at this point is only this YiR donate web view), will display in that larger expanded form.

For all other page sheet modals the system will size however it wants. I have noticed for iPad mini sizes (portrait), the system expands it to full width.

Looks good to me on 7.6.2 (4403)

Looks great, thanks for all the hard work on this @Tsevener

I am just noticing that the Native Payment form when accessed from YiR Doesn't have a Close X/Back/Done button, the only way out is to swipe down. This is not a blocker to release, but a more explicit option to navigate back out from this form would be a nice-to-have. We could skip instrumentation on this button

@scblr showed what this could look like earlier.

In T376046#10274452, @scblr wrote:

Thanks @Tsevener. Per the conversation today with @HNordeenWMF, I reviewed this to see if the flow works. I think it does work (for V1), so I’m moving it to the next column.

In the future, I suggest including the donation views (apple pay and web view) to a modal and stack it on top of the current view:

It makes going back to the core flow easier for users.

Screenshots for reference - I'm also seeing a lack of contrast in the header "Select an amount" for Sepia

Native form from App Menu	Native form from YiR	Native form YiR in Sepia
		{F57699217}

l-olson1214 closed https://github.com/wikimedia/wikipedia-ios/pull/5073

When the Donate button is 2 lines with a translation, it causes some weirdness with the illustrations. Not a blocker, but noting it in case there is a way to make the button more robust for longer translations of "Donate"
https://drive.google.com/file/d/19hX5U7lQef6QiMa2EoFr9M-nD3p8Gwlq/view?usp=sharing

Looking good for me on 7.6.2 (4471)