From b65b8cb80d82a2295bd1ef3c69e92d377026b351 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  | 10 +++-
 .../rewards/settings/donationsBox.tsx         |  4 +-
 8 files changed, 56 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 00a47eb62..db517ebcc 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'
@@ -51,6 +51,7 @@ export {
   Alert,
   Amount,
   Box,
+  BoxAlert,
   DisabledContent,
   DisabledPanel,
   DonationOverlay,
@@ -81,7 +82,6 @@ export {
   TableDonation,
   TableTransactions,
   Tip,
-  TipsMigrationAlert,
   ToggleTips,
   Tokens,
   Tooltip,
diff --git a/stories/assets/locale.ts b/stories/assets/locale.ts
index ec856e7bf..7db007856 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',
   autoTipText: 'You are automatically sending a tip to:',
diff --git a/stories/features/rewards/settings/adsBox.tsx b/stories/features/rewards/settings/adsBox.tsx
index dcf284783..da3dbe6e3 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,7 +35,9 @@ 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} />
     )
   }