Merge pull request #397 from newfold-labs/enhance/analysis-score-js

Input Score Analyser
newfold-labs · Jan 9, 2024 · 731d752 · 731d752
2 parents c4f6307 + ee14d50
commit 731d752
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 33 deletions.
diff --git a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js
@@ -6,28 +6,46 @@ const TextInputSiteGen = ( {
 	height,
 	placeholder,
 	customerInput,
+	setIsValidInput,
 	setCustomerInput,
 } ) => {
 	const textareaRef = useRef( null );
+	const [ analysisScore, setAnalysisScore ] = useState( 0 );
 	const [ inputText, setInputText ] = useState( 'nfd-sg-input-box__field' );
 
 	useEffect( () => {
 		textareaRef.current.style.height = height;
 		const scrollHeight = textareaRef.current.scrollHeight;
 		textareaRef.current.style.height = scrollHeight + 'px';
+		const analysisResult = calculateAnalysisScore( customerInput );
+		setAnalysisScore( analysisResult );
+		setIsValidInput( analysisResult >= 2 );
 	}, [ customerInput ] );
 
-	const calculateDetail = ( num ) => {
+	const calculateAnalysisScore = ( input ) => {
+		/* Number of Characters in the input
+		 * Count < 100 => 0
+		 * 100 < Count <= 150 => 1
+		 * 150 < Count <= 200 => 2
+		 * 200 < Count => 3
+		 */
+		const characterCount = input?.length;
+		let characterScore = 0;
+		if ( characterCount > 200 ) {
+			characterScore = 3;
+		} else if ( characterCount > 150 ) {
+			characterScore = 2;
+		} else if ( characterCount > 100 ) {
+			characterScore = 1;
+		}
+
+		return characterScore;
+	};
+
+	const addInputScoreSyling = ( num ) => {
 		const selectedButton = 'nfd-sg-input-box__info-icon--selected';
-		switch ( num ) {
-			case 1:
-				if ( customerInput?.length > 30 ) return selectedButton;
-				break;
-			case 2:
-				if ( customerInput?.length > 60 ) return selectedButton;
-				break;
-			case 3:
-				if ( customerInput?.length > 100 ) return selectedButton;
+		if ( num <= analysisScore ) {
+			return selectedButton;
 		}
 	};
 
@@ -37,6 +55,21 @@ const TextInputSiteGen = ( {
 		setInputText( 'nfd-sg-input-box__field' );
 	};
 
+	const renderDetails = () => {
+		const buttons = [];
+		for ( let i = 1; i <= 3; i++ ) {
+			buttons.push(
+				<div
+					className={ classNames(
+						'nfd-sg-input-box__info-icon',
+						addInputScoreSyling( i )
+					) }
+				/>
+			);
+		}
+		return buttons;
+	};
+
 	return (
 		<div className={ 'nfd-sg-input' }>
 			<label htmlFor={ inputText }>
@@ -56,24 +89,7 @@ const TextInputSiteGen = ( {
 						<div className={ 'nfd-sg-input-box__info-text' }>
 							Detail
 						</div>
-						<div
-							className={ classNames(
-								'nfd-sg-input-box__info-icon',
-								calculateDetail( 1 )
-							) }
-						/>
-						<div
-							className={ classNames(
-								'nfd-sg-input-box__info-icon',
-								calculateDetail( 2 )
-							) }
-						/>
-						<div
-							className={ classNames(
-								'nfd-sg-input-box__info-icon',
-								calculateDetail( 3 )
-							) }
-						/>
+						{ renderDetails() }
 					</div>
 				) : (
 					<p className={ 'nfd-sg-input-box__hint' }>{ hint }</p>

diff --git a/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js b/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js
@@ -15,6 +15,7 @@ const SiteGenSiteDetails = () => {
 	const content = getContents();
 	const isLargeViewport = useViewportMatch( 'small' );
 	const [ customerInput, setCustomerInput ] = useState();
+	const [ isValidInput, setIsValidInput ] = useState( false );
 
 	const { currentData } = useSelect( ( select ) => {
 		return {
@@ -45,7 +46,7 @@ const SiteGenSiteDetails = () => {
 	}, [] );
 
 	useEffect( () => {
-		setFooterNavEnabled( customerInput !== '' );
+		setFooterNavEnabled( isValidInput );
 		currentData.sitegen.siteDetails.prompt = customerInput;
 		setCurrentOnboardingData( currentData );
 	}, [ customerInput ] );
@@ -60,17 +61,15 @@ const SiteGenSiteDetails = () => {
 						hint={ content.inputHint }
 						height={ '40px' }
 						customerInput={ customerInput }
+						setIsValidInput={ setIsValidInput }
 						setCustomerInput={ setCustomerInput }
 					/>
 					{ isLargeViewport && (
 						<div className={ 'nfd-sg-site-details-endrow' }>
 							<NextButtonSiteGen
 								className={ 'nfd-sg-site-details--next-btn' }
 								text={ content.buttonText }
-								disabled={
-									customerInput === undefined ||
-									customerInput === ''
-								}
+								disabled={ ! isValidInput }
 							/>
 						</div>
 					) }