| 1 |
/** |
| 2 |
* Settings Content Component |
| 3 |
* |
| 4 |
* Handles dynamic options for select fields in Divi 5 module settings |
| 5 |
* |
| 6 |
* @package Smart_Post_Show_Pro |
| 7 |
*/ |
| 8 |
|
| 9 |
// Access Divi globals |
| 10 |
const { useState, useEffect } = window?.vendor?.wp?.element; |
| 11 |
const { set } = window?.lodash; |
| 12 |
const loggedFetch = window?.divi?.rest?.loggedFetch; |
| 13 |
const ModuleGroups = window?.divi?.module?.ModuleGroups; |
| 14 |
|
| 15 |
/** |
| 16 |
* Settings Content Panel Component |
| 17 |
* |
| 18 |
* @param {Object} props Component props |
| 19 |
* @returns {JSX.Element} |
| 20 |
*/ |
| 21 |
const SettingsContent = ({ groupConfiguration }) => { |
| 22 |
const [templates, setTemplates] = useState({ |
| 23 |
0: { label: "- Select Template -" }, |
| 24 |
}); |
| 25 |
|
| 26 |
// Fetch templates from REST API |
| 27 |
useEffect(() => { |
| 28 |
const fetchTemplates = async () => { |
| 29 |
try { |
| 30 |
const result = await loggedFetch({ |
| 31 |
method: "GET", |
| 32 |
restRoute: "/spsp/divi5/v1/saved-templates", |
| 33 |
}); |
| 34 |
|
| 35 |
// loggedFetch returns the data directly or wrapped in response object |
| 36 |
const data = result?.data || result; |
| 37 |
|
| 38 |
if (data && typeof data === "object") { |
| 39 |
// Transform to the format expected by Divi select field |
| 40 |
const options = {}; |
| 41 |
options["0"] = { label: "- Select Template -" }; |
| 42 |
Object.entries(data).forEach(([id, label]) => { |
| 43 |
options[id] = { label: label }; |
| 44 |
}); |
| 45 |
|
| 46 |
setTemplates(options); |
| 47 |
} |
| 48 |
} catch (error) { |
| 49 |
console.error("Failed to fetch templates:", error); |
| 50 |
} |
| 51 |
}; |
| 52 |
|
| 53 |
fetchTemplates(); |
| 54 |
}, []); // Empty dependency array - fetch only once on mount |
| 55 |
|
| 56 |
// Update the select field options dynamically |
| 57 |
if (groupConfiguration?.mainContent?.component) { |
| 58 |
set( |
| 59 |
groupConfiguration, |
| 60 |
["mainContent", "component", "props", "fields", "templateIdInnerContent", "component", "props", "options"], |
| 61 |
templates |
| 62 |
); |
| 63 |
} |
| 64 |
|
| 65 |
return <ModuleGroups groups={groupConfiguration} />; |
| 66 |
}; |
| 67 |
|
| 68 |
// Export the component |
| 69 |
export { SettingsContent }; |
| 70 |
|
