From 931697c8cdc81d2076045328e214b7def110e022 Mon Sep 17 00:00:00 2001 From: Renatho De Carli Rosa Date: Tue, 15 Oct 2024 15:26:11 -0300 Subject: [PATCH] Revert "Revert "Add sites migration banner (#95298)" (#95388)" (#95402) This reverts commit 3f41086bc355b0902e8375eb5a6a198ec0dbbdc6. --- .../sites/components/dotcom-style.scss | 7 +- .../sites-dashboard-banners-manager.tsx | 92 +++++++++++++++++++ .../sites/components/sites-dashboard.tsx | 51 ++-------- .../sites-dashboard-banners-manager.test.tsx | 92 +++++++++++++++++++ 4 files changed, 195 insertions(+), 47 deletions(-) create mode 100644 client/hosting/sites/components/sites-dashboard-banners-manager.tsx create mode 100644 client/hosting/sites/components/test/sites-dashboard-banners-manager.test.tsx diff --git a/client/hosting/sites/components/dotcom-style.scss b/client/hosting/sites/components/dotcom-style.scss index 051683d6184894..f982eda80524e8 100644 --- a/client/hosting/sites/components/dotcom-style.scss +++ b/client/hosting/sites/components/dotcom-style.scss @@ -73,12 +73,13 @@ } } - .sites-a8c-for-agencies-banner-container { + .sites-banner-container { display: flex; justify-content: center; } - .sites-a8c-for-agencies-banner { + .sites-banner { + width: 100%; margin-inline: 16px; .banner__action { @@ -634,7 +635,7 @@ } } - .sites-a8c-for-agencies-banner-container { + .sites-banner-container { display: none; } } diff --git a/client/hosting/sites/components/sites-dashboard-banners-manager.tsx b/client/hosting/sites/components/sites-dashboard-banners-manager.tsx new file mode 100644 index 00000000000000..808f282085d87d --- /dev/null +++ b/client/hosting/sites/components/sites-dashboard-banners-manager.tsx @@ -0,0 +1,92 @@ +import { Gridicon } from '@automattic/components'; +import { HelpCenter } from '@automattic/data-stores'; +import { localizeUrl } from '@automattic/i18n-utils'; +import { useDispatch as useDataStoreDispatch } from '@wordpress/data'; +import { translate } from 'i18n-calypso'; +import { useCallback } from 'react'; +import { useSelector } from 'react-redux'; +import { isCardDismissed } from 'calypso/blocks/dismissible-card/selectors'; +import Banner from 'calypso/components/banner'; +import type { Status } from '@automattic/sites/src/use-sites-list-grouping'; + +const HELP_CENTER_STORE = HelpCenter.register(); + +type SitesDashboardBannersManagerProps = { + sitesStatuses: Status[]; + sitesCount: number; +}; + +const SitesDashboardBannersManager = ( { + sitesStatuses, + sitesCount, +}: SitesDashboardBannersManagerProps ) => { + const { setShowHelpCenter } = useDataStoreDispatch( HELP_CENTER_STORE ); + + const showA8CForAgenciesBanner = sitesCount >= 5; + const migrationPendingSitesCount = sitesStatuses.find( + ( status ) => status.name === 'migration-pending' + )?.count; + + const isMigrationBannerDismissed = useSelector( isCardDismissed( 'migration-pending-sites' ) ); + + const openHelpCenter = useCallback( () => { + setShowHelpCenter( true ); + }, [ setShowHelpCenter ] ); + + if ( + migrationPendingSitesCount && + migrationPendingSitesCount > 0 && + // If the banner is dismissed, we don't want to return earlier to show the other banner. + ! isMigrationBannerDismissed + ) { + return ( +
+ +
+ ); + } + + if ( showA8CForAgenciesBanner ) { + return ( +
+ , + }, + } ) } + className="sites-banner" + description={ translate( + "Earn up to 50% revenue share and get volume discounts on WordPress.com hosting when you migrate sites to our platform and promote Automattic's products to clients." + ) } + dismissPreferenceName="dismissible-card-a8c-for-agencies-sites" + event="learn-more" + horizontal + href={ localizeUrl( 'https://wordpress.com/for-agencies?ref=wpcom-sites-dashboard' ) } + target="_blank" + title={ translate( "Building sites for customers? Here's how to earn more." ) } + tracksClickName="calypso_sites_dashboard_a4a_banner_click" + /> +
+ ); + } + + return null; +}; + +export default SitesDashboardBannersManager; diff --git a/client/hosting/sites/components/sites-dashboard.tsx b/client/hosting/sites/components/sites-dashboard.tsx index 80f904018a58db..7639b2f60e82cb 100644 --- a/client/hosting/sites/components/sites-dashboard.tsx +++ b/client/hosting/sites/components/sites-dashboard.tsx @@ -1,5 +1,3 @@ -import { Gridicon } from '@automattic/components'; -import { localizeUrl, useHasEnTranslation } from '@automattic/i18n-utils'; import { type SiteExcerptData, SitesSortKey, @@ -28,7 +26,6 @@ import LayoutHeader, { } from 'calypso/a8c-for-agencies/components/layout/header'; import LayoutTop from 'calypso/a8c-for-agencies/components/layout/top'; import { GuidedTourContextProvider } from 'calypso/a8c-for-agencies/data/guided-tours/guided-tour-context'; -import Banner from 'calypso/components/banner'; import DocumentHead from 'calypso/components/data/document-head'; import { useSiteExcerptsQuery } from 'calypso/data/sites/use-site-excerpts-query'; import { isP2Theme } from 'calypso/lib/site/utils'; @@ -49,6 +46,7 @@ import { } from '../onboarding-tours'; import { DOTCOM_OVERVIEW, FEATURE_TO_ROUTE_MAP } from './site-preview-pane/constants'; import DotcomPreviewPane from './site-preview-pane/dotcom-preview-pane'; +import SitesDashboardBannersManager from './sites-dashboard-banners-manager'; import SitesDashboardHeader from './sites-dashboard-header'; import DotcomSitesDataViews, { useSiteStatusGroups } from './sites-dataviews'; import { getSitesPagination } from './sites-dataviews/utils'; @@ -131,8 +129,6 @@ const SitesDashboard = ( { [ 'theme_slug' ] ); - const hasEnTranslation = useHasEnTranslation(); - useShowSiteCreationNotice( allSites, newSiteID ); useShowSiteTransferredNotice(); @@ -272,7 +268,7 @@ const SitesDashboard = ( { }, [ dataViewsState.filters, siteStatusGroups ] ); // Filter sites list by status group. - const { currentStatusGroup } = useSitesListGrouping( allSites, { + const { currentStatusGroup, statuses } = useSitesListGrouping( allSites, { status: statusSlug || 'all', showHidden: true, } ); @@ -354,8 +350,6 @@ const SitesDashboard = ( { const hideListing = false; const isNarrowView = false; - const showA8CForAgenciesBanner = paginatedSites.length >= 5; - const dashboardTitle = siteType === 'p2' ? translate( 'P2s' ) : translate( 'Sites' ); return ( @@ -383,42 +377,11 @@ const SitesDashboard = ( { - { showA8CForAgenciesBanner && ( -
- , - }, - } ) } - className="sites-a8c-for-agencies-banner" - description={ - hasEnTranslation( - "Earn up to 50% revenue share and get volume discounts on WordPress.com hosting when you migrate sites to our platform and promote Automattic's products to clients." - ) - ? translate( - "Earn up to 50% revenue share and get volume discounts on WordPress.com hosting when you migrate sites to our platform and promote Automattic's products to clients." - ) - : translate( - 'Manage multiple WordPress sites from one place, get volume discounts on hosting products, and earn up to 50% revenue share when you migrate sites to our platform and refer our products to clients.' - ) - } - dismissPreferenceName="dismissible-card-a8c-for-agencies-sites" - event="learn-more" - horizontal - href={ localizeUrl( - 'https://wordpress.com/for-agencies?ref=wpcom-sites-dashboard' - ) } - target="_blank" - title={ - hasEnTranslation( "Building sites for customers? Here's how to earn more." ) - ? translate( "Building sites for customers? Here's how to earn more." ) - : translate( 'Managing multiple sites? Meet our agency hosting' ) - } - tracksClickName="calypso_sites_dashboard_a4a_banner_click" - /> -
- ) } + + { + return jest.fn( ( { title } ) =>
{ title }
); +} ); + +const mockStore = configureStore(); + +describe( 'SitesDashboardBannersManager', () => { + let store; + + beforeEach( () => { + store = mockStore( { + preferences: { + localValues: { + 'dismissible-card-migration-pending-sites': false, + }, + }, + } ); + } ); + + it( 'renders migration banner when migration pending sites is greater than 0', () => { + const sitesStatuses = [ { name: 'migration-pending', count: 1 } as Status ]; + + const { getByText } = render( + + + + ); + + expect( getByText( 'Stuck on your migration?' ) ).toBeInTheDocument(); + } ); + + it( 'does not render migration banner if it is dismissed', () => { + store = mockStore( { + preferences: { + localValues: { + 'dismissible-card-migration-pending-sites': true, + }, + }, + } ); + + const sitesStatuses = [ { name: 'migration-pending', count: 1 } as Status ]; + + const { queryByText } = render( + + + + ); + + expect( queryByText( 'Stuck on your migration?' ) ).not.toBeInTheDocument(); + } ); + + it( 'renders A8C for Agencies banner when sitesCount is 5 or more', () => { + const sitesStatuses = []; + + const { getByText } = render( + + + + ); + + expect( + getByText( "Building sites for customers? Here's how to earn more." ) + ).toBeInTheDocument(); + expect( Banner ).toHaveBeenCalled(); + } ); + + it( 'does not render A8C for Agencies banner when sitesCount is less than 5', () => { + const sitesStatuses = []; + + const { queryByText } = render( + + + + ); + + expect( + queryByText( "Building sites for customers? Here's how to earn more." ) + ).not.toBeInTheDocument(); + } ); +} );