✨(frontend) add email collection step for anonymous survey responses
Add optional email collection step for anonymous users submitting survey responses. Store email in new "unsafe_email" property on PostHog user profile to enable follow-up troubleshooting while maintaining anonymity. Addresses inability to contact users reporting issues without accounts.
This commit is contained in:
committed by
aleb_the_flash
parent
c0bcced3c0
commit
433a3a7cdf
@@ -1,5 +1,5 @@
|
|||||||
import { Button, H, Text, TextArea } from '@/primitives'
|
import { Button, H, Input, Text, TextArea } from '@/primitives'
|
||||||
import { useEffect, useState } from 'react'
|
import { useEffect, useMemo, useState } from 'react'
|
||||||
import { cva } from '@/styled-system/css'
|
import { cva } from '@/styled-system/css'
|
||||||
import { useTranslation } from 'react-i18next'
|
import { useTranslation } from 'react-i18next'
|
||||||
import { styled, VStack } from '@/styled-system/jsx'
|
import { styled, VStack } from '@/styled-system/jsx'
|
||||||
@@ -237,9 +237,74 @@ const ConfirmationMessage = ({ onNext }: { onNext: () => void }) => {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const AuthenticationMessage = ({
|
||||||
|
onNext,
|
||||||
|
posthog,
|
||||||
|
}: {
|
||||||
|
onNext: () => void
|
||||||
|
posthog: PostHog
|
||||||
|
}) => {
|
||||||
|
const { t } = useTranslation('rooms', { keyPrefix: 'authenticationMessage' })
|
||||||
|
|
||||||
|
const [email, setEmail] = useState('')
|
||||||
|
|
||||||
|
const onSubmit = () => {
|
||||||
|
posthog.people.set({ unsafe_email: email })
|
||||||
|
onNext()
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card
|
||||||
|
style={{
|
||||||
|
maxWidth: '380px',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
justifyContent: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<H lvl={3}>{t('heading')}</H>
|
||||||
|
<Input
|
||||||
|
id="emailInput"
|
||||||
|
name="email"
|
||||||
|
placeholder={t('placeholder')}
|
||||||
|
required
|
||||||
|
value={email}
|
||||||
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
|
style={{
|
||||||
|
marginBottom: '1rem',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<VStack gap="0.5">
|
||||||
|
<Button
|
||||||
|
variant="primary"
|
||||||
|
size="sm"
|
||||||
|
fullWidth
|
||||||
|
isDisabled={!email}
|
||||||
|
onPress={onSubmit}
|
||||||
|
>
|
||||||
|
{t('submit')}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
invisible
|
||||||
|
variant="secondary"
|
||||||
|
size="sm"
|
||||||
|
fullWidth
|
||||||
|
onPress={onNext}
|
||||||
|
>
|
||||||
|
{t('ignore')}
|
||||||
|
</Button>
|
||||||
|
</VStack>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
export const Rating = () => {
|
export const Rating = () => {
|
||||||
const posthog = usePostHog()
|
const posthog = usePostHog()
|
||||||
|
|
||||||
|
const isUserAnonymous = useMemo(() => {
|
||||||
|
return posthog.get_property('$user_state') == 'anonymous'
|
||||||
|
}, [posthog])
|
||||||
|
|
||||||
const [step, setStep] = useState(0)
|
const [step, setStep] = useState(0)
|
||||||
|
|
||||||
if (step == 0) {
|
if (step == 0) {
|
||||||
@@ -251,6 +316,17 @@ export const Rating = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (step == 2) {
|
if (step == 2) {
|
||||||
|
return isUserAnonymous ? (
|
||||||
|
<AuthenticationMessage
|
||||||
|
posthog={posthog}
|
||||||
|
onNext={() => setStep(step + 1)}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<ConfirmationMessage onNext={() => setStep(0)} />
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (step == 3) {
|
||||||
return <ConfirmationMessage onNext={() => setStep(0)} />
|
return <ConfirmationMessage onNext={() => setStep(0)} />
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -173,6 +173,12 @@
|
|||||||
"heading": "",
|
"heading": "",
|
||||||
"body": ""
|
"body": ""
|
||||||
},
|
},
|
||||||
|
"authenticationMessage": {
|
||||||
|
"heading": "",
|
||||||
|
"placeholder": "",
|
||||||
|
"submit": "",
|
||||||
|
"ignore": ""
|
||||||
|
},
|
||||||
"participants": {
|
"participants": {
|
||||||
"subheading": "",
|
"subheading": "",
|
||||||
"contributors": "",
|
"contributors": "",
|
||||||
|
|||||||
@@ -172,6 +172,12 @@
|
|||||||
"heading": "Thank you for your submission",
|
"heading": "Thank you for your submission",
|
||||||
"body": "Our product team takes the time to carefully review your feedback. We will get back to you as soon as possible."
|
"body": "Our product team takes the time to carefully review your feedback. We will get back to you as soon as possible."
|
||||||
},
|
},
|
||||||
|
"authenticationMessage": {
|
||||||
|
"heading": "How can we contact you?",
|
||||||
|
"placeholder": "Your email",
|
||||||
|
"submit": "Send",
|
||||||
|
"ignore": "Ignore"
|
||||||
|
},
|
||||||
"participants": {
|
"participants": {
|
||||||
"subheading": "In room",
|
"subheading": "In room",
|
||||||
"you": "You",
|
"you": "You",
|
||||||
|
|||||||
@@ -172,6 +172,12 @@
|
|||||||
"heading": "Merci pour votre retour",
|
"heading": "Merci pour votre retour",
|
||||||
"body": "Notre équipe produit prend le temps d'analyser attentivement vos réponses. Nous reviendrons vers vous dans les plus brefs délais."
|
"body": "Notre équipe produit prend le temps d'analyser attentivement vos réponses. Nous reviendrons vers vous dans les plus brefs délais."
|
||||||
},
|
},
|
||||||
|
"authenticationMessage": {
|
||||||
|
"heading": "Comment pouvons-nous vous recontacter ?",
|
||||||
|
"placeholder": "Votre email",
|
||||||
|
"submit": "Envoyer",
|
||||||
|
"ignore": "Ignorer"
|
||||||
|
},
|
||||||
"participants": {
|
"participants": {
|
||||||
"subheading": "Dans la réunion",
|
"subheading": "Dans la réunion",
|
||||||
"you": "Vous",
|
"you": "Vous",
|
||||||
|
|||||||
Reference in New Issue
Block a user