Fix design issues

.eslintrc

@@ -9,10 +9,7 @@
         "sourceType": "module"
     },
     "rules": {
-        "indent": [
-            "error",
-            "tab"
-        ],
+        "indent": ["error", "tab", { "SwitchCase": 1 }],
         "linebreak-style": [
             "error",
             "unix"

includes/Admin.php

@@ -502,48 +502,12 @@ public function render_onboarding() {
 		echo '<div id="ob-app"/>';
 	}
 
-
-	/**
-	 * Determine if the current user is a new one.
-	 *
-	 * @return bool
-	 */
-	private function is_neve_new_user() {
-		$is_old_user = get_option( 'neve_is_old_user', false );
-
-		if ( $is_old_user ) {
-			return false;
-		}
-
-		$install_time = get_option( 'neve_install' );
-
-		if ( empty( $install_time ) ) {
-			update_option( 'neve_is_old_user', true );
-			return false;
-		}
-
-		$now         = time();
-		$one_day_ago = $now - 86400; // 86400 seconds in a day (24 hours)
-
-		$is_new_user = ( $install_time >= $one_day_ago );
-
-		if ( ! $is_new_user ) {
-			update_option( 'neve_is_old_user', true );
-		}
-
-		return $is_new_user;
-	}
-
 	/**
 	 * Decide if the new onboarding should load
 	 *
 	 * @return bool
 	 */
 	private function should_load_onboarding() {
-		if ( ! current_user_can( 'install_plugins' ) ) {
-			return false;
-		}
-
 		if ( $this->is_starter_sites_disabled() ) {
 			return false;
 		}
@@ -554,16 +518,12 @@ private function should_load_onboarding() {
 			return false;
 		}
 
-		if ( ! $this->is_neve_new_user() ) {
-			return false;
-		}
-
 		$onboarding_done = get_option( 'tpc_onboarding_done', 'no' );
 		if ( $onboarding_done === 'yes' ) {
 			return false;
 		}
 
-		return true;
+		return get_option( 'tpc_obd_new_user', 'no' ) === 'yes';
 	}
 
 	/**
@@ -687,8 +647,10 @@ private function get_localization() {
 				'dismissed' => get_option( self::FEEDBACK_DISMISSED_OPT, false ),
 			),
 			'onboardingUpsell'    => array(
-				'dashboard' => tsdk_utmify( 'https://store.themeisle.com/', 'onboarding_upsell' ),
-				'contact'   => tsdk_utmify( 'https://themeisle.com/contact/', 'onboarding_upsell' ),
+				'dashboard'    => tsdk_utmify( 'https://store.themeisle.com/', 'onboarding_upsell' ),
+				'contact'      => tsdk_utmify( 'https://themeisle.com/contact/', 'onboarding_upsell' ),
+				'upgrade'      => tsdk_utmify( 'https://themeisle.com/themes/neve/upgrade/', 'onboarding_upsell' ),
+				'upgradeToast' => tsdk_utmify( 'https://themeisle.com/themes/neve/upgrade/', 'onboarding_toast' ),
 			),
 			'onboardingAllowed'   => $this->should_load_onboarding(),
 		);

onboarding/src/Components/CustomizeControls/ImportOptionsControl.js

@@ -32,21 +32,23 @@ const ImportOptionsControl = ( {
 		.join( '' );
 
 	const updateDivHeight = () => {
-		const element = document.querySelector( '.ob-settings-wrap' );
+		const element = document.querySelector( '.ob-site-settings-container' );
 		if ( element ) {
-			setDivHeight( element.offsetHeight + 30 );
+			setDivHeight( Math.max( element.offsetHeight, 480 ) );
 		}
 	};
 
 	useEffect( () => {
 		updateDivHeight(); // Get initial height
 
+		const win = document.defaultView;
+
 		// Attach event listener for window resize
-		window.addEventListener( 'resize', updateDivHeight );
+		win.addEventListener( 'resize', updateDivHeight );
 
 		// Clean up the event listener when the component unmounts
 		return () => {
-			window.removeEventListener( 'resize', updateDivHeight );
+			win.removeEventListener( 'resize', updateDivHeight );
 		};
 	}, [] );
 
@@ -88,9 +90,11 @@ const ImportOptionsControl = ( {
 				),
 				{
 					a: (
+						// eslint-disable-next-line jsx-a11y/anchor-has-content
 						<a
 							href="https://wordpress.org/plugins/optimole-wp/"
 							target={ '_blank' }
+							rel="external noreferrer noopener"
 							style={ {
 								textDecoration: 'none',
 								display: 'inline-flex',
@@ -130,15 +134,13 @@ const ImportOptionsControl = ( {
 
 	const toggleOpen = () => {
 		setOptionsOpened( ! optionsOpened );
-
+		updateDivHeight();
 		const optionsContainer = document.querySelector(
 			'.ob-import-options-toggles'
 		);
 		const pluginsContainer = document.querySelector( '.ob-import-plugins' );
 
-		const container = document.querySelector(
-			'.ob-site-settings-container'
-		);
+		const container = document.querySelector( '.ob-site-settings' );
 		if ( ! optionsOpened ) {
 			const newHeight =
 				optionsContainer.offsetHeight +
@@ -148,8 +150,6 @@ const ImportOptionsControl = ( {
 		} else {
 			container.style.minHeight = 'auto';
 		}
-
-		updateDivHeight();
 	};
 
 	return (

onboarding/src/Components/CustomizeControls/LogoControl.js

@@ -1,8 +1,7 @@
 import { __ } from '@wordpress/i18n';
 import { compose } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
-import { Button, TextControl, Icon } from '@wordpress/components';
-import { sendPostMessage } from '../../utils/common';
+import { Button } from '@wordpress/components';
 import { MediaUpload } from '@wordpress/media-utils';
 import { addFilter } from '@wordpress/hooks';
 import classnames from 'classnames';
@@ -37,51 +36,55 @@ const LogoControl = ( { userCustomSettings, handleLogoChange } ) => {
 					value={ siteLogo?.id || '' }
 					render={ ( { open } ) => (
 						<>
-							<div className="ob-media-controls">
-								<TextControl
-									value={ logo }
-									onChange={ () => {} }
-								/>
-								<Button isLink onClick={ open }>
-									{ __(
-										'Browse',
-										'templates-patterns-collection'
-									) }
-								</Button>
-							</div>
-							<div
+							<button
 								className={ classnames(
-									'ob-media-preview',
-									logo ? 'active' : ''
+									'ob-media',
+									logo ? 'has-logo' : ''
 								) }
+								onClick={ open }
 							>
+								{ ! logo &&
+									__(
+										'Select or upload image',
+										'templates-patterns-collection'
+									) }
 								{ logo && (
-									<>
+									<span className="ob-responsive-wrapper">
+										<span
+											style={ { paddingBottom: '150px' } }
+										></span>
 										<img
 											src={ logo }
 											alt={ __(
 												'Uploaded image',
 												'templates-patterns-collection'
 											) }
 										/>
-										<div className="ob-preview-overlay">
-											<Button
-												isTertiary
-												onClick={ () => {
-													setLogo( '' );
-													handleLogoChange( null );
-												} }
-											>
-												<Icon icon="no" />
-												{ __(
-													'Remove image',
-													'templates-patterns-collection'
-												) }
-											</Button>
-										</div>
-									</>
+									</span>
 								) }
-							</div>
+							</button>
+							{ logo && (
+								<div className="ob-media-actions">
+									<Button
+										isTertiary
+										onClick={ () => {
+											setLogo( '' );
+											handleLogoChange( null );
+										} }
+									>
+										{ __(
+											'Remove',
+											'templates-patterns-collection'
+										) }
+									</Button>
+									<Button isTertiary onClick={ open }>
+										{ __(
+											'Change',
+											'templates-patterns-collection'
+										) }
+									</Button>
+								</div>
+							) }
 						</>
 					) }
 				/>
@@ -102,9 +105,11 @@ export default compose(
 	} ),
 	withDispatch(
 		( dispatch, { importData, userCustomSettings, importDataDefault } ) => {
-			const { setUserCustomSettings, setImportData } = dispatch(
-				'ti-onboarding'
-			);
+			const {
+				setUserCustomSettings,
+				setImportData,
+				setRefresh,
+			} = dispatch( 'ti-onboarding' );
 
 			return {
 				handleLogoChange: ( newLogo ) => {
@@ -123,27 +128,18 @@ export default compose(
 								: importDataDefault.theme_mods.custom_logo,
 							logo_logo: newLogo
 								? JSON.stringify( {
-										dark: newLogo.id,
-										light: newLogo.id,
-										same: true,
+									dark: newLogo.id,
+									light: newLogo.id,
+									same: true,
 								  } )
 								: JSON.stringify( {
-										...importDataDefault.theme_mods
-											.logo_logo,
+									...importDataDefault.theme_mods
+										.logo_logo,
 								  } ),
 						},
 					};
 					setImportData( newImportData );
-
-					const logoDisplay = newImportData?.theme_mods?.logo_display;
-
-					sendPostMessage( {
-						type: 'updateSiteInfo',
-						data: {
-							...updatedSettings,
-							logoDisplay,
-						},
-					} );
+					setRefresh( true );
 				},
 			};
 		}

onboarding/src/Components/CustomizeControls/PaletteControl.js

@@ -1,5 +1,4 @@
 import { __ } from '@wordpress/i18n';
-import { sendPostMessage } from '../../utils/common';
 import { compose } from '@wordpress/compose';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { Button } from '@wordpress/components';
@@ -81,7 +80,7 @@ export default compose(
 		};
 	} ),
 	withDispatch( ( dispatch, { importData, siteStyle, setSiteStyle } ) => {
-		const { setImportData } = dispatch( 'ti-onboarding' );
+		const { setImportData, setRefresh } = dispatch( 'ti-onboarding' );
 
 		return {
 			handlePaletteClick: ( paletteKey ) => {
@@ -102,11 +101,7 @@ export default compose(
 					},
 				};
 				setImportData( newImportData );
-
-				sendPostMessage( {
-					type: 'styleChange',
-					data: newStyle,
-				} );
+				setRefresh( true );
 			},
 		};
 	} )

onboarding/src/Components/CustomizeControls/SiteNameControl.js

@@ -2,7 +2,6 @@ import { __ } from '@wordpress/i18n';
 import { compose } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { TextControl } from '@wordpress/components';
-import { sendPostMessage } from '../../utils/common';
 import { useState, useEffect } from '@wordpress/element';
 
 const SiteNameControl = ( { userCustomSettings, handleSiteNameChange } ) => {
@@ -49,9 +48,11 @@ export default compose(
 	} ),
 	withDispatch(
 		( dispatch, { importData, userCustomSettings, importDataDefault } ) => {
-			const { setUserCustomSettings, setImportData } = dispatch(
-				'ti-onboarding'
-			);
+			const {
+				setUserCustomSettings,
+				setImportData,
+				setRefresh,
+			} = dispatch( 'ti-onboarding' );
 
 			return {
 				handleSiteNameChange: ( newSiteName ) => {
@@ -71,15 +72,7 @@ export default compose(
 						},
 					};
 					setImportData( newImportData );
-
-					const logoDisplay = newImportData?.theme_mods?.logo_display;
-					sendPostMessage( {
-						type: 'updateSiteInfo',
-						data: {
-							...updatedSettings,
-							logoDisplay,
-						},
-					} );
+					setRefresh( true );
 				},
 			};
 		}