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,42 @@ 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  json_encode(
+			[
+				[
+					"question" => "1. Do you have a business name or website title?",
+					"field" => "businessName",
+					"prompt" => "My business name is ",
+				],
+				[
+					"question" => "2. What type of website are you making?",
+					"field" => "websiteType",
+					"placeholder" => "e.g. Graphic design portfolio",
+					"prompt" => "I am making a website type of ",
+				],
+				[
+					"question" => "3. Which writing style do you like better?",
+					"field" => "writeStyle",
+					"placeholder" => "e.g. Graphic design portfolio",
+					"prompt" => "I like the wirting style ",
+				],
+				[
+					"question" => "4. Is there anything unique about your business or brand?",
+					"field" => "uniqueBusiness",
+					"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 ButtonSiteGen = ( { className, value, text, onClick } ) => {
+	return (
+		<Button
+			className={ classNames( className ) }
+			value={ value }
+			onClick={ typeof onClick === 'function' && onClick }
+		>
+			{ text }
+		</Button>
+	);
+};
+
+export default ButtonSiteGen;

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

@@ -0,0 +1,47 @@
+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>
+			<br></br>
+			<br></br>
+			<div>
+				{ 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/steps/SiteGen/SiteDetails/contents.js

@@ -12,6 +12,18 @@ 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'
+		),
+		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,13 @@ import CommonLayout from '../../../components/Layouts/Common';
 import TextInputSiteGen from '../../../components/TextInput/TextInputSiteGen';
 import NextButtonSiteGen from '../../../components/Button/NextButtonSiteGen';
 
+import SiteGenSiteDetailsWalkthrough from '../SiteDetails/walkthrough';
+
 const SiteGenSiteDetails = () => {
 	const content = getContents();
 	const isLargeViewport = useViewportMatch( 'small' );
 	const [ customerInput, setCustomerInput ] = useState();
-
+	const [ isWalkthrough, setIsWalkthrough ] = useState( false );
 	const { currentData } = useSelect( ( select ) => {
 		return {
 			currentData:
@@ -39,42 +41,84 @@ const SiteGenSiteDetails = () => {
 		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 );
+	};
+
 	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 }
-					/>
-					{ 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>
+				{ isWalkthrough ? (
+					<SiteGenSiteDetailsWalkthrough />
+				) : (
+					<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"
+									>
+										click here
+									</span>
+								</div>
+							</>
+						) : (
+							<div
+								className={ 'nfd-sg-site-details-walkThrough' }
+							>
+								{ content.walkThroughText }
+								<span
+									onClick={ handleClickWalkThrough }
+									onKeyDown={ handleClickWalkThrough }
+									role="button"
+									tabIndex="0"
+								>
+									click here
+								</span>
+							</div>
+						) }
+					</div>
+				) }
 			</Animate>
 		</CommonLayout>
 	);