Repository URL to install this package:
import {
createElement,
Component,
useEffect,
useState,
useContext,
createContext,
Fragment,
} from '@wordpress/element'
import {
Dialog,
DialogOverlay,
DialogContent,
} from '../../helpers/reach/dialog'
import Overlay from '../../helpers/Overlay'
import { Transition } from 'blocksy-options'
import { __ } from 'ct-i18n'
import cn from 'classnames'
import DashboardContext from '../../DashboardContext'
import { DemosContext } from '../DemoInstall'
import ModifyDemo from './Wizzard/ModifyDemo'
import ChildTheme from './Wizzard/ChildTheme'
import PickBuilder from './Wizzard/PickBuilder'
import Content from './Wizzard/Content'
import Plugins from './Wizzard/Plugins'
import DemoInstaller from './DemoInstaller'
import { getStepsForDemoConfiguration } from './Installer/useInstaller'
const DemoToInstall = ({ location, navigate }) => {
const [showDemoToInstall, setShowDemoToInstall] = useState(true)
const {
installerBlockingReleased,
demos_list,
currentDemo,
pluginsStatus,
currentlyInstalledDemo: globalCurrentlyInstalledDemo,
setCurrentDemo,
} = useContext(DemosContext)
const { is_child_theme } = useContext(DashboardContext)
const [currentlyInstalledDemo, setCurrentlyInstalledDemo] = useState(
globalCurrentlyInstalledDemo
)
const [demoConfiguration, setDemoConfiguration] = useState({
builder: '',
child_theme: false,
plugins: [],
content: {
options: true,
widgets: true,
content: true,
erase_content: true,
},
})
const [currentConfigurationStep, setCurrentConfigurationStep] = useState(0)
const [properDemoName, _] = (currentDemo || '').split(':')
const configurationSteps = [
'modify_demo',
'child_theme',
'builder',
'plugins',
'content',
'installer',
].filter((step) => {
if (!currentDemo) {
return false
}
if (step === 'modify_demo') {
if (!currentlyInstalledDemo) {
return false
}
if (currentlyInstalledDemo.demo.indexOf(properDemoName) === -1) {
return false
}
}
if (step === 'child_theme') {
if (is_child_theme) {
return false
}
}
const demoVariations = demos_list
.filter(({ name }) => name === properDemoName)
.sort((a, b) => {
if (a.builder < b.builder) {
return -1
}
if (a.builder > b.builder) {
return 1
}
return 0
})
if (step === 'plugins') {
if (
demoVariations
.reduce(
(currentPlugins, currentVariation) => [
...currentPlugins,
...(currentVariation.plugins || []),
],
[]
)
.filter((plugin) => !pluginsStatus[plugin]).length === 0
) {
return false
}
}
if (step !== 'builder') {
return true
}
return demoVariations.length > 1
})
const stepName = configurationSteps[currentConfigurationStep]
useEffect(() => {
if (!properDemoName) return
if (currentDemo.indexOf(':hide') > -1) return
const demoVariations = demos_list
.filter(({ name }) => name === properDemoName)
.sort((a, b) => {
if (a.builder < b.builder) {
return -1
}
if (a.builder > b.builder) {
return 1
}
return 0
})
setCurrentConfigurationStep(0)
setCurrentlyInstalledDemo(globalCurrentlyInstalledDemo)
setDemoConfiguration({
builder:
demoVariations.length === 1 ? demoVariations[0].builder : null,
child_theme: false,
plugins: demoVariations[0].plugins.map((plugin) => ({
plugin,
enabled: true,
})),
content: {
options: true,
widgets: true,
content: true,
erase_content: true,
},
})
}, [currentDemo])
return (
<Overlay
items={currentDemo}
isVisible={(currentDemo) =>
currentDemo && currentDemo.indexOf(':hide') === -1
}
className={cn('ct-demo-modal', {
'ct-demo-installer':
stepName === 'installer' || stepName === 'modify_demo',
})}
onDismiss={() => {
if (stepName === 'installer' && !installerBlockingReleased) {
return
}
setCurrentDemo(`${properDemoName}:hide`)
}}
render={() => (
<div className="ct-modal-content ct-demo-step-container">
<div className="ct-current-step">
<Transition
items={stepName}
from={{ opacity: 0 }}
enter={{ opacity: 1 }}
leave={{ opacity: 0 }}
initial={false}
config={(key, phase) => {
return phase === 'leave'
? {
duration: 150,
}
: {
delay: 150,
duration: 150,
}
}}>
{(stepName) => (props) => (
<Fragment>
{stepName === 'modify_demo' && (
<ModifyDemo
demoConfiguration={
demoConfiguration
}
nextStep={() => {
setCurrentConfigurationStep(
Math.min(
currentConfigurationStep +
1,
configurationSteps.length -
1
)
)
}}
style={props}
/>
)}
{stepName === 'child_theme' && (
<ChildTheme
style={props}
demoConfiguration={
demoConfiguration
}
setDemoConfiguration={
setDemoConfiguration
}
/>
)}
{stepName === 'plugins' && (
<Plugins
demoConfiguration={
demoConfiguration
}
style={props}
setDemoConfiguration={
setDemoConfiguration
}
/>
)}
{stepName === 'builder' && (
<PickBuilder
style={props}
demoConfiguration={
demoConfiguration
}
setDemoConfiguration={
setDemoConfiguration
}
/>
)}
{stepName === 'content' && (
<Content
style={props}
demoConfiguration={
demoConfiguration
}
setDemoConfiguration={
setDemoConfiguration
}
/>
)}
{stepName === 'installer' && (
<DemoInstaller
style={props}
demoConfiguration={
demoConfiguration
}
/>
)}
</Fragment>
)}
</Transition>
</div>
{stepName !== 'installer' && stepName !== 'modify_demo' && (
<div className="ct-demo-step-controls">
{currentConfigurationStep > 0 && (
<button
className="ct-demo-btn demo-back-btn"
onClick={() => {
setCurrentConfigurationStep(
Math.max(
currentConfigurationStep - 1,
0
)
)
}}>
{__('Back', 'blocksy-companion')}
</button>
)}
{configurationSteps.length > 2 && (
<ul className="ct-steps-pills">
{configurationSteps.map((step, index) =>
index ===
configurationSteps.length - 1 ? null : (
<li
className={cn({
active: step === stepName,
})}
key={step}>
{index + 1}
</li>
)
)}
</ul>
)}
<button
className="ct-demo-btn demo-main-btn"
disabled={
stepName === 'content' &&
getStepsForDemoConfiguration({
demoConfiguration,
pluginsStatus,
is_child_theme,
}).length === 0
}
onClick={() => {
setCurrentConfigurationStep(
Math.min(
currentConfigurationStep + 1,
configurationSteps.length - 1
)
)
}}>
{stepName === 'content'
? __('Install', 'blocksy-companion')
: __('Next', 'blocksy-companion')}
</button>
</div>
)}
</div>
)}
/>
)
}
export default DemoToInstall