feature/IO-3494-Change-Preferred-Contact - Implement select box, fix capture bug

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

@@ -5,16 +5,25 @@ 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 PHONE_TYPE_OPTIONS = [
-    { label: t("owners.labels.home"), value: "Home" },
-    { label: t("owners.labels.work"), value: "Work" },
-    { label: t("owners.labels.cell"), value: "Cell" }
-  ];
   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>
@@ -162,7 +171,7 @@ export default function JobsCreateOwnerInfoNewComponent() {
 
       <LayoutFormRow grow>
         <Form.Item label={t("owners.fields.preferred_contact")} name={["owner", "data", "preferred_contact"]}>
-          <Input disabled={!state.owner.new} />
+          <Select disabled={!state.owner.new} allowClear placeholder="Type" options={PREFERRED_CONTACT_OPTIONS} />
         </Form.Item>
       </LayoutFormRow>
     </div>

client/src/components/owner-detail-form/owner-detail-form.component.jsx

@@ -5,17 +5,22 @@ import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-
 import FormItemEmail from "../form-items-formatted/email-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import { PhoneItemFormatterValidation } from "../form-items-formatted/phone-form-item.component";
+import { buildOwnerPhoneTypeOptions } from "../../utils/phoneTypeOptions.js";
 
 export default function OwnerDetailFormComponent({ form, isPhone1OptedOut, isPhone2OptedOut }) {
   const { t } = useTranslation();
   const { getFieldValue } = form;
-
+  const PHONE_TYPE_OPTIONS = buildOwnerPhoneTypeOptions(t);
-  const PHONE_TYPE_OPTIONS = [
+  const PREFERRED_CONTACT_OPTIONS = [
-    { label: t("owners.labels.home"), value: "Home" },
+    {
-    { label: t("owners.labels.work"), value: "Work" },
+      label: t("owners.labels.email", { defaultValue: "Email" }),
-    { label: t("owners.labels.cell"), value: "Cell" }
+      options: [{ label: t("owners.labels.email", { defaultValue: "Email" }), value: "Email" }]
+    },
+    {
+      label: t("owners.labels.phone", { defaultValue: "Phone" }),
+      options: PHONE_TYPE_OPTIONS
+    }
   ];
-
   return (
     <div>
       <FormFieldsChanged form={form} />
@@ -137,8 +142,9 @@ export default function OwnerDetailFormComponent({ form, isPhone1OptedOut, isPho
         </Form.Item>
 
         <Form.Item label={t("owners.fields.preferred_contact")} name="preferred_contact">
-          <Input />
+          <Select allowClear placeholder="Type" options={PREFERRED_CONTACT_OPTIONS} />
         </Form.Item>
+
         <Form.Item label={t("owners.fields.tax_number")} name="tax_number">
           <Input />
         </Form.Item>

client/src/pages/jobs-create/jobs-create.container.jsx

@@ -47,7 +47,7 @@ function JobsCreateContainer({ bodyshop, setBreadcrumbs, setSelectedHeader, curr
   const [form] = Form.useForm();
   const [state, setState] = contextState;
   const [insertJob] = useMutation(INSERT_NEW_JOB);
-  const [loadOwner, RemoteOwnerData] = useLazyQuery(QUERY_OWNER_FOR_JOB_CREATION);
+  const [loadOwner, remoteOwnerData] = useLazyQuery(QUERY_OWNER_FOR_JOB_CREATION);
 
   useEffect(() => {
     if (state.owner.selectedid) {
@@ -116,15 +116,20 @@ function JobsCreateContainer({ bodyshop, setBreadcrumbs, setSelectedHeader, curr
 
     let ownerData;
     if (!job.ownerid) {
-      ownerData = job.owner.data;
+      // Keep preferred_contact for the nested owner insert...
-      ownerData.shopid = bodyshop.id;
+      job.owner.data.shopid = bodyshop.id;
+
+      // ...but do NOT flatten preferred_contact into the job row.
+      ownerData = _.cloneDeep(job.owner.data);
       delete ownerData.preferred_contact;
+
       delete job.ownerid;
     } else {
-      ownerData = _.cloneDeep(RemoteOwnerData.data.owners_by_pk);
+      ownerData = _.cloneDeep(remoteOwnerData.data.owners_by_pk);
       delete ownerData.id;
       delete ownerData.__typename;
     }
+
     if (!state.vehicle.none) {
       if (!job.vehicleid) {
         delete job.vehicleid;

client/src/translations/en_us/common.json

@@ -2598,7 +2598,10 @@
         "updateowner": "Update Owner",
         "work": "Work",
         "home": "Home",
-        "cell": "Cell"
+        "cell": "Cell",
+        "other": "Other",
+        "email": "Email",
+        "phone": "Phone"
       },
       "successes": {
         "delete": "Owner deleted successfully.",

client/src/translations/es/common.json

@@ -2598,7 +2598,10 @@
         "updateowner": "",
         "work": "",
         "home": "",
-        "cell": ""
+        "cell": "",
+        "other": "",
+        "email": "",
+        "phone": ""
       },
       "successes": {
         "delete": "",

client/src/translations/fr/common.json

@@ -2598,7 +2598,10 @@
         "updateowner": "",
         "work": "",
         "home": "",
-        "cell": ""
+        "cell": "",
+        "other": "",
+        "email": "",
+        "phone": ""
       },
       "successes": {
         "delete": "",

client/src/utils/phoneTypeOptions.js

@@ -0,0 +1,13 @@
+export const OWNER_PHONE_TYPE_VALUES = {
+  HOME: "Home",
+  WORK: "Work",
+  CELL: "Cell",
+  OTHER: "Other"
+};
+
+export const buildOwnerPhoneTypeOptions = (t) => [
+  { label: t("owners.labels.home"), value: OWNER_PHONE_TYPE_VALUES.HOME },
+  { label: t("owners.labels.work"), value: OWNER_PHONE_TYPE_VALUES.WORK },
+  { label: t("owners.labels.cell"), value: OWNER_PHONE_TYPE_VALUES.CELL },
+  { label: t("owners.labels.other"), value: OWNER_PHONE_TYPE_VALUES.OTHER }
+];