DESENG-612: Replaced tenant specific variables with data from backend (…

…#2528) * DESENG-612: Replaced tenant specific variables with data from backend * Updated condition for null values * Fixed build issue
bcgov · May 29, 2024 · 2b853c6 · 2b853c6
1 parent 8baeb45
commit 2b853c6
Show file tree

Hide file tree

Showing 11 changed files with 82 additions and 40 deletions.
diff --git a/CHANGELOG.MD b/CHANGELOG.MD
@@ -1,3 +1,8 @@
+## May 29, 2024
+
+- **Feature** MET split out tenant specific variables from locale files [🎟️ DESENG-612](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-612)
+  - Replaced tenant based values with data from tenant detail API
+
 ## May 27, 2024
 
 - **Feature** MET translation file keys used on pages needing translation [🎟️ DESENG-611](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-611)

diff --git a/met-web/src/App.tsx b/met-web/src/App.tsx
@@ -71,6 +71,13 @@ const App = () => {
                     name: tenant.name,
                     logoUrl: tenant.logo_url ?? '',
                     basename: appBaseName,
+                    title: tenant.title,
+                    contact_email: tenant.contact_email ?? '',
+                    contact_name: tenant.contact_name ?? '',
+                    description: tenant.description ?? '',
+                    short_name: tenant.short_name,
+                    logo_description: tenant.logo_description ?? '',
+                    logo_credit: tenant.logo_credit ?? '',
                 }),
             );
         } catch {

diff --git a/met-web/src/DocumentTitle.tsx b/met-web/src/DocumentTitle.tsx
@@ -1,10 +1,12 @@
 import React from 'react';
 import { Helmet } from 'react-helmet-async';
+import { TenantState } from 'reduxSlices/tenantSlice';
+import { useAppSelector } from './hooks';
 const DocumentTitle = () => {
+    const tenant: TenantState = useAppSelector((state) => state.tenant);
     return (
         <Helmet>
-            {/* TODO: LANG-BACKEND - Change the value to show tenant specific */}
-            <title>Modern Engagement</title>
+            <title>{tenant.title}</title>
         </Helmet>
     );
 };

diff --git a/met-web/src/components/comments/admin/review/CommentReview.tsx b/met-web/src/components/comments/admin/review/CommentReview.tsx
@@ -44,6 +44,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faMessageCheck } from '@fortawesome/pro-solid-svg-icons/faMessageCheck';
 import { faMessageSlash } from '@fortawesome/pro-solid-svg-icons/faMessageSlash';
 import { LanguageState } from 'reduxSlices/languageSlice';
+import { TenantState } from 'reduxSlices/tenantSlice';
 
 const CommentReview = () => {
     const [submission, setSubmission] = useState<SurveySubmission>(createDefaultSubmission());
@@ -67,6 +68,7 @@ const CommentReview = () => {
     const { submissionId, surveyId } = useParams();
     const reviewNotes = updatedStaffNote.filter((staffNote) => staffNote.note_type == StaffNoteType.Review);
     const internalNotes = updatedStaffNote.filter((staffNote) => staffNote.note_type == StaffNoteType.Internal);
+    const tenant: TenantState = useAppSelector((state) => state.tenant);
 
     const MAX_OTHER_REASON_CHAR = 500;
 
@@ -205,8 +207,8 @@ const CommentReview = () => {
     };
 
     const defaultVerdict = comment_status_id !== CommentStatus.Pending ? comment_status_id : CommentStatus.Approved;
-    // TODO: LANG-BACKEND - Change the value to show tenant specific
-    const threatEmailContact = '[email protected]';
+    const threatEmailContact = tenant.contact_email;
+    const threatConactName = tenant.contact_name;
     return (
         <MetPageGridContainer>
             <EmailPreviewModal
@@ -408,11 +410,9 @@ const CommentReview = () => {
                                         }
                                     />
                                     <MetSmallTextOld bold color="#d32f2f" marginLeft={'3em'} mt={'-1em'}>
-                                        {translate('comment.admin.review.threatTextOne')}
-                                        {/* TODO: LANG-BACKEND - Change the value to show tenant specific //
-                                        comment.admin.review.threatContact */}
-                                        {'FirstName LastName'}
-                                        {translate('comment.admin.review.threatTextTwo')}{' '}
+                                        {translate('comment.admin.review.threatTextOne')}&nbsp;
+                                        {threatConactName}&nbsp;
+                                        {translate('comment.admin.review.threatTextTwo')} &nbsp;
                                         <Link href={`mailto:${threatEmailContact}`}>{threatEmailContact}</Link>
                                     </MetSmallTextOld>
                                     <FormControlLabel

diff --git a/met-web/src/components/landing/LandingComponent.tsx b/met-web/src/components/landing/LandingComponent.tsx
@@ -7,7 +7,12 @@ import { Container } from '@mui/system';
 import LandingPageBanner from 'assets/images/LandingPageBanner.png';
 import FilterBlock from './FilterBlock';
 import FilterDrawer from './FilterDrawer';
+import { TenantState } from 'reduxSlices/tenantSlice';
+import { useAppSelector } from '../../hooks';
+
 const LandingComponent = () => {
+    const tenant: TenantState = useAppSelector((state) => state.tenant);
+
     return (
         <Grid container direction="row" justifyContent="center" alignItems="center">
             <FilterDrawer />
@@ -44,12 +49,10 @@ const LandingComponent = () => {
                             rowSpacing={2}
                         >
                             <Grid item xs={12}>
-                                {/* TODO: LANG-BACKEND - Change the value to show tenant specific */}
-                                <MetHeader1Old>Government Digital Experience Division</MetHeader1Old>
+                                <MetHeader1Old>{tenant.title}</MetHeader1Old>
                             </Grid>
                             <Grid item xs={12}>
-                                {/* TODO: LANG-BACKEND - Change the value to show tenant specific */}
-                                <MetParagraphOld>Description about the office and public engagement.</MetParagraphOld>
+                                <MetParagraphOld>{tenant.description}</MetParagraphOld>
                             </Grid>
                         </Grid>
                     </Grid>

diff --git a/met-web/src/components/layout/Header/InternalHeader.tsx b/met-web/src/components/layout/Header/InternalHeader.tsx
@@ -16,15 +16,17 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faBars } from '@fortawesome/pro-regular-svg-icons/faBars';
 import { HeaderProps } from './types';
 import { useNavigate } from 'react-router-dom';
+import { TenantState } from 'reduxSlices/tenantSlice';
+import { useAppSelector } from '../../../hooks';
 
 const InternalHeader = ({ drawerWidth = 280 }: HeaderProps) => {
     const isMediumScreen: boolean = useMediaQuery((theme: Theme) => theme.breakpoints.up('md'));
     const [open, setOpen] = useState(false);
     const [imageError, setImageError] = useState(false);
+    const tenant: TenantState = useAppSelector((state) => state.tenant);
     const navigate = useNavigate();
 
-    // TODO: LANG-BACKEND - Change the value to show tenant specific
-    const logoUrl = '';
+    const logoUrl = tenant.logoUrl;
     return (
         <>
             <AppBar
@@ -100,8 +102,7 @@ const InternalHeader = ({ drawerWidth = 280 }: HeaderProps) => {
                             }}
                             sx={{ flexGrow: 1, cursor: 'pointer' }}
                         >
-                            {/* TODO: LANG-BACKEND - Change the value to show tenant specific */}
-                            {'Modern Engagement'}
+                            {tenant.title}
                         </HeaderTitleOld>
                     ) : (
                         <HeaderTitleOld
@@ -110,8 +111,7 @@ const InternalHeader = ({ drawerWidth = 280 }: HeaderProps) => {
                             }}
                             sx={{ flexGrow: 1, cursor: 'pointer' }}
                         >
-                            {/* TODO: LANG-BACKEND - Change the value to show tenant specific */}
-                            {'MET'}
+                            {tenant.short_name}
                         </HeaderTitleOld>
                     )}
                     <Button

diff --git a/met-web/src/components/layout/Header/PublicHeader.tsx b/met-web/src/components/layout/Header/PublicHeader.tsx
@@ -13,6 +13,7 @@ import { useNavigate } from 'react-router-dom';
 import { Palette } from 'styles/Theme';
 import LanguageSelector from 'components/common/LanguageSelector';
 import { LanguageContext } from 'components/common/LanguageContext';
+import { TenantState } from 'reduxSlices/tenantSlice';
 
 const PublicHeader = () => {
     const isLoggedIn = useAppSelector((state) => state.user.authentication.authenticated);
@@ -21,11 +22,10 @@ const PublicHeader = () => {
     const navigate = useNavigate();
     const { t: translate } = useAppTranslation();
     const { engagementViewMounted, availableEngagementTranslations } = useContext(LanguageContext);
+    const tenant: TenantState = useAppSelector((state) => state.tenant);
 
-    // TODO: LANG-BACKEND - Change the value to show tenant specific
-    const logoUrl = '';
-    // TODO: LANG-BACKEND - Change the value to show tenant specific
-    const headerTitle = 'Modern Engagement';
+    const logoUrl = tenant.logoUrl;
+    const headerTitle = tenant.title;
 
     return (
         <Box sx={{ flexGrow: 1 }}>
@@ -48,8 +48,7 @@ const PublicHeader = () => {
                         >
                             <img
                                 src={logoUrl}
-                                // TODO: LANG-BACKEND - Change the value to show tenant specific
-                                alt="Site Logo"
+                                alt={translate('common.defaultText')}
                                 style={{
                                     objectFit: 'cover',
                                     height: '5em',
@@ -77,8 +76,7 @@ const PublicHeader = () => {
                             onClick={() => {
                                 navigate(`/${language}`);
                             }}
-                            // TODO: LANG-BACKEND - Change the value to show tenant specific
-                            alt="British Columbia Logo"
+                            alt={translate('common.defaultBCText')}
                         />
                     </When>
                     <HeaderTitleOld

diff --git a/met-web/src/locales/common.json b/met-web/src/locales/common.json
@@ -95,6 +95,8 @@
         }
     },
     "common": {
-        "logout": "Logout"
+        "logout": "Logout",
+        "defaultBCText": "British Columbia Logo",
+        "defaultText" : "Site Logo"
     }
 }
diff --git a/met-web/src/reduxSlices/tenantSlice.ts b/met-web/src/reduxSlices/tenantSlice.ts
@@ -7,6 +7,13 @@ export interface TenantState {
     basename: string;
     loading: boolean;
     isLoaded: boolean;
+    title: string;
+    contact_email: string;
+    contact_name: string;
+    description: string;
+    short_name: string;
+    logo_description: string;
+    logo_credit: string;
 }
 const initialState: TenantState = {
     id: '',
@@ -15,6 +22,13 @@ const initialState: TenantState = {
     basename: '',
     loading: true,
     isLoaded: false,
+    title: '',
+    contact_email: '',
+    contact_name: '',
+    description: '',
+    short_name: '',
+    logo_description: '',
+    logo_credit: '',
 };
 
 export const userSlice = createSlice({
@@ -30,6 +44,13 @@ export const userSlice = createSlice({
             state.logoUrl = action.payload.logoUrl || '';
             state.basename = action.payload.basename;
             state.isLoaded = true;
+            state.title = action.payload.title;
+            state.contact_email = action.payload.contact_email;
+            state.contact_name = action.payload.contact_name;
+            state.description = action.payload.description;
+            state.short_name = action.payload.short_name;
+            state.logo_description = action.payload.logo_description;
+            state.logo_credit = action.payload.logo_credit;
         },
     },
 });

diff --git a/met-web/src/routes/NotAvailable.tsx b/met-web/src/routes/NotAvailable.tsx
@@ -3,10 +3,12 @@ import { Grid } from '@mui/material';
 import { MetHeader1Old, MetParagraphOld, MetLabel } from 'components/common';
 import { Banner } from 'components/banner/Banner';
 import LandingPageBanner from 'assets/images/LandingPageBanner.png';
-import { useAppTranslation } from 'hooks';
+import { useAppTranslation, useAppSelector } from 'hooks';
+import { TenantState } from 'reduxSlices/tenantSlice';
 
 export const NotAvailable = () => {
     const { t: translate } = useAppTranslation();
+    const tenant: TenantState = useAppSelector((state) => state.tenant);
     return (
         <Grid container direction="row" justifyContent={'center'} alignItems="center">
             <Grid item xs={12}>
@@ -41,15 +43,10 @@ export const NotAvailable = () => {
                             rowSpacing={2}
                         >
                             <Grid item xs={12}>
-                                {/* TODO: LANG-BACKEND - Change the value to show tenant specific */}
-                                <MetHeader1Old>Government Digital Experience Division</MetHeader1Old>
+                                <MetHeader1Old>{tenant.title}</MetHeader1Old>
                             </Grid>
                             <Grid item xs={12}>
-                                {/* TODO: LANG-BACKEND - Change the value to show tenant specific */}
-                                <MetParagraphOld>
-                                    The GDX Division helps inform digital standards for web content, accessibility,
-                                    forms, and design..
-                                </MetParagraphOld>
+                                <MetParagraphOld>{tenant.description}</MetParagraphOld>
                             </Grid>
                         </Grid>
                     </Grid>

diff --git a/met-web/tests/unit/components/landingPage/LandingPage.test.tsx b/met-web/tests/unit/components/landingPage/LandingPage.test.tsx
@@ -7,6 +7,11 @@ import { LandingContext } from 'components/landing/LandingContext';
 import * as reactRedux from 'react-redux';
 import { openEngagement, closedEngagement } from '../factory';
 
+const MOCK_TENANT = {
+    title: 'Mock Tenant',
+    description: 'Mock Tenant Description',
+};
+
 jest.mock('axios');
 
 jest.mock('components/common', () => ({
@@ -20,6 +25,10 @@ jest.mock('hooks', () => ({
     useAppTranslation: () => ({
         t: (key: string) => key, // return the key itself
     }),
+    useAppSelector: (callback: any) =>
+        callback({
+            tenant: MOCK_TENANT,
+        }),
 }));
 
 // mock enums to fix TS compiler issue when importing them
@@ -100,10 +109,8 @@ describe('Landing page tests', () => {
                     );
                 }),
             ).toBeInTheDocument();
-            // TODO: LANG-BACKEND - Change the value to show tenant specific
-            expect(screen.getByText('Government Digital Experience Division')).toBeInTheDocument();
-            // TODO: LANG-BACKEND - Change the value to show tenant specific
-            expect(screen.getByText('Description about the office and public engagement.')).toBeInTheDocument();
+            expect(screen.getByText(MOCK_TENANT.title)).toBeInTheDocument();
+            expect(screen.getByText(MOCK_TENANT.description)).toBeInTheDocument();
             expect(screen.getByText(openEngagement.name)).toBeInTheDocument();
             expect(screen.getByText(closedEngagement.name)).toBeInTheDocument();
         });