Rename N/A to No items selected for several VSR fields

TritonSE · Apr 18, 2024 · adef760 · adef760
1 parent 8970540
commit adef760
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 20 deletions.
diff --git a/frontend/src/components/VSRIndividual/FieldDetails/ListDetail/index.tsx b/frontend/src/components/VSRIndividual/FieldDetails/ListDetail/index.tsx
@@ -5,12 +5,13 @@ import { FieldDetail } from "@/components/VSRIndividual/FieldDetails/FieldDetail
 export interface ListDetailProps {
   title: string;
   values: string[];
+  isEmpty: boolean;
 }
 
 /**
  * A component that displays a list of values separated by commas on the VSR individual page.
  */
-export function ListDetail({ title, values }: ListDetailProps) {
+export function ListDetail({ title, values, isEmpty }: ListDetailProps) {
   const list = (
     <div className={styles.list}>
       {values.map((value, index) => (
@@ -20,7 +21,7 @@ export function ListDetail({ title, values }: ListDetailProps) {
       ))}
     </div>
   );
-  const noList = <div className={styles.noList}>N/A</div>;
+  const noList = <div className={styles.noList}>{values[0]}</div>;
 
-  return <FieldDetail title={title}>{values.includes("N/A") ? noList : list}</FieldDetail>;
+  return <FieldDetail title={title}>{isEmpty ? noList : list}</FieldDetail>;
 }
diff --git a/frontend/src/components/VSRIndividual/FieldDetails/SingleDetail/index.tsx b/frontend/src/components/VSRIndividual/FieldDetails/SingleDetail/index.tsx
@@ -7,12 +7,19 @@ export interface SingleDetailProps {
   value: string | number | number[] | ReactNode;
   valueFontSize?: string | number;
   className?: string;
+  isEmpty?: boolean;
 }
 
 /**
  * A component for a single (non-list) field on the VSR individual page.
  */
-export function SingleDetail({ title, value, valueFontSize, className }: SingleDetailProps) {
+export function SingleDetail({
+  title,
+  value,
+  valueFontSize,
+  className,
+  isEmpty,
+}: SingleDetailProps) {
   const valueStyle = {
     fontSize: valueFontSize, // Use the passed font size or default to CSS class
   };
@@ -29,13 +36,13 @@ export function SingleDetail({ title, value, valueFontSize, className }: SingleD
     </div>
   );
 
-  const noValue = <div className={styles.noValue}>N/A</div>;
+  const noValue = <div className={styles.noValue}>{value}</div>;
 
   return (
     <FieldDetail className={className} title={title}>
       {typeof value === "string" && value.includes("@")
         ? email
-        : typeof value === "string" && value.includes("N/A")
+        : typeof value === "string" && isEmpty
           ? noValue
           : basic}
     </FieldDetail>

diff --git a/frontend/src/components/VSRIndividual/PageSections/MilitaryBackground/index.tsx b/frontend/src/components/VSRIndividual/PageSections/MilitaryBackground/index.tsx
@@ -53,7 +53,8 @@ export const MilitaryBackground = ({ vsr, isEditing, formProps }: MilitaryBackgr
         ) : (
           <ListDetail
             title="Branch"
-            values={vsr.branch && vsr.branch.length > 0 ? vsr.branch : ["N/A"]}
+            values={vsr.branch && vsr.branch.length > 0 ? vsr.branch : ["No branch selected"]}
+            isEmpty={!(vsr.branch && vsr.branch.length > 0)}
           />
         )}
       </div>
@@ -70,7 +71,10 @@ export const MilitaryBackground = ({ vsr, isEditing, formProps }: MilitaryBackgr
         ) : (
           <ListDetail
             title="Conflicts"
-            values={vsr.conflicts && vsr.conflicts.length > 0 ? vsr.conflicts : ["N/A"]}
+            values={
+              vsr.conflicts && vsr.conflicts.length > 0 ? vsr.conflicts : ["No conflicts selected"]
+            }
+            isEmpty={!(vsr.conflicts && vsr.conflicts.length > 0)}
           />
         )}
       </div>
@@ -89,8 +93,9 @@ export const MilitaryBackground = ({ vsr, isEditing, formProps }: MilitaryBackgr
             values={
               vsr.dischargeStatus && vsr.dischargeStatus.length > 0
                 ? [vsr.dischargeStatus]
-                : ["N/A"]
+                : ["No discharge status"]
             }
+            isEmpty={!(vsr.dischargeStatus && vsr.dischargeStatus.length > 0)}
           />
         )}
       </div>
@@ -102,7 +107,11 @@ export const MilitaryBackground = ({ vsr, isEditing, formProps }: MilitaryBackgr
             formProps={formProps}
           />
         ) : (
-          <ListDetail title="Service Connected" values={[vsr.serviceConnected ? "Yes" : "No"]} />
+          <ListDetail
+            title="Service Connected"
+            values={[vsr.serviceConnected ? "Yes" : "No"]}
+            isEmpty={false}
+          />
         )}
       </div>
       <div className={styles.row}>

diff --git a/frontend/src/components/VSRIndividual/PageSections/PersonalInformation/index.tsx b/frontend/src/components/VSRIndividual/PageSections/PersonalInformation/index.tsx
@@ -127,7 +127,7 @@ export const PersonalInformation = ({ vsr, isEditing, formProps }: PersonalInfor
             allowMultiple={false}
           />
         ) : (
-          <ListDetail title="Marital Status" values={[vsr.maritalStatus]} />
+          <ListDetail title="Marital Status" values={[vsr.maritalStatus]} isEmpty={false} />
         )}
       </div>
       {formProps.watch().maritalStatus === "Married" ? (
@@ -142,7 +142,7 @@ export const PersonalInformation = ({ vsr, isEditing, formProps }: PersonalInfor
           ) : (
             <SingleDetail
               title="Spouse's Name"
-              value={vsr.spouseName && vsr.spouseName.length > 0 ? vsr.spouseName : "N/A"}
+              value={vsr.spouseName && vsr.spouseName.length > 0 ? vsr.spouseName : "No spouse"}
             />
           )}
         </div>
@@ -158,8 +158,11 @@ export const PersonalInformation = ({ vsr, isEditing, formProps }: PersonalInfor
             <SingleDetail
               title="Age(s)"
               value={
-                vsr.agesOfBoys && vsr.agesOfBoys.length > 0 ? vsr.agesOfBoys.join(", ") : "N/A"
+                vsr.agesOfBoys && vsr.agesOfBoys.length > 0
+                  ? vsr.agesOfBoys.join(", ")
+                  : "No male children"
               }
+              isEmpty={!(vsr.agesOfBoys && vsr.agesOfBoys.length > 0)}
             />
           </>
         )}
@@ -175,8 +178,11 @@ export const PersonalInformation = ({ vsr, isEditing, formProps }: PersonalInfor
             <SingleDetail
               title="Age(s)"
               value={
-                vsr.agesOfGirls && vsr.agesOfGirls.length > 0 ? vsr.agesOfGirls.join(", ") : "N/A"
+                vsr.agesOfGirls && vsr.agesOfGirls.length > 0
+                  ? vsr.agesOfGirls.join(", ")
+                  : "No female children"
               }
+              isEmpty={!(vsr.agesOfGirls && vsr.agesOfGirls.length > 0)}
             />
           </>
         )}
@@ -194,7 +200,10 @@ export const PersonalInformation = ({ vsr, isEditing, formProps }: PersonalInfor
         ) : (
           <ListDetail
             title="Ethnicity"
-            values={vsr.ethnicity && vsr.ethnicity.length > 0 ? vsr.ethnicity : ["N/A"]}
+            values={
+              vsr.ethnicity && vsr.ethnicity.length > 0 ? vsr.ethnicity : ["No items selected"]
+            }
+            isEmpty={!(vsr.ethnicity && vsr.ethnicity.length > 0)}
           />
         )}
       </div>
@@ -208,7 +217,7 @@ export const PersonalInformation = ({ vsr, isEditing, formProps }: PersonalInfor
             allowMultiple={false}
           />
         ) : (
-          <ListDetail title="Employment Status" values={[vsr.employmentStatus]} />
+          <ListDetail title="Employment Status" values={[vsr.employmentStatus]} isEmpty={false} />
         )}
       </div>
       <div className={styles.row}>
@@ -221,7 +230,7 @@ export const PersonalInformation = ({ vsr, isEditing, formProps }: PersonalInfor
             allowMultiple={false}
           />
         ) : (
-          <ListDetail title="Income Level" values={[vsr.incomeLevel]} />
+          <ListDetail title="Income Level" values={[vsr.incomeLevel]} isEmpty={false} />
         )}
       </div>
       <div className={styles.row}>
@@ -234,7 +243,7 @@ export const PersonalInformation = ({ vsr, isEditing, formProps }: PersonalInfor
             allowMultiple={false}
           />
         ) : (
-          <ListDetail title="Size of Home" values={[vsr.sizeOfHome]} />
+          <ListDetail title="Size of Home" values={[vsr.sizeOfHome]} isEmpty={false} />
         )}
       </div>
     </VSRIndividualAccordion>

diff --git a/frontend/src/components/VSRIndividual/PageSections/RequestedFurnishings/index.tsx b/frontend/src/components/VSRIndividual/PageSections/RequestedFurnishings/index.tsx
@@ -118,8 +118,9 @@ export const RequestedFurnishings = ({
                         : ""
                     }`,
                 )
-              : ["N/A"]
+              : ["No items selected"]
           }
+          isEmpty={!(selectedItemsForCategory && selectedItemsForCategory.length > 0)}
         />
       </div>
     );
@@ -141,8 +142,11 @@ export const RequestedFurnishings = ({
           <SingleDetail
             title="Additional Items:"
             value={
-              vsr.additionalItems && vsr.additionalItems.length > 0 ? vsr.additionalItems : "n/a"
+              vsr.additionalItems && vsr.additionalItems.length > 0
+                ? vsr.additionalItems
+                : "No items selected"
             }
+            isEmpty={!(vsr.additionalItems && vsr.additionalItems.length > 0)}
           />
         )}
       </div>