F13. Help and Support Flow - Feature Analysis¶

1. Overview¶

The Help and Support Flow provides users with a comprehensive support system, enabling them to find answers to common questions through FAQs, contact support directly, and track their support requests. This feature is crucial for user retention and satisfaction, offering accessible assistance and troubleshooting resources across the Futr Connect platform. The flow is designed to be intuitive, responsive, and comprehensive, addressing various user needs through self-service solutions and direct communication channels.

2. User Stories¶

As a user, I want to access help resources to solve common problems without contacting support
As a user, I want to search through FAQ categories to quickly find answers to my questions
As a user, I want to view detailed answers to frequently asked questions
As a user, I want to contact support when I can’t find answers in the FAQ
As a user, I want to create and track support tickets for ongoing issues
As a user, I want to attach files to my support tickets to better illustrate my problems
As a user, I want to receive notifications about updates to my support tickets
As a user, I want to filter my support requests by status to easily find active issues

3. Entry Points¶

Top Navigation Bar: Help & Support icon
Footer Links: FAQ, Contact Us, Support
In-app contextual help links: From error messages or user profile sections

4. Feature Components¶

A vertical sidebar containing three primary sections:

FAQ (default selected on page load)
Contact Support
Support Requests

4.2 FAQ Section¶

Search Bar: Allows users to filter questions by keywords
FAQ Categories:
Displayed as filter buttons (e.g., All, Account, General, etc.)
Clicking a category filters the FAQ list to show only relevant questions
FAQ List:
Each FAQ item appears as a clickable list entry with the question title
Clicking on an FAQ redirects to a dedicated FAQ Details Page
- The FAQ Details Page displays the full question and formatted answer
- Route format: /help-support/faqs/{faq-id-or-slug}
Related FAQs may be displayed at the bottom of the FAQ Details Page

4.3 Contact Support Section¶

Contains a Contact Support button
Clicking the button opens a modal with a contact form:
Fields:
- Name (pre-filled for authenticated users)
- Email (pre-filled for authenticated users)
- Description of issue (required)
- Priority selection (Low, Medium, High)
Buttons:
- Submit (triggers form validation and API submission)
- Cancel (closes the modal)
Successful submission creates a support message for internal review and displays a confirmation message with a reference ID

4.4 Support Request Section¶

Displays previously submitted support tickets (if any)
Each support request card includes:
Subject
Status indicator (Open, In Progress, Resolved)
Submission date/time
Preview or brief description
Button: Create New Ticket
redirect page form with:
- Subject (required)
- Description (required)
- Category selection
- File Upload (JPG, PNG, PDF, max size 5MB)
Submit creates a support request via API
Ticket Detail View: Clicking on a ticket opens a detailed view with:
Full description
Status history
File attachments (if any)
Message history between user and support team

5. API Integration¶

5.1 FAQ API¶

GET /api/faqs/

5.2 FAQ Category API¶

GET /api/faq-categories/

5.3 Contact Support API¶

POST /api/contact-us/

5.4 Support Ticket API¶

POST /api/send-support-ticket-email/

6. User Flow¶

User accesses Help & Support via navigation icon or footer links
Default view shows FAQ section with searchable questions and category filters
User can:
- Search or browse FAQs by category
- Click on an FAQ to view detailed answer on a dedicated page
- Navigate to Contact Support tab and submit a support form
- View existing support tickets in the Support Requests tab
- Create a new support ticket with optional file attachment
- Click on a ticket to view details and message history
- Reply to existing tickets with optional file attachments

6.1 FAQ Flow Detailed Steps¶

User lands on Help & Support page with FAQ tab active
User can search for specific keywords or select a category
System displays filtered list of FAQs matching criteria
User clicks on a question of interest
System navigates to dedicated FAQ detail page showing full answer
User can return to FAQ list or explore related FAQs shown at bottom

6.2 Contact Support Flow Detailed Steps¶

User navigates to Contact Support tab
User clicks Contact Support button
System displays contact form modal with fields pre-filled for authenticated users
User completes form and clicks Submit
System validates input and shows inline errors if needed
On successful submission, system shows confirmation with reference ID
User can dismiss confirmation and return to Help & Support section

6.3 Support Ticket Flow Detailed Steps¶

User navigates to Support Requests tab
System displays list of user’s previous tickets (if any)
User can filter tickets by status using dropdown filter
To create a new ticket, user clicks Create New Ticket button
System displays ticket creation form modal
User completes form, attaches files if needed, and submits
System creates new ticket and adds it to the list
User can click on any ticket to view details and message history
In ticket detail view, user can add replies and additional attachments

7. UI Components¶

Vertical tabs for FAQ, Contact Support, and Support Requests
Active tab is visually highlighted
Responsive design collapses to horizontal tabs on smaller screens

7.2 FAQ Components¶

SearchInput: Text input with search icon and clear button
CategoryFilterButtons: Horizontal scrollable list of category buttons
FAQListItem: Expandable component with question title and chevron icon
FAQPagination: Pagination controls for navigating through FAQ pages
FAQDetailView: Formatted content container with rich text support
RelatedFAQsList: Horizontal list of related question cards shown at bottom of detail page

ModalContainer: Overlay container with form content
FormInputs: Text fields for name, email, and description
SubmitButton: Primary action button
CancelButton: Secondary action button
ValidationMessages: Inline error and success message containers

7.4 Support Ticket Components¶

TicketListItem: Card displaying ticket summary and status
MessageThread: Chronological display of ticket messages
FileAttachmentList: Grid of attached files with preview capability
ReplyForm: Text input and file upload for adding responses
FileUploadDropzone: Interactive area for file uploads with preview

8. State Management¶

// Support Request
type SupportRequestQueryType = {
user?: UserType;
tickets: Array;
error?: string;
};

// FAQ Detail Page
type FaqDetailQueryType = SingleFaqSchemaType;

// FAQ Categories
type FaqCategoryQueryType = FaqCategoryPaginationTypes;

// FAQ List
type FaqListQueryType = FaqPaginationTypes;

8.2 React Component Example¶

// FAQ List Component Example
faqData?.results?.map((faq, index) => (
  <div key={index} className="py-4">
    <Link href={`/help-support/faqs/${faq.id}`}>
      <p className="text-mirageLight hover:text-blue-600 cursor-pointer px-5">{faq.question}</p>
    </Link>
  </div>
));

9. Validation Rules¶

9.1 Contact Form Validation¶

Name: Required, minimum 2 characters
Email: Required, valid email format
Description: Required, minimum 10 characters, maximum 1000 characters
Priority: Optional, must be one of: “Low”, “Medium”, “High”

9.2 Support Ticket Validation¶

Subject: Required, minimum 5 characters, maximum 100 characters
Description: Required, minimum 20 characters, maximum 2000 characters
Category: Required, must be one of the predefined categories
File Uploads:
Maximum 5 files per ticket
Allowed file types: JPG, PNG, PDF
Maximum file size: 5MB per file
Total upload size: 15MB maximum

9.3 Validation Implementation Example¶

// Contact Form Validation
const validationSchema = yup.object({
  name: yup.string().required("Name is required"),
  email: yup.string().email("Invalid email format").required("Email is required"),
  subject: yup.string().required("Subject is required"),
  description: yup.string().required("Description is required"),
});

// File Upload Validation
file: yup
  .mixed()
  .test("fileSize", "File too large", (value) => {
    const files = value as FileList;
    return !files?.length || files[0].size <= 5 * 1024 * 1024;
  })
  .test("fileType", "Unsupported File Format", (value) => {
    return !(value as FileList)?.length || ["image/jpeg", "image/png", "application/pdf"].includes((value as FileList)[0]?.type);
  });

10. Error Handling¶

Form Validation Errors: Display inline with corresponding form fields
API Submission Errors: Show friendly toast notifications with retry options
File Upload Errors: Display specific error messages about file type/size issues
Network Failures: Provide retry mechanism and offline indicators when appropriate
Authentication Errors: Redirect to login with return URL to preserve context

10.1 Error Handling Implementation¶

// API Error Handler Example
import { useRouter } from "next/navigation";

import { useStores } from "@/services";

import { enqueueSnackbar } from "notistack";

export default function useErrorHandelForPutPatchDelete() {
  const { userStore } = useStores();
  const router = useRouter();
  const errorHandelForPutPatchDelete = async (errorCode, error) => {
    if (errorCode == 401) {
      // if  error code 401
      try {
        enqueueSnackbar("Your session expire Please login", {
          variant: "error",
          autoHideDuration: 3000,
        });
        await userStore.logOutUser();
        router.replace("/");
      } catch (error) {
        router.replace("/");
      }
    } else if (errorCode == 403) {
      // if error code 403
      enqueueSnackbar(`You don't have access to this resource`, {
        variant: "error",
        autoHideDuration: 3000,
      });
    } else if (errorCode == 400) {
      enqueueSnackbar(error, {
        variant: "error",
        autoHideDuration: 3000,
      });
    } else {
      // default error
      enqueueSnackbar(`We are experience issue please try after some time`, {
        variant: "error",
        autoHideDuration: 3000,
      });
    }
  };
  return { errorHandelForPutPatchDelete };
}

import { useRouter } from "next/navigation";

import { useStores } from "@/services";

import { enqueueSnackbar } from "notistack";

export default function useErrorHandelForGet() {
  const { userStore } = useStores();
  const router = useRouter();
  const errorHandelForGet = async (errorCode) => {
    try {
      if (errorCode == 401 && !userStore.isFetchingRefreshToken) {
        // if  error code 401
        try {
          enqueueSnackbar("Your session expire Please login", {
            variant: "error",
            autoHideDuration: 3000,
          });
          await userStore.logOutUser();
          router.replace("/");
        } catch (error) {
          router.replace("/");
        }
      } else if (errorCode == 403) {
        // if error code 403
        enqueueSnackbar(`You don't have access to this resource`, {
          variant: "error",
          autoHideDuration: 3000,
        });
      } else {
        // default error
        enqueueSnackbar(`We are experience issue please try after some time`, {
          variant: "error",
          autoHideDuration: 3000,
        });
      }
    } catch (error) {}
  };
  return { errorHandelForGet };
}

11. Security Considerations¶

Authentication Requirements:
Users must be authenticated to submit support forms or create tickets
FAQ section is accessible to all users (authenticated and unauthenticated)
Each user can only view and manage their own support tickets
File Upload Security:
All uploaded files are scanned for malware before processing
Files are stored in a secure, isolated storage environment
File metadata is sanitized to prevent XSS attacks
Upload endpoints implement rate limiting to prevent abuse
Data Protection:
Personal information in support tickets is handled according to privacy policy
Sensitive data is redacted from logs and error reports
Support history is only visible to the user who created the tickets and authorized support staff
API Security:
All API endpoints implement proper authorization checks
JWT token validation for authenticated endpoints
CSRF protection for form submissions
Input validation and sanitization to prevent injection attacks

12. Performance Considerations¶

FAQ Loading Strategy:
FAQ list is paginated to limit initial data load
Category filtering happens on the server to reduce data transfer
Search implements debouncing to limit API calls during typing
FAQ detail pages use static generation where possible for faster loading
File Upload Optimization:
Client-side validation to prevent unnecessary uploads
Progressive upload with progress indicators
Image compression before upload when appropriate
Chunked uploads for large files
Caching Strategy:
FAQ content is cached at CDN level with appropriate cache headers
Frequently accessed FAQs are cached in browser storage
API responses include ETags for efficient validation
Lazy Loading:
Support ticket details are loaded on demand, not with the initial list
File previews use thumbnails rather than full-size images
Support ticket attachments are lazy-loaded when viewing ticket details
UI Performance:
Modals use React.lazy for code splitting
List virtualization for long ticket or FAQ lists
Optimized re-renders using React.memo and proper dependency arrays

13. Accessibility Features¶

Screen Reader Support:
All interactive elements have appropriate ARIA attributes
Form fields include proper labels and descriptions
Modal dialogs implement proper focus management
Keyboard Navigation:
All interactive elements are focusable and keyboard operable
Tab order follows logical flow
Focus trapping in modals
Keyboard shortcuts for common actions
Visual Accessibility:
Color contrast meets WCAG AA standards
Status indicators use both color and text/icons
Text size is adjustable through browser controls
Support for browser zoom and high contrast modes
Form Accessibility:
Clear error messages associated with form controls
Required fields are clearly indicated
Validation errors are announced to screen readers

14. Third-Party Integrations¶

14.1 Zendesk Integration¶

The Help and Support flow integrates with Zendesk for ticket management and customer support. Support tickets created in Futr Connect are synchronized with Zendesk for support team management.

// Zendesk Integration Example
const { mutateAsync, isPending } = useMutation({
  mutationFn: async (formData: FormData) => {
    const response = await axios.post("/api/submitTicket", formData);
    return response.data;
  },
  onSuccess: (data: any) => {
    queryClient.invalidateQueries({ queryKey: ["tickets"] });
    (async () => {
      await emailNotification({
        description: ticketData?.description ?? "",
        subject: ticketData?.subject ?? "",
        email: userStore.loggedInUserData?.user?.email ?? "",
        id: data.ticket.id,
        name: userStore.loggedInUserData?.user?.full_name ?? "",
      });
      reset();
      setPreview(null);
      setFileName(null);
      router.push("/help-support/support-request");
      userStore.setNewTicketRaised(true);
      enqueueSnackbar("Successfully submitted", { variant: "success" });
    })();
  },
  onError: (error: any) => {
    enqueueSnackbar(error?.error || "Submission failed", { variant: "error" });
  },
});
const onSubmit: SubmitHandler<TicketFormInputs> = async (data) => {
  try {
    setTicketData(data);
    const formData = new FormData();
    formData.append("subject", data.subject);
    formData.append("email", userStore.loggedInUserData?.user?.email || "");
    formData.append("fullName", userStore.loggedInUserData?.user?.full_name || "");
    formData.append("description", data.description);
    if (data.file?.[0]) formData.append("file", data.file[0]);

    await mutateAsync(formData);
  } catch (error) {
    console.error("Error submitting ticket:", error);
  }
};

14.2 Firebase Notification Integration¶

Firebase Cloud Messaging is used to notify users of updates to their support tickets in real-time.

// Firebase Notification Integration
const subscribeToTicketUpdates = (userId, ticketId) => {
  const ticketRef = firebase.firestore().collection("ticketUpdates").where("userId", "==", userId).where("ticketId", "==", ticketId);

  return ticketRef.onSnapshot((snapshot) => {
    snapshot.docChanges().forEach((change) => {
      if (change.type === "added" || change.type === "modified") {
        const data = change.doc.data();

        // Show notification
        toast.info(`Ticket #${ticketId}: ${data.message}`);

        // Update local ticket data
        ticketStore.fetchTicketDetails(ticketId);
      }
    });
  });
};

Database Models¶

PostgreSQL Models¶

FAQCategory¶

id (UUID, primary key)
name (varchar, required)
description (text, nullable)

FAQ¶

id (UUID, primary key)
faq_category (ForeignKey to FAQCategory)
question (varchar, required)
answer (text, required)

ContactUs¶

id (UUID, primary key)
name (varchar, required)
email (EmailField, required)
subject (varchar, required)
description (text, required)
user (ForeignKey to User, nullable)

16. Future Enhancements¶

Live Chat Integration:
Real-time chat with support agents
Chat history preservation
File sharing in chat
AI-Powered FAQ Search:
Natural language processing for better search results
Question intent matching
Automatic FAQ suggestion based on user behavior
Knowledge Base Expansion:
Searchable articles and tutorials
User feedback on article helpfulness
User contribution system for community knowledge
Video Support:
Support for video attachments in tickets
Screen recording integration
Video tutorials for common issues
Enhanced Analytics:
Support usage metrics dashboard
Common issue identification
FAQ effectiveness tracking

Keys	Action
`?`	Open this help
`n`	Next page
`p`	Previous page
`s`	Search