Store creation M3: profiler question - optional category selector #8379

jaclync · 2022-12-12T06:54:11Z

Part of #8376

Description

Why

In order for WooCommerce to provide better customizations for the new store after store creation, we want to add a few questions to the store creation flow to understand more about the store profile. The first question is about the store category, which indicates the store's industry. This question is optional and can be skipped by tapping the Continue CTA without selecting an option or by tapping the Skip CTA.

Changes

This PR only includes the UI part, as the API is still WIP (p1670825052838929/1670823717.177509-slack-C01SFMVEYAK). The profiler question is only shown behind a new feature flag storeCreationM3Profiler, and the selected category is shown in the store summary screen.

In order to share code in the 3 profiler questions (design in HyVloP5FipZzyPVenH2euI-fi-3066%3A144169&t=rYz8R7hZHuYF1IFo-0) where two are optional and one is required, I created a generic StoreCreationProfilerQuestionView for just the main content view that can take in any question content along with shared UI that includes 3 labels at the top. Then, there's OptionalStoreCreationProfilerQuestionView that wraps StoreCreationProfilerQuestionView with 2 navigation CTAs - the Continue and Skip CTAs. When it's time to implement the required question #8378, I plan to create another wrapper RequiredStoreCreationProfilerQuestionView with only a Continue CTA with an observable boolean for whether the CTA is enabled.

StoreCreationCategoryQuestionView is the final category question view with a view model StoreCreationCategoryQuestionViewModel that implements the view model protocol for both StoreCreationProfilerQuestionViewModel and OptionalStoreCreationProfilerQuestionViewModel. Any suggestions on this implementation are welcome!

Testing instructions

Feature flag enabled

Log in if needed
Go to the Menu tab, and tap Switch store
On the store picker, tap + Add a store
Tap Create a new store --> the store name form should be shown
Enter a store name and continue --> the category question should be shown with a Skip CTA at the top and a Continue CTA at the bottom
Tap Skip --> the domain selector should be shown
Go back to the previous screen
Select an option and tap Continue --> the domain selector should be shown
Select a domain and continue --> the selected category name should be displayed on the store summary below the URL

Feature flag disabled

In code, return false manually for storeCreationM3Profiler feature flag in DefaultFeatureFlagService
Log in if needed
Go to the Menu tab, and tap Switch store
On the store picker, tap + Add a store
Tap Create a new store --> the store name form should be shown
Enter a store name and continue --> the domain selector should be shown
Select a domain and continue --> there should be no store category below the URL on the store summary

Screenshots

dark	light

Screencast:

simulator.mov

I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

…bout store category.

…nder the new feature flag, then show the selected category name in store summary.

…nd `StoreCreationCategoryQuestionHostingController`.

wpmobilebot · 2022-12-12T07:08:39Z

You can test the changes from this Pull Request by:

Clicking here or scanning the QR code below to access App Center
Then installing the build number pr8379-8a9ce6b on your iPhone

If you need access to App Center, please ask a maintainer to add you.

itsmeichigo

Overall this looks good to me! I spot a few minor differences with the design, though:

The category name on the profiler screen is not capitalized like on the design.
The title "Site Category" is not displayed when the list is scrolled up. I'm not sure if it's possible to handle it, given that the big title is different.

Design	App

On an unrelated note, I realized that I could drag to dismiss on the summary screen, and there was no dialog to confirm before the view was dismissed. This may be troublesome because I don't think there's an entry point to continue payment after dismissing the flow. Please ignore this if there has already been a subtask for this.

itsmeichigo · 2022-12-12T10:11:15Z

...sses/Authentication/Store Creation/Profiler/Category/StoreCreationCategoryQuestionView.swift

+    func configureNavigationBarAppearance() {
+        let appearance = UINavigationBarAppearance()
+        appearance.configureWithTransparentBackground()
+        appearance.backgroundColor = .systemBackground
+
+        navigationItem.standardAppearance = appearance
+        navigationItem.scrollEdgeAppearance = appearance
+        navigationItem.compactAppearance = appearance
+    }


I see that we're using this style a lot so I added an extension for this here. Maybe we should use it instead?

Yup thanks for creating that extension, updated in 87be413

itsmeichigo · 2022-12-12T10:21:42Z

...Authentication/Store Creation/Profiler/Category/StoreCreationCategoryQuestionViewModel.swift

+        .init(name: NSLocalizedString("Health and Beauty",
+                                      comment: "Option in the store creation category question."),
+              value: ""),
+        .init(name: NSLocalizedString("Pets Pet Care",


Is this a typo? 😅

This was in the design and I had the same question, but we're also updating the list and separating it into two sections as the latest design after syncing with the Ghidorah team. There's a subtask to update the design in #8376, where the categories will be updated

* trunk: (43 commits) Compare visitors and views separately when sorting SiteVisitStatsItem Refactor: DRYed the code a bit by referring to a new extracted function. Rename function for reusability combine tap and type to enter text, assert product name Add temporary solution to preselect custom option Hide feature behind the feature flag Fix test Add migration test for Model 78 to 79 Add views attribute to SiteVisitStatsItem in storage Add Core Data Model 79 Compare visitors and views separately when sorting SiteVisitStatsItem Add views to SiteVisitStats 8085 Explicit flag for cancellation source 8085 Combine cancellation reasons in underlyingerror Update comments to fix grammar. Move ApplicationPasswordUseCase to Networking layer. Fix typo. Create `ApplicationPasswordUseCase` protocol. update product on orders mock files add simple physical product ui test ...

jaclync · 2022-12-14T06:28:21Z

The category name on the profiler screen is not capitalized like on the design.

Great catch, updated in 7142d88

The title "Site Category" is not displayed when the list is scrolled up. I'm not sure if it's possible to handle it, given that the big title is different.

As you said, this isn't easily feasible since we aren't using large title as there is another label above the title. I clarified with Ann about this earlier this week, and the design was updated in HyVloP5FipZzyPVenH2euI-fi-3760%3A138977&t=gO7KflHr1ccRB4nZ-0

On an unrelated note, I realized that I could drag to dismiss on the summary screen, and there was no dialog to confirm before the view was dismissed. This may be troublesome because I don't think there's an entry point to continue payment after dismissing the flow. Please ignore this if there has already been a subtask for this.

That's a good observation & suggestion, I disabled the interactive dismissal in 8a9ce6b. The user can still go back to the initial screen and dismiss the screen where a confirmation alert is shown. We could also re-enable interactive dismissal and show a confirmation alert later.

Thanks for your feedback, I'll merge this when CI passes to make development easier for other profiler questions.

jaclync added 5 commits December 12, 2022 13:48

Add a feature flag for store creation M3 profiler questions.

3af3d19

Add generic profiler question views for the first profiler question a…

a9d722f

…bout store category.

Update store creation navigation to show category profiler question u…

f6bd19d

…nder the new feature flag, then show the selected category name in store summary.

Pass the view model directly to StoreCreationCategoryQuestionView a…

e695bf8

…nd `StoreCreationCategoryQuestionHostingController`.

Add test cases for StoreCreationCategoryQuestionViewModel.

a3574d5

jaclync added type: enhancement A request for an enhancement. status: feature-flagged Behind a feature flag. Milestone is not strongly held. labels Dec 12, 2022

jaclync added this to the 11.7 milestone Dec 12, 2022

jaclync requested review from itsmeichigo and selanthiraiyan December 12, 2022 06:54

itsmeichigo self-assigned this Dec 12, 2022

itsmeichigo approved these changes Dec 12, 2022

View reviewed changes

jaclync added 4 commits December 14, 2022 14:02

Show the top header in uppercase to match design.

7142d88

Use transparent navigation bar helper.

87be413

Disable interactive dismissal of the store creation flow.

8a9ce6b

jaclync enabled auto-merge December 14, 2022 06:42

jaclync merged commit cddcea4 into trunk Dec 14, 2022

jaclync deleted the feat/profiler-questions branch December 14, 2022 06:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Store creation M3: profiler question - optional category selector #8379

Store creation M3: profiler question - optional category selector #8379

Uh oh!

jaclync commented Dec 12, 2022 •

edited

Loading

Uh oh!

wpmobilebot commented Dec 12, 2022 •

edited

Loading

Uh oh!

itsmeichigo left a comment •

edited

Loading

Uh oh!

itsmeichigo Dec 12, 2022

Uh oh!

jaclync Dec 14, 2022

Uh oh!

itsmeichigo Dec 12, 2022

Uh oh!

jaclync Dec 14, 2022 •

edited

Loading

Uh oh!

jaclync commented Dec 14, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Store creation M3: profiler question - optional category selector #8379

Store creation M3: profiler question - optional category selector #8379

Uh oh!

Conversation

jaclync commented Dec 12, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Why

Changes

Testing instructions

Feature flag enabled

Feature flag disabled

Screenshots

Uh oh!

wpmobilebot commented Dec 12, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

itsmeichigo left a comment • 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!

itsmeichigo Dec 12, 2022

Choose a reason for hiding this comment

Uh oh!

jaclync Dec 14, 2022

Choose a reason for hiding this comment

Uh oh!

itsmeichigo Dec 12, 2022

Choose a reason for hiding this comment

Uh oh!

jaclync Dec 14, 2022 • 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!

jaclync commented Dec 14, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

jaclync commented Dec 12, 2022 •

edited

Loading

wpmobilebot commented Dec 12, 2022 •

edited

Loading

itsmeichigo left a comment •

edited

Loading

jaclync Dec 14, 2022 •

edited

Loading