Tip banner display is now customized for Reddit inline tipping

src/features/rewards/index.ts

@@ -20,6 +20,7 @@ import InfoCard from './infoCard'
 import List from './list'
 import ListToken from './listToken'
 import MainToggle from './mainToggle'
+import MediaBox from './mediaBox'
 import ModalActivity from './modalActivity'
 import ModalAddFunds from './modalAddFunds'
 import ModalBackupRestore from './modalBackupRestore'
@@ -42,7 +43,6 @@ import Tip from './tip'
 import ToggleTips from './toggleTips'
 import Tokens from './tokens'
 import Tooltip from './tooltip'
-import TweetBox from './tweetBox'
 import WalletEmpty from './walletEmpty'
 import WalletOff from './walletOff'
 import WalletPanel from './walletPanel'
@@ -71,6 +71,7 @@ export {
   List,
   ListToken,
   MainToggle,
+  MediaBox,
   ModalActivity,
   ModalAddFunds,
   ModalBackupRestore,
@@ -93,7 +94,6 @@ export {
   ToggleTips,
   Tokens,
   Tooltip,
-  TweetBox,
   WalletEmpty,
   WalletOff,
   WalletPanel,

src/features/rewards/mediaBox/index.tsx

@@ -0,0 +1,66 @@
+/* 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 {
+  StyledMediaBox,
+  StyledMediaText,
+  StyledMediaTimestamp,
+  StyledMediaIcon
+} from './style'
+
+import {
+  TwitterColorIcon,
+  RedditColorIcon
+} from '../../../components/icons'
+
+export interface Props {
+  mediaType: 'twitter' | 'reddit'
+  mediaText: string
+  mediaTimestamp: number
+  mediaTimetext?: string
+}
+
+export default class MediaBox extends React.Component<Props, {}> {
+  formatTimestamp = (timestamp: Date) => {
+    const dateOptions = { month: 'short', day: 'numeric' }
+    if (new Date().getFullYear() !== timestamp.getFullYear()) {
+      (dateOptions as any)['year'] = 'numeric'
+    }
+    return timestamp.toLocaleString(navigator.language, dateOptions)
+  }
+
+  getMediaIcon = () => {
+    return this.props.mediaType === 'twitter'
+    ? <TwitterColorIcon />
+    : this.props.mediaType === 'reddit'
+    ? <RedditColorIcon />
+    : null
+  }
+
+  getMediaTimestamp = () => {
+    const { mediaType, mediaTimestamp, mediaTimetext } = this.props
+    return mediaType === 'twitter'
+      ? this.formatTimestamp(new Date(mediaTimestamp * 1000))
+      : mediaType === 'reddit'
+      ? mediaTimetext
+      : null
+  }
+
+  render () {
+    return (
+      <StyledMediaBox>
+        <StyledMediaIcon>
+          {this.getMediaIcon()}
+        </StyledMediaIcon>
+        <StyledMediaTimestamp>
+          {this.getMediaTimestamp()}
+        </StyledMediaTimestamp>
+        <StyledMediaText>
+          {this.props.mediaText}
+        </StyledMediaText>
+      </StyledMediaBox>
+    )
+  }
+}

src/features/rewards/tweetBox/style.ts → src/features/rewards/mediaBox/style.ts

@@ -5,7 +5,7 @@
 import palette from '../../../theme/colors'
 import styled from 'styled-components'
 
-export const StyledTweetBox = styled<{}, 'div'>('div')`
+export const StyledMediaBox = styled<{}, 'div'>('div')`
   border: 1px solid ${palette.grey400};
   border-radius: 5px;
   margin: 15px 0 0 0;
@@ -15,18 +15,18 @@ export const StyledTweetBox = styled<{}, 'div'>('div')`
   overflow: hidden;
 `
 
-export const StyledTweetTimestamp = styled<{}, 'div'>('div')`
+export const StyledMediaTimestamp = styled<{}, 'div'>('div')`
   color: ${palette.grey500};
   font-size: 12px;
   display: inline;
   vertical-align: middle;
 `
 
-export const StyledTweetText = styled<{}, 'p'>('p')`
+export const StyledMediaText = styled<{}, 'p'>('p')`
   font-size: 14px;
 `
 
-export const StyledTwitterIcon = styled<{}, 'span'>('span')`
+export const StyledMediaIcon = styled<{}, 'span'>('span')`
   width: 22px;
   height: 22px;
   margin-right: 5px;

stories/features/rewards/concepts.tsx

@@ -15,7 +15,7 @@ import {
   WalletPanelDisabled,
   SiteBanner,
   Tip,
-  TweetBox,
+  MediaBox,
   PanelWelcome,
   WalletPanel,
   WalletSummary,
@@ -81,8 +81,9 @@ storiesOf('Feature Components/Rewards/Concepts/Desktop', module)
     />
   ))
   .add('Site Banner', withState({ donationAmounts, currentAmount: '5.0', showBanner: true }, (store) => {
+    const mediaProvider = select<any>('Provider', { youtube: 'youtube', twitter: 'twitter', twitch: 'twitch', reddit: 'reddit' }, 'youtube')
     const screenName = text('Screen Name', '')
-    const tweetText = text('Tweet Text', '')
+    const commenttext = text('Post Text', '')
 
     const onDonate = () => {
       console.log('onDonate')
@@ -97,7 +98,11 @@ storiesOf('Feature Components/Rewards/Concepts/Desktop', module)
     }
 
     const isTwitterTip = () => {
-      return screenName.length > 0 || tweetText.length > 0
+      return mediaProvider === 'twitter'
+    }
+
+    const isRedditTip = () => {
+      return mediaProvider === 'reddit'
     }
 
     const onClose = () => {
@@ -125,7 +130,7 @@ storiesOf('Feature Components/Rewards/Concepts/Desktop', module)
                 onAmountSelection={onAmountSelection}
                 currentAmount={store.state.currentAmount}
                 onClose={onClose}
-                provider={select<any>('Provider', { youtube: 'youtube', twitter: 'twitter', twitch: 'twitch', reddit: 'reddit' }, 'youtube')}
+                provider={mediaProvider}
                 social={[
                   {
                     type: 'twitter',
@@ -148,9 +153,17 @@ storiesOf('Feature Components/Rewards/Concepts/Desktop', module)
               >
                 {
                   isTwitterTip()
-                  ? <TweetBox
-                      tweetText={tweetText}
-                      tweetTimestamp={number('Timestamp in seconds', 46420000) || 0}
+                  ? <MediaBox
+                      mediaType={'twitter'}
+                      mediaText={commenttext}
+                      mediaTimestamp={number('Timestamp in seconds', 46420000) || 0}
+                  />
+                  : isRedditTip()
+                  ? <MediaBox
+                      mediaType={'reddit'}
+                      mediaText={commenttext}
+                      mediaTimestamp={0}
+                      mediaTimetext={'3 days ago'}
                   />
                   : null
                 }

stories/features/rewards/other.tsx

@@ -23,7 +23,7 @@ import {
   ToggleTips,
   Tooltip,
   DonationOverlay,
-  TweetBox,
+  MediaBox,
   Tab
 } from '../../../src/features/rewards'
 import {
@@ -308,10 +308,13 @@ storiesOf('Feature Components/Rewards/Other/Desktop', module)
     )
   }))
   .add('Tweet Box', () => {
+    const mediaProvider = select<any>('Provider', { twitter: 'twitter', reddit: 'reddit' }, 'twitter')
     return (
-      <TweetBox
-        tweetTimestamp={number('Timestamp in seconds', 46420000)}
-        tweetText={text('Tweet text', 'This is my tweet.')}
+      <MediaBox
+        mediaType={mediaProvider}
+        mediaText={text('Media text', 'This is my text.')}
+        mediaTimetext={mediaProvider === 'reddit' ? text('Reddit Text', '3 months ago') : ''}
+        mediaTimestamp={mediaProvider === 'twitter' ? number('Timestamp in seconds', 46420000) : 0}
       />
     )
   })