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} />
+}