[Publisher] Update Help Center Guide for New Settings Page (#1338)

* Update Help Center screenshots, copy and links to new Settings Page

* File name adjustment

* Typo fix

---------

Co-authored-by: Mahmoud <mahmoud@Mahmouds-MacBook-Pro.local>

publisher/src/components/HelpCenter/Guides/AgencySettingsGuide.tsx → publisher/src/components/HelpCenter/Guides/SettingsGuide.tsx

@@ -18,45 +18,42 @@
 import React from "react";
 
 import jurisdictionsScreenshot from "../../assets/hc-agency-settings-jurisdiction-screenshot.png";
-import agencySettingsPageScreenshot from "../../assets/hc-agency-settings-page-screenshot.png";
+import settingsPageScreenshot from "../../assets/hc-settings-page-screenshot.png";
 import * as Styled from "../HelpCenter.styles";
 import { LinkToPublisher } from "../LinkToPublisherDashboard";
 
-export const AgencySettingsGuide = () => (
+export const SettingsGuide = () => (
   <>
     <Styled.SectionWrapper>
       <Styled.ImageWrapper>
-        <Styled.Image
-          src={agencySettingsPageScreenshot}
-          alt=""
-          align="center"
-        />
+        <Styled.Image src={settingsPageScreenshot} alt="" align="center" />
       </Styled.ImageWrapper>
       <Styled.SectionParagraph>
-        To access, select Agency Settings from the dropdown on the top right
-        corner.
+        To access, select Settings from the dropdown on the top right corner.
       </Styled.SectionParagraph>
     </Styled.SectionWrapper>
 
     <Styled.SectionWrapper>
       <Styled.SectionParagraph>
         Within{" "}
-        <LinkToPublisher publisherPath="settings/agency-settings">
-          Agency Settings
-        </LinkToPublisher>{" "}
-        you can update:
+        <LinkToPublisher publisherPath="settings">Settings</LinkToPublisher> you
+        can update:
         <ul>
           <li>Agency Users</li>
           <li>Agency Description</li>
           <li>Agency URL</li>
+          <li>Email Reminders</li>
           <li>Jurisdictions covered by your agency</li>
+          <li>
+            Supervision populations covered by your agency (if applicable)
+          </li>
         </ul>
       </Styled.SectionParagraph>
     </Styled.SectionWrapper>
 
     <Styled.SectionWrapper>
       <Styled.SectionParagraph>
-        When setting jurisdiction, you can specify areas that are included and
+        When setting jurisdictions, you can specify areas that are included and
         excluded.
       </Styled.SectionParagraph>
       <Styled.ImageWrapper>
@@ -67,8 +64,8 @@ export const AgencySettingsGuide = () => (
     <Styled.SectionWrapper>
       <Styled.SectionParagraph>
         Some users may also have the ability to add new users to the agency, by
-        specifying the name and email address. If you need to update your agency
-        name, state, or sector, please contact{" "}
+        specifying the name and email address via the Team Members tab. If you
+        need to update your agency name, state, or sector, please contact{" "}
         <a
           href="mailto:justice-counts-support@csg.org"
           target="_blank"

publisher/src/components/HelpCenter/Guides/SupervisionDisaggregationGuide.tsx

@@ -37,11 +37,9 @@ export const SupervisionDisaggregationGuide = () => (
         <ul>
           <li>
             Navigate to{" "}
-            <LinkToPublisher publisherPath="settings/agency-settings">
-              Agency Settings
-            </LinkToPublisher>{" "}
+            <LinkToPublisher publisherPath="settings">Settings</LinkToPublisher>{" "}
             by clicking the icon in the top right corner and selecting{" "}
-            <strong>Agency Settings</strong> from the dropdown.
+            <strong>Settings</strong> from the dropdown.
           </li>
           <li>
             Scroll down to <strong>Supervision Populations</strong> and click{" "}
@@ -89,9 +87,7 @@ export const SupervisionDisaggregationGuide = () => (
         <ol>
           <li>
             Specify which supervision populations your agency oversees in{" "}
-            <LinkToPublisher publisherPath="settings/agency-settings">
-              Agency Settings
-            </LinkToPublisher>
+            <LinkToPublisher publisherPath="settings">Settings</LinkToPublisher>
             . If you don’t distinguish between different supervision
             populations, don’t select any of the options.
           </li>

publisher/src/components/HelpCenter/HelpCenterSetup.tsx

@@ -18,7 +18,7 @@
 import React from "react";
 import { Route } from "react-router-dom";
 
-import { ReactComponent as AgencySettingsIcon } from "../assets/hc-agency-settings-icon.svg";
+import { ReactComponent as SettingsIcon } from "../assets/hc-agency-settings-icon.svg";
 import { ReactComponent as AutomatedBulkUploadIcon } from "../assets/hc-automated-bulk-upload-icon.svg";
 import { ReactComponent as BulkUploadIcon } from "../assets/hc-bulk-upload-icon.svg";
 import dashboardThumbnail from "../assets/hc-dashboard-help-guide-thumbnail.png";
@@ -28,12 +28,12 @@ import publisherThumbnail from "../assets/hc-publisher-help-guide-thumbnail.png"
 import { ReactComponent as SetUpMetricsIcon } from "../assets/hc-set-up-metrics-icon.svg";
 import { ReactComponent as SuperagenciesIcon } from "../assets/hc-superagencies-icon.svg";
 import { ReactComponent as SupervisionDisaggregationsIcon } from "../assets/hc-supervision-disaggregations-icon.svg";
-import { AgencySettingsGuide } from "./Guides/AgencySettingsGuide";
 import { AutomatedBulkUploadGuide } from "./Guides/AutomaticBulkUploadGuide";
 import { BulkUploadGuide } from "./Guides/BulkUploadGuide";
 import { DashboardsGuide } from "./Guides/DashboardsGuide";
 import { ExploreDataGuide } from "./Guides/ExploreDataGuide";
 import { ManualEntryGuide } from "./Guides/ManualEntryGuide";
+import { SettingsGuide } from "./Guides/SettingsGuide";
 import { SetUpMetricsGuide } from "./Guides/SetUpMetricsGuide";
 import { SuperagenciesGuide } from "./Guides/SuperagenciesGuide";
 import { SupervisionDisaggregationGuide } from "./Guides/SupervisionDisaggregationGuide";
@@ -63,13 +63,13 @@ export const helpCenterGuideStructure: HelpCenterGuideStructure = {
         icon: <ExploreDataIcon />,
         relevantGuides: ["dashboard/dashboards"],
       },
-      [GuideKeys.AgencySettings]: {
+      [GuideKeys.Settings]: {
         category: GuideCategories.AccountSetup,
-        title: "Agency Settings",
-        caption: "See and edit information about your agency",
-        path: "agency-settings",
-        element: <AgencySettingsGuide />,
-        icon: <AgencySettingsIcon />,
+        title: "Settings",
+        caption: "See and edit information about your account and agency",
+        path: "settings",
+        element: <SettingsGuide />,
+        icon: <SettingsIcon />,
         relevantGuides: ["set-up-metrics"],
       },
       [GuideKeys.SetUpMetrics]: {
@@ -80,7 +80,7 @@ export const helpCenterGuideStructure: HelpCenterGuideStructure = {
         path: "set-up-metrics",
         element: <SetUpMetricsGuide />,
         icon: <SetUpMetricsIcon />,
-        relevantGuides: ["agency-settings"],
+        relevantGuides: ["settings"],
       },
       [GuideKeys.ManualEntry]: {
         category: GuideCategories.AddData,

publisher/src/components/HelpCenter/types.ts

@@ -30,7 +30,7 @@ export enum GuideCategories {
 
 export enum GuideKeys {
   ExploreData = "explore-data",
-  AgencySettings = "agency-settings",
+  Settings = "settings",
   SetUpMetrics = "set-up-metrics",
   ManualEntry = "manual-entry",
   BulkUpload = "bulk-upload",

publisher/src/components/Home/Home.tsx

@@ -154,11 +154,9 @@ export const Home = observer(() => {
 
         {/* Submenu */}
         <Styled.Submenu>
-          <Styled.SubmenuItem
-            onClick={() => navigate("./settings/agency-settings")}
-          >
+          <Styled.SubmenuItem onClick={() => navigate("./settings")}>
             <GearIcon />
-            Agency Settings
+            Settings
           </Styled.SubmenuItem>
           <Styled.SubmenuItem
             href="https://justicecounts.csgjusticecenter.org/"

publisher/src/pages/Settings.tsx

@@ -40,7 +40,7 @@ enum tabOptions {
 const Settings = () => {
   const learnMoreURL = createURLToGuide(
     AppGuideKeys.publisher,
-    GuideKeys.AgencySettings
+    GuideKeys.Settings
   );
   const [currentSettingsView, setCurrentSettingsView] = useState(
     tabOptions.ACCOUNT