@Mazevedo

Sync notes:

Persist a campaign ID and Maybe later date (time they tapped Maybe later + 2 days). Then in ArticleViewController+Announcements.swift, before displaying check this data. If current date is after maybe later date, and before campaign ends, present campaign modal again.

Hi @Pcoombe

We are trying to implement an in-app WebView to process the donation but it shows some error messages and is stuck in the initial loading state.

The campaign dialog	Hit "Donate now" and open an in-app WebView

Do you have any idea about why it stucks at the initial loading state?

It looks like some JavaScript cannot be processed in the WebView, please check the log below:

2023-09-28 16:22:24.782  7731-7731  chromium                org.wikipedia.dev                    I  [INFO:CONSOLE(123)] "jQuery.Deferred exception: Cannot read properties of null (reading 'toUpperCase') TypeError: Cannot read properties of null (reading 'toUpperCase')
                                                                                                        at https://donate.wikimedia.org/w/index.php?title=MediaWiki:DonationForm.js&action=raw&ctype=text/javascript:1158:64
                                                                                                        at fire (https://donate.wikimedia.org/w/load.php?lang=en&modules=ext.eventLogging%7Cext.fundraiserLandingPage.LogPageview%7Cext.uls.common%2Ccompactlinks%2Cinterface%2Cpreferences%2Cwebfonts%7Cext.urlShortener.toolbar%7Cjquery%2Coojs%2Csite%7Cjquery.client%2CtextSelection%7Cjquery.uls.data%7Cmediawiki.String%2CTitle%2CUri%2Capi%2Cbase%2Ccldr%2Ccookie%2CjqueryMsg%2Clanguage%2Cstorage%2Cuser%2Cutil%7Cmediawiki.editfont.styles%7Cmediawiki.libs.pluralruleparser%7Cmediawiki.page.ready%7Cskins.vector.legacy.js&skin=vector&version=abhvk:117:705)
                                                                                                        at Object.add [as done] (https://donate.wikimedia.org/w/load.php?lang=en&modules=ext.eventLogging%7Cext.fundraiserLandingPage.LogPageview%7Cext.uls.common%2Ccompactlinks%2Cinterface%2Cpreferences%2Cwebfonts%7Cext.urlShortener.toolbar%7Cjquery%2Coojs%2Csite%7Cjquery.client%2CtextSelection%7Cjquery.uls.data%7Cmediawiki.String%2CTitle%2CUri%2Capi%2Cbase%2Ccldr%2Ccookie%2CjqueryMsg%2Clanguage%2Cstorage%2Cuser%2Cutil%7Cmediawiki.editfont.styles%7Cmediawiki.libs.pluralruleparser%7Cmediawiki.page.ready%7Cskins.vector.legacy.js&skin=vector&version=abhvk:118:222)
                                                                                                        at HTMLDocument.<anonymous> (https://donate.wikimedia.org/w/index.php?title=MediaWiki:DonationForm.js&action=raw&ctype=text/javascript:1148:43)
                                                                                                        at mightThrow (https://donate.wikimedia.org/w/load.php?lang=en&modules=ext.eventLogging%7Cext.fundraiserLandingPage.LogPageview%7Cext.uls.common%2Ccompactlinks%2Cinterface%2Cpreferences%2Cwebfonts%7Cext.urlShortener.toolbar%7Cjquery%2Coojs%2Csite%7Cjquery.client%2CtextSelection%7Cjquery.uls.data%7Cmediawiki.String%2CTitle%2CUri%2Capi%2Cbase%2Ccldr%2Ccookie%2CjqueryMsg%2Clanguage%2Cstorage%2Cuser%2Cutil%7Cmediawiki.editfont.styles%7Cmediawiki.libs.pluralruleparser%7Cmediawiki.page.ready%7Cskins.vector.legacy.js&skin=vector&version=abhvk:120:648)
                                                                                                        at process (https://donate.wikimedia.org/w/load.php?lang=en&modules=ext.eventLogging%7Cext.fundraiserLandingPage.LogPageview%7Cext.uls.common%2Ccompactlinks%2Cinterface%2Cpreferences%2Cwebfonts%7Cext.urlShortener.toolbar%7Cjquery%2Coojs%2Csite%7Cjquery.client%2CtextSelection%7Cjquery.uls.data%7Cmediawiki.String%2CTitle%2CUri%2Capi%2Cbase%2Ccldr%2Ccookie%2CjqueryMsg%2Clanguage%2Cstorage%2Cuser%2Cutil%7Cmediawiki.editfont.styles%7Cmediawiki.libs.pluralruleparser%7Cmediawiki.page.ready%7Cskins.vector.legacy.js&skin=vector&version=abhvk:121:309) undefined", source: https://donate.wikimedia.org/w/load.php?lang=en&modules=ext.eventLogging%7Cext.fundraiserLandingPage.LogPageview%7Cext.uls.common%2Ccompactlinks%2Cinterface%2Cpreferences%2Cwebfonts%7Cext.urlShortener.toolbar%7Cjquery%2Coojs%2Csite%7Cjquery.client%2CtextSelection%7Cjquery.uls.data%7Cmediawiki.String%2CTitle%2CUri%2Capi%2Cbase%2Ccldr%2Ccookie%2CjqueryMsg%2Clanguage%2Cstorage%2Cuser%2Cutil%7Cmediawiki.editfont.styles%7Cmediawiki.libs.pluralruleparser%7Cmediawiki.page.ready%7Cskins.vector.legacy.js&skin=vector&version=abhvk (123)
2023-09-28 16:22:24.783  7731-7731  chromium                org.wikipedia.dev                    I  [INFO:CONSOLE(123)] "Uncaught TypeError: Cannot read properties of null (reading 'toUpperCase')", source: https://donate.wikimedia.org/w/load.php?lang=en&modules=ext.eventLogging%7Cext.fundraiserLandingPage.LogPageview%7Cext.uls.common%2Ccompactlinks%2Cinterface%2Cpreferences%2Cwebfonts%7Cext.urlShortener.toolbar%7Cjquery%2Coojs%2Csite%7Cjquery.client%2CtextSelection%7Cjquery.uls.data%7Cmediawiki.String%2CTitle%2CUri%2Capi%2Cbase%2Ccldr%2Ccookie%2CjqueryMsg%2Clanguage%2Cstorage%2Cuser%2Cutil%7Cmediawiki.editfont.styles%7Cmediawiki.libs.pluralruleparser%7Cmediawiki.page.ready%7Cskins.vector.legacy.js&skin=vector&version=abhvk (123)
2023-09-28 16:22:25.478  7731-7731  ViewRootIm...wActivity] org.wikipedia.dev                    I  ViewPostIme pointer 0
2023-09-28 16:22:25.568  7731-7731  ViewRootIm...wActivity] org.wikipedia.dev                    I  ViewPostIme pointer 1
2023-09-28 16:22:26.111  7731-7731  ViewRootIm...wActivity] org.wikipedia.dev                    I  ViewPostIme pointer 0
2023-09-28 16:22:26.161  7731-7731  ViewRootIm...wActivity] org.wikipedia.dev                    I  ViewPostIme pointer 1
2023-09-28 16:22:27.783  7731-7731  chromium                org.wikipedia.dev                    I  [INFO:CONSOLE(0)] "The resource https://donate.wikimedia.org/static/images/project-logos/donatewiki-2x.png was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.", source: https://donate.wikimedia.org/?uselang=en&appeal=JimmyQuote&utm_medium=WikipediaApp&utm_campaign=Android&utm_source=app_2023_enNL_Android_control (0)
2023-09-28 16:22:40.236  7731-10530 AdrenoVK                org.wikipedia.dev                    I  QUALCOMM build          : fdd61e0, I20154638fb
                                                                                                    Build Date              : 10/07/20
                                                                                                    Shader Compiler Version : EV031.27.05.01
                                                                                                    Local Branch            : 
                                                                                                    Remote Branch           : refs/tags/AU_LINUX_ANDROID_LA.UM.8.3.R1.10.00.00.520.058
                                                                                                    Remote Branch           : NONE
                                                                                                    Reconstruct Branch      : NOTHING

Hi @Pcoombe

It looks like the page can be loaded if I put the redirected URL in the Webview:
https://donate.wikimedia.org/w/index.php?title=Special:LandingPage&country=US&uselang=en&utm_medium=WikipediaApp&utm_source=app_2023_enNL_Android_control&utm_campaign=Android&appeal=JimmyQuote

However, it will still have some issues while trying to make payment through PayPal or Google Pay (or maybe other payment methods).

Please see the video: https://youtube.com/shorts/gYGzk36eLgU

@JTannerWMF @Seddon
I don't think it will be an easy fix for the existing in-app WebView to be able to complete the payment process if we need to release it on October 15. Can we use CustomTab to display the donate.wiki page?

It will still open the page in the app, and it runs the web page by the default browser on the device. See screenshot below:

Tap on the close button will return to the app.

Hi @scblr

Please download the APK from the ticket description to see the implementation while I work on the last step of the PR.

Here's the screenshot of dev preferences, which contains some new values.

1. Use the test.wikipedia debug URL, which refers to this link: https://test.wikipedia.org/wiki/MediaWiki:AppsCampaignConfig.json
2. announcementPauseTime means the time (in milliseconds) when you click "Maybe later" option in the dialog. You can remove the value or decrease the number (for example: 1690000000 to 1590000000) to see the "Maybe later" button again.

I am still working on the issue of the "Thank you" page being opened in the default browser app after submitting the payment, and it may relate to the session or the package name. Will figure it out next week.

Hi @cooltey ,

It seems to be some problem with geolocation. The initial link doesn't have a country specified and is supposed to either check for an existing GeoIP cookie, or look up the user's IP and set one. Then redirect the user to Special:LandingPage with the correct country included in the URL.

Since you know the country from the app already, it might be possible to include that in the URL, and skip the redirect stage completely. I think country issues might explain the payment method issues too. (Note that payments.wikimedia.org has some pretty aggressive caching, so if you test multiple times in a row you might need to hard refresh to see the correct language/country.)

It sounds like CustomTab might be a good alternative too. If that's more like the default browser it could also help avoid issues with our upcoming Venmo integration, which demands using the default browser.

In T344026#9215645, @Pcoombe wrote:

Hi @cooltey ,

It seems to be some problem with geolocation. The initial link doesn't have a country specified and is supposed to either check for an existing GeoIP cookie, or look up the user's IP and set one. Then redirect the user to Special:LandingPage with the correct country included in the URL.

Since you know the country from the app already, it might be possible to include that in the URL, and skip the redirect stage completely. I think country issues might explain the payment method issues too. (Note that payments.wikimedia.org has some pretty aggressive caching, so if you test multiple times in a row you might need to hard refresh to see the correct language/country.)

It sounds like CustomTab might be a good alternative too. If that's more like the default browser it could also help avoid issues with our upcoming Venmo integration, which demands using the default browser.

Got it, thanks @Pcoombe.

The alternative method I will do is: to run the donation page through the CustomTab, and show the thankyou.wikipedia.org in the native WebView, since we are bouncing out the thankyou subdomain from the app by this request: https://github.com/wikimedia/apps-android-wikipedia/pull/1736

I have a follow-up question for the thankyou page, does it contain any special JavaScript that we may need to be took care of? If not, I think we are good to show it in the native WebView.

Hi @cmadeo

This PR is ready for review. I am not sure if you have an Android device to test the APK, so here are the screenshots:

Dialog with three buttons	Hide "Maybe later" if the end date is less than 24 hours	Tap "Maybe later" button	Tap "I already donated"	In-app donation page (in CustomTab)	Thank you page (in in-app WebView)

Please let me know if you need to schedule a meeting so I can screen-share my device.

Hi @JTannerWMF
Since we have the logic of bouncing out the thankyou.wikipedia.org to an external browser in the current production app, in an edge case, if a user has multiple apps installed (e.g. Alpha + Beta + Production), there might still be a chance to bounce user out to an external browser if the user does not update the app.

For this implementation, the donation page will show under the CustomTab and the thankyou.wikipedia.org will show under the native WebView so that we can avoid bouncing users out. Does that sound good to you?

Sounds good @cooltey. The thank you page does actually contain some custom javascript to show different follow-up actions based on the donor's country.

@cooltey thanks for these screenshots!

Some differences I noticed from Robin's designs:

Implemented	Designed	Notes
		Would it be possible to utilize a boarder radius like in Robin's designs? Additionally it looks like there is a space missing between the Header and Body text. There are also some typographical differences, Header is larger in Robin's design (Heading 2 / 20pts) and the subtitle is not italicized in Robin's design.
		'Go back' button is missing at the bottom of the page

Hi @cmadeo

Would it be possible to utilize a boarder radius like in Robin's designs? Additionally it looks like there is a space missing between the Header and Body text. There are also some typographical differences, Header is larger in Robin's design (Heading 2 / 20pts) and the subtitle is not italicized in Robin's design.

Due to some limitations in MaterialDesign dialog, we have changed the dialog component back to the original one, because it cannot show the radius border properly, please see here: LINK

About the header and body text, it will depend on the final text from the fundraising team.
In the current JSON file the subtitle has the <i> tag.
About the title style, since the ways of handing HTML tags between to apps are different, it would be better if we could keep the title in <b> instead of any other heading tags.

Go back' button is missing at the bottom of the page

Added!

Does the border size look good to you?	Added the "Go back" button	Extra: Added an overflow menu in case the web page cannot be handled properly

I have added an overflow menu to the top right for users to open the web page in the system browser. It would be useful if the WebView cannot handle the pages from the thank you page properly.
cc @JTannerWMF

This looks great to me !!

Due to some limitations in MaterialDesign dialog, we have changed the dialog component back to the original one, because it cannot show the radius border properly, please see here: LINK

Thanks so much for the context @cooltey! Not a problem, then!

About the header and body text, it will depend on the final text from the fundraising team.In the current JSON file the subtitle has the <i> tag.

Understood, thanks for letting me know! Again not a problem.

About the title style, since the ways of handing HTML tags between to apps are different, it would be better if we could keep the title in <b> instead of any other heading tags.

Ah, didn't realize this exact string was being shared across both apps. Sounds like a fair compromise then.

Does the border size look good to you?

It looks a little thicker than Robin's design, which is 3pts

Thanks for adding the button and the overflow looks good!

Thanks so much, @cooltey

It looks a little thicker than Robin's design, which is 3pts

Done @cmadeo, changed it to 2dp.

Perfect, thanks so much @cooltey !

Hi @ABorbaWMF

We have introduced some new developer preferences for the new donor experience for testing purposes.

Use the test.wikipedia debug URL

If you are going to test with a specific start date or end date, you can access the following page to edit the JSON file if you have the administrator permission. This will help you to test the "Maybe later" button visibility.
https://test.wikipedia.org/wiki/MediaWiki:AppsCampaignConfig.json

announcementCustomTabTestUrl

This helps you to override the web page link when you tap on "Donate now" in the dialog, and will load the page you specified in the CustomTab.
In general, you will only need to test the "thankyou" page behaviors (click on the link and see how it goes) since it should be opened in a native WebView instead of an external browser.

announcementPauseTime

This relates to the visibility of the "Maybe later" button. The number is the date time in milliseconds. You can use this tool to get the desired date time in milliseconds.

Special note:

We will load the donation page in a CustomTab, which is the one with the URL shown on the toolbar.

and we will load the "thankyou" page in a native WebView after the payment is submitted. The thankyou page will only be loaded if the campaign is from the Android app. (with utm_campaign=Android)

Please note the Gpay path does not end with the thank you page with the 'back' button. In this case, tapping 'x' will close the page and return the user to the article.

Working for me on 2.7.50455-r-2023-10-10