From 7207d40442bda1b6679412a62968282bc499c0c0 Mon Sep 17 00:00:00 2001
From: ryanml <rlanese@asu.edu>
Date: Wed, 13 Mar 2019 18:15:35 -0700
Subject: [PATCH] Changing tipsMigrationAlert -> boxAlert, adding ads variant

---
 .../__snapshots__/spec.tsx.snap               | 45 ++----------------
 .../index.tsx                                 | 47 ++++++++++++-------
 .../{tipsMigrationAlert => boxAlert}/spec.tsx |  8 ++--
 .../{tipsMigrationAlert => boxAlert}/style.ts |  6 ++-
 src/features/rewards/index.ts                 |  4 +-
 stories/assets/locale.ts                      |  1 +
 stories/features/rewards/settings/adsBox.tsx  |  9 +++-
 .../rewards/settings/donationsBox.tsx         |  4 +-
 8 files changed, 55 insertions(+), 69 deletions(-)
 rename src/features/rewards/{tipsMigrationAlert => boxAlert}/__snapshots__/spec.tsx.snap (65%)
 rename src/features/rewards/{tipsMigrationAlert => boxAlert}/index.tsx (75%)
 rename src/features/rewards/{tipsMigrationAlert => boxAlert}/spec.tsx (76%)
 rename src/features/rewards/{tipsMigrationAlert => boxAlert}/style.ts (93%)

diff --git a/src/features/rewards/tipsMigrationAlert/__snapshots__/spec.tsx.snap b/src/features/rewards/boxAlert/__snapshots__/spec.tsx.snap
similarity index 65%
rename from src/features/rewards/tipsMigrationAlert/__snapshots__/spec.tsx.snap
rename to src/features/rewards/boxAlert/__snapshots__/spec.tsx.snap
index 439010354..c48c7e6d2 100644
--- a/src/features/rewards/tipsMigrationAlert/__snapshots__/spec.tsx.snap
+++ b/src/features/rewards/boxAlert/__snapshots__/spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`TipsMigrationAlert tests basic tests matches the snapshot 1`] = `
+exports[`BoxAlert tests basic tests matches the snapshot 1`] = `
 .c0 {
   width: 100%;
   display: -webkit-box;
@@ -27,7 +27,7 @@ exports[`TipsMigrationAlert tests basic tests matches the snapshot 1`] = `
   -ms-letter-spacing: 0;
   letter-spacing: 0;
   line-height: 18px;
-  padding: 12px 15px 0px 11px;
+  padding: 20px 15px 0px 11px;
   vertical-align: top;
   max-width: 387px;
 }
@@ -39,30 +39,6 @@ exports[`TipsMigrationAlert tests basic tests matches the snapshot 1`] = `
   font-size: inherit;
 }
 
-.c5 {
-  color: #696FDC;
-  font-weight: 400;
-  display: inline-block;
-  font-size: inherit;
-}
-
-.c6 {
-  vertical-align: top;
-  margin: 20px 0 0 7px;
-}
-
-.c7 {
-  color: #15A4FA;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 500;
-  -webkit-letter-spacing: 0;
-  -moz-letter-spacing: 0;
-  -ms-letter-spacing: 0;
-  letter-spacing: 0;
-  line-height: 18px;
-}
-
 .c2 {
   width: 100%;
   height: 100%;
@@ -92,22 +68,7 @@ exports[`TipsMigrationAlert tests basic tests matches the snapshot 1`] = `
     <span
       className="c4"
     >
-      MISSING: reviewSitesMsg
-    </span>
-    <span
-      className="c5"
-    >
-      MISSING: monthlyTips
-    </span>
-  </div>
-  <div
-    className="c6"
-  >
-    <span
-      className="c7"
-      onClick={[Function]}
-    >
-      MISSING: learnMore
+      MISSING: adsNotSupported
     </span>
   </div>
 </div>
diff --git a/src/features/rewards/tipsMigrationAlert/index.tsx b/src/features/rewards/boxAlert/index.tsx
similarity index 75%
rename from src/features/rewards/tipsMigrationAlert/index.tsx
rename to src/features/rewards/boxAlert/index.tsx
index a82c74d5a..d410f9694 100644
--- a/src/features/rewards/tipsMigrationAlert/index.tsx
+++ b/src/features/rewards/boxAlert/index.tsx
@@ -29,16 +29,19 @@ import { Modal } from '../../../components'
 import { AlertCircleIcon, RewardsSendTipsIcon } from '../../../components/icons'
 import Button from '../../../components/buttonsIndicators/button'
 
+export type Type = 'tips' | 'ads'
+
 export interface Props {
+  type: Type
   testId?: string
-  onReview: () => void
+  onReview?: () => void
 }
 
 interface State {
   modalShown: boolean
 }
 
-export default class TipsMigrationAlert extends React.PureComponent<Props, State> {
+export default class BoxAlert extends React.PureComponent<Props, State> {
   constructor (props: Props) {
     super(props)
     this.state = {
@@ -108,28 +111,40 @@ export default class TipsMigrationAlert extends React.PureComponent<Props, State
   }
 
   render () {
-    const { testId } = this.props
+    const { testId, type } = this.props
 
     return (
       <StyledWrapper data-test-id={testId}>
         <StyledAlertIcon>
           <AlertCircleIcon />
         </StyledAlertIcon>
-        <StyledInfo>
-          <StyledMessage>
-            {getLocale('reviewSitesMsg')}
-          </StyledMessage>
-          <StyledMonthlyTips>
-            {getLocale('monthlyTips')}
-          </StyledMonthlyTips>
+        <StyledInfo type={type}>
+          {
+            type === 'tips'
+            ? <>
+                <StyledMessage>
+                  {getLocale('reviewSitesMsg')}
+                </StyledMessage>
+                <StyledMonthlyTips>
+                  {getLocale('monthlyTips')}
+                </StyledMonthlyTips>
+              </>
+            : <StyledMessage>
+                {getLocale('adsNotSupported')}
+              </StyledMessage>
+          }
         </StyledInfo>
-        <StyledReviewWrapper>
-          <StyledReviewList onClick={this.toggleModalDisplay}>
-            {getLocale('learnMore')}
-          </StyledReviewList>
-        </StyledReviewWrapper>
         {
-          this.state.modalShown
+          type === 'tips'
+          ? <StyledReviewWrapper>
+              <StyledReviewList onClick={this.toggleModalDisplay}>
+                {getLocale('learnMore')}
+              </StyledReviewList>
+            </StyledReviewWrapper>
+          : null
+        }
+        {
+          this.state.modalShown && type === 'tips'
           ? this.pinnedSitesModal()
           : null
         }
diff --git a/src/features/rewards/tipsMigrationAlert/spec.tsx b/src/features/rewards/boxAlert/spec.tsx
similarity index 76%
rename from src/features/rewards/tipsMigrationAlert/spec.tsx
rename to src/features/rewards/boxAlert/spec.tsx
index 842fa797e..4abcf14b8 100644
--- a/src/features/rewards/tipsMigrationAlert/spec.tsx
+++ b/src/features/rewards/boxAlert/spec.tsx
@@ -6,11 +6,11 @@
 import * as React from 'react'
 import { shallow } from 'enzyme'
 import { create } from 'react-test-renderer'
-import TipsMigrationAlert from './index'
+import BoxAlert from './index'
 import { TestThemeProvider } from '../../../theme'
 
-describe('TipsMigrationAlert tests', () => {
-  const baseComponent = (props?: object) => <TestThemeProvider><TipsMigrationAlert id='tipsmigrationalert' {...props} /></TestThemeProvider>
+describe('BoxAlert tests', () => {
+  const baseComponent = (props?: object) => <TestThemeProvider><BoxAlert id='box-alert' {...props} /></TestThemeProvider>
 
   describe('basic tests', () => {
     it('matches the snapshot', () => {
@@ -21,7 +21,7 @@ describe('TipsMigrationAlert tests', () => {
 
     it('renders the component', () => {
       const wrapper = shallow(baseComponent())
-      const assertion = wrapper.find('#tipsmigrationalert').length
+      const assertion = wrapper.find('#box-alert').length
       expect(assertion).toBe(1)
     })
   })
diff --git a/src/features/rewards/tipsMigrationAlert/style.ts b/src/features/rewards/boxAlert/style.ts
similarity index 93%
rename from src/features/rewards/tipsMigrationAlert/style.ts
rename to src/features/rewards/boxAlert/style.ts
index f100cdba3..214d07cbf 100644
--- a/src/features/rewards/tipsMigrationAlert/style.ts
+++ b/src/features/rewards/boxAlert/style.ts
@@ -3,10 +3,12 @@
 * You can obtain one at http://mozilla.org/MPL/2.0/.
 */
 
+import { Type } from './index'
 import styled from 'styled-components'
 
 interface StyleProps {
   modal?: boolean
+  type?: Type
 }
 
 export const StyledWrapper = styled<{}, 'div'>('div')`
@@ -25,11 +27,11 @@ export const StyledAlertIcon = styled<{}, 'div'>('div')`
   color: #15A4FA;
 `
 
-export const StyledInfo = styled<{}, 'div'>('div')`
+export const StyledInfo = styled<StyleProps, 'div'>('div')`
   font-size: 14px;
   letter-spacing: 0;
   line-height: 18px;
-  padding: 12px 15px 0px 11px;
+  padding: ${p => p.type === 'tips' ? '12' : '20'}px 15px 0px 11px;
   vertical-align: top;
   max-width: 387px;
 `
diff --git a/src/features/rewards/index.ts b/src/features/rewards/index.ts
index 7567f3b07..8b3b3ef8c 100644
--- a/src/features/rewards/index.ts
+++ b/src/features/rewards/index.ts
@@ -5,6 +5,7 @@
 import Alert from './alert'
 import Amount from './amount'
 import Box from './box'
+import BoxAlert from './boxAlert'
 import DisabledContent from './disabledContent'
 import DisabledPanel from './disabledPanel'
 import Donate from './donate'
@@ -35,7 +36,6 @@ import TableContribute from './tableContribute'
 import TableDonation from './tableDonation'
 import TableTransactions from './tableTransactions'
 import Tip from './tip'
-import TipsMigrationAlert from './tipsMigrationAlert'
 import ToggleTips from './toggleTips'
 import Tokens from './tokens'
 import Tooltip from './tooltip'
@@ -52,6 +52,7 @@ export {
   Alert,
   Amount,
   Box,
+  BoxAlert,
   DisabledContent,
   DisabledPanel,
   DonationOverlay,
@@ -82,7 +83,6 @@ export {
   TableDonation,
   TableTransactions,
   Tip,
-  TipsMigrationAlert,
   ToggleTips,
   Tokens,
   Tooltip,
diff --git a/stories/assets/locale.ts b/stories/assets/locale.ts
index f1868ade9..54f9a625a 100644
--- a/stories/assets/locale.ts
+++ b/stories/assets/locale.ts
@@ -13,6 +13,7 @@ const locale: Record<string, string> = {
   addFundsQR: 'Show QR Code',
   addFundsText: 'Be sure to use the address below that matches the type of cryto you own. It will be converted automatically to BAT by Uphold and appear as an increased balance in your Brave Rewards wallet. Please allow up to one hour for your wallet balance to update.',
   addFundsTitle: 'Send cryptocurrency from your external account to your Brave Rewards wallet.',
+  adsNotSupported: 'Sorry! Ads are not yet available in your region.',
   allowTip: 'Allow tips on',
   amount: 'Amount',
   and: 'and',
diff --git a/stories/features/rewards/settings/adsBox.tsx b/stories/features/rewards/settings/adsBox.tsx
index dcf284783..6bd140c16 100644
--- a/stories/features/rewards/settings/adsBox.tsx
+++ b/stories/features/rewards/settings/adsBox.tsx
@@ -5,7 +5,7 @@
 import * as React from 'react'
 
 // Components
-import { DisabledContent, Box } from '../../../../src/features/rewards'
+import { DisabledContent, Box, BoxAlert } from '../../../../src/features/rewards'
 
 // Utils
 import locale from './fakeLocale'
@@ -22,6 +22,12 @@ class AdsBox extends React.Component {
     )
   }
 
+  adsAlertChild = () => {
+    return (
+      <BoxAlert type={'ads'} />
+    )
+  }
+
   render () {
     return (
       <Box
@@ -29,6 +35,7 @@ class AdsBox extends React.Component {
         type={'ads'}
         description={locale.adsDesc}
         toggle={false}
+        attachedAlert={this.adsAlertChild()}
         disabledContent={this.adsDisabled()}
       />
     )
diff --git a/stories/features/rewards/settings/donationsBox.tsx b/stories/features/rewards/settings/donationsBox.tsx
index 30cefa6f7..c73e76078 100644
--- a/stories/features/rewards/settings/donationsBox.tsx
+++ b/stories/features/rewards/settings/donationsBox.tsx
@@ -5,7 +5,7 @@
 import * as React from 'react'
 
 // Components
-import { Box, TableDonation, Tokens, List, TipsMigrationAlert } from '../../../../src/features/rewards'
+import { Box, BoxAlert, TableDonation, Tokens, List } from '../../../../src/features/rewards'
 import { DetailRow as DonationDetailRow } from '../../../../src/features/rewards/tableDonation'
 import { Column, Grid, Checkbox, ControlWrapper } from '../../../../src/components'
 
@@ -98,7 +98,7 @@ class DonationsBox extends React.Component<{}, State> {
 
   donationAlertChild = () => {
     return (
-      <TipsMigrationAlert onReview={doNothing} />
+      <BoxAlert type={'tips'} onReview={doNothing} />
     )
   }