diff --git a/build/1.12.0/images/ai_bg_low.d8292556.png b/build/1.12.0/images/ai_bg_low.d8292556.png deleted file mode 100644 index 097f385e9..000000000 Binary files a/build/1.12.0/images/ai_bg_low.d8292556.png and /dev/null differ diff --git a/build/1.12.0/images/toggle-light-mode.8d7afd07.png b/build/1.12.0/images/toggle-light-mode.8d7afd07.png deleted file mode 100644 index 1ea6d7b09..000000000 Binary files a/build/1.12.0/images/toggle-light-mode.8d7afd07.png and /dev/null differ diff --git a/src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js b/src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js index 91c1b9bcb..186b7b85e 100644 --- a/src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js +++ b/src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js @@ -49,7 +49,6 @@ const SiteGenHeader = () => { ) } - <>{ isHeaderNavigationEnabled && } diff --git a/src/OnboardingSPA/components/Header/stylesheet.scss b/src/OnboardingSPA/components/Header/stylesheet.scss index 1367aa6ca..d01aa6125 100644 --- a/src/OnboardingSPA/components/Header/stylesheet.scss +++ b/src/OnboardingSPA/components/Header/stylesheet.scss @@ -121,18 +121,16 @@ $nfd-onboarding-editor-header-hover: #272d30; display: flex; justify-content: center; align-items: center; - gap: 8px; + text-align: left; cursor: pointer; height: 36px; - background-color: var(--nfd-onboarding-navigation-back-background); + border-radius: 6px; 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; + &__favourite { + display: flex; + align-items: center; } } diff --git a/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js b/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js index 0ff1dc08c..4b518049f 100644 --- a/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js +++ b/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js @@ -48,25 +48,36 @@ const SitegenEditorPatternsSidebar = () => { }; const handlePreview = ( slug ) => { - if ( ! ( slug in homepages ) ) { + const index = homepages.findIndex( + ( homepage ) => homepage.slug === slug + ); + + if ( index === -1 ) { return false; } - const homepagesCopy = { ...homepages }; - homepagesCopy[ slug ].active = ! homepagesCopy[ slug ].active; - currentData.sitegen.homepages.active = homepagesCopy[ slug ]; - setActiveHomepage( homepagesCopy[ slug ] ); + + const homepagesCopy = [ ...homepages ]; + homepagesCopy[ index ].active = ! homepagesCopy[ index ].active; + currentData.sitegen.homepages.active = homepagesCopy[ index ]; + + setActiveHomepage( homepagesCopy[ index ] ); setHomepages( homepagesCopy ); setCurrentOnboardingData( currentData ); }; const handleFavorite = ( slug ) => { - if ( ! ( slug in homepages ) ) { + const index = homepages.findIndex( + ( homepage ) => homepage.slug === slug + ); + if ( index === -1 ) { return false; } - const homepagesCopy = { ...homepages }; + const homepagesCopy = [ ...homepages ]; + + homepagesCopy[ index ].isFavourited = + ! homepagesCopy[ index ].isFavourited; - homepagesCopy[ slug ].favorite = ! homepagesCopy[ slug ].favorite; setHomepages( homepagesCopy ); currentData.sitegen.homepages.data = homepagesCopy; setCurrentOnboardingData( currentData ); @@ -155,7 +166,7 @@ const SitegenEditorPatternsSidebar = () => {
{
{ ( homepage ) => { const data = homepages[ homepage ]; - if ( ! data.favorite ) { + if ( ! data.isFavourited ) { return false; } const newPreviewSettings = diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/Header/TextInput/index.js b/src/OnboardingSPA/steps/SiteGen/Editor/Header/TextInput/index.js index 571f64f6d..9b14d79aa 100644 --- a/src/OnboardingSPA/steps/SiteGen/Editor/Header/TextInput/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Editor/Header/TextInput/index.js @@ -3,7 +3,8 @@ import { useRef, useEffect } from '@wordpress/element'; const TextInputVersion = ( { isInputDisabled, versionName, - setVersionName, + handleVersionRename, + handleRenameOnBlur, } ) => { const inputRef = useRef( null ); @@ -13,8 +14,10 @@ const TextInputVersion = ( { } }, [ isInputDisabled ] ); - const handleTextChange = ( e ) => { - setVersionName( e.target.value ); + const onInputBlurHandler = () => { + if ( handleRenameOnBlur ) { + handleRenameOnBlur( inputRef.current.value ); + } }; return ( @@ -24,7 +27,8 @@ const TextInputVersion = ( { disabled={ isInputDisabled } type="text" value={ versionName } - onChange={ handleTextChange } + onChange={ handleVersionRename } + onBlur={ onInputBlurHandler } /> ); }; diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js b/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js index c75f21f07..38590caa7 100644 --- a/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js @@ -1,5 +1,5 @@ import { __ } from '@wordpress/i18n'; -import { Fill, Dropdown } from '@wordpress/components'; +import { Fill } from '@wordpress/components'; import { HEADER_CENTER, HEADER_END, @@ -8,20 +8,24 @@ import { wpEditorPage, SIDEBAR_SITEGEN_EDITOR_PATTERNS, } from '../../../../../constants'; -import { Icon, chevronDown, chevronRight } from '@wordpress/icons'; +import { Icon, chevronRight } from '@wordpress/icons'; import { store as nfdOnboardingStore } from '../../../../store'; 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'; +import { getRegeneratedHomePagePreviews } from '../../../../utils/api/siteGen'; +import StepNavigationCenter from './step-navigation-center'; +import { useViewportMatch } from '@wordpress/compose'; const StepSiteGenEditorHeader = () => { const [ homepage, setHomepage ] = useState(); const [ isSaving, setIsSaving ] = useState( false ); + const isLargeViewport = useViewportMatch( 'medium' ); + const { setCurrentOnboardingData, setSidebarActiveView, @@ -42,20 +46,46 @@ const StepSiteGenEditorHeader = () => { if ( isSaving ) { return; } - homepage.favorite = ! homepage.favorite; + homepage.isFavourited = ! homepage.isFavourited; currentData.sitegen.homepages.data[ homepage.slug ] = homepage; setCurrentOnboardingData( currentData ); }; - const handleRegenerate = () => { + const handleRegenerate = async () => { if ( isSaving ) { return; } - const newPage = getRandom( { ...homepage } ); - setHomepage( newPage ); - currentData.sitegen.homepages.data[ newPage.slug ] = newPage; - currentData.sitegen.homepages.active = newPage; - setCurrentOnboardingData( currentData ); + const { slug, colorPalattes, isFavourited } = + currentData?.sitegen?.homepages?.active || {}; + try { + const response = await getRegeneratedHomePagePreviews( + currentData.sitegen.siteDetails.prompt, + true, + slug, + colorPalattes, + isFavourited + ); + + if ( response && response.body && response.body.length > 0 ) { + const regeneratedPage = response.body.find( + ( page ) => + ! currentData.sitegen.homepages.data.some( + ( existingPage ) => existingPage.slug === page.slug + ) + ); + setHomepage( regeneratedPage ); + currentData.sitegen.homepages.data[ regeneratedPage.slug ] = + regeneratedPage; + currentData.sitegen.homepages.active = regeneratedPage; + setCurrentOnboardingData( currentData ); + } else if ( response && response.error ) { + /* Handle Error UI state */ + } else { + /* Handle Error UI state */ + } + } catch ( error ) { + /* Handle Error UI state */ + } }; const saveAndContinue = async () => { @@ -90,111 +120,59 @@ const StepSiteGenEditorHeader = () => { <>
-
handleRegenerate() } - onKeyDown={ () => handleRegenerate() } - > -
+ { isLargeViewport && (
handleRegenerate() } + onKeyDown={ () => handleRegenerate() } > - { __( 'Regenerate', 'wp-module-onboarding' ) } +
+
+ { __( 'Regenerate', 'wp-module-onboarding' ) } +
-
+ ) }
{ homepage && (
-
- { - return ( - <> -
-
-

- { homepage.title } -

- -
- - ); - } } - renderContent={ () => ( -
-

- { __( - 'Rename', - 'wp-module-onboarding' - ) } -

-
- { __( - 'View All', - 'wp-module-onboarding' - ) } -
-
- ) } +
) }
-
-
-
- { __( 'Customize', 'wp-module-onboarding' ) } + { isLargeViewport && ( +
+
+
+ { __( 'Customize', 'wp-module-onboarding' ) } +
-
+ ) }
{ tabIndex={ 0 } onKeyDown={ saveAndContinue } > - { __( 'Save & Continue', 'wp-module-onboarding' ) } + { isLargeViewport + ? __( + 'Save & Continue', + 'wp-module-onboarding' + ) + : __( 'Next', 'wp-module-onboarding' ) }
{ isSaving ? ( { - const activeHomepage = useSelect( - ( select ) => select( nfdOnboardingStore ).getActiveHomepage(), - [] - ); +const StepNavigationCenter = ( { + handleFavorite, + handleViewAll, + handleRegenerate, + handleCustomize, +} ) => { + const { currentData, activeHomepage } = useSelect( ( select ) => { + return { + currentData: + select( nfdOnboardingStore ).getCurrentOnboardingData(), + activeHomepage: select( nfdOnboardingStore ).getActiveHomepage(), + }; + } ); + const { setCurrentOnboardingData } = useDispatch( nfdOnboardingStore ); const [ isInputDisabled, setIsInputDisabled ] = useState( true ); const [ versionName, setVersionName ] = useState( activeHomepage?.title ); const isLargeViewport = useViewportMatch( 'medium' ); @@ -27,21 +42,40 @@ const StepNavigationCenter = () => { setIsInputDisabled( false ); }; + const handleVersionRename = ( e ) => { + setVersionName( e.target.value ); + }; + + const handleRenameOnBlur = ( newVersionName ) => { + activeHomepage.title = newVersionName; + currentData.sitegen.homepages.data[ activeHomepage.slug ] = + activeHomepage; + setCurrentOnboardingData( currentData ); + }; + /** * Version step Navigation button. * - * @return {WPComponent} VersionButton Component + * @return {Object} VersionButton Component */ const VersionDropDownMenuItems = () => { return ( { ! isLargeViewport && ( <> - {} }> + { + handleRegenerate(); + } } + > { __( 'Regenrate', 'wp-module-onboarding' ) } - {} }> + { + handleCustomize(); + } } + > { __( 'Customize', 'wp-module-onboarding' ) } @@ -51,7 +85,7 @@ const StepNavigationCenter = () => { { __( 'Rename', 'wp-module-onboarding' ) } - {} }> + { __( 'View All', 'wp-module-onboarding' ) } @@ -63,7 +97,7 @@ const StepNavigationCenter = () => { * * @param root0 * @param root0.isInputDisabled - * @return {WPComponent} VersionButton Component + * @return {Object} VersionButton Component */ const VersionButton = () => { @@ -77,11 +111,28 @@ const StepNavigationCenter = () => { aria-label="Regenerate" className="navigation-buttons-editor" > - +
{ + handleFavorite(); + } } + onClick={ () => { + handleFavorite(); + } } + > + { activeHomepage?.isFavourited ? ( + + ) : ( + + ) } +
{ - const { previousStep, showErrorDialog } = useSelect( ( select ) => { - return { - previousStep: select( nfdOnboardingStore ).getPreviousStep(), - showErrorDialog: select( nfdOnboardingStore ).getShowErrorDialog(), - }; - }, [] ); - - const isLargeViewport = useViewportMatch( 'medium' ); - - /** - * Back step Navigation button. - * - * @param {*} param0 - * - * @return {WPComponent} Back Component - */ - const Back = ( { path } ) => { - const { setNavErrorContinuePath } = useDispatch( nfdOnboardingStore ); - const navigate = useNavigate(); - const navigateBack = () => { - if ( showErrorDialog !== false ) { - setNavErrorContinuePath( path ); - } else { - navigate( path, { state: { origin: 'header' } } ); - } - }; - return ( -
{ - if ( event.key === 'Enter' ) { - navigateBack(); - } - } } - aria-label="Back" - className="navigation-buttons-editor" - > - - { __( 'Back', 'wp-module-onboarding' ) } -
- ); - }; - - const Regenerate = () => { - const regenerate = () => { - // alert( 'regenerate' ); - }; - return ( -
{ - if ( event.key === 'Enter' ) { - regenerate(); - } - } } - aria-label="Regenerate" - className="navigation-buttons-editor" - > - - { __( 'Regenerate', 'wp-module-onboarding' ) } -
- ); - }; - - return ( -
- - { isLargeViewport ? : '' } -
- ); -}; - -export default StepNavigationLeft; diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/Header/step-navigation-right.js b/src/OnboardingSPA/steps/SiteGen/Editor/Header/step-navigation-right.js deleted file mode 100644 index 3163d7656..000000000 --- a/src/OnboardingSPA/steps/SiteGen/Editor/Header/step-navigation-right.js +++ /dev/null @@ -1,86 +0,0 @@ -import { useSelect } from '@wordpress/data'; -import { Icon, chevronRight, settings } from '@wordpress/icons'; -import { __ } from '@wordpress/i18n'; -import { useViewportMatch } from '@wordpress/compose'; - -import { store as nfdOnboardingStore } from '../../../../store'; - -/** - * Step buttons presented in Header. - * - * @return {WPComponent} StepNavigation Component - */ -const StepNavigationRight = () => { - // eslint-disable-next-line no-unused-vars - const { previousStep, showErrorDialog } = useSelect( ( select ) => { - return { - previousStep: select( nfdOnboardingStore ).getPreviousStep(), - showErrorDialog: select( nfdOnboardingStore ).getShowErrorDialog(), - }; - }, [] ); - - const isLargeViewport = useViewportMatch( 'medium' ); - - /** - * Back step Navigation button. - * - * - * @return {WPComponent} Back Component - */ - const Customize = () => { - const customize = () => { - // alert('customize'); - }; - return ( -
{ - if ( event.key === 'Enter' ) { - customize(); - } - } } - aria-label="Customize" - className="navigation-buttons-editor" - > - - { __( 'Customize', 'wp-module-onboarding' ) } -
- ); - }; - - const Save = () => { - const save = () => { - // alert( 'save' ); - }; - return ( -
{ - if ( event.key === 'Enter' ) { - save(); - } - } } - aria-label="Save" - className="navigation-buttons-editor" - > - { isLargeViewport - ? __( 'Save & Continue', 'wp-module-onboarding' ) - : __( 'Next', 'wp-module-onboarding' ) } - -
- ); - }; - - return ( -
- { isLargeViewport ? : '' } - -
- ); -}; - -export default StepNavigationRight; diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/Header/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Editor/Header/stylesheet.scss index fc6a8b8e9..51477ef3e 100644 --- a/src/OnboardingSPA/steps/SiteGen/Editor/Header/stylesheet.scss +++ b/src/OnboardingSPA/steps/SiteGen/Editor/Header/stylesheet.scss @@ -136,6 +136,18 @@ padding: 0 12px 0 12px; height: 36px; border-radius: 8px; + gap: 5px; + + &__spinner { + border-radius: 50%; + width: 6em; + height: 6em; + font-size: 3px; + border-top: 1.1em solid rgba(var(--nfd-onboarding-secondary-rgb), 0.2); + border-right: 1.1em solid rgba(var(--nfd-onboarding-secondary-rgb), 0.2); + border-bottom: 1.1em solid rgba(var(--nfd-onboarding-secondary-rgb), 0.2); + border-left: 1.1em solid var(--nfd-onboarding-secondary); + } } } } diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/index.js b/src/OnboardingSPA/steps/SiteGen/Editor/index.js index 309633f33..fef748a00 100644 --- a/src/OnboardingSPA/steps/SiteGen/Editor/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Editor/index.js @@ -52,7 +52,7 @@ const StepSiteGenEditor = () => { const buildPreview = () => { const newPreviewSettings = cloneDeep( globalStyles[ 0 ] ); newPreviewSettings.settings.color.palette = - activeHomepage.color.palette; + activeHomepage?.color?.palette; if ( activeHomepage && activeHomepage.styles ) { if ( diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Editor/stylesheet.scss index e4c544fc9..96db34224 100644 --- a/src/OnboardingSPA/steps/SiteGen/Editor/stylesheet.scss +++ b/src/OnboardingSPA/steps/SiteGen/Editor/stylesheet.scss @@ -15,6 +15,10 @@ color: var(--nfd-onboarding-header-contrast); background-color: var(--nfd-onboarding-header-base); width: 150px; + + @media (max-width: #{ ($break-small) }) { + width: 80px; + } } } diff --git a/src/OnboardingSPA/store/selectors.js b/src/OnboardingSPA/store/selectors.js index 697e2d382..40ca9eea0 100644 --- a/src/OnboardingSPA/store/selectors.js +++ b/src/OnboardingSPA/store/selectors.js @@ -449,7 +449,7 @@ export const getActiveHomepage = ( state ) => { }; /** - * Gets actove homepage + * Gets all homepage * * @param {*} state * @return {Object} data