feat: add login help page

Author: hinzed1127

api/src/cms-integrity-tests/contextualInfoLinks.test.ts

@@ -20,7 +20,7 @@ const composeErrorMessage = (numberOfExpectedCollections: number): string => {
   return `We expected ${numberOfExpectedCollections} number of collections in our CMS. You have likely added a new collection to the CMS and now must add to the Contextual Info Search tool to make sure any contextual info links that may ever be used in that new collection can be caught. Look at contextualInfoLinks.ts and the files in shared/lib/search for more details`;
 };
 
-const expectedNumberofCollections = 11;
+const expectedNumberofCollections = 12;
 
 describe("ContextualInfoLinks", () => {
   describe("findMatchingContextualInfo", () => {

content/src/fieldConfig/login-support-page.json

@@ -0,0 +1,46 @@
+{
+  "loginSupportPage": {
+    "pageTitle": "Having trouble logging in to Business.NJ.gov?",
+    "lastUpdated": "Nov 5, 2025",
+    "multipleAccountsCallout": ":::miniCallout{ calloutType=\"informational\" }\n**If you have multiple myNewJersey accounts, use the email linked to your business.**\n:::",
+    "myNewJerseyIntroContent": "You need a myNewJersey account to log in to [account.Business.NJ.gov](/). myNewJersey is a platform used by different government agencies in New Jersey.\n\nTo link your myNewJersey account to account.business.nj.gov:\n\n",
+    "steps": [
+      {
+        "content": "Make sure you're logged out of all other MyNJ accounts across your browser."
+      },
+      {
+        "content": "Open an incognito browser."
+      },
+      {
+        "content": "Go to [https://account.business.nj.gov/](/) and click on the \"Get Started\" button.",
+        "imagePath": "/img/login-support-home-login.png",
+        "imageAlt": "Screenshot showing the Get Started button on the Business.NJ.gov homepage"
+      },
+      {
+        "content": "Answer the \"Tell us about your business\" question and click \"Next.\""
+      },
+      {
+        "content": "Once you're on the dashboard, click on the link in the purple card on the right side of your screen.",
+        "imagePath": "/img/login-support-dashboard-login.png",
+        "imageAlt": "Screenshot showing the purple card with the link to create and link myNewJersey account on the dashboard"
+      },
+      {
+        "content": "Fill out the email information on the next screen, then click \"Create and Link myNewJersey Account.\" Clicking this link will take you to our partner site, https://my.nj.gov.",
+        "imagePath": "/img/login-support-link-login.png",
+        "imageAlt": "Screenshot showing the Create and Link myNewJersey Account form with email fields"
+      },
+      {
+        "content": "Follow the prompts to link your existing myNewJersey account. If you have not created an account through myNewJersey yet, create one now.",
+        "imagePath": "/img/login-support-mynj-login.png",
+        "imageAlt": "Screenshot of the myNewJersey login page with options to create an account or link an existing one"
+      }
+    ],
+    "logoutIfStillHavingTrouble": "If you're still having trouble, ~~logoutButton~~ to reset your session on [account.business.nj.gov](https://account.business.nj.gov), and repeat the steps above.",
+    "logoutButtonText": "log out",
+    "supportCallout": {
+      "header": "Dedicated Business Experts ready to help",
+      "body": "Still having issues? Chat with a business advocate based in New Jersey.",
+      "buttonText": "Start a Live Chat"
+    }
+  }
+}

shared/src/contexts/configContext.ts

@@ -28,6 +28,7 @@ import * as DashboardTabs from "../../../content/src/fieldConfig/dashboard-tabs.
 import * as DeferredLocation from "../../../content/src/fieldConfig/deferred-location.json";
 import * as Ein from "../../../content/src/fieldConfig/ein.json";
 import * as ElevatorRegistration from "../../../content/src/fieldConfig/elevator-registration.json";
+import * as EmployerRates from "../../../content/src/fieldConfig/employer-rates.json";
 import * as EnvironmentQuestionnaire from "../../../content/src/fieldConfig/env-questionnaire.json";
 import * as FilingDefaults from "../../../content/src/fieldConfig/filing-defaults.json";
 import * as Footer from "../../../content/src/fieldConfig/footer.json";
@@ -44,6 +45,7 @@ import * as LandingPageExperienceB from "../../../content/src/fieldConfig/landin
 import * as LandingPage from "../../../content/src/fieldConfig/landing-page.json";
 import * as LegalMessageDefaults from "../../../content/src/fieldConfig/legal-message-defaults.json";
 import * as LicenseSearchTask from "../../../content/src/fieldConfig/license-search-task.json";
+import * as LoginSupportPage from "../../../content/src/fieldConfig/login-support-page.json";
 import * as ManageBusinessVehicles from "../../../content/src/fieldConfig/manage-business-vehicles.json";
 import * as NaicsCode from "../../../content/src/fieldConfig/naics-code.json";
 import * as NavigationDefaults from "../../../content/src/fieldConfig/navigation-defaults.json";
@@ -78,7 +80,6 @@ import * as XrayRegistration from "../../../content/src/fieldConfig/xray-registr
 import * as XrayRenewal from "../../../content/src/fieldConfig/xray-renewal.json";
 import * as CalloutAlerts from "../../../content/src/mappings/callout-alerts.json";
 import * as PageMetadata from "../../../content/src/page-metadata/page-metadata.json";
-import * as EmployerRates from "../../../content/src/fieldConfig/employer-rates.json";
 
 import { merge } from "lodash";
 import { createContext } from "react";
@@ -170,6 +171,7 @@ const merged = JSON.parse(
       FormationDataDeletionModal,
       EmployerRates,
       RemoveBusinessModal,
+      LoginSupportPage,
     ),
   ),
 );
@@ -254,7 +256,8 @@ export type ConfigType = typeof LegalMessageDefaults &
   typeof FilingDefaults &
   typeof FormationDataDeletionModal &
   typeof EmployerRates &
-  typeof RemoveBusinessModal;
+  typeof RemoveBusinessModal &
+  typeof LoginSupportPage;
 
 export const getMergedConfig = (): ConfigType => {
   return merge(
@@ -338,6 +341,7 @@ export const getMergedConfig = (): ConfigType => {
     FilingDefaults,
     FormationDataDeletionModal,
     RemoveBusinessModal,
+    LoginSupportPage,
   );
 };
 

shared/src/lib/search/cmsCollections.ts

@@ -109,4 +109,8 @@ export const cmsCollections = [
       "Formation Date Deletion Modal",
     ],
   },
+  {
+    label: "ℹ️ SUPPORT",
+    children: ["Login Support Page"],
+  },
 ];

web/decap-config/collections/13-support.yml

@@ -0,0 +1,63 @@
+collections:
+  - name: "support-label"
+    label: "ℹ️ SUPPORT"
+    folder: "content/src"
+    fields:
+      - { name: "" }
+
+  - name: "login-support-page"
+    label: "Login Support Page"
+    delete: false
+    create: false
+    files:
+      - label: "Login Support Page"
+        name: "login-support-page"
+        file: "content/src/fieldConfig/login-support-page.json"
+        editor:
+          preview: true
+        fields:
+          - label: "Login Support Page"
+            name: loginSupportPage
+            collapsed: false
+            widget: object
+            fields:
+              - { label: "Page Title", name: "pageTitle", widget: "string" }
+              - { label: "Last Updated Date", name: "lastUpdated", widget: "string" }
+              - {
+                  label: "Multiple Accounts Callout",
+                  name: "multipleAccountsCallout",
+                  widget: markdown,
+                }
+              - {
+                  label: "myNewJersey Intro Content",
+                  name: "myNewJerseyIntroContent",
+                  widget: "string",
+                }
+              - label: "Steps"
+                name: "steps"
+                widget: list
+                fields:
+                  - { label: "Step Content (Markdown)", name: "content", widget: "markdown" }
+                  - {
+                      label: "Image Path (e.g., /img/login-support-home-login.png)",
+                      name: "imagePath",
+                      widget: "string",
+                      required: false,
+                    }
+                  - { label: "Image Alt Text", name: "imageAlt", widget: "string", required: false }
+              - {
+                  label: "Logout If Still Having Trouble",
+                  name: "logoutIfStillHavingTrouble",
+                  widget: "string",
+                  hint:
+                    "This field is conditionally rendered. It will only display when a user is
+                    detected to be logged in.",
+                }
+              - { label: "Logout Button Text", name: "logoutButtonText", widget: "string" }
+              - label: "Support Callout"
+                name: "supportCallout"
+                widget: object
+                fields:
+                  - { label: "Header", name: "header", widget: "string" }
+                  - { label: "Body Text", name: "body", widget: "string" }
+                  - { label: "Button Text", name: "buttonText", widget: "string" }

web/public/img/login-support-dashboard-login.png

@@ -24,6 +24,7 @@ interface ContentProps {
   overrides?: { [key: string]: { ({ children }: { children: string[] }): ReactElement } };
   onClick?: (url?: string) => void;
   customComponents?: Record<string, ReactElement>;
+  showLaunchIcon?: boolean;
 }
 
 export const Content = (props: ContentProps): ReactNode => {
@@ -38,7 +39,7 @@ export const Content = (props: ContentProps): ReactNode => {
           return <>{`\`${props.children}\``}</>;
         }
       : ContextualInfoLink,
-    a: Link(props.onClick),
+    a: Link(props.onClick, props.showLaunchIcon ?? true),
     h2: (props: any): ReactElement => {
       return (
         <Heading level={2} style={{ marginTop: "1rem" }}>
@@ -104,7 +105,7 @@ export const Content = (props: ContentProps): ReactNode => {
   );
 };
 
-const Link = (onClick?: (url?: string) => void): any => {
+const Link = (onClick?: (url?: string) => void, showLaunchIcon?: boolean): any => {
   return Object.assign(
     (props: any): ReactElement => {
       const childrenContent =
@@ -122,6 +123,7 @@ const Link = (onClick?: (url?: string) => void): any => {
             href={props.href}
             id={props.title}
             onClick={(): void => onClick && onClick(props.href)}
+            showLaunchIcon={showLaunchIcon}
           >
             {linkText}
           </ExternalLink>
@@ -146,11 +148,13 @@ export const ExternalLink = ({
   href,
   onClick,
   id,
+  showLaunchIcon = true,
 }: {
   children: string;
   href: string;
   onClick?: (url?: string) => void;
   id?: string;
+  showLaunchIcon?: boolean;
 }): ReactElement => {
   return (
     <a
@@ -166,7 +170,7 @@ export const ExternalLink = ({
       }}
     >
       {children}
-      <Icon iconName="launch" />
+      {showLaunchIcon && <Icon iconName="launch" />}
     </a>
   );
 };