refactor: create trackEvent function and apply updates in relevant files

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

@@ -286,13 +286,13 @@ interface FileListItemProps {
 
 const InteractiveFileListItem = (props: FileListItemProps) => {
   const [open, setOpen] = React.useState(false);
-  const { trackHelpClick } = useAnalyticsTracking();
+  const { trackEvent } = useAnalyticsTracking();
   const { info, policyRef, howMeasured, definitionImg } =
     props.moreInformation || {};
 
   const handleHelpClick = (metadata: HelpClickMetadata) => {
     setOpen(true);
-    trackHelpClick(metadata); // This returns a promise but we don't need to await for it
+    trackEvent({ event: "helpClick", metadata }); // This returns a promise but we don't need to await for it
   };
 
   return (

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

@@ -80,10 +80,14 @@ const NoticeComponent: React.FC<Props> = (props) => {
     ? () => props.handleSubmit?.()
     : undefined;
 
-  const { trackFlowDirectionChange } = useAnalyticsTracking();
+  const { trackEvent } = useAnalyticsTracking();
 
   const handleNoticeResetClick = () => {
-    trackFlowDirectionChange("reset");
+    trackEvent({
+      event: "flowDirectionChange",
+      metadata: null,
+      flowDirection: "reset",
+    });
     props.resetPreview && props.resetPreview();
   };
 

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

@@ -187,10 +187,14 @@ function PropertyDetails(props: PropertyDetailsProps) {
   const { data, showPropertyTypeOverride, overrideAnswer } = props;
   const filteredData = data.filter((d) => Boolean(d.detail));
 
-  const { trackBackwardsNavigation } = useAnalyticsTracking();
+  const { trackEvent } = useAnalyticsTracking();
 
   const handleOverrideAnswer = (fn: string) => {
-    trackBackwardsNavigation("change");
+    trackEvent({
+      event: "backwardsNavigation",
+      metadata: null,
+      initiator: "change",
+    });
     overrideAnswer(fn);
   };
 

editor.planx.uk/src/@planx/components/Result/Public/ResultReason.tsx

@@ -139,15 +139,21 @@ const ResultReason: React.FC<IResultReason> = ({
 
   const hasMoreInfo = question.data.info ?? question.data.policyRef;
 
-  const ariaLabel = `${question.data.text}: Your answer was: ${response}. ${hasMoreInfo
+  const ariaLabel = `${question.data.text}: Your answer was: ${response}. ${
+    hasMoreInfo
       ? "Click to expand for more information about this question."
       : ""
-    }`;
+  }`;
 
-  const { trackBackwardsNavigation } = useAnalyticsTracking();
+  const { trackEvent } = useAnalyticsTracking();
 
   const handleChangeAnswer = (id: string) => {
-    trackBackwardsNavigation("change", id);
+    trackEvent({
+      event: "backwardsNavigation",
+      metadata: null,
+      initiator: "change",
+      nodeId: id,
+    });
     changeAnswer(id);
   };
 

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

@@ -135,14 +135,19 @@ export function SectionsOverviewList({
     alteredSectionIds,
   });
 
-  const { trackBackwardsNavigation } = useAnalyticsTracking();
+  const { trackEvent } = useAnalyticsTracking();
 
   const changeFirstAnswerInSection = (sectionId: string) => {
     const sectionIndex = flow._root.edges?.indexOf(sectionId);
     if (sectionIndex !== undefined) {
       const firstNodeInSection = flow._root.edges?.[sectionIndex + 1];
       if (firstNodeInSection) {
-        trackBackwardsNavigation("change", firstNodeInSection);
+        trackEvent({
+          event: "backwardsNavigation",
+          metadata: null,
+          initiator: "change",
+          nodeId: firstNodeInSection,
+        });
         changeAnswer(firstNodeInSection);
       }
     }

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

@@ -61,11 +61,11 @@ const QuestionHeader: React.FC<IQuestionHeader> = ({
   img,
 }) => {
   const [open, setOpen] = React.useState(false);
-  const { trackHelpClick } = useAnalyticsTracking();
+  const { trackEvent } = useAnalyticsTracking();
 
   const handleHelpClick = () => {
     setOpen(true);
-    trackHelpClick(); // This returns a promise but we don't need to await for it
+    trackEvent({ event: "helpClick", metadata: {} }); // This returns a promise but we don't need to await for it
   };
 
   return (
@@ -124,9 +124,17 @@ const QuestionHeader: React.FC<IQuestionHeader> = ({
             <MoreInfoSection title="How is it defined?">
               <>
                 {definitionImg && (
-                  <Image src={definitionImg} alt="" aria-describedby="howMeasured" />
+                  <Image
+                    src={definitionImg}
+                    alt=""
+                    aria-describedby="howMeasured"
+                  />
                 )}
-                <ReactMarkdownOrHtml source={howMeasured} openLinksOnNewTab id="howMeasured" />
+                <ReactMarkdownOrHtml
+                  source={howMeasured}
+                  openLinksOnNewTab
+                  id="howMeasured"
+                />
               </>
             </MoreInfoSection>
           ) : undefined}

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

@@ -17,11 +17,15 @@ const InnerContainer = styled(Box)(({ theme }) => ({
 
 const SaveResumeButton: React.FC = () => {
   const saveToEmail = useStore((state) => state.saveToEmail);
-  const { trackFlowDirectionChange } = useAnalyticsTracking();
+  const { trackEvent } = useAnalyticsTracking();
 
   const handleClick = () => {
     if (saveToEmail) {
-      trackFlowDirectionChange("save");
+      trackEvent({
+        event: "flowDirectionChange",
+        metadata: null,
+        flowDirection: "save",
+      });
       useStore.setState({ path: ApplicationPath.Save });
     } else {
       useStore.setState({ path: ApplicationPath.Resume });

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

@@ -239,7 +239,7 @@ function SummaryListsBySections(props: SummaryListsBySectionsProps) {
 // For applicable component types, display a list of their question & answers with a "change" link
 //  ref https://design-system.service.gov.uk/components/summary-list/
 function SummaryList(props: SummaryListProps) {
-  const { trackBackwardsNavigation } = useAnalyticsTracking();
+  const { trackEvent } = useAnalyticsTracking();
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [nodeToChange, setNodeToChange] = useState<Store.nodeId | undefined>(
     undefined,
@@ -248,7 +248,12 @@ function SummaryList(props: SummaryListProps) {
   const handleCloseDialog = (isConfirmed: boolean) => {
     setIsDialogOpen(false);
     if (isConfirmed && nodeToChange) {
-      trackBackwardsNavigation("change", nodeToChange);
+      trackEvent({
+        event: "backwardsNavigation",
+        metadata: null,
+        initiator: "change",
+        nodeId: nodeToChange,
+      });
       props.changeAnswer(nodeToChange);
     }
   };

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

@@ -320,15 +320,19 @@ const PublicToolbar: React.FC<{
     theme.breakpoints.up("md"),
   );
 
-  const { trackFlowDirectionChange } = useAnalyticsTracking();
+  const { trackEvent } = useAnalyticsTracking();
 
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const openConfirmationDialog = () => setIsDialogOpen(true);
 
   const handleRestart = (isConfirmed: boolean) => {
     setIsDialogOpen(false);
     if (isConfirmed) {
-      trackFlowDirectionChange("reset");
+      trackEvent({
+        event: "flowDirectionChange",
+        metadata: null,
+        flowDirection: "reset",
+      });
       if (path === ApplicationPath.SingleSession) {
         clearLocalFlow(id);
         window.location.reload();
@@ -362,7 +366,14 @@ const PublicToolbar: React.FC<{
                   size="large"
                   aria-describedby="restart-application-description"
                 >
-                  <Typography id="restart-application-description" style={visuallyHidden}>Open a dialog with the option to restart your application. If you chose to restart your application, this will delete your previous answers</Typography>
+                  <Typography
+                    id="restart-application-description"
+                    style={visuallyHidden}
+                  >
+                    Open a dialog with the option to restart your application.
+                    If you chose to restart your application, this will delete
+                    your previous answers
+                  </Typography>
                   <Reset color="secondary" />
                 </IconButton>
               )}