Theme Discovery: Add the Assembler CTA and Randomize the Collections

client/components/themes-list/get-site-assembler-url.js

@@ -0,0 +1,22 @@
+import { WITH_THEME_ASSEMBLER_FLOW } from '@automattic/onboarding';
+
+export default function getSiteAssemblerUrl( {
+	isLoggedIn,
+	selectedSite,
+	shouldGoToAssemblerStep,
+	siteEditorUrl,
+} ) {
+	if ( isLoggedIn && selectedSite && ! shouldGoToAssemblerStep ) {
+		return siteEditorUrl;
+	}
+
+	// Redirect people to create a site first if they don't log in or they have no sites.
+	const basePathname = isLoggedIn && selectedSite ? '/setup' : '/start';
+	const params = new URLSearchParams( { ref: 'calypshowcase' } );
+
+	if ( selectedSite?.slug ) {
+		params.set( 'siteSlug', selectedSite.slug );
+	}
+
+	return `${ basePathname }/${ WITH_THEME_ASSEMBLER_FLOW }?${ params }`;
+}

client/components/themes-list/index.jsx

@@ -5,7 +5,6 @@ import {
 	usePatternAssemblerCtaData,
 	isAssemblerSupported,
 } from '@automattic/design-picker';
-import { WITH_THEME_ASSEMBLER_FLOW } from '@automattic/onboarding';
 import { Icon, addTemplate, brush, cloudUpload } from '@wordpress/icons';
 import { localize } from 'i18n-calypso';
 import { isEmpty, times } from 'lodash';
@@ -23,6 +22,7 @@ import { upsellCardDisplayed as upsellCardDisplayedAction } from 'calypso/state/
 import { DEFAULT_THEME_QUERY } from 'calypso/state/themes/constants';
 import { getThemesBookmark } from 'calypso/state/themes/themes-ui/selectors';
 import { getSelectedSite } from 'calypso/state/ui/selectors';
+import getSiteAssemblerUrl from './get-site-assembler-url';
 
 import './style.scss';
 
@@ -43,27 +43,6 @@ const getGridColumns = ( gridContainerRef, minColumnWidth, margin ) => {
 	return columnsPerRow;
 };
 
-const getSiteAssemblerUrl = ( {
-	isLoggedIn,
-	selectedSite,
-	shouldGoToAssemblerStep,
-	siteEditorUrl,
-} ) => {
-	if ( isLoggedIn && selectedSite && ! shouldGoToAssemblerStep ) {
-		return siteEditorUrl;
-	}
-
-	// Redirect people to create a site first if they don't log in or they have no sites.
-	const basePathname = isLoggedIn && selectedSite ? '/setup' : '/start';
-	const params = new URLSearchParams( { ref: 'calypshowcase' } );
-
-	if ( selectedSite?.slug ) {
-		params.set( 'siteSlug', selectedSite.slug );
-	}
-
-	return `${ basePathname }/${ WITH_THEME_ASSEMBLER_FLOW }?${ params }`;
-};
-
 export const ThemesList = ( { tabFilter, ...props } ) => {
 	const themesListRef = useRef( null );
 	const [ showSecondUpsellNudge, setShowSecondUpsellNudge ] = useState( false );

client/my-sites/themes/collections/style.scss

@@ -18,6 +18,10 @@
 				padding-bottom: 88px;
 			}
 		}
+
+		& + .pattern-assembler-cta-wrapper {
+			margin-top: 48px;
+		}
 	}
 
 	.theme-collection__meta {

client/my-sites/themes/collections/theme-collections-layout.tsx

@@ -1,6 +1,13 @@
+import { PatternAssemblerCta, isAssemblerSupported } from '@automattic/design-picker';
 import { memo } from 'react';
+import { useSelector } from 'react-redux';
+import getSiteAssemblerUrl from 'calypso/components/themes-list/get-site-assembler-url';
+import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 import { THEME_COLLECTIONS } from 'calypso/my-sites/themes/collections/collection-definitions';
 import ShowcaseThemeCollection from 'calypso/my-sites/themes/collections/showcase-theme-collection';
+import { isUserLoggedIn } from 'calypso/state/current-user/selectors';
+import getSiteEditorUrl from 'calypso/state/selectors/get-site-editor-url';
+import { getSelectedSite, getSelectedSiteId } from 'calypso/state/ui/selectors';
 import './style.scss';
 
 type OnSeeAll = {
@@ -15,10 +22,40 @@ export interface ThemeCollectionsLayoutProps {
 	onSeeAll: ( object: OnSeeAll ) => void;
 }
 
+function ThemeCollectionsPatternAssemblerCta() {
+	const selectedSiteId = useSelector( getSelectedSiteId );
+	const selectedSite = useSelector( getSelectedSite );
+	const isLoggedIn = useSelector( isUserLoggedIn );
+	const siteEditorUrl = useSelector( ( state: object ) =>
+		getSiteEditorUrl( state, selectedSiteId, {
+			canvas: 'edit',
+			assembler: '1',
+		} )
+	);
+	const onClick = () => {
+		const shouldGoToAssemblerStep = isAssemblerSupported();
+
+		recordTracksEvent( 'calypso_themeshowcase_pattern_assembler_cta_click', {
+			goes_to_assembler_step: shouldGoToAssemblerStep,
+		} );
+
+		const destinationUrl = getSiteAssemblerUrl( {
+			isLoggedIn,
+			selectedSite,
+			shouldGoToAssemblerStep,
+			siteEditorUrl,
+		} );
+		window.location.assign( destinationUrl );
+	};
+	return <PatternAssemblerCta onButtonClick={ onClick } />;
+}
+
 function ThemeCollectionsLayout( props: ThemeCollectionsLayoutProps ) {
 	const { onSeeAll } = props;
 
-	const collections = Object.values( THEME_COLLECTIONS ).map( ( collection ) => {
+	const collections = Object.values( THEME_COLLECTIONS ).sort( () => Math.random() - 0.5 );
+
+	const showcaseThemeCollections = collections.map( ( collection ) => {
 		const { filter, tier } = collection.query;
 		return (
 			<ShowcaseThemeCollection
@@ -30,7 +67,13 @@ function ThemeCollectionsLayout( props: ThemeCollectionsLayoutProps ) {
 		);
 	} );
 
-	return <>{ collections }</>;
+	showcaseThemeCollections.splice(
+		3,
+		0,
+		<ThemeCollectionsPatternAssemblerCta key="showcase-theme-collections-pattern-assembler-cta" />
+	);
+
+	return showcaseThemeCollections;
 }
 
 export default memo( ThemeCollectionsLayout );