chore(announcemenets): refactor (#6287)

packages/blockchain-wallet-v4-frontend/src/components/Announcements/Service/index.js

@@ -6,7 +6,7 @@ import { bindActionCreators } from 'redux'
 import { Remote } from '@core'
 import { actions } from 'data'
 
-import { getData } from './selectors'
+import { getData } from './selectors.js'
 import Announcement from './template.js'
 
 class ServiceAnnouncement extends React.PureComponent {
@@ -48,7 +48,9 @@ const mapDispatchToProps = (dispatch) => ({
 })
 
 ServiceAnnouncement.propTypes = {
-  alertArea: PropTypes.oneOf(['public', 'request', 'send', 'swap', 'wallet']).isRequired
+  alertArea: PropTypes.oneOf(['public', 'request', 'send', 'swap', 'wallet']).isRequired,
+  // eslint-disable-next-line react/no-unused-prop-types
+  currentCoin: PropTypes.string // - used in selector.js
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(ServiceAnnouncement)

packages/blockchain-wallet-v4-frontend/src/components/Announcements/Service/selectors.js

@@ -1,5 +1,3 @@
-import { includes, keys, prop } from 'ramda'
-
 import { createDeepEqualSelector } from '@core/utils'
 import { selectors } from 'data'
 
@@ -13,16 +11,15 @@ export const getData = createDeepEqualSelector(
   (announcementsR, announcementCached, language, ownProps) => {
     const { alertArea, currentCoin } = ownProps
     const announcements = announcementsR.getOrElse({})
-    const announcement = prop(alertArea, announcements)
-    if (keys(announcement).length) {
-      const announcement = announcements[alertArea]
-      const cachedState = announcementCached && announcementCached[announcement.id]
-      const showAnnouncement = prop('coins', announcement)
-        ? includes(currentCoin, prop('coins', announcement))
-        : !(cachedState && cachedState.dismissed)
+    const announcement = announcements[alertArea] ?? {}
+    if (Object.keys(announcement).length) {
+      const cachedState = announcementCached?.[announcement.id]
+      const showAnnouncement = announcement.coin
+        ? announcement?.coin?.includes(currentCoin)
+        : !cachedState?.dismissed
       return {
         announcements,
-        collapsed: cachedState && cachedState.collapsed,
+        collapsed: !!cachedState?.collapsed,
         language,
         showAnnouncement
       }

packages/blockchain-wallet-v4-frontend/src/components/Announcements/Static/index.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react'
+import { shallowEqual, useDispatch, useSelector } from 'react-redux'
+import styled from 'styled-components'
+
+import { getEmail, getEmailVerified } from '@core/redux/settings/selectors'
+import { actions } from 'data'
+import { media } from 'services/styles'
+
+import EmailReminder from './template.email'
+
+const Wrapper = styled.div`
+  display: flex;
+  padding: 8px 20px 8px 20px;
+  align-items: center;
+  justify-content: space-between;
+  background: ${(props) => props.theme.blue600};
+  overflow: hidden;
+  ${media.tablet`
+    display: none;
+  `};
+`
+
+const StaticAnnouncementsContainer = () => {
+  const [emailReminded, setEmailReminded] = useState(false)
+
+  const { data: emailVerified } = useSelector(getEmailVerified, shallowEqual)
+  const { data: email } = useSelector(getEmail, shallowEqual)
+
+  const dispatch = useDispatch()
+
+  const onEmailResend = () => {
+    if (emailReminded) return
+    dispatch(actions.modules.securityCenter.resendVerifyEmail(email, 'BANNER'))
+    setEmailReminded(true)
+    setTimeout(() => {
+      setEmailReminded(false)
+    }, 3000)
+  }
+
+  if (!emailVerified) return null
+
+  return (
+    <Wrapper>
+      <EmailReminder onEmailResend={onEmailResend} email={email} emailReminded={emailReminded} />
+    </Wrapper>
+  )
+}
+
+export default StaticAnnouncementsContainer

packages/blockchain-wallet-v4-frontend/src/components/Announcements/Static/template.email.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { FormattedMessage } from 'react-intl'
 import { LinkContainer } from 'react-router-bootstrap'
-import PropTypes from 'prop-types'
 import styled, { css, keyframes } from 'styled-components'
 
 import { Icon, Text } from 'blockchain-info-components'
@@ -42,9 +41,13 @@ const EmailSentNotification = styled(Text)<{ className?: string }>`
   `}
 `
 
-const EmailReminder = (props) => {
-  const { email, emailReminded, onEmailResend } = props
+type Props = {
+  email: string
+  emailReminded: boolean
+  onEmailResend: () => void
+}
 
+const EmailReminder = ({ email, emailReminded, onEmailResend }: Props) => {
   return (
     <>
       <ItemWrapper>
@@ -75,7 +78,7 @@ const EmailReminder = (props) => {
         </EmailSentNotification>
       </ItemWrapper>
       <ItemWrapper>
-        <Action color='white' size='14px' onClick={() => onEmailResend(email)}>
+        <Action color='white' size='14px' onClick={onEmailResend}>
           <FormattedMessage
             id='layouts.wallet.header.announcements.emailreminder.resend'
             defaultMessage='Resend Email'
@@ -97,10 +100,4 @@ const EmailReminder = (props) => {
   )
 }
 
-EmailReminder.propTypes = {
-  email: PropTypes.string.isRequired,
-  emailReminded: PropTypes.bool,
-  onEmailResend: PropTypes.func.isRequired
-}
-
 export default EmailReminder

packages/blockchain-wallet-v4-frontend/src/components/Announcements/index.tsx

@@ -0,0 +1,2 @@
+export { default as ServiceAnnouncement } from './Service'
+export { default as StaticAnnouncement } from './Static'

packages/blockchain-wallet-v4-frontend/src/layouts/Auth/components/Header/index.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 
 import { Image, Link } from 'blockchain-info-components'
-import Announcements from 'components/Announcements'
+import { ServiceAnnouncement } from 'components/Announcements'
 import { Brand, Public } from 'components/Navbar'
 import { isMobile, media } from 'services/styles'
 
@@ -73,7 +73,7 @@ const Header = (props) => {
           </AuthBrand>
         </NavbarBrandStyled>
       </NavbarStyled>
-      <Announcements type='service' alertArea='public' />
+      <ServiceAnnouncement alertArea='public' />
     </>
   )
 }

packages/blockchain-wallet-v4-frontend/src/layouts/Nfts/NftsTemplate.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 
 import Alerts from 'components/Alerts'
-import Announcements from 'components/Announcements'
+import { ServiceAnnouncement, StaticAnnouncement } from 'components/Announcements'
 import { UkBanner } from 'components/Banner'
 import Tooltips from 'components/Tooltips'
 import ErrorBoundary from 'providers/ErrorBoundaryProvider'
@@ -29,8 +29,8 @@ const NftsTemplate: React.FC<any> = (props) => {
         <Nav>
           <MenuTop />
           <UkBanner />
-          <Announcements type='service' alertArea='wallet' />
-          <Announcements type='static' />
+          <ServiceAnnouncement alertArea='wallet' />
+          <StaticAnnouncement />
         </Nav>
         <Tooltips />
         <Modals />

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/WalletLayout/WalletLayout.tsx

@@ -5,7 +5,7 @@ import { replace } from 'ramda'
 import { bindActionCreators, Dispatch } from 'redux'
 
 import Alerts from 'components/Alerts'
-import Announcements from 'components/Announcements'
+import { ServiceAnnouncement, StaticAnnouncement } from 'components/Announcements'
 import { SofiBanner, UkBanner, UkFooterBanner } from 'components/Banner'
 import { CowboysCardComponent } from 'components/Card/CowboysCard'
 import ExchangePromo from 'components/Card/ExchangePromo'
@@ -70,8 +70,8 @@ const WalletLayout: Props = ({
           <MenuTop />
           <SofiBanner />
           <UkBanner />
-          <Announcements type='service' alertArea='wallet' />
-          <Announcements type='static' />
+          <ServiceAnnouncement alertArea='wallet' />
+          <StaticAnnouncement />
         </Nav>
         <Container>
           {hideMenu ? null : <MenuLeft />}

packages/blockchain-wallet-v4-frontend/src/modals/Bch/SendBch/template.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import styled from 'styled-components'
 
 import { Modal, ModalBody, ModalHeader } from 'blockchain-info-components'
-import Announcements from 'components/Announcements'
+import { ServiceAnnouncement } from 'components/Announcements'
 
 const SendHeader = styled(ModalHeader)`
   border-bottom: 0;
@@ -19,7 +19,7 @@ const SendBch = (props) => (
     <SendHeader icon='send' onClose={props.closeAll}>
       <FormattedMessage id='modals.sendbch.title' defaultMessage='Send Bitcoin Cash' />
     </SendHeader>
-    <Announcements type='service' alertArea='send' currentCoin='BCH' />
+    <ServiceAnnouncement alertArea='send' currentCoin='BCH' />
     <ModalBody>{props.children}</ModalBody>
   </Modal>
 )

packages/blockchain-wallet-v4-frontend/src/modals/Btc/SendBtc/template.tsx

@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl'
 import styled from 'styled-components'
 
 import { Modal, ModalBody, ModalHeader } from 'blockchain-info-components'
-import Announcements from 'components/Announcements'
+import { ServiceAnnouncement } from 'components/Announcements'
 
 const SendHeader = styled(ModalHeader)`
   border-bottom: 0;
@@ -18,7 +18,7 @@ const SendBtc = (props) => (
     <SendHeader icon='send' onClose={props.closeAll}>
       <FormattedMessage id='modals.sendbitcoin.title' defaultMessage='Send Bitcoin' />
     </SendHeader>
-    <Announcements type='service' alertArea='send' currentCoin='BTC' />
+    <ServiceAnnouncement alertArea='send' currentCoin='BTC' />
     <ModalBody>{props.children}</ModalBody>
   </Modal>
 )

packages/blockchain-wallet-v4-frontend/src/modals/Eth/SendEth/template.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import styled from 'styled-components'
 
 import { Modal, ModalBody, ModalHeader } from 'blockchain-info-components'
-import Announcements from 'components/Announcements'
+import { ServiceAnnouncement } from 'components/Announcements'
 
 const SendHeader = styled(ModalHeader)`
   border-bottom: 0;
@@ -23,7 +23,7 @@ const SendEth = (props) => (
         values={{ coinDisplayName: props.coinDisplayName }}
       />
     </SendHeader>
-    <Announcements type='service' alertArea='send' currentCoin={props.coin} />
+    <ServiceAnnouncement alertArea='send' currentCoin={props.coin} />
     <ModalBody>{props.children}</ModalBody>
   </Modal>
 )

packages/blockchain-wallet-v4-frontend/src/modals/Xlm/SendXlm/template.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import styled from 'styled-components'
 
 import { Modal, ModalBody, ModalHeader } from 'blockchain-info-components'
-import Announcements from 'components/Announcements'
+import { ServiceAnnouncement } from 'components/Announcements'
 
 const SendHeader = styled(ModalHeader)`
   border-bottom: 0;
@@ -19,7 +19,7 @@ const SendXlm = (props) => (
     <SendHeader icon='send' onClose={props.closeAll}>
       <FormattedMessage id='modals.sendxlm.title' defaultMessage='Send Stellar' />
     </SendHeader>
-    <Announcements type='service' alertArea='send' currentCoin='XLM' />
+    <ServiceAnnouncement alertArea='send' currentCoin='XLM' />
     <ModalBody>{props.children}</ModalBody>
   </Modal>
 )