Merge pull request #1893 from bcgov/feat/daniel-add-help-links-1853

feat: Add Help Links to Settings Cards
bcgov · Feb 3, 2025 · a73fc53 · a73fc53
2 parents 077d570 + 1113bf8
commit a73fc53
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 2 deletions.
diff --git a/frontend/src/constants/common.js b/frontend/src/constants/common.js
@@ -60,3 +60,6 @@ export const DEFAULT_CI_FUEL = {
 
 export const PHONE_REGEX =
   /^((\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4})?$/
+
+export const HELP_GUIDE_URL =
+  'https://www2.gov.bc.ca/gov/content?id=7A58AF3855154747A0793F0C9A6E9089'
diff --git a/frontend/src/views/Dashboard/components/cards/bceid/OrgUserSettingsCard.jsx b/frontend/src/views/Dashboard/components/cards/bceid/OrgUserSettingsCard.jsx
@@ -7,9 +7,10 @@ import BCTypography from '@/components/BCTypography'
 import withRole from '@/utils/withRole'
 import { nonGovRoles } from '@/constants/roles'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons'
+import { faShareFromSquare } from '@fortawesome/free-solid-svg-icons'
 import { useCurrentUser } from '@/hooks/useCurrentUser'
 import { ROUTES } from '@/constants/routes'
+import { HELP_GUIDE_URL } from '@/constants/common.js'
 
 const linkStyle = {
   textDecoration: 'underline',
@@ -59,6 +60,16 @@ const OrgUserSettingsCard = () => {
             >
               {t('dashboard:orgUserSettings.configureNotifications')}
             </UserSettingsLink>
+
+            <a href={HELP_GUIDE_URL} target="_blank" rel="noreferrer">
+              <UserSettingsLink>
+                {t('dashboard:orgUserSettings.help')}
+                <FontAwesomeIcon
+                  icon={faShareFromSquare}
+                  style={{ color: '#547D59', marginLeft: 6 }}
+                />
+              </UserSettingsLink>
+            </a>
           </List>
         </Stack>
       }

diff --git a/frontend/src/views/Dashboard/components/cards/idir/UserSettingsCard.jsx b/frontend/src/views/Dashboard/components/cards/idir/UserSettingsCard.jsx
@@ -7,9 +7,10 @@ import BCTypography from '@/components/BCTypography'
 import withRole from '@/utils/withRole'
 import { govRoles } from '@/constants/roles'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons'
+import { faShareFromSquare } from '@fortawesome/free-solid-svg-icons'
 import { useCurrentUser } from '@/hooks/useCurrentUser'
 import { ROUTES } from '@/constants/routes'
+import { HELP_GUIDE_URL } from '@/constants/common.js'
 
 const linkStyle = {
   textDecoration: 'underline',
@@ -59,6 +60,16 @@ const UserSettingsCard = () => {
             >
               {t('dashboard:userSettings.configureNotifications')}
             </UserSettingsLink>
+
+            <a href={HELP_GUIDE_URL} target="_blank" rel="noreferrer">
+              <UserSettingsLink>
+                {t('dashboard:userSettings.help')}
+                <FontAwesomeIcon
+                  icon={faShareFromSquare}
+                  style={{ color: '#547D59', marginLeft: 6 }}
+                />
+              </UserSettingsLink>
+            </a>
           </List>
         </Stack>
       }