1
0
Fork 0
web2019/static/js/shop/OrderForm.jsx

220 lines
5.7 KiB
JavaScript

import React, {PureComponent} from 'react'
import PropTypes from "prop-types";
/**
* Components that renders the form to request quote.
*/
export class OrderForm extends PureComponent {
static get propTypes() {
return {
isProcessing: PropTypes.bool,
isProcessingComplete: PropTypes.bool,
onClickSubmit: PropTypes.func,
};
}
constructor(props) {
super(props);
this.state = {
note: '',
email: '',
error: {
note: null,
email: null,
},
empty: {
note: null,
email: null,
},
};
this.handleEmail = this.handleEmail.bind(this);
this.handleNote = this.handleNote.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.resetEmptyError = this.resetEmptyError.bind(this);
this.checkValidation = this.checkValidation.bind(this);
}
checkValidation() {
let isValid = true;
let validationFields = {...this.state};
const {
isEmpty: isEmailEmpty,
isError: isEmailError
} = this.validateEmail(this.state.email);
validationFields = {
...validationFields,
error: {
...this.state.error,
email: isEmailError,
},
empty: {
...this.state.empty,
email: isEmailEmpty,
}
}
this.setState(validationFields);
isValid =
!isEmailEmpty &&
!isEmailError
return isValid;
}
validateEmail(value) {
let isEmpty = null;
let isError = null;
const { t } = this.props;
if (!value || value.trim() === '') {
isEmpty = true;
} else if (value && !value.match(/^\w+([\+\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/)) {
isError = {
message: 'Your email is incomplete',
};
}
return { isEmpty, isError };
}
validateNote(value) {
let isEmpty = null;
if (!value || value.trim() === '') {
isEmpty = true;
}
return { isEmpty };
}
resetEmptyError(key) {
this.setState({
...this.state,
error: {
...this.state.error,
[key]: null,
},
empty: {
...this.state.empty,
[key]: null,
},
});
}
handleEmail(e) {
const value = e.target.value;
const { isEmpty, isError } = this.validateEmail(value);
this.setState({
...this.state,
email: value,
error: {
...this.state.error,
email: isError,
},
empty: {
...this.state.empty,
email: isEmpty,
}
});
}
handleNote(e) {
const value = e.target.value;
this.setState({
...this.state,
note: value,
});
}
handleSubmit(event) {
event.preventDefault();
if (this.props.onClickSubmit) {
// check validation input fields
const isValidated = this.checkValidation();
if (!isValidated) {
return false;
}
this.props.onClickSubmit(this.state.note, this.state.email);
}
}
render() {
const {
handleEmail,
handleNote,
resetEmptyError,
handleSubmit,
} = this;
const {
onClickShow,
} = this.props;
const {
email,
note,
error,
empty
} = this.state;
const { isProcessing, isProcessingComplete } = this.props;
return (
<div className="summary-form">
<form onSubmit={handleSubmit} noValidate>
<input
className={`${error && error.email ? 'errorField':''}`}
type="email"
placeholder="Email"
onFocus={() => resetEmptyError('email')}
onChange={handleEmail}
onBlur={handleEmail}
value={email} />
{ empty && empty.email ? (
<div className="error">
<small>Required</small>
</div>
) : null}
{ error && error.email ? (
<div className="error">
<small>Your email is incomplete</small>
</div>
) : null}
<textarea
onChange={handleNote}
defaultValue={note}
rows="5"
placeholder="Additional notes" />
<div className="d-flex flex-column flex-sm-row justify-content-between">
<input
className="btn btn-outline-primary w-100 m-0 mb-2 mb-sm-0 me-sm-2"
style={{'cursor': 'pointer', 'fontWeight': '700'}}
defaultValue="Show JSON"
onClick={onClickShow}
readOnly={true} />
<input className="btn btn-primary w-100 m-0 ms-sm-2" type="submit" value={`${isProcessing ? 'Processing ...' : 'Request quote'}`} />
</div>
{/*This will open an email window. Send the email to make your request.*/}
</form>
</div>
);
}
}