fix

Author: Yash094

apps/dashboard/src/app/(app)/(dashboard)/support/page.tsx

@@ -71,7 +71,7 @@ export default async function SupportPage() {
   ]);
 
   const teams = await getTeams();
-  const team = teams?.[0];
+  const _teamId = teams?.[0]?.id ?? undefined;
 
   return (
     <main className="flex flex-col gap-12 pb-12">
@@ -92,7 +92,7 @@ export default async function SupportPage() {
               team.
             </p>
             <div className="mt-6 flex w-full flex-col items-center gap-3">
-              {team && (
+              {teams?.[0] && (
                 <CustomChatButton
                   authToken={authToken || undefined}
                   clientId={undefined}
@@ -102,7 +102,7 @@ export default async function SupportPage() {
                   label="Ask AI for support"
                   networks="all"
                   pageType="support"
-                  team={team}
+                  team={teams[0]}
                 />
               )}
 

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/SupportCasesClient.tsx

@@ -1,21 +1,156 @@
 "use client";
 
 import { format } from "date-fns";
+<<<<<<< HEAD
 import { ArrowRightIcon, BotIcon, SendIcon } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import type { SupportTicket } from "@/api/support";
 import { getSupportTicket, sendMessageToTicket } from "@/api/support";
+=======
+import {
+  ArrowRightIcon,
+  BotIcon,
+  LoaderCircleIcon,
+  SendIcon,
+} from "lucide-react";
+import dynamic from "next/dynamic";
+import { useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
+import type { SupportTicket } from "@/api/support";
+import {
+  createSupportTicket,
+  getSupportTicket,
+  sendMessageToTicket,
+} from "@/api/support";
+>>>>>>> 59aaf21952093816decb52860e0d4524ad72d8a4
 import type { Team } from "@/api/team";
 import { MarkdownRenderer } from "@/components/blocks/markdown-renderer";
 import { Reasoning } from "@/components/chat/Reasoning";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+<<<<<<< HEAD
+=======
+import { Skeleton } from "@/components/ui/skeleton";
+>>>>>>> 59aaf21952093816decb52860e0d4524ad72d8a4
 import { Textarea } from "@/components/ui/textarea";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { SupportAIChatCard } from "./SupportAIChatCard";
 import { SupportTabs } from "./SupportTabs";
+<<<<<<< HEAD
 import { SupportTicketForm } from "./SupportTicketForm";
+=======
+import { SupportForm_SelectInput } from "./shared/SupportForm_SelectInput";
+
+// Dynamic imports for contact forms using named exports
+const ConnectSupportForm = dynamic(
+  () => import("./contact-forms/connect").then((mod) => mod.ConnectSupportForm),
+  {
+    loading: () => <Skeleton className="h-12" />,
+    ssr: false,
+  },
+);
+const EngineSupportForm = dynamic(
+  () => import("./contact-forms/engine").then((mod) => mod.EngineSupportForm),
+  {
+    loading: () => <Skeleton className="h-12" />,
+    ssr: false,
+  },
+);
+const ContractSupportForm = dynamic(
+  () =>
+    import("./contact-forms/contracts").then((mod) => mod.ContractSupportForm),
+  {
+    loading: () => <Skeleton className="h-12" />,
+    ssr: false,
+  },
+);
+const AccountSupportForm = dynamic(
+  () => import("./contact-forms/account").then((mod) => mod.AccountSupportForm),
+  {
+    loading: () => <Skeleton className="h-12" />,
+    ssr: false,
+  },
+);
+const OtherSupportForm = dynamic(
+  () => import("./contact-forms/other").then((mod) => mod.OtherSupportForm),
+  {
+    loading: () => <Skeleton className="h-12" />,
+    ssr: false,
+  },
+);
+const PaymentsSupportForm = dynamic(
+  () =>
+    import("./contact-forms/payments").then((mod) => mod.PaymentsSupportForm),
+  {
+    loading: () => <Skeleton className="h-12" />,
+    ssr: false,
+  },
+);
+const TokensMarketplaceSupportForm = dynamic(
+  () =>
+    import("./contact-forms/tokens-marketplace").then(
+      (mod) => mod.TokensMarketplaceSupportForm,
+    ),
+  {
+    loading: () => <Skeleton className="h-12" />,
+    ssr: false,
+  },
+);
+
+const productOptions = [
+  {
+    component: <ConnectSupportForm />,
+    label: "Wallets",
+  },
+  {
+    component: <EngineSupportForm />,
+    label: "Transactions",
+  },
+  {
+    component: <PaymentsSupportForm />,
+    label: "Payments",
+  },
+  {
+    component: <ContractSupportForm />,
+    label: "Contracts",
+  },
+  {
+    component: <TokensMarketplaceSupportForm />,
+    label: "Tokens / Marketplace",
+  },
+  {
+    component: <AccountSupportForm />,
+    label: "Account",
+  },
+  {
+    component: <OtherSupportForm />,
+    label: "Other",
+  },
+];
+
+function ProductAreaSelection(props: {
+  productLabel: string;
+  setProductLabel: (val: string) => void;
+}) {
+  const { productLabel, setProductLabel } = props;
+
+  return (
+    <div className="flex flex-col gap-6">
+      <SupportForm_SelectInput
+        formLabel="What do you need help with?"
+        name="product"
+        onValueChange={setProductLabel}
+        options={productOptions.map((o) => o.label)}
+        promptText="Brief description of your issue"
+        required={true}
+        value={productLabel}
+      />
+      {productOptions.find((o) => o.label === productLabel)?.component}
+    </div>
+  );
+}
+>>>>>>> 59aaf21952093816decb52860e0d4524ad72d8a4
 
 interface SupportCasesClientProps {
   tickets: SupportTicket[];
@@ -59,7 +194,13 @@ export default function SupportCasesClient({
   // Form states
   const [showCreateForm, setShowCreateForm] = useState(false);
   const [productLabel, setProductLabel] = useState("");
+<<<<<<< HEAD
   const [_isSubmittingForm, _setIsSubmittingFormm] = useState(false);
+=======
+  const [isSubmittingForm, setIsSubmittingForm] = useState(false);
+  const formRef = useRef<HTMLFormElement>(null);
+  const _formContainerRef = useRef<HTMLDivElement>(null);
+>>>>>>> 59aaf21952093816decb52860e0d4524ad72d8a4
 
   const selectedCase =
     selectedCaseDetails || tickets.find((c) => c.id === selectedCaseId);
@@ -160,6 +301,82 @@ export default function SupportCasesClient({
     }
   }, [showAIChat]);
 
+<<<<<<< HEAD
+=======
+  const handleFormSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!productLabel) {
+      toast.error("Please select what you need help with");
+      return;
+    }
+
+    if (!formRef.current) return;
+    const formData = new FormData(formRef.current);
+    const description = formData.get("markdown") as string;
+
+    if (!description?.trim()) {
+      toast.error("Please provide a description");
+      return;
+    }
+
+    setIsSubmittingForm(true);
+
+    try {
+      // Get all extra fields from the form
+      const extraFields = Array.from(formData.entries()).filter(([key]) =>
+        key.startsWith("extraInfo_"),
+      );
+
+      // Format the message
+      let formattedMessage = `Email: ${String(team.billingEmail ?? "-")}\nName: ${String(team.name ?? "-")}\nProduct: ${String(productLabel ?? "-")}`;
+
+      // Add all extra fields above the message
+      if (extraFields.length > 0) {
+        extraFields.forEach(([key, value]) => {
+          if (value) {
+            const fieldName = key.replace("extraInfo_", "").replace(/_/g, " ");
+            formattedMessage += `\n${fieldName}: ${String(value)}`;
+          }
+        });
+      }
+
+      formattedMessage += `\nMessage:\n${String(description ?? "-")}`;
+
+      if (conversationId) {
+        formattedMessage += `\n\n---\nAI Conversation ID: ${conversationId}`;
+      }
+
+      await createSupportTicket({
+        message: formattedMessage,
+        teamSlug: team.slug,
+        title: `${productLabel} Issue - ${team.billingEmail} (${team.billingPlan})`,
+      });
+
+      // Add success message to chat
+      const successMsg = {
+        content:
+          "Great! Your support case has been created successfully. Our technical team will review it and get back to you soon. You can continue chatting with me if you have any other questions.",
+        id: Date.now(),
+        isUser: false,
+        timestamp: new Date().toISOString(),
+        isSuccessMessage: true,
+      };
+
+      setChatMessages((msgs) => [...msgs, successMsg]);
+      setShowCreateForm(false);
+      setProductLabel("");
+
+      toast.success("Support ticket created successfully!");
+    } catch (error) {
+      console.error("Error creating support ticket:", error);
+      toast.error("Failed to create support ticket. Please try again.");
+    } finally {
+      setIsSubmittingForm(false);
+    }
+  };
+
+>>>>>>> 59aaf21952093816decb52860e0d4524ad72d8a4
   const handleSelectCase = async (ticketId: string) => {
     setSelectedCaseId(ticketId);
     setSelectedCaseDetails(null);
@@ -577,6 +794,7 @@ export default function SupportCasesClient({
                               </p>
                             </div>
 
+<<<<<<< HEAD
                             <SupportTicketForm
                               team={team}
                               productLabel={productLabel}
@@ -597,6 +815,47 @@ export default function SupportCasesClient({
                                 ]);
                               }}
                             />
+=======
+                            <form
+                              onSubmit={handleFormSubmit}
+                              ref={formRef}
+                              className="space-y-4"
+                            >
+                              <ProductAreaSelection
+                                productLabel={productLabel}
+                                setProductLabel={setProductLabel}
+                              />
+
+                              {/* Submit Buttons */}
+                              <div className="flex justify-end gap-3 pt-2">
+                                <Button
+                                  type="button"
+                                  variant="outline"
+                                  onClick={() => setShowCreateForm(false)}
+                                  className="border-[#333333] bg-[#0A0A0A] text-white hover:bg-[#333333] hover:text-white"
+                                  size="sm"
+                                  disabled={isSubmittingForm}
+                                >
+                                  Cancel
+                                </Button>
+                                <Button
+                                  type="submit"
+                                  className="bg-[#2663EB] hover:bg-[#2663EB]/80 text-white transition-opacity"
+                                  size="sm"
+                                  disabled={isSubmittingForm}
+                                >
+                                  {isSubmittingForm ? (
+                                    <>
+                                      <LoaderCircleIcon className="animate-spin w-4 h-4 mr-2 inline" />
+                                      Creating...
+                                    </>
+                                  ) : (
+                                    "Create Support Case"
+                                  )}
+                                </Button>
+                              </div>
+                            </form>
+>>>>>>> 59aaf21952093816decb52860e0d4524ad72d8a4
                           </div>
                         )}
                     </div>