File: /home/mountains/public_html/wp-content/plugins/kadence-starter-templates/inc/react/src/index.js
/**
* Internal dependencies
*/
// import HelpTab from './help';
// import ProSettings from './pro-extension';
// import RecommendedTab from './recomended';
// import StarterTab from './starter';
// import Sidebar from './sidebar';
// import CustomizerLinks from './customizer';
// import Notices from './notices';
function kadenceTryParseJSON(jsonString){
try {
var o = JSON.parse(jsonString);
// Handle non-exception-throwing cases:
// Neither JSON.parse(false) or JSON.parse(1234) throw errors, hence the type-checking,
// but... JSON.parse(null) returns null, and typeof null === "object",
// so we must check for that, too. Thankfully, null is falsey, so this suffices:
if (o && typeof o === "object") {
return o;
}
}
catch (e) { }
return false;
};
import map from 'lodash/map';
import LazyLoad from 'react-lazy-load';
import KadenceImporterFullPreview from './full-preview-mode.js'
import KadenceSubscribeForm from './subscribe-form'
/**
* WordPress dependencies
*/
const { __, sprintf } = wp.i18n;
const { Fragment, Component, render, PureComponent } = wp.element;
const { Modal, Spinner, ButtonGroup, SelectControl, DropdownMenu, Dropdown, Icon, Button, ExternalLink, ToolbarGroup, CheckboxControl, TextControl, ToggleControl, MenuItem, Tooltip, PanelBody } = wp.components;
import {
arrowLeft,
download,
heading,
update,
tag,
chevronLeft,
chevronDown,
} from '@wordpress/icons';
const cIcon = <svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path d="M15.984 18v2.016H8.015V18h7.969zM11.016 7.969v8.016h1.969V7.969h3l-3.984-3.984-3.984 3.984h3z"></path>
</svg>;
const eIcon = <svg
xmlns="http://www.w3.org/2000/svg"
fillRule="evenodd"
strokeLinejoin="round"
strokeMiterlimit="2"
clipRule="evenodd"
viewBox="0 0 180 180"
>
<circle cx="90.03" cy="89.952" r="90" fill="url(#_Linear1)"></circle>
<path fill="#fff" d="M50 50H66.003V130H50z"></path>
<path fill="#fff" d="M82 50H130.011V66H82z"></path>
<path fill="#fff" d="M82 82H130.011V98H82z"></path>
<path fill="#fff" d="M82 114.046H130.011V130.046H82z"></path>
<defs>
<linearGradient
id="_Linear1"
x1="0"
x2="1"
y1="0"
y2="0"
gradientTransform="rotate(-52.456 186.056 40.829) scale(178.658)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stopColor="#372b73"></stop>
<stop offset="1" stopColor="#e9335e"></stop>
</linearGradient>
</defs>
</svg>;
const eIconNew = <svg
xmlns="http://www.w3.org/2000/svg"
fillRule="evenodd"
strokeLinejoin="round"
strokeMiterlimit="2"
clipRule="evenodd"
viewBox="0 0 180 180"
>
<circle cx="90.03" cy="89.952" r="90" fill="#93003c"></circle>
<path fill="#ff5bd4" d="M50 50H66.003V130H50z"></path>
<path fill="#ff5bd4" d="M82 50H130.011V66H82z"></path>
<path fill="#ff5bd4" d="M82 82H130.011V98H82z"></path>
<path fill="#ff5bd4" d="M82 114.046H130.011V130.046H82z"></path>
</svg>;
const gbIcon = <svg
xmlns="http://www.w3.org/2000/svg"
x="0"
y="0"
enableBackground="new 0 0 720 864"
viewBox="0 0 720 864"
className="gblogo"
>
<g>
<path
d="M432.4 415.6c-2.5-1.7-5.9-1-7.6 1.5-9.9 14.9-30.9 15.7-32 15.7h-.5c-25.9 0-35.8 22.1-36.2 23-1.2 2.8.1 6 2.8 7.2.7.3 1.5.5 2.2.5 2.1 0 4.1-1.2 5-3.3.1-.2 6.9-15.4 24.4-16.4v28.3c-.7 6.1-3.6 10.9-8.7 14.5-5.3 3.7-12.4 5.6-21.1 5.6-10.4 0-18.9-3.6-25.2-10.7-6.4-7.1-9.6-17.2-9.6-30.2l.1-31.2c.5-11.5 3.6-20.6 9.5-27.1 6.4-7.1 14.8-10.7 25.2-10.7 8.7 0 15.8 1.9 21.1 5.6 5.3 3.7 8.3 8.8 8.8 15.4v.7c0 3.8 3.1 6.9 6.9 6.9s6.9-3.1 6.9-6.9v-.7c-1-9.9-5.5-17.7-13.6-23.6-8.1-5.9-18.2-8.8-30.4-8.8-14.5 0-26.2 4.8-35.1 14.3-8.4 8.9-12.8 20.6-13.3 35 0 1-.1 2-.1 3l.1 28.1h-.1c0 15.9 4.5 28.6 13.4 38.1s20.6 14.3 35.1 14.3c12.2 0 22.3-2.9 30.4-8.8 7.4-5.4 11.8-12.5 13.3-21.3l.3-31.4c9.1-2.2 21.5-7.2 29.3-19 2-2.5 1.3-5.9-1.3-7.6zM528.7 94.1h76.7c3.4 0 6.2-2.8 6.2-6.2s-2.8-6.2-6.2-6.2h-76.7c-3.4 0-6.2 2.8-6.2 6.2s2.8 6.2 6.2 6.2zM117.8 94.1h76.7c3.4 0 6.2-2.8 6.2-6.2s-2.8-6.2-6.2-6.2h-76.7c-3.4 0-6.2 2.8-6.2 6.2s2.7 6.2 6.2 6.2z"
className="st2"
></path>
<circle cx="609.3" cy="150.1" r="6.2" className="st2"></circle>
<circle cx="359.8" cy="130.6" r="6.2" className="st2"></circle>
<path
d="M244.8 150.2h.3c23.3 0 33.7-14.6 41.6-28.2 2.6-4.5 12.2-19.5 25.8-23.4 16.8-4.9 34.7 2.9 41.7 18.2 1 2.2 3.2 3.5 5.4 3.6h.7c2.2-.1 4.4-1.4 5.4-3.6 7-15.3 24.9-23.1 41.7-18.2 13.6 4 23.2 18.9 25.8 23.4 7.9 13.7 18.3 28.2 41.9 28.2 14.2 0 31-10.6 35.7-30.9 3.9-16.8-3.3-32-19-39.7-3.1-1.5-6.8-.3-8.3 2.8-1.5 3.1-.3 6.8 2.8 8.3 14.9 7.4 13.6 20.5 12.4 25.8-2.4 10.4-11.6 21.4-23.7 21.4-15.5 0-22.9-7.8-31.2-22.1-4.1-7-15.5-24-33-29.1-19.1-5.6-39.3 1.1-50.9 15.8-11.6-14.7-31.8-21.4-50.9-15.8-17.5 5.1-28.9 22.1-33 29.1-8.3 14.3-15.7 22.1-30.9 22.1h-.2c-13.2-.1-21.6-9.3-24-18.4-1.2-4.3-3.7-19 13.1-29 2.9-1.7 3.9-5.5 2.1-8.5-1.8-2.9-5.5-3.9-8.5-2.1-19.3 11.5-22.3 29.7-18.7 42.9 4.4 16.3 18.9 27.3 35.9 27.4z"
className="st2"
></path>
<path d="M360 734L360.1 734 360.1 734 360 734z" className="st2"></path>
<circle cx="108.1" cy="150.1" r="6.2" className="st2"></circle>
<circle cx="90.7" cy="88" r="6.2" className="st2"></circle>
<circle cx="631.3" cy="88" r="6.2" className="st2"></circle>
<circle cx="664.5" cy="485.3" r="6.2" className="st2"></circle>
<circle cx="639.6" cy="627.1" r="6.2" className="st2"></circle>
<circle cx="599.8" cy="644.8" r="6.2" className="st2"></circle>
<path
d="M231.9 111.2c0 9.2 7.5 16.7 16.7 16.7s16.7-7.5 16.7-16.7-7.5-16.7-16.7-16.7c-9.2-.1-16.7 7.4-16.7 16.7zm16.7-4.4c2.4 0 4.4 2 4.4 4.4 0 2.4-2 4.4-4.4 4.4-2.4 0-4.4-2-4.4-4.4 0-2.4 2-4.4 4.4-4.4zM473.6 127.9c9.2 0 16.7-7.5 16.7-16.7s-7.5-16.7-16.7-16.7-16.7 7.5-16.7 16.7 7.5 16.7 16.7 16.7zm0-21.1c2.4 0 4.4 2 4.4 4.4 0 2.4-2 4.4-4.4 4.4-2.4 0-4.4-2-4.4-4.4 0-2.4 2-4.4 4.4-4.4zM376.7 121.6c-3.2 1.2-4.8 4.7-3.6 7.9 1.2 3.2 4.7 4.8 7.9 3.7 1-.4 25-8.4 43.4 20.2 1.2 1.8 3.2 2.8 5.2 2.8 1.1 0 2.3-.3 3.3-1 2.9-1.8 3.7-5.7 1.9-8.5-19.2-29.7-46.4-29.4-58.1-25.1zM343.3 121.6c-.9-.3-9.1-3.2-20.3-1.5-10.4 1.5-25.3 7.4-37.7 26.7-1.8 2.9-1 6.7 1.9 8.5 1 .7 2.2 1 3.3 1 2 0 4-1 5.2-2.8 18.3-28.6 42.3-20.6 43.4-20.2 3.2 1.2 6.7-.5 7.9-3.7 1.2-3.2-.5-6.8-3.7-8zM627.8 138.5l30.1-34.2v49.3c0 3.4 2.8 6.2 6.2 6.2s6.2-2.8 6.2-6.2V88c0-2.6-1.6-4.9-4-5.8-2.4-.9-5.1-.2-6.8 1.7l-40.9 46.5c-2.3 2.6-2 6.5.6 8.7 2.4 2.3 6.3 2 8.6-.6zM56.8 159.9c3.4 0 6.2-2.8 6.2-6.2v-49.3l30.1 34.2c2.3 2.6 6.2 2.8 8.7.6 2.6-2.3 2.8-6.2.6-8.7L61.5 83.9c-1.7-1.9-4.4-2.6-6.8-1.7-2.4.9-4 3.2-4 5.8v65.7c0 3.4 2.7 6.2 6.1 6.2zM493.4 166c-2.9-.2-5.6 1.8-6.3 4.6-.7 2.9.7 5.9 3.3 7.1 9.8 4.6 18.7 6.4 26.7 6.4 15.3 0 27.5-6.7 36-13.7 13.6-11.2 20.6-25.3 20.9-25.9 1.4-2.9.4-6.4-2.4-8-6.3-3.7-17.2-6-33.8 4.1-8.3 5.1-14.7 11.2-15.8 12.3-15.2 13.4-27.9 13.1-28.6 13.1zm36.9-3.9l.3-.3c4.7-4.7 18-15.6 28.4-16.1-3 4.3-7.5 10.1-13.6 15.2-9 7.4-18.6 11-28.8 10.8 4.2-2.2 8.9-5.4 13.7-9.6zM151.4 136.5c-2.8 1.6-3.8 5.1-2.4 8 .3.6 7.3 14.7 20.9 25.9 8.5 7 20.6 13.7 36 13.7 8.1 0 17-1.8 26.7-6.4 2.7-1.3 4-4.2 3.3-7.1-.7-2.9-3.3-4.8-6.3-4.7-.5 0-13.3.4-28.5-13-1.1-1.1-7.5-7.2-15.8-12.3-16.6-10-27.6-7.7-33.9-4.1zm41.4 25.6c4.7 4.2 9.4 7.3 13.7 9.6-21.6.2-35.9-16.3-42.4-26 10.4.5 23.7 11.4 28.4 16.1l.3.3z"
className="st2"
></path>
<path
d="M671.8 664.6c-6.2-5.2-13-8.2-19.3-9.9 2.4-1.8 4.7-3.9 6.7-6.2 15.3-18 15.4-44.5.2-61.7-2.3-2.6-6.2-2.8-8.7-.5-2.6 2.3-2.8 6.2-.5 8.7 11.1 12.6 10.9 32.1-.4 45.5-9.2 10.8-26.7 13.4-31.9 14-15.7 1.7-33.3 5.3-42.8 26.8-1.5 3.3-2.4 7-2.6 11-2.2-.7-4.6-1.1-7-1.1-12.5 0-22.7 10.2-22.7 22.7 0 8.6 4.8 16.1 11.9 19.9-2.1 1.9-4.1 4-5.9 6.4-21-28.3-54.6-46.1-91.6-46.1-5.3 0-10.6.4-15.7 1.1 30.4-9.3 58.7-23.8 84.5-43 33.3-24.9 61-57.4 80-93.9 20-38.4 30.1-79.9 30.1-123.1v-.8-.2-.3c-.2-35.1-8-66.7-19.1-93.9 4.1.8 8 1.1 11.5 1.1 25.9 0 37.3-17.8 38.5-19.9 5.6-9.4 6.5-20.8 3.3-31.1.1-.3.1-.7.1-1.1V176.3c0-3.4-2.8-6.2-6.2-6.2s-6.2 2.8-6.2 6.2V271c-10.5-9.1-25.7-10.1-32-10.1-12.2.1-19.8-1.8-25.4-11.4-4.7-8.1-2-16.5 2.7-21.3 5.9-6 14.3-6.8 22.5-2.3 3 1.6 6.8.6 8.4-2.4 1.6-3 .6-6.8-2.4-8.4-13-7.2-27.6-5.4-37.3 4.4-9.6 9.8-11.4 24.3-4.6 36.1 8.9 15.3 22.4 17.5 35.7 17.5h.5c4 0 16.9.6 24.3 7.6 9.6 9.1 12.1 23.4 5.8 34 0 0-.1.1-.1.2-.5.9-12.4 21.1-45.6 10.5-10-21.2-21.6-39.2-32.4-53.6l-4.9 3.7 4.9-3.8-2-2.6c-21.3-35.7 3.3-73.7 16.1-89.8l7.2-8.2c2.2-2.6 2-6.5-.6-8.7-2.5-2.1-6.1-2-8.4.3-.2.2-1.3 1.3-3 3.2-11.1 11.3-54.5 51.3-96.6 30.4l-1.2-.8-.6-.4c-37.7-20.3-74.9-32-110.4-35-4.6-10.5-10.7-18.5-18.4-18.5-7.8 0-13.9 8.1-18.6 18.8-49.7 2.2-111.5 34.3-114.1 35.6-42.3 21.3-85.9-18.9-97-30.2-1.7-1.9-2.9-3-3-3.2-2.3-2.3-5.9-2.4-8.4-.3-2.6 2.2-2.8 6.1-.6 8.7l7.7 8.7c4.5 5.6 10.2 13.7 15 23.4 12 24.3 12.2 46.4.7 65.8-14.3 17.8-25.9 36.5-34.8 56.2-33.5 10.9-45.5-9.5-46-10.4 0-.1-.1-.1-.1-.2-6.3-10.6-3.8-24.9 5.8-34 7.4-7 20.3-7.6 24.3-7.6h.1c13.4 0 27.2-2.1 36.1-17.5 6.8-11.8 5-26.4-4.6-36.1-9.7-9.9-24.3-11.6-37.3-4.4-3 1.6-4.1 5.4-2.4 8.4 1.6 3 5.4 4.1 8.4 2.4 8.3-4.5 16.7-3.7 22.5 2.3 4.7 4.8 7.3 13.2 2.7 21.3-5.5 9.5-13 11.4-25 11.4h-.4c-5.5 0-18.3.8-28.5 7.4v-90.3c0-3.4-2.8-6.2-6.2-6.2s-6.2 2.8-6.2 6.2v104c-6.8 12.2-7.2 27.1-.2 39.1.7 1.3 5 8.5 14.6 13.9 5.5 3.1 13.4 6 23.9 6 3.8 0 8-.4 12.5-1.3-10.8 29-16.2 60.2-16.4 94.2v1.1c0 61.4 21.6 121.7 60.8 169.8 34.7 42.6 81.9 74.2 134.2 90.3-5.5-.8-11.1-1.2-16.7-1.2-36.7 0-70 17.5-91 45.4-1.7-2.2-3.6-4.3-5.7-6.1 6.6-4 11.1-11.2 11.1-19.5 0-12.5-10.2-22.7-22.7-22.7-2.3 0-4.5.4-6.6 1-.3-3.9-1.2-7.6-2.6-10.9-9.6-21.5-27.1-25.1-42.8-26.8-5.2-.6-22.7-3.2-31.9-14-11.6-13.1-11.8-32.6-.7-45.2 2.3-2.6 2-6.5-.5-8.7-2.6-2.3-6.5-2-8.7.5-15.1 17.2-15 43.7.2 61.7 2 2.4 4.3 4.4 6.7 6.2-6.3 1.7-13.1 4.8-19.3 9.9-14.7 12.1-22.2 32.3-22.4 59.8-.5 2.5.6 5.1 2.8 6.5 1 .6 2.1.9 3.2.9.4 0 .9-.1 1.3-.2h.1c.2 0 .3-.1.5-.2.3-.1.7-.2 1-.4.1 0 .1-.1.2-.1 1-.6 1.9-1.4 2.5-2.4 2.4-3.1 12.3-7 20.5-8.7 32.1-7 38.8-28.7 37.8-39.1-.3-3.4-3.3-5.9-6.7-5.6-3.4.3-5.9 3.3-5.6 6.7 0 .1.1 1.9-.5 4.6-1.5 6.2-7 16.9-27.6 21.4h-.2c-2.4.5-9.6 2.2-16.3 5.3 1.8-17.8 7.5-30.8 17.2-38.9 14.9-12.4 34.6-8.9 34.8-8.8.7.1 1.3.1 1.9 0 3.3.7 6.1 1.1 8.2 1.3 16.5 1.8 26.6 5.4 32.9 19.5 4.9 11.1-1.4 23.9-9.9 30.3-4.3 3.3-15.8 9.8-28.7-.8-2.6-2.2-6.5-1.8-8.7.8-2.2 2.6-1.8 6.5.8 8.7 5.8 4.8 12.3 7.6 19 8.4-8.6 7-14.4 15.8-17 20.4-8.4 14.5-15.2 22.3-26.5 22.4V733c0-3.4-2.8-6.2-6.2-6.2s-6.2 2.8-6.2 6.2v50.2c0 2.5 1.5 4.6 3.6 5.6 1.1.8 2.4 1.4 3.8 1.4h144c2.2 0 4-1.1 5.2-2.8.8-.8 1.5-1.8 1.8-3 5.7-22.1 25.6-37.5 48.4-37.5 20.4 0 38.5 12.4 46.2 30.9h-13.2c-5.4-13.3-18.4-22.2-33.1-22.2-16.1 0-30.3 10.9-34.6 26.4-.9 3.3 1.1 6.7 4.3 7.6 3.3.9 6.7-1.1 7.6-4.3 2.8-10.2 12.1-17.3 22.6-17.3 7.8 0 14.8 3.8 19.1 9.8h-3.6c-3.4 0-6.2 2.8-6.2 6.2 0 3.4 2.8 6.2 6.2 6.2h12.5c.2 0 .5.1.7.1.3 0 .6 0 .8-.1h24.8c3.4 0 6.2-2.8 6.2-6.2 0-.3 0-.6-.1-.9.1-.8.1-1.7-.1-2.6-7.3-27.1-32.1-46-60.2-46-27.2 0-51.1 17.6-59.4 43.3h-32.3c2.6-8.3 6.1-16 10.5-23.2.3-.4.5-.8.8-1.2 18.3-28.7 50.3-47.1 85.8-47.1 21 0 41.2 6.4 58.3 18.4.5.3 1 .6 1.5.7 2.6 3.1 5.2 6.4 7.7 9.8.6.8 1.1 1.6 1.7 2.4-.6 12.7 6.3 26 20.6 39.6.5 1.5 1 2.8 1.3 3.8v1.3c0 3.4 2.8 6.2 6.2 6.2 2.9 0 5.2-1.9 5.9-4.6 0-.1.9-3.1 2.7-8.1 12.9-12.6 19.3-24.9 19.2-36.8.8-1.2 1.7-2.5 2.6-3.7 2.8-3.8 5.7-7.5 8.7-11 17-11.8 36.9-18 57.7-18 44.8 0 84 29.2 97 71.5h-32.3c-8.2-25.7-32.1-43.3-59.4-43.3-28.1 0-52.8 18.9-60.2 46-.3 1-.3 2 0 3v.5c0 3.4 2.8 6.2 6.2 6.2h54.2c3.4 0 6.2-2.8 6.2-6.2 0-3.4-2.8-6.2-6.2-6.2h-19.7c4.3-6 11.3-9.8 19.1-9.8 10.7 0 20 7.2 22.7 17.6.7 2.8 3.2 4.6 6 4.6.5 0 1-.1 1.5-.2 3.3-.8 5.3-4.2 4.5-7.5-4.1-15.8-18.3-26.9-34.7-26.9-14.6 0-27.6 8.9-33.1 22.2h-12.5c7.6-18.5 25.8-30.9 46.2-30.9 22.8 0 42.7 15.4 48.4 37.5.1.5.4 1 .6 1.5.8 2.5 3.1 4.3 5.9 4.3H664c3.4 0 6.2-2.8 6.2-6.2v-.4-1.6c.1-.6.1-1.2.1-1.8 0-.1 0-.2-.1-.3V733c0-3.4-2.8-6.2-6.2-6.2s-6.2 2.8-6.2 6.2v42c-10.4-.8-16.9-8.5-24.9-22.3-2.6-4.4-8-12.7-16-19.5 5.5-1.2 10.8-3.8 15.7-7.9 2.6-2.2 3-6.1.8-8.7-2.2-2.6-6.1-3-8.7-.8-12.8 10.6-24.3 4.1-28.7.8-8.5-6.4-14.8-19.3-9.9-30.3 6.3-14.1 16.4-17.8 32.9-19.5 2.1-.2 4.9-.6 8.2-1.3.6.1 1.3.1 2 0 .2 0 19.7-3.6 34.7 8.8 9.8 8.1 15.6 21.1 17.3 39-6.8-3.2-14.1-4.9-16.4-5.4h-.2c-20.5-4.5-26.1-15.1-27.6-21.3-.6-2.6-.6-4.4-.5-4.6.3-3.4-2.2-6.4-5.6-6.7-3.4-.3-6.4 2.2-6.7 5.6-1 10.5 5.7 32.1 37.9 39.1 8.3 1.8 18.8 5.9 20.7 9 0 0 0 .1.1.1.3.4.6.8.9 1.1.1.1.2.1.3.2.3.2.6.5.9.6.1.1.3.2.4.2.3.2.6.3.9.4.1 0 .3.1.4.1.4.1.9.2 1.4.2.4 0 .7 0 1.1-.1.1 0 .2 0 .3-.1.3-.1.6-.2 1-.3h.1c.3-.1.5-.3.8-.4l.1-.1c.2-.1.4-.3.5-.4.1-.1.3-.2.4-.4l.4-.4c.1-.2.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2.2-.3.3-.5.1-.2.1-.4.2-.6.1-.2.1-.4.2-.6 0-.2.1-.4.1-.5 0-.2.1-.4.1-.7v-.1c-.1-28.3-7.7-48.8-22.6-61.1zM152.9 777.7H87.8c5.5-5.6 9.4-12.3 12.4-17.5 2.6-4.5 12.2-19.5 25.8-23.4 16-4.7 31 .8 38.4 13.5-4.9 8.5-8.8 17.7-11.5 27.4zm1.7-53.7c-5.7 0-10.3-4.6-10.3-10.3 0-5.7 4.6-10.3 10.3-10.3s10.3 4.6 10.3 10.3c0 5.7-4.7 10.3-10.3 10.3zm366.6-78.1l.9 1.1-.9-1.1zm.2-6.2c-58.4-6.8-100.6 18.3-125.8 40.5-10.9 9.6-19.5 19.5-26 27.9-1.2-.8-2.3-1.6-3.3-2.1v-17.6c47.3-47.5 94.3-61.7 125.5-65.2 20.7-2.3 37.4-.4 47.4 1.5-5.7 5.3-11.6 10.3-17.8 15zm73.3-87.2c-6 11.5-12.9 22.5-20.5 33.1-7.9-2.5-17.8-4.8-29.7-5.9 26.5-33.6 43.3-73.7 48.7-116 8.6-1 20.5-4.7 29.6-10.6-2.4 34.7-11.8 68.1-28.1 99.4zm-42.1-111.6l7.2-.3c2.4 10.7 10.5 19.3 21.1 22.2-5.6 42.8-23.4 83.2-51.8 116.2-13.7 0-29.6 1.6-47.6 5.5 42-34.2 69.4-85.7 71.1-143.6zm-117.5 158c-4 1.6-6.8 2.9-8.2 3.5-16.6 6.6-34.4 10.9-53 12.3l165.9-165.9c-5 66.8-46.6 123.4-104.7 150.1zm188.3-164.7c-.2 5.6-15.5 14.7-29 16.9-1.9.3-3.8.5-5.6.5-2.4 0-4.7-.5-6.8-1.4-6.3-2.7-10.7-8.9-10.7-16.1 0-7.2 4.4-13.4 10.7-16.1 2.1-.9 4.4-1.4 6.8-1.4 1.8 0 3.7.2 5.6.5 13.5 2.2 28.7 11.3 29 16.8v.3zM565.5 276l2.6 3.5c22.7 30.3 49.3 77.2 54.4 135.6-9-5.8-20.8-9.5-29.3-10.5-6.4-50.6-28.9-96.3-62.2-131.6 1.4-2.9 2.2-6.2 2.2-9.6 0-4.6-1.4-8.9-3.7-12.4l28.4-32.4c-5.4 20.6-2.8 40.1 7.6 57.4zm-82.9-70.1l1.3.9.7.4c9.9 5 20.5 7.5 31.5 7.5 11.6 0 23.7-2.8 35.9-8.4l-32 36.5c-2.9-1.4-6.1-2.1-9.6-2.1-4.5 0-8.6 1.3-12.1 3.5-31.5-23-68.8-38.3-109.4-43.3-1-7.3-3-17.7-6-27.9 32.1 3.6 65.6 14.6 99.7 32.9zm38.2 57.5c0 4.5-3 8.4-7.1 9.8-1 .3-2.1.5-3.2.5h-1c-4.6-.4-8.3-3.9-9.1-8.3-.1-.6-.2-1.3-.2-1.9 0-.7.1-1.3.2-2 .9-4.5 4.7-8 9.4-8.3H511.1c4.6.3 8.5 3.6 9.5 8 .1.6.2 1.1.2 1.7-.1.1 0 .3 0 .5zm-131.4-49.9c37.2 4.9 71.6 19.1 100.7 40.1-1.5 3-2.3 6.3-2.3 9.9 0 4.5 1.3 8.6 3.6 12.2l-49.8 56.8c-2.3 2.6-2 6.5.6 8.7 1.2 1 2.6 1.5 4.1 1.5 1.7 0 3.4-.7 4.7-2.1l49.7-56.7c3 1.5 6.3 2.3 9.9 2.3 4.6 0 8.8-1.4 12.3-3.7 31 33.2 51.9 75.8 58.1 123-10.7 3-19 11.8-21.2 22.8l-7.1.3c-1.5-45.7-19.2-89.3-50.1-123.2-2.3-2.5-6.2-2.7-8.7-.4-2.5 2.3-2.7 6.2-.4 8.7 27.2 29.8 43.4 67.6 46.5 107.6L473.5 355c-2.4-2.4-6.3-2.4-8.7 0-2.4 2.4-2.4 6.3 0 8.7l71.4 71.4-176 176-176-176 70.8-70.8c2.4-2.4 2.4-6.3 0-8.7-2.4-2.4-6.3-2.4-8.7 0l-65.7 65.7c3.5-45.5 23.9-86.4 55-116.2l31 35.4c1.2 1.4 2.9 2.1 4.7 2.1 1.4 0 2.9-.5 4.1-1.5 2.6-2.3 2.8-6.2.6-8.7l-31.1-35.5c28-23.4 63.1-38.5 101.6-41.4l-52.8 52.3c-2.4 2.4-2.4 6.3 0 8.7 1.2 1.2 2.8 1.8 4.4 1.8 1.6 0 3.1-.6 4.4-1.8l58-57.4 56.3 56.3c2.4 2.4 6.3 2.4 8.7 0 2.4-2.4 2.4-6.3 0-8.7l-51.2-51.2c31.7 2.4 61.9 13 88.2 31.1 2.8 1.9 6.7 1.2 8.6-1.6 1.9-2.8 1.2-6.7-1.6-8.6-30.4-20.9-65.8-32.5-102.8-33.6v-4.4c11.6-2.8 20.9-12.7 22.7-24.9zm-180.7 74.3c3.5 0 6.8-.8 9.7-2.2l8.9 10.2c-35.3 33.7-57.8 80.6-59.6 132.7l-5-.3c-2.4-11.7-11.5-20.9-23.2-23.3 6.1-46.3 26.5-88.1 56.5-120.9 3.7 2.4 8 3.8 12.7 3.8zm-10.3-22.6c0-.5 0-.9.1-1.4 0-.3.1-.5.1-.8.9-4.4 4.7-7.8 9.3-8.1h.7c4.7 0 8.7 3.2 9.9 7.6.2.9.4 1.8.4 2.7 0 .7-.1 1.4-.2 2.1-.9 4.4-4.7 7.8-9.3 8.1h-.8c-1.3 0-2.6-.3-3.7-.7-3.7-1.4-6.5-5.2-6.5-9.5zm-35.8 175.4l5.1.3c1.7 58 29.2 109.6 71.3 143.8-18.1-4-34-5.6-47.8-5.7-28.2-32.9-46.1-73.1-51.7-115.7 11.5-2.4 20.6-11.3 23.1-22.7zm17.9 8.2l165.9 165.9C258 608 187.2 537.2 180.5 448.8zm162.7-249c2.7-18.7 11.9-43.7 16.7-45.7 5.5 2.1 14 28 16.6 45.6.5 3.5.8 6.7.8 9.3 0 1.1-.1 2.1-.3 3.1-1.5 8.1-8.6 14.3-17.2 14.3s-15.7-6.2-17.2-14.3c-.2-1-.3-2.1-.3-3.1.1-2.7.4-5.8.9-9.2zm10.8 38.5v4.3c-44.6 1.4-85.4 18.1-117.4 44.9l-8.8-10.1c2.3-3.5 3.7-7.8 3.7-12.3 0-3.8-1-7.4-2.6-10.5 29.3-21.5 64-36 101.7-41.1 1.7 12.4 11.2 22.4 23.4 24.8zm-152.7-23.6c11 0 21.6-2.5 31.6-7.5.6-.3 57.7-30 103.9-34-3 10.1-5 20.6-6 27.8-41.1 5.1-79 21-110.7 44.6-3.4-2-7.2-3.1-11.4-3.1-3.5 0-6.8.8-9.7 2.2l-33.6-38.3c12.3 5.5 24.3 8.3 35.9 8.3zm-49.9 61.9l.5-.7c10.4-17.2 13-36.8 7.8-57.4l30 34.3c-2.3 3.5-3.7 7.8-3.7 12.3 0 3.3.7 6.4 2 9.3-32.7 35.2-54.7 80.4-61 130.4-8.9 1.4-20.7 5.2-29.6 10.9 3.5-52.8 21.2-98.5 54-139.1zM96.9 434c.2-5.8 16.3-13.8 29-16.4 2.8-.6 5.4-.9 7.6-.9 1.7 0 3.2.2 4.8.7 7.3 2.1 12.7 8.8 12.7 16.8s-5.4 14.7-12.7 16.8c-1.5.4-3.1.7-4.8.7-2.3 0-4.9-.3-7.6-.9-12.7-2.7-28.8-10.7-29-16.5v-.3zm.6 18.4c8.9 5.8 20.8 9.6 29.6 11 5.3 42.4 22.1 82.6 48.7 116.2-11.9 1.1-21.8 3.3-29.8 5.8-28.7-39.4-45.3-84.9-48.5-133zM154.9 597c-.3-.4-.6-.7-.9-1.1 30.1-8.3 63-3.9 86.1 1.6 27.9 6.7 48.3 16.4 48.5 16.5l.1-.2c22.1 8.8 46.2 13.7 71.4 13.7 25.1 0 49.1-4.8 71.1-13.6l.6-.3c2.6-1.1 5.3-2.2 7.8-3.4 8.5-3.5 22.8-8.7 40-12.8 23.3-5.6 56.3-10 86.4-1.6-5.2 6.4-10.6 12.5-16.4 18.4-8.4-2.3-29.8-6.7-58.7-3.6-31.4 3.4-77.6 16.8-124.8 60.4v-10.9c0-3.4-2.8-6.2-6.2-6.2s-6.2 2.8-6.2 6.2v10.3c-46.9-43.1-92.9-56.4-124.1-59.8-29.6-3.2-51.3 1.6-59.2 3.8-5.2-5.4-10.5-11.3-15.5-17.4zm26.3 27.8c10-2 26.9-4 48-1.6 55.5 6.2 98.1 37.9 124.8 64.5v18.1c-.9.5-1.9 1.1-3 1.9-6.5-8.3-15-18-25.7-27.4-25.2-22.3-67.6-47.5-126.2-40.5v.1c-6.2-4.8-12.2-9.8-17.9-15.1zm155.3 98c-11.7-15-24.5-26.3-37.3-34.8l.1-.3c-.3-.1-.6-.2-.9-.2-21.3-13.9-42.7-20-59.9-22.5-8.1-4.2-16.1-8.9-23.8-14 37.7-1.1 71.9 11.7 102.1 38.2 10.4 9.1 18.6 18.5 24.8 26.6-1.9 2.1-3.6 4.4-5.1 7zm29.9 37.5c-1.5 1.8-3.1 3.6-4.9 5.4-.4.4-.9.9-1.4 1.3l-.1.1-.1.1v-.2c-.2-.2-.5-.4-.7-.7-2-1.9-3.7-3.8-5.3-5.7-7.3-8.7-10.5-16.8-9.4-24.2.1-.6.2-1.2.4-1.8.8-3.2 2.3-6 4.1-8.4 1.5-2 3.2-3.7 4.9-5.2 1.5-1.3 3-2.4 4.3-3.3.6-.4 1.1-.7 1.6-1 0 0 .1 0 .1-.1h.1c.7.4 1.4.9 2.3 1.5 1.2.8 2.6 1.9 4 3.1 1.8 1.6 3.6 3.5 5.1 5.6 1.8 2.6 3.3 5.5 3.9 8.8 0 .2.1.5.2.7 1.1 7.3-2 15.3-9.1 24zm24.4-45.1c-.2.2-.4.4-.5.6-2.3 2.6-4.4 5.2-6.3 7.7-1.5-2.6-3.2-5-5-7.1 6.2-8.1 14.6-17.8 25.2-27.1 30-26.4 64.1-39.2 101.5-38.3-7.8 5.1-15.8 9.9-24 14.1-42.8 6.5-72.1 28.7-90.9 50.1zm174.5-11.8c5.7 0 10.3 4.6 10.3 10.3 0 5.7-4.6 10.3-10.3 10.3s-10.3-4.6-10.3-10.3c0-5.6 4.6-10.3 10.3-10.3zm31.2 32.1c13.6 4 23.2 18.9 25.8 23.4 3.2 5.6 7.5 13 13.8 18.8H567c-2.6-9.4-6.3-18.3-11-26.5 7.6-13.6 24.6-20.4 40.5-15.7z"
className="st2"
></path>
<path
d="M69.6 301.1c0 10.1 8.2 18.4 18.4 18.4s18.4-8.2 18.4-18.4c0-10.1-8.2-18.4-18.4-18.4s-18.4 8.3-18.4 18.4zm24.4 0c0 3.3-2.7 6-6 6s-6-2.7-6-6 2.7-6 6-6 6 2.7 6 6zM648.7 301.1c0-10.1-8.2-18.4-18.4-18.4-10.1 0-18.4 8.2-18.4 18.4 0 10.1 8.2 18.4 18.4 18.4s18.4-8.2 18.4-18.4zm-24.4 0c0-3.3 2.7-6 6-6s6 2.7 6 6-2.7 6-6 6c-3.3.1-6-2.6-6-6zM666.4 346.9c-2.3-.9-5-.4-6.8 1.4-8.1 8.3-21.4 8-21.6 8h-.2c-3.3 0-6 2.6-6.2 5.9-.1 3.4 2.5 6.3 5.9 6.4.6 0 10.4.3 20.4-4.3v100.9c0 3.4 2.8 6.2 6.2 6.2s6.2-2.8 6.2-6.2V352.6c-.1-2.5-1.6-4.8-3.9-5.7zM55.7 471.4c3.4 0 6.2-2.8 6.2-6.2V364.3c10 4.6 19.8 4.3 20.4 4.3 3.4-.1 6.1-3 5.9-6.4-.1-3.4-3-6.1-6.4-5.9-.1 0-13.5.3-21.6-8-1.8-1.8-4.4-2.3-6.8-1.4-2.3.9-3.8 3.2-3.8 5.7v112.7c-.1 3.4 2.7 6.1 6.1 6.1zM671.3 574.3c0-3.4-2.8-6.2-6.2-6.2h-40c-3.4 0-6.2 2.8-6.2 6.2s2.8 6.2 6.2 6.2h40c3.4 0 6.2-2.7 6.2-6.2zM629.8 598c3.4 0 6.2-2.8 6.2-6.2s-2.8-6.2-6.2-6.2h-15.4c-3.4 0-6.2 2.8-6.2 6.2s2.8 6.2 6.2 6.2h15.4zM644.8 609.4c0-3.4-2.8-6.2-6.2-6.2h-38.2c-3.4 0-6.2 2.8-6.2 6.2s2.8 6.2 6.2 6.2h38.2c3.4 0 6.2-2.7 6.2-6.2zM620.6 627.1c0-3.4-2.8-6.2-6.2-6.2h-29.9c-3.4 0-6.2 2.8-6.2 6.2s2.8 6.2 6.2 6.2h29.9c3.4 0 6.2-2.8 6.2-6.2zM565.1 638.6c-3.4 0-6.2 2.8-6.2 6.2s2.8 6.2 6.2 6.2h17c3.4 0 6.2-2.8 6.2-6.2s-2.8-6.2-6.2-6.2h-17zM665.1 532.8h-22.3c-3.4 0-6.2 2.8-6.2 6.2s2.8 6.2 6.2 6.2h22.3c3.4 0 6.2-2.8 6.2-6.2s-2.8-6.2-6.2-6.2zM665.1 550.5H634c-3.4 0-6.2 2.8-6.2 6.2s2.8 6.2 6.2 6.2h31.1c3.4 0 6.2-2.8 6.2-6.2s-2.8-6.2-6.2-6.2zM665.1 497.5h-9.9c-3.4 0-6.2 2.8-6.2 6.2 0 3.4 2.8 6.2 6.2 6.2h9.9c3.4 0 6.2-2.8 6.2-6.2 0-3.4-2.8-6.2-6.2-6.2zM665.1 515.2h-15.2c-3.4 0-6.2 2.8-6.2 6.2s2.8 6.2 6.2 6.2h15.2c3.4 0 6.2-2.8 6.2-6.2s-2.8-6.2-6.2-6.2z"
className="st2"
></path>
<circle cx="55.5" cy="485.6" r="6.2" className="st2"></circle>
<circle cx="80.5" cy="627.3" r="6.2" className="st2"></circle>
<circle cx="120.3" cy="645" r="6.2" className="st2"></circle>
<path
d="M54.9 580.7h40c3.4 0 6.2-2.8 6.2-6.2 0-3.4-2.8-6.2-6.2-6.2h-40c-3.4 0-6.2 2.8-6.2 6.2 0 3.5 2.8 6.2 6.2 6.2zM105.6 585.9H90.2c-3.4 0-6.2 2.8-6.2 6.2 0 3.4 2.8 6.2 6.2 6.2h15.4c3.4 0 6.2-2.8 6.2-6.2 0-3.4-2.8-6.2-6.2-6.2zM119.6 603.5H81.4c-3.4 0-6.2 2.8-6.2 6.2 0 3.4 2.8 6.2 6.2 6.2h38.2c3.4 0 6.2-2.8 6.2-6.2 0-3.5-2.8-6.2-6.2-6.2zM135.5 621.1h-29.9c-3.4 0-6.2 2.8-6.2 6.2 0 3.4 2.8 6.2 6.2 6.2h29.9c3.4 0 6.2-2.8 6.2-6.2 0-3.4-2.8-6.2-6.2-6.2zM131.7 645c0 3.4 2.8 6.2 6.2 6.2h17c3.4 0 6.2-2.8 6.2-6.2 0-3.4-2.8-6.2-6.2-6.2h-17c-3.4 0-6.2 2.8-6.2 6.2zM54.9 545.4h22.3c3.4 0 6.2-2.8 6.2-6.2 0-3.4-2.8-6.2-6.2-6.2H54.9c-3.4 0-6.2 2.8-6.2 6.2 0 3.4 2.8 6.2 6.2 6.2zM54.9 563.1H86c3.4 0 6.2-2.8 6.2-6.2 0-3.4-2.8-6.2-6.2-6.2H54.9c-3.4 0-6.2 2.8-6.2 6.2 0 3.4 2.8 6.2 6.2 6.2zM54.9 510.1h9.9c3.4 0 6.2-2.8 6.2-6.2 0-3.4-2.8-6.2-6.2-6.2h-9.9c-3.4 0-6.2 2.8-6.2 6.2 0 3.4 2.8 6.2 6.2 6.2zM54.9 527.7h15.2c3.4 0 6.2-2.8 6.2-6.2 0-3.4-2.8-6.2-6.2-6.2H54.9c-3.4 0-6.2 2.8-6.2 6.2 0 3.5 2.8 6.2 6.2 6.2zM360 767.1c.1-.1 0-.1 0-.2v.2zM641.2 202.7c.1 0 .1 0 0 0 2.8 0 5.3-1.9 6-4.7 2.2-8.8 1.3-16.3-2.9-22.5-6.7-10-19-11.9-20.4-12.1-3.2-.4-6.2 1.6-6.9 4.8-2.3 10.5-1 18.9 4 25.1 7.4 9 19 9.3 20.2 9.4zm-7-20.2c1.2 1.9 1.9 4.1 1.9 6.7-1.8-.7-3.8-1.8-5.2-3.6-1.6-2-2.4-4.6-2.4-7.9 2 1 4.2 2.6 5.7 4.8zM601 113.3c-6.7-10-19-11.9-20.4-12.1-3.2-.4-6.2 1.6-6.9 4.8-2.3 10.5-1 18.9 4 25.1 7.2 9 18.8 9.3 20.1 9.3 2.8 0 5.3-1.9 6-4.7 2.3-8.6 1.4-16.2-2.8-22.4zm-13.5 10.1c-1.6-2-2.4-4.6-2.4-7.9 2.1 1 4.3 2.6 5.7 4.8 1.2 1.9 1.9 4.1 1.9 6.7-1.8-.7-3.8-1.8-5.2-3.6zM97.3 163.4c-1.4.2-13.6 2.1-20.4 12.1-4.1 6.2-5.1 13.7-2.9 22.5.7 2.7 3.2 4.7 6 4.7 1.3 0 12.9-.3 20.1-9.3 5-6.2 6.3-14.7 4-25.1-.6-3.2-3.6-5.3-6.8-4.9zm-6.7 22.2c-1.4 1.8-3.4 2.9-5.3 3.6 0-2.6.7-4.9 1.9-6.7 1.5-2.2 3.7-3.8 5.7-4.8 0 3.3-.8 5.9-2.3 7.9zM139.7 101.2c-1.4.2-13.6 2.1-20.4 12.1-4.1 6.2-5.1 13.7-2.9 22.5.7 2.7 3.2 4.7 6 4.7 1.3 0 12.9-.3 20.1-9.3 5-6.2 6.3-14.7 4-25.1-.7-3.2-3.6-5.3-6.8-4.9zm-6.8 22.2c-1.4 1.8-3.4 2.9-5.3 3.6 0-2.6.7-4.9 1.9-6.7 1.5-2.2 3.7-3.8 5.7-4.8 0 3.3-.7 5.9-2.3 7.9zM555.1 392c.4 3.2 3 5.5 6.1 5.5h.7c3.4-.4 5.8-3.5 5.4-6.9-6.2-54-43.1-92.2-44.7-93.8-2.4-2.4-6.3-2.5-8.7-.1-2.4 2.4-2.5 6.3-.1 8.7.4.4 35.6 36.9 41.3 86.6zM159.1 397.4h.7c3.1 0 5.8-2.3 6.1-5.5 5.7-49.7 40.9-86.2 41.2-86.5 2.4-2.4 2.3-6.4-.1-8.7-2.4-2.4-6.4-2.4-8.7.1-1.6 1.6-38.4 39.8-44.7 93.8-.3 3.4 2.1 6.4 5.5 6.8z"
className="st2"
></path>
</g>
</svg>;
class KadenceImporter extends Component {
constructor() {
super( ...arguments );
this.runAjax = this.runAjax.bind( this );
this.runPluginInstall = this.runPluginInstall.bind( this );
this.runPluginInstallSingle = this.runPluginInstallSingle.bind( this );
this.runSubscribe = this.runSubscribe.bind( this );
this.runSubscribeSingle = this.runSubscribeSingle.bind( this );
this.loadTemplateData = this.loadTemplateData.bind( this );
this.reloadTemplateData = this.reloadTemplateData.bind( this );
this.loadPluginData = this.loadPluginData.bind( this );
this.focusMode = this.focusMode.bind( this );
this.fullFocusMode = this.fullFocusMode.bind( this );
this.jumpToImport = this.jumpToImport.bind( this );
this.selectedMode = this.selectedMode.bind( this );
this.selectedFullMode = this.selectedFullMode.bind( this );
this.backToDash = this.backToDash.bind( this );
this.saveConfig = this.saveConfig.bind( this );
this.state = {
category: 'all',
level: 'all',
activeTemplate: '',
colorPalette: '',
fontPair: '',
search: null,
isFetching: false,
isImporting: false,
isSelected: false,
response:'',
isPageSelected: false,
starterSettings: ( kadenceStarterParams.starterSettings ? JSON.parse( kadenceStarterParams.starterSettings ) : {} ),
selectedPage: 'home',
progress: '',
focusMode: false,
finished: false,
overrideColors: false,
overrideFonts: false,
isOpenCheckColor: false,
isOpenCheckFont: false,
isOpenCheckPast: false,
removePast: false,
errorTemplates:false,
templates: ( kadenceStarterParams.templates ? kadenceStarterParams.templates : [] ),
etemplates: ( kadenceStarterParams.etemplates ? kadenceStarterParams.etemplates : [] ),
activeTemplates: false,
palettes: ( kadenceStarterParams.palettes ? kadenceStarterParams.palettes : [] ),
fonts: ( kadenceStarterParams.fonts ? kadenceStarterParams.fonts : [] ),
logo: ( kadenceStarterParams.logo ? kadenceStarterParams.logo : '' ),
hasContent: ( kadenceStarterParams.has_content ? kadenceStarterParams.has_content : false ),
hasPastContent: ( kadenceStarterParams.has_previous ? kadenceStarterParams.has_previous : false ),
isSaving: false,
isLoadingPlugins: false,
activePlugins: false,
showForm: true,
templatePlugins: '',
isSubscribed: kadenceStarterParams.subscribed ? true : false,
email: kadenceStarterParams.user_email,
privacy: false,
emailError: false,
privacyError: false,
settingOpen: false,
installContent: true,
installCustomizer: true,
installWidgets: true,
};
}
componentDidMount() {
if ( ! kadenceStarterParams.openBuilder && ! kadenceStarterParams.ctemplates ) {
wp.api.loadPromise.then( () => {
this.saveConfig( 'builderType', 'blocks' );
});
}
}
saveConfig( setting, settingValue ) {
this.setState( { isSaving: true } );
const config = ( kadenceStarterParams.starterSettings ? JSON.parse( kadenceStarterParams.starterSettings ) : {} );
if ( ! config[ setting ] ) {
config[ setting ] = '';
}
config[ setting ] = settingValue;
this.setState( { starterSettings: config } );
if ( wp.api.models.Settings ) {
const settingModel = new wp.api.models.Settings( { kadence_starter_templates_config: JSON.stringify( config ) } );
settingModel.save().then( response => {
this.setState( { starterSettings: config, isSaving: false } );
kadenceStarterParams.starterSettings = JSON.stringify( config );
} );
}
}
capitalizeFirstLetter( string ) {
return string.charAt( 0 ).toUpperCase() + string.slice( 1 );
}
focusMode( template_id ) {
this.setState( { activeTemplate: template_id, focusMode: true, isSelected: false, activePlugins:false } )
}
fullFocusMode( template_id ) {
this.setState( { activeTemplate: template_id, focusMode: true, isSelected: true, activePlugins:false } )
}
jumpToImport( template_id ) {
this.setState( { isImporting: true, activeTemplate: template_id, focusMode: true, isSelected: true, fontPair: '', colorPalette: '', activePlugins:false } )
}
selectedFullMode() {
this.setState( { isSelected: true } );
}
selectedMode( page_id ) {
this.setState( { selectedPage: page_id, isPageSelected: true, isImporting: true } );
}
backToDash() {
this.setState( { isFetching: false, activeTemplate: '', activePlugins:false, overrideColors:false, overrideFonts:false, colorPalette: '', fontPair: '', focusMode: false, finished: false, isImporting: false, isSelected:false, isPageSelected:false, progress: '', selectedPage: 'home' } );
}
reloadTemplateData() {
this.setState( { errorTemplates: false, isSaving: true, activeTemplates: 'loading' } );
var data_key = ( kadenceStarterParams.proData && kadenceStarterParams.proData.ktp_api_key ? kadenceStarterParams.proData.ktp_api_key : '' );
var data_email = ( kadenceStarterParams.proData && kadenceStarterParams.proData.activation_email ? kadenceStarterParams.proData.activation_email : '' );
if ( ! data_key ) {
data_key = ( kadenceStarterParams.proData && kadenceStarterParams.proData.ithemes_key ? kadenceStarterParams.proData.ithemes_key : '' );
if ( data_key ) {
data_email = 'iThemes';
}
}
var data = new FormData();
data.append( 'action', 'kadence_import_reload_template_data' );
data.append( 'security', kadenceStarterParams.ajax_nonce );
data.append( 'api_key', data_key );
data.append( 'api_email', data_email );
data.append( 'template_type', this.state.starterSettings['builderType'] );
var control = this;
jQuery.ajax({
method: 'POST',
url: kadenceStarterParams.ajax_url,
data: data,
contentType: false,
processData: false,
})
.done( function( response, status, stately ) {
if ( response ) {
const o = kadenceTryParseJSON( response );
if ( o ) {
control.setState( { activeTemplates: o, errorTemplates: false, isSaving: false } );
} else {
control.setState( { activeTemplates: 'error', errorTemplates: true, isSaving: false } );
}
}
})
.fail( function( error ) {
console.log(error);
control.setState( { activeTemplates: 'error', errorTemplates: true, isSaving: false } );
});
}
loadTemplateData() {
this.setState( { errorTemplates: false, isSaving: true, activeTemplates: 'loading' } );
var data_key = ( kadenceStarterParams.proData && kadenceStarterParams.proData.ktp_api_key ? kadenceStarterParams.proData.ktp_api_key : '' );
var data_email = ( kadenceStarterParams.proData && kadenceStarterParams.proData.activation_email ? kadenceStarterParams.proData.activation_email : '' );
if ( ! data_key ) {
data_key = ( kadenceStarterParams.proData && kadenceStarterParams.proData.ithemes_key ? kadenceStarterParams.proData.ithemes_key : '' );
if ( data_key ) {
data_email = 'iThemes';
}
}
var data = new FormData();
data.append( 'action', 'kadence_import_get_template_data' );
data.append( 'security', kadenceStarterParams.ajax_nonce );
data.append( 'api_key', data_key );
data.append( 'api_email', data_email );
data.append( 'template_type', this.state.starterSettings['builderType'] );
var control = this;
jQuery.ajax( {
method: 'POST',
url: kadenceStarterParams.ajax_url,
data: data,
contentType: false,
processData: false,
} )
.done( function( response, status, stately ) {
if ( response ) {
const o = kadenceTryParseJSON( response );
if ( o ) {
control.setState( { activeTemplates: o, errorTemplates: false, isSaving: false } );
} else {
control.setState( { activeTemplates: 'error', errorTemplates: true, isSaving: false } );
}
}
})
.fail( function( error ) {
console.log(error);
control.setState( { activeTemplates: 'error', errorTemplates: true, isSaving: false } );
});
}
loadPluginData( selected, builder ) {
this.setState( { isLoadingPlugins: true } );
var data = new FormData();
data.append( 'action', 'kadence_check_plugin_data' );
data.append( 'security', kadenceStarterParams.ajax_nonce );
data.append( 'selected', selected );
data.append( 'builder', builder );
var control = this;
jQuery.ajax( {
method: 'POST',
url: kadenceStarterParams.ajax_url,
data: data,
contentType: false,
processData: false,
} )
.done( function( response, status, stately ) {
if ( response ) {
if ( 'undefined' !== typeof response.success ) {
control.setState( { templatePlugins: 'error', activePlugins: true, isLoadingPlugins: false } );
} else {
//const o = kadenceTryParseJSON( response );
if ( typeof response === 'object' && response !== null ) {
control.setState( { templatePlugins: response, activePlugins: true, isLoadingPlugins: false } );
} else {
control.setState( { templatePlugins: 'error', activePlugins: true, isLoadingPlugins: false } );
}
}
}
})
.fail( function( error ) {
console.log(error);
control.setState( { templatePlugins: 'error', activePlugins: true, isLoadingPlugins: false } );
});
}
runPluginInstallSingle( selected, page_id, builder ) {
this.setState( { progress: 'plugins', isFetching: true, showForm: false } );
var data = new FormData();
data.append( 'action', 'kadence_import_install_plugins' );
data.append( 'security', kadenceStarterParams.ajax_nonce );
data.append( 'selected', selected );
data.append( 'builder', builder );
data.append( 'page_id', page_id );
this.runPageAjax( data );
}
runSubscribeSingle( email, selected ) {
this.setState( { progress: 'subscribe', isFetching: true, showForm: false } );
var data = new FormData();
data.append( 'action', 'kadence_import_subscribe' );
data.append( 'security', kadenceStarterParams.ajax_nonce );
data.append( 'email', email );
data.append( 'selected', selected );
this.runPageAjax( data );
}
runRemovePast( selected, builder ) {
this.setState( { progress: 'remove', isFetching: true, showForm: false } );
var data = new FormData();
data.append( 'action', 'kadence_remove_past_import_data' );
data.append( 'security', kadenceStarterParams.ajax_nonce );
data.append( 'selected', selected );
data.append( 'builder', builder );
this.runAjax( data );
}
runPluginInstall( selected, builder ) {
this.setState( { progress: 'plugins', isFetching: true, showForm: false } );
var data = new FormData();
data.append( 'action', 'kadence_import_install_plugins' );
data.append( 'security', kadenceStarterParams.ajax_nonce );
data.append( 'selected', selected );
data.append( 'builder', builder );
this.runAjax( data );
}
runSubscribe( email, selected ) {
this.setState( { progress: 'subscribe', isFetching: true, showForm: false } );
var data = new FormData();
data.append( 'action', 'kadence_import_subscribe' );
data.append( 'security', kadenceStarterParams.ajax_nonce );
data.append( 'email', email );
data.append( 'selected', selected );
this.runAjax( data );
}
runPageAjax( data ) {
var control = this;
jQuery.ajax({
method: 'POST',
url: kadenceStarterParams.ajax_url,
data: data,
contentType: false,
processData: false,
})
.done( function( response, status, stately ) {
if ( 'undefined' !== typeof response.status && 'newAJAX' === response.status ) {
control.state.progress = 'contentNew';
control.runPageAjax( data );
} else if ( 'undefined' !== typeof response.status && 'subscribeSuccess' === response.status ) {
control.setState( { progress: 'plugins' } );
var newData = new FormData();
newData.append( 'action', 'kadence_import_install_plugins' );
newData.append( 'security', kadenceStarterParams.ajax_nonce );
newData.append( 'selected', control.state.activeTemplate );
newData.append( 'builder', control.state.starterSettings['builderType'] );
newData.append( 'page_id', control.state.selectedPage );
control.runPageAjax( newData );
} else if ( 'undefined' !== typeof response.status && 'pluginSuccess' === response.status ) {
control.setState( { progress: 'content' } );
var newData = new FormData();
newData.append( 'action', 'kadence_import_single_data' );
newData.append( 'security', kadenceStarterParams.ajax_nonce );
newData.append( 'selected', control.state.activeTemplate );
newData.append( 'builder', control.state.starterSettings['builderType'] );
newData.append( 'page_id', control.state.selectedPage );
newData.append( 'override_colors', control.state.overrideColors );
newData.append( 'override_fonts', control.state.overrideFonts );
newData.append( 'palette', control.state.colorPalette );
newData.append( 'font', control.state.fontPair );
control.runPageAjax( newData );
} else if ( 'undefined' !== typeof response.message ) {
//jQuery( '.kadence_starter_templates_finished' ).append( '<p>' + response.message + '</p>' );
control.setState( { finished: true, hasContent:true, hasPastContent:true, isFetching: false, colorPalette: '', fontPair: '', focusMode: false, isImporting: false, isSelected:false, progress: '', showForm: true, response: '<p>' + response.message + '</p>' } );
} else if ( response === 'emailDomainPostError' || response === 'emailDomainPreError' ) {
control.setState( { isFetching: false, progress: '', showForm: true, emailError: true } );
} else {
//jQuery( '.kadence_starter_templates_error' ).append( '<div class="notice kadence_starter_templates_response notice-error"><p>' + response + '</p></div>' );
control.setState( { finished: true, hasContent:true, hasPastContent:true, isFetching: false, colorPalette: '', fontPair: '', focusMode: false, isImporting: false, isSelected:false, progress: '', showForm: true, response: '<div class="notice kadence_starter_templates_response notice-error"><p>' + response + '</p></div>' } );
}
})
.fail( function( error ) {
//jQuery( '.kadence_starter_templates_error' ).append( '<div class="notice kadence_starter_templates_response notice-error"><p>Error: ' + error.statusText + ' (' + error.status + ')' + '</p></div>' );
control.setState( { finished: true, hasContent:true, hasPastContent:true, isFetching: false, colorPalette: '', fontPair: '', focusMode: false, isImporting: false, isSelected:false, progress: '', showForm: true, response: '<div class="notice kadence_starter_templates_response notice-error"><p>Error: ' + error.statusText + ' (' + error.status + ')' + '</p></div>' } );
});
}
runAjax( data ) {
var control = this;
jQuery.ajax({
method: 'POST',
url: kadenceStarterParams.ajax_url,
data: data,
contentType: false,
processData: false,
})
.done( function( response, status, stately ) {
if ( 'undefined' !== typeof response.status && 'newAJAX' === response.status ) {
if ( control.state.progress === 'contentNew' ) {
control.state.progress = 'contentNewer';
} else if ( control.state.progress === 'contentNewer' ) {
control.state.progress = 'contentNewest';
} else {
control.state.progress = 'contentNew';
}
control.runAjax( data );
} else if ( 'undefined' !== typeof response.status && 'customizerAJAX' === response.status ) {
var newData = new FormData();
newData.append( 'security', kadenceStarterParams.ajax_nonce );
if ( control.state.installCustomizer ) {
control.setState( { progress: 'customizer' } );
newData.append( 'action', 'kadence_import_customizer_data' );
newData.append( 'wp_customize', 'on' );
} else {
control.setState( { progress: 'widgets' } );
newData.append( 'action', 'kadence_after_import_data' );
}
control.runAjax( newData );
} else if ( 'undefined' !== typeof response.status && 'afterAllImportAJAX' === response.status ) {
control.setState( { progress: 'widgets' } );
var newData = new FormData();
newData.append( 'action', 'kadence_after_import_data' );
newData.append( 'security', kadenceStarterParams.ajax_nonce );
control.runAjax( newData );
} else if ( 'undefined' !== typeof response.status && 'pluginSuccess' === response.status ) {
var newData = new FormData();
newData.append( 'security', kadenceStarterParams.ajax_nonce );
if ( control.state.installContent ) {
control.setState( { progress: 'content' } );
newData.append( 'action', 'kadence_import_demo_data' );
newData.append( 'builder', control.state.starterSettings['builderType'] );
newData.append( 'selected', control.state.activeTemplate );
newData.append( 'palette', control.state.colorPalette );
newData.append( 'font', control.state.fontPair );
} else if ( control.state.installCustomizer ) {
control.setState( { progress: 'customizer' } );
newData.append( 'action', 'kadence_import_customizer_data' );
newData.append( 'wp_customize', 'on' );
} else {
control.setState( { progress: 'widgets' } );
newData.append( 'action', 'kadence_after_import_data' );
}
control.runAjax( newData );
} else if ( 'undefined' !== typeof response.status && 'removeSuccess' === response.status ) {
control.setState( { progress: 'plugins' } );
var newData = new FormData();
newData.append( 'action', 'kadence_import_install_plugins' );
newData.append( 'security', kadenceStarterParams.ajax_nonce );
newData.append( 'selected', control.state.activeTemplate );
newData.append( 'builder', control.state.starterSettings['builderType'] );
control.runAjax( newData );
} else if ( 'undefined' !== typeof response.status && 'subscribeSuccess' === response.status ) {
var newData = new FormData();
if ( control.state.removePast ) {
this.setState( { progress: 'remove' } );
newData.append( 'action', 'kadence_remove_past_import_data' );
} else {
control.setState( { progress: 'plugins' } );
newData.append( 'action', 'kadence_import_install_plugins' );
}
newData.append( 'security', kadenceStarterParams.ajax_nonce );
newData.append( 'selected', control.state.activeTemplate );
newData.append( 'builder', control.state.starterSettings['builderType'] );
control.runAjax( newData );
} else if ( 'undefined' !== typeof response.message ) {
//jQuery( '.kadence_starter_templates_finished' ).append( '<p>' + response.message + '</p>' );
control.setState( { finished: true, hasContent:true, hasPastContent:true, isFetching: false, colorPalette: '', fontPair: '', focusMode: false, isImporting: false, isSelected:false, isPageSelected:false, progress: '', showForm: true, response: '<p>' + response.message + '</p>' } );
} else if ( 'undefined' !== typeof response.success && ! response.success ) {
//jQuery( '.kadence_starter_templates_finished' ).append( '<p>' + response.message + '</p>' );
control.setState( { finished: true, hasContent:true, hasPastContent:true, isFetching: false, colorPalette: '', fontPair: '', focusMode: false, isImporting: false, isSelected:false, isPageSelected:false, progress: '', showForm: true, response: '<div class="notice kadence_starter_templates_response notice-error"><p>' + __( 'Failed Import. Something went wrong internally. Please try again.', 'kadence-starter-templates' ) + '</p></div>' } );
} else if ( response === 'emailDomainPostError' || response === 'emailDomainPreError' ) {
control.setState( { isFetching: false, progress: '', showForm: true, emailError: true } );
} else {
console.log( response );
//jQuery( '.kadence_starter_templates_error' ).append( '<div class="notice kadence_starter_templates_response notice-error"><p>' + response + '</p></div>' );
control.setState( { finished: true, hasContent:true, hasPastContent:true, isFetching: false, colorPalette: '', fontPair: '', focusMode: false, isImporting: false, isSelected:false, isPageSelected:false, progress: '', showForm: true, response: '<div class="notice kadence_starter_templates_response notice-error"><p>' + response + '</p></div>' } );
}
})
.fail( function( error ) {
console.log( error );
//jQuery( '.kadence_starter_templates_error' ).append( '<div class="notice kadence_starter_templates_response notice-error"><p>Error: ' + error.statusText + ' (' + error.status + ')' + '</p></div>' );
control.setState( { finished: true, hasContent:true, hasPastContent:true, isFetching: false, colorPalette: '', fontPair: '', focusMode: false, isImporting: false, isSelected:false, isPageSelected:false, progress: '', showForm: true, response: '<div class="notice kadence_starter_templates_response notice-error"><p>Error: ' + error.statusText + ' (' + error.status + ')' + '</p></div>' } );
});
}
render() {
let builderTypeName = __( 'Gutenberg', 'kadence-starter-templates' );
let builderTypeIcon = gbIcon;
if ( this.state.starterSettings['builderType'] === 'elementor' ) {
builderTypeName = __( 'Elementor', 'kadence-starter-templates' );
builderTypeIcon = eIcon;
}
if ( this.state.starterSettings['builderType'] === 'custom' ) {
builderTypeName = ( kadenceStarterParams.custom_name ? kadenceStarterParams.custom_name : __( 'Pro Designs', 'kadence-starter-templates' ) );
builderTypeIcon = ( kadenceStarterParams.custom_icon ? <img className="components-menu-items__item-icon custom-image-icon-src" src={ kadenceStarterParams.custom_icon } /> : cIcon );
}
const errorMessageShow = ( this.state.isSaving || false === this.state.activeTemplates || this.state.errorTemplates ? true : false );
const KadenceImportSingleMode = () => {
const item = this.state.activeTemplates[this.state.activeTemplate];
let pluginsMember = false;
let pluginsPremium = false;
return (
<div className="kst-grid-single-site">
<div className="kst-import-selection-item">
<div className="kst-import-selection">
<img src={ item.pages[this.state.selectedPage].image } alt={ item.pages[this.state.selectedPage].title } />
</div>
</div>
<div className="kst-import-selection-options">
<div className="kst-import-single-selection-options-wrap">
<div className="kst-import-selection-title">
<h2>{ __( 'Template:', 'kadence-starter-templates' ) } <span>{ item.name }</span><br></br> { __( 'Selected Page:', 'kadence-starter-templates' ) } <span>{ item.pages[this.state.selectedPage].title }</span></h2>
</div>
<PanelBody
title={ __( 'Advanced Settings', 'kadence-blocks' ) }
initialOpen={ this.state.settingOpen }
onToggle={ value => ( this.state.settingOpen ? this.setState( { settingOpen: false } ) : this.setState( { settingOpen: true } ) ) }
>
<div className="kst-import-grid-title">
<h2>{ __( 'Page Template Plugins', 'kadence-starter-templates' ) }</h2>
</div>
{ this.state.isLoadingPlugins && (
<Spinner />
) }
{ ! this.state.activePlugins && ! this.state.isLoadingPlugins && (
<Fragment>{ this.loadPluginData( item.slug, this.state.starterSettings['builderType'] ) }</Fragment>
) }
{ this.state.activePlugins && (
<Fragment>
{ this.state.templatePlugins && 'error' !== this.state.templatePlugins && (
<ul className="kadence-required-wrap">
{ map( this.state.templatePlugins, ( { state, src, title } ) => {
if ( 'active' !== state && 'bundle' === src ) {
pluginsMember = true;
}
if ( 'active' !== state && ( 'thirdparty' === src || 'unknown' === src ) ) {
pluginsPremium = true;
}
return (
<li className={ `plugin-required${ ( 'active' !== state && 'bundle' === src ? ' bundle-install-required' : '' ) }` }>
{ title } - <span class="plugin-status">{ ( 'notactive' === state ? __( 'Not Installed', 'kadence-starter-templates' ) : state ) }</span> { ( 'active' !== state && 'thirdparty' === src ? <span class="plugin-install-required">{ __( 'Please install and activate this third-party premium plugin' ) }</span> : '' ) }
</li>
);
} ) }
</ul>
) }
{ this.state.templatePlugins && 'error' === this.state.templatePlugins && (
<Fragment>
<p className="desc-small install-third-party-notice">{ __( '*Error accessing active plugin information, you may import but first manually check that you have installed all required plugins.', 'kadence-starter-templates' ) }</p>
<ul className="kadence-required-wrap">
{ map( item.plugins, ( slug ) => {
if ( kadenceStarterParams.plugins[ slug ] ) {
if ( 'active' !== kadenceStarterParams.plugins[ slug ].state && 'bundle' === kadenceStarterParams.plugins[ slug ].src ) {
pluginsMember = true;
}
return (
<li className={ `plugin-required${ ( 'active' !== kadenceStarterParams.plugins[ slug ].state && 'bundle' === kadenceStarterParams.plugins[ slug ].src ? ' bundle-install-required' : '' ) }` }>
{ kadenceStarterParams.plugins[ slug ].title } - <span class="plugin-status">{ ( 'notactive' === kadenceStarterParams.plugins[ slug ].state ? __( 'Not Installed', 'kadence-starter-templates' ) : kadenceStarterParams.plugins[ slug ].state ) }</span> { ( 'active' !== kadenceStarterParams.plugins[ slug ].state && 'thirdparty' === kadenceStarterParams.plugins[ slug ].src ? <span class="plugin-install-required">{ __( 'Please install and activate this third-party premium Plugin' ) }</span> : '' ) }
</li>
);
} else {
return (
<li className={ `plugin-required` }>
{ slug } - <span class="plugin-status">{ __( 'Unknown', 'kadence-starter-templates' ) }</span>
</li>
);
}
} ) }
</ul>
</Fragment>
) }
</Fragment>
) }
<p className="desc-small note-about-colors">{ __( '*Single Page templates will follow your website current global colors and typography settings, you can import without effecting your current site. Or you can optionally override your websites global colors and typography by enabling the settings below.', 'kadence-starter-templates' ) }</p>
<ToggleControl
label={ __( 'Override Your Sites Global Colors?', 'kadence-starter-templates' ) }
checked={ ( undefined !== this.state.overrideColors ? this.state.overrideColors : false ) }
onChange={ value => ( this.state.overrideColors ? this.setState( { overrideColors: false } ) : this.setState( { isOpenCheckColor: true } ) ) }
/>
{ this.state.isOpenCheckColor ?
<Modal
className="ksp-confirm-modal"
title={ __( 'Override Your Sites Colors on Import?', 'kadence-starter-templates' ) }
onRequestClose={ () => {
this.setState( { isOpenCheckColor: false } )
} }>
<p className="desc-small note-about-colors">{ __( 'This will override the customizer settings for global colors on your current site when you import this page template.', 'kadence-starter-templates' ) }</p>
<div className="ksp-override-model-buttons">
<Button className="ksp-cancel-override" onClick={ () => {
this.setState( { isOpenCheckColor: false, overrideColors: false } );
} }>
{ __( 'Cancel', 'kadence-starter-templates' ) }
</Button>
<Button className="ksp-do-override" isPrimary onClick={ () => {
this.setState( { isOpenCheckColor: false, overrideColors: true } );
} }>
{ __( 'Override Colors', 'kadence-starter-templates' ) }
</Button>
</div>
</Modal>
: null }
{ this.state.overrideColors && this.state.colorPalette && (
<Fragment>
<h3>{ __( 'Selected Color Palette', 'kadence-starter-templates' ) }</h3>
{ map( this.state.palettes, ( { palette, colors } ) => {
if ( palette !== this.state.colorPalette ) {
return;
}
return (
<div className="kst-palette-btn kst-selected-color-palette">
{ map( colors, ( color, index ) => {
return (
<div key={ index } style={ {
width: 22,
height: 22,
marginBottom: 0,
marginRight:'3px',
transform: 'scale(1)',
transition: '100ms transform ease',
} } className="kadence-swatche-item-wrap">
<span
className={ 'kadence-swatch-item' }
style={ {
height: '100%',
display: 'block',
width: '100%',
border: '1px solid rgb(218, 218, 218)',
borderRadius: '50%',
color: `${ color }`,
boxShadow: `inset 0 0 0 ${ 30 / 2 }px`,
transition: '100ms box-shadow ease',
} }
>
</span>
</div>
)
} ) }
</div>
)
} ) }
</Fragment>
) }
<ToggleControl
label={ __( 'Override Your Sites Fonts?', 'kadence-starter-templates' ) }
checked={ ( undefined !== this.state.overrideFonts ? this.state.overrideFonts : false ) }
onChange={ value => ( this.state.overrideFonts ? this.setState( { overrideFonts: false } ) : this.setState( { isOpenCheckFont: true } ) ) }
/>
{ this.state.isOpenCheckFont ?
<Modal
className="ksp-confirm-modal"
title={ __( 'Override Your Sites Fonts on Import?', 'kadence-starter-templates' ) }
onRequestClose={ () => {
this.setState( { isOpenCheckFont: false } )
} }>
<p className="desc-small note-about-colors">{ __( 'This will override the customizer typography settings on your current site when you import this page template.', 'kadence-starter-templates' ) }</p>
<div className="ksp-override-model-buttons">
<Button className="ksp-cancel-override" onClick={ () => {
this.setState( { isOpenCheckFont: false, overrideFonts: false } );
} }>
{ __( 'Cancel', 'kadence-starter-templates' ) }
</Button>
<Button className="ksp-do-override" isPrimary onClick={ () => {
this.setState( { isOpenCheckFont: false, overrideFonts: true } );
} }>
{ __( 'Override Fonts', 'kadence-starter-templates' ) }
</Button>
</div>
</Modal>
: null }
{ this.state.fontPair && this.state.overrideFonts && (
<Fragment>
<h3 className="kst-selected-font-pair-title">{ __( 'Selected Font Pair', 'kadence-starter-templates' ) }</h3>
{ map( this.state.fonts, ( { font, img, name } ) => {
if ( font !== this.state.fontPair ) {
return;
}
return (
<div className="kst-selected-font-pair">
<img src={ img } className="font-pairing" />
<h4>{ name }</h4>
</div>
)
} ) }
</Fragment>
) }
</PanelBody>
{ this.state.progress === 'subscribe' && (
<div class="kadence_starter_templates_response"><Spinner />{ kadenceStarterParams.subscribe_progress }</div>
) }
{ this.state.progress === 'plugins' && (
<div class="kadence_starter_templates_response"><Spinner />{ kadenceStarterParams.plugin_progress }</div>
) }
{ this.state.progress === 'content' && (
<div class="kadence_starter_templates_response"><Spinner />{ kadenceStarterParams.content_progress }</div>
) }
{ this.state.progress === 'contentNew' && (
<div class="kadence_starter_templates_response"><Spinner />{ kadenceStarterParams.content_new_progress }</div>
) }
{ this.state.progress === 'contentNewer' && (
<div class="kadence_starter_templates_response"><Spinner />{ kadenceStarterParams.content_newer_progress }</div>
) }
{ this.state.progress === 'contentNewest' && (
<div class="kadence_starter_templates_response"><Spinner />{ kadenceStarterParams.content_newest_progress }</div>
) }
{ ! kadenceStarterParams.isKadence && (
<div class="kadence_starter_templates_response">
<h2>{ __( 'This Template Requires the Kadence Theme', 'kadence-starter-templates' ) }</h2>
<ExternalLink href={ 'https://www.kadencewp.com/kadence-theme/?utm_source=in-app&utm_medium=kadence-starter-templates&utm_campaign=dashboard' }>{ __( 'Get Free Theme', 'kadence-starter-templates' ) }</ExternalLink>
</div>
) }
{ kadenceStarterParams.isKadence && (
<Fragment>
{ pluginsMember && (
<div class="kadence_starter_templates_response">
<h2>{ __( 'Install Missing/Inactive Highlighted Premium plugins to Import', 'kadence-starter-templates' ) }</h2>
<ExternalLink href={ 'https://www.kadencewp.com/my-account/?utm_source=in-app&utm_medium=kadence-starter-templates&utm_campaign=dashboard' }>{ __( 'Pro Account', 'kadence-starter-templates' ) }</ExternalLink>
</div>
) }
{ ! pluginsMember && (
<Fragment>
{ this.state.showForm && ! this.state.isSubscribed && (
<Fragment>
<KadenceSubscribeForm
emailError={ this.state.emailError }
onRun={ email => this.runSubscribeSingle( email, item.slug ) }
/>
<Button className="kb-skip-start subscribe" isPrimary disabled={ this.state.isFetching } onClick={ () => {
this.runPluginInstallSingle( item.slug, this.state.selectedPage, this.state.starterSettings['builderType'] );
} }>
{ __( 'Skip, start importing page', 'kadence-starter-templates' ) }
</Button>
</Fragment>
) }
{ this.state.showForm && this.state.isSubscribed && (
<Fragment>
<Button className="kt-defaults-save" isPrimary disabled={ this.state.isFetching } onClick={ () => {
this.runPluginInstallSingle( item.slug, this.state.selectedPage, this.state.starterSettings['builderType'] );
} }>
{ __( 'Start Importing Page', 'kadence-starter-templates' ) }
</Button>
</Fragment>
) }
</Fragment>
) }
</Fragment>
) }
</div>
</div>
</div>
);
}
const KadenceImportMode = () => {
const item = this.state.activeTemplates[this.state.activeTemplate];
let pluginsPremium = false;
let pluginsMember = false;
return (
<Fragment>
<div className="kst-grid-single-site">
<div className="kst-import-selection-item">
<div className="kst-import-selection">
<img src={ item.pages && item.pages['home'] && item.pages['home'].image ? item.pages['home'].image : item.image } alt={ item.name } />
</div>
</div>
<div className="kst-import-selection-options">
<div className="kst-import-selection-title">
<div className="kst-import-single-selection-options-wrap">
<h2>{ __( 'Template:', 'kadence-starter-templates' ) } <span>{ item.name }</span></h2>
</div>
</div>
</div>
</div>
<Modal
className="kst-import-modal"
title={ __( 'Import Starter Template' ) }
onRequestClose={ () => this.state.isFetching ? false : this.setState( { activeTemplate: '', activePlugins: false, colorPalette: '', focusMode: false, isImporting: false, progress: '' } ) }>
{ ! kadenceStarterParams.isKadence && (
<div class="kadence_starter_templates_response">
<h2>{ __( 'This Starter Template Requires the Kadence Theme', 'kadence-starter-templates' ) }</h2>
<ExternalLink href={ 'https://www.kadencewp.com/kadence-theme/?utm_source=in-app&utm_medium=kadence-starter-templates&utm_campaign=dashboard' }>{ __( 'Get Free Theme', 'kadence-starter-templates' ) }</ExternalLink>
</div>
) }
{ kadenceStarterParams.isKadence && (
<Fragment>
{ ! this.state.isFetching && (
<Fragment>
{ this.state.hasContent && (
<div className="kadence_starter_templates_notice">
{ this.state.hasPastContent ? (
<Fragment>{ kadenceStarterParams.notice_previous }</Fragment>
) : (
<Fragment>{ kadenceStarterParams.notice }</Fragment>
) }
</div>
) }
{ this.state.hasPastContent && (
<Fragment>
<ToggleControl
label={ __( 'Delete Previously Imported Posts and Images?', 'kadence-starter-templates' ) }
checked={ ( undefined !== this.state.removePast ? this.state.removePast : false ) }
onChange={ value => ( this.state.removePast ? this.setState( { removePast: false } ) : this.setState( { removePast: true } ) ) }
/>
</Fragment>
) }
</Fragment>
) }
<PanelBody
title={ __( 'Import Details', 'kadence-blocks' ) }
initialOpen={ false }
>
<div className="required-plugins-list">
<h3 className="required-plugins-list-header">{ __( 'Required Plugins', 'kadence-starter-templates' ) }</h3>
{ this.state.isLoadingPlugins && (
<Spinner />
) }
{ ! this.state.activePlugins && ! this.state.isLoadingPlugins && (
<Fragment>{ this.loadPluginData( item.slug, this.state.starterSettings['builderType'] ) }</Fragment>
) }
{ this.state.activePlugins && (
<Fragment>
{ this.state.templatePlugins && 'error' !== this.state.templatePlugins && (
<ul className="kadence-required-wrap">
{ map( this.state.templatePlugins, ( { state, src, title } ) => {
if ( 'active' !== state && 'bundle' === src ) {
pluginsMember = true;
}
if ( 'active' !== state && 'thirdparty' === src ) {
pluginsPremium = true;
}
return (
<li className={ `plugin-required${ ( 'active' !== state && 'bundle' === src ? ' bundle-install-required' : '' ) }` }>
{ title } - <span class="plugin-status">{ ( 'notactive' === state ? __( 'Not Installed', 'kadence-starter-templates' ) : state ) }</span> { ( 'active' !== state && 'thirdparty' === src ? <span class="plugin-install-required">{ __( 'Please install and activate this third-party premium plugin' ) }</span> : '' ) }
</li>
);
} ) }
</ul>
) }
{ this.state.templatePlugins && 'error' === this.state.templatePlugins && (
<Fragment>
<p className="desc-small install-third-party-notice">{ __( '*Error accessing active plugin information, you may import but first manually check that you have installed all required plugins.', 'kadence-starter-templates' ) }</p>
<ul className="kadence-required-wrap">
{ map( item.plugins, ( slug ) => {
if ( kadenceStarterParams.plugins[ slug ] ) {
if ( 'active' !== kadenceStarterParams.plugins[ slug ].state && 'bundle' === kadenceStarterParams.plugins[ slug ].src ) {
pluginsMember = true;
}
return (
<li className={ `plugin-required${ ( 'active' !== kadenceStarterParams.plugins[ slug ].state && 'bundle' === kadenceStarterParams.plugins[ slug ].src ? ' bundle-install-required' : '' ) }` }>
{ kadenceStarterParams.plugins[ slug ].title } - <span class="plugin-status">{ ( 'notactive' === kadenceStarterParams.plugins[ slug ].state ? __( 'Not Installed', 'kadence-starter-templates' ) : kadenceStarterParams.plugins[ slug ].state ) }</span> { ( 'active' !== kadenceStarterParams.plugins[ slug ].state && 'thirdparty' === kadenceStarterParams.plugins[ slug ].src ? <span class="plugin-install-required">{ __( 'Please install and activate this third-party premium Plugin' ) }</span> : '' ) }
</li>
);
} else {
return (
<li className={ `plugin-required` }>
{ slug } - <span class="plugin-status">{ __( 'Unknown', 'kadence-starter-templates' ) }</span>
</li>
);
}
} ) }
</ul>
</Fragment>
) }
</Fragment>
) }
</div>
{ this.state.colorPalette && (
<Fragment>
<h3>{ __( 'Selected Color Palette', 'kadence-starter-templates' ) }</h3>
{ map( this.state.palettes, ( { palette, colors } ) => {
if ( palette !== this.state.colorPalette ) {
return;
}
return (
<div className="kst-palette-btn kst-selected-color-palette">
{ map( colors, ( color, index ) => {
return (
<div key={ index } style={ {
width: 22,
height: 22,
marginBottom: 0,
marginRight:'3px',
transform: 'scale(1)',
transition: '100ms transform ease',
} } className="kadence-swatche-item-wrap">
<span
className={ 'kadence-swatch-item' }
style={ {
height: '100%',
display: 'block',
width: '100%',
border: '1px solid rgb(218, 218, 218)',
borderRadius: '50%',
color: `${ color }`,
boxShadow: `inset 0 0 0 ${ 30 / 2 }px`,
transition: '100ms box-shadow ease',
} }
>
</span>
</div>
)
} ) }
</div>
)
} ) }
</Fragment>
) }
{ this.state.fontPair && (
<Fragment>
<h3 className="kst-selected-font-pair-title">{ __( 'Selected Font Pair', 'kadence-starter-templates' ) }</h3>
{ map( this.state.fonts, ( { font, img, name } ) => {
if ( font !== this.state.fontPair ) {
return;
}
return (
<div className="kst-selected-font-pair">
<img src={ img } className="font-pairing" />
<h4>{ name }</h4>
</div>
)
} ) }
</Fragment>
) }
</PanelBody>
{ ! this.state.isFetching && (
<PanelBody
title={ __( 'Advanced Settings', 'kadence-blocks' ) }
initialOpen={ false }
>
<ToggleControl
label={ __( 'Import Customizer Settings', 'kadence-starter-templates' ) }
checked={ ( undefined !== this.state.installCustomizer ? this.state.installCustomizer : false ) }
onChange={ value => ( this.state.installCustomizer ? this.setState( { installCustomizer: false } ) : this.setState( { installCustomizer: true } ) ) }
/>
<ToggleControl
label={ __( 'Import Content', 'kadence-starter-templates' ) }
checked={ ( undefined !== this.state.installContent ? this.state.installContent : false ) }
onChange={ value => ( this.state.installContent ? this.setState( { installContent: false } ) : this.setState( { installContent: true } ) ) }
/>
</PanelBody>
) }
{ pluginsPremium && (
<div className="install-third-party-notice">
<p className="desc-small">
{ __( '*This starter template requires premium third-party plugins. Please install missing/inactive premium plugins to import.', 'kadence-starter-templates' ) }
</p>
{ map( this.state.templatePlugins, ( { state, src, title } ) => {
if ( 'active' === state || 'repo' === src ) {
return;
}
if ( 'active' !== state && 'bundle' === src ) {
pluginsMember = true;
}
if ( 'active' !== state && 'thirdparty' === src ) {
pluginsPremium = true;
}
return (
<li className={ `plugin-required${ ( 'active' !== state && 'bundle' === src ? ' bundle-install-required' : '' ) }` }>
{ title } - <span class="plugin-status">{ ( 'notactive' === state ? __( 'Not Installed', 'kadence-starter-templates' ) : state ) }</span>
</li>
);
} ) }
</div>
) }
{ this.state.progress === 'subscribe' && (
<div class="kadence_starter_templates_response"><Spinner />{ kadenceStarterParams.subscribe_progress }</div>
) }
{ this.state.progress === 'remove' && (
<div class="kadence_starter_templates_response"><Spinner />{ kadenceStarterParams.remove_progress }</div>
) }
{ this.state.progress === 'plugins' && (
<div class="kadence_starter_templates_response"><Spinner />{ kadenceStarterParams.plugin_progress }</div>
) }
{ this.state.progress === 'content' && (
<div class="kadence_starter_templates_response"><Spinner />{ kadenceStarterParams.content_progress }</div>
) }
{ this.state.progress === 'contentNew' && (
<div class="kadence_starter_templates_response"><Spinner />{ kadenceStarterParams.content_new_progress }</div>
) }
{ this.state.progress === 'contentNewer' && (
<div class="kadence_starter_templates_response"><Spinner />{ kadenceStarterParams.content_newer_progress }</div>
) }
{ this.state.progress === 'contentNewest' && (
<div class="kadence_starter_templates_response"><Spinner />{ kadenceStarterParams.content_newest_progress }</div>
) }
{ this.state.progress === 'customizer' && (
<div class="kadence_starter_templates_response"><Spinner />{ kadenceStarterParams.customizer_progress }</div>
) }
{ this.state.progress === 'widgets' && (
<div class="kadence_starter_templates_response"><Spinner />{ kadenceStarterParams.widgets_progress }</div>
) }
{ kadenceStarterParams.isKadence && (
<Fragment>
{ pluginsPremium && (
<Fragment>
{ pluginsMember && (
<div class="kadence_starter_templates_response">
<h2>{ __( 'Install Missing/Inactive Highlighted Premium plugins to Import', 'kadence-starter-templates' ) }</h2>
<ExternalLink href={ 'https://www.kadencewp.com/my-account/?utm_source=in-app&utm_medium=kadence-starter-templates&utm_campaign=dashboard' }>{ __( 'Pro Account', 'kadence-starter-templates' ) }</ExternalLink>
</div>
) }
{ ! pluginsMember && (
<Button className="kt-defaults-save import-partial-btn" isPrimary disabled={ this.state.isFetching } onClick={ () => {
if ( this.state.removePast ) {
this.runRemovePast( item.slug, this.state.starterSettings['builderType'] );
} else {
this.runPluginInstall( item.slug, this.state.starterSettings['builderType'] );
}
} }>
{ __( 'Skip and Import with Partial Content' ) }
</Button>
) }
</Fragment>
) }
{ ! pluginsPremium && (
<Fragment>
{ pluginsMember && (
<div class="kadence_starter_templates_response">
<h2>{ __( 'Install Missing/Inactive Highlighted Premium plugins to Import', 'kadence-starter-templates' ) }</h2>
<ExternalLink href={ 'https://www.kadencewp.com/my-account/?utm_source=in-app&utm_medium=kadence-starter-templates&utm_campaign=dashboard' }>{ __( 'Pro Account', 'kadence-starter-templates' ) }</ExternalLink>
</div>
) }
{ ! pluginsMember && (
<Fragment>
{ this.state.showForm && ! this.state.isSubscribed && (
<Fragment>
<KadenceSubscribeForm
emailError={ this.state.emailError }
onRun={ email => this.runSubscribe( email, item.slug ) }
/>
<Button className="kb-skip-start" isPrimary disabled={ this.state.isFetching } onClick={ () => {
if ( this.state.removePast ) {
this.runRemovePast( item.slug, this.state.starterSettings['builderType'] );
} else {
this.runPluginInstall( item.slug, this.state.starterSettings['builderType'] );
}
} }>
{ __( 'Skip, Start Importing' ) }
</Button>
</Fragment>
) }
{ this.state.showForm && this.state.isSubscribed && (
<Fragment>
<Button className="kt-defaults-save" isPrimary disabled={ this.state.isFetching } onClick={ () => {
if ( this.state.removePast ) {
this.runRemovePast( item.slug, this.state.starterSettings['builderType'] );
} else {
this.runPluginInstall( item.slug, this.state.starterSettings['builderType'] );
}
} }>
{ __( 'Start Importing', 'kadence-starter-templates' ) }
</Button>
</Fragment>
) }
</Fragment>
) }
</Fragment>
) }
</Fragment>
) }
</Fragment>
) }
</Modal>
</Fragment>
);
}
const KadencesSiteMode = () => {
const item = this.state.activeTemplates[this.state.activeTemplate];
return (
// <div className="kst-grid-single-site">
// <div className="kst-import-selection-item">
// <div className="kst-import-selection-title">
// <h2>{ __( 'Selected Page:', 'kadence-starter-templates' ) } <span>{ item.pages[this.state.selectedPage].title }</span></h2>
// </div>
// <div className="kst-import-selection">
// <img src={ item.pages[this.state.selectedPage].image } alt={ item.pages[this.state.selectedPage].title } />
// </div>
// </div>
<Fragment>
<div className="kst-import-selection-options">
<div className="kst-import-grid-title">
<h2>{ __( 'Page Templates', 'kadence-starter-templates' ) }</h2>
</div>
<div className="templates-grid">
{ map( item.pages, ( { title, id, thumbnail } ) => {
return (
<div className="kst-template-item">
<Button
key={ id }
className="kst-import-btn"
isSmall
onClick={ () => this.selectedMode( id ) }
>
<LazyLoad offsetBottom={200}>
<img src={ thumbnail } alt={ title } />
</LazyLoad>
<div className="demo-title">
<h4>{ title } <span>{ __( 'View Details', 'kadence-starter-templates' ) }</span></h4>
</div>
</Button>
</div>
);
} ) }
</div>
<div className="kst-import-selection-bottom">
<Button className="kt-import-fullsite" isPrimary onClick={ () => this.selectedFullMode() }>
{ __( 'Import Full Site', 'kadence-starter-templates' ) }
</Button>
</div>
</div>
{/* <div className="kst-import-selection-footer">
<Button
className="kt-import-back"
icon={ arrowLeft }
onClick={ () => this.backToDash() }>
{ __( 'Back', 'kadence-starter-templates' ) }
</Button>
<Button className="kt-import-fullsite" isPrimary onClick={ () => this.selectedFullMode() }>
{ __( 'Import Full Site', 'kadence-starter-templates' ) }
</Button>
<ExternalLink className="components-button" href={ item.url }>{ __( 'Preview Site', 'kadence-starter-templates' ) }</ExternalLink>
</div> */}
</Fragment>
);
}
const KadenceSitesGrid = () => {
const control = this;
const cats = [ 'all' ];
if ( this.state.activeTemplates && Object.keys( this.state.activeTemplates ).length > 1 ) {
{ Object.keys( this.state.activeTemplates ).map( function( key, index ) {
if ( control.state.activeTemplates[ key ].categories ) {
for ( let c = 0; c < control.state.activeTemplates[ key ].categories.length; c++ ) {
if ( ! cats.includes( control.state.activeTemplates[ key ].categories[ c ] ) ) {
cats.push( control.state.activeTemplates[ key ].categories[ c ] );
}
}
}
} ) }
}
const catControlsRender = cats.map( ( item ) => {
return (
<MenuItem
className={ ( item === control.state.category ? 'active-item' : '' ) }
isSelected={ ( item === control.state.category ? true : false ) }
onClick={ () => this.setState( { category: item } ) }
>
{ control.capitalizeFirstLetter( item ) }
</MenuItem>
);
} );
return (
<div className="kadence-site-grid-wrap">
<div className="kadence-site-header">
<div className="kadence-site-header-left">
{ this.state.starterSettings['builderType'] === 'blocks' && cats.length > 1 && (
<Fragment>
<span className="filter-title">{ __( 'Filter:', 'kadence-starter-templates' ) }</span>
<Dropdown
className="kadence-site-grid-header-popover"
contentClassName="kst-category-popover"
position="bottom center"
label={ __( 'Select a Category', 'kadence-blocks' ) }
renderToggle={ ( { isOpen, onToggle } ) => (
<Button onClick={ onToggle } aria-expanded={ isOpen } icon={ tag } >
{ this.capitalizeFirstLetter( control.state.category ) }
<Icon className="kst-chev" icon={ chevronDown } />
</Button>
) }
renderContent={ ( { isOpen, onToggle } ) => (
<div>
{ catControlsRender }
</div>
) }
/>
<Dropdown
className="kadence-site-grid-header-popover"
contentClassName="kst-category-popover"
position="bottom center"
label={ __( 'Select Free or Pro', 'kadence-blocks' ) }
renderToggle={ ( { isOpen, onToggle } ) => (
<Button onClick={ onToggle } aria-expanded={ isOpen } icon={ heading } >
{ control.state.level === 'free' && (
__( 'Free Only', 'kadence-starter-templates' )
) }
{ control.state.level === 'pro' && (
__( 'Pro Only', 'kadence-starter-templates' )
) }
{ control.state.level === 'all' && (
__( 'Free & Pro', 'kadence-starter-templates' )
) }
<Icon className="kst-chev" icon={ chevronDown } />
</Button>
) }
renderContent={ ( { isOpen, onToggle } ) => (
<div>
<MenuItem
className={ ( 'all' === control.state.level ? 'active-item' : '' ) }
isSelected={ ( 'all' === control.state.level ? true : false ) }
onClick={ () => this.setState( { level: 'all' } ) }
>
{ __( 'Free & Pro', 'kadence-starter-templates' ) }
</MenuItem>
<MenuItem
className={ ( 'pro' === control.state.level ? 'active-item' : '' ) }
isSelected={ ( 'pro' === control.state.level ? true : false ) }
onClick={ () => this.setState( { level: 'pro' } ) }
>
{ __( 'Pro Only', 'kadence-starter-templates' ) }
</MenuItem>
<MenuItem
className={ ( 'free' === control.state.level ? 'active-item' : '' ) }
isSelected={ ( 'free' === control.state.level ? true : false ) }
onClick={ () => this.setState( { level: 'free' } ) }
>
{ __( 'Free Only', 'kadence-starter-templates' ) }
</MenuItem>
</div>
) }
/>
</Fragment>
) }
</div>
<div className="kadence-site-grid-header-right">
{ this.state.starterSettings['builderType'] === 'blocks' && cats.length > 1 && (
<span className="page-source-notice">{ __( 'This page is loaded from', 'kadence-starter-templates' ) + ' ' }<ExternalLink href={ 'https://www.kadencewp.com/?utm_source=in-app&utm_medium=kadence-starter-templates&utm_campaign=dashboard' }>kadencewp.com</ExternalLink></span>
) }
</div>
</div>
<div className="templates-grid">
{/* { map( ( this.state.starterSettings['builderType'] === 'elementor' ? this.state.etemplates : this.state.templates ), ( { name, key, slug, image, content, categories, keywords, pro, pages } ) => { */}
{ Object.keys( this.state.activeTemplates ).map( function( key, index ) {
const name = control.state.activeTemplates[key].name;
const slug = control.state.activeTemplates[key].slug;
const image = control.state.activeTemplates[key].image;
const categories = control.state.activeTemplates[key].categories;
const keywords = control.state.activeTemplates[key].keywords;
const pro = control.state.activeTemplates[key].pro;
const member = control.state.activeTemplates[key].member;
const pages = control.state.activeTemplates[key].pages;
if ( ( 'all' === control.state.category || categories.includes( control.state.category ) ) && ( 'all' === control.state.level || ( ( control.state.level === 'pro' && pro ) || ( control.state.level === 'free' && ! pro ) ) ) && ( ! control.state.search || ( keywords && keywords.some( x => x.toLowerCase().includes( control.state.search.toLowerCase() ) ) ) ) ) {
return (
<div className="kst-template-item">
<Button
key={ key }
className="kst-import-btn"
isSmall
onClick={ () => ( 'custom' === control.state.starterSettings[ 'builderType' ] ? control.jumpToImport( slug ) : control.fullFocusMode( slug ) ) }
//onClick={ () => control.fullFocusMode( slug ) }
>
<LazyLoad offsetBottom={700}>
<img src={ pages && pages.home && pages.home.thumbnail ? pages.home.thumbnail : image } alt={ name } />
</LazyLoad>
<div className="demo-title">
<h4>{ name }</h4>
</div>
</Button>
{ undefined !== pro && pro && (
<Fragment>
<span className="kb-pro-template">{ __( 'Pro', 'kadence-starter-sites' ) }</span>
</Fragment>
) }
</div>
);
}
} ) }
</div>
</div>
);
}
const KadenceFinishedPage = () => {
const item = this.state.activeTemplates[this.state.activeTemplate];
return (
<div className="kst-grid-single-site">
<div className="kst-import-selection-item">
<div className="kst-import-selection">
<img src={ item.pages[this.state.selectedPage].image } alt={ item.pages[this.state.selectedPage].title } />
</div>
</div>
<div className="kst-import-selection-options">
<div className="kst-import-single-selection-options-wrap">
<div className="kst-import-selection-title">
<h2>{ __( 'Template:', 'kadence-starter-templates' ) } <span>{ item.name }</span><br></br> { __( 'Selected Page:', 'kadence-starter-templates' ) } <span>{ item.pages[this.state.selectedPage].title }</span></h2>
</div>
<div className="kst-import-grid-title">
<h2>{ __( 'Import complete!', 'kadence-starter-templates' ) }</h2>
<div class="kadence_starter_templates_finished">
<div dangerouslySetInnerHTML={ { __html: this.state.response } } />
</div>
</div>
</div>
</div>
</div>
);
}
const KadenceFinished = () => {
const item = this.state.activeTemplates[this.state.activeTemplate];
return (
<div className="kst-grid-single-site">
<div className="kst-import-selection-item">
<div className="kst-import-selection">
<img src={ item.pages && item.pages['home'] && item.pages['home'].image ? item.pages['home'].image : item.image } />
</div>
</div>
<div className="kst-import-selection-options">
<div className="kst-import-single-selection-options-wrap">
<div className="kst-import-selection-title">
<h2>{ __( 'Template:', 'kadence-starter-templates' ) } <span>{ item.name }</span></h2>
</div>
<div className="kst-import-grid-title">
<h2>{ __( 'Import complete!', 'kadence-starter-templates' ) }</h2>
<div class="kadence_starter_templates_finished">
<div dangerouslySetInnerHTML={ { __html: this.state.response } } />
</div>
</div>
</div>
</div>
</div>
);
}
const MainPanel = () => (
<Fragment>
{ errorMessageShow ? (
<div className="main-panel">
<div className="kst-overlay-saving">
{ ! this.state.errorTemplates && (
<Spinner />
) }
{ this.state.errorTemplates && (
<Fragment>
<h2 style={{ textAlign:'center' } }>
{ __( 'Error, Unable to access template database, please try re-downloading', 'kadence-starter-templates' ) }
</h2>
<div style={{ textAlign:'center' } }>
<Button
className="kt-reload-templates"
icon={ update }
onClick={ () => this.reloadTemplateData() }
>
{ __( ' Sync with Cloud', 'kadence-starter-templates' ) }
</Button>
</div>
</Fragment>
) }
{ false === this.state.activeTemplates && (
<Fragment>{ this.loadTemplateData() }</Fragment>
) }
</div>
</div>
) : (
<div className="main-panel">
{ this.state.focusMode && (
<Fragment>
{ this.state.isImporting && (
<Fragment>
{ ! this.state.isPageSelected ? (
<KadenceImportMode />
) : (
<KadenceImportSingleMode />
) }
</Fragment>
) }
{ ! this.state.isImporting && this.state.isSelected && (
<KadenceImporterFullPreview
item={ this.state.activeTemplates[this.state.activeTemplate] }
colorPalette={ this.state.colorPalette }
fontPair={ this.state.fontPair }
onChange={ ( value ) => {
this.setState( value );
} }
/>
) }
{ ! this.state.isImporting && ! this.state.isSelected && (
<KadencesSiteMode />
) }
</Fragment>
) }
{ ! this.state.focusMode && ! this.state.finished && (
<KadenceSitesGrid />
) }
{ this.state.finished && (
<Fragment>
{ ! this.state.isPageSelected ? (
<KadenceFinished />
) : (
<KadenceFinishedPage />
) }
</Fragment>
) }
</div>
) }
</Fragment>
);
const ChooseBuilder = () => (
<div className={ `kst-choose-builder-wrap${ ( kadenceStarterParams.ctemplates ? ' adjust-to-three-column' : '' ) }` }>
<div className="kst-choose-builder-center">
<h2 className="kst-choose-builder-title">{ __( 'Choose a Builder', 'kadence-starter-templates' ) }</h2>
<div className="kst-choose-builder-inner">
{ kadenceStarterParams.ctemplates && (
<Button
icon={ ( kadenceStarterParams.custom_icon ? <img className="custom-image-icon-src" src={ kadenceStarterParams.custom_icon } /> : cIcon ) }
className="kt-import-select-type"
onClick={ () => {
this.saveConfig( 'builderType', 'custom' );
} }
>
{ ( kadenceStarterParams.custom_name ? kadenceStarterParams.custom_name : __( 'Pro Designs', 'kadence-starter-templates' ) ) }
</Button>
) }
<Button
icon={ gbIcon }
className="kt-import-select-type"
onClick={ () => {
this.saveConfig( 'builderType', 'blocks' );
} }
>
{ __( 'Gutenberg', 'kadence-starter-templates' ) }
</Button>
<Button
icon={ eIcon }
className="kt-import-select-type"
onClick={ () => {
this.saveConfig( 'builderType', 'elementor' );
} }
>
{ __( 'Elementor', 'kadence-starter-templates' ) }
</Button>
</div>
{ this.state.isSaving && (
<div className="kst-overlay-saving">
<Spinner />
</div>
) }
</div>
</div>
);
return (
<Fragment>
<div class="kadence_theme_dash_head">
<div class="kadence_theme_dash_head_container">
<div class="kadence_theme_dash_logo">
<img src={ this.state.logo }/>
</div>
{ this.state.focusMode && (
<div class="kadence_theme_dash_back">
{ this.state.isPageSelected ? (
<Tooltip text={ __( 'Back to Individual Pages Grid' ) }>
<Button
className="kt-import-back"
icon={ chevronLeft }
onClick={ () => this.state.isFetching ? false : this.setState( { colorPalette: '', finished:false, selectedPage: 'home', focusMode: true, isSelected: false, isPageSelected:false, isImporting: false, progress: '' } ) }
>
</Button>
</Tooltip>
) : (
<Tooltip text={ __( 'Back to Starter Templates Grid' ) }>
<Button
className="kt-import-back"
icon={ chevronLeft }
onClick={ () => this.backToDash() }
/>
</Tooltip>
) }
</div>
) }
{ this.state.finished && (
<div class="kadence_theme_dash_back">
<Tooltip text={ __( 'Back to Starter Templates Grid' ) }>
<Button
className="kt-import-back"
icon={ chevronLeft }
onClick={ () => this.backToDash() }
/>
</Tooltip>
</div>
) }
<div class="kadence_starter_builder_type">
{ this.state.starterSettings && this.state.starterSettings['builderType'] && (
<Dropdown
className="my-container-class-name"
contentClassName="kst-type-popover"
position="bottom left"
renderToggle={ ( { isOpen, onToggle } ) => (
<Button onClick={ onToggle } aria-expanded={ isOpen } icon={ builderTypeIcon } >
{ builderTypeName }
<Icon className="kst-chev" icon={ chevronDown } />
</Button>
) }
renderContent={ ( { isOpen, onToggle } ) => (
<div>
<MenuItem
icon={ gbIcon }
className={ ( 'blocks' === this.state.starterSettings['builderType'] ? 'active-item' : '' ) }
isSelected={ ( 'blocks' === this.state.starterSettings['builderType'] ? true : false ) }
onClick={ () => {
this.saveConfig( 'builderType', 'blocks' );
this.setState( { activeTemplate: '', activePlugins:false, colorPalette: '', finished:false, selectedPage: 'home', focusMode: false, isSelected: false, isPageSelected:false, isImporting: false, progress: '', activeTemplates: false } );
onToggle();
} }
>
{ __( 'Gutenberg', 'kadence-starter-templates' ) }
</MenuItem>
<MenuItem
icon={ eIcon }
className={ ( 'elementor' === this.state.starterSettings['builderType'] ? 'active-item' : '' ) }
isSelected={ ( 'elementor' === this.state.starterSettings['builderType'] ? true : false ) }
onClick={ () => {
this.saveConfig( 'builderType', 'elementor' );
this.setState( { activeTemplate: '', activePlugins:false, colorPalette: '', finished:false, selectedPage: 'home', focusMode: false, isSelected: false, isPageSelected:false, isImporting: false, progress: '', activeTemplates: false } );
onToggle();
} }
>
{ __( 'Elementor', 'kadence-starter-templates' ) }
</MenuItem>
{ kadenceStarterParams.ctemplates && (
<MenuItem
icon={ ( kadenceStarterParams.custom_icon ? <img className="custom-image-icon-src" src={ kadenceStarterParams.custom_icon } /> : cIcon ) }
className={ ( 'custom' === this.state.starterSettings['builderType'] ? 'active-item' : '' ) }
isSelected={ ( 'custom' === this.state.starterSettings['builderType'] ? true : false ) }
onClick={ () => {
this.saveConfig( 'builderType', 'custom' );
this.setState( { activeTemplate: '', activePlugins:false, colorPalette: '', finished:false, selectedPage: 'home', focusMode: false, isSelected: false, isPageSelected:false, isImporting: false, progress: '', activeTemplates: false } );
onToggle();
} }
>
{ ( kadenceStarterParams.custom_name ? kadenceStarterParams.custom_name : __( 'Pro Designs', 'kadence-starter-templates' ) ) }
</MenuItem>
) }
</div>
) }
/>
) }
</div>
{ false !== this.state.activeTemplates && this.state.starterSettings['builderType'] && (
<div class="kadence_theme_dash_reload">
<Tooltip text={ __( 'Sync with Cloud' ) }>
<Button
className="kt-reload-templates"
icon={ update }
onClick={ () => this.reloadTemplateData() }
/>
</Tooltip>
</div>
) }
</div>
</div>
<div class="kadence_theme_starter_dash_inner">
{ this.state.starterSettings && this.state.starterSettings['builderType'] ? (
<MainPanel />
) : (
<ChooseBuilder />
) }
</div>
</Fragment>
);
}
}
wp.domReady( () => {
render(
<KadenceImporter />,
document.querySelector( '.kadence_starter_dashboard_main' )
);
} );