Merge pull request #1320 from Gary-Community-Ventures/dev

10/2/2024
Gary-Community-Ventures · Oct 10, 2024 · a50c5d6 · a50c5d6
2 parents 7b2368f + 8198a58
commit a50c5d6
Show file tree

Hide file tree

Showing 12 changed files with 93 additions and 65 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,10 +23,12 @@
     "@types/node": "^20.3.2",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
+    "@types/react-gtm-module": "^2.0.3",
     "nepali-number": "^1.0.3",
     "prettier": "^2.8.8",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-gtm-module": "^2.0.11",
     "react-hook-form": "^7.52.1",
     "react-intl": "^6.0.8",
     "react-router-dom": "^6.3.0",

diff --git a/public/index.html b/public/index.html
@@ -1,20 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <!-- Google Tag Manager -->
-    <script>
-      (function (w, d, s, l, i) {
-        w[l] = w[l] || [];
-        w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
-        var f = d.getElementsByTagName(s)[0],
-          j = d.createElement(s),
-          dl = l != 'dataLayer' ? '&l=' + l : '';
-        j.async = true;
-        j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
-        f.parentNode.insertBefore(j, f);
-      })(window, document, 'script', 'dataLayer', 'GTM-PNWNTFQ8');
-    </script>
-    <!-- End Google Tag Manager -->
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -30,15 +16,6 @@
   </head>
 
   <body>
-    <!-- Google Tag Manager (noscript) --><noscript
-      ><iframe
-        src="https://www.googletagmanager.com/ns.html?id=GTM-PNWNTFQ8"
-        height="0"
-        width="0"
-        style="display: none; visibility: hidden"
-      ></iframe></noscript
-    ><!-- End Google Tag Manager (noscript) -->
-    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
   </body>
 </html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -12,7 +12,7 @@ import HouseholdDataBlock from './Components/HouseholdDataBlock/HouseholdDataBlo
 import ProgressBar from './Components/ProgressBar/ProgressBar';
 import JeffcoLandingPage from './Components/JeffcoComponents/JeffcoLandingPage/JeffcoLandingPage';
 import LoadingPage from './Components/LoadingPage/LoadingPage.tsx';
-import SelectLanguagePage from './Components/SelectLanguagePage/SelectLanguagePage.tsx';
+import SelectLanguagePage from './Components/Steps/SelectLanguagePage.tsx';
 import { updateScreen, updateUser } from './Assets/updateScreen.ts';
 import { getStepDirectory, STARTING_QUESTION_NUMBER, getStepNumber } from './Assets/stepDirectory';
 import Box from '@mui/material/Box';

diff --git a/src/Assets/States/CO/WhiteLabels/CCIG/ccigLandingPage.png b/src/Assets/States/CO/WhiteLabels/CCIG/ccigLandingPage.png
diff --git a/src/Assets/States/CO/WhiteLabels/CCIG/ccigLogo.png b/src/Assets/States/CO/WhiteLabels/CCIG/ccigLogo.png
diff --git a/src/Assets/analytics.ts b/src/Assets/analytics.ts
@@ -1,7 +1,18 @@
+import TagManager from 'react-gtm-module';
+
 export default function dataLayerPush<T>(obj: T) {
   if (window.dataLayer === undefined) {
     console.error('Analytics are not working');
     return;
   }
   window.dataLayer.push(obj);
 }
+
+export function initializeGTM() {
+  const gtmId = process.env.REACT_APP_GOOGLE_ANALYTICS_ID;
+  if (gtmId) {
+    TagManager.initialize({ gtmId });
+  } else {
+    console.error('REACT_APP_GOOGLE_ANALYTICS_ID is not defined. Google Tag Manager will not be initialized.');
+  }
+}
diff --git a/src/Components/CcigComponents/CcigLandingPage.tsx b/src/Components/CcigComponents/CcigLandingPage.tsx
@@ -20,20 +20,20 @@ export default function CcigLandingPage() {
         src={ccigLandingPageImage}
         alt={formatMessage({
           id: 'ccig.landingPage.image.alt',
-          defaultMessage: 'CCIG in partnership with myfriendben',
+          defaultMessage: 'CDIG in partnership with myfriendben',
         })}
         className="ccig-landing-page-logo"
       />
       <p className="ccig-landing-page-text">
         <FormattedMessage
           id="ccig.landingPage.text.1"
-          defaultMessage="Welcome to the final part of the application process for the Colorado Community Insight Group!"
+          defaultMessage="Welcome to the final part of the application process for the Colorado Design Insight Group!"
         />
       </p>
       <p className="ccig-landing-page-text">
         <FormattedMessage
           id="ccig.landingPage.text.2"
-          defaultMessage="Thank you again for your interest in joining CCIG. This last section of the application will help us learn more about your family demographics, income, and benefits that you have experience with. This information is helpful to help match you to insight sessions to improve programs, initiatives, and policies."
+          defaultMessage="Thank you again for your interest in joining CDIG. This last section of the application will help us learn more about your family demographics, income, and benefits that you have experience with. This information is helpful to help match you to insight sessions to improve programs, initiatives, and policies."
         />
       </p>
       <p className="ccig-landing-page-text">
@@ -51,7 +51,7 @@ export default function CcigLandingPage() {
       <p className="ccig-landing-page-text">
         <FormattedMessage
           id="ccig.landingPage.text.5"
-          defaultMessage="If you have any questions or need assistance, please email us at ccig@garycommunity.org."
+          defaultMessage="If you have any questions or need assistance, please email us at cdig@garycommunity.org."
         />
       </p>
       <Button variant="contained" onClick={handleGetStarted}>

diff --git a/src/Components/ContinueButton/FormContinueButton.tsx b/src/Components/ContinueButton/FormContinueButton.tsx
@@ -0,0 +1,13 @@
+import { Button } from '@mui/material';
+import { PropsWithChildren } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+const FormContinueButton = ({ children }: PropsWithChildren) => {
+  return (
+    <Button variant="contained" type="submit">
+      {children ?? <FormattedMessage id="continueButton" defaultMessage="Continue" />}
+    </Button>
+  );
+};
+
+export default FormContinueButton;
diff --git a/src/Components/PrevAndContinueButtons/PrevAndContinueButtons.tsx b/src/Components/PrevAndContinueButtons/PrevAndContinueButtons.tsx
@@ -1,6 +1,6 @@
 import PreviousButton from '../PreviousButton/PreviousButton';
-import { Button } from '@mui/material';
-import { FormattedMessage } from 'react-intl';
+import FormContinueButton from '../ContinueButton/FormContinueButton';
+import { FormattedMessageType } from '../../Types/Questions';
 
 type PrevAndContinueButtonsProps = {
   backNavigationFunction: () => void;
@@ -10,9 +10,7 @@ const PrevAndContinueButtons = ({ backNavigationFunction }: PrevAndContinueButto
   return (
     <div className="question-buttons">
       <PreviousButton navFunction={backNavigationFunction} />
-      <Button variant="contained" type="submit">
-        <FormattedMessage id="continueButton" defaultMessage="Continue" />
-      </Button>
+      <FormContinueButton />
     </div>
   );
 };

diff --git a/...SelectLanguagePage/SelectLanguagePage.tsx → src/Components/Steps/SelectLanguagePage.tsx b/...SelectLanguagePage/SelectLanguagePage.tsx → src/Components/Steps/SelectLanguagePage.tsx
@@ -1,11 +1,12 @@
 import { useConfig } from '../Config/configHook.tsx';
-import { FormControl, Select, InputLabel, MenuItem, SelectChangeEvent, Button, Box } from '@mui/material';
+import { FormControl, Select, InputLabel, MenuItem, SelectChangeEvent } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import { Context } from '../Wrapper/Wrapper.tsx';
 import { useContext, useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import QuestionHeader from '../QuestionComponents/QuestionHeader';
-import { useQueryString } from '../QuestionComponents/questionHooks';
+import QuestionHeader from '../QuestionComponents/QuestionHeader.tsx';
+import { useQueryString } from '../QuestionComponents/questionHooks.ts';
+import FormContinueButton from '../ContinueButton/FormContinueButton.tsx';
 
 const SelectLanguagePage = () => {
   const { locale, selectLanguage } = useContext(Context);
@@ -46,6 +47,14 @@ const SelectLanguagePage = () => {
     };
   });
 
+  const handleSubmit = () => {
+    if (uuid !== undefined) {
+      navigate(`/${uuid}/step-2${queryString}`);
+      return;
+    }
+    navigate(`/step-2${queryString}`);
+  };
+
   return (
     <main className="benefits-form">
       <QuestionHeader>
@@ -54,35 +63,28 @@ const SelectLanguagePage = () => {
       <h2 className="sub-header-language-select">
         <FormattedMessage id="selectLanguage.subHeader" defaultMessage="What is your preferred language?" />
       </h2>
-      <FormControl sx={{ width: '150px' }}>
-        <InputLabel id="language-select-label">
-          <FormattedMessage id="selectLang.text" defaultMessage="Language" />
-        </InputLabel>
-        <Select
-          labelId="language-select-label"
-          id="language-select"
-          value={locale}
-          label={<FormattedMessage id="selectLang.text" defaultMessage="Language" />}
-          //@ts-ignore
-          onChange={(event: SelectChangeEvent<string>) => selectLanguage(event)}
-        >
-          {createMenuItems(languageOptions, 'selectLang.disabledSelectMenuItemText', 'Select a language')}
-        </Select>
-      </FormControl>
-      <Box sx={{ mt: '1rem' }}>
-        <Button
-          variant="contained"
-          onClick={() => {
-            if (uuid !== undefined) {
-              navigate(`/${uuid}/step-2${queryString}`);
-              return;
-            }
-            navigate(`/step-2${queryString}`);
-          }}
-        >
-          <FormattedMessage id="continueButton-getStarted" defaultMessage="Get Started" />
-        </Button>
-      </Box>
+      <form onSubmit={handleSubmit}>
+        <FormControl sx={{ width: '150px' }}>
+          <InputLabel id="language-select-label">
+            <FormattedMessage id="selectLang.text" defaultMessage="Language" />
+          </InputLabel>
+          <Select
+            labelId="language-select-label"
+            id="language-select"
+            value={locale}
+            label={<FormattedMessage id="selectLang.text" defaultMessage="Language" />}
+            //@ts-ignore
+            onChange={(event: SelectChangeEvent<string>) => selectLanguage(event)}
+          >
+            {createMenuItems(languageOptions, 'selectLang.disabledSelectMenuItemText', 'Select a language')}
+          </Select>
+        </FormControl>
+        <div style={{ marginTop: '1rem' }}>
+          <FormContinueButton>
+            <FormattedMessage id="continueButton-getStarted" defaultMessage="Get Started" />
+          </FormContinueButton>
+        </div>
+      </form>
     </main>
   );
 };

diff --git a/src/index.tsx b/src/index.tsx
@@ -4,6 +4,9 @@ import reportWebVitals from './reportWebVitals';
 import { BrowserRouter } from 'react-router-dom';
 import Wrapper from './Components/Wrapper/Wrapper';
 import './index.css';
+import { initializeGTM } from './Assets/analytics';
+
+initializeGTM();
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(