File: //var/www/drakkar_site_dev/wp-content/themes/blocksy/admin/dashboard/static/js/screens/Home.js
import {
useState,
createElement,
useContext,
Fragment,
} from '@wordpress/element'
import { __, sprintf } from 'ct-i18n'
import DashboardContext from '../context'
import ctEvents from 'ct-events'
import $ from 'jquery'
const DocumentationButton = ({ href = '' }) => {
if (ctDashboardLocalizations.plugin_data.hide_docs_section) {
return null
}
return (
<a href={href} target="_blank">
<svg
width="14px"
height="14px"
viewBox="0 0 24 24"
fill="currentColor">
<path d="M23 2.1h-6.6c-1.8 0-3.4.9-4.4 2.3C11 3 9.4 2.1 7.6 2.1H1c-.6 0-1 .4-1 1v16.5c0 .6.4 1 1 1h7.7c1.3 0 2.3 1 2.3 2.3 0 .6.4 1 1 1s1-.4 1-1c0-1.3 1-2.3 2.3-2.3H23c.6 0 1-.4 1-1V3.1c0-.6-.4-1-1-1zM11 19.3c-.7-.4-1.5-.7-2.3-.7H2V4.1h5.6c1.9 0 3.4 1.5 3.4 3.4v11.8zm11-.7h-6.7c-.8 0-1.6.2-2.3.7V7.5c0-1.9 1.5-3.4 3.4-3.4H22v14.5z" />
</svg>
{__('Documentation', 'blocksy')}
</a>
)
}
const Home = () => {
const {
is_companion_active,
companion_download_link,
child_download_link,
} = useContext(DashboardContext)
let beforeContent = { content: null }
let afterContent = { content: null }
const [isLoading, setIsLoading] = useState(false)
const [customStatus, setCustomStatus] = useState(false)
ctEvents.trigger('ct:dashboard:home:before', beforeContent)
ctEvents.trigger('ct:dashboard:home:after', afterContent)
const finalStatus = customStatus || is_companion_active
return (
<section>
{beforeContent.content}
<div
className="ct-dashboard-home-container"
data-columns={
ctDashboardLocalizations.plugin_data.hide_support_section
? '1'
: '2'
}>
<section>
<h4>{__('Customizer Shortcuts', 'blocksy')}</h4>
<ul className="ct-customizer-shortcuts-list">
<li>
<h4>{__('Color Options', 'blocksy')}</h4>
<p>
{__(
'Manage the colour palette, as well as setting colours for different elements of the website.',
'blocksy'
)}
</p>
<div className="ct-shortcut-actions">
<DocumentationButton href="https://creativethemes.com/blocksy/docs/general-options/colors/" />
<a
href={`${
ctDashboardLocalizations.customizer_url
}${encodeURI(`[section]=color`)}`}
target="_blank">
<svg
width="15px"
height="15px"
viewBox="0 0 24 24"
fill="currentColor">
<path d="M4 11c.6 0 1-.4 1-1V3c0-.6-.4-1-1-1s-1 .4-1 1v7c0 .6.4 1 1 1zM12 11c-.6 0-1 .4-1 1v9c0 .6.4 1 1 1s1-.4 1-1v-9c0-.6-.4-1-1-1zM20 13c.6 0 1-.4 1-1V3c0-.6-.4-1-1-1s-1 .4-1 1v9c0 .6.4 1 1 1zM7 13H1c-.6 0-1 .4-1 1s.4 1 1 1h2v6c0 .6.4 1 1 1s1-.4 1-1v-6h2c.6 0 1-.4 1-1s-.4-1-1-1zM15 7h-2V3c0-.6-.4-1-1-1s-1 .4-1 1v4H9c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1zM23 15h-6c-.6 0-1 .4-1 1s.4 1 1 1h2v4c0 .6.4 1 1 1s1-.4 1-1v-4h2c.6 0 1-.4 1-1s-.4-1-1-1z" />
</svg>
{__('Customize', 'blocksy')}
</a>
</div>
</li>
<li>
<h4>{__('Typography Options', 'blocksy')}</h4>
<p>
{__(
'Set the footer type, number of columns, spacing and colors.',
'blocksy'
)}
</p>
<div className="ct-shortcut-actions">
<DocumentationButton href="https://creativethemes.com/blocksy/docs/general-options/typography/" />
<a
href={`${
ctDashboardLocalizations.customizer_url
}${encodeURI('[section]=typography')}`}
target="_blank">
<svg
width="15px"
height="15px"
viewBox="0 0 24 24"
fill="currentColor">
<path d="M4 11c.6 0 1-.4 1-1V3c0-.6-.4-1-1-1s-1 .4-1 1v7c0 .6.4 1 1 1zM12 11c-.6 0-1 .4-1 1v9c0 .6.4 1 1 1s1-.4 1-1v-9c0-.6-.4-1-1-1zM20 13c.6 0 1-.4 1-1V3c0-.6-.4-1-1-1s-1 .4-1 1v9c0 .6.4 1 1 1zM7 13H1c-.6 0-1 .4-1 1s.4 1 1 1h2v6c0 .6.4 1 1 1s1-.4 1-1v-6h2c.6 0 1-.4 1-1s-.4-1-1-1zM15 7h-2V3c0-.6-.4-1-1-1s-1 .4-1 1v4H9c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1zM23 15h-6c-.6 0-1 .4-1 1s.4 1 1 1h2v4c0 .6.4 1 1 1s1-.4 1-1v-4h2c.6 0 1-.4 1-1s-.4-1-1-1z" />
</svg>
{__('Customize', 'blocksy')}
</a>
</div>
</li>
<li>
<h4>{__('Header Options', 'blocksy')}</h4>
<p>
{__(
'Configure the header to your liking with an easy to use drag and drop builder.',
'blocksy'
)}
</p>
<div className="ct-shortcut-actions">
<DocumentationButton href="https://creativethemes.com/blocksy/docs/header-elements/header-builder-elements/" />
<a
href={`${
ctDashboardLocalizations.customizer_url
}${encodeURI(`[section]=header`)}`}
target="_blank">
<svg
width="15px"
height="15px"
viewBox="0 0 24 24"
fill="currentColor">
<path d="M4 11c.6 0 1-.4 1-1V3c0-.6-.4-1-1-1s-1 .4-1 1v7c0 .6.4 1 1 1zM12 11c-.6 0-1 .4-1 1v9c0 .6.4 1 1 1s1-.4 1-1v-9c0-.6-.4-1-1-1zM20 13c.6 0 1-.4 1-1V3c0-.6-.4-1-1-1s-1 .4-1 1v9c0 .6.4 1 1 1zM7 13H1c-.6 0-1 .4-1 1s.4 1 1 1h2v6c0 .6.4 1 1 1s1-.4 1-1v-6h2c.6 0 1-.4 1-1s-.4-1-1-1zM15 7h-2V3c0-.6-.4-1-1-1s-1 .4-1 1v4H9c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1zM23 15h-6c-.6 0-1 .4-1 1s.4 1 1 1h2v4c0 .6.4 1 1 1s1-.4 1-1v-4h2c.6 0 1-.4 1-1s-.4-1-1-1z" />
</svg>
{__('Customize', 'blocksy')}
</a>
</div>
</li>
<li>
<h4>{__('Footer Options', 'blocksy')}</h4>
<p>
{__(
'Arrange your footer in a way that actually makes sense with our drag and drop builder.',
'blocksy'
)}
</p>
<div className="ct-shortcut-actions">
<DocumentationButton href="https://creativethemes.com/blocksy/docs/footer-options/footer-introduction/" />
<a
href={`${
ctDashboardLocalizations.customizer_url
}${encodeURI('[section]=footer')}`}
target="_blank">
<svg
width="15px"
height="15px"
viewBox="0 0 24 24"
fill="currentColor">
<path d="M4 11c.6 0 1-.4 1-1V3c0-.6-.4-1-1-1s-1 .4-1 1v7c0 .6.4 1 1 1zM12 11c-.6 0-1 .4-1 1v9c0 .6.4 1 1 1s1-.4 1-1v-9c0-.6-.4-1-1-1zM20 13c.6 0 1-.4 1-1V3c0-.6-.4-1-1-1s-1 .4-1 1v9c0 .6.4 1 1 1zM7 13H1c-.6 0-1 .4-1 1s.4 1 1 1h2v6c0 .6.4 1 1 1s1-.4 1-1v-6h2c.6 0 1-.4 1-1s-.4-1-1-1zM15 7h-2V3c0-.6-.4-1-1-1s-1 .4-1 1v4H9c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1zM23 15h-6c-.6 0-1 .4-1 1s.4 1 1 1h2v4c0 .6.4 1 1 1s1-.4 1-1v-4h2c.6 0 1-.4 1-1s-.4-1-1-1z" />
</svg>
{__('Customize', 'blocksy')}
</a>
</div>
</li>
<li>
<h4>{__('Blog Options', 'blocksy')}</h4>
<p>
{__(
'Adjust your blog roll options in a single place and make it stand out in the crowd.',
'blocksy'
)}
</p>
<div className="ct-shortcut-actions">
<DocumentationButton href="https://creativethemes.com/blocksy/docs/post-types/blog-posts/" />
<a
href={`${
ctDashboardLocalizations.customizer_url
}${encodeURI(`[section]=blog_posts`)}`}
target="_blank">
<svg
width="15px"
height="15px"
viewBox="0 0 24 24"
fill="currentColor">
<path d="M4 11c.6 0 1-.4 1-1V3c0-.6-.4-1-1-1s-1 .4-1 1v7c0 .6.4 1 1 1zM12 11c-.6 0-1 .4-1 1v9c0 .6.4 1 1 1s1-.4 1-1v-9c0-.6-.4-1-1-1zM20 13c.6 0 1-.4 1-1V3c0-.6-.4-1-1-1s-1 .4-1 1v9c0 .6.4 1 1 1zM7 13H1c-.6 0-1 .4-1 1s.4 1 1 1h2v6c0 .6.4 1 1 1s1-.4 1-1v-6h2c.6 0 1-.4 1-1s-.4-1-1-1zM15 7h-2V3c0-.6-.4-1-1-1s-1 .4-1 1v4H9c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1zM23 15h-6c-.6 0-1 .4-1 1s.4 1 1 1h2v4c0 .6.4 1 1 1s1-.4 1-1v-4h2c.6 0 1-.4 1-1s-.4-1-1-1z" />
</svg>
{__('Customize', 'blocksy')}
</a>
</div>
</li>
<li>
<h4>{__('Posts Options', 'blocksy')}</h4>
<p>
{__(
'Set the footer type, number of columns, spacing and colors.',
'blocksy'
)}
</p>
<div className="ct-shortcut-actions">
<DocumentationButton href="https://creativethemes.com/blocksy/docs/post-types/single-posts/" />
<a
href={`${
ctDashboardLocalizations.customizer_url
}${encodeURI(
'[section]=single_blog_posts'
)}`}
target="_blank">
<svg
width="15px"
height="15px"
viewBox="0 0 24 24"
fill="currentColor">
<path d="M4 11c.6 0 1-.4 1-1V3c0-.6-.4-1-1-1s-1 .4-1 1v7c0 .6.4 1 1 1zM12 11c-.6 0-1 .4-1 1v9c0 .6.4 1 1 1s1-.4 1-1v-9c0-.6-.4-1-1-1zM20 13c.6 0 1-.4 1-1V3c0-.6-.4-1-1-1s-1 .4-1 1v9c0 .6.4 1 1 1zM7 13H1c-.6 0-1 .4-1 1s.4 1 1 1h2v6c0 .6.4 1 1 1s1-.4 1-1v-6h2c.6 0 1-.4 1-1s-.4-1-1-1zM15 7h-2V3c0-.6-.4-1-1-1s-1 .4-1 1v4H9c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1zM23 15h-6c-.6 0-1 .4-1 1s.4 1 1 1h2v4c0 .6.4 1 1 1s1-.4 1-1v-4h2c.6 0 1-.4 1-1s-.4-1-1-1z" />
</svg>
{__('Customize', 'blocksy')}
</a>
</div>
</li>
<li>
<h4>{__('Page Options', 'blocksy')}</h4>
<p>
{__(
'Set the page container width, spacing, sidebar and more.',
'blocksy'
)}
</p>
<div className="ct-shortcut-actions">
<DocumentationButton href="https://creativethemes.com/blocksy/docs/post-types/pages/" />
<a
href={`${
ctDashboardLocalizations.customizer_url
}${encodeURI('[section]=single_pages')}`}
target="_blank">
<svg
width="15px"
height="15px"
viewBox="0 0 24 24"
fill="currentColor">
<path d="M4 11c.6 0 1-.4 1-1V3c0-.6-.4-1-1-1s-1 .4-1 1v7c0 .6.4 1 1 1zM12 11c-.6 0-1 .4-1 1v9c0 .6.4 1 1 1s1-.4 1-1v-9c0-.6-.4-1-1-1zM20 13c.6 0 1-.4 1-1V3c0-.6-.4-1-1-1s-1 .4-1 1v9c0 .6.4 1 1 1zM7 13H1c-.6 0-1 .4-1 1s.4 1 1 1h2v6c0 .6.4 1 1 1s1-.4 1-1v-6h2c.6 0 1-.4 1-1s-.4-1-1-1zM15 7h-2V3c0-.6-.4-1-1-1s-1 .4-1 1v4H9c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1zM23 15h-6c-.6 0-1 .4-1 1s.4 1 1 1h2v4c0 .6.4 1 1 1s1-.4 1-1v-4h2c.6 0 1-.4 1-1s-.4-1-1-1z" />
</svg>
{__('Customize', 'blocksy')}
</a>
</div>
</li>
<li>
<h4>{__('Sidebar Options', 'blocksy')}</h4>
<p>
{__(
'Change the sidebar behaviour and style with a nice set of options that come in handy.',
'blocksy'
)}
</p>
<div className="ct-shortcut-actions">
<DocumentationButton href="https://creativethemes.com/blocksy/docs/general-options/sidebar/" />
<a
href={`${
ctDashboardLocalizations.customizer_url
}${encodeURI('[section]=sidebar')}`}
target="_blank">
<svg
width="15px"
height="15px"
viewBox="0 0 24 24"
fill="currentColor">
<path d="M4 11c.6 0 1-.4 1-1V3c0-.6-.4-1-1-1s-1 .4-1 1v7c0 .6.4 1 1 1zM12 11c-.6 0-1 .4-1 1v9c0 .6.4 1 1 1s1-.4 1-1v-9c0-.6-.4-1-1-1zM20 13c.6 0 1-.4 1-1V3c0-.6-.4-1-1-1s-1 .4-1 1v9c0 .6.4 1 1 1zM7 13H1c-.6 0-1 .4-1 1s.4 1 1 1h2v6c0 .6.4 1 1 1s1-.4 1-1v-6h2c.6 0 1-.4 1-1s-.4-1-1-1zM15 7h-2V3c0-.6-.4-1-1-1s-1 .4-1 1v4H9c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1zM23 15h-6c-.6 0-1 .4-1 1s.4 1 1 1h2v4c0 .6.4 1 1 1s1-.4 1-1v-4h2c.6 0 1-.4 1-1s-.4-1-1-1z" />
</svg>
{__('Customize', 'blocksy')}
</a>
</div>
</li>
</ul>
</section>
{!ctDashboardLocalizations.plugin_data.hide_support_section && (
<aside>
<h4>{__('Need help or advice?', 'blocksy')}</h4>
<ul
className="ct-support-container"
data-placement="sidebar">
<li>
<h4>
<span>
<svg
width="12"
height="12"
viewBox="0 0 24 24"
fill="currentColor">
<path d="M8.6 6.7c0-1.9 1.5-3.5 3.4-3.5s3.4 1.5 3.4 3.5-1.5 3.5-3.4 3.5-3.4-1.6-3.4-3.5zM22 11.3h-3.9c.5.5.7 1.2.7 2v5.9c0 .6-.2 1.2-.3 1.7H22c1.2-.8 2-2.2 2-3.8v-3.7c0-1.2-.9-2.1-2-2.1zm.8-4.1c0-1.6-1.3-2.9-2.9-2.9-1.6 0-2.9 1.3-2.9 2.9 0 1.6 1.3 2.9 2.9 2.9 1.7 0 2.9-1.3 2.9-2.9zM5.2 13c.1-.7.3-1.3.7-1.8H1.8c-1 .1-1.8.9-1.8 2V17c0 1.6.8 2.9 2 3.8h3.5c-.2-.6-.3-1.3-.3-2.1V13zM4 4.4c-1.6 0-2.9 1.3-2.9 2.9 0 1.6 1.3 2.9 2.9 2.9s2.9-1.3 2.9-2.9c0-1.7-1.3-2.9-2.9-2.9zm11.2 6.9H8.8c-1.1 0-2 .9-2 2v5.5c0 .7.2 1.4.4 2.1h9.5c.3-.6.4-1.3.4-2.1v-5.5c.1-1.1-.8-2-1.9-2z" />
</svg>
</span>
{__('Facebook Community', 'blocksy')}
</h4>
<p>
{__(
'Share ideas, help others, ask questions and discuss your next project in our friendly community.',
'blocksy'
)}
</p>
<a
href="https://www.facebook.com/groups/blocksy.community"
className="ct-button"
data-hover="blue"
target="_blank">
{__(
'Join Our Facebook Community',
'blocksy'
)}
</a>
</li>
<li>
<h4>
<span>
<svg
width="10"
height="10"
viewBox="0 0 24 24"
fill="currentColor">
<path d="M13.3 3.7 8.5.4C7.4-.3 5.9-.1 5.2 1c-.3.4-.5.9-.5 1.4v19.1c0 1.3 1.1 2.4 2.4 2.4.5 0 1-.2 1.4-.4l4.7-3.3 9-6.3c1.1-.8 1.4-2.3.6-3.4l-.6-.6-8.9-6.2z" />
</svg>
</span>
{__('Video Tutorials', 'blocksy')}
</h4>
<p>
{__(
'Learn how to do just about anything within Blocksy by following our byte-sized video tutorials.',
'blocksy'
)}
</p>
<a
href="https://creativethemes.com/blocksy/video-tutorials/"
className="ct-button"
data-hover="blue"
target="_blank">
{__('Watch Tutorials', 'blocksy')}
</a>
</li>
<li>
<h4>
<span>
<svg
width="12"
height="12"
viewBox="0 0 24 24"
fill="currentColor">
<path d="M24 4.1v13.8c0 .7-.5 1.2-1.2 1.3-2 .1-6.1.5-8.9 1.9-.4.2-.9-.1-.9-.6V5.7c0-.2.1-.4.3-.5 2.7-1.7 7.2-2.1 9.4-2.3.7-.1 1.3.5 1.3 1.2zM1.4 2.9C.6 2.8 0 3.4 0 4.1v13.8c0 .7.5 1.2 1.2 1.3 2 .1 6.1.5 8.9 1.9.4.2.9-.1.9-.5V5.7c0-.2-.1-.4-.3-.5C8.1 3.5 3.6 3 1.4 2.9z" />
</svg>
</span>
{__('Knowledge Base', 'blocksy')}
</h4>
<p>
{__(
'Dive in deeper with our documentation and learn advanced tips and tricks about Blocksy and its components.',
'blocksy'
)}
</p>
<a
href="https://creativethemes.com/blocksy/docs/"
className="ct-button"
data-hover="blue"
target="_blank">
{__('View Documentation', 'blocksy')}
</a>
</li>
<li>
<h4>
<span>
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="currentColor">
<path d="M8.3 7.3 4.1 3C6.2 1.1 9 0 12 0s5.8 1.1 7.9 3l-4.3 4.3C14.6 6.5 13.4 6 12 6s-2.6.5-3.7 1.3zM12 18c-1.4 0-2.6-.5-3.7-1.3L4.1 21c2.1 1.9 4.9 3 7.9 3s5.8-1.1 7.9-3l-4.3-4.3c-1 .8-2.2 1.3-3.6 1.3zm9-13.9-4.3 4.3c.8 1 1.3 2.3 1.3 3.7s-.5 2.6-1.3 3.7l4.3 4.3c1.9-2.1 3-4.9 3-7.9s-1.1-6-3-8.1zM6 12c0-1.4.5-2.6 1.3-3.7L3 4.1C1.1 6.2 0 9 0 12s1.1 5.8 3 7.9l4.3-4.3C6.5 14.6 6 13.4 6 12z" />
</svg>
</span>
{__('Support', 'blocksy')}
</h4>
<p>
{__(
'If your questions that have not been answered by our documentation or video tutorials, just drop us a line.',
'blocksy'
)}
</p>
<a
href={ctDashboardLocalizations.support_url}
className="ct-button"
data-hover="blue"
target="_blank">
{__('Submit a Ticket', 'blocksy')}
</a>
</li>
</ul>
</aside>
)}
</div>
{afterContent.content}
{is_companion_active !== 'active' && (
<Fragment>
<div className="ct-dashboard-home-downloads">
<ul>
<li>
<h4>
<svg
width="16"
height="16"
fill="currentColor"
viewBox="0 0 20 20">
<path d="M3.1,0c-0.4,0-0.8,0.2-1,0.6L0.2,3.9C0.1,4.1,0,4.2,0,4.4v13.3C0,19,1,20,2.2,20h15.6c1.2,0,2.2-1,2.2-2.2V4.4c0-0.2-0.1-0.4-0.2-0.6l-1.9-3.3c-0.2-0.3-0.6-0.6-1-0.6H3.1z M3.7,2.2h12.6l1.3,2.2H2.4L3.7,2.2z M2.2,6.7h15.6v11.1H2.2V6.7zM8.9,8.3v3.3H5.6l4.4,4.4l4.4-4.4h-3.3V8.3H8.9z"></path>
</svg>
{__('Blocksy Companion', 'blocksy')}
</h4>
<p>
{__(
'By downloading and installing this plugin you will have access to demo templates, extensions and a lot more stunning features.',
'blocksy'
)}
</p>
<a
className="ct-button"
onClick={(e) => {
e.stopPropagation()
setIsLoading(true)
$.ajax(ajaxurl, {
type: 'POST',
data: {
action: 'blocksy_notice_button_click',
nonce: ct_localizations.nonce,
},
}).then(({ success, data }) => {
if (success) {
setCustomStatus(data.status)
if (data.status === 'active') {
location.assign(
data.pluginUrl
)
}
}
setIsLoading(false)
})
}}>
{isLoading
? __(
'Installing & activating...',
'blocksy'
)
: finalStatus === 'uninstalled'
? __(
'Install Blocksy Companion',
'blocksy'
)
: finalStatus === 'installed'
? __(
'Activate Blocksy Companion',
'blocksy'
)
: __(
'Blocksy Companion active!',
'blocksy'
)}
</a>
</li>
<li>
<h4>
<svg
width="16"
height="16"
fill="currentColor"
viewBox="0 0 20 20">
<path d="M3.1,0c-0.4,0-0.8,0.2-1,0.6L0.2,3.9C0.1,4.1,0,4.2,0,4.4v13.3C0,19,1,20,2.2,20h15.6c1.2,0,2.2-1,2.2-2.2V4.4c0-0.2-0.1-0.4-0.2-0.6l-1.9-3.3c-0.2-0.3-0.6-0.6-1-0.6H3.1z M3.7,2.2h12.6l1.3,2.2H2.4L3.7,2.2z M2.2,6.7h15.6v11.1H2.2V6.7zM8.9,8.3v3.3H5.6l4.4,4.4l4.4-4.4h-3.3V8.3H8.9z"></path>
</svg>
{__('Blocksy Child Theme', 'blocksy')}
</h4>
<p>
{__(
'By using a child theme you can modify any file without the fear of breaking something in the parent theme.',
'blocksy'
)}
</p>
<a
className="ct-button"
href={child_download_link}
target="_blank">
{__('Download now', 'blocksy')}
</a>
</li>
</ul>
</div>
</Fragment>
)}
</section>
)
}
export default Home