Consolidate the ad creation step in the Ads Setup flow with the one used in Onboarding

[joemcgill]

Part of #2460

When a merchant is setting up a new ads campaign from the plugin dashboard, they enter the "Set up paid campaign" flow, which includes individual steps for connecting a Google Ads account, configuring a campaign, and completing their billing setup.

Currently, the second step is where a merchant configures their campaign, including setting their targeted audience(s) and their daily budget.

We have a similar form on the last step of onboarding which is being simplified as part of #2458.

Maintaining two different components for this same action is redundant so we will consolidate on a single component that is used in both flows. However, the form displayed in the "Set up paid campaign" flow is also used when editing current campaigns, so the ability to set your audience will need to be optionally shown if we're editing a campaign.

Acceptance Criteria

• When a user is on the "Create your paid campaign" step of the "Set up paid ads" flow, they will see the same form used on the "Create a campaign" step of the "Get started..." onboarding flow.
• The merchant can set their daily budget for their campaign
• If a merchant hasn't set up billing for their Ads account, they will not be able to complete the form and the button will be disabled.
• If a merchant hasn't set up billing, show the billing setup component
• A user should be able to successfully set up billing from this form
• Once billing is set up, the completion button should be enabled and the clicking should successfully create a campaign
• When editing a campaign, the user should no longer see target audience fields, following Campaign Creation: Remove Ads Audience field #2501.
• When editing a campaign, the user should be able to modify the target audiences (no longer applicable)

Implementation Brief

The PR should get merged into the feature/2460-simplify-paid-ads-setup branch.

There is a generic component for setting up an ads campaign in js/src/components/paid-ads/ads-campaign.js, which returns a StepContent component. This component is used for both the CreatePaidAdsCampaign and EditPaidAdsCampaign pages. This component should be refactored to include the sections from the SetupPaidAds component in js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js which is used in the onboarding flow, and that component should now consume the generic AdsCampaign component.

The generic component should include the ability to pass a title and description to the StepContentHeader as props. It should render the PaidAdsFeaturesSection and PaidAdsSetupSections components from js/src/setup-mc/setup-stepper/setup-paid-ads/, both of which should be moved to the js/src/components/paid-ads/ads-campaign/ folder. The generic component should support configuring two CTA buttons: a primary button that is required, and a secondary button which is optional (for the "Skip this step for now" CTA).

We removed the Audience field from the onboarding flow in #2551, but it will need to be retained as a field that is only shown in the consolidated flow if we're editing a campaign. This will likely require a new boolean isEditing prop for the AdsCampaign component that can used to determine whether this field (and potentially others in the future) are shown.

Test Coverage

• E2E tests for tests/e2e/specs/setup-mc/step-4-complete-campaign.test.js should still pass without needing any functional changes.
• E2E tests for tests/e2e/specs/add-paid-campaigns/add-paid-campaigns.test.js should be updated to account for the changes in this issue.

Definition Questions

• We've removed the Ads audience field from the onboarding form in #2501. Do we need to add it back as an optionally displayed field so it can be shown in the secondary flow?
• The generic AdsCampaign component used in the paid ads-stepper is also used in pages for creating a campaign and editing a campaign. How are those two pages tested?

[eason9487]

• We've removed the Ads audience field from the onboarding form in #2501. Do we need to add it back as an optionally displayed field so it can be shown in the secondary flow?

This will depend on the changes to the shared components.

The changes planned for shared components are mentioned in the Implementation Brief, but given that the AdsCampaign component is also used by the CreatePaidAdsCampaign and EditPaidAdsCampaign components, it may not be better to move the sections from SetupPaidAds to AdsCampaign.

• The generic AdsCampaign component used in the paid ads-stepper is also used in pages for creating a campaign and editing a campaign. How are those two pages tested?

Currently, it relies heavily on manual testing.

[joemcgill]

Let's hold on this until I'm able to verify the intent of all these screens with @fblascogarma.

[joemcgill]

After confirming with @fblascogarma. We're going to optionally show the Ads audience field when a campaign is being edited but not during creation. I've updated the A/C and implementation details to reflect this.

[joemcgill]

Following up here with an update to the AC of this ticket after @asvinb and I realized that it's not currently possible to edit the target audience of a campaign after it's created. After confirming with @fblascogarma, the requirements for this ticket has been updated to reflect that after these two screens are consolidated, selecting a target audience during campaign creation will no longer be shown, and instead they will target the same countries that are configured in Merchant Center. In addition, when editing a campaign, the user will no longer be shown the non-editable audience field, following #2501.

[asvinb]

@joemcgill Can you take a look at the WIP please and let me know your thoughts? Removing the audience field has been tackled in #2551 and ideally we should merge that branch into this one. What do you think?

[joemcgill]

After discussing with @asvinb we're going to put this on hold until the updates to the onboarding form from #2459 are complete.

[joemcgill]

@ankitguptaindia this has gone through numerous changes, so can you give it another QA pass please? Also, to repeat a note I left on the PR:

When this PR is tested with billing not approved, you'll see the billing setup card on this form as well as a duplicate billing step when creating your first campaigns from the dashboard, until #2536 is completed. That is expected, but will be resolved once the PR for that issue is merged.