fix - forgotten files

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

@@ -0,0 +1,53 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { bindActionCreators, compose } from 'redux'
+
+import { actions } from 'data'
+import { getBtcData, getBchData } from './selectors'
+import modalEnhancer from 'providers/ModalEnhancer'
+import TransactionReport from './template'
+
+class TransactionReportContainer extends React.PureComponent {
+  componentDidMount () {
+    this.props.actions.initialized()
+  }
+
+  componentWillUnmount () {
+    this.props.actions.destroyed()
+  }
+
+  render () {
+    return <TransactionReport
+      coin={this.props.coin}
+      csvData={this.props.csvData}
+      onSubmit={() => this.props.actions.submitClicked(this.props.coin)}
+      closeAll={this.props.closeAll}
+      position={this.props.position}
+      total={this.props.total}
+    />
+  }
+}
+
+TransactionReportContainer.propTypes = {
+  coin: PropTypes.oneOf(['BTC', 'BCH'])
+}
+
+TransactionReportContainer.defaultProps = {
+  coin: 'BTC'
+}
+
+const mapStateToProps = (state, ownProps) => ({
+  csvData: ownProps.coin === 'BTC' ? getBtcData(state) : getBchData(state)
+})
+
+const mapDispatchToProps = dispatch => ({
+  actions: bindActionCreators(actions.components.transactionReport, dispatch)
+})
+
+const enhance = compose(
+  modalEnhancer('TransactionReport'),
+  connect(mapStateToProps, mapDispatchToProps)
+)
+
+export default enhance(TransactionReportContainer)

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

@@ -0,0 +1,96 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import { FormattedMessage } from 'react-intl'
+import { reduxForm, Field } from 'redux-form'
+import { CSVDownload } from 'react-csv'
+
+import { Button, Icon, Link, Modal, ModalHeader, ModalBody, Text } from 'blockchain-info-components'
+import { DateBoxDebounced, SelectBoxBitcoinAddresses, Form } from 'components/Form'
+import { required } from 'services/FormHelper'
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+`
+const Row = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  margin-bottom: ${props => props.margin || '10px'};
+`
+const TimeContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+`
+const Footer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  width: 100%;
+
+  & > :first-child { margin-right: 10px; }
+`
+
+const FirstStep = (props) => {
+  const { coin, csvData, position, total, closeAll, submitting, invalid, handleSubmit } = props
+
+  return (
+    <Modal size='medium' position={position} total={total}>
+      <ModalHeader onClose={closeAll}>
+        <FormattedMessage id='modals.transactionreport.export' defaultMessage='Export transactions history' />
+      </ModalHeader>
+      <ModalBody>
+        <Form onSubmit={handleSubmit}>
+          <Container>
+            <Row>
+              <Text size='13px' weight={400} capitalize>
+                <FormattedMessage id='modals.transactionreport.selectwallet' defaultMessage='Select wallet' />
+              </Text>
+            </Row>
+            <Row margin='30px'>
+              <Field name='from' component={SelectBoxBitcoinAddresses} coin={coin} />
+            </Row>
+            <Row>
+              <Text size='13px' weight={400} capitalize>
+                <FormattedMessage id='modals.transactionreport.selectwallet' defaultMessage='Select time range' />
+              </Text>
+            </Row>
+            <Row margin='30px'>
+              <TimeContainer>
+                <Field name='start' validate={[required]} component={DateBoxDebounced} />
+                <Icon name='right-arrow' size='30px' />
+                <Field name='end' validate={[required]} component={DateBoxDebounced} />
+              </TimeContainer>
+            </Row>
+          </Container>
+          <Footer>
+            <Link size='13px' weight={300} fullwidth onClick={closeAll}>
+              <FormattedMessage id='modals.transactionreport.firststep.close' defaultMessage='Close' />
+            </Link>
+            <Button type='submit' nature='primary' disabled={submitting || invalid}>
+              <FormattedMessage id='modals.transactionreport.firststep.generate' defaultMessage='Export CSV' />
+            </Button>
+            {csvData && <CSVDownload data={csvData} />}
+          </Footer>
+        </Form>
+      </ModalBody>
+    </Modal>
+  )
+}
+
+FirstStep.propTypes = {
+  handleSubmit: PropTypes.func.isRequired
+}
+
+export default reduxForm({ form: 'transactionReport' })(FirstStep)