web2019/static/js/shop/OrderForm.jsx

import React from 'react'
import {Validation} from "./validate.js";
import {useShopStore} from "./shop_store";
import {ShowJSON} from "./ShowJSON";

/**
 * Components that renders the form to request quote.
 */
export function OrderForm() {
    const {
        email,
        note,
        isProcessing,
        updateEmail,
        updateNote,
        resetEmailValidation,
        submitForm,
        submitDisabled,
    } = 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
    }));


    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" type="submit"
                           disabled={submitDisabled()}
                           value={`${isProcessing ? 'Processing ...' : 'Request quote'}`}/>
                </div>
                {/*This will open an email window. Send the email to make your request.*/}
            </form>

        </div>
    );

}