128 lines
4.4 KiB
TypeScript
128 lines
4.4 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import { View, ScrollView, ActivityIndicator, Pressable } from "react-native";
|
|
import { ScreenWrapper } from "@/components/ScreenWrapper";
|
|
import { StandardHeader } from "@/components/StandardHeader";
|
|
import { Text } from "@/components/ui/text";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { faqApi } from "@/lib/api";
|
|
import { ChevronDown } from "@/lib/icons";
|
|
import { useColorScheme } from "nativewind";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface FAQItem {
|
|
id: string;
|
|
question: string;
|
|
answer: string;
|
|
category?: string;
|
|
}
|
|
|
|
export default function FAQScreen() {
|
|
const [faqs, setFaqs] = useState<FAQItem[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [expanded, setExpanded] = useState<string | null>(null);
|
|
const { colorScheme } = useColorScheme();
|
|
|
|
const fetchFaqs = async () => {
|
|
try {
|
|
const response = await faqApi.getAll();
|
|
const faqData = (response as any)?.data || response;
|
|
setFaqs(Array.isArray(faqData) ? faqData : []);
|
|
} catch (error) {
|
|
console.error("[FAQ] Fetch failed:", error);
|
|
setFaqs([]);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchFaqs();
|
|
}, []);
|
|
|
|
return (
|
|
<ScreenWrapper className="bg-background">
|
|
<StandardHeader title="FAQ" showBack />
|
|
|
|
{loading ? (
|
|
<View className="flex-1 items-center justify-center">
|
|
<ActivityIndicator color="#ea580c" />
|
|
</View>
|
|
) : (
|
|
<ScrollView
|
|
className="flex-1 px-4 pt-4"
|
|
contentContainerStyle={{ paddingBottom: 40 }}
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
<View className="mb-6 px-1">
|
|
<Text variant="h4" className="text-foreground font-sans-bold">
|
|
Got Questions?
|
|
</Text>
|
|
<Text variant="muted" className="text-sm mt-1">
|
|
Find quick answers to common inquiries.
|
|
</Text>
|
|
</View>
|
|
|
|
{faqs.length === 0 ? (
|
|
<View className="items-center justify-center mt-20 p-10">
|
|
<Text variant="muted" className="text-center">
|
|
No FAQs available yet.
|
|
</Text>
|
|
</View>
|
|
) : (
|
|
faqs.map((item) => (
|
|
<Card
|
|
key={item.id}
|
|
className="mb-4 overflow-hidden border border-border/50 bg-card rounded-[6px] shadow-sm"
|
|
>
|
|
<Pressable
|
|
onPress={() =>
|
|
setExpanded(expanded === item.id ? null : item.id)
|
|
}
|
|
className={cn(
|
|
"flex-row items-center justify-between p-3",
|
|
expanded === item.id && "bg-muted/10",
|
|
)}
|
|
>
|
|
<Text className="flex-1 font-sans-bold text-foreground mr-3 leading-5">
|
|
{item.question}
|
|
</Text>
|
|
<View
|
|
className="h-8 w-8 rounded-[10px] bg-card items-center justify-center border border-border/40"
|
|
style={{
|
|
transform: [
|
|
{ rotate: expanded === item.id ? "180deg" : "0deg" },
|
|
],
|
|
}}
|
|
>
|
|
<ChevronDown
|
|
size={18}
|
|
color={colorScheme === "dark" ? "#f8fafc" : "#0f172a"}
|
|
/>
|
|
</View>
|
|
</Pressable>
|
|
{expanded === item.id && (
|
|
<CardContent className="px-4 pb-5">
|
|
<View className="h-[1px] bg-border/30 mb-4" />
|
|
<Text className="text-foreground leading-6 text-[15px]">
|
|
{item.answer}
|
|
</Text>
|
|
{item.category && (
|
|
<View className="flex-row mt-4">
|
|
<View className="bg-primary/5 px-2.5 py-1 rounded-[6px] border border-primary/10">
|
|
<Text className="text-[10px] font-sans-bold text-primary uppercase">
|
|
{item.category}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
)}
|
|
</CardContent>
|
|
)}
|
|
</Card>
|
|
))
|
|
)}
|
|
</ScrollView>
|
|
)}
|
|
</ScreenWrapper>
|
|
);
|
|
}
|