From 4fc5b43d0bbb47bfd67409542f8855cb8c786ee0 Mon Sep 17 00:00:00 2001
From: Mike <36415632+Mike-Heneghan@users.noreply.github.com>
Date: Tue, 10 Oct 2023 13:52:50 +0100
Subject: [PATCH] feat: track which url is navigated to from Next Steps
 component (#2282)

* feat: add analytics_log for which url was selected on a next steps link click

- Store user selection of urls in analytics_log table metadata column under `selectedUrls`
---
 .../@planx/components/NextSteps/Public.tsx    |  6 +++-
 .../FlowEditor/lib/analyticsProvider.tsx      | 28 +++++++++++++++++
 editor.planx.uk/src/ui/NextStepsList.tsx      | 31 ++++++++++++++-----
 3 files changed, 57 insertions(+), 8 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/NextSteps/Public.tsx b/editor.planx.uk/src/@planx/components/NextSteps/Public.tsx
index 194c2b34f6..9b534dd75d 100644
--- a/editor.planx.uk/src/@planx/components/NextSteps/Public.tsx
+++ b/editor.planx.uk/src/@planx/components/NextSteps/Public.tsx
@@ -1,4 +1,5 @@
 import { PublicProps } from "@planx/components/ui";
+
 import React from "react";
 import NextStepsList from "ui/NextStepsList";
 
@@ -18,7 +19,10 @@ const NextStepsComponent: React.FC<Props> = (props) => {
         policyRef={props.policyRef}
         howMeasured={props.howMeasured}
       />
-      <NextStepsList steps={props.steps} handleSubmit={props.handleSubmit} />
+      <NextStepsList
+        steps={props.steps}
+        handleSubmit={props.handleSubmit}
+      />
     </Card>
   );
 };
diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/analyticsProvider.tsx b/editor.planx.uk/src/pages/FlowEditor/lib/analyticsProvider.tsx
index a493c74a4b..3aef3a108f 100644
--- a/editor.planx.uk/src/pages/FlowEditor/lib/analyticsProvider.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/lib/analyticsProvider.tsx
@@ -10,16 +10,19 @@ export type AnalyticsType = "init" | "resume";
 type AnalyticsLogDirection = AnalyticsType | "forwards" | "backwards";
 
 export type HelpClickMetadata = Record<string, string>;
+export type SelectedUrlsMetadata = Record<'selectedUrls', string[]>;
 
 let lastAnalyticsLogId: number | undefined = undefined;
 
 const analyticsContext = createContext<{
   createAnalytics: (type: AnalyticsType) => Promise<void>;
   trackHelpClick: (metadata?: HelpClickMetadata) => Promise<void>;
+  trackNextStepsLinkClick: (metadata?: SelectedUrlsMetadata) => Promise<void>;
   node: Store.node | null;
 }>({
   createAnalytics: () => Promise.resolve(),
   trackHelpClick: () => Promise.resolve(),
+  trackNextStepsLinkClick: () => Promise.resolve(),
   node: null,
 });
 const { Provider } = analyticsContext;
@@ -100,6 +103,7 @@ export const AnalyticsProvider: React.FC<{ children: React.ReactNode }> = ({
       value={{
         createAnalytics,
         trackHelpClick,
+        trackNextStepsLinkClick,
         node,
       }}
     >
@@ -171,6 +175,30 @@ export const AnalyticsProvider: React.FC<{ children: React.ReactNode }> = ({
     }
   }
 
+  async function trackNextStepsLinkClick(metadata?: SelectedUrlsMetadata) {
+    if (shouldTrackAnalytics && lastAnalyticsLogId) {
+      await publicClient.mutate({
+        mutation: gql`
+          mutation UpdateHasClickNextStepsLink(
+            $id: bigint!
+            $metadata: jsonb = {}
+          ) {
+            update_analytics_logs_by_pk(
+              pk_columns: { id: $id }
+              _append: { metadata: $metadata }
+            ) {
+              id
+            }
+          }
+        `,
+        variables: {
+          id: lastAnalyticsLogId,
+          metadata,
+        },
+      });
+    }
+  }
+
   async function createAnalytics(type: AnalyticsType) {
     if (shouldTrackAnalytics) {
       const response = await publicClient.mutate({
diff --git a/editor.planx.uk/src/ui/NextStepsList.tsx b/editor.planx.uk/src/ui/NextStepsList.tsx
index ef13c27ffe..e7feb561f1 100644
--- a/editor.planx.uk/src/ui/NextStepsList.tsx
+++ b/editor.planx.uk/src/ui/NextStepsList.tsx
@@ -5,8 +5,9 @@ import Link from "@mui/material/Link";
 import { styled, Theme } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
 import type { Step as StyledListItem } from "@planx/components/NextSteps/model";
+import { useAnalyticsTracking } from "pages/FlowEditor/lib/analyticsProvider";
 import { handleSubmit } from "pages/Preview/Node";
-import React from "react";
+import React, { useState } from "react";
 
 interface NextStepsListProps {
   steps: StyledListItem[];
@@ -15,6 +16,7 @@ interface NextStepsListProps {
 
 interface ListItemProps extends StyledListItem {
   handleSubmit?: handleSubmit;
+  handleSelectingUrl?: (url: string) => void;
 }
 
 const Root = styled("ul")(({ theme }) => ({
@@ -72,11 +74,18 @@ const ArrowButton = styled("span")(({ theme }) => ({
   flexShrink: "0",
 }));
 
-const LinkStep = (props: ListItemProps) => (
-  <InnerLink href={props.url} target="_blank" rel="noopener">
-    <Step {...props} />
-  </InnerLink>
-);
+function LinkStep(props: ListItemProps) {
+  return (
+    <InnerLink
+      href={props.url}
+      target="_blank"
+      rel="noopener"
+      onClick={() => props.handleSelectingUrl && props.url && props.handleSelectingUrl(props.url)}
+    >
+      <Step {...props} />
+    </InnerLink>
+  );
+}
 
 const ContinueStep = (props: ListItemProps) => (
   <InnerButton onClick={() => props.handleSubmit && props.handleSubmit()}>
@@ -109,12 +118,20 @@ const Step = ({ title, description, url }: ListItemProps) => (
 );
 
 function NextStepsList(props: NextStepsListProps) {
+  const [selectedUrls, setSelectedUrls] = useState<string[]>([]);
+  const { trackNextStepsLinkClick } = useAnalyticsTracking()
+
+  const handleSelectingUrl = (newUrl: string) => {
+    setSelectedUrls(prevSelectedUrls => [...prevSelectedUrls, newUrl]);
+    trackNextStepsLinkClick({'selectedUrls': [...selectedUrls, newUrl]})
+  }
+
   return (
     <Root>
       {props.steps?.map((step, i) => (
         <StyledListItem key={i}>
           {step.url ? (
-            <LinkStep {...step} />
+            <LinkStep {...step} handleSelectingUrl={handleSelectingUrl}/>
           ) : (
             <ContinueStep {...step} handleSubmit={props.handleSubmit} />
           )}