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",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@firebase/app": "^0.3.4",
|
"@firebase/app": "^0.3.8",
|
||||||
"@material-ui/core": "^3.9.1",
|
"@material-ui/core": "^3.9.1",
|
||||||
"@material-ui/icons": "^3.0.2",
|
"@material-ui/icons": "^3.0.2",
|
||||||
"@material-ui/styles": "^3.0.0-alpha.2",
|
"@material-ui/styles": "^3.0.0-alpha.2",
|
||||||
"@mdi/font": "^2.3.54",
|
"@mdi/font": "^2.3.54",
|
||||||
"antd": "^3.9.3",
|
"antd": "^3.13.0",
|
||||||
"async-validator": "^1.8.2",
|
"async-validator": "^1.10.1",
|
||||||
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
|
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
|
||||||
"babel-plugin-transform-react-constant-elements": "^6.23.0",
|
"babel-plugin-transform-react-constant-elements": "^6.23.0",
|
||||||
"babel-preset-es2015": "^6.24.1",
|
"babel-preset-es2015": "^6.24.1",
|
||||||
"bind-decorator": "^1.0.11",
|
"bind-decorator": "^1.0.11",
|
||||||
"butter-toast": "^3.0.3",
|
"butter-toast": "^3.2.1",
|
||||||
"cinnamon-sugar": "^1.0.0",
|
"cinnamon-sugar": "^1.0.0",
|
||||||
"compression": "^1.7.1",
|
"compression": "^1.7.1",
|
||||||
"cors": "^2.8.4",
|
"cors": "^2.8.4",
|
||||||
"cross-spawn": "^6.0.5",
|
"cross-spawn": "^6.0.5",
|
||||||
"css-hot-loader": "^1.3.4",
|
"css-hot-loader": "^1.4.3",
|
||||||
"cssnano": "^4.1.0",
|
"cssnano": "^4.1.8",
|
||||||
"debug": "^4.0.1",
|
"debug": "^4.1.1",
|
||||||
"decimal.js-light": "^2.3.1",
|
"decimal.js-light": "^2.3.1",
|
||||||
"exenv": "^1.2.2",
|
"exenv": "^1.2.2",
|
||||||
"express": "^4.16.2",
|
"express": "^4.16.2",
|
||||||
"faker": "^4.1.0",
|
"faker": "^4.1.0",
|
||||||
"feather-icons": "^4.7.3",
|
"feather-icons": "^4.12.1",
|
||||||
"feather-icons-react": "^0.2.0",
|
"feather-icons-react": "^0.2.0",
|
||||||
"file-loader": "^1.1.5",
|
"file-loader": "^1.1.5",
|
||||||
"firebase": "^5.7.2",
|
"firebase": "^5.8.1",
|
||||||
"frappe-gantt": "0.3.0",
|
"frappe-gantt": "0.3.0",
|
||||||
"froala-editor": "^2.8.4",
|
"froala-editor": "^2.8.4",
|
||||||
"fs-extra-promise": "^1.0.1",
|
"fs-extra-promise": "^1.0.1",
|
||||||
|
|
@ -80,21 +80,21 @@
|
||||||
"material-design-icons": "^3.0.1",
|
"material-design-icons": "^3.0.1",
|
||||||
"material-ui": "^0.20.0",
|
"material-ui": "^0.20.0",
|
||||||
"material-ui-community-icons": "^0.15.0",
|
"material-ui-community-icons": "^0.15.0",
|
||||||
"mobx": "^5.1.2",
|
"mobx": "^5.9.0",
|
||||||
"mobx-localstorage": "^1.0.0",
|
"mobx-localstorage": "^1.0.0",
|
||||||
"mobx-react": "^5.2.8",
|
"mobx-react": "^5.4.3",
|
||||||
"mobx-react-devtools": "^6.0.3",
|
"mobx-react-devtools": "^6.0.3",
|
||||||
"moment": "^2.19.3",
|
"moment": "^2.24.0",
|
||||||
"nwbuild": "0.0.5",
|
"nwbuild": "0.0.5",
|
||||||
"parcel-bundler": "^1.10.3",
|
"parcel-bundler": "^1.11.0",
|
||||||
"raw-loader": "^0.5.1",
|
"raw-loader": "^0.5.1",
|
||||||
"rc-queue-anim": "^1.4.0",
|
"rc-queue-anim": "^1.6.10",
|
||||||
"rc-table": "^6.1.0",
|
"rc-table": "^6.4.3",
|
||||||
"rc-util": "^4.3.0",
|
"rc-util": "^4.3.0",
|
||||||
"react": "^16.7.0",
|
"react": "^16.7.0",
|
||||||
"react-addons-shallow-compare": "^15.6.2",
|
"react-addons-shallow-compare": "^15.6.2",
|
||||||
"react-collapse": "^4.0.3",
|
"react-collapse": "^4.0.3",
|
||||||
"react-color": "^2.13.8",
|
"react-color": "^2.17.0",
|
||||||
"react-compound-timer": "^1.0.7",
|
"react-compound-timer": "^1.0.7",
|
||||||
"react-confirm": "^0.1.16",
|
"react-confirm": "^0.1.16",
|
||||||
"react-dom": "^16.7.0",
|
"react-dom": "^16.7.0",
|
||||||
|
|
@ -107,10 +107,10 @@
|
||||||
"react-grid-gallery": "^0.5.2",
|
"react-grid-gallery": "^0.5.2",
|
||||||
"react-handsontable": "^0.3.1",
|
"react-handsontable": "^0.3.1",
|
||||||
"react-helmet": "^5.2.0",
|
"react-helmet": "^5.2.0",
|
||||||
"react-hot-loader": "^4.3.11",
|
"react-hot-loader": "^4.6.3",
|
||||||
"react-images": "^0.5.13",
|
"react-images": "^0.5.13",
|
||||||
"react-infinite-scroller": "^1.1.3",
|
"react-infinite-scroller": "^1.2.4",
|
||||||
"react-intl": "^2.4.0",
|
"react-intl": "^2.8.0",
|
||||||
"react-loader-advanced": "^1.7.1",
|
"react-loader-advanced": "^1.7.1",
|
||||||
"react-mapbox-gl": "^3.3.0",
|
"react-mapbox-gl": "^3.3.0",
|
||||||
"react-markdown": "^3.1.0",
|
"react-markdown": "^3.1.0",
|
||||||
|
|
@ -119,44 +119,44 @@
|
||||||
"react-native-vector-icons": "^5.0.0",
|
"react-native-vector-icons": "^5.0.0",
|
||||||
"react-number-format": "^3.0.3",
|
"react-number-format": "^3.0.3",
|
||||||
"react-prop-types": "^0.4.0",
|
"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": "^4.2.0",
|
||||||
"react-router-dom": "^4.2.2",
|
"react-router-dom": "^4.2.2",
|
||||||
"react-scroll-horizontal": "^1.1.3",
|
"react-scroll-horizontal": "^1.6.2",
|
||||||
"react-slick": "^0.23.2",
|
"react-slick": "^0.23.2",
|
||||||
"react-sortable-hoc": "^0.8.3",
|
"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-tap-event-plugin": "^3.0.2",
|
||||||
"react-transition-group": "^2.2.1",
|
"react-transition-group": "^2.5.3",
|
||||||
"reactcss": "^1.2.3",
|
"reactcss": "^1.2.3",
|
||||||
"recharts": "^1.0.0-beta.6",
|
"recharts": "^1.4.2",
|
||||||
"rimraf": "^2.6.2",
|
"rimraf": "^2.6.3",
|
||||||
"sass": "^1.15.1",
|
"sass": "^1.16.1",
|
||||||
"slick-carousel": "^1.8.1",
|
"slick-carousel": "^1.8.1",
|
||||||
"snapsvg": "^0.5.1",
|
"snapsvg": "^0.5.1",
|
||||||
"symlink-or-copy": "^1.2.0",
|
"symlink-or-copy": "^1.2.0",
|
||||||
"thumb-express": "0.0.2",
|
"thumb-express": "0.0.2",
|
||||||
"uglifyjs-webpack-plugin": "^2.0.1",
|
"uglifyjs-webpack-plugin": "^2.1.1",
|
||||||
"uuid": "^3.1.0"
|
"uuid": "^3.1.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/cli": "^7.0.0",
|
"@babel/cli": "^7.2.3",
|
||||||
"@babel/core": "^7.2.0",
|
"@babel/core": "^7.2.2",
|
||||||
"@babel/node": "^7.0.0",
|
"@babel/node": "^7.2.2",
|
||||||
"@babel/plugin-proposal-class-properties": "^7.0.0",
|
"@babel/plugin-proposal-class-properties": "^7.3.0",
|
||||||
"@babel/plugin-proposal-decorators": "^7.0.0",
|
"@babel/plugin-proposal-decorators": "^7.3.0",
|
||||||
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
|
"@babel/plugin-proposal-object-rest-spread": "^7.3.1",
|
||||||
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
|
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
|
||||||
"@babel/plugin-transform-arrow-functions": "^7.0.0",
|
"@babel/plugin-transform-arrow-functions": "^7.0.0",
|
||||||
"@babel/plugin-transform-react-constant-elements": "^7.2.0",
|
"@babel/plugin-transform-react-constant-elements": "^7.2.0",
|
||||||
"@babel/plugin-transform-runtime": "^7.0.0",
|
"@babel/plugin-transform-runtime": "^7.0.0",
|
||||||
"@babel/polyfill": "^7.0.0",
|
"@babel/polyfill": "^7.2.5",
|
||||||
"@babel/preset-env": "^7.0.0",
|
"@babel/preset-env": "^7.3.1",
|
||||||
"@babel/preset-react": "^7.0.0",
|
"@babel/preset-react": "^7.0.0",
|
||||||
"@babel/preset-stage-0": "^7.0.0",
|
"@babel/preset-stage-0": "^7.0.0",
|
||||||
"@babel/register": "^7.0.0",
|
"@babel/register": "^7.0.0",
|
||||||
"@babel/runtime": "^7.0.0",
|
"@babel/runtime": "^7.3.1",
|
||||||
"babel-loader": "^8.0.0",
|
"babel-loader": "^8.0.5",
|
||||||
"babel-plugin-import": "^1.8.0",
|
"babel-plugin-import": "^1.8.0",
|
||||||
"babel-plugin-lodash": "^3.3.2",
|
"babel-plugin-lodash": "^3.3.2",
|
||||||
"babel-plugin-react-transform": "^3.0.0",
|
"babel-plugin-react-transform": "^3.0.0",
|
||||||
|
|
@ -168,13 +168,13 @@
|
||||||
"extract-text-webpack-plugin": "^4.0.0-beta.0",
|
"extract-text-webpack-plugin": "^4.0.0-beta.0",
|
||||||
"file-loader": "^2.0.0",
|
"file-loader": "^2.0.0",
|
||||||
"gulp-util": "^3.0.8",
|
"gulp-util": "^3.0.8",
|
||||||
"happypack": "^5.0.0",
|
"happypack": "^5.0.1",
|
||||||
"has-flag": "^3.0.0",
|
"has-flag": "^3.0.0",
|
||||||
"html-webpack-plugin": "^3.2.0",
|
"html-webpack-plugin": "^3.2.0",
|
||||||
"less-loader": "^4.1.0",
|
"less-loader": "^4.1.0",
|
||||||
"medium-button": "^1.1.4",
|
"medium-button": "^1.1.4",
|
||||||
"mini-css-extract-plugin": "^0.4.3",
|
"mini-css-extract-plugin": "^0.4.3",
|
||||||
"node-sass": "^4.9.3",
|
"node-sass": "^4.11.0",
|
||||||
"npm-run-all": "^4.1.2",
|
"npm-run-all": "^4.1.2",
|
||||||
"on-build-webpack": "^0.1.0",
|
"on-build-webpack": "^0.1.0",
|
||||||
"optimize-css-assets-webpack-plugin": "^5.0.1",
|
"optimize-css-assets-webpack-plugin": "^5.0.1",
|
||||||
|
|
@ -183,11 +183,11 @@
|
||||||
"script-ext-html-webpack-plugin": "^2.0.1",
|
"script-ext-html-webpack-plugin": "^2.0.1",
|
||||||
"style-loader": "^0.23.0",
|
"style-loader": "^0.23.0",
|
||||||
"url-loader": "^1.1.1",
|
"url-loader": "^1.1.1",
|
||||||
"webpack": "^4.17.1",
|
"webpack": "^4.29.0",
|
||||||
"webpack-cli": "^3.1.0",
|
"webpack-cli": "^3.2.1",
|
||||||
"webpack-dev-middleware": "^3.2.0",
|
"webpack-dev-middleware": "^3.5.1",
|
||||||
"webpack-dev-server": "^3.1.7",
|
"webpack-dev-server": "^3.1.14",
|
||||||
"webpack-hot-middleware": "^2.21.0",
|
"webpack-hot-middleware": "^2.21.0",
|
||||||
"webpack-livereload-plugin": "^2.1.1"
|
"webpack-livereload-plugin": "^2.2.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>BTN</title>
|
<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" />
|
<link rel="icon" type="image/png" href="/assets/images/logo-bankbtn.png" sizes="96x96" />
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>BTN</title>
|
<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" />
|
<link rel="icon" type="image/png" href="/assets/images/logo-bankbtn.png" sizes="96x96" />
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
|
|
|
||||||
|
|
@ -29,13 +29,13 @@ imageUrl = "https://giift-api.asacreative.com";
|
||||||
|
|
||||||
type = 'localhost';
|
type = 'localhost';
|
||||||
if(window.location.href.includes("localhost") || window.location.href.includes("marketplace-store")){
|
if(window.location.href.includes("localhost") || window.location.href.includes("marketplace-store")){
|
||||||
appUrl = 'http://localhost:7700';
|
// appUrl = 'http://localhost:7700';
|
||||||
apiUrl = "http://localhost:4001/"
|
// apiUrl = "http://localhost:4001/"
|
||||||
}else{
|
}else{
|
||||||
appUrl = 'https://sillyfish.asacreative.com';
|
appUrl = 'https://sillyfish.asacreative.com';
|
||||||
}
|
}
|
||||||
|
|
||||||
export const APP_TYPE = 'giift';
|
export const APP_TYPE = 'btn';
|
||||||
|
|
||||||
export const appConfig = {
|
export const appConfig = {
|
||||||
apiUrl: apiUrl,
|
apiUrl: apiUrl,
|
||||||
|
|
|
||||||
|
|
@ -322,7 +322,8 @@ export default class App extends React.Component {
|
||||||
|
|
||||||
const {userData} = this.appstate;
|
const {userData} = this.appstate;
|
||||||
// const applicationIcon = (this.settingStore.isIconEmpty) ? "/assets/images/bankbtn.png" : this.http.appendImagePath(this.settingStore.setting.icon);
|
// 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';
|
let applicationName = 'Giift';
|
||||||
if(APP_TYPE === 'btn') {
|
if(APP_TYPE === 'btn') {
|
||||||
applicationIcon = "http://btn-redemption-2.bangun-kreatif.com/dr6u0fppdi4xy.cloudfront.net/FilesDirectory/Albilad/ImgIconImage/logo-btn.png";
|
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}>
|
.bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}>
|
||||||
<img
|
<img
|
||||||
style={{
|
style={{
|
||||||
width: 150,
|
width: 100,
|
||||||
height: 50
|
height: 30
|
||||||
}}
|
}}
|
||||||
src={applicationIcon}/>
|
src={applicationIcon}/>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
|
||||||
|
|
@ -62,6 +62,7 @@ import DataTab from '../Data';
|
||||||
import LayoutTab from '../Layout';
|
import LayoutTab from '../Layout';
|
||||||
import ContentTab from '../Content';
|
import ContentTab from '../Content';
|
||||||
import TransactionPage from "../Transaction";
|
import TransactionPage from "../Transaction";
|
||||||
|
import VoucherStepperComponent from "../Vouchers/Stepper";
|
||||||
|
|
||||||
export default class ComponentName extends React.Component {
|
export default class ComponentName extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
|
|
@ -87,6 +88,7 @@ export default class ComponentName extends React.Component {
|
||||||
<Route exact component={CarSearch} path={LINKS.CAR_SEARCH}/>
|
<Route exact component={CarSearch} path={LINKS.CAR_SEARCH}/>
|
||||||
<Route exact component={ItemsComponent} path={LINKS.ITEMS}/>
|
<Route exact component={ItemsComponent} path={LINKS.ITEMS}/>
|
||||||
<Route exact component={VouchersComponent} path={LINKS.VOUCHERS}/>
|
<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={VerifyVouchers} path={LINKS.VERIFY_VOUCHERS}/>
|
||||||
<Route exact component={CheckoutVouchers} path={LINKS.CHECKOUT_VOUCHERS}/>
|
<Route exact component={CheckoutVouchers} path={LINKS.CHECKOUT_VOUCHERS}/>
|
||||||
<Route exact component={PaymentVouchers} path={LINKS.PAYMENT_VOUCHERS}/>
|
<Route exact component={PaymentVouchers} path={LINKS.PAYMENT_VOUCHERS}/>
|
||||||
|
|
|
||||||
|
|
@ -55,10 +55,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.mainContent {
|
.mainContent {
|
||||||
width: calc(100vw - 14vw);
|
//width: calc(100vw - 14vw);
|
||||||
margin-left: 2.5vw;
|
//margin-left: 2.5vw;
|
||||||
margin-right: 2.5vw;
|
//margin-right: 2.5vw;
|
||||||
position: relative;
|
//position: relative;
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 780px) {
|
@media screen and (max-width: 780px) {
|
||||||
.mainContent {
|
.mainContent {
|
||||||
|
|
@ -135,7 +135,7 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
background-color: #f1f5f9 !important;
|
background-color: #ffeb3b !important;
|
||||||
height: 70px !important;
|
height: 70px !important;
|
||||||
padding: 8px 24px;
|
padding: 8px 24px;
|
||||||
border-bottom: 1px solid rgb(223, 223, 223);
|
border-bottom: 1px solid rgb(223, 223, 223);
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,15 @@
|
||||||
import React from "react";
|
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 QueueAnim from 'rc-queue-anim';
|
||||||
import "./style.scss";
|
import "./style.scss";
|
||||||
import NumberFormat from 'react-number-format';
|
import NumberFormat from 'react-number-format';
|
||||||
import { LINKS } from './../../routes'
|
import {LINKS} from './../../routes'
|
||||||
import { Link } from 'react-router-dom';
|
import {Link} from 'react-router-dom';
|
||||||
import CardAdmin from './CardAdmin';
|
import CardAdmin from './CardAdmin';
|
||||||
import CardAgent from './CardAgent';
|
import CardAgent from './CardAgent';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import { Icon, Button, notification, Table, Tooltip as TooltipAntd, Col, Row, } from 'antd';
|
import {Icon, Button, notification, Table, Tooltip as TooltipAntd, Col, Row,} from 'antd';
|
||||||
import DC from 'decimal.js-light';
|
import DC from 'decimal.js-light';
|
||||||
import {
|
import {
|
||||||
Paper,
|
Paper,
|
||||||
|
|
@ -24,13 +25,17 @@ import {
|
||||||
Divider, ListItem, List
|
Divider, ListItem, List
|
||||||
} from 'material-ui';
|
} from 'material-ui';
|
||||||
import Grid from '@material-ui/core/Grid';
|
import Grid from '@material-ui/core/Grid';
|
||||||
|
import {default as MuiCard} from '@material-ui/core/Card'
|
||||||
|
import {default as 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 EmptyComponent from '../EmptyComponent';
|
||||||
import * as _ from 'lodash';
|
import * as _ from 'lodash';
|
||||||
import { grey400, darkBlack, lightBlack, black } from 'material-ui/styles/colors';
|
import {grey400, darkBlack, lightBlack, black} from 'material-ui/styles/colors';
|
||||||
import './style.scss';
|
import './style.scss';
|
||||||
import { Carousel } from 'react-responsive-carousel'
|
import {Carousel} from 'react-responsive-carousel'
|
||||||
import { ActionGrade, ContentDrafts, ContentInbox, ContentSend } from "material-ui/svg-icons/index";
|
import {ActionGrade, ContentDrafts, ContentInbox, ContentSend} from "material-ui/svg-icons/index";
|
||||||
import { constant } from "../../config/const";
|
import {constant} from "../../config/const";
|
||||||
import Slider from "react-slick";
|
import Slider from "react-slick";
|
||||||
import 'slick-carousel/slick/slick.css';
|
import 'slick-carousel/slick/slick.css';
|
||||||
import 'slick-carousel/slick/slick-theme.css';
|
import 'slick-carousel/slick/slick-theme.css';
|
||||||
|
|
@ -40,12 +45,14 @@ import slider2 from '../../../../assets/images/slider/2.jpg';
|
||||||
import slider3 from '../../../../assets/images/slider/3.jpg';
|
import slider3 from '../../../../assets/images/slider/3.jpg';
|
||||||
import slider4 from '../../../../assets/images/slider/4.jpg';
|
import slider4 from '../../../../assets/images/slider/4.jpg';
|
||||||
import slider5 from '../../../../assets/images/slider/5.jpg';
|
import slider5 from '../../../../assets/images/slider/5.jpg';
|
||||||
import { ItemCard } from "../Vouchers/ItemCard";
|
import {ItemCard} from "../Vouchers/ItemCard";
|
||||||
import ModalVouchersComponent from "../Vouchers/Modal";
|
import ModalVouchersComponent from "../Vouchers/Modal";
|
||||||
import PopularItemCardComponent from "./PopularItemCard";
|
import PopularItemCardComponent from "./PopularItemCard";
|
||||||
import NewItemCardComponent from "./NewItemCard";
|
import NewItemCardComponent from "./NewItemCard";
|
||||||
import '../Vouchers/style.scss';
|
import '../Vouchers/style.scss';
|
||||||
import ModalTopupComponent from "../Wallet/Modal";
|
import ModalTopupComponent from "../Wallet/Modal";
|
||||||
|
import Typography from '@material-ui/core/Typography';
|
||||||
|
import {styles} from "../RegisterNew/styles";
|
||||||
|
|
||||||
const {
|
const {
|
||||||
LineChart,
|
LineChart,
|
||||||
|
|
@ -65,7 +72,7 @@ const {
|
||||||
|
|
||||||
@inject('appstate')
|
@inject('appstate')
|
||||||
@observer
|
@observer
|
||||||
export default class DashboardComponent extends React.Component {
|
class DashboardComponent extends React.Component {
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
@ -74,18 +81,18 @@ export default class DashboardComponent extends React.Component {
|
||||||
modalTopup: false,
|
modalTopup: false,
|
||||||
data: {
|
data: {
|
||||||
name: '',
|
name: '',
|
||||||
background_color_1:'',
|
background_color_1: '',
|
||||||
background_color_2:'',
|
background_color_2: '',
|
||||||
images: {
|
images: {
|
||||||
logo:''
|
logo: ''
|
||||||
},
|
},
|
||||||
description: '',
|
description: '',
|
||||||
additional_data: {
|
additional_data: {
|
||||||
information:''
|
information: ''
|
||||||
},
|
},
|
||||||
sku: [
|
sku: [
|
||||||
{
|
{
|
||||||
id:'',
|
id: '',
|
||||||
name: '',
|
name: '',
|
||||||
price: ''
|
price: ''
|
||||||
},
|
},
|
||||||
|
|
@ -104,6 +111,7 @@ export default class DashboardComponent extends React.Component {
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
const {classes} = this.props;
|
||||||
const settings = {
|
const settings = {
|
||||||
arrows: true,
|
arrows: true,
|
||||||
infinite: true,
|
infinite: true,
|
||||||
|
|
@ -114,120 +122,117 @@ export default class DashboardComponent extends React.Component {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<Grid className={classes.root}>
|
||||||
<div className="dashboard animated fadeIn" style={{marginLeft: '8%',marginRight:'7%'}}>
|
<Grid
|
||||||
<div className="row ">
|
container
|
||||||
<div className="col s12 m12 l12 col-leftDashboard" style={{ marginBottom: 0 }}>
|
direction="row"
|
||||||
<div className="row no-margin">
|
justify="center"
|
||||||
{this.props.appstate.wallet.data.wallet ? (
|
alignItems="center"
|
||||||
<div className="col s12 m4 l4" style={{ marginBottom: 0 }}>
|
spacing={24}
|
||||||
<Card className="cardLite cardDashboard">
|
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={{
|
<h3 style={{
|
||||||
display: 'block',
|
display: 'block',
|
||||||
fontSize: '1rem',
|
fontSize: '1rem',
|
||||||
textTransform: 'uppercase',
|
textTransform: 'uppercase',
|
||||||
color: '#0006',
|
color: '#0006',
|
||||||
letterSpacing: 1
|
letterSpacing: 1
|
||||||
}}>Voucher</h3>
|
}}> Profile</h3>
|
||||||
<div className="value">
|
<div className="value">Please complete your profile</div>
|
||||||
{/* <NumberFormat value={(this.props.appstate.wallet.data.wallet).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/> */}
|
<div style={{marginTop: 10}}>
|
||||||
<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}}>
|
|
||||||
<Button type="primary" icon="edit">Edit Profile</Button>
|
<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>
|
<span>Edit Profile</span>
|
||||||
<Icon className="ml-8" type="right" />
|
<Icon className="ml-8" type="right" />
|
||||||
</a> */}
|
</a> */}
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</MuiCardContent>
|
||||||
</div>
|
</MuiCard>
|
||||||
) : ''}
|
) : ''}
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={12} sm={3} md={3} lg={3}>
|
||||||
{this.props.appstate.wallet.data.wallet ? (
|
{this.props.appstate.wallet.data.wallet ? (
|
||||||
<div className="col s12 m4 l4" style={{ marginBottom: 0 }}>
|
<MuiCard className={classes.card}>
|
||||||
<Card className="cardLite cardDashboard">
|
<MuiCardContent>
|
||||||
<h3 style={{
|
<h3 style={{
|
||||||
display: 'block',
|
display: 'block',
|
||||||
fontSize: '1rem',
|
fontSize: '1rem',
|
||||||
textTransform: 'uppercase',
|
textTransform: 'uppercase',
|
||||||
color: '#0006',
|
color: '#0006',
|
||||||
letterSpacing: 1
|
letterSpacing: 1
|
||||||
}}>Credit Card</h3>
|
}}>Credit Card</h3>
|
||||||
<div className="value ">Please add your credit card</div>
|
<div className="value ">Please add your credit card</div>
|
||||||
<div style={{marginTop:10}}>
|
<div style={{marginTop: 10}}>
|
||||||
<Button type="primary" icon="plus">Add Credit Card</Button>
|
<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>
|
<span>Add Credit Car</span>
|
||||||
<Icon className="ml-8" type="right" />
|
<Icon className="ml-8" type="right" />
|
||||||
</a> */}
|
</a> */}
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</MuiCardContent>
|
||||||
</div>
|
</MuiCard>
|
||||||
) : ''}
|
) : ''}
|
||||||
</div>
|
</Grid>
|
||||||
</div>
|
</Grid>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<Grid
|
||||||
|
container
|
||||||
|
direction="row"
|
||||||
|
justify="center"
|
||||||
|
alignItems="center"
|
||||||
|
spacing={24}
|
||||||
|
style={{marginTop: 30}}>
|
||||||
|
|
||||||
|
<Grid item xs={12} sm={12} md={12} lg={12}>
|
||||||
|
|
||||||
<div style={{ marginLeft: '10%', marginRight: '10%', marginTop: 20, flexGrow: 1, minHeight: window.innerHeight - 70, backgroundColor: '#fff' }}>
|
|
||||||
<div>
|
|
||||||
<Slider {...settings}>
|
<Slider {...settings}>
|
||||||
<div>
|
<div>
|
||||||
<img src={slider1} width={'100%'} />
|
<img src={slider1} width={'100%'}/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<img src={slider2} width={'100%'} />
|
<img src={slider2} width={'100%'}/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<img src={slider3} width={'100%'} />
|
<img src={slider3} width={'100%'}/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<img src={slider4} width={'100%'} />
|
<img src={slider4} width={'100%'}/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<img src={slider5} width={'100%'} />
|
<img src={slider5} width={'100%'}/>
|
||||||
</div>
|
</div>
|
||||||
</Slider>
|
</Slider>
|
||||||
</div>
|
</Grid>
|
||||||
|
|
||||||
<div>
|
<Grid item xs={12} sm={12} md={12} lg={12}>
|
||||||
<Grid container spacing={0} style={{}}>
|
{/* <Grid item xs={12}>
|
||||||
{/* <Grid item xs={12}>
|
|
||||||
<div>
|
<div>
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col l12 m12 s12 padding">
|
<div className="col l12 m12 s12 padding">
|
||||||
<h3>
|
<h3>
|
||||||
Popular Items
|
Popular Items
|
||||||
</h3>
|
</h3>
|
||||||
<Row gutter={10}>
|
<Row gutter={10}>
|
||||||
<PopularItemCardComponent />
|
<PopularItemCardComponent/>
|
||||||
</Row>
|
</Row>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -239,52 +244,54 @@ export default class DashboardComponent extends React.Component {
|
||||||
<div className="col l12 m12 s12 padding">
|
<div className="col l12 m12 s12 padding">
|
||||||
<h3>
|
<h3>
|
||||||
New Products
|
New Products
|
||||||
</h3>
|
</h3>
|
||||||
<Row gutter={10}>
|
<Row gutter={10}>
|
||||||
<NewItemCardComponent />
|
<NewItemCardComponent/>
|
||||||
</Row>
|
</Row>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Grid> */}
|
</Grid> */}
|
||||||
<Grid item xs={12}>
|
|
||||||
<div className={"voucher"} style={{ marginTop: 0 }}>
|
<Grid item xs={12}>
|
||||||
<div className="row">
|
<div className={"voucher"} style={{marginTop: 0}}>
|
||||||
<div className="col l12 m12 s12 padding">
|
<div className="row">
|
||||||
<h3>
|
<div className="col l12 m12 s12 padding">
|
||||||
Voucher & Gift Card
|
<h3>
|
||||||
|
Voucher & Gift Card
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
<Row gutter={10}>
|
<Row gutter={10}>
|
||||||
{
|
{
|
||||||
( this.vouchersStore.list.length > 0) ?
|
(this.vouchersStore.list.length > 0) ?
|
||||||
this.vouchersStore.list.map((item, index) => {
|
this.vouchersStore.list.map((item, index) => {
|
||||||
return (<Col onClick={() => this.setState({isOpened: true, data: item})} key={index} span={6}>
|
return (<Col onClick={() => this.setState({isOpened: true, data: item})} key={index} span={6}>
|
||||||
<ItemCard data={item}/>
|
<ItemCard data={item}/>
|
||||||
</Col>)
|
</Col>)
|
||||||
})
|
})
|
||||||
: (
|
: (
|
||||||
<EmptyComponent type="default4" header="" content="There is no voucher in sight"/>
|
<EmptyComponent type="default4" header="" content="There is no voucher in sight"/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
</Row>
|
</Row>
|
||||||
|
|
||||||
<ModalVouchersComponent
|
<ModalVouchersComponent
|
||||||
title={this.state.data.name+' Vouchers'}
|
title={this.state.data.name + ' Vouchers'}
|
||||||
data={this.state.data}
|
data={this.state.data}
|
||||||
isVisible={this.state.isOpened}
|
isVisible={this.state.isOpened}
|
||||||
onOk={() => this.setState({isOpened: false})}
|
onOk={() => this.setState({isOpened: false})}
|
||||||
onCancel={() => this.setState({isOpened: false})}
|
onCancel={() => this.setState({isOpened: false})}
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Grid>
|
</div>
|
||||||
</Grid>
|
</Grid>
|
||||||
</div>
|
</Grid>
|
||||||
</div>
|
</Grid>
|
||||||
<ModalTopupComponent onOk={() => this.setModalTopup(false)} onCancel={() => this.setModalTopup(false)} isVisible={this.state.modalTopup} />
|
<ModalTopupComponent onOk={() => this.setModalTopup(false)} onCancel={() => this.setModalTopup(false)} isVisible={this.state.modalTopup}/>
|
||||||
</div>
|
</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 {startCase} from 'lodash';
|
||||||
import LoadingDialog from "../../LoadingDialog";
|
import LoadingDialog from "../../LoadingDialog";
|
||||||
import Loader from 'react-loader-advanced';
|
import Loader from 'react-loader-advanced';
|
||||||
|
import './style.scss';
|
||||||
import {DIALOG} from "../../../stores/global_ui";
|
import {DIALOG} from "../../../stores/global_ui";
|
||||||
import EmptyComponent from '../../EmptyComponent';
|
import EmptyComponent from '../../EmptyComponent';
|
||||||
import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
|
import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
|
||||||
|
|
@ -32,105 +33,92 @@ export default class CheckoutVouchers extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
console.log("skuid",this.vouchersStore.skuId);
|
console.log(this.vouchersStore)
|
||||||
console.log("skuName",this.vouchersStore.skuName);
|
// console.log("skuid",this.vouchersStore.skuId);
|
||||||
console.log("skuPrice",this.vouchersStore.skuPrice);
|
// console.log("skuName",this.vouchersStore.skuName);
|
||||||
console.log("data",this.vouchersStore.dataItems);
|
// console.log("skuPrice",this.vouchersStore.skuPrice);
|
||||||
|
// console.log("data",this.vouchersStore.dataItems);
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
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')) {
|
if (!image.includes('http')) {
|
||||||
image = this.http.appendImagePath(image);
|
image = this.http.appendImagePath(image);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="wallet containerMiddle">
|
<div className="row">
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col s0 m3 l3" />
|
<Card>
|
||||||
<div className="col s12 m6 l6">
|
<div className="">
|
||||||
<div className="row">
|
<div style={{display:'flex',justifyContent:'center'}}>
|
||||||
<FlatButton
|
<h3 style={{fontSize:18}}>
|
||||||
className="headerMenu"
|
Detail Pembelian
|
||||||
hoverColor="#f1f5f9"
|
</h3>
|
||||||
style={{ background: '#ffffff00' }}
|
</div>
|
||||||
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>
|
|
||||||
</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>
|
<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.skuName = this.state.skuName;
|
||||||
this.vouchersStore.skuPrice = this.state.skuPrice;
|
this.vouchersStore.skuPrice = this.state.skuPrice;
|
||||||
console.log('enak',this.state);
|
console.log('enak',this.state);
|
||||||
history.push(LINKS.VERIFY_VOUCHERS);
|
history.push(LINKS.VOUCHER_STEPPER);
|
||||||
}}
|
}}
|
||||||
type="primary"
|
type="primary"
|
||||||
disabled={this.state.buttonDisbaled}
|
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 qty = 1;
|
||||||
const total = price * qty;
|
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';
|
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 (
|
return (
|
||||||
<div className="wallet containerMiddle">
|
<div className="wallet containerMiddle">
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col s0 m2 l2" />
|
<div className="col s0 m2 l2" />
|
||||||
<div className="col s12 m8 l8">
|
<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',
|
PAYMENT_VOUCHERS: '/app/vouchers/payment',
|
||||||
CART_DETAIL: '/app/cart',
|
CART_DETAIL: '/app/cart',
|
||||||
TRANSACTION: '/app/transaction',
|
TRANSACTION: '/app/transaction',
|
||||||
OTP : '/login/otp'
|
OTP : '/login/otp',
|
||||||
|
VOUCHER_STEPPER: '/app/vouchers/buy',
|
||||||
};
|
};
|
||||||
|
|
||||||
@inject('appstate')
|
@inject('appstate')
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user