diff --git a/README.md b/README.md index 61e15d39e3..580b494d4f 100644 --- a/README.md +++ b/README.md @@ -70,6 +70,9 @@ Note: there is a test account you can use. Get this from another developer if yo - `DATADOG_CLIENT_TOKEN` - Datadog tracking client token. - `DD_ENV` - Datadog environment. - `HELPJUICE_ORIGIN` - Helpjuice origin for documentation and user support (example: `https://www.helpducks.org`) +- `HELP_URL_COACHING_ACTIVITY` - Link to an article explaining the coaching activity table +- `HELP_URL_COACHING_APPOINTMENTS_AND_RESULTS` - Link to an article explaining the coaching appointments and results table +- `HELP_URL_SETUP_FIND_ORGANIZATION` - Link to an article explaining how to find an organization - `PRIVACY_POLICY_URL` - URL of the privacy policy - `TERMS_OF_USE_URL` - URL of the terms of use - `DISABLE_SETUP_TOUR` - Set to `true` to disable starting users on the welcome tour. This should be removed from the codebase once tools are live. diff --git a/next.config.js b/next.config.js index f62e5e4f3d..f721860884 100644 --- a/next.config.js +++ b/next.config.js @@ -76,6 +76,11 @@ const config = { process.env.DATADOG_CLIENT_TOKEN, ).toString(), HELPJUICE_ORIGIN: process.env.HELPJUICE_ORIGIN, + HELP_URL_COACHING_ACTIVITY: process.env.HELP_URL_COACHING_ACTIVITY, + HELP_URL_COACHING_APPOINTMENTS_AND_RESULTS: + process.env.HELP_URL_COACHING_APPOINTMENTS_AND_RESULTS, + HELP_URL_SETUP_FIND_ORGANIZATION: + process.env.HELP_URL_SETUP_FIND_ORGANIZATION, ALERT_MESSAGE: process.env.ALERT_MESSAGE, PRIVACY_POLICY_URL: process.env.PRIVACY_POLICY_URL, TERMS_OF_USE_URL: process.env.TERMS_OF_USE_URL, diff --git a/src/components/Coaching/CoachingDetail/Activity/Activity.tsx b/src/components/Coaching/CoachingDetail/Activity/Activity.tsx index e0aa9476dd..57a59fa704 100644 --- a/src/components/Coaching/CoachingDetail/Activity/Activity.tsx +++ b/src/components/Coaching/CoachingDetail/Activity/Activity.tsx @@ -36,6 +36,7 @@ import { } from 'src/lib/intlFormat'; import { MultilineSkeleton } from '../../../Shared/MultilineSkeleton'; import { AccountListTypeEnum, CoachingPeriodEnum } from '../CoachingDetail'; +import { HelpButton } from '../HelpButton'; import { useCoachingDetailActivityQuery } from './Activity.generated'; import { AppealProgress } from './AppealProgress'; @@ -262,6 +263,7 @@ export const Activity: React.FC = ({ + } /> diff --git a/src/components/Coaching/CoachingDetail/AppointmentResults/AppointmentResults.tsx b/src/components/Coaching/CoachingDetail/AppointmentResults/AppointmentResults.tsx index 5933e32172..251baa9e9a 100644 --- a/src/components/Coaching/CoachingDetail/AppointmentResults/AppointmentResults.tsx +++ b/src/components/Coaching/CoachingDetail/AppointmentResults/AppointmentResults.tsx @@ -1,5 +1,6 @@ import { useMemo } from 'react'; import { + Box, CardContent, CardHeader, Divider, @@ -17,6 +18,7 @@ import { useLocale } from 'src/hooks/useLocale'; import { currencyFormat, dateFormatWithoutYear } from 'src/lib/intlFormat'; import { MultilineSkeleton } from '../../../Shared/MultilineSkeleton'; import { CoachingPeriodEnum } from '../CoachingDetail'; +import { HelpButton } from '../HelpButton'; import { AlignedTableCell, DividerRow, HeaderRow } from '../StyledComponents'; import { getResultColor } from '../helpers'; import { useAppointmentResultsQuery } from './AppointmentResults.generated'; @@ -77,7 +79,14 @@ export const AppointmentResults: React.FC = ({ return ( - + + {t('Appointments and Results')} + + + } + /> {loading ? ( diff --git a/src/components/Coaching/CoachingDetail/HelpButton.test.tsx b/src/components/Coaching/CoachingDetail/HelpButton.test.tsx new file mode 100644 index 0000000000..fc3d43830b --- /dev/null +++ b/src/components/Coaching/CoachingDetail/HelpButton.test.tsx @@ -0,0 +1,27 @@ +import { render } from '@testing-library/react'; +import { HelpButton } from './HelpButton'; + +describe('help button', () => { + it('renders a link to the help article', () => { + process.env.HELP_URL_COACHING_ACTIVITY = 'https://help.org'; + + const { getByRole } = render( + , + ); + + expect(getByRole('link', { name: 'Help' })).toHaveAttribute( + 'href', + 'https://help.org', + ); + }); + + it('renders nothing if the help article does not exist', () => { + process.env.HELP_URL_COACHING_ACTIVITY = ''; + + const { queryByRole } = render( + , + ); + + expect(queryByRole('link', { name: 'Help' })).not.toBeInTheDocument(); + }); +}); diff --git a/src/components/Coaching/CoachingDetail/HelpButton.tsx b/src/components/Coaching/CoachingDetail/HelpButton.tsx new file mode 100644 index 0000000000..9c6e18fd84 --- /dev/null +++ b/src/components/Coaching/CoachingDetail/HelpButton.tsx @@ -0,0 +1,20 @@ +import QuestionMark from '@mui/icons-material/QuestionMark'; +import { IconButton } from '@mui/material'; +import { ArticleVar, articles } from 'src/lib/helpjuice'; + +interface HelpButtonProps { + articleVar: ArticleVar; +} + +export const HelpButton: React.FC = ({ articleVar }) => { + const url = articles[articleVar]; + if (!url) { + return null; + } + + return ( + + + + ); +}; diff --git a/src/components/Settings/integrations/Organization/ConnectOrganization.tsx b/src/components/Settings/integrations/Organization/ConnectOrganization.tsx index 0950184cbc..0e35c40c2e 100644 --- a/src/components/Settings/integrations/Organization/ConnectOrganization.tsx +++ b/src/components/Settings/integrations/Organization/ConnectOrganization.tsx @@ -17,6 +17,7 @@ import { useTranslation } from 'react-i18next'; import { FieldWrapper } from 'src/components/Shared/Forms/FieldWrapper'; import useGetAppSettings from 'src/hooks/useGetAppSettings'; import { clearDataDogUser } from 'src/lib/dataDog'; +import { articles } from 'src/lib/helpjuice'; import theme from 'src/theme'; import { useOauthUrl } from '../useOauthUrl'; import { @@ -173,6 +174,15 @@ export const ConnectOrganization: React.FC = ({ )} /> + {!selectedOrganization && + articles.HELP_URL_SETUP_FIND_ORGANIZATION && ( + + )} {organizationType === OrganizationTypesEnum.MINISTRY && (