Skip to content

Commit c121dba

Browse files
wpalaniwpalani
committed
Revert Fork page to pre blueprints state
1 parent 2a3753d commit c121dba

File tree

6 files changed

+179
-262
lines changed

6 files changed

+179
-262
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: 55 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,29 @@
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';
6-
import { fetchBlueprints } from '@/utils/blueprints';
7-
import ForkOptions from './ForkOptions';
8-
import ForkLinks from './ForkLinks';
8+
import SiteCreatorCard from './SiteCreatorCard';
9+
import MigrationCard from './MigrationCard';
910

1011
const ForkStep = () => {
11-
const [ selectedForkOption, setSelectedForkOption ] = useState( null );
12+
const { canMigrateSite, migrationFallbackUrl } = useSelect(
13+
( select ) => {
14+
return {
15+
canMigrateSite: select( nfdOnboardingStore ).canMigrateSite(),
16+
migrationFallbackUrl: select( nfdOnboardingStore ).getMigrationFallbackUrl(),
17+
};
18+
}
19+
);
1220

1321
useEffect( () => {
1422
// Analytics: Onboarding started event
1523
sendOnboardingEvent(
1624
new OnboardingEvent( ACTION_ONBOARDING_STARTED )
1725
);
1826

19-
// Proactively fetch the blueprints.
20-
fetchBlueprints();
21-
2227
/**
2328
* Before unmounting: Disable the site coming soon page.
2429
* This is necessary for the Screenshot Service to be able to load the sitegen previews.
@@ -32,83 +37,51 @@ const ForkStep = () => {
3237
};
3338
}, [] );
3439

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-
7140
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>
41+
<Container className="nfd-onboarding-step-container nfd-onboarding-step-intro">
42+
<Container.Block className="nfd-text-center nfd-p-0">
43+
<style>
44+
{ `
45+
#nfd-onboarding-header-logo {
46+
display: none;
47+
}
48+
` }
49+
</style>
50+
<Title className="nfd-text-3xl mobile:nfd-text-2xl">
51+
{ __( 'Welcome to WordPress', 'wp-module-onboarding' ) }
52+
</Title>
53+
<div className="nfd-flex nfd-items-center nfd-justify-center nfd-gap-2 nfd-mt-3.5 mobile:nfd-mt-2">
54+
<span className="nfd-text-xl nfd-text-content-primary mobile:nfd-text-base">
55+
{ __( 'Powered by', 'wp-module-onboarding' ) }
56+
</span>
57+
<img
58+
src={ bluehostLogoUrl }
59+
alt="Bluehost"
60+
className="nfd-w-[90px] nfd-h-auto mobile:nfd-w-[70px]"
61+
/>
9162
</div>
92-
</Container.Header>
9363

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

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>
74+
{ ( canMigrateSite || migrationFallbackUrl ) && (
75+
<>
76+
<span className="!nfd-text-lg nfd-text-content-primarynfd-font-medium">
77+
{ __( 'Or', 'wp-module-onboarding' ) }
78+
</span>
79+
<MigrationCard
80+
canMigrateSite={ canMigrateSite }
81+
migrationFallbackUrl={ migrationFallbackUrl }
82+
/>
83+
</>
84+
) }
11285
</div>
11386
</Container.Block>
11487
</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)