PSP-8693: Rename Header Dates (Lease and License)

source/backend/apimodels/Models/Concepts/Lease/LeaseMap.cs

@@ -24,6 +24,7 @@ public void Register(TypeAdapterConfig config)
                 .Map(dest => dest.MotiName, src => src.MotiContact)
                 .Map(dest => dest.ExpiryDate, src => src.GetExpiryDate().ToNullableDateOnly())
                 .Map(dest => dest.StartDate, src => src.OrigStartDate.ToNullableDateOnly())
+                .Map(dest => dest.TerminationDate, src => src.TerminationDate.ToNullableDateOnly())
                 .Map(dest => dest.ProgramName, src => src.GetProgramName())
                 .Map(dest => dest.OtherCategoryType, src => src.LeaseCategoryOtherDesc)
                 .Map(dest => dest.OtherProgramType, src => src.OtherLeaseProgramType)
@@ -76,6 +77,7 @@ public void Register(TypeAdapterConfig config)
                 .Map(dest => dest.OtherLeaseLicenseType, src => src.OtherType)
                 .Map(dest => dest.OrigExpiryDate, src => src.ExpiryDate.ToNullableDateTime())
                 .Map(dest => dest.OrigStartDate, src => src.StartDate.ToNullableDateTime())
+                .Map(dest => dest.TerminationDate, src => src.TerminationDate.ToNullableDateTime())
                 .Map(dest => dest.RegionCode, src => src.Region.Id)
                 .Map(dest => dest.LeaseProgramTypeCode, src => src.ProgramType.GetTypeId())
                 .Map(dest => dest.LeasePayRvblTypeCode, src => src.PaymentReceivableType.GetTypeId())

source/backend/apimodels/Models/Concepts/Lease/LeaseModel.cs

@@ -78,15 +78,20 @@ public class LeaseModel : FileWithChecklistModel
         /// </summary>
         public string OtherType { get; set; }
 
+        /// <summary>
+        /// get/set - The original start date of the lease.
+        /// </summary>
+        public DateOnly? StartDate { get; set; }
+
         /// <summary>
         /// get/set - The calculated expiry date of the lease.
         /// </summary>
         public DateOnly? ExpiryDate { get; set; }
 
         /// <summary>
-        /// get/set - The original start date of the lease.
+        /// get/set - Date that the lease was terminated.
         /// </summary>
-        public DateOnly? StartDate { get; set; }
+        public DateOnly? TerminationDate { get; set; }
 
         /// <summary>
         /// get/set - The lease renewal count.

source/frontend/src/components/common/HeaderField/HeaderField.tsx

@@ -1,8 +1,13 @@
 import React from 'react';
 import { Col, Row } from 'react-bootstrap';
+import styled from 'styled-components';
+
+import { renderTooltip } from '@/utils/formUtils';
 
 export interface IHeaderLabelColProps {
-  label: string;
+  label: string | null;
+  /** It accepts either a string or a custom React tooltip component  */
+  tooltip?: React.ReactNode;
   labelWidth?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'auto';
 }
 
@@ -29,9 +34,12 @@ export const HeaderField: React.FC<React.PropsWithChildren<IHeaderFieldProps>> =
 
 export const HeaderLabelCol: React.FC<IHeaderLabelColProps> = props => (
   <Col xs={props.labelWidth ?? 'auto'} className="pr-0 text-left">
-    <strong>
-      <label>{props.label}</label>
-    </strong>
+    {props.label && (
+      <StyledHeaderLabel>
+        {props.label}
+        {props.tooltip && <span>{renderTooltip(props.tooltip)}</span>}
+      </StyledHeaderLabel>
+    )}
   </Col>
 );
 
@@ -48,3 +56,8 @@ export const HeaderContentCol: React.FC<
     </Col>
   );
 };
+
+const StyledHeaderLabel = styled.label`
+  font-weight: bold;
+  white-space: nowrap;
+`;

source/frontend/src/components/common/HeaderField/StatusField.tsx

@@ -7,13 +7,15 @@ import styled from 'styled-components';
 
 import { Dictionary } from '@/interfaces/Dictionary';
 import { ApiGen_Base_CodeType } from '@/models/api/generated/ApiGen_Base_CodeType';
+import { isValidIsoDateTime, prettyFormatDate } from '@/utils';
 
 import { InlineFlexDiv } from '../styles';
 import { StyledSmallText } from './AuditSection';
 
 interface IStatusFieldProps {
   statusCodeType: ApiGen_Base_CodeType<string>;
   preText?: string;
+  statusCodeDate?: string;
 }
 
 interface StatusStyle {
@@ -35,6 +37,7 @@ const statusDictionary: Dictionary<StatusStyle> = {
 const StatusField: React.FunctionComponent<React.PropsWithChildren<IStatusFieldProps>> = ({
   statusCodeType,
   preText,
+  statusCodeDate,
 }) => {
   const translateStatusCode = (statusCodeType: ApiGen_Base_CodeType<string>) => {
     switch (statusCodeType.id.toLowerCase()) {
@@ -74,18 +77,28 @@ const StatusField: React.FunctionComponent<React.PropsWithChildren<IStatusFieldP
 
   const statusFound = translateStatusCode(statusCodeType);
   return (
-    <StyledBottomRow className="no-gutters justify-content-end align-items-end">
-      <Col />
-      <Col xs="auto" className="align-self-end d-flex">
-        <StyledSmallText>
-          <b>{preText}</b>
-        </StyledSmallText>
-        <RetiredWarning $variant={statusFound.colorVariant}>
-          <statusFound.icon size={16} />
-          {statusCodeType?.description.toUpperCase()}
-        </RetiredWarning>
-      </Col>
-    </StyledBottomRow>
+    <StyledBottomContainer>
+      <Row className="no-gutters justify-content-end align-items-end">
+        <Col />
+        <Col xs="auto" className="align-self-end d-flex">
+          <StyledSmallText>
+            <b>{preText}</b>
+          </StyledSmallText>
+          <RetiredWarning $variant={statusFound.colorVariant}>
+            <statusFound.icon size={16} />
+            {statusCodeType?.description.toUpperCase()}
+          </RetiredWarning>
+        </Col>
+      </Row>
+      {isValidIsoDateTime(statusCodeDate) && (
+        <Row className="no-gutters justify-content-end align-items-end">
+          <Col />
+          <Col xs="auto" className="align-self-end d-flex">
+            <StyledSmallText>{prettyFormatDate(statusCodeDate)}</StyledSmallText>
+          </Col>
+        </Row>
+      )}
+    </StyledBottomContainer>
   );
 };
 
@@ -138,7 +151,7 @@ const RetiredWarning = styled(InlineFlexDiv)<{ $variant: string }>`
   }}
 `;
 
-const StyledBottomRow = styled(Row)`
+const StyledBottomContainer = styled.div`
   margin-top: auto;
   padding-top: 1rem;
   padding-bottom: 1rem;

source/frontend/src/components/common/Section/SectionField.tsx

@@ -2,7 +2,7 @@ import cx from 'classnames';
 import { Col, Row } from 'react-bootstrap';
 import styled from 'styled-components';
 
-import TooltipIcon from '@/components/common/TooltipIcon';
+import { renderTooltip } from '@/utils/formUtils';
 
 interface ISectionFieldProps {
   label: React.ReactNode | string | null;
@@ -43,17 +43,6 @@ export const SectionField: React.FunctionComponent<
   );
 };
 
-function renderTooltip(tooltip?: React.ReactNode): React.ReactNode {
-  if (tooltip === undefined) {
-    return null;
-  }
-  if (typeof tooltip === 'string' || typeof tooltip === 'number') {
-    return <TooltipIcon toolTipId="section-field-tooltip" toolTip={tooltip} placement="auto" />;
-  }
-  // we got a custom tooltip - render that
-  return tooltip;
-}
-
 export const ContentCol = styled(Col)`
   &.required::before {
     content: '*';

source/frontend/src/features/leases/detail/LeasePages/LeasePageForm.tsx

@@ -22,7 +22,7 @@ export const LeaseViewPageForm: React.FunctionComponent<
 > = ({ children, leasePageName, isEditing, onEdit }) => {
   const { lease } = useContext(LeaseStateContext);
 
-  const DisplayLeasePeriodinationMessage = () => {
+  const displayLeaseTerminationMessage = () => {
     return (
       lease &&
       leasePageName === LeasePageNames.DETAILS &&
@@ -43,7 +43,7 @@ export const LeaseViewPageForm: React.FunctionComponent<
     <StyledLeasePage>
       <StyledEditWrapper className="mr-3 my-1">
         <StyledTerminationWrapper>
-          {DisplayLeasePeriodinationMessage() && (
+          {displayLeaseTerminationMessage() && (
             <StyledTerminationMessage>{getTerminationMessage()}</StyledTerminationMessage>
           )}
           <LeaseEditButton onEdit={onEdit} isEditing={isEditing} />

source/frontend/src/features/leases/models.ts

@@ -36,6 +36,7 @@ export class LeaseFormModel {
   expiryDate = '';
   renewalDate = '';
   startDate = '';
+  terminationDate = '';
   responsibilityEffectiveDate = '';
   paymentReceivableTypeCode = '';
   categoryTypeCode = '';
@@ -83,8 +84,11 @@ export class LeaseFormModel {
     leaseDetail.lFileNo = apiModel?.lFileNo || '';
     leaseDetail.psFileNo = apiModel?.psFileNo || '';
     leaseDetail.tfaFileNumber = apiModel?.tfaFileNumber || '';
-    leaseDetail.expiryDate = isValidIsoDateTime(apiModel?.expiryDate) ? apiModel!.expiryDate : '';
-    leaseDetail.startDate = isValidIsoDateTime(apiModel?.startDate) ? apiModel!.startDate : '';
+    leaseDetail.expiryDate = isValidIsoDateTime(apiModel?.expiryDate) ? apiModel.expiryDate : '';
+    leaseDetail.startDate = isValidIsoDateTime(apiModel?.startDate) ? apiModel.startDate : '';
+    leaseDetail.terminationDate = isValidIsoDateTime(apiModel?.terminationDate)
+      ? apiModel.terminationDate
+      : '';
     leaseDetail.responsibilityEffectiveDate = apiModel?.responsibilityEffectiveDate || '';
     leaseDetail.amount = parseFloat(apiModel?.amount?.toString() ?? '') || 0.0;
     leaseDetail.paymentReceivableTypeCode = fromTypeCode(apiModel?.paymentReceivableType) || '';
@@ -137,6 +141,9 @@ export class LeaseFormModel {
       tfaFileNumber: stringToNull(formLease.tfaFileNumber),
       expiryDate: isValidIsoDateTime(formLease.expiryDate) ? formLease.expiryDate : null,
       startDate: isValidIsoDateTime(formLease.startDate) ? formLease.startDate : null,
+      terminationDate: isValidIsoDateTime(formLease.terminationDate)
+        ? formLease.terminationDate
+        : null,
       responsibilityEffectiveDate: isValidIsoDateTime(formLease.responsibilityEffectiveDate)
         ? formLease.responsibilityEffectiveDate
         : null,
@@ -304,6 +311,7 @@ export const getDefaultFormLease: () => LeaseFormModel = () =>
     tenants: [],
     startDate: EpochIsoDateTime,
     expiryDate: EpochIsoDateTime,
+    terminationDate: null,
     lFileNo: '',
     tfaFileNumber: '',
     psFileNo: '',