diff --git a/source/frontend/src/components/common/form/PrimaryContactSelector/PrimaryContactSelectorView.tsx b/source/frontend/src/components/common/form/PrimaryContactSelector/PrimaryContactSelectorView.tsx new file mode 100644 index 0000000000..9105f2de83 --- /dev/null +++ b/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) => ( + <> + + + {teamMemberName && teamMemberUrl ? ( + + {teamMemberName} + + + ) : ( + '' + )} + + + + {showPrimaryContact && ( + + + {primaryContactName && primaryContactUrl ? ( + + {primaryContactName} + + + ) : ( + 'No contacts available' + )} + + + )} + +); + +export const StyledDiv = styled.div` + font-style: italic; +`; diff --git a/source/frontend/src/features/leases/detail/LeasePages/details/LeaseTeamView.tsx b/source/frontend/src/features/leases/detail/LeasePages/details/LeaseTeamView.tsx index 50bfe92506..356d1711d3 100644 --- a/source/frontend/src/features/leases/detail/LeasePages/details/LeaseTeamView.tsx +++ b/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 {lease.leaseTeam.map((teamMember, index) => ( - - - - {teamMember?.person - ? formatApiPersonNames(teamMember?.person) - : teamMember?.organization?.name ?? ''} - - - - - {exists(teamMember?.organizationId) && ( - - {teamMember?.primaryContactId ? ( - - - {teamMember?.primaryContact - ? formatApiPersonNames(teamMember.primaryContact) - : ''} - - - - ) : ( - 'No contacts available' - )} - - )} + 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} + /> ))} diff --git a/source/frontend/src/features/mapSideBar/acquisition/__snapshots__/AcquisitionView.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/__snapshots__/AcquisitionView.test.tsx.snap index f849b98154..d9107f452d 100644 --- a/source/frontend/src/features/mapSideBar/acquisition/__snapshots__/AcquisitionView.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/acquisition/__snapshots__/AcquisitionView.test.tsx.snap @@ -314,7 +314,7 @@ exports[`AcquisitionView component > renders as expected 1`] = ` margin-bottom: 2.4rem; } -.c43 { +.c44 { color: #474543; font-size: 1.6rem; -webkit-text-decoration: none; @@ -338,6 +338,11 @@ exports[`AcquisitionView component > renders as expected 1`] = ` cursor: pointer; } +.c43 { + padding: 0 0.4rem; + display: block; +} + .c5.btn.btn-light.Button { padding: 0; border: 0.1rem solid #9F9D9C; @@ -668,11 +673,15 @@ exports[`AcquisitionView component > renders as expected 1`] = ` max-width: 60rem; } -.c44 { +.c42 { + font-style: italic; +} + +.c45 { white-space: pre-line; } -.c42 { +.c46 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1866,85 +1875,95 @@ exports[`AcquisitionView component > renders as expected 1`] = ` class="collapse show" >
- -
-
- + Negotiation agent: + +
+
- - Bob Billy Smith - - - - - + + Bob Billy Smith + + + + + +
- -
-
- + Negotiation agent: + +
+
- - Stinky Cheese - - - - - + + Stinky Cheese + + + + + +
@@ -1969,7 +1988,7 @@ exports[`AcquisitionView component > renders as expected 1`] = ` class="collapse show" >

Each property in this file should be owned by the owner(s) in this section

@@ -2080,7 +2099,7 @@ exports[`AcquisitionView component > renders as expected 1`] = ` class="c41 text-left col" >
456 Souris Street PO Box 250 @@ -2234,7 +2253,7 @@ Canada class="c41 text-left col" >
123 Main Street PO Box 123 @@ -2282,83 +2301,72 @@ Canada
- -
-
- + Owner solicitor: + +
+
- - Millennium Inc - - - - - + + Millennium Inc + + + + + +
- -
-
- - - - - - + Primary contact: + +
+
+ No contacts available +
matches snapshot 1`] = ` margin-bottom: 2.4rem; } -.c9 { +.c10 { color: #474543; font-size: 1.6rem; -webkit-text-decoration: none; text-decoration: none; } +.c9 { + padding: 0 0.4rem; + display: block; +} + .c7.required::before { content: '*'; position: absolute; @@ -101,6 +106,10 @@ exports[`AcquisitionFileTabs component > matches snapshot 1`] = ` } .c8 { + font-style: italic; +} + +.c11 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -769,85 +778,95 @@ exports[`AcquisitionFileTabs component > matches snapshot 1`] = ` class="collapse show" >
- -
-
- + Negotiation agent: + +
+
- - Bob Billy Smith - - - - - + + Bob Billy Smith + + + + + +
- -
-
- + Negotiation agent: + +
+
- - Stinky Cheese - - - - - + + Stinky Cheese + + + + + +
@@ -872,88 +891,77 @@ exports[`AcquisitionFileTabs component > matches snapshot 1`] = ` class="collapse show" >

Each property in this file should be owned by the owner(s) in this section

- -
-
- + Owner solicitor: + +
+
- - Millennium Inc - - - - - + + Millennium Inc + + + + + +
- -
-
- - - - - - + Primary contact: + +
+
+ No contacts available +
matches snapshot 1`] = ` class="c7 text-left col" > = ({
{detail.acquisitionTeam.map((teamMember, index) => ( - - - {teamMember?.teamName} - - - - {teamMember?.organizationId && ( - - {teamMember?.primaryContactId ? ( - - {teamMember?.primaryContactName} - - - ) : ( - 'No contacts available' - )} - - )} + ))}
@@ -264,41 +247,22 @@ const AcquisitionSummaryView: React.FC = ({ {!!ownerSolicitors?.length && ownerSolicitors.map(ownerSolicitor => ( - - - - {ownerSolicitor?.personId - ? formatApiPersonNames(ownerSolicitor?.person) - : ownerSolicitor?.organization?.name ?? ''} - - - - - - {ownerSolicitor?.organization && ( - - {ownerSolicitor?.primaryContactId ? ( - - {formatApiPersonNames(ownerSolicitor.primaryContact)} - - - ) : ( - 'No contacts available' - )} - - )} + ))} {!!ownerRepresentatives?.length && diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/fileDetails/detail/__snapshots__/AcquisitionSummaryView.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/tabs/fileDetails/detail/__snapshots__/AcquisitionSummaryView.test.tsx.snap index 77c1157a9a..eaee561ec2 100644 --- a/source/frontend/src/features/mapSideBar/acquisition/tabs/fileDetails/detail/__snapshots__/AcquisitionSummaryView.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/fileDetails/detail/__snapshots__/AcquisitionSummaryView.test.tsx.snap @@ -6,13 +6,33 @@ exports[`AcquisitionSummaryView component > matches snapshot 1`] = ` class="Toastify" />
- .c7 { + .c8 { color: #474543; font-size: 1.6rem; -webkit-text-decoration: none; text-decoration: none; } +.c7 { + padding: 0 0.4rem; + display: block; +} + +.c5.required::before { + content: '*'; + position: absolute; + top: 0.75rem; + left: 0rem; +} + +.c4 { + font-weight: bold; +} + +.c6 { + font-style: italic; +} + .c0 { background-color: #f2f2f2; padding-top: 1rem; @@ -38,22 +58,11 @@ exports[`AcquisitionSummaryView component > matches snapshot 1`] = ` margin-bottom: 2.4rem; } -.c5.required::before { - content: '*'; - position: absolute; - top: 0.75rem; - left: 0rem; -} - -.c4 { - font-weight: bold; -} - -.c8 { +.c9 { white-space: pre-line; } -.c6 { +.c10 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -652,85 +661,95 @@ exports[`AcquisitionSummaryView component > matches snapshot 1`] = ` class="collapse show" >
- -
-
- + Negotiation agent: + +
+
- - Bob Billy Smith - - - - - + + Bob Billy Smith + + + + + +
- -
-
- + Negotiation agent: + +
+
- - Stinky Cheese - - - - - + + Stinky Cheese + + + + + +
@@ -755,7 +774,7 @@ exports[`AcquisitionSummaryView component > matches snapshot 1`] = ` class="collapse show" >

Each property in this file should be owned by the owner(s) in this section

@@ -866,7 +885,7 @@ exports[`AcquisitionSummaryView component > matches snapshot 1`] = ` class="c5 text-left col" >
456 Souris Street PO Box 250 @@ -1020,7 +1039,7 @@ Canada class="c5 text-left col" >
123 Main Street PO Box 123 @@ -1068,85 +1087,95 @@ Canada
- -
-
- + Owner solicitor: + +
+
- - Millennium Inc - - - - - + + Millennium Inc + + + + + +
- -
-
- + Primary contact: + +
+
- - Foo Bar Baz - - - - - + + Foo Bar Baz + + + + + +
renders as expected 1`] = ` cursor: pointer; } -.c42 { +.c43 { padding: 0 0.4rem; display: block; } @@ -669,6 +669,10 @@ exports[`DispositionView component > renders as expected 1`] = ` overflow-x: hidden; } +.c42 { + font-style: italic; +} + @media only screen and (max-width:1199px) { .c0.expanded { min-width: 70rem; @@ -1636,85 +1640,95 @@ exports[`DispositionView component > renders as expected 1`] = ` class="collapse show" >
- -
-
- + MoTI Solicitor: + +
+
- - Alejandro Sanchez - - - - - + + Alejandro Sanchez + + + + + +
- -
-
- + Negotiation agent: + +
+
- - Aman Monga - - - - - + + Aman Monga + + + + + +
diff --git a/source/frontend/src/features/mapSideBar/disposition/tabs/__snapshots__/DispositionFileTabs.test.tsx.snap b/source/frontend/src/features/mapSideBar/disposition/tabs/__snapshots__/DispositionFileTabs.test.tsx.snap index 0d2900acb8..fa9f9f0753 100644 --- a/source/frontend/src/features/mapSideBar/disposition/tabs/__snapshots__/DispositionFileTabs.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/disposition/tabs/__snapshots__/DispositionFileTabs.test.tsx.snap @@ -82,7 +82,7 @@ exports[`DispositionFileTabs component > matches snapshot 1`] = ` margin-bottom: 2.4rem; } -.c8 { +.c9 { padding: 0 0.4rem; display: block; } @@ -98,6 +98,10 @@ exports[`DispositionFileTabs component > matches snapshot 1`] = ` font-weight: bold; } +.c8 { + font-style: italic; +} +
@@ -599,85 +603,95 @@ exports[`DispositionFileTabs component > matches snapshot 1`] = ` class="collapse show" >
- -
-
- + MoTI Solicitor: + +
+
- - Alejandro Sanchez - - - - - + + Alejandro Sanchez + + + + + +
- -
-
- + Negotiation agent: + +
+
- - Aman Monga - - - - - + + Aman Monga + + + + + +
diff --git a/source/frontend/src/features/mapSideBar/disposition/tabs/fileDetails/detail/DispositionSummaryView.tsx b/source/frontend/src/features/mapSideBar/disposition/tabs/fileDetails/detail/DispositionSummaryView.tsx index ebb19654aa..96bad6e386 100644 --- a/source/frontend/src/features/mapSideBar/disposition/tabs/fileDetails/detail/DispositionSummaryView.tsx +++ b/source/frontend/src/features/mapSideBar/disposition/tabs/fileDetails/detail/DispositionSummaryView.tsx @@ -1,11 +1,10 @@ import { Fragment } from 'react'; -import { FaExternalLinkAlt } from 'react-icons/fa'; import EditButton from '@/components/common/buttons/EditButton'; +import { PrimaryContactSelectorDetails } from '@/components/common/form/PrimaryContactSelector/PrimaryContactSelectorView'; import { Section } from '@/components/common/Section/Section'; import { SectionField } from '@/components/common/Section/SectionField'; import { StyledEditWrapper, StyledSummarySection } from '@/components/common/Section/SectionStyles'; -import { StyledLink } from '@/components/common/styles'; import TooltipIcon from '@/components/common/TooltipIcon'; import { Claims, Roles } from '@/constants'; import { cannotEditMessage } from '@/features/mapSideBar/acquisition/common/constants'; @@ -137,43 +136,22 @@ export const DispositionSummaryView: React.FunctionComponent {dispositionFile?.dispositionTeam?.map((teamMember, index) => ( - - - - {teamMember?.personId - ? formatApiPersonNames(teamMember?.person) - : teamMember?.organization?.name ?? ''} - - - - - {teamMember?.organizationId && ( - - {teamMember?.primaryContactId ? ( - - {formatApiPersonNames(teamMember?.primaryContact)} - - - ) : ( - 'No contacts available' - )} - - )} + teamMemberName={ + teamMember?.personId + ? formatApiPersonNames(teamMember?.person) + : teamMember?.organization?.name ?? '' + } + teamMemberUrl={ + teamMember?.personId + ? `/contact/P${teamMember?.personId}` + : `/contact/O${teamMember?.organizationId}` + } + primaryContactName={formatApiPersonNames(teamMember?.primaryContact)} + primaryContactUrl={`/contact/P${teamMember?.primaryContactId}`} + showPrimaryContact={!!teamMember?.organizationId} + > ))} diff --git a/source/frontend/src/features/mapSideBar/disposition/tabs/fileDetails/detail/__snapshots__/DispositionSummaryView.test.tsx.snap b/source/frontend/src/features/mapSideBar/disposition/tabs/fileDetails/detail/__snapshots__/DispositionSummaryView.test.tsx.snap index 98aeaab2b7..c5e9c334e5 100644 --- a/source/frontend/src/features/mapSideBar/disposition/tabs/fileDetails/detail/__snapshots__/DispositionSummaryView.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/disposition/tabs/fileDetails/detail/__snapshots__/DispositionSummaryView.test.tsx.snap @@ -6,7 +6,27 @@ exports[`DispositionSummaryView component > matches snapshot 1`] = ` class="Toastify" />
- .c0 { + .c4.required::before { + content: '*'; + position: absolute; + top: 0.75rem; + left: 0rem; +} + +.c3 { + font-weight: bold; +} + +.c7 { + padding: 0 0.4rem; + display: block; +} + +.c6 { + font-style: italic; +} + +.c0 { background-color: #f2f2f2; padding-top: 1rem; } @@ -31,22 +51,6 @@ exports[`DispositionSummaryView component > matches snapshot 1`] = ` margin-bottom: 2.4rem; } -.c4.required::before { - content: '*'; - position: absolute; - top: 0.75rem; - left: 0rem; -} - -.c3 { - font-weight: bold; -} - -.c6 { - padding: 0 0.4rem; - display: block; -} -
@@ -478,85 +482,95 @@ exports[`DispositionSummaryView component > matches snapshot 1`] = ` class="collapse show" >
- -
-
- + MoTI Solicitor: + +
+
- - Alejandro Sanchez - - - - - + + Alejandro Sanchez + + + + + +
- -
-
- + Negotiation agent: + +
+
- - Aman Monga - - - - - + + Aman Monga + + + + + +
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/activity/detail/ActivityDetailSubView.tsx b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/activity/detail/ActivityDetailSubView.tsx index 083fe75c69..6cff7a09dc 100644 --- a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/activity/detail/ActivityDetailSubView.tsx +++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/activity/detail/ActivityDetailSubView.tsx @@ -1,12 +1,11 @@ import Multiselect from 'multiselect-react-dropdown'; import * as React from 'react'; -import { FaExternalLinkAlt } from 'react-icons/fa'; import ContactLink from '@/components/common/ContactLink'; import { readOnlyMultiSelectStyle } from '@/components/common/form'; +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_Base_CodeType } from '@/models/api/generated/ApiGen_Base_CodeType'; import { ApiGen_Concepts_ManagementActivity } from '@/models/api/generated/ApiGen_Concepts_ManagementActivity'; import { exists, prettyFormatDate } from '@/utils'; @@ -23,6 +22,24 @@ const PropertyActivityDetailsSubView: React.FunctionComponent< props.activity?.activitySubTypeCodes.map(x => x.managementActivitySubtypeCode).filter(exists) ?? []; + const getRequestorName = () => { + if (props.activity?.requestorPerson) { + return formatApiPersonNames(props.activity.requestorPerson); + } else if (props.activity?.requestorOrganization) { + return props.activity.requestorOrganization?.name; + } + return null; + }; + + const getRequestorContactLink = () => { + if (props.activity?.requestorPerson) { + return `/contact/P${props.activity.requestorPerson?.id}`; + } else if (props.activity?.requestorOrganization) { + return `/contact/O${props.activity.requestorOrganization?.id}`; + } + return null; + }; + return (
@@ -58,52 +75,19 @@ const PropertyActivityDetailsSubView: React.FunctionComponent< <>{contact.person !== null && } ))} - - <> - {exists(props.activity.requestorPerson) && ( - - )} - {exists(props.activity.requestorOrganization) && ( - - )} - - - {exists(props.activity.requestorPrimaryContactId) && ( - - {props.activity?.requestorPrimaryContactId ? ( - - - {props.activity?.requestorPrimaryContactId - ? formatApiPersonNames(props.activity?.requestorPrimaryContact) - : ''} - - - - ) : ( - 'No contacts available' - )} - - )} - - {props.activity.involvedParties?.map(contact => ( - <> - {contact.person !== null && } - {contact.organization !== null && } - - ))} - + > <> {props.activity.serviceProviderPerson !== null && (