Skip to content

Commit 00fcc0b

Browse files
markbiekmarkbiek
committed
Update migration flow components for StepContainerV2
Previously, we had a bunch of conditional code to render the v2 component vs the v1 component. Now that v2 is enabled in all environments, we can remove the conditional code.
1 parent 48af604 commit 00fcc0b

File tree

11 files changed

+163
-527
lines changed
  • client/landing/stepper/declarative-flow/internals/steps-repository

11 files changed

+163
-527
lines changed

‎client/landing/stepper/declarative-flow/internals/steps-repository/error-step/index.tsx

Lines changed: 12 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
1-
import { Step, StepContainer } from '@automattic/onboarding';
1+
import { Step } from '@automattic/onboarding';
22
import styled from '@emotion/styled';
33
import { useI18n } from '@wordpress/react-i18n';
44
import { useEffect } from 'react';
55
import DocumentHead from 'calypso/components/data/document-head';
6-
import FormattedHeader from 'calypso/components/formatted-header';
7-
import { shouldUseStepContainerV2MigrationFlow } from 'calypso/landing/stepper/declarative-flow/helpers/should-use-step-container-v2';
8-
import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
96
import { logToLogstash } from 'calypso/lib/logstash';
107
import { useSiteDomains } from '../../../../hooks/use-site-domains';
118
import { useSiteSetupError } from '../../../../hooks/use-site-setup-error';
@@ -21,7 +18,6 @@ const ErrorStep: StepType = function ErrorStep( { flow, variantSlug } ) {
2118
const { __ } = useI18n();
2219
const siteDomains = useSiteDomains();
2320
const { error, message } = useSiteSetupError();
24-
const isUsingStepContainerV2 = shouldUseStepContainerV2MigrationFlow( flow );
2521

2622
let domain = '';
2723

@@ -63,35 +59,18 @@ const ErrorStep: StepType = function ErrorStep( { flow, variantSlug } ) {
6359
'It looks like something went wrong while setting up your site. Please contact support so that we can help you out.'
6460
);
6561

66-
if ( isUsingStepContainerV2 ) {
67-
return (
68-
<>
69-
<DocumentHead title={ headerText } />
70-
<Step.CenteredColumnLayout
71-
columnWidth={ 8 }
72-
topBar={ <Step.TopBar /> }
73-
heading={ <Step.Heading text={ headerText } /> }
74-
>
75-
{ subHeaderText }
76-
{ getContent() }
77-
</Step.CenteredColumnLayout>
78-
</>
79-
);
80-
}
81-
8262
return (
83-
<StepContainer
84-
stepName="error-step"
85-
isHorizontalLayout={ false }
86-
formattedHeader={
87-
<>
88-
<FormattedHeader id="step-error-header" headerText={ headerText } align="left" />
89-
<p>{ subHeaderText }</p>
90-
</>
91-
}
92-
stepContent={ getContent() }
93-
recordTracksEvent={ recordTracksEvent }
94-
/>
63+
<>
64+
<DocumentHead title={ headerText } />
65+
<Step.CenteredColumnLayout
66+
columnWidth={ 8 }
67+
topBar={ <Step.TopBar /> }
68+
heading={ <Step.Heading text={ headerText } /> }
69+
>
70+
{ subHeaderText }
71+
{ getContent() }
72+
</Step.CenteredColumnLayout>
73+
</>
9574
);
9675
};
9776

‎client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-already-wpcom/index.tsx

Lines changed: 9 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
1-
import { Step, StepContainer } from '@automattic/onboarding';
1+
import { Step } from '@automattic/onboarding';
22
import { useTranslate } from 'i18n-calypso';
33
import { useSearchParams } from 'react-router-dom';
44
import DocumentHead from 'calypso/components/data/document-head';
5-
import FormattedHeader from 'calypso/components/formatted-header';
6-
import { shouldUseStepContainerV2MigrationFlow } from 'calypso/landing/stepper/declarative-flow/helpers/should-use-step-container-v2';
7-
import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
85
import Form from './components/form';
96
import type { Step as StepType } from '../../types';
107
import './style.scss';
@@ -18,7 +15,7 @@ const extractDomainFromUrl = ( url: string ) => {
1815
}
1916
};
2017

21-
const SiteMigrationAlreadyWPCOM: StepType = ( { stepName, flow, navigation } ) => {
18+
const SiteMigrationAlreadyWPCOM: StepType = ( { navigation } ) => {
2219
const translate = useTranslate();
2320
const [ query ] = useSearchParams();
2421
const from = query.get( 'from' )!;
@@ -45,42 +42,16 @@ const SiteMigrationAlreadyWPCOM: StepType = ( { stepName, flow, navigation } ) =
4542
navigation?.submit?.();
4643
};
4744

48-
if ( shouldUseStepContainerV2MigrationFlow( flow ) ) {
49-
return (
50-
<>
51-
<DocumentHead title={ translate( 'Your site is already on WordPress.com' ) } />
52-
<Step.CenteredColumnLayout
53-
columnWidth={ 8 }
54-
topBar={
55-
<Step.TopBar leftElement={ <Step.BackButton onClick={ navigation.goBack } /> } />
56-
}
57-
heading={ <Step.Heading text={ title } subText={ subHeaderText } /> }
58-
>
59-
<Form onComplete={ onSubmit } />
60-
</Step.CenteredColumnLayout>
61-
</>
62-
);
63-
}
64-
6545
return (
6646
<>
6747
<DocumentHead title={ translate( 'Your site is already on WordPress.com' ) } />
68-
<StepContainer
69-
stepName={ stepName }
70-
flowName={ flow }
71-
goBack={ navigation?.goBack }
72-
formattedHeader={
73-
<FormattedHeader
74-
subHeaderAs="div"
75-
headerText={ title }
76-
subHeaderText={ subHeaderText }
77-
align="center"
78-
/>
79-
}
80-
isFullLayout
81-
stepContent={ <Form onComplete={ onSubmit } /> }
82-
recordTracksEvent={ recordTracksEvent }
83-
/>
48+
<Step.CenteredColumnLayout
49+
columnWidth={ 8 }
50+
topBar={ <Step.TopBar leftElement={ <Step.BackButton onClick={ navigation.goBack } /> } /> }
51+
heading={ <Step.Heading text={ title } subText={ subHeaderText } /> }
52+
>
53+
<Form onComplete={ onSubmit } />
54+
</Step.CenteredColumnLayout>
8455
</>
8556
);
8657
};

‎client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-application-password-authorization/index.tsx

Lines changed: 13 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
1-
import { Step, StepContainer } from '@automattic/onboarding';
1+
import { Step } from '@automattic/onboarding';
22
import { useTranslate } from 'i18n-calypso';
33
import { useEffect } from 'react';
44
import DocumentHead from 'calypso/components/data/document-head';
5-
import FormattedHeader from 'calypso/components/formatted-header';
6-
import { LoadingEllipsis } from 'calypso/components/loading-ellipsis';
75
import Notice from 'calypso/components/notice';
86
import NoticeAction from 'calypso/components/notice/notice-action';
9-
import { shouldUseStepContainerV2MigrationFlow } from 'calypso/landing/stepper/declarative-flow/helpers/should-use-step-container-v2';
107
import { useQuery } from 'calypso/landing/stepper/hooks/use-query';
118
import { useSiteIdParam } from 'calypso/landing/stepper/hooks/use-site-id-param';
129
import { useSiteSlugParam } from 'calypso/landing/stepper/hooks/use-site-slug-param';
13-
import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
1410
import { useDispatch } from 'calypso/state';
1511
import { resetSite } from 'calypso/state/sites/actions';
1612
import Authorization from './components/authorization';
@@ -23,7 +19,7 @@ const SiteMigrationApplicationPasswordsAuthorization: StepType< {
2319
action: 'migration-started' | 'fallback-credentials' | 'authorization' | 'contact-me';
2420
authorizationUrl?: string;
2521
};
26-
} > = function ( { navigation, flow } ) {
22+
} > = function ( { navigation } ) {
2723
const translate = useTranslate();
2824
const siteSlug = useSiteSlugParam();
2925
const siteId = parseInt( useSiteIdParam() ?? '' );
@@ -45,8 +41,6 @@ const SiteMigrationApplicationPasswordsAuthorization: StepType< {
4541
isAuthorizationSuccessful &&
4642
( isStoreApplicationPasswordSuccess || isStoreApplicationPasswordPending );
4743

48-
const isUsingStepContainerV2 = shouldUseStepContainerV2MigrationFlow( flow );
49-
5044
useEffect( () => {
5145
if ( ! isAuthorizationSuccessful || ! siteSlug ) {
5246
return;
@@ -117,67 +111,29 @@ const SiteMigrationApplicationPasswordsAuthorization: StepType< {
117111
}
118112
);
119113

120-
const formattedHeader = ! isLoading ? (
121-
<FormattedHeader
122-
id="site-migration-credentials-header"
123-
headerText={ translate( 'Get ready for blazing fast speeds' ) }
124-
subHeaderText={ subHeaderText }
125-
align="center"
126-
/>
127-
) : undefined;
128-
129114
const stepContent = (
130115
<Authorization
131116
onAuthorizationClick={ startAuthorization }
132117
onShareCredentialsClick={ navigateToFallbackCredentials }
133118
/>
134119
);
135120

136-
if ( isUsingStepContainerV2 ) {
137-
if ( isLoading ) {
138-
return <Step.Loading title={ title } delay={ 500 } />;
139-
}
140-
return (
141-
<>
142-
<DocumentHead title={ title } />
143-
<Step.CenteredColumnLayout
144-
columnWidth={ 5 }
145-
topBar={
146-
<Step.TopBar leftElement={ <Step.BackButton onClick={ navigation.goBack } /> } />
147-
}
148-
heading={ <Step.Heading text={ title } subText={ subHeaderText } /> }
149-
className="site-migration-application-password-authorization-v2"
150-
>
151-
{ notice }
152-
{ stepContent }
153-
</Step.CenteredColumnLayout>
154-
</>
155-
);
121+
if ( isLoading ) {
122+
return <Step.Loading title={ title } delay={ 500 } />;
156123
}
157124

158125
return (
159126
<>
160127
<DocumentHead title={ title } />
161-
<StepContainer
162-
stepName="site-migration-application-password-authorization"
163-
flowName="site-migration"
164-
goBack={ navigation?.goBack }
165-
notice={ notice }
166-
formattedHeader={ formattedHeader }
167-
stepContent={
168-
! isLoading ? (
169-
<Authorization
170-
onAuthorizationClick={ startAuthorization }
171-
onShareCredentialsClick={ navigateToFallbackCredentials }
172-
/>
173-
) : (
174-
<div data-testid="loading-ellipsis">
175-
<LoadingEllipsis />
176-
</div>
177-
)
178-
}
179-
recordTracksEvent={ recordTracksEvent }
180-
/>
128+
<Step.CenteredColumnLayout
129+
columnWidth={ 5 }
130+
topBar={ <Step.TopBar leftElement={ <Step.BackButton onClick={ navigation.goBack } /> } /> }
131+
heading={ <Step.Heading text={ title } subText={ subHeaderText } /> }
132+
className="site-migration-application-password-authorization-v2"
133+
>
134+
{ notice }
135+
{ stepContent }
136+
</Step.CenteredColumnLayout>
181137
</>
182138
);
183139
};

‎client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-credentials/index.tsx

Lines changed: 14 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
import { useLocale } from '@automattic/i18n-utils';
2-
import { Step, StepContainer } from '@automattic/onboarding';
2+
import { Step } from '@automattic/onboarding';
33
import { useTranslate } from 'i18n-calypso';
44
import { useEffect } from 'react';
55
import { UrlData } from 'calypso/blocks/import/types';
66
import DocumentHead from 'calypso/components/data/document-head';
7-
import FormattedHeader from 'calypso/components/formatted-header';
87
import { MigrationStatus } from 'calypso/data/site-migration/landing/types';
98
import { useUpdateMigrationStatus } from 'calypso/data/site-migration/landing/use-update-migration-status';
10-
import { shouldUseStepContainerV2MigrationFlow } from 'calypso/landing/stepper/declarative-flow/helpers/should-use-step-container-v2';
119
import { useQuery } from 'calypso/landing/stepper/hooks/use-query';
1210
import { useSiteIdParam } from 'calypso/landing/stepper/hooks/use-site-id-param';
1311
import { useSiteSlugParam } from 'calypso/landing/stepper/hooks/use-site-slug-param';
@@ -60,7 +58,7 @@ const SiteMigrationCredentials: StepType< {
6058
authorizationUrl?: string;
6159
hasError?: 'ticket-creation';
6260
};
63-
} > = function ( { navigation, flow } ) {
61+
} > = function ( { navigation } ) {
6462
const translate = useTranslate();
6563
const siteId = parseInt( useSiteIdParam() ?? '' );
6664
const dispatch = useDispatch();
@@ -137,55 +135,29 @@ const SiteMigrationCredentials: StepType< {
137135
}
138136
}, [ siteId, updateMigrationStatus ] );
139137

140-
const isUsingStepContainerV2 = shouldUseStepContainerV2MigrationFlow( flow );
141-
142138
const title = translate( 'Tell us about your WordPress site' );
143139
const subHeaderText = translate(
144140
'Help us get started by providing some basic details about your current website.'
145141
);
146142
const mainForm = <CredentialsForm onSubmit={ handleSubmit } />;
147143
const skipButton = <NeedHelpLink onHelpLinkClicked={ handleSkip } />;
148144

149-
if ( isUsingStepContainerV2 ) {
150-
return (
151-
<>
152-
<DocumentHead title={ title } />
153-
<Step.CenteredColumnLayout
154-
columnWidth={ 5 }
155-
topBar={
156-
<Step.TopBar
157-
leftElement={ <Step.BackButton onClick={ navigation.goBack } /> }
158-
rightElement={ skipButton }
159-
/>
160-
}
161-
heading={ <Step.Heading text={ title } subText={ subHeaderText } /> }
162-
className="site-migration-credentials-v2"
163-
>
164-
{ mainForm }
165-
</Step.CenteredColumnLayout>
166-
</>
167-
);
168-
}
169145
return (
170146
<>
171-
<DocumentHead title={ translate( 'Tell us about your WordPress site' ) } />
172-
<StepContainer
173-
stepName="site-migration-credentials"
174-
flowName="site-migration"
175-
goBack={ navigation?.goBack }
176-
isFullLayout
177-
formattedHeader={
178-
<FormattedHeader
179-
id="site-migration-credentials-header"
180-
headerText={ title }
181-
subHeaderText={ subHeaderText }
182-
align="center"
147+
<DocumentHead title={ title } />
148+
<Step.CenteredColumnLayout
149+
columnWidth={ 5 }
150+
topBar={
151+
<Step.TopBar
152+
leftElement={ <Step.BackButton onClick={ navigation.goBack } /> }
153+
rightElement={ skipButton }
183154
/>
184155
}
185-
stepContent={ mainForm }
186-
recordTracksEvent={ recordTracksEvent }
187-
customizedActionButtons={ skipButton }
188-
/>
156+
heading={ <Step.Heading text={ title } subText={ subHeaderText } /> }
157+
className="site-migration-credentials-v2"
158+
>
159+
{ mainForm }
160+
</Step.CenteredColumnLayout>
189161
</>
190162
);
191163
};

0 commit comments

Comments
 (0)