Add Tip component when assets are imported

js/src/components/paid-ads/asset-group/asset-group-section.js

@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
+import { Tip } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -24,6 +25,7 @@ import './asset-group-section.scss';
  */
 export default function AssetGroupSection() {
 	const { adapter } = useAdaptiveFormContext();
+	const showTip = adapter.hasImportedAssets;
 
 	return (
 		<Section
@@ -70,6 +72,14 @@ export default function AssetGroupSection() {
 					// reselect button in the card footer.
 					hideFooter={ ! adapter.isEmptyAssetEntityGroup }
 				/>
+				{ showTip && (
+					<Tip>
+						{ __(
+							'We auto-populated assets directly from your Final URL. We encourage you to edit or add more in order to best showcase your business.',
+							'google-listings-and-ads'
+						) }
+					</Tip>
+				) }
 				<AssetGroupCard />
 			</VerticalGapLayout>
 		</Section>

js/src/components/paid-ads/asset-group/asset-group-section.scss

@@ -5,4 +5,20 @@
 		font-size: $default-font-size;
 		color: $gray-700;
 	}
+
+	.components-tip {
+		padding: $grid-unit-15 $grid-unit-20;
+		background: #F0F6FC;
+		border: $border-width solid #C5D9ED;
+		line-height: $gla-line-height-medium;
+
+		> p {
+			color: $gray-900;
+			font-size: $default-font-size;
+		}
+		> svg {
+			fill: #007CBA;
+			align-self: initial;
+		}
+	}
 }

js/src/components/paid-ads/asset-group/asset-group-section.test.js

@@ -0,0 +1,66 @@
+jest.mock( '.~/components/adaptive-form', () => ( {
+	useAdaptiveFormContext: jest
+		.fn()
+		.mockName( 'useAdaptiveFormContext' )
+		.mockImplementation( () => {
+			return {
+				adapter: {
+					baseAssetGroup: { final_url: 'https://example.com' },
+					hasImportedAssets: false,
+					isEmptyAssetEntityGroup: false,
+					resetAssetGroup: jest.fn(),
+				},
+			};
+		} ),
+} ) );
+
+/**
+ * External dependencies
+ */
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import AssetGroupSection from '.~/components/paid-ads/asset-group/asset-group-section';
+import { useAdaptiveFormContext } from '.~/components/adaptive-form';
+
+jest.mock( '.~/components/paid-ads/asset-group/asset-group-card', () =>
+	jest.fn( ( props ) => <div { ...props } /> ).mockName( 'AssetGroupCard' )
+);
+
+describe( 'AssetGroupSection', () => {
+	test( 'Component renders', () => {
+		const { queryByText } = render( <AssetGroupSection /> );
+		expect( queryByText( /Add additional assets/i ) ).toBeInTheDocument();
+	} );
+
+	test( 'Component not showing Tip if there are no imported assets', () => {
+		const { queryByText } = render( <AssetGroupSection /> );
+		expect(
+			queryByText(
+				'We auto-populated assets directly from your Final URL. We encourage you to edit or add more in order to best showcase your business.'
+			)
+		).not.toBeInTheDocument();
+	} );
+
+	test( 'Component showing Tip if there are imported assets', () => {
+		useAdaptiveFormContext.mockImplementation( () => {
+			return {
+				adapter: {
+					baseAssetGroup: { final_url: 'https://example.com' },
+					hasImportedAssets: true,
+					isEmptyAssetEntityGroup: false,
+					resetAssetGroup: jest.fn(),
+				},
+			};
+		} );
+		const { queryByText } = render( <AssetGroupSection /> );
+		expect(
+			queryByText(
+				'We auto-populated assets directly from your Final URL. We encourage you to edit or add more in order to best showcase your business.'
+			)
+		).toBeInTheDocument();
+	} );
+} );

js/src/components/paid-ads/budget-section/budget-recommendation/index.scss

@@ -13,7 +13,7 @@
 
 	.components-tip {
 		padding: $grid-unit-15 $grid-unit-20;
-		background-color: #f0f6fc;
+		background-color: #F0F6FC;
 
 		> p {
 			line-height: $gla-line-height-medium;

js/src/components/paid-ads/campaign-assets-form.js

@@ -77,6 +77,7 @@ export default function CampaignAssetsForm( {
 
 	const [ baseAssetGroup, setBaseAssetGroup ] = useState( initialAssetGroup );
 	const [ validationRequestCount, setValidationRequestCount ] = useState( 0 );
+	const [ hasImportedAssets, setHasImportedAssets ] = useState( false );
 
 	const extendAdapter = ( formContext ) => {
 		const assetGroupErrors = validateAssetGroup( formContext.values );
@@ -90,13 +91,20 @@ export default function CampaignAssetsForm( {
 			baseAssetGroup,
 			validationRequestCount,
 			assetGroupErrors,
+			hasImportedAssets,
 			isValidAssetGroup: Object.keys( assetGroupErrors ).length === 0,
 			resetAssetGroup( assetGroup ) {
 				const nextAssetGroup = assetGroup || initialAssetGroup;
+				let hasNonEmptyAssets = false;
 
 				Object.keys( emptyAssetGroup ).forEach( ( key ) => {
+					if ( assetGroup && assetGroup[ key ]?.length ) {
+						hasNonEmptyAssets = true;
+					}
 					formContext.setValue( key, nextAssetGroup[ key ] );
 				} );
+
+				setHasImportedAssets( hasNonEmptyAssets );
 				setBaseAssetGroup( nextAssetGroup );
 				setValidationRequestCount( 0 );
 			},