new page
This commit is contained in:
parent
135beb5238
commit
5023788030
|
|
@ -1,17 +1,17 @@
|
|||
import React from "react";
|
||||
import {inject, observer} from "mobx-react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import compose from 'recompose/compose';
|
||||
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 "./style.scss";
|
||||
import NumberFormat from 'react-number-format';
|
||||
import {LINKS} from './../../routes'
|
||||
import {Link} from 'react-router-dom';
|
||||
import { LINKS } from './../../routes'
|
||||
import { Link } from 'react-router-dom';
|
||||
import CardAdmin from './CardAdmin';
|
||||
import CardAgent from './CardAgent';
|
||||
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 {
|
||||
Paper,
|
||||
|
|
@ -27,29 +27,29 @@ import {
|
|||
Divider, ListItem, List
|
||||
} from 'material-ui';
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
import {default as MuiCard} from '@material-ui/core/Card'
|
||||
import {default as MuiCardContent} from '@material-ui/core/CardContent';
|
||||
import {default as MuiCardMedia} from '@material-ui/core/CardMedia';
|
||||
import {default as MuiCardActions} from '@material-ui/core/CardActions';
|
||||
import {default as MuiCardActionArea} from '@material-ui/core/CardActionArea';
|
||||
import {default as MuiCardButton} from '@material-ui/core/Button';
|
||||
import {default as MuiGridList} from '@material-ui/core/GridList';
|
||||
import {default as MuiGridListTile} from '@material-ui/core/GridListTile';
|
||||
import {default as MuiButton} from '@material-ui/core/Button';
|
||||
import {default as MuiDivider} from '@material-ui/core/Divider';
|
||||
import { default as MuiCard } from '@material-ui/core/Card'
|
||||
import { default as MuiCardContent } from '@material-ui/core/CardContent';
|
||||
import { default as MuiCardMedia } from '@material-ui/core/CardMedia';
|
||||
import { default as MuiCardActions } from '@material-ui/core/CardActions';
|
||||
import { default as MuiCardActionArea } from '@material-ui/core/CardActionArea';
|
||||
import { default as MuiCardButton } from '@material-ui/core/Button';
|
||||
import { default as MuiGridList } from '@material-ui/core/GridList';
|
||||
import { default as MuiGridListTile } from '@material-ui/core/GridListTile';
|
||||
import { default as MuiButton } from '@material-ui/core/Button';
|
||||
import { default as MuiDivider } from '@material-ui/core/Divider';
|
||||
import Hidden from '@material-ui/core/Hidden';
|
||||
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 IconButton from '@material-ui/core/IconButton';
|
||||
import InfoIcon from '@material-ui/icons/Info';
|
||||
import EmptyComponent from '../EmptyComponent';
|
||||
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 {Carousel} from 'react-responsive-carousel'
|
||||
import {ActionGrade, ContentDrafts, ContentInbox, ContentSend} from "material-ui/svg-icons/index";
|
||||
import {constant} from "../../config/const";
|
||||
import { Carousel } from 'react-responsive-carousel'
|
||||
import { ActionGrade, ContentDrafts, ContentInbox, ContentSend } from "material-ui/svg-icons/index";
|
||||
import { constant } from "../../config/const";
|
||||
import Slider from "react-slick";
|
||||
import 'slick-carousel/slick/slick.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 slider4 from '../../../../assets/images/slider/4.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 PopularItemCardComponent from "./PopularItemCard";
|
||||
import NewItemCardComponent from "./NewItemCard";
|
||||
import '../Vouchers/style.scss';
|
||||
import ModalTopupComponent from "../Wallet/Modal";
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import {styles} from "../RegisterNew/styles";
|
||||
import { styles } from "../RegisterNew/styles";
|
||||
import get from "lodash.get";
|
||||
|
||||
const {
|
||||
|
|
@ -123,11 +123,11 @@ class DashboardComponent extends React.Component {
|
|||
}
|
||||
|
||||
setModalTopup = (bool) => {
|
||||
this.setState({modalTopup: bool});
|
||||
this.setState({ modalTopup: bool });
|
||||
};
|
||||
|
||||
render() {
|
||||
const {classes} = this.props;
|
||||
const { classes } = this.props;
|
||||
const getGridListCols = () => {
|
||||
if (isWidthUp('lg', this.props.width)) {
|
||||
return 4;
|
||||
|
|
@ -161,24 +161,24 @@ class DashboardComponent extends React.Component {
|
|||
justify="center"
|
||||
alignItems="center"
|
||||
spacing={24}
|
||||
style={{marginTop: 0}}>
|
||||
style={{ marginTop: 0 }}>
|
||||
|
||||
<Grid item xs={12} sm={12} md={12} lg={12}>
|
||||
<Slider {...settings}>
|
||||
<div>
|
||||
<img src={slider1} width={'100%'}/>
|
||||
<img src={slider1} width={'100%'} />
|
||||
</div>
|
||||
<div>
|
||||
<img src={slider2} width={'100%'}/>
|
||||
<img src={slider2} width={'100%'} />
|
||||
</div>
|
||||
<div>
|
||||
<img src={slider3} width={'100%'}/>
|
||||
<img src={slider3} width={'100%'} />
|
||||
</div>
|
||||
<div>
|
||||
<img src={slider4} width={'100%'}/>
|
||||
<img src={slider4} width={'100%'} />
|
||||
</div>
|
||||
<div>
|
||||
<img src={slider5} width={'100%'}/>
|
||||
<img src={slider5} width={'100%'} />
|
||||
</div>
|
||||
</Slider>
|
||||
</Grid>
|
||||
|
|
@ -189,7 +189,7 @@ class DashboardComponent extends React.Component {
|
|||
justify="center"
|
||||
alignItems="center"
|
||||
spacing={24}
|
||||
style={{marginTop: 30}}>
|
||||
style={{ marginTop: 30 }}>
|
||||
|
||||
<Grid item xs={10} sm={3} md={3} lg={3}>
|
||||
{this.props.appstate.wallet.data.wallet ? (
|
||||
|
|
@ -199,7 +199,7 @@ class DashboardComponent extends React.Component {
|
|||
Voucher
|
||||
</Typography>
|
||||
<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>
|
||||
</MuiCardContent>
|
||||
<MuiCardActions>
|
||||
|
|
@ -252,9 +252,9 @@ class DashboardComponent extends React.Component {
|
|||
justify="center"
|
||||
alignItems="center"
|
||||
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>
|
||||
Voucher & Gift Card
|
||||
</Typography>
|
||||
|
|
@ -280,11 +280,16 @@ class DashboardComponent extends React.Component {
|
|||
component="img"
|
||||
alt={item.name}
|
||||
className={classes.media}
|
||||
height="130"
|
||||
height="120"
|
||||
style={{
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
width: 180
|
||||
}}
|
||||
image={image}
|
||||
title={item.name}
|
||||
/>
|
||||
<MuiDivider light/>
|
||||
<MuiDivider light />
|
||||
<MuiCardContent>
|
||||
<Typography noWrap={true} variant="subtitle1">
|
||||
{item.name}
|
||||
|
|
@ -301,7 +306,7 @@ class DashboardComponent extends React.Component {
|
|||
fullWidth
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
onClick={() => this.setState({isOpened: true, data: item})}
|
||||
onClick={() => this.setState({ isOpened: true, data: item })}
|
||||
size="small">
|
||||
Redeem
|
||||
</MuiButton>
|
||||
|
|
@ -309,25 +314,94 @@ class DashboardComponent extends React.Component {
|
|||
</MuiCard>
|
||||
</MuiGridListTile>
|
||||
)
|
||||
}) : (<EmptyComponent type="default4" header="" content="There is no voucher in sight"/>)
|
||||
}) : (<EmptyComponent type="default4" header="" content="There is no voucher in sight" />)
|
||||
}
|
||||
</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>
|
||||
{this.state.isOpened && (
|
||||
<ModalVouchersComponent
|
||||
title={this.state.data.name+' Vouchers'}
|
||||
title={this.state.data.name + ' Vouchers'}
|
||||
data={this.state.data}
|
||||
isVisible={this.state.isOpened}
|
||||
onOk={() => this.setState({isOpened: false})}
|
||||
onCancel={() => this.setState({isOpened: false})}
|
||||
onOk={() => 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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default compose(withStyles(styles), withWidth(),)(DashboardComponent);
|
||||
export default compose(withStyles(styles), withWidth())(DashboardComponent);
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user