Bulk Domain Transfer: Apply new routing (#78806)

* BulkDomainTransfer: apply new routing

* Renaming to domain-transfer

* Update flow progress

* Change type

* Fix action types

* Fix data-stores

---------

Co-authored-by: escapemanuele <escapemanuele@gmail.com>

client/landing/stepper/declarative-flow/bulk-domain-transfer.ts → client/landing/stepper/declarative-flow/domain-transfer.ts

@@ -1,5 +1,5 @@
 import { useLocale } from '@automattic/i18n-utils';
-import { useFlowProgress, BULK_DOMAIN_TRANSFER } from '@automattic/onboarding';
+import { useFlowProgress, DOMAIN_TRANSFER } from '@automattic/onboarding';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { translate } from 'i18n-calypso';
 import {
@@ -13,20 +13,20 @@ import { recordSubmitStep } from './internals/analytics/record-submit-step';
 import type { Flow, ProvidedDependencies } from './internals/types';
 import type { UserSelect } from '@automattic/data-stores';
 
-const bulkDomainTransfer: Flow = {
-	name: BULK_DOMAIN_TRANSFER,
+const domainTransfer: Flow = {
+	name: DOMAIN_TRANSFER,
 	get title() {
 		return translate( 'Bulk domain transfer' );
 	},
 	useSteps() {
 		return [
 			{
 				slug: 'intro',
-				asyncComponent: () => import( './internals/steps-repository/bulk-domain-transfer-intro' ),
+				asyncComponent: () => import( './internals/steps-repository/domain-transfer-intro' ),
 			},
 			{
 				slug: 'domains',
-				asyncComponent: () => import( './internals/steps-repository/bulk-domain-transfer-domains' ),
+				asyncComponent: () => import( './internals/steps-repository/domain-transfer-domains' ),
 			},
 			{
 				slug: 'processing',
@@ -74,10 +74,7 @@ const bulkDomainTransfer: Flow = {
 					setSignupCompleteFlowName( flowName );
 					const returnUrl = encodeURIComponent( destination );
 
-					const checkoutBackURL = new URL(
-						'/setup/bulk-domain-transfer/domains',
-						window.location.href
-					);
+					const checkoutBackURL = new URL( '/setup/domain-transfer/domains', window.location.href );
 
 					// use replace instead of assign to remove the processing URL from history
 					return window.location.replace(
@@ -104,4 +101,4 @@ const bulkDomainTransfer: Flow = {
 	},
 };
 
-export default bulkDomainTransfer;
+export default domainTransfer;

client/landing/stepper/declarative-flow/internals/global.scss

@@ -89,7 +89,7 @@ button {
 .setup-blog,
 .celebration-step,
 .use-my-domain,
-.bulk-domain-transfer,
+.domain-transfer,
 .update-design {
 	padding: 60px 0 0;
 	box-sizing: border-box;

client/landing/stepper/declarative-flow/internals/steps-repository/bulk-domain-transfer-domains/domains.tsx → client/landing/stepper/declarative-flow/internals/steps-repository/domain-transfer-domains/domains.tsx

@@ -1,4 +1,4 @@
-import { BulkDomainTransferData } from '@automattic/data-stores';
+import { DomainTransferData } from '@automattic/data-stores';
 import { useDataLossWarning } from '@automattic/onboarding';
 import { Button } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
@@ -17,7 +17,7 @@ export interface Props {
 	onSubmit: () => void;
 }
 
-const defaultState: BulkDomainTransferData = {
+const defaultState: DomainTransferData = {
 	[ uuid() ]: {
 		domain: '',
 		auth: '',
@@ -38,7 +38,7 @@ const Domains: React.FC< Props > = ( { onSubmit } ) => {
 		( { valid } ) => valid
 	).length;
 
-	const { setPendingAction, setBulkDomainsData } = useDispatch( ONBOARD_STORE );
+	const { setPendingAction, setDomainsTransferData } = useDispatch( ONBOARD_STORE );
 
 	const { __, _n } = useI18n();
 
@@ -81,7 +81,7 @@ const Domains: React.FC< Props > = ( { onSubmit } ) => {
 		( id: string, value: { domain: string; auth: string; valid: boolean } ) => {
 			const newDomainsState = { ...domainsState };
 			newDomainsState[ id ] = value;
-			setBulkDomainsData( newDomainsState );
+			setDomainsTransferData( newDomainsState );
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[ changeKey ]
@@ -94,13 +94,13 @@ const Domains: React.FC< Props > = ( { onSubmit } ) => {
 			auth: '',
 			valid: false,
 		};
-		setBulkDomainsData( newDomainsState );
+		setDomainsTransferData( newDomainsState );
 	}
 
 	function removeDomain( key: string ) {
 		const newDomainsState = { ...domainsState };
 		delete newDomainsState[ key ];
-		setBulkDomainsData( newDomainsState );
+		setDomainsTransferData( newDomainsState );
 	}
 
 	return (

client/landing/stepper/declarative-flow/internals/steps-repository/bulk-domain-transfer-domains/index.tsx → client/landing/stepper/declarative-flow/internals/steps-repository/domain-transfer-domains/index.tsx

@@ -24,7 +24,7 @@ const Intro: Step = function Intro( { navigation, flow } ) {
 			isLargeSkipLayout={ false }
 			formattedHeader={
 				<FormattedHeader
-					id="bulk-domains-header"
+					id="domain-transfer-header"
 					headerText={ __( 'Add unlocked domains' ) }
 					align="left"
 				/>

client/landing/stepper/declarative-flow/internals/steps-repository/bulk-domain-transfer-domains/styles.scss → client/landing/stepper/declarative-flow/internals/steps-repository/domain-transfer-domains/styles.scss

@@ -1,7 +1,7 @@
 @import "@wordpress/base-styles/breakpoints";
 @import "@automattic/onboarding/styles/mixins";
 
-.bulk-domain-transfer {
+.domain-transfer {
 	height: 100%;
 	padding: 60px 0 0;
 	margin: 0 auto;

client/landing/stepper/declarative-flow/internals/steps-repository/bulk-domain-transfer-intro/index.tsx → client/landing/stepper/declarative-flow/internals/steps-repository/domain-transfer-intro/index.tsx

@@ -21,7 +21,7 @@ const Intro: Step = function Intro( { navigation } ) {
 			isLargeSkipLayout={ false }
 			formattedHeader={
 				<FormattedHeader
-					id="bulk-domains-header"
+					id="domain-transfer-header"
 					headerText={ __( 'Transfer domains' ) }
 					subHeaderText={ __( 'Follow along these 3 steps to transfer domains to WordPress.com' ) }
 				/>

client/landing/stepper/declarative-flow/internals/steps-repository/bulk-domain-transfer-intro/styles.scss → client/landing/stepper/declarative-flow/internals/steps-repository/domain-transfer-intro/styles.scss

@@ -4,9 +4,9 @@
 $font-family: "SF Pro Text", $sans;
 $heading-font-family: "SF Pro Display", $sans;
 
-
-.bulk-domain-transfer {
-	height: auto;
+.domain-transfer {
+	height: 100%;
+	padding: 60px 0 0;
 	margin: 0 auto;
 	max-width: 1024px;
 	display: flex;
@@ -169,7 +169,4 @@ $heading-font-family: "SF Pro Display", $sans;
 		display: flex;
 		align-items: center;
 	}
-
-
 }
-

client/landing/stepper/declarative-flow/registered-flows.ts

@@ -7,7 +7,7 @@ import {
 	DESIGN_FIRST_FLOW,
 	TRANSFERRING_HOSTED_SITE_FLOW,
 	IMPORT_HOSTED_SITE_FLOW,
-	BULK_DOMAIN_TRANSFER,
+	DOMAIN_TRANSFER,
 	ONBOARDING_PM_FLOW,
 } from '@automattic/onboarding';
 import type { Flow } from '../declarative-flow/internals/types';
@@ -111,10 +111,8 @@ availableFlows[ 'plugin-bundle' ] = () =>
 	import( /* webpackChunkName: "plugin-bundle-flow" */ '../declarative-flow/plugin-bundle-flow' );
 
 if ( config.isEnabled( 'bulk-domain-transfer-flow' ) ) {
-	availableFlows[ BULK_DOMAIN_TRANSFER ] = () =>
-		import(
-			/* webpackChunkName: "bulk-domain-transfer" */ '../declarative-flow/bulk-domain-transfer'
-		);
+	availableFlows[ DOMAIN_TRANSFER ] = () =>
+		import( /* webpackChunkName: "domain-transfer" */ './domain-transfer' );
 }
 
 export default availableFlows;

packages/data-stores/src/onboard/actions.ts

@@ -5,7 +5,7 @@ import { STORE_KEY as SITE_STORE } from '../site';
 import { CreateSiteParams, Visibility, NewSiteBlogDetails } from '../site/types';
 import { SiteGoal, STORE_KEY } from './constants';
 import { ProfilerData } from './types';
-import type { BulkDomainTransferData, State } from '.';
+import type { DomainTransferData, State } from '.';
 import type { DomainSuggestion } from '../domain-suggestions';
 import type { FeatureId } from '../shared-types';
 // somewhat hacky, but resolves the circular dependency issue
@@ -451,8 +451,8 @@ export const setDomainCartItem = ( domainCartItem: MinimalRequestCartProduct | u
 	domainCartItem,
 } );
 
-export const setBulkDomainsData = ( bulkDomainsData: BulkDomainTransferData | undefined ) => ( {
-	type: 'SET_BULK_DOMAINS_DATA' as const,
+export const setDomainsTransferData = ( bulkDomainsData: DomainTransferData | undefined ) => ( {
+	type: 'SET_DOMAINS_TRANSFER_DATA' as const,
 	bulkDomainsData,
 } );
 
@@ -493,7 +493,7 @@ export type OnboardAction = ReturnType<
 	| typeof resetOnboardStore
 	| typeof resetOnboardStoreWithSkipFlags
 	| typeof setStoreType
-	| typeof setBulkDomainsData
+	| typeof setDomainsTransferData
 	| typeof setDomain
 	| typeof setDomainCategory
 	| typeof setDomainSearch

packages/data-stores/src/onboard/index.ts

@@ -35,7 +35,7 @@ export function register(): typeof STORE_KEY {
 			'anchorPodcastId',
 			'anchorEpisodeId',
 			'anchorSpotifyUrl',
-			'bulkDomainNames',
+			'domainTransferNames',
 			'domain',
 			'domainSearch',
 			'domainForm',

packages/data-stores/src/onboard/reducer.ts

@@ -4,8 +4,8 @@ import type { OnboardAction } from './actions';
 import type {
 	DomainForm,
 	ProfilerData,
-	BulkDomainTransferNames,
-	BulkDomainTransferAuthCodes,
+	DomainTransferNames,
+	DomainTransferAuthCodes,
 } from './types';
 import type { DomainSuggestion } from '../domain-suggestions';
 import type { FeatureId } from '../shared-types';
@@ -524,20 +524,20 @@ export const profilerData: Reducer< ProfilerData | undefined, OnboardAction > =
 	return state;
 };
 
-export const bulkDomainNames: Reducer< BulkDomainTransferNames | undefined, OnboardAction > = (
+export const domainTransferNames: Reducer< DomainTransferNames | undefined, OnboardAction > = (
 	state,
 	action
 ) => {
-	if ( action.type === 'SET_BULK_DOMAINS_DATA' ) {
+	if ( action.type === 'SET_DOMAINS_TRANSFER_DATA' ) {
 		// we don't want to store empty objects
 		if ( action.bulkDomainsData && Object.keys( action.bulkDomainsData ).length > 0 ) {
 			// remove auth codes for safety
 			return Object.entries( action.bulkDomainsData ).reduce(
-				( bulkDomainNames, [ key, value ] ) => {
-					bulkDomainNames[ key ] = value.domain;
-					return bulkDomainNames;
+				( domainTransferNames, [ key, value ] ) => {
+					domainTransferNames[ key ] = value.domain;
+					return domainTransferNames;
 				},
-				{} as BulkDomainTransferNames
+				{} as DomainTransferNames
 			);
 		}
 		return undefined;
@@ -551,17 +551,17 @@ export const bulkDomainNames: Reducer< BulkDomainTransferNames | undefined, Onbo
 /**
  * A separate reducer for auth codes to avoid persisting sensitive data.
  */
-export const bulkDomainAuthCodes: Reducer<
-	BulkDomainTransferAuthCodes | undefined,
+export const domainTransferAuthCodes: Reducer<
+	DomainTransferAuthCodes | undefined,
 	OnboardAction
 > = ( state, action ) => {
-	if ( action.type === 'SET_BULK_DOMAINS_DATA' ) {
+	if ( action.type === 'SET_DOMAINS_TRANSFER_DATA' ) {
 		// we don't want to store empty objects
 		if ( action.bulkDomainsData && Object.keys( action.bulkDomainsData ).length > 0 ) {
 			return Object.entries( action.bulkDomainsData ).reduce( ( authCodes, [ key, value ] ) => {
 				authCodes[ key ] = { auth: value.auth, valid: value.valid };
 				return authCodes;
-			}, {} as BulkDomainTransferAuthCodes );
+			}, {} as DomainTransferAuthCodes );
 		}
 		return undefined;
 	}
@@ -594,8 +594,8 @@ const reducer = combineReducers( {
 	hasUsedDomainsStep,
 	hasUsedPlansStep,
 	selectedFeatures,
-	bulkDomainNames,
-	bulkDomainAuthCodes,
+	domainTransferNames,
+	domainTransferAuthCodes,
 	storeType,
 	selectedFonts,
 	selectedDesign,

packages/data-stores/src/onboard/selectors.ts

@@ -1,4 +1,4 @@
-import { BulkDomainTransferData } from './types';
+import { DomainTransferData } from './types';
 import type { State } from './reducer';
 export const getAnchorPodcastId = ( state: State ) => state.anchorPodcastId;
 export const getAnchorEpisodeId = ( state: State ) => state.anchorEpisodeId;
@@ -11,18 +11,18 @@ export const getAnchorSpotifyUrl = ( state: State ) => state.anchorSpotifyUrl;
  * @returns
  */
 export const getBulkDomainsData = ( state: State ) => {
-	if ( ! state.bulkDomainNames ) {
+	if ( ! state.domainTransferNames ) {
 		return undefined;
 	}
-	const bulkDomainTransferData: BulkDomainTransferData = {};
-	for ( const key in state.bulkDomainNames ) {
-		bulkDomainTransferData[ key ] = {
-			domain: state.bulkDomainNames[ key ],
-			auth: state.bulkDomainAuthCodes?.[ key ].auth ?? '',
-			valid: state.bulkDomainAuthCodes?.[ key ].valid ?? false,
+	const domainTransferData: DomainTransferData = {};
+	for ( const key in state.domainTransferNames ) {
+		domainTransferData[ key ] = {
+			domain: state.domainTransferNames[ key ],
+			auth: state.domainTransferAuthCodes?.[ key ].auth ?? '',
+			valid: state.domainTransferAuthCodes?.[ key ].valid ?? false,
 		};
 	}
-	return bulkDomainTransferData;
+	return domainTransferData;
 };
 export const getIsRedirecting = ( state: State ) => state.isRedirecting;
 export const getPlanProductId = ( state: State ) => state.planProductId;

packages/data-stores/src/onboard/types.ts

@@ -12,17 +12,17 @@ export interface ProfilerData {
 	[ key: string ]: string | number | boolean | string[] | number[];
 }
 
-export type BulkDomainTransferNames = Record< string, string >;
+export type DomainTransferNames = Record< string, string >;
 
-export type BulkDomainTransferAuthCodes = Record<
+export type DomainTransferAuthCodes = Record<
 	string,
 	{
 		auth: string;
 		valid: boolean;
 	}
 >;
 
-export type BulkDomainTransferData = Record<
+export type DomainTransferData = Record<
 	string,
 	{
 		domain: string;

packages/onboarding/src/flow-progress/use-flow-progress.ts

@@ -6,7 +6,7 @@ import {
 	FREE_FLOW,
 	COPY_SITE_FLOW,
 	ONBOARDING_PM_FLOW,
-	BULK_DOMAIN_TRANSFER,
+	DOMAIN_TRANSFER,
 } from '../utils/flows';
 
 /* eslint-disable no-restricted-imports */
@@ -96,7 +96,7 @@ const flows: Record< string, { [ step: string ]: number } > = {
 		domains: 1,
 		plans: 2,
 	},
-	[ BULK_DOMAIN_TRANSFER ]: {
+	[ DOMAIN_TRANSFER ]: {
 		user: 0,
 		intro: 1,
 		domains: 2,

packages/onboarding/src/utils/flows.ts

@@ -27,7 +27,7 @@ export const WITH_THEME_FLOW = 'with-theme';
 export const WITH_THEME_ASSEMBLER_FLOW = 'with-theme-assembler';
 export const UPDATE_DESIGN_FLOW = 'update-design';
 export const DOMAIN_UPSELL_FLOW = 'domain-upsell';
-export const BULK_DOMAIN_TRANSFER = 'bulk-domain-transfer';
+export const DOMAIN_TRANSFER = 'domain-transfer';
 export const ONBOARDING_PM_FLOW = 'onboarding-media';
 
 export const isOnboardingPMFlow = ( flowName: string | null | undefined ) => {