From 8e494acabfc52d01b65de80d81c7a0cf751582dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Mon, 16 Sep 2024 13:40:48 +0100
Subject: [PATCH 1/2] feat(page): SummaryList view of Page component

---
 .../components/shared/Preview/SummaryList.tsx | 25 +++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx b/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx
index 26245b8d01..1fcb1ff93f 100644
--- a/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx
+++ b/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx
@@ -9,6 +9,7 @@ import {
 } from "@opensystemslab/planx-core/types";
 import { PASSPORT_UPLOAD_KEY } from "@planx/components/DrawBoundary/model";
 import { PASSPORT_REQUESTED_FILES_KEY } from "@planx/components/FileUploadAndLabel/model";
+import type { Page } from "@planx/components/Page/model";
 import { ConfirmationDialog } from "components/ConfirmationDialog";
 import format from "date-fns/format";
 import { useAnalyticsTracking } from "pages/FlowEditor/lib/analytics/provider";
@@ -16,6 +17,8 @@ import { Store, useStore } from "pages/FlowEditor/lib/store";
 import React, { useState } from "react";
 import { FONT_WEIGHT_SEMI_BOLD } from "theme";
 
+import { SchemaUserResponse } from "../Schema/model";
+
 export default SummaryListsBySections;
 
 /** These component types don't use their node title as the descriptive list title */
@@ -108,8 +111,7 @@ const presentationalComponents: {
   [TYPES.Notice]: undefined,
   [TYPES.NextSteps]: undefined,
   [TYPES.NumberInput]: NumberInput,
-  // TODO!
-  [TYPES.Page]: undefined,
+  [TYPES.Page]: Page,
   [TYPES.Pay]: undefined,
   [TYPES.PlanningConstraints]: undefined,
   [TYPES.PropertyInformation]: undefined,
@@ -618,6 +620,25 @@ function FileUploadAndLabel(props: ComponentProps) {
   );
 }
 
+function Page(props: ComponentProps) {
+  const answers = getAnswersByNode(props) as SchemaUserResponse[];
+  const fields = (props.node.data as Page).schema.fields;
+
+  return (
+    <>
+      <Box component="dt">{props.node.data.title}</Box>
+      <Box component="dd" sx={{ gap: 2, display: "flex", flexDirection: "column" }}>
+        {fields.map((field) => (
+          <Box>
+            <Typography fontWeight={FONT_WEIGHT_SEMI_BOLD}>{field.data.title}</Typography>
+            <Typography>{answers[0][field.data.fn]}</Typography>
+          </Box>
+        ))}
+      </Box>
+    </>
+  );
+}
+
 function Debug(props: ComponentProps) {
   return (
     <>

From 11aa28ae166ea1506ae6e1e806f6a887ecd69fea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Tue, 17 Sep 2024 10:15:14 +0100
Subject: [PATCH 2/2] fix: Hande map outputs

---
 .../components/shared/Preview/SummaryList.tsx   | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx b/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx
index 1fcb1ff93f..51679b5ff8 100644
--- a/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx
+++ b/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx
@@ -627,11 +627,20 @@ function Page(props: ComponentProps) {
   return (
     <>
       <Box component="dt">{props.node.data.title}</Box>
-      <Box component="dd" sx={{ gap: 2, display: "flex", flexDirection: "column" }}>
+      <Box
+        component="dd"
+        sx={{ gap: 2, display: "flex", flexDirection: "column" }}
+      >
         {fields.map((field) => (
-          <Box>
-            <Typography fontWeight={FONT_WEIGHT_SEMI_BOLD}>{field.data.title}</Typography>
-            <Typography>{answers[0][field.data.fn]}</Typography>
+          <Box key={field.data.fn}>
+            <Typography fontWeight={FONT_WEIGHT_SEMI_BOLD}>
+              {field.data.title}
+            </Typography>
+            <Typography>
+              {field.type === "map"
+                ? `${answers[0][field.data.fn].length || 0} features`
+                : answers[0][field.data.fn]}
+            </Typography>
           </Box>
         ))}
       </Box>