Merge pull request #76 from middlewarehq/feat/email-input-flow

feat: mixpanel integration
middlewarehq · Dec 11, 2023 · bf21159 · bf21159
2 parents fc9d6cd + f87ba08
commit bf21159
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 1 deletion.
diff --git a/libdefs/ambient.d.ts b/libdefs/ambient.d.ts
@@ -19,5 +19,7 @@ declare namespace NodeJS {
     AWS_SECRET_ACCESS_KEY: string;
     AWS_REGION: string;
     UNWRAPPED_PERSISTENCE_BUCKET_NAME: string;
+    NEXT_PUBLIC_MIXPANEL: string;
+    ZAPIER_WEBHOOK_URL: string;
   }
 }
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "file-saver": "^2.0.5",
     "jspdf": "^2.5.1",
     "jszip": "^3.10.1",
+    "mixpanel": "^0.18.0",
     "next": "14.0.3",
     "next-auth": "^4.24.5",
     "pluralize": "^8.0.0",
@@ -31,6 +32,7 @@
     "react-awesome-loaders": "^0.1.37",
     "react-confetti": "^6.1.0",
     "react-dom": "^18",
+    "react-hot-toast": "^2.4.1",
     "react-icons": "^4.12.0",
     "swiper": "^11.0.5",
     "ts-node": "^10.9.2",

diff --git a/src/api-helpers/node-events.ts b/src/api-helpers/node-events.ts
@@ -0,0 +1,25 @@
+import Mixpanel from 'mixpanel';
+
+import { flattenObj } from '@/utils/datatype';
+import { objectEnum } from '@/utils/enum';
+
+enum TrackEventEnum {
+  FOLLOWUP_USER_EMAIL
+}
+
+export const TrackNodeEvents = objectEnum(TrackEventEnum);
+
+const isDev = process.env.NEXT_PUBLIC_APP_ENVIRONMENT === 'development';
+
+const mixpanel = Mixpanel.init(process.env.NEXT_PUBLIC_MIXPANEL, {
+  keepAlive: false,
+  debug: isDev
+});
+
+export const nodeTrack = (ev: keyof typeof TrackNodeEvents, props: any = {}) =>
+  mixpanel.track(ev, {
+    ...flattenObj(props),
+    appBuiltAt: process.env.NEXT_PUBLIC_BUILD_TIME,
+    environment: process.env.NEXT_PUBLIC_APP_ENVIRONMENT,
+    nodeEnv: process.env.NODE_ENV
+  });
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -3,7 +3,7 @@ import type { AppProps } from 'next/app';
 import { SessionProvider } from 'next-auth/react';
 import { AppStateProvider } from '@/contexts/AppContext';
 import { AppLoadingStateWrapper } from '@/components/AppLoadingStateWrapper';
-
+import { Toaster } from 'react-hot-toast';
 import '@/styles/swiper.css';
 import { inter } from '@/styles/fonts';
 import Head from 'next/head';
@@ -24,6 +24,7 @@ export default function App({
         <SessionProvider session={session}>
           <AppStateProvider>
             <AppLoadingStateWrapper>
+              <Toaster />
               <Component {...pageProps} />
             </AppLoadingStateWrapper>
           </AppStateProvider>

diff --git a/src/utils/datatype.ts b/src/utils/datatype.ts
@@ -0,0 +1,13 @@
+export const isObj = (o: any) => o?.constructor === Object;
+
+export const flattenObj = (obj: any, parentKey = '', map = {}) => {
+  if (!isObj(obj)) return obj;
+
+  for (let key in obj) {
+    if (isObj(obj[key])) flattenObj(obj[key], `${parentKey}${key}__`, map);
+    // @ts-ignore
+    else map[`${parentKey}${key}`] = obj[key];
+  }
+
+  return map;
+};
diff --git a/src/utils/enum.ts b/src/utils/enum.ts
@@ -0,0 +1,12 @@
+export const objectEnum = <EnumT>(EnumArg: EnumT) => {
+  type EnumKeys = keyof typeof EnumArg;
+  // @ts-ignore
+  return Object.keys(EnumArg).reduce(
+    // @ts-ignore
+    (obj, key) => ({ ...obj, [key]: key }),
+    {} as { [Property in EnumKeys]: Property }
+  );
+};
+
+export const objectEnumFromFn = <EnumT>(enumFn: () => EnumT) =>
+  objectEnum(enumFn());
diff --git a/yarn.lock b/yarn.lock
@@ -8170,6 +8170,11 @@ globule@^1.0.0:
     lodash "^4.17.21"
     minimatch "~3.0.2"
 
+goober@^2.1.10:
+  version "2.1.13"
+  resolved "https://registry.yarnpkg.com/goober/-/goober-2.1.13.tgz#e3c06d5578486212a76c9eba860cbc3232ff6d7c"
+  integrity sha512-jFj3BQeleOoy7t93E9rZ2de+ScC4lQICLwiAQmKMg9F6roKGaLSHoCDYKkWlSafg138jejvq/mTdvmnwDQgqoQ==
+
 gopd@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz"
@@ -8541,6 +8546,14 @@ https-browserify@^1.0.0:
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
   integrity sha512-J+FkSdyD+0mA0N+81tMotaRMfSL9SGi+xpD3T6YApKsc3bGSXJlfXri3VyFOeYkfLRQisDk1W+jIFFKBeUBbBg==
 
+https-proxy-agent@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz#e2a90542abb68a762e0a0850f6c9edadfd8506b2"
+  integrity sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==
+  dependencies:
+    agent-base "6"
+    debug "4"
+
 https-proxy-agent@^5.0.0:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz#c59ef224a04fe8b754f3db0063a25ea30d0005d6"
@@ -11070,6 +11083,13 @@ mixin-deep@^1.2.0:
     for-in "^1.0.2"
     is-extendable "^1.0.1"
 
+mixpanel@^0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/mixpanel/-/mixpanel-0.18.0.tgz#f010f2622902d0d4b434de238446ec8e5966ee32"
+  integrity sha512-VyUoiLB/S/7abYYHGD5x0LijeuJCUabG8Hb+FvYU3Y99xHf1Qh+s4/pH9lt50fRitAHncWbU1FE01EknUfVVjQ==
+  dependencies:
+    https-proxy-agent "5.0.0"
+
 mkdirp@1.0.4, mkdirp@^1.0.3, mkdirp@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
@@ -13315,6 +13335,13 @@ react-error-overlay@^6.0.9:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
+react-hot-toast@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.4.1.tgz#df04295eda8a7b12c4f968e54a61c8d36f4c0994"
+  integrity sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==
+  dependencies:
+    goober "^2.1.10"
+
 react-icons@^4.12.0:
   version "4.12.0"
   resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.12.0.tgz#54806159a966961bfd5cdb26e492f4dafd6a8d78"