diff --git a/source/backend/apimodels/Models/Concepts/Lease/LeaseMap.cs b/source/backend/apimodels/Models/Concepts/Lease/LeaseMap.cs index b8e30133bf..3437350e09 100644 --- a/source/backend/apimodels/Models/Concepts/Lease/LeaseMap.cs +++ b/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()) diff --git a/source/backend/apimodels/Models/Concepts/Lease/LeaseModel.cs b/source/backend/apimodels/Models/Concepts/Lease/LeaseModel.cs index 0a209152ff..245e099e7f 100644 --- a/source/backend/apimodels/Models/Concepts/Lease/LeaseModel.cs +++ b/source/backend/apimodels/Models/Concepts/Lease/LeaseModel.cs @@ -78,15 +78,20 @@ public class LeaseModel : FileWithChecklistModel /// public string OtherType { get; set; } + /// + /// get/set - The original start date of the lease. + /// + public DateOnly? StartDate { get; set; } + /// /// get/set - The calculated expiry date of the lease. /// public DateOnly? ExpiryDate { get; set; } /// - /// get/set - The original start date of the lease. + /// get/set - Date that the lease was terminated. /// - public DateOnly? StartDate { get; set; } + public DateOnly? TerminationDate { get; set; } /// /// get/set - The lease renewal count. diff --git a/source/frontend/src/components/common/HeaderField/HeaderField.tsx b/source/frontend/src/components/common/HeaderField/HeaderField.tsx index f4d49afdc6..9a092b7e6e 100644 --- a/source/frontend/src/components/common/HeaderField/HeaderField.tsx +++ b/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> = export const HeaderLabelCol: React.FC = props => ( - - - + {props.label && ( + + {props.label} + {props.tooltip && {renderTooltip(props.tooltip)}} + + )} ); @@ -48,3 +56,8 @@ export const HeaderContentCol: React.FC< ); }; + +const StyledHeaderLabel = styled.label` + font-weight: bold; + white-space: nowrap; +`; diff --git a/source/frontend/src/components/common/HeaderField/StatusField.tsx b/source/frontend/src/components/common/HeaderField/StatusField.tsx index a1ba3fea25..2cb756277d 100644 --- a/source/frontend/src/components/common/HeaderField/StatusField.tsx +++ b/source/frontend/src/components/common/HeaderField/StatusField.tsx @@ -7,6 +7,7 @@ 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'; @@ -14,6 +15,7 @@ import { StyledSmallText } from './AuditSection'; interface IStatusFieldProps { statusCodeType: ApiGen_Base_CodeType; preText?: string; + statusCodeDate?: string; } interface StatusStyle { @@ -35,6 +37,7 @@ const statusDictionary: Dictionary = { const StatusField: React.FunctionComponent> = ({ statusCodeType, preText, + statusCodeDate, }) => { const translateStatusCode = (statusCodeType: ApiGen_Base_CodeType) => { switch (statusCodeType.id.toLowerCase()) { @@ -74,18 +77,28 @@ const StatusField: React.FunctionComponent - - - - {preText} - - - - {statusCodeType?.description.toUpperCase()} - - - + + + + + + {preText} + + + + {statusCodeType?.description.toUpperCase()} + + + + {isValidIsoDateTime(statusCodeDate) && ( + + + + {prettyFormatDate(statusCodeDate)} + + + )} + ); }; @@ -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; diff --git a/source/frontend/src/components/common/Section/SectionField.tsx b/source/frontend/src/components/common/Section/SectionField.tsx index 4546b954cf..dbc2078dd2 100644 --- a/source/frontend/src/components/common/Section/SectionField.tsx +++ b/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 ; - } - // we got a custom tooltip - render that - return tooltip; -} - export const ContentCol = styled(Col)` &.required::before { content: '*'; diff --git a/source/frontend/src/features/leases/detail/LeasePages/LeasePageForm.tsx b/source/frontend/src/features/leases/detail/LeasePages/LeasePageForm.tsx index 7832246b6a..f104e8beb7 100644 --- a/source/frontend/src/features/leases/detail/LeasePages/LeasePageForm.tsx +++ b/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< - {DisplayLeasePeriodinationMessage() && ( + {displayLeaseTerminationMessage() && ( {getTerminationMessage()} )} diff --git a/source/frontend/src/features/leases/models.ts b/source/frontend/src/features/leases/models.ts index 3de0a0f711..6713fceb51 100644 --- a/source/frontend/src/features/leases/models.ts +++ b/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: '', 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 feaf833076..baeb72e60d 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 @@ -147,63 +147,63 @@ exports[`AcquisitionView component > renders as expected 1`] = ` margin-right: 0; } -.c26 { +.c27 { height: 100%; } -.c26 .tab-content { +.c27 .tab-content { border-radius: 0 0.4rem 0.4rem 0.4rem; height: calc(100% - 2.5rem); overflow-y: auto; } -.c26 .tab-content .tab-pane { +.c27 .tab-content .tab-pane { position: relative; } -.c27 { +.c28 { background-color: white; font-size: 1.4rem; border-color: transparent; } -.c27 .nav-tabs { +.c28 .nav-tabs { height: auto; } -.c27 .nav-item { +.c28 .nav-item { min-width: 5rem; padding: 0.1rem 1.2rem; } -.c27 .nav-item:hover { +.c28 .nav-item:hover { border-color: transparent; -webkit-text-decoration: underline; text-decoration: underline; } -.c27 .nav-item.active { +.c28 .nav-item.active { font-family: 'BCSans-Bold'; border-color: transparent; } -.c17 { +.c18 { height: 100%; } -.c18 { +.c19 { overflow: auto; height: 100%; width: 100%; } -.c24 { +.c25 { overflow: auto; height: 100%; width: 100%; } -.c13 { +.c14 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -229,7 +229,7 @@ exports[`AcquisitionView component > renders as expected 1`] = ` margin: auto; } -.c35 { +.c36 { width: 100%; height: 100%; position: absolute; @@ -299,7 +299,7 @@ exports[`AcquisitionView component > renders as expected 1`] = ` align-items: center; } -.c15 { +.c16 { width: 100%; position: relative; overflow: auto; @@ -308,7 +308,7 @@ exports[`AcquisitionView component > renders as expected 1`] = ` flex: 1; } -.c16 { +.c17 { height: 100%; width: 100%; } @@ -327,7 +327,7 @@ exports[`AcquisitionView component > renders as expected 1`] = ` cursor: pointer; } -.c25 { +.c26 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -344,21 +344,21 @@ exports[`AcquisitionView component > renders as expected 1`] = ` overflow-y: auto; } -.c28 { +.c29 { padding-top: 1rem; } -.c29 { +.c30 { text-align: right; } -.c31 { +.c32 { font-weight: bold; border-bottom: 0.2rem solid; margin-bottom: 2rem; } -.c30 { +.c31 { margin: 1.6rem; padding: 1.6rem; background-color: white; @@ -366,24 +366,29 @@ exports[`AcquisitionView component > renders as expected 1`] = ` border-radius: 0.5rem; } -.c33.required::before { +.c34.required::before { content: '*'; position: absolute; top: 0.75rem; left: 0rem; } -.c32 { +.c33 { font-weight: bold; white-space: nowrap; } -.c11 { +.c12 { font-size: 0.87em; line-height: 1.9; } -.c14 { +.c10 { + font-weight: bold; + white-space: nowrap; +} + +.c15 { font-family: 'BCSans-Bold'; font-size: 1.4rem; border-radius: 0.4rem; @@ -402,7 +407,7 @@ exports[`AcquisitionView component > renders as expected 1`] = ` background-color: undefined; } -.c12 { +.c13 { margin-top: auto; padding-top: 1rem; padding-bottom: 1rem; @@ -416,7 +421,7 @@ exports[`AcquisitionView component > renders as expected 1`] = ` border-bottom-width: 0.1rem; } -.c10 { +.c11 { height: 100%; display: -webkit-box; display: -webkit-flex; @@ -427,25 +432,25 @@ exports[`AcquisitionView component > renders as expected 1`] = ` flex-direction: column; } -.c19 { +.c20 { text-align: left; padding: 0px; margin: 0px; width: 100%; } -.c20 { +.c21 { font-weight: normal; cursor: pointer; padding-bottom: 0.5rem; } -.c20.selected { +.c21.selected { font-weight: bold; cursor: default; } -.c23 { +.c24 { font-size: 1.5rem; border-radius: 50%; opacity: 0.8; @@ -466,7 +471,7 @@ exports[`AcquisitionView component > renders as expected 1`] = ` align-items: center; } -.c21 { +.c22 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -483,12 +488,12 @@ exports[`AcquisitionView component > renders as expected 1`] = ` border-bottom: 1px solid; } -.c22 { +.c23 { font-size: 1.4rem; line-height: 2.2rem; } -.c34 { +.c35 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -605,11 +610,11 @@ exports[`AcquisitionView component > renders as expected 1`] = `
- - - +
renders as expected 1`] = `
- - - +
renders as expected 1`] = `
- - - +
renders as expected 1`] = `
- - - +
renders as expected 1`] = ` class="col" >
renders as expected 1`] = ` class="text-right col" > Created: @@ -711,7 +716,7 @@ exports[`AcquisitionView component > renders as expected 1`] = ` class="text-right col" > Updated: @@ -730,42 +735,46 @@ exports[`AcquisitionView component > renders as expected 1`] = `
-
- - - File: - -
+
- - - - - ACTIVE + + File: + + +
+ + + + + ACTIVE +
@@ -774,22 +783,22 @@ exports[`AcquisitionView component > renders as expected 1`] = `
renders as expected 1`] = ` File Summary
Properties
renders as expected 1`] = ` class="pr-2 col-auto" >
1
@@ -847,7 +856,7 @@ exports[`AcquisitionView component > renders as expected 1`] = `
renders as expected 1`] = ` class="pr-2 col-auto" >
2
@@ -871,16 +880,16 @@ exports[`AcquisitionView component > renders as expected 1`] = `

renders as expected 1`] = ` class="pr-0 text-left col-4" >
Test ACQ File
@@ -1121,7 +1130,7 @@ exports[`AcquisitionView component > renders as expected 1`] = ` class="pr-0 text-left col-4" >

legacy file number
@@ -1161,13 +1170,13 @@ exports[`AcquisitionView component > renders as expected 1`] = ` class="pr-0 text-left col-4" >
renders as expected 1`] = ` class="pr-0 text-left col-4" >
Consensual Agreement
@@ -1195,13 +1204,13 @@ exports[`AcquisitionView component > renders as expected 1`] = ` class="pr-0 text-left col-4" >
South Coast Region
@@ -1209,10 +1218,10 @@ exports[`AcquisitionView component > renders as expected 1`] = `

renders as expected 1`] = ` class="collapse show" >
renders as expected 1`] = ` class="pr-0 text-left col-4" >
test representative comment
diff --git a/source/frontend/src/features/mapSideBar/acquisition/common/__snapshots__/AcquisitionHeader.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/common/__snapshots__/AcquisitionHeader.test.tsx.snap index 46e9fecfbc..742366a6e7 100644 --- a/source/frontend/src/features/mapSideBar/acquisition/common/__snapshots__/AcquisitionHeader.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/acquisition/common/__snapshots__/AcquisitionHeader.test.tsx.snap @@ -6,11 +6,16 @@ exports[`AcquisitionHeader component > renders as expected when no data is provi class="Toastify" />
- .c2 { + .c3 { font-size: 0.87em; line-height: 1.9; } +.c1 { + font-weight: bold; + white-space: nowrap; +} + .c0 { margin-top: 0.5rem; margin-bottom: 1.5rem; @@ -19,7 +24,7 @@ exports[`AcquisitionHeader component > renders as expected when no data is provi border-bottom-width: 0.1rem; } -.c1 { +.c2 { height: 100%; display: -webkit-box; display: -webkit-flex; @@ -42,11 +47,11 @@ exports[`AcquisitionHeader component > renders as expected when no data is provi
- - - +
renders as expected when no data is provi
- - - +
renders as expected when no data is provi
- - - +
renders as expected when no data is provi
- - - +
renders as expected when no data is provi class="col" >
renders as expected when no data is provi class="text-right col" > Created: @@ -144,7 +149,7 @@ exports[`AcquisitionHeader component > renders as expected when no data is provi class="text-right col" > Updated: diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/detail/__snapshots__/CompensationRequisitionDetailView.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/detail/__snapshots__/CompensationRequisitionDetailView.test.tsx.snap index 74ae8622d4..160bcf3eca 100644 --- a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/detail/__snapshots__/CompensationRequisitionDetailView.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/detail/__snapshots__/CompensationRequisitionDetailView.test.tsx.snap @@ -6,7 +6,7 @@ exports[`Compensation Detail View Component > renders as expected 1`] = ` class="Toastify" />
- .c6.btn { + .c7.btn { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -37,55 +37,55 @@ exports[`Compensation Detail View Component > renders as expected 1`] = ` height: 3.8rem; } -.c6.btn .Button__value { +.c7.btn .Button__value { width: -webkit-max-content; width: -moz-max-content; width: max-content; } -.c6.btn:hover { +.c7.btn:hover { -webkit-text-decoration: underline; text-decoration: underline; opacity: 0.8; } -.c6.btn:focus { +.c7.btn:focus { outline-width: 0.4rem; outline-style: solid; outline-offset: 1px; box-shadow: none; } -.c6.btn.btn-primary { +.c7.btn.btn-primary { border: none; } -.c6.btn.btn-secondary { +.c7.btn.btn-secondary { background: none; } -.c6.btn.btn-info { +.c7.btn.btn-info { border: none; background: none; padding-left: 0.6rem; padding-right: 0.6rem; } -.c6.btn.btn-info:hover, -.c6.btn.btn-info:active, -.c6.btn.btn-info:focus { +.c7.btn.btn-info:hover, +.c7.btn.btn-info:active, +.c7.btn.btn-info:focus { background: none; } -.c6.btn.btn-light { +.c7.btn.btn-light { border: none; } -.c6.btn.btn-dark { +.c7.btn.btn-dark { border: none; } -.c6.btn.btn-link { +.c7.btn.btn-link { font-size: 1.6rem; font-weight: 400; background: none; @@ -106,9 +106,9 @@ exports[`Compensation Detail View Component > renders as expected 1`] = ` padding: 0; } -.c6.btn.btn-link:hover, -.c6.btn.btn-link:active, -.c6.btn.btn-link:focus { +.c7.btn.btn-link:hover, +.c7.btn.btn-link:active, +.c7.btn.btn-link:focus { -webkit-text-decoration: underline; text-decoration: underline; border: none; @@ -117,14 +117,14 @@ exports[`Compensation Detail View Component > renders as expected 1`] = ` outline: none; } -.c6.btn.btn-link:disabled, -.c6.btn.btn-link.disabled { +.c7.btn.btn-link:disabled, +.c7.btn.btn-link.disabled { background: none; pointer-events: none; } -.c6.btn:disabled, -.c6.btn:disabled:hover { +.c7.btn:disabled, +.c7.btn:disabled:hover { box-shadow: none; -webkit-user-select: none; -moz-user-select: none; @@ -135,19 +135,24 @@ exports[`Compensation Detail View Component > renders as expected 1`] = ` opacity: 0.65; } -.c6.Button .Button__icon { +.c7.Button .Button__icon { margin-right: 1.6rem; } -.c6.Button--icon-only:focus { +.c7.Button--icon-only:focus { outline: none; } -.c6.Button--icon-only .Button__icon { +.c7.Button--icon-only .Button__icon { margin-right: 0; } -.c9 { +.c3 { + font-weight: bold; + white-space: nowrap; +} + +.c10 { float: right; cursor: pointer; } @@ -156,7 +161,7 @@ exports[`Compensation Detail View Component > renders as expected 1`] = ` padding-top: 1rem; } -.c3 { +.c4 { font-weight: bold; border-bottom: 0.2rem solid; margin-bottom: 2rem; @@ -170,14 +175,14 @@ exports[`Compensation Detail View Component > renders as expected 1`] = ` border-radius: 0.5rem; } -.c8.required::before { +.c9.required::before { content: '*'; position: absolute; top: 0.75rem; left: 0rem; } -.c7 { +.c8 { font-weight: bold; white-space: nowrap; } @@ -188,7 +193,7 @@ exports[`Compensation Detail View Component > renders as expected 1`] = ` font-weight: bold; } -.c4 { +.c5 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -207,7 +212,7 @@ exports[`Compensation Detail View Component > renders as expected 1`] = ` margin-bottom: 0.25rem; } -.c5 { +.c6 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -217,12 +222,12 @@ exports[`Compensation Detail View Component > renders as expected 1`] = ` flex-direction: row-reverse; } -.c11 { +.c12 { font-size: 16px; font-weight: 600; } -.c10 { +.c11 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -261,11 +266,11 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
- - - +
renders as expected 1`] = `
- - - +
renders as expected 1`] = `
- - - +
renders as expected 1`] = `
- - - +
renders as expected 1`] = `
- - - +
renders as expected 1`] = ` class="c1 form-section" >

renders as expected 1`] = ` class="col" >
Requisition Details
renders as expected 1`] = `
renders as expected 1`] = ` class="pr-0 text-left col-4" >
renders as expected 1`] = ` class="pr-0 text-left col-4" >
renders as expected 1`] = ` class="pr-0 text-left col-4" >
@@ -565,13 +570,13 @@ exports[`Compensation Detail View Component > renders as expected 1`] = ` class="pr-0 text-left col-12" >

renders as expected 1`] = ` class="c1 form-section" >

renders as expected 1`] = ` class="pl-8 col-auto" > renders as expected 1`] = ` class="pr-0 text-left col-4" >
00048
@@ -649,13 +654,13 @@ exports[`Compensation Detail View Component > renders as expected 1`] = ` class="pr-0 text-left col-4" >

renders as expected 1`] = ` class="pr-0 text-left col-4" >
renders as expected 1`] = ` class="pr-0 text-left col-4" >
renders as expected 1`] = ` class="pr-0 text-left col-4" >
renders as expected 1`] = ` class="pr-0 text-left col-4" >
renders as expected 1`] = ` class="pr-0 text-left col-4" >
renders as expected 1`] = ` class="pr-0 text-left col-4" >
@@ -760,7 +765,7 @@ exports[`Compensation Detail View Component > renders as expected 1`] = ` class="c1 form-section" >

renders as expected 1`] = ` class="pl-8 col-auto" > renders as expected 1`] = ` class="pr-0 text-left col-4" >
@@ -829,13 +834,13 @@ exports[`Compensation Detail View Component > renders as expected 1`] = ` class="pr-0 text-left col-4" >
$0.00
@@ -847,13 +852,13 @@ exports[`Compensation Detail View Component > renders as expected 1`] = ` class="pr-0 text-left col-4" >

No
@@ -865,13 +870,13 @@ exports[`Compensation Detail View Component > renders as expected 1`] = ` class="pr-0 text-left col-4" >
$0.00
@@ -882,7 +887,7 @@ exports[`Compensation Detail View Component > renders as expected 1`] = ` class="c1 form-section" >

renders as expected 1`] = ` class="pl-8 col-auto" > renders as expected 1`] = ` class="pr-0 text-left col-12" >

renders as expected 1`] = ` class="collapse show" >

renders as expected 1`] = ` margin-right: 0; } -.c17 { +.c18 { height: 100%; } -.c18 { +.c19 { overflow: auto; height: 100%; width: 100%; } -.c24 { +.c25 { overflow: auto; height: 100%; width: 100%; } -.c13 { +.c14 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -233,7 +233,7 @@ exports[`DispositionView component > renders as expected 1`] = ` align-items: center; } -.c15 { +.c16 { width: 100%; position: relative; overflow: auto; @@ -242,7 +242,7 @@ exports[`DispositionView component > renders as expected 1`] = ` flex: 1; } -.c16 { +.c17 { height: 100%; width: 100%; } @@ -261,47 +261,47 @@ exports[`DispositionView component > renders as expected 1`] = ` cursor: pointer; } -.c26 { +.c27 { height: 100%; } -.c26 .tab-content { +.c27 .tab-content { border-radius: 0 0.4rem 0.4rem 0.4rem; height: calc(100% - 2.5rem); overflow-y: auto; } -.c26 .tab-content .tab-pane { +.c27 .tab-content .tab-pane { position: relative; } -.c27 { +.c28 { background-color: white; font-size: 1.4rem; border-color: transparent; } -.c27 .nav-tabs { +.c28 .nav-tabs { height: auto; } -.c27 .nav-item { +.c28 .nav-item { min-width: 5rem; padding: 0.1rem 1.2rem; } -.c27 .nav-item:hover { +.c28 .nav-item:hover { border-color: transparent; -webkit-text-decoration: underline; text-decoration: underline; } -.c27 .nav-item.active { +.c28 .nav-item.active { font-family: 'BCSans-Bold'; border-color: transparent; } -.c25 { +.c26 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -318,21 +318,21 @@ exports[`DispositionView component > renders as expected 1`] = ` overflow-y: auto; } -.c28 { +.c29 { padding-top: 1rem; } -.c29 { +.c30 { text-align: right; } -.c33 { +.c34 { font-weight: bold; border-bottom: 0.2rem solid; margin-bottom: 2rem; } -.c30 { +.c31 { margin: 1.6rem; padding: 1.6rem; background-color: white; @@ -340,29 +340,34 @@ exports[`DispositionView component > renders as expected 1`] = ` border-radius: 0.5rem; } -.c32.required::before { +.c33.required::before { content: '*'; position: absolute; top: 0.75rem; left: 0rem; } -.c31 { +.c32 { font-weight: bold; white-space: nowrap; } -.c34 { +.c35 { padding: 0 0.4rem; display: block; } -.c11 { +.c12 { font-size: 0.87em; line-height: 1.9; } -.c14 { +.c10 { + font-weight: bold; + white-space: nowrap; +} + +.c15 { font-family: 'BCSans-Bold'; font-size: 1.4rem; border-radius: 0.4rem; @@ -381,7 +386,7 @@ exports[`DispositionView component > renders as expected 1`] = ` background-color: undefined; } -.c12 { +.c13 { margin-top: auto; padding-top: 1rem; padding-bottom: 1rem; @@ -395,7 +400,7 @@ exports[`DispositionView component > renders as expected 1`] = ` border-bottom-width: 0.1rem; } -.c10 { +.c11 { height: 100%; display: -webkit-box; display: -webkit-flex; @@ -406,25 +411,25 @@ exports[`DispositionView component > renders as expected 1`] = ` flex-direction: column; } -.c19 { +.c20 { text-align: left; padding: 0px; margin: 0px; width: 100%; } -.c20 { +.c21 { font-weight: normal; cursor: pointer; padding-bottom: 0.5rem; } -.c20.selected { +.c21.selected { font-weight: bold; cursor: default; } -.c23 { +.c24 { font-size: 1.5rem; border-radius: 50%; opacity: 0.8; @@ -445,7 +450,7 @@ exports[`DispositionView component > renders as expected 1`] = ` align-items: center; } -.c21 { +.c22 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -462,7 +467,7 @@ exports[`DispositionView component > renders as expected 1`] = ` border-bottom: 1px solid; } -.c22 { +.c23 { font-size: 1.4rem; line-height: 2.2rem; } @@ -585,11 +590,11 @@ exports[`DispositionView component > renders as expected 1`] = `
- - - +
renders as expected 1`] = `
- - - +
renders as expected 1`] = ` class="col-5" >
renders as expected 1`] = ` class="text-right col" > Created: @@ -654,7 +659,7 @@ exports[`DispositionView component > renders as expected 1`] = ` class="text-right col" > Updated: @@ -673,42 +678,46 @@ exports[`DispositionView component > renders as expected 1`] = `
-
- - - File: - -
+
- - - - - DRAFT + + File: + + +
+ + + + + DRAFT +
@@ -717,22 +726,22 @@ exports[`DispositionView component > renders as expected 1`] = `
renders as expected 1`] = ` File Summary
Properties
renders as expected 1`] = ` class="pr-2 col-auto" >
1
@@ -792,16 +801,16 @@ exports[`DispositionView component > renders as expected 1`] = `
renders as expected 1`] = ` class="pr-0 text-left col-5" >
Road Closure
@@ -1122,7 +1131,7 @@ exports[`DispositionView component > renders as expected 1`] = ` class="pr-0 text-left col-5" >
Surplus Declaration
@@ -1162,7 +1171,7 @@ exports[`DispositionView component > renders as expected 1`] = ` class="pr-0 text-left col-5" >
Jun 29, 1917
@@ -1202,13 +1211,13 @@ exports[`DispositionView component > renders as expected 1`] = ` class="pr-0 text-left col-5" >
Pending Litigation
@@ -1220,13 +1229,13 @@ exports[`DispositionView component > renders as expected 1`] = ` class="pr-0 text-left col-5" >
PLMB
@@ -1238,13 +1247,13 @@ exports[`DispositionView component > renders as expected 1`] = ` class="pr-0 text-left col-5" >
Cannot determine
@@ -1252,10 +1261,10 @@ exports[`DispositionView component > renders as expected 1`] = `

renders as expected 1`] = ` class="pr-0 text-left col-5" >
renders as expected when no data is provi class="Toastify" />
- .c2 { + .c3 { font-size: 0.87em; line-height: 1.9; } +.c1 { + font-weight: bold; + white-space: nowrap; +} + .c0 { margin-top: 0.5rem; margin-bottom: 1.5rem; @@ -19,7 +24,7 @@ exports[`DispositionHeader component > renders as expected when no data is provi border-bottom-width: 0.1rem; } -.c1 { +.c2 { height: 100%; display: -webkit-box; display: -webkit-flex; @@ -42,11 +47,11 @@ exports[`DispositionHeader component > renders as expected when no data is provi
- - - +
renders as expected when no data is provi
- - - +
renders as expected when no data is provi class="col-5" >
renders as expected when no data is provi class="text-right col" > Created: @@ -111,7 +116,7 @@ exports[`DispositionHeader component > renders as expected when no data is provi class="text-right col" > Updated: diff --git a/source/frontend/src/features/mapSideBar/lease/common/LeaseHeader.test.tsx b/source/frontend/src/features/mapSideBar/lease/common/LeaseHeader.test.tsx index 75828079c2..37f1c4e7e9 100644 --- a/source/frontend/src/features/mapSideBar/lease/common/LeaseHeader.test.tsx +++ b/source/frontend/src/features/mapSideBar/lease/common/LeaseHeader.test.tsx @@ -4,6 +4,8 @@ import { act, render, RenderOptions } from '@/utils/test-utils'; import { server } from '@/mocks/msw/server'; import { getUserMock } from '@/mocks/user.mock'; +import { ApiGen_CodeTypes_LeaseAccountTypes } from '@/models/api/generated/ApiGen_CodeTypes_LeaseAccountTypes'; +import { ApiGen_CodeTypes_LeaseStatusTypes } from '@/models/api/generated/ApiGen_CodeTypes_LeaseStatusTypes'; import { http, HttpResponse } from 'msw'; import { ILeaseHeaderProps, LeaseHeader } from './LeaseHeader'; @@ -17,6 +19,12 @@ describe('LeaseHeader component', () => { return { ...utils }; }; + beforeAll(() => { + // Lock the current datetime as some of the tests have date-dependent fields (e.g. isLeaseExpired) + vi.useFakeTimers(); + vi.setSystemTime(new Date('04 Dec 2023 10:15:00 GMT').getTime()); + }); + beforeEach(() => { server.use( http.get('/api/users/info/*', () => HttpResponse.json(getUserMock())), @@ -28,6 +36,11 @@ describe('LeaseHeader component', () => { vi.clearAllMocks(); }); + afterAll(() => { + // back to reality... + vi.useRealTimers(); + }); + it('renders as expected when no data is provided', async () => { const testLease = getMockApiLease(); const { asFragment } = setup({ lease: testLease, lastUpdatedBy: null }); @@ -80,4 +93,87 @@ describe('LeaseHeader component', () => { getAllByText(new RegExp(prettyFormatUTCDate(testLease.appLastUpdateTimestamp)))[0], ).toBeVisible(); }); + + it('renders whether the lease is RECEIVABLE or PAYABLE', async () => { + const testLease = getMockApiLease(); + const { getByText } = setup({ + lease: { + ...testLease, + paymentReceivableType: { + id: ApiGen_CodeTypes_LeaseAccountTypes.RCVBL, + description: 'Receivable', + displayOrder: null, + isDisabled: false, + }, + }, + lastUpdatedBy: null, + }); + await act(async () => {}); + + expect(getByText(testLease.lFileNo!)).toBeVisible(); + expect(getByText('Receivable')).toBeVisible(); + }); + + it('renders indicator for EXPIRED leases', async () => { + const testLease = getMockApiLease(); + const { getByText } = setup({ + lease: { + ...testLease, + expiryDate: new Date('2022-05-28').toISOString(), + }, + lastUpdatedBy: null, + }); + await act(async () => {}); + + expect(getByText(testLease.lFileNo!)).toBeVisible(); + expect(getByText('EXPIRED')).toBeVisible(); + }); + + it.each([ + [ + ApiGen_CodeTypes_LeaseStatusTypes.TERMINATED, + 'Terminated', + new Date('2022-05-28').toISOString(), + true, + ], + [ + ApiGen_CodeTypes_LeaseStatusTypes.ACTIVE, + 'Active', + new Date('2022-05-28').toISOString(), + false, + ], + ])( + 'renders termination date only for TERMINATED leases - status: %s', + async ( + statusId: string, + statusDescription: string, + testDate: string, + shouldDisplay: boolean, + ) => { + const testLease = getMockApiLease(); + const { getByText, getAllByText, queryByText } = setup({ + lease: { + ...testLease, + fileStatusTypeCode: { + id: statusId, + description: statusDescription, + displayOrder: null, + isDisabled: false, + }, + terminationDate: testDate, + }, + lastUpdatedBy: null, + }); + await act(async () => {}); + + expect(getByText(testLease.lFileNo!)).toBeVisible(); + expect(getByText(statusDescription.toUpperCase())).toBeVisible(); + + if (shouldDisplay) { + expect(getAllByText(new RegExp(prettyFormatUTCDate(testDate)))[0]).toBeVisible(); + } else { + expect(queryByText(new RegExp(prettyFormatUTCDate(testDate)))).toBeNull(); + } + }, + ); }); diff --git a/source/frontend/src/features/mapSideBar/lease/common/LeaseHeader.tsx b/source/frontend/src/features/mapSideBar/lease/common/LeaseHeader.tsx index 392fff3c2a..9bcd970e15 100644 --- a/source/frontend/src/features/mapSideBar/lease/common/LeaseHeader.tsx +++ b/source/frontend/src/features/mapSideBar/lease/common/LeaseHeader.tsx @@ -15,6 +15,7 @@ import { StyledFiller } from '@/components/common/HeaderField/styles'; import { InlineFlexDiv } from '@/components/common/styles'; import { LeaseHeaderAddresses } from '@/features/leases/detail/LeaseHeaderAddresses'; import { Api_LastUpdatedBy } from '@/models/api/File'; +import { ApiGen_CodeTypes_LeaseStatusTypes } from '@/models/api/generated/ApiGen_CodeTypes_LeaseStatusTypes'; import { ApiGen_Concepts_Lease } from '@/models/api/generated/ApiGen_Concepts_Lease'; import { exists, prettyFormatDate } from '@/utils'; @@ -36,30 +37,34 @@ export const LeaseHeader: React.FC = ({ lease, lastUpdatedBy - + {lease?.lFileNo ?? ''} {lease?.paymentReceivableType?.description ?? ''} - + } /> - + } /> - - + + {prettyFormatDate(lease?.startDate)} - + {prettyFormatDate(lease?.expiryDate)} @@ -74,6 +79,8 @@ export const LeaseHeader: React.FC = ({ lease, lastUpdatedBy @@ -82,7 +89,15 @@ export const LeaseHeader: React.FC = ({ lease, lastUpdatedBy {exists(lease?.fileStatusTypeCode) && ( - + )} diff --git a/source/frontend/src/features/mapSideBar/lease/common/__snapshots__/LeaseHeader.test.tsx.snap b/source/frontend/src/features/mapSideBar/lease/common/__snapshots__/LeaseHeader.test.tsx.snap index 30410b816a..dfb9a1e203 100644 --- a/source/frontend/src/features/mapSideBar/lease/common/__snapshots__/LeaseHeader.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/lease/common/__snapshots__/LeaseHeader.test.tsx.snap @@ -6,7 +6,7 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1` class="Toastify" />
- .c2.btn { + .c3.btn { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -37,55 +37,55 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1` height: 3.8rem; } -.c2.btn .Button__value { +.c3.btn .Button__value { width: -webkit-max-content; width: -moz-max-content; width: max-content; } -.c2.btn:hover { +.c3.btn:hover { -webkit-text-decoration: underline; text-decoration: underline; opacity: 0.8; } -.c2.btn:focus { +.c3.btn:focus { outline-width: 0.4rem; outline-style: solid; outline-offset: 1px; box-shadow: none; } -.c2.btn.btn-primary { +.c3.btn.btn-primary { border: none; } -.c2.btn.btn-secondary { +.c3.btn.btn-secondary { background: none; } -.c2.btn.btn-info { +.c3.btn.btn-info { border: none; background: none; padding-left: 0.6rem; padding-right: 0.6rem; } -.c2.btn.btn-info:hover, -.c2.btn.btn-info:active, -.c2.btn.btn-info:focus { +.c3.btn.btn-info:hover, +.c3.btn.btn-info:active, +.c3.btn.btn-info:focus { background: none; } -.c2.btn.btn-light { +.c3.btn.btn-light { border: none; } -.c2.btn.btn-dark { +.c3.btn.btn-dark { border: none; } -.c2.btn.btn-link { +.c3.btn.btn-link { font-size: 1.6rem; font-weight: 400; background: none; @@ -106,9 +106,9 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1` padding: 0; } -.c2.btn.btn-link:hover, -.c2.btn.btn-link:active, -.c2.btn.btn-link:focus { +.c3.btn.btn-link:hover, +.c3.btn.btn-link:active, +.c3.btn.btn-link:focus { -webkit-text-decoration: underline; text-decoration: underline; border: none; @@ -117,14 +117,14 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1` outline: none; } -.c2.btn.btn-link:disabled, -.c2.btn.btn-link.disabled { +.c3.btn.btn-link:disabled, +.c3.btn.btn-link.disabled { background: none; pointer-events: none; } -.c2.btn:disabled, -.c2.btn:disabled:hover { +.c3.btn:disabled, +.c3.btn:disabled:hover { box-shadow: none; -webkit-user-select: none; -moz-user-select: none; @@ -135,24 +135,29 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1` opacity: 0.65; } -.c2.Button .Button__icon { +.c3.Button .Button__icon { margin-right: 1.6rem; } -.c2.Button--icon-only:focus { +.c3.Button--icon-only:focus { outline: none; } -.c2.Button--icon-only .Button__icon { +.c3.Button--icon-only .Button__icon { margin-right: 0; } -.c4 { +.c5 { font-size: 0.87em; line-height: 1.9; } -.c3 { +.c1 { + font-weight: bold; + white-space: nowrap; +} + +.c4 { height: 100%; display: -webkit-box; display: -webkit-flex; @@ -171,7 +176,7 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1` border-bottom-width: 0.1rem; } -.c1 { +.c2 { font-weight: bold; } @@ -188,16 +193,16 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1` class="row" >
- - - +
renders as expected when no data is provided 1` L-0000001
@@ -213,16 +218,16 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1` class="row" >
- - - +
@@ -231,16 +236,16 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1` class="row" >
- - - +
@@ -248,7 +253,7 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1`
- - - +
renders as expected when no data is provided 1`
- - - +
renders as expected when no data is provided 1` class="row" >
- - - +
@@ -319,7 +368,7 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1` class="col" >
renders as expected when no data is provided 1` class="text-right col" > Created: @@ -353,7 +402,7 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1` class="text-right col" > Updated: diff --git a/source/frontend/src/features/mapSideBar/project/__snapshots__/ProjectContainerView.test.tsx.snap b/source/frontend/src/features/mapSideBar/project/__snapshots__/ProjectContainerView.test.tsx.snap index abd30dc655..f021e7c8d9 100644 --- a/source/frontend/src/features/mapSideBar/project/__snapshots__/ProjectContainerView.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/project/__snapshots__/ProjectContainerView.test.tsx.snap @@ -147,7 +147,7 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = ` margin-right: 0; } -.c13 { +.c14 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -217,7 +217,7 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = ` align-items: center; } -.c15 { +.c16 { width: 100%; position: relative; overflow: auto; @@ -226,7 +226,7 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = ` flex: 1; } -.c16 { +.c17 { height: 100%; width: 100%; } @@ -245,7 +245,7 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = ` cursor: pointer; } -.c17 { +.c18 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -262,12 +262,17 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = ` overflow-y: auto; } -.c11 { +.c12 { font-size: 0.87em; line-height: 1.9; } -.c14 { +.c10 { + font-weight: bold; + white-space: nowrap; +} + +.c15 { font-family: 'BCSans-Bold'; font-size: 1.4rem; border-radius: 0.4rem; @@ -286,7 +291,7 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = ` background-color: undefined; } -.c12 { +.c13 { margin-top: auto; padding-top: 1rem; padding-bottom: 1rem; @@ -300,7 +305,7 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = ` border-bottom-width: 0.1rem; } -.c10 { +.c11 { height: 100%; display: -webkit-box; display: -webkit-flex; @@ -311,42 +316,42 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = ` flex-direction: column; } -.c18 { +.c19 { height: 100%; } -.c18 .tab-content { +.c19 .tab-content { border-radius: 0 0.4rem 0.4rem 0.4rem; height: calc(100% - 2.5rem); overflow-y: auto; } -.c18 .tab-content .tab-pane { +.c19 .tab-content .tab-pane { position: relative; } -.c19 { +.c20 { background-color: white; font-size: 1.4rem; border-color: transparent; } -.c19 .nav-tabs { +.c20 .nav-tabs { height: auto; } -.c19 .nav-item { +.c20 .nav-item { min-width: 5rem; padding: 0.1rem 1.2rem; } -.c19 .nav-item:hover { +.c20 .nav-item:hover { border-color: transparent; -webkit-text-decoration: underline; text-decoration: underline; } -.c19 .nav-item.active { +.c20 .nav-item.active { font-family: 'BCSans-Bold'; border-color: transparent; } @@ -458,11 +463,11 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
- - - +
matches snapshot 1`] = `
- - - +
matches snapshot 1`] = ` class="col" >
matches snapshot 1`] = ` class="text-right col" > Created: @@ -527,7 +532,7 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = ` class="text-right col" > Updated: @@ -546,40 +551,44 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
-
- - -
+
- + + +
- - - - ACTIVE (AC) + + + + + ACTIVE (AC) +
@@ -588,19 +597,19 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `