admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature/IO-3479-Customer-Phone-Numbers - Implementation

Browse Source
This commit is contained in:
Dave
2025-12-30 19:14:57 -05:00
parent 79a3b58a86
commit 63ce7b5c79
31 changed files with 247 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
client/src/components/owner-detail-form/owner-detail-form.component.jsx
View File

@@ -1,4 +1,4 @@
import { Form, Input, Tooltip } from "antd";
import { Form, Input, Select, Tooltip } from "antd";
import { CloseCircleFilled } from "@ant-design/icons";
import { useTranslation } from "react-i18next";
import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
@@ -10,6 +10,12 @@ export default function OwnerDetailFormComponent({ form, isPhone1OptedOut, isPho
const { t } = useTranslation();
const { getFieldValue } = form;
const PHONE_TYPE_OPTIONS = [
{ label: t("owners.labels.home"), value: "Home" },
{ label: t("owners.labels.work"), value: "Work" },
{ label: t("owners.labels.cell"), value: "Cell" }
];
return (
<div>
<FormFieldsChanged form={form} />
@@ -30,6 +36,7 @@ export default function OwnerDetailFormComponent({ form, isPhone1OptedOut, isPho
<Input disabled />
</Form.Item>
</LayoutFormRow>
<LayoutFormRow header={t("owners.forms.address")}>
<Form.Item label={t("owners.fields.ownr_addr1")} name="ownr_addr1">
<Input />
@@ -50,6 +57,7 @@ export default function OwnerDetailFormComponent({ form, isPhone1OptedOut, isPho
<Input />
</Form.Item>
</LayoutFormRow>
<LayoutFormRow header={t("owners.forms.contact")}>
<Form.Item
label={t("owners.fields.ownr_ea")}
@@ -63,6 +71,8 @@ export default function OwnerDetailFormComponent({ form, isPhone1OptedOut, isPho
>
<FormItemEmail email={getFieldValue("ownr_ea")} />
</Form.Item>
{/* Phone 1 + Type + Opt-out icon */}
<Form.Item label={t("owners.fields.ownr_ph1")} style={{ marginBottom: 0 }}>
<div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
<Form.Item
@@ -72,6 +82,11 @@ export default function OwnerDetailFormComponent({ form, isPhone1OptedOut, isPho
>
<Input style={{ flex: 1, minWidth: "150px" }} />
</Form.Item>
<Form.Item name="ownr_ph1_ty" noStyle>
<Select allowClear placeholder="Type" options={PHONE_TYPE_OPTIONS} style={{ width: 110 }} />
</Form.Item>
{isPhone1OptedOut && (
<Tooltip title={t("consent.text_body")}>
<CloseCircleFilled
@@ -88,6 +103,8 @@ export default function OwnerDetailFormComponent({ form, isPhone1OptedOut, isPho
)}
</div>
</Form.Item>
{/* Phone 2 + Type + Opt-out icon */}
<Form.Item label={t("owners.fields.ownr_ph2")} style={{ marginBottom: 0 }}>
<div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
<Form.Item
@@ -97,6 +114,11 @@ export default function OwnerDetailFormComponent({ form, isPhone1OptedOut, isPho
>
<Input style={{ flex: 1, minWidth: "150px" }} />
</Form.Item>
<Form.Item name="ownr_ph2_ty" noStyle>
<Select allowClear placeholder="Type" options={PHONE_TYPE_OPTIONS} style={{ width: 110 }} />
</Form.Item>
{isPhone2OptedOut && (
<Tooltip title={t("consent.text_body")}>
<CloseCircleFilled
@@ -113,6 +135,7 @@ export default function OwnerDetailFormComponent({ form, isPhone1OptedOut, isPho
)}
</div>
</Form.Item>
<Form.Item label={t("owners.fields.preferred_contact")} name="preferred_contact">
<Input />
</Form.Item>
@@ -120,6 +143,7 @@ export default function OwnerDetailFormComponent({ form, isPhone1OptedOut, isPho
<Input />
</Form.Item>
</LayoutFormRow>
<Form.Item label={t("owners.fields.note")} name="note">
<Input.TextArea rows={4} />
</Form.Item>