Feature/deseng666 Add new Engagement Details page

CHANGELOG.MD

@@ -1,3 +1,8 @@
+## August 8, 2024
+
+- **Feature** New engagement details page [🎟️ DESENG-666](https://citz-gdx.atlassian.net/browse/DESENG-666)
+- Old engagement details page still available under "old-view" route
+
 ## August 6, 2024
 
 - **Hotfix** Fix styling issues with the new admin header - 🎟️ HOTFIX

met-web/src/components/banner/Banner.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import BannerWithImage from './BannerWithImage';
-import { BannerProps } from '../engagement/view/types';
+import { BannerProps } from '../engagement/old-view/types';
 
 export const Banner = ({ height, imageUrl, children }: BannerProps) => {
     return (

met-web/src/components/banner/BannerWithImage.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Box } from '@mui/material';
 import BannerWithoutImage from './BannerWithoutImage';
-import { BannerProps } from '../engagement/view/types';
+import { BannerProps } from '../engagement/old-view/types';
 
 const BannerWithImage = ({ height, imageUrl, children }: BannerProps) => {
     const [imageError, setImageError] = useState(false);

met-web/src/components/banner/BannerWithoutImage.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box } from '@mui/material';
-import { BannerProps } from '../engagement/view/types';
+import { BannerProps } from '../engagement/old-view/types';
 
 const BannerWithoutImage = ({ children }: BannerProps) => {
     return (

met-web/src/components/common/Navigation/Breadcrumb.tsx

@@ -14,7 +14,11 @@ export const BreadcrumbTrail: React.FC<{ crumbs: BreadcrumbProps[]; smallScreenO
     smallScreenOnly,
 }) => {
     return (
-        <Breadcrumbs aria-label="breadcrumb" sx={smallScreenOnly ? { display: { xs: 'block', md: 'none' } } : {}}>
+        <Breadcrumbs
+            aria-label="breadcrumb"
+            component="nav"
+            sx={smallScreenOnly ? { display: { xs: 'block', md: 'none' } } : {}}
+        >
             {crumbs.map((crumb, index) =>
                 crumb.link ? (
                     <Link size="small" key={crumb.name} to={crumb.link}>
@@ -47,7 +51,7 @@ interface UIMatchWithCrumb
 export const AutoBreadcrumbs: React.FC<{ smallScreenOnly?: boolean }> = ({ smallScreenOnly }) => {
     const matches = (useMatches() as UIMatchWithCrumb[]).filter((match) => match.handle?.crumb);
     return (
-        <Breadcrumbs aria-label="breadcrumb" sx={smallScreenOnly ? { display: { xs: 'block', md: 'none' } } : {}}>
+        <Breadcrumbs aria-label="breadcrumbs" sx={smallScreenOnly ? { display: { xs: 'block', md: 'none' } } : {}}>
             {matches.map((match, index) => {
                 const data = match.data as unknown;
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any

met-web/src/components/engagement/admin/view/index.tsx

@@ -0,0 +1,37 @@
+import React, { Suspense } from 'react';
+import { useLoaderData, Await } from 'react-router-dom';
+import { Engagement } from 'models/engagement';
+import { AutoBreadcrumbs } from 'components/common/Navigation/Breadcrumb';
+import { EngagementStatus } from 'constants/engagementStatus';
+import { Theme, useMediaQuery } from '@mui/material';
+
+export const AdminEngagementView = () => {
+    const { engagement } = useLoaderData() as { engagement: Promise<Engagement> };
+    const isMediumScreenOrLarger: boolean = useMediaQuery((theme: Theme) => theme.breakpoints.up('md'));
+
+    return (
+        <div style={{ marginTop: '3.125rem', padding: isMediumScreenOrLarger ? '0' : '0  1rem' }}>
+            <AutoBreadcrumbs />
+            <Suspense>
+                <Await resolve={engagement}>
+                    {(engagement: Engagement) => (
+                        <div style={{ marginTop: '2rem' }}>
+                            <span
+                                style={{
+                                    background: '#CE3E39',
+                                    padding: '0.2rem 0.75rem',
+                                    color: 'white',
+                                    borderRadius: '3px',
+                                    fontSize: '0.8rem',
+                                }}
+                            >
+                                {EngagementStatus[engagement?.status_id]}
+                            </span>
+                            <h1 style={{ marginTop: '0.5rem' }}>{engagement?.name}</h1>
+                        </div>
+                    )}
+                </Await>
+            </Suspense>
+        </div>
+    );
+};

met-web/src/components/engagement/dashboard/comment/CommentBanner.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import { Skeleton } from '@mui/material';
 import { Banner } from 'components/banner/Banner';
 import { CommentViewContext } from './CommentViewContext';
-import EngagementInfoSection from 'components/engagement/view/EngagementInfoSection';
+import EngagementInfoSection from 'components/engagement/old-view/EngagementInfoSection';
 
 export const CommentBanner = () => {
     const { isEngagementLoading, engagement } = useContext(CommentViewContext);

met-web/src/components/engagement/view/PreviewBanner.tsx → met-web/src/components/engagement/old-view/PreviewBanner.tsx

@@ -11,7 +11,7 @@ import { faSquareQuestion } from '@fortawesome/pro-regular-svg-icons/faSquareQue
 import { faFileSlash } from '@fortawesome/pro-regular-svg-icons/faFileSlash';
 import { faFileCircleExclamation } from '@fortawesome/pro-regular-svg-icons/faFileCircleExclamation';
 import IconButton from '@mui/material/IconButton';
-import ScheduleModal from 'components/engagement/view/ScheduleModal';
+import ScheduleModal from 'components/engagement/old-view/ScheduleModal';
 import { formatDate } from 'components/common/dateHelper';
 import { When } from 'react-if';
 import { PermissionsGate } from 'components/permissionsGate';

met-web/src/components/engagement/view/ScheduleModal/index.tsx → met-web/src/components/engagement/old-view/ScheduleModal/index.tsx

@@ -15,7 +15,7 @@ import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
 import { TimePicker } from '@mui/x-date-pickers/TimePicker';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { ActionContext } from 'components/engagement/view/ActionContext';
+import { ActionContext } from 'components/engagement/old-view/ActionContext';
 import { openNotification } from 'services/notificationService/notificationSlice';
 import { formatToUTC } from 'components/common/dateHelper';
 import { openNotificationModal } from 'services/notificationModalService/notificationModalSlice';

met-web/src/components/engagement/view/UnpublishModal/index.tsx → met-web/src/components/engagement/old-view/UnpublishModal/index.tsx

@@ -2,7 +2,7 @@ import React, { useContext, useState } from 'react';
 import { Grid, Stack, Modal } from '@mui/material';
 import { modalStyle, PrimaryButtonOld, SecondaryButtonOld, MetHeader1Old, MetBodyOld } from 'components/common';
 import { EngagementStatus } from 'constants/engagementStatus';
-import { ActionContext } from 'components/engagement/view/ActionContext';
+import { ActionContext } from 'components/engagement/old-view/ActionContext';
 
 interface UnpublishModalProps {
     open: boolean;

met-web/src/components/engagement/new/view/EngagementDescription.tsx → met-web/src/components/engagement/public/view/EngagementDescription.tsx

@@ -9,7 +9,7 @@ import { getEditorStateFromRaw } from 'components/common/RichTextEditor/utils';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faArrowLeftLong } from '@fortawesome/pro-light-svg-icons';
 import { Widget } from 'models/widget';
-import { WidgetSwitch } from 'components/engagement/view/widgets/WidgetSwitch';
+import { WidgetSwitch } from 'components/engagement/old-view/widgets/WidgetSwitch';
 import { BaseTheme, DarkTheme } from 'styles/Theme';
 import { RichTextArea } from 'components/common/Input/RichTextArea';
 

met-web/src/components/engagement/new/view/EngagementSurveyBlock.tsx → met-web/src/components/engagement/public/view/EngagementSurveyBlock.tsx

@@ -9,13 +9,13 @@ import { getStatusFromStatusId } from 'components/common/Indicators/StatusChip';
 import { RichTextArea } from 'components/common/Input/RichTextArea';
 import { getEditorStateFromRaw } from 'components/common/RichTextEditor/utils';
 import { Widget } from 'models/widget';
-import { WidgetSwitch } from 'components/engagement/view/widgets/WidgetSwitch';
+import { WidgetSwitch } from 'components/engagement/old-view/widgets/WidgetSwitch';
 import { BaseTheme, DarkTheme } from 'styles/Theme';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChevronRight } from '@fortawesome/pro-regular-svg-icons';
 import { Switch, Case } from 'react-if';
 import { useAppSelector, useAppTranslation } from 'hooks';
-import EmailModal from 'components/engagement/view/EmailModal';
+import EmailModal from 'components/engagement/old-view/EmailModal';
 
 const gridContainerStyles = {
     width: '100%',

met-web/src/components/engagement/new/view/index.tsx → met-web/src/components/engagement/public/view/index.tsx

@@ -5,7 +5,7 @@ import { EngagementContentTabs } from './EngagementContentTabs';
 import { EngagementSurveyBlock } from './EngagementSurveyBlock';
 import { SuggestedEngagements } from './SuggestedEngagements';
 
-export const ViewEngagement = () => {
+export const PublicEngagementView = () => {
     return (
         <main>
             <EngagementHero />
@@ -17,7 +17,7 @@ export const ViewEngagement = () => {
     );
 };
 
-export default ViewEngagement;
+export default PublicEngagementView;
 
 export { engagementLoader } from './EngagementLoader';
 export { engagementListLoader } from './EngagementListLoader';

met-web/src/components/layout/SideNav/SideNav.tsx

@@ -134,7 +134,7 @@ const DrawerBox = ({ isMediumScreenOrLarger, setOpen }: DrawerBoxProps) => {
                 borderTopRightRadius: '16px',
                 borderBottomRightRadius: '16px',
                 boxShadow: '0 5px 10px rgba(0, 0, 0, 0.4)',
-                mt: '5.625rem',
+                mt: isMediumScreenOrLarger ? '8.5rem' : '5.625rem',
                 zIndex: ZIndex.sideNav,
             }}
         >
@@ -161,7 +161,7 @@ const SideNav = ({ open, setOpen, isMediumScreen }: SideNavProps) => {
                         width: '300px',
                         boxSizing: 'border-box',
                         background: 'transparent',
-                        height: '43.75rem',
+                        height: '48.75rem',
                     },
                 }}
                 hideBackdrop

met-web/src/components/publicDashboard/ReportBanner.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Skeleton } from '@mui/material';
 import { Banner } from 'components/banner/Banner';
 import { Engagement } from 'models/engagement';
-import EngagementInfoSection from 'components/engagement/view/EngagementInfoSection';
+import EngagementInfoSection from 'components/engagement/old-view/EngagementInfoSection';
 
 interface ReportBannerProps {
     engagement: Engagement;

met-web/src/components/survey/edit/FormWrapped.tsx

@@ -5,7 +5,7 @@ import { EditForm } from './EditForm';
 import { MetPaper } from 'components/common';
 import { InvalidTokenModal } from '../submit/InvalidTokenModal';
 import { When } from 'react-if';
-import EngagementInfoSection from 'components/engagement/view/EngagementInfoSection';
+import EngagementInfoSection from 'components/engagement/old-view/EngagementInfoSection';
 import { Await, useAsyncValue, useNavigate } from 'react-router-dom';
 import { EmailVerification } from 'models/emailVerification';
 import { Engagement } from 'models/engagement';

met-web/src/components/survey/submit/SurveyBanner.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Banner } from 'components/banner/Banner';
-import EngagementInfoSection from 'components/engagement/view/EngagementInfoSection';
+import EngagementInfoSection from 'components/engagement/old-view/EngagementInfoSection';
 import { Engagement } from 'models/engagement';
 import { useAsyncValue } from 'react-router-dom';
 

met-web/src/routes/AuthenticatedRoutes.tsx

@@ -3,7 +3,8 @@ import { Params, defer, Navigate, Route } from 'react-router-dom';
 import NotFound from './NotFound';
 import EngagementForm from '../components/engagement/form';
 import EngagementListing from '../components/engagement/listing';
-import EngagementView from '../components/engagement/view';
+import { Engagement as OldEngagementView } from '../components/engagement/old-view';
+import { AdminEngagementView } from 'components/engagement/admin/view';
 import SurveyListing from 'components/survey/listing';
 import CreateSurvey from 'components/survey/create';
 import SurveyFormBuilder from 'components/survey/building';
@@ -29,13 +30,14 @@ import TenantEditPage from 'components/tenantManagement/Edit';
 import TenantDetail from 'components/tenantManagement/Detail';
 import Language from 'components/language';
 import { Tenant } from 'models/tenant';
+import { Engagement } from 'models/engagement';
 import { getAllTenants, getTenant } from 'services/tenantService';
-import { engagementLoader, engagementListLoader } from 'components/engagement/new/view';
+import { engagementLoader, engagementListLoader } from 'components/engagement/public/view';
 import { SurveyLoader } from 'components/survey/building/SurveyLoader';
-import { languageLoader } from 'components/engagement/new/create/languageLoader';
+import { languageLoader } from 'components/engagement/admin/create/languageLoader';
 import { userSearchLoader } from 'components/userManagement/userSearchLoader';
-import EngagementCreationWizard from 'components/engagement/new/create';
-import engagementCreateAction from 'components/engagement/new/create/engagementCreateAction';
+import EngagementCreationWizard from 'components/engagement/admin/create';
+import engagementCreateAction from 'components/engagement/admin/create/engagementCreateAction';
 
 const AuthenticatedRoutes = () => {
     return (
@@ -89,12 +91,27 @@ const AuthenticatedRoutes = () => {
                     <Route element={<AuthGate allowedRoles={[USER_ROLES.EDIT_ENGAGEMENT]} />}>
                         <Route path="form" element={<EngagementForm />} />
                     </Route>
-                    <Route path="view" element={<EngagementView />} />
+                    <Route path="old-view" element={<OldEngagementView />} />
+                    <Route
+                        path="view"
+                        loader={engagementLoader}
+                        handle={{
+                            crumb: async (data: { engagement: Promise<Engagement> }) => {
+                                return data.engagement.then((engagement) => {
+                                    return {
+                                        link: `/engagements/${engagement.id}/view`,
+                                        name: engagement.name,
+                                    };
+                                });
+                            },
+                        }}
+                        element={<AdminEngagementView />}
+                    />
                     <Route path="comments/:dashboardType" element={<EngagementComments />} />
                     <Route path="dashboard/:dashboardType" element={<PublicDashboard />} />
                 </Route>
                 <Route path=":slug">
-                    <Route index element={<EngagementView />} />
+                    <Route index element={<OldEngagementView />} />
                     <Route path="comments/:dashboardType" element={<EngagementComments />} />
                     <Route path="dashboard/:dashboardType" element={<PublicDashboard />} />
                 </Route>

met-web/src/routes/UnauthenticatedRoutes.tsx

@@ -1,18 +1,18 @@
 import SurveySubmit from 'components/survey/submit';
 import EditSurvey from 'components/survey/edit';
 import React from 'react';
-import EngagementView from '../components/engagement/view';
+import EngagementView from '../components/engagement/old-view';
 import NotAvailable from './NotAvailable';
 import EngagementComments from '../components/engagement/dashboard/comment';
 import PublicDashboard from 'components/publicDashboard';
 import Landing from 'components/landing';
-import ManageSubscription from '../components/engagement/view/widgets/Subscribe/ManageSubscription';
+import ManageSubscription from '../components/engagement/old-view/widgets/Subscribe/ManageSubscription';
 import { FormCAC } from 'components/FormCAC';
 import { RedirectLogin } from './RedirectLogin';
 import withLanguageParam from './LanguageParam';
 import { Navigate, Route } from 'react-router-dom';
 import NotFound from './NotFound';
-import ViewEngagement, { engagementLoader } from 'components/engagement/new/view';
+import ViewEngagement, { engagementLoader } from 'components/engagement/public/view';
 import { SurveyLoader } from 'components/survey/building/SurveyLoader';
 
 const ManageSubscriptionWrapper = withLanguageParam(ManageSubscription);