Consolidate Ad Creation

js/src/components/paid-ads/ads-campaign/constants.js

@@ -0,0 +1,2 @@
+export const ACTION_COMPLETE = 'complete-ads';
+export const ACTION_SKIP = 'skip-ads';

js/src/components/paid-ads/ads-campaign/index.js

@@ -0,0 +1,187 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	createInterpolateElement,
+	useState,
+	useEffect,
+} from '@wordpress/element';
+import { noop } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import { useAdaptiveFormContext } from '.~/components/adaptive-form';
+import StepContent from '.~/components/stepper/step-content';
+import StepContentHeader from '.~/components/stepper/step-content-header';
+import StepContentFooter from '.~/components/stepper/step-content-footer';
+import AppDocumentationLink from '.~/components/app-documentation-link';
+import AppButton from '.~/components/app-button';
+import FaqsSection from '../faqs-section';
+import PaidAdsFeaturesSection from './paid-ads-features-section';
+import PaidAdsSetupSections from './paid-ads-setup-sections';
+import SkipButton from './skip-button';
+import clientSession from './clientSession';
+import { ACTION_SKIP, ACTION_COMPLETE } from './constants';
+
+/**
+ * @typedef {import('.~/data/actions').Campaign} Campaign
+ */
+
+/**
+ * Renders the container of the form content for campaign management.
+ *
+ * Please note that this component relies on an CampaignAssetsForm's context and custom adapter,
+ * so it expects a `CampaignAssetsForm` to existing in its parents.
+ *
+ * @fires gla_documentation_link_click with `{ context: 'create-ads' | 'edit-ads' | 'setup-ads', link_id: 'see-what-ads-look-like', href: 'https://support.google.com/google-ads/answer/6275294' }`
+ * @param {Object} props React props.
+ * @param {Campaign} [props.campaign] Campaign data to be edited. If not provided, this component will show campaign creation UI.
+ * @param {() => void} props.onContinue Callback called once continue button is clicked.
+ * @param {string} props.headerTitle The title of the step.
+ * @param {string} [props.headerDescription] The description of the step.
+ * @param {() => void} props.onSkip Callback called once skip button is clicked.
+ * @param {boolean} [props.error=false] Whether there's an error to reset the complete state.
+ * @param {boolean} [props.onboardingSetup=false] Whether this component is used in onboarding setup.
+ * @param {'create-ads'|'edit-ads'|'setup-ads'} props.trackingContext A context indicating which page this component is used on. This will be the value of `context` in the track event properties.
+ */
+export default function AdsCampaign( {
+	campaign,
+	trackingContext,
+	headerTitle,
+	headerDescription,
+	onContinue = noop,
+	onSkip = noop,
+	error = false,
+	onboardingSetup = false,
+} ) {
+	const formContext = useAdaptiveFormContext();
+	const { isValidForm, setValue } = formContext;
+	const [ completing, setCompleting ] = useState( null );
+	const [ paidAds, setPaidAds ] = useState( {} );
+	const [ showPaidAdsSetup, setShowPaidAdsSetup ] = useState( () =>
+		clientSession.getShowPaidAdsSetup( false )
+	);
+
+	useEffect( () => {
+		if ( error ) {
+			setCompleting( null );
+		}
+	}, [ error ] );
+
+	const handleOnStatesReceived = ( paidAdsValues ) => {
+		setPaidAds( paidAdsValues );
+
+		const { amount, countryCodes } = paidAdsValues;
+		setValue( 'amount', amount );
+		setValue( 'countryCodes', countryCodes );
+	};
+
+	const handleCreateCampaignClick = () => {
+		setShowPaidAdsSetup( true );
+
+		clientSession.setShowPaidAdsSetup( true );
+	};
+
+	const handleSkipClick = ( event ) => {
+		setCompleting( event.target.dataset.action );
+
+		onSkip();
+	};
+
+	const handleCompleteClick = ( event ) => {
+		setCompleting( event.target.dataset.action );
+
+		onContinue( paidAds );
+	};
+
+	// The status check of Google Ads account connection is included in `paidAds.isReady`,
+	// because when there is no connected account, it will disable the budget section and set the `amount` to `undefined`.
+	const disabledComplete =
+		completing === ACTION_SKIP || ! paidAds.isReady || ! isValidForm;
+	const shouldShowPaidAdsSetup = ! onboardingSetup || showPaidAdsSetup;
+
+	let continueButtonProps = {
+		text: __( 'Continue', 'google-listings-and-ads' ),
+	};
+
+	if ( onboardingSetup ) {
+		continueButtonProps = {
+			'data-action': ACTION_COMPLETE,
+			text: __( 'Complete setup', 'google-listings-and-ads' ),
+			eventName: 'gla_onboarding_complete_with_paid_ads_button_click',
+			eventProps: {
+				budget: paidAds.amount,
+				audiences: paidAds.countryCodes?.join( ',' ),
+			},
+		};
+	}
+
+	const description =
+		headerDescription ||
+		createInterpolateElement(
+			__(
+				'Paid Performance Max campaigns are automatically optimized for you by Google. <link>See what your ads will look like.</link>',
+				'google-listings-and-ads'
+			),
+			{
+				link: (
+					<AppDocumentationLink
+						context={ trackingContext }
+						linkId="see-what-ads-look-like"
+						href="https://support.google.com/google-ads/answer/6275294"
+					/>
+				),
+			}
+		);
+
+	return (
+		<StepContent>
+			<StepContentHeader
+				title={ headerTitle }
+				description={ description }
+			/>
+
+			{ onboardingSetup && (
+				<PaidAdsFeaturesSection
+					hidePaidAdsSetupFooterButtons={ shouldShowPaidAdsSetup }
+					onSkipClick={ handleSkipClick }
+					onCreateCampaignClick={ handleCreateCampaignClick }
+					disableCreateButton={ completing === ACTION_SKIP }
+				/>
+			) }
+
+			{ shouldShowPaidAdsSetup && (
+				<PaidAdsSetupSections
+					onStatesReceived={ handleOnStatesReceived }
+					campaign={ campaign }
+				/>
+			) }
+
+			<FaqsSection />
+
+			{ shouldShowPaidAdsSetup && (
+				<StepContentFooter>
+					{ onboardingSetup && (
+						<SkipButton
+							text={ __(
+								'Skip paid ads creation',
+								'google-listings-and-ads'
+							) }
+							onClick={ handleSkipClick }
+						/>
+					) }
+
+					<AppButton
+						isPrimary
+						disabled={ disabledComplete }
+						onClick={ handleCompleteClick }
+						loading={ completing === ACTION_COMPLETE }
+						{ ...continueButtonProps }
+					/>
+				</StepContentFooter>
+			) }
+		</StepContent>
+	);
+}

js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-features-section.js → js/src/components/paid-ads/ads-campaign/paid-ads-features-section.js

@@ -4,6 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { Flex, FlexItem, FlexBlock } from '@wordpress/components';
 import { Pill } from '@woocommerce/components';
+import { noop } from 'lodash';
 import GridiconCheckmark from 'gridicons/dist/checkmark';
 import GridiconGift from 'gridicons/dist/gift';
 
@@ -13,6 +14,9 @@
 import Section from '.~/wcdl/section';
 import AppDocumentationLink from '.~/components/app-documentation-link';
 import CampaignPreview from '.~/components/paid-ads/campaign-preview';
+import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
+import AppButton from '.~/components/app-button';
+import SkipButton from './skip-button';
 import './paid-ads-features-section.scss';
 
 function FeatureList( { hideBudgetContent } ) {
@@ -57,17 +61,23 @@
  * for the next actions: skip or continue the paid ads setup.
  *
  * @param {Object} props React props.
- * @param {boolean} props.hideBudgetContent Whether to hide the content about the ad budget.
- * @param {boolean} props.hideFooterButtons Whether to hide the buttons at the card footer.
- * @param {JSX.Element} props.skipButton Button to skip paid ads setup.
- * @param {JSX.Element} props.continueButton Button to continue paid ads setup.
+ * @param {boolean} props.hidePaidAdsSetupFooterButtons Whether to hide the buttons at the section footer.
+ * @param {() => void} props.onSkipClick Callback called when the skip button is clicked.
+ * @param {() => void} props.onCreateCampaignClick Callback called when the create campaign button is clicked.
+ * @param {boolean} [props.disableCreateButton=false] Whether to disable the create campaign button.
  */
 export default function PaidAdsFeaturesSection( {
-	hideBudgetContent,
-	hideFooterButtons,
-	skipButton,
-	continueButton,
+	hidePaidAdsSetupFooterButtons,
+	onSkipClick = noop,
+	onCreateCampaignClick = noop,
+	disableCreateButton = false,
 } ) {
+	const { hasGoogleAdsConnection } = useGoogleAdsAccount();
+
+	const hideBudgetContent = ! hasGoogleAdsConnection;
+	const hideFooterButtons =
+		! hasGoogleAdsConnection || hidePaidAdsSetupFooterButtons;
+
 	return (
 		<Section
 			className="gla-paid-ads-features-section"
@@ -131,8 +141,24 @@
 					</Flex>
 				</Section.Card.Body>
 				<Section.Card.Footer hidden={ hideFooterButtons }>
-					{ skipButton }
-					{ continueButton }
+					<SkipButton
+						text={ __(
+							'Skip this step for now',
+							'google-listings-and-ads'
+						) }
+						onClick={ onSkipClick }
+					/>
+
+					<AppButton
+						isPrimary
+						text={ __(
+							'Create campaign',
+							'google-listings-and-ads'
+						) }
+						disabled={ disableCreateButton }
+						onClick={ onCreateCampaignClick }
+						eventName="gla_onboarding_open_paid_ads_setup_button_click"
+					/>
 				</Section.Card.Footer>
 			</Section.Card>
 		</Section>