Skip to content

Commit

Permalink
Merge pull request #422 from newfold-labs/PRESS2-1562-sitegen-editor-…
Browse files Browse the repository at this point in the history 
…step-regenerate

Press2 1562 sitegen editor step regenerate
  • Loading branch information
@arunshenoy99
arunshenoy99 authored Jan 18, 2024
2 parents 315cc92 + 958a124 commit d0c03b7
Show file tree
Hide file tree
Showing 14 changed files with 202 additions and 320 deletions.
Binary file removed build/1.12.0/images/ai_bg_low.d8292556.png
View file
Binary file not shown.
Binary file removed build/1.12.0/images/toggle-light-mode.8d7afd07.png
View file
Binary file not shown.
1 change: 0 additions & 1 deletion src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,6 @@ const SiteGenHeader = () => {
) }
</>
</Fill>

<Fill name={ `${ HEADER_SITEGEN }/${ HEADER_START }` }>
<>{ isHeaderNavigationEnabled && <StepNavigation /> }</>
</Fill>
Expand Down
12 changes: 5 additions & 7 deletions src/OnboardingSPA/components/Header/stylesheet.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

Expand Down
33 changes: 22 additions & 11 deletions src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand Down Expand Up @@ -155,7 +166,7 @@ const SitegenEditorPatternsSidebar = () => {
<div className="nfd-onboarding-sidebar--sitegen-editor-patterns__header__tab-panel__versions-tab__preview-container__context">
<div
className={ `nfd-onboarding-sidebar--sitegen-editor-patterns__header__tab-panel__versions-tab__preview-container__context__icon ${
data.favorite &&
data.isFavourited &&
'nfd-onboarding-sidebar--sitegen-editor-patterns__header__tab-panel__versions-tab__preview-container__context__icon__fill'
}` }
role="button"
Expand Down Expand Up @@ -262,7 +273,7 @@ const SitegenEditorPatternsSidebar = () => {
<div className="nfd-onboarding-sidebar--sitegen-editor-patterns__header__tab-panel__versions-tab__preview-container__context">
<div
className={ `nfd-onboarding-sidebar--sitegen-editor-patterns__header__tab-panel__versions-tab__preview-container__context__icon ${
data.favorite &&
data.isFavourited &&
'nfd-onboarding-sidebar--sitegen-editor-patterns__header__tab-panel__versions-tab__preview-container__context__icon__fill'
}` }
role="button"
Expand Down Expand Up @@ -317,7 +328,7 @@ const SitegenEditorPatternsSidebar = () => {
( homepage ) => {
const data =
homepages[ homepage ];
if ( ! data.favorite ) {
if ( ! data.isFavourited ) {
return false;
}
const newPreviewSettings =
Expand Down
12 changes: 8 additions & 4 deletions src/OnboardingSPA/steps/SiteGen/Editor/Header/TextInput/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import { useRef, useEffect } from '@wordpress/element';
const TextInputVersion = ( {
isInputDisabled,
versionName,
setVersionName,
handleVersionRename,
handleRenameOnBlur,
} ) => {
const inputRef = useRef( null );

Expand All @@ -13,8 +14,10 @@ const TextInputVersion = ( {
}
}, [ isInputDisabled ] );

const handleTextChange = ( e ) => {
setVersionName( e.target.value );
const onInputBlurHandler = () => {
if ( handleRenameOnBlur ) {
handleRenameOnBlur( inputRef.current.value );
}
};

return (
Expand All @@ -24,7 +27,8 @@ const TextInputVersion = ( {
disabled={ isInputDisabled }
type="text"
value={ versionName }
onChange={ handleTextChange }
onChange={ handleVersionRename }
onBlur={ onInputBlurHandler }
/>
);
};
Expand Down
185 changes: 84 additions & 101 deletions src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { __ } from '@wordpress/i18n';
import { Fill, Dropdown } from '@wordpress/components';
import { Fill } from '@wordpress/components';
import {
HEADER_CENTER,
HEADER_END,
Expand All @@ -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,
Expand All @@ -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 () => {
Expand Down Expand Up @@ -90,111 +120,59 @@ 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 ${
isSaving &&
'nfd-onboarding-header--sitegen__editor__start__regenerate__disabled'
}` }
role="button"
tabIndex={ 0 }
onClick={ () => handleRegenerate() }
onKeyDown={ () => handleRegenerate() }
>
<div
className={ `nfd-onboarding-header--sitegen__editor__start__regenerate__icon` }
></div>
{ isLargeViewport && (
<div
className={ `nfd-onboarding-header--sitegen__editor__start__regenerate__text` }
className={ `nfd-onboarding-header--sitegen__editor__start__regenerate ${
isSaving &&
'nfd-onboarding-header--sitegen__editor__start__regenerate__disabled'
}` }
role="button"
tabIndex={ 0 }
onClick={ () => handleRegenerate() }
onKeyDown={ () => handleRegenerate() }
>
{ __( 'Regenerate', 'wp-module-onboarding' ) }
<div
className={ `nfd-onboarding-header--sitegen__editor__start__regenerate__icon` }
></div>
<div
className={ `nfd-onboarding-header--sitegen__editor__start__regenerate__text` }
>
{ __( 'Regenerate', 'wp-module-onboarding' ) }
</div>
</div>
</div>
) }
</div>
</Fill>
<Fill name={ `${ HEADER_SITEGEN }/${ HEADER_CENTER }` }>
{ homepage && (
<div className="nfd-onboarding-header--sitegen__editor__center">
<div className="nfd-onboarding-header--sitegen__editor__center__icon"></div>
<Dropdown
className="nfd-onboarding-header--sitegen__editor__center__dropdown"
renderToggle={ ( { onToggle } ) => {
return (
<>
<div
className={ `nfd-onboarding-header--sitegen__editor__center__dropdown__favorite-icon ${
homepage.favorite &&
'nfd-onboarding-header--sitegen__editor__center__dropdown__favorite-icon__fill'
}` }
role="button"
tabIndex={ 0 }
onKeyDown={ handleFavorite }
onClick={ handleFavorite }
></div>
<div
className="nfd-onboarding-header--sitegen__editor__center__dropdown__info"
role="button"
tabIndex={ 0 }
onKeyDown={ onToggle }
onClick={ onToggle }
>
<p className="nfd-onboarding-header--sitegen__editor__center__dropdown__info__text">
{ homepage.title }
</p>
<Icon
className="nfd-onboarding-header--sitegen__editor__center__dropdown__info__down-icon"
icon={ chevronDown }
/>
</div>
</>
);
} }
renderContent={ () => (
<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',
'wp-module-onboarding'
) }
</p>
<div
className="nfd-onboarding-header--sitegen__editor__center__dropdown__content__view-all"
onClick={ handleViewAll }
role="button"
tabIndex={ 0 }
onKeyDown={ handleViewAll }
>
{ __(
'View All',
'wp-module-onboarding'
) }
</div>
</div>
) }
<StepNavigationCenter
handleFavorite={ handleFavorite }
handleViewAll={ handleViewAll }
handleCustomize={ handleCustomize }
handleRegenerate={ handleRegenerate }
/>
</div>
) }
</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 ${
isSaving &&
'nfd-onboarding-header--sitegen__editor__end__customize-button__disabled'
}` }
onClick={ handleCustomize }
onKeyDown={ handleCustomize }
role="presentation"
>
<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' ) }
{ isLargeViewport && (
<div
className={ `nfd-onboarding-header--sitegen__editor__end__customize-button ${
isSaving &&
'nfd-onboarding-header--sitegen__editor__end__customize-button__disabled'
}` }
onClick={ handleCustomize }
onKeyDown={ handleCustomize }
role="presentation"
>
<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' ) }
</div>
</div>
</div>
) }
<div className="nfd-onboarding-header--sitegen__editor__end__save-button">
<div
className="nfd-onboarding-header--sitegen__editor__end__save-button__text"
Expand All @@ -203,7 +181,12 @@ const StepSiteGenEditorHeader = () => {
tabIndex={ 0 }
onKeyDown={ saveAndContinue }
>
{ __( 'Save & Continue', 'wp-module-onboarding' ) }
{ isLargeViewport
? __(
'Save & Continue',
'wp-module-onboarding'
)
: __( 'Next', 'wp-module-onboarding' ) }
</div>
{ isSaving ? (
<Spinner
Expand Down
Loading

0 comments on commit d0c03b7

Please sign in to comment.