336 lines
8.9 KiB
JavaScript
336 lines
8.9 KiB
JavaScript
import React from 'react';
|
|
import {observer, inject} from 'mobx-react';
|
|
import {
|
|
Dialog, FlatButton, RaisedButton,
|
|
Step,
|
|
StepLabel,
|
|
Stepper,
|
|
IconButton
|
|
} from "material-ui";
|
|
import {DIALOG} from "../../../../stores/global_ui";
|
|
import schema from 'async-validator'
|
|
import AddressDetail from './Address';
|
|
|
|
@inject('appstate')
|
|
@observer
|
|
export default class AddressAdd extends React.Component {
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.props = props;
|
|
this.state = {
|
|
stepIndex: 0,
|
|
finished: false,
|
|
openedDialog: false,
|
|
openMaps : false,
|
|
confirmationDialog : false,
|
|
formData: {},
|
|
errorMessage: '',
|
|
default:{
|
|
is_shipment : true,
|
|
is_default : true
|
|
}
|
|
};
|
|
this.defaultState = Object.assign({}, this.state);
|
|
this.globalUI = props.appstate.globalUI;
|
|
this.userAddress = props.appstate.userAddress;
|
|
this.userData = props.appstate.userData;
|
|
}
|
|
|
|
componentDidMount(){
|
|
this.setState({
|
|
stepIndex:0
|
|
});
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps){
|
|
this.setState({stepIndex : 0,formData : nextProps.defaultValue, default : nextProps.defaultValue});
|
|
}
|
|
|
|
getStepContent(stepIndex) {
|
|
|
|
const {mode="create", defaultValue={}} = this.props;
|
|
|
|
switch (stepIndex) {
|
|
case 0:
|
|
return (
|
|
<AddressDetail
|
|
mode={mode}
|
|
defaultValue={defaultValue}
|
|
onChangeData={formData => this.setState({formData})}/>
|
|
);
|
|
}
|
|
}
|
|
|
|
handleOpen = () => {
|
|
this.setState({confirmationDialog: true})
|
|
};
|
|
|
|
handleNext = () => {
|
|
const {stepIndex} = this.state;
|
|
if (stepIndex === 0) {
|
|
|
|
const rules = {
|
|
name: [
|
|
{
|
|
required: true,
|
|
message: "Please fill address name"
|
|
}
|
|
],
|
|
address: [
|
|
{
|
|
required: true,
|
|
message: 'Please fill address',
|
|
}
|
|
],
|
|
province_id: [
|
|
{
|
|
required: true,
|
|
message: 'Please select province',
|
|
}
|
|
],
|
|
city_id: [
|
|
{
|
|
required: true,
|
|
message: 'Please select city',
|
|
}
|
|
],
|
|
phone_number: [
|
|
{
|
|
required: true,
|
|
message: 'Please fill phone number',
|
|
}
|
|
],
|
|
postal_code: [
|
|
{
|
|
required: true,
|
|
message: 'Please fill postal code',
|
|
}
|
|
],
|
|
};
|
|
|
|
const validator = new schema(rules);
|
|
console.log(this.state.formData);
|
|
validator.validate(this.state.formData, (errs, f) => {
|
|
console.log(errs);
|
|
|
|
if (errs) {
|
|
this.globalUI.showNotification("Something's Wrong", errs[0].message);
|
|
} else {
|
|
// let regex=/^(\([0-9]{4}\)\s*|[0-9]{4}\-|\([0-9]{3}\)\s*|[0-9]{3}\-|[0-9]{11,15})([0-9]{8}|\s*)$/;
|
|
let regex=/^(^\+62\s?|^0)(\d{3,4}-?){2}\d{3,4}$/g;
|
|
if(this.state.formData.phone_number.match(regex)) {
|
|
this.setState({
|
|
stepIndex: stepIndex + 1,
|
|
});
|
|
}
|
|
else{
|
|
this.globalUI.showNotification("Phone number should be correct !");
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
handlePrev = () => {
|
|
const {stepIndex} = this.state;
|
|
if (stepIndex > 0) {
|
|
this.setState({stepIndex: stepIndex - 1});
|
|
}
|
|
}
|
|
|
|
save = () => {
|
|
this.globalUI.hideDialog(DIALOG.ADDRESS.CREATE);
|
|
this.globalUI.showDialogLoading();
|
|
const {mode="create", defaultValue={}} = this.props;
|
|
var data = this.state.formData;
|
|
data.lat = this.userAddress.geoData.lat;
|
|
data.long = this.userAddress.geoData.lng;
|
|
data.geoaddress = this.userAddress.geoData.geoaddress;
|
|
|
|
if(this.userData.role == 'store') {
|
|
if (mode === "create") {
|
|
|
|
this.userAddress.addAddress(data).then(res=>{
|
|
this.globalUI.openSnackbar('Successfully add new Address');
|
|
}).catch((err)=> {
|
|
console.log(err);
|
|
this.globalUI.closeLoading();
|
|
})
|
|
} else if (mode === "update") {
|
|
this.userAddress.updateAddress(data).then(res=>{
|
|
this.globalUI.openSnackbar('Successfully update Address');
|
|
}).catch(err=>{
|
|
console.log(err);
|
|
this.globalUI.openSnackbar('Something Error');
|
|
})
|
|
|
|
}
|
|
}
|
|
else if(this.userData.role == 'administrator'){
|
|
if (mode === "create") {
|
|
this.userAddress.addAddressAdmin(this.props.id,data).then(res=>{
|
|
this.globalUI.openSnackbar('Successfully add new Address');
|
|
}).catch((err)=> {
|
|
console.log(err);
|
|
this.globalUI.closeLoading();
|
|
})
|
|
} else if (mode === "update") {
|
|
this.userAddress.updateAddressAdmin(this.props.id,data).then(res=>{
|
|
this.globalUI.openSnackbar('Successfully update Address');
|
|
}).catch(err=>{
|
|
console.log(err);
|
|
this.globalUI.openSnackbar('Something Error');
|
|
})
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
handleClose = () => {
|
|
this.setState({confirmationDialog: false,formData : {}})
|
|
};
|
|
|
|
|
|
continueButton() {
|
|
if (this.state.stepIndex === 1) {
|
|
return (
|
|
<RaisedButton
|
|
label="Finish"
|
|
primary={true}
|
|
onClick={this.save}
|
|
/>
|
|
);
|
|
} else {
|
|
return (
|
|
<RaisedButton
|
|
label="Next"
|
|
primary={true}
|
|
onClick={this.handleNext}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
openWarningDialog = ()=>{
|
|
// this.userAddress.deletedAddress(data.id).then(res=>{
|
|
// this.globalUI.openSnackbar('Delete Success');
|
|
// })
|
|
// console.log(data);
|
|
this.setState(
|
|
{
|
|
confirmationDialog :true,errorMessage:
|
|
'Are you sure want to delete this address?'}
|
|
)
|
|
;};
|
|
|
|
deletedAddress = (data)=>{
|
|
this.setState({confirmationDialog:false});
|
|
this.globalUI.hideDialog(DIALOG.ADDRESS.CREATE);
|
|
if(this.userData.role == 'store') {
|
|
this.userAddress.deletedAddress(data.id).then(res=>{
|
|
this.globalUI.openSnackbar('Delete success')
|
|
});
|
|
}
|
|
else if(this.userData.role == 'administrator'){
|
|
this.userAddress.deletedAddressAdmin(this.props.id,data.id).then(res=>{
|
|
this.globalUI.openSnackbar('Delete success')
|
|
});
|
|
}
|
|
};
|
|
|
|
render() {
|
|
|
|
const {finished, stepIndex} = this.state;
|
|
const {mode="create", defaultValue={}} = this.props;
|
|
|
|
const actions = [
|
|
<RaisedButton
|
|
label="No"
|
|
primary={false}
|
|
style={{marginRight: 10}}
|
|
onClick={this.handleClose}
|
|
/>,
|
|
<RaisedButton
|
|
label="Yes"
|
|
primary={true}
|
|
style={{marginRight: 10}}
|
|
onClick={()=>this.deletedAddress(this.state.formData)}
|
|
/>
|
|
];
|
|
|
|
const title =
|
|
<div>
|
|
<h4 style={{
|
|
fontSize: 26,
|
|
marginBottom: 0,
|
|
marginTop: 0,
|
|
fontWeight: 500,
|
|
color: "black"
|
|
}}>{(mode === "create") ? "Add New" : "Update"} Address</h4>
|
|
</div>
|
|
;
|
|
|
|
return (
|
|
<div>
|
|
<Dialog
|
|
title={<div>
|
|
<div>{title}</div>
|
|
{/*<div style={{padding: "0px 14px 0 0", marginTop: 10}}>*/}
|
|
{/*<Stepper activeStep={stepIndex}>*/}
|
|
{/*<Step>*/}
|
|
{/*<StepLabel style={{padding: "0px 14px 0px 0px", height: 52}}>Bank Account</StepLabel>*/}
|
|
{/*</Step>*/}
|
|
{/*/!* <Step>*/}
|
|
{/*<StepLabel style={{padding: "0px 0px 0px 14px", height: 52}}>Identification & Passport</StepLabel>*/}
|
|
{/*</Step> *!/*/}
|
|
{/*</Stepper>*/}
|
|
{/*</div>*/}
|
|
</div>}
|
|
titleStyle={{paddingBottom: 10}}
|
|
modal={false}
|
|
actions={<div style={{marginTop: 12}}>
|
|
<FlatButton
|
|
label={(stepIndex === 0) ? "Cancel" : "Back"}
|
|
style={{marginRight: 10}}
|
|
primary={true}
|
|
onClick={() => (stepIndex === 0) ? this.globalUI.hideDialog(DIALOG.ADDRESS.CREATE) : this.handlePrev()}
|
|
/>
|
|
{this.continueButton()}
|
|
{(this.state.default.is_shipment != true && this.state.default.is_default != true) ?
|
|
<FlatButton
|
|
label={"Delete"}
|
|
style={{marginRight: 10}}
|
|
primary={true}
|
|
onClick={() => this.openWarningDialog()}
|
|
/> : ''}
|
|
</div>}
|
|
autoScrollBodyContent={true}
|
|
repositionOnUpdate={true}
|
|
open={this.globalUI[DIALOG.ADDRESS.CREATE]}
|
|
onRequestClose={this.handleClose}
|
|
paperClassName={'radius6'}
|
|
contentClassName={'marketplace-dialog-small'}
|
|
>
|
|
<div style={{marginTop: 20}}>
|
|
{this.getStepContent(stepIndex)}
|
|
</div>
|
|
</Dialog>
|
|
|
|
<Dialog
|
|
title="Warning"
|
|
actions={actions}
|
|
modal={false}
|
|
autoScrollBodyContent={false}
|
|
contentStyle={{width: 350}}
|
|
open={this.state.confirmationDialog}
|
|
onRequestClose={() => this.handleClose()}
|
|
>
|
|
{this.state.errorMessage}
|
|
</Dialog>
|
|
</div>
|
|
)
|
|
}
|
|
}
|