Merge pull request #155 from newfold-labs/add/PRESS2-443-allow-switch…

…ing-back-to-wonder Modify DesignStateHandler to allow switching back to Wonder via a confirmation dialog
newfold-labs · Feb 8, 2023 · ab51ec4 · ab51ec4
2 parents 8f66d4c + 7d1eff1
commit ab51ec4
Show file tree

Hide file tree

Showing 18 changed files with 325 additions and 164 deletions.
diff --git a/includes/RestApi/Themes/ThemeInstallerController.php b/includes/RestApi/Themes/ThemeInstallerController.php
@@ -2,11 +2,12 @@
 namespace NewfoldLabs\WP\Module\Onboarding\RestApi\Themes;
 
 use NewfoldLabs\WP\Module\Onboarding\Permissions;
-use NewfoldLabs\WP\Module\Onboarding\Data\Options;
 use NewfoldLabs\WP\Module\Onboarding\Services\ThemeInstaller;
 use NewfoldLabs\WP\Module\Onboarding\TaskManagers\ThemeInstallTaskManager;
 use NewfoldLabs\WP\Module\Onboarding\Tasks\ThemeInstallTask;
-
+/**
+ * Controller defining API's for theme install related functionalities.
+ */
 class ThemeInstallerController extends \WP_REST_Controller {
 	 /**
 	  * The namespace of this controller's route.
@@ -31,8 +32,8 @@ public function register_routes() {
 			$this->rest_base . '/initialize',
 			array(
 				array(
-					'methods'  => \WP_REST_Server::CREATABLE,
-					'callback' => array( $this, 'initialize' ),
+					'methods'             => \WP_REST_Server::CREATABLE,
+					'callback'            => array( $this, 'initialize' ),
 					'permission_callback' => array( Permissions::class, 'rest_is_authorized_admin' ),
 				),
 			)
@@ -56,9 +57,9 @@ public function register_routes() {
 			$this->rest_base . '/status',
 			array(
 				array(
-					'methods'  => \WP_REST_Server::READABLE,
-					'callback' => array( $this, 'get_status' ),
-					'args'     => $this->get_status_args(),
+					'methods'             => \WP_REST_Server::READABLE,
+					'callback'            => array( $this, 'get_status' ),
+					'args'                => $this->get_status_args(),
 					'permission_callback' => array( Permissions::class, 'rest_is_authorized_admin' ),
 				),
 			)
@@ -91,6 +92,11 @@ public function get_install_theme_args() {
 		 );
 	}
 
+	/**
+	 * Get the theme status check arguments.
+	 *
+	 * @return array
+	 */
 	public function get_status_args() {
 		return array(
 			'theme'     => array(
@@ -126,7 +132,7 @@ public static function initialize() {
 	 /**
 	  * Install the requested theme via a slug (theme).
 	  *
-	  * @param \WP_REST_Request $request
+	  * @param \WP_REST_Request $request The request object.
 	  *
 	  * @return \WP_REST_Response|\WP_Error
 	  */
@@ -166,6 +172,13 @@ public static function install( \WP_REST_Request $request ) {
 		 return $theme_install_task->execute();
 	}
 
+	/**
+	 * Returns the status of a given theme slug.
+	 *
+	 * @param \WP_REST_Request $request The request object
+	 *
+	 * @return \WP_REST_Response
+	 */
 	public function get_status( \WP_REST_Request $request ) {
 		$theme     = $request->get_param( 'theme' );
 		$activated = $request->get_param( 'activated' );
@@ -181,7 +194,7 @@ public function get_status( \WP_REST_Request $request ) {
 
 		$position_in_queue = ThemeInstallTaskManager::status( $theme );
 
-		if ( $position_in_queue !== false ) {
+		if ( false !== $position_in_queue ) {
 			return new \WP_REST_Response(
 				array(
 					'status'   => 'installing',

diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js
@@ -7,6 +7,10 @@ import { store as nfdOnboardingStore } from '../../../store';
 import { getGlobalStyles, getThemeColors } from '../../../utils/api/themes';
 import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
 import { GlobalStylesProvider } from '../../LivePreview';
+import {
+	THEME_STATUS_ACTIVE,
+	THEME_STATUS_INIT,
+} from '../../../../constants';
 import Animate from '../../Animate';
 
 const DesignColors = () => {
@@ -20,17 +24,24 @@ const DesignColors = () => {
 	const [ colorPalettes, setColorPalettes ] = useState();
 	const [ colorPickerCalledBy, setColorPickerCalledBy ] = useState( '' );
 
-	const { storedPreviewSettings, currentData } = useSelect( ( select ) => {
-		return {
-			storedPreviewSettings:
-				select( nfdOnboardingStore ).getPreviewSettings(),
-			currentData:
-				select( nfdOnboardingStore ).getCurrentOnboardingData(),
-		};
-	}, [] );
+	const { storedPreviewSettings, currentData, themeStatus } = useSelect(
+		( select ) => {
+			return {
+				storedPreviewSettings:
+					select( nfdOnboardingStore ).getPreviewSettings(),
+				currentData:
+					select( nfdOnboardingStore ).getCurrentOnboardingData(),
+				themeStatus: select( nfdOnboardingStore ).getThemeStatus(),
+			};
+		},
+		[]
+	);
 
-	const { updatePreviewSettings, setCurrentOnboardingData } =
-		useDispatch( nfdOnboardingStore );
+	const {
+		updatePreviewSettings,
+		setCurrentOnboardingData,
+		updateThemeStatus,
+	} = useDispatch( nfdOnboardingStore );
 
 	function stateToLocal( selectedColors ) {
 		if ( selectedColors ) {
@@ -188,6 +199,9 @@ const DesignColors = () => {
 
 	const getColorStylesAndPatterns = async () => {
 		const colorPalettes = await getThemeColors();
+		if ( colorPalettes?.error ) {
+			return updateThemeStatus( THEME_STATUS_INIT );
+		}
 		setColorPalettes( colorPalettes?.body );
 		let selectedColors;
 		let selectedColorsLocal;
@@ -215,8 +229,9 @@ const DesignColors = () => {
 	};
 
 	useEffect( () => {
-		if ( ! isLoaded ) getColorStylesAndPatterns();
-	}, [ isLoaded ] );
+		if ( ! isLoaded && THEME_STATUS_ACTIVE === themeStatus )
+			getColorStylesAndPatterns();
+	}, [ isLoaded, themeStatus ] );
 
 	const handleClick = ( colorStyle ) => {
 		const customColorsTemp = customColors;

diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js
@@ -8,7 +8,7 @@ import { GlobalStylesProvider } from '../../../components/LivePreview';
 
 import {
 	THEME_STATUS_ACTIVE,
-	THEME_STATUS_NOT_ACTIVE,
+	THEME_STATUS_INIT,
 } from '../../../../constants';
 
 const DesignHeaderMenu = () => {
@@ -48,7 +48,7 @@ const DesignHeaderMenu = () => {
 			currentStep.patternId
 		);
 		if ( headerMenuPreviewResponse?.error ) {
-			return updateThemeStatus( THEME_STATUS_NOT_ACTIVE );
+			return updateThemeStatus( THEME_STATUS_INIT );
 		}
 		setHeaderMenuPreviewData( headerMenuPreviewResponse.body );
 

diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js
@@ -7,33 +7,36 @@ import { getGlobalStyles } from '../../../utils/api/themes';
 import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
 import {
 	THEME_STATUS_ACTIVE,
-	THEME_STATUS_NOT_ACTIVE,
+	THEME_STATUS_INIT,
 } from '../../../../constants';
 import {
 	LivePreviewSelectableCard,
 	LivePreviewSkeleton,
 } from '../../LivePreview';
 
 const DesignThemeStylesPreview = () => {
-	const MAX_PREVIEWS_PER_ROW = 3;
-
 	const [ isLoaded, setIsLoaded ] = useState( false );
 	const [ pattern, setPattern ] = useState();
 	const [ globalStyles, setGlobalStyles ] = useState();
 	const [ selectedStyle, setSelectedStyle ] = useState( '' );
 
-	const { currentStep, currentData, storedPreviewSettings, themeStatus, themeVariations, } =
-		useSelect( ( select ) => {
-			return {
-				currentStep: select( nfdOnboardingStore ).getCurrentStep(),
-				currentData:
-					select( nfdOnboardingStore ).getCurrentOnboardingData(),
-				storedPreviewSettings:
-					select( nfdOnboardingStore ).getPreviewSettings(),
-				themeStatus: select( nfdOnboardingStore ).getThemeStatus(),
-				themeVariations: select(nfdOnboardingStore).getStepPreviewData(),
-			};
-		}, [] );
+	const {
+		currentStep,
+		currentData,
+		storedPreviewSettings,
+		themeStatus,
+		themeVariations,
+	} = useSelect( ( select ) => {
+		return {
+			currentStep: select( nfdOnboardingStore ).getCurrentStep(),
+			currentData:
+				select( nfdOnboardingStore ).getCurrentOnboardingData(),
+			storedPreviewSettings:
+				select( nfdOnboardingStore ).getPreviewSettings(),
+			themeStatus: select( nfdOnboardingStore ).getThemeStatus(),
+			themeVariations: select( nfdOnboardingStore ).getStepPreviewData(),
+		};
+	}, [] );
 
 	const {
 		updatePreviewSettings,
@@ -47,11 +50,11 @@ const DesignThemeStylesPreview = () => {
 			true
 		);
 		if ( patternResponse?.error ) {
-			return updateThemeStatus( THEME_STATUS_NOT_ACTIVE );
+			return updateThemeStatus( THEME_STATUS_INIT );
 		}
 		const globalStylesResponse = await getGlobalStyles( true );
 		if ( globalStylesResponse?.error ) {
-			return updateThemeStatus( THEME_STATUS_NOT_ACTIVE );
+			return updateThemeStatus( THEME_STATUS_INIT );
 		}
 		setPattern( patternResponse?.body );
 		setGlobalStyles( globalStylesResponse?.body );
@@ -120,9 +123,12 @@ const DesignThemeStylesPreview = () => {
 				<LivePreviewSkeleton
 					className={ 'theme-styles-preview--drawer__list__item' }
 					watch={ globalStyles && pattern }
-					count={ themeVariations[currentStep?.patternId]?.previewCount }
+					count={
+						themeVariations[ currentStep?.patternId ]?.previewCount
+					}
 					callback={ buildPreviews }
-					viewportWidth={ 900 }/>
+					viewportWidth={ 900 }
+				/>
 			</div>
 		</div>
 	);

diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
@@ -6,6 +6,10 @@ import { store as nfdOnboardingStore } from '../../../store';
 import { GlobalStylesProvider } from '../../../components/LivePreview';
 import { getGlobalStyles, getThemeFonts } from '../../../utils/api/themes';
 import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
+import {
+	THEME_STATUS_ACTIVE,
+	THEME_STATUS_INIT,
+} from '../../../../constants';
 
 const DesignTypography = () => {
 	const drawerFontOptions = useRef();
@@ -15,20 +19,30 @@ const DesignTypography = () => {
 	const [ fontPalettes, setFontPalettes ] = useState();
 	const [ isAccordionClosed, setIsAccordionClosed ] = useState( true );
 
-	const { storedPreviewSettings, currentData } = useSelect( ( select ) => {
-		return {
-			storedPreviewSettings:
-				select( nfdOnboardingStore ).getPreviewSettings(),
-			currentData:
-				select( nfdOnboardingStore ).getCurrentOnboardingData(),
-		};
-	}, [] );
+	const { storedPreviewSettings, currentData, themeStatus } = useSelect(
+		( select ) => {
+			return {
+				storedPreviewSettings:
+					select( nfdOnboardingStore ).getPreviewSettings(),
+				currentData:
+					select( nfdOnboardingStore ).getCurrentOnboardingData(),
+				themeStatus: select( nfdOnboardingStore ).getThemeStatus(),
+			};
+		},
+		[]
+	);
 
-	const { updatePreviewSettings, setCurrentOnboardingData } =
-		useDispatch( nfdOnboardingStore );
+	const {
+		updatePreviewSettings,
+		setCurrentOnboardingData,
+		updateThemeStatus,
+	} = useDispatch( nfdOnboardingStore );
 
 	const getFontStylesAndPatterns = async () => {
 		const fontPalettes = await getThemeFonts();
+		if ( fontPalettes?.error ) {
+			return updateThemeStatus( THEME_STATUS_INIT );
+		}
 		setFontPalettes( fontPalettes?.body );
 
 		if ( currentData?.data?.typography?.slug !== '' ) {
@@ -51,8 +65,9 @@ const DesignTypography = () => {
 	};
 
 	useEffect( () => {
-		if ( ! isLoaded ) getFontStylesAndPatterns();
-	}, [ isLoaded ] );
+		if ( ! isLoaded && THEME_STATUS_ACTIVE === themeStatus )
+			getFontStylesAndPatterns();
+	}, [ isLoaded, themeStatus ] );
 
 	const handleClick = async (
 		fontStyle,

diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPrimary.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPrimary.js
@@ -33,8 +33,8 @@ const NavPrimary = () => {
 				</Button>
 			) ) || (
 				<ExitToWordPress
-					className="nfd-onboarding-drawer__panel-back"
-					variant="tertiary"
+					buttonClassName="nfd-onboarding-drawer__panel-back"
+					buttonVariant="tertiary"
 					origin="drawer-panel"
 				/>
 			) }