use a presentational component to mock state for storybook

theopensystemslab · Aug 21, 2024 · 5d77838 · 5d77838
1 parent 9f3c8d8
commit 5d77838
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 53 deletions.
diff --git a/editor.planx.uk/src/@planx/components/Confirmation/Confirmation.stories.tsx b/editor.planx.uk/src/@planx/components/Confirmation/Confirmation.stories.tsx
@@ -3,12 +3,12 @@ import React from "react";
 
 import Wrapper from "../fixtures/Wrapper";
 import Editor from "./Editor";
-import Confirmation from "./Public";
+import Confirmation, { Presentational } from "./Public";
 
 const meta = {
   title: "PlanX Components/Confirmation",
-  component: Confirmation,
-} satisfies Meta<typeof Confirmation>;
+  component: Presentational,
+} satisfies Meta<typeof Presentational>;
 
 export default meta;
 
@@ -20,6 +20,19 @@ export const Basic = {
     description: `A payment receipt has been emailed to you. You will also 
     receive an email to confirm when your application has been received.`,
     color: { background: "rgba(1, 99, 96, 0.1)", text: "#000" },
+    sessionId: "123-t3st-456",
+    applicableDetails: {
+      "Planning Application Reference": "LBL–LDCP-2138261",
+      "Property Address": "45, Greenfield Road, London SE22 7FF",
+      "Application type":
+        "Application for a Certificate of Lawfulness – Proposed",
+      Submitted: new Date().toLocaleDateString("en-gb", {
+        day: "numeric",
+        month: "long",
+        year: "numeric",
+      }),
+      "GOV.UK Payment reference": "qe817o3kds9474rfkfldfHSK874JB",
+    },
     nextSteps: [
       { title: "Validation", description: "Something will be validated" },
       { title: "Site visit", description: "Someone will visit" },
@@ -36,6 +49,7 @@ export const Basic = {
       <br/><br/>
       What did you think of this service? Please give us your feedback using the link in the footer below.
     `,
+    data: [],
   },
 } satisfies Story;
 

diff --git a/editor.planx.uk/src/@planx/components/Confirmation/Public.tsx b/editor.planx.uk/src/@planx/components/Confirmation/Public.tsx
@@ -20,11 +20,38 @@ export type Props = PublicProps<Confirmation>;
 export default function ConfirmationComponent(props: Props) {
   const [data, setData] = useState<QuestionAndResponses[]>([]);
 
-  const [sessionId, saveToEmail, $public] = useStore((state) => [
-    state.sessionId,
-    state.saveToEmail,
-    state.$public,
-  ]);
+  const [sessionId, saveToEmail, $public, passport, govUkPayment, flowName] =
+    useStore((state) => [
+      state.sessionId,
+      state.saveToEmail,
+      state.$public,
+      state.computePassport(),
+      state.govUkPayment,
+      state.flowName,
+    ]);
+
+  const details = {
+    "Application reference": sessionId,
+    "Property address": passport.data?._address?.title,
+    "Application type": [
+      flowName.replace("Apply", "Application"),
+      getWorkStatus(passport),
+    ]
+      .filter(Boolean)
+      .join(" - "),
+    "GOV.UK payment reference": govUkPayment?.payment_id,
+    "Paid at":
+      govUkPayment?.created_date &&
+      new Date(govUkPayment.created_date).toLocaleDateString("en-gb", {
+        day: "numeric",
+        month: "long",
+        year: "numeric",
+      }),
+  };
+  const applicableDetails = objectWithoutNullishValues(details) as Record<
+    string,
+    string
+  >;
 
   useEffect(() => {
     const makeCsvData = async () => {
@@ -41,6 +68,23 @@ export default function ConfirmationComponent(props: Props) {
     }
   });
 
+  return (
+    <Presentational
+      {...props}
+      applicableDetails={applicableDetails}
+      data={data}
+      sessionId={sessionId}
+    />
+  );
+}
+
+interface PresentationalProps extends Props {
+  sessionId: string;
+  applicableDetails: Record<string, string>;
+  data: QuestionAndResponses[];
+}
+
+export function Presentational(props: PresentationalProps) {
   return (
     <Box width="100%">
       <Banner
@@ -56,8 +100,18 @@ export default function ConfirmationComponent(props: Props) {
         )}
       </Banner>
       <Card>
-        <Details />
-        <FileDownload data={data} filename={sessionId || "application"} />
+        <SummaryListTable>
+          {Object.entries(props.applicableDetails).map(([k, v], i) => (
+            <React.Fragment key={`detail-${i}`}>
+              <Box component="dt">{k}</Box>
+              <Box component="dd">{v}</Box>
+            </React.Fragment>
+          ))}
+        </SummaryListTable>
+        <FileDownload
+          data={props.data}
+          filename={props.sessionId || "application"}
+        />
         {props.nextSteps && Boolean(props.nextSteps?.length) && (
           <Box pt={3}>
             <Typography variant="h2" mb={2}>
@@ -87,49 +141,6 @@ export default function ConfirmationComponent(props: Props) {
   );
 }
 
-function Details() {
-  const [sessionId, passport, govUkPayment, flowName] = useStore((state) => [
-    state.sessionId,
-    state.computePassport(),
-    state.govUkPayment,
-    state.flowName,
-  ]);
-
-  const details = {
-    "Application reference": sessionId,
-    "Property address": passport.data?._address?.title,
-    "Application type": [
-      flowName.replace("Apply", "Application"),
-      getWorkStatus(passport),
-    ]
-      .filter(Boolean)
-      .join(" - "),
-    "GOV.UK payment reference": govUkPayment?.payment_id,
-    "Paid at":
-      govUkPayment?.created_date &&
-      new Date(govUkPayment.created_date).toLocaleDateString("en-gb", {
-        day: "numeric",
-        month: "long",
-        year: "numeric",
-      }),
-  };
-  const applicableDetails = objectWithoutNullishValues(details) as Record<
-    string,
-    string
-  >;
-
-  return (
-    <SummaryListTable>
-      {Object.entries(applicableDetails).map(([k, v], i) => (
-        <React.Fragment key={`detail-${i}`}>
-          <Box component="dt">{k}</Box>
-          <Box component="dd">{v}</Box>
-        </React.Fragment>
-      ))}
-    </SummaryListTable>
-  );
-}
-
 // TODO - Retire in favor of ODP Schema application type descriptions or fallback to flowName
 function getWorkStatus(passport: Store.passport): string | undefined {
   switch (passport?.data?.["application.type"]?.toString()) {