Merge branch 'feature/wallet_page/cash_in' into 'master'

Feature/wallet page/cash in

Closes #6

See merge request faircoop/BankOfTheCommons/wallet-frontend!2

src/components/widgets/MonthEarnings/actions.js

@@ -29,7 +29,7 @@ const getMonthEarnings = () =>
         path: MONTH_EARNINGS_URL
     }).then(response => {
         let monthEarnings = response.data;
-        dispatch(success(monthEarnings.data));
+        dispatch(success(monthEarnings));
     }).catch(error => {
         console.error("ERROR");
     });

src/components/widgets/Transactions/actions.js

 import { createAction } from 'redux-actions';
 import TRANSACTIONS  from './constants';
-import { getAuthToken } from 'utils';
 import { fetchApi } from 'utils';
 
 const TRANSACTIONS_URL = "user/v1/last";

src/components/widgets/Transactions/index.js

@@ -95,7 +95,7 @@ class Transactions extends Component {
                   simple
                   onClick={() => alert("You've pressed the edit button on colmun id: ")}
                   color="warning"
-                  customClass="edit">
+                  customclass="edit">
                   <Dvr />
                 </Button>{" "}
                 { /* use this button to remove the data row */ }
@@ -105,7 +105,7 @@ class Transactions extends Component {
                   simple
                   onClick={() => alert("You've pressed the delete button on colmun id: ")}
                   color="danger"
-                  customClass="remove">
+                  customclass="remove">
                   <Close />
                 </Button>{" "}
               </div>

src/components/widgets/WalletActions/CashIn/Cash.jsx

@@ -3,6 +3,7 @@ import React from "react";
 import withStyles from "@material-ui/core/styles/withStyles";
 
 import { Card } from "@material-ui/core";
+import CashInMethod from './methods';
 
 const style = {
   infoText: {
@@ -35,12 +36,12 @@ class Cash extends React.Component {
     }
     let Component = ''
     if(this.props.allStates.choice.selectedMethod) {
-      Component = this.props.allStates.choice.selectedMethod.Component
+      Component = this.props.allStates.choice.selectedMethod
     }
     return (
       <Card>
-        <div>
-          {typeof(Component) === "string" ?  Component : <Component />}
+        <div id="cash_in_method">
+          <CashInMethod method={Component} />
         </div>
       </Card>
     );

src/components/widgets/WalletActions/CashIn/SelectMethod.jsx

 import React from 'react';
+import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import Grid from '@material-ui/core/Grid';
 
-import  methods from './methods'
-
 const styles = theme => ({
   root: {
     width: '100%',
@@ -33,16 +32,17 @@ class SelectMethod extends React.Component {
   }
 
   render() {
+    const { methods } = this.props;
     var items = methods.map(method => {
       return (
           <ListItem
             button
-            disabled={method.disabled}
+            disabled={method.status === "unavailable"}
             selected={this.state.selectedMethod === method}
             onClick={event => this.handleListItemClick(event, method)}
             key={method.name}
           >
-              <img height={40} width={120} alt='' src={require(`assets/img/${method.name}.png`)} />
+              <img height={40} width={120} alt='' src={method.image} />
           </ListItem>
       )
     })
@@ -63,4 +63,8 @@ SelectMethod.propTypes = {
   classes: PropTypes.object.isRequired,
 };
 
-export default withStyles(styles)(SelectMethod);
\ No newline at end of file
+const mapStateToProps = (state) => ({
+  methods: state.wallet_actions.cash_in
+})
+
+export default connect(mapStateToProps, {})(withStyles(styles)(SelectMethod));

src/components/widgets/WalletActions/CashIn/index.js

@@ -31,9 +31,10 @@ class CashIn extends Component {
     }
   }
   render() {
+      const { disabled } = this.props;
     return (
       <div>
-        <Button onClick={this.handleOpen}>Cash In</Button>
+        <Button onClick={this.handleOpen} disabled={disabled}>Cash In</Button>
         <Dialog 
           fullScreen
           onClose={this.handleClose} 
@@ -71,4 +72,4 @@ class CashIn extends Component {
     )
   }
 }
-export default CashIn;
\ No newline at end of file
+export default CashIn;

src/components/widgets/WalletActions/CashIn/methods/BTC/actions.js

-import { createAction } from 'redux-actions';
-import BTC_IN_LIST from './constants';
-import { getAuthToken } from 'utils';
-import axios from 'axios'
-
-
-const reset = createAction(BTC_IN_LIST, () => ({
-  status: 'initial',
-}));
-
-const begin = createAction(BTC_IN_LIST, () => ({
-  status: 'pending',
-}));
-
-const fail = createAction(BTC_IN_LIST, error => ({
-  error,
-  status: 'error',
-}));
-
-const success = createAction(BTC_IN_LIST, list=> ({
-  list,
-  status: 'success'
-}));
-
-const getBtcInList = () =>
-  (dispatch) => {
-    dispatch(begin);
-    axios({
-        method: 'GET',
-        headers: {
-        Authorization: `Bearer ${getAuthToken()}`
-        },
-        url: 'https://api.bankofthecommons.coop/company/v1/wallet/cash_in_token/btc-in'
-    }).then(response => {
-        let btc_in_list = response.data
-
-        dispatch(success(btc_in_list.data))
-    }).catch(error => {
-        console.error("ERROR");
-    });
-}
-
-const actions = {
-    reset,
-    begin,
-    fail,
-    success,
-    getBtcInList
-}
-
-export default actions;
\ No newline at end of file

src/components/widgets/WalletActions/CashIn/methods/BTC/constants.js

-const BTC_IN_LIST = "BTC_IN_LIST"
-
-export default BTC_IN_LIST;
\ No newline at end of file

src/components/widgets/WalletActions/CashIn/methods/BTC/index.js

-import React, { Component } from 'react'
-import BtcList from './BtcList';
-
-export default class BtcIn extends Component {
-  render() {
-    return (
-      <div>
-          <BtcList />
-      </div>
-    )
-  }
-}

src/components/widgets/WalletActions/CashIn/methods/BTC/reducers.js

-import  BTC_IN_LIST from './constants';
-
-export default function btc_in_list(state = { status: 'initial', list: {} }, action) {
-  switch (action.type) {
-    case BTC_IN_LIST : {
-      const { 
-        list = state.list,
-        error = state.error,
-        list_status = state.status
-       } = action.payload
-      return {
-        list,
-        error,
-        list_status,
-      };
-    }
-    default:
-      return state;
-  }
-}
\ No newline at end of file

src/components/widgets/WalletActions/CashIn/methods/BTC/BtcList.jsx → src/components/widgets/WalletActions/CashIn/methods/Coin.jsx

 import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import actions from './actions';
-import { Paper } from '@material-ui/core';
+import { Paper, Card } from '@material-ui/core';
 import Table from "components/atoms/Table/Table.jsx";
 import Close from "@material-ui/icons/Close";
 import Button from "components/atoms/CustomButtons/Button.jsx";
 import SweetAlert from "react-bootstrap-sweetalert";
 import QRCode from 'qrcode.react'
+import TextField from '@material-ui/core/TextField';
 
-class BtcInList extends Component {
+class Coin extends Component {
   constructor(){
       super();
       this.state = {
-          loading: true,
-          showQr: null
+          showQr: null,
+          label: ''
       };
   }
 
-  componentWillMount() {
-      this.props.getBtcInList();
-  }
-
-  componentWillReceiveProps(nextProps){
-      if(nextProps.status === "success") {
-          this.setState({loading: false});
-      }
-  }
   hideQr() {
-      this.setState({showQr: null})
+      this.setState({showQr: null});
   }
+
   showQr(element) {
-    const  {token, label} = element
+    const  {token, label} = element;
     const text =  "bitcoin:"+ token.replace(/[^a-zA-Z 0-9.]+/g,' ') + "?amount=0&label=" + label.replace(/[^a-zA-Z 0-9.]+/g,' ');
     this.setState({
       showQr: (
@@ -45,9 +36,16 @@ class BtcInList extends Component {
       )
     });
   }
-  
+
+  removeToken(id) {
+      this.props.removeCashInToken(this.props.method, id);
+  }
+  createCashInToken() {
+      this.props.createCashInToken(this.props.method, this.state.label)
+      this.setState({label: ''})
+  }
   render() {
-    const { list } = this.props;
+    const { list, status } = this.props;
     let elements = []
     if(list.elements){
         elements = list.elements.map(element => ([
@@ -56,27 +54,41 @@ class BtcInList extends Component {
             element.token,
             <div>
                 <Button onClick={() => this.showQr(element)}> Show Qr</Button>
-                <Button color="danger" key={element.id}>
+                <Button onClick={() => this.removeToken(element.id)} color="danger" key={element.id}>
                     <Close />
-                </Button>
+                </Button >
             </div>
         ]))
     }
-    return (
+        let createToken = ''
+        if(elements.length < 5 && status !== 'pending') {
+            createToken = (
+                <div>
+                    <TextField label="label" value={this.state.label} onChange={(event) => this.setState({label: event.target.value})} />
+                    <Button 
+                        onClick={() => this.createCashInToken()}
+                        color="success"
+                    > Generate new {this.props.method.cname} address </Button>
+                </div>
+            )
+        } else {
+            if (elements.length === 5)
+                createToken = 'if you want to generate a new address, you have to delete a old address'
+        }
+      return (
         <Paper>
+            <Card>
+                {createToken}
+            </Card>
             {this.state.showQr}
             <Table
                 tableHead={["id","Label","Token", "Actions"]}
                 tableData={elements}
             />
+            {elements.length === 0 && status !== "pending" ? 'No data found':''}
         </Paper>
     )
   }
 }
 
-const mapStateToProps = (state) => ({
-    list: state.btc_in.list,
-    status: state.btc_in.list_status
-})
-
-export default connect(mapStateToProps, actions)(BtcInList);
+export default Coin;

src/components/widgets/WalletActions/CashIn/methods/FAC/constants.js

-const FAC_IN = "FAC_IN"
-
-export default FAC_IN;
\ No newline at end of file

src/components/widgets/WalletActions/CashIn/methods/FAC/index.js

-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import actions from './actions';
-import { Paper } from '@material-ui/core';
-import Table from "components/atoms/Table/Table.jsx";
-import Close from "@material-ui/icons/Close";
-import Button from "components/atoms/CustomButtons/Button.jsx";
-import SweetAlert from "react-bootstrap-sweetalert";
-import QRCode from 'qrcode.react'
-
-class FacIn extends Component {
-  constructor(){
-      super();
-      this.state = {
-          loading: true,
-          showQr: null
-      };
-  }
-
-  componentWillMount() {
-      this.props.getFacIn();
-  }
-
-  componentWillReceiveProps(nextProps){
-      if(nextProps.status === "success") {
-          this.setState({loading: false});
-      }
-  }
-  hideQr() {
-      this.setState({showQr: null})
-  }
-  showQr(element) {
-    const  {token, label} = element
-    const text =  "faircoin:"+ token.replace(/[^a-zA-Z 0-9.]+/g,' ') + "?amount=0&label=" + label.replace(/[^a-zA-Z 0-9.]+/g,' ');
-    this.setState({
-      showQr: (
-        <SweetAlert
-          style={{ display: "block", marginTop: "-200px" }}
-          title={label ? label: 'Unlabeled'}
-          onConfirm={() => this.hideQr()}
-          onCancel={() => this.hideQr()}
-        >
-            <QRCode level='H' size={200} value={text} />
-        </SweetAlert>
-      )
-    });
-  }
-  
-  render() {
-    const { fac_in } = this.props;
-    let elements = []
-    if(fac_in.elements){
-        elements = fac_in.elements.map(element => ([
-            element.id,
-            element.label,
-            element.token,
-            <div>
-                <Button onClick={() => this.showQr(element)}> Show Qr</Button>
-                <Button color="danger" key={element.id}>
-                    <Close />
-                </Button>
-            </div>
-        ]))
-    }
-    return (
-        <Paper>
-            {this.state.showQr}
-            <Table
-                tableHead={["id","Label","Token", "Actions"]}
-                tableData={elements}
-            />
-        </Paper>
-    )
-  }
-}
-
-const mapStateToProps = (state) => ({
-    fac_in: state.fac_in.fac_in,
-    status: state.fac_in.status
-})
-
-export default connect(mapStateToProps, actions)(FacIn);

src/components/widgets/WalletActions/CashIn/methods/FAC/reducers.js

-import  FAC_IN from './constants';
-
-export default function fac_in(state = { status: 'initial', fac_in: {} }, action) {
-  switch (action.type) {
-    case FAC_IN : {
-      const { 
-        fac_in = state.fac_in,
-        error = state.error,
-        status = state.status
-       } = action.payload
-      return {
-        fac_in,
-        error,
-        status,
-      };
-    }
-    default:
-      return state;
-  }
-}
\ No newline at end of file

src/components/widgets/WalletActions/CashIn/methods/Sepa.jsx

+import React, { Component } from 'react';
+import Button from "components/atoms/CustomButtons/Button.jsx";
+
+class Sepa extends Component {
+    createCashInToken() {
+        this.props.createCashInToken(this.props.method, 'default')
+    }
+    render(){
+        const { list, status } = this.props
+        let bank_info;
+        let element;
+
+        if(list.elements){
+            element = list.elements[0];
+        }
+        if(list.bank_info){
+            bank_info = list.bank_info[0];
+        }
+        if(status === "pending"){
+            return <div></div>;
+        }
+        if(!(bank_info && element)){
+            return (
+                <div>
+                  Please generate your reference.
+                  <Button 
+                    onClick={() => this.createCashInToken()}
+                    color="success"
+                    > Generate Reference </Button>
+                </div>
+            )
+        }
+        return (
+            <div>
+              <p>
+                In order to deposit <b>EUR</b> into our BotC account you must send a bank transfer to one of the following account\'s details:
+              </p>
+              <div>
+                <div>
+                  <p>
+                    <b>BENEFICIARY:</b>
+                    { bank_info.beneficiary }
+                  </p>
+                  <p><b>IBAN:</b>  {  bank_info.iban  } </p>
+                  <p><b>BIC/SWIFT:</b>   { bank_info.bic_swift }  </p>
+                  <p><b>BANK:</b>   { bank_info.bank }  </p>
+                  <p><b>REFERENCE:</b>   { element.token }  </p>
+                  <p><b>IMPORTANT:</b></p>
+                  <p><b>* ENSURE</b> the reference <b>MATCHES EXACTLY</b> with the given above, otherwise you will need to contact us to make it manually - which will take more time. </p>
+                  <p>EXTRA NOTES:</p> 
+
+                  <p>* The trasfer can take up to two-three working days to appear in your wallet (from the moment the transfer was done). </p>
+                </div>
+              </div>
+            </div>
+        )
+    }
+}
+
+export default Sepa;
+

src/components/widgets/WalletActions/CashIn/methods/actions.js

+import { createAction } from 'redux-actions';
+import { getAuthToken } from 'utils';
+import axios from 'axios';
+import { CASH_IN_TOKENS, CASH_IN_TOKEN_CREATE, CASH_IN_TOKEN_REMOVE } from './constants';
+
+const reset = createAction(CASH_IN_TOKENS, (method) => ({
+  method,
+  status: 'initial',
+}));
+
+const begin = createAction(CASH_IN_TOKENS, (method) => ({
+  method,
+  status: 'pending',
+}));
+
+const fail = createAction(CASH_IN_TOKENS, (method, error) => ({
+  method,
+  error,
+  status: 'error',
+}));
+
+const success = createAction(CASH_IN_TOKENS, (method, list)=> ({
+  method,
+  list,
+  status: 'success'
+}));
+
+const create = createAction(CASH_IN_TOKEN_CREATE, (method, token) => ({
+    method,
+    token,
+    status: 'created'
+}));
+
+const remove = createAction(CASH_IN_TOKEN_REMOVE, (method, id) => ({
+    method,
+    id,
+    status: 'removed'
+}))
+
+const createCashInToken = (method, label) => 
+    (dispatch) => {
+        var body = new FormData();
+        body.set('method', `${method.cname}-in`);
+        body.set('label', label);
+        axios({
+            method: 'POST',
+            data: body,
+            headers: {
+                Authorization: `Bearer ${getAuthToken()}`,
+            },
+            url: `https://api.bankofthecommons.coop/company/v1/wallet/cash_in_token`
+        }).then(response => {
+            let cash_in_token = response.data;
+            dispatch(create(method, cash_in_token.data));
+        }).catch(error => {
+            console.error("ERROR");
+        });
+};
+
+const removeCashInToken = (method, id) => 
+    (dispatch) => {
+        let body = new FormData();
+        body.set('disable', true);
+        axios({
+            method: 'PUT',
+            data: "disable=true",
+            headers: {
+                Authorization: `Bearer ${getAuthToken()}`,
+                "Content-Type": 'application/x-www-form-urlencoded; charset=UTF-8'
+            },
+            url: `https://api.bankofthecommons.coop/company/v1/wallet/cash_in_token/${id}?`
+        }).then((response) => {
+            dispatch(remove(method, id));
+           // getCashInList(method);