import { __ } from "@wordpress/i18n";
import Drawer from "@mui/material/Drawer";
import { Fragment, useState, useEffect, useRef } from "@wordpress/element";
import useChangelogData from "../hooks/useChangelogData";
import {
AboutUsIcon,
Arrow,
ArrowRight,
Blog,
ChangelogIcon,
CloseIcon,
Community,
DocumentationIcon,
FeatRequest,
Logo,
Roadmap,
SetupWizard,
Support,
TechSupport,
Video,
WhatsNew,
} from "../icons";
const GreenCheckIcon = () => (
);
const GetHelpItems = [
{
title: __("Documentation", "easy-accordion-free"),
Icon: DocumentationIcon,
link: "https://easyaccordion.io/docs/",
},
{
title: __("Technical Support", "easy-accordion-free"),
Icon: TechSupport,
link: "https://shapedplugin.com/create-new-ticket/",
},
{
title: __("Setup Wizard", "easy-accordion-free"),
Icon: SetupWizard,
link: `${sp_eab_admin_dashboard_localize?.homeUrl}wp-admin/admin.php?page=eap_dashboard#setupwizard`,
},
{
title: __("Public Roadmap", "easy-accordion-free"),
Icon: Roadmap,
link: "",
},
{
title: __("Request a Feature", "easy-accordion-free"),
Icon: FeatRequest,
link: "https://shapedplugin.com/contact-us/",
},
{
title: __("Video Tutorials", "easy-accordion-free"),
Icon: Video,
link: "https://youtu.be/JEv8hP5NvnY?si=-a4iL5GV-NZmo9bI",
},
{
title: __("What's New", "easy-accordion-free"),
Icon: WhatsNew,
link: "https://easyaccordion.io/changelog/",
},
{
title: __("Blog: Latest News", "easy-accordion-free"),
Icon: Blog,
link: "https://shapedplugin.com/blog/",
},
{
title: __("Join Community", "easy-accordion-free"),
Icon: Community,
link: " https://community.shapedplugin.com/",
},
{
title: __("About Us", "easy-accordion-free"),
Icon: AboutUsIcon,
link: "#about_us",
},
];
const HeaderItems = ({ menuItems = [], currentPage = "", setPageAndHash = () => {} }) => {
const [showSidebar, setShowSidebar] = useState(false);
const [showUpgradeNotice, setShowUpgradeNotice] = useState(false);
const [activeItemPosition, setActiveItemPosition] = useState({ left: 0, width: 0 });
const navRef = useRef();
const itemsRef = useRef({});
const toggleDrawer = (newOpen) => () => {
setShowSidebar(newOpen);
};
const { status: changelogStatus, changelog, errorMessage: changelogError } = useChangelogData(showSidebar);
// Check if upgrade notice should be shown
useEffect(() => {
setShowUpgradeNotice(sp_eab_admin_dashboard_localize?.showUpgradeNotice ?? false);
}, []);
// Handle close button click for upgrade notice
const handleUpgradeNoticeClose = () => {
setShowUpgradeNotice(false);
// Send AJAX request to update the option
const formData = new FormData();
formData.append("action", "sp_eab_hide_upgrade_notice");
formData.append("nonce", sp_eab_admin_dashboard_localize?.nonce);
fetch(sp_eab_admin_dashboard_localize?.ajax_url, {
method: "POST",
body: formData,
})
.then((response) => response.json())
.catch((error) => {
console.error("Error hiding upgrade notice:", error);
});
};
// Update sliding indicator position when current page changes
useEffect(() => {
if (itemsRef.current[currentPage]) {
const item = itemsRef.current[currentPage];
const nav = navRef.current;
if (item && nav) {
const navRect = nav.getBoundingClientRect();
const itemRect = item.getBoundingClientRect();
setActiveItemPosition({
left: itemRect.left - navRect.left,
width: itemRect.width,
});
}
}
}, [currentPage]);
return (
<>
{showUpgradeNotice && (
Latest Updates - Changelog
{__("Couldn't load the latest changelog.", "easy-accordion-free")}
{changelogError &&{changelogError}
} {__("View changelog on easyaccordion.io", "easy-accordion-free")}