IO-743 CCC Automatic fill fixes.

client/src/components/contract-cars/contract-cars.container.jsx

@@ -1,9 +1,9 @@
 import { useQuery } from "@apollo/client";
+import moment from "moment";
 import React from "react";
 import { QUERY_AVAILABLE_CC } from "../../graphql/courtesy-car.queries";
 import AlertComponent from "../alert/alert.component";
 import ContractCarsComponent from "./contract-cars.component";
-import moment from "moment";
 
 export default function ContractCarsContainer({ selectedCarState, form }) {
   const { loading, error, data } = useQuery(QUERY_AVAILABLE_CC, {
@@ -14,6 +14,11 @@ export default function ContractCarsContainer({ selectedCarState, form }) {
 
   const handleSelect = (record) => {
     setSelectedCar(record.id);
+
+    console.log(
+      "🚀  ~ file: contract-cars.container.jsx  ~ line 19  ~ record",
+      record
+    );
     form.setFieldsValue({
       kmstart: record.mileage,
       dailyrate: record.dailycost,

client/src/components/contract-form/contract-form.component.jsx

@@ -1,6 +1,7 @@
 import { Form, Input, InputNumber } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
+import ContractLicenseDecodeButton from "../contract-license-decode-button/contract-license-decode-button.component";
 import ContractStatusSelector from "../contract-status-select/contract-status-select.component";
 import CourtesyCarFuelSlider from "../courtesy-car-fuel-select/courtesy-car-fuel-select.component";
 import FormDatePicker from "../form-date-picker/form-date-picker.component";
@@ -19,9 +20,7 @@ export default function ContractFormComponent({
   const { t } = useTranslation();
   return (
     <div>
-      <div className="imex-flex-row__grow imex-flex-row__margin-large">
+      <FormFieldsChanged form={form} />
-        <FormFieldsChanged form={form} />
-      </div>
       <LayoutFormRow>
         {create ? null : (
           <Form.Item
@@ -65,7 +64,6 @@ export default function ContractFormComponent({
           </Form.Item>
         )}
       </LayoutFormRow>
-
       <LayoutFormRow>
         <Form.Item
           label={t("contracts.fields.kmstart")}
@@ -112,6 +110,7 @@ export default function ContractFormComponent({
           />
         </div>
       )}
+      <ContractLicenseDecodeButton form={form} />
       <LayoutFormRow>
         <Form.Item
           label={t("contracts.fields.driver_dlnumber")}
@@ -221,7 +220,6 @@ export default function ContractFormComponent({
           <FormDatePicker />
         </Form.Item>
       </LayoutFormRow>
-
       <LayoutFormRow>
         <Form.Item label={t("contracts.fields.dailyrate")} name="dailyrate">
           <InputNumber precision={2} />

client/src/components/courtesy-car-fuel-select/courtesy-car-fuel-select.component.jsx

@@ -1,23 +1,16 @@
 import { Slider } from "antd";
-import React, { useEffect, useState, forwardRef } from "react";
+import React, { forwardRef } from "react";
 import { useTranslation } from "react-i18next";
 
-const CourtesyCarFuelComponent = ({ value = 100, onChange }, ref) => {
+const CourtesyCarFuelComponent = (props, ref) => {
-  const [option, setOption] = useState(value);
   const { t } = useTranslation();
 
-  useEffect(() => {
-    if (value !== option && onChange) {
-      onChange(option);
-    }
-  }, [value, option, onChange]);
-
   const marks = {
     0: {
       style: {
         color: "#f50",
       },
-      label: t("courtesycars.labels.fuel.empty"),
+      label: <strong>{t("courtesycars.labels.fuel.empty")}</strong>,
     },
     13: t("courtesycars.labels.fuel.18"),
     25: t("courtesycars.labels.fuel.14"),
@@ -34,14 +27,6 @@ const CourtesyCarFuelComponent = ({ value = 100, onChange }, ref) => {
     },
   };
 
-  return (
+  return <Slider ref={ref} marks={marks} step={null} {...props} />;
-    <Slider
-      ref={ref}
-      marks={marks}
-      defaultValue={value}
-      onChange={setOption}
-      step={null}
-    />
-  );
 };
 export default forwardRef(CourtesyCarFuelComponent);

client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx

@@ -13,7 +13,10 @@ export default function FormsFieldChanged({ form }) {
   const loc = useLocation();
 
   return (
-    <Form.Item shouldUpdate style={{ margin: 0, padding: 0 }}>
+    <Form.Item
+      shouldUpdate
+      //style={{ margin: 0, padding: 0 }}
+    >
       {() => {
         if (form.isFieldsTouched())
           return (

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

@@ -4,7 +4,6 @@ import { useTranslation } from "react-i18next";
 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,
@@ -14,7 +13,12 @@ export default function ContractCreatePageComponent({
   const { t } = useTranslation();
 
   const CreateButton = (
-    <Button type="primary" onClick={() => form.submit()} loading={loading}>
+    <Button
+      disabled={!selectedJobState[0] || !selectedCarState[0]}
+      type="primary"
+      onClick={() => form.submit()}
+      loading={loading}
+    >
       {t("general.actions.create")}
     </Button>
   );
@@ -24,12 +28,18 @@ export default function ContractCreatePageComponent({
       {CreateButton}
       <ContractJobsContainer selectedJobState={selectedJobState} />
       <ContractCarsContainer selectedCarState={selectedCarState} form={form} />
-      <ContractLicenseDecodeButton form={form} />
+
-      <ContractFormComponent
+      <div
-        create
+        style={{
-        form={form}
+          display: selectedJobState[0] && selectedCarState[0] ? "" : "none",
-        selectedJobState={selectedJobState}
+        }}
-      />
+      >
+        <ContractFormComponent
+          create
+          form={form}
+          selectedJobState={selectedJobState}
+        />
+      </div>
       {CreateButton}
     </div>
   );

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

@@ -100,7 +100,6 @@ export function ContractCreatePageContainer({
         layout="vertical"
         autoComplete="no"
         onFinish={handleFinish}
-        initialValues={{ fuelout: 100 }}
       >
         <ContractCreatePageComponent
           loading={loading}