Added barcode scanning to populate contract form BOD-88

client/src/pages/contract-create/contract-create.page.component.jsx

@@ -1,13 +1,14 @@
-import React from "react";
-import ContractFormComponent from "../../components/contract-form/contract-form.component";
 import { Button } from "antd";
+import React from "react";
 import { useTranslation } from "react-i18next";
-import ContractJobsContainer from "../../components/contract-jobs/contract-jobs.container";
 import ContractCarsContainer from "../../components/contract-cars/contract-cars.container";
-
+import ContractFormComponent from "../../components/contract-form/contract-form.component";
+import ContractJobsContainer from "../../components/contract-jobs/contract-jobs.container";
+import ContractLicenseDecodeButton from "../../components/contract-license-decode-button/contract-license-decode-button.component";
 export default function ContractCreatePageComponent({
+  form,
   selectedJobState,
-  selectedCarState
+  selectedCarState,
 }) {
   const { t } = useTranslation();
   return (
@@ -15,7 +16,8 @@ export default function ContractCreatePageComponent({
       <Button htmlType="submit">{t("general.actions.create")}</Button>
       <ContractJobsContainer selectedJobState={selectedJobState} />
       <ContractCarsContainer selectedCarState={selectedCarState} />
-      <ContractFormComponent />
+      <ContractLicenseDecodeButton form={form} />
+      <ContractFormComponent form={form} />
     </div>
   );
 }

client/src/pages/contract-create/contract-create.page.container.jsx

@@ -29,8 +29,6 @@ export function ContractCreatePageContainer({ bodyshop, setBreadcrumbs }) {
   );
   const [insertContract] = useMutation(INSERT_NEW_CONTRACT);
 
-  console.log("test");
-
   const handleFinish = (values) => {
     if (!!selectedCarState[0] && !!selectedJobState[0]) {
       insertContract({
@@ -81,8 +79,14 @@ export function ContractCreatePageContainer({ bodyshop, setBreadcrumbs }) {
   }, [t, setBreadcrumbs]);
 
   return (
-    <Form form={form} autoComplete="no" onFinish={handleFinish}>
+    <Form
+      form={form}
+      layout="vertical"
+      autoComplete="no"
+      onFinish={handleFinish}
+    >
       <ContractCreatePageComponent
+        form={form}
         selectedJobState={selectedJobState}
         selectedCarState={selectedCarState}
       />

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

@@ -7,9 +7,9 @@ import ContractFormComponent from "../../components/contract-form/contract-form.
 import ContractJobBlock from "../../components/contract-job-block/contract-job-block.component";
 import { setModalContext } from "../../redux/modals/modals.actions";
 
-const mapDispatchToProps = dispatch => ({
-  setCourtesyCarReturnModalContext: context =>
-    dispatch(setModalContext({ context: context, modal: "courtesyCarReturn" }))
+const mapDispatchToProps = (dispatch) => ({
+  setCourtesyCarReturnModalContext: (context) =>
+    dispatch(setModalContext({ context: context, modal: "courtesyCarReturn" })),
 });
 
 export function ContractDetailPage({
@@ -17,27 +17,30 @@ export function ContractDetailPage({
   job,
   courtesyCar,
   setCourtesyCarReturnModalContext,
-  refetch
+  refetch,
 }) {
   const { t } = useTranslation();
   return (
     <div>
       <Row align="middle">
-        <Typography.Title>{`Agreement ${(contract &&
-          contract.agreementnumber) ||
-          ""} - ${t((contract && contract.status) || "")}`}</Typography.Title>
+        <Typography.Title>{`Agreement ${
+          (contract && contract.agreementnumber) || ""
+        } - ${t((contract && contract.status) || "")}`}</Typography.Title>
         <Button type="primary" htmlType="submit">
           {t("general.actions.save")}
         </Button>
         <Button
-          disabled={contract && contract.status !== "contracts.status.out"}
+          disabled={
+            !!!contract ||
+            (contract && contract.status !== "contracts.status.out")
+          }
           onClick={() => {
             setCourtesyCarReturnModalContext({
               actions: { refetch },
               context: {
                 contractId: contract.id,
-                courtesyCarId: courtesyCar.id
-              }
+                courtesyCarId: courtesyCar.id,
+              },
             });
           }}
         >

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

@@ -65,7 +65,7 @@ export function ContractDetailPageContainer({ setBreadcrumbs, addRecentItem }) {
           `/manage/courtesycars/contracts/${contractId}`
         )
       );
-  }, [t, data, error, loading, setBreadcrumbs, addRecentItem]);
+  }, [t, data, error, loading, setBreadcrumbs, addRecentItem, contractId]);
 
   const handleFinish = (values) => {
     updateContract({
@@ -92,6 +92,7 @@ export function ContractDetailPageContainer({ setBreadcrumbs, addRecentItem }) {
       <Form
         form={form}
         autoComplete="no"
+        layout='vertical'
         onFinish={handleFinish}
         initialValues={
           data

client/src/pages/courtesy-car-detail/courtesy-car-detail.page.container.jsx

@@ -60,7 +60,7 @@ export function CourtesyCarDetailPageContainer({
           `/manage/courtesycars/${ccId}`
         )
       );
-  }, [t, data, error, loading, setBreadcrumbs, addRecentItem]);
+  }, [t, data, error, loading, setBreadcrumbs, ccId, addRecentItem]);
 
   const handleFinish = (values) => {
     insertCourtesyCar({