Marketing: Do not show "Create a campaign" button if there are no cam…

…paign types (#38825)
woocommerce · Jun 21, 2023 · f31eca2 · f31eca2
2 parents bc2cba7 + 04294c4
commit f31eca2
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 20 deletions.
diff --git a/...ins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.test.tsx b/...ins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.test.tsx
@@ -158,7 +158,7 @@ describe( 'Campaigns component', () => {
 		expect( screen.getByText( 'Campaign 6' ) ).toBeInTheDocument();
 	} );
 
-	it( 'renders a "Create new campaign" button in the card header, and upon clicking, displays the "Create a new campaign" modal', async () => {
+	it( 'does not render a "Create new campaign" button in the card header when there are no campaign types', async () => {
 		( useCampaigns as jest.Mock ).mockReturnValue( {
 			loading: false,
 			error: undefined,
@@ -169,6 +169,43 @@ describe( 'Campaigns component', () => {
 		} );
 		( useCampaignTypes as jest.Mock ).mockReturnValue( {
 			loading: false,
+			data: [],
+		} );
+
+		render( <Campaigns /> );
+
+		expect(
+			screen.queryByRole( 'button', { name: 'Create new campaign' } )
+		).not.toBeInTheDocument();
+	} );
+
+	it( 'renders a "Create new campaign" button in the card header when there are campaign types, and upon clicking, displays the "Create a new campaign" modal', async () => {
+		( useCampaigns as jest.Mock ).mockReturnValue( {
+			loading: false,
+			error: undefined,
+			data: [ createTestCampaign( '1' ) ],
+			meta: {
+				total: 1,
+			},
+		} );
+		( useCampaignTypes as jest.Mock ).mockReturnValue( {
+			loading: false,
+			data: [
+				{
+					id: 'google-ads',
+					name: 'Google Ads',
+					description:
+						'Boost your product listings with a campaign that is automatically optimized to meet your goals.',
+					channel: {
+						slug: 'google-listings-and-ads',
+						name: 'Google Listings & Ads',
+					},
+					create_url:
+						'https://wc1.test/wp-admin/admin.php?page=wc-admin&path=/google/dashboard&subpath=/campaigns/create',
+					icon_url:
+						'https://woocommerce.com/wp-content/uploads/2021/06/woo-GoogleListingsAds-jworee.png',
+				},
+			],
 		} );
 
 		render( <Campaigns /> );

diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.tsx b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.tsx
@@ -28,7 +28,7 @@ import {
 	CardHeaderTitle,
 	CreateNewCampaignModal,
 } from '~/marketing/components';
-import { useCampaigns } from '~/marketing/hooks';
+import { useCampaignTypes, useCampaigns } from '~/marketing/hooks';
 import './Campaigns.scss';
 
 const tableCaption = __( 'Campaigns', 'woocommerce' );
@@ -59,6 +59,7 @@ export const Campaigns = () => {
 	const [ page, setPage ] = useState( 1 );
 	const [ isModalOpen, setModalOpen ] = useState( false );
 	const { loading, data, meta } = useCampaigns( page, perPage );
+	const { data: dataCampaignTypes } = useCampaignTypes();
 	const total = meta?.total;
 
 	const getContent = () => {
@@ -158,6 +159,7 @@ export const Campaigns = () => {
 		);
 	};
 
+	const showCreateCampaignButton = !! dataCampaignTypes?.length;
 	const showFooter = !! ( total && total > perPage );
 
 	return (
@@ -166,12 +168,14 @@ export const Campaigns = () => {
 				<CardHeaderTitle>
 					{ __( 'Campaigns', 'woocommerce' ) }
 				</CardHeaderTitle>
-				<Button
-					variant="secondary"
-					onClick={ () => setModalOpen( true ) }
-				>
-					{ __( 'Create new campaign', 'woocommerce' ) }
-				</Button>
+				{ showCreateCampaignButton && (
+					<Button
+						variant="secondary"
+						onClick={ () => setModalOpen( true ) }
+					>
+						{ __( 'Create new campaign', 'woocommerce' ) }
+					</Button>
+				) }
 				{ isModalOpen && (
 					<CreateNewCampaignModal
 						onRequestClose={ () => setModalOpen( false ) }

diff --git a/...ce-admin/client/marketing/overview-multichannel/IntroductionBanner/IntroductionBanner.tsx b/...ce-admin/client/marketing/overview-multichannel/IntroductionBanner/IntroductionBanner.tsx
@@ -13,6 +13,7 @@ import { CreateNewCampaignModal } from '~/marketing/components';
 import {
 	useRegisteredChannels,
 	useRecommendedChannels,
+	useCampaignTypes,
 } from '~/marketing/hooks';
 import './IntroductionBanner.scss';
 import wooIconUrl from './woo.svg';
@@ -30,8 +31,11 @@ export const IntroductionBanner = ( {
 	const [ isModalOpen, setModalOpen ] = useState( false );
 	const { data: dataRegistered } = useRegisteredChannels();
 	const { data: dataRecommended } = useRecommendedChannels();
+	const { data: dataCampaignTypes } = useCampaignTypes();
 
-	const showCreateCampaignButton = !! dataRegistered?.length;
+	const showButtons = !! (
+		dataRegistered?.length && dataCampaignTypes?.length
+	);
 
 	/**
 	 * Boolean to display the "Add channels" button in the introduction banner.
@@ -102,21 +106,19 @@ export const IntroductionBanner = ( {
 						</Flex>
 					</FlexItem>
 				</Flex>
-				{ ( showCreateCampaignButton || showAddChannelsButton ) && (
+				{ showButtons && (
 					<Flex
 						className="woocommerce-marketing-introduction-banner-buttons"
 						justify="flex-start"
 					>
-						{ showCreateCampaignButton && (
-							<Button
-								variant="primary"
-								onClick={ () => {
-									setModalOpen( true );
-								} }
-							>
-								{ __( 'Create a campaign', 'woocommerce' ) }
-							</Button>
-						) }
+						<Button
+							variant="primary"
+							onClick={ () => {
+								setModalOpen( true );
+							} }
+						>
+							{ __( 'Create a campaign', 'woocommerce' ) }
+						</Button>
 						{ showAddChannelsButton && (
 							<Button
 								variant="secondary"

diff --git a/plugins/woocommerce/changelog/feature-38805-create-campaign-button b/plugins/woocommerce/changelog/feature-38805-create-campaign-button
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Show create campaign button when there are campaign types in marketing page.