web2019/static/js/shop/OrderForm.jsx

78 lines
2.6 KiB
React
Raw Normal View History

2023-12-12 18:21:09 +08:00
import React from 'react'
import {validateEmail, Validation} from "./validate.js";
import {useShopStore} from "./shop_store";
/**
* Components that renders the form to request quote.
*/
2023-12-12 18:21:09 +08:00
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}
2023-12-12 18:21:09 +08:00
{email.error === Validation.Invalid ? (
<div className="error">
<small>Your email is incomplete</small>
</div>
) : null}
2023-12-12 18:21:09 +08:00
<textarea
onChange={(event) => updateNote(event.target.value)}
defaultValue={note.value}
rows="5"
placeholder="Additional notes"/>
2023-12-12 18:21:09 +08:00
<div className="d-flex flex-column flex-sm-row justify-content-between">
<input
2023-12-12 18:21:09 +08:00
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}/>
2023-12-12 18:21:09 +08:00
<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>
2023-12-12 18:21:09 +08:00
</div>
);
}