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 0b37f08729..ff61ec7585 100644 --- a/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx +++ b/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx @@ -6,10 +6,11 @@ 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 +211,70 @@ function SummaryListsBySections(props: SummaryListsBySectionsProps) { // ref https://design-system.service.gov.uk/components/summary-list/ function SummaryList(props: SummaryListProps) { const { trackBackwardsNavigation } = useAnalyticsTracking(); + const [isDialogOpen, setIsDialogOpen] = useState(false); + const [nodeToChange, setNodeToChange] = useState( + undefined, + ); + + const handleCloseDialog = (isConfirmed: boolean) => { + setIsDialogOpen(false); + if (isConfirmed && nodeToChange) { + trackBackwardsNavigation("change", nodeToChange); + props.changeAnswer(nodeToChange); + } + }; - const handleChangeAnswer = (id: string) => { - trackBackwardsNavigation("change", id); - props.changeAnswer(id); + const handleChange = (nodeId: Store.nodeId) => { + setNodeToChange(nodeId); + setIsDialogOpen(true); }; return ( - - {props.summaryBreadcrumbs.map( - ({ component: Component, nodeId, node, userData }, i) => ( - - - {props.showChangeButton && ( -
- handleChangeAnswer(nodeId)} - component="button" - fontSize="body2.fontSize" - > - Change - - {node.data?.title || node.data?.text || "this answer"} - - -
- )} -
- ), - )} -
+ <> + + {props.summaryBreadcrumbs.map( + ({ component: Component, nodeId, node, userData }, i) => ( + + + {props.showChangeButton && ( +
+ handleChange(nodeId)} + component="button" + fontSize="body2.fontSize" + > + Change + + {node.data?.title || node.data?.text || "this answer"} + + +
+ )} +
+ ), + )} +
+ + + 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. +
+
+ Are you sure you want to change your answer? +
+
+ ); } diff --git a/editor.planx.uk/src/components/ConfirmationDialog.tsx b/editor.planx.uk/src/components/ConfirmationDialog.tsx new file mode 100644 index 0000000000..3b9d381e36 --- /dev/null +++ b/editor.planx.uk/src/components/ConfirmationDialog.tsx @@ -0,0 +1,54 @@ +import Button from "@mui/material/Button"; +import Dialog from "@mui/material/Dialog"; +import DialogActions from "@mui/material/DialogActions"; +import DialogContent from "@mui/material/DialogContent"; +import DialogTitle from "@mui/material/DialogTitle"; +import React, { PropsWithChildren } from "react"; + +export interface ConfirmationDialogProps { + open: boolean; + onClose: (isConfirmed: boolean) => void; + title: string; + confirmText?: string; + cancelText?: string; +} + +export const ConfirmationDialog: React.FC< + PropsWithChildren +> = (props) => { + const { + onClose, + open, + children, + title, + confirmText = "Yes", + cancelText = "No ", + } = props; + + const onCancel = () => onClose(false); + const onConfirm = () => onClose(true); + + return ( + theme.breakpoints.values.md, + borderRadius: 0, + background: "#FFF", + margin: (theme) => theme.spacing(2), + }, + }} + maxWidth="xl" + open={open} + > + {title} + {children} + + + + + + ); +};