MCR-3777 Design review feedback (#2253)

* Design review * cleanup test
Enterprise-CMCS · Feb 20, 2024 · 6316a7e · 6316a7e
1 parent 3cb6b06
commit 6316a7e
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 22 deletions.
diff --git a/services/app-web/src/pages/RateEdit/RateEdit.tsx b/services/app-web/src/pages/RateEdit/RateEdit.tsx
@@ -114,7 +114,11 @@ export const RateEdit = (): React.ReactElement => {
                 unlockedInfo={unlockedInfo}
                 showPageErrorMessage={Boolean(fetchError || submitError)}
             />
-            <RateDetailsV2 rates={[rate]} submitRate={submitRateHandler} />
+            <RateDetailsV2
+                type="SINGLE"
+                rates={[rate]}
+                submitRate={submitRateHandler}
+            />
         </FormContainer>
     )
 }
diff --git a/services/app-web/src/pages/StateSubmission/PageActions/PageActions.tsx b/services/app-web/src/pages/StateSubmission/PageActions/PageActions.tsx
@@ -5,17 +5,17 @@ import { PageActionsContainer } from './PageActionsContainer'
 import { ActionButton } from '../../../components/ActionButton'
 import { useTealium } from '../../../hooks'
 
-/*  
+/*
    This is the main call to action element displayed at the bottom of form pages.
-   We have a preference to use buttons even when a link behavior (redirect) is being used. This to ensure unity of the UI and experience across pages, since different pages have different logic. 
+   We have a preference to use buttons even when a link behavior (redirect) is being used. This to ensure unity of the UI and experience across pages, since different pages have different logic.
 */
 type PageActionProps = {
     backOnClick: React.MouseEventHandler<HTMLButtonElement>
     saveAsDraftOnClick?: React.MouseEventHandler<HTMLButtonElement>
     continueOnClick?: React.MouseEventHandler<HTMLButtonElement> // the reason this isn't required is the continue button is a type="submit" so is can use the form onsubmit as its event handler.
     actionInProgress?: boolean // disable all buttons e.g. while an async request is taking place
     disableContinue?: boolean // disable continue when errors outside formik have occured (e.g. relating to documents)
-    pageVariant?: 'FIRST' | 'LAST' | 'EDIT_FIRST'
+    pageVariant?: 'FIRST' | 'LAST' | 'EDIT_FIRST' | 'STANDALONE'
 }
 
 export const PageActions = (props: PageActionProps): React.ReactElement => {
@@ -30,6 +30,7 @@ export const PageActions = (props: PageActionProps): React.ReactElement => {
     const isFirstPage = pageVariant === 'FIRST'
     const isLastPage = pageVariant === 'LAST'
     const isFirstPageEditing = pageVariant === 'EDIT_FIRST'
+    const isStandalonePage = pageVariant === 'STANDALONE'
     const { logTealiumEvent } = useTealium()
 
     const saveAsDraftOnClickWithLogging = (
@@ -63,7 +64,9 @@ export const PageActions = (props: PageActionProps): React.ReactElement => {
                     disabled={actionInProgress}
                     onClick={actionInProgress ? undefined : backOnClick}
                 >
-                    {!isFirstPage && !isFirstPageEditing ? 'Back' : 'Cancel'}
+                    {!isFirstPage && !isFirstPageEditing && !isStandalonePage
+                        ? 'Back'
+                        : 'Cancel'}
                 </ActionButton>
 
                 <ActionButton
@@ -79,7 +82,7 @@ export const PageActions = (props: PageActionProps): React.ReactElement => {
                     animationTimeout={1000}
                     loading={actionInProgress && !disableContinue}
                 >
-                    {!isLastPage ? 'Continue' : 'Submit'}
+                    {!isLastPage && !isStandalonePage ? 'Continue' : 'Submit'}
                 </ActionButton>
             </ButtonGroup>
         </PageActionsContainer>

diff --git a/services/app-web/src/pages/StateSubmission/RateDetails/V2/RateDetailsV2.test.tsx b/services/app-web/src/pages/StateSubmission/RateDetails/V2/RateDetailsV2.test.tsx
@@ -19,6 +19,7 @@ describe('RateDetails', () => {
                         path={RoutesRecord.RATE_EDIT}
                         element={
                             <RateDetailsV2
+                                type="SINGLE"
                                 rates={[rate]}
                                 submitRate={mockSubmit}
                             />
@@ -43,7 +44,7 @@ describe('RateDetails', () => {
                 screen.getByText('Upload one rate certification document')
             ).toBeInTheDocument()
             expect(
-                screen.getByRole('button', { name: 'Continue' })
+                screen.getByRole('button', { name: 'Submit' })
             ).not.toHaveAttribute('aria-disabled')
         })
 

diff --git a/services/app-web/src/pages/StateSubmission/RateDetails/V2/RateDetailsV2.tsx b/services/app-web/src/pages/StateSubmission/RateDetails/V2/RateDetailsV2.tsx
@@ -63,8 +63,8 @@ const generateFormValues = (
 
     return {
         id: rateID,
-        rateType: rateInfo?.rateType,
-        rateCapitationType: rateInfo?.rateCapitationType,
+        rateType: rateInfo?.rateType ?? undefined,
+        rateCapitationType: rateInfo?.rateCapitationType ?? undefined,
         rateDateStart: formatForForm(rateInfo?.rateDateStart),
         rateDateEnd: formatForForm(rateInfo?.rateDateEnd),
         rateDateCertified: formatForForm(rateInfo?.rateDateCertified),
@@ -88,7 +88,7 @@ const generateFormValues = (
             rateInfo?.certifyingActuaryContacts
         ),
         actuaryCommunicationPreference:
-            rateInfo?.actuaryCommunicationPreference,
+            rateInfo?.actuaryCommunicationPreference ?? undefined,
         packagesWithSharedRateCerts:
             rateInfo?.packagesWithSharedRateCerts ?? [],
     }
@@ -104,13 +104,15 @@ export const rateErrorHandling = (
 }
 
 type RateDetailsV2Props = {
+    type: 'SINGLE' | 'MULTI'
     showValidations?: boolean
     rates: Rate[]
     submitRate: SubmitOrUpdateRate
     // updateRate: SubmitOrUpdateRate  - will be implemented in Link Rates Epic
 }
 export const RateDetailsV2 = ({
     showValidations = false,
+    type,
     rates,
     submitRate,
 }: RateDetailsV2Props): React.ReactElement => {
@@ -122,7 +124,7 @@ export const RateDetailsV2 = ({
         )
     }
     const { getKey } = useS3()
-
+    const displayAsStandaloneRate = type === 'SINGLE'
     // Form validation
     const [shouldValidate, setShouldValidate] = React.useState(showValidations)
     const rateDetailsFormSchema = RateDetailsFormSchema({
@@ -334,6 +336,11 @@ export const RateDetailsV2 = ({
                                 />
                             </fieldset>
                             <PageActions
+                                pageVariant={
+                                    displayAsStandaloneRate
+                                        ? 'STANDALONE'
+                                        : undefined
+                                }
                                 backOnClick={async () => {
                                     if (dirty) {
                                         await handlePageAction(
@@ -351,17 +358,21 @@ export const RateDetailsV2 = ({
                                         )
                                     }
                                 }}
-                                saveAsDraftOnClick={async () => {
-                                    await handlePageAction(
-                                        rateFormValues.rates,
-                                        setSubmitting,
-                                        {
-                                            type: 'SAVE_AS_DRAFT',
-                                            redirectPath:
-                                                'DASHBOARD_SUBMISSIONS',
-                                        }
-                                    )
-                                }}
+                                saveAsDraftOnClick={
+                                    displayAsStandaloneRate
+                                        ? undefined
+                                        : async () => {
+                                              await handlePageAction(
+                                                  rateFormValues.rates,
+                                                  setSubmitting,
+                                                  {
+                                                      type: 'SAVE_AS_DRAFT',
+                                                      redirectPath:
+                                                          'DASHBOARD_SUBMISSIONS',
+                                                  }
+                                              )
+                                          }
+                                }
                                 disableContinue={
                                     shouldValidate &&
                                     !!Object.keys(errors).length

diff --git a/services/app-web/src/pages/StateSubmission/StateSubmissionForm.module.scss b/services/app-web/src/pages/StateSubmission/StateSubmissionForm.module.scss
@@ -19,6 +19,9 @@
     width: 100%;
     padding: uswds.units(4) 0;
 }
+.banner {
+    margin: uswds.units(2) auto;
+}
 
 .formContainer {
     > [class^='usa-fieldset'] {
@@ -36,6 +39,7 @@
             width: 75rem;
         }
     }
+
     // the first fieldset of the form sets up form container
     // in cases where form has multiple sub sections using SectionCard - use .withSections class
     > [class^='usa-fieldset']:not([class~='with-sections']) {

diff --git a/services/app-web/src/pages/StateSubmission/StateSubmissionForm.tsx b/services/app-web/src/pages/StateSubmission/StateSubmissionForm.tsx
@@ -83,6 +83,7 @@ export const PageBannerAlerts = ({
                     unlockedBy={unlockedInfo?.updatedBy || 'Not available'}
                     unlockedOn={unlockedInfo.updatedAt || 'Not available'}
                     reason={unlockedInfo.updatedReason || 'Not available'}
+                    className={styles.banner}
                 />
             )}
         </>