Files
bodyshop/client/src/components/owner-detail-form/owner-detail-form.component.jsx
2020-08-21 17:17:36 -07:00

134 lines
3.9 KiB
JavaScript

import { Button, Form, Input, Switch } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
import FormItemEmail from "../form-items-formatted/email-form-item.component";
import FormItemPhone from "../form-items-formatted/phone-form-item.component";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
export default function OwnerDetailFormComponent({ form, loading }) {
const { t } = useTranslation();
const { getFieldValue } = form;
return (
<div>
<div className="imex-flex-row imex-flex-row__flex-space-around">
<Button
className="imex-flex-row__margin-large"
type="primary"
key="submit"
loading={loading}
htmlType="submit"
>
{t("general.actions.save")}
</Button>
<div className="imex-flex-row__grow imex-flex-row__margin-large">
<FormFieldsChanged form={form} />
</div>
</div>
<LayoutFormRow header={t("owners.forms.name")}>
<Form.Item label={t("owners.fields.ownr_title")} name="ownr_title">
<Input />
</Form.Item>
<Form.Item label={t("owners.fields.ownr_ln")} name="ownr_ln">
<Input />
</Form.Item>
<Form.Item label={t("owners.fields.ownr_fn")} name="ownr_fn">
<Input />
</Form.Item>
<Form.Item label={t("owners.fields.ownr_co_nm")} name="ownr_co_nm">
<Input />
</Form.Item>
</LayoutFormRow>
<LayoutFormRow header={t("owners.forms.address")}>
<Form.Item
label={t("owners.fields.ownr_addr1")}
name="ownr_addr1"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Input />
</Form.Item>
<Form.Item label={t("owners.fields.ownr_addr2")} name="ownr_addr2">
<Input />
</Form.Item>
<Form.Item
label={t("owners.fields.ownr_city")}
name="ownr_city"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("owners.fields.ownr_st")}
name="ownr_st"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("owners.fields.ownr_zip")}
name="ownr_zip"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Input />
</Form.Item>
<Form.Item label={t("owners.fields.ownr_ctry")} name="ownr_ctry">
<Input />
</Form.Item>
</LayoutFormRow>
<LayoutFormRow header={t("owners.forms.contact")}>
<Form.Item
label={t("owners.fields.allow_text_message")}
name="allow_text_message"
valuePropName="checked"
>
<Switch />
</Form.Item>
<Form.Item
label={t("owners.fields.ownr_ea")}
name="ownr_ea"
rules={[
{
type: "email",
message: "This is not a valid email address.",
},
]}
>
<FormItemEmail email={getFieldValue("ownr_ea")} />
</Form.Item>
<Form.Item label={t("owners.fields.ownr_ph1")} name="ownr_ph1">
<FormItemPhone customInput={Input} />
</Form.Item>
<Form.Item
label={t("owners.fields.preferred_contact")}
name="preferred_contact"
>
<Input />
</Form.Item>
</LayoutFormRow>
</div>
);
}