Merge pull request #8404 from brave/ksmith-fractional-tips

Allow fractional tipping amounts in the tip dialog

browser/ui/webui/brave_tip_ui.cc

@@ -353,7 +353,7 @@ void TipMessageHandler::OnTip(const base::ListValue* args) {
 
   if (recurring && amount <= 0) {
     rewards_service_->RemoveRecurringTip(publisher_key);
-  } else if (amount >= 1) {
+  } else if (amount > 0) {
     rewards_service_->OnTip(publisher_key, amount, recurring);
   }
 }

components/brave_rewards/resources/tip/components/monthly_tip_form.tsx

@@ -132,7 +132,6 @@ export function MonthlyTipForm () {
 
   const tipAmountOptions = tipOptions.map((value) => ({
     value,
-    amount: value.toFixed(0),
     currency: <BatString />,
     exchangeAmount: formatExchangeAmount(value, rewardsParameters.rate)
   }))

components/brave_rewards/resources/tip/components/one_time_tip_form.tsx

@@ -139,7 +139,6 @@ export function OneTimeTipForm () {
 
   const tipAmountOptions = tipOptions.map((value) => ({
     value,
-    amount: value.toFixed(0),
     currency: <BatString />,
     exchangeAmount: formatExchangeAmount(value, rewardsParameters.rate)
   }))

components/brave_rewards/resources/tip/components/tip_amount_selector.tsx

@@ -10,7 +10,7 @@ import * as style from './tip_amount_selector.style'
 
 interface TipAmountOption {
   value: number
-  amount: React.ReactNode
+  amount?: React.ReactNode
   currency: React.ReactNode
   exchangeAmount: React.ReactNode
 }
@@ -22,13 +22,16 @@ interface Props {
 }
 
 export function TipAmountSelector (props: Props) {
-  const options = props.options.map((item) => ({
-    value: item.value,
-    content: item.currency
-      ? <><strong>{item.amount}</strong> {item.currency}</>
-      : <><strong>{item.amount}</strong></>,
-    caption: item.exchangeAmount || undefined
-  }))
+  const options = props.options.map((item) => {
+    const amount = item.amount || String(item.value)
+    return {
+      value: item.value,
+      content: item.currency
+        ? <><strong>{amount}</strong> {item.currency}</>
+        : <><strong>{amount}</strong></>,
+      caption: item.exchangeAmount || undefined
+    }
+  })
 
   return (
     <style.root>

components/brave_rewards/resources/tip/stories/index.tsx

@@ -65,7 +65,7 @@ function createHostState (): HostState {
         'ecosystem of rewards. Join us. It’s time to fix the web together!',
       background: '',
       logo: 'https://rewards.brave.com/LH3yQwkb78iP28pJDSSFPJwU',
-      amounts: [1, 10, 100],
+      amounts: [0.25, 2, 10],
       provider: '',
       links: {
         twitter: 'https://twitter.com/brave',
@@ -82,8 +82,8 @@ function createHostState (): HostState {
       type: 'uphold'
     },
     rewardsParameters: {
-      tipChoices: [1, 2, 3],
-      monthlyTipChoices: [1, 2, 3],
+      tipChoices: [0.25, 2, 10],
+      monthlyTipChoices: [0.25, 2, 10],
       rate: 0.333,
       autoContributeChoices: [5, 15, 25, 50]
     },
@@ -92,7 +92,7 @@ function createHostState (): HostState {
     adsPerHour: 3,
     autoContributeAmount: 15,
     onlyAnonWallet: false,
-    showOnboarding: true,
+    showOnboarding: false,
     tipProcessed: false,
     currentMonthlyTip: 0
   }

components/brave_rewards/resources/tip/stories/locale_strings.ts

@@ -20,15 +20,15 @@ export const localeStrings = {
   monthlyContributionSet: 'Monthly contribution has been set.',
   monthlyText: 'Monthly',
   nextContributionDate: 'Next contribution date:',
-  notEnoughTokens: 'Not enough {{currency}}.',
-  notEnoughTokensLink: 'Not enough {{currency}}. Please',
+  notEnoughTokens: 'Not enough [[currency]].',
+  notEnoughTokensLink: 'Not enough [[currency]]. Please',
   on: 'on',
   oneTimeTip: 'One Time Tip',
   oneTimeTipAmount: 'One time tip amount:',
   optInRequired: 'Hold on, you can’t tip yet',
   points: 'points',
-  postHeader: '{{user}}’s post',
-  postHeaderTwitter: '{{user}}’s tweet',
+  postHeader: '[[user]]’s post',
+  postHeaderTwitter: '[[user]]’s tweet',
   rewardsBannerText1: 'You can support this content creator by sending a tip. It’s a way of thanking them for making great content. Verified creators get paid for their tips during the first week of each calendar month.',
   sendDonation: 'Send Tip',
   siteBannerConnectedText: 'This Brave Verified Creator has not yet configured their account to receive contributions from Brave users. Your browser will keep trying to contribute until they verify, or until 90 days have passed.',