update: redeem voucher step
This commit is contained in:
Rifqy Zacky Ariadhy
parent
d0d20f0d2a
commit
dab57e2c88
191
package-lock.json
generated
191
package-lock.json
generated
|
|
@ -1128,6 +1128,11 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"@emotion/hash": {
|
||||
"version": "0.7.1",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.7.1.tgz",
|
||||
"integrity": "sha512-OYpa/Sg+2GDX+jibUfpZVn1YqSVRpYmTLF2eyAfrFTIJSbwyIrc+YscayoykvaOME/wV4BV0Sa0yqdMrgse6mA=="
|
||||
},
|
||||
"@firebase/app": {
|
||||
"version": "0.3.5",
|
||||
"resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.3.5.tgz",
|
||||
|
|
@ -1397,6 +1402,79 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"@material-ui/icons": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-3.0.2.tgz",
|
||||
"integrity": "sha512-QY/3gJnObZQ3O/e6WjH+0ah2M3MOgLOzCy8HTUoUx9B6dDrS18vP7Ycw3qrDEKlB6q1KNxy6CZHm5FCauWGy2g==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.2.0",
|
||||
"recompose": "0.28.0 - 0.30.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"recompose": {
|
||||
"version": "0.30.0",
|
||||
"resolved": "https://registry.npmjs.org/recompose/-/recompose-0.30.0.tgz",
|
||||
"integrity": "sha512-ZTrzzUDa9AqUIhRk4KmVFihH0rapdCSMFXjhHbNrjAWxBuUD/guYlyysMnuHjlZC/KRiOKRtB4jf96yYSkKE8w==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.0.0",
|
||||
"change-emitter": "^0.1.2",
|
||||
"fbjs": "^0.8.1",
|
||||
"hoist-non-react-statics": "^2.3.1",
|
||||
"react-lifecycles-compat": "^3.0.2",
|
||||
"symbol-observable": "^1.0.4"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@material-ui/styles": {
|
||||
"version": "3.0.0-alpha.9",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-3.0.0-alpha.9.tgz",
|
||||
"integrity": "sha512-1AmmTj82ip4Sp3XTTFQklkh+mnjQAtSIpqkGpKsAbS/XCG8X13/qUJ4AWlwC/OOPBLJl85Hm2jVUXhmAidD6bg==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.2.0",
|
||||
"@emotion/hash": "^0.7.1",
|
||||
"@material-ui/utils": "^3.0.0-alpha.2",
|
||||
"classnames": "^2.2.5",
|
||||
"deepmerge": "^3.0.0",
|
||||
"hoist-non-react-statics": "^3.2.1",
|
||||
"jss": "^10.0.0-alpha.7",
|
||||
"jss-plugin-camel-case": "^10.0.0-alpha.7",
|
||||
"jss-plugin-default-unit": "^10.0.0-alpha.7",
|
||||
"jss-plugin-global": "^10.0.0-alpha.7",
|
||||
"jss-plugin-nested": "^10.0.0-alpha.7",
|
||||
"jss-plugin-props-sort": "^10.0.0-alpha.7",
|
||||
"jss-plugin-rule-value-function": "^10.0.0-alpha.7",
|
||||
"jss-plugin-vendor-prefixer": "^10.0.0-alpha.7",
|
||||
"prop-types": "^15.6.0",
|
||||
"warning": "^4.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"hoist-non-react-statics": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz",
|
||||
"integrity": "sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==",
|
||||
"requires": {
|
||||
"react-is": "^16.7.0"
|
||||
}
|
||||
},
|
||||
"jss": {
|
||||
"version": "10.0.0-alpha.9",
|
||||
"resolved": "https://registry.npmjs.org/jss/-/jss-10.0.0-alpha.9.tgz",
|
||||
"integrity": "sha512-emGhSk/Vp4GoNL1Oex/YJXk/G3wMsh9TbFQ6dZ5lazQmFwBAoWC5K0CVL8N3aJqq2k6WO9rcVUL371pHGp3IPQ==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.0.0",
|
||||
"is-in-browser": "^1.1.3",
|
||||
"symbol-observable": "^1.2.0",
|
||||
"tiny-warning": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"react-is": {
|
||||
"version": "16.7.0",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.7.0.tgz",
|
||||
"integrity": "sha512-Z0VRQdF4NPDoI0tsXVMLkJLiwEBa+RP66g0xDHxgxysxSoCUccSten4RTF/UFvZF1dZvZ9Zu1sx+MDXwcOR34g=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"@material-ui/system": {
|
||||
"version": "3.0.0-alpha.2",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/system/-/system-3.0.0-alpha.2.tgz",
|
||||
|
|
@ -5731,6 +5809,10 @@
|
|||
"resolved": "https://registry.npmjs.org/expect.js/-/expect.js-0.2.0.tgz",
|
||||
"integrity": "sha1-EChTPSwcNj90pnlv9X7AUg3tK+E="
|
||||
},
|
||||
"exploder": {
|
||||
"version": "git://github.com/cezary/exploder.git#721e1a2f777ff5dafe853981ca21b8874aae1fb0",
|
||||
"from": "git://github.com/cezary/exploder.git"
|
||||
},
|
||||
"express": {
|
||||
"version": "4.16.4",
|
||||
"resolved": "https://registry.npmjs.org/express/-/express-4.16.4.tgz",
|
||||
|
|
@ -6414,13 +6496,11 @@
|
|||
},
|
||||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
|
|
@ -6433,18 +6513,15 @@
|
|||
},
|
||||
"code-point-at": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
|
|
@ -6547,8 +6624,7 @@
|
|||
},
|
||||
"inherits": {
|
||||
"version": "2.0.3",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
|
|
@ -6558,7 +6634,6 @@
|
|||
"is-fullwidth-code-point": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"number-is-nan": "^1.0.0"
|
||||
}
|
||||
|
|
@ -6571,20 +6646,17 @@
|
|||
"minimatch": {
|
||||
"version": "3.0.4",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
},
|
||||
"minimist": {
|
||||
"version": "0.0.8",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"minipass": {
|
||||
"version": "2.2.4",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safe-buffer": "^5.1.1",
|
||||
"yallist": "^3.0.0"
|
||||
|
|
@ -6601,7 +6673,6 @@
|
|||
"mkdirp": {
|
||||
"version": "0.5.1",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8"
|
||||
}
|
||||
|
|
@ -6674,8 +6745,7 @@
|
|||
},
|
||||
"number-is-nan": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
|
|
@ -6685,7 +6755,6 @@
|
|||
"once": {
|
||||
"version": "1.4.0",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"wrappy": "1"
|
||||
}
|
||||
|
|
@ -6791,7 +6860,6 @@
|
|||
"string-width": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"code-point-at": "^1.0.0",
|
||||
"is-fullwidth-code-point": "^1.0.0",
|
||||
|
|
@ -9490,6 +9558,75 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"jss-plugin-camel-case": {
|
||||
"version": "10.0.0-alpha.7",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.0-alpha.7.tgz",
|
||||
"integrity": "sha512-Bwrav1ZB0XywdJW6TaEuFhKe1ZpZvUlESh3jsFOvebA9aFTYNCkmHMEqjA5+u9VMxksl3u77nnZHtukpxkzrBA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.0.0",
|
||||
"hyphenate-style-name": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"jss-plugin-default-unit": {
|
||||
"version": "10.0.0-alpha.7",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.0-alpha.7.tgz",
|
||||
"integrity": "sha512-auuJUbQaWMxoHOVFPrfZNZpZm9ab8PZeDyvey8nMt2lbokkmZ53UyAnM/1kNsg5BdAXTItcLDxDB3I4gwNU84g==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.0.0"
|
||||
}
|
||||
},
|
||||
"jss-plugin-global": {
|
||||
"version": "10.0.0-alpha.7",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.0.0-alpha.7.tgz",
|
||||
"integrity": "sha512-OWeoW4szLDgRUKviST+xfilqa8O5uXJCW+O3YonheCRTRJg6rRzlE/b5pfYPoU9UtwvY9n7JvwBX5r3c1lMsEQ==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.0.0"
|
||||
}
|
||||
},
|
||||
"jss-plugin-nested": {
|
||||
"version": "10.0.0-alpha.7",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.0.0-alpha.7.tgz",
|
||||
"integrity": "sha512-wsRzuIZXAc6WMjc61mREW9cUrDxgSI7dK/fx5c7a06IDUfSn+83NJ30J/RB4oBnbQW9SijV/muujz7IJqpn9Gw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.0.0",
|
||||
"tiny-warning": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"jss-plugin-props-sort": {
|
||||
"version": "10.0.0-alpha.7",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.0-alpha.7.tgz",
|
||||
"integrity": "sha512-KXOCaHUk1+KXqE0z3q66/w1fDoy+VsZvI77gLxOqTsTrvIKFLX0jarwXogW3CDlaPQQFTZ6JykJJXtPRTBlstA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.0.0"
|
||||
}
|
||||
},
|
||||
"jss-plugin-rule-value-function": {
|
||||
"version": "10.0.0-alpha.7",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.0-alpha.7.tgz",
|
||||
"integrity": "sha512-ett83hvIM69/LknmrWndrrdiDlfLfP+rneU5qP7gTOWJ7g1P9GuEL1Tc4CWdZUWBX+T58tgIBP0V1pzWCkP0QA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.0.0"
|
||||
}
|
||||
},
|
||||
"jss-plugin-vendor-prefixer": {
|
||||
"version": "10.0.0-alpha.7",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.0-alpha.7.tgz",
|
||||
"integrity": "sha512-YbIVgqq+dLimOBOEYggho1Iuc0roz4PJSZYyaok9n8JnXVIqPnxYJbr8+bMbvzJ5CL3eeJij/e7L2IPCceRKrA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.0.0",
|
||||
"css-vendor": "^1.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"css-vendor": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-1.1.0.tgz",
|
||||
"integrity": "sha512-pePyROdjdMRjHhGN+xZjBomaR9GXueNQ2ZLkEi0i2A/eVx0m4oCLglltdRsaYCSOpun0GRJWuqmWLIYj6Y/RVQ==",
|
||||
"requires": {
|
||||
"is-in-browser": "^1.0.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"jss-props-sort": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jss-props-sort/-/jss-props-sort-6.0.0.tgz",
|
||||
|
|
@ -14062,11 +14199,8 @@
|
|||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-gif/-/react-gif-0.1.0.tgz",
|
||||
"integrity": "sha1-/A21vUnTHdRRnIVRAp+zXTtk04E=",
|
||||
"dependencies": {
|
||||
"exploder": {
|
||||
"version": "git://github.com/cezary/exploder.git#721e1a2f777ff5dafe853981ca21b8874aae1fb0",
|
||||
"from": "git://github.com/cezary/exploder.git#721e1a2f777ff5dafe853981ca21b8874aae1fb0"
|
||||
}
|
||||
"requires": {
|
||||
"exploder": "git://github.com/cezary/exploder.git#721e1a2f777ff5dafe853981ca21b8874aae1fb0"
|
||||
}
|
||||
},
|
||||
"react-google-charts": {
|
||||
|
|
@ -16800,6 +16934,11 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"tiny-warning": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.2.tgz",
|
||||
"integrity": "sha512-rru86D9CpQRLvsFG5XFdy0KdLAvjdQDyZCsRcuu60WtzFylDM3eAWSxEVz5kzL2Gp544XiUvPbVKtOA/txLi9Q=="
|
||||
},
|
||||
"tinycolor2": {
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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}/>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -117,6 +117,7 @@ export const LINKS = {
|
|||
PAYMENT_VOUCHERS: '/app/vouchers/payment',
|
||||
CART_DETAIL: '/app/cart',
|
||||
TRANSACTION: '/app/transaction',
|
||||
VOUCHER_STEPPER: '/app/vouchers/buy',
|
||||
};
|
||||
|
||||
@inject('appstate')
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user