-
+ >
- { data.title }
-
-
- { data.desc }
+
);
} );
diff --git a/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss b/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss
index 65eeab356..b12d46074 100644
--- a/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss
+++ b/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss
@@ -18,43 +18,49 @@ $background-color: var(--nfd-onboarding-card-background);
&__title {
color: var(--nfd-onboarding-primary);
margin: 16px;
- line-height: 2;
+ line-height: 1.5;
font-size: 18px;
text-align: center;
margin-bottom: 30px;
- letter-spacing: 1.5px;
+ font-weight: 400;
+ letter-spacing: 1.5;
}
&__data {
margin: 12px;
&__option {
- display: flex;
- cursor: pointer;
- margin: 16px 4px;
- align-items: center;
- border-radius: 4px 4px 0 0;
- padding: 16px 12px 16px 12px;
- justify-content: space-between;
- transition: background-color 400ms ease-in-out;
- &:not(:last-child) {
- border-bottom: 0.5px solid rgba(var(--nfd-onboarding-primary-rgb), 0.3);
+ &__wrapper {
+ display: flex;
+ cursor: pointer;
+ margin: 16px 4px;
+ align-items: center;
+ border-radius: 8px;
+ padding: 16px 12px 16px 12px;
+ justify-content: space-between;
+ transition: background-color 400ms ease-in-out;
+
+ &:hover {
+ background-color: var(--nfd-onboarding-hover);
+ }
}
- &:hover {
- background-color: var(--nfd-onboarding-hover);
+ &:not(:last-child) {
+ border-bottom: 0.5px solid rgba(var(--nfd-onboarding-primary-rgb), 0.3);
}
&__left_top {
color: var(--nfd-onboarding-primary);
- font-size: 16px;
+ font-size: 15px;
font-weight: 500;
- padding-bottom: 12px;
+ margin-bottom: 7px;
+ line-height: 24px;
}
&__left_bottom {
- color: var(--nfd-onboarding-primary);
+ color: rgba(var(--nfd-onboarding-primary-rgb), 0.7);
+
font-size: 14px;
font-weight: 300;
}
@@ -76,6 +82,7 @@ $background-color: var(--nfd-onboarding-card-background);
margin: 0 20px 6px 20px;
transition: color 200ms ease-in-out;
color: rgba(var(--nfd-onboarding-primary-rgb), 0.8);
+ font-weight: 500;
&:hover {
color: var(--nfd-onboarding-primary);
diff --git a/src/OnboardingSPA/components/ColorPickerButton/index.js b/src/OnboardingSPA/components/ColorPickerButton/index.js
index 91735e2ca..99d4b526e 100644
--- a/src/OnboardingSPA/components/ColorPickerButton/index.js
+++ b/src/OnboardingSPA/components/ColorPickerButton/index.js
@@ -32,9 +32,7 @@ const ColorPickerButton = ( {
style={ {
backgroundColor: `${ color }`,
} }
- >
- { isColorSelected ? <>✓ : null }
-
+
-
+
+
+ { data.title }
+
+
+ { data.desc }
+
{ name }
);
diff --git a/src/OnboardingSPA/components/Drawer/stylesheet.scss b/src/OnboardingSPA/components/Drawer/stylesheet.scss
index 3ea186ceb..85e73b5cb 100644
--- a/src/OnboardingSPA/components/Drawer/stylesheet.scss
+++ b/src/OnboardingSPA/components/Drawer/stylesheet.scss
@@ -479,10 +479,6 @@
align-items: center;
justify-content: center;
border: 1px solid rgba(0, 0, 0, 0.3);
-
- &--selected-border {
- box-shadow: 0 0 5px 3px rgba(var(--nfd-onboarding-highlighted--rgb), 0.5);
- }
}
}
}
diff --git a/src/OnboardingSPA/components/Footer/components/SiteGenFooter/index.js b/src/OnboardingSPA/components/Footer/components/SiteGenFooter/index.js
index 1d74c033b..9bfea05f9 100644
--- a/src/OnboardingSPA/components/Footer/components/SiteGenFooter/index.js
+++ b/src/OnboardingSPA/components/Footer/components/SiteGenFooter/index.js
@@ -15,13 +15,16 @@ import { stepSiteGenEditor } from '../../.././../steps/SiteGen/Editor/step';
const SiteGenFooter = () => {
const isLargeViewport = useViewportMatch( 'small' );
- const { footerNavEnabled, currentStep } = useSelect( ( select ) => {
- return {
- footerNavEnabled:
- select( nfdOnboardingStore ).getFooterNavEnabled(),
- currentStep: select( nfdOnboardingStore ).getCurrentStep(),
- };
- } );
+ const { hideFooterNav, isFooterNavAllowed, currentStep } = useSelect(
+ ( select ) => {
+ return {
+ hideFooterNav: select( nfdOnboardingStore ).getHideFooterNav(),
+ isFooterNavAllowed:
+ select( nfdOnboardingStore ).getIsFooterNavAllowed(),
+ currentStep: select( nfdOnboardingStore ).getCurrentStep(),
+ };
+ }
+ );
const isEditorStep = currentStep === stepSiteGenEditor;
return (
@@ -29,11 +32,11 @@ const SiteGenFooter = () => {
@@ -84,9 +87,43 @@ const BlockPreview = ( {
);
} );
+ const SkeletonLivePreviewSitegen = memo( () => {
+ return (
+
+
+ );
+ } );
+
+ const getSkeleton = () => {
+ switch ( skeletonType ) {
+ case 'sitegen':
+ return
+
+ +
+ { skeletonShouldWait + ? __( + 'Regenerating Site', + 'wp-module-onboarding' + ) + : __( + 'Generating Site', + 'wp-module-onboarding' + ) } +
+ +
+
+
+
- { loading && {
- if ( styles ) {
- return [
- ...styles,
- {
- css: 'body{height:auto;overflow:hidden;border:none;padding:0;}',
- __unstableType: 'presets',
- },
- ...additionalStyles,
- ];
- }
-
- return styles;
- }, [ styles, additionalStyles ] );
-
- // Initialize on render instead of module top level, to avoid circular dependency issues.
- MemoizedBlockList = MemoizedBlockList || pure( BlockList );
-
- const scale = containerWidth / viewportWidth;
- const aspectRatio = contentHeight
- ? containerWidth / ( contentHeight * scale )
- : 0;
- return (
- MAX_HEIGHT ? MAX_HEIGHT * scale : undefined,
- minHeight,
- } }
- >
-
-
- );
-}
-
-export default function AutoBlockPreview( props ) {
- const [ containerResizeListener, { width: containerWidth } ] =
- useResizeObserver();
-
- return (
- <>
-
- { containerResizeListener }
-
-
- { containerWidth && (
-
-
- );
-}
diff --git a/src/OnboardingSPA/components/LivePreview/BlockPreviewSiteGen/index.js b/src/OnboardingSPA/components/LivePreview/BlockPreviewSiteGen/index.js
deleted file mode 100644
index 5e481bb8a..000000000
--- a/src/OnboardingSPA/components/LivePreview/BlockPreviewSiteGen/index.js
+++ /dev/null
@@ -1,115 +0,0 @@
-import { useSelect } from '@wordpress/data';
-import { BlockEditorProvider } from '@wordpress/block-editor';
-import { parse } from '@wordpress/blocks';
-import { useEffect, useState, memo } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
-import AutoHeightBlockPreview from './auto';
-import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
-import { store as nfdOnboardingStore } from '../../../store';
-
-const BlockPreviewSiteGen = ( {
- blockGrammer,
- viewportWidth = 1300,
- styling = 'large',
- setIsLoadingParent = false,
- previewSettings = false,
- skeletonLoadingTime = 2500,
- isRegenerating = { isRegenerating },
-} ) => {
- const [ blocks, setBlocks ] = useState();
- const [ settings, setSettings ] = useState();
- const [ loading, setIsLoading ] = useState( true );
-
- useEffect( () => {
- if ( skeletonLoadingTime ) {
- const timer = setTimeout( () => {
- setIsLoading( false );
- if ( setIsLoadingParent ) {
- setIsLoadingParent( false );
- }
- }, skeletonLoadingTime );
- return () => clearTimeout( timer );
- }
- setIsLoading( false );
- if ( setIsLoadingParent ) {
- setIsLoadingParent( false );
- }
- }, [ skeletonLoadingTime ] );
-
- const { currentData, storedPreviewSettings } = useSelect( ( select ) => {
- return {
- currentData:
- select( nfdOnboardingStore ).getCurrentOnboardingData(),
- storedPreviewSettings:
- select( nfdOnboardingStore ).getPreviewSettings(),
- };
- }, [] );
-
- useEffect( () => {
- if ( previewSettings ) {
- setSettings(
- // eslint-disable-next-line react-hooks/rules-of-hooks
- useGlobalStylesOutput( previewSettings, storedPreviewSettings )
- );
- } else {
- setSettings( storedPreviewSettings );
- }
- }, [] );
-
- useEffect( () => {
- if ( blockGrammer ) {
- setBlocks( parse( blockGrammer ) );
- }
- }, [ blockGrammer ] );
-
- useEffect( () => {
- if ( ! previewSettings ) {
- setSettings( storedPreviewSettings );
- }
- }, [ storedPreviewSettings, currentData ] );
-
- const SkeletonLivePreview = memo( () => {
- return (
-
-
- );
- } );
-
- return (
-
-
- -
- { isRegenerating - ? __( - 'Regenerating Site', - 'wp-module-onboarding' - ) - : __( - 'Generating Site', - 'wp-module-onboarding' - ) } -
- -
-
-
-
- { loading &&
-
- ) }
-
- );
-};
-
-export default memo( BlockPreviewSiteGen );
diff --git a/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/index.js b/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/index.js
index 4ea6bd485..1816c6157 100644
--- a/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/index.js
+++ b/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/index.js
@@ -1,101 +1,79 @@
/* eslint-disable jsx-a11y/no-static-element-interactions */
import { search, Icon, reusableBlock } from '@wordpress/icons';
import { useState } from '@wordpress/element';
-import { useNavigate } from 'react-router-dom';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { BlockPreviewSiteGen } from '..';
+import { LivePreview } from '..';
import Button from '../../../components/Button';
-import { store as nfdOnboardingStore } from '../../../store';
import { ReactComponent as FavouriteIconStroked } from '../../../static/icons/sitegen/heart-stroked.svg';
import { ReactComponent as FavouriteIconFilled } from '../../../static/icons/sitegen/heart-filled.svg';
import { __ } from '@wordpress/i18n';
const SiteGenPreviewSelectableCard = ( {
className = 'live-preview-sitegen--selectable-card',
- blockGrammer,
+ blockGrammar,
viewportWidth = 1500,
styling = 'large',
previewSettings,
overlay = false,
- onClick = false,
- onRegenerateClick = false,
skeletonLoadingTime = 2500,
- designObject,
+ slug,
+ title,
+ isFavorite,
+ palette,
handleFavorite,
handlePreview,
+ handleRegenerate,
isRegenerating,
} ) => {
- const { setActiveHomepage } = useDispatch( nfdOnboardingStore );
const [ loadingParent, setIsLoadingParent ] = useState( true );
- const navigate = useNavigate();
- const { nextStep } = useSelect( ( select ) => {
- return {
- nextStep: select( nfdOnboardingStore ).getNextStep(),
- };
- } );
+ const onPreview = () => {
+ if ( typeof handlePreview === 'function' ) {
+ return handlePreview( slug );
+ }
+ };
- const onPreviewVersionClick = () => {
- setActiveHomepage( designObject );
- navigate( nextStep.path );
+ const onRegenerate = () => {
+ if ( typeof handleRegenerate === 'function' ) {
+ return handleRegenerate( slug, palette, isFavorite );
+ }
};
- const handleRegenerate = () => {
- onRegenerateClick(
- designObject?.slug,
- designObject?.color,
- designObject?.isFavourited
- );
+
+ const onFavorite = () => {
+ if ( typeof handleFavorite === 'function' ) {
+ return handleFavorite( slug );
+ }
};
return (
- {
- if ( ! loadingParent && typeof onClick === 'function' ) {
- onClick();
- }
- } }
- onKeyDown={ () => {
- if ( ! loadingParent && typeof onClick === 'function' ) {
- onClick();
- }
- } }
- >
+
diff --git a/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss
index 95328801a..e7ffaf1b2 100644
--- a/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss
+++ b/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss
@@ -58,6 +58,7 @@
}
&__note {
+ margin: 24px;
display: flex;
flex-direction: row;
justify-content: center;
@@ -70,7 +71,7 @@
line-height: 22px;
text-align: center;
border-radius: 12px;
- margin-bottom: 60px;
+ margin-bottom: 70px;
}
@keyframes heartBeat {
@@ -79,36 +80,27 @@
100% {
fill: transparent;
transform: scale(1);
- transform-origin: center;
- }
-
- 33%,
- 66% {
- fill: var(--nfd-onboarding-heart-icon-fill);
- transform: scale(1.1);
- transform-origin: center;
}
67% {
fill: var(--nfd-onboarding-heart-icon-fill);
- transform: scale(1.3);
- transform-origin: center;
+ transform: scale(1.2);
}
- 87% {
- fill: var(--nfd-onboarding-heart-icon-fill);
- transform: scale(1.1);
- transform-origin: center;
- }
}
.heart {
- stroke: var(--nfd-onboarding-heart-icon-stroke);
stroke-width: 2px;
+ stroke: var(--nfd-onboarding-heart-icon-stroke);
}
.heart path {
- animation: heartBeat 4s infinite;
+ transform-origin: center;
+ animation: heartBeat 2000ms ease-in-out 0s infinite normal;
+
+ @media (prefers-reduced-motion) {
+ animation: none !important;
+ }
}
}
@@ -157,7 +149,11 @@
background: var(--nfd-onboarding-progress-bar-fill);
height: 100%;
transition: width 0.3s ease;
- animation: infiniteProgress 1.5s ease-in-out infinite;
+ animation: infiniteProgress 1500ms ease-in-out infinite;
+
+ @media (prefers-reduced-motion) {
+ animation: none !important;
+ }
}
}
}
diff --git a/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js b/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js
index 6d79af670..660d9bb91 100644
--- a/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js
@@ -24,25 +24,27 @@ const SiteGenSiteDetails = () => {
} );
const {
- setFooterNavEnabled,
+ setIsFooterNavAllowed,
setIsHeaderEnabled,
setSidebarActiveView,
setHeaderActiveView,
setDrawerActiveView,
+ setHideFooterNav,
setCurrentOnboardingData,
} = useDispatch( nfdOnboardingStore );
useEffect( () => {
+ setHideFooterNav( false );
setIsHeaderEnabled( true );
setSidebarActiveView( false );
setHeaderActiveView( HEADER_SITEGEN );
setDrawerActiveView( false );
- setFooterNavEnabled( false );
if ( currentData.sitegen.siteDetails?.prompt !== '' ) {
setIsValidInput( true );
- setFooterNavEnabled( isValidInput );
+ setIsFooterNavAllowed( true );
return setCustomerInput( currentData.sitegen.siteDetails.prompt );
}
+ setIsFooterNavAllowed( false );
}, [] );
useEffect( () => {
@@ -51,13 +53,11 @@ const SiteGenSiteDetails = () => {
customerInput !== undefined &&
customerInput !== currentData.sitegen.siteDetails.prompt
) {
- setFooterNavEnabled( isValidInput );
currentData.sitegen.siteDetails.prompt = customerInput?.trim();
currentData.sitegen.siteDetails.mode = 'simple';
setCurrentOnboardingData( currentData );
- } else {
- setFooterNavEnabled( false );
}
+ setIsFooterNavAllowed( isValidInput );
}, [ customerInput ] );
return (
diff --git a/src/OnboardingSPA/steps/SiteGen/SiteDetails/walkthrough/index.js b/src/OnboardingSPA/steps/SiteGen/SiteDetails/walkthrough/index.js
index f1d9719a3..c3111e4de 100644
--- a/src/OnboardingSPA/steps/SiteGen/SiteDetails/walkthrough/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/SiteDetails/walkthrough/index.js
@@ -23,7 +23,7 @@ const SiteGenSiteDetailsWalkthrough = ( { siteDetailsmeta } ) => {
};
} );
- const { setFooterNavEnabled, setCurrentOnboardingData } =
+ const { setIsFooterNavAllowed, setCurrentOnboardingData } =
useDispatch( nfdOnboardingStore );
useEffect( () => {
@@ -39,11 +39,11 @@ const SiteGenSiteDetailsWalkthrough = ( { siteDetailsmeta } ) => {
);
}
- setFooterNavEnabled( ! isdisabledNextButton() );
+ setIsFooterNavAllowed( ! isdisabledNextButton() );
}, [] );
useEffect( () => {
- setFooterNavEnabled( ! isdisabledNextButton() );
+ setIsFooterNavAllowed( ! isdisabledNextButton() );
}, [ customerInputUnique, customerInputType ] );
const handlePromptChange = ( field, e ) => {
@@ -58,7 +58,7 @@ const SiteGenSiteDetailsWalkthrough = ( { siteDetailsmeta } ) => {
};
setters[ field ]( e.target.value );
- setFooterNavEnabled( ! isdisabledNextButton() );
+ setIsFooterNavAllowed( ! isdisabledNextButton() );
};
const concatenatePrompt = () => {
diff --git a/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js b/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js
index 50f9161b3..61971f4ea 100644
--- a/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js
@@ -30,11 +30,12 @@ const SiteGenSiteLogo = () => {
}, [] );
const {
- setFooterNavEnabled,
+ setIsFooterNavAllowed,
setIsHeaderEnabled,
setSidebarActiveView,
setHeaderActiveView,
setDrawerActiveView,
+ setHideFooterNav,
setCurrentOnboardingData,
} = useDispatch( nfdOnboardingStore );
@@ -48,10 +49,11 @@ const SiteGenSiteLogo = () => {
};
setCurrentOnboardingData( currentDataCopy );
setSiteLogo( undefined );
- setFooterNavEnabled( false );
+ setIsFooterNavAllowed( false );
};
useEffect( () => {
+ setHideFooterNav( false );
setIsHeaderEnabled( true );
setSidebarActiveView( false );
setHeaderActiveView( HEADER_SITEGEN );
@@ -59,7 +61,7 @@ const SiteGenSiteLogo = () => {
if ( currentData.data.siteLogo?.id !== 0 ) {
return setSiteLogo( currentData.data.siteLogo );
}
- setFooterNavEnabled( false );
+ setIsFooterNavAllowed( false );
getEditedEntityRecord( 'root', 'site' );
}, [] );
@@ -70,7 +72,7 @@ const SiteGenSiteLogo = () => {
currentDataCopy.data.siteLogo.fileName = siteLogoNew.fileName;
currentDataCopy.data.siteLogo.fileSize = siteLogoNew.fileSize;
setCurrentOnboardingData( currentDataCopy );
- setFooterNavEnabled( siteLogoNew.id !== 0 );
+ setIsFooterNavAllowed( siteLogoNew.id !== 0 );
editEntityRecord( 'root', 'site', undefined, {
site_logo: siteLogoNew.id,
} );
diff --git a/src/OnboardingSPA/steps/SiteGen/SiteLogo/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/SiteLogo/stylesheet.scss
index 47ec0a713..9812ad2cb 100644
--- a/src/OnboardingSPA/steps/SiteGen/SiteLogo/stylesheet.scss
+++ b/src/OnboardingSPA/steps/SiteGen/SiteLogo/stylesheet.scss
@@ -18,10 +18,10 @@
&__buttons {
width: 99%;
display: flex;
- padding: 16px;
flex-direction: row;
align-items: center;
justify-content: flex-end;
+ margin-top: 20px;
&__skip {
font-size: clamp(0.6rem, 0.755rem + 0.227vw, 1.3rem);
diff --git a/src/OnboardingSPA/steps/SiteGen/SocialMedia/index.js b/src/OnboardingSPA/steps/SiteGen/SocialMedia/index.js
index adb558e6d..c74b0a5db 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 { memo, useEffect } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { memo, useEffect, useState } from '@wordpress/element';
import { useViewportMatch } from '@wordpress/compose';
import getContents from './contents';
@@ -9,9 +9,14 @@ import { store as nfdOnboardingStore } from '../../../store';
import CommonLayout from '../../../components/Layouts/Common';
import AIHeading from '../../../components/Heading/AIHeading';
import NextButtonSiteGen from '../../../components/Button/NextButtonSiteGen';
+import { FacebookConnectButton } from '@newfold-labs/wp-module-facebook';
+import { useNavigate } from 'react-router-dom';
const SiteGenSiteSocialMedia = () => {
const isLargeViewport = useViewportMatch( 'small' );
+ const navigate = useNavigate();
+ const [ connected, setConnected ] = useState( false );
+ const [ interacted, setInteracted ] = useState( false );
const {
setIsHeaderEnabled,
@@ -27,6 +32,22 @@ const SiteGenSiteSocialMedia = () => {
setDrawerActiveView( false );
} );
+ const { nextStep } = useSelect( ( select ) => {
+ return {
+ nextStep: select( nfdOnboardingStore ).getNextStep(),
+ };
+ } );
+
+ const handleConnect = () => {
+ setConnected( true );
+ };
+
+ useEffect( () => {
+ if ( interacted && connected ) {
+ navigate( nextStep.path );
+ }
+ }, [ interacted, connected ] );
+
const content = getContents();
return (
{
-
- { ! isLargeViewport && (
- <>
-
-
-
- ) }
-
-
-
-
- );
- };
-
- /**
- * Version step Navigation button.
- *
- * @param root0
- * @param root0.isInputDisabled
- * @return {Object} VersionButton Component
- */
-
- const VersionButton = () => {
- return (
- (
- {
/>
);
};
+
return (
);
diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Editor/stylesheet.scss
index 96db34224..9721852bf 100644
--- a/src/OnboardingSPA/steps/SiteGen/Editor/stylesheet.scss
+++ b/src/OnboardingSPA/steps/SiteGen/Editor/stylesheet.scss
@@ -30,6 +30,13 @@
.nfd-onboarding-header__version_dropdown-menu {
width: 240px;
+ &__customize-button__icon {
+ background-image: var(--sitegen-settings-dark);
+ height: 16px;
+ width: 16px;
+ margin-right: 8px;
+ }
+
.components-menu-item__button {
.components-menu-item__item {
diff --git a/src/OnboardingSPA/steps/SiteGen/Experience/index.js b/src/OnboardingSPA/steps/SiteGen/Experience/index.js
index 9e8700886..c186d791f 100644
--- a/src/OnboardingSPA/steps/SiteGen/Experience/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/Experience/index.js
@@ -29,10 +29,12 @@ const SiteGenExperience = () => {
setSidebarActiveView,
setHeaderActiveView,
setDrawerActiveView,
+ setHideFooterNav,
setCurrentOnboardingData,
} = useDispatch( nfdOnboardingStore );
useEffect( () => {
+ setHideFooterNav( true );
setIsHeaderEnabled( true );
setSidebarActiveView( false );
setHeaderActiveView( HEADER_SITEGEN );
diff --git a/src/OnboardingSPA/steps/SiteGen/Preview/contents.js b/src/OnboardingSPA/steps/SiteGen/Preview/contents.js
index c6bc4b107..44728ff31 100644
--- a/src/OnboardingSPA/steps/SiteGen/Preview/contents.js
+++ b/src/OnboardingSPA/steps/SiteGen/Preview/contents.js
@@ -4,7 +4,7 @@ const getContents = () => {
return {
heading: __( 'Presto, here are 3 versions', 'wp-module-onboarding' ),
subheading: __(
- "We've created 3 unique website designs for you to start with, preview, click around or start over.",
+ "We've created 3 unique website designs for you to start with, preview click around or start over.",
'wp-module-onboarding'
),
favouriteNote: __(
diff --git a/src/OnboardingSPA/steps/SiteGen/Preview/index.js b/src/OnboardingSPA/steps/SiteGen/Preview/index.js
index dcf59ea29..185cff91a 100644
--- a/src/OnboardingSPA/steps/SiteGen/Preview/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/Preview/index.js
@@ -1,28 +1,26 @@
import CommonLayout from '../../../components/Layouts/Common';
-import { useEffect, useState, useMemo } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
import { useSelect, useDispatch } from '@wordpress/data';
import { store as nfdOnboardingStore } from '../../../store';
import { HEADER_SITEGEN } from '../../../../constants';
import { useNavigate } from 'react-router-dom';
-import { SiteGenLivePreview } from '../../../components/LivePreview';
+import { SiteGenPreviewSelectableCard } from '../../../components/LivePreview';
import getContents from './contents';
import HeartAnimation from './heartAnimation';
import RegeneratingSiteCard from './regeneratingCard';
-import {
- getHomePagePreviews,
- getRegeneratedHomePagePreviews,
- toggleFavoriteHomepage,
-} from '../../../utils/api/siteGen';
+import { getHomepages, regenerateHomepage } from '../../../utils/api/siteGen';
import { getGlobalStyles } from '../../../utils/api/themes';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { cloneDeep, isEmpty } from 'lodash';
const SiteGenPreview = () => {
const navigate = useNavigate();
- const [ homepages, setHomepages ] = useState( { active: {}, data: [] } );
+ const [ homepages, setHomepages ] = useState( false );
const [ isRegenerating, setIsRegenerating ] = useState( false );
const [ isPreviewLoading, setIsPreviewLoading ] = useState( false );
- const [ globalStyles, setGlobalStyles ] = useState( [] );
+ const [ globalStyles, setGlobalStyles ] = useState( false );
const {
setIsHeaderEnabled,
@@ -31,6 +29,7 @@ const SiteGenPreview = () => {
setDrawerActiveView,
setCurrentOnboardingData,
updateInitialize,
+ setHideFooterNav,
} = useDispatch( nfdOnboardingStore );
const { currentData, nextStep } = useSelect( ( select ) => {
@@ -43,53 +42,59 @@ const SiteGenPreview = () => {
useEffect( () => {
setIsHeaderEnabled( true );
+ setHideFooterNav( true );
setSidebarActiveView( false );
setHeaderActiveView( HEADER_SITEGEN );
setDrawerActiveView( false );
updateInitialize( true );
}, [ currentData ] );
- useEffect( () => {
- const fetchHomePagesPatterns = async () => {
- setIsPreviewLoading( true );
- if ( currentData.sitegen.siteDetails?.prompt !== '' ) {
- try {
- const response = await getHomePagePreviews(
- currentData.sitegen.siteDetails.prompt,
- false
- );
+ const loadHomepages = async () => {
+ setIsPreviewLoading( true );
+ if ( ! isEmpty( currentData.sitegen.homepages.data ) ) {
+ setHomepages( currentData.sitegen.homepages.data );
+ setIsPreviewLoading( false );
+ return;
+ }
+ if ( currentData.sitegen.siteDetails?.prompt === '' ) {
+ setIsPreviewLoading( false );
+ return;
+ }
- if ( response && response.body ) {
- setHomepages( { ...homepages, data: response.body } );
- currentData.sitegen.homepages.data = response.body;
- setCurrentOnboardingData( currentData );
- } else if ( response && response.error ) {
- setHomepages( { ...homepages, data: [] } );
- } else {
- /* Handle Error UI state */
- }
+ const response = await getHomepages(
+ currentData.sitegen.siteDetails.prompt,
+ false
+ );
- setIsPreviewLoading( false );
- } catch ( error ) {
- setIsPreviewLoading( false );
- }
- }
- };
+ if ( response.error ) {
+ setIsPreviewLoading( false );
+ return;
+ }
- fetchHomePagesPatterns();
- loadGlobalStyles();
- }, [] );
+ currentData.sitegen.homepages.data = response.body;
+ setHomepages( response.body );
+ setCurrentOnboardingData( currentData );
+ setIsPreviewLoading( false );
+ };
const loadGlobalStyles = async () => {
const globalStylesResponse = await getGlobalStyles();
+ if ( globalStylesResponse.error ) {
+ setIsPreviewLoading( false );
+ return;
+ }
setGlobalStyles( globalStylesResponse.body );
};
+ useEffect( () => {
+ loadHomepages();
+ loadGlobalStyles();
+ }, [] );
+
const handlePreview = ( slug ) => {
if ( ! ( slug in homepages ) ) {
return false;
}
- homepages[ slug ].active = ! homepages[ slug ].active;
currentData.sitegen.homepages.active = homepages[ slug ];
setCurrentOnboardingData( currentData );
navigate( nextStep.path );
@@ -112,143 +117,81 @@ const SiteGenPreview = () => {
}
};
- const updateFavoriteStatus = ( slug, homepagesList ) => {
- homepagesList.forEach( ( homepageObj ) => {
- if ( homepageObj.slug === slug ) {
- homepageObj.isFavourited = ! homepageObj.isFavourited;
- }
- } );
- setCurrentOnboardingData( { ...currentData } );
- };
-
- const handleToggleFavoriteSuccess = ( response, slug, homepagesList ) => {
- if ( ! response ) {
- updateFavoriteStatus( slug, homepagesList );
- }
- };
-
- const handleToggleFavoriteError = ( error, slug, homepagesList ) => {
- updateFavoriteStatus( slug, homepagesList );
- // eslint-disable-next-line no-console
- console.error( error );
- };
-
const handleFavorite = ( slug ) => {
- const homepagesList = currentData.sitegen.homepages.data;
-
- if ( homepagesList && homepagesList.length > 0 ) {
- updateFavoriteStatus( slug, homepagesList );
+ if ( ! ( slug in homepages ) ) {
+ return;
}
-
- toggleFavoriteHomepage( slug )
- .then( ( response ) =>
- handleToggleFavoriteSuccess( response, slug, homepagesList )
- )
- .catch( ( error ) =>
- handleToggleFavoriteError( error, slug, homepagesList )
- );
+ const isFavorite = ! homepages[ slug ].isFavorite;
+ homepages[ slug ].isFavorite = isFavorite;
+ currentData.sitegen.homepages.data = homepages;
+ setHomepages( homepages );
+ setCurrentOnboardingData( currentData );
};
- const handleRegenerate = async ( slug, colorPalattes, isFavourited ) => {
+ const handleRegenerate = async ( slug, palette, isFavorite ) => {
scrollSelectionIntoView();
setIsRegenerating( true );
- if ( ! ( slug in homepages.data ) ) {
- if ( currentData.sitegen.siteDetails?.prompt !== '' ) {
- try {
- const response = await getRegeneratedHomePagePreviews(
- currentData.sitegen.siteDetails.prompt,
- true,
- slug,
- colorPalattes,
- isFavourited
- );
-
- if (
- response &&
- response.body &&
- response.body.length > 0
- ) {
- setHomepages( {
- ...homepages.data,
- data: response.body,
- } );
- currentData.sitegen.homepages.data = response.body;
- setCurrentOnboardingData( currentData );
- } else if ( response && response.error ) {
- /* Handle Error UI state */
- } else {
- /* Handle Error UI state */
- }
-
- setIsRegenerating( false );
- } catch ( error ) {
- setIsRegenerating( false );
- }
- }
+ if ( ! ( slug in homepages ) ) {
+ setIsRegenerating( false );
+ return;
}
- };
- // Define the createPreviewSettings function inside your component
- const createPreviewSettings = ( palette ) => {
- let settings = {};
- if ( globalStyles.length > 0 ) {
- settings = JSON.parse( JSON.stringify( globalStyles[ 0 ] ) );
- settings.settings.color.palette = palette;
+ if ( currentData.sitegen.siteDetails?.prompt === '' ) {
+ setIsRegenerating( false );
+ return;
}
- return settings;
- };
- // Use useMemo to memoize the previewSettings
- const previewSettings = useMemo( () => {
- return homepages?.data.map( ( homepage ) =>
- createPreviewSettings( homepage?.color?.palette )
+ const response = await regenerateHomepage(
+ currentData.sitegen.siteDetails.prompt,
+ slug,
+ palette,
+ isFavorite
);
- }, [ homepages.data, globalStyles ] );
+
+ if ( response.error ) {
+ setIsRegenerating( false );
+ return;
+ }
+
+ const regeneratedHomepage = response.body;
+ homepages[ regeneratedHomepage.slug ] = regeneratedHomepage;
+ currentData.sitegen.homepages.data = homepages;
+ setHomepages( homepages );
+ setCurrentOnboardingData( currentData );
+ setIsRegenerating( false );
+ };
const buildPreviews = () => {
- if ( isPreviewLoading ) {
+ if ( ! ( homepages && globalStyles ) || isPreviewLoading ) {
return (
{
if ( event.key === 'Enter' ) {
- handlePreview();
+ onPreview();
}
} }
>
) }
handleFavorite( designObject?.slug ) }
+ onClick={ () => onFavorite( slug ) }
onKeyDown={ ( event ) => {
if ( event.key === 'Enter' ) {
- handleFavorite( designObject?.slug );
+ onFavorite( slug );
}
} }
aria-label="Add to Wishlist"
className={ `${ className }__live-preview-container-buttons__button` }
>
- { designObject?.isFavourited ? (
+ { isFavorite ? (
handleRegenerate() }
+ onClick={ onRegenerate }
onKeyDown={ ( event ) => {
if ( event.key === 'Enter' ) {
- handleRegenerate();
+ onRegenerate();
}
} }
aria-label={ __(
diff --git a/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/stylesheet.scss b/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/stylesheet.scss
index cdac5bd0a..9bac39f2d 100644
--- a/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/stylesheet.scss
+++ b/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/stylesheet.scss
@@ -65,6 +65,7 @@
padding: 6px 56px 6px 56px;
border-radius: 8px;
gap: 6px;
+ border: none;
}
&:hover {
diff --git a/src/OnboardingSPA/components/LivePreview/index.js b/src/OnboardingSPA/components/LivePreview/index.js
index 8e18d6370..66a600a60 100644
--- a/src/OnboardingSPA/components/LivePreview/index.js
+++ b/src/OnboardingSPA/components/LivePreview/index.js
@@ -3,5 +3,4 @@ export { default as LivePreviewSkeleton } from './LivePreviewSkeleton';
export { default as LivePreviewSelectableCard } from './SelectableCard';
export { default as LivePreviewSelectableCardWithInfo } from './SelectableCardWithInfo';
export { default as GlobalStylesProvider } from './GlobalStylesProvider';
-export { default as SiteGenLivePreview } from './SiteGenPreviewSelectableCard';
-export { default as BlockPreviewSiteGen } from './BlockPreviewSiteGen';
+export { default as SiteGenPreviewSelectableCard } from './SiteGenPreviewSelectableCard';
diff --git a/src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss b/src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss
index a32bacc27..26fc04872 100644
--- a/src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss
+++ b/src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss
@@ -2,9 +2,9 @@ $background-color: var(--nfd-onboarding-card-background);
.nfd-sg-loader {
- margin: 8px;
+ margin-bottom: 8px;
max-width: 90vw;
- padding: 16px 12px;
+ padding: 18px 12px 10px 12px;
border-radius: 12px;
background-color: $background-color;
width: clamp(18.75rem, 22.6136rem + 5.6818vw, 31.25rem);
@@ -16,16 +16,17 @@ $background-color: var(--nfd-onboarding-card-background);
}
&__title {
- line-height: 2;
- font-size: 18px;
+ line-height: 19px;
+ font-size: 16px;
text-align: center;
- letter-spacing: 1.5px;
+ font-weight: 500;
color: var(--nfd-onboarding-primary);
+ letter-spacing: 1.5;
}
&__progress {
display: flex;
- margin: 20px 60px;
+ margin: 17px 60px 04px 60px;
align-items: center;
justify-content: center;
@@ -55,6 +56,10 @@ $background-color: var(--nfd-onboarding-card-background);
position: absolute;
transition: width 2s ease-in-out;
background-color: var(--nfd-onboarding-progress-bar-fill);
+
+ @media (prefers-reduced-motion) {
+ transition: none !important;
+ }
}
}
}
@@ -66,5 +71,9 @@ $background-color: var(--nfd-onboarding-card-background);
letter-spacing: 1.3px;
color: var(--nfd-onboarding-primary);
animation: fadeInFast 3s ease-out infinite;
+
+ @media (prefers-reduced-motion) {
+ animation: none !important;
+ }
}
}
diff --git a/src/OnboardingSPA/components/Loaders/Spinner/stylesheet.scss b/src/OnboardingSPA/components/Loaders/Spinner/stylesheet.scss
index 876c24d29..c4b6ac262 100644
--- a/src/OnboardingSPA/components/Loaders/Spinner/stylesheet.scss
+++ b/src/OnboardingSPA/components/Loaders/Spinner/stylesheet.scss
@@ -17,6 +17,10 @@
display: flex;
align-items: center;
justify-content: center;
+
+ @media (prefers-reduced-motion) {
+ animation: none !important;
+ }
}
&::after {
diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/CustomColorPalette/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/CustomColorPalette/index.js
index 1e5c72220..8badd39c2 100644
--- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/CustomColorPalette/index.js
+++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/CustomColorPalette/index.js
@@ -3,22 +3,14 @@ import { ColorPalette, Popover } from '@wordpress/components';
import './stylesheet.scss';
import { __ } from '@wordpress/i18n';
-const CustomColorPalette = ( {
- onChange,
- paletteSecondaryColors,
- palettePrimaryColors,
-} ) => {
+const CustomColorPalette = ( { onChange, palettePrimaryColors } ) => {
const [ color, setColor ] = useState( palettePrimaryColors[ 0 ].color );
const baseClassName =
'nfd-onboarding-sidebar--customize__custom-color-palette';
const colors = [
{
colors: palettePrimaryColors,
- name: __( 'Primary colors', 'wp-module-onboarding' ),
- },
- {
- colors: paletteSecondaryColors,
- name: __( 'Secondary colors', 'wp-module-onboarding' ),
+ name: __( 'THEME', 'wp-module-onboarding' ),
},
];
const handleColorChange = ( newColor ) => {
diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js
index c0c89875e..40616e91b 100644
--- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js
+++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js
@@ -12,17 +12,12 @@ const DesignColorsPanel = ( {
baseClassName = 'nfd-onboarding-sidebar--customize__design-colors-panel',
heading,
} ) => {
- const { customizeSidebarData } = useSelect( ( select ) => {
- return {
- customizeSidebarData:
- select( nfdOnboardingStore ).getCustomizeSidebarData(),
- };
- }, [] );
-
- const { currentData } = useSelect( ( select ) => {
+ const { currentData, customizeSidebarData } = useSelect( ( select ) => {
return {
currentData:
select( nfdOnboardingStore ).getCurrentOnboardingData(),
+ customizeSidebarData:
+ select( nfdOnboardingStore ).getCustomizeSidebarData(),
};
} );
@@ -55,18 +50,6 @@ const DesignColorsPanel = ( {
const [ showColorPicker, setShowColorPicker ] = useState( false );
const customPaletteId = colors.length - 1;
- const paletteSecondaryColors = Object.entries( colorPalettes[ 1 ] )
- .map( ( [ name, color ] ) => {
- if ( name !== 'name' ) {
- return {
- name: __( 'Custom', 'wp-module-onboarding' ),
- color,
- };
- }
- return null;
- } )
- .filter( Boolean );
-
const handleApplyCustomColors = () => {
setSelectedCustomColors( true );
setIsEditingCustomColors( false );
@@ -118,6 +101,11 @@ const DesignColorsPanel = ( {
};
const handleUpdatePreviewSettings = () => {
+ const slug = currentData.sitegen?.homepages?.active?.slug;
+ if ( ! slug ) {
+ return;
+ }
+
colorPalettes[ selectedPalette ].primary = selectedColor.primary;
if ( colorPalettes[ selectedPalette ].secondary ) {
colorPalettes[ selectedPalette ].secondary =
@@ -127,21 +115,13 @@ const DesignColorsPanel = ( {
}
colorPalettes[ selectedPalette ].tertiary = selectedColor.tertiary;
- const slug = currentData.sitegen?.homepages?.active?.slug;
- if ( slug ) {
- currentData.sitegen.homepages.data =
- currentData.sitegen.homepages?.data?.map( ( ele ) => {
- if ( ele.slug === slug ) {
- ele.color.palette = convertColorSchema(
- colorPalettes[ selectedPalette ]
- );
- }
- return ele;
- } );
- currentData.sitegen.homepages.active.color.palette =
- convertColorSchema( colorPalettes[ selectedPalette ] );
- setCurrentOnboardingData( currentData );
- }
+
+ currentData.sitegen.homepages.data[ slug ].color.palette =
+ convertColorSchema( colorPalettes[ selectedPalette ] );
+ currentData.sitegen.homepages.active.color.palette = convertColorSchema(
+ colorPalettes[ selectedPalette ]
+ );
+ setCurrentOnboardingData( currentData );
};
useEffect( () => {
@@ -227,7 +207,6 @@ const DesignColorsPanel = ( {
@@ -271,9 +250,9 @@ const DesignColorsPanel = ( {
label={
idx === 0
? __(
- 'Default',
- 'wp-module-onboarding'
- )
+ 'Default',
+ 'wp-module-onboarding'
+ )
: ''
}
selectedPalette={ selectedPalette }
diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js
index 895234150..fe7577832 100644
--- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js
+++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js
@@ -20,17 +20,11 @@ const FontGroup = ( {
role="presentation"
onClick={ () => handleGroupSelect( group.id ) }
>
-
@@ -147,7 +141,9 @@ const CustomFontsDisplay = ( {
{ __( 'CUSTOM FONTS', 'wp-module-onboarding' ) }
- +
@@ -192,15 +188,10 @@ const CustomFontsDisplay = ( {
const DesignFontsPanel = ( {
baseClassName = 'nfd-onboarding-sidebar--customize__design-fonts-panel',
} ) => {
- const { customizeSidebarData } = useSelect( ( select ) => {
+ const { currentData, customizeSidebarData } = useSelect( ( select ) => {
return {
customizeSidebarData:
select( nfdOnboardingStore ).getCustomizeSidebarData(),
- };
- }, [] );
-
- const { currentData } = useSelect( ( select ) => {
- return {
currentData:
select( nfdOnboardingStore ).getCurrentOnboardingData(),
};
@@ -230,6 +221,11 @@ const DesignFontsPanel = ( {
const fontsContent = designStyles?.map( ( style ) => style.font_content );
const handleUpdatePreviewSettings = () => {
+ const slug = currentData.sitegen?.homepages?.active?.slug;
+ if ( ! slug ) {
+ return;
+ }
+
let headings;
let body;
if ( selectedGroup === 'custom' ) {
@@ -239,49 +235,46 @@ const DesignFontsPanel = ( {
headings = `var(--wp--preset--font-family--${ fontGroups[ selectedGroup ].headings })`;
body = `var(--wp--preset--font-family--${ fontGroups[ selectedGroup ].body })`;
}
- const slug = currentData.sitegen?.homepages?.active?.slug;
- if ( slug ) {
- currentData.sitegen.homepages.data[ slug ] = {
- ...currentData.sitegen.homepages.data[ slug ],
- styles: {
- blocks: [
- {
- 'core/heading': {
- typography: {
- fontFamily: headings,
- },
+ currentData.sitegen.homepages.data[ slug ] = {
+ ...currentData.sitegen.homepages.data[ slug ],
+ styles: {
+ blocks: [
+ {
+ 'core/heading': {
+ typography: {
+ fontFamily: headings,
},
- 'core/body': {
- typography: {
- fontFamily: body,
- },
+ },
+ 'core/body': {
+ typography: {
+ fontFamily: body,
},
},
- ],
- },
- };
- currentData.sitegen.homepages.active = {
- ...currentData.sitegen.homepages.active,
- styles: {
- blocks: [
- {
- 'core/heading': {
- typography: {
- fontFamily: headings,
- },
+ },
+ ],
+ },
+ };
+ currentData.sitegen.homepages.active = {
+ ...currentData.sitegen.homepages.active,
+ styles: {
+ blocks: [
+ {
+ 'core/heading': {
+ typography: {
+ fontFamily: headings,
},
- 'core/body': {
- typography: {
- fontFamily: body,
- },
+ },
+ 'core/body': {
+ typography: {
+ fontFamily: body,
},
},
- ],
- },
- };
- setCurrentOnboardingData( currentData );
- }
+ },
+ ],
+ },
+ };
+ setCurrentOnboardingData( currentData );
};
useEffect( () => {
diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/stylesheet.scss b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/stylesheet.scss
index 5a0d779d4..3a9bcdb40 100644
--- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/stylesheet.scss
+++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/stylesheet.scss
@@ -53,7 +53,14 @@
}
&__icon {
+ width: 24px;
+ height: 24px;
margin-right: 10px;
+ background-image: var(--sitegen-sidebar-radio-unchecked);
+
+ &.selected {
+ background-image: var(--sitegen-sidebar-radio-checked);
+ }
}
&__font-name__container {
diff --git a/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js b/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js
index 4b518049f..9ac83796c 100644
--- a/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js
+++ b/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js
@@ -18,16 +18,14 @@ import {
import TabPanelHover from '../../../TabPanelHover';
// eslint-disable-next-line import/no-extraneous-dependencies
-import { cloneDeep, isEmpty } from 'lodash';
-import { getHomepages } from '../../../../data/sitegen/homepages/homepages';
-import { getColorPalettes } from '../../../../data/sitegen/sitemeta/siteMeta';
+import { cloneDeep } from 'lodash';
import { getGlobalStyles } from '../../../../utils/api/themes';
import { LivePreview } from '../../../LivePreview';
const SitegenEditorPatternsSidebar = () => {
const [ homepages, setHomepages ] = useState();
const [ activeHomepage, setActiveHomepage ] = useState();
- const [ globalStyles, setGlobalStyles ] = useState( [] );
+ const [ globalStyles, setGlobalStyles ] = useState();
const [ activeTab, setActiveTab ] = useState();
const { currentData, isSidebarOpened, sideBarView } = useSelect(
( select ) => {
@@ -48,69 +46,34 @@ const SitegenEditorPatternsSidebar = () => {
};
const handlePreview = ( slug ) => {
- const index = homepages.findIndex(
- ( homepage ) => homepage.slug === slug
- );
-
- if ( index === -1 ) {
+ if ( ! ( slug in homepages ) ) {
return false;
}
+ currentData.sitegen.homepages.active = homepages[ slug ];
- const homepagesCopy = [ ...homepages ];
- homepagesCopy[ index ].active = ! homepagesCopy[ index ].active;
- currentData.sitegen.homepages.active = homepagesCopy[ index ];
-
- setActiveHomepage( homepagesCopy[ index ] );
- setHomepages( homepagesCopy );
+ setActiveHomepage( homepages[ slug ] );
setCurrentOnboardingData( currentData );
};
const handleFavorite = ( slug ) => {
- const index = homepages.findIndex(
- ( homepage ) => homepage.slug === slug
- );
- if ( index === -1 ) {
- return false;
+ if ( ! ( slug in homepages ) ) {
+ return;
+ }
+ const isFavorite = ! homepages[ slug ].isFavorite;
+ const homepagesCopy = cloneDeep( homepages );
+ homepagesCopy[ slug ].isFavorite = isFavorite;
+ currentData.sitegen.homepages.data = homepagesCopy;
+ if ( currentData.sitegen.homepages.active.slug === slug ) {
+ currentData.sitegen.homepages.active = homepagesCopy[ slug ];
}
-
- const homepagesCopy = [ ...homepages ];
-
- homepagesCopy[ index ].isFavourited =
- ! homepagesCopy[ index ].isFavourited;
setHomepages( homepagesCopy );
- currentData.sitegen.homepages.data = homepagesCopy;
setCurrentOnboardingData( currentData );
};
const loadData = async () => {
- let homepagesObject = {};
- if ( isEmpty( currentData.sitegen.homepages.data ) ) {
- const homepagesResponse = getHomepages();
- const colorsResponse = getColorPalettes();
- homepagesResponse.forEach( ( homepage, index ) => {
- if ( ! homepage?.color ) {
- const paletteKeys = Object.keys( colorsResponse );
- const paletteIndex =
- paletteKeys[ index % paletteKeys.length ];
- homepage.color = {
- slug: paletteIndex,
- palette: colorsResponse[ paletteIndex ],
- };
- }
- } );
- homepagesResponse.forEach( ( homepage ) => {
- homepagesObject[ homepage.slug ] = homepage;
- } );
- currentData.sitegen.homepages.data = homepagesObject;
- setCurrentOnboardingData( currentData );
- } else {
- homepagesObject = currentData.sitegen.homepages.data;
- }
const globalStylesResponse = await getGlobalStyles();
setGlobalStyles( globalStylesResponse.body );
- setHomepages( homepagesObject );
- setActiveHomepage( currentData.sitegen.homepages.active );
};
useEffect( () => {
@@ -122,6 +85,14 @@ const SitegenEditorPatternsSidebar = () => {
}
}, [ sideBarView, isSidebarOpened ] );
+ useEffect( () => {
+ if ( currentData?.sitegen?.homepages ) {
+ const newHomepages = cloneDeep( currentData.sitegen.homepages );
+ setHomepages( newHomepages.data );
+ setActiveHomepage( newHomepages.active );
+ }
+ }, [ currentData ] );
+
useEffect( () => {
setActiveTab( {
name: __( 'All Versions', 'wp-module-onboarding' ),
@@ -133,6 +104,7 @@ const SitegenEditorPatternsSidebar = () => {
content:
homepages &&
activeHomepage &&
+ globalStyles &&
Object.keys( homepages ).map( ( homepage ) => {
const data = homepages[ homepage ];
const newPreviewSettings = cloneDeep( globalStyles[ 0 ] );
@@ -166,7 +138,7 @@ const SitegenEditorPatternsSidebar = () => {
@@ -146,11 +171,18 @@ const StepSiteGenEditorHeader = () => {
{ homepage && (
{ isSaving ? (
diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/Header/step-navigation-center.js b/src/OnboardingSPA/steps/SiteGen/Editor/Header/step-navigation-center.js
deleted file mode 100644
index fe8c20d47..000000000
--- a/src/OnboardingSPA/steps/SiteGen/Editor/Header/step-navigation-center.js
+++ /dev/null
@@ -1,161 +0,0 @@
-import { Icon, chevronDown, reusableBlock, settings } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
-
-import { useViewportMatch } from '@wordpress/compose';
-import { useState } from '@wordpress/element';
-import { ReactComponent as FavouriteIcon } from '../../../../static/icons/sitegen/heart-stroked.svg';
-import { ReactComponent as FavouriteFilled } from '../../../../static/icons/sitegen/heart-filled.svg';
-import { Dropdown, MenuGroup, MenuItem } from '@wordpress/components';
-import TextInputVersion from './TextInput';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as nfdOnboardingStore } from '../../../../store';
-
-/**
- * Centre Step buttons presented in Header.
- *
- * @param {Object} root0 - The root object containing all handlers.
- * @param {Function} root0.handleFavorite - Handler for the favorite action.
- * @param {Function} root0.handleViewAll - Handler for the view all action.
- * @param {Function} root0.handleRegenerate - Handler for the regenerate action.
- * @param {Function} root0.handleCustomize - Handler for the customize action.
- * @return {Object} StepNavigation Component
- */
-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' );
-
- const handleRenameClick = () => {
- 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 {Object} VersionButton Component
- */
- const VersionDropDownMenuItems = () => {
- return (
- {
);
} ),
} );
- }, [ homepages, activeHomepage ] );
+ }, [ homepages, activeHomepage, globalStyles ] );
return (
{
activeTab &&
homepages &&
activeHomepage &&
+ globalStyles &&
Object.keys( homepages ).map(
( homepage ) => {
const data =
@@ -273,7 +246,7 @@ const SitegenEditorPatternsSidebar = () => {
+
+
{ activeTab &&
homepages &&
diff --git a/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/stylesheet.scss b/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/stylesheet.scss
index 42e3ffdac..ca8adf25d 100644
--- a/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/stylesheet.scss
+++ b/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/stylesheet.scss
@@ -26,7 +26,18 @@
&__tab-panel {
font-size: 13px;
- width: 300px;
+
+ .components-tab-panel__tabs-item {
+
+ &.is-active {
+ color: #1e1e1e;
+ box-shadow: inset 0 0 - ($border-width-tab - 0.5) 0 0 #1e1e1e;
+ }
+
+ &.is-not-active {
+ box-shadow: none !important;
+ }
+ }
&__favorites-tab {
display: flex;
@@ -68,7 +79,8 @@
height: 140px;
border-radius: 8px;
cursor: pointer;
- border: 3px solid #0060f0;
+ border: 3px solid #fff;
+ box-shadow: 0 0 0 3px #0060f0;
}
}
}
diff --git a/src/OnboardingSPA/components/Sidebar/stylesheet.scss b/src/OnboardingSPA/components/Sidebar/stylesheet.scss
index 177c433bc..7c88f97a7 100644
--- a/src/OnboardingSPA/components/Sidebar/stylesheet.scss
+++ b/src/OnboardingSPA/components/Sidebar/stylesheet.scss
@@ -28,6 +28,7 @@
.nfd-onboarding-sidebar__panel.is-open {
width: $nav-sidebar-width;
+ border-left: 1px solid var(--nfd-onboarding-sidebar-border-left);
.nfd-onboarding-sidebar__panel-inner,
.interface-interface-skeleton__sidebar {
diff --git a/src/OnboardingSPA/components/StartOptions/stylesheet.scss b/src/OnboardingSPA/components/StartOptions/stylesheet.scss
index 9dc5ff0a5..b57c58d58 100644
--- a/src/OnboardingSPA/components/StartOptions/stylesheet.scss
+++ b/src/OnboardingSPA/components/StartOptions/stylesheet.scss
@@ -47,13 +47,16 @@
}
&__span {
- background-color: var(--nfd-onboarding-white);
- color: rgb(6, 0, 0);
+ background-color: var(--nfd-onboarding-primary);
+ color: var(--nfd-onboarding-secondary);
padding-right: 6px;
padding-left: 5px;
margin-right: 5px;
- border: 1px solid #fff;
+ border: 1px solid var(--nfd-onboarding-primary);
border-radius: 8px;
+ font-size: clamp(15px, 17px, 19px);
+ padding-top: 3px;
+ padding-bottom: 2px;
}
}
@@ -84,7 +87,7 @@
font-weight: 510;
text-align: center;
font-size: 14px;
- line-height: 16.71px;
+ margin-top: 0;
}
}
}
diff --git a/src/OnboardingSPA/components/TabPanelHover/index.js b/src/OnboardingSPA/components/TabPanelHover/index.js
index dddf9889b..c20b3377f 100644
--- a/src/OnboardingSPA/components/TabPanelHover/index.js
+++ b/src/OnboardingSPA/components/TabPanelHover/index.js
@@ -3,12 +3,12 @@
*/
// eslint-disable-next-line import/no-extraneous-dependencies
-import { partial, find } from 'lodash';
+import { find } from 'lodash';
/**
* WordPress dependencies
*/
-import { useState, useEffect } from '@wordpress/element';
+import { useState, useEffect, useCallback } from '@wordpress/element';
import { useInstanceId } from '@wordpress/compose';
/**
@@ -19,18 +19,42 @@ import { Button } from '@wordpress/components';
const noop = () => {};
-const TabButton = ( { tabId, onClick, children, selected, ...rest } ) => (
-
-);
+const TabButton = ( {
+ tabId,
+ onClick,
+ children,
+ selected,
+ triggerEvent,
+ handleEvent,
+ tabName,
+ ...rest
+} ) => {
+ const eventProps = useEventTrigger( triggerEvent, handleEvent, tabName );
+
+ return (
+
+ );
+};
+
+const useEventTrigger = ( triggerEvent, handleEvent, tabName ) => {
+ const eventHandler = useCallback(
+ () => handleEvent( tabName ),
+ [ handleEvent, tabName ]
+ );
+
+ return triggerEvent === 'click'
+ ? { onClick: eventHandler }
+ : { onMouseOver: eventHandler };
+};
export default function TabPanelHover( {
className,
@@ -42,11 +66,12 @@ export default function TabPanelHover( {
notActiveClass = 'is-not-active',
callback,
onSelect = noop,
+ triggerEvent = 'click',
} ) {
const instanceId = useInstanceId( TabPanelHover, 'tab-panel' );
const [ selected, setSelected ] = useState( null );
- const handleMouseOver = ( tabKey ) => {
+ const handleEvent = ( tabKey ) => {
setSelected( tabKey );
onSelect( tabKey );
const selectedTab = find( tabs, { name: tabKey } );
@@ -87,7 +112,9 @@ export default function TabPanelHover( {
aria-controls={ `${ instanceId }-${ tab.name }-view` }
selected={ tab.name === selected }
key={ tab.name }
- onMouseOver={ partial( handleMouseOver, tab.name ) }
+ triggerEvent={ triggerEvent }
+ handleEvent={ handleEvent }
+ tabName={ tab.name }
>
{ tab.title }
diff --git a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss
index 230a568db..aa7977100 100644
--- a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss
+++ b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss
@@ -19,7 +19,7 @@ $selected-detail: #1de082;
width: 100%;
resize: none;
border: none;
- max-height: 150px;
+ max-height: 400px;
color: var(--nfd-onboarding-primary);
&:focus {
@@ -39,6 +39,10 @@ $selected-detail: #1de082;
animation: fadeIn 100ms ease-out;
letter-spacing: $letter-spacing;
color: var(--nfd-onboarding-primary);
+
+ @media (prefers-reduced-motion) {
+ animation: none !important;
+ }
}
&__info {
@@ -51,6 +55,10 @@ $selected-detail: #1de082;
font-size: 0.87rem;
animation: fadeIn 100ms ease-in;
color: var(--nfd-onboarding-primary);
+
+ @media (prefers-reduced-motion) {
+ animation: none !important;
+ }
}
&-icon {
@@ -64,6 +72,14 @@ $selected-detail: #1de082;
&--selected {
animation: fadeIn 400ms ease-in-out;
background-color: $selected-detail;
+
+ @media (prefers-reduced-motion) {
+ animation: none !important;
+ }
+ }
+
+ @media (prefers-reduced-motion) {
+ animation: none !important;
}
}
}
diff --git a/src/OnboardingSPA/data/sitegen/homepages/1.json b/src/OnboardingSPA/data/sitegen/homepages/1.json
deleted file mode 100644
index a56a2a307..000000000
--- a/src/OnboardingSPA/data/sitegen/homepages/1.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "slug": "version-1",
- "title": "Version 1",
- "content": "\n
+ { ! isLargeViewport && (
+ <>
+
+
+
+ ) }
+
+
+
+
+ );
+ };
+
+ const TitleContent = () => {
+ return (
+ (
+
@@ -128,8 +146,8 @@ const StepSiteGenEditorHeader = () => {
}` }
role="button"
tabIndex={ 0 }
- onClick={ () => handleRegenerate() }
- onKeyDown={ () => handleRegenerate() }
+ onClick={ handleRegenerate }
+ onKeyDown={ handleRegenerate }
>
) }
{
'wp-module-onboarding'
) }
-
),
content:
activeTab &&
homepages &&
activeHomepage &&
+ globalStyles &&
Object.keys( homepages ).map(
( homepage ) => {
const data =
homepages[ homepage ];
- if ( ! data.isFavourited ) {
+ if ( ! data.isFavorite ) {
return false;
}
const newPreviewSettings =
@@ -384,8 +353,15 @@ const SitegenEditorPatternsSidebar = () => {
},
] }
callback={ setActiveTab }
+ triggerEvent="click"
>
\n\t
\n\t\n \n\t\n\t\n\t
\n\t\n\t\n\t\n\t\n\t
\n\t\n \n\t
\n \n\n\n \n\t\t\n\t\tElevate your function
\n\t\t\n\t\t\n\t\t\n\t\t\n\t
\n\t\n\t\n\tMemorable Experiences
\n\t\t\n\t\t\n\t\tElevate your function
to the industry’s finest
\n\t\t\n\t\t\n\t\t\n\t\t\n\t\n\t\t\n\t\t
\n\t\n \n\t\t\t\n\t\t\t![\"\"](\"https://images.unsplash.com/photo-1682884397225-6932fba4e838?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&q=80&w=600&h=900&crop=\")
\n\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t![\"\"](\"https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&q=80&w=600&h=900&crop=\")
\n\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t![\"\"](\"https://images.unsplash.com/photo-1507120410856-1f35574c3b45?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&q=80&w=600&h=900&crop=\")
\n\t\t\n\t\n \n\t
\n \n\n\n \n\t\t\n\t\t
\n\t\n \n\t\t\t\n\t\t\t
\n\t\t\n\t\n\t\t\t\t\n\t\t\t\t![\"\"/](\"https://img.logoipsum.com/218.svg\")
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t![\"\"/](\"https://img.logoipsum.com/216.svg\")
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t![\"\"/](\"https://img.logoipsum.com/211.svg\")
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t![\"\"/](\"https://img.logoipsum.com/217.svg\")
\n\t\t\t\n\t\t\n \n
\n \n\n\n\n\n\n\n\n \n
\n \n \n\t\n\tArea of Practice
\n \n\n\t\t\n\t\t
\n\t\n \n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t01
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tPortfolio Management
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tWe will work with you to create a personalised plan to help you achieve your financial goals.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t02
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tPerformance Reviews
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tWe will work with you to create a personalised plan to help you achieve your financial goals.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t03
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tFinancial Planning
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tWe will work with you to create a personalised plan to help you achieve your financial goals.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t04
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tPortfolio Management
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tWe will work with you to create a personalised plan to help you achieve your financial goals.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t05
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tPerformance Reviews
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tWe will work with you to create a personalised plan to help you achieve your financial goals.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t06
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tFinancial Planning
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tWe will work with you to create a personalised plan to help you achieve your financial goals.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\n \n\t
\n\n \n\n \n\t\t\n\t\t
\n\t\n\n \n\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\t\t\n\t\t\t\t![\"\"](\"https://images.unsplash.com/photo-1542310441-c2c6c8da6d98?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fHJlc3RhdXJhbnR8ZW58MHwxfDB8fA%3D%3D&auto=format&fit=crop&q=60&w=800&h=&crop=\")
![\"\"](\"https://images.unsplash.com/photo-1682884397223-e071beb4bd91?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fHJlc3RhdXJhbnR8ZW58MHwxfDB8fA%3D%3D&auto=format&fit=crop&q=60&w=800&h=&crop=\")
\n\t\t\t\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\tDiscover Our Amazing Workouts
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\tExperience amazing daily workouts at our newly opened gym. Choose among classic and modern fitness programs, performed with the guidance of expert trainers.
\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t
\n\t\n\t\n\t\t\t\n\t\t\t
\n\t\t\n\tCome and Experience Our Unforgettable Cuisine
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\tExperience exquisite fine dining at our newly opened restaurant. Enjoy a delicious menu of classic and modern dishes, prepared with the freshest ingredients.
\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t
\n\t\n\t\n\n\n\t\t\t\n\t\t\t![\"\"](\"https://images.unsplash.com/photo-1467003909585-2f8a72700288?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fHJlc3RhdXJhbnR8ZW58MHwxfDB8fA%3D%3D&auto=format&fit=crop&q=60&w=600&h=900&crop=\")
![\"\"](\"https://images.unsplash.com/photo-1482049016688-2d3e1b311543?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fHJlc3RhdXJhbnR8ZW58MHwxfDB8fA%3D%3D&auto=format&fit=crop&q=60&w=600&h=900&crop=\")
\n\t\t\n\t\n \n\t
\n \n\n\n \n\t\t\n\t\t
\n\t\n \n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t25k
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tDrinks served
\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t50k
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tAttendee Registrations
\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t12
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tPromotions held
\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t15
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tProfessional associations
\n\t\t\t\t\t\n\t\t\t\t\n \n\t
\n \n\n\n ★ ★ ★ ★ ★
\n\t\n\t\n\t\n\t\t\n\t\t
\n\t\n\t\n\tMy experience at the restaurant was great. The food was delicious, the service was excellent, and the atmosphere was cozy and inviting. Highly recommend this restaurant.
\n\t\t\n\t\n\t\t\n\t\t
\n\t\n \n\t\t\t\n\t\t\t![](\"https://images.unsplash.com/photo-1640951613773-54706e06851d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTg5fHxwZXJzb258ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&q=60&w=200&h=200&crop=face\")
\n\t\t\n\t\t\n\t\t\n\t\t\t\tAlex Martinez\n\t\t\t
\n\t\t\t\n\t\t/
\n\t\t\n\t\t\n\t\tCustomer
\n\t\t\n\t\n \n\t
\n \n\n\n \n\t\t![\"\"](\"https://images.unsplash.com/photo-1472289065668-ce650ac443d2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&q=80&w=1500&h=&crop=\")
\n\t\t
\n\t\n \n\t\t\n\t\t\t\n\t\t\t
\n\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tWe handle everything
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\tWe handle everything
detail-oriented individuals worry about
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t✓ Effortless experience
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t✓ Exceptional events
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n \n\t
\n \n\n\n\n\t\t\n\t\t
\n\t\n \n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\tFrequently Asked Questions
\n\t\t\t\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tIs there a free trial available?
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\tYes, we offer a free trial period of 14 days. During this period, you will have full access to all of our features and services.
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tHow do I change my personal information?
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\tYou can update name, email address and other personal information from the \"Settings\" section.
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tCan I change my plan later?
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\tYes, you can upgrade or downgrade your plan at any time.
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tHow does billing work?
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\tWe have a simple billing system which allows you to pay for services on a monthly basis.
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tCan I get an invoice for my purchase?
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\tYes, you can. Please contact our customer support and provide your purchase number.
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\n \n\t
\n"
-}
\ No newline at end of file
diff --git a/src/OnboardingSPA/data/sitegen/homepages/2.json b/src/OnboardingSPA/data/sitegen/homepages/2.json
deleted file mode 100644
index 11029d64c..000000000
--- a/src/OnboardingSPA/data/sitegen/homepages/2.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "slug": "version-2",
- "title": "Version 2",
- "content": "\n \n\n\t\t\t\t\t\n\t\t\t
\n\t\n\n \n\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tDiscover the authorities
\n\t\t\t\t\t\n\t\t\t\tOur Crew
\n\t\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t
\n\t\n\n\n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\n\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\n\t\n \n\t
\n \n\n\n\n\t\t![\"\"](\"https://images.unsplash.com/photo-1682884397225-6932fba4e838?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&q=80&w=1600&h=&crop=\")
\n\t\t
\n\t\n \n\t\t\n\t\t\t\n\t\t\t
\n\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\tMemorable Experiences
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\tElevate your function
to the industry’s finest
\n \n \n\t
\n\n\n\n \n\t\t\n\t\t
\n\t\n \n\t\n\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t
\n\t\t\n\n\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tLegal Disciplines
\n\t\t\t\t\t\t\n\t\t\t\t\tPractice Areas
\n\t\t\t\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\n\t\t\t\n\t\t\t\n\t\t\t\n\t\tBeing a first-choice employer within our sectors. Our process applies techniques from a variety of disciplines.
\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t
\n\t\n \n\n\t\t\t\n\t\t\t![\"\"](\"https://images.unsplash.com/photo-1505664194779-8beaceb93744?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8bGF3fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&q=80&w=600&h=338&crop=\")
\n\t\t\n\t\t\n\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\tCriminal Defense
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tOur process applies techniques from a variety of disciplines distinction in detail and gives careful attention.
\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t![\"\"](\"https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8NXwxNzgzMTgyfHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&q=80&w=600&h=338&crop=\")
\n\t\t\n\t\t\n\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\tFamily Law
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tOur process applies techniques from a variety of disciplines distinction in detail and gives careful attention.
\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t![\"\"](\"https://images.unsplash.com/photo-1517921150947-b52dd0a87619?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MTE2fDE3ODMxODJ8fGVufDB8fHx8&auto=format&fit=crop&q=80&w=600&h=338&crop=\")
\n\t\t\n\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\tBusiness Law
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tOur process applies techniques from a variety of disciplines distinction in detail and gives careful attention.
\n\t\t\t\t\t\n\t\t\t\t\n \n\t
\n \n\n\n\n\t\t\n\t\t
\n\t\n\t\n\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\tHow We Work
\n\t\t\t\t\n\t\t\tWork Process
\n\t\t\n\t\n\t\t\n\t\t
\n\t\n \n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t01
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tPortfolio Management
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tWe will work with you to create a personalized plan to help you achieve your financial goals.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t02
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tFinancial Planning
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tWe will work with you to create a personalized plan to help you achieve your financial goals.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t03
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tBusiness Law
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tWe will work with you to create a personalized plan to help you achieve your financial goals.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n \n \n\t
\n\n\n\n\n\t\t\n\t\t
\n\t\n \n \n\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\tSuccess
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\tProven track of successfully resolved cases for over 20 years
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t12k
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tClients
\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t20
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tYears
\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\n\t\t\t\t\n\t\t\t\t![\"\"](\"https://images.unsplash.com/photo-1587614313085-5da51cebd8ac?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fGNvbGxhYm9yYXRpb258ZW58MHx8MHx8&auto=format&fit=crop&q=80&w=800&h=800&crop=\")
\n\t\t\t\n\t\t\n\t\t\n\t\t
\n\t\n\n\n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\t\t\n\t\t\t\t![\"\"](\"https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NTB8fHRlYW18ZW58MHx8MHx8&auto=format&fit=crop&&q=80&w=800&h=800&crop=\")
\n\t\t\t\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\tWho are we
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\tAward winning lawyers ready to help with any legal issues
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t✓ Easy to use
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t✓ Beautifully designed patterns
\n\t\t\t\t\t\n\t\t\t\t\n\n \n
\n\n\n\n\n\n \n
\n \n\n\n \n
\n \n\n \n\t\n \n \n\t
\n \n\n \n \n\n\t\t\t\t\t\n\t\t\t
\n\t\n\n \n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tTestimonials
\n\t\t\t\t\t\n\t\t\t\tOur Customers Said
\n\t\t\n\t\n \n \n\t
\n \n\n \n\t\t\n\t\t
\n\t\n \n \n\t\t\t\n\t\t\t![\"\"](\"https://images.unsplash.com/photo-1583859317429-898db8d9571d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzZ8fHBlcnNvbnxlbnwwfDJ8MHx8&auto=format&fit=crop&q=60&w=200&h=200&crop=face\")
![\"\"](\"https://images.unsplash.com/photo-1682884397531-e3d7650f02fd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cGVyc29ufGVufDB8MnwwfHw%3D&auto=format&fit=crop&q=60&w=200&h=200&crop=face\")
![\"\"](\"https://images.unsplash.com/photo-1682884397225-6932fba4e838?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTA0fHxwZXJzb258ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&q=60&w=200&h=200&crop=face\")
![\"\"](\"https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTg5fHxwZXJzb258ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&q=60&w=200&h=200&crop=face\")
\n\t\t\n\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t★ ★ ★ ★ ★
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t4.85 from 1,300+ reviews
\n\t\t\t\n\t\t\n\t\t\n\t\t
\n\t\n \n\n \n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\"Delizioso\"\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tA must try for all Italian food lovers! The best Italian restaurant I've ever been to! Highly recommended!
\n\t\t\t\t\t\t\n\t\t\t\t\t★ ★ ★ ★ ★
\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t— Martha Nazario
\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\"Authentic Flavour\"\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tThe pasta dishes are cooked to perfection and the sauces are full of flavour. Highly recommend!
\n\t\t\t\t\t\t\n\t\t\t\t\t★ ★ ★ ★ ★
\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t— Alex Martinez
\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\"Outstanding Pizza\"\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tThe crust is thin, the sauce is flavourful and the toppings are very fresh. Will come again for sure.
\n\t\t\t\t\t\t\n\t\t\t\t\t★ ★ ★ ★ ★
\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t— Antoine Crawford
\n\t\t\t\t\t\n\t\t\t\t\n\n \n
\n\n"
-}
\ No newline at end of file
diff --git a/src/OnboardingSPA/data/sitegen/homepages/3.json b/src/OnboardingSPA/data/sitegen/homepages/3.json
deleted file mode 100644
index 93d94f7ad..000000000
--- a/src/OnboardingSPA/data/sitegen/homepages/3.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{ "slug": "version-3",
-"title": "Version 3",
- "content": "\n \n\n \n\t
\n \n\n\n\n\t\t\t\t\t\n\t\t\tFrequently Asked
\n\t\t\n\t
\n\t\n\n \n\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tHave Questions?
\n\t\t\t\t\t\n\t\t\t\tFrequently Asked
Questions
\n\t\t\n\t\n \n
\n\n\t\n \n \n
\n \n \n \n \n
\n \n \n \n \n
\n \n Is there a free trial available?
\n \n \n\n \n
\n \n Yes, we offer a free trial period of 14 days. During this period, you will have full access to all of our features and services.
\n \n\n \n
\n \n \n \n \n
\n \n Can I change my plan later?
\n \n \n\n \n
\n \n Yes, you can upgrade or downgrade your plan at any time. You can also switch between monthly and yearly plans.
\n \n\n \n
\n \n \n \n
\n \n What is your cancellation policy?
\n \n \n\n \n
\n \n You can request a refund within 14 days of your purchase. Contact us and we will process your refund.
\n \n\n \n
\n \n\n \n
\n \n \n \n \n
\n \n How does billing work?
\n \n \n\n \n
\n \n We have a simple billing system which allows you to pay for services on a monthly or yearly basis.
\n \n\n \n
\n \n \n \n \n
\n \n How do I change my personal info?
\n \n \n\n \n
\n \n You can update name, email address and other personal information from the \"Settings\" section.
\n \n\n \n
\n \n \n \n
\n \n Can I get an invoice for my purchase?
\n \n \n\n \n
\n \n Yes, you can. Please contact our customer support and provide your purchase number.
\n \n\n \n\t
\n \n\n \n\t\t\n\t\t
\n\t\n \n\t\t\t\n\t\t\t![\"\"](\"https://images.unsplash.com/photo-1472289065668-ce650ac443d2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&q=80&w=120&h=120&crop=\")
\n\t\t\n\t\t\n\n\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\tMore inquiries?
\n\t\t\t\t\n \n\t\t\t\tYou couldn't acquire satisfactory answers? Join us for a brief convo.
\n\t\t\t\t\n\t\t\t\n \n\t
\n \n\n\n\n\t\t\n\t\tImpress for Success
\n\t\t\n\t\t\t\t\n\t\t
\n\t\n\t\n\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\tSuccessful Initiatives
\n\t\t\t\t\n\t\t\tImpress for Success
with our experts
\n\t\t\n\t\t\t\t\n\t\tElevate your online presence with our advanced technology and customizable design options, which help you build first-rate websites.
\n\t\t\n\t\t\t\t\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t✓ Efficiency is Key
\n\t\t\t\n\t\t\t\n\t\t\t✓ Huge party experience
\n\t\t\t\n\t\t\t\n\t\t\t✓ Maximize Efficiency
\n\t\t\t\n\t\t\n\t\t\n\t\t
\n\t\n \n\t\t\t\n\t\t\t![\"\"/](\"https://images.unsplash.com/photo-1682899236650-ed6fd1244080?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&q=80&w=600&h=400&crop=\")
\n\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t![\"\"/](\"https://images.unsplash.com/photo-1583859317429-898db8d9571d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&q=80&w=600&h=400&crop=\")
\n\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t![\"\"/](\"https://images.unsplash.com/photo-1682884397531-e3d7650f02fd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&q=80&w=600&h=400&crop=\")
\n\t\t\n\t\n \n \n\t
\n\n\n\n \n\t\t\n\t\t
\n\t\n\n \n \n \n \n \n \n\t\t\n\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\n\t\t\n\t\tPractice Areas
\n\t\t\t\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\n\t\t\t\n\t\t\t\n\t\t\t\n\t\tBeing a first-choice employer within our sectors. Our process applies techniques from a variety of disciplines.
\n\t\t\t\t\n\t\t\t\n \n
\n \n\n\n \n
\n \n \n \n \n \n \n
\n \n \n \n
\n \n \n \n 01
\n \n \n \nCustomize
\n \n\n \n
\n \n Investment Planning
\n \n\n \n
\n \n \n \n \n \n
\n \n \n \n
\n \n \n \n 02
\n \n \n \nEvaluate
\n \n\n \n
\n \n Portfolio Analysis
\n \n\n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n 03
\n \n \n \nStrategize
\n \n\n \n
\n \n Wealth Management
\n \n\n \n\t
\n \n\n\n \n\t\t\n\t\t
\n\t\n \n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t![\"\"](\"https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjN8fGNyZWF0aXZlJTIwYWdlbmN5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&q=60&w=800&h=800&crop=\")
\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\tTop Features
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t✓ E-commerce Integration
✓ Analytics and Reporting
✓ 24/7 Support
\n\t\t\t\n\t\t\tSell your products online
\n\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\tSell your products online
with E-commerce
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\tEffortlessly add an online store to your website and start selling your products. Our platform integrates with popular payment gateways and shipping providers.
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t24/7 Support
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tOur dedicated support team is available around the clock to assist you.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tAnalytics and Reporting
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tStay on top of your website's performance with real-time analytics.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n \n\t
\n \n\n\n\n\t\t\n\t\t
\n\t\n \n\t\t\t\n\t\t\tBoost your website's
\n\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\tBoost your website's
visibility with SEO
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\tMake sure your website is easily discoverable by search engines and your target audience with our built-in SEO optimization tools.
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\t\n\t
\n\t\t\t\n\t\t\"I appreciated the 24/7 support and the SEO optimization features. Highly recommend!\"
\n\t\n\n\t\n\t\n\t\t\n\t\t![](\"https://images.unsplash.com/photo-1568992687947-868a62a9f521?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&q=80&crop=&w=200&h=200&crop=face\")
\n\t\n\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\tAlex Martinez
\n\t\t\t\n\n\t\t\t\n\t\t\tCEO, ABC Company
\n\t\t\t\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t![\"\"](\"https://images.unsplash.com/photo-1568992687947-868a62a9f521?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&q=80&w=700&h=700&crop=\")
\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\tTop Features
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t✓ SEO Optimization
✓ Drag and Drop Interface
✓ Customizable Templates
\n\n \n
\n\n\n\n\n \n
\n \n\n \n \n \n \n \n
\n \n \n \n Simple pricing, for everyone.
\n \n\n \n
\n \n As a comprehensive strategy and implementation company, our forte involves providing straightforward, valuable, and enchanting resolutions.
\n \n\n \n\t
\n \n\n\n\t\t\n\t\t
\n\t\n\t\n\t\n\t\t\t\n\t\t\t
\n\t\t\n \n \t\t\n\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tPassion
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tAll inclusive packages for your dream vacation
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\tStarting at $99
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t/night
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tPackage includes:
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t✓Flexible payment options
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t✓Dedicated concierge
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t✓24/7 Customer Support
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n \n \t\t\n\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tLuxury Welness
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tAll the essentials to launch your startup
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t$29
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t/mo
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tBenefits:
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t✓Billing via credit card
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t✓Access to 3 Event Planners
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t✓Core tech assistance
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t✓Up to 1,000 Requests per month
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n \n \t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tEntrepreneurs
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tAll the resources you require to establish a brand new enterprise
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t$49
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t/mth
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tPackage Contains:
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t✓Refundable Payment via debit cards
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t✓Integration with 3rd Party Planners
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t✓Advanced Aid
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t✓Exclusive booking options for prime locations
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t✓Add 3 managerial staff users
\n\t\t\t\t\t\t\n\t\t\t\t\tAll pricing is in USD. You can cancel your account at any time.
All renewals are at full price.
\n\n \n\t
\n\n\n\n \n\n\t\t\n\t\t\n\t\t
\n\t\n\n \n What our customers say
\n\t\t\n\t\n \n
\n \n\n\n \n ![\"\"](\"https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&q=80&w=900&h=1200&crop=\")
\n \n \n \n \n
\n \n \n \n
\n \n \n “The drag and drop interface made it so easy to build the website, even though I don't have any coding experience.
The customizable templates were also a great starting point, and I was able to create a website that truly reflected my brand.”
\n \n
\n \n Sarah Johnson
\n \n \nOwner, Sarah's Artisanal Bakery
\n \n\n \n\t
\n \n\n\n\n\t\t\n\t\t
\n\t\n\t\n\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tCurious to learn more?
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tContact our expert team today and let's make your celebratory visions a reality!
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tIs rescheduling possible?
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tWe understand things change, so as long as you provide 45 days advanced-notice, you can change your event date up to two times without inuring an additional fee.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tThings change. We get it.
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tWith at least 45 days advanced-notice, we'll do our best to optimize your outcome, but note that perishable items purchased may retain your requirement to pay 100% persistence costs.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tPayment Process
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tA 50% down-payment is accepted to begin the festivities. Full payment is collected a whole day(24 hours) before your event-date.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tSimpler Invite Management
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tOur guest management portal contains an easy navigable “Invite Share” integration feature that either party can control.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tWant to request an invoice for your purchase?
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tSure! Our customer support team can assist you with this. Simply let us know your purchase number when you get in touch.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\n\t\t
\n\t\n \n\t\t\t\n\t\t\t![\"\"](\"https://images.unsplash.com/photo-1434030216411-0b793f4b4173?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&q=80&w=70&h=70&crop=\")
\n\t\t\n\t\t\n\t\t\n\t\t\n\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\tWould you like additional assistance?
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\tAre any of your questions unanswered? We would be happy to address them - get in touch.
\n\t\t\t\t\n\t\t\t\n \n
\n"
-}
\ No newline at end of file
diff --git a/src/OnboardingSPA/data/sitegen/homepages/4.json b/src/OnboardingSPA/data/sitegen/homepages/4.json
deleted file mode 100644
index 61c7dc11f..000000000
--- a/src/OnboardingSPA/data/sitegen/homepages/4.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{ "slug": "version-4",
-"title": "Version 4",
- "content": "\n \n \n\t
\n \n\n\t\t\n\t\t
\n\t\n \n\t\t\n\t\t\t\n\t\t\t
\n\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tWe handle everything
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\tWe handle everything
detail-oriented individuals worry about
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t✓ Effortless experience
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t✓ Exceptional events
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n \n\t
\n \n\n\n\n\t\t\n\t\tImpress for Success
\n\t\t\n\t\t\t\t\n\t\t
\n\t\n\t\n\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\tSuccessful Initiatives
\n\t\t\t\t\n\t\t\tImpress for Success
with our experts
\n\t\t\n\t\t\t\t\n\t\tElevate your online presence with our advanced technology and customizable design options, which help you build first-rate websites.
\n\t\t\n\t\t\t\t\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t✓ Efficiency is Key
\n\t\t\t\n\t\t\t\n\t\t\t✓ Huge party experience
\n\t\t\t\n\t\t\t\n\t\t\t✓ Maximize Efficiency
\n\t\t\t\n\t\t\n\t\t\n\t\t
\n\t\n \n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\n \n \n\t
\n\n\n\n \n\t\t\n\t\t
\n\t\n\n \n \n \n \n \n \n\t\t\n\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\n\t\t\n\t\tPractice Areas
\n\t\t\t\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\n\t\t\t\n\t\t\t\n\t\t\t\n\t\tBeing a first-choice employer within our sectors. Our process applies techniques from a variety of disciplines.
\n\t\t\t\t\n\t\t\t\n \n
\n \n\n\n \n
\n \n \n \n \n \n \n
\n \n \n \n
\n \n \n \n 01
\n \n \n \nCustomize
\n \n\n \n
\n \n Investment Planning
\n \n\n \n
\n \n \n \n \n \n
\n \n \n \n
\n \n \n \n 02
\n \n \n \nEvaluate
\n \n\n \n
\n \n Portfolio Analysis
\n \n\n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n 03
\n \n \n \nStrategize
\n \n\n \n
\n \n Wealth Management
\n \n\n \n\t
\n \n\n\n \n\t\t\n\t\t
\n\t\n \n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\tTop Features
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t✓ E-commerce Integration
✓ Analytics and Reporting
✓ 24/7 Support
\n\t\t\t\n\t\t\tSell your products online
\n\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\tSell your products online
with E-commerce
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\tEffortlessly add an online store to your website and start selling your products. Our platform integrates with popular payment gateways and shipping providers.
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t24/7 Support
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tOur dedicated support team is available around the clock to assist you.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tAnalytics and Reporting
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tStay on top of your website's performance with real-time analytics.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n \n\t
\n \n\n\n\n\t\t\n\t\t
\n\t\n \n\t\t\t\n\t\t\tBoost your website's
\n\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\tBoost your website's
visibility with SEO
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\tMake sure your website is easily discoverable by search engines and your target audience with our built-in SEO optimization tools.
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\t\n\t
\n\t\t\t\n\t\t\"I appreciated the 24/7 support and the SEO optimization features. Highly recommend!\"
\n\t\n\n\t\n\t\n\t\t\n\t\t
\n\t\n\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\tAlex Martinez
\n\t\t\t\n\n\t\t\t\n\t\t\tCEO, ABC Company
\n\t\t\t\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\tTop Features
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t✓ SEO Optimization
✓ Drag and Drop Interface
✓ Customizable Templates
\n\n \n
\n\n\n\n\n \n
\n \n\n \n \n \n \n \n
\n \n \n \n Simple pricing, for everyone.
\n \n\n \n
\n \n As a comprehensive strategy and implementation company, our forte involves providing straightforward, valuable, and enchanting resolutions.
\n \n\n \n\t
\n \n\n\n\t\t\n\t\t
\n\t\n\t\n\t\n\t\t\t\n\t\t\t
\n\t\t\n \n \t\t\n\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tPassion
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tAll inclusive packages for your dream vacation
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\tStarting at $99
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t/night
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tPackage includes:
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t✓Flexible payment options
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t✓Dedicated concierge
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t✓24/7 Customer Support
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n \n \t\t\n\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tLuxury Welness
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tAll the essentials to launch your startup
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t$29
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t/mo
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tBenefits:
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t✓Billing via credit card
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t✓Access to 3 Event Planners
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t✓Core tech assistance
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t✓Up to 1,000 Requests per month
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n \n \t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tEntrepreneurs
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tAll the resources you require to establish a brand new enterprise
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t$49
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t/mth
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tPackage Contains:
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t✓Refundable Payment via debit cards
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t✓Integration with 3rd Party Planners
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t✓Advanced Aid
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t✓Exclusive booking options for prime locations
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t✓Add 3 managerial staff users
\n\t\t\t\t\t\t\n\t\t\t\t\tAll pricing is in USD. You can cancel your account at any time.
All renewals are at full price.
\n\n \n\t
\n\n\n\n \n\n\t\t\n\t\t\n\t\t
\n\t\n\n \n What our customers say
\n\t\t\n\t\n \n
\n \n\n\n \n
\n \n \n \n \n
\n \n \n \n
\n \n \n “The drag and drop interface made it so easy to build the website, even though I don't have any coding experience.
The customizable templates were also a great starting point, and I was able to create a website that truly reflected my brand.”
\n \n
\n \n Sarah Johnson
\n \n \nOwner, Sarah's Artisanal Bakery
\n \n\n \n\t
\n \n\n\n\n\t\t\n\t\t
\n\t\n\t\n\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tCurious to learn more?
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tContact our expert team today and let's make your celebratory visions a reality!
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tIs rescheduling possible?
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tWe understand things change, so as long as you provide 45 days advanced-notice, you can change your event date up to two times without inuring an additional fee.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tThings change. We get it.
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tWith at least 45 days advanced-notice, we'll do our best to optimize your outcome, but note that perishable items purchased may retain your requirement to pay 100% persistence costs.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tPayment Process
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tA 50% down-payment is accepted to begin the festivities. Full payment is collected a whole day(24 hours) before your event-date.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tSimpler Invite Management
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tOur guest management portal contains an easy navigable “Invite Share” integration feature that either party can control.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tWant to request an invoice for your purchase?
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tSure! Our customer support team can assist you with this. Simply let us know your purchase number when you get in touch.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\n\t\t
\n\t\n \n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\n\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\tWould you like additional assistance?
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\tAre any of your questions unanswered? We would be happy to address them - get in touch.
\n\t\t\t\t\n\t\t\t\n \n
\n"
-}
\ No newline at end of file
diff --git a/src/OnboardingSPA/data/sitegen/homepages/homepages.js b/src/OnboardingSPA/data/sitegen/homepages/homepages.js
deleted file mode 100644
index 7a7454c11..000000000
--- a/src/OnboardingSPA/data/sitegen/homepages/homepages.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { getRandomColorPalette } from '../sitemeta/siteMeta';
-import one from './1.json';
-import two from './2.json';
-import three from './3.json';
-import four from './4.json';
-const getHomepages = () => {
- return [ one, two, three ];
-};
-
-const getRandom = ( homepage ) => {
- if ( homepage?.favorite ) {
- homepage.slug = homepage.slug + '-copy';
- homepage.title = homepage.title + ' Copy';
- homepage.favorite = false;
- homepage.color = getRandomColorPalette( homepage?.color?.slug );
- return homepage;
- }
- four.color = getRandomColorPalette( homepage?.color?.slug );
- return four;
-};
-
-export { getHomepages, getRandom };
diff --git a/src/OnboardingSPA/data/sitegen/sitemeta/siteMeta.js b/src/OnboardingSPA/data/sitegen/sitemeta/siteMeta.js
deleted file mode 100644
index a8198761b..000000000
--- a/src/OnboardingSPA/data/sitegen/sitemeta/siteMeta.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import siteMeta from './siteMeta.json';
-const getSiteMeta = () => {
- return siteMeta;
-};
-
-const getColorPalettes = () => {
- const colorPalettes = {};
- Object.keys( siteMeta.colorpalette ).forEach( ( colorPalette ) => {
- colorPalettes[ colorPalette ] = Object.keys(
- siteMeta.colorpalette[ colorPalette ]
- ).map( ( slug ) => {
- return {
- slug,
- title: slug[ 0 ].toUpperCase() + slug.slice( 1 ),
- color: siteMeta.colorpalette[ colorPalette ][ slug ],
- };
- } );
- } );
-
- return colorPalettes;
-};
-
-const getRandomColorPalette = ( activeColorPaletteSlug ) => {
- const colorPalettes = getColorPalettes();
- let keys = Object.keys( colorPalettes );
- if ( activeColorPaletteSlug ) {
- keys = keys.filter( ( key ) => {
- return key !== activeColorPaletteSlug;
- } );
- }
-
- const rand = Math.floor( Math.random() * keys.length );
- return {
- slug: keys[ rand ],
- palette: colorPalettes[ keys[ rand ] ],
- };
-};
-
-export { getSiteMeta, getColorPalettes, getRandomColorPalette };
diff --git a/src/OnboardingSPA/data/sitegen/sitemeta/siteMeta.json b/src/OnboardingSPA/data/sitegen/sitemeta/siteMeta.json
deleted file mode 100644
index 4f677166c..000000000
--- a/src/OnboardingSPA/data/sitegen/sitemeta/siteMeta.json
+++ /dev/null
@@ -1,305 +0,0 @@
-{
- "siteclassification": {
- "primaryType": "health-wellness",
- "slug": "gym",
- "emoji": "💪",
- "wooType": "health-beauty",
- "keywords": [
- "fitness",
- "group",
- "weight loss",
- "muscle",
- "cardio",
- "strength",
- "yoga",
- "pilates",
- "crossfit",
- "bodybuilding",
- "weight",
- "treadmill",
- "elliptical",
- "interval"
- ],
- "label": "Gym"
- },
- "targetaudience": {
- "age": {
- "min": "18",
- "max": "45"
- },
- "gender": "both",
- "income": {
- "min": "0",
- "max": "1000000",
- "currency": "INR"
- },
- "education": "any",
- "location": "Gym Beach, India",
- "interests": [
- "Fitness",
- "Health",
- "Exercise",
- "Wellness"
- ]
- },
- "contenttones": {
- "tone": "Professional",
- "undertone": "Positive",
- "verbosity": 5,
- "reading_level": 60
- },
- "contentstructure": {
- "homepage1": [
- "header",
- "hero",
- "headings",
- "features",
- "gallery",
- "call-to-action",
- "pricing-table",
- "footer"
- ],
- "homepage2": [
- "header",
- "hero",
- "team",
- "features",
- "gallery",
- "call-to-action",
- "testimonials",
- "footer"
- ],
- "homepage3": [
- "header",
- "hero",
- "headings",
- "features",
- "gallery",
- "call-to-action",
- "faq",
- "footer"
- ],
- "homepage4": [
- "header",
- "hero",
- "headings",
- "features",
- "gallery",
- "call-to-action",
- "blog",
- "footer"
- ],
- "homepage5": [
- "header",
- "hero",
- "headings",
- "features",
- "gallery",
- "call-to-action",
- "about",
- "footer"
- ]
- },
- "colorpalette": {
- "palette1": {
- "base": "#FF5733",
- "contrast": "#FFFFFF",
- "primary": "#2ECC71",
- "tertiary": "#F1C40F",
- "header_background": "#2E86C1",
- "header_foreground": "#FFFFFF",
- "header_tiles": "#FFC300",
- "secondary_background": "#F39C12",
- "secondary_foreground": "#FFFFFF"
- },
- "palette2": {
- "base": "#FF5733",
- "contrast": "#FFFFFF",
- "primary": "#3498DB",
- "tertiary": "#F1C40F",
- "header_background": "#2E86C1",
- "header_foreground": "#FFFFFF",
- "header_tiles": "#FFC300",
- "secondary_background": "#F39C12",
- "secondary_foreground": "#FFFFFF"
- },
- "palette3": {
- "base": "#FF5733",
- "contrast": "#FFFFFF",
- "primary": "#9B59B6",
- "tertiary": "#F1C40F",
- "header_background": "#2E86C1",
- "header_foreground": "#FFFFFF",
- "header_tiles": "#FFC300",
- "secondary_background": "#F39C12",
- "secondary_foreground": "#FFFFFF"
- },
- "palette4": {
- "base": "#FF5733",
- "contrast": "#FFFFFF",
- "primary": "#E74C3C",
- "tertiary": "#F1C40F",
- "header_background": "#2E86C1",
- "header_foreground": "#FFFFFF",
- "header_tiles": "#FFC300",
- "secondary_background": "#F39C12",
- "secondary_foreground": "#FFFFFF"
- },
- "palette5": {
- "base": "#FF5733",
- "contrast": "#FFFFFF",
- "primary": "#1ABC9C",
- "tertiary": "#F1C40F",
- "header_background": "#2E86C1",
- "header_foreground": "#FFFFFF",
- "header_tiles": "#FFC300",
- "secondary_background": "#F39C12",
- "secondary_foreground": "#FFFFFF"
- }
- },
- "sitemap": [
- {
- "slug": "home",
- "path": "/",
- "title": "Gymmer - Home",
- "keywords": [
- "Gymmer",
- "Gym Beach",
- "India",
- "fitness",
- "workout"
- ]
- },
- {
- "slug": "about",
- "path": "/about",
- "title": "Gymmer - About",
- "keywords": [
- "Gymmer",
- "Gym Beach",
- "India",
- "studio",
- "history"
- ]
- },
- {
- "slug": "services",
- "path": "/services",
- "title": "Gymmer - Services",
- "keywords": [
- "Gymmer",
- "Gym Beach",
- "India",
- "classes",
- "training"
- ]
- },
- {
- "slug": "gallery",
- "path": "/gallery",
- "title": "Gymmer - Gallery",
- "keywords": [
- "Gymmer",
- "Gym Beach",
- "India",
- "photos",
- "videos"
- ]
- },
- {
- "slug": "contact",
- "path": "/contact",
- "title": "Gymmer - Contact",
- "keywords": [
- "Gymmer",
- "Gym Beach",
- "India",
- "location",
- "contact"
- ]
- }
- ],
- "pluginrecommendation": {
- "requiredPlugins": [
- {
- "title": "Yoast SEO",
- "description": "Yoast SEO is a comprehensive search engine optimization plugin for WordPress, which offers various features to optimize your site for maximum visibility in search engines.",
- "slug": "wordpress-seo/wordpress-seo.php",
- "download_url": "https://downloads.wordpress.org/plugin/wordpress-seo.zip",
- "premium": false,
- "requires": []
- },
- {
- "title": "WooCommerce",
- "description": "WooCommerce is a customizable, open-source eCommerce platform built on WordPress, allowing users to set up online stores with ease.",
- "slug": "woocommerce/woocommerce.php",
- "download_url": "https://downloads.wordpress.org/plugin/woocommerce.zip",
- "premium": false,
- "requires": []
- }
- ],
- "recommendedPlugins": [
- {
- "title": "Jetpack",
- "description": "Jetpack offers a suite of design, security, and marketing tools for WordPress sites, including real-time backups and easy-to-use performance enhancements.",
- "slug": "jetpack/jetpack.php",
- "download_url": "https://downloads.wordpress.org/plugin/jetpack.zip",
- "premium": false,
- "requires": []
- },
- {
- "title": "WPForms Lite",
- "description": "WPForms Lite is a drag-and-drop form builder for WordPress, allowing users to create contact forms, surveys, and more without any coding.",
- "slug": "wpforms-lite/wpforms.php",
- "download_url": "https://downloads.wordpress.org/plugin/wpforms-lite.zip",
- "premium": false,
- "requires": []
- }
- ]
- },
- "fontpair": [
- {
- "aesthetics": "modern",
- "font_heading": "Montserrat",
- "font_content": "Roboto",
- "spacing": 10,
- "radius": 5
- },
- {
- "aesthetics": "energetic",
- "font_heading": "Bebas Neue",
- "font_content": "Open Sans",
- "spacing": 8,
- "radius": 3
- },
- {
- "aesthetics": "bold",
- "font_heading": "Oswald",
- "font_content": "Lato",
- "spacing": 12,
- "radius": 7
- },
- {
- "aesthetics": "sleek",
- "font_heading": "Raleway",
- "font_content": "Nunito",
- "spacing": 6,
- "radius": 2
- },
- {
- "aesthetics": "dynamic",
- "font_heading": "Exo",
- "font_content": "Poppins",
- "spacing": 9,
- "radius": 4
- }
- ],
- "keywords": {
- "keywords": [
- "Gym studio",
- "Gymmer",
- "Gym Beach",
- "India"
- ]
- }
-}
\ No newline at end of file
diff --git a/src/OnboardingSPA/static/icons/sitegen/radio-checked.svg b/src/OnboardingSPA/static/icons/sitegen/radio-checked.svg
new file mode 100644
index 000000000..8bfb193a2
--- /dev/null
+++ b/src/OnboardingSPA/static/icons/sitegen/radio-checked.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/OnboardingSPA/static/icons/sitegen/radio-unchecked.svg b/src/OnboardingSPA/static/icons/sitegen/radio-unchecked.svg
new file mode 100644
index 000000000..5f9611184
--- /dev/null
+++ b/src/OnboardingSPA/static/icons/sitegen/radio-unchecked.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/OnboardingSPA/static/icons/sitegen/settings-dark.svg b/src/OnboardingSPA/static/icons/sitegen/settings-dark.svg
new file mode 100644
index 000000000..15e2895b1
--- /dev/null
+++ b/src/OnboardingSPA/static/icons/sitegen/settings-dark.svg
@@ -0,0 +1,8 @@
+
diff --git a/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss
index 4e0fad666..b698b0a4b 100644
--- a/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss
+++ b/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss
@@ -15,11 +15,15 @@
margin: 20px;
padding: 20px;
position: relative;
+ display: flex;
+ place-content: center;
+ place-items: flex-start;
}
.site-gen__building {
&_skimmer {
+ max-width: 1800px;
&--main {
margin-bottom: 30px;
@@ -28,39 +32,48 @@
animation: borderRotate 3500ms infinite forwards;
border: 0.25px solid rgba(var(--nfd-onboarding-secondary-rgb), 0.26);
border-image: conic-gradient(from var(--angle), rgba(var(--nfd-onboarding-secondary-rgb), 0.26) calc(var(--angle) + 0.5deg), rgba(var(--nfd-onboarding-shimmer-color), 0.5) calc(var(--angle) + 1deg)) 30;
+
+ @media (prefers-reduced-motion) {
+ animation: none !important;
+ }
}
&--header {
- height: 10vh;
+ height: 6vh;
width: 90vw;
+ min-height: 50px;
}
&--body {
width: 90vw;
- height: 80vh;
+ height: calc(56vh - 150px);
+ min-height: 250px;
}
&--footer {
+ width: 90vw;
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-between;
&_left {
- width: 55vw;
- height: 40vh;
+ width: 45vw;
+ height: calc(38vh - 100px);
+ min-height: 150px;
}
&_right {
- width: 33vw;
- height: 40vh;
+ width: 37vw;
+ height: calc(38vh - 100px);
+ min-height: 150px;
}
}
}
&_loader__overlay {
- position: absolute;
- top: 40%;
+ position: fixed;
+ top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/Header/TextInput/index.js b/src/OnboardingSPA/steps/SiteGen/Editor/Header/TextInput/index.js
deleted file mode 100644
index 9b14d79aa..000000000
--- a/src/OnboardingSPA/steps/SiteGen/Editor/Header/TextInput/index.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { useRef, useEffect } from '@wordpress/element';
-
-const TextInputVersion = ( {
- isInputDisabled,
- versionName,
- handleVersionRename,
- handleRenameOnBlur,
-} ) => {
- const inputRef = useRef( null );
-
- useEffect( () => {
- if ( ! isInputDisabled && inputRef.current ) {
- inputRef.current.focus();
- }
- }, [ isInputDisabled ] );
-
- const onInputBlurHandler = () => {
- if ( handleRenameOnBlur ) {
- handleRenameOnBlur( inputRef.current.value );
- }
- };
-
- return (
-
- );
-};
-
-export default TextInputVersion;
diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/Header/center.js b/src/OnboardingSPA/steps/SiteGen/Editor/Header/center.js
new file mode 100644
index 000000000..f7bdfd9e2
--- /dev/null
+++ b/src/OnboardingSPA/steps/SiteGen/Editor/Header/center.js
@@ -0,0 +1,155 @@
+import { Icon, chevronDown, reusableBlock } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import { useViewportMatch } from '@wordpress/compose';
+import { useRef } from '@wordpress/element';
+import { ReactComponent as FavoriteIconStroked } from '../../../../static/icons/sitegen/heart-stroked.svg';
+import { ReactComponent as FavoriteFilled } from '../../../../static/icons/sitegen/heart-filled.svg';
+import { Dropdown, MenuGroup, MenuItem } from '@wordpress/components';
+
+const StepEditorHeaderCenter = ( {
+ handleFavorite,
+ handleRename,
+ handleViewAll,
+ handleRegenerate,
+ handleCustomize,
+ handleIsRenaming,
+ isRenaming,
+ homepageTitle,
+ isFavorite,
+} ) => {
+ const isLargeViewport = useViewportMatch( 'medium' );
+ const inputRef = useRef( null );
+
+ const onRegenerate = () => {
+ if ( typeof handleRegenerate === 'function' ) {
+ return handleRegenerate();
+ }
+ };
+
+ const onFavorite = () => {
+ if ( typeof onFavorite === 'function' ) {
+ return handleFavorite();
+ }
+ };
+
+ const onCustomize = () => {
+ if ( typeof handleCustomize === 'function' ) {
+ return handleCustomize();
+ }
+ };
+
+ const onViewAll = () => {
+ if ( typeof handleViewAll === 'function' ) {
+ return handleViewAll();
+ }
+ };
+
+ const onRenameItemSelect = () => {
+ if ( typeof handleIsRenaming === 'function' ) {
+ handleIsRenaming( true );
+ return inputRef.current.focus();
+ }
+ };
+
+ const onRename = () => {
+ if ( typeof handleRename === 'function' ) {
+ handleRename( inputRef.current.value );
+ }
+ };
+
+ const onTitleInputBlur = () => {
+ if ( typeof handleIsRenaming === 'function' ) {
+ return handleIsRenaming( false );
+ }
+ };
+
+ if ( isRenaming ) {
+ inputRef.current.focus();
+ }
+
+ const DropDownMenu = () => {
+ return (
+ \n \n\t
\n \n\n\t\t\n\t\t
\n\t\n \n\t\t\n\t\t\t\n\t\t\t
\n\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tWe handle everything
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\tWe handle everything
detail-oriented individuals worry about
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t✓ Effortless experience
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t✓ Exceptional events
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
+ {
+ if ( event.key === 'Enter' ) {
+ onToggle();
+ }
+ } }
+ />
+
+ ) }
+ renderContent={ DropDownMenu }
+ />
+ );
+ };
+
+ return (
+
+ { isFavorite ? (
+
+
+
+
+ );
+};
+
+export default StepEditorHeaderCenter;
diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js b/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js
index 38590caa7..32e376392 100644
--- a/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js
@@ -5,8 +5,8 @@ import {
HEADER_END,
HEADER_SITEGEN,
HEADER_START,
- wpEditorPage,
SIDEBAR_SITEGEN_EDITOR_PATTERNS,
+ pluginDashboardPage,
} from '../../../../../constants';
import { Icon, chevronRight } from '@wordpress/icons';
import { store as nfdOnboardingStore } from '../../../../store';
@@ -16,13 +16,15 @@ import { useSelect, useDispatch } from '@wordpress/data';
import { useEffect, useState } from '@wordpress/element';
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 { regenerateHomepage } from '../../../../utils/api/siteGen';
+import StepEditorHeaderCenter from './center';
import { useViewportMatch } from '@wordpress/compose';
const StepSiteGenEditorHeader = () => {
const [ homepage, setHomepage ] = useState();
const [ isSaving, setIsSaving ] = useState( false );
+ const [ isRegenerating, setIsRegenerating ] = useState( false );
+ const [ isEditingTitle, setIsEditingTitle ] = useState( false );
const isLargeViewport = useViewportMatch( 'medium' );
@@ -46,8 +48,15 @@ const StepSiteGenEditorHeader = () => {
if ( isSaving ) {
return;
}
- homepage.isFavourited = ! homepage.isFavourited;
+ const homepages = currentData.sitegen.homepages.data;
+ if ( ! ( homepage.slug in homepages ) ) {
+ return;
+ }
+
+ const isFavorite = ! homepage.isFavorite;
+ homepage.isFavorite = isFavorite;
currentData.sitegen.homepages.data[ homepage.slug ] = homepage;
+ currentData.sitegen.homepages.active = homepage;
setCurrentOnboardingData( currentData );
};
@@ -55,45 +64,40 @@ const StepSiteGenEditorHeader = () => {
if ( isSaving ) {
return;
}
- 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 */
+
+ setIsRegenerating( true );
+ if ( currentData.sitegen.siteDetails?.prompt === '' ) {
+ setIsRegenerating( false );
+ return;
}
- };
- const saveAndContinue = async () => {
- setIsSaving( true );
- await setFlow( currentData );
- await completeFlow();
- window.location.replace( wpEditorPage );
+ const homepages = currentData.sitegen.homepages.data;
+ if ( ! ( homepage.slug in homepages ) ) {
+ setIsRegenerating( false );
+ return;
+ }
+
+ const { slug, color, isFavorite } = homepage || {};
+ const response = await regenerateHomepage(
+ currentData.sitegen.siteDetails.prompt,
+ slug,
+ color,
+ isFavorite
+ );
+
+ if ( response.error ) {
+ setIsRegenerating( false );
+ return;
+ }
+
+ const regeneratedHomepage = response.body;
+ homepages[ regeneratedHomepage.slug ] = regeneratedHomepage;
+ currentData.sitegen.homepages.data = homepages;
+ currentData.sitegen.homepages.active = regeneratedHomepage;
+ setCurrentOnboardingData( currentData );
+ setIsRegenerating( false );
};
+
const handleViewAll = () => {
setSidebarActiveView( SIDEBAR_SITEGEN_EDITOR_PATTERNS );
setIsSidebarOpened( true );
@@ -106,9 +110,22 @@ const StepSiteGenEditorHeader = () => {
setIsSidebarOpened( isSidebarOpenedNew );
};
+ const handleRename = ( title ) => {
+ homepage.title = title;
+ currentData.sitegen.homepages.data[ homepage.slug ] = homepage;
+ currentData.sitegen.homepages.active = homepage;
+ setCurrentOnboardingData( currentData );
+ };
+
+ const saveAndContinue = async () => {
+ setIsSaving( true );
+ await setFlow( currentData );
+ await completeFlow();
+ window.location.replace( pluginDashboardPage );
+ };
+
useEffect( () => {
handleCustomize();
- // eslint-disable-next-line react-hooks/exhaustive-deps
}, [] );
useEffect( () => {
@@ -116,6 +133,7 @@ const StepSiteGenEditorHeader = () => {
setHomepage( currentData.sitegen.homepages.active );
}
}, [ currentData ] );
+
return (
<>
{
>
{ __( 'Regenerate', 'wp-module-onboarding' ) }
+ { isRegenerating && (
+
-
+ setIsEditingTitle( isRenaming )
+ }
+ handleRename={ handleRename }
+ homepageTitle={ homepage.title }
+ isFavorite={ homepage.isFavorite }
+ isRenaming={ isEditingTitle }
/>
) }
@@ -183,9 +215,9 @@ const StepSiteGenEditorHeader = () => {
>
{ isLargeViewport
? __(
- 'Save & Continue',
- 'wp-module-onboarding'
- )
+ 'Save & Continue',
+ 'wp-module-onboarding'
+ )
: __( 'Next', 'wp-module-onboarding' ) }
- {
- if ( event.key === 'Enter' ) {
- onToggle();
- }
- } }
- />
-
- ) }
- renderContent={ VersionDropDownMenuItems }
- paddingSize="none"
- />
- );
- };
-
- return (
- {
- handleFavorite();
- } }
- onClick={ () => {
- handleFavorite();
- } }
- >
- { activeHomepage?.isFavourited ? (
-
-
-
- );
-};
-
-export default StepNavigationCenter;
diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/Header/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Editor/Header/stylesheet.scss
index 51477ef3e..a15b544e8 100644
--- a/src/OnboardingSPA/steps/SiteGen/Editor/Header/stylesheet.scss
+++ b/src/OnboardingSPA/steps/SiteGen/Editor/Header/stylesheet.scss
@@ -32,6 +32,13 @@
&__disabled {
cursor: disabled;
}
+
+ &__spinner {
+ border-radius: 50%;
+ width: 5em;
+ height: 5em;
+ font-size: 3px;
+ }
}
}
diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/index.js b/src/OnboardingSPA/steps/SiteGen/Editor/index.js
index fef748a00..02d588571 100644
--- a/src/OnboardingSPA/steps/SiteGen/Editor/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/Editor/index.js
@@ -13,12 +13,14 @@ import { getGlobalStyles } from '../../../utils/api/themes';
import { cloneDeep } from 'lodash';
const StepSiteGenEditor = () => {
- const [ activeHomepage, setActiveHomepage ] = useState();
- const [ colorPalette, setColorPalette ] = useState();
- const [ globalStyles, setGlobalStyles ] = useState( [] );
- const [ reRender, setReRender ] = useState( false );
- const { setIsHeaderEnabled, setHeaderActiveView, setDrawerActiveView } =
- useDispatch( nfdOnboardingStore );
+ const [ homepage, setHomepage ] = useState( false );
+ const [ globalStyles, setGlobalStyles ] = useState( false );
+ const {
+ setIsHeaderEnabled,
+ setHeaderActiveView,
+ setDrawerActiveView,
+ setHideFooterNav,
+ } = useDispatch( nfdOnboardingStore );
const { currentData } = useSelect( ( select ) => {
return {
@@ -28,54 +30,60 @@ const StepSiteGenEditor = () => {
} );
const loadData = async () => {
+ setHideFooterNav( true );
setIsHeaderEnabled( true );
setHeaderActiveView( HEADER_SITEGEN );
setDrawerActiveView( false );
- const homepage = currentData.sitegen.homepages.active;
- setActiveHomepage( homepage );
+ const activeHomepage = currentData.sitegen.homepages.active;
+ setHomepage( activeHomepage );
const globalStylesResponse = await getGlobalStyles();
setGlobalStyles( globalStylesResponse.body );
- setColorPalette( homepage.color.palette );
};
useEffect( () => {
+ setIsHeaderEnabled( true );
+ setHeaderActiveView( HEADER_SITEGEN );
+ setDrawerActiveView( false );
loadData();
}, [] );
useEffect( () => {
if ( currentData?.sitegen?.homepages?.active ) {
- setActiveHomepage( currentData.sitegen.homepages.active );
- setReRender( true );
+ setHomepage( currentData.sitegen.homepages.active );
}
}, [ currentData ] );
+ const populateFontsInPreviewSettings = ( previewSettings ) => {
+ const firstBlock = homepage.styles.blocks[ 0 ];
+ if ( firstBlock[ 'core/heading' ] ) {
+ previewSettings.styles.blocks[
+ 'core/heading'
+ ].typography.fontFamily =
+ firstBlock[ 'core/heading' ].typography.fontFamily;
+ }
+ if ( firstBlock[ 'core/body' ] ) {
+ previewSettings.styles.typography.fontFamily =
+ firstBlock[ 'core/body' ].typography.fontFamily;
+ }
+
+ return previewSettings;
+ };
+
const buildPreview = () => {
- const newPreviewSettings = cloneDeep( globalStyles[ 0 ] );
- newPreviewSettings.settings.color.palette =
- activeHomepage?.color?.palette;
-
- if ( activeHomepage && activeHomepage.styles ) {
- if (
- activeHomepage.styles.blocks &&
- activeHomepage.styles.blocks.length > 0
- ) {
- const firstBlock = activeHomepage.styles.blocks[ 0 ];
- if ( firstBlock[ 'core/heading' ] ) {
- newPreviewSettings.styles.blocks[
- 'core/heading'
- ].typography.fontFamily =
- firstBlock[ 'core/heading' ].typography.fontFamily;
- }
- if ( firstBlock[ 'core/body' ] ) {
- newPreviewSettings.styles.typography.fontFamily =
- firstBlock[ 'core/body' ].typography.fontFamily;
- }
- }
+ if ( ! ( homepage && globalStyles ) ) {
+ return <>;
+ }
+
+ let newPreviewSettings = cloneDeep( globalStyles[ 0 ] );
+ newPreviewSettings.settings.color.palette = homepage.color.palette;
+ if ( homepage?.styles?.blocks?.length > 0 ) {
+ newPreviewSettings =
+ populateFontsInPreviewSettings( newPreviewSettings );
}
return (
- { activeHomepage &&
- colorPalette &&
- globalStyles &&
- reRender &&
- buildPreview() }
+ { buildPreview() }
-
+ { /* Math.random() * (max - min) + min, Just depicting the max and min values */ }
+
{ content.facebookDesc }
-
+ setInteracted( true ) }
+ >
+
+
@@ -55,7 +79,7 @@ const SiteGenSiteSocialMedia = () => {
{ isLargeViewport && (
diff --git a/src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss
index 915ab88cd..bb8203ac2 100644
--- a/src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss
+++ b/src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss
@@ -5,18 +5,16 @@
&__social-media {
&__container {
-
display: flex;
- width: 40vw;
flex-direction: column;
justify-content: center;
&__buttons {
- width: 95%;
+ width: 96%;
display: flex;
align-items: center;
justify-content: flex-end;
- padding: 16px;
+ margin-top: 20px;
&__skip {
font-size: clamp(0.6rem, 0.755rem + 0.227vw, 1.3rem);
@@ -46,7 +44,7 @@
display: flex;
justify-content: space-between;
align-items: left;
- width: 40vw;
+ width: 37vw;
@media (max-width: #{ ($break-large) }) {
width: 80vw;
@@ -91,28 +89,41 @@
display: inline-flex;
align-items: center;
padding: 10px 15px;
- background-color: #1877f2;
- color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
justify-content: center;
- &:hover {
- background-color: #0065ea;
- }
-
@media (max-width: #{ ($break-small) }) {
width: 100%;
}
- }
- &__button i {
- margin-right: 8px;
- background-image: var(--facebook-icon);
- width: 25px;
- height: 25px;
- filter: brightness(0) saturate(100%) invert(100%) sepia(1%) saturate(376%) hue-rotate(220deg) brightness(120%) contrast(100%);
+ &__icon {
+ margin-right: 8px;
+ background-image: var(--facebook-icon);
+ width: 25px;
+ height: 25px;
+ filter: brightness(0) saturate(100%) invert(100%) sepia(1%) saturate(376%) hue-rotate(220deg) brightness(120%) contrast(100%);
+ }
+
+ &--connect {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ background-color: var(--nfd-onboarding-facebook-connect-button-background);
+ color: #fff;
+
+ &:hover {
+ background-color: var(--nfd-onboarding-facebook-connect-button-background-hover);
+ }
+ }
+
+ &--connected {
+ background-color: var(--nfd-onboarding-facebook-connected-button-background);
+ color: #fff;
+ cursor: pointer;
+ }
}
@media (max-width: #{ ($break-small) }) {
@@ -135,13 +146,18 @@
&__containright {
&__button {
- padding: 8px 12px;
- }
- &__button i {
- width: 20px;
- height: 20px;
+ &__icon {
+ width: 20px;
+ height: 20px;
+ }
+
+ &--connect {
+ padding: 8px 12px;
+ }
+
}
+
}
}
}
diff --git a/src/OnboardingSPA/steps/SiteGen/Welcome/index.js b/src/OnboardingSPA/steps/SiteGen/Welcome/index.js
index fd27e5533..19d411ea1 100644
--- a/src/OnboardingSPA/steps/SiteGen/Welcome/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/Welcome/index.js
@@ -13,10 +13,12 @@ const SiteGenWelcome = () => {
setSidebarActiveView,
setHeaderActiveView,
setDrawerActiveView,
+ setHideFooterNav,
setIsHeaderNavigationEnabled,
} = useDispatch( nfdOnboardingStore );
useEffect( () => {
+ setHideFooterNav( true );
setIsHeaderEnabled( true );
setSidebarActiveView( false );
setHeaderActiveView( HEADER_SITEGEN );
diff --git a/src/OnboardingSPA/steps/TheFork/index.js b/src/OnboardingSPA/steps/TheFork/index.js
index 3d8e7c794..10bce8d89 100644
--- a/src/OnboardingSPA/steps/TheFork/index.js
+++ b/src/OnboardingSPA/steps/TheFork/index.js
@@ -25,9 +25,11 @@ const TheFork = () => {
setDrawerActiveView,
setIsHeaderNavigationEnabled,
setFooterActiveView,
+ setHideFooterNav,
} = useDispatch( nfdOnboardingStore );
useEffect( () => {
+ setHideFooterNav( true );
setIsHeaderEnabled( false );
setSidebarActiveView( false );
setIsHeaderNavigationEnabled( false );
diff --git a/src/OnboardingSPA/store/actions.js b/src/OnboardingSPA/store/actions.js
index db55e4fa8..9f34b8dae 100644
--- a/src/OnboardingSPA/store/actions.js
+++ b/src/OnboardingSPA/store/actions.js
@@ -189,10 +189,17 @@ export function setHeaderActiveView( view ) {
};
}
-export function setFooterNavEnabled( navEnabled ) {
+export function setIsFooterNavAllowed( isNavAllowed ) {
return {
- type: 'SET_FOOTER_NAV_ENABLED',
- navEnabled,
+ type: 'SET_IS_FOOTER_NAV_ALLOWED',
+ isNavAllowed,
+ };
+}
+
+export function setHideFooterNav( hideFooterNav ) {
+ return {
+ type: 'SET_HIDE_FOOTER_NAV',
+ hideFooterNav,
};
}
diff --git a/src/OnboardingSPA/store/reducer.js b/src/OnboardingSPA/store/reducer.js
index 13f720e53..e2dccd324 100644
--- a/src/OnboardingSPA/store/reducer.js
+++ b/src/OnboardingSPA/store/reducer.js
@@ -333,16 +333,22 @@ export function queue( state = [], action ) {
export function footer(
state = {
footers,
- navEnabled: true,
+ isNavAllowed: true,
+ hideFooterNav: false,
view: FOOTER_SITEGEN,
},
action
) {
switch ( action.type ) {
- case 'SET_FOOTER_NAV_ENABLED':
+ case 'SET_IS_FOOTER_NAV_ALLOWED':
return {
...state,
- navEnabled: action.navEnabled,
+ isNavAllowed: action.isNavAllowed,
+ };
+ case 'SET_HIDE_FOOTER_NAV':
+ return {
+ ...state,
+ hideFooterNav: action.hideFooterNav,
};
case 'SET_FOOTER_ACTIVE_VIEW':
return {
diff --git a/src/OnboardingSPA/store/selectors.js b/src/OnboardingSPA/store/selectors.js
index 40ca9eea0..00d3bce0c 100644
--- a/src/OnboardingSPA/store/selectors.js
+++ b/src/OnboardingSPA/store/selectors.js
@@ -57,8 +57,12 @@ export function getFooterActiveView( state ) {
return state.footer.view;
}
-export function getFooterNavEnabled( state ) {
- return state.footer.navEnabled;
+export function getIsFooterNavAllowed( state ) {
+ return state.footer.isNavAllowed;
+}
+
+export function getHideFooterNav( state ) {
+ return state.footer.hideFooterNav;
}
/**
diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss
index 0677b95f7..08e424fc8 100644
--- a/src/OnboardingSPA/styles/_branding.scss
+++ b/src/OnboardingSPA/styles/_branding.scss
@@ -327,7 +327,7 @@ body {
--nfd-onboarding-progress-bar-fill: #0060f0;
--nfd-onboarding-progress-bar-background: #d5d5d5;
--nfd-onboarding-site-logo-on-drag: rgba(53, 59, 64, 0.3);
- --nfd-onboarding-navigation-back-background: rgba(54, 62, 68, 0.35);
+ --nfd-onboarding-navigation-back-background: rgba(212, 212, 212, 0.35);
--nfd-onboarding-site-logo-border: var(--nfd-onboarding-primary);
--nfd-onboarding-header-border: rgba(var(--nfd-onboarding-primary-rgb), 0.3);
--nfd-onboarding-card-overlay: rgba(0, 0, 0, 0.4);
@@ -337,6 +337,10 @@ body {
--nfd-onboarding-preview-favorite-background: #1e2327;
--nfd-onboarding-favorite-fill: #ef4a71;
--nfd-onboarding-button-background: #363e4459;
+ --nfd-onboarding-sidebar-border-left: #e0e0e0;
+ --nfd-onboarding-facebook-connect-button-background: #1877f2;
+ --nfd-onboarding-facebook-connect-button-background-hover: #0065ea;
+ --nfd-onboarding-facebook-connected-button-background: #3bb143;
}
@@ -365,5 +369,9 @@ body {
--nfd-onboarding-button-background: #363e4459;
--nfd-onboarding-regenerating-card-background: rgba(53, 58, 64, 0.1);
--sitegen-background-low: url(../static/images/sitegen/ai_bg_low.png);
+ --nfd-onboarding-sidebar-border-left: #e0e0e0;
+ --nfd-onboarding-facebook-connect-button-background: #1877f2;
+ --nfd-onboarding-facebook-connect-button-background-hover: #0065ea;
+ --nfd-onboarding-facebook-connected-button-background: #3bb143;
}
}
diff --git a/src/OnboardingSPA/styles/_icons.scss b/src/OnboardingSPA/styles/_icons.scss
index e1cf3a1c4..bfe097f7b 100644
--- a/src/OnboardingSPA/styles/_icons.scss
+++ b/src/OnboardingSPA/styles/_icons.scss
@@ -46,4 +46,7 @@ body {
--sitegen-favorite-filled: url(../static/icons/sitegen/favorite-filled.svg);
--sitegen-regenerate: url(../static/icons/sitegen/regenerate.svg);
--sitegen-settings: url(../static/icons/sitegen/settings.svg);
+ --sitegen-settings-dark: url(../static/icons/sitegen/settings-dark.svg);
+ --sitegen-sidebar-radio-unchecked: url(../static/icons/sitegen/radio-unchecked.svg);
+ --sitegen-sidebar-radio-checked: url(../static/icons/sitegen/radio-checked.svg);
}
diff --git a/src/OnboardingSPA/utils/api/siteGen.js b/src/OnboardingSPA/utils/api/siteGen.js
index dc54c8897..1477aeb1e 100644
--- a/src/OnboardingSPA/utils/api/siteGen.js
+++ b/src/OnboardingSPA/utils/api/siteGen.js
@@ -29,51 +29,33 @@ export async function generateSiteGenMeta(
);
}
-export async function getHomePagePreviews(
- siteDescription,
- regenerate = false
-) {
+export async function getHomepages( siteDescription ) {
return await resolve(
apiFetch( {
- url: onboardingRestURL( 'sitegen/get-homepages' ),
+ url: onboardingRestURL( 'sitegen/homepages' ),
method: 'POST',
data: {
site_description: siteDescription,
- regenerate,
},
} ).then()
);
}
-export async function getRegeneratedHomePagePreviews(
+export async function regenerateHomepage(
siteDescription,
- regenerate = true,
slug,
- colorPalettes,
- isFavourited
+ palette,
+ isFavorite
) {
return await resolve(
apiFetch( {
- url: onboardingRestURL( 'sitegen/get-homepages-regenerate' ),
+ url: onboardingRestURL( 'sitegen/homepages/regenerate' ),
method: 'POST',
data: {
site_description: siteDescription,
- regenerate,
- slug,
- colorPalettes,
- isFavourited,
- },
- } ).then()
- );
-}
-
-export async function toggleFavoriteHomepage( slug ) {
- return await resolve(
- apiFetch( {
- url: onboardingRestURL( 'sitegen/favourites' ),
- method: 'POST',
- data: {
slug,
+ palette,
+ isFavorite,
},
} ).then()
);
diff --git a/src/Scripts/sitegen-theme-marker/sitegen-theme-marker.js b/src/Scripts/sitegen-theme-marker/sitegen-theme-marker.js
index d4f6d8526..b22dda751 100644
--- a/src/Scripts/sitegen-theme-marker/sitegen-theme-marker.js
+++ b/src/Scripts/sitegen-theme-marker/sitegen-theme-marker.js
@@ -1,11 +1,13 @@
window.onload = function () {
const homepages = window.nfdOnboarding.homepages.data;
const activeTheme = window.nfdOnboarding.active;
- Object.keys( homepages ).forEach( ( homepage ) => {
- const ele = document.getElementById( `${ homepage }-name` );
+ homepages.forEach( ( homepage ) => {
+ const ele = document.getElementById( `${ homepage.slug }-name` );
if ( ele ) {
ele.innerHTML =
- ( activeTheme === homepage ? 'Active:' : '' ) +
+ ( activeTheme === homepage.slug
+ ? 'Active:'
+ : '' ) +
`
@@ -15,7 +17,7 @@ window.onload = function () {