Skip to content

Commit f00ece7

Browse files
wpalaniwpalani
authored
Merge pull request #933 from newfold-labs/PRESS0-3247-Onboarding-Switch-Fallback-to-Blueprints-if-AI-SiteGen-Fails
Navigate to blueprints on AI sitegen fail
2 parents 9f9be36 + 8fd9503 commit f00ece7

File tree

3 files changed

+107
-89
lines changed

3 files changed

+107
-89
lines changed

‎src/app/data/store/slices/runtime.js‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -126,14 +126,4 @@ export const selectors = {
126126
getSiteGenIdentifiers( state ) {
127127
return state.runtime.siteGen.identifiers;
128128
},
129-
130-
/**
131-
* Gets the fallback homepages.
132-
*
133-
* @param {*} state
134-
* @return {Object} fallbackHomepages
135-
*/
136-
getFallbackHomepages( state ) {
137-
return state.runtime.fallbackHomepages;
138-
},
139129
};

‎src/app/steps/Blueprints/BlueprintsStep.js‎

Lines changed: 89 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import { useNavigate } from 'react-router-dom';
2-
import { useMemo } from '@wordpress/element';
1+
import missingResourceFigureUrl from '@/assets/nfd-missing-resource.png';
2+
import { Navigate, SiteGenPreviewCard, Step } from '@/components';
3+
import { nfdOnboardingStore } from '@/data/store';
4+
import { Container, Spinner, Title } from '@newfold/ui-component-library';
35
import { dispatch, useSelect } from '@wordpress/data';
6+
import { useMemo, useState, useCallback } from '@wordpress/element';
47
import classNames from 'classnames';
5-
import { Container, Spinner, Title } from '@newfold/ui-component-library';
6-
import { SiteGenPreviewCard, Step, Navigate } from '@/components';
7-
import { nfdOnboardingStore } from '@/data/store';
8-
import missingResourceFigureUrl from '@/assets/nfd-missing-resource.png';
8+
import { useNavigate } from 'react-router-dom';
99
/**
1010
* Tabs buttons component.
1111
*
@@ -37,7 +37,8 @@ const Tabs = ( { activeTab } ) => {
3737
className={ classNames(
3838
'nfd-bg-transparent nfd-py-4 nfd-px-1 nfd-text-tiny nfd-font-medium nfd-relative',
3939
activeTab === tab.value
40-
? '!nfd-text-primary after:nfd-content-[""] after:nfd-absolute after:nfd-bottom-[-1px] after:nfd-left-0 after:nfd-w-full after:nfd-h-[2px] after:nfd-bg-primary' : 'nfd-text-[#4A5565]',
40+
? '!nfd-text-primary after:nfd-content-[""] after:nfd-absolute after:nfd-bottom-[-1px] after:nfd-left-0 after:nfd-w-full after:nfd-h-[2px] after:nfd-bg-primary'
41+
: 'nfd-text-[#4A5565]'
4142
) }
4243
onClick={ () => {
4344
dispatch( nfdOnboardingStore ).setActiveTab( tab.value );
@@ -52,10 +53,11 @@ const Tabs = ( { activeTab } ) => {
5253

5354
const BlueprintsStep = () => {
5455
const [ isLoading, setIsLoading ] = useState( true );
55-
const { blueprints, activeTab } = useSelect( ( select ) => {
56+
const { blueprints, activeTab, sitegenHasFailed } = useSelect( ( select ) => {
5657
const resolve = {
5758
blueprints: select( nfdOnboardingStore ).getBlueprints(),
5859
activeTab: select( nfdOnboardingStore ).getActiveTab() || 'ecommerce',
60+
sitegenHasFailed: select( nfdOnboardingStore ).getSitegenHasFailed(),
5961
};
6062
setIsLoading( false );
6163
return resolve;
@@ -66,10 +68,7 @@ const BlueprintsStep = () => {
6668
const LoadingState = () => {
6769
return (
6870
<div className="nfd-flex nfd-justify-center nfd-items-center nfd-h-full">
69-
<Spinner
70-
size="8"
71-
variant="primary"
72-
/>
71+
<Spinner size="8" variant="primary" />
7372
</div>
7473
);
7574
};
@@ -89,16 +88,19 @@ const BlueprintsStep = () => {
8988
);
9089
};
9190

92-
const handleNext = () => {
91+
const handleNext = useCallback( () => {
9392
navigate( '/blueprints-canvas', {
9493
state: { direction: 'forward' },
9594
} );
96-
};
95+
}, [ navigate ] );
9796

98-
const handleOnPreview = ( slug ) => {
99-
dispatch( nfdOnboardingStore ).setSelectedBlueprint( slug );
100-
handleNext();
101-
};
97+
const handleOnPreview = useCallback(
98+
( slug ) => {
99+
dispatch( nfdOnboardingStore ).setSelectedBlueprint( slug );
100+
handleNext();
101+
},
102+
[ handleNext ]
103+
);
102104

103105
const renderBlueprints = useMemo( () => {
104106
const filteredBlueprints = blueprints.filter( ( blueprint ) => blueprint.type === activeTab );
@@ -121,7 +123,12 @@ const BlueprintsStep = () => {
121123
>
122124
{ __( 'Oops! No templates found for this category.', 'wp-module-onboarding' ) }
123125
</Title>
124-
<p className="nfd-text-tiny nfd-text-content-default">{ __( 'This category is currently unavailable. Please try again later or select a different category.', 'wp-module-onboarding' ) }</p>
126+
<p className="nfd-text-tiny nfd-text-content-default">
127+
{ __(
128+
'This category is currently unavailable. Please try again later or select a different category.',
129+
'wp-module-onboarding'
130+
) }
131+
</p>
125132
</div>
126133
</div>
127134
);
@@ -130,72 +137,89 @@ const BlueprintsStep = () => {
130137
// Render blueprints.
131138
return (
132139
<div className="nfd-grid nfd-grid-cols-3 nfd-gap-8 mobile:nfd-grid-cols-1 mobile:nfd-justify-items-center">
133-
{ filteredBlueprints
134-
.map( ( blueprint ) => (
135-
<SiteGenPreviewCard
136-
key={ blueprint.id }
137-
screenshot={ blueprint.screenshot_url }
138-
frameName={ blueprint.slug }
139-
frameSrc={ blueprint.preview_url }
140-
isLoading={ false }
141-
overlay={ true }
142-
width="245px"
143-
height="295px"
144-
onPreview={ handleOnPreview }
145-
/>
146-
) )
147-
}
140+
{ filteredBlueprints.map( ( blueprint ) => (
141+
<SiteGenPreviewCard
142+
key={ blueprint.id }
143+
screenshot={ blueprint.screenshot_url }
144+
frameName={ blueprint.slug }
145+
frameSrc={ blueprint.preview_url }
146+
isLoading={ false }
147+
overlay={ true }
148+
width="245px"
149+
height="295px"
150+
onPreview={ handleOnPreview }
151+
/>
152+
) ) }
148153
</div>
149154
);
150-
}, [ activeTab, blueprints ] );
155+
}, [ activeTab, blueprints, handleOnPreview ] );
151156

152157
return (
153158
<Step>
154159
<Container className="nfd-onboarding-step-container nfd-onboarding-step-intro nfd-min-w-[780px] nfd-max-w-[780px] tablet:nfd-min-w-[90%] tablet:nfd-max-w-[90%]">
155160
{ getCustomStyles() }
156161
<Container.Header>
157162
<div className="nfd-flex nfd-flex-col nfd-gap-3">
158-
<Title
159-
as="h3"
160-
className="nfd-text-lg mobile:nfd-text-lg nfd-text-[#66A3D2] nfd-font-serif nfd-italic"
161-
>
162-
{ __( "It's up to you!", 'wp-module-onboarding' ) }
163-
</Title>
164-
<Title
165-
as="h1"
166-
className="nfd-text-3xl nfd-text-content-default mobile:nfd-text-2xl"
167-
>
168-
{ __( 'Pick the best Starter Template for your needs', 'wp-module-onboarding' ) }
169-
</Title>
170-
<p className="nfd-text-tiny nfd-text-content-default">
171-
{ __(
172-
"Choose a template based on your goals — whether you're launching a shop, blog, portfolio, or business site. We'll set up your WordPress site in no time — then it's your turn to make it truly yours with easy customizations.",
173-
'wp-module-onboarding'
174-
) }
175-
</p>
163+
{ sitegenHasFailed ? (
164+
<>
165+
<Title
166+
as="h1"
167+
className="nfd-text-3xl nfd-text-content-default mobile:nfd-text-2xl"
168+
>
169+
{ __( "Sorry, let's try a different approach.", 'wp-module-onboarding' ) }
170+
</Title>
171+
<p className="nfd-text-tiny nfd-text-content-default">
172+
{ __(
173+
"We're sorry, our site generation tool isn't working right now. In the meantime, here are our beautifully designed starter templates to get you started. Choose your favorite — we'll guide you through customizing it!",
174+
'wp-module-onboarding'
175+
) }
176+
</p>
177+
</>
178+
) : (
179+
<>
180+
<Title
181+
as="h3"
182+
className="nfd-text-lg mobile:nfd-text-lg nfd-text-[#66A3D2] nfd-font-serif nfd-italic"
183+
>
184+
{ __( "It's up to you!", 'wp-module-onboarding' ) }
185+
</Title>
186+
<Title
187+
as="h1"
188+
className="nfd-text-3xl nfd-text-content-default mobile:nfd-text-2xl"
189+
>
190+
{ __( 'Pick the best Starter Template for your needs', 'wp-module-onboarding' ) }
191+
</Title>
192+
<p className="nfd-text-tiny nfd-text-content-default">
193+
{ __(
194+
"Choose a template based on your goals — whether you're launching a shop, blog, portfolio, or business site. We'll set up your WordPress site in no time — then it's your turn to make it truly yours with easy customizations.",
195+
'wp-module-onboarding'
196+
) }
197+
</p>
198+
</>
199+
) }
176200
</div>
177201
</Container.Header>
178202

179203
<Container.Block className="nfd-p-0">
180-
{ isLoading ? <LoadingState /> : (
204+
{ isLoading ? (
205+
<LoadingState />
206+
) : (
181207
<div className="nfd-flex nfd-flex-col nfd-gap-9">
182208
<Tabs activeTab={ activeTab } />
183209
{ renderBlueprints }
184210
</div>
185211
) }
186212
</Container.Block>
187213

188-
<Container.Footer className="nfd-p-0">
189-
<div className="nfd-flex nfd-justify-start nfd-border-t nfd-pt-8">
190-
<Navigate
191-
toRoute="/"
192-
direction="backward"
193-
variant="secondary"
194-
>
195-
{ __( 'Back', 'wp-module-onboarding' ) }
196-
</Navigate>
197-
</div>
198-
</Container.Footer>
214+
{ ! sitegenHasFailed && (
215+
<Container.Footer className="nfd-p-0">
216+
<div className="nfd-flex nfd-justify-start nfd-border-t nfd-pt-8">
217+
<Navigate toRoute="/" direction="backward" variant="secondary">
218+
{ __( 'Back', 'wp-module-onboarding' ) }
219+
</Navigate>
220+
</div>
221+
</Container.Footer>
222+
) }
199223
</Container>
200224
</Step>
201225
);

‎src/app/steps/Previews/PreviewsStep.js‎

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useEffect } from '@wordpress/element';
22
import { dispatch, useSelect } from '@wordpress/data';
3+
import { __ } from '@wordpress/i18n';
34
import { useNavigate } from 'react-router-dom';
45
import { Container } from '@newfold/ui-component-library';
56
import { Step } from '@/components';
@@ -9,22 +10,25 @@ import { ACTION_HOMEPAGE_PREVIEW_SELECTED } from '@/utils/analytics/hiive/consta
910
import { Preview } from './';
1011

1112
const PreviewsStep = () => {
12-
const { homepages, fallbackHomepages, sitegenHasFailed } = useSelect( ( select ) => {
13+
const { homepages, sitegenHasFailed } = useSelect( ( select ) => {
1314
return {
1415
homepages: select( nfdOnboardingStore ).getHomepages(),
15-
fallbackHomepages: select( nfdOnboardingStore ).getFallbackHomepages(),
1616
sitegenHasFailed: select( nfdOnboardingStore ).getSitegenHasFailed(),
1717
};
1818
} );
1919

2020
const navigate = useNavigate();
2121

22-
// Update store with static homepages when sitegenHasFailed is true
22+
// Navigate to blueprints screen when sitegenHasFailed is true
2323
useEffect( () => {
2424
if ( sitegenHasFailed ) {
25-
dispatch( nfdOnboardingStore ).setHomepages( fallbackHomepages );
25+
navigate( '/blueprints', {
26+
state: {
27+
direction: 'forward',
28+
},
29+
} );
2630
}
27-
}, [ sitegenHasFailed, fallbackHomepages ] );
31+
}, [ sitegenHasFailed, navigate ] );
2832

2933
const handleNext = () => {
3034
navigate( '/canvas', {
@@ -47,13 +51,7 @@ const PreviewsStep = () => {
4751
const renderPreviews = () => {
4852
const previews = homepages;
4953
return Object.keys( previews ).map( ( slug, idx ) => {
50-
return (
51-
<Preview
52-
key={ idx }
53-
preview={ previews[ slug ] }
54-
onPreview={ handlePreview }
55-
/>
56-
);
54+
return <Preview key={ idx } preview={ previews[ slug ] } onPreview={ handlePreview } />;
5755
} );
5856
};
5957

@@ -66,9 +64,15 @@ const PreviewsStep = () => {
6664

6765
const getStepDescription = () => {
6866
if ( sitegenHasFailed ) {
69-
return __( "We're sorry, our site generation tool isn't working right now. In the meantime, here are three unique site templates to get you started. Choose your favorite — we'll guide you through customizing it!", 'wp-module-onboarding' );
67+
return __(
68+
"We're sorry, our site generation tool isn't working right now. In the meantime, here are three unique site templates to get you started. Choose your favorite — we'll guide you through customizing it!",
69+
'wp-module-onboarding'
70+
);
7071
}
71-
return __( 'Here are three unique designs for you to start with. Pick your favorite to customize it!', 'wp-module-onboarding' );
72+
return __(
73+
'Here are three unique designs for you to start with. Pick your favorite to customize it!',
74+
'wp-module-onboarding'
75+
);
7276
};
7377

7478
return (

0 commit comments

Comments
 (0)