import React, { useEffect, useState } from 'react'
import PropTypes from 'prop-types'
import styles from './MissingRequirements.module.scss'
import ModalWrapper from '../Modal/ModalWrapper'
import installRequirement from '../../api/installRequirement'
import MainHeading from '../Titles/MainHeading'
import Button from '../Buttons/Button'
import ExternalLink from '../Buttons/ExternalLink'
const InstallRequirementInBackground = ({ requirement, completeCallback }) => {
if (!requirement) {
// If the user has chosen to skip this requirement (by unselecting it)
// then we fire the complete callback and return a 'Skipped' mesage for the UI to display
useEffect(() => {
completeCallback()
}, [])
return 'Skipped'
}
const { loading, data, error } = installRequirement(requirement)
useEffect(() => {
if (!loading) {
// If we have finished loading (i.e. installing the requirement)
// we call our completeCallback but we don't care if we errored on this one
// just continue onto the next.
completeCallback(error)
}
}, [loading])
return (
<>
{loading
? (
<>
Installing...
>
)
: null}
{error
? (
<>
{data && data.error
? (
<>
{data.error.data && data.error.data.url
? {data.error.message}
: data.error.message}
>
)
: 'Error'}
>
)
: null}
{!loading && !error
? (
<>
Success!
>
)
: null}
>
)
}
const RequiredCSSPreview = ({ previewCss }) => {
const [openRequiredCSSModal, setOpenRequiredCSSModal] = useState(false)
return (
<>
{openRequiredCSSModal
? (
setOpenRequiredCSSModal(false)}>
{previewCss}
)
: null}{' '}
{
event.preventDefault()
setOpenRequiredCSSModal(true)
return false
}}
>
Preview CSS
>
)
}
const MissingRequirements = ({ plugins, theme, settings, requiredCss, templateKitId, completeCallback }) => {
const [openRequirementsModal, setOpenRequirementsModal] = useState(false)
const [installingIndex, setInstallingIndex] = useState(null)
const [requirementsToInstall, setRequirementsToInstall] = useState({})
const installNextRequirement = () => {
setInstallingIndex(oldStep => oldStep + 1)
}
const missingRequirements = []
/**
plugins is an array of objects that looks like this:
plugins = [
{
author: "Elementor.com"
file: "elementor/elementor.php"
name: "Elementor"
slug: "elementor"
status: "activated"
url: ""
version: "2.9.6"
}
]
*/
plugins.forEach(plugin => {
if (plugin.status !== 'activated') {
missingRequirements.push({
plugin
})
}
})
/**
settings is an array of objects that looks like this:
settings = [
{
name: "Elementor default color schemes"
setting_name: "elementor_disable_color_schemes"
}
]
*/
settings.forEach(setting => {
missingRequirements.push({
setting
})
})
/**
required css is an array of objects that looks like this:
required_css = [
{
name: "Global CSS"
description: "This is the global CSS for this template kit, this can be edited from the WordPress Customizer."
file: "css/customizer.css"
}
]
*/
requiredCss.forEach(requiredCss => {
missingRequirements.push({
requiredCss: { ...requiredCss, templateKitId }
})
})
const missingCount = missingRequirements.length
// If we don't have any missing requirements then we can skip rendering anything for this banner
if (missingCount === 0) {
return null
}
const isRequirementSelectedForInstall = (index) => {
return typeof requirementsToInstall[index] === 'undefined' || requirementsToInstall[index]
}
// We have some missing requirements, display a banner with a button that opens a modal:
return (
<>
{openRequirementsModal
? (
Please install and activate these missing requirements for this Template Kit to work correctly. We recommend checking with your web developer before applying these changes.