From f500e3cee22c0118d0d1d9a8c3c0c4c834591fda Mon Sep 17 00:00:00 2001
From: Soare Robert Daniel <soare.robert.daniel@protonmail.com>
Date: Tue, 28 Jan 2025 11:50:04 +0200
Subject: [PATCH] feat: new Custom Layout UI/UX (#4356)

---
 inc/admin/dashboard/main.php | 268 +++++++++++++++++++++++++++--
 inc/admin/hooks_upsells.php  | 315 +++++++++++++++++++++++++++++++++++
 2 files changed, 572 insertions(+), 11 deletions(-)

diff --git a/inc/admin/dashboard/main.php b/inc/admin/dashboard/main.php
index 1fadc010c4..8db2be89a8 100755
--- a/inc/admin/dashboard/main.php
+++ b/inc/admin/dashboard/main.php
@@ -57,6 +57,8 @@ public function init() {
 		add_action( 'admin_enqueue_scripts', [ $this, 'enqueue' ] );
 		add_action( 'init', array( $this, 'register_settings' ) );
 		add_action( 'init', array( $this, 'register_about_page' ), 1 );
+		
+		add_action( 'admin_notices', array( $this, 'render_custom_layout_header' ) );
 	}
 
 	/**
@@ -196,18 +198,9 @@ public function register() {
 			[ $this, 'render' ]
 		);
 
-		$this->copy_customizer_page( $theme_page );
+		do_action( 'neve_register_submenu_page', $theme_page, $capability );
 
-		if ( ! defined( 'NEVE_PRO_VERSION' ) || 'valid' !== apply_filters( 'product_neve_license_status', false ) ) {
-			// Add Custom Layout submenu for upsell.
-			add_submenu_page( // phpcs:ignore WPThemeReview.PluginTerritory.NoAddAdminPages.add_menu_pages_add_submenu_page
-				$theme_page,
-				__( 'Custom Layouts', 'neve' ),
-				__( 'Custom Layouts', 'neve' ),
-				$capability,
-				'admin.php?page=neve-welcome#custom-layouts'
-			);
-		}
+		$this->copy_customizer_page( $theme_page );
 	}
 
 	/**
@@ -823,4 +816,257 @@ private function get_external_plugins_data() {
 		return $plugins;
 	}
 
+	/**
+	 * Renders the custom layout header section in the admin dashboard for Custom Layouts
+	 *
+	 * @access     public
+	 * @return     void
+	 */
+	public function render_custom_layout_header() {
+		$screen = get_current_screen();
+		
+		if ( ! $screen || ! ( $screen->id === 'edit-neve_custom_layouts' || $screen->id === 'neve_page_neve-custom-layout-upsell' ) ) {
+			return;
+		}
+
+		$this->render_neve_header();
+
+		?>
+		<style>
+			/* Hide default page header. */
+			.wrap :is(h1.wp-heading-inline, .page-title-action) {
+				display: none;
+			}
+
+			.cl-header-container {
+				margin: 0 auto;
+				padding: 20px;
+				border: 1px solid #ddd;
+				border-radius: 8px;
+				background-color: white;
+				margin-top: 40px;
+				margin-right: 20px;
+			}
+
+			.cl-header-row {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				margin-bottom: 16px;
+			}
+
+			.cl-header-row h2 {
+				font-size: 24px;
+				margin: 0;
+				color: #333;
+			}
+
+			.cl-header-row .cl-header-actions {
+				display: flex;
+				gap: 10px;
+			}
+
+			.cl-header-row .cl-header-actions .cl-btn-action {
+				display: flex;
+				align-items: center;
+				gap: 8px;
+				line-height: 1;
+			}
+
+			.cl-header-row .cl-description {
+				margin-top: 10px;
+				font-size: 14px;
+				color: #555;
+				line-height: 1.6;
+			}
+
+			/* Hide text on small screens but keep it accessible to screen readers */
+			@media (max-width: 500px) {
+				.cl-header-btn-text {
+					position: absolute !important;
+					width: 1px !important;
+					height: 1px !important;
+					padding: 0 !important;
+					margin: -1px !important;
+					border: 0 !important;
+					clip: rect(0 0 0 0);
+					overflow: hidden;
+					white-space: nowrap; /* Prevent text wrapping inside the clipped area */
+				}
+			}
+		</style>
+
+		<div class="cl-header-container">
+			<div class="cl-header-row">
+				<h2><?php esc_html_e( 'Custom Layouts', 'neve' ); ?></h2>
+				<div class="cl-header-actions">
+					<button id="cl-open-modal" class="cl-btn-action button button-primary">
+						<span class="dashicons dashicons-plus-alt2" aria-hidden="true"></span>
+						<span class="cl-header-btn-text">
+							<?php esc_html_e( 'Add New Layout', 'neve' ); ?>
+						</span>
+					</button>
+					<a href="https://docs.themeisle.com/article/1062-custom-layouts-module" target="_blank" class="button cl-btn-action">
+						<span class="dashicons dashicons-welcome-learn-more" aria-hidden="true"></span>
+						<span class="cl-header-btn-text">
+							<?php esc_html_e( 'View Tutorial', 'neve' ); ?>
+						</span>
+					</a>
+				</div>
+			</div>
+			<p class="cl-description">
+				<?php esc_html_e( 'Design unique website sections without touching code. Create custom headers, footers, and content areas that match your vision.', 'neve' ); ?>
+			</p>
+		</div>
+
+		<script>
+			function openModal( event ) {
+				event.preventDefault();
+
+				document.dispatchEvent(
+					new window.CustomEvent( 'nv-open-cl-modal', { detail: {} } )
+				);
+			}
+
+			document.querySelector('#cl-open-modal')?.addEventListener('click', openModal);
+		</script>
+		<?php
+
+		do_action( 'neve_render_after_header_custom_layouts' );
+	}
+
+	/**
+	 * Renders the header section with Neve information and help actions.
+	 *
+	 * @access public
+	 * @return void
+	 */
+	public function render_neve_header() {
+
+		$is_using_pro                 = defined( 'NEVE_PRO_VERSION' ) && 'valid' === apply_filters( 'product_neve_license_status', false );
+		$neve_dashboard_url           = add_query_arg(
+			array(
+				'page' => 'neve-welcome',
+			),
+			admin_url( 'admin.php' )
+		);
+		$neve_dashboard_changelog_url = $neve_dashboard_url . '#changelog';
+
+		?>
+		<style>
+			.nv-admin-header {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				background-color: #fff;
+				padding: 10px 20px;
+				margin-top: 40px;
+				margin-right: 20px;
+				border-radius: 8px;
+				border: 1px solid #ddd;
+				gap: 10px;
+				flex-wrap: wrap;
+			}
+
+			@media (max-width: 450px) {
+				.nv-admin-header {
+					justify-content: center;
+					width: fit-content;
+				}
+			}
+
+			@media (min-width: 451px) {
+				.nv-admin-header-left {
+					flex-grow: 1;
+				}
+			}
+			.nv-admin-header-left {
+				display: flex;
+				align-items: center;
+				gap: 12px;
+			}
+
+			.nv-admin-header-left img {
+				width: 1.75rem;
+				height: 1.75rem;
+				border-radius: 0.125rem;
+			}
+
+			.nv-admin-header-left .nv-admin-title {
+				font-size: 0.875rem;
+				font-weight: 600;
+				color: rgb(17, 24, 39);
+			}
+
+			.nv-admin-header-left .nv-admin-badge {
+				font-size: 0.875rem;
+				font-weight: 500;
+				background-color: rgb(243, 244, 246);
+				padding: 0.125rem 0.365rem;
+				border-radius: 0.25rem;
+				vertical-align: middle;
+				text-transform: uppercase;
+
+				color: rgb(55, 65, 81);
+			}
+
+			.nv-admin-header-left .nv-admin-version {
+				color: rgb(107, 114, 128);
+				vertical-align: middle;
+				font-weight: 500;
+			}
+
+			.nv-admin-header-right {
+				display: flex;
+				align-items: center;
+				gap: 30px;
+			}
+
+			.nv-admin-header-right a {
+				color: rgb(75, 85, 99);
+				text-decoration: none;
+				font-size: 0.875rem;
+				display: inline-flex;
+				align-items: center;
+				gap: 0.5rem;
+			}
+
+			.nv-admin-header-right a:hover {
+				color: #0073aa;
+			}
+
+			.nv-admin-header-separator {
+				width: 1px;
+				height: 1rem;
+				background-color: rgb(229, 231, 235);
+			}
+		</style>
+
+		<div class="nv-admin-header">
+			<div class="nv-admin-header-left">
+
+				<a href="<?php echo esc_url_raw( $neve_dashboard_url ); ?>">
+					<img src="<?php echo esc_url_raw( get_template_directory_uri() . '/assets/img/dashboard/logo.svg' ); ?>" alt="<?php esc_attr_e( 'Neve Logo', 'neve' ); ?>" />
+				</a>
+
+				<span class="nv-admin-title"><?php esc_html_e( 'Neve', 'neve' ); ?></span>
+				<span class="nv-admin-badge"><?php echo $is_using_pro ? esc_html__( 'Pro', 'neve' ) : esc_html__( 'Free', 'neve' ); ?></span>
+
+				<span class="nv-admin-version"><?php echo esc_html( sprintf( 'v%s', NEVE_VERSION ) ); ?></span>
+			</div>
+
+			<div class="nv-admin-header-right">
+				<a href="https://docs.themeisle.com/article/946-neve-doc" target="_blank">
+					<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 7v14"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg>
+					<?php esc_html_e( 'Documentation', 'neve' ); ?>
+				</a>
+				<span class="nv-admin-header-separator"></span>
+				<a href="<?php echo esc_url_raw( $neve_dashboard_changelog_url ); ?>" target="_blank">
+					<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/></svg>
+					<?php esc_html_e( 'Changelog', 'neve' ); ?>
+				</a>
+			</div>
+		</div>
+		<?php
+	}
 }
diff --git a/inc/admin/hooks_upsells.php b/inc/admin/hooks_upsells.php
index 6139e291e4..27a2230bae 100644
--- a/inc/admin/hooks_upsells.php
+++ b/inc/admin/hooks_upsells.php
@@ -26,6 +26,15 @@ public function init() {
 
 		add_action( 'admin_bar_menu', array( $this, 'add_admin_bar_menu' ), 99 );
 		add_action( 'wp', array( $this, 'render_hook_placeholder' ) );
+
+		if ( 'valid' === apply_filters( 'product_neve_license_status', false ) ) {
+			return;
+		}
+
+		/**
+		 * Add the Custom Layout page with upsell elements.
+		 */
+		add_action( 'neve_register_submenu_page', array( $this, 'register_custom_layout_upsell_page' ), 10, 2 );
 	}
 
 	/**
@@ -194,4 +203,310 @@ function () use ( $hook_value, $hook_label, $upsell_label ) {
 		}
 	}
 
+		/**
+		 * Registers a custom layout upsell page in the WordPress admin dashboard.
+		 *
+		 * @param string $theme_page  The slug name for the parent menu (or the file name of a standard WordPress admin page).
+		 * @param string $capability  The capability required for this menu to be displayed to the user.
+		 * @access public
+		 *
+		 * @return void
+		 */
+	public function register_custom_layout_upsell_page( $theme_page, $capability ) {
+		
+		// Add Custom Layout submenu for upsell.
+		// phpcs:ignore WPThemeReview.PluginTerritory.NoAddAdminPages.add_menu_pages_add_submenu_page
+		add_submenu_page( 
+			$theme_page,
+			__( 'Custom Layouts', 'neve' ),
+			__( 'Custom Layouts', 'neve' ),
+			$capability,
+			'neve-custom-layout-upsell',
+			array( $this, 'render_custom_layout_page' )
+		);
+	}
+
+	/**
+	 * Renders the upsell modal for custom layouts feature.
+	 *
+	 * @return void
+	 */
+	public function render_custom_layouts_upsell_modal() {
+		?>
+		<style>
+			#wpcontent {
+				position: relative;
+			}
+
+			#wpbody {
+				min-height: 100vh;
+				position: static;
+			}
+
+			/* ----- OVERLAY ----- */
+			.cl-overlay {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				z-index: 80;
+				background: rgba(0, 0, 0, 0.5);
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+
+			/* ----- MODAL ----- */
+			.cl-modal {
+				background: #fff;
+				width: 600px;
+				max-width: 90%;
+				padding: 40px;
+				border-radius: 8px;
+				position: relative;
+				box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+				font-family: inherit; /* match WP admin fonts */
+			}
+
+			/* ----- CLOSE BUTTON ----- */
+			.cl-close-button {
+				position: absolute;
+				top: 10px;
+				right: 10px;
+				font-size: 24px;
+				color: #aaa;
+				cursor: pointer;
+			}
+			.cl-close-button:hover {
+				color: #333;
+			}
+
+			/* ----- HEADER / TITLE ----- */
+			.cl-modal-header {
+				text-align: center;
+				margin-bottom: 16px;
+
+				display: flex;
+				flex-direction: column;
+				gap: 5px;
+			}
+			.cl-modal-header .dashicons-star-filled {
+				display: block;
+				font-size: 32px;
+				margin: 0 auto 8px;
+				color: black;
+			}
+			.cl-modal-header h2 {
+				margin: 0;
+				font-size: 22px;
+				line-height: 1.3;
+			}
+
+			/* ----- SUBTITLE ----- */
+			.cl-modal-subtitle {
+				text-align: center;
+				margin: 0 auto 20px;
+				color: #666;
+				font-size: 14px;
+				max-width: 80%;
+			}
+
+			/* ----- FEATURE GRID ----- */
+			.cl-features {
+				display: flex;
+				flex-wrap: wrap;
+				justify-content: space-between;
+				gap: 20px;
+				margin-bottom: 40px;
+			}
+			.cl-feature {
+				display: flex;
+				align-items: flex-start;
+				flex: 0 0 48%; /* 2 columns in a row on large screens */
+				gap: 10px;
+				flex-grow: 1;
+			}
+			.cl-feature .dashicons {
+				font-size: 24px;
+				color: #0073aa;
+				flex-shrink: 0;
+				margin-top: -2px;
+			}
+			.cl-feature h3 {
+				margin: 0;
+				font-size: 16px;
+				line-height: 1.3;
+			}
+			.cl-feature p {
+				margin: 4px 0 0;
+				font-size: 13px;
+				color: #555;
+			}
+
+			/* ----- ACTION BUTTONS ----- */
+			.cl-actions {
+				text-align: center;
+				margin-bottom: 20px;
+			}
+			.cl-actions .button {
+				margin: 0 10px;
+				text-decoration: none;
+			}
+
+			/* ----- QUOTE ----- */
+			.cl-quote {
+				font-size: 14px;
+				font-style: italic;
+				color: #555;
+				text-align: center;
+				max-width: 80%;
+				margin: 0 auto;
+			}
+			.cl-quote-author {
+				font-style: normal;
+				display: block;
+				margin-top: 8px;
+				font-weight: 600;
+				text-align: center;
+				color: #444;
+			}
+
+			@media (max-width: 480px) {
+				.cl-quote {
+					display: none;
+				}
+
+				.cl-features {
+					max-height: 350px;
+					overflow-y: auto;
+					padding: 0 40px;
+				}
+
+				.cl-modal {
+					padding: 20px 0px;
+				}
+			}
+
+			.wp-core-ui .notice {
+				display: none;
+			}
+		</style>
+
+		<div class="cl-overlay">
+			<div class="cl-modal">
+				<div class="cl-modal-header">
+					<span class="dashicons dashicons-star-filled" aria-hidden="true"></span>
+					<h2><?php echo esc_html__( 'Take Your Site to the Next Level', 'neve' ); ?></h2>
+				</div>
+
+				<p class="cl-modal-subtitle">
+					<?php echo esc_html__( 'Custom Layouts helps you create a unique website that stands out', 'neve' ); ?>
+				</p>
+
+				<div class="cl-features">
+					<div class="cl-feature">
+						<span class="dashicons dashicons-admin-appearance" aria-hidden="true"></span>
+						<div>
+							<h3><?php echo esc_html__( 'Build Without Code', 'neve' ); ?></h3>
+							<p><?php echo esc_html__( 'Create stunning headers, footers, and content sections with our visual drag & drop builder', 'neve' ); ?></p>
+						</div>
+					</div>
+					<div class="cl-feature">
+						<span class="dashicons dashicons-layout" aria-hidden="true"></span>
+						<div>
+							<h3><?php echo esc_html__( 'Smart Display Rules', 'neve' ); ?></h3>
+							<p><?php echo esc_html__( 'Show different layouts based on user roles, devices, or content types', 'neve' ); ?></p>
+						</div>
+					</div>
+					<div class="cl-feature">
+						<span class="dashicons dashicons-cart" aria-hidden="true"></span>
+						<div>
+							<h3><?php echo esc_html__( 'WooCommerce Ready', 'neve' ); ?></h3>
+							<p><?php echo esc_html__( 'Design custom shop pages, product layouts, and checkout experiences', 'neve' ); ?></p>
+						</div>
+					</div>
+					<div class="cl-feature">
+						<span class="dashicons dashicons-performance" aria-hidden="true"></span>
+						<div>
+							<h3><?php echo esc_html__( 'Optimized Performance', 'neve' ); ?></h3>
+							<p><?php echo esc_html__( 'All layouts are lightweight and load only where needed', 'neve' ); ?></p>
+						</div>
+					</div>
+				</div>
+
+				<div class="cl-actions">
+					<a class="button button-primary" href="<?php echo esc_url_raw( tsdk_translate_link( tsdk_utmify( 'https://themeisle.com/themes/neve/pricing/', 'custom-layout-modal-upsell-pricing' ) ) ); ?>" target="_blank">
+						<?php echo esc_html__( 'Get Neve Pro', 'neve' ); ?>
+					</a>
+					<a class="button" href="<?php echo esc_url_raw( tsdk_translate_link( tsdk_utmify( 'https://themeisle.com/themes/neve/upgrade/', 'custom-layout-modal-upsell-features' ) ) ); ?>" target="_blank">
+						<?php echo esc_html__( 'See All Features', 'neve' ); ?>
+					</a>
+				</div>
+
+				<div class="cl-quote">
+					<?php
+					echo esc_html__(
+						'I’ve been using Neve by Themeisle for a few years now, and it’s proven to be the best theme I’ve ever built websites on. It’s lightweight, modern, fast, customizable, and works great with Woocommerce stores too.',
+						'neve'
+					);
+					?>
+					<span class="cl-quote-author">
+						— <?php echo esc_html__( 'Ville Ekman', 'neve' ); ?>
+					</span>
+				</div>
+			</div>
+		</div>
+		<?php
+	}
+
+	/**
+	 * Renders the the upsell page for Custom Layouts which contains a modal and small table behind overlay to match the real dashboard.
+	 * 
+	 * @return void
+	 */
+	public function render_custom_layout_page() {
+		?>
+		<?php $this->render_custom_layouts_upsell_modal(); ?>
+		<div class="wrap">
+			<div class="wp-list-table">
+				<table class="widefat posts">
+					<thead>
+						<tr>
+							<td class="manage-column check-column">
+								<input type="checkbox" disabled />
+							</td>
+							<th scope="col" class="manage-column column-title column-primary"><?php echo esc_html__( 'Title', 'neve' ); ?></th>
+							<th scope="col" class="manage-column"><?php echo esc_html__( 'Type', 'neve' ); ?></th>
+							<th scope="col" class="manage-column"><?php echo esc_html__( 'Location', 'neve' ); ?></th>
+							<th scope="col" class="manage-column"><?php echo esc_html__( 'Status', 'neve' ); ?></th>
+							<th scope="col" class="manage-column"><?php echo esc_html__( 'Date', 'neve' ); ?></th>
+						</tr>
+					</thead>
+					<tbody id="the-list">
+						<tr>
+							<td colspan="6" class="column-primary">
+								<p class="description" style="text-align: center; padding: 20px;">
+									<?php echo esc_html__( 'Upgrade to Neve Pro to create a Custom Layout.', 'neve' ); ?>
+								</p>
+							</td>
+						</tr>
+					</tbody>
+					<tfoot>
+						<tr>
+							<td class="manage-column check-column">
+								<input type="checkbox" disabled />
+							</td>
+							<th scope="col" class="manage-column column-title column-primary"><?php echo esc_html__( 'Title', 'neve' ); ?></th>
+							<th scope="col" class="manage-column"><?php echo esc_html__( 'Type', 'neve' ); ?></th>
+							<th scope="col" class="manage-column"><?php echo esc_html__( 'Location', 'neve' ); ?></th>
+							<th scope="col" class="manage-column"><?php echo esc_html__( 'Status', 'neve' ); ?></th>
+							<th scope="col" class="manage-column"><?php echo esc_html__( 'Date', 'neve' ); ?></th>
+						</tr>
+					</tfoot>
+				</table>
+			</div>
+		</div>
+		<?php
+	}
 }