From 3cddd6f87ccf369dbfaa9961491ba58009e94646 Mon Sep 17 00:00:00 2001
From: Pranjal Jumde <pranjal@brave.com>
Date: Thu, 26 Aug 2021 10:49:27 -0500
Subject: [PATCH] Fix #17692 - Add messaging in the UI about 5% tipping fee
 when tipping

---
 browser/ui/webui/brave_webui_source.cc                     | 1 +
 .../resources/tip/components/bat_tip_form.style.ts         | 7 +++++++
 .../resources/tip/components/bat_tip_form.tsx              | 3 +++
 .../brave_rewards/resources/tip/stories/locale_strings.ts  | 1 +
 components/resources/brave_components_strings.grd          | 1 +
 5 files changed, 13 insertions(+)

diff --git a/browser/ui/webui/brave_webui_source.cc b/browser/ui/webui/brave_webui_source.cc
index 8812f6ef3092..bbe23641a350 100644
--- a/browser/ui/webui/brave_webui_source.cc
+++ b/browser/ui/webui/brave_webui_source.cc
@@ -968,6 +968,7 @@ void CustomizeWebUIHTMLSource(const std::string &name,
         { "monthlyText", IDS_BRAVE_UI_MONTHLY_TEXT },
         { "nextContributionDate", IDS_BRAVE_REWARDS_TIP_NEXT_CONTRIBUTION_DATE },  // NOLINT
         { "notEnoughTokens", IDS_BRAVE_REWARDS_TIP_NOT_ENOUGH_TOKENS },
+        { "tippingFeeNote", IDS_BRAVE_REWARDS_TIPPING_FEE_NOTE },
         { "on", IDS_BRAVE_UI_ON },
         { "onboardingMaybeLater", IDS_BRAVE_REWARDS_ONBOARDING_MAYBE_LATER },
         { "onboardingSetupAdsHeader", IDS_BRAVE_REWARDS_ONBOARDING_SETUP_ADS_HEADER },  // NOLINT
diff --git a/components/brave_rewards/resources/tip/components/bat_tip_form.style.ts b/components/brave_rewards/resources/tip/components/bat_tip_form.style.ts
index 6c9b1720c69e..613696f803f4 100644
--- a/components/brave_rewards/resources/tip/components/bat_tip_form.style.ts
+++ b/components/brave_rewards/resources/tip/components/bat_tip_form.style.ts
@@ -104,3 +104,10 @@ export const notEnoughFunds = styled.div`
     color: var(--brave-palette-neutral300);
   }
 `
+
+export const feeNote = styled.div`
+  text-align: center;
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--brave-palette-neutral600);
+`
diff --git a/components/brave_rewards/resources/tip/components/bat_tip_form.tsx b/components/brave_rewards/resources/tip/components/bat_tip_form.tsx
index 1f9817b79db3..34f26e2eb19c 100644
--- a/components/brave_rewards/resources/tip/components/bat_tip_form.tsx
+++ b/components/brave_rewards/resources/tip/components/bat_tip_form.tsx
@@ -160,6 +160,9 @@ export function BatTipForm (props: Props) {
       </style.main>
       <style.footer>
         <style.terms>
+          <style.feeNote>
+            {getString('tippingFeeNote')}
+          </style.feeNote>
           <TermsOfService />
         </style.terms>
         {
diff --git a/components/brave_rewards/resources/tip/stories/locale_strings.ts b/components/brave_rewards/resources/tip/stories/locale_strings.ts
index 5da359225281..e739ed247fdb 100644
--- a/components/brave_rewards/resources/tip/stories/locale_strings.ts
+++ b/components/brave_rewards/resources/tip/stories/locale_strings.ts
@@ -42,6 +42,7 @@ export const localeStrings = {
   supportThisCreator: 'Support this creator',
   thanksForTheSupport: 'Thanks for the support!',
   tipHasBeenSent: 'Your one-time tip has been sent.',
+  tippingFeeNote: 'Brave collects 5% of the tip amount as a processing fee.',
   tipPostSubtitle: 'for their post',
   tokens: 'tokens',
   tweetAboutSupport: 'Tweet about your support',
diff --git a/components/resources/brave_components_strings.grd b/components/resources/brave_components_strings.grd
index a58e8211a785..7ac8daae60f0 100644
--- a/components/resources/brave_components_strings.grd
+++ b/components/resources/brave_components_strings.grd
@@ -613,6 +613,7 @@
       <message name="IDS_BRAVE_REWARDS_TIP_MONTHLY_CONTRIBUTION_SET" desc="">Monthly contribution has been set.</message>
       <message name="IDS_BRAVE_REWARDS_TIP_NEXT_CONTRIBUTION_DATE" desc="">Next contribution date:</message>
       <message name="IDS_BRAVE_REWARDS_TIP_NOT_ENOUGH_TOKENS" desc="">Not enough tokens. Please <ph name="LINK_BEGIN">$1</ph>add funds<ph name="LINK_END">$2</ph>.</message>
+      <message name="IDS_BRAVE_REWARDS_TIPPING_FEE_NOTE" desc="">Brave collects 5% of the tip amount as a processing fee.</message>
       <message name="IDS_BRAVE_REWARDS_TIP_ONE_TIME_TIP" desc="">One-Time Tip</message>
       <message name="IDS_BRAVE_REWARDS_TIP_ONE_TIME_TIP_AMOUNT" desc="">One-time tip amount:</message>
       <message name="IDS_BRAVE_REWARDS_TIP_OPT_IN_REQUIRED" desc="">Hold on, you can’t tip yet</message>