pages navbar new
This commit is contained in:
commit
fbb2cc0a9b
105
package-lock.json
generated
105
package-lock.json
generated
|
|
@ -4961,6 +4961,11 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"css-mediaquery": {
|
||||||
|
"version": "0.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
|
||||||
|
"integrity": "sha1-aiw3NEkoYYYxxUvTPO3TAdoYvqA="
|
||||||
|
},
|
||||||
"css-select": {
|
"css-select": {
|
||||||
"version": "2.0.2",
|
"version": "2.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/css-select/-/css-select-2.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/css-select/-/css-select-2.0.2.tgz",
|
||||||
|
|
@ -7014,13 +7019,11 @@
|
||||||
},
|
},
|
||||||
"balanced-match": {
|
"balanced-match": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"bundled": true,
|
"bundled": true
|
||||||
"optional": true
|
|
||||||
},
|
},
|
||||||
"brace-expansion": {
|
"brace-expansion": {
|
||||||
"version": "1.1.11",
|
"version": "1.1.11",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
"requires": {
|
||||||
"balanced-match": "^1.0.0",
|
"balanced-match": "^1.0.0",
|
||||||
"concat-map": "0.0.1"
|
"concat-map": "0.0.1"
|
||||||
|
|
@ -7033,18 +7036,15 @@
|
||||||
},
|
},
|
||||||
"code-point-at": {
|
"code-point-at": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"bundled": true,
|
"bundled": true
|
||||||
"optional": true
|
|
||||||
},
|
},
|
||||||
"concat-map": {
|
"concat-map": {
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"bundled": true,
|
"bundled": true
|
||||||
"optional": true
|
|
||||||
},
|
},
|
||||||
"console-control-strings": {
|
"console-control-strings": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"bundled": true,
|
"bundled": true
|
||||||
"optional": true
|
|
||||||
},
|
},
|
||||||
"core-util-is": {
|
"core-util-is": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
|
|
@ -7147,8 +7147,7 @@
|
||||||
},
|
},
|
||||||
"inherits": {
|
"inherits": {
|
||||||
"version": "2.0.3",
|
"version": "2.0.3",
|
||||||
"bundled": true,
|
"bundled": true
|
||||||
"optional": true
|
|
||||||
},
|
},
|
||||||
"ini": {
|
"ini": {
|
||||||
"version": "1.3.5",
|
"version": "1.3.5",
|
||||||
|
|
@ -7158,7 +7157,6 @@
|
||||||
"is-fullwidth-code-point": {
|
"is-fullwidth-code-point": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
"requires": {
|
||||||
"number-is-nan": "^1.0.0"
|
"number-is-nan": "^1.0.0"
|
||||||
}
|
}
|
||||||
|
|
@ -7171,20 +7169,17 @@
|
||||||
"minimatch": {
|
"minimatch": {
|
||||||
"version": "3.0.4",
|
"version": "3.0.4",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
"requires": {
|
||||||
"brace-expansion": "^1.1.7"
|
"brace-expansion": "^1.1.7"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"minimist": {
|
"minimist": {
|
||||||
"version": "0.0.8",
|
"version": "0.0.8",
|
||||||
"bundled": true,
|
"bundled": true
|
||||||
"optional": true
|
|
||||||
},
|
},
|
||||||
"minipass": {
|
"minipass": {
|
||||||
"version": "2.3.5",
|
"version": "2.3.5",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
"requires": {
|
||||||
"safe-buffer": "^5.1.2",
|
"safe-buffer": "^5.1.2",
|
||||||
"yallist": "^3.0.0"
|
"yallist": "^3.0.0"
|
||||||
|
|
@ -7201,7 +7196,6 @@
|
||||||
"mkdirp": {
|
"mkdirp": {
|
||||||
"version": "0.5.1",
|
"version": "0.5.1",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
"requires": {
|
||||||
"minimist": "0.0.8"
|
"minimist": "0.0.8"
|
||||||
}
|
}
|
||||||
|
|
@ -7274,8 +7268,7 @@
|
||||||
},
|
},
|
||||||
"number-is-nan": {
|
"number-is-nan": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"bundled": true,
|
"bundled": true
|
||||||
"optional": true
|
|
||||||
},
|
},
|
||||||
"object-assign": {
|
"object-assign": {
|
||||||
"version": "4.1.1",
|
"version": "4.1.1",
|
||||||
|
|
@ -7285,7 +7278,6 @@
|
||||||
"once": {
|
"once": {
|
||||||
"version": "1.4.0",
|
"version": "1.4.0",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
"requires": {
|
||||||
"wrappy": "1"
|
"wrappy": "1"
|
||||||
}
|
}
|
||||||
|
|
@ -7391,7 +7383,6 @@
|
||||||
"string-width": {
|
"string-width": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
"requires": {
|
||||||
"code-point-at": "^1.0.0",
|
"code-point-at": "^1.0.0",
|
||||||
"is-fullwidth-code-point": "^1.0.0",
|
"is-fullwidth-code-point": "^1.0.0",
|
||||||
|
|
@ -10740,6 +10731,14 @@
|
||||||
"resolved": "https://registry.npmjs.org/markdown-escapes/-/markdown-escapes-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/markdown-escapes/-/markdown-escapes-1.0.2.tgz",
|
||||||
"integrity": "sha512-lbRZ2mE3Q9RtLjxZBZ9+IMl68DKIXaVAhwvwn9pmjnPLS0h/6kyBMgNhqi1xFJ/2yv6cSyv0jbiZavZv93JkkA=="
|
"integrity": "sha512-lbRZ2mE3Q9RtLjxZBZ9+IMl68DKIXaVAhwvwn9pmjnPLS0h/6kyBMgNhqi1xFJ/2yv6cSyv0jbiZavZv93JkkA=="
|
||||||
},
|
},
|
||||||
|
"matchmediaquery": {
|
||||||
|
"version": "0.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.0.tgz",
|
||||||
|
"integrity": "sha512-u0dlv+VENJ+3YepvwSPBieuvnA6DWfaYa/ctwysAR13y4XLJNyt7bEVKzNj/Nvjo+50d88Pj+xL9xaSo6JmX/w==",
|
||||||
|
"requires": {
|
||||||
|
"css-mediaquery": "^0.1.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
"material-colors": {
|
"material-colors": {
|
||||||
"version": "1.2.6",
|
"version": "1.2.6",
|
||||||
"resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
|
"resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
|
||||||
|
|
@ -14837,6 +14836,60 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"react-html-parser": {
|
||||||
|
"version": "2.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-html-parser/-/react-html-parser-2.0.2.tgz",
|
||||||
|
"integrity": "sha512-XeerLwCVjTs3njZcgCOeDUqLgNIt/t+6Jgi5/qPsO/krUWl76kWKXMeVs2LhY2gwM6X378DkhLjur0zUQdpz0g==",
|
||||||
|
"requires": {
|
||||||
|
"htmlparser2": "^3.9.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"domelementtype": {
|
||||||
|
"version": "1.3.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
|
||||||
|
"integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w=="
|
||||||
|
},
|
||||||
|
"domhandler": {
|
||||||
|
"version": "2.4.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
|
||||||
|
"integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
|
||||||
|
"requires": {
|
||||||
|
"domelementtype": "1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"htmlparser2": {
|
||||||
|
"version": "3.10.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.0.tgz",
|
||||||
|
"integrity": "sha512-J1nEUGv+MkXS0weHNWVKJJ+UrLfePxRWpN3C9bEi9fLxL2+ggW94DQvgYVXsaT30PGwYRIZKNZXuyMhp3Di4bQ==",
|
||||||
|
"requires": {
|
||||||
|
"domelementtype": "^1.3.0",
|
||||||
|
"domhandler": "^2.3.0",
|
||||||
|
"domutils": "^1.5.1",
|
||||||
|
"entities": "^1.1.1",
|
||||||
|
"inherits": "^2.0.1",
|
||||||
|
"readable-stream": "^3.0.6"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"readable-stream": {
|
||||||
|
"version": "3.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.1.1.tgz",
|
||||||
|
"integrity": "sha512-DkN66hPyqDhnIQ6Jcsvx9bFjhw214O4poMBcIMgPVpQvNy9a0e0Uhg5SqySyDKAmUlwt8LonTBz1ezOnM8pUdA==",
|
||||||
|
"requires": {
|
||||||
|
"inherits": "^2.0.3",
|
||||||
|
"string_decoder": "^1.1.1",
|
||||||
|
"util-deprecate": "^1.0.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"string_decoder": {
|
||||||
|
"version": "1.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.2.0.tgz",
|
||||||
|
"integrity": "sha512-6YqyX6ZWEYguAxgZzHGL7SsCeGx3V2TtOTqZz1xSTSWnqsbWwbptafNyvf/ACquZUXV3DANr5BDIwNYe1mN42w==",
|
||||||
|
"requires": {
|
||||||
|
"safe-buffer": "~5.1.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"react-images": {
|
"react-images": {
|
||||||
"version": "0.5.19",
|
"version": "0.5.19",
|
||||||
"resolved": "https://registry.npmjs.org/react-images/-/react-images-0.5.19.tgz",
|
"resolved": "https://registry.npmjs.org/react-images/-/react-images-0.5.19.tgz",
|
||||||
|
|
@ -15119,6 +15172,16 @@
|
||||||
"resize-observer-polyfill": "^1.5.0"
|
"resize-observer-polyfill": "^1.5.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"react-responsive": {
|
||||||
|
"version": "6.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-6.1.1.tgz",
|
||||||
|
"integrity": "sha512-Po6pOEz70Agp+2lUmTxAnhfdkk0zp0IFgo/6bGcxv/S4Pa1sz0YG06WzkrIcASbyKSQ8x6AkcggeozXW3zj3kA==",
|
||||||
|
"requires": {
|
||||||
|
"hyphenate-style-name": "^1.0.0",
|
||||||
|
"matchmediaquery": "^0.3.0",
|
||||||
|
"prop-types": "^15.6.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"react-responsive-carousel": {
|
"react-responsive-carousel": {
|
||||||
"version": "3.1.46",
|
"version": "3.1.46",
|
||||||
"resolved": "https://registry.npmjs.org/react-responsive-carousel/-/react-responsive-carousel-3.1.46.tgz",
|
"resolved": "https://registry.npmjs.org/react-responsive-carousel/-/react-responsive-carousel-3.1.46.tgz",
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,9 @@
|
||||||
"dev:parcel": "node scripts/dev-parcel.js",
|
"dev:parcel": "node scripts/dev-parcel.js",
|
||||||
"deploy": "rsync -chavzP -e \"ssh -p 2222\" --stats dist/ root@209.58.165.19:/home/apps/giift/giift-customer-btn",
|
"deploy": "rsync -chavzP -e \"ssh -p 2222\" --stats dist/ root@209.58.165.19:/home/apps/giift/giift-customer-btn",
|
||||||
"deploy:giift": "rsync -chavzP -e \"ssh -p 2222\" --stats dist/ root@209.58.165.19:/home/apps/giift/giift-customer",
|
"deploy:giift": "rsync -chavzP -e \"ssh -p 2222\" --stats dist/ root@209.58.165.19:/home/apps/giift/giift-customer",
|
||||||
"dev2:parcel": "node scripts/link-assets.js; parcel public/index.parcel.html --out-file index.html --global $"
|
"dev2:parcel": "node scripts/link-assets.js; parcel public/index.parcel.html --out-file index.html --global $",
|
||||||
|
"build2:parcel:prod": "node scripts/link-assets.js; parcel build public/index.parcel.html --out-file index.html --detailed-report --no-source-maps",
|
||||||
|
"build:deploy": "npm run build:parcel:prod && npm run deploy"
|
||||||
},
|
},
|
||||||
"author": "Asacreative",
|
"author": "Asacreative",
|
||||||
"repository": {
|
"repository": {
|
||||||
|
|
@ -112,6 +114,7 @@
|
||||||
"react-handsontable": "^0.3.1",
|
"react-handsontable": "^0.3.1",
|
||||||
"react-helmet": "^5.2.0",
|
"react-helmet": "^5.2.0",
|
||||||
"react-hot-loader": "^4.6.3",
|
"react-hot-loader": "^4.6.3",
|
||||||
|
"react-html-parser": "^2.0.2",
|
||||||
"react-images": "^0.5.13",
|
"react-images": "^0.5.13",
|
||||||
"react-infinite-scroller": "^1.2.4",
|
"react-infinite-scroller": "^1.2.4",
|
||||||
"react-intl": "^2.8.0",
|
"react-intl": "^2.8.0",
|
||||||
|
|
@ -123,6 +126,7 @@
|
||||||
"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": "^6.1.1",
|
||||||
"react-responsive-carousel": "^3.1.46",
|
"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",
|
||||||
|
|
|
||||||
|
|
@ -480,7 +480,7 @@ class App extends React.Component {
|
||||||
.bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem
|
.bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem
|
||||||
className={(this.state.selectedMenu === '/app/dashboard') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
className={(this.state.selectedMenu === '/app/dashboard') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
||||||
className="menuAkun">Home</span></MenuItem></Link>
|
className="menuAkun">Home</span></MenuItem></Link>
|
||||||
<Link onClick={this
|
{/* <Link onClick={this
|
||||||
.changeRoute
|
.changeRoute
|
||||||
.bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem
|
.bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem
|
||||||
className={(this.state.selectedMenu === '/app/flight') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
className={(this.state.selectedMenu === '/app/flight') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
||||||
|
|
@ -510,7 +510,7 @@ class App extends React.Component {
|
||||||
to={LINKS.VOUCHERS}
|
to={LINKS.VOUCHERS}
|
||||||
><MenuItem
|
><MenuItem
|
||||||
className={(this.state.selectedMenu === '/app/vouchers') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
className={(this.state.selectedMenu === '/app/vouchers') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
||||||
className="menuAkun">Vouchers</span></MenuItem></Link>
|
className="menuAkun">Vouchers</span></MenuItem></Link> */}
|
||||||
|
|
||||||
</List>
|
</List>
|
||||||
<Divider />
|
<Divider />
|
||||||
|
|
@ -865,9 +865,9 @@ class App extends React.Component {
|
||||||
style={{ padding: '0px 16px 0px', fontSize: 14 }}
|
style={{ padding: '0px 16px 0px', fontSize: 14 }}
|
||||||
disabled={true}
|
disabled={true}
|
||||||
primaryText={<span
|
primaryText={<span
|
||||||
style={{ fontWeight: 500 }}>{this.authStore.userProfile.username || 'Username'}</span>}
|
style={{ fontWeight: 500 }}>{this.props.appstate.userData.email|| 'Username'}</span>}
|
||||||
secondaryText={<p
|
secondaryText={<p
|
||||||
style={{ fontWeight: 400 }}>{_.capitalize(this.authStore.userProfile.role) || 'role'}</p>}
|
style={{ fontWeight: 400 }}>{_.capitalize(this.props.appstate.userData.role) || 'role'}</p>}
|
||||||
/>
|
/>
|
||||||
</List>
|
</List>
|
||||||
<Divider />
|
<Divider />
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import withStyles from "@material-ui/core/styles/withStyles";
|
import withStyles from "@material-ui/core/styles/withStyles";
|
||||||
import {styles} from '../Register/registerStyle';
|
import {styles} from '../Register/registerStyle';
|
||||||
|
import {notification} from 'antd';
|
||||||
|
|
||||||
import Grid from '@material-ui/core/Grid';
|
import Grid from '@material-ui/core/Grid';
|
||||||
import Paper from '@material-ui/core/Paper';
|
import Paper from '@material-ui/core/Paper';
|
||||||
|
|
@ -43,7 +44,43 @@ class BTNLoginPage extends React.Component{
|
||||||
this.authStore = props.appstate.auth;
|
this.authStore = props.appstate.auth;
|
||||||
}
|
}
|
||||||
|
|
||||||
handleChange = name => event => {
|
componentDidMount() {
|
||||||
|
const urlParams = new URLSearchParams(window.location.search);
|
||||||
|
|
||||||
|
if(urlParams.has('key')) {
|
||||||
|
this.setState({
|
||||||
|
isLoading: true
|
||||||
|
});
|
||||||
|
|
||||||
|
this.authStore.verifyEmail(urlParams.get('key')).then((res) => {
|
||||||
|
if(res.login_request_id) {
|
||||||
|
notification.open({
|
||||||
|
message: 'Email Verification',
|
||||||
|
description: 'Email verification success'
|
||||||
|
});
|
||||||
|
this.setState({
|
||||||
|
isLoading: false
|
||||||
|
});
|
||||||
|
this.props.history.push({
|
||||||
|
pathname:LINKS.OTP,
|
||||||
|
search:'?login_request_id='+res.login_request_id+'&expired_at='+res.expired_at
|
||||||
|
});
|
||||||
|
//redirect to otp page
|
||||||
|
} else {
|
||||||
|
notification.open({
|
||||||
|
message: 'Email Verification',
|
||||||
|
description: res.message
|
||||||
|
});
|
||||||
|
this.setState({
|
||||||
|
isLoading: false
|
||||||
|
});
|
||||||
|
// res.message
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
handleChange = name => event => {
|
||||||
this.setState({
|
this.setState({
|
||||||
[name]: event.target.value,
|
[name]: event.target.value,
|
||||||
});
|
});
|
||||||
|
|
@ -74,6 +111,16 @@ class BTNLoginPage extends React.Component{
|
||||||
else if(res.state == "email_verification"){
|
else if(res.state == "email_verification"){
|
||||||
this.setState({isNeedEmailVerification:true,isLoading:false});
|
this.setState({isNeedEmailVerification:true,isLoading:false});
|
||||||
}
|
}
|
||||||
|
else if(res.state == "phone_verification"){
|
||||||
|
this.authStore.otpData = res;
|
||||||
|
setTimeout(()=>{
|
||||||
|
this.props.history.push({
|
||||||
|
pathname:LINKS.OTP,
|
||||||
|
search:'?login_request_id='+res.login_request_id+'&expired_at='+res.expired_at
|
||||||
|
});
|
||||||
|
this.setState({isLoading:false});
|
||||||
|
},1000);
|
||||||
|
}
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
console.log("err login",err);
|
console.log("err login",err);
|
||||||
this.setState({loginFailed:true,isLoading:false});
|
this.setState({loginFailed:true,isLoading:false});
|
||||||
|
|
@ -137,7 +184,7 @@ class BTNLoginPage extends React.Component{
|
||||||
Your account still need email verification
|
Your account still need email verification
|
||||||
</Typography>
|
</Typography>
|
||||||
<Typography variant="subtitle2" gutterBottom>
|
<Typography variant="subtitle2" gutterBottom>
|
||||||
Still not received any email? <Link to={"/register"}>Resend email</Link>
|
Still not received any email? <a onClick={()=>this.authStore.resendEmail(this.state.email)}>Resend email</a>
|
||||||
</Typography>
|
</Typography>
|
||||||
|
|
||||||
<div style={{padding : 5,marginTop : 20}}>
|
<div style={{padding : 5,marginTop : 20}}>
|
||||||
|
|
|
||||||
|
|
@ -19,9 +19,9 @@ import InputAdornment from '@material-ui/core/InputAdornment';
|
||||||
import IconButton from '@material-ui/core/IconButton';
|
import IconButton from '@material-ui/core/IconButton';
|
||||||
import CircularProgress from '@material-ui/core/CircularProgress';
|
import CircularProgress from '@material-ui/core/CircularProgress';
|
||||||
import Snackbar from '@material-ui/core/Snackbar';
|
import Snackbar from '@material-ui/core/Snackbar';
|
||||||
|
|
||||||
import Text from 'material-ui/TextField';
|
import Text from 'material-ui/TextField';
|
||||||
|
|
||||||
|
import moment from 'moment';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import {inject, observer} from 'mobx-react';
|
import {inject, observer} from 'mobx-react';
|
||||||
import {LINKS} from "../../routes";
|
import {LINKS} from "../../routes";
|
||||||
|
|
@ -30,6 +30,8 @@ import {LINKS} from "../../routes";
|
||||||
@observer
|
@observer
|
||||||
class OtpPage extends React.Component{
|
class OtpPage extends React.Component{
|
||||||
otp = [];
|
otp = [];
|
||||||
|
urlParams = new URLSearchParams(window.location.search);
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.props = props;
|
this.props = props;
|
||||||
|
|
@ -42,7 +44,10 @@ class OtpPage extends React.Component{
|
||||||
isNeedEmailVerification: false,
|
isNeedEmailVerification: false,
|
||||||
otp: [],
|
otp: [],
|
||||||
otpText : "",
|
otpText : "",
|
||||||
isResending: false
|
otpData : {},
|
||||||
|
isResending: false,
|
||||||
|
isOtpExpired : false,
|
||||||
|
isOtpWrong: false,
|
||||||
};
|
};
|
||||||
this.defaultState = Object.assign({}, this.state);
|
this.defaultState = Object.assign({}, this.state);
|
||||||
this.authStore = props.appstate.auth;
|
this.authStore = props.appstate.auth;
|
||||||
|
|
@ -50,7 +55,27 @@ class OtpPage extends React.Component{
|
||||||
|
|
||||||
componentDidMount(){
|
componentDidMount(){
|
||||||
this.otp[0].focus();
|
this.otp[0].focus();
|
||||||
console.log("otp",this.otp);
|
if(this.urlParams.has('login_request_id') && this.urlParams.has('expired_at')) {
|
||||||
|
console.log(this.urlParams);
|
||||||
|
this.setState({
|
||||||
|
otpData:{
|
||||||
|
login_request_id : this.urlParams.get('login_request_id'),
|
||||||
|
expired_at : this.urlParams.get('expired_at')
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
this.setState({otpData:this.authStore.otpData});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
checkIsExpired(){
|
||||||
|
console.log(Date.parse(Date().toISOString()),this.state.otpData.expired_at);
|
||||||
|
if(Date.parse(Date().toISOString()) < Date.parse(this.state.otpData.expired_at)){
|
||||||
|
return false;
|
||||||
|
}else{
|
||||||
|
return true
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
handleChange = name => event => {
|
handleChange = name => event => {
|
||||||
|
|
@ -67,31 +92,58 @@ class OtpPage extends React.Component{
|
||||||
}
|
}
|
||||||
|
|
||||||
login = () => {
|
login = () => {
|
||||||
console.log("otpText",this.state.otpText);
|
let data = {
|
||||||
|
code : this.state.otpText,
|
||||||
|
login_request_id : this.state.otpData.login_request_id
|
||||||
|
}
|
||||||
|
console.log("data",data);
|
||||||
this.setState({isLoading:true});
|
this.setState({isLoading:true});
|
||||||
setTimeout(()=>{
|
// if(this.checkIsExpired){
|
||||||
this.setState({isLoading:false});
|
// this.setState({isOtpExpired:true});
|
||||||
},1000);
|
// setTimeout(()=>{
|
||||||
// this.authStore.login(data).then(res => {
|
// this.setState({isOtpExpired:false});
|
||||||
// if(!res.need_email_verification){
|
// },2000);
|
||||||
// setTimeout(()=>{
|
// }
|
||||||
// this.props.history.push(LINKS.DASHBOARD);
|
// else{
|
||||||
// this.setState({isLoading:false});
|
this.authStore.validateOtp(data).then(res=>{
|
||||||
// },1000);
|
setTimeout(()=>{
|
||||||
// }
|
this.props.history.push(LINKS.DASHBOARD);
|
||||||
// else{
|
this.setState({isLoading:false});
|
||||||
// this.setState({isNeedEmailVerification:true});
|
},1000);
|
||||||
// }
|
}).catch(err=>{
|
||||||
// }).catch(err => {
|
setTimeout(()=>{
|
||||||
// this.setState({loginFailed:true,isLoading:false});
|
this.setState({isLoading:false,isOtpWrong:true});
|
||||||
// setTimeout(()=>this.setState({loginFailed:false}),3000);
|
},2000);
|
||||||
// });
|
setTimeout(()=>{
|
||||||
};
|
this.setState({isOtpWrong:false});
|
||||||
|
},4000)
|
||||||
|
});
|
||||||
|
// }
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
render(){
|
render(){
|
||||||
const { classes } = this.props;
|
const { classes } = this.props;
|
||||||
return (
|
return (
|
||||||
<div className={classes.container}>
|
<div className={classes.container}>
|
||||||
|
<Snackbar
|
||||||
|
anchorOrigin={{ vertical : 'top', horizontal: 'center' }}
|
||||||
|
open={this.state.isOtpWrong}
|
||||||
|
onClose={()=>this.setState({isOtpWrong:false})}
|
||||||
|
ContentProps={{
|
||||||
|
'aria-describedby': 'message-id',
|
||||||
|
}}
|
||||||
|
message={<span id="message-id">Wrong OTP code</span>}
|
||||||
|
/>
|
||||||
|
<Snackbar
|
||||||
|
anchorOrigin={{ vertical : 'top', horizontal: 'center' }}
|
||||||
|
open={this.state.isOtpExpired}
|
||||||
|
onClose={()=>this.setState({isOtpExpired:false})}
|
||||||
|
ContentProps={{
|
||||||
|
'aria-describedby': 'message-id',
|
||||||
|
}}
|
||||||
|
message={<span id="message-id">Your OTP code has expired</span>}
|
||||||
|
/>
|
||||||
<Snackbar
|
<Snackbar
|
||||||
anchorOrigin={{ vertical : 'top', horizontal: 'center' }}
|
anchorOrigin={{ vertical : 'top', horizontal: 'center' }}
|
||||||
open={this.state.isResending}
|
open={this.state.isResending}
|
||||||
|
|
@ -129,7 +181,7 @@ class OtpPage extends React.Component{
|
||||||
<Grid container justify="center" spacing={8}>
|
<Grid container justify="center" spacing={8}>
|
||||||
{[0, 1, 2, 3, 4, 5].map(x => (
|
{[0, 1, 2, 3, 4, 5].map(x => (
|
||||||
<Grid item xs={1}>
|
<Grid item xs={1}>
|
||||||
<Text onChange={event=>this.setState({otpText:this.state.otpText+event.target.value})} autoFocus={true} ref={(input) => { this.otp[x] = input; }} key={x} id={x} inputStyle={{textAlign:'center'}} style={{width:'100%'}} type="tel" maxlength="1"/>
|
<Text onChange={event=>this.setState({otpText:this.state.otpText+event.target.value})} autoFocus={true} ref={(input) => { this.otp[x] = input; }} key={x} id={x} inputStyle={{textAlign:'center'}} style={{width:'100%'}} type="tel" maxLength="1"/>
|
||||||
</Grid>
|
</Grid>
|
||||||
))}
|
))}
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@ import {
|
||||||
message,
|
message,
|
||||||
Button,
|
Button,
|
||||||
Spin,
|
Spin,
|
||||||
Icon
|
Icon, notification
|
||||||
} from 'antd';
|
} from 'antd';
|
||||||
import css from 'reactcss';
|
import css from 'reactcss';
|
||||||
import RegisterForm from './Form';
|
import RegisterForm from './Form';
|
||||||
|
|
@ -68,8 +68,15 @@ export default class ComponentName extends React.Component {
|
||||||
.authStore
|
.authStore
|
||||||
.register(value)
|
.register(value)
|
||||||
.then(res => {
|
.then(res => {
|
||||||
message.success(res.message);
|
notification.open({
|
||||||
|
message: 'Register Success',
|
||||||
|
description: 'Please check your email to continue'
|
||||||
|
});
|
||||||
|
this.props.history.push({
|
||||||
|
pathname:LINKS.LOGIN
|
||||||
|
});
|
||||||
this.setState({isLoading: false, isSuccess: true})
|
this.setState({isLoading: false, isSuccess: true})
|
||||||
|
// this
|
||||||
})
|
})
|
||||||
.catch(err => {
|
.catch(err => {
|
||||||
if (err && err.errors && err.errors[0] && err.errors[0].message) {
|
if (err && err.errors && err.errors[0] && err.errors[0].message) {
|
||||||
|
|
|
||||||
|
|
@ -22,6 +22,7 @@ import { Upload, Icon, message } from 'antd';
|
||||||
|
|
||||||
import AutoComplete from './../../components/AutoComplete';
|
import AutoComplete from './../../components/AutoComplete';
|
||||||
import {appConfig} from "../../config/app";
|
import {appConfig} from "../../config/app";
|
||||||
|
import {LINKS} from "../../routes";
|
||||||
|
|
||||||
// const province = require("./../../../../assets/data/province.json");
|
// const province = require("./../../../../assets/data/province.json");
|
||||||
// const city = require("./../../../../assets/data/city.json");
|
// const city = require("./../../../../assets/data/city.json");
|
||||||
|
|
@ -40,6 +41,8 @@ class RegisterPage extends React.Component {
|
||||||
fileList_ktp: [],
|
fileList_ktp: [],
|
||||||
fileList_photo: [],
|
fileList_photo: [],
|
||||||
|
|
||||||
|
query: {},
|
||||||
|
|
||||||
// form
|
// form
|
||||||
confirmPassword: "",
|
confirmPassword: "",
|
||||||
phone_number: "",
|
phone_number: "",
|
||||||
|
|
@ -65,6 +68,18 @@ class RegisterPage extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
|
let {location:{search}} = this.props;
|
||||||
|
search = search.substr(1);
|
||||||
|
|
||||||
|
const query = search.split("&")
|
||||||
|
.map(q => q.split('='))
|
||||||
|
.reduce((all, q) => {
|
||||||
|
all[q[0]] = q[1];
|
||||||
|
return all;
|
||||||
|
}, {});
|
||||||
|
|
||||||
|
this.setState({query});
|
||||||
|
|
||||||
this.place.getAllProvince();
|
this.place.getAllProvince();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -114,6 +129,15 @@ class RegisterPage extends React.Component {
|
||||||
};
|
};
|
||||||
|
|
||||||
register = () => {
|
register = () => {
|
||||||
|
|
||||||
|
if (this.state.upload_photo === '') {
|
||||||
|
return message.warning("please upload photo");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.state.upload_ktp === '') {
|
||||||
|
return message.warning("please upload ktp");
|
||||||
|
}
|
||||||
|
|
||||||
this.setState({ isLoading: true });
|
this.setState({ isLoading: true });
|
||||||
let data = {
|
let data = {
|
||||||
fullname: this.state.full_name,
|
fullname: this.state.full_name,
|
||||||
|
|
@ -129,12 +153,15 @@ class RegisterPage extends React.Component {
|
||||||
district_id: this.state.district,
|
district_id: this.state.district,
|
||||||
subdistrict_id: this.state.subdistrict,
|
subdistrict_id: this.state.subdistrict,
|
||||||
zip_code: this.state.zip_code,
|
zip_code: this.state.zip_code,
|
||||||
|
referal: this.state.query.referal,
|
||||||
additional_data: {}
|
additional_data: {}
|
||||||
};
|
};
|
||||||
this.authStore.register(data).then(res => {
|
this.authStore.register(data).then(res => {
|
||||||
|
message.success("Please check your email to confirm your account");
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.setState({ isLoading: false });
|
this.setState({ isLoading: false });
|
||||||
}, 1000);
|
this.props.history.push(LINKS.LOGIN);
|
||||||
|
}, 250);
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
this.setState({ isLoading: false });
|
this.setState({ isLoading: false });
|
||||||
|
|
||||||
|
|
@ -194,7 +221,7 @@ class RegisterPage extends React.Component {
|
||||||
return this.http.upload(file)
|
return this.http.upload(file)
|
||||||
.then(res => {
|
.then(res => {
|
||||||
this.setState({
|
this.setState({
|
||||||
[`upload_${key}`]: res.path
|
[`upload_${key}`]: appConfig.apiUrl + res.path.slice(1,res.path.length)
|
||||||
});
|
});
|
||||||
return res;
|
return res;
|
||||||
})
|
})
|
||||||
|
|
@ -253,7 +280,9 @@ class RegisterPage extends React.Component {
|
||||||
<Grid item cols={12} className={classes.logoContainer}>
|
<Grid item cols={12} className={classes.logoContainer}>
|
||||||
<img src={require('../../../../assets/images/logo_new.png')} className={classes.logo} />
|
<img src={require('../../../../assets/images/logo_new.png')} className={classes.logo} />
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid item xs={12} sm={12} md={10} lg={10} className={classes.registerContainer}>
|
<Grid item xs={12} sm={12} md={10} lg={10} className={classes.registerContainer} style={{
|
||||||
|
alignSelf: 'center'
|
||||||
|
}}>
|
||||||
<Grid container spacing={24} className={classes.registerPaper}>
|
<Grid container spacing={24} className={classes.registerPaper}>
|
||||||
<Hidden smDown>
|
<Hidden smDown>
|
||||||
<Grid item xs={5}>
|
<Grid item xs={5}>
|
||||||
|
|
@ -336,7 +365,10 @@ class RegisterPage extends React.Component {
|
||||||
showUploadList={false}
|
showUploadList={false}
|
||||||
{...this.createUploadProps("ktp")}
|
{...this.createUploadProps("ktp")}
|
||||||
>
|
>
|
||||||
{upload_ktp ? <img src={upload_ktp} alt="avatar" /> : uploadButtonKtp}
|
{upload_ktp ? <img src={upload_ktp} alt="avatar" style={{
|
||||||
|
width: 104,
|
||||||
|
height: 104
|
||||||
|
}}/> : uploadButtonKtp}
|
||||||
</Upload>
|
</Upload>
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5, paddingTop:16 }}>
|
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5, paddingTop:16 }}>
|
||||||
|
|
@ -348,7 +380,10 @@ class RegisterPage extends React.Component {
|
||||||
showUploadList={false}
|
showUploadList={false}
|
||||||
{...this.createUploadProps("photo")}
|
{...this.createUploadProps("photo")}
|
||||||
>
|
>
|
||||||
{upload_photo ? <img src={upload_photo} alt="avatar" /> : uploadButtonPhoto}
|
{upload_photo ? <img src={upload_photo} alt="avatar" style={{
|
||||||
|
width: 104,
|
||||||
|
height: 104
|
||||||
|
}}/> : uploadButtonPhoto}
|
||||||
</Upload>
|
</Upload>
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|
||||||
|
|
@ -476,9 +511,29 @@ class RegisterPage extends React.Component {
|
||||||
</Grid>
|
</Grid>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<Grid item xs={12} sm={12} md={12}>
|
||||||
|
<TextField
|
||||||
|
label="Referal"
|
||||||
|
value={this.state.query.referal}
|
||||||
|
onChange={event => {
|
||||||
|
this.setState({
|
||||||
|
query: {
|
||||||
|
...this.state.query,
|
||||||
|
referal: event.target.value
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
margin="normal"
|
||||||
|
type={"text"}
|
||||||
|
fullWidth
|
||||||
|
variant="outlined"
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
<div style={{ padding: 5, marginTop: 20 }}>
|
<div style={{ padding: 5, marginTop: 20 }}>
|
||||||
<Button fullWidth variant="contained" style={{ backgroundColor: '#ffeb3b' }} onClick={this.register}>
|
<Button
|
||||||
|
fullWidth
|
||||||
|
variant="contained" style={{ backgroundColor: '#ffeb3b' }} onClick={this.register}>
|
||||||
{this.state.isLoading ? <CircularProgress className={classes.progress} /> : "Sign Up"}
|
{this.state.isLoading ? <CircularProgress className={classes.progress} /> : "Sign Up"}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,8 @@ export const styles = theme => ({
|
||||||
},
|
},
|
||||||
gridContainer : {
|
gridContainer : {
|
||||||
flex :1,
|
flex :1,
|
||||||
justifyContent:'center'
|
justifyContent: 'center',
|
||||||
|
flexDirection: 'column'
|
||||||
},
|
},
|
||||||
registerContainer: {
|
registerContainer: {
|
||||||
marginTop : 50
|
marginTop : 50
|
||||||
|
|
|
||||||
|
|
@ -1,24 +1,28 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {inject, observer} from 'mobx-react';
|
import {inject, observer} from 'mobx-react';
|
||||||
import {
|
import {
|
||||||
FlatButton,
|
|
||||||
Divider
|
Divider
|
||||||
} from 'material-ui';
|
} from '@material-ui/core';
|
||||||
import { Affix, Card, Slider, Select, Row, Col, Icon, Tag,Rate, Button, Checkbox , DatePicker, Alert, Input ,Avatar} from 'antd';
|
import { Affix, Card, Slider, Select, Row, Col, Icon, Tag,Rate, Button, Checkbox , DatePicker, Alert, Input ,Avatar} from 'antd';
|
||||||
import {startCase} from 'lodash';
|
import {startCase} from 'lodash';
|
||||||
import LoadingDialog from "../../LoadingDialog";
|
|
||||||
import Loader from 'react-loader-advanced';
|
|
||||||
import './style.scss';
|
import './style.scss';
|
||||||
import {DIALOG} from "../../../stores/global_ui";
|
import { withStyles } from '@material-ui/core/styles';
|
||||||
import EmptyComponent from '../../EmptyComponent';
|
|
||||||
import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
|
|
||||||
import {LINKS} from "../../../routes";
|
|
||||||
import {Route} from "react-router-dom";
|
|
||||||
import get from 'lodash.get';
|
import get from 'lodash.get';
|
||||||
|
import MediaQuery from 'react-responsive';
|
||||||
|
|
||||||
|
const styles = theme => ({
|
||||||
|
button: {
|
||||||
|
margin: theme.spacing.unit,
|
||||||
|
},
|
||||||
|
divider: {
|
||||||
|
marginBottom: 10,
|
||||||
|
marginTop: 10,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
@inject('appstate')
|
@inject('appstate')
|
||||||
@observer
|
@observer
|
||||||
export default class CheckoutVouchers extends React.Component {
|
export class CheckoutVouchers extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.props = props;
|
this.props = props;
|
||||||
|
|
@ -41,7 +45,7 @@ export default class CheckoutVouchers extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
const {classes} = this.props;
|
||||||
const logoUrl = (this.props.vouchersStore.dataItems.images.logo) ? get(this.vouchersStore.dataItems, 'images.logo', '') : 'http://lorempixel.com/400/200';
|
const logoUrl = (this.props.vouchersStore.dataItems.images.logo) ? get(this.vouchersStore.dataItems, 'images.logo', '') : 'http://lorempixel.com/400/200';
|
||||||
|
|
||||||
let image = logoUrl;
|
let image = logoUrl;
|
||||||
|
|
@ -51,8 +55,8 @@ export default class CheckoutVouchers extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="row">
|
<div className="checkout-parent">
|
||||||
<div className="row">
|
<div className="upper-card">
|
||||||
<Card>
|
<Card>
|
||||||
<div className="">
|
<div className="">
|
||||||
<div style={{display:'flex',justifyContent:'center'}}>
|
<div style={{display:'flex',justifyContent:'center'}}>
|
||||||
|
|
@ -61,7 +65,7 @@ export default class CheckoutVouchers extends React.Component {
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Divider style={{marginBottom:10,marginTop:10}} />
|
<Divider component={"div"} className={classes.divider} />
|
||||||
<div className="row" style={{marginTop:30}}>
|
<div className="row" style={{marginTop:30}}>
|
||||||
<div className="col s12 m5 l5">
|
<div className="col s12 m5 l5">
|
||||||
<div style={{display:'flex',justifyContent:'center',alignItems:'center'}}>
|
<div style={{display:'flex',justifyContent:'center',alignItems:'center'}}>
|
||||||
|
|
@ -70,26 +74,30 @@ export default class CheckoutVouchers extends React.Component {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col s12 m7 l7">
|
<div className="col s12 m7 l7">
|
||||||
<div style={{alignItems:'center', justifyContent: 'center'}}>
|
<div className={'right-container'}>
|
||||||
<Row>
|
<Row>
|
||||||
<div className="col s4 m4">
|
<div className="col s12 m4">
|
||||||
<h3>Jenis Layanan</h3>
|
<h3>Jenis Layanan</h3>
|
||||||
</div>
|
</div>
|
||||||
<div className="col s1 m1">
|
<MediaQuery query="(min-device-width: 800px)">
|
||||||
<h3>:</h3>
|
<div className="col s1 m1">
|
||||||
</div>
|
<h3>:</h3>
|
||||||
<div className="col s7 m7">
|
</div>
|
||||||
|
</MediaQuery>
|
||||||
|
<div className="col s12 m7">
|
||||||
<h3 style={{color:'#FF6F00'}}>{this.props.vouchersStore.dataItems.name} - {this.props.vouchersStore.skuName}</h3>
|
<h3 style={{color:'#FF6F00'}}>{this.props.vouchersStore.dataItems.name} - {this.props.vouchersStore.skuName}</h3>
|
||||||
</div>
|
</div>
|
||||||
</Row>
|
</Row>
|
||||||
<Row>
|
<Row>
|
||||||
<div className="col s4 m4">
|
<div className="col s12 m4">
|
||||||
<h3>Point</h3>
|
<h3>Point</h3>
|
||||||
</div>
|
</div>
|
||||||
<div className="col s1 m1">
|
<MediaQuery query="(min-device-width: 800px)">
|
||||||
<h3>:</h3>
|
<div className="col s1 m1">
|
||||||
</div>
|
<h3>:</h3>
|
||||||
<div className="col s7 m7">
|
</div>
|
||||||
|
</MediaQuery>
|
||||||
|
<div className="col s12 m7">
|
||||||
<h3 style={{color:'#FF6F00'}}>{(+this.props.vouchersStore.skuPrice || 0).toFixed(0)} Points</h3>
|
<h3 style={{color:'#FF6F00'}}>{(+this.props.vouchersStore.skuPrice || 0).toFixed(0)} Points</h3>
|
||||||
</div>
|
</div>
|
||||||
</Row>
|
</Row>
|
||||||
|
|
@ -98,15 +106,15 @@ export default class CheckoutVouchers extends React.Component {
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
<div className="row">
|
<div className="bottom-card">
|
||||||
<Card >
|
<Card>
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div style={{display:'flex',justifyContent:'space-between'}}>
|
<div style={{display:'flex',justifyContent:'space-between'}}>
|
||||||
<h3 style={{color:''}}>Point</h3>
|
<h3 style={{color:''}}>Point</h3>
|
||||||
<h3 style={{color:'#FF6F00'}}>{this.props.appstate.wallet.data.point || 0} Points</h3>
|
<h3 style={{color:'#FF6F00'}}>{this.props.appstate.wallet.data.point || 0} Points</h3>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Divider style={{marginBottom:10,marginTop:10}} />
|
<Divider component={"div"} className={classes.divider} />
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div style={{display:'flex',justifyContent:'space-between'}}>
|
<div style={{display:'flex',justifyContent:'space-between'}}>
|
||||||
<h3>Total Pembayaran Point</h3>
|
<h3>Total Pembayaran Point</h3>
|
||||||
|
|
@ -122,3 +130,5 @@ export default class CheckoutVouchers extends React.Component {
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export default withStyles(styles)(CheckoutVouchers);
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,53 @@
|
||||||
.imageCard{
|
@media(min-width: 1000px){
|
||||||
max-width: 20vw;
|
.imageCard{
|
||||||
max-height: 20vw;
|
width: 20vw;
|
||||||
|
height: 25vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upper-card{
|
||||||
|
width: 60vw;
|
||||||
|
margin-left: -1vw;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-card{
|
||||||
|
width: 60vw;
|
||||||
|
margin-left: -1vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-container{
|
||||||
|
//background-color: red;
|
||||||
|
height: 25vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
//align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width: 999px){
|
||||||
|
.imageCard{
|
||||||
|
width: 80vw;
|
||||||
|
height: 25vh;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upper-card{
|
||||||
|
width: 90vw;
|
||||||
|
margin-left: -3.5vw;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-card{
|
||||||
|
width: 90vw;
|
||||||
|
margin-left: -3.5vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-container{
|
||||||
|
margin-left: -2.5vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkout-parent{
|
||||||
|
//width: 100%;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,7 @@ import { Route } from 'react-router-dom'
|
||||||
import {LINKS} from "../../../routes";
|
import {LINKS} from "../../../routes";
|
||||||
import NumberFormat from 'react-number-format';
|
import NumberFormat from 'react-number-format';
|
||||||
import get from 'lodash.get';
|
import get from 'lodash.get';
|
||||||
|
import ReactHtmlParser from "react-html-parser";
|
||||||
|
|
||||||
const Option = Select.Option;
|
const Option = Select.Option;
|
||||||
|
|
||||||
|
|
@ -83,7 +84,7 @@ export default class ModalVouchersComponent extends React.Component {
|
||||||
flex: 0.7,
|
flex: 0.7,
|
||||||
padding: 30
|
padding: 30
|
||||||
}}>
|
}}>
|
||||||
<p className={'descriptionModal'} >{data.description}</p>
|
<p className={'descriptionModal'} >{ReactHtmlParser(data.description)}</p>
|
||||||
|
|
||||||
{(additional_data.information != null) && <Alert className={'informationAlertModal'} message={
|
{(additional_data.information != null) && <Alert className={'informationAlertModal'} message={
|
||||||
<div className={'informationContainerModal'}>
|
<div className={'informationContainerModal'}>
|
||||||
|
|
|
||||||
|
|
@ -8,12 +8,14 @@ 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 './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';
|
||||||
import {LINKS} from "../../../routes";
|
import {LINKS} from "../../../routes";
|
||||||
import {APP_TYPE} from "../../../config/app";
|
import {APP_TYPE} from "../../../config/app";
|
||||||
|
import get from "lodash.get";
|
||||||
|
import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from 'react-html-parser';
|
||||||
|
|
||||||
const Panel = Collapse.Panel;
|
const Panel = Collapse.Panel;
|
||||||
|
|
||||||
|
|
@ -34,7 +36,7 @@ export default class PaymentVouchers extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
|
console.log(this.props.vouchersStore, 'this.props.vouchersStore this.props.vouchersStore this.props.vouchersStore')
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
|
@ -51,16 +53,23 @@ export default class PaymentVouchers extends React.Component {
|
||||||
const qty = 1;
|
const qty = 1;
|
||||||
const total = price * qty;
|
const total = price * qty;
|
||||||
|
|
||||||
let applicationName = 'Giift';
|
// let applicationName = 'Giift';
|
||||||
let applicationLogo = 'http://giift.asacreative.com/giift_logo_wide.4d15de72.png';
|
// let applicationLogo = 'http://giift.asacreative.com/giift_logo_wide.4d15de72.png';
|
||||||
if(APP_TYPE === 'btn') {
|
// if(APP_TYPE === 'btn') {
|
||||||
applicationName = 'BTN';
|
// applicationName = 'BTN';
|
||||||
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';
|
||||||
|
// }
|
||||||
|
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(
|
return(
|
||||||
<div>
|
<div>
|
||||||
<div className="row">
|
<div className="upper-card">
|
||||||
<Collapse bordered={true}>
|
<Collapse bordered={true}>
|
||||||
<Panel style={{backgroundColor:'white'}} showArrow={false} header={
|
<Panel style={{backgroundColor:'white'}} showArrow={false} header={
|
||||||
<div style={{display:'flex',justifyContent:'space-between', paddingRight:20, paddingLeft:15}}>
|
<div style={{display:'flex',justifyContent:'space-between', paddingRight:20, paddingLeft:15}}>
|
||||||
|
|
@ -94,25 +103,27 @@ export default class PaymentVouchers extends React.Component {
|
||||||
</Panel>
|
</Panel>
|
||||||
</Collapse>
|
</Collapse>
|
||||||
</div>
|
</div>
|
||||||
<div className="row">
|
<div className="bottom-card">
|
||||||
<Card title={<div style={{display:'flex',justifyContent:'space-between'}}>
|
<Card title={<div style={{display:'flex',justifyContent:'space-between', alignItems: 'center'}}>
|
||||||
<div>
|
<div className={'item-container'}>
|
||||||
<h3 style={{fontSize:20}}>
|
<h3 className={'item-name'}>
|
||||||
Points {applicationName}
|
{this.props.vouchersStore.dataItems.name} - {this.props.vouchersStore.skuName}
|
||||||
|
</h3>
|
||||||
|
<h3 className={'item-points'}>
|
||||||
|
BTN Points Payment
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<img className={'image-logo'} src={image} />
|
||||||
<img style={{width:120, height:40}} src={applicationLogo} />
|
|
||||||
</div>
|
|
||||||
</div>}>
|
</div>}>
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<Alert message="Pastikan data anda sudah terverivikasi dan vouchers anda yang pilih sudah benar sebelum melakukan transaksi" type="warning" />
|
<Alert message="Pastikan data anda sudah terverifikasi dan vouchers yang anda pilih sudah benar sebelum melakukan konfirmasi transaksi ini" type="warning" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<ul>
|
<div>
|
||||||
<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>
|
{ReactHtmlParser(this.props.vouchersStore.dataItems.description)}
|
||||||
<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>
|
{/*<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>*/}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
50
src/common/pages/Vouchers/Payment/style.scss
Normal file
50
src/common/pages/Vouchers/Payment/style.scss
Normal file
|
|
@ -0,0 +1,50 @@
|
||||||
|
.upper-card{
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-card{
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(min-width: 1000px){
|
||||||
|
.image-logo{
|
||||||
|
width: 10vw;
|
||||||
|
height: 10vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-container{
|
||||||
|
height: 10vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
.item-name{
|
||||||
|
padding-top: 1vh;
|
||||||
|
margin-bottom: -0.25vh;
|
||||||
|
font-size: 1.35em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-points{
|
||||||
|
font-size: 0.95em;
|
||||||
|
color: #aaa;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width: 999px){
|
||||||
|
.image-logo{
|
||||||
|
width: 25vw;
|
||||||
|
height: 10vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-container{
|
||||||
|
.item-name{
|
||||||
|
font-size: 1.15em;
|
||||||
|
margin-bottom: -0.25vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-points{
|
||||||
|
font-size: 0.75em;
|
||||||
|
color: #aaa;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,26 +1,41 @@
|
||||||
import {inject, observer} from "mobx-react";
|
import {inject, observer} from "mobx-react";
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import './style.scss';
|
import './style.scss';
|
||||||
import {
|
import Button from '@material-ui/core/Button';
|
||||||
Step,
|
|
||||||
Stepper,
|
|
||||||
StepLabel,
|
|
||||||
} from 'material-ui/Stepper';
|
|
||||||
import RaisedButton from 'material-ui/RaisedButton';
|
import RaisedButton from 'material-ui/RaisedButton';
|
||||||
import FlatButton from 'material-ui/FlatButton';
|
import FlatButton from 'material-ui/FlatButton';
|
||||||
import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
|
import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
|
||||||
import {Divider} from "material-ui";
|
import {Divider} from "@material-ui/core";
|
||||||
import CheckoutVouchers from "../Checkout";
|
import CheckoutVouchers from "../Checkout";
|
||||||
import PaymentVouchers from "../Payment";
|
import PaymentVouchers from "../Payment";
|
||||||
import {LINKS} from "../../../routes";
|
import {LINKS} from "../../../routes";
|
||||||
import {notification, Modal} from "antd";
|
import {notification, Modal} from "antd";
|
||||||
import FinishVouchers from "../Finish";
|
import FinishVouchers from "../Finish";
|
||||||
|
import { withStyles } from '@material-ui/core/styles';
|
||||||
|
import Stepper from '@material-ui/core/Stepper';
|
||||||
|
import Step from '@material-ui/core/Step';
|
||||||
|
import StepLabel from '@material-ui/core/StepLabel';
|
||||||
|
import MediaQuery from 'react-responsive';
|
||||||
|
|
||||||
const confirm = Modal.confirm;
|
const confirm = Modal.confirm;
|
||||||
|
|
||||||
|
const styles = theme => ({
|
||||||
|
button: {
|
||||||
|
margin: theme.spacing.unit,
|
||||||
|
},
|
||||||
|
input: {
|
||||||
|
display: 'none',
|
||||||
|
},
|
||||||
|
divider: {
|
||||||
|
marginBottom: 10,
|
||||||
|
marginTop: 10,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
@inject('appstate')
|
@inject('appstate')
|
||||||
@observer
|
@observer
|
||||||
export default class VoucherStepperComponent extends React.Component {
|
export class VoucherStepper extends React.Component {
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
@ -38,7 +53,7 @@ export default class VoucherStepperComponent extends React.Component {
|
||||||
componentWillMount() {
|
componentWillMount() {
|
||||||
if(!this.vouchersStore.dataItems.name){
|
if(!this.vouchersStore.dataItems.name){
|
||||||
// alert('jalan')
|
// alert('jalan')
|
||||||
this.props.history.push(LINKS.VOUCHERS);
|
this.props.history.push(LINKS.DASHBOARD);
|
||||||
}
|
}
|
||||||
// alert('engga')
|
// alert('engga')
|
||||||
}
|
}
|
||||||
|
|
@ -51,6 +66,7 @@ export default class VoucherStepperComponent extends React.Component {
|
||||||
title: 'Anda yakin mau menukarkan voucher?',
|
title: 'Anda yakin mau menukarkan voucher?',
|
||||||
content: 'Sistem akan langsung memotong point anda ketika anda menekan tombol konfirmasi dibawah.',
|
content: 'Sistem akan langsung memotong point anda ketika anda menekan tombol konfirmasi dibawah.',
|
||||||
onOk: () => {
|
onOk: () => {
|
||||||
|
this.globalUI.showDialogLoading();
|
||||||
this.vouchersStore.buyVoucher(this.vouchersStore.skuId)
|
this.vouchersStore.buyVoucher(this.vouchersStore.skuId)
|
||||||
.then(res => {
|
.then(res => {
|
||||||
const openNotificationWithIcon = (type) => {
|
const openNotificationWithIcon = (type) => {
|
||||||
|
|
@ -94,19 +110,24 @@ export default class VoucherStepperComponent extends React.Component {
|
||||||
};
|
};
|
||||||
|
|
||||||
renderButton = () => {
|
renderButton = () => {
|
||||||
|
const {classes} = this.props;
|
||||||
return(
|
return(
|
||||||
<div style={{width: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'space-between', marginTop: 12,}}>
|
<div style={{width: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'space-between', marginTop: 12,}}>
|
||||||
<FlatButton
|
{/*<FlatButton*/}
|
||||||
label="Back"
|
{/*label="Back"*/}
|
||||||
disabled={this.state.stepIndex === 2}
|
{/*disabled={this.state.stepIndex === 2}*/}
|
||||||
onClick={(this.state.stepIndex === 0) ? () => this.props.history.goBack() : this.handlePrev}
|
{/*onClick={(this.state.stepIndex === 0) ? () => this.props.history.goBack() : this.handlePrev}*/}
|
||||||
style={{marginRight: 12}}
|
{/*style={{marginRight: 12}}*/}
|
||||||
/>
|
{/*/>*/}
|
||||||
<RaisedButton
|
<Button disabled={this.state.stepIndex === 2} onClick={(this.state.stepIndex === 0) ? () => this.props.history.goBack() : this.handlePrev} className={classes.button}>Back</Button>
|
||||||
label={this.state.stepIndex === 2 ? 'Finish' : 'Next'}
|
<Button variant="contained" color="primary" className={classes.button} onClick={this.handleNext}>
|
||||||
primary={true}
|
{this.state.stepIndex === 2 ? 'Finish' : 'Next'}
|
||||||
onClick={this.handleNext}
|
</Button>
|
||||||
/>
|
{/*<RaisedButton*/}
|
||||||
|
{/*label={this.state.stepIndex === 2 ? 'Finish' : 'Next'}*/}
|
||||||
|
{/*primary={true}*/}
|
||||||
|
{/*onClick={this.handleNext}*/}
|
||||||
|
{/*/>*/}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
@ -126,6 +147,7 @@ export default class VoucherStepperComponent extends React.Component {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {finished, stepIndex} = this.state;
|
const {finished, stepIndex} = this.state;
|
||||||
|
const {classes} = this.props;
|
||||||
const contentStyle = {margin: '0 16px'};
|
const contentStyle = {margin: '0 16px'};
|
||||||
|
|
||||||
if(!this.vouchersStore.dataItems.name){
|
if(!this.vouchersStore.dataItems.name){
|
||||||
|
|
@ -147,36 +169,36 @@ export default class VoucherStepperComponent extends React.Component {
|
||||||
{/*<Divider style={{marginBottom:10,marginTop:10}} />*/}
|
{/*<Divider style={{marginBottom:10,marginTop:10}} />*/}
|
||||||
{/*</div>*/}
|
{/*</div>*/}
|
||||||
<div className={'stepper-container'}>
|
<div className={'stepper-container'}>
|
||||||
<Stepper activeStep={stepIndex}>
|
<MediaQuery query="(min-device-width: 1224px)">
|
||||||
<Step>
|
<Stepper activeStep={stepIndex}>
|
||||||
<StepLabel>Checkout your Voucher</StepLabel>
|
<Step>
|
||||||
</Step>
|
<StepLabel>Checkout your Voucher</StepLabel>
|
||||||
<Step>
|
</Step>
|
||||||
<StepLabel>Process your Payment</StepLabel>
|
<Step>
|
||||||
</Step>
|
<StepLabel>Process your Payment</StepLabel>
|
||||||
<Step>
|
</Step>
|
||||||
<StepLabel>Finish</StepLabel>
|
<Step>
|
||||||
</Step>
|
<StepLabel>Finish</StepLabel>
|
||||||
</Stepper>
|
</Step>
|
||||||
<Divider style={{marginBottom:10,marginTop:10}} />
|
</Stepper>
|
||||||
|
</MediaQuery>
|
||||||
|
<MediaQuery query="(max-device-width: 1224px)">
|
||||||
|
<Stepper activeStep={stepIndex}>
|
||||||
|
<Step>
|
||||||
|
<StepLabel></StepLabel>
|
||||||
|
</Step>
|
||||||
|
<Step>
|
||||||
|
<StepLabel></StepLabel>
|
||||||
|
</Step>
|
||||||
|
<Step>
|
||||||
|
<StepLabel></StepLabel>
|
||||||
|
</Step>
|
||||||
|
</Stepper>
|
||||||
|
</MediaQuery>
|
||||||
|
<Divider component="div" className={classes.divider} />
|
||||||
|
{/*<Divider style={{marginBottom:10,marginTop:10}} />*/}
|
||||||
<div style={contentStyle}>
|
<div style={contentStyle}>
|
||||||
{finished ? (
|
{this.getStepContent(stepIndex)}
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -184,3 +206,9 @@ export default class VoucherStepperComponent extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
VoucherStepper.propTypes = {
|
||||||
|
classes: PropTypes.object.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default withStyles(styles)(VoucherStepper);
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,23 @@
|
||||||
.stepper{
|
.stepper{
|
||||||
margin-top: 5vh;
|
margin-top: 5vh;
|
||||||
.divider-container{
|
display: flex;
|
||||||
max-width: 65vw;
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
//background-color: #fff;
|
||||||
|
@media(min-width: 1000px){
|
||||||
|
.divider-container{
|
||||||
|
width: 60vw;
|
||||||
|
}
|
||||||
|
.stepper-container{
|
||||||
|
width: 60vw;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.stepper-container{
|
@media(max-width: 999px){
|
||||||
max-width: 65vw;
|
.divider-container{
|
||||||
|
width: 90vw;
|
||||||
|
}
|
||||||
|
.stepper-container{
|
||||||
|
width: 90vw;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -53,6 +53,7 @@ export default class WalletComponent extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
|
this.props.appstate.transaction.getAll();
|
||||||
this.purchasedItemStore.getAll().then(res => {
|
this.purchasedItemStore.getAll().then(res => {
|
||||||
console.log(res, 'ini purchased items')
|
console.log(res, 'ini purchased items')
|
||||||
})
|
})
|
||||||
|
|
@ -74,38 +75,39 @@ export default class WalletComponent extends React.Component {
|
||||||
const voucher = <NumberFormat value={(this.props.appstate.wallet.data.wallet).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>;
|
const voucher = <NumberFormat value={(this.props.appstate.wallet.data.wallet).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>;
|
||||||
const points = <NumberFormat value={this.props.appstate.wallet.data.point} displayType={'text'} thousandSeparator={true}/>;
|
const points = <NumberFormat value={this.props.appstate.wallet.data.point} displayType={'text'} thousandSeparator={true}/>;
|
||||||
|
|
||||||
const data = [
|
// const data = [
|
||||||
{
|
// {
|
||||||
id: faker.random.uuid(),
|
// id: faker.random.uuid(),
|
||||||
created_at: faker.date.past(),
|
// created_at: faker.date.past(),
|
||||||
type: 'Points',
|
// type: 'Points',
|
||||||
amount: faker.commerce.price()
|
// amount: faker.commerce.price()
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: faker.random.uuid(),
|
// id: faker.random.uuid(),
|
||||||
created_at: faker.date.past(),
|
// created_at: faker.date.past(),
|
||||||
type: 'Points',
|
// type: 'Points',
|
||||||
amount: faker.commerce.price()
|
// amount: faker.commerce.price()
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: faker.random.uuid(),
|
// id: faker.random.uuid(),
|
||||||
created_at: faker.date.past(),
|
// created_at: faker.date.past(),
|
||||||
type: 'Voucher',
|
// type: 'Voucher',
|
||||||
amount: faker.commerce.price()
|
// amount: faker.commerce.price()
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: faker.random.uuid(),
|
// id: faker.random.uuid(),
|
||||||
created_at: faker.date.past(),
|
// created_at: faker.date.past(),
|
||||||
type: 'Voucher',
|
// type: 'Voucher',
|
||||||
amount: faker.commerce.price()
|
// amount: faker.commerce.price()
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: faker.random.uuid(),
|
// id: faker.random.uuid(),
|
||||||
created_at: faker.date.past(),
|
// created_at: faker.date.past(),
|
||||||
type: 'Points',
|
// type: 'Points',
|
||||||
amount: faker.commerce.price()
|
// amount: faker.commerce.price()
|
||||||
},
|
// },
|
||||||
];
|
// ];
|
||||||
|
const data = this.props.appstate.transaction.list;
|
||||||
|
|
||||||
const columns = [{
|
const columns = [{
|
||||||
title: 'Id',
|
title: 'Id',
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@ export class Authentication {
|
||||||
@observable isLoggingIn = false;
|
@observable isLoggingIn = false;
|
||||||
@observable isInviting = false;
|
@observable isInviting = false;
|
||||||
@observable removingUser = false;
|
@observable removingUser = false;
|
||||||
@observable isNeedEmailVerification = false;
|
// @observable isNeedEmailVerification = false;
|
||||||
@observable userWallet = {};
|
@observable userWallet = {};
|
||||||
@observable userProfile = {
|
@observable userProfile = {
|
||||||
email : '',
|
email : '',
|
||||||
|
|
@ -37,6 +37,7 @@ export class Authentication {
|
||||||
// airline_settings: []
|
// airline_settings: []
|
||||||
// }
|
// }
|
||||||
};
|
};
|
||||||
|
@observable otpData = {}
|
||||||
|
|
||||||
constructor(context) {
|
constructor(context) {
|
||||||
this.context = context;
|
this.context = context;
|
||||||
|
|
@ -51,9 +52,10 @@ export class Authentication {
|
||||||
return this.http.post("authentication/login", data)
|
return this.http.post("authentication/login", data)
|
||||||
.then(res => {
|
.then(res => {
|
||||||
this.isLoggingIn = false;
|
this.isLoggingIn = false;
|
||||||
this.isNeedEmailVerification = res.need_email_verification;
|
if(res.token) {
|
||||||
this.context.setToken(res.token);
|
this.context.setToken(res.token);
|
||||||
this.context.loadDataAfterLogin();
|
this.context.loadDataAfterLogin();
|
||||||
|
}
|
||||||
return res;
|
return res;
|
||||||
})
|
})
|
||||||
.catch(err => {
|
.catch(err => {
|
||||||
|
|
@ -73,6 +75,13 @@ export class Authentication {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@action
|
||||||
|
verifyEmail(key) {
|
||||||
|
return this.http.post('authentication/email_verification', {
|
||||||
|
key
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
@action
|
@action
|
||||||
logout() {
|
logout() {
|
||||||
this.context.setToken("");
|
this.context.setToken("");
|
||||||
|
|
@ -117,6 +126,31 @@ export class Authentication {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@action
|
||||||
|
resendEmail(data) {
|
||||||
|
this.isRegistering = true;
|
||||||
|
return this.http.post("authentication/resend_email_verification", data)
|
||||||
|
.then(res => {
|
||||||
|
return res;
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
throw err;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
@action
|
||||||
|
validateOtp(data) {
|
||||||
|
return this.http.post("authentication/validate_otp", data)
|
||||||
|
.then(res => {
|
||||||
|
this.context.setToken(res.token);
|
||||||
|
this.context.loadDataAfterLogin();
|
||||||
|
return res;
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
throw err;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
createCookie(name,value,days) {
|
createCookie(name,value,days) {
|
||||||
let expires
|
let expires
|
||||||
if (days) {
|
if (days) {
|
||||||
|
|
|
||||||
|
|
@ -111,7 +111,7 @@ export default class Transaction {
|
||||||
@action
|
@action
|
||||||
getAll() {
|
getAll() {
|
||||||
this.isLoading = true;
|
this.isLoading = true;
|
||||||
return this.http.get("transaction")
|
return this.http.get("transactions")
|
||||||
.then(res => {
|
.then(res => {
|
||||||
this.list = res;
|
this.list = res;
|
||||||
this.isLoading = false;
|
this.isLoading = false;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user