Donor badge experiment: Implement the confirmation dialog
Closed, ResolvedPublic2 Estimated Story Points
Actions

Assigned To

Authored By

	Volker_E
	Jun 2 2026, 5:44 PM

Project Tags

Referenced Files

	F87829760: T427966_beta_AC1_2.png
	Jun 11 2026, 4:34 AM

	F87829704: T427966_beta_AC1_1.png
	Jun 11 2026, 4:34 AM

	F86264194: image.png
	Jun 2 2026, 5:44 PM

Subscribers

Description

Background

The confirmation dialog is a missing piece on the donor delight badge experiment.

This was falling between the gaps on the code optimization and focus on animation, TestKitchen setup and codebase.

Goal

Add the confirmation dialog.

Acceptance criteria for done

For treatment group 'treatment-c-delightful' the "hide badge" chip shows. When clicked a confirmation dialog appears.
For treatment group 'treatment-b-simple' the "hide badge" a hide link appears in the CdxPopOver. When clicked a confirmation dialog should appear.
Ensure the confirmation dialog is shown and behaving appropriately.
The confirmation dialog should only show when clicked.
When I click "Keep it" the confirmation dialog is dismissed
When I click "Yes, hide the badge" the badge is removed and does not reappear when I refresh the page.

BDD

Feature: Hide-badge confirmation dialog

  Scenario: Open the dialog (treatment-b-simple)
    Given I am a logged-out donor in treatment-b-simple with the badge visible
    When I tap the badge and tap the "Remove badge" link in the popover
    Then a confirmation dialog "Hide this badge?" appears

  Scenario: Open the dialog (treatment-c-delightful)
    Given I am a logged-out donor in treatment-c-delightful with the badge visible
    When I tap the badge and tap the "Remove badge" chip
    Then the same confirmation dialog appears

  Scenario: Dialog actions
    Given the confirmation dialog is open
    When I click "Keep it"
    Then the dialog is dismissed and the badge remains
    When I instead click "Yes, hide the badge"
    Then the badge is removed and does not reappear on refresh

Test Plan

Test Case 1: Treatment-b-simple opens the dialog
AC1: Tap badge -> popover "Remove badge" link -> confirmation dialog "Hide this badge?" appears.

Test Case 2: Treatment-c-delightful opens the dialog
AC2: Tap badge -> "Remove badge" chip (#minerva-badge-button-remove) -> same confirmation dialog appears.

Test Case 3: Dialog only shows when clicked
AC3: Dialog is not present/shown until the remove control is clicked.

Test Case 4: Keep it
AC4: Click "Keep it" -> dialog dismissed, badge still visible, pref unchanged.

Test Case 5: Yes, hide the badge
AC5: Click "Yes, hide the badge" -> badge removed and stays hidden on refresh (see also T427311).

Test Case 6: Button styling
AC6: Primary action "Yes, hide the badge" is destructive (red); "Keep it" is the default action.

Test Results

AC	Status	Details for test run T427966#12008076
1	✅	treatment-b: popover "Remove badge" link -> dialog "Hide this badge?" — see T427966_beta_AC1_1.png
2	✅	treatment-c: "Remove badge" chip (#minerva-badge-button-remove, ext-wc-is-visible) -> same dialog — see T427966_beta_AC1_2.png
3	✅	dialog absent until the remove control is clicked (never auto-shown)
4	✅	"Keep it" -> dialog dismissed, badge still visible, minerva-badge clientpref still 1
5	✅	"Yes, hide the badge" -> badge removed, stays hidden on refresh (cross-ref T427311)
6	✅	primary button cdx-button--action-destructive --weight-primary (red); "Keep it" action-default

Details

Related Changes in Gerrit:

	Subject	Author	Repo	Branch	Lines +/-
	Donor delight badge: Add confirmation dialog	Anne Tomasevich	mediawiki/extensions/WikimediaCustomizations	master	+337 -43

Customize query in gerrit

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Open		Volker_E	T424069 [EPIC] WE 3.5.5 Donor badge experiment
		Resolved		Volker_E	T427966 Donor badge experiment: Implement the confirmation dialog

Event Timeline

Volker_E created this task.Jun 2 2026, 5:44 PM

Volker_E set the point value for this task to 2.Jun 2 2026, 5:48 PM

Volker_E renamed this task from Donor badge experiment: UI polishing – Ensure the confirmation dialog to Donor badge experiment: UI polishing – Ensure the confirmation dialog works as expected.Jun 2 2026, 5:51 PM

Volker_E edited projects, added: Reader Experience Team (REx Sprint 22 [Q4 Jun 2 - Jun 15]); removed: Reader Experience Team.

Jdlrobson-WMF updated the task description. (Show Details)Jun 2 2026, 5:51 PM

HFan-WMF triaged this task as Medium priority.Jun 2 2026, 5:52 PM

Jdlrobson-WMF renamed this task from Donor badge experiment: UI polishing – Ensure the confirmation dialog works as expected to Donor badge experiment: Implement the confirmation dialog.Jun 2 2026, 5:58 PM

Jdlrobson-WMF updated the task description. (Show Details)

Jdlrobson-WMF moved this task from Backlog to WE3.5.5 Offer logged-out donors persistent Thank You badge on the FY25-26 WE3.5 Donor Identification and recognition board.Jun 3 2026, 4:34 PM

HFan-WMF raised the priority of this task from Medium to High.Jun 4 2026, 6:15 PM

AnneT claimed this task.Jun 8 2026, 12:02 PM

AnneT moved this task from Ready to In progress on the Reader Experience Team (REx Sprint 22 [Q4 Jun 2 - Jun 15]) board.

Volker_E updated the task description. (Show Details)Jun 8 2026, 12:21 PM

Hey @Sneha and @Volker_E, what do you think of making the primary button destructive (red) to clarify what happens when you click it?

Change #1298818 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[mediawiki/extensions/WikimediaCustomizations@master] Donor delight badge: Add confirmation dialog

https://gerrit.wikimedia.org/r/1298818

gerritbot added a project: Patch-For-Review.Jun 8 2026, 3:13 PM

AnneT moved this task from In progress to Needs code review on the Reader Experience Team (REx Sprint 22 [Q4 Jun 2 - Jun 15]) board.Jun 8 2026, 3:15 PM

AnneT removed AnneT as the assignee of this task.Jun 8 2026, 5:16 PM

AnneT subscribed.

We'll aim to get the UI portion of this wrapped up in next hour.

Once done assign to Jon (me) if there are CI issues.

@LMora-WMF some testing instructions:

The experiment is for logged-out users in the Minerva skin
Run mw.user.clientPrefs.set( 'minerva-badge', '1' ); in the console to set the donor badge as "on" in your preferences. You can run this again to reset the badge if you hide it while testing this patch.
To test the control group (you won't see the confirmation dialog there), add mpo=donor-delight-badge:control to the URL
To test the first treatment group (just popover), add mpo=donor-delight-badge:treatment-b-simple to the URL
To test the second treatment group (hearts animation), add mpo=donor-delight-badge:treatment-c-delightful to the URL

Please ping the team channel if you have any problems!

Change #1298818 merged by jenkins-bot:

[mediawiki/extensions/WikimediaCustomizations@master] Donor delight badge: Add confirmation dialog

https://gerrit.wikimedia.org/r/1298818

Volker to fold into QA task.

Maintenance_bot removed a project: Patch-For-Review.Jun 8 2026, 11:30 PM

ReleaseTaggerBot added a project: MW-1.47-notes (1.47.0-wmf.6; 2026-06-09).Jun 9 2026, 12:00 AM

Volker_E removed Volker_E as the assignee of this task.Jun 9 2026, 6:05 PM

@AnneT That was my first instinct too and logically makes sense to use destructive button. But the red button and red heart seem to be creating some visual competition.

Jdlrobson-WMF assigned this task to Volker_E.Jun 9 2026, 7:15 PM

@AnneT I tried it on test wiki and it seems like red could work - another way of looking at it is that it connects with what you are hiding. So we can leave it as destructive red.

Test Result - Beta

Status: ✅ PASS
Environment: beta — en.wikipedia.beta.wmcloud.org/wiki/Vienna (mobile/Minerva, logged out)
OS: macOS Tahoe 26.x
Browser: Chrome Canary (latest as of test date)
Device: MS
Emulated Device: iPhone 17 Pro Max

Dialog content (both treatments): Title "Hide this badge?"; Body "This heart is a thank you badge for your donation. Hiding will remove it from your view and you won't be able to restore it."; Buttons "Yes, hide the badge" (primary, destructive/red) and "Keep it" (default).

Test Case 1: Treatment-b-simple
✅ AC1: Tap badge -> popover -> "Remove badge" link (#minerva-badge-popover-remove-btn) -> confirmation dialog appears.

Test Case 2: Treatment-c-delightful
✅ AC2: Tap badge -> "Remove badge" chip (#minerva-badge-button-remove, class ext-wc-is-visible) -> same confirmation dialog appears.

Test Case 3: Only on click
✅ AC3: The dialog is not in the DOM / not shown until the remove control is clicked (no auto-display).

Test Case 4: Keep it
✅ AC4: Clicking "Keep it" dismisses the dialog; the badge remains visible and minerva-badge clientpref stays 1.

Test Case 5: Yes, hide the badge
✅ AC5: Clicking "Yes, hide the badge" removes the badge (.minerva-badge-container display:none) and it does not reappear on refresh — the minerva-badge clientpref flips to disabled and persists (cross-referenced in T427311).

Test Case 6: Button styling
✅ AC6: Primary action "Yes, hide the badge" carries cdx-button--action-destructive cdx-button--weight-primary (destructive red, per the design decision in the ticket comments); "Keep it" is cdx-button--action-default.