diff --git a/includes/Application.php b/includes/Application.php index 9a98be82c..9561cccea 100644 --- a/includes/Application.php +++ b/includes/Application.php @@ -55,7 +55,8 @@ public function __construct( Container $container ) { // Reset the stored Compatibility Status every time WP Core is updated. \add_action( '_core_updated_successfully', array( Status::class, 'reset' ) ); - \add_action( 'login_redirect', array( LoginRedirect::class, 'handle_redirect' ), 10, 3 ); + \add_filter( 'login_redirect', array( LoginRedirect::class, 'handle_redirect' ), 10 ); + \add_filter( 'newfold_sso_success_url', array( LoginRedirect::class, 'handle_redirect' ), 10 ); \add_filter( Options::get_option_name( 'redirect' ) . '_disable', array( LoginRedirect::class, 'remove_handle_redirect_action' ) diff --git a/includes/LoginRedirect.php b/includes/LoginRedirect.php index 65c18f3fa..624557518 100644 --- a/includes/LoginRedirect.php +++ b/includes/LoginRedirect.php @@ -12,75 +12,59 @@ class LoginRedirect { /** * Handles the redirect to onboarding * - * @param [type] $redirect The requested redirect URL. - * @param [type] $redirect_to The requested redirect URL via param. - * @param [type] $user The logged in user object. + * @param string $original_redirect The requested redirect URL * @return string */ - public static function handle_redirect( $redirect, $redirect_to, $user ) { + public static function handle_redirect( $original_redirect ) { + // Don't redirect if user is not an admin + if ( ! current_user_can( 'manage_options' ) ) { + return $original_redirect; + } + $redirect_option_name = Options::get_option_name( 'redirect' ); + // If request has ?nfd_module_onboarding_redirect=false then temporarily disable the redirect if ( isset( $_GET[ $redirect_option_name ] ) - && 'false' === $_GET[ $redirect_option_name ] ) { - self::disable_redirect(); + && 'false' === $_GET[ $redirect_option_name ] ) { + self::disable_redirect(); } - $flow_exited = false; - $flow_completed = false; - $flow_data = \get_option( Options::get_option_name( 'flow' ), false ); - if ( ! empty( $flow_data ) ) { - $flow_exited = ( ! empty( $flow_data['hasExited'] ) ); - $flow_completed = ( ! empty( $flow_data['isComplete'] ) ); + // Redirect was temporarily disabled via transient + if ( \get_transient( Options::get_option_name( 'redirect_param' ) ) === '1' ) { + return $original_redirect; } - if ( \get_transient( Options::get_option_name( 'redirect_param' ) ) === '1' - || $flow_exited - || $flow_completed - ) { - return $redirect; + // Don't redirect if coming soon is off. User has launched their site + if ( \get_option( Options::get_option_name( 'coming_soon', false ), 'true' ) !== 'true' ) { + return $original_redirect; } + // Don't redirect if they have intentionally exited or completed onboarding + $flow_data = \get_option( Options::get_option_name( 'flow' ), false ); + if ( data_get( $flow_data, 'hasExited' ) || data_get( $flow_data, 'isComplete' ) ) { + return $original_redirect; + } + + // Check for disabled redirect database option: nfd_module_onboarding_redirect $redirect_option = \get_option( $redirect_option_name, null ); + // If not set, then set it to true if ( empty( $redirect_option ) ) { $redirect_option = \update_option( $redirect_option_name, true ); } + if ( ! $redirect_option ) { + return $original_redirect; + } + + // If site was created more than 72 hours ago, don't redirect to onboarding $install_date = new DateTime( \get_option( Options::get_option_name( 'install_date', false ), gmdate( 'M d, Y' ) ) ); $current_date = new DateTime( gmdate( 'M d, Y' ) ); $interval = $current_date->diff( $install_date ); $interval_in_hours = ( $interval->days * 24 ) + $interval->h; - - if ( ! ( $redirect_option - && \get_option( Options::get_option_name( 'coming_soon', false ), 'true' ) === 'true' - && ( $interval_in_hours <= 72 ) ) ) { - return $redirect; - } - - if ( self::is_administrator( $user ) ) { - return \admin_url( '/index.php?page=nfd-onboarding' ); + if ( $interval_in_hours >= 72 ) { + return $original_redirect; } - return $redirect; - } - - /** - * Check if we have a valid user. - * - * @param \WP_User $user The WordPress user object. - * - * @return bool - */ - public static function is_user( $user ) { - return $user && is_object( $user ) && is_a( $user, 'WP_User' ); - } - - /** - * Check if a user is an administrator. - * - * @param \WP_User $user WordPress user. - * - * @return bool - */ - public static function is_administrator( $user ) { - return self::is_user( $user ) && $user->has_cap( Permissions::ADMIN ); + // Finally, if we made it this far, then set the redirect URL to point to onboarding + return \admin_url( '/index.php?page=nfd-onboarding' ); } /** @@ -89,7 +73,7 @@ public static function is_administrator( $user ) { * @return void */ public static function disable_redirect() { - \set_transient( Options::get_option_name( 'redirect_param' ), '1', 30 ); + \set_transient( Options::get_option_name( 'redirect_param' ), '1', 30 ); } /** @@ -98,7 +82,7 @@ public static function disable_redirect() { * @return void */ public static function enable_redirect() { - \set_transient( Options::get_option_name( 'redirect_param' ), '0', 30 ); + \set_transient( Options::get_option_name( 'redirect_param' ), '0', 30 ); } /** @@ -107,6 +91,6 @@ public static function enable_redirect() { * @return bool */ public static function remove_handle_redirect_action() { - return \remove_action( 'login_redirect', array( __CLASS__, 'handle_redirect' ) ); + return \remove_action( 'login_redirect', array( __CLASS__, 'handle_redirect' ) ); } } diff --git a/includes/ModuleController.php b/includes/ModuleController.php index 5ec609efd..8df4b8afc 100644 --- a/includes/ModuleController.php +++ b/includes/ModuleController.php @@ -41,9 +41,6 @@ public static function module_switcher() { // Check if the Module Does Exist if ( ModuleRegistry::get( $module_name ) ) { - // Disable the Redirect for Onboarding SPA - LoginRedirect::disable_redirect(); - // Deactivate the Module deactivate( $module_name ); } diff --git a/includes/RestApi/RestApi.php b/includes/RestApi/RestApi.php index 2b1c620e7..8c2fba99b 100644 --- a/includes/RestApi/RestApi.php +++ b/includes/RestApi/RestApi.php @@ -28,6 +28,7 @@ final class RestApi { 'NewfoldLabs\WP\\Module\\Onboarding\\RestApi\\Themes\\ThemeInstallerController', 'NewfoldLabs\WP\\Module\\Onboarding\\RestApi\\Themes\\ThemeFontsController', 'NewfoldLabs\WP\\Module\\Onboarding\\RestApi\\Themes\\ThemeColorsController', + 'NewfoldLabs\\WP\\Module\\Onboarding\\RestApi\\SiteClassificationController', ); /** diff --git a/includes/RestApi/SiteClassificationController.php b/includes/RestApi/SiteClassificationController.php new file mode 100644 index 000000000..863e764b3 --- /dev/null +++ b/includes/RestApi/SiteClassificationController.php @@ -0,0 +1,56 @@ +namespace, + $this->rest_base, + array( + 'methods' => \WP_REST_Server::READABLE, + 'callback' => array( $this, 'get' ), + 'permission_callback' => array( Permissions::class, 'rest_is_authorized_admin' ), + ) + ); + } + + /** + * Get site classification data. + * + * @return array + */ + public function get() { + if ( ! class_exists( 'NewfoldLabs\WP\Module\Data\SiteClassification' ) ) { + return array(); + } + $classification = new SiteClassification(); + return $classification->get(); + } +} diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js index 2db46bd5e..8f5813473 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js @@ -3,7 +3,7 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { useState, useEffect, useRef } from '@wordpress/element'; import { store as nfdOnboardingStore } from '../../../store'; -import { getGlobalStyles, getThemeFonts } from '../../../utils/api/themes'; +import { getThemeFonts } from '../../../utils/api/themes'; import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output'; import { THEME_STATUS_ACTIVE, THEME_STATUS_INIT } from '../../../../constants'; @@ -12,7 +12,6 @@ const DesignTypography = () => { const [ isLoaded, setIsLoaded ] = useState( false ); const [ selectedFont, setSelectedFont ] = useState(); const [ fontPalettes, setFontPalettes ] = useState(); - const [ isAccordionClosed, setIsAccordionClosed ] = useState( true ); const { storedPreviewSettings, currentData, themeStatus } = useSelect( ( select ) => { @@ -34,19 +33,12 @@ const DesignTypography = () => { } = useDispatch( nfdOnboardingStore ); const getFontStylesAndPatterns = async () => { - const fontPalettes = await getThemeFonts(); - if ( fontPalettes?.error ) { + const fonts = await getThemeFonts(); + if ( fonts?.error ) { return updateThemeStatus( THEME_STATUS_INIT ); } - setFontPalettes( fontPalettes?.body ); + setFontPalettes( fonts?.body ); - if ( currentData?.data?.typography?.slug !== '' ) { - handleClick( - currentData?.data?.typography?.slug, - storedPreviewSettings, - fontPalettes?.body - ); - } const stylesCustom = storedPreviewSettings?.settings?.styles[ 0 ]?.css; if ( stylesCustom ) { // Loads in all CSS variables related to fontFamily @@ -59,20 +51,27 @@ const DesignTypography = () => { setIsLoaded( true ); }; + useEffect( () => { + if ( + currentData?.data?.typography?.slug !== '' && + fontPalettes !== undefined + ) { + setSelectedFont( currentData?.data?.typography?.slug ); + handleClick( currentData?.data?.typography?.slug ); + } + }, [ fontPalettes, storedPreviewSettings ] ); + useEffect( () => { if ( ! isLoaded && THEME_STATUS_ACTIVE === themeStatus ) getFontStylesAndPatterns(); }, [ isLoaded, themeStatus ] ); - const handleClick = async ( - fontStyle, - selectedGlobalStyle = storedPreviewSettings, - fontPalettesCopy = fontPalettes - ) => { + const handleClick = async ( fontStyle ) => { setSelectedFont( fontStyle ); // Changes the Global Styles to Recompute css properties - const globalStylesCopy = selectedGlobalStyle; + const globalStylesCopy = storedPreviewSettings; + const fontPalettesCopy = fontPalettes; if ( globalStylesCopy?.styles?.typography?.fontFamily && @@ -118,45 +117,28 @@ const DesignTypography = () => { currentData.data.typography.data = fontPalettesCopy[ fontStyle ]; updatePreviewSettings( + // eslint-disable-next-line react-hooks/rules-of-hooks useGlobalStylesOutput( globalStylesCopy, storedPreviewSettings ) ); setCurrentOnboardingData( currentData ); }; - async function resetFonts() { - setSelectedFont( '' ); - const globalStyles = await getGlobalStyles(); - let selectedGlobalStyle; - if ( currentData?.data?.theme?.variation ) { - selectedGlobalStyle = globalStyles.body.filter( - ( globalStyle ) => - globalStyle.title === currentData.data.theme.variation - )[ 0 ]; - } else if ( globalStyles.body[ 0 ]?.id === 0 ) { - selectedGlobalStyle = globalStyles.body[ 0 ]; - } - updatePreviewSettings( - useGlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings ) - ); - - currentData.data.typography.slug = ''; - currentData.data.typography.data = []; - setCurrentOnboardingData( currentData ); - } - function buildPalettes() { - const paletteRenderedList = []; - for ( const fontStyle in fontPalettes ) { + return Object.keys( fontPalettes ).map( ( fontStyle, idx ) => { const splitLabel = fontPalettes[ fontStyle ]?.label.split( '&', 2 ); - if ( splitLabel.length === 0 ) continue; - paletteRenderedList.push( + if ( splitLabel.length === 0 ) return null; + return (
handleClick( fontStyle ) } + onClick={ () => handleClick( fontStyle ) } + onKeyDown={ () => handleClick( fontStyle ) } >
{
); - } - - return paletteRenderedList; - } - - function buildCustomPalette() { - return ( -
-
- setIsAccordionClosed( ! isAccordionClosed ) - } - > -
- SELECT CUSTOM FONTS -
- { isAccordionClosed && ( -
+
- ) } - { ! isAccordionClosed && ( -
-
- ) } -
-
- ); + } ); } return (

{ __( 'Font Palettes', 'wp-module-onboarding' ) }

- { /* { selectedFont && -
-
Reset Button
-
- } */ } { fontPalettes && buildPalettes() } - { /* { fontPalettes && buildCustomPalette() } */ }
); }; diff --git a/src/OnboardingSPA/components/HeadingWithSubHeading/index.js b/src/OnboardingSPA/components/HeadingWithSubHeading/index.js index 54e01bb5e..42330c799 100644 --- a/src/OnboardingSPA/components/HeadingWithSubHeading/index.js +++ b/src/OnboardingSPA/components/HeadingWithSubHeading/index.js @@ -1,22 +1,19 @@ -import { __ } from '@wordpress/i18n'; - /** * Interface Cards with standard design. * - * @returns + * @param {Object} root0 + * @param {string} root0.title + * @param {string} root0.subtitle + * @param {Object} root0.children */ -const HeadingWithSubHeading = ({ title, subtitle }) => { - +const HeadingWithSubHeading = ( { title, subtitle, children } ) => { return (
-

{__( - title, - "wp-module-onboarding" - )}

-

{__( - subtitle, - "wp-module-onboarding" - )}

+

{ title }

+ { subtitle && ( +

{ subtitle }

+ ) } + { children }
); }; diff --git a/src/OnboardingSPA/data/routes/default-flow.js b/src/OnboardingSPA/data/routes/default-flow.js index bfe85280a..14ae4dee8 100644 --- a/src/OnboardingSPA/data/routes/default-flow.js +++ b/src/OnboardingSPA/data/routes/default-flow.js @@ -1,5 +1,6 @@ import { __, sprintf } from '@wordpress/i18n'; import { lazy } from '@wordpress/element'; +// eslint-disable-next-line import/no-extraneous-dependencies import { filter, orderBy } from 'lodash'; import IndexPage from '../../pages/index'; import { translations } from '../../utils/locales/translations'; @@ -22,8 +23,6 @@ import { import { VIEW_DESIGN_COLORS, VIEW_DESIGN_HEADER_MENU, - VIEW_DESIGN_HOMEPAGE_MENU, - VIEW_DESIGN_THEME_STYLES_MENU, VIEW_DESIGN_THEME_STYLES_PREVIEW, VIEW_DESIGN_TYPOGRAPHY, VIEW_NAV_GET_STARTED, @@ -84,10 +83,6 @@ const StepBasicInfoLearnMoreSidebar = lazy( () => import( '../../pages/Steps/BasicInfo/Sidebar/LearnMore' ) ); -const StepDesignThemes = lazy( () => - import( '../../pages/Steps/DesignThemes' ) -); - const StepDesignThemeStylesMenu = lazy( () => import( '../../pages/Steps/DesignThemeStyles/Menu' ) ); @@ -194,8 +189,8 @@ export const steps = [ { path: '/wp-setup/step/get-started/welcome', title: __( 'Welcome', 'wp-module-onboarding' ), - /* translators: %s: website or store */ heading: sprintf( + /* translators: %s: website or store */ __( 'Make your %s dreams a reality!', 'wp-module-onboarding' ), translations( 'website' ) ), @@ -217,8 +212,8 @@ export const steps = [ { path: '/wp-setup/step/get-started/experience', title: __( 'WordPress Experience', 'wp-module-onboarding' ), - /* translators: %s: website or store */ heading: sprintf( + /* translators: %s: website or store */ __( 'Help us tailor this setup to your %s', 'wp-module-onboarding' @@ -245,26 +240,26 @@ export const steps = [ }, { path: '/wp-setup/step/get-started/site-primary', - /* translators: %s: website or store */ title: sprintf( + /* translators: %s: website or store */ __( 'Primary %s Setup', 'wp-module-onboarding' ), translations( 'Site' ) ), - /* translators: %s: website or store */ heading: sprintf( + /* translators: %s: website or store */ __( 'Help us tailor this setup to your %s', 'wp-module-onboarding' ), translations( 'site' ) ), - /* translators: %s: website or store */ subheading: sprintf( + /* translators: %s: website or store */ __( 'What type of %s is it?', 'wp-module-onboarding' ), translations( 'site' ) ), - /* translators: %s: website or store */ description: sprintf( + /* translators: %s: website or store */ __( "Setup more of your %s, show you around WordPress or share secrets to success -- we'll follow your lead on how you'd like to proceed.", 'wp-module-onboarding' @@ -284,26 +279,26 @@ export const steps = [ }, { path: '/wp-setup/step/get-started/site-secondary', - /* translators: %s: website or store */ title: sprintf( + /* translators: %s: website or store */ __( 'Secondary %s Setup', 'wp-module-onboarding' ), translations( 'Site' ) ), - /* translators: %s: website or store */ heading: sprintf( + /* translators: %s: website or store */ __( 'Help us tailor this setup to your %s', 'wp-module-onboarding' ), translations( 'site' ) ), - /* translators: %s: website or store */ subheading: sprintf( + /* translators: %s: website or store */ __( 'What type of %s is it?', 'wp-module-onboarding' ), translations( 'site' ) ), - /* translators: %s: website or store */ description: sprintf( + /* translators: %s: website or store */ __( "Setup more of your %s, show you around WordPress or share secrets to success -- we'll follow your lead on how you'd like to proceed.", 'wp-module-onboarding' @@ -340,8 +335,8 @@ export const steps = [ { path: '/wp-setup/step/basic-info', title: __( 'Basic Info', 'wp-module-onboarding' ), - /* translators: %s: website or store */ heading: sprintf( + /* translators: %s: website or store */ __( 'Introduce us to this %s', 'wp-module-onboarding' ), translations( 'website' ) ), @@ -349,8 +344,8 @@ export const steps = [ 'So we can introduce it to the web', 'wp-module-onboarding' ), - /* translators: %s: website or store */ description: sprintf( + /* translators: %s: website or store */ __( 'Help visitors, search results and social media identify your %s.', 'wp-module-onboarding' @@ -386,18 +381,6 @@ export const steps = [ { path: '/wp-setup/step/design/theme-styles/menu', title: __( 'Theme Styles', 'wp-module-onboarding' ), - heading: __( - 'Lets tailor your theme for the perfect fit', - 'wp-module-onboarding' - ), - subheading: __( - "Use these styles or bring your own. You're always free to remix them.", - 'wp-module-onboarding' - ), - description: __( - 'All these styles -- plus the ability to customize them -- are available in the WordPress Site Editor', - 'wp-module-onboarding' - ), Component: StepDesignThemeStylesMenu, Icon: styles, priority: 160, @@ -415,18 +398,6 @@ export const steps = [ { path: '/wp-setup/step/design/theme-styles/preview', title: __( 'Theme Styles', 'wp-module-onboarding' ), - heading: __( - 'Lets tailor your theme for the perfect fit', - 'wp-module-onboarding' - ), - subheading: __( - "Use these styles or bring your own. You're always free to remix them.", - 'wp-module-onboarding' - ), - description: __( - 'All these styles -- plus the ability to customize them -- are available in the WordPress Site Editor', - 'wp-module-onboarding' - ), Component: StepDesignThemeStylesPreview, Icon: styles, priority: 170, @@ -628,7 +599,7 @@ export const routes = [ ...pages, ...steps ]; /** * Filter-out the design steps and register a fake step in their place. * - * @return + * @return {Array} steps */ export const initialTopSteps = () => { const topSteps = filter( steps, ( step ) => { @@ -669,7 +640,7 @@ export const initialTopSteps = () => { /** * Filter out all non-design steps. * - * @return + * @return {Array} steps */ export const initialDesignSteps = () => { const designSteps = filter( steps, ( step ) => { diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js index 3b63da683..15fb19a3a 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js @@ -2,12 +2,14 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { useState, useEffect } from '@wordpress/element'; import { useNavigate, useLocation } from 'react-router-dom'; +import getContents from '../contents'; import { store as nfdOnboardingStore } from '../../../../store'; import CommonLayout from '../../../../components/Layouts/Common'; import HeadingWithSubHeading from '../../../../components/HeadingWithSubHeading'; import { useGlobalStylesOutput } from '../../../../utils/global-styles/use-global-styles-output'; import { getPatterns } from '../../../../utils/api/patterns'; import { getGlobalStyles } from '../../../../utils/api/themes'; +import { conditionalSteps } from '../../../../data/routes/'; import { VIEW_NAV_DESIGN, THEME_STATUS_ACTIVE, @@ -19,8 +21,10 @@ import { LivePreviewSelectableCard, LivePreviewSkeleton, } from '../../../../components/LivePreview'; +import { addColorAndTypographyRoutes } from '../utils'; const StepDesignThemeStylesMenu = () => { + const content = getContents(); const location = useLocation(); const [ pattern, setPattern ] = useState(); const [ globalStyles, setGlobalStyles ] = useState(); @@ -32,6 +36,9 @@ const StepDesignThemeStylesMenu = () => { nextStep, currentData, storedPreviewSettings, + routes, + allSteps, + designSteps, themeStatus, themeVariations, } = useSelect( ( select ) => { @@ -44,6 +51,9 @@ const StepDesignThemeStylesMenu = () => { select( nfdOnboardingStore ).getCurrentOnboardingData(), storedPreviewSettings: select( nfdOnboardingStore ).getPreviewSettings(), + routes: select( nfdOnboardingStore ).getRoutes(), + allSteps: select( nfdOnboardingStore ).getAllSteps(), + designSteps: select( nfdOnboardingStore ).getDesignSteps(), themeStatus: select( nfdOnboardingStore ).getThemeStatus(), themeVariations: select( nfdOnboardingStore ).getStepPreviewData(), }; @@ -55,6 +65,9 @@ const StepDesignThemeStylesMenu = () => { updatePreviewSettings, setCurrentOnboardingData, updateThemeStatus, + updateRoutes, + updateDesignSteps, + updateAllSteps, } = useDispatch( nfdOnboardingStore ); useEffect( () => { @@ -86,6 +99,7 @@ const StepDesignThemeStylesMenu = () => { const handleClick = ( idx ) => { const selectedGlobalStyle = globalStyles[ idx ]; updatePreviewSettings( + // eslint-disable-next-line react-hooks/rules-of-hooks useGlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings ) ); setSelectedStyle( selectedGlobalStyle.title ); @@ -94,6 +108,24 @@ const StepDesignThemeStylesMenu = () => { navigate( nextStep.path ); }; + const skiptoCustomPage = () => { + // Add Custom Steps into the Flow + const updates = addColorAndTypographyRoutes( + routes, + allSteps, + designSteps + ); + updateRoutes( updates.routes ); + updateDesignSteps( updates.designSteps ); + updateAllSteps( updates.allSteps ); + + currentData.data.customDesign = true; + setCurrentOnboardingData( currentData ); + + // Find the first Custom Conditional Step and navigate there + navigate( conditionalSteps.designColors.path ); + }; + const buildPreviews = () => { return globalStyles?.map( ( globalStyle, idx ) => { return ( @@ -116,10 +148,17 @@ const StepDesignThemeStylesMenu = () => {
- + +

+ { `${ content.subheading } ` } + +

+
{ + const content = getContents(); const location = useLocation(); const [ pattern, setPattern ] = useState(); const [ customize, setCustomize ] = useState( false ); @@ -76,77 +78,24 @@ const StepDesignThemeStylesPreview = () => { setPattern( patternsResponse?.body ); }; - const addColorAndTypographyRoutes = () => { - const updates = removeColorAndTypographyRoutes(); - const steps = [ - conditionalSteps.designColors, - conditionalSteps.designTypography, - ]; - return { - routes: orderBy( - updates.routes.concat( steps ), - [ 'priority' ], - [ 'asc' ] - ), - allSteps: orderBy( - updates.allSteps.concat( steps ), - [ 'priority' ], - [ 'asc' ] - ), - designSteps: orderBy( - updates.designSteps.concat( steps ), - [ 'priority' ], - [ 'asc' ] - ), - }; - }; - - const removeColorAndTypographyRoutes = () => { - return { - routes: filter( - routes, - ( route ) => - ! route.path.includes( - conditionalSteps.designColors.path - ) && - ! route.path.includes( - conditionalSteps.designTypography.path - ) - ), - allSteps: filter( - allSteps, - ( allStep ) => - ! allStep.path.includes( - conditionalSteps.designColors.path - ) && - ! allStep.path.includes( - conditionalSteps.designTypography.path - ) - ), - designSteps: filter( - designSteps, - ( designStep ) => - ! designStep.path.includes( - conditionalSteps.designColors.path - ) && - ! designStep.path.includes( - conditionalSteps.designTypography.path - ) - ), - }; - }; - const handleCheckbox = ( selected, updateOnboardingData = true, context = 'click' ) => { let updates; - if ( selected ) { - updates = addColorAndTypographyRoutes(); + updates = addColorAndTypographyRoutes( + routes, + allSteps, + designSteps + ); } else { - updates = removeColorAndTypographyRoutes(); + updates = removeColorAndTypographyRoutes( + routes, + allSteps, + designSteps + ); } updateRoutes( updates.routes ); @@ -177,15 +126,9 @@ const StepDesignThemeStylesPreview = () => { label={
- { __( - 'Customize Colors & Fonts?', - 'wp-module-onboarding' - ) } + { content.checkbox_label } - { __( - 'Check to customize in the next few steps (or leave empty and use the Site Editor later)', - 'wp-module-onboarding' - ) } + { content.checkbox_hint }
diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/contents.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/contents.js new file mode 100644 index 000000000..4371420db --- /dev/null +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/contents.js @@ -0,0 +1,25 @@ +import { __ } from '@wordpress/i18n'; + +const getContents = () => { + return { + heading: __( + 'Lets tailor your theme for the perfect fit', + 'wp-module-onboarding' + ), + subheading: __( + 'Start with a style preset or', + 'wp-module-onboarding' + ), + subheading_link: __( 'build a custom design.', 'wp-module-onboarding' ), + checkbox_label: __( + 'Customize Colors & Fonts?', + 'wp-module-onboarding' + ), + checkbox_hint: __( + 'Check to customize in the next few steps (or leave empty and use the Site Editor later)', + 'wp-module-onboarding' + ), + }; +}; + +export default getContents; diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/utils.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/utils.js new file mode 100644 index 000000000..0ae846c42 --- /dev/null +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/utils.js @@ -0,0 +1,69 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { orderBy, filter } from 'lodash'; +import { conditionalSteps } from '../../../data/routes/'; + +export const addColorAndTypographyRoutes = ( + routes, + allSteps, + designSteps +) => { + const updates = removeColorAndTypographyRoutes( + routes, + allSteps, + designSteps + ); + const steps = [ + conditionalSteps.designColors, + conditionalSteps.designTypography, + ]; + return { + routes: orderBy( + updates.routes.concat( steps ), + [ 'priority' ], + [ 'asc' ] + ), + allSteps: orderBy( + updates.allSteps.concat( steps ), + [ 'priority' ], + [ 'asc' ] + ), + designSteps: orderBy( + updates.designSteps.concat( steps ), + [ 'priority' ], + [ 'asc' ] + ), + }; +}; + +export const removeColorAndTypographyRoutes = ( + routes, + allSteps, + designSteps +) => { + return { + routes: filter( + routes, + ( route ) => + ! route.path.includes( conditionalSteps.designColors.path ) && + ! route.path.includes( conditionalSteps.designTypography.path ) + ), + allSteps: filter( + allSteps, + ( allStep ) => + ! allStep.path.includes( conditionalSteps.designColors.path ) && + ! allStep.path.includes( + conditionalSteps.designTypography.path + ) + ), + designSteps: filter( + designSteps, + ( designStep ) => + ! designStep.path.includes( + conditionalSteps.designColors.path + ) && + ! designStep.path.includes( + conditionalSteps.designTypography.path + ) + ), + }; +};