CYS - Ensure the offline modal is displayed whenever AI is unavailable

[albarin]

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:

The goal of this PR is to show the AI offline modal always when the AI is unavailable, independently from the onboarding tour.
For that, a new AiOfflineModal component is created and extracted from the OnboardingTour component.

Closes #42905

How to test the changes in this Pull Request:

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

Case 1: after first creation

1. Make sure you have WooCommerce Beta Tester installed.
2. Enable customize-store feature flag in Tools -> WCA Test Helper -> Features.
3. Go to WooCommerce -> Home and click on Customize your store task.
4. Open your browser's inspector and use Chrome's content override feature to change the content of https://status.openai.com/api/v2/status.json call. Change status.indicator to major.
5. Refresh the page, go through the process.
6. Check you see the AI offline modal.
7. Skip the modal, refresh the page, and make sure you see again the modal but without the buttons and mentions of the tour.

8. This is the expected result depending on the onboarding tour and AI status.

Show onboarding	AI	Result
yes	online	Show onboarding tour on the left
yes	offline	Show AI offline modal with buttons
no	online	No modal or onboarding
no	offline	Show AI offline modal without buttons

Case 2: when customizing an existing store

1. After testing case 1, click Done to confirm the store design.
2. Go to WooCommerce -> Home and click on Customize your store task again.
3. Click on the Customize button.
4. Make sure the AI offline modal doesn't show anymore.

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

Ensure the offline modal is displayed whenever AI is unavailable and not just on the initial store setup.

Comment

[github-actions]

Test Results Summary

Commit SHA: f1d361e

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	0m 38s
E2E Tests	258	0	0	3	0	261	15m 17s

---

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.

[github-actions]

Hi @chihsuan, @gigitux, @nefeline,

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

[gigitux]

Nice work! LGTM!

[chihsuan]

Looks good! 👍

However, I noticed that when I click on Customize button in intro screen, and AI is offline, I see the offline modal as well. Is it expected?

Screen.Recording.2023-12-20.at.17.17.21.mov

[nefeline]

Excellent work! Confirmed that the correct modals are displayed depending on whether AI is down and if the store owner already finished the onboarding flow.

[nefeline]

However, I noticed that when I click on Customize button in intro screen, and AI is offline, I see the offline modal as well. Is it expected?

I could also reproduce this; we should skip displaying the modal when customizing the store.

[albarin]

Looks good! 👍

However, I noticed that when I click on Customize button in intro screen, and AI is offline, I see the offline modal as well. Is it expected?
Screen.Recording.2023-12-20.at.17.17.21.mov

Good catch @chihsuan! I don't think that should be the case, do you know how can I control that case?
Looking at the code I see there is a customizeStoreTaskCompleted that is true on the "customize your store" first screen, but as soon as I click the Customize button, it's updated to true. So, in the assembler page I'm not sure how to check if the user is customizing an generated theme or not.
Thanks!

[chihsuan]

Good catch @chihsuan! I don't think that should be the case, do you know how can I control that case? Looking at the code I see there is a customizeStoreTaskCompleted that is true on the "customize your store" first screen, but as soon as I click the Customize button, it's updated to true. So, in the assembler page I'm not sure how to check if the user is customizing an generated theme or not. Thanks!

Hey @albarin I think we can probably append a query parameter to customize the button URL to know if the user is customizing. What do you think?

[nefeline]

Nice work! Re-ran the tests and confirmed that:

✅ Offline modal is displayed if AI is down
✅ Modal is not displayed if AI is up and running
✅ On initial store setup, when AI is down the modal also includes the initial tour.
✅ When clicking on the "Customize" button on the intro screen, and AI is offline, the offline modal is not displayed.