Merge branch 'enhance/ai-onboarding' of github.com:newfold-labs/wp-mo…

…dule-onboarding into ai-onboarding-customize-sidebar

includes/Services/PluginService.php

@@ -164,7 +164,7 @@ public static function configure_activation_transient() {
 			'option_active_plugins',
 			function ( $plugins ) {
 				if ( '1' === get_transient( Options::get_option_name( 'filter_active_plugins' ) ) ) {
-					return array( container()->plugin()->basename );
+					return Plugins::get_active_plugins_list();
 				}
 				return $plugins;
 			}

includes/WP_Admin.php

@@ -6,6 +6,7 @@
 use NewfoldLabs\WP\Module\Onboarding\Services\PluginService;
 use NewfoldLabs\WP\Module\Onboarding\Services\ThemeService;
 use NewfoldLabs\WP\Module\Onboarding\Data\Services\FlowService;
+use NewfoldLabs\WP\Module\Onboarding\Data\Services\SiteGenService;
 use NewfoldLabs\WP\Module\Onboarding\Data\Themes;
 use NewfoldLabs\WP\Module\Onboarding\Services\I18nService;
 
@@ -32,6 +33,7 @@ public function __construct() {
 		\add_action( 'load-dashboard_page_' . self::$slug, array( __CLASS__, 'initialize' ) );
 		if ( 'sitegen' === Data::current_flow() ) {
 			\add_action( 'load-themes.php', array( __CLASS__, 'mark_sitegen_generated_themes' ) );
+			SiteGenService::pre_set_filter_wonder_blocks_transients();
 		}
 	}
 

src/OnboardingSPA/components/AdminBar/stylesheet.scss

@@ -16,8 +16,9 @@ $light-grey : #a0a5aa;
 
 		&__wplogo {
 			color: var(--nfd-onboarding-white);
-			font-size: 16px;
 			display: flex;
+			font-size: 16px;
+			font-weight: 510;
 			align-items: center;
 
 			svg {
@@ -35,8 +36,9 @@ $light-grey : #a0a5aa;
 			align-items: center;
 
 			&__greeting {
-				color: $light-grey;
+				color: var(--nfd-onboarding-white);
 				font-size: 16px;
+				font-weight: 510;
 				margin-right: 5px;
 			}
 

src/OnboardingSPA/components/Button/NextButtonSiteGen/index.js

@@ -10,6 +10,7 @@ const NextButtonSiteGen = ( {
 	className,
 	callback = null,
 	disabled = false,
+	showChevronRight = true,
 } ) => {
 	const navigate = useNavigate();
 	const { nextStep } = useSelect( ( select ) => {
@@ -37,10 +38,12 @@ const NextButtonSiteGen = ( {
 			} }
 		>
 			{ text }
-			<Icon
-				className={ 'nfd-onboarding-button--site-gen-next--icon' }
-				icon={ chevronRight }
-			/>
+			{ showChevronRight && (
+				<Icon
+					className={ 'nfd-onboarding-button--site-gen-next--icon' }
+					icon={ chevronRight }
+				/>
+			) }
 		</Button>
 	);
 };

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

@@ -5,6 +5,7 @@
 		display: flex;
 		cursor: pointer;
 		padding: 0 16px;
+		padding-left: 22px;
 		text-align: center;
 		border-radius: 8px;
 		align-items: center;

src/OnboardingSPA/components/CardWithOptions/stylesheet.scss

@@ -34,7 +34,7 @@ $background-color: var(--nfd-onboarding-card-background);
 			margin: 16px 4px;
 			align-items: center;
 			border-radius: 4px 4px 0 0;
-			padding: 16px 12px 20px 12px;
+			padding: 16px 12px 16px 12px;
 			justify-content: space-between;
 			transition: background-color 400ms ease-in-out;
 

src/OnboardingSPA/components/Footer/stylesheet.scss

@@ -8,7 +8,7 @@
 	flex-direction: row;
 
 	height: auto;
-	width: 100%;
+	width: 20%;
 	border: none;
 
 	&__end {
@@ -30,6 +30,7 @@
 	}
 
 	@media (max-width: #{ ($break-small) }) {
+		width: 100%;
 		backdrop-filter: blur(2px);
 		background: rgba(var(--nfd-onboarding-secondary-rgb), 0.5);
 		border-top: 1px solid rgba(var(--nfd-onboarding-primary-rgb), 0.25);

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

@@ -36,7 +36,9 @@ const SiteGenHeader = () => {
 	const currentStepIndex = findIndex( allSteps, {
 		path: currentStep?.path,
 	} );
-	const progress = ( currentStepIndex / allSteps.length ) * 100;
+	const progress = Math.abs(
+		( ( currentStepIndex - 1 ) / ( allSteps.length - 1 ) ) * 100
+	);
 	return (
 		<>
 			<Fill name={ `${ HEADER_SITEGEN }/${ HEADER_TOP }` }>

src/OnboardingSPA/components/Heading/AIHeading/stylesheet.scss

@@ -2,12 +2,12 @@
 
 	width: 100%;
 	display: flex;
-	margin-bottom: 20px;
+	margin: 16px;
 	align-items: center;
 
 	&--icon {
 		width: 50px;
-		margin: 4px;
+		margin-right: 4px;
 		height: 50px;
 		background-size: 200%;
 		background-position: center;

src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithText/stylesheet.scss

@@ -1,7 +1,7 @@
 .nfd-onboarding-image-uploader {
 
 	&--with-text {
-		width: 40vw;
+		width: 36vw;
 		margin: 16px;
 		border: 1.25px dashed var(--nfd-onboarding-site-logo-border);
 
@@ -15,7 +15,7 @@
 			align-items: stretch;
 		}
 		border-radius: 8px;
-		padding: 24px;
+		padding: 30px;
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
@@ -123,25 +123,27 @@
 				&__reset {
 					width: 100%;
 					display: flex;
-					flex-direction: row;
-					justify-content: flex-end;
+					flex-direction: column;
+					justify-content: center;
 
 					&__button {
-						font-size: clamp(0.5rem, 0.4091rem + 0.4545vw, 1.5rem);
-						font-style: normal;
+						padding: 0;
+						width: 40px;
+						height: 40px;
+						border: none;
 						font-weight: 510;
+						font-style: normal;
+						background-color: #ff0e9099;
 						color: var(--nfd-onboarding-primary);
-						background-color: transparent;
-						border: none;
-						padding: 0;
+						font-size: clamp(0.5rem, 0.4091rem + 0.4545vw, 1.5rem);
 
 						&:hover {
 							cursor: pointer;
 							text-decoration: underline;
 						}
 
 						&__icon {
-							fill: var(--nfd-onboarding-primary);
+							fill: rgb(255, 14, 144);
 						}
 					}
 				}

src/OnboardingSPA/components/ProgressBar/stylesheet.scss

@@ -6,8 +6,9 @@
 		height: 16px;
 
 		&__progress {
-			background-color: var(--nfd-onboarding-progress-bar-fill);
 			height: 16px;
+			transition: width 2s ease-in-out;
+			background-color: var(--nfd-onboarding-progress-bar-fill);
 		}
 	}
 }

src/OnboardingSPA/components/StartOptions/stylesheet.scss

@@ -65,17 +65,14 @@
 		}
 
 		&__heading {
-			color: var(--nfd-onboarding-primary);
-			width: 96%;
-			margin: 50px 0 50px;
-			line-height: 1;
 
 			&__title {
-				font-weight: 500;
-				text-align: center;
-				color: var(--nfd-onboarding-primary);
+				font-weight: 600;
 				font-size: 20px;
 				line-height: 20px;
+				text-align: center;
+				margin-bottom: 10px;
+				color: var(--nfd-onboarding-primary);
 
 				@media (max-width: #{ ($break-large) }) {
 					margin: 8px;

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

@@ -5,10 +5,12 @@ import { useRef, useEffect, useState, memo } from '@wordpress/element';
 const TextInputSiteGen = ( {
 	hint,
 	height,
+	children,
 	placeholder,
 	customerInput,
 	setIsValidInput,
 	setCustomerInput,
+	customChildren = false,
 } ) => {
 	const textareaRef = useRef( null );
 	const [ analysisScore, setAnalysisScore ] = useState( 0 );
@@ -85,16 +87,19 @@ const TextInputSiteGen = ( {
 						onChange={ ( e ) => onTextChange( e ) }
 					/>
 				</div>
-				{ customerInput ? (
-					<div className={ 'nfd-sg-input-box__info' }>
-						<div className={ 'nfd-sg-input-box__info-text' }>
-							{ __( 'Detail', 'wp-module-onboarding' ) }
+				<div className={ 'nfd-sg-input-box_bottom' }>
+					{ customerInput ? (
+						<div className={ 'nfd-sg-input-box__info' }>
+							<div className={ 'nfd-sg-input-box__info-text' }>
+								{ __( 'Detail', 'wp-module-onboarding' ) }
+							</div>
+							{ renderDetails() }
 						</div>
-						{ renderDetails() }
-					</div>
-				) : (
-					<p className={ 'nfd-sg-input-box__hint' }>{ hint }</p>
-				) }
+					) : (
+						<p className={ 'nfd-sg-input-box__hint' }>{ hint }</p>
+					) }
+					{ customChildren && children }
+				</div>
 			</label>
 		</div>
 	);

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

@@ -33,7 +33,6 @@ $selected-detail: #1de082;
 		}
 
 		&__hint {
-			margin-top: 30px;
 			font-weight: 300;
 			font-size: 0.87rem;
 			padding: 0 1.5px;
@@ -44,7 +43,6 @@ $selected-detail: #1de082;
 
 		&__info {
 			display: flex;
-			margin-top: 30px;
 			align-items: center;
 
 			&-text {
@@ -56,8 +54,8 @@ $selected-detail: #1de082;
 			}
 
 			&-icon {
-				width: 10px;
-				height: 6px;
+				width: 12px;
+				height: 6.5px;
 				margin: 3px;
 				border-radius: 6px;
 				animation: fadeIn 100ms ease-in;
@@ -69,6 +67,14 @@ $selected-detail: #1de082;
 				}
 			}
 		}
+
+		&_bottom {
+			display: flex;
+			margin-top: 30px;
+			flex-direction: row;
+			align-items: center;
+			justify-content: space-between;
+		}
 	}
 
 }

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

@@ -101,9 +101,9 @@ const SiteGenSiteDetails = () => {
 							customerInput={ customerInput }
 							setIsValidInput={ setIsValidInput }
 							setCustomerInput={ setCustomerInput }
-						/>
-						{ isLargeViewport && (
-							<>
+							customChildren={ true }
+						>
+							{ isLargeViewport && (
 								<div className={ 'nfd-sg-site-details-endrow' }>
 									<NextButtonSiteGen
 										className={
@@ -113,8 +113,8 @@ const SiteGenSiteDetails = () => {
 										disabled={ ! isValidInput }
 									/>
 								</div>
-							</>
-						) }
+							) }
+						</TextInputSiteGen>
 						<div className={ 'nfd-sg-site-details-walkThrough' }>
 							{ content.walkThroughText }
 							<span

src/OnboardingSPA/steps/SiteGen/SiteDetails/stylesheet.scss

@@ -16,7 +16,6 @@
 	}
 
 	&-endrow {
-		width: 100%;
 		display: flex;
 		justify-content: flex-end;
 		margin-top: 20px;

src/OnboardingSPA/steps/SiteGen/SiteLogo/step.js

@@ -6,7 +6,7 @@ import { Step } from '../../../data/models/Step';
 const SiteGenSiteLogo = lazy( () => import( './index' ) );
 
 export const stepSiteGenSiteLogo = new Step( {
-	path: '/sitgen/step/site-logo',
+	path: '/sitegen/step/site-logo',
 	title: __( 'Page Layouts', 'wp-module-onboarding' ),
 	Component: SiteGenSiteLogo,
 	icon: copy,

src/OnboardingSPA/steps/SiteGen/SiteLogo/stylesheet.scss

@@ -16,7 +16,7 @@
 				}
 
 				&__buttons {
-					width: 108%;
+					width: 99%;
 					display: flex;
 					padding: 16px;
 					flex-direction: row;

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

@@ -11,7 +11,7 @@ const getContents = () => {
 			'wp-module-onboarding'
 		),
 		facebookDesc: __(
-			'By connecting a Facebook profile, we can fetch relevant data to increase the accuracy of your Al generated site.',
+			'By connecting a Facebook profile, we can fetch relevant data to increase the accuracy of your AI generated site.',
 			'wp-module-onboarding'
 		),
 		facebookButton: __( 'Connect Facebook', 'wp-module-onboarding' ),

src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss

@@ -7,7 +7,7 @@
 			&__container {
 
 				display: flex;
-				align-items: center;
+				width: 40vw;
 				flex-direction: column;
 				justify-content: center;
 

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

@@ -4,7 +4,7 @@ const getContents = () => {
 	return {
 		heading: __( 'Website Creator for WordPress', 'wp-module-onboarding' ),
 		subHeading: __(
-			'Tell our AI engine what kind of site you want to make and let it handle the content and design for you.',
+			'Tell our AI engine what kind of site you want to make and let it handle the content and design for you',
 			'wp-module-onboarding'
 		),
 		buttonText: __( 'Get Started', 'wp-module-onboarding' ),

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

@@ -40,7 +40,13 @@ const SiteGenWelcome = () => {
 						{ content.subHeading }
 					</p>
 				</div>
-				<NextButtonSiteGen text={ content.buttonText } />
+				<NextButtonSiteGen
+					className={
+						'nfd-onboarding-step--site-gen__welcome--button'
+					}
+					text={ content.buttonText }
+					showChevronRight={ false }
+				/>
 			</div>
 		</CommonLayout>
 	);