BOD-17 Added return car modal.

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

@@ -1,20 +1,50 @@
+import { Button, Typography } from "antd";
 import React from "react";
-import ContractFormComponent from "../../components/contract-form/contract-form.component";
 import { useTranslation } from "react-i18next";
-import { Button } from "antd";
-import ContractJobBlock from "../../components/contract-job-block/contract-job-block.component";
+import { connect } from "react-redux";
 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";
 
-export default function ContractDetailPage({ job, courtesyCar }) {
+const mapDispatchToProps = dispatch => ({
+  setCourtesyCarReturnModalContext: context =>
+    dispatch(setModalContext({ context: context, modal: "courtesyCarReturn" }))
+});
+
+export function ContractDetailPage({
+  contract,
+  job,
+  courtesyCar,
+  setCourtesyCarReturnModalContext,
+  refetch
+}) {
   const { t } = useTranslation();
   return (
     <div>
+      <Typography.Title>{`Agreement ${(contract && contract.agreementnumber) ||
+        ""}`}</Typography.Title>
       <Button type="primary" htmlType="submit">
         {t("general.actions.save")}
       </Button>
+      <Button
+        disabled={contract && contract.status !== "contracts.status.out"}
+        onClick={() => {
+          setCourtesyCarReturnModalContext({
+            actions: { refetch },
+            context: {
+              contractId: contract.id,
+              courtesyCarId: courtesyCar.id
+            }
+          });
+        }}
+      >
+        {t("courtesycars.actions.return")}
+      </Button>
       <ContractJobBlock job={job} />
       <ContractCourtesyCarBlock courtesyCar={courtesyCar} />
       <ContractFormComponent />
     </div>
   );
 }
+export default connect(null, mapDispatchToProps)(ContractDetailPage);

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

@@ -10,6 +10,7 @@ import {
   UPDATE_CONTRACT
 } from "../../graphql/cccontracts.queries";
 import ContractDetailPageComponent from "./contract-detail.page.component";
+import CourtesyCarReturnModalContainer from "../../components/courtesy-car-return-modal/courtesy-car-return-modal.container";
 
 export default function ContractDetailPageContainer() {
   const { t } = useTranslation();
@@ -17,7 +18,7 @@ export default function ContractDetailPageContainer() {
   const [form] = Form.useForm();
   const { contractId } = useParams();
 
-  const { loading, error, data } = useQuery(QUERY_CONTRACT_BY_PK, {
+  const { loading, error, data, refetch } = useQuery(QUERY_CONTRACT_BY_PK, {
     variables: { id: contractId }
   });
 
@@ -27,7 +28,7 @@ export default function ContractDetailPageContainer() {
       : error
       ? t("titles.app")
       : t("titles.contracts-detail", {
-          id: (data && data.cccontracts_by_pk.id) || ""
+          id: (data && data.cccontracts_by_pk.agreementnumber) || ""
         });
   }, [t, data, error, loading]);
 
@@ -51,37 +52,42 @@ export default function ContractDetailPageContainer() {
 
   if (error) return <AlertComponent message={error.message} type="error" />;
   return (
-    <Form
-      form={form}
-      autoComplete="no"
-      onFinish={handleFinish}
-      initialValues={
-        data
-          ? {
-              ...data.cccontracts_by_pk,
-              start: data.cccontracts_by_pk.start
-                ? moment(data.cccontracts_by_pk.start)
-                : null,
-              scheduledreturn: data.cccontracts_by_pk.scheduledreturn
-                ? moment(data.cccontracts_by_pk.scheduledreturn)
-                : null,
-              actualreturn: data.cccontracts_by_pk.actualreturn
-                ? moment(data.cccontracts_by_pk.actualreturn)
-                : null,
-              driver_dlexpiry: data.cccontracts_by_pk.driver_dlexpiry
-                ? moment(data.cccontracts_by_pk.driver_dlexpiry)
-                : null,
-              driver_dob: data.cccontracts_by_pk.driver_dob
-                ? moment(data.cccontracts_by_pk.driver_dob)
-                : null
-            }
-          : {}
-      }
-    >
-      <ContractDetailPageComponent
-        job={data ? data.cccontracts_by_pk.job : null}
-        courtesyCar={data ? data.cccontracts_by_pk.courtesycar : null}
-      />
-    </Form>
+    <div>
+      <CourtesyCarReturnModalContainer />
+      <Form
+        form={form}
+        autoComplete="no"
+        onFinish={handleFinish}
+        initialValues={
+          data
+            ? {
+                ...data.cccontracts_by_pk,
+                start: data.cccontracts_by_pk.start
+                  ? moment(data.cccontracts_by_pk.start)
+                  : null,
+                scheduledreturn: data.cccontracts_by_pk.scheduledreturn
+                  ? moment(data.cccontracts_by_pk.scheduledreturn)
+                  : null,
+                actualreturn: data.cccontracts_by_pk.actualreturn
+                  ? moment(data.cccontracts_by_pk.actualreturn)
+                  : null,
+                driver_dlexpiry: data.cccontracts_by_pk.driver_dlexpiry
+                  ? moment(data.cccontracts_by_pk.driver_dlexpiry)
+                  : null,
+                driver_dob: data.cccontracts_by_pk.driver_dob
+                  ? moment(data.cccontracts_by_pk.driver_dob)
+                  : null
+              }
+            : {}
+        }
+      >
+        <ContractDetailPageComponent
+          contract={data ? data.cccontracts_by_pk : null}
+          job={data ? data.cccontracts_by_pk.job : null}
+          courtesyCar={data ? data.cccontracts_by_pk.courtesycar : null}
+          refetch={refetch}
+        />
+      </Form>
+    </div>
   );
 }