Clarify wording of BAT payout message

[emerick]

Resolves brave/brave-browser#17943

Submitter Checklist:

• I confirm that no security/privacy review is needed, or that I have requested one
• There is a ticket for my issue
• Used Github auto-closing keywords in the PR description above
• Wrote a good PR/commit description
• Added appropriate labels (QA/Yes or QA/No; release-notes/include or release-notes/exclude; OS/...) to the associated issue
• Checked the PR locally: npm run test -- brave_browser_tests, npm run test -- brave_unit_tests, npm run lint, npm run gn_check, npm run tslint
• Ran git rebase master (if needed)

Reviewer Checklist:

• A security review is not needed, or a link to one is included in the PR description
• New files have MPL-2.0 license header
• Adequate test coverage exists to prevent regressions
• Major classes, functions and non-trivial code blocks are well-commented
• Changes in component dependencies are properly reflected in gn
• Code follows the style guide
• Test plan is specified in PR before merging

After-merge Checklist:

• The associated issue milestone is set to the smallest version that the
  changes has landed on
• All relevant documentation has been updated, for instance:
  • https://github.com/brave/brave-browser/wiki/Deviations-from-Chromium-(features-we-disable-or-remove)
  • https://github.com/brave/brave-browser/wiki/Proxy-redirected-URLs
  • https://github.com/brave/brave-browser/wiki/Fingerprinting-Protections
  • https://github.com/brave/brave-browser/wiki/Brave%E2%80%99s-Use-of-Referral-Codes
  • https://github.com/brave/brave-browser/wiki/Custom-Headers
  • https://github.com/brave/brave-browser/wiki/Web-Compatibility-Exceptions-in-Brave
  • https://github.com/brave/brave-browser/wiki/QA-Guide
  • https://github.com/brave/brave-browser/wiki/P3A

Test Plan:

Updated NTP Widget message:

Updated Rewards page message:

[zenparsing]

There are similar strings at IDS_REWARDS_WALLET_PENDING_REWARDS_TEXT (in rewards_strings.grdp) and in messages.json ("walletPendingRewardsText") that get displayed on the rewards wallet card. Do they need to be updated as well?

[emerick]

Nice catch! I updated those messages, but now I'm seeing that we have two separate implementations for rendering this message (one for the ads box and one for the wallet summary), each with slightly different styling. Any suggestions for reconciling those?

I kind of feel like showing this message in the ads box is redundant given that it appears in the summary as well, but I guess if a user is focused on the ads section they could miss it in the summary...

[zenparsing]

Turns out the pending message isn't displayed in the rewards wallet card when on the rewards page (the nextPaymentDate prop is set to zero, I think), but it is displayed on the panel.

We could try to use a common component for the messages, but since the styling is slightly different we'd need to provide a way to tweak the styling from the "outside", perhaps with CSS classes or with CSS variables. The shared component tradeoff is that the more customizable it is, and the more places it's used, the harder it is to evolve and maintain.

My intuition would be to leave them separate for now. If the strings are the same, then it probably makes sense to only use the one string (maybe get rid of the one in rewards_strings.grdp) and just have "walletPendingRewardsText" (in brave_webui_source.cc) use the common one.

[emerick]

OK, makes sense and that's how I was leaning as well. Unfortunately, I had to shorten the panel message a bit to get it to fit nicely (cc: @Miyayes, followed the advice you gave on that one), so the two strings are slightly different.