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

import { Form, Input, Select } from "antd";
import { 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";
import { buildOwnerPhoneTypeOptions } from "../../utils/phoneTypeOptions.js";

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

  const PHONE_TYPE_OPTIONS = buildOwnerPhoneTypeOptions(t);

  const PREFERRED_CONTACT_OPTIONS = [
    {
      label: t("owners.labels.email", { defaultValue: "Email" }),
      options: [{ label: t("owners.labels.email", { defaultValue: "Email" }), value: "Email" }]
    },
    {
      label: t("owners.labels.phone", { defaultValue: "Phone" }),
      options: PHONE_TYPE_OPTIONS
    }
  ];

  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 disabled={!state.owner.new} />
        </Form.Item>

        {/* Phone 1 + Type */}
        <Form.Item label={t("owners.fields.ownr_ph1")} style={{ marginBottom: 0 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <Form.Item
              name={["owner", "data", "ownr_ph1"]}
              noStyle
              rules={[({ getFieldValue }) => PhoneItemFormatterValidation(getFieldValue, "owner.data.ownr_ph1")]}
            >
              <FormItemPhone disabled={!state.owner.new} style={{ flex: 1, minWidth: 150 }} />
            </Form.Item>

            <Form.Item name={["owner", "data", "ownr_ph1_ty"]} noStyle>
              <Select
                disabled={!state.owner.new}
                allowClear
                placeholder="Type"
                options={PHONE_TYPE_OPTIONS}
                style={{ width: 110 }}
              />
            </Form.Item>
          </div>
        </Form.Item>

        {/* Phone 2 + Type */}
        <Form.Item label={t("owners.fields.ownr_ph2")} style={{ marginBottom: 0 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <Form.Item
              name={["owner", "data", "ownr_ph2"]}
              noStyle
              rules={[({ getFieldValue }) => PhoneItemFormatterValidation(getFieldValue, "owner.data.ownr_ph2")]}
            >
              <FormItemPhone disabled={!state.owner.new} style={{ flex: 1, minWidth: 150 }} />
            </Form.Item>

            <Form.Item name={["owner", "data", "ownr_ph2_ty"]} noStyle>
              <Select
                disabled={!state.owner.new}
                allowClear
                placeholder="Type"
                options={PHONE_TYPE_OPTIONS}
                style={{ width: 110 }}
              />
            </Form.Item>
          </div>
        </Form.Item>
      </LayoutFormRow>

      <LayoutFormRow grow>
        <Form.Item label={t("owners.fields.preferred_contact")} name={["owner", "data", "preferred_contact"]}>
          <Select disabled={!state.owner.new} allowClear placeholder="Type" options={PREFERRED_CONTACT_OPTIONS} />
        </Form.Item>
      </LayoutFormRow>
    </div>
  );
}