409 lines
14 KiB
JavaScript
409 lines
14 KiB
JavaScript
import React from "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 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 CardAdmin from './CardAdmin';
|
|
import CardAgent from './CardAgent';
|
|
import moment from 'moment';
|
|
import { Icon, Button, notification, Table, Tooltip as TooltipAntd, Col, Row, } from 'antd';
|
|
import DC from 'decimal.js-light';
|
|
import {
|
|
Paper,
|
|
Card,
|
|
CardActions,
|
|
CardHeader,
|
|
CardMedia,
|
|
CardTitle,
|
|
CardText,
|
|
FlatButton,
|
|
GridList,
|
|
GridTile,
|
|
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 Hidden from '@material-ui/core/Hidden';
|
|
import Chip from '@material-ui/core/Chip';
|
|
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 './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 Slider from "react-slick";
|
|
import 'slick-carousel/slick/slick.css';
|
|
import 'slick-carousel/slick/slick-theme.css';
|
|
import VoucherComponent from '../Vouchers/index';
|
|
import slider1 from '../../../../assets/images/slider/1.jpg';
|
|
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 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 get from "lodash.get";
|
|
|
|
const {
|
|
LineChart,
|
|
AreaChart,
|
|
BarChart,
|
|
Bar,
|
|
Line,
|
|
XAxis,
|
|
YAxis,
|
|
ReferenceLine,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
Legend,
|
|
Area,
|
|
ResponsiveContainer
|
|
} = require('recharts/umd/Recharts.min');
|
|
|
|
@inject('appstate')
|
|
@observer
|
|
class DashboardComponent extends React.Component {
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
isOpened: false,
|
|
modalTopup: false,
|
|
data: {
|
|
name: '',
|
|
background_color_1: '',
|
|
background_color_2: '',
|
|
images: {
|
|
logo: ''
|
|
},
|
|
description: '',
|
|
additional_data: {
|
|
information: ''
|
|
},
|
|
sku: [
|
|
{
|
|
id: '',
|
|
name: '',
|
|
price: ''
|
|
},
|
|
]
|
|
},
|
|
};
|
|
this.vouchersStore = props.appstate.vouchers;
|
|
this.http = props.appstate.http;
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.vouchersStore.getList();
|
|
}
|
|
|
|
setModalTopup = (bool) => {
|
|
this.setState({ modalTopup: bool });
|
|
};
|
|
|
|
render() {
|
|
const { classes } = this.props;
|
|
const getGridListCols = () => {
|
|
if (isWidthUp('lg', this.props.width)) {
|
|
return 4;
|
|
}
|
|
|
|
if (isWidthUp('md', this.props.width)) {
|
|
return 3;
|
|
}
|
|
|
|
if (isWidthUp('sm', this.props.width)) {
|
|
return 2;
|
|
}
|
|
|
|
return 1;
|
|
}
|
|
const settings = {
|
|
arrows: true,
|
|
infinite: true,
|
|
speed: 500,
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1,
|
|
fade: true
|
|
};
|
|
|
|
return (
|
|
<Grid className={classes.root}>
|
|
|
|
<Grid
|
|
container
|
|
direction="row"
|
|
justify="center"
|
|
alignItems="center"
|
|
spacing={24}
|
|
style={{ marginTop: 0 }}>
|
|
|
|
<Grid item xs={12} sm={12} md={12} lg={12}>
|
|
<Slider {...settings}>
|
|
<div>
|
|
<img src={slider1} width={'100%'} />
|
|
</div>
|
|
<div>
|
|
<img src={slider2} width={'100%'} />
|
|
</div>
|
|
<div>
|
|
<img src={slider3} width={'100%'} />
|
|
</div>
|
|
<div>
|
|
<img src={slider4} width={'100%'} />
|
|
</div>
|
|
<div>
|
|
<img src={slider5} width={'100%'} />
|
|
</div>
|
|
</Slider>
|
|
</Grid>
|
|
|
|
<Grid
|
|
container
|
|
direction="row"
|
|
justify="center"
|
|
alignItems="center"
|
|
spacing={24}
|
|
style={{ marginTop: 30 }}>
|
|
|
|
<Grid item xs={10} sm={3} md={3} lg={3}>
|
|
{this.props.appstate.wallet.data.wallet ? (
|
|
<MuiCard className={classes.card}>
|
|
<MuiCardContent>
|
|
<Typography variant="h5" component="h2">
|
|
Voucher
|
|
</Typography>
|
|
<Typography component="p">
|
|
<NumberFormat value={(this.props.appstate.wallet.data.wallet).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '} />
|
|
</Typography>
|
|
</MuiCardContent>
|
|
<MuiCardActions>
|
|
<MuiCardButton type="primary" icon="plus" onClick={() => this.setModalTopup(true)}>Add Voucher</MuiCardButton>
|
|
</MuiCardActions>
|
|
</MuiCard>
|
|
) : ''}
|
|
</Grid>
|
|
|
|
<Grid item xs={10} sm={3} md={3} lg={3}>
|
|
{this.props.appstate.wallet.data.wallet ? (
|
|
<MuiCard className={classes.card}>
|
|
<MuiCardContent>
|
|
<Typography variant="h5" component="h2">
|
|
Profile
|
|
</Typography>
|
|
<Typography component="p">
|
|
Please complete your profile
|
|
</Typography>
|
|
</MuiCardContent>
|
|
<MuiCardActions>
|
|
<MuiCardButton type="primary" icon="plus" onClick={() => console.log('Edit Profile')}>Edit Profile</MuiCardButton>
|
|
</MuiCardActions>
|
|
</MuiCard>
|
|
) : ''}
|
|
</Grid>
|
|
|
|
<Grid item xs={10} sm={3} md={3} lg={3}>
|
|
{this.props.appstate.wallet.data.wallet ? (
|
|
<MuiCard className={classes.card}>
|
|
<MuiCardContent>
|
|
<Typography variant="h5" component="h2">
|
|
Credit Card
|
|
</Typography>
|
|
<Typography component="p">
|
|
Please add your credit card
|
|
</Typography>
|
|
</MuiCardContent>
|
|
<MuiCardActions>
|
|
<MuiCardButton type="primary" icon="plus" onClick={() => console.log('Edit Profile')}>Add Credit Card</MuiCardButton>
|
|
</MuiCardActions>
|
|
</MuiCard>
|
|
) : ''}
|
|
</Grid>
|
|
</Grid>
|
|
|
|
<Grid
|
|
container
|
|
direction="column"
|
|
justify="center"
|
|
alignItems="center"
|
|
spacing={24}
|
|
style={{ marginTop: 30 }}>
|
|
|
|
{/* <Grid item xs={10} sm={10} md={9} lg={9}>
|
|
<Typography variant="h6" gutterBottom>
|
|
Voucher & Gift Card
|
|
</Typography>
|
|
<MuiGridList cellHeight={180} cols={getGridListCols()} className={classes.gridList} style={{
|
|
width: '100%',
|
|
height: undefined,
|
|
}}>
|
|
{(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 (
|
|
<MuiGridListTile key={index} className={classes.imgFullWidth} style={{
|
|
height: 'auto',
|
|
padding: 5,
|
|
// border: "1px solid #000"
|
|
}}>
|
|
<MuiCard className={classes.card}>
|
|
<MuiCardMedia
|
|
component="img"
|
|
alt={item.name}
|
|
className={classes.media}
|
|
height="120"
|
|
style={{
|
|
marginLeft: 'auto',
|
|
marginRight: 'auto',
|
|
width: 180
|
|
}}
|
|
image={image}
|
|
title={item.name}
|
|
/>
|
|
<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>
|
|
</MuiGridListTile>
|
|
)
|
|
}) : (<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) => {
|
|
console.log("itemm", item)
|
|
let image = get(item, 'images.main', '');
|
|
|
|
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'}
|
|
data={this.state.data}
|
|
isVisible={this.state.isOpened}
|
|
onOk={() => this.setState({ isOpened: false })}
|
|
onCancel={() => this.setState({ isOpened: false })}
|
|
/>
|
|
)}
|
|
<ModalTopupComponent onOk={() => this.setModalTopup(false)} onCancel={() => this.setModalTopup(false)} isVisible={this.state.modalTopup} />
|
|
</Grid>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default compose(withStyles(styles), withWidth())(DashboardComponent);
|