DIFM: redirect using siteId instead of siteSlug

client/lib/signup/step-actions/index.js

@@ -363,13 +363,14 @@ export function setThemeOnSite( callback, { siteSlug, themeSlugWithRepo, themeSt
 }
 
 function addDIFMLiteProductToCart( callback, dependencies, step, reduxStore ) {
-	const { selectedDesign, selectedSiteCategory, isLetUsChooseSelected, siteSlug } = dependencies;
+	const { selectedDesign, selectedSiteCategory, isLetUsChooseSelected, siteSlug, siteId } =
+		dependencies;
 	if ( step.lastKnownFlow === 'do-it-for-me-store' ) {
 		dependencies.isStoreFlow = true;
 	}
 	const extra = buildDIFMCartExtrasObject(
 		dependencies,
-		siteSlug,
+		siteId,
 		`step-actions-flow-${ step.lastKnownFlow || '' }`
 	);
 	const cartItem = {

client/signup/config/flows-pure.js

@@ -493,7 +493,8 @@ export function generateFlows( {
 			destination: getDIFMSiteContentCollectionDestination,
 			description: 'A flow to collect DIFM lite site content',
 			excludeFromManageSiteFlows: true,
-			providesDependenciesInQuery: [ 'siteSlug' ],
+			providesDependenciesInQuery: [ 'siteId', 'siteSlug' ],
+			optionalDependenciesInQuery: [ 'siteId', 'siteSlug' ],
 			lastModified: '2024-06-14',
 			hideProgressIndicator: true,
 		},

client/signup/config/flows.js

@@ -199,8 +199,8 @@ function getDestinationFromIntent( dependencies ) {
 	return getChecklistThemeDestination( dependencies );
 }
 
-function getDIFMSignupDestination( { siteSlug } ) {
-	return addQueryArgs( { siteSlug }, '/start/site-content-collection' );
+function getDIFMSignupDestination( { siteId } ) {
+	return addQueryArgs( { siteId }, '/start/site-content-collection' );
 }
 
 function getDIFMSiteContentCollectionDestination( { siteSlug } ) {

client/signup/steps/page-picker/index.tsx

@@ -53,12 +53,12 @@ import { getProductBySlug } from 'calypso/state/products-list/selectors';
 import { getSignupDependencyStore } from 'calypso/state/signup/dependency-store/selectors';
 import { saveSignupStep, submitSignupStep } from 'calypso/state/signup/progress/actions';
 import { getSiteId, getSitePlan } from 'calypso/state/sites/selectors';
-import { SiteSlug } from 'calypso/types';
 import ShoppingCartForDIFM from './shopping-cart-for-difm';
 import useCartForDIFM from './use-cart-for-difm';
 import type { PageId } from 'calypso/signup/difm/constants';
 import type { BBETranslationContext } from 'calypso/signup/difm/translation-hooks';
 import type { Dependencies } from 'calypso/signup/types';
+import type { SiteId, SiteSlug } from 'calypso/types';
 
 import './style.scss';
 
@@ -377,13 +377,15 @@ const Placeholder = styled.span`
 function OneClickPurchaseModal( {
 	onClose,
 	siteSlug,
+	siteId,
 	selectedPages,
 	isStoreFlow,
 	flowName,
 	coupon,
 }: {
 	onClose: () => void;
 	siteSlug: SiteSlug;
+	siteId: SiteId;
 	selectedPages: string[];
 	isStoreFlow: boolean;
 	flowName: string;
@@ -400,12 +402,12 @@ function OneClickPurchaseModal( {
 					selectedPageTitles: selectedPages,
 					isStoreFlow,
 				},
-				siteSlug,
+				siteId,
 				`page-picker-one-click-modal-flow-${ flowName }`
 			),
 			quantity: selectedPages.length,
 		} );
-	}, [ flowName, isStoreFlow, selectedPages, signupDependencies, siteSlug ] );
+	}, [ flowName, isStoreFlow, selectedPages, signupDependencies, siteId ] );
 
 	return (
 		<CalypsoShoppingCartProvider>
@@ -581,6 +583,7 @@ function DIFMPagePicker( props: StepProps ) {
 						<OneClickPurchaseModal
 							onClose={ handleModalOnClose }
 							siteSlug={ siteSlug }
+							siteId={ siteId }
 							selectedPages={ selectedPages }
 							isStoreFlow={ isStoreFlow }
 							flowName={ flowName }

client/signup/steps/website-content/index.tsx

@@ -222,10 +222,17 @@ export default function WrapperWebsiteContent(
 ) {
 	const { skippedCheckout } = useSelector( getInitialQueryArguments ) ?? {};
 	const { flowName, stepName, positionInFlow, queryObject } = props;
+	const { siteId: siteIdFromQuery, siteSlug: siteSlugFromQuery } = queryObject;
 	const translate = useTranslate();
-	const siteId = useSelector( ( state ) => getSiteId( state, queryObject.siteSlug as string ) );
+	const siteIdFromSiteSlug = useSelector( ( state ) =>
+		getSiteId( state, siteSlugFromQuery as string )
+	);
+
+	const selectedSiteId = isNaN( Number( siteIdFromQuery ) )
+		? siteIdFromSiteSlug
+		: Number( siteIdFromQuery );
 
-	const { isLoading, isError, data } = useGetWebsiteContentQuery( queryObject.siteSlug );
+	const { isLoading, isError, data } = useGetWebsiteContentQuery( selectedSiteId );
 
 	const [ isContentGuidelinesDialogOpen, setIsContentGuidelinesDialogOpen ] = useState( true );
 
@@ -258,16 +265,16 @@ export default function WrapperWebsiteContent(
 	useEffect( () => {
 		if ( data?.isWebsiteContentSubmitted ) {
 			debug( 'Website content content already submitted, redirecting to home' );
-			page( `/home/${ queryObject.siteSlug }` );
+			page( `/home/${ selectedSiteId }` );
 		}
-	}, [ data, queryObject.siteSlug ] );
+	}, [ data, selectedSiteId ] );
 
 	useEffect( () => {
 		if ( skippedCheckout === '1' ) {
 			debug( 'User did not make a DIFM purchase, redirecting to home' );
-			page( `/home/${ queryObject.siteSlug }` );
+			page( `/home/${ selectedSiteId }` );
 		}
-	}, [ skippedCheckout, queryObject.siteSlug ] );
+	}, [ skippedCheckout, selectedSiteId ] );
 
 	if ( isLoading ) {
 		return <Loader />;
@@ -309,7 +316,11 @@ export default function WrapperWebsiteContent(
 				stepName={ stepName }
 				positionInFlow={ positionInFlow }
 				stepContent={
-					<WebsiteContentStep { ...props } websiteContentServerState={ data } siteId={ siteId } />
+					<WebsiteContentStep
+						{ ...props }
+						websiteContentServerState={ data }
+						siteId={ selectedSiteId }
+					/>
 				}
 				goToNextStep={ false }
 				hideFormattedHeader={ false }

client/state/difm/assemblers.ts

@@ -7,7 +7,7 @@ import type {
 	WebsiteContent,
 	WebsiteContentRequestDTO,
 } from 'calypso/state/signup/steps/website-content/types';
-import type { SiteSlug } from 'calypso/types';
+import type { SiteId } from 'calypso/types';
 
 const logValidationFailure = (
 	message: string,
@@ -28,7 +28,7 @@ const logValidationFailure = (
 
 export function buildDIFMCartExtrasObject(
 	dependencies: Partial< DIFMDependencies >,
-	siteSlug: SiteSlug,
+	siteId: SiteId,
 	context: string
 ) {
 	const {
@@ -76,7 +76,7 @@ export function buildDIFMCartExtrasObject(
 		display_address: displayAddress,
 		selected_page_titles: selectedPageTitles,
 		is_store_flow: isStoreFlow,
-		afterPurchaseUrl: addQueryArgs( { siteSlug }, '/start/site-content-collection' ),
+		afterPurchaseUrl: addQueryArgs( { siteId }, '/start/site-content-collection' ),
 	};
 }
 

client/state/difm/test/assemblers.ts

@@ -18,8 +18,8 @@ describe( 'assembler', () => {
 			displayAddress: 'test displayAddress',
 			selectedPageTitles: [ 'test1', 'test2' ],
 		};
-		const siteSlug = 'testsiteslug';
-		expect( buildDIFMCartExtrasObject( dependencies, siteSlug, 'test-context' ) ).toEqual( {
+		const siteId = 100;
+		expect( buildDIFMCartExtrasObject( dependencies, siteId, 'test-context' ) ).toEqual( {
 			twitter_url: 'test twitterUrl',
 			facebook_url: 'test facebookUrl',
 			linkedin_url: 'test linkedinUrl',
@@ -34,7 +34,9 @@ describe( 'assembler', () => {
 			site_description: 'test tagline',
 			site_title: 'test title',
 			selected_page_titles: [ 'test1', 'test2' ],
-			afterPurchaseUrl: '/start/site-content-collection?siteSlug=testsiteslug',
+			afterPurchaseUrl: '/start/site-content-collection?siteId=100',
+			is_store_flow: undefined,
+			search_terms: undefined,
 		} );
 	} );
 } );

client/state/signup/steps/website-content/hooks/use-get-website-content-query.ts

@@ -2,17 +2,17 @@ import { mapRecordKeysRecursively, snakeToCamelCase } from '@automattic/js-utils
 import { useQuery } from '@tanstack/react-query';
 import wpcom from 'calypso/lib/wp';
 import type { WebsiteContentResponseDTO, WebsiteContentServerState } from '../types';
-import type { SiteSlug } from 'calypso/types';
+import type { SiteId, SiteSlug } from 'calypso/types';
 
-export function useGetWebsiteContentQuery( siteSlug: SiteSlug | undefined | null ) {
+export function useGetWebsiteContentQuery( siteSlugOrId: SiteSlug | SiteId | undefined | null ) {
 	return useQuery< WebsiteContentResponseDTO, unknown, WebsiteContentServerState >( {
-		queryKey: [ 'bbe-website-content', siteSlug ],
+		queryKey: [ 'bbe-website-content', siteSlugOrId ],
 		queryFn: (): Promise< WebsiteContentResponseDTO > =>
 			wpcom.req.get( {
-				path: `/sites/${ siteSlug }/do-it-for-me/website-content`,
+				path: `/sites/${ siteSlugOrId }/do-it-for-me/website-content`,
 				apiNamespace: 'wpcom/v2',
 			} ),
-		enabled: !! siteSlug,
+		enabled: !! siteSlugOrId,
 		meta: { persist: false },
 		select: ( data: WebsiteContentResponseDTO ) => ( {
 			selectedPageTitles: data.selected_page_titles,