PIMS-15: Ltsa Land Review UI

frontend/src/actions/parcelsActions.ts

@@ -173,4 +173,121 @@ export interface IBuildingDetail {
   position?: [number, number]; // (optional) a way to override the positioning of the map popup
 }
 
+export interface ILTSAOrderModel {
+  order: {
+    productType: string;
+    fileReference: string;
+    productOrderParameters: {
+      titleNumber: number;
+      landTitleDistrictCode: string;
+      includeCancelledInfo: boolean;
+    };
+    orderId: string;
+    status: string;
+    billingInfo: {
+      billingModel: string;
+      productName: string;
+      productCode: string;
+      feeExempted: boolean;
+      productFee: number;
+      serviceCharge: number;
+      subtotalFee: number;
+      productFeeTax: number;
+      serviceChargeTax: number;
+      totalTax: number;
+      totalFee: number;
+    };
+    orderedProduct: {
+      fieldedData: {
+        titleStatus: string;
+        titleIdentifier: {
+          titleNumber: string;
+          landTitleDistrict: string;
+        };
+        tombstone: {
+          applicationReceivedDate: string;
+          enteredDate: string;
+          titleRemarks: string;
+          rootOfTitle: string;
+          marketValueAmount: number;
+          fromTitles: [];
+          natureOfTransfers: [transferReason: string];
+        };
+        ownershipGroups: [
+          {
+            jointTenancyIndication: boolean;
+            interestFractionNumerator: string;
+            interestFractionDenominator: string;
+            ownershipRemarks: string;
+            titleOwners: [
+              {
+                lastNameOrCorpName1: string;
+                givenName: string;
+                incorporationNumber: string;
+                occupationDescription: string;
+                address: {
+                  addressLine1: string;
+                  addressLine2: string;
+                  city: string;
+                  province: string;
+                  provinceName: string;
+                  country: string;
+                  postalCode: string;
+                };
+              },
+            ];
+          },
+        ];
+        taxAuthorities: [
+          {
+            authorityName: string;
+          },
+        ];
+        descriptionsOfLand: [
+          {
+            parcelIdentifier: string;
+            fullLegalDescription: string;
+            parcelStatus: string;
+          },
+        ];
+        legalNotationsOnTitle: [];
+        chargesOnTitle: [
+          {
+            chargeNumber: string;
+            status: string;
+            enteredDate: string;
+            interAlia: string;
+            chargeRemarks: string;
+            charge: {
+              chargeNumber: string;
+              transactionType: string;
+              applicationReceivedDate: string;
+              chargeOwnershipGroups: [
+                {
+                  jointTenancyIndication: boolean;
+                  interestFractionNumerator: string;
+                  interestFractionDenominator: string;
+                  ownershipRemarks: string;
+                  chargeOwners: [
+                    {
+                      lastNameOrCorpName1: string;
+                      incorporationNumber: string;
+                    },
+                  ];
+                },
+              ];
+              certificatesOfCharge: [];
+              correctionsAltos1: [];
+              corrections: [];
+            };
+            chargeRelease: object;
+          },
+        ];
+        duplicateCertificatesOfTitle: [];
+        titleTransfersOrDispositions: [];
+      };
+    };
+  };
+}
+
 export type IPropertyDetail = IParcelDetail | IBuildingDetail;

frontend/src/components/common/form/FastCurrencyInput.tsx

@@ -123,7 +123,7 @@ const CurrencyInput = ({
           data-testid={testid}
           style={{
             width: customInputWidth ?? '85%',
-            border: required ? 'solid 2px #063970' : 'solid 1px grey',
+            border: disabled ? 'none' : 'solid 1px var(--bs-border-color)',
           }}
           value={value}
           mask={currencyMask}

frontend/src/components/common/form/FastInput.tsx

@@ -40,6 +40,7 @@ type OptionalAttributes = {
   displayErrorTooltips?: boolean;
   /** Determine style of input if needed */
   style?: CSSProperties;
+  formGroupStyle?: CSSProperties;
   /** Display error even if field hasn't been touched */
   errorPrompt?: boolean;
 };

frontend/src/components/common/form/Input.tsx

@@ -42,6 +42,7 @@ type OptionalAttributes = {
   errorPrompt?: boolean;
   /** add inline style to the input component */
   style?: CSSProperties;
+  customRowStyle?: CSSProperties;
 };
 
 // only "field" is required for <Input>, the rest are optional
@@ -59,6 +60,7 @@ export const Input: React.FC<InputProps> = ({
   outerClassName,
   pattern,
   style,
+  customRowStyle,
   required,
   disabled,
   custom,
@@ -98,7 +100,7 @@ export const Input: React.FC<InputProps> = ({
     <Row
       controlid={`input-${field}`}
       className={classNames(!!required ? 'required' : '', outerClassName)}
-      style={{ alignItems: 'center' }}
+      style={customRowStyle || { alignItems: 'center' }}
     >
       {!!label && (
         <Col md="auto">

frontend/src/components/common/form/Typeahead.tsx

@@ -121,7 +121,12 @@ export function TypeaheadField<T extends TypeaheadModel>({
         <Typeahead<T>
           {...rest}
           options={options}
-          inputProps={{ ...rest.inputProps, name: name, id: `${name}-field` }}
+          inputProps={{
+            ...rest.inputProps,
+            name: name,
+            id: `${name}-field`,
+            style: { width: '100%' },
+          }}
           isInvalid={hasError as any}
           highlightOnlyResult
           isValid={!hideValidation && isValid}

frontend/src/features/mapSideBar/SidebarContents/LandForm.tsx

@@ -76,10 +76,12 @@ const FormFooter = styled.div`
   display: flex;
   width: 100%;
   height: 70px;
+  padding-left: 10px;
   align-items: center;
   position: sticky;
   background-color: ${variables.filterBackgroundColor};
   bottom: -20px;
+  border-top: 10px solid white;
 `;
 
 const FillRemainingSpace = styled.span`
@@ -373,6 +375,14 @@ const LandForm: React.FC<IParentLandForm> = (props: IParentLandForm) => {
     },
   ];
 
+  const getLTSA = async (id: string) => {
+    try {
+      return await api.getLTSA(id);
+    } catch (e) {
+      return undefined;
+    }
+  };
+
   const initialValues = {
     activeStep: props.initialValues?.id ? steps.length - 1 : 0,
     activeTab: 0,
@@ -385,8 +395,10 @@ const LandForm: React.FC<IParentLandForm> = (props: IParentLandForm) => {
         Object.values(EvaluationKeys),
       ),
       fiscals: getMergedFinancials(props.initialValues?.fiscals ?? [], Object.values(FiscalKeys)),
+      ltsa: props.initialValues?.pid ? getLTSA(props.initialValues.pid) : undefined,
     },
   };
+
   const isViewOrUpdate = !!initialValues?.data?.id;
   initialValues.data.agencyId = initialValues.data.agencyId
     ? initialValues.data.agencyId

frontend/src/features/mapSideBar/SidebarContents/subforms/LandReviewPage.scss

@@ -78,11 +78,7 @@
   .associated-buildings,
   .associated-land,
   .PropertyListView.container-fluid {
-    margin: 10px;
     width: 100%;
-    padding: 20px;
-    background-color: $filter-background-color;
-    border-radius: 10px;
     font-size: small;
     .form-control,
     .GeocoderAutoComplete,