refactor(Modals): move FAQ to flyout modal

packages/blockchain-wallet-v4-frontend/src/components/Flyout/types.ts

@@ -1,2 +1,2 @@
 // export type E2EType = 'borrowModal' | 'xyzModal'
-export type E2EType = 'borrowModal'
+export type E2EType = 'borrowModal' | 'faqModal'

packages/blockchain-wallet-v4-frontend/src/data/modals/types.ts

@@ -1,6 +1,6 @@
 import * as AT from './actionTypes'
 
-export type ModalNamesType = 'BORROW_MODAL'
+export type ModalNamesType = 'BORROW_MODAL' | 'FAQ_MODAL'
 
 export type ModalType = {
   options: any

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/Header/FaqIcon/index.js → packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/Header/FaqIcon/index.tsx

@@ -1,35 +1,36 @@
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-import React from 'react'
-
 import { actions, model } from 'data'
-import { getData } from './selectors'
+import { bindActionCreators, Dispatch } from 'redux'
+import { connect } from 'react-redux'
 import FaqIcon from './template'
+import React from 'react'
 
 const { GENERAL_EVENTS } = model.analytics
-class FaqIconContainer extends React.PureComponent {
+
+type LinkDispatchPropsType = {
+  analyticsActions: typeof actions.analytics,
+  modalActions: typeof actions.modals
+}
+
+class FaqIconContainer extends React.PureComponent<LinkDispatchPropsType> {
   onFaqClick = () => {
-    this.props.actions.layoutWalletFaqClicked()
+    this.props.modalActions.showModal('FAQ_MODAL')
     this.props.analyticsActions.logEvent(GENERAL_EVENTS.VIEW_WHATS_NEW)
   }
   render () {
     return (
       <FaqIcon
-        highlighted={this.props.highlighted}
         handleClick={this.onFaqClick}
       />
     )
   }
 }
 
-const mapStateToProps = state => getData(state)
-
-const mapDispatchToProps = dispatch => ({
-  actions: bindActionCreators(actions.components.layoutWallet, dispatch),
-  analyticsActions: bindActionCreators(actions.analytics, dispatch)
+const mapDispatchToProps = (dispatch: Dispatch): LinkDispatchPropsType => ({
+  analyticsActions: bindActionCreators(actions.analytics, dispatch),
+  modalActions: bindActionCreators(actions.modals, dispatch)
 })
 
 export default connect(
-  mapStateToProps,
+  null,
   mapDispatchToProps
 )(FaqIconContainer)

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/Header/FaqIcon/template.js

@@ -32,7 +32,7 @@ const FaqLink = styled(Link)`
 `
 
 const FaqIcon = props => {
-  const { handleClick, highlighted } = props
+  const { handleClick } = props
 
   return (
     <TooltipHost id='faq.tooltip'>
@@ -41,7 +41,6 @@ const FaqIcon = props => {
         weight={500}
         color='white'
         onClick={handleClick}
-        highlighted={highlighted}
         data-e2e='faqLink'
       >
         <NavbarIcon

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/TrayRight/index.js

@@ -10,7 +10,7 @@ import styled from 'styled-components'
 import { actions } from 'data'
 import { getData } from './selectors'
 import { Icon, Text } from 'blockchain-info-components'
-import Faq from './Faq'
+// import Faq from './Faq'
 import media from 'services/ResponsiveService'
 import WhatsNew from './WhatsNew'
 
@@ -104,7 +104,7 @@ class TrayRightContainer extends React.PureComponent {
           <Icon size='20px' name='close' cursor onClick={this.handleClose} />
         </Header>
         <Content>
-          {content === 'faq' && <Faq />}
+          {/* {content === 'faq' && <Faq />} */}
           {content === 'whatsnew' && <WhatsNew />}
         </Content>
       </AnimationWrapper>

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/template.js

@@ -14,7 +14,6 @@ import Modals from 'modals'
 import Page from './Page'
 import SettingsAddressesMenu from 'scenes/Settings/Addresses/Menu'
 import Tooltips from 'components/Tooltips'
-import TrayRight from './TrayRight'
 
 const Wrapper = styled.div`
   display: flex;
@@ -64,7 +63,6 @@ const WalletLayout = props => {
         </Nav>
         <Container>
           <MenuLeft location={location} />
-          <TrayRight />
           <Content data-e2e={`page${replace(/\//g, '-', location.pathname)}`}>
             <Top>
               <MenuTop />

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/TrayRight/Faq/FaqGroup/index.js → packages/blockchain-wallet-v4-frontend/src/modals/Faq/FaqGroup/index.js

@@ -3,7 +3,7 @@ import React from 'react'
 import styled from 'styled-components'
 
 import { Text } from 'blockchain-info-components'
-import FaqRow from './../FaqRow'
+import FaqRow from '../FaqRow'
 
 const Wrapper = styled.div`
   margin-bottom: 20px;

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/TrayRight/Faq/FaqRow/index.js → packages/blockchain-wallet-v4-frontend/src/modals/Faq/FaqRow/index.js

@@ -1,4 +1,4 @@
-import FaqRow from './template.js'
+import FaqRow from './template'
 import React from 'react'
 
 class FaqRowContainer extends React.PureComponent {

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/TrayRight/Faq/FaqRow/template.js → packages/blockchain-wallet-v4-frontend/src/modals/Faq/FaqRow/template.js

@@ -1,4 +1,4 @@
-import { Faq, FaqContent, FaqHeader } from './../FaqItem'
+import { Faq, FaqContent, FaqHeader } from '../FaqItem'
 import PropTypes from 'prop-types'
 import React from 'react'
 

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/TrayRight/Faq/index.js → packages/blockchain-wallet-v4-frontend/src/modals/Faq/index.tsx

@@ -1,16 +1,47 @@
 import { any, assoc, contains, curry, filter, map, path, toLower } from 'ramda'
+import { compose } from 'redux'
 import { connect } from 'react-redux'
-import PropTypes from 'prop-types'
-import React from 'react'
-
 import { getData } from './selectors'
+import { injectIntl } from 'react-intl'
+import { RemoteData } from 'blockchain-wallet-v4/src/remote/types'
 import { selectors } from 'data'
 import Faq from './template.js'
 import FaqContent from './FaqContent'
+import Flyout, { duration } from 'components/Flyout'
+import modalEnhancer from 'providers/ModalEnhancer'
+import React from 'react'
+
+type OwnPropsType = {
+  position: number,
+  close: () => void,
+  total: number,
+  userClickedOutside: boolean
+}
+
+type LinkStatePropsType = {
+  data: any,
+  canTrade: RemoteData<any, boolean>
+}
+
+type IntlType = {
+  intl: {
+    messages: {}
+  }
+}
+
+type Props = OwnPropsType & LinkStatePropsType & IntlType
+
+class FaqContainer extends React.PureComponent<Props> {
+  state = { show: false }
+
+  componentDidMount () {
+    /* eslint-disable */
+    this.setState({ show: true })
+    /* eslint-enable */
+  }
 
-class FaqContainer extends React.PureComponent {
   render () {
-    const { data, canTrade, handleTrayRightToggle } = this.props
+    const { data, canTrade } = this.props
     const { search } = data
 
     const partner = canTrade.cata({
@@ -26,10 +57,11 @@ class FaqContainer extends React.PureComponent {
         return contains(
           toLower(search),
           toLower(
-            this.context.intl.messages[x.props.id] || x.props.defaultMessage
+            this.props.intl.messages[x.props.id] || x.props.defaultMessage
           )
         )
       } else if (path(['props', 'children'], x)) {
+        // @ts-ignore
         return any(containsRecursive(search), path(['props', 'children'], x))
       } else {
         return false
@@ -46,7 +78,9 @@ class FaqContainer extends React.PureComponent {
       if (search) {
         const filteredGroupQuestions = filter(
           q =>
+            // @ts-ignore
             containsRecursive(search, q.question) ||
+            // @ts-ignore
             containsRecursive(search, q.answer) ||
             containsRecursive(search, contentPart.groupTitleMsg)
         )(contentPart.groupQuestions)
@@ -58,12 +92,14 @@ class FaqContainer extends React.PureComponent {
 
     const whitelistedContent = filter(whitelistContent, FaqContent)
     const filteredContent = map(filterContent, whitelistedContent)
+    const { position, total, close, userClickedOutside } = this.props
 
     return (
-      <Faq
-        filteredContent={filteredContent}
-        handleTrayRightToggle={handleTrayRightToggle}
-      />
+      <Flyout in={this.state.show} onClose={close} position={position} total={total} userClickedOutside={userClickedOutside} data-e2e='faqModal'>
+        <Faq
+          filteredContent={filteredContent}
+        />
+      </Flyout>
     )
   }
 }
@@ -73,11 +109,12 @@ const mapStateToProps = state => ({
   canTrade: selectors.exchange.getCanTrade(state)
 })
 
-FaqContainer.contextTypes = {
-  intl: PropTypes.object.isRequired
-}
+const enhance = compose<any>(
+  modalEnhancer('FAQ_MODAL', { transition: duration }),
+  connect(
+    mapStateToProps
+  ),
+  injectIntl
+)
 
-export default connect(
-  mapStateToProps,
-  undefined
-)(FaqContainer)
+export default enhance(FaqContainer)

packages/blockchain-wallet-v4-frontend/src/modals/index.js

@@ -77,6 +77,7 @@ import {
 } from './Xlm'
 import { SfoxExchangeData, SfoxTradeDetails } from './Sfox'
 import Borrow from './Borrow'
+import Faq from './Faq'
 import Onfido from './Onfido'
 import QRCode from './QRCode'
 import SignMessage from './SignMessage'
@@ -101,6 +102,7 @@ const Modals = () => (
     <EthAirdrop />
     <ExchangeConfirm />
     <ExchangeResults />
+    <Faq />
     <KycDocResubmit />
     <IdentityVerification />
     <ImportBtcAddress />

packages/blockchain-wallet-v4-frontend/src/providers/ModalEnhancer/index.js

@@ -38,29 +38,33 @@ export default (type, options = {}) => Component =>
     class Modal extends PureComponent {
       state = {}
 
+      handleClose = () => {
+        if (options.transition) {
+          this.setState({ userClickedOutside: true })
+          setTimeout(() => {
+            this.props.close()
+            this.setState({ userClickedOutside: false })
+          }, options.transition)
+        } else {
+          this.props.close()
+        }
+      }
+
       handleClick = e => {
         const modalContainer = ReactDOM.findDOMNode(this.node)
         if (
           modalContainer &&
           !this.props.disableOutsideClose &&
           equals(modalContainer.children[0], e.target)
         ) {
-          if (options.transition) {
-            this.setState({ userClickedOutside: true })
-            setTimeout(() => {
-              this.props.close()
-              this.setState({ userClickedOutside: false })
-            }, options.transition)
-          } else {
-            this.props.close()
-          }
+          this.handleClose()
         }
       }
 
       onKeyPressed = evt => {
         const event = evt || window.event
         if (event.keyCode === 27 && !options.preventEscapeClose) {
-          this.props.close()
+          this.handleClose()
         }
       }