www.prothmann.com/components/forms/eanfrageforms/contactperson.jsx

import React from "react";
import {
  TextInput,
  TextareaInput,
  SelectInput,
  CheckInput,
} from "../formfields.jsx";

export default function ContactPersonForm(props) {
  return (
    <>
      <div className="row g-2 mb-5">
        <div className="col">
          <h1>Informationen</h1>
        </div>
      </div>
      <div className="row g-2 mb-5">
        <div className="col">
          <TextInput
            isSubmitting={props.isSubmitting}
            rescode={props.rescode}
            error={props.errors.firma}
            touched={props.touched.firma}
            placeholder={"Musterfirma"}
            onChange={props.handleChange("firma")}
            onBlur={props.handleBlur("firma")}
            value={props.values.firma}
            label="Firma (optional)"
            type="text"
          />
        </div>
      </div>
      <div className="row g-2 mb-3">
        <h3>Anprechpartner</h3>
        <div className="col">
          <SelectInput
            isSubmitting={props.isSubmitting}
            rescode={props.rescode}
            error={props.errors.anrede}
            touched={props.touched.anrede}
            placeholder={"Anrede"}
            onChange={props.handleChange("anrede")}
            onBlur={props.handleBlur("anrede")}
            value={props.values.anrede}
            label="Anrede"
            options={["Herr", "Frau", "Divers"]}
          />
        </div>
        <div className="col">
          <SelectInput
            isSubmitting={props.isSubmitting}
            rescode={props.rescode}
            error={props.errors.titel}
            touched={props.touched.titel}
            placeholder={"Titel"}
            onChange={props.handleChange("titel")}
            onBlur={props.handleBlur("titel")}
            value={props.values.titel}
            label="Titel"
            options={["Dr.", "Prof.", "Dipl."]}
          />
        </div>
      </div>
      <div className="row g-2 mb-3">
        <div className="col">
          <TextInput
            isSubmitting={props.isSubmitting}
            rescode={props.rescode}
            error={props.errors.vorname}
            touched={props.touched.vorname}
            placeholder={"Max"}
            onChange={props.handleChange("vorname")}
            onBlur={props.handleBlur("vorname")}
            value={props.values.vorname}
            label="Vorname (optional)"
            type="text"
          />
        </div>
        <div className="col">
          <TextInput
            isSubmitting={props.isSubmitting}
            rescode={props.rescode}
            error={props.errors.nachname}
            touched={props.touched.nachname}
            placeholder={"Mustermann"}
            onChange={props.handleChange("nachname")}
            onBlur={props.handleBlur("nachname")}
            value={props.values.nachname}
            label="Nachname"
            type="text"
          />
        </div>
      </div>
      <div className="row g-2 mb-5">
        <div className="col">
          <TextInput
            isSubmitting={props.isSubmitting}
            rescode={props.rescode}
            error={props.errors.email}
            touched={props.touched.email}
            placeholder={"max@mustermann.de"}
            onChange={props.handleChange("email")}
            onBlur={props.handleBlur("email")}
            value={props.values.email}
            label="eMail"
            type="text"
          />
        </div>
        <div className="col">
          <TextInput
            isSubmitting={props.isSubmitting}
            rescode={props.rescode}
            error={props.errors.telefon}
            touched={props.touched.telefon}
            placeholder={"0815 123456"}
            onChange={props.handleChange("telefon")}
            onBlur={props.handleBlur("telefon")}
            value={props.values.telefon}
            label="Telfon (optional)"
            type="text"
          />
        </div>
      </div>

      <div className="row g-2 mb-3">
        <h3>Rechnungsadresse</h3>
        <div className="col">
          <TextInput
            isSubmitting={props.isSubmitting}
            rescode={props.rescode}
            error={props.errors.invoiceadress}
            touched={props.touched.invoiceadress}
            placeholder={"Musterstraße 1"}
            onChange={props.handleChange("invoiceadress")}
            onBlur={props.handleBlur("invoiceadress")}
            value={props.values.invoiceadress}
            label="Adresse"
            type="text"
          />
        </div>
        <div className="col">
          <TextInput
            isSubmitting={props.isSubmitting}
            rescode={props.rescode}
            error={props.errors.invoiceplz}
            touched={props.touched.invoiceplz}
            placeholder={"12345"}
            onChange={props.handleChange("invoiceplz")}
            onBlur={props.handleBlur("invoiceplz")}
            value={props.values.invoiceplz}
            label="PLZ"
            type="text"
          />
        </div>
      </div>

      <div className="row g-2 mb-5">
        <div className="col">
          <CheckInput
            isSubmitting={props.isSubmitting}
            rescode={props.rescode}
            error={props.errors.diffrentshipping}
            touched={props.touched.diffrentshipping}
            onChange={props.handleChange("diffrentshipping")}
            onBlur={props.handleBlur("diffrentshipping")}
            value={props.values.diffrentshipping}
            label=" Lieferadresse ist anders als Rechnungsadresse"
          />
        </div>
      </div>

      {props.values.diffrentshipping && (
        <div className="row g-2 mb-5">
          <h3>Lieferadresse</h3>
          <div className="col">
            <TextInput
              isSubmitting={props.isSubmitting}
              rescode={props.rescode}
              error={props.errors.shippingaddress}
              touched={props.touched.shippingaddress}
              placeholder={"Musterstraße 1"}
              onChange={props.handleChange("shippingaddress")}
              onBlur={props.handleBlur("shippingaddress")}
              value={props.values.shippingaddress}
              label="Lieferadresse"
              type="text"
            />
          </div>
          <div className="col">
            <TextInput
              isSubmitting={props.isSubmitting}
              rescode={props.rescode}
              error={props.errors.shippingplz}
              touched={props.touched.shippingplz}
              placeholder={"12345"}
              onChange={props.handleChange("shippingplz")}
              onBlur={props.handleBlur("shippingplz")}
              value={props.values.shippingplz}
              label="PLZ"
              type="text"
            />
          </div>
        </div>
      )}
    </>
  );
}