301 lines
11 KiB
JavaScript
301 lines
11 KiB
JavaScript
import React from 'react';
|
|
import {inject, observer} from 'mobx-react';
|
|
import {
|
|
Card,
|
|
CardTitle,
|
|
Divider,
|
|
RaisedButton,
|
|
Table,
|
|
TableBody,
|
|
TableHeader,
|
|
TableHeaderColumn,
|
|
TableRow,
|
|
TableRowColumn,
|
|
TextField,
|
|
Toolbar,
|
|
ToolbarGroup,
|
|
ToolbarSeparator,
|
|
IconButton,
|
|
IconMenu, MenuItem,
|
|
} from 'material-ui';
|
|
import {Table as TableAntd} from 'antd';
|
|
import {startCase} from 'lodash';
|
|
import {Link} from 'react-router-dom';
|
|
import SearchIcon from 'material-ui/svg-icons/action/search';
|
|
import UnarchiveIcon from 'material-ui/svg-icons/content/unarchive';
|
|
import DC from 'decimal.js-light';
|
|
import NumberFormat from 'react-number-format';
|
|
import MoreIcon from 'material-ui/svg-icons/navigation/more-vert';
|
|
import LoadingDialog from "../LoadingDialog";
|
|
import Loader from 'react-loader-advanced';
|
|
import './style.scss';
|
|
import {DIALOG} from "../../stores/global_ui";
|
|
import faker from 'faker';
|
|
import ModalTopupComponent from "./Modal";
|
|
|
|
@inject('appstate')
|
|
@observer
|
|
export default class WalletComponent extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.props = props;
|
|
this.state = {
|
|
value: 1,
|
|
searchText: '',
|
|
slideIndex: 0,
|
|
filteredInfo: null,
|
|
sortedInfo: null,
|
|
modalTopup: false,
|
|
};
|
|
this.defaultState = Object.assign({}, this.state);
|
|
this.http = props.appstate.http;
|
|
this.purchasedItemStore = props.appstate.purchased_items;
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.purchasedItemStore.getAll().then(res => {
|
|
console.log(res, 'ini purchased items')
|
|
})
|
|
// this.globalUI.openLoading();
|
|
// this.transactionStore.getAll().then(res => {
|
|
// this.globalUI.closeLoading();
|
|
// });
|
|
// this.transactionStore.getAmount();
|
|
// this.bankStore.getByUserID('tesss');
|
|
// this.globalUI.closeLoading();
|
|
// this.authStore.getWallet();
|
|
}
|
|
|
|
setModalTopup = (bool) => {
|
|
this.setState({modalTopup: bool});
|
|
};
|
|
|
|
render() {
|
|
const voucher = <NumberFormat value={(500000).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>;
|
|
const points = <NumberFormat value={15000} displayType={'text'} thousandSeparator={true}/>;
|
|
|
|
const data = [
|
|
{
|
|
id: faker.random.uuid(),
|
|
created_at: faker.date.past(),
|
|
type: 'Points',
|
|
amount: faker.commerce.price()
|
|
},
|
|
{
|
|
id: faker.random.uuid(),
|
|
created_at: faker.date.past(),
|
|
type: 'Points',
|
|
amount: faker.commerce.price()
|
|
},
|
|
{
|
|
id: faker.random.uuid(),
|
|
created_at: faker.date.past(),
|
|
type: 'Voucher',
|
|
amount: faker.commerce.price()
|
|
},
|
|
{
|
|
id: faker.random.uuid(),
|
|
created_at: faker.date.past(),
|
|
type: 'Voucher',
|
|
amount: faker.commerce.price()
|
|
},
|
|
{
|
|
id: faker.random.uuid(),
|
|
created_at: faker.date.past(),
|
|
type: 'Points',
|
|
amount: faker.commerce.price()
|
|
},
|
|
];
|
|
|
|
const columns = [{
|
|
title: 'Id',
|
|
dataIndex: 'id',
|
|
key: 'id',
|
|
className: 'recentOrder-noOrder',
|
|
render: (text) => <Link to={`#`} key={text}>{<span>{(text.split("-")[0])}</span>}</Link>,
|
|
},
|
|
{
|
|
title: 'Date',
|
|
dataIndex: 'created_at',
|
|
key: 'created_at',
|
|
className: 'recentOrder-noOrder',
|
|
render: (text) => (
|
|
<div>
|
|
<span>{moment(text).format('MMM DD, YYYY')}</span> <span className='smaller lighter'>{moment(text).format('hh:mm')}</span>
|
|
</div>
|
|
)
|
|
},
|
|
{
|
|
title: 'Type',
|
|
dataIndex: 'type',
|
|
key: 'type',
|
|
className: 'recentOrder-noOrder',
|
|
render: (text) => <span>{text}</span>
|
|
},
|
|
// {
|
|
// title: 'Status',
|
|
// dataIndex: 'status',
|
|
// key: 'status',
|
|
// className: 'recentOrder-status',
|
|
// render: (text) => <div><span>{text === 'created' ? 'Waiting Approval' : startCase(text)}</span></div>
|
|
// },
|
|
{
|
|
title: 'Amount',
|
|
dataIndex: 'amount',
|
|
key: 'amount',
|
|
className: 'recentOrder-customer bolder green',
|
|
render: (text) => {
|
|
return <span>
|
|
<NumberFormat
|
|
value={new DC(text).toNumber()} displayType={'text'}
|
|
thousandSeparator={true}/>
|
|
</span>
|
|
|
|
}
|
|
|
|
}];
|
|
|
|
return (
|
|
<div className="wallet containerMiddle">
|
|
<div className="row">
|
|
<div className="col s12">
|
|
<div style={{marginBottom: '16px'}}>
|
|
<h3 className="headerMenu">Wallet</h3>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="col s6 m6">
|
|
<Card className="cardLite row">
|
|
<CardTitle titleStyle={{color:'#6772e5'}} title={voucher} subtitle="Voucher"/>
|
|
</Card>
|
|
</div>
|
|
<div className="col s6 m6">
|
|
<Card className="cardLite row">
|
|
<CardTitle titleStyle={{color:'#6772e5'}} title={points} subtitle="Points"/>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col s12">
|
|
<Card className="cardLite" style={{paddingBottom: 5}}>
|
|
<Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
|
|
<ToolbarGroup>
|
|
<SearchIcon style={{marginRight: 8, color: "#999"}}/>
|
|
<TextField
|
|
hintText="Search Redeem History"
|
|
style={{fontSize: 14}}
|
|
hintStyle={{fontSize: 14}}
|
|
fullWidth={true}
|
|
underlineShow={false}
|
|
/>
|
|
</ToolbarGroup>
|
|
<ToolbarGroup className="ToolbarGroupLast">
|
|
<ToolbarSeparator/>
|
|
{(window.innerWidth < 600) ?
|
|
<div className="flexSpaceBetween">
|
|
<IconMenu
|
|
iconButtonElement={<IconButton><MoreIcon/></IconButton>}
|
|
anchorOrigin={{horizontal: 'left', vertical: 'top'}}
|
|
targetOrigin={{horizontal: 'left', vertical: 'top'}}
|
|
>
|
|
<MenuItem primaryText="Deposit"
|
|
onClick={() => this.globalUI.showDialog(DIALOG.WALLET.DEPOSIT)}/>
|
|
<MenuItem primaryText="Withdrawal"
|
|
onClick={() => this.globalUI.showDialog(DIALOG.WALLET.WITHDRAW)}/>
|
|
</IconMenu>
|
|
</div>
|
|
:
|
|
<div>
|
|
{/*<RaisedButton*/}
|
|
{/*className=""*/}
|
|
{/*icon={<UnarchiveIcon/>}*/}
|
|
{/*label="Deposit"*/}
|
|
{/*style={{marginRight: 20}}*/}
|
|
{/*onClick={() => this.globalUI.showDialog(DIALOG.WALLET.DEPOSIT)}*/}
|
|
{/*primary={true}/>*/}
|
|
<RaisedButton
|
|
className="ToolbarGroupLastButton"
|
|
icon={<UnarchiveIcon/>}
|
|
label="Top Up"
|
|
onClick={() => this.setModalTopup(true)}
|
|
primary={true}/>
|
|
</div>
|
|
}
|
|
|
|
</ToolbarGroup>
|
|
</Toolbar>
|
|
<Divider/>
|
|
<div>
|
|
<Loader show={false} message={<LoadingDialog/>}
|
|
messageStyle={{textAlign: 'center'}}
|
|
backgroundStyle={{backgroundColor: 'rgba(255,255,255,0.5)'}}>
|
|
<TableAntd
|
|
pagination={true}
|
|
className='table-padded tableWallet'
|
|
dataSource={data}
|
|
// onChange={this.handleChangeSorter}
|
|
columns={columns}
|
|
// onRow={(record) => {`
|
|
// return {
|
|
// onClick: () => {
|
|
// this.props.history.push(`${LINKS.ORDER}/${record.id}`);
|
|
// }, // click row
|
|
// };
|
|
// }}
|
|
/>
|
|
{/*<Table selectable={false}>*/}
|
|
{/*<TableHeader displaySelectAll={false}*/}
|
|
{/*adjustForCheckbox={false}*/}
|
|
{/*enableSelectAll={false}>*/}
|
|
{/*<TableRow style={{height: 38, background: '#f6f9fc'}}>*/}
|
|
{/*<TableHeaderColumn className="TableHeaderColumnAkun"*/}
|
|
{/*style={{height: 'auto',width:'13%'}}>Id</TableHeaderColumn>*/}
|
|
{/*<TableHeaderColumn className="TableHeaderColumnAkun"*/}
|
|
{/*style={{height: 'auto'}}>Date</TableHeaderColumn>*/}
|
|
{/*<TableHeaderColumn className="TableHeaderColumnAkun"*/}
|
|
{/*style={{height: 'auto'}}>Type</TableHeaderColumn>*/}
|
|
{/*<TableHeaderColumn className="TableHeaderColumnAkun"*/}
|
|
{/*style={{height: 'auto'}}>Status</TableHeaderColumn>*/}
|
|
{/*<TableHeaderColumn className="TableHeaderColumnAkun"*/}
|
|
{/*style={{height: 'auto'}}>Amount</TableHeaderColumn>*/}
|
|
{/*</TableRow>*/}
|
|
{/*</TableHeader>*/}
|
|
{/*<TableBody displayRowCheckbox={false}>*/}
|
|
{/*{*/}
|
|
{/*(this.transactionStore.isSearching ? this.transactionStore.transactionListFiltered : this.transactionStore.list).map((item, index) => {*/}
|
|
|
|
{/*return (*/}
|
|
{/*<TableRow key={index}>*/}
|
|
{/*<TableRowColumn style={{width:'13%'}}>*/}
|
|
{/*{item.id.split('-')[0]}*/}
|
|
{/*</TableRowColumn>*/}
|
|
{/*<TableRowColumn>{moment(item.created_at).format('MMMM Do YYYY, hh:mm:ss')}</TableRowColumn>*/}
|
|
{/*<TableRowColumn>{item.type.name}</TableRowColumn>*/}
|
|
{/*<TableRowColumn>{item.status === 'created' ? 'Waiting Approved' : item.status}</TableRowColumn>*/}
|
|
{/*<TableRowColumn><NumberFormat value={item.amount} displayType={'text'}*/}
|
|
{/*thousandSeparator={true}*/}
|
|
{/*prefix={'IDR '}/></TableRowColumn>*/}
|
|
{/*</TableRow>*/}
|
|
{/*);*/}
|
|
{/*})*/}
|
|
{/*}*/}
|
|
{/*{*/}
|
|
{/*(this.transactionStore.list.length === 0) ?*/}
|
|
{/*<TableRow>*/}
|
|
{/*<TableRowColumn>*/}
|
|
{/*<EmptyComponent type="empty" header="" content="There is no data in sight"/>*/}
|
|
{/*</TableRowColumn>*/}
|
|
{/*</TableRow> : ""*/}
|
|
{/*}*/}
|
|
{/*</TableBody>*/}
|
|
{/*</Table>*/}
|
|
</Loader>
|
|
</div>
|
|
</Card></div>
|
|
</div>
|
|
<ModalTopupComponent onOk={() => this.setModalTopup(false)} onCancel={() => this.setModalTopup(false)} isVisible={this.state.modalTopup} />
|
|
</div>
|
|
)
|
|
}
|
|
}
|