MCR-4664 & 4663: State and CMS see withdrawn rates

packages/mocks/src/apollo/contractPackageDataMock.ts

@@ -7,6 +7,7 @@ import {
     UnlockedContract,
     CmsUser,
     StateUser,
+    Rate,
 } from '../gen/gqlClient'
 import { s3DlUrl } from './documentDataMock'
 
@@ -2833,6 +2834,95 @@ const mockEmptyDraftContractAndRate = (): Contract =>
         withdrawnRates: [],
     })
 
+const mockWithdrawnRates = (parentContractID?: string): Rate[] => {
+    return [
+        {
+            id: '1234',
+            webURL: 'https://testmcreview.example/rates/1234',
+            createdAt: new Date('01/01/2021'),
+            updatedAt: new Date('01/01/2021'),
+            status: 'SUBMITTED',
+            reviewStatus: 'WITHDRAWN',
+            consolidatedStatus: 'WITHDRAWN',
+            state: mockMNState(),
+            stateCode: 'MN',
+            stateNumber: 5,
+            parentContractID: parentContractID ?? 'test-abc-123',
+            revisions: [],
+            packageSubmissions: [
+                {
+                    cause: 'CONTRACT_SUBMISSION',
+                    submitInfo: {
+                        updatedAt: new Date('01/01/2021'),
+                        updatedBy: {
+                            email: '[email protected]',
+                            familyName: 'Hotman',
+                            givenName: 'Zuko',
+                            role: 'CMS_USER',
+                        },
+                        updatedReason: 'Withdrawn rate reason',
+                    },
+                    contractRevisions: [],
+                    rateRevision: {
+                        id: 'test-rate-revision-id',
+                        rateID: '1234',
+                        createdAt: new Date('01/01/2021'),
+                        updatedAt: new Date('01/01/2021'),
+                        formData: {
+                            ...mockRateRevision().formData,
+                            rateCertificationName:
+                                'WITHDRAWN-RATE-1-NAME'
+                        },
+                    },
+                    submittedRevisions: [],
+                },
+            ],
+        },
+        {
+            id: '5678',
+            webURL: 'https://testmcreview.example/rates/5678',
+            createdAt: new Date('01/01/2021'),
+            updatedAt: new Date('01/01/2021'),
+            status: 'SUBMITTED',
+            reviewStatus: 'WITHDRAWN',
+            consolidatedStatus: 'WITHDRAWN',
+            state: mockMNState(),
+            stateCode: 'MN',
+            stateNumber: 5,
+            parentContractID: parentContractID ?? 'test-abc-123',
+            revisions: [],
+            packageSubmissions: [
+                {
+                    cause: 'CONTRACT_SUBMISSION',
+                    submitInfo: {
+                        updatedAt: new Date('01/01/2021'),
+                        updatedBy: {
+                            email: '[email protected]',
+                            familyName: 'Hotman',
+                            givenName: 'Zuko',
+                            role: 'CMS_USER',
+                        },
+                        updatedReason: 'Withdrawn rate reason',
+                    },
+                    contractRevisions: [],
+                    rateRevision: {
+                        id: 'test-rate-revision-id',
+                        rateID: '5678',
+                        createdAt: new Date('01/01/2021'),
+                        updatedAt: new Date('01/01/2021'),
+                        formData: {
+                            ...mockRateRevision().formData,
+                            rateCertificationName:
+                                'WITHDRAWN-RATE-2-NAME'
+                        },
+                    },
+                    submittedRevisions: [],
+                },
+            ],
+        },
+    ]
+}
+
 export {
     mockContractRevision,
     mockContractPackageDraft,
@@ -2848,4 +2938,5 @@ export {
     mockContractPackageSubmittedWithQuestions,
     mockContractPackageApproved,
     mockContractPackageApprovedWithQuestions,
+    mockWithdrawnRates
 }

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

@@ -13,6 +13,11 @@
     color: custom.$mcr-foundation-ink;
 }
 
+.gray-medium {
+    @include uswds.u-bg('gray-60');
+    color: custom.$mcr-foundation-white;
+}
+
 .light-green {
     @include uswds.u-bg('green-cool-20v');
     color: custom.$mcr-foundation-ink;

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

@@ -9,7 +9,14 @@ Main application-wide tag to draw attention to key info.
   This is a react-uswds Tag enhanced with CMS styles.
 */
 export type TagProps = {
-    color: 'green' | 'gold' | 'cyan' | 'blue' | 'light green' | 'gray'
+    color:
+        | 'green'
+        | 'gold'
+        | 'cyan'
+        | 'blue'
+        | 'light green'
+        | 'gray'
+        | 'gray-medium'
     emphasize?: boolean
 } & ComponentProps<typeof USWDSTag>
 
@@ -28,6 +35,7 @@ export const InfoTag = ({
             [styles['gold']]: color === 'gold',
             [styles['blue']]: color === 'blue',
             [styles['gray']]: color === 'gray',
+            [styles['gray-medium']]: color === 'gray-medium',
         },
         emphasize ? styles['emphasize'] : undefined,
         className

services/app-web/src/pages/StateSubmission/RateDetails/RateDetails.test.tsx

@@ -13,19 +13,16 @@ import {
     updateDraftContractRatesMockSuccess,
     mockContractWithLinkedRateDraft,
     mockContractPackageDraft,
-} from '@mc-review/mocks'
-import { Route, Routes, Location } from 'react-router-dom'
-import { RoutesRecord } from '@mc-review/constants'
-import userEvent from '@testing-library/user-event'
-import {
     rateDataMock,
     rateRevisionDataMock,
     draftRateDataMock,
-} from '@mc-review/mocks'
-import {
     fetchDraftRateMockSuccess,
     indexRatesMockSuccess,
+    mockWithdrawnRates,
 } from '@mc-review/mocks'
+import { Route, Routes, Location } from 'react-router-dom'
+import { RoutesRecord } from '@mc-review/constants'
+import userEvent from '@testing-library/user-event'
 import {
     clickAddNewRate,
     fillOutFirstRate,
@@ -1674,4 +1671,59 @@ describe('RateDetails', () => {
             expect(removeButtonsPostRemoval).toHaveLength(2)
         })
     })
+
+    describe('handles withdrawn rates', () => {
+        const withdrawnRates = mockWithdrawnRates()
+        it('renders withdrawn rates', async () => {
+            renderWithProviders(
+                <Routes>
+                    <Route
+                        path={RoutesRecord.SUBMISSIONS_RATE_DETAILS}
+                        element={<RateDetails type="MULTI" />}
+                    />
+                </Routes>,
+                {
+                    apolloProvider: {
+                        mocks: [
+                            fetchCurrentUserMock({ statusCode: 200 }),
+                            fetchContractMockSuccess({
+                                contract: {
+                                    ...mockContractWithLinkedRateDraft(),
+                                    id: 'test-abc-123',
+                                    withdrawnRates,
+                                },
+                            }),
+                        ],
+                    },
+                    routerProvider: {
+                        route: `/submissions/test-abc-123/edit/rate-details`,
+                    },
+                    featureFlags: {
+                        'rate-edit-unlock': false,
+                    },
+                }
+            )
+
+            await screen.findByText('Rate Details')
+            expect(
+                screen.getByText(
+                    'Was this rate certification included with another submission?'
+                )
+            ).toBeInTheDocument()
+
+            // expect withdrawn rates to be on the screen
+            expect(
+                screen.getByRole('heading', {
+                    level: 3,
+                    name: /WITHDRAWN-RATE-1-NAME/,
+                })
+            ).toBeInTheDocument()
+            expect(
+                screen.getByRole('heading', {
+                    level: 3,
+                    name: /WITHDRAWN-RATE-2-NAME/,
+                })
+            ).toBeInTheDocument()
+        })
+    })
 })

services/app-web/src/pages/StateSubmission/RateDetails/V2/RateDetailsV2.tsx

@@ -54,6 +54,7 @@ import {
 import { LinkYourRates } from '../../../LinkYourRates/LinkYourRates'
 import { LinkedRateSummary } from '../LinkedRateSummary'
 import { usePage } from '../../../../contexts/PageContext'
+import { InfoTag } from '../../../../components/InfoTag/InfoTag'
 
 export type FormikRateForm = {
     id?: string // no id if its a new rate
@@ -164,20 +165,28 @@ const RateDetails = ({
         }
     }, [focusNewRate])
 
-    const pageHeading = displayAsStandaloneRate
-        ? fetchRateData?.fetchRate.rate.draftRevision?.formData
-              .rateCertificationName
-        : fetchContractData?.fetchContract.contract?.draftRevision?.contractName
-    if (pageHeading) updateHeading({ customHeading: pageHeading })
-    const [updateDraftContractRates] = useUpdateDraftContractRatesMutation()
-    const [submitRate] = useSubmitRateMutation()
-
     // Set up data for form. Either based on contract API (for multi rate) or rates API (for edit and submit of standalone rate)
     const contract = fetchContractData?.fetchContract.contract
     const contractDraftRevision = contract?.draftRevision
     const ratesFromContract = contract?.draftRates
     const initialRequestLoading = fetchContractLoading || fetchRateLoading
     const initialRequestError = fetchContractError || fetchRateError
+    const withdrawnRateRevisions: RateRevision[] =
+        contract?.withdrawnRates?.reduce((acc, rate) => {
+            const latestRevision = rate.packageSubmissions?.[0].rateRevision
+            if (rate.consolidatedStatus === 'WITHDRAWN' && latestRevision) {
+                acc.push(latestRevision)
+            }
+            return acc
+        }, [] as RateRevision[]) ?? []
+
+    const pageHeading = displayAsStandaloneRate
+        ? fetchRateData?.fetchRate.rate.draftRevision?.formData
+              .rateCertificationName
+        : contract?.draftRevision?.contractName
+    if (pageHeading) updateHeading({ customHeading: pageHeading })
+    const [updateDraftContractRates] = useUpdateDraftContractRatesMutation()
+    const [submitRate] = useSubmitRateMutation()
 
     // Set up initial rate form values for Formik
     const initialRates: Rate[] = React.useMemo(
@@ -394,8 +403,7 @@ const RateDetails = ({
                     <PageBannerAlerts
                         loggedInUser={loggedInUser}
                         unlockedInfo={
-                            fetchContractData?.fetchContract.contract
-                                .draftRevision?.unlockInfo ||
+                            contract?.draftRevision?.unlockInfo ||
                             fetchRateData?.fetchRate.rate.draftRevision
                                 ?.unlockInfo
                         }
@@ -576,6 +584,32 @@ const RateDetails = ({
                                                         </button>
                                                     </SectionCard>
                                                 )}
+                                                {withdrawnRateRevisions.length >
+                                                    0 &&
+                                                    withdrawnRateRevisions.map(
+                                                        (rateRev) => (
+                                                            <SectionCard
+                                                                id={`withdrawn-rate-${rateRev.id}`}
+                                                                key={rateRev.id}
+                                                            >
+                                                                <h3
+                                                                    aria-label={`Rate ID: ${rateRev.formData.rateCertificationName}`}
+                                                                    className={
+                                                                        styles.rateName
+                                                                    }
+                                                                >
+                                                                    <InfoTag color="gray-medium">
+                                                                        WITHDRAWN
+                                                                    </InfoTag>{' '}
+                                                                    {
+                                                                        rateRev
+                                                                            .formData
+                                                                            .rateCertificationName
+                                                                    }
+                                                                </h3>
+                                                            </SectionCard>
+                                                        )
+                                                    )}
                                             </>
                                         )}
                                     </FieldArray>