/home/bdqbpbxa/demo-subdomains/ping-proxies.goodface.com.ua/src/pages/FAQ/index.jsx
import './styles.scss'
import HeroCrumbs from 'components/Sections/Hero/HeroCrumbs';
import GetStarted from 'components/Sections/GetStarted';
import ColumnWrapper from 'Layout/ColumWraper';
import FAQSideText from "./FaqSideText";
import { useSelector, useDispatch } from 'react-redux';
import { fetchFAQ, selectFAQ, selectFAQSections, faqIsLoading } from 'store/slices/FAQSlice';
import FAQSectionItems from 'components/Sections/FAQ/FAQSection';
import { useEffect, useRef } from 'react';
// import Preloader from 'Layout/Preloader';
import { useAnimation } from 'hooks/useAnimation';
const FAQPage = () => {
const dispatch = useDispatch();
const isLoading = useSelector(faqIsLoading)
const faqData = useSelector(selectFAQ)
const faqSections = useSelector(selectFAQSections)
useEffect(() => {
// @ts-ignore
dispatch(fetchFAQ());
}, [dispatch]);
const container = useRef();
useAnimation({
items: ['.faq-page-title h1', '.faq-page-title .body1', '.faq-section-items'],
container,
dependencies: [isLoading],
})
if (!faqData) {
return null;
}
const sideText = {
title: faqData.faq.help_title,
desc: faqData.faq.help_text,
button_text: faqData.faq.help_link_text,
button_link: faqData.faq.help_link,
}
return (
<>
{/* {
isLoading && <Preloader />
} */}
<section ref={container} className='inner-container faq-page-title'>
<HeroCrumbs page={"FAQ"} />
<h1>{faqData.title}</h1>
<div className='body1'>{faqData.description}</div>
</section>
<section ref={container}>
<ColumnWrapper SideText={<FAQSideText data={sideText} />} >
<FAQSectionItems sections={faqSections} sideText={sideText} />
</ColumnWrapper>
</section>
<GetStarted cta={faqData.cta} isLoading={isLoading} />
</>
);
}
export default FAQPage;