OP-1444: remove save and add buttons when historical payer

src/components/FundingPanel.js

@@ -1,9 +1,11 @@
-import React, { useState, useEffect } from "react";
-import { makeStyles } from "@material-ui/core/styles";
+import React, { useState } from "react";
+
 import { Grid, Paper, Typography, Button } from "@material-ui/core";
-import { Table, TextInput, PublishedComponent, useTranslations, useModulesManager } from "@openimis/fe-core";
-import { usePayerFundingsQuery } from "../hooks";
+import { makeStyles } from "@material-ui/core/styles";
 import AddIcon from "@material-ui/icons/Add";
+
+import { Table, useTranslations, useModulesManager } from "@openimis/fe-core";
+import { usePayerFundingsQuery } from "../hooks";
 import AddFundingDialog from "./AddFundingDialog";
 
 const useStyles = makeStyles((theme) => ({
@@ -15,7 +17,7 @@ const useStyles = makeStyles((theme) => ({
 const HEADERS = ["payer.payDate", "payer.product", "payer.receipt", "payer.amount"];
 
 const FundingPanel = (props) => {
-  const { edited } = props;
+  const { edited, readOnly } = props;
   const [pagination, setPagination] = useState({ page: 0, afterCursor: null, beforeCursor: null });
   const [isDialogOpen, setDialogOpen] = useState(false);
   const modulesManager = useModulesManager();
@@ -45,7 +47,12 @@ const FundingPanel = (props) => {
               <Typography variant="h6">{formatMessage("FundingPanel.table.title")}</Typography>
             </Grid>
             <Grid item>
-              <Button variant="contained" onClick={() => setDialogOpen(true)} startIcon={<AddIcon />}>
+              <Button
+                variant="contained"
+                onClick={() => setDialogOpen(true)}
+                startIcon={<AddIcon />}
+                disabled={edited.validityTo || readOnly}
+              >
                 {formatMessage("FundingPanel.table.addFunding")}
               </Button>
             </Grid>

src/components/PayerForm.js

@@ -1,35 +1,46 @@
 import React from "react";
+import clsx from "clsx";
 
-import { Form } from "@openimis/fe-core";
-import MainPanelForm from "./MainPanelForm";
-import FundingPanel from "./FundingPanel";
+import { makeStyles } from "@material-ui/styles";
 import ReplayIcon from "@material-ui/icons/Replay";
 
-const PayerForm = (props) => {
-  const { readOnly, onBack, onSave, payer, canSave, onReset, onChange } = props;
+import { Form, ProgressOrError } from "@openimis/fe-core";
+import FundingPanel from "./FundingPanel";
+import MainPanelForm from "./MainPanelForm";
+
+const useStyles = makeStyles((theme) => ({
+  page: theme.page,
+  locked: theme.page.locked,
+}));
+
+const PayerForm = ({ readOnly, onBack, onSave, payer, canSave, onReset, onChange, error }) => {
+  const classes = useStyles();
   return (
-    <Form
-      module="payer"
-      title={payer?.uuid ? "payer.PayerForm.title" : "payer.PayerForm.emptyTitle"}
-      titleParams={{ label: payer.name ?? "" }}
-      readOnly={readOnly}
-      canSave={canSave}
-      onEditedChanged={onChange}
-      edited={payer}
-      edited_id={payer.uuid}
-      HeadPanel={MainPanelForm}
-      Panels={[FundingPanel]}
-      save={onSave}
-      back={onBack}
-      openDirty={onSave}
-      actions={[
-        {
-          doIt: onReset,
-          icon: <ReplayIcon />,
-          onlyIfDirty: !readOnly,
-        },
-      ]}
-    />
+    <div className={clsx(classes.page, readOnly && classes.locked)}>
+      <ProgressOrError error={error} />
+      <Form
+        module="payer"
+        title={payer?.uuid ? "payer.PayerForm.title" : "payer.PayerForm.emptyTitle"}
+        titleParams={{ label: payer.name ?? "" }}
+        readOnly={readOnly}
+        canSave={canSave}
+        onEditedChanged={onChange}
+        edited={payer}
+        edited_id={payer.uuid}
+        HeadPanel={MainPanelForm}
+        Panels={[FundingPanel]}
+        save={onSave}
+        back={onBack}
+        openDirty={onSave}
+        actions={[
+          {
+            doIt: onReset,
+            icon: <ReplayIcon />,
+            onlyIfDirty: !readOnly,
+          },
+        ]}
+      />
+    </div>
   );
 };
 export default PayerForm;

src/pages/PayerDetailsPage.js

@@ -1,19 +1,12 @@
 import React, { useState, useEffect } from "react";
-import clsx from "clsx";
-import { useModulesManager, useTranslations, withHistory, historyPush, ProgressOrError } from "@openimis/fe-core";
-import { makeStyles } from "@material-ui/styles";
 import { useSelector } from "react-redux";
+
+import { useModulesManager, useTranslations, withHistory, historyPush } from "@openimis/fe-core";
 import { RIGHT_PAYERS_ADD, RIGHT_PAYERS_EDIT } from "../constants";
 import { usePayerQuery, usePayerCreateMutation, usePayerUpdateMutation } from "../hooks";
 import { validatePayerForm, toFormValues, toInputValues } from "../utils";
 import PayerForm from "../components/PayerForm";
 
-const useStyles = makeStyles((theme) => ({
-  page: theme.page,
-  fab: theme.fab,
-  locked: theme.page.locked,
-}));
-
 const PayerDetailsPage = (props) => {
   const { match, history } = props;
   const modulesManager = useModulesManager();
@@ -27,7 +20,6 @@ const PayerDetailsPage = (props) => {
   const [isLocked, setLocked] = useState(false);
   const [isLoaded, setLoaded] = useState(false);
   const [values, setValues] = useState({});
-  const classes = useStyles();
 
   const createMutation = usePayerCreateMutation();
   const updateMutation = usePayerUpdateMutation();
@@ -65,13 +57,13 @@ const PayerDetailsPage = (props) => {
   }, [data, isLoading]);
 
   return (
-    <div className={clsx(classes.page, isLocked && classes.locked)}>
-      <ProgressOrError error={error} />
+    <>
       {isLoaded && (
         <PayerForm
           readOnly={
             !rights.some((x) => [RIGHT_PAYERS_ADD, RIGHT_PAYERS_EDIT].includes(x)) || isLocked || values.validityTo
           }
+          error={error}
           key={resetKey}
           onChange={setValues}
           payer={values}
@@ -81,7 +73,7 @@ const PayerDetailsPage = (props) => {
           onReset={onReset}
         />
       )}
-    </div>
+    </>
   );
 };
 

src/utils.js

@@ -1,5 +1,5 @@
 export const validatePayerForm = (values) => {
-  return Boolean(values.name && values.type && values.location && values.address);
+  return Boolean(values.name && values.type && values.location && values.address && !values.validityTo);
 };
 
 export const toFormValues = (payer) => payer;