Sunset Site Assembler: Remove all CTAs (#97217)

client/components/themes-list/index.jsx

@@ -1,23 +1,16 @@
 import { FEATURE_INSTALL_THEMES, PLAN_BUSINESS, getPlan } from '@automattic/calypso-products';
 import { Button } from '@automattic/components';
-import {
-	PatternAssemblerCta,
-	usePatternAssemblerCtaData,
-	isAssemblerSupported,
-} from '@automattic/design-picker';
-import { Icon, addTemplate, brush, cloudUpload } from '@wordpress/icons';
+import { Icon, brush, cloudUpload } from '@wordpress/icons';
 import { localize } from 'i18n-calypso';
 import { isEmpty, times } from 'lodash';
 import PropTypes from 'prop-types';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { connect, useSelector } from 'react-redux';
 import InfiniteScroll from 'calypso/components/infinite-scroll';
 import Theme from 'calypso/components/theme';
-import { useIsSiteAssemblerEnabled } from 'calypso/data/site-assembler';
 import withIsFSEActive from 'calypso/data/themes/with-is-fse-active';
 import { getWooMyCustomThemeOptions } from 'calypso/my-sites/themes/theme-options';
 import { isUserLoggedIn } from 'calypso/state/current-user/selectors';
-import getSiteEditorUrl from 'calypso/state/selectors/get-site-editor-url';
 import isAtomicSite from 'calypso/state/selectors/is-site-automated-transfer';
 import siteHasFeature from 'calypso/state/selectors/site-has-feature';
 import { isSiteOnECommerceTrial, isSiteOnWooExpress } from 'calypso/state/sites/plans/selectors';
@@ -37,7 +30,6 @@ import {
 	StartNewDesignWarningModal,
 	StartOverWarningModal,
 } from '../woo-design-with-ai-warning-modals';
-import getSiteAssemblerUrl from './get-site-assembler-url';
 import useWooActiveThemeQuery from './use-woo-active-theme-query';
 
 import './style.scss';
@@ -81,7 +73,6 @@ export const ThemesList = ( { tabFilter, ...props } ) => {
 	} = props;
 	const themesListRef = useRef( null );
 	const [ showSecondUpsellNudge, setShowSecondUpsellNudge ] = useState( false );
-	const isSiteAssemblerEnabled = useIsSiteAssemblerEnabled();
 	const updateShowSecondUpsellNudge = useCallback( () => {
 		const minColumnWidth = 320; // $theme-item-min-width: 320px;
 		const margin = 32; // $theme-item-horizontal-margin: 32px;
@@ -99,41 +90,13 @@ export const ThemesList = ( { tabFilter, ...props } ) => {
 	}, [ updateShowSecondUpsellNudge ] );
 
 	const selectedSite = useSelector( getSelectedSite );
-	const isLoggedIn = useSelector( isUserLoggedIn );
-	const siteEditorUrl = useSelector( ( state ) =>
-		getSiteEditorUrl( state, selectedSite?.ID, {
-			canvas: 'edit',
-			assembler: '1',
-		} )
-	);
-
 	const fetchNextPage = useCallback(
 		( options ) => {
 			props.fetchNextPage( options );
 		},
 		[ props.fetchNextPage ]
 	);
 
-	const goToSiteAssemblerFlow = () => {
-		const shouldGoToAssemblerStep = isAssemblerSupported();
-		props.recordTracksEvent( 'calypso_themeshowcase_pattern_assembler_cta_click', {
-			goes_to_assembler_step: shouldGoToAssemblerStep,
-			is_logged_in: isLoggedIn,
-		} );
-
-		if ( props.onDesignYourOwnClick ) {
-			props.onDesignYourOwnClick();
-		} else {
-			const destinationUrl = getSiteAssemblerUrl( {
-				isLoggedIn,
-				selectedSite,
-				shouldGoToAssemblerStep,
-				siteEditorUrl,
-			} );
-			window.location.assign( destinationUrl );
-		}
-	};
-
 	const [ openWarningModal, setOpenWarningModal ] = useState( false );
 	const { data: activeTheme } = useWooActiveThemeQuery(
 		selectedSite?.ID,
@@ -187,7 +150,6 @@ export const ThemesList = ( { tabFilter, ...props } ) => {
 				searchTerm={ props.searchTerm }
 				translate={ props.translate }
 				upsellCardDisplayed={ props.upsellCardDisplayed }
-				isSiteAssemblerEnabled={ isSiteAssemblerEnabled }
 			/>
 		);
 	}
@@ -227,12 +189,6 @@ export const ThemesList = ( { tabFilter, ...props } ) => {
 			{ /* Don't show second upsell nudge when less than 6 rows are present.
 				 Second plan upsell at 7th row is implemented through CSS. */ }
 			{ showSecondUpsellNudge && SecondUpsellNudge }
-			{ /* The Pattern Assembler CTA will display on the 9th row and the behavior is controlled by CSS */ }
-			{ ! props.isWooCYSEligibleSite &&
-				! ( props.isSiteWooExpressOrEcomFreeTrial && props.tier === 'free' ) &&
-				tabFilter !== 'my-themes' &&
-				_themes.length > 0 &&
-				isSiteAssemblerEnabled && <PatternAssemblerCta onButtonClick={ goToSiteAssemblerFlow } /> }
 			{ /* The Woo Design with AI banner will be displayed on the 2nd or last row.The behavior is controlled by CSS */ }
 			{ props.isWooCYSEligibleSite && _themes.length > 0 && (
 				<WooDesignWithAIBanner
@@ -347,31 +303,17 @@ export function ThemeBlock( props ) {
 	);
 }
 
-function Options( {
-	isFSEActive,
-	recordTracksEvent,
-	searchTerm,
-	translate,
-	upsellCardDisplayed,
-	isSiteAssemblerEnabled,
-} ) {
+function Options( { recordTracksEvent, searchTerm, translate, upsellCardDisplayed } ) {
 	const isLoggedIn = useSelector( isUserLoggedIn );
 	const selectedSite = useSelector( getSelectedSite );
 	const canInstallTheme = useSelector( ( state ) =>
 		siteHasFeature( state, selectedSite?.ID, FEATURE_INSTALL_THEMES )
 	);
 	const isAtomic = useSelector( ( state ) => isAtomicSite( state, selectedSite?.ID ) );
 	const sitePlan = selectedSite?.plan?.product_slug;
-	const siteEditorUrl = useSelector( ( state ) =>
-		getSiteEditorUrl( state, selectedSite?.ID, {
-			canvas: 'edit',
-			assembler: '1',
-		} )
-	);
 	const siteThemeInstallUrl = useSelector( ( state ) =>
 		getSiteThemeInstallUrl( state, selectedSite?.ID )
 	);
-	const assemblerCtaData = usePatternAssemblerCtaData();
 	const options = [];
 
 	useEffect( () => {
@@ -381,32 +323,6 @@ function Options( {
 		};
 	}, [ upsellCardDisplayed ] );
 
-	// Design your own theme / homepage.
-	if ( ( isFSEActive || assemblerCtaData.shouldGoToAssemblerStep ) && isSiteAssemblerEnabled ) {
-		options.push( {
-			title: assemblerCtaData.title,
-			icon: addTemplate,
-			description: assemblerCtaData.subtitle,
-			onClick: () =>
-				recordTracksEvent( 'calypso_themeshowcase_more_options_design_homepage_click', {
-					site_plan: sitePlan,
-					search_term: searchTerm,
-					destination: assemblerCtaData.shouldGoToAssemblerStep ? 'assembler' : 'site-editor',
-				} ),
-			url: getSiteAssemblerUrl( {
-				isLoggedIn,
-				selectedSite,
-				shouldGoToAssemblerStep: assemblerCtaData.shouldGoToAssemblerStep,
-				siteEditorUrl,
-			} ),
-			buttonText: assemblerCtaData.buttonText,
-		} );
-	} else {
-		// This should also start the Pattern Assembler, which is currently in development for
-		// the logged-out showcase on mobile viewport. Since there isn't any proper fallback for the meantime, we
-		// just don't include this option.
-	}
-
 	// Do it for me.
 	options.push( {
 		title: translate( 'Hire our team of experts to design one for you', {
@@ -519,12 +435,10 @@ function Empty( props ) {
 				{ props.translate( 'No themes match your search' ) }
 			</div>
 			<Options
-				isFSEActive={ props.isFSEActive }
 				recordTracksEvent={ props.recordTracksEvent }
 				searchTerm={ props.searchTerm }
 				translate={ props.translate }
 				upsellCardDisplayed={ props.upsellCardDisplayed }
-				isSiteAssemblerEnabled={ props.isSiteAssemblerEnabled }
 			/>
 		</>
 	);

client/components/themes-list/style.scss

@@ -21,12 +21,6 @@
 		margin: auto;
 	}
 
-	.pattern-assembler-cta-wrapper {
-		grid-column: 1/-1;
-		grid-row-start: 9;
-		margin: 0 16px 48px;
-	}
-
 	.second-upsell-wrapper {
 		grid-column: 1/-1;
 		grid-row-start: 7;

client/components/themes-list/test/__snapshots__/index.jsx.snap

@@ -11,39 +11,6 @@ exports[`ThemesList should render a div with a className of "themes-list" 1`] =
     <div
       data-testid="theme-2"
     />
-    <div
-      class="pattern-assembler-cta-wrapper"
-    >
-      <div
-        class="pattern-assembler-cta__image-wrapper"
-      >
-        <img
-          alt="Pattern Assembler"
-          class="pattern-assembler-cta__image"
-          src="assembler-illustration-v2.png"
-        />
-      </div>
-      <div
-        class="pattern-assembler-cta__content"
-      >
-        <h3
-          class="pattern-assembler-cta__title"
-        >
-          Design your own
-        </h3>
-        <div
-          class="pattern-assembler-cta__subtitle"
-        >
-          Jump right into the editor to design your homepage from scratch.
-        </div>
-        <button
-          class="button pattern-assembler-cta__button is-primary"
-          type="button"
-        >
-          Open the editor
-        </button>
-      </div>
-    </div>
     <div />
   </div>
 </div>

client/components/themes-list/test/index.jsx

@@ -14,10 +14,6 @@ jest.mock( 'calypso/components/theme', () => ( { theme } ) => (
 	<div data-testid={ `theme-${ theme.id }` } />
 ) );
 
-jest.mock( 'calypso/data/site-assembler', () => ( {
-	useIsSiteAssemblerEnabled: () => true,
-} ) );
-
 jest.mock( 'react-redux', () => ( {
 	...jest.requireActual( 'react-redux' ),
 	useSelector: () => false,

client/landing/stepper/declarative-flow/internals/steps-repository/design-choices/index.tsx

@@ -1,16 +1,11 @@
-import {
-	getAssemblerDesign,
-	themesIllustrationImage,
-	assemblerIllustrationV2Image,
-} from '@automattic/design-picker';
+import { getAssemblerDesign, themesIllustrationImage } from '@automattic/design-picker';
 import { localizeUrl } from '@automattic/i18n-utils';
 import { StepContainer } from '@automattic/onboarding';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useTranslate } from 'i18n-calypso';
 import { useEffect } from 'react';
 import DocumentHead from 'calypso/components/data/document-head';
 import FormattedHeader from 'calypso/components/formatted-header';
-import { useIsSiteAssemblerEnabled } from 'calypso/data/site-assembler';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 import { preventWidows } from 'calypso/lib/formatting';
 import { navigate } from 'calypso/lib/navigate';
@@ -36,9 +31,6 @@ const DesignChoicesStep: Step = ( { navigation, flow, stepName } ) => {
 	);
 
 	const { isEligible, isLoading } = useIsBigSkyEligible();
-
-	const isSiteAssemblerEnabled = useIsSiteAssemblerEnabled();
-
 	const { setSelectedDesign } = useDispatch( ONBOARD_STORE );
 
 	useEffect( () => {
@@ -87,18 +79,6 @@ const DesignChoicesStep: Step = ( { navigation, flow, stepName } ) => {
 								destination="designSetup"
 								onSelect={ handleSubmit }
 							/>
-							{ isSiteAssemblerEnabled && (
-								<DesignChoice
-									className="design-choices__design-your-own"
-									title={ translate( 'Design your own' ) }
-									description={ translate(
-										'Start from scratch, designing your site with patterns, pages, and styles.'
-									) }
-									imageSrc={ assemblerIllustrationV2Image }
-									destination="pattern-assembler"
-									onSelect={ handleSubmit }
-								/>
-							) }
 							{ ! isLoading && isEligible && (
 								<DesignChoice
 									className="design-choices__try-big-sky"