feat: surveys onboarding (#18053)

* first pass

* update sdks

* add stepkey

* fix typo

* use correct number of sig figs

frontend/src/scenes/billing/PlanComparison.tsx

@@ -49,6 +49,9 @@ const getProductTiers = (
 ): JSX.Element => {
     const tiers = plan?.tiers
 
+    const allTierPrices = tiers?.map((tier) => parseFloat(tier.unit_amount_usd))
+    const sigFigs = allTierPrices?.map((price) => price?.toString().split('.')[1]?.length).sort((a, b) => b - a)[0]
+
     return (
         <>
             {tiers ? (
@@ -63,7 +66,7 @@ const getProductTiers = (
                         <span className="font-bold">
                             {i === 0 && parseFloat(tier.unit_amount_usd) === 0
                                 ? 'Free'
-                                : `$${parseFloat(tier.unit_amount_usd).toFixed(6)}`}
+                                : `$${parseFloat(tier.unit_amount_usd).toFixed(sigFigs)}`}
                         </span>
                     </div>
                 ))

frontend/src/scenes/onboarding/Onboarding.tsx

@@ -13,6 +13,7 @@ import { OnboardingBillingStep } from './OnboardingBillingStep'
 import { OnboardingOtherProductsStep } from './OnboardingOtherProductsStep'
 import { OnboardingVerificationStep } from './OnboardingVerificationStep'
 import { FeatureFlagsSDKInstructions } from './sdks/feature-flags/FeatureFlagsSDKInstructions'
+import { SurveysSDKInstructions } from './sdks/surveys/SurveysSDKInstructions'
 
 export const scene: SceneExport = {
     component: Onboarding,
@@ -105,6 +106,19 @@ const FeatureFlagsOnboarding = (): JSX.Element => {
     )
 }
 
+const SurveysOnboarding = (): JSX.Element => {
+    return (
+        <OnboardingWrapper>
+            <SDKs
+                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.SDKS}
+            />
+        </OnboardingWrapper>
+    )
+}
+
 export function Onboarding(): JSX.Element | null {
     const { featureFlags } = useValues(featureFlagLogic)
     const { product } = useValues(onboardingLogic)
@@ -122,6 +136,7 @@ export function Onboarding(): JSX.Element | null {
         [ProductKey.PRODUCT_ANALYTICS]: ProductAnalyticsOnboarding,
         [ProductKey.SESSION_REPLAY]: SessionReplayOnboarding,
         [ProductKey.FEATURE_FLAGS]: FeatureFlagsOnboarding,
+        [ProductKey.SURVEYS]: SurveysOnboarding,
     }
     const OnboardingView = onboardingViews[product.type]
 

frontend/src/scenes/onboarding/OnboardingOtherProductsStep.tsx

@@ -14,7 +14,7 @@ export const OnboardingOtherProductsStep = ({
     return (
         <OnboardingStep
             title={`${product?.name} pairs with...`}
-            subtitle="The magic in PostHog is having everyting all in one place. Get started with our other products to unlock your product and data superpowers."
+            subtitle="The magic in PostHog is having everything all in one place. Get started with our other products to unlock your product and data superpowers."
             showSkip
             continueOverride={<></>}
             stepKey={stepKey}

frontend/src/scenes/onboarding/sdks/surveys/SurveysFinalSteps.tsx

@@ -0,0 +1,8 @@
+export const SurveysFinalSteps = (): JSX.Element => {
+    return (
+        <>
+            <h3>Next up: Create a survey</h3>
+            <p>Complete this onboarding flow, then create a survey from one of our templates or from scratch.</p>
+        </>
+    )
+}

frontend/src/scenes/onboarding/sdks/surveys/SurveysSDKInstructions.tsx

@@ -0,0 +1,8 @@
+import { SDKInstructionsMap, SDKKey } from '~/types'
+import { JSWebInstructions, NextJSInstructions, ReactInstructions } from '.'
+
+export const SurveysSDKInstructions: SDKInstructionsMap = {
+    [SDKKey.JS_WEB]: JSWebInstructions,
+    [SDKKey.NEXT_JS]: NextJSInstructions,
+    [SDKKey.REACT]: ReactInstructions,
+}

frontend/src/scenes/onboarding/sdks/surveys/index.tsx

@@ -0,0 +1,3 @@
+export * from './js-web'
+export * from './next-js'
+export * from './react'

frontend/src/scenes/onboarding/sdks/surveys/js-web.tsx

@@ -0,0 +1,13 @@
+import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
+import { SDKInstallJSWebInstructions } from '../sdk-install-instructions'
+import { SurveysFinalSteps } from './SurveysFinalSteps'
+
+export function JSWebInstructions(): JSX.Element {
+    return (
+        <>
+            <SDKInstallJSWebInstructions />
+            <LemonDivider thick dashed className="my-4" />
+            <SurveysFinalSteps />
+        </>
+    )
+}

frontend/src/scenes/onboarding/sdks/surveys/next-js.tsx

@@ -0,0 +1,11 @@
+import { SDKInstallNextJSInstructions } from '../sdk-install-instructions/next-js'
+import { SurveysFinalSteps } from './SurveysFinalSteps'
+
+export function NextJSInstructions(): JSX.Element {
+    return (
+        <>
+            <SDKInstallNextJSInstructions />
+            <SurveysFinalSteps />
+        </>
+    )
+}

frontend/src/scenes/onboarding/sdks/surveys/react.tsx

@@ -0,0 +1,11 @@
+import { SDKInstallReactInstructions } from '../sdk-install-instructions/react'
+import { SurveysFinalSteps } from './SurveysFinalSteps'
+
+export function ReactInstructions(): JSX.Element {
+    return (
+        <>
+            <SDKInstallReactInstructions />
+            <SurveysFinalSteps />
+        </>
+    )
+}