[Dashboard] Adding telegram field to support ticket creation (#6754)

Author: Joe-Thirdweb

apps/dashboard/src/app/(dashboard)/support/create-ticket/components/create-ticket.action.ts

@@ -47,9 +47,17 @@ function prepareEmailBody(props: {
   name: string;
   extraInfoInput: Record<string, string>;
   walletAddress: string;
+  telegramHandle: string;
 }) {
-  const { extraInfoInput, email, walletAddress, product, name, markdownInput } =
-    props;
+  const {
+    extraInfoInput,
+    email,
+    walletAddress,
+    product,
+    name,
+    markdownInput,
+    telegramHandle,
+  } = props;
   // Update `markdown` to include the infos from the form
   const extraInfo = Object.keys(extraInfoInput)
     .filter((key) => key.startsWith("extraInfo_"))
@@ -62,6 +70,7 @@ function prepareEmailBody(props: {
     .join("");
   const markdown = `# Email: ${email}
   # Name: ${name}
+  # Telegram: ${telegramHandle}
   # Wallet address: ${walletAddress}
   # Product: ${product}
   ${extraInfo}
@@ -110,6 +119,7 @@ export async function createTicketAction(
 
   const product = formData.get("product")?.toString() || "";
   const problemArea = formData.get("extraInfo_Problem_Area")?.toString() || "";
+  const telegramHandle = formData.get("telegram")?.toString() || "";
 
   const title = prepareEmailTitle(
     product,
@@ -130,6 +140,7 @@ export async function createTicketAction(
     name: account.name || "",
     extraInfoInput: keyVal,
     walletAddress: walletAddress,
+    telegramHandle: telegramHandle,
   });
 
   const content = {

apps/dashboard/src/app/(dashboard)/support/create-ticket/components/create-ticket.client.tsx

@@ -5,6 +5,7 @@ import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { cn } from "@/lib/utils";
 import { SupportForm_SelectInput } from "components/help/contact-forms/shared/SupportForm_SelectInput";
+import { SupportForm_TelegramInput } from "components/help/contact-forms/shared/SupportForm_TelegramInput";
 import dynamic from "next/dynamic";
 import {
   type ReactElement,
@@ -155,6 +156,8 @@ export function CreateTicket(props: {
             />
           </div>
 
+          <SupportForm_TelegramInput />
+
           <ProductAreaSelection
             productLabel={productLabel}
             setProductLabel={setProductLabel}

apps/dashboard/src/components/help/contact-forms/shared/SupportForm_TelegramInput.tsx

@@ -0,0 +1,27 @@
+import { Label } from "@/components/ui/label";
+
+type Props = {
+  placeholder?: string;
+};
+
+const defaultDescription = "@YourHandle";
+
+export const SupportForm_TelegramInput = (props: Props) => {
+  return (
+    <div className="flex flex-col items-start gap-2 bg-[#0a0a0a]">
+      <Label htmlFor="telegram" className="relative">
+        Telegram
+        <span className="-top-1.5 -right-2 absolute text-destructive">•</span>
+      </Label>
+
+      <input
+        className="flex h-10 w-full items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1"
+        type="text"
+        name="telegram"
+        placeholder={props.placeholder ?? defaultDescription}
+        autoComplete="off"
+        maxLength={50}
+      />
+    </div>
+  );
+};