78 lines
2.7 KiB
JavaScript
78 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";
|
|
import {OrderOptions} from "./OrderOptions";
|
|
|
|
|
|
/**
|
|
* 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">
|
|
|
|
<OrderOptions/>
|
|
|
|
<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>
|
|
);
|
|
|
|
} |