Studio: Refresh the CTA for users without sites

src/components/wordpress-short-logo.tsx

@@ -0,0 +1,45 @@
+interface WordPressShortLogoProps {
+	className?: string;
+}
+
+export const WordPressShortLogo: React.FC< WordPressShortLogoProps > = ( { className } ) => (
+	<svg
+		width="80"
+		height="20"
+		viewBox="0 0 80 20"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		className={ className }
+	>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M13.0698 17.9943L15.5418 10.8475C16.002 9.69247 16.1567 8.77024 16.1567 7.94988C16.1567 7.65339 16.1366 7.37509 16.1021 7.11679C16.7333 8.2682 17.0935 9.59242 17.0935 10.9985C17.0935 13.9834 15.4763 16.59 13.0698 17.9925V17.9943ZM10.1156 7.20592C10.6031 7.18046 11.0415 7.12952 11.0415 7.12952C11.4763 7.07859 11.4253 6.43649 10.9906 6.46196C10.9906 6.46196 9.6809 6.56382 8.83323 6.56382C8.03649 6.56382 6.70132 6.46196 6.70132 6.46196C6.26475 6.43649 6.21382 7.10406 6.65039 7.12952C6.65039 7.12952 7.06331 7.18046 7.49987 7.20592L8.76046 10.662L6.98873 15.9734L4.04189 7.2041C4.53121 7.17864 4.96778 7.1277 4.96778 7.1277C5.40253 7.07677 5.3516 6.43467 4.91685 6.46014C4.91685 6.46014 3.60714 6.562 2.75947 6.562C2.60849 6.562 2.42841 6.55836 2.23741 6.55291C3.68718 4.35922 6.1738 2.90767 9.00058 2.90767C11.1088 2.90767 13.0261 3.71348 14.465 5.03406C14.4304 5.03224 14.3958 5.02678 14.3613 5.02678C13.5645 5.02678 13.0025 5.71981 13.0025 6.46196C13.0025 7.12952 13.3863 7.69341 13.7992 8.36097C14.1066 8.89939 14.4668 9.59242 14.4668 10.5929C14.4668 11.2859 14.2612 12.1572 13.8501 13.2104L13.0425 15.9079L10.1175 7.20956V7.20592H10.1156ZM9.00058 19.093C8.20566 19.093 7.43985 18.9747 6.71405 18.7637L9.14246 11.7079L11.6309 18.5236C11.6473 18.5636 11.6673 18.6 11.6891 18.6346C10.8469 18.9292 9.94284 19.093 9.0024 19.093H9.00058ZM0.907698 10.9985C0.907698 9.82525 1.16054 8.71204 1.60803 7.70432L5.46801 18.2817C2.76675 16.9702 0.907698 14.2035 0.907698 10.9985ZM9.00058 2C4.03825 2 0 6.03814 0 11.0003C0 15.9625 4.03825 20.0006 9.00058 20.0006C13.9629 20.0006 18.0012 15.9625 18.0012 11.0003C18.0012 6.03814 13.9647 2 9.00058 2Z"
+			fill="#3858E9"
+		/>
+		<path
+			d="M24.1382 15.4878L21.6014 6.50781H23.7593L25.338 12.8225H25.4208L27.0344 6.50781H29.1684L30.7819 12.7877H30.869L32.4238 6.50781H34.5861L32.0427 15.4878H29.839L28.1558 9.41912H28.0338L26.3506 15.4878H24.1404H24.1382Z"
+			fill="#3858E9"
+		/>
+		<path
+			d="M35.216 18.8529V6.50431H37.2978V7.98935H37.4198C37.5286 7.7716 37.6832 7.53862 37.8814 7.29038C38.0795 7.04215 38.3496 6.83092 38.6893 6.65237C39.029 6.47381 39.4601 6.38672 39.9871 6.38672C40.6817 6.38672 41.3067 6.56311 41.8663 6.91586C42.4259 7.26861 42.8702 7.78902 43.199 8.4771C43.5278 9.16519 43.6933 10.0079 43.6933 11.0052C43.6933 12.0025 43.5322 12.8299 43.2077 13.518C42.8833 14.2083 42.4434 14.733 41.8859 15.0967C41.3285 15.4581 40.697 15.6411 39.9915 15.6411C39.4776 15.6411 39.0507 15.5561 38.711 15.3841C38.3713 15.2121 38.0991 15.0052 37.8945 14.7613C37.6898 14.5175 37.5308 14.2867 37.4176 14.0689H37.3305V18.8507H35.2139L35.216 18.8529ZM37.2913 10.9943C37.2913 11.5757 37.374 12.083 37.5395 12.5207C37.705 12.9562 37.9446 13.2981 38.2581 13.542C38.5717 13.7858 38.9528 13.9078 39.4014 13.9078C39.8499 13.9078 40.2615 13.7815 40.5772 13.5311C40.893 13.2807 41.1325 12.9344 41.2936 12.4968C41.4548 12.0591 41.5353 11.5583 41.5353 10.9965C41.5353 10.4347 41.4548 9.94473 41.2958 9.51141C41.1369 9.07809 40.8973 8.7406 40.5816 8.49454C40.2658 8.24849 39.8717 8.12653 39.4014 8.12653C38.931 8.12653 38.5652 8.2463 38.2494 8.48364C37.9337 8.72099 37.6941 9.05414 37.533 9.4831C37.3719 9.91207 37.2913 10.4173 37.2913 10.9965V10.9943Z"
+			fill="#3858E9"
+		/>
+		<path
+			d="M45.763 15.6115C45.408 15.6115 45.1031 15.4874 44.8505 15.237C44.5979 14.9866 44.4716 14.6839 44.476 14.3246C44.4716 13.974 44.5958 13.6735 44.8505 13.4253C45.1031 13.1749 45.408 13.0508 45.763 13.0508C46.1179 13.0508 46.4053 13.1749 46.6601 13.4253C46.9149 13.6757 47.0455 13.974 47.0499 14.3246C47.0455 14.562 46.9845 14.7775 46.8648 14.9735C46.745 15.1695 46.5904 15.3241 46.3966 15.4373C46.2028 15.5527 45.9916 15.6093 45.763 15.6093V15.6115Z"
+			fill="#3858E9"
+		/>
+		<path
+			d="M52.0793 15.6624C51.1821 15.6624 50.4134 15.4664 49.7732 15.0723C49.133 14.6782 48.6387 14.1338 48.2947 13.4392C47.9506 12.7445 47.7764 11.941 47.7764 11.033C47.7764 10.125 47.9528 9.31499 48.3034 8.61601C48.654 7.91704 49.1505 7.37049 49.7907 6.97854C50.4309 6.58659 51.1908 6.39062 52.0684 6.39062C52.7979 6.39062 53.4424 6.52344 54.0064 6.79128C54.5704 7.05911 55.019 7.43365 55.3543 7.91923C55.6897 8.40481 55.8813 8.97094 55.927 9.61765H53.904C53.8213 9.18433 53.6275 8.82287 53.3227 8.53327C53.0156 8.24366 52.6084 8.09777 52.0988 8.09777C51.6655 8.09777 51.2866 8.2132 50.9578 8.44619C50.6312 8.677 50.3764 9.01015 50.1957 9.44347C50.0149 9.87679 49.9235 10.395 49.9235 10.9982C49.9235 11.6014 50.0127 12.1349 50.1913 12.5747C50.3699 13.0146 50.6225 13.3499 50.9491 13.5872C51.2735 13.8224 51.6568 13.94 52.0988 13.94C52.4102 13.94 52.6912 13.8812 52.9372 13.7614C53.1855 13.6417 53.3924 13.4696 53.56 13.2432C53.7277 13.0167 53.8431 12.7424 53.904 12.4179H55.927C55.8769 13.0538 55.6896 13.6156 55.3652 14.1055C55.0407 14.5954 54.6009 14.9765 54.0434 15.2508C53.486 15.5252 52.8305 15.6624 52.0793 15.6624Z"
+			fill="#3858E9"
+		/>
+		<path
+			d="M60.7621 15.6606C59.8845 15.6606 59.1246 15.4669 58.4822 15.0815C57.8398 14.696 57.3412 14.156 56.9884 13.4614C56.6356 12.7668 56.4592 11.9568 56.4592 11.0291C56.4592 10.1015 56.6356 9.28931 56.9884 8.59034C57.3412 7.89354 57.8398 7.35135 58.4822 6.96594C59.1246 6.58052 59.8845 6.38672 60.7621 6.38672C61.6396 6.38672 62.3996 6.58052 63.042 6.96594C63.6843 7.35135 64.183 7.89354 64.5358 8.59034C64.8886 9.28714 65.0649 10.1015 65.0649 11.0291C65.0649 11.9568 64.8886 12.7668 64.5358 13.4614C64.183 14.156 63.6843 14.696 63.042 15.0815C62.3996 15.4669 61.6396 15.6606 60.7621 15.6606ZM60.773 13.9644C61.2477 13.9644 61.6462 13.8337 61.9663 13.5703C62.2864 13.3068 62.5237 12.954 62.6827 12.5098C62.8417 12.0656 62.9201 11.5713 62.9201 11.0248C62.9201 10.4782 62.8417 9.97742 62.6827 9.53103C62.5259 9.08464 62.2864 8.72971 61.9663 8.46405C61.6462 8.1984 61.2499 8.06556 60.773 8.06556C60.2961 8.06556 59.8823 8.1984 59.5601 8.46405C59.2378 8.72971 58.9982 9.08464 58.8415 9.53103C58.6825 9.97742 58.6041 10.4761 58.6041 11.0248C58.6041 11.5735 58.6825 12.0656 58.8415 12.5098C58.9982 12.954 59.24 13.3068 59.5601 13.5703C59.8823 13.8337 60.2852 13.9644 60.773 13.9644Z"
+			fill="#3858E9"
+		/>
+		<path
+			d="M66.0953 15.486V6.50604H68.1183V8.03246H68.2228C68.4101 7.51857 68.7193 7.11573 69.1526 6.82612C69.586 6.53652 70.1021 6.39062 70.7031 6.39062C71.3041 6.39062 71.8245 6.5387 72.2426 6.83266C72.6607 7.12662 72.9568 7.52729 73.1288 8.03464H73.2225C73.4206 7.536 73.7582 7.13752 74.2307 6.8392C74.7032 6.54088 75.2672 6.3928 75.9183 6.3928C76.7436 6.3928 77.4187 6.6541 77.9413 7.1767C78.4639 7.69929 78.7252 8.46142 78.7252 9.46306V15.4904H76.602V9.78969C76.602 9.23225 76.454 8.82506 76.1578 8.56594C75.8617 8.30682 75.498 8.17616 75.0712 8.17616C74.5595 8.17616 74.161 8.33513 73.8757 8.65304C73.5883 8.97096 73.4468 9.38249 73.4468 9.88984V15.4904H71.3715V9.70258C71.3715 9.23877 71.2322 8.86861 70.9535 8.59207C70.6747 8.31552 70.3111 8.17616 69.8625 8.17616C69.5577 8.17616 69.2811 8.25238 69.0329 8.40698C68.7824 8.56159 68.5843 8.77715 68.4362 9.05587C68.2881 9.33459 68.2141 9.65903 68.2141 10.0292V15.4904H66.0975L66.0953 15.486Z"
+			fill="#3858E9"
+		/>
+	</svg>
+);

src/modules/sync/components/connect-button.tsx

@@ -11,6 +11,7 @@ interface ConnectButtonProps {
 	disableConnectButtonStyle?: boolean;
 	className?: string;
 	children?: React.ReactNode;
+	isBusy?: boolean;
 }
 
 export const ConnectButton = ( {
@@ -19,8 +20,10 @@ export const ConnectButton = ( {
 	disableConnectButtonStyle,
 	className,
 	children,
+	isBusy = false,
 }: ConnectButtonProps ) => {
 	const isOffline = useOffline();
+	const isDisabled = isOffline || isBusy;
 	return (
 		<Tooltip
 			disabled={ ! isOffline }
@@ -30,9 +33,10 @@ export const ConnectButton = ( {
 		>
 			<Button
 				onClick={ connectSite }
-				disabled={ isOffline }
-				aria-disabled={ isOffline }
+				disabled={ isDisabled }
+				aria-disabled={ isDisabled }
 				variant={ variant }
+				isBusy={ isBusy }
 				className={ cx(
 					! disableConnectButtonStyle && ! isOffline && '!text-a8c-blue-50 !shadow-a8c-blue-50',
 					className

src/modules/sync/components/create-button.tsx

@@ -12,13 +12,15 @@ interface CreateButtonProps {
 	selectedSite: SiteDetails;
 	text?: string;
 	className?: string;
+	onClick?: () => void;
 }
 
 export const CreateButton = ( {
 	variant,
 	selectedSite,
 	text = __( 'Create new site' ),
 	className,
+	onClick,
 }: CreateButtonProps ) => {
 	const isOffline = useOffline();
 	return (
@@ -27,15 +29,17 @@ export const CreateButton = ( {
 			text={ __( 'Creating a site requires an internet connection.' ) }
 			icon={ offlineIcon }
 			placement="top-start"
+			className={ className }
 		>
 			<Button
 				onClick={ () => {
+					onClick?.();
 					getIpcApi().openURL(
 						`https://wordpress.com/setup/new-hosted-site?ref=studio&section=studio-sync&showDomainStep&studioSiteId=${ selectedSite.id }`
 					);
 				} }
 				variant={ variant }
-				className={ cx( ! isOffline && '!text-a8c-blue-50 !shadow-a8c-blue-50', className ) }
+				className={ cx( ! isOffline && className ) }
 				disabled={ isOffline }
 				aria-disabled={ isOffline }
 			>

src/modules/sync/components/no-wpcom-sites-modal.tsx

@@ -0,0 +1,50 @@
+import { Icon, check } from '@wordpress/icons';
+import { useI18n } from '@wordpress/react-i18n';
+import Modal from 'src/components/modal';
+import { WordPressShortLogo } from 'src/components/wordpress-short-logo';
+import { CreateButton } from 'src/modules/sync/components/create-button';
+
+interface NoWpcomSitesModalProps {
+	onRequestClose: () => void;
+	selectedSite: SiteDetails;
+}
+
+export function NoWpcomSitesModal( { onRequestClose, selectedSite }: NoWpcomSitesModalProps ) {
+	const { __ } = useI18n();
+
+	return (
+		<Modal
+			className="w-[390px]"
+			onRequestClose={ onRequestClose }
+			title={ __( 'Find a perfect plan' ) }
+		>
+			<div className="flex flex-col gap-4">
+				<div className="text-a8c-gray-70 a8c-body">
+					{ __( 'Unlock the power of WordPress and share your work with the world with' ) }
+					<WordPressShortLogo className="inline-block h-4 align-middle" />
+				</div>
+				<div>
+					{ [
+						__( 'Push and pull changes from your live site.' ),
+						__( 'Supports staging and production sites.' ),
+						__( 'Sync database and files.' ),
+					].map( ( text ) => (
+						<div key={ text } className="text-a8c-gray-70 a8c-body flex items-center">
+							<Icon className="fill-a8c-blue-50 me-2 shrink-0" icon={ check } />
+							{ text }
+						</div>
+					) ) }
+				</div>
+				<div className="flex justify-center gap-4">
+					<CreateButton
+						variant="primary"
+						selectedSite={ selectedSite }
+						text={ __( 'Choose a plan to publish your site' ) }
+						onClick={ onRequestClose }
+						className="w-full !text-white !shadow-a8c-blue-50"
+					/>
+				</div>
+			</div>
+		</Modal>
+	);
+}

src/modules/sync/components/sync-sites-modal-selector.tsx

@@ -74,11 +74,9 @@ export function SyncSitesModalSelector( {
 						</div>
 					) }
 
-					{ ! isLoading && isEmpty && (
+					{ ! isLoading && isEmpty && searchQuery && (
 						<div className="flex justify-center items-center h-full">
-							{ searchQuery
-								? sprintf( __( 'No sites found for "%s"' ), searchQuery )
-								: __( 'No sites found' ) }
+							{ sprintf( __( 'No sites found for "%s"' ), searchQuery ) }
 						</div>
 					) }
 
@@ -355,6 +353,7 @@ function Footer( {
 				variant="link"
 				selectedSite={ selectedSite }
 				text={ __( 'Create a new WordPress.com site' ) }
+				className="!text-a8c-blue-50 !shadow-a8c-blue-50"
 			/>
 			<div className="flex gap-4">
 				<Button variant="link" onClick={ onRequestClose }>

src/modules/sync/index.tsx

@@ -9,6 +9,7 @@ import { useAuth } from 'src/hooks/use-auth';
 import { useOffline } from 'src/hooks/use-offline';
 import { getIpcApi } from 'src/lib/get-ipc-api';
 import { ConnectButton } from 'src/modules/sync/components/connect-button';
+import { NoWpcomSitesModal } from 'src/modules/sync/components/no-wpcom-sites-modal';
 import { SyncConnectedSites } from 'src/modules/sync/components/sync-connected-sites';
 import { SyncSitesModalSelector } from 'src/modules/sync/components/sync-sites-modal-selector';
 import { SyncTabImage } from 'src/modules/sync/components/sync-tab-image';
@@ -159,8 +160,13 @@ export function ContentTabSync( { selectedSite }: { selectedSite: SiteDetails }
 					<div className="sticky bottom-0 bg-white/[0.8] backdrop-blur-sm w-full px-8 py-6 mt-auto">
 						<ConnectButton
 							variant="primary"
-							connectSite={ () => dispatch( connectedSitesActions.openModal() ) }
+							connectSite={ () => {
+								if ( ! isFetching ) {
+									dispatch( connectedSitesActions.openModal() );
+								}
+							} }
 							disableConnectButtonStyle={ true }
+							isBusy={ isFetching }
 						>
 							{ __( 'Connect another site' ) }
 						</ConnectButton>
@@ -171,41 +177,53 @@ export function ContentTabSync( { selectedSite }: { selectedSite: SiteDetails }
 					<div className="mt-8">
 						<ConnectButton
 							variant="primary"
-							connectSite={ () => dispatch( connectedSitesActions.openModal() ) }
+							connectSite={ () => {
+								if ( ! isFetching ) {
+									dispatch( connectedSitesActions.openModal() );
+								}
+							} }
 							disableConnectButtonStyle={ true }
+							isBusy={ isFetching }
 						>
 							{ __( 'Connect site' ) }
 						</ConnectButton>
 					</div>
 				</SiteSyncDescription>
 			) }
 
-			{ isModalOpen && (
-				<SyncSitesModalSelector
-					isLoading={ isFetching }
-					onRequestClose={ () => dispatch( connectedSitesActions.closeModal() ) }
-					syncSites={ syncSites }
-					onInitialRender={ refetchSites }
-					onConnect={ async ( siteId ) => {
-						const disconnectSiteId =
-							typeof isModalOpen === 'object' ? isModalOpen.disconnectSiteId : undefined;
+			{ isModalOpen && ! isFetching && (
+				<>
+					{ syncSites.length === 0 ? (
+						<NoWpcomSitesModal
+							onRequestClose={ () => dispatch( connectedSitesActions.closeModal() ) }
+							selectedSite={ selectedSite }
+						/>
+					) : (
+						<SyncSitesModalSelector
+							onRequestClose={ () => dispatch( connectedSitesActions.closeModal() ) }
+							syncSites={ syncSites }
+							onConnect={ async ( siteId ) => {
+								const disconnectSiteId =
+									typeof isModalOpen === 'object' ? isModalOpen.disconnectSiteId : undefined;
 
-						if ( disconnectSiteId ) {
-							await disconnectSite( disconnectSiteId );
-						}
+								if ( disconnectSiteId ) {
+									await disconnectSite( disconnectSiteId );
+								}
 
-						const newConnectedSite = syncSites.find( ( site ) => site.id === siteId );
-						if ( ! newConnectedSite ) {
-							getIpcApi().showErrorMessageBox( {
-								title: __( 'Failed to connect to site' ),
-								message: __( 'Please try again.' ),
-							} );
-							return;
-						}
-						void handleConnect( newConnectedSite );
-					} }
-					selectedSite={ selectedSite }
-				/>
+								const newConnectedSite = syncSites.find( ( site ) => site.id === siteId );
+								if ( ! newConnectedSite ) {
+									getIpcApi().showErrorMessageBox( {
+										title: __( 'Failed to connect to site' ),
+										message: __( 'Please try again.' ),
+									} );
+									return;
+								}
+								void handleConnect( newConnectedSite );
+							} }
+							selectedSite={ selectedSite }
+						/>
+					) }
+				</>
 			) }
 		</div>
 	);