From 28ea9a994bb06766a3b453d659afc43f0ace0ce9 Mon Sep 17 00:00:00 2001
From: 1sraeliteX <dotsevn7@gmail.com>
Date: Fri, 29 May 2026 19:22:08 +0100
Subject: [PATCH] feat(profile): add Customer Support tab to Profile page
 (#467)

- Add CustomerSupportPanel component with three sections:
  - Contact options (email, live chat, phone) as accessible links
  - FAQ accordion with 5 common questions (keyboard accessible)
  - Contact form with subject + message fields and success state
- Extend ProfileTabId union type to include 'support'
- Add supportFaqs and supportContactOptions data to profile-data.ts
- Lazy-load CustomerSupportPanel via next/dynamic with skeleton fallback
- Full ARIA compliance: role=tabpanel, aria-expanded, aria-controls,
  aria-labelledby, role=status, aria-live, role=alert
- Follows existing panel patterns (SettingsPanel, AchievementsPanel)
---
 .../components/CustomerSupportPanel.tsx       | 214 ++++++++++++++++++
 src/app/profile/components/ProfileTabs.tsx    |   5 +
 src/app/profile/profile-data.ts               |  80 ++++++-
 3 files changed, 298 insertions(+), 1 deletion(-)
 create mode 100644 src/app/profile/components/CustomerSupportPanel.tsx

diff --git a/src/app/profile/components/CustomerSupportPanel.tsx b/src/app/profile/components/CustomerSupportPanel.tsx
new file mode 100644
index 00000000..a812d3cd
--- /dev/null
+++ b/src/app/profile/components/CustomerSupportPanel.tsx
@@ -0,0 +1,214 @@
+'use client';
+
+import { memo, useCallback, useState } from 'react';
+import { ChevronDown, ChevronUp, Mail, MessageCircle, Phone } from 'lucide-react';
+import { supportFaqs, supportContactOptions } from '../profile-data';
+
+// ── FAQ Accordion Item ────────────────────────────────────────────────────────
+
+interface FaqItemProps {
+  id: string;
+  question: string;
+  answer: string;
+}
+
+function FaqItem({ id, question, answer }: FaqItemProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const headingId = `faq-heading-${id}`;
+  const panelId = `faq-panel-${id}`;
+
+  const toggle = useCallback(() => setIsOpen((prev) => !prev), []);
+
+  return (
+    <div className="border border-gray-200 rounded-lg overflow-hidden">
+      <h3>
+        <button
+          type="button"
+          id={headingId}
+          aria-expanded={isOpen}
+          aria-controls={panelId}
+          onClick={toggle}
+          className="flex w-full items-center justify-between px-4 py-4 text-left font-medium text-gray-900 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500 transition-colors"
+        >
+          <span>{question}</span>
+          {isOpen ? (
+            <ChevronUp size={18} className="shrink-0 text-gray-500" aria-hidden="true" />
+          ) : (
+            <ChevronDown size={18} className="shrink-0 text-gray-500" aria-hidden="true" />
+          )}
+        </button>
+      </h3>
+
+      <div
+        id={panelId}
+        role="region"
+        aria-labelledby={headingId}
+        hidden={!isOpen}
+        className="px-4 pb-4 text-sm text-gray-600 leading-relaxed"
+      >
+        {answer}
+      </div>
+    </div>
+  );
+}
+
+// ── Contact Form ──────────────────────────────────────────────────────────────
+
+type SubmitState = 'idle' | 'submitting' | 'success' | 'error';
+
+function ContactForm() {
+  const [submitState, setSubmitState] = useState<SubmitState>('idle');
+  const [subject, setSubject] = useState('');
+  const [message, setMessage] = useState('');
+
+  const handleSubmit = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      setSubmitState('submitting');
+
+      // Simulated async submission — replace with real API call
+      await new Promise<void>((resolve) => setTimeout(resolve, 1200));
+
+      setSubmitState('success');
+      setSubject('');
+      setMessage('');
+    },
+    [],
+  );
+
+  if (submitState === 'success') {
+    return (
+      <div
+        role="status"
+        aria-live="polite"
+        className="rounded-lg bg-green-50 border border-green-200 p-6 text-center"
+      >
+        <p className="text-green-800 font-medium">
+          ✅ Your message has been sent. We&apos;ll get back to you within 24 hours.
+        </p>
+        <button
+          type="button"
+          onClick={() => setSubmitState('idle')}
+          className="mt-4 text-sm text-green-700 underline hover:text-green-900 focus:outline-none focus:ring-2 focus:ring-green-500 rounded"
+        >
+          Send another message
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit} noValidate className="space-y-4">
+      <div>
+        <label htmlFor="support-subject" className="mb-1 block text-sm font-medium text-gray-700">
+          Subject
+        </label>
+        <input
+          id="support-subject"
+          type="text"
+          required
+          value={subject}
+          onChange={(e) => setSubject(e.target.value)}
+          placeholder="Briefly describe your issue"
+          className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-transparent focus:ring-2 focus:ring-blue-500"
+        />
+      </div>
+
+      <div>
+        <label htmlFor="support-message" className="mb-1 block text-sm font-medium text-gray-700">
+          Message
+        </label>
+        <textarea
+          id="support-message"
+          required
+          rows={5}
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          placeholder="Describe your issue in detail…"
+          className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-transparent focus:ring-2 focus:ring-blue-500 resize-none"
+        />
+      </div>
+
+      {submitState === 'error' && (
+        <p role="alert" className="text-sm text-red-600">
+          Something went wrong. Please try again.
+        </p>
+      )}
+
+      <button
+        type="submit"
+        disabled={submitState === 'submitting' || !subject.trim() || !message.trim()}
+        className="rounded-lg bg-blue-500 px-6 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+      >
+        {submitState === 'submitting' ? 'Sending…' : 'Send Message'}
+      </button>
+    </form>
+  );
+}
+
+// ── Contact Option Icons ──────────────────────────────────────────────────────
+
+const contactIcons = {
+  email: Mail,
+  chat: MessageCircle,
+  phone: Phone,
+} as const;
+
+// ── Main Panel ────────────────────────────────────────────────────────────────
+
+function CustomerSupportPanel() {
+  return (
+    <section
+      id="support-panel"
+      role="tabpanel"
+      aria-labelledby="support-tab"
+      className="space-y-8"
+    >
+      {/* Contact Options */}
+      <div className="rounded-lg bg-white p-6 shadow">
+        <h2 className="mb-6 text-xl font-semibold text-gray-900">Contact Us</h2>
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+          {supportContactOptions.map((option) => {
+            const Icon = contactIcons[option.icon as keyof typeof contactIcons] ?? Mail;
+            return (
+              <a
+                key={option.id}
+                href={option.href}
+                target={option.href.startsWith('http') ? '_blank' : undefined}
+                rel={option.href.startsWith('http') ? 'noopener noreferrer' : undefined}
+                className="flex flex-col items-center gap-2 rounded-lg border border-gray-200 p-4 text-center transition-colors hover:border-blue-300 hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                aria-label={option.ariaLabel}
+              >
+                <Icon size={24} className="text-blue-500" aria-hidden="true" />
+                <span className="font-medium text-gray-900">{option.label}</span>
+                <span className="text-xs text-gray-500">{option.description}</span>
+              </a>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* FAQ */}
+      <div className="rounded-lg bg-white p-6 shadow">
+        <h2 className="mb-6 text-xl font-semibold text-gray-900">Frequently Asked Questions</h2>
+        <div className="space-y-3">
+          {supportFaqs.map((faq) => (
+            <FaqItem key={faq.id} id={faq.id} question={faq.question} answer={faq.answer} />
+          ))}
+        </div>
+      </div>
+
+      {/* Contact Form */}
+      <div className="rounded-lg bg-white p-6 shadow">
+        <h2 className="mb-2 text-xl font-semibold text-gray-900">Send Us a Message</h2>
+        <p className="mb-6 text-sm text-gray-500">
+          Can&apos;t find what you&apos;re looking for? Fill out the form below and our support
+          team will respond within 24 hours.
+        </p>
+        <ContactForm />
+      </div>
+    </section>
+  );
+}
+
+export default memo(CustomerSupportPanel);
diff --git a/src/app/profile/components/ProfileTabs.tsx b/src/app/profile/components/ProfileTabs.tsx
index c5f8732b..4cfa3657 100644
--- a/src/app/profile/components/ProfileTabs.tsx
+++ b/src/app/profile/components/ProfileTabs.tsx
@@ -15,6 +15,10 @@ const AchievementsPanel = dynamic(() => import('./AchievementsPanel'), {
   loading: () => <ProfilePanelSkeleton label="achievements" />,
 });
 
+const CustomerSupportPanel = dynamic(() => import('./CustomerSupportPanel'), {
+  loading: () => <ProfilePanelSkeleton label="support" />,
+});
+
 export default function ProfileTabs() {
   const [activeTab, setActiveTab] = useState<ProfileTabId>('profile');
 
@@ -51,6 +55,7 @@ export default function ProfileTabs() {
       {activeTab === 'profile' && <ProfileInfoPanel />}
       {activeTab === 'settings' && <SettingsPanel />}
       {activeTab === 'achievements' && <AchievementsPanel />}
+      {activeTab === 'support' && <CustomerSupportPanel />}
     </>
   );
 }
diff --git a/src/app/profile/profile-data.ts b/src/app/profile/profile-data.ts
index c31ab241..07e9e792 100644
--- a/src/app/profile/profile-data.ts
+++ b/src/app/profile/profile-data.ts
@@ -1,4 +1,4 @@
-export type ProfileTabId = 'profile' | 'settings' | 'achievements';
+export type ProfileTabId = 'profile' | 'settings' | 'achievements' | 'support';
 
 export interface ProfileUser {
   initials: string;
@@ -42,6 +42,84 @@ export const profileTabs: Array<{ id: ProfileTabId; label: string }> = [
   { id: 'profile', label: 'Profile' },
   { id: 'settings', label: 'Settings' },
   { id: 'achievements', label: 'Achievements' },
+  { id: 'support', label: 'Customer Support' },
+];
+
+// ── Customer Support ──────────────────────────────────────────────────────────
+
+export interface SupportFaq {
+  id: string;
+  question: string;
+  answer: string;
+}
+
+export interface SupportContactOption {
+  id: string;
+  label: string;
+  description: string;
+  href: string;
+  icon: string;
+  ariaLabel: string;
+}
+
+export const supportFaqs: SupportFaq[] = [
+  {
+    id: 'reset-password',
+    question: 'How do I reset my password?',
+    answer:
+      'Go to the login page and click "Forgot password". Enter your registered email address and we will send you a reset link within a few minutes. Check your spam folder if you do not see it.',
+  },
+  {
+    id: 'offline-access',
+    question: 'How does offline learning work?',
+    answer:
+      'Enable Offline Mode in your Settings tab, then open any course and click the download icon. Downloaded content is available in the app even without an internet connection. Your progress syncs automatically when you reconnect.',
+  },
+  {
+    id: 'certificate',
+    question: 'How do I get my course certificate?',
+    answer:
+      'Certificates are issued automatically once you complete all lessons and pass the final assessment with a score of 70% or higher. You can download your certificate from the Achievements tab.',
+  },
+  {
+    id: 'billing',
+    question: 'How do I update my billing information?',
+    answer:
+      'Navigate to Settings → Billing (available for paid plans). You can update your payment method, view invoices, and manage your subscription from there.',
+  },
+  {
+    id: 'progress-sync',
+    question: 'My learning progress is not syncing. What should I do?',
+    answer:
+      'First, ensure you have a stable internet connection. Then try refreshing the page. If the issue persists, sign out and sign back in. Your progress is saved locally and will sync once connectivity is restored.',
+  },
+];
+
+export const supportContactOptions: SupportContactOption[] = [
+  {
+    id: 'email',
+    label: 'Email Support',
+    description: 'Response within 24 hours',
+    href: 'mailto:support@teachlink.com',
+    icon: 'email',
+    ariaLabel: 'Email our support team at support@teachlink.com',
+  },
+  {
+    id: 'chat',
+    label: 'Live Chat',
+    description: 'Mon–Fri, 9 am–6 pm UTC',
+    href: 'https://teachlink.com/chat',
+    icon: 'chat',
+    ariaLabel: 'Open live chat with support',
+  },
+  {
+    id: 'phone',
+    label: 'Phone Support',
+    description: '+1 (800) 123-4567',
+    href: 'tel:+18001234567',
+    icon: 'phone',
+    ariaLabel: 'Call our support line at +1 800 123 4567',
+  },
 ];
 
 export const learningGoalOptions: SelectOption[] = [