diff options
Diffstat (limited to 'src/components/feedback-button')
4 files changed, 258 insertions, 0 deletions
diff --git a/src/components/feedback-button/feedback-button-client.tsx b/src/components/feedback-button/feedback-button-client.tsx new file mode 100644 index 0000000..16debec --- /dev/null +++ b/src/components/feedback-button/feedback-button-client.tsx @@ -0,0 +1,198 @@ +'use client' +import { formSchema } from '@/components/feedback-button/feedback-button-common' +import { Button } from '@/components/ui/button' +import { + Dialog, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, + DialogTrigger, +} from '@/components/ui/dialog' +import { + Drawer, + DrawerContent, + DrawerDescription, + DrawerHeader, + DrawerTitle, + DrawerTrigger, +} from '@/components/ui/drawer' +import { + Form, + FormControl, + FormDescription, + FormField, + FormItem, + FormLabel, + FormMessage, +} from '@/components/ui/form' +import { Input } from '@/components/ui/input' +import { Textarea } from '@/components/ui/textarea' +import { useToast } from '@/components/ui/use-toast' +import { useMediaQuery } from '@/lib/hooks' +import { zodResolver } from '@hookform/resolvers/zod' +import { Loader2, MessageCircle } from 'lucide-react' +import { useState } from 'react' +import { useForm } from 'react-hook-form' +import * as z from 'zod' + +type FormValues = z.infer<typeof formSchema> + +type Props = { + sendFeedback: (values: FormValues) => Promise<void> +} + +export function FeedbackButtonClient({ sendFeedback }: Props) { + const { toast } = useToast() + const isDesktop = useMediaQuery('(min-width: 768px)') + + async function onSubmit(values: FormValues) { + await sendFeedback(values) + toast({ + title: 'Thank you for your feedback!', + description: + 'We will have a look at it as soon as possible, and will get back to you if needed.', + }) + } + + return ( + <div className="fixed right-4 bottom-4"> + {isDesktop ? ( + <FeedbackDialog onSubmit={onSubmit} /> + ) : ( + <FeedbackDrawer onSubmit={onSubmit} /> + )} + </div> + ) +} + +function FeedbackDrawer({ + onSubmit, +}: { + onSubmit: (values: FormValues) => Promise<void> +}) { + const [open, setOpen] = useState(false) + + return ( + <div className="fixed right-4 bottom-4"> + <Drawer open={open} onOpenChange={setOpen}> + <DrawerTrigger asChild> + <Button> + <MessageCircle className="w-4 h-4 mr-2" /> Feedback + </Button> + </DrawerTrigger> + <DrawerContent> + <DrawerHeader> + <DrawerTitle>Give us your feedback!</DrawerTitle> + <DrawerDescription> + We are always working to improve the user experience, and your + feedback helps us a lot. + </DrawerDescription> + </DrawerHeader> + <div className="px-4 pb-4"> + <FeedbackForm + onSubmit={async (values) => { + await onSubmit(values) + setOpen(false) + }} + /> + </div> + </DrawerContent> + </Drawer> + </div> + ) +} + +function FeedbackDialog({ + onSubmit, +}: { + onSubmit: (values: FormValues) => Promise<void> +}) { + const [open, setOpen] = useState(false) + + return ( + <div className="fixed right-4 bottom-4"> + <Dialog open={open} onOpenChange={setOpen}> + <DialogTrigger asChild> + <Button> + <MessageCircle className="w-4 h-4 mr-2" /> Feedback + </Button> + </DialogTrigger> + <DialogContent> + <DialogHeader> + <DialogTitle>Give us your feedback!</DialogTitle> + <DialogDescription> + We are always working to improve the user experience, and your + feedback helps us a lot. + </DialogDescription> + </DialogHeader> + <FeedbackForm + onSubmit={async (values) => { + await onSubmit(values) + setOpen(false) + }} + /> + </DialogContent> + </Dialog> + </div> + ) +} + +function FeedbackForm({ + onSubmit, +}: { + onSubmit: (values: FormValues) => Promise<void> +}) { + const form = useForm<FormValues>({ + resolver: zodResolver(formSchema), + defaultValues: { email: '', message: '' }, + }) + + const isSubmitting = form.formState.isSubmitting + return ( + <Form {...form}> + <form onSubmit={form.handleSubmit(onSubmit)} className="grid gap-4"> + <div className="grid gap-4"> + <FormField + control={form.control} + name="email" + render={({ field }) => ( + <FormItem> + <FormLabel>Your email address</FormLabel> + <FormControl> + <Input placeholder="your@email.com" {...field} /> + </FormControl> + <FormDescription> + Optional. Provide it if you want us to get back to you. + </FormDescription> + <FormMessage /> + </FormItem> + )} + /> + <FormField + control={form.control} + name="message" + render={({ field }) => ( + <FormItem> + <FormLabel>Your feedback</FormLabel> + <FormControl> + <Textarea placeholder="Enter your feedback" {...field} /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + </div> + <Button type="submit" disabled={isSubmitting}> + {isSubmitting ? ( + <> + <Loader2 className="w-4 h-4 mr-2 animate-spin" /> Submitting… + </> + ) : ( + <>Submit</> + )} + </Button> + </form> + </Form> + ) +} diff --git a/src/components/feedback-button/feedback-button-common.tsx b/src/components/feedback-button/feedback-button-common.tsx new file mode 100644 index 0000000..04567ef --- /dev/null +++ b/src/components/feedback-button/feedback-button-common.tsx @@ -0,0 +1,9 @@ +import { z } from 'zod' + +export const formSchema = z.object({ + email: z.union([ + z.string().email('Please enter a valid email address.'), + z.string().max(0), + ]), + message: z.string().min(10, 'Please enter at least 10 characters.').max(5000), +}) diff --git a/src/components/feedback-button/feedback-button-email.tsx b/src/components/feedback-button/feedback-button-email.tsx new file mode 100644 index 0000000..ecb8c7d --- /dev/null +++ b/src/components/feedback-button/feedback-button-email.tsx @@ -0,0 +1,24 @@ +import { Heading } from '@react-email/heading' +import { Html } from '@react-email/html' +import { Preview } from '@react-email/preview' +import { Text } from '@react-email/text' + +type Props = { + email?: string + message: string +} + +export function FeedbackButtonEmail({ email, message }: Props) { + return ( + <Html> + <Preview>New feedback from {email || 'anonymous user'}</Preview> + <Heading>New feedback on Spliit</Heading> + <Text> + Email address: <strong>{email || 'not provided'}</strong> + </Text> + <pre style={{ padding: 16, borderLeft: '2px solid lightgray' }}> + {message} + </pre> + </Html> + ) +} diff --git a/src/components/feedback-button/feedback-button.tsx b/src/components/feedback-button/feedback-button.tsx new file mode 100644 index 0000000..d43f8a7 --- /dev/null +++ b/src/components/feedback-button/feedback-button.tsx @@ -0,0 +1,27 @@ +import { FeedbackButtonClient } from '@/components/feedback-button/feedback-button-client' +import { formSchema } from '@/components/feedback-button/feedback-button-common' +import { FeedbackButtonEmail } from '@/components/feedback-button/feedback-button-email' +import { env } from '@/lib/env' +import { getResend } from '@/lib/resend' + +export function FeedbackButton() { + async function sendFeedback(values: unknown) { + 'use server' + const { email, message } = formSchema.parse(values) + const resend = getResend() + if (!resend || !env.FEEDBACK_EMAIL_FROM || !env.FEEDBACK_EMAIL_TO) { + console.warn( + 'Resend is not properly configured. Feedback email won’t be sent.', + ) + return + } + await resend.emails.send({ + from: env.FEEDBACK_EMAIL_FROM, + to: env.FEEDBACK_EMAIL_TO, + subject: `Spliit: new feedback from ${email || 'anonymous user'}`, + react: <FeedbackButtonEmail email={email} message={message} />, + }) + } + + return <FeedbackButtonClient sendFeedback={sendFeedback} /> +} |