Onboarding: Move FAQs below the CTA button

[joemcgill]

Part of #2458

In order to streamline the actions a user needs to take during onboarding, we will move the FAQ section at the bottom of the first step of the onboarding flow to the bottom of the page, below the CTA button, so the CTA button is easier to locate.

Acceptance Criteria

• The FAQs are moved to the bottom of the screen below the CTA button in all places where it is used (see implementation brief section).
• The bottom margin between the button and FAQ section uses the standard var(--large-gap); value.

Implementation Brief

There are multiple places where FAQs exist inside of a StepContent component. For consistency, we will update all of them:

• https://github.com/woocommerce/google-listings-and-ads/blob/2.8.1/js/src/components/paid-ads/ads-campaign.js#L100-L101
• https://github.com/woocommerce/google-listings-and-ads/blob/2.8.1/js/src/components/paid-ads/asset-group/asset-group.js#L117-L118
• https://github.com/woocommerce/google-listings-and-ads/blob/2.8.1/js/src/setup-mc/setup-stepper/setup-accounts/index.js#L169-L171
• https://github.com/woocommerce/google-listings-and-ads/blob/2.8.1/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js#L196-L197

For each of these, either move the Faqs into the StepContentFooter component below the CTA button(s) and update the styling, or rename the StepContentFooter component to StepContentActions throughout the application and move the FAQs below, where applicable.

Test Coverage

1. E2E tests may need to be updated if selectors used in tests are no longer accurate.

[eason9487]

1. Do we care that the StepContentFooter component is not at the bottom of the StepContent or does the FAQ need be made a part of the StepContentFooter?

It does seem a little off in the literal meaning so it would be a bit more appropriate to rename the StepContentFooter component.

Regarding the Implementation Brief, just in case it's missing, I'd like to add that there's also a FAQ for the last step and Ads Onboarding. (See #2382)

[mikkamp]

I'd like to add that there's also a FAQ for the last step and Ads Onboarding

If we are going to align this in all locations then there are also 2 FAQ sections when going through the Ads onboarding (step 1 + 2). To get their you can skip campaign creation during initial onboarding, and then later going to create the first campaign from the dashboard. I think it would provide better consistency if we'd change it for all occurrences.

[joemcgill]

Thanks @eason9487 and @mikkamp. I had also noticed that we were planning on moving the FAQs below the CTA buttons for #2459. Expanding the scope of this issue to handle all of these consistently makes a lot of sense to me rather than having individual issues for each place in the UI where we want to make this change.

Here are the places I've identified, let me know if I've missed any:

• https://github.com/woocommerce/google-listings-and-ads/blob/2.8.1/js/src/components/paid-ads/ads-campaign.js#L100-L101
• https://github.com/woocommerce/google-listings-and-ads/blob/2.8.1/js/src/components/paid-ads/asset-group/asset-group.js#L117-L118
• https://github.com/woocommerce/google-listings-and-ads/blob/2.8.1/js/src/setup-mc/setup-stepper/setup-accounts/index.js#L169-L171
• https://github.com/woocommerce/google-listings-and-ads/blob/2.8.1/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js#L196-L197

There are 8 places in the codebase where the StepContentFooter component is being used, and always to include one or more AppButton components at the end of a StepContent component. I'd suggest that we move these FAQs into the relevant StepContentFooter component and make sure the styles are updated accordingly. We will probably want to wrap the AppButtons in some sort of container but I'm sure we can sort that during implementation unless you have any immediate suggestions.

[eason9487]

I'd suggest that we move these FAQs into the relevant StepContentFooter component and make sure the styles are updated accordingly. We will probably want to wrap the AppButtons in some sort of container but I'm sure we can sort that during implementation unless you have any immediate suggestions.

I don't think it necessarily needs a container component with a footer suffix, so renaming it would have better flexibility, but this option works for me as well.

[joemcgill]

I don't think it necessarily needs a container component with a footer suffix

Probably true. We could rename this component to something like StepContentActions but I was hoping to avoid refactoring all places where this component is used and just make the component more flexible so that it can contain more than just the CTA buttons for a form. Let's try to avoid the need to rename everything, but use this as a fallback if moving the FAQs into the StepContentFooter ends up being problematic.