Notification Settings: Enable to configure notification settings by site

client/dashboard/.eslintrc.js

@@ -41,6 +41,7 @@ module.exports = {
 							'@automattic/components/src/*',
 							'!@automattic/api-core',
 							'!@automattic/api-queries',
+							'!@automattic/search',
 							'!@automattic/components/src/circular-progress-bar',
 							'!@automattic/components/src/summary-button',
 							'!@automattic/components/src/breadcrumbs',

client/dashboard/me/notifications-comments/device-settings/index.tsx

@@ -3,6 +3,7 @@ import {
 	userNotificationsSettingsMutation,
 	userNotificationsDevicesQuery,
 } from '@automattic/api-queries';
+import { localizeUrl } from '@automattic/i18n-utils';
 import { useSuspenseQuery, useMutation, useIsMutating } from '@tanstack/react-query';
 import {
 	__experimentalVStack as VStack,
@@ -97,10 +98,12 @@ export const DevicesSettings = () => {
 								),
 								{
 									link: (
-										<ExternalLink href="https://wordpress.org" rel="noopener noreferrer">
-											{ /* Workaround for the fact that the ExternalLink component expects a children prop */ }
-											{ null }
-										</ExternalLink>
+										<ExternalLink
+											href={ localizeUrl( 'https://apps.wordpress.com/mobile' ) }
+											rel="noopener noreferrer"
+											//Workaround for the fact that the ExternalLink component expects a children prop
+											children={ null }
+										/>
 									),
 								}
 							) }

client/dashboard/me/notifications-sites/collapsible-card/index.scss

@@ -0,0 +1,20 @@
+.collapsible-card {
+	max-height: 100%;
+
+	.collapsible-card__toggle svg {
+		transition: transform 0.2s ease-in-out;
+	}
+
+	&.collapsed .collapsible-card__toggle svg {
+		transform: rotate(180deg);
+	}
+
+	.collapsed &__content {
+		display: none;
+	}
+
+	&.collapsed {
+		overflow: hidden;
+	}
+
+}

client/dashboard/me/notifications-sites/collapsible-card/index.tsx

@@ -0,0 +1,34 @@
+import { Card, CardBody, __experimentalHStack as HStack, Button } from '@wordpress/components';
+import { chevronUp } from '@wordpress/icons';
+import clsx from 'clsx';
+import { useState } from 'react';
+import './index.scss';
+
+interface CollapsibleCardProps {
+	header: React.ReactNode;
+	children: React.ReactNode;
+}
+
+export const CollapsibleCard = ( { header, children }: CollapsibleCardProps ) => {
+	const [ isCollapsed, setIsCollapsed ] = useState< boolean >( true );
+
+	const handleCollapsedChange = () => {
+		setIsCollapsed( ! isCollapsed );
+	};
+	return (
+		<Card className={ clsx( 'collapsible-card', { collapsed: isCollapsed } ) }>
+			<CardBody>
+				<HStack>
+					{ header }
+					<Button
+						icon={ chevronUp }
+						className={ clsx( 'collapsible-card__toggle', { collapsed: isCollapsed } ) }
+						variant="tertiary"
+						onClick={ handleCollapsedChange }
+					/>
+				</HStack>
+				{ ! isCollapsed && <div className="collapsible-card__content">{ children }</div> }
+			</CardBody>
+		</Card>
+	);
+};

client/dashboard/me/notifications-sites/helpers/translations.ts

@@ -0,0 +1,23 @@
+import { __ } from '@wordpress/i18n';
+
+const translations = {
+	comment_like: __( 'Likes on my comments' ),
+	recommended_blog: __( 'Blog recommendations' ),
+	new_comment: __( 'Comments on my site' ),
+	post_like: __( 'Likes on my posts' ),
+	follow: __( 'Subscriptions' ),
+	achievement: __( 'Site achievements' ),
+	mentions: __( 'Username mentions' ),
+	scheduled_publicize: __( 'Jetpack Social' ),
+	blogging_prompt: __( 'Daily writing prompts' ),
+	draft_post_prompt: __( 'Draft post reminders' ),
+	store_order: __( 'New order' ),
+	comment_reply: __( 'Replies to my comments' ),
+} as const;
+
+type TranslationKey = keyof typeof translations;
+type TranslationValue = ( typeof translations )[ TranslationKey ];
+
+export const getFieldLabel = ( key: TranslationKey ): TranslationValue => {
+	return translations[ key ] ?? key;
+};

client/dashboard/me/notifications-sites/hooks/index.ts

@@ -0,0 +1,26 @@
+import {
+	userNotificationsSettingsQuery,
+	userNotificationsSettingsMutation,
+} from '@automattic/api-queries';
+import { useSuspenseQuery, useMutation } from '@tanstack/react-query';
+import { __ } from '@wordpress/i18n';
+
+export const useSiteSettings = ( blogId: number ) => {
+	return useSuspenseQuery( {
+		...userNotificationsSettingsQuery(),
+		select: ( data ) => data?.blogs.find( ( blog ) => blog.blog_id === blogId ),
+		staleTime: 1000 * 60 * 5,
+	} );
+};
+
+export const useSettingsMutation = () => {
+	return useMutation( {
+		...userNotificationsSettingsMutation(),
+		meta: {
+			snackbar: {
+				success: __( 'Settings saved successfully.' ),
+				error: __( 'There was a problem saving your changes. Please, try again.' ),
+			},
+		},
+	} );
+};

client/dashboard/me/notifications-sites/index.tsx

@@ -3,10 +3,13 @@ import { notificationPushPermissionStateQuery } from '@automattic/api-queries';
 import { useQuery } from '@tanstack/react-query';
 import { __experimentalVStack as VStack } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { Suspense } from 'react';
 import { PageHeader } from '../../components/page-header';
 import PageLayout from '../../components/page-layout';
 import { BrowserNotificationCard } from './browser-notification-card';
 import { BrowserNotificationNotice } from './browser-notification-notice';
+import { Loading } from './loading';
+import { SiteListSettings } from './site-list-settings';
 
 export default function NotificationsSites() {
 	const { data: status } = useQuery( notificationPushPermissionStateQuery() );
@@ -25,8 +28,11 @@ export default function NotificationsSites() {
 		>
 			{ status === 'denied' && <BrowserNotificationNotice /> }
 
-			<VStack spacing={ 4 }>
+			<VStack spacing={ 8 }>
 				<BrowserNotificationCard status={ status } />
+				<Suspense fallback={ <Loading /> }>
+					<SiteListSettings />
+				</Suspense>
 			</VStack>
 		</PageLayout>
 	);

client/dashboard/me/notifications-sites/loading/index.tsx

@@ -0,0 +1,9 @@
+import { Spinner, __experimentalHStack as HStack } from '@wordpress/components';
+
+export const Loading = ( { style }: { style?: React.CSSProperties } ) => {
+	return (
+		<HStack style={ style } justify="center" alignment="center">
+			<Spinner />
+		</HStack>
+	);
+};

client/dashboard/me/notifications-sites/site-list-settings/index.scss

@@ -0,0 +1,21 @@
+.site-list-settings {
+	.components-tab-panel__tabs {
+		border-bottom: solid 1px #ddd;
+	}
+	&__site-settings {
+		margin-left: -24px;
+		margin-right: -24px;
+	}
+	.components-tab-panel__tabs, .components-tab-panel__tab-content {
+		padding-left: 24px;
+		padding-right: 24px;
+	}
+	.components-tab-panel__tab-content {
+		padding-top: 16px;
+	}
+	&__card-placeholder {
+		height: 112px;
+	}
+}
+
+

client/dashboard/me/notifications-sites/site-list-settings/index.tsx

@@ -0,0 +1,73 @@
+import { Site } from '@automattic/api-core';
+import { sitesQuery } from '@automattic/api-queries';
+import { useFuzzySearch } from '@automattic/search';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import {
+	Card,
+	CardBody,
+	__experimentalVStack as VStack,
+	SearchControl,
+} from '@wordpress/components';
+import { createInterpolateElement } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import { useDeferredValue, useState } from 'react';
+import { CollapsibleCard } from '../collapsible-card';
+import { SitePreview } from '../site-preview';
+import { SiteSettings } from '../site-settings';
+
+import './index.scss';
+
+export const SiteListSettings = () => {
+	const [ search, setSearch ] = useState< string | undefined >();
+	const { data: sites } = useSuspenseQuery( {
+		...sitesQuery( { include_a8c_owned: true, site_visibility: 'visible' } ),
+	} );
+
+	const deferredSearch = useDeferredValue( search );
+
+	const filteredSites = useFuzzySearch< Site >( {
+		data: sites,
+		keys: [ 'name', 'URL' ],
+		query: deferredSearch,
+	} );
+
+	const handleSearchChange = ( value: string | undefined ) => {
+		setSearch( value );
+	};
+
+	return (
+		<VStack spacing={ 8 } className="site-list-settings">
+			<SearchControl
+				value={ search }
+				placeholder={ __( 'Search for a site' ) }
+				onChange={ handleSearchChange }
+				__nextHasNoMarginBottom
+			/>
+			<VStack spacing={ 4 }>
+				{ filteredSites.map( ( site: Site ) => (
+					<CollapsibleCard key={ site.ID } header={ <SitePreview site={ site } /> }>
+						<SiteSettings siteId={ site.ID } className="site-list-settings__site-settings" />
+					</CollapsibleCard>
+				) ) }
+				{ filteredSites.length === 0 && (
+					<Card>
+						<CardBody>
+							{ createInterpolateElement(
+								sprintf(
+									// translators: %s is the search query
+									__( 'No sites found with the search query <strong>%(search)s</strong>' ),
+									{
+										search: search,
+									}
+								),
+								{
+									strong: <strong />,
+								}
+							) }
+						</CardBody>
+					</Card>
+				) }
+			</VStack>
+		</VStack>
+	);
+};

client/dashboard/me/notifications-sites/site-preview/index.scss

@@ -0,0 +1,37 @@
+.site-preview {
+	width: 100%;
+	overflow: hidden;
+
+	&__badge {
+		grid-column-start: 2;
+	}
+
+	&__url {
+		color: $gray-700;
+		display: flex;
+		flex: 1 1 100%;
+		min-width: 0;
+		width: 100%;
+
+		.components-external-link__contents {
+			max-width: 170px;
+			text-overflow: ellipsis;
+			overflow: hidden;
+			white-space: nowrap;
+
+			@include break-mobile {
+				overflow: unset;
+				max-width: unset;
+				max-width: 250px;
+			}
+			@include break-small {
+				max-width: unset;
+			}
+		}
+
+		&:hover {
+			color: var(--wp-admin-theme-color);
+		}
+	}
+
+}

client/dashboard/me/notifications-sites/site-preview/index.tsx

@@ -0,0 +1,64 @@
+import { Site } from '@automattic/api-core';
+import { Badge } from '@automattic/ui';
+import {
+	__experimentalGrid as Grid,
+	__experimentalVStack as VStack,
+	ExternalLink,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import RouterLinkButton from '../../../components/router-link-button';
+import { isSitePlanTrial } from '../../../sites/plans';
+import { getSiteManagementUrl } from '../../../sites/site-fields';
+import SiteIcon from '../../../sites/site-icon';
+import { isP2, isStagingSite } from '../../../utils/site-types';
+
+import './index.scss';
+
+const getSiteBadge = ( site: Site ) => {
+	if ( isStagingSite( site ) ) {
+		return __( 'Staging' );
+	}
+	if ( isSitePlanTrial( site ) ) {
+		return __( 'Trial' );
+	}
+	if ( isP2( site ) ) {
+		return __( 'P2' );
+	}
+	return null;
+};
+
+interface Props {
+	site: Site;
+}
+
+export const SitePreview = ( { site }: Props ) => {
+	const badge = getSiteBadge( site );
+
+	return (
+		<Grid
+			className="site-preview"
+			columns={ 2 }
+			columnGap={ 12 }
+			rowGap={ badge ? 12 : 0 }
+			alignment="topLeft"
+			templateColumns="44px 1fr"
+		>
+			<SiteIcon site={ site } size={ 44 } />
+			<VStack alignment="topLeft" spacing={ 1 }>
+				{ site.name !== '' && (
+					<RouterLinkButton
+						variant="link"
+						to={ getSiteManagementUrl( site ) ?? '' }
+						disabled={ site.is_deleted }
+					>
+						{ site.name }
+					</RouterLinkButton>
+				) }
+				<ExternalLink className="site-preview__url" href={ site.URL }>
+					{ site.URL }
+				</ExternalLink>
+			</VStack>
+			<div className="site-preview__badge">{ badge && <Badge>{ badge }</Badge> }</div>
+		</Grid>
+	);
+};