Merge pull request #2536 from bcgov/feature/DESENG-636-add-enagement-…

…new-look-route

[To Main] Feature - DESENG-636 - Add new engagement view page

CHANGELOG.MD

@@ -1,5 +1,11 @@
 ## June 6, 2024
 
+- **Feature** Add a new engagement view page [🎟️ DESENG-636](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-636)
+
+  - Added a new page to view engagements using the new look for MET
+  - The page is available at `/gdx/new-look/[name]/[language]`
+  - The page is a work in progress and will be updated in the future
+
 - **Feature** Use createBrowserRouter insead of \<BrowserRouter> in the App component [🎟️ DESENG-627](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-627)
   - Updated the App component to use the more flexible createBrowserRouter function instead of the <BrowserRouter> component
   - This enables the use of [data router](https://reactrouter.com/en/6.23.0/routers/picking-a-router) functionality and other advanced features in the future, most notably the Blocker component

met-web/src/components/appLayouts/AuthenticatedLayout.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import '@bcgov/design-tokens/css-prefixed/variables.css';
+import '@bcgov/design-tokens/css-prefixed/variables.css'; // Variables will be within scope within AuthenticatedLayout and its children
 import { Outlet } from 'react-router-dom';
 import { Box } from '@mui/material';
 import InternalHeader from '../layout/Header/InternalHeader';

met-web/src/components/appLayouts/PublicLayout.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import '@bcgov/design-tokens/css-prefixed/variables.css'; // Will be available to use in all component
+import '@bcgov/design-tokens/css-prefixed/variables.css'; // Variables will be within scope within PublicLayout and its children
 import { Outlet } from 'react-router-dom';
 import PublicHeader from '../layout/Header/PublicHeader';
 import { Notification } from 'components/common/notification';

met-web/src/components/common/Layout/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Box, BoxProps, Theme, useMediaQuery, useTheme } from '@mui/material';
+import { Outlet } from 'react-router-dom';
 
 const useDesktopOrLarger = (theme: Theme) => useMediaQuery(theme.breakpoints.up('md'));
 const useTabletOrLarger = (theme: Theme) => useMediaQuery(theme.breakpoints.up('sm'));
@@ -23,7 +24,7 @@ export const ResponsiveContainer: React.FC<BoxProps> = (props: BoxProps) => {
     return (
         <Box
             sx={{
-                padding: `1.5em ${horizontalPadding}`,
+                padding: `1.5em ${horizontalPadding()}`,
             }}
             {...props}
         >
@@ -32,5 +33,16 @@ export const ResponsiveContainer: React.FC<BoxProps> = (props: BoxProps) => {
     );
 };
 
+/**
+ * A route wrapper that adds a responsive container around its child routes.
+ */
+export const ResponsiveWrapper: React.FC = () => {
+    return (
+        <ResponsiveContainer>
+            <Outlet />
+        </ResponsiveContainer>
+    );
+};
+
 export { Table, TableHead, TableHeadRow, TableHeadCell, TableBody, TableRow, TableCell, TableContainer } from './Table';
 export { DetailsContainer, Detail } from './Details';

met-web/src/components/common/index.tsx

@@ -179,7 +179,7 @@ export const MobileToolbar = styled(Toolbar)(() => ({
 }));
 
 const StyledPrimaryButton = styled(LoadingButton)(() => ({
-    backgroundColor: Palette.primary.main,
+    backgroundColor: colors.button.default.shade,
     color: '#fff',
     lineHeight: '1.1rem',
     '&:hover': {

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

@@ -0,0 +1,52 @@
+import { BodyText, Header1 } from 'components/common/Typography';
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { Link } from 'components/common/Input';
+
+export const ViewEngagement = () => {
+    const { slug, language } = useParams();
+    const oldLink = `/${slug}/${language}`;
+    return (
+        <>
+            <header>
+                <Header1>View Engagement "{slug}"</Header1>
+            </header>
+            <main>
+                <BodyText>The new engagement view will be displayed here once work is completed. </BodyText>
+                <BodyText>
+                    For now, please use the <Link to={oldLink}>old view</Link>.
+                </BodyText>
+                <BodyText>Work to be completed: </BodyText>
+                <ul>
+                    <li>
+                        <Link to="https://apps.itsm.gov.bc.ca/jira/browse/DESENG-636">
+                            <s>Create new engagement view page</s>
+                        </Link>
+                    </li>
+                    <li>
+                        <Link to="https://apps.itsm.gov.bc.ca/jira/browse/DESENG-630">
+                            Add new header section to the new engagement view
+                        </Link>
+                    </li>
+                    <li>
+                        <Link to="https://apps.itsm.gov.bc.ca/jira/browse/DESENG-631">
+                            Add new Engagement description section
+                        </Link>
+                    </li>
+                    <li>
+                        <Link to="https://apps.itsm.gov.bc.ca/jira/browse/DESENG-632">
+                            Add new Dynamic pages section
+                        </Link>
+                    </li>
+                    <li>
+                        <Link to="https://apps.itsm.gov.bc.ca/jira/browse/DESENG-633">
+                            Add new Survey block section
+                        </Link>
+                    </li>
+                </ul>
+            </main>
+        </>
+    );
+};
+
+export default ViewEngagement;

met-web/src/routes/AuthenticatedRoutes.tsx

@@ -124,6 +124,7 @@ const AuthenticatedRoutes = () => {
                 <Route path=":userId/details" element={<UserProfile />} />
             </Route>
             <Route path="/unauthorized" element={<Unauthorized />} />
+            <Route path="/not-found" element={<NotFound />} />
             <Route path="*" element={<NotFound />} />
         </>
     );

met-web/src/routes/UnauthenticatedRoutes.tsx

@@ -10,8 +10,10 @@ import ManageSubscription from '../components/engagement/view/widgets/Subscribe/
 import { FormCAC } from 'components/FormCAC';
 import { RedirectLogin } from './RedirectLogin';
 import withLanguageParam from './LanguageParam';
-import { Route } from 'react-router-dom';
+import { Navigate, Route } from 'react-router-dom';
 import NotFound from './NotFound';
+import ViewEngagement from 'components/engagement/new/view';
+import { ResponsiveWrapper } from 'components/common/Layout';
 
 const ManageSubscriptionWrapper = withLanguageParam(ManageSubscription);
 const EngagementViewWrapper = withLanguageParam(EngagementView);
@@ -26,8 +28,11 @@ const UnauthenticatedRoutes = () => {
     return (
         <>
             <Route path="/" element={<Landing />} />
-            <Route path="/not-available" element={<NotAvailable />} />
             <Route path="/surveys/submit/:surveyId/:token/:language" element={<SurveySubmitWrapper />} />
+            <Route path="/new-look" element={<ResponsiveWrapper />}>
+                <Route index element={<Navigate to="/" />} />
+                <Route path=":slug/:language" element={<ViewEngagement />} />
+            </Route>
             <Route path="/engagements">
                 <Route path="create/form/:language" element={<RedirectLoginWrapper />} />
                 <Route path=":engagementId">
@@ -47,6 +52,8 @@ const UnauthenticatedRoutes = () => {
                 <Route path="cacform/:widgetId/:language" element={<FormCACWrapper />} />
                 <Route path=":language" element={<EngagementViewWrapper />} />
             </Route>
+            <Route path="/not-available" element={<NotAvailable />} />
+            <Route path="/not-found" element={<NotFound />} />
             <Route path="*" element={<NotFound />} />
         </>
     );