feat(onboarding-templates): add template request form (#25062)

PostHog · Sep 18, 2024 · 0212fb2 · 0212fb2
1 parent 2ec6bf0
commit 0212fb2
Show file tree

Hide file tree

Showing 2 changed files with 102 additions and 14 deletions.
diff --git a/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateSelectStep.tsx b/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateSelectStep.tsx
@@ -1,5 +1,7 @@
-import { LemonButton } from '@posthog/lemon-ui'
-import { useActions } from 'kea'
+import { LemonButton, LemonInput, LemonModal } from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
+import { Form } from 'kea-forms'
+import { LemonField } from 'lib/lemon-ui/LemonField'
 import { useEffect } from 'react'
 import { DashboardTemplateChooser } from 'scenes/dashboard/DashboardTemplateChooser'
 import { newDashboardLogic } from 'scenes/dashboard/newDashboardLogic'
@@ -17,7 +19,13 @@ export const OnboardingDashboardTemplateSelectStep = ({
 }): JSX.Element => {
     const { goToNextStep } = useActions(onboardingLogic)
     const { clearActiveDashboardTemplate } = useActions(newDashboardLogic)
-    const { setDashboardCreatedDuringOnboarding, reportTemplateSelected } = useActions(onboardingTemplateConfigLogic)
+    const {
+        setDashboardCreatedDuringOnboarding,
+        reportTemplateSelected,
+        showTemplateRequestModal,
+        hideTemplateRequestModal,
+    } = useActions(onboardingTemplateConfigLogic)
+    const { isTemplateRequestModalOpen, isTemplateRequestFormSubmitting } = useValues(onboardingTemplateConfigLogic)
 
     // TODO: this is hacky, find a better way to clear the active template when coming back to this screen
     useEffect(() => {
@@ -29,15 +37,27 @@ export const OnboardingDashboardTemplateSelectStep = ({
             title="Start with a dashboard template"
             stepKey={stepKey}
             continueOverride={
-                <LemonButton
-                    type="secondary"
-                    onClick={() => {
-                        goToNextStep(2)
-                    }}
-                    data-attr="onboarding-skip-button"
-                >
-                    Skip for now
-                </LemonButton>
+                <div className="flex justify-end gap-x-2">
+                    <LemonButton
+                        type="secondary"
+                        status="alt"
+                        onClick={() => {
+                            showTemplateRequestModal()
+                        }}
+                        data-attr="onboarding-skip-button"
+                    >
+                        I need a different template
+                    </LemonButton>
+                    <LemonButton
+                        type="secondary"
+                        onClick={() => {
+                            goToNextStep(2)
+                        }}
+                        data-attr="onboarding-skip-button"
+                    >
+                        Skip for now
+                    </LemonButton>
+                </div>
             }
         >
             <p>
@@ -56,6 +76,42 @@ export const OnboardingDashboardTemplateSelectStep = ({
                 redirectAfterCreation={false}
                 availabilityContexts={[TemplateAvailabilityContext.ONBOARDING]}
             />
+            <LemonModal
+                title="What kind of template do you need?"
+                isOpen={isTemplateRequestModalOpen}
+                onClose={hideTemplateRequestModal}
+            >
+                <div className="max-w-md">
+                    <p>
+                        PostHog can collect and visualize data from anywhere. We're still adding more templates to this
+                        onboarding flow for different use-cases and business types.
+                    </p>
+                    <p>Let us know what kind of template you'd like to see and we'll work on adding one.</p>
+                    <Form
+                        logic={onboardingTemplateConfigLogic}
+                        formKey="templateRequestForm"
+                        className="my-4 gap-y-4"
+                        enableFormOnSubmit
+                    >
+                        <LemonField name="templateRequest" className="mb-4">
+                            <LemonInput
+                                className="ph-ignore-input"
+                                autoFocus
+                                data-attr="templateRequestForm"
+                                type="text"
+                                disabled={isTemplateRequestFormSubmitting}
+                            />
+                        </LemonField>
+                        <LemonButton
+                            type="primary"
+                            htmlType="submit"
+                            disabledReason={isTemplateRequestFormSubmitting ? 'Submitting...' : undefined}
+                        >
+                            Continue
+                        </LemonButton>
+                    </Form>
+                </div>
+            </LemonModal>
         </OnboardingStep>
     )
 }
diff --git a/frontend/src/scenes/onboarding/productAnalyticsSteps/onboardingTemplateConfigLogic.ts b/frontend/src/scenes/onboarding/productAnalyticsSteps/onboardingTemplateConfigLogic.ts
@@ -1,4 +1,5 @@
 import { actions, connect, kea, listeners, path, reducers } from 'kea'
+import { forms } from 'kea-forms'
 import { urlToAction } from 'kea-router'
 import posthog from 'posthog-js'
 import { dashboardTemplateVariablesLogic } from 'scenes/dashboard/dashboardTemplateVariablesLogic'
@@ -28,14 +29,16 @@ export const onboardingTemplateConfigLogic = kea<onboardingTemplateConfigLogicTy
                 'maybeResetActiveVariableCustomEventName',
             ],
             onboardingLogic,
-            ['goToPreviousStep', 'setOnCompleteOnboardingRedirectUrl'],
+            ['goToPreviousStep', 'setOnCompleteOnboardingRedirectUrl', 'goToNextStep'],
         ],
     }),
     actions({
         setDashboardCreatedDuringOnboarding: (dashboard: DashboardType | null) => ({ dashboard }),
         showCustomEventField: true,
         hideCustomEventField: true,
         reportTemplateSelected: (template: DashboardTemplateType) => ({ template }),
+        showTemplateRequestModal: true,
+        hideTemplateRequestModal: true,
     }),
     reducers({
         dashboardCreatedDuringOnboarding: [
@@ -47,13 +50,42 @@ export const onboardingTemplateConfigLogic = kea<onboardingTemplateConfigLogicTy
             },
         ],
         customEventFieldShown: [
-            false,
+            false as boolean,
             {
                 showCustomEventField: () => true,
                 hideCustomEventField: () => false,
             },
         ],
+        isTemplateRequestModalOpen: [
+            false as boolean,
+            {
+                showTemplateRequestModal: () => true,
+                hideTemplateRequestModal: () => false,
+            },
+        ],
     }),
+    forms(({ actions, values }) => ({
+        templateRequestForm: {
+            alwaysShowErrors: true,
+            showErrorsOnTouch: true,
+            defaults: {
+                templateRequest: '',
+            },
+            errors: ({ templateRequest }) => ({
+                templateRequest: !templateRequest
+                    ? "Please enter a template you'd like us to add to continue"
+                    : undefined,
+            }),
+            submit: async () => {
+                posthog.capture('template requested during onboarding', {
+                    template_request: values.templateRequestForm.templateRequest,
+                })
+                actions.hideTemplateRequestModal()
+                actions.resetTemplateRequestForm()
+                actions.goToNextStep(2)
+            },
+        },
+    })),
     listeners(({ actions, values }) => ({
         submitNewDashboardSuccessWithResult: ({ result, variables }) => {
             if (result && variables?.length == 0) {