fix: improve support modal UX for unauthenticated users (#21502)

set login as the target_area when unauthenticated & make the field read-only
PostHog · Apr 15, 2024 · 2be5fc1 · 2be5fc1
1 parent 0a70256
commit 2be5fc1
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 25 deletions.
diff --git a/frontend/__snapshots__/scenes-other-billing-v2--billing-v-2--dark.png b/frontend/__snapshots__/scenes-other-billing-v2--billing-v-2--dark.png
diff --git a/frontend/src/lib/components/Support/SupportForm.tsx b/frontend/src/lib/components/Support/SupportForm.tsx
@@ -1,6 +1,5 @@
 import { IconBug, IconInfo, IconQuestion } from '@posthog/icons'
 import {
-    LemonBanner,
     LemonInput,
     LemonSegmentedButton,
     LemonSegmentedButtonOption,
@@ -59,7 +58,6 @@ export function SupportForm(): JSX.Element | null {
     // the support model can be shown when logged out, file upload is not offered to anonymous users
     const { user } = useValues(userLogic)
     // only allow authentication issues for logged out users
-    const blockNonAuthIssues = ![null, 'login'].includes(supportLogic.values.sendSupportRequest.target_area) && !user
 
     const dropRef = useRef<HTMLDivElement>(null)
 
@@ -127,21 +125,23 @@ export function SupportForm(): JSX.Element | null {
                 <LemonSegmentedButton fullWidth options={SUPPORT_TICKET_OPTIONS} />
             </LemonField>
             <LemonField name="target_area" label="Topic">
-                <LemonSelect fullWidth options={TARGET_AREA_TO_NAME} />
+                <LemonSelect
+                    disabledReason={
+                        !user
+                            ? 'Please login to your account before opening a ticket unrelated to authentication issues.'
+                            : null
+                    }
+                    fullWidth
+                    options={TARGET_AREA_TO_NAME}
+                />
             </LemonField>
             <LemonField
                 name="message"
                 label={sendSupportRequest.kind ? SUPPORT_TICKET_KIND_TO_PROMPT[sendSupportRequest.kind] : 'Content'}
             >
                 {(props) => (
                     <div ref={dropRef} className="flex flex-col gap-2">
-                        {blockNonAuthIssues ? (
-                            <LemonBanner type="error">
-                                Please login to your account before opeing a ticket unrelated to authentication issues.
-                            </LemonBanner>
-                        ) : null}
                         <LemonTextArea
-                            disabled={blockNonAuthIssues}
                             placeholder="Type your message here"
                             data-attr="support-form-content-input"
                             {...props}

diff --git a/frontend/src/lib/components/Support/SupportModal.tsx b/frontend/src/lib/components/Support/SupportModal.tsx
@@ -4,7 +4,6 @@ import { LemonModal } from 'lib/lemon-ui/LemonModal/LemonModal'
 import { useEffect } from 'react'
 import { createRoot } from 'react-dom/client'
 import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
-import { userLogic } from 'scenes/userLogic'
 
 import { sidePanelStateLogic } from '~/layout/navigation-3000/sidepanel/sidePanelStateLogic'
 
@@ -16,9 +15,6 @@ function SupportModal({ onAfterClose }: { onAfterClose: () => void }): JSX.Eleme
     const { closeSupportForm } = useActions(supportLogic)
     const { isCloudOrDev } = useValues(preflightLogic)
     const { sidePanelAvailable } = useValues(sidePanelStateLogic)
-    const { user } = useValues(userLogic)
-    // only allow authentication issues for logged out users
-    const blockNonAuthIssues = ![null, 'login'].includes(supportLogic.values.sendSupportRequest.target_area) && !user
 
     useEffect(() => {
         if (!isCloudOrDev) {
@@ -40,17 +36,7 @@ function SupportModal({ onAfterClose }: { onAfterClose: () => void }): JSX.Eleme
                     <LemonButton form="support-modal-form" type="secondary" onClick={closeSupportForm}>
                         Cancel
                     </LemonButton>
-                    <LemonButton
-                        disabledReason={
-                            blockNonAuthIssues
-                                ? 'Please login to your account before opening a ticket unrelated to authentication issues.'
-                                : null
-                        }
-                        form="support-modal-form"
-                        htmlType="submit"
-                        type="primary"
-                        data-attr="submit"
-                    >
+                    <LemonButton form="support-modal-form" htmlType="submit" type="primary" data-attr="submit">
                         Submit
                     </LemonButton>
                 </div>

diff --git a/frontend/src/lib/components/Support/supportLogic.ts b/frontend/src/lib/components/Support/supportLogic.ts
@@ -338,7 +338,10 @@ export const supportLogic = kea<supportLogicType>([
             }
         },
         openSupportForm: async ({ name, email, kind, target_area, severity_level, message }) => {
-            const area = target_area ?? getURLPathToTargetArea(window.location.pathname)
+            let area = target_area ?? getURLPathToTargetArea(window.location.pathname)
+            if (!userLogic.values.user) {
+                area = 'login'
+            }
             kind = kind ?? 'support'
             actions.resetSendSupportRequest({
                 name: name ?? '',