feat: track a user hitting the "Save" application link (#2355)

* feat: track a user hitting the "Save" application link

- When a user decided to click the "Save" application link update the analytics_log for the node with a flow_direction of "save"
- This should allow us to analyse which nodes are most saved on etc.

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

@@ -76,10 +76,10 @@ const NoticeComponent: React.FC<Props> = (props) => {
     ? () => props.handleSubmit?.()
     : undefined;
 
-  const { trackResetFlow } = useAnalyticsTracking();
+  const { trackFlowDirectionChange } = useAnalyticsTracking();
 
   const handleNoticeResetClick = () => {
-    trackResetFlow();
+    trackFlowDirectionChange("reset");
     props.resetPreview && props.resetPreview();
   };
 

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

@@ -2,6 +2,7 @@ import Box from "@mui/material/Box";
 import Link from "@mui/material/Link";
 import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
+import { useAnalyticsTracking } from "pages/FlowEditor/lib/analyticsProvider";
 import { useStore } from "pages/FlowEditor/lib/store";
 import React from "react";
 import { ApplicationPath } from "types";
@@ -16,10 +17,18 @@ const InnerContainer = styled(Box)(({ theme }) => ({
 
 const SaveResumeButton: React.FC = () => {
   const saveToEmail = useStore((state) => state.saveToEmail);
-  const onClick = () =>
-    useStore.setState({
-      path: saveToEmail ? ApplicationPath.Save : ApplicationPath.Resume,
-    });
+  const { trackFlowDirectionChange } = useAnalyticsTracking();
+
+  const handleClick = () => {
+    if (saveToEmail) {
+      trackFlowDirectionChange("save");
+      useStore.setState({ path: ApplicationPath.Save });
+    } else {
+      useStore.setState({ path: ApplicationPath.Resume });
+    }
+  };
+
+  const onClick = () => handleClick();
 
   return (
     <InnerContainer>

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

@@ -320,15 +320,15 @@ const PublicToolbar: React.FC<{
     theme.breakpoints.up("md"),
   );
 
-  const { trackResetFlow } = useAnalyticsTracking();
+  const { trackFlowDirectionChange } = useAnalyticsTracking();
 
   const handleRestart = async () => {
     if (
       confirm(
         "Are you sure you want to restart? This will delete your previous answers",
       )
     ) {
-      trackResetFlow();
+      trackFlowDirectionChange("reset");
       if (path === ApplicationPath.SingleSession) {
         clearLocalFlow(id);
         window.location.reload();

editor.planx.uk/src/pages/FlowEditor/lib/analyticsProvider.tsx

@@ -12,7 +12,12 @@ import React, { createContext, useContext, useEffect, useState } from "react";
 import { Store, useStore } from "./store";
 
 export type AnalyticsType = "init" | "resume";
-type AnalyticsLogDirection = AnalyticsType | "forwards" | "backwards" | "reset";
+type AnalyticsLogDirection =
+  | AnalyticsType
+  | "forwards"
+  | "backwards"
+  | "reset"
+  | "save";
 
 export type HelpClickMetadata = Record<string, string>;
 export type SelectedUrlsMetadata = Record<"selectedUrls", string[]>;
@@ -32,13 +37,15 @@ const analyticsContext = createContext<{
   createAnalytics: (type: AnalyticsType) => Promise<void>;
   trackHelpClick: (metadata?: HelpClickMetadata) => Promise<void>;
   trackNextStepsLinkClick: (metadata?: SelectedUrlsMetadata) => Promise<void>;
-  trackResetFlow: () => Promise<void>;
+  trackFlowDirectionChange: (
+    flowDirection: AnalyticsLogDirection,
+  ) => Promise<void>;
   node: Store.node | null;
 }>({
   createAnalytics: () => Promise.resolve(),
   trackHelpClick: () => Promise.resolve(),
   trackNextStepsLinkClick: () => Promise.resolve(),
-  trackResetFlow: () => Promise.resolve(),
+  trackFlowDirectionChange: () => Promise.resolve(),
   node: null,
 });
 const { Provider } = analyticsContext;
@@ -120,7 +127,7 @@ export const AnalyticsProvider: React.FC<{ children: React.ReactNode }> = ({
         createAnalytics,
         trackHelpClick,
         trackNextStepsLinkClick,
-        trackResetFlow,
+        trackFlowDirectionChange,
         node,
       }}
     >
@@ -266,11 +273,13 @@ export const AnalyticsProvider: React.FC<{ children: React.ReactNode }> = ({
     }
   }
 
-  async function trackResetFlow() {
+  async function trackFlowDirectionChange(
+    flowDirection: AnalyticsLogDirection,
+  ) {
     if (shouldTrackAnalytics && lastAnalyticsLogId) {
       await publicClient.mutate({
         mutation: gql`
-          mutation UpdateHasResetFlow($id: bigint!, $flow_direction: String) {
+          mutation UpdateFlowDirection($id: bigint!, $flow_direction: String) {
             update_analytics_logs_by_pk(
               pk_columns: { id: $id }
               _set: { flow_direction: $flow_direction }
@@ -281,7 +290,7 @@ export const AnalyticsProvider: React.FC<{ children: React.ReactNode }> = ({
         `,
         variables: {
           id: lastAnalyticsLogId,
-          flow_direction: "reset",
+          flow_direction: flowDirection,
         },
       });
     }