From d7cdf938e787b5e3b50b8ce645c8310942814ad5 Mon Sep 17 00:00:00 2001
From: greatsamist <ifegbenga@gmail.com>
Date: Thu, 8 Aug 2024 10:06:30 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix=20support=20form=20image=20b?=
 =?UTF-8?q?ug=20and=20telegram=20bot?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/components/misc/Support/SupportForm.tsx     |  4 ++--
 packages/app/components/misc/Support/index.tsx      | 13 ++++++++-----
 packages/app/components/misc/form/imageUpload.tsx   |  7 +++++--
 packages/app/lib/actions/support.ts                 |  9 +++++++++
 packages/app/lib/services/supportService.tsx        |  8 +++++++-
 packages/server/src/services/support.service.ts     |  8 ++++----
 6 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/packages/app/components/misc/Support/SupportForm.tsx b/packages/app/components/misc/Support/SupportForm.tsx
index 4a96c9ac4..630c991fe 100644
--- 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
index 497a5fe28..ec57c0a4b 100644
--- a/packages/app/components/misc/Support/index.tsx
+++ b/packages/app/components/misc/Support/index.tsx
@@ -7,10 +7,8 @@ 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,
@@ -18,11 +16,14 @@ import {
   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
index e279705d7..d0226f3a7 100644
--- 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
index 020658c52..f05ef9d22 100644
--- 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
index 6c8ef1a23..636100918 100644
--- 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
index 7c08a30db..e1011ac4d 100644
--- 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);
   }