feat: email verification support flow (#21094)

* Add steps before support for email verification step * Improve the checklist UI * Update UI snapshots for `chromium` (1) * Update VerifyEmail.tsx * Update UI snapshots for `chromium` (1) * Add a/b to the new checklsit * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) * Update frontend/src/scenes/authentication/signup/verify-email/VerifyEmail.tsx Co-authored-by: Raquel Smith <[email protected]> * Update frontend/src/scenes/authentication/signup/verify-email/VerifyEmail.tsx Co-authored-by: Raquel Smith <[email protected]> * Update frontend/src/scenes/authentication/signup/verify-email/VerifyEmail.tsx Co-authored-by: Raquel Smith <[email protected]> * Update frontend/src/scenes/authentication/signup/verify-email/VerifyEmail.tsx * Add back title and update spacing * Update UI snapshots for `chromium` (1) --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Raquel Smith <[email protected]>
PostHog · Apr 3, 2024 · 998d737 · 998d737
1 parent b169fc1
commit 998d737
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 18 deletions.
diff --git a/...nd/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown--light.png b/...nd/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown--light.png
diff --git a/frontend/__snapshots__/scenes-other-verify-email--verify-email-invalid--dark.png b/frontend/__snapshots__/scenes-other-verify-email--verify-email-invalid--dark.png
diff --git a/frontend/__snapshots__/scenes-other-verify-email--verify-email-invalid--light.png b/frontend/__snapshots__/scenes-other-verify-email--verify-email-invalid--light.png
diff --git a/frontend/__snapshots__/scenes-other-verify-email--verify-email-pending--dark.png b/frontend/__snapshots__/scenes-other-verify-email--verify-email-pending--dark.png
diff --git a/frontend/__snapshots__/scenes-other-verify-email--verify-email-pending--light.png b/frontend/__snapshots__/scenes-other-verify-email--verify-email-pending--light.png
diff --git a/frontend/src/lib/constants.tsx b/frontend/src/lib/constants.tsx
@@ -214,6 +214,7 @@ export const FEATURE_FLAGS = {
     SUBSCRIBE_FROM_PAYGATE: 'subscribe-from-paygate', // owner: #team-growth
     REVERSE_PROXY_ONBOARDING: 'reverse-proxy-onboarding', // owner: @zlwaterfield
     SESSION_REPLAY_MOBILE_ONBOARDING: 'session-replay-mobile-onboarding', // owner: #team-replay
+    EMAIL_VERIFICATION_TICKET_SUBMISSION: 'email-verification-ticket-submission', // owner: #team-growth
     THEME: 'theme', // owner: @aprilfools
 } as const
 export type FeatureFlagKey = (typeof FEATURE_FLAGS)[keyof typeof FEATURE_FLAGS]

diff --git a/frontend/src/scenes/authentication/signup/verify-email/VerifyEmail.tsx b/frontend/src/scenes/authentication/signup/verify-email/VerifyEmail.tsx
@@ -1,9 +1,12 @@
-import { LemonButton } from '@posthog/lemon-ui'
+import { LemonButton, LemonCheckbox, LemonModal } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { BridgePage } from 'lib/components/BridgePage/BridgePage'
 import { HeartHog, MailHog, SurprisedHog } from 'lib/components/hedgehogs'
 import { supportLogic } from 'lib/components/Support/supportLogic'
+import { FEATURE_FLAGS } from 'lib/constants'
 import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+import { useState } from 'react'
 import { SceneExport } from 'scenes/sceneTypes'
 
 import { verifyEmailLogic } from './verifyEmailLogic'
@@ -13,16 +16,20 @@ export const scene: SceneExport = {
     logic: verifyEmailLogic,
 }
 
-export const VerifyEmailHelpLinks = (): JSX.Element => {
+interface SupportButtonsProps {
+    disabledReason?: string
+}
+
+const SupportButtons = ({ disabledReason }: SupportButtonsProps): JSX.Element => {
+    const { openSupportForm } = useActions(supportLogic)
     const { requestVerificationLink } = useActions(verifyEmailLogic)
     const { uuid } = useValues(verifyEmailLogic)
-    const { openSupportForm } = useActions(supportLogic)
 
     return (
-        <div className="flex flex-row gap-x-4">
+        <div className="flex flex-row gap-x-4 justify-start">
             <LemonButton
-                type="secondary"
-                className="mt-8"
+                type="primary"
+                disabledReason={disabledReason}
                 onClick={() => {
                     openSupportForm({ kind: 'bug', target_area: 'login' })
                 }}
@@ -31,8 +38,8 @@ export const VerifyEmailHelpLinks = (): JSX.Element => {
             </LemonButton>
             {uuid && (
                 <LemonButton
-                    type="secondary"
-                    className="mt-8"
+                    type="primary"
+                    disabledReason={disabledReason}
                     onClick={() => {
                         requestVerificationLink(uuid)
                     }}
@@ -44,26 +51,96 @@ export const VerifyEmailHelpLinks = (): JSX.Element => {
     )
 }
 
+export const VerifyEmailHelpLinks = (): JSX.Element => {
+    const [checkListValues, setCheckListValues] = useState<boolean[]>([])
+
+    const checklist = [
+        'Wait 5 minutes. Sometimes it takes a bit for email providers to deliver emails.',
+        'Check your spam folder and any firewalls you may have active',
+        'Ask your company IT department to allow any emails from @posthog.com',
+        'Channel your inner hedgehog and take another peek at your inbox',
+    ]
+
+    const handleChecklistChange = (index: number): void => {
+        const newCheckListValues = [...checkListValues]
+        newCheckListValues[index] = !newCheckListValues[index]
+        setCheckListValues(newCheckListValues)
+    }
+
+    const allChecked = checklist.every((_, index) => checkListValues[index])
+
+    return (
+        <div className="bg-bg-3000 p-4 rounded relative w-full max-w-160">
+            <div className="flex flex-col justify-center">
+                <div className="space-y-2 text-left">
+                    {checklist.map((item, index) => (
+                        <LemonCheckbox
+                            key={index}
+                            onChange={() => handleChecklistChange(index)}
+                            checked={checkListValues[index]}
+                            label={item}
+                            bordered
+                            size="small"
+                        />
+                    ))}
+                </div>
+            </div>
+            <div className="mt-4">
+                <p className="text-left mb-2">Choose one of the following options:</p>
+                <SupportButtons
+                    disabledReason={!allChecked ? "Please confirm you've done all the steps above" : undefined}
+                />
+            </div>
+        </div>
+    )
+}
+
+const GetHelp = (): JSX.Element => {
+    const [isOpen, setIsOpen] = useState(false)
+    return (
+        <>
+            <LemonButton type="primary" onClick={() => setIsOpen(true)}>
+                Get help
+            </LemonButton>
+            <LemonModal
+                isOpen={isOpen}
+                onClose={() => setIsOpen(false)}
+                title="Get help"
+                description={
+                    <p className="max-w-160">
+                        Sorry you're having troubles! We're here to help, but first we ask that you check a few things
+                        first on your end. Generally any issues with email happen after they leave our hands.
+                    </p>
+                }
+            >
+                <VerifyEmailHelpLinks />
+            </LemonModal>
+        </>
+    )
+}
+
 export function VerifyEmail(): JSX.Element {
     const { view } = useValues(verifyEmailLogic)
+    const { featureFlags } = useValues(featureFlagLogic)
 
     return (
         <div className="flex h-full flex-col">
             <div className="flex h-full">
                 <BridgePage view="verifyEmail" fixedWidth={false}>
-                    <div className="px-12 py-8 text-center flex flex-col items-center max-w-200">
+                    <div className="px-12 py-8 text-center flex flex-col items-center max-w-160 w-full">
                         {view === 'pending' ? (
                             <>
-                                <h1 className="text-xl">Welcome to PostHog!</h1>
+                                <h2 className="text-lg">Welcome to PostHog!</h2>
                                 <h1 className="text-3xl font-bold">Let's verify your email address.</h1>
-                                <div className="max-w-80 my-12">
+                                <div className="max-w-60 my-10">
                                     <MailHog className="w-full h-full" />
                                 </div>
-                                <p>
-                                    An email has been sent to with a link to verify your email address. If you have not
-                                    received the email in a few minutes, please check your spam folder.
-                                </p>
-                                <VerifyEmailHelpLinks />
+                                <p className="mb-6">An email has been sent with a link to verify your email address.</p>
+                                {featureFlags[FEATURE_FLAGS.EMAIL_VERIFICATION_TICKET_SUBMISSION] === 'test' ? (
+                                    <GetHelp />
+                                ) : (
+                                    <SupportButtons />
+                                )}
                             </>
                         ) : view === 'verify' ? (
                             <>
@@ -84,8 +161,8 @@ export function VerifyEmail(): JSX.Element {
                                 <div className="max-w-60 mb-12">
                                     <SurprisedHog className="w-full h-full" />
                                 </div>
-                                <p>Seems like that link isn't quite right. Try again?</p>
-                                <VerifyEmailHelpLinks />
+                                <p className="mb-6">Seems like that link isn't quite right. Try again?</p>
+                                <SupportButtons />
                             </>
                         ) : (
                             <Spinner className="text-4xl" />