Add Payout status button and banners for ad earnings Rewards payouts and add new state to payout banner

[Miyayes]

Description

Per @jsecretan, add "Check status" button for ad earnings Rewards payouts.

Implementation

Updated Dec 10, 2021:

#18602 (comment)

Message @Miyayes or @minkyeongshin for design files.

[Miyayes]

@jsecretan Actually, I am not sure if this "Check status" button makes sense. The payout countdowns basically disappear on the date payouts actually start... The countdowns don't continue to show until the user actually receives their payout.

The "check status" button would have to live somewhere else that persists.

[Miyayes]

Designs have been added. Should be ready to implement.

Update: As of Nov 8, new UX direction on this. See updated issue text.

[Miyayes]

Let's set n = 7 to start (a week). cc: @jsecretan No big deal if we overshoot and keep showing the banner even though user has received their earnings deposit already.

[Miyayes]

New logic as of Dec 10:

if current day is before 7th
      show 'countdown' message
if current day is between 7th and 10th
      if unverified user and promotion is available
           show 'arrived' message
       else
           show 'arriving' message

Countdown Message
Your +3.21 BAT October rewards will arrive in %days% days.

Arrived Message
Congrats! Your +3.21 BAT October rewards have arrived!

Arriving Message
Your +3.21 BAT October Rewards are on the way. Keep an eye out!

[GeetaSarvadnya]

Verification PASSED on

Brave | 1.35.77 Chromium: 97.0.4692.71 (Official Build) beta (64-bit)
-- | --
Revision | adefa7837d02a07a604c1e6eff0b3a09422ab88d-refs/branch-heads/4692@{#1247}
OS | Windows 10 Version 21H2 (Build 19044.1415)

• Verified the test plan from Update Rewards payout status messaging brave-core#11347
• Logged Arrived message is not showing up the actual claimed BAT amount #20597

Scenario 1: Countdown Message or Payment pending_PASSED

• Viewed a couple of Ads and close the browser
• Forward the system clock ahead by 24 hours
• Restart the browser
• Confirmed ads are cashed in with the server (verified Successfully redeemed unblinded payment tokens msg in logs)
• Close the browser
• Set the current day of month before the payout day (I have set it to 3rd Feb 2022)
• Restart the browser
• Confirmed Your + 0.075 BAT January rewards will arrive in 4 days message is shown in the rewards settings, panel, NTP widget and on the site panel as expected.
• Confirmed that Countdown Message is retained even after closing and reopening the panel
• Confirmed that Countdown Message is retained in rewards settings, NTP widget and BR panel even after browser restart

Rewards settings page

Light theme	Dark theme

BR panel

Light theme	Dark theme

NTP widget

Light theme	Dark theme

BR panel on any site

Light theme	Dark theme

• Confirmed countdown message is shown when the system date is set to 1st, 2nd, 3rd, 4th, 5th and 6th Feb

1st Feb	2nd Feb	3rd Feb	4th Feb	5th Feb	6th Feb

• Confirmed countdown message isn't shown on 7th Feb

Scenario 2: Arrived Message_PASSED

• Logged Arrived message is not showing up the actual claimed BAT amount #20597

1. Clean profile 1.35.x and enable rewards
2. Fake the previous month ad earning
3. Ask Chris to send the ad grants to this profile
4. Confirmed that Ad grants are shown
5. Set the system date to 6th Jan and confirm count down message is NOT shown ad grant is shown in all the 3 places (settings, NTP, and panel)
6. Set the system date to 7th Jan and confirm Arriving message is shown in ads panel (Your +0.01 BAT December rewards are on the way. Keep an eye out!), ad grant is shown in all the 3 places (settings, NTP and panel)
7. Set the device date to 8th, 9th and 10th Jan and confirmed Arriving message is shown in ads panel (Your +0.01 BAT December rewards are on the way. Keep an eye out!), ad grant is shown in all the 3 places (settings, NTP and panel)
   Encountered the issue Next payment date is showing up the incorrect month when the system date is set behind  #20594
8. Set the device date to 11th Jan and confirm no messages are shown
9. Set the device date to today' date (20th Jan) and claim the Ad grants which were sent by Chris
10. Set the device date to 7th Jan and relaunch the browser and confirmed Arrived message is shown in 3 places (settings, NTP and panel) encountered the issue Arrived message is not showing up the actual claimed BAT amount #20597 - Confirmed Arrived message is matching with the Figma spec

Rewards settings page

Light theme	Dark theme

BR panel

Light theme	Dark theme

NTP widget

Light theme	Dark theme

BR panel on any site

Light theme	Dark theme

11. Set the system date to 8th, 9th and 10th Jan and ensured Arrived message is shown in 3 places (setting, NTP and panel)
12. Set the system date to 11th and ensured no messages are shown

Scenario 3: Arriving Message_PASSED

• Viewed a couple of Ads and close the browser
• Forward the system clock ahead by 24 hours
• Restart the browser
• Confirmed ads are cashed in with the server (verified Successfully redeemed unblinded tokens msg in logs)
• Close the browser
• Set the system date to one day after the payout date (i.e 8th Feb 2022)
• Restart the browser
• Confirmed Your +0.035 BAT January rewards are on the way. Keep an eye out! Check Status message is shown in the rewards settings, panel, NTP widget and on the site panel as expected.
• Confirmed click on Check Status redirects to BAT community site https://community.brave.com/t/ads-payout-status-update/287895
• Confirmed that BAT arriving message is retained even after closing and reopening the panel
• Confirmed that BAT arriving message is retained in rewards settings, NTP widget and BR panel even after browser restart
• Confirmed Arriving message is shown on 8th, 9th and 10th Feb.
• Confirmed no messages are shown on 11th Feb

Rewards settings page

Light theme	Dark theme

BR panel

Light theme	Dark theme

NTP widget

Light theme	Dark theme

BR panel on any site

Light theme	Dark theme

Scenario 4: Connect Uphold wallet and verify payment Arriving Message_PASSED

1. Clean profile 1.35.x enable rewards and connect KYC'd uphold wallet
2. View a couple of ads ad reconcile them with the server
3. Set the system date to Feb 8th
4. Relaunch the browser
5. Confirmed Your +... BAT January rewards are on the way. Keep an eye out! Check Status message is shown in the rewards settings, panel, NTP widget and on the site panel as expected.
6. Confirmed arriving message is shown when the system date is set to 8th, 9th and 10th
7. Confirmed arriving message is NOT shown when the system date is set to 11th Feb

Example	Example	Example	Example

Scenario 5: Connect Uphold wallet and verify payment Countdown Message_PASSED

1. Clean profile 1.35.x enable rewards and connect KYC'd uphold wallet
2. View a couple of ads ad reconcile them with the server
3. Set the system date to Feb 3rd
4. Relaunch the browser
5. Confirmed Your + ... BAT January rewards will arrive in x days message is shown in the rewards settings, panel, NTP widget and on the site panel as expected.
6. Confirmed countdown message is shown when the system date is set to 1st, 2nd, 3rd, 4th, 5th, and 6th Feb
7. Confirmed countdown message is NOT shown when the system date is set to 7th Feb

Example	Example	Example	Example

Scenario 6: Connect Gemini wallet and verify payment countdown Message_PASSED

1. Clean profile 1.35.x enable rewards and connect KYC'd Gemini wallet
2. View a couple of ads ad reconcile them with the server
3. Set the system date to Feb 3rd
4. Relaunch the browser
5. Confirmed Your + ... BAT January rewards will arrive in x days message is shown in the rewards settings, panel, NTP widget and on the site panel as expected.
6. Confirmed countdown message is shown when the system date is set to 1st, 2nd, 3rd, 4th, 5th, and 6th Feb
7. Confirmed countdown message is NOT shown when the system date is set to 7th Feb

Example	Example	Example	Example

Scenario 7: Connect Gemini wallet and verify payment Arriving Message_PASSED

1. Clean profile 1.35.x enable rewards and connect KYC'd Gemini wallet
2. View a couple of ads ad reconcile them with the server
3. Set the system date to Feb 8th
4. Relaunch the browser
5. Confirmed Your +... BAT January rewards are on the way. Keep an eye out! Check Status message is shown in the rewards settings, panel, NTP widget and on the site panel as expected.
6. Confirmed arriving message is shown when the system date is set to 8th, 9th and 10th
7. Confirmed arriving message is NOT shown when the system date is set to 11th Feb

Example	Example	Example	Example

Brave	1.35.96 Chromium: 98.0.4758.66 (Official Build) (64-bit) 
Revision	db1b4001d5ce29f141297f260d2b778e000b85a3-refs/branch-heads/4758@{#762}
OS	Windows 10 Version 1809 (Build 17763.1637)

Scenario 8: Connect bitFlyer wallet and verify payment countdown Message_PASSED

1. Clean profile 1.35.x enable rewards and connect KYC'd bitFlyer wallet
2. View a couple of ads ad reconcile them with the server
3. Set the system date to Feb 3rd Feb
4. Relaunch the browser
5. Confirmed Your + ... BAT January rewards will arrive in x days message is shown in the rewards settings, panel, NTP widget and on the site panel as expected.
6. Confirmed countdown message is shown when the system date is set to 1st, 2nd, 3rd, 4th, 5th and 6th Feb (Next payment date is 7th Feb in VM as it has US timezone)

Example	Example	Example	Example

Scenario 9: Connect bitFlyer wallet and verify payment Arriving Message_PASSED

1. Clean profile 1.35.x enable rewards and connect KYC'd bitFlyer wallet
2. View a couple of ads ad reconcile them with the server
3. Set the system date to Feb 7th
4. Relaunch the browser
5. Confirmed Your +... BAT January rewards are on the way. Keep an eye out! Check Status message is shown in the rewards settings, panel, NTP widget and on the site panel as expected.
6. Confirmed arriving message is shown when the system date is set to 7th, 8th, 9th, and 10th Feb (Next payment date is 7th Feb in VM as it has US timezone)
7. Confirmed arriving message is NOT shown when the system date is set to 11th Feb

Example	Example	Example	Example

Scenario 10: Countdown and Arriving message verification_NTP SI Ads_PASSED

Arriving message:

1. Clean profile 1.35.x enable rewards
2. View a couple of NTP SI ads and reconcile them with the server
3. Set the system date to Feb 8th
4. Relaunch the browser
5. Confirmed Your +... BAT January rewards are on the way. Keep an eye out! Check Status message is shown in the rewards settings, panel, NTP widget and on the site panel as expected.
6. Confirmed arriving message is shown when the system date is set to 8th, 9th, 10th and 11th Feb (Next payment date is 8th for me UTC+5.30)
7. Confirmed arriving message is NOT shown when the system date is set to 12th Feb

Example	Example	Example	Example

Countdown message:

1. Clean profile 1.35.x enable rewards
2. View a couple of ads ad reconcile them with the server
3. Set the system date to Feb 3rd
4. Relaunch the browser
5. Confirmed Your + ... BAT January rewards will arrive in x days message is shown in the rewards settings, panel, NTP widget and on the site panel as expected.
6. Confirmed countdown message is shown when the system date is set to 1st, 2nd, 3rd, 4th, 5th, 6th, 7th Feb
7. Confirmed countdown message is NOT shown when the system date is set to 8th Feb

Example	Example	Example	Example

---

Verification in progress with

Brave | 1.35.98 Chromium: 98.0.4758.74 (Official Build) (x86_64)
-- | --
Revision | d0fe1ec4df090cd3eb02b591228505e12ea476e9-refs/branch-heads/4758@{#935}
OS | macOS Version 11.6.1 (Build 20G224)

Scenario 1: Countdown Message/Payment pending - PASSED

• Viewed a couple of Ads and close the browser
• Forward the system clock ahead by 24 hours
• Restart the browser
• Confirmed ads are cashed in with the server (verified Successfully redeemed unblinded payment tokens msg in logs)
• Close the browser
• Set the system date to be beginning of next month (ex. Feb 1)
• Restart the browser
• Confirmed Your +X BAT January rewards will arrive in Y days message is shown in the rewards settings, panel, NTP widget and on the site panel as expected (X is number of BAT, Y is number of days)
• Confirmed that Countdown Message is retained even after closing and reopening the panel
• Confirmed that Countdown Message is retained in rewards settings, NTP widget and BR panel even after browser restart

brave://rewards	Panel Summary - Light	Panel Summary - Dark	NTP widget - Light	NTP widget - dark	Panel Creator - light	Panel Creator - Dark

• Confirmed countdown message is shown when the system date is set to 1st, 2nd, 3rd, 4th, 5th and 6th Feb (confirmed on settings, panel, widget but only took SS of settings)

1st Feb	2nd Feb	3rd Feb	4th Feb	5th Feb	6th Feb

• Confirmed countdown message isn't shown on 7th Feb

Scenario 2: Arriving Message - PASSED

• Completed Scenario 1
• Set the system date to payout date (Feb 7)
• Confirmed Your +X BAT January rewards are on the way. Keep an eye out! Check Status message is shown in the rewards settings, panel, NTP widget and on the site panel as expected. (X is number of BAT)
• Confirmed click on Check Status redirects to BAT community site https://community.brave.com/t/ads-payout-status-update/287895
• Confirmed that BAT arriving message is retained even after closing and reopening the panel
• Confirmed that BAT arriving message is retained in rewards settings, NTP widget and BR panel even after browser restart
• Confirmed Arriving message is shown on 8th, 9th and 10th Feb.
• Confirmed no messages are shown on 11th Feb

brave://rewards	Panel Summary - Light	Panel Summary - Dark	NTP widget - Light	NTP widget - dark	Panel Creator - light	Panel Creator - Dark

Scenario 3: Arrived Message - Part 1 - PASSED

• Completed Scenario 1
• Simulated ad grant in DB (balance_report_info table)
• Set the system date to payout date (Feb 7)
• Confirmed Congrats! Your January rewards have arrived! message is shown in the rewards settings, panel, NTP widget and on the site panel as expected.
• Confirmed arrived message is retained even after closing and reopening the panel
• Confirmed arrived message is retained in rewards settings, NTP widget and BR panel even after browser restart
• Confirmed arrived message is shown on 7th, 8th, 9th and 10th Feb.
• Confirmed no messages are shown on 11th Feb
• Note, value was removed from message with Arrived message is not showing up the actual claimed BAT amount #20597

brave://rewards	Panel Summary - Light	Panel Summary - Dark	NTP widget - Light	NTP widget - dark	Panel Creator - light	Panel Creator - Dark

Scenario 3: Arrived Message - Part 2 - PASSED

1. Clean profile 1.35.x and enable rewards
2. Fake the previous month ad earning
3. Ask Chris to send the ad grants to this profile
4. Confirmed that Ad grants are shown (current date - Jan 31)
5. Set the system date to 6th Jan and confirm count down message is shown
6. Set the system date to 7th Jan and confirm Arriving message is shown
7. Set the device date to today' date (Jan 31st) and claim the ad grant
8. Set the device date to 7th Jan and relaunch the browser and confirmed Arrived message is shown in 3 places (settings, NTP and panel)
9. Set the system date to 8th, 9th and 10th Jan and ensured Arrived message is shown in 3 places (setting, NTP and panel)
10. Set the system date to 11th and ensured no messages are shown

Confirmed expected messaging in above scenario.

Uphold - PASSED

1. Clean profile 1.35.x and enable rewards
2. View ads, cash them in with the server, link KYC'd Uphold account
3. Set date to 1st of next month
4. Confirm countdown/pending messaging is shown 1st-6th
5. Set date to 7th
6. Confirm arriving messaging is shown 7th-10th
7. Set the device date to 11th Jan and confirm no messages are shown

Countdown - settings page	Countdown - panel	Countdown - NTP widget	Arriving - settings page	Arriving - panel	Arriving - NTP widget

Gemini - Skipped

Gemini QA env was down

bitFlyer - PASSED

1. Clean profile 1.35.x and enable rewards
2. View ads, cash them in with the server, link KYC'd bitFlyer account
3. Set date to 1st of next month
4. Confirm countdown/pending messaging is shown 1st-6th
5. Set date to 7th
6. Confirm arriving messaging is shown 7th-10th
7. Set the device date to 11th Jan and confirm no messages are shown

Countdown - settings page	Countdown - panel	Countdown - NTP widget	Arriving - settings page	Arriving - panel	Arriving - NTP widget

[GeetaSarvadnya]

QA blocked as unable to verify the payment messages in the latest beta build 1.35.92. Messaging has broken due to the PR merge brave/brave-core#11904

[btlechowski]

Verification passed on

Brave	1.35.98 Chromium: 98.0.4758.74 (Official Build) (64-bit)
Revision	d0fe1ec4df090cd3eb02b591228505e12ea476e9-refs/branch-heads/4758@{#935}
OS	Ubuntu 18.04 LTS

Scenario 1: Countdown Message/Payment pending - PASSED

• Viewed a couple of Ads and close the browser
• Forward the system clock ahead by 24 hours
• Restart the browser
• Confirmed ads are cashed in with the server (verified Successfully redeemed unblinded payment tokens msg in logs)
• Close the browser
• Set the system date to be beginning of next month (ex. Feb 1)
• Restart the browser
• Confirmed Your +X BAT January rewards will arrive in Y days message is shown in the rewards settings, panel, NTP widget and on the site panel as expected (X is number of BAT, Y is number of days)
• Confirmed that Countdown Message is retained even after closing and reopening the panel
• Confirmed that Countdown Message is retained in rewards settings, NTP widget and BR panel even after browser restart

• Confirmed countdown message is shown when the system date is set to 1st, 2nd, 3rd, 4th, 5th and 6th Feb (confirmed on settings, panel, widget but only took SS of settings)

1st Feb	2nd Feb	3rd Feb	4th Feb	5th Feb	6th Feb

• Confirmed countdown message isn't shown on 7th Feb

Scenario 2: Arriving Message - PASSED

• Completed Scenario 1
• Set the system date to payout date (Feb 7)
• Confirmed Your +X BAT January rewards are on the way. Keep an eye out! Check Status message is shown in the rewards settings, panel, NTP widget and on the site panel as expected. (X is number of BAT)
• Confirmed click on Check Status redirects to BAT community site https://community.brave.com/t/ads-payout-status-update/287895
• Confirmed that BAT arriving message is retained even after closing and reopening the panel
• Confirmed that BAT arriving message is retained in rewards settings, NTP widget and BR panel even after browser restart
• Confirmed Arriving message is shown on 8th, 9th and 10th Feb.
• Confirmed no messages are shown on 11th Feb

Scenario 3: Arrived Message - Part 1 - PASSED

• Completed Scenario 1
• Simulated ad grant in DB (balance_report_info table)
• Set the system date to payout date (Feb 7)
• Confirmed Congrats! Your January rewards have arrived! message is shown in the rewards settings, panel, NTP widget and on the site panel as expected.
• Confirmed arrived message is retained even after closing and reopening the panel
• Confirmed arrived message is retained in rewards settings, NTP widget and BR panel even after browser restart
• Confirmed arrived message is shown on 7th, 8th, 9th and 10th Feb.
• Confirmed no messages are shown on 11th Feb
• Note, value was removed from message with Arrived message is not showing up the actual claimed BAT amount #20597

Logged #20813