Domain management: Add claim domain CTA to the site-specific table (#…

…81800)
Automattic · Feb 12, 2024 · 4181858 · 4181858
1 parent 3a9899f
commit 4181858
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 90 deletions.
diff --git a/client/my-sites/domains/domain-management/list/bulk-site-domains.tsx b/client/my-sites/domains/domain-management/list/bulk-site-domains.tsx
@@ -2,6 +2,7 @@ import { isEnabled } from '@automattic/calypso-config';
 import { useSiteDomainsQuery } from '@automattic/data-stores';
 import { DomainsTable } from '@automattic/domains-table';
 import { useTranslate } from 'i18n-calypso';
+import { useMemo } from 'react';
 import { UsePresalesChat } from 'calypso/components/data/domain-management';
 import InlineSupportLink from 'calypso/components/inline-support-link';
 import Main from 'calypso/components/main';
@@ -16,27 +17,37 @@ import {
 	showUpdatePrimaryDomainSuccessNotice,
 } from 'calypso/state/domains/management/actions';
 import { setPrimaryDomain } from 'calypso/state/sites/domains/actions';
-import { getSelectedSiteSlug, getSelectedSiteId } from 'calypso/state/ui/selectors';
+import { hasDomainCredit as hasDomainCreditSelector } from 'calypso/state/sites/plans/selectors';
+import { getSelectedSite } from 'calypso/state/ui/selectors';
 import DomainHeader from '../components/domain-header';
+import EmptyDomainsListCard from './empty-domains-list-card';
+import { filterDomainsByOwner } from './helpers';
 import { ManageAllDomainsCTA } from './manage-domains-cta';
 import OptionsDomainButton from './options-domain-button';
+import { filterOutWpcomDomains } from './utils';
 
 interface BulkSiteDomainsProps {
 	analyticsPath: string;
 	analyticsTitle: string;
 }
 
 export default function BulkSiteDomains( props: BulkSiteDomainsProps ) {
-	const siteId = useSelector( getSelectedSiteId );
-	const siteSlug = useSelector( getSelectedSiteSlug );
+	const site = useSelector( getSelectedSite );
 	const userCanSetPrimaryDomains = useSelector(
 		( state ) => ! currentUserHasFlag( state, NON_PRIMARY_DOMAINS_TO_FREE_USERS )
 	);
-	const { data } = useSiteDomainsQuery( siteSlug );
+	const hasDomainCredit = useSelector( ( state ) => hasDomainCreditSelector( state, site?.ID ) );
+	const { data, isLoading } = useSiteDomainsQuery( site?.slug );
 	const translate = useTranslate();
 	const { sendNudge } = useOdieAssistantContext();
 	const dispatch = useDispatch();
 
+	const hasNonWpcomDomains = useMemo( () => {
+		return (
+			filterDomainsByOwner( filterOutWpcomDomains( data?.domains ?? [] ), undefined ).length > 0
+		);
+	}, [ data ] );
+
 	const item = {
 		label: translate( 'Domains' ),
 		helpBubble: translate(
@@ -60,7 +71,7 @@ export default function BulkSiteDomains( props: BulkSiteDomainsProps ) {
 				<DomainsTable
 					domains={ data?.domains }
 					isAllSitesView={ false }
-					siteSlug={ siteSlug }
+					siteSlug={ site?.slug ?? null }
 					shouldDisplayContactInfoBulkAction={ isEnabled(
 						'domains/bulk-actions-contact-info-editing'
 					) }
@@ -74,16 +85,24 @@ export default function BulkSiteDomains( props: BulkSiteDomainsProps ) {
 							} );
 						}
 
-						if ( action === 'set-primary' ) {
+						if ( action === 'set-primary' && site ) {
 							try {
-								await dispatch( setPrimaryDomain( siteId as number, domain.domain ) );
+								await dispatch( setPrimaryDomain( site.ID, domain.domain ) );
 								dispatch( showUpdatePrimaryDomainSuccessNotice( domain.name ) );
 							} catch ( error ) {
 								dispatch( showUpdatePrimaryDomainErrorNotice( ( error as Error ).message ) );
 							}
 						}
 					} }
 				/>
+				{ ! isLoading && (
+					<EmptyDomainsListCard
+						selectedSite={ site }
+						hasDomainCredit={ !! hasDomainCredit }
+						isCompact={ hasNonWpcomDomains }
+						hasNonWpcomDomains={ hasNonWpcomDomains }
+					/>
+				) }
 				<ManageAllDomainsCTA shouldDisplaySeparator={ false } />
 			</Main>
 			<UsePresalesChat />

diff --git a/client/my-sites/domains/domain-management/list/empty-domains-list-card-styles.scss b/client/my-sites/domains/domain-management/list/empty-domains-list-card-styles.scss
@@ -0,0 +1,87 @@
+@import "@automattic/typography/styles/variables";
+@import "@wordpress/base-styles/breakpoints";
+@import "@automattic/typography/styles/fonts";
+@import "@wordpress/base-styles/mixins";
+@import "@wordpress/base-styles/colors";
+
+.empty-domains-list-card:not(.has-non-wpcom-domains) {
+	box-shadow: none;
+}
+
+.empty-domains-list-card__wrapper {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	margin-top: 32px;
+	margin-bottom: 32px;
+
+	h2 {
+		@extend .wp-brand-font;
+		color: var(--color-neutral-70);
+		font-size: $font-title-large;
+		margin-top: 24px;
+	}
+
+	h3 {
+		color: var(--color-neutral-50);
+		font-size: $font-body;
+	}
+
+	.empty-domains-list-card__text {
+		text-align: center;
+		margin-bottom: 10px;
+	}
+
+	.empty-domains-list-card__content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.empty-domains-list-card__actions {
+		display: inline-flex;
+		justify-content: center;
+		flex-wrap: wrap;
+		& > .button {
+			margin: 16px 8px 0;
+		}
+		@include break-small {
+			justify-content: flex-start;
+			& > .button:first-child {
+				margin-left: 0;
+			}
+		}
+	}
+
+	@include break-small {
+		&.is-compact {
+			flex-direction: row-reverse;
+			margin-top: 0;
+			margin-bottom: 0;
+
+			h2 {
+				font-size: $font-title-medium;
+				margin-top: 0;
+			}
+
+			> .empty-domains-list-card__illustration {
+				margin-left: 40px;
+				margin-right: 24px;
+			}
+
+			.empty-domains-list-card__text {
+				margin-bottom: 10px;
+				text-align: initial;
+			}
+
+			.empty-domains-list-card__actions {
+				text-align: initial;
+			}
+
+			.empty-domains-list-card__content {
+				align-items: normal;
+				width: 100%;
+			}
+		}
+	}
+}
diff --git a/client/my-sites/domains/domain-management/list/empty-domains-list-card.jsx b/client/my-sites/domains/domain-management/list/empty-domains-list-card.jsx
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { domainAddNew, domainUseMyDomain } from 'calypso/my-sites/domains/paths';
 import { EmptyDomainsListCardSkeleton } from './empty-domains-list-card-skeleton';
 
-import './style.scss';
+import './empty-domains-list-card-styles.scss';
 
 function EmptyDomainsListCard( { selectedSite, hasDomainCredit, isCompact, hasNonWpcomDomains } ) {
 	const translate = useTranslate();

diff --git a/client/my-sites/domains/domain-management/list/style.scss b/client/my-sites/domains/domain-management/list/style.scss
@@ -83,10 +83,6 @@
 	}
 }
 
-.empty-domains-list-card:not(.has-non-wpcom-domains) {
-	box-shadow: none;
-}
-
 .domain-management-list__items.has-no-wpcom-domain {
 	margin-top: 24px;
 }
@@ -121,84 +117,6 @@
 	}
 }
 
-.empty-domains-list-card__wrapper {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	margin-top: 32px;
-	margin-bottom: 32px;
-
-	h2 {
-		@extend .wp-brand-font;
-		color: var(--color-neutral-70);
-		font-size: $font-title-large;
-		margin-top: 24px;
-	}
-
-	h3 {
-		color: var(--color-neutral-50);
-		font-size: $font-body;
-	}
-
-	.empty-domains-list-card__text {
-		text-align: center;
-		margin-bottom: 10px;
-	}
-
-	.empty-domains-list-card__content {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-	}
-
-	.empty-domains-list-card__actions {
-		display: inline-flex;
-		justify-content: center;
-		flex-wrap: wrap;
-		& > .button {
-			margin: 16px 8px 0;
-		}
-		@include break-small {
-			justify-content: flex-start;
-			& > .button:first-child {
-				margin-left: 0;
-			}
-		}
-	}
-
-	@include break-small {
-		&.is-compact {
-			flex-direction: row-reverse;
-			margin-top: 0;
-			margin-bottom: 0;
-
-			h2 {
-				font-size: $font-title-medium;
-				margin-top: 0;
-			}
-
-			> .empty-domains-list-card__illustration {
-				margin-left: 40px;
-				margin-right: 24px;
-			}
-
-			.empty-domains-list-card__text {
-				margin-bottom: 10px;
-				text-align: initial;
-			}
-
-			.empty-domains-list-card__actions {
-				text-align: initial;
-			}
-
-			.empty-domains-list-card__content {
-				align-items: normal;
-				width: 100%;
-			}
-		}
-	}
-}
-
 .domain-table-header {
 	display: flex;
 	justify-content: space-between;