web2019/static/js/shop/OrderForm.jsx

75 lines
2.7 KiB
JavaScript

import React from 'react'
import {Validation} from "./validate.js";
import {useShopStore} from "./shop_store";
import {ShowJSON} from "./ShowJSON";
// #!render_count
import {useRenderCount} from "@uidotdev/usehooks";
/**
* Components that renders the form to request quote.
*/
export function OrderForm() {
// #!render_count
const renderCount = useRenderCount();
const email = useShopStore((state) => state.email);
const note = useShopStore((state) => state.note);
const isProcessing = useShopStore((state) => state.isProcessing);
const updateEmail = useShopStore((state) => state.updateEmail);
const updateNote = useShopStore((state) => state.updateNote);
const submitForm = useShopStore((state) => state.submitForm);
const submitDisabled = useShopStore((state) => state.submitDisabled);
const resetEmailValidation = useShopStore((state) => state.resetEmailValidation);
// #!render_count
console.log("OrderForm renders: ", renderCount)
return (
<div className="summary-form">
<form onSubmit={submitForm} noValidate>
<input
className={`${email.error > 0 ? 'errorField' : ''}`}
type="email"
placeholder="Email"
onFocus={resetEmailValidation}
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">
<ShowJSON/>
<input className="btn btn-primary w-100 m-0 ms-sm-2 order-form-submit" type="button"
disabled={submitDisabled()}
onClick={submitForm}
value={`${isProcessing ? 'Processing ...' : 'Request quote'}`}/>
</div>
{/*This will open an email window. Send the email to make your request.*/}
</form>
</div>
);
}