Campaign Creation: Add coupon banner to the top of the page

[joemcgill]

Part of #2459

In order to bring more prominence to the $500 ads credit that is available for new accounts, we'll make the offer more prominent on the campaign creation step of the onboarding flow.

Acceptance Criteria

• When an Ads account is eligible for a free Ads credit, the FreeAdCredit component will be displayed at the bottom of the PaidAdsFeatureSection Card in the Campaign Creation step of the onboarding flow.
• When an Ads account is not eligible, the component will not be shown.
• The existing text in that card that shows the $500 credit is removed.

Implementation Brief

A component for this banner is already part of the SetupAccounts step for the ads setup stepper (js/src/setup-ads/ads-stepper/setup-accounts/index.js). This component can be moved to the top-level js/src/components directory and used in both the current SetupAccounts component and imported into the SetupPaidAds component in js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js. This should use the same useFreeAdCredit() hook to determine whether it is displayed.

Test Coverage

1. E2E tests in tests/e2e/specs/setup-mc/step-4-complete-campaign.test.js should be updated to add a test that confirms the banner is shown
2. Ensure E2E tests for the ads stepper are updated if needed.

[joemcgill]

@fblascogarma:

#2459 includes a prototype that shows the banner across the entire top of the page. For consistency, can we show this within the StepContent component above the PaidAdsFeaturesSection component?

Would you be ok with us taking this approach rather than needing to create updated designs for this issue?

[fblascogarma]

@joemcgill which one is the StepContent and PaidAdsFeaturesSection? Is the StepContent the progression tracker that shows the steps of the onboarding flow? And is the PaidAdsFeaturesSection the card with title "Drive more sales blablalba..."?

[joemcgill]

@fblascogarma the StepContent component is what shows the content for a specific step and the PaidAdsFeatureSection is the top section of that page this is shown currently with the information about the PMax campaign in the left column and the "Drive more sales" card in the right column. Here's a quick example of what I'm proposing so it's easier to visualize.

[fblascogarma]

Thank you for visualizing your proposal, @joemcgill ! I'm okay with it. But should Michael the designer validate it just in case?

[joemcgill]

@michaeleleder is going to look into this and provide some UX feedback based on the usage of this component in the Woo design system.

[michaeleleder]

@joemcgill Seems like nowhere it explicitly says the Inline Notice component has to be on certain background so if making any changes means significant effort, technically it doesn't break any rule and doesn't seem to cause any accessibility issues.

That said, it is clear that this component is always used on a white background in both the design systems and WordPress Developer Resources (except for the white one, which is used on a grey background), so if we want to keep it consistent, we should place it on a white background.

Most logical adjustment would be adding the component to the white card, also because the card already mentiones the $500 credit making this duplicite. That said, I'm not aware or all the potential implications, for example how does it affect the layout when the component isn't shown (when an Ads account is not eligible).

[joemcgill]

Thanks @michaeleleder this makes sense to me. Here's a quick example of what I think that would look like.

[joemcgill]

For posterity, the previous design mockup above was approved via a Slack conversation.

[joemcgill]

@ankitguptaindia this is ready for QA. Note that the original requirements are a bit vague, as they read "When an Ads account is eligible for a free Ads credit..." However, what the requirements are for eligibility was not clearly defined. Currently, the $500 credit text is always shown when you get to the fourth step of onboarding based on a Google Ads account being connected. We're using the same logic to display this banner instead, which is the expected behavior that should be tested.

[joemcgill]

@asvinb some additional feedback to address here when you have a chance.