78 lines
2.6 KiB
JavaScript
78 lines
2.6 KiB
JavaScript
import React from 'react'
|
|
import {validateEmail, Validation} from "./validate.js";
|
|
import {useShopStore} from "./shop_store";
|
|
|
|
/**
|
|
* Components that renders the form to request quote.
|
|
*/
|
|
export function OrderForm() {
|
|
const {
|
|
email,
|
|
note,
|
|
isProcessing,
|
|
isProcessingComplete,
|
|
showDescription,
|
|
updateEmail,
|
|
updateNote,
|
|
submitForm,
|
|
} = useShopStore(state => ({
|
|
email: state.email,
|
|
note: state.note,
|
|
isProcessing: state.isProcessing,
|
|
isProcessingComplete: state.isProcessingComplete,
|
|
showDescription: state.showDescription,
|
|
updateEmail: state.updateEmail,
|
|
updateNote: state.updateNote,
|
|
submitForm: state.submitForm,
|
|
}));
|
|
|
|
|
|
return (
|
|
<div className="summary-form">
|
|
|
|
<form onSubmit={submitForm} noValidate>
|
|
|
|
<input
|
|
className={`${email.error > 0 ? 'errorField' : ''}`}
|
|
type="email"
|
|
placeholder="Email"
|
|
onChange={(event) => updateEmail(event.target.value)}
|
|
onBlur={(event) => updateEmail(event.target.value)}
|
|
value={email.value}/>
|
|
|
|
{email.error === Validation.Empty ? (
|
|
<div className="error">
|
|
<small>Required</small>
|
|
</div>
|
|
) : null}
|
|
|
|
{email.error === Validation.Invalid ? (
|
|
<div className="error">
|
|
<small>Your email is incomplete</small>
|
|
</div>
|
|
) : null}
|
|
|
|
<textarea
|
|
onChange={(event) => updateNote(event.target.value)}
|
|
defaultValue={note.value}
|
|
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={showDescription}
|
|
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>
|
|
);
|
|
|
|
} |