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 ); },