refactor reportPageFooter component

services/ui-src/src/components/reports/ReportPageFooter.tsx

@@ -3,7 +3,7 @@ import { useNavigate } from "react-router-dom";
 import { Box, Button, Flex, Image, Spinner } from "@chakra-ui/react";
 // utils
 import { parseCustomHtml, useFindRoute, useStore } from "utils";
-import { CustomHtmlElement, FormJson } from "types";
+import { CustomHtmlElement, FormJson, ReportStatus } from "types";
 // assets
 import nextIcon from "assets/icons/icon_next_white.png";
 import previousIcon from "assets/icons/icon_previous_blue.png";
@@ -20,56 +20,57 @@ export const ReportPageFooter = ({
     report?.formTemplate.flatRoutes,
     report?.formTemplate.basePath
   );
-  const hidePrevious = previousRoute === "/mcpar" || previousRoute === "/mlr";
 
-  const { userIsAdmin, userIsReadOnly } = useStore().user ?? {};
+  const { userIsAdmin, userIsReadOnly, userIsEndUser } = useStore().user ?? {};
   const isAdminUserType = userIsAdmin || userIsReadOnly;
-  const formIsDisabled = isAdminUserType && !form?.editableByAdmins;
+  const hidePrevious = previousRoute === "/mcpar" || previousRoute === "/mlr";
+  const reportWithSubmittedStatus = report?.status === ReportStatus.SUBMITTED;
+  const formIsDisabled =
+    (isAdminUserType && !form?.editableByAdmins) ||
+    (userIsEndUser && reportWithSubmittedStatus);
+  const isReadOnly = !form?.id || formIsDisabled;
+
+  const prevButton = (
+    <Button
+      onClick={() => navigate(previousRoute)}
+      variant="outline"
+      leftIcon={<Image src={previousIcon} alt="" sx={sx.arrowIcon} />}
+    >
+      Previous
+    </Button>
+  );
+
+  const nextButtonNavOnly = (
+    <Button
+      onClick={() => navigate(nextRoute)}
+      sx={sx.nextButton}
+      rightIcon={<Image src={nextIcon} alt="" sx={sx.arrowIcon} />}
+    >
+      Continue
+    </Button>
+  );
+
+  const nextButtonSubmit = (
+    <Button
+      form={form?.id}
+      type="submit"
+      sx={sx.nextButton}
+      rightIcon={
+        !submitting ? (
+          <Image src={nextIcon} alt="" sx={sx.arrowIcon} />
+        ) : undefined
+      }
+    >
+      {submitting ? <Spinner size="sm" /> : "Continue"}
+    </Button>
+  );
 
   return (
     <Box sx={sx.footerBox} {...props}>
-      <Box>
-        <Flex sx={hidePrevious ? sx.floatButtonRight : sx.buttonFlex}>
-          {!hidePrevious && (
-            <Button
-              onClick={() => navigate(previousRoute)}
-              variant="outline"
-              leftIcon={
-                <Image src={previousIcon} alt="Previous" sx={sx.arrowIcon} />
-              }
-            >
-              Previous
-            </Button>
-          )}
-          {!form?.id || formIsDisabled ? (
-            <Button
-              onClick={() => navigate(nextRoute)}
-              rightIcon={
-                submitting ? (
-                  <></>
-                ) : (
-                  <Image src={nextIcon} alt="Next" sx={sx.arrowIcon} />
-                )
-              }
-            >
-              Continue
-            </Button>
-          ) : (
-            <Button
-              form={form.id}
-              type="submit"
-              sx={sx.button}
-              rightIcon={
-                !submitting ? (
-                  <Image src={nextIcon} alt="Next" sx={sx.arrowIcon} />
-                ) : undefined
-              }
-            >
-              {submitting ? <Spinner size="sm" /> : "Continue"}
-            </Button>
-          )}
-        </Flex>
-      </Box>
+      <Flex>
+        {!hidePrevious ? prevButton : null}
+        {isReadOnly ? nextButtonNavOnly : nextButtonSubmit}
+      </Flex>
       {praDisclosure && (
         <Box sx={sx.praStatement}>{parseCustomHtml(praDisclosure)}</Box>
       )}
@@ -86,24 +87,21 @@ interface Props {
 
 const sx = {
   footerBox: {
-    marginTop: "3.5rem",
-  },
-  buttonFlex: {
-    justifyContent: "space-between",
-    marginY: "1.5rem",
-  },
-  floatButtonRight: {
-    justifyContent: "right",
-    marginY: "1.5rem",
+    marginTop: "2.5rem",
+    paddingTop: "1.5rem",
   },
   arrowIcon: {
     width: "1rem",
   },
   button: {
     width: "8.25rem",
   },
+  nextButton: {
+    minWidth: "8.25rem",
+    marginLeft: "auto",
+  },
   praStatement: {
     fontSize: "0.875rem",
-    paddingTop: "2rem",
+    marginTop: "1rem",
   },
 };