add: store location settings tour

[rjchow]

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:

Part 2 of #32587, to add spotlight to the store location settings.

The spotlight should only show up when visited from the task list, and it should only show up once

Closes #32587 .

How to test the changes in this Pull Request:

1. Start with a fresh install of WooCommerce, optionally complete OBW or not (not a condition to have completed it)
2. Go to the task list and click on "You added store details" or "Add store details" in the tasklist (it might be struck through)
3. You should be redirected to the WooCommerce settings page, on the general tab and have a spotlight on the store location fields.
4. Subsequent visits should not show the spotlight

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 successfully run tests with your changes locally?
• Have you created a changelog file for each project being changed, ie pnpm changelog add --filter=<project>?

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.

[github-actions]

Test Results Summary

Commit SHA: 4555221

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	115	0	0	2	0	117	0m 40s
E2E Tests	185	0	0	1	0	186	13m 38s

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.

[ilyasfoo]

So far this is looking good, @rjchow!

As we're growing the use case for spotlight, I'm wondering if we need to consolidate "viewed" state of different spotlights so it can become easier to manage. Either that or perhaps we can have a standard naming convention so we can easily search for all spotlight from an option prefix.

Also, I think we may want to add tracking for this? As our product spotlight, we had a "view", "complete", "dismiss". I'm not sure if we should also monitor if users fill up the store address when they click on complete since this is a single step (user may accidentally dismiss without being able to get the tour back). cc @verofasulo @SamratBiswas1

Though I'd also be happy if the track is to be addressed in a follow up!

[verofasulo]

I'm not sure if we should also monitor if users fill up the store address when they click on complete since this is a single step

Excellent point @ilyasfoo - I think we should as that's the point of the task :) It's not about clicking on the task in the task list but evaluating how effective it is (do users complete the store location details?).

[rjchow]

Yea I agree we need to do something about the spotlight sprawl, so far we have two options being used and I think we probably could consolidate it under one. Maybe as stringified json, along with a useHook - have some ideas around that. But not in this PR 😁

Ah ok I didn't expect to need tracks here but ok sure thing I'll put up an issue for it!

[ilyasfoo]

Thanks for confirming, @verofasulo!

Sounds good, @rjchow! This tested well, great work! LGTM! 🚢

[github-actions]

Hi @rjchow, thanks for merging this pull request. Please take a look at these follow-up tasks you may need to perform:

• Add the release: add testing instructions label

[rjchow]

@verofasulo I just noticed a UX issue with this store location tour while running through the flow, so far the tour only highlights the fields that need to be changed.

My natural instinct was to fill them out and ... forget to scroll to the bottom to click save - instead I clicked on the next step button.

I think the ideal UX would be to autosave for the user on completion of the tour, if they have populated the fields. However I'm not sure its possible, and if it is it's not straightforward. So I think we might need to add a second step to prompt the user to save?

[rjchow]

@ilyasfoo regarding tracks I think we might not need to add anything,

I was looking in the code and found that we have tracks for task completion. So we just need to predicate it on visitation of the settings page via the task list

Looking in the tracks log from the WooCommerce status page:

2022-08-08T12:00:13+00:00 DEBUG wcadmin_settings_change
2022-08-08T12:00:13+00:00 DEBUG   - settings: woocommerce_store_address,woocommerce_store_address_2,woocommerce_store_city,woocommerce_store_postcode,woocommerce_all_except_countries,woocommerce_specific_allowed_countries,woocommerce_specific_ship_to_countries
2022-08-08T12:00:13+00:00 DEBUG   - tab: general
2022-08-08T12:00:13+00:00 DEBUG   - section: 
2022-08-08T12:00:14+00:00 DEBUG wcadmin_settings_view
2022-08-08T12:00:14+00:00 DEBUG   - tab: general
2022-08-08T12:00:14+00:00 DEBUG   - section: 
2022-08-08T12:00:14+00:00 DEBUG 
2022-08-08T12:00:14+00:00 DEBUG   - _via_ua: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:103.0) Gecko/20100101 Firefox/103.0
2022-08-08T12:00:14+00:00 DEBUG   - _via_ip: 192.168.16.1
2022-08-08T12:00:14+00:00 DEBUG   - _lg: en-US,en;q=0.5
2022-08-08T12:00:14+00:00 DEBUG   - _dr: http://localhost:8888/wp-admin/admin.php?page=wc-settings&tab=general&tutorial=true
2022-08-08T12:00:14+00:00 DEBUG   - _dl: http://localhost:8888/wp-admin/admin.php?page=wc-settings&tab=general&tutorial=true
2022-08-08T12:00:14+00:00 DEBUG   - url: http://localhost:8888
2022-08-08T12:00:14+00:00 DEBUG   - blog_lang: en_US
2022-08-08T12:00:14+00:00 DEBUG   - blog_id: 
2022-08-08T12:00:14+00:00 DEBUG   - products_count: 0
2022-08-08T12:00:14+00:00 DEBUG   - wc_version: 6.9.0
2022-08-08T12:00:16+00:00 DEBUG wcadmin_tasklist_task_completed
2022-08-08T12:00:16+00:00 DEBUG   - task_name: store_details

And in the tracks log on the browser side:

wc-admin:tracks recordevent wcadmin_page_view 
Object { path: "/wp-admin/admin.php?page=wc-settings&tab=general&tutorial=true", is_embedded: true, has_navigation: true }
 +0ms 
Object { _tqk: {…}, shouldRecord: false }
index.js:313:13

Do you think that's ok? I couldn't find a server side codepath that catches the user clicking on the tasklist item

[verofasulo]

My natural instinct was to fill them out and ... forget to scroll to the bottom to click save - instead I clicked on the next step button.

@rjchow could you please clarify what the next step button is?

Generally speaking, this is a well-known UX issue 😅 The user needs to navigate down till the end of the page to save changes and this is not ideal. @jarekmorawski has been working on a new header component that can hopefully be applied to the Settings section as well and should help solve this issue 😊

Right now, I would say not to overcomplicate the experience by adding a new step and just leave it as it till the new component is ready to be implemented.

[rjchow]

My natural instinct was to fill them out and ... forget to scroll to the bottom to click save - instead I clicked on the next step button.

@rjchow could you please clarify what the next step button is?

Generally speaking, this is a well-known UX issue 😅 The user needs to navigate down till the end of the page to save changes and this is not ideal. @jarekmorawski has been working on a new header component that can hopefully be applied to the Settings section as well and should help solve this issue 😊

Right now, I would say not to overcomplicate the experience by adding a new step and just leave it as it till the new component is ready to be implemented.

@verofasulo sorry I meant the "Done!" button on the tour message frame

[verofasulo]

sorry I meant the "Done!" button on the tour message frame

Do you mean the "Got it" button, right?

[rjchow]

Sorry yes 😅 I misremembered the exact wording but that’s what it is

[ilyasfoo]

Do you think that's ok? I couldn't find a server side codepath that catches the user clicking on the tasklist item

@rjchow I think it's not as accurate. For example, the wcadmin_page_view track does not properly exclude users on subsequent visits which may be significant. wcadmin_settings_change could work for assuming completion though.