Added neve sidebar promo in the dashboard

inc/plugins/class-dashboard.php

@@ -206,7 +206,7 @@ public function enqueue_options_assets() {
 		wp_enqueue_script(
 			'otter-blocks-scripts',
 			OTTER_BLOCKS_URL . 'build/dashboard/index.js',
-			$asset_file['dependencies'],
+			array_merge( $asset_file['dependencies'], [ 'updates' ] ),
 			$asset_file['version'],
 			true
 		);
@@ -221,17 +221,44 @@ public function enqueue_options_assets() {
 			apply_filters(
 				'otter_dashboard_data',
 				array(
-					'version'            => OTTER_BLOCKS_VERSION,
-					'assetsPath'         => OTTER_BLOCKS_URL . 'assets/',
-					'stylesExist'        => is_dir( $basedir ) || boolval( get_transient( 'otter_animations_parsed' ) ),
-					'hasPro'             => Pro::is_pro_installed(),
-					'upgradeLink'        => tsdk_utmify( Pro::get_url(), 'options', Pro::get_reference() ),
-					'docsLink'           => Pro::get_docs_url(),
-					'showFeedbackNotice' => $this->should_show_feedback_notice(),
-					'deal'               => ! Pro::is_pro_installed() ? $offer->get_localized_data() : array(),
-					'hasOnboarding'      => false !== get_theme_support( FSE_Onboarding::SUPPORT_KEY ),
-					'days_since_install' => round( ( time() - get_option( 'otter_blocks_install', time() ) ) / DAY_IN_SECONDS ),
-					'rootUrl'            => get_site_url(),
+					'version'                => OTTER_BLOCKS_VERSION,
+					'assetsPath'             => OTTER_BLOCKS_URL . 'assets/',
+					'stylesExist'            => is_dir( $basedir ) || boolval( get_transient( 'otter_animations_parsed' ) ),
+					'hasPro'                 => Pro::is_pro_installed(),
+					'upgradeLink'            => tsdk_utmify( Pro::get_url(), 'options', Pro::get_reference() ),
+					'docsLink'               => Pro::get_docs_url(),
+					'showFeedbackNotice'     => $this->should_show_feedback_notice(),
+					'deal'                   => ! Pro::is_pro_installed() ? $offer->get_localized_data() : array(),
+					'hasOnboarding'          => false !== get_theme_support( FSE_Onboarding::SUPPORT_KEY ),
+					'days_since_install'     => round( ( time() - get_option( 'otter_blocks_install', time() ) ) / DAY_IN_SECONDS ),
+					'rootUrl'                => get_site_url(),
+					'neveThemePreviewUrl'    => esc_url(
+						add_query_arg(
+							array(
+								'theme' => 'neve',
+							),
+							admin_url( 'theme-install.php' )
+						)
+					),
+					'neveThemeActivationUrl' => esc_url(
+						add_query_arg(
+							array(
+								'action'     => 'activate',
+								'stylesheet' => 'neve',
+								'_wpnonce'   => wp_create_nonce( 'switch-theme_neve' ),
+							),
+							admin_url( 'themes.php' )
+						)
+					),
+					'neveDashboardUrl'       => esc_url(
+						add_query_arg(
+							array(
+								'page' => 'neve-welcome',
+							),
+							admin_url( 'admin.php' )
+						)
+					),
+					'neveInstalled'          => 'neve' === get_template(),
 				)
 			)
 		);

src/dashboard/components/NeveSidebarUpsell.js

@@ -0,0 +1,139 @@
+/**
+ * WordPress dependencies.
+ */
+import { __ } from '@wordpress/i18n';
+
+import {
+	Button,
+	ExternalLink
+} from '@wordpress/components';
+
+import {
+	Fragment,
+	useEffect,
+	useState
+} from '@wordpress/element';
+
+// Install theme.
+const InstallTheme = ( slug ) => {
+	return new Promise( ( resolve ) => {
+		wp.updates.ajax( 'install-theme', {
+			slug,
+			success: () => {
+				resolve({ success: true });
+			},
+			error: ( err ) => {
+				resolve({ success: false, code: err.errorCode });
+			}
+		});
+	});
+};
+
+// Activate theme.
+const activateTheme = ( url ) => {
+	return new Promise( ( resolve ) => {
+		jQuery
+			.get( url )
+			.done( () => {
+				resolve({ success: true });
+			})
+			.fail( () => {
+				resolve({ success: false });
+			});
+	});
+};
+
+
+const NeveSidebarUpsell = () => {
+
+	const [ isShowNeveUpsell, setShowNeveUpsell ] = useState( false );
+	const [ isNeveInstalled, setNeveInstalled ] = useState( window.otterObj?.neveInstalled );
+	const [ showStatus, setShowStatus ] = useState( false );
+	const [ progress, setProgress ] = useState( null );
+
+	useEffect( () => {
+		if ( Boolean( isNeveInstalled ) ) {
+			setShowNeveUpsell( true );
+		}
+	}, [ isNeveInstalled ]);
+
+	const ThemeInstallActivateRequest = async( e ) => {
+		e.preventDefault();
+		setShowStatus( true );
+		setProgress( 'installing' );
+		await InstallTheme( 'neve' );
+
+		setProgress( 'activating' );
+		await activateTheme( window.otterObj?.neveThemeActivationUrl );
+
+		setProgress( 'done' );
+	};
+
+	const installThemeRequestStatus = () => {
+		if ( 'done' === progress ) {
+			return (
+				<div className={'done'}>
+					<p> { __( 'Awesome! You are all set!', 'otter-blocks' ) }</p>
+					<Button icon={'external'} isPrimary href={window.otterObj?.neveDashboardUrl} target="_blank">
+						{ __( 'Go to Neve dashboard', 'otter-blocks' ) }
+					</Button>
+				</div>
+			);
+		}
+		if ( progress ) {
+			return (
+				<p className="otter-neve-progress">
+					<span className="dashicons dashicons-update spin"/>
+					<span>
+						{ 'installing' === progress && __( 'Installing', 'otter-blocks' ) }
+						{ 'activating' === progress && __( 'Activating', 'otter-blocks' ) }
+					&hellip;
+					</span>
+				</p>
+			);
+		}
+	};
+
+	return (
+		<Fragment>
+			{( ! isShowNeveUpsell &&
+				<div className="otter-nv-sidebar-upsell">
+					<div className="otter-nv-sidebar-left">
+						<div className="otter-nv-sidebar-heading">
+							<img src={ window.otterObj.assetsPath + 'images/neve-logo.png' } />
+							<h2>{ __( '- Experience lightning fast performance!', 'otter-blocks' ) }</h2>
+						</div>
+						<div className="otter-nv-sidebar-text">
+							<p>
+								<strong>{ __( 'Fast, Flexible, and Free:', 'otter-blocks' ) }</strong> { __( 'Whether you\'re managing a blog, an online store, or a business website, Neve ensures top-tier responsiveness and SEO optimization. Install now and experience the difference today.', 'otter-blocks' ) }
+							</p>
+						</div>
+						<div className="otter-nv-sidebar-active-website">
+							<div>
+								<span>300,000+</span>
+								{ __( 'Active websites', 'otter-blocks' ) }
+							</div>
+							<div>
+								<span>1050+</span>
+								<img src={ window.otterObj.assetsPath + 'images/star.png' } width = '57' />
+							</div>
+						</div>
+						<div className="otter-nv-sidebar-action">
+							{( ! showStatus && 'done' !== progress ) && (
+								<Button variant="primary" onClick={ThemeInstallActivateRequest}>{ __( 'Install & Activate Neve Theme', 'otter-blocks' ) }</Button>
+							)}
+							{( showStatus || 'done' === progress ) && installThemeRequestStatus()}
+							{( ! showStatus && 'done' !== progress ) && ( <Button icon={'external'} iconPosition={'right'} variant="secondary" href={window.otterObj?.neveThemePreviewUrl} target="_blank">{ __( 'Theme Preview', 'otter-blocks' ) }</Button>
+							)}
+						</div>
+					</div>
+					<div className="otter-nv-sidebar-right">
+						<img src={ window.otterObj.assetsPath + 'images/neve-upsell-img.png' } />
+					</div>
+				</div>
+			)}
+		</Fragment>
+	);
+};
+
+export default NeveSidebarUpsell;

src/dashboard/index.js

@@ -23,6 +23,7 @@ import Header from './components/Header.js';
 import Main from './components/Main.js';
 import Footer from './components/Footer.js';
 import useSettings from '../blocks/helpers/use-settings.js';
+import NeveSidebarUpsell from './components/NeveSidebarUpsell.js';
 
 if ( undefined === window.otterUtils ) {
 	window.otterUtils = {};
@@ -78,7 +79,7 @@ const App = () => {
 				currentTab={ currentTab }
 				setTab={ setTab }
 			/>
-
+			<NeveSidebarUpsell />
 			<Footer />
 		</Fragment>
 	);

src/dashboard/style.scss

@@ -598,7 +598,7 @@
 .o-blocks-header {
 	display: flex;
 	flex-direction: row;
-	margin: 20px 20px 0 20px;
+	margin: 20px 0 0 0;
 
 	.o-blocks-header__left {
 		display: flex;
@@ -646,7 +646,7 @@
 	display: grid;
 	flex-wrap: wrap;
 	gap: 20px;
-	margin: 10px 20px;
+	margin: 10px 0;
 
 	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 
@@ -811,6 +811,132 @@
 	}
 }
 
+.otter-nv-sidebar-upsell {
+	max-width: 930px;
+	margin: 0 auto;
+	background: #fff;
+	border: 1px solid #e2e4e7;
+	border-radius: 10px;
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	.otter-nv-sidebar-left{
+		width: calc(100% - 360px);
+		padding: 32px;
+		@media(max-width: 991px) {
+			width: 100%;
+			padding: 16px;
+		}
+	}
+	.otter-nv-sidebar-right{
+		width: 360px;
+		@media(max-width: 991px) {
+			width: 100%;
+		}
+		img{
+			max-width: 100%;
+			width: 100%;
+			height: auto;
+			display: block;
+		}
+	}
+	.otter-nv-sidebar-heading{
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		padding-bottom: 24px;
+		img{
+			max-width: 155px;
+			flex-shrink: 0;
+			height: auto;
+		}
+		h2{
+			margin: 0;
+			color: #3B5DE6;
+			font-size: 16px;
+		}
+	}
+	.otter-nv-sidebar-text{
+		padding-bottom: 12px;
+		p{
+			margin: 0;
+		}
+	}
+	.otter-nv-sidebar-action{
+		padding-top: 24px;
+		display: flex;
+		flex-wrap: wrap;
+		gap: 8px;
+		.components-button{
+			&.is-primary{
+				background: #3B5DE6 !important;
+				&:focus:not(:disabled){
+					box-shadow: none !important;
+				}
+			}
+			&.is-secondary{
+				.components-external-link__contents{
+					text-decoration: none;
+				}
+			}
+		}
+		.done {
+			display: flex;
+			flex-direction: column;
+			align-items: flex-start;
+			a {
+				width: auto;
+			}
+			p {
+				font-size: 15px;
+				font-weight: 500;
+			}
+		}
+	}
+	.otter-nv-sidebar-active-website{
+		display: flex;
+		gap: 24px;
+		flex-wrap: wrap;
+		color: #1F1D1D;
+		>div{
+			font-size: 10px;
+			span{
+				display: block;
+				font-size: 12px;
+				font-weight: 700
+			}
+		}
+	}
+	.otter-neve-progress {
+		margin: 0;
+		gap: 5px;
+		font-size: 14px;
+		display: flex;
+		align-items: center;
+		.spin {
+			animation: otter-neve-rotation 2s infinite linear;
+		}
+	}
+}
+
+.otter-main {
+	&.is-upsell + .otter-nv-sidebar-upsell {
+		margin-top: 25px;
+	}
+	&.is-blocks + .otter-nv-sidebar-upsell {
+		margin-top: 25px;
+	}
+}
+
+@keyframes otter-neve-rotation {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(359deg);
+	}
+}
+
 @media(max-width: 480px) {
 	.otter-deal .o-urgency {
 		font-size: 7px;