Bug/9236-Binny-DisRatingSRFix (#9290)

department-of-veterans-affairs · Aug 9, 2024 · 80d4f7a · 80d4f7a
1 parent da88f18
commit 80d4f7a
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 27 deletions.
diff --git a/VAMobile/e2e/tests/DisabilityRatings.e2e.ts b/VAMobile/e2e/tests/DisabilityRatings.e2e.ts
@@ -8,8 +8,10 @@ export const DisabilityRatingsIdConstants = {
   COMBINED_DISABILITY_RATING_BODY_TEXT:
     "This rating doesn't include any disabilities for your claims that are still in process. You can check the status of your disability claims or appeals with the Claim Status tool.",
   INDIVIDUAL_RATING_TEXT: 'Individual ratings',
-  INDIVIDUAL_RATING_1_ID:
-    '20% Dr Diagnosis (claimed as Heart disease Service-connected disability?  Yes Effective date:  06/06/2017',
+  INDIVIDUAL_RATING_1_ID: '20%',
+  INDIVIDUAL_RATING_1_ID_2: 'Dr Diagnosis (claimed as Heart disease',
+  INDIVIDUAL_RATING_1_ID_3: 'Service-connected disability?  No',
+  INDIVIDUAL_RATING_1_ID_4: 'Effective date:  06/06/2017',
   DISABILITY_RATING_PAGE_ID: 'disabilityRatingTestID',
   ABOUT_DISABILITY_RATINGS_LINK_ID: 'aboutDisabilityRatingsTestID',
 }
@@ -26,6 +28,9 @@ describe('Disability Ratings', () => {
     await expect(element(by.text(DisabilityRatingsIdConstants.COMBINED_DISABILITY_RATING_TEXT))).toExist()
     await expect(element(by.text(DisabilityRatingsIdConstants.INDIVIDUAL_RATING_TEXT))).toExist()
     await expect(element(by.id(DisabilityRatingsIdConstants.INDIVIDUAL_RATING_1_ID))).toExist()
+    await expect(element(by.id(DisabilityRatingsIdConstants.INDIVIDUAL_RATING_1_ID_2))).toExist()
+    await expect(element(by.id(DisabilityRatingsIdConstants.INDIVIDUAL_RATING_1_ID_3))).toExist()
+    await expect(element(by.id(DisabilityRatingsIdConstants.INDIVIDUAL_RATING_1_ID_4))).toExist()
     await expect(element(by.id(DisabilityRatingsIdConstants.ABOUT_DISABILITY_RATINGS_LINK_ID))).toExist()
     await expect(element(by.text('Learn about VA disability ratings'))).toExist()
     await expect(element(by.text('Need Help?'))).toExist()

diff --git a/VAMobile/src/screens/BenefitsScreen/DisabilityRatingsScreen/DisabilityRatingsScreen.tsx b/VAMobile/src/screens/BenefitsScreen/DisabilityRatingsScreen/DisabilityRatingsScreen.tsx
@@ -12,13 +12,10 @@ import {
   Box,
   ChildTemplate,
   ClickToCallPhoneNumber,
-  DefaultList,
-  DefaultListItemObj,
   ErrorComponent,
   LinkWithAnalytics,
   LoadingComponent,
   TextArea,
-  TextLine,
   TextView,
   TextViewProps,
 } from 'components'
@@ -51,6 +48,13 @@ function DisabilityRatingsScreen() {
     enabled: screenContentAllowed('WG_DisabilityRatings'),
   })
 
+  const titleProps: TextViewProps = {
+    variant: 'TableHeaderBold',
+    mx: gutter,
+    mb: condensedMarginBetween,
+    accessibilityRole: 'header',
+  }
+
   useFocusEffect(
     React.useCallback(() => {
       registerReviewEvent()
@@ -60,7 +64,17 @@ function DisabilityRatingsScreen() {
   const individualRatingsList: Array<IndividualRatingData> = ratingData?.individualRatings || []
   const totalCombinedRating = ratingData?.combinedDisabilityRating
 
-  const individualRatings: Array<DefaultListItemObj> = map(individualRatingsList, (rating: IndividualRatingData) => {
+  const individualRatingsHeading = () => {
+    return (
+      <Box mt={theme.dimensions.standardMarginBetween} accessible={true} accessibilityRole={'header'}>
+        <TextView {...titleProps} selectable={false}>
+          {t('disabilityRatingDetails.individualTitle')}
+        </TextView>
+      </Box>
+    )
+  }
+
+  const individualRatings: React.ReactNode = map(individualRatingsList, (rating: IndividualRatingData) => {
     const { ratingPercentage, decision, effectiveDate, diagnosticText } = rating
 
     const decisionText = t('disabilityRatingDetails.serviceConnected', {
@@ -78,15 +92,33 @@ function DisabilityRatingsScreen() {
           })
         : ''
 
-    const textLines: Array<TextLine> = []
-    percentageText && textLines.push({ text: percentageText, variant: 'MobileBodyBold' })
-    textLines.push({ text: capitalizeFirstLetter(diagnosticText) }, { text: decisionText })
-    formattedEffectiveDateText && textLines.push({ text: formattedEffectiveDateText })
-
-    return {
-      textLines,
-      testId: `${percentageText} ${diagnosticText} ${decisionText} ${formattedEffectiveDateText}`,
-    }
+    return (
+      <Box
+        borderTopWidth={theme.dimensions.borderWidth}
+        backgroundColor={'list'}
+        borderStyle="solid"
+        borderColor="primary"
+        accessible={true}>
+        <Box mx={theme.dimensions.gutter} my={theme.dimensions.buttonPadding} flexDirection="column" accessible={false}>
+          {percentageText && (
+            <TextView variant={'MobileBodyBold'} testID={percentageText} accessible={false}>
+              {percentageText}
+            </TextView>
+          )}
+          <TextView accessible={false} testID={diagnosticText}>
+            {capitalizeFirstLetter(diagnosticText)}
+          </TextView>
+          <TextView accessible={false} testID={decisionText}>
+            {decisionText}
+          </TextView>
+          {formattedEffectiveDateText && (
+            <TextView accessible={false} testID={formattedEffectiveDateText}>
+              {formattedEffectiveDateText}
+            </TextView>
+          )}
+        </Box>
+      </Box>
+    )
   })
 
   const getCombinedTotalSection = () => {
@@ -177,13 +209,6 @@ function DisabilityRatingsScreen() {
     )
   }
 
-  const titleProps: TextViewProps = {
-    variant: 'TableHeaderBold',
-    mx: gutter,
-    mb: condensedMarginBetween,
-    accessibilityRole: 'header',
-  }
-
   return (
     <ChildTemplate
       backLabel={t('benefits.title')}
@@ -204,11 +229,8 @@ function DisabilityRatingsScreen() {
         <>
           <Box>{getCombinedTotalSection()}</Box>
           <Box mb={condensedMarginBetween}>
-            <DefaultList
-              items={individualRatings}
-              title={t('disabilityRatingDetails.individualTitle')}
-              selectable={true}
-            />
+            {individualRatingsHeading()}
+            {individualRatings}
           </Box>
           <Box mb={condensedMarginBetween}>{getLearnAboutVaRatingSection()}</Box>
           <Box mb={contentMarginBottom}>{getNeedHelpSection()}</Box>