Adds promotion card

brave/brave-browser#10838
brave · Jul 27, 2020 · c2d06e3 · c2d06e3
1 parent df811a7
commit c2d06e3
Show file tree

Hide file tree

Showing 8 changed files with 99 additions and 66 deletions.
diff --git a/browser/ui/webui/brave_webui_source.cc b/browser/ui/webui/brave_webui_source.cc
@@ -766,8 +766,10 @@ void CustomizeWebUIHTMLSource(const std::string &name,
 
         { "tapNetworkTitle", IDS_BRAVE_UI_TAP_NETWORK_TITLE },
         { "tapNetworkInfo", IDS_BRAVE_UI_TAP_NETWORK_INFO },
-        { "tapNetworkLink", IDS_BRAVE_UI_TAP_NETWORK_LINK },
         { "tapNetworkDisclaimer", IDS_BRAVE_UI_TAP_NETWORK_DISCLAIMER },
+
+        { "upholdPromoTitle", IDS_BRAVE_UI_UPHOLD_PROMO_TITLE },
+        { "upholdPromoInfo", IDS_BRAVE_UI_UPHOLD_PROMO_INFO },
       }
     }, {
       std::string("adblock"), {

diff --git a/components/brave_rewards/resources/page/components/settingsPage.tsx b/components/brave_rewards/resources/page/components/settingsPage.tsx
@@ -169,8 +169,9 @@ class SettingsPage extends React.Component<Props, State> {
     window.open('https://brave.com/privacy#rewards', '_blank')
   }
 
-  onDismissPromo = (promo: PromoType) => {
+  onDismissPromo = (promo: PromoType, event: React.MouseEvent<HTMLDivElement>) => {
     this.actions.dismissPromoPrompt(promo)
+    event.preventDefault()
   }
 
   getPromotionsClaims = () => {
@@ -281,7 +282,7 @@ class SettingsPage extends React.Component<Props, State> {
           const promo = getPromo(key, this.props.rewardsData) as Promo
           const { supportedLocales } = promo
 
-          if (supportedLocales.length && !supportedLocales.includes(currentCountryCode)) {
+          if (supportedLocales && supportedLocales.length && !supportedLocales.includes(currentCountryCode)) {
             return null
           }
 
@@ -290,6 +291,7 @@ class SettingsPage extends React.Component<Props, State> {
               {...promo}
               key={`${key}-promo`}
               onDismissPromo={this.onDismissPromo.bind(this, key)}
+              link={promo.link}
             />
           )
         })}

diff --git a/components/brave_rewards/resources/page/promos/assets/tap_bg.svg b/components/brave_rewards/resources/page/promos/assets/tap_bg.svg
diff --git a/components/brave_rewards/resources/page/promos/assets/uphold_bg.png b/components/brave_rewards/resources/page/promos/assets/uphold_bg.png
diff --git a/components/brave_rewards/resources/page/promos/index.tsx b/components/brave_rewards/resources/page/promos/index.tsx
@@ -4,57 +4,73 @@
 
 import * as React from 'react'
 import tapBg from './assets/tap_bg.svg'
-import { StyledLink, StyledInfo } from '../../ui/components/sidebarPromo/style'
+import upholdBg from './assets/uphold_bg.png'
+import { StyledInfo } from '../../ui/components/sidebarPromo/style'
 import { getLocale } from '../../../../common/locale'
 
-export type PromoType = 'tap-network'
+export type PromoType = 'uphold' | 'tap-network'
 
 export interface Promo {
-  title: string,
-  imagePath: string,
-  copy: JSX.Element,
-  disclaimer?: string,
+  title: string
+  imagePath: string
+  link: string
+  copy: JSX.Element
+  disclaimer?: string
   supportedLocales: string[]
 }
 
 export const getActivePromos = (rewardsData: Rewards.State) => {
   let promos = ['tap-network']
 
+  if (rewardsData) {
+    let wallet = rewardsData.externalWallet
+    if (wallet && wallet.address.length > 0 && wallet.status === 2) { // WalletStatus::VERIFIED
+      promos.unshift('uphold')
+    }
+  }
+
   return promos
 }
 
-const openLink = (type: PromoType, rewardsData: Rewards.State) => {
-  let url
+const getLink = (type: PromoType) => {
   switch (type) {
     case 'tap-network': {
-      url = 'https://brave.tapnetwork.io'
-      break
+      return 'https://brave.tapnetwork.io'
+    }
+    case 'uphold': {
+      return 'https://uphold.com/brave/upholdcard'
     }
   }
 
-  window.open(url, '_blank')
+  return ''
 }
 
 export const getPromo = (type: PromoType, rewardsData: Rewards.State) => {
-  const link = openLink.bind(this, type, rewardsData)
   switch (type) {
     case 'tap-network':
       return {
         imagePath: tapBg,
+        link: getLink(type),
         copy: (
-          <div>
-            <StyledInfo>
-              {getLocale('tapNetworkInfo')}
-            </StyledInfo>
-            <StyledLink onClick={link}>
-              {getLocale('tapNetworkLink')}
-            </StyledLink>
-          </div>
+          <StyledInfo>
+            {getLocale('tapNetworkInfo')}
+          </StyledInfo>
         ),
         supportedLocales: ['US'],
         title: getLocale('tapNetworkTitle'),
         disclaimer: getLocale('tapNetworkDisclaimer')
       }
+    case 'uphold':
+      return {
+        imagePath: upholdBg,
+        link: getLink(type),
+        copy: (
+          <StyledInfo>
+            {getLocale('upholdPromoInfo')}
+          </StyledInfo>
+        ),
+        title: getLocale('upholdPromoTitle')
+      }
     default:
       return null
   }

diff --git a/components/brave_rewards/resources/ui/components/sidebarPromo/index.tsx b/components/brave_rewards/resources/ui/components/sidebarPromo/index.tsx
@@ -9,7 +9,8 @@ import {
   StyledBackground,
   StyledContent,
   StyledTitle,
-  StyledDisclaimer
+  StyledDisclaimer,
+  StyleRight
 } from './style'
 import { CloseStrokeIcon } from 'brave-ui/components/icons'
 
@@ -18,7 +19,8 @@ export interface Props {
   copy: JSX.Element
   imagePath: string
   disclaimer?: string | JSX.Element
-  onDismissPromo: () => void
+  onDismissPromo: (event: React.MouseEvent<HTMLDivElement>) => void
+  link: string
 }
 
 export default class SidebarPromo extends React.PureComponent<Props, {}> {
@@ -28,28 +30,31 @@ export default class SidebarPromo extends React.PureComponent<Props, {}> {
       title,
       imagePath,
       disclaimer,
-      onDismissPromo
+      onDismissPromo,
+      link
     } = this.props
 
     return (
-      <StyledWrapper>
-        <StyledCloseIcon onClick={onDismissPromo}>
-          <CloseStrokeIcon />
-        </StyledCloseIcon>
+      <StyledWrapper href={link} target={'_blank'}>
         <StyledBackground src={imagePath} />
-        <StyledContent>
-          <StyledTitle>
-            {title}
-          </StyledTitle>
-          {copy}
-          {
-            disclaimer
-            ? <StyledDisclaimer>
-                {disclaimer}
-              </StyledDisclaimer>
-            : null
-          }
-        </StyledContent>
+        <StyleRight>
+          <StyledCloseIcon onClick={onDismissPromo}>
+            <CloseStrokeIcon />
+          </StyledCloseIcon>
+          <StyledContent>
+            <StyledTitle>
+              {title}
+            </StyledTitle>
+            {copy}
+            {
+              disclaimer
+              ? <StyledDisclaimer>
+                  {disclaimer}
+                </StyledDisclaimer>
+              : null
+            }
+          </StyledContent>
+        </StyleRight>
       </StyledWrapper>
     )
   }

diff --git a/components/brave_rewards/resources/ui/components/sidebarPromo/style.ts b/components/brave_rewards/resources/ui/components/sidebarPromo/style.ts
@@ -9,63 +9,65 @@ interface StyleProps {
   src?: string
 }
 
-export const StyledWrapper = styled<{}, 'div'>('div')`
+export const StyledWrapper = styled<{}, 'a'>('a')`
   color: #fff;
   width: 100%;
-  padding: 7px;
   background: #fff;
   margin-top: 30px;
   border-radius: 8px;
   box-shadow: 0 0 13px 0 rgba(0,0,0,0.07);
+  min-height: 157px;
+  cursor: pointer;
+  display: flex;
+  overflow: hidden;
 `
 
 export const StyledCloseIcon = styled<{}, 'div'>('div')`
   width: 12px;
   height: 12px;
-  float: right;
-  cursor: pointer;
   color: ${palette.grey600};
+  position: relative;
+  z-index: 2;
+  float: right;
+  margin: 11px 11px 0 0;
 `
 
 export const StyledBackground = styled<StyleProps, 'div'>('div')`
-  float: left;
-  width: 130px;
-  height: 130px;
-  position: absolute;
-  border-radius: 8px;
-  margin: 10px 0px 0px -7px;
-  background: url(${p => p.src}) no-repeat top right;
+  width: 117px;
+  height: 100%;
+  background: url(${p => p.src}) no-repeat;
 `
 
 export const StyledContent = styled<{}, 'div'>('div')`
-  float: right;
-  max-width: 205px;
-  margin-top: 25px;
-  text-align: left;
+  max-width: 222px;
+  margin-top: 14px;
+  padding-left: 15px;
 `
 
 export const StyledTitle = styled<{}, 'span'>('span')`
   color: #000;
   display: block;
   font-size: 15px;
-  font-weight: bold;
-  margin-bottom: 5px;
+  font-weight: 600;
+  margin-bottom: 9px;
   font-family: Poppins, sans-serif;
+  line-height: 1.6;
 `
 
-export const StyledInfo = styled<{}, 'span'>('span')`
-  font-size: 13px;
+export const StyledInfo = styled<{}, 'div'>('div')`
+  font-size: 11.5px;
   line-height: 18px;
   color: ${palette.grey600};
   font-family: Muli, sans-serif;
+  line-height: 1.57;
 `
 
-export const StyledLink = styled<{}, 'span'>('span')`
-  cursor: pointer;
+export const StyledLink = styled<{}, 'a'>('a')`
   margin-left: 2px;
   font-weight: bold;
   display: inline-block;
   color: ${palette.blurple400};
+  text-decoration: none;
 `
 
 export const StyledDisclaimer = styled<{}, 'span'>('span')`
@@ -76,3 +78,7 @@ export const StyledDisclaimer = styled<{}, 'span'>('span')`
   color: ${palette.grey500};
   font-family: Muli, sans-serif;
 `
+
+export const StyleRight = styled<{}, 'div'>('div')`
+  flex-grow: 1;
+`
diff --git a/components/resources/brave_components_strings.grd b/components/resources/brave_components_strings.grd
@@ -787,9 +787,11 @@
 
       <message name="IDS_BRAVE_UI_TAP_NETWORK_TITLE" desc="">Redeem BAT for Gift Cards</message>
       <message name="IDS_BRAVE_UI_TAP_NETWORK_INFO" desc="">With TAP Network, you can redeem your BAT for popular name-brand gift cards.</message>
-      <message name="IDS_BRAVE_UI_TAP_NETWORK_LINK" desc="">Visit TAP.</message>
       <message name="IDS_BRAVE_UI_TAP_NETWORK_DISCLAIMER" desc="">* Requires Uphold Verification.</message>
 
+      <message name="IDS_BRAVE_UI_UPHOLD_PROMO_TITLE" desc="">Get 2% cryptoback with the Uphold card</message>
+      <message name="IDS_BRAVE_UI_UPHOLD_PROMO_INFO" desc="">Spend your crypto and other assets at nearly 50 million merchants and ATMs worldwide. Spend crypto to get crypto!</message>
+
       <!-- Rewards New Tab Widget resources -->
       <message name="IDS_REWARDS_WIDGET_ABOUT_REWARDS" desc="">
         <ph name="LINK_BEGIN">$1</ph>Learn more<ph name="LINK_END">$2</ph> about Brave Rewards