STILL BROKEN: Refactored some forms to have bare functionality. Appears that v4 antd has extensive issues.

client/src/components/email-overlay/email-overlay.component.jsx

@@ -3,7 +3,7 @@ import { Input } from "antd";
 import CKEditor from "@ckeditor/ckeditor5-react";
 import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
 
-export default function SendEmailButtonComponent({
+export default function EmailOverlayComponent({
   messageOptions,
   handleConfigChange,
   handleHtmlChange

client/src/components/email-overlay/email-overlay.container.jsx

@@ -7,7 +7,10 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { toggleEmailOverlayVisible } from "../../redux/email/email.actions";
-import { selectEmailConfig, selectEmailVisible } from "../../redux/email/email.selectors.js";
+import {
+  selectEmailConfig,
+  selectEmailVisible
+} from "../../redux/email/email.selectors.js";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import EmailOverlayComponent from "./email-overlay.component";
 
@@ -21,7 +24,11 @@ const mapDispatchToProps = dispatch => ({
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(function SendEmail({ emailConfig, modalVisible, toggleEmailOverlayVisible }) {
+)(function EmailOveralContainer({
+  emailConfig,
+  modalVisible,
+  toggleEmailOverlayVisible
+}) {
   const { t } = useTranslation();
   const [messageOptions, setMessageOptions] = useState(
     emailConfig.messageOptions
@@ -88,7 +95,8 @@ export default connect(
         visible={modalVisible}
         width={"80%"}
         onOk={handleOk}
-        onCancel={() => toggleEmailOverlayVisible()}>
+        onCancel={() => toggleEmailOverlayVisible()}
+      >
         <LoadingSpinner loading={loading}>
           <EmailOverlayComponent
             handleConfigChange={handleConfigChange}

client/src/components/invoice-add-line-button/invoice-add-line-button.component.jsx

@@ -12,31 +12,21 @@ export default function InvoiceAddLineButton({
 }) {
   const [visibility, setVisibility] = useState(false);
   const { t } = useTranslation();
-  const { getFieldDecorator } = form;
 
   const popContent = (
     <div style={{ display: "flex" }}>
-      <Form.Item label={t("joblines.fields.line_desc")}>
-        {getFieldDecorator("line_desc", {
-          initialValue: jobLine.line_desc
-        })(<Input name="line_desc" />)}
+      <Form.Item name="line_desc" label={t("joblines.fields.line_desc")}>
+        <Input />
       </Form.Item>
-      <Form.Item label={t("joblines.fields.oem_partno")}>
-        {getFieldDecorator("oem_partno", {
-          initialValue: jobLine.oem_partno
-        })(<Input name="oem_partno" />)}
+      <Form.Item name="oem_partno" label={t("joblines.fields.oem_partno")}>
+        <Input />
       </Form.Item>
-      <Form.Item label={t("invoicelines.fields.retail")}>
-        {getFieldDecorator("retail", { initialValue: jobLine.act_price })(
-          <InputNumber precision={2} name="retail" />
-        )}
+      <Form.Item name="retail" label={t("invoicelines.fields.retail")}>
+        <InputNumber precision={2} />
       </Form.Item>
-      <Form.Item label={t("invoicelines.fields.actual")}>
-        {getFieldDecorator("actual", {
-          initialValue: jobLine.act_price * (discount ? 1 - discount : 1)
-        })(<InputNumber precision={2} name="actual" />)}
+      <Form.Item name="actual" label={t("invoicelines.fields.actual")}>
+        <InputNumber precision={2} />
       </Form.Item>
-      {}
       DISC: {discount}
       <Button onClick={() => setVisibility(false)}>X</Button>
     </div>

client/src/components/invoice-enter-modal/invoice-enter-modal.component.jsx

@@ -18,8 +18,8 @@ export default function InvoiceEnterModalComponent({
   visible,
   invoice,
   handleCancel,
-  handleSubmit,
-  form,
+  handleFinish,
+
   handleRoAutoComplete,
   handleRoSelect,
   roAutoCompleteOptions,
@@ -31,101 +31,109 @@ export default function InvoiceEnterModalComponent({
   vendor
 }) {
   const { t } = useTranslation();
-  const { getFieldDecorator, resetFields } = form;
+  const [form] = Form.useForm();
+  const { resetFields } = form;
+  //Default Values to be set in form.
+  // {getFieldDecorator("retail", { initialValue: jobLine.act_price })(
+  //   initialValue: jobLine.act_price * (discount ? 1 - discount : 1)
 
   return (
-    <Modal
-      title={
-        invoice && invoice.id
-          ? t("invoices.labels.edit")
-          : t("invoices.labels.new")
-      }
-      width={"90%"}
-      visible={visible}
-      okText={t("general.labels.save")}
-      onOk={handleSubmit}
-      okButtonProps={{ htmlType: "submit" }}
-      onCancel={handleCancel}
-      destroyOnClose
-    >
-      <Form onSubmit={handleSubmit} autoComplete={"off"}>
+    <Form onFinish={handleFinish} autoComplete={"off"} form={form}>
+      <Modal
+        title={
+          invoice && invoice.id
+            ? t("invoices.labels.edit")
+            : t("invoices.labels.new")
+        }
+        width={"90%"}
+        visible={visible}
+        okText={t("general.labels.save")}
+        onOk={handleFinish}
+        okButtonProps={{ htmlType: "submit" }}
+        onCancel={handleCancel}
+      >
         <div style={{ display: "flex" }}>
-          <Form.Item label={t("invoices.fields.ro_number")}>
-            {getFieldDecorator("jobid", {
-              rules: [
-                {
-                  required: true,
-                  pattern: new RegExp(
-                    "[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}"
-                  ),
-                  message: t("invoices.errors.invalidro")
-                }
-              ]
-            })(
-              <AutoComplete
-                name="ro_number"
-                dataSource={roAutoCompleteOptions}
-                onSearch={handleRoAutoComplete}
-                autoFocus
-                style={{ width: "300px" }}
-                onSelect={handleRoSelect}
-                backfill
-              />
-            )}
+          <Form.Item
+            name="jobid"
+            label={t("invoices.fields.ro_number")}
+            rules={[
+              {
+                required: true,
+                pattern: new RegExp(
+                  "[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}"
+                ),
+                message: t("invoices.errors.invalidro")
+              }
+            ]}
+          >
+            <AutoComplete
+              options={roAutoCompleteOptions}
+              onSearch={handleRoAutoComplete}
+              autoFocus
+              style={{ width: "300px" }}
+              onSelect={handleRoSelect}
+              backfill
+            />
           </Form.Item>
-          <Form.Item label={t("invoices.fields.vendor")}>
-            {getFieldDecorator("vendorid", {
-              rules: [
-                {
-                  required: true,
-                  pattern: new RegExp(
-                    "[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}"
-                  ),
-                  message: t("invoices.errors.invalidvendor")
-                }
-              ]
-            })(
-              <AutoComplete
-                name="vendor_id"
-                dataSource={vendorAutoCompleteOptions}
-                onSelect={handleVendorSelect}
-                style={{ width: "300px" }}
-                onSearch={handleVendorAutoComplete}
-                backfill
-              />
-            )}
+          <Form.Item
+            label={t("invoices.fields.vendor")}
+            name="vendorid"
+            rules={[
+              {
+                required: true,
+                pattern: new RegExp(
+                  "[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}"
+                ),
+                message: t("invoices.errors.invalidvendor")
+              }
+            ]}
+          >
+            <AutoComplete
+              options={vendorAutoCompleteOptions}
+              onSelect={handleVendorSelect}
+              style={{ width: "300px" }}
+              onSearch={handleVendorAutoComplete}
+              backfill
+            />
           </Form.Item>
           <Button onClick={() => resetFields()}>
             {t("general.actions.reset")}
           </Button>
         </div>
         <div style={{ display: "flex" }}>
-          <Form.Item label={t("invoices.fields.invoice_number")}>
-            {getFieldDecorator("invoice_number", {
-              rules: [
-                { required: true, message: t("general.validation.required") }
-              ]
-            })(<Input name="invoice_number" />)}
+          <Form.Item
+            label={t("invoices.fields.invoice_number")}
+            name="invoice_number"
+            rule={[
+              { required: true, message: t("general.validation.required") }
+            ]}
+          >
+            <Input />
           </Form.Item>
-          <Form.Item label={t("invoices.fields.date")}>
-            {getFieldDecorator("date", {
-              rules: [
-                { required: true, message: t("general.validation.required") }
-              ]
-            })(<DatePicker name="date" />)}
+          <Form.Item
+            label={t("invoices.fields.date")}
+            name="date"
+            rule={[
+              { required: true, message: t("general.validation.required") }
+            ]}
+          >
+            <DatePicker />
           </Form.Item>
-          <Form.Item label={t("invoices.fields.is_credit_memo")}>
-            {getFieldDecorator("is_credit_memo", {
-              initialValue: false,
-              valuePropName: "checked"
-            })(<Switch name="is_credit_memo" />)}
+          <Form.Item
+            label={t("invoices.fields.is_credit_memo")}
+            name="is_credit_memo"
+            valuePropName="checked"
+          >
+            <Switch />
           </Form.Item>
-          <Form.Item label={t("invoices.fields.total")}>
-            {getFieldDecorator("total", {
-              rules: [
-                { required: true, message: t("general.validation.required") }
-              ]
-            })(<InputNumber precision={2} min={0} name="total" />)}
+          <Form.Item
+            label={t("invoices.fields.total")}
+            name="total"
+            rule={[
+              { required: true, message: t("general.validation.required") }
+            ]}
+          >
+            <InputNumber precision={2} min={0} />
           </Form.Item>
         </div>
         <Row>
@@ -140,7 +148,7 @@ export default function InvoiceEnterModalComponent({
           <Col span={12}>Table of added items.</Col>
         </Row>
         );
-      </Form>
-    </Modal>
+      </Modal>{" "}
+    </Form>
   );
 }

client/src/components/invoice-enter-modal/invoice-enter-modal.container.jsx

@@ -1,16 +1,14 @@
-import { Form, notification } from "antd";
 import React, { useState } from "react";
-import { useQuery, useLazyQuery } from "react-apollo";
-import { useTranslation } from "react-i18next";
+import { useLazyQuery, useQuery } from "react-apollo";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { GET_JOB_LINES_TO_ENTER_INVOICE } from "../../graphql/jobs-lines.queries";
 import { SEARCH_RO_AUTOCOMPLETE } from "../../graphql/jobs.queries";
 import { SEARCH_VENDOR_AUTOCOMPLETE } from "../../graphql/vendors.queries";
 import { toggleModalVisible } from "../../redux/modals/modals.actions";
 import { selectInvoiceEnterModal } from "../../redux/modals/modals.selectors";
-import InvoiceEnterModalComponent from "./invoice-enter-modal.component";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import { GET_JOB_LINES_TO_ENTER_INVOICE } from "../../graphql/jobs-lines.queries";
+import InvoiceEnterModalComponent from "./invoice-enter-modal.component";
 
 const mapStateToProps = createStructuredSelector({
   invoiceEnterModal: selectInvoiceEnterModal,
@@ -23,10 +21,9 @@ const mapDispatchToProps = dispatch => ({
 function InvoiceEnterModalContainer({
   invoiceEnterModal,
   toggleModalVisible,
-  form,
   bodyshop
 }) {
-  const { t } = useTranslation();
+  // const { t } = useTranslation();
   const linesState = useState([]);
   const roSearchState = useState({ text: "", selectedId: null });
   const [roSearch, setRoSearch] = roSearchState;
@@ -67,100 +64,81 @@ function InvoiceEnterModalContainer({
   if (roSearch.selectedId) {
     if (!called) loadLines();
   }
-  const handleRoSelect = v => {
-    setRoSearch({ ...roSearch, selectedId: v });
+  const handleRoSelect = (value, obj) => {
+    setRoSearch({ ...roSearch, selectedId: obj.id });
   };
 
-  const handleVendorSelect = v => {
-    setVendorSearch({ ...vendorSearch, selectedId: v });
+  const handleVendorSelect = (value, obj) => {
+    setVendorSearch({ ...vendorSearch, selectedId: obj.id });
   };
 
-  const handleSubmit = e => {
-    e.preventDefault();
-    form.validateFieldsAndScroll((err, values) => {
-      if (err) {
-        notification["error"]({
-          message: t("invoices.errors.validation"),
-          description: err.message
-        });
-      }
-      if (!err) {
-        console.log("values", values);
-        alert("Closing this modal.");
-        toggleModalVisible();
-        // if (!jobLineEditModal.context.id) {
-        //   insertJobLine({
-        //     variables: {
-        //       lineInput: [{ jobid: jobLineEditModal.context.jobid, ...values }]
-        //     }
-        //   })
-        //     .then(r => {
-        //       if (jobLineEditModal.actions.refetch)
-        //         jobLineEditModal.actions.refetch();
-        //       toggleModalVisible();
-        //       notification["success"]({
-        //         message: t("joblines.successes.created")
-        //       });
-        //     })
-        //     .catch(error => {
-        //       notification["error"]({
-        //         message: t("joblines.errors.creating", {
-        //           message: error.message
-        //         })
-        //       });
-        //     });
-        // } else {
-        //   updateJobLine({
-        //     variables: {
-        //       lineId: jobLineEditModal.context.id,
-        //       line: values
-        //     }
-        //   })
-        //     .then(r => {
-        //       notification["success"]({
-        //         message: t("joblines.successes.updated")
-        //       });
-        //     })
-        //     .catch(error => {
-        //       notification["success"]({
-        //         message: t("joblines.errors.updating", {
-        //           message: error.message
-        //         })
-        //       });
-        //     });
-        //   if (jobLineEditModal.actions.refetch)
-        //     jobLineEditModal.actions.refetch();
-        //   toggleModalVisible();
-        // }
-      }
-    });
+  const handleFinish = values => {
+    alert("Closing this modal.");
+    toggleModalVisible();
+    // if (!jobLineEditModal.context.id) {
+    //   insertJobLine({
+    //     variables: {
+    //       lineInput: [{ jobid: jobLineEditModal.context.jobid, ...values }]
+    //     }
+    //   })
+    //     .then(r => {
+    //       if (jobLineEditModal.actions.refetch)
+    //         jobLineEditModal.actions.refetch();
+    //       toggleModalVisible();
+    //       notification["success"]({
+    //         message: t("joblines.successes.created")
+    //       });
+    //     })
+    //     .catch(error => {
+    //       notification["error"]({
+    //         message: t("joblines.errors.creating", {
+    //           message: error.message
+    //         })
+    //       });
+    //     });
+    // } else {
+    //   updateJobLine({
+    //     variables: {
+    //       lineId: jobLineEditModal.context.id,
+    //       line: values
+    //     }
+    //   })
+    //     .then(r => {
+    //       notification["success"]({
+    //         message: t("joblines.successes.updated")
+    //       });
+    //     })
+    //     .catch(error => {
+    //       notification["success"]({
+    //         message: t("joblines.errors.updating", {
+    //           message: error.message
+    //         })
+    //       });
+    //     });
+    //   if (jobLineEditModal.actions.refetch)
+    //     jobLineEditModal.actions.refetch();
+    //   toggleModalVisible();
+    // }
   };
 
   const handleCancel = () => {
     toggleModalVisible();
   };
 
-  console.log(
-    "c",
-    VendorAutoCompleteData?.vendors.filter(
-      v => v.id === vendorSearch.selectedId
-    )
-  );
   return (
     <InvoiceEnterModalComponent
       visible={invoiceEnterModal.visible}
       invoice={invoiceEnterModal.context}
-      handleSubmit={handleSubmit}
+      handleFinish={handleFinish}
       handleCancel={handleCancel}
-      form={form}
       handleRoAutoComplete={handleRoAutoComplete}
       handleRoSelect={handleRoSelect}
       roAutoCompleteOptions={
         RoAutoCompleteData
           ? RoAutoCompleteData.jobs.reduce((acc, value) => {
               acc.push({
-                value: value.id,
-                text: `${value.ro_number || ""} | ${value.ownr_ln ||
+                id: value.id,
+                value: `${value.ro_number || ""} | ${value.ownr_ln ||
                   ""} ${value.ownr_fn || ""} | ${value.vehicle.v_model_yr ||
                   ""} ${value.vehicle.v_make_desc || ""} ${value.vehicle
                   .v_model_desc || ""}`
@@ -175,8 +153,8 @@ function InvoiceEnterModalContainer({
         VendorAutoCompleteData
           ? VendorAutoCompleteData.vendors.reduce((acc, value) => {
               acc.push({
-                value: value.id,
-                text: `${value.name || ""}`
+                id: value.id,
+                value: `${value.name || ""}`
               });
               return acc;
             }, [])
@@ -198,8 +176,4 @@ function InvoiceEnterModalContainer({
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(
-  Form.create({ name: "InvoiceEnterModalContainer" })(
-    InvoiceEnterModalContainer
-  )
-);
+)(InvoiceEnterModalContainer);

client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.component.jsx

@@ -1,19 +1,20 @@
-import { Modal, Form, Input, InputNumber } from "antd";
-import React from "react";
+import { Form, Input, InputNumber, Modal } from "antd";
+import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import ResetForm from "../form-items-formatted/reset-form-item.component";
 
 export default function JobLinesUpsertModalComponent({
   visible,
   jobLine,
-  handleOk,
   handleCancel,
-  handleSubmit,
-  form
+  handleFinish
 }) {
   const { t } = useTranslation();
-  const { getFieldDecorator, isFieldsTouched, resetFields } = form;
+  const [form] = Form.useForm();
 
+  useEffect(() => {
+    form.resetFields();
+  }, [visible, form]);
+  console.log("jobLine", jobLine);
   return (
     <Modal
       title={
@@ -23,45 +24,39 @@ export default function JobLinesUpsertModalComponent({
       }
       visible={visible}
       okText={t("general.labels.save")}
-      onOk={handleSubmit}
+      onOk={handleFinish}
+      forceRender={true}
       onCancel={handleCancel}
     >
-      {isFieldsTouched() ? <ResetForm resetFields={resetFields} /> : null}
-      <Form onSubmit={handleSubmit} autoComplete={"off"}>
-        <Form.Item label={t("joblines.fields.line_desc")}>
-          {getFieldDecorator("line_desc", {
-            initialValue: jobLine.line_desc
-          })(<Input name="line_desc" />)}
+      <Form
+        onFinish={handleFinish}
+        initialValues={jobLine}
+        autoComplete={"off"}
+        form={form}
+      >
+        <Form.Item label={t("joblines.fields.line_desc")} name="line_desc">
+          <Input />
         </Form.Item>
-        <Form.Item label={t("joblines.fields.oem_partno")}>
-          {getFieldDecorator("oem_partno", {
-            initialValue: jobLine.oem_partno
-          })(<Input name="oem_partno" />)}
+        <Form.Item label={t("joblines.fields.oem_partno")} name="oem_partno">
+          <Input />
         </Form.Item>
-        <Form.Item label={t("joblines.fields.part_type")}>
-          {getFieldDecorator("part_type", {
-            initialValue: jobLine.part_type
-          })(<Input name="part_type" />)}
+        <Form.Item label={t("joblines.fields.part_type")} name="part_type">
+          <Input />
         </Form.Item>
-        <Form.Item label={t("joblines.fields.mod_lbr_ty")}>
-          {getFieldDecorator("mod_lbr_ty", {
-            initialValue: jobLine.mod_lbr_ty
-          })(<Input name="mod_lbr_ty" />)}
+        <Form.Item label={t("joblines.fields.mod_lbr_ty")} name="mod_lbr_ty">
+          <Input />
         </Form.Item>
-        <Form.Item label={t("joblines.fields.op_code_desc")}>
-          {getFieldDecorator("op_code_desc", {
-            initialValue: jobLine.op_code_desc
-          })(<Input name="op_code_desc" />)}
+        <Form.Item
+          label={t("joblines.fields.op_code_desc")}
+          name="op_code_desc"
+        >
+          <Input />
         </Form.Item>
-        <Form.Item label={t("joblines.fields.mod_lb_hrs")}>
-          {getFieldDecorator("mod_lb_hrs", {
-            initialValue: jobLine.mod_lb_hrs
-          })(<InputNumber name="mod_lb_hrs" />)}
+        <Form.Item label={t("joblines.fields.mod_lb_hrs")} name="mod_lb_hrs">
+          <InputNumber />
         </Form.Item>
-        <Form.Item label={t("joblines.fields.act_price")}>
-          {getFieldDecorator("act_price", {
-            initialValue: jobLine.act_price
-          })(<InputNumber name="act_price" />)}
+        <Form.Item label={t("joblines.fields.act_price")} name="act_price">
+          <InputNumber />
         </Form.Item>
       </Form>
     </Modal>

client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.container.jsx

@@ -1,13 +1,10 @@
-import { Form, notification } from "antd";
+import { notification } from "antd";
 import React from "react";
 import { useMutation } from "react-apollo";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import {
-  INSERT_NEW_JOB_LINE,
-  UPDATE_JOB_LINE
-} from "../../graphql/jobs-lines.queries";
+import { INSERT_NEW_JOB_LINE, UPDATE_JOB_LINE } from "../../graphql/jobs-lines.queries";
 import { toggleModalVisible } from "../../redux/modals/modals.actions";
 import { selectJobLineEditModal } from "../../redux/modals/modals.selectors";
 import JobLinesUpdsertModal from "./job-lines-upsert-modal.component";
@@ -21,70 +18,56 @@ const mapDispatchToProps = dispatch => ({
 
 function JobLinesUpsertModalContainer({
   jobLineEditModal,
-  toggleModalVisible,
-  form
+  toggleModalVisible
 }) {
   const { t } = useTranslation();
   const [insertJobLine] = useMutation(INSERT_NEW_JOB_LINE);
   const [updateJobLine] = useMutation(UPDATE_JOB_LINE);
 
-  const handleSubmit = e => {
-    e.preventDefault();
-
-    form.validateFieldsAndScroll((err, values) => {
-      if (err) {
-        notification["error"]({
-          message: t("joblines.errors.validation"),
-          description: err.message
-        });
-      }
-      if (!err) {
-        if (!jobLineEditModal.context.id) {
-          insertJobLine({
-            variables: {
-              lineInput: [{ jobid: jobLineEditModal.context.jobid, ...values }]
-            }
-          })
-            .then(r => {
-              if (jobLineEditModal.actions.refetch)
-                jobLineEditModal.actions.refetch();
-              toggleModalVisible();
-              notification["success"]({
-                message: t("joblines.successes.created")
-              });
-            })
-            .catch(error => {
-              notification["error"]({
-                message: t("joblines.errors.creating", {
-                  message: error.message
-                })
-              });
-            });
-        } else {
-          updateJobLine({
-            variables: {
-              lineId: jobLineEditModal.context.id,
-              line: values
-            }
-          })
-            .then(r => {
-              notification["success"]({
-                message: t("joblines.successes.updated")
-              });
-            })
-            .catch(error => {
-              notification["success"]({
-                message: t("joblines.errors.updating", {
-                  message: error.message
-                })
-              });
-            });
+  const handleFinish = values => {
+    if (!jobLineEditModal.context.id) {
+      insertJobLine({
+        variables: {
+          lineInput: [{ jobid: jobLineEditModal.context.jobid, ...values }]
+        }
+      })
+        .then(r => {
           if (jobLineEditModal.actions.refetch)
             jobLineEditModal.actions.refetch();
           toggleModalVisible();
+          notification["success"]({
+            message: t("joblines.successes.created")
+          });
+        })
+        .catch(error => {
+          notification["error"]({
+            message: t("joblines.errors.creating", {
+              message: error.message
+            })
+          });
+        });
+    } else {
+      updateJobLine({
+        variables: {
+          lineId: jobLineEditModal.context.id,
+          line: values
         }
-      }
-    });
+      })
+        .then(r => {
+          notification["success"]({
+            message: t("joblines.successes.updated")
+          });
+        })
+        .catch(error => {
+          notification["success"]({
+            message: t("joblines.errors.updating", {
+              message: error.message
+            })
+          });
+        });
+      if (jobLineEditModal.actions.refetch) jobLineEditModal.actions.refetch();
+      toggleModalVisible();
+    }
   };
 
   const handleCancel = () => {
@@ -95,9 +78,8 @@ function JobLinesUpsertModalContainer({
     <JobLinesUpdsertModal
       visible={jobLineEditModal.visible}
       jobLine={jobLineEditModal.context}
-      handleSubmit={handleSubmit}
+      handleFinish={handleFinish}
       handleCancel={handleCancel}
-      form={form}
     />
   );
 }
@@ -105,6 +87,4 @@ function JobLinesUpsertModalContainer({
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(
-  Form.create({ name: "JobsDetailPageContainer" })(JobLinesUpsertModalContainer)
-);
+)(JobLinesUpsertModalContainer);

client/src/components/jobs-detail-claims/jobs-detail-claims.component.jsx

@@ -1,24 +1,17 @@
 import { Form, Input, Switch } from "antd";
-import React, { useContext } from "react";
+import React from "react";
 import { useTranslation } from "react-i18next";
-import JobDetailFormContext from "../../pages/jobs-detail/jobs-detail.page.context";
 
 export default function JobsDetailClaims({ job }) {
-  const form = useContext(JobDetailFormContext);
-  const { getFieldDecorator } = form;
   const { t } = useTranslation();
 
   return (
     <div>
-      <Form.Item label={t("jobs.fields.csr")}>
-        {getFieldDecorator("csr", {
-          initialValue: job.csr
-        })(<Input name='csr' />)}
+      <Form.Item label={t("jobs.fields.csr")} name="csr">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.loss_desc")}>
-        {getFieldDecorator("loss_desc", {
-          initialValue: job.loss_desc
-        })(<Input name='loss_desc' />)}
+      <Form.Item label={t("jobs.fields.loss_desc")} name="loss_desc">
+        <Input />
       </Form.Item>
       TODO How to handle different taxes and marking them as exempt?
       {
@@ -28,36 +21,27 @@ export default function JobsDetailClaims({ job }) {
         //     })(<Input name='exempt' />)}
         //   </Form.Item>
       }
-      <Form.Item label={t("jobs.fields.ponumber")}>
-        {getFieldDecorator("po_number", {
-          initialValue: job.po_number
-        })(<Input name='po_number' />)}
+      <Form.Item label={t("jobs.fields.ponumber")} name="po_number">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.unitnumber")}>
-        {getFieldDecorator("unit_number", {
-          initialValue: job.unit_number
-        })(<Input name='unit_number' />)}
+      <Form.Item label={t("jobs.fields.unitnumber")} name="unit_number">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.specialcoveragepolicy")}>
-        {getFieldDecorator("special_coverage_policy", {
-          initialValue: job.special_coverage_policy,
-          valuePropName: "checked"
-        })(<Switch name='special_coverage_policy' />)}
+      <Form.Item
+        label={t("jobs.fields.specialcoveragepolicy")}
+        valuePropName="checked"
+        name="special_coverage_policy"
+      >
+        <Switch />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.kmin")}>
-        {getFieldDecorator("kmin", {
-          initialValue: job.kmin
-        })(<Input name='kmin' />)}
+      <Form.Item label={t("jobs.fields.kmin")} name="kmin">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.kmout")}>
-        {getFieldDecorator("kmout", {
-          initialValue: job.kmout
-        })(<Input name='kmout' />)}
+      <Form.Item label={t("jobs.fields.kmout")} name="kmout">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.referralsource")}>
-        {getFieldDecorator("referral_source", {
-          initialValue: job.referral_source
-        })(<Input name='referral_source' />)}
+      <Form.Item label={t("jobs.fields.referralsource")} name="referral_source">
+        <Input />
       </Form.Item>
     </div>
   );

client/src/components/jobs-detail-dates/jobs-detail-dates.component.jsx

@@ -1,89 +1,78 @@
 import { DatePicker, Form } from "antd";
-import moment from "moment";
-import React, { useContext } from "react";
+import React from "react";
 import { useTranslation } from "react-i18next";
-import JobDetailFormContext from "../../pages/jobs-detail/jobs-detail.page.context";
 
 export default function JobsDetailDatesComponent({ job }) {
-  const form = useContext(JobDetailFormContext);
-  const { getFieldDecorator } = form;
   const { t } = useTranslation();
 
+  // initialValue: job.loss_date ? moment(job.loss_date) : null
+  // initialValue: job.date_estimated ? moment(job.date_estimated) : null
+  // initialValue: job.date_open ? moment(job.date_open) : null
+  // initialValue: job.date_scheduled ? moment(job.date_scheduled) : null
+  // initialValue: job.scheduled_in ? moment(job.scheduled_in) : null
+  // initialValue: job.actual_in ? moment(job.actual_in) : null
+  // initialValue: job.scheduled_completion            ? moment(job.scheduled_completion)            : null
+  // initialValue: job.actual_completion            ? moment(job.actual_completion)            : null
+  // initialValue: job.scheduled_delivery            ? moment(job.scheduled_delivery)            : null
+  // initialValue: job.actual_delivery ? moment(job.actual_delivery) : null
+  // initialValue: job.date_invoiced ? moment(job.date_invoiced) : null
+  // initialValue: job.date_closed ? moment(job.date_closed) : null
+  // initialValue: job.date_exported ? moment(job.date_exported) : null
+
   return (
     <div>
-      <Form.Item label={t("jobs.fields.loss_date")}>
-        {getFieldDecorator("loss_date", {
-          initialValue: job.loss_date ? moment(job.loss_date) : null
-        })(<DatePicker name="loss_date" />)}
+      <Form.Item label={t("jobs.fields.loss_date")} name="loss_date">
+        <DatePicker />
       </Form.Item>
-      DAMAGE {JSON.stringify(job.area_of_damage)}
       CAA # seems not correct based on field mapping Class seems not correct
       based on field mapping
-      <Form.Item label={t("jobs.fields.date_estimated")}>
-        {getFieldDecorator("date_estimated", {
-          initialValue: job.date_estimated ? moment(job.date_estimated) : null
-        })(<DatePicker name="date_estimated" />)}
+      <Form.Item label={t("jobs.fields.date_estimated")} name="date_estimated">
+        <DatePicker />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.date_open")}>
-        {getFieldDecorator("date_open", {
-          initialValue: job.date_open ? moment(job.date_open) : null
-        })(<DatePicker name="date_open" />)}
+      <Form.Item label={t("jobs.fields.date_open")} name="date_open">
+        <DatePicker />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.date_scheduled")}>
-        {getFieldDecorator("date_scheduled", {
-          initialValue: job.date_scheduled ? moment(job.date_scheduled) : null
-        })(<DatePicker name="date_scheduled" />)}
+      <Form.Item label={t("jobs.fields.date_scheduled")} name="date_scheduled">
+        <DatePicker />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.scheduled_in")}>
-        {getFieldDecorator("scheduled_in", {
-          initialValue: job.scheduled_in ? moment(job.scheduled_in) : null
-        })(<DatePicker name="scheduled_in" />)}
+      <Form.Item label={t("jobs.fields.scheduled_in")} name="scheduled_in">
+        <DatePicker />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.actual_in")}>
-        {getFieldDecorator("actual_in", {
-          initialValue: job.actual_in ? moment(job.actual_in) : null
-        })(<DatePicker name="actual_in" />)}
+      <Form.Item label={t("jobs.fields.actual_in")} name="actual_in">
+        <DatePicker />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.scheduled_completion")}>
-        {getFieldDecorator("scheduled_completion", {
-          initialValue: job.scheduled_completion
-            ? moment(job.scheduled_completion)
-            : null
-        })(<DatePicker name="scheduled_completion" />)}
+      <Form.Item
+        label={t("jobs.fields.scheduled_completion")}
+        name="scheduled_completion"
+      >
+        <DatePicker />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.actual_completion")}>
-        {getFieldDecorator("actual_completion", {
-          initialValue: job.actual_completion
-            ? moment(job.actual_completion)
-            : null
-        })(<DatePicker name="actual_completion" />)}
+      <Form.Item
+        label={t("jobs.fields.actual_completion")}
+        name="actual_completion"
+      >
+        <DatePicker />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.scheduled_delivery")}>
-        {getFieldDecorator("scheduled_delivery", {
-          initialValue: job.scheduled_delivery
-            ? moment(job.scheduled_delivery)
-            : null
-        })(<DatePicker name="scheduled_delivery" />)}
+      <Form.Item
+        label={t("jobs.fields.scheduled_delivery")}
+        name="scheduled_delivery"
+      >
+        <DatePicker />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.actual_delivery")}>
-        {getFieldDecorator("actual_delivery", {
-          initialValue: job.actual_delivery ? moment(job.actual_delivery) : null
-        })(<DatePicker name="actual_delivery" />)}
+      <Form.Item
+        label={t("jobs.fields.actual_delivery")}
+        name="actual_delivery"
+      >
+        <DatePicker />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.date_invoiced")}>
-        {getFieldDecorator("date_invoiced", {
-          initialValue: job.date_invoiced ? moment(job.date_invoiced) : null
-        })(<DatePicker name="date_invoiced" />)}
+      <Form.Item label={t("jobs.fields.date_invoiced")} name="date_invoiced">
+        <DatePicker />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.date_closed")}>
-        {getFieldDecorator("date_closed", {
-          initialValue: job.date_closed ? moment(job.date_closed) : null
-        })(<DatePicker name="date_closed" />)}
+      <Form.Item label={t("jobs.fields.date_closed")} name="date_closed">
+        <DatePicker />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.date_exported")}>
-        {getFieldDecorator("date_exported", {
-          initialValue: job.date_exported ? moment(job.date_exported) : null
-        })(<DatePicker name="date_exported" />)}
+      <Form.Item label={t("jobs.fields.date_exported")} name="date_exported">
+        <DatePicker />
       </Form.Item>
     </div>
   );

client/src/components/jobs-detail-financial/jobs-detail-financial.component.jsx

@@ -1,181 +1,131 @@
-import { Form, Input, InputNumber, Divider } from "antd";
-import React, { useContext } from "react";
+import { Divider, Form, Input, InputNumber } from "antd";
+import React from "react";
 import { useTranslation } from "react-i18next";
-import JobDetailFormContext from "../../pages/jobs-detail/jobs-detail.page.context";
 
 export default function JobsDetailFinancials({ job }) {
-  const form = useContext(JobDetailFormContext);
-  const { getFieldDecorator } = form;
   const { t } = useTranslation();
 
   return (
     <div>
-      <Form.Item label={t("jobs.fields.ded_amt")}>
-        {getFieldDecorator("ded_amt", {
-          initialValue: job.ded_amt
-        })(<InputNumber name="ded_amt" />)}
+      <Form.Item label={t("jobs.fields.ded_amt")} name="ded_amt">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.ded_status")}>
-        {getFieldDecorator("ded_status", {
-          initialValue: job.ded_status
-        })(<Input name="ded_status" />)}
+      <Form.Item label={t("jobs.fields.ded_status")} name="ded_status">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.depreciation_taxes")}>
-        {getFieldDecorator("depreciation_taxes", {
-          initialValue: job.depreciation_taxes
-        })(<InputNumber name="depreciation_taxes" />)}
+      <Form.Item
+        label={t("jobs.fields.depreciation_taxes")}
+        name="depreciation_taxes"
+      >
+        <InputNumber />
       </Form.Item>
       TODO This is equivalent of GST payable.
-      <Form.Item label={t("jobs.fields.federal_tax_payable")}>
-        {getFieldDecorator("federal_tax_payable", {
-          initialValue: job.federal_tax_payable
-        })(<InputNumber name="federal_tax_payable" />)}
+      <Form.Item
+        label={t("jobs.fields.federal_tax_payable")}
+        name="federal_tax_payable"
+      >
+        <InputNumber />
       </Form.Item>
       TODO equivalent of other customer amount
-      <Form.Item label={t("jobs.fields.other_amount_payable")}>
-        {getFieldDecorator("other_amount_payable", {
-          initialValue: job.other_amount_payable
-        })(<InputNumber name="other_amount_payable" />)}
+      <Form.Item
+        label={t("jobs.fields.other_amount_payable")}
+        name="other_amount_payable"
+      >
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.towing_payable")}>
-        {getFieldDecorator("towing_payable", {
-          initialValue: job.towing_payable
-        })(<InputNumber name="towing_payable" />)}
+      <Form.Item label={t("jobs.fields.towing_payable")} name="towing_payable">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.storage_payable")}>
-        {getFieldDecorator("storage_payable", {
-          initialValue: job.storage_payable
-        })(<InputNumber name="storage_payable" />)}
+      <Form.Item
+        label={t("jobs.fields.storage_payable")}
+        name="storage_payable"
+      >
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.adjustment_bottom_line")}>
-        {getFieldDecorator("adjustment_bottom_line", {
-          initialValue: job.adjustment_bottom_line
-        })(<InputNumber name="adjustment_bottom_line" />)}
+      <Form.Item
+        label={t("jobs.fields.adjustment_bottom_line")}
+        name="adjustment_bottom_line"
+      >
+        <InputNumber />
       </Form.Item>
       <Divider />
       Totals Table
-      <Form.Item label={t("jobs.fields.labor_rate_desc")}>
-        {getFieldDecorator("labor_rate_desc", {
-          initialValue: job.labor_rate_desc
-        })(<Input name="labor_rate_desc" />)}
+      <Form.Item
+        label={t("jobs.fields.labor_rate_desc")}
+        name="labor_rate_desc"
+      >
+        <Input />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_lab")}>
-        {getFieldDecorator("rate_lab", {
-          initialValue: job.rate_lab
-        })(<InputNumber name="rate_lab" />)}
+      <Form.Item label={t("jobs.fields.rate_lab")} name="rate_lab">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_lad")}>
-        {getFieldDecorator("rate_lad", {
-          initialValue: job.rate_lad
-        })(<InputNumber name="rate_lad" />)}
+      <Form.Item label={t("jobs.fields.rate_lad")} name="rate_lad">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_lae")}>
-        {getFieldDecorator("rate_lae", {
-          initialValue: job.rate_lae
-        })(<InputNumber name="rate_lae" />)}
+      <Form.Item label={t("jobs.fields.rate_lae")} name="rate_lae">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_lar")}>
-        {getFieldDecorator("rate_lar", {
-          initialValue: job.rate_lar
-        })(<InputNumber name="rate_lar" />)}
+      <Form.Item label={t("jobs.fields.rate_lar")} name="rate_lar">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_las")}>
-        {getFieldDecorator("rate_las", {
-          initialValue: job.rate_las
-        })(<InputNumber name="rate_las" />)}
+      <Form.Item label={t("jobs.fields.rate_las")} name="rate_las">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_laf")}>
-        {getFieldDecorator("rate_laf", {
-          initialValue: job.rate_laf
-        })(<InputNumber name="rate_laf" />)}
+      <Form.Item label={t("jobs.fields.rate_laf")} name="rate_laf">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_lam")}>
-        {getFieldDecorator("rate_lam", {
-          initialValue: job.rate_lam
-        })(<InputNumber name="rate_lam" />)}
+      <Form.Item label={t("jobs.fields.rate_lam")} name="rate_lam">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_lag")}>
-        {getFieldDecorator("rate_lag", {
-          initialValue: job.rate_lag
-        })(<InputNumber name="rate_lag" />)}
+      <Form.Item label={t("jobs.fields.rate_lag")} name="rate_lag">
+        <InputNumber />
       </Form.Item>
       Note //TODO Remove ATP rate?
-      <Form.Item label={t("jobs.fields.rate_atp")}>
-        {getFieldDecorator("rate_atp", {
-          initialValue: job.rate_atp
-        })(<InputNumber name="rate_atp" />)}
+      <Form.Item label={t("jobs.fields.rate_atp")} name="rate_atp">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_lau")}>
-        {getFieldDecorator("rate_lau", {
-          initialValue: job.rate_lau
-        })(<InputNumber name="rate_lau" />)}
+      <Form.Item label={t("jobs.fields.rate_lau")} name="rate_lau">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_la1")}>
-        {getFieldDecorator("rate_la1", {
-          initialValue: job.rate_la1
-        })(<InputNumber name="rate_la1" />)}
+      <Form.Item label={t("jobs.fields.rate_la1")} name="rate_la1">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_la2")}>
-        {getFieldDecorator("rate_la2", {
-          initialValue: job.rate_la2
-        })(<InputNumber name="rate_la2" />)}
+      <Form.Item label={t("jobs.fields.rate_la2")} name="rate_la2">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_la3")}>
-        {getFieldDecorator("rate_la3", {
-          initialValue: job.rate_la3
-        })(<InputNumber name="rate_la3" />)}
+      <Form.Item label={t("jobs.fields.rate_la3")} name="rate_la3">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_la4")}>
-        {getFieldDecorator("rate_la4", {
-          initialValue: job.rate_la4
-        })(<InputNumber name="rate_la4" />)}
+      <Form.Item label={t("jobs.fields.rate_la4")} name="rate_la4">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_mapa")}>
-        {getFieldDecorator("rate_mapa", {
-          initialValue: job.rate_mapa
-        })(<InputNumber name="rate_mapa" />)}
+      <Form.Item label={t("jobs.fields.rate_mapa")} name="rate_mapa">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_mash")}>
-        {getFieldDecorator("rate_mash", {
-          initialValue: job.rate_mash
-        })(<InputNumber name="rate_mash" />)}
+      <Form.Item label={t("jobs.fields.rate_mash")} name="rate_mash">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_mahw")}>
-        {getFieldDecorator("rate_mahw", {
-          initialValue: job.rate_mahw
-        })(<InputNumber name="rate_mahw" />)}
+      <Form.Item label={t("jobs.fields.rate_mahw")} name="rate_mahw">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_ma2s")}>
-        {getFieldDecorator("rate_ma2s", {
-          initialValue: job.rate_ma2s
-        })(<InputNumber name="rate_ma2s" />)}
+      <Form.Item label={t("jobs.fields.rate_ma2s")} name="rate_ma2s">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_ma3s")}>
-        {getFieldDecorator("rate_ma3s", {
-          initialValue: job.rate_ma3s
-        })(<InputNumber name="rate_ma3s" />)}
+      <Form.Item label={t("jobs.fields.rate_ma3s")} name="rate_ma3s">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_mabl")}>
-        {getFieldDecorator("rate_mabl", {
-          initialValue: job.rate_mabl
-        })(<InputNumber name="rate_mabl" />)}
+      <Form.Item label={t("jobs.fields.rate_mabl")} name="rate_mabl">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_macs")}>
-        {getFieldDecorator("rate_macs", {
-          initialValue: job.rate_macs
-        })(<InputNumber name="rate_macs" />)}
+      <Form.Item label={t("jobs.fields.rate_macs")} name="rate_macs">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_matd")}>
-        {getFieldDecorator("rate_matd", {
-          initialValue: job.rate_matd
-        })(<InputNumber name="rate_matd" />)}
+      <Form.Item label={t("jobs.fields.rate_matd")} name="rate_matd">
+        <InputNumber />
+      </Form.Item>
+      <Form.Item label={t("jobs.fields.rate_laa")} name="rate_laa">
+        <InputNumber />
       </Form.Item>
-<Form.Item label={t("jobs.fields.rate_laa")}>
-{getFieldDecorator("rate_laa", {
-initialValue: job.rate_laa
-})(<InputNumber name="rate_laa" />)}
- </Form.Item>
-
     </div>
   );
 }

client/src/components/jobs-detail-header/jobs-detail-header.component.jsx

@@ -5,13 +5,12 @@ import {
   Checkbox,
   Descriptions,
   Dropdown,
-  
   Menu,
   notification,
   PageHeader,
   Tag
 } from "antd";
-import {DownCircleFilled} from "@ant-design/icons";
+import { DownCircleFilled } from "@ant-design/icons";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import Moment from "react-moment";
@@ -34,7 +33,7 @@ export default connect(
   job,
   mutationConvertJob,
   refetch,
-  handleSubmit,
+  handleFinish,
   scheduleModalState,
   bodyshop,
   updateJobStatus
@@ -44,7 +43,7 @@ export default connect(
 
   const tombstoneTitle = (
     <div>
-      <Avatar size='large' alt='Vehicle Image' src={CarImage} />
+      <Avatar size="large" alt="Vehicle Image" src={CarImage} />
       {`${t("jobs.fields.ro_number")} ${
         job.ro_number ? job.ro_number : t("general.labels.na")
       }`}
@@ -55,7 +54,8 @@ export default connect(
     <Menu
       onClick={e => {
         updateJobStatus(e.key);
-      }}>
+      }}
+    >
       {bodyshop.md_ro_statuses.statuses.map(item => (
         <Menu.Item key={item}>{item}</Menu.Item>
       ))}
@@ -63,23 +63,24 @@ export default connect(
   );
 
   const menuExtra = [
-    <Dropdown overlay={statusmenu} key='changestatus'>
+    <Dropdown overlay={statusmenu} key="changestatus">
       <Button>
         {t("jobs.actions.changestatus")} <DownCircleFilled />
       </Button>
     </Dropdown>,
-    <Badge key='schedule' count={job.appointments_aggregate.aggregate.count}>
+    <Badge key="schedule" count={job.appointments_aggregate.aggregate.count}>
       <Button
         //TODO Enabled logic based on status.
         onClick={() => {
           setscheduleModalVisible(true);
-        }}>
+        }}
+      >
         {t("jobs.actions.schedule")}
       </Button>
     </Badge>,
     <Button
-      key='convert'
-      type='dashed'
+      key="convert"
+      type="dashed"
       disabled={job.converted}
       onClick={() => {
         mutationConvertJob({
@@ -91,14 +92,11 @@ export default connect(
             message: t("jobs.successes.converted")
           });
         });
-      }}>
+      }}
+    >
       {t("jobs.actions.convert")}
     </Button>,
-    <Button
-      type='primary'
-      key='submit'
-      htmlType='button'
-      onClick={handleSubmit}>
+    <Button type="primary" key="submit" htmlType="submit">
       {t("general.labels.save")}
     </Button>
   ];
@@ -111,9 +109,9 @@ export default connect(
       title={tombstoneTitle}
       //subTitle={tombstoneSubtitle}
       tags={
-        <span key='job-status'>
-          {job.status ? <Tag color='blue'>{job.status}</Tag> : null}
-          <Tag color='red'>
+        <span key="job-status">
+          {job.status ? <Tag color="blue">{job.status}</Tag> : null}
+          <Tag color="red">
             {job.owner ? (
               <Link to={`/manage/owners/${job.owner.id}`}>
                 {`${job.ownr_co_nm || ""}${job.ownr_fn || ""} ${job.ownr_ln ||
@@ -123,7 +121,7 @@ export default connect(
               t("jobs.errors.noowner")
             )}
           </Tag>
-          <Tag color='green'>
+          <Tag color="green">
             {job.vehicle ? (
               <Link to={`/manage/vehicles/${job.vehicle.id}`}>
                 {job.vehicle.v_model_yr || t("general.labels.na")}{" "}
@@ -137,27 +135,37 @@ export default connect(
           <BarcodePopup value={job.id} />
         </span>
       }
-      extra={menuExtra}>
-      <Descriptions size='small' column={5}>
-        <Descriptions.Item label={t("jobs.fields.repairtotal")}>
+      extra={menuExtra}
+    >
+      <Descriptions size="small" column={5}>
+        <Descriptions.Item key="total" label={t("jobs.fields.repairtotal")}>
           <CurrencyFormatter>{job.clm_total}</CurrencyFormatter>
         </Descriptions.Item>
 
-        <Descriptions.Item label={t("jobs.fields.customerowing")}>
+        <Descriptions.Item
+          key="custowing"
+          label={t("jobs.fields.customerowing")}
+        >
           ##NO BINDING YET##
         </Descriptions.Item>
 
-        <Descriptions.Item label={t("jobs.fields.specialcoveragepolicy")}>
+        <Descriptions.Item
+          key="scp"
+          label={t("jobs.fields.specialcoveragepolicy")}
+        >
           <Checkbox checked={job.special_coverage_policy} />
         </Descriptions.Item>
 
-        <Descriptions.Item label={t("jobs.fields.scheduled_completion")}>
+        <Descriptions.Item
+          key="sched_comp"
+          label={t("jobs.fields.scheduled_completion")}
+        >
           {job.scheduled_completion ? (
-            <Moment format='MM/DD/YYYY'>{job.scheduled_completion}</Moment>
+            <Moment format="MM/DD/YYYY">{job.scheduled_completion}</Moment>
           ) : null}
         </Descriptions.Item>
 
-        <Descriptions.Item label={t("jobs.fields.servicecar")}>
+        <Descriptions.Item key="servicecar" label={t("jobs.fields.servicecar")}>
           {job.service_car}
         </Descriptions.Item>
       </Descriptions>

client/src/components/jobs-detail-insurance/jobs-detail-insurance.component.jsx

@@ -1,146 +1,115 @@
-import { Divider, Form, Input, DatePicker } from "antd";
-import React, { useContext } from "react";
+import { DatePicker, Divider, Form, Input } from "antd";
+import React from "react";
 import { useTranslation } from "react-i18next";
-import JobDetailFormContext from "../../pages/jobs-detail/jobs-detail.page.context";
 import FormItemEmail from "../form-items-formatted/email-form-item.component";
 import FormItemPhone from "../form-items-formatted/phone-form-item.component";
-import moment from "moment";
 
-export default function JobsDetailInsurance({ job }) {
-  const form = useContext(JobDetailFormContext);
-  const { getFieldDecorator, getFieldValue } = form;
+export default function JobsDetailInsurance({ job, form }) {
+  const { getFieldValue } = form;
   const { t } = useTranslation();
-
+  //initialValue: job.loss_date ? moment(job.loss_date) : null
+  console.log("job", job);
   return (
     <div>
-      <Form.Item label={t("jobs.fields.ins_co_id")}>
-        {getFieldDecorator("ins_co_id", {
-          initialValue: job.ins_co_id
-        })(<Input name="ins_co_id" />)}
+      <Form.Item label={t("jobs.fields.ins_co_id")} name="ins_co_id">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.policy_no")}>
-        {getFieldDecorator("policy_no", {
-          initialValue: job.policy_no
-        })(<Input name="policy_no" />)}
+      <Form.Item label={t("jobs.fields.policy_no")} name="policy_no">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.clm_no")}>
-        {getFieldDecorator("clm_no", {
-          initialValue: job.clm_no
-        })(<Input name="clm_no" />)}
+      <Form.Item label={t("jobs.fields.clm_no")} name="clm_no">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.regie_number")}>
-        {getFieldDecorator("regie_number", {
-          initialValue: job.regie_number
-        })(<Input name="regie_number" />)}
+      <Form.Item label={t("jobs.fields.regie_number")} name="regie_number">
+        <Input />
       </Form.Item>
       TODO: missing KOL field???
-      <Form.Item label={t("jobs.fields.loss_date")}>
-        {getFieldDecorator("loss_date", {
-          initialValue: job.loss_date ? moment(job.loss_date) : null
-        })(<DatePicker name="loss_date" />)}
+      <Form.Item label={t("jobs.fields.loss_date")} name="loss_date">
+        <DatePicker />
       </Form.Item>
       DAMAGE {JSON.stringify(job.area_of_damage)}
       CAA # seems not correct based on field mapping Class seems not correct
       based on field mapping
-      <Form.Item label={t("jobs.fields.ins_co_nm")}>
-        {getFieldDecorator("ins_co_nm", {
-          initialValue: job.ins_co_nm
-        })(<Input name="ins_co_nm" />)}
+      <Form.Item label={t("jobs.fields.ins_co_nm")} name="ins_co_nm">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.ins_addr1")}>
-        {getFieldDecorator("ins_addr1", {
-          initialValue: job.ins_addr1
-        })(<Input name="ins_addr1" />)}
+      <Form.Item label={t("jobs.fields.ins_addr1")} name="ins_addr1">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.ins_city")}>
-        {getFieldDecorator("ins_city", {
-          initialValue: job.ins_city
-        })(<Input name="ins_city" />)}
+      <Form.Item label={t("jobs.fields.ins_city")} name="ins_city">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.ins_ct_ln")}>
-        {getFieldDecorator("ins_ct_ln", {
-          initialValue: job.ins_ct_ln
-        })(<Input name="ins_ct_ln" />)}
+      <Form.Item label={t("jobs.fields.ins_ct_ln")} name="ins_ct_ln">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.ins_ct_fn")}>
-        {getFieldDecorator("ins_ct_fn", {
-          initialValue: job.ins_ct_fn
-        })(<Input name="ins_ct_fn" />)}
+      <Form.Item label={t("jobs.fields.ins_ct_fn")} name="ins_ct_fn">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.ins_ph1")}>
-        {getFieldDecorator("ins_ph1", {
-          initialValue: job.ins_ph1
-        })(<FormItemPhone customInput={Input} name="ins_ph1" />)}
+      <Form.Item label={t("jobs.fields.ins_ph1")} name="ins_ph1">
+        <FormItemPhone customInput={Input} />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.ins_ea")}>
-        {getFieldDecorator("ins_ea", {
-          initialValue: job.ins_ea,
-          rules: [
-            {
-              type: "email",
-              message: "This is not a valid email address."
-            }
-          ]
-        })(<FormItemEmail name="ins_ea" email={getFieldValue("ins_ea")} />)}
+      <Form.Item
+        label={t("jobs.fields.ins_ea")}
+        name="ins_ea"
+        rules={[
+          {
+            type: "email",
+            message: "This is not a valid email address."
+          }
+        ]}
+      >
+        <FormItemEmail email={getFieldValue("ins_ea")} />
       </Form.Item>
       <Divider />
       Appraiser Info
-      <Form.Item label={t("jobs.fields.est_co_nm")}>
-        {getFieldDecorator("est_co_nm", {
-          initialValue: job.est_co_nm
-        })(<Input name="est_co_nm" />)}
+      <Form.Item label={t("jobs.fields.est_co_nm")} name="est_co_nm">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.est_ct_fn")}>
-        {getFieldDecorator("est_ct_fn", {
-          initialValue: job.est_ct_fn
-        })(<Input name="est_ct_fn" />)}
+      <Form.Item label={t("jobs.fields.est_ct_fn")} name="est_ct_fn">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.est_ct_ln")}>
-        {getFieldDecorator("est_ct_ln", {
-          initialValue: job.est_ct_ln
-        })(<Input name="est_ct_ln" />)}
+      <Form.Item label={t("jobs.fields.est_ct_ln")} name="est_ct_ln">
+        <Input />
       </Form.Item>
       TODO: Field is pay date but title is inspection date. Likely incorrect?
-      <Form.Item label={t("jobs.fields.pay_date")}>
-        {getFieldDecorator("pay_date", {
-          initialValue: job.pay_date
-        })(<Input name="pay_date" />)}
+      <Form.Item label={t("jobs.fields.pay_date")} name="pay_date">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.est_ph1")}>
-        {getFieldDecorator("est_ph1", {
-          initialValue: job.est_ph1
-        })(<Input name="est_ph1" />)}
+      <Form.Item label={t("jobs.fields.est_ph1")} name="est_ph1">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.est_ea")}>
-        {getFieldDecorator("est_ea", {
-          initialValue: job.est_ea,
-          rules: [
-            {
-              type: "email",
-              message: "This is not a valid email address."
-            }
-          ]
-        })(<FormItemEmail name="est_ea" email={getFieldValue("est_ea")} />)}
+      <Form.Item
+        label={t("jobs.fields.est_ea")}
+        name="est_ea"
+        rules={[
+          {
+            type: "email",
+            message: "This is not a valid email address."
+          }
+        ]}
+      >
+        <FormItemEmail email={getFieldValue("est_ea")} />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.selling_dealer")}>
-        {getFieldDecorator("selling_dealer", {
-          initialValue: job.selling_dealer
-        })(<Input name="selling_dealer" />)}
+      <Form.Item label={t("jobs.fields.selling_dealer")} name="selling_dealer">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.servicing_dealer")}>
-        {getFieldDecorator("servicing_dealer", {
-          initialValue: job.servicing_dealer
-        })(<Input name="servicing_dealer" />)}
+      <Form.Item
+        label={t("jobs.fields.servicing_dealer")}
+        name="servicing_dealer"
+      >
+        <Input />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.selling_dealer_contact")}>
-        {getFieldDecorator("selling_dealer_contact", {
-          initialValue: job.selling_dealer_contact
-        })(<Input name="selling_dealer_contact" />)}
+      <Form.Item
+        label={t("jobs.fields.selling_dealer_contact")}
+        name="selling_dealer_contact"
+      >
+        <Input />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.servicing_dealer_contact")}>
-        {getFieldDecorator("servicing_dealer_contact", {
-          initialValue: job.servicing_dealer_contact
-        })(<Input name="servicing_dealer_contact" />)}
+      <Form.Item
+        label={t("jobs.fields.servicing_dealer_contact")}
+        name="servicing_dealer_contact"
+      >
+        <Input />
       </Form.Item>
       TODO: Adding servicing/selling dealer contact info?
     </div>

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

@@ -5,99 +5,77 @@ import FormItemEmail from "../form-items-formatted/email-form-item.component";
 import FormItemPhone from "../form-items-formatted/phone-form-item.component";
 import ResetForm from "../form-items-formatted/reset-form-item.component";
 
-export default function OwnerDetailFormComponent({ form, owner }) {
+export default function OwnerDetailFormComponent({ form }) {
   const { t } = useTranslation();
-  const {
-    isFieldsTouched,
-    resetFields,
-    getFieldDecorator,
-    getFieldValue
-  } = form;
-
+  const { isFieldsTouched, resetFields, getFieldValue } = form;
+  console.log("isFieldsTouched([], true)", isFieldsTouched([], true));
   return (
     <div>
-      {isFieldsTouched() ? <ResetForm resetFields={resetFields} /> : null}
+      <button onClick={() => alert(getFieldValue("ownr_ea"))}>YY</button>
+      {isFieldsTouched([], true) ? (
+        <ResetForm resetFields={resetFields} />
+      ) : null}
       <Button type="primary" key="submit" htmlType="submit">
         {t("general.labels.save")}
       </Button>
       <Row>
         <Col span={8}>
-          <Form.Item label={t("owners.fields.ownr_ln")}>
-            {getFieldDecorator("ownr_ln", {
-              initialValue: owner.ownr_ln
-            })(<Input name="ownr_ln" />)}
+          <Form.Item label={t("owners.fields.ownr_ln")} name="ownr_ln">
+            <Input />
           </Form.Item>
-          <Form.Item label={t("owners.fields.ownr_fn")}>
-            {getFieldDecorator("ownr_fn", {
-              initialValue: owner.ownr_fn
-            })(<Input name="ownr_fn" />)}
+          <Form.Item label={t("owners.fields.ownr_fn")} name="ownr_fn">
+            <Input />
           </Form.Item>
-          <Form.Item label={t("owners.fields.allow_text_message")}>
-            {getFieldDecorator("allow_text_message", {
-              initialValue: owner.allow_text_message,
-              valuePropName: "checked"
-            })(<Switch name="allow_text_message" />)}
+          <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_addr1")}>
-            {getFieldDecorator("ownr_addr1", {
-              initialValue: owner.ownr_addr1
-            })(<Input name="ownr_addr1" />)}
+          <Form.Item label={t("owners.fields.ownr_addr1")} name="ownr_addr1">
+            <Input />
           </Form.Item>
-          <Form.Item label={t("owners.fields.ownr_addr2")}>
-            {getFieldDecorator("ownr_addr2", {
-              initialValue: owner.ownr_addr2
-            })(<Input name="ownr_addr2" />)}
+          <Form.Item label={t("owners.fields.ownr_addr2")} name="ownr_addr2">
+            <Input />
           </Form.Item>
-          <Form.Item label={t("owners.fields.ownr_city")}>
-            {getFieldDecorator("ownr_city", {
-              initialValue: owner.ownr_city
-            })(<Input name="ownr_city" />)}
+          <Form.Item label={t("owners.fields.ownr_city")} name="ownr_city">
+            <Input />
           </Form.Item>
-          <Form.Item label={t("owners.fields.ownr_ctry")}>
-            {getFieldDecorator("ownr_ctry", {
-              initialValue: owner.ownr_ctry
-            })(<Input name="ownr_ctry" />)}
+          <Form.Item label={t("owners.fields.ownr_ctry")} name="ownr_ctry">
+            <Input />
           </Form.Item>
         </Col>
         <Col span={8}>
-          {" "}
-          <Form.Item label={t("owners.fields.ownr_ea")}>
-            {getFieldDecorator("ownr_ea", {
-              initialValue: owner.ownr_ea,
-              rules: [
-                {
-                  type: "email",
-                  message: "This is not a valid email address."
-                }
-              ]
-            })(
-              <FormItemEmail name="ownr_ea" email={getFieldValue("ownr_ea")} />
-            )}
+          <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")}>
-            {getFieldDecorator("ownr_ph1", {
-              initialValue: owner.ownr_ph1
-            })(<FormItemPhone customInput={Input} name="ownr_ph1" />)}
+          <Form.Item label={t("owners.fields.ownr_ph1")} name="ownr_ph1">
+            <FormItemPhone customInput={Input} />
           </Form.Item>
-          <Form.Item label={t("owners.fields.ownr_st")}>
-            {getFieldDecorator("ownr_st", {
-              initialValue: owner.ownr_st
-            })(<Input name="ownr_st" />)}
+          <Form.Item label={t("owners.fields.ownr_st")} name="ownr_st">
+            <Input />
           </Form.Item>
-          <Form.Item label={t("owners.fields.ownr_zip")}>
-            {getFieldDecorator("ownr_zip", {
-              initialValue: owner.ownr_zip
-            })(<Input name="ownr_zip" />)}
+          <Form.Item label={t("owners.fields.ownr_zip")} name="ownr_zip">
+            <Input />
           </Form.Item>
-          <Form.Item label={t("owners.fields.preferred_contact")}>
-            {getFieldDecorator("preferred_contact", {
-              initialValue: owner.preferred_contact
-            })(<Input name="preferred_contact" />)}
+          <Form.Item
+            label={t("owners.fields.preferred_contact")}
+            name="preferred_contact"
+          >
+            <Input />
           </Form.Item>
-          <Form.Item label={t("owners.fields.ownr_title")}>
-            {getFieldDecorator("ownr_title", {
-              initialValue: owner.ownr_title
-            })(<Input name="ownr_title" />)}
+          <Form.Item label={t("owners.fields.ownr_title")} name="ownr_title">
+            <Input />
           </Form.Item>
         </Col>
       </Row>

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

@@ -5,42 +5,34 @@ import { useTranslation } from "react-i18next";
 import { UPDATE_OWNER } from "../../graphql/owners.queries";
 import OwnerDetailFormComponent from "./owner-detail-form.component";
 
-function OwnerDetailFormContainer({ form, owner, refetch }) {
+function OwnerDetailFormContainer({ owner, refetch }) {
   const { t } = useTranslation();
+  const [form] = Form.useForm();
 
   const [updateOwner] = useMutation(UPDATE_OWNER);
 
-  const handleSubmit = e => {
-    e.preventDefault();
-
-    form.validateFieldsAndScroll((err, values) => {
-      if (err) {
-        notification["error"]({
-          message: t("owners.errors.validationtitle"),
-          description: t("owners.errors.validation")
-        });
-      }
-      if (!err) {
-        updateOwner({
-          variables: { ownerId: owner.id, owner: values }
-        }).then(r => {
-          notification["success"]({
-            message: t("owners.successes.save")
-          });
-          //TODO Better way to reset the field decorators?
-          if (refetch) refetch().then();
-          form.resetFields();
-        });
-      }
+  const handleFinish = values => {
+    updateOwner({
+      variables: { ownerId: owner.id, owner: values }
+    }).then(r => {
+      notification["success"]({
+        message: t("owners.successes.save")
+      });
+      //TODO Better way to reset the field decorators?
+      if (refetch) refetch().then();
+      // resetFields();
     });
   };
 
   return (
-    <Form onSubmit={handleSubmit} autoComplete="off">
-      <OwnerDetailFormComponent form={form} owner={owner} />
+    <Form
+      form={form}
+      onFinish={handleFinish}
+      autoComplete="off"
+      initialValues={owner}
+    >
+      <OwnerDetailFormComponent form={form} />
     </Form>
   );
 }
-export default Form.create({ name: "OwnerDetailFormContainer" })(
-  OwnerDetailFormContainer
-);
+export default OwnerDetailFormContainer;

client/src/components/profile-my/profile-my.component.jsx

@@ -16,61 +16,60 @@ const mapDispatchToProps = dispatch => ({
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(
-  Form.create({ name: "ProfileMyComponentForm" })(function ProfileMyComponent({
-    currentUser,
-    form,
-    updateUserDetails
-  }) {
-    const { isFieldsTouched, resetFields, getFieldDecorator } = form;
-    const { t } = useTranslation();
+)(function ProfileMyComponent({
+  currentUser,
 
-    const handleSubmit = e => {
-      e.preventDefault();
+  updateUserDetails
+}) {
+  const [form] = Form.useForm();
+  const { isFieldsTouched, resetFields } = form;
+  const { t } = useTranslation();
 
-      form.validateFieldsAndScroll((err, values) => {
-        if (err) {
-          notification["error"]({
-            message: t("jobs.errors.validationtitle"),
-            description: t("jobs.errors.validation")
-          });
-        }
-        if (!err) {
-          console.log("values", values);
-          updateUserDetails({
-            displayName: values.displayname,
-            photoURL: values.photoURL
-          });
-        }
-      });
-    };
+  const handleSubmit = e => {
+    e.preventDefault();
 
-    return (
-      <div>
-        {isFieldsTouched() ? <ResetForm resetFields={resetFields} /> : null}
+    form.validateFieldsAndScroll((err, values) => {
+      if (err) {
+        notification["error"]({
+          message: t("jobs.errors.validationtitle"),
+          description: t("jobs.errors.validation")
+        });
+      }
+      if (!err) {
+        console.log("values", values);
+        updateUserDetails({
+          displayName: values.displayname,
+          photoURL: values.photoURL
+        });
+      }
+    });
+  };
 
-        <Form onSubmit={handleSubmit} autoComplete={"no"}>
-          <Form.Item label={t("user.fields.displayname")}>
-            {getFieldDecorator("displayname", {
-              initialValue: currentUser.displayName,
-              rules: [{ required: true }]
-            })(<Input name='displayname' />)}
-          </Form.Item>
-          <Form.Item label={t("user.fields.photourl")}>
-            {getFieldDecorator("photoURL", {
-              initialValue: currentUser.photoURL
-            })(<Input name='photoURL' />)}
-          </Form.Item>
+  return (
+    <div>
+      {isFieldsTouched() ? <ResetForm resetFields={resetFields} /> : null}
 
-          <Button
-            type='primary'
-            key='submit'
-            htmlType='submit'
-            onClick={handleSubmit}>
-            {t("user.actions.updateprofile")}
-          </Button>
-        </Form>
-      </div>
-    );
-  })
-);
+      <Form onSubmit={handleSubmit} autoComplete={"no"}>
+        <Form.Item
+          label={t("user.fields.displayname")}
+          rules={[{ required: true }]}
+          name="displayname"
+        >
+          <Input />)
+        </Form.Item>
+        <Form.Item label={t("user.fields.photourl")} name="photoURL">
+          <Input />
+        </Form.Item>
+
+        <Button
+          type="primary"
+          key="submit"
+          htmlType="submit"
+          onClick={handleSubmit}
+        >
+          {t("user.actions.updateprofile")}
+        </Button>
+      </Form>
+    </div>
+  );
+});

client/src/components/shop-employees/shop-employees-form.component.jsx

@@ -6,106 +6,125 @@ import { useTranslation } from "react-i18next";
 export default function ShopEmployeesFormComponent({
   form,
   selectedEmployee,
-  handleSubmit
+  handleFinish
 }) {
   const { t } = useTranslation();
-  const { getFieldDecorator } = form;
+
   if (!selectedEmployee) return "//TODO No employee selected.";
+
   return (
-    <Form onSubmit={handleSubmit} autoComplete={"off"}>
+    <Form
+      onFinish={handleFinish}
+      autoComplete={"off"}
+      form={form}
+      initialValues={{
+        ...selectedEmployee,
+        hire_date: selectedEmployee.hire_date
+          ? moment(selectedEmployee.hire_date)
+          : null,
+        termination_date: selectedEmployee.termination_date
+          ? moment(selectedEmployee.termination_date)
+          : null
+      }}
+    >
       <Button type="primary" htmlType="submit">
         {t("general.actions.save")}
       </Button>
 
-      <Form.Item label={t("employees.fields.first_name")}>
-        {getFieldDecorator("first_name", {
-          initialValue: selectedEmployee.first_name,
-          rules: [
-            {
-              required: true,
-              message: t("general.validation.required")
-            }
-          ]
-        })(<Input name="first_name" />)}
+      <Form.Item
+        name="first_name"
+        label={t("employees.fields.first_name")}
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required")
+          }
+        ]}
+      >
+        <Input />
       </Form.Item>
-      <Form.Item label={t("employees.fields.last_name")}>
-        {getFieldDecorator("last_name", {
-          initialValue: selectedEmployee.last_name,
-          rules: [
-            {
-              required: true,
-              message: t("general.validation.required")
-            }
-          ]
-        })(<Input name="last_name" />)}
+      <Form.Item
+        label={t("employees.fields.last_name")}
+        name="last_name"
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required")
+          }
+        ]}
+      >
+        <Input />
       </Form.Item>
-      <Form.Item label={t("employees.fields.employee_number")}>
-        {getFieldDecorator("employee_number", {
-          initialValue: selectedEmployee.employee_number,
-          rules: [
-            {
-              required: true,
-              message: t("general.validation.required")
-            }
-          ]
-        })(<Input name="employee_number" />)}
+      <Form.Item
+        name="employee_number"
+        label={t("employees.fields.employee_number")}
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required")
+          }
+        ]}
+      >
+        <Input />
       </Form.Item>
-      <Form.Item label={t("employees.fields.active")}>
-        {getFieldDecorator("active", {
-          initialValue: selectedEmployee.active,
-          valuePropName: "checked"
-        })(<Switch name="active" />)}
+      <Form.Item
+        label={t("employees.fields.active")}
+        valuePropName="checked"
+        name="active"
+      >
+        <Switch />
       </Form.Item>
-      <Form.Item label={t("employees.fields.flat_rate")}>
-        {getFieldDecorator("flat_rate", {
-          initialValue: selectedEmployee.flat_rate,
-          valuePropName: "checked"
-        })(<Switch name="active" />)}
+      <Form.Item
+        label={t("employees.fields.flat_rate")}
+        name="active"
+        valuePropName="checked"
+      >
+        <Switch />
       </Form.Item>
-      <Form.Item label={t("employees.fields.hire_date")}>
-        {getFieldDecorator("hire_date", {
-          initialValue: selectedEmployee.hire_date
-            ? moment(selectedEmployee.hire_date)
-            : null,
-          rules: [
-            {
-              required: true,
-              message: t("general.validation.required")
-            }
-          ]
-        })(<DatePicker name="hire_date" />)}
+      <Form.Item
+        name="hire_date"
+        label={t("employees.fields.hire_date")}
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required")
+          }
+        ]}
+      >
+        <DatePicker />
       </Form.Item>
-      <Form.Item label={t("employees.fields.termination_date")}>
-        {getFieldDecorator("termination_date", {
-          initialValue: selectedEmployee.termination_date
-            ? moment(selectedEmployee.termination_date)
-            : null
-        })(<DatePicker name="termination_date" />)}
+      <Form.Item
+        label={t("employees.fields.termination_date")}
+        name="termination_date"
+      >
+        <DatePicker />
       </Form.Item>
       {
         //TODO Make this a picklist.
       }
-      <Form.Item label={t("employees.fields.cost_center")}>
-        {getFieldDecorator("cost_center", {
-          initialValue: selectedEmployee.cost_center,
-          rules: [
-            {
-              required: true,
-              message: t("general.validation.required")
-            }
-          ]
-        })(<Input name="cost_center" />)}
+      <Form.Item
+        label={t("employees.fields.cost_center")}
+        name="cost_center"
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required")
+          }
+        ]}
+      >
+        <Input />
       </Form.Item>
-      <Form.Item label={t("employees.fields.base_rate")}>
-        {getFieldDecorator("base_rate", {
-          initialValue: selectedEmployee.base_rate,
-          rules: [
-            {
-              required: true,
-              message: t("general.validation.required")
-            }
-          ]
-        })(<InputNumber name="base_rate" />)}
+      <Form.Item
+        label={t("employees.fields.base_rate")}
+        name="base_rate"
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required")
+          }
+        ]}
+      >
+        <InputNumber />
       </Form.Item>
     </Form>
   );

client/src/components/shop-employees/shop-employees.container.jsx

@@ -4,17 +4,22 @@ import { useMutation, useQuery } from "react-apollo";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { DELETE_EMPLOYEE, INSERT_EMPLOYEES, QUERY_EMPLOYEES, UPDATE_EMPLOYEE } from "../../graphql/employees.queries";
+import {
+  DELETE_EMPLOYEE,
+  INSERT_EMPLOYEES,
+  QUERY_EMPLOYEES,
+  UPDATE_EMPLOYEE
+} from "../../graphql/employees.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";
 import ShopEmployeeComponent from "./shop-employees.component";
 
-
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
 
-function ShopEmployeesContainer({ form, bodyshop }) {
+function ShopEmployeesContainer({ bodyshop }) {
+  const [form] = Form.useForm();
   const { t } = useTranslation();
   const employeeState = useState(null);
   const { loading, error, data, refetch } = useQuery(QUERY_EMPLOYEES, {
@@ -41,63 +46,49 @@ function ShopEmployeesContainer({ form, bodyshop }) {
       });
   };
 
-  const handleSubmit = e => {
-    e.preventDefault();
-
-    form.validateFieldsAndScroll((err, values) => {
-      if (err) {
-        notification["error"]({
-          message: t("employees.errors.validationtitle"),
-          description: t("employees.errors.validation")
-        });
-      }
-      if (!err) {
-        if (employeeState[0].id) {
-          //Update a record.
-          updateEmployee({
-            variables: { id: employeeState[0].id, employee: values }
-          })
-            .then(r => {
-              notification["success"]({
-                message: t("employees.successes.save")
-              });
-              //TODO Better way to reset the field decorators?
-              employeeState[1](null);
-              refetch().then(r => form.resetFields());
-            })
-            .catch(error => {
-              notification["error"]({
-                message: t("employees.errors.save")
-              });
-            });
-        } else {
-          //New record, insert it.
-          insertEmployees({
-            variables: { employees: [{ ...values, shopid: bodyshop.id }] }
-          }).then(r => {
-            notification["success"]({
-              message: t("employees.successes.save")
-            });
-            //TODO Better way to reset the field decorators?
-            employeeState[1](null);
-            refetch()
-              .then(r => form.resetFields())
-              .catch(error => {
-                notification["error"]({
-                  message: t("employees.errors.save")
-                });
-              });
+  const handleFinish = values => {
+    if (employeeState[0].id) {
+      //Update a record.
+      updateEmployee({
+        variables: { id: employeeState[0].id, employee: values }
+      })
+        .then(r => {
+          notification["success"]({
+            message: t("employees.successes.save")
           });
-        }
-      }
-    });
+          //TODO Better way to reset the field decorators?
+          employeeState[1](null);
+          refetch().then(r => form.resetFields());
+        })
+        .catch(error => {
+          notification["error"]({
+            message: t("employees.errors.save")
+          });
+        });
+    } else {
+      //New record, insert it.
+      insertEmployees({
+        variables: { employees: [{ ...values, shopid: bodyshop.id }] }
+      }).then(r => {
+        notification["success"]({
+          message: t("employees.successes.save")
+        });
+        //TODO Better way to reset the field decorators?
+        employeeState[1](null);
+        refetch().catch(error => {
+          notification["error"]({
+            message: t("employees.errors.save")
+          });
+        });
+      });
+    }
   };
 
   if (error) return <AlertComponent message={error.message} type="error" />;
 
   return (
     <ShopEmployeeComponent
-      handleSubmit={handleSubmit}
+      handleFinish={handleFinish}
       handleDelete={handleDelete}
       form={form}
       loading={loading}
@@ -106,7 +97,4 @@ function ShopEmployeesContainer({ form, bodyshop }) {
     />
   );
 }
-export default connect(
-  mapStateToProps,
-  null
-)(Form.create({ name: "ShopEmployeesContainer" })(ShopEmployeesContainer));
+export default connect(mapStateToProps, null)(ShopEmployeesContainer);

client/src/components/sign-in-form/sign-in-form.component.jsx

@@ -26,89 +26,74 @@ const mapDispatchToProps = dispatch => ({
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(
-  Form.create({ name: "sign_in" })(function SignInComponent({
-    form,
-    emailSignInStart,
-    currentUser,
-    signInError
-  }) {
-    const apolloClient = useApolloClient();
+)(function SignInComponent({ emailSignInStart, currentUser, signInError }) {
+  const apolloClient = useApolloClient();
 
-    const handleSubmit = e => {
-      e.preventDefault();
-      form.validateFields(async (err, values) => {
-        if (!err) {
-          const { email, password } = values;
-          emailSignInStart(email, password);
-          //Try to do the login using a saga here.
+  const handleFinish = values => {
+    console.log("Login");
+
+    const { email, password } = values;
+    emailSignInStart(email, password);
+    //Try to do the login using a saga here.
+  };
+
+  if (currentUser.authorized === true) {
+    apolloClient
+      .mutate({
+        mutation: UPSERT_USER,
+        variables: {
+          authEmail: currentUser.email,
+          authToken: currentUser.uid
         }
+      })
+      .then()
+      .catch(error => {
+        console.log("User login upsert error.", error);
       });
-    };
+  }
 
-    if (currentUser.authorized === true) {
-      apolloClient
-        .mutate({
-          mutation: UPSERT_USER,
-          variables: {
-            authEmail: currentUser.email,
-            authToken: currentUser.uid
-          }
-        })
-        .then()
-        .catch(error => {
-          console.log("User login upsert error.", error);
-        });
-    }
+  return (
+    <div>
+      {currentUser.authorized === true ? <Redirect to="/manage?" /> : null}
 
-    const { getFieldDecorator } = form;
-    return (
-      <div>
-        {currentUser.authorized === true ? <Redirect to="/manage?" /> : null}
+      <img src={Logo} height="100" width="100" alt="Bodyshop.app" />
 
-        <img src={Logo} height="100" width="100" alt="Bodyshop.app" />
+      <Form onFinish={handleFinish}>
+        <Form.Item
+          name="email"
+          label="E-mail"
+          rules={[
+            {
+              //TODO Ensure using translations.
+              type: "email",
+              message: "Please enter a valid email."
+            },
+            {
+              required: true,
+              message: "Please your email."
+            }
+          ]}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item
+          name="password"
+          rules={[{ required: true, message: "Please enter your password." }]}
+        >
+          <Input
+            prefix={<LockFilled style={{ color: "rgba(0,0,0,.25)" }} />}
+            type="password"
+            placeholder="Password"
+          />
+        </Form.Item>
 
-        <Form onSubmit={handleSubmit} className="login-form">
-          <Form.Item label="E-mail">
-            {getFieldDecorator("email", {
-              rules: [
-                {
-                  type: "email",
-                  message: "Please enter a valid email."
-                },
-                {
-                  required: true,
-                  message: "Please your email."
-                }
-              ]
-            })(<Input />)}
-          </Form.Item>
-          <Form.Item>
-            {getFieldDecorator("password", {
-              rules: [
-                { required: true, message: "Please enter your password." }
-              ]
-            })(
-              <Input
-                prefix={<LockFilled style={{ color: "rgba(0,0,0,.25)" }} />}
-                type="password"
-                placeholder="Password"
-              />
-            )}
-          </Form.Item>
-          <Form.Item>
-            <div className="login-form-forgot">Forgot password</div>
-            <Button
-              type="primary"
-              htmlType="submit"
-              className="login-form-button"
-            >
-              Log in
-            </Button>
-          </Form.Item>
-          {signInError ? <div>{signInError.message}</div> : null}
-        </Form>
-      </div>
-    );
-  })
-);
+        <div>Forgot password</div>
+        <Button type="primary" htmlType="submit">
+          Log in
+        </Button>
+
+        {signInError ? <div>{signInError.message}</div> : null}
+      </Form>
+    </div>
+  );
+});

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

@@ -1,4 +1,4 @@
-import { Button, DatePicker, Form, Input, Row, Col } from "antd";
+import { Button, Col, DatePicker, Form, Input, Row } from "antd";
 import moment from "moment";
 import React from "react";
 import { useTranslation } from "react-i18next";

client/src/components/vehicle-detail-form/vehicle-detail-form.container.jsx

@@ -5,42 +5,30 @@ import VehicleDetailFormComponent from "./vehicle-detail-form.component";
 import { useTranslation } from "react-i18next";
 import { UPDATE_VEHICLE } from "../../graphql/vehicles.queries";
 
-function VehicleDetailFormContainer({ form, vehicle, refetch }) {
+function VehicleDetailFormContainer({ vehicle, refetch }) {
   const { t } = useTranslation();
   const [updateVehicle] = useMutation(UPDATE_VEHICLE);
+  const [form] = Form.useForm();
+  const { resetFields } = form;
 
-  const handleSubmit = e => {
-    e.preventDefault();
-
-    form.validateFieldsAndScroll((err, values) => {
-      if (err) {
-        notification["error"]({
-          message: t("vehicles.errors.validationtitle"),
-          description: t("vehicles.errors.validation")
-        });
-      }
-      if (!err) {
-        updateVehicle({
-          variables: { vehId: vehicle.id, vehicle: values }
-        }).then(r => {
-          notification["success"]({
-            message: t("vehicles.successes.save")
-          });
-          //TODO Better way to reset the field decorators?
-          if (refetch) refetch().then();
-          form.resetFields();
-        });
-      }
+  const handleFinish = values => {
+    updateVehicle({
+      variables: { vehId: vehicle.id, vehicle: values }
+    }).then(r => {
+      notification["success"]({
+        message: t("vehicles.successes.save")
+      });
+      //TODO Better way to reset the field decorators?
+      if (refetch) refetch().then();
+      resetFields();
     });
   };
 
   return (
-    <Form onSubmit={handleSubmit} autoComplete="off">
-      <VehicleDetailFormComponent form={form} vehicle={vehicle} />
+    <Form onFinish={handleFinish} form={Form} autoComplete="off">
+      <VehicleDetailFormComponent vehicle={vehicle} form={form} />
     </Form>
   );
 }
 
-export default Form.create({ name: "VehicleDetailFormContainer" })(
-  VehicleDetailFormContainer
-);
+export default VehicleDetailFormContainer;

client/src/components/vendors-form/vendors-form.container.jsx

@@ -19,7 +19,8 @@ const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
 
-function VendorsFormContainer({ form, vendorId, refetch, bodyshop }) {
+function VendorsFormContainer({ vendorId, refetch, bodyshop }) {
+  const [form] = Form.useForm();
   const { t } = useTranslation();
   const { loading, error, data } = useQuery(QUERY_VENDOR_BY_ID, {
     variables: { id: vendorId },
@@ -45,61 +46,49 @@ function VendorsFormContainer({ form, vendorId, refetch, bodyshop }) {
       });
   };
 
-  const handleSubmit = e => {
-    e.preventDefault();
-    form.validateFieldsAndScroll((err, values) => {
-      if (err) {
-        notification["error"]({
-          message: t("jobs.errors.validationtitle"),
-          description: t("jobs.errors.validation")
+  const handleFinish = values => {
+    delete values.keys;
+    if (vendorId) {
+      //It's a vendor to update.
+      updateVendor({
+        variables: { id: vendorId, vendor: values }
+      })
+        .then(r => {
+          notification["success"]({
+            message: t("vendors.successes.saved")
+          });
+          //TODO Better way to reset the field decorators?
+          if (refetch) refetch().then(r => form.resetFields());
+        })
+        .catch(error => {
+          notification["error"]({
+            message: t("vendors.errors.saving")
+          });
         });
-      }
-      if (!err) {
-        console.log("Received values of form: ", values);
-        delete values.keys;
-        if (vendorId) {
-          //It's a vendor to update.
-          updateVendor({
-            variables: { id: vendorId, vendor: values }
-          })
-            .then(r => {
-              notification["success"]({
-                message: t("vendors.successes.saved")
-              });
-              //TODO Better way to reset the field decorators?
-              if (refetch) refetch().then(r => form.resetFields());
-            })
-            .catch(error => {
-              notification["error"]({
-                message: t("vendors.errors.saving")
-              });
-            });
-        } else {
-          //It's a new vendor to insert.
-          insertvendor({
-            variables: { vendorInput: [{ ...values, bodyshopid: bodyshop.id }] }
-          })
-            .then(r => {
-              notification["success"]({
-                message: t("vendors.successes.saved")
-              });
-              //TODO Better way to reset the field decorators?
-              if (refetch) refetch().then(r => form.resetFields());
-            })
-            .catch(error => {
-              notification["error"]({
-                message: t("vendors.errors.saving")
-              });
-            });
-        }
-      }
-    });
+    } else {
+      //It's a new vendor to insert.
+      insertvendor({
+        variables: { vendorInput: [{ ...values, bodyshopid: bodyshop.id }] }
+      })
+        .then(r => {
+          notification["success"]({
+            message: t("vendors.successes.saved")
+          });
+          //TODO Better way to reset the field decorators?
+          if (refetch) refetch().then(r => form.resetFields());
+        })
+        .catch(error => {
+          notification["error"]({
+            message: t("vendors.errors.saving")
+          });
+        });
+    }
   };
 
   if (loading) return <LoadingSpinner />;
   if (error) return <AlertComponent message={error.message} type="error" />;
   return (
-    <Form onSubmit={handleSubmit} autoComplete="new-password">
+    <Form onFinish={handleFinish} form={form} autoComplete="new-password">
       {data ? (
         <VendorsFormComponent
           form={form}
@@ -112,7 +101,4 @@ function VendorsFormContainer({ form, vendorId, refetch, bodyshop }) {
     </Form>
   );
 }
-export default connect(
-  mapStateToProps,
-  null
-)(Form.create({ name: "VendorsFormContainer" })(VendorsFormContainer));
+export default connect(mapStateToProps, null)(VendorsFormContainer);

client/src/graphql/jobs.queries.js

@@ -94,6 +94,7 @@ export const SUBSCRIPTION_JOBS_IN_PRODUCTION = gql`
 export const GET_JOB_BY_PK = gql`
   query GET_JOB_BY_PK($id: uuid!) {
     jobs_by_pk(id: $id) {
+      updated_at
       service_car
       csr
       loss_desc

client/src/pages/jobs-detail/jobs-detail.page.component.jsx

@@ -1,21 +1,9 @@
-import { Form, Tabs } from "antd";
-import {
-  BarsOutlined,
-  DollarCircleOutlined,
-  ToolFilled,
-  CalendarFilled,
-  FileImageFilled
-} from "@ant-design/icons";
-import Icon from "@ant-design/icons";
-import React, { lazy, Suspense, useContext } from "react";
+import Icon, { BarsOutlined, CalendarFilled, DollarCircleOutlined, FileImageFilled, ToolFilled } from "@ant-design/icons";
+import { Form, notification, Tabs } from "antd";
+import moment from "moment";
+import React, { lazy, Suspense } from "react";
 import { useTranslation } from "react-i18next";
-import {
-  FaHardHat,
-  FaInfo,
-  FaRegStickyNote,
-  FaShieldAlt
-} from "react-icons/fa";
-import ResetForm from "../../components/form-items-formatted/reset-form-item.component";
+import { FaHardHat, FaInfo, FaRegStickyNote, FaShieldAlt } from "react-icons/fa";
 //import JobsLinesContainer from "../../components/job-detail-lines/job-lines.container";
 //import JobsDetailClaims from "../../components/jobs-detail-claims/jobs-detail-claims.component";
 //import JobsDetailDatesComponent from "../../components/jobs-detail-dates/jobs-detail-dates.component";
@@ -28,8 +16,6 @@ import ResetForm from "../../components/form-items-formatted/reset-form-item.com
 //import JobLineUpsertModalContainer from "../../components/job-lines-upsert-modal/job-lines-upsert-modal.container";
 //import EnterInvoiceModalContainer from "../../components/invoice-enter-modal/invoice-enter-modal.container";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
-import JobDetailFormContext from "./jobs-detail.page.context";
-import JobsDetailPliContainer from "../../components/jobs-detail-pli/jobs-detail-pli.container";
 
 const JobsLinesContainer = lazy(() =>
   import("../../components/job-detail-lines/job-lines.container")
@@ -70,6 +56,9 @@ const JobLineUpsertModalContainer = lazy(() =>
 const EnterInvoiceModalContainer = lazy(() =>
   import("../../components/invoice-enter-modal/invoice-enter-modal.container")
 );
+const JobsDetailPliContainer = lazy(() =>
+  import("../../components/jobs-detail-pli/jobs-detail-pli.container")
+);
 
 export default function JobsDetailPage({
   job,
@@ -81,8 +70,7 @@ export default function JobsDetailPage({
   updateJobStatus
 }) {
   const { t } = useTranslation();
-
-  const { isFieldsTouched, resetFields } = useContext(JobDetailFormContext);
+  const [form] = Form.useForm();
 
   const formItemLayout = {
     labelCol: {
@@ -95,6 +83,17 @@ export default function JobsDetailPage({
     }
   };
 
+  const handleFinish = values => {
+    mutationUpdateJob({
+      variables: { jobId: job.id, job: values }
+    }).then(r => {
+      notification["success"]({
+        message: t("jobs.successes.savetitle")
+      });
+      refetch().then(r => form.resetFields());
+    });
+  };
+
   return (
     <Suspense
       fallback={<LoadingSpinner message={t("general.labels.loadingapp")} />}
@@ -108,7 +107,45 @@ export default function JobsDetailPage({
       <JobLineUpsertModalContainer />
       <EnterInvoiceModalContainer />
 
-      <Form onSubmit={handleSubmit} {...formItemLayout} autoComplete={"off"}>
+      <Form
+        form={form}
+        onFieldsChange={(a, b) => console.log("a,b", a, b)}
+        name="JobDetailForm"
+        onFinish={handleFinish}
+        {...formItemLayout}
+        autoComplete={"off"}
+        initialValues={{
+          ...job,
+          loss_date: job.loss_date ? moment(job.loss_date) : null,
+          date_estimated: job.date_estimated
+            ? moment(job.date_estimated)
+            : null,
+          date_open: job.date_open ? moment(job.date_open) : null,
+          date_scheduled: job.date_scheduled
+            ? moment(job.date_scheduled)
+            : null,
+          scheduled_in: job.scheduled_in ? moment(job.scheduled_in) : null,
+          actual_in: job.actual_in ? moment(job.actual_in) : null,
+          scheduled_completion: job.scheduled_completion
+            ? moment(job.scheduled_completion)
+            : null,
+          actual_completion: job.actual_completion
+            ? moment(job.actual_completion)
+            : null,
+          scheduled_delivery: job.scheduled_delivery
+            ? moment(job.scheduled_delivery)
+            : null,
+          actual_delivery: job.actual_delivery
+            ? moment(job.actual_delivery)
+            : null,
+          date_invoiced: job.date_invoiced ? moment(job.date_invoiced) : null,
+          date_closed: job.date_closed ? moment(job.date_closed) : null,
+          date_exported: job.date_exported ? moment(job.date_exported) : null
+        }}
+      >
+        <Form.Item name="updated_at">
+          <input />
+        </Form.Item>
         <JobsDetailHeader
           job={job}
           mutationConvertJob={mutationConvertJob}
@@ -117,9 +154,6 @@ export default function JobsDetailPage({
           scheduleModalState={scheduleModalState}
           updateJobStatus={updateJobStatus}
         />
-
-        {isFieldsTouched() ? <ResetForm resetFields={resetFields} /> : null}
-
         <Tabs defaultActiveKey="claimdetail">
           <Tabs.TabPane
             tab={
@@ -132,7 +166,6 @@ export default function JobsDetailPage({
           >
             <JobsDetailClaims job={job} />
           </Tabs.TabPane>
-
           <Tabs.TabPane
             tab={
               <span>
@@ -142,9 +175,8 @@ export default function JobsDetailPage({
             }
             key="insurance"
           >
-            <JobsDetailInsurance job={job} />
+            <JobsDetailInsurance job={job} form={form} />
           </Tabs.TabPane>
-
           <Tabs.TabPane
             tab={
               <span>
@@ -156,7 +188,6 @@ export default function JobsDetailPage({
           >
             <JobsLinesContainer jobId={job.id} />
           </Tabs.TabPane>
-
           <Tabs.TabPane
             tab={
               <span>
@@ -168,7 +199,6 @@ export default function JobsDetailPage({
           >
             <JobsDetailFinancials job={job} />
           </Tabs.TabPane>
-
           <Tabs.TabPane
             tab={
               <span>
@@ -180,7 +210,6 @@ export default function JobsDetailPage({
           >
             <JobsDetailPliContainer job={job} />
           </Tabs.TabPane>
-
           <Tabs.TabPane
             tab={
               <span>
@@ -192,7 +221,6 @@ export default function JobsDetailPage({
           >
             Labor
           </Tabs.TabPane>
-
           <Tabs.TabPane
             tab={
               <span>
@@ -204,7 +232,6 @@ export default function JobsDetailPage({
           >
             <JobsDetailDatesComponent job={job} />}
           </Tabs.TabPane>
-
           <Tabs.TabPane
             tab={
               <span>

client/src/pages/jobs-detail/jobs-detail.page.container.jsx

@@ -1,4 +1,4 @@
-import { Form, notification } from "antd";
+import { notification } from "antd";
 import React, { useEffect, useState } from "react";
 import { useMutation, useQuery } from "react-apollo";
 import { useTranslation } from "react-i18next";
@@ -11,9 +11,8 @@ import {
   UPDATE_JOB_STATUS
 } from "../../graphql/jobs.queries";
 import JobsDetailPage from "./jobs-detail.page.component";
-import JobDetailFormContext from "./jobs-detail.page.context";
 
-function JobsDetailPageContainer({ match, form }) {
+function JobsDetailPageContainer({ match }) {
   const { jobId } = match.params;
   const { t } = useTranslation();
 
@@ -52,49 +51,20 @@ function JobsDetailPageContainer({ match, form }) {
         });
   }, [loading, data, t, error]);
 
-  const handleSubmit = e => {
-    e.preventDefault();
-
-    form.validateFieldsAndScroll((err, values) => {
-      if (err) {
-        notification["error"]({
-          message: t("jobs.errors.validationtitle"),
-          description: t("jobs.errors.validation")
-        });
-      }
-      if (!err) {
-        mutationUpdateJob({
-          variables: { jobId: data.jobs_by_pk.id, job: values }
-        }).then(r => {
-          notification["success"]({
-            message: t("jobs.successes.savetitle")
-          });
-          refetch().then(r => form.resetFields());
-        });
-      }
-    });
-  };
-
   if (loading) return <SpinComponent />;
-  if (error) return <AlertComponent message={error.message} type='error' />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
 
   return data.jobs_by_pk ? (
-    <JobDetailFormContext.Provider value={form}>
-      <JobsDetailPage
-        job={data.jobs_by_pk}
-        mutationUpdateJob={mutationUpdateJob}
-        mutationConvertJob={mutationConvertJob}
-        handleSubmit={handleSubmit}
-        getFieldDecorator={form.getFieldDecorator}
-        refetch={refetch}
-        scheduleModalState={scheduleModalState}
-        updateJobStatus={updateJobStatus}
-      />
-    </JobDetailFormContext.Provider>
+    <JobsDetailPage
+      job={data.jobs_by_pk}
+      mutationConvertJob={mutationConvertJob}
+      mutationUpdateJob={mutationUpdateJob}
+      refetch={refetch}
+      scheduleModalState={scheduleModalState}
+      updateJobStatus={updateJobStatus}
+    />
   ) : (
-    <AlertComponent message={t("jobs.errors.noaccess")} type='error' />
+    <AlertComponent message={t("jobs.errors.noaccess")} type="error" />
   );
 }
-export default Form.create({ name: "JobsDetailPageContainer" })(
-  JobsDetailPageContainer
-);
+export default JobsDetailPageContainer;