Skip to content

Commit

Permalink
Rollout site migration flow 2025 to all users. (#99301)
Browse files Browse the repository at this point in the history 
* Rollout site migration flow 2025 to all users. Cleanup the experiment variations from code.

* Reintroduce siteItem
  • Loading branch information
@andregardi
andregardi authored Feb 5, 2025
1 parent a0134d0 commit e671334
Show file tree
Hide file tree
Showing 9 changed files with 92 additions and 278 deletions.
9 changes: 0 additions & 9 deletions client/landing/stepper/declarative-flow/internals/hooks/use-migration-experiment/index.ts
View file

This file was deleted.

179 changes: 47 additions & 132 deletions ...epper/declarative-flow/internals/steps-repository/site-migration-how-to-migrate/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,10 @@ import { FC, useCallback, useMemo } from 'react';
import DocumentHead from 'calypso/components/data/document-head';
import FormattedHeader from 'calypso/components/formatted-header';
import { useMigrationCancellation } from 'calypso/data/site-migration/landing/use-migration-cancellation';
import { useAnalyzeUrlQuery } from 'calypso/data/site-profiler/use-analyze-url-query';
import { useHostingProviderQuery } from 'calypso/data/site-profiler/use-hosting-provider-query';
import { HOW_TO_MIGRATE_OPTIONS } from 'calypso/landing/stepper/constants';
import { useQuery } from 'calypso/landing/stepper/hooks/use-query';
import { useSite } from 'calypso/landing/stepper/hooks/use-site';
import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
import { usePresalesChat } from 'calypso/lib/presales-chat';
import useHostingProviderName from 'calypso/site-profiler/hooks/use-hosting-provider-name';
import { useMigrationExperiment } from '../../hooks/use-migration-experiment';
import FlowCard from '../components/flow-card';
import { DIYOption } from './diy-option';
import type { StepProps } from '../../types';
import './style.scss';
Expand All @@ -26,36 +20,13 @@ interface Props extends StepProps {
}

const SiteMigrationHowToMigrate: FC< Props > = ( props ) => {
const { navigation, headerText, stepName, subHeaderText, flow } = props;
const isMigrationExperimentEnabled = useMigrationExperiment( flow );
const { navigation, headerText, stepName, subHeaderText } = props;
const translate = useTranslate();
const importSiteQueryParam = useQuery().get( 'from' ) || '';
const site = useSite();
const { mutate: cancelMigration } = useMigrationCancellation( site?.ID );

usePresalesChat( 'wpcom' );

const options = useMemo(
() => [
{
label: translate( 'Do it for me' ),
description: translate(
"Share your site with us. We'll review it and handle the migration if possible."
),
value: HOW_TO_MIGRATE_OPTIONS.DO_IT_FOR_ME,
selected: true,
},
{
label: translate( "I'll do it myself" ),
description: translate(
'Install the plugin yourself, find the migration key and migrate the site.'
),
value: HOW_TO_MIGRATE_OPTIONS.DO_IT_MYSELF,
},
],
[ translate ]
);

// Extract the display of items to a separate component if we keep this version post-experiment,
// as this format is also used on the site identification page and further into the DIFM flow.
const experimentalOptions = useMemo(
Expand Down Expand Up @@ -88,19 +59,6 @@ const SiteMigrationHowToMigrate: FC< Props > = ( props ) => {
[ translate ]
);

let importSiteHostName = '';

try {
importSiteHostName = new URL( importSiteQueryParam )?.hostname;
} catch ( e ) {}

const { data: urlData } = useAnalyzeUrlQuery( importSiteQueryParam, true );
const { data: hostingProviderData } = useHostingProviderQuery( importSiteHostName, true );
const hostingProviderName = useHostingProviderName(
hostingProviderData?.hosting_provider,
urlData
);

const handleClick = async ( value: string ) => {
const canInstallPlugins = site?.plan?.features?.active.find(
( feature ) => feature === 'install-plugins'
Expand All @@ -121,98 +79,61 @@ const SiteMigrationHowToMigrate: FC< Props > = ( props ) => {
}, [ cancelMigration, navigation ] );

const renderSubHeaderText = () => {
if ( isMigrationExperimentEnabled ) {
const planName = getPlan( PLAN_BUSINESS )?.getTitle() ?? '';
const isBusinessPlan = site?.plan?.product_slug
? isWpComBusinessPlan( site?.plan?.product_slug )
: false;

return isBusinessPlan
? // translators: %(planName)s is the name of the Business plan.
translate(
'Save yourself the headache of migrating. Our expert team takes care of everything without interrupting your current site. Plus it’s included in your %(planName)s plan.',
{
args: {
planName,
},
}
)
: translate(
'Save yourself the headache of migrating. Our expert team takes care of everything without interrupting your current site. Plus you get 50% off our annual %(planName)s plan.',
{
args: {
planName,
},
}
);
}

// Maybe extract this code to a separate component if we keep it post-experiment.
const hostingProviderSlug = hostingProviderData?.hosting_provider?.slug;
const shouldDisplayHostIdentificationMessage =
hostingProviderSlug &&
hostingProviderSlug !== 'unknown' &&
hostingProviderSlug !== 'automattic';
const planName = getPlan( PLAN_BUSINESS )?.getTitle() ?? '';
const isBusinessPlan = site?.plan?.product_slug
? isWpComBusinessPlan( site?.plan?.product_slug )
: false;

return shouldDisplayHostIdentificationMessage
? // translators: %(hostingProviderName)s is the name of the hosting provider.
translate( 'Your WordPress site is hosted with %(hostingProviderName)s.', {
args: { hostingProviderName },
} )
: '';
return isBusinessPlan
? // translators: %(planName)s is the name of the Business plan.
translate(
'Save yourself the headache of migrating. Our expert team takes care of everything without interrupting your current site. Plus it’s included in your %(planName)s plan.',
{
args: {
planName,
},
}
)
: translate(
'Save yourself the headache of migrating. Our expert team takes care of everything without interrupting your current site. Plus you get 50% off our annual %(planName)s plan.',
{
args: {
planName,
},
}
);
};

const renderStepContent = () => {
if ( isMigrationExperimentEnabled ) {
return (
<div className="how-to-migrate__experiment-expectations">
<NextButton onClick={ () => handleClick( HOW_TO_MIGRATE_OPTIONS.DO_IT_FOR_ME ) }>
{ translate( 'Get started' ) }
</NextButton>
<div className="how-to-migrate__process-details">
<p className="how-to-migrate__process-details-title">{ translate( 'How it works' ) }</p>
<ul className="how-to-migrate__process-details-list">
{ experimentalOptions.map( ( option, index ) => (
<li key={ index } className="how-to-migrate__process-details-list-item">
<Icon
className="how-to-migrate__process-details-icon"
icon={ option.icon }
size={ 24 }
/>
<p className="how-to-migrate__process-details-description">
{ option.description }
</p>
</li>
) ) }
</ul>
</div>
</div>
);
}

return (
<div className="how-to-migrate__list">
{ options.map( ( option, i ) => (
<FlowCard
key={ i }
title={ option.label }
text={ option.description }
onClick={ () => handleClick( option.value ) }
/>
) ) }
<div className="how-to-migrate__experiment-expectations">
<NextButton onClick={ () => handleClick( HOW_TO_MIGRATE_OPTIONS.DO_IT_FOR_ME ) }>
{ translate( 'Get started' ) }
</NextButton>
<div className="how-to-migrate__process-details">
<p className="how-to-migrate__process-details-title">{ translate( 'How it works' ) }</p>
<ul className="how-to-migrate__process-details-list">
{ experimentalOptions.map( ( option, index ) => (
<li key={ index } className="how-to-migrate__process-details-list-item">
<Icon
className="how-to-migrate__process-details-icon"
icon={ option.icon }
size={ 24 }
/>
<p className="how-to-migrate__process-details-description">
{ option.description }
</p>
</li>
) ) }
</ul>
</div>
</div>
);
};

return (
<>
<DocumentHead
title={
isMigrationExperimentEnabled
? translate( 'Let us migrate your site' )
: translate( 'How do you want to migrate?' )
}
/>
<DocumentHead title={ translate( 'Let us migrate your site' ) } />
<StepContainer
stepName={ stepName ?? 'site-migration-how-to-migrate' }
className="how-to-migrate"
Expand All @@ -221,21 +142,15 @@ const SiteMigrationHowToMigrate: FC< Props > = ( props ) => {
formattedHeader={
<FormattedHeader
id="how-to-migrate-header"
headerText={
headerText ?? isMigrationExperimentEnabled
? translate( 'Let us migrate your site' )
: translate( 'How do you want to migrate?' )
}
headerText={ headerText ?? translate( 'Let us migrate your site' ) }
subHeaderText={ subHeaderText || renderSubHeaderText() }
align="center"
/>
}
stepContent={ renderStepContent() }
recordTracksEvent={ recordTracksEvent }
goBack={ goBack }
customizedActionButtons={
isMigrationExperimentEnabled ? <DIYOption onClick={ handleClick } /> : undefined
}
customizedActionButtons={ <DIYOption onClick={ handleClick } /> }
/>
</>
);
Expand Down
12 changes: 0 additions & 12 deletions .../declarative-flow/internals/steps-repository/site-migration-how-to-migrate/test/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { screen } from '@testing-library/react';
import { ComponentProps } from 'react';
import { useSite } from 'calypso/landing/stepper/hooks/use-site';
import SiteMigrationHowToMigrate from '../';
import { useMigrationExperiment } from '../../../hooks/use-migration-experiment';
import { defaultSiteDetails } from '../../launchpad/test/lib/fixtures';
import { mockStepProps, renderStep, RenderStepOptions } from '../../test/helpers';

Expand All @@ -27,18 +26,7 @@ jest.mock( 'calypso/lib/presales-chat', () => ( {
usePresalesChat: () => {},
} ) );

jest.mock(
'calypso/landing/stepper/declarative-flow/internals/hooks/use-migration-experiment/index.ts',
() => ( {
useMigrationExperiment: jest.fn( ( flowName: string ) => flowName === 'site-migration' ),
} )
);

describe( 'SiteMigrationHowToMigrate', () => {
beforeEach( () => {
( useMigrationExperiment as jest.Mock ).mockReturnValue( true );
} );

afterEach( () => {
jest.resetAllMocks();
} );
Expand Down
Loading

0 comments on commit e671334

Please sign in to comment.