diff --git a/js/src/components/paid-ads/asset-group/asset-group-section.js b/js/src/components/paid-ads/asset-group/asset-group-section.js
index 3979ed1fb4..d836655806 100644
--- a/js/src/components/paid-ads/asset-group/asset-group-section.js
+++ b/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 (
+ { showTip && (
+
+ { __(
+ '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'
+ ) }
+
+ ) }
diff --git a/js/src/components/paid-ads/asset-group/asset-group-section.scss b/js/src/components/paid-ads/asset-group/asset-group-section.scss
index a72a3c992c..da7a31743f 100644
--- a/js/src/components/paid-ads/asset-group/asset-group-section.scss
+++ b/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;
+ }
+ }
}
diff --git a/js/src/components/paid-ads/asset-group/asset-group-section.test.js b/js/src/components/paid-ads/asset-group/asset-group-section.test.js
new file mode 100644
index 0000000000..8964d5bcdd
--- /dev/null
+++ b/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 ) =>
).mockName( 'AssetGroupCard' )
+);
+
+describe( 'AssetGroupSection', () => {
+ test( 'Component renders', () => {
+ const { queryByText } = render( );
+ expect( queryByText( /Add additional assets/i ) ).toBeInTheDocument();
+ } );
+
+ test( 'Component not showing Tip if there are no imported assets', () => {
+ const { queryByText } = render( );
+ 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( );
+ 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();
+ } );
+} );
diff --git a/js/src/components/paid-ads/budget-section/budget-recommendation/index.scss b/js/src/components/paid-ads/budget-section/budget-recommendation/index.scss
index cf6aae7e72..0a95add359 100644
--- a/js/src/components/paid-ads/budget-section/budget-recommendation/index.scss
+++ b/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;
diff --git a/js/src/components/paid-ads/campaign-assets-form.js b/js/src/components/paid-ads/campaign-assets-form.js
index 758be01346..38014cddaf 100644
--- a/js/src/components/paid-ads/campaign-assets-form.js
+++ b/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 );
},