diff --git a/frontend/src/scenes/onboarding/Onboarding.tsx b/frontend/src/scenes/onboarding/Onboarding.tsx index e22ded649f5d3..569760e106bf6 100644 --- a/frontend/src/scenes/onboarding/Onboarding.tsx +++ b/frontend/src/scenes/onboarding/Onboarding.tsx @@ -100,6 +100,8 @@ const ProductAnalyticsOnboarding = (): JSX.Element => { } const SessionReplayOnboarding = (): JSX.Element => { const { hasAvailableFeature } = useValues(userLogic) + const { currentTeam } = useValues(teamLogic) + const configOptions: ProductConfigOption[] = [ { type: 'toggle', @@ -107,7 +109,7 @@ const SessionReplayOnboarding = (): JSX.Element => { description: `Capture console logs as a part of user session recordings. Use the console logs alongside recordings to debug any issues with your app.`, teamProperty: 'capture_console_log_opt_in', - value: true, + value: currentTeam?.capture_console_log_opt_in ?? true, }, { type: 'toggle', @@ -115,7 +117,7 @@ const SessionReplayOnboarding = (): JSX.Element => { description: `Capture performance and network information alongside recordings. Use the network requests and timings in the recording player to help you debug issues with your app.`, teamProperty: 'capture_performance_opt_in', - value: true, + value: currentTeam?.capture_performance_opt_in ?? true, }, ] @@ -126,7 +128,7 @@ const SessionReplayOnboarding = (): JSX.Element => { description: `Only record sessions that are longer than the specified duration. Start with it low and increase it later if you're getting too many short sessions.`, teamProperty: 'session_recording_minimum_duration_milliseconds', - value: null, + value: currentTeam?.session_recording_minimum_duration_milliseconds || null, selectOptions: SESSION_REPLAY_MINIMUM_DURATION_OPTIONS, }) } diff --git a/frontend/src/scenes/onboarding/OnboardingProductConfiguration.tsx b/frontend/src/scenes/onboarding/OnboardingProductConfiguration.tsx index 5e7357d650450..8698b6bf64dbd 100644 --- a/frontend/src/scenes/onboarding/OnboardingProductConfiguration.tsx +++ b/frontend/src/scenes/onboarding/OnboardingProductConfiguration.tsx @@ -1,6 +1,6 @@ import { LemonDivider, LemonSelect, LemonSwitch } from '@posthog/lemon-ui' import { useActions, useValues } from 'kea' -import React, { useEffect } from 'react' +import React, { useEffect, useRef } from 'react' import { pluginsLogic } from 'scenes/plugins/pluginsLogic' import { OnboardingStepKey } from './onboardingLogic' @@ -51,6 +51,12 @@ export const OnboardingProductConfiguration = ({ const { setConfigOptions, saveConfiguration } = useActions(onboardingProductConfigurationLogic) const { toggleEnabled } = useActions(pluginsLogic) + const configOptionsRef = useRef(configOptions) + + useEffect(() => { + configOptionsRef.current = configOptions + }, [configOptions]) + useEffect(() => { setConfigOptions(options) }, []) @@ -63,9 +69,12 @@ export const OnboardingProductConfiguration = ({ selectOptions: option.selectOptions, value: option.value, onChange: (newValue: boolean | string | number) => { - setConfigOptions( - configOptions.map((o) => (o.teamProperty === option.teamProperty ? { ...o, value: newValue } : o)) + // Use the current value from the ref to ensure that onChange always accesses + // the latest state of configOptions, preventing the closure from using stale data. + const updatedConfigOptions = configOptionsRef.current.map((o) => + o.teamProperty === option.teamProperty ? { ...o, value: newValue } : o ) + setConfigOptions(updatedConfigOptions) }, })), ...defaultEnabledPlugins.map((plugin) => {