bodyshop/client/src/components/jobs-create-owner-info/jobs-create-owner-info.new.component.jsx

import { Form, Input, Switch } from "antd";
import React, { useContext } from "react";
import { useTranslation } from "react-i18next";
import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
import FormItemEmail from "../form-items-formatted/email-form-item.component";
import FormItemPhone, { PhoneItemFormatterValidation } from "../form-items-formatted/phone-form-item.component";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";

export default function JobsCreateOwnerInfoNewComponent() {
  const [state] = useContext(JobCreateContext);

  const { t } = useTranslation();
  return (
    <div>
      <LayoutFormRow header={t("owners.forms.name")} grow>
        <Form.Item
          label={t("owners.fields.ownr_ln")}
          name={["owner", "data", "ownr_ln"]}
          rules={[
            ({ getFieldValue }) => ({
              required:
                state.owner.new &&
                (!getFieldValue(["owner", "data", "ownr_co_nm"]) ||
                  getFieldValue(["owner", "data", "ownr_co_nm"]) === "")
              //message: t("general.validation.required"),
            })
          ]}
        >
          <Input disabled={!state.owner.new} />
        </Form.Item>
        <Form.Item
          label={t("owners.fields.ownr_fn")}
          name={["owner", "data", "ownr_fn"]}
          rules={[
            ({ getFieldValue }) => ({
              required:
                state.owner.new &&
                (!getFieldValue(["owner", "data", "ownr_co_nm"]) ||
                  getFieldValue(["owner", "data", "ownr_co_nm"]) === "")
              //message: t("general.validation.required"),
            })
          ]}
        >
          <Input disabled={!state.owner.new} />
        </Form.Item>
      </LayoutFormRow>

      <LayoutFormRow grow>
        <Form.Item label={t("owners.fields.ownr_title")} name={["owner", "data", "ownr_title"]}>
          <Input disabled={!state.owner.new} />
        </Form.Item>
        <Form.Item
          label={t("owners.fields.ownr_co_nm")}
          name={["owner", "data", "ownr_co_nm"]}
          rules={[
            ({ getFieldValue }) => ({
              required:
                state.owner.new &&
                (!getFieldValue(["owner", "data", "ownr_ln"]) ||
                  !getFieldValue(["owner", "data", "ownr_fn"]) ||
                  getFieldValue(["owner", "data", "ownr_ln"]) === "" ||
                  getFieldValue(["owner", "data", "ownr_fn"]) === "")
              //message: t("general.validation.required"),
            })
          ]}
        >
          <Input disabled={!state.owner.new} />
        </Form.Item>
      </LayoutFormRow>

      <LayoutFormRow header={t("owners.forms.address")} grow>
        <Form.Item label={t("owners.fields.ownr_addr1")} name={["owner", "data", "ownr_addr1"]}>
          <Input disabled={!state.owner.new} />
        </Form.Item>
        <Form.Item label={t("owners.fields.ownr_addr2")} name={["owner", "data", "ownr_addr2"]}>
          <Input disabled={!state.owner.new} />
        </Form.Item>
      </LayoutFormRow>

      <LayoutFormRow grow>
        <Form.Item label={t("owners.fields.ownr_city")} name={["owner", "data", "ownr_city"]}>
          <Input disabled={!state.owner.new} />
        </Form.Item>
        <Form.Item label={t("owners.fields.ownr_st")} name={["owner", "data", "ownr_st"]}>
          <Input disabled={!state.owner.new} />
        </Form.Item>
      </LayoutFormRow>
      <LayoutFormRow grow>
        <Form.Item label={t("owners.fields.ownr_zip")} name={["owner", "data", "ownr_zip"]}>
          <Input disabled={!state.owner.new} />
        </Form.Item>
        <Form.Item label={t("owners.fields.ownr_ctry")} name={["owner", "data", "ownr_ctry"]}>
          <Input disabled={!state.owner.new} />
        </Form.Item>
      </LayoutFormRow>

      <LayoutFormRow header={t("owners.forms.contact")} grow>
        <Form.Item
          label={t("owners.fields.ownr_ea")}
          rules={[
            {
              type: "email",
              message: "This is not a valid email address."
            }
          ]}
          name={["owner", "data", "ownr_ea"]}
        >
          <FormItemEmail
            //email={form.getFieldValue("ownr_ea")}
            disabled={!state.owner.new}
          />
        </Form.Item>
        <Form.Item
          label={t("owners.fields.ownr_ph1")}
          name={["owner", "data", "ownr_ph1"]}
          rules={[({ getFieldValue }) => PhoneItemFormatterValidation(getFieldValue, "owner.data.ownr_ph1")]}
        >
          <FormItemPhone disabled={!state.owner.new} />
        </Form.Item>
        <Form.Item
          label={t("owners.fields.ownr_ph2")}
          name={["owner", "data", "ownr_ph2"]}
          rules={[({ getFieldValue }) => PhoneItemFormatterValidation(getFieldValue, "owner.data.ownr_ph2")]}
        >
          <FormItemPhone disabled={!state.owner.new} />
        </Form.Item>
      </LayoutFormRow>
      <LayoutFormRow grow>
        <Form.Item label={t("owners.fields.preferred_contact")} name={["owner", "data", "preferred_contact"]}>
          <Input disabled={!state.owner.new} />
        </Form.Item>
        <Form.Item
          label={t("owners.fields.allow_text_message")}
          valuePropName="checked"
          name={["owner", "data", "allow_text_message"]}
        >
          <Switch disabled={!state.owner.new} />
        </Form.Item>
      </LayoutFormRow>
    </div>
  );
}