psp-8912 show suggested text for fee determination.

source/frontend/src/features/leases/add/FeeDeterminationSubForm.test.tsx

@@ -10,6 +10,7 @@ import { fillInput, renderAsync } from '@/utils/test-utils';
 import { lookupCodesSlice } from '@/store/slices/lookupCodes';
 import { mockLookups } from '@/mocks/lookups.mock';
 import { Simulate } from 'react-dom/test-utils';
+import { SuggestedFeeCode } from '../leaseUtils';
 
 const history = createMemoryHistory();
 const storeState = {
@@ -44,7 +45,7 @@ describe('LeaseFeeDeterminationSubForm component', () => {
 
   it('displays expected Nominal fee', async () => {
     const {
-      component: { container },
+      component: { container, getByText },
     } = await setup({});
 
     let suggestedFeeField = await container.querySelector("span[data-testid='suggestedFee']");
@@ -57,11 +58,16 @@ describe('LeaseFeeDeterminationSubForm component', () => {
     });
 
     expect(suggestedFeeField).toHaveTextContent('$1 - Nominal');
+    expect(
+      getByText('No or nominal fee determinations should include justification in the', {
+        exact: false,
+      }),
+    ).toBeVisible();
   });
 
   it('displays expected LAF fee', async () => {
     const {
-      component: { container },
+      component: { container, getByText },
     } = await setup({});
 
     let suggestedFeeField = await container.querySelector("span[data-testid='suggestedFee']");
@@ -74,11 +80,16 @@ describe('LeaseFeeDeterminationSubForm component', () => {
     });
 
     expect(suggestedFeeField).toHaveTextContent('Licence Administration Fee (LAF) *');
+    expect(
+      getByText('License administration fees are charged when there is either: a financial', {
+        exact: false,
+      }),
+    ).toBeVisible();
   });
 
   it('displays expected FMV fee', async () => {
     const {
-      component: { container },
+      component: { container, getByText },
     } = await setup({});
 
     let suggestedFeeField = await container.querySelector("span[data-testid='suggestedFee']");
@@ -93,39 +104,40 @@ describe('LeaseFeeDeterminationSubForm component', () => {
     expect(suggestedFeeField).toHaveTextContent(
       'Fair Market Value (FMV) - (Licence Administration Fee Minimum)',
     );
+    expect(
+      getByText('Fair market value fee determination should include the square footage rate', {
+        exact: false,
+      }),
+    ).toBeVisible();
   });
 
-  it('displays expected LAF fee', async () => {
-    const {
-      component: { container },
-    } = await setup({});
-
-    let suggestedFeeField = await container.querySelector("span[data-testid='suggestedFee']");
-
-    expect(suggestedFeeField).toHaveTextContent('Unknown');
-
-    await act(async () => {
-      await fillInput(container, 'isPublicBenefit', 'true', 'select');
-      await fillInput(container, 'isFinancialGain', 'true', 'select');
-    });
-
-    expect(suggestedFeeField).toHaveTextContent('Licence Administration Fee (LAF) *');
-  });
-
-  it('displays expected LAF fee', async () => {
+  it('displays expected any fee', async () => {
     const {
-      component: { container },
+      component: { container, getByText },
     } = await setup({});
 
     let suggestedFeeField = await container.querySelector("span[data-testid='suggestedFee']");
 
     expect(suggestedFeeField).toHaveTextContent('Unknown');
 
     await act(async () => {
-      await fillInput(container, 'isPublicBenefit', 'true', 'select');
-      await fillInput(container, 'isFinancialGain', 'true', 'select');
+      await fillInput(container, 'isPublicBenefit', 'false', 'select');
+      await fillInput(container, 'isFinancialGain', 'false', 'select');
     });
 
-    expect(suggestedFeeField).toHaveTextContent('Licence Administration Fee (LAF) *');
+    expect(suggestedFeeField).toHaveTextContent(SuggestedFeeCode.ANY);
+    expect(
+      getByText('No or nominal fee determinations should include justification', { exact: false }),
+    ).toBeVisible();
+    expect(
+      getByText('Fair market value fee determination should include the square footage rate', {
+        exact: false,
+      }),
+    ).toBeVisible();
+    expect(
+      getByText('License administration fees are charged when there is either: a financial', {
+        exact: false,
+      }),
+    ).toBeVisible();
   });
 });

source/frontend/src/features/leases/add/FeeDeterminationSubForm.tsx

@@ -1,12 +1,13 @@
 import { FormikProps, getIn } from 'formik';
 import { useEffect, useState } from 'react';
+import styled from 'styled-components';
 
 import { TextArea } from '@/components/common/form';
 import { InlineYesNoSelect } from '@/components/common/form/styles';
 import { Section } from '@/components/common/Section/Section';
 import { SectionField } from '@/components/common/Section/SectionField';
 
-import { getSuggestedFee } from '../leaseUtils';
+import { getSuggestedFee, SuggestedFeeCode } from '../leaseUtils';
 import { LeaseFormModel } from '../models';
 
 export interface IFeeDeterminationSubFormProps {
@@ -20,7 +21,7 @@ const FeeDeterminationSubForm: React.FunctionComponent<IFeeDeterminationSubFormP
   const isPublicBenefit = getIn(values, 'isPublicBenefit');
   const financialGain = getIn(values, 'isFinancialGain');
 
-  const [fee, setFee] = useState('');
+  const [fee, setFee] = useState<SuggestedFeeCode>(SuggestedFeeCode.UNKNOWN);
 
   useEffect(() => {
     setFee(getSuggestedFee(isPublicBenefit, financialGain));
@@ -42,7 +43,33 @@ const FeeDeterminationSubForm: React.FunctionComponent<IFeeDeterminationSubFormP
         labelWidth="2"
         contentWidth="8"
       >
-        <span data-testid="suggestedFee">{fee}</span>
+        <span data-testid="suggestedFee">
+          {fee}
+          <StyledHelpText>
+            {(fee === SuggestedFeeCode.NOMINAL || fee === SuggestedFeeCode.ANY) && (
+              <p className="m-0">
+                <b>Nominal:&nbsp;</b>
+                No or nominal fee determinations should include justification in the Comments field.
+              </p>
+            )}
+            {(fee === SuggestedFeeCode.FMV || fee === SuggestedFeeCode.ANY) && (
+              <p className="m-0">
+                <b>FMV:&nbsp;</b>
+                Fair market value fee determination should include the square footage rate in the
+                Comments field. The rate determination summary or appraisal should be uploaded.
+              </p>
+            )}
+            {(fee === SuggestedFeeCode.LAF || fee === SuggestedFeeCode.ANY) && (
+              <p className="m-0">
+                <b>LAF:&nbsp;</b>
+                License administration fees are charged when there is either: a financial gain for
+                the licensee and a benefit to the public, or when there is no financial gain to the
+                licensee and there is no benefit for the public. The LAF can vary based on the
+                impact to the land, the length of the LOO, and if MOTI requires a legal review.
+              </p>
+            )}
+          </StyledHelpText>
+        </span>
       </SectionField>
 
       <SectionField
@@ -57,4 +84,9 @@ const FeeDeterminationSubForm: React.FunctionComponent<IFeeDeterminationSubFormP
   );
 };
 
+const StyledHelpText = styled.div`
+  font-size: 1.4rem;
+  margin-top: 1rem;
+`;
+
 export default FeeDeterminationSubForm;

source/frontend/src/features/leases/add/__snapshots__/FeeDeterminationSubForm.test.tsx.snap

@@ -49,6 +49,11 @@ exports[`LeaseFeeDeterminationSubForm component > renders as expected 1`] = `
   font-weight: bold;
 }
 
+.c5 {
+  font-size: 1.4rem;
+  margin-top: 1rem;
+}
+
 <div
     class="c0 form-section"
   >
@@ -193,6 +198,9 @@ exports[`LeaseFeeDeterminationSubForm component > renders as expected 1`] = `
             data-testid="suggestedFee"
           >
             Unknown
+            <div
+              class="c5"
+            />
           </span>
         </div>
       </div>

source/frontend/src/features/leases/detail/LeasePages/details/DetailFeeDetermination.test.tsx

@@ -71,6 +71,11 @@ describe('DetailFeeDetermination component', () => {
       },
     });
     expect(getByText('$1 - Nominal')).toBeVisible();
+    expect(
+      getByText('No or nominal fee determinations should include justification in the', {
+        exact: false,
+      }),
+    ).toBeVisible();
   });
 
   it('renders the suggested Fee field with LAF calculation', () => {
@@ -84,6 +89,11 @@ describe('DetailFeeDetermination component', () => {
       },
     });
     expect(getByText('Licence Administration Fee (LAF) *')).toBeVisible();
+    expect(
+      getByText('License administration fees are charged when there is either: a financial', {
+        exact: false,
+      }),
+    ).toBeVisible();
   });
 
   it('renders the suggested Fee field with FMV calculation', () => {
@@ -99,6 +109,11 @@ describe('DetailFeeDetermination component', () => {
     expect(
       getByText('Fair Market Value (FMV) - (Licence Administration Fee Minimum)'),
     ).toBeVisible();
+    expect(
+      getByText('Fair market value fee determination should include the square footage rate', {
+        exact: false,
+      }),
+    ).toBeVisible();
   });
 
   it('renders the suggested Fee field with non-defined calculation', () => {
@@ -112,6 +127,21 @@ describe('DetailFeeDetermination component', () => {
       },
     });
     expect(getByText('$1 / Fair Market Value / Licence Administration Fee')).toBeVisible();
+    expect(
+      getByText('No or nominal fee determinations should include justification in the', {
+        exact: false,
+      }),
+    ).toBeVisible();
+    expect(
+      getByText('Fair market value fee determination should include the square footage rate', {
+        exact: false,
+      }),
+    ).toBeVisible();
+    expect(
+      getByText('License administration fees are charged when there is either: a financial', {
+        exact: false,
+      }),
+    ).toBeVisible();
   });
 
   it('renders the suggested Fee field with unknown calculation', async () => {

source/frontend/src/features/leases/detail/LeasePages/details/DetailFeeDetermination.tsx

@@ -1,12 +1,13 @@
 import { getIn, useFormikContext } from 'formik';
+import styled from 'styled-components';
 
 import { YesNoSelect } from '@/components/common/form/YesNoSelect';
 import { Section } from '@/components/common/Section/Section';
 import { SectionField } from '@/components/common/Section/SectionField';
 import { ApiGen_Concepts_Lease } from '@/models/api/generated/ApiGen_Concepts_Lease';
 import { withNameSpace } from '@/utils/formUtils';
 
-import { getSuggestedFee } from '../../../leaseUtils';
+import { getSuggestedFee, SuggestedFeeCode } from '../../../leaseUtils';
 
 export interface IDetailFeeDeterminationProps {
   nameSpace?: string;
@@ -27,6 +28,7 @@ export const DetailFeeDetermination: React.FunctionComponent<
     formikProps.values,
     withNameSpace(nameSpace, 'feeDeterminationNote'),
   );
+  const fee = getSuggestedFee(isPublicBenefit, isFinancialGain);
 
   return (
     <Section initiallyExpanded={true} isCollapsable={true} header="Fee Determination">
@@ -43,7 +45,31 @@ export const DetailFeeDetermination: React.FunctionComponent<
         tooltip="Licence Administration Fee (LAF) *: If the financial gain far outweighs the public benefit, Fair Market Value should be considered over Licence Administration Fee"
         labelWidth="3"
       >
-        <span data-testid="suggestedFee">{getSuggestedFee(isPublicBenefit, isFinancialGain)}</span>
+        <span data-testid="suggestedFee">{fee}</span>
+        <StyledHelpText>
+          {(fee === SuggestedFeeCode.NOMINAL || fee === SuggestedFeeCode.ANY) && (
+            <p className="m-0">
+              <b>Nominal:&nbsp;</b>
+              No or nominal fee determinations should include justification in the Comments field.
+            </p>
+          )}
+          {(fee === SuggestedFeeCode.FMV || fee === SuggestedFeeCode.ANY) && (
+            <p className="m-0">
+              <b>FMV:&nbsp;</b>
+              Fair market value fee determination should include the square footage rate in the
+              Comments field. The rate determination summary or appraisal should be uploaded.
+            </p>
+          )}
+          {(fee === SuggestedFeeCode.LAF || fee === SuggestedFeeCode.ANY) && (
+            <p className="m-0">
+              <b>LAF:&nbsp;</b>
+              License administration fees are charged when there is either: a financial gain for the
+              licensee and a benefit to the public, or when there is no financial gain to the
+              licensee and there is no benefit for the public. The LAF can vary based on the impact
+              to the land, the length of the LOO, and if MOTI requires a legal review.
+            </p>
+          )}
+        </StyledHelpText>
       </SectionField>
 
       <SectionField
@@ -56,3 +82,8 @@ export const DetailFeeDetermination: React.FunctionComponent<
     </Section>
   );
 };
+
+const StyledHelpText = styled.div`
+  font-size: 1.4rem;
+  margin-top: 1rem;
+`;

source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/DetailFeeDetermination.test.tsx.snap

@@ -36,6 +36,11 @@ exports[`DetailFeeDetermination component > renders a complete lease as expected
   font-weight: bold;
 }
 
+.c5 {
+  font-size: 1.4rem;
+  margin-top: 1rem;
+}
+
 <div
     class="c0 form-section"
   >
@@ -206,6 +211,18 @@ exports[`DetailFeeDetermination component > renders a complete lease as expected
           >
             $1 - Nominal
           </span>
+          <div
+            class="c5"
+          >
+            <p
+              class="m-0"
+            >
+              <b>
+                Nominal: 
+              </b>
+              No or nominal fee determinations should include justification in the Comments field.
+            </p>
+          </div>
         </div>
       </div>
       <div
@@ -289,6 +306,11 @@ exports[`DetailFeeDetermination component > renders minimally as expected 1`] =
   font-weight: bold;
 }
 
+.c5 {
+  font-size: 1.4rem;
+  margin-top: 1rem;
+}
+
 <div
     class="c0 form-section"
   >
@@ -459,6 +481,9 @@ exports[`DetailFeeDetermination component > renders minimally as expected 1`] =
           >
             Unknown
           </span>
+          <div
+            class="c5"
+          />
         </div>
       </div>
       <div