diff --git a/src/OnboardingSPA/components/CardWithOptions/index.js b/src/OnboardingSPA/components/CardWithOptions/index.js index 6ac5c8fff..aa2571c2f 100644 --- a/src/OnboardingSPA/components/CardWithOptions/index.js +++ b/src/OnboardingSPA/components/CardWithOptions/index.js @@ -1,3 +1,4 @@ +import { memo } from '@wordpress/element'; import { Icon, chevronRight } from '@wordpress/icons'; const CardWithOptions = ( { title, options, skip, callback } ) => { @@ -68,4 +69,4 @@ const CardWithOptions = ( { title, options, skip, callback } ) => { ); }; -export default CardWithOptions; +export default memo( CardWithOptions ); diff --git a/src/OnboardingSPA/components/Header/index.js b/src/OnboardingSPA/components/Header/index.js index 6506cf1c2..03760ff3d 100644 --- a/src/OnboardingSPA/components/Header/index.js +++ b/src/OnboardingSPA/components/Header/index.js @@ -11,6 +11,7 @@ import { } from '../../../constants'; import classNames from 'classnames'; import { stepSiteGenEditor } from '../../steps/SiteGen/Editor/step'; +import { SITEGEN_FLOW } from '../../data/flows/constants'; const Header = () => { const { headers, headerActiveView, isHeaderEnabled, currentStep } = @@ -25,6 +26,7 @@ const Header = () => { } ); const isEditorStep = currentStep === stepSiteGenEditor; + const isSitegenFlow = window.nfdOnboarding.currentFlow === SITEGEN_FLOW; return ( <> @@ -40,9 +42,15 @@ const Header = () => { { isHeaderEnabled && (
{ return (
@@ -7,4 +9,4 @@ const AIHeading = ( { title } ) => { ); }; -export default AIHeading; +export default memo( AIHeading ); diff --git a/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js b/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js index 8b93d2d58..4b3474b36 100644 --- a/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js +++ b/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js @@ -1,7 +1,7 @@ import getContents from './contents'; import { useSelect } from '@wordpress/data'; import { useNavigate } from 'react-router-dom'; -import { useEffect, useState } from '@wordpress/element'; +import { memo, useEffect, useState } from '@wordpress/element'; import { store as nfdOnboardingStore } from '../../../store'; const SiteGenLoader = ( { autoNavigate = false } ) => { @@ -22,7 +22,9 @@ const SiteGenLoader = ( { autoNavigate = false } ) => { useEffect( () => { const statusTimer = setInterval( () => { statusIdx += 1; - if ( statusIdx === content.status.length ) statusIdx = 0; + if ( statusIdx === content.status.length ) { + statusIdx = 0; + } setStatus( content.status[ statusIdx ].title ); }, 3000 ); return () => { @@ -65,4 +67,4 @@ const SiteGenLoader = ( { autoNavigate = false } ) => { ); }; -export default SiteGenLoader; +export default memo( SiteGenLoader ); diff --git a/src/OnboardingSPA/components/StartOptions/index.js b/src/OnboardingSPA/components/StartOptions/index.js index 21cde948f..6991669e4 100644 --- a/src/OnboardingSPA/components/StartOptions/index.js +++ b/src/OnboardingSPA/components/StartOptions/index.js @@ -3,6 +3,7 @@ import { resolveGetDataForFlow } from '../../data/flows'; import { useSelect, useDispatch } from '@wordpress/data'; import { validateFlow } from '../../data/flows/utils'; import { useNavigate } from 'react-router-dom'; +import { memo } from '@wordpress/element'; import { store as nfdOnboardingStore } from '../../store'; const StartOptions = ( { questionnaire, oldFlow, options } ) => { @@ -101,4 +102,4 @@ const StartOptions = ( { questionnaire, oldFlow, options } ) => { ); }; -export default StartOptions; +export default memo( StartOptions ); diff --git a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js index b61800f6c..8055dba22 100644 --- a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js +++ b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js @@ -1,4 +1,5 @@ import classNames from 'classnames'; +import { __ } from '@wordpress/i18n'; import { useRef, useEffect, useState, memo } from '@wordpress/element'; const TextInputSiteGen = ( { @@ -17,7 +18,7 @@ const TextInputSiteGen = ( { textareaRef.current.style.height = height; const scrollHeight = textareaRef.current.scrollHeight; textareaRef.current.style.height = scrollHeight + 'px'; - const analysisResult = calculateAnalysisScore( customerInput ); + const analysisResult = calculateAnalysisScore( customerInput?.trim() ); setAnalysisScore( analysisResult ); setIsValidInput( analysisResult >= 2 ); }, [ customerInput ] ); @@ -87,7 +88,7 @@ const TextInputSiteGen = ( { { customerInput ? (
- Detail + { __( 'Detail', 'wp-module-onboarding' ) }
{ renderDetails() }
diff --git a/src/OnboardingSPA/static/images/sitegen/sitegen-ai-animation.gif b/src/OnboardingSPA/static/images/sitegen/sitegen-ai-animation.gif index bb5614215..e0e2f3a62 100644 Binary files a/src/OnboardingSPA/static/images/sitegen/sitegen-ai-animation.gif and b/src/OnboardingSPA/static/images/sitegen/sitegen-ai-animation.gif differ diff --git a/src/OnboardingSPA/steps/SiteGen/Building/index.js b/src/OnboardingSPA/steps/SiteGen/Building/index.js index 91a1d5543..707a3e1b9 100644 --- a/src/OnboardingSPA/steps/SiteGen/Building/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Building/index.js @@ -1,6 +1,6 @@ import CommonLayout from '../../../components/Layouts/Common'; -import { useEffect } from '@wordpress/element'; +import { memo, useEffect } from '@wordpress/element'; import { useDispatch } from '@wordpress/data'; import { store as nfdOnboardingStore } from '../../../store'; @@ -42,4 +42,4 @@ const SiteGenBuilding = () => { ); }; -export default SiteGenBuilding; +export default memo( SiteGenBuilding ); diff --git a/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js b/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js index d8dfa9cdd..7523ce3a0 100644 --- a/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js +++ b/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js @@ -40,15 +40,21 @@ const SiteGenSiteDetails = () => { setDrawerActiveView( false ); if ( currentData.sitegen.siteDetails?.prompt !== '' ) { + setIsValidInput( true ); + setFooterNavEnabled( true ); return setCustomerInput( currentData.sitegen.siteDetails.prompt ); } setFooterNavEnabled( false ); }, [] ); useEffect( () => { - setFooterNavEnabled( isValidInput ); - currentData.sitegen.siteDetails.prompt = customerInput; - setCurrentOnboardingData( currentData ); + if ( customerInput?.trim() === '' ) { + setFooterNavEnabled( false ); + } else { + setFooterNavEnabled( isValidInput ); + currentData.sitegen.siteDetails.prompt = customerInput?.trim(); + setCurrentOnboardingData( currentData ); + } }, [ customerInput ] ); return ( diff --git a/src/OnboardingSPA/steps/SiteGen/SocialMedia/index.js b/src/OnboardingSPA/steps/SiteGen/SocialMedia/index.js index 8af53e96e..adb558e6d 100644 --- a/src/OnboardingSPA/steps/SiteGen/SocialMedia/index.js +++ b/src/OnboardingSPA/steps/SiteGen/SocialMedia/index.js @@ -1,5 +1,5 @@ import { useDispatch } from '@wordpress/data'; -import { useEffect } from '@wordpress/element'; +import { memo, useEffect } from '@wordpress/element'; import { useViewportMatch } from '@wordpress/compose'; import getContents from './contents'; @@ -64,4 +64,4 @@ const SiteGenSiteSocialMedia = () => { ); }; -export default SiteGenSiteSocialMedia; +export default memo( SiteGenSiteSocialMedia ); diff --git a/src/OnboardingSPA/steps/SiteGen/Welcome/index.js b/src/OnboardingSPA/steps/SiteGen/Welcome/index.js index e6aec3439..ec3ff5b54 100644 --- a/src/OnboardingSPA/steps/SiteGen/Welcome/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Welcome/index.js @@ -1,4 +1,4 @@ -import { useEffect } from '@wordpress/element'; +import { memo, useEffect } from '@wordpress/element'; import { useDispatch } from '@wordpress/data'; import CommonLayout from '../../../components/Layouts/Common'; @@ -46,4 +46,4 @@ const SiteGenWelcome = () => { ); }; -export default SiteGenWelcome; +export default memo( SiteGenWelcome ); diff --git a/src/OnboardingSPA/steps/SiteGen/Welcome/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Welcome/stylesheet.scss index 90f8a5653..3c8a39c87 100644 --- a/src/OnboardingSPA/steps/SiteGen/Welcome/stylesheet.scss +++ b/src/OnboardingSPA/steps/SiteGen/Welcome/stylesheet.scss @@ -15,6 +15,7 @@ @media (max-width: #{ ($break-small) }) { margin: 16px; + margin-bottom: 100px; } @media (min-width: 2600px ) { @@ -71,6 +72,7 @@ width: 100%; margin: 10px; padding: 0; + margin-bottom: 40px; &__text { text-align: center;