feat: update items

Refactored billing flag name

Refactored FeatureFlag type

Disabled session recording by default

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) {

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

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}>

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

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()) {

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();

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);
 

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;
 }

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;
 
 /**