SUBMIT-754: fix - info box corrected for IPD and removed duplicating components

submit-web/src/components/App/Projects/Project.tsx

@@ -1,19 +1,9 @@
 import { ContentBox } from "@/components/Shared/Layouts/ContentBox";
 import { AccountProject } from "@/models/Project";
-import { Box, styled } from "@mui/material";
 import { useNavigate } from "@tanstack/react-router";
 import { ProjectSubmissionsCard } from "./ProjectSubmissionsCard";
 import { PROJECT_STATUS } from "@/components/App/registration/addProjects/ProjectCard/constants";
 
-export const CardInnerBox = styled(Box)({
-  display: "flex",
-  alignItems: "flex-start",
-  justifyContent: "center",
-  flexDirection: "column",
-  height: "100%",
-  padding: "0 12px",
-});
-
 type ProjectParam = {
   accountProject: AccountProject;
 };

submit-web/src/components/App/Projects/ProjectSubmissionsCard.tsx

@@ -1,5 +1,4 @@
 import ProjectTable from "@/components/App/Projects/ProjectTable";
-import { ProjectStatus } from "@/components/App/registration/addProjects/ProjectStatus";
 import PermissionsGate from "@/components/Shared/PermissionGate";
 import { SubmissionPackage } from "@/models/Package";
 import { ACCOUNT_USER_PERMISSIONS } from "@/models/Role";
@@ -9,7 +8,8 @@ import AddIcon from "@mui/icons-material/Add";
 import { Box, Button, Divider, styled, Typography } from "@mui/material";
 import { BCDesignTokens } from "epic.theme";
 import { When } from "react-if";
-import { PROJECT_STATUS } from "../registration/addProjects/ProjectCard/constants";
+import { PROJECT_STATUS } from "@/components/App/registration/addProjects/ProjectCard/constants";
+import { SubmissionTitle } from "@/components/App/Submission/SubmissionTitle";
 
 export const CardInnerBox = styled(Box)({
   display: "flex",
@@ -58,12 +58,7 @@ export const ProjectSubmissionsCard = ({
           pb: BCDesignTokens.layoutPaddingXlarge,
         }}
       >
-        <CardInnerBox>
-          <Typography variant="h4" fontWeight={400}>
-            {title}
-          </Typography>
-          <ProjectStatus status={status} />
-        </CardInnerBox>
+        <SubmissionTitle customTitle={title} customStatus={status} />
         <When condition={userType === USER_TYPE.PROPONENT}>
           <CardInnerBox>
             <PermissionsGate scopes={[ACCOUNT_USER_PERMISSIONS.CREATE_PACKAGE]}>

submit-web/src/components/App/Submission/InfoBox/index.tsx

@@ -1,24 +1,112 @@
-import { SubmissionPackage } from "@/models/Package";
-import { useAccount } from "@/store/accountStore";
-import { Case, Switch } from "react-if";
-import { AdminInfoBox } from "./AdminInfoBox";
-import { EntityInfoBox } from "./EntityInfoBox";
-import { USER_TYPE } from "@/models/User";
+import { SubmissionPackage, SubmissionPackageType } from "@/models/Package";
+import { Grid, Stack, Typography } from "@mui/material";
+import { BCDesignTokens } from "epic.theme";
+import { get, isArray } from "lodash";
+import { useMemo } from "react";
+import VersionGroup from "@/components/App/Submission/VersionGroup";
+import { SubmissionHistory } from "@/components/App/Submission/InfoBox/SubmissionHistory";
+import { Else, If, Then } from "react-if";
+import dateUtils from "@/utils/dateUtils";
 
 type InfoBoxProps = {
   submissionPackage: SubmissionPackage;
 };
+
 export const InfoBox = ({ submissionPackage }: InfoBoxProps) => {
-  const { userType } = useAccount();
+  const { version } = submissionPackage;
+
+  const condition = useMemo(() => {
+    if (!submissionPackage.meta) return "";
+    const mainCondition = get(submissionPackage, "meta.main_condition");
+    return get(mainCondition, "condition_number", "");
+  }, [submissionPackage]);
+
+  const supportingConditions = useMemo(() => {
+    if (!submissionPackage.meta) return "";
+    const conditions = get(submissionPackage, "meta.supporting_conditions");
+    if (!conditions || !isArray(conditions)) return "";
+
+    return conditions
+      .map((condition) => condition.condition_number)
+      .filter(Boolean)
+      .join(", ");
+  }, [submissionPackage]);
 
   return (
-    <Switch>
-      <Case condition={userType === USER_TYPE.STAFF}>
-        <AdminInfoBox submissionPackage={submissionPackage} />
-      </Case>
-      <Case condition={userType === USER_TYPE.PROPONENT}>
-        <EntityInfoBox submissionPackage={submissionPackage} />
-      </Case>
-    </Switch>
+    <Grid
+      container
+      sx={{
+        borderRadius: "4px",
+        border: `1px solid ${BCDesignTokens.surfaceColorBorderDefault}`,
+        p: "16px",
+      }}
+    >
+      <If condition={submissionPackage.type.name === SubmissionPackageType.IPD}>
+        <Then>
+          <Grid item xs={12} md={6} container direction={"column"}>
+            <Grid item xs={12}>
+              <Stack direction={"row"} spacing={2}>
+                <Typography color={BCDesignTokens.themeGray70}>
+                  Submitted on:
+                </Typography>
+                <Typography color={"inherit"}>
+                  {dateUtils.formatDate(submissionPackage.submitted_on) || "-"}
+                </Typography>
+              </Stack>
+            </Grid>
+
+            <Grid item xs={12}>
+              <Stack direction={"row"} spacing={2}>
+                <Typography color={BCDesignTokens.themeGray70}>
+                  Submitted by:
+                </Typography>
+                <Typography color={"inherit"}>
+                  {submissionPackage.submitted_by || "-"}
+                </Typography>
+              </Stack>
+            </Grid>
+          </Grid>
+        </Then>
+        <Else>
+          <Grid item xs={12} md={6} container>
+            <Grid item xs={12}>
+              <Stack direction={"row"} spacing={2}>
+                <Typography color={BCDesignTokens.themeGray70}>
+                  Condition:
+                </Typography>
+                <Typography color={"inherit"}>{condition || "-"}</Typography>
+              </Stack>
+            </Grid>
+
+            <Grid item xs={12}>
+              <Stack direction={"row"} spacing={2}>
+                <Typography color={BCDesignTokens.themeGray70}>
+                  Supporting Condition(s):
+                </Typography>
+                <Typography color={"inherit"}>
+                  {supportingConditions || "-"}
+                </Typography>
+              </Stack>
+            </Grid>
+          </Grid>
+        </Else>
+      </If>
+
+      <Grid
+        item
+        md={6}
+        xs={12}
+        container
+        alignContent={{ xs: "flex-start" }}
+        justifyContent={{ xs: "flex-end" }}
+      >
+        <VersionGroup currentPackageVersion={version} />
+      </Grid>
+      <Grid item xs={12} container mt={"16px"}>
+        <SubmissionHistory
+          submissionPackageId={String(version.original_package_id)}
+        />
+      </Grid>
+    </Grid>
   );
 };

submit-web/src/components/App/Submission/SubmissionTitle.tsx

@@ -0,0 +1,62 @@
+import { SubmissionPackage, SubmissionPackageType } from "@/models/Package";
+import { Box, styled, SxProps, Typography } from "@mui/material";
+import { ProjectStatus } from "@/components/App/registration/addProjects/ProjectStatus";
+import { PROJECT_STATUS } from "@/components/App/registration/addProjects/ProjectCard/constants";
+import { useGetAccountProject } from "@/hooks/api/useProjects";
+import { useMemo } from "react";
+
+type SubmissionTitleProps = {
+  sx?: SxProps;
+  submissionPackage?: SubmissionPackage;
+  customTitle?: string;
+  customStatus?: (typeof PROJECT_STATUS)[keyof typeof PROJECT_STATUS];
+};
+
+export const CardInnerBox = styled(Box)({
+  display: "flex",
+  alignItems: "flex-start",
+  justifyContent: "center",
+  flexDirection: "column",
+  height: "100%",
+  padding: "0 12px",
+});
+
+export const SubmissionTitle = ({
+  sx,
+  submissionPackage,
+  customTitle,
+  customStatus,
+}: SubmissionTitleProps) => {
+  const { data: accountProject } = useGetAccountProject({
+    accountProjectId: submissionPackage?.account_project_id || 0,
+  });
+
+  const proponentName = accountProject?.project?.proponent?.name || "";
+
+  const title = useMemo(() => {
+    return (
+      customTitle ||
+      (submissionPackage?.type.name === SubmissionPackageType.IPD
+        ? `${proponentName} - Assessment`
+        : `Management Plans & Related Documents`)
+    );
+  }, [submissionPackage, proponentName, customTitle]);
+
+  const status = useMemo(() => {
+    return (
+      customStatus ||
+      (submissionPackage?.type.name === SubmissionPackageType.IPD
+        ? PROJECT_STATUS.EARLY_ENGAGEMENT
+        : PROJECT_STATUS.POST_DECISION)
+    );
+  }, [submissionPackage, customStatus]);
+
+  return (
+    <CardInnerBox sx={{ ...(sx || {}) }}>
+      <Typography variant="h4" fontWeight={400}>
+        {title}
+      </Typography>
+      <ProjectStatus status={status} />
+    </CardInnerBox>
+  );
+};