Adding new TOS to Rewards UI Enabling points

src/features/rewards/disabledBox/__snapshots__/spec.tsx.snap

@@ -0,0 +1,86 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DisabledBox tests basic tests matches the snapshot 1`] = `
+.c2 {
+  max-width: 100%;
+  width: 100%;
+  min-height: auto;
+  margin: 0;
+  padding: 30px 36px;
+  background-color: #fff;
+  border-radius: 6px;
+  box-shadow: 0 1px 12px 0 rgba(99,105,110,0.18);
+  font-size: inherit;
+  box-sizing: border-box;
+  position: relative;
+}
+
+.c0 {
+  display: block;
+  width: 100%;
+  margin-bottom: 28px;
+}
+
+.c1 {
+  font-family: Poppins,sans-serif;
+}
+
+.c3 {
+  width: 541px;
+  color: #4C54D2;
+  font-size: 22px;
+  font-weight: 600;
+  -webkit-letter-spacing: 0;
+  -moz-letter-spacing: 0;
+  -ms-letter-spacing: 0;
+  letter-spacing: 0;
+  line-height: 28px;
+  padding-bottom: 5px;
+}
+
+.c4 {
+  color: #84889c;
+  font-size: 16px;
+  font-weight: normal;
+  -webkit-letter-spacing: 0;
+  -moz-letter-spacing: 0;
+  -ms-letter-spacing: 0;
+  letter-spacing: 0;
+  line-height: 26px;
+  padding-bottom: 0px;
+  font-family: Muli,sans-serif;
+}
+
+.c4:first-of-type {
+  padding-bottom: 10px;
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1 c2"
+  >
+    <span
+      className="c3"
+    >
+      MISSING: whyBraveRewards
+    </span>
+    <p
+      className="c4"
+    >
+      MISSING: rewardsOffText5
+    </p>
+    <span
+      className="c3"
+    >
+      MISSING: rewardsOffText3
+    </span>
+    <p
+      className="c4"
+    >
+      MISSING: rewardsOffText4
+    </p>
+  </div>
+</div>
+`;

src/features/rewards/disabledBox/index.tsx

@@ -0,0 +1,36 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+* License, v. 2.0. If a copy of the MPL was not distributed with this file,
+* You can obtain one at http://mozilla.org/MPL/2.0/.
+*/
+
+import * as React from 'react'
+import {
+  StyledWrapper,
+  StyledCard,
+  StyledTitle,
+  StyledText
+} from './style'
+import { getLocale } from '../../../helpers'
+
+export default class DisabledBox extends React.PureComponent<{}, {}> {
+  render () {
+    return (
+      <StyledWrapper>
+        <StyledCard>
+          <StyledTitle>
+            {getLocale('whyBraveRewards')}
+          </StyledTitle>
+          <StyledText>
+            {getLocale('rewardsOffText5')}
+          </StyledText>
+          <StyledTitle>
+            {getLocale('rewardsOffText3')}
+          </StyledTitle>
+          <StyledText>
+            {getLocale('rewardsOffText4')}
+          </StyledText>
+        </StyledCard>
+      </StyledWrapper>
+    )
+  }
+}

src/features/rewards/disabledBox/spec.tsx

@@ -0,0 +1,28 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+* License, v. 2.0. If a copy of the MPL was not distributed with this file,
+* You can obtain one at http://mozilla.org/MPL/2.0/.
+*/
+
+import * as React from 'react'
+import { shallow } from 'enzyme'
+import { create } from 'react-test-renderer'
+import DisabledBox from './index'
+import { TestThemeProvider } from '../../../theme'
+
+describe('DisabledBox tests', () => {
+  const baseComponent = (props?: object) => <TestThemeProvider><DisabledBox id='disabledbox' {...props} /></TestThemeProvider>
+
+  describe('basic tests', () => {
+    it('matches the snapshot', () => {
+      const component = baseComponent()
+      const tree = create(component).toJSON()
+      expect(tree).toMatchSnapshot()
+    })
+
+    it('renders the component', () => {
+      const wrapper = shallow(baseComponent())
+      const assertion = wrapper.find('#disabledbox').length
+      expect(assertion).toBe(1)
+    })
+  })
+})

src/features/rewards/disabledBox/style.ts

@@ -0,0 +1,42 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+* License, v. 2.0. If a copy of the MPL was not distributed with this file,
+* You can obtain one at http://mozilla.org/MPL/2.0/.
+*/
+
+import styled from 'styled-components'
+import Card from '../../../components/layout/card'
+import palette from '../../../theme/colors'
+
+export const StyledWrapper = styled<{}, 'div'>('div')`
+  display: block;
+  width: 100%;
+  margin-bottom: 28px;
+`
+
+export const StyledCard = styled(Card)`
+  font-family: Poppins, sans-serif;
+`
+
+export const StyledTitle = styled<{}, 'span'>('span')`
+  width: 541px;
+  color: ${palette.blurple500};
+  font-size: 22px;
+  font-weight: 600;
+  letter-spacing: 0;
+  line-height: 28px;
+  padding-bottom: 5px;
+`
+
+export const StyledText = styled<{}, 'p'>('p')`
+  color: ${palette.grey600};
+  font-size: 16px;
+  font-weight: normal;
+  letter-spacing: 0;
+  line-height: 26px;
+  padding-bottom: 0px;
+  font-family: Muli, sans-serif;
+
+  &:first-of-type {
+    padding-bottom: 10px;
+  }
+`

src/features/rewards/index.ts

@@ -6,6 +6,7 @@ import Alert from './alert'
 import Amount from './amount'
 import Box from './box'
 import BoxAlert from './boxAlert'
+import DisabledBox from './disabledBox'
 import DisabledContent from './disabledContent'
 import DisabledPanel from './disabledPanel'
 import Donate from './donate'
@@ -53,6 +54,7 @@ export {
   Amount,
   Box,
   BoxAlert,
+  DisabledBox,
   DisabledContent,
   DisabledPanel,
   DonationOverlay,

src/features/rewards/mainToggle/__snapshots__/spec.tsx.snap

@@ -79,30 +79,32 @@ exports[`MainToggle tests basic tests matches the snapshot 1`] = `
   color: #222326;
 }
 
-.c12 {
-  margin-top: 18px;
-  font-size: 22px;
-  line-height: 1.27;
-  color: #4b4c5c;
+.c2 {
+  width: 66px;
+  height: 66px;
 }
 
-.c13 {
+.c11 {
+  display: block;
+  margin-top: 20px;
   font-family: Muli,sans-serif;
-  font-size: 16px;
-  font-weight: 300;
-  line-height: 1.75;
-  color: #838391;
 }
 
-.c11 {
-  -webkit-flex-basis: 100%;
-  -ms-flex-preferred-size: 100%;
-  flex-basis: 100%;
+.c12 {
+  color: #3b3e4f;
+  font-size: 14px;
+  font-weight: normal;
+  -webkit-letter-spacing: 0;
+  -moz-letter-spacing: 0;
+  -ms-letter-spacing: 0;
+  letter-spacing: 0;
+  line-height: 18px;
 }
 
-.c2 {
-  width: 66px;
-  height: 66px;
+.c13 {
+  cursor: pointer;
+  color: #339af0;
+  font-weight: 600;
 }
 
 .c6 {
@@ -244,30 +246,26 @@ exports[`MainToggle tests basic tests matches the snapshot 1`] = `
   <div
     className="c11"
   >
-    <div
+    <span
       className="c12"
     >
-      MISSING: rewardsWhy
-    </div>
-    <div
-      className="c13"
-    >
-      MISSING: rewardsOffText1
+      MISSING: serviceTextToggle
        
-      <b>
-        MISSING: rewardsOffText2
-      </b>
-    </div>
-    <div
-      className="c12"
-    >
-      MISSING: rewardsOffText3
-    </div>
-    <div
-      className="c13"
-    >
-      MISSING: rewardsOffText4
-    </div>
+      <a
+        className="c13"
+      >
+        MISSING: termsOfService
+      </a>
+       
+      MISSING: and
+       
+      <a
+        className="c13"
+      >
+        MISSING: privacyPolicy
+      </a>
+      .
+    </span>
   </div>
 </div>
 `;

src/features/rewards/mainToggle/index.tsx

@@ -8,10 +8,10 @@ import {
   StyledTitle,
   StyledTM,
   ToggleHeading,
-  StyleTitle,
-  StyleText,
-  StyledContent,
-  StyledLogoWrapper
+  StyledLogoWrapper,
+  StyledTOSWrapper,
+  StyledServiceText,
+  StyledServiceLink
 } from './style'
 import Toggle from '../../../components/formControls/toggle/index'
 import { getLocale } from '../../../helpers'
@@ -22,11 +22,20 @@ export interface Props {
   onToggle: () => void
   id?: string
   testId?: string
+  onTOSClick: () => void
+  onPrivacyClick: () => void
 }
 
 export default class MainToggle extends React.PureComponent<Props, {}> {
   render () {
-    const { id, enabled, onToggle, testId } = this.props
+    const {
+      id,
+      enabled,
+      onToggle,
+      testId,
+      onTOSClick,
+      onPrivacyClick
+    } = this.props
 
     return (
       <MainToggleWrapper id={id}>
@@ -41,16 +50,11 @@ export default class MainToggle extends React.PureComponent<Props, {}> {
         </ToggleHeading>
         {
           !enabled
-          ? <StyledContent>
-            <StyleTitle>{getLocale('rewardsWhy')}</StyleTitle>
-            <StyleText>
-              {getLocale('rewardsOffText1')} <b>{getLocale('rewardsOffText2')}</b>
-            </StyleText>
-            <StyleTitle>{getLocale('rewardsOffText3')}</StyleTitle>
-            <StyleText>
-              {getLocale('rewardsOffText4')}
-            </StyleText>
-          </StyledContent>
+          ? <StyledTOSWrapper>
+              <StyledServiceText>
+                {getLocale('serviceTextToggle')} <StyledServiceLink onClick={onTOSClick}>{getLocale('termsOfService')}</StyledServiceLink> {getLocale('and')} <StyledServiceLink onClick={onPrivacyClick}>{getLocale('privacyPolicy')}</StyledServiceLink>.
+              </StyledServiceText>
+            </StyledTOSWrapper>
           : null
         }
       </MainToggleWrapper>