CC Conversion Corrections IO-463

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

@@ -1,12 +1,12 @@
-import { Button, Typography, Row, Col } from "antd";
+import { Button, Col, Row, Space, Typography, Form } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
+import ContractConvertToRo from "../../components/contract-convert-to-ro/contract-convert-to-ro.component";
 import ContractCourtesyCarBlock from "../../components/contract-courtesy-car-block/contract-courtesy-car-block.component";
 import ContractFormComponent from "../../components/contract-form/contract-form.component";
 import ContractJobBlock from "../../components/contract-job-block/contract-job-block.component";
 import { setModalContext } from "../../redux/modals/modals.actions";
-import ContractConvertToRo from "../../components/contract-convert-to-ro/contract-convert-to-ro.component";
 
 const mapDispatchToProps = (dispatch) => ({
   setCourtesyCarReturnModalContext: (context) =>
@@ -20,6 +20,7 @@ export function ContractDetailPage({
   setCourtesyCarReturnModalContext,
   refetch,
   form,
+  saveLoading,
 }) {
   const { t } = useTranslation();
   return (
@@ -28,27 +29,6 @@ export function ContractDetailPage({
         <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 && contract.status !== "contracts.status.out")
-          }
-          onClick={() => {
-            setCourtesyCarReturnModalContext({
-              actions: { refetch },
-              context: {
-                contractId: contract.id,
-                courtesyCarId: courtesyCar.id,
-              },
-            });
-          }}
-        >
-          {t("courtesycars.actions.return")}
-        </Button>
-        <ContractConvertToRo contract={contract} />
       </Row>
 
       <Row>
@@ -57,6 +37,43 @@ export function ContractDetailPage({
           <ContractCourtesyCarBlock courtesyCar={courtesyCar} />
         </Col>
         <Col span={18} offset={1}>
+          <Form.Item shouldUpdate>
+            {() => {
+              return (
+                <Space>
+                  <Button
+                    type="primary"
+                    htmlType="submit"
+                    loading={saveLoading}
+                  >
+                    {t("general.actions.save")}
+                  </Button>
+                  <Button
+                    disabled={
+                      !!!contract ||
+                      (contract && contract.status !== "contracts.status.out")
+                    }
+                    onClick={() => {
+                      setCourtesyCarReturnModalContext({
+                        actions: { refetch },
+                        context: {
+                          contractId: contract.id,
+                          courtesyCarId: courtesyCar.id,
+                        },
+                      });
+                    }}
+                  >
+                    {t("courtesycars.actions.return")}
+                  </Button>
+
+                  <ContractConvertToRo
+                    contract={contract}
+                    disabled={form.isFieldsTouched()}
+                  />
+                </Space>
+              );
+            }}
+          </Form.Item>
           <ContractFormComponent form={form} />
         </Col>
       </Row>