Api integration preview home page

includes/RestApi/SiteGenController.php

@@ -3,7 +3,9 @@
 namespace NewfoldLabs\WP\Module\Onboarding\RestApi;
 
 use NewfoldLabs\WP\Module\Onboarding\Permissions;
+use NewfoldLabs\WP\Module\AI\SiteGen\SiteGen;
 use NewfoldLabs\WP\Module\Onboarding\Data\Services\SiteGenService;
+use NewfoldLabs\WP\Module\Onboarding\Data\Options;
 
 /**
  * Class SiteGenController
@@ -49,6 +51,35 @@ public function register_routes() {
 				'args'                => $this->sitegen_meta_args(),
 			)
 		);
+		\register_rest_route(
+			$this->namespace,
+			$this->rest_base . '/get-homepages',
+			array(
+				'methods'             => \WP_REST_Server::CREATABLE,
+				'callback'            => array( $this, 'get_homepages' ),
+				'permission_callback' => array( Permissions::class, 'rest_is_authorized_admin' ),
+				'args'                => $this->get_homepages_args(),
+			)
+		);
+		\register_rest_route(
+			$this->namespace,
+			$this->rest_base . '/get-homepages-regenerate',
+			array(
+				'methods'             => \WP_REST_Server::CREATABLE,
+				'callback'            => array( $this, 'get_regenerated_homepages' ),
+				'permission_callback' => array( Permissions::class, 'rest_is_authorized_admin' ),
+				'args'                => $this->get_homepages_regenerate_args(),
+			)
+		);
+		\register_rest_route(
+			$this->namespace,
+			$this->rest_base . '/favourites',
+			array(
+				'methods'             => \WP_REST_Server::CREATABLE,
+				'callback'            => array( $this, 'toggle_favourite_homepage' ),
+				'permission_callback' => array( Permissions::class, 'rest_is_authorized_admin' ),
+			)
+		);
 	}
 
 	/**
@@ -73,6 +104,53 @@ public function sitegen_meta_args() {
 		);
 	}
 
+	/**
+	 * Gets the arguments for the 'get-homepages' endpoint.
+	 *
+	 * @return array The array of arguments.
+	 */
+	public function get_homepages_args() {
+		return array(
+			'site_description' => array(
+				'required'          => true,
+				'validate_callback' => function ( $param ) {
+					return is_string( $param );
+				},
+				'sanitize_callback' => 'sanitize_text_field',
+			),
+			'regenerate'       => array(
+				'required' => false,
+			),
+			// Add other parameters here as needed.
+		);
+	}
+
+	/**
+	 * Gets the arguments for the 'get-homepages' endpoint.
+	 *
+	 * @return array The array of arguments.
+	 */
+	public function get_homepages_regenerate_args() {
+		return array(
+			'site_description' => array(
+				'required'          => true,
+				'validate_callback' => function ( $param ) {
+					return is_string( $param );
+				},
+				'sanitize_callback' => 'sanitize_text_field',
+			),
+			'regenerate'       => array(
+				'required' => false,
+			),
+			'slug'             => array(
+				'required' => false,
+			),
+			'colorPalettes'    => array(
+				'required' => false,
+			),
+		);
+	}
+
 	/**
 	 * Gets all the valid Identifiers
 	 *
@@ -105,4 +183,117 @@ 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 );
 	}
+
+	/**
+	 * Gets the preview homepages
+	 *
+	 * @param \WP_REST_Request $request parameter.
+	 * @return array
+	 */
+	public function get_homepages( \WP_REST_Request $request ) {
+
+		$site_description = $request->get_param( 'site_description' );
+		$regenerate       = $request->get_param( 'regenerate' );
+		$site_info        = array( 'site_info' => array( 'site_description' => $site_description ) );
+
+		// If the option exists and is not empty, return it.
+		$existing_homepages = get_option( Options::get_option_name( 'sitegen_homepages' ), array() );
+		if ( ! empty( $existing_homepages ) && ! $regenerate ) {
+			return new \WP_REST_Response( $existing_homepages, 200 );
+		}
+
+		$target_audience = SiteGenService::instantiate_site_meta( $site_info, 'targetaudience', true );
+		$content_style   = SiteGenService::instantiate_site_meta( $site_info, 'contenttones', true );
+
+		if ( ! $target_audience || ! $content_style ) {
+			return new \WP_Error(
+				'nfd_onboarding_error',
+				__( 'Required data is missing.', 'wp-module-onboarding' ),
+				array(
+					'status' => 400,
+				)
+			);
+		}
+
+		$processed_home_pages = SiteGenService::generate_homepages(
+			$site_description,
+			$content_style,
+			$target_audience,
+			$regenerate
+		);
+
+		if ( is_wp_error( $processed_home_pages ) ) {
+			return $processed_home_pages;
+		}
+
+		return new \WP_REST_Response( $processed_home_pages, 200 );
+	}
+
+	/**
+	 * Gets the regenerated preview homepages
+	 *
+	 * @param \WP_REST_Request $request parameter.
+	 * @return array
+	 */
+	public function get_regenerated_homepages( \WP_REST_Request $request ) {
+		$site_description          = $request->get_param( 'site_description' );
+		$regenerate_slug           = $request->get_param( 'slug' );
+		$regenerate_color_palattes = $request->get_param( 'colorPalettes' );
+		$is_favourite              = $request->get_param( 'isFavourited' );
+		$site_info                 = array( 'site_info' => array( 'site_description' => $site_description ) );
+		$target_audience           = SiteGenService::instantiate_site_meta( $site_info, 'targetaudience', true );
+		$content_style             = SiteGenService::instantiate_site_meta( $site_info, 'contenttones', true );
+
+		if ( ! $target_audience || ! $content_style ) {
+			return new \WP_Error(
+				'nfd_onboarding_error',
+				__( 'Required data is missing.', 'wp-module-onboarding' ),
+				array(
+					'status' => 400,
+				)
+			);
+		}
+
+		if ( $is_favourite ) {
+			$result = SiteGenService::handle_favorite_regeneration( $regenerate_slug, $regenerate_color_palattes );
+		} else {
+			$result = SiteGenService::handle_regular_regeneration( $site_description, $content_style, $target_audience );
+		}
+
+		if ( null === $result ) {
+			return new \WP_Error(
+				'nfd_onboarding_error',
+				__( 'Error processing request.', 'wp-module-onboarding' ),
+				array(
+					'status' => 500,
+				)
+			);
+		}
+
+		return new \WP_REST_Response( $result, 200 );
+	}
+
+	/**
+	 * Updates favourite status
+	 *
+	 * @param \WP_REST_Request $request parameter.
+	 * @return array
+	 */
+	public function toggle_favourite_homepage( \WP_REST_Request $request ) {
+		$slug = $request->get_param( 'slug' );
+
+		$response = SiteGenService::toggle_favourite_homepage( $slug );
+
+		if ( is_wp_error( $response ) ) {
+			$error_message = $response->get_error_message();
+			return new \WP_Error(
+				'nfd_onboarding_error',
+				__( 'Failed at updating Favourite status', 'wp-module-onboarding' ),
+				array(
+					'status' => 404,
+				)
+			);
+		}
+		return new \WP_REST_Response( $response, 200 );
+	}
 }

src/OnboardingSPA/components/Button/ButtonDark/stylesheet.scss

@@ -2,10 +2,14 @@
 
 	&--dark {
 		background-color: var(--nfd-onboarding-navigation-back-background);
-		width: 74px;
 		height: 36px;
 		color: var(--nfd-onboarding-primary);
 		border-radius: 8px;
 		padding: 0, 13px, 0 13px;
+
+		&:hover {
+			background-color: #fff;
+			color: #272d30;
+		}
 	}
 }

src/OnboardingSPA/components/Button/index.js

@@ -2,22 +2,24 @@
  * Common Button Component
  * Different variants can be added later based on our requirements
  *
- * @returns Button
+ * @return Button
  */
 
-const Button = ({ text, handleClick, disabled, className }) => {
+const Button = ( { children, onClick, disabled, className } ) => {
 	const handleBtnClick = () => {
-		handleClick();
+		if ( onClick ) {
+			onClick();
+		}
 	};
 
 	return (
 		<button
 			type="button"
-			className={`${className} nfd-card-button`}
-			onClick={handleBtnClick}
-			disabled={disabled}
+			className={ `${ className } nfd-card-button` }
+			onClick={ handleBtnClick }
+			disabled={ disabled }
 		>
-			{text}
+			{ children }
 		</button>
 	);
 };

src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js

@@ -37,7 +37,6 @@ const SiteGenHeader = () => {
 		path: currentStep?.path,
 	} );
 	const progress = ( currentStepIndex / allSteps.length ) * 100;
-
 	return (
 		<>
 			<Fill name={ `${ HEADER_SITEGEN }/${ HEADER_TOP }` }>
@@ -48,10 +47,14 @@ const SiteGenHeader = () => {
 					) }
 				</>
 			</Fill>
-			<Fill name={ `${ HEADER_SITEGEN }/${ HEADER_START }` }>
-				<>{ isHeaderNavigationEnabled && <StepNavigation /> }</>
-			</Fill>
-			{ currentStep?.header && <currentStep.header /> }
+
+			{ currentStep?.header?.component
+				? isHeaderNavigationEnabled && <currentStep.header.component />
+				: isHeaderNavigationEnabled && (
+						<Fill name={ `${ HEADER_SITEGEN }/${ HEADER_START }` }>
+							<StepNavigation />
+						</Fill>
+				  ) }
 		</>
 	);
 };

src/OnboardingSPA/components/Header/index.js

@@ -1,6 +1,7 @@
 import { Slot } from '@wordpress/components';
 import { Fragment, Suspense } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
+import classNames from 'classnames';
 
 import { store as nfdOnboardingStore } from '../../store';
 import {
@@ -9,18 +10,17 @@ import {
 	HEADER_START,
 	HEADER_TOP,
 } from '../../../constants';
-import classNames from 'classnames';
 import { stepSiteGenEditor } from '../../steps/SiteGen/Editor/step';
 
 const Header = () => {
 	const { headers, headerActiveView, isHeaderEnabled, currentStep } =
 		useSelect( ( select ) => {
 			return {
+				currentStep: select( nfdOnboardingStore ).getCurrentStep(),
 				headers: select( nfdOnboardingStore ).getHeaders(),
 				headerActiveView:
 					select( nfdOnboardingStore ).getHeaderActiveView(),
 				isHeaderEnabled: select( nfdOnboardingStore ).isHeaderEnabled(),
-				currentStep: select( nfdOnboardingStore ).getCurrentStep(),
 			};
 		} );
 

src/OnboardingSPA/components/Header/stylesheet.scss

@@ -1,3 +1,5 @@
+$nfd-onboarding-editor-header-hover: #272d30;
+
 .nfd-onboarding-header {
 	align-items: center;
 	background-color: var(--nfd-onboarding-header-base);
@@ -23,6 +25,10 @@
 		transition-delay: 80ms;
 
 		@include reduce-motion("transition");
+
+		@media (max-width: #{ ($break-xlarge) }) {
+			padding-left: 4px;
+		}
 	}
 
 	&__start,
@@ -39,16 +45,8 @@
 		display: flex;
 		align-items: center;
 		height: 100%;
-		flex-grow: 1;
-		justify-content: center;
-		min-width: 5px;
-		font-weight: 600;
 		font-size: 20px;
 		line-height: $grid-unit-30;
-
-		svg {
-			margin-right: $grid-unit-10;
-		}
 	}
 
 	&__end {
@@ -110,4 +108,25 @@
 		font-size: 13px;
 		padding: 15px 10px !important;
 	}
+
+	&-editor {
+		padding: 0 13px 0 13px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		gap: 8px;
+		cursor: pointer;
+		height: 36px;
+		background-color: var(--nfd-onboarding-navigation-back-background);
+		color: var(--nfd-onboarding-primary);
+		fill: var(--nfd-onboarding-primary);
+		border-radius: 6px;
+
+		&:hover {
+			background-color: var(--nfd-onboarding-primary);
+			color: $nfd-onboarding-editor-header-hover;
+			fill: $nfd-onboarding-editor-header-hover;
+		}
+	}
+
 }

src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss

@@ -27,6 +27,17 @@ $main-color-grey-other: #e2e2e2;
 			}
 		}
 
+		&-full {
+			width: 100%;
+			min-height: 90vh;
+			overflow: hidden;
+			position: relative;
+			align-items: center;
+			border: 1px solid #e3dfdf;
+			border-top: 0;
+			margin-bottom: 30px;
+		}
+
 		&--is-skeleton {
 			z-index: 1;
 			width: 100%;