diff --git a/frontend/src/scenes/billing/PlanComparison.tsx b/frontend/src/scenes/billing/PlanComparison.tsx index 1d2c68bb9aa0b..646c553ce8dc8 100644 --- a/frontend/src/scenes/billing/PlanComparison.tsx +++ b/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 = ( {i === 0 && parseFloat(tier.unit_amount_usd) === 0 ? 'Free' - : `$${parseFloat(tier.unit_amount_usd).toFixed(6)}`} + : `$${parseFloat(tier.unit_amount_usd).toFixed(sigFigs)}`} )) diff --git a/frontend/src/scenes/onboarding/Onboarding.tsx b/frontend/src/scenes/onboarding/Onboarding.tsx index d0f221e31a65e..50a1ff9f25956 100644 --- a/frontend/src/scenes/onboarding/Onboarding.tsx +++ b/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 ( + + + + ) +} + 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] diff --git a/frontend/src/scenes/onboarding/OnboardingOtherProductsStep.tsx b/frontend/src/scenes/onboarding/OnboardingOtherProductsStep.tsx index 90cb37f9e6508..5bba423b8dd12 100644 --- a/frontend/src/scenes/onboarding/OnboardingOtherProductsStep.tsx +++ b/frontend/src/scenes/onboarding/OnboardingOtherProductsStep.tsx @@ -14,7 +14,7 @@ export const OnboardingOtherProductsStep = ({ return ( } stepKey={stepKey} diff --git a/frontend/src/scenes/onboarding/sdks/surveys/SurveysFinalSteps.tsx b/frontend/src/scenes/onboarding/sdks/surveys/SurveysFinalSteps.tsx new file mode 100644 index 0000000000000..f0caa15d85c03 --- /dev/null +++ b/frontend/src/scenes/onboarding/sdks/surveys/SurveysFinalSteps.tsx @@ -0,0 +1,8 @@ +export const SurveysFinalSteps = (): JSX.Element => { + return ( + <> +

Next up: Create a survey

+

Complete this onboarding flow, then create a survey from one of our templates or from scratch.

+ + ) +} diff --git a/frontend/src/scenes/onboarding/sdks/surveys/SurveysSDKInstructions.tsx b/frontend/src/scenes/onboarding/sdks/surveys/SurveysSDKInstructions.tsx new file mode 100644 index 0000000000000..352a4b3d96d82 --- /dev/null +++ b/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, +} diff --git a/frontend/src/scenes/onboarding/sdks/surveys/index.tsx b/frontend/src/scenes/onboarding/sdks/surveys/index.tsx new file mode 100644 index 0000000000000..27d9e5388d04d --- /dev/null +++ b/frontend/src/scenes/onboarding/sdks/surveys/index.tsx @@ -0,0 +1,3 @@ +export * from './js-web' +export * from './next-js' +export * from './react' diff --git a/frontend/src/scenes/onboarding/sdks/surveys/js-web.tsx b/frontend/src/scenes/onboarding/sdks/surveys/js-web.tsx new file mode 100644 index 0000000000000..522c229904cc7 --- /dev/null +++ b/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 ( + <> + + + + + ) +} diff --git a/frontend/src/scenes/onboarding/sdks/surveys/next-js.tsx b/frontend/src/scenes/onboarding/sdks/surveys/next-js.tsx new file mode 100644 index 0000000000000..2e7f76fb610ff --- /dev/null +++ b/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 ( + <> + + + + ) +} diff --git a/frontend/src/scenes/onboarding/sdks/surveys/react.tsx b/frontend/src/scenes/onboarding/sdks/surveys/react.tsx new file mode 100644 index 0000000000000..88713cbbafbf1 --- /dev/null +++ b/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 ( + <> + + + + ) +}