From c95aa6a7064fea2cd8fe4f19433ae2b4d667d2f9 Mon Sep 17 00:00:00 2001 From: rongquan1 Date: Thu, 16 Oct 2025 10:22:37 +0800 Subject: [PATCH 1/2] feat: support page --- package.json | 2 +- packages/temp-trustvc-website/src/App.tsx | 5 + .../src/components/Navigation.tsx | 16 +- .../src/pages/ErrorPage.tsx | 39 ++ .../src/pages/SuccessPage.tsx | 52 ++ .../src/pages/Support.tsx | 506 ++++++++++++------ 6 files changed, 451 insertions(+), 169 deletions(-) create mode 100644 packages/temp-trustvc-website/src/pages/ErrorPage.tsx create mode 100644 packages/temp-trustvc-website/src/pages/SuccessPage.tsx diff --git a/package.json b/package.json index ef0b03e..1bf665e 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "copy-files": "bash ./scripts/copy-files.sh", "build-website": "nx run @trustvc/temp-trustvc-website:build && npm run copy-files", "clean": "nx clear-cache && nx run-many --target=clean", - "dev": "nx run-many --target=dev", + "dev": "nx run-many --target=dev --exclude=@trustvc/w3c-cli", "precommit": "lint-staged", "cli:install": "npm install --prefix apps/w3c-cli", "cli:dev": "npm run dev --prefix apps/w3c-cli", diff --git a/packages/temp-trustvc-website/src/App.tsx b/packages/temp-trustvc-website/src/App.tsx index c77a554..eca22ec 100644 --- a/packages/temp-trustvc-website/src/App.tsx +++ b/packages/temp-trustvc-website/src/App.tsx @@ -8,6 +8,8 @@ import Navigation from '@/components/Navigation'; import Index from './pages/Index'; import Gallery from './pages/Gallery'; import Support from './pages/Support'; +import SuccessPage from './pages/SuccessPage'; +import ErrorPage from './pages/ErrorPage'; import News from './pages/News'; import Contact from './pages/Contact'; import TradeTrust from './pages/TradeTrust'; @@ -26,6 +28,9 @@ const App = () => ( } /> + } /> + } /> + } /> {/* } /> */} {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */} } /> diff --git a/packages/temp-trustvc-website/src/components/Navigation.tsx b/packages/temp-trustvc-website/src/components/Navigation.tsx index ce5d5d6..3f8d56a 100644 --- a/packages/temp-trustvc-website/src/components/Navigation.tsx +++ b/packages/temp-trustvc-website/src/components/Navigation.tsx @@ -49,21 +49,19 @@ const Navigation = () => { {/* Navigation Links */} - {/*
+ */} +
{/* Right Side Items */}
diff --git a/packages/temp-trustvc-website/src/pages/ErrorPage.tsx b/packages/temp-trustvc-website/src/pages/ErrorPage.tsx new file mode 100644 index 0000000..0e7a3c7 --- /dev/null +++ b/packages/temp-trustvc-website/src/pages/ErrorPage.tsx @@ -0,0 +1,39 @@ +import { Button } from "@/components/ui/button" +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" +import { useNavigate } from "react-router-dom" + +export default function ErrorPage() { + const navigate = useNavigate() + + return ( +
+
+
+

+ Submission Failed +

+

+ There was an error submitting your support request. Please try again. +

+
+ + + + Error + + Something went wrong. Please try submitting your request again. + + + + + + +
+
+ ) +} diff --git a/packages/temp-trustvc-website/src/pages/SuccessPage.tsx b/packages/temp-trustvc-website/src/pages/SuccessPage.tsx new file mode 100644 index 0000000..5dae843 --- /dev/null +++ b/packages/temp-trustvc-website/src/pages/SuccessPage.tsx @@ -0,0 +1,52 @@ +import { Button } from "@/components/ui/button" +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" +import { useNavigate, useLocation } from "react-router-dom" + +export default function SuccessPage() { + const navigate = useNavigate() + const location = useLocation() + const { ticketId } = location.state || {} + + return ( +
+
+
+

+ Thank You! +

+

+ {ticketId + ? `Your support ticket ${ticketId} has been created successfully. We'll get back to you soon.` + : "Your support request has been submitted successfully. We'll get back to you soon." + } +

+
+ + + + Submission Successful + + Thank you for reaching out to us. + + + + {ticketId && ( +

+ Ticket ID: {ticketId} +

+ )} +

+ You will receive an email confirmation shortly. +

+ + + +
+
+ ) +} diff --git a/packages/temp-trustvc-website/src/pages/Support.tsx b/packages/temp-trustvc-website/src/pages/Support.tsx index b698b47..95dc61f 100644 --- a/packages/temp-trustvc-website/src/pages/Support.tsx +++ b/packages/temp-trustvc-website/src/pages/Support.tsx @@ -1,183 +1,371 @@ -import { Book, Code, MessageCircle, FileText, ExternalLink, ChevronRight } from "lucide-react"; -import { Button } from "@/components/ui/button"; -import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; -import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; +import { Checkbox } from "@/components/ui/checkbox" +import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, } from "@/components/ui/form" +import { Input } from "@/components/ui/input" +import { Textarea } from "@/components/ui/textarea" +import { Button } from "@/components/ui/button" +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" +import { useForm } from "react-hook-form" +import { zodResolver } from "@hookform/resolvers/zod" +import * as z from "zod" +import { toast } from "@/components/ui/sonner" +import { useRef } from "react" +import { useNavigate } from "react-router-dom" +import { useState } from "react" +import { Trash2 } from "lucide-react" -const documentationSections = [ - { - title: "Getting Started", - description: "Quick start guides and basic concepts", - icon: Book, - items: [ - "Installation & Setup", - "Your First Document", - "Basic Verification", - "Configuration Guide" - ] - }, - { - title: "API Reference", - description: "Complete API documentation", - icon: Code, - items: [ - "Authentication", - "Document Creation", - "Verification Methods", - "Webhook Events" - ] - }, - { - title: "SDKs & Libraries", - description: "Language-specific implementations", - icon: FileText, - items: [ - "JavaScript/TypeScript", - "Python SDK", - "Java Library", - "REST API" - ] +const formSchema = z.object({ + email: z.string().email({ message: "Please enter a valid email address." }).min(1, { message: "Email is required." }), + summary: z.string().min(1, { message: "Summary is required." }), + description: z.string().optional(), + whereEncountered: z.array(z.string()).optional(), +}) + +const whereOptions = [ + "TradeTrust Reference Website", + "TradeTrust Documentation Website", + "TradeTrust Gallery", + "TradeTrust Library", + "TrustVC Website", + "OpenCerts Website", + "TrustVC SDK", + "Other" +] + +export default function Support() { + const form = useForm>({ + resolver: zodResolver(formSchema), + defaultValues: { + email: "", + summary: "", + description: "", + whereEncountered: [], + }, + }) + + const fileRef = useRef(null) + const navigate = useNavigate() + const [selectedFiles, setSelectedFiles] = useState([]) + + const handleFileChange = (event: React.ChangeEvent) => { + const files = event.target.files + if (files) { + const newFiles = Array.from(files) + // Append new files to existing ones instead of replacing + setSelectedFiles(prevFiles => [...prevFiles, ...newFiles]) + + // Clear the input so the same file can be selected again if needed + if (fileRef.current) { + fileRef.current.value = '' + } + } + } + + const removeFile = (index: number) => { + const newFiles = selectedFiles.filter((_, i) => i !== index) + setSelectedFiles(newFiles) + + // Update the file input + if (fileRef.current) { + const dt = new DataTransfer() + newFiles.forEach(file => dt.items.add(file)) + fileRef.current.files = dt.files + } } -]; -const communityResources = [ - { - title: "GitHub Repository", - description: "Source code, issues, and contributions", - icon: Code, - link: "https://github.com/trustvc" - }, - { - title: "Community Forum", - description: "Ask questions and get help from the community", - icon: MessageCircle, - link: "#" - }, - { - title: "Developer Blog", - description: "Latest updates, tutorials, and best practices", - icon: FileText, - link: "#" + async function onSubmit(values: z.infer) { + const { email, summary, description, whereEncountered } = values; + + const fullDescription = whereEncountered && whereEncountered.length > 0 + ? `${description || ''}\n\nWhere encountered: ${whereEncountered.join(', ')}` + : description || ''; + + try { + // Simulate form submission for demo purposes + // In production, this would submit to your actual API + + // Show loading state + toast.success('Submitting your request...'); + + // Simulate API delay + await new Promise(resolve => setTimeout(resolve, 1000)); + + // Generate a mock ticket ID + const mockTicketId = `TRUST-${Date.now().toString().slice(-6)}`; + + // Navigate to success page with mock ticket ID + toast.success('Ticket created successfully!'); + navigate("/support/success", { state: { ticketId: mockTicketId } }); + + /* + // Original API submission code (commented out for demo) + const formData = new FormData(); + formData.append('email', email); + formData.append('summary', summary); + formData.append('description', fullDescription); + + const files = fileRef.current?.files; + if (files) { + for (let i = 0; i < files.length; i++) { + formData.append('attachments', files[i]); + } + } + + const response = await fetch('http://localhost:3001/api/create-ticket', { + method: 'POST', + body: formData, + }); + + const data = await response.json(); + + if (response.ok && data.success) { + toast.success(data.message || 'Ticket created successfully!'); + navigate("/support/success", { state: { ticketId: data.ticketId } }); + } else { + const errorMessage = data.details || data.error || 'Failed to create ticket'; + toast.error(errorMessage); + navigate("/support/error"); + } + */ + } catch (error) { + console.error('Submission error:', error); + toast.error('Network error. Please try again.'); + // Navigate to error page when submission fails + navigate("/support/error"); + } } -]; -const Support = () => { return (
- {/* Header */}

- TrustVC{" "} + Support{" "} - Documentation + Request

- Everything you need to integrate TrustVC into your applications. - Comprehensive guides, API references, and community resources. + Get help with TrustVC products and services. + We'll get back to you as soon.

- - - Documentation - Tutorials - Community - + +
+ + + Submit a Request + + Fill out the form below to create a new support ticket. + + + +
+ ( + + Email * + + + + + + )} + /> + + ( + + Summary * + + + + + + )} + /> - -
- {documentationSections.map((section) => ( - - -
- -
- {section.title} - {section.description} - - -
    - {section.items.map((item, index) => ( -
  • - - {item} -
    • - ))} -
- - - ))} -
- + ( + + Description + +