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} />
-      </div>
+      <FormFieldsChanged form={form} />
       <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 [option, setOption] = useState(value);
+const CourtesyCarFuelComponent = (props, ref) => {
   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 (
-    <Slider
-      ref={ref}
-      marks={marks}
-      defaultValue={value}
-      onChange={setOption}
-      step={null}
-    />
-  );
+  return <Slider ref={ref} marks={marks} step={null} {...props} />;
 };
 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 (