From f60cb22f11299980fd2feaca22b6651840b131a8 Mon Sep 17 00:00:00 2001
From: David Nguyen <davidngu28@gmail.com>
Date: Fri, 18 Aug 2023 20:05:14 +1000
Subject: [PATCH 1/3] feat: feature flags

---
 .env.example                                  |   7 +-
 apps/web/package.json                         |   2 +
 apps/web/process-env.d.ts                     |   2 -
 .../app/(dashboard)/settings/billing/page.tsx |   6 +-
 apps/web/src/app/layout.tsx                   |  31 +++--
 .../(dashboard)/layout/profile-dropdown.tsx   |  13 +-
 .../settings/layout/desktop-nav.tsx           |   9 +-
 .../settings/layout/mobile-nav.tsx            |   9 +-
 .../forms/edit-document/add-fields.tsx        |   2 +-
 ...entRect.ts => get-bounding-client-rect.ts} |   0
 apps/web/src/helpers/get-feature-flag.ts      |  79 ++++++++++++
 .../src/helpers/get-post-hog-server-client.ts |  16 +++
 .../get-server-component-feature-flag.ts      |  26 ++++
 apps/web/src/hooks/use-field-page-coords.ts   |   2 +-
 apps/web/src/pages/api/feature-flag/all.ts    |  44 +++++++
 apps/web/src/pages/api/feature-flag/get.ts    | 122 ++++++++++++++++++
 apps/web/src/providers/feature-flag.tsx       |  96 ++++++++++++++
 apps/web/src/providers/posthog.tsx            |  52 ++++++++
 package-lock.json                             | 116 +++++++++++++++++
 packages/lib/constants/feature-flags.ts       |  37 ++++++
 packages/lib/constants/features.ts            |   5 -
 packages/tsconfig/process-env.d.ts            |   2 -
 turbo.json                                    |  19 ++-
 23 files changed, 661 insertions(+), 36 deletions(-)
 rename apps/web/src/helpers/{getBoundingClientRect.ts => get-bounding-client-rect.ts} (100%)
 create mode 100644 apps/web/src/helpers/get-feature-flag.ts
 create mode 100644 apps/web/src/helpers/get-post-hog-server-client.ts
 create mode 100644 apps/web/src/helpers/get-server-component-feature-flag.ts
 create mode 100644 apps/web/src/pages/api/feature-flag/all.ts
 create mode 100644 apps/web/src/pages/api/feature-flag/get.ts
 create mode 100644 apps/web/src/providers/feature-flag.tsx
 create mode 100644 apps/web/src/providers/posthog.tsx
 create mode 100644 packages/lib/constants/feature-flags.ts
 delete mode 100644 packages/lib/constants/features.ts

diff --git a/.env.example b/.env.example
index 47dea109e..afeb90343 100644
--- a/.env.example
+++ b/.env.example
@@ -52,7 +52,12 @@ NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID=
 NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_YEARLY_PRICE_ID=
 
 # [[FEATURES]]
-NEXT_PUBLIC_SUBSCRIPTIONS_ENABLED=false
+# OPTIONAL: Leave blank to disable PostHog and feature flags.
+NEXT_PUBLIC_POSTHOG_KEY=""
+# OPTIONAL: Defines the host to use for PostHog.
+NEXT_PUBLIC_POSTHOG_HOST="https://eu.posthog.com"
+# OPTIONAL: Leave blank to disable billing.
+NEXT_PUBLIC_FEATURE_BILLING_ENABLED=
 
 # This is only required for the marketing site
 # [[REDIS]]
diff --git a/apps/web/package.json b/apps/web/package.json
index 31e8ff4f1..94c6e61af 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -27,6 +27,8 @@
     "next-plausible": "^3.10.1",
     "next-themes": "^0.2.1",
     "perfect-freehand": "^1.2.0",
+    "posthog-js": "^1.75.3",
+    "posthog-node": "^3.1.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-dropzone": "^14.2.3",
diff --git a/apps/web/process-env.d.ts b/apps/web/process-env.d.ts
index e91137fe1..1cb0018ac 100644
--- a/apps/web/process-env.d.ts
+++ b/apps/web/process-env.d.ts
@@ -10,8 +10,6 @@ declare namespace NodeJS {
     NEXT_PRIVATE_STRIPE_API_KEY: string;
     NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET: string;
 
-    NEXT_PUBLIC_SUBSCRIPTIONS_ENABLED: string;
-
     NEXT_PRIVATE_GOOGLE_CLIENT_ID: string;
     NEXT_PRIVATE_GOOGLE_CLIENT_SECRET: string;
   }
diff --git a/apps/web/src/app/(dashboard)/settings/billing/page.tsx b/apps/web/src/app/(dashboard)/settings/billing/page.tsx
index 76d9df688..8773f1aa8 100644
--- a/apps/web/src/app/(dashboard)/settings/billing/page.tsx
+++ b/apps/web/src/app/(dashboard)/settings/billing/page.tsx
@@ -1,15 +1,17 @@
 import { redirect } from 'next/navigation';
 
-import { IS_SUBSCRIPTIONS_ENABLED } from '@documenso/lib/constants/features';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
 
 import { PasswordForm } from '~/components/forms/password';
+import { getServerComponentFlag } from '~/helpers/get-server-component-feature-flag';
 
 export default async function BillingSettingsPage() {
   const user = await getRequiredServerComponentSession();
 
+  const isBillingEnabled = await getServerComponentFlag('billing');
+
   // Redirect if subscriptions are not enabled.
-  if (!IS_SUBSCRIPTIONS_ENABLED) {
+  if (!isBillingEnabled) {
     redirect('/settings/profile');
   }
 
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index 5bf2b9403..1d1e056ae 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -1,3 +1,5 @@
+import { Suspense } from 'react';
+
 import { Caveat, Inter } from 'next/font/google';
 
 import { TrpcProvider } from '@documenso/trpc/react';
@@ -5,8 +7,11 @@ import { cn } from '@documenso/ui/lib/utils';
 import { Toaster } from '@documenso/ui/primitives/toaster';
 import { TooltipProvider } from '@documenso/ui/primitives/tooltip';
 
+import { getServerComponentAllFlags } from '~/helpers/get-server-component-feature-flag';
+import { FeatureFlagProvider } from '~/providers/feature-flag';
 import { ThemeProvider } from '~/providers/next-theme';
 import { PlausibleProvider } from '~/providers/plausible';
+import { PostHogPageview } from '~/providers/posthog';
 
 import './globals.css';
 
@@ -37,7 +42,9 @@ export const metadata = {
   },
 };
 
-export default function RootLayout({ children }: { children: React.ReactNode }) {
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+  const flags = await getServerComponentAllFlags();
+
   return (
     <html
       lang="en"
@@ -51,15 +58,21 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <link rel="manifest" href="/site.webmanifest" />
       </head>
 
+      <Suspense>
+        <PostHogPageview />
+      </Suspense>
+
       <body>
-        <PlausibleProvider>
-          <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-            <TooltipProvider>
-              <TrpcProvider>{children}</TrpcProvider>
-            </TooltipProvider>
-          </ThemeProvider>
-        </PlausibleProvider>
-        <Toaster />
+        <FeatureFlagProvider initialFlags={flags}>
+          <PlausibleProvider>
+            <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+              <TooltipProvider>
+                <TrpcProvider>{children}</TrpcProvider>
+              </TooltipProvider>
+            </ThemeProvider>
+          </PlausibleProvider>
+          <Toaster />
+        </FeatureFlagProvider>
       </body>
     </html>
   );
diff --git a/apps/web/src/components/(dashboard)/layout/profile-dropdown.tsx b/apps/web/src/components/(dashboard)/layout/profile-dropdown.tsx
index e07b786c3..fb57beff8 100644
--- a/apps/web/src/components/(dashboard)/layout/profile-dropdown.tsx
+++ b/apps/web/src/components/(dashboard)/layout/profile-dropdown.tsx
@@ -15,7 +15,6 @@ import {
 import { signOut } from 'next-auth/react';
 import { useTheme } from 'next-themes';
 
-import { IS_SUBSCRIPTIONS_ENABLED } from '@documenso/lib/constants/features';
 import { User } from '@documenso/prisma/client';
 import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
 import { Button } from '@documenso/ui/primitives/button';
@@ -28,11 +27,19 @@ import {
   DropdownMenuTrigger,
 } from '@documenso/ui/primitives/dropdown-menu';
 
+import { useFeatureFlags } from '~/providers/feature-flag';
+
 export type ProfileDropdownProps = {
   user: User;
 };
 
 export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
+  const { theme, setTheme } = useTheme();
+
+  const { getFlag } = useFeatureFlags();
+
+  const isBillingEnabled = getFlag('billing');
+
   const initials =
     user.name
       ?.split(' ')
@@ -40,8 +47,6 @@ export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
       .slice(0, 2)
       .join('') ?? 'UK';
 
-  const { theme, setTheme } = useTheme();
-
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -69,7 +74,7 @@ export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
           </Link>
         </DropdownMenuItem>
 
-        {IS_SUBSCRIPTIONS_ENABLED && (
+        {isBillingEnabled && (
           <DropdownMenuItem asChild>
             <Link href="/settings/billing" className="cursor-pointer">
               <CreditCard className="mr-2 h-4 w-4" />
diff --git a/apps/web/src/components/(dashboard)/settings/layout/desktop-nav.tsx b/apps/web/src/components/(dashboard)/settings/layout/desktop-nav.tsx
index 0c9e6eb19..6cce0e62e 100644
--- a/apps/web/src/components/(dashboard)/settings/layout/desktop-nav.tsx
+++ b/apps/web/src/components/(dashboard)/settings/layout/desktop-nav.tsx
@@ -7,15 +7,20 @@ import { usePathname } from 'next/navigation';
 
 import { CreditCard, Key, User } from 'lucide-react';
 
-import { IS_SUBSCRIPTIONS_ENABLED } from '@documenso/lib/constants/features';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
+import { useFeatureFlags } from '~/providers/feature-flag';
+
 export type DesktopNavProps = HTMLAttributes<HTMLDivElement>;
 
 export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
   const pathname = usePathname();
 
+  const { getFlag } = useFeatureFlags();
+
+  const isBillingEnabled = getFlag('billing');
+
   return (
     <div className={cn('flex flex-col gap-y-2', className)} {...props}>
       <Link href="/settings/profile">
@@ -44,7 +49,7 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
         </Button>
       </Link>
 
-      {IS_SUBSCRIPTIONS_ENABLED && (
+      {isBillingEnabled && (
         <Link href="/settings/billing">
           <Button
             variant="ghost"
diff --git a/apps/web/src/components/(dashboard)/settings/layout/mobile-nav.tsx b/apps/web/src/components/(dashboard)/settings/layout/mobile-nav.tsx
index 0a2eb991f..24fccedaa 100644
--- a/apps/web/src/components/(dashboard)/settings/layout/mobile-nav.tsx
+++ b/apps/web/src/components/(dashboard)/settings/layout/mobile-nav.tsx
@@ -7,15 +7,20 @@ import { usePathname } from 'next/navigation';
 
 import { CreditCard, Key, User } from 'lucide-react';
 
-import { IS_SUBSCRIPTIONS_ENABLED } from '@documenso/lib/constants/features';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
+import { useFeatureFlags } from '~/providers/feature-flag';
+
 export type MobileNavProps = HTMLAttributes<HTMLDivElement>;
 
 export const MobileNav = ({ className, ...props }: MobileNavProps) => {
   const pathname = usePathname();
 
+  const { getFlag } = useFeatureFlags();
+
+  const isBillingEnabled = getFlag('billing');
+
   return (
     <div
       className={cn('flex flex-wrap items-center justify-start gap-x-2 gap-y-4', className)}
@@ -47,7 +52,7 @@ export const MobileNav = ({ className, ...props }: MobileNavProps) => {
         </Button>
       </Link>
 
-      {IS_SUBSCRIPTIONS_ENABLED && (
+      {isBillingEnabled && (
         <Link href="/settings/billing">
           <Button
             variant="ghost"
diff --git a/apps/web/src/components/forms/edit-document/add-fields.tsx b/apps/web/src/components/forms/edit-document/add-fields.tsx
index 98384d0d1..34b5723de 100644
--- a/apps/web/src/components/forms/edit-document/add-fields.tsx
+++ b/apps/web/src/components/forms/edit-document/add-fields.tsx
@@ -25,7 +25,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitive
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { PDF_VIEWER_PAGE_SELECTOR } from '~/components/(dashboard)/pdf-viewer/types';
-import { getBoundingClientRect } from '~/helpers/getBoundingClientRect';
+import { getBoundingClientRect } from '~/helpers/get-bounding-client-rect';
 
 import { addFields } from './add-fields.action';
 import { TAddFieldsFormSchema } from './add-fields.types';
diff --git a/apps/web/src/helpers/getBoundingClientRect.ts b/apps/web/src/helpers/get-bounding-client-rect.ts
similarity index 100%
rename from apps/web/src/helpers/getBoundingClientRect.ts
rename to apps/web/src/helpers/get-bounding-client-rect.ts
diff --git a/apps/web/src/helpers/get-feature-flag.ts b/apps/web/src/helpers/get-feature-flag.ts
new file mode 100644
index 000000000..68dd1763a
--- /dev/null
+++ b/apps/web/src/helpers/get-feature-flag.ts
@@ -0,0 +1,79 @@
+import { z } from 'zod';
+
+import { LOCAL_FEATURE_FLAGS, isFeatureFlagEnabled } from '@documenso/lib/constants/feature-flags';
+
+import { FeatureFlagValue } from '~/providers/feature-flag';
+
+/**
+ * Evaluate whether a flag is enabled for the current user.
+ *
+ * @param flag The flag to evaluate.
+ * @param options See `GetFlagOptions`.
+ * @returns Whether the flag is enabled, or the variant value of the flag.
+ */
+export const getFlag = async (
+  flag: string,
+  options?: GetFlagOptions,
+): Promise<FeatureFlagValue> => {
+  const requestHeaders = options?.requestHeaders ?? {};
+
+  if (!isFeatureFlagEnabled()) {
+    return LOCAL_FEATURE_FLAGS[flag] ?? true;
+  }
+
+  const url = new URL(`${process.env.NEXT_PUBLIC_SITE_URL}/api/feature-flag/get`);
+  url.searchParams.set('flag', flag);
+
+  const response = await fetch(url, {
+    headers: {
+      ...requestHeaders,
+    },
+    next: {
+      revalidate: 60,
+    },
+  })
+    .then((res) => res.json())
+    .then((res) => z.union([z.boolean(), z.string()]).parse(res))
+    .catch(() => false);
+
+  return response;
+};
+
+/**
+ * Get all feature flags for the current user if possible.
+ *
+ * @param options See `GetFlagOptions`.
+ * @returns A record of flags and their values for the user derived from the headers.
+ */
+export const getAllFlags = async (
+  options?: GetFlagOptions,
+): Promise<Record<string, FeatureFlagValue>> => {
+  const requestHeaders = options?.requestHeaders ?? {};
+
+  if (!isFeatureFlagEnabled()) {
+    return LOCAL_FEATURE_FLAGS;
+  }
+
+  const url = new URL(`${process.env.NEXT_PUBLIC_SITE_URL}/api/feature-flag/all`);
+
+  return fetch(url, {
+    headers: {
+      ...requestHeaders,
+    },
+    next: {
+      revalidate: 60,
+    },
+  })
+    .then((res) => res.json())
+    .then((res) => z.record(z.string(), z.union([z.boolean(), z.string()])).parse(res))
+    .catch(() => LOCAL_FEATURE_FLAGS);
+};
+
+interface GetFlagOptions {
+  /**
+   * The headers to attach to the request to evaluate flags.
+   *
+   * The authenticated user will be derived from the headers if possible.
+   */
+  requestHeaders: Record<string, string>;
+}
diff --git a/apps/web/src/helpers/get-post-hog-server-client.ts b/apps/web/src/helpers/get-post-hog-server-client.ts
new file mode 100644
index 000000000..c5670be8c
--- /dev/null
+++ b/apps/web/src/helpers/get-post-hog-server-client.ts
@@ -0,0 +1,16 @@
+import { PostHog } from 'posthog-node';
+
+import { extractPostHogConfig } from '@documenso/lib/constants/feature-flags';
+
+export default function PostHogServerClient() {
+  const postHogConfig = extractPostHogConfig();
+
+  if (!postHogConfig) {
+    return null;
+  }
+
+  return new PostHog(postHogConfig.key, {
+    host: postHogConfig.host,
+    fetch: (...args) => fetch(...args),
+  });
+}
diff --git a/apps/web/src/helpers/get-server-component-feature-flag.ts b/apps/web/src/helpers/get-server-component-feature-flag.ts
new file mode 100644
index 000000000..ebfaf4bd6
--- /dev/null
+++ b/apps/web/src/helpers/get-server-component-feature-flag.ts
@@ -0,0 +1,26 @@
+import { headers } from 'next/headers';
+
+import { getAllFlags, getFlag } from './get-feature-flag';
+
+/**
+ * Evaluate whether a flag is enabled for the current user in a server component.
+ *
+ * @param flag The flag to evaluate.
+ * @returns Whether the flag is enabled, or the variant value of the flag.
+ */
+export const getServerComponentFlag = async (flag: string) => {
+  return await getFlag(flag, {
+    requestHeaders: Object.fromEntries(headers().entries()),
+  });
+};
+
+/**
+ * Get all feature flags for the current user from a server component.
+ *
+ * @returns A record of flags and their values for the user derived from the headers.
+ */
+export const getServerComponentAllFlags = async () => {
+  return await getAllFlags({
+    requestHeaders: Object.fromEntries(headers().entries()),
+  });
+};
diff --git a/apps/web/src/hooks/use-field-page-coords.ts b/apps/web/src/hooks/use-field-page-coords.ts
index eab0250a9..9ad0c569f 100644
--- a/apps/web/src/hooks/use-field-page-coords.ts
+++ b/apps/web/src/hooks/use-field-page-coords.ts
@@ -3,7 +3,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { Field } from '@documenso/prisma/client';
 
 import { PDF_VIEWER_PAGE_SELECTOR } from '~/components/(dashboard)/pdf-viewer/types';
-import { getBoundingClientRect } from '~/helpers/getBoundingClientRect';
+import { getBoundingClientRect } from '~/helpers/get-bounding-client-rect';
 
 export const useFieldPageCoords = (field: Field) => {
   const [coords, setCoords] = useState({
diff --git a/apps/web/src/pages/api/feature-flag/all.ts b/apps/web/src/pages/api/feature-flag/all.ts
new file mode 100644
index 000000000..f0977b932
--- /dev/null
+++ b/apps/web/src/pages/api/feature-flag/all.ts
@@ -0,0 +1,44 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+import { getToken } from 'next-auth/jwt';
+
+import { LOCAL_FEATURE_FLAGS } from '@documenso/lib/constants/feature-flags';
+
+import PostHogServerClient from '~/helpers/get-post-hog-server-client';
+
+import { extractDistinctUserId, mapJwtToFlagProperties } from './get';
+
+export const config = {
+  runtime: 'edge',
+};
+
+/**
+ * Get all the evaluated feature flags based on the current user if possible.
+ */
+export default async function handler(req: Request) {
+  const requestHeaders = Object.fromEntries(req.headers.entries());
+
+  const nextReq = new NextRequest(req, {
+    headers: requestHeaders,
+  });
+
+  const token = await getToken({ req: nextReq });
+
+  const postHog = PostHogServerClient();
+
+  // Return the local feature flags if PostHog is not enabled, true by default.
+  // The front end should not call this API if PostHog is not enabled to reduce network requests.
+  if (!postHog) {
+    return NextResponse.json(LOCAL_FEATURE_FLAGS);
+  }
+
+  const distinctId = extractDistinctUserId(token, nextReq);
+
+  const featureFlags = await postHog.getAllFlags(distinctId, mapJwtToFlagProperties(token));
+
+  const res = NextResponse.json(featureFlags);
+
+  res.headers.set('Cache-Control', 'public, s-maxage=120, stale-while-revalidate=60');
+
+  return res;
+}
diff --git a/apps/web/src/pages/api/feature-flag/get.ts b/apps/web/src/pages/api/feature-flag/get.ts
new file mode 100644
index 000000000..eab7f9cb8
--- /dev/null
+++ b/apps/web/src/pages/api/feature-flag/get.ts
@@ -0,0 +1,122 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+import { nanoid } from 'nanoid';
+import { JWT, getToken } from 'next-auth/jwt';
+
+import { LOCAL_FEATURE_FLAGS, extractPostHogConfig } from '@documenso/lib/constants/feature-flags';
+
+import PostHogServerClient from '~/helpers/get-post-hog-server-client';
+
+export const config = {
+  runtime: 'edge',
+};
+
+/**
+ * Evaluate a single feature flag based on the current user if possible.
+ *
+ * @param req The request with a query parameter `flag`. Example request URL: /api/feature-flag/get?flag=flag-name
+ * @returns A Response with the feature flag value.
+ */
+export default async function handler(req: Request) {
+  const { searchParams } = new URL(req.url ?? '');
+  const flag = searchParams.get('flag');
+
+  const requestHeaders = Object.fromEntries(req.headers.entries());
+
+  const nextReq = new NextRequest(req, {
+    headers: requestHeaders,
+  });
+
+  const token = await getToken({ req: nextReq });
+
+  if (!flag) {
+    return NextResponse.json(
+      {
+        error: 'Missing flag query parameter.',
+      },
+      {
+        status: 400,
+        headers: {
+          'content-type': 'application/json',
+        },
+      },
+    );
+  }
+
+  const postHog = PostHogServerClient();
+
+  // Return the local feature flags if PostHog is not enabled, true by default.
+  // The front end should not call this API if PostHog is disabled to reduce network requests.
+  if (!postHog) {
+    return NextResponse.json(LOCAL_FEATURE_FLAGS[flag] ?? true);
+  }
+
+  const distinctId = extractDistinctUserId(token, nextReq);
+
+  const featureFlag = await postHog.getFeatureFlag(flag, distinctId, mapJwtToFlagProperties(token));
+
+  const res = NextResponse.json(featureFlag);
+
+  res.headers.set('Cache-Control', 'public, s-maxage=120, stale-while-revalidate=60');
+
+  return res;
+}
+
+/**
+ * Map a JWT to properties which are consumed by PostHog to evaluate feature flags.
+ *
+ * @param jwt The JWT of the current user.
+ * @returns A map of properties which are consumed by PostHog.
+ */
+export const mapJwtToFlagProperties = (
+  jwt?: JWT | null,
+): {
+  groups?: Record<string, string>;
+  personProperties?: Record<string, string>;
+  groupProperties?: Record<string, Record<string, string>>;
+} => {
+  return {
+    personProperties: {
+      email: jwt?.email ?? '',
+    },
+    groupProperties: {
+      // Add properties to group users into different groups, such as billing plan.
+    },
+  };
+};
+
+/**
+ * Extract a distinct ID from a JWT and request.
+ *
+ * Will fallback to a random ID if no ID could be extracted from either the JWT or request.
+ *
+ * @param jwt The JWT of the current user.
+ * @param request Request potentially containing a PostHog `distinct_id` cookie.
+ * @returns
+ */
+export const extractDistinctUserId = (jwt: JWT | null, request: NextRequest): string => {
+  const config = extractPostHogConfig();
+
+  const email = jwt?.email;
+  const userId = jwt?.id.toString();
+
+  let fallbackDistinctId = nanoid();
+
+  if (config) {
+    try {
+      const postHogCookie = JSON.parse(
+        request.cookies.get(`ph_${config.key}_posthog`)?.value ?? '',
+      );
+
+      const postHogDistinctId = postHogCookie['distinct_id'];
+
+      if (typeof postHogDistinctId === 'string') {
+        fallbackDistinctId = postHogDistinctId;
+      }
+    } catch {
+      // Do nothing.
+    }
+  }
+
+  return email ?? userId ?? fallbackDistinctId;
+};
diff --git a/apps/web/src/providers/feature-flag.tsx b/apps/web/src/providers/feature-flag.tsx
new file mode 100644
index 000000000..df034abc3
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/apps/web/src/providers/posthog.tsx b/apps/web/src/providers/posthog.tsx
new file mode 100644
index 000000000..792802a38
--- /dev/null
+++ b/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 <></>;
+}
diff --git a/package-lock.json b/package-lock.json
index ba8973416..7860c527a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -80,6 +80,8 @@
         "next-plausible": "^3.10.1",
         "next-themes": "^0.2.1",
         "perfect-freehand": "^1.2.0",
+        "posthog-js": "^1.75.3",
+        "posthog-node": "^3.1.1",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-dropzone": "^14.2.3",
@@ -5127,6 +5129,11 @@
         "astring": "bin/astring"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/attr-accept": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz",
@@ -5186,6 +5193,15 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "dependencies": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
@@ -6005,6 +6021,17 @@
       "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
       "dev": true
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/comma-separated-tokens": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
@@ -6593,6 +6620,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/delegates": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
@@ -8042,6 +8077,11 @@
         "node": "^12.20 || >= 14.13"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.4.8",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz",
+      "integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA=="
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -8107,6 +8147,25 @@
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
       "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ=="
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -8115,6 +8174,19 @@
         "is-callable": "^1.1.3"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/format": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
@@ -11157,6 +11229,25 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/mimic-fn": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
@@ -12312,6 +12403,26 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/posthog-js": {
+      "version": "1.75.3",
+      "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.75.3.tgz",
+      "integrity": "sha512-q5xP4R/Tx8E6H0goZQjY+URMLATFiYXc2raHA+31aNvpBs118fPTmExa4RK6MgRZDFhBiMUBZNT6aj7dM3SyUQ==",
+      "dependencies": {
+        "fflate": "^0.4.1"
+      }
+    },
+    "node_modules/posthog-node": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/posthog-node/-/posthog-node-3.1.1.tgz",
+      "integrity": "sha512-OUSYcnLHbzvY/dxNsbUGoYuTZz5XNx48BkfiCkOIJZMFvot5VPQ0KWEjX+kzYxEwHeXbjW9plqsOVcYCYfidgg==",
+      "dependencies": {
+        "axios": "^0.27.0",
+        "rusha": "^0.8.14"
+      },
+      "engines": {
+        "node": ">=15.0.0"
+      }
+    },
     "node_modules/preact": {
       "version": "10.16.0",
       "resolved": "https://registry.npmjs.org/preact/-/preact-10.16.0.tgz",
@@ -13556,6 +13667,11 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rusha": {
+      "version": "0.8.14",
+      "resolved": "https://registry.npmjs.org/rusha/-/rusha-0.8.14.tgz",
+      "integrity": "sha512-cLgakCUf6PedEu15t8kbsjnwIFFR2D4RfL+W3iWFJ4iac7z4B0ZI8fxy4R3J956kAI68HclCFGL8MPoUVC3qVA=="
+    },
     "node_modules/sade": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
diff --git a/packages/lib/constants/feature-flags.ts b/packages/lib/constants/feature-flags.ts
new file mode 100644
index 000000000..77d89065b
--- /dev/null
+++ b/packages/lib/constants/feature-flags.ts
@@ -0,0 +1,37 @@
+/**
+ * How frequent to poll for new feature flags in milliseconds.
+ */
+export const FEATURE_FLAG_POLL_INTERVAL = 30000;
+
+/**
+ * Feature flags that will be used when PostHog is disabled.
+ *
+ * Does not take any person or group properties into account.
+ */
+export const LOCAL_FEATURE_FLAGS: Record<string, boolean> = {
+  billing: process.env.NEXT_PUBLIC_FEATURE_BILLING_ENABLED === 'true',
+} as const;
+
+/**
+ * Extract the PostHog configuration from the environment.
+ */
+export function extractPostHogConfig(): { key: string; host: string } | null {
+  const postHogKey = process.env.NEXT_PUBLIC_POSTHOG_KEY;
+  const postHogHost = process.env.NEXT_PUBLIC_POSTHOG_HOST;
+
+  if (!postHogKey || !postHogHost) {
+    return null;
+  }
+
+  return {
+    key: postHogKey,
+    host: postHogHost,
+  };
+}
+
+/**
+ * Whether feature flags are enabled for the current instance.
+ */
+export function isFeatureFlagEnabled(): boolean {
+  return extractPostHogConfig() !== null;
+}
diff --git a/packages/lib/constants/features.ts b/packages/lib/constants/features.ts
deleted file mode 100644
index 11c6b2dad..000000000
--- a/packages/lib/constants/features.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-/* eslint-disable turbo/no-undeclared-env-vars */
-export const IS_SUBSCRIPTIONS_ENABLED = process.env.NEXT_PUBLIC_SUBSCRIPTIONS_ENABLED === 'true';
-
-export const isSubscriptionsEnabled = () =>
-  process.env.NEXT_PUBLIC_SUBSCRIPTIONS_ENABLED === 'true';
diff --git a/packages/tsconfig/process-env.d.ts b/packages/tsconfig/process-env.d.ts
index 8f8b6f108..6c031858d 100644
--- a/packages/tsconfig/process-env.d.ts
+++ b/packages/tsconfig/process-env.d.ts
@@ -13,8 +13,6 @@ declare namespace NodeJS {
     NEXT_PRIVATE_STRIPE_API_KEY: string;
     NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET: string;
 
-    NEXT_PUBLIC_SUBSCRIPTIONS_ENABLED: string;
-
     NEXT_PRIVATE_SMTP_TRANSPORT?: 'mailchannels' | 'smtp-auth' | 'smtp-api';
 
     NEXT_PRIVATE_MAILCHANNELS_API_KEY?: string;
diff --git a/turbo.json b/turbo.json
index c900def16..ab4460781 100644
--- a/turbo.json
+++ b/turbo.json
@@ -2,8 +2,13 @@
   "$schema": "https://turbo.build/schema.json",
   "pipeline": {
     "build": {
-      "dependsOn": ["^build"],
-      "outputs": [".next/**", "!.next/cache/**"]
+      "dependsOn": [
+        "^build"
+      ],
+      "outputs": [
+        ".next/**",
+        "!.next/cache/**"
+      ]
     },
     "lint": {},
     "dev": {
@@ -11,14 +16,18 @@
       "persistent": true
     }
   },
-  "globalDependencies": ["**/.env.*local"],
+  "globalDependencies": [
+    "**/.env.*local"
+  ],
   "globalEnv": [
     "NEXTAUTH_URL",
     "NEXTAUTH_SECRET",
     "NEXT_PUBLIC_SITE_URL",
+    "NEXT_PUBLIC_POSTHOG_KEY",
+    "NEXT_PUBLIC_POSTHOG_HOST",
+    "NEXT_PUBLIC_FEATURE_BILLING_ENABLED",
     "NEXT_PRIVATE_DATABASE_URL",
     "NEXT_PRIVATE_NEXT_AUTH_SECRET",
-    "NEXT_PUBLIC_SUBSCRIPTIONS_ENABLED",
     "NEXT_PRIVATE_GOOGLE_CLIENT_ID",
     "NEXT_PRIVATE_GOOGLE_CLIENT_SECRET",
     "NEXT_PRIVATE_SMTP_TRANSPORT",
@@ -37,4 +46,4 @@
     "NEXT_PRIVATE_SMTP_FROM_NAME",
     "NEXT_PRIVATE_SMTP_FROM_ADDRESS"
   ]
-}
+}
\ No newline at end of file

From d0720f4c70d4a74dc658bca705a1162916d8f034 Mon Sep 17 00:00:00 2001
From: David Nguyen <davidngu28@gmail.com>
Date: Mon, 21 Aug 2023 11:44:56 +1000
Subject: [PATCH 2/3] feat: update items

Refactored billing flag name

Refactored FeatureFlag type

Disabled session recording by default
---
 .../src/app/(dashboard)/settings/billing/page.tsx |  2 +-
 .../(dashboard)/layout/profile-dropdown.tsx       |  2 +-
 .../(dashboard)/settings/layout/desktop-nav.tsx   |  2 +-
 .../(dashboard)/settings/layout/mobile-nav.tsx    |  2 +-
 apps/web/src/helpers/get-feature-flag.ts          |  6 +++---
 apps/web/src/pages/api/feature-flag/get.ts        |  2 +-
 apps/web/src/providers/feature-flag.tsx           | 15 ++++++++++++---
 apps/web/src/providers/posthog.tsx                |  5 +++--
 packages/lib/constants/feature-flags.ts           |  2 +-
 9 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/app/(dashboard)/settings/billing/page.tsx b/apps/web/src/app/(dashboard)/settings/billing/page.tsx
index 8773f1aa8..256f682fb 100644
--- a/apps/web/src/app/(dashboard)/settings/billing/page.tsx
+++ b/apps/web/src/app/(dashboard)/settings/billing/page.tsx
@@ -8,7 +8,7 @@ import { getServerComponentFlag } from '~/helpers/get-server-component-feature-f
 export default async function BillingSettingsPage() {
   const user = await getRequiredServerComponentSession();
 
-  const isBillingEnabled = await getServerComponentFlag('billing');
+  const isBillingEnabled = await getServerComponentFlag('app_billing');
 
   // Redirect if subscriptions are not enabled.
   if (!isBillingEnabled) {
diff --git a/apps/web/src/components/(dashboard)/layout/profile-dropdown.tsx b/apps/web/src/components/(dashboard)/layout/profile-dropdown.tsx
index fb57beff8..f7d14c39d 100644
--- a/apps/web/src/components/(dashboard)/layout/profile-dropdown.tsx
+++ b/apps/web/src/components/(dashboard)/layout/profile-dropdown.tsx
@@ -38,7 +38,7 @@ export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
 
   const { getFlag } = useFeatureFlags();
 
-  const isBillingEnabled = getFlag('billing');
+  const isBillingEnabled = getFlag('app_billing');
 
   const initials =
     user.name
diff --git a/apps/web/src/components/(dashboard)/settings/layout/desktop-nav.tsx b/apps/web/src/components/(dashboard)/settings/layout/desktop-nav.tsx
index 6cce0e62e..5a85680c8 100644
--- a/apps/web/src/components/(dashboard)/settings/layout/desktop-nav.tsx
+++ b/apps/web/src/components/(dashboard)/settings/layout/desktop-nav.tsx
@@ -19,7 +19,7 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
 
   const { getFlag } = useFeatureFlags();
 
-  const isBillingEnabled = getFlag('billing');
+  const isBillingEnabled = getFlag('app_billing');
 
   return (
     <div className={cn('flex flex-col gap-y-2', className)} {...props}>
diff --git a/apps/web/src/components/(dashboard)/settings/layout/mobile-nav.tsx b/apps/web/src/components/(dashboard)/settings/layout/mobile-nav.tsx
index 24fccedaa..19bbefdc9 100644
--- a/apps/web/src/components/(dashboard)/settings/layout/mobile-nav.tsx
+++ b/apps/web/src/components/(dashboard)/settings/layout/mobile-nav.tsx
@@ -19,7 +19,7 @@ export const MobileNav = ({ className, ...props }: MobileNavProps) => {
 
   const { getFlag } = useFeatureFlags();
 
-  const isBillingEnabled = getFlag('billing');
+  const isBillingEnabled = getFlag('app_billing');
 
   return (
     <div
diff --git a/apps/web/src/helpers/get-feature-flag.ts b/apps/web/src/helpers/get-feature-flag.ts
index 68dd1763a..d37a37749 100644
--- a/apps/web/src/helpers/get-feature-flag.ts
+++ b/apps/web/src/helpers/get-feature-flag.ts
@@ -2,7 +2,7 @@ import { z } from 'zod';
 
 import { LOCAL_FEATURE_FLAGS, isFeatureFlagEnabled } from '@documenso/lib/constants/feature-flags';
 
-import { FeatureFlagValue } from '~/providers/feature-flag';
+import { TFeatureFlagValue } from '~/providers/feature-flag';
 
 /**
  * Evaluate whether a flag is enabled for the current user.
@@ -14,7 +14,7 @@ import { FeatureFlagValue } from '~/providers/feature-flag';
 export const getFlag = async (
   flag: string,
   options?: GetFlagOptions,
-): Promise<FeatureFlagValue> => {
+): Promise<TFeatureFlagValue> => {
   const requestHeaders = options?.requestHeaders ?? {};
 
   if (!isFeatureFlagEnabled()) {
@@ -47,7 +47,7 @@ export const getFlag = async (
  */
 export const getAllFlags = async (
   options?: GetFlagOptions,
-): Promise<Record<string, FeatureFlagValue>> => {
+): Promise<Record<string, TFeatureFlagValue>> => {
   const requestHeaders = options?.requestHeaders ?? {};
 
   if (!isFeatureFlagEnabled()) {
diff --git a/apps/web/src/pages/api/feature-flag/get.ts b/apps/web/src/pages/api/feature-flag/get.ts
index eab7f9cb8..c3de053cd 100644
--- a/apps/web/src/pages/api/feature-flag/get.ts
+++ b/apps/web/src/pages/api/feature-flag/get.ts
@@ -92,7 +92,7 @@ export const mapJwtToFlagProperties = (
  *
  * @param jwt The JWT of the current user.
  * @param request Request potentially containing a PostHog `distinct_id` cookie.
- * @returns
+ * @returns A distinct user ID.
  */
 export const extractDistinctUserId = (jwt: JWT | null, request: NextRequest): string => {
   const config = extractPostHogConfig();
diff --git a/apps/web/src/providers/feature-flag.tsx b/apps/web/src/providers/feature-flag.tsx
index df034abc3..2bd9e1a3e 100644
--- a/apps/web/src/providers/feature-flag.tsx
+++ b/apps/web/src/providers/feature-flag.tsx
@@ -2,6 +2,8 @@
 
 import { createContext, useCallback, useContext, useEffect, useState } from 'react';
 
+import { z } from 'zod';
+
 import {
   FEATURE_FLAG_POLL_INTERVAL,
   LOCAL_FEATURE_FLAGS,
@@ -10,10 +12,17 @@ import {
 
 import { getAllFlags } from '~/helpers/get-feature-flag';
 
-export type FeatureFlagValue = boolean | string | number | undefined;
+export const ZFeatureFlagValueSchema = z.union([
+  z.boolean(),
+  z.string(),
+  z.number(),
+  z.undefined(),
+]);
+
+export type TFeatureFlagValue = z.infer<typeof ZFeatureFlagValueSchema>;
 
 export type FeatureFlagContextValue = {
-  getFlag: (_key: string) => FeatureFlagValue;
+  getFlag: (_key: string) => TFeatureFlagValue;
 };
 
 export const FeatureFlagContext = createContext<FeatureFlagContextValue | null>(null);
@@ -33,7 +42,7 @@ export function FeatureFlagProvider({
   initialFlags,
 }: {
   children: React.ReactNode;
-  initialFlags: Record<string, FeatureFlagValue>;
+  initialFlags: Record<string, TFeatureFlagValue>;
 }) {
   const [flags, setFlags] = useState(initialFlags);
 
diff --git a/apps/web/src/providers/posthog.tsx b/apps/web/src/providers/posthog.tsx
index 792802a38..4bed6960e 100644
--- a/apps/web/src/providers/posthog.tsx
+++ b/apps/web/src/providers/posthog.tsx
@@ -9,7 +9,7 @@ import posthog from 'posthog-js';
 
 import { extractPostHogConfig } from '@documenso/lib/constants/feature-flags';
 
-export function PostHogPageview(): JSX.Element {
+export function PostHogPageview() {
   const postHogConfig = extractPostHogConfig();
 
   const pathname = usePathname();
@@ -18,6 +18,7 @@ export function PostHogPageview(): JSX.Element {
   if (typeof window !== 'undefined' && postHogConfig) {
     posthog.init(postHogConfig.key, {
       api_host: postHogConfig.host,
+      disable_session_recording: true,
       loaded: () => {
         getSession()
           .then((session) => {
@@ -48,5 +49,5 @@ export function PostHogPageview(): JSX.Element {
     });
   }, [pathname, searchParams, postHogConfig]);
 
-  return <></>;
+  return null;
 }
diff --git a/packages/lib/constants/feature-flags.ts b/packages/lib/constants/feature-flags.ts
index 77d89065b..d0004e83b 100644
--- a/packages/lib/constants/feature-flags.ts
+++ b/packages/lib/constants/feature-flags.ts
@@ -9,7 +9,7 @@ export const FEATURE_FLAG_POLL_INTERVAL = 30000;
  * Does not take any person or group properties into account.
  */
 export const LOCAL_FEATURE_FLAGS: Record<string, boolean> = {
-  billing: process.env.NEXT_PUBLIC_FEATURE_BILLING_ENABLED === 'true',
+  app_billing: process.env.NEXT_PUBLIC_FEATURE_BILLING_ENABLED === 'true',
 } as const;
 
 /**

From ba95818da4e29bc617f268ce478385dd1da73e58 Mon Sep 17 00:00:00 2001
From: David Nguyen <davidngu28@gmail.com>
Date: Mon, 21 Aug 2023 12:16:06 +1000
Subject: [PATCH 3/3] feat: update items

---
 apps/web/src/helpers/get-feature-flag.ts   | 6 +++---
 apps/web/src/pages/api/feature-flag/all.ts | 2 +-
 apps/web/src/pages/api/feature-flag/get.ts | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/helpers/get-feature-flag.ts b/apps/web/src/helpers/get-feature-flag.ts
index d37a37749..67ab30397 100644
--- a/apps/web/src/helpers/get-feature-flag.ts
+++ b/apps/web/src/helpers/get-feature-flag.ts
@@ -2,7 +2,7 @@ import { z } from 'zod';
 
 import { LOCAL_FEATURE_FLAGS, isFeatureFlagEnabled } from '@documenso/lib/constants/feature-flags';
 
-import { TFeatureFlagValue } from '~/providers/feature-flag';
+import { TFeatureFlagValue, ZFeatureFlagValueSchema } from '~/providers/feature-flag';
 
 /**
  * Evaluate whether a flag is enabled for the current user.
@@ -33,7 +33,7 @@ export const getFlag = async (
     },
   })
     .then((res) => res.json())
-    .then((res) => z.union([z.boolean(), z.string()]).parse(res))
+    .then((res) => ZFeatureFlagValueSchema.parse(res))
     .catch(() => false);
 
   return response;
@@ -65,7 +65,7 @@ export const getAllFlags = async (
     },
   })
     .then((res) => res.json())
-    .then((res) => z.record(z.string(), z.union([z.boolean(), z.string()])).parse(res))
+    .then((res) => z.record(z.string(), ZFeatureFlagValueSchema).parse(res))
     .catch(() => LOCAL_FEATURE_FLAGS);
 };
 
diff --git a/apps/web/src/pages/api/feature-flag/all.ts b/apps/web/src/pages/api/feature-flag/all.ts
index f0977b932..54efbd7fc 100644
--- a/apps/web/src/pages/api/feature-flag/all.ts
+++ b/apps/web/src/pages/api/feature-flag/all.ts
@@ -38,7 +38,7 @@ export default async function handler(req: Request) {
 
   const res = NextResponse.json(featureFlags);
 
-  res.headers.set('Cache-Control', 'public, s-maxage=120, stale-while-revalidate=60');
+  res.headers.set('Cache-Control', 'public, s-maxage=60, stale-while-revalidate=300');
 
   return res;
 }
diff --git a/apps/web/src/pages/api/feature-flag/get.ts b/apps/web/src/pages/api/feature-flag/get.ts
index c3de053cd..6d5204596 100644
--- a/apps/web/src/pages/api/feature-flag/get.ts
+++ b/apps/web/src/pages/api/feature-flag/get.ts
@@ -57,7 +57,7 @@ export default async function handler(req: Request) {
 
   const res = NextResponse.json(featureFlag);
 
-  res.headers.set('Cache-Control', 'public, s-maxage=120, stale-while-revalidate=60');
+  res.headers.set('Cache-Control', 'public, s-maxage=60, stale-while-revalidate=300');
 
   return res;
 }