[Desktop] Implement design for tipping banner

[NejcZdovc]

You can find designs in https://www.figma.com/file/EDGI52tfWG1ggC9ZYFguXy/tipping-banner-revamp-copy.

[LaurenWags]

Verification completed with

Brave	1.17.63 Chromium: 87.0.4280.49 (Official Build) unknown (x86_64)
Revision	f77f85899646b42a1d3c8ff36794e00becab9171-refs/branch-heads/4280@{#1115}
OS	macOS Version 10.14.6 (Build 18G6032)

Verified banner colors from linked Figma doc above

Screenshots

Yellow background does not display, logged #12596

Verified test plan from brave/brave-core#6626

Case 1: One-time tipping - Unverified publisher

Confirmed banner matches designs for one time tipping without credit card option.
Confirmed default values of 1, 10, 100 BAT are displayed as tipping options.
Confirmed "add funds" link is displayed if there is not sufficient BAT in the wallet. Confirmed clicking on this link opens brave://rewards page, modal is not opened as per note in PR.
Confirmed able to select an amount and send tip. Since publisher is unverified, confirmed tip went to Pending list.
Confirmed clicking on the tweet button opened a new tab and drafted a tweet with expected wording.

Case 1: One-time tipping - verified, not KYC'd publisher

Confirmed banner matches designs for one time tipping without credit card option.
Confirmed default values of 1, 10, 100 BAT are displayed as tipping options.
Confirmed "add funds" link is displayed if there is not sufficient BAT in the wallet. Confirmed clicking on this link opens brave://rewards page, modal is not opened as per note in PR.
Confirmed able to select an amount and send tip. Since publisher is not KYC'd, confirmed tip went to Pending list.
Confirmed clicking on the tweet button opened a new tab and drafted a tweet with expected wording.

Case 1: One-time tipping - KYC'd publisher

Confirmed banner matches designs for one time tipping without credit card option.
Confirmed publisher set values of 5, 10, 20 BAT are displayed as tipping options.
Confirmed publisher set background was displayed. Encountered #12057 as mentioned in PR for odd looking background.
Confirmed publisher set favicon/logo is shown.
Confirmed publisher set title is displayed.
Confirmed publisher set description is shown.
Confirmed able to select an amount and send tip. Since publisher is KYC'd, confirmed tip went thru.
Confirmed clicking on the tweet button opened a new tab and drafted a tweet with expected wording. Note, canned tweet does not mention "on GitHub" (or similar for other platforms). This was logged with #7698.

Confirmed if KYC'd publisher does not have custom banner, the correct background, title, description, favicon, and amounts display (defaults):

Case 2: Setting a monthly contribution - unverified publisher

Confirmed Monthly is selected by default when choosing this option from the panel.
Confirmed tip amounts are displayed.
Confirmed able to set a monthly tip.
Confirmed tip completion display matches designs.
Confirmed monthly contribution in brave://rewards and on panel.

Case 2: Setting a monthly contribution - verified, not KYC'd publisher

Confirmed Monthly is selected by default when choosing this option from the panel.
Confirmed tip amounts are displayed.
Confirmed able to set a monthly tip.
Confirmed tip completion display matches designs.
Confirmed monthly contribution in brave://rewards and on panel.

Case 2: Setting a monthly contribution - KYC'd publisher

Confirmed Monthly is selected by default when choosing this option from the panel.
Confirmed tip amounts are displayed.
Confirmed able to set a monthly tip.
Confirmed tip completion display matches designs.
Confirmed monthly contribution in brave://rewards and on panel.

Case 3: One-time tipping with existing monthly contribution - unverified publisher

Confirmed expected asterisk/messaging on tip banner when selecting "Send a tip" after a monthly contribution is already configured.

Confirmed selecting the "Monthly" shows cancel/change UI.
Confirmed asterisk/messaging is hidden.

Confirmed "Cancel" flow:

• Selecting "Cancel" matches designs from figma.
• Selecting the "Confirm" button matches designs from figma.
• Monthly contribution is removed.
• Selecting "One Time Tip" when on this screen or closing the banner without confirming does not remove the monthly contribution.

Confirmed "Change amount" flow:

• Selecting "Change amount" matches designs from figma.
• Able to select a new amount (or same amount) and "Set monthly contribution". The monthly contribution amount is updated on panel and brave://rewards.
• Selecting "One Time Tip" when on this screen or closing the banner without confirming does not update the monthly contribution.

Confirmed monthly contribution can still be removed from panel and brave://rewards.
Confirmed monthly contribution can still be modified from panel.

Brave	1.17.65 Chromium: 87.0.4280.49 (Official Build) unknown (x86_64)
Revision	f77f85899646b42a1d3c8ff36794e00becab9171-refs/branch-heads/4280@{#1115}
OS	macOS Version 10.14.6 (Build 18G6032)

Case 3: One-time tipping with existing monthly contribution - verified, not KYC'd publisher

Confirmed expected asterisk/messaging on tip banner when selecting "Send a tip" after a monthly contribution is already configured.

Confirmed selecting the "Monthly" shows cancel/change UI.
Confirmed asterisk/messaging is hidden.

Confirmed "Cancel" flow:

• Selecting "Cancel" matches designs from figma.
• Selecting the "Confirm" button matches designs from figma.
• Monthly contribution is removed.
• Selecting "One Time Tip" when on this screen or closing the banner without confirming does not remove the monthly contribution.

Confirmed "Change amount" flow:

• Selecting "Change amount" matches designs from figma.
• Able to select a new amount (or same amount) and "Set monthly contribution". The monthly contribution amount is updated on panel and brave://rewards.
• Selecting "One Time Tip" when on this screen or closing the banner without confirming does not update the monthly contribution.

Confirmed monthly contribution can still be removed from panel and brave://rewards.
Confirmed monthly contribution can still be modified from panel.

Case 3: One-time tipping with existing monthly contribution - KYC'd publisher

Confirmed expected asterisk/messaging on tip banner when selecting "Send a tip" after a monthly contribution is already configured.

Confirmed selecting the "Monthly" shows cancel/change UI.
Confirmed asterisk/messaging is hidden.

Confirmed "Cancel" flow:

• Selecting "Cancel" matches designs from figma.
• Selecting the "Confirm" button matches designs from figma.
• Monthly contribution is removed.
• Selecting "One Time Tip" when on this screen or closing the banner without confirming does not remove the monthly contribution.

Confirmed "Change amount" flow:

• Selecting "Change amount" matches designs from figma.
• Able to select a new amount (or same amount) and "Set monthly contribution". The monthly contribution amount is updated on panel and brave://rewards.
• Selecting "One Time Tip" when on this screen or closing the banner without confirming does not update the monthly contribution.

Confirmed monthly contribution can still be removed from panel and brave://rewards.
Confirmed monthly contribution can still be modified from panel.

Case 4: In-line tipping - unverified publisher (Twitter, Reddit, GitHub)

Confirmed banner is shown when clicking on in-line tip button.
Twitter/Reddit - Confirmed monthly option is not displayed. TBD if GH should have it removed as well.
Twitter/Reddit - Confirmed social media post is displayed in the banner.
GitHub - Confirmed banner description is displayed. Media box is not available on GH per #5562.

Confirmed one time tip is sent to Pending list for unverified publishers.

Case 4: In-line tipping - verified, non-KYC'd publisher (Reddit)

Unable to check Twitter/GH as there is no verified, non-KYC'd publisher set up on staging env for these types.

Confirmed banner is shown when clicking on in-line tip button.
Reddit - Confirmed monthly option is not displayed.
Reddit - Confirmed social media post is displayed in the banner.

Confirmed one time tip is sent to Pending list for verified, not KYC'd publishers.

Case 4: In-line tipping - KYC'd publisher (Reddit)

Confirmed banner is shown when clicking on in-line tip button.
Twitter/Reddit - Confirmed monthly option is not displayed. TBD if GH should have it removed as well.
Twitter/Reddit - Confirmed social media post is displayed in the banner.
GitHub - Confirmed banner description is displayed.

Confirmed one time tip is sent as expected.

---

Verification passed on

Brave | 1.17.68 Chromium: 87.0.4280.49 (Official Build) (64-bit)
-- | --
Revision | f77f85899646b42a1d3c8ff36794e00becab9171-refs/branch-heads/4280@{#1115}
OS | Windows 10 OS Version 2004 (Build 19041.572)

Verified banner colors from linked Figma doc above

Screenshots

Encountered #12596

Verified test plan from brave/brave-core#6626

Case 1: One-time tipping - Unverified publisher

Confirmed banner matches designs for one time tipping without credit card option.
Confirmed default values of 1, 10, 100 BAT are displayed as tipping options.
Confirmed "add funds" link is displayed if there is not sufficient BAT in the wallet. Confirmed clicking on this link opens brave://rewards page, modal is not opened as per note in PR.
Confirmed able to select an amount and send tip. Since publisher is unverified, confirmed tip went to Pending list.
Confirmed clicking on the tweet button opened a new tab and drafted a tweet with expected wording.

Case 1: One-time tipping - verified, not KYC'd publisher

Confirmed banner matches designs for one time tipping without credit card option.
Confirmed default values of 1, 10, 100 BAT are displayed as tipping options.
Confirmed "add funds" link is displayed if there is not sufficient BAT in the wallet. Confirmed clicking on this link opens brave://rewards page, modal is not opened as per note in PR.
Confirmed able to select an amount and send tip. Since publisher is not KYC'd, confirmed tip went to Pending list.
Confirmed clicking on the tweet button opened a new tab and drafted a tweet with expected wording.

Case 1: One-time tipping - KYC'd publisher

Confirmed banner matches designs for one time tipping without credit card option.
Confirmed publisher set values of 5, 10, 20 BAT are displayed as tipping options.
Confirmed publisher set background was displayed. Encountered #12057 as mentioned in PR for odd looking background.
Confirmed publisher set favicon/logo is shown.
Confirmed publisher set title is displayed.
Confirmed publisher set description is shown.
Confirmed able to select an amount and send tip. Since publisher is KYC'd, confirmed tip went thru.
Confirmed clicking on the tweet button opened a new tab and drafted a tweet with expected wording. Note, canned tweet does not mention "on GitHub" (or similar for other platforms). This was logged with #7698.

Confirmed if KYC'd publisher does not have custom banner, the correct background, title, description, favicon, and amounts display (defaults):

Case 2. Setting a monthly contribution - unverified publisher

Confirmed Monthly is selected by default when choosing this option from the panel.
Confirmed tip amounts are displayed.
Confirmed able to set a monthly tip.
Confirmed tip completion display matches designs.
Confirmed monthly contribution in brave://rewards and on panel.

Case 2: Setting a monthly contribution - verified, not KYC'd publisher

Confirmed Monthly is selected by default when choosing this option from the panel.
Confirmed tip amounts are displayed.
Confirmed able to set a monthly tip.
Confirmed tip completion display matches designs.
Confirmed monthly contribution in brave://rewards and on panel.

Case 2: Setting a monthly contribution - KYC'd publisher

Confirmed Monthly is selected by default when choosing this option from the panel.
Confirmed tip amounts are displayed.
Confirmed able to set a monthly tip.
Confirmed tip completion display matches designs.
Confirmed monthly contribution in brave://rewards and on panel.

Case 3: One-time tipping with existing monthly contribution - unverified publisher

Confirmed expected asterisk/messaging on tip banner when selecting "Send a tip" after a monthly contribution is already configured.

Confirmed selecting the "Monthly" shows cancel/change UI.
Confirmed asterisk/messaging is hidden.

Confirmed "Cancel" flow:

Selecting "Cancel" matches designs from figma.
Selecting the "Confirm" button matches designs from figma.
Monthly contribution is removed.
Selecting "One Time Tip" when on this screen or closing the banner without confirming does not remove the monthly contribution.

Confirmed "Change amount" flow:

• Selecting "Change amount" matches designs from figma.
• Able to select a new amount (or same amount) and "Set monthly contribution". The monthly contribution amount is updated on panel and brave://rewards.
• Selecting "One Time Tip" when on this screen or closing the banner without confirming does not update the monthly contribution.

Confirmed monthly contribution can still be removed from panel and brave://rewards.
Confirmed monthly contribution can still be modified from panel.

Case 3: One-time tipping with existing monthly contribution - verified, not KYC'd publisher

Confirmed expected asterisk/messaging on tip banner when selecting "Send a tip" after a monthly contribution is already configured.

Confirmed selecting the "Monthly" shows cancel/change UI.
Confirmed asterisk/messaging is hidden.

Confirmed "Cancel" flow:

Selecting "Cancel" matches designs from figma.
Selecting the "Confirm" button matches designs from figma.
Monthly contribution is removed.
Selecting "One Time Tip" when on this screen or closing the banner without confirming does not remove the monthly contribution.

Confirmed "Change amount" flow:

• Selecting "Change amount" matches designs from figma.
• Able to select a new amount (or same amount) and "Set monthly contribution". The monthly contribution amount is updated on panel and brave://rewards.
• Selecting "One Time Tip" when on this screen or closing the banner without confirming does not update the monthly contribution.

Confirmed monthly contribution can still be removed from panel and brave://rewards.
Confirmed monthly contribution can still be modified from panel.

Case 3: One-time tipping with existing monthly contribution - KYC'd publisher

Confirmed expected asterisk/messaging on tip banner when selecting "Send a tip" after a monthly contribution is already configured.

Confirmed selecting the "Monthly" shows cancel/change UI.
Confirmed asterisk/messaging is hidden.

Confirmed "Cancel" flow:

Selecting "Cancel" matches designs from figma.
Selecting the "Confirm" button matches designs from figma.
Monthly contribution is removed.
Selecting "One Time Tip" when on this screen or closing the banner without confirming does not remove the monthly contribution.

Confirmed monthly contribution can still be removed from panel and brave://rewards.
Confirmed monthly contribution can still be modified from panel.

Case 4: In-line tipping - unverified publisher (Twitter, Reddit, GitHub)

Confirmed banner is shown when clicking on in-line tip button.
Twitter/Reddit - Confirmed monthly option is not displayed. TBD if GH should have it removed as well.
Twitter/Reddit - Confirmed social media post is displayed in the banner.
GitHub - Confirmed banner description is displayed. Media box is not available on GH per #5562.

Confirmed one time tip is sent to Pending list for unverified publishers.

Case 4: In-line tipping - verified, non-KYC'd publisher (Reddit)

Unable to check Twitter/GH as there is no verified, non-KYC'd publisher set up on staging env for these types.

Confirmed banner is shown when clicking on in-line tip button.
Reddit - Confirmed monthly option is not displayed.
Reddit - Confirmed social media post is displayed in the banner.

Confirmed one time tip is sent to Pending list for verified, not KYC'd publishers.

Case 4: In-line tipping - KYC'd publisher (Reddit)

Confirmed banner is shown when clicking on in-line tip button.
Twitter/Reddit - Confirmed monthly option is not displayed. TBD if GH should have it removed as well.
Twitter/Reddit - Confirmed social media post is displayed in the banner.
GitHub - Confirmed banner description is displayed.

Confirmed one time tip is sent as expected.