Add introduction banner card into multichannel marketing page

[ecgan]

All Submissions:

• Have you followed the WooCommerce Contributing guideline?
• Does your code follow the WordPress' coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

Closes #34904. Previous draft PR is PR #36220.

In this PR, we add the introduction banner card at the top of the multichannel marketing page.

There are two "types" of introduction banner card: one with the "Create a campaign" and "Add channels" buttons, and one without.

Screenshot of introduction banner card without the "Create a campaign" and "Add channels" buttons:

Screenshot of introduction banner card with the "Create a campaign" and "Add channels" buttons:

Users can dismiss the card by clicking at the top right "X" button. We store the dismissed state by using a WP Option woocommerce_marketing_overview_multichannel_banner_dismissed. This approach is similar to the existing woocommerce_marketing_overview_welcome_hidden WP Option for the WelcomeCard in the existing Marketing page.

The "Creata a campaign" button is displayed when there is at least one registered channel. Clicking it will display the "Create a campaign" modal.

The "Add channels" button is displayed when there is at least one registered channel and one recommended channel. When users click on the "Add channels" button, the page will scroll down to the "Add channels" button in the Channels card, allowing users to install a new channel.

How to test the changes in this Pull Request:

• Have you followed the Writing high-quality testing instructions guide?

Pre-conditions:

• Enable WooCommerce Multichannel Marketing experience in WooCommerce Settings > Advanced > Features page: /wp-admin/admin.php?page=wc-settings&tab=advanced&section=features
• If you have dismissed the banner card, you can make it show up again by deleting the WP Option woocommerce_marketing_overview_multichannel_banner_dismissed in the database.

1. Go to WooCommerce Marketing page: /wp-admin/admin.php?page=wc-admin&path=%2Fmarketing.
2. You should see the introduction banner card at the top of the page.
3. Proceed to setup a channel, and then come back to this marketing page.
4. Click on the "Create campaign" button. You should see the "Create a campaign" modal.
5. Click on the "Add channels" button. The page should scroll down to the "Add channels" button in the Channels card.
6. Dismiss the card, and reload the page. The card should not be displayed.

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable?
• Have you created a changelog file for each project being changed, ie pnpm --filter=<project> changelog add?
• Have you included testing instructions?

FOR PR REVIEWER ONLY:

• I have reviewed that everything is sanitized/escaped appropriately for any SQL or XSS injection possibilities. I made sure Linting is not ignored or disabled.

[ecgan]

@puntope , this PR is build on top of PR #37044, could you also help to review this PR please? 🙏

[codecov]

Codecov Report

Merging #37110 (a2b02fc) into trunk (b13e56e) will decrease coverage by 0.0%.
The diff coverage is 8.7%.

Additional details and impacted files

@@            Coverage Diff             @@
##             trunk   #37110     +/-   ##
==========================================
- Coverage     45.8%    45.8%   -0.0%     
  Complexity   17196    17196             
==========================================
  Files          429      429             
  Lines        64900    64909      +9     
==========================================
- Hits         29703    29701      -2     
- Misses       35197    35208     +11     

Impacted Files	Coverage Δ
...ocommerce/includes/admin/class-wc-admin-assets.php	0.0% <0.0%> (ø)
...ugins/woocommerce/includes/class-wc-post-types.php	2.6% <0.0%> (-0.1%)	⬇️
plugins/woocommerce/includes/class-wc-install.php	69.0% <66.7%> (ø)

... and 1 file with indirect coverage changes

[github-actions]

Test Results Summary

Commit SHA: a2b02fc

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	0m 48s
E2E Tests	191	0	0	10	0	201	14m 23s

---

To view the full API test report, click here.
To view the full E2E test report, click here.
To view all test reports, visit the WooCommerce Test Reports Dashboard.

[ecgan]

@eason9487 , thanks so much for the review! I have addressed the code review comments. This is now ready for another round of review. 🙂 🙏

[eason9487]

Thanks for the update. The test results are correct and as expected.

However, I would still suggest addressing the almost duplicate images that can be eliminated in this PR. because it doesn't need much time to fix. Otherwise, it might take more effort to merge a known problem, open a follow-up, and then re-arrange improvement later. But it should be fine to proceed with the current implementation if there is not much time left for this project.

The remaining comments are minor suggestions and won't block this PR.

[ecgan]

@eason9487 , thanks, I took your suggestions and made the changes, and your review approval has been dismissed. Could you do a review and approve again please? 🙏

[eason9487]

Thanks for the all work. Testing well, and LGTM.