| 1 |
import Toggle from "react-toggle"; |
| 2 |
import { Demos, Docs, GearIcon } from "../icons/ui"; |
| 3 |
import { useEffect, useRef, useState } from "@wordpress/element"; |
| 4 |
import ModulesModal from "../modals/SidebarModal"; |
| 5 |
import apiFetch from "@wordpress/api-fetch"; |
| 6 |
import { Popover } from "@wordpress/components"; |
| 7 |
import ProBadge from "../badges/ProBadge"; |
| 8 |
|
| 9 |
const ModulesCard = ({ data, moduleName, blockShowHideHandler, value, isDisabled = false, type = "" }) => { |
| 10 |
const [sidebarToggle, setSidebarToggle] = useState(false); |
| 11 |
const { Icon, title, text, docsLink, demoLink, pro = false } = data; |
| 12 |
const disabledClass = isDisabled ? " sp-disabled" : ""; |
| 13 |
|
| 14 |
const [settingsValue, setSettingsValue] = useState({}); |
| 15 |
|
| 16 |
const cardRef = useRef(null); |
| 17 |
const popoverRef = useRef(null); |
| 18 |
const exitTimeoutRef = useRef(null); |
| 19 |
const [showTooltip, setShowTooltip] = useState(false); |
| 20 |
|
| 21 |
useEffect(() => { |
| 22 |
const fetchPost = async () => { |
| 23 |
try { |
| 24 |
const fetchedAttr = await apiFetch({ path: "sp-smart-post/v2/get-module-settings" }); |
| 25 |
if (fetchedAttr) { |
| 26 |
setSettingsValue(fetchedAttr?.[moduleName] || {}); |
| 27 |
} |
| 28 |
} catch (error) { |
| 29 |
console.log(error); |
| 30 |
} |
| 31 |
}; |
| 32 |
fetchPost(); |
| 33 |
}, []); |
| 34 |
|
| 35 |
const updateModuleSettings = async (updateModule) => { |
| 36 |
try { |
| 37 |
await apiFetch({ |
| 38 |
path: "sp-smart-post/v2/set-module-settings", |
| 39 |
method: "POST", |
| 40 |
headers: { "Content-Type": "application/json" }, |
| 41 |
body: JSON.stringify({ |
| 42 |
...updateModule, |
| 43 |
module_name: moduleName, |
| 44 |
}), |
| 45 |
}); |
| 46 |
} catch (error) { |
| 47 |
console.log("Failed ", error); |
| 48 |
} |
| 49 |
}; |
| 50 |
|
| 51 |
// const mouseEnterControl = () => { |
| 52 |
|
| 53 |
// if (exitTimeoutRef.current) { |
| 54 |
// clearTimeout(exitTimeoutRef.current); |
| 55 |
// exitTimeoutRef.current = null; |
| 56 |
// } |
| 57 |
|
| 58 |
// if (popoverRef.current) { |
| 59 |
// const popover = popoverRef.current.closest(".sp-pcp-module-popover"); |
| 60 |
// popover?.classList.remove("is-exiting"); |
| 61 |
// } |
| 62 |
|
| 63 |
// setShowTooltip(true); |
| 64 |
// }; |
| 65 |
|
| 66 |
// const mouseLeaveControl = () => { |
| 67 |
// if (popoverRef.current) { |
| 68 |
// const popover = popoverRef.current.closest(".sp-pcp-module-popover"); |
| 69 |
// popover?.classList.add("is-exiting"); |
| 70 |
// } |
| 71 |
|
| 72 |
// exitTimeoutRef.current = setTimeout(() => { |
| 73 |
// setShowTooltip(false); |
| 74 |
// }, 400); |
| 75 |
// }; |
| 76 |
|
| 77 |
return ( |
| 78 |
<> |
| 79 |
<div |
| 80 |
ref={cardRef} |
| 81 |
className={`sp-pcp-blocks-settings-card ${type}${disabledClass}${pro ? " sp-pcp-pro-card" : ""}`} |
| 82 |
// onMouseEnter={mouseEnterControl} |
| 83 |
// onMouseLeave={mouseLeaveControl} |
| 84 |
> |
| 85 |
{/* {("setup-wizard" === type && showTooltip) && <Popover |
| 86 |
anchor={cardRef.current} |
| 87 |
onClose={() => setShowTooltip(false)} |
| 88 |
placement="top" |
| 89 |
flip={false} |
| 90 |
className="sp-pcp-module-popover" |
| 91 |
ref={popoverRef} |
| 92 |
> |
| 93 |
<div className="sp-tooltip-body"> |
| 94 |
{text} |
| 95 |
</div> |
| 96 |
</Popover>} */} |
| 97 |
|
| 98 |
{pro && <ProBadge />} |
| 99 |
<div className="sp-pcp-blocks-settings-card-info"> |
| 100 |
<div className={`sp-pcp-blocks-settings-card-icon sp-${moduleName}`}> |
| 101 |
<Icon /> |
| 102 |
</div> |
| 103 |
<div className="sp-pcp-blocks-settings-card-docs"> |
| 104 |
<h4>{title}</h4> |
| 105 |
{("setup-wizard" !== type && "quick-start" !== type) && <> |
| 106 |
<span>{text}</span> |
| 107 |
<ul> |
| 108 |
{docsLink && ( |
| 109 |
<li> |
| 110 |
<a target="_blank" href={docsLink} rel="noreferrer"> |
| 111 |
<Docs /> Docs |
| 112 |
</a> |
| 113 |
</li> |
| 114 |
)} |
| 115 |
{demoLink && ( |
| 116 |
<li> |
| 117 |
<a target="_blank" href={demoLink} rel="noreferrer"> |
| 118 |
<Demos /> Demo |
| 119 |
</a> |
| 120 |
</li> |
| 121 |
)} |
| 122 |
</ul> |
| 123 |
</>} |
| 124 |
</div> |
| 125 |
</div> |
| 126 |
|
| 127 |
<div className="sp-pcp-blocks-settings-toggle-btn"> |
| 128 |
<Toggle |
| 129 |
defaultChecked={pro ? false : value} |
| 130 |
icons={false} |
| 131 |
onChange={() => blockShowHideHandler(moduleName, "modules-option")} |
| 132 |
disabled={isDisabled} |
| 133 |
/> |
| 134 |
{("setup-wizard" !== type && "quick-start" !== type && data?.settings) && ( |
| 135 |
<div |
| 136 |
className="sp-smart-post-sidebar-popup-toggle" |
| 137 |
onClick={() => setSidebarToggle((prev) => !prev)} |
| 138 |
> |
| 139 |
<GearIcon /> |
| 140 |
</div> |
| 141 |
)} |
| 142 |
</div> |
| 143 |
</div> |
| 144 |
{sidebarToggle && settingsValue && Object.keys(settingsValue?.options || {}).length > 0 && ( |
| 145 |
<> |
| 146 |
<ModulesModal |
| 147 |
title={data.title} |
| 148 |
moduleName={moduleName} |
| 149 |
sidebarToggle={sidebarToggle} |
| 150 |
setSidebarToggle={setSidebarToggle} |
| 151 |
GeneralTab={data?.General && data.General} |
| 152 |
StyleTab={data?.Style && data.Style} |
| 153 |
SettingsTab={data?.SettingsTab && data.SettingsTab} |
| 154 |
PreviewTab={data?.Preview && data.Preview} |
| 155 |
updateModuleSettings={updateModuleSettings} |
| 156 |
settingsValue={settingsValue} |
| 157 |
setSettingsValue={setSettingsValue} |
| 158 |
/> |
| 159 |
</> |
| 160 |
)} |
| 161 |
</> |
| 162 |
); |
| 163 |
}; |
| 164 |
|
| 165 |
export default ModulesCard; |
| 166 |
|
