Adding simple customer promt screen

includes/RestApi/SiteGenController.php

@@ -49,6 +49,15 @@ public function register_routes() {
 				'args'                => $this->sitegen_meta_args(),
 			)
 		);
+		\register_rest_route(
+			$this->namespace,
+			$this->rest_base . '/get-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' ),
+			)
+		);
 	}
 
 	/**
@@ -106,4 +115,36 @@ public function generate_sitegen_meta( \WP_REST_Request $request ) {
 			array( 'status' => 404 )
 		);
 	}
+
+	/**
+	 * 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 array(
+			'businessName'  => array(
+				'question' => "1. Do you have a business name or website title?",
+				'prompt'     => "My business name is",
+			),
+			'websiteType' => array(
+				"question" => "2. What type of website are you making?",
+				"placeholder" => "e.g. Graphic design portfolio",
+				"prompt" => "I am making a website type of",
+			),
+			'writeStyle' => array(
+				"question" => "3. Which writing style do you like better?",
+				"placeholder" => "e.g. Graphic design portfolio",
+				"prompt" => "I like the writing style",
+			),
+			'uniqueBusiness' => array(
+				"question" => "4. Is there anything unique about your business or brand?",
+				"placeholder" => "e.g. Unique product, amazing customer service, customizations, etc.",
+				"prompt" => "Unique about my business is",
+			),
+		);
+	}
 }

src/OnboardingSPA/components/Button/ButtonWhite/SiteGen/index.js

@@ -0,0 +1,16 @@
+import { Button } from '@wordpress/components';
+import classNames from 'classnames';
+
+const ButtonSiteGenPrompt = ( { className, value, text, onClick } ) => {
+	return (
+		<Button
+			className={ classNames( className ) }
+			value={ value }
+			onClick={ typeof onClick === 'function' && onClick }
+		>
+			{ text }
+		</Button>
+	);
+};
+
+export default ButtonSiteGenPrompt;

src/OnboardingSPA/components/TextInput/TextInputSiteGen/simple/index.js

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

src/OnboardingSPA/components/TextInput/TextInputSiteGen/simple/stylesheet.scss

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

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

@@ -12,6 +12,19 @@ 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' ),
+		writeStyleOption1: __(
+			'We craft awesome goodies!',
+			'wp-module-onboarding'
+		),
+		writeStyleOption2: __(
+			'We manufacture quality products',
+			'wp-module-onboarding'
+		),
 	};
 };
 

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

@@ -11,11 +11,15 @@
 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 [ isWalkthrough, setIsWalkthrough ] = useState( false );
+	const [ siteDetailsmeta, setSiteDetailsmeta ] = useState();
 	const { currentData } = useSelect( ( select ) => {
 		return {
 			currentData:
@@ -39,42 +43,83 @@
 		setDrawerActiveView( false );
 
 		if ( currentData.sitegen.siteDetails?.prompt !== '' ) {
-			return setCustomerInput( currentData.sitegen.siteDetails.prompt );
+			setCustomerInput( currentData.sitegen.siteDetails.prompt );
 		}
 		setFooterNavEnabled( false );
 	}, [] );
 
 	useEffect( () => {
 		setFooterNavEnabled( customerInput !== '' );
 		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 }
-						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={
-									customerInput === undefined ||
-									customerInput === ''
-								}
-							/>
+				) : (
+					<div className={ 'nfd-sg-site-details' }>
+						<AIHeading title={ content.heading } />
+						<TextInputSiteGen
+							placeholder={ content.inputPlaceholder }
+							hint={ content.inputHint }
+							height={ '40px' }
+							customerInput={ customerInput }
+							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 === ''
+										}
+									/>
+								</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>
 	);