Review fixes: add email and telegram, move to home navbar

streamethorg · Feb 29, 2024 · 8b59612 · 8b59612
1 parent 026215c
commit 8b59612
Show file tree

Hide file tree

Showing 12 changed files with 173 additions and 72 deletions.
diff --git a/packages/app/app/layout.tsx b/packages/app/app/layout.tsx
@@ -8,7 +8,6 @@ import { TopNavbarContextProvider } from '@/lib/context/TopNavbarContext'
 import { generalMetadata } from '@/lib/utils/metadata'
 import { Toaster } from '@/components/ui/sonner'
 import CookieBanner from '@/components/misc/CookieBanner'
-import Support from '@/components/misc/Support'
 
 const ubuntu = Ubuntu({
   weight: ['400', '500', '700'],
@@ -37,7 +36,7 @@ export default function RootLayout({
               <ModalContextProvider>
                 <TopNavbarContextProvider>
                   {children}
-                  <Support />
+
                   <div className="fixed bottom-4 left-4 z-50 mr-4">
                     <CookieBanner />
                   </div>

diff --git a/packages/app/components/Layout/HomePageNavbar.tsx b/packages/app/components/Layout/HomePageNavbar.tsx
@@ -13,6 +13,7 @@ import { useSIWE } from 'connectkit'
 import useUserData from '@/lib/hooks/useUserData'
 import SwitchOrganization from '@/app/studio/[organization]/components/SwitchOrganization'
 import { IExtendedOrganization } from '@/lib/types'
+import Support from '../misc/Support'
 const getPages = (
   pages: Page[],
   isSignedIn: boolean,
@@ -124,6 +125,7 @@ const MobileNavBar = ({
             </button>
           )}
         </div>
+        <Support />
         {menuVisible && (
           <Navbar
             pages={getPages(
@@ -166,7 +168,7 @@ const PCNavBar = ({
       <div className="flex flex-grow justify-center items-center">
         {showSearchBar && <SearchBar />}
       </div>
-
+      <Support />
       <Navbar
         pages={getPages(
           pages,

diff --git a/packages/app/components/misc/InfoHoverCard.tsx b/packages/app/components/misc/InfoHoverCard.tsx
@@ -3,23 +3,36 @@ import {
   HoverCardContent,
   HoverCardTrigger,
 } from '@/components/ui/hover-card'
-import { Info } from 'lucide-react'
+import { Info, LucideProps } from 'lucide-react'
+import { ForwardRefExoticComponent } from 'react'
+
+type IconType = ForwardRefExoticComponent<LucideProps> & {
+  displayName?: string
+}
 
 const InfoHoverCard = ({
   title,
   description,
   size = 24,
   stroke = 2,
+  Icon = Info,
+  iconClassName,
 }: {
   title: string
   description: string
   size?: number
   stroke?: number
+  Icon?: IconType
+  iconClassName?: string
 }) => {
   return (
     <HoverCard>
       <HoverCardTrigger asChild>
-        <Info size={size} strokeWidth={stroke} />
+        <Icon
+          className={iconClassName}
+          size={size}
+          strokeWidth={stroke}
+        />
       </HoverCardTrigger>
       <HoverCardContent className="w-80">
         <div className="flex justify-between space-x-4">

diff --git a/packages/app/components/misc/Support/SupportForm.tsx b/packages/app/components/misc/Support/SupportForm.tsx
@@ -11,6 +11,8 @@ import { Textarea } from '../../ui/textarea'
 import { Button } from '../../ui/button'
 import { Loader2 } from 'lucide-react'
 import { UseFormReturn } from 'react-hook-form'
+import { Input } from '@/components/ui/input'
+import { getFormSubmitStatus } from '@/lib/utils/utils'
 
 const SupportForm = ({
   form,
@@ -20,14 +22,16 @@ const SupportForm = ({
 }: {
   form: UseFormReturn<{
     message: string
+    telegram?: string
+    email?: string
   }>
   isLoading: boolean
   onSubmit: (values: { message: string }) => void
   handleClose: () => void
 }) => {
   return (
-    <div className="w-[250px]">
-      <h2 className="pb-4 font-bold">Write to us</h2>
+    <div>
+      <h2 className="pb-2 pt-3 font-bold">Send a support ticket</h2>
       <Form {...form}>
         <form
           onError={(errors) => {
@@ -40,7 +44,9 @@ const SupportForm = ({
             name="message"
             render={({ field }) => (
               <FormItem>
-                <FormLabel className="">Message</FormLabel>
+                <FormLabel required className="">
+                  Message
+                </FormLabel>
                 <FormControl>
                   <Textarea
                     placeholder="Describe the bug here"
@@ -52,14 +58,46 @@ const SupportForm = ({
             )}
           />
 
-          <div className="flex flex-row justify-between">
+          <FormField
+            control={form.control}
+            name="telegram"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="">Telegram Id</FormLabel>
+                <FormControl>
+                  <Input placeholder="telegram Id" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="email"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="">Email</FormLabel>
+                <FormControl>
+                  <Input placeholder="email" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <div className="flex gap-10 flex-row justify-between">
             <Button
+              className="w-full"
               onClick={handleClose}
               type="button"
               variant={'outline'}>
               Cancel
             </Button>
-            <Button type="submit">
+            <Button
+              className="w-full"
+              type="submit"
+              disabled={getFormSubmitStatus(form)}>
               {isLoading ? (
                 <>
                   <Loader2 className="mr-2 h-4 w-4 animate-spin" />{' '}

diff --git a/packages/app/components/misc/Support/index.tsx b/packages/app/components/misc/Support/index.tsx
@@ -8,24 +8,31 @@ 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 { ConnectWalletButton } from '../ConnectWalletButton'
-import useClickOutside from '@/lib/hooks/useClickOutside'
+import {
+  Credenza,
+  CredenzaContent,
+  CredenzaTitle,
+  CredenzaTrigger,
+} from '@/components/ui/crezenda'
+import InfoHoverCard from '../InfoHoverCard'
 
 const Support = () => {
-  const [isSupportClicked, setIsSupportClicked] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
   const [messageSent, setMessageSent] = useState(false)
   const { isSignedIn } = useSIWE()
+  const [open, setOpen] = useState(false)
   const form = useForm<z.infer<typeof supportSchema>>({
     resolver: zodResolver(supportSchema),
     defaultValues: {
       message: '',
+      telegram: '',
+      email: '',
     },
   })
-  const supportRef = useRef(null)
+
   function onSubmit(values: z.infer<typeof supportSchema>) {
     setIsLoading(true)
     if (!isSignedIn) {
@@ -47,60 +54,67 @@ const Support = () => {
         setIsLoading(false)
       })
   }
-  useClickOutside(supportRef, () => setIsSupportClicked(false))
+
   const handleClose = () => {
     setMessageSent(false)
-    setIsSupportClicked(false)
+    setOpen(false)
   }
   return (
-    <div
-      ref={supportRef}
-      className="fixed right-2 top-36 bg-white cursor-pointer p-4">
-      {!isSupportClicked && (
-        <div onClick={() => setIsSupportClicked(true)}>
-          <Bug />
-        </div>
-      )}
+    <Credenza open={open} onOpenChange={setOpen}>
+      <CredenzaContent className="!z-50">
+        <CredenzaTitle>Bug/Content Error Report</CredenzaTitle>
+        <div>
+          <p className="pb-2">
+            Feel free to become a part of our{' '}
+            <a
+              className="text-primary font-semibold"
+              href="https://t.me/+p7TgdE06G-4zZDU0"
+              target="_blank"
+              rel="noopener noopener">
+              Telegram support
+            </a>{' '}
+            channel to stay informed about ticket updates, or
+            alternatively, you can raise an issue on{' '}
+            <a
+              className="text-primary font-semibold"
+              href="https://github.com/streamethorg/streameth-platform/issues"
+              target="_blank"
+              rel="noopener noopener">
+              GitHub.
+            </a>
+          </p>
 
-      {isSupportClicked &&
-        (!isSignedIn ? (
-          <div>
-            <p className="py-2">Sign in to send us a message</p>
-            <ConnectWalletButton />
-          </div>
-        ) : messageSent ? (
-          <div className="w-[250px]">
-            <p className="font-bold pb-2">Message sent 🎉!!</p>
-            <p className="pb-2">
-              Feel free to become a part of our{' '}
-              <a
-                className="text-primary font-semibold"
-                href="https://t.me/+p7TgdE06G-4zZDU0"
-                target="_blank"
-                rel="noopener noopener">
-                Telegram support
-              </a>{' '}
-              channel to stay informed about ticket updates, or
-              alternatively, you can raise an issue on{' '}
-              <a
-                className="text-primary font-semibold"
-                href="https://github.com/streamethorg/streameth-platform/issues"
-                target="_blank"
-                rel="noopener noopener">
-                GitHub.
-              </a>
-            </p>
-            <Button onClick={handleClose}>Close</Button>
-          </div>
-        ) : (
-          <SupportForm
-            form={form}
-            onSubmit={onSubmit}
-            isLoading={isLoading}
-            handleClose={handleClose}
+          {!isSignedIn ? (
+            <div>
+              <p className="py-2">Sign in to send us a message</p>
+              <ConnectWalletButton />
+            </div>
+          ) : messageSent ? (
+            <div>
+              <p className="font-bold pb-2">Message sent 🎉!!</p>
+              <Button onClick={handleClose}>Close</Button>
+            </div>
+          ) : (
+            <SupportForm
+              form={form}
+              onSubmit={onSubmit}
+              isLoading={isLoading}
+              handleClose={handleClose}
+            />
+          )}
+        </div>
+      </CredenzaContent>
+      <CredenzaTrigger>
+        <div className="bg-red-500 cursor-pointer p-1 mr-2 lg:ml-auto lg:p-2 rounded-lg">
+          <InfoHoverCard
+            Icon={Bug}
+            iconClassName="w-4 h-4 lg:w-5 lg:h-5"
+            title="Bug/Content error report"
+            description="Directly send us a support ticket or report content error"
           />
-        ))}
-    </div>
+        </div>
+      </CredenzaTrigger>
+    </Credenza>
   )
 }
 

diff --git a/packages/app/components/ui/form.tsx b/packages/app/components/ui/form.tsx
@@ -90,17 +90,22 @@ FormItem.displayName = 'FormItem'
 
 const FormLabel = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...props }, ref) => {
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {
+    required?: boolean
+  }
+>(({ className, required, ...props }, ref) => {
   const { error, formItemId } = useFormField()
 
   return (
-    <Label
-      ref={ref}
-      className={cn(error && '  text-destructive', className)}
-      htmlFor={formItemId}
-      {...props}
-    />
+    <div>
+      <Label
+        ref={ref}
+        className={cn(error && '  text-destructive', className)}
+        htmlFor={formItemId}
+        {...props}
+      />
+      {required && <span className="text-red-500">*</span>}
+    </div>
   )
 })
 FormLabel.displayName = 'FormLabel'

diff --git a/packages/app/lib/schema.ts b/packages/app/lib/schema.ts
@@ -95,9 +95,11 @@ export const sessionSchema = z.object({
 export const organizationSchema = z.object({
   name: z.string().min(1, 'Name is required'),
   logo: z.string().min(1, 'Logo is required'),
-  email: z.string(),
+  email: z.string().email(),
 })
 
 export const supportSchema = z.object({
   message: z.string().min(1, 'Message is required'),
+  telegram: z.string().optional(),
+  email: z.string().optional(),
 })
diff --git a/packages/server/src/dtos/support/create-ticket.dto.ts b/packages/server/src/dtos/support/create-ticket.dto.ts
@@ -1,8 +1,16 @@
 import { ISupport } from '@interfaces/support.interface';
-import { IsNotEmpty, IsString } from 'class-validator';
+import { IsNotEmpty, IsOptional, IsString } from 'class-validator';
 
 export class CreateSupportTicketDto implements ISupport {
   @IsNotEmpty()
   @IsString()
   message!: string;
+
+  @IsOptional()
+  @IsString()
+  telegram?: string;
+
+  @IsOptional()
+  @IsString()
+  email?: string;
 }
diff --git a/packages/server/src/interfaces/support.interface.ts b/packages/server/src/interfaces/support.interface.ts
@@ -2,6 +2,8 @@ import { Document, Types } from 'mongoose';
 
 export interface ISupport {
   message: string;
+  telegram?: string;
+  email?: string;
 }
 
 export interface ISupportModel extends ISupport, Document {}