Draft: [GOOWOO-473] Ensure GenAI works together with SBM

bin/GoogleAdsCleanupServices.php

@@ -26,7 +26,7 @@ class GoogleAdsCleanupServices {
 	 *
 	 * @var string
 	 */
-	protected $version = 'V20';
+	protected $version = 'V22';
 
 	/**
 	 * @var Event Composer event.
@@ -52,12 +52,11 @@ class GoogleAdsCleanupServices {
 	 * @var string[] List of Service to NOT remove even when usage is not found.
 	 */
 	protected $avoid_cleanup = [
-		// Some methods like `ResourceNames::forGeoTargetConstant` are changed to use
-		// `BatchJobServiceClient` class instead of `GoogleAdsServiceClient` when
-		// upgrading from v18 to v20, so we need to keep this service. See:
-		// - https://github.com/googleads/google-ads-php/blob/v28.0.0/src/Google/Ads/GoogleAds/Util/V18/ResourceNames.php#L1704-L1710
+		// ConversionValueRuleService is now used in `ResourceNames::forGeoTargetConstant` in V22.
+		// instead of the previous BatchJobServiceClient. See:
 		// - https://github.com/googleads/google-ads-php/blob/v28.0.0/src/Google/Ads/GoogleAds/Util/V20/ResourceNames.php#L1433-L1439
-		'BatchJob',
+		// - https://github.com/googleads/google-ads-php/blob/v31.1.0/src/Google/Ads/GoogleAds/Util/V22/ResourceNames.php#L1457-L1463
+		'ConversionValueRule',
 	];
 
 	/**

composer.json

@@ -9,7 +9,7 @@
 		"ext-json": "*",
 		"google/apiclient": "^2.16",
 		"google/apiclient-services": "^0.350.0",
-		"googleads/google-ads-php": "dev-legacy-v31.0.1",
+		"googleads/google-ads-php": "dev-legacy-v31.1.0",
 		"league/container": "^4.2",
 		"league/iso3166": "^4.1",
 		"phpseclib/bcmath_compat": "^2.0",
@@ -60,7 +60,7 @@
 			"Google\\Task\\Composer::cleanup",
 			"Automattic\\WooCommerce\\GoogleListingsAndAds\\Util\\SymfonyPolyfillCleanup::remove",
 			"Automattic\\WooCommerce\\GoogleListingsAndAds\\Util\\GoogleAdsCleanupServices::remove",
-			"composer run-script remove-google-ads-api-version-support -- 18 19 21",
+			"composer run-script remove-google-ads-api-version-support -- 18 19 20 21",
 			"php ./bin/prefix-vendor-namespace.php",
 			"bash ./bin/cleanup-vendor-files.sh",
 			"composer dump-autoload"

jest.config.js

@@ -12,7 +12,8 @@ module.exports = {
 	],
 	moduleNameMapper: {
 		'\\.(png|jpg)$': '<rootDir>/tests/mocks/assets/imageMock.js',
-		'\\.svg$': '<rootDir>/tests/mocks/assets/svgrMock.js',
+		'\\.svg\\?inline$': '<rootDir>/tests/mocks/assets/svgrMock.js',
+		'\\.svg$': '<rootDir>/tests/mocks/assets/svgFileMock.js',
 		'\\.scss$': '<rootDir>/tests/mocks/assets/styleMock.js',
 		// Transform our `~/` alias.
 		'^~/(.*)$': '<rootDir>/js/src/$1',

js/src/components/paid-ads/__snapshots__/gen-ai-card.test.js.snap

@@ -0,0 +1,129 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GenAICard Generate assets with GenAI button Match the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="components-surface components-card gla-gen-ai-card css-1tft2nr-View-Surface-getBorders-primary-Card-rounded e19lxcc00"
+    data-wp-c16t="true"
+    data-wp-component="Card"
+  >
+    <div
+      class="css-1hgy6nb-View-Content e19lxcc00"
+    >
+      <div
+        class="components-card__body components-card-body css-h6g56v-View-Body-borderRadius-large e19lxcc00"
+        data-wp-c16t="true"
+        data-wp-component="CardBody"
+      >
+        <div
+          class="components-flex css-11kn0n8-View-Flex-base-ItemsColumn e19lxcc00"
+          data-wp-c16t="true"
+          data-wp-component="Flex"
+        >
+          <div
+            class="components-flex-item components-flex-block css-1xq6y8a-View-Item-sx-Base-block e19lxcc00"
+            data-wp-c16t="true"
+            data-wp-component="FlexBlock"
+          >
+            <div
+              class="components-flex css-v3bz0k-View-Flex-base-ItemsColumn e19lxcc00"
+              data-wp-c16t="true"
+              data-wp-component="Flex"
+            >
+              <div>
+                <div
+                  class="gla-subsection-title gla-section-card-title"
+                  direction="column-reverse,row"
+                >
+                  Review Your AI Suggestions
+                </div>
+                <div>
+                  Google AI analyzed your campaign’s URL to automatically generate your ad assets. Please review the suggested text and images below to ensure they align with your brand.
+                </div>
+              </div>
+              <div
+                class="components-notice is-success"
+              >
+                <div
+                  class="components-visually-hidden css-6272zb-View e19lxcc00"
+                  data-wp-c16t="true"
+                  data-wp-component="VisuallyHidden"
+                  style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal;"
+                >
+                  Notice
+                </div>
+                <div
+                  class="components-notice__content"
+                >
+                  <div
+                    class="components-flex css-1u4qd2t-View-Flex-base-ItemsRow e19lxcc00"
+                    data-wp-c16t="true"
+                    data-wp-component="Flex"
+                  >
+                    <div
+                      class="components-flex-item css-1wj1jhv-View-Item-sx-Base e19lxcc00"
+                      data-wp-c16t="true"
+                      data-wp-component="FlexItem"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        focusable="false"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        width="24"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
+                        />
+                      </svg>
+                    </div>
+                    <div
+                      class="components-flex-item components-flex-block css-1oh0tc9-View-Item-sx-Base-block e19lxcc00"
+                      data-wp-c16t="true"
+                      data-wp-component="FlexBlock"
+                    >
+                      <p>
+                        Text assets were auto-populated with Google AI
+                      </p>
+                    </div>
+                  </div>
+                  <div
+                    class="components-notice__actions"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="components-flex-item css-1xomaer-View-Item-sx-Base e19lxcc00"
+            data-wp-c16t="true"
+            data-wp-component="FlexItem"
+          >
+            <img
+              alt="Google's Gen AI illustration"
+              decoding="async"
+              height="90"
+              loading="lazy"
+              src="SvgrURL"
+              width="92"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      class="components-elevation css-14ikshg-View-Elevation-sx-Base-elevationClassName e19lxcc00"
+      data-wp-c16t="true"
+      data-wp-component="Elevation"
+    />
+    <div
+      aria-hidden="true"
+      class="components-elevation css-14ikshg-View-Elevation-sx-Base-elevationClassName e19lxcc00"
+      data-wp-c16t="true"
+      data-wp-component="Elevation"
+    />
+  </div>
+</DocumentFragment>
+`;

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

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { Flex, FlexItem, Tip } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -33,7 +34,8 @@ const AssetGroupImagesSection = ( {
 	getNumOfIssues,
 	renderErrors,
 } ) => {
-	const { values, getInputProps } = useAdaptiveFormContext();
+	const { values, getInputProps, adapter } = useAdaptiveFormContext();
+	const showTip = adapter.hasAISuggestedMediaAssets;
 
 	return (
 		<Section
@@ -75,36 +77,57 @@ const AssetGroupImagesSection = ( {
 			}
 		>
 			<div className="gla-asset-group-section__content">
-				{ ASSET_IMAGE_SPECS.map( ( spec ) => {
-					const initialImageUrls = initialValues[ spec.key ];
-					const imageProps = getInputProps( spec.key );
-
-					return (
-						<AssetField
-							key={ spec.key }
-							ref={ refFirstErrorField.bind( spec.key ) }
-							heading={ spec.heading }
-							subheading={ spec.subheading }
-							help={ spec.help }
-							numOfIssues={ getNumOfIssues( spec.key ) }
-							markOptional={ spec.min === 0 }
-							disabled={ ! isSelectedFinalUrl }
-							initialExpanded={ isSelectedFinalUrl }
-						>
-							<ImagesSelector
-								initialImageUrls={ initialImageUrls }
-								maxNumberOfImages={ spec.getMax( values ) }
-								reachedMaxNumberTip={ spec.getMaxNumberTip(
-									values
+				<Flex direction="column" gap={ 4 }>
+					{ showTip && (
+						<FlexItem>
+							<Tip>
+								{ __(
+									"We've used your final URL to auto-populate images…",
+									'google-listings-and-ads'
 								) }
-								imageConfig={ spec.imageConfig }
-								onChange={ imageProps.onChange }
-							>
-								{ renderErrors( spec.key ) }
-							</ImagesSelector>
-						</AssetField>
-					);
-				} ) }
+							</Tip>
+						</FlexItem>
+					) }
+
+					<FlexItem>
+						{ ASSET_IMAGE_SPECS.map( ( spec ) => {
+							const initialImageUrls = initialValues[ spec.key ];
+							const imageProps = getInputProps( spec.key );
+
+							return (
+								<AssetField
+									key={ spec.key }
+									ref={ refFirstErrorField.bind( spec.key ) }
+									heading={ spec.heading }
+									subheading={ spec.subheading }
+									help={ spec.help }
+									numOfIssues={ getNumOfIssues( spec.key ) }
+									markOptional={ spec.min === 0 }
+									disabled={ ! isSelectedFinalUrl }
+									initialExpanded={ isSelectedFinalUrl }
+								>
+									<ImagesSelector
+										assetKey={ spec.key }
+										initialImageUrls={ initialImageUrls }
+										maxNumberOfImages={ spec.getMax(
+											values
+										) }
+										reachedMaxNumberTip={ spec.getMaxNumberTip(
+											values
+										) }
+										imageConfig={ spec.imageConfig }
+										onChange={ imageProps.onChange }
+										generateButtonText={
+											spec.generateButtonText
+										}
+									>
+										{ renderErrors( spec.key ) }
+									</ImagesSelector>
+								</AssetField>
+							);
+						} ) }
+					</FlexItem>
+				</Flex>
 			</div>
 		</Section>
 	);

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

@@ -129,6 +129,14 @@ const AssetGroupTextSection = ( {
 								maxCharacterCounts={ spec.maxCharacterCounts }
 								placeholder={ spec.capitalizedName }
 								addButtonText={ spec.addButtonText }
+								finalUrl={ finalUrl }
+								assetKey={ spec.key }
+								generateButtonPluralText={
+									spec.generateButtonPluralText
+								}
+								generateButtonSingularText={
+									spec.generateButtonSingularText
+								}
 								onChange={ ( texts ) => {
 									if ( spec.requiredSingleValue ) {
 										textProps.onChange( texts[ 0 ] );