fix : merge
This commit is contained in:
enggar_ganteng
commit
7368bc5b07
2345
package-lock.json
generated
2345
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
88
package.json
88
package.json
|
|
@ -31,33 +31,33 @@
|
|||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@firebase/app": "^0.3.4",
|
||||
"@firebase/app": "^0.3.8",
|
||||
"@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",
|
||||
"antd": "^3.13.0",
|
||||
"async-validator": "^1.10.1",
|
||||
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
|
||||
"babel-plugin-transform-react-constant-elements": "^6.23.0",
|
||||
"babel-preset-es2015": "^6.24.1",
|
||||
"bind-decorator": "^1.0.11",
|
||||
"butter-toast": "^3.0.3",
|
||||
"butter-toast": "^3.2.1",
|
||||
"cinnamon-sugar": "^1.0.0",
|
||||
"compression": "^1.7.1",
|
||||
"cors": "^2.8.4",
|
||||
"cross-spawn": "^6.0.5",
|
||||
"css-hot-loader": "^1.3.4",
|
||||
"cssnano": "^4.1.0",
|
||||
"debug": "^4.0.1",
|
||||
"css-hot-loader": "^1.4.3",
|
||||
"cssnano": "^4.1.8",
|
||||
"debug": "^4.1.1",
|
||||
"decimal.js-light": "^2.3.1",
|
||||
"exenv": "^1.2.2",
|
||||
"express": "^4.16.2",
|
||||
"faker": "^4.1.0",
|
||||
"feather-icons": "^4.7.3",
|
||||
"feather-icons": "^4.12.1",
|
||||
"feather-icons-react": "^0.2.0",
|
||||
"file-loader": "^1.1.5",
|
||||
"firebase": "^5.7.2",
|
||||
"firebase": "^5.8.1",
|
||||
"frappe-gantt": "0.3.0",
|
||||
"froala-editor": "^2.8.4",
|
||||
"fs-extra-promise": "^1.0.1",
|
||||
|
|
@ -80,21 +80,21 @@
|
|||
"material-design-icons": "^3.0.1",
|
||||
"material-ui": "^0.20.0",
|
||||
"material-ui-community-icons": "^0.15.0",
|
||||
"mobx": "^5.1.2",
|
||||
"mobx": "^5.9.0",
|
||||
"mobx-localstorage": "^1.0.0",
|
||||
"mobx-react": "^5.2.8",
|
||||
"mobx-react": "^5.4.3",
|
||||
"mobx-react-devtools": "^6.0.3",
|
||||
"moment": "^2.19.3",
|
||||
"moment": "^2.24.0",
|
||||
"nwbuild": "0.0.5",
|
||||
"parcel-bundler": "^1.10.3",
|
||||
"parcel-bundler": "^1.11.0",
|
||||
"raw-loader": "^0.5.1",
|
||||
"rc-queue-anim": "^1.4.0",
|
||||
"rc-table": "^6.1.0",
|
||||
"rc-queue-anim": "^1.6.10",
|
||||
"rc-table": "^6.4.3",
|
||||
"rc-util": "^4.3.0",
|
||||
"react": "^16.7.0",
|
||||
"react-addons-shallow-compare": "^15.6.2",
|
||||
"react-collapse": "^4.0.3",
|
||||
"react-color": "^2.13.8",
|
||||
"react-color": "^2.17.0",
|
||||
"react-compound-timer": "^1.0.7",
|
||||
"react-confirm": "^0.1.16",
|
||||
"react-dom": "^16.7.0",
|
||||
|
|
@ -107,10 +107,10 @@
|
|||
"react-grid-gallery": "^0.5.2",
|
||||
"react-handsontable": "^0.3.1",
|
||||
"react-helmet": "^5.2.0",
|
||||
"react-hot-loader": "^4.3.11",
|
||||
"react-hot-loader": "^4.6.3",
|
||||
"react-images": "^0.5.13",
|
||||
"react-infinite-scroller": "^1.1.3",
|
||||
"react-intl": "^2.4.0",
|
||||
"react-infinite-scroller": "^1.2.4",
|
||||
"react-intl": "^2.8.0",
|
||||
"react-loader-advanced": "^1.7.1",
|
||||
"react-mapbox-gl": "^3.3.0",
|
||||
"react-markdown": "^3.1.0",
|
||||
|
|
@ -119,44 +119,44 @@
|
|||
"react-native-vector-icons": "^5.0.0",
|
||||
"react-number-format": "^3.0.3",
|
||||
"react-prop-types": "^0.4.0",
|
||||
"react-responsive-carousel": "^3.1.30",
|
||||
"react-responsive-carousel": "^3.1.46",
|
||||
"react-router": "^4.2.0",
|
||||
"react-router-dom": "^4.2.2",
|
||||
"react-scroll-horizontal": "^1.1.3",
|
||||
"react-scroll-horizontal": "^1.6.2",
|
||||
"react-slick": "^0.23.2",
|
||||
"react-sortable-hoc": "^0.8.3",
|
||||
"react-swipeable-views": "^0.13.0",
|
||||
"react-swipeable-views": "^0.13.1",
|
||||
"react-tap-event-plugin": "^3.0.2",
|
||||
"react-transition-group": "^2.2.1",
|
||||
"react-transition-group": "^2.5.3",
|
||||
"reactcss": "^1.2.3",
|
||||
"recharts": "^1.0.0-beta.6",
|
||||
"rimraf": "^2.6.2",
|
||||
"sass": "^1.15.1",
|
||||
"recharts": "^1.4.2",
|
||||
"rimraf": "^2.6.3",
|
||||
"sass": "^1.16.1",
|
||||
"slick-carousel": "^1.8.1",
|
||||
"snapsvg": "^0.5.1",
|
||||
"symlink-or-copy": "^1.2.0",
|
||||
"thumb-express": "0.0.2",
|
||||
"uglifyjs-webpack-plugin": "^2.0.1",
|
||||
"uglifyjs-webpack-plugin": "^2.1.1",
|
||||
"uuid": "^3.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.0.0",
|
||||
"@babel/core": "^7.2.0",
|
||||
"@babel/node": "^7.0.0",
|
||||
"@babel/plugin-proposal-class-properties": "^7.0.0",
|
||||
"@babel/plugin-proposal-decorators": "^7.0.0",
|
||||
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
|
||||
"@babel/cli": "^7.2.3",
|
||||
"@babel/core": "^7.2.2",
|
||||
"@babel/node": "^7.2.2",
|
||||
"@babel/plugin-proposal-class-properties": "^7.3.0",
|
||||
"@babel/plugin-proposal-decorators": "^7.3.0",
|
||||
"@babel/plugin-proposal-object-rest-spread": "^7.3.1",
|
||||
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
|
||||
"@babel/plugin-transform-arrow-functions": "^7.0.0",
|
||||
"@babel/plugin-transform-react-constant-elements": "^7.2.0",
|
||||
"@babel/plugin-transform-runtime": "^7.0.0",
|
||||
"@babel/polyfill": "^7.0.0",
|
||||
"@babel/preset-env": "^7.0.0",
|
||||
"@babel/polyfill": "^7.2.5",
|
||||
"@babel/preset-env": "^7.3.1",
|
||||
"@babel/preset-react": "^7.0.0",
|
||||
"@babel/preset-stage-0": "^7.0.0",
|
||||
"@babel/register": "^7.0.0",
|
||||
"@babel/runtime": "^7.0.0",
|
||||
"babel-loader": "^8.0.0",
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"babel-loader": "^8.0.5",
|
||||
"babel-plugin-import": "^1.8.0",
|
||||
"babel-plugin-lodash": "^3.3.2",
|
||||
"babel-plugin-react-transform": "^3.0.0",
|
||||
|
|
@ -168,13 +168,13 @@
|
|||
"extract-text-webpack-plugin": "^4.0.0-beta.0",
|
||||
"file-loader": "^2.0.0",
|
||||
"gulp-util": "^3.0.8",
|
||||
"happypack": "^5.0.0",
|
||||
"happypack": "^5.0.1",
|
||||
"has-flag": "^3.0.0",
|
||||
"html-webpack-plugin": "^3.2.0",
|
||||
"less-loader": "^4.1.0",
|
||||
"medium-button": "^1.1.4",
|
||||
"mini-css-extract-plugin": "^0.4.3",
|
||||
"node-sass": "^4.9.3",
|
||||
"node-sass": "^4.11.0",
|
||||
"npm-run-all": "^4.1.2",
|
||||
"on-build-webpack": "^0.1.0",
|
||||
"optimize-css-assets-webpack-plugin": "^5.0.1",
|
||||
|
|
@ -183,11 +183,11 @@
|
|||
"script-ext-html-webpack-plugin": "^2.0.1",
|
||||
"style-loader": "^0.23.0",
|
||||
"url-loader": "^1.1.1",
|
||||
"webpack": "^4.17.1",
|
||||
"webpack-cli": "^3.1.0",
|
||||
"webpack-dev-middleware": "^3.2.0",
|
||||
"webpack-dev-server": "^3.1.7",
|
||||
"webpack": "^4.29.0",
|
||||
"webpack-cli": "^3.2.1",
|
||||
"webpack-dev-middleware": "^3.5.1",
|
||||
"webpack-dev-server": "^3.1.14",
|
||||
"webpack-hot-middleware": "^2.21.0",
|
||||
"webpack-livereload-plugin": "^2.1.1"
|
||||
"webpack-livereload-plugin": "^2.2.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>BTN</title>
|
||||
<meta id="viewport" name="viewport" content="width=1280">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<link rel="icon" type="image/png" href="/assets/images/logo-bankbtn.png" sizes="96x96" />
|
||||
<style>
|
||||
body {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>BTN</title>
|
||||
<meta id="viewport" name="viewport" content="width=1280">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<link rel="icon" type="image/png" href="/assets/images/logo-bankbtn.png" sizes="96x96" />
|
||||
<style>
|
||||
body {
|
||||
|
|
|
|||
|
|
@ -29,13 +29,13 @@ imageUrl = "https://giift-api.asacreative.com";
|
|||
|
||||
type = 'localhost';
|
||||
if(window.location.href.includes("localhost") || window.location.href.includes("marketplace-store")){
|
||||
appUrl = 'http://localhost:7700';
|
||||
apiUrl = "http://localhost:4001/"
|
||||
// appUrl = 'http://localhost:7700';
|
||||
// apiUrl = "http://localhost:4001/"
|
||||
}else{
|
||||
appUrl = 'https://sillyfish.asacreative.com';
|
||||
}
|
||||
|
||||
export const APP_TYPE = 'giift';
|
||||
export const APP_TYPE = 'btn';
|
||||
|
||||
export const appConfig = {
|
||||
apiUrl: apiUrl,
|
||||
|
|
|
|||
|
|
@ -322,7 +322,8 @@ export default class App extends React.Component {
|
|||
|
||||
const {userData} = this.appstate;
|
||||
// const applicationIcon = (this.settingStore.isIconEmpty) ? "/assets/images/bankbtn.png" : this.http.appendImagePath(this.settingStore.setting.icon);
|
||||
let applicationIcon = "http://giift.asacreative.com/giift_logo_wide.4d15de72.png";
|
||||
// let applicationIcon = "http://giift.asacreative.com/giift_logo_wide.4d15de72.png";
|
||||
let applicationIcon = require('../../../../assets/images/logo_new.png');
|
||||
let applicationName = 'Giift';
|
||||
if(APP_TYPE === 'btn') {
|
||||
applicationIcon = "http://btn-redemption-2.bangun-kreatif.com/dr6u0fppdi4xy.cloudfront.net/FilesDirectory/Albilad/ImgIconImage/logo-btn.png";
|
||||
|
|
@ -379,8 +380,8 @@ export default class App extends React.Component {
|
|||
.bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}>
|
||||
<img
|
||||
style={{
|
||||
width: 150,
|
||||
height: 50
|
||||
width: 100,
|
||||
height: 30
|
||||
}}
|
||||
src={applicationIcon}/>
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -62,6 +62,7 @@ import DataTab from '../Data';
|
|||
import LayoutTab from '../Layout';
|
||||
import ContentTab from '../Content';
|
||||
import TransactionPage from "../Transaction";
|
||||
import VoucherStepperComponent from "../Vouchers/Stepper";
|
||||
|
||||
export default class ComponentName extends React.Component {
|
||||
constructor(props) {
|
||||
|
|
@ -87,6 +88,7 @@ export default class ComponentName extends React.Component {
|
|||
<Route exact component={CarSearch} path={LINKS.CAR_SEARCH}/>
|
||||
<Route exact component={ItemsComponent} path={LINKS.ITEMS}/>
|
||||
<Route exact component={VouchersComponent} path={LINKS.VOUCHERS}/>
|
||||
<Route exact component={VoucherStepperComponent} path={LINKS.VOUCHER_STEPPER}/>
|
||||
<Route exact component={VerifyVouchers} path={LINKS.VERIFY_VOUCHERS}/>
|
||||
<Route exact component={CheckoutVouchers} path={LINKS.CHECKOUT_VOUCHERS}/>
|
||||
<Route exact component={PaymentVouchers} path={LINKS.PAYMENT_VOUCHERS}/>
|
||||
|
|
|
|||
|
|
@ -55,10 +55,10 @@
|
|||
}
|
||||
|
||||
.mainContent {
|
||||
width: calc(100vw - 14vw);
|
||||
margin-left: 2.5vw;
|
||||
margin-right: 2.5vw;
|
||||
position: relative;
|
||||
//width: calc(100vw - 14vw);
|
||||
//margin-left: 2.5vw;
|
||||
//margin-right: 2.5vw;
|
||||
//position: relative;
|
||||
}
|
||||
@media screen and (max-width: 780px) {
|
||||
.mainContent {
|
||||
|
|
@ -135,7 +135,7 @@
|
|||
width: 100%;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
background-color: #f1f5f9 !important;
|
||||
background-color: #ffeb3b !important;
|
||||
height: 70px !important;
|
||||
padding: 8px 24px;
|
||||
border-bottom: 1px solid rgb(223, 223, 223);
|
||||
|
|
|
|||
|
|
@ -1,14 +1,15 @@
|
|||
import React from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import {inject, observer} from "mobx-react";
|
||||
import withStyles from "@material-ui/core/styles/withStyles";
|
||||
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,
|
||||
|
|
@ -24,13 +25,17 @@ 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 MuiCardActions} from '@material-ui/core/CardActions';
|
||||
import {default as MuiCardButton} from '@material-ui/core/Button';
|
||||
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,12 +45,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";
|
||||
|
||||
const {
|
||||
LineChart,
|
||||
|
|
@ -65,7 +72,7 @@ const {
|
|||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class DashboardComponent extends React.Component {
|
||||
class DashboardComponent extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
|
@ -74,18 +81,18 @@ export default class DashboardComponent extends React.Component {
|
|||
modalTopup: false,
|
||||
data: {
|
||||
name: '',
|
||||
background_color_1:'',
|
||||
background_color_2:'',
|
||||
background_color_1: '',
|
||||
background_color_2: '',
|
||||
images: {
|
||||
logo:''
|
||||
logo: ''
|
||||
},
|
||||
description: '',
|
||||
additional_data: {
|
||||
information:''
|
||||
information: ''
|
||||
},
|
||||
sku: [
|
||||
{
|
||||
id:'',
|
||||
id: '',
|
||||
name: '',
|
||||
price: ''
|
||||
},
|
||||
|
|
@ -104,6 +111,7 @@ export default class DashboardComponent extends React.Component {
|
|||
};
|
||||
|
||||
render() {
|
||||
const {classes} = this.props;
|
||||
const settings = {
|
||||
arrows: true,
|
||||
infinite: true,
|
||||
|
|
@ -114,120 +122,117 @@ export default class DashboardComponent extends React.Component {
|
|||
};
|
||||
|
||||
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">
|
||||
<Grid className={classes.root}>
|
||||
<Grid
|
||||
container
|
||||
direction="row"
|
||||
justify="center"
|
||||
alignItems="center"
|
||||
spacing={24}
|
||||
style={{marginTop: 30}}>
|
||||
<Grid item xs={12} 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={(0).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={12} sm={3} md={3} lg={3}>
|
||||
{this.props.appstate.wallet.data.wallet ? (
|
||||
<MuiCard className={classes.card}>
|
||||
<MuiCardContent>
|
||||
<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 '}/> */}
|
||||
<NumberFormat value={(0).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>
|
||||
) : ''}
|
||||
|
||||
{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}}>
|
||||
}}> 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)}>
|
||||
{/* <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}}>
|
||||
</div>
|
||||
</MuiCardContent>
|
||||
</MuiCard>
|
||||
) : ''}
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={3} md={3} lg={3}>
|
||||
{this.props.appstate.wallet.data.wallet ? (
|
||||
<MuiCard className={classes.card}>
|
||||
<MuiCardContent>
|
||||
<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)}>
|
||||
{/* <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>
|
||||
</MuiCardContent>
|
||||
</MuiCard>
|
||||
) : ''}
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid
|
||||
container
|
||||
direction="row"
|
||||
justify="center"
|
||||
alignItems="center"
|
||||
spacing={24}
|
||||
style={{marginTop: 30}}>
|
||||
|
||||
|
||||
|
||||
<div style={{ marginLeft: '10%', marginRight: '10%', marginTop: 20, flexGrow: 1, minHeight: window.innerHeight - 70, backgroundColor: '#fff' }}>
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
</Grid>
|
||||
|
||||
<div>
|
||||
<Grid container spacing={0} style={{}}>
|
||||
{/* <Grid item xs={12}>
|
||||
<Grid item xs={12} sm={12} md={12} lg={12}>
|
||||
{/* <Grid item xs={12}>
|
||||
<div>
|
||||
<div className="row">
|
||||
<div className="col l12 m12 s12 padding">
|
||||
<h3>
|
||||
Popular Items
|
||||
</h3>
|
||||
</h3>
|
||||
<Row gutter={10}>
|
||||
<PopularItemCardComponent />
|
||||
<PopularItemCardComponent/>
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -239,52 +244,54 @@ export default class DashboardComponent extends React.Component {
|
|||
<div className="col l12 m12 s12 padding">
|
||||
<h3>
|
||||
New Products
|
||||
</h3>
|
||||
</h3>
|
||||
<Row gutter={10}>
|
||||
<NewItemCardComponent />
|
||||
<NewItemCardComponent/>
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Grid> */}
|
||||
<Grid item xs={12}>
|
||||
<div className={"voucher"} style={{ marginTop: 0 }}>
|
||||
<div className="row">
|
||||
<div className="col l12 m12 s12 padding">
|
||||
<h3>
|
||||
Voucher & Gift Card
|
||||
|
||||
<Grid item xs={12}>
|
||||
<div className={"voucher"} style={{marginTop: 0}}>
|
||||
<div className="row">
|
||||
<div className="col l12 m12 s12 padding">
|
||||
<h3>
|
||||
Voucher & Gift Card
|
||||
</h3>
|
||||
|
||||
<Row gutter={10}>
|
||||
<Row gutter={10}>
|
||||
{
|
||||
( 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"/>
|
||||
)
|
||||
(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>
|
||||
</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})}
|
||||
/>
|
||||
</div>
|
||||
<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>
|
||||
</Grid>
|
||||
</div>
|
||||
</Grid>
|
||||
</div>
|
||||
</div>
|
||||
<ModalTopupComponent onOk={() => this.setModalTopup(false)} onCancel={() => this.setModalTopup(false)} isVisible={this.state.modalTopup} />
|
||||
</div>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<ModalTopupComponent onOk={() => this.setModalTopup(false)} onCancel={() => this.setModalTopup(false)} isVisible={this.state.modalTopup}/>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withStyles(styles)(DashboardComponent);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import { Affix, Card, Slider, Select, Row, Col, Icon, Tag,Rate, Button, Checkbox
|
|||
import {startCase} from 'lodash';
|
||||
import LoadingDialog from "../../LoadingDialog";
|
||||
import Loader from 'react-loader-advanced';
|
||||
import './style.scss';
|
||||
import {DIALOG} from "../../../stores/global_ui";
|
||||
import EmptyComponent from '../../EmptyComponent';
|
||||
import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
|
||||
|
|
@ -32,105 +33,92 @@ export default class CheckoutVouchers extends React.Component {
|
|||
}
|
||||
|
||||
componentDidMount() {
|
||||
console.log("skuid",this.vouchersStore.skuId);
|
||||
console.log("skuName",this.vouchersStore.skuName);
|
||||
console.log("skuPrice",this.vouchersStore.skuPrice);
|
||||
console.log("data",this.vouchersStore.dataItems);
|
||||
console.log(this.vouchersStore)
|
||||
// console.log("skuid",this.vouchersStore.skuId);
|
||||
// console.log("skuName",this.vouchersStore.skuName);
|
||||
// console.log("skuPrice",this.vouchersStore.skuPrice);
|
||||
// console.log("data",this.vouchersStore.dataItems);
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
let image = get(this.vouchersStore.dataItems, 'images.logo', '');
|
||||
const logoUrl = (this.props.vouchersStore.dataItems.images.logo) ? get(this.vouchersStore.dataItems, 'images.logo', '') : 'http://lorempixel.com/400/200';
|
||||
|
||||
let image = logoUrl;
|
||||
|
||||
if (!image.includes('http')) {
|
||||
image = this.http.appendImagePath(image);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="wallet containerMiddle">
|
||||
<div className="row">
|
||||
<div className="row">
|
||||
<div className="col s0 m3 l3" />
|
||||
<div className="col s12 m6 l6">
|
||||
<div className="row">
|
||||
<FlatButton
|
||||
className="headerMenu"
|
||||
hoverColor="#f1f5f9"
|
||||
style={{ background: '#ffffff00' }}
|
||||
onClick={() => this.props.history.goBack()}
|
||||
label="Back"
|
||||
primary={true}
|
||||
icon={<NavigationArrowBack />}
|
||||
/>
|
||||
<Divider style={{marginBottom:10,marginTop:10}} />
|
||||
<Card
|
||||
// title={<div style={{display:'flex',justifyContent:'center'}}>
|
||||
// <p style={{fontSize:20}}>
|
||||
// Detail Pembelian
|
||||
// </p>
|
||||
// </div>}
|
||||
>
|
||||
<div className="">
|
||||
<div style={{display:'flex',justifyContent:'center'}}>
|
||||
<h3 style={{fontSize:18}}>
|
||||
Detail Pembelian
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<Divider style={{marginBottom:10,marginTop:10}} />
|
||||
<div className="row" style={{marginTop:30}}>
|
||||
<div className="col s5 m5 l5">
|
||||
<div style={{display:'flex',justifyContent:'center',alignItems:'center'}}>
|
||||
<img className={'imageCard'} src={this.http.appendImagePath(image)} />
|
||||
{/* <Avatar size={74} src={this.http.appendImagePath(this.vouchersStore.dataItems.images.logo)} /> */}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col s4 m7 l7">
|
||||
<div style={{alignItems:'center'}}>
|
||||
<Row>
|
||||
<div className="col s12 m6 6">
|
||||
<h3>Jenis Layanan :</h3>
|
||||
</div>
|
||||
<div className="col s12 m6 6">
|
||||
<h3 style={{color:''}}>{this.vouchersStore.dataItems.name} {this.vouchersStore.skuName}</h3>
|
||||
</div>
|
||||
</Row>
|
||||
<Row>
|
||||
<div className="col s12 m6 6">
|
||||
<h3>Point :</h3>
|
||||
</div>
|
||||
<div className="col s12 m6 6">
|
||||
<h3 style={{color:'#FF6F00'}}>{(+this.vouchersStore.skuPrice).toFixed(0)} Points</h3>
|
||||
</div>
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="row">
|
||||
<Card >
|
||||
<div className="row">
|
||||
<div style={{display:'flex',justifyContent:'space-between'}}>
|
||||
<h3 style={{color:''}}>Point</h3>
|
||||
<h3 style={{color:'#FF6F00'}}>{this.props.appstate.wallet.data.point} Points</h3>
|
||||
</div>
|
||||
</div>
|
||||
<Divider style={{marginBottom:10,marginTop:10}} />
|
||||
<div className="row">
|
||||
<div style={{display:'flex',justifyContent:'space-between'}}>
|
||||
<h3>Total Pembayaran Point</h3>
|
||||
<h3 style={{color:'#FF6F00'}}>{(+this.vouchersStore.skuPrice).toFixed(0)} Points</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<Button type="primary" block onClick={() => this.props.history.push(LINKS.PAYMENT_VOUCHERS)}>Lanjut</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<Card>
|
||||
<div className="">
|
||||
<div style={{display:'flex',justifyContent:'center'}}>
|
||||
<h3 style={{fontSize:18}}>
|
||||
Detail Pembelian
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col s0 m3 l3" />
|
||||
<Divider style={{marginBottom:10,marginTop:10}} />
|
||||
<div className="row" style={{marginTop:30}}>
|
||||
<div className="col s12 m5 l5">
|
||||
<div style={{display:'flex',justifyContent:'center',alignItems:'center'}}>
|
||||
<img className={'imageCard'} src={image} />
|
||||
{/* <Avatar size={74} src={this.http.appendImagePath(this.props.vouchersStore.dataItems.images.logo)} /> */}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col s12 m7 l7">
|
||||
<div style={{alignItems:'center', justifyContent: 'center'}}>
|
||||
<Row>
|
||||
<div className="col s4 m4">
|
||||
<h3>Jenis Layanan</h3>
|
||||
</div>
|
||||
<div className="col s1 m1">
|
||||
<h3>:</h3>
|
||||
</div>
|
||||
<div className="col s7 m7">
|
||||
<h3 style={{color:'#FF6F00'}}>{this.props.vouchersStore.dataItems.name} - {this.props.vouchersStore.skuName}</h3>
|
||||
</div>
|
||||
</Row>
|
||||
<Row>
|
||||
<div className="col s4 m4">
|
||||
<h3>Point</h3>
|
||||
</div>
|
||||
<div className="col s1 m1">
|
||||
<h3>:</h3>
|
||||
</div>
|
||||
<div className="col s7 m7">
|
||||
<h3 style={{color:'#FF6F00'}}>{(+this.props.vouchersStore.skuPrice || 0).toFixed(0)} Points</h3>
|
||||
</div>
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<Card >
|
||||
<div className="row">
|
||||
<div style={{display:'flex',justifyContent:'space-between'}}>
|
||||
<h3 style={{color:''}}>Point</h3>
|
||||
<h3 style={{color:'#FF6F00'}}>{this.props.appstate.wallet.data.point || 0} Points</h3>
|
||||
</div>
|
||||
</div>
|
||||
<Divider style={{marginBottom:10,marginTop:10}} />
|
||||
<div className="row">
|
||||
<div style={{display:'flex',justifyContent:'space-between'}}>
|
||||
<h3>Total Pembayaran Point</h3>
|
||||
<h3 style={{color:'#FF6F00'}}>{(+this.props.vouchersStore.skuPrice || 0).toFixed(0)} Points</h3>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="row">
|
||||
{this.props.button()}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
4
src/common/pages/Vouchers/Checkout/style.scss
Normal file
4
src/common/pages/Vouchers/Checkout/style.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
.imageCard{
|
||||
max-width: 20vw;
|
||||
max-height: 20vw;
|
||||
}
|
||||
64
src/common/pages/Vouchers/Finish/index.js
Normal file
64
src/common/pages/Vouchers/Finish/index.js
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
import React from 'react';
|
||||
import {inject, observer} from 'mobx-react';
|
||||
import {
|
||||
FlatButton,
|
||||
Divider
|
||||
} from 'material-ui';
|
||||
import {Card} from 'antd';
|
||||
import {startCase} from 'lodash';
|
||||
import './style.scss';
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class FinishVouchers extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
value: 1,
|
||||
};
|
||||
this.defaultState = Object.assign({}, this.state);
|
||||
this.http = props.appstate.http;
|
||||
this.authStore = props.appstate.auth;
|
||||
this.globalUI = props.appstate.globalUI;
|
||||
this.vouchersStore = props.appstate.vouchers;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
console.log(this.vouchersStore)
|
||||
// console.log("skuid",this.vouchersStore.skuId);
|
||||
// console.log("skuName",this.vouchersStore.skuName);
|
||||
// console.log("skuPrice",this.vouchersStore.skuPrice);
|
||||
// console.log("data",this.vouchersStore.dataItems);
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
return (
|
||||
<div className="row">
|
||||
<div className="row">
|
||||
<Card>
|
||||
<div className="">
|
||||
<div style={{display:'flex',justifyContent:'center'}}>
|
||||
<h3 style={{fontSize:18}}>
|
||||
Berhasil menukarkan voucher
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<Divider style={{marginBottom:10,marginTop:10}} />
|
||||
<div className="row" style={{marginTop:30}}>
|
||||
<div className="col s12">
|
||||
<div className={'textContainer'}>
|
||||
<p>Anda akan dialihkan ke page voucher dengan menekan tombol finish dibawah ini. Selamat Berbelanja!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="row">
|
||||
{this.props.button()}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
4
src/common/pages/Vouchers/Finish/style.scss
Normal file
4
src/common/pages/Vouchers/Finish/style.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
.textContainer{
|
||||
text-align: center;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
|
@ -152,7 +152,7 @@ export default class ModalVouchersComponent extends React.Component {
|
|||
this.vouchersStore.skuName = this.state.skuName;
|
||||
this.vouchersStore.skuPrice = this.state.skuPrice;
|
||||
console.log('enak',this.state);
|
||||
history.push(LINKS.VERIFY_VOUCHERS);
|
||||
history.push(LINKS.VOUCHER_STEPPER);
|
||||
}}
|
||||
type="primary"
|
||||
disabled={this.state.buttonDisbaled}
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ export default class PaymentVouchers extends React.Component {
|
|||
});
|
||||
};
|
||||
|
||||
const price = (+this.vouchersStore.skuPrice).toFixed(0);
|
||||
const price = (+this.props.vouchersStore.skuPrice).toFixed(0);
|
||||
const qty = 1;
|
||||
const total = price * qty;
|
||||
|
||||
|
|
@ -58,8 +58,72 @@ export default class PaymentVouchers extends React.Component {
|
|||
applicationLogo = 'http://btn-redemption-2.bangun-kreatif.com/dr6u0fppdi4xy.cloudfront.net/FilesDirectory/Albilad/ImgIconImage/logo-btn.png';
|
||||
}
|
||||
|
||||
return(
|
||||
<div>
|
||||
<div className="row">
|
||||
<Collapse bordered={true}>
|
||||
<Panel style={{backgroundColor:'white'}} showArrow={false} header={
|
||||
<div style={{display:'flex',justifyContent:'space-between', paddingRight:20, paddingLeft:15}}>
|
||||
<h3 style={{color:'#FF6F00'}}>
|
||||
{price} Points
|
||||
</h3>
|
||||
<h3 style={{color:'#6772e5'}}>
|
||||
Detail Tagihan
|
||||
</h3>
|
||||
</div>
|
||||
} key="1">
|
||||
<Row>
|
||||
<div style={{display:'flex',justifyContent:'space-between', paddingLeft:24}}>
|
||||
<p>{this.props.vouchersStore.dataItems.name} - {this.props.vouchersStore.skuName}</p>
|
||||
<p>{price} Points</p>
|
||||
</div>
|
||||
</Row>
|
||||
<Row>
|
||||
<div style={{display:'flex',justifyContent:'space-between', paddingLeft:24}}>
|
||||
<p>{qty} x {price} Points</p>
|
||||
<p>{total} Points</p>
|
||||
</div>
|
||||
</Row>
|
||||
<Divider dashed={true} />
|
||||
<Row>
|
||||
<div style={{display:'flex',justifyContent:'space-between', paddingLeft:24}}>
|
||||
<p>Tagihan</p>
|
||||
<p>{total} Points</p>
|
||||
</div>
|
||||
</Row>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
</div>
|
||||
<div className="row">
|
||||
<Card title={<div style={{display:'flex',justifyContent:'space-between'}}>
|
||||
<div>
|
||||
<h3 style={{fontSize:20}}>
|
||||
Points {applicationName}
|
||||
</h3>
|
||||
</div>
|
||||
<div>
|
||||
<img style={{width:120, height:40}} src={applicationLogo} />
|
||||
</div>
|
||||
</div>}>
|
||||
<div className="row">
|
||||
<Alert message="Pastikan data anda sudah terverivikasi dan vouchers anda yang pilih sudah benar sebelum melakukan transaksi" type="warning" />
|
||||
</div>
|
||||
<div>
|
||||
<ul>
|
||||
<li style={{margin:10}}>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</li>
|
||||
<li style={{margin:10}}>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="row">
|
||||
{this.props.button()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="wallet containerMiddle">
|
||||
<div className="wallet containerMiddle">
|
||||
<div className="row">
|
||||
<div className="col s0 m2 l2" />
|
||||
<div className="col s12 m8 l8">
|
||||
|
|
|
|||
186
src/common/pages/Vouchers/Stepper/index.js
Normal file
186
src/common/pages/Vouchers/Stepper/index.js
Normal file
|
|
@ -0,0 +1,186 @@
|
|||
import {inject, observer} from "mobx-react";
|
||||
import React from "react";
|
||||
import './style.scss';
|
||||
import {
|
||||
Step,
|
||||
Stepper,
|
||||
StepLabel,
|
||||
} from 'material-ui/Stepper';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
|
||||
import {Divider} from "material-ui";
|
||||
import CheckoutVouchers from "../Checkout";
|
||||
import PaymentVouchers from "../Payment";
|
||||
import {LINKS} from "../../../routes";
|
||||
import {notification, Modal} from "antd";
|
||||
import FinishVouchers from "../Finish";
|
||||
|
||||
const confirm = Modal.confirm;
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class VoucherStepperComponent extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
finished: false,
|
||||
stepIndex: 0,
|
||||
};
|
||||
this.defaultState = Object.assign({}, this.state);
|
||||
this.http = props.appstate.http;
|
||||
this.authStore = props.appstate.auth;
|
||||
this.globalUI = props.appstate.globalUI;
|
||||
this.vouchersStore = props.appstate.vouchers;
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
if(!this.vouchersStore.dataItems.name){
|
||||
// alert('jalan')
|
||||
this.props.history.push(LINKS.VOUCHERS);
|
||||
}
|
||||
// alert('engga')
|
||||
}
|
||||
|
||||
handleNext = () => {
|
||||
const {stepIndex} = this.state;
|
||||
|
||||
if(stepIndex === 1){
|
||||
confirm({
|
||||
title: 'Anda yakin mau menukarkan voucher?',
|
||||
content: 'Sistem akan langsung memotong point anda ketika anda menekan tombol konfirmasi dibawah.',
|
||||
onOk: () => {
|
||||
this.vouchersStore.buyVoucher(this.vouchersStore.skuId)
|
||||
.then(res => {
|
||||
const openNotificationWithIcon = (type) => {
|
||||
notification[type]({
|
||||
message: 'Berhasil',
|
||||
description: `Selamat anda telah mendapatkan vouchers ${this.vouchersStore.dataItems.name} - ${this.vouchersStore.skuName}`,
|
||||
placement:'topRight',
|
||||
duration: 5,
|
||||
});
|
||||
};
|
||||
this.globalUI.hideDialogLoading();
|
||||
// this.props.history.push(LINKS.TRANSACTION)
|
||||
openNotificationWithIcon('success');
|
||||
this.setState({
|
||||
stepIndex: stepIndex + 1,
|
||||
finished: stepIndex >= 2,
|
||||
});
|
||||
})
|
||||
.catch(err => {
|
||||
this.globalUI.openSnackbar(err.message);
|
||||
console.error(err, 'ini errornya');
|
||||
});
|
||||
},
|
||||
onCancel: () => {},
|
||||
});
|
||||
}else if(stepIndex === 2){
|
||||
this.props.history.push(LINKS.TRANSACTION);
|
||||
}else{
|
||||
this.setState({
|
||||
stepIndex: stepIndex + 1,
|
||||
finished: stepIndex >= 2,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
handlePrev = () => {
|
||||
const {stepIndex} = this.state;
|
||||
if (stepIndex > 0) {
|
||||
this.setState({stepIndex: stepIndex - 1});
|
||||
}
|
||||
};
|
||||
|
||||
renderButton = () => {
|
||||
return(
|
||||
<div style={{width: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'space-between', marginTop: 12,}}>
|
||||
<FlatButton
|
||||
label="Back"
|
||||
disabled={this.state.stepIndex === 2}
|
||||
onClick={(this.state.stepIndex === 0) ? () => this.props.history.goBack() : this.handlePrev}
|
||||
style={{marginRight: 12}}
|
||||
/>
|
||||
<RaisedButton
|
||||
label={this.state.stepIndex === 2 ? 'Finish' : 'Next'}
|
||||
primary={true}
|
||||
onClick={this.handleNext}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
getStepContent(stepIndex) {
|
||||
switch (stepIndex) {
|
||||
case 0:
|
||||
return <CheckoutVouchers button={this.renderButton} vouchersStore={this.vouchersStore} />;
|
||||
case 1:
|
||||
return <PaymentVouchers button={this.renderButton} vouchersStore={this.vouchersStore}/>;
|
||||
case 2:
|
||||
return <FinishVouchers button={this.renderButton}/>;
|
||||
default:
|
||||
return 'You\'re a long way from home sonny jim!';
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const {finished, stepIndex} = this.state;
|
||||
const contentStyle = {margin: '0 16px'};
|
||||
|
||||
if(!this.vouchersStore.dataItems.name){
|
||||
return <div></div>
|
||||
}
|
||||
|
||||
return(
|
||||
<div className={'stepper'}>
|
||||
{/*<div className={'divider-container'}>*/}
|
||||
{/*<FlatButton*/}
|
||||
{/*className="headerMenu"*/}
|
||||
{/*hoverColor="#f1f5f9"*/}
|
||||
{/*style={{ background: '#ffffff00' }}*/}
|
||||
{/*onClick={() => this.props.history.goBack()}*/}
|
||||
{/*label="Back"*/}
|
||||
{/*primary={true}*/}
|
||||
{/*icon={<NavigationArrowBack />}*/}
|
||||
{/*/>*/}
|
||||
{/*<Divider style={{marginBottom:10,marginTop:10}} />*/}
|
||||
{/*</div>*/}
|
||||
<div className={'stepper-container'}>
|
||||
<Stepper activeStep={stepIndex}>
|
||||
<Step>
|
||||
<StepLabel>Checkout your Voucher</StepLabel>
|
||||
</Step>
|
||||
<Step>
|
||||
<StepLabel>Process your Payment</StepLabel>
|
||||
</Step>
|
||||
<Step>
|
||||
<StepLabel>Finish</StepLabel>
|
||||
</Step>
|
||||
</Stepper>
|
||||
<Divider style={{marginBottom:10,marginTop:10}} />
|
||||
<div style={contentStyle}>
|
||||
{finished ? (
|
||||
<p>
|
||||
<a
|
||||
href="#"
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
this.setState({stepIndex: 0, finished: false});
|
||||
}}
|
||||
>
|
||||
Click here
|
||||
</a> to reset the example.
|
||||
</p>
|
||||
) : (
|
||||
<div>
|
||||
<p>{this.getStepContent(stepIndex)}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
9
src/common/pages/Vouchers/Stepper/style.scss
Normal file
9
src/common/pages/Vouchers/Stepper/style.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
.stepper{
|
||||
margin-top: 5vh;
|
||||
.divider-container{
|
||||
max-width: 65vw;
|
||||
}
|
||||
.stepper-container{
|
||||
max-width: 65vw;
|
||||
}
|
||||
}
|
||||
|
|
@ -118,7 +118,8 @@ export const LINKS = {
|
|||
PAYMENT_VOUCHERS: '/app/vouchers/payment',
|
||||
CART_DETAIL: '/app/cart',
|
||||
TRANSACTION: '/app/transaction',
|
||||
OTP : '/login/otp'
|
||||
OTP : '/login/otp',
|
||||
VOUCHER_STEPPER: '/app/vouchers/buy',
|
||||
};
|
||||
|
||||
@inject('appstate')
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user