chore: generate frontend CSVs using public planx-core client (#2759)

editor.planx.uk/src/@planx/components/Confirmation/Public.test.tsx

@@ -3,6 +3,16 @@ import { axe, setup } from "testUtils";
 
 import ConfirmationComponent from "./Public";
 
+jest.mock("@opensystemslab/planx-core", () => {
+  return {
+    CoreDomainClient: jest.fn().mockImplementation(() => ({
+      export: {
+        csvData: () => jest.fn(),
+      },
+    })),
+  };
+});
+
 it("should not have any accessibility violations", async () => {
   const { container } = setup(
     <ConfirmationComponent

editor.planx.uk/src/@planx/components/Confirmation/Public.tsx

@@ -2,16 +2,16 @@ import Check from "@mui/icons-material/Check";
 import Box from "@mui/material/Box";
 import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
+import { QuestionAndResponses } from "@opensystemslab/planx-core/types";
 import Card from "@planx/components/shared/Preview/Card";
 import { PublicProps } from "@planx/components/ui";
 import { useStore } from "pages/FlowEditor/lib/store";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import Banner from "ui/public/Banner";
 import FileDownload from "ui/public/FileDownload";
 import NumberedList from "ui/public/NumberedList";
 import ReactMarkdownOrHtml from "ui/shared/ReactMarkdownOrHtml";
 
-import { makeCsvData } from "../Send/uniform";
 import type { Confirmation } from "./model";
 
 const Table = styled("table")(({ theme }) => ({
@@ -31,23 +31,27 @@ const Table = styled("table")(({ theme }) => ({
 export type Props = PublicProps<Confirmation>;
 
 export default function ConfirmationComponent(props: Props) {
-  const [breadcrumbs, flow, passport, sessionId, flowName] = useStore(
-    (state) => [
-      state.breadcrumbs,
-      state.flow,
-      state.computePassport(),
-      state.sessionId,
-      state.flowName,
-    ],
-  );
+  const [data, setData] = useState<QuestionAndResponses[]>([]);
+
+  const [sessionId, saveToEmail, $public] = useStore((state) => [
+    state.sessionId,
+    state.saveToEmail,
+    state.$public,
+  ]);
+
+  useEffect(() => {
+    const makeCsvData = async () => {
+      if (sessionId && saveToEmail) {
+        const csvData = await $public({
+          session: { sessionId: sessionId, email: saveToEmail },
+        }).export.csvData(sessionId);
+        setData(csvData);
+      }
+    };
 
-  // make a CSV data structure based on the payloads we Send to BOPs/Uniform
-  const data = makeCsvData({
-    breadcrumbs,
-    flow,
-    flowName,
-    passport,
-    sessionId,
+    if (data?.length < 1) {
+      makeCsvData();
+    }
   });
 
   return (
@@ -80,14 +84,7 @@ export default function ConfirmationComponent(props: Props) {
           </Table>
         )}
 
-        {
-          <FileDownload
-            data={data}
-            filename={
-              props.details?.["Planning Application Reference"] || "application"
-            }
-          />
-        }
+        {<FileDownload data={data} filename={sessionId || "application"} />}
 
         {props.nextSteps && Boolean(props.nextSteps?.length) && (
           <Box pt={3}>