130 lines
4.2 KiB
JavaScript
130 lines
4.2 KiB
JavaScript
"use client";
|
||
import Image from "next/image";
|
||
import React, { useState, useEffect, useContext } from "react";
|
||
import {
|
||
Accordion,
|
||
AccordionContent,
|
||
AccordionItem,
|
||
AccordionTrigger,
|
||
} from "@/components/ui/accordion";
|
||
import Link from "next/link";
|
||
import axios from "axios";
|
||
import { backendUrl } from "@/utils/axios";
|
||
import slugify from "slugify";
|
||
import ProductContext from "@/app/contexts/productContext";
|
||
|
||
const DEFAULT_IMAGE = "/sidhi-mala/Designer_30.png";
|
||
|
||
const FaqCard = ({ params }) => {
|
||
const { products } = useContext(ProductContext); // ✅ get products
|
||
const [faq, setFaq] = useState([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [error, setError] = useState(null);
|
||
|
||
useEffect(() => {
|
||
const fetchFaq = async () => {
|
||
try {
|
||
if (!products || products.length === 0) {
|
||
console.log("❌ Products not loaded yet.");
|
||
return;
|
||
}
|
||
|
||
// 1️⃣ Collect all unique subcategories from products
|
||
const subcategories = products.map((p) => p.product_subcategory);
|
||
|
||
// 2️⃣ Find subcategory by slug
|
||
const matchedSub = subcategories.find(
|
||
(sub) =>
|
||
slugify(sub?.subcategory_name || "", { lower: true }) ===
|
||
params.subcategory
|
||
);
|
||
|
||
console.log("✅ Matched Subcategory for FAQ:", matchedSub);
|
||
|
||
if (!matchedSub) {
|
||
console.warn("⚠️ No subcategory found for slug:", params.subcategory);
|
||
setError("Subcategory not found");
|
||
setLoading(false);
|
||
return;
|
||
}
|
||
|
||
// 3️⃣ Fetch FAQs using subcategory ID
|
||
const url = `${backendUrl}/products/faq/${matchedSub.category}/`;
|
||
console.log("📡 Fetching FAQ from:", url);
|
||
|
||
const faqRes = await axios.get(url);
|
||
|
||
console.log("📥 Full FAQ Response:", faqRes);
|
||
console.log("✅ FAQ Data:", faqRes.data);
|
||
|
||
setFaq(faqRes.data);
|
||
} catch (err) {
|
||
console.error("❌ FAQ Fetch Error:", err);
|
||
if (err.response) {
|
||
console.error("⚠️ Response Status:", err.response.status);
|
||
console.error("⚠️ Response Data:", err.response.data);
|
||
}
|
||
setError("Failed to fetch FAQs. Please try again later.");
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
fetchFaq();
|
||
}, [products, params.subcategory]);
|
||
|
||
if (loading)
|
||
return <p className="text-center text-xl mt-10">Loading FAQs...</p>;
|
||
if (error) return <p className="text-center text-red-600 mt-10">{error}</p>;
|
||
if (!faq || faq.length === 0)
|
||
return <p className="text-center text-xl mt-10">No FAQs available.</p>;
|
||
|
||
const hasImage = faq.some((item) => item.image !== null);
|
||
const imageToShow = hasImage
|
||
? `${backendUrl}${faq.find((item) => item.image !== null).image}`
|
||
: DEFAULT_IMAGE;
|
||
|
||
return (
|
||
<div className="min-h-screen sm:block hidden bg-[#FFFFFF]">
|
||
<h1 className="sm:pt-14 pb-8 font-serif mt-4 sm:text-6xl text-2xl text-zinc-800 text-center">
|
||
Frequently Asked Questions
|
||
</h1>
|
||
<div className="min-h-[80%] flex">
|
||
<Image
|
||
src={imageToShow}
|
||
height={600}
|
||
width={400}
|
||
alt="FAQ Image"
|
||
className="h-[550px] w-[550px] ml-14"
|
||
/>
|
||
<div className="flex-1 p-8">
|
||
{faq.map((item, index) => (
|
||
<Accordion type="single" collapsible className="w-full" key={index}>
|
||
<AccordionItem value={item.question}>
|
||
<AccordionTrigger className="text-xl mb-5 font-semibold text-zinc-900 hover:no-underline">
|
||
{item.question}
|
||
</AccordionTrigger>
|
||
<AccordionContent className="text-zinc-700">
|
||
{item.answer}
|
||
</AccordionContent>
|
||
</AccordionItem>
|
||
</Accordion>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div className="h-[30vh] sm:block hidden m-9">
|
||
<h2 className="my-6 text-2xl font-semibold w-[350px]">
|
||
Quick Answers to Some Frequently Asked Questions.
|
||
</h2>
|
||
<Link href={"/pages/contact"}>
|
||
<button className="px-4 py-4 border font-semibold border-black">
|
||
Get Support
|
||
</button>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default FaqCard;
|