[MCR-3547] Add view for adding a mccrs record number

services/app-web/src/components/Header/PageHeadingRow/PageHeadingRow.tsx

@@ -18,7 +18,7 @@ const CMSUserRow = ({
     heading,
 }: {
     user: CmsUser | AdminUser | HelpdeskUser | BusinessOwnerUser
-    heading?: string
+    heading?: string | React.ReactElement
 }) => {
     return (
         <div className={styles.dashboardHeading}>
@@ -46,7 +46,7 @@ const StateUserRow = ({
     heading,
 }: {
     user: StateUser
-    heading?: string
+    heading?: string | React.ReactElement
 }) => {
     return (
         <div className={styles.dashboardHeading}>
@@ -99,7 +99,7 @@ const LandingRow = ({ isLoading }: { isLoading: boolean }) => {
 type PageHeadingProps = {
     isLoading?: boolean
     loggedInUser?: User
-    heading?: string
+    heading?: string | React.ReactElement
     route?: string
 }
 

services/app-web/src/components/SectionHeader/SectionHeader.module.scss

@@ -12,6 +12,16 @@
     align-items: center;
     padding-bottom: units(1);
     min-height: 3rem;
+
+    &.alignTop {
+        align-items: start;
+    }
+
+    a {
+        display: block;
+        margin-top: 17.5px;
+        padding-bottom: units(1);
+    } 
 }
 
 .summarySectionHeaderBorder {

services/app-web/src/components/SectionHeader/SectionHeader.tsx

@@ -7,13 +7,15 @@ export type SectionHeaderProps = {
     header: string
     navigateTo?: string
     children?: React.ReactNode
+    subHeaderComponent?: React.ReactNode
     sectionId?: string
     headerId?: string
     hideBorder?: boolean
 }
 
 export const SectionHeader = ({
     header,
+    subHeaderComponent,
     navigateTo,
     children,
     sectionId,
@@ -23,10 +25,14 @@ export const SectionHeader = ({
     const classes = classNames({
         [styles.summarySectionHeader]: true,
         [styles.summarySectionHeaderBorder]: !hideBorder,
+        [styles.alignTop]: subHeaderComponent,
     })
     return (
         <div className={classes} id={sectionId}>
-            <h2 id={headerId}>{header}</h2>
+            <div>
+                <h2 id={headerId}>{header}</h2>
+                {subHeaderComponent}
+            </div>
             <div>
                 {navigateTo && (
                     <Link

services/app-web/src/components/SubmissionSummarySection/SubmissionTypeSummarySection/SubmissionTypeSummarySection.tsx

@@ -19,6 +19,7 @@ export type SubmissionTypeSummarySectionProps = {
     statePrograms: Program[]
     navigateTo?: string
     headerChildComponent?: React.ReactElement
+    subHeaderComponent?: React.ReactElement
     initiallySubmittedAt?: Date
     submissionName: string
 }
@@ -27,6 +28,7 @@ export const SubmissionTypeSummarySection = ({
     submission,
     statePrograms,
     navigateTo,
+    subHeaderComponent,
     headerChildComponent,
     initiallySubmittedAt,
     submissionName,
@@ -41,6 +43,7 @@ export const SubmissionTypeSummarySection = ({
         <section id="submissionTypeSection" className={styles.summarySection}>
             <SectionHeader
                 header={submissionName}
+                subHeaderComponent={subHeaderComponent}
                 navigateTo={navigateTo}
                 headerId={'submissionName'}
             >

services/app-web/src/constants/routes.ts

@@ -24,6 +24,7 @@ const ROUTES = [
     'SUBMISSIONS_REVIEW_SUBMIT',
     'SUBMISSIONS_REVISION',
     'SUBMISSIONS_SUMMARY',
+    'SUBMISSIONS_MCCRSID',
     'SUBMISSIONS_QUESTIONS_AND_ANSWERS',
     'SUBMISSIONS_UPLOAD_QUESTION',
     'SUBMISSIONS_UPLOAD_RESPONSE',
@@ -58,6 +59,7 @@ const RoutesRecord: Record<RouteT, string> = {
     SUBMISSIONS_DOCUMENTS: '/submissions/:id/edit/documents',
     SUBMISSIONS_REVIEW_SUBMIT: '/submissions/:id/edit/review-and-submit',
     SUBMISSIONS_SUMMARY: '/submissions/:id',
+    SUBMISSIONS_MCCRSID: '/submissions/:id/mccrs-record-number',
     SUBMISSIONS_REVISION: '/submissions/:id/revisions/:revisionVersion',
     SUBMISSIONS_QUESTIONS_AND_ANSWERS: '/submissions/:id/question-and-answers',
     SUBMISSIONS_UPLOAD_QUESTION:
@@ -131,6 +133,7 @@ const PageTitlesRecord: Record<RouteT | 'UNKNOWN_ROUTE', string> = {
     SUBMISSIONS_RATE_DETAILS: 'Rate details',
     SUBMISSIONS_CONTACTS: 'Contacts',
     SUBMISSIONS_DOCUMENTS: 'Supporting documents',
+    SUBMISSIONS_MCCRSID: 'Add MC-CRS record number',
     SUBMISSIONS_REVIEW_SUBMIT: 'Review and submit',
     SUBMISSIONS_REVISION: 'Submission revision',
     SUBMISSIONS_SUMMARY: 'Submission summary',

services/app-web/src/constants/tealium.ts

@@ -51,6 +51,7 @@ const CONTENT_TYPE_BY_ROUTE: Record<RouteT | 'UNKNOWN_ROUTE', string> = {
     SUBMISSIONS_SUMMARY: 'summary',
     SUBMISSIONS_REVISION: 'summary',
     SUBMISSIONS_QUESTIONS_AND_ANSWERS: 'summary',
+    SUBMISSIONS_MCCRSID: 'form',
     SUBMISSIONS_UPLOAD_QUESTION: 'form',
     SUBMISSIONS_UPLOAD_RESPONSE: 'form',
     UNKNOWN_ROUTE: '404',
@@ -83,7 +84,7 @@ const getTealiumPageName = ({
     user,
 }: {
     route: RouteT | 'UNKNOWN_ROUTE'
-    heading: string | undefined
+    heading: string | React.ReactElement | undefined
     user: User | undefined
 }) => {
     const addSubmissionNameHeading =
@@ -95,7 +96,7 @@ const getTealiumPageName = ({
         title,
     }: {
         title: string
-        heading?: string
+        heading?: string | React.ReactElement
     }) => {
         const headingPrefix =
             heading && addSubmissionNameHeading ? `${heading}: ` : ''

services/app-web/src/contexts/PageContext.tsx

@@ -7,8 +7,8 @@ import { useCurrentRoute } from '../hooks/useCurrentRoute'
     Intended for page specific context that must be shared across the application, not for data that can be fetched from the api.
 */
 type PageContextType = {
-    heading?: string
-    updateHeading: ({ customHeading }: { customHeading?: string }) => void
+    heading?: string | React.ReactElement
+    updateHeading: ({ customHeading }: { customHeading?: string | React.ReactElement }) => void
 }
 
 const PageContext = React.createContext(null as unknown as PageContextType)
@@ -21,14 +21,14 @@ const PageProvider: React.FC<
         React.PropsWithChildren<React.PropsWithChildren<unknown>>
     >
 > = ({ children }) => {
-    const [heading, setHeading] = React.useState<string | undefined>(undefined)
+    const [heading, setHeading] = React.useState<string | React.ReactElement | undefined>(undefined)
     const { currentRoute: routeName } = useCurrentRoute()
     /* 
         Set headings in priority order
         1. If there a custom heading, use that (relevant for heading related to the api loaded resource, such as the submission name)
         2. Otherwise, use default static headings for the current location when defined.
     */
-    const updateHeading = ({ customHeading }: { customHeading?: string }) => {
+    const updateHeading = ({ customHeading }: { customHeading?: string | React.ReactElement }) => {
         const defaultHeading = PageHeadingsRecord[routeName]
             ? PageHeadingsRecord[routeName]
             : undefined

services/app-web/src/pages/App/AppRoutes.tsx

@@ -22,6 +22,7 @@ import { AuthenticatedRouteWrapper } from '../Wrapper/AuthenticatedRouteWrapper'
 import { Error404 } from '../Errors/Error404Page'
 import { Help } from '../Help/Help'
 import { Landing } from '../Landing/Landing'
+import { MccrsId } from '../MccrsId/MccrsId'
 import { NewStateSubmissionForm, StateSubmissionForm } from '../StateSubmission'
 import { SubmissionSummary } from '../SubmissionSummary'
 import { SubmissionRevisionSummary } from '../SubmissionRevisionSummary'
@@ -158,6 +159,7 @@ const CMSUserRoutes = ({
         featureFlags.RATE_REVIEWS_DASHBOARD.flag,
         featureFlags.RATE_REVIEWS_DASHBOARD.defaultValue
     )
+
     return (
         <AuthenticatedRouteWrapper authMode={authMode} setAlert={setAlert}>
             <Routes>
@@ -205,6 +207,12 @@ const CMSUserRoutes = ({
                         path={RoutesRecord.SUBMISSIONS_SUMMARY}
                         element={<SubmissionSummary />}
                     />
+                    {
+                        <Route
+                            path={RoutesRecord.SUBMISSIONS_MCCRSID}
+                            element={<MccrsId />}
+                        />
+                    }
                 </Route>
 
                 <Route

services/app-web/src/pages/MccrsId/MccrsId.module.scss

@@ -0,0 +1,92 @@
+@import '../../styles/uswdsImports.scss';
+@import '../../styles/custom.scss';
+
+.formPage {
+    width: 100%;
+}
+
+.formContainer.tableContainer {
+
+    &[class^='usa-form'] {
+        max-width: 100%;
+        width: 75rem;
+    }
+}
+
+.formHeader {
+    text-align: center;
+    width: 100%;
+    padding: units(4) 0;
+}
+
+.formContainer {
+    > [class^='usa-fieldset'] {
+        padding: units(4);
+        margin-bottom: units(2);
+        margin-top: units(2);
+        background: $cms-color-white;
+        border: 1px solid $theme-color-base-lighter;
+        @include u-radius('md');
+    }
+
+    h3 {
+        font-size: 22px;
+    }
+
+    > div[class^='usa-form-group']:not(:first-of-type) {
+        margin-top: 2.5rem;
+    }
+
+    &[class^='usa-form'] {
+
+        min-width: 100%;
+        max-width: 100%;
+
+        @include at-media(tablet){
+            min-width: 40rem;
+            max-width: 20rem;
+            margin: 0 auto;
+        }
+    }
+}
+
+[class^='usa-legend'] {
+    margin-top: 0;
+}
+
+div[class^='usa-form-group'] {
+    margin-top: 24px;
+    label[class^='usa-label'] {
+        font-size: 16px;
+        max-width: 100%;
+    }
+}
+
+.customHeading {
+    font-weight: 700;
+
+    span {
+        font-weight: normal;
+        margin-left: 16px;
+    }
+}
+
+div[class^='usa-hint'] span {
+    span {
+        display: inline;
+        font-weight: bold;
+    }
+} 
+
+ul[class^='usa-button-group'] {
+    justify-content: end;
+    li[class^='usa-button-group__item'] {
+        margin-top: 0;
+        button {
+            margin-top: 16px;
+            margin-bottom: 44px;
+            margin-right: .25rem;
+        }
+    } 
+}
+