Skip to content

Commit d869827

Browse files
wpalaniwpalani
authored
Merge pull request #941 from newfold-labs/update/disable-blueprints
Revert Fork page to pre blueprints state
2 parents 2a3753d + a3d2d42 commit d869827

File tree

5 files changed

+182
-245
lines changed

5 files changed

+182
-245
lines changed

‎src/app/steps/Fork/ForkLinks.js‎

Lines changed: 0 additions & 65 deletions
This file was deleted.

‎src/app/steps/Fork/ForkOptions.js‎

Lines changed: 0 additions & 99 deletions
This file was deleted.

‎src/app/steps/Fork/ForkStep.js‎

Lines changed: 58 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,33 @@
1+
import { useSelect } from '@wordpress/data';
12
import { Container, Title } from '@newfold/ui-component-library';
2-
import { Navigate } from '@/components';
3+
import { nfdOnboardingStore } from '@/data/store';
4+
import bluehostLogoUrl from '@/assets/bluehost-logo.svg';
35
import { OnboardingEvent, sendOnboardingEvent } from '@/utils/analytics/hiive';
4-
import { ACTION_FORK_OPTION_SELECTED, ACTION_ONBOARDING_STARTED } from '@/utils/analytics/hiive/constants';
6+
import { ACTION_ONBOARDING_STARTED } from '@/utils/analytics/hiive/constants';
57
import { disableComingSoon } from '@/utils/api';
68
import { fetchBlueprints } from '@/utils/blueprints';
7-
import ForkOptions from './ForkOptions';
8-
import ForkLinks from './ForkLinks';
9+
import SiteCreatorCard from './SiteCreatorCard';
10+
import MigrationCard from './MigrationCard';
911

1012
const ForkStep = () => {
11-
const [ selectedForkOption, setSelectedForkOption ] = useState( null );
13+
const { canMigrateSite, migrationFallbackUrl } = useSelect(
14+
( select ) => {
15+
return {
16+
canMigrateSite: select( nfdOnboardingStore ).canMigrateSite(),
17+
migrationFallbackUrl: select( nfdOnboardingStore ).getMigrationFallbackUrl(),
18+
};
19+
}
20+
);
21+
22+
// Proactively fetch the blueprints.
23+
fetchBlueprints();
1224

1325
useEffect( () => {
1426
// Analytics: Onboarding started event
1527
sendOnboardingEvent(
1628
new OnboardingEvent( ACTION_ONBOARDING_STARTED )
1729
);
1830

19-
// Proactively fetch the blueprints.
20-
fetchBlueprints();
21-
2231
/**
2332
* Before unmounting: Disable the site coming soon page.
2433
* This is necessary for the Screenshot Service to be able to load the sitegen previews.
@@ -32,83 +41,51 @@ const ForkStep = () => {
3241
};
3342
}, [] );
3443

35-
/**
36-
* Handle the next button click.
37-
* This will track the fork option selected event.
38-
*/
39-
const handleNext = () => {
40-
let forkEventLabel = '';
41-
if ( selectedForkOption === 'sitegen' ) {
42-
forkEventLabel = 'AI';
43-
} else if ( selectedForkOption === 'blueprints' ) {
44-
forkEventLabel = 'BLUEPRINTS';
45-
}
46-
47-
// Analytics: Fork option selected event.
48-
sendOnboardingEvent(
49-
new OnboardingEvent(
50-
ACTION_FORK_OPTION_SELECTED,
51-
forkEventLabel
52-
)
53-
);
54-
};
55-
56-
/**
57-
* Component styles override.
58-
*/
59-
const getCustomStyles = () => {
60-
return (
61-
<style>
62-
{ `
63-
.nfd-onboarding-body {
64-
padding-top: 3rem !important;
65-
}
66-
` }
67-
</style>
68-
);
69-
};
70-
7144
return (
72-
<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%]">
73-
{ getCustomStyles() }
74-
<Container.Header>
75-
<div className="nfd-flex nfd-flex-col nfd-gap-3">
76-
<Title
77-
as="h3"
78-
className="nfd-text-lg mobile:nfd-text-lg nfd-text-[#66A3D2] nfd-font-serif nfd-italic"
79-
>
80-
{ __( "Let's start!", 'wp-module-onboarding' ) }
81-
</Title>
82-
<Title
83-
as="h1"
84-
className="nfd-text-3xl nfd-text-content-default mobile:nfd-text-2xl"
85-
>
86-
{ __( 'What would you like to do?', 'wp-module-onboarding' ) }
87-
</Title>
88-
<p className="nfd-text-tiny nfd-text-content-default">
89-
{ __( 'Choose whether you want to select one of the available themes and quickly access the WordPress dashboard to customize your site, or continue with our AI-driven step-by-step flow.', 'wp-module-onboarding' ) }
90-
</p>
45+
<Container className="nfd-onboarding-step-container nfd-onboarding-step-intro">
46+
<Container.Block className="nfd-text-center nfd-p-0">
47+
<style>
48+
{ `
49+
#nfd-onboarding-header-logo {
50+
display: none;
51+
}
52+
` }
53+
</style>
54+
<Title className="nfd-text-3xl mobile:nfd-text-2xl">
55+
{ __( 'Welcome to WordPress', 'wp-module-onboarding' ) }
56+
</Title>
57+
<div className="nfd-flex nfd-items-center nfd-justify-center nfd-gap-2 nfd-mt-3.5 mobile:nfd-mt-2">
58+
<span className="nfd-text-xl nfd-text-content-primary mobile:nfd-text-base">
59+
{ __( 'Powered by', 'wp-module-onboarding' ) }
60+
</span>
61+
<img
62+
src={ bluehostLogoUrl }
63+
alt="Bluehost"
64+
className="nfd-w-[90px] nfd-h-auto mobile:nfd-w-[70px]"
65+
/>
9166
</div>
92-
</Container.Header>
9367

94-
<Container.Block className="nfd-p-0">
95-
<div className="nfd-flex nfd-flex-col nfd-gap-10">
96-
<ForkOptions onChange={ setSelectedForkOption } />
68+
<Title
69+
as="h3"
70+
className="nfd-text-2xl nfd-mt-14 nfd-mb-10 mobile:nfd-text-xl mobile:nfd-mt-10 mobile:nfd-mb-6"
71+
>
72+
{ __( 'How would you like to start?', 'wp-module-onboarding' ) }
73+
</Title>
74+
75+
<div className="nfd-flex nfd-flex-col nfd-gap-6">
76+
<SiteCreatorCard initialFocus={ true } />
9777

98-
<div className="nfd-flex nfd-justify-between nfd-items-end nfd-gap-8">
99-
<ForkLinks />
100-
<div className="nfd-flex nfd-justify-end">
101-
<Navigate
102-
toRoute={ selectedForkOption === 'sitegen' ? '/intake' : '/blueprints' }
103-
direction="forward"
104-
disabled={ ! selectedForkOption }
105-
callback={ handleNext }
106-
className="nfd-mb-3"
107-
>
108-
{ __( 'Next', 'wp-module-onboarding' ) }
109-
</Navigate>
110-
</div>
111-
</div>
78+
{ ( canMigrateSite || migrationFallbackUrl ) && (
79+
<>
80+
<span className="!nfd-text-lg nfd-text-content-primary nfd-font-medium">
81+
{ __( 'Or', 'wp-module-onboarding' ) }
82+
</span>
83+
<MigrationCard
84+
canMigrateSite={ canMigrateSite }
85+
migrationFallbackUrl={ migrationFallbackUrl }
86+
/>
87+
</>
88+
) }
11289
</div>
11390
</Container.Block>
11491
</Container>

‎src/app/steps/Fork/MigrationCard.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { useNavigate } from 'react-router-dom';
2+
import { ArrowsRightLeftIcon } from '@heroicons/react/24/outline';
3+
import ActionCard from '@/components/ActionCard/ActionCard';
4+
import { OnboardingEvent, sendOnboardingEvent } from '@/utils/analytics/hiive';
5+
import { ACTION_FORK_OPTION_SELECTED } from '@/utils/analytics/hiive/constants';
6+
7+
const MigrationCard = ( {
8+
canMigrateSite,
9+
migrationFallbackUrl = '',
10+
...props
11+
} ) => {
12+
const navigate = useNavigate(); // Router navigate.
13+
14+
const handleAction = () => {
15+
if ( canMigrateSite ) {
16+
navigate( '/migration', {
17+
state: { direction: 'forward' },
18+
replace: false,
19+
} );
20+
} else if ( migrationFallbackUrl ) {
21+
window.open( migrationFallbackUrl, '_blank' );
22+
}
23+
// Analytics: migration fork option selected event
24+
sendOnboardingEvent(
25+
new OnboardingEvent(
26+
ACTION_FORK_OPTION_SELECTED,
27+
'MIGRATE'
28+
)
29+
);
30+
};
31+
32+
return (
33+
<ActionCard
34+
onClick={ handleAction }
35+
{ ...props }
36+
>
37+
<div className="nfd-flex nfd-items-center nfd-justify-center nfd-text-center nfd-gap-3">
38+
<ArrowsRightLeftIcon className="nfd-w-6 nfd-h-6 nfd-text-content-primary mobile:nfd-hidden" />
39+
<span className="nfd-text-xl nfd-font-medium nfd-text-content-primary mobile:nfd-text-lg">
40+
{ __( 'Import an Existing WordPress Site', 'wp-module-onboarding' ) }
41+
</span>
42+
</div>
43+
</ActionCard>
44+
);
45+
};
46+
47+
export default MigrationCard;

0 commit comments

Comments
 (0)