import Toggle from "react-toggle"; import { __ } from "@wordpress/i18n"; import { toast } from "react-hot-toast"; import { Modal } from "@wordpress/components"; import { memo, useEffect, useState } from "@wordpress/element"; import { useSelect, useDispatch } from "@wordpress/data"; import { defaultDashboardSettings } from "@easy-accordion/constants"; import { checkIsEqual } from "@easy-accordion/controls"; import { Demos, Docs, SettingsIcon, VideoPlayIcon } from "../../icons"; import { SaveAndReset } from "../settings/template-parts"; import { AISettingsModal, ReCaptchaPopup } from "../integrations/templates"; import { STORE_NAME } from "../../store"; import { ProIndicatorIcon } from "./icons"; const modalHeaderLabel = { google_recaptcha: __("Google reCAPTCHA Settings", "easy-accordion-free"), gemini: __("Google Gemini API Settings", "easy-accordion-free"), chatgpt: __("ChatGPT API Settings", "easy-accordion-free"), deepseek: __("DeepSeek API Settings", "easy-accordion-free"), }; const dynamicMenuItems = [ { index: 3, key: "saved_templates", label: __("Saved Templates", "easy-accordion-free"), href: "edit.php?post_type=sp_easy_accordion&page=eap_dashboard#saved_templates", }, { index: 12, key: "eap_tools", label: __("Tools", "easy-accordion-free"), href: "edit.php?post_type=sp_easy_accordion&page=eap_tools", }, ]; // handle toggle menus. const handleMenus = (name, isActive) => { const menuItem = dynamicMenuItems?.find((i) => i.key === name); const menuWrapper = document.querySelector("#menu-posts-sp_easy_accordion .wp-submenu-wrap"); // return if menu item or wrapper is not exist. if (!menuItem || !menuWrapper) { return; } const existingLink = menuWrapper.querySelector(`a[href="${menuItem.href}"]`); // REMOVE ITEM. if (!isActive) { if (existingLink) { const li = existingLink.closest("li"); li?.remove(); } return; } // RESTORE ITEM (if missing). if (isActive && !existingLink) { const li = document.createElement("li"); const a = document.createElement("a"); a.href = menuItem.href; a.textContent = menuItem.label; li.appendChild(a); // get reference to existing child at that index. const referenceNode = menuWrapper.children[menuItem.index]; menuWrapper.insertBefore(li, referenceNode); } }; // notification message. const show_notification = (enabled, optionKey = "modules") => { const message = (optionKey === "modules" ? __("Module", "easy-accordion-free") : __("Integration", "easy-accordion-free")) + (enabled ? __(" enabled successfully", "easy-accordion-free") : __(" disabled successfully", "easy-accordion-free")); toast.success(message, { style: { marginTop: "20px", fontSize: "14px" } }); }; const RenderModuleCard = ({ items = [], optionKey = "integrations", hideUpcoming = false, type = "", gridCols = "sp-grid-cols-3" }) => { const dashboardSettings = useSelect((select) => select(STORE_NAME).getDashboardSettings()); const { saveSettings } = useDispatch(STORE_NAME); // default settings. const tabDefaultSettings = defaultDashboardSettings[optionKey]; const defaultSettings = dashboardSettings?.[optionKey] || tabDefaultSettings; const [openedPopup, setOpenedPopup] = useState(null); const [moduleData, setModuleData] = useState(defaultSettings); const [isChangeAnything, setIsChangeAnything] = useState(false); const handleSaveData = (queryData = moduleData) => { const modifiedData = { ...dashboardSettings, [optionKey]: queryData }; saveSettings({ dashboardSettings: modifiedData }); setIsChangeAnything(false); }; const handleReset = () => { const resetValue = { ...moduleData, [openedPopup]: tabDefaultSettings[openedPopup] }; handleSaveData(resetValue); setModuleData(resetValue); }; const handleToggle = (key, newValue) => { handleSaveData({ ...moduleData, [key]: { ...moduleData[key], is_active: newValue } }); show_notification(newValue, optionKey); // toggle menu. if (optionKey === "modules") { handleMenus(key, newValue); } }; const updateSettingsOption = (name, value) => { const updatedModalData = { ...moduleData?.[openedPopup], [name]: value }; setIsChangeAnything(!checkIsEqual(updatedModalData, defaultSettings?.[openedPopup])); setModuleData({ ...moduleData, [openedPopup]: updatedModalData }); }; useEffect(() => { setModuleData(defaultSettings); }, [dashboardSettings]); return (
{items?.map(({ id, key, Icon, label, desc, demoLink, docLink, videoLink, upcoming, isPro, hideSettings }) => (

{label} {!hideUpcoming && upcoming && ( {__("Upcoming", "easy-accordion-free")} )}

{key && ( { if (!upcoming) { handleToggle(key, !moduleData?.[key]?.is_active); } }} /> )} {isPro && }
{type !== "quick-start" && {desc}}
{type !== "quick-start" && (
{(docLink || demoLink || videoLink) && (
{demoLink && ( Demo )} {videoLink && ( Video )} {docLink && ( Docs )}
)} {optionKey === "integrations" && type !== "page-builder" && !hideSettings && (
{ if (!upcoming) { setOpenedPopup(key); } }} >
)}
)}
{openedPopup === key && ( setOpenedPopup(null)} >
{openedPopup === "google_recaptcha" ? ( ) : ( )} handleSaveData()} onReset={handleReset} isChanged={isChangeAnything} />
)}
))}
); }; export default memo(RenderModuleCard);