FEAT:added the action plan to the print view (#102)

Author: michelle-hadfield-nava

frontend/src/app/[locale]/generate-referrals/page.tsx

@@ -331,6 +331,7 @@ export default function Page() {
         <PrintableReferralsReport
           resources={result ?? []}
           clientDescription={clientDescription}
+          actionPlan={actionPlan}
         />
       </div>
     </>

frontend/src/components/ActionPlanDisplay.tsx

@@ -0,0 +1,25 @@
+import { ActionPlan } from "@/util/fetchActionPlan";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { FileText } from "lucide-react";
+import { parseMarkdownToHTML } from "@/util/markdown";
+export function ActionPlanDisplay({ actionPlan }: { actionPlan: ActionPlan }) {
+  return (
+    <Card className="bg-blue-50 border-blue-200 shadow-sm mb-5">
+      <CardHeader>
+        <CardTitle className="text-lg font-semibold text-blue-900 flex items-center gap-2">
+          <FileText className="w-5 h-5 text-blue-600" />
+          {actionPlan.title}
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="mb-3 text-black text-base">{actionPlan.summary}</div>
+        <div
+          className="prose prose-sm max-w-none text-gray-800"
+          dangerouslySetInnerHTML={{
+            __html: parseMarkdownToHTML(actionPlan.content),
+          }}
+        />
+      </CardContent>
+    </Card>
+  );
+}

frontend/src/components/ActionPlanSection.tsx

@@ -4,7 +4,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Spinner } from "@/components/ui/spinner";
 import { Resource } from "@/types/resources";
 import { ActionPlan } from "@/util/fetchActionPlan";
-import { parseMarkdownToHTML } from "@/util/markdown";
+import { ActionPlanDisplay } from "@/components/ActionPlanDisplay";
 
 interface ActionPlanSectionProps {
   resources: Resource[];
@@ -104,27 +104,7 @@ export function ActionPlanSection({
       </Card>
 
       {/* Action Plan Display */}
-      {actionPlan && (
-        <Card className="bg-blue-50 border-blue-200 shadow-sm mb-5">
-          <CardHeader>
-            <CardTitle className="text-lg font-semibold text-blue-900 flex items-center gap-2">
-              <FileText className="w-5 h-5 text-blue-600" />
-              {actionPlan.title}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="mb-3 text-black text-base">
-              {actionPlan.summary}
-            </div>
-            <div
-              className="prose prose-sm max-w-none text-gray-800"
-              dangerouslySetInnerHTML={{
-                __html: parseMarkdownToHTML(actionPlan.content),
-              }}
-            />
-          </CardContent>
-        </Card>
-      )}
+      {actionPlan && <ActionPlanDisplay actionPlan={actionPlan} />}
     </>
   );
 }

frontend/src/components/ClientDetailsInput.tsx

@@ -280,7 +280,7 @@ export function ClientDetailsInput({
           loading ||
           (selectedCategories.length === 0 && !clientDescription.trim())
         }
-        className="min-w-[16rem] generate-referrals-button text-lg pt-6 pb-6"
+        className="min-w-[16rem] w-full row-auto generate-referrals-button text-lg pt-6 pb-6"
         data-testid="findResourcesButton"
       >
         {!loading && (
@@ -290,7 +290,7 @@ export function ClientDetailsInput({
         )}
         {loading && (
           <>
-            <Spinner className="" />
+            <Spinner className="w-5 h-5" />
             Generating Resources...
           </>
         )}

frontend/src/util/printReferrals.tsx

@@ -2,13 +2,17 @@ import { Resource } from "@/types/resources";
 import React from "react";
 import ResourcesList from "@/components/ResourcesList";
 import ClientDetailsPromptBubble from "@/components/ClientDetailsPromptBubble";
+import { ActionPlanDisplay } from "@/components/ActionPlanDisplay";
+import { ActionPlan } from "@/util/fetchActionPlan";
 
 export function PrintableReferralsReport({
   resources,
   clientDescription,
+  actionPlan,
 }: {
   resources: Resource[];
   clientDescription: string;
+  actionPlan?: ActionPlan | null;
 }) {
   const date = new Date();
   return (
@@ -25,6 +29,11 @@ export function PrintableReferralsReport({
       </div>
       <ClientDetailsPromptBubble clientDescription={clientDescription} />
       <ResourcesList resources={resources ?? []} />
+      {actionPlan && (
+        <div className="print:mt-3">
+          <ActionPlanDisplay actionPlan={actionPlan} />
+        </div>
+      )}
 
       <div className="text-center text-slate-500 text-[12px] mt-5 pt-4 border-t border-slate-200">
         Report generated by Goodwill Central Texas GenAI Referral Tool

frontend/tests/jest.setup.ts

@@ -3,3 +3,8 @@ import "@testing-library/jest-dom";
 import { toHaveNoViolations } from "jest-axe";
 
 expect.extend(toHaveNoViolations);
+
+// Mock the markdown parser to avoid ES module issues with unified/remark/rehype
+jest.mock("../src/util/markdown", () => ({
+  parseMarkdownToHTML: (content: string) => content,
+}));

frontend/tests/util/printReferrals.test.tsx

@@ -1,6 +1,7 @@
 import { render, screen } from "tests/react-utils";
 import { PrintableReferralsReport } from "@/util/printReferrals";
 import { Resource } from "@/types/resources";
+import { ActionPlan } from "@/util/fetchActionPlan";
 
 describe("PrintableReferralsReport", () => {
   const mockResources: Resource[] = [
@@ -27,6 +28,14 @@ describe("PrintableReferralsReport", () => {
     },
   ];
 
+  const sampleActionPlan: ActionPlan = {
+    title: "Expunge your record after fulfilling probation requirements",
+    summary:
+      "Having a clean record will help you in your job application process.",
+    content:
+      "### Project RIO\\n**How to apply:**\\n- Call the Project RIO line and ask for the Austin office: 1-800-453-8140. ([hrw.org](https://www.hrw.org/news/2010/07/20/texas-prison-resources?utm_source=openai))\\n- Visit or mail to the TWC Project RIO office at 101 East 15th Street, Room 506-T, Austin, TX 78778 to set an intake appointment. ([hrw.org](https://www.hrw.org/news/2010/07/20/texas-prison-resources?utm_source=openai))\\n\\n**Documents needed:**\\n- Photo ID (state ID or driver’s license)\\n- Proof of release/parole papers or probation completion\\n- Social Security card or number\\n- Recent resume or list of past jobs (if available)\\n\\n**Timeline:**\\n- First appointment often same week to 2 weeks.\\n\\n**Key tip:**\\n- Tell staff you are eligible for employer incentives (Work Opportunity Tax Credit). Project RIO staff can connect you to employers and note hiring incentives. ([ojp.gov](https://www.ojp.gov/ncjrs/virtual-library/abstracts/project-rio-procedures-and-reporting-manual?utm_source=openai))\\n",
+  };
+
   it("displays the header with organization name", () => {
     render(
       <PrintableReferralsReport
@@ -152,4 +161,40 @@ describe("PrintableReferralsReport", () => {
       ),
     ).toBeInTheDocument();
   });
+
+  it("displays action plan when provided", () => {
+    render(
+      <PrintableReferralsReport
+        resources={mockResources}
+        clientDescription={"client needs help accessing Goodwill classes"}
+        actionPlan={sampleActionPlan}
+      />,
+    );
+
+    expect(screen.getByText(sampleActionPlan.title)).toBeInTheDocument();
+    expect(screen.getByText(sampleActionPlan.summary)).toBeInTheDocument();
+  });
+
+  it("does not display action plan section when actionPlan is null", () => {
+    render(
+      <PrintableReferralsReport
+        resources={mockResources}
+        clientDescription={"client needs help accessing Goodwill classes"}
+        actionPlan={null}
+      />,
+    );
+
+    expect(screen.queryByText(sampleActionPlan.title)).not.toBeInTheDocument();
+  });
+
+  it("does not display action plan section when actionPlan is undefined", () => {
+    render(
+      <PrintableReferralsReport
+        resources={mockResources}
+        clientDescription={"client needs help accessing Goodwill classes"}
+      />,
+    );
+
+    expect(screen.queryByText(sampleActionPlan.title)).not.toBeInTheDocument();
+  });
 });