Merge branch 'master' of https://gitlab.com/asacreative/redemption-point/new-frontend-customer-redemption-point
This commit is contained in:
enggar_ganteng
commit
93840908ba
BIN
assets/images/login/error.png
Normal file
BIN
assets/images/login/error.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
assets/images/login/logo_new.png
Normal file
BIN
assets/images/login/logo_new.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
assets/images/login/register_image.png
Normal file
BIN
assets/images/login/register_image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
BIN
assets/images/login/register_image_2.png
Normal file
BIN
assets/images/login/register_image_2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
BIN
assets/images/login/success_new.gif
Normal file
BIN
assets/images/login/success_new.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
39
package-lock.json
generated
39
package-lock.json
generated
|
|
@ -5731,10 +5731,6 @@
|
|||
"resolved": "https://registry.npmjs.org/expect.js/-/expect.js-0.2.0.tgz",
|
||||
"integrity": "sha1-EChTPSwcNj90pnlv9X7AUg3tK+E="
|
||||
},
|
||||
"exploder": {
|
||||
"version": "git://github.com/cezary/exploder.git#721e1a2f777ff5dafe853981ca21b8874aae1fb0",
|
||||
"from": "git://github.com/cezary/exploder.git"
|
||||
},
|
||||
"express": {
|
||||
"version": "4.16.4",
|
||||
"resolved": "https://registry.npmjs.org/express/-/express-4.16.4.tgz",
|
||||
|
|
@ -6418,11 +6414,13 @@
|
|||
},
|
||||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
|
|
@ -6435,15 +6433,18 @@
|
|||
},
|
||||
"code-point-at": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
|
|
@ -6546,7 +6547,8 @@
|
|||
},
|
||||
"inherits": {
|
||||
"version": "2.0.3",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
|
|
@ -6556,6 +6558,7 @@
|
|||
"is-fullwidth-code-point": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"number-is-nan": "^1.0.0"
|
||||
}
|
||||
|
|
@ -6568,17 +6571,20 @@
|
|||
"minimatch": {
|
||||
"version": "3.0.4",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
},
|
||||
"minimist": {
|
||||
"version": "0.0.8",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"minipass": {
|
||||
"version": "2.2.4",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safe-buffer": "^5.1.1",
|
||||
"yallist": "^3.0.0"
|
||||
|
|
@ -6595,6 +6601,7 @@
|
|||
"mkdirp": {
|
||||
"version": "0.5.1",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8"
|
||||
}
|
||||
|
|
@ -6667,7 +6674,8 @@
|
|||
},
|
||||
"number-is-nan": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
|
|
@ -6677,6 +6685,7 @@
|
|||
"once": {
|
||||
"version": "1.4.0",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"wrappy": "1"
|
||||
}
|
||||
|
|
@ -6782,6 +6791,7 @@
|
|||
"string-width": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"code-point-at": "^1.0.0",
|
||||
"is-fullwidth-code-point": "^1.0.0",
|
||||
|
|
@ -14052,8 +14062,11 @@
|
|||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-gif/-/react-gif-0.1.0.tgz",
|
||||
"integrity": "sha1-/A21vUnTHdRRnIVRAp+zXTtk04E=",
|
||||
"requires": {
|
||||
"exploder": "git://github.com/cezary/exploder.git#721e1a2f777ff5dafe853981ca21b8874aae1fb0"
|
||||
"dependencies": {
|
||||
"exploder": {
|
||||
"version": "git://github.com/cezary/exploder.git#721e1a2f777ff5dafe853981ca21b8874aae1fb0",
|
||||
"from": "git://github.com/cezary/exploder.git#721e1a2f777ff5dafe853981ca21b8874aae1fb0"
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-google-charts": {
|
||||
|
|
|
|||
|
|
@ -33,6 +33,8 @@
|
|||
"dependencies": {
|
||||
"@firebase/app": "^0.3.4",
|
||||
"@material-ui/core": "^3.9.1",
|
||||
"@material-ui/icons": "^3.0.2",
|
||||
"@material-ui/styles": "^3.0.0-alpha.2",
|
||||
"@mdi/font": "^2.3.54",
|
||||
"antd": "^3.9.3",
|
||||
"async-validator": "^1.8.2",
|
||||
|
|
|
|||
109
src/common/components/Alert/AlertSuccess.js
Normal file
109
src/common/components/Alert/AlertSuccess.js
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
import React from 'react';
|
||||
import withStyles from "@material-ui/core/styles/withStyles";
|
||||
import Button from '@material-ui/core/Button';
|
||||
import Dialog from '@material-ui/core/Dialog';
|
||||
import DialogActions from '@material-ui/core/DialogActions';
|
||||
import DialogContent from '@material-ui/core/DialogContent';
|
||||
import DialogContentText from '@material-ui/core/DialogContentText';
|
||||
import DialogTitle from '@material-ui/core/DialogTitle';
|
||||
import Zoom from '@material-ui/core/Zoom';
|
||||
import Typography from "@material-ui/core/Typography/Typography";
|
||||
import {inject, observer} from "mobx-react";
|
||||
import withMobileDialog from '@material-ui/core/withMobileDialog';
|
||||
|
||||
function Transition(props) {
|
||||
return <Zoom in={true} {...props} />;
|
||||
}
|
||||
|
||||
@inject('store')
|
||||
@observer
|
||||
class AlertSuccess extends React.Component{
|
||||
// state = {
|
||||
// open: this.props.open,
|
||||
// callback : this.props.onClose
|
||||
// };
|
||||
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.global_ui = props.store.global_ui;
|
||||
}
|
||||
|
||||
// componentDidUpdate(prevProps){
|
||||
// if (this.props.open !== prevProps.open) {
|
||||
// this.setState({open : this.props.open});
|
||||
// }
|
||||
// }
|
||||
|
||||
handleClose = () => {
|
||||
this.global_ui.closeAlert();
|
||||
};
|
||||
|
||||
onActionClick = async ()=>{
|
||||
if(typeof this.global_ui.successAlertCB === 'function') {
|
||||
let cbResult = this.global_ui.successAlertCB();
|
||||
if(cbResult && cbResult.then && typeof cbResult.then === 'function'){
|
||||
await cbResult
|
||||
}
|
||||
}
|
||||
this.global_ui.closeAlert()
|
||||
};
|
||||
|
||||
renderIcon = (type)=>{
|
||||
if(type === 'success'){
|
||||
return <img src={require('../../../../assets/images/login/success_new.gif')}/>
|
||||
}
|
||||
else {
|
||||
return (<Zoom in={true}>
|
||||
<img src={require('../../../../assets/images/login/error.png')} width={"30%"} style={{transitionDelay: '2000ms',marginBottom : 20}}/>
|
||||
</Zoom>)
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
let actions = this.props.actions.length ? this.props.actions : [<Button onClick={this.onActionClick} color="primary">Ok</Button>];
|
||||
const { fullScreen } = this.props;
|
||||
return (
|
||||
<Dialog
|
||||
open={this.global_ui.alertDialog.open}
|
||||
TransitionComponent={Transition}
|
||||
keepMounted
|
||||
fullWidth
|
||||
fullScreen={fullScreen}
|
||||
onClose={this.handleClose}
|
||||
aria-labelledby="alert-dialog-slide-title"
|
||||
aria-describedby="alert-dialog-slide-description"
|
||||
disableBackdropClick
|
||||
disableEscapeKeyDown
|
||||
>
|
||||
<DialogContent style={{display:'flex',alignItems : 'center',justifyContent : 'center',flexDirection : 'column'}}>
|
||||
{
|
||||
this.renderIcon(this.global_ui.alertDialog.type)
|
||||
}
|
||||
|
||||
<Typography variant={"h6"} gutterBottom={true}>
|
||||
{this.global_ui.alertDialog.title}
|
||||
</Typography>
|
||||
<Typography variant={"subtitle2"} gutterBottom={true}>
|
||||
{this.global_ui.alertDialog.subtitle}
|
||||
</Typography>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
{
|
||||
actions.map(it=>it)
|
||||
}
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
AlertSuccess.defaultProps = {
|
||||
open : false,
|
||||
title : 'Alert',
|
||||
subtitle : '',
|
||||
onClose : ()=>{},
|
||||
actions : [],
|
||||
type : 'error'
|
||||
};
|
||||
|
||||
export default withMobileDialog()(AlertSuccess);
|
||||
|
|
@ -47,6 +47,7 @@ import { Route as RouteDOM } from 'react-router-dom'
|
|||
import WalletComponent from "./WalletComponent";
|
||||
import {APP_TYPE} from "../../config/app";
|
||||
|
||||
|
||||
faker.locale = 'id_ID';
|
||||
@inject("appstate")
|
||||
@observer
|
||||
|
|
@ -71,7 +72,7 @@ export default class App extends React.Component {
|
|||
.location
|
||||
.pathname
|
||||
.split('/')
|
||||
.map(path => startcase(path))
|
||||
.map(path => startcase(path)),
|
||||
};
|
||||
this.defaultState = Object.assign({}, this.state);
|
||||
this.user = props.appstate.user;
|
||||
|
|
@ -365,6 +366,7 @@ export default class App extends React.Component {
|
|||
<WithdrawDialog/>
|
||||
|
||||
|
||||
|
||||
<Toolbar className="toolbarAkunTiket">
|
||||
<ToolbarGroup>
|
||||
<IconButton className="hide-on-med-and-up" onClick={() => this.toggleDrawer()}><IconMenus/></IconButton>
|
||||
|
|
@ -403,44 +405,40 @@ export default class App extends React.Component {
|
|||
<Link onClick={this
|
||||
.changeRoute
|
||||
.bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem
|
||||
// leftIcon={<img src="/assets/images/icon/chart.png"/>}
|
||||
className={(this.state.selectedMenu === '/app/dashboard') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
||||
className="menuAkun">Home</span></MenuItem></Link>
|
||||
|
||||
<Link onClick={this
|
||||
{/* <Link onClick={this
|
||||
.changeRoute
|
||||
.bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem
|
||||
// leftIcon={<img src="/assets/images/icon/flight.png"/>}
|
||||
className={(this.state.selectedMenu === '/app/flight') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
||||
className="menuAkun">Flight</span></MenuItem></Link>
|
||||
|
||||
<Link onClick={this
|
||||
.changeRoute
|
||||
.bind(this, '/app/hotel')} to={LINKS.HOTEL}><MenuItem
|
||||
// leftIcon={<img src="/assets/images/icon/hotel.png"/>}
|
||||
className={(this.state.selectedMenu === '/app/hotel') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
||||
className="menuAkun">Hotel</span></MenuItem></Link>
|
||||
|
||||
<Link onClick={this
|
||||
.changeRoute
|
||||
.bind(this, '/app/car')} to={LINKS.CAR}><MenuItem
|
||||
// leftIcon={<img src="/assets/images/icon/car.png"/>}
|
||||
className={(this.state.selectedMenu === '/app/car') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
||||
className="menuAkun">Car</span></MenuItem></Link>
|
||||
|
||||
<Link onClick={this
|
||||
.changeRoute
|
||||
.bind(this, '/app/shop')} to={LINKS.ITEMS}><MenuItem
|
||||
// leftIcon={<img src="/assets/images/icon/product.png"/>}
|
||||
className={(this.state.selectedMenu === '/app/shop') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
||||
className="menuAkun">Shop</span></MenuItem></Link>
|
||||
className="menuAkun">Shop</span></MenuItem></Link> */}
|
||||
|
||||
<Link onClick={this
|
||||
{/* <Link onClick={this
|
||||
.changeRoute
|
||||
.bind(this, '/app/vouchers')} to={LINKS.VOUCHERS}><MenuItem
|
||||
// leftIcon={<img src="/assets/images/icon/product.png"/>}
|
||||
.bind(this, '/app/vouchers')}
|
||||
to={LINKS.VOUCHERS}
|
||||
><MenuItem
|
||||
className={(this.state.selectedMenu === '/app/vouchers') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
||||
className="menuAkun">Vouchers</span></MenuItem></Link>
|
||||
className="menuAkun">Vouchers</span></MenuItem></Link> */}
|
||||
|
||||
{/* <Button className="toolbar-button-sysinfo hide-on-small-only" size="small" type="dashed"
|
||||
style={{marginRight: (window.innerWidth < 600) ? 2 : 10}}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
import React from "react";
|
||||
import {inject, observer} from "mobx-react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
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,
|
||||
|
|
@ -26,11 +26,11 @@ import {
|
|||
import Grid from '@material-ui/core/Grid';
|
||||
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';
|
||||
|
|
@ -40,11 +40,12 @@ 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";
|
||||
|
||||
const {
|
||||
LineChart,
|
||||
|
|
@ -66,31 +67,43 @@ const {
|
|||
@observer
|
||||
export default class DashboardComponent extends React.Component {
|
||||
|
||||
constructor(props){
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isOpened: false,
|
||||
modalTopup: false,
|
||||
data: {
|
||||
name: '',
|
||||
image: '',
|
||||
background_color_1:'',
|
||||
background_color_2:'',
|
||||
images: {
|
||||
logo:''
|
||||
},
|
||||
description: '',
|
||||
additional_information: '',
|
||||
background_color: '',
|
||||
option: [
|
||||
additional_data: {
|
||||
information:''
|
||||
},
|
||||
sku: [
|
||||
{
|
||||
value: '',
|
||||
cost: ''
|
||||
id:'',
|
||||
name: '',
|
||||
price: ''
|
||||
},
|
||||
]
|
||||
},
|
||||
};
|
||||
this.vouchersStore = props.appstate.vouchers;
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
|
||||
componentDidMount() {
|
||||
this.vouchersStore.getList();
|
||||
}
|
||||
|
||||
render(){
|
||||
setModalTopup = (bool) => {
|
||||
this.setState({modalTopup: bool});
|
||||
};
|
||||
|
||||
render() {
|
||||
const settings = {
|
||||
arrows: true,
|
||||
infinite: true,
|
||||
|
|
@ -100,171 +113,87 @@ export default class DashboardComponent extends React.Component {
|
|||
fade: true
|
||||
};
|
||||
|
||||
const data = [
|
||||
{
|
||||
name: 'KFC',
|
||||
images: {
|
||||
logo: 'https://ecs7.tokopedia.net/img/recharge/operator/kfc-box_150px_74px.png'
|
||||
},
|
||||
description: 'KFC merupakan restoran cepat saji yang menyediakan ayam goreng serta berbagai menu pilihan lainnya seperti burger, sup, dan salad. Dengan rasa yang renyah dan gurih, siapa pun dijamin ketagihan dengan ayam goreng yang satu ini.',
|
||||
additional_information: 'Voucher ini berlaku hingga 29 hari setelah pembelian.',
|
||||
background_color: 'linear-gradient(rgb(214, 18, 53), rgb(100, 23, 24))',
|
||||
option: [
|
||||
{
|
||||
value: 'Rp. 50.000',
|
||||
cost: '50 Points'
|
||||
},
|
||||
{
|
||||
value: 'Rp. 100.000',
|
||||
cost: '100 Points'
|
||||
},
|
||||
{
|
||||
value: 'Super Besar 1',
|
||||
cost: '34 Points'
|
||||
},
|
||||
{
|
||||
value: 'Super Besar 2',
|
||||
cost: '49 Points'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Grab',
|
||||
images: {
|
||||
logo: 'https://ecs7.tokopedia.net/img/recharge/operator/grab_150px_74px.png'
|
||||
},
|
||||
description: 'Grab adalah platform transportasi terkemuka di Asia Tenggara. Kami percaya setiap orang harus bisa pergi ke mana saja dan percaya bahwa mereka dapat memesan perjalanan yang aman.',
|
||||
additional_information: 'Voucher ini berlaku hingga 28 Februari 2019. Voucher ini hanya bisa digunakan untuk layanan GrabCar, GrabBike, dan GrabExpress. ',
|
||||
background_color: 'linear-gradient(rgb(0, 174, 66), rgb(0, 93, 36))',
|
||||
option: [
|
||||
{
|
||||
value: 'Rp. 10.000',
|
||||
cost: '10 Points'
|
||||
},
|
||||
{
|
||||
value: 'Rp. 20.000',
|
||||
cost: '20 Points'
|
||||
},
|
||||
{
|
||||
value: 'Rp. 50.000',
|
||||
cost: '50 Points'
|
||||
},
|
||||
{
|
||||
value: 'Rp. 100.000',
|
||||
cost: '100 Points'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'OYO Hotel',
|
||||
images: {
|
||||
logo: 'https://ecs7.tokopedia.net/img/recharge/operator/oyo_150px_74px.png'
|
||||
},
|
||||
description: 'OYO Hotel adalah jaringan hotel terbesar di Asia Selatan dan terdapat di 11 negara dengan lebih dari 12,000 hotel tersebar di seluruh dunia.',
|
||||
additional_information: 'Voucher ini berlaku hingga 31 Januari 2019.',
|
||||
background_color: 'linear-gradient(rgb(253, 234, 225), rgb(255, 138, 98))',
|
||||
option: [
|
||||
{
|
||||
value: 'Rp. 75.000',
|
||||
cost: '25 Points'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Carrefour',
|
||||
images: {
|
||||
logo: 'https://ecs7.tokopedia.net/img/recharge/operator/carrefour_150px_74px.png'
|
||||
},
|
||||
description: 'Carrefour membantu semua orang agar dapat menikmati kualitas hidup yang lebih baik setiap harinya. Menyediakan berbagai kebutuhan harian sekaligus bulanan, sebagai tujuan utama berbelanja keluarga dengan memberikan pelayanan dan produk berkualitas dimanapun dan kapanpun.',
|
||||
additional_information: 'Voucher ini berlaku hingga 29 hari setelah pembelian.',
|
||||
background_color: 'linear-gradient(rgb(236, 249, 250), rgb(73, 176, 228))',
|
||||
option: [
|
||||
{
|
||||
value: 'Rp. 100.000',
|
||||
cost: '100 Points'
|
||||
},
|
||||
{
|
||||
value: 'Rp. 200.000',
|
||||
cost: '200 Points'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "Domino's Pizza",
|
||||
images: {
|
||||
logo: 'https://ecs7.tokopedia.net/img/recharge/operator/dominos_150px_74px.png'
|
||||
},
|
||||
description: "Domino's Pizza adalah pemimpin Pizza delivery di dunia. Dengan 130 toko yang tersebar di Jabodetabek, Bali, Bandung, Serang, dan Sukabumi, Domino’s menyajikan pizza paling lezat dengan harga terbaik untuk jutaan pelanggan. Domino’s juga mengantarkan pizza hangat dengan jaminan 30 menit sampai.",
|
||||
additional_information: "Voucher ini berlaku hingga 29 hari setelah pembelian",
|
||||
background_color: 'linear-gradient(rgb(11, 110, 174), rgb(2, 61, 96))',
|
||||
option: [
|
||||
{
|
||||
value: 'Rp. 100.000',
|
||||
cost: '90 Points'
|
||||
},
|
||||
{
|
||||
value: 'Rp. 200.000',
|
||||
cost: '180 Points'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Timezone',
|
||||
images: {
|
||||
logo: 'https://ecs7.tokopedia.net/img/recharge/operator/new-timezone_150px_74px.png',
|
||||
},
|
||||
description: 'Timezone merupakan tempat permainan semua keluarga di Indonesia. Beragam permainan menarik yang disediakan untuk memberikan pengalaman yang menyenangkan bagi setiap pengunjung. Selain permainan – permainan yang cukup menarik dan sensasi berbeda, pengunjung yang hadir ke Timezone juga berkesempatan mendapatkan hadiah-hadiah menarik dari mesin-mesin yang dimainkan ataupun souvenir, boneka dari tiket yang ditukarkan',
|
||||
additional_information: 'Voucher ini berlaku hingga 29 hari setelah pembelian.',
|
||||
background_color: 'linear-gradient(rgb(255, 118, 90), rgb(255, 40, 12))',
|
||||
option: [
|
||||
{
|
||||
value: 'Value Voucher Rp 200.000 (Saldo Rp 150.000 & Free Games Rp 50.000)',
|
||||
cost: '135 Points'
|
||||
},
|
||||
{
|
||||
value: 'Value Voucher Rp 500.000 (Saldo Rp 300.000 & Free Games Rp 200.000)',
|
||||
cost: '285 Points'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Bakmi GM',
|
||||
images: {
|
||||
logo: 'https://ecs7.tokopedia.net/img/recharge/operator/bakmigm_150px_74px.png'
|
||||
},
|
||||
description: 'BAKMI GM dirancang khusus untuk memberikan rasa yang lezat, yang dibuat dari bahan baku pilihan dan disajikan dengan harga yang ekonomis. Tersedia lebih dari 50 menu yang dapat dipilih oleh pelanggan, dengan menu Bakmi Special GM dan Pangsit Goreng yang menjadi favorit pelanggan.',
|
||||
additional_information: 'Voucher ini berlaku hingga 11 Januari 2019.',
|
||||
background_color: 'linear-gradient(rgb(254, 239, 73), rgb(241, 186, 54))',
|
||||
option: [
|
||||
{
|
||||
value: 'Rp. 50.000',
|
||||
cost: '47 Points'
|
||||
},
|
||||
{
|
||||
value: 'Rp. 100.000',
|
||||
cost: '94 Points'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'CFC',
|
||||
images: {
|
||||
logo: 'https://ecs7.tokopedia.net/img/recharge/operator/cfc_150px_74px.png'
|
||||
},
|
||||
description: 'CFC merupakan salah satu brand fast food yang tersebar di berbagai daerah di Indonesia. CFC menyediakan berbagai menu makanan dan minuman yang praktis dan bervariasi sesuai dengan selera keluarga Indonesia. Mulai dari berbagai menu berbahan dasar ayam seperti : Crispy Fried Chicken, Chicken Strips, Chicken Pop, Chicken Burger, Ayam Geprek, hingga Nasi Goreng, Spaghetti, Ice blended, Calblend Float, dan masih banyak lagi.',
|
||||
additional_information: 'Voucher ini berlaku hingga 29 hari setelah pembelian. Maksimal penggunaan 3 e-Voucher dalam 1 kali transaksi',
|
||||
background_color: 'linear-gradient(rgb(255, 255, 255), rgb(192, 192, 192))',
|
||||
option: [
|
||||
{
|
||||
value: 'Rp. 50.000',
|
||||
cost: '44 Points'
|
||||
},
|
||||
]
|
||||
},
|
||||
];
|
||||
return (
|
||||
<div>
|
||||
<div className="dashboard animated fadeIn" style={{marginLeft: '8%',marginRight:'7%'}}>
|
||||
<div className="row ">
|
||||
<div className="col s12 m12 l12 col-leftDashboard" style={{ marginBottom: 0 }}>
|
||||
<div className="row no-margin">
|
||||
{this.props.appstate.wallet.data.wallet ? (
|
||||
<div className="col s12 m4 l4" style={{ marginBottom: 0 }}>
|
||||
<Card className="cardLite cardDashboard">
|
||||
<h3 style={{
|
||||
display: 'block',
|
||||
fontSize: '1rem',
|
||||
textTransform: 'uppercase',
|
||||
color: '#0006',
|
||||
letterSpacing: 1
|
||||
}}>Voucher</h3>
|
||||
<div className="value"><NumberFormat value={(this.props.appstate.wallet.data.wallet).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/></div>
|
||||
<div style={{marginTop:10}}>
|
||||
<Button type="primary" icon="plus" onClick={() => this.setModalTopup(true)}>Add Voucher</Button>
|
||||
{/* <a className="btnFlatUnderline" onClick={() => this.setModalTopup(true)}>
|
||||
<span>Add Voucher</span>
|
||||
<Icon className="ml-8" type="right" />
|
||||
</a> */}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
) : ''}
|
||||
|
||||
return(
|
||||
<div style={{marginLeft:'10%',marginRight:'10%',marginTop:20,flexGrow:1, minHeight:window.innerHeight-70, backgroundColor:'#fff'}}>
|
||||
{this.props.appstate.wallet.data.wallet ? (
|
||||
<div className="col s12 m4 l4" style={{ marginBottom: 0 }}>
|
||||
<Card className="cardLite cardDashboard">
|
||||
<h3 style={{
|
||||
display: 'block',
|
||||
fontSize: '1rem',
|
||||
textTransform: 'uppercase',
|
||||
color: '#0006',
|
||||
letterSpacing: 1
|
||||
}}> Profile</h3>
|
||||
<div className="value">Please complete your profile</div>
|
||||
<div style={{marginTop:10}}>
|
||||
<Button type="primary" icon="edit">Edit Profile</Button>
|
||||
{/* <a className="btnFlatUnderline" onClick={() => this.setModalTopup(true)}>
|
||||
<span>Edit Profile</span>
|
||||
<Icon className="ml-8" type="right" />
|
||||
</a> */}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
) : ''}
|
||||
|
||||
|
||||
{this.props.appstate.wallet.data.wallet ? (
|
||||
<div className="col s12 m4 l4" style={{ marginBottom: 0 }}>
|
||||
<Card className="cardLite cardDashboard">
|
||||
<h3 style={{
|
||||
display: 'block',
|
||||
fontSize: '1rem',
|
||||
textTransform: 'uppercase',
|
||||
color: '#0006',
|
||||
letterSpacing: 1
|
||||
}}>Credit Card</h3>
|
||||
<div className="value ">Please add your credit card</div>
|
||||
<div style={{marginTop:10}}>
|
||||
<Button type="primary" icon="plus">Add Credit Card</Button>
|
||||
{/* <a className="btnFlatUnderline" onClick={() => this.setModalTopup(true)}>
|
||||
<span>Add Credit Car</span>
|
||||
<Icon className="ml-8" type="right" />
|
||||
</a> */}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
) : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div style={{ marginLeft: '10%', marginRight: '10%', marginTop: 20, flexGrow: 1, minHeight: window.innerHeight - 70, backgroundColor: '#fff' }}>
|
||||
<div>
|
||||
<Slider {...settings}>
|
||||
<div>
|
||||
|
|
@ -295,7 +224,7 @@ export default class DashboardComponent extends React.Component {
|
|||
Popular Items
|
||||
</h3>
|
||||
<Row gutter={10}>
|
||||
<PopularItemCardComponent/>
|
||||
<PopularItemCardComponent />
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -309,14 +238,14 @@ export default class DashboardComponent extends React.Component {
|
|||
New Products
|
||||
</h3>
|
||||
<Row gutter={10}>
|
||||
<NewItemCardComponent/>
|
||||
<NewItemCardComponent />
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<div className={"voucher"} style={{marginTop:0}}>
|
||||
<div className={"voucher"} style={{ marginTop: 0 }}>
|
||||
<div className="row">
|
||||
<div className="col l12 m12 s12 padding">
|
||||
<h3>
|
||||
|
|
@ -324,45 +253,35 @@ export default class DashboardComponent extends React.Component {
|
|||
</h3>
|
||||
|
||||
<Row gutter={10}>
|
||||
{data.map((item, index) => {
|
||||
return (<Col xs={24} xl={6} onClick={() => this.setState({isOpened: true, data: item})} key={index} span={6}>
|
||||
{
|
||||
( this.vouchersStore.list.length > 0) ?
|
||||
this.vouchersStore.list.map((item, index) => {
|
||||
return (<Col onClick={() => this.setState({isOpened: true, data: item})} key={index} span={6}>
|
||||
<ItemCard data={item}/>
|
||||
</Col>)
|
||||
})}
|
||||
})
|
||||
: (
|
||||
<EmptyComponent type="default4" header="" content="There is no voucher in sight"/>
|
||||
)
|
||||
}
|
||||
</Row>
|
||||
|
||||
{/*<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})}*/}
|
||||
{/*/>*/}
|
||||
<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})}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Grid>
|
||||
{/* <Grid item xs={12} sm={6}>
|
||||
<Paper>xs=12 sm=6</Paper>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Paper>xs=12 sm=6</Paper>
|
||||
</Grid>
|
||||
<Grid item xs={6} sm={3}>
|
||||
<Paper>xs=3 sm=3</Paper>
|
||||
</Grid>
|
||||
<Grid item xs={6} sm={3}>
|
||||
<Paper>xs=3 sm=3</Paper>
|
||||
</Grid>
|
||||
<Grid item xs={6} sm={3}>
|
||||
<Paper>xs=3 sm=3</Paper>
|
||||
</Grid>
|
||||
<Grid item xs={6} sm={3}>
|
||||
<Paper>xs=3 sm=3</Paper>
|
||||
</Grid> */}
|
||||
</Grid>
|
||||
</div>
|
||||
</div>
|
||||
<ModalTopupComponent onOk={() => this.setModalTopup(false)} onCancel={() => this.setModalTopup(false)} isVisible={this.state.modalTopup} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@
|
|||
|
||||
|
||||
.value {
|
||||
font-size: 1.8rem;
|
||||
font-size: 1rem;
|
||||
letter-spacing: 1px;
|
||||
line-height: 1.2;
|
||||
display: inline-block;
|
||||
|
|
|
|||
110
src/common/pages/Login/LoginBtn.js
Normal file
110
src/common/pages/Login/LoginBtn.js
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
import React from 'react';
|
||||
import withStyles from "@material-ui/core/styles/withStyles";
|
||||
import {styles} from '../Register/registerStyle';
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
import Paper from '@material-ui/core/Paper';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import TextField from '@material-ui/core/TextField';
|
||||
import Visibility from '@material-ui/icons/Visibility';
|
||||
import VisibilityOff from '@material-ui/icons/VisibilityOff';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import Hidden from '@material-ui/core/Hidden';
|
||||
import InputAdornment from '@material-ui/core/InputAdornment';
|
||||
import IconButton from '@material-ui/core/IconButton';
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
class BTNLoginPage extends React.Component{
|
||||
state = {
|
||||
email : "",
|
||||
password : "",
|
||||
showPassword : false
|
||||
};
|
||||
|
||||
handleChange = name => event => {
|
||||
this.setState({
|
||||
[name]: event.target.value,
|
||||
});
|
||||
};
|
||||
|
||||
viewPassword = ()=>{
|
||||
this.setState({
|
||||
showPassword : !this.state.showPassword
|
||||
})
|
||||
};
|
||||
|
||||
render(){
|
||||
const { classes } = this.props;
|
||||
return (
|
||||
<div className={classes.container}>
|
||||
<Grid container spacing={0} className={classes.gridContainer}>
|
||||
<Grid item xs={12} className={classes.logoContainer}>
|
||||
<img src={require('../../../../assets/images/login/logo_new.png')} className={classes.logo} />
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={12} md={10} lg={6} className={classes.registerContainer}>
|
||||
<Grid container spacing={24} className={classes.registerPaper}>
|
||||
<Hidden smDown>
|
||||
<Grid item xs={6}>
|
||||
<img src={require('../../../../assets/images/login/register_image_2.png')} width={"80%"}/>
|
||||
<Typography style={{color : '#FFF'}} variant={"h6"}>
|
||||
Welcome to BTN Points
|
||||
</Typography>
|
||||
<Typography style={{color : '#FFF'}} variant={"subtitle2"}>
|
||||
Sign in to get various voucher and items
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Hidden>
|
||||
<Grid item xs={12} sm={12} md={6} style={{paddingLeft : 50,paddingRight : 50}}>
|
||||
<Paper className={classes.formRegister}>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
Login to BTN Point
|
||||
</Typography>
|
||||
<Typography variant="subtitle2" gutterBottom>
|
||||
Doesn't have an account? <Link to={"/register"}>Register</Link>
|
||||
</Typography>
|
||||
<TextField
|
||||
id="email"
|
||||
label="Email"
|
||||
value={this.state.email}
|
||||
onChange={this.handleChange('email')}
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
/>
|
||||
{/*<div style={{display : 'flex',alignItems : 'center'}}>*/}
|
||||
<TextField
|
||||
id="password"
|
||||
label="Password"
|
||||
value={this.state.password}
|
||||
onChange={this.handleChange('password')}
|
||||
margin="normal"
|
||||
type={this.state.showPassword ? 'text' : 'password'}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton
|
||||
aria-label="Toggle password visibility"
|
||||
onClick={this.viewPassword}
|
||||
>
|
||||
{this.state.showPassword ? <VisibilityOff /> : <Visibility />}
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<div style={{padding : 5,marginTop : 20}}>
|
||||
<Button fullWidth variant="contained" color="secondary">
|
||||
Sign In
|
||||
</Button>
|
||||
</div>
|
||||
</Paper>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default withStyles(styles)(BTNLoginPage);
|
||||
|
|
@ -80,3 +80,4 @@
|
|||
textarea:focus, input:focus{
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
36
src/common/pages/Register/registerStyle.js
Normal file
36
src/common/pages/Register/registerStyle.js
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
import yellow from '@material-ui/core/colors/yellow';
|
||||
export const styles = theme => ({
|
||||
container : {
|
||||
flex :1,
|
||||
flexGrow : 1,
|
||||
height : '100vh',
|
||||
marginTop: "-56px !important",
|
||||
background : '#024F8E'
|
||||
},
|
||||
gridContainer : {
|
||||
flex :1,
|
||||
justifyContent:'center'
|
||||
},
|
||||
registerContainer: {
|
||||
marginTop : 50
|
||||
},
|
||||
formRegister : {
|
||||
padding : 20,
|
||||
display : 'flex',
|
||||
flexDirection: 'column',
|
||||
textAlign : 'center'
|
||||
},
|
||||
registerPaper : {
|
||||
flex :1,
|
||||
flexDirection : 'row',
|
||||
justifyContent:'center'
|
||||
},
|
||||
logo : {
|
||||
width : '200px'
|
||||
},
|
||||
logoContainer : {
|
||||
textAlign : 'center',
|
||||
background : yellow['500'],
|
||||
padding : 20
|
||||
}
|
||||
});
|
||||
|
|
@ -28,12 +28,6 @@ export default class VouchersComponent extends React.Component {
|
|||
additional_data: {
|
||||
information:''
|
||||
},
|
||||
// option: [
|
||||
// {
|
||||
// value: '',
|
||||
// cost: ''
|
||||
// },
|
||||
// ],
|
||||
sku: [
|
||||
{
|
||||
id:'',
|
||||
|
|
@ -49,7 +43,6 @@ export default class VouchersComponent extends React.Component {
|
|||
|
||||
componentDidMount() {
|
||||
this.vouchersStore.getList();
|
||||
console.log('res list component',this.vouchersStore.getList())
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
@ -74,19 +67,6 @@ export default class VouchersComponent extends React.Component {
|
|||
<EmptyComponent type="default4" header="" content="There is no voucher in sight"/>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
{/* {
|
||||
(data.length > 0) ?
|
||||
data.map((item, index) => {
|
||||
return (<Col onClick={() => this.setState({isOpened: true, data: item})} key={index} span={6}>
|
||||
<ItemCard data={item}/>
|
||||
</Col>)
|
||||
})
|
||||
: (
|
||||
<EmptyComponent type="default4" header="" content="There is no voucher in sight"/>
|
||||
)
|
||||
} */}
|
||||
</Row>
|
||||
|
||||
{this.state.isOpened && (
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import {observer, inject} from 'mobx-react';
|
|||
import {BrowserRouter as Router, Route, Switch, Redirect} from "react-router-dom";
|
||||
import RegisterComponent from "./pages/RegisterNew";
|
||||
import LoginComponent from "./pages/Login";
|
||||
import LoginBTNComponent from "./pages/Login/LoginBtn";
|
||||
import ForgotPasswordComponent from "./pages/ForgotPassword";
|
||||
import ChangePassword from './pages/ChangePassword';
|
||||
import AppContainer from "./pages/App";
|
||||
|
|
@ -155,7 +156,7 @@ export default class Routes extends React.Component {
|
|||
pathname: this.authStore.isLoggedIn ? LINKS.DASHBOARD : LINKS.LOGIN
|
||||
}}/>)}/>
|
||||
<Route exact path={LINKS.REGISTER} component={RegisterComponent}/>
|
||||
<Route exact path={LINKS.LOGIN} component={LoginComponent}/>
|
||||
<Route exact path={LINKS.LOGIN} component={LoginBTNComponent}/>
|
||||
<Route exact path={LINKS.FORGOT_PASSWORD} component={ForgotPasswordComponent}/>
|
||||
<Route exact path={LINKS.INVITE_CONFIRMATION} component={InviteConfirmationComponent}/>
|
||||
<Route exact path={LINKS.INVITE_CONFIRMATION_LOGIN} component={InviteConfirmationLoginComponent}/>
|
||||
|
|
|
|||
|
|
@ -149,4 +149,29 @@ export default class GlobalUI {
|
|||
this.globalAlert = '';
|
||||
this[DIALOG.UI.ALERT] = false;
|
||||
}
|
||||
|
||||
@observable successAlertCB = ()=>{
|
||||
this.closeAlert();
|
||||
};
|
||||
|
||||
@action
|
||||
openAlert({title=false,subtitle=false,cb=false,type='error'}){
|
||||
if(typeof cb === 'function'){
|
||||
this.successAlertCB = cb;
|
||||
}
|
||||
this.alertDialog= {
|
||||
title : title,
|
||||
open : true,
|
||||
subtitle : subtitle,
|
||||
type : type
|
||||
}
|
||||
};
|
||||
|
||||
@action
|
||||
closeAlert(){
|
||||
this.alertDialog.title = false;
|
||||
this.alertDialog.open = false;
|
||||
this.alertDialog.subtitle = false;
|
||||
this.successAlertCB = ()=>this.closeAlert();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user