Browse Source
Merge pull request #117 from vernu/improve-support-form
Merge pull request #117 from vernu/improve-support-form
Improve customer-support formpull/118/head
Israel Abebe
7 months ago
committed by
GitHub
GitHub
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 10 additions and 260 deletions
-
9web/app/(app)/dashboard/(components)/support-form.tsx
-
257web/components/shared/customer-support.tsx
-
4web/lib/auth.ts
@ -1,257 +0,0 @@ |
|||||
'use client' |
|
||||
|
|
||||
import { Button } from '@/components/ui/button' |
|
||||
import { |
|
||||
Dialog, |
|
||||
DialogContent, |
|
||||
DialogDescription, |
|
||||
DialogHeader, |
|
||||
DialogTitle, |
|
||||
DialogTrigger, |
|
||||
} from '@/components/ui/dialog' |
|
||||
import { |
|
||||
Form, |
|
||||
FormControl, |
|
||||
FormField, |
|
||||
FormItem, |
|
||||
FormLabel, |
|
||||
FormMessage, |
|
||||
} from '@/components/ui/form' |
|
||||
import { Input } from '@/components/ui/input' |
|
||||
import { |
|
||||
Select, |
|
||||
SelectContent, |
|
||||
SelectItem, |
|
||||
SelectTrigger, |
|
||||
SelectValue, |
|
||||
} from '@/components/ui/select' |
|
||||
import { Textarea } from '@/components/ui/textarea' |
|
||||
import { AlertTriangle, Check, Loader2, MessageSquarePlus } from 'lucide-react' |
|
||||
import { useState } from 'react' |
|
||||
import { useForm } from 'react-hook-form' |
|
||||
import { z } from 'zod' |
|
||||
import { zodResolver } from '@hookform/resolvers/zod' |
|
||||
import { toast } from '@/hooks/use-toast' |
|
||||
import httpBrowserClient from '@/lib/httpBrowserClient' |
|
||||
import { ApiEndpoints } from '@/config/api' |
|
||||
|
|
||||
const SupportFormSchema = z.object({ |
|
||||
name: z.string().min(1, { message: 'Name is required' }), |
|
||||
email: z.string().email({ message: 'Invalid email address' }), |
|
||||
phone: z.string().optional(), |
|
||||
category: z.enum(['general', 'technical', 'billing-and-payments', 'other'], { |
|
||||
message: 'Support category is required', |
|
||||
}), |
|
||||
message: z.string().min(1, { message: 'Message is required' }), |
|
||||
}) |
|
||||
|
|
||||
export default function SupportButton() { |
|
||||
const [open, setOpen] = useState(false) |
|
||||
const [isSubmitting, setIsSubmitting] = useState(false) |
|
||||
const [isSubmitSuccessful, setIsSubmitSuccessful] = useState(false) |
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null) |
|
||||
|
|
||||
const form = useForm({ |
|
||||
resolver: zodResolver(SupportFormSchema), |
|
||||
defaultValues: { |
|
||||
name: '', |
|
||||
email: '', |
|
||||
phone: '', |
|
||||
category: 'general', |
|
||||
message: '', |
|
||||
}, |
|
||||
}) |
|
||||
|
|
||||
const onSubmit = async (data: any) => { |
|
||||
setIsSubmitting(true) |
|
||||
setErrorMessage(null) |
|
||||
|
|
||||
try { |
|
||||
// Use the existing httpBrowserClient to call the NestJS endpoint
|
|
||||
const response = await httpBrowserClient.post( |
|
||||
ApiEndpoints.support.customerSupport(), |
|
||||
data |
|
||||
) |
|
||||
|
|
||||
setIsSubmitSuccessful(true) |
|
||||
|
|
||||
toast({ |
|
||||
title: 'Support request submitted', |
|
||||
description: response.data.message || 'We will get back to you soon.', |
|
||||
}) |
|
||||
|
|
||||
// Wait 3 seconds before closing the dialog
|
|
||||
setTimeout(() => { |
|
||||
setOpen(false) |
|
||||
}, 3000) |
|
||||
} catch (error) { |
|
||||
console.error('Error submitting support request:', error) |
|
||||
|
|
||||
setErrorMessage( |
|
||||
'Error submitting support request. Please try again later.' |
|
||||
) |
|
||||
|
|
||||
toast({ |
|
||||
title: 'Error submitting support request', |
|
||||
description: 'Please try again later', |
|
||||
variant: 'destructive', |
|
||||
}) |
|
||||
} finally { |
|
||||
setIsSubmitting(false) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
const onOpenChange = (open: boolean) => { |
|
||||
setOpen(open) |
|
||||
if (!open) { |
|
||||
form.reset() |
|
||||
setIsSubmitSuccessful(false) |
|
||||
setErrorMessage(null) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
return ( |
|
||||
<Dialog open={open} onOpenChange={onOpenChange}> |
|
||||
<DialogTrigger asChild> |
|
||||
<Button |
|
||||
className='fixed bottom-4 right-4 shadow-lg bg-brand-500 hover:bg-brand-600 dark:text-white rounded-full' |
|
||||
size='sm' |
|
||||
> |
|
||||
<MessageSquarePlus className='h-5 w-5 mr-1' /> |
|
||||
<span className='mr-1'>Support</span> |
|
||||
</Button> |
|
||||
</DialogTrigger> |
|
||||
<DialogContent> |
|
||||
<DialogHeader> |
|
||||
<DialogTitle>Contact Support</DialogTitle> |
|
||||
<DialogDescription> |
|
||||
Fill out the form below and we'll get back to you as soon as |
|
||||
possible. |
|
||||
</DialogDescription> |
|
||||
</DialogHeader> |
|
||||
<Form {...form}> |
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'> |
|
||||
<FormField |
|
||||
control={form.control} |
|
||||
name='category' |
|
||||
disabled={isSubmitting} |
|
||||
render={({ field }) => ( |
|
||||
<FormItem> |
|
||||
<FormLabel>Support Category</FormLabel> |
|
||||
<Select |
|
||||
onValueChange={field.onChange} |
|
||||
disabled={isSubmitting} |
|
||||
defaultValue={field.value} |
|
||||
> |
|
||||
<FormControl> |
|
||||
<SelectTrigger> |
|
||||
<SelectValue placeholder='Select support category' /> |
|
||||
</SelectTrigger> |
|
||||
</FormControl> |
|
||||
<SelectContent> |
|
||||
<SelectItem value='general'>General Inquiry</SelectItem> |
|
||||
<SelectItem value='technical'> |
|
||||
Technical Support |
|
||||
</SelectItem> |
|
||||
<SelectItem value='billing-and-payments'> |
|
||||
Billing and Payments |
|
||||
</SelectItem> |
|
||||
<SelectItem value='other'>Other</SelectItem> |
|
||||
</SelectContent> |
|
||||
</Select> |
|
||||
<FormMessage /> |
|
||||
</FormItem> |
|
||||
)} |
|
||||
/> |
|
||||
<FormField |
|
||||
control={form.control} |
|
||||
name='name' |
|
||||
disabled={isSubmitting} |
|
||||
render={({ field }) => ( |
|
||||
<FormItem> |
|
||||
<FormLabel>Name</FormLabel> |
|
||||
<FormControl> |
|
||||
<Input placeholder='Your name' {...field} /> |
|
||||
</FormControl> |
|
||||
<FormMessage /> |
|
||||
</FormItem> |
|
||||
)} |
|
||||
/> |
|
||||
<FormField |
|
||||
control={form.control} |
|
||||
name='email' |
|
||||
disabled={isSubmitting} |
|
||||
render={({ field }) => ( |
|
||||
<FormItem> |
|
||||
<FormLabel>Email</FormLabel> |
|
||||
<FormControl> |
|
||||
<Input |
|
||||
placeholder='your@email.com' |
|
||||
type='email' |
|
||||
{...field} |
|
||||
/> |
|
||||
</FormControl> |
|
||||
<FormMessage /> |
|
||||
</FormItem> |
|
||||
)} |
|
||||
/> |
|
||||
<FormField |
|
||||
control={form.control} |
|
||||
name='phone' |
|
||||
disabled={isSubmitting} |
|
||||
render={({ field }) => ( |
|
||||
<FormItem> |
|
||||
<FormLabel>Phone (Optional)</FormLabel> |
|
||||
<FormControl> |
|
||||
<Input placeholder='+1234567890' type='tel' {...field} /> |
|
||||
</FormControl> |
|
||||
<FormMessage /> |
|
||||
</FormItem> |
|
||||
)} |
|
||||
/> |
|
||||
<FormField |
|
||||
control={form.control} |
|
||||
name='message' |
|
||||
disabled={isSubmitting} |
|
||||
render={({ field }) => ( |
|
||||
<FormItem> |
|
||||
<FormLabel>Message</FormLabel> |
|
||||
<FormControl> |
|
||||
<Textarea |
|
||||
placeholder='How can we help you?' |
|
||||
className='min-h-[100px]' |
|
||||
{...field} |
|
||||
/> |
|
||||
</FormControl> |
|
||||
<FormMessage /> |
|
||||
</FormItem> |
|
||||
)} |
|
||||
/> |
|
||||
{isSubmitSuccessful && ( |
|
||||
<div className='flex items-center gap-2 text-green-500'> |
|
||||
<Check className='h-4 w-4' /> We have received your message, we |
|
||||
will get back to you soon. |
|
||||
</div> |
|
||||
)} |
|
||||
|
|
||||
{errorMessage && ( |
|
||||
<div className='flex items-center gap-2 text-red-500'> |
|
||||
<AlertTriangle className='h-4 w-4' /> {errorMessage} |
|
||||
</div> |
|
||||
)} |
|
||||
<Button type='submit' disabled={isSubmitting} className='w-full'> |
|
||||
{isSubmitting ? ( |
|
||||
<> |
|
||||
<Loader2 className='h-4 w-4 animate-spin mr-2' />{' '} |
|
||||
Submitting... |
|
||||
</> |
|
||||
) : ( |
|
||||
'Submit' |
|
||||
)} |
|
||||
</Button> |
|
||||
</form> |
|
||||
</Form> |
|
||||
</DialogContent> |
|
||||
</Dialog> |
|
||||
) |
|
||||
} |
|
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue