merge
This commit is contained in:
@@ -29,7 +29,8 @@ imageUrl = "https://giift-api.asacreative.com";
|
||||
|
||||
type = 'localhost';
|
||||
if(window.location.href.includes("localhost") || window.location.href.includes("marketplace-store")){
|
||||
appUrl = 'http://localhost:7700'
|
||||
appUrl = 'http://localhost:7700';
|
||||
apiUrl = "http://localhost:4001/"
|
||||
}else{
|
||||
appUrl = 'https://sillyfish.asacreative.com';
|
||||
}
|
||||
|
||||
@@ -38,6 +38,10 @@ export default class LoginComponent extends React.Component {
|
||||
});
|
||||
};
|
||||
|
||||
register = () => {
|
||||
this.props.history.push(LINKS.REGISTER);
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
let loginImage = 'http://giift.asacreative.com/giift_logo_wide.4d15de72.png';
|
||||
@@ -69,6 +73,9 @@ export default class LoginComponent extends React.Component {
|
||||
Sign In
|
||||
</button>
|
||||
</div>
|
||||
<div style={{marginTop:12,display:'flex',flexDirection:'row'}}>
|
||||
<a onClick={()=> this.register()} style={{fontWeight:20,fontSize:14}}>Does not have account yet? Let's create your account now!</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
179
src/common/pages/RegisterNew/index.js
Normal file
179
src/common/pages/RegisterNew/index.js
Normal file
@@ -0,0 +1,179 @@
|
||||
import React from 'react';
|
||||
import withStyles from "@material-ui/core/styles/withStyles";
|
||||
import {styles} from './styles';
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
import Paper from '@material-ui/core/Paper';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import TextField from '@material-ui/core/TextField';
|
||||
import Visibility from '@material-ui/icons/Visibility';
|
||||
import VisibilityOff from '@material-ui/icons/VisibilityOff';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import Hidden from '@material-ui/core/Hidden';
|
||||
import InputAdornment from '@material-ui/core/InputAdornment';
|
||||
import IconButton from '@material-ui/core/IconButton';
|
||||
import { Link } from 'react-router-dom'
|
||||
import {inject, observer} from "mobx-react";
|
||||
import schema from 'async-validator'
|
||||
import {startCase} from 'lodash';
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
class RegisterPage extends React.Component{
|
||||
state = {
|
||||
phone_number : "",
|
||||
email : "",
|
||||
password : "",
|
||||
full_name : "",
|
||||
showPassword : false,
|
||||
openDialog : false
|
||||
};
|
||||
|
||||
constructor(props){
|
||||
super(props);
|
||||
// this.global_ui = props.store.global_ui;
|
||||
}
|
||||
|
||||
handleChange = name => event => {
|
||||
this.setState({
|
||||
[name]: event.target.value,
|
||||
});
|
||||
};
|
||||
|
||||
viewPassword = ()=>{
|
||||
this.setState({
|
||||
showPassword : !this.state.showPassword
|
||||
})
|
||||
};
|
||||
|
||||
register = ()=>{
|
||||
// let rules = {
|
||||
// full_name : {
|
||||
// type : 'string',
|
||||
// required : true,
|
||||
// min : 3
|
||||
// },
|
||||
// phone_number : {
|
||||
// type : 'string',
|
||||
// required : true,
|
||||
// min : 8
|
||||
// },
|
||||
// email : {
|
||||
// type : 'email',
|
||||
// required : true
|
||||
// }
|
||||
// };
|
||||
// const validator = new schema(rules);
|
||||
// validator.validate(this.state, (errors, fields) => {
|
||||
// if(errors) {
|
||||
// this.global_ui.openAlert({
|
||||
// type : 'error',
|
||||
// title : startCase(errors[0].message),
|
||||
// subtitle : 'Please validate the input'
|
||||
// });
|
||||
// return false;
|
||||
// }
|
||||
// this.global_ui.openLoader();
|
||||
// setTimeout(()=>{
|
||||
// this.global_ui.closeLoader();
|
||||
// this.global_ui.openAlert({
|
||||
// title : "Registration Succeed",
|
||||
// subtitle : 'Thank you for register and enjoy your day',
|
||||
// type : 'success'
|
||||
// });
|
||||
// },1000)
|
||||
// });
|
||||
};
|
||||
|
||||
render(){
|
||||
const { classes } = this.props;
|
||||
return (
|
||||
<div className={classes.container}>
|
||||
{/*<AlertSuccess open={appStore.global_ui.openSuccess} onClose={()=>appStore.global_ui.closeAlertSuccess()}/>*/}
|
||||
|
||||
<Grid container spacing={0} className={classes.gridContainer}>
|
||||
<Grid item xs={12} className={classes.logoContainer}>
|
||||
<img src={require('../../../../assets/images/logo_new.png')} className={classes.logo} />
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={12} md={10} lg={6} className={classes.registerContainer}>
|
||||
<Grid container spacing={24} className={classes.registerPaper}>
|
||||
<Hidden smDown>
|
||||
<Grid item xs={6}>
|
||||
<img src={require('../../../../assets/images/register_image_2.png')} width={"80%"}/>
|
||||
<Typography style={{color : '#FFF'}} variant={"h6"}>
|
||||
Redeem point, Get Your Item!
|
||||
</Typography>
|
||||
<Typography style={{color : '#FFF'}} variant={"subtitle2"}>
|
||||
Get promo and benefits with BTN
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Hidden>
|
||||
<Grid item xs={12} sm={12} md={6} style={{paddingLeft : 50,paddingRight : 50}}>
|
||||
<Paper className={classes.formRegister}>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
Register Now
|
||||
</Typography>
|
||||
<TextField
|
||||
id="name"
|
||||
label="Full name"
|
||||
value={this.state.full_name}
|
||||
onChange={this.handleChange('full_name')}
|
||||
margin="normal"
|
||||
type={"text"}
|
||||
variant="outlined"
|
||||
/>
|
||||
<TextField
|
||||
id="phone"
|
||||
label="Phone Number"
|
||||
value={this.state.phone_number}
|
||||
onChange={this.handleChange('phone_number')}
|
||||
margin="normal"
|
||||
type={"number"}
|
||||
variant="outlined"
|
||||
/>
|
||||
<TextField
|
||||
id="email"
|
||||
label="Email"
|
||||
value={this.state.email}
|
||||
onChange={this.handleChange('email')}
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
/>
|
||||
{/*<div style={{display : 'flex',alignItems : 'center'}}>*/}
|
||||
{/*<TextField*/}
|
||||
{/*id="password"*/}
|
||||
{/*label="Password"*/}
|
||||
{/*value={this.state.password}*/}
|
||||
{/*onChange={this.handleChange('password')}*/}
|
||||
{/*margin="normal"*/}
|
||||
{/*type={this.state.showPassword ? 'text' : 'password'}*/}
|
||||
{/*fullWidth*/}
|
||||
{/*variant="outlined"*/}
|
||||
{/*InputProps={{*/}
|
||||
{/*endAdornment: (*/}
|
||||
{/*<InputAdornment position="end">*/}
|
||||
{/*<IconButton*/}
|
||||
{/*aria-label="Toggle password visibility"*/}
|
||||
{/*onClick={this.viewPassword}*/}
|
||||
{/*>*/}
|
||||
{/*{this.state.showPassword ? <VisibilityOff /> : <Visibility />}*/}
|
||||
{/*</IconButton>*/}
|
||||
{/*</InputAdornment>*/}
|
||||
{/*),*/}
|
||||
{/*}}*/}
|
||||
{/*/>*/}
|
||||
<div style={{padding : 5,marginTop : 20}}>
|
||||
<Button fullWidth variant="contained" style={{backgroundColor:'#ffeb3b'}} onClick={this.register}>
|
||||
Sign Up
|
||||
</Button>
|
||||
</div>
|
||||
</Paper>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default withStyles(styles)(RegisterPage);
|
||||
36
src/common/pages/RegisterNew/styles.js
Normal file
36
src/common/pages/RegisterNew/styles.js
Normal file
@@ -0,0 +1,36 @@
|
||||
import yellow from '@material-ui/core/colors/yellow';
|
||||
export const styles = theme => ({
|
||||
container : {
|
||||
flex :1,
|
||||
flexGrow : 1,
|
||||
height : '100vh',
|
||||
backgroundColor:'#024f8e',
|
||||
marginTop: '-56px'
|
||||
},
|
||||
gridContainer : {
|
||||
flex :1,
|
||||
justifyContent:'center'
|
||||
},
|
||||
registerContainer: {
|
||||
marginTop : 50
|
||||
},
|
||||
formRegister : {
|
||||
padding : 20,
|
||||
display : 'flex',
|
||||
flexDirection: 'column',
|
||||
textAlign : 'center'
|
||||
},
|
||||
registerPaper : {
|
||||
flex :1,
|
||||
flexDirection : 'row',
|
||||
justifyContent:'center'
|
||||
},
|
||||
logo : {
|
||||
width : '200px'
|
||||
},
|
||||
logoContainer : {
|
||||
textAlign : 'center',
|
||||
background : yellow['500'],
|
||||
padding : 20
|
||||
}
|
||||
});
|
||||
@@ -8,12 +8,12 @@ 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';
|
||||
import {LINKS} from "../../../routes";
|
||||
import {Route} from "react-router-dom";
|
||||
import get from 'lodash.get';
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
@@ -40,6 +40,12 @@ export default class CheckoutVouchers extends React.Component {
|
||||
|
||||
render() {
|
||||
|
||||
let image = get(this.vouchersStore.dataItems, 'images.logo', '');
|
||||
|
||||
if (!image.includes('http')) {
|
||||
image = this.http.appendImagePath(image);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="wallet containerMiddle">
|
||||
<div className="row">
|
||||
@@ -56,7 +62,7 @@ export default class CheckoutVouchers extends React.Component {
|
||||
icon={<NavigationArrowBack />}
|
||||
/>
|
||||
<Divider style={{marginBottom:10,marginTop:10}} />
|
||||
<Card
|
||||
<Card
|
||||
// title={<div style={{display:'flex',justifyContent:'center'}}>
|
||||
// <p style={{fontSize:20}}>
|
||||
// Detail Pembelian
|
||||
@@ -74,7 +80,7 @@ export default class CheckoutVouchers extends React.Component {
|
||||
<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(this.vouchersStore.dataItems.images.logo)} />
|
||||
<img className={'imageCard'} src={this.http.appendImagePath(image)} />
|
||||
{/* <Avatar size={74} src={this.http.appendImagePath(this.vouchersStore.dataItems.images.logo)} /> */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -28,16 +28,16 @@ export class ItemCard extends React.Component {
|
||||
|
||||
render() {
|
||||
const {data = {}} = this.props;
|
||||
let image = ''
|
||||
if(data.images.logo.includes('http')){
|
||||
image = data.images.logo;
|
||||
}else{
|
||||
image = this.http.appendImagePath(data.images.logo);
|
||||
|
||||
let image = get(data, 'images.logo', '');
|
||||
|
||||
if (!image.includes('http')) {
|
||||
image = this.http.appendImagePath(image);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className={'itemCard'}>
|
||||
<img className={'imageCard'} src={image} />
|
||||
<img className={'imageCard'} src={image}/>
|
||||
<p className={'titleCard'}>{data.name}</p>
|
||||
</Card>
|
||||
)
|
||||
|
||||
@@ -1,13 +1,16 @@
|
||||
import React from 'react';
|
||||
import {inject, observer} from 'mobx-react';
|
||||
import {Link} from 'react-router';
|
||||
import {Link, withRouter} from 'react-router';
|
||||
import { Modal, Button, Alert, Select } from 'antd';
|
||||
import './style.scss';
|
||||
import { Route } from 'react-router-dom'
|
||||
import {LINKS} from "../../../routes";
|
||||
import NumberFormat from 'react-number-format';
|
||||
import get from 'lodash.get';
|
||||
|
||||
const Option = Select.Option;
|
||||
|
||||
@withRouter
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class ModalVouchersComponent extends React.Component {
|
||||
@@ -26,17 +29,25 @@ export default class ModalVouchersComponent extends React.Component {
|
||||
this.vouchersStore = props.appstate.vouchers;
|
||||
}
|
||||
|
||||
componentDidMount() {}
|
||||
componentDidMount() {
|
||||
const {item} = this.props.appstate;
|
||||
|
||||
item.getDetail(this.props.data.id);
|
||||
}
|
||||
|
||||
render() {
|
||||
const {item} = this.props.appstate;
|
||||
const {data = {}, isVisible = false, onOk = () => {}, onCancel = () => {}, title='Modal'} = this.props;
|
||||
let image = ''
|
||||
if(data.images.logo.includes('http')){
|
||||
image = data.images.logo;
|
||||
}else{
|
||||
image = this.http.appendImagePath(data.images.logo);
|
||||
let image = get(data, 'images.logo', '');
|
||||
|
||||
if (!image.includes('http')) {
|
||||
image = this.http.appendImagePath(image);
|
||||
}
|
||||
|
||||
// console.log(item.selectedData);
|
||||
|
||||
const additional_data = get(data, 'additional_data', {}) || {};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={title}
|
||||
@@ -74,10 +85,10 @@ export default class ModalVouchersComponent extends React.Component {
|
||||
}}>
|
||||
<p className={'descriptionModal'} >{data.description}</p>
|
||||
|
||||
{(data.additional_data.information != null) && <Alert className={'informationAlertModal'} message={
|
||||
{(additional_data.information != null) && <Alert className={'informationAlertModal'} message={
|
||||
<div className={'informationContainerModal'}>
|
||||
<p className={'informationTitleModal'}>Information</p>
|
||||
<p className={'informationBodyModal'}>{data.additional_data.information}</p>
|
||||
<p className={'informationBodyModal'}>{additional_data.information}</p>
|
||||
</div>
|
||||
} type="success" />}
|
||||
|
||||
@@ -88,11 +99,10 @@ export default class ModalVouchersComponent extends React.Component {
|
||||
placeholder="Please Select your Option"
|
||||
optionFilterProp="children"
|
||||
onChange={(value) => {
|
||||
this.setState({selectedOption: value})
|
||||
this.setState({hidden: 'none'})
|
||||
this.setState({selectedOption: value});
|
||||
this.setState({hidden: 'none'});
|
||||
// console.log('onChange',value);
|
||||
const points = data.sku.filter(item => item.id == value);
|
||||
console.log(points[0].price,'points',points[0].name);
|
||||
const points = item.selectedData.sku.filter(item => item.id == value);
|
||||
this.setState({
|
||||
skuName :points[0].name,
|
||||
skuPrice : points[0].price,
|
||||
@@ -104,9 +114,27 @@ export default class ModalVouchersComponent extends React.Component {
|
||||
this.setState({hidden: 'inline'})
|
||||
}}
|
||||
>
|
||||
{data.sku.map((item, index) => {
|
||||
return <Option value={item.id}><div style={{display:'flex',justifyContent:'space-between', width:'100%'}}><span>{item.name}</span> <span style={{color:'#FF6F00', display:this.state.hidden}}><NumberFormat value={(+item.price).toFixed(0)} displayType={'text'} thousandSeparator={true}/> </span></div></Option>
|
||||
// return <Option value={item.id}>{item.price}</Option>
|
||||
{(item.selectedData.sku || []).map((item, index) => {
|
||||
// const {vouchers:[{count}]} = item;
|
||||
|
||||
let count = 1;
|
||||
|
||||
if (data.source === 'internal') {
|
||||
count = get(item, 'vouchers[0].count', 0) || 0;
|
||||
}
|
||||
console.log(count);
|
||||
const outOfStock = !(+count > 0);
|
||||
|
||||
return (
|
||||
<Option disabled={outOfStock} value={item.id}>
|
||||
<div style={{display:'flex',justifyContent:'space-between', width:'100%'}}>
|
||||
<span>{item.name} {outOfStock ? " - Out of Stock" : ""}</span>
|
||||
<span style={{color:'#FF6F00', display:this.state.hidden}}>
|
||||
Rp. <NumberFormat value={(+item.price).toFixed(0)} displayType={'text'} thousandSeparator={true}/>
|
||||
</span>
|
||||
</div>
|
||||
</Option>
|
||||
)
|
||||
})}
|
||||
</Select>
|
||||
|
||||
@@ -117,16 +145,21 @@ export default class ModalVouchersComponent extends React.Component {
|
||||
</div>
|
||||
<div className={'costRightPaneModal'}>
|
||||
<Route render={({ history}) => (
|
||||
<Button onClick={() => {
|
||||
this.vouchersStore.dataItems = data;
|
||||
this.vouchersStore.skuId = this.state.selectedOption;
|
||||
this.vouchersStore.skuName = this.state.skuName;
|
||||
this.vouchersStore.skuPrice = this.state.skuPrice;
|
||||
console.log('enak',this.state);
|
||||
history.push(LINKS.VERIFY_VOUCHERS);
|
||||
}
|
||||
}
|
||||
type="primary" disabled={this.state.buttonDisbaled} size={"large"} block>Buy</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
this.vouchersStore.dataItems = data;
|
||||
this.vouchersStore.skuId = this.state.selectedOption;
|
||||
this.vouchersStore.skuName = this.state.skuName;
|
||||
this.vouchersStore.skuPrice = this.state.skuPrice;
|
||||
console.log('enak',this.state);
|
||||
history.push(LINKS.VERIFY_VOUCHERS);
|
||||
}}
|
||||
type="primary"
|
||||
disabled={this.state.buttonDisbaled}
|
||||
size={"large"}
|
||||
block>
|
||||
Buy
|
||||
</Button>
|
||||
)} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -69,13 +69,17 @@ export default class VouchersComponent extends React.Component {
|
||||
}
|
||||
</Row>
|
||||
|
||||
<ModalVouchersComponent
|
||||
title={this.state.data.name+' Vouchers'}
|
||||
data={this.state.data}
|
||||
isVisible={this.state.isOpened}
|
||||
onOk={() => this.setState({isOpened: false})}
|
||||
onCancel={() => this.setState({isOpened: false})}
|
||||
/>
|
||||
{this.state.isOpened && (
|
||||
<ModalVouchersComponent
|
||||
title={this.state.data.name+' Vouchers'}
|
||||
data={this.state.data}
|
||||
isVisible={this.state.isOpened}
|
||||
onOk={() => this.setState({isOpened: false})}
|
||||
onCancel={() => this.setState({isOpened: false})}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from "react";
|
||||
import {observer, inject} from 'mobx-react';
|
||||
import {BrowserRouter as Router, Route, Switch, Redirect} from "react-router-dom";
|
||||
import RegisterComponent from "./pages/Register";
|
||||
import RegisterComponent from "./pages/RegisterNew";
|
||||
import LoginComponent from "./pages/Login";
|
||||
import ForgotPasswordComponent from "./pages/ForgotPassword";
|
||||
import ChangePassword from './pages/ChangePassword';
|
||||
|
||||
Reference in New Issue
Block a user