-
Notifications
You must be signed in to change notification settings - Fork 2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
This reverts commit 3f41086.
- Loading branch information
Showing
4 changed files
with
195 additions
and
47 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
92 changes: 92 additions & 0 deletions
92
client/hosting/sites/components/sites-dashboard-banners-manager.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <div className="sites-banner-container"> | ||
| <Banner | ||
| icon="info-outline" | ||
| callToAction={ translate( 'Get help' ) } | ||
| primaryButton={ false } | ||
| className="sites-banner" | ||
| description={ translate( | ||
| "Let's solve it together. Reach out to our support team to get your migration started." | ||
| ) } | ||
| dismissPreferenceName="migration-pending-sites" | ||
| event="get-help" | ||
| horizontal | ||
| onClick={ openHelpCenter } | ||
| target="_blank" | ||
| title={ translate( 'Stuck on your migration?' ) } | ||
| tracksClickName="calypso_sites_dashboard_migration_banner_click" | ||
| /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| if ( showA8CForAgenciesBanner ) { | ||
| return ( | ||
| <div className="sites-banner-container"> | ||
| <Banner | ||
| callToAction={ translate( 'Learn more {{icon/}}', { | ||
| components: { | ||
| icon: <Gridicon icon="external" />, | ||
| }, | ||
| } ) } | ||
| 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" | ||
| /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| return null; | ||
| }; | ||
|
|
||
| export default SitesDashboardBannersManager; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
92 changes: 92 additions & 0 deletions
92
client/hosting/sites/components/test/sites-dashboard-banners-manager.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| /** | ||
| * @jest-environment jsdom | ||
| */ | ||
| import { render } from '@testing-library/react'; | ||
| import React from 'react'; | ||
| import { Provider } from 'react-redux'; | ||
| import configureStore from 'redux-mock-store'; | ||
| import Banner from 'calypso/components/banner'; | ||
| import SitesDashboardBannersManager from '../sites-dashboard-banners-manager'; | ||
| import type { Status } from '@automattic/sites/src/use-sites-list-grouping'; | ||
|
|
||
| // Mock the Banner component | ||
| jest.mock( 'calypso/components/banner', () => { | ||
| return jest.fn( ( { title } ) => <div>{ title }</div> ); | ||
| } ); | ||
|
|
||
| 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( | ||
| <Provider store={ store }> | ||
| <SitesDashboardBannersManager sitesStatuses={ sitesStatuses } sitesCount={ 1 } /> | ||
| </Provider> | ||
| ); | ||
|
|
||
| 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( | ||
| <Provider store={ store }> | ||
| <SitesDashboardBannersManager sitesStatuses={ sitesStatuses } sitesCount={ 1 } /> | ||
| </Provider> | ||
| ); | ||
|
|
||
| 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( | ||
| <Provider store={ store }> | ||
| <SitesDashboardBannersManager sitesStatuses={ sitesStatuses } sitesCount={ 5 } /> | ||
| </Provider> | ||
| ); | ||
|
|
||
| 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( | ||
| <Provider store={ store }> | ||
| <SitesDashboardBannersManager sitesStatuses={ sitesStatuses } sitesCount={ 4 } /> | ||
| </Provider> | ||
| ); | ||
|
|
||
| expect( | ||
| queryByText( "Building sites for customers? Here's how to earn more." ) | ||
| ).not.toBeInTheDocument(); | ||
| } ); | ||
| } ); |