Implement welcome banner for agency dashboard (#63949)

* Implement welcome banner for agency dashboard

* Minor code cleanup

client/jetpack-cloud/sections/agency-dashboard/sites-overview/index.tsx

@@ -1,5 +1,6 @@
 import { useTranslate } from 'i18n-calypso';
 import SiteContent from './site-content';
+import SiteWelcomeBanner from './site-welcome-banner';
 import type { ReactElement } from 'react';
 
 import './style.scss';
@@ -8,6 +9,7 @@ export default function SitesOverview(): ReactElement {
 	const translate = useTranslate();
 	return (
 		<div className="sites-overview">
+			<SiteWelcomeBanner isDashboardView />
 			<div className="sites-overview__page-title-container">
 				<h2 className="sites-overview__page-title">{ translate( 'Dashboard' ) }</h2>
 				<div className="sites-overview__page-subtitle">

client/jetpack-cloud/sections/agency-dashboard/sites-overview/site-welcome-banner/index.tsx

@@ -0,0 +1,82 @@
+import { useTranslate } from 'i18n-calypso';
+import { ReactElement, useCallback, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import tipIcon from 'calypso/assets/images/jetpack/tip-icon.svg';
+import Banner from 'calypso/components/banner';
+import {
+	JETPACK_DASHBOARD_WELCOME_BANNER_PREFERENCE,
+	JETPACK_DASHBOARD_WELCOME_BANNER_PREFERENCE_HOME_PAGE as homePagePreferenceName,
+	getJetpackDashboardWelcomeBannerPreference as getPreference,
+} from 'calypso/state/partner-portal/agency-dashboard/selectors';
+import { savePreference } from 'calypso/state/preferences/actions';
+import type { PreferenceType } from '../types';
+
+export default function SiteWelcomeBanner( {
+	isDashboardView,
+	bannerKey,
+}: {
+	isDashboardView?: boolean;
+	bannerKey?: string;
+} ): ReactElement | null {
+	const translate = useTranslate();
+	const dispatch = useDispatch();
+
+	const preferenceName = isDashboardView
+		? homePagePreferenceName
+		: `${ JETPACK_DASHBOARD_WELCOME_BANNER_PREFERENCE }-${ bannerKey }`;
+	const preference = useSelector( ( state ) => getPreference( state, preferenceName ) );
+	const homePagePreference = useSelector( ( state ) =>
+		getPreference( state, homePagePreferenceName )
+	);
+
+	const savePreferenceType = useCallback(
+		( type: PreferenceType ) => {
+			dispatch( savePreference( preferenceName, { ...preference, [ type ]: true } ) );
+		},
+		[ dispatch, preference, preferenceName ]
+	);
+
+	const isDismissed = preference?.dismiss;
+	const hideBanner = ! isDashboardView && homePagePreference?.view;
+
+	useEffect( () => {
+		if ( ! isDismissed && ! hideBanner ) {
+			savePreferenceType( 'view' );
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [] );
+
+	const dismissBanner = useCallback( () => {
+		savePreferenceType( 'dismiss' );
+	}, [ savePreferenceType ] );
+
+	// Hide the banner if the banner is already viewed
+	// on the dashboard page or the banner is dismissed
+	if ( isDismissed || hideBanner ) {
+		return null;
+	}
+
+	return (
+		<Banner
+			title={ translate( 'A new way to manage all your Jetpack sites in one spot' ) }
+			description={
+				isDashboardView
+					? translate(
+							'Manage features and discover issues with any of your sites, which are automatically added when Jetpack is connected.'
+					  )
+					: translate(
+							'Manage features and discover issues with any of your sites within your new dashboard.'
+					  )
+			}
+			disableCircle
+			horizontal
+			iconPath={ tipIcon }
+			callToAction={ isDashboardView ? translate( 'Got it' ) : translate( 'View' ) }
+			href={ isDashboardView ? '' : '/dashboard' }
+			onClick={ isDashboardView && dismissBanner }
+			dismissTemporary={ ! isDashboardView }
+			onDismiss={ dismissBanner }
+			dismissPreferenceName={ isDashboardView ? '' : preferenceName }
+		/>
+	);
+}

client/jetpack-cloud/sections/agency-dashboard/sites-overview/types.ts

@@ -18,3 +18,10 @@ export interface SiteData {
 	plugin: { updates: number };
 	[ key: string ]: any;
 }
+
+export type PreferenceType = 'dismiss' | 'view';
+
+export type Preference = {
+	dismiss?: boolean;
+	view?: boolean;
+};

client/jetpack-cloud/sections/partner-portal/primary/licenses/index.tsx

@@ -1,10 +1,11 @@
 import { Button } from '@automattic/components';
 import { useTranslate } from 'i18n-calypso';
 import { ReactElement } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import CardHeading from 'calypso/components/card-heading';
 import DocumentHead from 'calypso/components/data/document-head';
 import Main from 'calypso/components/main';
+import SiteWelcomeBanner from 'calypso/jetpack-cloud/sections/agency-dashboard/sites-overview/site-welcome-banner';
 import LicenseList from 'calypso/jetpack-cloud/sections/partner-portal/license-list';
 import LicenseListContext from 'calypso/jetpack-cloud/sections/partner-portal/license-list-context';
 import LicenseStateFilter from 'calypso/jetpack-cloud/sections/partner-portal/license-state-filter';
@@ -16,6 +17,7 @@ import {
 	LicenseSortField,
 } from 'calypso/jetpack-cloud/sections/partner-portal/types';
 import { recordTracksEvent } from 'calypso/state/analytics/actions';
+import { showAgencyDashboard } from 'calypso/state/partner-portal/partner/selectors';
 import './style.scss';
 
 interface Props {
@@ -35,6 +37,7 @@ export default function Licenses( {
 }: Props ): ReactElement {
 	const dispatch = useDispatch();
 	const translate = useTranslate();
+	const isAgencyUser = useSelector( showAgencyDashboard );
 
 	const context = {
 		filter,
@@ -52,7 +55,7 @@ export default function Licenses( {
 		<Main wideLayout className="licenses">
 			<DocumentHead title={ translate( 'Licenses' ) } />
 			<SidebarNavigation />
-
+			{ isAgencyUser && <SiteWelcomeBanner bannerKey="licenses-page" /> }
 			<div className="licenses__header">
 				<CardHeading size={ 36 }>{ translate( 'Licenses' ) }</CardHeading>
 

client/state/partner-portal/agency-dashboard/selectors.ts

@@ -0,0 +1,21 @@
+import { DefaultRootState } from 'react-redux';
+import { Preference } from 'calypso/jetpack-cloud/sections/agency-dashboard/sites-overview/types';
+import { getPreference } from 'calypso/state/preferences/selectors';
+
+export const JETPACK_DASHBOARD_WELCOME_BANNER_PREFERENCE =
+	'jetpack-dashboard-welcome-banner-preference';
+
+export const JETPACK_DASHBOARD_WELCOME_BANNER_PREFERENCE_HOME_PAGE =
+	'jetpack-dashboard-welcome-banner-preference-home-page';
+
+/**
+ * Returns preference associated with the welcome banner.
+ *
+ */
+export function getJetpackDashboardWelcomeBannerPreference(
+	state: DefaultRootState,
+	key: string
+): Preference {
+	const preference = getPreference( state, key );
+	return preference;
+}