diff --git a/packages/client/hooks/useManualClientSideTrack.ts b/packages/client/hooks/useManualClientSideTrack.ts new file mode 100644 index 00000000000..6bffa32f323 --- /dev/null +++ b/packages/client/hooks/useManualClientSideTrack.ts @@ -0,0 +1,20 @@ +import {useCallback} from 'react' +import SendClientSideEvent from '../utils/SendClientSideEvent' +import useAtmosphere from './useAtmosphere' + +const useManualClientSideTrack = () => { + const atmosphere = useAtmosphere() + + const trackEvent = useCallback( + (event: string, options: Record) => { + SendClientSideEvent(atmosphere, event, { + ...options + }) + }, + [atmosphere] + ) + + return trackEvent +} + +export default useManualClientSideTrack diff --git a/packages/client/modules/teamDashboard/components/TeamDashInsightsTab/FeedbackModal.tsx b/packages/client/modules/teamDashboard/components/TeamDashInsightsTab/FeedbackModal.tsx index ba7dc33fb07..56ee2ed818c 100644 --- a/packages/client/modules/teamDashboard/components/TeamDashInsightsTab/FeedbackModal.tsx +++ b/packages/client/modules/teamDashboard/components/TeamDashInsightsTab/FeedbackModal.tsx @@ -1,7 +1,8 @@ import {RadioButtonChecked, RadioButtonUnchecked, ThumbDown, ThumbUp} from '@mui/icons-material' -import React, {useState} from 'react' +import React, {useCallback, useState} from 'react' import BasicTextArea from '../../../../components/InputField/BasicTextArea' import PrimaryButton from '../../../../components/PrimaryButton' +import useManualClientSideTrack from '../../../../hooks/useManualClientSideTrack' import {Dialog} from '../../../../ui/Dialog/Dialog' import {DialogActions} from '../../../../ui/Dialog/DialogActions' import {DialogContent} from '../../../../ui/Dialog/DialogContent' @@ -12,46 +13,67 @@ type Props = { onClose: () => void } +type FeedbackState = { + isUseful: boolean + feedback: string + canEmail: boolean +} + +const defaultFeedbackState: FeedbackState = { + isUseful: true, + feedback: '', + canEmail: true +} + const InsightsFeedbackModal = (props: Props) => { const {isOpen, onClose} = props - const [isUseful, setIsUseful] = useState(null) - const [feedback, setFeedback] = useState('') - const [canEmail, setCanEmail] = useState(true) + const [feedbackState, setFeedbackState] = useState(defaultFeedbackState) + const trackEvent = useManualClientSideTrack() - const handleSubmit = () => { - console.log({isUseful, feedback, canEmail}) + const handleSubmit = useCallback(() => { + trackEvent('Insights Feedback Submitted', feedbackState) onClose() - } + setFeedbackState(defaultFeedbackState) + }, [trackEvent, feedbackState, onClose]) + + const handleClose = useCallback(() => { + onClose() + setFeedbackState(defaultFeedbackState) + }, [onClose]) + + const updateField = useCallback((field: keyof FeedbackState, value: any) => { + setFeedbackState((prev) => ({...prev, [field]: value})) + }, []) return ( - + Insights Feedback

Were these insights useful?

@@ -71,10 +93,10 @@ const InsightsFeedbackModal = (props: Props) => {

May we email you to talk more regarding your feedback?