From 179ef259b3d4facb5238366ddbb636aa4270715c Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Fri, 5 Jan 2024 15:41:01 +0530 Subject: [PATCH 1/5] Reintroduce exits into onboarding --- .../Drawer/DrawerPanel/NavPrimary.js | 6 ++++++ src/OnboardingSPA/components/Header/index.js | 18 ++++++++++++++++++ 2 files changed, 24 insertions(+) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPrimary.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPrimary.js index ad704082f..250061aa2 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPrimary.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPrimary.js @@ -5,6 +5,7 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { store as nfdOnboardingStore } from '../../../store'; import classNames from 'classnames'; +import ExitToWordPress from '../../ExitToWordPress'; import Animate from '../../Animate'; const NavPrimary = () => { @@ -18,6 +19,11 @@ const NavPrimary = () => { const { setDrawerActiveView } = useDispatch( nfdOnboardingStore ); return ( +
    { topSteps.map( ( step ) => { diff --git a/src/OnboardingSPA/components/Header/index.js b/src/OnboardingSPA/components/Header/index.js index 079332dfc..e3e9a056f 100644 --- a/src/OnboardingSPA/components/Header/index.js +++ b/src/OnboardingSPA/components/Header/index.js @@ -1,6 +1,10 @@ import { memo } from '@wordpress/element'; +import { useSelect } from '@wordpress/data'; +import { useLocation } from 'react-router-dom'; import HeaderEnd from './components/HeaderEnd'; +import ExitToWordPress from '../ExitToWordPress'; +import { store as nfdOnboardingStore } from '../../store'; /** * Interface header rendered into header render prop in . @@ -8,8 +12,22 @@ import HeaderEnd from './components/HeaderEnd'; * @return {WPComponent} Header */ const Header = () => { + const location = useLocation(); + + const { firstStep } = useSelect( ( select ) => { + return { + firstStep: select( nfdOnboardingStore ).getFirstStep(), + }; + }, [] ); + + const isGettingStarted = firstStep?.path === location?.pathname; return (
    +
    + { isGettingStarted ? ( + + ) : null } +
    { /* Centered Header Slot */ }
    From e130121a9395479a52d518f0fcb21afeac0a445f Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Fri, 5 Jan 2024 16:59:17 +0530 Subject: [PATCH 2/5] Option approach POC --- includes/Application.php | 6 +++ includes/Services/StatusService.php | 42 +++++++++++++++++++ .../components/ExitToWordPress/index.js | 2 - .../Loaders/Chapter/Interstitial/index.js | 2 - src/OnboardingSPA/steps/Complete/index.js | 25 ++++------- 5 files changed, 56 insertions(+), 21 deletions(-) create mode 100644 includes/Services/StatusService.php diff --git a/includes/Application.php b/includes/Application.php index d9b87ddec..be7186b9c 100644 --- a/includes/Application.php +++ b/includes/Application.php @@ -6,6 +6,8 @@ use NewfoldLabs\WP\Module\Onboarding\Services\PluginService; use NewfoldLabs\WP\ModuleLoader\Container; use NewfoldLabs\WP\Module\Onboarding\Data\Options; +use NewfoldLabs\WP\Module\Onboarding\Services\StatusService; + use function NewfoldLabs\WP\ModuleLoader\container; /** @@ -72,6 +74,10 @@ public function __construct( Container $container ) { new WP_Admin(); } + if ( Permissions::is_authorized_admin() ) { + StatusService::track(); + } + // Adds a transient to activate plugins in all scenarios. PluginService::configure_activation_transient(); diff --git a/includes/Services/StatusService.php b/includes/Services/StatusService.php new file mode 100644 index 000000000..4ae00740f --- /dev/null +++ b/includes/Services/StatusService.php @@ -0,0 +1,42 @@ + { const [ countdown, setCountdown ] = useState( 15 ); @@ -30,7 +29,6 @@ const ChapterInterstitialLoader = () => { if ( currentData ) { currentData.isComplete = new Date().getTime(); setFlow( currentData ); - setComingSoon( currentData?.data?.comingSoon ); } activateInitialPlugins(); diff --git a/src/OnboardingSPA/steps/Complete/index.js b/src/OnboardingSPA/steps/Complete/index.js index bd0489fad..51f964852 100644 --- a/src/OnboardingSPA/steps/Complete/index.js +++ b/src/OnboardingSPA/steps/Complete/index.js @@ -9,7 +9,6 @@ import { StepLoader } from '../../components/Loaders'; import { StepErrorState } from '../../components/ErrorState'; import { THEME_STATUS_INIT } from '../../../constants'; import { DesignStateHandler } from '../../components/StateHandlers'; -import { setComingSoon } from '../../utils/api/comingSoon'; const StepComplete = () => { const { @@ -23,26 +22,18 @@ const StepComplete = () => { const navigate = useNavigate(); const [ isError, setIsError ] = useState( false ); - const { nextStep, brandName, isQueueEmpty, currentData } = useSelect( - ( select ) => { - return { - nextStep: select( nfdOnboardingStore ).getNextStep(), - brandName: select( nfdOnboardingStore ).getNewfoldBrandName(), - isQueueEmpty: select( nfdOnboardingStore ).isQueueEmpty(), - currentData: - select( nfdOnboardingStore ).getCurrentOnboardingData(), - }; - }, - [] - ); + const { nextStep, brandName, isQueueEmpty } = useSelect( ( select ) => { + return { + nextStep: select( nfdOnboardingStore ).getNextStep(), + brandName: select( nfdOnboardingStore ).getNewfoldBrandName(), + isQueueEmpty: select( nfdOnboardingStore ).isQueueEmpty(), + }; + }, [] ); const contents = getContents( brandName ); const checkFlowComplete = async () => { - await Promise.all( [ - completeFlowRequest(), - setComingSoon( currentData?.data?.comingSoon ), - ] ).then( ( values ) => + await Promise.all( [ completeFlowRequest() ] ).then( ( values ) => values.forEach( ( value ) => { // If any Request returns False then Show Error if ( ! value ) { From 07d37cd02dc86fc6e4cd8b1d72a53cb98680a87c Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Wed, 10 Jan 2024 12:40:52 +0530 Subject: [PATCH 3/5] Use the new coming soon API's --- includes/RestApi/SettingsController.php | 43 ------------------- includes/Services/StatusService.php | 38 ++++++++++++---- .../components/ExitToWordPress/index.js | 3 ++ .../Loaders/Chapter/Interstitial/index.js | 3 ++ src/OnboardingSPA/steps/Complete/index.js | 22 +++++++--- src/OnboardingSPA/utils/api/comingSoon.js | 16 ------- 6 files changed, 50 insertions(+), 75 deletions(-) delete mode 100644 src/OnboardingSPA/utils/api/comingSoon.js diff --git a/includes/RestApi/SettingsController.php b/includes/RestApi/SettingsController.php index 8725d0bc8..dcdb2ecdb 100644 --- a/includes/RestApi/SettingsController.php +++ b/includes/RestApi/SettingsController.php @@ -112,49 +112,6 @@ public function register_routes() { ), ) ); - - \register_rest_route( - $this->namespace, - $this->rest_base . '/coming-soon', - array( - array( - 'methods' => \WP_REST_Server::CREATABLE, - 'callback' => array( $this, 'set_coming_soon' ), - 'permission_callback' => array( Permissions::class, 'rest_is_authorized_admin' ), - 'args' => $this->set_coming_soon_params(), - ), - ) - ); - } - - /** - * Set query params for coming soon route. - * - * @return array - */ - public function set_coming_soon_params() { - return array( - 'comingSoon' => array( - 'type' => 'boolean', - 'required' => true, - ), - ); - } - /** - * Endpoint to set Coming Soon for a website. - * - * @param \WP_REST_Request $request Request model. - * - * @return \WP_REST_Response|\WP_Error - */ - public function set_coming_soon( \WP_REST_Request $request ) { - - $new_value = ( $request->get_param( 'comingSoon' ) ) ? 'true' : 'false'; - update_option( 'nfd_coming_soon', $new_value ); - return new \WP_REST_Response( - array(), - 200 - ); } /** diff --git a/includes/Services/StatusService.php b/includes/Services/StatusService.php index 4ae00740f..e88a6675f 100644 --- a/includes/Services/StatusService.php +++ b/includes/Services/StatusService.php @@ -9,6 +9,30 @@ */ class StatusService { + /** + * Handle Onboarding started event. + * + * @return void + */ + private static function handle_started() { + if ( 'started' !== get_option( Options::get_option_name( 'status' ) ) ) { + update_option( Options::get_option_name( 'status' ), 'started' ); + do_action( 'newfold/onboarding/started' ); + } + } + + /** + * Handles Onboarding completed event. + * + * @return void + */ + private static function handle_completed() { + if ( 'started' === get_option( Options::get_option_name( 'status' ) ) ) { + update_option( Options::get_option_name( 'status' ), 'completed' ); + do_action( 'newfold/onboarding/completed' ); + } + } + /** * Begin tracking the Onboarding status in an option. * @@ -24,19 +48,15 @@ public static function track() { switch ( $pagenow ) { case 'index.php': // If the page is nfd-onboarding + //phpcs:ignore if ( isset( $_GET['page'] ) && WP_Admin::$slug === \sanitize_text_field( $_GET['page'] ) ) { - if ( 'started' !== get_option( Options::get_option_name( 'status' ) ) ) { - update_option( Options::get_option_name( 'status' ), 'started' ); - do_action( 'newfold/onboarding/started' ); - } + self::handle_started(); + } else { + self::handle_completed(); } break; default: - if ( 'started' === get_option( Options::get_option_name( 'status' ) ) ) { - update_option( Options::get_option_name( 'status' ), 'completed' ); - do_action( 'newfold/onboarding/completed' ); - } - break; + self::handle_completed(); } } } diff --git a/src/OnboardingSPA/components/ExitToWordPress/index.js b/src/OnboardingSPA/components/ExitToWordPress/index.js index 4b36f6d6b..9f07cfdfb 100644 --- a/src/OnboardingSPA/components/ExitToWordPress/index.js +++ b/src/OnboardingSPA/components/ExitToWordPress/index.js @@ -101,6 +101,9 @@ const ExitToWordPress = ( { } } setFlow( currentData ); + if ( true === currentData?.data?.comingSoon ) { + await window.NewfoldRuntime.comingSoon.enable(); + } } activateInitialPlugins(); trackOnboardingEvent( diff --git a/src/OnboardingSPA/components/Loaders/Chapter/Interstitial/index.js b/src/OnboardingSPA/components/Loaders/Chapter/Interstitial/index.js index d59bc65bf..95882c00a 100644 --- a/src/OnboardingSPA/components/Loaders/Chapter/Interstitial/index.js +++ b/src/OnboardingSPA/components/Loaders/Chapter/Interstitial/index.js @@ -29,6 +29,9 @@ const ChapterInterstitialLoader = () => { if ( currentData ) { currentData.isComplete = new Date().getTime(); setFlow( currentData ); + if ( true === currentData?.data?.comingSoon ) { + window.NewfoldRuntime.comingSoon.enable(); + } } activateInitialPlugins(); diff --git a/src/OnboardingSPA/steps/Complete/index.js b/src/OnboardingSPA/steps/Complete/index.js index 51f964852..01c6d6915 100644 --- a/src/OnboardingSPA/steps/Complete/index.js +++ b/src/OnboardingSPA/steps/Complete/index.js @@ -22,17 +22,25 @@ const StepComplete = () => { const navigate = useNavigate(); const [ isError, setIsError ] = useState( false ); - const { nextStep, brandName, isQueueEmpty } = useSelect( ( select ) => { - return { - nextStep: select( nfdOnboardingStore ).getNextStep(), - brandName: select( nfdOnboardingStore ).getNewfoldBrandName(), - isQueueEmpty: select( nfdOnboardingStore ).isQueueEmpty(), - }; - }, [] ); + const { nextStep, brandName, isQueueEmpty, currentData } = useSelect( + ( select ) => { + return { + nextStep: select( nfdOnboardingStore ).getNextStep(), + brandName: select( nfdOnboardingStore ).getNewfoldBrandName(), + isQueueEmpty: select( nfdOnboardingStore ).isQueueEmpty(), + currentData: + select( nfdOnboardingStore ).getCurrentOnboardingData(), + }; + }, + [] + ); const contents = getContents( brandName ); const checkFlowComplete = async () => { + if ( true === currentData?.data?.comingSoon ) { + await window.NewfoldRuntime.comingSoon.enable(); + } await Promise.all( [ completeFlowRequest() ] ).then( ( values ) => values.forEach( ( value ) => { // If any Request returns False then Show Error diff --git a/src/OnboardingSPA/utils/api/comingSoon.js b/src/OnboardingSPA/utils/api/comingSoon.js deleted file mode 100644 index 4c1d13b73..000000000 --- a/src/OnboardingSPA/utils/api/comingSoon.js +++ /dev/null @@ -1,16 +0,0 @@ -import { onboardingRestURL } from './common'; -import { resolve } from './resolve'; - -import apiFetch from '@wordpress/api-fetch'; - -export async function setComingSoon( comingSoon ) { - return await resolve( - apiFetch( { - url: onboardingRestURL( 'settings/coming-soon' ), - method: 'POST', - data: { - comingSoon, - }, - } ).then() - ); -} From dae25c1b1a0c9595f9549a26407c505fe5245c9d Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Thu, 11 Jan 2024 13:38:23 +0530 Subject: [PATCH 4/5] Move marking started to REST API, as it is more reliable --- includes/RestApi/FlowController.php | 3 +++ includes/Services/StatusService.php | 10 ++++------ 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/includes/RestApi/FlowController.php b/includes/RestApi/FlowController.php index f64209330..6d8316bdf 100644 --- a/includes/RestApi/FlowController.php +++ b/includes/RestApi/FlowController.php @@ -5,6 +5,7 @@ use NewfoldLabs\WP\Module\Onboarding\Permissions; use NewfoldLabs\WP\Module\Onboarding\Data\Services\FlowService; use NewfoldLabs\WP\Module\Onboarding\Services\PluginService; +use NewfoldLabs\WP\Module\Onboarding\Services\StatusService; /** * Class FlowController @@ -110,7 +111,9 @@ public function get() { public function save_onboarding_flow_data( \WP_REST_Request $request ) { $params = json_decode( $request->get_body(), true ); + // Mark Onboarding as started only on the first REST API request from the React App. update_option( Options::get_option_name( 'redirect' ), '0' ); + StatusService::handle_started(); $flow_data = FlowService::update_data( $params ); if ( is_wp_error( $flow_data ) ) { diff --git a/includes/Services/StatusService.php b/includes/Services/StatusService.php index e88a6675f..59cd343ab 100644 --- a/includes/Services/StatusService.php +++ b/includes/Services/StatusService.php @@ -14,7 +14,7 @@ class StatusService { * * @return void */ - private static function handle_started() { + public static function handle_started() { if ( 'started' !== get_option( Options::get_option_name( 'status' ) ) ) { update_option( Options::get_option_name( 'status' ), 'started' ); do_action( 'newfold/onboarding/started' ); @@ -26,7 +26,7 @@ private static function handle_started() { * * @return void */ - private static function handle_completed() { + public static function handle_completed() { if ( 'started' === get_option( Options::get_option_name( 'status' ) ) ) { update_option( Options::get_option_name( 'status' ), 'completed' ); do_action( 'newfold/onboarding/completed' ); @@ -47,11 +47,9 @@ public static function track() { switch ( $pagenow ) { case 'index.php': - // If the page is nfd-onboarding + // If the page is not nfd-onboarding. //phpcs:ignore - if ( isset( $_GET['page'] ) && WP_Admin::$slug === \sanitize_text_field( $_GET['page'] ) ) { - self::handle_started(); - } else { + if ( ! isset( $_GET['page'] ) || WP_Admin::$slug !== \sanitize_text_field( $_GET['page'] ) ) { self::handle_completed(); } break; From 712c3ed62cc876d4ed388901ff0f7bec7b59e298 Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Thu, 11 Jan 2024 15:10:42 +0530 Subject: [PATCH 5/5] Add a check for comingSoon in NewfoldRuntime --- src/OnboardingSPA/components/ExitToWordPress/index.js | 5 ++++- .../components/Loaders/Chapter/Interstitial/index.js | 5 ++++- src/OnboardingSPA/steps/Complete/index.js | 5 ++++- 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/OnboardingSPA/components/ExitToWordPress/index.js b/src/OnboardingSPA/components/ExitToWordPress/index.js index 9f07cfdfb..3ee5f6ef7 100644 --- a/src/OnboardingSPA/components/ExitToWordPress/index.js +++ b/src/OnboardingSPA/components/ExitToWordPress/index.js @@ -101,7 +101,10 @@ const ExitToWordPress = ( { } } setFlow( currentData ); - if ( true === currentData?.data?.comingSoon ) { + if ( + true === currentData?.data?.comingSoon && + window.NewfoldRuntime?.comingSoon + ) { await window.NewfoldRuntime.comingSoon.enable(); } } diff --git a/src/OnboardingSPA/components/Loaders/Chapter/Interstitial/index.js b/src/OnboardingSPA/components/Loaders/Chapter/Interstitial/index.js index 95882c00a..b9c0d640e 100644 --- a/src/OnboardingSPA/components/Loaders/Chapter/Interstitial/index.js +++ b/src/OnboardingSPA/components/Loaders/Chapter/Interstitial/index.js @@ -29,7 +29,10 @@ const ChapterInterstitialLoader = () => { if ( currentData ) { currentData.isComplete = new Date().getTime(); setFlow( currentData ); - if ( true === currentData?.data?.comingSoon ) { + if ( + true === currentData?.data?.comingSoon && + window.NewfoldRuntime?.comingSoon + ) { window.NewfoldRuntime.comingSoon.enable(); } } diff --git a/src/OnboardingSPA/steps/Complete/index.js b/src/OnboardingSPA/steps/Complete/index.js index 01c6d6915..a3eb4fe5f 100644 --- a/src/OnboardingSPA/steps/Complete/index.js +++ b/src/OnboardingSPA/steps/Complete/index.js @@ -38,7 +38,10 @@ const StepComplete = () => { const contents = getContents( brandName ); const checkFlowComplete = async () => { - if ( true === currentData?.data?.comingSoon ) { + if ( + true === currentData?.data?.comingSoon && + window.NewfoldRuntime?.comingSoon + ) { await window.NewfoldRuntime.comingSoon.enable(); } await Promise.all( [ completeFlowRequest() ] ).then( ( values ) =>