+
+
);
}
@@ -812,43 +833,197 @@ class OrderForm extends React.PureComponent {
static get propTypes() {
return {
+ isProcessing: PropTypes.bool,
+ isProcessingComplete: PropTypes.bool,
onClickSubmit: PropTypes.func,
};
}
constructor(props) {
super(props);
- this.state = {note: ''};
+ this.state = {
+ note: '',
+ email: '',
+ error: {
+ note: null,
+ email: null,
+ },
+ empty: {
+ note: null,
+ email: null,
+ },
+ };
- this.handleNoteChange = this.handleNoteChange.bind(this);
+ 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);
}
- handleNoteChange(event) {
+ 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({
- note: event.target.value,
+ ...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) {
- if (this.props.onClickSubmit) {
- this.props.onClickSubmit(this.state.note);
- }
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 {
+ email,
+ note,
+ error,
+ empty
+ } = this.state;
+
+ const { isProcessing, isProcessingComplete } = this.props;
+
return (
+ 
+
+
+
+
+ We've received your request and will be in contact soon.
+
+
+
+
+
+
-
@@ -1174,6 +1349,7 @@ class Shop extends React.PureComponent {
this.handleClickSubmit = this.handleClickSubmit.bind(this);
this.handleToggleOverlayRemove = this.handleToggleOverlayRemove.bind(this);
this.handleClickToggleMobileSideMenu = this.handleClickToggleMobileSideMenu.bind(this);
+ this.handleClickCloseRFQFeedback = this.handleClickCloseRFQFeedback.bind(this);
this.timer = null;
}
@@ -1375,7 +1551,7 @@ class Shop extends React.PureComponent {
});
}
- handleClickSubmit(note) {
+ handleClickSubmit(note, email) {
const crate = {
items: [],
type: this.state.currentMode,
@@ -1388,15 +1564,33 @@ class Shop extends React.PureComponent {
});
}
+ const {data} = this.props;
+
const a = document.createElement('a');
const num = (new Date()).getTime();
const subject = `[Order hardware] - Request Quote`;
- let body = `Hello!\n\nI would like to request a quotation for my below configuration:\n\n${JSON.stringify(crate)}\n\n(Please do not edit the machine-readable representation above)\n\n`;
+ let body = `Hello!I would like to request a quotation for my below configuration:
${JSON.stringify(crate)}
(Please do not edit the machine-readable representation above)
`; if (note) { - body = `${body}\n\nAdditional note:\n\n${note ? note.trim() : ''}`; + body = `${body}
Additional note:
${note ? note.trim() : ''}`; } + this.setState({isProcessing: true}); + + axios.post(data.API_RFQ, { + email, + body, + headers: {'X-MLABS-OH': 'rlebcleu'} + }).then(response => { + this.setState({isProcessing: false, shouldShowRFQFeedback: true, isProcessingComplete: true}); + }).catch(err => { + this.setState({isProcessing: false}, () => { + alert("We cannot receive your request. Try using the export by coping the configuration and send it to us at sales[at]m-labs.hk"); + }); + }) + + return; + document.body.appendChild(a); a.style = 'display: none'; @@ -1484,6 +1678,12 @@ class Shop extends React.PureComponent { }); } + handleClickCloseRFQFeedback() { + this.setState({ + shouldShowRFQFeedback: false, + }); + } + checkAlerts(prevItems, newItems) { console.log('--- START CHECKING CRATE WARNING ---'); @@ -1802,6 +2002,9 @@ class Shop extends React.PureComponent { rules, mobileSideMenuShouldOpen, newCardJustAdded, + isProcessing, + shouldShowRFQFeedback, + isProcessingComplete, } = this.state; const isMobile = window.deviceIsMobile(); @@ -1810,11 +2013,13 @@ class Shop extends React.PureComponent {