Merge pull request #388 from newfold-labs/enhance/child-theme-generation

Sitegen Save and Continue

includes/RestApi/FlowController.php

@@ -1,9 +1,11 @@
 <?php
 namespace NewfoldLabs\WP\Module\Onboarding\RestApi;
 
+use NewfoldLabs\WP\Module\Onboarding\Data\Options;
 use NewfoldLabs\WP\Module\Onboarding\Permissions;
 use NewfoldLabs\WP\Module\Onboarding\Data\Services\FlowService;
 use NewfoldLabs\WP\Module\Onboarding\Services\PluginService;
+use NewfoldLabs\WP\Module\Onboarding\Data\Services\SiteGenService;
 
 /**
  * Class FlowController
@@ -125,7 +127,26 @@ public function save_onboarding_flow_data( \WP_REST_Request $request ) {
 	 *
 	 * @return \WP_REST_Response|\WP_Error
 	 */
-	public function complete() {
+	public function complete( $request ) {
+		$flow = $request->get_param('flow');
+		if ( 'sitegen' === $flow ) {
+			$flow_data_option = \get_option( Options::get_option_name( 'flow' ), false );
+			if ( false === $flow_data_option || ! isset( $flow_data_option['data'] ) ) {
+				return new \WP_Error(
+					'nfd_onboarding_error',
+					'Flow data does not exist to generate a child theme.',
+					array( 'status' => 500 )
+				);
+			}
+		$homepage_data = $flow_data_option['sitegen']['homepages']['data'];
+		$active_homepage = $flow_data_option['sitegen']['homepages']['active'];
+		SiteGenService::complete( $active_homepage, $homepage_data );
+		return new \WP_REST_Response(
+			array(),
+			201
+		);
+		}
+
 		$site_pages_publish_request  = new \WP_REST_Request(
 			'POST',
 			'/newfold-onboarding/v1/site-pages/publish'

includes/RestApi/SitePagesController.php

@@ -54,7 +54,7 @@ public function publish_site_pages() {
 		if ( false === $flow_data_option || ! isset( $flow_data_option['data'] ) ) {
 			return new \WP_Error(
 				'nfd_onboarding_error',
-				'Flow data does not exist to generate a child theme.',
+				'Flow data does not exist to publish site pages',
 				array( 'status' => 500 )
 			);
 		}

src/OnboardingSPA/components/Loaders/Spinner/index.js

@@ -1,5 +1,14 @@
-const Spinner = () => {
-	return <div className="nfd-onboarding-loader--spinner"></div>;
+import classNames from 'classnames';
+
+const Spinner = ( { className } ) => {
+	return (
+		<div
+			className={ classNames(
+				'nfd-onboarding-loader--spinner',
+				className
+			) }
+		></div>
+	);
 };
 
 export default Spinner;

src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js

@@ -5,6 +5,7 @@ import {
 	HEADER_END,
 	HEADER_SITEGEN,
 	HEADER_START,
+	wpEditorPage,
 	SIDEBAR_SITEGEN_EDITOR_PATTERNS,
 } from '../../../../../constants';
 import { Icon, chevronDown, chevronRight } from '@wordpress/icons';
@@ -14,9 +15,12 @@ import { useSelect, useDispatch } from '@wordpress/data';
 
 import { useEffect, useState } from '@wordpress/element';
 import { getRandom } from '../../../../data/sitegen/homepages/homepages';
+import { setFlow, completeFlow } from '../../../../utils/api/flow';
+import Spinner from '../../../../components/Loaders/Spinner';
 
 const StepSiteGenEditorHeader = () => {
 	const [ homepage, setHomepage ] = useState();
+	const [ isSaving, setIsSaving ] = useState( false );
 
 	const {
 		setCurrentOnboardingData,
@@ -31,26 +35,36 @@ const StepSiteGenEditorHeader = () => {
 	} );
 
 	const handleFavorite = () => {
+		if ( isSaving ) {
+			return;
+		}
 		homepage.favorite = ! homepage.favorite;
 		currentData.sitegen.homepages.data[ homepage.slug ] = homepage;
 		setCurrentOnboardingData( currentData );
 	};
 
 	const handleRegenerate = () => {
+		if ( isSaving ) {
+			return;
+		}
 		const newPage = getRandom( { ...homepage } );
 		setHomepage( newPage );
 		currentData.sitegen.homepages.data[ newPage.slug ] = newPage;
 		currentData.sitegen.homepages.active = newPage;
 		setCurrentOnboardingData( currentData );
 	};
 
+	const saveAndContinue = async () => {
+		setIsSaving( true );
+		await setFlow( currentData );
+		await completeFlow();
+		window.location.replace( wpEditorPage );
+	};
 	const handleViewAll = () => {
 		setSidebarActiveView( SIDEBAR_SITEGEN_EDITOR_PATTERNS );
 		setIsSidebarOpened( true );
 	};
 
-	const generateChildThemes = () => {};
-
 	useEffect( () => {
 		if ( currentData?.sitegen?.homepages?.active ) {
 			setHomepage( currentData.sitegen.homepages.active );
@@ -61,7 +75,10 @@ const StepSiteGenEditorHeader = () => {
 			<Fill name={ `${ HEADER_SITEGEN }/${ HEADER_START }` }>
 				<div className="nfd-onboarding-header--sitegen__editor__start">
 					<div
-						className="nfd-onboarding-header--sitegen__editor__start__regenerate"
+						className={ `nfd-onboarding-header--sitegen__editor__start__regenerate ${
+							isSaving &&
+							'nfd-onboarding-header--sitegen__editor__start__regenerate__disabled'
+						}` }
 						role="button"
 						tabIndex={ 0 }
 						onClick={ () => handleRegenerate() }
@@ -116,7 +133,12 @@ const StepSiteGenEditorHeader = () => {
 								);
 							} }
 							renderContent={ () => (
-								<div className="nfd-onboarding-header--sitegen__editor__center__dropdown__content">
+								<div
+									className={ `nfd-onboarding-header--sitegen__editor__center__dropdown__content ${
+										isSaving &&
+										'nfd-onboarding-header--sitegen__editor__center__dropdown__content__disabled'
+									}` }
+								>
 									<p className="nfd-onboarding-header--sitegen__editor__center__dropdown__content__rename">
 										{ __(
 											'Rename',
@@ -143,7 +165,12 @@ const StepSiteGenEditorHeader = () => {
 			</Fill>
 			<Fill name={ `${ HEADER_SITEGEN }/${ HEADER_END }` }>
 				<div className="nfd-onboarding-header--sitegen__editor__end">
-					<div className="nfd-onboarding-header--sitegen__editor__end__customize-button">
+					<div
+						className={ `nfd-onboarding-header--sitegen__editor__end__customize-button ${
+							isSaving &&
+							'nfd-onboarding-header--sitegen__editor__end__customize-button__disabled'
+						}` }
+					>
 						<div className="nfd-onboarding-header--sitegen__editor__end__customize-button__icon"></div>
 						<div className="nfd-onboarding-header--sitegen__editor__end__customize-button__text">
 							{ __( 'Customize', 'wp-module-onboarding' ) }
@@ -152,17 +179,25 @@ const StepSiteGenEditorHeader = () => {
 					<div className="nfd-onboarding-header--sitegen__editor__end__save-button">
 						<div
 							className="nfd-onboarding-header--sitegen__editor__end__save-button__text"
+							onClick={ saveAndContinue }
 							role="button"
 							tabIndex={ 0 }
-							onKeyDown={ generateChildThemes }
-							onClick={ generateChildThemes }
+							onKeyDown={ saveAndContinue }
 						>
 							{ __( 'Save & Continue', 'wp-module-onboarding' ) }
 						</div>
-						<Icon
-							icon={ chevronRight }
-							className="nfd-onboarding-header--sitegen__editor__end__save-button__text"
-						></Icon>
+						{ isSaving ? (
+							<Spinner
+								className={
+									'nfd-onboarding-header--sitegen__editor__end__save-button__spinner'
+								}
+							/>
+						) : (
+							<Icon
+								icon={ chevronRight }
+								className="nfd-onboarding-header--sitegen__editor__end__save-button__text"
+							></Icon>
+						) }
 					</div>
 				</div>
 			</Fill>

src/OnboardingSPA/steps/SiteGen/Editor/Header/stylesheet.scss

@@ -28,6 +28,10 @@
 					align-items: center;
 					justify-content: space-evenly;
 					width: 130px;
+
+					&__disabled {
+						cursor: disabled;
+					}
 				}
 			}
 
@@ -84,6 +88,10 @@
 						&__view-all {
 							border-top: 1px solid var(--nfd-onboarding-secondary);
 						}
+
+						&__disabled {
+							cursor: disabled;
+						}
 					}
 				}
 			}
@@ -111,6 +119,10 @@
 						width: 16px;
 						margin-right: 8px;
 					}
+
+					&__disabled {
+						cursor: disabled;
+					}
 				}
 
 				&__save-button {

src/constants.js

@@ -17,6 +17,7 @@ export const wpAdminPage = addQueryArgs(
 	`${ wpAdminUrl }index.php`,
 	window.nfdOnboarding.currentBrand?.dashboardRedirectParams
 );
+export const wpEditorPage = `${ wpAdminUrl }site-editor.php?canvas=edit`;
 export const pluginDashboardPage =
 	addQueryArgs(
 		window.nfdOnboarding.currentBrand?.pluginDashboardPage,