import React, { useState } from "react";
import { __ } from "@wordpress/i18n";
import { hasDisplayablePlugins, getPluginPromoCount } from "../utils/pluginPromoUtils";
function IntegrationContent({
activeTab,
handleTabChange,
modalTarget,
handleModalChange,
closeModal,
handleIntegrationSwitch,
disableSwitches,
}) {
let eaelQuickSetup = localize?.eael_quick_setup_data;
let integrations_content = eaelQuickSetup?.integrations_content;
let ea_pro_local_plugin_data = eaelQuickSetup?.menu_items?.ea_pro_local_plugin_data;
let initialPluginList = integrations_content?.plugin_list;
let hasPluginPromo = getPluginPromoCount();
// Check if there are any non-installed plugins to display
const shouldShowPluginsPromo = hasDisplayablePlugins();
const [pluginList, setPluginList] = useState(initialPluginList);
const handleSaveClick = async (event) => {
event.preventDefault();
const button = event.target;
button.setAttribute("disabled", "disabled");
let fields = new FormData(
document.querySelector("form.eael-setup-wizard-form")
);
fields = new URLSearchParams(fields).toString();
try {
const response = await fetch(localize.ajaxurl, {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
body: new URLSearchParams({
action: "save_setup_wizard_data",
security: localize.nonce,
fields: fields,
}),
});
const result = await response.json();
if (result.success) {
handleModalChange({ currentTarget: { getAttribute: () => "modal" } });
setTimeout(() => {
window.location = result.data.redirect_url;
}, 3000);
} else {
button.removeAttribute("disabled");
Swal.fire({
icon: "error",
title: "Error",
text: "error",
});
}
} catch (error) {
button.removeAttribute("disabled");
Swal.fire({
icon: "error",
title: "Error",
text: "error",
});
}
};
return (
<>
<div className="eael-onboard-content-wrapper eael-onboard-integrations mb-4">
<div className="eael-connect-others flex gap-4 justify-between items-start mb-10">
<div className="flex gap-4 flex-1">
<div className="eael-others-icon eaicon-1">
<i className="ea-dash-icon ea-plug"></i>
</div>
<div className="max-w-454">
<h4>
{__(
"Fusion Hub for WordPress",
"essential-addons-for-elementor-lite"
)}
</h4>
<p>
{__(
"Boost your websites with some exclusive and popular plugins to get the most out of WordPress.",
"essential-addons-for-elementor-lite"
)}
</p>
</div>
</div>
<div className="toggle-wrapper flex items-center gap-2 eael-d-none">
<h5>
{__(
"Enable All Integrations",
"essential-addons-for-elementor-lite"
)}
</h5>
<label className="toggle-wrap">
<input type="checkbox" />
<span className="slider"></span>
</label>
</div>
</div>
<div className="eael-integration-content-wrapper onboard-scroll-wrap">
{pluginList.map((plugin) => (
'essential-blocks' === plugin?.slug ? '' :
<div className="eael-integration-item" key={plugin.basename}>
<div className="eael-integration-header flex gap-2 items-center">
<img src={plugin.logo} alt="logo" width="30" />
<h5>{plugin.title}</h5>
</div>
<div className="eael-integration-footer">
<p>{plugin.desc}</p>
<div className="integration-settings flex justify-between items-center">
<h5 className="toggle-label">
{plugin.local_plugin_data === false || !plugin.is_active
? __("Activate", "essential-addons-for-elementor-lite")
: __("Deactivate", "essential-addons-for-elementor-lite")}
</h5>
<button
className="wpdeveloper-plugin-installer eael-quick-setup-wpdeveloper-plugin-installer eael-d-none"
data-action={
plugin.local_plugin_data === false
? "install"
: "activate"
}
data-slug={plugin.slug}
data-basename={plugin.basename}
>
{plugin.local_plugin_data === false
? __("Install", "essential-addons-for-elementor-lite")
: plugin.is_active
? __("Activated", "essential-addons-for-elementor-lite")
: __("Activate", "essential-addons-for-elementor-lite")}
</button>
<label className="toggle-wrap">
<input
type="checkbox"
className="enable-integration-switch"
defaultChecked={plugin.is_active}
data-local_plugin_data={plugin.local_plugin_data}
onChange={(event) =>
handleIntegrationSwitch(event, plugin)
}
disabled={disableSwitches}
/>
<span className="slider"></span>
</label>
</div>
</div>
</div>
))}
</div>
<div className="eael-section-overlay"></div>
</div>
<div className="eael-section-wrapper flex flex-end gap-4">
<button
className="previous-btn flex gap-2 items-center eael-setup-next-btn"
type="button"
data-next={ hasPluginPromo && shouldShowPluginsPromo ? "pluginspromo" : !ea_pro_local_plugin_data ? "go-pro" : "elements" }
onClick={handleTabChange}
>
<i className="ea-dash-icon ea-left-arrow-long"></i>
{__("Previous", "essential-addons-for-elementor-lite")}
</button>
<button
className="primary-btn install-btn flex gap-2 items-center eael-setup-next-btn1 eael-setup-wizard-save"
data-next=""
onClick={handleSaveClick}
>
{__("Finish", "essential-addons-for-elementor-lite")}
</button>
</div>
</>
);
}
export default IntegrationContent;