Help Center

The Help Center provides a comprehensive self-service support system within the application. It includes a dashboard for support options, a searchable FAQ system with category filtering, and a structured feedback submission form.

Overview

The Help Center is designed to reduce support overhead by providing users with immediate answers and structured ways to contact support or provide feedback.

Dashboard: A central hub for all support-related actions.
Searchable FAQs: Infinite-scrolling FAQ list with category-based filtering.
Feedback System: A 5-star rating and categorized feedback submission form.
Contact Methods: Easy access to support channels like WhatsApp, Email, and Phone.

🏗 Architecture

The Help Center follows a clean separation of concerns:

1. Data Layer (TanStack Query)

Located in queries/use-help-center.ts, it manages all API interactions:

useHelpCenter(): Fetches the overall help center data.
useFAQsInfinite(): Handles paginated FAQ data with support for search and category filters.
usePopularFAQs(): Retrieves high-traffic questions for the dashboard preview.
useContactMethods(): Fetches available support channels dynamically from the backend.

2. Mutation Layer

Located in mutations/use-feedback-mutation.ts:

Handles the POST request to submit user feedback.
Manages loading states and provides toast notifications upon success or failure.

3. Routing

The feature uses Expo Router with file-based routing:

/settings/help: Main Dashboard
/help/faqs: FAQ Search & List
/help/feedback: Feedback Submission

📱 Screens & Features

1. Help Dashboard (`app/settings/help.tsx`)

The entry point for users seeking assistance.

Quick Search: A prominent search bar that deep-links into the FAQ screen.
Action Grid: Interactive cards for FAQs, Contact Us, Live Chat, and Feedback.
Theme Integration: Cards automatically adjust their background and accent colors based on the theme-context.

2. FAQ System (`app/help/faqs.tsx`)

A robust interface for browsing common questions.

Category Tabs: Users can filter questions by categories like "Billing", "Technical", or "Account".
Real-time Search: Debounced search input to filter questions locally or via API.
Animated Accordions: Smooth height transitions for FAQ answers using react-native-reanimated.
Infinite Scroll: Automatically loads more questions as the user scrolls.

3. Feedback Form (`app/help/feedback.tsx`)

Allows users to share their experience.

Interactive Rating: A 5-star rating component using solar-icons.
Category Selection: Buttons to classify feedback (Bug, Feature Request, etc.).
Form Validation: Client-side validation for required fields before submission.

🚀 Usage

Fetching Popular FAQs

To display a list of common questions on any screen:

import { usePopularFAQs } from '@/queries/use-help-center';

const FAQPreview = () => {
  const { data: faqs, isLoading } = usePopularFAQs();

  if (isLoading) return <ActivityIndicator />;

  return (
    <View>
      {faqs.map(faq => (
        <Text key={faq.id}>{faq.question}</Text>
      ))}
    </View>
  );
};

Submitting Feedback

Integrate the feedback mutation into a custom form:

import { useFeedbackMutation } from '@/mutations/use-feedback-mutation';

const FeedbackForm = () => {
  const { mutate: submitFeedback, isPending } = useFeedbackMutation();

  const handleSend = () => {
    submitFeedback({
      category: 'Bug',
      subject: 'Login Issue',
      message: 'I cannot login with Google',
      rating: 4
    });
  };

  return (
    <Button loading={isPending} onPress={handleSend}>
      Submit
    </Button>
  );
};

🎨 Component Styling

The Help Center utilizes NativeWind for styling and Reanimated for interactive elements.

FAQ Animation

The FAQItem component uses a shared value for height animation:

const bodyStyle = useAnimatedStyle(() => {
  return {
    height: withTiming(expanded ? contentHeight.value : 0, { duration: 250 }),
  };
});

Dynamic Contact Icons

Contact methods dynamically render icons and colors based on the backend response:

const getIconForContactType = (type: string) => {
  switch (type) {
    case 'phone': return PhoneCallingBoldDuotone;
    case 'email': return LetterBoldDuotone;
    // ...
  }
};

🔄 Consistency with Flutter

The Expo implementation is designed to be 1:1 with the Flutter version:

API Integration: Both share the same backend endpoints and data structures.
Design Language: Identical use of Solar Icons and design tokens for spacing and colors.
User Experience: Matching behavior for search debouncing, category filtering, and form validation.

On this page