Merge pull request #1881 from woocommerce/add/1787-assets-faqs

PMax Assets: Add FAQs for the assets

js/src/components/faqs-panel/index.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Panel, PanelBody, PanelRow } from '@wordpress/components';
+import { Panel, PanelBody, PanelRow } from 'extracted/@wordpress/components';
 import { recordEvent } from '@woocommerce/tracks';
 import classnames from 'classnames';
 

js/src/components/faqs-panel/index.scss

@@ -13,14 +13,8 @@
 
 	.components-panel__body-title {
 		.components-panel__body-toggle.components-button {
-			display: flex;
-			flex-direction: row-reverse;
-			justify-content: space-between;
-
-			.components-panel__arrow {
-				position: unset;
-				transform: unset;
-			}
+			padding-top: $grid-unit-05 * 5;
+			padding-bottom: $grid-unit-05 * 5;
 		}
 	}
 }

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

@@ -14,6 +14,7 @@ import StepContentHeader from '.~/components/stepper/step-content-header';
 import StepContentFooter from '.~/components/stepper/step-content-footer';
 import AppButton from '.~/components/app-button';
 import AssetGroupSection from './asset-group-section';
+import FaqsSection from './faqs-section';
 
 export const ACTION_SUBMIT_CAMPAIGN_AND_ASSETS = 'submit-campaign-and-assets';
 export const ACTION_SUBMIT_CAMPAIGN_ONLY = 'submit-campaign-only';
@@ -114,6 +115,7 @@ export default function AssetGroup( { campaign } ) {
 				) }
 			/>
 			<AssetGroupSection />
+			<FaqsSection />
 			<StepContentFooter>
 				{ ( isCreation || adapter.isEmptyAssetEntityGroup ) && (
 					// Currently, the PMax Assets feature in this extension doesn't offer the function

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

@@ -0,0 +1,81 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { createInterpolateElement } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Section from '.~/wcdl/section';
+import FaqsPanel from '.~/components/faqs-panel';
+import AppDocumentationLink from '.~/components/app-documentation-link';
+
+const faqItems = [
+	{
+		trackId: 'what-will-my-ads-look-like',
+		question: __(
+			'What will my ads look like?',
+			'google-listings-and-ads'
+		),
+		answer: (
+			<div>
+				{ createInterpolateElement(
+					__(
+						'Google will generate text ads and responsive display ads in various combinations and formats from the headlines, images, and descriptions you add. Your ads will automatically adjust their size, appearance, and format to fit available ad spaces. <link>See common ad formats</link>',
+						'google-listings-and-ads'
+					),
+					{
+						link: (
+							<AppDocumentationLink
+								context="assets-faq"
+								linkId="assets-faq-about-ad-formats-available-in-different-campaign-types"
+								href="https://support.google.com/google-ads/answer/1722124"
+							/>
+						),
+					}
+				) }
+			</div>
+		),
+	},
+	{
+		trackId: 'what-makes-these-ads-different-from-product-ads',
+		question: __(
+			'What makes these ads different from product ads?',
+			'google-listings-and-ads'
+		),
+		answer: (
+			<>
+				<div>
+					{ __(
+						`Dynamic ad assets can elevate your campaign by offering a variety of ad combinations that capture your audience's attention and generate maximum engagement. By leveraging Google's asset-mixing technology, your ads can be optimized to deliver the right message, to the right people, at the right time.`,
+						'google-listings-and-ads'
+					) }
+				</div>
+				<div>
+					{ __(
+						'Compared to product ads—which showcase individual products and are designed to drive direct sales and revenue—responsive ads with dynamic ad assets are typically used to highlight your business, generate interest, and attract new customers. While both types of ads can drive conversions, using them together can generate even greater results.',
+						'google-listings-and-ads'
+					) }
+				</div>
+			</>
+		),
+	},
+];
+
+/**
+ * Renders a toggleable FAQs section about the campaign assets of the Google Ads.
+ *
+ * @fires gla_faq with `{ context: 'campaign-management', id: 'what-will-my-ads-look-like', action: 'expand' | 'collapse' }`.
+ * @fires gla_faq with `{ context: 'campaign-management', id: 'what-makes-these-ads-different-from-product-ads', action: 'expand' | 'collapse' }`.
+ * @fires gla_documentation_link_click with `{ context: 'assets-faq', linkId: 'assets-faq-about-ad-formats-available-in-different-campaign-types', href: 'https://support.google.com/google-ads/answer/1722124' }`.
+ */
+const FaqsSection = () => {
+	return (
+		<Section>
+			<FaqsPanel context="campaign-management" faqItems={ faqItems } />
+		</Section>
+	);
+};
+
+export default FaqsSection;

js/src/components/pre-launch-check-item/index.js

@@ -2,12 +2,8 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	CheckboxControl,
-	Panel,
-	PanelBody,
-	PanelRow,
-} from '@wordpress/components';
+import { CheckboxControl } from '@wordpress/components';
+import { Panel, PanelBody, PanelRow } from 'extracted/@wordpress/components';
 import { recordEvent } from '@woocommerce/tracks';
 import { useRef } from '@wordpress/element';
 

js/src/css/shared/_gutenberg-components.scss

@@ -1,6 +1,3 @@
-// Import Gutenberg components that aren't already imported in the lowest WC Admin version we support
-@import "node_modules/@wordpress/components/src/panel/style";
-
 // Scope the old styles of core components to GLA pages to avoid styling conflicts with other non-GLA pages.
 .gla-admin-page {
 	// WP 6.1 Compatibility (@wordpress/components 21.0.6 imported by @woocommerce/components)