PSP-11355: Visually associate primary contact and owning organization.

source/frontend/src/components/common/form/PrimaryContactSelector/PrimaryContactSelectorView.tsx

@@ -0,0 +1,65 @@
+import { FaExternalLinkAlt } from 'react-icons/fa';
+import styled from 'styled-components';
+
+import { SectionField } from '../../Section/SectionField';
+import { StyledLink } from '../../styles';
+
+interface PrimaryContactSelectorDetailsProps {
+  label: string;
+  teamMemberName: string;
+  teamMemberUrl: string;
+  primaryContactName: string;
+  primaryContactUrl: string;
+  showPrimaryContact: boolean;
+  index?: number;
+  tooltip?: string;
+}
+
+export const PrimaryContactSelectorDetails = ({
+  label,
+  teamMemberName,
+  teamMemberUrl,
+  primaryContactName,
+  primaryContactUrl,
+  showPrimaryContact,
+  index,
+  tooltip,
+}: PrimaryContactSelectorDetailsProps) => (
+  <>
+    <StyledDiv>
+      <SectionField label={label} valueTestId={`teamMember[${index}]`} tooltip={tooltip}>
+        {teamMemberName && teamMemberUrl ? (
+          <StyledLink target="_blank" rel="noopener noreferrer" to={teamMemberUrl}>
+            <span>{teamMemberName}</span>
+            <FaExternalLinkAlt className="ml-2" size="1rem" />
+          </StyledLink>
+        ) : (
+          ''
+        )}
+      </SectionField>
+    </StyledDiv>
+
+    {showPrimaryContact && (
+      <StyledDiv>
+        <SectionField
+          label="Primary contact"
+          valueTestId={`primaryContact[${index}]`}
+          className="pl-4 mb-3"
+        >
+          {primaryContactName && primaryContactUrl ? (
+            <StyledLink target="_blank" rel="noopener noreferrer" to={primaryContactUrl}>
+              <span>{primaryContactName}</span>
+              <FaExternalLinkAlt className="ml-2" size="1rem" />
+            </StyledLink>
+          ) : (
+            'No contacts available'
+          )}
+        </SectionField>
+      </StyledDiv>
+    )}
+  </>
+);
+
+export const StyledDiv = styled.div`
+  font-style: italic;
+`;

source/frontend/src/features/leases/detail/LeasePages/details/LeaseTeamView.tsx

@@ -1,11 +1,8 @@
 import React from 'react';
-import { FaExternalLinkAlt } from 'react-icons/fa';
 
+import { PrimaryContactSelectorDetails } from '@/components/common/form/PrimaryContactSelector/PrimaryContactSelectorView';
 import { Section } from '@/components/common/Section/Section';
-import { SectionField } from '@/components/common/Section/SectionField';
-import { StyledLink } from '@/components/common/styles';
 import { ApiGen_Concepts_Lease } from '@/models/api/generated/ApiGen_Concepts_Lease';
-import { exists } from '@/utils';
 import { formatApiPersonNames } from '@/utils/personUtils';
 
 export interface ILeaseTeamProps {
@@ -18,47 +15,26 @@ export const LeaseTeamView: React.FunctionComponent<React.PropsWithChildren<ILea
     <Section header="Lease & Licence Team">
       {lease.leaseTeam.map((teamMember, index) => (
         <React.Fragment key={`lease-team-${teamMember?.id ?? index}`}>
-          <SectionField
+          <PrimaryContactSelectorDetails
             label={teamMember?.teamProfileType.description || ''}
-            valueTestId={`teamMember[${index}]`}
-          >
-            <StyledLink
-              target="_blank"
-              rel="noopener noreferrer"
-              to={
-                teamMember?.personId
-                  ? `/contact/P${teamMember?.personId}`
-                  : `/contact/O${teamMember?.organizationId}`
-              }
-            >
-              <span>
-                {teamMember?.person
-                  ? formatApiPersonNames(teamMember?.person)
-                  : teamMember?.organization?.name ?? ''}
-              </span>
-              <FaExternalLinkAlt className="ml-2" size="1rem" />
-            </StyledLink>
-          </SectionField>
-          {exists(teamMember?.organizationId) && (
-            <SectionField label="Primary contact" valueTestId={`primaryContact[${index}]`}>
-              {teamMember?.primaryContactId ? (
-                <StyledLink
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  to={`/contact/P${teamMember?.primaryContactId}`}
-                >
-                  <span>
-                    {teamMember?.primaryContact
-                      ? formatApiPersonNames(teamMember.primaryContact)
-                      : ''}
-                  </span>
-                  <FaExternalLinkAlt className="m1-2" size="1rem" />
-                </StyledLink>
-              ) : (
-                'No contacts available'
-              )}
-            </SectionField>
-          )}
+            teamMemberName={
+              teamMember?.person
+                ? formatApiPersonNames(teamMember.person)
+                : teamMember?.organization?.name ?? ''
+            }
+            teamMemberUrl={
+              teamMember?.personId
+                ? `/contact/P${teamMember?.personId}`
+                : `/contact/O${teamMember?.organizationId}`
+            }
+            primaryContactName={
+              teamMember?.primaryContact ? formatApiPersonNames(teamMember.primaryContact) : ''
+            }
+            primaryContactUrl={
+              teamMember?.primaryContactId ? `/contact/P${teamMember?.primaryContactId}` : undefined
+            }
+            showPrimaryContact={!!teamMember?.organizationId}
+          />
         </React.Fragment>
       ))}
     </Section>