import React from 'react' import {Validation} from "./validate.js"; import {useShopStore} from "./shop_store"; import {ShowJSON} from "./ShowJSON"; import {useRenderCount} from "@uidotdev/usehooks"; /** * Components that renders the form to request quote. */ export function OrderForm() { 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); console.log("OrderForm renders: ", renderCount) return (
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 ? (
Required
) : null} {email.error === Validation.Invalid ? (
Your email is incomplete
) : null}