Merge branch 'trunk' of https://github.com/newfold-labs/wp-module-onb…

…oarding into fix/error-state
newfold-labs · Apr 8, 2024 · 7db7e4b · 7db7e4b
2 parents b66c868 + 8f649e6
commit 7db7e4b
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 60 deletions.
diff --git a/src/OnboardingSPA/components/StateHandlers/Design/index.js b/src/OnboardingSPA/components/StateHandlers/Design/index.js
@@ -26,6 +26,7 @@ const DesignStateHandler = ( {
 	children,
 	navigationStateCallback = false,
 	refresh = true,
+	render = true,
 } ) => {
 	const isLargeViewport = useViewportMatch( 'medium' );
 
@@ -176,7 +177,7 @@ const DesignStateHandler = ( {
 		}
 	};
 
-	return <Fragment>{ handleRender() }</Fragment>;
+	return <Fragment>{ render ? handleRender() : children }</Fragment>;
 };
 
 export default DesignStateHandler;
diff --git a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/contents.js b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/contents.js
@@ -0,0 +1,13 @@
+import { __, sprintf } from '@wordpress/i18n';
+
+const getContents = ( characterCount ) => {
+	return {
+		characterCount: sprintf(
+			/* translators: 1: characterCount */
+			__( '%d Characters left', 'wp-module-onboarding' ),
+			characterCount
+		),
+	};
+};
+
+export default getContents;
diff --git a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js
@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import { __ } from '@wordpress/i18n';
 import { useRef, useEffect, useState, memo } from '@wordpress/element';
+import getContents from './contents';
 
 const TextInputSiteGen = ( {
 	hint,
@@ -16,6 +17,9 @@ const TextInputSiteGen = ( {
 	const textareaRef = useRef( null );
 	const [ analysisScore, setAnalysisScore ] = useState( 0 );
 	const [ inputText, setInputText ] = useState( 'nfd-sg-input-box__field' );
+	const [ remainingCharacterCount, setRemainingCharacterCount ] =
+		useState( 0 );
+	const content = getContents( remainingCharacterCount );
 
 	useEffect( () => {
 		textareaRef.current.style.height = height;
@@ -25,6 +29,9 @@ const TextInputSiteGen = ( {
 		setAnalysisScore( analysisResult );
 		setCustomerInputStrength( analysisResult );
 		setIsValidInput( analysisResult >= 2 );
+		setRemainingCharacterCount(
+			Math.max( 200 - ( customerInput?.length ?? 0 ), 0 )
+		);
 	}, [ customerInput ] );
 
 	const calculateAnalysisScore = ( input ) => {
@@ -90,6 +97,11 @@ const TextInputSiteGen = ( {
 						onChange={ ( e ) => onTextChange( e ) }
 					/>
 				</div>
+				{ remainingCharacterCount > 0 && (
+					<p className={ 'nfd-sg-input-box__count' }>
+						{ content.characterCount }
+					</p>
+				) }
 				<div className={ 'nfd-sg-input-box_bottom' }>
 					{ customerInput ? (
 						<div className={ 'nfd-sg-input-box__info' }>

diff --git a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss
@@ -33,6 +33,19 @@ $selected-detail: #1de082;
 			}
 		}
 
+		&__count {
+			margin: 3px;
+			text-align: end;
+			font-size: 0.87rem;
+			animation: fadeIn 100ms ease-in;
+			color: var(--nfd-onboarding-primary);
+
+			@media (prefers-reduced-motion) {
+				animation: none !important;
+			}
+		}
+
+
 		&__hint {
 			font-weight: 300;
 			font-size: 0.87rem;

diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/index.js b/src/OnboardingSPA/steps/SiteGen/Editor/index.js
@@ -4,14 +4,15 @@ import { useEffect, useState } from '@wordpress/element';
 
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as nfdOnboardingStore } from '../../../store';
-import { HEADER_SITEGEN } from '../../../../constants';
+import { HEADER_SITEGEN, THEME_STATUS_ACTIVE } from '../../../../constants';
 
 import { LivePreview } from '../../../components/LivePreview';
 import { getGlobalStyles } from '../../../utils/api/themes';
 
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { cloneDeep } from 'lodash';
 import { publishSitemapPages } from '../../../utils/api/siteGen';
+import { DesignStateHandler } from '../../../components/StateHandlers';
 
 const StepSiteGenEditor = () => {
 	const [ homepage, setHomepage ] = useState( false );
@@ -25,10 +26,11 @@ const StepSiteGenEditor = () => {
 		setIsHeaderNavigationEnabled,
 	} = useDispatch( nfdOnboardingStore );
 
-	const { currentData } = useSelect( ( select ) => {
+	const { currentData, themeStatus } = useSelect( ( select ) => {
 		return {
 			currentData:
 				select( nfdOnboardingStore ).getCurrentOnboardingData(),
+			themeStatus: select( nfdOnboardingStore ).getThemeStatus(),
 		};
 	} );
 
@@ -57,12 +59,14 @@ const StepSiteGenEditor = () => {
 	};
 
 	useEffect( () => {
-		setIsHeaderEnabled( true );
-		setHeaderActiveView( HEADER_SITEGEN );
-		setDrawerActiveView( false );
-		loadData();
-		handleSitemapPagesGeneration();
-	}, [] );
+		if ( THEME_STATUS_ACTIVE === themeStatus ) {
+			setIsHeaderEnabled( true );
+			setHeaderActiveView( HEADER_SITEGEN );
+			setDrawerActiveView( false );
+			loadData();
+			handleSitemapPagesGeneration();
+		}
+	}, [ themeStatus ] );
 
 	useEffect( () => {
 		if ( currentData?.sitegen?.homepages?.active ) {
@@ -117,15 +121,17 @@ const StepSiteGenEditor = () => {
 	};
 
 	return (
-		<CommonLayout
-			isCentered
-			className="nfd-onboarding-step--site-gen__editor"
-		>
-			<div className="nfd-onboarding-step--site-gen__editor__live-preview">
-				{ buildPreview() }
-			</div>
-			<div className="nfd-onboarding-screenshot-container"></div>
-		</CommonLayout>
+		<DesignStateHandler render={ false }>
+			<CommonLayout
+				isCentered
+				className="nfd-onboarding-step--site-gen__editor"
+			>
+				<div className="nfd-onboarding-step--site-gen__editor__live-preview">
+					{ buildPreview() }
+				</div>
+				<div className="nfd-onboarding-screenshot-container"></div>
+			</CommonLayout>
+		</DesignStateHandler>
 	);
 };
 

diff --git a/src/OnboardingSPA/steps/SiteGen/Preview/index.js b/src/OnboardingSPA/steps/SiteGen/Preview/index.js
@@ -22,7 +22,10 @@ import { SiteGenPreviewSelectableCard } from '../../../components/LivePreview';
 import HeartAnimation from './heartAnimation';
 import RegeneratingSiteCard from './regeneratingCard';
 import Animate from '../../../components/Animate';
-import { SiteGenStateHandler } from '../../../components/StateHandlers';
+import {
+	DesignStateHandler,
+	SiteGenStateHandler,
+} from '../../../components/StateHandlers';
 
 // Misc
 import {
@@ -33,7 +36,7 @@ import {
 } from '../../../utils/analytics/hiive/constants';
 import { SITEGEN_FLOW } from '../../../data/flows/constants';
 import { store as nfdOnboardingStore } from '../../../store';
-import { HEADER_SITEGEN } from '../../../../constants';
+import { HEADER_SITEGEN, THEME_STATUS_ACTIVE } from '../../../../constants';
 
 const SiteGenPreview = () => {
 	const [ homepages, setHomepages ] = useState( false );
@@ -44,17 +47,17 @@ const SiteGenPreview = () => {
 	const navigate = useNavigate();
 	const prevSiteGenErrorStatus = useRef();
 
-	const { currentData, nextStep, siteGenErrorStatus } = useSelect(
-		( select ) => {
+	const { currentData, nextStep, siteGenErrorStatus, themeStatus } =
+		useSelect( ( select ) => {
 			return {
 				currentData:
 					select( nfdOnboardingStore ).getCurrentOnboardingData(),
 				nextStep: select( nfdOnboardingStore ).getNextStep(),
 				siteGenErrorStatus:
 					select( nfdOnboardingStore ).getSiteGenErrorStatus(),
+				themeStatus: select( nfdOnboardingStore ).getThemeStatus(),
 			};
-		}
-	);
+		} );
 
 	const {
 		setIsHeaderEnabled,
@@ -144,9 +147,11 @@ const SiteGenPreview = () => {
 	};
 
 	useEffect( () => {
-		loadHomepages();
-		loadGlobalStyles();
-	}, [] );
+		if ( THEME_STATUS_ACTIVE === themeStatus ) {
+			loadHomepages();
+			loadGlobalStyles();
+		}
+	}, [ themeStatus ] );
 
 	const handlePreview = ( slug, position ) => {
 		if ( ! ( slug in homepages ) ) {
@@ -302,39 +307,41 @@ const SiteGenPreview = () => {
 	const content = getContents();
 
 	return (
-		<SiteGenStateHandler>
-			<CommonLayout className="nfd-onboarding-step--site-gen__preview">
-				<div className="nfd-onboarding-step--site-gen__preview__container">
-					{ ! isPreviewLoading && (
-						<Animate type={ 'fade-in' }>
-							<div className="nfd-onboarding-step--site-gen__preview__container__heading">
-								<p className="nfd-onboarding-step--site-gen__preview__container__heading__text">
-									{ content.heading }
-								</p>
-							</div>
-							<div className="nfd-onboarding-step--site-gen__preview__container__sub-heading">
-								<p className="nfd-onboarding-step--site-gen__preview__container__sub-heading__text">
-									{ content.subheading }
-								</p>
-							</div>
-						</Animate>
-					) }
-				</div>
-				<div className="nfd-onboarding-step--site-gen__preview__options">
-					{ buildPreviews() }
-					{ isRegenerating && (
-						<RegeneratingSiteCard
-							count={ 1 }
-							isRegenerating={ true }
-						/>
-					) }
-				</div>
-				<div className="nfd-onboarding-step--site-gen__preview__note">
-					<HeartAnimation />
-					<span>{ content.favouriteNote }</span>
-				</div>
-			</CommonLayout>
-		</SiteGenStateHandler>
+		<DesignStateHandler>
+			<SiteGenStateHandler>
+				<CommonLayout className="nfd-onboarding-step--site-gen__preview">
+					<div className="nfd-onboarding-step--site-gen__preview__container">
+						{ ! isPreviewLoading && (
+							<Animate type={ 'fade-in' }>
+								<div className="nfd-onboarding-step--site-gen__preview__container__heading">
+									<p className="nfd-onboarding-step--site-gen__preview__container__heading__text">
+										{ content.heading }
+									</p>
+								</div>
+								<div className="nfd-onboarding-step--site-gen__preview__container__sub-heading">
+									<p className="nfd-onboarding-step--site-gen__preview__container__sub-heading__text">
+										{ content.subheading }
+									</p>
+								</div>
+							</Animate>
+						) }
+					</div>
+					<div className="nfd-onboarding-step--site-gen__preview__options">
+						{ buildPreviews() }
+						{ isRegenerating && (
+							<RegeneratingSiteCard
+								count={ 1 }
+								isRegenerating={ true }
+							/>
+						) }
+					</div>
+					<div className="nfd-onboarding-step--site-gen__preview__note">
+						<HeartAnimation />
+						<span>{ content.favouriteNote }</span>
+					</div>
+				</CommonLayout>
+			</SiteGenStateHandler>
+		</DesignStateHandler>
 	);
 };