Nav Redesign: Add notifications pointer

client/layout/global-sidebar/footer.tsx

@@ -57,6 +57,7 @@ export const GlobalSidebarFooter: FC< {
 				className="sidebar__item-notifications"
 				tooltip={ translate( 'Notifications' ) }
 				onClick={ () => recordTracksEvent( GLOBAL_SIDEBAR_EVENTS.NOTIFICATION_CLICK ) }
+				translate={ translate }
 			/>
 			{ isInSupportSession && (
 				<QuickLanguageSwitcher className="sidebar__footer-language-switcher" shouldRenderAsButton />

client/layout/global-sidebar/menu-items/notifications/index.jsx

@@ -1,14 +1,20 @@
+import { englishLocales } from '@automattic/i18n-utils';
+import { hasTranslation } from '@wordpress/i18n';
 import classNames from 'classnames';
 import { throttle } from 'lodash';
 import PropTypes from 'prop-types';
 import { Component, createRef } from 'react';
+import { createPortal } from 'react-dom';
 import { connect } from 'react-redux';
 import store from 'store';
+import DismissibleCard from 'calypso/blocks/dismissible-card';
 import AsyncLoad from 'calypso/components/async-load';
-import { withCurrentRoute } from 'calypso/components/route';
 import TranslatableString from 'calypso/components/translatable/proptype';
 import SidebarMenuItem from 'calypso/layout/global-sidebar/menu-items/menu-item';
+import { isE2ETest } from 'calypso/lib/e2e';
 import { recordTracksEvent } from 'calypso/state/analytics/actions';
+import { getCurrentUserId } from 'calypso/state/current-user/selectors';
+import getCurrentLocaleSlug from 'calypso/state/selectors/get-current-locale-slug';
 import hasUnseenNotifications from 'calypso/state/selectors/has-unseen-notifications';
 import isNotificationsOpen from 'calypso/state/selectors/is-notifications-open';
 import { toggleNotificationsPanel } from 'calypso/state/ui/actions';
@@ -26,6 +32,9 @@ class SidebarNotifications extends Component {
 		isNotificationsOpen: PropTypes.bool,
 		hasUnseenNotifications: PropTypes.bool,
 		tooltip: TranslatableString,
+		translate: PropTypes.func,
+		currentUserId: PropTypes.number,
+		locale: PropTypes.string,
 	};
 
 	notificationLink = createRef();
@@ -135,8 +144,33 @@ class SidebarNotifications extends Component {
 			'is-initial-load': this.state.animationState === -1,
 		} );
 
+		const shouldShowNotificationsPointer =
+			// Show pointer for 2 weeks.
+			Date.now() < Date.parse( '23 May 2024' ) &&
+			// Show pointer to users registered before 08-May-2024 (when we moved the notifications to the footer).
+			this.props.currentUserId < 250450000 &&
+			// Show pointer only if translated.
+			( englishLocales.includes( this.props.locale ) ||
+				hasTranslation( 'Looking for your notifications? They have been moved here.' ) ) &&
+			// Hide pointer on E2E tests so it doesn't hide menu items that are expected to be visible.
+			! isE2ETest();
+
 		return (
 			<>
+				{ shouldShowNotificationsPointer &&
+					createPortal(
+						<DismissibleCard
+							className="sidebar-notifications-pointer"
+							preferenceName="nav-redesign-notifications-footer-pointer"
+						>
+							<span>
+								{ this.props.translate(
+									'Looking for your notifications? They have been moved here.'
+								) }
+							</span>
+						</DismissibleCard>,
+						document.querySelector( '.layout' )
+					) }
 				<SidebarMenuItem
 					url="/notifications"
 					icon={ <BellIcon newItems={ this.state.newNote } active={ this.props.isActive } /> }
@@ -167,13 +201,13 @@ const mapStateToProps = ( state ) => {
 	return {
 		isNotificationsOpen: isNotificationsOpen( state ),
 		hasUnseenNotifications: hasUnseenNotifications( state ),
+		currentUserId: getCurrentUserId( state ),
+		locale: getCurrentLocaleSlug( state ),
 	};
 };
 const mapDispatchToProps = {
 	toggleNotificationsPanel,
 	recordTracksEvent,
 };
 
-export default withCurrentRoute(
-	connect( mapStateToProps, mapDispatchToProps )( SidebarNotifications )
-);
+export default connect( mapStateToProps, mapDispatchToProps )( SidebarNotifications );

client/layout/global-sidebar/menu-items/notifications/style.scss

@@ -1,3 +1,71 @@
 .sidebar-notifications__panel {
 	position: absolute;
 }
+
+.sidebar-notifications-pointer {
+	position: absolute;
+	z-index: z-index("root", ".layout__secondary");
+	bottom: 55px;
+	left: 35px;
+	background: var(--studio-black);
+	color: var(--studio-white);
+	/* stylelint-disable-next-line scales/font-sizes */
+	font-size: 0.8125rem;
+	margin: 0;
+	padding: 12px;
+	box-shadow: none;
+	display: flex;
+	flex-direction: column-reverse;
+	width: 250px;
+
+	&::after {
+		content: "";
+		position: absolute;
+		top: 100%;
+		left: 0;
+		right: 0;
+		margin: 0 auto;
+		width: 0;
+		height: 0;
+		border-top: 8px solid var(--studio-black);
+		border-left: 8px solid transparent;
+		border-right: 8px solid transparent;
+		visibility: visible;
+	}
+
+	.dismissible-card__close-button {
+		position: relative;
+		width: auto;
+		height: auto;
+		top: auto;
+		right: auto;
+		margin-top: 12px;
+		margin-right: 0;
+		background-color: var(--color-accent);
+		border-color: var(--color-accent);
+		color: var(--color-text-inverted);
+		font-size: $font-body-extra-small;
+		line-height: 1;
+		border-radius: 2px;
+		padding: 7px;
+		align-self: flex-end;
+
+		&::before {
+			content: attr(aria-label);
+		}
+
+		svg {
+			display: none;
+		}
+	}
+}
+
+.is-global-sidebar-collapsed .sidebar-notifications-pointer {
+	display: none;
+}
+
+@media ( max-width: 782px ) {
+	.sidebar-notifications-pointer {
+		display: none;
+	}
+}