@@ -23,85 +23,96 @@ import { ACTION_SITEGEN_FORK_OPTION_SELECTED } from '../../utils/analytics/hiive
23
23
import OrbAnimation from '../OrbAnimation' ;
24
24
import { pluginDashboardPage } from '../../../constants' ;
25
25
26
- const StartOptions = ( { questionnaire, oldFlow, largeOption, smallOptions } ) => {
26
+ const StartOptions = ( {
27
+ questionnaire,
28
+ oldFlow,
29
+ largeOption,
30
+ smallOptions,
31
+ } ) => {
27
32
const navigate = useNavigate ( ) ;
28
- const { brandConfig, hireProUrl, currentData, migrationUrl, canMigrateSite, allSteps } = useSelect ( ( select ) => {
33
+ const {
34
+ brandConfig,
35
+ hireProUrl,
36
+ currentData,
37
+ migrationUrl,
38
+ canMigrateSite,
39
+ allSteps,
40
+ } = useSelect ( ( select ) => {
29
41
return {
30
- brandConfig : select ( nfdOnboardingStore ) . getNewfoldBrandConfig ( ) ,
42
+ brandConfig : select ( nfdOnboardingStore ) . getNewfoldBrandConfig ( ) ,
31
43
hireProUrl :
32
- select ( nfdOnboardingStore ) . getfullServiceCreativeTeamUrl ( ) ,
33
- currentData :
34
- select ( nfdOnboardingStore ) . getCurrentOnboardingData ( ) ,
35
- allSteps : select ( nfdOnboardingStore ) . getAllSteps ( ) ,
36
- canMigrateSite : select ( nfdOnboardingStore ) . canMigrateSite ( ) ,
37
- migrationUrl : select ( nfdOnboardingStore ) . getMigrationUrl ( ) ,
44
+ select ( nfdOnboardingStore ) . getfullServiceCreativeTeamUrl ( ) ,
45
+ currentData : select ( nfdOnboardingStore ) . getCurrentOnboardingData ( ) ,
46
+ allSteps : select ( nfdOnboardingStore ) . getAllSteps ( ) ,
47
+ canMigrateSite : select ( nfdOnboardingStore ) . canMigrateSite ( ) ,
48
+ migrationUrl : select ( nfdOnboardingStore ) . getMigrationUrl ( ) ,
38
49
} ;
39
- } ) ;
50
+ } ) ;
40
51
const {
41
52
updateAllSteps,
42
53
updateTopSteps,
43
54
updateRoutes,
44
55
updateDesignRoutes,
45
56
updateInitialize,
46
57
setCurrentOnboardingData,
47
- } = useDispatch ( nfdOnboardingStore ) ;
58
+ } = useDispatch ( nfdOnboardingStore ) ;
48
59
49
- const switchFlow = ( newFlow ) => {
50
- if ( ! validateFlow ( brandConfig , newFlow ) ) {
60
+ const switchFlow = ( newFlow ) => {
61
+ if ( ! validateFlow ( brandConfig , newFlow ) ) {
51
62
return false ;
52
63
}
53
64
const currentFlow = window . nfdOnboarding . currentFlow ;
54
- const getData = resolveGetDataForFlow ( newFlow ) ;
65
+ const getData = resolveGetDataForFlow ( newFlow ) ;
55
66
const data = getData ( ) ;
56
- updateAllSteps ( data . steps ) ;
57
- updateTopSteps ( data ?. topSteps ) ;
58
- updateRoutes ( data . routes ) ;
59
- updateDesignRoutes ( data ?. designRoutes ) ;
60
- if ( SITEGEN_FLOW !== currentFlow ) {
67
+ updateAllSteps ( data . steps ) ;
68
+ updateTopSteps ( data ?. topSteps ) ;
69
+ updateRoutes ( data . routes ) ;
70
+ updateDesignRoutes ( data ?. designRoutes ) ;
71
+ if ( SITEGEN_FLOW !== currentFlow ) {
61
72
window . nfdOnboarding . oldFlow = currentFlow ;
62
73
}
63
74
64
75
window . nfdOnboarding . currentFlow = newFlow ;
65
76
currentData . activeFlow = newFlow ;
66
77
currentData . continueWithoutAi = false ;
67
- setCurrentOnboardingData ( currentData ) ;
68
- if ( SITEGEN_FLOW !== newFlow ) {
69
- updateInitialize ( true ) ;
78
+ setCurrentOnboardingData ( currentData ) ;
79
+ if ( SITEGEN_FLOW !== newFlow ) {
80
+ updateInitialize ( true ) ;
70
81
}
71
- navigate ( data . steps [ 1 ] . path ) ;
82
+ navigate ( data . steps [ 1 ] . path ) ;
72
83
} ;
73
84
74
85
const handleMigration = ( ) => {
75
- if ( canMigrateSite ) {
86
+ if ( canMigrateSite ) {
76
87
const migrationStepExists = allSteps . some (
77
- ( step ) => step . path === stepSiteGenMigration . path
88
+ ( step ) => step . path === stepSiteGenMigration . path
78
89
) ;
79
90
80
- if ( ! migrationStepExists ) {
81
- const updates = injectMigrationStep ( allSteps , stepTheFork ) ;
82
- updateAllSteps ( updates . allSteps ) ;
91
+ if ( ! migrationStepExists ) {
92
+ const updates = injectMigrationStep ( allSteps , stepTheFork ) ;
93
+ updateAllSteps ( updates . allSteps ) ;
83
94
}
84
95
85
- navigate ( stepSiteGenMigration . path ) ;
96
+ navigate ( stepSiteGenMigration . path ) ;
86
97
} else {
87
- window . open ( migrationUrl , '_blank' ) ;
98
+ window . open ( migrationUrl , '_blank' ) ;
88
99
}
89
100
} ;
90
101
91
- const selectFlow = ( flow ) => {
102
+ const selectFlow = ( flow ) => {
92
103
let flowForEvent = false ;
93
- switch ( flow ) {
104
+ switch ( flow ) {
94
105
case 'sitebuild' :
95
106
flowForEvent = 'DIY' ;
96
- switchFlow ( oldFlow ) ;
107
+ switchFlow ( oldFlow ) ;
97
108
break ;
98
109
case 'sitegen' :
99
110
flowForEvent = 'AI' ;
100
- switchFlow ( SITEGEN_FLOW ) ;
111
+ switchFlow ( SITEGEN_FLOW ) ;
101
112
break ;
102
113
case 'hirepro' :
103
114
flowForEvent = 'PRO' ;
104
- window . open ( hireProUrl , '_blank' ) ;
115
+ window . open ( hireProUrl , '_blank' ) ;
105
116
break ;
106
117
case 'migration' :
107
118
flowForEvent = 'MIGRATE' ;
@@ -114,11 +125,11 @@ const StartOptions = ( { questionnaire, oldFlow, largeOption, smallOptions } ) =
114
125
'TUTORIAL'
115
126
)
116
127
) ;
117
- window . location . replace ( pluginDashboardPage ) ;
128
+ window . location . replace ( pluginDashboardPage ) ;
118
129
return ;
119
130
}
120
131
121
- if ( flowForEvent ) {
132
+ if ( flowForEvent ) {
122
133
trackOnboardingEvent (
123
134
new OnboardingEvent (
124
135
ACTION_SITEGEN_FORK_OPTION_SELECTED ,
@@ -130,73 +141,75 @@ const StartOptions = ( { questionnaire, oldFlow, largeOption, smallOptions } ) =
130
141
return (
131
142
< >
132
143
< p className = "nfd-onboarding-sitegen-options__questionnaire" >
133
- { questionnaire }
144
+ { questionnaire }
134
145
</ p >
135
- < div className = "nfd-onboarding-sitegen-options__option nfd-onboarding-sitegen-options__option--large"
146
+ < div
147
+ className = "nfd-onboarding-sitegen-options__option nfd-onboarding-sitegen-options__option--large"
136
148
role = "button"
137
- tabIndex = { 0 }
138
- onClick = { ( ) => {
139
- selectFlow ( largeOption . flow ) ;
140
- } }
141
- onKeyDown = { ( ) => {
149
+ tabIndex = { 0 }
150
+ onClick = { ( ) => {
151
+ selectFlow ( largeOption . flow ) ;
152
+ } }
153
+ onKeyDown = { ( ) => {
142
154
{
143
- selectFlow ( largeOption . flow ) ;
155
+ selectFlow ( largeOption . flow ) ;
144
156
}
145
- } }
146
- data-flow = { largeOption . flow } >
157
+ } }
158
+ data-flow = { largeOption . flow }
159
+ >
147
160
< h3 className = "nfd-onboarding-sitegen-options__option__heading__title nfd-onboarding-sitegen-options__option__heading__title--large" >
148
- < OrbAnimation height = { `80px` } />
149
- { largeOption . span && (
161
+ < OrbAnimation height = { `80px` } />
162
+ { largeOption . span && (
150
163
< span className = "nfd-onboarding-sitegen-options__option__span" >
151
- { largeOption . span }
164
+ { largeOption . span }
152
165
</ span >
153
- ) }
154
- { largeOption . title }
166
+ ) }
167
+ { largeOption . title }
155
168
</ h3 >
156
169
< p className = "nfd-onboarding-sitegen-options__option__heading__subtitle nfd-onboarding-sitegen-options__option__heading__subtitle--large" >
157
- { largeOption . text1 }
170
+ { largeOption . text1 }
158
171
</ p >
159
172
< p className = "nfd-onboarding-sitegen-options__option__heading__subtitle nfd-onboarding-sitegen-options__option__heading__subtitle--large" >
160
- { largeOption . text2 }
173
+ { largeOption . text2 }
161
174
</ p >
162
-
163
175
</ div >
164
176
< div className = "nfd-onboarding-sitegen-options__container" >
165
-
166
- { smallOptions . map ( ( tab , idx ) => {
177
+ { smallOptions . map ( ( tab , idx ) => {
167
178
return tab . show ? (
168
179
< div
169
180
className = "nfd-onboarding-sitegen-options__option"
170
- key = { idx }
181
+ key = { idx }
171
182
role = "button"
172
- tabIndex = { 0 }
173
- onClick = { ( ) => {
174
- selectFlow ( tab . flow ) ;
175
- } }
176
- onKeyDown = { ( ) => {
183
+ tabIndex = { 0 }
184
+ onClick = { ( ) => {
185
+ selectFlow ( tab . flow ) ;
186
+ } }
187
+ onKeyDown = { ( ) => {
177
188
{
178
- selectFlow ( tab . flow ) ;
189
+ selectFlow ( tab . flow ) ;
179
190
}
180
- } }
181
- data-flow = { tab . flow }
191
+ } }
192
+ data-flow = { tab . flow }
182
193
>
183
194
< h3 className = "nfd-onboarding-sitegen-options__option__heading__title" >
184
- { tab . span && (
195
+ { tab . span && (
185
196
< span className = "nfd-onboarding-sitegen-options__option__span" >
186
- { tab . span }
197
+ { tab . span }
187
198
</ span >
188
- ) }
189
- { tab . title }
199
+ ) }
200
+ { tab . title }
190
201
</ h3 >
191
202
< p className = "nfd-onboarding-sitegen-options__option__heading__subtitle" >
192
- { tab . subtitle }
203
+ { tab . subtitle }
193
204
</ p >
194
205
</ div >
195
- ) : < > </ > ;
196
- } ) }
206
+ ) : (
207
+ < > </ >
208
+ ) ;
209
+ } ) }
197
210
</ div >
198
211
</ >
199
212
) ;
200
213
} ;
201
214
202
- export default memo ( StartOptions ) ;
215
+ export default memo ( StartOptions ) ;
0 commit comments