Campaign Creation: Add confirmation modal when user skips without creating a campaign

[joemcgill]

Part of https://github.com/woocommerce/google-listings-and-ads/issues/2459

Today when merchants decide to skip campaign creation, they finish onboarding and get the following success modal.

And if they click Next, they see the following modal.

We propose that users that click on skip campaign creation get shown an "Are you sure" (AYS) modal with a message saying that campaigns is highly recommended to drive sales and asking "are you sure you want to skip this?" If they click yes, we finish onboarding and we show the same modals as we do today. If they click no, they should stay in campaign creation to finish the task.

Example Modal:

Modal content:

Skip setting up ads?

Enabling Performance Max is highly recommended to drive more sales and reach new audiences across Google channels like Search, YouTube and Discover.

Performance Max uses the best of Google’s AI to show the most impactful ads for your products at the right time and place. Google will use your product data to create ads for this campaign.

Learn more about Performance Max.

[Cancel] [Complete setup without setting up ads]

Acceptance Criteria

• [ ] When the "Skip this step" button is clicked to finish onboarding. The AYS modal is shown.
• [ ] When "Cancel" is selected from the modal, the modal is closed and the user stays on the final step of onboarding where they can set up a campaign.
• [ ] When "Complete setup without setting up ads" is selected from the modal, the onboarding is completed without a campaign and the current behavior is continued.

Implementation Brief

A new AppModal component will need to be added to the js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js step. The createSkipButton() function will need to be updated so that the onClick callback triggers opening the modal rather than finishing the onboarding step.

The new modal will need to have two action buttons, the "No" button that closes the modal and the "Yes" button that closes the modal and calls the finishOnboardingSetup() function. This button will also need to include data-action={ ACTION_SKIP } so the correct event is recorded when the onboarding is completed.

Test Coverage

• In the E2E tests in tests/e2e/specs/setup-mc/step-4-complete-campaign.test.js the Complete onboarding by "Skip this step for now" will need to be updated to account for the AYS modal instead of completing the onboarding. There should be new tests that account for the behavior of both modal buttons.

[joemcgill]

@fblascogarma, @MatthiasReinholz, and @michaeleleder for this issue, I think we can use the AppModal component that is already used throughout the plugin (see the screenshot in the description above).

We'll just need to confirm the title, content and button text we want to use. Here's an initial proposal for consideration:

===

Skip setting up ads?

Enabling Performance Max is highly recommended to drive more sales and reach new audiences across Google Ads channels like Search, YouTube and Discover.

Performance Max uses the best of Google’s AI to show the most impactful ads for your products at the right time and place. Google will use your product data to create ads for this campaign.

Learn more about Performance Max.

[Cancel] [Complete setup]

[fblascogarma]

I like it @joemcgill ! I would take out the "Ads" part. So instead of "across Google Ads channels like Search, YouTube and Discover", it would be: "across all Google channels like Search, YouTube and Discover."

What do you think @MatthiasReinholz and @michaeleleder ?

[fblascogarma]

We reviewed with @MatthiasReinholz and @michaeleleder and looks good to us with that "Ads" removal change. Thanks!

[joemcgill]

Perfect. Thanks for confirming!

[joemcgill]

@ankitguptaindia this is ready for QA.

[ankitguptaindia]

Hello @joemcgill I have tested the PR, and it is functioning as described in the task details. However, I would like to propose a couple of enhancements to improve the user experience, when the merchant completes the onboarding without setting up a campaign.

cc: @asvinb

Current Behavior:

When "Complete setup" is selected from the modal, the onboarding is completed without a campaign, and the current behavior continues.

Suggestion 1: Improve Button Text

Current Button Text: Complete setup

Proposed Button Text: Complete setup without setting up ads

In its current state, the button label Complete setup might not convey the full implications of the action. If a merchant is skimming through the process or accidentally clicks the button, they might complete the onboarding without realizing they haven’t set up any ads. Updating the button text to Complete setup without setting up ads provides a clearer indication of what will happen, reducing the risk of accidental completion.

---

Suggestion 2: Add a Confirmation Checkbox

Proposal: Introduce a checkbox with a confirmation message, such as “I understand that I am completing the setup without setting up ads.” The Complete setup button would only become active once the checkbox is checked.

Button State before confrimation	Button State after confrimation

---

Adding a confirmation checkbox will require the merchant to actively acknowledge that they are completing the setup without setting up ads. This approach is similar to the "Disconnect all accounts" screen and can help ensure that merchants are fully aware of their actions before proceeding. It also reduces the likelihood of accidental onboarding completion.

Benefits of This Approach:

• The updated button text clearly communicates the consequence of completing the setup without ads.

• The confirmation checkbox forces the merchant to acknowledge their decision, decreasing the chances of accidental completion.

[joemcgill]

Thanks for these suggestions, @ankitguptaindia!

I agree that the button text could be more clear. Let's update it per your suggestion. Personally, I think the additional check-box is probably unnecessary. The whole AYS modal acts as a confirmation that someone wants to complete the setup without setting up Ads. By the time they see this modal they have already clicked a "Skip Ads" button and are given the choice to either "Cancel" (go back to set up Ads) or "Complete setup without setting up ads". A third confirmation seems pretty heavy handed.

[joemcgill]

@eason9487 this one is ready for your review.

[eclarke1]

Engineering complete and approved, moving to UAT for @fblascogarma final approval

[eclarke1]

Just tagging @joemcgill and @kt-12 to advise this needs to be merged please