feat: feature flags

apps/web/src/providers/feature-flag.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import { createContext, useCallback, useContext, useEffect, useState } from 'react';
+
+import {
+  FEATURE_FLAG_POLL_INTERVAL,
+  LOCAL_FEATURE_FLAGS,
+  isFeatureFlagEnabled,
+} from '@documenso/lib/constants/feature-flags';
+
+import { getAllFlags } from '~/helpers/get-feature-flag';
+
+export type FeatureFlagValue = boolean | string | number | undefined;
+
+export type FeatureFlagContextValue = {
+  getFlag: (_key: string) => FeatureFlagValue;
+};
+
+export const FeatureFlagContext = createContext<FeatureFlagContextValue | null>(null);
+
+export const useFeatureFlags = () => {
+  const context = useContext(FeatureFlagContext);
+
+  if (!context) {
+    throw new Error('useFeatureFlags must be used within a FeatureFlagProvider');
+  }
+
+  return context;
+};
+
+export function FeatureFlagProvider({
+  children,
+  initialFlags,
+}: {
+  children: React.ReactNode;
+  initialFlags: Record<string, FeatureFlagValue>;
+}) {
+  const [flags, setFlags] = useState(initialFlags);
+
+  const getFlag = useCallback(
+    (flag: string) => {
+      if (!isFeatureFlagEnabled()) {
+        return LOCAL_FEATURE_FLAGS[flag] ?? true;
+      }
+
+      return flags[flag] ?? false;
+    },
+    [flags],
+  );
+
+  /**
+   * Refresh the flags every `FEATURE_FLAG_POLL_INTERVAL` amount of time if the window is focused.
+   */
+  useEffect(() => {
+    if (!isFeatureFlagEnabled()) {
+      return;
+    }
+
+    const interval = setInterval(() => {
+      if (document.hasFocus()) {
+        getAllFlags().then((newFlags) => setFlags(newFlags));
+      }
+    }, FEATURE_FLAG_POLL_INTERVAL);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+
+  /**
+   * Refresh the flags when the window is focused.
+   */
+  useEffect(() => {
+    if (!isFeatureFlagEnabled()) {
+      return;
+    }
+
+    const onFocus = () => getAllFlags().then((newFlags) => setFlags(newFlags));
+
+    window.addEventListener('focus', onFocus);
+
+    return () => {
+      window.removeEventListener('focus', onFocus);
+    };
+  }, []);
+
+  return (
+    <FeatureFlagContext.Provider
+      value={{
+        getFlag,
+      }}
+    >
+      {children}
+    </FeatureFlagContext.Provider>
+  );
+}

apps/web/src/providers/posthog.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { useEffect } from 'react';
+
+import { usePathname, useSearchParams } from 'next/navigation';
+
+import { getSession } from 'next-auth/react';
+import posthog from 'posthog-js';
+
+import { extractPostHogConfig } from '@documenso/lib/constants/feature-flags';
+
+export function PostHogPageview(): JSX.Element {
+  const postHogConfig = extractPostHogConfig();
+
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  if (typeof window !== 'undefined' && postHogConfig) {
+    posthog.init(postHogConfig.key, {
+      api_host: postHogConfig.host,
+      loaded: () => {
+        getSession()
+          .then((session) => {
+            if (session) {
+              posthog.identify(session.user.email ?? session.user.id.toString());
+            } else {
+              posthog.reset();
+            }
+          })
+          .catch(() => {
+            // Do nothing.
+          });
+      },
+    });
+  }
+
+  useEffect(() => {
+    if (!postHogConfig || !pathname) {
+      return;
+    }
+
+    let url = window.origin + pathname;
+    if (searchParams && searchParams.toString()) {
+      url = url + `?${searchParams.toString()}`;
+    }
+    posthog.capture('$pageview', {
+      $current_url: url,
+    });
+  }, [pathname, searchParams, postHogConfig]);
+
+  return <></>;
+}