Page MenuHomePhabricator

Implement app donation banner that allows users more control over what they see and select for iOS
Closed, ResolvedPublic

Assigned To
None
Authored By
JTannerWMF
Sep 19 2023, 6:36 PM
Referenced Files
F37987763: IMG_8957.PNG
Oct 5 2023, 7:07 PM
F37987761: IMG_8958.PNG
Oct 5 2023, 7:07 PM
F37987701: image.png
Oct 5 2023, 6:11 PM
F37987696: IMG_650A4E862324-1.jpeg
Oct 5 2023, 6:11 PM
F37739624: ios-apple-pay-22.png
Sep 22 2023, 10:23 AM
File Not Attached
F37730635: ios-apple-pay-21.png
Sep 22 2023, 10:23 AM
File Not Attached
F37730569: ios-apple-pay-06b.png
Sep 22 2023, 10:23 AM
File Not Attached

Description

Background

Currently, when a user in the apps see the banner, they see the call to action to donate or to close the banner. We want to give them more control of their experience in the banner.

User Story

As a Wikipedia app user who opened an article to show a friend an interesting fact, I want to dismiss the call to action to donate but be reminded late so that I can properly read the solicitation at a more convenient time and decide if I want to donate at another time.

Minimum Requirements
  • Allow users to tap Remind Me Later and then see the banner again the next day within the campaign window. Do not show the option of Maybe later on the last day of the campaign
  • Let users know where they can access the donate button after the final solicitation
  • Allow users to indicate they’ve already donated
  • X or Close serves as permanent dismissal for the campaign
Nice to Have
  • Users can set a custom time for when they see the message again
  • Allow users to choose donation amount in the banner when we are not using the native payment flow (create a variant without this option)
Reference
Designs (Figma)
1. Banner design
ios-apple-pay-06b.png (1×786 px, 170 KB)
2. Reminder toast
ios-apple-pay-21.png (1×786 px, 739 KB)
3. Already donated toast
ios-apple-pay-22.png (1×786 px, 720 KB)
  • "Donate now" takes users to a native (T345846) or in-app web form (T333108). See "Present the "Donate with Apple Pay?" action sheet" section in T345851 for this work and presentation logic.
  • After a successful donation, the banner is not shown again for the rest of the campaign.
  • "Maybe later" triggers a toast (2):
    • Shows the banner again after one day.
    • "Maybe later" is not shown when the %currentTime plus %maybeLaterTime equals the campaign's end date.
  • "I already donated" triggers a toast (3).
  • The “Close” (top right x) and “I already donated” options both dismiss the banner for the rest of the campaign.

Testing notes

This can be tested starting in Wikipedia TestFlight 7.4.3 (2809) build.

Testing tips:
All new donor experience work (in-app web view, new campaign modals with maybe later, multilingual campaign support, Apple Pay native donation) are set up to become available in the app only once the Netherlands or Italy Oct/Nov 2023 campaigns become valid.

  1. Device iOS Settings > Language & Region > Region needs to be set to either the Netherlands or Italy
  2. Device date & time needs to be set on or after the campaign start date (change device date to 10/17)
  3. After fresh install, you must background and foreground the app, then pull to refresh on the Explore feed to trigger a force refresh of the campaign data.
  4. To be provided the option to donate via Apple Pay (native donate form), you must have a valid card set up in Apple Wallet.

Event Timeline

JTannerWMF created this task.

From @Tsevener : 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.

@Mazevedo sync update:

Make another AnnouncementPanelViewController (name it whatever you'd like!) that can take in a struct like this and configure itself with the proper text. You may need to dip into the superclass to add a 3rd button ability.

public struct WKAsset {
    
    struct WKActionPositive {
        let title: String
        let url: URL
    }
    
    struct WKActionNegative {
        let title: String
    }
    
    let textHtml: String
    let footerHtml: String
    let actionPositive: WKActionPositive
    let actionNegative: WKActionNegative
    let currencyCode: String
}

For maybe later / close button / I already donated persistence logic, I will handle it in my PR for T347352 in my new data controller. It will already need to handle caching and filtering by country code/dates there, so I think it makes sense for me to add this logic in there as well so that it's all in one place.

@Mazevedo Data-side of this was developed as a part of T347352. It includes fetching and persisting the campaigns and determining if user qualifies based on dates, country code, and dismissal / delay actions. Please build this task's UI PR against https://github.com/wikimedia/wikipedia-ios/pull/4645 and present the new campaign modal within showNewDonateExperienceCampaignModal. Thanks!

Hi @cmadeo,

I have pushed a build with some design review for what we have on the new Donor Experiences so far.

  1. Download TestFlight Experimental build # 7.4.3(45) on a test device while logged into your usual testing Apple ID (not sandbox).
  2. Now, change your device region (Settings > General > Language and Region) to the Netherlands to qualify for our faked active campaign.
  3. Open the Experimental app. Background, then foreground, then pull to refresh on the Explore feed to trigger campaigns to fetch.
  4. Go to an EN or NL Wiki article. Confirm you see campaign modal and design review. Campaign text should be localized based on the language wiki article they are on.

Feel free to delete the app and start over from step 1 if you dismissed the campaign. You can also change your device date to play with Maybe later.

Thanks @Tsevener, below are a few things I noticed in design review

ProdMock-up
IMG_650A4E862324-1.jpeg (2×1 px, 788 KB)
image.png (1×786 px, 199 KB)
  • Space missing after subhead on message
  • Text on buttons appears larger than designed, if you're using a default though, that's fine!
  • Horizontal rule missing before legal text
  • Legal text missing the Apple related text.
  • Legal text should use 'secondary text' vs. 'text' -----

I also noticed that the designs for the toasts is a different version than specified by Robin. Would it be possible to update or are those new style toasts on in the app yet?

Thanks so much!

Ah! Sorry @Tsevener I also noticed some issues with the themed versions of the banner:

IMG_8958.PNG (2×1 px, 237 KB)

  • Utilize secondary text for close icon
  • Utilize secondary text for legal text
  • 'donor policy' link should use link color color-blue-600
  • Background fill should be removed from 'maybe later' and 'I already donated' buttons

IMG_8957.PNG (2×1 px, 239 KB)

  • Utilize secondary text for legal text
  • Background fill should be removed from 'maybe later' and 'I already donated' buttons

I also noticed that the designs for the toasts is a different version than specified by Robin. Would it be possible to update or are those new style toasts on in the app yet?

@cmadeo Unfortunately we haven't had time on the roadmap to redo our toasts, so we're stuck with the old styles for the time being. Our power to adjust them in the time we have is limited 😔

@Tsevener no worries at all! just wanted to double check!

@cmadeo @JTannerWMF

I have a question about the "Apple is not in charge of raising money for this purpose" footer text in https://phabricator.wikimedia.org/T346823#9229197. Can we remove that requirement and only add it back if Apple asks for it during app review?

We have never had it in place during previous fundraising campaigns and have not received any complaints from them about it. If we add it here, that complicates the shared campaign configuration file that Dmitry set up. It would have to skew from Android since they cannot have it in their footer text.

I would also be okay with moving it to the native donate form, since that does not depend on the fundraising campaign text config.

Update from sync - decision is to move "Apple is not in charge of raising money for this purpose" to the native donate form.