add branded results header

Gary-Community-Ventures · Dec 5, 2023 · 4cb4da0 · 4cb4da0
1 parent d770e09
commit 4cb4da0
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 14 deletions.
diff --git a/src/Components/Referrer/Referrer.tsx b/src/Components/Referrer/Referrer.tsx
@@ -3,6 +3,7 @@ import { Context } from '../Wrapper/Wrapper';
 import Header from '../Header/Header';
 import TwoOneOneFooter from '../TwoOneOneComponents/TwoOneOneFooter/TwoOneOneFooter';
 import TwoOneOneHeader from '../TwoOneOneComponents/TwoOneOneHeader/TwoOneOneHeader';
+import { FormattedMessage } from 'react-intl';
 
 type HeaderProps = {
   handleTextFieldChange: (event: Event) => void;
@@ -25,3 +26,41 @@ export const BrandedFooter = () => {
   }
   return <></>;
 };
+
+type ResultsHeaderProps = {
+  programCount: number;
+  programsValue: number;
+  taxCreditsValue: number;
+};
+
+export const BrandedResultsHeader = ({ programsValue, taxCreditsValue, programCount }: ResultsHeaderProps) => {
+  const { formData } = useContext(Context);
+
+  if (formData.immutableReferrer === 'lgs') {
+    return (
+      <h1 className="bottom-border program-value-header">
+        {programCount}
+        <FormattedMessage
+          id="results.return-programsUpToLabel"
+          defaultMessage=" programs with an estimated value of "
+        />
+        ${Math.round(programsValue / 12).toLocaleString()}
+        <FormattedMessage
+          id="results.return-perMonthLabel_lsg"
+          defaultMessage=" monthly in cash or reduced expenses for you to consider"
+        />
+      </h1>
+    );
+  }
+
+  return (
+    <h1 className="bottom-border program-value-header">
+      {programCount}
+      <FormattedMessage id="results.return-programsUpToLabel" defaultMessage=" programs with an estimated value of " />$
+      {Math.round(programsValue / 12).toLocaleString()}
+      <FormattedMessage id="results.return-perMonthLabel" defaultMessage=" monthly in cash or reduced expenses, and " />
+      ${Math.round(taxCreditsValue).toLocaleString()}
+      <FormattedMessage id="results.return-taxCredits" defaultMessage=" in tax credits for you to consider " />
+    </h1>
+  );
+};
diff --git a/src/Components/Results/Results.tsx b/src/Components/Results/Results.tsx
@@ -51,6 +51,7 @@ import {
 import { citizenshipFilterOperators } from '../FilterSection/CitizenshipPopover.tsx';
 import type { CitizenLabels } from '../../Assets/citizenshipFilterFormControlLabels';
 import EmailResults from '../EmailResults/EmailResults.tsx';
+import { BrandedResultsHeader } from '../Referrer/Referrer.tsx';
 
 export type UpdateFilterArg =
   | {
@@ -414,20 +415,11 @@ const Results = ({ handleTextFieldChange }: ResultsProps) => {
     } else {
       return (
         <Grid xs={12} item>
-          <h1 className="bottom-border program-value-header">
-            {citizenshipRowCount}
-            <FormattedMessage
-              id="results.return-programsUpToLabel"
-              defaultMessage=" programs with an estimated value of "
-            />
-            ${Math.round(totalCitizenshipDollarValue.cashOrReducedExpenses / 12).toLocaleString()}
-            <FormattedMessage
-              id="results.return-perMonthLabel"
-              defaultMessage=" monthly in cash or reduced expenses, and "
-            />
-            ${Math.round(totalCitizenshipDollarValue.taxCredits).toLocaleString()}
-            <FormattedMessage id="results.return-taxCredits" defaultMessage=" in tax credits for you to consider " />
-          </h1>
+          <BrandedResultsHeader
+            programCount={citizenshipRowCount}
+            programsValue={totalCitizenshipDollarValue.cashOrReducedExpenses}
+            taxCreditsValue={totalCitizenshipDollarValue.taxCredits}
+          />
         </Grid>
       );
     }