Indicate "expired" on property information header

bcgov · Mar 5, 2024 · de98da2 · de98da2
1 parent 114f834
commit de98da2
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 2 deletions.
diff --git a/source/frontend/src/assets/scss/_variables.module.scss b/source/frontend/src/assets/scss/_variables.module.scss
@@ -60,4 +60,6 @@
   summaryBorderColor: $summary-border-color;
   summaryColor: $summary-color;
   textColor: $text-color;
+  expiredColor: $expired-color;
+  expiredBackgroundColor: $expired-background-color;
 }
diff --git a/source/frontend/src/assets/scss/colors.scss b/source/frontend/src/assets/scss/colors.scss
@@ -35,6 +35,8 @@ $subtle-color: #aaaaaa;
 $summary-color: #f9f1c6;
 $summary-border-color: #fcba19;
 $font-warning-color: #6c4a00;
+$expired-color: #6c4a00;
+$expired-background-color: #f9f1c6;
 // table ui
 $table-hover-color: #dee2e6;
 $table-header-text-color: #494949;

diff --git a/source/frontend/src/features/mapSideBar/property/MotiInventoryHeader.tsx b/source/frontend/src/features/mapSideBar/property/MotiInventoryHeader.tsx
@@ -1,11 +1,13 @@
 import React from 'react';
 import { Col, Row } from 'react-bootstrap';
+import { AiOutlineExclamationCircle } from 'react-icons/ai';
 import { FaSearchPlus } from 'react-icons/fa';
 import styled from 'styled-components';
 
 import { StyledIconButton } from '@/components/common/buttons';
 import { HeaderField } from '@/components/common/HeaderField/HeaderField';
 import LoadingBackdrop from '@/components/common/LoadingBackdrop';
+import { InlineFlexDiv } from '@/components/common/styles';
 import TooltipWrapper from '@/components/common/TooltipWrapper';
 import { IMapProperty } from '@/components/propertySelector/models';
 import { ComposedProperty } from '@/features/mapSideBar/property/ComposedProperty';
@@ -30,6 +32,14 @@ export const MotiInventoryHeader: React.FunctionComponent<IMotiInventoryHeaderPr
   }
 
   const isLoading = props.isLoading;
+
+  const isExpired = React.useMemo(() => {
+    if (exists(apiProperty) && apiProperty.isRetired) {
+      return true;
+    }
+    return false;
+  }, [apiProperty]);
+
   return (
     <>
       <LoadingBackdrop show={isLoading} parentScreen={true} />
@@ -63,6 +73,17 @@ export const MotiInventoryHeader: React.FunctionComponent<IMotiInventoryHeaderPr
               </HeaderField>
             </Col>
           </Row>
+          {isExpired && (
+            <Row className="no-gutters">
+              <Col xs="8"></Col>
+              <Col className="d-flex justify-content-end pr-4">
+                <ExpiredWarning>
+                  <AiOutlineExclamationCircle size={16} />
+                  &nbsp; EXPIRED
+                </ExpiredWarning>
+              </Col>
+            </Row>
+          )}
         </Col>
         <Col xs="auto" className="d-flex p-0 align-items-center justify-content-end">
           <TooltipWrapper tooltipId="property-zoom-map" tooltip="Zoom Map">
@@ -88,3 +109,16 @@ const StyledDivider = styled.div`
   border-bottom-color: grey;
   border-bottom-width: 0.1rem;
 `;
+
+export const ExpiredWarning = styled(InlineFlexDiv)`
+  text-transform: uppercase;
+  color: ${props => props.theme.css.expiredColor};
+  background-color: ${props => props.theme.css.expiredBackgroundColor};
+  border-radius: 0.4rem;
+  letter-spacing: 0.1rem;
+  padding: 0.2rem 0.5rem;
+  font-family: 'BCSans-Bold';
+  font-size: 1.4rem;
+  align-items: center;
+  width: fit-content;
+`;
diff --git a/...d/src/features/mapSideBar/property/tabs/propertyDetails/detail/PropertyDetailsTabView.tsx b/...d/src/features/mapSideBar/property/tabs/propertyDetails/detail/PropertyDetailsTabView.tsx
@@ -74,7 +74,7 @@ export const PropertyDetailsTabView: React.FunctionComponent<IPropertyDetailsTab
     <StyledSummarySection>
       <LoadingBackdrop show={loading} parentScreen={true} />
       <StyledEditWrapper className="mr-3 my-1">
-        {hasClaim(Claims.PROPERTY_EDIT) && canEditDetails() ? (
+        {hasClaim(Claims.PROPERTY_EDIT) && canEditDetails(property) ? (
           <EditButton
             title="Edit property details"
             onClick={() => {
@@ -83,7 +83,7 @@ export const PropertyDetailsTabView: React.FunctionComponent<IPropertyDetailsTab
             }}
           />
         ) : null}
-        {!canEditDetails() ? (
+        {!canEditDetails(property) ? (
           <TooltipIcon
             toolTipId={`${property?.id || 0}-summary-cannot-edit-tooltip`}
             toolTip="Retired records are referenced for historical purposes only and cannot be edited or deleted."