[Feat] Add employee profile page

apps/web/src/components/Router.tsx

@@ -231,6 +231,11 @@ const createRoute = (locale: Locales) =>
                       "../pages/Notifications/NotificationsPage/NotificationsPage"
                     ),
                 },
+                {
+                  path: "employee-profile",
+                  lazy: () =>
+                    import("../pages/EmployeeProfile/EmployeeProfilePage"),
+                },
                 {
                   path: "personal-information",
                   lazy: () =>

apps/web/src/hooks/useRoutes.ts

@@ -283,6 +283,9 @@ const getRoutes = (lang: Locales) => {
       );
     },
 
+    // Employee profile
+    employeeProfile: () => `${applicantUrl}/employee-profile`,
+
     skillPortfolio: () => [applicantUrl, "skills"].join("/"),
     skillShowcase: () => [showcase].join("/"),
     editUserSkill: (skillId: string) =>

apps/web/src/lang/fr.json

@@ -87,6 +87,10 @@
     "defaultMessage": "Sélectionnez la capacité linguistique de travail dont le candidat a besoin pour ce poste. La capacité linguistique sélectionnée sera comparée à celle choisie par les candidats dans leur demande. À noter, les candidats qui ont sélectionné Bilingue peuvent ne pas avoir des résultats d’évaluation de langue seconde du gouvernement du Canada.",
     "description": "Message describing the work language ability filter in the search form."
   },
+  "+RDFZH": {
+    "defaultMessage": "Gérez vos renseignements d’employée ou d’employé du gouvernement, y compris vos préférences en matière de développement de carrière et les façons de travailler.",
+    "description": "Description of the employee profile page"
+  },
   "+SoiCw": {
     "defaultMessage": "Endroits exclus",
     "description": "Location specifics label"
@@ -1631,6 +1635,10 @@
     "defaultMessage": "Vos options en matière d'équité",
     "description": "Title for the subsection for viewing/selecting employment equity"
   },
+  "6KS1jD": {
+    "defaultMessage": "Nous aimerions en savoir plus sur le cheminement de carrière que vous souhaitez suivre. Fournir des renseignements sur vos préférences et vos aspirations aidera les gestionnaires de talents à prendre des décisions plus éclairées dans le cadre d'une promotion, d'une mutation latérale ou d'une occasion de perfectionnement professionnel.",
+    "description": "Lead-in text explaining the users career plan"
+  },
   "6Q1N7Z": {
     "defaultMessage": "Veuillez sélectionner les expériences dans :",
     "description": "Message before skills list in application education page."
@@ -8518,6 +8526,10 @@
     "defaultMessage": "Le Programme s’adresse aux Premières Nations, aux Inuits et aux Métis. Si vous êtes un membre des Premières Nations, un Inuit ou un Métis et que vous avez une passion pour la technologie, ce programme est pour vous!",
     "description": "First paragraph about who the program is for"
   },
+  "f1reMg": {
+    "defaultMessage": "Poste de rêve",
+    "description": "Title for a users dream role information"
+  },
   "f3KZGn": {
     "defaultMessage": "Les cercles de partage, l’accès à un·e conseiller·ère en soutien à la formation en TI et les facilitateurs·trices de réussite pour les apprenti·es sont autant de soutiens supplémentaires. Si les facilitateurs·trices sont avant tout une ressource pour les apprenti·es, ils, elles constituent également un système de soutien pour les gestionnaires et les superviseur·es.",
     "description": "Paragraph 2 of the 'Circle of Support' subsection"
@@ -10542,6 +10554,10 @@
     "defaultMessage": "Si vous avez déjà un compte de CléGC, vous pouvez ouvrir une session dans votre profil sur la plateforme Talents numériques du GC à l'aide de votre CléGC, même si vous n'avez jamais utilisé cette plateforme avant. Si vous ne savez pas si vous avez déjà un compte de CléGC, continuez vers le site Web et essayez d'ouvrir une session. Si vous ne vous souvenez pas de votre mot de passe, c'est là que vous pourrez aussi le réinitialiser.",
     "description": "GCKey answer for when user already has an account"
   },
+  "okKbgd": {
+    "defaultMessage": "Préférences en matière de développement de carrière",
+    "description": "Title for a users career development preferences"
+  },
   "okRYhl": {
     "defaultMessage": "Ce que nous entendons",
     "description": "Title of a quotes section"
@@ -10922,6 +10938,10 @@
     "defaultMessage": "Processus dupliqué avec succès!",
     "description": "Message displayed to user after pool is duplicated"
   },
+  "qZKabV": {
+    "defaultMessage": "Objectifs et style de travail",
+    "description": "Title for a users goals and work style"
+  },
   "qek0N+": {
     "defaultMessage": "Bienvenue dans votre panneau de notification. Cliquez ou activez une notification pour accéder à la page concernée. Chaque notification peut être marquée comme lue ou supprimée.",
     "description": "Instructions on how to manage notifications"
@@ -11470,6 +11490,10 @@
     "defaultMessage": "50 000 $ à 1 million de dollars",
     "description": "Contract value range between fifty-thousand and one-million"
   },
+  "u+lXsz": {
+    "defaultMessage": "Votre profil d'employée ou d'employé",
+    "description": "Page title for a users employee profile"
+  },
   "u3CPra": {
     "defaultMessage": "Recevoir une notification lorsqu'un nouvel emploi est publié sur la plateforme.",
     "description": "Subtitle for job alerts checklist"
@@ -12414,6 +12438,10 @@
     "defaultMessage": "Veuillez ne pas fournir des renseignements personnels supplémentaires qui ne sont pas requis à cette fin.",
     "description": "Paragraph for privacy policy page"
   },
+  "zN7MBv": {
+    "defaultMessage": "Planification de carrière",
+    "description": "Title for a users career plan"
+  },
   "zNgDex": {
     "defaultMessage": "Zone de sélection",
     "description": "Label for a process' area of selection"

apps/web/src/pages/EmployeeProfile/EmployeeProfilePage.tsx

@@ -0,0 +1,219 @@
+import { useIntl } from "react-intl";
+import { useQuery } from "urql";
+import ChartBarSquareIcon from "@heroicons/react/24/outline/ChartBarSquareIcon";
+
+import { navigationMessages } from "@gc-digital-talent/i18n";
+import { FragmentType, getFragment, graphql } from "@gc-digital-talent/graphql";
+import {
+  Heading,
+  Pending,
+  TableOfContents,
+  ThrowNotFound,
+} from "@gc-digital-talent/ui";
+import { ROLE_NAME } from "@gc-digital-talent/auth";
+import { UnauthorizedError } from "@gc-digital-talent/helpers";
+
+import Hero from "~/components/Hero";
+import SEO from "~/components/SEO/SEO";
+import useBreadcrumbs from "~/hooks/useBreadcrumbs";
+import useRoutes from "~/hooks/useRoutes";
+import RequireAuth from "~/components/RequireAuth/RequireAuth";
+import { isVerifiedGovEmployee } from "~/utils/userUtils";
+import profileMessages from "~/messages/profileMessages";
+import StatusItem from "~/components/StatusItem/StatusItem";
+
+import messages from "./messages";
+
+const SECTION_ID = {
+  CAREER_PLANNING: "career-planning-section",
+  CAREER_DEVELOPMENT: "career-development-section",
+  DREAM_ROLE: "dream-role-section",
+  GOALS_WORK_STYLE: "goals-work-style-section",
+};
+
+const EmployeeProfile_Fragment = graphql(/** GraphQL */ `
+  fragment EmployeeProfile on User {
+    isGovEmployee
+    workEmail
+    isWorkEmailVerified
+  }
+`);
+
+interface EmployeeProfileProps {
+  userQuery: FragmentType<typeof EmployeeProfile_Fragment>;
+}
+
+const EmployeeProfile = ({ userQuery }: EmployeeProfileProps) => {
+  const intl = useIntl();
+  const paths = useRoutes();
+  const user = getFragment(EmployeeProfile_Fragment, userQuery);
+  const { isGovEmployee, workEmail, isWorkEmailVerified } = user;
+
+  if (
+    !isVerifiedGovEmployee({ isGovEmployee, workEmail, isWorkEmailVerified })
+  ) {
+    throw new UnauthorizedError(
+      intl.formatMessage({
+        defaultMessage: "Not a verified employee",
+        id: "Ljv0T9",
+        description: "Error message for unauthorized employee access",
+      }),
+    );
+  }
+
+  const pageTitle = intl.formatMessage({
+    defaultMessage: "Your employee profile",
+    id: "u+lXsz",
+    description: "Page title for a users employee profile",
+  });
+
+  const subtitle = intl.formatMessage({
+    defaultMessage:
+      "Manage your government employee information, including career development preferences and work styles.",
+    id: "+RDFZH",
+    description: "Description of the employee profile page",
+  });
+
+  const crumbs = useBreadcrumbs({
+    crumbs: [
+      {
+        label: intl.formatMessage(navigationMessages.profileAndApplications),
+        url: paths.profileAndApplications(),
+      },
+      {
+        url: paths.employeeProfile(),
+        label: intl.formatMessage({
+          defaultMessage: "Employee profile",
+          id: "FThj7q",
+          description: "Short title for a users employee profile",
+        }),
+      },
+    ],
+  });
+
+  return (
+    <>
+      <SEO title={pageTitle} description={subtitle} />
+      <Hero title={pageTitle} subtitle={subtitle} crumbs={crumbs} />
+      <div data-h2-wrapper="base(center, large, x1) p-tablet(center, large, x2)">
+        <TableOfContents.Wrapper data-h2-padding-top="base(x3)">
+          <TableOfContents.Navigation>
+            <TableOfContents.List
+              data-h2-padding-left="base(x.5)"
+              data-h2-list-style-type="base(none)"
+            >
+              <TableOfContents.ListItem>
+                <StatusItem
+                  asListItem={false}
+                  title={intl.formatMessage(messages.careerPlanning)}
+                  status="success"
+                  scrollTo={SECTION_ID.CAREER_PLANNING}
+                />
+                <TableOfContents.List
+                  data-h2-padding-left="base(x.5)"
+                  data-h2-list-style-type="base(none)"
+                >
+                  <TableOfContents.ListItem>
+                    <StatusItem
+                      asListItem={false}
+                      title={intl.formatMessage(messages.careerDevelopment)}
+                      status="success"
+                      scrollTo={SECTION_ID.CAREER_DEVELOPMENT}
+                    />
+                  </TableOfContents.ListItem>
+                  <TableOfContents.ListItem>
+                    <StatusItem
+                      asListItem={false}
+                      title={intl.formatMessage(messages.dreamRole)}
+                      status="success"
+                      scrollTo={SECTION_ID.DREAM_ROLE}
+                    />
+                  </TableOfContents.ListItem>
+                  <TableOfContents.ListItem>
+                    <StatusItem
+                      asListItem={false}
+                      title={intl.formatMessage(messages.goalsWorkStyle)}
+                      status="success"
+                      scrollTo={SECTION_ID.GOALS_WORK_STYLE}
+                    />
+                  </TableOfContents.ListItem>
+                </TableOfContents.List>
+              </TableOfContents.ListItem>
+            </TableOfContents.List>
+          </TableOfContents.Navigation>
+          <TableOfContents.Content>
+            <div
+              data-h2-display="base(flex)"
+              data-h2-flex-direction="base(column)"
+              data-h2-gap="base(x3 0)"
+            >
+              <TableOfContents.Section id={SECTION_ID.CAREER_PLANNING}>
+                <Heading
+                  level="h2"
+                  Icon={ChartBarSquareIcon}
+                  color="secondary"
+                  data-h2-margin-top="base(0)"
+                >
+                  {intl.formatMessage(messages.careerPlanning)}
+                </Heading>
+                <p>
+                  {intl.formatMessage({
+                    defaultMessage:
+                      "We'd like to learn more about the career path you'd like to follow. Providing information about preferences and aspirations will help talent managers make more informed decisions when you've been nominated for a promotion, lateral movement, or professional development opportunity.",
+                    id: "6KS1jD",
+                    description:
+                      "Lead-in text explaining the users career plan",
+                  })}
+                </p>
+              </TableOfContents.Section>
+              <TableOfContents.Section
+                id={SECTION_ID.CAREER_DEVELOPMENT}
+              ></TableOfContents.Section>
+              <TableOfContents.Section
+                id={SECTION_ID.DREAM_ROLE}
+              ></TableOfContents.Section>
+              <TableOfContents.Section
+                id={SECTION_ID.GOALS_WORK_STYLE}
+              ></TableOfContents.Section>
+            </div>
+          </TableOfContents.Content>
+        </TableOfContents.Wrapper>
+      </div>
+    </>
+  );
+};
+
+const EmployeeProfilePage_Query = graphql(/** GraphQL */ `
+  query EmployeeProfilePage {
+    me {
+      ...EmployeeProfile
+    }
+  }
+`);
+
+const EmployeeProfilePage = () => {
+  const intl = useIntl();
+  const [{ data, fetching, error }] = useQuery({
+    query: EmployeeProfilePage_Query,
+  });
+
+  return (
+    <Pending fetching={fetching} error={error}>
+      {data?.me ? (
+        <EmployeeProfile userQuery={data.me} />
+      ) : (
+        <ThrowNotFound
+          message={intl.formatMessage(profileMessages.userNotFound)}
+        />
+      )}
+    </Pending>
+  );
+};
+
+export const Component = () => (
+  <RequireAuth roles={[ROLE_NAME.Applicant]}>
+    <EmployeeProfilePage />
+  </RequireAuth>
+);
+
+Component.displayName = "EmployeeProfilePage";

apps/web/src/pages/EmployeeProfile/messages.ts

@@ -0,0 +1,24 @@
+import { defineMessages } from "react-intl";
+
+export default defineMessages({
+  careerPlanning: {
+    defaultMessage: "Career planning",
+    id: "zN7MBv",
+    description: "Title for a users career plan",
+  },
+  careerDevelopment: {
+    defaultMessage: "Career development preferences",
+    id: "okKbgd",
+    description: "Title for a users career development preferences",
+  },
+  dreamRole: {
+    defaultMessage: "Dream role",
+    id: "f1reMg",
+    description: "Title for a users dream role information",
+  },
+  goalsWorkStyle: {
+    defaultMessage: "Goals and work style",
+    id: "qZKabV",
+    description: "Title for a users goals and work style",
+  },
+});

apps/web/src/utils/userUtils.ts

@@ -145,3 +145,17 @@ export const formatLocation = ({
 
   return intl.formatMessage(commonMessages.notProvided);
 };
+
+interface IsVerifiedGovEmployeeArgs {
+  isGovEmployee?: Maybe<boolean>;
+  workEmail?: Maybe<string>;
+  isWorkEmailVerified?: Maybe<boolean>;
+}
+
+export const isVerifiedGovEmployee = ({
+  isGovEmployee,
+  workEmail,
+  isWorkEmailVerified,
+}: IsVerifiedGovEmployeeArgs): boolean => {
+  return Boolean(isGovEmployee && workEmail && isWorkEmailVerified);
+};