Re-add explanatory text

src/modules/household/components/elements/AddToHouseholdButton.tsx

@@ -151,6 +151,7 @@ const AddToHouseholdButton = ({
               {household && conflictingEnrollmentId && (
                 <ConflictingEnrollmentAlert
                   joiningClient={client}
+                  receivingHousehold={household}
                   conflictingEnrollmentId={conflictingEnrollmentId}
                   onClickJoinEnrollment={() => {
                     closeDialog();

src/modules/household/components/elements/ConflictingEnrollmentAlert.tsx

@@ -1,43 +1,75 @@
-import { Alert, AlertTitle, Button, Stack } from '@mui/material';
+import {
+  Alert,
+  AlertTitle,
+  Button,
+  List,
+  ListItem,
+  Stack,
+} from '@mui/material';
+import { useMemo } from 'react';
 import { generatePath } from 'react-router-dom';
 import ButtonLink from '@/components/elements/ButtonLink';
 import { clientBriefName } from '@/modules/hmis/hmisUtil';
 import { EnrollmentDashboardRoutes } from '@/routes/routes';
-import { ClientWithAlertFieldsFragment } from '@/types/gqlTypes';
+import {
+  ClientWithAlertFieldsFragment,
+  HouseholdFieldsFragment,
+  RelationshipToHoH,
+} from '@/types/gqlTypes';
 
 interface Props {
   joiningClient: ClientWithAlertFieldsFragment;
   conflictingEnrollmentId: string;
+  receivingHousehold: HouseholdFieldsFragment;
   onClickJoinEnrollment: VoidFunction;
 }
 
 const ConflictingEnrollmentAlert = ({
   joiningClient,
+  receivingHousehold,
   conflictingEnrollmentId,
   onClickJoinEnrollment,
 }: Props) => {
+  const joiningClientName = clientBriefName(joiningClient);
+
+  const hohName = useMemo(() => {
+    const hoh = receivingHousehold.householdClients.find(
+      (hc) => hc.relationshipToHoH === RelationshipToHoH.SelfHeadOfHousehold
+    );
+    if (!hoh) return '';
+    return clientBriefName(hoh.client);
+  }, [receivingHousehold.householdClients]);
+
   return (
     <Alert severity='warning'>
       <AlertTitle>Conflicting Enrollment</AlertTitle>
-      <Stack direction='column' gap={2}>
-        {clientBriefName(joiningClient)} has another enrollment in this project
-        that conflicts with this entry date. You have two options:
-        {/*todo @martha - add back, see designg*/}
-        <Stack direction='row' gap={2}>
-          <Button color='warning' onClick={onClickJoinEnrollment}>
-            Join Enrollments
-          </Button>
-          <ButtonLink
-            to={generatePath(EnrollmentDashboardRoutes.ENROLLMENT_OVERVIEW, {
-              clientId: joiningClient.id,
-              enrollmentId: conflictingEnrollmentId,
-            })}
-            variant='contained'
-            color='grayscale'
-          >
-            View Conflicting Enrollment
-          </ButtonLink>
-        </Stack>
+      {joiningClientName} has another enrollment in this project that conflicts
+      with this enrollment. You have two options:
+      <List sx={{ listStyle: 'decimal', pl: 4 }} component='ol'>
+        <ListItem sx={{ display: 'list-item' }}>
+          {joiningClientName}’s enrollment can be joined with {hohName}’s
+          household.
+        </ListItem>
+        <ListItem sx={{ display: 'list-item' }}>
+          To retain {joiningClientName}’s enrollment, you must first edit the
+          entry and/or exit dates so that it does not conflict, before
+          re-enrolling.
+        </ListItem>
+      </List>
+      <Stack direction='row' gap={2}>
+        <Button color='warning' onClick={onClickJoinEnrollment}>
+          Join Enrollments
+        </Button>
+        <ButtonLink
+          to={generatePath(EnrollmentDashboardRoutes.ENROLLMENT_OVERVIEW, {
+            clientId: joiningClient.id,
+            enrollmentId: conflictingEnrollmentId,
+          })}
+          variant='contained'
+          color='grayscale'
+        >
+          View Conflicting Enrollment
+        </ButtonLink>
       </Stack>
     </Alert>
   );

src/modules/household/components/elements/JoinHouseholdAddRelationships.tsx

@@ -47,7 +47,7 @@ const JoinHouseholdAddRelationships = ({
       <Typography variant='body1'>
         Update joining clients' relationships{' '}
         {receivingHohName && <>to {receivingHohName}</>}
-        {/*  todo @martha - add warning here about entry dates. see design ? */}
+        {/* todo @martha - add warning here about entry dates, pending conversation with design */}
       </Typography>
       <Paper>
         <GenericTable<HouseholdClientFieldsFragment>

src/modules/household/components/elements/JoinHouseholdDialog.tsx

@@ -138,7 +138,7 @@ const JoinHouseholdDialog = ({
           receivingHouseholdId: receivingHousehold.id,
           joiningEnrollmentInputs: joiningClients.map((hc) => {
             return {
-              // todo @martha - need to use enrollmentLockVersion?
+              // todo @martha - discuss, should we use enrollmentLockVersion?
               enrollmentId: hc.enrollment.id,
               // `|| RelationshipToHoH.DataNotCollected` is to keep typescript happy;
               // thanks to the missingRelationshipsCount logic, we know the relationships will be non-null