Adding amplitude features

src/components/TransformWorkflow/FlowEditor/Components/Canvas.tsx

@@ -46,6 +46,7 @@
 import { usePreviewAction } from '@/contexts/FlowEditorPreviewContext';
 import { getNextNodePosition } from '@/utils/editor';
 import { KeyboardArrowDown } from '@mui/icons-material';
+import { useTracking } from '@/contexts/TrackingContext';
 
 type CanvasProps = {
   redrawGraph: boolean;
@@ -134,12 +135,13 @@
   const globalContext = useContext(GlobalContext);
   const permissions = globalContext?.Permissions.state || [];
   const [selectedAction, setSelectedAction] = useState('');
-
+  const trackAmplitudeEvent: any = useTracking();
   const nodeData: any = canvasNode?.data;
 
   const handleRunClick = (event: any) => {
     const action = event.target.value;
     setSelectedAction(action);
+    trackAmplitudeEvent(`[${WorkflowValues[action]}] Button Clicked`);
     if (action === 'run') {
       setCanvasAction({ type: 'run-workflow', data: null });
     } else if (action === 'run-to-node') {

src/contexts/TrackingContext.tsx

@@ -2,49 +2,64 @@ import React, { createContext, useContext, useEffect, useState } from 'react';
 import * as amplitude from '@amplitude/analytics-browser';
 import { GlobalContext } from '@/contexts/ContextProvider';
 import { useRouter } from 'next/router';
+import { useSession } from 'next-auth/react';
 
 const amplitudeApiKey = process.env.NEXT_PUBLIC_AMPLITUDE_ENV!;
-
 const TrackingContext = createContext(
   (eventName: string, additionalData: Record<string, any> = {}) => {}
 );
-
-export const TrackingProvider = ({ session, children }: any) => {
+// so login, invitations and resetpassword have dynamic url, due to different token, we want a same event for all those.
+function extractPath(url: string) {
+  const validPaths = ['login', 'invitations', 'resetpassword']; //add dynamic paths here.
+  const regex = /^\/([^?]+)/;
+  const match = url.match(regex);
+  if (match) {
+    const path = match[1];
+    if (validPaths.includes(path)) {
+      return `/${path}`;
+    }
+  }
+  return url;
+}
+export const TrackingProvider = ({ children }: any) => {
+  const { data: session } = useSession();
   const router = useRouter();
   const globalContext = useContext(GlobalContext);
   const [eventProperties, setEventProperties] = useState({});
 
   useEffect(() => {
+    if (!amplitudeApiKey) return;
     amplitude.init(amplitudeApiKey, {
       defaultTracking: {
-        pageViews: false,
+        pageViews: true,
         sessions: true,
         attribution: true,
         formInteractions: true,
       },
     });
     if (session?.user?.email) {
-      const userEmail = session?.user.email;
+      const userEmail: string = session.user.email;
+      const ist4dMember = userEmail.includes('projecttech4dev.org')
+        ? true
+        : false; // a field to check if a user is t4d member.
       const identifyEvent = new amplitude.Identify();
-      amplitude.setUserId(session?.user.email);
-      identifyEvent.set('User_id', session.user?.email);
-      amplitude.setUserId(userEmail);
+      amplitude.setUserId(session.user.email);
+      identifyEvent.setOnce('ist4dMember', ist4dMember);
       amplitude.identify(identifyEvent);
     }
   }, [session?.user?.email]);
 
   useEffect(() => {
+    if (!amplitudeApiKey) return;
     if (globalContext?.CurrentOrg) {
-      const identifyEvent = new amplitude.Identify();
-      identifyEvent.set('User_orgs', globalContext.CurrentOrg.state.name);
-      amplitude.identify(identifyEvent);
-
       setEventProperties({
         userCurrentOrg: globalContext.CurrentOrg.state.name,
         userEmail: session?.user?.email,
         page_domain: window.location.hostname,
         page_location: window.location.href,
-        page_path: window.location.pathname + window.location.search,
+        page_path: extractPath(
+          window.location.pathname + window.location.search
+        ),
         page_title: document.title,
         page_url: window.location.href,
         referrer: document.referrer,
@@ -60,7 +75,9 @@ export const TrackingProvider = ({ session, children }: any) => {
           userEmail: session?.user?.email,
           page_domain: window.location.hostname,
           page_location: window.location.href,
-          page_path: window.location.pathname + window.location.search,
+          page_path: extractPath(
+            window.location.pathname + window.location.search
+          ),
           page_title: document.title,
           page_url: window.location.href,
           referrer: document.referrer,
@@ -71,6 +88,13 @@ export const TrackingProvider = ({ session, children }: any) => {
       );
     }
   }, [router.pathname, session, globalContext?.CurrentOrg]);
+  useEffect(() => {
+    if (globalContext?.CurrentOrg) {
+      const identifyEvent = new amplitude.Identify();
+      identifyEvent.preInsert('User_orgs', globalContext.CurrentOrg.state.name);
+      amplitude.identify(identifyEvent);
+    }
+  }, [globalContext?.CurrentOrg]);
   const trackEvent = (
     eventName: string,
     additionalData: Record<string, any> = {}

src/pages/analysis/index.tsx

@@ -60,7 +60,7 @@ export default function Analysis() {
 
   return (
     <>
-      <PageHead title="Dalgo" />
+      <PageHead title="Dalgo | Analysis" />
       <Box sx={{ p: '3rem 4rem', width: '100%' }}>
         {globalContext?.CurrentOrg?.state?.viz_url && (
           <iframe

src/pages/analysis/usage.tsx

@@ -55,7 +55,7 @@ export default function Usage() {
 
   return (
     <>
-      <PageHead title="Dalgo" />
+      <PageHead title="Dalgo | Usage" />
       <main className={styles.usage}>
         <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
           <Typography

src/pages/createorg/index.tsx

@@ -14,6 +14,7 @@ import Auth from '@/components/Layouts/Auth';
 import Input from '@/components/UI/Input/Input';
 import { httpPost } from '@/helpers/http';
 import Image from 'next/image';
+import { PageHead } from '@/components/PageHead';
 
 export const CreateOrgPage = () => {
   const {
@@ -52,52 +53,55 @@ export const CreateOrgPage = () => {
   };
 
   return (
-    <Auth heading="Add a new organization">
-      <form onSubmit={handleSubmit(onSubmit)} data-testid="login-form">
-        <Box sx={{ mt: 2 }}>
-          <Input
-            error={!!errors.name}
-            helperText={errors.name?.message}
-            sx={{ mb: 4, width: '100%' }}
-            id="outlined-basic"
-            data-testid="input-orgname"
-            label="Organization name"
-            variant="outlined"
-            register={register}
-            name="name"
-            required
-          />
-        </Box>
+    <>
+      <PageHead title="Dalgo | Create org" />
+      <Auth heading="Add a new organization">
+        <form onSubmit={handleSubmit(onSubmit)} data-testid="login-form">
+          <Box sx={{ mt: 2 }}>
+            <Input
+              error={!!errors.name}
+              helperText={errors.name?.message}
+              sx={{ mb: 4, width: '100%' }}
+              id="outlined-basic"
+              data-testid="input-orgname"
+              label="Organization name"
+              variant="outlined"
+              register={register}
+              name="name"
+              required
+            />
+          </Box>
 
-        <Button
-          variant="contained"
-          sx={{ width: '100%', mb: 2, minHeight: '50px' }}
-          type="submit"
-          disabled={waitForOrgCreation}
-          data-testid="submitbutton"
-        >
-          Save{' '}
-          {waitForOrgCreation && (
-            <CircularProgress sx={{ ml: 2 }} size="1rem" />
-          )}
-        </Button>
-        <Divider></Divider>
-        <Box
-          sx={{
-            mt: 3,
-            fontSize: '18px',
-            alignItems: 'center',
-            justifyContent: 'center',
-            ':hover': { cursor: 'pointer' },
-            display: 'flex',
-          }}
-          onClick={() => handleSignout()}
-        >
-          <Image src={LogoutIcon} alt="logout icon" />
-          <Link sx={{ textDecoration: 'underline' }}>Logout</Link>
-        </Box>
-      </form>
-    </Auth>
+          <Button
+            variant="contained"
+            sx={{ width: '100%', mb: 2, minHeight: '50px' }}
+            type="submit"
+            disabled={waitForOrgCreation}
+            data-testid="submitbutton"
+          >
+            Save{' '}
+            {waitForOrgCreation && (
+              <CircularProgress sx={{ ml: 2 }} size="1rem" />
+            )}
+          </Button>
+          <Divider></Divider>
+          <Box
+            sx={{
+              mt: 3,
+              fontSize: '18px',
+              alignItems: 'center',
+              justifyContent: 'center',
+              ':hover': { cursor: 'pointer' },
+              display: 'flex',
+            }}
+            onClick={() => handleSignout()}
+          >
+            <Image src={LogoutIcon} alt="logout icon" />
+            <Link sx={{ textDecoration: 'underline' }}>Logout</Link>
+          </Box>
+        </form>
+      </Auth>
+    </>
   );
 };
 

src/pages/data-quality.tsx

@@ -1,5 +1,11 @@
 import { Elementary } from '@/components/DBT/Elementary';
+import { PageHead } from '@/components/PageHead';
 
 export default function DataQualityPage() {
-  return <Elementary />;
+  return (
+    <>
+      <PageHead title="Dalgo | Data Quality" />
+      <Elementary />;
+    </>
+  );
 }

src/pages/forgotpassword/index.tsx

@@ -12,6 +12,7 @@ import {
 import Input from '@/components/UI/Input/Input';
 import Auth from '@/components/Layouts/Auth';
 import { httpPost } from '../../helpers/http';
+import { PageHead } from '@/components/PageHead';
 
 export const ForgotPassword = () => {
   const { register, handleSubmit } = useForm();
@@ -43,31 +44,34 @@ export const ForgotPassword = () => {
     );
   } else {
     return (
-      <Auth heading="Forgot password" subHeading="">
-        <form onSubmit={handleSubmit(onSubmit)} data-testid="login-form">
-          <Box className={styles.Container}>
-            <Input
-              sx={{ width: '100%', pb: 2 }}
-              id="outlined-basic"
-              data-testid="email"
-              label="Enter your registered email"
-              variant="outlined"
-              required
-              register={register}
-              name="email"
-            />
+      <>
+        <PageHead title="Dalgo | Forgot Password" />
+        <Auth heading="Forgot password" subHeading="">
+          <form onSubmit={handleSubmit(onSubmit)} data-testid="login-form">
+            <Box className={styles.Container}>
+              <Input
+                sx={{ width: '100%', pb: 2 }}
+                id="outlined-basic"
+                data-testid="email"
+                label="Enter your registered email"
+                variant="outlined"
+                required
+                register={register}
+                name="email"
+              />
 
-            <Button
-              variant="contained"
-              sx={{ width: '100%', mb: 3, minHeight: '50px' }}
-              type="submit"
-              data-testid="submit"
-            >
-              Continue
-            </Button>
-          </Box>
-        </form>
-      </Auth>
+              <Button
+                variant="contained"
+                sx={{ width: '100%', mb: 3, minHeight: '50px' }}
+                type="submit"
+                data-testid="submit"
+              >
+                Continue
+              </Button>
+            </Box>
+          </form>
+        </Auth>
+      </>
     );
   }
 };