Add rewards everywhere onboarding

[zenparsing]

Resolves brave/brave-browser#12138

Adds rewards onboarding modals to:

• Tip dialog
• Rewards panel
• Rewards page

Implementation notes (C++):

• A rewards pref (kOnboarded, stored as a time value) was added to store whether a user had interacted with the onboarding experience. The onboarding modals are not displayed when this preference is not null.
• The following methods were added to RewardsService
  • bool ShouldShowOnboarding(): returns true if the rewards onboarding UX should be shown to the user.
  • void SaveOnboardingResult(OnboardingResult result): sets the kOnboarded pref and optionally turns on both AC and ads (if result is OnboardingResult::kOptedIn).

Implementation notes (front-end):

• New onboarding front-end code is added under shared/components/onboarding.
• New storybook stories were added under "shared/components/onboarding".
• Some modules were promoted from tip/lib and tip/components into shared/lib and shared/components, respectively.
• A new component WithThemeVariables was added to inject brave theme variables as CSS custom properties.
• LocalContext.Provider and WithThemeVariables was added to the rewards panel and rewards page top-level components.
• An existing field in the rewards page store, store.ui.onBoardingDisplayed was renamed to store.ui.verifyOnboardingDisplayed to avoid naming confusion.

Submitter Checklist:

• Submitted a ticket for my issue if one did not already exist.
• Used Github auto-closing keywords in the commit message.
• Added/updated tests for this change (for new code or code which already has tests).
• Verified that these changes build without errors on
  • Android
  • iOS
  • Linux
  • macOS
  • Windows
• Verified that these changes pass automated tests (unit, browser, security tests) on
  • iOS
  • Linux
  • macOS
  • Windows
• Verified that all lint errors/warnings are resolved (npm run lint, npm run gn_check)
• Ran git rebase master (if needed).
• Ran git rebase -i to squash commits (if needed).
• Tagged reviewers and labelled the pull request as needed.
• Requested a security/privacy review as needed.
• Added appropriate QA labels (QA/Yes or QA/No) to the associated issue
• Added appropriate release note labels (release-notes/include or release-notes/exclude) to the associated issue
• Public documentation has been updated as necessary. 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-issues-with-tracking-protection
  • https://github.com/brave/brave-browser/wiki/QA-Guide

Test Plan:

Rewards Panel (dismissing case):

• Start the browser with a clean profile.
• Click the rewards badge.
  • Verify that "Earn Tokens & Give Back" modal is displayed within the rewards panel.
• Click the "Terms of Service" link.
  • Verify that https://basicattentiontoken.org/user-terms-of-service/ is opened in a new tab.
• Close the new tab and re-open the rewards panel.
• Click the "Privacy Policy" link.
  • Verify that https://brave.com/privacy/browser/#rewards is opened in a new tab.
• Close the new tab and re-open the rewards panel.
• Click the "X" button to close the onboarding modal.
• Close the rewards panel.
• Open the rewards panel.
  • Verify that onboarding modal is not displayed.
• Navigate to brave://rewards
  • Verify that ads and auto-contribute are disabled.

Rewards panel (opting-in case):

• Start the browser with a clean profile.
• Click the rewards badge to open the rewards panel.
• Click the "Start using Brave Rewards" button.
• Close the rewards panel.
• Open the rewards panel.
  • Verify that onboarding modal is not displayed.
• Navigate to brave://rewards
  • Verify that ads and auto-contribute are enabled.

Inline tipping (dismissing case):

• Start the browser with a clean profile.
• Click the rewards badge to ensure that rewards extension is running.
• Navigate to a Twitter user page (e.g. https://twitter.com/bravelaurenwags)
• Click on an inline "Tip" button.
  • Verify that tip dialog is opened with an onboarding screen.
• Click the "Terms of Service" link.
  • Verify that https://basicattentiontoken.org/user-terms-of-service/ is opened in a new tab.
• Close the new tab.
• Click the "Privacy Policy" link.
  • Verify that https://brave.com/privacy/browser/#rewards is opened in a new tab.
• Close the new tab.
• Click the "Maybe Later" link.
  • Verify that inline tipping form is now displayed.
• Close the tip dialog.
• Open the rewards panel.
  • Verify that the onboarding modal is not displayed. (Modified in Improve rewards onboarding experience #7135)
  • Verify that onboarding modal is displayed.
• Navigate to brave://rewards
  • Verify that ads and auto-contribute are disabled.

Inline tipping (opting-in case):

• Start the browser with a clean profile.
• Click the rewards badge to ensure that rewards extension is running.
• Navigate to a Twitter user page (e.g. https://twitter.com/bravelaurenwags)
• Click on an inline "Tip" button.
  • Verify that tip dialog is opened with an onboarding screen.
• Click the "Start using Brave Rewards" button.
  • Verify that the inline tipping form is now displayed.
• Close the tip dialog.
• Open the rewards panel.
  • Verify that the onboarding modal is not displayed.
• Navigate to brave://rewards
  • Verify that ads and auto-contribute are enabled.

Rewards page (dismissing case):

• Start the browser with a clean profile.
• Navigate to brave://rewards.
  • Verify that an onboarding modal is displayed.
• Click the "Terms of Service" link.
  • Verify that https://basicattentiontoken.org/user-terms-of-service/ is opened in a new tab.
• Close the new tab.
• Click the "Privacy Policy" link.
  • Verify that https://brave.com/privacy/browser/#rewards is opened in a new tab.
• Close the new tab.
• Click the "X" button to close the onboarding modal.
  • Verify that ads and auto-contribute are disabled.
• Open the rewards panel.
  • Verify that the onboarding modal is not displayed. (Modified in Improve rewards onboarding experience #7135)
  • Verify that onboarding modal is displayed.

Rewards page (opting-in case):

• Start the browser with a clean profile.
• Navigate to brave://rewards.
• Click the "Start using Brave Rewards" button.
  • Verify that ads and auto-contribute are enabled.
• Open the rewards panel.
  • Verify that onboarding modal is not displayed.

Reviewer Checklist:

• New files have MPL-2.0 license header.
• Request a security/privacy review as needed.
• Adequate test coverage exists to prevent regressions
• Verify test plan is specified in PR before merging to source

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.

[emerick]

LGTM

[zenparsing]

Updates:

• SaveOnboardingResult uses ads_service->SetEnabled(true) instead of the pref service directly.
• Made ShouldShowOnboarding a const method.
• Fixed styling of terms of service on tip dialog to match onboarding TOS styling.

[tmancey]

LGTM++

[zenparsing]

MacOS CI failed on unrelated test-install step.