diff --git a/editor.planx.uk/src/@planx/components/Notice/Public.tsx b/editor.planx.uk/src/@planx/components/Notice/Public.tsx index 4fd28a55ee..b7a1dc6195 100644 --- a/editor.planx.uk/src/@planx/components/Notice/Public.tsx +++ b/editor.planx.uk/src/@planx/components/Notice/Public.tsx @@ -76,10 +76,10 @@ const NoticeComponent: React.FC = (props) => { ? () => props.handleSubmit?.() : undefined; - const { trackResetFlow } = useAnalyticsTracking(); + const { trackFlowDirectionChange } = useAnalyticsTracking(); const handleNoticeResetClick = () => { - trackResetFlow(); + trackFlowDirectionChange("reset"); props.resetPreview && props.resetPreview(); }; diff --git a/editor.planx.uk/src/@planx/components/shared/Preview/SaveResumeButton.tsx b/editor.planx.uk/src/@planx/components/shared/Preview/SaveResumeButton.tsx index be64a1ae4d..efd7878976 100644 --- a/editor.planx.uk/src/@planx/components/shared/Preview/SaveResumeButton.tsx +++ b/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 ( diff --git a/editor.planx.uk/src/components/Header.tsx b/editor.planx.uk/src/components/Header.tsx index 0c5b233672..05a2af7dce 100644 --- a/editor.planx.uk/src/components/Header.tsx +++ b/editor.planx.uk/src/components/Header.tsx @@ -320,7 +320,7 @@ const PublicToolbar: React.FC<{ theme.breakpoints.up("md"), ); - const { trackResetFlow } = useAnalyticsTracking(); + const { trackFlowDirectionChange } = useAnalyticsTracking(); const handleRestart = async () => { if ( @@ -328,7 +328,7 @@ const PublicToolbar: React.FC<{ "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(); diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/analyticsProvider.tsx b/editor.planx.uk/src/pages/FlowEditor/lib/analyticsProvider.tsx index 4aa54474cd..d0c252e729 100644 --- a/editor.planx.uk/src/pages/FlowEditor/lib/analyticsProvider.tsx +++ b/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; export type SelectedUrlsMetadata = Record<"selectedUrls", string[]>; @@ -32,13 +37,15 @@ const analyticsContext = createContext<{ createAnalytics: (type: AnalyticsType) => Promise; trackHelpClick: (metadata?: HelpClickMetadata) => Promise; trackNextStepsLinkClick: (metadata?: SelectedUrlsMetadata) => Promise; - trackResetFlow: () => Promise; + trackFlowDirectionChange: ( + flowDirection: AnalyticsLogDirection, + ) => Promise; 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, }, }); }