feat: Add dialog on change

editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx

@@ -1,15 +1,17 @@
 import Box from "@mui/material/Box";
+import DialogContent from "@mui/material/DialogContent";
 import Link from "@mui/material/Link";
 import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
 import { visuallyHidden } from "@mui/utils";
 import { PASSPORT_UPLOAD_KEY } from "@planx/components/DrawBoundary/model";
 import { PASSPORT_REQUESTED_FILES_KEY } from "@planx/components/FileUploadAndLabel/model";
 import { TYPES } from "@planx/components/types";
+import { ConfirmationDialog } from "components/ConfirmationDialog";
 import format from "date-fns/format";
 import { useAnalyticsTracking } from "pages/FlowEditor/lib/analyticsProvider";
 import { Store, useStore } from "pages/FlowEditor/lib/store";
-import React from "react";
+import React, { useState } from "react";
 import { FONT_WEIGHT_SEMI_BOLD } from "theme";
 
 export default SummaryListsBySections;
@@ -210,42 +212,71 @@ function SummaryListsBySections(props: SummaryListsBySectionsProps) {
 //  ref https://design-system.service.gov.uk/components/summary-list/
 function SummaryList(props: SummaryListProps) {
   const { trackBackwardsNavigation } = useAnalyticsTracking();
+  const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
+  const [nodeId, setNodeId] = useState<Store.nodeId | undefined>(undefined);
+
+  const handleCloseDialog = (nodeId?: string) => {
+    setOpenConfirmDialog(false);
+    if (nodeId) {
+      trackBackwardsNavigation("change", nodeId);
+      props.changeAnswer(nodeId);
+    }
+  };
 
-  const handleChangeAnswer = (id: string) => {
-    trackBackwardsNavigation("change", id);
-    props.changeAnswer(id);
+  const handleChange = (nodeId: Store.nodeId) => {
+    setNodeId(nodeId);
+    setOpenConfirmDialog(true);
   };
 
   return (
-    <Grid showChangeButton={props.showChangeButton}>
-      {props.summaryBreadcrumbs.map(
-        ({ component: Component, nodeId, node, userData }, i) => (
-          <React.Fragment key={i}>
-            <Component
-              nodeId={nodeId}
-              node={node}
-              userData={userData}
-              flow={props.flow}
-              passport={props.passport}
-            />
-            {props.showChangeButton && (
-              <dd>
-                <Link
-                  onClick={() => handleChangeAnswer(nodeId)}
-                  component="button"
-                  fontSize="body2.fontSize"
-                >
-                  Change
-                  <span style={visuallyHidden}>
-                    {node.data?.title || node.data?.text || "this answer"}
-                  </span>
-                </Link>
-              </dd>
-            )}
-          </React.Fragment>
-        ),
-      )}
-    </Grid>
+    <>
+      <Grid showChangeButton={props.showChangeButton}>
+        {props.summaryBreadcrumbs.map(
+          ({ component: Component, nodeId, node, userData }, i) => (
+            <React.Fragment key={i}>
+              <Component
+                nodeId={nodeId}
+                node={node}
+                userData={userData}
+                flow={props.flow}
+                passport={props.passport}
+              />
+              {props.showChangeButton && (
+                <dd>
+                  <Link
+                    onClick={() => handleChange(nodeId)}
+                    component="button"
+                    fontSize="body2.fontSize"
+                  >
+                    Change
+                    <span style={visuallyHidden}>
+                      {node.data?.title || node.data?.text || "this answer"}
+                    </span>
+                  </Link>
+                </dd>
+              )}
+            </React.Fragment>
+          ),
+        )}
+      </Grid>
+      <ConfirmationDialog
+        open={openConfirmDialog}
+        onClose={handleCloseDialog}
+        value={nodeId}
+        title="Confirm"
+      >
+        <DialogContent dividers>
+          <Typography>
+            If you change this answer, you’ll need confirm all the other answers
+            after it. This is because a changed answer might mean we have new or
+            different questions to ask.
+            <br />
+            <br />
+            Are you sure you want to change your answer?
+          </Typography>
+        </DialogContent>
+      </ConfirmationDialog>
+    </>
   );
 }
 

editor.planx.uk/src/components/ConfirmationDialog.tsx

@@ -0,0 +1,46 @@
+import Button from "@mui/material/Button";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogTitle from "@mui/material/DialogTitle";
+import React, { PropsWithChildren, useEffect, useState } from "react";
+
+export interface ConfirmationDialogProps {
+  value?: string;
+  open: boolean;
+  onClose: (value?: string) => void;
+  title: string;
+}
+
+export const ConfirmationDialog: React.FC<
+  PropsWithChildren<ConfirmationDialogProps>
+> = (props) => {
+  const { onClose, value: valueProp, open, children, title } = props;
+  const [value, setValue] = useState(valueProp);
+
+  useEffect(() => {
+    if (!open) setValue(valueProp);
+  }, [valueProp, open]);
+
+  return (
+    <Dialog
+      PaperProps={{
+        sx: {
+          width: "100%",
+          maxWidth: (theme) => theme.breakpoints.values.md,
+          borderRadius: 0,
+          background: "#FFF",
+          margin: (theme) => theme.spacing(2),
+        },
+      }}
+      maxWidth="xl"
+      open={open}
+    >
+      <DialogTitle>{title}</DialogTitle>
+      {children}
+      <DialogActions>
+        <Button onClick={() => onClose()}>No</Button>
+        <Button onClick={() => onClose(value)}>Yes</Button>
+      </DialogActions>
+    </Dialog>
+  );
+};