Ahmad.zuhdi.y/bukopin-redemption-client-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

new page

Browse Source
This commit is contained in:
enggar_ganteng 2019-01-30 21:30:20 +07:00
parent 135beb5238
commit 5023788030
1 changed files with 122 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

170
src/common/pages/Dashboard/index.js
View File

@ -1,17 +1,17 @@
import React from "react"; import React from "react";
import {inject, observer} from "mobx-react"; import { inject, observer } from "mobx-react";
import compose from 'recompose/compose'; import compose from 'recompose/compose';
import withStyles from "@material-ui/core/styles/withStyles"; import withStyles from "@material-ui/core/styles/withStyles";
import withWidth, {isWidthUp} from '@material-ui/core/withWidth'; import withWidth, { isWidthUp } from '@material-ui/core/withWidth';
import QueueAnim from 'rc-queue-anim'; import QueueAnim from 'rc-queue-anim';
import "./style.scss"; import "./style.scss";
import NumberFormat from 'react-number-format'; import NumberFormat from 'react-number-format';
import {LINKS} from './../../routes' import { LINKS } from './../../routes'
import {Link} from 'react-router-dom'; import { Link } from 'react-router-dom';
import CardAdmin from './CardAdmin'; import CardAdmin from './CardAdmin';
import CardAgent from './CardAgent'; import CardAgent from './CardAgent';
import moment from 'moment'; import moment from 'moment';
import {Icon, Button, notification, Table, Tooltip as TooltipAntd, Col, Row,} from 'antd'; import { Icon, Button, notification, Table, Tooltip as TooltipAntd, Col, Row, } from 'antd';
import DC from 'decimal.js-light'; import DC from 'decimal.js-light';
import { import {
Paper, Paper,
@ -27,29 +27,29 @@ import {
Divider, ListItem, List Divider, ListItem, List
} from 'material-ui'; } from 'material-ui';
import Grid from '@material-ui/core/Grid'; import Grid from '@material-ui/core/Grid';
import {default as MuiCard} from '@material-ui/core/Card' import { default as MuiCard } from '@material-ui/core/Card'
import {default as MuiCardContent} from '@material-ui/core/CardContent'; import { default as MuiCardContent } from '@material-ui/core/CardContent';
import {default as MuiCardMedia} from '@material-ui/core/CardMedia'; import { default as MuiCardMedia } from '@material-ui/core/CardMedia';
import {default as MuiCardActions} from '@material-ui/core/CardActions'; import { default as MuiCardActions } from '@material-ui/core/CardActions';
import {default as MuiCardActionArea} from '@material-ui/core/CardActionArea'; import { default as MuiCardActionArea } from '@material-ui/core/CardActionArea';
import {default as MuiCardButton} from '@material-ui/core/Button'; import { default as MuiCardButton } from '@material-ui/core/Button';
import {default as MuiGridList} from '@material-ui/core/GridList'; import { default as MuiGridList } from '@material-ui/core/GridList';
import {default as MuiGridListTile} from '@material-ui/core/GridListTile'; import { default as MuiGridListTile } from '@material-ui/core/GridListTile';
import {default as MuiButton} from '@material-ui/core/Button'; import { default as MuiButton } from '@material-ui/core/Button';
import {default as MuiDivider} from '@material-ui/core/Divider'; import { default as MuiDivider } from '@material-ui/core/Divider';
import Hidden from '@material-ui/core/Hidden'; import Hidden from '@material-ui/core/Hidden';
import Chip from '@material-ui/core/Chip'; import Chip from '@material-ui/core/Chip';
import {default as MuiGridListTileBar} from '@material-ui/core/GridListTileBar'; import { default as MuiGridListTileBar } from '@material-ui/core/GridListTileBar';
import ListSubheader from '@material-ui/core/ListSubheader'; import ListSubheader from '@material-ui/core/ListSubheader';
import IconButton from '@material-ui/core/IconButton'; import IconButton from '@material-ui/core/IconButton';
import InfoIcon from '@material-ui/icons/Info'; import InfoIcon from '@material-ui/icons/Info';
import EmptyComponent from '../EmptyComponent'; import EmptyComponent from '../EmptyComponent';
import * as _ from 'lodash'; import * as _ from 'lodash';
import {grey400, darkBlack, lightBlack, black} from 'material-ui/styles/colors'; import { grey400, darkBlack, lightBlack, black } from 'material-ui/styles/colors';
import './style.scss'; import './style.scss';
import {Carousel} from 'react-responsive-carousel' import { Carousel } from 'react-responsive-carousel'
import {ActionGrade, ContentDrafts, ContentInbox, ContentSend} from "material-ui/svg-icons/index"; import { ActionGrade, ContentDrafts, ContentInbox, ContentSend } from "material-ui/svg-icons/index";
import {constant} from "../../config/const"; import { constant } from "../../config/const";
import Slider from "react-slick"; import Slider from "react-slick";
import 'slick-carousel/slick/slick.css'; import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css'; import 'slick-carousel/slick/slick-theme.css';
@ -59,14 +59,14 @@ import slider2 from '../../../../assets/images/slider/2.jpg';
import slider3 from '../../../../assets/images/slider/3.jpg'; import slider3 from '../../../../assets/images/slider/3.jpg';
import slider4 from '../../../../assets/images/slider/4.jpg'; import slider4 from '../../../../assets/images/slider/4.jpg';
import slider5 from '../../../../assets/images/slider/5.jpg'; import slider5 from '../../../../assets/images/slider/5.jpg';
import {ItemCard} from "../Vouchers/ItemCard"; import { ItemCard } from "../Vouchers/ItemCard";
import ModalVouchersComponent from "../Vouchers/Modal"; import ModalVouchersComponent from "../Vouchers/Modal";
import PopularItemCardComponent from "./PopularItemCard"; import PopularItemCardComponent from "./PopularItemCard";
import NewItemCardComponent from "./NewItemCard"; import NewItemCardComponent from "./NewItemCard";
import '../Vouchers/style.scss'; import '../Vouchers/style.scss';
import ModalTopupComponent from "../Wallet/Modal"; import ModalTopupComponent from "../Wallet/Modal";
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
import {styles} from "../RegisterNew/styles"; import { styles } from "../RegisterNew/styles";
import get from "lodash.get"; import get from "lodash.get";
const { const {
@ -123,11 +123,11 @@ class DashboardComponent extends React.Component {
} }
setModalTopup = (bool) => { setModalTopup = (bool) => {
this.setState({modalTopup: bool}); this.setState({ modalTopup: bool });
}; };
render() { render() {
const {classes} = this.props; const { classes } = this.props;
const getGridListCols = () => { const getGridListCols = () => {
if (isWidthUp('lg', this.props.width)) { if (isWidthUp('lg', this.props.width)) {
return 4; return 4;
@ -161,24 +161,24 @@ class DashboardComponent extends React.Component {
justify="center" justify="center"
alignItems="center" alignItems="center"
spacing={24} spacing={24}
style={{marginTop: 0}}> style={{ marginTop: 0 }}>
<Grid item xs={12} sm={12} md={12} lg={12}> <Grid item xs={12} sm={12} md={12} lg={12}>
<Slider {...settings}> <Slider {...settings}>
<div> <div>
<img src={slider1} width={'100%'}/> <img src={slider1} width={'100%'} />
</div> </div>
<div> <div>
<img src={slider2} width={'100%'}/> <img src={slider2} width={'100%'} />
</div> </div>
<div> <div>
<img src={slider3} width={'100%'}/> <img src={slider3} width={'100%'} />
</div> </div>
<div> <div>
<img src={slider4} width={'100%'}/> <img src={slider4} width={'100%'} />
</div> </div>
<div> <div>
<img src={slider5} width={'100%'}/> <img src={slider5} width={'100%'} />
</div> </div>
</Slider> </Slider>
</Grid> </Grid>
@ -189,7 +189,7 @@ class DashboardComponent extends React.Component {
justify="center" justify="center"
alignItems="center" alignItems="center"
spacing={24} spacing={24}
style={{marginTop: 30}}> style={{ marginTop: 30 }}>
<Grid item xs={10} sm={3} md={3} lg={3}> <Grid item xs={10} sm={3} md={3} lg={3}>
{this.props.appstate.wallet.data.wallet ? ( {this.props.appstate.wallet.data.wallet ? (
@ -199,7 +199,7 @@ class DashboardComponent extends React.Component {
Voucher Voucher
</Typography> </Typography>
<Typography component="p"> <Typography component="p">
<NumberFormat value={(0).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/> <NumberFormat value={(0).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '} />
</Typography> </Typography>
</MuiCardContent> </MuiCardContent>
<MuiCardActions> <MuiCardActions>
@ -252,9 +252,9 @@ class DashboardComponent extends React.Component {
justify="center" justify="center"
alignItems="center" alignItems="center"
spacing={24} spacing={24}
style={{marginTop: 30}}> style={{ marginTop: 30 }}>
<Grid item xs={10} sm={10} md={9} lg={9}> {/* <Grid item xs={10} sm={10} md={9} lg={9}>
<Typography variant="h6" gutterBottom> <Typography variant="h6" gutterBottom>
Voucher & Gift Card Voucher & Gift Card
</Typography> </Typography>
@ -280,11 +280,16 @@ class DashboardComponent extends React.Component {
component="img" component="img"
alt={item.name} alt={item.name}
className={classes.media} className={classes.media}
height="130" height="120"
style={{
marginLeft: 'auto',
marginRight: 'auto',
width: 180
}}
image={image} image={image}
title={item.name} title={item.name}
/> />
<MuiDivider light/> <MuiDivider light />
<MuiCardContent> <MuiCardContent>
<Typography noWrap={true} variant="subtitle1"> <Typography noWrap={true} variant="subtitle1">
{item.name} {item.name}
@ -301,7 +306,7 @@ class DashboardComponent extends React.Component {
fullWidth fullWidth
variant="outlined" variant="outlined"
color="primary" color="primary"
onClick={() => this.setState({isOpened: true, data: item})} onClick={() => this.setState({ isOpened: true, data: item })}
size="small"> size="small">
Redeem Redeem
</MuiButton> </MuiButton>
@ -309,25 +314,94 @@ class DashboardComponent extends React.Component {
</MuiCard> </MuiCard>
</MuiGridListTile> </MuiGridListTile>
) )
}) : (<EmptyComponent type="default4" header="" content="There is no voucher in sight"/>) }) : (<EmptyComponent type="default4" header="" content="There is no voucher in sight" />)
} }
</MuiGridList> </MuiGridList>
</Grid> */}
<Grid item xs={10} sm={10} md={9} lg={9}>
<Typography variant="h6" gutterBottom>
Voucher & Gift Card
</Typography>
<Grid container spacing={24}
justify="center"
alignItems="center"
style={{ marginTop: 15 }}>
{(this.vouchersStore.list.length > 0) ?
this.vouchersStore.list.map((item, index) => {
let image = get(item, 'images.logo', '');
if (!image.includes('http')) {
image = this.http.appendImagePath(image);
}
return (
<Grid item xs={12} sm={6} md={4} lg={3}>
<MuiCard className={classes.card}>
<div style={{display:'flex',alignItems:'center',justifyContent:'center'}}>
<MuiCardMedia
component="img"
alt={item.name}
className={classes.media}
height="120"
style={{
marginLeft: 'auto',
marginRight: 'auto',
marginTop:10,
marginBottom:10,
width: 180,
objectFit:'contain'
}}
image={image}
title={item.name}
/>
</div>
<MuiDivider light />
<MuiCardContent>
<Typography noWrap={true} variant="subtitle1">
{item.name}
</Typography>
<Typography className={classes.pos} color="textSecondary">
Ind
</Typography>
<Typography variant="subtitle2">
From: 100 Point
</Typography>
</MuiCardContent>
<MuiCardActions>
<MuiButton
fullWidth
variant="outlined"
color="primary"
onClick={() => this.setState({ isOpened: true, data: item })}
size="small">
Redeem
</MuiButton>
</MuiCardActions>
</MuiCard>
</Grid>
)
}) : (<EmptyComponent type="default4" header="" content="There is no voucher in sight" />)
}
</Grid> </Grid>
</Grid>
</Grid> </Grid>
</Grid> </Grid>
{this.state.isOpened && ( {this.state.isOpened && (
<ModalVouchersComponent <ModalVouchersComponent
title={this.state.data.name+' Vouchers'} title={this.state.data.name + ' Vouchers'}
data={this.state.data} data={this.state.data}
isVisible={this.state.isOpened} isVisible={this.state.isOpened}
onOk={() => this.setState({isOpened: false})} onOk={() => this.setState({ isOpened: false })}
onCancel={() => this.setState({isOpened: false})} onCancel={() => this.setState({ isOpened: false })}
/> />
)} )}
<ModalTopupComponent onOk={() => this.setModalTopup(false)} onCancel={() => this.setModalTopup(false)} isVisible={this.state.modalTopup}/> <ModalTopupComponent onOk={() => this.setModalTopup(false)} onCancel={() => this.setModalTopup(false)} isVisible={this.state.modalTopup} />
</Grid> </Grid>
); );
} }
} }
export default compose(withStyles(styles), withWidth(),)(DashboardComponent); export default compose(withStyles(styles), withWidth())(DashboardComponent);