Merge pull request #9873 from brave/tip_delay_note

Fix #17700 - Add messaging in tipping flow to tell users that tips could take a few minutes to process
brave · Aug 27, 2021 · 79c93ab · 79c93ab
2 parents d58b8df + e283ff9
commit 79c93ab
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 1 deletion.
diff --git a/browser/ui/webui/brave_webui_source.cc b/browser/ui/webui/brave_webui_source.cc
@@ -1021,6 +1021,7 @@ void CustomizeWebUIHTMLSource(const std::string &name,
         { "sorryToSeeYouGo", IDS_BRAVE_REWARDS_TIP_SORRY_TO_SEE_YOU_GO },
         { "supportThisCreator", IDS_BRAVE_REWARDS_TIP_SUPPORT_THIS_CREATOR },
         { "thanksForTheSupport", IDS_BRAVE_REWARDS_TIP_THANKS_FOR_THE_SUPPORT },  // NOLINT
+        { "tipDelayNote", IDS_BRAVE_REWARDS_TIP_DELAY_NOTE },
         { "tipHasBeenSent", IDS_BRAVE_REWARDS_TIP_TIP_HAS_BEEN_SET },
         { "tipPostSubtitle", IDS_BRAVE_REWARDS_TIP_TIP_POST_SUBTITLE },
         { "tokens", IDS_BRAVE_UI_TOKENS },

diff --git a/components/brave_rewards/resources/tip/components/tip_complete.style.ts b/components/brave_rewards/resources/tip/components/tip_complete.style.ts
@@ -45,8 +45,21 @@ export const message = styled.div`
   color: var(--brave-palette-neutral900);
 `
 
+export const note = styled.span`
+  font-size: 11px;
+  line-height: 17px;
+  font-weight: 400;
+  padding: 6px;
+  background-color: var(--brave-palette-neutral000);
+  border-radius: 4px;
+
+  strong {
+    font-weight: 600;
+  }
+`
 export const table = styled.div`
   margin-top: 17px;
+  margin-bottom: 23px;
   text-align: left;
   font-size: 14px;
   line-height: 21px;

diff --git a/components/brave_rewards/resources/tip/components/tip_complete.tsx b/components/brave_rewards/resources/tip/components/tip_complete.tsx
@@ -8,7 +8,7 @@ import { TwitterColorIcon } from 'brave-ui/components/icons'
 
 import { TipKind } from '../lib/interfaces'
 import { HostContext } from '../lib/host_context'
-import { LocaleContext } from '../../shared/lib/locale_context'
+import { formatMessage, LocaleContext } from '../../shared/lib/locale_context'
 
 import { TokenAmount } from '../../shared/components/token_amount'
 
@@ -108,6 +108,17 @@ export function TipComplete (props: Props) {
           <style.table>
             {getSummaryTable()}
           </style.table>
+          <style.note>
+          {
+            formatMessage(getString('tipDelayNote'), {
+              tags: {
+                $1: (content) => (
+                  <strong key='label'>{content}</strong>
+                )
+              }
+            })
+          }
+          </style.note>
         </style.main>
         <style.share>
           <button onClick={onShareClick}>

diff --git a/components/brave_rewards/resources/tip/stories/locale_strings.ts b/components/brave_rewards/resources/tip/stories/locale_strings.ts
@@ -41,6 +41,7 @@ export const localeStrings = {
   sorryToSeeYouGo: 'Sorry to see you go…',
   supportThisCreator: 'Support this creator',
   thanksForTheSupport: 'Thanks for the support!',
+  tipDelayNote: 'Note: Your tip can take several minutes to process',
   tipHasBeenSent: 'Your one-time tip has been sent.',
   tipPostSubtitle: 'for their post',
   tokens: 'tokens',

diff --git a/components/resources/brave_components_strings.grd b/components/resources/brave_components_strings.grd
@@ -621,6 +621,7 @@
       <message name="IDS_BRAVE_REWARDS_TIP_SORRY_TO_SEE_YOU_GO" desc="">Sorry to see you go…</message>
       <message name="IDS_BRAVE_REWARDS_TIP_SUPPORT_THIS_CREATOR" desc="">Support this creator</message>
       <message name="IDS_BRAVE_REWARDS_TIP_THANKS_FOR_THE_SUPPORT" desc="">Thanks for the support!</message>
+      <message name="IDS_BRAVE_REWARDS_TIP_DELAY_NOTE" desc=""><ph name="BOLD_BEGIN">$1</ph>Note: <ph name="BOLD_END">$2</ph>Your tip can take several minutes to process</message>
       <message name="IDS_BRAVE_REWARDS_TIP_TIP_HAS_BEEN_SET" desc="">Your one-time tip has been sent.</message>
       <message name="IDS_BRAVE_REWARDS_TIP_TIP_POST_SUBTITLE" desc="">for their post</message>
       <message name="IDS_BRAVE_REWARDS_TIP_TWEET_ABOUT_SUPPORT" desc="">Tweet about your support</message>