🐛 fix support form image bug and telegram bot

streamethorg · Aug 8, 2024 · d7cdf93 · d7cdf93
1 parent f38bbcc
commit d7cdf93
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 14 deletions.
diff --git a/packages/app/components/misc/Support/SupportForm.tsx b/packages/app/components/misc/Support/SupportForm.tsx
@@ -96,8 +96,8 @@ const SupportForm = ({
               <FormItem className="mt-4 flex rounded-xl border border-dashed">
                 <FormControl>
                   <ImageUpload
-                    placeholder="Click to upload image here. "
-                    className="m-auto h-full w-full bg-neutrals-300 py-4 text-black"
+                    placeholder="Click to upload image here. (Optional) "
+                    className="m-auto min-h-[200px] w-full bg-neutrals-300 py-4 text-black"
                     aspectRatio={1}
                     path={`support`}
                     {...field}

diff --git a/packages/app/components/misc/Support/index.tsx b/packages/app/components/misc/Support/index.tsx
@@ -7,22 +7,23 @@ import * as z from 'zod';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { toast } from 'sonner';
-import { useSIWE } from 'connectkit';
 import SupportForm from './SupportForm';
 import { Button } from '../../ui/button';
-import { SignInUserButton } from '../SignInUserButton';
 import {
   Credenza,
   CredenzaContent,
   CredenzaTitle,
   CredenzaTrigger,
 } from '@/components/ui/crezenda';
 import { usePrivy } from '@privy-io/react-auth';
+import { useAccount } from 'wagmi';
+import { ConnectWalletButton } from '../ConnectWalletButton';
 
 const Support = () => {
   const [isLoading, setIsLoading] = useState(false);
   const [messageSent, setMessageSent] = useState(false);
   const { authenticated } = usePrivy();
+  const { address } = useAccount();
   const [open, setOpen] = useState(false);
   const form = useForm<z.infer<typeof supportSchema>>({
     resolver: zodResolver(supportSchema),
@@ -40,6 +41,7 @@ const Support = () => {
       toast.error('No wallet address found');
       return;
     }
+
     createSupportTicketAction({
       ...values,
     })
@@ -60,9 +62,10 @@ const Support = () => {
     setMessageSent(false);
     setOpen(false);
   };
+
   return (
     <Credenza open={open} onOpenChange={setOpen}>
-      <CredenzaContent className="!z-[999999] max-h-[700px] p-6 md:overflow-auto">
+      <CredenzaContent className="max-h-[700px] p-6 md:overflow-auto">
         <CredenzaTitle>Contact Support</CredenzaTitle>
         <div>
           {messageSent && <p className="pb-2 font-bold">Message sent 🎉!!</p>}
@@ -88,10 +91,10 @@ const Support = () => {
             </a>
           </p>
 
-          {!authenticated ? (
+          {!authenticated || !!address ? (
             <div>
               <p className="py-2">Sign in to send us a message</p>
-              <SignInUserButton />
+              <ConnectWalletButton />
             </div>
           ) : messageSent ? (
             <div>

diff --git a/packages/app/components/misc/form/imageUpload.tsx b/packages/app/components/misc/form/imageUpload.tsx
@@ -12,6 +12,7 @@ import {
   Dialog,
   DialogContent,
   DialogFooter,
+  DialogTitle,
   DialogTrigger,
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
@@ -44,8 +45,10 @@ const ConfirmImageDeletion: React.FC<ConfirmImageDeletionProps> = ({
           className="absolute right-2 top-2 z-10 cursor-pointer rounded-full border border-muted-foreground bg-white text-muted-foreground"
         />
       </DialogTrigger>
-      <DialogContent className="flex flex-col items-center justify-center gap-5">
-        <p className="text-xl">Are you sure you want to remove this image?</p>
+
+      <DialogContent className="flex flex-col items-center justify-center gap-5 z-[99999999999] ">
+        <DialogTitle>Delete Image</DialogTitle>
+        <p className="text-xl">Are you sure you want to delete this image?</p>
         <DialogFooter className="flex items-center gap-4">
           <Button onClick={() => setOpen(false)} variant="ghost">
             Cancel

diff --git a/packages/app/lib/actions/support.ts b/packages/app/lib/actions/support.ts
@@ -4,8 +4,14 @@ import { createSupportTicket } from '../services/supportService';
 
 export const createSupportTicketAction = async ({
   message,
+  telegram,
+  email,
+  image,
 }: {
   message: string;
+  telegram?: string;
+  email?: string;
+  image?: string;
 }) => {
   const authToken = cookies().get('user-session')?.value;
   if (!authToken) {
@@ -14,6 +20,9 @@ export const createSupportTicketAction = async ({
 
   const response = await createSupportTicket({
     message,
+    telegram,
+    email,
+    image,
     authToken,
   });
 

diff --git a/packages/app/lib/services/supportService.tsx b/packages/app/lib/services/supportService.tsx
@@ -3,9 +3,15 @@ import { ISupport } from 'streameth-new-server/src/interfaces/support.interface'
 
 export async function createSupportTicket({
   message,
+  telegram,
+  email,
+  image,
   authToken,
 }: {
   message: string;
+  telegram?: string;
+  email?: string;
+  image?: string;
   authToken: string;
 }): Promise<ISupport> {
   const response = await fetch(`${apiUrl()}/tickets`, {
@@ -14,7 +20,7 @@ export async function createSupportTicket({
       'Content-Type': 'application/json',
       Authorization: `Bearer ${authToken}`,
     },
-    body: JSON.stringify({ message }),
+    body: JSON.stringify({ message, telegram, email, image }),
   });
   if (!response.ok) {
     throw 'Error creating ticket';

diff --git a/packages/server/src/services/support.service.ts b/packages/server/src/services/support.service.ts
@@ -14,11 +14,11 @@ export default class SupportService {
 
   async create(data: ISupport): Promise<ISupport> {
     const bot = new Telegraf(config.telegram.apiKey);
-    bot.telegram.sendMessage(
+    await bot.telegram.sendMessage(
       config.telegram.chatId,
-      data.message + data.image + 'sender:' + data.email
-        ? data.email
-        : data.telegram,
+      `Message: ${data.message}, Image: ${data.image ?? ''},  Sender Email: ${
+        data.email ?? ''
+      }, Sender Telegram: ${data.telegram ?? ''}`,
     );
     return await this.controller.store.create(' ', data);
   }