Commit 45843de4 authored by Simic Veljko's avatar Simic Veljko
Browse files

Init BankTransfer cash out method

parent f0ebb8e5
......@@ -7970,6 +7970,11 @@
"resolved": "https://registry.npmjs.org/just-curry-it/-/just-curry-it-3.1.0.tgz",
"integrity": "sha512-mjzgSOFzlrurlURaHVjnQodyPNvrHrf1TbQP2XU9NSqBtHQPuHZ+Eb6TAJP7ASeJN9h9K0KXoRTs8u6ouHBKvg=="
},
"keycode": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
"integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ="
},
"killable": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
......@@ -10677,6 +10682,86 @@
"workbox-webpack-plugin": "4.2.0"
}
},
"react-swipeable-views": {
"version": "0.13.3",
"resolved": "https://registry.npmjs.org/react-swipeable-views/-/react-swipeable-views-0.13.3.tgz",
"integrity": "sha512-LBHRA5ZouipmoLLwi0cqB8qc7NHLskbXmT1I+ZztC9JfmgKrfichw5R+7q4igQ+5VbaP6jL1vn8BtHW96WYNFQ==",
"requires": {
"@babel/runtime": "7.0.0",
"dom-helpers": "^3.2.1",
"prop-types": "^15.5.4",
"react-swipeable-views-core": "^0.13.1",
"react-swipeable-views-utils": "^0.13.3",
"warning": "^4.0.1"
},
"dependencies": {
"@babel/runtime": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0.tgz",
"integrity": "sha512-7hGhzlcmg01CvH1EHdSPVXYX1aJ8KCEyz6I9xYIi/asDtzBPMyMhVibhM/K6g/5qnKBwjZtp10bNZIEFTRW1MA==",
"requires": {
"regenerator-runtime": "^0.12.0"
}
},
"regenerator-runtime": {
"version": "0.12.1",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
"integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
}
}
},
"react-swipeable-views-core": {
"version": "0.13.1",
"resolved": "https://registry.npmjs.org/react-swipeable-views-core/-/react-swipeable-views-core-0.13.1.tgz",
"integrity": "sha512-EP8sCvvD7VDiZLglPt9icMuMNu8qLRLk0ab/fB1HXv7lX8ClnwF3UMCM0ZrN3sguSY7CsX3LevducGGsT1VcDg==",
"requires": {
"@babel/runtime": "7.0.0",
"warning": "^4.0.1"
},
"dependencies": {
"@babel/runtime": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0.tgz",
"integrity": "sha512-7hGhzlcmg01CvH1EHdSPVXYX1aJ8KCEyz6I9xYIi/asDtzBPMyMhVibhM/K6g/5qnKBwjZtp10bNZIEFTRW1MA==",
"requires": {
"regenerator-runtime": "^0.12.0"
}
},
"regenerator-runtime": {
"version": "0.12.1",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
"integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
}
}
},
"react-swipeable-views-utils": {
"version": "0.13.3",
"resolved": "https://registry.npmjs.org/react-swipeable-views-utils/-/react-swipeable-views-utils-0.13.3.tgz",
"integrity": "sha512-CZkJwiNQPISkyTsPMUPiJgwJBrUVd7NC3WSUvx30uwvPb0Sy2w2+tpU51qeYc6YwIhex0s5Eu5YPjK3PDBh+gA==",
"requires": {
"@babel/runtime": "7.0.0",
"fbjs": "^0.8.4",
"keycode": "^2.1.7",
"prop-types": "^15.6.0",
"react-event-listener": "^0.6.0",
"react-swipeable-views-core": "^0.13.1"
},
"dependencies": {
"@babel/runtime": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0.tgz",
"integrity": "sha512-7hGhzlcmg01CvH1EHdSPVXYX1aJ8KCEyz6I9xYIi/asDtzBPMyMhVibhM/K6g/5qnKBwjZtp10bNZIEFTRW1MA==",
"requires": {
"regenerator-runtime": "^0.12.0"
}
},
"regenerator-runtime": {
"version": "0.12.1",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
"integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
}
}
},
"react-table": {
"version": "6.10.0",
"resolved": "https://registry.npmjs.org/react-table/-/react-table-6.10.0.tgz",
......
......@@ -304,7 +304,7 @@ class Wizard extends React.Component {
{this.props.nextButtonText}
</Button>
) : null}
{this.state.finishButton ? (
{this.state.finishButton && this.props.finishButton ? (
<Button
color="rose"
className={this.finishButtonClasses}
......
import React, { Component } from 'react';
class Sepa extends Component {
render(){
return (
<div>
Sepa
</div>
)
}
}
export default Sepa;
import React, { Component } from 'react'
import TextField from '@material-ui/core/TextField';
import styles from './styles';
class SepaForm extends Component {
constructor(props){
super(props);
}
render(){
const {swift, iban, beneficiary} = this.props
return (
<div style={styles.sepaForm}>
<div>
<TextField
label="Beneficiary Name"
value={beneficiary}
onChange={(event) => {this.props.handleChangeState('beneficiary', event.target.value)}}
required
/>
</div>
<div>
<TextField
label="Iban"
value={iban}
onChange={(event) => {this.props.handleChangeState('iban', event.target.value)}}
required
/>
</div>
<div>
<TextField
label="SWIFT/BIC"
value={swift}
onChange={(event) => {this.props.handleChangeState('swift', event.target.value)}}
required
/>
</div>
</div>
)
}
}
export default SepaForm;
import React, { Component } from 'react'
import TextField from '@material-ui/core/TextField';
import styles from './styles';
class SwiftForm extends Component {
constructor(props){
super(props);
}
render(){
const {swift, name, address, city, country, bank_name, bank_city, account} = this.props
return (
<div style={styles.swiftForm}>
<div style={styles.beneficiary}>
<h4 style={{textAlign: 'left'}}>Beneficiary Name</h4>
<div>
<TextField
label="Beneficiary Name"
value={name}
onChange={(event) => {this.props.handleChangeState('name', event.target.value)}}
required
/>
</div>
<div>
<TextField
label="Address"
value={address}
onChange={(event) => {this.props.handleChangeState('address', event.target.value)}}
required
/>
</div>
<div>
<TextField
label="City"
value={city}
onChange={(event) => {this.props.handleChangeState('city', event.target.value)}}
required
/>
</div>
<div>
<TextField
label="Country"
value={country}
onChange={(event) => {this.props.handleChangeState('country', event.target.value)}}
required
/>
</div>
</div>
<div style={styles.bank}>
<h4 style={{textAlign: 'left'}}>Bank Info</h4>
<div>
<TextField
label="Bank Name"
value={bank_name}
onChange={(event) => {this.props.handleChangeState('bank_name', event.target.value)}}
required
/>
</div>
<div>
<TextField
label="City Bank"
value={bank_city}
onChange={(event) => {this.props.handleChangeState('bank_city', event.target.value)}}
required
/>
</div>
<div>
<TextField
label="Account"
value={account}
onChange={(event) => {this.props.handleChangeState('account', event.target.value)}}
required
/>
</div>
<div>
<TextField
label="Swift"
value={swift}
onChange={(event) => {this.props.handleChangeState('swift', event.target.value)}}
required
/>
</div>
</div>
</div>
)
}
}
export default SwiftForm
import React, { Component } from 'react';
import NavPills from "components/atoms/NavPills/NavPills.jsx";
import SepaForm from './SepaForm';
import SwiftForm from './SwiftForm';
import TextField from '@material-ui/core/TextField';
import { connect } from 'react-redux'
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';
import Big from 'big.js';
import Button from "components/atoms/CustomButtons/Button.jsx";
class Sepa extends Component {
constructor(props) {
super(props);
this.state = {
amount: 0,
concept: '',
type: 'sepa',
data: {
beneficiary: '',
iban: '',
swift: ''
}
}
this.handleSubmit = () => {
let { type, amount, concept, data } = this.state;
const { company_id } = this.props
amount *= 100;
console.log(`[debug] Bank Transfer cash out method send: type: ${type}, data: ${JSON.stringify({amount, concept, ...data, company_id})} `)
}
this.handleSepaFormChange = (arg, value) => {
let { type, data } = this.state;
if(type === "swift"){
data = {
beneficiary: "",
iban: "",
bic_swift: ""
}
data[arg] = value
this.setState({...this.state, data: data, type: 'sepa'})
}
if(type === "sepa"){
data[arg] = value;
this.setState({...this.state, data: data})
}
}
this.handleSwiftFormChange= (arg, value) => {
let { type, data } = this.state;
if(type === "swift"){
data[arg] = value;
this.setState({...this.state, data: data})
}
if(type === "sepa"){
data = {
beneficiary: '',
address: '',
city: '',
country: '',
bank_name: '',
bank_city: '',
account: '',
swift: '',
}
data[arg] = value;
this.setState({...this.state, data: data, type: 'swift'})
}
}
}
render(){
const { fee, currency, cash_out_error, cash_out_status, valute } = this.props;
const { amount, concept } = this.state
let FeeComponent = ''
let CurrencyComponent = '';
if (fee) {
FeeComponent = (<div>
<div style={{display: 'flex', flexDirection: 'column'}}>
<div style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between'}}>
<h4>Valute</h4>
<Select
value={valute}
onChange={event => this.props.handleChangeValute(event.target.value)}
inputProps={{
name: 'valute'
}}
>
<MenuItem value='eur'>Eur</MenuItem>
<MenuItem value='usd'>Usd</MenuItem>
</Select>
</div>
</div>
<div style={{display: 'flex', flexDirection: 'column'}}>
<div>
<b>Fee</b>
</div>
<div>
fixed: {fee.fixed/Math.pow(10, fee.scale)}
</div>
<div>
variable: {fee.variable} %
</div>
</div>
</div>
)
}
if (currency) {
CurrencyComponent = (<div>
<b>Available</b>: {currency.available/Math.pow(10, currency.scale)} {valute}
<div>
<Button
color="success"
size="sm"
onClick={() => { this.setState({amount: new Big(currency.available/Math.pow(10, currency.scale)).minus(fee ? fee.fixed/Math.pow(10, fee.scale)+fee.variable*currency.available:0)})}}
>
Send all my {valute}
</Button>
</div>
</div>)
}
return (
<div>
<div style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-end'}}>
<div>
{FeeComponent}
{CurrencyComponent}
</div>
<div style={{display: 'flex', flexDirection: 'column', textAlign: 'right'}}>
<div>
<TextField
label="Amount"
value={amount}
onChange={(event) => {this.setState({amount: event.target.value})}}
type="number"
required
/>
</div>
<div>
<TextField
label="Concept"
value={concept}
onChange={(event) => {this.setState({concept: event.target.value})}}
required
/>
</div>
</div>
</div>
<NavPills
color="success"
horizontal={{
tabsGrid: { xs: 12, sm: 12, md: 4 },
contentGrid: { xs: 12, sm: 12, md: 8 }
}}
tabs={[
{
tabButton: "Sepa",
tabContent: <SepaForm handleChangeState={(arg, value) => this.handleSepaFormChange(arg, value)}/>
},
{
tabButton: "Swift",
tabContent: <SwiftForm handleChangeState={(arg, value) => this.handleSwiftFormChange(arg, value)}/>
}
]}
/>
<div style={{display: 'flex', justifyContent: 'flex-end', padding: '15px'}}>
<Button
color="success"
size="sm"
onClick={() => {
console.log(`[debug] state: ${JSON.stringify(this.state)}`)
}}
>
Send
</Button>
</div>
</div>
)
}
}
const mapStateToProps = (state, ownProps) => {
const { valute } = ownProps;
return {
fee: state.wallet_actions.fees.find(f => f.service_name === 'transfer-out'),
currency: state.wallet.data.find(c => c.currency.toUpperCase() === valute.toUpperCase()),
cash_out_status: state.wallet_actions.cash_out.find(c => c.cname === 'spark').send.status,
cash_out_error: state.wallet_actions.cash_out.find(c => c.cname === 'spark').send.error,
company_id: state.user.data.group_data.id
}
}
export default connect(mapStateToProps, {})(Sepa);
const styles = {
sepaForm: {
display: 'flex',
flexDirection: 'column',
textAlign: 'right',
paddingRight: '5px'
},
swiftForm: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between'
},
bank: {
display: 'flex',
flexDirection: 'column',
textAlign: 'right',
paddingRight: '5px'
},
beneficiary: {
display: 'flex',
flexDirection: 'column',
textAlign: 'right',
paddingRight: '5px'
}
};
export default styles;
......@@ -3,12 +3,33 @@ import Coin from './Coin';
import Sepa from './Sepa';
import Spark from './Spark';
class SepaWrapper extends Component {
constructor(props){
super(props);
this.state = {
valute: 'eur'
}
this.handleChangeValute = (valute) => {
this.setState({valute: valute})
}
}
render(){
return (
<Sepa
valute={this.state.valute}
handleChangeValute={this.handleChangeValute}
{...this.props}
/>
)
}
}
class CashOutMethod extends Component {
render() {
const { method } = this.props;
let res = (<Coin {...this.props} />)
if(method.cname === 'sepa'){
res = <Sepa {...this.props} />
res = <SepaWrapper {...this.props} />
}
if(method.cname === 'spark'){
res = <Spark {...this.props} />
......
......@@ -47,7 +47,6 @@ export const fetchApi = (args)=>{
}
return axios(newargs)
.then(response => {
console.log(`[response] ${JSON.stringify(response)}`);
return response.data;
}).catch(error => {
if(error.response.status === 401 && isLoggedIn()){
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment