OtherPlugins.js
48 lines
| 1 | import { useEffect} from "@wordpress/element"; |
| 2 | import { __ } from '@wordpress/i18n'; |
| 3 | import Placeholder from '../../Placeholder/Placeholder'; |
| 4 | import useOtherPlugins from "./OtherPluginsData"; |
| 5 | const OtherPlugins = () => { |
| 6 | const {dataLoaded, pluginData, pluginActions, fetchOtherPluginsData, error} = useOtherPlugins(); |
| 7 | useEffect(() => { |
| 8 | if (!dataLoaded) { |
| 9 | fetchOtherPluginsData(); |
| 10 | } |
| 11 | }, [] ) |
| 12 | |
| 13 | const otherPluginElement = (plugin, i) => { |
| 14 | return ( |
| 15 | <div key={i} className={"cmplz-suggested-plugin cmplz-"+plugin.slug}> |
| 16 | <img className="cmplz-suggested-plugin-img" src={cmplz_settings.plugin_url+'/upgrade/img/'+plugin.image} /> |
| 17 | <div className="cmplz-suggested-plugin-group"> |
| 18 | <div className="cmplz-suggested-plugin-group-title">{plugin.title}</div> |
| 19 | <div className="cmplz-suggested-plugin-group-desc">{plugin.summary}</div> |
| 20 | </div> |
| 21 | <div className="cmplz-suggested-plugin-desc-long"> |
| 22 | {plugin.description} |
| 23 | </div> |
| 24 | <div> |
| 25 | <div className="cmplz-other-plugin-status"> |
| 26 | {plugin.pluginAction==='upgrade-to-premium' && <a type="button" className="button-secondary cmplz-install-plugin" target="_blank" href={plugin.upgrade_url} rel="noopener noreferrer">{__("Upgrade", "complianz-gdpr")}</a>} |
| 27 | {plugin.pluginAction!=='upgrade-to-premium' && plugin.pluginAction!=='installed' && |
| 28 | <button type="button" className="button-secondary cmplz-install-plugin" onClick={ (e) => pluginActions(plugin.slug, plugin.pluginAction, e) } >{plugin.pluginActionNice}</button>} |
| 29 | {plugin.pluginAction==='installed' && __("Installed", "complianz-gdpr")} |
| 30 | </div> |
| 31 | </div> |
| 32 | </div> |
| 33 | ) |
| 34 | } |
| 35 | |
| 36 | if ( !dataLoaded || error) { |
| 37 | return (<Placeholder lines="3" error={error}></Placeholder>) |
| 38 | } |
| 39 | |
| 40 | return ( |
| 41 | <div className="cmplz-other-plugins-container"> |
| 42 | { pluginData.map((plugin, i) => otherPluginElement(plugin, i)) } |
| 43 | </div> |
| 44 | ) |
| 45 | } |
| 46 | |
| 47 | export default OtherPlugins; |
| 48 |