Skip to content

Commit 25ce786

Browse files
officiallygodofficiallygod
committed
Implement Everything
1 parent e7ba995 commit 25ce786

File tree

5 files changed

+194
-104
lines changed

5 files changed

+194
-104
lines changed

‎src/OnboardingSPA/components/StartOptions/index.js

Lines changed: 86 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// WordPress
2-
import { memo } from '@wordpress/element';
2+
import { useState, useEffect, memo } from '@wordpress/element';
33
import { useSelect, useDispatch } from '@wordpress/data';
44

55
// Classes and functions
@@ -28,8 +28,10 @@ const StartOptions = ( {
2828
oldFlow,
2929
largeOption,
3030
smallOptions,
31+
experimentVersion,
3132
} ) => {
3233
const navigate = useNavigate();
34+
const [ forkOptions, setForkOptions ] = useState( [] );
3335
const {
3436
brandConfig,
3537
hireProUrl,
@@ -58,6 +60,18 @@ const StartOptions = ( {
5860
setCurrentOnboardingData,
5961
} = useDispatch( nfdOnboardingStore );
6062

63+
useEffect( () => {
64+
if ( experimentVersion && experimentVersion === 1 ) {
65+
// Remove Tutorial from Small Options incase of control
66+
smallOptions.pop();
67+
} else {
68+
// Remove DIY from Small Options incase of hidden
69+
smallOptions.shift();
70+
}
71+
72+
setForkOptions( smallOptions );
73+
}, [ experimentVersion ] );
74+
6175
const switchFlow = ( newFlow ) => {
6276
if ( ! validateFlow( brandConfig, newFlow ) ) {
6377
return false;
@@ -140,76 +154,79 @@ const StartOptions = ( {
140154
}
141155
};
142156
return (
143-
<>
144-
<p className="nfd-onboarding-sitegen-options__questionnaire">
145-
{ questionnaire }
146-
</p>
147-
<div
148-
className="nfd-onboarding-sitegen-options__option nfd-onboarding-sitegen-options__option--large"
149-
role="button"
150-
tabIndex={ 0 }
151-
onClick={ () => {
152-
selectFlow( largeOption.flow );
153-
} }
154-
onKeyDown={ () => {
155-
{
156-
selectFlow( largeOption.flow );
157-
}
158-
} }
159-
data-flow={ largeOption.flow }
160-
>
161-
<h3 className="nfd-onboarding-sitegen-options__option__heading__title nfd-onboarding-sitegen-options__option__heading__title--large">
162-
<OrbAnimation height={ `80px` } />
163-
{ largeOption.span && (
164-
<span className="nfd-onboarding-sitegen-options__option__span">
165-
{ largeOption.span }
166-
</span>
167-
) }
168-
{ largeOption.title }
169-
</h3>
170-
<p className="nfd-onboarding-sitegen-options__option__heading__subtitle nfd-onboarding-sitegen-options__option__heading__subtitle--large">
171-
{ largeOption.text1 }
172-
</p>
173-
<p className="nfd-onboarding-sitegen-options__option__heading__subtitle nfd-onboarding-sitegen-options__option__heading__subtitle--large">
174-
{ largeOption.text2 }
157+
experimentVersion &&
158+
forkOptions && (
159+
<>
160+
<p className="nfd-onboarding-sitegen-options__questionnaire">
161+
{ questionnaire }
175162
</p>
176-
</div>
177-
<div className="nfd-onboarding-sitegen-options__container">
178-
{ smallOptions.map( ( tab, idx ) => {
179-
return tab.show ? (
180-
<div
181-
className="nfd-onboarding-sitegen-options__option"
182-
key={ idx }
183-
role="button"
184-
tabIndex={ 0 }
185-
onClick={ () => {
186-
selectFlow( tab.flow );
187-
} }
188-
onKeyDown={ () => {
189-
{
163+
<div
164+
className="nfd-onboarding-sitegen-options__option nfd-onboarding-sitegen-options__option--large"
165+
role="button"
166+
tabIndex={ 0 }
167+
onClick={ () => {
168+
selectFlow( largeOption.flow );
169+
} }
170+
onKeyDown={ () => {
171+
{
172+
selectFlow( largeOption.flow );
173+
}
174+
} }
175+
data-flow={ largeOption.flow }
176+
>
177+
<h3 className="nfd-onboarding-sitegen-options__option__heading__title nfd-onboarding-sitegen-options__option__heading__title--large">
178+
<OrbAnimation height={ `80px` } />
179+
{ largeOption.span && (
180+
<span className="nfd-onboarding-sitegen-options__option__span">
181+
{ largeOption.span }
182+
</span>
183+
) }
184+
{ largeOption.title }
185+
</h3>
186+
<p className="nfd-onboarding-sitegen-options__option__heading__subtitle nfd-onboarding-sitegen-options__option__heading__subtitle--large">
187+
{ largeOption.text1 }
188+
</p>
189+
<p className="nfd-onboarding-sitegen-options__option__heading__subtitle nfd-onboarding-sitegen-options__option__heading__subtitle--large">
190+
{ largeOption.text2 }
191+
</p>
192+
</div>
193+
<div className="nfd-onboarding-sitegen-options__container">
194+
{ forkOptions.map( ( tab, idx ) => {
195+
return tab.show ? (
196+
<div
197+
className="nfd-onboarding-sitegen-options__option"
198+
key={ idx }
199+
role="button"
200+
tabIndex={ 0 }
201+
onClick={ () => {
190202
selectFlow( tab.flow );
191-
}
192-
} }
193-
data-flow={ tab.flow }
194-
>
195-
<h3 className="nfd-onboarding-sitegen-options__option__heading__title">
196-
{ tab.span && (
197-
<span className="nfd-onboarding-sitegen-options__option__span">
198-
{ tab.span }
199-
</span>
200-
) }
201-
{ tab.title }
202-
</h3>
203-
<p className="nfd-onboarding-sitegen-options__option__heading__subtitle">
204-
{ tab.subtitle }
205-
</p>
206-
</div>
207-
) : (
208-
<></>
209-
);
210-
} ) }
211-
</div>
212-
</>
203+
} }
204+
onKeyDown={ () => {
205+
{
206+
selectFlow( tab.flow );
207+
}
208+
} }
209+
data-flow={ tab.flow }
210+
>
211+
<h3 className="nfd-onboarding-sitegen-options__option__heading__title">
212+
{ tab.span && (
213+
<span className="nfd-onboarding-sitegen-options__option__span">
214+
{ tab.span }
215+
</span>
216+
) }
217+
{ tab.title }
218+
</h3>
219+
<p className="nfd-onboarding-sitegen-options__option__heading__subtitle">
220+
{ tab.subtitle }
221+
</p>
222+
</div>
223+
) : (
224+
<></>
225+
);
226+
} ) }
227+
</div>
228+
</>
229+
)
213230
);
214231
};
215232

‎src/OnboardingSPA/steps/TheFork/contents.js

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,15 @@ const getContents = ( canMigrateSite, migrationUrl ) => {
2222
flow: 'sitegen',
2323
},
2424
smallerOptions: [
25-
// {
26-
// title: __( 'Guided Website Setup', 'wp-module-onboarding' ),
27-
// subtitle: __(
28-
// 'Follow a step-by-step guide.',
29-
// 'wp-module-onboarding'
30-
// ),
31-
// flow: 'sitebuild',
32-
// show: true,
33-
// },
25+
{
26+
title: __( 'Guided Website Setup', 'wp-module-onboarding' ),
27+
subtitle: __(
28+
'Follow a step-by-step guide.',
29+
'wp-module-onboarding'
30+
),
31+
flow: 'sitebuild',
32+
show: true,
33+
},
3434
{
3535
title: __( 'Import a WordPress Site', 'wp-module-onboarding' ),
3636
subtitle: __(

‎src/OnboardingSPA/steps/TheFork/index.js

Lines changed: 79 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
// WordPress
2-
import { useEffect } from '@wordpress/element';
2+
import { useEffect, useState } from '@wordpress/element';
33
import { useSelect, useDispatch } from '@wordpress/data';
44

55
// Classes and functions
66
import getContents from './contents';
7+
import { setFlow } from '../../utils/api/flow';
78
import { init as initializePlugins } from '../../utils/api/plugins';
89

910
// Components
@@ -12,28 +13,39 @@ import CommonLayout from '../../components/Layouts/Common';
1213
import HeadingWithSubHeading from '../../components/HeadingWithSubHeading/SiteGen/index';
1314

1415
// Misc
15-
import { FOOTER_SITEGEN, HEADER_SITEGEN } from '../../../constants';
16+
import {
17+
FOOTER_SITEGEN,
18+
HEADER_SITEGEN,
19+
pluginDashboardPage,
20+
} from '../../../constants';
1621
import {
1722
OnboardingEvent,
1823
sendOnboardingEvent,
1924
} from '../../utils/analytics/hiive';
20-
import { ACTION_ONBOARDING_RESTARTED } from '../../utils/analytics/hiive/constants';
25+
import {
26+
ACTION_SITEGEN_FORK_AI_EXPERIMENT,
27+
ACTION_SITEGEN_FORK_OPTION_SELECTED,
28+
CATEGORY_EXPERIMENT,
29+
ACTION_ONBOARDING_RESTARTED,
30+
} from '../../utils/analytics/hiive/constants';
2131
import { store as nfdOnboardingStore } from '../../store';
2232
import { DEFAULT_FLOW } from '../../data/flows/constants';
2333

2434
const TheFork = () => {
25-
const { migrationUrl, canMigrateSite, pluginInstallHash } = useSelect(
26-
( select ) => {
35+
const [ experimentVersion, setExperimentVersion ] = useState();
36+
const { currentData, migrationUrl, canMigrateSite, pluginInstallHash } =
37+
useSelect( ( select ) => {
2738
return {
39+
currentData:
40+
select( nfdOnboardingStore ).getCurrentOnboardingData(),
2841
migrationUrl: select( nfdOnboardingStore ).getMigrationUrl(),
2942
canMigrateSite: select( nfdOnboardingStore ).canMigrateSite(),
3043
currentStep: select( nfdOnboardingStore ).getCurrentStep(),
3144
routes: select( nfdOnboardingStore ).getRoutes(),
3245
pluginInstallHash:
3346
select( nfdOnboardingStore ).getPluginInstallHash(),
3447
};
35-
}
36-
);
48+
} );
3749
const {
3850
setIsHeaderEnabled,
3951
setSidebarActiveView,
@@ -42,6 +54,7 @@ const TheFork = () => {
4254
setIsHeaderNavigationEnabled,
4355
setFooterActiveView,
4456
setHideFooterNav,
57+
setCurrentOnboardingData,
4558
} = useDispatch( nfdOnboardingStore );
4659

4760
useEffect( () => {
@@ -53,8 +66,46 @@ const TheFork = () => {
5366
setDrawerActiveView( false );
5467
setFooterActiveView( FOOTER_SITEGEN );
5568
initializePlugins( pluginInstallHash );
69+
handleExperimentVersion();
5670
} );
5771

72+
const handleExperimentVersion = async () => {
73+
let theForkExperimentVersion = 0;
74+
if ( currentData.sitegen.theForkExperimentVersion !== 0 ) {
75+
// Use an existing experiment version if it exists
76+
setExperimentVersion(
77+
currentData.sitegen.theForkExperimentVersion
78+
);
79+
theForkExperimentVersion =
80+
currentData.sitegen.theForkExperimentVersion;
81+
} else {
82+
// Generate a random experiment version either 1 or 2
83+
theForkExperimentVersion = Math.floor( Math.random() * 2 ) + 1;
84+
setExperimentVersion( theForkExperimentVersion );
85+
86+
// Sync that to the store and DB for same version on refresh
87+
currentData.sitegen.theForkExperimentVersion =
88+
theForkExperimentVersion;
89+
setCurrentOnboardingData( currentData );
90+
await setFlow( currentData );
91+
const experimentVersionNames = {
92+
1: 'control',
93+
2: 'hidden',
94+
};
95+
96+
// Send an event for the experiment version shown to the user.
97+
sendOnboardingEvent(
98+
new OnboardingEvent(
99+
ACTION_SITEGEN_FORK_AI_EXPERIMENT,
100+
experimentVersionNames[ theForkExperimentVersion ],
101+
null,
102+
null,
103+
CATEGORY_EXPERIMENT
104+
)
105+
);
106+
}
107+
};
108+
58109
useEffect( () => {
59110
const url = new URL( window.location );
60111
const restartParam = url.searchParams.get( 'restart' );
@@ -75,16 +126,16 @@ const TheFork = () => {
75126
? window.nfdOnboarding.oldFlow
76127
: DEFAULT_FLOW;
77128

78-
// const handleForkExit = () => {
79-
// sendOnboardingEvent(
80-
// new OnboardingEvent(
81-
// ACTION_SITEGEN_FORK_OPTION_SELECTED,
82-
// 'TUTORIAL'
83-
// )
84-
// );
129+
const handleForkExit = () => {
130+
sendOnboardingEvent(
131+
new OnboardingEvent(
132+
ACTION_SITEGEN_FORK_OPTION_SELECTED,
133+
'TUTORIAL'
134+
)
135+
);
85136

86-
// window.location.replace( pluginDashboardPage );
87-
// };
137+
window.location.replace( pluginDashboardPage );
138+
};
88139

89140
const content = getContents( canMigrateSite, migrationUrl );
90141

@@ -102,16 +153,19 @@ const TheFork = () => {
102153
oldFlow={ oldFlow }
103154
largeOption={ content.largerOption }
104155
smallOptions={ content.smallerOptions }
156+
experimentVersion={ experimentVersion }
105157
/>
106-
{ /* <span
107-
role="button"
108-
tabIndex={ 0 }
109-
className="nfd-onboarding-step--site-gen__fork__exit"
110-
onClick={ () => handleForkExit() }
111-
onKeyDown={ () => handleForkExit() }
112-
>
113-
{ content.exitToWordPress }
114-
</span> */ }
158+
{ experimentVersion === 1 && (
159+
<span
160+
role="button"
161+
tabIndex={ 0 }
162+
className="nfd-onboarding-step--site-gen__fork__exit"
163+
onClick={ () => handleForkExit() }
164+
onKeyDown={ () => handleForkExit() }
165+
>
166+
{ content.exitToWordPress }
167+
</span>
168+
) }
115169
</CommonLayout>
116170
);
117171
};

‎src/OnboardingSPA/utils/analytics/hiive/constants.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export const ACTION_SOCIAL_ADDED = 'social_added';
2424
export const ACTION_MIGRATION_INITIATED = 'migration_initiated';
2525
export const ACTION_MFE_MIGRATION_INITIATED = 'mfe_migration_initiated';
2626

27+
export const ACTION_SITEGEN_FORK_AI_EXPERIMENT = 'exp_fork_diy_mar25';
2728
export const ACTION_SITEGEN_FORK_OPTION_SELECTED = 'fork_option_selected';
2829
export const ACTION_SITEGEN_SITE_DETAILS_PROMPT_SET = 'site_details_prompt_set';
2930
export const ACTION_SITEGEN_SOCIAL_CONNECTED = 'social_connected';
@@ -71,4 +72,5 @@ export const ACTION_TO_LABEL_KEY_MAP = {
7172
[ ACTION_MFE_MIGRATION_INITIATED ]: 'path',
7273
[ ACTION_SITEGEN_ERROR_STATE_TRIGGERED ]: 'identifier',
7374
[ ACTION_ONBOARDING_RESTARTED ]: 'location',
75+
[ ACTION_SITEGEN_FORK_AI_EXPERIMENT ]: 'value',
7476
};

0 commit comments

Comments
 (0)