diff --git a/client/lib/signup/step-actions/index.js b/client/lib/signup/step-actions/index.js index 2379184b2aeb0..3e31e580448b2 100644 --- a/client/lib/signup/step-actions/index.js +++ b/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 = { diff --git a/client/signup/config/flows-pure.js b/client/signup/config/flows-pure.js index 6ec2701b3f29d..c00c45e70d2c2 100644 --- a/client/signup/config/flows-pure.js +++ b/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, }, diff --git a/client/signup/config/flows.js b/client/signup/config/flows.js index 84b5a398572f7..dd77f575435e3 100644 --- a/client/signup/config/flows.js +++ b/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 } ) { diff --git a/client/signup/steps/page-picker/index.tsx b/client/signup/steps/page-picker/index.tsx index d50c1f8c7cb7f..26c57c161c267 100644 --- a/client/signup/steps/page-picker/index.tsx +++ b/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,6 +377,7 @@ const Placeholder = styled.span` function OneClickPurchaseModal( { onClose, siteSlug, + siteId, selectedPages, isStoreFlow, flowName, @@ -384,6 +385,7 @@ function OneClickPurchaseModal( { }: { 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 ( @@ -581,6 +583,7 @@ function DIFMPagePicker( props: StepProps ) { 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 ; @@ -309,7 +316,11 @@ export default function WrapperWebsiteContent( stepName={ stepName } positionInFlow={ positionInFlow } stepContent={ - + } goToNextStep={ false } hideFormattedHeader={ false } diff --git a/client/state/difm/assemblers.ts b/client/state/difm/assemblers.ts index f5ff3b1b483b6..bde7fd220156a 100644 --- a/client/state/difm/assemblers.ts +++ b/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' ), }; } diff --git a/client/state/difm/test/assemblers.ts b/client/state/difm/test/assemblers.ts index d1829d9436b7f..3aaed2466eec2 100644 --- a/client/state/difm/test/assemblers.ts +++ b/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, } ); } ); } ); diff --git a/client/state/signup/steps/website-content/hooks/use-get-website-content-query.ts b/client/state/signup/steps/website-content/hooks/use-get-website-content-query.ts index 468542de72d85..2b808308c27a9 100644 --- a/client/state/signup/steps/website-content/hooks/use-get-website-content-query.ts +++ b/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,