From df8001c7b0f2fc90ffaa97db0ebce7edd2db1fa1 Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Mon, 23 Jan 2023 14:29:36 +0530 Subject: [PATCH 1/8] allow switching back to wonder when wonder is not the active theme on reaching the design steps --- .../Themes/ThemeInstallerController.php | 1 - .../Drawer/DrawerPanel/DesignHeaderMenu.js | 4 +- .../DrawerPanel/DesignThemeStylesPreview.js | 6 +- .../Drawer/DrawerPanel/NavPrimary.js | 4 +- .../components/ExitToWordPress/index.js | 158 +++++++++++------- .../components/StateHandlers/Design/index.js | 54 +++++- .../pages/Steps/DesignColors/index.js | 4 +- .../pages/Steps/DesignHomepageMenu/index.js | 4 +- .../Steps/DesignThemeStyles/Menu/index.js | 6 +- .../Steps/DesignThemeStyles/Preview/index.js | 4 +- .../pages/Steps/DesignTypography/index.js | 4 +- .../pages/Steps/SitePages/index.js | 4 +- src/OnboardingSPA/utils/api/themes.js | 19 +++ src/constants.js | 3 +- 14 files changed, 189 insertions(+), 86 deletions(-) diff --git a/includes/RestApi/Themes/ThemeInstallerController.php b/includes/RestApi/Themes/ThemeInstallerController.php index 89734e3cb..efe6b65e2 100644 --- a/includes/RestApi/Themes/ThemeInstallerController.php +++ b/includes/RestApi/Themes/ThemeInstallerController.php @@ -2,7 +2,6 @@ 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; diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js index f8fc81a21..3b60159bf 100644 --- 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_FAILURE, } 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_FAILURE ); } setHeaderMenuPreviewData( headerMenuPreviewResponse.body ); diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js index dbcd6be13..99ce817fa 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js @@ -7,7 +7,7 @@ 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_FAILURE, } from '../../../../constants'; import { LivePreviewSelectableCard, @@ -47,11 +47,11 @@ const DesignThemeStylesPreview = () => { true ); if ( patternResponse?.error ) { - return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); + return updateThemeStatus( THEME_STATUS_FAILURE ); } const globalStylesResponse = await getGlobalStyles( true ); if ( globalStylesResponse?.error ) { - return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); + return updateThemeStatus( THEME_STATUS_FAILURE ); } setPattern( patternResponse?.body ); setGlobalStyles( globalStylesResponse?.body ); diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPrimary.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPrimary.js index b90400c80..d428e5e2f 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPrimary.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPrimary.js @@ -32,8 +32,8 @@ const NavPrimary = () => { ) ) || ( ) } diff --git a/src/OnboardingSPA/components/ExitToWordPress/index.js b/src/OnboardingSPA/components/ExitToWordPress/index.js index cddfd1a45..55a832b18 100644 --- a/src/OnboardingSPA/components/ExitToWordPress/index.js +++ b/src/OnboardingSPA/components/ExitToWordPress/index.js @@ -1,10 +1,10 @@ import { useSelect } from '@wordpress/data'; -import { useLocation } from 'react-router-dom'; +import { useLocation } from 'react-router-dom'; import { chevronLeft } from '@wordpress/icons'; import { Fragment, useState } from '@wordpress/element'; -import { Button, ButtonGroup, Modal, Tooltip } from '@wordpress/components'; +import { Button, ButtonGroup, Modal } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; +import { __, sprintf } from '@wordpress/i18n'; import classNames from 'classnames'; import { setFlow } from '../../utils/api/flow'; import { store as nfdOnboardingStore } from '../../store'; @@ -15,106 +15,148 @@ import { wpAdminPage, bluehostDashboardPage } from '../../../constants'; * Self-contained button and confirmation modal for exiting Onboarding page. * * @param {*} param0 - * @returns + * @return */ -const ExitToWordPress = ({ - text = __('Exit to WordPress', 'wp-module-onboarding'), - showIcon = true, +const ExitToWordPress = ( { + buttonText = __( 'Exit to WordPress', 'wp-module-onboarding' ), + showButtonIcon = true, showButton = true, - variant = 'secondary', - className = false, - origin, - ...props -}) => { - const [isOpen, setIsOpen] = useState(false); - const openModal = () => setIsOpen(true); - const closeModal = () => setIsOpen(false); + buttonVariant = 'secondary', + buttonClassName = false, + isModalOpen = false, + modalTitle = __( 'Exit without finishing?', 'wp-module-onboarding' ), + modalText = false, + modalPrimaryCloseButtonText = __( 'Continue', 'wp-module-onboarding' ), + modalPrimaryCloseButtonOnClick = false, + onRequestClose = false, + modalExitButtonText = __( 'Exit', 'wp-module-onboarding' ), +} ) => { + const [ isOpen, setIsOpen ] = useState( isModalOpen ); + const openModal = () => setIsOpen( true ); + const closeModal = ( context ) => { + switch ( context ) { + case 'on-request-close': + if ( typeof onRequestClose === 'function' ) { + onRequestClose(); + } + break; + case 'primary-close-button': + if ( typeof modalPrimaryCloseButtonOnClick === 'function' ) { + modalPrimaryCloseButtonOnClick(); + } + break; + } + setIsOpen( false ); + }; const location = useLocation(); - const { currentData } = useSelect( - (select) => { + const { currentData, brandName } = useSelect( + ( select ) => { return { - currentData: select(nfdOnboardingStore).getCurrentOnboardingData(), + currentData: + select( nfdOnboardingStore ).getCurrentOnboardingData(), + brandName: select( nfdOnboardingStore ).getNewfoldBrandName(), }; }, - [location.pathname] + [ location.pathname ] ); - const label = __( - 'You can restart onboarding from your Bluehost Settings page.', - 'wp-module-onboarding' - ); + if ( ! modalText ) { + modalText = sprintf( + /* translators: %s: Brand */ + __( + 'You can restart onboarding from your %s Settings page.', + 'wp-module-onboarding' + ), + brandName + ); + } - async function syncSocialSettingsFinish(currentData) { + async function syncSocialSettingsFinish( currentData ) { const initialData = await getSettings(); - const result = await setSettings(currentData?.data?.socialData); - if (result?.error != null) { - console.error('Unable to Save Social Data!'); + const result = await setSettings( currentData?.data?.socialData ); + if ( result?.error !== null ) { return initialData?.body; } return result?.body; } - async function saveData(path, currentData) { - - if (currentData) { - currentData.hasExited = new Date().getTime(); + async function saveData( path, currentData ) { + if ( currentData ) { + currentData.hasExited = new Date().getTime(); // If Social Data is changed then sync it - if (path?.includes('basic-info')) { - const socialData = await syncSocialSettingsFinish(currentData); + if ( path?.includes( 'basic-info' ) ) { + const socialData = await syncSocialSettingsFinish( + currentData + ); // If Social Data is changed then Sync that also to the store - if (socialData && currentData?.data) + if ( socialData && currentData?.data ) currentData.data.socialData = socialData; } - setFlow(currentData); + setFlow( currentData ); } - //Redirect to Admin Page for normal customers + //Redirect to Admin Page for normal customers // and Bluehost Dashboard for ecommerce customers - const exitLink = exitToWordpressForEcommerce() ? bluehostDashboardPage : wpAdminPage; - window.location.replace(exitLink); + const exitLink = exitToWordpressForEcommerce() + ? bluehostDashboardPage + : wpAdminPage; + window.location.replace( exitLink ); } return ( - - {isOpen && ( + { showButton && ( + + ) } + { isOpen && ( closeModal( 'on-request-close' ) } > -

{label}

+

{ modalText }

- - )} + ) } ); }; /* - * check if this is the last step + * check if this is the last step */ const exitToWordpressForEcommerce = () => { - if (window.nfdOnboarding.currentFlow == 'ecommerce') { + if ( window.nfdOnboarding.currentFlow === 'ecommerce' ) { return true; } return false; -} +}; export default ExitToWordPress; diff --git a/src/OnboardingSPA/components/StateHandlers/Design/index.js b/src/OnboardingSPA/components/StateHandlers/Design/index.js index 74ed62aec..0704b4859 100644 --- a/src/OnboardingSPA/components/StateHandlers/Design/index.js +++ b/src/OnboardingSPA/components/StateHandlers/Design/index.js @@ -1,10 +1,14 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { Fragment, useEffect } from '@wordpress/element'; import { useViewportMatch } from '@wordpress/compose'; +import { __ } from '@wordpress/i18n'; import { StepLoader } from '../../Loaders'; import { store as nfdOnboardingStore } from '../../../store'; -import { getThemeStatus } from '../../../utils/api/themes'; +import { + getThemeStatus, + install as installTheme, +} from '../../../utils/api/themes'; import { THEME_STATUS_INIT, THEME_STATUS_INSTALLING, @@ -12,9 +16,11 @@ import { THEME_STATUS_ACTIVE, DESIGN_STEPS_THEME, THEME_INSTALL_WAIT_TIMEOUT, + THEME_STATUS_FAILURE, } from '../../../../constants'; import { StepErrorState } from '../../ErrorState'; import getContents from './contents'; +import ExitToWordPress from '../../ExitToWordPress'; const DesignStateHandler = ( { children, @@ -77,10 +83,9 @@ const DesignStateHandler = ( { enableNavigation(); }; - const handleNavigationState = ( themeStatus ) => { - switch ( themeStatus ) { - case THEME_STATUS_NOT_ACTIVE: - return handleNavigationStateCallback(); + const handleNavigationState = () => { + switch ( storedThemeStatus ) { + case THEME_STATUS_FAILURE: case THEME_STATUS_ACTIVE: return handleNavigationStateCallback(); default: @@ -89,7 +94,7 @@ const DesignStateHandler = ( { }; useEffect( async () => { - handleNavigationState( storedThemeStatus ); + handleNavigationState(); if ( storedThemeStatus === THEME_STATUS_INIT ) { const themeStatus = await checkThemeStatus(); @@ -106,9 +111,46 @@ const DesignStateHandler = ( { } }, [ storedThemeStatus ] ); + const installThemeManually = async () => { + updateThemeStatus( THEME_STATUS_INSTALLING ); + const themeInstallStatus = await installTheme( + DESIGN_STEPS_THEME, + true, + false + ); + if ( themeInstallStatus.error ) { + return updateThemeStatus( THEME_STATUS_FAILURE ); + } + + return window.location.reload(); + }; + const handleRender = () => { switch ( storedThemeStatus ) { case THEME_STATUS_NOT_ACTIVE: + return ( + + updateThemeStatus( THEME_STATUS_FAILURE ) + } + modalExitButtonText={ __( + 'Exit to WordPress', + 'wp-module-onboarding' + ) } + /> + ); + case THEME_STATUS_FAILURE: return ( { const getStylesAndPatterns = async () => { const pattern = await getPatterns( currentStep.patternId, true ); if ( pattern?.error ) { - return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); + return updateThemeStatus( THEME_STATUS_FAILURE ); } setPattern( pattern?.body ); setIsLoaded( true ); diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js index ccc983dc8..fa1ebe985 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js @@ -8,7 +8,7 @@ import CommonLayout from '../../../components/Layouts/Common'; import { VIEW_NAV_DESIGN, THEME_STATUS_ACTIVE, - THEME_STATUS_NOT_ACTIVE, + THEME_STATUS_FAILURE, SIDEBAR_LEARN_MORE, } from '../../../../constants'; import HeadingWithSubHeading from '../../../components/HeadingWithSubHeading'; @@ -103,7 +103,7 @@ const StepDesignHomepageMenu = () => { async function getHomepagePatternsData() { const homepagePatternData = await getPatterns( currentStep.patternId ); if ( homepagePatternData?.error ) { - return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); + return updateThemeStatus( THEME_STATUS_FAILURE ); } setHomepagePattern( refactorPatterns( homepagePatternData ) ); diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js index a2c56b1aa..89fadac82 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js @@ -11,7 +11,7 @@ import { getGlobalStyles } from '../../../../utils/api/themes'; import { VIEW_NAV_DESIGN, THEME_STATUS_ACTIVE, - THEME_STATUS_NOT_ACTIVE, + THEME_STATUS_FAILURE, SIDEBAR_LEARN_MORE, } from '../../../../../constants'; import { DesignStateHandler } from '../../../../components/StateHandlers'; @@ -69,11 +69,11 @@ const StepDesignThemeStylesMenu = () => { true ); if ( patternsResponse?.error ) { - return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); + return updateThemeStatus( THEME_STATUS_FAILURE ); } const globalStylesResponse = await getGlobalStyles( true ); if ( globalStylesResponse?.error ) { - return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); + return updateThemeStatus( THEME_STATUS_FAILURE ); } setPattern( patternsResponse?.body ); setGlobalStyles( globalStylesResponse?.body ); diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js index 6c5bc0ff1..a4d5b7479 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js @@ -13,7 +13,7 @@ import CommonLayout from '../../../../components/Layouts/Common'; import { VIEW_DESIGN_THEME_STYLES_PREVIEW, THEME_STATUS_ACTIVE, - THEME_STATUS_NOT_ACTIVE, + THEME_STATUS_FAILURE, SIDEBAR_LEARN_MORE, } from '../../../../../constants'; import { store as nfdOnboardingStore } from '../../../../store'; @@ -70,7 +70,7 @@ const StepDesignThemeStylesPreview = () => { true ); if ( patternsResponse?.error ) { - return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); + return updateThemeStatus( THEME_STATUS_FAILURE ); } setPattern( patternsResponse?.body ); setIsLoaded( true ); diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js index 6d0bc3a5a..be57d7e30 100644 --- a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js @@ -7,7 +7,7 @@ import { store as nfdOnboardingStore } from '../../../store'; import CommonLayout from '../../../components/Layouts/Common'; import { SIDEBAR_LEARN_MORE, - THEME_STATUS_NOT_ACTIVE, + THEME_STATUS_FAILURE, VIEW_DESIGN_TYPOGRAPHY, } from '../../../../constants'; import { DesignStateHandler } from '../../../components/StateHandlers'; @@ -43,7 +43,7 @@ const StepDesignTypography = () => { true ); if ( patternsResponse?.error ) { - return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); + return updateThemeStatus( THEME_STATUS_FAILURE ); } setPattern( patternsResponse?.body ); setIsLoaded( true ); diff --git a/src/OnboardingSPA/pages/Steps/SitePages/index.js b/src/OnboardingSPA/pages/Steps/SitePages/index.js index 6f05f3ef1..5586fef5d 100644 --- a/src/OnboardingSPA/pages/Steps/SitePages/index.js +++ b/src/OnboardingSPA/pages/Steps/SitePages/index.js @@ -8,7 +8,7 @@ import HeadingWithSubHeading from '../../../components/HeadingWithSubHeading'; import { getPatterns } from '../../../utils/api/patterns'; import { THEME_STATUS_ACTIVE, - THEME_STATUS_NOT_ACTIVE, + THEME_STATUS_FAILURE, SIDEBAR_LEARN_MORE, VIEW_NAV_DESIGN, } from '../../../../constants'; @@ -54,7 +54,7 @@ const StepSitePages = () => { const getSitePages = async () => { const sitePagesResponse = await getPatterns( currentStep.patternId ); if ( sitePagesResponse?.error ) { - return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); + return updateThemeStatus( THEME_STATUS_FAILURE ); } if ( sitePagesResponse?.body ) { setSitePages( sitePagesResponse.body ); diff --git a/src/OnboardingSPA/utils/api/themes.js b/src/OnboardingSPA/utils/api/themes.js index ae4b9f238..273bba53b 100644 --- a/src/OnboardingSPA/utils/api/themes.js +++ b/src/OnboardingSPA/utils/api/themes.js @@ -18,6 +18,24 @@ const init = () => { } ); }; +const install = async ( theme, activate = true, queue = true ) => { + if ( typeof theme !== 'string' ) { + return false; + } + + return await resolve( + apiFetch( { + url: onboardingRestURL( 'themes/install' ), + method: 'POST', + data: { + theme, + activate, + queue, + }, + } ) + ); +}; + const getGlobalStyles = async ( variations = false ) => { return await resolve( apiFetch( { @@ -71,4 +89,5 @@ export { getThemeStatus, getThemeColors, getThemeFonts, + install, }; diff --git a/src/constants.js b/src/constants.js index 26b024944..36d2121d0 100644 --- a/src/constants.js +++ b/src/constants.js @@ -33,11 +33,12 @@ export const NFD_PLUGINS_QUERY_PARAM = 'nfd_plugins'; export const NFD_THEMES_QUERY_PARAM = 'nfd_themes'; // [TODO] Read the theme from flow data once we have the themes step. -export const DESIGN_STEPS_THEME = 'nfd_slug_yith_wonder' +export const DESIGN_STEPS_THEME = 'nfd_slug_yith_wonder'; export const THEME_STATUS_INIT = 'init'; export const THEME_STATUS_NOT_ACTIVE = 'inactive'; export const THEME_STATUS_INSTALLING = 'installing'; export const THEME_STATUS_ACTIVE = 'activated'; +export const THEME_STATUS_FAILURE = 'failed'; export const THEME_INSTALL_WAIT_TIMEOUT = 30000 export const ECOMMERCE_STEPS_PLUGIN = 'woocommerce' From e48ba25eebfd4a077e6ce64796f316ad7bbbef24 Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Mon, 23 Jan 2023 14:36:18 +0530 Subject: [PATCH 2/8] php lint fixes --- .../Themes/ThemeInstallerController.php | 30 ++++++++++++++----- 1 file changed, 22 insertions(+), 8 deletions(-) diff --git a/includes/RestApi/Themes/ThemeInstallerController.php b/includes/RestApi/Themes/ThemeInstallerController.php index efe6b65e2..d7842dbe1 100644 --- a/includes/RestApi/Themes/ThemeInstallerController.php +++ b/includes/RestApi/Themes/ThemeInstallerController.php @@ -5,7 +5,9 @@ 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. @@ -30,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' ), ), ) @@ -55,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' ), ), ) @@ -90,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( @@ -125,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 */ @@ -165,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' ); @@ -180,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', From 0088b3be6e9030fe5217a108726b096c99bf8fbe Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Mon, 23 Jan 2023 22:22:24 +0530 Subject: [PATCH 3/8] add support for back navigation after generating the child theme --- .../Drawer/DrawerPanel/DesignHeaderMenu.js | 13 ++++++- .../LivePreview/GlobalStylesProvider/index.js | 16 ++++++++- .../pages/Steps/Complete/index.js | 34 ++++++++++++------- .../pages/Steps/DesignColors/index.js | 13 ++++++- .../pages/Steps/DesignHomepageMenu/index.js | 13 ++++++- .../Steps/DesignThemeStyles/Menu/index.js | 15 ++++++-- .../Steps/DesignThemeStyles/Preview/index.js | 13 ++++++- .../pages/Steps/DesignTypography/index.js | 13 ++++++- .../pages/Steps/SitePages/index.js | 13 ++++++- 9 files changed, 121 insertions(+), 22 deletions(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js index 3b60159bf..b0fd6caa8 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js @@ -9,6 +9,7 @@ import { GlobalStylesProvider } from '../../../components/LivePreview'; import { THEME_STATUS_ACTIVE, THEME_STATUS_FAILURE, + THEME_STATUS_NOT_ACTIVE, } from '../../../../constants'; const DesignHeaderMenu = () => { @@ -43,12 +44,22 @@ const DesignHeaderMenu = () => { const { setCurrentOnboardingData, updateThemeStatus, setHeaderMenuData } = useDispatch( nfdOnboardingStore ); + const handleAPIError = ( error ) => { + if ( error?.data?.status ) { + switch ( error.data.status ) { + case 404: + return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); + } + } + return updateThemeStatus( THEME_STATUS_FAILURE ); + }; + const getPatternsData = async () => { const headerMenuPreviewResponse = await getPatterns( currentStep.patternId ); if ( headerMenuPreviewResponse?.error ) { - return updateThemeStatus( THEME_STATUS_FAILURE ); + return handleAPIError( headerMenuPreviewResponse.error ); } setHeaderMenuPreviewData( headerMenuPreviewResponse.body ); diff --git a/src/OnboardingSPA/components/LivePreview/GlobalStylesProvider/index.js b/src/OnboardingSPA/components/LivePreview/GlobalStylesProvider/index.js index 436da015f..321cd1668 100644 --- a/src/OnboardingSPA/components/LivePreview/GlobalStylesProvider/index.js +++ b/src/OnboardingSPA/components/LivePreview/GlobalStylesProvider/index.js @@ -4,6 +4,10 @@ import { useState, useEffect } from '@wordpress/element'; import { store as nfdOnboardingStore } from '../../../store'; import { getGlobalStyles, setGlobalStyles } from '../../../utils/api/themes'; import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output'; +import { + THEME_STATUS_FAILURE, + THEME_STATUS_NOT_ACTIVE, +} from '../../../../constants'; /** * Global Style Parent Component @@ -28,10 +32,20 @@ const GlobalStylesProvider = ( { children } ) => { const { updateThemeStatus, updatePreviewSettings } = useDispatch( nfdOnboardingStore ); + const handleAPIError = ( error ) => { + if ( error?.data?.status ) { + switch ( error.data.status ) { + case 404: + return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); + } + } + return updateThemeStatus( THEME_STATUS_FAILURE ); + }; + const getStylesAndPatterns = async () => { const globalStyles = await getGlobalStyles(); if ( globalStyles?.error ) { - return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); + return handleAPIError( globalStyles.error ); } let selectedGlobalStyle; if ( storedPreviewSettings?.title && storedPreviewSettings?.settings ) diff --git a/src/OnboardingSPA/pages/Steps/Complete/index.js b/src/OnboardingSPA/pages/Steps/Complete/index.js index 69a263f21..073161462 100644 --- a/src/OnboardingSPA/pages/Steps/Complete/index.js +++ b/src/OnboardingSPA/pages/Steps/Complete/index.js @@ -9,10 +9,15 @@ import { StepLoader } from '../../../components/Loaders'; import { setSiteFeatures } from '../../../utils/api/plugins'; import { StepErrorState } from '../../../components/ErrorState'; import { DesignStateHandler } from '../../../components/StateHandlers'; +import { THEME_STATUS_INIT } from '../../../../constants'; const StepComplete = () => { - const { setIsDrawerSuppressed, setIsHeaderNavigationEnabled, setSidebarActiveView } = - useDispatch( nfdOnboardingStore ); + const { + setIsDrawerSuppressed, + setIsHeaderNavigationEnabled, + setSidebarActiveView, + updateThemeStatus, + } = useDispatch( nfdOnboardingStore ); const navigate = useNavigate(); const [ isError, setIsError ] = useState( false ); @@ -34,18 +39,21 @@ const StepComplete = () => { const contents = getContents( brandName ); const checkFlowComplete = async () => { - await Promise.all( [ completeFlowRequest(), setSiteFeaturesRequest() ] ).then( - ( values ) => - values.forEach( ( value ) => { - // If any Request returns False then Show Error - if ( ! value ) { - setIsHeaderNavigationEnabled( true ); - return setIsError( true ); - } - } ) + await Promise.all( [ + completeFlowRequest(), + setSiteFeaturesRequest(), + ] ).then( ( values ) => + values.forEach( ( value ) => { + // If any Request returns False then Show Error + if ( ! value ) { + setIsHeaderNavigationEnabled( true ); + return setIsError( true ); + } + } ) ); navigate( nextStep.path ); + updateThemeStatus( THEME_STATUS_INIT ); }; async function completeFlowRequest() { @@ -69,13 +77,13 @@ const StepComplete = () => { setIsHeaderNavigationEnabled( false ); setIsDrawerSuppressed( true ); setSidebarActiveView( false ); - } + }; useEffect( () => { checkFlowComplete(); }, [] ); return ( - + { isError ? ( { setDrawerActiveView( VIEW_DESIGN_COLORS ); }, [] ); + const handleAPIError = ( error ) => { + if ( error?.data?.status ) { + switch ( error.data.status ) { + case 404: + return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); + } + } + return updateThemeStatus( THEME_STATUS_FAILURE ); + }; + const getStylesAndPatterns = async () => { const pattern = await getPatterns( currentStep.patternId, true ); if ( pattern?.error ) { - return updateThemeStatus( THEME_STATUS_FAILURE ); + handleAPIError( pattern.error ); } setPattern( pattern?.body ); setIsLoaded( true ); diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js index fa1ebe985..0ad145545 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js @@ -10,6 +10,7 @@ import { THEME_STATUS_ACTIVE, THEME_STATUS_FAILURE, SIDEBAR_LEARN_MORE, + THEME_STATUS_NOT_ACTIVE, } from '../../../../constants'; import HeadingWithSubHeading from '../../../components/HeadingWithSubHeading'; import { DesignStateHandler } from '../../../components/StateHandlers'; @@ -100,10 +101,20 @@ const StepDesignHomepageMenu = () => { return makeHomepagePattern; } + const handleAPIError = ( error ) => { + if ( error?.data?.status ) { + switch ( error.data.status ) { + case 404: + return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); + } + } + return updateThemeStatus( THEME_STATUS_FAILURE ); + }; + async function getHomepagePatternsData() { const homepagePatternData = await getPatterns( currentStep.patternId ); if ( homepagePatternData?.error ) { - return updateThemeStatus( THEME_STATUS_FAILURE ); + return handleAPIError( homepagePatternData.error ); } setHomepagePattern( refactorPatterns( homepagePatternData ) ); diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js index 89fadac82..4771e027c 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js @@ -13,6 +13,7 @@ import { THEME_STATUS_ACTIVE, THEME_STATUS_FAILURE, SIDEBAR_LEARN_MORE, + THEME_STATUS_NOT_ACTIVE, } from '../../../../../constants'; import { DesignStateHandler } from '../../../../components/StateHandlers'; import { @@ -63,17 +64,27 @@ const StepDesignThemeStylesMenu = () => { setDrawerActiveView( VIEW_NAV_DESIGN ); }, [] ); + const handleAPIError = ( error ) => { + if ( error?.data?.status ) { + switch ( error.data.status ) { + case 404: + return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); + } + } + return updateThemeStatus( THEME_STATUS_FAILURE ); + }; + const getStylesAndPatterns = async () => { const patternsResponse = await getPatterns( currentStep.patternId, true ); if ( patternsResponse?.error ) { - return updateThemeStatus( THEME_STATUS_FAILURE ); + return handleAPIError( patternsResponse.error ); } const globalStylesResponse = await getGlobalStyles( true ); if ( globalStylesResponse?.error ) { - return updateThemeStatus( THEME_STATUS_FAILURE ); + return handleAPIError( globalStylesResponse.error ); } setPattern( patternsResponse?.body ); setGlobalStyles( globalStylesResponse?.body ); diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js index a4d5b7479..f869abceb 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js @@ -15,6 +15,7 @@ import { THEME_STATUS_ACTIVE, THEME_STATUS_FAILURE, SIDEBAR_LEARN_MORE, + THEME_STATUS_NOT_ACTIVE, } from '../../../../../constants'; import { store as nfdOnboardingStore } from '../../../../store'; import { getPatterns } from '../../../../utils/api/patterns'; @@ -64,13 +65,23 @@ const StepDesignThemeStylesPreview = () => { handleCheckbox( currentData.data.customDesign, false ); }, [] ); + const handleAPIError = ( error ) => { + if ( error?.data?.status ) { + switch ( error.data.status ) { + case 404: + return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); + } + } + return updateThemeStatus( THEME_STATUS_FAILURE ); + }; + const getStylesAndPatterns = async () => { const patternsResponse = await getPatterns( currentStep.patternId, true ); if ( patternsResponse?.error ) { - return updateThemeStatus( THEME_STATUS_FAILURE ); + return handleAPIError( patternsResponse.error ); } setPattern( patternsResponse?.body ); setIsLoaded( true ); diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js index be57d7e30..955dee99a 100644 --- a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js @@ -9,6 +9,7 @@ import { SIDEBAR_LEARN_MORE, THEME_STATUS_FAILURE, VIEW_DESIGN_TYPOGRAPHY, + THEME_STATUS_NOT_ACTIVE, } from '../../../../constants'; import { DesignStateHandler } from '../../../components/StateHandlers'; import { @@ -37,13 +38,23 @@ const StepDesignTypography = () => { setDrawerActiveView( VIEW_DESIGN_TYPOGRAPHY ); }, [] ); + const handleAPIError = ( error ) => { + if ( error?.data?.status ) { + switch ( error.data.status ) { + case 404: + return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); + } + } + return updateThemeStatus( THEME_STATUS_FAILURE ); + }; + const getFontPatterns = async () => { const patternsResponse = await getPatterns( currentStep.patternId, true ); if ( patternsResponse?.error ) { - return updateThemeStatus( THEME_STATUS_FAILURE ); + return handleAPIError( patternsResponse.error ); } setPattern( patternsResponse?.body ); setIsLoaded( true ); diff --git a/src/OnboardingSPA/pages/Steps/SitePages/index.js b/src/OnboardingSPA/pages/Steps/SitePages/index.js index 5586fef5d..98534576e 100644 --- a/src/OnboardingSPA/pages/Steps/SitePages/index.js +++ b/src/OnboardingSPA/pages/Steps/SitePages/index.js @@ -11,6 +11,7 @@ import { THEME_STATUS_FAILURE, SIDEBAR_LEARN_MORE, VIEW_NAV_DESIGN, + THEME_STATUS_NOT_ACTIVE, } from '../../../../constants'; import { DesignStateHandler } from '../../../components/StateHandlers'; import { @@ -51,10 +52,20 @@ const StepSitePages = () => { setDrawerActiveView( VIEW_NAV_DESIGN ); }, [] ); + const handleAPIError = ( error ) => { + if ( error?.data?.status ) { + switch ( error.data.status ) { + case 404: + return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); + } + } + return updateThemeStatus( THEME_STATUS_FAILURE ); + }; + const getSitePages = async () => { const sitePagesResponse = await getPatterns( currentStep.patternId ); if ( sitePagesResponse?.error ) { - return updateThemeStatus( THEME_STATUS_FAILURE ); + handleAPIError( sitePagesResponse.error ); } if ( sitePagesResponse?.body ) { setSitePages( sitePagesResponse.body ); From 33bdc17f34bcdc7e289fff43a319700dd3130df5 Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Mon, 23 Jan 2023 22:29:09 +0530 Subject: [PATCH 4/8] add missed file --- .../DrawerPanel/DesignThemeStylesPreview.js | 53 ++++++++++++------- 1 file changed, 35 insertions(+), 18 deletions(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js index 99ce817fa..7e8133a0e 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js @@ -8,6 +8,7 @@ import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-s import { THEME_STATUS_ACTIVE, THEME_STATUS_FAILURE, + THEME_STATUS_NOT_ACTIVE, } from '../../../../constants'; import { LivePreviewSelectableCard, @@ -15,25 +16,28 @@ import { } 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, @@ -41,17 +45,27 @@ const DesignThemeStylesPreview = () => { updateThemeStatus, } = useDispatch( nfdOnboardingStore ); + const handleAPIError = ( error ) => { + if ( error?.data?.status ) { + switch ( error.data.status ) { + case 404: + return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); + } + } + return updateThemeStatus( THEME_STATUS_FAILURE ); + }; + const getStylesAndPatterns = async () => { const patternResponse = await getPatterns( currentStep.patternId, true ); if ( patternResponse?.error ) { - return updateThemeStatus( THEME_STATUS_FAILURE ); + return handleAPIError( patternResponse.error ); } const globalStylesResponse = await getGlobalStyles( true ); if ( globalStylesResponse?.error ) { - return updateThemeStatus( THEME_STATUS_FAILURE ); + return handleAPIError( globalStylesResponse.error ); } setPattern( patternResponse?.body ); setGlobalStyles( globalStylesResponse?.body ); @@ -120,9 +134,12 @@ const DesignThemeStylesPreview = () => { + viewportWidth={ 900 } + /> ); From dba7004b67c4f0bfd2206fe5d0a5680cccf4a9c5 Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Tue, 24 Jan 2023 11:42:14 +0530 Subject: [PATCH 5/8] issue in trunk: prevent unecessary API calls in error state --- .../Drawer/DrawerPanel/DesignColors.js | 39 +++++++++++++------ .../Drawer/DrawerPanel/DesignHeaderMenu.js | 13 +------ .../DrawerPanel/DesignThemeStylesPreview.js | 15 +------ .../Drawer/DrawerPanel/DesignTypography.js | 39 +++++++++++++------ .../LivePreview/GlobalStylesProvider/index.js | 39 ++++++++----------- .../pages/Steps/DesignColors/index.js | 22 ++++------- .../pages/Steps/DesignHomepageMenu/index.js | 13 +------ .../Steps/DesignThemeStyles/Menu/index.js | 15 +------ .../Steps/DesignThemeStyles/Preview/index.js | 13 +------ .../pages/Steps/DesignTypography/index.js | 20 +++------- .../pages/Steps/SitePages/index.js | 13 +------ 11 files changed, 92 insertions(+), 149 deletions(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js index c311759ff..c8cdbc3f9 100644 --- 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_FAILURE, +} from '../../../../constants'; const DesignColors = () => { const [ isLoaded, setIsLoaded ] = useState( false ); @@ -19,17 +23,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 ) { @@ -187,6 +198,9 @@ const DesignColors = () => { const getColorStylesAndPatterns = async () => { const colorPalettes = await getThemeColors(); + if ( colorPalettes?.error ) { + return updateThemeStatus( THEME_STATUS_FAILURE ); + } setColorPalettes( colorPalettes?.body ); let selectedColors; let selectedColorsLocal; @@ -214,8 +228,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 index b0fd6caa8..3b60159bf 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js @@ -9,7 +9,6 @@ import { GlobalStylesProvider } from '../../../components/LivePreview'; import { THEME_STATUS_ACTIVE, THEME_STATUS_FAILURE, - THEME_STATUS_NOT_ACTIVE, } from '../../../../constants'; const DesignHeaderMenu = () => { @@ -44,22 +43,12 @@ const DesignHeaderMenu = () => { const { setCurrentOnboardingData, updateThemeStatus, setHeaderMenuData } = useDispatch( nfdOnboardingStore ); - const handleAPIError = ( error ) => { - if ( error?.data?.status ) { - switch ( error.data.status ) { - case 404: - return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); - } - } - return updateThemeStatus( THEME_STATUS_FAILURE ); - }; - const getPatternsData = async () => { const headerMenuPreviewResponse = await getPatterns( currentStep.patternId ); if ( headerMenuPreviewResponse?.error ) { - return handleAPIError( headerMenuPreviewResponse.error ); + return updateThemeStatus( THEME_STATUS_FAILURE ); } setHeaderMenuPreviewData( headerMenuPreviewResponse.body ); diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js index 7e8133a0e..239fc7388 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js @@ -8,7 +8,6 @@ import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-s import { THEME_STATUS_ACTIVE, THEME_STATUS_FAILURE, - THEME_STATUS_NOT_ACTIVE, } from '../../../../constants'; import { LivePreviewSelectableCard, @@ -45,27 +44,17 @@ const DesignThemeStylesPreview = () => { updateThemeStatus, } = useDispatch( nfdOnboardingStore ); - const handleAPIError = ( error ) => { - if ( error?.data?.status ) { - switch ( error.data.status ) { - case 404: - return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); - } - } - return updateThemeStatus( THEME_STATUS_FAILURE ); - }; - const getStylesAndPatterns = async () => { const patternResponse = await getPatterns( currentStep.patternId, true ); if ( patternResponse?.error ) { - return handleAPIError( patternResponse.error ); + return updateThemeStatus( THEME_STATUS_FAILURE ); } const globalStylesResponse = await getGlobalStyles( true ); if ( globalStylesResponse?.error ) { - return handleAPIError( globalStylesResponse.error ); + return updateThemeStatus( THEME_STATUS_FAILURE ); } setPattern( patternResponse?.body ); setGlobalStyles( globalStylesResponse?.body ); diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js index 8d831f38c..98034460e 100644 --- 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_FAILURE, +} 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_FAILURE ); + } 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/LivePreview/GlobalStylesProvider/index.js b/src/OnboardingSPA/components/LivePreview/GlobalStylesProvider/index.js index 321cd1668..3830e409a 100644 --- a/src/OnboardingSPA/components/LivePreview/GlobalStylesProvider/index.js +++ b/src/OnboardingSPA/components/LivePreview/GlobalStylesProvider/index.js @@ -5,8 +5,8 @@ import { store as nfdOnboardingStore } from '../../../store'; import { getGlobalStyles, setGlobalStyles } from '../../../utils/api/themes'; import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output'; import { + THEME_STATUS_ACTIVE, THEME_STATUS_FAILURE, - THEME_STATUS_NOT_ACTIVE, } from '../../../../constants'; /** @@ -20,32 +20,26 @@ import { const GlobalStylesProvider = ( { children } ) => { const [ isLoaded, setIsLoaded ] = useState( false ); - const { currentData, storedPreviewSettings } = useSelect( ( select ) => { - return { - currentData: - select( nfdOnboardingStore ).getCurrentOnboardingData(), - storedPreviewSettings: - select( nfdOnboardingStore ).getPreviewSettings(), - }; - }, [] ); + const { currentData, storedPreviewSettings, themeStatus } = useSelect( + ( select ) => { + return { + currentData: + select( nfdOnboardingStore ).getCurrentOnboardingData(), + storedPreviewSettings: + select( nfdOnboardingStore ).getPreviewSettings(), + themeStatus: select( nfdOnboardingStore ).getThemeStatus(), + }; + }, + [] + ); const { updateThemeStatus, updatePreviewSettings } = useDispatch( nfdOnboardingStore ); - const handleAPIError = ( error ) => { - if ( error?.data?.status ) { - switch ( error.data.status ) { - case 404: - return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); - } - } - return updateThemeStatus( THEME_STATUS_FAILURE ); - }; - const getStylesAndPatterns = async () => { const globalStyles = await getGlobalStyles(); if ( globalStyles?.error ) { - return handleAPIError( globalStyles.error ); + return updateThemeStatus( THEME_STATUS_FAILURE ); } let selectedGlobalStyle; if ( storedPreviewSettings?.title && storedPreviewSettings?.settings ) @@ -73,8 +67,9 @@ const GlobalStylesProvider = ( { children } ) => { }; useEffect( () => { - if ( ! isLoaded ) getStylesAndPatterns(); - }, [ isLoaded ] ); + if ( ! isLoaded && THEME_STATUS_ACTIVE === themeStatus ) + getStylesAndPatterns(); + }, [ isLoaded, themeStatus ] ); return children; }; diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/index.js b/src/OnboardingSPA/pages/Steps/DesignColors/index.js index b805b71fa..c60b0b5f4 100644 --- a/src/OnboardingSPA/pages/Steps/DesignColors/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignColors/index.js @@ -12,8 +12,8 @@ import { } from '../../../components/LivePreview'; import { SIDEBAR_LEARN_MORE, + THEME_STATUS_ACTIVE, THEME_STATUS_FAILURE, - THEME_STATUS_NOT_ACTIVE, VIEW_DESIGN_COLORS, } from '../../../../constants'; @@ -22,11 +22,12 @@ const StepDesignColors = () => { const [ isLoaded, setIsLoaded ] = useState( false ); const [ pattern, setPattern ] = useState(); - const { currentStep } = useSelect( ( select ) => { + const { currentStep, themeStatus } = useSelect( ( select ) => { return { currentStep: select( nfdOnboardingStore ).getStepFromPath( location.pathname ), + themeStatus: select( nfdOnboardingStore ).getThemeStatus(), }; }, [] ); @@ -38,28 +39,19 @@ const StepDesignColors = () => { setDrawerActiveView( VIEW_DESIGN_COLORS ); }, [] ); - const handleAPIError = ( error ) => { - if ( error?.data?.status ) { - switch ( error.data.status ) { - case 404: - return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); - } - } - return updateThemeStatus( THEME_STATUS_FAILURE ); - }; - const getStylesAndPatterns = async () => { const pattern = await getPatterns( currentStep.patternId, true ); if ( pattern?.error ) { - handleAPIError( pattern.error ); + return updateThemeStatus( THEME_STATUS_FAILURE ); } setPattern( pattern?.body ); setIsLoaded( true ); }; useEffect( () => { - if ( ! isLoaded ) getStylesAndPatterns(); - }, [ isLoaded ] ); + if ( ! isLoaded && THEME_STATUS_ACTIVE === themeStatus ) + getStylesAndPatterns(); + }, [ isLoaded, themeStatus ] ); return ( diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js index 0ad145545..fa1ebe985 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js @@ -10,7 +10,6 @@ import { THEME_STATUS_ACTIVE, THEME_STATUS_FAILURE, SIDEBAR_LEARN_MORE, - THEME_STATUS_NOT_ACTIVE, } from '../../../../constants'; import HeadingWithSubHeading from '../../../components/HeadingWithSubHeading'; import { DesignStateHandler } from '../../../components/StateHandlers'; @@ -101,20 +100,10 @@ const StepDesignHomepageMenu = () => { return makeHomepagePattern; } - const handleAPIError = ( error ) => { - if ( error?.data?.status ) { - switch ( error.data.status ) { - case 404: - return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); - } - } - return updateThemeStatus( THEME_STATUS_FAILURE ); - }; - async function getHomepagePatternsData() { const homepagePatternData = await getPatterns( currentStep.patternId ); if ( homepagePatternData?.error ) { - return handleAPIError( homepagePatternData.error ); + return updateThemeStatus( THEME_STATUS_FAILURE ); } setHomepagePattern( refactorPatterns( homepagePatternData ) ); diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js index 4771e027c..89fadac82 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js @@ -13,7 +13,6 @@ import { THEME_STATUS_ACTIVE, THEME_STATUS_FAILURE, SIDEBAR_LEARN_MORE, - THEME_STATUS_NOT_ACTIVE, } from '../../../../../constants'; import { DesignStateHandler } from '../../../../components/StateHandlers'; import { @@ -64,27 +63,17 @@ const StepDesignThemeStylesMenu = () => { setDrawerActiveView( VIEW_NAV_DESIGN ); }, [] ); - const handleAPIError = ( error ) => { - if ( error?.data?.status ) { - switch ( error.data.status ) { - case 404: - return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); - } - } - return updateThemeStatus( THEME_STATUS_FAILURE ); - }; - const getStylesAndPatterns = async () => { const patternsResponse = await getPatterns( currentStep.patternId, true ); if ( patternsResponse?.error ) { - return handleAPIError( patternsResponse.error ); + return updateThemeStatus( THEME_STATUS_FAILURE ); } const globalStylesResponse = await getGlobalStyles( true ); if ( globalStylesResponse?.error ) { - return handleAPIError( globalStylesResponse.error ); + return updateThemeStatus( THEME_STATUS_FAILURE ); } setPattern( patternsResponse?.body ); setGlobalStyles( globalStylesResponse?.body ); diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js index f869abceb..a4d5b7479 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js @@ -15,7 +15,6 @@ import { THEME_STATUS_ACTIVE, THEME_STATUS_FAILURE, SIDEBAR_LEARN_MORE, - THEME_STATUS_NOT_ACTIVE, } from '../../../../../constants'; import { store as nfdOnboardingStore } from '../../../../store'; import { getPatterns } from '../../../../utils/api/patterns'; @@ -65,23 +64,13 @@ const StepDesignThemeStylesPreview = () => { handleCheckbox( currentData.data.customDesign, false ); }, [] ); - const handleAPIError = ( error ) => { - if ( error?.data?.status ) { - switch ( error.data.status ) { - case 404: - return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); - } - } - return updateThemeStatus( THEME_STATUS_FAILURE ); - }; - const getStylesAndPatterns = async () => { const patternsResponse = await getPatterns( currentStep.patternId, true ); if ( patternsResponse?.error ) { - return handleAPIError( patternsResponse.error ); + return updateThemeStatus( THEME_STATUS_FAILURE ); } setPattern( patternsResponse?.body ); setIsLoaded( true ); diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js index 955dee99a..f06dc6a86 100644 --- a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js @@ -9,7 +9,7 @@ import { SIDEBAR_LEARN_MORE, THEME_STATUS_FAILURE, VIEW_DESIGN_TYPOGRAPHY, - THEME_STATUS_NOT_ACTIVE, + THEME_STATUS_ACTIVE, } from '../../../../constants'; import { DesignStateHandler } from '../../../components/StateHandlers'; import { @@ -22,11 +22,12 @@ const StepDesignTypography = () => { const [ pattern, setPattern ] = useState(); const [ isLoaded, setIsLoaded ] = useState( false ); - const { currentStep } = useSelect( ( select ) => { + const { currentStep, themeStatus } = useSelect( ( select ) => { return { currentStep: select( nfdOnboardingStore ).getStepFromPath( location.pathname ), + themeStatus: select( nfdOnboardingStore ).getThemeStatus(), }; }, [] ); @@ -38,30 +39,21 @@ const StepDesignTypography = () => { setDrawerActiveView( VIEW_DESIGN_TYPOGRAPHY ); }, [] ); - const handleAPIError = ( error ) => { - if ( error?.data?.status ) { - switch ( error.data.status ) { - case 404: - return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); - } - } - return updateThemeStatus( THEME_STATUS_FAILURE ); - }; - const getFontPatterns = async () => { const patternsResponse = await getPatterns( currentStep.patternId, true ); if ( patternsResponse?.error ) { - return handleAPIError( patternsResponse.error ); + return updateThemeStatus( THEME_STATUS_FAILURE ); } setPattern( patternsResponse?.body ); setIsLoaded( true ); }; useEffect( () => { - if ( ! isLoaded ) getFontPatterns(); + if ( ! isLoaded && THEME_STATUS_ACTIVE === themeStatus ) + getFontPatterns(); }, [ isLoaded ] ); return ( diff --git a/src/OnboardingSPA/pages/Steps/SitePages/index.js b/src/OnboardingSPA/pages/Steps/SitePages/index.js index 98534576e..5586fef5d 100644 --- a/src/OnboardingSPA/pages/Steps/SitePages/index.js +++ b/src/OnboardingSPA/pages/Steps/SitePages/index.js @@ -11,7 +11,6 @@ import { THEME_STATUS_FAILURE, SIDEBAR_LEARN_MORE, VIEW_NAV_DESIGN, - THEME_STATUS_NOT_ACTIVE, } from '../../../../constants'; import { DesignStateHandler } from '../../../components/StateHandlers'; import { @@ -52,20 +51,10 @@ const StepSitePages = () => { setDrawerActiveView( VIEW_NAV_DESIGN ); }, [] ); - const handleAPIError = ( error ) => { - if ( error?.data?.status ) { - switch ( error.data.status ) { - case 404: - return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); - } - } - return updateThemeStatus( THEME_STATUS_FAILURE ); - }; - const getSitePages = async () => { const sitePagesResponse = await getPatterns( currentStep.patternId ); if ( sitePagesResponse?.error ) { - handleAPIError( sitePagesResponse.error ); + return updateThemeStatus( THEME_STATUS_FAILURE ); } if ( sitePagesResponse?.body ) { setSitePages( sitePagesResponse.body ); From 4a68d4e41a0528567b08c69ba87f7f392a8537b8 Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Tue, 24 Jan 2023 19:24:54 +0530 Subject: [PATCH 6/8] assume continue when modal is closed via the x icon or Esc button --- .../components/ExitToWordPress/index.js | 24 +++++-------------- .../components/StateHandlers/Design/index.js | 5 +--- 2 files changed, 7 insertions(+), 22 deletions(-) diff --git a/src/OnboardingSPA/components/ExitToWordPress/index.js b/src/OnboardingSPA/components/ExitToWordPress/index.js index 55a832b18..09285f463 100644 --- a/src/OnboardingSPA/components/ExitToWordPress/index.js +++ b/src/OnboardingSPA/components/ExitToWordPress/index.js @@ -27,24 +27,14 @@ const ExitToWordPress = ( { modalTitle = __( 'Exit without finishing?', 'wp-module-onboarding' ), modalText = false, modalPrimaryCloseButtonText = __( 'Continue', 'wp-module-onboarding' ), - modalPrimaryCloseButtonOnClick = false, - onRequestClose = false, + modalOnClose = false, modalExitButtonText = __( 'Exit', 'wp-module-onboarding' ), } ) => { const [ isOpen, setIsOpen ] = useState( isModalOpen ); const openModal = () => setIsOpen( true ); - const closeModal = ( context ) => { - switch ( context ) { - case 'on-request-close': - if ( typeof onRequestClose === 'function' ) { - onRequestClose(); - } - break; - case 'primary-close-button': - if ( typeof modalPrimaryCloseButtonOnClick === 'function' ) { - modalPrimaryCloseButtonOnClick(); - } - break; + const closeModal = () => { + if ( typeof modalOnClose === 'function' ) { + modalOnClose(); } setIsOpen( false ); }; @@ -123,15 +113,13 @@ const ExitToWordPress = ( { { isOpen && ( closeModal( 'on-request-close' ) } + onRequestClose={ () => closeModal() } >

{ modalText }

diff --git a/src/OnboardingSPA/components/StateHandlers/Design/index.js b/src/OnboardingSPA/components/StateHandlers/Design/index.js index 0704b4859..95aafea9c 100644 --- a/src/OnboardingSPA/components/StateHandlers/Design/index.js +++ b/src/OnboardingSPA/components/StateHandlers/Design/index.js @@ -140,10 +140,7 @@ const DesignStateHandler = ( { 'Going through this setup will change your active theme, WordPress settings, add content – would you like to continue?', 'wp-module-onboarding' ) } - modalPrimaryCloseButtonOnClick={ installThemeManually } - onRequestClose={ () => - updateThemeStatus( THEME_STATUS_FAILURE ) - } + modalOnClose={ installThemeManually } modalExitButtonText={ __( 'Exit to WordPress', 'wp-module-onboarding' From 0adfcb6286cfb3e77b233cb3b053c7b57c02d019 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Sat, 28 Jan 2023 10:16:07 +0530 Subject: [PATCH 7/8] Added themeStatus to useEffect like other steps --- src/OnboardingSPA/pages/Steps/DesignTypography/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js index f06dc6a86..706834b0e 100644 --- a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js @@ -54,7 +54,7 @@ const StepDesignTypography = () => { useEffect( () => { if ( ! isLoaded && THEME_STATUS_ACTIVE === themeStatus ) getFontPatterns(); - }, [ isLoaded ] ); + }, [ isLoaded, themeStatus ] ); return ( From 7d1eff13428f5f61349d6971fb1384b8ec014d33 Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Tue, 7 Feb 2023 19:42:43 +0530 Subject: [PATCH 8/8] re-check active theme on API failure and throw a confirmation dialogue --- .../components/Drawer/DrawerPanel/DesignColors.js | 4 ++-- .../components/Drawer/DrawerPanel/DesignHeaderMenu.js | 4 ++-- .../Drawer/DrawerPanel/DesignThemeStylesPreview.js | 6 +++--- .../components/Drawer/DrawerPanel/DesignTypography.js | 4 ++-- .../components/LivePreview/GlobalStylesProvider/index.js | 4 ++-- src/OnboardingSPA/pages/Steps/DesignColors/index.js | 4 ++-- src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js | 4 ++-- .../pages/Steps/DesignThemeStyles/Menu/index.js | 6 +++--- .../pages/Steps/DesignThemeStyles/Preview/index.js | 4 ++-- src/OnboardingSPA/pages/Steps/DesignTypography/index.js | 4 ++-- src/OnboardingSPA/pages/Steps/SitePages/index.js | 4 ++-- 11 files changed, 24 insertions(+), 24 deletions(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js index 17290fc5b..85d9923b3 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js @@ -9,7 +9,7 @@ import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-s import { GlobalStylesProvider } from '../../LivePreview'; import { THEME_STATUS_ACTIVE, - THEME_STATUS_FAILURE, + THEME_STATUS_INIT, } from '../../../../constants'; import Animate from '../../Animate'; @@ -200,7 +200,7 @@ const DesignColors = () => { const getColorStylesAndPatterns = async () => { const colorPalettes = await getThemeColors(); if ( colorPalettes?.error ) { - return updateThemeStatus( THEME_STATUS_FAILURE ); + return updateThemeStatus( THEME_STATUS_INIT ); } setColorPalettes( colorPalettes?.body ); let selectedColors; diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js index 3b60159bf..718294429 100644 --- 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_FAILURE, + THEME_STATUS_INIT, } from '../../../../constants'; const DesignHeaderMenu = () => { @@ -48,7 +48,7 @@ const DesignHeaderMenu = () => { currentStep.patternId ); if ( headerMenuPreviewResponse?.error ) { - return updateThemeStatus( THEME_STATUS_FAILURE ); + 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 index 239fc7388..87290e71e 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js @@ -7,7 +7,7 @@ import { getGlobalStyles } from '../../../utils/api/themes'; import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output'; import { THEME_STATUS_ACTIVE, - THEME_STATUS_FAILURE, + THEME_STATUS_INIT, } from '../../../../constants'; import { LivePreviewSelectableCard, @@ -50,11 +50,11 @@ const DesignThemeStylesPreview = () => { true ); if ( patternResponse?.error ) { - return updateThemeStatus( THEME_STATUS_FAILURE ); + return updateThemeStatus( THEME_STATUS_INIT ); } const globalStylesResponse = await getGlobalStyles( true ); if ( globalStylesResponse?.error ) { - return updateThemeStatus( THEME_STATUS_FAILURE ); + return updateThemeStatus( THEME_STATUS_INIT ); } setPattern( patternResponse?.body ); setGlobalStyles( globalStylesResponse?.body ); diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js index 98034460e..fe1a1fad6 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js @@ -8,7 +8,7 @@ import { getGlobalStyles, getThemeFonts } from '../../../utils/api/themes'; import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output'; import { THEME_STATUS_ACTIVE, - THEME_STATUS_FAILURE, + THEME_STATUS_INIT, } from '../../../../constants'; const DesignTypography = () => { @@ -41,7 +41,7 @@ const DesignTypography = () => { const getFontStylesAndPatterns = async () => { const fontPalettes = await getThemeFonts(); if ( fontPalettes?.error ) { - return updateThemeStatus( THEME_STATUS_FAILURE ); + return updateThemeStatus( THEME_STATUS_INIT ); } setFontPalettes( fontPalettes?.body ); diff --git a/src/OnboardingSPA/components/LivePreview/GlobalStylesProvider/index.js b/src/OnboardingSPA/components/LivePreview/GlobalStylesProvider/index.js index 3830e409a..1bde8d637 100644 --- a/src/OnboardingSPA/components/LivePreview/GlobalStylesProvider/index.js +++ b/src/OnboardingSPA/components/LivePreview/GlobalStylesProvider/index.js @@ -6,7 +6,7 @@ import { getGlobalStyles, setGlobalStyles } from '../../../utils/api/themes'; import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output'; import { THEME_STATUS_ACTIVE, - THEME_STATUS_FAILURE, + THEME_STATUS_INIT, } from '../../../../constants'; /** @@ -39,7 +39,7 @@ const GlobalStylesProvider = ( { children } ) => { const getStylesAndPatterns = async () => { const globalStyles = await getGlobalStyles(); if ( globalStyles?.error ) { - return updateThemeStatus( THEME_STATUS_FAILURE ); + return updateThemeStatus( THEME_STATUS_INIT ); } let selectedGlobalStyle; if ( storedPreviewSettings?.title && storedPreviewSettings?.settings ) diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/index.js b/src/OnboardingSPA/pages/Steps/DesignColors/index.js index c60b0b5f4..8ec7c6760 100644 --- a/src/OnboardingSPA/pages/Steps/DesignColors/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignColors/index.js @@ -13,7 +13,7 @@ import { import { SIDEBAR_LEARN_MORE, THEME_STATUS_ACTIVE, - THEME_STATUS_FAILURE, + THEME_STATUS_INIT, VIEW_DESIGN_COLORS, } from '../../../../constants'; @@ -42,7 +42,7 @@ const StepDesignColors = () => { const getStylesAndPatterns = async () => { const pattern = await getPatterns( currentStep.patternId, true ); if ( pattern?.error ) { - return updateThemeStatus( THEME_STATUS_FAILURE ); + return updateThemeStatus( THEME_STATUS_INIT ); } setPattern( pattern?.body ); setIsLoaded( true ); diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js index fa1ebe985..1d8a9d1f1 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js @@ -8,7 +8,7 @@ import CommonLayout from '../../../components/Layouts/Common'; import { VIEW_NAV_DESIGN, THEME_STATUS_ACTIVE, - THEME_STATUS_FAILURE, + THEME_STATUS_INIT, SIDEBAR_LEARN_MORE, } from '../../../../constants'; import HeadingWithSubHeading from '../../../components/HeadingWithSubHeading'; @@ -103,7 +103,7 @@ const StepDesignHomepageMenu = () => { async function getHomepagePatternsData() { const homepagePatternData = await getPatterns( currentStep.patternId ); if ( homepagePatternData?.error ) { - return updateThemeStatus( THEME_STATUS_FAILURE ); + return updateThemeStatus( THEME_STATUS_INIT ); } setHomepagePattern( refactorPatterns( homepagePatternData ) ); diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js index 89fadac82..c7a09775b 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js @@ -11,7 +11,7 @@ import { getGlobalStyles } from '../../../../utils/api/themes'; import { VIEW_NAV_DESIGN, THEME_STATUS_ACTIVE, - THEME_STATUS_FAILURE, + THEME_STATUS_INIT, SIDEBAR_LEARN_MORE, } from '../../../../../constants'; import { DesignStateHandler } from '../../../../components/StateHandlers'; @@ -69,11 +69,11 @@ const StepDesignThemeStylesMenu = () => { true ); if ( patternsResponse?.error ) { - return updateThemeStatus( THEME_STATUS_FAILURE ); + return updateThemeStatus( THEME_STATUS_INIT ); } const globalStylesResponse = await getGlobalStyles( true ); if ( globalStylesResponse?.error ) { - return updateThemeStatus( THEME_STATUS_FAILURE ); + return updateThemeStatus( THEME_STATUS_INIT ); } setPattern( patternsResponse?.body ); setGlobalStyles( globalStylesResponse?.body ); diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js index a4d5b7479..0f05240d7 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js @@ -13,7 +13,7 @@ import CommonLayout from '../../../../components/Layouts/Common'; import { VIEW_DESIGN_THEME_STYLES_PREVIEW, THEME_STATUS_ACTIVE, - THEME_STATUS_FAILURE, + THEME_STATUS_INIT, SIDEBAR_LEARN_MORE, } from '../../../../../constants'; import { store as nfdOnboardingStore } from '../../../../store'; @@ -70,7 +70,7 @@ const StepDesignThemeStylesPreview = () => { true ); if ( patternsResponse?.error ) { - return updateThemeStatus( THEME_STATUS_FAILURE ); + return updateThemeStatus( THEME_STATUS_INIT ); } setPattern( patternsResponse?.body ); setIsLoaded( true ); diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js index 706834b0e..7e0c3cafe 100644 --- a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js @@ -7,7 +7,7 @@ import { store as nfdOnboardingStore } from '../../../store'; import CommonLayout from '../../../components/Layouts/Common'; import { SIDEBAR_LEARN_MORE, - THEME_STATUS_FAILURE, + THEME_STATUS_INIT, VIEW_DESIGN_TYPOGRAPHY, THEME_STATUS_ACTIVE, } from '../../../../constants'; @@ -45,7 +45,7 @@ const StepDesignTypography = () => { true ); if ( patternsResponse?.error ) { - return updateThemeStatus( THEME_STATUS_FAILURE ); + return updateThemeStatus( THEME_STATUS_INIT ); } setPattern( patternsResponse?.body ); setIsLoaded( true ); diff --git a/src/OnboardingSPA/pages/Steps/SitePages/index.js b/src/OnboardingSPA/pages/Steps/SitePages/index.js index 5586fef5d..cc7a4e907 100644 --- a/src/OnboardingSPA/pages/Steps/SitePages/index.js +++ b/src/OnboardingSPA/pages/Steps/SitePages/index.js @@ -8,7 +8,7 @@ import HeadingWithSubHeading from '../../../components/HeadingWithSubHeading'; import { getPatterns } from '../../../utils/api/patterns'; import { THEME_STATUS_ACTIVE, - THEME_STATUS_FAILURE, + THEME_STATUS_INIT, SIDEBAR_LEARN_MORE, VIEW_NAV_DESIGN, } from '../../../../constants'; @@ -54,7 +54,7 @@ const StepSitePages = () => { const getSitePages = async () => { const sitePagesResponse = await getPatterns( currentStep.patternId ); if ( sitePagesResponse?.error ) { - return updateThemeStatus( THEME_STATUS_FAILURE ); + return updateThemeStatus( THEME_STATUS_INIT ); } if ( sitePagesResponse?.body ) { setSitePages( sitePagesResponse.body );