web2019/static/js/shop/OrderForm.jsx

76 lines
2.4 KiB
React
Raw Normal View History

2023-12-12 18:21:09 +08:00
import React from 'react'
import {Validation} from "./validate.js";
2023-12-12 18:21:09 +08:00
import {useShopStore} from "./shop_store";
import {ShowJSON} from "./ShowJSON";
/**
* Components that renders the form to request quote.
*/
2023-12-12 18:21:09 +08:00
export function OrderForm() {
const {
email,
note,
isProcessing,
updateEmail,
updateNote,
resetEmailValidation,
2023-12-12 18:21:09 +08:00
submitForm,
submitDisabled,
2023-12-12 18:21:09 +08:00
} = useShopStore(state => ({
email: state.email,
note: state.note,
isProcessing: state.isProcessing,
updateEmail: state.updateEmail,
updateNote: state.updateNote,
submitForm: state.submitForm,
submitDisabled: state.submitDisabled,
resetEmailValidation: state.resetEmailValidation
2023-12-12 18:21:09 +08:00
}));
return (
<div className="summary-form">
<form onSubmit={submitForm} noValidate>
<input
className={`${email.error > 0 ? 'errorField' : ''}`}
type="email"
placeholder="Email"
onFocus={resetEmailValidation}
2023-12-12 18:21:09 +08:00
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">
<ShowJSON/>
2023-12-12 18:21:09 +08:00
<input className="btn btn-primary w-100 m-0 ms-sm-2" type="submit"
disabled={submitDisabled()}
2023-12-12 18:21:09 +08:00
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>
);
}