{"version":3,"file":"article-feedback-section.BBVrteq6.js","sources":["../../../src/modules/article/feedback/article-feedback.ts","../../../src/modules/article/feedback/article-positive-feedback-dialog.tsx","../../../src/modules/article/feedback/article-negative-feedback-dialog.tsx","../../../src/modules/article/feedback/article-feedback-section.tsx"],"sourcesContent":["import { runQuery } from '@lib/graphql'\nimport { trackUserData } from '@lib/user-tracking'\n\nconst GENERIC_ERROR_MESSAGE = 'Failed to send data. Please try again.'\n\nconst sendResponse = async ({\n wasHelpful,\n postName\n}: {\n wasHelpful: boolean\n postName: string\n}): Promise => {\n const query = `\n mutation{\n track_article_feedback_wp(was_helpful: ${wasHelpful}, post_name: \"${postName}\", avoid_cache: \"${Math.random().toString(36).substring(2)}\"){\n id\n }\n }\n `\n try {\n const data: { track_article_feedback_wp: { id: number } } = await runQuery(query)\n return data.track_article_feedback_wp.id\n } catch (e) {\n console.error('Failed to send data', e)\n throw e\n }\n}\n\nconst subscribe = async ({\n userType,\n state,\n email,\n feedbackId,\n postName\n}: {\n userType: string\n state: string\n email: string\n feedbackId: number | boolean\n postName: string\n}) => {\n try {\n await trackUserData({\n email,\n userType,\n stateId: state,\n source: 'article_feedback'\n })\n\n const query = `\n mutation {\n track_article_feedback_wp(id: ${feedbackId}, email: \"${email}\", subscribed: true, post_name: \"${postName}\", avoid_cache: \"${Math.random().toString(36).substring(2)}\"){\n id\n }\n }\n `\n await runQuery(query)\n } catch (e) {\n console.error('Failed to send data', e)\n throw e\n }\n}\n\nconst sendFeedback = async ({\n email,\n feedbackId,\n postName,\n feedback\n}: {\n email?: string\n feedbackId: number | boolean\n postName: string\n feedback: string\n}) => {\n const query = `\n mutation{\n track_article_feedback_wp(id: ${feedbackId}, email: \"${email}\", feedback: \"${feedback}\", post_name: \"${postName}\", avoid_cache: \"${Math.random().toString(36).substring(2)}\"){\n id\n }\n }\n `\n try {\n await runQuery(query)\n await fetch(`${new URL(import.meta.env.PUBLIC_SFC_HOST)}send_email_feedback_wp`, {\n method: 'post',\n body: JSON.stringify({\n email: email,\n feedback: feedback,\n post_name: postName\n }),\n headers: {\n 'Content-Type': 'application/json'\n }\n })\n } catch (e) {\n console.error('Failed to send data', e)\n throw e\n }\n}\n\nexport { GENERIC_ERROR_MESSAGE, sendResponse, subscribe, sendFeedback }\n","import { Button } from '@components/ui/button'\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle\n} from '@components/ui/dialog'\nimport { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@components/ui/form'\nimport { Input } from '@components/ui/input'\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue\n} from '@components/ui/select'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { US_STATES } from '@lib/us-states'\nimport { Loader2 } from 'lucide-react'\nimport { forwardRef, useImperativeHandle, useState } from 'react'\nimport { useForm } from 'react-hook-form'\nimport { z } from 'zod'\nimport { GENERIC_ERROR_MESSAGE, sendResponse, subscribe } from './article-feedback'\nimport * as Sentry from '@sentry/astro'\n\ninterface Props {\n postName: string\n onFeedbackSent: (isPositive: boolean) => void\n}\n\nexport const ArticlePositiveFeedbackDialog = forwardRef(\n ({ postName, onFeedbackSent }, ref) => {\n useImperativeHandle(ref, () => ({\n openAndSendResponse: () => {\n openDialog()\n sendPositiveResponse()\n }\n }))\n\n const openDialog = () => {\n setIsOpen(true)\n }\n\n const sendPositiveResponse = async () => {\n try {\n const feedbackId = await sendResponse({ wasHelpful: true, postName })\n setFeedbackId(feedbackId)\n } catch (error) {\n Sentry.captureException(error)\n }\n }\n\n const [isOpen, setIsOpen] = useState(false)\n const [feedbackId, setFeedbackId] = useState(false)\n\n const formSchema = z.object({\n userType: z.string({\n message: 'Please select your role'\n }),\n state: z.string({\n message: 'Please select your state of residence'\n }),\n email: z.string().email()\n })\n\n const form = useForm>({\n resolver: zodResolver(formSchema),\n defaultValues: {\n userType: '',\n state: '',\n email: ''\n }\n })\n\n const [isLoading, setIsLoading] = useState(false)\n const [error, setError] = useState(null)\n\n const onSubmit = (values: z.infer) => {\n sendData(values)\n }\n\n const sendData = async (data: z.infer) => {\n try {\n setIsLoading(true)\n await subscribe({\n userType: data.userType,\n state: data.state,\n email: data.email,\n feedbackId: feedbackId,\n postName: postName\n })\n onFeedbackSent(true)\n setIsOpen(false)\n } catch (error) {\n setError(GENERIC_ERROR_MESSAGE)\n } finally {\n setIsLoading(false)\n }\n }\n\n return (\n setIsOpen(isOpen)}>\n \n \n Glad we could help!\n Interested in more content like this?\n \n
\n
\n \n (\n \n What role best describes you?\n \n \n \n )}\n />\n (\n \n State of residence\n \n \n \n )}\n />\n (\n \n Email\n \n \n \n )}\n />\n {error && (\n
\n )}\n
\n \n

\n ✔️ 98,200 have subscribed\n

\n
\n \n \n \n
\n
\n )\n }\n)\n","import { Button } from '@components/ui/button'\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle\n} from '@components/ui/dialog'\nimport { Form, FormField, FormItem, FormLabel, FormMessage } from '@components/ui/form'\nimport { Input } from '@components/ui/input'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { Loader2 } from 'lucide-react'\nimport { forwardRef, useImperativeHandle, useState } from 'react'\nimport { useForm } from 'react-hook-form'\nimport { z } from 'zod'\nimport { GENERIC_ERROR_MESSAGE, sendFeedback, sendResponse } from './article-feedback'\nimport { Textarea } from '@components/ui/textarea'\nimport * as Sentry from '@sentry/astro'\n\ninterface Props {\n postName: string\n onFeedbackSent: (isPositive: boolean) => void\n}\n\nexport const ArticleNegativeFeedbackDialog = forwardRef(\n ({ postName, onFeedbackSent }, ref) => {\n useImperativeHandle(ref, () => ({\n openAndSendResponse: () => {\n openDialog()\n sendNegativeResponse()\n }\n }))\n\n const openDialog = () => {\n setIsOpen(true)\n }\n\n const sendNegativeResponse = async () => {\n try {\n const feedbackId = await sendResponse({ wasHelpful: false, postName })\n setFeedbackId(feedbackId)\n } catch (error) {\n Sentry.captureException(error)\n }\n }\n\n const [isOpen, setIsOpen] = useState(false)\n const [feedbackId, setFeedbackId] = useState(false)\n\n const formSchema = z.object({\n email: z.union([z.literal(''), z.string().email()]),\n message: z\n .string({\n message: 'Please enter your feedback'\n })\n .min(1, 'Please enter your feedback')\n .max(500, 'Feedback must be less than 500 characters')\n })\n\n const form = useForm>({\n resolver: zodResolver(formSchema),\n defaultValues: {\n email: '',\n message: ''\n }\n })\n\n const [isLoading, setIsLoading] = useState(false)\n const [error, setError] = useState(null)\n\n const onSubmit = (values: z.infer) => {\n sendData(values)\n }\n\n const sendData = async (data: z.infer) => {\n try {\n setIsLoading(true)\n await sendFeedback({\n email: data.email,\n feedbackId: feedbackId,\n postName: postName,\n feedback: data.message\n })\n onFeedbackSent(false)\n setIsOpen(false)\n } catch (error) {\n setError(GENERIC_ERROR_MESSAGE)\n } finally {\n setIsLoading(false)\n }\n }\n\n return (\n setIsOpen(isOpen)}>\n \n \n Oh no! How can we improve?\n \n We're always looking for ways to improve our content and tools. Your feedback matters!\n \n \n
\n
\n \n (\n \n Email\n \n \n \n )}\n />\n (\n \n Feedback\n