Adding simple customer promt screen

includes/RestApi/SiteGenController.php

@@ -4,6 +4,7 @@
 
 use NewfoldLabs\WP\Module\Onboarding\Permissions;
 use NewfoldLabs\WP\Module\Onboarding\Data\Services\SiteGenService;
+use NewfoldLabs\WP\Module\Onboarding\Data\SiteGenData;
 
 /**
  * Class SiteGenController
@@ -49,6 +50,15 @@ public function register_routes() {
 				'args'                => $this->sitegen_meta_args(),
 			)
 		);
+		\register_rest_route(
+			$this->namespace,
+			$this->rest_base . '/site-details-meta',
+			array(
+				'methods'             => \WP_REST_Server::READABLE,
+				'callback'            => array( $this, 'get_site_details_meta' ),
+				'permission_callback' => array( Permissions::class, 'rest_is_authorized_admin' ),
+			)
+		);
 	}
 
 	/**
@@ -105,4 +115,15 @@ public function generate_sitegen_meta( \WP_REST_Request $request ) {
 		// TODO Implement the main function and do computations if required.
 		return SiteGenService::instantiate_site_meta( $site_info, $identifier, $skip_cache );
 	}
+
+	/**
+	 * Generate Sitegen Site Details meta data.
+	 *
+	 * @param \WP_REST_Request $request Request model.
+	 *
+	 * @return array|WP_Error
+	 */
+	public function get_site_details_meta( \WP_REST_Request $request ) {
+		return SiteGenData::get_site_details_questionnaire();
+	}
 }

src/OnboardingSPA/components/TextInput/TextAreaSiteGenDetails/index.js

@@ -0,0 +1,31 @@
+import { useRef, memo } from '@wordpress/element';
+
+const TextAreaSiteGenDetails = ( {
+	labelText,
+	placeholder,
+	customerInput,
+	callback = null,
+} ) => {
+	const textareaRef = useRef( null );
+
+	return (
+		<div>
+			<label htmlFor={ labelText }>{ labelText }</label>
+			<div className="nfd-sg-simple-input">
+				<textarea
+					type="text"
+					ref={ textareaRef }
+					placeholder={ placeholder }
+					value={ customerInput }
+					onChange={ ( e ) => {
+						if ( callback && typeof callback === 'function' ) {
+							callback( e );
+						}
+					} }
+				/>
+			</div>
+		</div>
+	);
+};
+
+export default memo( TextAreaSiteGenDetails );

src/OnboardingSPA/components/TextInput/TextAreaSiteGenDetails/stylesheet.scss

@@ -0,0 +1,6 @@
+
+
+.nfd-sg-simple-input {
+	margin-top: 20px;
+
+}

src/OnboardingSPA/components/TextInput/TextInputSiteGenDetails/index.js

@@ -0,0 +1,28 @@
+import { memo } from '@wordpress/element';
+
+const TextInputSiteGenDetails = ( {
+	labelText,
+	placeholder,
+	customerInput,
+	callback = null,
+} ) => {
+	return (
+		<div>
+			<label htmlFor={ labelText }>{ labelText }</label>
+			<div className="nfd-sg-simple-input">
+				<input
+					type="text"
+					placeholder={ placeholder }
+					value={ customerInput }
+					onChange={ ( e ) => {
+						if ( callback && typeof callback === 'function' ) {
+							callback( e );
+						}
+					} }
+				/>
+			</div>
+		</div>
+	);
+};
+
+export default memo( TextInputSiteGenDetails );

src/OnboardingSPA/components/TextInput/TextInputSiteGenDetails/stylesheet.scss

@@ -0,0 +1,6 @@
+
+
+.nfd-sg-simple-input {
+	margin-top: 20px;
+
+}

src/OnboardingSPA/steps/SiteGen/SiteDetails/contents.js

@@ -12,6 +12,11 @@ const getContents = () => {
 		),
 		inputHint: __( 'The more detail the better', 'wp-module-onboarding' ),
 		buttonText: __( 'Next', 'wp-module-onboarding' ),
+		walkThroughText: __(
+			'Not sure what to say? We can walk you through it.',
+			'wp-module-onboarding'
+		),
+		walkThroughlink: __( 'click here', 'wp-module-onboarding' ),
 	};
 };
 

src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js

@@ -11,12 +11,16 @@
 import TextInputSiteGen from '../../../components/TextInput/TextInputSiteGen';
 import NextButtonSiteGen from '../../../components/Button/NextButtonSiteGen';
 
+import SiteGenSiteDetailsWalkthrough from '../SiteDetails/walkthrough';
+import { getSiteDetailsQuestionare } from '../../../utils/api/siteGen';
+
 const SiteGenSiteDetails = () => {
 	const content = getContents();
 	const isLargeViewport = useViewportMatch( 'small' );
 	const [ customerInput, setCustomerInput ] = useState();
 	const [ isValidInput, setIsValidInput ] = useState( false );
-
+	const [ isWalkthrough, setIsWalkthrough ] = useState( false );
+	const [ siteDetailsmeta, setSiteDetailsmeta ] = useState();
 	const { currentData } = useSelect( ( select ) => {
 		return {
 			currentData:
@@ -38,42 +42,89 @@
 		setSidebarActiveView( false );
 		setHeaderActiveView( HEADER_SITEGEN );
 		setDrawerActiveView( false );
-
+		setFooterNavEnabled( false );
 		if ( currentData.sitegen.siteDetails?.prompt !== '' ) {
-			return setCustomerInput( currentData.sitegen.siteDetails.prompt );
+			setCustomerInput( currentData.sitegen.siteDetails.prompt );
+			setFooterNavEnabled( isValidInput );
 		}
-		setFooterNavEnabled( false );
 	}, [] );
 
 	useEffect( () => {
-		setFooterNavEnabled( isValidInput );
-		currentData.sitegen.siteDetails.prompt = customerInput;
-		setCurrentOnboardingData( currentData );
+		if (
+			currentData.sitegen.siteDetails.prompt !== undefined &&
+			customerInput !== undefined &&
+			customerInput !== currentData.sitegen.siteDetails.prompt
+		) {
+			setFooterNavEnabled( isValidInput );
+			currentData.sitegen.siteDetails.prompt = customerInput;
+			currentData.sitegen.siteDetails.mode = 'simple';
+			setCurrentOnboardingData( currentData );
+		}
 	}, [ customerInput ] );
 
+	const handleClickWalkThrough = () => {
+		setIsWalkthrough( true );
+	};
+
+	useEffect( () => {
+		getSiteDetails();
+	}, [] );
+
+	async function getSiteDetails() {
+		try {
+			let siteDetailsmetas = await getSiteDetailsQuestionare();
+			siteDetailsmetas = siteDetailsmetas.body;
+			setSiteDetailsmeta( siteDetailsmetas );
+		} catch ( err ) {
+			// eslint-disable-next-line no-console
+			console.error( 'Error fetching data:', err );
+		}
+	}
+
 	return (
 		<CommonLayout isCentered>
 			<Animate type={ 'fade-in' }>
-				<div className={ 'nfd-sg-site-details' }>
-					<AIHeading title={ content.heading } />
-					<TextInputSiteGen
-						placeholder={ content.inputPlaceholder }
-						hint={ content.inputHint }
-						height={ '40px' }
-						customerInput={ customerInput }
-						setIsValidInput={ setIsValidInput }
-						setCustomerInput={ setCustomerInput }
+				{ isWalkthrough ? (
+					<SiteGenSiteDetailsWalkthrough
+						siteDetailsmeta={ siteDetailsmeta }
 					/>
-					{ isLargeViewport && (
-						<div className={ 'nfd-sg-site-details-endrow' }>
-							<NextButtonSiteGen
-								className={ 'nfd-sg-site-details--next-btn' }
-								text={ content.buttonText }
-								disabled={ ! isValidInput }
-							/>
+				) : (
+					<div className={ 'nfd-sg-site-details' }>
+						<AIHeading title={ content.heading } />
+						<TextInputSiteGen
+							placeholder={ content.inputPlaceholder }
+							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={ ! isValidInput }
+									/>
+								</div>
+							</>
+						) }
+						<div className={ 'nfd-sg-site-details-walkThrough' }>
+							{ content.walkThroughText }
+							<span
+								onClick={ handleClickWalkThrough }
+								onKeyDown={ handleClickWalkThrough }
+								role="button"
+								tabIndex="0"
+							>
+								{ content.walkThroughlink }
+							</span>
 						</div>
-					) }
-				</div>
+					</div>
+				) }
 			</Animate>
 		</CommonLayout>
 	);