[CYS - Core] Handling errors during the setup for the NoAI flow

[gigitux]

Submission Review Guidelines:

• I have followed the WooCommerce Contributing Guidelines and the WordPress Coding Standards.
• I have checked to ensure there aren't other open Pull Requests for the same update/change.
• I have reviewed my code for security best practices.
• Following the above guidelines will result in quick merges and clear and detailed feedback when appropriate.

Changes proposed in this Pull Request:

This PR implements the handling of errors during the setup. If an error is raised, the merchant will be redirected to the intro page with a message on top:

Cattura.schermo.Jan.19.alle.10-14.mp4

Closes #43780.

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

1. Create a new WooCommerce installation with this version.
2. Ensure the WooCommerce Beta Tester plugin is installed and activated (available on this monorepo).
3. Head over to /wp-admin/tools.php?page=woocommerce-admin-test-helper and enable customize-store feature flag.
4. After the try {, add this line of code: throw new Error( 'Product creation failed' ); (source code)
   
5. Visit the wp-admin/admin.php?page=wc-admin&path=/customize-store
6. Follow the process.
7. Ensure that you are redirected to the intro page with an error message on top.
8. Click on Please try again and ensure that the process starts again.
9. Click on the right X to close the message error. Ensure that it works.

Changelog entry

• Automatically create a changelog entry from the details below.

Significance

• Patch
• Minor
• Major

Type

• Fix - Fixes an existing bug
• Add - Adds functionality
• Update - Update existing functionality
• Dev - Development related task
• Tweak - A minor adjustment to the codebase
• Performance - Address performance issues
• Enhancement - Improvement to existing functionality

Message

[CYS - Core] Handling errors during the setup for the NoAI flow

Comment

[gigitux]

cc @verofasulo for the design

[github-actions]

Hi @nefeline, @verofasulo,

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

[github-actions]

Test Results Summary

Commit SHA: 1554958

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	0m 37s
E2E Tests	287	0	0	9	0	296	6m 42s

---

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.

[verofasulo]

Thanks @gigitux! 🙏

Could we please make the error message background lighter as per design?

I can see that also the close button doesn't reflect the designs— it seems a very light shade of gray.

Here's the page in Figma.

[albarin]

Pre-approving pending style changes. Another comment apart from what Veronica said, the width of the error notice should be the same as the width of the intro banner.

[gigitux]

Thanks @gigitux! 🙏

Could we please make the error message background lighter as per design?

I can see that also the close button doesn't reflect the designs— it seems a very light shade of gray.

Here's the page in Figma.

Hey Veronica, you're right! Sorry for the confusion! Now, it should be okay!

Cattura.schermo.Jan.19.alle.12-34-38.mp4

[verofasulo]

Thanks, @gigitux! 🙌

Could you also align the spacing with the design, please? 🙏

The spacing between the error message and the Design your own theme section is 24px. Here's the Figma file for reference. Thank you!

[gigitux]

Thanks for the feedback, @verofasulo! With 1554958, I fixed the CSS. What do you think?

[verofasulo]

It looks great! Thanks, @gigitux 🙏