Add Business Location page to the core profiler #38019

moon0326 · 2023-04-27T00:48:25Z

Changes proposed in this Pull Request:

Closes https://github.com/woocommerce/team-ghidorah/issues/198 and [Loading] - Create a loader component#199

This PR adds Business Location page. I've also worked on [Loading] - Create a loader component#199 in this PR since the loader needs a page for testing anyway.

How to test the changes in this Pull Request:

Checkout this branch.
Go to the core profiler (OBW)
Click on Skip guided tour
Confirm storeprofiler_step_view track is recorded.
Select a country.
Click on Go to my store button.
Confirm storeprofiler_step_completed track is recorded.
Loader screen should show up for 3 seconds
Then you're redirected to WooCommerce Home

Note on the loader page:

The loader configuration used in this PR is very simple as we only wait for 3 seconds and redirect to Woo Home. For multi-stage loader configuration, see 139889d. You can also checkout demo/core-profiler-loader branch and perform the exact test instructions to see the demo.

github-actions · 2023-04-27T01:18:18Z

Test Results Summary

Commit SHA: e40f5fa

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	267	0	0	2	0	269	0m 54s
E2E Tests	189	0	0	10	0	199	18m 51s

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 · 2023-04-27T20:20:49Z

Hi @rjchow,

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 · 2023-04-27T20:20:49Z

Hi @chihsuan, @rjchow,

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

rjchow

Thanks for working on this, it's looking good! Left some feedback.

I think it needs a rebase/update from trunk, there was the PR I merged that allows toggling of the xstate inspector from browser devtools that's not in this branch

plugins/woocommerce-admin/client/core-profiler/index.tsx

rjchow · 2023-05-03T05:55:22Z

plugins/woocommerce-admin/client/core-profiler/index.tsx

+					target: 'postSkipFlowBusinessLocation',
 					actions: [
 						assign( {
 							businessInfo: (


I think we still need to persist it to options 😆

Looks like settingUpStore is an empty state. Could we make it into a function so we can invoke it instead? or is there a way to target settingUpStore and then move to a different state dynamically?

settingUpStore is the placeholder state for the regular non-skip flow actually, I should have written a comment about that sorry!

I think we can just add it as an exit action on 'skipFlowBusinessLocation' perhaps?
Something like 'updateTrackingOption()' without the extra explat stuff

exit action sounds good 👍 I'll test it out soon

@rjchow

Updated in c6cc926

I used a new state to invoke the UpdateBusinessLocation function instead of using an action with exit. It seems that actions must be pure functions without side effects according to statelyai/xstate#268

Looks good! Checked and it works correctly for me

plugins/woocommerce-admin/client/core-profiler/use-loader-stages.tsx

plugins/woocommerce-admin/client/core-profiler/services/country.ts

- take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call)

chihsuan

Thanks for working on this! @moon0326

I found there are some design mismatches and also left some suggestions to fix the lining things.

plugins/woocommerce-admin/client/core-profiler/style.scss

plugins/woocommerce-admin/client/core-profiler/pages/BusinessLocation.tsx

plugins/woocommerce-admin/client/core-profiler/services/country.ts

plugins/woocommerce-admin/client/core-profiler/style.scss

plugins/woocommerce-admin/client/core-profiler/pages/Loader.tsx

plugins/woocommerce-admin/client/core-profiler/index.tsx

plugins/woocommerce-admin/client/core-profiler/pages/Loader.tsx

plugins/woocommerce-admin/client/core-profiler/services/country.ts

…y.ts Co-authored-by: Chi-Hsuan Huang <[email protected]>

Co-authored-by: Chi-Hsuan Huang <[email protected]>

plugins/woocommerce-admin/client/core-profiler/style.scss

chihsuan · 2023-05-10T03:24:18Z

plugins/woocommerce-admin/client/core-profiler/style.scss

+				padding: 12px;
+				label,
+				input {
+					font-size: 13px;


It seems that the default component color is #646970. I think we need to set it to Gutenberg gray 700.

/* Gutenberg/Gray 700 */ color: #757575;

chihsuan · 2023-05-10T03:35:26Z

plugins/woocommerce-admin/client/core-profiler/style.scss

+			@include breakpoint( '<782px' ) {
+				margin-top: 52px;
+				margin-bottom: 40px;
+				h1,


I think we need to set h1 font-size to 32px for mobile devices.

And set h2's margin to 0.

chihsuan · 2023-05-10T03:44:50Z

plugins/woocommerce-admin/client/core-profiler/pages/BusinessLocation.tsx

+						'woocommerce'
+					) }
+				/>
+				<SelectControl


The last thing! I found that there is a dropdown design. I think we should use the same style here though it's in "Tell us a bit about your store" section.

Y5pUYSJPsGEud1vknUZhi8-fi-739_60446

Updated heading and dropdown style changes in de8f406

Thanks @moon0326, it seems that we need to make it look like the below when a country is selected. However, I'm not sure if it's easy to do that. If you want, we can do it in a follow-up PR.

Yeah, let's do it in a follow up PR 👍

chihsuan · 2023-05-10T03:46:18Z

Ah, also, linting is failing.

moon0326 · 2023-05-11T22:03:04Z

Ah, also, linting is failing.

Thanks for the catch. Updated in 0a8f139

It seems like I need to check my local prettier config. I keep making the same lint error 🤔

chihsuan · 2023-05-12T03:25:41Z

@moon0326 Thanks for addressing the feedback! 💜 The lining is still failing (scss 😂 ). There is also some feedback related to the loader screen. 🙏

chihsuan

Thank you for addressing all feedback. Looks good to me! 🚀

chihsuan · 2023-05-14T20:56:43Z

Merge this on behalf of @moon0326 to unblock the other tasks.

moon0326 marked this pull request as draft April 27, 2023 00:48

github-actions bot added focus: react admin [team:Ghidorah] package: @woocommerce/explat issues related to @woocommerce/explat plugin: woocommerce Issues related to the WooCommerce Core plugin. labels Apr 27, 2023

moon0326 changed the base branch from trunk to add/core-profiler-welcome-woo April 27, 2023 19:03

moon0326 force-pushed the add/core-profiler-business-location branch from b5edbe8 to 06708fc Compare April 27, 2023 19:16

github-actions bot removed package: @woocommerce/explat issues related to @woocommerce/explat plugin: woocommerce Issues related to the WooCommerce Core plugin. labels Apr 27, 2023

moon0326 changed the title ~~Add/core profiler business location~~ Add Business Location page to the core profiler Apr 27, 2023

moon0326 requested review from chihsuan and rjchow April 27, 2023 20:20

moon0326 marked this pull request as ready for review April 27, 2023 20:20

moon0326 marked this pull request as draft April 27, 2023 20:37

moon0326 marked this pull request as ready for review April 29, 2023 20:24

rjchow suggested changes May 3, 2023

View reviewed changes

chihsuan force-pushed the add/core-profiler-welcome-woo branch from 900abd1 to 547c318 Compare May 3, 2023 07:26

Base automatically changed from add/core-profiler-welcome-woo to trunk May 3, 2023 07:54

github-actions bot added package: @woocommerce/explat issues related to @woocommerce/explat plugin: woocommerce Issues related to the WooCommerce Core plugin. labels May 3, 2023

moon0326 force-pushed the add/core-profiler-business-location branch from c52a3a7 to 0d04f11 Compare May 3, 2023 21:08

github-actions bot removed the package: @woocommerce/explat issues related to @woocommerce/explat label May 3, 2023

chihsuan and others added 6 commits May 3, 2023 14:55

Add core profiler - welcome to woo page

6c783f8

Update checkbox styles

799b018

Add tracks

09fda6c

Update default tracking value

09c5821

Update copies

771b4c0

Fix jslint error

dc21d40

rjchow previously approved these changes May 9, 2023

View reviewed changes

chihsuan requested changes May 9, 2023

View reviewed changes

Update plugins/woocommerce-admin/client/core-profiler/services/countr…

4b72034

…y.ts Co-authored-by: Chi-Hsuan Huang <[email protected]>

moon0326 dismissed rjchow’s stale review via 4b72034 May 9, 2023 19:27

Moon and others added 6 commits May 9, 2023 12:27

Update plugins/woocommerce-admin/client/core-profiler/style.scss

0c2c2f2

Co-authored-by: Chi-Hsuan Huang <[email protected]>

Fix eslint error

ec09292

Use decodeEntities directly

d26c0e1

Update comment for artificial 3 seconds wait

f509e7f

Disable Go to my store button when country is empty

869600e

Style for mobile devices

db09691

chihsuan reviewed May 10, 2023

View reviewed changes

plugins/woocommerce-admin/client/core-profiler/style.scss Outdated Show resolved Hide resolved

chihsuan reviewed May 10, 2023

View reviewed changes

moon added 3 commits May 11, 2023 14:55

Style updates for the country dropdown

de8f406

Fix js lint error

0a8f139

Update country dropdown border color

6efafa6

moon added 2 commits May 11, 2023 23:01

Style the loader

fd6e78f

Fix css lint

e40f5fa

This comment was marked as duplicate.

Sign in to view

chihsuan approved these changes May 14, 2023

View reviewed changes

chihsuan merged commit 0bf6859 into trunk May 14, 2023

chihsuan deleted the add/core-profiler-business-location branch May 14, 2023 20:56

github-actions bot added this to the 7.8.0 milestone May 14, 2023

rjchow mentioned this pull request Jun 6, 2023

dev: refactor core profiler pages #38606

Merged

Add Business Location page to the core profiler #38019

Add Business Location page to the core profiler #38019

Uh oh!

Conversation

moon0326 commented Apr 27, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes proposed in this Pull Request:

How to test the changes in this Pull Request:

Uh oh!

github-actions bot commented Apr 27, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test Results Summary

Uh oh!

github-actions bot commented Apr 27, 2023

Uh oh!

github-actions bot commented Apr 27, 2023

Uh oh!

rjchow left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

moon0326 May 3, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

moon0326 May 9, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

chihsuan left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chihsuan commented May 10, 2023

Uh oh!

moon0326 commented May 11, 2023

Uh oh!

chihsuan commented May 12, 2023

Uh oh!

This comment was marked as duplicate.

Uh oh!

chihsuan left a comment

Choose a reason for hiding this comment

Uh oh!

chihsuan commented May 14, 2023

Uh oh!

moon0326 commented Apr 27, 2023 •

edited

Loading

github-actions bot commented Apr 27, 2023 •

edited

Loading

moon0326 May 3, 2023 •

edited

Loading

moon0326 May 9, 2023 •

edited

Loading