Onboarding.tsx

import { Spinner } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
import { FEATURE_FLAGS, SESSION_REPLAY_MINIMUM_DURATION_OPTIONS } from 'lib/constants'
import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import { useEffect, useState } from 'react'
import { billingLogic } from 'scenes/billing/billingLogic'
import { newDashboardLogic } from 'scenes/dashboard/newDashboardLogic'
import { WebAnalyticsSDKInstructions } from 'scenes/onboarding/sdks/web-analytics/WebAnalyticsSDKInstructions'
import { productsLogic } from 'scenes/products/productsLogic'
import { SceneExport } from 'scenes/sceneTypes'
import { teamLogic } from 'scenes/teamLogic'
import { userLogic } from 'scenes/userLogic'

import { AvailableFeature, ProductKey } from '~/types'

import { OnboardingUpgradeStep } from './billing/OnboardingUpgradeStep'
import { OnboardingDataWarehouseSourcesStep } from './data-warehouse/OnboardingDataWarehouseSourcesStep'
import { OnboardingInviteTeammates } from './OnboardingInviteTeammates'
import { onboardingLogic, OnboardingStepKey } from './onboardingLogic'
import { OnboardingProductConfiguration } from './OnboardingProductConfiguration'
import { ProductConfigOption } from './onboardingProductConfigurationLogic'
import { OnboardingReverseProxy } from './OnboardingReverseProxy'
import { OnboardingSessionReplayConfiguration } from './OnboardingSessionReplayConfiguration'
import { OnboardingDashboardTemplateConfigureStep } from './productAnalyticsSteps/DashboardTemplateConfigureStep'
import { OnboardingDashboardTemplateSelectStep } from './productAnalyticsSteps/DashboardTemplateSelectStep'
import { ExperimentsSDKInstructions } from './sdks/experiments/ExperimentsSDKInstructions'
import { FeatureFlagsSDKInstructions } from './sdks/feature-flags/FeatureFlagsSDKInstructions'
import { OnboardingInstallStep } from './sdks/OnboardingInstallStep'
import { ProductAnalyticsSDKInstructions } from './sdks/product-analytics/ProductAnalyticsSDKInstructions'
import { sdksLogic } from './sdks/sdksLogic'
import { SessionReplaySDKInstructions } from './sdks/session-replay/SessionReplaySDKInstructions'
import { SurveysSDKInstructions } from './sdks/surveys/SurveysSDKInstructions'
import { OnboardingWebAnalyticsAuthorizedDomainsStep } from './web-analytics/OnboardingWebAnalyticsAuthorizedDomainsStep'

export const scene: SceneExport = {
    component: Onboarding,
    logic: onboardingLogic,
}

/**
 * Wrapper for custom onboarding content. This automatically includes billing, other products, and invite steps.
 */
const OnboardingWrapper = ({ children }: { children: React.ReactNode }): JSX.Element => {
    const {
        productKey,
        currentOnboardingStep,
        shouldShowBillingStep,
        shouldShowReverseProxyStep,
        shouldShowDataWarehouseStep,
        product,
        waitForBilling,
    } = useValues(onboardingLogic)
    const { billing, billingLoading } = useValues(billingLogic)
    const { setAllOnboardingSteps } = useActions(onboardingLogic)
    const [allSteps, setAllSteps] = useState<JSX.Element[]>([])

    useEffect(() => {
        let steps = []
        if (Array.isArray(children)) {
            steps = [...children]
        } else {
            steps = [children as JSX.Element]
        }

        if (shouldShowDataWarehouseStep) {
            const DataWarehouseStep = (
                <OnboardingDataWarehouseSourcesStep
                    usersAction="Data Warehouse"
                    stepKey={OnboardingStepKey.LINK_DATA}
                />
            )
            steps = [...steps, DataWarehouseStep]
        }

        if (shouldShowReverseProxyStep) {
            const ReverseProxyStep = <OnboardingReverseProxy stepKey={OnboardingStepKey.REVERSE_PROXY} />
            steps = [...steps, ReverseProxyStep]
        }

        const billingProduct = billing?.products.find((p) => p.type === productKey)
        if (shouldShowBillingStep && billingProduct) {
            const BillingStep = <OnboardingUpgradeStep product={billingProduct} stepKey={OnboardingStepKey.PLANS} />

            steps = [...steps, BillingStep]
        }

        const inviteTeammatesStep = <OnboardingInviteTeammates stepKey={OnboardingStepKey.INVITE_TEAMMATES} />
        steps = [...steps, inviteTeammatesStep].filter(Boolean)

        setAllSteps(steps)
    }, [children, billingLoading])

    useEffect(() => {
        if (!allSteps.length || (billingLoading && waitForBilling)) {
            return
        }

        setAllOnboardingSteps(allSteps)
    }, [allSteps])

    if (!product || !children) {
        return <></>
    }

    if (!currentOnboardingStep) {
        return (
            <div className="flex items-center justify-center my-20">
                <Spinner className="text-2xl text-secondary w-10 h-10" />
            </div>
        )
    }

    return currentOnboardingStep
}

const ProductAnalyticsOnboarding = (): JSX.Element => {
    const { currentTeam } = useValues(teamLogic)
    const { featureFlags } = useValues(featureFlagLogic)
    const { combinedSnippetAndLiveEventsHosts } = useValues(sdksLogic)
    const { selectedProducts } = useValues(productsLogic)
    // mount the logic here so that it stays mounted for the entire onboarding flow
    // not sure if there is a better way to do this
    useValues(newDashboardLogic)

    const showTemplateSteps =
        featureFlags[FEATURE_FLAGS.ONBOARDING_DASHBOARD_TEMPLATES] == 'test' &&
        window.innerWidth > 1000 &&
        combinedSnippetAndLiveEventsHosts.length > 0

    const showSessionReplayStep =
        useFeatureFlag('ONBOARDING_SESSION_REPLAY_SEPARATE_STEP', 'test') &&
        !selectedProducts.includes(ProductKey.SESSION_REPLAY)

    const options: ProductConfigOption[] = [
        {
            title: 'Autocapture frontend interactions',
            description: `If you use our JavaScript, React Native or iOS libraries, we'll automagically 
            capture frontend interactions like clicks, submits, and more. Fine-tune what you 
            capture directly in your code snippet.`,
            teamProperty: 'autocapture_opt_out',
            value: !currentTeam?.autocapture_opt_out,
            type: 'toggle',
            inverseToggle: true,
            visible: true,
        },
        {
            title: 'Enable heatmaps',
            description: `If you use our JavaScript libraries, we can capture general clicks, mouse movements,
                   and scrolling to create heatmaps. 
                   No additional events are created, and you can disable this at any time.`,
            teamProperty: 'heatmaps_opt_in',
            value: currentTeam?.heatmaps_opt_in ?? true,
            type: 'toggle',
            visible: true,
        },
        {
            title: 'Enable web vitals autocapture',
            description: `Uses Google's web vitals library to automagically capture performance information.`,
            teamProperty: 'autocapture_web_vitals_opt_in',
            value: currentTeam?.autocapture_web_vitals_opt_in ?? true,
            type: 'toggle',
            visible: true,
        },
        {
            title: 'Enable session recordings',
            description: `Turn on session recordings and watch how users experience your app. We will also turn on console log and network performance recording. You can change these settings any time in the settings panel.`,
            teamProperty: 'session_recording_opt_in',
            // TRICKY: if someone has shown secondary product intent for replay we want to include it as enabled
            // particularly while we're not taking people through every product onboarding they showed interest in
            value:
                (currentTeam?.session_recording_opt_in || selectedProducts.includes(ProductKey.SESSION_REPLAY)) ?? true,
            type: 'toggle',
            visible: true,
        },
        {
            title: 'Capture console logs',
            description: `Automatically enable console log capture`,
            teamProperty: 'capture_console_log_opt_in',
            value: true,
            type: 'toggle',
            visible: false,
        },
        {
            title: 'Capture network performance',
            description: `Automatically enable network performance capture`,
            teamProperty: 'capture_performance_opt_in',
            value: true,
            type: 'toggle',
            visible: false,
        },
    ]

    const filteredOptions = showSessionReplayStep
        ? options.filter((option) => option.teamProperty !== 'session_recording_opt_in')
        : options

    return (
        <OnboardingWrapper>
            <OnboardingInstallStep
                usersAction="collecting events"
                sdkInstructionMap={ProductAnalyticsSDKInstructions}
                stepKey={OnboardingStepKey.INSTALL}
            />
            <OnboardingProductConfiguration
                stepKey={OnboardingStepKey.PRODUCT_CONFIGURATION}
                options={filteredOptions}
            />

            {showSessionReplayStep && (
                <OnboardingSessionReplayConfiguration stepKey={OnboardingStepKey.SESSION_REPLAY} />
            )}

            {/* this is two conditionals because they need to be direct children of the wrapper */}
            {showTemplateSteps ? (
                <OnboardingDashboardTemplateSelectStep stepKey={OnboardingStepKey.DASHBOARD_TEMPLATE} />
            ) : null}
            {showTemplateSteps ? (
                <OnboardingDashboardTemplateConfigureStep stepKey={OnboardingStepKey.DASHBOARD_TEMPLATE_CONFIGURE} />
            ) : null}
        </OnboardingWrapper>
    )
}

const WebAnalyticsOnboarding = (): JSX.Element => {
    const { currentTeam } = useValues(teamLogic)

    const options: ProductConfigOption[] = [
        {
            title: 'Autocapture frontend interactions',
            description: `If you use our JavaScript, React Native or iOS libraries, we'll automagically 
            capture frontend interactions like clicks, submits, and more. Fine-tune what you 
            capture directly in your code snippet.`,
            teamProperty: 'autocapture_opt_out',
            value: !currentTeam?.autocapture_opt_out,
            type: 'toggle',
            inverseToggle: true,
            visible: true,
        },
        {
            title: 'Enable heatmaps',
            description: `If you use our JavaScript libraries, we can capture general clicks, mouse movements,
                   and scrolling to create heatmaps. 
                   No additional events are created, and you can disable this at any time.`,
            teamProperty: 'heatmaps_opt_in',
            value: currentTeam?.heatmaps_opt_in ?? true,
            type: 'toggle',
            visible: true,
        },
        {
            title: 'Enable web vitals autocapture',
            description: `Uses Google's web vitals library to automagically capture performance information.`,
            teamProperty: 'autocapture_web_vitals_opt_in',
            value: currentTeam?.autocapture_web_vitals_opt_in ?? true,
            type: 'toggle',
            visible: true,
        },
        {
            title: 'Enable session recordings',
            description: `Turn on session recordings and watch how users experience your app. We will also turn on console log and network performance recording. You can change these settings any time in the settings panel.`,
            teamProperty: 'session_recording_opt_in',
            value: currentTeam?.session_recording_opt_in ?? true,
            type: 'toggle',
            visible: true,
        },
        {
            title: 'Capture network performance',
            description: `Automatically enable network performance capture`,
            teamProperty: 'capture_performance_opt_in',
            value: true,
            type: 'toggle',
            visible: false,
        },
    ]

    return (
        <OnboardingWrapper>
            <OnboardingInstallStep
                usersAction="collecting events"
                sdkInstructionMap={WebAnalyticsSDKInstructions}
                stepKey={OnboardingStepKey.INSTALL}
            />
            <OnboardingWebAnalyticsAuthorizedDomainsStep stepKey={OnboardingStepKey.AUTHORIZED_DOMAINS} />
            <OnboardingProductConfiguration stepKey={OnboardingStepKey.PRODUCT_CONFIGURATION} options={options} />
        </OnboardingWrapper>
    )
}
const SessionReplayOnboarding = (): JSX.Element => {
    const { hasAvailableFeature } = useValues(userLogic)
    const { currentTeam } = useValues(teamLogic)

    const configOptions: ProductConfigOption[] = [
        {
            type: 'toggle',
            title: 'Capture console logs',
            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: currentTeam?.capture_console_log_opt_in ?? true,
            visible: true,
        },
        {
            type: 'toggle',
            title: 'Capture network performance',
            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: currentTeam?.capture_performance_opt_in ?? true,
            visible: true,
        },
        {
            type: 'toggle',
            title: 'Record user sessions',
            description: 'Watch recordings of how users interact with your web app to see what can be improved.',
            teamProperty: 'session_recording_opt_in',
            value: true,
            visible: false,
        },
    ]

    if (hasAvailableFeature(AvailableFeature.REPLAY_RECORDING_DURATION_MINIMUM)) {
        configOptions.push({
            type: 'select',
            title: 'Minimum session duration (seconds)',
            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: currentTeam?.session_recording_minimum_duration_milliseconds || null,
            selectOptions: SESSION_REPLAY_MINIMUM_DURATION_OPTIONS,
            visible: true,
        })
    }

    return (
        <OnboardingWrapper>
            <OnboardingInstallStep
                usersAction="recording sessions"
                sdkInstructionMap={SessionReplaySDKInstructions}
                subtitle="Choose the framework your frontend is built on, or use our all-purpose JavaScript library. If you already have the snippet installed, you can skip this step!"
                stepKey={OnboardingStepKey.INSTALL}
            />
            <OnboardingProductConfiguration
                stepKey={OnboardingStepKey.PRODUCT_CONFIGURATION}
                options={configOptions}
                product={ProductKey.SESSION_REPLAY}
            />
        </OnboardingWrapper>
    )
}

const FeatureFlagsOnboarding = (): JSX.Element => {
    return (
        <OnboardingWrapper>
            <OnboardingInstallStep
                usersAction="loading flags"
                sdkInstructionMap={FeatureFlagsSDKInstructions}
                subtitle="Choose the framework where you want to use feature flags, or use our all-purpose JavaScript library. If you already have the snippet installed, you can skip this step!"
                stepKey={OnboardingStepKey.INSTALL}
            />
        </OnboardingWrapper>
    )
}

const ExperimentsOnboarding = (): JSX.Element => {
    return (
        <OnboardingWrapper>
            <OnboardingInstallStep
                usersAction="loading experiments"
                sdkInstructionMap={ExperimentsSDKInstructions}
                subtitle="Choose the framework where you want to run experiments, or use our all-purpose JavaScript library. If you already have the snippet installed, you can skip this step!"
                stepKey={OnboardingStepKey.INSTALL}
            />
        </OnboardingWrapper>
    )
}

const SurveysOnboarding = (): JSX.Element => {
    return (
        <OnboardingWrapper>
            <OnboardingInstallStep
                usersAction="taking surveys"
                sdkInstructionMap={SurveysSDKInstructions}
                subtitle="Choose the framework your frontend is built on, or use our all-purpose JavaScript library. If you already have the snippet installed, you can skip this step!"
                stepKey={OnboardingStepKey.INSTALL}
            />
        </OnboardingWrapper>
    )
}

const DataWarehouseOnboarding = (): JSX.Element => {
    return (
        <OnboardingWrapper>
            <OnboardingDataWarehouseSourcesStep usersAction="Data Warehouse" stepKey={OnboardingStepKey.LINK_DATA} />
        </OnboardingWrapper>
    )
}

export const onboardingViews = {
    [ProductKey.PRODUCT_ANALYTICS]: ProductAnalyticsOnboarding,
    [ProductKey.WEB_ANALYTICS]: WebAnalyticsOnboarding,
    [ProductKey.SESSION_REPLAY]: SessionReplayOnboarding,
    [ProductKey.FEATURE_FLAGS]: FeatureFlagsOnboarding,
    [ProductKey.EXPERIMENTS]: ExperimentsOnboarding,
    [ProductKey.SURVEYS]: SurveysOnboarding,
    [ProductKey.DATA_WAREHOUSE]: DataWarehouseOnboarding,
}

export function Onboarding(): JSX.Element | null {
    const { product, productKey } = useValues(onboardingLogic)

    if (!product || !productKey) {
        return <></>
    }
    const OnboardingView = onboardingViews[productKey as keyof typeof onboardingViews]

    return (
        <div className="pt-4 pb-10">
            <OnboardingView />
        </div>
    )
}