Skip to content

Commit

Permalink
feat: add additional fields to the supportModal
Browse files Browse the repository at this point in the history
  • Loading branch information
@MarconLP
MarconLP committed Sep 18, 2023
1 parent 45c82dc commit 8f8935d
Show file tree
Hide file tree
Showing 3 changed files with 185 additions and 38 deletions.
2 changes: 1 addition & 1 deletion frontend/src/lib/components/HelpButton/HelpButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ export function HelpButton({
const { openSupportForm } = useActions(supportLogic)
const { preflight } = useValues(preflightLogic)

const showSupportOptions: boolean = preflight?.cloud || false
const showSupportOptions: boolean = preflight?.cloud || true

if (contactOnly && !showSupportOptions) {
return null // We don't offer support for self-hosted instances
Expand Down
174 changes: 145 additions & 29 deletions frontend/src/lib/components/Support/SupportModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,18 +40,43 @@ const SUPPORT_TICKET_KIND_TO_PROMPT: Record<SupportTicketKind, string> = {
feedback: 'What feedback do you have?',
support: 'What can we help you with?',
}
const SUPPORT_TICKET_KIND_TO_PROMPT_EXTENDED_1: Record<SupportTicketKind, string> = {
bug: "What's the bug?",
feedback: 'Is your feedback related to a problem?',
support: 'What can we help you with?',
}
const SUPPORT_TICKET_KIND_TO_PROMPT_EXTENDED_2: Record<SupportTicketKind, string> = {
bug: 'How to reproduce?',
feedback: "Describe the solution you'd like?",
support: 'What is happening?',
}
const SUPPORT_TICKET_KIND_TO_PROMPT_EXTENDED_3: Record<SupportTicketKind, string> = {
bug: 'Additional context? (make sure to include links if relevant)',
feedback: "Describe alternatives you've considered.",
support: 'What do you expect to happen?',
}

// topics that will ask for additional information
export const EXTENDED_SUPPORT_TOPICS: string[] = [
'app_performance',
'analytics',
'data_management',
'apps',
'data_integrity',
'ingestion',
]

export function SupportModal({ loggedIn = true }: { loggedIn?: boolean }): JSX.Element | null {
const { sendSupportRequest, isSupportFormOpen, sendSupportLoggedOutRequest } = useValues(supportLogic)
const { setSendSupportRequestValue, closeSupportForm } = useActions(supportLogic)
const { objectStorageAvailable } = useValues(preflightLogic)

if (!preflightLogic.values.preflight?.cloud) {
if (isSupportFormOpen) {
lemonToast.error(`In-app support isn't provided for self-hosted instances.`)
}
return null
}
// if (!preflightLogic.values.preflight?.cloud) {
// if (isSupportFormOpen) {
// lemonToast.error(`In-app support isn't provided for self-hosted instances.`)
// }
// return null
// }
const dropRef = useRef<HTMLDivElement>(null)

const { setFilesToUpload, filesToUpload, uploading } = useUploadFiles({
Expand Down Expand Up @@ -113,30 +138,121 @@ export function SupportModal({ loggedIn = true }: { loggedIn?: boolean }): JSX.E
}))}
/>
</Field>
<Field
name="message"
label={sendSupportRequest.kind ? SUPPORT_TICKET_KIND_TO_PROMPT[sendSupportRequest.kind] : 'Content'}
>
{(props) => (
<div ref={dropRef} className="flex flex-col gap-2">
<LemonTextArea
placeholder="Type your message here"
data-attr="support-form-content-input"
{...props}
/>
{objectStorageAvailable && (
<LemonFileInput
accept="image/*"
multiple={false}
alternativeDropTargetRef={dropRef}
onChange={setFilesToUpload}
loading={uploading}
value={filesToUpload}
/>
{sendSupportRequest.target_area && EXTENDED_SUPPORT_TOPICS.includes(sendSupportRequest.target_area) ? (
<>
<Field
name="message"
label={
sendSupportRequest.kind
? SUPPORT_TICKET_KIND_TO_PROMPT_EXTENDED_1[sendSupportRequest.kind]
: 'Content'
}
>
{(props) => (
<div ref={dropRef} className="flex flex-col gap-2">
<LemonTextArea
placeholder="Type your message here"
data-attr="support-form-content-input-1"
{...props}
/>
{objectStorageAvailable && (
<LemonFileInput
accept="image/*"
multiple={false}
alternativeDropTargetRef={dropRef}
onChange={setFilesToUpload}
loading={uploading}
value={filesToUpload}
/>
)}
</div>
)}
</div>
)}
</Field>
</Field>
<Field
name="message2"
label={
sendSupportRequest.kind
? SUPPORT_TICKET_KIND_TO_PROMPT_EXTENDED_2[sendSupportRequest.kind]
: 'Content'
}
>
{(props) => (
<div ref={dropRef} className="flex flex-col gap-2">
<LemonTextArea
placeholder="Type your message here"
data-attr="support-form-content-input-2"
{...props}
/>
{objectStorageAvailable && (
<LemonFileInput
accept="image/*"
multiple={false}
alternativeDropTargetRef={dropRef}
onChange={setFilesToUpload}
loading={uploading}
value={filesToUpload}
/>
)}
</div>
)}
</Field>
<Field
name="message3"
label={
sendSupportRequest.kind
? SUPPORT_TICKET_KIND_TO_PROMPT_EXTENDED_3[sendSupportRequest.kind]
: 'Content'
}
>
{(props) => (
<div ref={dropRef} className="flex flex-col gap-2">
<LemonTextArea
placeholder="Type your message here"
data-attr="support-form-content-input-3"
{...props}
/>
{objectStorageAvailable && (
<LemonFileInput
accept="image/*"
multiple={false}
alternativeDropTargetRef={dropRef}
onChange={setFilesToUpload}
loading={uploading}
value={filesToUpload}
/>
)}
</div>
)}
</Field>
</>
) : (
<Field
name="message"
label={
sendSupportRequest.kind ? SUPPORT_TICKET_KIND_TO_PROMPT[sendSupportRequest.kind] : 'Content'
}
>
{(props) => (
<div ref={dropRef} className="flex flex-col gap-2">
<LemonTextArea
placeholder="Type your message here"
data-attr="support-form-content-input"
{...props}
/>
{objectStorageAvailable && (
<LemonFileInput
accept="image/*"
multiple={false}
alternativeDropTargetRef={dropRef}
onChange={setFilesToUpload}
loading={uploading}
value={filesToUpload}
/>
)}
</div>
)}
</Field>
)}
</Form>
</LemonModal>
)
Expand Down
47 changes: 39 additions & 8 deletions frontend/src/lib/components/Support/supportLogic.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { captureException } from '@sentry/react'
import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
import { teamLogic } from 'scenes/teamLogic'
import * as Sentry from '@sentry/react'
import { EXTENDED_SUPPORT_TOPICS } from './SupportModal'

function getSessionReplayLink(): string {
const link = posthog
Expand Down Expand Up @@ -117,13 +118,17 @@ export const supportLogic = kea<supportLogicType>([
email: string,
kind: SupportTicketKind | null,
target_area: string | null,
message: string
message: string,
message2: string,
message3: string
) => ({
name,
email,
kind,
target_area,
message,
message2,
message3,
}),
})),
reducers(() => ({
Expand All @@ -142,18 +147,28 @@ export const supportLogic = kea<supportLogicType>([
kind: SupportTicketKind | null
target_area: SupportTicketTargetArea | null
message: string
message2: string
message3: string
},
errors: ({ message, kind, target_area }) => {
errors: ({ message, message2, message3, kind, target_area }) => {
return {
message: !message ? 'Please enter a message' : '',
message2:
!message2 && target_area && EXTENDED_SUPPORT_TOPICS.includes(target_area)
? 'Please enter a message'
: '',
message3:
!message3 && target_area && EXTENDED_SUPPORT_TOPICS.includes(target_area)
? 'Please enter a message'
: '',
kind: !kind ? 'Please choose' : undefined,
target_area: !target_area ? 'Please choose' : undefined,
}
},
submit: async ({ kind, target_area, message }) => {
submit: async ({ kind, target_area, message, message2, message3 }) => {
const name = userLogic.values.user?.first_name
const email = userLogic.values.user?.email
actions.submitZendeskTicket(name || '', email || '', kind, target_area, message)
actions.submitZendeskTicket(name || '', email || '', kind, target_area, message, message2, message3)
actions.closeSupportForm()
actions.resetSendSupportRequest()
},
Expand All @@ -165,18 +180,28 @@ export const supportLogic = kea<supportLogicType>([
kind: SupportTicketKind | null
target_area: SupportTicketTargetArea | null
message: string
message2: string
message3: string
},
errors: ({ name, email, message, kind, target_area }) => {
errors: ({ name, email, message, message2, message3, kind, target_area }) => {
return {
name: !name ? 'Please enter your name' : '',
email: !email ? 'Please enter your email' : '',
message: !message ? 'Please enter a message' : '',
message2:
!message2 && target_area && EXTENDED_SUPPORT_TOPICS.includes(target_area)
? 'Please enter a message'
: '',
message3:
!message3 && target_area && EXTENDED_SUPPORT_TOPICS.includes(target_area)
? 'Please enter a message'
: '',
kind: !kind ? 'Please choose' : undefined,
target_area: !target_area ? 'Please choose' : undefined,
}
},
submit: async ({ name, email, kind, target_area, message }) => {
actions.submitZendeskTicket(name || '', email || '', kind, target_area, message)
submit: async ({ name, email, kind, target_area, message, message2, message3 }) => {
actions.submitZendeskTicket(name || '', email || '', kind, target_area, message, message2, message3)
actions.closeSupportForm()
actions.resetSendSupportLoggedOutRequest()
},
Expand All @@ -188,6 +213,8 @@ export const supportLogic = kea<supportLogicType>([
kind,
target_area: target_area ?? getURLPathToTargetArea(window.location.pathname),
message: '',
message2: '',
message3: '',
})
},
openSupportLoggedOutForm: async ({ name, email, kind, target_area }) => {
Expand All @@ -197,9 +224,11 @@ export const supportLogic = kea<supportLogicType>([
kind: kind ? kind : null,
target_area: target_area ? target_area : null,
message: '',
message2: '',
message3: '',
})
},
submitZendeskTicket: async ({ name, email, kind, target_area, message }) => {
submitZendeskTicket: async ({ name, email, kind, target_area, message, message2, message3 }) => {
const zendesk_ticket_uuid = uuid()
const subject =
SUPPORT_KIND_TO_SUBJECT[kind ?? 'support'] +
Expand All @@ -216,6 +245,8 @@ export const supportLogic = kea<supportLogicType>([
comment: {
body: (
message +
(message2 ? '\n\n' + message2 : '') +
(message3 ? '\n\n' + message3 : '') +
`\n\n-----` +
`\nKind: ${kind}` +
`\nTarget area: ${target_area}` +
Expand Down

0 comments on commit 8f8935d

Please sign in to comment.