| 1 |
import { decodeEntities } from "@wordpress/html-entities"; |
| 2 |
import { useState, useEffect, useMemo } from "react"; |
| 3 |
import { buildQueryString } from "@wordpress/url"; |
| 4 |
import apiFetch from "@wordpress/api-fetch"; |
| 5 |
import { DownChevronIcon } from "../icons/FaqIcons"; |
| 6 |
import { Spinner } from "@wordpress/components"; |
| 7 |
|
| 8 |
const FAQTabLayout = ({ faqCategories, attributes }) => { |
| 9 |
const [termContents, setTermContents] = useState({}); |
| 10 |
const [selectedFaq, setSelectedFaq] = useState(undefined); |
| 11 |
|
| 12 |
let { showButtonIcon, faqTaxonomy } = attributes; |
| 13 |
|
| 14 |
const faqTermParam = (faqTaxonomy === 'betterdocs_product_faq_category' || faqTaxonomy === 'product_assignments') |
| 15 |
? 'betterdocs_product_faq_category' |
| 16 |
: 'betterdocs_faq_category'; |
| 17 |
|
| 18 |
useEffect(() => { |
| 19 |
if( faqCategories?.length > 0 ) { |
| 20 |
setSelectedFaq(faqCategories[0]?.id); //set the index to 0 for the first time, so that the fist faq group is selected |
| 21 |
faqCategories?.map((category) => { |
| 22 |
const { |
| 23 |
postsPerPage, |
| 24 |
postsOrderBy, |
| 25 |
postsOrder |
| 26 |
} = attributes; |
| 27 |
|
| 28 |
let query = { |
| 29 |
posts_per_page: -1, |
| 30 |
orderby: postsOrderBy, |
| 31 |
order: postsOrder, |
| 32 |
[faqTermParam]: category?.id, |
| 33 |
}; |
| 34 |
|
| 35 |
let baseURL = query.orderby === "betterfaqs_order" ? "/betterdocs/order_faqs" : "/wp/v2/betterdocs_faq"; |
| 36 |
|
| 37 |
let faqsByCatIDURL = `${baseURL}?${buildQueryString(query)}`; |
| 38 |
|
| 39 |
apiFetch({ |
| 40 |
path:faqsByCatIDURL |
| 41 |
}).then((result) => { |
| 42 |
setTermContents((previousState) => { |
| 43 |
previousState[category.id] = result?.length > 0 ? result : []; |
| 44 |
return {...previousState}; |
| 45 |
}) |
| 46 |
}); |
| 47 |
}); |
| 48 |
} |
| 49 |
}, [faqCategories, attributes]); |
| 50 |
|
| 51 |
const tabSvgIcon = ( |
| 52 |
<> |
| 53 |
<svg |
| 54 |
xmlns="http://www.w3.org/2000/svg" |
| 55 |
width={24} |
| 56 |
height={24} |
| 57 |
fill="none" |
| 58 |
> |
| 59 |
<g |
| 60 |
stroke="#C4C4C4" |
| 61 |
strokeLinecap="round" |
| 62 |
strokeLinejoin="round" |
| 63 |
strokeWidth={2} |
| 64 |
clipPath="url(#a)" |
| 65 |
> |
| 66 |
<path d="M19.875 6.27c.7.398 1.13 1.143 1.125 1.948v7.284c0 .809-.443 1.555-1.158 1.948l-6.75 4.27a2.27 2.27 0 0 1-2.184 0l-6.75-4.27A2.225 2.225 0 0 1 3 15.502V8.217c0-.81.443-1.554 1.158-1.947l6.75-3.98a2.33 2.33 0 0 1 2.25 0l6.75 3.98h-.033ZM12 16v.01" /> |
| 67 |
<path d="M12 13a2 2 0 0 0 .914-3.782A1.98 1.98 0 0 0 10.5 9.7" /> |
| 68 |
</g> |
| 69 |
<defs> |
| 70 |
<clipPath id="a"> |
| 71 |
<path fill="#fff" d="M0 0h24v24H0z" /> |
| 72 |
</clipPath> |
| 73 |
</defs> |
| 74 |
</svg> |
| 75 |
</> |
| 76 |
); |
| 77 |
|
| 78 |
return ( |
| 79 |
<> |
| 80 |
<div className="betterdocs-faq-tab-wrapper"> |
| 81 |
{faqCategories?.map((faq, index) => { |
| 82 |
return ( |
| 83 |
<> |
| 84 |
<div |
| 85 |
className={`betterdocs-faq-tab${selectedFaq == faq?.id ? ' active' : ''}`} |
| 86 |
data-term-id={faq?.id} |
| 87 |
onClick={(e) => { |
| 88 |
setSelectedFaq(faq?.id); |
| 89 |
}} |
| 90 |
> |
| 91 |
{faq?.meta?.faq_group_icon?.length > 0 ? <><img src={faq?.meta?.faq_group_icon[0]} width={24} height={24} className='faq-group-image'/></> : <><span className="faq-tab-icon"> |
| 92 |
{tabSvgIcon} |
| 93 |
</span></>} |
| 94 |
<span className="faq-tab-title"> |
| 95 |
{decodeEntities(faq?.name)} |
| 96 |
</span> |
| 97 |
</div> |
| 98 |
</> |
| 99 |
); |
| 100 |
})} |
| 101 |
</div> |
| 102 |
<div className="betterdocs-faq-list-wrapper"> |
| 103 |
<div className="betterdocs-faq-list-content"> |
| 104 |
<ul className="betterdocs-faq-list"> |
| 105 |
{(termContents[selectedFaq] == undefined && <Spinner/>)} |
| 106 |
{( termContents[selectedFaq] != undefined && termContents[selectedFaq]?.length > 0 ) && <> |
| 107 |
{ |
| 108 |
termContents[selectedFaq]?.map((value) => { |
| 109 |
return <> |
| 110 |
<li> |
| 111 |
<div className="betterdocs-faq-group"> |
| 112 |
<div className="betterdocs-faq-post"> |
| 113 |
<span className="betterdocs-faq-post-name">{decodeEntities(value?.title?.rendered)}</span> |
| 114 |
{showButtonIcon && <DownChevronIcon/>} |
| 115 |
</div> |
| 116 |
</div> |
| 117 |
</li> |
| 118 |
</> |
| 119 |
}) |
| 120 |
} |
| 121 |
</>} |
| 122 |
</ul> |
| 123 |
</div> |
| 124 |
</div> |
| 125 |
</> |
| 126 |
); |
| 127 |
}; |
| 128 |
|
| 129 |
export default FAQTabLayout; |
| 130 |
|
